.banner{ 
    position: relative;
    overflow: hidden;
}
img{
    transition: all 0.5s ease-in-out 0s;
}
.banner img:hover,.aboutbox img:hover{
    transform: scale(1.1);
}
.banner img.banner1{
    width: 100vw;
    display: block;
}
.banner img.banner2{
    width: 100vw;
    display: none;
}
.banner>.text{
    position: absolute;
    top: 35%; 
    right: -32.19vw;
    transition: all 0.5s ease-in-out 0s;
}
.banner p{
    font-size: 2.4rem;
    color: #000;
    font-family: OPPOSans-R;
    font-weight: 400;   
}
.banner span{
    display: block;
    width: 32.19vw;
    margin-top: 1.2rem;
    height:0.15rem;
    background: linear-gradient(to right,#e40032 0%,rgba(0,0,0,0) 90%);
}
.aboutbox {
    background-color: #F7F7F7;
}
.aboutbox .top{
    width: 100vw;
    height: 31.25vw;
    background-color: #fff;
}
.aboutbox .top .videobox{
    width: 44.79vw;
    display: block;
    margin: 2vw auto 0; 
    position: relative;
    top: 5vw;
    opacity: 0; 
    overflow: hidden;
    transition: all 0.5s ease-in-out 0s;
}

.aboutbox .top .video{position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: none;font-size: 16px;}
.top .video>div{width: 100% !important;height: 100% !important;}
.top .video video{width: 100% !important;height: 100% !important;}

.aboutbox .top .videobox .pic1{
    width: 100%;
    display: block; 
 }
 .aboutbox .top .videobox .play{
    width:3.13vw;
    display: block; 
    position: absolute;
    top: 44.97%;
    left: 46.63%;
    cursor: pointer;
 }
.aboutbox .bottom{
    padding: 10vw 18.75vw 2vw;
}
.aboutbox .bottom .list{
    margin: 2.5rem 0;
    padding: 0 0 1.8vw;
}
.aboutbox .bottom .list.style1{
    background: url(../../img/about/bg1.png) 1.6vw 0vw no-repeat;
    background-size: 52.24vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
}
.aboutbox .bottom .list.style2{
    background: url(../../img/about/bg2.png) 8.5vw 0vw no-repeat;
    background-size: 52.24vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row-reverse;
} 
.aboutbox .bottom .list.style1 .imgbox{
   width: 26.04vw;
   height: 17.3vw;
   overflow: hidden;
   margin-right: 3vw;
   position: relative;
   top: -1.6vw;
   right:10vw;
   display: inline-block;
   vertical-align: middle;  
   opacity: 0;
}
.aboutbox .bottom .list.style2 .imgbox{ 
    width: 26.04vw;
    height: 17.3vw;
    overflow: hidden;
    margin-left: 3vw;
    position: relative;
    top: -1.6vw;
    left:10vw;
    display: inline-block;
    vertical-align: middle;  
    opacity: 0;
}
.aboutbox .bottom .list .imgbox img{
    width: 26.04vw;
}
.aboutbox .bottom .list p{
    display: inline-block;
    vertical-align: middle; 
    width: 33vw;
    font-size: 0.8rem;
    font-family: OPPOSans-R;
    font-weight: 400;
    color: #787878;
    line-height: 1.5rem; 
    position: relative;
    opacity: 0;
}
.aboutbox .bottom .list.style1 p{
    left: 10vw;
}
.aboutbox .bottom .list.style2 p{
    right: 10vw;
}

.aboutbox .bottom .list:nth-child(1) .imgbox{
    transition: all 1s ease-in-out 0s;
}
.aboutbox .bottom .list:nth-child(2) .imgbox{
    transition: all 1s ease-in-out 0.4s;
}
.aboutbox .bottom .list:nth-child(3) .imgbox{
    transition: all 1s ease-in-out 0.8s;
}
.aboutbox .bottom .list:nth-child(4) .imgbox{
    transition: all 1s ease-in-out 1.2s;
} 
.aboutbox .bottom .list:nth-child(1) p{
    transition: all 1s ease-in-out 0s;
}
.aboutbox .bottom .list:nth-child(2) p{
    transition: all 1s ease-in-out 0.4s;
}
.aboutbox .bottom .list:nth-child(3) p{
    transition: all 1s ease-in-out 0.8s;
}
.aboutbox .bottom .list:nth-child(4) p{
    transition: all 1s ease-in-out 1.2s;
}
.aboutbox .bottom .list p span{
    color: #e40032;
}

hr{
    width: 100vw;
    height: 0.3rem;
    display: block;
    background: linear-gradient(to left,#e40032 0%,#ff4221 70%,rgba(255,0,0,0.1) 100% );
    border: 0;
    position: relative;
    left: -100%; 
    transition: all 0.3s ease-in-out 0s;
}
.listbox{
    position: relative;
    overflow: hidden;
    word-break: normal;
}
.events .box{
    width: 57.52vw;
    overflow: hidden;
    margin:3.1rem 0 0 18.75vw;
    display: inline-flex;
    justify-content: start;
    position: relative;
    top: -5vw;
    opacity: 0;
    transition: all 1s ease-in-out 0.4s;
}
.events .li{
    width: 13.34vw;
    border-left: 1px solid  #000;
    display: inline-block;
    padding:0 1.04vw 5vw; 
    vertical-align: middle;
    display: inline-flex;
    flex-direction: column;
    justify-content: start;
}
.events .li h3{
    font-size: 1.4rem;
font-family: OPPOSans-B;
color: #2B2B2B; 
letter-spacing: 1px;
}
.events .li p{
    width: 8.5vw;
    letter-spacing: 0.3px;
    font-size: 0.8rem;
    font-family: OPPOSans-R;
    font-weight: 400;
    color: #333333;
    line-height: 1.6rem;
    margin-top: 0.4rem;
}
.events .box.bottom{ 
    margin: 0 0 3.1rem 25.73vw;
    display: flex;
    justify-content: start;
    position: relative;
    top: 5vw;
    opacity: 0;
    transition: all 1s ease-in-out 0.4s;
}
.events .box.bottom .li{
     padding: 5vw 1.04vw 0; 
} 
.events .btns{
    display: block;
    text-align: right;
    margin: 3.125vw 18vw 4.1vw;
}
.events .btns span{
    width:1.88vw;
    height:1.88vw;
    border-radius: 0.2rem;
    background-color: #f5f5f5;
    display: inline-block;
    vertical-align: middle;
    margin: 0 0.52vw;
    cursor: pointer;
}
.events .btns span:hover{
    background-color: #f0f0f0;
}
.events .btns span img{
    width:0.36vw; 
    display: block;
    margin: 35% auto;
}
.events .btns span.nodata:hover{
background-color: #f5f5f5;
}
.events .btns span.nodata img{
    opacity: 0.6;
}
.totop{
    display: block;
}
@media screen and (max-width:750px) {
    header ul{
        color:rgba(77, 77, 77, 0.67);
    }
.banner{ 
   margin-top: 13.3vw;
}
    .banner img.banner1{
        display: none;
    }
    .banner img.banner2{
        display: block;
    }

    .banner>.text{
        position: absolute;
        top: 28.86vw; 
        right: -32.19vw;
        transition: all 0.5s ease-in-out 0s;
    } 
    .banner span{ 
        width: 44.53vw;   
        height: 2px;
        margin-top: 0.5rem;
    }
         

.aboutbox .top{
    width: 100vw;
    height: 68.5vw; 
    background-color: #fff;
}
.aboutbox .top .videobox{
    width: 100vw;
    display: block;
    margin: -1vw auto 0; 
    position: relative;
    top: 5vw;
    opacity: 0; 
}
.aboutbox .top .videobox .pic1{
   width: 100vw;
   display: block; 
}
.aboutbox .top .videobox .play{
   width: 9.6vw;
   display: block; 
   position: absolute;
   top: 44.32%;
   left: 45.2%;
}


.aboutbox .bottom{
    padding: 18.5vw 5.33vw 2vw;
}
.aboutbox .bottom .list{
    margin: 2.5rem 0;
    padding: 0 0 1px;
}
.aboutbox .bottom .list.style1{
    background: url(../../img/about/bg3.png) 0 100% no-repeat;
    background-size: 100% 100%;
    display: block;
}
.aboutbox .bottom .list.style2{
    background: url(../../img/about/bg4.png) 0 100% no-repeat;
    background-size: 100% 100%;
    display: block;
} 
.aboutbox .bottom .list.style1 .imgbox{
   width:89.33vw;
   height:auto;
   overflow: hidden;
   margin-right:0;
   position: relative;
   top: 0vw;
   right:10vw;
   display: inline-block;
   vertical-align: middle;  
   opacity: 0;
}
.aboutbox .bottom .list.style2 .imgbox{ 
    width:89.33vw;
    height:auto;
    overflow: hidden;
    margin-left:0;
    position: relative;
    top: 0vw;
    left:10vw;
    display: inline-block;
    vertical-align: middle;  
    opacity: 0;
}
.aboutbox .bottom .list .imgbox img{
    width: 100%;
    display: block;
}
.aboutbox .bottom .list p{
    display: block; 
    margin: 1rem auto;
    width: 78.33vw;
    font-size: 1.5rem;
    font-family: OPPOSans-R;
    font-weight: 400;
    color: #787878;
    line-height: 3rem; 
    position: relative;
    opacity: 0;
}

hr{
    width: 100vw;
    height: 0.2rem;
    display: block;
    background: linear-gradient(to left,#e40032 0%,rgba(255, 63, 63, 0.1) 100% );
    border: 0;
    position: relative;
    left: -100%; 
    transition: all 0.3s ease-in-out 0s;
}

.events .box{
    width: 67.52vw;
    margin:3.1rem 0 0 5.33vw;
    display: flex;
    justify-content: start;
    position: relative;
    top: -5vw;
    opacity: 0;
    transition: all 1s ease-in-out 0.4s;
}
.events .li{
    width: 39.83vw;
    border-left: 1px solid  #000;
    display: inline-block;
    padding:0 2.67vw 14.8vw; 
    vertical-align: middle;
    display: inline-flex;
    flex-direction: column;
    justify-content: start;
}
.events .li h3{
    font-size: 1.5rem;
font-family: OPPOSans-B;
color: #2B2B2B; 
letter-spacing: 1px;
}
.events .li p{
    width: 31.47vw;
    letter-spacing: 0.3px;
    font-size: 1.3rem;
    font-family: OPPOSans-R;
    font-weight: 400;
    color: #333333;
    line-height: 2.4rem;
    margin-top: 0.5rem;
}
.events .box.bottom{ 
    margin: 0 0 3.1rem 25.73vw;
    display: flex;
    justify-content: start;
    position: relative;
    top: 5vw;
    opacity: 0;
    transition: all 1s ease-in-out 0.4s;
}
.events .box.top .li{
     padding: 8.26vw 1.04vw 0; 
} 
.events .box.bottom .li{
     padding: 8.26vw 1.04vw 0; 
} 

.events .btns{
    display: block;
    text-align: right;
    margin: 3.125vw 5.33vw 26.13vw;
}
.events .btns span{
    width:8.04vw;
    height:8.04vw;
    border-radius: 0.2rem;
    background-color: #f5f5f5;
    display: inline-block;
    vertical-align: middle;
    margin: 0 2.815vw;
    cursor: pointer;
}
.events .btns span:hover{
    background-color: #f0f0f0;
}
.events .btns span img{
    width:20%; 
    display: block;
    margin: 35% auto;
}
.events .btns span.nodata:hover{
background-color: #f5f5f5;
}
.events .btns span.nodata img{
    opacity: 0.6;
}

.totop{
    display: block;
}
}