/* ============== header ============== */

#header{position: fixed; top: 0; left: 0; width: 100%; z-index: 999;}


#header .header_wrap{display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 0;}
#header .header_wrap .logo .h_logo{display: block;}
#header .header_wrap .logo .s_logo{display: none;}


#header .header_wrap .nav{display: flex; justify-content: space-between;}
#header .header_wrap .nav > li{position: relative; width: calc(100% / 7); /* height: 5rem; */ display: table;}
#header .header_wrap .nav > li > a{display: table-cell; vertical-align: middle; color: #fff;}

#header .header_wrap .nav .submenu{display: none; position: absolute; width: 15rem; left: 50%; transform: translateX(-50%); top: 3.25rem; font-size: 0.65em; padding: 1rem 0; z-index: 99;}
#header .header_wrap .nav .submenu > li > a{display: block; padding: 0.65rem 10px; font-size: 1rem;}

#header .header_wrap .nav > li:hover .submenu{background: #fff; border-top: 2px solid var(--pointcolor); box-shadow: 0 0 5px rgb(34 37 38 / 15%);}
#header .header_wrap .nav > li .submenu > li:hover > a{font-weight: 600; text-decoration: underline; text-underline-offset : 5px; color: var(--pointcolor);}

#header .header_wrap .login{width: 10rem; justify-content: center;}

/* active */
#header.active{background: #fff; box-shadow: 0 0 10px rgb(34 37 38 / 15%);}
#header.active .header_wrap .logo .h_logo{display: none;}
#header.active .header_wrap .logo .s_logo{display: block;}
#header.active .header_wrap .nav > li > a{color: #000;}
#header.active .header_wrap .login > li > a{color: #000;}

/* subPage header */
#header.sub{}
#header.sub .header_wrap .logo .h_logo{display: none;}
#header.sub .header_wrap .logo .s_logo{display: block;}
#header.sub .header_wrap .nav > li > a{color: #000;}
#header.sub .header_wrap .nav > li:hover .submenu{background: rgba(255,255,255,0.9); border-top: 2px solid var(--pointcolor); box-shadow: 0 0 5px rgb(34 37 38 / 15%);}
#header.sub .header_wrap .login li > a{color: #000;}


@media (max-width: 1240px){
	#header .header_wrap{align-items: center;}

	#header .header_wrap .menu_btn{transform: scaleX(-1);}
	#header .header_wrap .menu_btn > a > span{width: 80%; color: #fff;}
	#header.active .header_wrap .menu_btn > a > span{color: var(--titcolor)}
	#header.sub .header_wrap .menu_btn > a > span{color: var(--titcolor)}
	#header .header_wrap .menu_btn > a .material-symbols-outlined{font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48}

	#header .header_wrap .login{display: none;}
}

/* ==================== Sitemap ==================== */

.sitemap{font-size:14px; left:-100%; position: fixed;top: 0; width: 100%; overflow: hidden; bottom: 0; /* background-color: #fff; */ z-index: 999; transition:left 0.5s}
.sitemap.on{left:0}
.sitemap .m_bg{width: 100%; position: absolute; top:0; left: 0; height: 100vh; background: rgba(0,0,0,0.8);}
.sitemap .m_wrap{width: 90%; height: 100%; background-color: #fff; position: relative; z-index: 10;}

.sitemap .m_login{position: relative; width: 100%; margin: 0 auto; justify-content: space-evenly; font-size: 14px !important; padding: 1rem 0;}
.sitemap .m_login:after{content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #e8e8e8;}
.sitemap .m_login > li{width: 40%; background-color: #f4f4f4; text-align: center; padding: .5rem 0;}

.sitemap .st_head{background: var(--pointcolor);padding: 1em 2em;display: flex;justify-content: space-between;border-bottom: 1px solid rgba(255,255,255,0.2);align-items: center;}
.sitemap .st_head .logo{width:40%}
.sitemap .st_head .close{height: 20px;}
.sitemap .st_head .close span.material-symbols-outlined{font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48}

.sitemap .st_menu{width: 50%; border-right: 1px solid #e8e8e8; height: 100%; padding: 2em; padding-right: 0; position: relative;}
.sitemap .st_menu > li {padding:0.5em 0}
.sitemap .st_menu > li > a{display: inline-block}
.sitemap .st_menu .submenu{position: absolute; width: 100%; right: -100%; top: 0; padding: 3em 2em; padding-right: 0; display: none;}
.sitemap .st_menu .submenu > li {padding:0.75em 0}
.sitemap .st_menu .submenu > li > a {display: block}

/* active 효과 */
.sitemap .st_menu > li.active > a{box-shadow: inset 0 -0.65em 0 rgba(var(--pointcolor-rgb), 0.2);font-weight: 500;color: var(--pointcolor);}
.sitemap .st_menu > li:hover > a, .sitemap .st_menu .submenu > li:hover > a {font-weight: 600;color: var(--pointcolor); text-decoration: underline; text-underline-offset : 5px;}





/* ============== footer ============== */
#footer{background: #222; width: 100%; padding: 2.5rem 2rem; position: relative; bottom: 0; left: 0; z-index: 999;}
#footer p{color: #fdf4f4;}



/* ============== quick ============== */
.quick{position: fixed; z-index: 9999; right: 1rem; bottom: 5rem; cursor: pointer;}
.quick .top_btn{width: 5rem; height: 5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center;}

@media (max-width: 1024px){
	.quick .top_btn img{width: 50%;}
}