/*-------------------------layout_kor.css------------------------------------*/ @charset "utf-8"; /* 2015-10-05 CSS CENTUMSOFT */ /** -- 접근성 전용 */ /* 접근성 outline */ a:focus-visible, button[type="button"]:focus-visible, button[type="submit"]:focus-visible, select:focus-visible, input[type="text"]:focus-visible, input[type="submit"]:focus-visible {outline:rgb(59, 153, 252) solid 3px;outline-offset:-3px} .board-search-wrap .btn-srh:focus-visible, .pagelist a:focus-visible, a.bp-btn:focus-visible, a:focus:not(:focus-visible), button[type="button"]:not(:focus-visible), button[type="submit"]:not(:focus-visible), select:not(:focus-visible), input[type="text"]:not(:focus-visible), .mSch-sec .mSch-box button::not(:focus-visible) {outline:0 !important} .mSch-sec .mSch-box input[type="text"]:focus-visible, .mSch-sec .mSch-box button:focus-visible {outline:#da262e dashed 4px;outline-offset:-2px} .mNews a:focus-visible {outline:rgb(59, 153, 252) dashed 4px;outline-offset:-2px} .mNews .btn-more:focus-visible, .mboard-sec .mtab .btn-more:focus-visible {outline:rgb(59, 153, 252) solid 3px;outline-offset:0} .msec04 .mmon-list button:focus-visible {outline-color:#da262e;outline-offset:0} .msec05 .mInfo-sec .mInfo-box a:focus-visible img {outline:#da262e dashed 4px;outline-offset:-4px} .board-view-more li a:before {content:"";display:block;position:absolute;left:0;top:0;width:100%;height:100%;outline:rgb(59, 153, 252) solid 3px;outline-offset:-3px;box-sizing:border-box;opacity:0;z-index:10} .board-view-more li a:focus-visible:before {opacity:1} /* 접근성컬러 */ #cont-navi .home:focus-visible {outline:#da262e dashed 4px;outline-offset:-3px} #cont-navi .cont-ctrl-btns > button:focus-visible {outline:#da262e dashed 4px;outline-offset:-3px} #doc-wrap .mInfo-top .mInfo-top-right .mInfo-grade {color: #9F6C06} #doc-wrap .mQuick-sec .mQuick-tit-box p {color:#fff} #doc-wrap .btn-cmt:focus-visible {outline:#da262e dashed 4px;outline-offset:-2px} .orgCon-wr .lv3 .org-list a.on {background-color:#008451 !important;color:#fff} .orgCon-wr .lv3 .org-list a.on > span {color:#fff !important} #toppop.toppop02 .wpop-ctrl-btns .toppop-dots .owl-dot span {background-color:#fff !important} #intro-wrap .intro-link-list .link-kor {background-color:#009F8A} #intro-wrap .intro-link-list .link-apply3 {background-color:#0E98C6 !important} /* 기존파일 시작 */ #doc-wrap {position:relative;overflow:hidden;margin:0 auto} .div-cont {position:relative;max-width:1400px;margin:0 auto} @media all and (max-width:1399px){ #doc-wrap {min-width:320px} .div-cont {margin:0 30px} } @media all and (max-width:768px){ .div-cont {margin:0 15px} } @media all and (max-width:499px){ .div-cont {margin:0 10px} } /* 스킵네비게이션 */ #skipNavi {height:0} #skipNavi .skipLink {position:absolute;top:-1000px;left:-1000px;overflow:hidden;z-index:5000} /* #skipNavi .skipLink:focus, #skipNavi .skipLink:active {top:0;left:0;padding:10px 20px;background:#1e64ba;color:#fff} */ #skipNavi .skipLink:focus {top:0;left:0;padding:10px 20px;background:#1e64ba;color:#fff}/* 접근성용 active 잠시 지움 */ #skipNavi .skipLink:focus-visible {outline:#da262e solid 3px} #skipNavi .skipLink:not(:focus-visible) {outline:0} /* 레이아웃 */ #header-wrap {position:relative;height:160px;margin:0 auto} #header-wrap .btn-search {display:none} #mcontainer-wrap {position:relative;width:100%;margin-top:-160px} #container-wrap {} #mcontainer {padding-top:160px} #container {position:relative;max-width:1400px;margin:0 auto} #container:after {content:'';clear:both;display:block} .userGuide-wr .userGuide {display:none} /*이부분 접근성일 때만 주석.headerFixed #header-wrap {position:fixed;left:0;top:0;width:100%;z-index:3001;background:#fff;margin:-50px 0 0} .headerFixed #header-wrap:after {content:"";display:block;position:absolute;width:100%;height:1px;background:#ddd;left:0;top:100%;z-index:500} .headerFixed #container-wrap {padding-top:160px} .headerFixed #container {padding-top:160px} 여기까지*/ /* .headerFixed #mainNavi .mn_a1 {padding:25px 0 28px} .headerFixed #smart-quick-Navi .role-head {height:75px;margin:40px 0 0;} .headerFixed #smart-quick-Navi .role-head .trigger .p1 {display:none} .headerFixed #smart-quick-Navi .role-head .trigger .p2 {padding:0 0 25px;} */ @media all and (max-width:999px) { #header-wrap {height:auto} #header {height:80px} /*이부분 접근성일 때만 주석#header {border-bottom:1px solid #dcdcdc;height:80px} .headerFixed #header-wrap {margin-top:-40px} .headerFixed #container-wrap {padding:115px 0 0} .headerFixed #mainNavi-wrap {top:40px} .headerFixed #mn-ctrs-btns {top:-27px} 여기까지*/ } /* contents */ #contents {max-width:100%;margin-top:65px;word-break:keep-all;word-wrap:break-word} #contents .cont-top {position:relative;margin-bottom:70px} #contents .cont-top .cont-tit {color:#111;font-size:40px;font-weight:700;line-height:1.2;text-align:center} #contents .cont-top.m-tab-tit .cont-tit.m-cont-tit {display:none} #contents #cont {min-height:600px;padding-bottom:100px;color:#555;font-size:18px;font-weight:400;line-height:1.667;box-sizing:border-box} #contents #cont:after {content:"";display:block;clear:both} @media all and (max-width:1199px) and (min-width:800px) { #contents #cont {min-height:700px} } @media all and (max-width:999px) { #contents {margin-top:45px} #contents .cont-top {margin-bottom:25px} #contents .cont-top .cont-tit {font-size:35px} #contents #cont {font-size:17px;padding-bottom:50px} /* #contents #cont {font-size:18px;padding-bottom:50px} */ } @media all and (max-width:799px) { #contents .cont-top.m-tab-tit .cont-tit {display:none} #contents .cont-top.m-tab-tit .cont-tit.m-cont-tit {display:block} } @media all and (max-width:768px) { #contents {margin-top:30px} #contents .cont-top {margin-bottom:20px;text-align:center} #contents .cont-top .cont-tit {font-size:26px} #contents #cont {padding-bottom:40px;font-size:16px;line-height:1.6} } @media all and (max-width:499px){ #contents #cont {padding-bottom:30px;font-size:15px;line-height:1.571} } /* cont-navi */ .cont-navi-wr {position:relative;z-index:21;box-sizing:border-box} .cont-navi-wr:before, .cont-navi-wr:after {content:"";display:block;position:absolute;left:0;background-color:#dcdcdc;width:100%;height:1px;z-index:1} #cont-navi {position:relative;display:block;height:70px;max-width:1600px;margin:0 auto;z-index:2} #cont-navi:after {content:"";display:block;clear:both} #cont-navi .home {display:block;float:left;position:relative;background-color:#008451;width:70px;height:100%;z-index:1} #cont-navi .home:before, #cont-navi .home:after {content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;transition:all .3s ease} #cont-navi .home:before {background:url(/resources/_Templet/Layout/layout_kor/_Img/layout_spr.png) no-repeat 0 -28px;width:25px;height:25px;z-index:2} #cont-navi .home:after {background-color:#000;width:100%;height:100%;opacity:0} #cont-navi .home:focus:after, #cont-navi .home:hover:after {opacity:.1} #cont-navi dl {position:relative;float:left;width:auto;min-width:210px;max-width:310px;height:100%;padding:0 1px;box-sizing:border-box;z-index:5} #cont-navi dl:before {content:"";display:block;position:absolute;right:0;top:50%;background-color:#eaeaea;width:1px;height:50px;margin-top:-25px} #cont-navi dt {display:block;position:relative;height:100%} #cont-navi dt:after {content:"";display:block;position:absolute;left:0;bottom:0;background-color:#008451;width:100%;height:0;transition:all .3s ease} #cont-navi .on dt:after {height:3px} #cont-navi dt a {display:block;position:relative;height:100%;padding:0 60px 0 28px;font-size:0} #cont-navi dt a:before {content:"";display:inline-block;width:0;height:100%;vertical-align:middle} #cont-navi dt a:after {/*content:"";display:block;position:absolute;right:28px;top:29px;background:url(/resources/_Templet/Layout/layout_kor/_Img/layout_spr.png) no-repeat -127px 0;width:18px;height:12px;transition:all .3s ease*/} #cont-navi dt a:after {content: "";display: block;position: absolute;right: 28px;top: 25px;width: 9px;height: 9px;transition: all .3s ease;border-bottom: 3px solid #767676;border-right: 3px solid #767676;transform: rotate(45deg);}/*접근성*/ #cont-navi dt a .txt {display:inline-block;position:relative;max-width:100%;color:#333;font-size:18px;letter-spacing:-.025em;vertical-align:middle;transition:all .3s ease} #cont-navi .on dt a:after {transform:rotate(180deg);transform:rotate(225deg);top: 29px;}/*접근성*/ #cont-navi .on dt a .txt {color:#008451;font-weight:700} #cont-navi .sub-list {display:none;position:absolute;top:100%;left:0;background-color:#fff;border:1px solid #dcdcdc;border-top:0;width:100%;/*max-height:360px;접근성*/box-sizing:border-box} #cont-navi .sub-list ul {} #cont-navi .sub-list .mn_a1 {display:block;position:relative;border-bottom:1px solid #dcdcdc;padding:0 40px 0 30px;height:60px;box-sizing:border-box} #cont-navi .sub-list li:last-child .mn_a1 {border-bottom:0} #cont-navi .sub-list .mn_a1:before {content:"";display:inline-block;width:0;height:100%;vertical-align:middle} #cont-navi .sub-list .mn_a1:after {content:"";display:block;position:absolute;right:30px;top:50%;background-color:#fff;border-radius:50%;width:7px;height:7px;margin-top:-4px;transition:all .3s ease} #cont-navi .sub-list .mn_a1[target=_blank] span:after {content:"";display:none;position:absolute;right:-34px;top:50%;background:url(/resources/_Templet/Header/header_kor/_Img/mNavi_new_ico.png) no-repeat;width:15px;height:15px;margin-top:-7px;vertical-align:middle} #cont-navi .sub-list .mn_a1 span {display:inline-block;color:#555;font-size:17px;letter-spacing:-.025em;vertical-align:middle} #cont-navi .sub-list li.isOver {} #cont-navi .sub-list li a:hover, #cont-navi .sub-list li a:focus, #cont-navi .sub-list li.isOver a {background-color:#008451} #cont-navi .sub-list li a:hover span, #cont-navi .sub-list li a:focus span, #cont-navi .sub-list li.isOver a span {font-weight:500;color:#fff} #cont-navi .sub-list .isOver .mn_a1:after, #cont-navi .sub-list .mn_a1:hover:after {} #cont-navi .sub-list li:hover span {color:#513d3b} .doc-eng #cont-navi dl {min-width:230px;max-width:300px} .doc-eng #cont-navi dt a .txt {font-size:15px} .cont-ctrl-btns {position:absolute;right:0;top:0;height:70px;font-size:0} .cont-ctrl-btns > button {position:relative;border:0;width:70px;height:70px;transition:background .3s ease} .cont-ctrl-btns > button:before {content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;background:url(/resources/_Templet/Layout/layout_kor/_Img/layout_spr.png) no-repeat;width:25px;height:25px;margin:auto;z-index:2} .cont-ctrl-btns > .btn-print {background:#f1f1f1} .cont-ctrl-btns > .btn-print:before {background-position:-105px -28px} .cont-ctrl-btns > .btn-print:hover {background:#9cb1bd;background:#037cbd;}/*뒤에꺼 접근성*/ .cont-ctrl-btns > .btn-print:hover:before {background-position:-140px -28px} .cont-ctrl-btns > .btn-share {background:#e0e0e0;} .cont-ctrl-btns > .btn-share:before {background-position:-35px -28px} .cont-ctrl-btns > .btn-share:hover, .cont-ctrl-btns > .btn-share.is-open {background:#7294a7;background:#037cbd;}/*뒤에꺼 접근성*/ .cont-ctrl-btns > .btn-share:hover:before, .cont-ctrl-btns > .btn-share.is-open:before {background-position:-70px -28px} .cont-ctrl-btns .sns-list {display:none;position:absolute;top:100%;left:0;background-color:#547b96;border-radius:0 0 50px 50px;width:70px;padding-bottom:15px;overflow:hidden;box-sizing:border-box;z-index:100} .cont-ctrl-btns .sns-list ul {}} .cont-ctrl-btns .sns-list li {position:relative;box-sizing:border-box} .cont-ctrl-btns .sns-list li button {display:block;position:relative;background:none;border:0;border:0;width:100%;height:60px;box-sizing:border-box} .cont-ctrl-btns .sns-list li button:before {content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;background:url(/resources/_Templet/Layout/layout_kor/_Img/layout_spr.png) no-repeat;width:25px;height:25px;margin:auto} .cont-ctrl-btns .sns-list .btn-insta:before {background-position:0 -63px} .cont-ctrl-btns .sns-list .btn-fb:before {background-position:-35px -63px} .cont-ctrl-btns .sns-list .btn-tw:before {background-position:-70px -63px} .cont-ctrl-btns .sns-list .btn-insta:hover:before {/*background-position:-105px -63px 접근성*/} .cont-ctrl-btns .sns-list .btn-fb:hover:before {/*background-position:-140px -63px 접근성*/} .cont-ctrl-btns .sns-list .btn-tw:hover:before {/*background-position:-175px -63px 접근성*/} @media all and (max-width:999px) { #cont-navi {height:55px} #cont-navi dl {min-width:190px;max-width:220px} #cont-navi dt a {padding:0 35px 0 20px} #cont-navi dt a:after {right:15px;top:23px} #cont-navi dt a:after {top: 25px;width: 6px;height: 6px;border-bottom: 2px solid #767676;border-right: 2px solid #767676;}/*접근성*/ #cont-navi .on dt a:after {top: 27px;}/*접근성*/ #cont-navi dt a .txt {font-size:16px} #cont-navi .home {width:55px} #cont-navi .sub-list .mn_a1 {height:50px;padding:0 25px 0 20px} #cont-navi .sub-list .mn_a1 span {font-size:14px} #cont-navi .sub-list .mn_a1 span:after {top:3px;right:15px} .doc-eng #cont-navi dl {min-width:190px;max-width:250px} .doc-eng #cont-navi dt a .txt {font-size:14px} .cont-ctrl-btns {height:55px} .cont-ctrl-btns > button {width:55px;height:55px} .cont-ctrl-btns > .btn-print {display:none} .cont-ctrl-btns .sns-list {width:55px} } @media all and (max-width:859px) { .doc-eng #cont-navi dl {max-width:215px} } @media all and (max-width:768px) { #cont-navi {height:0;overflow:hidden} #contNavi {display:block} #contNavi .navi-menu {font-size:0;overflow:hidden;} #contNavi .navi-menu li {position:relative;display:inline-block;padding-left:26px;color:#666;font-size:13px;letter-spacing:-.05em;vertical-align:top} #contNavi .navi-menu li:before, #contNavi .navi-menu li:after {content:"";position:absolute;top:50%;background-color:#666;width:1px;height:6px;margin-top:-4px} #contNavi .navi-menu li:before {left:11px;transform:rotate(135deg)} #contNavi .navi-menu li:after {left:11px;top:11px;transform:rotate(-135deg)} #contNavi .navi-menu li.home, #contNavi .navi-menu li:nth-child(2) {padding-left:0} #contNavi .navi-menu li.home:before, #contNavi .navi-menu li.home:after, #contNavi .navi-menu li:nth-child(2):before, #contNavi .navi-menu li:nth-child(2):after {display:none} #contNavi .navi-menu li.home {background:url(/resources/_Templet/Layout/layout_hub/_Img/ico_home_m.png) no-repeat center;width:15px;height:15px;margin-right:13px} .cont-ctrl-btns {display:none} } /* keyframes *********************************************/ @keyframes buzz { 10%, 30% {transform: translateX(3px) rotate(2deg)} 20%, 40% {transform: translateX(-3px) rotate(-2deg)} 50%, 70% {transform: translateX(2px) rotate(1deg)} 60%, 80% {transform: translateX(-2px) rotate(-1deg)} 90% {transform: translateX(1px) rotate(0)} 100% {transform: translateX(-1px) rotate(0)} } @keyframes bounce { 0% { top: 0; } 50% { top: -7px; } 100% { top: 0; } } @keyframes twitt{ 0% {top:0;animation-timing-function:ease} 50% {top:-10px} 100% {top:0;animation-timing-function:ease} } @keyframes rotate { 0% {transform: rotateY(0deg)} 100% {transform: rotateY(360deg)} } /* 2026 접근성 */ a:focus-visible, button[type="button"]:focus-visible, button[type="submit"]:focus-visible, select:focus-visible, input[type="text"]:focus-visible, input[type="submit"]:focus-visible {outline:#0015FF dashed 3px;outline-offset:-3px} /*-------------------------gnavi_eng.css------------------------------------*/ /* global */ /* 영문 */ .isSub #toppop {display:none !important} #header .logo a span em {display:none} #mainNavi .depth2-wrap .depth1-tit .stxt {display:none !important} @media all and (min-width:1000px) { #header-wrap {} #header-wrap #header .logo a img {width:auto} #header .logo a span em {display:none} #header-wrap, #header #mainNavi-wrap, #header #mainNavi {height:109px} #header #mainNavi .mn_a1 {padding:35px 0 31px;font-size:22px} #header #mainNavi .depth2-wrap {top:109px} .headerFixed #header-wrap {margin-top:0} .headerFixed #container-wrap {padding-top:90px} } @media all and (max-width:1599px) and (min-width:1000px) { #header-wrap #header .logo {left:30px !important} } @media all and (max-width:1399px) and (min-width:1000px) { #header-wrap #header .logo {top:37px} #header-wrap #header .logo a img {width:200px} #header-wrap, #header #mainNavi-wrap, #header #mainNavi {height:100px} #header #mainNavi .mn_a1 {padding-top:45px} } @media all and (max-width:999px) { .headerFixed #header-wrap {margin-top:0} .headerFixed #mainNavi-wrap {top:0 !important} .headerFixed #mn-ctrs-btns {top:17px !important} #header-wrap #global {top:-3px;right:73px;height:auto !important} #menu-wrap {top:0 !important} #header .logo {padding-right:120px} #header-wrap #header .logo a img {width:200px} #header .logo a span em {display:none !important} } @media all and (max-width:768px) { #header-wrap #header .logo {top:27px} #header-wrap #header .logo a img {width:140px} } #global {position:relative;max-width:1600px;margin:0 auto;} .global-wrap {position:absolute;top:24px;right:0;z-index:501;} .global-wrap:after {content:"";display:block;clear:both} #global .slink-sec{display:block;font-size:0;z-index:2200} #global .slink-sec .slink, #global .slink-sec .sutil {display:inline-block;position:relative;margin-top:20px;vertical-align:top;z-index:2} #global .slink-sec .slink:after {content:"";display:block;clear:both} #global .slink-sec .slink > a, #global .slink-sec .sutil .toppop-ctrl button {display:block;float:left;position:relative;background:#fff;border:1px solid #d5d5d5;border-radius:50%;margin:0 4px;width:41px;height:41px;transition:all .3s ease;box-sizing:border-box} #global .slink-sec .slink > a:hover, #global .slink-sec .slink > a:focus, #global .slink-sec .sutil .toppop-ctrl button:hover, #global .slink-sec .sutil .toppop-ctrl button:focus {background-color:#d5d5d5} #global .slink-sec .slink > a.whome {background-color:#0587cd;border-color:#0587cd} #global .slink-sec .slink > a.whome:hover, #global .slink-sec .slink > a.whome:focus {background-color:#095680;border-color:#095680} #global .slink-sec .slink > a.login, #global .slink-sec .slink > a.logout {} #global .slink-sec .slink > a:before, #global .slink-sec .sutil .toppop-ctrl button > span:before {content:"";display:block;position:absolute;left:0;right:0;top:0;bottom:0;background:url(/resources/_Templet/Gnavi/gnavi_dept/_Img/gnavi_spr.png) no-repeat;width:25px;height:25px;margin:auto} #global .slink-sec .slink > a.whome:before {background-position:0 0} #global .slink-sec .slink > a.login:before, #global .slink-sec .slink > a.logout:before {background-position:-35px 0} #global .slink-sec .sutil .toppop-ctrl button > span:before {background-position:-70px 0} #global .slink-sec .slink > a > span, #global .slink-sec .sutil .toppop-ctrl button {font-size:0} #global .slink-sec .slink > a.langK {padding-left:27px;border:0;border-radius:0;margin:0;width:auto;height:auto;background:url(/resources/_Templet/Gnavi/gnavi_eng/_Img/ico_lag.png) no-repeat 0 50%;} #global .slink-sec .slink > a.langK span {font-size:14px;color:#666666;} #global .slink-sec .slink > a.langK:before {display:none;} #global .top-search {display:inline-block;vertical-align:text-top;z-index:1;margin-left:30px;} #global .top-search .amenu {display:block;position:relative;border:1px solid #19364e;width:62px;height:62px;padding:20px 17px;font-size:0;box-sizing:border-box} #global .top-search .amenu > span {display:block;height:9px} #global .top-search .amenu:before, #global .top-search .amenu:after, #global .top-search .amenu > span:before {content:"";display:block;background-color:#3c3e45;width:26px;height:2px;transition:all .3s ease;} #global .top-search .amenu:before {margin-bottom:7px} #global .top-search .amenu > span:before {width:20px;margin-left:6pxl} #global .top-search .amenu:after {width:23px;margin-top:0} #global .slink-sec .sutil .toppop-ctrl {display:none;} @media all and (max-width:1399px) { #global .top-search {margin:0 20px} } @media all and (max-width:999px) { #global {height:40px} #global .glnk-sec, #global .slink-sec .slink {display:none} #global .slink-sec .sutil {} #global .slink-sec .sutil .toppop-ctrl button {height:40px} #global .top-search {display:none} } /*-------------------------logo_kor.css------------------------------------*/ /* logo */ #header .logo {display:block;position:absolute;left:0;top:29px;z-index:501} #header .logo a, #header .logo a span {display:block} #header .logo a span em {display:none;position:relative;margin:2px 0 0 10px;padding-left:10px;color:#555;font-size:1.294em;font-weight:700;font-style:normal;vertical-align:middle;letter-spacing:-1px;} #header .logo a span em:before {content:"";display:block;position:absolute;left:0;top:50%;background-color:rgba(0, 0, 0, .2);width:1px;height:19px;margin-top:-9px} @media all and (max-width:1599px) { #header .logo {left:20px} } @media all and (max-width:1399px) { #header .logo a {} #header .logo a img {width:180px} #header .logo a span em {margin-left:5px;padding-left:11px} } @media all and (max-width:1199px) { #header .logo {left:20px} #header .logo a span em {font-size:1em} } @media all and (max-width:999px) { #header .logo {top:21px} #header .logo a img {width:149px} } /*-------------------------header_kor.css------------------------------------*/ /* header */ #header {display:block;position:relative;max-width:1600px;margin:0 auto} #menu-wrap .srch-btn {position:absolute;right:10px;top:25px;border:0;background:#fff;border-bottom:2px solid #57c928;z-index:1000} .isMain #menu-wrap .srch-btn {right:110px} #menu-wrap .srch-btn span {display:inline-block;font-size:14px;color:#53b02c;line-height:1;padding:10px 0 10px 22px;background:url(/resources/_Img/Templet/Layout/srch_ico.png) no-repeat 0 center} #menu-wrap .srch-btn.is-open span {background:url(/resources/_Img/Templet/Layout/srch_close.gif) no-repeat 0 center} #menu-wrap .mGnavi {display:none} /* 메뉴 */ #menu-wrap {display:inline-block;position:relative;width:100%;max-width:1600px;padding-left:100px;background-color:#fff;box-sizing:border-box;z-index:100} #menu-wrap:after {clear:both;display:block;content:""} #menu-wrap .menu-cont {width:76%;padding-left:24%} #mn-ctrs-btns {display:none} /* 주메뉴 */ @media all and (min-width:1000px) { #menu-wrap .mn-top, #menu-wrap .mem-btn, #menu-wrap .btn-close, #menu-wrap .tmn-box {display:none} #mainNavi-wrap {position:absolute;left:50%;top:0;background-color:#fff;margin:0 0 0 -1000px;width:2000px;height:110px;text-align:center;overflow:hidden;z-index:500} #mainNavi-wrap.over {box-shadow:-15px 15px 15px -6px rgba(0, 0, 0, .3)} #mainNavi-wrap.over #menu-wrap:after {content:"";display:block;position:absolute;left:50%;top:100%;background-color:#dcdcdc;width:2000px;height:5px;margin:0 0 0 -1000px} #mainNavi {height:110px} #mainNavi .depth1-ul {text-align:center;overflow:hidden} #mainNavi > ul > li:first-child {} #mainNavi .mn_li1 {display:inline-block;text-align:center;margin:0 35px} #mainNavi .mn_a1 {display:block;position:relative;color:#000;font-size:24px;font-weight:700;padding:43px 0 39px;line-height:1.2;letter-spacing:-.05em} #mainNavi .mn_a1:after {display:block;content:"";position:absolute;left:0;right:0;bottom:14px;background-color:#fff;border-radius:50%;width:8px;height:8px;margin:0 auto;transition:all .3s ease} #mainNavi .mn_li1 .mn_a1:hover, #mainNavi .mn_li1 .mn_a1:hover span, #mainNavi .mn_li1.over .mn_a1 span {} #mainNavi .mn_a1:hover:after, #mainNavi .mn_a1:focus:after, #mainNavi .mn_li1.over .mn_a1:after {background-color:#0da95f} #mainNavi .depth2-wrap {display:none;position:absolute;top:115px;left:0;z-index:1000;width:100%;min-height:435px;padding:50px 0 49px 295px;text-align:left;font-weight:normal;box-sizing:border-box} #mainNavi .depth2-wrap .depth1-tit {position:absolute;top:0;left:0;background-color:#ddf3e9;width:280px;height:100%;padding-right:20px;box-sizing:border-box} #mainNavi .depth2-wrap .depth1-tit:before, #mainNavi .depth2-wrap .depth1-tit:after {content:"";display:block;position:absolute} #mainNavi .depth2-wrap .depth1-tit:before {right:100%;top:0;background-color:#ddf3e9;width:1000px;height:100%} #mainNavi .depth2-wrap .depth1-tit:after {right:0;bottom:40px;background:url(/resources/_Templet/Layout/layout_kor/_Img/depth1_tit_bg.png) no-repeat;width:300px;height:183px} #mainNavi .depth2-wrap .depth1-tit strong {position:relative;display:block;margin-bottom:29px;padding-top:69px;color:#111;font-size:28px;line-height:1;letter-spacing:-.025em} /* #mainNavi .depth2-wrap .depth1-tit strong:before {content:"";display:block;position:absolute;width:100px;height:90px;background:url(/resources/homepage/kor/_Img/Layout/layout_spr.png) no-repeat;left:0;top:36px} */ #mainNavi .depth2-wrap .depth1-tit .stxt {display:block;font-size:18px;line-height:1.667;color:#555;word-break:keep-all;position:relative;z-index:500} #mainNavi .depth2-wrap .depth1-tit .stxt span {display:block} #mainNavi .depth2-wrap .depth2-ul {display:block;width:100%;position:relative;font-size:0;overflow:hidden} #mainNavi .depth2-wrap .mn_li2 {display:inline-block;position:relative;width:20%;max-width:254px;padding:39px 15px 0;vertical-align:top;box-sizing:border-box} #mainNavi .depth2-wrap .mn_li2:nth-child(-n+5) {padding-top:0} #mainNavi .depth2-wrap .mn_a2 {display:block;position:relative;border:1px solid #dcdcdc;border-bottom-width:4px;height:62px;padding:0 30px 0 20px;font-size:0;box-sizing:border-box} #mainNavi .depth2-wrap .mn_a2:before {content:"";display:inline-block;width:0;height:100%;vertical-align:middle} #mainNavi .depth2-wrap .mn_a2:after {content:"";display:block;position:absolute;right:0;top:0;background:url(/resources/_Templet/Layout/layout_kor/_Img/mn_a2_over.png) no-repeat;width:25px;height:25px;opacity:0;transition:all .3s ease} #mainNavi .depth2-wrap .mn_a2 span {display:inline-block;position:relative;width:100%;color:#000022;font-size:18px;font-weight:700;letter-spacing:-.025em;line-height:1.2;vertical-align:middle;transition:all .3s ease} #mainNavi .depth2-wrap .mn_a2:focus span, #mainNavi .depth2-wrap .mn_a2:hover span, #mainNavi .depth2-wrap .over .mn_a2 span {} #mainNavi .depth2-wrap .mn_a2:focus:after, #mainNavi .depth2-wrap .mn_a2:hover:after, #mainNavi .depth2-wrap .over .mn_a2:after {opacity:1} #mainNavi .depth3-wrap {display:block;margin-top:28px} #mainNavi .depth3-wrap .depth3-ul {display:block;position:relative;border-left:3px solid #008451;padding-left:20px;box-sizing:border-box} #mainNavi .depth3-wrap .mn_li3 {margin-bottom:16px;line-height:1.2} #mainNavi .depth3-wrap .mn_li3:last-child {margin-bottom:0} #mainNavi .depth3-wrap .mn_a3 {position:relative;display:block;padding-right:20px;word-break:keep-all} #mainNavi .depth3-wrap .over.mn_a3 {padding-right:35px} #mainNavi .depth3-wrap .over.mn_a3:before {content:"";position:absolute;right:20px;top:2px;background:url(/resources/_Templet/Layout/layout_kor/_Img/layout_spr.png) no-repeat -173px 0;width:11px;height:16px} #mainNavi .depth3-wrap .mn_a3 span {display:inline-block;position:relative;color:#555;font-size:16px;transition:all .3s ease} #mainNavi .depth3-wrap .over.mn_a3 span, #mainNavi .depth3-wrap .mn_a3.over span, #mainNavi .depth3-wrap .mn_a3:hover span, #mainNavi .depth3-wrap .mn_a3:focus span {color:#008451;font-weight:700} #mainNavi .mn_a1[target=_blank]:before {content:"";display:block;position:absolute;right:-34px;top:50%;background:url(/resources/_Templet/Header/header_kor/_Img/mNavi_new_ico.png) no-repeat;width:15px;height:15px;margin-top:-7px;vertical-align:middle} #mainNavi .mn_a1[target=_blank]:focus:before, #mainNavi .mn_a1[target=_blank]:hover:before {background-position:-25px 0} #mainNavi .mn_a2[target=_blank]:after {content:"";display:block;position:absolute;right:10px;top:50%;background:url(/resources/_Templet/Header/header_kor/_Img/mNavi_new_ico.png) no-repeat;width:15px;height:15px;margin-top:-7px;vertical-align:middle} #mainNavi .mn_a2[target=_blank]:focus:after, #mainNavi .mn_a2[target=_blank]:hover:after {background-position:-25px 0} #mainNavi .mn_a3[target=_blank]:after {content:"";display:block;position:absolute;right:0;top:50%;background:url(/resources/_Templet/Header/header_kor/_Img/mNavi_new_ico.png) no-repeat;width:15px;height:15px;margin-top:-7px;vertical-align:middle} #mainNavi .mn_a3[target=_blank]:focus:after, #mainNavi .mn_a3[target=_blank]:hover:after {background-position:-25px 0} #mainNavi .tgl-btn {display:none} #header-wrap .tmn-bg {position:absolute;left:0;top:128px;width:100%;height:0;background:#f3f4f7;border-bottom:1px solid #323b50;z-index:400} #menu-wrap .allmn-btn {position:absolute;left:0;top:20px;width:49px;height:48px;border:1px solid #ccc;background:#fff;display:none} #menu-wrap .allmn-btn:before, #menu-wrap .allmn-btn:after, #menu-wrap .allmn-btn .txt:before {content:"";display:block;width:21px;height:2px;background:#5a5a5a;margin-left:14px;transition:all .3s ease} #menu-wrap .allmn-btn:before {margin-bottom:5px;margin-top:16px} #menu-wrap .allmn-btn:after {margin-top:5px} #menu-wrap .allmn-btn:hover:before, #menu-wrap .allmn-btn:hover:after {width:14px;background:#0d5db2} #menu-wrap .allmn-btn:hover .txt:before {width:18px;margin-left:20px;background:#0d5db2} .doc-eng #mainNavi .depth2-wrap .mn_a2 span {font-size:14px;} } @media all and (max-width:1599px) { #mainNavi-wrap {left:0;width:100%;margin:0} #mainNavi .depth2-wrap .depth1-tit {padding:0 15px} } @media all and (max-width:1499px) { #menu-wrap {padding-left:100px;box-sizing:border-box} #mainNavi-wrap {left:0;width:100%;margin:0} #mainNavi .mn_li1 {margin:0 17px} #mainNavi .mn_a1[target=_blank]:before {right:-20px} #mainNavi .depth2-wrap {width:100%} #mainNavi .depth2-wrap .depth1-tit {padding-right:20px;padding-left:20px} #mainNavi .depth2-wrap .mn_li2 {padding:39px 10px 0} #mainNavi .depth3-wrap .mn_a3 span {font-size:15px} } @media all and (max-width:1199px) { #menu-wrap {} #mainNavi .mn_li1 {margin:0 13px} #mainNavi .mn_a1[target=_blank]:before {right:-20px} #mainNavi .mn_a1 {font-size:20px} #mainNavi .depth2-wrap {padding:20px 0 20px 210px} #mainNavi .depth2-wrap .depth1-tit {width:200px} #mainNavi .depth2-wrap .depth1-tit:after {right:0;background-size:180px auto;width:180px;height:110px} #mainNavi .depth2-wrap .depth1-tit strong {font-size:24px} #mainNavi .depth2-wrap .depth1-tit .stxt {font-size:17px;line-height:1.3} #mainNavi .depth2-wrap .mn_li2 {width:25%;padding:39px 5px 0} #mainNavi .depth2-wrap .mn_li2:nth-child(-n+5) {padding-top:39px} #mainNavi .depth2-wrap .mn_li2:nth-child(-n+4) {padding-top:0} } @media all and (max-width:1099px) { #mainNavi .mn_li1 {margin:0 10px} } @media all and (max-width:1399px) and (min-width:1000px) { .doc-eng #header #mainNavi .mn_l1 {padding:0 10px;} .doc-eng #header #mainNavi .mn_a1 {font-size:20px} } @media all and (max-width:1099px) and (min-width:1000px) { .doc-eng #header #mainNavi .mn_a1 {font-size:18px} } @media only screen and (max-width:999px){ /* 메뉴 */ #mainNavi-wrap {position:absolute;top:0;left:auto;right:0;max-width:400px;overflow:inherit} #menu-wrap .mGnavi {display:block;position:relative;background-color:#fff;border-bottom:4px solid #dcdcdc;height:63px;padding-top:4px;font-size:0;text-align:right;box-sizing:border-box} #menu-wrap .mGnavi a {display:inline-block;vertical-align:top;box-sizing:border-box;position:relative} #menu-wrap .mGnavi > a > span {display:block;position:relative;padding:19px 20px 15px 25px;color:#666;font-size:14px;line-height:1.2;box-sizing:border-box} #menu-wrap .mGnavi > a > span:before {content:"";display:block;position:absolute;left:0;top:50%;background:url(/resources/_Templet/Layout/layout_kor/_Img/layout_spr.png) no-repeat;width:18px;height:18px;margin-top:-8px} #menu-wrap .mGnavi > a.login > span:before, #menu-wrap .mGnavi > a.logout > span:before {background-position:-28px 0;margin-top:-10px} #menu-wrap .mGnavi > a.langE > span {padding-left:27px;} #menu-wrap .mGnavi > a.langE > span:before {background-position:-56px 0;margin-top:-9px} .doc-kor #menu-wrap .mGnavi > a.langK {display:none;} .doc-eng #menu-wrap .mGnavi > a.langK {display:inline-block;} .doc-eng #menu-wrap .mGnavi > a.langK > span:before {background:url(/resources/_Templet/Gnavi/gnavi_eng/_Img/ico_lag.png) no-repeat 0 50%} #menu-wrap.mn-h-open {position:fixed;top:0;right:0;height:100%;overflow-y:auto} #menu-wrap.mn-h-open .mn-top {position:relative;display:block;width:100%;color:#fff;z-index:8001;overflow:visible} #menu-wrap.mn-h-open .mn-top .mn-tit {font-size:18px;color:#fff;letter-spacing:-0.02em;font-weight:normal;line-height:1;text-align:center;background:#2b405b url(/resources/_Img/Templet/Layout/tmn_list.png) no-repeat 90% center;background-size:auto 20px;height:70px;line-height:70px} #menu-wrap.mn-h-open .btn-close {display:block;position:absolute;top:2px;left:6px;background:transparent;border:0;width:50px;height:50px} #menu-wrap.mn-h-open .btn-close:before, #menu-wrap.mn-h-open .btn-close:after {content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;background-color:#5a5a5a;width:30px;height:1px;margin:auto} #menu-wrap.mn-h-open .btn-close:before {transform:rotate(45deg)} #menu-wrap.mn-h-open .btn-close:after {transform:rotate(135deg)} #menu-wrap {position:absolute;right:-100%;top:-40px;background-color:#fff;width:100%;max-width:400px;padding:0;margin:0;overflow-y:scroll;overflow-x:hidden;transition:right 0.3s ease;z-index:8000} #menu-wrap:before {content:"";display:block;position:absolute;top:0;left:0;background-color:#008451;width:150px;height:100%} #menu-wrap .mem-btn {overflow:hidden;background:#2b405b;border-top:1px solid rgba(255,255,255,0.2)} #menu-wrap .mem-btn a {float:left;width:50%;text-align:center;font-size:13px;padding:10px 5px;color:#fff;box-sizing:border-box} #menu-wrap .mem-btn a span {display:inline-block;padding:1px 0 1px 23px} #menu-wrap .mem-btn a span.login {background:url(/resources/_Img/Templet/Layout/mlogin_ico.png) no-repeat 0 50%} #menu-wrap .mem-btn a span.mypage {background:url(/resources/_Img/Templet/Layout/my_ico.png) no-repeat 0 50%} #menu-wrap .tmn-box {background:#fff;padding:14px 0 13px 0;border-bottom:1px solid #b9b9b9;position:relative} #menu-wrap .tmn-box .btn-close {width:52px;height:28px;background:none;border:0;position:absolute;top:16px;right:0;display:block;border-left:1px solid #ccc} #menu-wrap .tmn-box .btn-close:before, #menu-wrap .tmn-box .btn-close:after {display:block;content:"";width:2px;height:24px;background:#5e5e5e;position:absolute;top:50%;left:50%;margin-top:-12px;margin-left:-1px} #menu-wrap .tmn-box .btn-close:before {transform:rotate(45deg);-ms-transform:rotate(45deg)} #menu-wrap .tmn-box .btn-close:after {transform:rotate(-45deg);-ms-transform:rotate(-45deg)} #menu-wrap .tmn-box .tmn-title {font-size:18px;font-weight:300;color:#fff;text-align:center} #menu-wrap .tmn-box .tmn-title img {height:32px} #menu-wrap .tmn-box .tmn-global {margin-top:10px} #menu-wrap .tmn-box .tmn-global li {display:inline-block;line-height:1} #menu-wrap .tmn-box .tmn-global li a {color:#fff;font-size:14px;padding:0 14px 0 14px} #menu-wrap .tmn-box .tmn-global li:first-child a {padding-left:0;position:relative} #menu-wrap .tmn-box .tmn-global li:first-child a:after{display:block;content:"";width:1px;height:14px;background:rgba(255,255,255,0.3);position:absolute;top:50%;right:0;margin-top:-7px} #menu-wrap .allmn-btn {display:none} #menu-wrap.mn-h-open #mainNavi {width:100%} #mainNavi .depth1-tit, #mainNavi .mn_li1.over:before {display:none} #mainNavi .depth1-wrap {position:relative;/*overflow-y:scroll;height:calc(100vh - 63px)*/} #mainNavi .depth1-ul {} #mainNavi li.mn_li1 {margin:0} #mainNavi .mn_li1 .mn_a1 {display:block;position:relative;border-bottom:1px solid rgba(255, 255, 255, .2 );width:150px;height:80px;padding:5px 37px 0 19px;font-size:0;overflow:hidden;box-sizing:border-box;z-index:300} #mainNavi .mn_li1 .mn_a1:before {content:"";display:inline-block;width:0;height:100%;vertical-align:middle} #mainNavi .mn_li1 .mn_a1:after {content:"";display:none;position:absolute;right:20px;top:50%;background-color:#fff;border-radius:50%;width:7px;height:7px;margin-top:-2px} #mainNavi .mn_li1 .mn_a1 span {display:inline-block;width:100%;color:#fff;font-size:17px;line-height:1.2;vertical-align:middle} #mainNavi .mn_li1.is-open {} #mainNavi .mn_li1.is-open .mn_a1 {} #mainNavi .mn_li1.is-open .mn_a1:after {display:block} #mainNavi .mn_li1.is-open .mn_a1 span {font-weight:700} #mainNavi .mn_li1.is-close .tgl-btn {display:none;position:absolute;top:15px;right:20px;background:none;border:0;width:25px;height:25px;box-sizing:border-box;z-index:500;} #mainNavi .mn_li1.is-close .tgl-btn:before {content:"";display:block;position:absolute;top:1px;right:4px;border-top:3px solid #d5d5d5;border-left:3px solid #d5d5d5;width:5px;height:5px;transform:rotate(-135deg)} #mainNavi .depth2-wrap {display:none;position:absolute;top:0;left:0;width:100%;height:auto;padding:0 0 0 150px;transition:display .3s ease;box-sizing:border-box} #mainNavi .depth2-wrap:after {content:"";display:block;position:absolute;top:0;left:0;background-color:#008451;width:150px;height:100%} #mainNavi .depth2-wrap .mn_li2 {width:auto;padding:0} #mainNavi .depth2-wrap .mn_li2.has-sub .tgl-btn {display:block} #mainNavi .depth2-wrap .mn_li2.is-open .tgl-btn {} #mainNavi .depth2-wrap .mn_li2.is-open .tgl-btn:before {display:none} #mainNavi .is-open .depth2-wrap {display:block} #mainNavi .depth2-ul {position:relative;z-index:100;box-sizing:border-box;padding:0 20px 10px} #mainNavi .mn_li2 {position:relative;padding:0;margin-top:10px} #mainNavi .depth2-wrap .mn_li2:nth-child(-n+5) {padding-top:0} #mainNavi .depth2-wrap .mn_a2 {display:block;position:relative;border:1px solid #dcdcdc;/*height:50px;*/padding:16px 40px 15px 20px;color:#000022;font-size:0;overflow:hidden;box-sizing:border-box} #mainNavi .depth2-wrap .mn_a2:before {content:"";display:none;width:0;height:100%;vertical-align:middle} #mainNavi .depth2-wrap .mn_a2:after {content:"";display:none;position:absolute;right:0;top:0;background:url(/resources/_Img/Common/sb_left_20.png) no-repeat;width:20px;height:20px;font-size:0;z-index:1} #mainNavi .depth2-wrap .mn_a2 span {display:inline-block;width:100%;font-size:16px;line-height:1;vertical-align:middle} #mainNavi .depth2-wrap .is-open .mn_a2:after, #mainNavi .depth2-wrap .mn_a2:hover:after {display:block} #mainNavi .depth2-wrap .mn_a2.over, #mainNavi .depth2-wrap .is-open .mn_a2, #mainNavi .depth2-wrap .mn_a2:hover {font-weight:700} #mainNavi .depth2-wrap .mn_li2.is-close .depth3-wrap {display:none} #mainNavi .depth2-wrap .mn_li2.is-open .depth3-wrap {display:block} #mainNavi .depth2-wrap .depth3-wrap {display:block;padding:20px 0} #mainNavi .depth2-wrap .depth3-wrap ul {border-left:3px solid #008451} #mainNavi .depth2-wrap .depth3-wrap li {position:relative;padding:0 0 0 19px;line-height:1.2} #mainNavi .depth2-wrap .depth3-wrap li a {display:block;position:relative;padding:7px 0 7px;color:#555;font-size:15px} #mainNavi .depth2-wrap .depth3-wrap li:first-child a {padding-top:0} #mainNavi .depth2-wrap .depth3-wrap li:last-child a {padding-bottom:0} #mainNavi .depth2-wrap .depth3-wrap li a span {display:block;position:relative;padding-right:20px;box-sizing:border-box} #mainNavi .depth2-wrap .depth3-wrap li a span:before {content:"";display:none;position:absolute;top:4px;right:2px;border-top:2px solid #008451;border-left:2px solid #008451;width:4px;height:4px;transform:rotate(135deg)} #mainNavi .depth2-wrap .depth3-wrap .mn_li3.over a span:before {display:block} #mainNavi .depth2-wrap .depth3-wrap li a[target='_blank'] span:after {display:inline-block;content:"";width:12px;height:10px;vertical-align:middle;margin:-2px 0 0px 10px} #mainNavi .depth2-wrap .depth3-wrap li.over a, #mainNavi .depth2-wrap .depth3-wrap li a:hover {color:#008451;font-weight:700} .body-slide-wr {position:relative;width:100%;height:100%;transition:margin 0.3s ease} .body-slider-ovclick {display:none;position:fixed;z-index:10;width:100%;height:100%;left:0;top:0;background:rgba(0,0,0,0.6);cursor:pointer;z-index:3001} #mn-ctrs-btns {display:block;position:absolute;right:20px;top:17px;z-index:1000} #mn-ctrs-btns .mn-ctrs-btn {display:block;position:relative;background:#fff;border:1px solid #333;width:47px;height:47px;padding:16px 14px;font-size:0;text-align:right;box-sizing:border-box} #mn-ctrs-btns .mn-ctrs-btn > span {display:block;height:6px} #mn-ctrs-btns .mn-ctrs-btn:before, #mn-ctrs-btns .mn-ctrs-btn:after, #mn-ctrs-btns .mn-ctrs-btn > span:before {content:"";display:inline-block;background-color:#333;width:18px;height:2px;transition:all .3s ease;} #mn-ctrs-btns .mn-ctrs-btn:before {margin-bottom:4px} #mn-ctrs-btns .mn-ctrs-btn > span:before {width:14px} #mn-ctrs-btns .mn-ctrs-btn:after {width:16px;margin-top:0} .doc-eng #mainNavi .mn_li1 .mn_a1 {height:100px !important;padding:5px 20px 0 10px !important;} .doc-eng #mainNavi .mn_li1 .mn_a1 span {font-size:15px;} .doc-eng #mainNavi .mn_li1 .mn_a1:after {right:10px !important;} .doc-eng #mainNavi .depth2-wrap .mn_a2 span {font-size:14px;line-height:1.2em;} } @media all and (max-width:399px) { #menu-wrap:before, #mainNavi .depth2-wrap:after {width:110px} #mainNavi .mn_li1 .mn_a1 {width:110px;padding:5px 25px 0 14px} #mainNavi .mn_li1 .mn_a1:after {right:15px} #mainNavi .mn_li1 .mn_a1 span {font-size:15px} #mainNavi .depth2-wrap .mn_a2 span {font-size:15px} #mainNavi .depth3-wrap .mn_a3 span {font-size:14px} #mainNavi .depth2-wrap {padding-left:110px} .doc-eng #menu-wrap:before, .doc-eng #mainNavi .depth2-wrap:after {width:140px} .doc-eng #mainNavi .mn_li1 .mn_a1 {width:140px;padding:5px 25px 0 14px} .doc-eng #mainNavi .depth2-wrap {padding-left:140px} } /* grad */ @media all and (min-width:1000px) { .doc-grad #mainNavi .mn_li1 {margin:0 5px !important;} } @media all and (max-width:1799px) and (min-width:1000px) { .doc-grad #header-wrap #header .logo a img {width:150px} .doc-grad #header .logo a span em {font-size:1.1em} .doc-grad #header #mainNavi .mn_a1 {font-size:17px;} } @media all and (max-width:1439px) and (min-width:1000px) { .doc-grad #menu-wrap {padding-right:100px} .doc-grad #mainNavi .mn_li1 {margin:0 5px !important} .doc-grad #header #mainNavi .mn_a1 {font-size:16px;letter-spacing:-2px} } @media all and (max-width:1239px) and (min-width:1000px) { .doc-grad #header-wrap #header .logo a img {width:115px} .doc-grad #header .logo a span em {font-size:.889em} } /*-------------------------submenu_kor.css------------------------------------*/ #side-wrap {display:none} @media all and (max-width:768px){ #side-wrap {display:block;position:relative;z-index:2} .submenu .lm-tit {display:none} #leftmenu {height:55px} #leftmenu .lm_l1 {position:relative} #leftmenu .lm_a1 {display:block;padding:2px 38px;height:55px;font-size:0;box-sizing:border-box} #leftmenu .lm_a1:before {content:"";display:inline-block;width:0;height:100%;vertical-align:middle} #leftmenu .lm_a1 span {display:inline-block;position:relative;color:#333;font-size:17px;font-weight:700;line-height:1.2;letter-spacing:-.025em;vertical-align:middle} #leftmenu .depth2 {display:none;position:absolute;top:100%;left:0;border-top:3px solid #dcdcdc;width:100%;max-height:320px;box-shadow:0 5px 10px rgba(0, 0, 0, .2);overflow-y:auto;z-index:1000} #leftmenu .depth2 .lm_l2 {position:relative;background-color:#fff;border-bottom:1px solid #dcdcdc;box-sizing:border-box} #leftmenu .depth2 .lm_a2 {display:block;padding:1px 50px 0 40px;height:51px;font-size:0;box-sizing:border-box} #leftmenu .depth2 .lm_a2:before {content:"";display:inline-block;width:0;height:100%;vertical-align:middle} #leftmenu .depth2 .lm_a2 span {display:inline-block;position:relative;color:#555;font-size:16px;line-height:1.2;letter-spacing:-.025em;vertical-align:middle} #leftmenu .depth2 .lm_l2.is-open .lm_a2, #leftmenu .depth2 .lm_l2.over .lm_a2 {background-color:#008451} #leftmenu .depth2 .is-open .lm_a2 span, #leftmenu .depth2 .lm_l2.over .lm_a2 span {color:#fff;font-weight:700} #leftmenu .lm_l1 > .tgl-btn {position:absolute;top:50%;right:28px;width:43px;height:43px;background:none;z-index:500;transform:translateY(-50%);border:0} #leftmenu .lm_l1 > .tgl-btn:after {content:"";display:block;position:absolute;right:15px;top:50%;border-bottom:3px solid #333;border-left:3px solid #333;margin:-8px 0 0;width:7px;height:7px;transform:rotate(-45deg);transition:all .3s ease;z-index:9} #leftmenu .lm_l1.is-open > .tgl-btn:after {transform:rotate(135deg);margin:-2px 0 0} #leftmenu .lm_l2 > .tgl-btn {position:absolute;top:14px;right:35px;background:none;border:0;width:25px;height:25px;z-index:500} #leftmenu .lm_l2.is-open > .tgl-btn {} #leftmenu .lm_l2.is-close > .tgl-btn:before, #leftmenu .lm_l2.is-close > .tgl-btn:after {content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;background-color:#d6d6d6;margin:auto;width:2px;height:14px;transition:all .3s ease} #leftmenu .lm_l2.is-close > .tgl-btn:before {transform:rotate(90deg)} #leftmenu .lm_l2.is-open > .tgl-btn:after {transform:rotate(90deg)} #leftmenu .lm_l2.is-open > .tgl-btn:before, #leftmenu .lm_l2.is-open > .tgl-btn:after {background-color:#fff} #leftmenu .depth3 {display:none;background:#fff;margin-bottom:17px;padding:20px 20px 0;font-size:0;text-align:left;overflow:hidden} #leftmenu .depth3 .lm_l3 {display:inline-block;position:relative;width:calc(50% - 10px);margin-right:20px;padding:12px 10px 0 18px;vertical-align:top;box-sizing:border-box} #leftmenu .depth3 .lm_l3:nth-child(-n+2) {padding-top:0} #leftmenu .depth3 .lm_l3:nth-child(2n) {margin-right:0} #leftmenu .depth3 .lm_l3:before {content:"";display:none;position:absolute;top:50%;right:2px;border-top:2px solid #008451;border-left:2px solid #008451;width:6px;height:6px;margin-top:-4px;transform:rotate(135deg)} #leftmenu .depth3 .lm_l3:after {content:"";display:block;position:absolute;top:0;left:0;background-color:#008451;width:3px;height:150px} #leftmenu .depth3 .lm_l3 > .tgl-btn {display:none} #leftmenu .depth3 .lm_a3 {display:block;color:#666;position:relative;height:100%} #leftmenu .depth3 .lm_a3:before {content:"";display:inline-block;width:0;height:100%;vertical-align:middle} #leftmenu .depth3 .lm_a3 span {display:inline-block;position:relative;color:#555;font-size:15px;line-height:1.2;vertical-align:middle} #leftmenu .depth3 .lm_a3[target='_blank']:after {content:"";display:block;position:absolute;width:12px;height:10px;right:0;top:14px;} #leftmenu .depth3 .lm_l3.over:before {display:block} #leftmenu .depth3 .lm_l3.over .lm_a3 {} #leftmenu .depth3 .lm_l3.over .lm_a3 span {color:#008451;font-weight:700} #leftmenu .depth4 {display:none} #leftmenu .lm_l1.is-open .lm_a1 span:after {transform:rotate(180deg);-ms-transform:rotate(180deg)} } @media all and (max-width:420px){ #leftmenu .lm_a1 {padding:0 45px 0 15px} #leftmenu .lm_l1 > .tgl-btn {right:5px} #leftmenu .depth2 .lm_a2 {padding:0 45px 0 15px} #leftmenu .lm_l2 > .tgl-btn {right:15px} #leftmenu .depth3 {margin-bottom:10px;padding:10px 15px 0} } /*-------------------------footer_eng.css------------------------------------*/ /* footer */ #footer-wrap {position:relative;z-index:3000} #footer-wrap .footer-wr {background-color:#162537;line-height:1.2;padding-bottom:49px} #footer-wrap .footer-top {background-color:rgba(0, 0, 0, .2);box-sizing:border-box;border-bottom:1px solid #323841} #footer-wrap .service-wrap {position:relative;max-width:1400px;margin:0 auto;display:none;} #footer-wrap .service-wrap .topBt {position:fixed;bottom:-70px;right:20px;width:70px;height:70px;text-align:center;background:#4d4f54;border-radius:50%;z-index:3500;transition:all .3s ease} #footer-wrap .service-wrap .topBt span {display:inline-block;color:#fff;font-size:12px;padding:40px 0 0;position:relative} #footer-wrap .service-wrap .topBt span:before {display:block;content:"";width:14px;height:14px;border:2px solid transparent;border-top:2px solid #fff;border-left:2px solid #fff;position:absolute;top:22px;left:50%;margin-left:-8px;transform:rotate(45deg);-ms-transform:rotate(45deg)} #footer-wrap .service-wrap .topBt.over {bottom:45px} #footer-wrap .service-wrap .service-cont {position:relative;overflow-x:auto;overflow-y:hidden} #footer-wrap .service-wrap .service-list {position:relative;padding:30px 0 24px;font-size:0;line-height:1;white-space:nowrap} #footer-wrap .service-wrap .service-list li {display:inline-block;font-size:1rem} #footer-wrap .service-wrap .service-list li a {position:relative;display:block;padding:0 16px} #footer-wrap .service-wrap .service-list li a:after {content:"";position:absolute;left:0;top:50%;background-color:#414b56;width:1px;height:12px;margin-top:-6px} #footer-wrap .service-wrap .service-list li:first-child a {padding-left:0} #footer-wrap .service-wrap .service-list li:first-child a:after {display:none} #footer-wrap .service-wrap .service-list li:last-child a {padding-right:0} #footer-wrap .service-wrap .service-list li a span {position:relative;font-size:16px;color:rgba(255, 255, 255, .8)} #footer-wrap .service-wrap .service-list li a span:after {content:"";position:absolute;left:0;bottom:-2px;background-color:#fff;width:0;height:1px;transition:all .3s ease} #footer-wrap .service-wrap .service-list li a:focus span, #footer-wrap .service-wrap .service-list li a:hover span {color:#fff} #footer-wrap .service-wrap .service-list li a:hover span:after, #footer-wrap .service-wrap .service-list li a:focus span:after {width:100%} #footer-wrap .service-wrap .fsns-list-wr {position:absolute;top:20px;right:0;z-index:1} #footer-wrap .fsns-list-wr .fsns-list {font-size:0;overflow:hidden} #footer-wrap .fsns-list-wr .fsns-list li {display:inline-block;margin:0 9px 0 10px;vertical-align:top} #footer-wrap .fsns-list-wr .fsns-list li:first-child {margin-left:0} #footer-wrap .fsns-list-wr .fsns-list li:last-child {margin-right:0} #footer-wrap .fsns-list-wr .fsns-list li a {display:block;position:relative;width:30px;height:30px} #footer-wrap .fsns-list-wr .fsns-list li a:before {content:"";display:block;position:absolute;left:0;right:0;top:0;bottom:0;background:url(/resources/_Templet/Layout/layout_kor/_Img/layout_spr.png) no-repeat;width:25px;height:20px;margin:auto;transition:all .3s ease} #footer-wrap .fsns-list-wr .fsns-list li a.facebook:before {background-position:-35px -98px} #footer-wrap .fsns-list-wr .fsns-list li a.insta:before {background-position:-70px -98px} #footer-wrap .fsns-list-wr .fsns-list li a.youtube:before {background-position:0 -98px} #footer-wrap .fsns-list-wr .fsns-list li a:hover:before, #footer-wrap .fsns-list-wr .fsns-list li a:focus:before {opacity:.7} #footer-wrap .info-wrap {max-width:1400px;margin:0 auto;box-sizing:border-box} #footer-wrap .info-wrap .footer {position:relative;margin-top:40px;padding:0 0 0 370px;color:#fff;font-size:17px;word-break:keep-all;line-height:1.667em;} #footer-wrap .info-wrap .footer .flogo {position:absolute;left:0;top:0;width:307px} #footer-wrap .info-wrap .footer .flogo a {display:block} #footer-wrap .info-wrap .footer .flogo a img {display:block;width:100%} #footer-wrap .info-wrap .footer address {display:inline-block;margin-right:27px;vertical-align:top} #footer-wrap .info-wrap .cs-info {display:inline-block;vertical-align:top} #footer-wrap .info-wrap .cs-info li {display:inline-block;margin-right:13px} #footer-wrap .info-wrap .cs-info li.e-mail {display:none} #footer-wrap .info-wrap .footer .copyright {margin-top:11px;color:#8c8f93;font-size:15px} #footer-wrap .info-wrap .footer .copyright span {display:inline-block} #footer-wrap .family-site-wr {position:absolute;top:-110px;right:0;font-size:0} #footer-wrap .family-site-wr .family-site {display:inline-block;position:relative;background:transparent;min-width:200px;vertical-align:top;z-index:100} #footer-wrap .family-site-wr .family-site dl {} #footer-wrap .family-site-wr .family-site dt button {position:relative;background:none;border:0;width:100%;display:block;padding:0 30px 0 21px;height:70px;box-sizing:border-box;border:1px solid #32373f;color:#fff;font-size:15px;text-align:left;vertical-align:middle;transition:all .3s ease} #footer-wrap .family-site-wr .family-site dt button:hover, #footer-wrap .family-site-wr .family-site dt button:focus {} #footer-wrap .family-site-wr .family-site dt button:after {content:"";display:block;position:absolute;right:18px;top:32px;background:url(/resources/_Templet/Layout/layout_kor/_Img/layout_spr.png) no-repeat -155px 0;width:8px;height:5px;transition:all .3s ease} #footer-wrap .family-site-wr .family-site dt button.is-open:after {transform:rotate(180deg);-ms-transform:rotate(180deg)} #footer-wrap .family-site-wr .family-site .isSelSub {display:none;position:absolute;bottom:100%;left:0;background-color:#21262f;border:2px solid #dcdcdc;width:100%;box-sizing:border-box} #footer-wrap .family-site-wr .family-site .isSelSub ul {padding:14px 10px 10px 13px;height:150px;overflow-y:scroll;text-align:left;box-sizing:border-box} #footer-wrap .family-site-wr .family-site .isSelSub li a {display:inline-block;color:#fff;padding:7px 0;font-size:14px} #footer-wrap .family-site-wr .family-site .isSelSub li a:focus, #footer-wrap .family-site-wr .family-site .isSelSub li a:hover {text-decoration:underline} #footer-wrap .family-site-wr .family-site .isSelSub .btn-fclose {display:block;position:absolute;top:0;right:100%;border:0;cursor:pointer;background:#4d5057;width:28px;height:28px} #footer-wrap .family-site-wr .family-site .isSelSub .btn-fclose:before, #footer-wrap .family-site-wr .family-site .isSelSub .btn-fclose:after {content:"";display:block;position:absolute;width:50%;height:2px;background:#fff;top:0;right:0;bottom:0;left:0;margin:auto} #footer-wrap .family-site-wr .family-site .isSelSub .btn-fclose:before {transform:rotate(45deg)} #footer-wrap .family-site-wr .family-site .isSelSub .btn-fclose:after {transform:rotate(-45deg)} #footer-wrap .family-site-wr .family-site02 {min-width:170px;margin-right:10px} @media all and (max-width:1399px) { #footer-wrap .footer-top {padding:0 20px} #footer-wrap .info-wrap {padding:0 20px} #footer-wrap .info-wrap .footer {padding-right:30px} #footer-wrap .info-wrap .cs-info {margin-top:12px} } @media all and (max-width:1199px) { #footer-wrap .info-wrap .footer {padding-left:170px} #footer-wrap .info-wrap .footer .flogo {width:149px} } @media all and (max-width:999px) { #footer-wrap .service-wrap .fsns-list-wr {top:105px} #footer-wrap .info-wrap .footer {padding-right:0;font-size:16px} #footer-wrap .info-wrap .cs-info {display:block} #footer-wrap .family-site-wr {position:static;top:auto;right:auto;margin:10px 0 0} #footer-wrap .family-site-wr .family-site dt button {height:40px} #footer-wrap .family-site-wr .family-site dt button:after {top:16px} } @media all and (max-width:768px) { #footer-wrap .footer-wr {text-align:center} #footer-wrap .info-wrap .footer .flogo {margin:0 auto} #footer-wrap .service-wrap .service-list {padding:22px 0} #footer-wrap .service-wrap .service-list li a span {font-size:14px} #footer-wrap .service-wrap .fsns-list-wr {top:112px} #footer-wrap .fsns-list-wr .fsns-list li {margin:0 7px} #footer-wrap .fsns-list-wr .fsns-list li a {width:21px;height:21px} #footer-wrap .fsns-list-wr .fsns-list li a:before {background-size:140px auto;width:18px;height:14px} #footer-wrap .fsns-list-wr .fsns-list li a.facebook:before {background-position:-25px -69px} #footer-wrap .fsns-list-wr .fsns-list li a.insta:before {background-position:-49px -69px} #footer-wrap .fsns-list-wr .fsns-list li a.youtube:before {background-position:0 -69px} #footer-wrap .fsns-list-wr .fsns-list li a:hover:before, #footer-wrap .info-wrap .footer {margin-top:35px;padding-left:0} #footer-wrap .info-wrap .footer .flogo {position:static;margin-bottom:22px} #footer-wrap .info-wrap .footer address, #footer-wrap .info-wrap .cs-info {font-size:14px;letter-spacing:-.025em;line-height:1.571} #footer-wrap .info-wrap .footer address {margin-right:0} #footer-wrap .info-wrap .cs-info {display:inline-block;margin-top:0} #footer-wrap .info-wrap .footer .copyright {font-size:13px;line-height:1.538} } @media all and (max-width:599px) { #footer-wrap .service-wrap .topBt.over {width:50px;height:50px} #footer-wrap .service-wrap .topBt span {padding:24px 0 0} #footer-wrap .service-wrap .topBt span:before {width:10px;height:10px;margin-left:-7px;top:13px} } @media all and (max-width:399px) { #footer-wrap .family-site-wr .family-site {width:100%} } /* 애니메이션 */ @keyframes ico_ani { 0%,100% {transform:rotateZ(0deg);-webkit-transform:rotateZ(0deg)} 10%, 30%, 50%, 70%, 90% {transform:rotateZ(-5deg);-webkit-transform:rotateZ(-5deg)} 20%, 40%, 60%, 80% {transform:rotateZ(5deg);-webkit-transform:rotateZ(5deg)} } @-webkit-keyframes ico_ani { 0%,100% {transform:rotateZ(0deg);-webkit-transform:rotateZ(0deg)} 10%, 30%, 50%, 70%, 90% {transform:rotateZ(-5deg);-webkit-transform:rotateZ(-5deg)} 20%, 40%, 60%, 80% {transform:rotateZ(5deg);-webkit-transform:rotateZ(5deg)} } @keyframes ico_ani2 { 0%,50%,100% {transform:translateY(0);-ms-transform:translateY(0)} 25%,75% {transform:translateY(-7%);-ms-transform:translateY(-7%)} } @-webkit-keyframes ico_ani2 { 0%,50%,100% {transform:translateY(0);-ms-transform:translateY(0)} 25%,75% {transform:translateY(-7%);-ms-transform:translateY(-7%)} } @keyframes ico_ani3 { 0%,50%,100% {transform:translateY(0);-ms-transform:translateY(0)} 25%,75% {transform:translateY(-15%);-ms-transform:translateY(-15%)} } @-webkit-keyframes ico_ani3 { 0%,50%,100% {transform:translateY(0);-ms-transform:translateY(0)} 25%,75% {transform:translateY(-15%);-ms-transform:translateY(-15%)} } @keyframes ico_ani4 { 0% {transform:rotate(0deg);-webkit-transform:rotate(0deg)} 100% {transform:rotate(180deg);-webkit-transform:rotate(180deg)} } @-webkit-keyframes ico_ani4 { 0% {transform:rotate(0deg);-webkit-transform:rotate(0deg)} 100% {transform:rotate(180deg);-webkit-transform:rotate(180deg)} }