@charset "utf-8";

/* 스크롤 디자인 */
html {
  scrollbar-width: thin;
  scrollbar-color: #999 #f1f1f1;
}

::-webkit-scrollbar {
  width: 1.5rem;
  height: 1.5rem;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #999;
  border-radius: 8px;
}


#top > .inner { padding: .8rem 0.4rem 1.8rem; }


/* 의원 로고 디자인 */
.header-brand .logo { font-size:1.8rem; }
.header-brand .logo div { display:flex; flex-direction: column; line-height: 1; }
.header-brand .logo div span { font-size:2.8rem; }



/* 메뉴 */
#pc-nav { position:relative; background:#fff;/* border-bottom:1px solid #CDD1D5;*/ z-index:1; }
#pc-nav::after { position:absolute; content:''; width:100%; height:.1rem; background:#CDD1D5; }

#pc-nav .depth2,
#pc-nav .depth3 { flex-direction:column; overflow:hidden; transition:.4s; }

#pc-nav .depth2 { position:absolute; top:calc(100% + .1rem); width:100%; height:0; border-right:.1rem solid #CDD1D5; }
#pc-nav ul li:first-child .depth2 { border-left:.1rem solid #CDD1D5; }

#pc-nav .inner { position:relative; }

#pc-nav .inner > ul > li > a.on ~ .depth2 { background:#fafafa; }
#pc-nav .depth2 > li { padding:.4rem .8rem; }
#pc-nav .depth2 > li > a { padding:.2rem .6rem; }

#pc-nav .depth3 { display:none; }

#pc-nav ul.gnb-menu { display:flex; width: 70%; position:absolute; top:-7rem; right:0; }
#pc-nav ul.gnb-menu > li { position:relative; flex:0 0 calc(100% / 6); z-index:3; }
#pc-nav ul.gnb-menu > li > a { position:relative; display:flex; justify-content:center; align-items:center; width:100%; height:7rem; font-size:1.9rem; font-weight:700; color:#464c53; letter-spacing:-1.5px; }

#pc-nav ul.gnb-menu > li > a::before { position:absolute; bottom:0; left:50%; content:''; width:0; height:.4rem; background-color:#00796B; transform:translateX(-50%); transition:.4s; }

#pc-nav ul.gnb-menu > li > a.on { color:#00796B; }
#pc-nav ul.gnb-menu > li > a.on::before { width:100%; }
#pc-nav ul.gnb-menu > li > a.on::after { transform:rotate(-180deg); }


#pc-nav .menubox { display:none; }

/*#pc-nav .menubox { position:absolute; left:50%; transform:translateX(-50%); bottom:-1px; width:calc(100vw - 1.5rem); height:0; background:#fff; border:1px solid #CDD1D5; border-left:none; border-right:none; transition:.4s; z-index:0; }
#pc-nav .menubox:before { position:absolute; content:''; width:100%; height:2px; background:#fff; top:-1px; }
#pc-nav .menubox.on:before { display:none;}*/




@media (min-width: 1280px) and (max-width: 1440px) {
	#pc-nav .gnb-main-trigger { font-size:1.8rem; }
}


@media (min-width: 1024px) and (max-width: 1279px) {
	#pc-nav .gnb-main-trigger { padding:0 .8rem; font-size:1.7rem; }
}

@media (max-width: 1023px) {
	#pc-nav { display:none; }
	#top > .inner { border-bottom:none; padding: .8rem 1.6rem .8rem; }
	
}



/* Sidebar || 사이드바, 모바일 메뉴 */
#mobile-nav .gnb-menu > li > a::after { display:none; }

#mobile-nav .logo a div { font-size:1.6rem; }
#mobile-nav .logo a div { display:flex; flex-direction: column; line-height: 1; }
#mobile-nav .logo a div span { font-size:2.4rem; }





/* bottom 숨김 */
#bottom .link-site,
#bottom .f-link,
#bottom .f-btm .f-menu { display:none; }

#bottom .f-btm { justify-content:end; }


















/* sub_layout */
/* Leftmenu */
.leftmenu { width:30rem; margin-top:4rem; }
.leftmenu nav.sub-menu { margin-top:3.2rem; }
.leftmenu nav.sub-menu ul { display:flex; flex-direction:column; }

.leftmenu nav.sub-menu .depth2 > li { margin-bottom:.8rem; }
.leftmenu nav.sub-menu .depth2 > li > a { position:relative; display:flex; justify-content:space-between; align-items:center; width:100%; min-height:5.6rem; padding:0 1.6rem; font-size:1.8rem; border-bottom:.1rem solid #CDD1D5; transition:.4s ease-in; text-align: center; }
.leftmenu nav.sub-menu .depth2 > li > a::before { position:absolute; left:0; bottom:-.1rem; content:''; width:0; height:.2rem; background:#00796B; transition:.4s ease-in; }


.leftmenu nav.sub-menu .depth2 > li > a:hover { background:#E0F2F1; }
.leftmenu nav.sub-menu .depth2 > li > a:focus { background:#B2DFDB; }
.leftmenu nav.sub-menu .depth2 > li > a:hover::before,
.leftmenu nav.sub-menu .depth2 > li > a:active::before { width:100%; }


.leftmenu nav.sub-menu .depth2 .on > a { color:#00796B; font-weight:700; }
.leftmenu nav.sub-menu .depth2 .on > a::before { width:100%; }
.leftmenu nav.sub-menu .depth2 .on .depth3 { display:block; }

/* 서브 레이아웃 */
#container.sub .flex { justify-content:space-between;  }

.svisible { padding:1.6rem; background:linear-gradient(45deg, #FFFDE7,#E0F2F1); }

.path { text-align:right; font-weight:300; }

.sub #gocontent { max-width:calc(100% - 20rem); width:100%; margin: 4rem auto; }

.sub .page-title,
.sub .sns-list { position:relative; display:flex; }

.sub .page-title { align-items: flex-end; justify-content: space-between; margin-bottom:4rem; }
.sub .page-title::after { position:absolute; left:0; bottom:0; content:''; width:100%; height:.4rem; background:url(/images/common/dg_line.png) repeat-x; opacity:.2; }
.sub .page-title h3 { font-size:4rem; font-weight:700; margin-bottom:3.2rem; }





@media (max-width: 1023px) {
	.svisible { padding:1.2rem 0; }

	.sub #gocontent { max-width:none; margin-top:2.4rem; }

	.sub .page-title { margin-bottom:3.2rem; }
	.sub .page-title h3 { font-size:3.2rem; margin-bottom:2.4rem; }
}