.sections{ width: 100%; position: relative;
    overflow: hidden;background: #000;}
.sections img{ display: block; max-width: 100%;margin-top: -1px;}
.section{ width: 100%; position: relative;}
.opt0{ opacity: 0;}
.pc_index{width: 100%;background: #000;}
@keyframes fadeInLeft1{
    0%{ opacity: 0; transform: translate(-100px,0);}
    100%{ opacity: 1; transform: translate(0,0);}
}

@keyframes fadeInUp1{
    0%{ opacity: 0; transform: translate(0,60px);}
    100%{ opacity: 1; transform: translate(0,0);}
}

.fadeInUp1{ animation: fadeInUp1  0.8s ease 0.4s  forwards; will-change: transform,opacity;}
.fadeInUp2{ animation: fadeInUp1  0.8s ease 0.6s  forwards; will-change: transform,opacity;}

.fadeInUp3{ animation: fadeInUp1  0.8s ease 1s  forwards; will-change: transform,opacity;}

@keyframes intoRight{
    0%{ transform: translate(0,0);}
    100%{transform: translate(50%,0);}
}
@keyframes fadeIn1{
    0%{ opacity: 0;}
    100%{opacity: 1;}
}
@keyframes breath{
    0%{ transform: scale(1); opacity: 0.8;}
    50%{ transform: scale(1.1); opacity:1;}
    100%{ transform: scale(1); opacity:0.8;}
}

@keyframes fromLeft{

    0%{ transform: translate(-50%,0);opacity: 0;}
    100%{transform: translate(0,0);opacity: 1;}
}

@keyframes fromRight{
    0%{ transform: translate(50%,0);opacity: 0;}
    100%{transform: translate(0,0);opacity: 1;}
}


.colorfff{ color: #fff; }
.color707070{ color: #707070; }
.color5e5e5e{ color: #5e5e5e; }
.color2b4e96{ color: #2b4e96; }

.coloraaa{
    color:transparent;
    background: linear-gradient(0deg, #98add8 0%, #254892 100%);
    -webkit-background-clip: text;
}

.txtC{text-align: center;}
.txtL{text-align: left;}
.font_bold{font-weight: bold;}

.fsize36{ font-size:1.9vw;}
.banner_mask{position: absolute;left:0;width:100%;height: 100%;top: 0;z-index: 10;background: rgba(0,0,0,0.3);}
.banner_logo{position: absolute;left:11%;width:26.2%; top: 10.1%;z-index: 14;}
.banner_product{position: absolute;left: 75.1%;width: 16.8%;top: 39.5%;z-index: 14;}
.play_btn{position: absolute;left:46.8%;width:6.4%; top: 20%;z-index: 10;cursor: pointer;}
.banner_name{position: absolute;left:80.2%;width:6.4%; top: 14.4%;z-index: 10;cursor: pointer;writing-mode: vertical-rl;letter-spacing:0.3vw;transform: skewY(356deg);}
.banner_tag{position: absolute;left:77.2%;width:6.4%; top:14.4%;z-index: 10;cursor: pointer;writing-mode: vertical-rl;letter-spacing:0.3vw;transform: skewY(356deg);}
.nav_box{position: absolute;left:3.3%; top: 42.2%;width: 68.8%;display: flex;justify-content: space-between;z-index: 10;align-items: center;}
.nav_box_item{border: 1px solid #fff;width: 19%;overflow: hidden;cursor: pointer;}
.nav_box_item img{width: 100%;}
.nav_box_item.active{border: 4px solid #aa955a;}

.h9_banner{width: 100%; position: relative;margin-top: -1px;}
.h9_banner .swiper-slide{height:66vw!important; }
.h9_banner .swiper-slide video{width: 100%;display: block;}
.h9_banner .swiper-slide-active{opacity: 1;transition: opacity 0.3s ease-out;}
.h9_banner .swiper-button-prev{width:2.8vw;background-image:unset!important;left: 8.3%;top:24.2%;}
.h9_banner .swiper-button-next{width:2.8vw;background-image:unset!important;right: 8.3%;top:24.2%;}

.msections{ width: 100%; position: relative; display: none;}
.msections img { display: block; width: 100%; }
@keyframes breath2{
    0%{ transform: scale(1); opacity: 0.2;}
    100%{ transform: scale(1); opacity:1;}
}

@media screen and (min-width: 1921px){
    .sections{width: 1920px;margin: 0 auto;}
    .fsize36{ font-size:36px;}

    .h9_banner{width: 100%; position: relative;margin-top: -1px;}
    .h9_banner .swiper-slide{height:1267px!important; }
    .h9_banner .swiper-slide video{width: 100%;display: block;}
    .h9_banner .swiper-slide-active{opacity: 1;transition: opacity 0.3s ease-out;}
    .h9_banner .swiper-button-prev{width:53px;background-image:unset!important;left: 8.3%;top:24.2%;}
    .h9_banner .swiper-button-next{width:53px;background-image:unset!important;right: 8.3%;top:24.2%;}
    .msections{ width: 100%; position: relative; display: none;} .msections img { display: block; width: 100%; }
}

@media screen and ( max-width : 800px){
    .msections{ display: block;overflow: hidden;background: #fff;}
    .sections{ display: none;}

    .banner_mask{position: absolute;left:0;width:100%;height: 100%;top: 0;z-index: 10;background: rgba(0,0,0,0.4);}
    .banner_logo{position: absolute;left:45.2%;width:49.9%; top: 8.4vw;z-index: 14;}
    .banner_tips{position: absolute;left:5.2%;width:23.5%; top: 8.4vw;z-index: 14;}
    .banner_product{position: absolute;left:5.2%;width:36.5%; top: 120vw;z-index: 14;}
    .play_btn{position: absolute;left:41.9%;width:16.5%; top: 73.4vw;z-index: 10;cursor: pointer;}
    .banner_name{display: none; position: absolute;left:80.2%;width:6.4%; top: 28.4%;z-index: 10;cursor: pointer;writing-mode: vertical-rl;letter-spacing:0.3vw;transform: skewY(356deg);}
    .banner_tag{display: none;position: absolute;left:77.2%;width:6.4%; top:28.4%;z-index: 10;cursor: pointer;writing-mode: vertical-rl;letter-spacing:0.3vw;transform: skewY(356deg);}
    .nav_box{position: absolute;left:5.2%; top: 14vw;width: 25.3%;height: 102vw; display: flex;justify-content: space-between;z-index: 10;align-items: center;flex-direction: column;}
    .nav_box_item{border: 1px solid #fff;width: 25.3vw;height: 18.5vw;overflow: hidden;cursor: pointer;}
    .nav_box_item.active{border: 2px solid #aa955a;}
}
@media screen and ( max-width : 320px){
    .msections{ display: block;}
    .sections{ display: none;}
}