:root {
    --duration: .8s;
    --ease: cubic-bezier(.7, 0, .3, 1);
}
body{margin: 0; padding: 0;}
body *{font-family: 'SL-Simplified';}
.pc_index{width:100%;background: #161616;}
.sections{ width: 100%; position: relative;}
.sections img{ display: block; width: 100%;}
.section{ width: 100%; position: relative;}
.animated{ animation-fill-mode: forwards; }
.sauto_anim{ opacity: 0;}
@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.3s  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;}

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

.fsize116{ font-size:6vw; }
.fsize80{ font-size:4.2vw; }
.fsize61{ font-size:3.2vw; }
.fsize50{ font-size:2.8125vw; }
.fsize45{ font-size:2.3vw; }
.fsize40{ font-size:2.1vw;line-height: 1.2;}
.fsize30{ font-size:1.6vw; line-height: 1.4;}
.fsize24{ font-size:1.25vw;line-height: 1.6;}
.fsize25{ font-size:1.3vw;line-height: 1.6;}
.fsize22{ font-size:1.1vw;line-height: 1.6;}
.fsize20{ font-size:1vw;line-height: 1.6;}
.fsize18{ font-size:0.9vw;line-height: 1.6;font-weight: 300;letter-spacing: 0.05vw;}
.fsize16{ font-size:0.8vw;line-height: 1.6;}
.fsize14{ font-size:0.729vw;}

.colorfff{ color: #fff; }
.colorcecece{color: #f8f8f8;}
.color000{ color: #000; }
.colorf4e7ae{color: #f4e7ae;}
.colore6d4b2{color: #e6d4b2;}
.lh16{ line-height: 1.6;}
a.color02bdbf{ color: #00baff;}
.bg000{background: #000;}

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

.section1_title{width:39%;position: absolute;top:12.1vw;left:28.5%;}

.section2{width: 100%;position: relative;}
.section2 .section2_des{position:absolute;width: 45.7vw;left:33.3%;top:11.4vw;color:#f8f8f8;font-weight: 400;letter-spacing:0.1vw;}


.section3{width: 100%;position: relative;}
.section3 .items{position:absolute;    left: 19.5%;top: 17.8vw;width: 63%;display: flex;justify-content: space-between;}
.section3 .items .item:first-child{width: 16.9vw;}
.section3 .items .item:first-child{width: 15.6vw;}
.section3 .items .item:last-child{width: 15.9vw;}
.section3 .items .item .title{color: #CECECE;}
.section3 .items .item .des{color: #CECECE;}

.section4{width: 100%;position: relative;}
.section4 .section4_body{width: 62.5%;position: absolute;top:10.9vw;left:18.8%;display: flex;justify-content: space-between;}
.section4 .section4_body .section4_item{width: 38.2vw;position: relative;}
.section4 .section4_body .section4_item:last-child{width:23vw;position: relative; }

.section5{width: 100%;position: relative;}
.section5 .section5_title1{position: absolute;left: 23.2%;top:11.6vw;}
.section5 .section5_title2{position: absolute;left: 23.2%;top:29.2vw;}
.section5 .section5_title3{position: absolute;left: 23.2%;top:50.5vw;}
.section5 .section5_title4{position: absolute;left: 55.8%;top:11.5vw;width: 24vw;}
.section5 .section5_title5{position: absolute;left: 55.8%;top:20.5vw;width: 24vw;}
.section5 .section5_title6{position: absolute;left: 55.8%;top:28.2vw;width: 24vw;}
.section5 .section5_title7{position: absolute;left: 55.8%;top:35.5vw;width: 24vw;}
.section5 .section5_des1{position: absolute;left: 20.6%;top: 34.5vw;width: 24vw;}
.section5 .section5_des2{position: absolute;left: 53.2%;top: 40.5vw;width: 26vw;}

.section7{width: 100%;position: relative;}
.section7 .section7_title1{position: absolute;left: 23.2%;top:12.6vw;}
.section7 .section7_title2{position: absolute;left: 23.2%;top:56.5vw;}
.section7 .section7_title3{position: absolute;left: 48.4%;top:56.5vw;}
.section7 .section7_title4{position: absolute;left: 23.2%;top:79.2vw;}
.section7 .section7_des1{position: absolute;left: 21.2%;top: 15.5vw;width: 56vw;}
.section7 .section7_des2{position: absolute;left: 21.2%;top: 59.5vw;width: 20vw;}
.section7 .section7_des3{position: absolute;left: 46.6%;top: 59.5vw;width: 31vw;}
.section7 .section7_des4{position: absolute;left: 21.2%;top: 82vw;width: 56vw;}

.msections{ width: 100%; position: relative; display: none;}
.msections img { display: block; width: 100%; }
.msection{ width: 100%;}


@media screen and (min-width: 1921px){ }

@media screen and ( max-width : 800px){
    .msections{ display: block;overflow: hidden;background: #fff;}
    .sections{ display: none;}
    .fsize61{ font-size:8.1vw; line-height: 1.2;}
    .fsize30{ font-size:3.2vw; line-height: 1.4;}
    .fsize24{ font-size:3vw; line-height: 1.5;}
    .fsize28{ font-size:3.7vw; line-height: 1.5;}

    .section1_title{width:90%;position: absolute;top:27.9vw;left:5%;}
    .section1_pic1{width:94.4%;position: absolute;top:105vw;left:2.8%;}

    .section2{width: 100%;position: relative;}
    .section2 .section2_title{position:absolute;left:0;top:10vw; width: 100%;font-weight: bold;display: flex;
        align-content: center;
        justify-content: center;
        align-items: center;}
    .section2 .section2_title span{font-weight: 200;}
    .section2 .section2_des{position:absolute;width: 100%;left: 0;top:21.5vw;}
    .section2 .section2_des span{color: transparent;
        background: linear-gradient(133deg, rgb(110, 86, 194) 10%, rgb(50, 86, 128) 100%);
        -webkit-background-clip: text;}

    .section3{width: 100%;position: relative;}
    .section3 .play_button{position:absolute;left:38.55%;top:24.4vw; width: 22.9vw;cursor: pointer;}


    .section4{width: 100%;position: relative;background: #1b1b1b;}
    .section4 .section4_title{position:relative;padding-top:13.7vw;margin-bottom: 10.3vw; width: 100%;font-weight: bold;display: block;}
    .section4 .section4_title span{font-weight: 200;}
    .section4 .section4_body{position:relative;width: 95.9%;margin: 0 auto;padding-bottom:5.5vw;display: flex;justify-content: space-between;flex-wrap: wrap;}
    .section4 .section4_body .section4_item{width: 100%;position: relative;margin-bottom: 4.7vw;}
    .section4 .section4_body .section4_item .section4_item_btn{width: 48vw;position: absolute;top:153vw;left: 26vw;}


    .section6{width: 100%;position: relative;}
    .section6 .section6_title{position:absolute;left:0;top:13.6vw; width: 100%;font-weight: bold;display: block;}
    .section6 .section6_title span{font-weight: 200;}
    .section6 .section6_btn{position:absolute;left:26.2%;top:148.9vw; width: 47.6vw;}

    .section8{width: 100%;position: relative;}
    .section8 .section8_title{position:absolute;left:0;top:13.3vw; width: 100%;font-weight: bold; display: block;}
    .section8 .section8_title span{font-weight: 200;}
    .section8 .item_body{position: absolute; width:95.5vw;left: 2.25vw;top:40.9vw; display: flex;flex-wrap: wrap;justify-content: space-between;}
    .section8 .item_body .item{width: 46.7vw;position: relative;margin-bottom: 3.2vw;}
    .section8 .des{width: 100%;text-align: center;font-weight: normal;position: absolute;top:44.5vw;left: 0;}
    .section8 .btn{width: 26.1vw;position: absolute;left: 10.4vw;bottom:4.1vw;}

    .section7{width: 100%;position: relative;height:213.3vw;
        background: #0a0a10;}
    .section7 .section7_tit{position:absolute;left:0;top:7.9vw;font-weight: bold;width: 100%;}
    .section7 .section7_title{position:absolute;left:0;top:17.7vw;font-weight: 200;width: 100%;}
    .section7 .section7_content{width: 100%;height: 100%;position: absolute;top:0;left: 0;}
    .section7 .section7_content .section7_content_item{width: 100%;height: 100%;position: absolute;top:0;left: 0;display: none;}
    .section7 .section7_content .section7_content_item.active{display: block;}
    .section7 .section7_logo{position:absolute;left:42%;top:40vw;height: 6.4vw;}
    .section7 .section7_logo img{height: 6.4vw;}
    .section7 .section7_des{position:absolute;left:42%;top:48vw;}
    .section7 .section7_video_box{position:absolute;left:42%;top:56vw;width: 56vw;}
    .section7 .section7_video{position:absolute;left: 1vw;top: 1vw;width: 54.2vw;}
    .section7 .section7_site{position:absolute;left:42.7%;top:97vw;width: 32.5vw;}
    .section7 .section7_nav{position:absolute;left:2%;top:42vw;width:46vw;height: 69vw;display: flex;flex-direction: column;justify-content: space-around;}
    .section7 .section7_nav .section7_nav_item{display: flex;align-items: center;align-content: center;cursor: pointer;}
    .section7 .section7_nav .section7_nav_item .line{width:5.6vw;background: rgba(255, 255, 255, 0.4);height: 1px;margin-right: 1.4vw;transition: all 0.3s ease-out;}
    .section7 .section7_nav .section7_nav_item .text{color: rgba(255, 255, 255, 0.4);font-size: 3.2vw;transition: all 0.3s ease-out;}
    .section7 .section7_nav .section7_nav_item.active .line{width:5.6vw;background: #4f43af;height: 1px;}
    .section7 .section7_nav .section7_nav_item.active .text{color: rgba(255, 255, 255, 1);font-size: 4.8vw;}
    .section7 .section7_pic{position:absolute;left:0;top:0;width: 100%;}
    .section7 .section7_biaochi{position:absolute;left: -20vw;top: 30vw;width: 140vw;transform: translateY(105vw);}
    .section7 .planet-nav{position:absolute;left: -30vw;top: 15vw;width: 160vw;transform:translateY(105vw) rotate(53deg); transition: all var(--duration) linear;}
    .section7 .planet-nav tspan {
        cursor: pointer;
        fill: #FFF;
        pointer-events: auto;
        opacity: 0.4;
        transition: opacity var(--duration) linear;
    }
    .section7 .planet-nav tspan.active {opacity: 1;}

    .section7 .product_pic{position: absolute;width: 42.3vw;left: 27.9vw;top: 167vw;}
    .section7 .product_pic .product_pic_item{display: none;}
    .section7 .product_pic .product_pic_item:nth-child(3){padding-top: 2vw;}
    .section7 .product_pic .product_pic_item:nth-child(4){padding-top: 2vw;}
    .section7 .product_pic .product_pic_item:nth-child(5){padding-top: 2vw;}
    .section7 .product_pic .product_pic_item:nth-child(6){padding-top: 2vw;}
    .section7 .product_pic .product_pic_item.active{display: block;}

    .section7 .jiantou{position: absolute;top: 131vw;left: 44vw;width: 1.1vw;}
    .section7 .note{position: absolute;top: 22vw;left: 89.1vw;width: 7.1vw;}

}
@media screen and ( max-width : 320px){
    .msections{ display: block;}
    .sections{ display: none;}
}