/*-------------------------layout_dep.css------------------------------------*/ @charset "utf-8"; /* ============================== * 이전, 다음메뉴 검수용 스타일링 ================================= */ /* .node-Stdd {position:relative;box-sizing:border-box;border:3px solid #f00} .node-Stdd:before {content:"기준";display:block;position:absolute;right:3px;top:50%;transform:translateY(-50%);color:#000;font-size:13px;font-weight:bold;letter-spacing:-.05em;z-index:9;color:#f00} .node-Prev {position:relative;box-sizing:border-box;border:3px solid #000} .node-Prev:before {content:"이전";display:block;position:absolute;right:3px;top:50%;transform:translateY(-50%);color:#000;font-size:13px;font-weight:bold;letter-spacing:-.05em;z-index:9;color:#000} .node-Next {position:relative;box-sizing:border-box;border:3px solid #00f} .node-Next:before {content:"다음";display:block;position:absolute;right:3px;top:50%;transform:translateY(-50%);color:#000;font-size:13px;font-weight:bold;letter-spacing:-.05em;z-index:9;color:#00f} */ html, body {overflow:hidden;overflow-y:visible} #doc-wrap {color:#555;position:relative;min-width:1400px;max-width:1920px;overflow:hidden;margin:0 auto;font-size:18px;letter-spacing:-.04em;line-height:1.389} .div-cont {max-width:1400px;margin:0 auto;position:relative} @media all and (max-width:1460px){ #doc-wrap {min-width:320px} .div-cont {margin:0 30px} } @media all and (max-width:999px){ #doc-wrap {font-size:17px} } @media all and (max-width:768px){ #doc-wrap {font-size:16px} .div-cont {margin:0 20px} } @media all and (max-width:499px){ #doc-wrap {font-size:15px} } /* 스킵네비게이션 */ #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 {background:#fff;box-shadow: 0px 8px 9.5px 0.5px rgba(0, 0, 0, 0.05);font-family:"SCoreDream", sans-serif;font-weight:400;position:relative;height:140px;margin:0 auto;z-index:10} #header {display:block;position:relative;width:100%;height:100px;margin:0 auto;z-index:11} @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 (max-width:999px) { #header-wrap {height:auto} #header {height:70px;z-index:100} } .eng {font-family:basic-sans, sans-serif;letter-spacing:0;} .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;z-index:502} .body-slider-ovclick.show {height:100%;opacity:1} .body-slider-ovclick.hide {opacity:0} /* svisual */ #svisual-wrap {font-family:"SCoreDream", sans-serif;font-weight:400;position:relative;/* max-width:1820px; */box-sizing:border-box;padding:0 100px;z-index:600;transition:all .3s ease} #svisual-wrap .svisual {height:350px;position:relative} #svisual-wrap .svis-deco {/*background:#fff;*/color:#e6e6e6;font-size:1.667em;font-family:basic-sans, sans-serif;font-weight:700;position:absolute;top:0;right:0;transform:translate(100%, 0) rotate(90deg);transform-origin:top left;height:100px;box-sizing:border-box;padding-left:100px;display:flex;align-items:center;z-index:1} #svisual-wrap .svis-deco:after {content:"";display:block;width:255px;height:1px;background:#ededed;margin-left:20px} #svisual-wrap .txtBox {display:flex;align-items:center;max-width:1400px;height:100%;margin:0 auto;box-sizing:border-box;position:absolute;top:0;left:0;right:0;z-index:2} #svisual-wrap .txtBox .txtPkg {display:block;width:100%;text-align:center} #svisual-wrap .txtBox .txtPkg:before, #svisual-wrap .txtBox .txtPkg:after {content:'';display:block;width:212px;background:url(/resources/_Templet/Layout/layout_dep/Img/layout_spr.png) no-repeat;margin:auto;opacity:0;transition:all .4s ease} #svisual-wrap .txtBox .txtPkg:before {height:51px;margin-bottom:20px;transform:translateY(-20px)} #svisual-wrap .txtBox .txtPkg:after {background-position:0 -61px;height:83px;margin-top:8px;transform:translateY(20px)} #svisual-wrap .txtBox .txtPkg > span {display:block;box-sizing:border-box;position:relative;line-height:1.2;color:#fff;opacity:0;transform:translateY(30px)} #svisual-wrap .txtBox .txtPkg .eng {font-weight:700;letter-spacing:.3em;transition:all .4s ease .2s} #svisual-wrap .txtBox .txtPkg .txt1 {font-size:2.667em;font-weight:500;transition:all .4s ease .4s} #svisual-wrap .txtBox .txtPkg .txt2 {margin:17px 0 0;transition:all .4s ease .6s} #svisual-wrap .imgBox {display:block;position:relative;height:100%;overflow:hidden;margin-left:-100px} #svisual-wrap .imgBox img {display:block;position:absolute;width:auto;height:100%;top:0;right:0;z-index:1;transform:scale(1.2);transition:transform 3s ease} .loaded #svisual-wrap .txtBox .txtPkg:before, .loaded #svisual-wrap .txtBox .txtPkg:after {opacity:1;transform:translateY(0)} .loaded #svisual-wrap .txtBox .txtPkg .eng {opacity:.7;transform:translateY(0)} .loaded #svisual-wrap .txtBox .txtPkg .txt1 {opacity:1;transform:translateY(0)} .loaded #svisual-wrap .txtBox .txtPkg .txt2 {opacity:.7;transform:translateY(0)} .loaded #svisual-wrap .imgBox img {transform:scale(1)} @media all and (max-width:1459px){ #svisual-wrap {padding:0 50px} #svisual-wrap .svis-deco {height:50px;padding-left:30px} #svisual-wrap .svis-deco:after {width:155px} } @media all and (max-width:999px){ #svisual-wrap {padding:0} #svisual-wrap .svisual {height:280px} #svisual-wrap .svis-deco {display:none} #svisual-wrap .txtBox .txtPkg:before, #svisual-wrap .txtBox .txtPkg:after {width:170px;background-size:170px auto} #svisual-wrap .txtBox .txtPkg:before {height:41px;margin-bottom:1em} #svisual-wrap .txtBox .txtPkg:after {background-position:0 -49px;height:67px} #svisual-wrap .txtBox .txtPkg .txt1 {font-size:2.367em} } @media all and (max-width:768px){ #svisual-wrap .svisual {height:210px} #svisual-wrap .txtBox .txtPkg:before, #svisual-wrap .txtBox .txtPkg:after {width:128px;background-size:128px auto} #svisual-wrap .txtBox .txtPkg:before {height:31px} #svisual-wrap .txtBox .txtPkg:after {background-position:0 -37px;height:50px} #svisual-wrap .txtBox .txtPkg .eng {font-size:.889em} #svisual-wrap .txtBox .txtPkg .txt1 {font-size:2em} #svisual-wrap .imgBox {margin-left:0} #svisual-wrap .imgBox img {left:50%;right:auto;transform:translateX(-50%) scale(1.2)} .loaded #svisual-wrap .imgBox img {transform:translateX(-50%) scale(1)} } @media all and (max-width:499px){ #svisual-wrap .txtBox .txtPkg:before, #svisual-wrap .txtBox .txtPkg:after {width:110px;background-size:110px auto} #svisual-wrap .txtBox .txtPkg:before {height:25px;margin-bottom:10px} #svisual-wrap .txtBox .txtPkg:after {background-position:0 -32px;height:44px} #svisual-wrap .txtBox .txtPkg .eng {font-size:10px} #svisual-wrap .txtBox .txtPkg .txt1 {font-size:1.6em} } /* cont-navi */ #cont-navi {border:2px solid #ddd;border-top:0;border-left:0;display:block;position:relative;padding-left:100px;margin-left:-100px;z-index:12} #cont-navi .cnavi {display:flex;flex-direction:row;line-height:1.2;padding-left:130px;box-sizing:border-box} #cont-navi .home {background:#12213a;box-sizing:border-box;color:#fff;font-size:.944em;font-weight:600;display:block;width:130px;height:120px;padding-top:30px;position:absolute;top:2px;left:0;margin-top:-30px;text-align:center;overflow:hidden;z-index:10} #cont-navi .home:before {content:'';display:block;width:100%;height:100%;border-radius:50%;background:#fff;position:absolute;top:100%;left:0;width:100%;height:100%;position:absolute;top:-100%;left:50%;margin-left:-50%;transform:scale(0);-ms-transform:scale(0);transition:all .7s ease;opacity:.05;z-index:-1} #cont-navi .home span:before {content:'';display:block;background:url(/resources/_Templet/Layout/layout_dep/Img/layout_spr.png) no-repeat 0 -154px;width:46px;height:46px;margin:0 auto} #cont-navi .home:hover:before, #cont-navi .home:focus:before {transform:scale(2);-ms-transform:scale(2);top:0} #cont-navi dl {position:relative;width:280px;margin-left:-1px;z-index:5} #cont-navi dl dt {display:block;height:100%} #cont-navi dl dt a {display:flex;flex-flow:row;align-items:center;border-right:1px solid #ddd;border-left:1px solid #ddd;position:relative;height:90px;padding:0 75px 0 20px;box-sizing:border-box;text-align:left;transition:all .3s ease} #cont-navi dl dt a .txt {display:inline-block;position:relative;font-weight:500;color:#333;word-wrap:break-word;word-break:keep-all;white-space:normal;transition:all .3s ease} #cont-navi dl dt a .blt {display:block;width:40px;height:40px;background:#c3c3c3;border-radius:50%;position:absolute;top:0;right:30px;bottom:0;margin:auto} #cont-navi dl dt a .blt:after {content:"";display:block;position:absolute;width:8px;height:8px;border:solid;border-width:0 0 2px 2px;border-color:transparent transparent #fff #fff;position:absolute;top:0;right:0;left:0;bottom:0;margin:auto;transform:translateY(-25%) rotate(-45deg);-ms-transform:translateY(-25%) rotate(-45deg);transition:all .3s ease} #cont-navi dl:first-child {margin-left:0} #cont-navi dl:first-child dt a {border-left:0} #cont-navi dl.over dt a {background:#fff} #cont-navi dl.over dt a:after {border-color:#333} #cont-navi dl.over dt a .txt {color:#333} #cont-navi dl.over dt a .blt {background:#da262e} #cont-navi dl.over dt a .blt:after {transform:translateY(25%) rotate(135deg);-ms-transform:translateY(25%) rotate(135deg)} #cont-navi .sub-list {display:none;position:absolute;top:100%;left:0;background:#fff;border-width:2px 1px 1px;border-style:solid;border-color:#ddd;width:100%;box-sizing:border-box;box-shadow:0px 15px 25px 0px rgba(172, 30, 37, 0.15);} #cont-navi .sub-list ul {display:block} #cont-navi .sub-list li .mn_a1 {position:relative;display:flex;align-items:center;font-size:.889em;padding:0 55px 0 30px;height:60px;text-align:left;transition:color .15s ease} #cont-navi .sub-list li .mn_a1:after {content:'';display:block;width:21px;height:21px;background:#fff url(/resources/_Templet/Layout/layout_dep/Img/layout_spr.png) no-repeat 0 -210px;border-radius:50%;position:absolute;top:0;right:29px;bottom:0;margin:auto;opacity:0;transition:background-position .3s} #cont-navi .sub-list li .mn_a1[target='_blank'] span:after {display:inline-block;content:"";width:12px;height:12px;vertical-align:middle;margin:0 0 1px 10px;background:url(/resources/_Img/Common/nwin_spr.png) no-repeat -22px -22px} #cont-navi .sub-list li.isOver a {background:#da262e;color:#fff;text-decoration:underline} #cont-navi .sub-list li.isOver a:after {opacity:1} #cont-navi .sub-list li.isOver a:hover:after, #cont-navi .sub-list li.isOver a:focus:after {background-position-x:3px} #cont-navi .sub-list li:not(.isOver) .mn_a1:focus, #cont-navi .sub-list li:not(.isOver) .mn_a1:hover {background:#e8e8e8} @media all and (max-width:1459px){ #cont-navi {padding-left:0;margin-left:-80px} } @media all and (max-width:1399px){ #cont-navi .cnavi {padding:0 130px 0 100px} #cont-navi .home {width:100px;height:90px;padding-top:15px;margin-top:-20px} #cont-navi dl {width:33.333%} #cont-navi dl dt a {height:70px} } @media all and (max-width:999px){ #cont-navi {border-right:0;margin-left:-30px} #cont-navi .cnavi {padding-left:90px} #cont-navi .home {width:90px} #cont-navi dl dt a {padding:0 50px 0 15px} #cont-navi dl dt a .blt {width:30px;height:30px;right:15px} #cont-navi .sub-list li .mn_a1 {height:50px;padding:0 40px 0 15px} #cont-navi .sub-list li .mn_a1:after {right:15px} } @media all and (max-width:768px) { #cont-navi {display:none} } #cont-util {position:relative;z-index:15} #cont-util button {box-sizing:border-box;border:0;background:transparent} #cont-util .boxUtil {position:absolute;bottom:2px;right:0;display:flex;align-items:center;height:90px} #cont-util .boxUtil .unit {margin:0 0 0 5px;position:relative} #cont-util .boxUtil .unit .btn-cast {width:50px;height:50px;background:url(/resources/_Templet/Layout/layout_dep/Img/layout_spr.png) no-repeat -56px -154px;border:2px solid #c3c3c3;border-radius:50%;position:relative;trnasition:background-color .25s, border-color .25s} #cont-util .boxUtil .unit .btn-share {background-position:-112px -154px} #cont-util .boxUtil .unit .btn-cast.is-open, #cont-util .boxUtil .unit .btn-cast:hover, #cont-util .boxUtil .unit .btn-cast:focus {background-position-y:-210px} #cont-util .boxUtil .unit .btn-print:hover, #cont-util .boxUtil .unit .btn-print:focus {background-color:#12213a;border-color:#12213a} #cont-util .boxUtil .unit .btn-share.is-open, #cont-util .boxUtil .unit .btn-share:hover, #cont-util .boxUtil .unit .btn-share:focus {background-color:#da262e;border-color:#da262e} #cont-util .boxUtil .sns-list {display:none;box-sizing:border-box;white-space:nowrap;position:absolute;top:100%;right:-25px;margin:17px 0 0;z-index:100} #cont-util .boxUtil .sns-list.is-open {display:block} #cont-util .boxUtil .sns-list .inwr {background:#fff;border:2px solid #da262e;display:flex;flex-flow:row;align-items:center;padding:8px 9px 8px 23px;position:relative;opacity:0} #cont-util .boxUtil .sns-list .inwr:before, #cont-util .boxUtil .sns-list .inwr:after {content:"";display:block;border-style:solid;width:0;height:0;position:absolute;bottom:100%;opacity:0} #cont-util .boxUtil .sns-list .inwr:before {border-width:0 7px 11px;border-color:transparent transparent #da262e;right:42px} #cont-util .boxUtil .sns-list .inwr:after {border-width:0 5px 9px;border-color:transparent transparent #fff;right:44px} #cont-util .boxUtil .sns-list.is-open .inwr {border-radius:999px;opacity:1;transition:opacity .35s ease, border-radius 3s ease .5s} #cont-util .boxUtil .sns-list.is-open .inwr:before, #cont-util .boxUtil .sns-list.is-open .inwr:after {opacity:1} #cont-util .boxUtil .sns-list .tit {display:block;font-size:.889em;font-weight:400;margin-right:18px} #cont-util .boxUtil .sns-list button {display:block;width:40px;height:40px;position:relative;font-size:0;overflow:hidden} #cont-util .boxUtil .sns-list ul {display:block;font-size:0;white-space:nowrap} #cont-util .boxUtil .sns-list li {display:inline-block;box-sizing:border-box;position:relative;vertical-align:top;margin:0 5px 0 0} #cont-util .boxUtil .sns-list li:last-child {margin:0} #cont-util .boxUtil .sns-list li button {background:url(/resources/_Templet/Layout/layout_dep/Img/layout_spr.png) no-repeat 0 -266px;border-radius:50%;transition:box-shadow .25s} #cont-util .boxUtil .sns-list li button:hover, #cont-util .boxUtil .sns-list li button:focus {box-shadow:0px 4px 4px 1px rgba(0, 0, 0, 0.3);} #cont-util .boxUtil .sns-list li .btn-face {background-color:#395999;background-position:0 -266px} #cont-util .boxUtil .sns-list li .btn-twit {background-color:#55acef;background-position:-50px -266px} #cont-util .boxUtil .sns-list li .btn-blog {background-color:#1dc800;background-position:-100px -266px} #cont-util .boxUtil .sns-list li .btn-band {background-color:#e42497;background-position:-150px -266px} #cont-util .boxUtil .sns-list .sns-closer:before, #cont-util .boxUtil .sns-list .sns-closer:after {content:"";display:block;background:#999;box-sizing:border-box;width:20px;height:2px;position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;transition:all .3s ease} #cont-util .boxUtil .sns-list .sns-closer:before {transform:rotate(45deg)} #cont-util .boxUtil .sns-list .sns-closer:after {transform:rotate(135deg)} #cont-util .boxUtil .sns-list .sns-closer:hover:before, #cont-util .boxUtil .sns-list .sns-closer:focus:before {transform:rotate(135deg)} #cont-util .boxUtil .sns-list .sns-closer:hover:after, #cont-util .boxUtil .sns-list .sns-closer:focus:after {transform:rotate(225deg)} @media all and (max-width:1660px) { #cont-util .boxUtil {right:30px} } @media all and (max-width:1459px) { #cont-util .boxUtil {right:0} } @media all and (max-width:1399px){ #cont-util .boxUtil {height:70px} } @media all and (max-width:999px){ #cont-util .boxUtil .unit .btn-cast {width:40px;height:40px;background-size:170px auto;background-position:-45px -124px} #cont-util .boxUtil .unit .btn-share {background-position:-90px -124px} #cont-util .boxUtil .unit .btn-cast.is-open, #cont-util .boxUtil .unit .btn-cast:hover, #cont-util .boxUtil .unit .btn-cast:focus {background-position-y:-168px} #cont-util .boxUtil .sns-list .inwr:before {right:37px} #cont-util .boxUtil .sns-list .inwr:after {right:39px} #cont-util .boxUtil .sns-list li button {width:32px;height:32px;background-size:170px auto;background-position:0 -213px} #cont-util .boxUtil .sns-list li .btn-face {background-color:#395999;background-position:0 -213px} #cont-util .boxUtil .sns-list li .btn-twit {background-color:#55acef;background-position:-40px -213px} #cont-util .boxUtil .sns-list li .btn-blog {background-color:#1dc800;background-position:-80px -213px} #cont-util .boxUtil .sns-list li .btn-band {background-color:#e42497;background-position:-120px -213px} } @media all and (max-width:768px){ #cont-util {display:none} } /* contents */ #container-wrap {position:relative;z-index:1} #contents {position:relative;max-width:1400px;margin:82px auto 0;min-height:600px;z-index:9} #contents:after {content:'';clear:both;display:block} #contents .cont-top {position:relative;margin-bottom:41px} #contents .cont-top .cont-tit {font-family:"SCoreDream", sans-serif;font-size:45px;color:#000;font-weight:700;text-align:center} #contents #cont {padding:0 0 70px;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:-.05em;font-family:"Noto Sans KR"} @media all and (max-width:1440px) { #contents {margin:53px 0 0} } @media all and (max-width:999px){ #contents {width:auto;max-width:100%;float:none} #contents .cont-top .cont-tit {font-size:34px;line-height:1.2} } @media all and (max-width:768px){ #contents {margin-top:0} #contents .cont-top {padding:30px 0;margin-bottom:0;border:0} #contents .cont-top .cont-tit {font-size:28px;position:relative} } @media all and (max-width:699px) { #contents .cont-top {padding:24px 25px 27px} } @media all and (max-width:599px) { #contents #cont {padding-bottom:30px} } @media all and (max-width:499px) { #contents #cont {font-size:15px} } @media all and (max-width:399px) { #contents .cont-top .cont-tit {font-size:22px} } /* 컨텐츠에서 사용 .gap {height:60px;clear:both;display:block} .sgap {height:40px;clear:both;display:block} .ssgap {height:30px;clear:both;display:block} @media all and (max-width:999px){ .gap {height:50px;clear:both;display:block} .sgap {height:30px;clear:both;display:block} .ssgap {height:20px;clear:both;display:block} } @media all and (max-width:768px){ .gap {height:35px;clear:both;display:block} .sgap {height:25px;clear:both;display:block} .ssgap {height:15px;clear:both;display:block} } @media all and (max-width:480px){ .gap {height:25px;clear:both;display:block} .sgap {height:20px;clear:both;display:block} .ssgap {height:10px;clear:both;display:block} } */ /*-------------------------gnavi_dep.css------------------------------------*/ #global {font-weight:400;position:relative;width:auto;box-sizing:border-box;background:#fff;border-bottom:1px solid #e9e9e9;z-index:12} #global .div-cont {display:flex;height:40px;margin-bottom:-1px} #global a, #global button {display:flex;justify-content:center} #global span {align-self:center;font-size:14px;line-height:1;} #global a:focus span, #global a:hover span, #global button:focus span, #global button:hover span {text-decoration:underline} #global .g-sec {display:flex;flex-direction:row;height:100%} #global .glnk-sec a {box-sizing:border-box;color:#fff;position:relative;padding:0 20px;min-width:80px;height:100%;overflow:hidden;z-index:1} #global .glnk-sec a:after {content:'';display:block;width:100%;height:100%;border-radius:50%;background:#fff;position:absolute;top:100%;left:0;width:100%;height:100%;position:absolute;top:-100%;left:50%;margin-left:-50%;transform:scale(0);-ms-transform:scale(0);transition:all .7s ease;opacity:.1;z-index:-1} #global .glnk-sec a span {} #global .glnk-sec a.kbc {background:#0d1c34} #global .glnk-sec a.iphak {background:#a81f24} #global .glnk-sec a.link1 {background:#c87600} #global .glnk-sec a:hover:after, #global .glnk-sec a:focus:after {transform:scale(2);-ms-transform:scale(2);top:0} #global .srvc-sec {margin-left:auto} #global .srvc-sec a {margin-right:24px} #global .srvc-sec a.amenu {position:absolute;top:100%;right:0;width:50px;height:50px;margin:25px 0 0} #global .srvc-sec a.amenu span {font-size:0} #global .srvc-sec a.amenu:before, #global .srvc-sec a.amenu:after, #global .srvc-sec a.amenu span:before {width:25px} #global .srvc-sec a.amenu:before {top:-16px} #global .srvc-sec a.amenu:after {top:16px} #global .toppop-ctrl button {background:transparent;border:0;color:#c6282d;font-family:"SCoreDream", sans-serif;font-weight:400} #global .toppop-ctrl button em {align-self:center;background:#c6282d;border-radius:50%;color:#fff;font-size:12px;font-weight:500;font-style:normal;display:flex;align-items:center;justify-content:center;margin-left:8px;width:20px;height:20px} #global .langPkg {position:relative;margin-right:0} #global .langPkg .caster {display:block;background:none;border:0;height:100%;font-size:0;padding:1px 30px 0 0;box-sizing:border-box} #global .langPkg .caster:before {content:"";display:inline-block;width:0;height:100%;vertical-align:middle;} #global .langPkg .caster:after {content:"";display:block;position:absolute;width:0;height:0;right:13px;top:18px;border:solid;border-width:5px 4px 0 4px;border-color:#535353 transparent transparent transparent;transition:all .3s ease} #global .langPkg .caster span {display:inline-block;color:#555;font-size:14px;font-weight:500;font-family:"SCoreDream", sans-serif;vertical-align:middle;transition:all .3s ease} #global .langPkg .caster:focus span, #global .langPkg .caster:hover span {color:#000;text-decoration:underline} #global .langPkg.over .caster:after {transform:rotate(180deg);border-color:#da262e transparent transparent transparent} #global .langPkg.over .caster span {color:#da262e} #global .langPkg .langSet {display:none;position:absolute;width:100%;left:0;top:100%;box-sizing:border-box;padding:0 10px;border:1px solid #ddd;background:#fff} #global .langPkg ul {display:block;} #global .langPkg ul li {display:block;box-sizing:border-box;border-bottom:1px solid #ddd} #global .langPkg ul li:last-child {border-bottom:0} #global .langPkg a {display:block;text-align:center;margin-right:0;padding:10px 0;line-height:1} #global .langPkg a span {display:inline-block;font-size:15px;color:#666;line-height:1;transition:all .3s ease} #global .langPkg a:focus span, #global .langPkg a:hover span {color:#000;text-decoration:underline} #global .langPkg .closer {display:block;position:absolute;width:20px;height:20px;right:0;top:100%;border:1px solid #ddd;border-top:0;background:#fff;margin:-1px -1px 0 0} #global .langPkg .closer:before, #global .langPkg .closer:after {content:"";display:block;position:absolute;width:10px;height:2px;background:#333;top:0;right:0;bottom:0;left:0;margin:auto;transition:all .3s ease} #global .langPkg .closer:before {transform:rotate(45deg)} #global .langPkg .closer:after {transform:rotate(135deg)} #global .langPkg .closer:focus:before, #global .langPkg .closer:hover:before {transform:rotate(135deg);background:#da262e} #global .langPkg .closer:focus:after, #global .langPkg .closer:hover:after {transform:rotate(225deg);background:#da262e} @media all and (max-width:999px){ #global .div-cont {margin:0} #global span {font-size:12px} #global .srvc-sec {display:none} #global .toppop-ctrl {margin:0 20px 0 auto} } @media all and (max-width:499px){ #global .glnk-sec a {min-width:inherit;padding:0 15px} } /*-------------------------logo_dep.css------------------------------------*/ #logo {display:block;position:absolute;left:50%;top:50%;transform:translateY(-50%);z-index:501;margin:0 0 0 -700px} #logo a {display:block} #logo a em {color:#000;display:inline-block;font-size:1.333em;font-style:normal;font-weight:500;margin-left:13px;padding-left:15px;vertical-align:bottom;position:relative;transform:translateY(-8px);-ms-transform:translateY(-8px)} #logo a em:before {content:'';display:block;width:1px;height:30px;background:#d9d9d9;position:absolute;top:0;bottom:0;left:0;margin:auto} @media all and (max-width:1440px) { #logo {left:20px;margin:0} } @media all and (max-width:999px) { #logo a img {width:144px} #logo a em {font-size:1.133em} } @media all and (max-width:699px) { } @media all and (max-width:449px) { #logo a img {width:103px} #logo a em {margin-left:8px;padding-left:11px;transform:translateY(-3px)} } @media all and (max-width:399px) { #logo {left:15px} } /*-------------------------header_dep.css------------------------------------*/ #menu-wrap .mGnavi {display:none} #menu-wrap .mDeco {display:none} .mn-ctrs-btn span {font-size:0} .mn-ctrs-btn:before, .mn-ctrs-btn:after, .mn-ctrs-btn span:before {content:"";display:block;background:#000;height:2px;position:absolute;top:0;right:0;bottom:0;margin:auto;transform-origin:top left;transition:all .3s ease} .mn-ctrs-btn:hover:before, .mn-ctrs-btn:focus:before, .mn-ctrs-btn:hover:after, .mn-ctrs-btn:focus:after {transform:scaleX(.7);-ms-transform:scaleX(.7)} .mn-ctrs-btn:hover span:before, .mn-ctrs-btn:focus span:before {transform:scaleX(.8) translateX(6px);-ms-transform:scaleX(.8) translateX(6px)} #mainNavi .mn_a1[target=_blank] span:after {content:"";display:inline-block;background:url(/resources/_Img/Common/nwin_spr.png) no-repeat 0 0;width:10px;height:10px;margin-left:5px;vertical-align:top} #mainNavi .mn_a1[target=_blank]:focus span:after, #mainNavi .mn_a1[target=_blank]:hover span:after, #mainNavi .mn_a1[target=_blank].over span:after {background-position-x:-20px} #mainNavi .mn_a2[target=_blank] span:after {content:"";display:inline-block;background:url(/resources/_Img/Common/nwin_spr.png) no-repeat 0 -22px;width:12px;height:12px;margin-left:5px} #mainNavi .mn_a2[target=_blank]:focus span:after, #mainNavi .mn_a2[target=_blank]:hover span:after, #mainNavi .mn_a2[target=_blank].over span:after {background-position-x:-44px} /* 메뉴 */ #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} /* 주메뉴 */ @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} #mainNavi-wrap:after {content:"";display:block;width:100%;height:100%;background:#eee;position:absolute;top:0;left:0} #mainNavi-wrap.decoHide:after {opacity:0} #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 {background:#fff;height:100px;box-sizing:border-box;padding:0} #mainNavi .depth1-wrap {display:block;width:auto;text-align:right;box-sizing:border-box;position:relative;max-width:1400px;margin:0 auto;padding:0 70px 0 0;font-size:0;line-height:1} #mainNavi .depth1-ul {display:inline-block;overflow:hidden} #mainNavi > ul > li:first-child {padding-left:8px} #mainNavi .mn_li1 {display:inline-block;text-align:center;margin:0 37px} #mainNavi .mn_a1 {position:relative;display:flex;flex-flow:row wrap;align-items:center;height:100px} #mainNavi .mn_a1 > span {display:block;line-height:1;font-size:20px;font-weight:500;color:#000;letter-spacing:-.05em;transition:all .3s ease} #mainNavi .mn_a1:after {display:block;content:'';background:#c6282d;border-radius:50%;position:absolute;left:0;right:0;bottom:0;margin:auto;width:7px;height:7px;transform:translateY(100%);-ms-transform:translateY(100%);transition:transform .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:#c6282d} #mainNavi .mn_li1 .mn_a1.over:after, #mainNavi .mn_a1:hover:after, #mainNavi .mn_a1:focus:after, #mainNavi .mn_li1.over .mn_a1:after {transform:translateY(-20px);-ms-transform:translateY(-20px)} #mainNavi .depth2-wrap {display:none;position:absolute;top:100px;left:50%;z-index:1000;width:1400px;margin:0 0 0 -700px;padding:30px 25px 40px 295px;text-align:left;font-weight:normal;box-sizing:border-box;min-height:230px} #mainNavi .depth2-wrap:after {} #mainNavi .depth2-wrap .depth2-tit {display:block;position:absolute;width:280px;height:100%;box-sizing:border-box;left:0;top:0;padding:50px 0 0} #mainNavi .depth2-wrap .depth2-tit:before {content:"";display:block;width:7px;height:7px;background:#c6282d;border-radius:50%;margin:0 0 7px 11px} #mainNavi .depth2-wrap .depth2-tit span {display:block;line-height:1.3} #mainNavi .depth2-wrap .depth2-tit .tit {font-size:33px;color:#000;font-weight:500} #mainNavi .depth2-wrap .depth2-tit .txt {font-family:basic-sans, sans-serif;color:#bdbdbd;font-size:13px;letter-spacing:.15em;margin:20px 0 0} #mainNavi .depth2-wrap .depth2-ul {display:block;width:100%;position:relative;font-size:0;overflow:hidden;box-sizing:border-box;padding:0} #mainNavi .depth2-wrap .mn_li2 {display:inline-block;width:20%;vertical-align:top;box-sizing:border-box;position:relative;padding:10px 0 0 10px} #mainNavi .depth2-wrap .mn_a2 {display:flex;align-items:center;height:55px;position:relative;box-sizing:border-box;padding:0 30px 0 15px;background:#fff;text-align:left;transition:all .3s ease} #mainNavi .depth2-wrap .mn_a2:after {content:"";display:block;position:absolute;width:10px;height:10px;border:solid;border-width:0 2px 2px 0;border-color:#c3c3c3;box-sizing:border-box;top:0;right:0;bottom:0;left:0;margin:auto 15px auto auto;transform:rotate(-45deg);transition:border-color .3s ease} #mainNavi .depth2-wrap .mn_a2 span {display:inline-block;position:relative;vertical-align:middle;font-size:15px;color:#333;font-weight:500;line-height:1.2;transition:all .3s ease} #mainNavi .depth2-wrap .mn_a2:focus, #mainNavi .depth2-wrap .mn_a2:hover, #mainNavi .depth2-wrap .over .mn_a2 {background:#12213a} #mainNavi .depth2-wrap .mn_a2:focus span, #mainNavi .depth2-wrap .mn_a2:hover span, #mainNavi .depth2-wrap .over .mn_a2 span {color:#fff} #mainNavi .depth2-wrap .over .mn_a2 span {text-decoration:underline} #mainNavi .depth2-wrap .mn_a2:focus:after, #mainNavi .depth2-wrap .mn_a2:hover:after, #mainNavi .depth2-wrap .over .mn_a2:after {border-color:#fff} #mainNavi .depth3-wrap {display:block;padding:12px 0 0;box-sizing:border-box} #mainNavi .depth3-wrap .depth3-ul {display:flex;flex-flow:row;flex-wrap:wrap;display:none} #mainNavi .depth3-wrap .mn_li3 {width:50%;margin:0 0 4px;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;box-sizing:border-box} #mainNavi .depth3-wrap .mn_a3 span {display:inline-block;position:relative;font-size:15px;color:#555;letter-spacing:-.05em;line-height:1.2;word-wrap:break-word;word-break:keep-all;white-space:normal;transition:all .3s ease} #mainNavi .depth3-wrap .mn_a3 span:before {content:"";display:block;position:absolute;width:0;height:0;border-radius:50%;background:#ff9900;top:1px;right:-9px;transition:all .3s ease} #mainNavi .depth3-wrap .over .mn_a3 span:before, #mainNavi .depth3-wrap .mn_a3:focus span:before, #mainNavi .depth3-wrap .mn_a3:hover span:before {width:6px;height:6px;top:-2px;right:-12px} #mainNavi .depth3-wrap .over.mn_a3 span {font-weight:700} #mainNavi .depth3-wrap .over.mn_a3 span, #mainNavi .depth3-wrap .mn_a3.over span, #mainNavi .depth3-wrap .mn_a3:hover span, #mainNavi .depth3-wrap .mn_a3:focus span {color:#000} #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 {background:#fff} .pc-topMenu-open #menu-wrap {box-shadow:0 10px 25px rgba(0, 0, 0, .05)} .pc-topMenu-open #menu-wrap:after {opacity:0} .pc-topMenu-open #mainNavi .mn_a1 > span {color:#000} .pc-topMenu-open #mainNavi .mn_a1.over > span {color:#c6282d} .pc-topMenu-open #mainNavi .mn_a1:after {background:#c6282d} } @media all and (min-width:1300px) and (max-width:1440px) { #mainNavi .depth2-wrap {left:0;width:100%;margin:0;padding:20px 20px 20px 380px} #mainNavi .depth2-wrap .depth2-tit {width:380px;padding:38px 20px 0 20px} } @media all and (min-width:1200px) and (max-width:1299px) { #mainNavi-wrap.decoShow:after {opacity:.5} #mainNavi .depth2-wrap {left:0;width:100%;margin:0;padding:20px 20px 20px 300px} #mainNavi .depth2-wrap .depth2-tit {width:300px;padding:25px 20px 0 20px} #mainNavi .depth2-wrap .mn_a2 {padding:0 50px 0 20px} #mainNavi .depth3-wrap {padding:10px 20px 0 20px} } @media all and (min-width:1000px) and (max-width:1199px) { #mainNavi-wrap.decoShow:after {opacity:.5} #mainNavi .depth2-wrap {left:0;width:100%;margin:0;padding:20px 20px 20px 260px} #mainNavi .depth2-wrap .depth2-tit {width:260px;padding:25px 20px 0 20px} #mainNavi .depth2-wrap .mn_a2 {padding:0 50px 0 20px} #mainNavi .depth3-wrap {padding:10px 20px 0 20px} } @media all and (min-width:1100px) and (max-width:1299px) { #mainNavi .depth1-wrap {padding:0 90px 0 0} #mainNavi .mn_li1 {margin:0 15px} } @media all and (min-width:1000px) and (max-width:1099px) { #mainNavi .depth1-wrap {padding:0 90px 0 0} #mainNavi .mn_li1 {margin:0 10px} #mainNavi .mn_a1 > span {font-size:19px} } @media all and (max-width:999px) { body.mobile-sideMenu-open {position:fixed;width:100%;height:100%;overflow:hidden} body.mobile-sideMenu-open #header-wrap, body.mobile-sideMenu-open #header {z-index:inherit} /* 메뉴 */ #mainNavi-wrap {overflow:inherit;position:absolute;top:0;right:0;width:100%;max-width:400px;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;background:#fbfbfb;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;box-shadow:-10px 0 15px rgba(0, 0, 0, .15)} #menu-wrap .mDeco {display:block;position:absolute;width:100%;height:100%;box-sizing:border-box;padding:80px 0 0 130px;z-index:-1;transition:all .3s ease} #menu-wrap .mDeco:after {content:"";display:block;position:relative;width:100%;height:308px;background:url(/resources/_Templet/Header/header_kor/Img/header_mDeco.png) no-repeat right top} #menu-wrap.hide-mDeco .mDeco {opacity:0} .isMain #menu-wrap .mDeco {background:#edf4f6} .isMain #mainNavi .depth2-wrap .depth2-ul {} .isSub #menu-wrap .mDeco {background:#fff} #menu-wrap .mGnavi {display:flex;flex-flow:row;align-items:center;position:absolute;box-sizing:border-box;width:100%;height:70px;background:#12213a;text-align:left;left:0;top:0;padding:0 70px 0 30px;z-index:1} #menu-wrap .mGnavi:before {content:"";display:inline-block;width:0;height:100%;vertical-align:middle} #menu-wrap .mGnavi .tmn-tit {color:#fff;font-size:1.176em;font-weight:400} #menu-wrap .mGnavi ul {display:flex;flex-flow:row;margin-left:auto} #menu-wrap .mGnavi ul li {margin:0 5px 0 20px} #menu-wrap .mGnavi a {display:block;position:relative} #menu-wrap .mGnavi a span {display:block;font-size:14px;color:#fff} #menu-wrap .btn-close {display:block;position:absolute;width:70px;height:70px;background:transparent;border:0;top:0;right:0} #menu-wrap .btn-close:before {content:"";display:block;position:absolute;width:25px;height:21px;background:url(/resources/_Templet/Layout/layout_dep/Img/layout_spr.png) no-repeat 0 -316px;top:0;right:0;bottom:0;left:-7px;margin:auto} #menu-wrap .allmn-btn {display:none} #mainNavi {display:block;position:absolute;width:100%;height:100%;box-sizing:border-box;padding:70px 0 0;overflow-y:auto;z-index:0} #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 {line-height:1.2;padding:0 30px;position:relative;z-index:1} #mainNavi .mn_li1 {border-bottom:1px solid #ddd;height:auto;position:relative} #mainNavi .mn_li1 .mn_a1 {display:flex;flex-flow:row;align-items:center;box-sizing:border-box;height:60px;transition:background .3s ease} #mainNavi .mn_li1 .mn_a1 span {display:inline-block;font-size:16px;color:#333;vertical-align:middle;word-wrap:break-word;word-break:keep-all;white-space:normal;font-weight:400} #mainNavi .mn_li1 .mn_a1.over span {color:#c41816} #mainNavi .mn_li1.is-open .mn_a1 {border-bottom:2px solid #c41816} #mainNavi .mn_li1.is-open .mn_a1 span {color:#c41816} #mainNavi .depth2-wrap {display:none} #mainNavi .depth2-wrap .depth2-tit {display:none} #mainNavi .depth2-wrap .mn_li2 {border-bottom:1px solid #fbfbfb;position:relative;padding:0} #mainNavi .depth2-wrap .mn_li2:last-child {border-bottom:0} #mainNavi .depth2-wrap .mn_li2.has-sub.is-open {border-bottom:0} #mainNavi .depth2-wrap .mn_li2.has-sub.is-open .mn_a2 span {border-bottom:0} #mainNavi .depth2-ul {position:relative;z-index:100;box-sizing:border-box} #mainNavi .depth2-wrap .mn_a2 {position:relative;display:flex;flex-flow:row;align-items:flex-start;padding:0 22px;height:50px;background:#fff} #mainNavi .depth2-wrap .mn_a2 span {display:flex;align-self:center;font-size:15px;color:#222;word-wrap:break-word;word-break:keep-all;white-space:normal} #mainNavi .depth2-wrap .mn_a2 span:before {content:'';display:block;align-self:flex-start;min-width:4px;width:4px;height:4px;background:#262626;border-radius:50%;transform:translateY(7px);-ms-transform:translateY(7px);margin:0 12px 0 4px;transition:background .3s ease} #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 {background:#da262f} #mainNavi .depth2-wrap .mn_a2.over span, #mainNavi .depth2-wrap .is-open .mn_a2 span {color:#fff} #mainNavi .depth2-wrap .over .mn_a2 span:before, #mainNavi .depth2-wrap .is-open .mn_a2 span:before {background:#fff;margin-left:0;width:10px;height:10px;transform:translateY(4px);-ms-transform:translateY(4px)} #mainNavi .depth3-wrap {padding:13px 26px 22px} #mainNavi .depth3-ul {border-left:1px solid #d3d3d3;padding:0 17px} #mainNavi .mn_li2.is-close .depth3-wrap {display:none} #mainNavi .depth3-wrap li {margin:0 0 5px} #mainNavi .depth3-wrap li:last-child {margin:0} #mainNavi .depth3-wrap li a {display:block;position:relative;display:block;padding:0;font-size:13px;color:#666} #mainNavi .depth3-wrap li a span {display:inline-block;position:relative;padding:4px 0;line-height:1.2} #mainNavi .depth3-wrap li.over a {color:#da262f} #mainNavi .tgl-btn {background:transparent;border:0;position:absolute;top:0;z-index:1} #mainNavi .mn_li1 > .tgl-btn {width:60px;height:60px;right:-22px} #mainNavi .mn_li1 > .tgl-btn:before {content:'';display:block;width:12px;height:12px;box-sizing:border-box;border-width:2px;border-style:solid;border-color:transparent #777 #777 transparent;transform:translateY(-25%) rotate(45deg);-ms-transform:translateY(-25%) rotate(45deg);position:absolute;top:0;left:0;right:0;bottom:0;margin:auto} #mainNavi .mn_li2 > .tgl-btn {width:50px;height:50px;right:0} #mainNavi .mn_li2 > .tgl-btn:before, #mainNavi .mn_li2 > .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 .mn_li2 > .tgl-btn:after {transform:rotate(90deg)} #mainNavi .mn_li1.over > .tgl-btn:before {border-color:transparent #c41816 #c41816 transparent} #mainNavi .mn_li1.over.is-open > .tgl-btn:before, #mainNavi .mn_li1.is-open > .tgl-btn:before {border-color:#c41816 transparent transparent #c41816;transform:translateY(25%) rotate(45deg);-ms-transform:translateY(25%) rotate(45deg)} #mainNavi .mn_li2.over > .tgl-btn:before, #mainNavi .mn_li2.is-open > .tgl-btn:before, #mainNavi .mn_li2.over > .tgl-btn:after, #mainNavi .mn_li2.is-open > .tgl-btn:after {background:#fff} #mainNavi .mn_li2.has-sub.is-open > .tgl-btn:after {transform:rotate(180deg)} #mn-ctrs-btns {display:block;position:absolute;right:20px;top:0;width:70px;height:70px} #mn-ctrs-btns .mn-ctrs-btn {width:100%;height:100%;border:0;background:none} #mn-ctrs-btns .mn-ctrs-btn:before, #mn-ctrs-btns .mn-ctrs-btn:after, #mn-ctrs-btns .mn-ctrs-btn span:before {width:20px} #mn-ctrs-btns .mn-ctrs-btn:before {top:-12px} #mn-ctrs-btns .mn-ctrs-btn:after {top:12px} } @media all and (max-width:399px) { #mn-ctrs-btns {right:15px} } /*-------------------------submenu_dep.css------------------------------------*/ #side-wrap {display:none} @media all and (max-width:768px){ body.mobile-submenu-open {} body.mobile-submenu-open #header-wrap, body.mobile-submenu-open #header {z-index:999} body.mobile-submenu-open #container-wrap {z-index:inherit} #side-wrap {display:block;width:100%;padding:0;position:absolute;left:0;bottom:0;height:0;line-height:1.2;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:50px;height:30px;background:#fff;border:0;left:50%;bottom:0;transform:translateX(-50%)} #leftmenu .lm_l1 > .tgl-btn:after {content:"";display:block;position:absolute;width:10px;height:10px;border:solid;border-width:0 0 1px 1px;border-color:transparent transparent #000 #000;transform:translateY(-25%) rotate(-45deg);top:0;right:0;bottom:0;left:0;margin:auto;transition:all .3s ease} #leftmenu .lm_l1.is-open > .tgl-btn:after {transform:translateY(25%) rotate(135deg)} #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;z-index:1000} #leftmenu .depth2 {display:block;background:#f6f6f6;transition:all .3s ease} #leftmenu .depth2 .lm_l2 {border-bottom:1px solid #ededed;box-sizing:border-box;position:relative} #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:7px;top:10px;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:14px;height:2px;background:#999;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:flex;align-items:flex-start;background:#fff;box-sizing:border-box;height:60px;width:100%;padding:7px 27px;position:relative;transition:all .3s ease} #leftmenu .depth2 .lm_l2 .lm_a2 span {display:flex;align-self:center;box-sizing:border-box;position:relative;color:#222} #leftmenu .depth2 .lm_l2 .lm_a2 span:before {content:"";display:block;align-self:flex-start;margin:.25em -10px 0 0;min-width:10px;width:10px;height:10px;background:#fff;border-radius:50%;opacity:0} #leftmenu .depth2 .lm_l2.over .lm_a2 {background:#da262e} #leftmenu .depth2 .lm_l2.over .lm_a2 span {color:#fff} #leftmenu .depth2 .lm_l2.over .lm_a2 span:before {margin-right:19px;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:after {transform:rotate(0deg)} #leftmenu .depth2 .lm_l2.is-open .tgl-btn:after {transform:rotate(0deg);background:#fff} #leftmenu .depth3-wr {box-sizing:border-box;display:none;padding:15px 0 15px 27px} #leftmenu .depth3 {display:flex;flex-flow:row wrap} #leftmenu .depth3 .lm_l3 {box-sizing:border-box;padding-right:15px;width:50%} #leftmenu .depth3 .lm_l3 .lm_a3 {box-sizing:border-box;color:#777;display:block;padding:4px 0 4px 14px;position:relative} #leftmenu .depth3 .lm_l3 .lm_a3:before {content:"";display:block;position:absolute;width:3px;height:3px;background:#bdbdbd;border-radius:50%;left:0;top:14px} #leftmenu .depth3 .lm_l3 .lm_a3 span {display:inline-block;box-sizing:border-box;position:relative;font-size:.875em} #leftmenu .depth3 .lm_l3.over .lm_a3:before {background:#da262e} #leftmenu .depth3 .lm_l3.over .lm_a3 span {color:#da262e} } /*-------------------------footer_dep.css------------------------------------*/ #footer-wrap {font-family:"SCoreDream", sans-serif;font-size:.833em;font-weight:400;padding:30px 0 46px;position:relative;z-index:101;background:#fff;border-top:1px solid #ccc} #footer-wrap .footer {padding:77px 0 0;position:relative;line-height:1.2;letter-spacing:0} #footer-wrap .footer button {background:transparent;border:0} #footer-wrap .flogo {position:absolute;top:0;left:0} #footer-wrap .flogo a {display:block} #footer-wrap .fservice {position:relative;max-width:50%} #footer-wrap .fservice button {background:transparent;border:0;position:absolute;top:0;bottom:0;margin:auto;display:none} #footer-wrap .fservice .btn-prev {left:0} #footer-wrap .fservice .btn-next {right:0} #footer-wrap .fservice ul {display:flex;flex-flow:row;overflow:hidden;overflow-x:auto;scroll-behavior:smooth;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;white-space:nowrap} #footer-wrap .fservice ul::-webkit-scrollbar {display:none} #footer-wrap .fservice li {margin-right:20px;padding-right:26px;position:relative} #footer-wrap .fservice li:after {content:'';display:block;background:#d9d9d9;border-radius:50%;width:4px;height:4px;position:absolute;top:0;right:0;bottom:0;margin:auto} #footer-wrap .fservice li:last-child {margin-right:0;padding-right:0} #footer-wrap .fservice li:last-child:after {display:none} #footer-wrap .fservice a {color:#808080;display:block} #footer-wrap .fservice .privacy {color:#a81e25} #footer-wrap .fservice a:hover, #footer-wrap .fservice a:focus {text-decoration:underline} #footer-wrap .finfo {display:flex;flex-flow:row wrap;align-items:flex-end;justify-content:flex-end;margin-top:-1.2em} #footer-wrap .finfo > * {box-sizing:border-box;padding:0 0 0 130px;width:50%} #footer-wrap .finfo address {margin-bottom:calc(-1.2em - 12px);padding-left:0} #footer-wrap .finfo .cs-info {display:flex;flex-flow:row} #footer-wrap .finfo .cs-info li {margin-right:13px;padding-right:14px;position:relative} #footer-wrap .finfo .cs-info li:after {content:'';display:block;background:#ccc;width:1px;height:12px;position:absolute;top:0;bottom:0;right:0;margin:auto} #footer-wrap .finfo .cs-info li:last-child {margin-right:0;padding-right:0;} #footer-wrap .finfo .cs-info li:last-child:after {display:none} #footer-wrap .finfo .cs-info li:first-child:last-child:after {display:none} #footer-wrap .finfo .fcopyright {color:#777;font-size:.867em;padding-top:18px} #footer-wrap .flink {position:absolute;top:0;right:0;display:flex;flex-flow:row} #footer-wrap .flink .flink-list {margin:0 0 0 30px;position:relative;width:250px;max-width:250px} #footer-wrap .flink dt button {border-bottom:1px solid #7c7c7c;box-sizing:border-box;color:#6f6f6f;font-size:1.133em;width:100%;height:50px;text-align:left;position:relative} #footer-wrap .flink dt button:after {content:'';display:block;width:0;height:0;border-width:7px 6px 0;border-style:solid;border-color:#989898 transparent transparent;position:absolute;top:0;bottom:0;right:10px;margin:auto} #footer-wrap .flink dd {display:none;position:absolute;top:100%;left:0;width:100%;margin-top:1px} #footer-wrap .flink .sel {background:#fff;border:1px solid #7c7c7c;max-height:150px;padding:10px 0} #footer-wrap .flink .sel ul {padding:0 10px} #footer-wrap .flink .sel a {display:block;border-bottom:1px solid #ccc;font-size:.867em;padding:7px 10px} #footer-wrap .flink .sel li:last-child a {border-bottom:0} #footer-wrap .flink .btn-close {width:40px;height:40px;position:absolute;bottom:100%;right:0;background:#fff;border:1px solid #7c7c7c;margin-bottom:6px;opacity:0} #footer-wrap .flink .btn-close:before, #footer-wrap .flink .btn-close:after {content:'';display:block;width:20px;height:2px;background:#7c7c7c;position:absolute;top:0;left:0;right:0;bottom:0;margin:auto} #footer-wrap .flink .btn-close.show {opacity:1;transition:opacity .35s .35s} #footer-wrap .flink .btn-close:before {transform:rotate(45deg);-ms-transform:rotate(45deg)} #footer-wrap .flink .btn-close:after {transform:rotate(135deg);-ms-transform:rotate(135deg)} #footer-wrap .flink .mCSB_inside > .mCSB_container {margin-right:0} #footer-wrap .flink .sel a:hover, #footer-wrap .flink .sel a:focus {text-decoration:underline} @media all and (max-width:1399px){ #footer-wrap .finfo > * {padding-left:100px} } @media all and (max-width:1199px){ #footer-wrap .finfo > * {padding-left:30px} } @media all and (max-width:999px){ #footer-wrap {font-size:12px;padding:25px 0 35px} #footer-wrap .footer {text-align:center;padding:0} #footer-wrap .flogo {position:relative;top:auto;bottom:auto;right:auto;left:auto;margin:0 0 21px} #footer-wrap .flogo img {width:144px} #footer-wrap .fservice {max-width:inherit;margin:0 -30px 16px} #footer-wrap .fservice ul {justify-content:center;padding:0 30px} #footer-wrap .fservice li {margin-right:7px;padding-right:11px} #footer-wrap .finfo {display:block;margin:0} #footer-wrap .finfo > * {width:100%;padding:0} #footer-wrap .finfo .cs-info {justify-content:center;margin-top:3px} #footer-wrap .finfo .fcopyright {font-size:10px} #footer-wrap .flink {position:relative;top:auto;bottom:auto;right:auto;left:auto;margin:19px 0 0;justify-content:center} #footer-wrap .flink .flink-list {margin-left:2%} #footer-wrap .flink .flink-list:first-child {margin-left:0} #footer-wrap .flink dt button {font-size:13px;height:42px;} #footer-wrap .flink dd {top:auto;bottom:100%;margin:0 0 1px} #footer-wrap .flink .sel a {font-size:12px} #footer-wrap .flink .btn-close {width:30px;height:30px;top:100%;bottom:auto;margin:7px 0 0} } @media all and (max-width:768px){ #footer-wrap .fservice {margin:0 -20px 16px} #footer-wrap .fservice ul {padding:0 20px} }