@charset "utf-8";

body{letter-spacing:-.4px;}

/*기능팝업*/
.PZwindow {background:#333 !important;}
.nomoreOpen form a.PZwindowClose {margin-top:7px !important;}

/*헤더*/
.wrap-header {width: 100%; position: fixed; top: 0; z-index: 120; background:rgba(255,255,255,1); border-bottom:1px solid transparent;}
.wrap-header.fNav {top: 0; background:rgba(255,255,255,1); border-color:#EEE;}
.wrap-header .container {width: 1600px; margin: 0 auto; position: relative; font-size: 0; text-align: right;}
.wrap-header .container > div {display: inline-block; vertical-align: middle; font-size: 17px;}
.wrap-header .container .head-logo {float: left; display: table; text-align: left;}

@media all and (max-width: 1600px) {
	.wrap-header .container {width: 96%;}
}
@media all and (max-width: 1024px) {
	.wrap-header .container {width: 100%; padding: 0 20px;}
	.wrap-header .head-logo {float: none; width: calc(100% - 110px);}
	.wrap-header .head-util {display: inline-block !important; position: absolute; top: 0; right: 0;}
}

/*로고*/
.wrap-header .head-logo {position: relative;}
.wrap-header .head-logo a {display: table-cell; vertical-align: middle; height: 100px;}
.wrap-header .head-logo img {max-width: 100%;}

@media all and (max-width: 1280px) {
	.wrap-header .head-logo img {max-width: 160px;}
}
@media all and (max-width: 1024px) {
}

/*유틸메뉴*/
.wrap-header .head-util {width: auto;}
.wrap-header .head-util li {float: left;}
.wrap-header .head-util li a,
.wrap-header .head-util li button {display: block; width: 100%; height: 100%; text-indent: -99999px;}
.wrap-header .head-util li.head-sitemap {width: 60px; height: 100px; background: url('../../images/common/ic-head-util-bk.png') no-repeat center;}
.wrap-header .head-util li.head-sitemap a {font-size: 0;}
.wrap-header .container > div .btn-mgnb {display: none;}
.wrap-header .container > div .btn-mgnb-close {display: none;}
.wrap-header .container > div .mobile-global {display: none;}
.wrap-header .container > div.black-bg {display: none;}
@media all and (max-width: 1024px) {
	.wrap-header .container > div .head-sitemap {display: none;}
	.wrap-header .container > div .btn-mgnb {display: block; width: 100px; height: 100px; background:rgba(0,54,146,0.75) url('../../images/common/ic-head-util-wh.png') no-repeat center;}
	.wrap-header .container > div .btn-mgnb-close.on {display: block; position: absolute; top: 0; right: 100%; width: 45px; height: 45px; background: url(../../images/common/ic-navi-close.png) no-repeat center;}
	.wrap-header .container > div .btn-mgnb-close button {text-indent: -9999px; display: block; width: 100%; height: 100%;}
	.wrap-header .container > div .mobile-global.on {display: block; position: absolute; left: 0px; top: 40%;}
	.wrap-header .container > div .mobile-global a {display: block; text-align: left; font-size: 14px; color:#a6acbd; padding: 0 0 0 20px; margin: 0 0 10px 0;}
}

/*메인메뉴*/
.wrap-header .head-navi {width: calc(100% - 300px); text-align: right; padding: 0 30px;}
.wrap-header .head-navi .li_1 {display: inline-block; position: relative; padding: 0 30px;}
.wrap-header .head-navi .a_1 {display: block; color:#010101; padding: 33px 0; font-size: 22px; font-family:'Dream Medium',sans-serif;}
.wrap-header .head-navi .a_1:hover {color:#183d93;}
.wrap-header .head-navi .a_1 span {position: relative;}
.wrap-header .head-navi .a_1.on span:after {content: ''; position: absolute; top: -15px; left: 50%; width: 9px; height: 9px; background:#00baff; border-radius:1 00%; transform: translate(-50%,0);}
.wrap-header .head-navi .a_1.on span:before {content: ''; position: absolute; left: 0; bottom: -12px; width: 100%; height: 4px; background:#0c2c67;}
.wrap-header .head-navi .div_2 {overflow: hidden; max-height: 0; position: absolute; top: 100%; left: 0px; width: 100%; z-index: 100; text-align: left; background:rgba(12,44,103,0.95); transition: all 0.75s cubic-bezier(0.7, 0, 0.3, 1);}
.wrap-header .head-navi .div_2.on {max-height: 700px;}
.wrap-header .head-navi .ul_2 {padding: 10px 0;}
.wrap-header .head-navi .a_2 {position: relative; display: block; color:#fff; padding: 10px 15px; font-size: 18px; line-height: 1.25;}
.wrap-header .head-navi .a_2 span {position: relative;}
.wrap-header .head-navi .a_2 span:after {content:''; position: absolute; left:0px; bottom:-3px; width:0px; height:1px; background:#fff; transition:all 0.8s;}
.wrap-header .head-navi .a_2[target=_blank] span:before {content: ''; position: absolute; left: 111%; top: 6px; width: 14px; height: 14px; background: url(../../images/common/ico_blank_pc.png) no-repeat center center;}
.wrap-header .head-navi .a_2:hover:after {content:''; position: absolute; top: 46%; right: 10%; width: 5px; height: 7px; background: url('../../images/common/arrow-menu.png') no-repeat center center;}
.wrap-header .head-navi .a_2:hover span:after {width: 100%;}
.wrap-header .head-navi .a_2.on {color:#0b337c}
.wrap-header .head-navi .div_3 {display: none;}

@media all and (min-width: 1025px) {
	.wrap-header .head-navi .ul_1 {justify-content: flex-end; display: flex; flex-wrap: wrap;}
	.wrap-header .head-navi .div_2 {min-width: 150px;}
}
@media all and (max-width: 1280px) {
    .wrap-header .head-navi .li_1 {padding: 0 15px;}
	.wrap-header .head-navi .a_1 {font-size: 18px;}
}
@media all and (max-width: 1024px) {
	.wrap-header .head-navi {position: fixed; top: 0; right: -100%; z-index: 200; max-width: 700px; width: 100%; height: 100%; padding: 30px 10px; background: #0c2c67; opacity: 0; transition: all 0.55s cubic-bezier(0.7, 0, 0.3, 1);}
    .wrap-header .head-navi.on {right: 0; opacity: 1; transition: all 0.55s cubic-bezier(0.7, 0, 0.3, 1);}
    .wrap-header .head-navi .menuUItop {position: relative; height: 100%;}
    .wrap-header .head-navi .div_1 {padding:20px 0 0 0;}
    .wrap-header .head-navi .li_1 {position: static; display: block; width: 100%; padding: 0px;}
    .wrap-header .head-navi .a_1 {background-image: none; background-position: right center; width: 40%; height: auto; padding: 15px 0 15px 20px; text-align: left; font-size: 23px; color: #fff;}
    .wrap-header .head-navi .a_1:after {display: none;}
	.wrap-header .head-navi .a_1:hover {color:#fff;}
	.wrap-header .head-navi .a_1.on span:after {display: none;}
    .wrap-header .head-navi .a_1.on span:before {display: none;}
    .wrap-header .head-navi .a_1.on {color:#d1e1ff;}
    .wrap-header .head-navi .ul_2 {border: 0; padding: 0;}
    .wrap-header .head-navi .li_2 {display: block; border: 0px; padding: 0px;}
    .wrap-header .head-navi .li_2 .a_2:after {display: none;}
    .wrap-header .head-navi .a_2 {width: 100%; font-size: 22px; color:#666; padding: 15px 15px 15px 20px; border-bottom: 1px solid #89a4dc; margin: 0;}
    .wrap-header .head-navi .a_2.plus {position: relative; background: url('../../images/common/arrow_a2.png') no-repeat 90% center}
    .wrap-header .head-navi .a_2.plus.on {color:#0c2c67; background: url('../../images/common/arrow_a2_hover.png') no-repeat 90% center; border-bottom: 1px solid #fff;}
 	.wrap-header .head-navi .a_2[target=_blank] span:before {top: 6px;}
    .wrap-header .head-navi .div_2 {width: 60% !important; right: 0px; left: auto; transition-property: none;}
    .wrap-header .head-navi .div_2.on {top: 20px; max-height: none; height: 100%; background:#fff; transition-property: none;}
    .wrap-header .head-navi .div_2 .container {padding: 0px;}
    .wrap-header .head-navi .ul_3 {padding: 0 0 20px 0; border-bottom: 1px solid #89a4dc;}
    .wrap-header .head-navi .li_3 {position: relative; margin: 0px;}
    .wrap-header .head-navi .a_3 {color:#999; display: inline-block; font-size: 21px; padding: 4px 0 4px 40px;}
    .wrap-header .head-navi .a_3[target=_blank] {position: relative;}
    .wrap-header .head-navi .a_3[target=_blank]:before {content: ''; position: absolute; top: 10px; left: 110%; width: 10px; height: 10px; background: url('../../images/common/ico_blank.png') no-repeat center center;}
    .wrap-header .head-navi .a_3:after {content: ''; position: absolute; top: 18px; left: 25px; width: 6px; height: 2px; background:#808080;}
    .wrap-header .head-navi .a_3:hover:after {width: 6px; background:#018cff;}
    .wrap-header .head-navi .a_3:hover {color:#c42605;}
    .wrap-header .head-navi .a_3._active {color:#c42605;}
    .wrap-header .head-navi .div_3 {display: block; max-height: 0px; transition: all 0.25s cubic-bezier(0.7, 0, 0.3, 1); overflow: hidden;}
    .wrap-header .head-navi .div_3.on {max-height: 500px; transition: all 0.25s cubic-bezier(0.7, 0, 0.3, 1);}
    .wrap-header .head-navi .close {display: none;}
    .wrap-header .head-util .btn-share {display: none;}
    .wrap-header .container > div.black-bg {display: none; position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; background:rgba(0,0,0,0.6); z-index: 150;}
    .wrap-header .container > div.black-bg.on {display: block;}
}
@media all and (max-width: 768px) {
	.wrap-header .head-navi {width: calc(100% - 50px);}
	.wrap-header .head-navi.on {right: 0;}
}

/*풋터*/
.wrap-footer {background:#333;}
.wrap-footer .wrap-footer-inner {max-width: 1600px;margin: 0 auto; overflow: hidden;}
.wrap-footer .box-bottom {border-bottom: 1px solid #5c5c5c; padding: 20px 0; text-align: right;}
.wrap-footer .bottom-link {float: left; display: inline-block; vertical-align: middle;}
.wrap-footer .bottom-link ul {font-size: 0;}
.wrap-footer .bottom-link li {position: relative; display: inline-block; padding-right: 15px; margin-right: 15px;}
.wrap-footer .bottom-link li:after {content: ''; position: absolute; top: 8px; right: 0; width: 1px; height: 11px; border-right: 1px dotted #656a72;}
.wrap-footer .bottom-link li:last-child:after {display: none;}
.wrap-footer .bottom-link li a {position: relative; font-size: 16px; color:#CCC;}
.wrap-footer .bottom-link li a.privacy {color:#00baff;}
.wrap-footer .bottom-link li a:hover {color:#FFF;}
.wrap-footer .bottom-link li a:after {content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background:#FFF; transition: .4s;}
.wrap-footer .bottom-link li a:hover:after {width: 100%;}

.wrap-footer .box-footer {overflow: hidden; padding: 40px 0;}
.wrap-footer .box-footer i {padding: 0 7px;}
.wrap-footer .box-footer .footer-logo {float: left;}
.wrap-footer .box-footer .footer-logo img {max-width: 100%;}
.wrap-footer .box-footer .footer-address {float: left; margin-left: 20px;}
.wrap-footer .box-footer .footer-address p {color:#d5d5d5; font-size: 16px; padding-bottom: 3px;}
.wrap-footer .box-footer .footer-address p span:not(:last-child) {margin-right: 10px;}
.wrap-footer .box-footer .footer-address .copyright {color:#7a7a7a; font-size: 14px; padding-top: 5px;}

@media all and (max-width: 1600px) {
	.wrap-footer .wrap-footer-inner {max-width: 96%;}
}

@media all and (max-width: 1024px) {
        .wrap-footer .box-bottom {text-align: center;}
        .wrap-footer .bottom-link {display: block; float: none;}
	.wrap-footer .box-footer {text-align: center;}
	.wrap-footer .box-footer span {display: block;}

	.wrap-footer .box-footer .footer-logo,
	.wrap-footer .box-footer .footer-address {float: none;}
	.wrap-footer .box-footer .footer-logo {padding-top: 0; padding-bottom: 20px;}
	.wrap-footer .box-footer .footer-logo img {max-width: 130px;}
	.wrap-footer .box-footer .footer-address {margin-left: 0;}
	.wrap-footer .box-footer .footer-address p span:not(:last-child) {margin-right: 0;}
}
@media all and (max-width: 768px) {
	.wrap-footer .bottom-link li a {font-size: 14px;}
}

/*고탑*/
.goto-top {position: fixed; right: 5%; bottom: 5%; z-index: 100;}
.goto-top a {display: block; width: 70px; height: 70px; color:#FFF !important; font-size: 14px; text-align: center; font-family:'Mont Medium'; background:#454545; border-radius: 100px; box-sizing: border-box; padding-top: 20px;}
.goto-top a:before {content: ""; display: block; width: 17px; height: 17px; margin: 0 auto; background: url('../../images/common/arrow_3_w.png') no-repeat center;}
.goto-top a:hover {box-shadow: 0 0 5px #888;}

/*전체블랙배경*/
.black-bg {display: none; position: fixed; z-index: 190; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,.5);}
.black-bg.on {display: block;}

/*서브비주얼*/
.wrap-sub-visual {position: relative; display: table; width: 100%; background: url('../../images/common/sub-visual.jpg') no-repeat top center; background-size: cover;}
.wrap-sub-visual:after {content:''; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: url('../../images/common/pattern.png'); filter: alpha(opacity=30); opacity: 0.3;}
.wrap-sub-visual .wrap-sub-cell {display: table-cell; height: 460px; color:#fff; text-align: center; vertical-align: middle;}
.wrap-sub-visual .container {position: relative; z-index: 1;}
.wrap-sub-visual .slogan {margin: 60px 0 0 0;}
.wrap-sub-visual .slogan-big {position: relative; display: inline-block; font-size: 40px; line-height: 1.2; font-family:'Dream Bold',sans-serif;}
.wrap-sub-visual .slogan-small {font-size: 18px; font-family: 'Noto DemiLight';}
.wrap-sub-visual .page-move {position: absolute; top: 30px; left: 0px; width: 100%; height: 0px;}
.wrap-sub-visual .page-move a {position: relative; display: block; width: 70px; height: 70px; border: 1px solid rgba(255,255,255,0.5); border-radius: 100%;}
.wrap-sub-visual .page-move a.prev {float: left; background: url('../../images/common/ico_prev_menu.png') no-repeat left center; transition: background-position 0.5s cubic-bezier(0.7, 0, 0.3, 1);}
.wrap-sub-visual .page-move a:hover.prev {background-position: right center; transition: background-position 0.5s cubic-bezier(0.7, 0, 0.3, 1);}
.wrap-sub-visual .page-move a.next {float: right; background: url('../../images/common/ico_next_menu.png') no-repeat right center; transition: background-position 0.5s cubic-bezier(0.7, 0, 0.3, 1);}
.wrap-sub-visual .page-move a:hover.next {background-position: left center; transition: background-position 0.5s cubic-bezier(0.7, 0, 0.3, 1);}
.wrap-sub-visual .page-move a span {position: absolute;}
.wrap-sub-visual .page-move a.prev span {position: absolute; top: 50%; left: 90%; opacity: 0; margin: 0 0 0 30px; white-space: nowrap; color:rgba(255,255,255,0.5); transform: translate(0,-50%); transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1);}
.wrap-sub-visual .page-move a:hover.prev span {opacity: 1; left: 100%; transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1);}
.wrap-sub-visual .page-move a.prev span:after {content: ''; position: absolute; left: 0px; bottom: -5px; width: 0%; height: 1px; background:rgba(255,255,255,0.5); transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1);}
.wrap-sub-visual .page-move a:hover.prev span:after {width: 100%; transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1);}
.wrap-sub-visual .page-move a.next span {position: absolute; right: 90%; top: 50%; opacity: 0; margin: 0 30px 0 0; white-space: nowrap; color:rgba(255,255,255,0.5); transform: translate(0,-50%); transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1);}
.wrap-sub-visual .page-move a:hover.next span {opacity: 1; right: 100%; transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1);}
.wrap-sub-visual .page-move a.next span:after {content: ''; position: absolute; right: 0px; bottom: -5px; width: 0%; height: 1px; background:rgba(255,255,255,0.5); transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1);}
.wrap-sub-visual .page-move a:hover.next span:after {width: 100%; transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1);}

@media all and (max-width: 1024px) {
    .wrap-sub-visual .wrap-sub-cell {height: 330px;}
    .wrap-sub-visual .page-move {display: none;}
}
@media all and (max-width: 768px) {
    .wrap-sub-visual .wrap-sub-cell {height: 250px;}
    .wrap-sub-visual .slogan {margin: 85px 0 0 0;}
    .wrap-sub-visual .slogan-big {font-size: 34px; padding: 0px; margin: 0px;}
    .wrap-sub-visual .slogan-big:after {display: none;}
    .wrap-sub-visual .slogan-small {display: none;}
}

/*현재위치메뉴및기능*/
.wrap-sub-navi {position: relative; z-index: 80; max-width: 1600px; margin: 0 auto; margin-top: -70px; padding: 0 20px; background: #fff;}
.wrap-sub-navi .container {position: relative; height: 70px;}
.wrap-sub-navi .sub-navi > ul > li {float: left; position: relative; padding: 0 0 0 30px; background: url('../../images/common/arrow-page-nav.png') no-repeat left center;}
.wrap-sub-navi .sub-navi > ul > li > a, .wrap-sub-navi .sub-navi > ul > li > .inner > button {display: block; height: 70px; font-size: 16px; color: #555; line-height: 70px;}
.wrap-sub-navi .sub-navi > ul > li > .inner > button {width: 100%; min-width: 290px; text-align: left; font-family:'Dream Light',sans-serif; padding:0 80px 0 0 ; background: url('../../images/common/arrow-page-nav2.png') right 0px  no-repeat; transition: background-position 0.5s cubic-bezier(0.7, 0, 0.3, 1);}
.wrap-sub-navi .sub-navi > ul > li > .inner > button:hover {background-position: bottom right; color: #1c61c8; transition: background-position 0.5s cubic-bezier(0.7, 0, 0.3, 1);}
.wrap-sub-navi .sub-navi .home {min-width: auto; padding: 0px; background-image: none;}
.wrap-sub-navi .sub-navi .home a {width: 70px; background: url('../../images/common/ico_home.png') no-repeat center center; text-indent: -9999px;}
.wrap-sub-navi .sub-navi .navUl {overflow: hidden; position: absolute; right: 0px; top: 100%; width: calc( 100% - 30px ); max-height: 0px; border: 1px solid #fff; opacity:0;}
.wrap-sub-navi .sub-navi .navUl.on {overflow:hidden; max-height:10000px; background: #fff; transition: max-height 1s cubic-bezier(0.7, 0, 0.3, 1); opacity: 1; border: 1px solid #d4d4d4;}
.wrap-sub-navi .sub-navi .navUl a {display: block;padding: 12px 20px;color: #666;word-break: keep-all;}
.wrap-sub-navi .sub-navi .navUl a:last-child {border-bottom: 0;}
.wrap-sub-navi .sub-navi .navUl a:hover {background: #f5f5f5;}

.wrap-sub-navi .sub-util {position: absolute; right: 0px; top: 0px;}
.wrap-sub-navi .sub-util > ul > li {float: left; position: relative;}
.wrap-sub-navi .sub-util > ul > li > button {width: 70px; height: 70px; text-indent: -9999px;}
.wrap-sub-navi .sub-util .sub-share {background: url('../../images/common/ico_sns.png') no-repeat center center; transition: background-color 0.5s cubic-bezier(0.7, 0, 0.3, 1);}

@media all and (max-width: 1024px) {
    .wrap-sub-navi .sub-navi > ul > li > .inner > button {min-width: auto;}
}
@media all and (max-width: 1024px) {
    .wrap-sub-navi {margin-top: 0; padding: 0; border-bottom: 1px solid #d4d4d4;}
    .wrap-sub-navi .container {padding: 0;}
    .wrap-sub-navi .sub-navi > ul > li {padding: 0 30px;}
    .wrap-sub-navi .sub-navi > ul > li > .inner > button {padding: 0; background: none;}
    .wrap-sub-navi .sub-navi > ul > li > .inner > button:hover {color: #555;}
    .wrap-sub-navi .sub-navi .navUl {display: none;}
    .wrap-sub-navi .sub-util {display: none;}
}
@media all and (max-width: 768px) {
    .wrap-sub-navi .sub-navi > ul > li {padding: 0 20px;}
    .wrap-sub-navi .sub-navi > ul > li > a, .wrap-sub-navi .sub-navi > ul > li > .inner > button {font-size: 14px;}
    .wrap-sub-navi .sub-navi .home a {width: 50px; background-size: 20px;}
}

/*컨텐츠*/
.wrap-contents .container {position: relative; max-width: 1600px; margin: 0 auto; padding: 0 0 150px 0;}
@media all and (max-width: 1600px) {
	.wrap-contents .container {padding: 0 20px 150px;}
}