@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 .4rem 1.8rem; }


/* 의원 로고 디자인 */
.header-brand .logo a span { position:relative; margin-left:26px; font-size: 2.4rem; }
.header-brand .logo a span:before { position:absolute; content:''; width:1px; height:70%; background:#333; left:-10px; top:50%; transform:translateY(-50%); }



/* 메뉴 */
#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: 60%; position:absolute; top:-7rem; right:0; }
#pc-nav ul.gnb-menu > li { position:relative; flex:0 0 calc(100% / 4); z-index:3; }
#pc-nav ul.gnb-menu > li > a { position:relative; display:flex; justify-content:center; align-items:center; width:100%; height:7rem; padding:0 1.2rem 0 1.6rem; 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 { 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 .logo a span { position:relative; margin-left:16px; font-size: 1.8rem; }
#mobile-nav .logo a span:before { position:absolute; content:''; width:1px; height:70%; background:#333; left:-8px; top:50%; transform:translateY(-50%); }







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

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




/* 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.on { color:#00796B; font-weight:700; }
.leftmenu nav.sub-menu .depth2 > li > a.on::before { width:100%; }

.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% - 36rem); width:100%; margin-top:4rem; }

.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; }





/* mbr_card */
.mbr_card { width:100%; /*position: sticky; top: 20px;*/ }
.mbr_card .pic { width:100%; height: 400px; box-shadow: 20px 20px 16px 2px rgb(54 146 165 / 20%); border:1px solid #CDD1D5; border-radius:30px; overflow:hidden; }
.mbr_card .pic img { width:100%; height:100%; object-fit: cover;  }

.mbr_card .txt { position:relative; width: 100%; display:flex; flex-direction:column; margin: 0 0 0 50px; justify-content: space-between; }
.mbr_card .txt .card { position: absolute; top: -40px; right: 20px; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: flex-end; font-size:1.7rem; padding: 8px 40px; border-radius:10px 10px 30px ; background:linear-gradient(45deg, #1983B5, #35cb9c); color: #fff; font-weight: 200; line-height:1.3; }
.mbr_card .txt .card span { font-size:2.4rem; font-weight: 400; }

.mbr_card .txt ul { display:none;  margin-top:30px;}
.mbr_card .txt ul li { display:flex; align-items:flex-start; padding:.6rem; border-bottom: .1rem solid #D9D9D9; }
.mbr_card .txt ul li i { flex: 0 0 100px; color:#888; padding-left: 12px; }
.mbr_card .txt ul li span { flex: 1; min-width: 0; word-break: break-word; }
.mbr_card .txt ul li span em { font-size:.9em; font-weight: 100; margin-left: 10px; color: #888; word-break: keep-all;   }


@media (min-width:1025px) and (max-width:1280px){
	.leftmenu{ width:24rem; }
	.mbr_card .pic { height:350px; }
}



@media (max-width: 1024px){
	#container.sub .flex { flex-wrap: wrap; }
	.sub #gocontent { max-width:100%; }
	.sub .page-title h3 { font-size: 3rem; }
	
	
/*	.leftmenu nav.sub-menu { display:none; }*/
	.leftmenu { width:100%; }
	.leftmenu nav.sub-menu ul { flex-direction: unset; }
	.leftmenu nav.sub-menu li { width:100%; }
	.leftmenu nav.sub-menu .depth2 > li > a { justify-content: center; border: .1rem solid #CDD1D5; border-left: none; font-size: 1.4rem; }
	.leftmenu nav.sub-menu .depth2 > li:nth-child(odd) > a { border-left: .1rem solid #CDD1D5; }

	
	.mbr_card { display:flex; justify-content: space-between; }
	.mbr_card .pic { max-width:30rem; height: auto; }
	
	.mbr_card .txt .card { position:relative; align-items: flex-start; top: 0; right: auto; padding:8px 20px; }
	.mbr_card .txt ul { display:block; }
	
	
}

@media (max-width: 768px){
	.leftmenu nav.sub-menu ul { flex-wrap: wrap; }
	.leftmenu nav.sub-menu ul li { width:50%; }
	
	
	
	
	.mbr_card .pic { max-width: 20rem; box-shadow: 0px 0px 16px 2px rgb(54 146 165 / 20%); }
	.mbr_card .txt { margin-left: 20px; }
	.mbr_card .txt .card { padding:8px 12px; }
}

@media (max-width: 426px){
	.header-brand .logo a span { display:none; }
	
	.mbr_card { flex-wrap:wrap; }
	.mbr_card .pic {max-width: 100%;  }
	.mbr_card .txt { margin-left:0; margin: 20px 0 0 0; }
}