.color_Linear_gradient1{
    color:transparent;
    background-image: -webkit-linear-gradient(136.61deg, rgba(235, 116, 237, 0.77) 20%, rgba(95, 167, 250, 0.92) 99.91%);/*-webkit代表chrome、safari私有属性*/
    background-image: -moz-linear-gradient(136.61deg, rgba(235, 116, 237, 0.77) 20%, rgba(95, 167, 250, 0.92) 99.91%);/*-moz代表firefox浏览器私有属性*/
    background-image: -ms-linear-gradient(136.61deg, rgba(235, 116, 237, 0.77) 20%, rgba(95, 167, 250, 0.92) 99.91%);/*-ms代表IE浏览器私有属性*/
    background-image: -o-linear-gradient(136.61deg, rgba(235, 116, 237, 0.77) 20%, rgba(95, 167, 250, 0.92) 99.91%);/*-o代表opera私有属性*/
    background-image: linear-gradient(136.61deg, rgba(235, 116, 237, 0.77) 20%, rgba(95, 167, 250, 0.92) 99.91%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.color_Linear_gradient2{
    color:transparent;
    background-image: -webkit-linear-gradient(90deg, rgba(154, 161, 184, 1)10%, rgba(255, 255, 255, 1) 70%);/*-webkit代表chrome、safari私有属性*/
    background-image: -moz-linear-gradient(90deg, rgba(154, 161, 184, 1)10%, rgba(255, 255, 255, 1) 70%);/*-moz代表firefox浏览器私有属性*/
    background-image: -ms-linear-gradient(90deg, rgba(154, 161, 184, 1)10%, rgba(255, 255, 255, 1) 70%);/*-ms代表IE浏览器私有属性*/
    background-image: -o-linear-gradient(90deg, rgba(154, 161, 184, 1)10%, rgba(255, 255, 255, 1) 70%);/*-o代表opera私有属性*/
    background-image: linear-gradient(90deg, rgba(154, 161, 184, 1)10%, rgba(255, 255, 255, 1) 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.color_Linear_gradient3{
    color:transparent;
    background-image: -webkit-linear-gradient(90deg, rgba(0, 105, 255, 1) 0.51%, rgba(0, 222, 255, 1) 76.22%, rgba(0, 255, 255, 1) 100%);/*-webkit代表chrome、safari私有属性*/
    background-image: -moz-linear-gradient(90deg, rgba(0, 105, 255, 1) 0.51%, rgba(0, 222, 255, 1) 76.22%, rgba(0, 255, 255, 1) 100%);/*-moz代表firefox浏览器私有属性*/
    background-image: -ms-linear-gradient(90deg, rgba(0, 105, 255, 1) 0.51%, rgba(0, 222, 255, 1) 76.22%, rgba(0, 255, 255, 1) 100%);/*-ms代表IE浏览器私有属性*/
    background-image: -o-linear-gradient(90deg, rgba(0, 105, 255, 1) 0.51%, rgba(0, 222, 255, 1) 76.22%, rgba(0, 255, 255, 1) 100%);/*-o代表opera私有属性*/
    background-image: linear-gradient(90deg, rgba(0, 105, 255, 1) 0.51%, rgba(0, 222, 255, 1) 76.22%, rgba(0, 255, 255, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.color_Linear_gradient4{
    color:transparent;
    background-image: -webkit-linear-gradient(90deg, rgba(7, 0, 233, 1) 0%, rgba(156, 101, 253, 1) 0%, rgba(234, 210, 120, 1) 100%);/*-webkit代表chrome、safari私有属性*/
    background-image: -moz-linear-gradient(90deg, rgba(7, 0, 233, 1) 0%, rgba(156, 101, 253, 1) 0%, rgba(234, 210, 120, 1) 100%);/*-moz代表firefox浏览器私有属性*/
    background-image: -ms-linear-gradient(90deg, rgba(7, 0, 233, 1) 0%, rgba(156, 101, 253, 1) 0%, rgba(234, 210, 120, 1) 100%);/*-ms代表IE浏览器私有属性*/
    background-image: -o-linear-gradient(90deg, rgba(7, 0, 233, 1) 0%, rgba(156, 101, 253, 1) 0%, rgba(234, 210, 120, 1) 100%);/*-o代表opera私有属性*/
    background-image: linear-gradient(90deg, rgba(7, 0, 233, 1) 0%, rgba(156, 101, 253, 1) 0%, rgba(234, 210, 120, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.color_Linear_gradient5{
    color:transparent;
    background-image: -webkit-linear-gradient(90deg, rgba(248, 255, 108, 1), rgba(61, 188, 250, 1) 50%);/*-webkit代表chrome、safari私有属性*/
    background-image: -moz-linear-gradient(90deg, rgba(248, 255, 108, 1), rgba(61, 188, 250, 1) 50%);/*-moz代表firefox浏览器私有属性*/
    background-image: -ms-linear-gradient(90deg, rgba(248, 255, 108, 1), rgba(61, 188, 250, 1) 50%);/*-ms代表IE浏览器私有属性*/
    background-image: -o-linear-gradient(90deg, rgba(248, 255, 108, 1), rgba(61, 188, 250, 1) 50%);/*-o代表opera私有属性*/
    background-image: linear-gradient(90deg, rgba(248, 255, 108, 1), rgba(61, 188, 250, 1) 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.color_Linear_gradient6{
    color:transparent;
    background-image: -webkit-linear-gradient(90deg, rgba(255, 198, 255, 1) 0%, rgba(82, 251, 255, 1) 100%);/*-webkit代表chrome、safari私有属性*/
    background-image: -moz-linear-gradient(90deg, rgba(255, 198, 255, 1) 0%, rgba(82, 251, 255, 1) 100%);/*-moz代表firefox浏览器私有属性*/
    background-image: -ms-linear-gradient(90deg, rgba(255, 198, 255, 1) 0%, rgba(82, 251, 255, 1) 100%);/*-ms代表IE浏览器私有属性*/
    background-image: -o-linear-gradient(90deg, rgba(255, 198, 255, 1) 0%, rgba(82, 251, 255, 1) 100%);/*-o代表opera私有属性*/
    background-image: linear-gradient(90deg, rgba(255, 198, 255, 1) 0%, rgba(82, 251, 255, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.white{
    color: #fff;
}
.ba_white{
    background: #ffffff;
}
.black{
    color: black;
}
.ba_black{
    background: black;
}
main{
    overflow: hidden;
}
.pos-a{
    position: absolute !important;
}
.h-100vh{
    height: 100vh !important;
}
.set{
    position: relative;
    width: 100%;
}
.set_text{
    width: 84%;
}
.set_text article{
    display: flex;
    flex-flow: column;
}
img{
    object-fit: cover;
}
.title{
    font-size: 3rem;
}
.setWrap-center{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.play-cont,.p2-img-cont>canvas,canvas {
    width: 100vw;
    height: 100vh;
}
.font25 {
    font-size: calc(100vw / 25);
}
.font48 {
    font-size: calc(100vw / 48);
}
.heading {
    /*font-size: calc(100vw / 40);*/
    font-size: 37px;
    font-weight: bold;
}
.body {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
}
.setWrap-center .pc-txt-top3 {
    top: 18%;
}

.color-txt{
    position: absolute;
    right: 17.9%;
    bottom: 132px;
    display: flex;
    width: 30.5%;
    justify-content: space-around;
    margin-bottom: 0;
}
.note {
    /*font-size: calc(100vw / 94) !important;*/
    font-size: 16px;
    color: rgba(120, 120, 120, 1);
}
.set2 .heading {
    font-size: calc(100vw / 23) !important;
}
.set2 .subheading {
    font-size: calc(100vw / 50) !important;
}
.big_title {
    font-size: calc(100vw / 20) !important;
}
.he-mat{
    margin-top: 30px;
}
.left-txt_1,.left-txt_2{
    opacity: 0;
}
.push-xl-0-2{
    left: 2%;
}
.push-xl-0-5{
    left: 5%;
}
.push-xl-0-6{
    left: 6%;
}
.push-xl-1-2{
    left: 12%;
}
.push-xl-6_02{
    left: 62%;
}
.set8 .lastNote{
    position: absolute;
    left: -3%;
    bottom: 15%;
}
.set9 .lastNote{
    position: absolute;
    top: -45%;
}
.set9 .set_text article{
    flex-flow: row !important;
    justify-content: space-evenly;
}
.pc-txt-top78{
    top: 78%;
}
.yPercent{
    transform: translateY(50%);
    opacity: 0;
}
.push-xl--3{
    left: -3%;
}
.push-xl--8{
    left: -8%;
}
.p-list{
    display: flex;
    align-items: baseline;
    margin-top: 10px;
}
.p-list img{
    width: 15px;
    height: 15px;
    margin-right: 5px;
}
.p-list p{
    margin: unset;
}
#colorWrap{
    position: relative;
}

.color2,.color3{
    opacity: 0;
}

.color-txt li{
    width: 10%;
}
.wrap_title .heading {
    font-size: calc(100vw / 20) !important;
}
.wrap_title .subheading {
    font-size: calc(100vw / 45) !important;
}
#OnceVideo video{
    position: absolute;
    top: 0;
    right: 10%;
    width: 25%;
    bottom: 0;
    margin: auto;
}
.pc-txt-top3_5{
    top: 35%;
}
.swiper{
    position: absolute !important;
    top: 20%;
    right: 15%;
    padding-top: 6% !important;
}

.swiper-button-prev{
    left:80%;
}
.swiper_txt {
    color: rgba(255, 255, 255, 1);
    position: absolute;
    font-size: 43px;
    font-weight: 100;
    top: -14%;
    left: 0;
}
.x_swiper{
    overscroll-behavior: none;
    width: 200%;
    display: flex;
    flex-wrap: nowrap;
}
.x_swiper_2{
    overscroll-behavior: none;
    width: 300%;
    display: flex;
    flex-wrap: nowrap;
}
.chi_2_video{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 10%;
    margin: auto;
}
.obj-contain{
    object-fit: contain;
}
.Levels li{
    position: absolute;
    top: 10%;
    right: 15%;
    width: 18%;
}
.Levels_2,.Levels_3{
    opacity: 0;
}
.mobileShowImg{
    display: flex;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 23%;
    height: 65%;
    right: 15%;
    margin: auto;
    overflow-x: hidden;
}
.mobileShowImg img{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    object-fit: cover;
}
.img_1,.img_2,.img_3{
    transform: translateX(-100%);
}
.img_1{
    z-index: 3;
}
.img_2{
    z-index: 2;
}
.img_3{
    z-index: 1;
}
/* pad */
@media screen and (max-width: 1199px) {
    .mobileShowImg {
        display: flex;
        position: absolute;
        top: 25%;
        bottom: 0;
        width: 75%;
        height: 55%;
        right: 0;
        margin: auto;
        overflow-x: hidden;
        left: 0;
    }
    #OnceVideo canvas{
        position: absolute;
        height: 57%;
        width: 80%;
        left: 0;
        right: 0;
        margin: auto;
        top: 36%;
    }
    .h30vh{
        height: 30vh !important;
    }
    .h60vh{
        height: 60vh !important;
    }
    .hios12_Wrap_Video .set_text{
        display: contents;
    }
    .Levels li {
        position: absolute;
        top: 40%;
        right: 0;
        left: 0;
        margin: auto;
        display: flex;
        justify-content: center;
        width: 55%;
    }
    .set8 .lastNote {
        position: absolute;
        left: 0;
        bottom: 12%;
        right: 0;
        margin: auto;
        text-align: center;
    }
    .m-txt-top0_6 {
        top: 6%;
    }
    .m-txt-top1_1{
        top: 11%;
    }
    .m-txt-top1_3{
        top: 13%;
    }
    .chi_2_video {
        position: absolute;
        top: 20%;
        bottom: 0;
        right: 0;
        margin: auto;
        left: 0;
    }
    .swiper_txt {
        position: relative;
        text-align: center;
        width: 100%;
        display: inline-block;
    }
    .swiper {
        top: 36% !important;
        right: 8%;
    }
    .swiper-button-prev{
        left:0;
    }
    #OnceVideo video {
        top: 38%;
        width: 80%;
    }
    .wrap_title .heading {
        font-size: calc(100vw / 11) !important;
    }
    .wrap_title .subheading {
        font-size: calc(100vw / 18) !important;
    }
    .push-m-2_0{
        left: 2%;
    }
    .color-txt {
        right: 7.5%;
        bottom: 46.9%;
        width: 90%;
    }
    .push-m-4_5{
        left: 45%;
    }
    .set9 .lastNote{
        position: absolute;
        top: 315%;
        left: 0;
        RIGHT: 0;
        margin: auto;
        text-align: center;
    }
    .m-txt-top1_5{
        top: 15%;
    }
    .push-m-3_5{
        left: 30%;
    }
    .push-m-2_7{
        left: 27%;
    }
    .set_h-100vh{
        height: 100vh;
    }
    .p2-cont {
        display: flex;
    }
    .heading {
        font-size: calc(100vw / 20);
        font-weight: bold;
    }
    .body {
        font-size: calc(100vw / 32);
    }
    .subheading {
        font-size: calc(100vw / 32) !important;
    }
    .note {
        font-size: calc(100vw / 32) !important;
        color: rgba(120, 120, 120, 1);
    }
    .set2 .heading {
        font-size: calc(100vw / 15) !important;
    }
    .set2 .subheading {
        font-size: calc(100vw / 33) !important;
    }
    .big_title {
        font-size: calc(100vw / 18) !important;
    }
    .set_text {
        width: 90%;
    }
}


/*定位css*/
@media screen and (min-width: 1200px) {
.pc-txt-top9_5{top:78%}
    .swiper{
        width: 43%;
    }
    #_32MP article,#Ring-shaped article{
        flex-flow: row !important;
        justify-content: space-between;
    }
    .swiper-button-next,.swiper-button-prev{
        position: absolute;
        top: 8%;
    }
    article p{
        margin: unset;
    }
    .push-xl-0{
        left: 0;
    }
    .col-xl-37 {
        max-width: 37%;
    }
    .pc-txt-top1_9 {
        top: 17%;
    }
    .pc-txt-top3-0{
        top: 30%;
    }
    .pc-txt-top1-0{
        top: 10%;
    }
}
/* width:1366 */
@media screen and (max-width: 1366px)and (min-width: 1200px){
    .swiper {
        position: absolute;
        top: 20%;
        right: 200px;
        padding-top: 6%;
        width: 500px;
    }
    .push-xl-0-6 {
        left: 60px;
    }
    .pc-txt-top78{
        top: 75%;
    }
    .pc-txt-top1_9 {
        top: 13%;
    }
    .x_swiper .set,.x_swiper_2 .set{
        width: 1300px !important;
        margin: auto;
    }
    .swiper_txt{
        top: -70px;
    }
    .swiper-button-prev {
        left: 70%;
    }
}

/*swiper*/
.swiper-button-next, .swiper-rtl .swiper-button-prev, .swiper-button-prev, .swiper-rtl .swiper-button-next {
    color: #fff;
    border-radius: 50%;
    width: 50px !important;
    height: 50px !important;
    background: rgba(18, 18, 18, .8);
}
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after,.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
    color: rgba(255, 255, 255, .6);
    font-size: 35px !important;
    font-weight: bold;
}

/*hios12最后2屏pc端文案背景*/
@media screen and (min-width: 1200px){
    .hios12_Wrap_Video video{
        width: 99.9%;
        object-fit: cover;
    }
    .hios12_Wrap_Video{
        display: flex;
        background: rgba(235, 235, 235, 1);
        width: 83.5%;
        margin: auto;
    }
    .hios12_Wrap_flex_end{
        justify-content: end;
    }
    .hios12_Wrap_Video .product-detail-tile,
    .hios12_Wrap_Video .copy-container{
        width: 50%;
    }
    .hios12_Wrap_Video video{
        height: 100%;
    }
    .hios12_icon_right{
        width: 20%;
        position: absolute;
        right: 20px;
        bottom: 10px;
        display: none;
    }
    .hios12_icon_left{
        width: 20%;
        position: absolute;
        left: 20px;
        bottom: 10px;
        display: none;
    }
    .poster{
        position: absolute;
        z-index: 1;
        height: 100%;
    }
}

#colorWrap .set{
    position: absolute;
    top: 0;
}
@media screen and (min-width: 1199px){
    #colorWrap .set,#colorWrap .set img.w-100,#colorWrap{
        height: 700px !important;
        width: 1300px !important;
        background: #000;
        left: 0 !important;
        right: 0;
        margin: auto !important;
    }
    #colorWrap .heading{
        font-size: 30px;
    }
    .videoBGImage{
        opacity: 0;
    }
}

@media screen and (min-width: 1200px){
    .set9{
        height: 700px !important;
    }
    .set9 img{
        height: 750px !important;
        object-fit: contain;
    }
    .set9 .pc-txt-top78 {
        top: unset;
        bottom: 0;
    }
}
.set16 .col-xl-5{
    max-width: 50%;
}