@charset "utf-8";

html{}
body{position:relative; text-align:center; overflow-x:hidden !important;}

#wrap{min-width:1300px;margin:0 auto;}
@media all and (max-width:768px) {
	#wrap{min-width:auto; width:100%;}
}

#header{height:90px; z-index:9999; background-color:#fff; position:relative;}
@media all and (max-width:768px) {
	#header{height:60px;}
}
.header-inner{position:relative; width:1200px; margin:0 auto;}
@media all and (max-width:768px) {
	.header-inner {width:100%; padding:0 15px; box-sizing:border-box;}
}
.top-logo{
	float:left;
}
.top-logo h2{
	display: flex;
	align-items: center;
	gap: 16px;
	text-align: left;
}

.top-logo h2 img{
	display: inline-block;
	flex-shrink: 0;
	width: 100%;
	height: 100px;
	vertical-align: middle;
}

.top-util{position:absolute;right:0;top:32px; box-sizing:border-box;}
.top-util a{display:inline-block; padding:0 15px; font-size:18px; color:#0fa0b1;}

.top-nav{float:right; height:90px; text-align:center; position:relative; margin-right:180px;}

.gnav > li{float:left; position:relative;}
.gnav > li > a{display:block; height:90px; line-height:90px; font-size:20px; color:#101010; letter-spacing:-1px; white-space:nowrap; text-align:center; font-weight:600; padding:0 35px;}
.gnav > li > a:hover,
.gnav > li.active > a,
.gnav > li.on > a{color:#0fa0b1;}
.gnav .sub{position:absolute; left:0; top:90px; background-color:#fff; padding:0 20px; white-space:nowrap; display:none;}
.gnav .sub li{display:inline-block;}
.gnav .sub a{display:block; padding:10px 20px;}
/* .gnav .m1 .sub{left:-40px;} */
.gnav .m2 .sub{left:-50px;}
.gnav .m3 .sub{left:-40px;}

.main #header{background:none; position:absolute;left:0;top:0;right:0;}
.main .top-logo h1 a {
    /* background-image:url(../img/layout/top_logo_w.png); */
    background-size: contain;
}
.main .gnav > li > a{color:#fff;}

/* footer */
#footer{border-top:1px solid #e8e8e8;  padding:40px 0 50px;}
#footer .footer-inner{max-width:1200px; margin:0 auto; text-align:left; position:relative;}
#footer .footer-inner:after{display:block;content:'';clear:both;}
#footer .footer-logo{float:left; width:94px;}
#footer .footer-content{float:left; width:calc(100% - 94px); color:#808080; font-size:13px; line-height:1.75em;}
#footer .go-privacy{position:absolute;right:0;top:0; font-size:14px;}
#footer .site-info span{position:relative; padding-right:17px;}
#footer .site-info span + span{padding:0 17px; margin-left:2px;}
#footer .site-info span + span:before{display:block;content:'';clear:both; width:1px;height:10px; background-color:#c2c2c2; position:absolute;left:-1px;top:5px;}



/* 레이어팝업 */
.layorPop{display:none;}
.layorPop{background-color:#fff; box-sizing:border-box; padding:40px; max-height:100vh; overflow-y:auto;}
.layorPop .pop-head{padding-bottom:10px; border-bottom:3px solid #4d4d4d; margin-bottom:30px; }
.layorPop .pop-head .pop-title{font-size:30px;color:#333; text-align:left;}
.layorPop .pop-head .btn-close{position:absolute;right:20px;top:20px;}
.layorPop .pop-head .btn-close{width:30px;height:30px; text-indent:-9999px; text-align:left; background:url(../img/layout/i_pop_close.png) center center no-repeat;}
.layorPop .pop-body{text-align:left; line-height:1.75; font-size:15px; }



/* sub */
.container{}

.sub-visual{height:230px; text-align:center;}
.sub-visual .inner{}
.sub-visual h2{font-size:42px; color:#fff; font-weight:800; line-height:230px;}
.sub-visual p{font-size:22px; color:#fff;}
.sub-visual1{background:url(../img/layout/sub_visual1.jpg) center top no-repeat;}
.sub-visual2{background:url(../img/layout/sub_visual2.jpg) center top no-repeat;}
.sub-visual3{background:url(../img/layout/sub_visual3.jpg) center top no-repeat;}
.sub-visual4{background:url(../img/layout/sub_visual4.jpg) center top no-repeat;}
.sub-visual5{background:url(../img/layout/sub_visual5.jpg) center top no-repeat;}

.content-top{border-bottom:1px solid #ececec; height:40px;}
.content-top:after{clear:both;content:'';display:block;}
.content-top .route > ul{width:1200px;margin:0 auto;text-align:left;}
.content-top .route > ul > li{float:left;line-height:40px;position:relative; border-right:1px solid #ececec; width:150px; box-sizing:border-box; font-size:14px; color:#787878;}
.content-top .route .home{width:210px;}
.content-top .route .home .i-home{display:inline-block;height:40px; width:60px; vertical-align:top; border-right:1px solid #ececec; ;background:url(../img/layout/i_home.png) center center no-repeat; margin-right:15px;}
.content-top .route .arr{background:url(../img/layout/route_arr.png) right center no-repeat;margin-right:14px;padding-right:28px}
.content-top .route .dep1{display:inline-block;height:40px;padding:0 23px 0 15px;margin:0;text-align:left;}
.content-top .route .dep2{width:100%; height:40px;padding:0 23px 0 15px;margin:0;text-align:left; font-size:14px; background:url(../img/layout/icon_arr_down.png) right center no-repeat; box-sizing:border-box; color:#333;}
.content-top .route .m-dep2{position:absolute;left:-1px;top:33px; width:calc(100% + 2px); line-height:1em;z-index:9999;display:none;}
.content-top .route .m-dep2:before{display:block;content:'';height:8px;width:100%;background:url(../img/layout/mbox_arr.png) left bottom no-repeat;}
.content-top .route .m-dep2 ul{border:1px solid #e1e1e1;border-top:none;}
.content-top .route .m-dep2 ul li{border-top:1px solid #e1e1e1;background:#fff;}
.content-top .route .m-dep2 ul li:first-child{border-top:none;}
.content-top .route .m-dep2 ul li a{display:block; padding:15px 0 15px 15px;font-size:18px;white-space:nowrap;}
.content-top .route .m-dep2 ul li a:hover{background:url(../img/layout/icon_over.png) right center no-repeat;color:#0095d5;}

.sub-container{width:1200px; margin:0 auto; padding:60px 0 100px;}
.sub-container.wide{width:auto; padding-bottom:0;}

.page-title{margin-bottom:90px;}
.page-title h3{font-size:44px; color:#262626; font-weight:500;}
.page-title .title-sub{margin-top:20px; font-size:20px; color:#7f7f7f; font-weight:300;}

.contents{text-align:left;word-wrap:normal;word-break:keep-all;line-height:1.75em;}

.sub-tab{border-bottom:2px solid #0fa0b1; margin-bottom:55px;}
.sub-tab ul{display:flex; content-justify:space-between; border-bottom:none;}
.sub-tab ul li{border-top:1px solid #dbdbdb; border-right:1px solid #dbdbdb; position:relative;}
.sub-tab ul li:first-child{border-left:1px solid #dbdbdb;}
.sub-tab ul li a{display:block;height:53px;line-height:53px; text-align:center;}
.sub-tab ul li.on{border-color:#0fa0b1;}
.sub-tab ul li.on:after{display:block;content:'';width:18px;height:9px; background:url(../img/content/tab_on_arr.png) 0 0 no-repeat; position:absolute;left:50%;bottom:-9px; margin-left:-9px;}
.sub-tab ul li.on a{background-color:#0fa0b1;color:#fff;}
.sub-tab ul.col2 li{width:50%;}

.inner-wrap{width:1200px;margin:0 auto; }

/* contents */
.contents{min-height:300px;}
.page-top{text-align:center; margin-bottom:35px;}
.page-top h3{font-size:34px; font-weight:600;}



/* mobile **************************************************************************************** */

.m-header{position:fixed;left:0;top:0;bottom:0;right:0; background-color:#fff; text-align:left; z-index:9999; padding-top:5px; display:none;  }
.m-header-close{position:absolute;right:18px;top:8px;}
.m-header-close button{width:50px;height:50px; overflow:hidden; text-align:left; text-indent:-9999px; background:url(../images/layout/btn_close_m.png) center center / 27px auto no-repeat;}

.m-top-logo{height:70px; padding:0 20px; text-align:left;}
.m-top-logo img{height:70px;}

.m-top-nav{padding:0  30px; position:fixed;left:0;top:130px;bottom:0;right:0; overflow-y:auto;}
.m-gnav > li{padding:10px 0;}
.m-gnav > li > a{font-size:26px; font-weight:600;}

.m-gnav .dep2{padding:20px 10px; display:none;}
.m-gnav .dep2 li{padding:10px 0;}
.m-gnav .dep2 a{font-size:17px; padding:0 10px;}

.m-gnav > li.active > a{border-bottom:2px solid #222;}
.m-gnav > li.active .dep2{display:block;}



@media all and (max-width:1400px){

.top-logo{left:20px;}
.top-util{right:20px;}

}

/* 모바일: 햄버거 버튼 + 좌측 드로어 (PC에서는 숨김) */
.btn-gnav-toggle{display:none !important; border:0; background:transparent; cursor:pointer; padding:10px; margin-right:8px; flex-shrink:0; min-width:44px; min-height:44px; box-sizing:border-box;}
.btn-gnav-toggle span{display:block; width:22px; height:2px; background:#333; border-radius:1px;}
.btn-gnav-toggle span + span{margin-top:5px;}
.gnav-overlay{display:none; position:fixed; left:0; top:0; right:0; bottom:0; background:rgba(0,0,0,.4); z-index:10000; opacity:0; pointer-events:none; transition:opacity .25s ease;}
.gnav-drawer-close{display:none;}

@media screen and (max-width:1000px){
	#header{height:auto; min-height:70px; overflow:visible;}
	.header-inner{width:100%; padding:0 15px; box-sizing:border-box; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;}
	#header .btn-gnav-toggle{display:flex !important; flex-direction:column; justify-content:center; align-items:center;}
	.top-logo{float:none; text-align:left; flex:0 0 auto;}
	.top-logo h2 a img{width:auto; max-width:150px; height:auto; max-height:60px;}
	/* 좌측 슬라이드 드로어: 화면 전체 높이, 잘리지 않게 */
	#header .top-nav{position:fixed !important; left:0; top:0; bottom:0; width:280px; max-width:85vw; height:100vh; height:100dvh; min-height:100vh; min-height:-webkit-fill-available; background:#fff; transform:translateX(-100%); -webkit-transform:translateX(-100%); transition:transform .3s ease; z-index:10001; margin:0 !important; padding:0; text-align:left; float:none !important; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden;}
	body.gnav-open #header .top-nav{transform:translateX(0); -webkit-transform:translateX(0);}
	.gnav-overlay{display:block;}
	body.gnav-open .gnav-overlay{opacity:1; pointer-events:auto;}
	.gnav-drawer-close{display:block; width:100%; padding:16px 20px; border:0; border-bottom:1px solid #e8e8e8; background:#f5f5f5; font-size:14px; color:#333; cursor:pointer; text-align:left; box-sizing:border-box; flex-shrink:0;}
	.top-nav .gnav{display:block; padding:0; flex:1 1 0; min-height:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;}
	.top-nav .gnav > li{float:none; position:relative; border-bottom:1px solid #eee;}
	.top-nav .gnav > li > a{display:block; height:auto; line-height:1.4; padding:12px 20px; font-size:15px; color:#101010;}
	.top-nav .gnav .sub{position:static; transform:none; left:auto; display:none; box-shadow:none; padding:0; margin:0; width:100%; min-width:0; background:#f5f5f5; border-top:1px solid #eee;}
	.top-nav .gnav > li.on .sub{display:block;}
	.top-nav .gnav .sub li{display:block;}
	.top-nav .gnav .sub a{display:block; padding:12px 20px 12px 36px; font-size:14px; color:#555; border-top:1px solid #eee;}
	.top-nav .gnav .sub li:first-child a{border-top:none;}
	.top-nav .gnav .m2 .sub,
	.top-nav .gnav .m3 .sub{left:auto; transform:none;}
	.top-util{position:static; text-align:right; padding:0; flex:0 0 auto;}
	.top-util a{padding:6px 10px; font-size:19px;}
	.main #header{position:relative;}
	.main .gnav > li > a{color:#101010;}
}

/* 아이폰/소형 기기: 동일 동작 보장 (768px 이하) */
@media screen and (max-width:768px){
	#header .btn-gnav-toggle{display:flex !important;}
	#header .top-nav{position:fixed !important; transform:translateX(-100%); -webkit-transform:translateX(-100%);}
	body.gnav-open #header .top-nav{transform:translateX(0); -webkit-transform:translateX(0);}
	.sub-container{width:100%; padding:30px 15px 50px; box-sizing:border-box;}
}

@media all and (max-width:600px){
	#wrap{overflow:visible;}
	#header{height:auto;}
	/* #header{height:auto; min-height:70px;} */
	.header-inner{padding:0 12px;}
	.top-logo h2 a img{max-width:120px; max-height:50px;}
	.top-nav{width:260px;}
	.top-nav .gnav > li > a{font-size:15px; padding:12px 20px;}
	.top-nav .gnav .sub a{font-size:13px; padding:10px 20px 10px 36px;}
	.top-util a{font-size:18px; padding:5px 8px;}
	.sub-container{width:100%; padding:30px 15px 50px; box-sizing:border-box;}
	.inner-wrap{width:100%; padding:0 15px; box-sizing:border-box;}
	.content-top{height:auto; min-height:40px; overflow:visible;}
	.content-top .route{overflow:visible;}
	.content-top .route > ul{width:100%; padding:0 15px; box-sizing:border-box; display:flex; flex-wrap:wrap; overflow:visible;}
	.content-top .route > ul > li{float:none; width:auto; min-width:0; flex-shrink:0; padding:0 10px; font-size:13px; border-right:1px solid #ececec; position:relative; overflow:visible;}
	.content-top .route .home{width:auto;}
	.content-top .route .home .i-home{width:44px; margin-right:8px;}
	.content-top .route .arr{padding-right:18px; margin-right:8px;}
	.content-top .route .dep1{padding:0 12px 0 8px;}
	.content-top .route .dep2{height:40px; padding:0 20px 0 10px; min-width:0;}
	.content-top .route .m-dep2{position:absolute; left:-1px; top:100%; z-index:9999; overflow:visible; -webkit-transform:translateZ(0); transform:translateZ(0);}
	.content-top .route .m-dep2 ul{min-width:140px; overflow:visible;}
	
	.layorPop{padding:40px 20px 20px 20px;}
	.layorPop .pop-head{}
	.layorPop .pop-head .pop-title{font-size:20px;}
	.layorPop .pop-head .btn-close{position:absolute;right:5px;top:10px;}
	.layorPop .pop-body{font-size:14px; }
}

@media all and (max-width:500px) {
	#wrap{overflow:visible;}
	#header{height:auto;}
	.top-nav{width:240px;}
	.sub-container{width:100%; padding:30px 15px 50px; box-sizing:border-box;}
	.inner-wrap{width:100%; padding:0 15px; box-sizing:border-box;}
	.content-top{height:auto; min-height:40px; overflow:visible;}
	.content-top .route{overflow:visible;}
	.content-top .route > ul{width:100%; padding:0 10px; box-sizing:border-box; display:flex; flex-wrap:wrap; overflow:visible;}
	.content-top .route > ul > li{float:none; width:auto; min-width:0; flex-shrink:0; padding:0 10px; font-size:15px; border-right:1px solid #ececec; position:relative; overflow:visible;}
	.content-top .route .home{width:auto;}
	.content-top .route .home .i-home{width:44px; margin-right:8px;}
	.content-top .route .arr{padding-right:18px; margin-right:8px;}
	.content-top .route .dep1{padding:0 12px 0 8px;}
	.content-top .route .dep2{height:40px; padding:0 20px 0 10px; min-width:0; font-size:15px;}
	.content-top .route .m-dep2{position:absolute; left:-1px; top:100%; z-index:9999; overflow:visible; -webkit-transform:translateZ(0); transform:translateZ(0);}
	.content-top .route .m-dep2 ul{min-width:140px; overflow:visible;}
	
	.layorPop{padding:40px 20px 20px 20px;}
	.layorPop .pop-head{}
	.layorPop .pop-head .pop-title{font-size:20px;}
	.layorPop .pop-head .btn-close{position:absolute;right:5px;top:10px;}
	.layorPop .pop-body{font-size:14px; }
}