/*-------------------------layout_01.css------------------------------------*/ @charset "utf-8"; /* 2015-10-05 CSS CENTUMSOFT */ body {-webkit-text-size-adjust: 100%;} #doc-wrap {position:relative;min-width:1200px;overflow:hidden;} .div-cont {position:relative;max-width:1200px;margin:0 auto;} @media all and (max-width:1200px){ #doc-wrap {min-width:320px} .div-cont {margin:0 30px;} } @media all and (max-width:680px){ .div-cont {margin:0 15px;} } @media all and (max-width:420px){ .div-cont {margin:0 10px;} } /* 스킵네비게이션 */ #skipNavi {height:0;} #skipNavi .skipLink {position:absolute;top:-1000px;left:-1000px;overflow:hidden;z-index:5000;} #skipNavi .skipLink:focus, #skipNavi .skipLink:active {top:0;left:0;padding:10px 20px;background:#1e64ba;color:#fff;} /* 레이아웃 */ #header-wrap {position:relative;width:100%;height:90px;} #mcontainer-wrap {position:relative;width:100%;} #container {position:relative;max-width:1200px;margin:75px auto 0 auto;} #container:after {content:'';clear:both;display:block;} #container.leftHide #side-wrap {display:none;} #container.leftHide #contents {padding-right:0;} @media only screen and (max-width:1499px){ #header-wrap {height:140px;} } /* svisual */ #svisual-wrap {position:relative;width:100%;height:215px;background:url(/resources/_Img/Templet/Layout/svis02.jpg) no-repeat 50% 0;} #svisual-wrap #visImgWrap {width:100%;position:relative} #svisual-wrap #visImgWrap #visImg {position:relative;height:215px;} #svisual-wrap #visImgWrap #visImg .vis-img {display:block;width:2000px;height:auto;position:absolute;top:0;left:50%;margin-left:-1000px} #svisual-wrap .slogan {max-width:1400px;position:absolute;top:0;left:50%;margin-left:-700px;width:100%;text-align:center;} #svisual-wrap .slogan img {max-width:100%;display:inline-block;margin-top:60px;} #svisual-wrap .lm-tit {position:absolute;left:0;top:145px;width:100%;text-align:center;display:none;} #svisual-wrap .lm-tit span {display:block;color:#fff;text-shadow:0 0 5px rgba(0, 0, 0, .8)} #svisual-wrap .lm-tit .tit {font-size:40px;letter-spacing:-.025em;line-height:1.1;font-weight:500;transform:translateY(30px);opacity:0;transition:all .3s ease} #svisual-wrap .lm-tit .txt {font-size:16px;font-weight:300;line-height:1.3;margin:14px 0 0;transform:translateY(30px);opacity:0;transition:all .3s ease .15s} body.loaded #svisual-wrap .lm-tit .tit, body.loaded #svisual-wrap .lm-tit .txt {transform:translateY(0px);opacity:1} @media only screen and (max-width:1199px){ #svisual-wrap #visImgWrap #visImg .vis-img {left:0;margin-left:-365px;} } @media all and (max-width:999px) { #svisual-wrap #visImgWrap #visImg .vis-img {width:auto;height:100%;} #svisual-wrap .slogan {left:0;margin:0} #svisual-wrap .slogan img {width:295px;height:auto;} #svisual-wrap .lm-tit {top:80px;} #svisual-wrap .lm-tit .tit {font-size:30px;} #svisual-wrap .lm-tit .txt {font-size:14px;margin-top:10px;} } @media all and (max-width:399px) { #svisual-wrap .slogan img {right:50%;margin-right:-190px} } /* contents */ @media only screen and (min-width:1000px) { #contents {min-height:600px;word-break:keep-all;word-wrap:break-word;max-width:1200px;box-sizing:border-box;padding-right:270px;} } #contents .cont-top {position:relative;margin-bottom:60px;} #contents .cont-top .cont-tit {font-size:42px;color:#111;font-weight:500;letter-spacing:-0.02em;} #cont-navi {position:absolute;right:0;bottom:-28px;height:60px;background:#3ba135;font-size:0;min-width:633px;} #cont-navi .cont-ctrl-btns {display:inline-block;background:#1e7719;height:60px;vertical-align:top;} #cont-navi .cont-ctrl-btns button {position:relative;width:60px;height:60px;border:0;background:transparent;background-image:url(/resources/homepage/kor/_Img/Layout/layout_spr.png);transition:all .3s ease;} #cont-navi .cont-ctrl-btns button:hover, #cont-navi .cont-ctrl-btns button:focus {background-color:#12610e;} #cont-navi .cont-ctrl-btns .btn-print {background-position:-16px 0} #cont-navi .cont-ctrl-btns .btn-share {background-position:-76px 0} #cont-navi .cont-ctrl-btns .btn-share.is-open {background-color:#12610e;} #cont-navi .cont-ctrl-btns button:after {content:'';position:absolute;left:0;top:50%;width:1px;height:10px;margin-top:-5px;background:rgba(255,255,255,.2);} #cont-navi .cont-ctrl-btns button:first-child:after {display:none;} #cont-navi .cont-ctrl-btns .sns-list {position:absolute;top:60px;left:60px;z-index:100;width:60px;display:none} #cont-navi .cont-ctrl-btns .sns-list button {background:none;display:block;width:60px;height:60px;background-color:#12610e;background-image:url(/resources/homepage/kor/_Img/Layout/layout_spr.png);transition:all .3s ease;} #cont-navi .cont-ctrl-btns .sns-list .btn-fb {background-position:-136px 0;} #cont-navi .cont-ctrl-btns .sns-list .btn-tw {background-position:-136px -60px;} #cont-navi .cont-ctrl-btns .sns-list .btn-insta {background-position:-136px -120px;} #cont-navi .cont-ctrl-btns .sns-list .btn-nb {background-position:-136px -180px;} #cont-navi .cont-ctrl-btns .sns-list button:hover, #svisual-wrap .cont-ctrl-btns .sns-list button:focus {background-color:#3ba135;} #cont-navi .navi-menu {display:inline-block;vertical-align:top;padding:21px 60px 0 30px} #cont-navi .navi-menu li {float:left;margin-right:30px;padding-left:30px;position:relative;} #cont-navi .navi-menu li:before {display:block;content:"";width:6px;height:6px;border:2px solid transparent;border-top:2px solid rgba(255,255,255,.3);border-left:2px solid rgba(255,255,255,.3);position:absolute;top:4px;left:0;margin-left:-6px;transform:rotate(135deg);-ms-transform:rotate(135deg)} #cont-navi .navi-menu li:last-child {margin-right:0;padding-right:0;} #cont-navi .navi-menu li.home {padding-left:0;} #cont-navi .navi-menu li.home:before {display:none;} #cont-navi .navi-menu li.home a:after {content:'H';display:block;font-size:16px;color:#fff;} #cont-navi .navi-menu li a {font-size:16px;color:#fff;} #contents #cont {padding:0 0 80px 0;font-size:16px;line-height:1.6;word-break:keep-all;word-wrap:break-word;min-height:400px} #contents #cont:after {clear:both;content:"";display:block;} #contents #cont .cont-charge {position:relative;overflow:hidden;padding:20px 35px;border:1px solid #13406c;background:#f7fafc;} #contents #cont .cont-charge .txt {display:block;position:relative;height:45px;color:#1c5a96;font-size:15px;font-weight:500;line-height:45px;padding:0 0 0 54px} #contents #cont .cont-charge .txt:before {content:"";display:block;position:absolute;width:45px;height:45px;background:url(/resources/_Img/Common/pg_charge_sprite.png) no-repeat 0 0;top:0;left:0} #contents #cont .charge-list {margin-bottom:10px;} #contents #cont .charge-list li {margin-right:20px;font-size:15px;color:#555;} #contents #cont .charge-list li em {font-style:normal;color:#333} #contents #cont .charge-list li .part {padding-left:20px;background:url(/resources/_Img/Templet/Layout/charge_name.gif) no-repeat 0 0;} #contents #cont .charge-list li .tel {display:inline-block;padding-left:18px;background:url(/resources/_Img/Templet/Layout/charge_tel.gif) no-repeat 0 3px;margin-left:30px} #contents #cont .charge-list li .mail {display:none} #contents #cont .cont-charge .update {position:absolute;right:35px;bottom:20px;padding-left:25px;margin-top:5px;font-size:14px;background:url(/resources/_Img/Templet/Layout/charge_update.gif) no-repeat 0 center;} @media all and (max-width:999px){ #contents {width:auto;max-width:100%;float:none} #contents #cont {font-size:15px} #header-wrap {height:auto} } @media all and (max-width:768px){ #svisual-wrap, #cont-navi {display:none} #container {margin-top:0} #contents #cont {padding-bottom:40px} #contents .cont-top {padding:20px 0;margin-bottom:0;border:0} #contents .cont-top .cont-tit {font-size:22px;position:relative} } @media all and (max-width:599px){ #contents #cont {padding-bottom:30px} } /* 배너모음 */ .cbanner-wrap li .pimg {padding:15px 0;} .cbanner-wrap li .pimg img {width:100%;height:auto;} /*-------------------------gnavi_01.css------------------------------------*/ /* global */ #global {position:relative;width:100%;z-index:700;} #global .global-wrap {position:absolute;right:20px;top:19px;z-index:1;} #global .glnk-sec {display:inline-block;vertical-align:middle;font-size:0;} #global .glnk-sec a {display:inline-block;font-size:15px;padding:0 12px;border-left:1px solid #e9e9e9} #global .glnk-sec a:first-child {border:0;} #global .glnk-sec a span {display:inline-block;color:#767676;} #global .glnk-sec a.whome span:before {display:inline-block;vertical-align:middle;content:"";width:17px;height:21px;background:url(/resources/_Img/Templet/Layout/header01_spr.png) no-repeat;margin-right:5px;} #global .glnk-sec a:hover span, #global .glnk-sec a:focus span {text-decoration:underline;} #global .srvc-lnk {position:relative;display:inline-block;vertical-align:middle;padding-left:51px;} #global .srvc-lnk a {float:left;width:51px;height:49px;position:relative;background:#1f4c76;} #global .srvc-lnk a span {width:1px;height:1px;overflow:hidden;display:block;text-indent:-9999em;font-size:0px;line-height:0;} #global .srvc-lnk a.amenu:before, #global .srvc-lnk a.amenu:after, #global .srvc-lnk a.amenu span:before {display:block;content:"";width:21px;height:2px;background:#fff;position:absolute;left:50%;margin:-1px 0 0 -10px;transition:all .3s ease;} #global .srvc-lnk a.amenu:before {top:17px;} #global .srvc-lnk a.amenu:after {top:24px;} #global .srvc-lnk a.amenu span:before {top:31px;} #global .srvc-lnk a.amenu:hover:before, #global .srvc-lnk a.amenu:hover span:before {width:14px;} #global .srvc-lnk a.amenu:hover:after {width:18px;margin-left:-5px;} #global .srvc-lnk a.toppop-ctrl {float:left;position:absolute;top:0;left:0;} #global .toppop-ctrl {float:left;position:absolute;top:0;left:0;} /* .isSub #global .toppop-ctrl {display:none;} */ #global .toppop-ctrl button {width:51px;height:49px;border:0;text-align:center;background:transparent;vertical-align:middle;background:#0e5ca5;} #global .toppop-ctrl button:before {display:block;content:"";width:18px;height:21px;background:url(/resources/_Img/Templet/Layout/header01_spr.png) no-repeat 100% 0;position:absolute;top:50%;left:50%;margin:-11px 0 0 -9px;} #global .toppop-ctrl button i {font-style:normal;color:#fff;background:#233f58;position:absolute;top:0;left:0;padding:1px 5px;font-size:12px;} @media only screen and (max-width:1499px){ #global {height:50px;background:#0e5ca5;text-align:right;} #global .global-wrap {position:relative;top:auto;bottom:auto;right:auto;left:auto;margin:0 auto;max-width:1200px} #global .glnk-sec a span {color:#fff;} #global .srvc-lnk a {background:#0a3155;} #global .toppop-ctrl button {background:#104581;} } @media all and (max-width:999px){ #global .global-wrap {top:14px;} #global .div-cont {margin:0} #global .glnk-sec {} #global .srvc-lnk {vertical-align:top;margin-left:15px;display:none;} #global .srvc-lnk a {display:none;} #global .toppop-ctrl {display:none;} #global .toppop-ctrl button {height:50px;width:50px;} #global .toppop-ctrl button span {color:#fff} #global .toppop-ctrl button span:after {border-top-color:#fff} #global .toppop-ctrl:after {display:none} .isMain #global .toppop-ctrl {display:block;top:-14px;left:1px;} .isMain #global .srvc-lnk {display:inline-block;} } /*-------------------------logo_02.css------------------------------------*/ /* logo */ #header .logo {min-width:245px;display:inline-block;padding:19px 15px 17px;position:absolute;top:0;left:0;} #header .logo a {display:block;font-size:0;position:relative;padding:16px 10px 17px 180px;} #header .logo a span {display:inline-block;vertical-align:middle;} #header .logo a .logo-txt {color:#fff;font-size:26px;font-weight:400;letter-spacing:-0.05em;border-left:1px solid rgba(255,255,255,.2);padding:0 0 0 15px;margin:-5px 0 0 15px;} #header .logo .slogo {position:absolute;top:0;left:0;} #header .logo .p-logo {display:none} .isMain #header .logo {background:#0f8687;} .isSub #header .logo {background:#0e5ca5;} @media only screen and (max-width:1499px){ #header .logo {background:none !important;} #header .logo {padding:24px 0 18px;} #header .logo a {padding-left:135px} #header .logo img {width:135px;} #header .logo a .logo-txt {font-size:22px;margin-top:-6px;} .isSub #header .logo a .logo-txt {color:#111;border-color:#ccc;} .isSub #header .logo .w-logo {display:none;} .isSub #header .logo .p-logo {display:block;} } @media only screen and (max-width:1099px){ #header .logo a .logo-txt {padding-left:7px;margin-left:7px;} } @media all and (max-width:999px){ #header .logo {padding:11px 15px 11px;position:relative;top:auto;bottom:auto;right:auto;left:auto;margin:0;min-width:auto;} #header .logo a {padding:9px 10px 11px 140px} #header .logo a .logo-txt {font-size:18px;margin:0 0 0 12px;} #header .logo a span em {font-size:18px} .isSub #header .logo a .logo-txt {margin-top:2px;} } @media all and (max-width:399px){ #header .logo {padding:13px 7px 13px;} #header .logo a {padding:9px 10px 7px 120px} #header .logo a img {max-width:120px;} } /*-------------------------header_02.css------------------------------------*/ /* header */ #header {position:relative;z-index:501;} #menu-wrap .srch-btn {position:absolute;right:10px;top:25px;border:0;background:#fff;border-bottom:2px solid #57c928;z-index:1000;} .isMain #menu-wrap .srch-btn {right:110px;} #menu-wrap .srch-btn span {display:inline-block;font-size:14px;color:#53b02c;line-height:1;padding:10px 0 10px 22px;background:url(/resources/_Img/Templet/Layout/srch_ico.png) no-repeat 0 center;} #menu-wrap .srch-btn.is-open span {background:url(/resources/_Img/Templet/Layout/srch_close.gif) no-repeat 0 center;} @media all and (max-width:1499px){ #header {max-width:1200px;margin:0 auto;} } @media all and (max-width:999px){ #header-wrap {height:110px;z-index:5000;} #header {display:inline-block;min-height:60px;} .isMain #header-wrap {background:rgba(0,0,0,.3)} } @media all and (min-width:1500px){ .iacf #header .logo {background:#0f8687;} .fund #header .logo {background:#0f8687;} .dorm #header .logo {background:#c8592f;} .global #header .logo {background:#2e8d2a;} .isMain #global .glnk-sec a span {color:#fff;} .isMain #global .glnk-sec a.whome span:before {background-position:-19px 0;} .isMain #global .toppop-ctrl button {background:transparent;border:1px solid #fff;border-right:0;box-sizing:border-box;} .isMain #global .srvc-lnk a {background:transparent;border:1px solid #fff;box-sizing:border-box;} } @media all and (min-width:1000px){ .dorm #mainNavi .mn_li1 .mn_a1:hover, .dorm #mainNavi .mn_li1 .mn_a1:hover span, .dorm #mainNavi .mn_li1.over .mn_a1 span {color:#c8592f !important} .iacf #mainNavi .mn_li1 .mn_a1:hover, .iacf #mainNavi .mn_li1 .mn_a1:hover span, .iacf #mainNavi .mn_li1.over .mn_a1 span {color:#0f8687 !important} .fund #mainNavi .mn_li1 .mn_a1:hover, .fund #mainNavi .mn_li1 .mn_a1:hover span, .fund #mainNavi .mn_li1.over .mn_a1 span {color:#0f8687 !important} .global #mainNavi .mn_li1 .mn_a1:hover, .global #mainNavi .mn_li1 .mn_a1:hover span, .global #mainNavi .mn_li1.over .mn_a1 span {color:#2e8d2a !important} } /* 메인 */ /* 1단 상단팝업 */ #toppop {position:relative;width:100%;height:0;overflow:hidden;background:#0b253e;} .popups {position:relative;overflow:hidden;height:0px;z-index:2000;width:1000px;margin:0 auto;} .toppop .wpop-list {overflow:hidden;padding:136px 0 0 20px;} .toppop .wpop-list li {float:left;width:50%;} .popups .wpcont {position:absolute;top:0;left:0;width:500px;height:160px;overflow:hidden;} .popups .wpcont img {width:auto;height:160px;display:block;} .wpop-cont .comm {display:none;} /* 멀티팝업 */ .top-wide-popups {position:relative;width:100%;height:0;overflow:hidden;z-index:4000;background:url(/resources/_Img/Common/twidepop_bg.gif) no-repeat center top;background-size:cover} .top-wide-popups * {color:#fff} .top-wide-popups .tpop-topwide {position:relative;margin:0 auto;max-width:1200px;padding:15px 0 40px 0;} .top-wide-popups .tpop-topwide .tpop-dir-wrap{display:block;position:absolute;width:100%;height:0;left:0;top:50%;z-index:11} .top-wide-popups .tpop-topwide .tpop-dir-wrap button{display:block;position:absolute;width:48px;height:48px;top:50%;margin:-24px 0 0 0;border:0;background:url(/resources/_Img/Common/toppop_sprite2.png) no-repeat} .top-wide-popups .tpop-topwide .tpop-dir-wrap .btn-prev{background-position:0px 0px;left:0} .top-wide-popups .tpop-topwide .tpop-dir-wrap .btn-next{background-position:-50px 0px;right:0} .top-wide-popups .tpop-topwide .tpop-list-wrap {position:relative;max-width:1200px;height:100px;margin:0 auto;overflow:hidden} .top-wide-popups .tpop-topwide .tpop-list-wrap .wpop-item {position:absolute;overflow:hidden;} .top-wide-popups .tpop-topwide .tpop-list-wrap .wpop-item.first {left:0;} .top-wide-popups .tpop-topwide .tpop-list-wrap .wpop-item .wpop-cont, .wpop-cont > div {position:relative;display:block;height:100%;margin-left:auto;margin-right:auto;overflow:hidden;text-align:center;} .top-wide-popups .tpop-topwide .tpop-list-wrap .wpop-item .wpop-cont a {display:block;height:100%;text-align:center;} .top-wide-popups .tpop-topwide .tpop-list-wrap .wpop-item .wpop-cont img {max-width:100%;max-height:100%;} .top-wide-popups .tpop-topwide button {border:0;cursor:pointer;} .top-wide-popups .tpop-topwide .wpop-ctrl-btns {position:absolute;bottom:10px;left:10px;z-index:300} .top-wide-popups .tpop-topwide .wpop-ctrl-btns button {display:inline-block;border:0;width:6px;height:8px;background:url(/resources/_Img/Common/toppop_sprite2.png) no-repeat;overflow:hidden;vertical-align:top;} .top-wide-popups .tpop-topwide .wpop-ctrl-btns button.btn-stop {background-position:-107px 0px} .top-wide-popups .tpop-topwide .wpop-ctrl-btns button.btn-play {background-position:-100px 0px} .top-wide-popups .tpop-topwide .wpop-ctrl-btns .nicons {display:inline-block;} .top-wide-popups .tpop-topwide .wpop-ctrl-btns .nicons button {display:inline-block;position:relative;width:7px;height:7px;padding:0;border:0;margin-right:5px;background:none} .top-wide-popups .tpop-topwide .wpop-ctrl-btns .nicons button:after{content:"";display:block;width:7px;height:7px;background:url(/resources/_Img/Common/toppop_sprite2.png) no-repeat -100px -10px} .top-wide-popups .tpop-topwide .wpop-ctrl-btns .nicons button span {width:1px;height:1px;overflow:hidden;position:absolute;top:-1000em} .top-wide-popups .tpop-topwide .wpop-ctrl-btns .nicons button.over:after, .top-wide-popups .tpop-topwide .wpop-ctrl-btns .nicons button.is-over:after {background-position:-109px -10px} .top-wide-popups .tpop-topwide .close-btns {position:absolute;right:10px;bottom:10px;z-index:10;font-size:0} .top-wide-popups .tpop-topwide .close-btns * {vertical-align:middle} .top-wide-popups .tpop-topwide .close-btns input {display:inline-block;padding:0;margin:0;width:auto;height:auto;vertical-align:middle} .top-wide-popups .tpop-topwide .close-btns label {display:inline-block;margin-left:7px;margin-right:8px;font-size:13px;vertical-align:middle} .top-wide-popups .tpop-topwide .close-btns button {display:inline-block;position:relative;width:22px;height:22px;background-color:#2d2d2d;border-radius:50%;vertical-align:middle} .top-wide-popups .tpop-topwide .close-btns button:after{content:"";display:block;position:absolute;width:10px;height:10px;top:50%;left:50%;margin:-5px 0 0 -5px;background:url(/resources/_Img/Common/toppop_sprite2.png) no-repeat -100px -19px} @media only screen and (max-width:1200px){ .top-wide-popups .tpop-topwide {width:auto;margin:0 20px} } @media only screen and (max-width:1016px){ .top-wide-popups .tpop-topwide .tpop-list-wrap .wpop-item {text-align:center} .top-wide-popups .tpop-topwide .tpop-list-wrap .wpop-item .wpop-cont {font-size:0;} .top-wide-popups .tpop-topwide .tpop-list-wrap .wpop-item .wpop-cont:before {display:inline-block;vertical-align:middle;width:0;content:"";height:100%;} } @media only screen and (max-width:799px){ .top-wide-popups .tpop-topwide .tpop-list-wrap {height:146px;} .top-wide-popups .tpop-topwide .wpop-ctrl-btns {bottom:auto;top:15px} .top-wide-popups .tpop-topwide .close-btns {top:auto;bottom:10px} } @media only screen and (max-width:699px){ .top-wide-popups .tpop-topwide .tpop-list-wrap {height:100px;} } @media only screen and (max-width:480px){ .top-wide-popups .tpop-topwide .tpop-dir-wrap button{width:11px;height:27px;top:50%;margin:-13.5px 0 0 0;background:url(/resources/_Img/Common/toppop_sprite2.png) no-repeat;background-size:cover} .top-wide-popups .tpop-topwide .tpop-dir-wrap .btn-prev{background-position:0px 0px;left:10px} .top-wide-popups .tpop-topwide .tpop-dir-wrap .btn-next{background-position:-11px 0px;right:10px} .top-wide-popups .tpop-topwide .tpop-list-wrap {height:65px;} .top-wide-popups .tpop-topwide {padding-top:25px;} } /* 메뉴 */ #menu-wrap {position:relative;z-index:100;background:#fff;} #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) and (max-width:1599px){ #mainNavi .mn_li1 {margin:0 25px !important;} } @media all and (min-width:1000px) and (max-width:1499px){ #mainNavi {padding:0 !important;max-width:1200px;margin:0 auto;} #mainNavi .depth1-ul {text-align:right !important;} #mainNavi .mn_a1 {font-size:18px !important;} .mn-bg {top:140px !important;} } @media all and (min-width:1000px) and (max-width:1199px){ #mainNavi .depth2-wrap {width:100% !important;margin-left:0 !important;left:0 !important;} } /* 주메뉴 */ @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 {width:100%;height:90px;background:#fff;z-index:500;overflow:hidden} #mainNavi {height:90px;padding:0 65px 0 145px;} #mainNavi .depth1-ul {text-align:center;} #mainNavi .depth1-ul {text-align:center;} #mainNavi > ul > li:first-child {padding-left:8px;} #mainNavi .mn_li1 {display:inline-block;text-align:center;margin:0 50px;} #mainNavi .mn_a1 {display:block;font-size:20px;font-weight:500;color:#333;padding:35px 0 36px 0;} #mainNavi .mn_li1 .mn_a1:hover, #mainNavi .mn_li1 .mn_a1:hover span, #mainNavi .mn_li1.over .mn_a1 span {color:#0d5db2;} #mainNavi .depth2-wrap {display:none;position:absolute;top:91px;left:50%;margin-left:-600px;z-index:1000;text-align:left;font-weight:normal;box-sizing:border-box;width:1200px;padding:0 0 0 330px;} #mainNavi .depth2-wrap:after, #mainNavi .depth2-wrap .depth2-ul:before, #mainNavi .depth2-wrap .depth2-ul:after {display:block;content:'';width:1px;height:0;position:absolute;right:0;top:0;background:#ddd;} #mainNavi-wrap.over #mainNavi .depth2-wrap:after, #mainNavi-wrap.over #mainNavi .depth2-wrap .depth2-ul:before, #mainNavi-wrap.over #mainNavi .depth2-wrap .depth2-ul:after {height:100%;transition:height .3s ease} #mainNavi .depth2-wrap:after {right:0} #mainNavi .depth2-wrap .depth2-ul:after {left:33.333%} #mainNavi .depth2-wrap .depth2-ul:before {left:66.666%} #mainNavi .depth2-wrap .depth2-ul {overflow:hidden;min-height:155px;padding:30px 0;position:relative;box-sizing:border-box;} #mainNavi .depth2-wrap .mn_li2 {float:left;width:33.333%;} #mainNavi .depth2-wrap .mn_a2 {position:relative;z-index:1;display:block;font-size:15px;color:#333;padding:15px 45px 15px 15px;font-weight:400;transition:all .3s ease} #mainNavi .depth2-wrap .mn_a2:before {content:'';display:block;width:5px;height:5px;position:absolute;top:50%;right:30px;margin-top:-4px;border:1px solid transparent;border-top-color:#fff;border-right-color:#fff;transform:rotate(45deg);-ms-transform:rotate(45deg);} #mainNavi .depth2-wrap .mn_a2.over, #mainNavi .depth2-wrap .mn_a2:hover, #mainNavi .depth2-wrap .mn_a2:focus {color:#fff;background:#0d5db2;} #mainNavi .depth2-wrap .depth1-tit {position:absolute;top:0;left:0;width:330px;height:100%;border-right:1px solid #ddd;padding:0 35px 0 60px;box-sizing:border-box} #mainNavi .depth2-wrap .depth1-tit:before, #mainNavi .depth2-wrap .depth1-tit:after {display:block;content:"";position:absolute;} #mainNavi .depth2-wrap .depth1-tit:before {width:100%;height:100%;bottom:0;right:0;background:url(/resources/_Img/Templet/Layout/mainNavi_bg.png) no-repeat right bottom} #mainNavi .depth2-wrap .depth1-tit:after {width:63px;height:63px;bottom:30px;right:28px;background:url(/resources/_Img/Templet/Layout/mainNavi_ico.png) no-repeat;} #mainNavi .depth2-wrap .depth1-tit strong {position:relative;display:block;color:#1555b8;font-size:30px;font-weight:500;padding-bottom:20px;padding-top:43px;line-height:1;} #mainNavi .depth2-wrap .depth1-tit strong:before {display:block;content:"";position:absolute;bottom:0;left:0;width:40px;height:3px;background:#1555b8} #mainNavi .depth2-wrap .depth1-tit .stxt {display:block;font-size:15px;font-weight:300;margin-top:7px;line-height:1.4em;color:#444;word-break:keep-all;position:relative;z-index:500} #mainNavi .depth3-wrap {display:none;padding:5px 0;} #mainNavi .depth3-wrap .mn_a3 {display:block;font-size:13px;color:#444;padding:5px 10px;} #mainNavi .depth3-wrap .mn_a3.over, #mainNavi .depth3-wrap .mn_a3:hover, #mainNavi .depth3-wrap .mn_a3:focus {color:#3f88dc;text-decoration:underline;} #mainNavi .mn_a1[target=_blank] span:after, #mainNavi .mn_a2[target=_blank] span:after, #mainNavi .mn_a3[target=_blank] span:after {display:inline-block;content:"";width:10px;height:10px;vertical-align:middle;margin-left:10px;background:url(/resources/_Templet/TMPL01/_Img/Layout/header_spr.png) no-repeat -22px 0} #mainNavi .mn_a1[target=_blank].over span:after, #mainNavi .mn_a2[target=_blank].over span:after, #mainNavi .mn_a3[target=_blank].over span:after, #mainNavi .mn_a1[target=_blank]:hover span:after, #mainNavi .mn_a2[target=_blank]:hover span:after, #mainNavi .mn_a3[target=_blank]:hover span:after, #mainNavi .mn_a1[target=_blank]:focus span:after, #mainNavi .mn_a2[target=_blank]:focus span:after, #mainNavi .mn_a3[target=_blank]:focus span:after, #mainNavi .mn_a1[target=_blank]:active span:after, #mainNavi .mn_a2[target=_blank]:active span:after, #mainNavi .mn_a3[target=_blank]:active span:after {background-position:-34px 0} #mainNavi .tgl-btn {display:none;} #header-wrap .tmn-bg {position:absolute;left:0;top:128px;width:100%;height:0;background:#f3f4f7;border-bottom:1px solid #323b50;z-index:400;} #menu-wrap .allmn-btn {position:absolute;right:0;top:-1px;width:60px;height:60px;border:0;background:#515c68 url(/resources/_Img/Templet/Layout/allmn_ico.png) no-repeat 50% 50%;display:none;} .mn-bg {width:100%;background:#fff;position:absolute;top:90px;left:0;z-index:2;} #mainNavi-wrap.over #menu-wrap {border-bottom:1px solid #ddd;} #mainNavi-wrap.over .mn-bg {border-bottom:2px solid #0d5db2;} .isMain #menu-wrap {background:rgba(0,0,0,.3)} .isMain #mainNavi .mn_a1 {color:#fff;} } @media only screen and (max-width:999px){ /* 메뉴 */ #mainNavi-wrap {overflow:inherit;position:absolute;top:0;right:0;width:100%;height:100%;max-width:400px;} #menu-wrap.mn-h-open {right:0;overflow:visible} #menu-wrap.mn-h-open .mn-top {position:relative;display:block;width:100%;color:#fff;z-index:8001;overflow:visible;} #menu-wrap.mn-h-open .mn-top .mn-tit {font-size:18px;color:#fff;letter-spacing:-0.02em;font-weight:normal;line-height:1;text-align:center;background:#2b405b url(/resources/_Img/Templet/Layout/tmn_list.png) no-repeat 90% center;background-size:auto 20px;height:70px;line-height:70px;} #menu-wrap {position:absolute;transition:right 0.3s ease;right:-100%;top:0px;left:auto;width:100%;height:9000px;z-index:8000;background:#fff;overflow-y:scroll;overflow-x:hidden} #menu-wrap .mem-btn {overflow:hidden;background:#2b405b;border-top:1px solid rgba(255,255,255,0.2)} #menu-wrap .mem-btn a {float:left;width:50%;text-align:center;font-size:13px;padding:10px 5px;color:#fff;box-sizing:border-box} #menu-wrap .mem-btn a span {display:inline-block;padding:1px 0 1px 23px;} #menu-wrap .mem-btn a span.login {background:url(/resources/_Img/Templet/Layout/mlogin_ico.png) no-repeat 0 50%;} #menu-wrap .mem-btn a span.mypage {background:url(/resources/_Img/Templet/Layout/my_ico.png) no-repeat 0 50%;} #menu-wrap .tmn-box {background:#002a51;padding:19px 20px 20px} #menu-wrap .tmn-box .btn-close {width:54px;height:28px;background:none;border:0;position:absolute;top:21px;right:7px;display:block;border-left:1px solid #3e5b76} #menu-wrap .tmn-box .btn-close:before, #menu-wrap .tmn-box .btn-close:after {display:block;content:"";width:1px;height:28px;background:#fff;position:absolute;top:50%;left:50%;margin-top:-14px;margin-left:-1px} #menu-wrap .tmn-box .btn-close:before {transform:rotate(45deg);-ms-transform:rotate(45deg)} #menu-wrap .tmn-box .btn-close:after {transform:rotate(-45deg);-ms-transform:rotate(-45deg)} #menu-wrap .tmn-box .tmn-title {font-size:18px;font-weight:300;color:#fff;} #menu-wrap .tmn-box .tmn-global {margin-top:10px;} #menu-wrap .tmn-box .tmn-global li {display:inline-block;} #menu-wrap .tmn-box .tmn-global li a {color:#fff;font-size:13px;padding:0 12px 0 12px} #menu-wrap .tmn-box .tmn-global li:first-child a {padding-left:0;position:relative} #menu-wrap .tmn-box .tmn-global li:first-child a:after{display:block;content:"";width:1px;height:14px;background:rgba(255,255,255,0.3);position:absolute;top:50%;right:0;margin-top:-7px} #menu-wrap .tmn-box .tmn-global li.whome a:before {display:inline-block;vertical-align:middle;content:"";width:17px;height:21px;background:url(/resources/_Img/Templet/Layout/header01_spr.png) no-repeat;margin-right:5px;} #menu-wrap .allmn-btn {display:none} #menu-wrap.mn-h-open #mainNavi {left:auto;right:0;top:0;width:100%} #mainNavi .depth1-tit, #mainNavi .mn_li1.over:before {display:none;} #mainNavi li.mn_li1 {position:relative;border-top:1px solid #9a9a9a;background:#fff} #mainNavi li.mn_li1:first-child {border-top:0;} #mainNavi li.mn_li1:last-child {border-bottom:1px solid #9a9a9a;} #mainNavi .mn_li1 .mn_a1 {display:block;padding:19px 0 20px 20px;font-size:16px;color:#333} #mainNavi .mn_li1.is-open, #mainNavi .mn_li1.over {background:#3ba135;border-top-color:#9dd09a} #mainNavi .mn_li1.is-open .mn_a1, #mainNavi .mn_li1.over .mn_a1 {color:#fff} #mainNavi .mn_li1.is-close .tgl-btn {position:absolute;top:10px;right:13px;width:29px;height:29px;border:1px solid #b5b5b5;background:none;z-index:500;} #mainNavi .mn_li1.is-close .tgl-btn:before, #mainNavi .mn_li1.is-close .tgl-btn:after {display:block;content:"";width:1px;height:11px;background:#b5b5b5;position:absolute;top:50%;left:50%;margin-top:-6px;margin-left:-1px} #mainNavi .mn_li1.is-close .tgl-btn:before {transform:rotate(90deg);-ms-transform:rotate(90deg)} #mainNavi .mn_li1.over > .tgl-btn, #mainNavi .mn_li1.is-open > .tgl-btn {border-color:#9dd09a} #mainNavi .mn_li2.is-open > .tgl-btn {border-color:#0d4b91} #mainNavi .mn_li1.is-open > .tgl-btn:after, #mainNavi .mn_li2.is-open > .tgl-btn:after {transform:rotate(90deg);-ms-transform:rotate(90deg);} #mainNavi .mn_li1.over > .tgl-btn:before, #mainNavi .mn_li1.over > .tgl-btn:after, #mainNavi .mn_li1.is-open > .tgl-btn:before, #mainNavi .mn_li1.is-open > .tgl-btn:after {background:#9dd09a} #mainNavi .mn_li2.is-open > .tgl-btn:before, #mainNavi .mn_li2.is-open > .tgl-btn:after {background:#0d4b91} #mainNavi .depth2-wrap {display:none;position:relative;height:auto;background:#ebebeb;transition:display .3s ease;} #mainNavi .mn_li2 {position:relative;padding:0 20px} #mainNavi .depth2-wrap .mn_a2 {position:relative;display:block;color:#555;font-size:15px;line-height:1.2;padding:15px 30px 15px 15px;border-top:1px solid #fff} #mainNavi .depth2-wrap .mn_li2:first-child a {border-top:0;} #mainNavi .depth2-wrap .mn_a2.over, #mainNavi .depth2-wrap .is-open .mn_a2, #mainNavi .depth2-wrap .mn_a2:hover {font-weight:400;color:#0d4b91} #mainNavi .depth2-wrap .is-open .mn_a2:before, #mainNavi .depth2-wrap .mn_a2.over:before, #mainNavi .depth2-wrap .mn_a2:hover:before {background:#f04e23;} #mainNavi .depth2-wrap .depth3-wrap {display:none;padding:0 0 10px;} #mainNavi .depth2-wrap .depth3-ul {background:#fff;padding:10px 0;font-size:0;} #mainNavi .depth2-wrap .depth3-wrap li {padding:3px 20px;display:inline-block;vertical-align:top;width:50%;box-sizing:border-box;} #mainNavi .depth2-wrap .depth3-wrap li a {position:relative;display:block;padding:5px 0 5px 14px;} #mainNavi .depth2-wrap .depth3-wrap li a:before {display:block;content:"";width:7px;height:2px;background:#044288;position:absolute;top:11px;left:0} #mainNavi .depth2-wrap .depth3-wrap li a span {font-size:15px;} #mainNavi .depth2-wrap .depth3-wrap li.over a {position:relative;} #mainNavi .depth2-wrap .depth3-wrap li.over a span {display:inline-block;padding-bottom:4px;border-bottom:1px solid #aaa} .body-slide-wr {position:relative;width:100%;height:100%;transition:margin 0.3s ease;} .body-slider-ovclick {display:none;position:fixed;z-index:10;width:100%;height:100%;left:0;top:0;background:rgba(0,0,0,0.6);cursor:pointer;z-index:3000;} #mn-ctrs-btns {display:block;position:absolute;right:11px;top:55px} #mn-ctrs-btns:before, #mn-ctrs-btns .mn-ctrs-btn:before, #mn-ctrs-btns .mn-ctrs-btn:after {display:block;content:"";width:21px;height:2px;background:#fff;position:absolute;left:50%;margin-left:-10px;z-index:1} #mn-ctrs-btns:before {top:17px;} #mn-ctrs-btns .mn-ctrs-btn:before {top:24px;} #mn-ctrs-btns .mn-ctrs-btn:after {top:31px;} #mn-ctrs-btns .mn-ctrs-btn {position:relative;display:block;width:50px;height:50px;border:0;background:#1f4c76;} .isMain #mn-ctrs-btns .mn-ctrs-btn {position:relative;display:block;width:50px;height:50px;border:1px solid #fff;box-sizing:border-box;background:transparent;} } /*-------------------------submenu_01.css------------------------------------*/ #side-wrap {display:none;} @media all and (min-width:1000px) { #side-wrap {position:absolute;top:0;right:0;width:210px;z-index:1;display:block;} #leftmenu {position:relative} .submenu .lm-tit {padding:0 0 28px;text-align:center;background:#fff;border-bottom:3px solid #222;} .submenu .lm-tit .tit {display:block;font-size:25px;color:#222;font-weight:400;line-height:1.2;word-break:keep-all;} .submenu .lm-tit .txt {display:block;font-size:13px;color:#f3b8a8;line-height:1.4;} .submenu .depth1 .lm_a1 {display:none;} .submenu .depth2 .lm_l2 {position:relative;border-bottom:1px solid #c9c9c9;} .submenu .depth2 .lm_a2 {display:block;padding:21px 50px 22px 20px;font-size:17px;color:#333;font-weight:500;background:#fff;transition:all 0.3s ease;word-break:keep-all} .submenu .depth2 .lm_a2[target=_blank]:after {content:'';position:absolute;top:50%;right:20px;margin-top:-5px;width:10px;height:10px;background:url(../../../_Img/Layout/lm_nw.png) no-repeat 0 0;z-index:100} .submenu .depth2 .over .lm_a2, .submenu .depth2 .is-open .lm_a2, .submenu .depth2 .lm_a2:hover, .submenu .depth2 .lm_a2:focus {color:#fff;background:#0d4b91;text-decoration:none;} .submenu .depth2 .plus .lm_a2:hover, .submenu .depth2 .plus .lm_a2:focus {background-color:#0d4b91;} .submenu .depth3 {display:none;padding:10px 15px 10px 20px;background:#fff;} .submenu .over .depth3 {display:block;} .submenu .depth3 .lm_l3 {margin:10px 0;position:relative;padding-left:20px;} .submenu .depth3 .lm_l3:before {content:'';position:absolute;left:0;top:12px;width:8px;height:2px;background:#1158a9;} .submenu .depth3 .lm_a3 {position:relative;display:inline-block;font-size:16px;color:#555;padding:3px 0 3px;border-bottom:1px solid transparent;} .submenu .depth3 .over .lm_a3, .submenu .depth3 .lm_a3:hover, .submenu .depth3 .lm_a3:focus {color:#1158a9;border-bottom-color:#1158a9;} .submenu .depth3 .over .lm_a3:before, .submenu .depth3 .lm_a3:hover:before, .submenu .depth3 .lm_a3:focus:before {background:#1158a9;} .submenu .depth4 {display:none;padding:5px 0;} .submenu .depth4 .lm_l4 {margin:8px 0;position:relative;padding-left:10px;} .submenu .depth4 .lm_l4:before {content:'';position:absolute;left:0;top:6px;width:3px;height:3px;background:#333;} .submenu .depth4 .lm_a4 span {display:block;font-size:14px;} #side-wrap .lm_a1, #side-wrap .lm_l1 > button {display:none;} #side-wrap .depth2 .has-sub .tgl-btn {position:absolute;top:16px;right:15px;width:28px;height:28px;border:1px solid #d4d4d4;background:transparent;} #side-wrap .depth2 .has-sub .tgl-btn:before, #side-wrap .depth2 .has-sub .tgl-btn:after {content:'';position:absolute;left:50%;top:50%;width:11px;height:1px;background:#c6c6c6;margin:0 0 0 -5px;} #side-wrap .depth2 .has-sub .tgl-btn:after {transform:rotate(90deg);-ms-transform:rotate(90deg);} #side-wrap .depth2 .is-open .tgl-btn {border:1px solid #86a5c8;} #side-wrap .depth2 .is-open .tgl-btn:before {background:#86a5c8;transition:all .3s ease;} #side-wrap .depth2 .is-open .tgl-btn:after {width:0;} #side-wrap .depth2 .has-sub:focus .tgl-btn, #side-wrap .depth2 .has-sub:hover .tgl-btn {border:1px solid #86a5c8;} #side-wrap .depth2 .has-sub:focus .tgl-btn:before, #side-wrap .depth2 .has-sub:focus .tgl-btn:after, #side-wrap .depth2 .has-sub:hover .tgl-btn:before, #side-wrap .depth2 .has-sub:hover .tgl-btn:after {background:#86a5c8;} #side-wrap .depth3 .has-sub .tgl-btn {top:0;right:0;width:23px;height:23px;} #side-wrap .depth3 .lm_l3 .tgl-btn {border:1px solid #044388;} #side-wrap .depth3 .has-sub:focus .tgl-btn:before, #side-wrap .depth3 .has-sub:focus .tgl-btn:after, #side-wrap .depth3 .has-sub:hover .tgl-btn:before, #side-wrap .depth3 .has-sub:hover .tgl-btn:after {background:#044388;} #side-wrap .depth3 .has-sub:focus .tgl-btn, #side-wrap .depth3 .has-sub:hover .tgl-btn {border:1px solid #044388;} #side-wrap .depth3 .has-sub .tgl-btn:after {transform:rotate(90deg);-ms-transform:rotate(90deg);width:11px;} #side-wrap .depth3 .lm_l3 .tgl-btn:before, #side-wrap .depth3 .lm_l3 .tgl-btn:after {background:#044388;} #side-wrap .depth3 .lm_l3.is-open .tgl-btn:after {background:#044388;width:0;} } @media all and (max-width:768px){ #side-wrap {display:block;width:100%;} .submenu .lm-tit {display:none;} #leftmenu {height:90px} #leftmenu .lm_a1 {display:block;width:100%;font-size:20px;color:#fff;padding:35px 0;} #leftmenu .lm_a1 span {display:inline-block;position:relative;padding-right:35px} #leftmenu .lm_a1 span:before, #leftmenu .lm_a1 span:after {display:block;content:"";position:absolute;box-sizing:border-box;transition:all .3s ease} #leftmenu .lm_a1 span:before {width:10px;height:10px;border-left:2px solid #fff;border-top:2px solid #fff;transform:rotate(-135deg);-ms-transform:rotate(-135deg);top:0;right:4px;} #leftmenu .lm_a1 span:after {width:18px;height:2px;background:#fff;bottom:0;right:0;} #leftmenu .lm_l1 > .tgl-btn {position:absolute;top:0;left:0;width:100%;height:90px;border:0;background:none;z-index:100} #leftmenu .lm_l1 {padding:0 20px;background:#002a51 url(/resources/_Img/Templet/Layout/submenu_bg.png) no-repeat 97% 100%;} #leftmenu .depth2 {display:none;position:absolute;top:90px;left:0;width:100%;background:#ebebeb;z-index:1000;} #leftmenu .depth2 .lm_l2 {position:relative;background:#ebebeb;border-top:1px solid #fff;padding:0 15px;} #leftmenu .depth2 .lm_l2:first-child {border:0;} #leftmenu .depth2 .lm_a2 {display:block;padding:17px 30px 17px 10px;font-size:16px;color:#555} #leftmenu .depth2 .lm_l2.is-open .lm_a2 {color:#0d4b91;} #leftmenu .lm_l2.is-close .tgl-btn {position:absolute;top:10px;right:13px;width:29px;height:29px;border:1px solid #b5b5b5;background:none;z-index:500;} #leftmenu .lm_l2.is-close .tgl-btn:before, #leftmenu .lm_l2.is-close .tgl-btn:after {display:block;content:"";width:1px;height:11px;background:#b5b5b5;position:absolute;top:50%;left:50%;margin-top:-6px;margin-left:-1px} #leftmenu .lm_l2.is-close .tgl-btn:before {transform:rotate(90deg);-ms-transform:rotate(90deg)} #leftmenu .lm_l2.is-open > .tgl-btn {border-color:#0d4b91} #leftmenu .lm_l2.is-open > .tgl-btn:before, #leftmenu .lm_l2.is-open > .tgl-btn:after {background:#0d4b91} #leftmenu .lm_l2.is-open > .tgl-btn:after {transform:rotate(90deg);-ms-transform:rotate(90deg)} #leftmenu .depth3 {display:none;padding:10px 20px;overflow:hidden;background:#fbfbfb;margin:0 0 10px;} #leftmenu .depth3 .lm_l3 {display:inline-block;vertical-align:top;width:49%;} #leftmenu .depth3 .lm_l3 .tgl-btn {width:20px;height:20px;top:0;background-size:20px;display:none;} #leftmenu .depth3 .lm_a3 {display:block;font-size:14px;padding:11px 0 11px 15px;color:#444;position:relative} #leftmenu .depth3 .lm_a3:before {display:block;content:"";position:absolute;left:0} #leftmenu .depth3 .lm_a3:before {width:7px;height:2px;background:#044288;top:17px} #leftmenu .depth3 .lm_a3 span {position:relative} #leftmenu .depth3 .lm_a3 span:after {width:0;height:1px;bottom:0;background:#0097b2;transition:all .3s ease} #leftmenu .depth3 .lm_l3.over .lm_a3 span {display:inline-block;padding-bottom:4px;border-bottom:1px solid #aaa} #leftmenu .depth4 {display:none !important;padding:5px 15px;margin-top:10px;overflow:hidden;background:#f6f6f6;border:1px solid #ddd} #leftmenu .depth4 .lm_l4 {position:relative;margin:10px 0;} #leftmenu .depth4 .lm_l4.over .lm_a4 {color:#1462bc;} #leftmenu .lm_l1.is-open .lm_a1 span:before {transform:rotate(45deg);-ms-transform:rotate(45deg);top:5px;} } @media all and (max-width:599px){ #leftmenu {height:70px} #leftmenu .lm_l1 > .tgl-btn {height:70px;} #leftmenu .lm_a1 {padding:25px 0;} #leftmenu .depth2 {top:70px;} } /*-------------------------footer_01.css------------------------------------*/ /* footer */ #footer-wrap {position:relative;background:#393b41;padding:0 0 50px 0;line-height:1.2;z-index:3000;} #footer-wrap .service-cont {position:relative;height:90px} #footer-wrap .service-cont .btn-prev, #footer-wrap .service-cont .btn-next {display:none} #footer-wrap .service-list {padding:33px 0;line-height:1;position:relative;border-bottom:1px solid #616267;} #footer-wrap .service-list li {display:inline-block} #footer-wrap .service-list li a {position:relative;display:block;padding:0 13px} #footer-wrap .service-list li a.privacy {padding-left:20px;} #footer-wrap .service-list li a.privacy:before {display:block;content:"i";width:15px;height:15px;background:#6ba8d3;color:#393b41;position:absolute;top:1px;left:0;border-radius:50%;text-align:center;font-size:13px;font-family:"bio-sans";font-weight:600;} #footer-wrap .service-list li a.privacy span {color:#4788b3;} #footer-wrap .service-list li a:after {content:'';position:absolute;left:0;top:0;width:1px;height:100%;background:rgba(255,255,255,0.3);} #footer-wrap .service-list li:first-child a:after {display:none;} #footer-wrap .service-list li a span {position:relative;font-size:16px;letter-spacing:-0.02em;color:#b0b1b3;} #footer-wrap .service-list li a span:after {content:'';position:absolute;left:0;bottom:-2px;width:100%;height:1px;opacity:0;background:#b0b1b3;transition:all 0.3s ease;} #footer-wrap .service-list li a:hover span:after, .service-cont .service-list li a:focus span:after {opacity:1;} #footer-wrap .service-list li a.privacy span:after, .service-cont .service-list li a.privacy span:after {background:#4788b3} #footer-wrap .family-site-wr {position:absolute;top:117px;right:55px;font-size:0} #footer-wrap .family-site-wr .family-site {font-size:13px;display:inline-block;border:1px solid #616267;background:#414349;width:215px;z-index:100;position:relative} #footer-wrap .family-site-wr .family-site:first-child {border-left:1px solid rgba(255,255,255,0.3)} #footer-wrap .family-site-wr .family-site dt button {position:relative;color:#b3b4b6;background:none;border:0;width:100%;display:block;padding:0 0 0 19px;height:52px;font-weight:500;transition:all 0.3s ease;text-align:left;vertical-align:middle;font-size:15px;} #footer-wrap .family-site-wr .family-site dt button:hover, #footer-wrap .family-site-wr .family-site-wr .family-site dt button:focus {background:rgba(0,0,0,0.3);} #footer-wrap .family-site-wr .family-site dt button:after {transition:all .3s ease;content:'';position: absolute;right:30px;top:19px;width:15px;height:15px;background:url(/resources/_Img/Templet/Layout/footer01_spr.png) no-repeat 0 100%;} #footer-wrap .family-site-wr .family-site dt button.is-open:after {transform:rotate(180deg);-ms-transform:rotate(180deg)} #footer-wrap .family-site-wr .family-site .isSelSub {position:absolute;bottom:54px;left:0;display:none;background:#4d5057;width:100%;} #footer-wrap .family-site-wr .family-site .isSelSub ul {padding:10px 10px 10px 15px;height:150px;overflow-y:scroll} #footer-wrap .family-site-wr .family-site .isSelSub li a {display:inline-block;color:#fff;padding:5px 0;} #footer-wrap .family-site-wr .family-site .isSelSub li a:hover, .service-cont .family-site .isSelSub li a:focus, .service-cont .family-site .isSelSub li a:active {text-decoration:underline;} #footer-wrap .family-site-wr .family-site .btn-fclose {position:absolute;top:0;right:-27px;border:0;cursor:pointer;background:url(/resources/_Img/Templet/Layout/btn_fclose.gif) no-repeat 0 0;width:28px;height:28px;} #footer-wrap .footer {position:relative;font-size:14px;margin-top:21px;padding:0 0 0 255px;color:#b0b1b3;word-break:keep-all} #footer-wrap .footer .flogo {position:absolute;left:0;top:0;} #footer-wrap .footer .flogo a {display:block} #footer-wrap .footer .flogo .flogo-txt {color:#a8acac;display:block;font-size:17px;text-align:center} #footer-wrap .footer .copyright {color:#75767a;font-size:13px;margin-top:10px;font-weight:300} #footer-wrap .footer address {display:inline-block;margin-right:5px;font-weight:300} #footer-wrap .cs-info {font-weight:300;margin:10px 0 12px;} #footer-wrap .cs-info li {display:inline-block;margin-right:10px;} #footer-wrap .cs-info li.e-mail {display:none} #footer-wrap .fsns-wr {position:absolute;top:-94px;right:0} #footer-wrap .fsns li {display:inline-block;margin-left:10px} #footer-wrap .fsns li a {display:block;width:45px;height:45px;background:#4a4b50 url(/resources/_Img/Templet/Layout/footer01_spr.png) no-repeat;border-radius:50%;} #footer-wrap .fsns .facebook a {background-position:0 0;} #footer-wrap .fsns .naverblog a {background-position:-47px 0} #footer-wrap .fsns .youtube a {background-position:-94px 0} #footer-wrap .fsns .twitter a {background-position:-141px 0} #footer-wrap .fsns .insta a {background-position:-186px 0} #footer-wrap .topBt {position:absolute;top:100%;right:0;width:31px;height:61px;text-align:center;margin-top:37px;z-index:100;} #footer-wrap .topBt span {display:inline-block;color:#fff;font-size:12px;padding:20px 0 0;position:relative;} #footer-wrap .topBt span:before {display:block;content:"";width:13px;height:13px;border:2px solid transparent;border-top:2px solid #fff;border-left:2px solid #fff;position:absolute;top:0;left:50%;margin-left:-9px;transform:rotate(45deg);-ms-transform:rotate(45deg)} #footer-wrap .flic-wrap {position:absolute;right:0;bottom:0;} #footer-wrap .flic-wrap li {float:left;margin:0 5px;} #footer-wrap .flic-wrap li a {display:block;} #footer-wrap .fsns li:hover a, #footer-wrap .fsns li:focus a {animation:ico_ani3 1s ease-out infinite} @media all and (max-width:999px){ #footer-wrap .service-cont {height:auto;position:static} #footer-wrap .service-list {text-align:center} #footer-wrap .family-site-wr {top:auto;bottom:0;text-align:center;width:100%} #footer-wrap .family-site-wr .family-site {width:50%;box-sizing:border-box;text-align:left;border-top:1px solid rgba(255,255,255,0.3)} #footer-wrap .footer {padding:0;text-align:center} #footer-wrap .footer .flogo {position:relative;top:auto;left:auto;right:auto;bottom:auto;margin-bottom:20px} #footer-wrap .footer .flogo .flogo-txt {display:none} #footer-wrap .footer .flogo a {display:inline-block} #footer-wrap .fsns-wr {position:relative;top:auto;left:auto;right:auto;bottom:auto;text-align:center;margin:20px 0 0} } @media all and (max-width:680px){ #footer-wrap {padding-bottom:30px} #footer-wrap .footer {margin-top:20px} #footer-wrap .footer .flogo a {width:120px} #footer-wrap .footer .flogo a img {width:100%;height:auto} #footer-wrap .topBt {width:60px;height:60px;margin-top:20px;} #footer-wrap .topBt span {font-size:13px;padding:22px 0} } @media all and (max-width:646px){ #footer-wrap .service-cont {margin:0;width:100%;box-sizing:border-box;padding:0 20px;border-bottom:1px solid rgba(255,255,255,0.3)} #footer-wrap .service-cont .btn-prev, #footer-wrap .service-cont .btn-next {display:block;border:0;background:0;width:45px;height:50px;position:absolute;top:0;} #footer-wrap .service-cont .btn-prev {left:-15px} #footer-wrap .service-cont .btn-next {right:-15px} #footer-wrap .service-cont .btn-prev:before, #footer-wrap .service-cont .btn-next:before {display:block;content:"";width:10px;height:10px;border-left:1px solid #fff;border-bottom:1px solid #fff;position:absolute;top:50%;left:50%;margin-top:-5px;margin-left:-5px;z-index:2;} #footer-wrap .service-cont .btn-prev:before {transform:rotate(45deg);-ms-transform:rotate(45deg)} #footer-wrap .service-cont .btn-next:before {transform:rotate(-135deg);-ms-transform:rotate(-135deg)} #footer-wrap .service-cont button:after {content:"";position:absolute;top:0;display:block;width:30px;height:50px;z-index:1;} #footer-wrap .service-cont .btn-prev:after {left:20px;background:linear-gradient(to left, rgba(48, 48, 48, 0) 0, #393b41 50%)} #footer-wrap .service-cont .btn-next:after {right:20px;background:linear-gradient(to right, rgba(48, 48, 48, 0) 0, #393b41 50%)} #footer-wrap .service-list {width:100%;box-sizing:border-box;overflow:hidden;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;padding:18px 0;} #footer-wrap .service-list:after {display:none} } @media all and (max-width:599px){ #footer-wrap .service-list li span {font-size:13px} #footer-wrap .footer {padding:0;margin-top:15px;text-align:center} } @media all and (max-width:499px){ #footer-wrap .service-list li a span {font-size:13px} #footer-wrap .topBt {width:40px;height:40px} #footer-wrap .topBt span {padding:12px 0 13px} #footer-wrap .footer {font-size:13px;} } /* 애니메이션 */ @keyframes ico_ani { 0%,100% {transform:rotateZ(0deg);-webkit-transform:rotateZ(0deg);} 10%, 30%, 50%, 70%, 90% {transform:rotateZ(-5deg);-webkit-transform:rotateZ(-5deg);} 20%, 40%, 60%, 80% {transform:rotateZ(5deg);-webkit-transform:rotateZ(5deg);} } @-webkit-keyframes ico_ani { 0%,100% {transform:rotateZ(0deg);-webkit-transform:rotateZ(0deg);} 10%, 30%, 50%, 70%, 90% {transform:rotateZ(-5deg);-webkit-transform:rotateZ(-5deg);} 20%, 40%, 60%, 80% {transform:rotateZ(5deg);-webkit-transform:rotateZ(5deg);} } @keyframes ico_ani2 { 0%,50%,100% {transform:translateY(0);-ms-transform:translateY(0)} 25%,75% {transform:translateY(-7%);-ms-transform:translateY(-7%)} } @-webkit-keyframes ico_ani2 { 0%,50%,100% {transform:translateY(0);-ms-transform:translateY(0)} 25%,75% {transform:translateY(-7%);-ms-transform:translateY(-7%)} } @keyframes ico_ani3 { 0%,50%,100% {transform:translateY(0);-ms-transform:translateY(0)} 25%,75% {transform:translateY(-15%);-ms-transform:translateY(-15%)} } @-webkit-keyframes ico_ani3 { 0%,50%,100% {transform:translateY(0);-ms-transform:translateY(0)} 25%,75% {transform:translateY(-15%);-ms-transform:translateY(-15%)} } @keyframes ico_ani4 { 0% {transform:rotate(0deg);-webkit-transform:rotate(0deg);} 100% {transform:rotate(180deg);-webkit-transform:rotate(180deg);} } @-webkit-keyframes ico_ani4 { 0% {transform:rotate(0deg);-webkit-transform:rotate(0deg);} 100% {transform:rotate(180deg);-webkit-transform:rotate(180deg);} }