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

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

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

#header .header_wrap .menu{width: 100%; justify-content: center;}
#header .header_wrap .nav{display: flex; justify-content: space-between; width: 85%;}
#header .header_wrap .nav > li{position: relative; width: calc(100% / 7); display: table; padding: 1.5em .5em; /* margin-left: 1em; */}
#header .header_wrap .nav > li:first-child{margin-left: 0;}
#header .header_wrap .nav > li > a{display: table-cell; vertical-align: middle; color: #000; font-weight: 600;}
#header .header_wrap .nav > li > a:after{display: block; content: ''; width: 70%; height: 1px; background: rgba(255, 255, 255, 0.5); margin: auto; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);}

#header .header_wrap .nav > li:hover{background: var(--pointcolor);}
#header .header_wrap .nav > li:hover > a{color: #fff; font-weight: 600;}

#header .header_wrap .nav .submenu{display: none; position: absolute; width: 100%; left: 50%; transform: translateX(-50%); top: 6.75em; font-size: 0.65em; /* padding: 1rem 0; */ z-index: 99;}
#header .header_wrap .nav .submenu > li{/* border-bottom: 1px solid #dedede; */ /* padding: 1em .5em; */}
#header .header_wrap .nav .submenu > li:first-child{padding-top: 1em;}
#header .header_wrap .nav .submenu > li:last-child{padding-bottom: 1em;}
#header .header_wrap .nav .submenu > li > a{display: block; padding: .8em 10px; font-size: 1rem; color: #fff;}

#header .header_wrap .nav > li:hover .submenu{background: var(--pointcolor);}
#header .header_wrap .nav > li .submenu > li:hover > a{font-weight: 600; color: #fff;}

#header .header_wrap .side_btn{/* width: 7rem; */ justify-content: center; align-items: center;}
#header .header_wrap .side_btn li{white-space: nowrap;}
#header .header_wrap .side_btn .bar{position: relative; padding-right: 1em;}

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


@media (max-width: 1820px){
	#header .header_wrap{width: 90%;}
	#header .header_wrap .nav{width: 90%;}
}

@media (max-width: 1240px){
	#header .header_wrap{padding: 2em 0;}

	#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: 2px; border-radius: 5em; 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; width: 80%}
	#header .menu-btn .btn_line03 {bottom: 0;}

	#header.active .menu-btn span{background: #000;}
}


@media (max-width: 990px){
	#header{position: relative;}
	#header.active{position: fixed;}
}


/* ==================== mobile sitemap ==================== */
.sitemap{width: 100%; max-width: 100%; position: fixed; top: 0;	right: -100%; height: 100%; z-index: 10000; transition: right 0.5s;}
.sitemap.on{right: 0;}
.sitemap .inner{display: block;}

.sitemap .inner .loginbox{width: 100%; padding: 1.3em 2em;}
.sitemap .inner .loginbox ul li{width: calc(100% / 2); border-left: 1px solid #fff;}
.sitemap .inner .loginbox ul li:first-child{border-left: none;}


.sitemap .inner .st_top{position: relative; background: #fff;}
.sitemap .inner .st_top .top_wrap{padding: 3em 0; width: 90%; margin: auto;}

.sitemap .st_close{display: block;width: 25px;height: 15px;top:0; bottom:0; margin:auto; right: 3em;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_wrap{padding: 3em;}
.sitemap .inner .site_menu .void_link{padding: 15px 20px; display: block; font-weight: 500; position: relative;	top: 0;	left: 0; color: #fff; font-size: 2.750rem;}
.sitemap .inner .site_menu .void_link:after{content: ""; display: inline-block;background-image: url( "/img/main/arrow.png" ); background-size: auto; width: 15px; height: 24px; vertical-align: middle;background-repeat: no-repeat;
position: absolute; top: 50%; transform: translateY(-50%); right: 0;}
.sitemap .inner .site_menu .void_link.on{font-weight: 600;}
.sitemap .inner .site_menu .void_link.on:after{transform: translateY(-50%) rotate(180deg);}
.sitemap .inner .site_menu .void_link:after{transform: translateY(-50%) rotate(0deg);}
.sitemap .inner .site_menu .void_link.on .plus_icon::after{transform: translateX(-50%); background: #000; width: 100%;}
.sitemap .inner .site_menu .submenu{display: none; border-top: 1px solid rgba(255, 255, 255, 0.5);}
.sitemap .inner .site_menu .submenu li{padding-left: 20px;}
.sitemap .inner .site_menu .submenu li a{padding: 15px 0;	display: block; font-weight: 300; position: relative; top: 0; left: 0; font-size: 1.625rem; color: #fff;}
.sitemap .inner .site_menu .submenu li a:hover{font-weight: 600;}

.sitemap .inner .site_menu .submenu li a br{display: none;}

.sitemap .inner .site_menu .login_box{width: 100%; padding: 15px 20px; margin-top: 1em;}
.sitemap .inner .site_menu .login_box a{width: auto;}



/* ============== footer ============== */
#footer .container{justify-content: space-between; align-items: center;}
#footer .inner{width: 60%;}
#footer .inner .btn_list{width: 60%; justify-content: space-between; align-items: center;}
#footer .inner .btn_list li a{color: #fff; font-weight: 200; letter-spacing: 0.5px;}
#footer .inner .btn_list li a:hover{font-weight: 400;}

#footer .logo{width: 20%;}
#footer .logo img{margin-left: auto;}

@media (max-width: 990px){
	#footer .container{flex-wrap: wrap;}
	#footer .inner{width: 100%; text-align: center; margin-top: 3em;}
	#footer .inner .btn_list{margin: auto;}
	#footer .logo{width: 100%; order: -1;}
	#footer .logo img{margin-right: auto;}
}

@media (max-width: 500px){
	#footer .inner .btn_list{width: 90%;}
}



/* ==================== Quick ==================== */
#Quick{position: fixed; right: 3%; top: 50%; transform: translateY(-50%); z-index: 9999;}
#Quick .wrap{width: 4.5rem; background: #fff; border-radius: 5em; text-align: center; font-size:11px; font-weight: 500; box-shadow: 1px 1px 10px rgba(0,0,0,0.1); transition: all 0.3s; padding:1.75em 0;}
#Quick .q_menu{display: flex; align-items: center; flex-direction: column; padding: .15em 0.8em;}
#Quick .q_menu p{margin-top: .8em;}
#Quick .q_menu+.q_menu::before{content:''; display: block; width: 100%;	height: 1px; background: #ccc; margin: 1em 0;}

#Quick .btn_top{position: relative;	display: flex; flex-direction: column; align-items: center;	justify-content: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; margin: 20px auto;
color: #fff; letter-spacing: 0; box-shadow: 1px 1px 10px rgba(0,0,0,0.1); cursor: pointer; background: linear-gradient(60deg, #a4d836 13%, #0ea29a 51%, #249fdb 100%);}
#Quick .btn_top i{line-height: 20px;}

#Quick .plus-btn{display: none;}

@media (max-width:1024px) {
	#Quick{top: auto; bottom: 15%; transform: none;}
    #Quick .wrap{width: auto; position: relative; padding: 0; box-shadow: none;	background: none;}
    #Quick .q_menu{position: absolute; transition: all .3s ease; top:6px;}
    #Quick .q_menu+.q_menu::before{display: none;}
    #Quick .q_menu p{display: none;	position: absolute;	top: 50%; transform: translateY(-50%); width: 100px; right: 100%; text-align: right; padding-right: 10px; margin-top: 0; color: #000;}

    #Quick .plus-btn{width: 50px; height: 50px;	display: flex; box-shadow: 1px 1px 10px rgba(0,0,0,0.1); background: var(--pointcolor); border-radius: 50%; align-items: center; justify-content: center;	position: relative;	transition: all 0.3s;color: #fff;}
    #Quick .plus-btn .close{display: none;}
    #Quick .btn_top{width: 50px; height: 50px; font-size: 1.5em; margin-top: 10px;}

    #Quick.active{z-index: 999;}
    #Quick.active .q_menu{transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); background: #fff; height: 50px; width: 50px; display: flex; border-radius: 50%; box-shadow: 1px 1px 10px rgba(0,0,0,0.1);	align-items: center;}

    #Quick.active .q_menu:nth-child(1){transform: translate3d(-0em,-390px,0);}
    #Quick.active .q_menu:nth-child(2){transform: translate3d(-0em,-325px,0);}
    #Quick.active .q_menu:nth-child(3){transform: translate3d(-0em,-260px,0);}
    #Quick.active .q_menu:nth-child(4){transform: translate3d(-0em,-195px,0);}
    #Quick.active .q_menu:nth-child(5){transform: translate3d(-0em,-130px,0);}
    #Quick.active .q_menu:nth-child(6){transform: translate3d(-0em,-65px,0);}

    #Quick.active .plus-btn{background: var(--subcolor); }
    #Quick.active .plus-btn .close{display: block; color: #fff;}
    #Quick.active .plus-btn .open{display: none;}
}

@media (max-width: 768px){
	#Quick{left: 0; top: auto; right: auto; bottom: 0; transform: none; width: 100%; max-height: 120px; height: 8.5em; display: flex; margin: auto; transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out;}
	#Quick .wrap{box-shadow: 1px 1px 10px rgba(0,0,0,0.1); background: #fff; border-radius: 2em 2em 0 0; width: 100%; padding: 1.4rem 0 1.4rem; display: flex;}
	#Quick .q_menu{width: calc(100% / 6); position: relative; display: flex; align-items: center; flex-direction: column; justify-content: center;}
	#Quick .q_menu+.q_menu::before{display: block; width: 1px; height: 70%; margin: 0; top: 50%; position: absolute; left: 0; transform: translateY(-50%);}
	#Quick .q_menu img{width: 30%; max-width: 100%; display: block;}
	#Quick .q_menu p{display: none;}

	#Quick .btn_top{position: fixed; right: 5%; bottom: 15rem; width: 6rem; height: 6rem; border-radius: 50%; display: flex; -webkit-display: flex; align-items: center; justify-content: center;}
	#Quick .plus-btn{display: none;}
}

@media (max-width: 460px){
	#Quick{height: 7em;}
	#Quick .wrap{padding: 0;}
	#Quick .q_menu img{width: 50%;}
}