@charset "utf-8";

:root{
	--font-rubik:'Rubik', Sans-serif;
	--font-noto:'Noto Sans KR', '맑은 고딕', Sans-serif;
	--font-combine:'Rubik', 'Noto Sans KR', '맑은 고딕', Sans-serif;
	--font-database:'Segoe UI','Noto Sans KR', '맑은 고딕', '돋움', Dotum, '굴림', Gulim, Sans-serif;
	--color-point:#3653a9;
	--trans-ani:0.3s ease 0s;
}

::-webkit-scrollbar{width:6px; background-color:rgba(0,0,0,0.1); -moz-border-radius:0px; -webkit-border-radius:0px; border-radius:0px;}
::-webkit-scrollbar-thumb{background-color:rgba(49,51,52,0.5); -moz-border-radius:0px; -webkit-border-radius:0px; border-radius:0px;}

body{overflow:inherit;}
body.active{overflow:hidden;}

#header{position:absolute; top:0px; left:0px; z-index:90; width:100%;}
#header > .inr{position:relative; width:1300px; margin:0 auto; padding-top:17px;}
#header .logo{width:286px; height:45px; margin:0 auto 17px;}
#header .logo > a{display:block; width:100%; height:100%; background:url(../images/logo.png) no-repeat 50% 0; text-indent:100%; overflow:hidden; white-space:nowrap;}
#header .area_util{position:absolute; top:30px; right:0px;}
#header .area_util li{display:inline-block; margin-right:25px;}
#header .area_util li > a{display:inline-block; position:relative; padding-left:22px; color:#fff;}
#header .area_util li:last-child{margin-right:0px;}
#header .area_util [data-util]:before{content:''; display:block; position:absolute; top:3px; left:0px; width:16px; height:16px; background-image:url(../images/content/sp_com.png); background-repeat:no-repeat; background-position-y:0px;}
#header .area_util [data-util="link"]:before{background-position-x:-220px;}
#header .area_util [data-util="login"]:before{background-position-x:-236px;}
#header .area_util [data-util="logout"]:before{background-position-x:-268px;}
#header .area_util [data-util="down"]:before{background-position-x:-204px;}
#header nav{position:relative; left:0px; background:#fff; border-radius:10px 5px 5px 10px; transition:all 0.5s ease 0s;}
#header [data-gnb="home"]{display:block; position:absolute; top:0px; left:0px; z-index:10; width:83px; height:65px; box-sizing:border-box; padding-top:13px; background:#3653a9; border-radius:5px 0 0 5px; font-family:var(--font-rubik);; font-size:13px; text-align:center; color:#fff; transition:all 0.3s ease 0s;}
#header [data-gnb="home"]:before{content:''; display:block; width:16px; height:16px; margin:0 auto 7px; background:url(../images/content/sp_com.png) no-repeat -252px 0px;}
/* #header [data-gnb="home"]:hover,
#header [data-gnb="home"]:focus{box-shadow:0px 10px 20px rgba(0,0,0,0.20);} */

#wrap.system #header > .inr{width:1400px;}

#header nav #gnb{display:flex; flex-flow:row wrap; justify-content:center; align-items:center; width:calc(98% - 83px); margin-left:83px;}
#header nav #gnb li a{display:inline-flex; justify-content:center; align-items:center; color:#222; transition:color 0.3s ease;}
#header nav #gnb > li{flex:1 0 0; position:relative; z-index:10;}
#header nav #gnb > li > a{width:100%; height:65px; box-sizing:border-box; padding:0 5px; border-left:1px solid #f1f1f1; font-size:18px; font-weight:400; text-align:center;}
#header nav #gnb > li > a span{display:inline-flex; justify-content:center; align-items:center; position:relative; height:100%;}
#header nav #gnb > li > a span:after{content:''; position:absolute; bottom:0px; left:0px; display:block; width:100%; height:5px; background:var(--color-point); transform:scale(0); transition:transform 0.3s ease;}
#header nav #gnb > li div{display:none; position:absolute; width:100%; box-sizing:border-box; border:1px solid #f1f1f1; border-width:0 0 0 1px;}
#header nav #gnb > li:nth-of-type(1) > a{border-left-width:0px;}
#header nav #gnb > li:nth-of-type(1) div{border-left-width:0px;}
#header nav #gnb > li div ul{padding:28px 15px;}
#header nav #gnb > li div ul > li{padding:7px 0px;}
#header nav #gnb > li div ul > li > a{font-size:15px; color:#444; font-weight:400; word-break:keep-all; line-height:1.3em;}
#header nav #gnb > li.active > a span:after{transform:scale(1);}
#header nav #gnb > li.active div ul > li > a:hover,
#header nav #gnb > li.active div ul > li > a:focus{color:var(--color-point); text-decoration:underline;}
.gnb_bg{display:none; position:absolute; top:0px; left:0px; width:100%; background:transparent; border-radius:10px 10px 5px 5px; box-shadow:none; transition:box-shadow 0.2s linear 0s, background 0s ease 0.3s;}
#header nav.active.line .gnb_bg{background:#fff; box-shadow:0px 5px 20px rgba(0,0,0,0.1); transition-delay:0.1s, 0.1s;}

@media (max-width:1600px){
	#header{min-width:1400px;}	
}

/* 
#header #gnb{width:calc(100% - 83px); margin-left:83px; text-align:center;}
#header #gnb > li{display:inline-block; padding:0 25px;}
#header #gnb > li > a{display:block; position:relative; height:65px; line-height:65px; padding:0 15px; font-size:17px; color:#222; transition:all 0.3s ease 0s;}
#header #gnb > li > a:hover,
#header #gnb > li > a:focus,
#header #gnb > li > a.active{color:#3653a9;}
#header #gnb > li > a:after{opacity:0; content:''; display:block; position:absolute; bottom:0px; left:50%; width:100%; height:5px; background:#3653a9; transform:translateX(-50%); transition:all 0.3s ease 0s;}
#header #gnb > li.on > a:after{opacity:1;}
#header #gnb > li > div{display:none; position:absolute; top:65px; left:0px; width:100%; height:70px; background:#fff; border-top:1px solid #f1f1f1; text-align:center;}
#header #gnb > li > div ul{max-width:1300px; box-sizing:border-box; margin:0 auto;}
#header #gnb > li > div ul > li{display:inline-block; height:100%;}
#header #gnb > li > div ul > li > a{display:inline-block; height:100%; line-height:70px; padding:0 30px; font-size:16px; transition:all 0.3s ease 0s;}
#header #gnb > li > div ul > li > a:hover,
#header #gnb > li > div ul > li > a:focus{color:#3653a9;} 
*/
/*
#header #gnb > li:last-child > div{text-align:right;}
#header #gnb > li:last-child > div ul{padding-right:73px;}
#header #gnb > li:first-child > div ul{padding-left:155px;}
#header #gnb[data-gnbnum="5"] > li:nth-of-type(3) > div ul{padding-left:460px;}
#header #gnb[data-gnbnum="6"] > li:nth-of-type(3) > div ul{padding-left:350px;}
#header #gnb[data-gnbnum="5"] > li:nth-of-type(5) > div,
#header #gnb[data-gnbnum="6"] > li:nth-of-type(5) > div{text-align:right;}
#header #gnb[data-gnbnum="5"] > li:nth-of-type(5) > div ul{padding-right:70px;}
#header #gnb[data-gnbnum="6"] > li:nth-of-type(5) > div ul{padding-right:130px;}
#header #gnb[data-gnbnum="6"] > li:nth-of-type(6) > div ul > li > a{padding:0 18px;}
#header #gnb[data-gnbnum="6"] > li{padding:0 20px;}
*/

#footer{min-width:1400px; background:#22242a;}
#footer .inr_top > ul,
#footer .inr_bottom{width:1300px; margin:0 auto; padding:25px 0px;}
#wrap.system  #footer .inr_top > ul,
#wrap.system #footer .inr_bottom{width:1400px;}
#footer .inr_top{border-bottom:1px solid #181a21;}
#footer .inr_top > ul > li{display:inline-block;}
#footer .inr_top > ul > li > a{opacity:0.8; display:inline-block; margin-right:50px; font-size:14px; color:#fff; font-weight:300;}
#footer .inr_top > ul > li strong{display:inline-block; margin-right:30px; font-weight:500; color:#8daaff;}
#footer .inr_bottom{position:relative; box-sizing:border-box; padding-left:220px;}
#footer .inr_bottom .logo{display:block; position:absolute; left:0px; top:29px; width:178px; height:33px; background:url(../images/f_logo.png) no-repeat 50% 0; text-indent:100%; overflow:hidden; white-space:nowrap;}
#footer .inr_bottom address{opacity:0.8; font-size:14px; color:#fff; font-weight:300;}
#footer .inr_bottom p{opacity:0.3; margin-top:5px; font-size:13px; color:#fff;}
#footer .area_relation{position:absolute; right:0px; top:29px; z-index:99;}
#footer .area_relation button{width:197px; height:45px; line-height:43px; box-sizing:border-box; padding:0 38px 0 20px; background:transparent; border:1px solid #3e4049; text-align:left; font-weight:300;}
#footer .area_relation button span{opacity:0.7; position:relative; color:#fff; font-size:14px;}
#footer .area_relation button:after{content:''; display:block; position:absolute; right:16px; top:19px; border-top:7px solid #4e515a; border-left:4px solid transparent; border-right:4px solid transparent; transform:rotate(0deg); transition:all 0.3s ease 0s;}
#footer .area_relation button:before{content:''; opacity:0.4; display:block; position:absolute; top:0px; right:38px; width:1px; height:100%; background:#3e4049;}
#footer .area_relation button.active:after{transform:rotate(180deg);}
#footer .area_relation ul{display:none; position:absolute; bottom:44px; left:0px; padding:5px 15px; background:#22242a; border:1px solid #3e4049;}
#footer .area_relation ul > li{margin:10px 0px;}
#footer .area_relation ul > li > a{opacity:0.6; display:block; font-size:13px; letter-spacing:-0.5px; color:#fff; font-weight:300; line-height:1.4em; word-break:keep-all; transition:all 0.3s ease 0s;}
#footer .area_relation ul > li > a:hover,
#footer .area_relation ul > li > a:focus{opacity:1; text-decoration:underline;}

/* .area_subBg{width:100%; height:115px; background:#2a548b; background-size:500% 100%; background-image:linear-gradient(-9deg, #2a548b, #8c5c9e, #169475); background-image:-ms-linear-gradient(-9deg, #2a548b, #8c5c9e, #169475); background-image:-webkit-linear-gradient(-9deg, #2a548b, #8c5c9e, #169475); background-image:-moz-linear-gradient(-9deg, #2a548b, #8c5c9e, #169475); background-image:-o-linear-gradient(-9deg, #2a548b, #8c5c9e, #169475); animation:gradientBG 50s ease infinite;} */
.area_subBg{overflow:hidden; position:absolute; top:0px; left:0px; width:100%; min-width:1400px; height:223px; background:#053863; border-radius:0 0 50px 50px;}
.area_subBg i{display:block; position:absolute; top:0px; left:0px; width:100%;}
.area_subBg i img{width:100%;}
.area_subTitle{display:flex; justify-content:space-between; align-items:center; position:relative; min-height:68px; box-sizing:border-box; padding:15px 20px; border-bottom:1px solid #eceef2;}
.area_subTitle .box{display:flex; justify-content:flex-start; align-items:center;}
.area_subTitle h2{position:relative; padding-left:30px; font-size:25px; font-weight:500; color:#21222d; letter-spacing:-1px;}
.area_subTitle h2:before{content:''; display:block; position:absolute; top:12px; left:0px; width:18px; height:18px; background:#eceef2; border-radius:100%; box-shadow:2px 2px 3px rgba(0,0,0,0.05) inset;}
.area_subTitle p{font-size:13px;}
.area_subTitle p .home{font-size:14px; color:#999;}
.area_subTitle p .home:before{content:''; display:inline-block; width:16px; height:16px; margin-right:5px; margin-top:-3px; background:url(../images/content/sp_com.png) no-repeat -49px 0px; vertical-align:middle;}
.area_subTitle .btn_guide{display:inline-flex; justify-content:flex-start; align-items:stretch; min-width:90px; height:30px; box-sizing:border-box; margin-left:10px; background-color:#41464e; border:1px solid #21222d; border-radius:3px; color:#fff; transition:0.3s ease 0s;}
.area_subTitle .btn_guide:before{content:''; display:block; width:30px; height:100%; margin-right:5px; background:url(../images/2023/content/ico_guide.png) no-repeat 50% 50%; background-size:11px 14px; border-right:1px solid #666;}
.area_subTitle .btn_guide span{display:flex; justify-content:flex-start; align-items:center;}
.area_subTitle .btn_guide:hover{box-shadow:0 10px 20px rgba(0,0,0,0.10);}


.area_lnb{padding:30px 20px 0;}
.area_lnb ul{text-align:center;}
.area_lnb ul > li{display:inline-block; margin:0 5px;}
.area_lnb ul > li > a{display:inline-block; min-width:110px; height:55px; line-height:53px; box-sizing:border-box; padding:0 10px; border:1px solid #eeeff3; background:#eeeff3; border-radius:5px; font-size:16px; color:#565b6d; transform:translateY(0); transition:all 0.3s ease 0s;}
.area_lnb ul > li.on > a{background:#fff; border-color:#3653a9; color:#2445a7; font-weight:500; box-shadow:0px 10px 30px rgba(0,0,0,0.10);}
.area_lnb ul.n2 > li > a,
.area_lnb ul.n3 > li > a,
.area_lnb ul.n4 > li > a,
.area_lnb ul.n5 > li > a,
.area_lnb ul.n6 > li > a{min-width:160px;}
.area_lnb ul.n7 > li > a,
.area_lnb ul.n8 > li > a{min-width:130px;}
.area_lnb ul.n11 > li > a{min-width:90px;}

/* Pop Contents */
.pop_wrap{width:100%; margin:0 auto;}
.pop_wrap:after {content:""; display:block; clear:both;}
.pop_wrap .depth3_title{font-size:24px; font-weight:600; color:#2e2e2e; padding:32px 0 13px 5px;}
.pop_wrap .section{}

/* loading */
.area_loading{background:rgba(0,0,0,0.3); z-index:99999; position:fixed; left: 0px; top: 0px; width:100%; height:100%;}
.area_loading > div{text-align:center; position: absolute; left: 50%; top: 50%; margin-top: -42px; margin-left: -52px; padding:10px 20px; background:#fff; border-radius:15px;}
.area_loading > div > img{width:42px; height:42px;}
.area_loading > div > p{color:#555; font-size:15px; font-weight:600; margin-top:5px;}

/* ie */
.ie_support{min-width:1120px; padding:10px 0px; background:#373a43; text-align:center; color:#fff;}
.ie_support a{display:inline-block; margin-left:10px; color:#ffd94b; font-weight:600;}

/* layout pop */
.dim-layer{display:none;}
.pop-layer .pop-container{padding: 20px 25px;}
.pop-layer p.ctxt{color: #666; line-height: 25px;}
.pop-layer .btn-r{width: 100%; margin: 10px 0 20px -15px; padding-top: 10px; border-top: 1px solid #DDD; text-align: right;}
.pop-layer{display: none; position: absolute; width: auto; height: auto; background-color: #fff; border: 5px solid #3571B5; z-index: 10;}
.dim-layer{display: none; position: fixed; _position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100;}
.dim-layer .dimBg{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: .5; filter: alpha(opacity=50);}
.dim-layer .pop-layer{display: block;}
a.btn-layerClose{display: inline-block; height: 25px; padding: 0 14px 0; border: 1px solid #304a8a; background-color: #3f5a9d; font-size: 13px; color: #fff; line-height: 25px; float:right;}
a.btn-layerClose:hover{border: 1px solid #091940; background-color: #1f326a; color: #fff;}

/* 문의사항연락처 */
table.table.infoCall .button{min-width:155px; background-color:#fff; color:#3653a9 !important;}
table.table.infoCall .button:hover:before{background-color:#3653a9;}
table.table.infoCall .button:hover{color:#fff !important;}

@keyframes gradientBG {
    0%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
    100%{background-position:0% 50%;}
}

@media screen and (min-width:1600px){
    #header > .inr{width:1500px;}
    #footer{min-width:1500px;}
    #footer .inr_top > ul,
    #footer .inr_bottom{width:1500px;}
    #wrap.system #header > .inr{width:1600px;}
    #wrap.system  #footer .inr_top > ul,
    #wrap.system #footer .inr_bottom{width:1600px;}
}