/* ============== header ============== */
#header{position: fixed; z-index: 9999; width: 100%; padding: 1rem 0;}
#header:after{content:''; display: block; position: absolute; bottom: 0; left: 0;}
#header.active{background-color: #000;}
#header .h_logo a .pc_logo{display: block;}
#header .h_logo a .m_logo {display: none;}
#header .inner_wrap{display: flex; max-width: 1800px; width: 100%; margin: auto; /* padding: 0 3.75rem; */ align-items: center; justify-content: space-between;}

#header .inner_wrap .menu_inner{width: 80%; display: flex; align-items: center; justify-content: flex-end;}
#header .inner_wrap .menu_inner .menuwrap{width: 85%;}

#header .inner_wrap .btnwrap{position: relative; display: flex; align-items: center; width: 15%; justify-content: space-between;}
/* :before{content: ''; display: block; width: 1px; height: 100%; background-color: #fff; position: absolute; left: 0; top: 50%; transform: translate(0, -50%);} */
#header .inner_wrap .btnwrap .icon-btn{width: 65%; display: flex; align-items: center;}
#header .inner_wrap .btnwrap .icon-btn > a{width: calc(100% / 3); text-align: center;}

/* 햄버거버튼 */
#header .inner_wrap .btnwrap .menu-btn {display: block; width: 35px; height: 24px; top: 0; bottom:0; right: 0; position: relative; /* z-index: 99998; */ cursor: pointer;-webkit-transition: top 300ms; transition: top 300ms;}
#header .inner_wrap .btnwrap .menu-btn span{opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; right: 0; display: block; width: 100%; height: 2px; border-radius: 10px; background-color: #fff;
position: absolute;-webkit-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: .4s ease-in-out;transition: .4s ease-in-out;}
#header .inner_wrap .btnwrap .menu-btn .btn_line01 {top: 0; width: 25px;}
#header .inner_wrap .btnwrap .menu-btn .btn_line02 {top: 11px; width: 100%;}
#header .inner_wrap .btnwrap .menu-btn .btn_line03 {bottom: 1px; width: 20px;}


#header .menu{justify-content: space-between; align-items: center; position: relative; width: 100%;}
#header .menu > li{width: calc(100% / 8); text-align: center; position: relative; display: table;}
/* #header .menu > li:hover > a{color: var(--pointcolor);} */
#header .menu > li > a{display: table-cell;vertical-align: middle;word-break: keep-all; color: #fff; font-weight: 500; transition: color 0.3s ease;}
#header .menu > li > a:hover{color: var(--pointcolor); font-weight: 600;}
#header .menu > li > a > span{display: none;}

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

#header .submenu > li > a{height: auto; display: block; padding-top: .8em; text-align: center; color: #fff;}
#header .submenu > li:first-child > a{padding-top: 0;}
#header .submenu > li > a:hover{font-weight: 500; color: var(--pointcolor);}


@media (min-width: 1921px){
	#header .inner_wrap{max-width: 100%; padding: 0 3.75rem;}
}

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

@media (max-width: 1600px){
	#header .inner_wrap .menu_inner .menuwrap{
		width: 100%;
	}
	#header .inner_wrap .btnwrap{
		width: 20%;
	}
	#header .inner_wrap .btnwrap .icon-btn{
		width: 70%
	}
	#header .inner_wrap .btnwrap .icon-btn a img{
		width: 50%;
	}
	#header .inner_wrap .btnwrap .icon-btn a.last-icon > img{
		width: 60%;
	}
}

@media (max-width: 1340px) {
    #header .h_logo a .pc_logo {
        display: none;
    }
    #header .h_logo a .m_logo {
        display: block;
    }
	#header .inner_wrap .menu_inner{
		width: 95%;
	}
}

@media (max-width: 1240px){
	#header .inner_wrap .menu_inner{
		width: 80%;
	}
	#header .inner_wrap .btnwrap{
		width: 100%;
		justify-content: flex-end;
	}
	#header .inner_wrap .btnwrap .icon-btn{
		justify-content: space-between;
		width: 12em;
		margin-right: 2rem;
	}
	#header .inner_wrap .btnwrap .icon-btn > a{
		width: auto;
	}
	#header .inner_wrap .btnwrap .icon-btn a img{
		width: auto;
	}
	#header .inner_wrap .btnwrap .icon-btn a.last-icon > img{
		width: auto;
	}
}



/* sitemap */
.sitemap{display: none; width: 100%; max-width: 100%; position: fixed; top: 0;	right: 0; height: 100vh; z-index: 10000; background-color: rgba(0, 0, 0, 0) !important; transition: opacity .8s cubic-bezier(0.23, 1, 0.320, 1);}
.sitemap .open_dim{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3) !important;}
.sitemap .inner{display: block; position: relative; width: 50%; height: 100%; margin-left: auto; margin-right: 0; background-color: rgba(20, 20, 20, 0.95); display: flex; justify-content: center; align-items: center; flex-direction: column;}
.sitemap .inner::before{content: ''; position: absolute; top: 6rem; left: 0; width: 100%; height: 1px; background-color: #6e6e6e; opacity: 0.7;}
.sitemap .inner::after{content: ''; position: absolute; top: 0; right: 9rem; width: 1px; height: 100%; background-color: #6e6e6e; opacity: 0.7;}

/* .sitemap .inner .st_logo{height: 80px; width: 100%; text-align: center; vertical-align: middle; align-items: center; display: flex;  padding: 2rem;}
.sitemap .inner .st_top{position: relative; padding: 1em 2em} */

.sitemap .inner .site_menu_wrap{position: relative;  width: 84%; height: 100%; padding: 6rem 0 3rem; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 2rem 0;}
.sitemap .inner .site_menu_wrap .site_menu{position: relative;  width: 92%; height: auto; padding: 0; overflow-x: hidden; overflow-y: auto; display: block; opacity: 1; visibility: visible;}
.sitemap .inner .site_menu_wrap .site_menu > li{position: relative; width: 100%; height: auto; margin-left: 0; margin-right: auto; border-bottom: none; overflow: hidden;}
.sitemap .inner .site_menu_wrap .site_menu > li:hover .depth01{color: var(--pointcolor); transition: color 0.3s ease;}
.sitemap .inner .site_menu_wrap .site_menu > li .depth01{position: relative; display: inline-block; width: 100%; color: #fff; font-size: 1.750rem;; padding: 1.5rem 0rem 1.2rem; opacity: 1; transform: translateY(0px); transition: transform 1s 0.8s ease, opacity 1s 0.8s ease;}
.sitemap .inner .site_menu_wrap .site_menu > li .depth01 .number{position: relative; display: inline-block; top: -1px; margin-right: 2rem;}

.sitemap .inner .site_menu_wrap .site_menu .submenu{height: auto; padding: 0 0.5rem 1.2rem 3.25rem; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 1rem 2rem; opacity: 1; transform: translateY(0px); 
transition: transform 1s 0.9s ease, opacity 1s 0.9s ease;}
.sitemap .inner .site_menu_wrap .site_menu .submenu > li > a{position: relative; display: inline-block; width: auto; color: #fff; padding-top: 4px; font-size: 1.3rem; font-weight: 400; letter-spacing: -0.02em;}
.sitemap .inner .site_menu_wrap .site_menu .submenu > li > a::after{content: ''; position: absolute; bottom: 0; left: 0; width: 100%; border-bottom: 1px solid #fff; -webkit-transform-origin: right top; -ms-transform-origin: right top; transform-origin: right top;
-webkit-transform: scale(0, 1); -ms-transform: scale(0, 1); transform: scale(0, 1); -webkit-transition: transform 0.8s cubic-bezier(1, 0, 0, 1); transition: transform 0.8s cubic-bezier(1, 0, 0, 1);}
.sitemap .inner .site_menu_wrap .site_menu .submenu > li:hover > a{color: var(--pointcolor); transition: color 0.3s ease;}

.sitemap .inner .st_top{position: relative; padding: 1.5em 2em; width: 90%;}
.sitemap .inner .st_top .top_head{display: flex; align-items: center; width: 100%; padding-right: 5rem; justify-content: space-between;}
.sitemap .inner .st_top .a_list{display: flex; align-items: center; justify-content: space-between;}
.sitemap .inner .st_top .a_list .icon-btn{width: auto;}
.sitemap .inner .st_top .a_list .icon-btn > a{margin-right: 1.25rem;}

.sitemap .st_close{display: block;width: 35px; height: 15px; top: 2.5rem; margin:auto; right: 10px; position: absolute; z-index: 99999; 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; background-color: #fff;
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;}}


@media (max-width:1580px) {
    
    /* gnb */
    .sitemap .inner::after{right:8.5rem;}
    .sitemap .inner .site_menu_wrap{width:88%;}
    .sitemap .inner .site_menu_wrap .site_menu {width:88%;}
    .gnb_number_wrap{right:8rem;}

}

@media (max-width: 1280px){
	/* gnb */
    .sitemap .inner{width:60%;}
    .sitemap .inner::after{right:7rem;}
    .sitemap .inner .site_menu_wrap{padding:10rem 0 4rem; gap:3rem 0;}
    .gnb-menu-depth1{height:73px;}
    .sitemap .inner .site_menu_wrap .site_menu {width:90%;}
    .gnb_number_wrap{right:5.5rem;}
}

@media (max-width:1024px) {
	/* gnb */
    .sitemap .inner{width:100%;}
	.sitemap .inner .site_menu_wrap{padding:7rem 0 4rem;}
	.sitemap .inner::before{top: 7.25rem;}
    .sitemap .inner::after{right: 9rem;}
	.sitemap .st_close{width: 25px;}
}

@media (max-width:768px) {
	/* gnb */
    /* .sitemap{z-index: 9998;} */
    .sitemap .inner{ 
        transform:translateY(0%) translateZ(0); 
        -webkit-transform:translateY(0%) translateZ(0);
        -moz-transform:translateY(0%) translateZ(0);
        -ms-transform:translateY(0%) translateZ(0);
        -o-transform:translateY(0%) translateZ(0); 
    }

    /* .sitemap .inner::before{display:none;} */
    .gnb_number_wrap{display:none;}

    .sitemap .inner .site_menu_wrap .site_menu{width:100%; height:95%;}
    .sitemap .inner .site_menu_wrap{width:90%; padding:4rem 0 4rem; gap:0;}
    .sitemap .inner .site_menu_wrap .site_menu > li{padding:0 1.5rem;}
    .sitemap .inner .site_menu_wrap .site_menu > li + .sitemap .inner .site_menu_wrap .site_menu > li{border-top:2px solid rgba(255, 255, 255, 0.4);}
    
    .sitemap .inner .site_menu_wrap .site_menu .submenu{padding:0 1rem 1rem 4rem; /* flex-direction:column; align-items:flex-start; */ display: block;}
	.sitemap .inner .site_menu_wrap .site_menu .submenu > li > a{padding: .5rem 0;}
}

@media (max-width:480px){
	.sitemap .inner{justify-content: flex-start;}
	.sitemap .inner .st_top{padding: 1.5em 0;}
	.sitemap .inner .site_menu_wrap{padding: 0;}
    .sitemap .inner .site_menu_wrap .site_menu > li{height: auto; padding:0 1rem;}
    .sitemap .inner .site_menu_wrap .site_menu > li + .sitemap .inner .site_menu_wrap .site_menu > li{border-top:2px solid rgba(155, 154, 160, 0.4);}
    .sitemap .inner .site_menu_wrap .site_menu > li > a{font-size:1.8rem; padding:1.2rem 0rem 1rem;}
    .sitemap .inner .site_menu_wrap .site_menu > li > a::after{width:1.6rem; height:1.6rem;}
    .sitemap .inner .site_menu_wrap .site_menu .submenu > li > a{padding:0; font-size:1.25rem;}
    .sitemap .inner .site_menu_wrap .site_menu .submenu > li > a > p{font-size:1.25rem;}
    /* width */
    .sitemap .inner .site_menu_wrap .site_menu::-webkit-scrollbar {
        width:4px; background-color: rgba(110, 110, 110, 0.5);
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
    }
    /* Track */
    .sitemap .inner .site_menu_wrap .site_menu::-webkit-scrollbar-track {
        background-color: rgba(110, 110, 110, 0.5);
    }
    /* Handle */
    .sitemap .inner .site_menu_wrap .site_menu::-webkit-scrollbar-thumb {
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
    }
    /* Handle on hover */
    .sitemap .inner .site_menu_wrap .site_menu::-webkit-scrollbar-thumb:hover {
        background-color: rgba(255, 255, 255, 0.5);
    }
}

/* ============== footer ============== */
#footer{position: relative; z-index: 9998;}
#footer .f_wrap{
	justify-content: space-between;
	align-items: center;
}
#footer .f_wrap .left_wrap{
	display: flex;
    flex-direction: column;
    justify-content: space-between;
}
#footer .btnList{
	/* width: 20%; */
}
#footer .btnList li a{
	width: 12em; 
	border-radius: 2em; 
	padding: .65em 0; 
	color: #aaa; 
	display: flex; 
	align-items: center; 
	justify-content: center; 
	transition: all .3s;
}
#footer .btnList li:hover a{
	box-shadow: 0 0 0 3px #fff; 
	font-weight: 600; 
	color: #000;
}
#footer .bottombox{
	width: 100%;
}
#footer .bottombox::before{
	content: '';
	display: block;
	width: 100%;
	height: 1px;
	background-color: #aaa;
}
#footer .bottombox p{
	width: 100%;
	padding: 1rem;
}

@media (max-width: 576px){
	
}

@media (max-width: 500px){
	#footer .f_wrap .left_wrap{
		width: 100%;
		align-items: center;
	}

	#footer .f_wrap .left_wrap a img{
		width: 60%;
		margin: auto;
		display: block;
	}

	#footer .f_wrap .left_wrap .selfbox{
		text-align: center;
	}

	#footer .btnList{
		display: block;
		margin: auto;
	}
}




/* ============== Bar bottom ============== */
#Bar_btm{width: 100%; position: fixed; bottom: 0; left: 0; transition: all .3s ease; z-index: 9998; padding: .85rem; display: none;}
#Bar_btm.active{display: block; transition: all .3s ease;}
#Bar_btm p > span{background: var(--pointcolor); padding: .2rem;}


/* ==================== Quick ==================== */
#Quick{text-align: center; position: fixed;	right: 1em; bottom: 10%; z-index: 9999; transform: translateY(-50px);}
#Quick .q_inner{width: 185px;}
#Quick .q_inner .q_btn{display: flex; align-items: center; justify-content: space-between; margin-bottom: .5em;}
#Quick .q_inner .q_btn:first-child{justify-content: flex-end;}
#Quick .q_inner .q_btn .name{flex-shrink: 0; justify-content: center; align-items: center; display: flex; width: 130px; border-radius: 2em; height: 45px; transition: all 0.3s ease; box-shadow: 0px 0px 10px 0px rgb(51 102 255 / 15%)}
#Quick .q_inner .q_btn .box{flex-shrink: 0; padding: 1em 0; width: 45px; height: 45px; display: flex; position: relative; border-radius: 50%; justify-content: center; align-items: center; transition: all 0.3s ease; box-shadow: 0px 0px 10px 0px rgb(51 102 255 / 15%)}

/* hover */
#Quick .q_inner .q_btn:hover .name, #Quick .q_inner .q_btn:hover .box{background: var(--pointcolor); color: #fff !important;}
#Quick .q_inner .q_btn:hover:nth-child(3) .box img, #Quick .q_inner .q_btn:hover:nth-child(4) .box img{filter: invert(1);}

#Quick .open{display: none; width: 45px; height: 45px; position: relative; background: var(--pointcolor); border-radius: 50%; margin-bottom: .5em; justify-content: center; align-items: center; cursor: pointer; box-shadow: 0px 0px 10px 0px rgb(51 102 255 / 15%)}
#Quick .open .q_open{display: block;}
#Quick .open .q_close{display: none;}

/* active  */
#Quick.active .open{background: #000;}
#Quick.active .open .q_open{display: none;}
#Quick.active .open .q_close{display: block; color: #fff;}

#Quick .top{width: 45px; height: 45px; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; margin-left: auto; box-shadow: 0px 0px 10px 0px rgb(51 102 255 / 15%);}

@media (max-width: 990px){
	#Quick .q_inner{display: none; width: 60px;}
	#Quick .q_inner .q_btn{justify-content: flex-end;}
	#Quick .open{display: flex; margin-left: auto;}
	#Quick .q_inner .q_btn .name{display: none;}

	#Quick .q_inner .q_btn .box > img{width: 50%;}
	
}