@charset "utf-8"; html, body {overflow:hidden;overflow-y:visible} body {overscroll-behavior:none;-webkit-text-size-adjust:100%} input, button, select, textarea {font-size:18px;font-family:"SCoreDream", sans-serif;letter-spacing:-.05em} /** -- 접근성 대응 */ a:focus-visible, button:focus-visible, button[type="button"]:focus-visible, button[type="submit"]:focus-visible {outline:orangered solid 4px;outline-offset:-3px} select:focus-visible, input:focus-visible, input[type="text"]:focus-visible {outline:#B73B81 solid 4px;outline-offset:-3px} a:focus:not(:focus-visible), button:not(:focus-visible), button[type="button"]:not(:focus-visible), button[type="submit"]:not(:focus-visible), select:not(:focus-visible), input[type="text"]:not(:focus-visible), input:not(:focus-visible) {outline:0 !important} #doc-wrap {position:relative;overflow:hidden;margin:0 auto;color:#555;font-size:18px;line-height:1.5;letter-spacing:-.05em;font-family:"SCoreDream", sans-serif} .div-cont {width:100%;max-width:1460px;padding:0 30px;margin:0 auto;box-sizing:border-box} @media all and (max-width:999px) { #doc-wrap, input, button, select, textarea {font-size:17px} .div-cont {padding:0 20px} } @media all and (max-width:768px) { #doc-wrap, input, button, select, textarea {font-size:16px} } @media all and (max-width:599px) { #doc-wrap, input, button, select, textarea {font-size:14px} } @media all and (max-width:399px) { .div-cont {padding: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} #skipNavi .skipLink:focus-visible{outline:gold solid 3px} /** -- sns 공통 */ .sns-box {display:flex;flex-flow:row wrap} .sns-box > a {position:relative;border-radius:50%;width:36px;height:36px;margin-right:5px} .sns-box > a:last-child {margin-right:0} .sns-box > a:before {content:"";display:block;position:absolute;left:0;right:0;top:0;bottom:0;background:url(/homepage/kor/_Img/Layout/layout_spr.png) no-repeat;background-position-y:0;width:18px;height:18px;margin:auto} .sns-box > a.fb {background-color:#3A6DCF} .sns-box > a.tw {background-color:#0F1419} .sns-box > a.ins {background:linear-gradient(180deg, #4F4AEC 0%, #F13073 51%, #EE9E2B 100%)} .sns-box > a.fb:before {background-position-x:0} .sns-box > a.tw:before {background-position-x:-28px} .sns-box > a.ins:before {background-position-x:-56px} .sns-box > a.yt { background-color:#ED1D24;} .sns-box > a.yt:before {background-position-x: -146px;} #global {background:#3F4191;height:50px;box-sizing:border-box;z-index:501} #global .div-cont, #global .srvc-sec, #global .srvc-list {display:flex;height:100%} #global .div-cont {flex-flow:row wrap;align-items:center;justify-content:space-between} #global .glink-sec {} #global .glink-sec {display:flex;flex-flow:row wrap;align-items:center} #global .glink-sec > a {display:block;position:relative;margin-right:15px;padding-right:15px;color:#fff;font-size:.833em;box-sizing:border-box} #global .glink-sec > a:hover {text-decoration:underline} #global .glink-sec > a:after {content:"";display:block;position:absolute;right:0;top:50%;background-color:#D9D9D9;border-radius:50%;width:3px;height:3px;margin-top:-2px} #global .glink-sec > a:last-child {margin-right:0;padding-right:0} #global .glink-sec > a:last-child:after {display:none} #global .srvc-list {flex-flow:row wrap;align-items:center;justify-content:flex-end;} #global .srvc-list > a {position:relative;padding:0 15px;color:#fff;font-size:.833em;box-sizing:border-box} #global .srvc-list > a:hover {text-decoration:underline} #global .srvc-list > a:after {content:"";display:block;position:absolute;right:0;top:50%;background:url(/homepage/kor/_Img/Layout/srvc_link_line.gif) repeat;width:1px;height:12px;margin-top:-6px;opacity:.3} #global .srvc-list > a:last-of-type {} #global .srvc-list > a:last-of-type:after {display:none} #global .srvc-list .easy-site-box {position:relative;border:1px solid rgba(255, 255, 255, .1);border-top:0;border-bottom:0;height:100%;padding:0 18px 0 14px;box-sizing:border-box} #global .srvc-list .easy-site-box dt {height:50px} #global .srvc-list .easy-site-box dt button {position:relative;background:transparent;border:0;height:100%;padding:0 9px 0 21px;color:#fff;font-size:.833em;box-sizing:border-box} #global .srvc-list .easy-site-box dt button:before, #global .srvc-list .easy-site-box dt button:after {content:"";display:block;position:absolute;top:50%} #global .srvc-list .easy-site-box dt button:before {left:0;background:url(/homepage/kor/_Img/Layout/layout_spr.png) no-repeat 0 -28px;width:16px;height:20px;margin-top:-10px} #global .srvc-list .easy-site-box dd {display:none;position:absolute;left:0;top:100%;background-color:#3F4FAF;border-radius:0 0 20px 20px;width:100%;padding:20px 18px;box-shadow:0 10px 10px 0 rgba(149, 129, 187, 04);box-sizing:border-box;z-index:501} #global .srvc-list .easy-site-box dd li {border-bottom:1px solid rgba(255, 255, 255, .1)} #global .srvc-list .easy-site-box dd li:last-child {border-bottom:0} #global .srvc-list .easy-site-box dd a {display:block;position:relative;padding:15px 0 15px 40px;color:#fff;font-size:.833em;font-weight:500;line-height:1.3;box-sizing:border-box} #global .srvc-list .easy-site-box dd a:before {content:"";display:block;position:absolute;left:10px;top:50%;background:url(/homepage/kor/_Img/Layout/easy_ico01.png) no-repeat center;width:20px;height:20px;margin-top:-10px;transform:translateY(0);transition:transform .3s ease-out} #global .srvc-list .easy-site-box dd li:first-child a:before {background-image:url(/homepage/kor/_Img/Layout/easy_ico02.png)} #global .srvc-list .easy-site-box dd li:last-child a:before {background-image:url(/homepage/kor/_Img/Layout/easy_ico01.png)} #global .srvc-list .easy-site-box dd a:hover:before {transform:translateY(-5px)} #global .srvc-list .sns-box {padding-left:20px} #global .srvc-list .sns-box > a {position:relative;border-radius:50%;width:36px;height:36px;} @media all and (max-width:999px){ #global {display:none} } /* ============================== * header ================================= */ /** -- logo */ #logo {position:relative;width:100%;max-width:1400px;margin:0 auto;box-sizing:border-box;z-index:501} #logo a {display:block;position:absolute;top:27px;left:0} #logo a img {display:block} @media all and (max-width:1459px) { #logo a {left:30px} } @media all and (max-width:1199px) { #logo a {top:32px} #logo a img {width:156px} } @media all and (max-width:999px) { #logo a {left:20px;top:17px} } @media all and (max-width:399px) { #logo a {left:10px} } /** -- header */ #header-wrap {} #header {height:100px;position:relative;transition:.3s ease-out;box-sizing:border-box} #header .gnavi {display:flex;align-items:center;height:100%;position:absolute;top:0;right:100px;z-index:501} #header .toppop-ctrl {margin-right:25px} #header .toppop-ctrl button {background:url(/resources/_Templet/Header/header_efms/Img/header_spr.png) no-repeat;border:0;width:50px;height:50px;position:relative} #header .toppop-ctrl i {background:#ed008c;border-radius:50%;color:#fff;display:block;font-style:normal;font-size:12px;font-weight:600;width:20px;line-height:20px;position:absolute;bottom:6px;right:-1px} #header .gnavi .whome {background:#002b54;border-radius:999px;display:flex;width:135px;height:40px;margin-right:13px} #header .whome span {color:#fff;display:block;font-size:.941em;font-weight:500;margin:auto;padding-left:17px;position:relative} #header .whome span:before {content:'';display:block;background:#ec008c;border-radius:50%;width:8px;height:8px;position:absolute;top:0;bottom:0;left:0;margin:auto} #header .gnavi-wr {position:relative;width:100%;max-width:1400px;margin:0 auto;z-index:501} #header .gnavi-wr .gnavi-link {display:flex;flex-flow:row wrap;align-items:center;justify-content:flex-end;position:absolute;right:0;top:33px} #header .gnavi-wr .gnavi-link a, #mn-ctrs-btns a, #mn-ctrs-btns button {position:relative;margin:0 20px;width:28px;height:28px} #header .gnavi-wr .gnavi-link a.sch-btn:after, #mn-ctrs-btns a.sch-btn:after {content:"";display:block;position:absolute;right:-20px;top:50%;background-color:#d2d2d2;;width:1px;height:20px;margin-top:-10px} #header .gnavi-wr .gnavi-link a:first-child, #mn-ctrs-btns > *:first-child {margin-left:0} #header .gnavi-wr .gnavi-link a:last-child, #mn-ctrs-btns > *:last-child {margin-right:0} #header .gnavi-wr .gnavi-link .sch-btn:before, #mn-ctrs-btns a.sch-btn:before {content:"";display:block;background:url(/homepage/kor/_Img/Layout/layout_spr.png) no-repeat -26px -28px;position:absolute;left:0;right:0;top:0;bottom:0;width:19px;height:19px;margin:auto} #header .gnavi-wr .gnavi-link .amenu:before, #header .gnavi-wr .gnavi-link .amenu span, #header .gnavi-wr .gnavi-link .amenu:after, #mn-ctrs-btns .mn-ctrs-btn:before, #mn-ctrs-btns .mn-ctrs-btn span, #mn-ctrs-btns .mn-ctrs-btn:after {content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;background:#222;width:28px;border-radius:25px;height:3px;font-size:0;transition:all .3s ease} #header .gnavi-wr .gnavi-link .amenu:before, #mn-ctrs-btns .mn-ctrs-btn:before {margin:20px auto auto} #header .gnavi-wr .gnavi-link .amenu span, #mn-ctrs-btns .mn-ctrs-btn span {margin:auto} #header .gnavi-wr .gnavi-link .amenu:after, #mn-ctrs-btns .mn-ctrs-btn:after {left:0;width:18px;margin:auto 0 19px} #header .gnavi-wr .gnavi-link .amenu:focus, #header .gnavi-wr .gnavi-link .amenu:hover {} #header .gnavi-wr .gnavi-link .amenu:focus:before, #header .gnavi-wr .gnavi-link .amenu:focus span, #header .gnavi-wr .gnavi-link .amenu:focus:after, #header .gnavi-wr .gnavi-link .amenu:hover:before, #header .gnavi-wr .gnavi-link .amenu:hover span, #header .gnavi-wr .gnavi-link .amenu:hover:after {} @media all and (max-width:1459px) { #header .gnavi-wr {} #header .gnavi-wr .gnavi-link {right:30px} } @media all and (max-width:1099px) { #header .gnavi-wr .gnavi-link a {margin:0 10px} #header .gnavi-wr .gnavi-link a.sch-btn:after {right:-10px} } @media all and (max-width:999px) { #header {height:70px} #header .gnavi-wr {display:none} } /* 메뉴 */ #menu-wrap {position:relative;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} #mainNavi [class*=mn_a][target=_blank] span:after {content:'';display:inline-block;background:url(/homepage/kor/_Img/Common/nw_ico.svg) no-repeat;width:15px;height:15px;margin-left:7px} /* 주메뉴 */ @media all and (min-width:1000px) { #header-wrap {transition:.5s;z-index:999} #header-wrap.scrolled {box-shadow:0px 6px 10px 0px rgb(100, 100, 100, .04)} #header-wrap.scrolled #global {margin-top:-40px} #header-wrap.scrolled #header, #header .site-map {position:relative} #header .site-map a {display:block;font-size:0;width:70px;height:70px} #header .site-map a:before, #header .site-map a:after {content:'';display:block;background:#222;width:35px;height:3px;position:absolute;top:0;bottom:0;right:0;left:0;margin:auto;transform-origin:left;transition:.35s} #header .site-map a:before {transform:translateY(-10px)} #header .site-map a:after {transform:translateY(10px)} #header .site-map a span {width:30px;height:3px;background:#222;position:absolute;top:0;bottom:0;right:0;left:0;margin:auto;overflow:hidden;font-size:0;transform:translateX(-2px);transform-origin:left} #header .site-map a:hover span, #header .site-map a:focus span {transform:scaleX(1.2);transition:.35s} #header .site-map a:hover:before, #header .site-map a:focus:before {transform:scaleX(.7) translateY(-10px)} #header .site-map a:hover:after, #header .site-map a:focus:after {transform:scaleX(.7) translateY(10px)} #menu-wrap .mGnavi {display:none} #mainNavi-wrap {background:#fff;box-sizing:border-box;line-height:1;position:absolute;left:0;top:0;width:100%;overflow:hidden;margin:0;text-align:center;box-sizing:border-box;transition:background .3s ease;z-index:500} #mainNavi {border-bottom:1px solid #fff;height:100px;box-sizing:border-box} #mainNavi-wrap.over {box-shadow: 0 13px 16.899999618530273px rgba(189, 189, 214, .3)} #mainNavi-wrap.over #mainNavi {border-color:#ddd} #mainNavi .depth1-wrap {width:100%;height:100%;max-width:1400px;margin:0 auto;padding:0 139px 0 195px;box-sizing:border-box} #mainNavi .depth1-ul, #mainNavi .mn_li1, #mainNavi .mn_a1 {height:100%} #mainNavi .depth1-ul {display:flex;align-items:center;justify-content:flex-end} #mainNavi .mn_li1 {margin:0 15px} #mainNavi .mn_li1:first-child {margin-left:0} #mainNavi .mn_li1:last-child {margin-right:0} #mainNavi .mn_a1 {display:flex;flex-flow:row wrap;position:relative} #mainNavi .mn_a1 > span {display:block;align-self:center;color:#000;font-size:1.278em;font-weight:500;transition:color .3s ease-out} #mainNavi .mn_a1.over span, #mainNavi .mn_a1:hover span, #mainNavi .mn_li1.over .mn_a1 span {color:#3F4191} #mainNavi .depth2-wrap {display:none;position:absolute;top:100px;left:0;min-height:310px;width:100%;padding:50px 0;box-sizing:border-box;z-index:1000} #mainNavi .depth2-wrap .depth2-ul {display:flex;flex-flow:row wrap;width:100%;max-width:1460px;margin:0 auto;padding:0 30px;box-sizing:border-box} #mainNavi .depth2-wrap .mn_li2 {position:relative;width:calc(20% - 20px);margin:0 25px 30px 0} #mainNavi .depth2-wrap .mn_li2:nth-child(5n+5) {margin-right:0} #mainNavi .depth2-wrap .mn_a2 {display:flex;align-items:center;position:relative;background:#fff;border:1px solid #ddd;border-radius:10px;height:50px;padding:0 20px;box-sizing:border-box;transition:all .3s ease-out} #mainNavi .depth2-wrap .mn_a2:before {content:"";display:block;position:absolute;left:-1px;top:-1px;border:0px solid #6765B8;border-radius:10px;width:calc(100% + 2px);height:calc(100% + 2px);transition:border-width .1s ease-in;box-sizing:border-box} #mainNavi .depth2-wrap .mn_a2 span {display:block;color:#222;font-weight:500;line-height:1.3;text-align:left;transition:all .3s ease-out} #mainNavi .depth2-wrap .over .mn_a2 {box-shadow:0 13px 17px rgba(189, 189, 214, .3)} #mainNavi .depth2-wrap .mn_a2:hover:before, #mainNavi .depth2-wrap .over .mn_a2:before {border-width:2px} #mainNavi .depth2-wrap .mn_a2:hover:after, #mainNavi .depth2-wrap .over .mn_a2:after {background-position-x:-60px} #mainNavi .depth2-wrap .mn_li2.has-sub .mn_a2 {padding-right:52px} #mainNavi .depth2-wrap .mn_li2.has-sub .mn_a2 .blt {display:block;position:absolute;top:50%;right:20px;background-color:#E4F0F5;border-radius:50%;width:22px;height:22px;margin-top:-11px} #mainNavi .depth2-wrap .mn_li2.has-sub .mn_a2 .blt:before {content:"";display:block;position:absolute;top:6px;right:6px;border-top:2px solid #444;border-left:2px solid #444;width:8px;height:8px;margin:0 auto;transform:rotate(225deg);transition:transform .3s ease-out;box-sizing:border-box} #mainNavi .depth2-wrap .mn_li2.has-sub .mn_a2:hover .blt, #mainNavi .depth2-wrap .mn_li2.has-sub.over .mn_a2 .blt {background-color:#039D9A} #mainNavi .depth2-wrap .mn_li2.has-sub .mn_a2:hover .blt:before, #mainNavi .depth2-wrap .mn_li2.has-sub.over .mn_a2 .blt:before {top:9px;border-color:#fff;transform:rotate(45deg);} #mainNavi .depth3-wrap {padding:25px 14px 10px;box-sizing:border-box} #mainNavi .depth3-wrap .depth3-ul {} #mainNavi .depth3-wrap .mn_li3 {position:relative;margin-bottom:10px;padding-left:11px;box-sizing:border-box} #mainNavi .depth3-wrap .mn_li3:last-child {margin-bottom:0} #mainNavi .depth3-wrap .mn_li3:before {content:"";display:block;position:absolute;left:0;top:8px;background-color:#6765B8;border-radius:50%;width:4px;height:4px;} #mainNavi .depth3-wrap .mn_a3 {position:relative;display:block;text-align-last:left;box-sizing:border-box} #mainNavi .depth3-wrap .mn_a3 span {display:inline-block;position:relative;color:#555;font-size:.889em;font-weight:300;line-height:1.3;text-align:left;word-wrap:break-word;/*word-break:keep-all;*/white-space:normal;transition:all .3s ease-out} #mainNavi .depth3-wrap .mn_a3 span:before {content:"";display:block;position:absolute;left:0;bottom:0;background-color:#3F4FAF;width:0;height:1px;opacity:0;transition:all .3s ease} #mainNavi .depth3-wrap .mn_a3:hover span:before, #mainNavi .depth3-wrap .over .mn_a3 span:before{width:100%;opacity:1} #mainNavi .depth3-wrap .over.mn_a3 span {font-weight:500} #mainNavi .depth3-wrap .over.mn_a3 span, #mainNavi .depth3-wrap .mn_a3.over span, #mainNavi .depth3-wrap .mn_a3:hover span {color:#3F4FAF;} #mainNavi .tgl-btn {display:none} #menu-wrap .m-gnavi, .body-slider-ovclick {display:none} } @media all and (min-width:1000px) and (max-width:1459px){ #mainNavi .depth1-wrap {padding:0 168px 0 225px} } @media all and (min-width:1000px) and (max-width:1399px){ #mainNavi .mn_a1 > span {font-size:1.15em} #mainNavi .mn_li1 {margin:0 10px} #mainNavi .depth2-wrap .mn_li2 {width:calc(25% - 15px);margin:0 20px 20px 0} #mainNavi .depth2-wrap .mn_li2:nth-child(5n+5) {margin-right:20px} #mainNavi .depth2-wrap .mn_li2:nth-child(4n+4) {margin-right:0} } @media all and (min-width:1000px) and (max-width:1199px){ #mainNavi .depth1-wrap {padding-left:195px} #mainNavi .mn_a1 > span {font-size:1em} } @media all and (min-width:1000px) and (max-width:1099px){ #mainNavi .depth1-wrap {padding-right:115px} #mainNavi .mn_li1 {margin:0 8px} } @media only screen and (max-width:999px){ #mainNavi-wrap {position:absolute;top:0;right:0;width:100%;max-width:400px;overflow:inherit} #menu-wrap:before {content:"";display:block;position:absolute;top:0;left:0;background-color:#fff;width:140px;height:100%} #menu-wrap.mn-h-open {right:0;overflow:visible} #menu-wrap.mn-h-open .m-gnavi {display:block;position:absolute;top:0;left:0;background-color:#3F4191;width:100%;height:50px;padding:0 60px 0 20px;box-sizing:border-box} #menu-wrap.mn-h-open .m-gnavi .mlogo-wrap {display:block} #menu-wrap.mn-h-open .m-gnavi ul {display:flex;flex-flow:row wrap;align-items:center;height:100%} #menu-wrap.mn-h-open .m-gnavi ul > li {position:relative;padding:0 15px} #menu-wrap.mn-h-open .m-gnavi ul > li:after {content:"";display:block;position:absolute;right:0;top:50%;background:url(/homepage/kor/_Img/Layout/srvc_link_line.gif) repeat;width:1px;height:12px;margin-top:-6px;opacity:.3} #menu-wrap.mn-h-open .m-gnavi ul > li:first-child {padding-left:0} #menu-wrap.mn-h-open .m-gnavi ul > li:last-child {padding-right:0} #menu-wrap.mn-h-open .m-gnavi ul > li:last-child:after {display:none} #menu-wrap.mn-h-open .m-gnavi ul a {display:block;color:#fff;font-size:1em;font-weight:500} #menu-wrap.mn-h-open .m-gnavi .btn-close {display:block;position:absolute;top:0;right:0;background:#2C2D62;border:0;width:50px;height:50px} #menu-wrap.mn-h-open .m-gnavi .btn-close:before, #menu-wrap.mn-h-open .m-gnavi .btn-close:after {content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;background-color:#fff;width:19px;height:2px;margin:auto} #menu-wrap.mn-h-open .m-gnavi .btn-close:before {transform:rotate(45deg)} #menu-wrap.mn-h-open .m-gnavi .btn-close:after {transform:rotate(135deg)} #menu-wrap.mn-h-open #mainNavi {left:auto;right:0;top:0;width:100%;height:100%;padding-top:50px;box-sizing:border-box} #menu-wrap {position:absolute;transition:right 0.3s ease;right:-100%;top:0;left:auto;width:100%;height:9000px;background:linear-gradient(90deg, #E2F1F6 0%, #F5EAF2 100%);margin:0;padding:0;overflow-y:scroll;overflow-x:hidden;z-index:8000} #menu-wrap .allmn-btn {display:none} #mainNavi .mn-stit, #mainNavi .mn_li1.over:before {display:none} #mainNavi .depth1-wrap {position:relative;height:100%} #mainNavi .depth1-ul {height:100%} #mainNavi .mn_li1 {} #mainNavi .mn_li1 .etxt {display:none} #mainNavi .mn_li1 .mn_a1 {display:flex;flex-flow:row wrap;align-items:center;position:relative;border-bottom:1px solid #ddd;width:140px;height:60px;padding:0 15px;box-sizing:border-box;z-index:300} #mainNavi .mn_li1 .mn_a1:before {content:'';display:block;position:absolute;top:0;right:17px;bottom:0;border:2px solid #fff;border-top:0;border-left:0;width:8px;height:8px;margin:auto;transform:translateY(-25%) rotate(-45deg);transition:all .3s ease-out;box-sizing:border-box} #mainNavi .mn_li1 .mn_a1 span {display:block;color:#222;font-size:1.071em;font-weight:500;} #mainNavi .mn_li1.is-open .mn_a1 {background-color:#6765B8;border-color:#6765B8} #mainNavi .mn_li1.is-open .mn_a1 span {color:#fff} #mainNavi .mn_li1 > .tgl-btn {display:none} #mainNavi .depth2-wrap {display:none;position:absolute;top:0;right:0;background:linear-gradient(90deg, #E2F1F6 0%, #F5EAF2 100%);width:calc(100% - 140px);height:100%;box-sizing:border-box;transition:display .3s ease;box-sizing:border-box} #mainNavi .is-open .depth2-wrap {display:block} #mainNavi .depth2-ul {position:relative;padding:20px;box-sizing:border-box;z-index:100} #mainNavi .mn_li2 {position:relative;margin-bottom:10px} #mainNavi .mn_li2:last-child {margin-bottom:0} #mainNavi .depth2-wrap .mn_a2 {display:flex;flex-flow:row wrap;align-items:center;position:relative;background-color:#fff;border:2px solid #fff;border-radius:10px;min-height:40px;padding:0 15px;box-shadow:0 13px 16.899999618530273px rgba(189, 189, 214, .3)} #mainNavi .depth2-wrap .mn_li2.has-sub .mn_a2 {padding-right:45px} #mainNavi .depth2-wrap .mn_a2 span {color:#222;font-weight:500;line-height:1.3} #mainNavi .depth2-wrap .mn_li2.has-sub .tgl-btn {position:absolute;top:10px;right:15px;background-color:#E4F0F5;border:0;border-radius:50%;width:22px;height:22px;box-sizing:border-box;z-index:500} #mainNavi .depth2-wrap .mn_li2.has-sub .tgl-btn:before {content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;border:2px solid #444;border-top:0;border-left:0;box-sizing:border-box;width:6px;height:6px;margin:auto;transform:translateY(-25%) rotate(45deg);transition:all .3s ease-out} #mainNavi .depth2-wrap .mn_li2.over .mn_a2, #mainNavi .depth2-wrap .mn_li2.is-open .mn_a2 {border-color:#6765B8} #mainNavi .depth2-wrap .mn_li2.is-open .tgl-btn {background-color:#039D9A;} #mainNavi .depth2-wrap .mn_li2.is-open .tgl-btn:before {border-color:#fff;transform:translateY(25%) rotate(225deg)} #mainNavi .depth2-wrap .depth3-wrap {padding:10px 15px;box-sizing:border-box} #mainNavi .depth2-wrap .mn_li2.is-close .depth3-wrap {display:none} #mainNavi .depth2-wrap .mn_li2.is-open .depth3-wrap {display:block} #mainNavi .depth2-wrap .depth3-wrap li {margin-bottom:10px} #mainNavi .depth2-wrap .depth3-wrap li:last-child {margin-bottom:0} #mainNavi .depth2-wrap .depth3-wrap li a {position:relative;display:block;padding-left:11px} #mainNavi .depth2-wrap .depth3-wrap li a:before {display:block;content:'';width:3px;height:3px;background:#666;border-radius:50%;position:absolute;top:10px;left:0} #mainNavi .depth2-wrap .depth3-wrap li a span {display:inline-block;color:#555;line-height:1.3} #mainNavi .depth2-wrap .depth3-wrap li.over a span, #mainNavi .depth2-wrap .depth3-wrap li a:hover span {color:#3F4FAF;font-weight:500;text-decoration:underline} #mainNavi .depth2-wrap .depth3-wrap li a[target=_blank]:hover span:after {background-position:-22px 0} #mn-ctrs-btns {display:flex;align-items:center;position:absolute;right:20px;top:21px;z-index:1000} #mn-ctrs-btns .mn-ctrs-btn {display:block;background:transparent;border:0} #mainNavi .over .mn_a1[target=_blank] span:after {background-position:-44px 0} #mainNavi .mn_li2.is-open .mn_a3[target=_blank] span:after {background-position:-44px 0} #mainNavi .mn_a3[target=_blank]:hover span:after, #mainNavi .mn_a3[target=_blank]:focus span:after {background-position:-22px 0} #mainNavi .mn_li1 a[target=_blank] span:after {transform:translateY(-1px);-ms-transform:translateY(-1px)} #menu-wrap .depth1-ul > li:nth-child(3) .depth1-tit.mn-tbox {padding:20px;font-size:13px;} .mobile-sideMenu-open {max-height:100vh;overflow:hidden} .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:3001;opacity:0;outline:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);transition:opacity .5s ease} .body-slider-ovclick.show {height:100%;opacity:1} .body-slider-ovclick.hide {opacity:0} } @media only screen and (max-width:399px){ #mn-ctrs-btns .mn-ctrs-btn:before {right:10px} } /* ============================== * main ================================= */ #mcontainer {} #mcontainer .m-tit {color:#6765B8;font-size:1.833em;font-weight:700} #mcontainer .data-ctrl {display:flex;align-items:center;position:absolute} #mcontainer .data-ctrl > button, #mcontainer .data-ctrl > a {position:relative;background-color:#fff;border:1px solid #848484;border-radius:50%;width:40px;height:40px;border-radius:50%;margin-right:5px;transition:all .3s ease-out} #mcontainer .data-ctrl button:before {content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;border-style:solid;border-width:0 0 2px 2px;border-color:transparent transparent #848484 #848484;width:10px;height:10px;transition:all .3s ease} #mcontainer .data-ctrl .btn-prev:before {transform:rotate(45deg);margin:auto 10px auto auto} #mcontainer .data-ctrl .btn-next:before {transform:rotate(225deg);margin:auto auto auto 10px} #mcontainer .data-ctrl button:hover {background-color:#848484} #mcontainer .data-ctrl button:hover:before {border-color:#fff} #mcontainer .data-ctrl .btn-more {background-color:#3F495A;border-color:#3F495A;margin-right:0} #mcontainer .data-ctrl .btn-more:before, #mcontainer .data-ctrl .btn-more:after {content:"";display:block;background-color:#fff;position:absolute;top:0;right:0;bottom:0;left:0;width:16px;height:2px;margin:auto;} #mcontainer .data-ctrl .btn-more:before {} #mcontainer .data-ctrl .btn-more:after {transform:rotate(90deg)} #mcontainer .data-ctrl .btn-more:hover {transform:rotate(270deg)} @media all and (max-width:768px) { #mcontainer .data-ctrl > button, #mcontainer .data-ctrl > a {width:28px;height:28px} #mcontainer .data-ctrl button:before {width:7px;height:7px} #mcontainer .data-ctrl .btn-prev:before {margin:auto 6px auto auto} #mcontainer .data-ctrl .btn-next:before {margin:auto auto auto 6px} #mcontainer .data-ctrl .btn-more:before, #mcontainer .data-ctrl .btn-more:after {width:11px} } #mcontainer .mcont-top {position:relative;margin:0 70px;padding:60px 30px 0;box-sizing:border-box} #mcontainer .mcont-top:before {content:"";display:block;position:absolute;top:0;left:50%;background:url(/homepage/kor/_Img/Main/mcont_top_bg.jpg) no-repeat center top;border-radius:40px;width:1800px;height:700px;max-height:100%;margin-left:-900px;z-index:-1} #mcontainer .mcont-top .mcont-sch-top {background-color:#fff;border-radius:30px;width:100%;max-width:598px;height:70px;margin:0 auto} #mcontainer .mcont-top .mcont-sch-top form {position:relative;width:100%;height:100%} #mcontainer .mcont-top .mcont-sch-top input[name="searchKeyword"] {border:0;border-top-left-radius:30px;border-bottom-left-radius:30px;width:calc(100% - 50px);height:100%;padding:25px 50px 25px 43px;box-shadow:0 13px 16.9px 0 rgba(189, 189, 214, .3);box-sizing:border-box} #mcontainer .mcont-top .mcont-sch-top input[name="searchKeyword"]::placeholder {color:#898A9A;font-size:1.111em} #mcontainer .mcont-top .mcont-sch-top input[name="searchKeyword"]::-webkit-input-placeholder {color:#898A9A;font-size:1.111em} #mcontainer .mcont-top .mcont-sch-top input[name="searchKeyword"]:-ms-input-placeholder {color:#898A9A;font-size:1.111em} #mcontainer .mcont-top .mcont-sch-top .btn-srch {position:relative;background:var(--Linear, linear-gradient(90deg, #4769BF 0%, #E55C9E 100%));border:0;box-shadow:0 10px 7.9px 0 rgba(137, 137, 252, 0.30);position:absolute;right:0;top:0;border-radius:20px 5px 20px 20px;width:70px;height:100%;} #mcontainer .mcont-top .mcont-sch-top .btn-srch:before {content:"";display:block;position:absolute;left:0;right:0;top:0;bottom:0;background:url(/homepage/kor/_Img/Main/main_spr.png) no-repeat 0 0; width:31px;height:26px;margin:auto;transform:translateY(0);transition:transform .3s ease-out} #mcontainer .mcont-top .mcont-sch-top .btn-srch:hover:before {transform:translateY(-5px)} #mcontainer .mcont-top .mcont-top-link {margin-top:40px} #mcontainer .mcont-top .mcont-top-link > ul {display:flex;flex-flow:row wrap;justify-content:center} #mcontainer .mcont-top .mcont-top-link > ul li {width:160px;text-align:center;} #mcontainer .mcont-top .mcont-top-link > ul li a {color:#4E4F72;font-size:1.111em;font-weight:500;line-height:1.5} #mcontainer .mcont-top .mcont-top-link > ul li a .ico {display:block;position:relative;background-color:#fff;border-radius:20px;width:80px;height:80px;margin:0 auto 15px;box-shadow:0 13px 16.899999618530273px rgba(188.65, 189.25, 213.56, .3)} #mcontainer .mcont-top .mcont-top-link > ul li a .ico:before {content:"";display:block;position:absolute;left:0;right:0;top:0;bottom:0;background:url(/homepage/kor/_Img/Main/main_spr.png) no-repeat;background-position-y:0;width:50px;height:50px;margin:auto;transition:transform .3s ease-out} #mcontainer .mcont-top .mcont-top-link > ul li a .ico1:before {background-position-x:-41px} #mcontainer .mcont-top .mcont-top-link > ul li a .ico2:before {background-position-x:-101px;} #mcontainer .mcont-top .mcont-top-link > ul li a .ico3:before {background-position-x:-161px;} #mcontainer .mcont-top .mcont-top-link > ul li a .ico4:before {background-position-x:-221px;} #mcontainer .mcont-top .mcont-top-link > ul li a .ico5:before {background-position-x:-281px;} #mcontainer .mcont-top .mcont-top-link > ul li a .ico6:before {background-position-x:-341px;} #mcontainer .mcont-top .mcont-top-link > ul li a:hover .ico:before {transform:translateY(-5px)} #mcontainer .mvisual-wr {position:relative;width:100%;max-width:1400px;margin:47px auto;padding-bottom:65px} #mcontainer .mvisual-wr:before {content:"";display:block;position:absolute;left:50%;bottom:0;background-color:#fff;border-radius:100px 30px 30px 30px;width:75%;height:188px;margin-left:calc(-50% + 550px);box-shadow:0 20px 30px 0 rgba(189, 189, 214, 0.3)} #mcontainer .mvisual-wr #mVisual {padding-right:32px;margin-right:-32px} #mcontainer .mvisual-wr .swiper-slide {} #mcontainer .mvisual-wr .swiper-slide > .mvis-box {display:flex;flex-flow:row wrap;justify-content:space-between} #mcontainer .mvisual-wr .mvis-box .txt-box {margin-top:83px;width:40%} #mcontainer .mvisual-wr .mvis-box .txt-box .sub-txt {color:#635B78;font-size:1.278em;font-weight:500;line-height:1.2} #mcontainer .mvisual-wr .mvis-box .txt-box .tit {color:#333;font-size:2.778em;font-weight:400;font-family:"SOYOMaple", sans-serif;} #mcontainer .mvisual-wr .mvis-box .txt-box .sub-txt + .tit {margin-top:14px} #mcontainer .mvisual-wr .mvis-box .txt-box .tit b {font-weight:700;} #mcontainer .mvisual-wr .mvis-box .txt-box .tit em {font-weight:700;font-style:normal} #mcontainer .mvisual-wr .mvis-box .txt-box .tit .c01 {color:#B02271} #mcontainer .mvisual-wr .mvis-box .txt-box .tit .c02 {color:#3F4FAF} #mcontainer .mvisual-wr .mvis-box .img-box {position:relative;width:56.29%;max-width:788px;border-radius:30px;overflow:hidden} #mcontainer .mvisual-wr .mvis-box .img-box:before {content:"";display:block;padding-top:53.2994%} #mcontainer .mvisual-wr .mvis-box .img-box > img {position:absolute;top:0;left:0;width:100%;height:100%} #mcontainer .mvisual-wr .data-navi {width:56.29%;max-width:788px} #mcontainer .mvisual-wr .data-navi > button {position:absolute;top:50%;background-color:#fff;border:0;border-radius:50%;width:60px;height:60px;margin-top:-30px;z-index:1} #mcontainer .mvisual-wr .data-navi > button:before {content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;border-style:solid;border-width:0 0 3px 3px;border-color:transparent transparent #222 #222;width:15px;height:15px;transition:all .3s ease} #mcontainer .mvisual-wr .data-navi .btn-prev {left:calc(43.71% - 44px)} #mcontainer .mvisual-wr .data-navi .btn-next {right:0} #mcontainer .mvisual-wr .data-navi .btn-prev:before {transform:rotate(45deg);margin:auto auto auto 25px} #mcontainer .mvisual-wr .data-navi .btn-prev:hover:before {margin:auto auto auto 20px} #mcontainer .mvisual-wr .data-navi .btn-next {} #mcontainer .mvisual-wr .data-navi .btn-next:before {transform:rotate(225deg);margin:auto 25px auto auto} #mcontainer .mvisual-wr .data-navi .btn-next:hover:before {margin:auto 20px auto auto} #mcontainer .mvisual-wr .data-ctrl {display:flex;flex-flow:row wrap;position:absolute;right:0;bottom:20px;width:56.29%;max-width:788px;margin-bottom:0;z-index:1} #mcontainer .mvisual-wr .data-ctrl .data-auto {background-color:transparent;border-radius:0;border:0;width:auto;height:auto;margin-right:10px} #mcontainer .mvisual-wr .data-ctrl .data-auto > button {position:relative;background-color:#fff;border:2px solid #8C8C8C;border-radius:50%;width:28px;height:28px;} #mcontainer .mvisual-wr .data-ctrl .data-auto > button:before, #mcontainer .mvisual-wr .data-ctrl .data-auto > button:after {content:"";display:block;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto} #mcontainer .mvisual-wr .data-ctrl .data-auto .btn-stop:before {border:2px solid #8C8C8C;border-top:0;border-bottom:0;width:6px;height:8px;box-sizing:border-box} #mcontainer .mvisual-wr .data-ctrl .data-auto .btn-play {display:none} #mcontainer .mvisual-wr .data-ctrl .data-auto .btn-play:before {border-width:5px 0 5px 7px;border-style:solid;border-color:transparent;border-left-color:#8C8C8C;width:0;height:0} #mcontainer .mvisual-wr .data-ctrl .data-nums span {color:#8C8C8C;font-size:.889em;font-weight:500} #mcontainer .mvisual-wr .data-ctrl .data-nums .current {color:#4D4D4D;font-size:1.375em} @media all and (max-width:1859px) { #mcontainer .mcont-top {margin:0 30px} #mcontainer .mcont-top:before {left:0;width:100%;margin-left:0} } @media all and (max-width:1459px) { #mcontainer .mvisual-wr:before {left:auto;right:-30px;width:64%;margin-left:0} } @media all and (max-width:1199px) { #mcontainer .mcont-top .mcont-top-link > ul li {width:140px} #mcontainer .mvisual-wr .mvis-box .txt-box .tit {font-size:2.2em} } @media all and (max-width:999px) { #mcontainer .mcont-top {margin:0 20px;padding:40px 20px 0} #mcontainer .mcont-top .mcont-sch-top {height:60px} #mcontainer .mcont-top .mcont-sch-top .btn-srch {width:60px} #mcontainer .mcont-top .mcont-top-link {margin-top:30px;} #mcontainer .mcont-top .mcont-top-link > ul li {width:110px} #mcontainer .mcont-top .mcont-top-link > ul li a {font-size:1em} #mcontainer .mvisual-wr {margin:30px 0;padding-bottom:15px} #mcontainer .mvisual-wr:before {width:100%;right:-20px;height:55%} #mcontainer .mvisual-wr #mVisual {margin:0 -20px;padding:0 20px;overflow:visible} #mcontainer .mvisual-wr .data-navi {width:auto;max-width:none} #mcontainer .mvisual-wr .data-navi > button {width:45px;height:45px;margin-top:-100px} #mcontainer .mvisual-wr .data-navi > button:before {width:12px;height:12px} #mcontainer .mvisual-wr .data-navi .btn-prev {left:-20px} #mcontainer .mvisual-wr .data-navi .btn-next {right:-20px} #mcontainer .mvisual-wr .data-navi .btn-prev:before {margin-left:18px} #mcontainer .mvisual-wr .data-navi .btn-next:before {margin-right:18px} #mcontainer .mvisual-wr .swiper-slide > .mvis-box {flex-direction:column} #mcontainer .mvisual-wr .swiper-slide > .mvis-box > div {width:100% !important;max-width:none !important;box-sizing:border-box} #mcontainer .mvisual-wr .mvis-box .txt-box {margin-top:20px;;padding:0 105px 0 60px} /* #mcontainer .mvisual-wr .mvis-box .txt-box .tit br {display:none} */ #mcontainer .mvisual-wr .mvis-box .img-box {order:-1} #mcontainer .mvisual-wr .data-ctrl {bottom:15px;width:auto;max-width:none} } @media all and (max-width:768px) { #mcontainer .m-tit {font-size:1.5em} #mcontainer .mcont-top {padding-top:30px} #mcontainer .mcont-top .mcont-sch-top {max-width:330px;height:50px} #mcontainer .mcont-top .mcont-sch-top input[name="searchKeyword"] {padding:10px 20px 10px 25px} #mcontainer .mcont-top .mcont-sch-top .btn-srch {width:50px} #mcontainer .mcont-top .mcont-sch-top .btn-srch:before {background-size:274px 98px;width:22px;height:18px} #mcontainer .mcont-top .mcont-top-link {margin-top:10px} #mcontainer .mcont-top .mcont-top-link > ul li {width:100px;margin-top:10px} #mcontainer .mcont-top .mcont-top-link > ul li a .ico {border-radius:10px;width:56px;height:56px;margin-bottom:7px} #mcontainer .mcont-top .mcont-top-link > ul li a .ico:before {background-size:274px 98px;width:35px;height:35px} #mcontainer .mcont-top .mcont-top-link > ul li a .ico1:before {background-position-x:-29px} #mcontainer .mcont-top .mcont-top-link > ul li a .ico2:before {background-position-x:-71px;} #mcontainer .mcont-top .mcont-top-link > ul li a .ico3:before {background-position-x:-113px;} #mcontainer .mcont-top .mcont-top-link > ul li a .ico4:before {background-position-x:-155px;} #mcontainer .mcont-top .mcont-top-link > ul li a .ico5:before {background-position-x:-197px;} #mcontainer .mcont-top .mcont-top-link > ul li a .ico6:before {background-position-x:-239px;} #mcontainer .mvisual-wr {margin:15px 0} #mcontainer .mvisual-wr:before {padding:50px 20px 20px 20px} #mcontainer .mvisual-wr .mvis-box .img-box {border-radius:10px} #mcontainer .mvisual-wr .mvis-box .txt-box {margin-top:15px;padding-left:30px} #mcontainer .mvisual-wr .mvis-box .txt-box .sub-txt {font-size:1.111em} #mcontainer .mvisual-wr .mvis-box .txt-box .tit {font-size:1.8em} #mcontainer .mvisual-wr .mvis-box .txt-box .sub-txt + .tit {margin-top:4px} #mcontainer .mvisual-wr .data-navi > button {width:30px;height:30px;margin-top:-20%} #mcontainer .mvisual-wr .data-navi > button:before {border-width:0 0 2px 2px;width:7px;height:7px} #mcontainer .mvisual-wr .data-navi .btn-prev {left:0} #mcontainer .mvisual-wr .data-navi .btn-next {right:0} #mcontainer .mvisual-wr .data-navi .btn-prev:before {margin-left:13px} #mcontainer .mvisual-wr .data-navi .btn-next:before {margin-right:13px} } @media all and (max-width:699px) { #mcontainer .mcont-top .mcont-top-link > ul {width:400px;margin:0 auto} } @media all and (max-width:499px) { #mcontainer .mcont-top .mcont-top-link > ul {width:300px} #mcontainer .mvisual-wr .mvis-box .txt-box {padding:0 75px 0 20px} #mcontainer .mvisual-wr .data-ctrl .data-auto {margin-right:5px} } @media all and (max-width:399px) { #mcontainer .mcont-top {margin:0 10px} #mcontainer .mvisual-wr .mvis-box .txt-box {padding-left:12px} #mcontainer .mvisual-wr .mvis-box .txt-box .sub-txt {font-size:1em} #mcontainer .mvisual-wr .mvis-box .txt-box .tit {font-size:1.5em} } @media all and (max-width:369px) { #mcontainer .mcont-top {padding:30px 15px 0} #mcontainer .mcont-top .mcont-top-link > ul {width:260px} #mcontainer .mcont-top .mcont-top-link > ul li {width:85px} } /** -- 주요사업 */ .msec01 {} .msec01 .tit-box {text-align:center;} .msec01 .tit-box .mtit {color:#000;font-size:2.778em;font-weight:700;font-family:"SOYOMaple", sans-serif;} .msec01 .tit-box .mtit em {color:#6765B8;font-style:normal} .msec01 .tit-box > p {margin-top:10px;color:#444} .msec01 .msec01-cont {display:flex;flex-flow:row wrap;justify-content:space-between;margin-top:40px} .msec01 .msec01-cont .mbiz-wr {display:flex;flex-flow:row wrap;justify-content:space-between;background:#6765B8 url(/homepage/kor/_Img/Main/mbiz_bg.png) no-repeat left bottom;border-radius:30px;width:30.93%;padding:20px 30px;max-width:430px;box-sizing:border-box} .msec01 .mbiz-wr h4.tit {flex:1 1 0;margin-right:15px;color:#fff;font-size:1.333em;font-weight:600;} .msec01 .mbiz-wr h4.tit .ico {display:block;position:relative;background-color:#fff;border-radius:20px;width:55px;height:55px;margin-bottom:15px} .msec01 .mbiz-wr h4.tit .ico:before {content:"";display:block;position:absolute;left:0;right:0;top:0;bottom:0;background:url(/homepage/kor/_Img/Main/main_spr.png) no-repeat 0 -60px;width:26px;height:26px;margin:auto} .msec01 .mbiz-wr .mbiz-box {width:235px;} .msec01 .mbiz-wr .mbiz-box a {display:block;position:relative;background-color:rgba(255, 255, 255, .2);border-radius:30px;margin-bottom:15px;padding:8px 20px 8px 52px;color:#fff;font-weight:500;box-sizing:border-box;transition:all .3s ease-out} .msec01 .mbiz-wr .mbiz-box a:last-child {margin-bottom:0} .msec01 .mbiz-wr .mbiz-box a:before, .msec01 .mbiz-wr .mbiz-box a:after {content:"";display:block;position:absolute;} .msec01 .mbiz-wr .mbiz-box a:before {top:50%;left:20px;background-color:#2F2E65;border-radius:50%;width:22px;height:22px;margin-top:-11px} .msec01 .mbiz-wr .mbiz-box a:after {width:9px;height:5px;left:25px;top:16px;border:solid;border-width:0 0 2px 2px;border-color:transparent transparent #fff #fff;transform:rotate(-45deg);} .msec01 .mbiz-wr .mbiz-box a:hover {background-color:#fff;color:#2F2E65} .msec01 .msec01-cont .mlink01-wr {width:67.28%;max-width:930px} .msec01 .mlink01-wr .mlink01-box {display:flex;flex-flow:row wrap;height:100%} .msec01 .mlink01-wr .mlink01-box > li {width:calc(33% - 17px);max-width:380px;margin-right:20px;} .msec01 .mlink01-wr .mlink01-box > li:last-child {margin-right:0} .msec01 .mlink01-wr .mlink01-box > li a {display:block;position:relative;border-radius:30px;height:100%;padding:30px;box-sizing:border-box} .msec01 .mlink01-wr .mlink01-box > li a span {display:block} .msec01 .mlink01-wr .mlink01-box > li a .ico {display:block;position:relative;width:50px;height:50px;margin-bottom:20px;transform:translateY(0);transition:transform .3s ease-out} .msec01 .mlink01-wr .mlink01-box > li a .ico:hover {transform:translateY(-7px)} .msec01 .mlink01-wr .mlink01-box > li a .ico:before {content:"";display:block;position:absolute;left:0;right:0;top:0;bottom:0;background:url(/homepage/kor/_Img/Main/main_spr2.png) no-repeat;background-position-y:-60px;width:50px;height:50px;margin:auto} .msec01 .mlink01-wr .mlink01-box > li a .ico1:before {background-position-x:-36px} .msec01 .mlink01-wr .mlink01-box > li a .ico2:before {background-position-x:-96px} .msec01 .mlink01-wr .mlink01-box > li a .ico3:before {background-position-x:-156px} .msec01 .mlink01-wr .mlink01-box > li a .ico4:before {background-position:-335px -92px} .msec01 .mlink01-wr .mlink01-box > li a .txt {font-size:1.111em;font-weight:600} .msec01 .mlink01-wr .mlink01-box > li a .more-txt {display:flex;flex-flow:row wrap;align-items:center;position:absolute;right:0;bottom:0;background-color:#fff;border-radius:30px 0px;padding:15px 30px;box-shadow:0 13px 16.9px 0 rgba(189, 189, 214, .3);color:#585858;font-size:.944em;font-weight:500;text-align:left;box-sizing:border-box} .msec01 .mlink01-wr .mlink01-box > li a .arr {display:inline-block;position:relative;width:19px;height:16px;margin-left:8px;transform:translateX(0);transition:transform .3s ease-out;} .msec01 .mlink01-wr .mlink01-box > li a .arr:before, .msec01 .mlink01-wr .mlink01-box > li a .arr:after {content:"";display:block;position:absolute;top:50%;} .msec01 .mlink01-wr .mlink01-box > li a .arr:before {left:0;background-color:#585858;width:100%;height:2px;margin-top:-1px} .msec01 .mlink01-wr .mlink01-box > li a .arr:after {right:0;border-style:solid;border-width:0 0 2px 2px;border-color:transparent transparent #585858 #585858;width:8px;height:8px;margin-top:-5px;transform:rotate(-135deg)} .msec01 .mlink01-wr .mlink01-box > li a:hover .arr {transform:translateX(3px)} .msec01 .mlink01-wr .mlink01-box > li:nth-child(3n+1) a {background:#E4DFF1 url(/homepage/kor/_Img/Main/mlink_bg01.png) no-repeat right bottom} .msec01 .mlink01-wr .mlink01-box > li:nth-child(3n+2) a {background:#DCE7F0 url(/homepage/kor/_Img/Main/mlink_bg02.png) no-repeat right bottom} .msec01 .mlink01-wr .mlink01-box > li:nth-child(3n) a {background:#F3D9D9 url(/homepage/kor/_Img/Main/mlink_bg03.png) no-repeat right bottom} .msec01 .mlink01-wr .mlink01-box > li:nth-child(3n+1) a .txt {color:#462B67} .msec01 .mlink01-wr .mlink01-box > li:nth-child(3n+2) a .txt {color:#2B4367} .msec01 .mlink01-wr .mlink01-box > li:nth-child(3n) a .txt {color:#672B2B} .msec01 .msec01-cont .mlink02-wr {display:flex;flex-flow:row wrap;align-items:center;margin-top:40px;width:100%} .msec01 .msec01-cont .mlink02-wr > a {background-color:#E8E8EF;border-radius:20px;width:calc(25% - 15px);max-width:335px;margin-right:20px;padding:20px 30px;text-align:center;box-sizing:border-box} .msec01 .msec01-cont .mlink02-wr > a:last-child {margin-right:0} .msec01 .msec01-cont .mlink02-wr > a .cate {display:inline-block;background-color:#fff;border-radius:60px;padding:6px 20px;color:#4D585C;font-size:.889em;font-weight:500;} .msec01 .msec01-cont .mlink02-wr > a .logo-img {display:block;margin-top:10px;transform:translateY(0);transition:transform .3s ease-out} .msec01 .msec01-cont .mlink02-wr > a .logo-img > img {max-width:100%} .msec01 .msec01-cont .mlink02-wr > a:hover .logo-img {transform:translateY(-5px)} @media all and (max-width:1199px) { .msec01 .mbiz-wr .mbiz-box {width:205px;} .msec01 .mlink01-wr .mlink01-box > li a {padding:30px 20px} .msec01 .mlink01-wr .mlink01-box > li a .more-txt {padding:12px 18px} } @media all and (max-width:999px) { .msec01 .tit-box .mtit {font-size:2.3em} .msec01 .msec01-cont {display:block;margin-top:20px} .msec01 .msec01-cont .mbiz-wr {display:block;background-position:200% bottom; width:auto;max-width:none;padding:25px 20px} .msec01 .mbiz-wr h4.tit {display:flex;align-items:center;margin-right:0;margin-bottom:15px} .msec01 .mbiz-wr h4.tit .ico {margin-bottom:0;margin-right:10px} .msec01 .mbiz-wr .mbiz-box {display:flex;flex-flow:row wrap;width:auto} .msec01 .mbiz-wr .mbiz-box a {width:calc(25% - 8px);margin-right:10px;margin-bottom:0;padding:8px 10px 8px 30px;font-size:.988em} .msec01 .mbiz-wr .mbiz-box a:last-child {margin-right:0} .msec01 .mbiz-wr .mbiz-box a:before {left:10px;width:16px;height:16px;margin-top:-8px} .msec01 .mbiz-wr .mbiz-box a:after {left:14px;top:17px;width:6px;height:2px} .msec01 .msec01-cont .mlink01-wr {width:auto;max-width:none;margin-top:20px} .msec01 .mlink01-wr .mlink01-box > li {width:calc(33% - 7px);height:auto;max-width:none;margin-right:10px} .msec01 .mlink01-wr .mlink01-box > li:nth-child(odd) {margin-top:0} .msec01 .mlink01-wr .mlink01-box > li a {padding:20px 20px 42px} .msec01 .mlink01-wr .mlink01-box > li a .ico {margin-bottom:7px} .msec01 .mlink01-wr .mlink01-box > li a .more-txt {padding:10px 15px;font-size:.889em} .msec01 .mlink01-wr .mlink01-box > li a .arr {width:12px} .msec01 .msec01-cont .mlink02-wr {margin-top:10px} .msec01 .msec01-cont .mlink02-wr > a {width:calc(50% - 5px);max-width:none;margin-top:10px;margin-right:10px;padding:20px;} .msec01 .msec01-cont .mlink02-wr > a:nth-child(even) {margin-right:0} } @media all and (max-width:768px) { .msec01 .tit-box .mtit {font-size:1.8em} .msec01 .msec01-cont {margin-top:15px} .msec01 .msec01-cont .mbiz-wr {background-size:382px auto;background-position:160% bottom} .msec01 .mbiz-wr h4.tit {font-size:1.2em} .msec01 .mbiz-wr h4.tit .ico {border-radius:10px;width:39px;height:39px} .msec01 .mbiz-wr h4.tit .ico:before {background-size:274px 98px;background-position:0 -42px;width:18px;height:18px} .msec01 .msec01-cont .mbiz-wr {padding:20px 15px} .msec01 .mbiz-wr .mbiz-box a {font-size:.889em} .msec01 .msec01-cont .mlink01-wr {margin-top:15px} .msec01 .mlink01-wr .mlink01-box > li a {background-size:156px auto !important;border-radius:15px;padding:15px 15px 47px} .msec01 .mlink01-wr .mlink01-box > li a .ico {width:35px;height:35px;margin-bottom:5px} .msec01 .mlink01-wr .mlink01-box > li a .ico:before {background-size:274px 98px;background-position-y:-42px;width:35px;height:35px} .msec01 .mlink01-wr .mlink01-box > li a .ico1:before {background-position-x:-25px} .msec01 .mlink01-wr .mlink01-box > li a .ico2:before {background-position-x:-67px} .msec01 .mlink01-wr .mlink01-box > li a .ico3:before {background-position-x:-109px} .msec01 .mlink01-wr .mlink01-box > li a .txt {line-height:1.3} .msec01 .mlink01-wr .mlink01-box > li a .more-txt {border-radius:15px 0} .msec01 .msec01-cont .mlink02-wr {margin-top:5px} .msec01 .msec01-cont .mlink02-wr > a {padding:15px} .msec01 .msec01-cont .mlink02-wr > a .cate {padding:6px 15px} .msec01 .msec01-cont .mlink02-wr > a .logo-img > img {height:28px} } @media all and (max-width:699px) { .msec01 .mbiz-wr h4.tit {margin-bottom:0} .msec01 .mbiz-wr .mbiz-box a {width:calc(50% - 5px);margin-top:10px} .msec01 .mbiz-wr .mbiz-box a:nth-child(even) {margin-right:0} } @media all and (max-width:599px) { .msec01 .mlink01-wr .mlink01-box > li a {padding-left:10px;padding-right:10px} .msec01 .mlink01-wr .mlink01-box > li a .more-txt {padding:8px;font-size:.778em} .msec01 .mlink01-wr .mlink01-box > li a .txt {font-size:.95em;word-break:keep-all} .msec01 .mlink01-wr .mlink01-box > li a .txt br {display:none} .msec01 .mlink01-wr .mlink01-box > li a:hover .arr {width:4px;height:4px;margin-left:3px;margin-top:-3px} .msec01 .msec01-cont .mlink02-wr > a {padding:12px 10px} .msec01 .msec01-cont .mlink02-wr > a .cate {padding:2px 10px;font-size:12px} .msec01 .mbiz-wr .mbiz-box a:after {top:15px} } @media all and (max-width:499px) { .msec01 .msec01-cont .mlink02-wr > a .logo-img > img {height:20px} } @media all and (max-width:399px) { } /** -- 최신소식 */ .msec02 {margin-top:80px} #mTabBoard {position:relative;height:240px;margin-top:-45px;box-sizing:border-box} #mTabBoard dl {display:inline-block;vertical-align:middle} #mTabBoard dl dt {display:inline-block;position:relative;text-align:left} #mTabBoard dl dt:after {content:"";display:block;position:absolute;right:-3px;top:50%;background-color:#D4D4D4;border-radius:50%;width:6px;height:6px;margin-top:-3px} #mTabBoard dl dt a {display:block;position:relative;margin:0 20px;color:#9B9B9B;font-size:1.444em;font-weight:500;transition:all .3s ease-out} #mTabBoard dl:first-of-type dt a {margin-left:202px} #mTabBoard dl:last-of-type dt:after {display:none} #mTabBoard dl dd {display:none;text-align:left} #mTabBoard .mboard-swiper .swiper-slide a {display:block;position:relative;background-color:#F6F6F6;border-radius:20px;height:180px;padding:30px;box-sizing:border-box} #mTabBoard .mboard-swiper .swiper-slide a:before {content:"";display:block;background-color:#4187B8;border-radius:50%;width:8px;height:0;opacity:0;transform:translateY(0);transition:all .3s ease-out;z-index:1} #mTabBoard .mboard-swiper .swiper-slide a span {display:block} #mTabBoard .mboard-swiper .swiper-slide a .s-tit {color:#333;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;white-space:normal;height:71px;word-wrap:break-word;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical} #mTabBoard .mboard-swiper .swiper-slide a .s-tit .new-mark {display:inline-block;position:relative;background-color:#3F4191;border-radius:50%;width:17px;height:17px;line-height:12px;vertical-align:middle;text-align:center;margin-top:-4px} #mTabBoard .mboard-swiper .swiper-slide a .s-tit .new-mark:before {content:"N";display:inline-block;color:#fff;font-size:10px;line-height:1} #mTabBoard .mboard-swiper .swiper-slide a .s-date {position:absolute;left:30px;bottom:30px;margin-top:30px;padding-left:20px;color:#777;font-size:.778em;letter-spacing:0;box-sizing:border-box} #mTabBoard .mboard-swiper .swiper-slide a .s-date:before {content:"";display:block;position:absolute;left:0;top:50%;background:url(/homepage/kor/_Img/Main/main_spr.png) no-repeat -246px -60px;background-position-y:-60px;width:15px;height:15px;margin-top:-7px} #mTabBoard .mboard-swiper .swiper-slide a:hover:before {height:8px;opacity:1;transform:translateY(-6px)} #mTabBoard dl.isOn dt a {} #mTabBoard dl.isOn dt a, #mTabBoard dl dt a:hover {color:#2676AE} #mTabBoard dl.isOn dd {display:block;position:absolute;left:0;top:60px;width:100%} #mTabBoard .data-ctrl {right:0;bottom:100%;margin-bottom:20px} @media all and (max-width:1199px) { #mTabBoard dl dt a {font-size:1.3em} } @media all and (max-width:999px) { .msec02 {margin-top:30px} .msec02 .m-tit {margin-bottom:20px} #mTabBoard {height:220px;margin-top:0} #mTabBoard dl:first-of-type dt a {margin-left:0} #mTabBoard dl dt a {font-size:1.2em} #mTabBoard dl.isOn dd {top:40px} #mTabBoard .mboard-swiper .swiper-slide a .s-tit {height:67px} } @media all and (max-width:768px ){ .msec02 {margin-top:20px} .msec02 .m-tit {margin-bottom:15px} #mTabBoard {height:190px} #mTabBoard dl dt a {margin:0 10px;font-size:1em} #mTabBoard dl dt:after {width:4px;height:4px;margin-top:-2px} #mTabBoard dl.isOn dd {top:30px} #mTabBoard .mboard-swiper .swiper-slide a {height:150px;padding:20px} #mTabBoard .mboard-swiper .swiper-slide a .s-tit {height:63px} #mTabBoard .mboard-swiper .swiper-slide a .s-date {left:20px;bottom:20px;margin-top:15px} #mTabBoard .data-ctrl {margin-bottom:41px} } @media all and (max-width:599px) { .msec02 .m-tit {margin-bottom:10px} #mTabBoard {height:160px} #mTabBoard dl dt a {margin:0 4px} #mTabBoard .mboard-swiper .swiper-slide a {height:130px} } @media all and (max-width:399px) { #mTabBoard .mboard-swiper .swiper-slide a .s-tit {height:55px} } @media all and (max-width:369px) { #mTabBoard dl dt a {font-size:.85em} } /** -- 사진으로 보는 소식 */ .msec03 {margin-top:60px} .msec03 .m-tit {margin-bottom:20px} .msec03 .mphoto-wr {display:flex;flex-flow:row wrap;justify-content:space-between;position:relative} .msec03 .mphoto-wr .mphoto-on, .msec03 .mphoto-wr .mphoto-list-wr {width:48.57%;max-width:680px;/*height:573px*/} /* .msec03 .mphoto-wr .mphoto-list-wr .mphoto-swiper, /* .msec03 .mphoto-wr .mphoto-list-wr .mphoto-swiper .swiper-wrapper {height:573px} */ .msec03 .mphoto-wr .mphoto-on {height:100%} .msec03 .mphoto-wr .mphoto-on a, .msec03 .mphoto-wr .mphoto-on a span, .msec03 .mphoto-wr .mphoto-list-wr a span {display:block} .msec03 .mphoto-wr img {position:absolute;left:0;top:50%;width:100%;height:100%;object-fit:cover;transform:translateY(-50%)} .msec03 .mphoto-wr .s-tit:hover {text-decoration:underline} .msec03 .mphoto-wr .s-date {position:relative;padding-left:20px;color:#777;font-size:.778em;letter-spacing:0} .msec03 .mphoto-wr .s-date:before {content:"";display:block;position:absolute;left:0;top:50%;background:url(/homepage/kor/_Img/Main/main_spr.png) no-repeat -246px -60px;background-position-y:-60px;width:15px;height:15px;margin-top:-6px} .msec03 .mphoto-wr .mphoto-on a .img-box {position:relative;background-color:#F6F6F6;border-radius:10px;overflow:hidden} .msec03 .mphoto-wr .mphoto-on a .img-box:before {content:"";display:block;padding-top:58.8235%} .msec03 .mphoto-wr .mphoto-on a .txt-box {margin-top:30px} .msec03 .mphoto-wr .mphoto-on .txt-box .s-tit, .msec03 .mphoto-wr .mphoto-on .txt-box .s-txt, .msec03 .mphoto-wr .mphoto-on .txt-box .s-date {opacity:0;transform:translateY(10px)} .msec03 .mphoto-wr .mphoto-on a .txt-box .s-tit {color:#333;font-size:1.333em;font-weight:500;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:all .4s ease .2s} .msec03 .mphoto-wr .mphoto-on a .txt-box .s-txt {margin-top:15px;color:#898989;line-height:1.667;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;white-space:normal;height:60px;word-wrap:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;transition:all .4s ease .4s} .msec03 .mphoto-wr .mphoto-on a .txt-box .s-date {margin-top:15px;transition:all .4s ease .4s} .msec03 .mphoto-wr .mphoto-on.on .txt-box .s-tit, .msec03 .mphoto-wr .mphoto-on.on .txt-box .s-txt, .msec03 .mphoto-wr .mphoto-on.on .txt-box .s-date {opacity:1;transform:translateY(0)} .msec03 .mphoto-wr .mphoto-list-wr {} .msec03 .mphoto-wr .mphoto-list-wr a {display:flex;flex-flow:row wrap;justify-content:space-between;height:100%} .msec03 .mphoto-wr .mphoto-list-wr a .img-box {position:relative;background-color:#F6F6F6;border-radius:10px;width:38.24%;max-width:260px;max-height:100%;overflow:hidden} /* .msec03 .mphoto-wr .mphoto-list-wr a .img-box:before {content:"";display:block;padding-top:61.5384%;} */ .msec03 .mphoto-wr .mphoto-list-wr a .txt-box {align-self:center;width:57.35%;max-width:390px;/*padding:30px 0;*/box-sizing:border-box} .msec03 .mphoto-wr .mphoto-list-wr a .txt-box .s-tit {color:#333;font-size:1.056em;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;white-space:normal;height:58px;word-wrap:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .msec03 .mphoto-wr .mphoto-list-wr a .txt-box .s-txt {display:none} .msec03 .mphoto-wr .mphoto-list-wr a .txt-box .s-date {margin-top:20px} .msec03 .mphoto-wr .data-ctrl {right:0;bottom:100%;margin-bottom:20px} @media all and (max-width:1399px) { } @media all and (max-width:999px) { .msec03 {margin-top:30px;} .msec03 .mphoto-wr .mphoto-list-wr a .img-box {width:42%;margin-right:10px} .msec03 .mphoto-wr .mphoto-list-wr a .txt-box {flex:1 1 0;width:auto;max-width:none} .msec03 .mphoto-wr .s-date:before {margin-top:-7px} } @media all and (max-width:768px) { .msec03 {margin-top:20px} .msec03 .m-tit {margin-bottom:15px} .msec03 .mphoto-wr {display:block} .msec03 .mphoto-wr .mphoto-on, .msec03 .mphoto-wr .mphoto-list-wr {width:auto;max-width:none;height:auto} .msec03 .mphoto-wr .mphoto-list-wr .mphoto-swiper, .msec03 .mphoto-wr .mphoto-list-wr .mphoto-swiper .swiper-wrapper {height:auto !important} .msec03 .mphoto-wr .mphoto-on a .txt-box {margin-top:12px} .msec03 .mphoto-wr .mphoto-on a .txt-box .s-tit {font-size:1.111em} .msec03 .mphoto-wr .mphoto-on a .txt-box .s-txt {margin-top:7px;height:45px;line-height:1.4} .msec03 .mphoto-wr .mphoto-on a .txt-box .s-date {margin-top:7px} .msec03 .mphoto-wr .mphoto-list-wr {margin-top:17px} .msec03 .mphoto-wr .mphoto-list-wr a {display:block;height:auto} .msec03 .mphoto-wr .mphoto-list-wr a .img-box {width:auto;max-width:none;max-height:none;margin-right:0} .msec03 .mphoto-wr .mphoto-list-wr a .img-box:before {content:"";display:block;padding-top:61.5384%;} .msec03 .mphoto-wr .mphoto-list-wr a .txt-box {margin-top:10px} .msec03 .mphoto-wr .mphoto-list-wr a .txt-box .s-tit {height:51px} .msec03 .mphoto-wr .mphoto-list-wr a .txt-box .s-date {margin-top:7px} .msec03 .mphoto-wr .data-ctrl {margin-bottom:15px} } @media all and (max-width:599px) { .msec03 .mphoto-wr .mphoto-on a .txt-box .s-txt {height:40px} .msec03 .mphoto-wr .mphoto-list-wr a .txt-box .s-tit {height:auto;-webkit-line-clamp:1} } /** -- 최신 발간자료 */ .msec04 {background:url(/homepage/kor/_Img/Main/msec04_bg.jpg) no-repeat top center;border-radius:30px;margin:80px 30px 0;padding-top:65px} .msec04 .publi-wr {background:rgba(255, 255, 255, .6);border-radius:30px 30px 0 0;padding:37px 50px;backdrop-filter:blur(10px);box-sizing:border-box} .msec04 .publi-wr h3.tit {display:flex;flex-flow:row wrap;align-items:center;margin-bottom:20px;color:#1D1E55;font-size:1.444em;font-weight:600} .msec04 .publi-wr h3.tit .ico {display:block;position:relative;background-color:#1D1E55;border-radius:20px;width:54px;height:54px;margin-right:10px} .msec04 .publi-wr h3.tit .ico:before {content:"";display:block;position:absolute;left:0;right:0;top:0;bottom:0;background:url(/homepage/kor/_Img/Main/main_spr.png) no-repeat -216px -60px;width:20px;height:18px;margin:auto} .msec04 .publi-tabs {display:flex;flex-flow:row wrap;position:relative;} .msec04 .publi-tabs .publi-tab-list {display:flex;flex-direction:column;width:180px;margin-right:20px} .msec04 .publi-tabs .publi-tab-list button {display:block;background-color:transparent;border:0;border-radius:30px;margin-bottom:5px;padding:13px 10px;color:#000;font-weight:500;line-height:1.2;text-align:center;word-break:keep-all;box-sizing:border-box;transition:all .3s ease-out} .msec04 .publi-tabs .publi-tab-list button:hover, .msec04 .publi-tabs .publi-tab-list button.active {background-color:#4E50AD;color:#fff} .msec04 .publi-tabs .publi-tab-list button.active {border-radius:30px 0 30px 30px} .msec04 .publi-tabs .publi-tab-box {width:calc(100% - 200px)} .msec04 .publi-tabs .publi-tab-box [role='tabpanel'] {display:none} .msec04 .publi-tabs .publi-tab-box [role='tabpanel'].active {display:block} .publi-swiper .swiper-slide {height:auto} .publi-swiper .swiper-slide a {display:block;position:relative;background-color:#fff;border:2px solid #9D9DB6;border-radius:30px;height:100%;box-shadow:0 8px 20px 0 rgba(211, 211, 211, .3);box-sizing:border-box} .publi-swiper .swiper-slide a span {display:block} .publi-swiper .swiper-slide a .txt-box {height:calc(100% - 40px);padding:30px 40px 73px;box-sizing:border-box} .publi-swiper .swiper-slide a .s-tit {color:#2C2D45;font-size:1.056em;font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;white-space:normal;height:46px;word-wrap:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .publi-swiper .swiper-slide a .s-txt {margin-top:20px;color:#62626A;font-size:.889em;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;white-space:normal;height:58px;word-wrap:break-word;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical} .publi-swiper .swiper-slide a .s-date {margin-top:20px;color:#7C7C7C;font-size:.778em;letter-spacing:0} .publi-swiper .swiper-slide a .img-box {position:relative;border-radius:28px;height:100%;overflow:hidden} .publi-swiper .swiper-slide a .img-box:before {content:"";display:block;padding-top:268px} .publi-swiper .swiper-slide a .img-box > img {position:absolute;left:0;top:0;width:100%;min-height:100%} .publi-swiper .swiper-slide a .s-cate {position:absolute;left:0;bottom:-2px;border-radius:30px;width:100%;padding:8px 10px;color:#fff;font-size:.889em;font-weight:500;text-align:center;box-sizing:border-box} .publi-swiper .swiper-slide a.cate01 .s-cate {background-color:#354479 ;} .publi-swiper .swiper-slide a.cate02 .s-cate {background-color:#348CA8;} .publi-swiper .swiper-slide a.cate03 .s-cate {background-color:#D0426D;} .publi-swiper .swiper-slide a.cate04 .s-cate {background-color:#BA319C;} .publi-swiper .swiper-slide a:hover .s-tit {text-decoration:underline} .msec04 .publi-tabs .publi-tab-box .data-ctrl {right:0;bottom:100%;margin-bottom:20px} .msec04 .publi-tabs .publi-tab-box .data-ctrl button {border:0} @media all and (max-width:1399px) { .msec04 .publi-tabs .publi-tab-list {width:110px;margin-right:30px} .msec04 .publi-tabs .publi-tab-box {width:calc(100% - 140px)} } @media all and (max-width:1199px) { .msec04 .publi-wr {padding:37px 30px} .publi-swiper .swiper-slide a .txt-box {padding:25px 20px 70px} .publi-swiper .swiper-slide a .s-tit {font-size:1.02em} .publi-swiper .swiper-slide a .s-cate {font-size:.778em} } @media all and (max-width:999px) { .msec04 {margin:30px 20px 0;padding-top:40px} .msec04 .publi-wr {padding:27px 20px} .publi-swiper .swiper-slide a .txt-box {padding:25px 15px 60px} .publi-swiper .swiper-slide a .img-box:before {padding-top:242px} .publi-swiper .swiper-slide a .s-tit {height:42px} .publi-swiper .swiper-slide a .s-txt {height:55px} } @media all and (max-width:768px) { .msec04 {margin-top:20px;padding-top:25px} .msec04 .publi-wr h3.tit {margin-bottom:12px} .msec04 .publi-wr h3.tit .ico {border-radius:10px;width:38px;height:38px;} .msec04 .publi-wr h3.tit .ico:before {background-size:274px auto;background-position:-151px -42px;width:14px;height:13px} .msec04 .publi-tabs {display:block} .msec04 .publi-tabs .publi-tab-list {flex-flow:row wrap;width:auto;margin-right:0;margin-bottom:12px} .msec04 .publi-tabs .publi-tab-list button {padding:12px 15px;margin-bottom:0;font-size:1.089em} .msec04 .publi-tabs .publi-tab-list button.active {border-radius:20px 0 20px 20px} .msec04 .publi-tabs .publi-tab-box {width:auto} .publi-swiper .swiper-slide a .txt-box {padding:20px 15px 45px} .publi-swiper .swiper-slide a .s-tit {height:40px} .publi-swiper .swiper-slide a .s-txt {height:56px;margin-top:10px;font-size:.998em} .publi-swiper .swiper-slide a .s-date {margin-top:10px;} .publi-swiper .swiper-slide a .img-box:before {padding-top:199px} .msec04 .publi-tabs .publi-tab-box .data-ctrl {margin-bottom:18px} } @media all and (max-width:599px) { .msec04 {border-radius:0;margin-right:0;margin-left:0} .msec04 .publi-wr {padding:20px} .msec04 .publi-tabs .publi-tab-list button {width:33.33%} .publi-swiper .swiper-slide a .txt-box {padding-bottom:40px} .publi-swiper .swiper-slide a .s-tit {height:34px} .publi-swiper .swiper-slide a .s-txt {height:34px;-webkit-line-clamp:2} .publi-swiper .swiper-slide a .img-box:before {padding-top:165px} } /** -- 배너모음 */ .msec05 {border:1px solid #E0E0E0;border-left:0;border-right:0;margin-top:55px;padding:20px 0;box-sizing:border-box } .msec05 .div-cont {display:flex;flex-flow:row wrap;align-items:center} .msec05 .div-cont .mbnr-ctrl {display:flex;flex-flow:row wrap;align-items:center;justify-content:center;border-radius:20px;border:1px solid #E3E3E3;width:185px;margin-right:60px;padding:14px 13px;box-sizing:border-box} .msec05 .div-cont .mbnr-ctrl > * {position:relative;background:none;border:0;width:20px;height:20px;margin-right:7px;transform:translateY(0);transition:transform .3s ease-out} .msec05 .div-cont .mbnr-ctrl > *:last-child {margin-right:0} .msec05 .div-cont .mbnr-ctrl > *:hover {transform:translateY(-5px);} .msec05 .div-cont .mbnr-ctrl > *:before {content:"";display:block;background:url(/homepage/kor/_Img/Main/main_spr.png) no-repeat;position:absolute;left:0;right:0;top:0;bottom:0;background-position-y:-120px;width:100%;height:100%;margin:0 auto} .msec05 .div-cont .mbnr-ctrl .btn-prev:before {background-position-x:-90px} .msec05 .div-cont .mbnr-ctrl .btn-stop:before {background-position-x:-30px} .msec05 .div-cont .mbnr-ctrl .btn-play:before {background-position-x:-60px} .msec05 .div-cont .mbnr-ctrl .btn-next:before {background-position-x:0} .msec05 .div-cont .mbnr-ctrl a:before {background-position-x:-120px} .msec05 .div-cont .mbnr-box {width:calc(100% - 245px)} .msec05 .div-cont .mbnr-box a {display:block;text-align:center} .msec05 .div-cont .mbnr-box a img {max-width:100%;margin:0 auto} @media all and (max-width:999px) { .msec05 {margin-top:30px;} } @media all and (max-width:768px) { .msec05 {margin-top:20px;} .msec05 {padding:15px 0} .msec05 .div-cont .mbnr-ctrl {margin-right:15px} .msec05 .div-cont .mbnr-box {width:calc(100% - 200px)} } @media all and (max-width:599px) { .msec05 .div-cont {flex-direction:column;} .msec05 .div-cont .mbnr-box {width:100%;margin-top:12px;} .msec05 .div-cont .mbnr-ctrl {width:auto;margin-right:0;padding:10px 13px} .msec05 .div-cont .mbnr-ctrl > * {width:14px;height:14px;} .msec05 .div-cont .mbnr-ctrl > *:before {background-size:274px auto;background-position-y:-84px} .msec05 .div-cont .mbnr-ctrl .btn-prev:before {background-position-x:-63px} .msec05 .div-cont .mbnr-ctrl .btn-stop:before {background-position-x:-21px} .msec05 .div-cont .mbnr-ctrl .btn-play:before {background-position-x:-42px} .msec05 .div-cont .mbnr-ctrl a:before {background-position-x:-84px} } /* ============================== * svisual ================================= */ #svisual-wrap {position:relative;background:url(/homepage/kor/_Img/Layout/svis_bg.jpg) no-repeat center;border-radius:40px;margin:0 60px;box-sizing:border-box;transition:all .3s ease-out;z-index:10} #svisual-wrap .svis {position:relative;height:270px;padding-top:78px;box-sizing:border-box;z-index:1} #svisual-wrap .svis .svis-txt {text-align:center} #svisual-wrap .svis .svis-txt .sub-tit {color:#635B78;font-size:1.278em;font-weight:500} #svisual-wrap .svis .svis-txt .tit {margin-top:18px;color:#222;font-size:2.5em;font-weight:600;line-height:1} /* #svisual-wrap .svis .svis-img {box-sizing:border-box;min-height:170px;padding-top:19.271%;position:relative} #svisual-wrap .svis .svis-img img {position:absolute;top:0;left:50%;transform:translateX(-50%);width:auto;height:100%} */ #svisual-wrap .div-cont {position:relative} @media all and (max-width:1469px) { #svisual-wrap {margin:0 30px} #svisual-wrap .svis {padding-top:70px} } @media all and (max-width:999px) { #svisual-wrap {border-radius:20px;margin:0 20px} #svisual-wrap .svis {height:200px;padding-top:0} #svisual-wrap .svis .svis-txt {position:absolute;top:50%;margin-top:-2px;transform:translateY(-50%)} #svisual-wrap .svis .svis-txt .sub-tit {font-size:1em} #svisual-wrap .svis .svis-txt .tit {margin-top:9px;font-size:1.533em} } @media all and (max-width:768px) { #svisual-wrap {background-position-x:70%} #svisual-wrap .svis {height:150px} } #contNavi {position:relative;margin-top:-70px;z-index:12} #contNavi .cont-navi, #contNavi .cont-navi-box {display:flex;flex-flow:row wrap} #contNavi .home, .cont-util .home {display:block;background:#B73B81;position:relative;border-radius:20px;border-bottom-right-radius:0;width:70px;height:70px;z-index:1} #contNavi .home:focus-visible, .cont-util .home:focus-visible {outline:darkturquoise solid 5px;outline-offset:-4px} #contNavi .home:before, .cont-util .box-util .unit-home .home:before {content:"";display:block;background:url(/homepage/kor/_Img/Layout/layout_spr.png) no-repeat -55px -28px;position:absolute;top:0;left:0;right:0;bottom:0;width:22px;height:20px;margin:auto} #contNavi .cont-navi-box {background-color:#fff;border-top-left-radius:20px;border-top-right-radius:20px;padding:0 20px;box-sizing:border-box;z-index:5} #contNavi dl {position:relative;min-width:150px} #contNavi dl dt {height:100%} #contNavi dl dt a {display:flex;flex-flow:row wrap;align-items:center;height:100%;padding:0 55px 0 20px;text-align:left;box-sizing:border-box} #contNavi dl dt a .txt {display:block;position:relative;color:#000;font-weight:500;word-wrap:break-word;word-break:keep-all;white-space:normal;line-height:1.2;transition:color .3s ease-out} #contNavi dl dt a .arr {display:block;position:absolute;top:0;bottom:0;right:20px;background-color:#E4F0F5;border-radius:50%;width:22px;height:22px;box-sizing:border-box;margin:auto} #contNavi dl dt a .arr:before {content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;border:2px solid #444;border-top:0;border-left:0;box-sizing:border-box;width:6px;height:6px;margin:auto;transform:translateY(-25%) rotate(45deg);transition:all .3s ease-out} #contNavi dl.over dt a .txt, #contNavi dl dt a:hover .txt {color:#039D9A} #contNavi dl.over dt a .arr, #contNavi dl dt a:hover .arr{background-color:#039D9A} #contNavi dl.over dt a .arr:before, #contNavi dl dt a:hover .arr:before {border-color:#fff;transform:translateY(25%) rotate(225deg)} #contNavi dl.over dt a .txt {color:#039D9A} #contNavi .sub-list {display:none;position:absolute;top:100%;left:0;background:#fff;width:100%;box-sizing:border-box;box-shadow:0 10px 15px rgba(0, 0, 0, .1);margin:2px 0 0;/*max-height:300px*/} #contNavi .sub-list ul {display:block} #contNavi .sub-list li .mn_a1 {background:#f8f8f8;box-sizing:border-box;color:#7f7f7f;display:flex;align-items:flex-start;font-size:1em;font-weight:500;height:60px;padding:7px 20px;position:relative;text-align:left} #contNavi .sub-list li .mn_a1 .blt {background:#7e7e7e;flex:0 0 auto;display:block;width:10px;height:1px;position:relative;top:10px;margin-right:8px} #contNavi .sub-list li .mn_a1 .blt:before, #contNavi .sub-list li .mn_a1 .blt:after {content:'';display:block;width:9px;height:2px;background:#fff;position:absolute;top:0;left:-3px;bottom:0;margin:auto;transition:.35s} #contNavi .sub-list li .mn_a1 .blt:before {transform:scale(0)} #contNavi .sub-list li .mn_a1 .blt:after {transform:scale(0)} #contNavi .sub-list li .mn_a1 > span {align-self:center;display:flex;line-height:1.2;position:relative} #contNavi .sub-list li.isOver .mn_a1 {background:#039D9A;color:#fff;text-decoration:underline} #contNavi .sub-list li .mn_a1:focus, #contNavi .sub-list li .mn_a1:hover {background:#717171;color:#fff} #contNavi .sub-list li .mn_a1:focus .blt, #contNavi .sub-list li .mn_a1:hover .blt {background:#fff} #contNavi .sub-list li.isOver .mn_a1 .blt {background:transparent} #contNavi .sub-list li.isOver .mn_a1 .blt:before {transform:scale(1) rotate(45deg) translateY(calc(-100% - 2px))} #contNavi .sub-list li.isOver .mn_a1 .blt:after {transform:scale(1) rotate(-45deg) translateY(calc(100% + 2px))} #contNavi .sub-list li .mn_a1[target='_blank'] .txt:after {content:"";display:inline-block;width:12px;height:12px;background:url(/resources/_Img/Common/nwin_spr.png) no-repeat 0 -25px;margin-left:7px} #contNavi .sub-list li.isOver .mn_a1[target='_blank'] .txt:after, #contNavi .sub-list li .mn_a1[target='_blank']:focus .txt:after, #contNavi .sub-list li .mn_a1[target='_blank']:hover .txt:after {background-position-x:-22px} #contNavi .sub-list .btn-close {display:block;position:absolute;right:0;top:100%;background-color:#fff;border:0;border-radius:0 0 10px 10px;width:30px;height:30px} #contNavi .sub-list .btn-close:before, #contNavi .sub-list .btn-close:after {content:"";display:block;position:absolute;width:14px;height:2px;background:#777;top:0;right:0;bottom:0;left:0;margin:auto;transition:all .3s ease} #contNavi .sub-list .btn-close:before {transform:rotate(45deg)} #contNavi .sub-list .btn-close:after {transform:rotate(135deg)} #contNavi .sub-list .btn-close:hover:before {transform:rotate(135deg);background:#000} #contNavi .sub-list .btn-close:hover:after {transform:rotate(225deg);background:#000} .cont-util {position:absolute;right:0;bottom:0;z-index:15} .cont-util button {background:none;border:0;width:70px;height:70px} .cont-util button:before {content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;background:url(/homepage/kor/_Img/Layout/layout_spr.png) no-repeat;margin:auto} .cont-util .box-util {display:flex;flex-flow:row wrap;align-items:center;position:relative;background-color:rgba(255, 255, 255, .6);border-radius:20px;border-bottom-left-radius:0} .cont-util .box-util .unit {position:relative} .cont-util .box-util .unit > .btn-cast {display:block;position:relative;background-color:transparent;border-radius:20px;transition:all .3s ease-out} .cont-util .box-util .unit > .btn-cast:before {background-position-y:-28px;width:20px;height:20px;z-index:2} .cont-util .box-util .unit > .btn-cast:hover {background-color:#fff} .cont-util .box-util .unit.unit-home {display:none} .cont-util .box-util .unit .btn-sns:before {background-position-x:-87px} .cont-util .box-util .unit .btn-print:before {background-position-x:-117px} .cont-util .box-util .sns-list {display:none;position:absolute;top:100%;right:-70px;background-color:#fff;border-radius:20px;border-top-left-radius:0;border-top-right-radius:0;padding:15px;box-shadow:0 13px 16.899999618530273px rgba(189, 189, 214, .3);box-sizing:border-box;z-index:100} .cont-util .box-util .sns-list > p {margin-bottom:15px;color:#222;font-size:.889em;font-weight:600;line-height:1.3;text-align:center} .cont-util .box-util .sns-list ul {display:flex;flex-direction:row} .cont-util .box-util .sns-list li {margin-right:10px} .cont-util .box-util .sns-list li:last-child {margin-right:0} .cont-util .box-util .sns-list button {display:block;position:relative;border-radius:10px;width:40px;height:40px;font-size:0;transition:all .3s ease} .cont-util .box-util .sns-list .btn-face {background-color:#2a569c} .cont-util .box-util .sns-list .btn-twit {background-color:#0F1419} .cont-util .box-util .sns-list .btn-blog {background-color:#1dc800} .cont-util .box-util .sns-list .btn-share {background-color:#FBE51F} .cont-util .box-util .sns-list button:before {background-position-y:-0;width:18px;height:18px;z-index:1} .cont-util .box-util .sns-list .btn-face:before {background-position-x:0} .cont-util .box-util .sns-list .btn-twit:before {background-position-x:-28px} .cont-util .box-util .sns-list .btn-blog:before {background-position-x:-84px} .cont-util .box-util .sns-list .btn-share:before {background-position-x:-112px} .cont-util .box-util .sns-list .sns-closer {position:absolute;right:1px;top:6px} .cont-util .box-util .sns-list .sns-closer:before, .cont-util .box-util .sns-list .sns-closer:after {content:"";display:block;position:absolute;width:14px;height:2px;top:0;right:0;bottom:0;left:0;margin:auto;background:#000;opacity:1;transition:all .3s ease} .cont-util .box-util .sns-list .sns-closer:before {transform:rotate(45deg)} .cont-util .box-util .sns-list .sns-closer:after {transform:rotate(135deg)} .cont-util .box-util .sns-list .sns-closer:focus:before, .cont-util .box-util .sns-list .sns-closer:focus:after, .cont-util .box-util .sns-list .sns-closer:hover:after {} @media all and (max-width:1459px) { .cont-util {right:30px} } @media all and (max-width:999px) { #contNavi {display:none} .cont-util button, .cont-util a {width:55px !important;height:55px !important} .cont-util .box-util {border-radius:10px} .cont-util .box-util .unit.unit-home {display:block} .cont-util .box-util .unit-home .home {display:block;border-radius:10px;border-bottom-right-radius:0} .cont-util .box-util .unit-print {display:none} .cont-util .box-util .sns-list {right:20px} } @media all and (max-width:768px) { .cont-util button, .cont-util a {width:40px !important;height:40px !important} } /** -- contents */ #container-wrap {z-index:1} #container {position:relative;transition:all .3s;z-index:9} #contents {position:relative;width:100%;max-width:1400px;min-height:600px;margin:70px auto;box-sizing:border-box} @media all and (max-width:1499px){ #contents {max-width:100%;padding:0 30px} } @media all and (max-width:999px) { #contents {margin-top:30px;padding:0 20px} } /** -- submenu */ #side-wrap {display:none} @media all and (max-width:768px){ #side-wrap {display:block;width:100%;padding:0;position:absolute;left:0;bottom:0;height:0;z-index:2} } /* ============================== * footer ================================= */ #footer-wrap {background-color:#F3F3F3;padding:10px 0 70px;box-sizing:border-box} #footer-wrap .service-list {display:flex;flex-flow:row wrap} #footer-wrap .service-list li {position:relative;margin-right:17px;padding:10px 23px 10px 0} #footer-wrap .service-list li:after {content:"";display:block;position:absolute;right:0;top:19px;background-color:#c8c8c8;border-radius:50%;width:5px;height:5px} #footer-wrap .service-list li a {display:block;color:#444;font-size:.889em;font-weight:300} #footer-wrap .service-list li:last-child {margin-right:0;padding-right:0;} #footer-wrap .service-list li:last-child:after {display:none} #footer-wrap .service-list li:first-child a span {color:#4E50AD;font-weight:700} #footer-wrap .ft-info {position:relative;margin-top:10px;padding:0 0 0 255px;box-sizing:border-box} #footer-wrap .ft-svce .fts-link ul li:last-child {margin-right:0;padding-right:0;} #footer-wrap .ft-svce .fts-link ul li:last-child:after {display:none} #footer-wrap .ft-info .fti-logo {position:absolute;left:0;top:5px} #footer-wrap .ft-info .fti-logo a {display:block} #footer-wrap .ft-info address, #footer-wrap .ft-info .cs-info {color:#444;font-size:.889em;font-weight:300;} #footer-wrap .ft-info address {word-break:keep-all} #footer-wrap .ft-info address .addr2 {display:inline-block;font-weight:500} #footer-wrap .ft-info .cs-info {display:flex;flex-flow:row wrap;align-items:center} #footer-wrap .ft-info .cs-info li {margin-right:20px} #footer-wrap .ft-info .cs-info li:last-child {margin-right:0} #footer-wrap .ft-info .cs-info li span {display:inline-block;margin-right:12px;color:#333;font-weight:500;} #footer-wrap .ft-info .copyright {margin-top:20px;color:#777;font-size:.833em;font-weight:300;letter-spacing:0} #footer-wrap .sns-box {position:absolute;right:0;top:0} #footer-wrap .flic-wrap {position:absolute;right:0;bottom:-35px} #footer-wrap .flic-wrap > ul {display:flex;gap:20px} @media all and (max-width:999px) { #footer-wrap {padding:10px 0 30px} #footer-wrap .service-list {justify-content:center} #footer-wrap .service-list li {margin-right:7px;padding:5px 13px 5px 0} #footer-wrap .service-list li:after {top:13px} #footer-wrap .service-list li a {font-size:14px} #footer-wrap .ft-info {padding-left:0;text-align:center;} #footer-wrap .ft-info .fti-logo {position:static;left:auto;top:auto;margin-bottom:20px} #footer-wrap .ft-info .fti-logo img {width:158px} #footer-wrap .ft-info address, #footer-wrap .ft-info .cs-info {line-height:1.3;font-size:14px} #footer-wrap .ft-info address {} #footer-wrap .ft-info address .addr2 {display:block;color:#000} #footer-wrap .ft-info .cs-info {margin-top:10px;justify-content:center} #footer-wrap .ft-info .cs-info li span {margin-right:5px} #footer-wrap .ft-info .copyright {font-size:13px} #footer-wrap .cs-more-info {display:flex;flex-flow:row wrap;align-items:center;justify-content:center;margin-top:20px} #footer-wrap .sns-box {position:static;margin-right:65px;} #footer-wrap .flic-wrap {position:static} } @media all and (max-width:768px) { #footer-wrap .ft-info address, #footer-wrap .ft-info .cs-info {font-size:13px} #footer-wrap .ft-info .copyright {font-size:12px} #footer-wrap .sns-box {margin-right:25px;} #footer-wrap .flic-wrap > img {width:119px} } @media all and (max-width:399px) { #footer-wrap .flic-wrap > ul {gap:5px} #footer-wrap .flic-wrap > ul > li img {width:auto !important;height:55px !important} }