/*-------------------------layout_03.css------------------------------------*/ @charset "utf-8"; /* 2015-10-05 CSS CENTUMSOFT */ #doc-wrap { position: relative; min-width: 1200px; overflow: hidden; } .div-cont { position: relative; max-width: 1400px; margin: 0 auto; } @media all and (max-width: 1200px) { #doc-wrap { min-width: 320px; } .div-cont { margin: 0 30px; } } @media all and (max-width: 680px) { .div-cont { margin: 0 15px; } } @media all and (max-width: 420px) { .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; } /* 레이아웃 */ /* 학교측 요청으로 서브페이지 폭 변경 - 260121 */ #mcontainer-wrap {position:relative;width:100%;} #container {position:relative;max-width:1400px;margin:50px auto 0;} #container:after {content:'';clear:both;display:block;} @media only screen and (max-width:1459px) and (min-width:1200px) { #container {margin:50px 30px 0} } /* ========================================================================== 서브 비주얼 (svisual) ========================================================================== */ #svisual-wrap { position: relative; width: 100%; height: 315px; } #svisual-wrap #visImgWrap { width: 100%; position: relative; } #svisual-wrap #visImgWrap #visImg { position: relative; height: 315px; overflow: hidden; } #svisual-wrap #visImgWrap #visImg .vis-img { display: block; width: 2000px; height: auto; position: absolute; top: 0; left: 50%; margin-left: -1000px; } #svisual-wrap .lm-tit { position: absolute; left: 0; top: 80px; width: 100%; text-align: center; } #svisual-wrap .lm-tit span { display: block; color: #fff; text-shadow: 0 0 5px rgba(0, 0, 0, .8); } #svisual-wrap .lm-tit .tit { position: relative; font-size: 46px; letter-spacing: -.025em; line-height: 1.1; font-weight: 500; transform: translateY(30px); opacity: 0; transition: all .3s ease; } #svisual-wrap .lm-tit .tit:before { content: ''; display: block; width: 20px; height: 2px; background: #fff; margin: 0 auto 10px auto; } #svisual-wrap .lm-tit .txt { font-size: 18px; line-height: 1.3; margin: 14px 0 0; transform: translateY(30px); opacity: 0; transition: all .3s ease .15s; } body.loaded #svisual-wrap .lm-tit .tit, body.loaded #svisual-wrap .lm-tit .txt { transform: translateY(0px); opacity: 1; } @media only screen and (min-width: 1000px) { #svisual-wrap #visImgWrap #visImg .vis-img { -webkit-animation: bgScale 3000ms 1 ease-out; -o-animation: bgScale 3000ms 1 ease-out; animation: bgScale 3000ms 1 ease-out; -webkit-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } @media all and (max-width: 999px) { #svisual-wrap { height: 220px; } #svisual-wrap #visImgWrap #visImg { height: 220px; } #svisual-wrap #visImgWrap #visImg .vis-img { width: auto; height: 100%; margin: 0 0 0 -758px; } #svisual-wrap .lm-tit { top: 55px; } #svisual-wrap .lm-tit .tit { font-size: 30px; } #svisual-wrap .lm-tit .txt { font-size: 14px; margin-top: 10px; } } @media all and (max-width: 768px) { #svisual-wrap { height: 150px; } #svisual-wrap #visImgWrap #visImg { height: 150px; } #svisual-wrap #visImgWrap #visImg .vis-img { margin-left: -476px; } #svisual-wrap .lm-tit { display: none; } } /* 서브비쥬얼 ì• ë‹ˆë©”ì´ì ˜ Keyframes */ @-webkit-keyframes bgScale { 0% { -webkit-transform: scale(1.1); } 100% { -webkit-transform: scale(1); } } @-o-keyframes bgScale { 0% { -o-transform: scale(1.1); } 100% { -o-transform: scale(1); } } @keyframes bgScale { 0% { transform: scale(1.1); } 100% { transform: scale(1) rotate(0.02deg); } } /* ========================================================================== ì½˜í ì¸  및 ë„¤ë¹„ê²Œì´ì ˜ (Contents & Navigation) ========================================================================== */ @media only screen and (min-width: 1200px) { #contents {float:right;min-height:600px;/* word-break:keep-all;word-wrap:break-word; */;width:calc(100% - 320px);max-width:none} } #contents .cont-top { position: relative; overflow: hidden; margin-bottom: 45px; } #contents .cont-top .cont-tit { font-size: 36px; color: #222; font-weight: 500; letter-spacing: -0.02em; } /* cont-navi */ #cont-navi { position: absolute; left: 0; bottom: 0; height: 60px; width: 100%; } #cont-navi .navi-wr { position: relative; width: 1200px; margin: 0 auto; background: rgba(0, 63, 140, .95); } #cont-navi .navi-wr:before { content: ''; position: absolute; left: -1000px; top: 0; height: 60px; width: 1000px; background: rgba(0, 63, 140, .95); } #cont-navi .navi-wr:after { content: ''; clear: both; display: block; } #cont-navi .cont-ctrl-btns { float: right; height: 60px; vertical-align: top; font-size: 0; } #cont-navi .cont-ctrl-btns > button { position: relative; width: 60px; height: 60px; border: 0; border-radius: 0; background: transparent; background-image: url(/resources/homepage/kor/_Img/Layout/layout_spr.png); transition: all .3s ease; } #cont-navi .cont-ctrl-btns > button:hover, #cont-navi .cont-ctrl-btns > button:focus { background-color: #0070cf; } #cont-navi .cont-ctrl-btns .btn-print { background-position: -60px -26px; } #cont-navi .cont-ctrl-btns .btn-share { background-position: 0 -26px; } #cont-navi .cont-ctrl-btns .btn-share.is-open { background-color: #0070cf; } /* sns-list */ #cont-navi .cont-ctrl-btns .sns-list { position: absolute; top: 75px; right: 60px; padding: 40px; z-index: 100; text-align: center; background: #f2f2f3; display: none; } #cont-navi .cont-ctrl-btns .sns-list:before { display: block; content: ""; width: 12px; height: 12px; position: absolute; top: -6px; right: 20px; background: #f2f2f3; transform: rotate(45deg); -ms-transform: rotate(45deg); z-index: -1; } #cont-navi .cont-ctrl-btns .sns-list .btit { font-size: 20px; color: #222; margin-bottom: 20px; font-weight: 500; } #cont-navi .cont-ctrl-btns .sns-list li { display: inline-block; margin: 0 10px; } #cont-navi .cont-ctrl-btns .sns-list li button { background: none; border: 0; border-radius: 0; transition: all .3s ease; } #cont-navi .cont-ctrl-btns .sns-list li button:before { content: ''; display: block; width: 50px; height: 50px; background-color: #fff; background-image: url(/resources/_Templet/Layout/layout_01/_Img/sns_ico.png); margin: 0 auto 10px auto; } #cont-navi .cont-ctrl-btns .sns-list .btn-fb:before { background-position: 0 0; } #cont-navi .cont-ctrl-btns .sns-list .btn-tw:before { background-position: -70px 0; } #cont-navi .cont-ctrl-btns .sns-list .btn-nb:before { background-position: -140px 0; } #cont-navi .cont-ctrl-btns .sns-list li button span { display: block; font-size: 15px; color: #555; } /* navi home & list */ #cont-navi .home { float: left; position: relative; display: block; width: 60px; height: 60px; } #cont-navi .home:before { content: ''; position: absolute; right: 0; top: 15px; width: 1px; height: 30px; background: rgba(255, 255, 255, .2); } #cont-navi .home:after { content: ''; position: absolute; left: 50%; top: 50%; width: 15px; height: 17px; margin: -8px 0 0 -7px; background: url(/resources/homepage/kor/_Img/Layout/layout_spr.png) no-repeat -70px 0; } #cont-navi dl { float: left; position: relative; z-index: 5; width: auto; height: 60px; } #cont-navi dl:after { content: ""; position: absolute; top: 24px; right: 0; width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-right: 5px solid none; border-left: 5px solid rgba(255, 255, 255, .6); } #cont-navi dl.is-last:after { display: none; } #cont-navi dt a { display: block; height: 60px; padding: 0 30px; } #cont-navi dt a .txt { position: relative; display: block; font-size: 16px; color: #fff; padding: 19px 0 0 0; } #cont-navi .sub-list { position: absolute; top: 60px; left: 30px; background: #fff; border: 1px solid #06428a; border-top: 0; min-width: 200px; display: none; } #cont-navi .sub-list:before { display: block; content: ""; width: 7px; height: 7px; position: absolute; top: -4px; left: 10px; background: #fff; transform: rotate(45deg); -ms-transform: rotate(45deg); z-index: -1; } #cont-navi .sub-list .mn_a1 { position: relative; display: block; background: #fff; font-size: 16px; color: #333; padding: 12px 15px 13px 15px; transition: all .3s ease; } #cont-navi .sub-list .mn_a1:after { display: block; content: ""; width: 6px; height: 6px; border: 2px solid transparent; border-top: 2px solid #fff; border-left: 2px solid #fff; position: absolute; top: 16px; right: 20px; transform: rotate(135deg); -ms-transform: rotate(135deg); transition: all .3s ease; } #cont-navi .sub-list .mn_a1[target=_blank] span:after { display: inline-block; content: ""; width: 11px; height: 11px; vertical-align: middle; margin-left: 10px; background: url(/resources/_Img/Common/ico_nw.png) no-repeat 0 0; } #cont-navi .sub-list li.isOver a, #cont-navi .sub-list li a:hover, #cont-navi .sub-list li a:focus { background: #dee7f9; } #cont-navi .sub-list li.isOver a span, #cont-navi .sub-list li a:hover span, #cont-navi .sub-list li a:focus span { color: #014898; } #cont-navi .sub-list li.isOver .mn_a1:after, #cont-navi .sub-list .mn_a1:hover:after, #cont-navi .sub-list .mn_a1:focus:after { border-left-color: #014898; border-top-color: #014898; } #cont-navi .navi-menu { display: inline-block; vertical-align: top; padding: 21px 60px 0 30px; } #cont-navi .navi-menu li { float: left; margin-right: 30px; padding-right: 30px; position: relative; } #cont-navi .navi-menu li:before { content: ""; position: absolute; top: 4px; right: 0; width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-right: 5px solid none; border-left: 5px solid rgba(255, 255, 255, .6); } #cont-navi .navi-menu li:last-child { padding-right: 0; margin-right: 0; } #cont-navi .navi-menu li:last-child:before { display: none; } #cont-navi .navi-menu li a { font-size: 16px; color: #fff; } /* ========================================================================== ì½˜í ì¸  상세 (Contents Detail) ========================================================================== */ #contents #cont { padding: 0 0 80px 0; font-size: 16px; line-height: 1.6; word-break: break-all; text-align: justify; min-height: 600px; } #contents #cont:after { clear: both; content: ""; display: block; } /* cont-charge */ #contents #cont .cont-charge { position: relative; overflow: hidden; font-size: 15px; padding: 15px 20px; min-height: 30px; border-top: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1; } #contents #cont .cont-charge .txt { display: block; position: relative; height: 45px; color: #1c5a96; font-weight: 500; line-height: 45px; padding: 0 0 0 54px; } #contents #cont .cont-charge .txt:before { content: ""; display: block; position: absolute; width: 45px; height: 45px; background: url(/resources/_Img/Common/pg_charge_sprite.png) no-repeat 0 0; top: 0; left: 0; } #contents #cont .charge-list { position: relative; font-size: 0; padding-left: 45px; background: url(/resources/_Templet/Layout/layout_01/_Img/charge_name.gif) no-repeat 0 0; } #contents #cont .charge-list li { position: relative; display: inline-block; padding: 8px 5px 8px 15px; color: #666; font-size: 15px; margin-right: 25px; line-height: 1; font-weight: 300; } #contents #cont .charge-list li:last-child { margin-right: 0; } #contents #cont .charge-list li:before { content: ''; position: absolute; left: 0; top: 15px; width: 5px; height: 2px; background: #666; } #contents #cont .charge-list li em { font-style: normal; color: #333; font-weight: 500; margin-right: 5px; } #contents #cont .charge-list li.mail { display: none; } #contents #cont .cont-charge .update { position: absolute; right: 20px; bottom: 20px; display: none; } #contents #cont .cont-charge .update b { font-weight: 500; color: #333; margin-right: 5px; } /* ========================================================================== ì½˜í ì¸  반응형 (Contents Responsive) ========================================================================== */ @media all and (max-width: 999px) { #contents { width: auto; max-width: 100%; float: none; } #contents #cont { font-size: 15px; } #header-wrap { height: auto; } } @media all and (max-width: 768px) { #cont-navi { display: none; } #container { margin-top: 0; } #contents #cont { padding-bottom: 40px; } #contents .cont-top { padding: 20px 0; margin-bottom: 0; border: 0; } #contents .cont-top .cont-tit { font-size: 22px; position: relative; } } @media all and (max-width: 599px) { #contents #cont { padding-bottom: 30px; } #contents #cont .cont-charge { padding: 10px 15px; } #contents #cont .charge-list { padding-left: 40px; background-size: auto 26px; } #contents #cont .charge-list li { font-size: 14px; padding: 6px 5px 6px 15px; } #contents #cont .charge-list li:before { top: 13px; } #contents #cont .cont-charge .update { position: relative; right: auto; bottom: auto; margin-left: 35px; font-size: 14px; margin-top: 5px; } } /* ========================================================================== 스마트 검색 (Smart Search) ========================================================================== */ body.smarts-act { overflow-y: hidden !important; } .smart-sch-wr { display: none; } body.smarts-act .smart-sch-wr { display: block; } #smart-search { display: none; position: fixed; top: 180px; left: 0; width: 100%; max-height: 70vh; z-index: 9999; color: #444; font-size: 16px; font-weight: 400; line-height: 1.75; overflow: hidden; transition: top .3s ease; } #smart-search.stable { display: block; overflow-y: auto; } #smart-search ~ .ui-datepicker, .ui-datepicker { z-index: 10000 !important; } #smart-search.over { top: 0 !important; } #smart-search .smartS-bg { display: none; } #smart-search .smart-in { position: relative; box-sizing: border-box; height: auto; padding: 0; overflow-y: hidden; overflow-x: hidden; z-index: 2; background: /* #3b92e5; */#003f8c; box-shadow: 0 10px 10px rgba(0, 0, 0, .2); } #smart-search .smart-in:before { content: ""; display: block; position: absolute; width: 400px; height: 150px; left: 0; top: 90px; bottom: auto; background: url(/resources/homepage/kor/_Img/Layout/sec03_deco.png) no-repeat left bottom / contain; opacity: .4; z-index: 1; pointer-events: none; } #smart-search .smart-in:after { content: ""; display: block; position: absolute; width: 100%; top: 240px; bottom: 0; height: auto; background: #f3f3f3; left: 0; z-index: -1; } #smart-search.is-open .smart-in:after { opacity: 1; } #smart-search .inwr { max-width: 1200px; margin: 0 auto; position: relative; } #smart-search .inwr:before { content: ""; display: block; position: absolute; width: 48px; height: 48px; right: -100px; top: 40px; background: url(/resources/homepage/kor/_Img/Layout/sec03_star.png) no-repeat center/contain; opacity: .6; z-index: 0; pointer-events: none; animation: smartStarPulse 2s ease-in-out infinite; } #smart-search .inwr:after { content: ""; display: block; position: absolute; width: 48px; height: 48px; left: 15%; top: 80px; background: url(/resources/homepage/kor/_Img/Layout/sec03_star.png) no-repeat center/contain; opacity: .3; z-index: 0; pointer-events: none; } @keyframes smartStarPulse { 0%, 100% { opacity: .6; } 50% { opacity: .3; } } @keyframes smartCloserSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(270deg); } } #smart-search .smart-top { padding: 15px 0 0; box-sizing: border-box; max-width: 1200px; margin: 0 auto; position: relative; z-index: 5; } #smart-search .smart-top .tit { position: relative; text-align: center; color: #fff; height: 110px; display: flex; flex-direction: column; justify-content: center; align-items: center; } #smart-search .smart-top .tit span { display: block; line-height: 1.2; } #smart-search .smart-top .tit .eng { display: none; } #smart-search .smart-top .tit .kor { font-size: 54px; line-height: 1.1; letter-spacing: -.05em; font-weight: 700; margin: 4px 0 0; text-shadow: 0 4px 24px rgba(0, 0, 0, .25); } #smart-search .smart-closer { display: block; position: absolute; width: 48px; height: 48px; border: 0; background: #83bee7; border-radius: 50%; right: 0; top: 24px; z-index: 100; transition: all .3s ease; } #smart-search .smart-closer:before { content: ""; display: block; position: absolute; width: 27px; height: 27px; top: 0; right: 0; bottom: 0; left: 0; margin: auto; background: url(/resources/homepage/kor/_Img/Layout/smartQ_spr.png) no-repeat 0px 0px; transform-origin: center center; } #smart-search .smart-closer span { width: 1px; height: 1px; overflow: hidden; position: absolute; top: -9999em; left: -9999em; display: block; text-indent: -9999em; font-size: 0px; line-height: 0; } #smart-search .smart-closer:focus, #smart-search .smart-closer:hover { background: #33b3ff; } #smart-search .smart-closer:focus:before, #smart-search .smart-closer:hover:before { animation: smartCloserSpin .65s ease-in-out forwards; } /* smart-keywd & search-box */ #smart-search .smart-keywd { position: relative; width: 100%; max-width: 1200px; padding: 15px 0 20px; height: auto; margin: 0 auto; box-sizing: border-box; z-index: 5; } #smart-search .smart-keywd .sch-head { position: relative; box-sizing: border-box; padding: 0 600px 0 0; } #smart-search .smart-keywd .sch-head:after { content: ""; display: block; clear: both; } #smart-search .search-box { position: relative; width: 100%; height: 60px; margin: 0; box-sizing: border-box; padding: 0 60px 0 130px; background: rgba(255, 255, 255, .9); border: 1px solid rgba(255, 255, 255, .2); border-radius: 9999px; overflow: hidden; box-shadow: 0 8px 32px rgba(0, 0, 0, .15); } #smart-search .search-box .select { display: block; position: absolute; width: 130px; height: 100%; left: 0; top: 0; } #smart-search .search-box .select select { display: block; width: 100%; height: 100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-size: 16px; box-sizing: border-box; padding: 0 0 0 27px; border: 0; color: #265c9d; font-weight: 700; background: #f3f3f3 url(/resources/homepage/kor/_Img/Layout/smart_bg2.png) no-repeat right 50%; } #smart-search .search-box .input-box { display: block; height: 100%; } #smart-search .search-box .input-box input.text { display: block; width: 100%; height: 100%; border: 0; box-sizing: border-box; font-size: 17px; color: #333; padding: 0 10px; background: transparent; margin: 0; font-weight: 500; } #smart-search .search-box .input-box input.text::-webkit-input-placeholder { color: #aaa; } #smart-search .search-box .input-box input.text:-moz-placeholder { color: #aaa; } #smart-search .search-box .input-box input.text::-moz-placeholder { color: #aaa; } #smart-search .search-box .input-box input.text:-ms-input-placeholder { color: #aaa; } #smart-search .search-box .input-box input.text:focus { outline: none; border: 2px solid #5bb7ff; border-radius: 0; box-shadow: none; } #smart-search .search-box .btn-search { display: block; position: absolute; width: 60px; height: 100%; border: 0; background: #265c9d; right: 0; top: 0; transition: all .3s ease; } #smart-search .search-box .btn-search:after { content: ""; display: block; position: absolute; width: 30px; height: 30px; top: 0; right: 0; bottom: 0; left: 0; margin: auto; background: url(/resources/homepage/kor/_Img/Layout/smartS_spr.png) no-repeat 0px 0px; } /* period-box */ #smart-search .period-box { display: block; position: absolute; right: 0; top: 0px; } #smart-search .period-box .keywd-tab { display: block; position: absolute; width: auto; right: 100%; top: 0; margin: 0 20px 0 0; } #smart-search .period-box .keywd-tab ul { display: inline-flex; align-items: center; font-size: 0; white-space: nowrap; background: rgba(255, 255, 255, .15); border-radius: 9999px; border: 1px solid rgba(255, 255, 255, .2); padding: 4px; height: 60px; box-sizing: border-box; } #smart-search .period-box .keywd-tab ul li { display: inline-block; vertical-align: top; margin: 0; } #smart-search .period-box .keywd-tab ul li button { display: block; position: relative; background: transparent; width: 64px; height: 48px; line-height: 1; box-sizing: border-box; border: 0; border-radius: 9999px; text-align: center; color: rgba(255, 255, 255, .8); font-size: 16px; font-weight: 700; transition: all .3s ease; } #smart-search .period-box .keywd-tab ul li button.isOn { background: #fff; color: #265c9d; box-shadow: 0 2px 8px rgba(0, 0, 0, .1); } #smart-search .period-box .skeywd-choice { position: relative; float: right; display: flex; align-items: center; height: 60px; background: rgba(255, 255, 255, .15); border-radius: 9999px; border: 1px solid rgba(255, 255, 255, .2); overflow: hidden; box-shadow: 0 4px 16px rgba(0, 0, 0, .1); } #smart-search .period-box .skeywd-choice .date { display: flex; align-items: center; font-size: 16px; color: #fff; line-height: 1; padding: 0 0 0 20px; border-bottom: 0; } #smart-search .period-box .skeywd-choice .date input { position: relative; width: 100px; border: 0; color: #fff; font-size: 16px; font-weight: 500; line-height: 1; height: 60px; padding: 0 10px 0 0; margin: 0; text-align: left; background: transparent; } #smart-search .period-box .skeywd-choice .date span { display: inline-block; padding: 0 8px; color: rgba(255, 255, 255, .8); font-size: 18px; font-weight: 700; } #smart-search .period-box .skeywd-choice .period-sch { display: block; position: static; font-size: 16px; font-weight: 900; color: #265c9d; border: 0; background: #fff; border-radius: 0; padding: 0 24px; height: 60px; line-height: 60px; align-self: stretch; } /* result boxes */ #smart-search .smart-in .sch-result-wr { margin: 0; box-sizing: border-box; padding: 20px 0 20px; } #smart-search .smart-in .sch-result-wr .sch-pkg-wr { display: block; box-sizing: border-box; position: relative; padding: 0 340px 0 0; } #smart-search .smart-in .sch-result-wr .sch-pkg-wr > div { display: block; box-sizing: border-box; } #smart-search .smart-in .sch-result-wr .sch-pkg-wr .sch-result-box { background: #fff; padding: 32px 32px 40px; box-shadow: 0 20px 50px rgba(0, 0, 0, .05); border: 1px solid #f0f0f0; } #smart-search .smart-in .sch-result-wr .sch-pkg-wr .sch-collection-box { display: block; position: absolute; width: 340px; height: 100%; background: #fff; right: 0; top: 0; padding: 32px 28px 28px; box-shadow: 0 20px 50px rgba(0, 0, 0, .05); border: 1px solid #f0f0f0; } #smart-search .smart-in .sch-result-wr .keywdState-tit { display: flex; align-items: center; gap: 12px; position: relative; box-sizing: border-box; padding: 0; font-size: 22px; letter-spacing: -.05em; text-align: left; color: #1e2939; font-weight: 900; line-height: 1; } #smart-search .smart-in .sch-result-wr .keywdState-tit:before { content: ""; display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; background-color: rgba(0, 146, 207, .1); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230092cf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 7 13.5 15.5 8.5 10.5 2 17'/%3E%3Cpolyline points='16 7 22 7 22 13'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 20px 20px; border: 1px solid rgba(0, 146, 207, .2); border-radius: 8px; position: static; } #smart-search .smart-in .sch-result-wr .sch-collection-box .keywdState-tit:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230092cf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3Cpath d='M15.477 12.89 17 22l-5-3-5 3 1.523-9.11'/%3E%3C/svg%3E"); } #smart-search .smart-in .sch-result { position: relative; width: 100%; margin: 32px 0 0; } #smart-search .smart-in .sch-result ul { display: block; position: relative; height: 230px; } #smart-search .smart-in .sch-result ul li { display: block; position: absolute; border-radius: 6px; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, .08); border: 1px solid rgba(255, 255, 255, .2); transition: all .3s ease; } #smart-search .smart-in .sch-result ul li:after { content: ""; display: block; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: linear-gradient(135deg, rgba(255, 255, 255, .08) 0%, transparent 100%); opacity: 0; transition: all .3s ease; } #smart-search .smart-in .sch-result ul li:hover { filter: brightness(1.05); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, .12); } #smart-search .smart-in .sch-result ul li:hover:after { opacity: 1; } #smart-search .smart-in .sch-result ul li button { display: inline-block; position: relative; width: 100%; height: 100%; border: 0; background: transparent; color: #fff; text-align: center; font-size: 16px; letter-spacing: -.05em; box-sizing: border-box; padding: 0 5px; line-height: 1.3; z-index: 2; } #smart-search .smart-in .sch-result ul li button:before { content: "#"; display: inline-block; vertical-align: middle; margin: -4px 3px 0 0; } #smart-search .smart-in .sch-result ul li button:focus, #smart-search .smart-in .sch-result ul li button:hover { text-decoration: underline; } #smart-search .smart-in .sch-result ul li.ks-b button { font-size: 26px; } #smart-search .smart-in .sch-result ul li.ks-m button { font-size: 20px; } #smart-search .smart-in .sch-collection { margin: 20px 0 0; } #smart-search .smart-in .sch-collection ol { display: flex; flex-direction: column; justify-content: space-between; height: calc(100% - 80px); } #smart-search .smart-in .sch-collection ol li { display: block; margin: 0 0 8px; cursor: pointer; transition: transform .2s ease; } #smart-search .smart-in .sch-collection ol li:hover { transform: translateX(4px); } #smart-search .smart-in .sch-collection ol li:last-child { margin: 0; } #smart-search .smart-in .sch-collection ol li a { display: flex; align-items: center; gap: 8px; position: relative; box-sizing: border-box; padding: 0; } #smart-search .smart-in .sch-collection ol li a span { display: block; transition: all .3s ease; } #smart-search .smart-in .sch-collection ol li a .num { font-size: 12px; font-weight: 900; font-style: italic; position: static; border-radius: 0; background: transparent; width: 16px; height: auto; line-height: 1; text-align: left; color: #d1d5db; flex-shrink: 0; } #smart-search .smart-in .sch-collection ol li:nth-child(-n+3) a .num { color: #CC0066; } #smart-search .smart-in .sch-collection ol li a .txt { font-size: 15px; font-weight: 700; color: #364153; letter-spacing: -.03em; line-height: 1.2; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #smart-search .smart-in .sch-collection ol li a:after { content: ""; display: block; height: 6px; border-radius: 999px; background: #d1d5db; flex: 2; margin-left: 4px; overflow: hidden; position: relative; } #smart-search .smart-in .sch-collection ol li:nth-child(1) a:after { background: linear-gradient(to right, #CC0066 90%, #eee 90%); } #smart-search .smart-in .sch-collection ol li:nth-child(2) a:after { background: linear-gradient(to right, #CC0066 80%, #eee 80%); } #smart-search .smart-in .sch-collection ol li:nth-child(3) a:after { background: linear-gradient(to right, #CC0066 72%, #eee 72%); } #smart-search .smart-in .sch-collection ol li:nth-child(4) a:after { background: linear-gradient(to right, #0092cf 62%, #eee 62%); } #smart-search .smart-in .sch-collection ol li:nth-child(5) a:after { background: linear-gradient(to right, #0092cf 55%, #eee 55%); } #smart-search .smart-in .sch-collection ol li:nth-child(6) a:after { background: linear-gradient(to right, #0092cf 48%, #eee 48%); } #smart-search .smart-in .sch-collection ol li:nth-child(7) a:after { background: linear-gradient(to right, #f7941d 42%, #eee 42%); } #smart-search .smart-in .sch-collection ol li:nth-child(8) a:after { background: linear-gradient(to right, #f7941d 35%, #eee 35%); } #smart-search .smart-in .sch-collection ol li:nth-child(9) a:after { background: linear-gradient(to right, #f7941d 28%, #eee 28%); } #smart-search .smart-in .sch-collection ol li:nth-child(10) a:after { background: linear-gradient(to right, #f7941d 20%, #eee 20%); } #smart-search .smart-in .sch-collection ol li a:focus .txt, #smart-search .smart-in .sch-collection ol li a:hover .txt { color: #000; text-decoration: underline; } /* ========================================================================== 색상세트 (Color Sets) ========================================================================== */ /* 색상세트 1 */ #smart-search .smart-in .sch-result .rdm01 li.key01 { width: 27.63%; height: 70px; background: #0092cf; top: 0; left: 0; } #smart-search .smart-in .sch-result .rdm01 li.key02 { width: 13.15%; height: 70px; background: #CC0066; top: 0; left: 28.94%; } #smart-search .smart-in .sch-result .rdm01 li.key03 { width: 13.15%; height: 150px; background: #f7941d; top: 0; left: 43.40%; } #smart-search .smart-in .sch-result .rdm01 li.key04 { width: 27.63%; height: 70px; background: #0092cf; top: 0; left: 57.86%; } #smart-search .smart-in .sch-result .rdm01 li.key05 { width: 13.15%; height: 70px; background: #CC0066; top: 0; left: 86.80%; } #smart-search .smart-in .sch-result .rdm01 li.key06 { width: 13.15%; height: 150px; background: #CC0066; top: 80px; left: 0; } #smart-search .smart-in .sch-result .rdm01 li.key07 { width: 27.63%; height: 70px; background: #f7941d; top: 80px; left: 14.46%; } #smart-search .smart-in .sch-result .rdm01 li.key08 { width: 13.15%; height: 70px; background: #0092cf; top: 80px; left: 57.86%; } #smart-search .smart-in .sch-result .rdm01 li.key09 { width: 13.15%; height: 70px; background: #f7941d; top: 80px; left: 72.32%; } #smart-search .smart-in .sch-result .rdm01 li.key10 { width: 13.15%; height: 150px; background: #CC0066; top: 80px; left: 86.78%; } #smart-search .smart-in .sch-result .rdm01 li.key11 { width: 13.15%; height: 70px; background: #0092cf; top: 160px; left: 14.46%; } #smart-search .smart-in .sch-result .rdm01 li.key12 { width: 13.15%; height: 70px; background: #f7941d; top: 160px; left: 28.92%; } #smart-search .smart-in .sch-result .rdm01 li.key13 { width: 27.63%; height: 70px; background: #0092cf; top: 160px; left: 43.38%; } #smart-search .smart-in .sch-result .rdm01 li.key14 { width: 13.15%; height: 70px; background: #CC0066; top: 160px; left: 72.32%; } /* 색상세트 2 */ #smart-search .smart-in .sch-result .rdm02 li.key01 { width: 27.63%; height: 150px; background: #CC0066; top: 0; left: 0; } #smart-search .smart-in .sch-result .rdm02 li.key02 { width: 27.63%; height: 70px; background: #0092cf; top: 0; left: 28.94%; } #smart-search .smart-in .sch-result .rdm02 li.key03 { width: 13.15%; height: 70px; background: #f7941d; top: 0; left: 57.88%; } #smart-search .smart-in .sch-result .rdm02 li.key04 { width: 13.15%; height: 150px; background: #0092cf; top: 0; left: 72.34%; } #smart-search .smart-in .sch-result .rdm02 li.key05 { width: 13.15%; height: 70px; background: #CC0066; top: 0; left: 86.80%; } #smart-search .smart-in .sch-result .rdm02 li.key06 { width: 13.15%; height: 70px; background: #f7941d; top: 80px; left: 28.94%; } #smart-search .smart-in .sch-result .rdm02 li.key07 { width: 13.15%; height: 70px; background: #CC0066; top: 80px; left: 43.40%; } #smart-search .smart-in .sch-result .rdm02 li.key08 { width: 13.15%; height: 150px; background: #0092cf; top: 80px; left: 57.86%; } #smart-search .smart-in .sch-result .rdm02 li.key09 { width: 13.15%; height: 70px; background: #f7941d; top: 80px; left: 86.78%; } #smart-search .smart-in .sch-result .rdm02 li.key10 { width: 13.15%; height: 70px; background: #CC0066; top: 160px; left: 72.34%; } #smart-search .smart-in .sch-result .rdm02 li.key11 { width: 27.63%; height: 70px; background: #0092cf; top: 160px; left: 0%; } #smart-search .smart-in .sch-result .rdm02 li.key12 { width: 13.15%; height: 70px; background: #f7941d; top: 160px; left: 28.94%; } #smart-search .smart-in .sch-result .rdm02 li.key13 { width: 13.15%; height: 70px; background: #CC0066; top: 160px; left: 43.40%; } #smart-search .smart-in .sch-result .rdm02 li.key14 { width: 13.15%; height: 70px; background: #0092cf; top: 160px; left: 86.78%; } /* 색상세트 3 */ #smart-search .smart-in .sch-result .rdm03 li.key01 { width: 27.63%; height: 70px; background: #f7941d; top: 0; left: 0; } #smart-search .smart-in .sch-result .rdm03 li.key02 { width: 13.15%; height: 70px; background: #0092cf; top: 0; left: 28.94%; } #smart-search .smart-in .sch-result .rdm03 li.key03 { width: 13.15%; height: 70px; background: #CC0066; top: 0; left: 43.40%; } #smart-search .smart-in .sch-result .rdm03 li.key04 { width: 13.15%; height: 70px; background: #f7941d; top: 0; left: 57.86%; } #smart-search .smart-in .sch-result .rdm03 li.key05 { width: 13.15%; height: 150px; background: #0092cf; top: 0; left: 72.32%; } #smart-search .smart-in .sch-result .rdm03 li.key06 { width: 13.15%; height: 150px; background: #CC0066; top: 0; left: 86.80%; } #smart-search .smart-in .sch-result .rdm03 li.key07 { width: 13.15%; height: 70px; background: #CC0066; top: 80px; left: 0; } #smart-search .smart-in .sch-result .rdm03 li.key08 { width: 27.63%; height: 70px; background: #0092cf; top: 80px; left: 14.46%; } #smart-search .smart-in .sch-result .rdm03 li.key09 { width: 13.15%; height: 150px; background: #f7941d; top: 80px; left: 57.86%; } #smart-search .smart-in .sch-result .rdm03 li.key10 { width: 13.15%; height: 70px; background: #CC0066; top: 80px; left: 43.40%; } #smart-search .smart-in .sch-result .rdm03 li.key11 { width: 27.63%; height: 70px; background: #0092cf; top: 160px; left: 72.32%; } #smart-search .smart-in .sch-result .rdm03 li.key12 { width: 13.15%; height: 70px; background: #f7941d; top: 160px; left: 0; } #smart-search .smart-in .sch-result .rdm03 li.key13 { width: 13.15%; height: 70px; background: #CC0066; top: 160px; left: 14.46%; } #smart-search .smart-in .sch-result .rdm03 li.key14 { width: 27.63%; height: 70px; background: #0092cf; top: 160px; left: 28.92%; } /* ========================================================================== 스마트 검색 반응형 (Smart Search Responsive) ========================================================================== */ @media all and (max-width: 1200px) { #smart-search { bottom: 0; max-height: none; overflow-y: auto; } #smart-search.stable { overflow-y: auto; } #smart-search .smart-in { height: auto; min-height: 100%; overflow-y: auto; overflow-x: hidden; } #smart-search .inwr { margin: 0 20px; } #smart-search .smart-in .smart-keywd { width: auto; padding: 24px 0; height: auto; } #smart-search .smart-in:after { top: 358px; bottom: 0; height: auto; } #smart-search .smart-in:before { top: 208px; bottom: auto; } #smart-search .smart-keywd .sch-head { padding: 0 520px 0 0; } #smart-search .smart-top { padding: 30px 30px 40px; } #smart-search .smart-top .tit { height: 180px; } #smart-search .smart-top .tit .kor { font-size: 72px; } #smart-search .period-box .skeywd-choice .date { padding: 0 0 0 20px; } #smart-search .period-box .skeywd-choice .date input[type="text"] { padding: 0 10px 0 0; } #smart-search .smart-in .sch-result-wr .sch-pkg-wr .sch-result-box { padding: 40px 30px 80px; } #smart-search .smart-in .sch-result-wr { margin: 30px 0 0; padding: 30px 0 0; } #smart-search .smart-closer { top: 30px; } } @media all and (max-width: 999px) { #smart-search { bottom: 0; max-height: none; } #smart-search .smart-in { height: auto; min-height: 100%; overflow-y: auto; overflow-x: hidden; } #smart-search .smart-in:after { top: 360px; bottom: 0; height: auto; } #smart-search .smart-in:before { top: 210px; bottom: auto; } #smart-search .smart-top .tit { height: auto; } #smart-search .smart-top .tit .kor { font-size: 56px; } #smart-search .smart-keywd { padding-bottom: 30px; } #smart-search .smart-keywd .sch-head { padding: 0; text-align: center; } #smart-search .search-box { width: 100%; max-width: none; margin: 0 auto 10px; } #smart-search .period-box { display: flex; position: relative; right: auto; top: auto; align-items: stretch; width: 100%; gap: 8px; margin: 8px 0 0; box-sizing: border-box; height: 60px; } #smart-search .period-box .keywd-tab { display: flex; position: relative; right: auto; top: auto; flex-shrink: 0; margin: 0; } #smart-search .period-box .keywd-tab ul { display: flex; align-items: stretch; height: 100%; padding: 0; gap: 8px; background: transparent; border: 0; border-radius: 0; overflow: visible; } #smart-search .period-box .keywd-tab ul li { display: flex; margin: 0; float: none; } #smart-search .period-box .keywd-tab ul li button { width: 120px; height: 100%; padding: 0; border-radius: 9999px; border: 2px solid rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .15); color: rgba(255, 255, 255, .9); font-size: 16px; font-weight: 700; } #smart-search .period-box .keywd-tab ul li button.isOn { background: #fff; color: #265c9d; border-color: #fff; } #smart-search .period-box .skeywd-choice { display: flex; float: none; flex: 1; box-sizing: border-box; } #smart-search .period-box .skeywd-choice .date { flex: 1; } #smart-search .period-box .skeywd-choice .period-sch { display: flex; align-items: center; justify-content: center; height: 100%; line-height: 1; } #smart-search .smart-in .sch-result-wr { margin: 50px 0 0; } #smart-search .smart-in .sch-result-wr .sch-pkg-wr { display: flex; align-items: stretch; gap: 20px; padding: 0; min-height: 0; } #smart-search .smart-in .sch-result-wr .sch-pkg-wr .sch-result-box { flex: 1; padding: 20px 30px; min-height: 0; } #smart-search .smart-in .sch-result-wr .sch-pkg-wr .sch-collection-box { position: relative; right: auto; top: auto; width: 321px; flex-shrink: 0; height: auto; min-height: 0; } #smart-search .smart-in .sch-result ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; height: auto; position: static; } #smart-search .smart-in .sch-result ul li { position: relative !important; width: auto !important; height: 50px !important; top: auto !important; left: auto !important; float: none; margin: 0; } #smart-search .smart-in .sch-result ul li button { display: block; padding: 0 5px; } #smart-search .smart-in .sch-result ul li button:before { margin: -5px 3px 0 0; } #smart-search .smart-in .sch-result ul li.key13, #smart-search .smart-in .sch-result ul li.key14 { display: none; } #smart-search .smart-in .sch-result-wr .sch-pkg-wr .sch-collection-box { padding: 20px 30px; } #smart-search .smart-in .sch-result { margin: 20px 0 0; } #smart-search .smart-in .sch-collection { margin: 18px 0 0; } #smart-search .smart-in .sch-collection ol li { margin: 0 0 14px; } #smart-search .smart-in .sch-collection ol li a .num { left: 0; top: 50%; transform: translateY(-50%); } } @media all and (max-width: 799px) { #smart-search { bottom: 0; max-height: none; } #smart-search .smart-in { height: auto; min-height: 100%; overflow-y: auto; overflow-x: hidden; } #smart-search .smart-in:after { top: 370px; bottom: 0; height: auto; } #smart-search .smart-in:before { top: 220px; bottom: auto; } #smart-search .smart-in .sch-result-wr { margin: 50px 0 0; } #smart-search .smart-top .tit { height: auto; } #smart-search .smart-top .tit .kor { font-size: 40px; } #smart-search .search-box { width: 100%; max-width: none; } #smart-search .period-box { display: block; text-align: center; margin: 8px 0 0; } #smart-search .period-box .keywd-tab { display: block; position: relative; right: auto; top: auto; width: 100%; margin: 0 0 8px; } #smart-search .period-box .keywd-tab ul { display: flex; align-items: stretch; width: 100%; box-sizing: border-box; height: 60px; padding: 0; gap: 8px; background: transparent; border: 0; border-radius: 0; overflow: visible; } #smart-search .period-box .keywd-tab ul li { display: flex; flex: 1; margin: 0; float: none; } #smart-search .period-box .keywd-tab ul li button { width: 100%; height: 100%; padding: 0; border-radius: 9999px; border: 2px solid rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .15); color: rgba(255, 255, 255, .9); font-size: 16px; font-weight: 700; } #smart-search .period-box .keywd-tab ul li button.isOn { background: #fff; color: #265c9d; border-color: #fff; } #smart-search .period-box .skeywd-choice { display: flex; float: none; width: 100%; box-sizing: border-box; } #smart-search .period-box .skeywd-choice .date { flex: 1; } #smart-search .period-box .skeywd-choice .period-sch { display: flex; align-items: center; justify-content: center; height: 100%; line-height: 1; } #smart-search .smart-in .sch-result-wr .keywdState-tit { font-size: 20px; } #smart-search .smart-in .sch-result-wr .keywdState-tit:before { top: auto; transform: none; } #smart-search .smart-in .sch-result-wr .sch-pkg-wr .sch-result-box { padding: 20px; } #smart-search .smart-in .sch-result ul li button { font-size: 14px; } #smart-search .smart-in .sch-result-wr .sch-pkg-wr { padding: 0; } #smart-search .smart-in .sch-result-wr .sch-pkg-wr .sch-collection-box { padding: 20px; width: 250px; } #smart-search .smart-in .sch-collection ol li a .txt { font-size: 16px; } } @media all and (max-width: 699px) { #smart-search .smart-top { padding: 20px 0; } #smart-search .smart-top .tit { height: auto; align-items: center; } #smart-search .smart-top .tit .kor { font-size: 36px; } #smart-search .smart-closer { width: 44px; height: 44px; top: 20px; } #smart-search .period-box { display: block; text-align: center; margin: 8px 0 0; } #smart-search .period-box .keywd-tab { display: block; position: relative; right: auto; top: auto; width: 100%; margin: 0 0 8px; } #smart-search .search-box { width: 100%; max-width: none; } #smart-search .period-box .keywd-tab ul { display: flex; align-items: stretch; width: 100%; box-sizing: border-box; height: 60px; padding: 0; gap: 8px; background: transparent; border: 0; border-radius: 0; overflow: visible; } #smart-search .period-box .keywd-tab ul li { display: flex; flex: 1; margin: 0; float: none; } #smart-search .period-box .keywd-tab ul li button { width: 100%; height: 100%; padding: 0; border-radius: 9999px; border: 2px solid rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .15); color: rgba(255, 255, 255, .9); font-size: 16px; font-weight: 700; } #smart-search .period-box .keywd-tab ul li button.isOn { background: #fff; color: #265c9d; border-color: #fff; } #smart-search .period-box .skeywd-choice { display: flex; float: none; width: 100%; box-sizing: border-box; } #smart-search .period-box .skeywd-choice .date { flex: 1; } #smart-search .period-box .skeywd-choice .period-sch { display: flex; align-items: center; justify-content: center; height: 100%; line-height: 1; } #smart-search .smart-in { overflow-y: auto; overflow: visible; } #smart-search .smart-in:before { width: 164px; height: 216px; top: 164px; bottom: auto; } #smart-search .smart-in:after { top: 380px; bottom: 0; height: auto; } #smart-search .smart-in .sch-result-wr .sch-pkg-wr { display: block; padding: 0 0 20px; } #smart-search .smart-in .sch-result-wr .sch-pkg-wr .sch-collection-box { position: relative; right: auto; top: auto; width: auto; margin: 10px 0 0; } } @media all and (max-width: 499px) { #smart-search .smart-top .tit { text-align: left; align-items: flex-start; } #smart-search .smart-top .tit .eng { font-size: 16px; } #smart-search .smart-top .tit .kor { font-size: 26px; } #smart-search .smart-closer { width: 50px; height: 50px; top: 23px; } #smart-search .search-box { height: 50px; border-width: 3px; padding: 0 44px 0 100px; } #smart-search .search-box .select { width: 100px; } #smart-search .search-box .select select { padding: 0 0 0 10px; min-width: 0; background-color: transparent; font-size: 15px; } #smart-search .search-box .input-box input.text { font-size: 15px; padding: 0 5px; } #smart-search .search-box .btn-search { width: 44px; } #smart-search .search-box .btn-search:after { width: 21px; height: 21px; background-size: 61px auto; } #smart-search .period-box .skeywd-choice .date { padding: 0 0 0 16px; } #smart-search .period-box .skeywd-choice .date input[type="text"] { font-size: 14px; width: 88px; height: 100%; padding: 0 6px 0 0; } #smart-search .period-box .skeywd-choice .period-sch { padding: 0 16px; font-size: 14px; } #smart-search .period-box { display: block; } #smart-search .period-box .keywd-tab { display: block; width: 100%; margin: 0 0 8px; } #smart-search .period-box .keywd-tab ul { height: 52px; gap: 8px; } #smart-search .period-box .keywd-tab ul li button { font-size: 14px; } #smart-search .period-box .skeywd-choice { height: 52px; } } @media all and (max-width: 399px) { #smart-search .search-box { padding: 0 44px 0 87px; } #smart-search .search-box .select { width: 95px; } #smart-search .smart-in .sch-result-wr .sch-pkg-wr .sch-result-box { padding: 20px 10px 0; } #smart-search .smart-in .sch-result-wr .sch-pkg-wr .sch-collection-box { padding: 20px 10px; } } /*-------------------------gnavi_03.css------------------------------------*/ /* global */ #global {position:relative;width:100%;height:45px;background:#002a51;z-index:2100;} #global .glnk-sec {position:absolute;left:0;top:0;z-index:1;} #global .glnk-sec a, #global .glnk-sec button {float:left;font-size:14px;color:#fff;text-align:center;height:45px;padding:0 10px 0 20px;background:#b3005b;border:0} #global .glnk-sec a span, #global .glnk-sec button span {position:relative;display:inline-block;color:#fff;padding-right:35px;margin-top:14px;} #global .glnk-sec button span {margin-top:0;} #global .glnk-sec a span:after, #global .glnk-sec button span:after {content:'';position:absolute;right:0;top:-2px;width:20px;height:20px;border-radius:50%;background-color:rgba(0,0,0,.3);background-image:url(/resources/homepage/kor/_Img/Layout/layout_spr.png);background-position:0 0} #global .glnk-sec button span:after {top:0;} #global .glnk-sec .btn01 span:after, #global .glnk-sec .btn02 span:after {background-position:-22px 0} #global .glnk-sec .btn01 {background:/*#0092cf*/#177eae;} #global .glnk-sec .btn02 {background:#003f8c;} #global .glnk-sec .btn03 {background:#17ae4c;} #global .srvc-lnk {position:absolute;right:0;top:0;z-index:1;} #global .srvc-lnk > a {float:left;font-size:14px;color:#fff;padding:2px;margin:12px 8px 0 8px;position:relative;opacity:1;} #global .srvc-lnk > a:hover, #global .srvc-lnk > a:focus, #global .srvc-lnk > a:active {text-decoration:underline} #global .gsel-lang {float:left;line-height:1.35em;height:45px;margin-left:8px;border-left:1px solid rgba(255,255,255,.2);} #global .gsel-lang dl {height:100%;transition:height .2s ease;overflow:hidden;} #global .gsel-lang dt a {position:relative;display:block;padding:11px 15px 0 15px;height:34px;color:#fff;font-size:13px;} #global .gsel-lang dt a:after {content:"";display:inline-block;vertical-align:top;width:0;border-width:3px;border-color:rgba(255,255,255,.6) transparent transparent transparent;border-style:solid;margin-top:9px;margin-left:6px} #global .gsel-lang dd {width:100%;overflow:hidden;} #global .gsel-lang dd ul {width:auto;padding:0 0 5px 0;background:#fff;border:1px solid #032e52;border-top:0;} #global .gsel-lang dd a {display:block;padding:5px 10px;font-size:14px;text-align:center;} #global .gsel-lang dd a span {display:inline-block;color:#032e52;font-family:"sofia-pro";} #global .gsel-lang dd a:hover span, .gsel-lang dd a:focus span, .gsel-lang dd a:active span {color:#60a6f1;text-decoration:underline;} #global .gsel-lang .is-open dd {height:11.5em;} #global .toppop-ctrl {float:left;position:relative;height:45px;border-right:1px solid rgba(255,255,255,.2);border-left:1px solid rgba(255,255,255,.2)} /* .isSub #global .toppop-ctrl {display:none;} */ #global .toppop-ctrl button {border:0;text-align:center;background:transparent;padding:11px 15px;vertical-align:middle} #global .toppop-ctrl button span {display:inline-block;font-size:14px;color:#fff;position:relative;padding:0 0 0 30px;opacity:1;} #global .toppop-ctrl button span:before {content:'';position:absolute;left:0;top:-2px;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.1) url(/resources/homepage/kor/_Img/Layout/layout_spr.png) no-repeat -44px 0;} @media all and (max-width:1200px){ #global .global-wrap {margin:0;} #global .toppop-ctrl {border-right:0} } @media all and (max-width:999px){ #global .glnk-sec {position:relative;top:auto;left:auto;right:auto;bottom:auto;overflow:hidden} #global .srvc-lnk a {display:none} #global .srvc-lnk {position:absolute;top:0;right:0} #global .toppop-ctrl {float:none;margin-left:0;height:45px;} #global .gsel-lang {display:none;} } @media all and (max-width:640px){ #global {height:40px} #global .glnk-sec a, #global .glnk-sec button {width:25%;height:40px;box-sizing:border-box;font-size:12px;padding:0;} #global .glnk-sec a span, #global .glnk-sec button span {margin-top:0;padding-right:25px;line-height:40px} #global .glnk-sec a span:after, #global .glnk-sec button span:after {top:11px;right:-4px} #global .toppop-ctrl {position:absolute;right:52px;top:56px;width:25px;height:32px;padding:0;border:0} #global .toppop-ctrl button {width:25px;height:32px;padding:0;background-image:url(/resources/_Templet/Gnavi/gnavi_01/_Img/popup_aliim.png);background-repeat:no-repeat;background-position:0 0;} #global .toppop-ctrl button span {display:block;padding:0;text-indent:-9999px;z-index:-1} } @media all and (max-width:599px){ #global .toppop-ctrl {right:82px;top:60px} #global .toppop-ctrl button {width:20px;height:26px;background-size:20px auto} } @media all and (max-width:480px){ #global .glnk-sec a span, #global .glnk-sec button span {padding-right:0;} #global .glnk-sec a span:after, #global .glnk-sec button span:after {display:none;} } /* 글로벌 사이트모음 */ #header-wrap .gnavi-panel {position:absolute;left:0;top:45px;width:100%;height:auto;z-index:9999;} #header-wrap .gnavi-panel .btit {position:relative;padding-left:65px;font-size:30px;color:#fff;line-height:50px;margin-bottom:45px;font-weight:400;} #header-wrap .gnavi-panel .btit:before {content:'';position:absolute;left:0;top:0;width:46px;height:46px;border:2px solid #fff;border-radius:50%;background-repeat:no-repeat;background-position:50% 50%;} #header-wrap .gnavi-panel .div-cont {padding:35px 0 50px 0;} #header-wrap .gnavi-panel .sch-close {position:absolute;right:0;top:35px;width:54px;height:54px;background:transparent;border:2px solid #fff;border-radius:50%;} #header-wrap .gnavi-panel .sch-close:before, #header-wrap .gnavi-panel .sch-close:after {content:'';position:absolute;left:50%;top:12px;width:2px;height:26px;margin-left:-1px;background:#fff;} #header-wrap .gnavi-panel .sch-close:before {transform:rotate(45deg)} #header-wrap .gnavi-panel .sch-close:after {transform:rotate(-45deg)} #header-wrap .hakgwa-wr {background:#0092cf;display:none;overflow:hidden;} #header-wrap .hakgwa-wr .btit:before {background-image:url(/resources/_Templet/Gnavi/gnavi_01/_Img/site_ico01.png)} #header-wrap .hakgwa-wr .lnk-list {overflow:hidden;border-left:1px solid #42b4e3;border-top:1px solid #42b4e3;} #header-wrap .hakgwa-wr .lnk-list li {float:left;width:14.28%;} #header-wrap .hakgwa-wr .lnk-list li a {display:block;border-right:1px solid #42b4e3;border-bottom:1px solid #42b4e3;font-size:17px;color:#fff;text-align:center;padding:25px 5px;transition:all .3s ease} #header-wrap .hakgwa-wr .lnk-list li a:hover {background:#fff;color:#003f8c;} #header-wrap .ginuehp-wr {background:#003f8c;display:none;overflow:hidden;} #header-wrap .ginuehp-wr .btit:before {background-image:url(/resources/_Templet/Gnavi/gnavi_01/_Img/site_ico02.png)} #header-wrap .ginuehp-wr .lnk-list {overflow:hidden;border-left:1px solid #3a669b;font-size:0;} #header-wrap .ginuehp-wr .lnk-list li {position:relative;display:inline-block;width:20%;margin-left:-1px;vertical-align:top;height:36px;} #header-wrap .ginuehp-wr .lnk-list li:before {content:'';position:absolute;right:0;top:0;width:1px;height:200%;background:#3a669b;} #header-wrap .ginuehp-wr .lnk-list li a {position:relative;display:block;font-size:16px;color:#9aaec7;padding:5px 0;margin:5px 20px;transition:all .3s ease} #header-wrap .ginuehp-wr .lnk-list li a:after {content:'';position:absolute;right:0;top:50%;width:8px;height:12px;margin-top:-6px;background:url(/resources/_Templet/Gnavi/gnavi_01/_Img/gnavi_arr.png) no-repeat 0 0;opacity:0;transition:all .3s ease} #header-wrap .ginuehp-wr .lnk-list li a span {position:relative;display:inline-block;} #header-wrap .ginuehp-wr .lnk-list li a span:after {content:'';position:absolute;left:0;bottom:-6px;width:100%;height:1px;background:#fff;opacity:0;transition:all .3s ease} #header-wrap .ginuehp-wr .lnk-list li a:hover {color:#fff;} #header-wrap .ginuehp-wr .lnk-list li a:hover span:after, #header-wrap .ginuehp-wr .lnk-list li a:hover:after {opacity:1;} @media all and (max-width:1200px){ #header-wrap .ginuehp-wr .lnk-list li a {font-size:15px} } @media all and (max-width:1100px){ #header-wrap .hakgwa-wr .lnk-list li a {font-size:15px} } @media all and (max-width:999px){ #header-wrap .gnavi-panel .btit {font-size:26px;margin-bottom:20px;padding-left:55px;line-height:40px;} #header-wrap .gnavi-panel .btit:before {width:36px;height:36px;background-size:auto 45%;} #header-wrap .gnavi-panel .div-cont {padding:30px 0;} #header-wrap .gnavi-panel .sch-close {top:30px;width:44px;height:44px;} #header-wrap .gnavi-panel .sch-close:before, #header-wrap .gnavi-panel .sch-close:after {top:10px;height:20px;} #header-wrap .hakgwa-wr .lnk-list li {width:25%;} #header-wrap .hakgwa-wr .lnk-list li a {padding:15px 5px;} #header-wrap .ginuehp-wr .lnk-list li {width:25%;height:auto;float:left;} #header-wrap .ginuehp-wr .lnk-list li a {font-size:14px;padding:2px 0;margin:5px 10px;} } @media all and (max-width:640px){ #header-wrap .gnavi-panel {top:40px;} #header-wrap .gnavi-panel .btit {font-size:20px;margin-bottom:15px;padding-left:45px;line-height:34px;} #header-wrap .gnavi-panel .btit:before {width:30px;height:30px;} #header-wrap .gnavi-panel .div-cont {padding:20px 0;} #header-wrap .gnavi-panel .sch-close {top:20px;width:36px;height:36px;} #header-wrap .gnavi-panel .sch-close:before, #header-wrap .gnavi-panel .sch-close:after {top:6px;} #header-wrap .hakgwa-wr .lnk-list li {width:33.333%;} #header-wrap .hakgwa-wr .lnk-list li a {font-size:14px;padding:10px 0;} #header-wrap .ginuehp-wr .lnk-list li {width:33.333%;} } @media all and (max-width:460px){ #header-wrap .hakgwa-wr .lnk-list li a {font-size:13px;} #header-wrap .ginuehp-wr .lnk-list li {width:50%;} #header-wrap .ginuehp-wr .lnk-list li a {font-size:13px;} } @media all and (max-width:320px){ #header-wrap .hakgwa-wr .lnk-list li a {font-size:12px;} #header-wrap .ginuehp-wr .lnk-list li a {font-size:12px;} } /*-------------------------logo_03.css------------------------------------*/ /* logo */ #header .logo {position:absolute;left:0;top:18px;} #header .logo a, #header .logo a span {display:block} #header .logo a img {max-height:53px} #header .logo a span em {display:none;font-size:21px;font-style:normal;margin-left:7px;padding-bottom:5px;margin-bottom:3px;letter-spacing:-0.05em;vertical-align:bottom} @media all and (max-width:1400px){ #header .logo {left:40px} } @media all and (max-width:999px){ #header .logo {left:20px} #header .logo {padding:12px 0;top:1px;} #header .logo a img {width:auto;max-height:38px} #header .logo a span em {font-size:18px} } @media all and (max-width:768px){ #header .logo {left:15px} } @media all and (max-width:640px){ #header .logo {left:10px} } /*-------------------------header_03.css------------------------------------*/ /* header */ #header-wrap {position:relative;width:100%;height:135px;} #header {position:relative;max-width:1400px;margin:0 auto;z-index:1000;} #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;} @media only screen and (max-width:999px){ #header-wrap {height:110px;} } @media only screen and (max-width:640px){ #header-wrap {height:105px;} } /* 메인 */ /* 1단 ìƒë‹¨íŒì— */ #toppop {position:relative;width:100%;height:0;overflow:hidden;background:#1568bc;z-index:4000;} .popups {position:relative;overflow:hidden;height:0px;z-index:2000;width:1000px;margin:0 auto;} .toppop .wpop-list {overflow:hidden;padding:136px 0 0 20px;} .toppop .wpop-list li {float:left;width:50%;} .popups .wpcont {position:absolute;top:0;left:0;width:500px;height:160px;overflow:hidden;} .popups .wpcont img {width:auto;height:160px;display:block;} .wpop-cont .comm {display:none;} /* ë©€í‹°íŒì— */ .top-wide-popups * {color:#fff} .top-wide-popups .tpop-topwide {position:relative;margin:0 auto;max-width:1200px;padding:15px 0 40px 0;} .top-wide-popups .tpop-topwide .tpop-dir-wrap{display:block;position:absolute;width:100%;height:0;left:0;top:50%;z-index:11} .top-wide-popups .tpop-topwide .tpop-dir-wrap button{display:block;position:absolute;width:48px;height:48px;top:50%;margin:-24px 0 0 0;border:0;background:url(/resources/_Img/Common/toppop_sprite2.png) no-repeat} .top-wide-popups .tpop-topwide .tpop-dir-wrap .btn-prev{background-position:0px 0px;left:0} .top-wide-popups .tpop-topwide .tpop-dir-wrap .btn-next{background-position:-50px 0px;right:0} .top-wide-popups .tpop-topwide .tpop-list-wrap {position:relative;max-width:1200px;height:80px;margin:0 auto;overflow:hidden} .top-wide-popups .tpop-topwide .tpop-list-wrap:after {content:'';position:absolute;left:50%;top:0;width:1px;height:100%;background:rgba(255,255,255,.2);} .top-wide-popups .tpop-topwide .tpop-list-wrap .wpop-item {position:absolute;overflow:hidden;} .top-wide-popups .tpop-topwide .tpop-list-wrap .wpop-item.first {left:0;} .top-wide-popups .tpop-topwide .tpop-list-wrap .wpop-item .wpop-cont, .wpop-cont > div {position:relative;display:block;height:100%;margin-left:auto;margin-right:auto;text-align:center;overflow:hidden} .top-wide-popups .tpop-topwide .tpop-list-wrap .wpop-item .wpop-cont a {display:block;height:100%;text-align:center;} .top-wide-popups .tpop-topwide .tpop-list-wrap .wpop-item .wpop-cont img {max-width:100%;max-height:100%;} .top-wide-popups .tpop-topwide button {border:0;cursor:pointer;} .top-wide-popups .tpop-topwide .wpop-ctrl-btns {position:absolute;bottom:10px;left:0;z-index:300} .top-wide-popups .tpop-topwide .wpop-ctrl-btns button {display:inline-block;border:0;width:6px;height:8px;background:url(/resources/_Img/Common/toppop_sprite2.png) no-repeat;overflow:hidden;border-radius:0;vertical-align:top;} .top-wide-popups .tpop-topwide .wpop-ctrl-btns button.btn-stop {background-position:-107px 0px} .top-wide-popups .tpop-topwide .wpop-ctrl-btns button.btn-play {background-position:-100px 0px} .top-wide-popups .tpop-topwide .wpop-ctrl-btns .nicons {display:inline-block;margin-left:10px;} .top-wide-popups .tpop-topwide .wpop-ctrl-btns .nicons button {display:inline-block;position:relative;width:7px;height:7px;padding:0;border:0;margin-right:5px;background:none} .top-wide-popups .tpop-topwide .wpop-ctrl-btns .nicons button:after{content:"";display:block;width:7px;height:7px;background:url(/resources/_Img/Common/toppop_sprite2.png) no-repeat -100px -10px} .top-wide-popups .tpop-topwide .wpop-ctrl-btns .nicons button span {width:1px;height:1px;overflow:hidden;position:absolute;top:-1000em} .top-wide-popups .tpop-topwide .wpop-ctrl-btns .nicons button.over:after, .top-wide-popups .tpop-topwide .wpop-ctrl-btns .nicons button.is-over:after {background-position:-109px -10px} .top-wide-popups .tpop-topwide .close-btns {position:absolute;right:0;bottom:10px;z-index:10;font-size:0} .top-wide-popups .tpop-topwide .close-btns * {vertical-align:middle} .top-wide-popups .tpop-topwide .close-btns input {display:inline-block;padding:0;margin:0;width:auto;height:auto;vertical-align:middle} .top-wide-popups .tpop-topwide .close-btns label {display:inline-block;margin-left:7px;margin-right:8px;font-size:13px;vertical-align:middle} .top-wide-popups .tpop-topwide .close-btns button {display:inline-block;position:relative;width:22px;height:22px;background-color:#2d2d2d;border-radius:50%;vertical-align:middle} .top-wide-popups .tpop-topwide .close-btns button:after{content:"";display:block;position:absolute;width:10px;height:10px;top:50%;left:50%;margin:-5px 0 0 -4px;background:url(/resources/_Img/Common/toppop_sprite2.png) no-repeat -100px -19px} @media only screen and (max-width:1200px) { .top-wide-popups .tpop-topwide {width:auto;margin:0 20px} } @media only screen and (max-width:999px) { .top-wide-popups .tpop-topwide .tpop-list-wrap:after {display:none;} } @media only screen and (max-width:799px) { .top-wide-popups .tpop-topwide .close-btns {top:auto;bottom:10px} .top-wide-popups .tpop-topwide .close-btns button {width:18px;height:18px;} } @media only screen and (max-width:480px) { .top-wide-popups .tpop-topwide .tpop-dir-wrap button {width:11px;height:27px;top:50%;margin:-13.5px 0 0 0;background:url(/resources/_Img/Common/toppop_sprite2.png) no-repeat;background-size:cover} .top-wide-popups .tpop-topwide .tpop-dir-wrap .btn-prev {background-position:0px 0px;left:10px} .top-wide-popups .tpop-topwide .tpop-dir-wrap .btn-next {background-position:-11px 0px;right:10px} .top-wide-popups .tpop-topwide .tpop-list-wrap {height:70px;} } /* 메뉴 */ #menu-wrap {position:relative;width:1400px;margin:0 auto;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 (max-width:1400px){ #menu-wrap {width:100%;} } /* 주메뉴 */ @media all and (min-width:1000px){ #menu-wrap .mn-top, #menu-wrap .mem-btn, #menu-wrap .btn-close, #menu-wrap .tmn-box, #menu-wrap .tmn-global {display:none;} #mainNavi-wrap {position:absolute;left:0;top:45px;width:100%;height:90px;background:#fff;z-index:500;overflow:hidden} #mainNavi-wrap:before, #mainNavi-wrap:after {content:"";width:100%;position:absolute} #mainNavi-wrap:before {height:100%;top:90px;left:0;background:#fff;transition:height .3s ease} #mainNavi-wrap:after {height:1px;background:#ccc;position:absolute;top:90px;left:0} #mainNavi-wrap.over {} #mainNavi-wrap.over:before {display:block} #mainNavi-wrap.over:after {display:block} #mainNavi {height:90px;padding:0 50px 0 325px} #mainNavi .depth1-ul {overflow:hidden;text-align:center;} #mainNavi > ul > li:first-child {padding-left:8px;} #mainNavi .mn_li1 {display: inline-block;text-align:center;margin:0 30px} #mainNavi .mn_a1 {display:block;font-size:22px;font-weight:500;color:#222;padding:34px 0;position:relative} #mainNavi .mn_li1 .mn_a1:hover, #mainNavi .mn_li1 .mn_a1:focus span, #mainNavi .mn_li1.over .mn_a1 span {color:#cc0066} #mainNavi .mn_li1 .mn_a1:after {content:'';display:none;width:100%;height:4px;background-color:#cc0066;position:absolute;bottom:0;left:50%;transform:translateX(-50%);transition:all .3s ease} #mainNavi .mn_li1 .mn_a1:hover:after, #mainNavi .mn_li1 .mn_a1:focus:after, #mainNavi .mn_li1.over .mn_a1:after {display:block} #mainNavi .depth2-wrap {display:none;position:absolute;top:90px;left:0;z-index:1000;width:1400px;padding:0 0 0 340px;text-align:left;font-weight:normal;box-sizing:border-box;min-height:400px} #mainNavi .depth2-wrap .depth2-ul {overflow:hidden;min-height:400px;padding:48px 0 30px 40px;position:relative;font-size:0;} #mainNavi .depth2-wrap:before {content:'';display:block;width:401px;height:187px;background-image:url(/resources/_Templet/Header/header_03/_Img/tmn_bg2.png);position:absolute;bottom:50px;right:-156px} #mainNavi .depth2-wrap .mn_li2 {display:inline-block;width:23%;margin:5px 0 20px 2%;vertical-align:top} #mainNavi .depth2-wrap .mn_a2 {position:relative;display:block;font-size:16px;color:#222;padding:17px 20px 17px 17px;font-weight:500;border:1px solid #b7b7b7;border-bottom:3px solid #b7b7b7;transition:all .3s ease} #mainNavi .depth2-wrap .mn_a2:before {content:"";display:block;position:absolute;width:8px;height:8px;right:22px;top:21px;border:solid;border-width:0 0 2px 2px;border-color:transparent transparent #b9b9b9 #b9b9b9;transition:all .3s ease;transform:rotate(225deg)} #mainNavi .depth2-wrap .mn_a2:after {content:'';display:block;width:100%;height:100%;border:2px solid #014898;position:absolute;top:-2px;left:-2px;border-bottom:3px solid #014898;transition:all .3s ease;display:none} #mainNavi .depth2-wrap .mn_a2.over, #mainNavi .depth2-wrap .mn_a2:hover, #mainNavi .depth2-wrap .mn_a2:focus {color:#fff;background:#014898} #mainNavi .depth2-wrap .mn_a2.over:before, #mainNavi .depth2-wrap .mn_a2:hover:before, #mainNavi .depth2-wrap .mn_a2:focus:before {border-color:#fff} #mainNavi .depth2-wrap .mn_a2.over:after, #mainNavi .depth2-wrap .mn_a2:hover:after, #mainNavi .depth2-wrap .mn_a2:focus:after {display:block} #mainNavi .depth2-wrap .depth1-tit {position:absolute;top:0;left:0;width:350px;height:100%;padding-right:30px;box-sizing:border-box;z-index:1} #mainNavi .mn_li1[seq="4"] .depth2-wrap .depth1-tit {background:none;} #mainNavi .depth2-wrap .depth1-tit:before {content:'';display:block;width:120px;height:122px;background-image:url(/resources/_Templet/Header/header_03/_Img/tmn_bg3.png);position:absolute;top:0;right:0;z-index:5} #mainNavi .depth2-wrap .depth1-tit:after {display:block;content:"";width:200%;height:100%;position:absolute;top:0;right:0;background-color:#003e92;z-index:-1;background-image:url(/resources/_Templet/Header/header_03/_Img/tmn_bg.png);background-position:right bottom;background-repeat:no-repeat} #mainNavi .depth2-wrap .depth1-tit strong {position:relative;display:block;color:#fff;font-size:38px;font-weight:700;padding:95px 0 30px 0;line-height:1;border-bottom:1px solid rgba(255,255,255,.5)} #mainNavi .depth2-wrap .depth1-tit .stxt {display:block;font-size:18px;font-weight:400;line-height:1.4;color:#fff;word-break:keep-all;line-height:1.666;margin-top:22px} #mainNavi .depth3-wrap {padding:23px 20px 5px 23px;} #mainNavi .depth3-wrap .mn_li3 {margin-bottom:12px;} #mainNavi .depth3-wrap .mn_a3 {position:relative;display:block;font-size:16px;color:#555;padding:0 10px;} #mainNavi .depth3-wrap .mn_a3:before {content:'';position:absolute;left:-2px;top:8px;width:4px;height:4px;background:#bbb;border-radius:50%} #mainNavi .depth3-wrap .mn_a3 span {position:relative;display:inline-block;word-break:keep-all} #mainNavi .depth3-wrap .mn_a3 span:before {content:'';position:absolute;left:0;bottom:-5px;width:100%;height:1px;background:#003e92;opacity:0;transition:all .3s ease} #mainNavi .depth3-wrap .mn_a3.over, #mainNavi .depth3-wrap .mn_a3:hover, #mainNavi .depth3-wrap .mn_a3:focus {color:#003e92;} #mainNavi .depth3-wrap .mn_a3.over span:before, #mainNavi .depth3-wrap .mn_a3:hover span:before, #mainNavi .depth3-wrap .mn_a3:focus span:before {opacity:1;} #mainNavi .mn_a1[target=_blank] span:after {display:inline-block;content:"";width:15px;height:15px;margin-left:7px;background:url(/resources/_Img/Common/ico_nw2.png) no-repeat 0 0} #mainNavi .depth2-wrap .mn_a2[target=_blank]:before {display: none} #mainNavi .mn_a2[target=_blank] span:after {content:"";position:absolute;right:20px;top:17px;width:11px;height:11px;margin-left:7px;background:url(/resources/_Img/Common/ico_nw.png) no-repeat 0 0} #mainNavi .mn_a2[target=_blank].over span:after, #mainNavi .mn_a2[target=_blank]:hover span:after, #mainNavi .mn_a2[target=_blank]:focus span:after, #mainNavi .mn_a2[target=_blank]:active span:after {background-position:-13px 0} #mainNavi .mn_a3[target=_blank] span:after {content:"";display:inline-block;width:11px;height:11px;margin-left:7px;background:url(/resources/_Img/Common/ico_nw.png) no-repeat 0 0} #mainNavi .mn_a3[target=_blank].over span:after, #mainNavi .mn_a3[target=_blank]:hover span:after, #mainNavi .mn_a3[target=_blank]:focus span:after, #mainNavi .mn_a3[target=_blank]:active span:after {background-position:0 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;right:10px;top:32px;width:24px;height:24px} #menu-wrap .allmn-btn:before, #menu-wrap .allmn-btn:after, #menu-wrap .allmn-btn .txt:before {content:"";display:block;width:24px;height:2px;background:#222;margin-left:12px;transition:all .3s ease;margin:0 auto} #menu-wrap .allmn-btn:before {margin-bottom:5px;margin-top:5px} #menu-wrap .allmn-btn:after {margin-top:5px;} #menu-wrap .allmn-btn:hover:before, #menu-wrap .allmn-btn:hover:after {width:18px;background:#0d5db2;} #menu-wrap .allmn-btn:hover .txt:before {width:18px;margin-left:17px;background:#0d5db2;} } @media all and (max-width:1499px) and (min-width:999px) { #mainNavi .depth2-wrap .depth2-ul {padding:48px 30px 30px 40px} } @media all and (max-width:1400px) and (min-width:999px) { #mainNavi {padding:0 50px 0 350px} #menu-wrap .allmn-btn {right:40px} } @media all and (max-width:1300px) and (min-width:999px) { #mainNavi {padding:0 50px 0 300px} #mainNavi .mn_li1 {margin:0 20px} #mainNavi .depth2-wrap {padding:0 0 0 180px;width:100%} } @media all and (max-width:1199px) and (min-width:999px) { #mainNavi .mn_a1 {font-size:20px} #mainNavi .mn_li1 {margin:0 15px} } @media only screen and (max-width:999px){ /* 메뉴 */ #mainNavi-wrap {overflow:inherit;position:absolute;top:0;right:0;width:100%;} #menu-wrap.mn-h-open {right:0;overflow:visible} #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 {position:absolute;transition:right 0.3s ease;right:-100%;top:0px;left:auto;width:100%;height:9000px;z-index:8000;background:#fff;overflow-y:scroll;overflow-x:hidden} #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 {position:relative;background:#032e52;padding:40px 20px;border-bottom:1px solid #305575;} #menu-wrap .tmn-box .btn-close {width:32px;height:32px;background:none;border:2px solid #fff;border-radius:50%;position:absolute;top:50%;right:10px;margin-top:-16px;} #menu-wrap .tmn-box .btn-close:before, #menu-wrap .tmn-box .btn-close:after {display:block;content:"";width:2px;height:14px;background:#fff;position:absolute;top:50%;left:50%;margin-top:-7px;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;} #menu-wrap .tmn-global {position:relative;background:#032e52;padding:14px 0 14px 15px;height:45px;box-sizing:border-box} #menu-wrap .tmn-global li {display:inline-block;line-height:1} #menu-wrap .tmn-global li a {color:#fff;font-size:13px;padding:0 5px;opacity:.6;} #menu-wrap.mn-h-open #mainNavi {left:auto;right:0;top:0;width:100%} #mainNavi .depth1-tit, #mainNavi .mn_li1.over:before {display:none;} #mainNavi li.mn_li1 {position:relative;border-top:1px solid #305575;background:#032e52} #mainNavi .mn_li1 .mn_a1 {display:block;padding:25px 0 25px 20px;font-size:20px;color:#fff;font-weight:500;} #mainNavi .mn_li1.is-open {background:#014898;} #mainNavi .mn_li1.is-open .mn_a1 {color:#fff} #mainNavi .mn_li1.is-close .tgl-btn {position:absolute;top:21px;right:15px;width:26px;height:26px;border:0;background:none;z-index:500;} #mainNavi .mn_li1.is-close .tgl-btn:before, #mainNavi .mn_li1.is-close .tgl-btn:after {display:block;content:"";width:16px;height:2px;background:#fff;position:absolute;top:50%;left:50%;margin-top:-1px;margin-left:-8px} #mainNavi .mn_li1.is-close > .tgl-btn:after {display:none;} #mainNavi .mn_li2.is-close .tgl-btn {top:13px;} #mainNavi .mn_li2.is-close .tgl-btn:before, #mainNavi .mn_li2.is-close .tgl-btn:after {width:12px;background:#8e8e8e;} #mainNavi .mn_li2.is-close .tgl-btn:before {transform:rotate(45deg);-ms-transform:rotate(45deg);margin-left:-9px;} #mainNavi .mn_li2.is-close .tgl-btn:after {transform:rotate(-45deg);-ms-transform:rotate(-45deg);margin-left:-2px;} #mainNavi .mn_li2.is-open > .tgl-btn:before, #mainNavi .mn_li2.is-open > .tgl-btn:after {width:16px;background:#063761;transform:rotate(0deg);-ms-transform:rotate(0deg);margin-left:-8px;} #mainNavi .mn_li2.is-open > .tgl-btn:before {display:none;} #mainNavi .depth2-wrap {display:none;position:relative;height:auto;background:#fff;transition:display .3s ease;} #mainNavi .mn_li2 {position:relative;border-bottom:1px solid #d2d2d2} #mainNavi .depth2-wrap .mn_li2:last-child, #mainNavi .depth2-wrap .mn_li2.is-open {border-bottom:0;} #mainNavi .depth2-wrap .mn_a2 {position:relative;display:block;color:#222;font-size:17px;padding:20px;position:relative} #mainNavi .depth2-wrap .mn_a2.over, #mainNavi .depth2-wrap .is-open .mn_a2, #mainNavi .depth2-wrap .mn_a2:hover {font-weight:500;color:#014898} #mainNavi .depth2-wrap .is-open .mn_a2:before, #mainNavi .depth2-wrap .mn_a2.over:before, #mainNavi .depth2-wrap .mn_a2:hover:before {background:#f04e23;} #mainNavi .depth2-wrap .depth3-wrap {display:none;background:#f6f6f6 url(/resources/homepage/kor/_Img/Layout/lm_dot.gif) repeat-x 0 bottom;border-top:4px solid #014898;padding:15px 0;} #mainNavi .depth2-wrap .depth3-wrap li {padding:1px 30px} #mainNavi .depth2-wrap .depth3-wrap li a {position:relative;display:block;padding:5px 0 5px 9px;} #mainNavi .depth2-wrap .depth3-wrap li a:before {display:block;content:"";width:3px;height:2px;background:#063761;position:absolute;top:11px;left:0} #mainNavi .depth2-wrap .depth3-wrap li a span {font-size:14px;} #mainNavi .depth2-wrap .depth3-wrap li.over a {position:relative;color:#014898} #mainNavi .depth2-wrap .depth3-wrap li.over a span {display:inline-block;padding-bottom:4px;border-bottom:1px solid #014898} #mainNavi .mn_a1[target=_blank]:after, #mainNavi .mn_a2[target=_blank]:after, #mainNavi .mn_a3[target=_blank]:after {content:'';display:inline-block;width:11px;height:11px;margin-left:5px;z-index:100} #mainNavi .mn_a1[target=_blank]:after {background:url(/resources/_Img/Common/ico_nw.png) no-repeat -13px 0;} #mainNavi .mn_a2[target=_blank]:after {background:url(/resources/_Img/Common/ico_nw.png) no-repeat 0 0;} #mainNavi .mn_a3[target=_blank]:after {background:url(/resources/_Img/Common/ico_nw.png) no-repeat 0 0;} .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:3000;} #mn-ctrs-btns {display:block;position:absolute;right:20px;top:60px} #mn-ctrs-btns .mn-ctrs-btn {position:relative;width:31px;height:31px;background:transparent;border:0} #mn-ctrs-btns .mn-ctrs-btn:before, #mn-ctrs-btns .mn-ctrs-btn:after, #mn-ctrs-btns .mn-ctrs-btn .txt:before {content:"";display:block;width:25px;height:2px;background:#222;margin-left:3px;transition:all .3s ease;} #mn-ctrs-btns .mn-ctrs-btn:before {margin-bottom:5px;margin-top:0;} #mn-ctrs-btns .mn-ctrs-btn:after {margin-top:5px;} #mn-ctrs-btns .btn-search {width:0;height:0;background:url(/resources/homepage/kor/_Img/Layout/layout_spr.png) no-repeat -120px 0;border:0;margin-right:5px;} #menu-wrap .tmn-global .gsel-lang {position:absolute;right:0;top:0;line-height:1.35em;height:45px;border-left:1px solid rgba(255,255,255,.2);} #menu-wrap .tmn-global .gsel-lang dl {height:100%;transition:height .2s ease;overflow:hidden;} #menu-wrap .tmn-global .gsel-lang dt a {position:relative;display:block;padding:10px 15px 0 15px;height:35px;color:#fff;font-size:13px;} #menu-wrap .tmn-global .gsel-lang dt a:after {content:"";display:inline-block;vertical-align:middle;width:0;border-width:4px;border-color:#fff transparent transparent transparent;border-style:solid;margin-top:6px;margin-left:10px} #menu-wrap .tmn-global .gsel-lang dd {width:100%;overflow:hidden;} #menu-wrap .tmn-global .gsel-lang dd ul {width:100%;padding:0 0 5px 0;background:#0a3155;} #menu-wrap .tmn-global .gsel-lang dd a {display:block;padding:5px 10px;font-size:14px;text-align:center;} #menu-wrap .tmn-global .gsel-lang dd a span {display:inline-block;color:#fff} #menu-wrap .tmn-global .gsel-lang dd a span:before {content:'';display:inline-block;width:22px;height:15px;margin-right:5px;vertical-align:middle;display:none;} #menu-wrap .tmn-global .gsel-lang dd a.langE span:before {background:url(/resources/_Img/Common/US.png) no-repeat 0 0} #menu-wrap .tmn-global .gsel-lang dd a.langC span:before {background:url(/resources/_Img/Common/CN.png) no-repeat 0 0} #menu-wrap .tmn-global .gsel-lang dd a.langV span:before {background:url(/resources/_Img/Common/VET.png) no-repeat 0 0} #menu-wrap .tmn-global .gsel-lang dd a.langK span:before {background:url(/resources/_Img/Common/KR.png) no-repeat 0 0} #menu-wrap .tmn-global .gsel-lang dd a:hover span, .gsel-lang dd a:focus span, .gsel-lang dd a:active span {color:#60a6f1;text-decoration:underline;} #menu-wrap .tmn-global .gsel-lang .is-open dd {height:11.5em;} #menu-wrap .btn-search, #menu-wrap .allmn-btn {display:none;} } @media only screen and (max-width:1499px){ #mainNavi .depth2-wrap {width:100%} #mainNavi .depth2-wrap .depth1-tit {left:20px} #mainNavi .depth2-wrap .depth1-tit strong {font-size:30px} #mainNavi .depth2-wrap .depth1-tit .stxt {font-size:16px} } @media only screen and (max-width:1299px){ #mainNavi .depth2-wrap .depth1-tit {width:200px;background-size:cover} #mainNavi .depth2-wrap .depth1-tit strong {font-size:26px} } @media only screen and (max-width:599px){ #mn-ctrs-btns .btn-search {width:25px;height:25px;position:relative;top:-5px;background-size:121px auto;background-position:-96px 0} } @media only screen and (max-width:640px){ #mn-ctrs-btns {right:10px;top:55px} } /* 상단 검색바 */ #sch-lay {position:absolute;left:0;top:135px;width:100%;z-index:1000;display:none;} #sch-lay .sch-box {position:relative;width:1200px;margin:0 auto;padding:35px 0;text-align:center;background:#0092cf;} #sch-lay .sch-box form {display:inline-block;padding-bottom:5px;border-bottom:2px solid #fff;} #sch-lay .sch-box label.tit {font-family:"sofia-pro";color:#fff;font-size:42px;font-weight:300;margin-right:20px;} #sch-lay .sch-box #keyword {width:400px;color:#fff;font-size:18px;background:transparent;border:0;height:40px;line-height:40px;} #sch-lay .sch-box #keyword::placeholder {color:#fff;font-size:18px;} #sch-lay .sch-box .sch-go {width:40px;height:40px;border:0;vertical-align:top;margin-top:8px;background:url(/resources/_Templet/Layout/layout_01/_Img/sch_ico.png) no-repeat 50% 50%;} #sch-lay .sch-box .sch-close {position:absolute;right:35px;top:50%;width:54px;height:54px;margin-top:-27px;background:transparent;border:2px solid #fff;border-radius:50%;} #sch-lay .sch-box .sch-close:before, #sch-lay .sch-box .sch-close:after {content:'';position:absolute;left:50%;top:12px;width:2px;height:26px;margin-left:-1px;background:#fff;} #sch-lay .sch-box .sch-close:before {transform:rotate(45deg)} #sch-lay .sch-box .sch-close:after {transform:rotate(-45deg)} @media only screen and (max-width:1200px){ #sch-lay .sch-box {width:100%;} } @media only screen and (max-width:999px){ #sch-lay {top:110px;} #sch-lay .sch-box {padding:20px 0;} #sch-lay .sch-box form {padding-bottom:0;} #sch-lay .sch-box label.tit {font-size:34px;} #sch-lay .sch-box #keyword {width:300px;} #sch-lay .sch-box .sch-go {margin-top:2px;} #sch-lay .sch-box .sch-close {width:40px;height:40px;margin-top:-20px;} #sch-lay .sch-box .sch-close:before, #sch-lay .sch-box .sch-close:after {top:9px;height:20px;} } @media only screen and (max-width:640px){ #sch-lay {top:105px;} #sch-lay .sch-box {padding:15px 0;} #sch-lay .sch-box label.tit {font-size:26px;margin-right:10px;} #sch-lay .sch-box #keyword {width:150px;font-size:16px;} #sch-lay .sch-box #keyword::placeholder {font-size:16px;} #sch-lay .sch-box .sch-close {right:20px;} } @media only screen and (max-width:460px){ #sch-lay .sch-box {padding:5px 0 10px 0;box-sizing:border-box} #sch-lay .sch-box label.tit {font-size:20px;display:none;} #sch-lay .sch-box #keyword {font-size:14px;} #sch-lay .sch-box #keyword::placeholder {font-size:14px;} #sch-lay .sch-box .sch-close {right:10px;width:34px;height:34px;margin-top:-17px;} #sch-lay .sch-box .sch-close:before, #sch-lay .sch-box .sch-close:after {top:8px;height:15px;} } /*-------------------------submenu_01.css------------------------------------*/ #side-wrap, #side-wrap .lmlnk-box, #side-wrap .lmcal-box {display:none} @media all and (min-width:1200px){ #side-wrap {position:relative;float:left;width:250px;padding-bottom:50px;display:block} .submenu .lm-tit {display:none;padding:31px 0;text-align:center;background:#aaa;} .submenu .lm-tit .tit {display:block;font-size:22px;color:#fff;font-weight:500;margin-bottom:10px;} .submenu .lm-tit .txt {display:block;font-size:13px;color:#f3b8a8;line-height:1.4;} .submenu .depth1 .lm_a1 {display:none;} .submenu .depth2 .lm_l2 {position:relative;} .submenu .depth2 .lm_a2 {display:block;padding:18px 25px 20px 25px;font-size:16px;color:#222;font-weight:500;background:#fff;border-bottom:1px solid #c4c4c4;transition:all 0.3s ease} .submenu .depth2 .lm_a2[target=_blank]:after {content:'';position:absolute;right:18px;top:19px;width:15px;height:15px;background:url(/resources/_Img/Common/ico_nw2.png) no-repeat 0 0;z-index:100} .submenu .depth2 .over .lm_a2, .submenu .depth2 .is-open .lm_a2 {color:#014898;border-bottom:4px solid #014898} .submenu .depth2 .lm_a2:hover, .submenu .depth2 .lm_a2:focus {color:#014898;text-decoration:none;} .submenu .depth3 {display:none;padding:10px 25px;background:#f6f6f6;} .submenu .lm_l2.over .depth3, .submenu .lm_l2.is-open .depth3 {display:block;background:#f6f6f6 url(/resources/homepage/kor/_Img/Layout/lm_dot.gif) repeat-x 0 bottom;} .submenu .depth3 .lm_l3 {margin:5px 0;} .submenu .depth3 .lm_a3 {position:relative;display:block;font-size:15px;color:#666;padding:3px 0 6px 11px;} .submenu .depth3 .lm_a3:before {content:'';position: absolute;left: 0;top:9px;width:4px;height: 2px;background:#8e8e8e;} .submenu .depth2 .lm_a3[target=_blank]:after {content:'';display:inline-block;width:11px;height:11px;background:url(/resources/_Img/Common/ico_nw.png) no-repeat 0 0;z-index:100} .submenu .depth3 .over .lm_a3, .submenu .depth3 .lm_a3:hover, .submenu .depth3 .lm_a3:focus {color:#014898;} .submenu .depth3 .over .lm_a3:before, .submenu .depth3 .lm_a3:hover:before, .submenu .depth3 .lm_a3:focus:before {background:#063761;} .submenu .depth4 {background:#fff;padding:5px 10px;} .submenu .depth4 .lm_l4 {margin:5px 0;} .submenu .depth4 .lm_a4 {position:relative;padding-left:10px;} .submenu .depth4 .lm_a4:before {content:'';position: absolute;left:0;top:9px;width:2px;height:2px;border-radius:50%;background:#8e8e8e;} .submenu .depth4 .over .lm_a4, .submenu .depth4 .lm_a4:hover, .submenu .depth4 .lm_a4:focus {color:#014898;} .submenu .depth4 .over .lm_a4:before, .submenu .depth4 .lm_a4:hover:before, .submenu .depth4 .lm_a4:focus:before {background:#063761;} #side-wrap .lm_a1, #side-wrap .lm_l1 > button {display:none;} #side-wrap .depth2 .has-sub .tgl-btn {position:absolute;top:16px;right:15px;width:20px;height:20px;border:0;background:transparent;} #side-wrap .depth2 .has-sub .tgl-btn:before, #side-wrap .depth2 .has-sub .tgl-btn:after {content:'';position:absolute;background:#8e8e8e;transition:all 0.3s ease} #side-wrap .depth2 .has-sub .tgl-btn:before {width:14px;height:2px;left:3px;top:9px;} #side-wrap .depth2 .has-sub .tgl-btn:after {width:2px;height:14px;left:9px;top:3px;} #side-wrap .depth2 .is-open .tgl-btn:before {left:2px;top:9px;width:16px;background:#063761;} #side-wrap .depth2 .is-open .tgl-btn:after {display:none;} #side-wrap .depth2 .has-sub:focus .tgl-btn:before, #side-wrap .depth2 .has-sub:focus .tgl-btn:after, #side-wrap .depth2 .has-sub:hover .tgl-btn:before, #side-wrap .depth2 .has-sub:hover .tgl-btn:after {background:#063761;} #side-wrap .lmcal-box {display:block;margin-top:70px;border-bottom:1px solid #a4a4a4} #side-wrap .lmcal-box .tit-sec {position:relative;padding-bottom:15px;border-bottom:2px solid #1d1d1d;} #side-wrap .lmcal-box .tit-sec .btit {position:relative;font-size:20px;color:#333;padding:2px 0 2px 35px;background:url(/resources/_Templet/Layout/layout_01/_Img/lm_caledar.png) no-repeat 0 0;} #side-wrap .lmcal-box .tit-sec .more-btn {position:absolute;right:0;top:0;width:23px;height:23px;} #side-wrap .lmcal-box .tit-sec .more-btn:before, #side-wrap .lmcal-box .tit-sec .more-btn:after {content:'';position:absolute;left:0;top:50%;width:23px;height:1px;background:#a5a5a5;transition:all 0.3s ease} #side-wrap .lmcal-box .tit-sec .more-btn:after {transform:rotate(90deg)} #side-wrap .lmcal-box .tit-sec .more-btn:hover:before, #side-wrap .lmcal-box .tit-sec .more-btn:hover:after, #side-wrap .lmcal-box .tit-sec .more-btn:focus:before, #side-wrap .lmcal-box .tit-sec .more-btn:focus:after {background:#000;} #side-wrap .lmcal-box .date-sec {padding:20px 0 25px 0;text-align:center;} #side-wrap .lmcal-box .date-sec .date {display:block;font-size:26px;font-family:"sofia-pro";color:#333;font-weight:300;} #side-wrap .lmcal-box .date-sec .txt {display:block;font-size:16px;color:#666;margin-top:15px;} #side-wrap .lmlnk-box {display:block;margin-top:20px;border:1px solid #ccc} #side-wrap .lmlnk-box a {position:relative;display:block;font-size:15px;color:#10386e;background:#fcfcfc;padding:15px 20px;font-weight:500;border-top:1px solid #ccc;transition:all 0.3s ease} #side-wrap .lmlnk-box a:first-child {border-top:0} #side-wrap .lmlnk-box a:before {content:'';position:absolute;right:50px;top:50%;margin-top:-15px;width:1px;height:30px;background:#c4c4c4;} #side-wrap .lmlnk-box a:after {content:'';position:absolute;right:16px;top:50%;} #side-wrap .lmlnk-box a.btn1:after {width:17px;height:25px;margin-top:-12px;background:url(/resources/_Templet/Layout/layout_01/_Img/lm_ico01.png) no-repeat 0 0;} #side-wrap .lmlnk-box a.btn2:after {width:18px;height:17px;margin-top:-9px;background:url(/resources/_Templet/Layout/layout_01/_Img/lm_ico02.png) no-repeat 0 0;} #side-wrap .lmlnk-box a:hover, #side-wrap .lmlnk-box a:focus {background:#f4f4f4;} } @media all and (max-width:768px){ #side-wrap {display:block;width:100%;margin-top:-150px;} #side-wrap:after {content:'';position:absolute;left:0;top:150px;width:100%;height:100%;background:rgba(0,0,0,.6);z-index:10;display:none;} .submenu .lm-tit {display:none;} #leftmenu {height:150px} #leftmenu .lm_l1 {height:150px;background:rgba(0,0,0,.4);transition:all .3s ease} #leftmenu .lm_l1.is-open {background:rgba(3,46,82,.9)} #leftmenu .lm_l1 > .tgl-btn {position:absolute;top:0;left:0;width:100%;height:150px;border:0;background:none;z-index:99} #leftmenu .lm_a1 {display:block;width:100%;font-size:26px;color:#fff;font-weight:500;text-align:center;padding-top:35px;} #leftmenu .lm_a1 span {display:block;position:relative} #leftmenu .lm_a1 span:after {content:'';display:block;width:40px;height:40px;margin:10px auto;border-radius:50%;background:#0092cf url(/resources/_Templet/Layout/layout_01/_Img/lm_arr.png) no-repeat 50% 50%;transition:all .3s ease;transform:rotate(180deg);-ms-transform:rotate(180deg)} #leftmenu .lm_l1.is-open .lm_a1 span:after {transform:rotate(0deg);-ms-transform:rotate(0deg)} #leftmenu .depth2 {display:none;position:absolute;top:150px;left:0;width:100%;background:#fff;z-index:1000;box-shadow:0px 12px 14px rgba(0,0,0,.2)} #leftmenu .depth2 .lm_l2 {position:relative;background:#fff;border-bottom:1px solid #c4c4c4} #leftmenu .depth2 .lm_a2 {display:block;padding:20px;font-size:16px;color:#666} #leftmenu .depth2 .lm_l2.is-open {border-bottom:0;padding-bottom:1px;background:url(/resources/homepage/kor/_Img/Layout/lm_dot.gif) repeat-x 0 bottom;} #leftmenu .depth2 .lm_l2.is-open .lm_a2, #leftmenu .depth2 .lm_l2.over .lm_a2 {color:#014898;font-weight:500;} #leftmenu .lm_l2.is-close .tgl-btn {position:absolute;top:13px;right:15px;width:26px;height:26px;border:0;background:none;z-index:500;} #leftmenu .lm_l2.is-close .tgl-btn:before, #leftmenu .lm_l2.is-close .tgl-btn:after {display:block;content:"";width:2px;height:12px;background:#8e8e8e;position:absolute;top:50%;left:50%;margin-top:-6px;margin-left:-1px} #leftmenu .lm_l2.is-close .tgl-btn:before {transform:rotate(-45deg);-ms-transform:rotate(-45deg);margin-left:-5px;} #leftmenu .lm_l2.is-close .tgl-btn:after {transform:rotate(45deg);-ms-transform:rotate(45deg);margin-left:3px;} #leftmenu .lm_l2.is-open .tgl-btn:before, #leftmenu .lm_l2.is-open .tgl-btn:after {background:#063761;} #leftmenu .lm_l2.is-open .tgl-btn:after {transform:rotate(90deg);-ms-transform:rotate(90deg);height:16px;margin-left:-1px;margin-top:-8px;} #leftmenu .lm_l2.is-open .tgl-btn:before {display:none;} #leftmenu .depth3 {display:none;padding:15px 20px;overflow:hidden;font-size:0;background:#f6f6f6;border-top:4px solid #014898} #leftmenu .depth3 .lm_l3 {display:inline-block;width:50%;} #leftmenu .depth3 .lm_l3 .tgl-btn {width:20px;height:20px;top:0;background-size:20px;} #leftmenu .depth3 .lm_a3 {display:block;font-size:14px;padding:7px 0 7px 11px;color:#444;position:relative} #leftmenu .depth3 .lm_a3:before {content:"";position:absolute;left:0;top:14px;width:3px;height:2px;background:#063761;} #leftmenu .depth3 .lm_a3 span {position:relative} #leftmenu .depth3 .lm_a3 span:after {width:0;height:1px;bottom:0;background:#0097b2;transition:all .3s ease} #leftmenu .depth3 .lm_l3.over .lm_a3 {color:#006376} #leftmenu .depth3 .lm_l3.over .lm_a3 span {display:inline-block;padding-bottom:4px;border-bottom:1px solid #006376} #leftmenu .depth4 {display:none;padding:5px 15px;margin-top:10px;overflow:hidden;background:#f6f6f6;border:1px solid #ddd} #leftmenu .depth4 .lm_l4 {position:relative;margin:10px 0;} #leftmenu .depth4 .lm_l4.over .lm_a4 {color:#1462bc;} } /*-------------------------footer_03.css------------------------------------*/ /* footer */ #footer-wrap {position:relative;background:#272b34;padding:0 0 50px 0;line-height:1.2;z-index:3000;} #footer-wrap .service-cont {position:relative;height:64px;border-bottom:1px solid rgba(255,255,255,.1)} #footer-wrap .service-cont .btn-prev, #footer-wrap .service-cont .btn-next {display:none} #footer-wrap .service-list {padding:25px 0;line-height:1;position:relative} #footer-wrap .service-list li {display:inline-block} #footer-wrap .service-list li a {position:relative;display:block;padding:0 13px} #footer-wrap .service-list li a:after {content:'';position:absolute;left:0;top:0;width:1px;height:100%;background:rgba(255,255,255,0.3);} #footer-wrap .service-list li:first-child a {padding-left:0;margin-left:0} #footer-wrap .service-list li:first-child a:after {display:none;} #footer-wrap .service-list li:last-child a {padding-right:0;margin-right:0} #footer-wrap .service-list li a span {position:relative;font-size:14px;letter-spacing:-0.02em;color:#aaa;} #footer-wrap .service-list li a span:after {content:'';position:absolute;left:0;bottom:-2px;width:100%;height:1px;opacity:0;background:#aaa;transition:all 0.3s ease;} #footer-wrap .service-list li a:hover span:after, .service-cont .service-list li a:focus span:after {opacity:1;} #footer-wrap .service-list li a.privacy span {color:#fd0181;} #footer-wrap .service-list li a.privacy span:after {background:#fd0181;} #footer-wrap .family-site-wr {position:absolute;top:0;right:0;font-size:0} #footer-wrap .family-site-wr .family-site {font-size:13px;display:inline-block;background:transparent;width:190px;border-right:1px solid rgba(255,255,255,0.3);z-index:100;position:relative} #footer-wrap .family-site-wr .family-site:first-child {border-left:1px solid rgba(255,255,255,0.3)} #footer-wrap .family-site-wr .family-site dt button {position:relative;color:#d8d8d9;background:none;border:0;width:100%;display:block;padding:0 0 0 19px;height:54px;font-weight:500;transition:all 0.3s ease;text-align:left;vertical-align:middle} #footer-wrap .family-site-wr .family-site dt button:hover, #footer-wrap .family-site-wr .family-site-wr .family-site dt button:focus {background:rgba(0,0,0,0.3);} #footer-wrap .family-site-wr .family-site dt button:after {transition:all .3s ease;content:'';position: absolute;right:20px;top:15px;width:24px;height:24px;background:url(/resources/_Img/Templet/Layout/footer_spr.png) no-repeat 0 0;} #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 {position:absolute;bottom:54px;left:0;display:none;background:#4d5057;width:100%;} #footer-wrap .family-site-wr .family-site .isSelSub ul {padding:10px 10px 10px 15px;height:150px;overflow-y:scroll} #footer-wrap .family-site-wr .family-site .isSelSub li a {display:inline-block;color:#fff;padding:5px 0;} #footer-wrap .family-site-wr .family-site .isSelSub li a:hover, .service-cont .family-site .isSelSub li a:focus, .service-cont .family-site .isSelSub li a:active {text-decoration:underline;} #footer-wrap .family-site-wr .family-site .btn-fclose {position:absolute;top:0;right:-27px;border:0;cursor:pointer;background:url(/resources/_Img/Templet/Layout/btn_fclose.gif) no-repeat 0 0;width:28px;height:28px;} #footer-wrap .footer {position:relative;font-size:14px;margin-top:35px;padding:0 0 0 125px;color:#a4a4a4;word-break:keep-all;letter-spacing:0} #footer-wrap .footer .flogo {position:absolute;left:0;top:-5px;} #footer-wrap .footer .flogo a {display:block} #footer-wrap .footer .flogo .flogo-txt {color:#a8acac;display:block;font-size:17px;text-align:center} #footer-wrap .footer .add-sec {margin-bottom:5px;} #footer-wrap .footer .add-sec .tit {color:#fff;font-weight:500;margin-right:5px;} #footer-wrap .footer .add-sec .number {margin-right:5px;} #footer-wrap .footer .copyright {/*color:#6a6a6a*/color:#fff;font-size:13px;margin-top:20px;text-transform:uppercase;font-weight:300} #footer-wrap .footer address {display:inline-block;margin-right:10px;font-weight:300} #footer-wrap .fsns-wr {position:absolute;top:0;right:70px} #footer-wrap .fsns li {display:inline-block;margin-left:5px;vertical-align:bottom;} #footer-wrap .fsns li a {display:block;width:45px;height:45px;border-radius:50%;background:rgba(140,140,140,.2) url(/resources/_Img/Templet/Layout/sns_spr.png) no-repeat} #footer-wrap .fsns .facebook a {background-position:0 0} #footer-wrap .fsns .twitter a {background-position:-46px 0} #footer-wrap .fsns .naverblog a {background-position:-92px 0} #footer-wrap .fsns .youtube a {background-position:-138px 0} #footer-wrap .fsns .insta a {background-position:-184px 0} #footer-wrap .fsns .daumcafe a {background-position:-230px 0} #footer-wrap .fsns .kakao a {background-position:-276px 0} #footer-wrap .fsns .wa a {width:auto;height:auto;background:none;} #footer-wrap .topBt {position:fixed;bottom:-100px;right:55px;width:50px;height:50px;text-align:center;background-color:#b3005b;border-radius:50%;z-index:3500;transition:all .3s ease} #footer-wrap .topBt span {display:inline-block;color:#fff;font-size:0;position:relative;} #footer-wrap .topBt span:before {display:block;content:"";width:50px;height:50px;background-image:url(/resources/_Templet/Main/main_kor3/_Img/main_icospr03.png);background-position:-40px 0} #footer-wrap .topBt.over {bottom:160px} #footer-wrap .flic-wrap {position:absolute;right:0;bottom:0;} #footer-wrap .flic-wrap li {float:left;margin:0 5px;} #footer-wrap .flic-wrap li a {display:block;} #footer-wrap .fsns li:hover a, #footer-wrap .fsns li:focus a {animation:ico_ani3 1s ease-out infinite} @media all and (max-width:1699px){ #footer-wrap .topBt.over {bottom:60px} } @media all and (max-width:1199px){ #footer-wrap .topBt {right:35px;width:40px;height:40px} #footer-wrap .topBt span:before {width:40px;height:40px;background-size:215px auto;background-position:-32px 0} } @media all and (max-width:999px){ #footer-wrap .service-cont {margin:0;width:100%;height:auto;box-sizing:border-box;padding:0 45px;border-bottom:1px solid rgba(255,255,255,0.3)} #footer-wrap .service-cont .btn-prev, #footer-wrap .service-cont .btn-next {display:block;border:0;background:0;width:45px;height:64px;position:absolute;top:0;} #footer-wrap .service-cont .btn-prev {left:0} #footer-wrap .service-cont .btn-next {right:0} #footer-wrap .service-cont .btn-prev:before, #footer-wrap .service-cont .btn-next:before {display:block;content:"";width:10px;height:10px;border-left:1px solid #fff;border-bottom:1px solid #fff;position:absolute;top:50%;left:50%;margin-top:-5px;margin-left:-5px;z-index:2;} #footer-wrap .service-cont .btn-prev:before {transform:rotate(45deg);-ms-transform:rotate(45deg)} #footer-wrap .service-cont .btn-next:before {transform:rotate(-135deg);-ms-transform:rotate(-135deg)} #footer-wrap .service-cont button:after {content:"";position:absolute;top:0;display:block;width:50px;height:52px;z-index:1;} #footer-wrap .service-cont .btn-prev:after {left:20px;background:linear-gradient(to left, rgba(39, 43, 52, 0) 0, #272b34 50%)} #footer-wrap .service-cont .btn-next:after {right:20px;background:linear-gradient(to right, rgba(39, 43, 52, 0) 0, #272b34 50%)} #footer-wrap .service-list {width:100%;box-sizing:border-box;text-align:center;overflow:hidden;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch} #footer-wrap .family-site-wr {top:auto;bottom:0;text-align:center;width:100%} #footer-wrap .family-site-wr .family-site {width:50%;box-sizing:border-box;text-align:left;border-top:1px solid rgba(255,255,255,0.3)} #footer-wrap .footer {padding:0;text-align:center} #footer-wrap .footer .flogo {position:relative;top:auto;left:auto;right:auto;bottom:auto;margin-bottom:20px} #footer-wrap .footer .flogo .flogo-txt {display:none} #footer-wrap .footer .flogo a {display:inline-block} #footer-wrap .fsns-wr {position:relative;top:auto;left:auto;right:auto;bottom:auto;text-align:center;margin-top:20px} #footer-wrap .topBt.over {bottom:30px} } @media all and (max-width:768px){ #footer-wrap .topBt {right:20px} } @media all and (max-width:680px){ #footer-wrap {padding-bottom:30px} #footer-wrap .footer {margin-top:20px} } @media all and (max-width:599px){ #footer-wrap .service-cont .btn-prev, #footer-wrap .service-cont .btn-next {height:52px;} #footer-wrap .service-list {padding:0;height:52px;} #footer-wrap .service-list li {padding-top:20px;} #footer-wrap .service-list li a {margin-bottom:7px} #footer-wrap .service-list li span {font-size:13px} #footer-wrap .footer {padding:0;margin-top:15px;text-align:center} #footer-wrap .footer .add-sec {margin-bottom:15px;} #footer-wrap .footer .add-sec .tit {display:block;margin-bottom:5px;} #footer-wrap .topBt {right:15px;width:30px;height:30px} #footer-wrap .topBt span:before {width:30px;height:30px;background-size:161px auto;background-position:-24px 0} } @media all and (max-width:499px){ #footer-wrap .service-list li a span {font-size:13px} #footer-wrap .footer .flogo {display:none;} #footer-wrap .footer .add-sec {position:relative;padding-left:80px;text-align:left;} #footer-wrap .footer .add-sec .tit {position:absolute;left:0;top:0;} #footer-wrap .footer address {display:block;margin-right:0;margin-bottom:5px;} #footer-wrap .footer {font-size:13px;} } @media all and (max-width:320px){ #footer-wrap .footer .add-sec .number {display:block;} } /* ì• ë‹ˆë©”ì´ì ˜ */ @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);} } #footer-wrap .fsns li.wa {display:none}