.sections{ width: 100%; position: relative;background: #000;}
.sections img{ display: block!important; width: 100%!important;}
.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 1s  forwards; will-change: transform,opacity;}
.fadeInUp4{ animation: fadeInUp1  0.8s ease 1.4s  forwards; will-change: transform,opacity;}

.section66_icon_01{ animation: fadeInUp1  0.6s ease 0.4s  forwards; will-change: transform,opacity;}
.section66_icon_02{ animation: fadeInUp1  0.6s ease 0.5s  forwards; will-change: transform,opacity;}
.section66_icon_03{ animation: fadeInUp1  0.6s ease 0.6s  forwards; will-change: transform,opacity;}
.section66_icon_04{ animation: fadeInUp1  0.6s ease 0.7s  forwards; will-change: transform,opacity;}
.section66_icon_05{ animation: fadeInUp1  0.6s ease 0.8s  forwards; will-change: transform,opacity;}
.section66_icon_06{ animation: fadeInUp1  0.6s ease 0.9s  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 1.4s ease 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 scaless{
    0%{ transform: scale(1);}
    50%{ transform: scale(1.1);}
}


@keyframes scales{
    0%{ transform: scale(1.1);}
    50%{ transform: scale(1);}
}


@keyframes fromLeft{

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

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

.fromRight{ animation: fromRight 0.8s ease forwards;}
.fromRight1{ animation: fromRight 0.8s ease 0.3s forwards;}
.fromRight2{ animation: fromRight 0.8s ease 0.3s 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:58px;  letter-spacing:0.3vw;}
.fsize50{ font-size:48px; letter-spacing:0.1vw;}
.fsize30{ font-size:28px; }
.fsize20{ font-size:18px; }
.fsize24{ font-size:22px;}
.fsize40{ font-size:38px;}
.fsize26{ font-size:24px;}
.fsize32{ font-size:30px;}
.fsize34{ font-size:32px;}
.fsize22{ font-size:20px;line-height: 1.6vw;}
.fsize18{ font-size:16px;}
.fsize36{ font-size:36px;}
.fsize38{ font-size:38px;}
.fsize66{ font-size:64px;}
.fsize14{ font-size:14px;}
.fsize12{ font-size:14px;}
.fsize16{ font-size:16px;line-height: 1.6;}
.fsize48{ font-size: 46px;}
.fsize46{ font-size: 44px;}
.fsize76{ font-size: 74px;}
.fsize80{ font-size: 78px;}
.fsize63{ font-size: 61px;}
.lh16{ line-height: 1.6;}

.colorfff2c7{ color: #fff2c7;}
.color2b2828{ color: #2b2828;}
.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;}
.color00439c{ color: #00439c;}
.color595757{color:#595757;}
.colorfff{ color: #fff; }
.color000{ color: #000; }
.lh16{ line-height: 1.6;}
a.color02bdbf{ color: #00baff;}
.bg000{background: #000;}
.margin_bottom_2{margin-bottom: 2vw;}
.margin_bottom_4{margin-bottom: 4vw;}
.margin_bottom_6{margin-bottom: 6vw;}
.padding_bottom_4{padding-bottom: 4vw;}
.padding_bottom_6{padding-bottom: 6vw;}
.padding_top_4{padding-top: 4vw;}
.padding_top_6{padding-top: 6vw;}

@media screen and (max-width:1600px){ /*83*/

    .fsize68{ font-size:56px; }
    .fsize28{ font-size:22px; }
    .fsize60{ font-size:48px; }
    .fsize50{ font-size:39px;}
    .fsize30{ font-size:24px;  }
    .fsize20{ font-size:16px;}
    .fsize24{ font-size:16px;}
    .fsize40{ font-size:28px;}
    .fsize26{ font-size:20px;}
    .fsize32{ font-size:24px;}
    .fsize34{ font-size:26px;}
    .fsize22{ font-size:16px;}
    .fsize18{ font-size:16px;}
    .fsize36{ font-size:29px;}
    .fsize66{ font-size:53px;}
    .fsize14{ font-size:12px;}
    .fsize48{ font-size:38px;}
    .fsize38{ font-size:31px;}
    .fsize16{ font-size:14px;}
    .fsize46{ font-size: 36px;}
    .fsize76{ font-size:61px;}
    .fsize80{ font-size: 64px;}
    .fsize63{ font-size: 50px;}

    .main_text{ font-size: 16px; margin-bottom: 10px; }
    .vm_ctxt{ font-size: 18px; }
    .main_title{ font-size: 36px; margin-bottom: 10px; }


}

@media screen and (max-width:1400px){ /*72*/

    .fsize68{ font-size:48px; }
    .fsize28{ font-size:19px; }

    .fsize60{ font-size:41px; }
    .fsize50{ font-size:34px;}
    .fsize30{ font-size:20px;  }
    .fsize20{ font-size:14px;}
    .fsize26{ font-size:18px;}
    .fsize24{ font-size:14px;}
    .fsize40{ font-size:22px;}
    .fsize32{ font-size:20px;}
    .fsize34{ font-size:20px;}
    .fsize22{ font-size:14px;}
    .fsize18{ font-size:14px;}
    .fsize36{ font-size:25px;}
    .fsize66{ font-size:46px;}
    .fsize14{ font-size:12px;}
    .fsize48{ font-size:33px;}
    .fsize38{ font-size:27px;}
    .fsize16{ font-size:14px;}
    .fsize46{ font-size: 31px;}
    .fsize76{ font-size: 53px;}
    .fsize80{ font-size: 56px;}
    .fsize63{ font-size: 43px;}

    .main_text{ font-size: 14px; margin-bottom: 8px; }
    .vm_ctxt{ font-size: 16px; }
    .main_title{ font-size: 32px; margin-bottom:8px; }
}

.pt {
    position: absolute;
    text-align:left;
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #CFCFCF;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
    z-index: 2209;
    width: auto;
    height:auto;
    display:none;
}
.pt .cont {
    height: auto;
    overflow-y: auto;
    background-color: #FFFFFF;
    padding: 20px;
    font-size: 14px;
}
.pt .out, .pt .in {
    display: block;
    font-family: simsun;
    font-size: 0;
    height: 0;
    overflow: visible;
    position: absolute;
    width: 0;
}
/*************up*******************/
.pt-up .out, .pt-up .in{
    border-style: dashed dashed solid;
}
.pt-up .out {
    border-color: transparent transparent #CFCFCF;
    border-width: 0 7px 8px;
    left: 28px;
    top: -8px;
}
.pt-up .in {
    border-color: transparent transparent #FFFFFF;
    border-width: 0 6px 7px;
    left: 29px;
    top: -7px;
}
/*************right****************/
.pt-right .out, .pt-right .in {
    border-style: dashed dashed dashed solid;
}
.pt-right .out {
    border-color: transparent transparent transparent #CFCFCF;
    border-width: 8px 0 7px 7px;
    right: -7px;
    top: 28px;
}
.pt-right .in {
    border-color: transparent transparent transparent #FFFFFF;
    border-width: 7px 0 6px 6px;
    right: -6px;
    top: 29px;
}
/*************down*****************/
.pt-down .out, .pt-down .in {
    border-style: solid dashed dashed;
}
.pt-down .out {
    border-color: #CFCFCF transparent transparent;
    border-width: 8px 7px 0;
    bottom: -8px;
    left: 28px;
    top: auto;
}
.pt-down .in {
    border-color: #FFFFFF transparent transparent;
    border-width: 7px 6px 0;
    bottom: -7px;
    left: 29px;
    top: auto;
}
/*************left*****************/
.pt-left .out, .pt-left .in {
    border-style: dashed solid dashed dashed;
}
.pt-left .out {
    border-color: transparent #CFCFCF transparent transparent;
    border-width: 7px 8px 7px 0;
    left: -8px;
    top: 28px;
}
.pt-left .in {
    border-color: transparent #FFFFFF transparent transparent;
    border-width: 6px 7px 6px 0;
    left: -7px;
    top: 29px;
}
.left_btn{left: 20vw;}
.right_btn{left: 20vw;}
.section3 .swiper-button-next, .section3 .swiper-button-prev{
    background: none;
}
.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;}

.part02{width:100%;height: 160vw;position: relative;}
.sticky_box{width: 100%; height: 48vw;position: -webkit-sticky;position: sticky;overflow: hidden;top: 0;}
.section9999{z-index: 10;}

.section1_pic{width:13.1vw;position: absolute;top: 9vw;left:58.4vw;z-index: 2;}
.section1_des{width: 20vw;position: absolute;top: 13vw;left: 58.4vw;z-index: 2}
.section1_btn{width:11.2vw;position: absolute;top: 22vw;left:58.4vw;cursor:pointer; z-index:2;}

.section3{background:url("../images/inzone_hub/hub_02.jpg") repeat-y;background-size: 100% auto;padding-top: 4vw;}
.swiper-container22{width: 80vw;margin: 0 auto;}
.section3_nav{width: 67.7vw;margin: 0 auto 4vw;position:relative;height: 4.2vw;}
.section3_nav .nav_item{height: 4.2vw;position: absolute;cursor: pointer;}
.section3_nav .nav_item:first-child{width: 34.8vw;top:0;left: 0;}
.section3_nav .nav_item:last-child{width: 34.8vw;top:0;right:0;}
.hub_02_01{width: 16.6vw;margin: 4vw auto;}

.hub_02_01_box{position: absolute;width: 100%;height: 17vw;left: 0;top: 9vw;display: flex;justify-content: center;}
.hub_02_01_box_item{margin: 0 0.5vw;width: 16.6vw;}

.hub_02_02_box{position: absolute;width: 100%;height: 17vw;left: 0;top: 9vw;display: flex;justify-content: center;}
.hub_02_02_box_item{margin: 0 0.5vw;width: 16.6vw;}

.hub_02_02{width: 51.3vw;margin: 4vw auto;}
.hub_02_03{width: 67.7vw;margin: 6vw auto;}
.hub_02_04{width: 67.7vw;margin: 6vw auto;}
.hub_02_05{width: 67.7vw;margin: 6vw auto;position: relative;}
.hub_02_05 img{width: 29.4vw!important;margin: 0 auto;}
.nav_sub_content{width:67.6vw;margin: 0 auto 4vw;position:absolute;height: 4.2vw;display: flex;justify-content: space-between;left: 0;top:3.8vw;}
.nav_sub_content .nav_sub_item{width: 33.33%; height: 4.2vw;cursor: pointer;display: flex;justify-content:center;color: #9a72dc;}
.nav_sub_content .nav_sub_item.active{color: #fff;}
.nav_sub_content .nav_sub_item .des{padding-top: 0.5vw;line-height: 1.4;}
.swiper-container33 .swiper-slide img{width: 67.7vw!important;margin: 0 auto;}

@keyframes breath2{
    0%{ transform: scale(1); opacity: 0.2;}
    100%{ transform: scale(1); opacity:1;}
}
.ps_item{display: none;}
.ps_item .note_left{position: absolute;top:36.6vw;left: 2vw;color: #000;}
.ps_item .note_right{position: absolute;top:36.6vw;right: 2vw;color: #000;}
.ps_item .note{position: absolute;bottom:-2vw;left: 13vw;color: #000;}
.ps_item.act{display: block;animation: breath2 1.5s ease-in-out 0s forwards;}

@media screen and (max-width: 1680px){
    .width1440 {width: 1300px;}
}

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

}

@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;overflow: hidden;background: #1f252d;}
    .sections{ display: none;}
    .ps_images{height:275vw;overflow: hidden;padding-top:14vw;}
    .swiper_nav6>a{font-size: 0.9rem;}
    .swiper_nav8>a{font-size: 0.9rem;}
    .swiper_nav{ position: absolute; top: 0; left: 2%; width: 96%; display: flex; z-index: 8;}
    .swiper_nav8{ position: absolute; top: 2vw; left: 2%; width: 96%; display: flex; z-index: 8;}
    .size_title_text{font-size: 2.4rem;padding:1.5rem 0;color:#2e2b2b; width: 100%;text-align: center;}

    .m_m9{width: 42.4vw;position: absolute;left: 6vw;top: 26vw;}
    .m_m3{width: 42.4vw;position: absolute;right: 6vw;top: 26vw;}
    .m_buds{width: 42.4vw;position: absolute;left: 6vw;top: 26vw;}
    .m_h9{width: 42.4vw;position: absolute;right: 6vw;top: 26vw;}
    .m_h7{width: 42.4vw;position: absolute;left: 6vw;top: 75vw;}
    .m_h5{width: 42.4vw;position: absolute;right: 6vw;top: 75vw;}
    .m_h3{width: 42.4vw;position: absolute;left: 6vw;top: 124vw;}


    .margin_bottom_2{margin-bottom: 2vw;}
    .margin_bottom_4{margin-bottom: 4vw;}
    .margin_bottom_6{margin-bottom: 6vw;}
    .padding_bottom_4{padding-bottom: 4vw;}
    .padding_bottom_6{padding-bottom: 6vw;}
    .padding_top_4{padding-top: 4vw;}
    .padding_top_6{padding-top: 6vw;}
    .padding_top_title{padding-top: 17.6vw;}

    .font_size_50{font-size: 6.5vw;line-height: 1.4;}
    .font_size_48{font-size: 5.3vw;margin-bottom: 2vw;}
    .font_size_38{font-size: 3.5vw;line-height: 1.6;}
    .font_size_36{font-size:3vw;line-height: 1.9;}
    .font_size_18{font-size: 3vw;}
    .font_size_20{font-size: 3.8vw; line-height: 1.6;}
    .font_size_28{font-size: 5vw;}

    .bgf5f5f5{background:#f5f5f5;}
    .colorfff{color:#fff;}
    .color5611b2{color:#5611b2;}
    .color695195{color:#695195;}
    .color394ab5{color:#394ab5;}
    .color767fb5{color:#767fb5;}
    .color746d8d{color:#746d8d;}
    .colorc0c0c0{color:#c0c0c0;}
    .color595757{color:#595757;}
    .color000{color:#000;}

    .fsize14{line-height: 1.6;}

    .color9da3c1{color:#9da3c1;}
    .pbt_20{margin-bottom: 0.2rem;}
    .section1_btn{    width: 44.2vw;
        position: absolute;
        top: 70vw;
        left: 28.4vw;
        cursor: pointer;
        z-index: 2;}
    .m_part01{width: 100%;}
    .kv_01 { width: 56vw;position: absolute;height: 12vw;display: block;top: 84vw;left: 22vw;}

    .msection3{width: 100%;}
    .msection3 .swiper-button-next, .msection3 .swiper-button-prev{
        background: none;
        width: 17px;
    }
    .swiper-container222{width: 100%;margin: 0 auto;}
    .msection3 .section3_nav{width: 100%;position:relative;height: auto;margin: 0;}
    .msection3 .section3_nav .nav_item{position: absolute;cursor: pointer;}
    .msection3 .section3_nav .nav_item{width: 50%;height: 12vw;top: 15vw;left: 0;}
    .msection3 .section3_nav .nav_item:last-child{width: 50%;height: 12vw;top: 15vw;right:0;left: unset;}
    .hub_02_01{width: 100%;margin: 0;}
    .hub_02_02{width: 100%;margin: 0;height: auto;}
    .hub_02_03{width: 100%;margin: 0;}
    .hub_02_04{width: 100%;margin: 0;}
    .hub_02_05{width: 100%;margin: 0;position: relative;}
    .hub_02_05 img{width: 100%!important;margin: 0;}
    .nav_sub_content{width:100%;margin: 0 auto 4vw;position:absolute;height: 4.2vw;display: flex;justify-content: space-between;left: 0;top:18.8vw;}
    .nav_sub_content .nav_sub_item{width: 33.33%; height: 4.2vw;cursor: pointer;display: flex;justify-content:center;color: #9a72dc;}
    .nav_sub_content .nav_sub_item.active{color: #fff;}
    .nav_sub_content .nav_sub_item .des{padding-top: 0.5vw;line-height: 1.4;}
    .swiper-container333 .swiper-slide img{width: 100%;margin: 0 auto;}

}
@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;}
}