@charset "utf-8"; /* 브라우저 업데이트 레이어 */ #browserUpdate {position:fixed; display:none; top:150px; left:0; width:100%; height:auto; text-align:center; color:#fff; padding:80px 0; background:#21bbb1; z-index:1000} #browserUpdate h2 {font-size:30px; font-weight:400; line-height:1.2; margin-bottom:20px} #browserUpdate h2:before {font-family:'FontAwesome'; content:'\f071'; margin-right:10px} #browserUpdate p {font-size:14px; line-height:1.7; color:#fff; margin-bottom:50px} #browserUpdate a {display:inline-block; margin:0 5px; padding:8px 0; width:200px; color:#fff; border:1px solid #fff} #browserUpdate a.confirm {color:#037db3 !important; background:#fff} /* 스크롤 버튼 */ #scrollTop {position:fixed; display:none; bottom:30px; left:0; width:100%; height:50px; margin:0 auto; z-index:50} #scrollTop .inner {margin:0 auto; max-width:1400px; height:100%; padding:0 50px; text-align:right} #scrollTop a {display:inline-block; width:45px; height:45px; text-align:center; color:#fff; line-height:45px; border-radius:50%; background:#037db3} #wrap {position:relative; overflow:hidden} /* 헤더 ver2 */ #header {position:absolute; top:0; left:0; width:100%; height:auto; background:#f9f9f9; z-index:100} #header.scroll {position:fixed; left:0; width:100%; background:rgba(255,255,255,.8)} #header > .topbar {background:#444} #header > .topbar > .inner {max-width:1400px; margin:0 auto; padding:0 50px} #header > .topbar > .inner:after {clear:both; display:block; content:''} #header > .topbar > .inner ul li {display:inline-block; font-size:12px; color:#aaa; line-height:40px} #header > .topbar > .inner ul li a {font-size:12px; color:#aaa; transition:all .3s ease} #header > .topbar > .inner ul li a:hover {font-size:12px; color:#eee} #header > .topbar > .inner ul li i {margin-right:8px} #header > .topbar > .inner .left {float:left} #header > .topbar > .inner .right {float:right} #header > .topbar > .inner .left ul li {margin-right:15px} #header > .topbar > .inner .right ul li {margin-left:15px} #header > .topbar > .inner .right ul li i {margin:0} #header > .navbar {position:relative; max-width:1400px; /*height:70px;*/height:100px; margin:0 auto; padding:0 50px} #header > .navbar:after {clear:both; display:block; content:''} #header h1 {float:left; /*width:130px;*/width:202px; padding-top:15px} #header h1 img {display:block; width:100%} #gnb_wrap {height:100%} #gnb_wrap:after {clear:both; display:block; content:''} #gnb_wrap a.gnb_top {display:none} #gnb_wrap button {display:none} #gnb {float:right; height:100%} #gnb > li {position:relative; float:left; height:100%} #gnb > li > a > span {position:relative; padding-bottom:10px} #gnb > li > a > span:before {position:absolute; bottom:0; left:0; width:0; height:2px; content:''; background:#037db3; transition:all .4s ease} #gnb > li:hover > a > span:before {width:100%} #gnb > li > a {display:block; position:relative; /*padding:25px 25px 0 25px;*/padding:35px 25px 0 25px; height:100%; /* font-family:'Montserrat'; */ font-size:16px; font-weight:600; color:#333; z-index:50} #gnb > li > ul.submnu {display:none; position:absolute; /*top:70px;*/top:100px; left:0; min-width:160px; padding:0 20px; border-bottom:1px solid #aaa; background:#fff; opacity:0; filter:alpha(opacity='0'); z-index:110} #gnb > li.on > ul.submnu {display:block} #gnb > li > ul.submnu li {position:relative; padding:5px 0; border-bottom:1px solid #eee} #gnb > li > ul.submnu li:last-child {border-bottom:none} #gnb > li > ul.submnu li:last-child:before {display:none} #gnb > li > ul.submnu li:before {position:absolute; bottom:0; left:0; width:0; height:1px; content:''; background:#037db3; transition:all .3s ease} #gnb > li > ul.submnu li:hover:before {width:100%} #gnb > li > ul.submnu li:hover a{font-weight:500; color:#037db3} #gnb > li > ul.submnu li a {display:block; width:100%; height:100%; line-height:30px; font-size:14px; /*color:#888*/color:#444} #btnNav {display:none; position:absolute; top:20px; right:50px; width:40px; height:40px; border:none; border-radius:2px; background:#037db3; cursor:pointer; z-index:1000} #btnNav span {position:absolute; display:block; left:10px; width:20px; height:2px; background:#fff; transition:all .4s ease} #btnNav span.bar1 {top:12px} #btnNav span.bar2 {top:18px} #btnNav span.bar3 {top:24px} #btnNav.active span.bar1 {top:18px; transform:rotate(45deg)} #btnNav.active span.bar2 {display:none} #btnNav.active span.bar3 {top:18px; transform:rotate(-45deg)} /* 내비게이션 스크롤 */ #nav_scroll {position:absolute; top:111px; left:0; width:100%; height:42px; z-index:70; border-bottom:1px solid #eee; background:#fff} body.main #nav_scroll {position:fixed; top:-42px; left:0; width:100%; border-bottom:none; background:#037db3} #nav_scroll.active {position:fixed !important; top:0; left:0; border-bottom:none; background:#037db3; z-index:90} #nav_scroll .nav_con {position:relative; margin:0 auto; padding:0 50px; max-width:1400px} #nav_scroll .nav_con > ul {margin-bottom:0px !important;} #nav_scroll .nav_con > ul > li {float:left; line-height:42px} #nav_scroll .nav_con > ul > li img {vertical-align:-4px} #nav_scroll .nav_con > ul > li.home {width:50px; border-right:1px solid #eee} #nav_scroll.active .nav_con > ul > li.home {border-right:1px solid #63dacf !important} #nav_scroll .nav_con > ul > li.dropdown {position:relative; width:180px} #nav_scroll .nav_con > ul > li.dropdown:after {position:absolute; top:44%; right:10px; content:''; border-style:solid; border-width:4px; border-color:#999 transparent transparent transparent} #nav_scroll.active .nav_con > ul > li.dropdown:after {border-color:#ccf5f1 transparent transparent transparent} #nav_scroll .nav_con > ul > li.dropdown > a {display:block; text-indent:20px; font-weight:600; color:#666; line-height:42px; border-right:1px solid #eee} #nav_scroll.active .nav_con > ul > li.dropdown > a {border-right:1px solid #63dacf} #nav_scroll .nav_con > ul > li.current > a {color:#037db3} #nav_scroll.active .nav_con > ul > li.dropdown > a {color:#fff} #nav_scroll .nav_con > ul > li.dropdown > div.dropdown_list {display:none;} #nav_scroll .nav_con > ul > li.dropdown > div.dropdown_list ul {padding:20px; border:1px solid #eee;position:absolute; top:42px; margin-left:-1px; width:101%; background:#fff; box-sizing:border-box} #nav_scroll.active .nav_con > ul > li.dropdown > div.dropdown_list {} #nav_scroll.active .nav_con > ul > li.dropdown > div.dropdown_list ul {border:none; border-top:1px solid #037db3; background:#037db3} body.main #nav_scroll .nav_con > ul > li.dropdown > div.dropdown_list {border:none} #nav_scroll .nav_con > ul > li.dropdown > div.dropdown_list li {line-height:22px} #nav_scroll .nav_con > ul > li.dropdown > div.dropdown_list li > a {display:inline-block; font-size:13px; color:#666; padding-bottom:1px; border-bottom:2px solid #fff} #nav_scroll .nav_con > ul > li.dropdown > div.dropdown_list li.on > a {color:#037db3 !important} #nav_scroll.active .nav_con > ul > li.dropdown > div.dropdown_list li.on > a {color:#fff !important} #nav_scroll.active .nav_con > ul > li.dropdown > div.dropdown_list li > a {color:#fff; border-bottom:2px solid #037db3} #nav_scroll .nav_con > ul > li.dropdown > div.dropdown_list li > a:hover {border-color:#037db3} #nav_scroll.active .nav_con > ul > li.dropdown > div.dropdown_list li > a:hover {border-color:#fff} #nav_scroll .nav_con .nav_right {position:absolute; display:none; top:0; right:50px; width:45px; height:inherit} #nav_scroll.active .nav_con .nav_right {display:block !important} #nav_scroll .nav_con .nav_right a {display:inline-block; width:43px; height:100%; text-align:center; line-height:42px; text-indent:-9999em; border-left:1px solid #63dacf} #nav_scroll .nav_con .nav_right a.nav_search {background:url(../img/nav_search.png) center 50% no-repeat} #nav_scroll .nav_con .nav_right a.nav_menu {border-right:1px solid #63dacf; background:url(../images/nav_sitemap.png) center 50% no-repeat} /* 메인비주얼 */ #main_visual {position:relative; top:0; left:0; margin-bottom:50px; overflow:hidden} #main_visual ul.visual_img {position:relative; overflow:hidden} #main_visual ul.visual_img li {position:absolute; top:0; left:0; z-index:5} #main_visual ul.visual_img li.active {position:relative; display:block; z-index:30 !important} #main_visual ul.visual_img li .visual2, #main_visual ul.visual_img li .visual3 {display:none} #main_visual ul.visual_img li div.video-cover {overflow:hidden;} #main_visual ul.visual_img li div.video-cover video {position:absolute;left:0px;top:0px;} #main_visual img {display:block; width:100%; transition:all 6s ease} #main_visual img.load { transform:scale(1.1); -webkit-transform:scale(1.1); -moz-transform:scale(1.1)} #main_visual ul.pagination {position:absolute; bottom:50px; left:50%; margin-left:-43px; width:86px; z-index:40} #main_visual ul.pagination li {position:relative; display:inline-block; width:15px; height:15px; margin:0 6px; border:1px solid #037db3; background:#fff; cursor:pointer; border-radius:50% 50%} #main_visual ul.pagination li.on:before {position:absolute; display:block; width:9px; height:9px; content:''; top:2px; left:2px; background:#037db3; border-radius:50% 50%} #main_visual .typo {position:absolute; /*top:35%;*/top:25%; left:50%; margin-left:-650px; z-index:40} #main_visual .typo span {display:inline-block; font-family: 'Song Myung', serif; font-size:60px; font-weight:400; color:#000; text-shadow:0 2px 2px rgba(0,0,0,.25); margin-bottom:25px;position:relative;letter-spacing: -2px;} #main_visual .typo span b { font-size:84px; font-weight:700; } #main_visual .typo span:before {position:absolute;content:'';height:20px;width:100%;/*bottom:20px;*/bottom:30px;left:0px;background:rgba(255,255,255,1);mix-blend-mode: multiply;opacity:0.5} #main_visual .typo p {display:block; font-family: 'Nanum Myeongjo', serif; font-size: 26px; color:#121212; line-height:1.8; text-shadow:0 2px 2px rgba(0,0,0,.25)} /* 컨텐츠 영역 */ #container:after {clear:both; display:block; content:''; visibility:hidden} #container .section {position:relative; padding:0 0 100px 0; z-index:1} #container .section:after {clear:both; display:block; content:''; visibility:hidden} #container .section .section_con {position:relative; margin:0 auto; padding:0 50px; max-width:1400px} #container .section .section_con:after {clear:both; display:block; content:''; visibility:hidden} #container .section1 {padding-bottom:80px; border-bottom:1px solid #e6e6e6; margin-top:100px; margin-bottom:80px} #container .section2, #container .section3 {padding-bottom:80px; border-bottom:1px solid #e6e6e6; margin-bottom:80px} #container .section1 ul {text-align:justify; overflow:hidden} #container .section1 ul:after {display:inline-block; width:100%; content:''} #container .section1 ul li {position:relative; display:inline-block; width:23.1%; margin-bottom:2.5%; overflow:hidden} #container .section1 ul li.full {width:48.7%} #container .section1 ul li.no-margin {margin-bottom:0} #container .section1 ul li .caption {position:absolute; /*bottom:30px;*/bottom:20px; right:30px; text-align:right; z-index:10} #container .section1 ul li .caption h2 {font-size:20px; font-weight:600; color:#121212; margin-bottom:10px} #container .section1 ul li a img {display:block; width:100%;} #container .section1 ul li .caption p {color:#121212; letter-spacing:1px} /*#container .section1 ul li .desc_box {position:absolute; top:-300px; left:0; width:100%; height:80px; background:url(../images/main_descbox_bg.png); overflow:hidden; z-index:10; transition:all 0.3s ease}*/ #container .section1 ul li .desc_box { position:absolute; top:-380px; left:0; width:100%; height:380px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent); overflow:hidden; z-index:10; transition:all 0.10s ease } #container .section1 ul li:hover .desc_box {top:0; transition:all 0.2s ease-out} #container .section1 ul li .desc_box p {font-size:15px; color:#fff; padding:30px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} #container .section2 h2 {font-size:36px; font-weight:400; color:#333; margin-bottom:70px} #container .section2 ul {text-align:justify} #container .section2 ul:after {display:inline-block; width:100%; content:''} #container .section2 ul li {display:inline-block; width:30%; vertical-align:top} #container .section2 ul li span.icon {display:inline-block; height:50px; line-height:50px; margin-bottom:40px; padding-left:70px; font-weight:600} #container .section2 ul li span.icon1 {background:url(../images/section2_icon1.png) 0 0 no-repeat} #container .section2 ul li span.icon2 {background:url(../images/section2_icon2.png) 0 0 no-repeat} #container .section2 ul li span.icon3 {background:url(../images/section2_icon3.png) 0 0 no-repeat} #container .section2 ul li h3 {position:relative; font-size:18px; font-weight:600; color:#444; margin-bottom:20px; padding-bottom:15px} #container .section2 ul li h3:after {position:absolute; bottom:0; left:0; content:''; width:20px; height:1px; background:#ccc} #container .section2 ul li p.text {font-size:15px; color:#777; line-height:2; margin-bottom:20px} #container .section2 ul li p.date {font-size:15px; color:#000} #container .section2 ul li a:hover span, #container .section2 ul li a:hover h3, #container .section2 ul li a:hover p {color:#037db3} #container .section2 ul li a:hover span.icon {background-position:0 -50px} #container .section3 .left {float:left; width:48%} #container .section3 .right {position:relative; float:right; width:48%} #container .section3 .left h2 {margin-bottom:120px} #container .section3 .left h2 p {font-size:40px; font-weight:600; color:#037db3; letter-spacing:2px; margin-bottom:0px; transition:all .5s ease} #container .section3 .left p.desc {font-size:18px; line-height:1.7; color:#333; margin-bottom:50px} #container .section3 .right .video {position:relative; overflow:hidden; z-index:50} #container .section3 .right .video img {width:100%} #container .section3 .right .video img.play_icon {position:absolute; /*top:40%; left:45%;*/top:35%; left:42%; width:100px; height:100px} #videoClip {display:none; position:absolute; top:0; left:0; width:100%; height:100%; z-index:50} #videoClip iframe {position:absolute; top:0; left:0; width:100%; height:100%} #videoClose {display:none; position:absolute; top:0; left:20px; z-index:40} #videoClose img {display:block} #container .section4 {position:relative; padding:0 0 100px 0} #container .section4 img {width:100%} #container .section4 img.visual2, #container .section4 img.visual3 {display:none} #container .section4 .section_con > div {position:absolute; top:20%; right:100px} #container .section4 .section_con > div > h2 {font-size:48px; color:#fff; margin-bottom:30px} #container .section4 .section_con > div > p {font-size:15px; color:#fff; margin-bottom:30px; line-height:2} #container .section4 .section_con > div > a {display:inline-block; padding:10px 30px; font-size:15px; color:#fff; border:1px solid #fff} #container .section4 .section_con > div > a:hover {border-color:#037db3} #container .section5 ul {text-align:justify} #container .section5 ul:after {display:inline-block; width:100%; content:''} #container .section5 ul li {display:inline-block; width:32%; padding:50px 0; background:#f7f7f7} #container .section5 ul li div {width:80%; margin:0 auto; text-align:center} #container .section5 ul li div h3 {font-size:24px; font-weight:300; color:#333; margin-bottom:60px} #container .section5 ul li div p {margin-bottom:20px; font-size:14px; color:#444; line-height:1.7} #container .section5 ul li div p.text {margin-bottom:0} #container .aside {max-width:1400px; margin:0 auto; padding:0; border:none} #container .aside .section_con {padding:50px 40px !important; border-top:5px solid #eee} #container .aside .section_con > ul {/*text-align:justify;*/text-align:center; overflow:hidden} #container .aside .section_con > ul:after {display:inline-block; width:100%; content:''} #container .aside .section_con > ul > li {display:inline-block; /*width:24%;*/width:14%; vertical-align:top} #container .aside .section_con > ul > li > h3 {margin-bottom:30px} #container .aside .section_con > ul > li > h3 > a {font-size:17px; font-weight:600; color:#037db3; letter-spacing:2px} #container .aside .section_con > ul > li > ul.sub1 {clear:both; overflow:hidden} #container .aside .section_con > ul > li > ul.sub1 > li {float:left; width:50%} #container .aside .section_con > ul > li > ul.sub1 > li > h4 {margin-bottom:20px} #container .aside .section_con > ul > li > ul.sub1 > li > h4 > a {font-size:14px; color:#777; letter-spacing:1px} #container .aside .section_con > ul > li > ul.sub1 > li > h4 > a:hover {text-decoration:underline} #container .aside .section_con > ul > li > ul.sub1 > li > ul > li {margin-bottom:25px} #container .aside .section_con > ul > li > ul.sub1 > li > ul > li > a {font-size:12px; color:#888} #container .aside .section_con > ul > li > ul.sub1 > li > ul > li > a:hover {text-decoration:underline} #container .aside .section_con > ul > li > ul.sub2 {float:left; width:50%; overflow:hidden} #container .aside .section_con > ul > li > ul.sub2 > li {margin-bottom:20px} #container .aside .section_con > ul > li > ul.sub2 > li > h4 {margin-bottom:10px} #container .aside .section_con > ul > li > ul.sub2 > li > h4 > a {font-size:14px; font-weight:400; color:#777; letter-spacing:1px} #container .aside .section_con > ul > li > ul.sub2 > li > h4 > a:hover {text-decoration:underline} #container .aside .section_con > ul > li > ul.sub2 > li > ul > li {margin-bottom:10px} #container .aside .section_con > ul > li > ul.sub2 > li > ul > li > a {font-size:12px; color:#888} #container .aside .section_con > ul > li > ul.sub2 > li > ul > li > a:hover {text-decoration:underline} #container .aside .section_con > ul > li > ul.full {clear:both; float:none; width:100%} #scrollTo {position:fixed; display:none; bottom:15px; right:15px; width:50px; z-index:1000} #scrollTo img {display:block; width:100%} /* Footer */ #footer_wrap {position:relative; font-size:12px; border-top:1px solid #ccc} #footer {position:relative; max-width:1400px; color:#777; margin:0 auto; padding:50px 50px 100px 50px} #footer address {margin-bottom:20px; line-height:1.7} #footer address br {display:none} #footer address span {display:inline-block; margin-left:12px; color:#333} #footer p.copyright {color:#777} #b_logo {clear:both; /*width:85px;*/width:202px; margin-bottom:30px;} #b_logo img {width:100%;vertical-align:top;} #footer .right_con {position:absolute; top:50px; right:50px; text-align:right} #footer .right_con .upper {overflow:hidden} #footer .right_con .upper .banner {display:inline-block; margin-right:20px} #footer .right_con .upper .banner img {display:block; width:100%} #footer .right_con .upper ul.sns {display:inline-block; overflow:hidden;margin:0px;} #footer .right_con .upper ul.sns li {float:left; margin-left:5px} #footer .right_con .upper ul.sns li a {display:inline-block; width:38px; height:38px; border:1px solid #ccc; /*background:url(../images/sns_bg.png) 0 0 no-repeat*/font-size:20px;text-align:center;padding-top:4px;} #footer .right_con .upper ul.sns li a:hover {border-color:#bbb} /*#footer .right_con .upper ul.sns li.fb a {background-position:0 0} #footer .right_con .upper ul.sns li.blog a {background-position:0 -40px} #footer .right_con .upper ul.sns li.pt a {background-position:0 -80px} #footer .right_con .upper ul.sns li.vimeo a {background-position:0 -120px}*/ #footer .right_con .drop_list {position:relative; margin:10px 0} #footer .right_con .drop_list:after {clear:both; display:block; content:''; visibility:hidden} #footer .right_con .drop_list > ul.dropdown {display:inline-block} #footer .right_con .drop_list > ul.dropdown:after {clear:both; display:block; content:''; visibility:hidden} #footer .right_con .drop_list > ul.dropdown > li {position:relative; float:left; margin-left:20px} #footer .right_con .drop_list > ul.dropdown > li:after {position:absolute; top:13px; right:10px; content:''; border-style:solid; border-width:4px; border-color:#ccc transparent transparent transparent} #footer .right_con .drop_list > ul.dropdown > li > a {display:block; width:138px; height:28px; text-align:left; padding-left:10px; color:#999; line-height:28px; border:1px solid #ccc;font-size:13px;} #footer .right_con .drop_list > ul.dropdown > li > ul {display:none; position:absolute; top:27px; left:0; width:100%; border:1px solid #ccc; background:#fff; box-sizing:border-box; z-index:100} #footer .right_con .drop_list > ul.dropdown > li > ul > li {text-align:left} #footer .right_con .drop_list > ul.dropdown > li > ul > li > a {display:block; color:#666; padding:5px 10px;font-size:13px;} #footer .right_con ul.privacy {padding:15px 0} #footer .right_con ul.privacy li {display:inline-block; font-size:12px} #footer .right_con ul.privacy li.divider {padding:0 15px; color:#ccc} #footer .right_con ul.privacy li a {font-size:12px; color:#777} /* Media Queries */ @media screen and (max-width:1500px) { #container .section_con .photo_slide .slide_wrap .tit_box {position:static; top:inherit; right:inherit; width:auto; height:auto; color:#037db3; padding:80px 0 20px 0; background:none} #container .section_con .photo_slide .slide_wrap .tit_box h2, #container .section_con .photo_slide .slide_wrap .tit_box h3 {display:inline-block; font-size:40px} #container .section_con .photo_slide .slide_wrap .tit_box h2 {padding-right:10px} #container .section_con .photo_slide .slide_wrap .tit_box br {display:none} #container .section_con .photo_slide .slide_wrap .photo_list {display:none} #container .section_con .photo_slide .paging {display:none} #container .section_con .photo_slide .photo_swipe {display:block} #container .section_con .photo_slide .paging_m {display:block} } @media screen and (max-width:1400px) { #main_visual .typo {/*top:35%;*/top:20%; left:50px; margin-left:0px; z-index:40} } @media screen and (min-width:1280px) { /* 헤더 ver2 */ #gnb {margin-right:-25px} } @media screen and (min-width:1025px) { } @media screen and (max-width:1280px) { #footer address br {display:block} #footer address span {margin-left:0; margin-right:12px} } @media screen and (max-width:1024px) { /* 헤더 ver2 */ #header > .topbar {display:none} #header h1 {width:120px; padding-top:17px} #header > .navbar {height:70px;} #gnb_wrap {position:fixed; top:0; right:-270px; width:250px; height:100%; background:#fff; box-shadow:-2px 0 6px 0 rgba(0,0,0,.3); z-index:990;} #gnb_wrap a.gnb_top {position:relative; display:block !important; padding:0 0 0 25px; height:80px; font-size:16px; color:#fff; line-height:80px; background:#037db3} #gnb_wrap a.gnb_top > span.nav-home {display:inline-block; width:17px; height:16px; margin-right:10px; background:url(../images/nav_home.png) 0 0 no-repeat; vertical-align:-2px} #gnb_wrap button {display:block; position:absolute; top:20px; right:50px; width:40px; height:40px; border:none; border-radius:2px; background:#333; cursor:pointer} #gnb_wrap button span {position:absolute; display:block; left:10px; width:20px; height:2px; background:#fff; transition:all .4s ease} #gnb_wrap button span.bar1 {top:12px} #gnb_wrap button span.bar2 {top:18px} #gnb_wrap button span.bar3 {top:24px} #gnb_wrap button.active span.bar1 {top:18px; transform:rotate(45deg)} #gnb_wrap button.active span.bar2 {display:none} #gnb_wrap button.active span.bar3 {top:18px; transform:rotate(-45deg)} #gnb {float:none} #gnb > li {float:none; height:auto} #gnb > li > a {height:auto; padding:15px 25px; font-size:16px; border-bottom:1px solid #dedede} #gnb > li > a > span {padding:0} #gnb > li > a > span:before {display:none} #gnb > li > ul.submnu li:before {display:none} #gnb > li.dropdown > a:before {position:absolute; display:block; width:2px; height:14px; right:31px; top:50%; margin-top:-7px; content:''; background:#aaa; transition:all .3s ease} #gnb > li.dropdown > a:after {position:absolute; display:block; width:14px; height:2px; right:25px; top:50%; margin-top:-1px; content:''; background:#aaa} #gnb > li.open > a:before {transform:rotate(90deg)} #gnb > li > ul.submnu {display:none; position:static; width:100%; padding:0; background:#f6f6f6; opacity:1 !important; filter:alpha(opacity='100') !important; box-shadow:none} #gnb > li > ul.submnu li {padding:0; border-color:#dedede} #gnb > li > ul.submnu li a {font-size:15px; padding:10px 25px} #gnb_mask {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:.6; filter:alpha(opacity='60'); z-index:200} #btnNav {display:block; top:15px} #main_visual ul li .visual1, #main_visual ul li .visual3 {display:none} #main_visual ul li .visual2 {display:block !important} #main_visual .typo {top:35%; } #main_visual .typo span {font-size:50px;margin-bottom:15px;} #main_visual .typo span:before {position:absolute;content:'';height:10px;width:100%;/*bottom:15px;*/bottom:35px;left:0px;} #main_visual .typo span b { font-size:72px; } #main_visual .typo p {padding-right:50px;} #container .section .section_con img.img_mob {display:none} #container .section1 .section_con ul li {width:48%; margin-bottom:4%} #container .section1 .section_con ul li.full {width:100%} #container .section2 .section_con ul li {width:48%} #container .section2 .section_con ul li.last {display:none} #container .section3 .section_con .left h2 p {font-size:36px} #container .section3 .section_con .left h2 p.tit2 {margin-left:-10px} #container .section3 .section_con .right .video img.play_icon {width:60px; height:60px; top:35%; left:40%} #container .section4 .section_con img.visual1, #container .section4 .section_con img.visual3 {display:none} #container .section4 .section_con img.visual2 {display:block} #container .section4 .section_con > div > h2 {font-size:42px} #container .section4 .section_con > div > p {line-height:1.8; margin-bottom:20px} #container .section5 ul:after {clear:both; display:block; content:''; visibility:hidden} #container .section5 ul li {position:relative; display:block; width:100%; margin-bottom:50px; padding:0; border:1px solid #dedede; background:#f7f7f7; box-sizing:border-box} #container .section5 ul li.last {margin-bottom:0} #container .section5 ul li div {text-align:left; width:300px; margin:0; padding:40px} #container .section5 ul li div p.icon {position:absolute; top:40px; right:40px; margin:0} #container .aside {padding-bottom:100px} #container .aside .section_con {padding:0 50px; border:none} #container .aside .section_con > ul {text-align:justify; border-top:5px solid #eee} #container .aside .section_con > ul:after {clear:both; display:block; content:''; visibility:hidden} #container .aside .section_con > ul > li {display:block; width:100%} #container .aside .section_con > ul > li > h3 {margin:0; padding:0; border-bottom:1px solid #dedede} #container .aside .section_con > ul > li > h3 > a {display:block; width:100%; height:100%; padding:40px 0; background:url(../images/sitemap_plus.png) right 50% no-repeat} #container .aside .section_con > ul > li > h3 > a.on {background:url(../images/sitemap_minus.png) right 50% no-repeat} #container .aside .section_con > ul > li > ul.sub1 {display:none; clear:both; overflow:hidden} #container .aside .section_con > ul > li > ul.sub1 > li {float:none; width:100%} #container .aside .section_con > ul > li > ul.sub1 > li > h4 {margin-bottom:0} #container .aside .section_con > ul > li > ul.sub1 > li > h4 > a {display:block; padding:25px 0 25px 50px; font-size:15px; font-weight:400; background:url(../images/sitemap_plus.png) left 50% no-repeat; background-size:20px} #container .aside .section_con > ul > li > ul.sub1 > li > h4 > a.on {background:url(../images/sitemap_minus.png) left 50% no-repeat; background-size:20px} #container .aside .section_con > ul > li > ul.sub1 > li > h4 > a:hover {text-decoration:none} #container .aside .section_con > ul > li > ul > li > ul {display:none} #container .aside .section_con > ul > li > ul > li > ul > li {margin-bottom:0 !important} #container .aside .section_con > ul > li > ul > li > ul > li > a {display:block; padding:10px 0 10px 50px} #container .aside .section_con > ul > li > ul > li > ul > li > a:hover {text-decoration:underline} #container .aside .section_con > ul > li > ul.sub2 {display:none; float:none; width:100%; overflow:hidden} #container .aside .section_con > ul > li > ul.sub2 > li {float:none; width:100%; margin:0} #container .aside .section_con > ul > li > ul.sub2 > li > h4 {margin-bottom:0} #container .aside .section_con > ul > li > ul.sub2 > li > h4 > a {display:block; padding:25px 0 25px 50px; font-size:15px; font-weight:400; /*background:url(../images/sitemap_plus.png) left 50% no-repeat;*/ background-size:20px} #container .aside .section_con > ul > li > ul.sub2 > li > h4 > a:hover {text-decoration:none} #container .aside .section_con > ul > li > ul.sub2 > li > ul > li {margin-bottom:0} #container .aside .section_con > ul > li > ul.sub2 > li > ul > li > a {display:block; padding:10px 0 10px 50px} #container .aside .section_con > ul > li > ul.sub2 > li > ul > li > a:hover {text-decoration:underline} #container .aside .section_con > ul > li > ul.full {clear:both; float:none; width:100%} } @media screen and (max-width:800px) { #footer {padding:50px 30px} #footer .right_con {width:100%} #footer .right_con {position:absolute; right:0; width:100%; /*padding:0 30px;*/padding:30px 30px 0; box-sizing:border-box} #footer .right_con .drop_list > ul.dropdown {display:block; /*margin-top:30px*/} #footer .right_con .drop_list > ul.dropdown > li { float:right; /*width:49%;*/width:30%; margin-left:2%} #footer .right_con .drop_list > ul.dropdown > li:first-child {margin-left:0} #footer .right_con .drop_list > ul.dropdown > li > a {/*width:98%;*/width:100%; padding-left:2%} #footer .right_con .drop_list > ul.dropdown > li > ul {box-sizing:content-box} #footer .right_con ul.privacy {text-align:center} #footer address {/*margin:100px 0 20px 0*/margin-bottom:20px} } @media (max-width:640px) and (min-width:100px) { /* 헤더 ver2 */ #header > .navbar {padding:0 20px} #header h1 {width:100px; padding-top:20px} #btnNav {top:15px; right:20px} #gnb_wrap button {right:20px} #scrollTo {width:40px} #main_visual ul li .visual1, #main_visual ul li .visual2 {display:none !important} #main_visual ul li .visual3 {display:block !important} #main_visual .typo {top:30%;left:30px;} #main_visual .typo span {font-size:30px; margin-bottom:20px} #main_visual .typo span:before { bottom:15px; } #main_visual .typo span b { font-size:36px; } #main_visual .typo p {font-size:13px} #container .section .section_con {padding:0 30px !important} #container .no-padding .section_con {width:inherit !important; padding-left:0 !important; padding-right:0 !important} #container .section .section_con img.img_mob {display:block} #container .section .section_con img.img_pc {display:none} #container .section1 .section_con ul li .desc_box {height:45px} #container .section1 .section_con ul li .desc_box p {font-size:12px; padding:15px} #container .section1 .section_con ul li .caption {/*bottom:20px;*/bottom:0px; right:20px} #container .section1 .section_con ul li .caption h2 {font-size:14px; margin-bottom:0px} #container .section1 .section_con ul li .caption p {font-size:10px} #container .section1, #container .section2, #container .section3 {margin-bottom:35px; padding-bottom:35px} #container .section2 .section_con ul li {width:100% !important; margin-bottom:25px; padding-bottom:30px; border-bottom:1px solid #dedede} #container .section2 .section_con ul li.last {display:block !important; border-bottom:none} #container .section3 .section_con .left {float:none; width:100%; margin-bottom:50px} #container .section3 .section_con .left h2 {margin-bottom:30px; width:100%} #container .section3 .section_con .left p {margin-bottom:15px} #container .section3 .section_con .left p br {display:none} #container .section3 .section_con .left p.tit1 {width:118%} #container .section3 .section_con .left p.tit2 {width:103%} #container .section3 .section_con .left p.tit3 {width:141%} #container .section3 .section_con .right {float:none; width:100%} #container .section3 .section_con .right .video {width:100%} #container .section3 .section_con .right .video img.play_icon {top:40%; left:45%} #container .section4 .section_con img.visual1, #container .section4 .section_con img.visual2 {display:none} #container .section4 .section_con img.visual3 {display:block} #container .section4 .section_con > div {top:25%; right:10%; width:70%} #container .section4 .section_con > div > h2 {font-size:18px; margin-bottom:15px} #container .section4 .section_con > div > p {margin-bottom:15px} #container .section4 .section_con > div > p, #container .section4 .section_con > div > a {/*font-size:12px*/font-size:11px} #container .section5 ul li div {text-align:center; width:auto; padding:25px} #container .section5 ul li div p.icon {position:inherit; margin-bottom:20px} #container .aside {padding-bottom:0} #container .aside .section_con > ul > li > h3 > a.on {background-size:20px} #container .aside .section_con > ul > li > h3 > a {display:block; width:100%; height:100%; padding:20px 0 !important; font-size:16px; background:url(../images/sitemap_plus.png) right 50% no-repeat; background-size:20px} #container .aside .section_con > ul > li > ul > li > h4 > a {display:block; padding:10px 0 10px 25px !important; font-size:15px !important; font-weight:400; /*background:url(../images/sitemap_plus.png) left 50% no-repeat !important;*/ background-size:10px !important} #container .aside .section_con > ul > li > ul > li > ul > li > a {display:block; padding-left:25px !important} #container .sub_section1 h2.main_tit {padding:0; font-size:24px} #container .sub_section1 h2.main_tit {margin-bottom:35px} #container .sub_section2 {margin-bottom:35px !important; padding-bottom:35px !important} #container .sub_section2 > .section_con > ul > li .text_effect > li > .txt {font-size:24px !important} #container .sub_section2 .txt_box {margin-top:35px !important} #container .sub_section2 .txt_box p.desc {margin-bottom:15px !important} #container .section .section_con .con_box {padding:15px 25px} #container .section .section_con .con_box > div {float:none !important; width:100% !important} #container .section .section_con .con_box dl dt, #container .section .section_con .con_box dl dd {font-size:12px} #container .sub_section2 > .section_con > h3 {font-size:24px !important; margin-bottom:25px} #container .section_con ul.tpl_list {margin-bottom:0} #container .sub_section2 > .section_con > ul.tpl_list li {width:100% !important; height:initial} #container .section_con ul.tpl_list li .allocation_inner p.img {position:static} #container .section_con ul.tpl_list li .allocation_inner p.txt {margin-bottom:30px} #container .sub_section2 > .section_con p.main_desc {margin-bottom:30px} #container .sub_section2 .section_con .process_box {padding:30px 0} #container .section_con ul.prcs_list li {background:url(../images/process_arrow.png) right center no-repeat; background-size:16px} #container .section_con ul.prcs_list li p.txt {font-size:12px} #container .sub_section3 .wrap_type1 .center {margin-right:25px; padding-top:25px} #container .sub_section3 .wrap_type1 .right p.img {margin-bottom:25px} #container .sub_section3 ul.text_effect li .txt {font-size:24px} #container .sub_section3 .wrap_type1 .right h3 p span {font-size:24px; margin:0 !important} #container .sub_section3 .wrap_type1 .right h3 p {font-size:inherit} #container .sub_section4 {padding-top:40px} #container .no-padding .section_con .left_header {padding:0 30px} #container .section_con .left_header p.icon img {width:40px} #container .section_con .left_header p.desc {font-size:12px; line-height:1.6} #container .section_con .right_con {margin-top:35px} #container .section_con .photo_slide {padding:0} #container .section_con .photo_slide .slide_wrap .tit_box {padding:0 30px 15px 30px} #container .section_con .photo_slide .slide_wrap .tit_box h2, #container .section_con .photo_slide .slide_wrap .tit_box h3 {font-size:20px !important} #container .section_con .photo_slide .slide_wrap .tit_box h2 {padding-right:5px} #container .section_con .photo_slide .paging_m {font-size:18px; text-align:center; margin:40px 0 60px 0} #container .section_con .photo_slide .paging_m a img {width:12px; vertical-align:-5px} #container .section_con .map_list li {margin-bottom:30px; padding:0 30px} #container .section_con .map_list li .map_list_wrap h3 {font-size:17px; margin-bottom:10px} #container .section_con .map_list li .map_list_wrap p {font-size:15px} #container .section_con .map_list li .map_list_wrap p.old {margin-bottom:10px} #container .section_con .map_list li .map_list_wrap p.tel, #container .section_con .map_list li .map_list_wrap p.fax {font-size:13px} #container .section_con .map_list li .map_list_wrap a.pointer {bottom:30px; right:30px} #container .section_con .map_list li .map_list_wrap {padding-bottom:25px} #footer_wrap {border-top:none} #b_logo {/*width:60px;*/} #footer address {/*margin-top:130px*/} #footer .right_con .upper .banner {width:75px} #footer .right_con .upper ul.sns li a {width:32px; height:32px;padding-top:0px;} #footer .right_con .upper .banner {vertical-align:10px} } @media screen and (max-width:480px) { #container .section4 .section_con > div {right:15%} #container .section4 .section_con > div > a {display:none} #b_logo {width:160px;} #footer address {/*margin-top:150px*/} #footer .right_con {/*top:90px*/top:40px} #footer .right_con .upper .banner {position:absolute; top:5px; left:30px; width:100px} #footer .right_con .drop_list {/*margin:-20px 0 10px 0*/margin:0px 0 10px 0} #footer .right_con .drop_list > ul.dropdown > li { width:40%; } #footer .right_con ul.privacy li.divider {padding:0 5px} }