@charset "utf-8";
/*公开始束*/



.wp {max-width: 1400px;margin: 0 auto;width: 100%}

.overhide{overflow: hidden}


.flex{display:flex;flex-wrap:wrap;}


@keyframes sca{
0%{transform: scale(1);}50%{transform:  scale(1.1)}100%{transform:  scale(1)}
}
@keyframes go{
0%{transform: translateX(0);}50%{transform: translateX(10px);}100%{transform: translateX(0);}
}
@keyframes up{
0%{transform: translateY(0);}50%{transform: translateY(-8px);}100%{transform: translateY(0);}
}
@keyframes roted{
0%{transform: rotate(0deg);}100%{transform: rotate(360deg);}
}


.header .topnav{ margin: 0;}
.header .topnav ul{align-items: center;}
.header .topnav ul li{font-size: 18px;position: relative;transition: .3s; width:14.28%;text-align:center;}
.header .topnav ul li>a{ color: #ffffff; padding:0 23px; line-height:45px;font-size:20px;}
.header .topnav ul li i.plus{position: absolute;right: 0;top: .15rem;color: #999;display: block;width: 30px;height: 30px;text-align: center;line-height: 30px;display: none;transition: .3s}
.header .topnav ul li i.plus.show{transform: rotate(180deg);}

.header .topnav ul li .sub-nav{position:absolute;top:100%;left:50%;z-index:99;padding-top:1px;min-width: 150px;transform:scaleY(0) translateX(-50%);opacity: 0;visibility: hidden;transition: .3s;transform-origin: top center;}
.header .topnav ul li .sub-nav .sub-nav-h{position: relative;background: #fff;padding: 20px;box-shadow: 0 0 10px rgba(0,0,0,.3);background: #fff;border-radius: 0 0 5px 5px}

.header .topnav ul li .sub-nav .sub-nav-h .li{ text-align: center}
.header .topnav ul li .sub-nav .sub-nav-h a{display: inline-block;font-size:16px;padding:0 10px;white-space: nowrap;line-height:35px;text-align: center;}
.header .topnav ul li .sub-nav .sub-nav-h a:hover{color: #8f0009}
.header .topnav ul li .sub-nav .sub-nav-h:before{content: '';position: absolute;left: 50%;transform: translateX(-50%);width: 6px;height: 6px;background: #fff; bottom: calc(100% + 4px);border-radius: 50%;display: none;}

.header .topnav ul li .sub-nav .sub-nav-h .sub-menu{position: absolute;top: 0;left: 100%;background: #fff;padding: 20px;box-shadow: 0 0 10px rgba(0,0,0,.3);max-height: 390px;overflow: hidden;overflow-y: scroll;opacity: 0;visibility: hidden; transition: .5s}
.header .topnav ul li .sub-nav .sub-nav-h .sub-menu a{ font-size: 14px}




@media(min-width: 1024px){
   
    .header .topnav ul li:hover>a{color:#ddd; }
    .header .topnav ul li:hover .sub-nav{opacity: 1;visibility: inherit;transform:scaleY(1) translateX(-50%)}
}


@media screen and (max-width: 750px) {

.header{display:none;}


}