.sections{ width: 100%; position: relative;
    overflow: hidden;}
.sections img{ display: block; max-width: 100%;}
.section{ width: 100%; position: relative;}
.m1_b{ width: 67.23vw; position: absolute; left: 0vw; top: 8.333vw;}
.m1_m{ width: 54.895vw; position: absolute; left: 15.625vw; top: 20.3125vw;}
.m1_s{ width: 35.36vw; position: absolute; left: 43.31vw; top: 30.8333vw;}
.p1_txt1{width: 18.17%; position: absolute; left: 68.9vw; top: 15.625vw;}
.p1_txt2{width: 28.177%; position: absolute; left: 63.749vw; top: 21.19vw;}
.main_bsz{ font-size: 14px; color: #8b8b8b; }
.rightbottoms {position: absolute;bottom: 5%;right: 10%;}
.a_anim{ opacity: 0;}
.animated{ animation-fill-mode: forwards; }
.opt0{ opacity: 0;}
.section3{ z-index: 10;}

.bbm-screen{mix-blend-mode: screen;/*滤色模式*/}
.bbm-multiply{mix-blend-mode: multiply;/*正片叠底模式*/}
.bbm-overlay{mix-blend-mode: overlay;/*叠加模式*/}
.bbm-darken{mix-blend-mode: darken;/*变暗模式*/}
.bbm-lighten{mix-blend-mode: lighten;/*变亮模式*/}
.bbm-colord{mix-blend-mode: color-dodge;/*颜色减淡模式*/}
.bbm-saturation{mix-blend-mode: saturation;/*饱和度模式*/}
.bbm-color{mix-blend-mode: color;/*颜色模式*/}
.bbm-luminosity{mix-blend-mode: luminosity;/*亮度模式*/}
.bbm-colorb{mix-blend-mode: color-burn;/*颜色加深模式*/}
.bbm-hue{mix-blend-mode: hue;/*色相模式*/}
.bbm-hlight{mix-blend-mode: hard-light;/*强光模式*/}
.bbm-slight{mix-blend-mode: soft-light;/*柔光模式*/}
.bbm-difference{mix-blend-mode: difference;/*差值模式*/}
.bbm-exclusion{mix-blend-mode: exclusion;/*排除模式*/}

.navtbg{
    width: 100%;
    height: 60px;
    position: fixed;
    z-index: 9999;
    top: 60px;
    left: 0;
    background: rgba(0,0,0,0.8);
    transition: all 0.6s ease;
    transform: translate(0,-400%);
    overflow: hidden;
    display: block;
}
.navtbg.slidershow{
    transform: translate(0,0);

}
.navbar {
    width: 800px;
    padding-top: 14px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.navbar a {
    font-size: 20px;
    color: #eeeeee;
}
.navbar a.current {
    color: #e57aff;
    border-bottom: 2px #e57aff solid;
    padding-bottom: 6px;
}

@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);}
}
.fadeInLeft1{ animation: fadeInLeft1  0.8s ease 0.6s forwards; will-change:transform, opacity;}
.fadeInLeft2{ animation: fadeInLeft1  0.8s ease 0.3s forwards; will-change:transform, opacity;}
.fadeInLeft3{ animation: fadeInLeft1  0.8s ease 0s  forwards; will-change: transform,opacity;}

.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 0.8s  forwards; will-change: transform,opacity;}
.fadeInUp4{ animation: fadeInUp1  0.8s ease 1s  forwards; will-change: transform,opacity;}

@keyframes intoRight{
    0%{ transform: translate(0,0);}
    100%{transform: translate(50%,0);}
}
.intoRight{ animation: intoRight 1s ease forwards;}
@keyframes fadeIn1{
    0%{ opacity: 0;}
    100%{opacity: 1;}
}
.fadeIn1{ animation: fadeIn1 1s ease 0.5s forwards;}
.fixaction3{ height: 300vh;}
@keyframes breath{
    0%{ transform: scale(1); opacity: 0.8;}
    50%{ transform: scale(1.1); opacity:1;}
    100%{ transform: scale(1); opacity:0.8;}
}
.breath{ animation: breath 1.5s linear 0s infinite ;}

@keyframes fromLeft{

    0%{ transform: translate(-50%,0);opacity: 0;}
    100%{transform: translate(0,0);opacity: 1;}
}
.fromLeft{ animation: fromLeft 1s ease forwards;}

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

.fromRight{ animation: fromRight 1s ease forwards;}

.p2{ width: 100%; height: 100vh; position: relative; z-index: 4;}
.iitem{ width: 50vw; position: absolute; left:37vw; top: -25vw; }
.fixaction{ width: 100%; position: relative;}
.fixaction1{ padding-bottom: 400vw;}
.fixitem{ width: 100%; height: 100vh; position: absolute; left: 0; top: 0; overflow: hidden;}
.fix_start{ position: fixed;}
.fix_end{ position: absolute; left: 0; top: auto; bottom: 0;}

/*fonts*/
.fsize68{ font-size:66px; }
.fsize28{ font-size:28px; }
.fsize60{ font-size:2.35vw; }
.fsize50{ font-size:1.6vw;line-height: 1.2;}
.fsize30{ font-size:28px; }
.fsize20{ font-size: 0.93vw;line-height: 1.7;}
.fsize24{ font-size:1.4vw; line-height: 1.8em;}
.lh16{ line-height: 1.6;}

.color2b2828{ color: #2b2828;}
.color595757{ color: #595757;}
.color404246{ color: #404246;}
.color454e54{ color: #454e54;}
.color7e8187{ color: #7e8187;}
.colorb7b7b7{ color:#b7b7b7;}
.color7c7f83{ color:#7c7f83 ;}
.colorabb2bf{ color: #abb2bf;}
.color161616{ color: #161616;}
.color6e6e6e{ color: #6e6e6e;}
.color3e3a39{ color: #3e3a39;}
.color02bdbf{ color: #02bdbf;}
.colorfff{ color: #fff; }
.color000{ color: #000; }
.lh16{ line-height: 1.6;}
a.color02bdbf{ color: #02bdbf;}


.txtC{text-align: center;}
.txtL{text-align: left;}
.txtR{text-align: right;}
.txtJ{text-align: justify;}
.font_bold{font-weight: bold;}
.fovbox1{ width: 50%;}
.fovbox2{ width: 45%;}
.fovbox3{ width: 56%;}
.fovbox4{ width: 46.5%;}
.fovbox5{ width: 49%;}
.fovbox6 {width: 30%;}
.fovbox7 {width: 27.8vw;}
.caoptitle{width: 27.8vw;font-size: 24px; padding:1.1vw 0; position: relative; color: #313131;text-align: center;}
.caoptitle span{ font-size: 18px; margin-left: 20px;}
.caoptitle:after{ content: ''; display: block; width: 30px; height: 5px; background: #313131; position: absolute; left: 0; bottom: 10px;}
.weight_bold{font-weight: bold;}

.sel_section1_pic1{width: 25.1vw;position: absolute;top:2.7vw;left: 42.6vw;}

.section2{ width:100%;}
.section2 .section2_box{position: absolute;left:20.8vw;top:16.6vw;background: rgba(0, 0, 0, 0.7);width: 36.2vw;padding:2.4vw 3.3vw; height: 20.5vw;box-sizing: border-box;}
.section2 .section2_title{}
.section2 .section2_des{margin-top: 1.3vw;}
.section2 .note_bg{position: absolute;left: 18.6vw;top: 35.8vw;width: 25.2vw;padding-top: 1.3vw;padding-left: 2.6vw;}

.section3{ width:100%;}
.section3_title{ width:58.4vw;position: absolute;top:2.7vw;left: 20.8vw;}
.section3_time{width: 100%;position: absolute;left: 0;top: 9vw;color: #c00533;}
.section3 .item_body{width: 71.6vw;position: absolute;top:13.1vw;left: 14.2vw;display: flex;justify-content: space-between;}
.section3 .item1{position: relative;width: 23vw;}
.section3 .item2{position: relative;width: 23vw;}
.section3 .item3{position: relative;width: 23vw;}
.section3 .item_tit{
    position: absolute;top: 1.5vw;left: 1.8vw;border-left:3px solid #000;height: 3.9vw;padding-left:1vw;
}
.section3 .item_title{line-height: 1.2;letter-spacing:0;}
.section3 .item_des{top:34vw;left:0;position: absolute; width: 100%;}
.section3 .product{top:23.5vw;left:0;width: 100%;display: flex;justify-content: center; position: absolute;}
.section3 .item1 .product div{width: 10.7vw;}
.section3 .item2 .product div{width: 9.9vw;}
.section3 .item3 .product div{width: 11.6vw;}
.section3 .item_letter_spacing{letter-spacing:6px;}
.section3 .item_letter_spacing1{letter-spacing:20px;}
.item_btn{width: 12.3vw;height: 3vw; content: ''; position: absolute;top:38vw;left: 5vw;background:url("../feature/btn.png") no-repeat;background-size: 100% auto;transition: all 0.4s ease-in-out;}
.item_btn:hover{background:url("../feature/btn1.png") no-repeat;background-size: 100% auto;transition: all 0.4s ease-in-out;}
@media screen and ( max-width : 800px){
    .interface{height: 125.3vw;margin-bottom: 3vw;}
    .interface_title_text{width:50.9vw;text-align: center;position: absolute;top: 5.5vw;z-index: 9;left:24.55vw;}
    .msections{ display: block;}
    .sections{ display: none;}
    .pbt_20{margin-bottom: 0.2rem;}
    .cp_kv_01 {position: absolute;width:47.3vw;bottom: 56vw;left: 2vw;}
    .cp_kv_02 {position: absolute;width:49.3vw;bottom: 56vw;right: 2vw;}

    .msections .m_tab_btn {
        margin-bottom: 30px;
    }
    .msections .m_tab_btn ul{
        display: flex;
        width: 90%;
        margin: 0 auto;
    }
    .msections .m_tab_btn ul li{
        flex: 1;
        text-align: center;
        line-height: 30px;
        border-bottom: 3px solid #dedddd;
        font-size: 22px;
        color: #999;
    }
    .msections .m_tab_btn ul .active{
        border-color: #000000;
        color: #000;
    }
    .btnDown{width: 20vw;position: absolute;left: 27vw;
        bottom: 9vw;}
    .btnDown img{width: 100%;}

    .bD_1{width: 30vw;
        left: 12vw;
        top: 26.2%;}
    .bD_2{width: 30vw;
        left: 57vw;
        top: 26.2%;}
    .bD_3{width: 30vw;
        left: 12vw;
        top: 35%;}
    .bD_4{width: 30vw;
        left: 57vw;
        top: 35%;}   
    .bD_5{width: 30vw;
        left: 12vw;
        top: 47.3%}
    .bD_6{width: 30vw;
        left: 57vw;
        top: 47.3%}
    .bD_7{width: 30vw;
        left: 12vw;
        top: 59.6%}
    .bD_8{width: 30vw;
        left: 57vw;
        top: 59.6%}
    .bD_9{width: 30vw;
        left: 12vw;
        top: 68.4%}
    .bD_10{width: 30vw;
        left: 57vw;
        top: 68.4%}
    .bD_11{width: 30vw;
        left: 12vw;
        top: 80.9%}
    .bD_12{width: 30vw;
        left: 57vw;
        top: 80.9%}
    .bD_13{width: 30vw;
        left: 35vw;
        top: 90.8%;}
    .bD_14{width: 30vw;
        left: 59vw;
        top: 48.3%}
    .bD_15{width: 30vw;
        left: 16vw;
        top: 56%}
    .bD_16{width: 30vw;
        left: 59vw;
        top: 56%}
    .bD_a_1{
        position: absolute;
        top: 13.7%;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: 28vw;
    }
    .bD_a_1 img{
        width: 100%;
    }
    .bD_a_2{
        position: absolute;
        top: 23.8%;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: 54vw;
    }
    .bD_a_2 img{
        width: 100%;
    }
    .bottom_b{
        position: absolute;
        top: 98%;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: 54vw;
    }
    .bottom_b img{
        width: 100%;
    }
    /* #v_c{width: 93vw;height: 54vw;position: absolute;bottom: 57vw;left: 0;right: 0;margin: 0 auto;} */
    .huxi{
        transform-origin: center center;
        animation: b_s 2.5s infinite;
        -webkit-animation: b_s 2.5s infinite;
        -moz-animation: b_s 2.5s infinite;
        -o-animation: b_s 2.5s infinite;
    }
    @keyframes b_s {
        0%{transform: scale(1);}
        50%{transform: scale(1.1);}
        100%{transform: scale(1);}
    }
    @-webkit-keyframes b_s {
        0%{transform: scale(1);}
        50%{transform: scale(1.1);}
        100%{transform: scale(1);}
    }
    @-moz-keyframes b_s {
        0%{transform: scale(1);}
        50%{transform: scale(1.1);}
        100%{transform: scale(1);}
    }
    @-o-keyframes b_s {
        0%{transform: scale(1);}
        50%{transform: scale(1.1);}
        100%{transform: scale(1);}
    }
    .content_1{
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.7);
        display: none;
        z-index: 99;
    }
    .c_content_1{
        width: 92vw;
        height: 105vw;
        position: absolute;
        top: 13%;
        left: 0;
        right: 0;
        margin: 0 auto;
        background: url(../feature/content_1.png) no-repeat;
        background-size: contain;
        background-position: center;
    }
    .content_2{
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.7);
        
        display: none;
    }
    .c_content_2{
        width: 92vw;
        height: 105vw;
        position: absolute;
        top: 13%;
        left: 0;
        right: 0;
        margin: 0 auto;
        background: url(../feature/content.png) no-repeat;
        background-size: contain;
        background-position: center;
    }
    .c_content_span{
        width: 84vw;
        height: 61vw;
        position: absolute;
        top: 13%;
        left: 0;
        right: 0;
        margin: 0 auto;
        font-size: 10px;
        color: #000;
    }
    .c_content_p{
        width: 84vw;
        height: 16vw;
        position: absolute;
        top: 80%;
        left: 0;
        right: 0;
        margin: 0 auto;
        font-size: 10px;
        color: red;
        font-weight: bold;
    }
}
@media screen and ( max-width : 320px){
    .msections{ display: block;}
    .sections{ display: none;}
    /*.swiper_nav6>a{font-size: 0.6rem;}*/
    .size_title_text{font-size: 2.4rem;padding:1.5rem 0;color:#2e2b2b; width: 100%;text-align: center;}
    /*.swiper_nav{ position: absolute; top: 0; left: 2%; width: 96%; display: flex; z-index: 8;}*/
}