/*-------------------------layout_dept.css------------------------------------*/ @charset "utf-8"; html, body {overflow:hidden;overflow-y:visible} body {overscroll-behavior:auto;-webkit-text-size-adjust:100%;scroll-behavior:smooth} .div-cont {max-width:1400px;margin:0 auto;position:relative} .eng {font-family: "ivymode", sans-serif} #doc-wrap {position:relative;min-width:1400px;max-width:1920px;overflow:hidden;margin:0 auto} a:focus-visible, button[type="button"]:focus-visible {outline:rgb(59, 153, 252) solid 3px;outline-offset:-3px} a:focus:not(:focus-visible), button[type="button"]:not(:focus-visible) {outline:0} @media all and (max-width:1400px){ #doc-wrap {min-width:320px} } @media all and (max-width:680px){ } @media all and (max-width:420px){ } /* 스킵네비게이션 */ #skipNavi {height:0} #skipNavi .skipLink {position:absolute;top:-1000px;left:-1000px;overflow:hidden;z-index:5000} #skipNavi .skipLink:focus, #skipNavi .skipLink:active {top:0;left:0;padding:10px 20px;background:#1e64ba;color:#fff} #skipNavi .skipLink:focus-visible{outline:#da262e solid 3px} /* 레이아웃 */ #header-wrap {position:relative;height:140px;box-sizing:border-box;z-index:11111;font-family:"ivymode", sans-serif} .isSub #header-wrap {background-color:#ffffff} #header {position:relative;height:100%;} @media all and (min-width:1000px) { #header-wrap:before {display:block;content:'';position:absolute;top:140px;left:0;width:100%;height:0;background:rgba(0, 0, 0, .5);z-index:11;opacity:0;transition:opacity .3s ease} #header-wrap.bgShow:before {height:3000px;opacity:1} #header-wrap.bgHide:before {opacity:0} } @media all and (min-width:1000px) and (max-width:1399px) { .isMain #header-wrap {/*background-color:#006ee9*/} } @media all and (max-width:999px) { #header-wrap {height:70px} #header {background-color:#fff;box-shadow: 0px 1px 20px 0px rgba(144, 156, 187, 0.4);} } /* svisual */ #svisual-wrap {position:relative;box-sizing:border-box;/*z-index:9*/} #svisual-wrap .svis {position:relative;width:100%;margin:0 auto;box-sizing:border-box} #svisual-wrap .svis:after {content:'';display:block;width:2px;height:25%;background-color:#D9D9D9;position:absolute;bottom:0;left:50%;transform:translateX(-50%);z-index:5;transition:all .4s ease .8s;opacity:0} #svisual-wrap .svis .img-box {position:relative;padding-top:21.4%;transition:all .3s} #svisual-wrap .svis .img-box img {display:block;width:100%;height:100%;position:absolute;left:50%;top:0;transform:translateX(-50%);z-index:1} #svisual-wrap .svis .txt-box {position:absolute;top:0;left:0;width:100%;height:100%;box-sizing:border-box;z-index:2} #svisual-wrap .svis .txt-box .txt-pkg {display:flex;flex-direction:column;justify-content:center;height:100%;text-align:center;} #svisual-wrap .svis .txt-box .txt-pkg > span {display:block;line-height:1.2;opacity:0;transform:translateY(30px)} #svisual-wrap .svis .txt-box .txt-pkg .tit {font-family:"Spoqa Han Sans Neo", sans-serif;color:#fff;font-size:30px;font-weight:400;line-height:1;transition:all .4s ease .2s} #svisual-wrap .svis .txt-box .txt-pkg .txt {font-family: "ivymode", sans-serif;color:#fff;font-size:70px;font-weight:300;line-height:1;letter-spacing:-1.5px;transition:all .4s ease .4s} #svisual-wrap .svis .txt-box .txt-pkg .tit + .txt {margin-top:30px} #svisual-wrap .svis .txt-box .txt-pkg .txt + .tit {margin-top:20px} .loaded #svisual-wrap .svis .txt-box .txt-pkg .txt, .loaded #svisual-wrap .svis .txt-box .txt-pkg .tit {opacity:1;transform:translateY(0)} .loaded #svisual-wrap .svis:after {opacity:1} @media all and (max-width:1399px) { #svisual-wrap .svis .img-box {padding-top:31.5%} #svisual-wrap .svis .txt-box .txt-pkg .txt {font-size:60px} #svisual-wrap .svis .txt-box .txt-pkg .tit {font-size:18px} #svisual-wrap .svis .txt-box .txt-pkg .tit + .txt {margin-top:20px} #svisual-wrap .svis .txt-box .txt-pkg .txt + .tit {margin-top:15px} #svisual-wrap .svis .img-box img {width:auto} } @media all and (max-width:999px) { #svisual-wrap .svis:after {height:20%} #svisual-wrap .svis .txt-box .txt-pkg .txt {font-size:50px} } @media all and (max-width:786px) { #svisual-wrap .svis .img-box {padding-top:35.5%} } @media all and (max-width:699px) { #svisual-wrap .svis .txt-box .txt-pkg .tit + .txt {font-size:34px;margin-top:10px} #svisual-wrap .svis .txt-box .txt-pkg .txt + .tit {margin-top:10px} } @media all and (max-width:599px) { #svisual-wrap .svis .txt-box .txt-pkg {flex-direction:column-reverse} #svisual-wrap .svis .txt-box .txt-pkg .tit {margin-top:10px;font-weight:300} #svisual-wrap .svis .txt-box .txt-pkg .tit + .txt {font-size:26px;margin-top:0} } @media all and (max-width:400px) { #svisual-wrap .svis:after {height:24%} #svisual-wrap .svis .img-box {padding-top:40%} #svisual-wrap .svis .txt-box .txt-pkg .txt {font-weight:200} #svisual-wrap .svis .txt-box .txt-pkg .tit + .txt {font-size:20px} } /* cont-navi */ #contNavi {width:100%;height:70px;padding:0 20px;box-sizing:border-box;background:#016eed;transition:all .4s ease .6s;z-index:12} #contNavi .cont-navi {max-width:1400px;height:100%;margin:0 auto;display:flex;flex-flow:row wrap} #contNavi a.home {display:block;position:relative;width:36px;height:100%;z-index:99;} #contNavi a.home:before {display:block;content:'';position:absolute;top:50%;left:0;margin-top:-18px;width:36px;height:36px;background:rgba(255,255,255,0.2);border-radius:50%;transition:all .3s ease;} #contNavi a.home:after {display:block;content:'';position:absolute;top:50%;left:9px;margin-top:-8px;width:18px;height:16px;background:url(/resources/_Templet/Layout/layout_dept/Img/layout_spr.png) no-repeat -30px 0;} #contNavi a.home:focus:before, #contNavi a.home:hover:before {background:#22264C;} #contNavi dl {position:relative;z-index:99;} #contNavi dl dt a {display:flex;align-items:center;position:relative;min-width:190px;height:70px;padding:0 45px 0 20px;transition:all .3s ease;box-sizing:border-box} #contNavi dl dt a:after {content:"";display:block;position:absolute;top:50%;right:23px;margin-top:-6px;border:solid;border-width:0 0 2px 2px;border-color:transparent transparent #fff #fff;width:6px;height:6px;transform:rotate(-45deg);transition:all .3s ease} #contNavi dl dt a:before {content:"";display:block;position:absolute;top:50%;right:0;margin-top:-16px;width:1px;height:32px;background:#cfcfcf;opacity:0.6;transition:all .3s ease} #contNavi dl dt a .txt {display:inline-block;position:relative;color:#fff;font-size:17px;font-weight:500;line-height:1.2;letter-spacing:-.05em;transition:all .3s ease} #contNavi dl.cnavi1 dt a {} #contNavi dl dt a:hover:after, #contNavi dl.over dt a:after {margin-top:-3px;transform:rotate(135deg)} #contNavi .sub-list {display:none;position:absolute;top:100%;left:0;background-color:#fff;border-radius:20px;border-bottom-right-radius:0;min-width:190px;padding:20px 24px;box-shadow:0 10px 30px 0 rgba(0, 0, 0, .1);box-sizing:border-box} #contNavi .sub-list ul {} #contNavi .sub-list li .mn_a1 {position:relative;display:block;padding:6px 0;color:#555;font-size:15px;font-weight:500;text-align:left;transition:all .3s ease} #contNavi .sub-list li .mn_a1 span {display:inline-block;line-height:1.2} #contNavi .sub-list li .mn_a1[target='_blank']:after {display:inline-block;content:"";width:12px;height:12px;vertical-align:middle;margin:0 0 1px 10px;background:url(/images/homepage/Common/nwin_spr.png) no-repeat -44px 0} #contNavi .sub-list li.isOver a span, #contNavi .sub-list li .mn_a1:hover {color:#006ee9} #contNavi .sub-list li .mn_a1[target='_blank']:hover:after {background-position:-66px 0} #contNavi .sub-list .btn-close {display:block;position:absolute;right:0;top:100%;background-color:#fff;border:0;width:30px;height:30px} #contNavi .sub-list .btn-close:before, #contNavi .sub-list .btn-close:after {content:"";display:block;position:absolute;width:14px;height:2px;background:#777;top:0;right:0;bottom:0;left:0;margin:auto;transition:all .3s ease} #contNavi .sub-list .btn-close:before {transform:rotate(45deg)} #contNavi .sub-list .btn-close:after {transform:rotate(135deg)} #contNavi .sub-list .btn-close:hover:before {transform:rotate(135deg);background:#000} #contNavi .sub-list .btn-close:hover:after {transform:rotate(225deg);background:#000} @media all and (max-width:999px) { #contNavi {display:none} } /* contents */ #container-wrap {z-index:1} #container {position:relative;transition:all .3s;/*z-index:9*/} #container .cont-sub-navi {position:absolute;left:0;top:43px;width:200px;display:none;} #container .cont-sub-navi:before {content:"";display:block;position:absolute;right:calc(100% - 20px);top:0;background-color:#0091dc;border-radius:30px;width:97px;height:100%} #container .cont-sub-navi > ul {padding:27px 0 27px 40px} #container .cont-sub-navi > ul > li {padding:11px 0 12px} #container .cont-sub-navi > ul > li > a {display:block;color:#5e5e5e;font-size:17px;font-weight:500;letter-spacing:-.05em;transition:all .3s ease;box-sizing:border-box} #container .cont-sub-navi > ul > li.on > a {position:relative;padding-left:30px} #container .cont-sub-navi > ul > li.on > a:before {content:"";display:block;position:absolute;left:0;top:-3px;background:#004591 url(/resources/_Templet/Layout/layout_kor/Img/layout_spr.png) no-repeat -352px 0;border-radius:50%;width:21px;height:21px} #container .cont-sub-navi > ul > li.on > a, #container .cont-sub-navi > ul > li > a:hover {color:#004591} #container .cont-sub-navi.fixed {position:fixed} #container .cont-sub-navi.orgin {position:absolute;top:auto;bottom:40px} #contents {position:relative;width:100%;max-width:1400px;min-height:600px;margin:70px auto 0;box-sizing:border-box} #contents .cont-top {position:relative;margin-bottom:50px} #contents .cont-top .cont-tit {color:#111;font-size:48px;font-weight:700;line-height:1.2em;font-family:"Gmarket Sans", sans-serif;letter-spacing:-0.05em;text-align:center;} #contents .cont-top .cont-util {position:absolute;right:0;top:-115px;z-index:15} #contents .cont-top .cont-util button {background:none;border:0;border-radius:15px;width:45px;height:45px} #contents .cont-top .cont-util button:before {content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;background:url(/resources/_Templet/Layout/layout_dept/Img/layout_spr.png) no-repeat;margin:auto} #contents .cont-top .cont-util .box-util {display:flex;flex-flow:row wrap;align-items:center;position:relative} #contents .cont-top .cont-util .box-util .unit {position:relative;margin-left:10px} #contents .cont-top .cont-util .box-util .unit > .btn-cast {display:block;position:relative;background-color:#fff;box-shadow: 0px 1px 20px 0px rgba(144, 156, 187, 0.4);transition:all .3s} #contents .cont-top .cont-util .box-util .unit > .btn-cast:before {background-position-y:-33px;width:19px;height:18px;z-index:2} #contents .cont-top .cont-util .box-util .unit > .btn-cast:hover {} #contents .cont-top .cont-util .box-util .unit .btn-sns {} #contents .cont-top .cont-util .box-util .unit .btn-sns:before {background-position-x:0} #contents .cont-top .cont-util .box-util .unit .btn-sns:hover {background-color:#006ee9} #contents .cont-top .cont-util .box-util .unit .btn-sns:hover:before {background-position-x:-87px} #contents .cont-top .cont-util .box-util .unit .btn-print {} #contents .cont-top .cont-util .box-util .unit .btn-print:before {background-position-x:-29px} #contents .cont-top .cont-util .box-util .unit .btn-print:hover {background-color:#ffd44d} #contents .cont-top .cont-util .box-util .unit .btn-print:hover:before {background-position-x:-116px} #contents .cont-top .cont-util .box-util .unit .btn-share {} #contents .cont-top .cont-util .box-util .unit .btn-share:before {background-position-x:-58px} #contents .cont-top .cont-util .box-util .unit .btn-share:hover {background-color:#142e5d} #contents .cont-top .cont-util .box-util .unit .btn-share:hover:before {background-position-x:-145px} #contents .cont-top .cont-util .box-util .sns-list {display:none;position:absolute;top:100%;right:0;box-sizing:border-box;z-index:100} #contents .cont-top .cont-util .box-util .sns-list ul {display:block;margin-top:53px} #contents .cont-top .cont-util .box-util .sns-list li {margin-top:5px} #contents .cont-top .cont-util .box-util .sns-list button {display:block;position:relative;font-size:0;transition:all .3s ease} #contents .cont-top .cont-util .box-util .sns-list .btn-face {background-color:#2a569c} #contents .cont-top .cont-util .box-util .sns-list .btn-twit {background-color:#55acef} #contents .cont-top .cont-util .box-util .sns-list .btn-blog {background-color:#1dc800} #contents .cont-top .cont-util .box-util .sns-list .btn-kaks {background-color:#fdd101} #contents .cont-top .cont-util .box-util .sns-list button:before {background-position-y:-132px;width:45px;height:45px;z-index:1} #contents .cont-top .cont-util .box-util .sns-list .btn-face:before {background-position-x:-55px} #contents .cont-top .cont-util .box-util .sns-list .btn-twit:before {background-position-x:-110px} #contents .cont-top .cont-util .box-util .sns-list .btn-blog:before {background-position-x:-165px} #contents .cont-top .cont-util .box-util .sns-list .btn-kaks:before {background-position-x:-220px} #contents .cont-top .cont-util .box-util .sns-list .sns-closer {position:absolute;left:0;top:3px;background:#1b1b1b} #contents .cont-top .cont-util .box-util .sns-list .sns-closer:before, #contents .cont-top .cont-util .box-util .sns-list .sns-closer:after {content:"";display:block;position:absolute;width:14px;height:2px;top:0;right:0;bottom:0;left:0;margin:auto;background:#fff;opacity:1;transition:all .3s ease} #contents .cont-top .cont-util .box-util .sns-list .sns-closer:before {transform:rotate(45deg)} #contents .cont-top .cont-util .box-util .sns-list .sns-closer:after {transform:rotate(135deg)} #contents .cont-top .cont-util .box-util .sns-list .sns-closer:focus:before, #contents .cont-top .cont-util .box-util .sns-list .sns-closer:hover:before, #contents .cont-top .cont-util .box-util .sns-list .sns-closer:focus:after, #contents .cont-top .cont-util .box-util .sns-list .sns-closer:hover:after {} #contents #cont {min-height:400px;padding:0 0 70px 0;color:#555;font-size:18px;font-weight:400;line-height:1.556;letter-spacing:-.05em;word-break:keep-all;word-wrap:break-word} #contents #cont:after {clear:both;content:"";display:block} #contents #cont input, button, select, textarea {color:#555;font-size:18px;font-family:"Spoqa Han Sans Neo", sans-serif;letter-spacing:-.04em} #contents #cont .c-tab01 {margin-top:0} @media all and (max-width:1799px) { #container {box-sizing:border-box} } @media all and (max-width:1459px) { #contents {padding:0 30px} } @media all and (max-width:1260px) { #container .cont-sub-navi {display:none} } @media all and (max-width:999px){ #container {z-index:9} #contents {width:auto;margin-top:50px;padding:0 20px} #contents #cont {font-size:16px;padding-bottom:40px} #contents #cont input, button, select, textarea {font-size:17px} #contents .cont-top {position:relative;margin-bottom:0;padding:26px 0 24px;text-align:center} #contents .cont-top:before {content:"";display:block;position:absolute;left:50%;top:0;background-color:#fff;width:2000px;height:100%;margin-left:-1000px;z-index:-1} #contents .cont-top .cont-tit {font-size:24px;line-height:1.2} #contents .cont-top .cont-util {position:relative;right:auto;top:auto;margin-top:10px} #contents .cont-top .cont-util .box-util {justify-content:center} #contents .cont-top .cont-util .box-util .unit {margin:0 4px} #contents .cont-top .cont-util button {width:36px;height:36px} #contents .cont-top .cont-util .box-util .unit > .btn-cast:before {background-position-y:-61px;width:17px;height:15px;} #contents .cont-top .cont-util .box-util .unit .btn-sns:hover:before {background-position-x:-81px} #contents .cont-top .cont-util .box-util .unit .btn-print:before {background-position-x:-27px} #contents .cont-top .cont-util .box-util .unit .btn-print:hover:before {background-position-x:-108px} #contents .cont-top .cont-util .box-util .unit .btn-share:before {background-position-x:-54px} #contents .cont-top .cont-util .box-util .unit .btn-share:hover:before {background-position-x:-135px} #contents .cont-top .cont-util .box-util .sns-list ul {margin-top:52px} #contents .cont-top .cont-util .box-util .sns-list li {margin-top:3px} #contents .cont-top .cont-util .box-util .sns-list button:before {background-position-y:-187px;width:36px;height:36px;z-index:1} #contents .cont-top .cont-util .box-util .sns-list .btn-face:before {background-position-x:-46px} #contents .cont-top .cont-util .box-util .sns-list .btn-twit:before {background-position-x:-92px} #contents .cont-top .cont-util .box-util .sns-list .btn-blog:before {background-position-x:-138px} #contents .cont-top .cont-util .box-util .sns-list .btn-kaks:before {background-position-x:-184px} #contents .cont-top .cont-util .box-util .sns-list .sns-closer {top:13px;} } @media all and (max-width:768px){ #container {z-index:1} #contents #cont {font-size:15px} #contents #cont input, button, select, textarea {font-size:16px} } @media all and (max-width:599px) { #contents #cont {font-size:14px} } @keyframes rotate { from {-webkit-transform: rotate(0deg)} to {-webkit-transform: rotate(359deg);} } @-webkit-keyframes rotate { from {-webkit-transform: rotate(0deg)} to {-webkit-transform: rotate(359deg);} } /* ============================== * 메인 하단 배너모음 공통 ================================= */ .mbnr-sec {background-color:rgba(193, 193, 199, .2);border-top:1px solid #c1c1c7;padding:20px 0;box-sizing:border-box} .mbnr-sec .mbnr-box {position:relative;width:100%;max-width:1440px;margin:0 auto;padding:0 20px 0 120px;box-sizing:border-box} .mbnr-sec .mbnr-box a {display:flex;align-items:center;justify-content:center;background-color:#fff;border:1px solid #ddd;border-radius:8px;height:72px;box-sizing:border-box;overflow:hidden} .mbnr-sec .mbnr-box a img {max-width:100%;height:auto} .mbnr-sec .mbnr-box a span {display:block;padding-top:3px;color:#333;font-size:1.056em;font-weight:600;line-height:1.2;text-align:center} .mbnr-sec .mbnr-box .data-ctrl {display:flex;align-items:center;position:absolute;left:20px;top:50%;margin-top:-13px} .mbnr-sec .mbnr-box .data-ctrl button, .mbnr-sec .mbnr-box .data-ctrl a {display:block;position:relative;background-color:#fff;border:1px solid #333;border-radius:50%;width:26px;height:26px;box-sizing:border-box} .mbnr-sec .mbnr-box .data-ctrl .data-auto {display:flex;align-items:center;margin:0 2px} .mbnr-sec .mbnr-box .data-ctrl .data-auto button {background-color:#333} .mbnr-sec .mbnr-box .data-ctrl button:before, .mbnr-sec .mbnr-box .data-ctrl button:after {content:"";display:block;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto} .mbnr-sec .mbnr-box .data-ctrl > button:before, .mbnr-sec .mbnr-box .data-ctrl > button:after {background:#333;border:0;width:2px;height:8px;transition:all .3s ease-out} .mbnr-sec .mbnr-box .data-ctrl .btn-prev:before {transform:translateY(-35%) rotate(45deg)} .mbnr-sec .mbnr-box .data-ctrl .btn-prev:after {transform:translateY(35%) rotate(-45deg)} .mbnr-sec .mbnr-box .data-ctrl .btn-next:before {transform:translateY(35%) rotate(45deg)} .mbnr-sec .mbnr-box .data-ctrl .btn-next:after {transform:translateY(-35%) rotate(-45deg)} .mbnr-sec .mbnr-box .data-ctrl .btn-stop:before {border:2px solid #fff;border-top:0;border-bottom:0;width:6px;height:10px;box-sizing:border-box} .mbnr-sec .mbnr-box .data-ctrl .btn-play {display:none} .mbnr-sec .mbnr-box .data-ctrl .btn-play:before {left:2px;border-width:5px 0 5px 7px;border-style:solid;border-color:transparent;border-left-color:#fff;width:0;height:0} /*-------------------------gnavi_dept.css------------------------------------*/ #gNavi {position:absolute;right:0;z-index:11112;} #gNavi .global-wrap {} #gNavi .glink-sec {position:absolute;right:0;top:0;padding-right:100px;z-index:2200;font-size:16px;font-weight:400;display:flex;flex-wrap:wrap;width:280px} #gNavi .glink-sec .glink-list {display:flex;align-items:center;height:140px;position:relative;white-space:nowrap;z-index:1100} #gNavi .glink-sec .glink-list > * {position:relative;display:inline-block;color:#363a3c;font-size:15px;margin:0 20px} #gNavi .glink-sec .glink-list > *:first-child {margin-left:0} #gNavi .glink-sec .glink-list .mall:after {content:'';display:inline-block;width:24px;height:24px;background-image:url(/images/homepage/Layout/shopping-cart.png);margin:-2px 0 0 7px;vertical-align:middle} #gNavi .glink-sec .glink-list .toppop-ctrl:after {display:none;} #gNavi .glink-sec .glink-list .btn-wctrl {display:inline-flex;align-items:center;font-size:14px;color:#0091dc;font-weight:700;border:0;background:none;} #gNavi .glink-sec .glink-list .btn-wctrl i {display:inline-block;padding:0 2px;min-width:20px;height:20px;margin-left:7px;line-height:20px;font-size:12px;color:#fff;font-weight:500;background:#0091dc;border-radius:50%;font-style:normal;box-sizing:border-box;} #gNavi .glink-sec .glink-list .btn-wctrl:after {display:block;content:'';position:absolute;top: calc(100% + 4px);right:0;width:0;height:1px;background:#0091dc;transition:all .3s ease;} #gNavi .glink-sec .glink-list .btn-wctrl:focus:after, #gNavi .glink-sec .glink-list .btn-wctrl:hover:after {left:0;right:auto;width:100%;} #gNavi .glink-sec .srvc-util {display:flex;flex-wrap:wrap;align-items:center;position:relative} #gNavi .glink-sec .srvc-util .amenu {display:block;width:36px;height:30px;font-size:0;border:0;box-sizing:border-box;position:relative} #gNavi .glink-sec .srvc-util .amenu:before, #gNavi .glink-sec .srvc-util .amenu:after {content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;background:#333;width:36px;height:2px;font-size:0;transition:all .3s ease} #gNavi .glink-sec .srvc-util .amenu:before {margin:8px auto auto auto} #gNavi .glink-sec .srvc-util .amenu:after {left:0;margin:auto auto 8px auto} #gNavi .glink-sec .srvc-util .amenu:focus:before, #gNavi .glink-sec .srvc-util .amenu:hover:before {left:-8px;width:15px;} #gNavi .glink-sec .srvc-util .amenu:focus:after, #gNavi .glink-sec .srvc-util .amenu:hover:after {left:0;width:23px;} #gNavi #gsel-lang {color:#5C6064;position:relative} #gNavi #gsel-lang:before {display:block;content:'';position:absolute;top:50%;left:-20px;width:1px;height:14px;background:#ccc;transform:translateY(-50%);} #gNavi #gsel-lang dt {display:inline-block} #gNavi #gsel-lang dt .lengPkg:after {content:"";display:inline-block;position:relative;top:50%;right:-10px;border:solid;border-width:0 0 1px 1px;border-color:transparent transparent #5C6064 #5C6064;width:6px;height:6px;transform:rotate(-45deg) translateY(-50%);transition:all .3s ease} #gNavi #gsel-lang dd ul {display:none;position:absolute;bottom:-20px;left:0} #gNavi #gsel-lang .lengPkg.is-open:after {transform:rotate(-225deg) translateY(-50%);} #gNavi .glink-sec .glink-list .login, #gNavi .glink-sec .glink-list .logout {color:#5C6064;margin-left:10px} @media all and (max-width:1699px) { #gNavi .glink-sec {padding-right:30px} } @media all and (max-width:1499px) { #gNavi .glink-sec {top:10px} #gNavi .glink-sec .glink-list {height:auto} #gNavi .glink-sec {padding-right:0;margin-right:-50px} #gNavi .glink-sec .srvc-util {top:60px;right:60px} } @media all and (max-width:999px) { #gNavi {display:none;} } /*-------------------------logo_dept.css------------------------------------*/ #header .logo {display:block;position:absolute;left:50px;top:50%;transform:translateY(-50%);z-index:101} #header .logo .logoWr {display:inline-flex;align-items:center;} #header .logo a {display:inline-block} #header .logo a img {display:block;height:auto} @media all and (max-width:1699px) { #header .logo {left:30px} } @media all and (max-width:1499px) { #header .logo {left:20px} } @media all and (max-width:1199px) { #header .logo .slogo {width:70px;height:70px} #header .logo .slogo img {width:100%} #header .logo {left:10px} } @media all and (max-width:999px) { #header .logo .slogo {width:55px;height:51px} #header .logo {left:20px} } /*-------------------------header_dept.css------------------------------------*/ #menu-wrap .mGnavi {display:none} #menu-wrap .mDeco {display:none} /* 메뉴 */ #menu-wrap {display:inline-block;position:relative;width:100%;background:transparent;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} #menu-wrap .menuReady {} #mainNavi a[target=_blank] span:after {content:"";display:inline-block;background:url(/images/homepage/Common/nwin_spr.png) no-repeat;width:12px;height:12px;vertical-align:middle;} #mainNavi .mn_a2[target=_blank] span:after {margin-left:4px} #mainNavi .mn_a2[target=_blank]:focus span:after, #mainNavi .mn_a2[target=_blank]:hover span:after {} #mainNavi .mn_a3[target=_blank] span:after {background-position-x:-44px;margin:0 0 4px 7px} #mainNavi .mn_a3[target=_blank]:hover span:after, #mainNavi .mn_a3[target=_blank].over span:after {} @media all and (min-width:1000px) { #mainNavi .mn_a1[target=_blank] span:after {margin:-2px 0 0px 7px} #mainNavi .mn_a1[target=_blank]:hover span:after, #mainNavi .mn_a1[target=_blank].over span:after {background-position-x:-66px} } @media all and (max-width:999px) { #mainNavi .mn_a1[target=_blank] span:after {background-position-x:-22px;margin:-1px 0 0 5px} #mainNavi .mn_a2[target=_blank] span:after {background-position:-42px 0;background-size:auto 18px} } /* 주메뉴 */ @media all and (min-width:1000px) { #mainNavi-wrap #menu-wrap {transition:all .5s ease;background-color:transparent} #mainNavi-wrap #menu-wrap .sns-list-m {display:none} /*#mainNavi-wrap.over #menu-wrap {background-color:#fff}*/ #menu-wrap {background:transparent} .isSub #header-wrap {background-color:#fff} #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:transparent;height:140px;transform:translateX(-50%);text-align:center;overflow:hidden;z-index:100;width:100%;transition:all .5s} #mainNavi-wrap.over {background:#fff;box-shadow:0px 20px 15px 0px rgba(0, 0, 0, 0.1)} #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 */} #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);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 {text-align:center} .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:140px;width:100%;margin-left:-50px} #mainNavi .mn_li1 {display:inline-block;text-align:center;vertical-align:top;width:auto;box-sizing:border-box;transition:all .3s ease} #mainNavi .mn_a1 {position:relative;display:block;padding:55px 20px 60px 20px;height:100%;transition:all .3s ease;} #mainNavi .mn_a1 > span {display:inline-block;line-height:1.3;font-size:20px;font-weight:500;color:#303336;letter-spacing:-.01em;transition:all .3s ease} #mainNavi .mn_a1:after {content:"";display:block;position:absolute;left:0;right:0;bottom:0;background-color:#303336;width:0;height:5px;margin:0 auto;transition:all .3s ease;z-index:5556} #mainNavi .mn_li1 .mn_a1:hover, #mainNavi .mn_li1 .mn_a1:hover span, #mainNavi .mn_li1.over .mn_a1 span {color:#303336} #mainNavi .mn_a1:hover:after, #mainNavi .mn_a1:focus:after {left:0;width:63px;bottom:0} #mainNavi .mn_li1.over .mn_a1:after {left:0;width:63px} #mainNavi-wrap.over .mn_li1 .mn_a1 {width:165px;padding:55px 0 60px 0;margin:0 auto} #mainNavi .depth2-wrap {text-align:center;display:none;position:relative;transition:all .3s ease;font-family:"Spoqa Han Sans Neo", sans-serif} #mainNavi-wrap.over .mn_li1 .depth2-wrap {width:170px;display:block} #mainNavi .depth2-wrap .depth2-ul {display:block;padding:30px 0;margin:0 auto} #mainNavi-wrap.over .depth1-ul {margin-left:-100px} #mainNavi .depth2-wrap .mn_li2 {display:block;margin:0 0 5px} #mainNavi .depth2-wrap .mn_li2:last-child {margin:0} #mainNavi .depth2-wrap .mn_a2 {position:relative;display:block;padding:0;transition:all .3s ease} #mainNavi .depth2-wrap .mn_li2.has-sub .mn_a2:before {content:"";display:block;position:absolute;right:3px;top:4px;background-color:#d0d0d0;border-radius:50%;width:16px;height:16px;box-sizing:border-box;background-image:url(/resources/_Templet/Layout/layout_kor/Img/layout_slc.png);background-position:-251px 0} #mainNavi .depth2-wrap .mn_li2.has-sub.over .mn_a2:before, #mainNavi .depth2-wrap .mn_li2.has-sub.d3-open .mn_a2:before {background-color:#eb6101;background-position:-277px 0} #mainNavi .depth2-wrap .mn_li2.has-sub.d3-open .mn_a2 span {color:#111} #mainNavi .depth2-wrap .mn_a2 span {display:inline-block;position:relative;font-size:17px;text-align:center;color:#6C6C6C;line-height:1.2;letter-spacing:-.051px;transition:all .3s ease;font-weight:400;white-space:nowrap;padding-bottom:10px} .translated-ltr #mainNavi .depth2-wrap .mn_a2 span {white-space:wrap} #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 span:before {content:'';display:block;width:0;height:1px;background-color:#111;position:absolute;bottom:0;left:0;transition:all .3s ease} #mainNavi .depth2-wrap .mn_a2.over span, #mainNavi .depth2-wrap .mn_a2:hover span, #mainNavi .depth2-wrap .mn_a2:focus span {color:#111} #mainNavi .depth2-wrap .mn_a2.over span:before, #mainNavi .depth2-wrap .mn_a2:hover span:before, #mainNavi .depth2-wrap .mn_a2:focus span:before {left:0;width:100%} #mainNavi .depth3-wrap {display:none} #mainNavi .depth3-wrap {margin:1px 0 0 0;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:#999;font-size:14px;letter-spacing:-.01em;line-height:1.4;transition:all .3s ease;position:relative} #mainNavi .depth3-wrap .over.mn_a3 span, #mainNavi .depth3-wrap .mn_a3:hover span, #mainNavi .depth3-wrap .mn_a3:focus span {color:#111} #mainNavi .depth3-wrap .mn_a3:hover span:after, #mainNavi .depth3-wrap .mn_a3:focus span:after {content:'';display:block;width:100%;height:1px;background-color:#111;position:absolute;bottom:0;left:0} #mainNavi .tgl-btn {display:none} #header-wrap .tmn-bg {position:absolute;left:0;top:128px;width:100%;height:0;background:#f3f4f7;border-bottom:1px solid #323b50;z-index:400} #menu-wrap .allmn-btn {position:absolute;left:0;top:20px;width:49px;height:48px;border:1px solid #ccc;background:#fff;display:none} #menu-wrap .allmn-btn:before, #menu-wrap .allmn-btn:after, #menu-wrap .allmn-btn .txt:before {content:"";display:block;width:21px;height:2px;background:#5a5a5a;margin-left:14px;transition:all .3s ease} #menu-wrap .allmn-btn:before {margin-bottom:5px;margin-top:16px} #menu-wrap .allmn-btn:after {margin-top:5px} #menu-wrap .allmn-btn:hover:before, #menu-wrap .allmn-btn:hover:after {width:14px;background:#0d5db2} #menu-wrap .allmn-btn:hover .txt:before {width:18px;margin-left:20px;background:#0d5db2} #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(/images/homepage/Common/nwin_spr.png) no-repeat -90px -240px} #mainNavi-wrap .toppop-ctrl button.btn-wctrl {background-color:#346dad} #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(/images/homepage/Common/nwin_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 (min-width:1000px) and (max-width:1699px) { /* #mainNavi .mn_li1 {width:150px} */ #mainNavi {margin-left:-70px;} #mainNavi .mn_a1 {padding:55px 15px 60px 15px} #mainNavi-wrap.over .mn_li1 .mn_a1 {width:150px} #mainNavi .depth2-wrap .depth2-ul {width:150px} #mainNavi-wrap.over .mn_li1 .depth2-wrap {width:150px} #mainNavi .depth2-wrap .mn_a2 span {font-size:16px;white-space:wrap} #mainNavi .mn_a1 > span {font-size:18px} } @media all and (min-width:1000px) and (max-width:1599px) { } @media all and (min-width:1000px) and (max-width:1499px) { #mainNavi {margin-left:0} #mainNavi .mn_a1 {padding:73px 15px 45px 15px} #mainNavi-wrap.over .mn_li1 .mn_a1 {padding:73px 0 45px 0} #mainNavi-wrap.over .depth1-ul {margin-left:0} #mainNavi-wrap.over .mn_li1 .mn_a1 {width:auto} #mainNavi .depth2-wrap .depth2-ul {width:auto;max-width:140px} #mainNavi-wrap.over .mn_li1 .depth2-wrap {width:auto} #mainNavi .mn_li1 {padding:0 7px} } @media all and (min-width:1000px) and (max-width:1299px) { } @media all and (min-width:1000px) and (max-width:1199px) { #mainNavi .mn_a1 > span {font-size:17px} } @media all and (min-width:1000px) and (max-width:1099px) { } @media all and (max-width:999px) { body.mobile-sideMenu-open {position:fixed;width:100%;height:100%;overflow:hidden} /* 메뉴 */ #mainNavi-wrap {overflow:inherit;position:absolute;top:0;right:0;width:100%;height:0 !important;max-width:380px} #mainNavi-wrap * {outline:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)} #menu-wrap {position:fixed;right:-100%;top:0px;left:auto;width:100%;height:100%;max-width:340px;box-sizing:border-box;transition:right .5s ease, box-shadow .5s ease;overflow-x:hidden;z-index:8000} #menu-wrap.mn-h-open {right:0} #menu-wrap:before {content:"";display:none;position:absolute;top:0;right:0;width:100%;background-color:#006ee9;border-radius:20px 0 20px 20px;height:100%;box-sizing:border-box} #menu-wrap .mDeco {display:block;position:absolute;width:100%;height:100%;padding:70px 0 0 140px;transition:all .3s ease;box-sizing:border-box;z-index:-1} #menu-wrap.hide-mDeco .mDeco {opacity:0} /* #menu-wrap .is-open .depth2-wrap {display:block !important} */ #menu-wrap .mGnavi {display:block;align-items:center;position:absolute;left:0;top:0;width:100%;font-size:0;text-align:left;box-sizing:border-box;z-index:1} #menu-wrap .mGnavi h1 {margin:70px 0 20px 0;text-align:center} #menu-wrap .mGnavi ul {display:flex;align-items:center;padding-left:30px;} #menu-wrap .mGnavi ul li {position:relative;margin-left:25px;} #menu-wrap .mGnavi ul li:before {display:block;content:'';position:absolute;top:50%;left:-12px;width:1px;height:14px;background:rgba(255,255,255,0.4);transform:translateY(-50%);} #menu-wrap .mGnavi ul li:first-child {margin-left:0} #menu-wrap .mGnavi ul li:first-child:before {display:none;} #menu-wrap .mGnavi a {display:flex;align-items:center} #menu-wrap .mGnavi a span {display:block;position:relative;color:#fff;font-size:15px;box-sizing:border-box} #menu-wrap .mGnavi .langE span {font-size:14px;font-weight:700;} #menu-wrap .mGnavi .btn-wctrl {font-size:14px;font-weight:700;border:0;color:#fff;background:none;} #menu-wrap .glink-list {display:flex;align-items:center;justify-content:center;position:relative;white-space:nowrap;z-index:1100} #menu-wrap .glink-list > * {position:relative;display:inline-block;color:#363a3c;font-size:15px;margin:0 20px} #menu-wrap .glink-list > *:first-child {margin-left:0} #menu-wrap .glink-list .mall:after {content:'';display:inline-block;width:24px;height:24px;background-image:url(/images/homepage/Layout/shopping-cart.png);margin:-2px 0 0 7px;vertical-align:middle;\-webkit-filter: brightness(0) invert(1);filter: brightness(0) invert(1)} #menu-wrap #gsel-lang {color:#5C6064;position:relative} #menu-wrap #gsel-lang:before {display:block;content:'';position:absolute;top:50%;left:-20px;width:1px;height:14px;background:#ccc;transform:translateY(-50%);} #menu-wrap #gsel-lang dt {display:inline-block} #menu-wrap #gsel-lang dt .lengPkg:after {content:"";display:inline-block;position:relative;top:50%;right:-10px;border:solid;border-width:0 0 1px 1px;border-color:transparent transparent #fff #fff;width:6px;height:6px;transform:rotate(-45deg) translateY(-50%);transition:all .3s ease} #menu-wrap #gsel-lang dd ul {display:none;position:absolute;bottom:-20px;left:0;padding-left:0} #menu-wrap #gsel-lang .lengPkg.is-open:after {transform:rotate(-225deg) translateY(-50%);} #menu-wrap .glink-sec .glink-list .login, #menu-wrap .glink-sec .glink-list .logout {color:#5C6064;margin-left:10px} #menu-wrap .btn-close {display:block;position:absolute;top:0;right:0;background-color:transparent;border:0;width:70px;height:70px} #menu-wrap .btn-close:before, #menu-wrap .btn-close:after {content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;background-color:#fff;width:35px;height:2px;margin:auto} #menu-wrap .btn-close:before {transform:rotate(45deg)} #menu-wrap .btn-close:after {transform:rotate(135deg)} #menu-wrap .btn-close:hover:before, #menu-wrap .btn-close:hover:after {animation:btnAni .4s;} #menu-wrap .allmn-btn {display:none} #mainNavi {display:block;position:absolute;width:100%;height:100%;box-sizing:border-box;padding-top:175px;overflow-y:auto;z-index:0;background-color:#1D1F22} #mainNavi .mn_li1.over:before {display:none} #mainNavi .depth1-wrap {position:relative;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;box-sizing:border-box} #mainNavi .depth1-ul {position:relative;box-sizing:border-box;z-index:1;padding:10px 30px 30px} #mainNavi .mn_li1.first {margin-top:0} #mainNavi .mn_li1 .tgl-btn {display:none} #mainNavi .mn_li1 .mn_a1 {display:flex;align-items:center;position:relative;width:100%;height:43px;box-sizing:border-box;z-index:300} #mainNavi .mn_li1 .mn_a1 span {position:relative;display:inline-block;width:100%;color:#fff;font-size:22px;font-weight:500;line-height:1.2;word-wrap:break-word;word-break:keep-all;box-sizing:border-box;white-space:normal;vertical-align:middle;text-align:center;transition:all .3s ease} #mainNavi .mn_li1 .mn_a1 span:before {display:block;content:'';position:absolute;bottom:-15px;left:50%;width:8px;height:8px;border-bottom:1px solid #fff;opacity:0;transition:all .5s ease;border-right:2px solid #8c8c8c;transform:rotate(225deg) translateX(3px);transition:all .3s ease;} #mainNavi .mn_li1 .mn_a1[target=_blank] span:after {position:absolute;right:16px;top:50%;margin-top:-6px;background-position-x:-44px} #mainNavi .mn_li1 .mn_a1[target=_blank] span:before {display:none;} #mainNavi .mn_li1 .mn_a1.over {border-color:#22264c;background:#22264c;box-shadow:0 13px 28px 0 rgba(144, 156, 187, .4);} #mainNavi .mn_li1 .mn_a1.over span {color:#fff;} #mainNavi .mn_li1 .mn_a1.over span:before {border-color:#fff;} #mainNavi .mn_li1.is-open .mn_a1.over span {color:#fff;} #mainNavi .mn_li1.is-open .mn_a1.over span:before {border-color:#fff;transform:rotate(225deg);} #mainNavi .mn_li1.is-open .mn_a1 {border-color:#22264c;} #mainNavi .mn_li1.is-open .mn_a1 span {} #mainNavi .mn_li1.is-open .mn_a1 span:before {opacity:.8} #mainNavi .depth2-wrap {display:none;position:relative;width:100%;height:auto;transition:delay .3s ease;box-sizing:border-box} #mainNavi .depth2-wrap .depth2-tit {display:none} #mainNavi .depth2-ul {position:relative;padding:20px 0;box-sizing:border-box;z-index:100} #mainNavi .depth2-wrap .mn_li2 {position:relative;margin-bottom:12px} #mainNavi .depth2-wrap .mn_li2.has-sub .tgl-btn {display:block;position:absolute;right:5px;top:-8px;background:none;border:0;width:30px;height:30px;z-index:1;opacity:0;} #mainNavi .depth2-wrap .mn_li2.has-sub .tgl-btn:before {content:"";display:block;position:absolute;top:-4px;right:0;bottom:0;left:0;border:solid;border-width:0 0 2px 2px;border-color:transparent transparent #8c8c8c #8c8c8c;width:8px;height:8px;margin:auto;transform:rotate(-45deg);transition:all .3s } #mainNavi .depth2-wrap .mn_a2 {position:relative;display:flex;align-items:center;box-sizing:border-box;} #mainNavi .depth2-wrap .mn_a2 span {display:inline-block;width:100%;color:#fff;font-size:15px;line-height:1;word-wrap:break-word;word-break:keep-all;white-space:normal;text-align:center;color:#D9D9D9;font-weight:400} #mainNavi .depth2-wrap .mn_li2.is-close .depth3-wrap {display:none} #mainNavi .depth2-wrap .depth3-wrap {padding:10px 14px 0 14px;} #mainNavi .depth2-wrap .depth3-wrap li {position:relative;box-sizing:border-box;} #mainNavi .depth2-wrap .depth3-wrap li a {display:block;position:relative;color:#777777;font-size:15px;box-sizing:border-box;padding-left:12px;} #mainNavi .depth2-wrap .depth3-wrap li a:before {content:"";display:block;position:absolute;left:0;top:10px;background-color:#b9b9b9;width:5px;height:2px} #mainNavi .depth2-wrap .depth3-wrap li a span {display:inline-block;position:relative;padding:3px 0;line-height:1.2} #mainNavi .depth2-wrap .depth3-wrap li.over a {} #mainNavi .depth2-wrap .depth3-wrap li .mn_a3.over span {color:#006ee9} #mainNavi .depth2-wrap .depth3-wrap li .mn_a3.over:before {background-color:#006ee9;} #mn-ctrs-btns {display:block;position:absolute;right:0;top:0;z-index:502} #mn-ctrs-btns .mn-ctrs-btn {display:block;position:relative;border:0;width:70px;height:70px;box-sizing:border-box;background-color:#fff} #mn-ctrs-btns .mn-ctrs-btn:before, #mn-ctrs-btns .mn-ctrs-btn:after {content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;background:#333;width:30px;height:2px;font-size:0;transition:all .3s ease} #mn-ctrs-btns .mn-ctrs-btn:before {margin:28px auto auto auto} #mn-ctrs-btns .mn-ctrs-btn:after {left:0;margin:auto auto 28px auto} .body-slide-wr {position:relative;width:100%;height:100%;transition:margin 0.3s ease} .body-slider-ovclick {display:block;position:fixed;width:100%;height:0;left:0;top:0;background:rgba(0, 0, 0, .5);cursor:pointer;z-index:8;opacity:0;outline:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);transition:opacity .5s ease} .body-slider-ovclick.show {height:100%;opacity:1} .body-slider-ovclick.hide {opacity:0} #menu-wrap .sns-list-m {display:block;z-index:555;display:flex;flex-wrap:wrap;justify-content:center} #menu-wrap .sns-list-m li a {display:block;width:31px;height:30px;background-image:url(/images/homepage/Layout/sns_spr_m.png);font-size:0;margin-right:20px;transition:all .3s ease;position:relative} #menu-wrap .sns-list-m li a:before {content:'';display:block;width:50px;height:50px;border-radius:50%;background-color:#000;opacity:.3;position:absolute;top:50%;left:50%;z-index:-1;;transform:translate(-50%,-50%) scale(0);transition:all .3s ease} #menu-wrap .sns-list-m li a.blog {background-position:-40px 0} #menu-wrap .sns-list-m li a.instagram {background-position:-80px 0} #menu-wrap .sns-list-m li a.youtube {background-position:-120px 0;margin-right:0} #menu-wrap .sns-list-m li a:hover:before, #menu-wrap .sns-list-m li a:focus:before {transform:translate(-50%,-50%) scale(1)} } /*-------------------------submenu_dept.css------------------------------------*/ #side-wrap {display:none} @media all and (max-width:768px){ #side-wrap {display:block;width:100%;padding:0;position:absolute;left:0;bottom:0;height:0;z-index:2} #leftmenu {height:auto;} #leftmenu .lm-tit {display:none} #leftmenu .lm_l1 {display:block;box-sizing:border-box} #leftmenu .lm_l1 .lm_a1 {display:none} #leftmenu .lm_l1 > .tgl-btn {display:none;position:absolute;width:55px;height:55px;background:rgba(0, 0, 0, .85);border:0;left:50%;bottom:0;transform:translateX(-50%)} #leftmenu .lm_l1 > .tgl-btn:after {content:"";display:block;position:absolute;width:8px;height:8px;border:solid;border-width:0 0 2px 2px;border-color:transparent transparent #fff #fff;transform:rotate(-45deg);top:0;right:0;bottom:0;left:0;margin:20px auto auto auto;transition:all .3s ease} #leftmenu .lm_l1.is-open > .tgl-btn:after {transform:rotate(135deg);margin:25px auto auto auto} #leftmenu .lm_l1.is-open .depth2 {box-shadow:0 10px 25px rgba(0, 0, 0, .1)} #leftmenu .depth2-wr {display:none;position:absolute;top:100%;left:0;width:100%;box-sizing:border-box;padding:0 20px;z-index:1000;} #leftmenu .depth2 {display:block;background:#e5e5e5;transition:all .3s ease} #leftmenu .depth2 .lm_l2 {display:block;box-sizing:border-box;position:relative;margin:0 0 2px;} #leftmenu .depth2 .lm_l2:last-child {margin:0;} #leftmenu .depth2 .lm_l2 .tgl-btn {display:block;position:absolute;width:40px;height:40px;border:0;right:0px;top:7px;z-index:1;background:transparent} #leftmenu .depth2 .lm_l2 .tgl-btn:before, #leftmenu .depth2 .lm_l2 .tgl-btn:after {content:"";display:block;position:absolute;width:20px;height:2px;background:#aaa;top:0;right:0;bottom:0;left:0;margin:auto;transition:all .3s ease} #leftmenu .depth2 .lm_l2 .tgl-btn:before {} #leftmenu .depth2 .lm_l2 .tgl-btn:after {transform:rotate(90deg)} #leftmenu .depth2 .lm_l2 .lm_a2 {display:block;position:relative;background:#fff;box-sizing:border-box;padding:15px 50px 15px 20px;z-index:0;transition:all .3s ease} #leftmenu .depth2 .lm_l2 .lm_a2 span {display:inline-block;box-sizing:border-box;position:relative;font-size:17px;color:#555;letter-spacing:-.05em;line-height:1.2} #leftmenu .depth2 .lm_l2 .lm_a2 span:after {content:"";display:block;position:absolute;width:5px;height:5px;background:#fff;border-radius:50%;left:100%;top:3px;margin:0 0 0 7px;opacity:0} #leftmenu .depth2 .lm_l2.over .lm_a2 {background:#0061ba} #leftmenu .depth2 .lm_l2.over .lm_a2 span {color:#fff} #leftmenu .depth2 .lm_l2.over .lm_a2 span:after {opacity:1} #leftmenu .depth2 .lm_l2.over .tgl-btn:before, #leftmenu .depth2 .lm_l2.over .tgl-btn:after {background:#fff !important} #leftmenu .depth2 .lm_l2.over.is-open .tgl-btn:before {} #leftmenu .depth2 .lm_l2.over.is-open .tgl-btn:after {transform:rotate(0deg)} #leftmenu .depth2 .lm_l2.is-open .tgl-btn:before {} #leftmenu .depth2 .lm_l2.is-open .tgl-btn:after {transform:rotate(0deg);background:#aaa} #leftmenu .depth3-wr {box-sizing:border-box;padding:10px 20px;} #leftmenu .depth3 {} #leftmenu .depth3 .lm_l3 {display:block;margin:0} #leftmenu .depth3 .lm_l3 .tbl-btn {} #leftmenu .depth3 .lm_l3 .lm_a3 {display:block;padding:5px 0 5px 12px;line-height:1;box-sizing:border-box;position:relative;} #leftmenu .depth3 .lm_l3 .lm_a3:before {content:"";display:block;position:absolute;width:6px;height:2px;background:#aaa;left:0;top:14px;} #leftmenu .depth3 .lm_l3 .lm_a3 span {display:inline-block;box-sizing:border-box;position:relative;font-size:16px;letter-spacing:-.05em;line-height:1.2} #leftmenu .depth3 .lm_l3 .lm_a3 span:after {content:"";display:block;position:absolute;width:5px;height:5px;background:#0061ba;border-radius:50%;left:100%;top:3px;margin:0 0 0 7px;opacity:0} #leftmenu .depth3 .lm_l3.over .lm_a3:before {background:#0061ba} #leftmenu .depth3 .lm_l3.over .lm_a3 span {color:#0061ba} #leftmenu .depth3 .lm_l3.over .lm_a3 span:after {opacity:1} } /*-------------------------footer_dept.css------------------------------------*/ #footer-wrap {position:relative;background-color:#242628;z-index:3000;font-family:"Spoqa Han Sans Neo", sans-serif;} #footer-wrap .ft-wr {position:relative;padding:53px 0;line-height:1.2;width:1786px;margin:0 auto;box-sizing:border-box;padding-left:180px} #footer-wrap .top-bt {display:block;position:fixed;bottom:-126px;right:72px;text-align:center;/*overflow:hidden;*/z-index:3500;transition:opacity .3s ease, bottom .3s ease, visibility .3s ease;visibility:hidden;opacity:0} #footer-wrap .top-bt .top-btT {display:block;position:relative;width:110px;height:245px;background-image:url(/images/homepage/Layout/btn_top.png);background-repeat:no-repeat;background-size:contain;z-index:1} #footer-wrap .top-bt.over {visibility:visible;opacity:1;bottom:30px} #footer-wrap .top-bt.over.end, #footer-wrap .top-bt.end {visibility:visible;opacity:1;bottom:113px} #footer-wrap .top-bt .top-btT:focus {outline-color:red} #footer-wrap .ft-info {box-sizing:border-box} #footer-wrap .ft-info .fti-logo {position:absolute;top:53px;left:0} #footer-wrap .ft-info .fti-logo a {display:inline-block} #footer-wrap .ft-info .fti-logo a img {display:block;height:auto} #footer-wrap .ft-info .fti-logo .slogo {padding-right:15px;} #footer-wrap .ft-info .fti-logo .slogoTxt {position:relative;padding-left:15px;font-size:20px;font-weight:700;color:#bbbcbe;} #footer-wrap .ft-info .fti-logo .slogoTxt:before {display:block;content:'';position:absolute;top:50%;left:0;width:1px;height:24px;background:rgba(255,255,255,0.1);transform:translateY(-50%);} #footer-wrap .ft-info .fti-addr {padding-top:22px;font-size:18px;font-weight:400;letter-spacing:-.9px;color:#B7B7B7;line-height:1.6} #footer-wrap .ft-info .fti-addr dl {display:flex;flex-wrap:wrap;box-sizing:border-box} #footer-wrap .ft-info .fti-addr dl > * {margin-right:20px} #footer-wrap .ft-info .fti-addr dl dt {color:#dbdbdb} #footer-wrap .ft-info .fti-addr ul {display:flex;flex-wrap:wrap;} #footer-wrap .ft-info .fti-addr ul li {margin-right:20px} #footer-wrap .ft-info .ft-sns {position:absolute;bottom:53px;right:0;z-index:2} #footer-wrap .ft-info .ft-sns ul {display:flex;flex-flow:row wrap;} #footer-wrap .ft-info .ft-sns ul li {margin-left:10px;} #footer-wrap .ft-info .ft-sns a {display:block;position:relative;width:40px;height:40px;font-size:0;color:transparent;transition:all .3s ease;background-image:url(/images/homepage/Layout/sns_spr.png);} #footer-wrap .ft-info .ft-sns a.blog {background-position:-50px 0} #footer-wrap .ft-info .ft-sns a.instagram {background-position:-100px 0} #footer-wrap .ft-info .ft-sns a.youtube {background-position:-150px 0} #footer-wrap .ft-info .ft-sns a:hover, #footer-wrap .ft-info .ft-sns a:focus {margin-top:-10px} #footer-wrap .ft-info .fts-fmls {} #footer-wrap .ft-info .fts-fmls .fmls-pkg {display:flex;flex-flow:row wrap} #footer-wrap .ft-info .fts-fmls .f-site {width:229px;} #footer-wrap .ft-info .fts-fmls .f-site dl {position:relative} #footer-wrap .ft-info .fts-fmls .f-site dl dt {} #footer-wrap .ft-info .fts-fmls .f-site dl dt button {display:flex;align-items:center;position:relative;background:transparent;border:1px solid rgba(255, 255, 255, .2);border-left:0;width:100%;height:55px;padding-left:18px;padding-right:40px;font-size:16px;text-align:left;box-sizing:border-box;transition:all .3s ease;} #footer-wrap .ft-info .fts-fmls .f-site:first-child dl dt button {border-left:1px solid rgba(255, 255, 255, .2)} #footer-wrap .ft-info .fts-fmls .f-site dl dt button span {color:#bbbcbe;transition:all .3s ease} #footer-wrap .ft-info .fts-fmls .f-site dl dt button .arr {display:block;position:absolute;top:50%;right:20px;margin-top:-7px;width:15px;height:15px;background:url(/resources/_Templet/Layout/layout_dept/Img/layout_spr.png) no-repeat -91px 0;transition:all .3s ease} #footer-wrap .ft-info .fts-fmls .f-site dl dt button.is-open, #footer-wrap .ft-info .fts-fmls .f-site dl dt button:focus, #footer-wrap .ft-info .fts-fmls .f-site dl dt button:hover {background:#121419;} #footer-wrap .ft-info .fts-fmls .f-site dl dd {display:none;position:absolute;width:100%;left:0;bottom:100%;box-sizing:border-box;background:#142e5d;box-sizing:border-box} #footer-wrap .ft-info .fts-fmls .f-site dl dd .sel {box-sizing:border-box;height:200px;overflow-x:hidden;overflow-y:auto;padding:9px 10px 9px 18px} #footer-wrap .ft-info .fts-fmls .f-site dl dd .sel ul {display:block;box-sizing:border-box} #footer-wrap .ft-info .fts-fmls .f-site dl dd .sel ul li {display:block;box-sizing:border-box;border-top:1px solid rgba(255, 255, 255, .1);} #footer-wrap .ft-info .fts-fmls .f-site dl dd .sel ul li:first-child {border-top:0} #footer-wrap .ft-info .fts-fmls .f-site dl dd .sel a {display:block;color:#fff;opacity:.6;padding:10px 0;text-align:left;transition:all .3s ease} #footer-wrap .ft-info .fts-fmls .f-site dl dd .sel a span {display:block;font-size:14px;letter-spacing:-.05em} #footer-wrap .ft-info .fts-fmls .f-site dl dd button {display:block;position:absolute;width:26px;height:26px;left:0;bottom:100%;border:0;background:#142e5d} #footer-wrap .ft-info .fts-fmls .f-site dl dd button:before, #footer-wrap .ft-info .fts-fmls .f-site dl dd button:after {content:"";display:block;position:absolute;width:12px;height:2px;background:#fff;top:0;right:0;bottom:0;left:0;margin:auto} #footer-wrap .ft-info .fts-fmls .f-site dl dd button:before {transform:rotate(45deg)} #footer-wrap .ft-info .fts-fmls .f-site dl dd button:after {transform:rotate(135deg)} #footer-wrap .fts-link {order:1} #footer-wrap .fts-link .arr {display:none} #footer-wrap .fts-link ul {display:flex;flex-flow:row wrap} #footer-wrap .fts-link ul li {position:relative;padding:0 0 0 20px;box-sizing:border-box} #footer-wrap .fts-link ul li:first-child {padding-left:0;} #footer-wrap .fts-link ul li:first-child:after {display:none} #footer-wrap .fts-link a {position:relative;display:block;color:#fff;font-size:18px;transition:all .3s ease;opacity:.6;letter-spacing:-.9px;font-weight:400;} #footer-wrap .fts-link a.privacy {opacity:1} #footer-wrap .fts-link a span {display:block;line-height:1} #footer-wrap .fts-link a:before {display:block;content:'';position:absolute;bottom:-3px;right:0;width:0;height:1px;background:#fff;opacity:0.5;transition:all .3s ease;} #footer-wrap .fts-link a:hover {color:#fff;} #footer-wrap .fts-link a:hover:before {left:0;width:100%;right:auto;} #footer-wrap .ft-svce {font-size:18px;color:#fff;opacity:.6;letter-spacing:-.9px;font-weight:300;margin-top:30px} #footer-wrap .ft-svce {display:flex;flex-wrap:wrap;justify-content:space-between} #footer-wrap .ft-svce .arimoa {position:absolute;bottom:53px;right:257px;display:flex;flex-wrap:wrap;align-items:end;line-height:1.6;color:#ffffff88} #footer-wrap .ft-svce .arimoa a {display:block;margin:0 10px 0 0} @media all and (max-width:1899px) { #footer-wrap .ft-wr {width:100%;padding:53px 40px 53px 180px} #footer-wrap .top-bt {right:40px} #footer-wrap .ft-info .fti-logo {left:40px} #footer-wrap .ft-info .ft-sns {right:40px} #footer-wrap .ft-svce .arimoa {right:240px} } @media all and (max-width:1399px) { #footer-wrap .ft-svce .arimoa {right:235px;font-size:16px} } @media all and (max-width:1099px) { #footer-wrap .ft-wr {width:100%;padding:53px 20px 90px 180px} #footer-wrap .top-bt {right:20px} #footer-wrap .ft-info .fti-logo {left:20px} #footer-wrap .ft-info .ft-sns {right:20px;bottom:79px} #footer-wrap .ft-svce .arimoa {right:20px;bottom:40px;text-align:right} #footer-wrap .ft-svce .arimoa a {margin:0} #footer-wrap .ft-svce .arimoa a img {width:77px;display:inline-block} } @media all and (max-width:999px) { #footer-wrap .top-bt.over.end, #footer-wrap .top-bt.end {bottom:145px} #footer-wrap .top-bt .top-btT {width:64px;height:140px} #footer-wrap .fts-link a {font-size:16px} #footer-wrap .ft-info .fti-addr {font-size:16px} #footer-wrap .ft-svce {font-size:16px} } @media all and (max-width:799px) { #footer-wrap .ft-info .fti-logo .slogo {width:70px;height:70px} #footer-wrap .ft-info .fti-logo .slogo img {width:100%} #footer-wrap .ft-wr {padding:40px 30px 80px 120px} #footer-wrap .top-bt {right:10px} #footer-wrap .top-bt.over.end, #footer-wrap .top-bt.end {bottom:81px} #footer-wrap .top-bt .top-btT {width:50px;height:111px} #footer-wrap .ft-info .fti-logo {top:40px} #footer-wrap .ft-info .ft-sns {bottom:40px} #footer-wrap .ft-info .ft-sns a {width:28px;height:28px;background-size:auto 28px} #footer-wrap .ft-info .ft-sns a.blog {background-position:-35px 0} #footer-wrap .ft-info .ft-sns a.instagram {background-position:-70px 0} #footer-wrap .ft-info .ft-sns a.youtube {background-position:-105px 0} #footer-wrap .ft-info .fti-addr {padding-top:15px} #footer-wrap .ft-svce {margin-top:20px} #footer-wrap .ft-svce .arimoa {right:174px} } @media all and (max-width:599px) { #footer-wrap .ft-wr {padding:130px 30px 110px} #footer-wrap .top-bt.over.end, #footer-wrap .top-bt.end {bottom:246px} #footer-wrap .ft-info .fti-logo {top:30px;left:50%;transform:translateX(-50%)} #footer-wrap .ft-info .fti-logo .slogo {padding-right:0} #footer-wrap .fts-link ul, #footer-wrap .ft-info .fti-addr dl, #footer-wrap .ft-info .fti-addr ul, #footer-wrap .ft-svce {justify-content:center;text-align:center} #footer-wrap .ft-info .ft-sns {top:unset;right:unset;left:50%;bottom:61px;transform:translateX(-50%)} #footer-wrap .ft-info .ft-sns ul li:first-of-type {margin-left:0} #footer-wrap .ft-svce .arimoa {left:50%;bottom:25px;font-size:14px;transform:translateX(-50%);width:100%;justify-content:center} } @media all and (max-width:499px) { #footer-wrap .top-bt.over.end, #footer-wrap .top-bt.end {bottom:30px} #footer-wrap .fts-link ul, #footer-wrap .ft-info .fti-addr dl, #footer-wrap .ft-info .fti-addr ul, #footer-wrap .ft-svce {font-size:12px} #footer-wrap .fts-link a {font-size:14px} #footer-wrap .ft-svce .arimoa {font-size:12px} #footer-wrap .ft-svce .arimoa a img {width:70px;vertical-align:bottom} } /* ============================== * 서브2 레이아웃 : isSub2 ================================= */ .isSub2 {} .isSub2 #header-wrap {background-color:transparent} .isSub2 #mainNavi .mn_li1 .mn_a1 span {color:#fff} .isSub2 #gNavi .glink-sec .glink-list > a {color:#fff} .isSub2 #gNavi .glink-sec .glink-list .mall:after {background-image:url(/images/homepage/Layout/shopping-cart-wt.png)} .isSub2 #gNavi #gsel-lang {color:#fff} .isSub2 #gNavi .glink-sec .glink-list .gsel-lang {color:#fff} .isSub2 #gNavi #gsel-lang dt .lengPkg:after {border-color:transparent transparent #fff #fff} .isSub2 #gNavi #gsel-lang dt .lengPkg > span, .isSub2 #gNavi #gsel-lang dd ul li a {color:#fff} .isSub2 #gNavi .glink-sec .srvc-util .amenu:before, .isSub2 #gNavi .glink-sec .srvc-util .amenu:after {background:#fff} .isSub2 #container-wrap {margin-top:-140px} .isSub2 #svisual-wrap {display:none} .isSub2 #contents {margin:0;padding:0;max-width:initial} /* over시 헤더문자 컬러 */ .isSub2 #header-wrap.over #gNavi .glink-sec .glink-list > a {color:#303336} .isSub2 #mainNavi .mn_li1 .mn_a1:hover, .isSub2 #mainNavi .mn_li1 .mn_a1:hover span, .isSub2 #mainNavi .mn_li1.over .mn_a1 span {color:#303336} .isSub2 #mainNavi-wrap.over .mn_li1 .mn_a1 span {color:#303336} .isSub2 #header-wrap.over #gNavi .glink-sec .glink-list .mall:after {background-image:url(/images/homepage/Layout/shopping-cart.png)} .isSub2 #header-wrap.over #gNavi #gsel-lang {color:#303336} .isSub2 #header-wrap.over #gNavi .glink-sec .glink-list .gsel-lang {color:#303336} .isSub2 #header-wrap.over #gNavi #gsel-lang dt .lengPkg:after {border-color:transparent transparent #303336 #303336} .isSub2 #header-wrap.over #gNavi #gsel-lang dt .lengPkg > span {color:#303336} .isSub2 #header-wrap.over #gNavi .glink-sec .srvc-util .amenu:before, .isSub2 #header-wrap.over #gNavi .glink-sec .srvc-util .amenu:after {background:#303336} @media all and (max-width:999px) { .isSub2 #header {background-color:transparent;box-shadow:none} .isSub2 #mn-ctrs-btns .mn-ctrs-btn {background-color:transparent} .isSub2 #mn-ctrs-btns .mn-ctrs-btn:before, .isSub2 #mn-ctrs-btns .mn-ctrs-btn:after {background-color:#fff} .isSub2 #mainNavi-wrap {max-width:initial} .isSub2 #mainNavi .mn_li1 .mn_a1 span:hover {color:#fff} .isSub2 #container-wrap {margin-top:-70px} } /* ============================== * 서브3 레이아웃 : isSub3 ================================= */ .isSub3 {} .isSub3 #svisual-wrap {height:260px;background-color:#F8F8F8} .isSub3 #svisual-wrap .svis-sec, .isSub3 #svisual-wrap .svis {height:100%} .isSub3 #svisual-wrap .svis:after {display:none} .isSub3 #svisual-wrap .svis .txt-box .txt-pkg {flex-direction:row;align-items:center;justify-content:space-between;max-width:1400px;margin:0 auto;box-sizing:border-box} .isSub3 #svisual-wrap .svis .txt-box .txt-pkg .tit {font-size:50px;color:#000;font-weight:500;letter-spacing:-2.5px} .isSub3 #svisual-wrap .svis .txt-box .txt-pkg .txt {font-size:160px;color:rgba(0, 102, 187, 0.30);font-weight:400;margin-top:0} .isSub3 #contents {margin-top:100px} @media all and (max-width:1460px) { .isSub3 #svisual-wrap .svis .txt-box .txt-pkg {padding:0 30px} .isSub3 #svisual-wrap .svis .txt-box .txt-pkg .tit {font-size:40px} .isSub3 #svisual-wrap .svis .txt-box .txt-pkg .txt {font-size:140px} } @media all and (max-width:1024px) { .isSub3 #svisual-wrap .svis .txt-box .txt-pkg {flex-direction:column-reverse;gap:10px;justify-content:center} .isSub3 #svisual-wrap .svis .txt-box .txt-pkg .tit {font-size:30px} .isSub3 #svisual-wrap .svis .txt-box .txt-pkg .txt {font-size:100px} } @media all and (max-width:999px) { .isSub3 #svisual-wrap .svis .txt-box .txt-pkg {padding:0 20px} .isSub3 #contents {margin-top:50px} } @media all and (max-width:768px) { .isSub3 #svisual-wrap {height:150px} .isSub3 #svisual-wrap .svis .txt-box .txt-pkg {gap:15px} .isSub3 #svisual-wrap .svis .txt-box .txt-pkg .tit {font-size:22px;margin-top:0} .isSub3 #svisual-wrap .svis .txt-box .txt-pkg .txt {font-size:50px} } /* ============================== * PC 전체메뉴 ================================= */ #all-menu-popup {visibility:hidden;opacity:0;position:fixed;left:0;top:0;width:0;height:0;background:#1b1b1b;z-index:15000;transition:all .4s ease} #all-menu-popup.is-open {visibility:visible;opacity:1;width:100%;height:100%} #all-menu-popup span {color:#fff !important;line-height:normal} #all-menu-popup .btn-closeAllMenu {position:absolute;right:84px;top:34px;width:70px;height:70px;border-radius:35px;background:#1D1F22 url(/images/homepage/Common/btn_close.png) no-repeat;background-position:center;transition:transform .4s ease} #all-menu-popup .btn-closeAllMenu:hover {transform:rotate(90deg)} #all-menu-popup .all-menu-inr {display:flex;width:100%;height:100%;box-sizing:border-box} #all-menu-popup .left-side {width:50%;height:100%;padding:0 40px;box-sizing:border-box;overflow-y:scroll} #all-menu-popup .left-side::-webkit-scrollbar {width:7px} #all-menu-popup .left-side::-webkit-scrollbar-thumb {background-color:#000} #all-menu-popup .left-side::-webkit-scrollbar-track {height:#ccc} #all-menu-popup .pc-all-bg {width:50%;height:100%;background:url(/images/homepage/Common/pc_all_bg.jpg) no-repeat;background-position:center;background-size:cover;box-sizing:border-box} #all-menu-popup .all-glink-list {display:block;align-items:center;position:relative;width:100%;font-size:0;text-align:left;box-sizing:border-box;z-index:1} #all-menu-popup .all-glink-list h1 {margin:55px 0 20px 0;text-align:center} #all-menu-popup .all-glink-list ul {display:flex;align-items:center;padding-left:30px;} #all-menu-popup .all-glink-list ul li {position:relative;margin-left:25px;} #all-menu-popup .all-glink-list ul li:before {display:block;content:'';position:absolute;top:50%;left:-12px;width:1px;height:14px;background:rgba(255,255,255,0.4);transform:translateY(-50%);} #all-menu-popup .all-glink-list ul li:first-child {margin-left:0} #all-menu-popup .all-glink-list ul li:first-child:before {display:none;} #all-menu-popup .all-glink-list a {display:flex;align-items:center} #all-menu-popup .all-glink-list a span {display:block;position:relative;color:#fff;font-size:15px;box-sizing:border-box} #all-menu-popup .all-glink-list .langE span {font-size:14px;font-weight:700;} #all-menu-popup .all-glink-list .btn-wctrl {font-size:14px;font-weight:700;border:0;color:#fff;background:none;} #all-menu-popup .glink-list {display:flex;align-items:center;justify-content:center;position:relative;white-space:nowrap;z-index:1100} #all-menu-popup .glink-list > * {position:relative;display:inline-block;color:#363a3c;font-size:15px;margin:0 20px} #all-menu-popup .glink-list > *:first-child {margin-left:0} #all-menu-popup .glink-list .mall:after {content:'';display:inline-block;width:24px;height:24px;background-image:url(/images/homepage/Layout/shopping-cart.png);margin:-2px 0 0 7px;vertical-align:middle;\-webkit-filter: brightness(0) invert(1);filter: brightness(0) invert(1)} #all-menu-popup #gsel-lang {color:#5C6064;position:relative} #all-menu-popup #gsel-lang:before {display:block;content:'';position:absolute;top:50%;left:-20px;width:1px;height:14px;background:#ccc;transform:translateY(-50%);} #all-menu-popup #gsel-lang dt {display:inline-block} #all-menu-popup #gsel-lang dt .lengPkg:after {content:"";display:inline-block;position:relative;top:50%;right:-10px;border:solid;border-width:0 0 1px 1px;border-color:transparent transparent #fff #fff;width:6px;height:6px;transform:rotate(-45deg) translateY(-50%);transition:all .3s ease} #all-menu-popup #gsel-lang dd ul {display:none;position:absolute;bottom:-20px;left:0;padding-left:0} #all-menu-popup #gsel-lang .lengPkg.is-open:after {transform:rotate(-225deg) translateY(-50%);} #all-menu-popup .glink-sec .glink-list .login, #all-menu-popup .glink-sec .glink-list .logout {color:#5C6064;margin-left:10px} #all-menu-popup .left-side .all-mainNavi {width:100%;height:100%;box-sizing:border-box} #all-menu-popup .depth1-wrap {max-width:840px;margin:50px auto 0} #all-menu-popup .depth1-wrap .depth1-ul {display:flex;flex-wrap:wrap;gap:1.3%;row-gap:40px} #all-menu-popup .depth1-wrap .depth1-ul .mn_li1 {width:24%;text-align:center} #all-menu-popup .depth1-wrap .depth1-ul .mn_li1 .mn_a1 {font-size:26px} #all-menu-popup .depth1-wrap .depth2-wrap {display:block !important} #all-menu-popup .depth2-wrap .depth2-ul {font-size:17px;margin-top:15px} #all-menu-popup .depth2-wrap .depth2-ul .mn_li2 {margin-bottom:10px} #all-menu-popup .depth2-wrap .depth2-ul .mn_li2 .mn_a2 {position:relative;letter-spacing:-.05em} #all-menu-popup .depth2-wrap .depth2-ul .mn_li2 .mn_a2:after {content:"";display:block;width:0;height:1px;background-color:#fff;position:absolute;left:0;bottom:0;transition:width .4s ease} #all-menu-popup .depth2-wrap .depth2-ul .mn_li2 .mn_a2:hover:after {width:100%} #all-menu-popup .sns-list-m {display:block;z-index:555;display:flex;flex-wrap:wrap;justify-content:flex-end;margin-top:50px} #all-menu-popup .sns-list-m li a {display:block;width:31px;height:30px;background-image:url(/images/homepage/Layout/sns_spr_m.png);font-size:0;margin-right:20px;transition:all .3s ease;position:relative} #all-menu-popup .sns-list-m li a:before {content:'';display:block;width:50px;height:50px;border-radius:50%;background-color:#000;opacity:.3;position:absolute;top:50%;left:50%;z-index:-1;;transform:translate(-50%,-50%) scale(0);transition:all .3s ease} #all-menu-popup .sns-list-m li a.blog {background-position:-40px 0} #all-menu-popup .sns-list-m li a.instagram {background-position:-80px 0} #all-menu-popup .sns-list-m li a.youtube {background-position:-120px 0;margin-right:0} #all-menu-popup .sns-list-m li a:hover:before, #all-menu-popup .sns-list-m li a:focus:before {transform:translate(-50%,-50%) scale(1)} .sns-list-m a[target=_blank] span:after {display:none !important} #all-menu-popup a[target=_blank] span:after {content:"";display:inline-block;background:url(/images/homepage/Common/nwin_spr.png) no-repeat;width:12px;height:12px;vertical-align:middle;} #all-menu-popup .mn_a2[target=_blank] span:after {margin-left:8px;background-position:-42px 0;background-size:auto 18px} #all-menu-popup .mn_a2 span br {display:none} @media all and (max-width:1499px) { #all-menu-popup .depth1-wrap .depth1-ul .mn_li1 .mn_a1 {font-size:24px} #all-menu-popup .depth2-wrap .depth2-ul {font-size:15px} } @media all and (max-width:1399px) { #all-menu-popup .left-side {width:70%} #all-menu-popup .pc-all-bg {width:30%} #all-menu-popup .btn-closeAllMenu {right:30px} } @media all and (max-width:999px) { #all-menu-popup {display:none !important} } @keyframes btnAni { 0% {width:35px} 80% {width:20px} 100% {width:35px} }