html{}
body{text-align:center;}

img{max-width:100%;}

#skipNav{display:none;}

#wrap{/*min-width:1380px;*/}

#header{height:122px;z-index:90;}
header{height:122px;border-bottom:1px solid rgba(255,255,255,0.3);}

.header-top-inner{max-width:1320px; margin:0 auto; position:relative; height:71px; box-sizing:border-box;}
.header-top-inner:after{display:block;content:'';clear:both;}

.top-logo{float:left;}
.top-logo a{}

.top-contents{float:right; padding:23px 0 12px;}
.top-contents-m{float:right; display:none;}

.top-util{float:left; padding-right:10px;}
.top-util a{line-height:36px; padding:0 12px; position:relative; float:left;}
.top-util a + a:before{position:absolute;left:-1px;top:50%; margin-top:-6px; display:block;content:'';width:1px;height:12px; background-color:#e7e7e7;}

.top-util .menu{margin-left:40px;}
.top-util .btn-menu{width:30px;height:30px;position:relative;text-align:left;}
.top-util .btn-menu span{display:block;text-indent:-9999px;}
.top-util .btn-menu:before{display:inline-block;content:'';width:24px;height:2px;background-color:#fff;position:absolute;right:0;top:6px; transition:all 0.2s ease-out;}
.top-util .btn-menu span:before{display:inline-block;content:'';width:30px;height:2px;background-color:#fff;position:absolute;right:0;top:14px; transition:all 0.2s ease-out;}
.top-util .btn-menu:after{display:inline-block;content:'';width:16px;height:2px;background-color:#fff;position:absolute;right:0;top:22px; transition:all 0.2s ease-out;}

.top-util .btn-menu:hover:before{width:30px;}
.top-util .btn-menu:hover:after{width:30px;}

.top-search{float:left; border:1px solid #4d93b7; height:36px; box-sizing:border-box; border-radius:6px; overflow:hidden;}
.top-search input{border:none;height:34px;line-height:34px; text-indent:10px; width:200px;float:left;}
.top-search button{float:left;width:34px;height:34px; background:#4d93b7 url(../img/layout/i_search.png) center center / cover no-repeat; text-align:left;text-indent:-9999px; border-radius:6px 0 0 6px;}
.top-search{float:left;}

.top-sns{float:left; padding-left:25px;}
.top-sns a{float:left; padding:0 15px 0 33px; font-size:14px;line-height:36px;}
.top-sns a.ch{background:url(../img/layout/sns_ch.png) left center / 28px auto no-repeat;}
.top-sns a.inst{background:url(../img/layout/sns_inst.png) left center / 28px auto no-repeat;}

.top-nav{border-top:1px solid #e1e1e1;height:50px; position:relative; z-index:200;}
.top-nav .nav-inner{max-width:1320px;margin:0 auto;}
.top-nav .nav-inner > ul{display:flex;}

.gnav{text-align:center;}
.gnav > li{display:inline-block; height:50px; vertical-align:top; text-align:center; position:relative; width:calc(100%/8);}
.gnav > li > a{display:block;height:50px;line-height:50px;font-size:19px; color:#1c1c1c; font-weight:600; position:relative;}
.gnav > li > a:hover{color:#01acee;}

.gnav > li.on > a{color:#01acee;}
.gnav > li.active > a{color:#01acee;}
.gnav > li:hover .snav{background-color:#fafdfe; border-top:3px solid #197baf; padding-top:27px;}

.snav-bg{position:absolute;left:0;top:50px;right:0; height:470px; background-color:#ecf9fb; box-shadow:0 25px 20px rgba(0,0,0,0.1); display:none;}

.top-nav .snav{position:absolute;left:-1px;top:50px;right:-1px;height:470px; box-sizing:border-box; padding:30px 15px; display:none;}
.top-nav .snav:after{position:absolute;right:0;top:30px;bottom:30px; display:block;content:'';width:1px; background-color:#d4e6ea;}
.top-nav .snav a{display:block; font-size:17px; padding:10px 0; text-align:center; position:relative; line-height:1.16em;}
.top-nav .snav a span{position:relative;}
.top-nav .snav a span:before{position:absolute;left:0;bottom:0;width:0;height:8px;content:''; background-color:rgba(85,217,241,0.4); transition:width 0.3s;}
.top-nav .snav a:hover span:before{width:100%;}


@keyframes snavOver{
  0%{left:20px;right:-20px;opacity:0;}
  100%{left:0;right:0;opacity:1;}
}

.m-search{position:fixed;left:0;right:0;top:60px;z-index:200; background-color:#177cb2;padding:20px;display:none;}
.m-search-wrap{border-bottom:2px solid #fff;display:flex;}
.m-search-wrap input{border:none;height:40px;color:#fff;width:calc(100% - 40px); background:none;}
.m-search-wrap button{width:40px;height:40px;background:url(../img/layout/btn_search_w.png) center center / 22px auto no-repeat; text-align:left;text-indent:-9999px;}


#header.scrollUp{}
#header.scrollUp header{position:fixed;left:0;top:0;right:0; background-color:#fff;border-bottom:1px solid rgba(0,0,0,0.1);}

/* mobile header */
#headerMobile{position:fixed;left:0;top:0;right:0;bottom:0; background-color:#fff; z-index:201; display:none;}
.m-header-top{background-color:#177cb2; color:#fff; position:fixed; left:0;top:0;right:0;height:90px;}
.m-header-top .row1{text-align:left;padding:0 10px;  border-bottom:1px solid rgba(255,255,255,0.3); height:50px;}
.m-header-top .m-header-title{line-height:50px; font-size:16px; font-weight:600;}
.m-header-top .m-header-close{position:absolute;right:0;top:0;height:50px;width:50px; text-align:left;text-indent:-9999px; background:url(../img/layout/i_header_close.png) center center / 14px auto no-repeat;}
.m-header-top .row2{padding:0 10px; height:50px; box-sizing:border-box;}
.m-header-top .row2:after{display:block;content:'';clear:both;}
.m-header-top .top-util{float:left;padding:6px 0;}
.m-header-top .top-util a{display:inline-block;height:25px; border-radius:3px; border:1px solid #fff; line-height:25px; font-size:12px; padding:0 12px; color:#fff; margin-right:3px; box-sizing:border-box; }
.m-header-top .top-sns{float:right;padding:2px 0;}
.m-header-top .top-sns a{font-size:12px; color:#fff; padding-right:10px;letter-spacing:-1px;}
.m-header-top .top-sns a.inst{width:28px; overflow:hidden;padding:0;text-indent:-9999px;}

.m-gnav{position:absolute;left:0;top:90px;right:0;bottom:0; background-color:#ecf9fb; text-align:left;}
.m-gnav > li > a{display:block;height:50px; line-height:50px; width:120px; font-size:15px;  box-sizing:border-box; padding:0 0 0 20px; font-weight:600; border-bottom:1px solid #d4e6ea;}
.m-gnav > li.active a{background-color:#fff;}
.m-gnav .snav{position:absolute;left:120px;top:0;right:0;bottom:0; background-color:#fff; box-sizing:border-box; padding:0 20px; display:none;}
.m-gnav .snav > li{border-bottom:1px solid #d6dde3;}
.m-gnav .snav > li > a{height:50px; line-height:50px; display:block; box-sizing:border-box; padding:0 5px; position:relative;}
.m-gnav .snav > li.arr > a:after{position:absolute;right:3px;top:50%;margin-top:-4px; display:block;content:'';width:15px;height:8px; background:url(../img/layout/snav_arr.png) 0 0 / cover no-repeat;}
.m-gnav .dep2{border-top:2px solid #757575; padding:10px 0; display:none;}
.m-gnav .dep2 a{display:block; color:#666; padding:6px;}

.m-gnav .active .snav{display:block;}
.m-gnav .snav > li.arr.active > a:after{transform:rotate(180deg);}
.m-gnav .snav > li.arr.active > a{font-weight:600;}
.m-gnav .snav > li.arr.active > .dep2{display:block;}



/* sub */
#container{}

.sub-top{text-align:center; height:160px; background:url(../img/layout/sub_top_bg.png) center center no-repeat; display:flex; align-items:center; justify-content:center; }
.sub-top > div{}
.sub-top h2{font-size:38px; line-height:1em; color:#197baf; font-weight:600; margin-bottom:10px;}
.sub-top p{font-size:20px; color:#353535;}
.sub-top p span:nth-of-type(1){color:#09997c;}
.sub-top p span:nth-of-type(2){color:#00adaf;}

.sub-container{text-align:left;width:1320px;margin:0 auto; padding-bottom:100px; box-sizing:border-box;}
.sub-container:after{display:block;content:'';clear:both;}

.side-menu{width:250px;float:left; margin-top:-100px;}
.side-menu h2{height:100px;text-align:center; display:flex;align-items:center; justify-content:center; background:#2180b2 url(../img/layout/h2_bg.png) 0 0 / cover no-repeat;;color:#fff; font-size:26px;font-weight:600; border-radius:10px 10px 0 0;}
.side-menu .menu-list{border:1px solid #d9dde1; border-top:none; text-align:left;border-radius:0 0 6px 6px;}
.side-menu .menu-list .dep1> li + li{border-top:1px solid #d9dde1;}
.side-menu .menu-list .dep1> li > a{display:block; padding:20px; font-size:17px;color:#1c1c1c; position:relative; font-weight:600;}
.side-menu .menu-list .dep1> li > a:hover{color:#2eb6d6;}
.side-menu .menu-list .dep1> li.active > a{color:#fff; background-color:#2eb6d6; margin:-1px -1px -1px -1px; padding:21px; font-weight:600;}
.side-menu .menu-list .dep2{padding:6px 15px; background-color:#f0f8fa; display:none;}
.side-menu .menu-list .dep2> li + li{border-top:1px dotted #8ca5b3;}
.side-menu .menu-list .dep2> li > a{display:block; padding:12px 0 12px 10px; font-size:16px;color:#1c1c1c; position:relative;  font-weight:600;}
.side-menu .menu-list .dep2> li > a:hover{color:#0091b3;}
.side-menu .menu-list .dep2> li.active > a{color:#0091b3;}

.side-menu .menu-list .dep1> li.arr>  a:before,
.side-menu .menu-list .dep1> li.arr > a:after{display:block;content:'';background-color:#a7a8a8; position:absolute;top:50%;right:15px;}
.side-menu .menu-list .dep1> li.arr > a:before{width:13px;height:1px;}
.side-menu .menu-list .dep1> li.arr > a:after{width:1px;height:13px; right:21px; margin-top:-6px;}
.side-menu .menu-list .dep1> li.arr.active > a:before{background-color:#fff;}
.side-menu .menu-list .dep1> li.arr.active > a:after{display:none;}

.side-menu .menu-list .dep1> li.active > .dep2{display:block;}

.sub-contents{width:1030px; float:right; padding:50px 0;}
.sub-contents .contents-title{height:60px; position:relative; border-bottom:1px solid #d9dde1; margin-bottom:45px;}
.sub-contents .contents-title h3{font-size:31px; font-weight:600;}
.sub-contents .contents-title .route{position:absolute;right:0;top:10px; font-size:15px; line-height:15px; letter-spacing:-1px;}
.sub-contents .contents-title .route .home{background:url(../img/layout/i_home.png) left top / 14px 15px no-repeat; padding-left:20px;}
.sub-contents .contents-title .route li{display:inline; position:relative;}
.sub-contents .contents-title .route li + li:before{display:inline-block;width:5px;height:9px;content:''; background:url(../img/layout/route_arr.png) 0 0 no-repeat; margin:0 8px 0 6px;}

.sub-contents > .contents{min-height:200px; line-height:1.75rem;}

/* footer */
footer{background-color:#494e5a;padding:40px 0 60px;}
footer .inner{max-width:1320px;margin:0 auto; position:relative;}
footer .inner:after{display:block;content:'';clear:both;}

.footer-logo{position:absolute;left:0;top:0;}
.footer-info{padding-left:400px; text-align:left; font-size:14px;color:#b3b5b9;}
.footer-info .info-addr{line-height:1.5em;}
.footer-info .info-addr .tel span{position:relative; white-space:nowrap;}
.footer-info .info-addr .tel span + span{margin-left:20px;}
.footer-info .info-addr .tel span + span:before{content:' / '; position:absolute;left:-12px;top:-2px;}

.etc-link{margin-bottom:15px;}
.etc-link li{position:relative;display:inline-block; vertical-align:top;}
.etc-link li + li:before{display:block;content:'';width:1px;height:10px;background-color:#c2c7d3; position:absolute;left:-1px;top:50%; margin-top:-5px; opacity:0.3;}
.etc-link a{color:#c2c7d3;padding:0 20px;font-weight:600;}
.etc-link li:first-child a{padding-left:0;}

/* quick */
.quickMenu{position:fixed;right:0;top:217px;z-index:80; width:110px;}
.quickMenu dl{box-shadow:0 0 20px rgba(0,0,0,0.09); margin-bottom:9px;  overflow:hidden;}
.quickMenu dt{background-color:#5295b8;height:65px; display:flex;align-items:center;justify-content:center; color:#fff; font-size:17px; font-weight:600;border-radius:6px 6px 0 0;}
.quickMenu dd{}
.quickMenu dd.links{text-align:center;padding:10px 0; background-color:#fff; border-radius:0 0 6px 6px;}
.quickMenu dd.links a{display:block; padding:70px 0 10px; font-size:16px;font-weight:600; letter-spacing:-1px; background-position:center top; background-repeat:no-repeat;}
.quickMenu dd.links li + li{margin-top:5px;}
.quickMenu .q1 a{background-image:url(../img/layout/i_quick1.png);}
.quickMenu .q2 a{background-image:url(../img/layout/i_quick2.png);}
.quickMenu .q3 a{background-image:url(../img/layout/i_quick3.png);}
.quickMenu .q4 a{background-image:url(../img/layout/i_quick4.png);}
.quickMenu .q5 a{background-image:url(../img/layout/i_quick5.png);}
.quickMenu .go-top{display:block; height:50px; line-height:50px; background-color:#45a592; color:#fff; font-weight:600; border-radius:6px;box-shadow:0 0 10px rgba(0,0,0,0.05);}
.quickMenu .go-top:after{display:inline-block;content:''; width:11px;height:15px; background:url(../img/layout/i_top.png) center center / 11px auto no-repeat; margin-left:5px; margin-top:-6px; vertical-align:middle;}

/* 레이어팝업 */
.layorPop{display:none;}
.layorPop{border:1px solid #7b6958; background-color:#fff;}
.layorPop .pop-head{background-color:#333; text-align:center; height:80px; color:#fff; position:relative; display:table;width:100%;}
.layorPop .pop-head .inner{display:table-cell; vertical-align:middle;}
.layorPop .pop-head .pop-title{color:#fff; font-size:26px; font-weight:400;}
.layorPop .pop-close{position:absolute;right:38px;top:50%; margin-top:-15px;}
.layorPop .pop-close button{width:29px;height:29px; text-indent:-9999px; text-align:left; background:url(../img/info/i_pop_close.png) center center no-repeat;}
.layorPop .pop-body{padding:60px;}


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

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


}




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

.quickMenu{top:inherit;bottom:100px;width:60px; right:5px;}
.quickMenu dl{display:none;}
.quickMenu .go-top{height:50px;}

}

@media all and (max-width:1340px){
.header-top-inner{padding:0 10px;}

.sub-container{margin:0 20px; width:auto;}

.side-menu{width:19%;}
.sub-contents{width:78%;}

}

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

#header{height:71px;}
header{height:71px;border-bottom:none;}

.top-contents{display:none;}
.top-contents-m{display:block; padding:10px 0;}
.top-contents-m a{display:inline-block; vertical-align:top; width:40px;height:50px; text-align:left;text-indent:-9999px;}
.top-contents-m .btn-search{background:url(../img/layout/i_search_m.png) center center / 21px auto no-repeat;}
.top-contents-m .btn-menu{background:url(../img/layout/i_menu_m.png) center center / 18px auto no-repeat;}

.top-nav{display:none;}

.sub-top{}
.side-menu{display:none;}
.sub-contents{width:100%;}

/* footer */
footer .inner{padding:0 20px;}
.footer-logo{display:none;}
.footer-info{padding-left:0;}


}


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

#header{height:60px;}
header{height:60px;}
.header-top-inner{height:60px;}
.top-logo img{height:60px;}
.top-contents-m{display:block; padding:5px 0;}

.sub-container{padding-bottom:30px;}
.sub-contents{padding:30px 0;}
.sub-contents .contents-title{height:auto; padding-bottom:30px; margin-bottom:30px;}
.sub-contents .contents-title h3{font-size:24px;}
.sub-contents .contents-title .route{position:relative; margin-top:5px; font-size:14px;}

.sub-top{height:120px;}
.sub-top h2{font-size:30px;}
.sub-top p{font-size:16px;}

}

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

.top-logo{padding:5px 0;}
.top-logo img{height:50px;}
.top-contents-m a{width:30px;}

.etc-link a{padding:0 5px;}

.sub-contents{padding:20px 0;}
.sub-contents .contents-title {text-align:center;}
.sub-contents .contents-title h3{font-size:20px;}
.sub-contents .contents-title .route{font-size:12px;}
.sub-contents .contents-title .route li + li:before{margin:0 4px 0 2px}

.sub-top{height:100px; background-size:cover !important;}
.sub-top h2{font-size:26px;}
.sub-top p{font-size:13px;}

.footer-info .info-addr .tel span{display:block;}
.footer-info .info-addr .tel span + span{margin-left:0;}
.footer-info .info-addr .tel span + span:before{display:none;}

.quickMenu{width:50px;bottom:10px;}
.quickMenu .go-top{width:50px; height:50px; font-size:13px; border-radius:25px; padding-top:28px; box-sizing:border-box;line-height:1em;}
.quickMenu .go-top:after{position:absolute;left:50%;top:15px; margin-left:-5px;}

}

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

.top-logo{padding:10px 0;}
.top-logo img{height:40px;}
.top-contents-m a{width:30px;}

}