@charset "utf-8";

.inner{width: 100%;max-width: 110rem;margin: 0 auto;position: relative;}

#header{width:100%;height: 38rem;background:url(../img/layout/sub_vis_re.png)no-repeat bottom center;}
#header .h_top{padding: 6rem 0;width: 100%;display: flex;align-items: center;justify-content: space-between;}
#header .h_top .title{font-size: 3.2rem; font-family: 'SebangGothic'; font-weight: 600; line-height: 1.25; color: #00bab8;}
#header .h_top .title:after{content: ''; display: inline-block;  width: 2rem; height: 2rem; vertical-align: 0.5rem; margin-left: 0.8rem; background: url(../img/main/titleicon.svg) no-repeat top center / 2rem;}
#header .h_top .khnalink{width: 100%; max-width: 18rem; color:#fff; background:#ff6588; border-radius: 3rem;  transition:all 0.3s;}
#header .h_top .khnalink a{width:100%; display:block; font-size: 1.4rem; padding: 1.1rem 2rem;}
#header .h_top .khnalink a span{position: relative; display: block; padding-left: 2rem;}
#header .h_top .khnalink a span:before{content:''; display:block; width: 1.3rem; height: 1.3rem; position: absolute; top:0; left:0; background: url(../img/layout/shortcut_icon.svg) no-repeat left center / 1.3rem;}
#header .h_top .khnalink:hover{background:#ff7292;}
#header .h_top .util{ display: flex; align-items: center; justify-content: flex-start; gap: 2rem;}
#header .h_top .util li a{width:100%; display:block; font-size: 1.4rem; }
#header .h_top .util li a span{position: relative; display: block; padding-left: 2rem;}
#header .h_top .util li.bookmark a span:before{content:''; display:block; width: 1.3rem; height: 1.3rem; position: absolute; top:0; left:0; background: url(../img/layout/bookmark_icon.svg) no-repeat left center / 1.3rem;}
#header .h_top .util li.sitemap a span:before{content:''; display:block; width: 1.3rem; height: 1.3rem; position: absolute; top:0; left:0; background: url(../img/layout/sitemap_icon.svg) no-repeat left center / 1.3rem;}
#header .gnb{width:100%;position: absolute; top: 14.8rem; left:0;}
#header .gnb ul{width: 100%;border-radius: 10px; border: 1px solid #eee; display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap;overflow: hidden;}
#header .gnb ul li{width:calc(100% / 6);font-family: 'SebangGothic';}
#header .gnb ul li + li{border-left:1px solid #eee;}
#header .gnb ul li:nth-child(-n+6){border-bottom:1px solid #eee;}
#header .gnb ul li a{display:flex; align-items: center; justify-content: center;  background: #fff; padding: 1.8rem 0; }
#header .gnb ul li.active a{background: #00cfaa; color:#fff;}
#header .gnb ul li:hover a{background: #00cfaa; color:#fff;}

.sub_container{ width: 100%; min-height: 85rem;}
.sub_container .fflex{width: 100%; display: flex; align-items: flex-start; justify-content: flex-start; gap: 6rem;}
.sub_container .snb{width:26.5rem;margin-top: -5rem;}
.sub_container .snb .snb_title{background: linear-gradient(63deg, #00c1bf, #00cfaa); width: 100%; font-family: 'SebangGothic'; color: #fff; font-size: 2.4rem; padding: 5rem 3rem; border-radius: 10px 10px 0 0;}
.sub_container .snb .snb_menu{border-radius: 0 0 10px 10px; width: 100%; border: 1px solid #eee; padding: 2rem 3rem;}
.sub_container .snb .snb_menu .snb_depth2 > li + li{border-top: 1px solid #eee;}
.sub_container .snb .snb_menu .snb_depth2 > li > a{position:relative; display: block; font-size: 1.8rem; font-weight: 500; padding:1.5rem 0;}
.sub_container .snb .snb_menu .snb_depth2 > li > a:after{content:''; display:block; width: 0.9rem; height: 0.6rem; position: absolute; top: 50%; transform: translateY(-50%); right: 0; background: url(../img/layout/sub_naviicon.png) no-repeat center / 0.9rem;}
.sub_container .snb .snb_menu .snb_depth3{display:none; padding: 2.5rem 0;}
.sub_container .snb .snb_menu .snb_depth3 li + li{margin-top:1.5rem;}
.sub_container .snb .snb_menu .snb_depth3 li a{display: block;text-indent: -10px; padding-left: 10px;}
.sub_container .snb .snb_menu .snb_depth3 li a:before {content: ""; display: inline-block; vertical-align: 5px; width: 4px; height: 1px; margin-right: 6px; background: #000;}
.sub_container .snb .snb_menu .snb_depth3 li a span{position: relative;}
.sub_container .snb .snb_menu .snb_depth3 li a span:after{content: ""; display:block; width:0; height:1rem; background: rgba(3,187,185,0.2); position: absolute; bottom:-1px; left:-4px; transition: all 0.3s;}
.sub_container .snb .snb_menu .snb_depth2 > li.active .snb_depth3{border-top:2px solid #00bab8;}
.sub_container .snb .snb_menu .snb_depth2 > li.active > a{color:#00bab8;}
.sub_container .snb .snb_menu .snb_depth2 > li.active > a:after{ background: url(../img/layout/sub_naviicon_on.png) no-repeat center / 0.9rem;}
.sub_container .snb .snb_menu .snb_depth3 li.on a span:after{width: calc(100% + 1rem);}
.sub_container .snb .snb_menu .snb_depth3 li:hover a span:after{width: calc(100% + 1rem);}
.sub_container .sub_content{width:calc(100% - 32.5rem); padding:5.5rem 0;}
.sub_container .snb .snb_menu .snb_depth2 > li.nodepth > a:after{display:none;}
.sub_container .snb .snb_menu .snb_depth2 > li.nodepth.active{border-bottom:2px solid #00bab8;}


#footer{ background: #f5f5f5; width: 100%; padding: 5rem 0;}
#footer .fflex{ display: flex; align-items: center; justify-content: space-between;}
#footer .fnavi{font-size:1.2rem; color:#777;}
#footer .address{margin-bottom:1rem;}
#footer .address span + span{margin-left:1rem;}
#footer .flogo{width:14.7rem; height: 3.7rem; background:url(../img/layout/logo.svg) no-repeat center center / 14.7rem;}

.pagetop_w{position: fixed; bottom: 5%; right: 4rem; z-index: 50;}
.pagetop_w .top{display: block; width: 5rem; height: 5rem; border-radius: 50%; box-shadow: 5px 15px 25px rgba(0, 0, 0, 0.1); position: relative; background:#00bab8;}
.pagetop_w .top span{position:relative; display: block; font-size: 1rem; font-weight: 500; color: #fff; padding-top: 1.6rem;}
.pagetop_w .top span:before{content:''; display:block; width: 1.5rem; height: 1.3rem; position: absolute; top:-1px; left: 50%; transform: translateX(-50%); background: url(../img/layout/top_icon.svg) no-repeat center / 1.5rem;}