/*头尾*/
.header{width: 100%;height: 90px;position: fixed;top: 0;left: 0;z-index: 999;background-color: rgba(255, 255, 255, .5);box-shadow: 0 0 4px #eee;transition: all .3s ease-out;}
.header .index_wrapper{height: 100%;display: flex; align-items: center;justify-content: space-between;}
.header .logo{font-size: 20px;color: var(--primary-color);font-weight: bold;text-shadow: 0 0 1px #555;}
.header .logo img{height: 45px;transition: all .3s ease-out;}

.header .right{height: 100%;display: flex;align-items: center;}
.header .nav{height: 100%;display: flex;flex-wrap: wrap;}
.header .nav> li{position: relative;margin-right: 50px;transition: all .3s ease-out;}
.header .nav> li:first-child{margin-left: 0;}
.header .nav> li> a{height: 100%;display:flex;align-items: center;transition: inherit;}
.header .nav> li.on>a{color: var(--primary-color);}
.header .nav> li> i.arrow{width: 56px;height: 56px;background: url(../images/icon_arrow.png) no-repeat center/20px; position:absolute; top:0; right:0; transition:all .3s linear;display: none;filter: contrast(0.5);}
.header .nav .children{position: absolute;top:100%;left:50%;z-index: 3;width:auto;transform: translateX(-50%);min-width:100%; border-radius: 4px;background: rgba(255, 255, 255, .95);opacity: 0;margin-top: 50px;visibility: hidden;padding: 10px 20px;box-shadow: 0 2px 4px #eee;transition: margin-top 0.4s ease-in-out 0s, visibility 0.4s ease-in-out 0s, opacity 0.4s ease-in-out 0s;}
.header .nav .children::after{content: '';position: absolute;top: -10px;left: calc(50% - 5px);width: 0;height: 0;border-width: 5px;border-style: solid;border-color: transparent transparent #fff transparent;}
.header .nav .children li{line-height:44px;padding:0 10px;}
.header .nav .children li:last-child{border-bottom: 0;}
.header .nav .children li a{display: block;white-space: nowrap;font-size: 15px;color: #555;transition: all .3s linear;}
.header .nav .children li a:hover{color: var(--primary-color);}

.header .search_btn{border-left: 1px solid #333;display: flex;align-items: center;cursor: pointer;padding: 0 50px;line-height: 1;}
.header .search_btn:hover{color: var(--primary-color);}
.header_search{position: fixed;top: 90px;left: 0;z-index: 9999;width: 100%;background-color: #fff;box-shadow: 0 0 4px #eee;display: none;}
.header_search .inner{width: 400px;margin: 20px auto;background-color: #fff;position: relative;}
.header_search .inner::after{content: '';position: absolute;top: -20px;right: 10px;width: 0;height: 0;border-width: 10px;border-style: solid;border-color: transparent transparent #fff transparent;transition: all .3s ease-out;}
.header_search .txt{width: calc(100% - 80px);height: 40px;background-color: #f3f3f3;padding: 0 10px;}
.header_search .submit{width: 80px;height: 40px;line-height: 40px;background-color: var(--primary-color);color: #fff;cursor: pointer;}
.header_search .submit:hover{opacity: .9;}
.header .lang{background-color: var(--primary-color);border-radius: 15px;padding: 2px 20px;color: #fff;transition: all .3s ease-out;}
.header .lang:hover{background-color: var(--vice-color);}

.menu_btn{width: 20px;height: 50px;cursor: pointer;display: none;position: relative;}
.menu_btn span{width: 20px;height: 2px;background: #000;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;will-change: transform;transition: .75s cubic-bezier(.19,1,.22,1);}
.menu_btn span:first-child{transform: translateY(-6px) scaleX(1);transition-delay: .4s;}
.menu_btn span:nth-child(2){transform: scaleX(1);transition-delay: 350ms;}
.menu_btn span:nth-child(3){transform: translateY(6px) scaleX(1);transition-delay: .3s;}
.menu_btn span:nth-child(4){transform: rotate(45deg) scaleX(0);transition-delay: 50ms;}
.menu_btn span:last-child{transform: rotate(-45deg) scaleX(0);transition-delay: 0s;}
.menu_btn.toggle span:first-child{transform: translateY(-6px) scaleX(0);transition-delay: .1s;}
.menu_btn.toggle span:nth-child(2){transform: scaleX(0);transition-delay: 50ms;}
.menu_btn.toggle span:nth-child(3){transform: translateY(6px) scaleX(0);transition-delay: 0s;}
.menu_btn.toggle span:nth-child(4){transform: rotate(45deg) scaleX(1);transition-delay: .3s;}
.menu_btn.toggle span:last-child{transform: rotate(-45deg) scaleX(1);transition-delay: 350ms;}

footer{background: url(../images/bg.jpg) no-repeat left center/cover;}
footer .inner{width: 100%;padding: 50px 4% 20px 4%;margin-left: auto;display: flex;flex-direction: column;justify-content: center;}

footer .contact{display: flex;justify-content: center;}
footer .contact li{width: 30%;text-align: center;}
footer .contact li .icon{width: 50px;height: 50px;border: 2px solid var(--primary-color);border-radius: 50%;margin: 0 auto 10px;transition: all .3s ease-out;}
footer .contact li .icon svg{fill: var(--primary-color);width: 20px;height: 20px;transition: inherit;}
footer .contact li h3{font-size: 18px;font-weight: bold;}
footer .contact li h3::after{content: '';display: block;width: 2em;height: 2px;background-color: var(--primary-color);margin: 10px auto;}
footer .contact li p{color: #666;font-size: 15px;}
footer .contact li:hover .icon{background-color: var(--primary-color);}
footer .contact li:hover .icon svg{fill: #fff;}

footer .nav{display: flex;justify-content: center;border-top: 2px solid rgba(0,0,0,.05);margin: 30px 0 0;padding: 20px 0;}
footer .nav li{padding: 0 40px;font-size: 14px;}
footer .nav li a:hover{color: var(--primary-color);}

footer .btm{font-size: 14px;color: #999;text-align: center;}
footer .btm a:hover{color: var(--primary-color);text-decoration: underline;}
footer .wx{position: relative;margin-bottom: 5px;}
footer .wx .btn{cursor: pointer;border-radius: 50%;width: 30px;height: 30px;background-color: #ccc;margin: 0 auto;transition: all .3s ease-out;}
footer .wx .btn:hover{background-color: var(--primary-color);}
footer .ewm{position: absolute;left: 50%;bottom: 100%;transform: translateX(-50%);background-color: #fff;padding: 20px;box-shadow: 0 0 5px #ccc;display: none;}
footer .ewm img{height: 110px;width: 110px;object-fit: contain;}

.index_footer footer{position: relative;background: none;}
.index_footer footer .inner{width: 70%;height: 100%;padding: 90px 4% 0 4%;background-color: rgba(255, 255, 255, .9);}
.index_footer footer .contact li .icon{width: 100px;height: 100px;margin-bottom: 20px;}
.index_footer footer .contact li .icon svg{width: 30px;height: 30px;}
.index_footer footer .nav{margin: 30px 0;}
.index_footer footer .btm{text-align: right;}
.index_footer footer .wx .btn{margin: 0 0 0 auto;}
.index_footer footer .ewm{left: auto;right: 0;transform: none;}

.index_footer footer::after{content: '';display: block;position: absolute;top: 0;left: 0;z-index: -1;;width: 100%;height: 100%;background: url(../images/bg.jpg) no-repeat left center/cover;transition: all 2s ease-out .5s;}
.swiper-slide-active footer::after{transform: scale(1.2);}


@media screen and (min-width: 1270px){
	.header .nav> li.on::after{content: '';display: block;position: absolute;bottom: 0;left: 0;width: 100%;height: 2px;background-color: var(--primary-color);}
	.header .nav> li> a:hover{color: var(--primary-color);}
	.header .nav> li:hover .children{margin-top: 0;opacity: 1;visibility: visible;}
	.header .nav> li:hover> a i{transform: rotate(180deg);}
}

@media screen and (max-width: 1270px){
	.wrapper{width: 100%;padding: 0 4%;}
	.space{padding-top: 50px !important;padding-bottom: 50px !important;}
	.mg_t_60{margin-top: 30px;}

	body.toggle{height: 100%;overflow: hidden;}

	.footer-fix{ display: block;}
	
	.header{background-color: #fff;height: 60px;box-shadow: 0 7px 32px -12px rgba(0,0,0,.2)}
	.header .logo img{height: 40px;}
	.header .logo{font-size: 16px;}
    .menu_btn{display: block;margin-left: 20px;}
    .header .nav{display: block;position: fixed;top: 60px;left: 0;z-index: 999;width: 100%;height: 0;overflow-y: auto;background-color: #fff;transition:all .4s ease-out;}
    .header .nav.toggle{height: calc(100vh - 60px);padding: 20px 4%;overflow-y: auto;}
	.header .nav{width: 100%;}
	.header .nav> li{width: 100%;margin-right: 0;border-bottom: 1px solid rgba(0,0,0,.04);}
	.header .nav> li> a{width: calc(100% - 50px);height: 60px;line-height: 50px;font-size: 18px;}
	.header .nav> li> a:after{display: none;}
	.header .nav> li> i.arrow{display: block;width: 50px;height: 60px;transform: rotate(0deg);background-size: 18px;}
	.header .nav .children{position: static;width: 100%;background: none;box-shadow: none;transform: none;margin-top: 0;padding-top: 0;opacity: 1;visibility: visible;display: none;}
	.header .nav .children li a{color: #999;}
	.header .nav> li> i.rotate{transform: rotate(180deg);}

	.header .search_btn{padding: 0;border-left: 0;}
	.header .search_btn span{display: none;}
	.header_search{top: 60px;}
	.header_search .inner{width: 92%;margin: 5px auto;}
	.header .lang{font-size: 12px;padding: 1px 6px;margin: 0 10px;}

	footer{margin-top: 50px;}
	footer .inner{padding: 30px 4% 20px 4%;}
	footer .contact{justify-content: space-between;}
	footer .contact li h3{font-size: 14px;}
	footer .contact li p{font-size: 12px;}
	footer .nav{flex-wrap: wrap;}
	footer .ewm{padding: 10px;}

	.index_footer footer .inner{width: 100%;height: auto;padding: 30px 4%;background: none;}
	.index_footer footer .contact li .icon{width: 50px;height: 50px;margin-bottom: 10px;}
	.index_footer footer .contact li .icon svg{width: 20px;height: 20px;}
	.index_footer footer .nav{margin: 30px 0 0;}
	.index_footer footer .btm{text-align: center;}
	.index_footer footer .wx .btn{margin: 0 auto;}
	.index_footer footer .ewm{left: 50%;right: auto;transform: translateX(-50%);}
}