/*-------------------------layout_ipsi.css------------------------------------*/ @charset "utf-8"; html, body {overflow:hidden;overflow-y:visible} #doc-wrap {position:relative;min-width:1400px;max-width:1920px;overflow:hidden;margin:0 auto;} a:focus-visible, button[type="button"]:focus-visible, input[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), input[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} /* 레이아웃 */ #header-wrap {position:relative;height:100px;margin:0 auto;z-index:11;} @media all and (min-width:1000px) { #header-wrap:before {display:block;content:'';position:absolute;top:100px;left:0;width:100%;height:0;background:rgba(0, 0, 0, .3);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 (max-width:999px) { #header-wrap {height:auto;z-index:11;} } /* svisual */ #svisual-wrap {position:relative;margin:0 auto;width:100%;height:425px;box-sizing:border-box;z-index:10;transition:all .3s ease} #svisual-wrap .svisualWrap {width:100%;position:relative;height:100%;z-index:1} #svisual-wrap .sVis {position:relative;height:100%} #svisual-wrap .sVis .txtBox {position:absolute;top:50%;left:0;display:block;width:100%;box-sizing:border-box;z-index:2;transform:translateY(-50%);} #svisual-wrap .sVis .txtBox .txtPkg {display:block;position:relative;width:100%;padding:0 30px;box-sizing:border-box;text-align:left;margin:0 auto;overflow:hidden;text-align:center;} #svisual-wrap .sVis .txtBox .txtPkg > span {display:block;box-sizing:border-box;position:relative;line-height:1.2;color:#fff;transform:translateY(150px);transition:all .5s ease;} #svisual-wrap .sVis .txtBox .txtPkg .txt1 {font-size:55px;font-weight:400;font-family:"ONE-Mobile-Title", sans-serif;transition:all .5s ease;} #svisual-wrap .sVis .txtBox .txtPkg .txt2 {font-size:25px;font-weight:700;font-family:"Poppins", sans-serif;transition:all .7s ease;padding-top:17px;} #svisual-wrap .sVis .imgBox {display:block;position:relative;height:100%;overflow:hidden;width:100%;margin:0 auto;} #svisual-wrap .sVis .imgBox img {display:block;position:absolute;width:auto;height:100%;top:0;left:50%;z-index:1;transform:translateX(-50%) scale(1.2);transition:transform 3s ease;} .loaded #svisual-wrap .sVis .txtBox .txtPkg .txt1 {opacity:1;transform:translateY(0)} .loaded #svisual-wrap .sVis .txtBox .txtPkg .txt2 {opacity:1;transform:translateY(0)} .loaded #svisual-wrap .sVis .imgBox img {transform:translateX(-50%) scale(1)} @media all and (max-width:999px) { #svisual-wrap {display:none;} } /* cont-navi */ #cont-navi {position:absolute;top:11px;right:65px;z-index:12} #cont-navi:before {display:block;content:'';position:absolute;top:50%;right:0;margin-top:-9px;width:2px;height:18px;background:#999999;border-radius:3px;} #cont-navi .navi-menu {display:inline-flex;align-items:center;} #cont-navi .navi-menu .mn_l1 {position:relative;padding:0 20px;} #cont-navi .navi-menu .mn_l1:before {content:"";display:block;position:absolute;top:50%;left:-7px;width:8px;height:8px;border:solid;border-width:0 0 2px 2px;border-color:transparent transparent #333 #333;transform:translateY(-50%) rotate(225deg);transition:all .3s ease;} #cont-navi .navi-menu .mn_a1 {position:relative;color:#222;font-size:18px;} #cont-navi .navi-menu .mn_l1.over .mn_a1 {font-weight:700;} #cont-navi .home {display:block;padding-right:16px} #cont-navi .home a {display:block;position:relative;width:24px;height:25px;} #cont-navi .home a:after {content:"";display:block;position:absolute;top:1px;left:0;width:24px;height:25px;background:url(/resources/_Templet/Layout/layout_ipsi/Img/layout_ico_home.png) no-repeat 50% 50%;} @media all and (max-width:999px) { #cont-navi {display:none} } /* contents */ #container-wrap {position:relative;/*z-index:1*/} #container {position:relative;max-width:1440px;margin:0 auto 0;padding:0 20px;box-sizing:border-box;z-index:9} #container:after {content:'';clear:both;display:block} #contents {width:100%;min-height:600px;word-break:keep-all;word-wrap:break-word} #contents .cont-top {position:relative;margin-bottom:45px;margin-top:85px;} #contents .cont-top .cont-tit {font-size:45px;color:#313742;font-weight:400;text-align:left;padding-top:4 5px;font-family:"ONE-Mobile-Title", sans-serif;} #contents .cont-top .cont-util {position:absolute;right:0;top:15px;z-index:15} #contents .cont-top .cont-util > div {display:inline-block;position:relative;box-sizing:border-box;vertical-align:middle;font-size:0} #contents .cont-top .cont-util button {box-sizing:border-box;position:relative;width:18px;height:18px;border:0;background:transparent;} #contents .cont-top .cont-util button:before {content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;width:18px;height:18px;background:url(/resources/_Templet/Layout/layout_ipsi/Img/layout_ico_sns.png) no-repeat 50% 50%;margin:auto;box-sizing:border-box;transition:all .3s ease} #contents .cont-top .cont-util button:focus:before, #contents .cont-top .cont-util button:hover:before {opacity:1;} #contents .cont-top .cont-util .boxUtil > div {display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative} #contents .cont-top .cont-util .boxUtil .unit {} #contents .cont-top .cont-util .boxUtil .unit .btn-share {} #contents .cont-top .cont-util .boxUtil .unit .btn-share:before {} #contents .cont-top .cont-util .boxUtil .unit .btn-print {} #contents .cont-top .cont-util .boxUtil .unit .btn-print:before {background-image:url(/resources/_Templet/Layout/layout_ipsi/Img/layout_ico_print.png);} #contents .cont-top .cont-util .boxUtil .unit.unit-sns {margin:0 15px 0 0} #contents .cont-top .cont-util .boxUtil .unit.unit-print {} #contents .cont-top .cont-util .boxUtil .sns-list {display:none;position:absolute;top: calc(100% + 12px);right:-15px;z-index:100;width:auto;box-sizing:border-box;width:50px;border-radius:20px;padding:53px 0 10px 0;background:rgba(0,0,0,0.6);} #contents .cont-top .cont-util .boxUtil .sns-list ul {display:block;font-size:0;white-space:nowrap} #contents .cont-top .cont-util .boxUtil .sns-list li {display:block;box-sizing:border-box;position:relative;vertical-align:top;} #contents .cont-top .cont-util .boxUtil .sns-list button {display:block;box-sizing:border-box;position:relative;border:0;background:none;width:50px;height:45px;background:none;font-size:0;overflow:hidden;transition:all .3s ease} #contents .cont-top .cont-util .boxUtil .sns-list button:before {width:23px;height:21px;background:url(/resources/_Templet/Layout/layout_csds/Img/layout_spr.png) no-repeat;top:0;right:0;bottom:0;left:0;opacity:1;margin:auto;z-index:1} #contents .cont-top .cont-util .boxUtil .sns-list .btn-face:before {background-position:-159px -30px} #contents .cont-top .cont-util .boxUtil .sns-list .btn-twit:before {background-position:-126px -30px} #contents .cont-top .cont-util .boxUtil .sns-list .btn-kakt:before {background-position:-60px -30px} #contents .cont-top .cont-util .boxUtil .sns-list .btn-blog:before {background-position:-93px -30px} #contents .cont-top .cont-util .boxUtil .sns-list .btn-url:before {background-position:-192px -30px} #contents .cont-top .cont-util .boxUtil .sns-list .sns-closer {display:block;position:absolute;width:50px;height:52px;border:0;left:0;top:0;} #contents .cont-top .cont-util .boxUtil .sns-list .sns-closer:before, #contents .cont-top .cont-util .boxUtil .sns-list .sns-closer:after {content:"";display:block;position:absolute;width:22px;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 .boxUtil .sns-list .sns-closer:before {transform:rotate(45deg)} #contents .cont-top .cont-util .boxUtil .sns-list .sns-closer:after {transform:rotate(135deg)} #contents #cont {padding:0 0 70px 0;font-size:18px;color:#555;letter-spacing:0;line-height:1.778em;word-break:keep-all;word-wrap:break-word;min-height:400px;font-weight:400} #contents #cont:after {clear:both;content:"";display:block} #contents #cont input, button, select, textarea {font-size:18px;color:#555;letter-spacing:0;font-family:"ONE-Mobile-Regular"} #contents #cont .c-tab01 {margin-top:0;margin-bottom:40px;} @media all and (max-width:999px){ #contents .cont-top {margin-bottom:0;margin-top:0;padding:25px 0 20px;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:26px;line-height:1.2;text-align:center;padding-top:0;display:block;} #contents .cont-top .cont-util {position:relative;right:auto;top:auto;margin-top:15px} #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 .box-util .unit.unit-sns {margin-right:10px;} #contents .cont-top .cont-util .boxUtil .sns-list {top: calc(100% + 5px);right:0;width:36px;background:rgba(0,0,0,0.9);padding:40px 0 10px 0;} #contents .cont-top .cont-util .boxUtil .sns-list button {width:36px;height:30px;} #contents .cont-top .cont-util .boxUtil .sns-list .sns-closer {width:36px;height:40px;} #contents .cont-top .cont-util .boxUtil .sns-list .sns-closer:before, #contents .cont-top .cont-util .boxUtil .sns-list .sns-closer:after {width:16px;} #container {z-index:9;padding:0;} #contents {width:auto;margin-top:0;padding:0 20px} #contents #cont {font-size:17px;padding-bottom:40px;} #contents #cont input, button, select, textarea {font-size:17px} } @media all and (max-width:768px){ #container {z-index:1} #contents #cont {font-size:16px;} #contents #cont input, button, select, textarea {font-size:16px} } @media all and (max-width:599px) { #contents #cont {font-size:15px} } /* ============================== * 접근성대응 ================================= */ #svisual-wrap .sVis .txtBox .txtPkg > span {text-shadow:0 5px 4px rgba(0, 0, 0, .6)} /*-------------------------gnavi_ipsi.css------------------------------------*/ #gNavi {position:relative;width:auto;box-sizing:border-box;height:50px;background:#F9F9F9;} #gNavi .global-wrap {position:relative;width:100%;height:100%;box-sizing:border-box;} #gNavi .glnk-sec {display:inline-block;height:100%;padding-left:60px;} #gNavi .glink-sec a, #gNavi .glink-sec button {display:block;position:relative;background:none;border:0;box-sizing:border-box} #gNavi .glnk-sec a {display:inline-flex;align-items:center;box-sizing:border-box;position:relative;font-size:16px;color:#000;height:100%;padding-right:27px;} #gNavi .glnk-sec .whome:before {display:block;content:'';position:absolute;top:50%;right:0;margin-top:-9px;width:17px;height:17px;background:#D2D2D2;border-radius: 5px;transition:all .3s ease;} #gNavi .glnk-sec .whome span:before {display:block;content:'';position:absolute;top:50%;right:4px;margin-top:-4px;width:6px;height:6px;border-bottom:1px solid #000;border-right:1px solid #000;transform:rotate(-90deg);transition:all .3s ease;} #gNavi .glnk-sec .whome span:after {display:block;content:'';position:absolute;top:50%;right:3px;margin-top:-1px;width:9px;height:1px;background:#000;transform:rotate(-45deg);transition:all .3s ease;} #gNavi .glnk-sec .whome:focus span:before, #gNavi .glnk-sec .whome:hover span:before {transform:rotate(-45deg);} #gNavi .glnk-sec .whome:focus span:after, #gNavi .glnk-sec .whome:hover span:after {transform:rotate(0);} #gNavi .srvc-sec {position:absolute;top:0;right:0;font-size:0;z-index:2200;height:100%;} #gNavi .srvc-sec .srvcLink {position:relative;z-index:1100;height:100%;display:flex;align-items: center;justify-content: flex-end;} #gNavi .srvc-sec .srvcLink a, #gNavi .srvc-sec .srvcLink button {display:inline-block;position:relative;background:none;border:0;box-sizing:border-box;color: #000;font-size: 16px;} #gNavi .srvc-sec .srvcLink .sns-list {display:flex;flex-wrap:wrap} #gNavi .srvc-sec .srvcLink a + .sns-list {margin-left:20px} #gNavi .srvc-sec .srvcLink .sns-list > li > a {margin:0 3px 0 0} #gNavi .srvc-sec .srvcLink .sns-list li:last-child {margin-right:0} #gNavi .srvc-sec .srvcLink .sns-list a {display:block;width:30px;height:30px;border-radius:50%;background-image:url(/resources/_Templet/Layout/layout_ipsi/Img/header_social.png)} #gNavi .srvc-sec .srvcLink .sns-list a.blog {background-position:-33px 0} #gNavi .srvc-sec .srvcLink .sns-list a.youtube {background-position:-66px 0} #gNavi .srvc-sec .srvcLink .sns-list a.instagram {background-position:-99px 0} #gNavi .srvc-sec .srvcLink .sns-list a.zepeto {background-position:-132px 0} @media all and (max-width:1399px) { #gNavi .srvc-sec {display:flex;right:191px} #gNavi .srvc-sec .srvcUtil {padding-left:10px;} #gNavi .srvc-sec .srvcUtil .link1 {font-size: 15px;padding: 0 14px 0 44px;} #gNavi .srvc-sec .srvcUtil .link1:before {left:14px;} #gNavi .srvc-sec .srvcUtil .toppop-ctrl {margin-left:5px;} #gNavi .srvc-sec .srvcUtil a.search {margin:0 15px;} #gNavi .srvc-sec .srvcUtil .amenu {width:50px;height:50px;border-radius:15px 0;} #gNavi .srvc-sec .srvcUtil .amenu:before, #gNavi .srvc-sec .srvcUtil .amenu span, #gNavi .srvc-sec .srvcUtil .amenu:after {width:20px;height:2px;} #gNavi .srvc-sec .srvcUtil .amenu:before {margin:32px auto auto auto} #gNavi .srvc-sec .srvcUtil .amenu:after {margin:auto auto 32px auto} } @media all and (max-width:999px) { #gNavi .glnk-sec {padding-left:20px;} #gNavi .srvc-sec {display:block;right:0} } @media all and (max-width:699px) { #gNavi {height:0;z-index:initial;} #gNavi .glnk-sec {display:none;} #gNavi .srvc-sec {display:flex;height:60px;right:142px} #gNavi .srvc-sec .srvcLink a, #gNavi .srvc-sec .srvcLink button {font-size: 14px;} #gNavi .srvc-sec .srvcLink .sns-list {display:none;} } /*-------------------------logo_ipsi.css------------------------------------*/ #header {display:block;position:relative;width:100%;height:100px;margin:0 auto;z-index:11;} #header .logo {display:flex;justify-content:center;align-items:center;position:absolute;left:0;top:0;width:340px;height:100%;background:#fff;border-radius:0 0 30px 0;box-sizing:border-box;padding:0 10px;} #header .logo a {display:block;z-index:501;} #header .logo a:before {display:block;content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:#fff;border-radius:0 0 30px 0;} #header .logo a span {display:block;} #header .logo a img {width:100%;height:auto;} #header .logo a .slogo {display:inline-block;position:relative;padding-left:62px;} #header .logo a .logo-symbol {position:absolute;top:-2px;left:0;width:48px;} #header .logo a .logo-kor {width:154px;} #header .logo a .logo-txt {display:inline-block;color:#005767;font-size:20px;font-style:normal;font-weight:700;padding-top:6px;} #header .logo a:after {content:'';display:none;width:100%;height:100%;border:3px solid rgb(59, 153, 252);position:absolute;top:0;left:0;z-index:55} #header .logo a:focus:after {display:block} @media all and (max-width:1599px) { #header .logo {width:250px;} #header .logo a .slogo {padding-left:40px;} #header .logo a .logo-symbol {width:32px;} #header .logo a .logo-kor {width:104px;} #header .logo a .logo-txt {font-size:17px;padding-top:3px;} } @media all and (max-width:1199px) { #header .logo {width:200px;} #header .logo a .slogo {padding-left:32px;} #header .logo a .logo-symbol {width:25px;} #header .logo a .logo-kor {width:82px;} #header .logo a .logo-txt {font-size:14px;padding-top:2px;} } @media all and (max-width:999px) { #header {box-shadow:0 10px 20px rgba(147,152,167,0.15);z-index:initial;} .mobile-sideMenu-open #header .logo {z-index:0} #header {height:60px;border-radius:0 0 15px 0;background:#fff;border-radius:0 0 15px 0;} #header .logo {width:auto;padding:0 20px;border-radius:0;background:none;} } /*-------------------------header_ipsi.css------------------------------------*/ /* header */ #header .srvc-sec {position:absolute;top:0;right:0;font-size:0;z-index:2200;height:100%;} #header .srvc-sec .srvcUtil {display:flex;align-items:center;font-size:0;z-index:1101} #header .srvc-sec .srvcUtil .link1 {display:flex;position:relative;height: 40px;color:#FFF;font-size: 16px;font-family:'ONE-Mobile-Title', sans-serif;font-weight: 400;padding: 0 24px 0 54px;align-items: center;border-radius: 20px;background:#066C70;box-sizing:border-box;margin-right:90px;} #header .srvc-sec .srvcUtil .link1:before {display:block;content:'';position:absolute;top:50%;left:24px;width:24px;height:24px;background:url(/resources/_Templet/Layout/layout_ipsi/Img/ico_cs.png) no-repeat 0 0;transform:translateY(-50%);} #header .srvc-sec .srvcUtil .toppop-ctrl {display:inline-block;vertical-align:top;margin-left:10px;} #header .srvc-sec .srvcUtil .toppop-ctrl .btn-wctrl {display:flex;justify-content:center;align-items:center;width:70px;height:40px;color:#333333;border:0;box-sizing:border-box;position:relative;border-radius:20px;background:#009FBF;background -moz-linear-gradient(90deg, #009FBF 0%, #839e00 100%);background:-webkit-linear-gradient(90deg, #009FBF 0%, #839e00 100%);background:linear-gradient(90deg, #009FBF 0%, #839e00 100%)} #header .srvc-sec .srvcUtil .toppop-ctrl .btn-wctrl i {position:relative;display:inline-flex;align-items:center;justify-content:center;width:auto;min-width:14px;height:14px;text-align:center;padding:0 3px;font-size:10px;font-weight:700;font-style:normal;background:#fff;box-sizing:border-box;border-radius:7px;margin-left:23px;} #header .srvc-sec .srvcUtil .toppop-ctrl .btn-wctrl i:before {display:block;content:"";position:absolute;top:-2px;left:-23px;width:17px;height:19px;background:url(/resources/_Templet/Layout/layout_csds/Img/layout_spr.png) no-repeat -32px 0;z-index:1;transition:all .3s ease} #header .srvc-sec .srvcUtil .toppop-ctrl .btn-wctrl.show:before {} #header .srvc-sec .srvcUtil a.search {position:relative;width:26px;height:26px;margin:0 24px 0 20px;} #header .srvc-sec .srvcUtil a.search:before {display:block;content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:url(/resources/_Templet/Layout/layout_ipsi/Img/header_ico_slc.png) no-repeat -81px 0;} #header .srvc-sec .srvcUtil .amenu {display:inline-block;position:relative;width:100px;height:100px;background:#009fbf;font-size:0;color:transparent;box-sizing:border-box;border-radius:30px 0;transition:all .3s ease} #header .srvc-sec .srvcUtil .amenu:before, #header .srvc-sec .srvcUtil .amenu span, #header .srvc-sec .srvcUtil .amenu:after {content:"";display:block;position:absolute;width:24px;height:3px;background:#fff;border-radius:5px;top:0;right:0;bottom:0;left:0;font-size:0;transition:all .3s ease} #header .srvc-sec .srvcUtil .amenu:before {margin:39px auto auto auto} #header .srvc-sec .srvcUtil .amenu span {margin:auto} #header .srvc-sec .srvcUtil .amenu:after {margin:auto auto 39px auto} #header .srvc-sec .srvcUtil a:focus-visible {outline-color:#f00} @media all and (max-width:1699px) { #header .srvc-sec .srvcUtil .link1 {display:none;} } @media all and (max-width:1399px) { #header .srvc-sec {display:flex;height:auto;top:-50px} #header .srvc-sec .srvcUtil {padding-left:10px;} #header .srvc-sec .srvcUtil .link1 {font-size: 15px;padding: 0 14px 0 44px;} #header .srvc-sec .srvcUtil .link1:before {left:14px;} #header .srvc-sec .srvcUtil .toppop-ctrl {margin-left:5px;} #header .srvc-sec .srvcUtil a.search {margin:0 15px;} #header .srvc-sec .srvcUtil .amenu {width:50px;height:50px;border-radius:15px 0;} #header .srvc-sec .srvcUtil .amenu:before, #header .srvc-sec .srvcUtil .amenu span, #header .srvc-sec .srvcUtil .amenu:after {width:20px;height:2px;} #header .srvc-sec .srvcUtil .amenu:before {margin:32px auto auto auto} #header .srvc-sec .srvcUtil .amenu:after {margin:auto auto 32px auto} } @media all and (max-width:999px) { #header .srvc-sec .srvcUtil .amenu {display:none} #header .srvc-sec {display:block;top:0;right:0} #header .srvc-sec .srvcUtil {padding-top:10px;margin-right:65px;} #header .srvc-sec .srvcUtil .amenu {display:none;} } @media all and (max-width:699px) { #header .srvc-sec {display:flex;height:60px;} #header .srvc-sec .srvcUtil {padding-top:0;padding-left:5px;} #header .srvc-sec .srvcUtil a.search {display:none;} } /* 접근성 - 위치 이동 한 상단 와이드팝업 버튼*/ body > .toppop-ctrl {position:absolute;top:initial;right: calc((100vw - 1920px) / 2);display:inline-block;vertical-align:top;margin-top:80px;margin-right:161px;z-index:111;} body > .toppop-ctrl .btn-wctrl {display:flex;justify-content:center;align-items:center;width:70px;height:40px;color:#333333;border:0;box-sizing:border-box;position:relative;border-radius:20px;background:#009FBF;background -moz-linear-gradient(90deg, #009FBF 0%, #839e00 100%);background:-webkit-linear-gradient(90deg, #009FBF 0%, #839e00 100%);background:linear-gradient(90deg, #009FBF 0%, #839e00 100%)} body > .toppop-ctrl .btn-wctrl:focus-visible {outline-color:#f00} body > .toppop-ctrl .btn-wctrl i {position:relative;display:inline-flex;align-items:center;justify-content:center;width:auto;min-width:14px;height:14px;text-align:center;padding:0 3px;font-size:10px;font-weight:700;font-style:normal;background:#fff;box-sizing:border-box;border-radius:7px;margin-left:23px;} body > .toppop-ctrl .btn-wctrl i:before {display:block;content:"";position:absolute;top:-2px;left:-23px;width:17px;height:19px;background:url(/resources/_Templet/Layout/layout_csds/Img/layout_spr.png) no-repeat -32px 0;z-index:1;transition:all .3s ease} body > .toppop-ctrl .btn-wctrl.show:before {} @media all and (max-width:1920px) { body > .toppop-ctrl {right: 161px;margin-right:0;} } @media all and (max-width:1399px) { body > .toppop-ctrl {right: 104px;margin-top:5px;} } @media all and (max-width:699px) { body > .toppop-ctrl {right: 65px;margin-top:10px;} } #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 {} /* 주메뉴 */ @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:0;top:0;width:100%;height:100px;background:transparent;z-index:500;overflow:hidden;margin:0;text-align:center;box-sizing:border-box;transition:background .3s ease;border-radius:0 0 30px 30px;} /* 메뉴 배경 */ #header .decoBg:before {display:block;content:'';position:absolute;top:0;left:0;width:340px;height:100px;background:#fff;border-radius:0 0 30px 30px;box-shadow: 0px 5px 10px 0px rgba(55, 67, 89, 0.10);} /* 로고 아래 흰색 박스 */ #header .decoBg:after {display:block;content:'';position:absolute;top:0;left:340px;width: calc(100% - 340px);height:100px;background:#fff;border-radius:0 0 30px 30px;box-shadow: 0px 5px 10px 0px rgba(55, 67, 89, 0.10);} /* 메뉴 아래 흰색 박스 */ #mainNavi-wrap.over {overflow:hidden !important;border-radius:0 0 30px 30px;} /* 메뉴 오버시 둥근 모서리 */ #mainNavi-wrap:before {display:block;content:'';position:absolute;top:0;left:0;width:100%;height:100%;border-radius:0 0 30px 30px;box-shadow:0 25px 45px rgba(147,152,167,0.15);opacity:0;background:linear-gradient(90deg, #009FBF 0%, #839e00 100%)} /*2차메뉴 그라데이션 박스*/ #mainNavi-wrap:after {display:block;content:'';position:absolute;bottom:100px;left: calc(12.5% + 265px);width: calc(87.5% - 265px);height:100%;border-radius:0 0 30px 30px;background:#fff;transition:all .3s ease;} /* 2차메뉴 흰색 배경 */ #mainNavi-wrap.over:after {bottom:10px;} /* 메뉴 오버시 둥근 모서리 */ #mainNavi-wrap #mainNavi .depth1-ul:after {display:block;content:'';position:absolute;top:0;left:340px;width: calc(100% - 340px);height:100px;border-radius:0 0 30px 30px;background:#fff;} /* 메뉴 흰색 배경 박스*/ #mainNavi-wrap.over #mainNavi .depth1-ul:after {box-shadow: 0px 5px 10px 0px rgba(55, 67, 89, 0.10);} /* 메뉴 오버시 그림자 */ #mainNavi .depth2-wrap:after {display:block;content:'';position:absolute;top:-20px;left: calc(100% - 20px);width:419px;height:419px;border-radius:50%;border: 90px solid #BADDE6;opacity: 0.2;box-sizing:border-box;} /* 2차메뉴 왼쪽 동그라마*/ #mainNavi .depth2-wrap .depth2-tit:before {display:block;content:'';position:absolute;bottom:-210px;left:-253px;width:320px;height:320px;border-radius:50%;border: 60px solid #BADDE6;opacity: 0.2;box-sizing:border-box;} /* 2차메뉴 오른쪽 동그라마*/ #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 {position:relative;height:100px;box-sizing:border-box;padding:0;z-index:1;} #mainNavi .depth1-wrap {display:block;width:auto;text-align:left;box-sizing:border-box;position:relative;max-width:100%;margin:0 auto;padding:0 440px 0 350px;font-size:0;line-height:1;z-index:1;} #mainNavi .depth1-ul {display:inline-block;overflow:hidden;display:block;text-align:center;} #mainNavi > ul > li:first-child {padding-left:8px} #mainNavi .mn_li1 {display:inline-block;text-align:center;margin:0 20px;} #mainNavi .mn_a1 {position:relative;display:block;padding:41px 0 39px 0;z-index:1;} #mainNavi .mn_a1 > span {display:inline-block;line-height:1;font-size:20px;color:#374359;font-family:'ONE-Mobile-Title', sans-serif;font-weight:500;letter-spacing:0;transition:all .3s ease} #mainNavi .mn_a1:after {display:block;content:'';position:absolute;left:50%;bottom:0;width:0;height:5px;background:#0d8ba4;border-radius:5px;transition:all .3s ease} #mainNavi .mn_a1.over span, #mainNavi .mn_a1:hover span, #mainNavi .mn_a1:focus span, #mainNavi .mn_li1.over .mn_a1 span {color:#0d8ba4;} #mainNavi .mn_li1 .mn_a1.over:after, #mainNavi .mn_a1:hover:after, #mainNavi .mn_a1:focus:after, #mainNavi .mn_li1.over .mn_a1:after {left:0;width:100%;background:#0d8ba4;} #mainNavi .depth2-wrap {display:none;position:absolute;top:100px;left:12.5%;width:75%;padding:18px 40px 20px 265px;text-align:left;font-weight:normal;box-sizing:border-box;min-height:200px;} #mainNavi .depth2-wrap .depth2-tit {display:block;position:absolute;width:230px;height:100%;box-sizing:border-box;left:20px;top:0;padding:65px 0 0} #mainNavi .depth2-wrap .depth2-tit span {display:block;line-height:1.3} #mainNavi .depth2-wrap .depth2-tit .tit {color:#FFF;font-size: 36px;font-family:'ONE-Mobile-Title', sans-serif;} #mainNavi .depth2-wrap .depth2-tit .txt {color: #FFF;font-size: 16px;padding-top:15px;} #mainNavi .depth2-wrap .depth2-ul {display:flex;flex-wrap:wrap;align-content: flex-start;width:100%;position:relative;font-size:0;overflow:hidden;box-sizing:border-box;padding:60px 0 40px 20px;min-height:240px;z-index:1;} #mainNavi .depth2-wrap .mn_li2 {display:inline-block;width:25%;vertical-align:top;box-sizing:border-box;position:relative;padding:0 12px;margin-bottom:20px;} #mainNavi .depth2-wrap .mn_li2:before {display:block;content:'';position:absolute;top:0;left:0;width:1px;height:100%;background:#CCDDE1;} #mainNavi .depth2-wrap .mn_li2:nth-child(4n+1):before {display:none;} #mainNavi .depth2-wrap .mn_a2 {display:flex;align-items: center;position:relative;width:auto;height:50px;padding:0 55px 0 20px;font-size:0;border-radius: 10px;border: 1px solid rgba(0, 86, 103, 0.20);background: #FFF;box-sizing:border-box;text-align:left;overflow:hidden;transition:all .3s ease} #mainNavi .depth2-wrap .mn_a2:before {content:"";display:block;position:absolute;top:0;bottom:0;right:50px;margin:auto 0;width:1px;height:18px;background:rgba(0, 86, 103, 0.20);transition:all .3s ease} #mainNavi .depth2-wrap .mn_a2:after {content:"";display:block;position:absolute;top:0;bottom:0;right:20px;margin:auto 0;width:8px;height:8px;border-bottom:2px solid #005667;border-right:2px solid #005667;transform:rotate(-45deg);transition:all .3s ease} #mainNavi .depth2-wrap .mn_a2 span {display:inline-block;vertical-align:middle;font-size:17px;font-weight:700;color:#023B48;line-height:1.1;transition:all .3s ease} #mainNavi .depth2-wrap .mn_a2:focus, #mainNavi .depth2-wrap .mn_a2:hover {border-color:#005667;} #mainNavi .depth2-wrap .over .mn_a2 {border-color:#005667;} #mainNavi .depth2-wrap .over .mn_a2:before {background:#005667;right:0;width:50px;height:100%;} #mainNavi .depth2-wrap .over .mn_a2:after {border-color:#fff;} #mainNavi .depth3-wrap {display:block;padding:15px 0 0 20px;box-sizing:border-box} #mainNavi .depth3-wrap .depth3-ul {} #mainNavi .depth3-wrap .mn_li3 {margin:0 0 1px;box-sizing:border-box} #mainNavi .depth3-wrap .mn_li3:last-child {margin:0} #mainNavi .depth3-wrap .mn_a3 {position:relative;display:block;padding:6px 0 6px 13px ;box-sizing:border-box} #mainNavi .depth3-wrap .mn_a3:before {content:"";display:block;position:absolute;top:11px;left:0;width:5px;height:5px;border-radius:50%;background:#D9D9D9;transition:all .3s ease} #mainNavi .depth3-wrap .mn_a3 span {display:inline-block;position:relative;color:#5B5B5B;font-size: 16px;line-height:1.1;word-wrap:break-word;word-break:keep-all;white-space:normal;transition:all .3s ease} #mainNavi .depth3-wrap .mn_a3.over:before, #mainNavi .depth3-wrap .mn_a3:focus:before, #mainNavi .depth3-wrap .mn_a3:hover:before {background:#005667;} #mainNavi .depth3-wrap .mn_a3.over span, #mainNavi .depth3-wrap .mn_a3:focus span, #mainNavi .depth3-wrap .mn_a3:hover span {color:#005667;} #mainNavi .mn_a1[target=_blank] span:after {display:inline-block;content:"";margin-left:5px;width:13px;height:12px;vertical-align:middle;background:url(/resources/_Templet/Layout/layout_dept/Img/ico_nw.png) no-repeat 0 0;} #mainNavi .mn_a2[target=_blank] span:after {display:inline-block;content:"";position:absolute;top:0;bottom:0;right:20px;margin:auto 0;width:13px;height:12px;vertical-align:middle;background:url(/resources/_Templet/Layout/layout_dept/Img/ico_nw.png) no-repeat 0 0;} #mainNavi .mn_a2[target=_blank].over span:after {background-image:url(/resources/_Templet/Layout/layout_dept/Img/ico_nw_w.png);} #mainNavi .mn_a2[target=_blank]:after, #mainNavi .mn_a2[target=_blank].over:after {display:none;} #mainNavi .mn_a3[target=_blank] span:after {display:inline-block;content:"";width:12px;height:12px;vertical-align:middle;background:url(/resources/_Templet/Layout/layout_dept/Img/ico_nw2.png) no-repeat 0 0;margin-left:6px;} #mainNavi .mn_a3[target=_blank]:focus span:after, #mainNavi .mn_a3[target=_blank]:hover span:after {background-image:url(/resources/_Templet/Layout/layout_dept/Img/ico_nw2_o.png);} #mainNavi .tgl-btn {display:none} #mainNavi .amenu {display:block;position:absolute;width:90px;height:90px;right:0;top:0;background:#0088a5;transition:all .3s ease} #mainNavi .amenu:before, #mainNavi .amenu span, #mainNavi .amenu:after {content:"";display:block;position:absolute;height:3px;background:#fff;top:0;right:0;bottom:0;left:0;font-size:0;transition:all .3s ease} #mainNavi .amenu:before {width:27px;margin:35px auto auto 32px} #mainNavi .amenu span {width:19px;margin:auto auto auto 32px} #mainNavi .amenu:after {width:27px;margin:auto auto 34px 32px} #mainNavi .amenu:focus span, #mainNavi .amenu:hover span {width:27px} .pc-topMenu-open #mainNavi-wrap {} .pc-topMenu-open #mainNavi-wrap:before {opacity:1;} .pc-topMenu-open #mainNavi .mn_a1 > span {color:#000} .pc-topMenu-open #mainNavi .mn_a1.over > span {color:#0d8ba4} .pc-topMenu-open #mainNavi .mn_a1:after {background:#0d8ba4} .pc-topMenu-open #mainNavi .mn_a1[target=_blank] span:after {background-position-x:-25px} .pc-topMenu-open #mainNavi .mn_a1[target=_blank]:focus span:after, .pc-topMenu-open #mainNavi .mn_a1[target=_blank]:hover span:after {background-position-x:-25px} .body-slider-ovclick {display:none} } @media all and (min-width:1000px) and (max-width:1799px) { #mainNavi .mn_li1 {margin:0 10px;} } @media all and (min-width:1000px) and (max-width:1699px) { #mainNavi .depth1-wrap {padding-right:280px;} } @media all and (min-width:1000px) and (max-width:1599px) { #header .decoBg:before {width:250px;} #header .decoBg:after {left:250px;width: calc(100% - 250px);} #mainNavi-wrap:after {left:270px;width: calc(100% - 270px);} /* 2차메뉴 흰색 배경 늘리기 */ #mainNavi-wrap #mainNavi .depth1-ul:after {left:250px;width: calc(100% - 250px);} /* 메뉴 흰색 배경 박스*/ #mainNavi .depth2-wrap:after {left: calc(100% - 100px);} /* 2차메뉴 왼쪽 동그라마*/ #mainNavi .depth2-wrap .depth2-tit:before {left:-150px;} /* 2차메뉴 오른쪽 동그라마*/ #mainNavi .depth1-wrap {padding-left:270px;padding-right:300px;} #mainNavi .mn_li1 {margin:0 10px} #mainNavi .mn_a1 {padding:42px 0 40px} #mainNavi .mn_a1 > span {font-size:18px;} #mainNavi .depth2-wrap {left:0;width:100%;padding-left:270px;padding-right:20px;} #mainNavi .depth2-wrap .depth2-ul {padding-left:0;} #mainNavi .depth2-wrap .mn_li2 {width:33.33%;} #mainNavi .depth2-wrap .mn_li2:nth-child(4n+1):before {display:block;} #mainNavi .depth2-wrap .mn_li2:nth-child(3n+1):before {display:none;} } @media all and (min-width:1000px) and (max-width:1399px) { #mainNavi .depth1-wrap {padding-right:0;} } @media all and (min-width:1000px) and (max-width:1299px) { #mainNavi .mn_li1 {margin:0 10px} #mainNavi .mn_a1 {padding:43px 0 41px} #mainNavi .mn_a1 > span {font-size:17px;} #mainNavi .depth2-wrap .depth2-tit .tit {font-size: 30px;} #mainNavi .depth2-wrap .depth2-tit .txt {font-size: 15px;} #mainNavi .depth2-wrap .mn_a2 span {font-size:15px;} } @media all and (min-width:1000px) and (max-width:1199px) { #header .decoBg:before {width:200px;} #header .decoBg:after {left:200px;width: calc(100% - 200px);} #mainNavi-wrap:after {left:250px;width: calc(100% - 250px);} /* 2차메뉴 흰색 배경 늘리기 */ #mainNavi .depth2-wrap {left:0;width:100%;padding-left:250px;} #mainNavi-wrap #mainNavi .depth1-ul:after {left:200px;width: calc(100% - 200px);} #mainNavi .depth1-wrap {padding-left:200px;} #mainNavi .mn_a1 {padding:43px 0 42px} #mainNavi .depth2-wrap .mn_a2 span {font-size:14px;} } @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%;max-width:340px;height:0 !important} #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%;max-width:400px;height:100%;z-index:8000;overflow-x:hidden;padding:0;box-sizing:border-box;margin:0;transition:right .5s ease, box-shadow .5s ease} #menu-wrap.mn-h-open {right:0;padding-left:60px;} #menu-wrap .is-open .depth2-wrap {display:block !important} .isMain #mainNavi .depth2-wrap .depth2-ul {} #menu-wrap .mGnavi {display:flex;align-items:center;position:absolute;top:0;left:60px;box-sizing:border-box;width: calc(100% - 60px);height:80px;background:#fff;border-bottom:1px solid #ececec;font-size:0;text-align:left;padding:0 0 0 35px;z-index:1} #menu-wrap .mGnavi .tmn-tit {font-size:24px;color:#313742;font-weight:700;} #menu-wrap .btn-close {display:block;position:absolute;width:60px;height:60px;background:linear-gradient(90deg, rgba(49,163,186,1) 0%, rgba(117,186,133,1) 72%, rgba(171,205,5,1) 100%);;border:0;top:20px;right:100%;border-radius:30px 0 0 30px;} #menu-wrap .btn-close:before, #menu-wrap .btn-close:after {content:"";display:block;position:absolute;width:30px;height:3px;background:#fff;top:0;bottom:0;left:22px;margin:auto} #menu-wrap .btn-close:before {transform:rotate(45deg)} #menu-wrap .btn-close:after {transform:rotate(135deg)} #menu-wrap .allmn-btn {display:none} #mainNavi {display:block;position:absolute;width: calc(100% - 60px);height:100%;box-sizing:border-box;padding:80px 0 0 0;overflow-y:auto;z-index:0;background:#fff;} #mainNavi .mn_li1.over:before {display:none} #mainNavi .depth1-wrap {position:relative;width:100%;height:100%;overflow-y:auto;overflow-x:hidden} #mainNavi .depth1-ul {position:relative;z-index:1;} #mainNavi .mn_li1 {height:auto;} #mainNavi .mn_li1 .tgl-btn {display:none} #mainNavi .mn_li1 .mn_a1 {display:block;position:relative;box-sizing:border-box;padding:0 60px 0 35px;width:100%;height:auto;background:#fff;letter-spacing:-.05em;z-index:300;text-align:left;border-bottom:1px solid #DFDFDF;font-size:0;transition:all .3s ease} #mainNavi .mn_li1 .mn_a1:before {content:"";display:inline-block;width:0;height:70px;vertical-align:middle} #mainNavi .mn_li1 .mn_a1:after {content:"";display:inline-block;position:absolute;top:50%;right:40px;margin-top:-10px;width:8px;height:8px;border-bottom:2px solid #333333;border-right:2px solid #333333;transform:rotate(45deg);} #mainNavi .mn_li1 .mn_a1 span {display:inline-block;line-height:1.2;font-size:18px;color:#333333;vertical-align:middle;word-wrap:break-word;word-break:keep-all;white-space:normal;font-weight:700} #mainNavi .mn_li1 .mn_a1[target='_blank'] span:after {content:"";display:inline-block;width:12px;height:12px;background:url(/resources/_Img/Common/nwin_spr.png) no-repeat -22px -25px;margin:0 0 0 5px} #mainNavi .mn_li1.is-open {} #mainNavi .mn_li1 .mn_a1.over {background:#313742;border-bottom:1px solid #313742;box-shadow:0 10px 21px rgba(147,152,167,0.4);} #mainNavi .mn_li1 .mn_a1.over span {color:#fff} #mainNavi .mn_li1 .mn_a1.over:after {border-color:#fff;} #mainNavi .mn_li1 .mn_a1[target='_blank'].over span:after {background-position: -44px -25px;} #mainNavi .mn_li1.has-sub .mn_a1 {} #mainNavi .mn_li1.has-sub.is-open .mn_a1 span {color:#313742} #mainNavi .mn_li1.has-sub.is-open .mn_a1:after {margin-top:0;transform:rotate(225deg);border-color:#313742;} #mainNavi .mn_li1.has-sub.is-open .mn_a1.over span {color:#fff} #mainNavi .mn_li1.has-sub.is-open .mn_a1.over:after {margin-top:0;transform:rotate(225deg);border-color:#fff;} #mainNavi .depth2-wrap {display:none;width:100%;height:auto;box-sizing:border-box;background:#f7f7f7;transition:display .3s ease;position:relative;padding:0;box-sizing:border-box} #mainNavi .depth2-wrap .depth2-tit {display:none} #mainNavi .depth2-wrap .mn_li2 {position:relative;padding:0;border-bottom:1px solid #DFDFDF;} #mainNavi .depth2-wrap .mn_li2.has-sub .tgl-btn {display:block;position:absolute;width:30px;height:30px;right:30px;top:14px;z-index:1;border:0;background:transparent} #mainNavi .depth2-wrap .mn_li2.has-sub .tgl-btn:before, #mainNavi .depth2-wrap .mn_li2.has-sub .tgl-btn:after {content:"";display:block;position:absolute;width:14px;height:2px;top:0;right:0;bottom:0;left:0;margin:auto;background:#666;transition:all .3s ease} #mainNavi .depth2-wrap .mn_li2.has-sub .tgl-btn:before {} #mainNavi .depth2-wrap .mn_li2.has-sub .tgl-btn:after {transform:rotate(90deg)} #mainNavi .depth2-wrap .mn_li2.has-sub.is-open {border-bottom:0} #mainNavi .depth2-wrap .mn_li2.has-sub.is-open .tgl-btn:after {transform:rotate(180deg)} #mainNavi .depth2-wrap .mn_li2.has-sub.is-open .mn_a2 span {border-bottom:0} #mainNavi .is-open .depth2-wrap {display:block} #mainNavi .depth2-ul {position:relative;z-index:100;box-sizing:border-box;} #mainNavi .depth2-wrap .mn_a2 {position:relative;display:block;padding:0 35px;font-size:0;} #mainNavi .depth2-wrap .mn_a2 span {display:block;line-height:1;font-size:17px;color:#555555;padding:21px 0 24px;word-wrap:break-word;word-break:keep-all;white-space:normal;} #mainNavi .depth2-wrap .mn_a2[target='_blank'] span:after {content:"";display:inline-block;width:12px;height:12px;background:url(/resources/_Img/Common/nwin_spr.png) no-repeat 0 -25px;margin:0 0 0 5px} #mainNavi .depth2-wrap .mn_li2.is-open .mn_a2[target='_blank'] span:after {background-position:-22px -25px} #mainNavi .depth2-wrap .mn_li2 .tgl-btn {right:20px} #mainNavi .depth2-wrap .mn_li2.has-sub .mn_a2.over:after {display:none} #mainNavi .depth2-wrap .mn_a2.over, #mainNavi .depth2-wrap .is-open .mn_a2 {} #mainNavi .depth2-wrap .mn_a2.over span, #mainNavi .depth2-wrap .is-open .mn_a2 span {color:#0d8ba4} #mainNavi .depth2-wrap .depth3-wrap {display:block;padding:15px 15px} #mainNavi .depth2-wrap .mn_li2.is-close .depth3-wrap {display:none} #mainNavi .depth2-wrap .depth3-wrap {box-sizing:border-box;padding:13px 35px 12px;border-top:1px solid #DFDFDF;border-bottom:1px solid #DFDFDF;} #mainNavi .depth2-wrap .depth3-wrap li {margin:0;} #mainNavi .depth2-wrap .depth3-wrap li:last-child {margin:0;} #mainNavi .depth2-wrap .depth3-wrap li a {display:block;position:relative;display:block;padding:0 0 0 13px;box-sizing:border-box;font-size:15px;color:#555555;} #mainNavi .depth2-wrap .depth3-wrap li a:after {content:"";display:block;position:absolute;width:4px;height:4px;background:#555555;top:10px;left:0;border-radius:50%;transition:all .3s ease} #mainNavi .depth2-wrap .depth3-wrap li a span {display:inline-block;position:relative;padding:4px 0;line-height:1.2} #mainNavi .depth2-wrap .depth3-wrap li a[target='_blank'] span:after {display:inline-block;content:"";width:12px;height:12px;vertical-align:middle;margin:-2px 0 0px 5px;background:url(/resources/_Img/Common/nwin_spr.png) no-repeat 0 -25px} #mainNavi .depth2-wrap .depth3-wrap li.over a {color:#009fbf} #mainNavi .depth2-wrap .depth3-wrap li.over a:after {background:#009fbf;} #mn-ctrs-btns {display:block;position:absolute;right:0;top:0;z-index:5555} #mn-ctrs-btns .mn-ctrs-btn {position:relative;display:block;width:60px;height:60px;box-sizing:border-box;border:0;background:#009fbf;border-radius:15px 0 15px 0;} #mn-ctrs-btns .mn-ctrs-btn:before, #mn-ctrs-btns .mn-ctrs-btn span, #mn-ctrs-btns .mn-ctrs-btn:after {content:"";display:block;position:absolute;width:20px;height:2px;background:#fff;top:0;right:0;bottom:0;left:0;font-size:0;transition:all .3s ease} #mn-ctrs-btns .mn-ctrs-btn:before {margin:20px auto auto auto} #mn-ctrs-btns .mn-ctrs-btn span {margin:auto} #mn-ctrs-btns .mn-ctrs-btn:after {margin:auto auto 20px 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} } @media all and (max-width:399px) { #mainNavi .mn_li1 .mn_a1 {padding:0 40px 0 35px;} #mainNavi .mn_li1 .mn_a1:after {right:20px;} #mainNavi .depth2-wrap .mn_li2.has-sub .tgl-btn {right:10px;} } /*-------------------------submenu_ipsi.css------------------------------------*/ #side-wrap {display:none} @media all and (min-width:1000px){ #side-wrap {display:block;position:absolute;bottom:-40px;left:50%;width:100%;max-width:1400px;transform:translateX(-50%);border-radius: 20px 20px 0px 0px;background: #FFF;box-shadow: 0px 5px 10px 0px rgba(55, 67, 89, 0.10);z-index:1;} #side-wrap .lm-tit, #side-wrap .tgl-btn, #side-wrap .lm_a1 {display:none;} #side-wrap .depth2 {height:80px;display:flex;align-items:center;justify-content:center;} #side-wrap .depth2 > li {position:relative;padding:0 30px;height:100%;text-align:center;} #side-wrap .depth2 > li:before {display:block;content:'';position:absolute;top:50%;left:0;margin-top:2px;width:2px;height:18px;background:#E5E5E5;transform:translateY(-50%);} #side-wrap .depth2 > li:first-child:before {display:none;} #side-wrap .depth2 .lm_a2 {position:relative;display:flex;align-items:center;height:100%;color:#313742;font-size:21px;transition:all .3s ease;} #side-wrap .depth2 .over .lm_a2 {color:#066C70;font-weight:700;} #side-wrap .depth2 .over .lm_a2:before {display:block;content:'';position:absolute;bottom:0;left:0;width:100%;height:6px;background:#066C70;border-radius: 6px 6px 0px 0px;transition:all .3s ease;} #side-wrap .depth2 .lm_a2:focus, #side-wrap .depth2 .lm_a2:hover {color:#066C70;} } @media all and (min-width:1000px) and (max-width:1399px){ #side-wrap .depth2 > li {padding:0 20px;} } @media all and (min-width:1000px) and (max-width:1199px){ #side-wrap .depth2 > li {padding:0 15px;} #side-wrap .depth2 .lm_a2 {font-size:18px;} } @media all and (max-width:768px){ #side-wrap {display:none;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:block;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_ipsi.css------------------------------------*/ #footer-wrap {position:relative;z-index:3000;background:#20242B;padding-bottom:100px;} #footer-wrap .ft-wr {position:relative;padding:0;line-height:1.2;max-width:1440px;margin:0 auto;padding:0 20px;box-sizing:border-box;} #footer-wrap .ftSvce {position:relative;box-sizing:border-box;padding:0 250px 0 0;border-bottom:1px solid rgba(49, 55, 66, 0.6);} #footer-wrap .ftSvce .fts-link {position:relative;padding:25px 0 18px} #footer-wrap .ftSvce .fts-link button {display:none;position:absolute;top:50%;margin-top:-11px;width:22px;height:22px;text-align:left;border:0;background-color:#20242B;z-index:1;} #footer-wrap .ftSvce .fts-link button:before {content:'';display:block;position:absolute;top:0;width:15px;height:100%;} #footer-wrap .ftSvce .fts-link button:after {content:'';display:block;position:absolute;top:50%;left:0;margin-top:-8px;width:15px;height:15px;border-bottom:1px solid #7E8085;border-right:1px solid #7E8085;transition:transform .3s ease} #footer-wrap .ftSvce .fts-link button:hover:after {} #footer-wrap .ftSvce .fts-link button:last-child {margin-bottom:0} #footer-wrap .ftSvce .fts-link button span {position:relative;display:inline-block;width:auto;} #footer-wrap .ftSvce .fts-link button span:before {content:'';display:block;width:100%;height:0;background-color:rgba(255,255,255,.4);position:absolute;bottom:8px;left:0;transition:all .5s ease} #footer-wrap .ftSvce .fts-link button:hover span:before {height:8px} #footer-wrap .ftSvce .fts-link .btn-prev {left:0;} #footer-wrap .ftSvce .fts-link .btn-next {right:0;} #footer-wrap .ftSvce .fts-link .btn-prev:after {left:3px;transform:rotate(135deg);} #footer-wrap .ftSvce .fts-link .btn-next:after {left:3px;transform:rotate(-45deg);} #footer-wrap .ftSvce .fts-link .service-list {position:relative;line-height:1;height:37px;white-space:nowrap;overflow-x:auto;overflow-y:hidden;font-size:0;scroll-behavior:smooth;-webkit-overflow-scrolling:touch} #footer-wrap .ftSvce .fts-link .service-list::-webkit-scrollbar {display:none} #footer-wrap .ftSvce .fts-link .service-list li {display:inline-block;vertical-align:top;position:relative;box-sizing:border-box;padding:0 17px;} #footer-wrap .ftSvce .fts-link .service-list li:first-child {padding-left:0;} #footer-wrap .ftSvce .fts-link .service-list li:last-child {padding-right:0;} #footer-wrap .ftSvce .fts-link .service-list a {display:block;font-size:17px;color:#fff;letter-spacing:-0.85px;padding:10px 0;transition:all .3s ease} #footer-wrap .ftSvce .fts-link .service-list a.privacy {color:#009FBF !important;} #footer-wrap .ftSvce .fts-link .service-list a.terms {color:#FFF855 !important;} #footer-wrap .ftSvce .fts-link .service-list a span {display:block;line-height:1} #footer-wrap .ftSvce .fts-link .service-list a:focus, #footer-wrap .ftSvce .fts-link .service-list a:hover {color:#fff;text-decoration:underline;} #footer-wrap .ftSvce .fts-link.is-scroll .service-list {padding:0 15px} #footer-wrap .ftSvce .fts-link.is-scroll .service-list li:first-child a {margin-left:24px} #footer-wrap .ftSvce .fts-link.is-scroll button {display:block} #footer-wrap .ftSvce .fts-link.is-scroll .btn-prev:before {left:100%;background:linear-gradient(90deg, rgba(18, 30, 44, 1), rgba(18, 30, 44, 0))} #footer-wrap .ftSvce .fts-link.is-scroll .btn-next:before {right:100%;background:linear-gradient(270deg, rgba(18, 30, 44, 1), rgba(18, 30, 44, 0))} /* SNS */ #footer-wrap .ft-sns {position:absolute;top:34px;right:0;} #footer-wrap .ft-sns ul {display:flex;flex-flow:row wrap;} #footer-wrap .ft-sns ul li {margin-left:20px;} #footer-wrap .ft-sns ul li:first-child {margin-left:0;} #footer-wrap .ft-sns a {display:block;position:relative;width:25px;height:20px;font-size:0;color:transparent;opacity:0.6;transition:all .3s ease;} #footer-wrap .ft-sns a:after {display:block;content:'';position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;background:no-repeat 0 0;transition:all .3s ease;} #footer-wrap .ft-sns a.facebook:after {width:9px;height:18px;background-image:url(/resources/_Templet/Layout/layout_ipsi/Img/sns_facebook.png);} #footer-wrap .ft-sns a.insta:after {width:20px;height:19px;background-image:url(/resources/_Templet/Layout/layout_ipsi/Img/sns_insta.png);} #footer-wrap .ft-sns a.youtube:after {width:23px;height:16px;background-image:url(/resources/_Templet/Layout/layout_ipsi/Img/sns_youtube.png);} #footer-wrap .ft-sns a.naverblog:after {width:23px;height:18px;background-image:url(/resources/_Templet/Layout/layout_ipsi/Img/sns_naverblog.png);} #footer-wrap .ft-sns a.daumcafe:after {width:13px;height:15px;background-image:url(/resources/_Templet/Layout/layout_ipsi/Img/sns_zepeto.png);} #footer-wrap .ft-sns a:focus, #footer-wrap .ft-sns a:hover {opacity:1;} /* 로고 */ #footer-wrap .ftInfo {box-sizing:border-box;position:relative;padding-left:330px;padding-right:500px;padding-top:35px;} #footer-wrap .flogo {position:absolute;top:30px;left:0;} /* 주소 */ #footer-wrap .ftInfo .fti-addr dl {display:block;box-sizing:border-box;position:relative;} #footer-wrap .ftInfo .fti-addr dl dd {display:block;line-height:22px;color:#ccc;font-size:15px;font-weight:700;letter-spacing:-0.75px;} #footer-wrap .ftInfo .fti-addr dl dd address {display:block;vertical-align:top;margin:0 0 3px;word-wrap:break-word;word-break:keep-all;white-space:normal} #footer-wrap .ftInfo .fti-addr dl dd address .name {display:inline-block;padding-left:5px;color:#fff;} #footer-wrap .ftInfo .fti-addr dl dd ul {display:block;vertical-align:top} #footer-wrap .ftInfo .fti-addr dl dd ul li {display:inline-block;vertical-align:top;margin-right:20px;word-wrap:break-word;word-break:keep-all;white-space:normal} #footer-wrap .ftInfo .fti-addr dl dd ul li:last-child {margin-right:0} #footer-wrap .ftInfo .fti-copy {display:block;font-size:15px;letter-spacing:-0.75px;line-height:1.3;color:#878787;margin-top:24px;font-weight:700;} /* 패밀리 사이트 */ #footer-wrap .fts-fmls {position:absolute;top:40px;right:0;width:480px} #footer-wrap .fts-fmls .fmlsPkg {display:flex;flex-wrap:wrap;justify-content:space-between;row-gap:10px;} #footer-wrap .fts-fmls .fmlsPkg button {display:block;width:215px;text-align:left;border:0;background-color:transparent;color:#fff;font-size:16px;line-height:1.875;position:relative;} #footer-wrap .fts-fmls .fmlsPkg button:after {content:'';display:block;width:21px;height:21px;background-image:url(/resources/_Templet/Layout/layout_kor/Img/fmlspkg_deco.png);position:absolute;top:50%;transform:translateY(-50%);right:0;transition:transform .3s ease} #footer-wrap .fts-fmls .fmlsPkg button:hover:after {transform:translateY(-50%) rotate(90deg)} #footer-wrap .fts-fmls .fmlsPkg button:last-child {margin-bottom:0} #footer-wrap .fts-fmls .fmlsPkg button span {position:relative;display:inline-block;width:auto;} #footer-wrap .fts-fmls .fmlsPkg button span:before {content:'';display:block;width:100%;height:0;background-color:rgba(255,255,255,.2);position:absolute;bottom:8px;left:0;transition:all .5s ease} #footer-wrap .fts-fmls .fmlsPkg button:hover span:before {height:8px} #layout-popup-wrap.fLinksPopUp {} #layout-popup-wrap.fLinksPopUp #popup-wrap {position:relative;border-radius:34px;overflow:hidden;isolation:isolate;min-width:300px} #layout-popup-wrap.fLinksPopUp #popup-wrap:before {content:" ";display:block;position:absolute;left:0;bottom:0;z-index:-1;width:320px;height:101px;background-image:url(/resources/_Img/Popup/foot_bg_01.png)} #layout-popup-wrap.fLinksPopUp #popup-wrap:after {content:" ";display:block;position:absolute;width:291px;height:270px;right:0;bottom:0;background-image:url(/resources/_Img/Popup/foot_bg_02.png);z-index:-1} #layout-popup-wrap.fLinksPopUp #popup-wrap .pop-head {border-radius:30px 30px 0 0;background:linear-gradient(to right,#009FBF,#839E00)} #layout-popup-wrap.fLinksPopUp #popup-wrap .pop-head .htit {font-family:'ONE-Mobile-Title', sans-serif;font-size:1.33em;margin-top:5px} #layout-popup-wrap.fLinksPopUp > #popup-wrap .pop-cont {margin:40px} #layout-popup-wrap.fLinksPopUp > #popup-wrap .pop-cont::-webkit-scrollbar {width:10px} #layout-popup-wrap.fLinksPopUp > #popup-wrap .pop-cont::-webkit-scrollbar-thumb {background:linear-gradient(to bottom,#009FBF,#839E00);border-radius:5px;opacity:.5;box-shadow:0 10 20px #3743591A} #layout-popup-wrap.fLinksPopUp > #popup-wrap .pop-cont::-webkit-scrollbar-track {background-color:#efefef;border-radius:5px} #layout-popup-wrap.fLinksPopUp > #popup-wrap .pop-cont .profList {display:flex;flex-wrap:wrap;justify-content:flex-start} #layout-popup-wrap.fLinksPopUp > #popup-wrap .pop-cont .profList > li {position:relative;width:33.33%;max-width:188px;margin-bottom:13px;box-sizing:border-box;padding:0 12px} #layout-popup-wrap.fLinksPopUp > #popup-wrap .pop-cont .profList > li:before {content:" ";display:block;position:absolute;left:0;top:12px;width:4px;height:4px;border-radius:50%;background-color:#839e00} #layout-popup-wrap.fLinksPopUp > #popup-wrap .pop-cont .profList > li > a > span {font-size:16px} #layout-popup-wrap.fLinksPopUp .page-btns .-cg-btn {background:#005667;border:0;padding:12px 25px;border-radius:30px;font-family:'ONE-Mobile-Regular', sans-serif;font-size:16px;color:#fff;font-weight:500} #layout-popup-wrap.fLinksPopUp > #popup-wrap .pop-btn-1 {right:10px;top:10px;width:50px;height:50px;border-radius:20px} #layout-popup-wrap.fLinksPopUp #popup-wrap .btn-close {background:transparent} #layout-popup-wrap.fLinksPopUp #popup-wrap .btn-close:before, #layout-popup-wrap.fLinksPopUp #popup-wrap .btn-close:after {content:" ";display:block;position:absolute;width:30px;height:3px;border-radius:2px;background:#fff;top:0;bottom:0;left:10px;right:auto;margin:auto;transition:transform .3s ease} #layout-popup-wrap.fLinksPopUp #popup-wrap .btn-close:before {transform:rotate(45deg)} #layout-popup-wrap.fLinksPopUp #popup-wrap .btn-close:after {transform:rotate(135deg)} #layout-popup-wrap.fLinksPopUp #popup-wrap .btn-close:hover:before {transform:rotate(135deg)} #layout-popup-wrap.fLinksPopUp #popup-wrap .btn-close:hover:after {transform:rotate(225deg)} @media all and (max-width:1299px) { #footer-wrap {padding-bottom:150px} #footer-wrap .ftInfo {padding-left:250px;padding-right:250px;} #footer-wrap .fts-fmls {top:20px;width:200px} #footer-wrap .fts-fmls .fmlsPkg button {width:100%;} } @media all and (max-width:999px) { #footer-wrap {z-index:2;} #footer-wrap .ftSvce .fts-link {padding:15px 0;} #footer-wrap .ftSvce .fts-link ul li {padding:0 10px;} #footer-wrap .ftSvce .fts-link a {font-size:15px;padding:5px 0;} #footer-wrap .ft-sns {top:18px;} #footer-wrap .ftInfo {padding-left:0;padding-right:250px;padding-top:20px;} #footer-wrap .flogo {position:relative;top:auto;left:auto;padding-bottom:20px;} #footer-wrap .flogo img {width:150px;} #footer-wrap .ftInfo .fti-addr dl dd {line-height:20px;font-size:13px;letter-spacing:0;} #footer-wrap .ftInfo .fti-copy {font-size:13px;letter-spacing:0;margin-top:20px;} #footer-wrap .fts-fmls {top:30px;} } @media all and (max-width:799px) { #footer-wrap {padding-bottom:40px} #footer-wrap .ftSvce {padding:0;border-bottom:1px solid rgba(49, 55, 66, 0.6);} #footer-wrap .ft-sns {position:relative;top:auto;right:auto;border-top:1px solid rgba(49, 55, 66, 0.6);padding:15px 0;} #footer-wrap .ft-sns ul {justify-content: center;} #footer-wrap .ftInfo {padding-right:0;text-align:center;} #footer-wrap .flogo {padding-top:40px;} #footer-wrap .fts-fmls {position:relative;top:auto;right:auto;width:100%;} #footer-wrap .fts-fmls .fmlsPkg button {width:46%;} } @media all and (max-width:499px) { #footer-wrap .fts-fmls .fmlsPkg button {width:100%;} } .site-mark {position:absolute;right:0;bottom:-80px;width:102px;height:70px;/*width:1400px;position:absolute;bottom:-80px;left:50%;transform:translateX(-50%);text-align:right*/} .site-mark > * {display:inline-block;width:102px;height:70px} .site-mark > * img {width:100%} @media all and (max-width:1299px) { .site-mark {bottom:-130px} } @media all and (max-width:799px) { .site-mark {position:relative;right:auto;bottom:auto;margin:0 auto;width:76px;height:52px;} .site-mark {text-align:center;margin-top:20px} .site-mark > * {display:block;width:76px;height:52px;margin:0 auto} }