/* header */
#header{border-bottom: 1px solid #ddd;position: sticky; top: 0;z-index: 3;}
#header .mMenu_btn{display: none;}
.header { background-color: #fff; color: #000; }
.header .header-util{background: #edf0f5; color: #333;}
.header .header-util .util-wrap{ display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 1610px; height: 1.6rem; margin: 0 auto;}
.header .header-util .util-wrap .util-user a{color: #000;}
.header .header-util .util-wrap .util-user a ~ a{ margin-left: 0.7rem;}
.header-wrap { flex-shrink: 0; width: 100%; max-width: 1610px; height: 4.75rem;margin: 0 auto; display: flex; justify-content: space-between; align-items: center;}

.logo-header a {font-size: 1.6rem; font-weight: 700;}
.logo-header a em{color: #ff1111;}

#gnb {flex-shrink: 0; width: 100%; max-width: 50rem; height: 100%;}
#gnb > ul {display: flex;height: 100%;}
#gnb > ul > li{flex: 1; height: 100%;}

.depth01 { position: relative; height: 100%; }
.depth01-link { display: block; height: 100%; font-size: 0.9rem; font-weight: 600; display: flex; align-items: center;  justify-content: center;}
.depth01-link span{ display: flex; align-items: center; height: 100%;}



.depth02-container { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #d93434; color: #fff; z-index: 10; border-radius: 0 0 1rem 1rem; word-break: keep-all; text-align: center;}
.depth02-list { padding-bottom: 0.5rem; }
.depth02-list .depth02 ~ .depth02{border-top: 1px solid #eb4f4f;}
.depth02-link { display: flex; align-items: center; justify-content: center; padding: 0.5rem 0.25rem; }


/* 메뉴 hover 시 보이도록 */
.depth01.on .depth02-container { display: block; }

/* 메뉴 hover 효과 */
.header .on .depth01-link,
.header .depth01-link:hover,
.header .depth01-link:focus{background: #c11212; color: #fff; font-weight: 700;}
.header .depth02-link:hover,
.header .depth02-link:focus{ text-decoration: underline;}


/* subVisual */
.subVisual{height: 8.7rem; background: url(../images/sub/sub_visual.png) no-repeat center center / cover;} 
.subVisual .inner{ position: relative; display: flex; align-items: center;  width: 100%; max-width: 1610px; height: 100%; margin: 0 auto; font-size: 1.5rem;}
.subVisual .inner::after{content: ''; position: absolute; right: 0; bottom: -1rem; display: block; width: 32.9rem; height: 9.3rem; background: url(../images/sub/sub_visual_img.png) no-repeat center center ; z-index: 2;} 
.subVisual .inner .txtWrap em{font-weight: 700;}
.subVisual .inner .txtWrap span{font-size: 2rem; font-weight: 700;}
.subVisual .inner .txtWrap span em{color: #ff1111;}

/* gnb */
/* .gnb{text-align: center; background: #f99595; color: #fff; font-size: 0.9rem;}
.gnb ul{ width: 100%; max-width: 1400px; margin: 0 auto; display: flex; justify-content: center;} 
.gnb ul li a{ display: flex; align-items: center; justify-content: center; padding: 1.5rem 2rem 1rem; position: relative;} */

/* gnb : active */
/* .gnb ul li a:hover,
.gnb ul li a:focus{font-weight: 700;}
.gnb ul li.current a{color: #000; background: #fff; }
.gnb ul li.current a::before{content: ''; display: block; position: absolute; left: 2rem; right: 2rem; bottom: 0; height: 3px; background: #ff6868;} */

/* gnb */
.gnb-nav{position:sticky;top:0;width:100%;max-width:100%;padding:0;height:78px;transition:.5s;z-index: 1;font-size: 0.9rem;}
.gnb-nav>ul{display:flex;position:absolute;top:0;left:0;width:100%;justify-content:center;align-items:center;height:100%;    background: #ff5252;backdrop-filter:blur(15px);transition:.5s border-radius;}
.gnb-nav .depth02{height:100%;}
.gnb-nav .depth02-link{display:flex;justify-content:center;align-items:center;position:relative;    padding: 1.5rem 2rem 1rem;height:100%;color:rgba(255, 255, 255, .7);font-weight:500;text-align:center;}
.gnb-nav .depth02-link:hover,
.gnb-nav .depth02-link.on{    color: #000;background: #fff;}
.gnb-nav .depth02-link.on:before{    content: ''; display: block; position: absolute; left: 2rem; right: 2rem; bottom: 0; height: 3px; background: #ff5252;}
.gnb-nav.scrolling{width:100%;}
.gnb-nav.scrolling>ul{border-radius:0;}
@media(max-width:1480px) {
.gnb-nav{}
.gnb-nav.scrolling{margin-left:0;margin-right:0;}
.gnb-nav>ul{}
}

@media(max-width:1280px) {
.gnb-nav{height:48px;}
.gnb-nav .depth02-link{font-size:16px;}
}
@media(min-width:768px) {
.gnb-toggle{display:none}
}
@media(max-width:767px) {
.gnb-toggle{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 20px;width:100%;height:100%;    background: #ff5252;backdrop-filter:blur(15px);transition:.5s border-radius;color:#fff;font-weight:700;}
.gnb-toggle:after{content:"\ea4e";font-family:"remixicon";flex-shrink:0;}
.gnb-toggle.on:after{content:"\ea78"}
.gnb-nav.scrolling .gnb-toggle{border-radius:0;}
.gnb-toggle.on+ul{display:flex;}
.gnb-nav>ul{display:none;flex-direction:column;align-items:stretch;row-gap:5px;position:absolute;top:calc(100% + 1px);left:0;padding:15px 20px;width:100%;height:auto;background-color: #edf0f5;}
.gnb-nav .depth02{height:auto;}
.gnb-nav .depth02-link{justify-content:flex-start;padding:0;text-align:left;color: #000;}
.gnb-nav .depth02-link.on{font-weight:700;color: #ff5252;background:none;}
.gnb-nav .depth02-link.on:before{display:none;}
.gnb-nav .depth02-link:hover,
.gnb-nav .depth02-link.on{color: #ff5252;background: none;}
}

/* sub tit&nav */
#main-content .nav-wrap{display: flex; justify-content: space-between; align-items: flex-end; width: 100%; max-width: 1610px; margin: 0 auto; border-bottom: 1px solid #cfcfcf; margin-top: 2.5rem; padding-bottom: 1.3rem;}
#main-content .nav-wrap .tit{font-size: 1.5rem; font-weight: 700; line-height: 1;}
#main-content .nav-wrap .nav{display: flex; font-weight: 500;}
#main-content .nav-wrap .nav li ~ li::before{content: '\ea6e'; font-family: 'remixicon'; margin: 0 0.7rem;}

/* subLayout */
#main-content .wrap{ width: 100%; max-width: 1610px; margin: 0 auto; padding: 3rem 0 7.5rem; }



/* footer */
footer{background: #f8f8f8; border-top: 1px solid #dddddd;}
footer .inner{ position: relative; width: 100%; max-width: 1610px; margin: 0 auto; padding: 2rem 0 3.85rem;}
footer .inner .logo{font-size: 1.1rem; font-weight: 600; }
footer .inner .logo em{color: #ff1111;}
footer .inner ul:not(.shortcut-links ul){display: flex; }
footer .inner .info{margin: 1.75rem 0; font-size: 0.9rem; }
footer .inner .info li ~ li{margin-left: 2.5rem;}
footer .inner .info li span{margin-right: 1.5rem; font-weight: 600;}
footer .inner .footer-link{display: flex; justify-content: space-between; border-top: 1px solid #ddd; padding-top: 1.2rem;}
footer .inner .footer-link ul li ~ li{margin-left: 1.85rem;}
footer .inner .footer-link ul li a strong{color: #ff1111; font-weight: 600;}
footer .inner .footer-link .copy{color: #555; font-weight: 500;}
  

.link-wrap{position: absolute; right: 0; top: 2rem; width: 13.4rem; border-bottom: 2px solid #000;}
.shortcut-btn { display: block; width: 100%; text-align: left; cursor: pointer; }
.shortcut-btn::after{content: '\ea78'; font-family: 'remixicon'; position: absolute; right: 0; }
.shortcut-btn.on::after{content: '\ea4e';}
 
  
.shortcut-links { display: none; position: absolute; bottom: 100%; left: 0; right: 0; height: 10rem; background: rgba(0, 0, 0, 0.7); border-radius: 1rem 1rem 0 0; padding: 1rem;}
.shortcut-links ul{ height: 100%; overflow-y: auto; padding-right: 0.5rem; }
.shortcut-links li ~ li { border-top: 2px dotted #ddd;} 
.shortcut-links a { display: block; color: #fff; padding: 0.3rem 0; }
  
.shortcut-links a:hover {text-decoration: underline;}

/* 모바일 메뉴 */

#header .mMenu_btn::before{content: "\ef34"; font-family: 'remixicon'; font-size: 1.5rem;}
#header .mMenu_btn.on::before{content: "\f4c8";}

.menuM.on{display: block;}
.menuM{display: none; position: fixed; right: 0; top: 6.4rem; width: 100%; max-width: 20rem; bottom: 0; background: #fff; z-index: 99999;}
.menuM::before{content: '';display: block;position: absolute;top: 0;bottom: 0;right: 0;width: 100vw;background: rgba(0, 0, 0, 0.5); z-index: -1;}
.menuM #gnb{position: relative;z-index: 1;background: #fff;}
.menuM #gnb > ul{display: block;height: auto;}
.menuM #gnb > ul .depth01 ~ .depth01{border-top: 1px solid #ddd;}
.menuM .depth01-link{ position: relative; display: block; padding: 1rem;}
.menuM .depth01-link::after{content: "\ea12"; font-family: 'remixicon'; font-size: 1rem; position: absolute; right: 1rem; top: 1rem;}
.menuM .on .depth01-link::after{content: "\f1af";}
.menuM .depth02-container{position: unset; background: #f6f6f6; color: #333; text-align: left; border-radius: 0;}
.menuM .depth02-list{padding-bottom: 0;}
.menuM .depth02-list .depth02 ~ .depth02{border-color: #ddd;}
.menuM .depth02-link{display: block; padding: 0.5rem 1rem;}



@media screen and (max-width: 1660px){
	.header .header-util .util-wrap{padding: 0 0.5rem;}
	.header-wrap{padding: 0 0.5rem;}
	.subVisual .inner{padding: 0 0.5rem;}
	#main-content{padding: 0 0.5rem;}
	#footer footer{padding: 0 0.5rem;}
}

@media screen and (max-width: 1440px){
	html {font-size: 19px;}

	/* 서브비주얼 */
	/* .subVisual{height: 5.7rem;} */
	.subVisual .inner{font-size: 1.2rem;}
	.subVisual .inner::after{width: 20rem; background-size: contain; background-position: center bottom;}
	.subVisual .inner .txtWrap span{font-size: 1.6rem;}

}

@media screen and (max-width: 1240px){
	#header {position: relative;}
	#header .mMenu_btn{display: block;}
	.header #gnb{display: none;}
}


@media screen and (max-width: 1024px){
	html {font-size: 18px;}

	/* 서브비주얼 */
	.subVisual .inner::after{display: none;}

	/* 푸터 */
	footer .inner ul:not(.shortcut-links ul){flex-wrap: wrap; gap: 1rem;}
	footer .inner .info li ~ li{margin-left: 0;}
	footer .inner .footer-link{display: block;}
	footer .inner .footer-link ul li ~ li{margin-left: 0;}
	footer .inner .footer-link .copy{margin-top: 1rem;}
}
@media screen and (max-width: 768px){
	/* 메뉴 */
	.logo-header a{font-size: 1.3rem;}
	.header-wrap{height: 3.75rem;}
	.menuM{top: 5.4rem;}
	
	/* 서브비주얼 */
	.subVisual .inner{justify-content: center; text-align: center;}
	.subVisual .inner .txtWrap span{display: block;}

	/* 서브 타이틀 및 네비게이션 */
	#main-content .nav-wrap .tit{font-size: 1.2rem;}

	/* 레이아웃 */
	#main-content .wrap{padding: 1rem 0 4.5rem;}

	/* gnb */
	.gnb{border-bottom: 1px solid #ddd;}
	.gnb ul { flex-direction: column; background: #f99595; width: 100%; overflow: hidden; transition: max-height 0.3s ease-in-out; }
    .gnb ul li { display: none;}
    .gnb ul li.current { display: block; }
    .gnb ul.show li { display: block; }
	.gnb ul li a{padding: 1rem ; justify-content: flex-start; position: relative;}
	.gnb ul li.current a::before{display: none;}
	.gnb ul li.current a::after{content: "\ea4d"; font-family: 'remixicon'; position: absolute; right: 1rem; top: 0.8rem; font-size: 1.2rem;}
	.gnb ul.show li.current a::after{content: "\ea77";}

	
	/* 서브 타이틀 및 네비게이션 */
	/* #main-content .nav-wrap{flex-direction: column; justify-content: center; align-items: center; margin-top: 1.5rem; } */
	#main-content .nav-wrap{display: none;}
	#main-content .nav-wrap .tit{margin-bottom: 0.5rem;}
	
	
}

@media screen and (max-width: 500px){
	/* 헤더 */
	.header .header-util .util-wrap{font-size: 0.6rem;}

	/* 푸터 */
	.link-wrap{position: relative; left: 0; width: auto; top: 0; margin-top: 1rem;}
	footer .inner{padding: 2rem 0.7rem 3rem;}
	footer .inner ul:not(.shortcut-links ul){margin: 1rem 0;}
	footer .inner .info{font-size: 0.8rem;}

}