/*-------------------------layout_kor.css------------------------------------*/ @charset "utf-8"; /* 2015-10-05 CSS CENTUMSOFT */ /* 페이지별 세부 레이아웃 재정의용 */ button {outline:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)} .hasBbsTab #board-wrap {padding-top:0} .hasMemberTab02 .c-tab02 {margin-top:30px} .hasntPageTitle #cont .cont-wr {padding-top:0} #doc-wrap {position:relative;min-width:1400px;max-width:2000px;overflow:hidden;margin:0 auto} .div-cont {position:relative;max-width:1400px;margin:0 auto} @media all and (max-width:1400px){ #doc-wrap {min-width:320px} .div-cont {margin:0 30px} } @media all and (max-width:640px){ .div-cont {margin:0 15px} } @media all and (max-width:460px){ .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} /* 로딩 */ #loading {width:100%;height:100%;top:0;left:0;position:fixed;opacity:0.7;background-color:#000;z-index:9999;text-align:center;display:none;} #loading-image {position:absolute;left:50%;top:50%;margin:-125px 0 0 -125px;z-index:100;} /* 레이아웃 */ #header-wrap {position:relative;background-color:#fff;height:90px;padding:0 70px;box-sizing:border-box;z-index:200} #mcontainer-wrap {position:relative;width:100%} #container-wrap {position:relative;background:#f1f1f1} #container-wrap:before, #container-wrap:after {content:'';position:absolute;top:0;height:100%} #container-wrap:before {background:url(/resources/homepage/kor/_Img/Layout/bg_left.png) repeat-y 0 0;width:1216px;left:0} #container-wrap:after {background:url(/resources/homepage/kor/_Img/Layout/bg_right.png) repeat-y 0 0;width:721px;right:0} .isMain #container-wrap {background:#fff} .isMain #container-wrap:before, .isMain #container-wrap:after {display:none} #container {position:relative;padding-top:68px;z-index:1} #container:after {content:"";clear:both;display:block} .userGuide-wr .userGuide {display:none} .isSub #header-wrap {position:fixed;left:0;top:0;width:100%;box-sizing:border-box} .isSub #cont-navi:after {content:"";display:block;position:absolute;width:100%;height:1px;background:#ddd;left:0;top:100%;z-index:500} .isSub #cont-navi {position:fixed;left:0;top:90px;width:100%;box-sizing:border-box} .isSub .cont-ctrl-btns {position:fixed;right:70px;top:97px;z-index:101;box-sizing:border-box} .isSub #container-wrap {padding:152px 0 0} /* .isSub #mainNavi .mn_a1 {padding:25px 0 28px} .isSub #global .srvc-sec .srvcUtil {margin:13px 0 0} .isSub #smart-quick-Navi .role-ead {height:75px;margin:40px 0 0} .isSub #smart-quick-Navi .role-head .trigger .p1 {display:none} .isSub #smart-quick-Navi .role-head .trigger .p2 {padding:0 0 25px} */ @media all and (max-width:1600px) { .isSub .cont-ctrl-btns {right:30px} } @media all and (max-width:1399px) { #header-wrap {padding:0} #container-wrap:before, #container-wrap:after {display:none} } @media all and (max-width:999px) { #header-wrap {padding-left:0;height:65px} .isSub #header-wrap {margin:0} .isSub #container-wrap {padding:128px 0 0} .isSub #cont-navi {top:65px} .isSub .userGuide-wr {position:fixed;width:100%;left:0;top:65px;z-index:3} .userGuide-wr .userGuide {display:block;position:relative;border:0;width:100%;padding:15px 0;text-align:center;line-height:1;background:#513d3b;overflow:hidden;height:50px} .userGuide-wr .userGuide:after {content:"";display:block;position:absolute;width:45px;height:89px;z-index:1;left:0;top:0;background:url(/resources/homepage/kor/_Img/Layout/layout_spr.png) no-repeat -360px 0px} .userGuide-wr .userGuide .outer {display:inline-block;padding:0 30px 0 0;color:#fff;box-sizing:border-box;position:relative;z-index:1} .userGuide-wr .userGuide .outer:after {content:"";display:block;position:absolute;width:22px;height:22px;background:url(/resources/homepage/kor/_Img/Layout/layout_spr.png) no-repeat -415px 0px;right:0;top:50%;transform:translateY(-50%)} .userGuide-wr .userGuide .outer span {display:inline-block;vertical-align:middle} .userGuide-wr .userGuide .outer .t1 {font-family:"minion-pro";font-weight:400;font-size:16px;opacity:.6;margin:0 5px 0 0} .userGuide-wr .userGuide .outer .t2 {font-size:15px} } @media all and (max-width:768px) { .isSub #container-wrap {padding:65px 0 0} } /* cont-navi */ #cont-navi {position:relative;background-color:#fff;height:62px;padding:7px 70px 10px;box-sizing:border-box;z-index:100} #cont-navi .cont-navi-inwr {position:relative;height:100%} #cont-navi .cont-navi-inwr:after {content:"";display:block;clear:both} #cont-navi .home {float:left;display:block;position:relative;width:45px;height:45px;border:1px solid #ddd;box-sizing:border-box;z-index:1} #cont-navi .home:before, #cont-navi .home:after {content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;transition:all .3s ease} #cont-navi .home:before {background:url(/resources/homepage/kor/_Img/Layout/layout_spr.png) no-repeat 0 -34px;width:15px;height:14px;z-index:2} #cont-navi .home:after {background:#000;width:100%;height:100%;opacity:0;z-index:1} #cont-navi .home:focus:after, #cont-navi .home:hover:after {opacity:.1} #cont-navi dl {float:left;position:relative;z-index:101;min-width:170px;max-width:270px;width:auto;height:100%} #cont-navi dt {display:block;height:100%} #cont-navi dt a {display:block;position:relative;height:100%;font-size:0} #cont-navi dt a:before {content:"";display:inline-block;width:0;height:100%;vertical-align:middle} #cont-navi dt a:after {content:"";display:block;position:absolute;right:0;top:50%;background-color:#ddd;width:1px;height:24px;margin-top:-12px} #cont-navi dt a .txt {position:relative;display:inline-block;position:relative;width:100%;padding:0 45px 0 18px;color:#555;font-size:17px;vertical-align:middle;box-sizing:border-box;word-wrap:break-word;word-break:keep-all;white-space:normal;transition:all .3s ease} #cont-navi dt a .txt:after {content:"";display:block;position:absolute;right:21px;top:7px;background:url(/resources/homepage/kor/_Img/Layout/layout_spr.png) no-repeat -79px -34px;width:13px;height:7px} #cont-navi .over dt a .txt:after {transform:rotate(180deg)} #cont-navi .sub-list {display:none;position:absolute;top:100%;left:0;background-color:#fff;border:1px solid #cdcdcd;width:100%;margin-top:10px} #cont-navi .sub-list ul {} #cont-navi .sub-list .mn_a1 {position:relative;display:block;padding:12px 20px;font-size:16px;color:#555} #cont-navi .sub-list .mn_a1 span {word-wrap:break-word;word-break:keep-all;white-space:normal;line-height:1.3} #cont-navi .sub-list li.isOver {} #cont-navi .sub-list li.isOver a {background-color:#f3f3f3} #cont-navi .sub-list .isOver .mn_a1:after, #cont-navi .sub-list .mn_a1:hover:after {width:30px} #cont-navi .sub-list .mn_a1:focus, #cont-navi .sub-list .mn_a1:hover {color:#000} #cont-navi .sub-list li:hover span {color:#513d3b} @media all and (max-width:1600px) { #cont-navi {padding:7px 30px 10px} } @media all and (max-width:1399px) { #cont-navi {padding:0 30px} #cont-navi .home {width:44px;height:44px;margin:9px 0 0} #cont-navi .sub-list {margin-top:0} } @media all and (max-width:999px) { #cont-navi {width:100%;left:0;margin:0} } @media all and (max-width:768px) { #cont-navi {display:none} } /* contents */ @media only screen and (min-width:1400px) { #contents {position:relative;min-height:600px;word-break:keep-all;word-wrap:break-word} } #contents .cont-top {position:relative;margin-bottom:30px;display:none} #contents .cont-top .cont-tit {color:#222;font-size:2.222em;font-weight:500;letter-spacing:-.025em;line-height:1} #contents #cont {padding-bottom:140px;font-size:18px;color:#555;letter-spacing:-0.04em;line-height:30px;word-break:keep-all;word-wrap:break-word;min-height:400px} #contents #cont:after {clear:both;content:"";display:block} #cont .cont-wr {padding-top:67px;margin:0 0 50px} #cont .cont-wr:last-child {margin-bottom:0} #cont .cont-wr:first-child, #cont .cont-wr.first {padding-top:0} #cont .cont-box {background-color:#fff;min-height:560px} #cont .cont-wr .c-tit {color:#222;font-size:2.222em;font-weight:500;letter-spacing:-.025em;margin-bottom:30px;line-height:1.333em} @media all and (max-width:1199px){ #container {padding-top:50px} } @media all and (max-width:999px){ #container {padding-top:30px} #contents {width:auto;max-width:100%;float:none} #contents #cont {font-size:17px} #cont .cont-wr .c-tit {font-size:2em} } @media all and (max-width:799px) { #contents #cont {padding-bottom:40px;font-size:16px;line-height:26px} #cont .cont-box {min-height:auto} } @media all and (max-width:768px){ #contents .cont-top {padding:20px 0;margin-bottom:0;border:0} #cont .cont-wr .c-tit {font-size:1.8em;display:none} } @media all and (max-width:699px) { #contents #cont {padding-bottom:20px} } @media all and (max-width:599px){ #contents #cont {font-size:14px;line-height:22px} #cont .cont-wr {margin:0 0 30px} #cont .cont-wr .c-tit {margin-bottom:15px} } @media all and (max-width:460px){ #container {padding-top:15px} #cont .cont-wr .c-tit {font-size:1.5em} } /* open-back-bg ------------------------------------------------------ */ body.open-back {overflow-y:hidden !important} .open-back-bg {display:block;position:fixed;top:0;left:0;background-color:rgba(0, 0, 0, .5);width:100%;height:100%;opacity:0;cursor:pointer;transition:all .3s ease;z-index:102} .open-back-bg.over {opacity:1} /* sch-box 공통 ------------------------------------------------------ */ .sch-box {position:relative;display:block;background-color:#fff;border:3px solid #ddd;height:80px;margin:0 auto;box-sizing:border-box} .sch-box .input-box {display:block;height:100%} .sch-box .input-box input.text {display:block;width:100%;height:100%;border:0;box-sizing:border-box;font-size:1em;color:#333;padding:0 60px 0 28px;background:transparent;margin:0} .sch-box .input-box input.text::-webkit-input-placeholder {color:#333;font-weight:500} .sch-box .input-box input.text:-moz-placeholder {color:#333;font-weight:500} .sch-box .input-box input.text::-moz-placeholder {color:#333;font-weight:500} .sch-box .input-box input.text:-ms-input-placeholder {color:#333;font-weight:500} .sch-box .btn-search {display:block;position:absolute;right:-3px;top:-3px;background:#f7c200;border:0;width:80px;height:80px;transition:all .3s ease} .sch-box .btn-search:before {content:"";display:block;position:absolute;left:0;top:0;bottom:0;right:0;background:url(/resources/homepage/kor/_Img/Layout/layout_spr.png) no-repeat -67px 0;width:29px;height:29px;margin:auto} .sch-box .btn-search:focus, .sch-box .btn-search:hover {} /* topSch 상단 검색박스 ------------------------------------------------------ */ #topSch {display:none;position:absolute;top:90px;left:0;background-color:#ebebeb;width:100%;padding:35px 0;z-index:500} #topSch.over {display:block} #topSch .top-sch-wr {position:relative;max-width:680px;padding-right:160px;margin:0 auto} #topSch .waybill-lnk {position:absolute;right:0;top:0;background:#009dd7;padding:32px 20px} #topSch .waybill-lnk span {position:relative;display:block;padding-right:30px;font-size:0.944em;color:#fff;font-weight:600;line-height:1} #topSch .waybill-lnk span:after {content:'';position:absolute;right:0;top:0;width:18px;height:18px;background:url(/resources/homepage/kor/_Img/Main/main_spr.png) no-repeat -72px 0} #topSch .close-btn {position:absolute;right:70px;top:50%;transform:translateY(-50%);width:40px;height:40px;border:0;background-color:transparent} #topSch .close-btn:before, #topSch .close-btn:after {content:"";display:block;width:2px;height:40px;position:absolute;top:50%;left:50%;margin-top:-20px;background:rgba(0, 0, 0, 1.0);transition:all .3s ease} #topSch .close-btn:before {transform:rotate(-45deg);-ms-transform:rotate(-45deg)} #topSch .close-btn:after {transform:rotate(45deg);-ms-transform:rotate(45deg)} @media all and (max-width:1399px){ #topSch .close-btn {right:30px} } @media all and (max-width:999px){ .sch-box {height:60px} #topSch {top:65px;padding:20px 0} #topSch .top-sch-wr {width:50%} .sch-box .btn-search {width:60px;height:60px} #topSch .waybill-lnk {padding:22px 20px 23px 20px} } @media all and (max-width:640px){ .sch-box {height:40px} .sch-box .input-box input.text {padding:0 40px 0 10px} .sch-box .btn-search {width:40px;height:40px} .sch-box .btn-search:before {width:20px;height:20px;background-size:auto 148px;background-position:-50px 0} #topSch {padding:10px 0} #topSch .top-sch-wr {padding-right:130px} #topSch .waybill-lnk {padding:13px 10px} #topSch .close-btn {right:10px;width:20px;height:20px} #topSch .close-btn:before, #topSch .close-btn:after {height:20px;margin-top:-10px} } @media all and (max-width:460px){ #topSch .top-sch-wr {padding-right:90px} #topSch .waybill-lnk span {padding-right:0} #topSch .waybill-lnk span:after {display:none} } /* quick Nav ------------------------------------------------------ */ #quickNav {position:relative} #quickNav .quick-nav {position:fixed;right:78px;top:377px;z-index:101} #quickNav .quick-box-wr {position:fixed;left:0;top:90px;background-color:#fff;width:100%;height:0;overflow:hidden;box-sizing:border-box;transition:all .5s ease;z-index:199} .quick-nav ul li {margin-bottom:23px} .quick-nav li > button, .quick-nav li > a, .quick-nav-in button {display:block;background:none;border:0;text-align:center} .quick-nav button > span, .quick-nav a > span, .quick-nav-in button > span {display:block;color:#333;font-size:0.944em;font-weight:500;line-height:1.2;letter-spacing:-.05em;text-shadow:-1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff} .quick-nav button .ico, .quick-nav a .ico {position:relative;border-radius:50%;width:64px;height:64px;margin:0 auto 10px auto;box-shadow:0px 14px 15px 0px rgba(0, 0, 0, .2);transition:all .3s ease} .quick-nav button .ico:before, .quick-nav a .ico:before, .quick-nav-in button .ico:before {content:"";display:block;position:absolute;left:0;top:0;bottom:0;right:0;background:url(/resources/homepage/kor/_Img/Layout/layout_spr.png) no-repeat;width:52px;height:52px;margin:auto} .quick-nav button.q-ps .ico, .quick-nav-in button.q-ps.on .ico, .quick-nav-in button.q-ps:hover .ico, .quick-nav-in button.q-ps:focus .ico {background-color:#009dd7} .quick-nav button.q-ps .ico:before, .quick-nav-in button.q-ps.on .ico:before, .quick-nav-in button.q-ps:hover .ico:before, .quick-nav-in button.q-ps:focus .ico:before {background-position:0 -61px} .quick-nav button.q-biz .ico, .quick-nav-in button.q-biz.on .ico, .quick-nav-in button.q-biz:hover .ico, .quick-nav-in button.q-biz:focus .ico {background-color:#009dd7} .quick-nav button.q-biz .ico:before, .quick-nav-in button.q-biz.on .ico:before, .quick-nav-in button.q-biz:hover .ico:before, .quick-nav-in button.q-biz:focus .ico:before {background-position:-62px -61px} .quick-nav .q-chat .ico {background-color:#fff} .quick-nav .q-chat .ico:before {background-position:-124px -61px} .quick-nav li > button:hover .ico, .quick-nav li > a:hover .ico {opacity:.7} .quick-box-wr .quick-box {position:relative;padding:0 80px} .quick-box-wr .quick-box .quick-tit {color:#222;font-size:35px;letter-spacing:-.05em;line-height:1.2} .quick-box .quick-nav-in {position:absolute;left:48px;top:50%;margin-top:-120px} .quick-nav-in li {margin-bottom:20px} .quick-nav-in button .ico {position:relative;border-radius:50%;background-color:#fff;box-shadow:none;width:70px;height:70px;margin-bottom:10px;transition:background .3s ease} .quick-nav-in button.on .ico, .quick-nav-in button:hover .ico, .quick-nav-in button:focus .ico {box-shadow:0px 14px 15px 0px rgba(0, 0, 0, .2)} .quick-nav-in button.q-ps .ico:before {background-position:-186px -61px} .quick-nav-in button.q-biz .ico:before {background-position:-248px -61px} .quick-box .quick-box-left {float:left;width:-moz-calc(100% - 560px);width:-webkit-calc(100% - 560px);width:calc(100% - 560px);/*width:62%;*/background-color:#f7f7f7;padding:0 5.2% 92px;box-sizing:border-box} .quick-box .quick-box-left .quick-tit {padding:51px 0 55px} .quick-box .quick-box-left > div {display:none} .quick-box .quick-box-left > div.on {display:block} .quick-box-left .quick-link {font-size:0;margin:50px 2.187% 0} .quick-box-left .quick-link li {display:inline-block;width:25%;margin-bottom:52px;padding:0 5px;box-sizing:border-box;vertical-align:top} .quick-box-left .quick-link li > a {display:block;max-width:200px;margin:0 auto;transition:all .3s ease} .quick-link a .ico {display:block;background:url(/resources/homepage/kor/_Img/Layout/quick_spr.png) no-repeat;width:93px;height:93px;margin-left:-moz-calc(50% - 46px);margin-left:-webkit-calc(50% - 46px);margin-left:calc(50% - 46px);transition:margin .3s ease} .quick-link a:hover .ico, .quick-link a:focus .ico {margin-left:-9px} .quick-link a .txt {display:block;position:relative;padding:14px 0 23px 0;color:#333;font-size:20px;font-weight:500;letter-spacing:-.05em;text-align:center;transition:all .3s ease} .quick-link a:hover .txt, .quick-link a:focus .txt {color:#222;font-weight:700;text-align:left} .quick-link a .txt:before {content:"";display:block;position:absolute;left:0;bottom:0;background-color:#00aeef;width:0;max-width:200px;height:3px;transition:width .3s ease} .quick-link a:hover .txt:before, .quick-link a:focus .txt:before {width:100%} .quick-link a:hover .txt:after {content:"";display:block;position:absolute;right:0;bottom:28px;background:url(/resources/homepage/kor/_Img/Layout/quick_arr.png) no-repeat;width:20px;height:11px} .quick-link a .ico01 {background-position:0 0} .quick-link a .ico02 {background-position:-103px 0} .quick-link a .ico03 {background-position:-206px 0} .quick-link a .ico04 {background-position:-309px 0} .quick-link a .ico05 {background-position:-412px 0} .quick-link a .ico06 {background-position:-515px 0} .quick-link a .ico07 {background-position:-618px 0} .quick-link a .ico08 {background-position:-724px 0} .quick-link a:hover .ico01, .quick-link a:focus .ico01 {background-position:0 -103px} .quick-link a:hover .ico02, .quick-link a:focus .ico02 {background-position:-103px -103px} .quick-link a:hover .ico03, .quick-link a:focus .ico03 {background-position:-206px -103px} .quick-link a:hover .ico04, .quick-link a:focus .ico04 {background-position:-309px -103px} .quick-link a:hover .ico05, .quick-link a:focus .ico05 {background-position:-412px -103px} .quick-link a:hover .ico06, .quick-link a:focus .ico06 {background-position:-515px -103px} .quick-link a:hover .ico07, .quick-link a:focus .ico07 {background-position:-618px -103px} .quick-link a:hover .ico08, .quick-link a:focus .ico08 {background-position:-724px -103px} .quick-box .quick-box-left .sch-invoice-box {width:100%;height:80px;margin:0 auto;padding-left:145px} .sch-invoice-box .nation-tgl {position:absolute;left:20px;top:50%;border-radius:25px;transform:translateY(-50%);overflow:hidden} .sch-invoice-box .nation-tgl input {position:absolute;left:-9999px;width:0;height:0} .sch-invoice-box .nation-tgl input + label {position:relative;display:inline-block;background-color:#e3e3e3;border-radius:25px;width:55px;margin:0;padding:10px;color:rgba(0, 0, 0, .5);font-size:15px;font-weight:700;font-family:'Titillium Web', sans-serif;text-align:center;box-sizing:border-box;cursor:pointer;transition:all .3s ease} .sch-invoice-box .nation-tgl input + label:last-of-type {margin-left:-7px} .sch-invoice-box .nation-tgl input:checked + label {background-color:#f7c200 !important;color:#000 !important;z-index:1} .sch-invoice-box .input-box input.text {padding-left:10px} .sch-invoice-box .input-box input.text::-webkit-input-placeholder {color:rgba(51, 51, 51, .3)} .sch-invoice-box .input-box input.text:-moz-placeholder {color:rgba(51, 51, 51, .3)} .sch-invoice-box .input-box input.text::-moz-placeholder {color:rgba(51, 51, 51, .3)} .sch-invoice-box .input-box input.text:-ms-input-placeholder {color:rgba(51, 51, 51, .3)} .sch-invoice-box .sch-box .btn-search:after {content:"";display:block;position:absolute;right:0;bottom:0;border-style:solid;border-color:transparent transparent #f7f7f7 transparent;border-width:0 0 20px 20px} .quick-box .quick-box-right {float:left;width:560px;/*width:32%;*/padding:0 85px;box-sizing:border-box} .quick-box .quick-box-right .quick-tit {padding-top:52px;margin-bottom:29px} .quick-pop .item ul li {margin-bottom:9px} .quick-pop .item.no-data {box-sizing:border-box;border:3px solid #ddd} .quick-pop .item.no-data p {text-align:center;background:url(/resources/_Img/Board/default/ico_nodata.png) no-repeat center 70px;padding:150px 0 90px} .quick-pop-wr .ctrl-btns {margin-top:22px;text-align:center} .quick-pop-wr .ctrl-btns .ctrl-dots {display:inline-block;vertical-align:top} .quick-pop-wr .ctrl-btns button.owl-dot {position:relative;display:inline-block;background:none;border:0;width:18px;height:18px;margin:0 6px;vertical-align:top} .quick-pop-wr .ctrl-btns button.owl-dot:before {content:"";position:absolute;left:0;top:0;bottom:0;right:0;border:2px solid #999;border-radius:50%;width:12px;height:12px;margin:auto;box-sizing:border-box} .quick-pop-wr .ctrl-btns button.owl-dot:hover:before, .quick-pop-wr .ctrl-btns button.owl-dot:focus:before {background-color:#999} .quick-pop-wr .ctrl-btns button.owl-dot.active:before {background:url(/resources/homepage/kor/_Img/Layout/layout_spr.png) no-repeat -140px 0;border:0;border-radius:0;width:18px;height:18px} #quickClose {position:absolute;right:26px;bottom:14px;background:none;border:0;padding-top:34px} #quickClose:before, #quickClose:after {display:block;content:"";position:absolute;top:12px;right:-3px;background-color:#333;width:35px;height:1px;-ms-transform:rotate(-45deg);transform:rotate(-45deg);transition:all .5s ease} #quickClose:before {-ms-transform:rotate(45deg);transform:rotate(45deg)} #quickClose:hover:before, #quickClose:focus:before {-ms-transform:rotate(315deg);transform:rotate(315deg)} #quickClose:hover:after, #quickClose:focus:after {-ms-transform:rotate(225deg);transform:rotate(225deg)} #quickClose .txt {color:#333;font-size:16px;letter-spacing:-.05em} @media all and (max-width:1899px) { .quick-pop .item .txt {padding-right:100px} } @media all and (max-width:1699px) { .quick-box-wr .quick-box {padding:0 60px} .quick-box .quick-nav-in {left:28px} .quick-box .quick-box-left .quick-tit {padding-top:40px} .quick-box-left .quick-link {margin-left:20px} /*.quick-box .quick-box-right {padding:0 30px}*/ .quick-box .quick-box-right .quick-tit {padding-top:38px} } @media all and (max-width:1500px) { #quickNav .quick-nav {right:10px;top:auto;bottom:110px} } @media all and (max-width:1399px) { .quick-box-wr .quick-box .quick-tit {padding-left:0;font-size:30px} .quick-box .quick-box-left {padding-left:40px;width:66%} .quick-box .quick-box-left .quick-tit {padding-bottom:30px} .quick-box-left .quick-link {margin:30px 0 0 0} .quick-box-left .quick-link li {margin-bottom:40px;padding:0} .quick-link a .txt {font-size:16px;padding-bottom:0} .quick-box .quick-box-right {padding-right:0;width:34%} } @media all and (max-width:1199px) { .quick-box-wr .quick-box {padding:0 50px 10px 50px} .quick-link a .ico {background-size:auto 157px;width:74px;height:74px;margin-left:-moz-calc(50% - 37px);margin-left:-webkit-calc(50% - 37px);margin-left:calc(50% - 37px)} .quick-link a .ico01 {background-position:0 0} .quick-link a .ico02 {background-position:-82px 0} .quick-link a .ico03 {background-position:-165px 0} .quick-link a .ico04 {background-position:-247px 0} .quick-link a .ico05 {background-position:-330px 0} .quick-link a .ico06 {background-position:-412px 0} .quick-link a .ico07 {background-position:-494px 0} .quick-link a .ico08 {background-position:-570px 0} .quick-link a:hover .ico01, .quick-link a:focus .ico01 {background-position:0 -82px} .quick-link a:hover .ico02, .quick-link a:focus .ico02 {background-position:-82px -82px} .quick-link a:hover .ico03, .quick-link a:focus .ico03 {background-position:-165px -82px} .quick-link a:hover .ico04, .quick-link a:focus .ico04 {background-position:-247px -82px} .quick-link a:hover .ico05, .quick-link a:focus .ico05 {background-position:-330px -82px} .quick-link a:hover .ico06, .quick-link a:focus .ico06 {background-position:-412px -82px} .quick-link a:hover .ico07, .quick-link a:focus .ico07 {background-position:-494px -82px} .quick-link a:hover .ico08, .quick-link a:focus .ico08 {background-position:-570px -82px} .quick-pop .item .ico img {width:100px;height:auto} .quick-pop .item .sub-tit {margin-bottom:13px;font-size:17px} .quick-pop .item .tit {margin-bottom:18px;font-size:28px} } @media all and (max-width:999px) { #quickNav .quick-box-wr {top:65px} .quick-pop-wr .ctrl-btns {margin-top:10px} #quickClose {right:30px;bottom:auto;top:10px} .quick-box-wr .quick-box {padding:0 30px 10px 30px} .quick-box .quick-box-left {padding:0 30px 30px 30px} .quick-box .quick-box-left .sch-invoice-box {height:60px} } @media all and (max-width:768px) { #quickNav .quick-nav {top:auto;bottom:100px} .quick-nav button > span, .quick-nav a > span, .quick-nav-in button > span {font-size:0} .quick-nav ul li {margin-bottom:15px} .quick-nav button .ico, .quick-nav a .ico {width:48px;height:48px;margin-bottom:0} .quick-link a .ico {background-size:auto 108px;width:50px;height:50px;margin-left:-moz-calc(50% - 25px);margin-left:-webkit-calc(50% - 25px);margin-left:calc(50% - 25px)} .quick-link a:hover .ico, .quick-link a:focus .ico {margin-left:-moz-calc(50% - 25px);margin-left:-webkit-calc(50% - 25px);margin-left:calc(50% - 25px)} .quick-link a .ico01 {background-position:0 0} .quick-link a .ico02 {background-position:-58px 0} .quick-link a .ico03 {background-position:-114px 0} .quick-link a .ico04 {background-position:-170px 0} .quick-link a .ico05 {background-position:-228px 0} .quick-link a .ico06 {background-position:-284px 0} .quick-link a .ico07 {background-position:-342px 0} .quick-link a .ico08 {background-position:-398px 0} .quick-link a:hover .ico01, .quick-link a:focus .ico01 {background-position:0 -57px} .quick-link a:hover .ico02, .quick-link a:focus .ico02 {background-position:-58px -57px} .quick-link a:hover .ico03, .quick-link a:focus .ico03 {background-position:-114px -57px} .quick-link a:hover .ico04, .quick-link a:focus .ico04 {background-position:-170px -57px} .quick-link a:hover .ico05, .quick-link a:focus .ico05 {background-position:-228px -57px} .quick-link a:hover .ico06, .quick-link a:focus .ico06 {background-position:-284px -57px} .quick-link a:hover .ico07, .quick-link a:focus .ico07 {background-position:-342px -57px} .quick-link a:hover .ico08, .quick-link a:focus .ico08 {background-position:-398px -57px} .quick-link a .txt {font-size:14px;padding-top:5px} .quick-link a .txt:before, .quick-link a .txt:after {display:none} .quick-link a:hover .txt, .quick-link a:focus .txt {text-align:center} .quick-link a:hover .txt:after {display:none} .quick-box-wr .quick-box {padding:0} .quick-box-wr .quick-box .quick-tit {font-size:24px;padding:30px 0 20px 0} .quick-box .quick-box-left {float:none;width:auto;padding-bottom:0} .quick-box .quick-box-right {float:none;width:auto;padding-right:30px;padding-bottom:30px} #quickClose {top:30px} #quickClose .txt {font-size:0} .quick-box-left .quick-link {margin-top:15px} .quick-box-left .quick-link li {margin-bottom:20px} .quick-box .quick-box-right .quick-tit {margin-bottom:0} .quick-pop .item ul li {float:left;width:49%;margin-left:2%} .quick-pop .item ul li:first-child {margin-left:0} .quick-nav button.q-ps .ico:before, .quick-nav-in button.q-ps.on .ico:before, .quick-nav-in button.q-ps:hover .ico:before, .quick-nav-in button.q-ps:focus .ico:before {background-position:-2px -63px} .quick-nav button .ico:before, .quick-nav a .ico:before, .quick-nav-in button .ico:before {width:48px;height:48px} .quick-nav .q-chat .ico {background-image:transparent} .quick-nav .q-chat .ico:before {background-position:-120px -59px;background-size:288px auto} .quick-nav li > button:hover .ico, .quick-nav li > a:hover .ico {opacity:1} } @media all and (max-width:640px) { .quick-box .quick-box-left .sch-invoice-box {height:40px;padding-left:110px} .sch-invoice-box .nation-tgl {left:10px} .sch-invoice-box .nation-tgl input + label {width:50px;padding:5px;font-size:13px} #quickNav .quick-nav {display:none} } @media all and (max-width:460px) { .quick-box-wr .quick-box .quick-tit {font-size:20px;padding:15px 0} .quick-box .quick-box-left, .quick-box .quick-box-right {padding:0 20px 10px 20px} #quickClose {top:20px;right:25px} #quickClose:before, #quickClose:after {width:26px} .quick-link a .txt {font-size:13px} } /* side Menu ------------------------------------------------------ */ .cont-side {position:fixed;top:314px;width:230px;} .cont-side .cont-sideCaster {display:none} .cont-side ul {} .cont-side ul li {margin-bottom:4px} .cont-side button {background:none;border:0} .cont-side button:focus {outline:none} .cont-side button .txt {position:relative;display:block;padding:9px 0 9px 69px;color:#333;font-weight:500;font-size:17px;letter-spacing:-.025em;text-align:left;} .cont-side button .txt:before {content:"";display:block;position:absolute;left:0;top:20px;background-color:#00aeef;width:0;height:3px;transition:width .3s ease} .cont-side button .txt:after {content:"";display:block;position:absolute;left:74px;top:-3px;background-color:#00aeef;border-radius:50%;width:5px;height:5px;opacity:0;transition:all .3s ease} .cont-side li.over button .txt, .cont-side button:hover .txt {color:#000;font-weight:700} .cont-side li.over button .txt:before, .cont-side button:hover .txt:before {width:49px} .cont-side li.over button .txt:after {opacity:1} .cont-side-M {position:fixed;right:170px;top:92px;z-index:101;display:none} .cont-side-M .cont-sideCaster {display:none;} .cont-side-M .cont-side-menu {display:block;position:static;overflow:hidden;transition:box-shadow .5s ease} .cont-side-M .cont-side-menu li {display:block;float:left} .cont-side-M .cont-side-menu li button {display:block;box-sizing:border-box;position:relative;letter-spacing:-.05em;line-height:1;border:0;background:transparent;padding:17px 10px;outline:0;transition:all .3s ease} .cont-side-M .cont-side-menu li button:after {content:"";display:block;position:absolute;width:0;height:0;border-bottom:2px solid #00aeef;border-right:2px solid #00aeef;transform:rotate(45deg) translateX(-50%);left:50%;bottom:5px;opacity:0;transition:all .3s ease} .cont-side-M .cont-side-menu li button:focus, .cont-side-M .cont-side-menu li button:hover {color:#00aeef} .cont-side-M .cont-side-menu li button span {display:block;line-height:1;font-size:17px} .cont-side-M .cont-side-menu li.over button {color:#00aeef} .cont-side-M .cont-side-menu li.over button:after {opacity:1;bottom:0;width:10px;height:10px} .cont-side-M .cont-side-menu-closer {display:none} @media all and (max-width:1900px) { .cont-side {display:none} .cont-side-M {display:block} } @media all and (max-width:1600px) { .cont-side-M {right:130px} } @media all and (max-width:1100px) { .cont-side-M {right:119px;top:97px;box-sizing:border-box;background:#fff} .cont-side-M .cont-sideCaster {display:block;padding:0 40px 0 10px;height:45px;border:1px solid #ddd;background:transparent;min-width:200px;color:#009dd7} .cont-side-M .cont-sideCaster:after {content:"";display:block;position:absolute;width:10px;height:10px;border-bottom:2px solid #7b7b7b;border-right:2px solid #7b7b7b;transform:rotate(45deg);right:13px;top:15px;transition:all .3s ease} .cont-side-M .cont-sideCaster.over:after {transform:rotate(225deg);top:22px} .cont-side-M .cont-side-menu {display:none;position:absolute;left:0;top:100%;width:100%;box-sizing:border-box;border:1px solid #ddd;border-top:0} .cont-side-M .cont-side-menu li {float:none;border-bottom:1px solid #ddd} .cont-side-M .cont-side-menu li:last-child {border-bottom:0} .cont-side-M .cont-side-menu li button {width:100%;padding:0 10px;font-size:0;background:#fff} .cont-side-M .cont-side-menu li button:before {content:"";display:inline-block;width:0;height:40px;vertical-align:middle} .cont-side-M .cont-side-menu li button:after {display:none} .cont-side-M .cont-side-menu li button span {display:inline-block;font-size:16px;line-height:1.2;vertical-align:middle;word-wrap:break-word;word-break:keep-all;white-space:normal} } @media all and (max-width:999px) { .cont-side-M {right:30px;top:73px} .cont-side-M .cont-sideCaster {text-align:right;border:0} .cont-side-M .cont-side-menu {transform:translateY(9px)} } @media all and (max-width:768px) { .cont-side-M {position:absolute;right:20px;top:72px;background:transparent} .cont-side-M .cont-sideCaster {background:transparent;min-width:150px} .cont-side-M .cont-side-menu {background:#fff;border:1px solid #ddd} .cont-side-M .cont-side-menu li button span {font-size:15px} .hasSectionAnchor #side-wrap {display:none} .hasSectionAnchor #contents .cont-top {display:block;padding-top:0;margin:-10px 0 0} .hasSectionAnchor #container {padding-top:25px} } @media all and (max-width:699px) { .cont-side-M {width:100%;right:0;top:65px;background:transparent;text-align:right} .cont-side-M .cont-sideCaster {width:100%;height:55px;padding:0 55px 0 10px} .cont-side-M .cont-sideCaster:after {right:30px;top:19px} .cont-side-M .cont-side-menu {top:0;border:0;box-shadow:0 5px 10px rgba(0, 0, 0, .15);z-index:0;transform:none} .cont-side-M .cont-side-menu li {border:0} .cont-side-M .cont-side-menu-closer {display:block;position:absolute;width:50px;height:48px;right:0px;top:0px;z-index:1;background:transparent;border:0;outline:0} .cont-side-M .cont-side-menu-closer:after {content:"";display:block;position:absolute;width:10px;height:10px;border-bottom:2px solid #7b7b7b;border-right:2px solid #7b7b7b;transform:rotate(225deg);top:0;right:0;bottom:0;left:0;margin:auto} .hasSectionAnchor #contents .cont-top .cont-tit {font-size:26px} .hasSectionAnchor #cont .cont-wr {display:none;margin:0;} .hasSectionAnchor #cont .cont-wr.mOver {display:block} } @media all and (max-width:399px) { .cont-side-M .cont-sideCaster {padding:0 40px 0 10px} .cont-side-M .cont-sideCaster:after {right:15px} } /* SNS ------------------------------------------------------ */ .cont-ctrl-btns {position:absolute;right:70px;top:7px;height:45px;font-size:0;z-index:100} .cont-ctrl-btns:after {content:"";display:block;clear:both} .cont-ctrl-btns .unit {float:left;display:block;position:relative;width:45px;height:100%} .cont-ctrl-btns .unit > button {position:relative;background:#fff;border:1px solid #ddd;width:100%;height:100%;box-sizing:border-box} .cont-ctrl-btns .unit > button:before, .cont-ctrl-btns .unit > button:after {content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;transition:all .3s ease} .cont-ctrl-btns .unit > button:before {background:url(/resources/homepage/kor/_Img/Layout/layout_spr.png) no-repeat;width:17px;height:17px;z-index:2} .cont-ctrl-btns .unit > button:after {background-color:#000;width:100%;height:100%;opacity:0;z-index:1} .cont-ctrl-btns .unit > button:focus:after, .cont-ctrl-btns .unit > button:hover:after {opacity:.1} .cont-ctrl-btns .unit .btn-share {border-right:0} .cont-ctrl-btns .unit .btn-share:before {background-position:-26px -35px} .cont-ctrl-btns .unit .btn-share.is-open:after {opacity:.1} .cont-ctrl-btns .unit .btn-print {} .cont-ctrl-btns .unit .btn-print:before {background-position:-52px -35px} .cont-ctrl-btns .sns-list {display:none;position:absolute;top:100%;right:0;width:100%;margin-top:-1px;font-size:0;box-sizing:border-box;z-index:100} .cont-ctrl-btns .sns-list li {position:relative} .cont-ctrl-btns .sns-list button {display:block;position:relative;background:#e9e9e9;border:0;box-sizing:border-box;width:45px;height:45px;font-size:0;transition:all .3s ease} .cont-ctrl-btns .sns-list button:hover, .cont-ctrl-btns .sns-list button:focus {background-color:#fff} .cont-ctrl-btns .sns-list button:before {content:"";display:block;position:absolute;width:18px;height:18px;background:url(/resources/homepage/kor/_Img/Layout/layout_spr.png) no-repeat;top:0;right:0;bottom:0;left:0;margin:auto} .cont-ctrl-btns .sns-list .btn-fb:before {background-position:-88px -123px} .cont-ctrl-btns .sns-list .btn-nb:before {background-position:-116px -123px} .cont-ctrl-btns .sns-list .btn-kakao:before {background-position:-145px -123px} .cont-ctrl-btns .sns-list .btn-fb:hover:before, .cont-ctrl-btns .sns-list .btn-fb:focus:before {background-position:-88px -151px} .cont-ctrl-btns .sns-list .btn-nb:hover:before, .cont-ctrl-btns .sns-list .btn-nb:focus:before {background-position:-116px -151px} .cont-ctrl-btns .sns-list .btn-kakao:hover:before, .cont-ctrl-btns .sns-list .btn-kakao:focus:before {background-position:-145px -151px} @media screen and (-webkit-min-device-pixel-ratio:0) { /* chrome에서 공유버튼 안보이게 */ .cont-ctrl-btns .sns-list .btn-link {display:none} } @media all and (max-width:1399px) { .cont-ctrl-btns {right:30px} } @media all and (max-width:999px) { .cont-ctrl-btns {display:none !important} } /*-------------------------gnavi_kor.css------------------------------------*/ /* global */ #global {position:absolute;top:25px;right:80px;z-index:110} #global .global-wrap > a {display:inline-block;padding:0 18px;border-radius:30px;margin-right:5px;vertical-align:middle} #global .global-wrap > a span {position:relative;display: block;font-size:0.833em;font-weight:600;padding:11px 0} #global .global-wrap > a.ico01 {border:1px solid #009dd7} #global .global-wrap > a.ico02 {border:1px solid #898989} #global .global-wrap > a.ico01 span {color:#0092d6;padding-left:23px} #global .global-wrap > a.ico02 span {color:#333;padding-left:30px} #global .global-wrap > a span:before {content:"";display:block;position:absolute;left:0;top:50%;background:url(/resources/homepage/kor/_Img/Layout/layout_spr.png) no-repeat 0 0} #global .global-wrap > a.ico01 span:before {width:13px;height:18px;margin-top:-9px;background-position:-47px 0} #global .global-wrap > a.ico02 span:before {width:25px;height:20px;margin-top:-10px;background-position:-20px 0} #global .glnk-sec {display:none} #global .srvc-sec {display:inline-block;vertical-align:middle} #global .srvc-sec .srvc-link {display:inline-block;margin-top:2px;vertical-align:top} .srvc-sec .srvc-link > a {float:left;margin-left:20px;display:block} .srvc-sec .srvc-link > a:first-child {margin-left:20px} .srvc-sec .srvc-link > a > span {position:relative;display:block;color:#222;font-size:14px;font-weight:700;line-height:26px;letter-spacing:-.05em} .srvc-sec .srvc-link > a.langK > span, .srvc-sec .srvc-link > a.langE > span {font-size:16px;font-family:'Titillium Web', sans-serif;padding:0 0 0 28px} .srvc-sec .srvc-link > a.langK > span:before, .srvc-sec .srvc-link > a.langE > span:before {content:"";display:block;position:absolute;left:0;top:50%;margin-top:-9px;background:url(/resources/homepage/kor/_Img/Layout/layout_spr.png) no-repeat 0 0;width:18px;height:18px} .srvc-sec .srvc-link .gsel-lang {display:block;float:left;box-sizing:border-box;position:relative;height:31px;display:none} .srvc-sec .srvc-link .gsel-lang dl {height:100%;overflow:hidden;transition:all .3s ease} .srvc-sec .srvc-link .gsel-lang dt a {position:relative;display:block;height:auto;font-size:13px;height:31px} .srvc-sec .srvc-link .gsel-lang dt a span {display:block;padding:8px 30px 8px 30px;line-height:1.2;box-sizing:border-box;position:relative;letter-spacing:0} .srvc-sec .srvc-link .gsel-lang dt a span:before, .srvc-sec .srvc-link .gsel-lang dt a span:after {content:"";display:block;position:absolute;background:url(/resources/homepage/kor/_Img/Layout/layout_spr.png) no-repeat;transition:all .3s ease} .srvc-sec .srvc-link .gsel-lang dt a span:before {width:14px;height:14px;background-position:-35px 0px;left:11px;top:8px} .srvc-sec .srvc-link .gsel-lang dt a span:after {width:9px;height:6px;background-position:-59px -0px;right:0;top:14px} .srvc-sec .srvc-link .gsel-lang dd {display:block;position:relative} .srvc-sec .srvc-link .gsel-lang dd:before {content:"";display:block;position:absolute;width:7px;height:0;background:url(/resources/homepage/kor/_Img/Layout/layout_spr.png) no-repeat -113px 0px;left:50%;bottom:100%;margin:0 0 0 -3px;transition:all .2s ease} .srvc-sec .srvc-link .gsel-lang dd ul {display:block;width:100%;background:#706160} .srvc-sec .srvc-link .gsel-lang dd li {display:block;box-sizing:border-box;border-bottom:1px solid rgba(255, 255, 255, .4)} .srvc-sec .srvc-link .gsel-lang dd li:last-child {border-bottom:0} .srvc-sec .srvc-link .gsel-lang dd a {display:block;padding:12px 0 13px;font-size:14px;text-align:center} .srvc-sec .srvc-link .gsel-lang dd a span {color:#b9a5a3;letter-spacing:0;transition:all .3s ease} .srvc-sec .srvc-link .gsel-lang dd a:hover span, .srvc-sec .srvc-link .gsel-lang dd a:focus span, .srvc-sec .srvc-link .gsel-lang dd a:active span {color:#fff} .srvc-sec .srvc-link .gsel-lang dl[isopen='1'] dt a span:after {transform:rotate(180deg)} .srvc-sec .srvc-link .gsel-lang dl[isopen='1'] dd:before {height:5px} .srvc-sec .srvc-util {position:relative;display:inline-block;margin-left:27px;padding-left:28px;vertical-align:top} .srvc-sec .srvc-util:before {content:"";display:block;position:absolute;left:0;top:1px;background-color:rgba(0, 0, 0, .3);width:1px;height:26px} .srvc-sec .srvc-util a {position:relative;float:left;display:block;width:28px;height:28px;margin-left:33px;box-sizing:border-box} .srvc-sec .srvc-util a:first-child {margin-left:0} .srvc-sec .srvc-util .search:before {content:"";display:block;position:absolute;left:0;top:2px;right:0;background:url(/resources/homepage/kor/_Img/Layout/layout_spr.png) no-repeat -68px 0;width:26px;height:26px;margin:0 auto} .srvc-sec .srvc-util .amenu:before, .srvc-sec .srvc-util .amenu:after, .srvc-sec .srvc-util .amenu span.txt:before {content:"";display:block;position:relative;left:0;background-color:#262626;width:28px;height:2px;transition:left .2s linear} .srvc-sec .srvc-util .amenu:before {margin:3px 0 8px 0} .srvc-sec .srvc-util .amenu:after {margin:8px 0 0 0} @media all and (max-width:1600px) { #global {right:30px} #global .srvc-sec .srvc-util {margin-left:17px;padding-left:18px} #global .global-wrap > a {padding:0 10px} .srvc-sec .srvc-link > a {margin-left:10px} .srvc-sec .srvc-link > a:first-child {margin-left:10px} .srvc-sec .srvc-util a {margin-left:20px} } @media all and (max-width:1299px) { #global {top:31px} #global .global-wrap > a {padding:0} #global .global-wrap > a span:before {display:none} #global .global-wrap > a.ico01 {border-color:transparent} #global .global-wrap > a.ico01 span {padding:0} #global .global-wrap > a.ico02 {border-color:transparent} #global .global-wrap > a.ico02 span {padding:0} } @media all and (max-width:1199px) { .LogY #global .global-wrap > a.ico01, .LogY #global .global-wrap > a.ico02 {display:none} } @media all and (max-width:999px) { .LogY #global .global-wrap > a.ico01, .LogY #global .global-wrap > a.ico02 {display:inline-block} #global {right:70px;top:16px} #global .global-wrap > a span {padding:11px 0} #global .global-wrap > a span:before {display:block} #global .global-wrap > a.ico01, #global .global-wrap > a.ico02 {display:inline-block;padding:0 10px} #global .global-wrap > a.ico01 span {padding:7px 0} #global .global-wrap > a.ico02 span {padding:7px 0;margin-right:0} #global .global-wrap > a.ico01 {border:1px solid #009dd7} #global .global-wrap > a.ico02 {border:1px solid #898989} #global .global-wrap > a.ico01 span {color:#0092d6;padding-left:20px} #global .global-wrap > a.ico02 span {color:#333;padding-left:27px} #global .srvc-sec .srvc-link, #global .srvc-sec .srvc-util:before, #global .srvc-sec .srvc-util {margin-top:0}/* margin-left:0;padding-left:0 */ .srvc-sec .srvc-link > a:first-child {margin-left:0} .srvc-sec .srvc-link > a > span {line-height:24px} .srvc-sec .srvc-util a.amenu {display:none} } @media all and (max-width:768px) { #global {right:64px;top:19px} .srvc-sec .srvc-util .search:before {background-size:224px auto;background-position:-50px 0;width:22px;height:22px} } @media all and (max-width:720px) { #global .global-wrap > a.ico01, #global .global-wrap > a.ico02, .LogY #global .global-wrap > a.ico01, .LogY #global .global-wrap > a.ico02 {display:none} } @media all and (max-width:460px) { #global {right:50px} } @media all and (max-width:399px) { .LogY .srvc-sec .srvc-link > a.my {display:none} } /*-------------------------logo_kor.css------------------------------------*/ /* logo */ #header .logo {display:block;position:absolute;top:26px;left:70px;z-index:110} #header .logo a, #header .logo a span {display:block} #header .logo a span em {display:none} @media all and (max-width:1600px) { #header .logo {left:30px} } @media all and (max-width:1399px) { #header .logo {left:30px} } @media all and (max-width:1080px) { #header .logo {top:31px} #header .logo img {width:135px;height:auto} } @media all and (max-width:999px) { #header .logo {top:17px;left:30px;} #header .logo a {display:inline-block} } @media all and (max-width:768px) { #header .logo {left:10px;} } /*-------------------------header_kor.css------------------------------------*/ /* header */ #header {position:static} #menu-wrap .mGnavi {display:none} /* 메뉴 */ #menu-wrap {display:inline-block;position:relative;width:100%;height:100%;max-width:1600px;z-index:100} #menu-wrap:after {clear:both;display:block;content:""} #menu-wrap .menu-cont {width:76%;padding-left:24%} #mn-ctrs-btns {display:none} /* 주메뉴 */ @media all and (min-width:1000px) { #menu-wrap .mn-top, #menu-wrap .mem-btn, #menu-wrap .btn-close, #menu-wrap .tmn-box {display:none} #mainNavi-wrap {position:absolute;left:50%;top:0;background-color:#fff;width:2000px;height:90px;margin:0 0 0 -1000px;text-align:center;overflow:hidden;z-index:100} #mainNavi-wrap .menu-deco .menu-deco01 {/* display:block; */position:absolute;left:396px;bottom:25px;background-color:#ffc800;width:0;height:13px;/* transition:width .3s ease .2s */display:none;} #mainNavi-wrap .menu-deco .menu-deco01:before {content:"";display:none;position:absolute;left:-13px;top:0;border-top:6px solid transparent;border-left:6px solid transparent;border-bottom:7px solid #ffc800;border-right:7px solid #ffc800} #mainNavi-wrap .menu-deco .menu-deco01:after {content:"";display:none;position:absolute;right:-13px;top:0;border-bottom:6px solid transparent;border-right:6px solid transparent;border-top:7px solid #ffc800;border-left:7px solid #ffc800} #mainNavi-wrap .menu-deco .menu-deco02 {display:block;position:absolute;left:0;bottom:0;background-color:#cdcdcd;width:0;height:14px;/* transition:width .5s ease .2s */} #mainNavi-wrap .menu-deco .menu-deco02:after {content:"";display:none;position:absolute;right:-14px;top:0;border-bottom:7px solid transparent;border-right:7px solid transparent;border-top:7px solid #cdcdcd;border-left:7px solid #cdcdcd} #mainNavi-wrap .depth-app-box {display:none;position:absolute;left:0;right:0;top:90px;width:100%;height:-webkit-calc(100% - 90px);height:-moz-calc(100% - 90px);height:calc(100% - 90px);max-width:1600px;margin:auto;text-align:right;font-size:0} #mainNavi-wrap .depth-app-box:before {content:"";display:inline-block;width:0;height:100%;vertical-align:middle} #mainNavi-wrap .depth-app-box .app-txt {position:relative;display:inline-block;background-color:#fbfbfb;width:310px;padding:50px 30px;color:#222;font-size:18px;font-weight:500;line-height:1.2;text-align:left;vertical-align:middle;box-sizing:border-box} #mainNavi-wrap .depth-app-box .app-txt:before {content:"";display:block;position:absolute;right:32px;top:0;bottom:0;background:url(/resources/homepage/kor/_Img/Layout/layout_spr.png) no-repeat 0 -123px;width:78px;height:78px;margin:auto} #mainNavi-wrap .depth-app-box .app-txt em {display:block;margin:4px 0 0 -2px;font-size:21px;font-weight:700;letter-spacing:-.05em;font-style:normal} #mainNavi-wrap .depth1-ul {padding:0 530px 0 140px;text-align:center;overflow:hidden} .LogY #mainNavi-wrap .depth1-ul {padding:0 600px 0 120px;} #mainNavi-wrap.over {/*border-bottom:2px solid #6c5f5e*/} #mainNavi-wrap.over #menu-wrap:after {content:"";display:block;position:absolute;left:50%;bottom:-1px;background-color:#e2e2e2;width:2000px;height:1px;margin:0 0 0 -1000px} #mainNavi-wrap.over .menu-deco .menu-deco01 {width:77px} #mainNavi-wrap.over .menu-deco .menu-deco02 {width:383px} #mainNavi-wrap.over .menu-deco .menu-deco01:before, #mainNavi-wrap.over .menu-deco .menu-deco01:after, #mainNavi-wrap.over .menu-deco .menu-deco02:after {display:block} #mainNavi-wrap.over .depth-app-box {/* display:block; */} #mainNavi-wrap .depth1-tit-box {position:absolute;left:0;bottom:95px;width:auto;text-align:left;opacity:0} #mainNavi-wrap .depth1-tit-box .depth1-tit {width:auto;padding-top:128px} #mainNavi-wrap .depth1-tit-box .depth1-tit span {display:block} #mainNavi-wrap .depth1-tit-box .depth1-tit .stxt {margin-bottom:14px;color:rgba(153, 153, 153, .6);font-size:1.111em;font-weight:600;font-family:'Titillium Web', sans-serif} #mainNavi-wrap .depth1-tit-box.show {opacity:1;transition:all .5s ease .3s} #mainNavi-wrap .depth1-tit-box.hide {opacity:0;transition:all .15s ease} #mainNavi {height:90px} #mainNavi .mn_li1 {position:relative;display:inline-block;text-align:center;vertical-align:top} #mainNavi .mn_a1 {display:block;position:relative;margin:0 35px;padding:34px 0;color:#222;font-size:1.222em;font-weight:700;letter-spacing:-.05em} #mainNavi .mn_a1:after {content:"";display:block;position:absolute;left:0;right:0;bottom:0;background-color:#00aeef;width:0;height:5px;margin:0 auto;transition:all .3s ease} #mainNavi .mn_li1 .mn_a1:hover, #mainNavi .mn_li1 .mn_a1:hover span, #mainNavi .mn_li1.over .mn_a1 span {} #mainNavi .mn_a1:hover:after, #mainNavi .mn_a1:focus:after, #mainNavi .mn_li1.over .mn_a1:after {left:0;width:70px} #mainNavi .mn_li1:nth-child(5), #mainNavi .mn_li1:nth-child(6), #mainNavi .mn_li1:nth-child(7), #mainNavi .mn_li1:nth-child(8) {display:none !important} #mainNavi .depth2-wrap {text-align:left} #mainNavi .depth2-wrap .depth2-ul {display:block;padding:26px 10px 53px} #mainNavi .depth2-wrap .mn_li2 {display:block;margin:0 0 8px} #mainNavi .depth2-wrap .mn_li2:last-child {margin:0} #mainNavi .depth2-wrap .mn_a2 {position:relative;display:block;padding:7px 31px 7px 0;transition:all .3s ease} #mainNavi .depth2-wrap .mn_li2.has-sub .mn_a2:before {content:"";display:block;position:absolute;right:3px;top:6px;background-color:#fff;border:1px solid #cacaca;border-radius:3px;width:20px;height:20px;box-sizing:border-box} #mainNavi .depth2-wrap .mn_li2.has-sub .mn_a2:after {content:"";display:block;position:absolute;right:8px;top:12px;background:url(/resources/homepage/kor/_Img/Layout/layout_spr.png) no-repeat -104px 0;width:9px;height:8px} #mainNavi .depth2-wrap .mn_li2.has-sub.d3-open .mn_a2:before {border-color:#00aeef} #mainNavi .depth2-wrap .mn_li2.has-sub.d3-open .mn_a2:after {background-position:-122px 0} #mainNavi .depth2-wrap .mn_li2.has-sub.d3-open .mn_a2 span {color:#00aeef} #mainNavi .depth2-wrap .mn_li2.has-sub.over .mn_a2:before {border-color:#00aeef} #mainNavi .depth2-wrap .mn_a2[target="_blank"]:after {content:"";display:inline-block;width:10px;height:10px;background:url(/homepage/kor/_Img/Layout/h_spr.png) no-repeat 0px -118px;opacity:.8;margin:0 0 2px 5px;transition:all .3s ease} #mainNavi .depth2-wrap .mn_a2[target="_blank"]:focus:after, #mainNavi .depth2-wrap .mn_a2[target="_blank"]:hover:after {margin-left:5px} #mainNavi .depth2-wrap .mn_a2 span {display:inline-block;position:relative;color:#555;letter-spacing:-.05em;line-height:1;transition:all .3s ease} #mainNavi .depth2-wrap .mn_a2 span:after {content:"";display:block;position:absolute;left:0;bottom:-2px;background-color:#00aeef;width:0;height:1px;transition:all .3s ease} #mainNavi .depth2-wrap .mn_li2.has-sub .mn_a2.over:after, #mainNavi .depth2-wrap .mn_li2.has-sub .mn_a2:hover:after, #mainNavi .depth2-wrap .mn_li2.has-sub .mn_a2:focus:after {background-position:-122px 0} #mainNavi .depth2-wrap .mn_a2.over span, #mainNavi .depth2-wrap .mn_a2:hover span, #mainNavi .depth2-wrap .mn_a2:focus span {color:#00aeef} #mainNavi .depth2-wrap .mn_a2.over span:after, #mainNavi .depth2-wrap .mn_a2:hover span:after, #mainNavi .depth2-wrap .mn_a2:focus span:after {width:100%} #mainNavi .depth3-wrap {display:none} #mainNavi .depth3-wrap {margin:7px 0 0 20px;padding-bottom:3px} #mainNavi .mn_li2.over .depth3-wrap {display:block} #mainNavi .depth3-wrap .depth3-ul {display:block;box-sizing:border-box;position:relative;padding:0} #mainNavi .depth3-wrap .mn_li3 {display:block;margin:0 0 3px} #mainNavi .depth3-wrap .mn_li3:last-child {margin:0} #mainNavi .depth3-wrap .mn_a3 {position:relative;display:block;padding:2px 10px 2px 0} #mainNavi .depth3-wrap .mn_a3 span {display:inline-block;color:#666;font-size:16px;letter-spacing:-.05em;line-height:1.2;transition:all .3s ease} #mainNavi .depth3-wrap .over.mn_a3 span {color:#00aeef} #mainNavi .depth3-wrap .over.mn_a3 span, #mainNavi .depth3-wrap .mn_a3:hover span, #mainNavi .depth3-wrap .mn_a3:focus span {text-decoration:underline} #mainNavi .mn_a1[target=_blank] span:after {display:inline-block;content:"";width:13px;height:13px;vertical-align:middle;margin:-4px 0 0px 10px;background:url(/resources/homepage/kor/_Img/Layout/layout_spr.png) no-repeat -111px -30px} #mainNavi .mn_a1[target=_blank]:focus span:after, #mainNavi .mn_a1[target=_blank]:hover span:after {background-position:-134px -30px} #mainNavi .mn_a2[target=_blank] span:after {display:inline-block;content:"";width:12px;height:10px;vertical-align:middle;margin:0 0 4px 10px;background:url(/resources/homepage/kor/_Img/Layout/layout_spr.png) no-repeat -157px -30px} #mainNavi .mn_a2[target=_blank]:focus span:after, #mainNavi .mn_a2[target=_blank]:hover span:after {background-position:-179px -30px} #mainNavi .mn_a3[target=_blank] span:after {display:inline-block;content:"";width:12px;height:10px;vertical-align:middle;margin:0 0 4px 10px;background:url(/resources/homepage/kor/_Img/Layout/layout_spr.png) no-repeat -157px -30px} #mainNavi .mn_a3[target=_blank]:focus span:after, #mainNavi .mn_a3[target=_blank]:hover span:after {background-position:-179px -30px} #mainNavi .tgl-btn {display:none} #header-wrap .tmn-bg {position:absolute;left:0;top:128px;width:100%;height:0;background:#f3f4f7;border-bottom:1px solid #323b50;z-index:400} #menu-wrap .allmn-btn {position:absolute;left:0;top:20px;width:49px;height:48px;border:1px solid #ccc;background:#fff;display:none} #menu-wrap .allmn-btn:before, #menu-wrap .allmn-btn:after, #menu-wrap .allmn-btn .txt:before {content:"";display:block;width:21px;height:2px;background:#5a5a5a;margin-left:14px;transition:all .3s ease} #menu-wrap .allmn-btn:before {margin-bottom:5px;margin-top:16px} #menu-wrap .allmn-btn:after {margin-top:5px} #menu-wrap .allmn-btn:hover:before, #menu-wrap .allmn-btn:hover:after {width:14px;background:#0d5db2} #menu-wrap .allmn-btn:hover .txt:before {width:18px;margin-left:20px;background:#0d5db2} #mainNavi-wrap .toppop-ctrl {position:absolute;right:0;top:0;z-index:100} #mainNavi-wrap .toppop-ctrl button {float:left;border:0;width:90px;height:90px} #mainNavi-wrap .toppop-ctrl button.btn-search {background:#0d4b91 url(/resources/homepage/kor/_Img/Layout/layout_spr.png) no-repeat -90px -240px} #mainNavi-wrap .toppop-ctrl button.btn-wctrl {background-color:#346dad} .isSub #mainNavi-wrap .toppop-ctrl button.btn-wctrl {/*display:none;*/} #mainNavi-wrap .toppop-ctrl button.btn-wctrl span {display:block;color:#fff;font-size:16px;text-align:center} #mainNavi-wrap .toppop-ctrl button.btn-wctrl span:before {content:'';display:block;width:30px;height:35px;margin:0 auto 10px auto;background:url(/resources/homepage/kor/_Img/Layout/layout_spr.png) no-repeat -53px -200px} #mainNavi-wrap .toppop-ctrl button.btn-wctrl .num {position:absolute;left:0;top:0;width:24px;height:24px;text-align:center;font-style:normal;font-weight:600;color:#fff;background:#233f58} } @media all and (max-width:1699px) and (min-width:1400px) { #mainNavi .mn_a1 {margin:0 20px} } @media all and (max-width:1649px) and (min-width:1400px) { #mainNavi .depth1-tit-box {left:100px;} } @media all and (max-width:1649px) and (min-width:1200px) { #mainNavi .depth1-tit-box .depth1-tit {width:200px;padding-left:30px} } @media all and (max-width:1599px) and (min-width:1401px) { #mainNavi-wrap .depth1-ul {padding:0 540px 0 275px} .LogY #mainNavi-wrap .depth1-ul {padding:0 620px 0 275px} } @media all and (max-width:1459px) and (min-width:1401px) { #mainNavi-wrap .depth1-ul {padding:0 540px 0 275px} .LogY #mainNavi-wrap .depth1-ul {padding:0 620px 0 275px} } @media all and (max-width:1400px) { #mainNavi-wrap {left:0;width:100%;margin-left:0} #mainNavi-wrap .menu-deco .menu-deco01 {left:140px} #mainNavi-wrap.over .menu-deco .menu-deco01 {width:40px} #mainNavi-wrap.over .menu-deco .menu-deco02 {width:150px} #mainNavi-wrap .depth1-ul {text-align:center} } @media all and (max-width:1400px) and (min-width:1300px) { #mainNavi-wrap .depth1-ul {padding:0 500px 0 225px} .LogY #mainNavi-wrap .depth1-ul {padding:0 590px 0 225px} } @media all and (max-width:1300px) and (min-width:1200px) { #mainNavi-wrap .depth1-ul {padding:0 405px 0 225px} .LogY #mainNavi-wrap .depth1-ul {padding:0 490px 0 225px} } @media all and (max-width:1400px) and (min-width:1200px) { #mainNavi .depth2-wrap .depth2-ul {padding:26px 5px 53px} #mainNavi .mn_a1 {margin:0 12px} #mainNavi .depth3-wrap {margin:5px 0 0 10px} } @media all and (max-width:1199px) and (min-width:1081px) { #mainNavi-wrap .depth1-ul {padding:0 410px 0 230px;} .LogY #mainNavi-wrap .depth1-ul {padding:0 270px 0 230px} #mainNavi .depth1-tit-box .depth1-tit {width:160px;padding-left:20px} #mainNavi .mn_a1 {margin:0 15px;padding:35px 0} #mainNavi .depth2-wrap .depth2-ul {padding:26px 5px 53px} #mainNavi .depth2-wrap .mn_a2 span {font-size:17px} #mainNavi .depth3-wrap .mn_a3 span {font-size:15px} } @media all and (max-width:1080px) and (min-width:1000px) { #mainNavi-wrap .depth1-ul {padding:0 405px 0 165px} .LogY #mainNavi-wrap .depth1-ul {padding:0 270px 0 170px} #mainNavi .depth1-tit-box .depth1-tit {width:160px;padding-left:20px} #mainNavi .mn_a1 {margin:0 15px;padding:35px 0} #mainNavi .depth2-wrap .depth2-ul {padding:26px 5px 53px} #mainNavi .depth2-wrap .mn_a2 span {font-size:17px} #mainNavi .depth3-wrap .mn_a3 span {font-size:15px} } @media only screen and (max-width:999px){ /* 메뉴 */ #mainNavi-wrap {overflow:inherit;position:absolute;top:0;right:0;left:auto;width:100%;max-width:350px} #menu-wrap:before {display:block;content:"";position:absolute;top:0;left:0;background-color:#009dd7;width:110px;height:100%} #menu-wrap .mGnavi {display:block;position:relative;background:#fff;border-bottom:1px solid #ececec;height:65px;padding:20px 0 0 25px;font-size:0;box-sizing:border-box} #menu-wrap .mGnavi a {display:inline-block;position:relative;vertical-align:top;box-sizing:border-box} #menu-wrap .mGnavi a.lang {margin-left:25px;display: none} /* #menu-wrap .mGnavi a:before {content:"";display:block;position:absolute;left:0;top:3px;width:18px;height:18px;background:url(/resources/homepage/kor/_Img/Layout/layout_spr.png) no-repeat -34px 0} */ #menu-wrap .mGnavi a.lang:before {background-position:0 0} #menu-wrap .mGnavi a span {display:block;padding:5px 0 5px 25px;color:#222;font-size:13px;font-weight:700;letter-spacing:-.05em;box-sizing:border-box} #menu-wrap .mGnavi a.member:before {display: none} #menu-wrap .mGnavi a.member span {padding-left:0} #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.mn-h-open .btn-close {display:block;position:absolute;top:50%;right:20px;transform:translateY(-50%);background:#d4d4d4;border:0;border-radius:50%;width:32px;height:32px} #menu-wrap.mn-h-open .btn-close:before, #menu-wrap.mn-h-open .btn-close:after {content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;background-color:#fff;width:18px;height:2px;margin:auto} #menu-wrap.mn-h-open .btn-close:before {transform:rotate(45deg)} #menu-wrap.mn-h-open .btn-close:after {transform:rotate(135deg)} #menu-wrap {position:absolute;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;padding:0;margin:0} #menu-wrap .mem-btn {overflow:hidden;background:#2b405b;border-top:1px solid rgba(255,255,255,0.2)} #menu-wrap .mem-btn a {float:left;width:50%;text-align:center;font-size:13px;padding:10px 5px;color:#fff;box-sizing:border-box} #menu-wrap .mem-btn a span {display:inline-block;padding:1px 0 1px 23px} #menu-wrap .mem-btn a span.login {background:url(/resources/_Img/Templet/Layout/mlogin_ico.png) no-repeat 0 50%} #menu-wrap .mem-btn a span.mypage {background:url(/resources/_Img/Templet/Layout/my_ico.png) no-repeat 0 50%} #menu-wrap .tmn-box {background:#fff;padding:14px 0 13px 0;border-bottom:1px solid #b9b9b9;position:relative} #menu-wrap .tmn-box .btn-close {width:52px;height:28px;background:none;border:0;position:absolute;top:16px;right:0;display:block;border-left:1px solid #ccc} #menu-wrap .tmn-box .btn-close:before, #menu-wrap .tmn-box .btn-close:after {display:block;content:"";width:2px;height:24px;background:#5e5e5e;position:absolute;top:50%;left:50%;margin-top:-12px;margin-left:-1px} #menu-wrap .tmn-box .btn-close:before {transform:rotate(45deg);-ms-transform:rotate(45deg)} #menu-wrap .tmn-box .btn-close:after {transform:rotate(-45deg);-ms-transform:rotate(-45deg)} #menu-wrap .tmn-box .tmn-title {font-size:18px;font-weight:300;color:#fff;text-align:center} #menu-wrap .tmn-box .tmn-title img {height:32px} #menu-wrap .tmn-box .tmn-global {margin-top:10px} #menu-wrap .tmn-box .tmn-global li {display:inline-block;line-height:1} #menu-wrap .tmn-box .tmn-global li a {color:#fff;font-size:14px;padding:0 14px 0 14px} #menu-wrap .tmn-box .tmn-global li:first-child a {padding-left:0;position:relative} #menu-wrap .tmn-box .tmn-global li:first-child a:after{display:block;content:"";width:1px;height:14px;background:rgba(255,255,255,0.3);position:absolute;top:50%;right:0;margin-top:-7px} #menu-wrap .allmn-btn {display:none} #menu-wrap.mn-h-open #mainNavi {left:auto;right:0;top:0;width:100%} #mainNavi .depth1-tit, #mainNavi .mn_li1.over:before {display:none} #mainNavi .depth1-wrap {position:relative} #mainNavi li.mn_li1 {height:auto} #mainNavi .mn_li1:nth-child(4), #mainNavi .mn_li1:nth-child(5), #mainNavi .mn_li1:nth-child(6), #mainNavi .mn_li1:nth-child(7) {display:block} #mainNavi .mn_li1 .mn_a1 {display:block;position:relative;padding:30px 10px 31px;width:110px;letter-spacing:-.05em;text-align:center;box-sizing:border-box;z-index:300} #mainNavi .mn_li1 .mn_a1 span {display:block;color:#fff;font-size:16px;font-weight:500;letter-spacing:-.05em;line-height:1.2} #mainNavi .mn_li1.is-open {} #mainNavi .mn_li1.is-open .mn_a1 {background-color:#fff} #mainNavi .mn_li1.is-open .mn_a1 span {color:#555;font-weight:700} #mainNavi .mn_li1.is-close .tgl-btn {display:none;position:absolute;top:17px;right:15px;background:none;border:0;width:25px;height:25px;box-sizing:border-box;z-index:500} #mainNavi .mn_li1.is-close .tgl-btn:before, #mainNavi .mn_li1.is-close .tgl-btn:after {content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;background-color:#999;width:2px;height:14px;margin:auto} #mainNavi .mn_li1.is-close .tgl-btn:before {transform:rotate(90deg);-ms-transform:rotate(90deg)} #mainNavi .depth2-wrap {display:none;position:absolute;top:0;left:0;width:100%;height:auto;padding-left:110px;text-align:left;transition:display .3s ease;box-sizing:border-box} #mainNavi .depth2-wrap .mn_li2.has-sub .tgl-btn {display:block} #mainNavi .depth2-wrap .mn_li2.is-open .tgl-btn {} #mainNavi .depth2-wrap .mn_li2.is-open .tgl-btn:after {width:0} #mainNavi .is-open .depth2-wrap {display:block} #mainNavi .depth2-ul {position:relative;z-index:100} #mainNavi .mn_li1:first-child .depth2-ul {border-top:0} #mainNavi .mn_li2 {position:relative} #mainNavi .depth2-wrap .mn_a2 {position:relative;display:block;border-bottom:1px solid #eee;margin:0 20px;padding:20px 45px 22px 0} #mainNavi .depth2-wrap .mn_a2[target='_blank']:before, #mainNavi .depth2-wrap .mn_a2[target='_blank']:after {content:"";display:block;position:absolute} #mainNavi .depth2-wrap .mn_a2[target='_blank']:before {width:25px;height:25px;box-sizing:border-box;border:1px solid #a0a0a0;right:20px;top:13px} #mainNavi .depth2-wrap .mn_a2[target='_blank']:after {width:12px;height:10px;background:url(/resources/homepage/kor/_Img/Layout/layout_spr.png) no-repeat -157px -30px;right:26px;top:20px} #mainNavi .depth2-wrap .mn_a2 span {display:block;color:#666;font-size:15px;font-weight:700;line-height:1.2;letter-spacing:-.05em} #mainNavi .depth2-wrap .is-open .mn_a2 {border-bottom:0} #mainNavi .depth2-wrap .mn_a2.over span, #mainNavi .depth2-wrap .is-open .mn_a2 span, #mainNavi .depth2-wrap .mn_a2:hover span {color:#009dd7} #mainNavi .depth2-wrap .mn_li2.is-close .depth3-wrap {display:none} #mainNavi .depth2-wrap .mn_li2.is-open .depth3-wrap {display:block} #mainNavi .depth2-wrap .depth3-wrap {display:block;background-color:#f5f5f5;padding:21px 0 22px} #mainNavi .depth2-wrap .depth3-wrap li {padding:3px 20px} #mainNavi .depth2-wrap .depth3-wrap li a {position:relative;display:block;padding:2px 0 3px} #mainNavi .depth2-wrap .depth3-wrap li a span {color:#666;font-size:15px;font-weight:500;letter-spacing:-.05em} #mainNavi .depth2-wrap .depth3-wrap li a[target='_blank'] span:after {display:inline-block;content:"";width:12px;height:10px;vertical-align:middle;margin:-2px 0 0px 10px;background:url(/resources/homepage/kor/_Img/Layout/layout_spr.png) no-repeat -157px -30px} #mainNavi .depth2-wrap .depth3-wrap li.over a span, #mainNavi .depth2-wrap .depth3-wrap li a:hover span {color:#00aeef} .body-slide-wr {position:relative;width:100%;height:100%;transition:margin 0.3s ease} .body-slider-ovclick {display:none;position:fixed;z-index:10;width:100%;height:100%;left:0;top:0;background:rgba(0,0,0,0.6);cursor:pointer;z-index:3001} #mn-ctrs-btns {display:block;position:absolute;top:22px;right:30px;z-index:1000} #mn-ctrs-btns .mn-ctrs-btn {position:relative;display:block;background:transparent;border:0;width:22px;height:16px} #mn-ctrs-btns .mn-ctrs-btn:before, #mn-ctrs-btns .mn-ctrs-btn:after, #mn-ctrs-btns .mn-ctrs-btn span.txt:before {content:"";display:block;position:relative;left:0;background-color:#262626;width:22px;height:2px;transition:left .2s linear} #mn-ctrs-btns .mn-ctrs-btn:before {margin:0 0 5px 0} #mn-ctrs-btns .mn-ctrs-btn:after {margin:5px 0 0 0} #mainNavi-wrap .toppop-ctrl {position:absolute;right:85px;top:57px;z-index:1000} #mainNavi-wrap .toppop-ctrl button {float:left;position:relative;border:0;width:26px;height:26px;margin-left:20px;background-color:transparent} #mainNavi-wrap .toppop-ctrl button.btn-search {background:url(/resources/homepage/kor/_Img/Layout/layout_spr.png) no-repeat -26px -210px} #mainNavi-wrap .toppop-ctrl button.btn-wctrl span {display:inline-block;color:#fff;font-size:0;text-align:center} #mainNavi-wrap .toppop-ctrl button.btn-wctrl span:before {content:'';display:inline-block;width:26px;height:26px;background:url(/resources/homepage/kor/_Img/Layout/layout_spr.png) no-repeat 0 -210px} #mainNavi-wrap .toppop-ctrl button.btn-wctrl .num {position:absolute;right:-3px;bottom:-3px;width:15px;height:15px;text-align:center;font-style:normal;font-size:10px;font-weight:500;color:#fff;background:#233f58} .menu-deco, .depth-app-box {display:none !important} } @media only screen and (max-width:640px){ #mainNavi-wrap .toppop-ctrl {right:70px} } @media all and (max-width:460px) { #mn-ctrs-btns {right:10px} } /*-------------------------submenu_kor.css------------------------------------*/ #side-wrap {display:none} @media all and (min-width:1199px){ #side-wrap {display:none;position:relative;float:left;width:220px;} } @media all and (max-width:768px){ #side-wrap {display:none;width:auto;position:relative;z-index:2;} .submenu .lm-tit {display:none} #leftmenu {height:50px} #leftmenu .lm_l1 {position:relative;background:#fff;} #leftmenu .lm_a1 {display:block;padding:0 30px;height:50px;text-align:center;} #leftmenu .lm_a1:before {content:"";display:inline-block;width:0;height:100%;vertical-align:middle} #leftmenu .lm_a1 span {display:inline-block;vertical-align:middle;position:relative;font-size:16px;color:#009dd7;font-weight:500;line-height:1.3} #leftmenu .depth2 {display:none;position:absolute;top:100%;left:0;width:100%;z-index:1000;box-shadow:0px 7px 10px rgba(0,0,0,.2)} #leftmenu .depth2 .lm_l2 {position:relative;padding:0 0;background:#f2f2f2;box-sizing:border-box} #leftmenu .depth2 .lm_l2.is-open {border-bottom:0} #leftmenu .depth2 .lm_l2:last-child.is-open {padding-bottom:10px} #leftmenu .depth2 .lm_a2 {display:block;padding:0 30px;height:50px;font-size:0;text-align:center;} #leftmenu .depth2 .lm_a2:before {content:"";display:inline-block;width:0;height:100%;vertical-align:middle} #leftmenu .depth2 .lm_a2 span {display:inline-block;vertical-align:middle;position:relative;font-size:16px;color:#555;line-height:1.3} #leftmenu .depth2 .is-open .lm_a2 span {color:#009dd7;font-weight:500} #leftmenu .lm_l1 > .tgl-btn {position:absolute;top:50%;right:20px;width:42px;height:42px;background:none;z-index:500;transform:translateY(-50%);border:0} #leftmenu .lm_l1 > .tgl-btn:before, #leftmenu .lm_l1 > .tgl-btn:after {position:absolute;top:50%;margin-top:-5px;content:"";display:block;width:2px;height:12px;background:#7b7b7b;z-index:3} #leftmenu .lm_l1 > .tgl-btn:before {transform:rotate(-45deg);right:23px;} #leftmenu .lm_l1 > .tgl-btn:after {transform:rotate(45deg);right:15px;} #leftmenu .lm_l1.is-open > .tgl-btn:before {transform:rotate(45deg);} #leftmenu .lm_l1.is-open > .tgl-btn:after {transform:rotate(-45deg);} #leftmenu .lm_l2 > .tgl-btn {position:absolute;top:14px;right:30px;width:25px;height:25px;border:1px solid #a0a0a0;background:none;z-index:500} #leftmenu .lm_l2.is-open > .tgl-btn {border-color:#513d3b;background:#513d3b} #leftmenu .lm_l2.is-close > .tgl-btn:before, #leftmenu .lm_l2.is-close > .tgl-btn:after {display:block;content:"";width:1px;height:15px;background:#9a9a9a;position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;transition:all .3s ease} #leftmenu .lm_l2.is-close > .tgl-btn:before {transform:rotate(90deg)} #leftmenu .lm_l2.is-open > .tgl-btn:after {transform:rotate(90deg)} #leftmenu .lm_l2.is-open > .tgl-btn:before, #leftmenu .lm_l2.is-open > .tgl-btn:after {background:#fff} #leftmenu .depth3 {display:none;padding:10px 30px;overflow:hidden;background:#fff;font-size:0;text-align:left} #leftmenu .depth3 .lm_l3 {display:inline-block;width:50%;position:relative;vertical-align:top;height:38px;padding:0 10px 0 0;box-sizing:border-box} #leftmenu .depth3 .lm_l3:after {content:"";display:none;position:absolute;width:100%;height:1px;background:#b5b5b5;left:0;bottom:0} #leftmenu .depth3 .lm_l3 > .tgl-btn {display:none} #leftmenu .depth3 .lm_a3 {display:block;color:#666;position:relative;height:100%} #leftmenu .depth3 .lm_a3:before {content:"";display:inline-block;width:0;height:100%;vertical-align:middle} #leftmenu .depth3 .lm_a3 span {display:inline-block;position:relative;font-size:15px;color:#666;vertical-align:middle} #leftmenu .depth3 .lm_a3[target='_blank']:after {content:"";display:block;position:absolute;width:12px;height:10px;background:url(/resources/homepage/kor/_Img/Layout/layout_spr.png) no-repeat -157px -30px;right:0;top:14px;} #leftmenu .depth3 .lm_l3.over:before {content:"";display:block;position:absolute;width:4px;height:4px;background:#513d3b;left:4px;top:0} #leftmenu .depth3 .lm_l3.over:after {height:2px;background:#513d3b} #leftmenu .depth3 .lm_l3.over .lm_a3 span {color:#513d3b} #leftmenu .depth4 {display:none} #leftmenu .lm_l1.is-open .lm_a1 span:after {transform:rotate(180deg);-ms-transform:rotate(180deg)} } @media all and (max-width:460px){ #leftmenu .lm_a1 {padding:0 45px 0 15px} #leftmenu .lm_l1 > .tgl-btn {right:5px} #leftmenu .depth2 .lm_a2 {padding:0 45px 0 15px} #leftmenu .lm_l2 > .tgl-btn {right:15px} #leftmenu .depth3 {padding:10px 15px} } /*-------------------------footer_kor.css------------------------------------*/ /* footer */ #footer-wrap {position:relative;background-color:#fff;padding:70px 70px 0;z-index:100} .isMain #footer-wrap {padding-top:0} #footer-wrap .footer-wr {background-color:#f7f7f7;padding:55px 0 59px} #footer-wrap .footer-wr .footer-box {width:1600px;margin:0 auto;padding:0 20px;box-sizing:border-box} #footer-wrap .service-wrap {margin-bottom:26px;font-size:0} #footer-wrap .service-wrap .topBtPkg {position:fixed;bottom:-70px;right:80px;width:70px;height:70px;z-index:3500;transition:all .3s ease} #footer-wrap .service-wrap .topBtPkg:before {display:none} #footer-wrap .service-wrap .topBtPkg.over {bottom:45px} #footer-wrap .service-wrap .topBtPkg.footerShow {position:absolute;bottom:auto;top:-35px} #footer-wrap .service-wrap .topBtPkg .topBt {display:block;position:relative;width:70px;height:70px;text-align:center;background:#4d4f54;border-radius:50%} #footer-wrap .service-wrap .topBtPkg .topBt span {display:inline-block;color:#fff;font-size:12px;padding:40px 0 0;position:relative} #footer-wrap .service-wrap .topBtPkg .topBt span:before {display:block;content:"";width:14px;height:14px;border:2px solid transparent;border-top:2px solid #fff;border-left:2px solid #fff;position:absolute;top:22px;left:50%;margin-left:-8px;transform:rotate(45deg);-ms-transform:rotate(45deg)} #footer-wrap .service-wrap .topBtPkg .mUtilLst {display:none} #footer-wrap .service-wrap .topBtPkg .mUtilCaster {display:none} #footer-wrap .service-wrap > div {position:relative;display:inline-block;vertical-align:top;box-sizing:border-box} #footer-wrap .service-wrap > div:before {content:"";position:absolute;left:0;top:0;background-color:rgba(32, 32, 32, .1);width:1px;height:240px} #footer-wrap .flink-box {width:989px;padding-top:6px} #footer-wrap .flink-box:before {display:none} #footer-wrap .flink-box .flink-cont {display:inline-block;vertical-align:top} #footer-wrap .flink-box .flink-cont {width:404px;margin-right:4px} #footer-wrap .flink-box .flink-cont:last-child {width:170px;margin-right:0} .flink-box .flink-cont .tit {margin-bottom:17px;color:#222;font-weight:500;font-size:18px;letter-spacing:-.05em} .flink-box .flink-cont ul {display:inline-block;width:50%;vertical-align:top} .flink-box .flink-cont ul li {padding:3px 0} .flink-box .flink-cont ul li a {display:block;padding:4px 0;font-size:16px;letter-spacing:-.05em} .flink-box .flink-cont ul li a span {position: relative;display:inline-block;color:rgba(34, 34, 34, .6);transition:all .3s ease} .flink-box .flink-cont ul li a span:after {content:'';position: absolute;left: 0;bottom:-4px;width: 100%;height:1px;background:rgba(34, 34, 34, 1);opacity:0;transition:all .3s ease} .flink-box .flink-cont ul li a:focus span, .flink-box .flink-cont ul li a:hover span {color:rgba(34, 34, 34, 1)} .flink-box .flink-cont ul li a:focus span:after, .flink-box .flink-cont ul li a:hover span:after {opacity:1} #footer-wrap .ftel-box {width:326px;padding:6px 30px 0 47px} .ftel-box .ftel-cont:first-child {padding-bottom:14px} .ftel-box .ftel-cont .tit {margin:0 0 9px 2px;color:#333;font-size:19px;font-weight:500;letter-spacing:-.05em} .ftel-box .ftel-cont .ftel {margin-bottom:13px;color:#00aeef;font-size:36px;font-weight:700;font-family:'Titillium Web', sans-serif} .ftel-box .ftel-cont .ftel-info li {padding:3px 0 3px 3px;color:#555;font-size:16px;letter-spacing:-.025em} #footer-wrap .service-cont {width:245px;padding-left:47px} #footer-wrap .service-list li {padding:3px 0} #footer-wrap .service-list li:first-child {padding-top:0} #footer-wrap .service-list li a {display:block;padding:13px 0} #footer-wrap .service-list li:first-child a {padding-top:4px} #footer-wrap .service-list li a span {position:relative;display:inline-block;padding-right:21px;color:#222;font-size:16px;letter-spacing:-.05em} #footer-wrap .service-list li a span:before {content:"";display:block;position:absolute;right:0;top:50%;background:url(/resources/homepage/kor/_Img/Layout/f_new_ico.png) no-repeat center;width:14px;height:11px;margin-top:-6px} #footer-wrap .service-list li a.privacy span {color:#0092d6;font-weight:500;} #footer-wrap .sns-sec {margin-top:20px;font-size:0;display:none;} #footer-wrap .sns-sec a {position:relative;display:inline-block;width: 30px;height: 30px;background:#8c8c8c;border-radius:50%;margin-left:10px;} #footer-wrap .sns-sec a:first-child {margin-left:0;} #footer-wrap .sns-sec a:before {content:'';position: absolute;left: 0;top: 0;width: 100%;height:100%;background-image:url(/resources/homepage/kor/_Img/Layout/sns_spr.png);background-repeat:no-repeat;} #footer-wrap .sns-sec a.insta:before {background-position:0 0;} #footer-wrap .sns-sec a.fb:before {background-position:-42px 0;} #footer-wrap .sns-sec a.youtube:before {background-position:-82px 0;} #footer-wrap .sns-sec a.tw:before {background-position:-124px 0;} #footer-wrap .info-wrap .footer {position:relative;padding:10px 410px 0 265px} #footer-wrap .info-wrap .footer .flogo {position:absolute;left:-1px;top:0;width:247px} #footer-wrap .info-wrap .footer .flogo a {display:block} #footer-wrap .info-wrap .footer .flogo a img {display:block;max-width:100%} #footer-wrap .info-wrap .cs-info {padding-bottom:13px;color:#999;font-size:0.944em;letter-spacing:-.025em;line-height:1.2} #footer-wrap .info-wrap .cs-info > span, #footer-wrap .info-wrap .footer address {display:inline-block;margin-right:10px;vertical-align:top} #footer-wrap .info-wrap .cs-info .email a {color:#555;transition:all .3s ease} #footer-wrap .info-wrap .cs-info .email a:focus, #footer-wrap .info-wrap .cs-info .email a:hover {color:#019dd8} #footer-wrap .info-wrap .cs-info .unit {padding:0 10px 0 0;margin:0 2px 0 0;position:relative} #footer-wrap .info-wrap .cs-info .unit:after {content:"/";display:block;position:absolute;width:auto;height:auto;line-height:1;right:0;top:6px;font-size:10px;color:#ddd} #footer-wrap .info-wrap .cs-info .unit:last-child {padding:0;margin:0} #footer-wrap .info-wrap .cs-info .unit:last-child:after {display:none} #footer-wrap .info-wrap .footer .copyright {margin-top:15px;color:rgba(34, 34, 34, .3);font-size:0.778em;font-weight:300;letter-spacing:.025em;text-transform:uppercase} #footer-wrap .info-wrap .footer .copyright span {display:inline-block} #footer-wrap .footer-right {position:absolute;right:0;bottom:0} #footer-wrap .mark-box {margin-bottom:13px;text-align:right} #footer-wrap .info-wrap .flic-wrap {position:absolute;right:0;bottom:0} #footer-wrap .info-wrap .flic-wrap li {float:left;margin:0 5px} #footer-wrap .info-wrap .flic-wrap li a {display:block} #footer-wrap .info-wrap .family-site-wr .family-site {position:relative;display:inline-block;background:transparent;font-size:0.889em;width:200px;z-index:100} #footer-wrap .info-wrap .family-site-wr .family-site dt button {position:relative;background:#fff;color:rgba(0, 0, 0, .6);border:1px solid #e0e0e0;width:100%;height:55px;display:block;padding:0 0 0 21px;font-size:0.889em;font-weight:500;text-align:left;letter-spacing:-.05em;vertical-align:middle;transition:all .3s ease} #footer-wrap .info-wrap .family-site-wr .family-site dt button:hover, #footer-wrap .info-wrap .family-site-wr .family-site dt button:focus {} #footer-wrap .info-wrap .family-site-wr .family-site dt button:after {content:"";display:block;position:absolute;right:18px;top:50%;transform:translateY(-50%);width:11px;height:7px;background:url(/resources/homepage/kor/_Img/Layout/f_sel_arr.png) no-repeat center;transition:all .3s ease} #footer-wrap .info-wrap .family-site-wr .family-site dt button.is-open:after {transform:rotate(180deg);-ms-transform:rotate(180deg)} #footer-wrap .info-wrap .family-site-wr .family-site .isSelSub {display:none;position:absolute;bottom:100%;left:0;background:#4d5057;width:100%} #footer-wrap .info-wrap .family-site-wr .family-site .isSelSub ul {padding:10px 10px 10px 15px;text-align:left} #footer-wrap .info-wrap .family-site-wr .family-site .isSelSub li a {display:inline-block;color:#fff;padding:5px 0} #footer-wrap .info-wrap .family-site-wr .family-site .isSelSub li a:focus, #footer-wrap .info-wrap .family-site-wr .family-site .isSelSub li a:hover {text-decoration:underline} #footer-wrap .info-wrap .family-site-wr .family-site .isSelSub .btn-fclose {display:block;position:absolute;top:0;right:100%;border:0;cursor:pointer;background:#4d5057;width:28px;height:28px} #footer-wrap .info-wrap .family-site-wr .family-site .isSelSub .btn-fclose:before, #footer-wrap .info-wrap .family-site-wr .family-site .isSelSub .btn-fclose:after {content:"";display:block;position:absolute;width:50%;height:2px;background:#fff;top:0;right:0;bottom:0;left:0;margin:auto} #footer-wrap .info-wrap .family-site-wr .family-site .isSelSub .btn-fclose:before {transform:rotate(45deg)} #footer-wrap .info-wrap .family-site-wr .family-site .isSelSub .btn-fclose:after {transform:rotate(-45deg)} #footer-wrap .service-wrap > #fsitelink-wr {display:none} #fsitelink-wr .fsitelink-wr {max-width:1400px;margin:0 auto;text-align:left;box-sizing:border-box} #fsitelink-wr .fsitelink-wr:after {clear:both;content:"";display:block} #fsitelink-wr .fsitelink-wr .fsitelink {position:relative;float:left;width:31.333%;margin:0 1%;border-bottom:1px solid #e1e1e1} #fsitelink-wr .fsitelink-wr .fsitelink:before {content:"";position:absolute;top:0;left:0;width:100%;height:1px;background:rgba(255,255,255,.2)} #fsitelink-wr .fsitelink-wr .fsitelink .tit a {position:relative;display:block;padding:15px;font-size:15px;color:#222;font-weight:500;z-index:2} #fsitelink-wr .fsitelink-wr .fsitelink .tit a:after {content:"";position:absolute;top:50%;right:10px;width:10px;height:10px;border:1px solid transparent;border-top:1px solid rgba(0,0,0,.6)} #fsitelink-wr .fsitelink-wr .fsitelink.is-open .tit a:after {border-top:1px solid #222;border-left:1px solid #222;transform:rotate(45deg);-ms-transform:rotate(45deg);margin-top:-2px} #fsitelink-wr .fsitelink-wr .fsitelink .fsitelink-cate-box {position:absolute;bottom:45px;left:0;width:100%;height:0;display:none;overflow:hidden;transition:all .3s ease;background:#4d4f54} #fsitelink-wr .fsitelink-wr .fsitelink .fsitelink-cate-box ul {margin:15px} #fsitelink-wr .fsitelink-wr .fsitelink .fsitelink-cate-box li {margin:5px 0} #fsitelink-wr .fsitelink-wr .fsitelink .fsitelink-cate-box li a {display:block;padding:2px 0} #fsitelink-wr .fsitelink-wr .fsitelink .fsitelink-cate-box li a span {position:relative;display:inline-block;font-size:13px;color:#fff;padding-left:13px;transition:all .3s ease} #fsitelink-wr .fsitelink-wr .fsitelink .fsitelink-cate-box li a span:before {content:'';position:absolute;left:0;top:5px;width:3px;height:3px;background:#fff} #fsitelink-wr .fsitelink-wr .fsitelink .fsitelink-cate-box li a:hover span, #fsitelink-wr .fsitelink-wr .fsitelink .fsitelink-cate-box li a:focus span, #fsitelink-wr .fsitelink-wr .fsitelink .fsitelink-cate-box li a:active span {text-decoration:underline;color:#fff} #fsitelink-wr .fsitelink-wr .fsitelink.is-open .fsitelink-cate-box {display:block;height:180px;overflow-y:auto} @media all and (max-width:1719px) { #footer-wrap .footer-wr .footer-box {width:auto} #footer-wrap .flink-box {width:65%} #footer-wrap .flink-box .flink-cont {width:39.53%} #footer-wrap .flink-box .flink-cont:last-child {width:19%} #footer-wrap .ftel-box {width:21%;padding:6px 15px 0 20px} #footer-wrap .service-cont {width:14%;padding-left:15px} } @media all and (max-width:1600px) { #footer-wrap .info-wrap .footer {padding:10px 410px 0 205px} } @media all and (max-width:1500px) { #footer-wrap {padding:0} #footer-wrap .footer-wr .footer-box {padding:0 70px} #footer-wrap .service-wrap .topBtPkg {right:10px} #footer-wrap .service-wrap .topBtPkg.footerShow {top:-35px} } @media all and (max-width:1400px) { #footer-wrap .footer-wr .footer-box {padding:0 30px} #footer-wrap .info-wrap .footer {padding-left:240px} } @media all and (max-width:1280px) { #footer-wrap {padding:0} #footer-wrap .flink-box {width:70%} #footer-wrap .ftel-box {width:30%} #footer-wrap .service-cont {width:100%;padding-left:0} #footer-wrap .service-wrap .service-cont:before {display: none} #footer-wrap .service-list li {display: inline-block;padding:0;margin-left:30px} #footer-wrap .service-list li:first-child {margin-left:0} #footer-wrap .service-list li a {padding:4px 0} #footer-wrap .info-wrap .cs-info {line-height:1.4} #footer-wrap .info-wrap .cs-info .unit:after {top:4px} #footer-wrap .info-wrap .footer {padding-left:0} #footer-wrap .info-wrap .footer .flogo {position:relative;left:auto;top:auto;width:auto;margin-bottom:15px} #footer-wrap .info-wrap .footer .copyright {line-height:1.3} } @media all and (max-width:1200px) { .isMain #footer-wrap .footer-wr .footer-box {padding:0 50px} } @media all and (max-width:999px) { #footer-wrap .footer-wr {padding:0 0 20px 0} .isMain #footer-wrap .footer-wr .footer-box {padding:0 30px} #footer-wrap .info-wrap .footer {padding-right:0} #footer-wrap .info-wrap .footer .copyright {margin-top: 5px} #footer-wrap .info-wrap .cs-info {padding-bottom: 5px} #footer-wrap .service-wrap > div:before {display: none} #footer-wrap .service-wrap .flink-box {display: none;width:100%} #footer-wrap .ftel-box {width:100%;padding:20px 0;border-bottom:1px solid #e1e1e1;margin:20px 0} .ftel-box .ftel-cont {float: left} .ftel-box .ftel-cont:first-child {padding-bottom:0;margin-right: 50px} .ftel-box .ftel-cont .ftel-info {position: absolute;left:450px;top:20px} #footer-wrap .footer-right {position: relative;right:auto;bottom:auto;margin-top: 20px} #footer-wrap .mark-box {position: absolute;right: 0;bottom: 0} #footer-wrap .service-wrap #fsitelink-wr {display:block} } @media all and (max-width:768px) { .ftel-box .ftel-cont .tit {font-size: 16px;margin-bottom: 5px} .ftel-box .ftel-cont .ftel {font-size:30px} .ftel-box .ftel-cont .ftel-info li {font-size:14px} .ftel-box .ftel-cont .ftel-info {left:385px} #footer-wrap .service-list li a span {font-size: 14px} #footer-wrap .service-wrap .topBtPkg {width:48px;height:48px} #footer-wrap .service-wrap .topBtPkg .topBt {width:48px;height:48px} #footer-wrap .service-wrap .topBtPkg .topBt span {padding:25px 0 0} #footer-wrap .service-wrap .topBtPkg .topBt span:before {display:block;content:"";width:8px;height:8px;top:15px;margin-left:-5px} #footer-wrap .service-wrap .topBtPkg.footerShow {top:-25px} } @media all and (max-width:640px) { #footer-wrap .footer-wr {padding:0 0 20px 0} #footer-wrap .footer-wr .footer-box {padding:0 15px} #footer-wrap .info-wrap .footer {padding:0} #footer-wrap .info-wrap .footer .flogo a img {width:130px} #footer-wrap .footer-right {position: static;text-align: center} #footer-wrap .mark-box {display:none;top:0;bottom:auto} #footer-wrap .info-wrap .family-site-wr .family-site {width:150px} #footer-wrap .service-list li {width:50%;margin-left:0;margin-top:5px} .ftel-box .ftel-cont {width:50%} .ftel-box .ftel-cont:first-child {margin-right:0} .ftel-box .ftel-cont .ftel-info {position: relative;left:auto;top:auto} #footer-wrap .service-wrap .topBtPkg {right:20px;bottom:20px} #footer-wrap .service-wrap .topBtPkg.footerShow {} #footer-wrap .service-wrap .topBtPkg.over {right:20px;bottom:20px} #footer-wrap .service-wrap .topBtPkg .topBt {display:none} #footer-wrap .service-wrap .topBtPkg .mUtilCaster {display:block;position:relative;width:48px;height:48px;border-radius:50%;background:#4d4f54;border:0;box-shadow:0 5px 10px rgba(0, 0, 0, .75)} #footer-wrap .service-wrap .topBtPkg .mUtilCaster:before, #footer-wrap .service-wrap .topBtPkg .mUtilCaster:after {content:"";display:block;position:absolute;width:20px;height:2px;top:0;right:0;bottom:0;left:0;margin:auto;background:#fff;transition:all .3s ease} #footer-wrap .service-wrap .topBtPkg .mUtilCaster:before {} #footer-wrap .service-wrap .topBtPkg .mUtilCaster:after {transform:rotate(90deg)} #footer-wrap .service-wrap .topBtPkg .mUtilCaster.over:before {transform:rotate(45deg)} #footer-wrap .service-wrap .topBtPkg .mUtilCaster.over:after {transform:rotate(135deg)} #footer-wrap .service-wrap .topBtPkg .mUtilLst {display:none;position:absolute;width:100%;left:0;bottom:100%} #footer-wrap .service-wrap .topBtPkg .mUtilLst li {display:block;margin:0 0 5px} #footer-wrap .service-wrap .topBtPkg .mUtilLst li > * {display:block;position:relative;width:50px;height:auto;border:0;background:transparent} #footer-wrap .service-wrap .topBtPkg .mUtilLst li > * .ico {display:block;position:relative;width:50px;height:50px;border-radius:50%;border:0} #footer-wrap .service-wrap .topBtPkg .mUtilLst li > * .txt {display:block;text-align:center;font-size:12px;letter-spacing:-.05em;font-weight:500;color:#000;text-shadow:0 0 3px rgba(255, 255, 255, .8)} #footer-wrap .service-wrap .topBtPkg .mUtilLst li > * .ico:before, #footer-wrap .service-wrap .topBtPkg .mUtilLst li > * .ico:after {content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;margin:auto} #footer-wrap .service-wrap .topBtPkg .mUtilLst li .qPs .ico {background:#009dd7} #footer-wrap .service-wrap .topBtPkg .mUtilLst li .qPs .ico:after {width:32px;height:31px;background:url(/resources/homepage/kor/_Img/Layout/layout_spr.png) no-repeat -10px -71px;background-size:300px auto} #footer-wrap .service-wrap .topBtPkg .mUtilLst li .qChat .ico {background:#f4bf00} #footer-wrap .service-wrap .topBtPkg .mUtilLst li .qChat .ico:after {width:48px;height:48px;background:url(/resources/homepage/kor/_Img/Layout/layout_spr.png) no-repeat -120px -59px;background-size:288px auto} #footer-wrap .service-wrap .topBtPkg .mUtilLst li .qTop .ico {background:#333} #footer-wrap .service-wrap .topBtPkg .mUtilLst li .qTop .ico:after {width:10px;height:10px;border-left:2px solid #fff;border-top:2px solid #fff;transform:rotate(45deg);margin:22px auto auto auto} } @media all and (max-width:480px) { #footer-wrap .info-wrap .family-site-wr .family-site dt button {height:40px;padding-left:10px} #fsitelink-wr .fsitelink-wr .fsitelink .fsitelink-cate-box ul {margin:10px} #fsitelink-wr .fsitelink-wr .fsitelink .fsitelink-cate-box li a span {padding-left:0;word-wrap:break-word;word-break:keep-all;white-space:normal;line-height:1.3} #fsitelink-wr .fsitelink-wr .fsitelink .fsitelink-cate-box li a span:before {display:none} } @media all and (max-width:460px) { #footer-wrap .footer-wr .footer-box {padding:0 10px} .isMain #footer-wrap .footer-wr .footer-box {padding:0 20px} .ftel-box .ftel-cont .tit {font-size:15px} .ftel-box .ftel-cont .ftel {font-size:26px;margin-bottom:10px} .ftel-box .ftel-cont .ftel-info li {font-size:13px} } @media all and (max-width:360px) { #footer-wrap .info-wrap .family-site-wr .family-site {width:136px} } /* 애니메이션 */ @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)} }