/*banner style*/
.banners p { color: #fff; font-size: 50px; line-height: initial;height:130px;transform:translate(-50%,-50%);left:50%;top:calc(50% - 65px)}
.banners p { position: absolute;   transform: translate(-50%,-50%);  top: calc(50% - 45px);  left: 50%; z-index: 99999;  text-align: center;}
.banners p b{display:block;font-weight:500;font-size:50px;border-bottom1:1px solid #fff;margin-bottom:2px;padding-bottom:2px;}
.banner-container{position: relative;}
/*.abnav ul{display:flex;}
.abnav ul li{flex:1;}*/

.abnav{text-align:center;}
.abnav ul{display:flex;justify-content: center;}

.abnav ul li:first-child{border-radius:10px 0px 0px 10px;}
.abnav ul li:last-child{border-radius:0px 10px 10px 0px;}
/*ul有2个子元素的样式*/
/*li:nth-last-child(2):first-child,  是倒数第二个元素，又是第一个元素，说明li的父元素ul有2个子元素（起到了 判断某父元素下有几个子元素 的作用）*/
.abnav li:nth-last-child(2):first-child,
/* ~ 选择位于li:nth-last-child(2):first-child 即 第一个子元素之后的元素*/
.abnav li:nth-last-child(2):first-child ~ li{
    flex:1;
    width1:33%;float:none;display:inline-flex;
} 

/*ul有3个子元素的样式*/
/*li:nth-last-child(3):first-child,  是倒数第二个元素，又是第一个元素，说明li的父元素ul有2个子元素（起到了 判断某父元素下有几个子元素 的作用）*/
.abnav li:nth-last-child(3):first-child,
/* ~ 选择位于li:nth-last-child(3):first-child 即 第一个子元素之后的元素*/
.abnav li:nth-last-child(3):first-child ~ li{
    /*width:33%;float:none;display:inline-block;*/
    width1:33%;float:none;display:inline-flex;flex:1;
} 

/*ul有4个子元素的样式*/
/*li:nth-last-child(4):first-child,  是倒数第二个元素，又是第一个元素，说明li的父元素ul有2个子元素（起到了 判断某父元素下有几个子元素 的作用）*/
.abnav li:nth-last-child(4):first-child,
/* ~ 选择位于li:nth-last-child(4):first-child 即 第一个子元素之后的元素*/
.abnav li:nth-last-child(4):first-child ~ li{
    width1:25%;float:none;display:inline-flex;flex:1;
} 


@media (max-width: 800px) {
    .abnav {width: 100%;overflow:auto;}
    .typlist_ul_li{overflow:auto;}
    .typlist_ul_3{width:150vw;}.typlist_ul_4{width:200vw;}.typlist_ul_5{width:250vw;}
    .abnav .typlist_ul li {
         width:50vw !important;float:none;display:inline-block;
    }
}





/*波浪*/
.wave_inner{    
    position: absolute;
    width: 100%;
    height: 30px;
    margin-top: 0px;
    z-index: 10;
    transform: translateY(calc(100% + 30px));
}


@media all and (max-width:1200px) {
    .abnav{width:100%;}
    .abnav li{width:20%;}
}
@media all and (max-width:1000px) {
    .banner-container{margin-top:60px;}
}
@media all and (max-width:800px) {
    
.banners p { color: #fff; font-size: 25px; line-height: initial;height:130px;transform:translate(-50%,-50%);left:50%;top:calc(50% - 65px)}
.banners p { position: absolute;   transform: translate(-50%,-50%);  top: calc(50% - 25px);  left: 50%; z-index: 99999;  text-align: center;height:auto;}
.banners p b{display:block;font-weight:500;font-size:25px;border-bottom1:1px solid #fff;margin-bottom:2px;padding-bottom:2px;}
    
    
    .abnav{width:100%;}
    .abnav li{width:20%;height:50px;line-height:50px;}
    .abnav li .img{display:none;}
    .abnav li a{font-size:15px;}
}