/* ----- Header start ----- */
#header {position: fixed; width: 100%; z-index: 9999; /* transition: all 0.5s; */}
#header.active{background: rgba(255,255,255,0.8);}

#header .container{display: flex; justify-content: space-between; align-items: center; width: 100%; margin: auto;}

#header .menuwrap{width: 70%;}
#header .menu{justify-content: space-between; width: 100%; margin: auto;}
#header .menu > li{width: auto;text-align: center;position: relative;display: table;}

#header .menu > li > a{height: 80px;display: table-cell;vertical-align: middle;word-break: keep-all;}
/* #header.active .menu > li > a{color: #eee;} */
#header .menu > li > a.point{color: var(--point-color2) ;font-weight: bold }

#header .submenu{display: none; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); width: 13em; padding: 1.25em 1em ; height: auto; font-size:1rem; transition: background 0.3s ease;}

#header .submenu > li > a{display: block;padding:.55em 0;text-align: left; color: #acacac;}
#header .submenu > li > a:hover{font-weight: 600; color: #333;}

#header .aside{flex-shrink: 0}
#header .aside a{width: 40px;height: 40px;margin-left:10px;border-radius: 50%;display: inline-block;transition:background 0.3s}
#header .join_icon{background: var(--point-color2) url(/img/main/join.png) no-repeat center center / 24px;}
#header .login_icon{background: var(--point-color2) url(/img/main/login.png) no-repeat center center / 24px}
#header .join_icon:hover,#header .login_icon:hover{background-color: var(--point-color)}

#header .st_tel{display: none}

#header .menu .category:hover > a{font-weight: 600;}
#header.active .menu > li > a.point, #header:hover .menu > li > a.point{color: var(--point-color2);font-weight: bold  }/* IE때문에 삽입 */

#header .submenu:after{content:''; position: absolute; transition:all 0.6s ease; width:0%; left:50%; transform:translateX(-50%);}
#header .menu li:hover .submenu{background: rgba(255, 255, 255, 0.8); box-shadow: 0 0 5px rgb(0 0 0 / 5%);}
#header .menu li:hover .submenu:after{content:''; position:absolute; top:0; left:50%; background: var(--titcolor); height:3px; width:100%;}

#header .menu-btn{display: none;}

.sitemap {z-index: 9999; display: none;}
.sitemap .inner .st_logo{height: 80px; width: 100%; text-align: center; vertical-align: middle; align-items: center; display: flex;  padding: 2rem;}

@media (max-width: 1440px){
	#header .menu{width: 95%;}
}

@media (max-width: 1024px){
	#header .container{width: 90%; padding: 1em 0;}
	#header .menuwrap{display: none;}
	
	#header .menu-btn {display: block;width: 30px;height: 20px;top:0; bottom:0; margin:auto; right: 5%; position: absolute; z-index: 9998;cursor: pointer;-webkit-transition: top 300ms;transition: top 300ms;}
    #header .menu-btn span {opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";right: 0;display: block;width: 100%;height: 1px;border-radius: 10px;background-color: #000;
	position: absolute;-webkit-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: .4s ease-in-out;transition: .4s ease-in-out;}
	
	#header .menu-btn .btn_line01 {top: 0;}
    #header .menu-btn .btn_line02 {top: 9px;}
    #header .menu-btn .btn_line03 {bottom: 0;}

	.sitemap{width: 100%; max-width: 100%; position: fixed; top: 0;	right: 0; height: 100%; z-index: 10000;}
	.sitemap .inner{display: block;}
	.sitemap .inner .st_top{position: relative; padding: 1em 2em}

	.sitemap .st_close{display: block;width: 25px;height: 15px;top:0; bottom:0; margin:auto; right: 15px;position: absolute; z-index: 9999;cursor: pointer;-webkit-transition: top 300ms;transition: top 300ms;}
	.sitemap .st_close span{opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";right: 0;display: block;width: 100%;height: 1px;border-radius: 10px;background-color: #000;
	position: absolute;-webkit-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: .4s ease-in-out;transition: .4s ease-in-out;}
    .sitemap .st_close span:nth-child(1) {top: 9px;-webkit-transform: rotate(135deg);transform: rotate(135deg);}
    .sitemap .st_close span:nth-child(2) {top: 9px;-webkit-transform: rotate(-135deg);transform: rotate(-135deg);}
	.sitemap .st_close .btn_line01 {top: 0;}
    .sitemap .st_close .btn_line02 {top: 7px;}
	
	.depth01 .plus_icon{width: 20px; height: 2px;background: #818181;margin-left: auto;margin-right: 1.5em;position: absolute;top: 50%;right: 0;}
	.depth01 .plus_icon::after{position: absolute; left: 50%; transform: translateX(-50%) rotate(-90deg); content: '';	width: 95%;	height: 2px; background: #818181; transition: 0.35s ease all;}

	.sitemap .inner .site_menu .depth01{padding: 15px 20px; display: block; font-weight: 500; position: relative;	top: 0;	left: 0; color: #000;border-bottom: 1px solid #dcdcdc;}
	.sitemap .inner .site_menu .depth01.on{color: #000; font-weight: 600;/* background: #e5f3fb; */}
	.sitemap .inner .site_menu .depth01.on .plus_icon::after{transform: translateX(-50%); background: #000; width: 100%;}
	.sitemap .inner .site_menu .submenu{display: none;}
	.sitemap .inner .site_menu .submenu li{background: #fff; padding-left: 30px;}
	.sitemap .inner .site_menu .submenu li .depth02{padding: 15px 0;	display: block; font-weight: 400; position: relative; top: 0; left: 0; font-size: 14px; color: #000!important;}
	.sitemap .inner .site_menu .submenu li .depth02::before{content: '';	display: block;	position: absolute;	bottom: 0; width: 100%;	height: 1px; background: #f6f5f3; left: -2%;}
}


/* ----- Footer start ----- */
#footer{position: relative; z-index: 9999;}

#footer .txtbox{width: 80%;}
#footer .txtbox span{letter-spacing: 0.06em;}

#footer .btnlist{width: 20%;}
#footer .btnlist li a{width: 14em; border-radius: 2em; padding: .65em 0; display: flex; align-items: center; justify-content: center; margin-left: auto; transition: all .3s;}
#footer .btnlist li:hover a{box-shadow: 0 0 0 3px #fff;}
#footer .btnlist li a img{margin-left: .5em; transition: all 0.3s;}
#footer .btnlist li:hover a img{transform: translateX(0.3em);}

@media (max-width: 990px){
	#footer .txtbox{width: 100%; text-align: center;}
	#footer .txtbox .f_logo > img{margin: auto;}
	#footer .txtbox .txt{margin-bottom: 3em;}

	#footer .btnlist{width: 100%; margin-top: 4em;}
	#footer .btnlist li a{width: 18em; margin-right: auto;}
	#footer .btnlist li a img{margin-left: .7em;}
	#footer .btnlist li:hover a img{transform: translateX(0.5em);}
}

@media (max-width: 500px){	
	#footer .txtbox .f_logo > img{width: 25%;}
}


/* ----- Quick start ----- */
#Quick{position: fixed; top:50%; transform: translateY(-50%); right: 10px; text-align: center; z-index: 10000;}
#Quick .q_wrap{transform:translate3d(0, 0, 0); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; display: flex; flex-direction: column; align-items: flex-end;}

#Quick .q_wrap li .q_list{margin-bottom:10px; color: #fff; background: var(--titcolor); width: 3.5rem; height: 3.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center;
-webkit-transition: all 0.3s ease; transition: all 0.3s ease; box-shadow: -3px 2px 2em rgb(0 0 0 / 10%);}
#Quick .q_wrap li .q_list > span{display: none;}
#Quick .q_wrap li:hover .q_list{width: 9.3em; border-radius: 2em; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; padding: 0 1.25em;}
/* #Quick .q_wrap li:first-child:hover .q_list{width: 8.5em;} */
#Quick .q_wrap li:nth-child(2):hover .q_list{width: 10em;}
#Quick .q_wrap li:hover .q_list > span{display: inline-block; margin-right: 1rem; overflow: hidden; animation: effect_q 0.8s ease-in-out; margin-right: auto;}

#Quick .q_top{text-align: center; color: #fff; width: 3.5rem; height: 3.5rem; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; -webkit-transition: all 0.3s ease;
transition: all 0.3s ease; box-shadow: 0 0 15px rgb(240 231 214 / 40%); margin-left: auto;}
#Quick .click_btn{display: none;}

@media (max-width: 1240px){
	#Quick li img{width: 35%;}
	#Quick li:hover img{width: 20%;}
}

@media (min-width: 990px){
    #Quick li img{opacity: 1!important;}
}

@media (max-width: 990px){
	#Quick .q_wrap{width: 4.5rem; height: 4.5rem; position: absolute; bottom:0; left: 0; z-index: -1;}
	#Quick .q_wrap{overflow: visible;}
    #Quick .q_wrap li {opacity: 0; padding:0 ;position: absolute; top: 0; right: 5px; z-index: 0; display: block; text-decoration: none; color: hsl(0, 0%, 100%);	width: 4.5rem; height: 4.5rem; 
					   transition: transform .4s .3s ease,	opacity .2s .3s ease; border-radius: 50%;}

	#Quick .q_wrap li .q_list{display: flex; align-items: center; justify-content: center; width: auto; height:100%; background:transparent; border-radius: 0; transition: none; box-shadow: none; margin-bottom: 0;}
    #Quick .q_wrap li:hover .q_list{width: auto; border-radius: 0; -webkit-transition: none; transition: none; padding: 0;}
    #Quick .q_wrap li:first-child:hover .q_list{width: auto;}
    #Quick .q_wrap li:nth-child(3):hover .q_list{width: auto;}
    	
    	
    #Quick .q_wrap li img{align-self: center;justify-self: center;}
    #Quick .q_wrap.active li:nth-child(4) img{width: 30%;}
    #Quick .q_wrap li:hover .q_list > span{display: none;}
    
    #Quick .q_wrap:after{border-radius: 150px; display: block; content: ""; clear: both; width: 100%; height:100%; background-color: var(--titcolor); position: absolute; top: 0; right: 0; z-index: -1; 
    				  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform .3s ease, width .2s .3s ease;}
    #Quick .q_wrap:before{opacity:0; display: block; content: ""; clear: both; width: 0px; height: 0px; border-left: 15px solid var(--titcolor); border-top: 8px solid transparent; border-bottom: 8px solid transparent; position:absolute;
    				   top:50%; left:0; transform: translateY(-50%); transition: opacity .3s .3s ease;}
    
    #Quick .q_wrap.active:after{transform: translate3d(-60px,0,0);width:300px;}
    #Quick .q_wrap.active:before{opacity: 1; left: -17px;}
    
    #Quick .q_wrap.active li{transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);opacity: 1; margin-top: 0;}
    #Quick .q_wrap.active li:nth-child(1){transform: translate3d(-60px,0,0);}
    #Quick .q_wrap.active li:nth-child(2){transform: translate3d(-120px,0,0);}
    #Quick .q_wrap.active li:nth-child(3){transform: translate3d(-180px,0,0);}
    #Quick .q_wrap.active li:nth-child(4){transform: translate3d(-240px,0,0);}
    #Quick .q_wrap.active li:nth-child(5){transform: translate3d(-300px,0,0);}
    
    #Quick .q_wrap.active li .q_list{position: relative; top:0; left:0;}
    #Quick li:hover span {display: none;}
    #Quick li:hover img{width: 35%;}
    #Quick .q_wrap.active li .q_list:after{position: absolute; top:50%; left: 5.2rem; display: block; content: ""; clear: both; width: 1px; height: 40%; background-color: rgba(255,255,255,0.3); transform: translateY(-50%);}
    #Quick .q_wrap.active li:first-child .q_list:after{display: none;}
    
    #Quick {bottom: 40px;transform: translateY(0);top: auto;right: 10px;}
    #Quick .click_btn{width: 4.5rem; height: 4.5rem; border-radius: 50%; display: flex;align-items: center; text-align: center; justify-content: center; margin-top: 8px;}
    #Quick .click_btn span{font-size: 20px; margin-right: 0; color:#fff; margin-top: 0;}
    #Quick .click_btn.active span{transform: rotate(45deg);}
    #Quick a.q_top{width:4.5rem; height:4.5rem; border-radius: 50%; display: flex; align-items: center; margin-bottom:10px; right: 0; position: relative;} 
    #Quick a.q_top img{display: none;}
    #Quick .q_wrap li:after{display: none;} */
}