@charset "utf-8";
/*font 설정*/
html{font-size:62.5%;}
html.lock{overflow:hidden;}
@media screen and (max-width:1023px){
	html{font-size:56.25%}
}
@media screen and (max-width:449px){
	html{font-size:50%}
}

body{min-height:80vh;}

/*디폴트 , 헬퍼*/
.wrap{height:100%;}
.lazy{opacity:0; -webkit-transition:opacity 0.1s; -o-transition:opacity 0.1s; transition:opacity 0.1s;}
.lazy.loaded{opacity:1;}
.cl:after{content:""; display:block; clear: both;}
body{font-size:1.6rem; font-family: 'Noto Sans', sans-serif; letter-spacing: -0.04em;}
.hidden{overflow:hidden;position:absolute;border:0;width:1px;height:1px;clip:rect(1px, 1px, 1px, 1px)}

#header{padding:0 4rem; width:100%; height:9.5rem; display:flex; align-items: center; position:fixed; top:0; left:0; right:0; z-index: 100; transition: background 0.2s, padding 0.2s;}
#header .logo{margin-right:8rem; position: relative;}
#header .logo:after{content:""; display:block; width:1px; height:2.4rem; background:#ddd; position:absolute; right:-4rem; top:50%; transform:translateY(-50%)}
#header .logo a{display:block; width:17.5rem; height:4.4rem; background:url(../img/common/logo_w.svg) no-repeat center; text-indent:-9999px;}
#header .logo a img{width: 100%; height:auto;}

#header.on{background:#fff; box-shadow: 0 10px 30px rgba(0,0,0,0.03);}

#gnb{}
#gnb .depth-01-list{}
#gnb .depth-01-item{float:left; position:relative;}
#gnb .depth-01-item + .depth-01-item{margin-left:4rem;}
#gnb .depth-01-item > a{font-size:1.5rem; font-weight:700; line-height:9.5rem; transition:color 0.2s; color:#fff;}
#gnb .depth-02-list{display:none; position:absolute; top:80%; left:50%; transform: translateX(-50%); background:#fff; border:1px solid #eee; padding:1rem 0;}
#gnb .depth-02-item {text-align:center}
#gnb .depth-02-item a{padding:0 3rem; display:block; white-space: nowrap; margin:2rem 0; transition:color 0.2s; font-size:1.5rem;}

#gnb .depth-01-item:hover > a{color:#01a450;}
#gnb .depth-01-item:hover .depth-02-list{display:block}
#gnb .depth-02-item a:hover{color:#01a450;}

#utill{margin-left:auto;}
#utill {display:flex;align-items:center;}
#utill li{float:left;}
#utill li + li{margin-left: 2em;}
#utill li a{font-size:1.5rem; font-weight:700; color:#fff;}
#utill li .online{background:#01a450; border-radius: 9999px 9999px; color:#fff; padding:1.2rem 2.5rem;}
#utill .mobile-menu-btn{display:none;}

#header.on .logo a{background:url(../img/common/logo_c.svg) no-repeat center;}
#header.on .depth-01-item > a{color:#333}
#header.on #utill li:nth-child(1) a{color:#333}
#header.on #utill li a{color:#333;}
#header.on #utill li:last-child a{color:#fff;}

#notice-bar{background:#06301f; height:10.8rem; overflow:hidden; position: relative;}
#notice-bar:after{content:""; display:block; width:50%; height:100%; position: absolute; right:0; top:0; background: #eeeedf;}
#notice-bar	 .inner{position: relative; z-index: 1; height:100%;}
#notice-bar .inner:after{content:""; display: block; clear:both;}
#notice-bar .left{float:left; width:34rem; height:100%; text-align: right; display:flex; justify-content: center; flex-direction: column; padding-right:2.5rem;}
#notice-bar .left .title{font-size:1.6rem; font-weight:700; color:#fff; margin-bottom:0.6em;}
#notice-bar .left .eng-title{font-family: 'Poppins', sans-serif; color:#1eb36b; font-size: 1.5rem; letter-spacing: -0.05em; font-weight:700;}
#notice-bar .left .eng-title span{color:#fff;}
#notice-bar .right{float:left; width:calc(100% - 34rem); height:100%; background: #eeeedf; position: relative; padding-right:6rem;}
#notice-bar .right .swiper-container{height:100%; }
#notice-bar .right .notice-list{height:100%;}
#notice-bar .right .notice-list li{height:100%;}
#notice-bar .right .notice-list li a{height:100%; display:flex; font-size:1.5rem; align-items: center; padding:0 3em;}
#notice-bar .right .notice-list li .date{white-space: nowrap; color:#fff; background:#06301f; border-radius: 9999px 9999px; padding:0 1.8em; height:3.2rem; line-height:3.2rem; margin-right:1.5em; font-weight:700;}
#notice-bar .right .notice-list li .title{white-space: nowrap; font-weight:500; margin-right:1em; padding-right:1em; overflow:hidden; text-overflow:ellipsis;}
#notice-bar .right .control{position: absolute; right:0; top:50%; transform: translateY(-50%);}
#notice-bar .right .control .arrow{width:5.4rem; height:5.4rem; text-indent: -9999px; display:flex; align-items: center; justify-content: center;}
#notice-bar .right .control .arrow img{width:1rem; height:auto; opacity: 0.2; transition: opacity 0.2s; transform:rotate(90deg)}
#notice-bar .right .control .arrow:hover img{opacity: 1;}

#footer{background:#1e1d1d;}
#footer .inner{padding: 1.6rem;}
#footer .top{padding:4rem 0; border-bottom:1px solid #424141}
#footer .top ul{display:flex; align-items: center;}
#footer .top ul li + li{margin-left:5rem;}
#footer .top ul a{color:#9a9a9a; font-weight:500;}
#footer .top ul .special{color:#fff; font-weight:700;}
#footer .bottom{padding:4rem 0 8rem; display:flex;}
#footer .f-logo{display:block; width:17.5rem; height:4.4rem;}
#footer .f-logo img{width: 100%; height:auto;}
#footer .f-content{color:#fff; padding:0.5rem 0 1rem 4rem; color:#9a9a9a;}
#footer .f-content .f-info{margin-bottom:1rem;}
#footer .f-content .f-info:after{content:""; display:block; clear: both;}
#footer .f-content .f-info span{float:left; display:block; position: relative; margin-right:1.5rem; padding-right:1.5rem; }
#footer .f-content .f-info span:after{content:""; width:1px; height:1.2rem; display:block; background:#fff; position: absolute; right:0; top:50%; transform: translateY(-50%);}
#footer .f-content .f-info span:last-child:after{display:none;}

#sub{min-height:80vh;}
#sub .sub-visual{width:100%; height:50rem; background:url(../img/sub/sub-vis.jpg) no-repeat center top; background-size:cover; display:flex; align-items: center; justify-content: center; flex-direction: column;}
#sub .sub-visual.login{height:20rem; background:#333;}
#sub .sub-visual .page-title{font-size:3.2rem; margin-bottom:1em; margin-top:2em; color:#fff}
#sub .sub-visual .page-sub-title{font-size:1.6rem; opacity: 0.7; color:#fff;}
#sub .sub-nav{margin-top:-4rem; margin-bottom:10rem;}
#sub .sub-nav ul{background:#156b48; box-shadow: 0 10px 30px rgba(0,0,0,0.2); max-width:132rem; margin:0 auto; display:flex; align-items: center; justify-content:space-around; padding:0 16rem; height:8rem;}
#sub .sub-nav ul li a{color:#fff; display:block; line-height:8rem; position: relative;}
#sub .sub-nav ul li.on a{color:#eeeedf; font-weight: 700;}
#sub .sub-nav ul li.on a:after{content:""; width:140%; height:5px; background:#eeeedf; position: absolute; bottom:0; left:50%; transform:translateX(-50%)}
.sub-content{max-width:132rem; font-size:1.7rem; margin:0 auto; padding:0 1.6rem 20rem; min-height:50vh;}
.sub-content.no-vis{padding-top:20rem;}
.sub-content p{line-height:1.5em; word-break: keep-all; margin-bottom:1em;}
.m-gnb-wrapper{display:none}

#sub .sub-visual.login ~ .sub-content > div{margin-top:-5rem; padding:5rem; background:#fff; border-radius:16px; box-shadow:0 2px 10px rgba(0,0,0,0.1)}

/*브라우저 경고창*/
.browser_alert{position: fixed; bottom:40px; left:50%; -webkit-transform:translateX(-50%); -ms-transform:translateX(-50%); transform:translateX(-50%); background:#000; color:#fff; width:800px; height:100px; border-radius: 16px; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; line-height: 1.5em; z-index: 99999999; text-align:center; display:none;}
.ie11 .browser_alert, .ie10 .browser_alert, .ie9 .browser_alert, .ieOld .browser_alert, .oldEdge .browser_alert {display:-webkit-box;display:-ms-flexbox;display:flex;}
.browser_alert .close{display:block; width:40px; height:40px; position: absolute; top:10px; right:10px; text-indent: -9999px;}
.browser_alert .close:after{content:""; display:block; width:16px; height:2px; background:#fff; position: absolute; top:18px; left:12px;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);}
.browser_alert .close:before{content:""; display:block; width:16px; height:2px; background:#fff; position: absolute; top:18px; left:12px; -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg);}

.winpop{position:fixed; background:#fff; -webkit-box-shadow:10px 20px 18px 0 rgba(0,0,0,.1); box-shadow:10px 20px 18px 0 rgba(0,0,0,.1); z-index: 19; border-radius:8px; overflow:hidden; display:none;}
.winpop .pop_img{position:relative;}
.winpop .pop_img img{display:block; max-width:350px; height:auto; }
.winpop .control{background:#fff;height:40px;color:#888;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.winpop .control .check{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;padding-left:1em;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.winpop .control .check input{width:18px;height:18px;background:url(../img/check_box_outline_blank.svg) no-repeat center;margin-right:.7em;cursor:pointer}
.winpop .control .check input:checked{background:url(../img/check_box.svg) no-repeat center}
.winpop .control .check label{cursor:pointer; font-size:13px;}
.winpop .control .winpop_btn{-webkit-box-flex:0;-ms-flex:0 0 100px;flex:0 0 100px;height:100%;color:#fff;background-color:#333;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.winpop .control .winpop_btn i{width:12px;height:12px;display:block;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-right:.5em}
.winpop .control .winpop_btn i img{width:12px;height:12px}

.video-container{position:absolute; top:0; left:0; right:0; bottom:0; overflow:hidden;}
.video-container:after{content:""; display:block; width:100%; height:100%; position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.2)}
.video-container video{position:absolute; top:50%; left:50%; width:100%; height:auto; transform:translate(-50%, -50%)}

form .kfmcheck{ display:none; }

@media only screen and (max-width:1400px){
	.video-container video{height:100%; width:auto;}
}

@media only screen and (max-width:1180px){
	#header{padding:0 1.6rem;}
	#header .logo:after{display:none;}
	#gnb{display:none;}
	#utill ul{position:relative; margin-right:1.5rem; padding-right:3rem;}
	#utill ul:after{content:""; display:block; width:1px; height:2rem; background:#ddd; position:absolute; top:50%; right:0; transform:translateY(-50%)}
	#utill .mobile-menu-btn{display:flex; align-items:center; justify-content:center; flex-direction:column; text-indent:-9999px; width:48px; height:48px; padding:0 12px;}
	#utill .mobile-menu-btn:after, #utill .mobile-menu-btn:before{content:""; display:block; width:100%; height:2px; background:#fff; border-radius:2px;}
	#utill .mobile-menu-btn span{display:block; width:100%; height:2px; background:#fff; margin:5px 0;border-radius:2px;}

	#header.on #utill .mobile-menu-btn:after,#header.on  #utill .mobile-menu-btn:before{background:#222;}
	#header.on #utill .mobile-menu-btn span{background:#222;}
	.m-gnb-wrapper{display:block; position:fixed; top:0; right:0; width:320px; height:100%; background:#fff; z-index:999; transform:translateX(100%); transition: transform 0.4s cubic-bezier(0,.2,.25,1); overflow-y:scroll;}
	.m-gnb-wrapper.open{box-shadow: -10px 0px 50px rgba(0,0,0,0.05); transform:translateX(0)}
	.m-gnb-container .close{position:absolute; width:4.8rem; height:4.8rem; right:1rem; top:1rem; text-indent:-9999px; }
	.m-gnb-container .close:after, .m-gnb-container .close:before{content:""; display:block; width:3rem; height:2px; background:#fff; position:absolute;}
	.m-gnb-container .close:after{transform:rotate(45deg); top:2rem; left:1rem}
	.m-gnb-container .close:before{transform:rotate(-45deg);  top:2rem; left:1rem}
	.m-gnb-container .top{background:#01a450; padding:6rem 0 3rem;}
	.m-gnb-container .top .logo{padding:2rem; text-align:center;}
	.m-gnb-container .top .logo img{width:60%; height:auto; margin-left:-1rem;}
	.m-gnb-container .depth-01-item{border-bottom:1px solid #eee;}
	.m-gnb-container .depth-01-item > a{display:block; width:100%; line-height:8rem;padding:0 2rem;}
	.m-gnb-container .depth-02-list{background:#f8f9fa; padding:2rem 2.2rem; display:none;}
	.m-gnb-container .depth-02-list a{display:block; width:100%; height:5rem; line-height:5rem; opacity:0.8}
	.m-gnb-container .utill .utill-top{width:100%; background:#156b48;  display:flex;}
	.m-gnb-container .utill .utill-top a{display:block; padding:2rem 0; text-align:center; width:50%; white-space:nowrap; color:#fff; font-size:1.3rem;}
	.m-gnb-container .utill .utill-admin{ background:#333;  border-bottom:1px solid #eee; display:flex;}
	.m-gnb-container .utill .utill-admin a{display:block; padding:2rem 0; text-align:center; width:50%; white-space:nowrap; color:#fff; font-size:1.3rem;}
}

@media only screen and (max-width:1024px){

	.global-sub #header .logo a{background:url(../img/common/logo_c.svg) no-repeat center;}
	.global-sub #utill .mobile-menu-btn:after, .global-sub #utill .mobile-menu-btn:before{background:#222;}
	.global-sub #header #utill .mobile-menu-btn span{background:#222;}
	.global-sub #utill li:nth-child(1) a{color:#222;}
	#sub{padding-top:19.5rem;}
	#sub .sub-visual{display:none;}
	#sub .sub-nav{padding-top:9.5rem; background:#fff; margin-top:0; position:fixed; width:100%; top:0; z-index:5;}	
	#sub .sub-nav ul{box-shadow: 0 10px 30px rgba(0,0,0,0.15);}
	.sub-content.no-vis{padding-top:0}

	#notice-bar{height:auto;}
	#notice-bar:after{display:none;}
	#notice-bar .left{float:none; width:100%; text-align:left; padding:3rem 1.6rem;}
	#notice-bar .right{height:10.8rem;float:none; width:100%;}
	#notice-bar .right .notice-list li a{padding:0 1.6rem;}
	#notice-bar .right .control{right:2rem;}

	#footer .bottom{display:block;}
	#footer .f-content{padding:2rem 0;}

	#sub .sub-nav ul{padding:0 1.6rem;}



}


@media only screen and (max-width:768px){
	#sub .sub-nav ul{padding:0 1.6rem; height:6rem; font-size:1.3rem;}
	#sub .sub-nav ul li a{line-height:6rem;}
	#sub .sub-nav ul li.on a:after{height:2px;}

	#utill ul{display:none}
	#footer .top{display:none;}
	#footer .inner{padding:0 1.6rem;}
	#footer .f-logo{margin-bottom:2rem;}	
	#footer .f-content .f-info span{float:none; margin-right:0; margin-bottom:1.3rem;}
	#footer .f-content .f-info span:after{display:none;}

	.winpop{left:50% !important; top:100px !important; transform:translateX(-50%)}

}