/* layout */ #wrap {width:100%;overflow:hidden;} /* tablet */ @media only screen and (max-width : 1200px){ body {min-width:100%;} } /* header */ header {position:relative;} .headUtil {position:relative;width:100%;height:100px;background:#fff; border-bottom:1px solid #dbdbdb;} .headUtil > div {position:relative;width:1200px;margin:0 auto; padding-top:20px;} .headUtil h1 {position:absolute; left:0px; top:37%; z-index:101;} .headUtil h1 a {overflow:hidden;display:block;width: 190px;height: 40px;background:url('../../images/kr/common/m_logo.png') no-repeat;background-size:100% auto;text-indent:-9999em;} .headUtil h1 a img {} .headUtil .utilMenu {} .headUtil .topSearch {position:relative; width:520px; margin:0 auto; padding:5px 70px 5px 20px; border-radius:50px; border:3px solid #0089d0;} .headUtil .topSearch select {float:left; width:30%; display:block; padding:0 35px 0 0px; height:44px; vertical-align:middle; border:none; -webkit-appearance: none; /* 네이티브 외형 감추기 */ -moz-appearance: none; appearance: none; font-family: inherit; /* 폰트 상속 */ font-size:16px; font-weight:500; line-height:44px; color:#035328; /* 화살표 모양의 이미지 */ background:#fff url('../../images/kr/common/bg_select_2.png') no-repeat right center; vertical-align:middle;} .headUtil .topSearch .search_txt {float:left; display:block; font-size:16px; width:100%; height:44px; border:none; } .headUtil .topSearch .serch_btn {position:absolute; right:20px; top:5px; width:50px; height:44px; border:none; text-indent:-9999em; background:url('../../images/kr/common/pic_search.png') no-repeat center center;} /* 우측 메뉴 래퍼 - SNS + 사이트 버튼 */ .headUtil .rightMenuWrapper {position:absolute; right:0px; top:50%; transform:translateY(0%); display:flex; align-items:center; justify-content:space-around; min-width:300px;} /* SNS 버튼 */ .headUtil .snsBtns {display:flex; align-items:center; gap:8px; list-style:none; padding:0; margin:0;} .headUtil .snsBtns li {position:relative;} .headUtil .snsBtns li a {display:block; width:24px; height:24px; text-indent:-9999em; background-size:contain; background-repeat:no-repeat; background-position:center;} .headUtil .snsBtns li:nth-child(1) a {background-image:url('../../images/kr/common/icon-instagram.png');} .headUtil .snsBtns li:nth-child(2) a {background-image:url('../../images/kr/common/icon-naverblog.png');} .headUtil .snsBtns li:nth-child(3) a {background-image:url('../../images/kr/common/icon-facebook.png');} .headUtil .snsBtns li a.disabled {cursor:not-allowed; opacity:0.4;} /* 사이트 버튼 */ .headUtil .siteBtn {display:flex; align-items:center; list-style:none; margin:0; padding:0;} .headUtil .siteBtn li {position:relative; padding:0 15px;} .headUtil .siteBtn li:last-child {padding:0 0 0 15px;} .headUtil .siteBtn li:after {position:absolute; right:0px; top:2px; display:inline-block; content:""; width:1px; height:13px; background-color:#ccc; } .headUtil .siteBtn li:last-child:after {display:none;} .headUtil .siteBtn li a {font-size:16px;} /* 상단메뉴 */ .nav-wrap {position:relative; width:100%;height:70px;} .responsive-menu {width:1200px;height:100%;margin:0 auto;padding-top:0px;} .gnbDp-1:before, .gnbDp-1:after{display:table;content:" ";} .gnbDp-1:after {clear:both;} .pcLnb {overflow:hidden; position:absolute; top:0px; left:0px; width:100%; height:70px; z-index:100; background:#fff; border-bottom:1px solid #dbdbdb;} .pcLnb a {display:block;} .pcLnb > div {width:1200px; margin:0 auto;} .pcLnb > div > ul {position:relative; width:100%; } .pcLnb > div > ul > li {position:relative; float:left;width:14.28571428571429%;line-height:70px;} .pcLnb > div > ul > li:after {position:absolute; right:0px; top:28px; display:inline-block; content:""; width:1px; height:13px; background-color:#ccc;} .pcLnb > div > ul > li:last-child:after {display:none;} .pcLnb > div > ul > li > a {display:block; line-height:70px; font-size:1.26em; font-weight:500; text-align:center; color:#272727; } .pcLnb > div > ul > li > a span {-o-transition:color .3s ease; -webkit-transition:color .3s ease; display:block; position:relative; line-height:70px; transition:color .3s ease;white-space:nowrap; font-weight: 500;} .pcLnb > div > ul > li > a span:after {-o-transition:width .2s ease;-webkit-transition:width .2s ease;background:#0089D0;content:"";height:3px;left:0;position:absolute;bottom:0px;transition:width .2s ease;width:0px;} .pcLnb > div > ul > li.on >a, .pcLnb > div > ul > li > a:hover, .pcLnb > div > ul > li > a:focus {text-decoration:none; color:#0089D0; } .pcLnb > div > ul > li.on >a span:after, .pcLnb > div > ul > li > a:hover span:after, .pcLnb > div > ul > li > a:focus span:after {width:100%;} .pcLnb > div > ul > li > div {padding:10px 0; } .pcLnb > div > ul > li > div > ul {} .pcLnb > div > ul > li.on > div {background:#fafafa;} .pcLnb > div > ul > li > div > ul > li {line-height:28px; margin:7px 0;} .pcLnb > div > ul > li > div > ul > li > a {padding:0px 13px; font-size:1.05em; text-align:center; } .pcLnb > div > ul > li > div > ul > li > a:hover, .pcLnb > div > ul > li > div > ul > li > a:focus{color:#0089D0;} .pc-allmenu {position:relative; width:1200px; margin:0 auto;} .pc-allmenu .allmenuBtn {position:absolute; right:0px; top:-48px; font-size:1.26em; font-weight:500; display:inline-block; padding:0 40px; z-index:100;} .pc-allmenu .allmenuBtn i {display:inline-block; width:33px; height:32px; margin-right:7px; background:url('../../images/kr/common/allmenu_pic.png') no-repeat center center; background-size:100% auto; vertical-align:middle;} .side-btns {display:none;} /* header 반응형 */ .mobileBtns{display:none;} #toggle {background:#000;height:100%;min-height:100%;width:0px;position:fixed;top:0;bottom:0;left:0px;z-index:9999;-webkit-transition: all .0s ease;transition: all .4s ease;} #toggle.closed {left:0px;top:0px;bottom:0;right:0;width:100%;height:100%;opacity:0.7;} /* tablet */ @media only screen and (max-width : 1230px){ /* header */ .headUtil > div {width:100%; } /*.headUtil h1 {left:15px;} .headUtil .topSearch {width:480px;} .headUtil .siteBtn {right:15px;} .responsive-menu {width:100%;} .pcLnb > div {width:100%;} .pc-allmenu {width:100%;}*/ /* PC속성 숨기기 */ .headUtil .topSearch {display:none; position:absolute; top:80px; left:0px; width:100%; padding:15px 70px 15px 15px; border:none; border-radius:0px; background-color:#0089D0; z-index:20;} .headUtil .topSearch select {padding:0 35px 0 15px} .headUtil .topSearch .search_txt {padding:0 10px;} .headUtil .topSearch .serch_btn {top:15px; background:#262625 url('../../images/kr/common/pic_search_w.png') no-repeat center center; background-size:27px auto;} .pc-allmenu {display:none;} .headUtil {height:80px;} .headUtil > div {padding:0px;} .headUtil h1 {top:20px; left:45%; margin-left:-59px; } .headUtil h1 a {width:200px; height:41px;} .mobileBtns {display:block; } .mobileBtns .mobileMenu {overflow:hidden; position:absolute; left:15px; top:16px; width:50px; height:50px; background: url('../../images/kr/common/moblie_menu.png') no-repeat; background-size: contain; border:1px solid #dbdbdb; text-indent:-9999em;} .mobileBtns .mobileSearch {position:absolute; right:15px; top:16px; width:50px; height:50px; background: url('../../images/kr/common/m_search.png') no-repeat; background-size: contain; border:1px solid #dbdbdb; text-indent:-9999em;} .headUtil .rightMenuWrapper {position:relative; top:auto; right:auto; transform:none; display:block; min-width:auto;} .headUtil .snsBtns {display:none;} .headUtil .siteBtn {display:none; overflow:hidden; position:relative; width:100%; top:0px; right:auto; transform:none; padding:0 15px; border-bottom:1px solid #eee;} .headUtil .siteBtn li {padding:8px 15px; } .headUtil .siteBtn li:after {top:9px;} .headUtil .siteBtn li:nth-child(1) {padding:8px 0px;} .headUtil .siteBtn li:nth-child(1):after {display:none;} .headUtil .siteBtn li:last-child {float:right; /*padding:8px 0px 8px 15px;*/} .headUtil .siteBtn li:last-child a {display:inline-block; padding:8px 0 8px 23px; background: url('../../images/guide/eng_pic.png') no-repeat left center; background-size:15px auto; cursor:unset;} .headUtil .siteBtn li a {font-size:0.83em;} .nav-wrap {height:auto;} /* pc버젼 메뉴 스타일 리셋 */ .pcLnb {overflow:hidden; position:relative; top:0px; left:0px; width:auto; height:auto; z-index: 100; background:none; border-bottom:none;} .pcLnb > div {width:100%;margin:0; padding:0;} .pcLnb > div:before {height:0;} .pcLnb > div > ul > li {float:none; width:100%;} .pcLnb > div > ul > li > a {border-bottom:none;} .pcLnb > div > ul > li.on >a, .pcLnb > div > ul > li > a:hover, .pcLnb > div > ul > li > a:focus {border-bottom:none;} .pcLnb > div > ul > li > div {padding:0; border:none;} /* 모바일 펼침 메뉴 */ .menuBox {display:block; height:70px; background:url('../../images/common/side_logo.png') no-repeat center 20px; background-size:auto 31px;} #wrap .sideLnb {display:none;position:fixed;left:0;top:0;width:500px;height:100%;background:#262625;/*border-right:1px solid #ddd;*/z-index:99999;overflow-y:auto;font-size:1.1em;} #wrap .sideLnb nav > div > ul {border-bottom:1px solid #333;} #wrap .sideLnb nav > div > ul > li {margin:0px;border-bottom:1px solid #2c3757;border-top:1px solid #2c3757;} #wrap .sideLnb nav > div > ul > li.on {background-color:#fff;} #wrap .sideLnb nav > div > ul > li.on > a {text-decoration:underline;} #wrap .sideLnb nav > div > ul > li > a {display:block; padding:0px 16px; text-align:left; font-weight:400; line-height:50px; color:#fff;font-size:1.2em; background:url('../../images/kr/common/gnb_sub_close.png') no-repeat 95% center; background-size:22px;} #wrap .sideLnb nav > div > ul > li > a:hover, #wrap .sideLnb nav > div > ul > li.on > a {color:#3d4784; font-weight:bold; background:#fff url('../../images/kr/common/gnb_sub_open.png') no-repeat 95% center; background-size:22px;} #wrap .sideLnb nav > div > ul > li .depth2 {border-top:3px solid #333;padding:0 2%;} #wrap .sideLnb nav > div > ul > li .depth2 > li > a {display:block; padding:10px; margin:7px 0; line-height:22px; color:#000; font-weight:bold; border:1px solid #ddd; background:url('../../images/kr/common/gnb_sub02_close.png') no-repeat 95% center; background-size:14px 8px;} #wrap .sideLnb nav > div > ul > li.on .depth2 > li.on > a {background:url('../../images/kr/common/gnb_sub02_open.png') no-repeat 95% center; background-size:14px 8px;} #wrap .sideLnb nav > div > ul > li .depth2 > li > .depth3 {margin-top:-8px; border:solid 1px #ddd; background:#f8f8f8;} #wrap .sideLnb nav > div > ul > li .depth2 > li > .depth3 > ul > li {border-bottom:1px solid #ddd;} #wrap .sideLnb nav > div > ul > li .depth2 > li > .depth3 > ul > li:last-child {border-bottom:none;} #wrap .sideLnb nav > div > ul > li .depth2 > li > .depth3 > ul > li > a {display:block; padding:7px 10px; line-height:1.5; font-size:0.9em; } } /* mobile */ @media only screen and (max-width : 992px){ } @media only screen and (max-width : 797px){ /* 상단 */ .headUtil {/*height:96px;*/} .headUtil h1 {/*top:45px;*/} .mobileBtns .mobileMenu {top:19px; width:40px; height:40px;} .mobileBtns .mobileSearch {top:19px; width:40px; height:40px;} .headUtil .topSearch {/*top: 96px;*/} #wrap .sideLnb {width:300px;} #wrap .sideLnb nav > div > ul > li > a {font-size:0.93em; line-height:40px;} } @media only screen and (max-width : 486px){ .headUtil h1 {left:40%} } /* 푸터 */ #footer {position:relative; background:#2d313a;} #footer nav {height:60px; border-bottom:1px solid #575a61; } #footer .box {position:relative; width:1200px; margin:0 auto; } #footer .copyMenu {overflow:hidden; float:left; overflow:hidden; margin:20px 0; } #footer .copyMenu li {float:left; padding:0 21px; background:url('../../images/kr/common/bg_line.png') no-repeat 99% center; } #footer .copyMenu li:first-child {padding:0 21px 0 0;} #footer .copyMenu li:last-child {background:none;} #footer .copyMenu li .color{font-size:1.06em; color:#cdc105} #footer .copyMenu li a {display:block; color:#fff;} #footer .siteLink {position:relative; float:right; width:210px; background-color:#252931; border-left:1px solid #575a61; border-right:1px solid #575a61; } #footer .siteLink .site-open {display:block; width:100%; padding:0 20px; line-height:59px; font-size:1.06em; color:#fff; text-align:left; background:url('../../images/kr/common/ico_plus.png') no-repeat 90% center; } #footer .siteLink ul {position:absolute; bottom:60px; left:0px; width:100%; padding:20px 0; min-height:150px; background-color:#f5f5f5; } #footer .siteLink ul li {padding:5px 20px;} #footer .siteLink ul li a {display:block; } #footer address {padding:40px 0;} #footer .address {margin-bottom:7px; font-size:1.06em; color:#cccccc; line-height:1.3em; word-break:keep-all; } #footer .copyright {font-size:1.06em; color:#cccccc; word-break:keep-all; } /* SCROLL TO TOP */ .scroll-up {position:fixed;display:none;z-index:999;bottom:1.8em;right:1.8em;} .scroll-up ul{margin:0;padding:0;} .scroll-up li{list-style:none;margin:0;padding:0;} .scroll-up a {background-color:#fff;display:block;width:40px;height:40px;text-align:center;color:#000;font-size:20px;line-height:38px;box-shadow:0px 0px 6px #ccc;} .scroll-up a:hover, .scroll-up a:active {background-color:#f5f5f5;color:#000;} .scroll-up a i.top_ico {display:block; width:18px; height:40px; margin:0 auto; background:url('../../images/kr/common/ico_top.png') no-repeat center center; background-size:100% auto;} /* footer 반응형 */ /* tablet */ @media only screen and (max-width : 1230px){ #footer .box {width:100%; padding:0 0 0 15px;} } /* mobile */ @media only screen and (max-width : 992px){ } @media only screen and (max-width : 797px){ #footer nav {height:auto;} #footer .box {padding:0;} #footer .copyMenu {float:none; margin:0; padding:20px 15px;} #footer .copyMenu li {padding:0 15px;} #footer .copyMenu li:first-child {padding:0 15px 0 0;} #footer .copyMenu li a {font-size:0.83em;} #footer .copyMenu li .color {font-size:0.83em;} #footer .siteLink {float:none; width:100%; border-left:none; border-right:none; border-top: 1px solid #575a61;} #footer .siteLink .site-open {padding:0 15px; font-size:0.83em; background:url('../../images/kr/common/ico_plus.png') no-repeat 97% center; } #footer address {padding:30px 15px;} #footer .address {font-size:0.83em; word-break:keep-all;} #footer .copyright {font-size:0.83em; word-break:keep-all;} } @media only screen and (max-width : 486px){ #footer .copyMenu {padding:20px 0px 10px 0px;} #footer .copyMenu li {margin-bottom:10px;} #footer .copyMenu li:first-child {padding:0 15px;} } a, a:focus, a:hover { cursor: pointer; color: inherit; text-decoration: none; } a:focus, a:hover { cursor: pointer; color: #0089D0; text-decoration: none; }