@font-face {
    font-family: "HYJunhei-85J";
    src: url('https://wwwobsmsgw.iderucci.com/font/HYJunHei-85W.ttf');
    /* src: url('./res/font/HYJunHei-85W.ttf'); */
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    }
@font-face {
    font-family: "HYJunhei-35J";
    src: url('https://wwwobsmsgw.iderucci.com/font/HYJunHei-35W.ttf');
    /* src: url('./res/font/HYJunHei-35W.ttf'); */
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    }
@font-face {
    font-family: "HYJunhei-65J";
    src: url('https://wwwobsmsgw.iderucci.com/font/HYJunHei-65W.ttf');
    /* src: url('./res/font/HYJunHei-65W.ttf'); */
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
* {
    margin: 0;
    padding: 0;
}
body {
    font-family: HYJunhei-65J;
    overflow-x: hidden;
    background-color: #000000;
}
.font-64{
    white-space: nowrap;
    font-weight: normal;
    font-size: calc(60px + (100 - 16) * ((100vw - 320px) / (1920 - 320)));
}
.font-42{
    white-space: nowrap;
    font-weight: normal;
    font-size: calc(40px + (60 - 16) * ((100vw - 320px) / (1920 - 320)));
}
.font-30{
    white-space: nowrap;
    font-weight: normal;
    font-size: calc(28px + (60 - 16) * ((100vw - 320px) / (1920 - 320)));
}
.font-28{
    white-space: nowrap;
    font-weight: normal;
    font-size: calc(27px + (30 - 16) * ((100vw - 320px) / (1920 - 320)));
}
.font-24{
    white-space: nowrap;
    font-weight: normal;
    font-size: calc(24px + (30 - 16) * ((100vw - 320px) / (1920 - 320)));
}
.font-18{
    white-space: nowrap;
    font-weight: normal;
    font-size: calc(18px + (30 - 16) * ((100vw - 320px) / (1920 - 320)));
}
.font-15{
    white-space: nowrap;
    font-weight: normal;
    font-size: calc(15px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
}
.font-12{
    white-space: nowrap;
    font-weight: normal;
    font-size: calc(13px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
}
.line10{
    line-height: 3rem;
}

.line30{
    line-height: 3rem;
}
.line20{
    line-height: 2rem;
}
.line60{
    line-height: 6rem;
}
.line70{
    line-height: 7rem;
}
.mt10{
    margin-top: 1rem;
}
.mt20{
    margin-top: 2rem;
}
.mt25{
    margin-top: 2.5rem;
}
.mt30{
    margin-top: 3rem;
}
.mt40{
    margin-top: 4rem;
}
.color-color{
    background: -webkit-linear-gradient(300deg,rgb(255, 255, 255),rgb(182,220,255),rgb(114 190 255));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.color-white{
    color: white;
}
.color-black {
    color:black;
}
.color-grey{
    color: #c8c8c8;
}
.title{
    font-size: 6rem;
    line-height:7rem;
    white-space: nowrap;
    font-family: "HYJunhei-85J";
}
.tip_big{
    font-size: 3rem;
    line-height:4rem;
    font-family: "HYJunhei-65J";
    font-weight: normal;
    white-space: nowrap;
}
.tip{
    font-size: 2rem;
    line-height:3rem;
    font-family: "HYJunhei-65J";
    font-weight: normal;
    white-space: nowrap;
}
.word{
    font-size: 1.8rem;
    line-height:3rem;
    font-family: "HYJunhei-65J";
    font-weight: normal;
    white-space: nowrap;
}
.f100 {
    font-size: 10rem;
}
.f60 {
    font-size: 6rem;
}

.f50 {
    font-size: 5rem;
}
.f30 {
font-size: 3rem;
}
.f40 {
font-size: 4rem;
}
.f20 {
font-size: 2rem;
}
.f18 {
font-size: 1.8rem;
}
.f15 {
font-size: 1.5rem;
}  

.line10{
line-height: 3rem;
}

.line30{
line-height: 3rem;
}
.line20{
line-height: 2rem;
}
.line60{
line-height: 6rem;
}
.line70{
line-height: 7rem;
}
.mt10{
margin-top: 1rem;
}
.mt20{
margin-top: 2rem;
}
.mt25{
margin-top: 2.5rem;
}
.mt30{
margin-top: 3rem;
}
.mt40{
margin-top: 4rem;
}
/* ---------------------------------------------------------------------------------------- page1 ---------------------------------------------------------------------------------------- */
.page1 {
    height: 100vh; position: relative;background-color: #000000;
}
#cn_top{
    background-color: #000000;width: 100vw;height: 100vh;z-index: 10;position: absolute;bottom: 0;left: 0;
}
#cn{
    width: 100vw;height: 100vh;position: absolute;bottom: 0;left: 0;z-index: 9;opacity: 0;
}
#video1 {
    height: 100%;width: 100%;background:#000000;z-index: 8;display: block;
}
.player {
    height: 100%;width: 100%; display: block; margin: auto; background: #000000;
}
.name0 {
    opacity: 0;font-family:'HYJunhei-65J';position: absolute;color: #cccccc;top: 35%;left: 50%;transform: translate(-50%, -50%);z-index: 10;
}
.name1 {
    opacity: 0;font-family:'HYJunhei-65J';position: absolute;color: #cccccc;top: 30%;left: 85%;transform: translate(-50%, -50%);z-index: 10;
}
.name2 {
    opacity: 0;font-family:'HYJunhei-65J';position: absolute;color: #cccccc;top: 25%;left: 50%;transform: translate(-50%, -50%);z-index: 10;
}
.frameText {
    position: absolute;left: 50%;top: 45%;transform: translate(-50%, -50%);opacity: 0;
}
.frameTitle {
    font-family:'HYJunhei-65J';text-align: center;
}

/* ---------------------------------------------------------------------------------------- page2 ---------------------------------------------------------------------------------------- */
.page2 {
    height: 120vh; background-color: #000000;position: relative;
}
.page2_img{
    width:80%; height: 100%; position: absolute;transform:translate(-50%, -50%);top:50%; left:50%;
}
.page2_img .img1{
    object-fit: contain; position:absolute; width:100%; height: auto;z-index: 8;top: 40%;
}
.page2_img .img2{
    object-fit: contain; position:absolute; width:100%; height: auto;z-index: 9;top: 40%;
}
.page2_img .img3{
    object-fit: contain; position:absolute; width:400%; height: auto;z-index: 7;top: 10%;left: -150%;
}
.page2_div1{
    position: absolute; width:100vw; height:60%; transform:translate(-50%, -50%);top:45%; left:50%;
}
.page2_div1 h1{
    text-align: center;
}
.page2_div1 h2{
    text-align: center;margin-top: 2rem;
}
.page2_div2{
    position: absolute; width:40vw; height:20%; transform:translate(-50%, -50%);top:80%; left:30%;
}
.page2_div2 h1{
    text-align: left;
}
.page2_div2 h2{
    text-align: left;margin-top: 2rem;
}
.page2_div3{
    position: absolute; width:40vw; height:20%; transform:translate(-50%, -50%);top:80%; left:80%;
}
.page2_div3 h1{
    text-align: left;
}
.page2_div3 h2{
    text-align: left;margin-top: 2rem;
}
.page2_div5{
    position: absolute; width:40vw; height:20%; transform:translate(-50%, -50%);top:100%; left:30%;
}
.page2_div5 h1{
    text-align: left;
}
.page2_div5 h2{
    text-align: left;margin-top: 2rem;
}
.page2_div6{
    position: absolute; width:40vw; height:20%; transform:translate(-50%, -50%);top:100%; left:80%;
}
.page2_div6 h1{
    text-align: left;
}
.page2_div6 h2{
    text-align: left;margin-top: 2rem;
}

/* ---------------------------------------------------------------------------------------- page3 ---------------------------------------------------------------------------------------- */
.page3 {
    height: 120vh; background-color: #000000;position: relative;
}
.page3_img{
    width: 100%; height: 100%; position: absolute;transform:translate(-50%, -50%);top:80%; left: 70%;
}
.page3_img .img1{
    object-fit: contain; position:absolute; width:70%; height: auto;z-index: 9;top: 00%;left: 20%;
}
.page3_img .img2{
    object-fit: contain; position:absolute; width:80%; height: auto;z-index: 8;top: 20%;left: 10%;
}
.page3_img .img3{
    object-fit: contain; position:absolute; width:300%;height: auto;z-index: 7;top:-10%;left: -80%;
}
.page3_div{
    position: absolute; width:60vw; height:60%; transform:translate(0, -50%);top:50%; left:10%;
}
.page3_div .p1{
    text-align: left;
}
.page3_div1{
    margin-top: 2rem;width: 100%;height: 25vw; position: absolute;display: -webkit-flex; display: flex;justify-content:left;align-items: center;
}
.page3_div1 .p2{
    text-decoration: none;height: 10vw;width: 10vw;
}
.page3_div1 .p2 .img4{
    object-fit: cover;width: 10vw;height: 10vw;
}
.page3_div1 .p3{
    line-height: 3rem;color: #ffffff;width:50%;text-align: left; font-weight: normal; margin-bottom: 1rem;
}
.page3_div1 .p4{
    margin-top: 10vw;position: absolute;bottom: 0;left: 0;text-align: left;
}
.page3_div2{
    position: absolute; width:30vw; height:60%; transform:translate(0%, -50%);top:100%; left:10%;
}
.page3_div3{
    margin-top: 20rem;width: 100%; position: absolute;display: flex; display: -webkit-flex;justify-content:left;align-items: center;
}
.page3_div3 .p5{
    position: absolute;bottom: 0;left: 0;color: #8a8a8a;text-align: left;font-weight: normal;
}
/* ---------------------------------------------------------------------------------------- page4 ---------------------------------------------------------------------------------------- */
.page4{
    height: 100vh; background-color: #000000;position: relative;
}
.page4 .page4_img{
    width: 100%; height: 100%; position: absolute;transform:translate(-50%, -50%);top:50%; left: 20%;
}
.page4 .page4_img .img1{
    object-fit: contain; position:absolute; width:120%;height: auto;top: 40%;left: 5%;
}
.page4_div1{
    position: absolute; width:55vw; height:60%; transform:translate(0, -50%);top:50%; left:40%;
}
.page4_div1 .p1{
    color: #ffffff;text-align: right;
}
.page4_div2{
    margin-top: 2rem;width: 100%;height: 25vw;position: absolute;display: flex; display: -webkit-flex;justify-content:right;align-items: center;
}
.page4_div2 a{
    text-decoration: none;height: 10vw;width: 10vw;margin-left: 30vw;
}
.page4_div2 a img{
    object-fit: cover;width: 10vw;height: 10vw; 
}
.page4_div2 h2{
    line-height: 3rem;color: #ffffff;width:50%;text-align: right;margin-bottom: 1rem;
}
.page4_div2 h3{
    margin-top: 2rem;position: absolute;bottom: 0;right: -2vw;text-align: right;
}
.page4_div3{
    position: absolute; width:30vw; height:60%; transform:translate(0%, -50%);top:100%; left:60%;
}
.page4_div4{
    margin-top: 20rem;width: 100%; position: absolute;display: flex; display: -webkit-flex;justify-content:left;align-items: center;
}
.page4_div4 h3{
    position: absolute;bottom: 0;right: -6vw;color: #8a8a8a;text-align: right;
}



/* ---------------------------------------------------------------------------------------- page5 ---------------------------------------------------------------------------------------- */
.page5{
    height: 100vh; background-color: #000000;position: relative;
}
.page5_img{
    width: 100%; height: 100%; position: absolute;transform:translate(0%, -50%);top:70%; left: 30%;
}
.page5_img .img1{
    object-fit: contain; position:absolute; width:80%;height: auto;top: 23%;z-index: 8;
}
.page5_img .img2{
    object-fit: contain; position:absolute; width:80%;height: auto;top: 30%;z-index: 8;
}
.page5_img .img3{
    object-fit: contain; position:absolute;;transform:translate(-50%, -50%); width:300%; height: auto;z-index: 7;top:30%;left: 60%;
}
.page5_div1{
    position: absolute; width:55vw; height:60%; transform:translate(0, -50%);top:50%; left:10%;
}
.page5_div1 .p1{
    color: #ffffff;text-align: left;
}
.page5_div2{
    margin-top: 2rem;width: 100%;height: 20vw; position: absolute;display: flex; display: -webkit-flex;justify-content:left;align-items: center;
}
.page5_div2 a{
    text-decoration: none;width: 10vw;height: 10vw;
}
.page5_div2 a img{
    object-fit: cover;width: 10vw;height: 10vw;
}
.page5_div2 .p2{
    line-height: 3rem;color: #ffffff;width:50%;text-align: left; font-weight: normal;margin-bottom: 1rem;
}
.page5_div2 .p5{
    margin-top: 2rem;position: absolute;bottom: 0;left: 0;text-align: left;font-weight: normal;
}
.page5_div3{
    position: absolute; width:50vw; height:60%; transform:translate(0%, -50%);top:100%; left:10%;
}
.page5_div4{
    margin-top: 20rem;width: 100%; position: absolute;display: flex; display: -webkit-flex;justify-content:left;align-items: center;
}
.page5_div4 .p6{
    position: absolute;bottom: 0;left: 0;color: #8a8a8a;text-align: left;font-weight: normal;
}
/* ---------------------------------------------------------------------------------------- page6 ---------------------------------------------------------------------------------------- */
.page6{
    height: 100vh; background-color: #000000;position: relative;
}
.page6_img{
    width: 120%; height: auto; position: absolute;transform:translate(-50%, -50%);top:40%; left: 50%;
}
.page6_img .p2{
    object-fit: contain; position:absolute; width:100%;height: auto;top: 50%;
}
.page6_div{
    position: absolute; width:40vw; height:20rem; transform:translate(-50%, -50%);top:20%; left:52%;
}
.page6_div .p1{
    color: #ffffff;text-align: center;font-weight: bold;
}
.page6_div1{
    position: absolute; width:80vw; height:40rem; transform:translate(-50%, -50%);top:30%; left:50%;
}
.page6_div2{
    width: 100%;width: 100%;height: 40vw; position: absolute;display: flex; display: -webkit-flex;justify-content:center;align-items: center;
}
.page6_div2 .button_0{
    text-decoration: none;width: 10vw;height: 10vw;
}
.page6_div2 .button_0 img{
    object-fit: cover;width: 10vw;height: 10vw;
}
.page6_div2 .p3{
    line-height: 3rem;width:50%;text-align: left;margin-bottom: 1rem;
}
.page6_div2 .p4{
    text-align: center;
}
.page6_div3{
    position: absolute; width:100vw; height:60%; transform:translate(-50%, -50%);top:110%; left:50%;
}
.page6_div4{
    position: absolute;display: flex; display: -webkit-flex;justify-content:left;align-items: center;
}
.page6_div4 .p5{
    position: absolute;bottom: 0;color: #8a8a8a;text-align: center;
}
/* ---------------------------------------------------------------------------------------- page7 ---------------------------------------------------------------------------------------- */
.page7{
    height: 100vh; background-color: #000000;position: relative;
}
.page7_img{
    width: 100%; height: 60%; position: absolute;transform:translate(-50%, -50%);top:60%; left: 50%;
}
.page7_img .img1{
    object-fit: contain; position:absolute; width:100%;height: auto;
}
.page7_div{
    position: absolute; width:50vw; height:20rem; transform:translate(-50%, -50%);top:20%; left:52%;
}
.page7_div .p1{
    color: #ffffff;text-align: center;
}
.page7_div1{
    position: absolute; width:90vw; height:40rem; transform:translate(-50%, -50%);top:30%; left:50%;
}
.page7_div2{
    width: 100%;height:100%; position: absolute;display: flex; display: -webkit-flex;justify-content:left;align-items: center;
}
.page7_div2 .button_3{
    text-decoration: none;width: 10vw;height: 10vw;
}
.page7_div2 .button_3 img{
    object-fit: cover;width: 10vw;height: 10vw;
}
.page7_div2 .p3{
    line-height: 3rem;color: #ffffff;width:50%;text-align: left;margin-bottom: 1rem;
}
.page7_div2 .p4{
    text-align: center;
}
.page7_div3{
    position: absolute; width:100vw; height:60%; transform:translate(-50%, -50%);top:90%; left:60%;
}
.page7_div4{
    position: absolute;display: flex; display: -webkit-flex;justify-content:left;align-items: center;
}
.page7_div4 .p5{
    position: absolute;bottom: 0;color: #8a8a8a;text-align: center;
}
.page7_div5{
    position: absolute; width:80vw; height:60%; transform:translate(-50%, -50%);top:90%; left:50%;
}
.page7_div6{
    margin-top: 20rem;width: 100%; position: absolute;display: flex; display: -webkit-flex;justify-content:center;align-items: center;
}
.page7_div6 .button_0{
    width: 33%; text-decoration: none;
}
.page7_div6 .button_0 img{
    object-fit: cover;width: 50%;margin-left: 25%; height: 10vw;
}
.page7_div6 .button_0 h2{
    line-height: 3rem;color: #ffffff;width:100%;text-align: center;
}

.page7_div6 .button_1{
    width: 33%; text-decoration: none;
}
.page7_div6 .button_1 img{
    object-fit: cover;width: 50%;margin-left: 25%; height: 10vw;
}
.page7_div6 .button_1 h2{
    line-height: 3rem;color: #ffffff;width:100%;text-align: center;
}

.page7_div6 .button_2{
    width: 33%; text-decoration: none;
}
.page7_div6 .button_2 img{
    object-fit: cover;width: 50%;margin-left: 25%; height: 10vw;
}
.page7_div6 .button_2 h2{
    line-height: 3rem;color: #ffffff;width:100%;text-align: center;
}





/* ---------------------------------------------------------------------------------------- page8 ---------------------------------------------------------------------------------------- */
.swiper-container {
    padding-bottom: 40px;
}

.swiper-wrapper {}

.swiper-slide {
    width: 978px;
    transition-timing-function: linear;
}

@media only screen and (max-width:1200px) {
    .swiper-slide {
        width: 770px;
    }
}

@media only screen and (max-width:980px) {
    .swiper-slide {
        width: 471px;
    }
}

@media only screen and (max-height:480px) {
    .swiper-slide {
        width: 471px;
    }
}

.swiper-slide img {
    width: 100%;border-radius: 4px;
}

.swiper-slide .title {
    position: absolute;
    transform: translate(-50%, 0);
    bottom: 0%;
    font-size: 11px;
    color: rgb(102, 102, 102);
}

.swiper-button-next,
.swiper-button-prev {
    width: 5rem;height: 5rem;background-size: 5rem 5rem;margin-top: -5.6rem;outline: none;
}

.swiper-button-next {
    transform: scale(2);
    background-image: url('./svg/右箭头.svg');
}

.swiper-button-prev {
    transform: scale(2);
    left: 7%;
    background-image: url('./svg/左箭头.svg');
}

.swiper-pagination-bullet {
    background: none;
    opacity: 1;
    margin: 0 6px !important;
    width: 9px;
    height: 9px;
    position: relative;
    outline: none;
    vertical-align: middle;
}

.swiper-pagination-bullet span {
    width: 3px;
    height: 3px;
    background: #CCC;
    display: block;
    border-radius: 50%;
    margin-top: 3px;
    margin-left: 3px;
}

.swiper-pagination-bullet i {
    background: #ffffff;
    height: 1px;
    width: 20px;
    position: absolute;
    top: 4px;
    transform: scaleX(0);
    transform-origin: left;
    z-index: 3;
    transition-timing-function: linear;
}

.swiper-pagination-bullet-active span,
.swiper-pagination-bullet:hover span {
    width: 9px;
    height: 9px;
    margin-top: 0;
    margin-left: 0;
    background: #ffffff;
    position: relative;
    z-index: 1;
}

.swiper-pagination-bullet-active i {
    animation: middle 6s;
}

.swiper-pagination-bullet:first-child.swiper-pagination-bullet-active i {
    animation: first 6s;
}

.swiper-pagination-bullet:last-child.swiper-pagination-bullet-active i {
    animation: last 6s;
}

@keyframes first {
    0% {
        transform: scaleX(0.5);
        left: 0px;
    }

    /*091*/
    100% {
        transform: scaleX(1);
        left: 2px;
    }

    /*0915*/
}

@keyframes last {
    0% {
        transform: scaleX(0.7);
        left: -10px;
    }

    /*1090*/
    20% {
        transform: scaleX(0.3);
        left: 2px;
    }

    /*090*/
    100% {
        transform: scaleX(0.3);
        left: 0px;
    }

    /*090*/
}

@keyframes middle {
    0% {
        transform: scaleX(0.7);
        left: -10px;
    }

    /*1091*/
    20% {
        transform: scaleX(0.45);
        left: 2px;
    }

    /*092*/
    100% {
        transform: scaleX(1);
        left: 2px;
    }

    /*0913*/
}
.page8{
    height: 100vh; background-color: #000000;position: relative;
}
.page8_div{
    position: relative; width:80vw; height:25%; transform:translate(-50%, -50%);top:15%; left:50%;
}
.page8_div h1{
    text-align: center;
}
.page8_div h2{
    text-align: center;margin-top: 2rem;
}
.page8_div1{
    position: absolute; width:100vw; height:25%; transform:translate(-50%, 0%);left:48%;
}
.page8_div2{
    position: absolute; width:100%; height:40rem; transform:translate(-50%, -50%);bottom:0%; left:50%;
}
.page8_div3{
    width: 100%;height:100%; position: absolute;display: flex; display: -webkit-flex;justify-content:center;align-items: center;
}
.page8_div3 .button_0{
    z-index: 9;text-decoration: none;z-index: 11;
}
.page8_div3 .button_0 img{
    object-fit: cover;width: 10vw;height: 10vw;margin-top: 8vw;margin-left: 30rem;z-index: 11;
}
.page8_div3 .button_0 .p3{
    z-index: 9;line-height: 3rem;color: #ffffff;width:50%;text-align: left; margin-bottom: 2rem;margin-top: 15rem;z-index: 11;
}
.page8_div3 .button_0 .p5{
    z-index: 9;position: absolute;transform:translate(-50%, -50%);left: 45%;bottom: -50%;text-align: center;z-index: 11;
}
.page8_div2 .masking{
    background: linear-gradient(to top,rgba(0,0,0,0.7),rgba(0,0,0,0.6),rgba(0,0,0,0.4),rgba(0,0,0,0.0));width: 100%;height: 150%;position: absolute;bottom: -100%;z-index: 1;left: 50%;transform: translate(-50%, 0%);
}
.page8_div4{
    position: absolute; width:100%; height:40rem; transform:translate(-50%, -50%);bottom:0%; left:50%;
} 
.page8_div5 {
    width: 100%;height:100%; position: absolute;display: flex; display: -webkit-flex;justify-content:center;align-items: center;
}

.page8_div5 .button_0{
    z-index: 9;text-decoration: none;z-index: 11;
}
.page8_div5 .button_0 img{
    object-fit: cover;width: 10vw;height: 10vw;margin-top: 8vw;margin-left: 30rem;z-index: 11;
}
.page8_div5 .button_0 .p3{
    z-index: 9;line-height: 3rem;color: #ffffff;width:50%;text-align: left; margin-bottom: 2rem;margin-top: 15rem;z-index: 11;
}
.page8_div5 .button_0 .p5{
    z-index: 9;position: absolute;transform:translate(-50%, -50%);left: 45%;bottom: -50%;text-align: center;z-index: 11;
}
.page8_div4 .masking{
    background: linear-gradient(to top,rgba(0,0,0,0.7),rgba(0,0,0,0.6),rgba(0,0,0,0.4),rgba(0,0,0,0.0));width: 100%;height: 150%;position: absolute;bottom: -100%;z-index: 1;left: 50%;transform: translate(-50%, 0%);
}



.page8_div6{
    position: absolute; width:100%; height:40rem; transform:translate(-50%, -50%);bottom:0%; left:50%;
} 
.page8_div7 {
    width: 100%;height:100%; position: absolute;display: flex; display: -webkit-flex;justify-content:center;align-items: center;
}

.page8_div7 .button_0{
    z-index: 9;text-decoration: none;z-index: 11;
}
.page8_div7 .button_0 img{
    object-fit: cover;width: 10vw;height: 10vw;margin-top: 8vw;margin-left: 30rem;z-index: 11;
}
.page8_div7 .button_0 .p3{
    z-index: 9;line-height: 3rem;color: #ffffff;width:50%;text-align: left; margin-bottom: 2rem;margin-top: 15rem;z-index: 11;
}
.page8_div7 .button_0 .p5{
    z-index: 9;position: absolute;transform:translate(-50%, -50%);left: 45%;bottom: -80%;text-align: center;z-index: 11;
}
.page8_div6 .masking{
    background: linear-gradient(to top,rgba(0,0,0,0.7),rgba(0,0,0,0.6),rgba(0,0,0,0.4),rgba(0,0,0,0.0));width: 100%;height: 150%;position: absolute;bottom: -100%;z-index: 1;left: 50%;transform: translate(-50%, 0%);
}
.swiper-pagination{
    bottom: 10px !important;
}
/* ---------------------------------------------------------------------------------------- page9 ---------------------------------------------------------------------------------------- */
.page9{
    height: 100vh; background-color: #000000;position: relative;
}
.page9_div{
    width: 80%; height: 50%;  position: absolute; transform:translate(-50%, -50%); left:50%; top:15%; display: flex; display: -webkit-flex;justify-content: center;
}
.page9_div .p1{
    background-color: #000000; position: relative; width: 100%; height: 100%; border-radius: 3vw; overflow: hidden;
}
.page9_div .p1 .img{
    object-fit: cover; width: 100%; height: 100%;
}
.page9_div .p1 .masking{
    background: linear-gradient(to top,rgba(0,0,0,0.5),rgba(0,0,0,0));width: 100%;height: 50%;position: absolute; bottom: 0
}
.page9_div .p1 h2{
    position: absolute; width: 80%; transform:translate(-50%, 0);top:70%; left:50%; text-align: center;
}
.page9_div .p1 h3{
    position: absolute; width: 90%; transform:translate(-50%, 0);top:82%; left:50%; text-align: center;
}
.page9_div2{
    width: 80%; height: 50%;  position: absolute; transform:translate(-50%, -50%); left:50%; top:70%; display: flex; display: -webkit-flex;justify-content: center;
}
.page9_div2 .p2{
    background-color: #000000; position: relative; width: 100%; height: 100%; border-radius: 3vw; overflow: hidden;
}
.page9_div2 .p2 .img{
    object-fit: cover; width: 100%; height: 100%;
}
.page9_div2 .p2 .masking{
    background: linear-gradient(to top,rgba(0,0,0,0.5),rgba(0,0,0,0));width: 100%;height: 50%;position: absolute; bottom: 0;
}
.page9_div2 .p2 h2{
    position: absolute; width: 80%; transform:translate(-50%, 0);top:70%; left:50%; text-align: center;
}
.page9_div2 .p2 h3{
    position: absolute; width: 90%; transform:translate(-50%, 0);top:82%; left:50%; text-align: center;
}
/* ---------------------------------------------------------------------------------------- page10 ---------------------------------------------------------------------------------------- */
.page10{
    height: 150vh; background-color: #000000; position: relative;
}
.page10 .p1{
    position: absolute;transform:translate(-50%, -50%);top:12%; left:50%;text-align: center;
}
.page10_img{
    width: 100%; height: 100%;transform:translate(0, -50%);top:70%; position: absolute; right: 0;display: flex; display: -webkit-flex; justify-content: right;align-items: center;
}
.page10_img .img6{
    object-fit: contain; position: absolute; width: 100%;
}
.page10_div{
    width: 70%; height: 50%;transform:translate(0, -50%);top:70%; position: absolute; right: 0;
}
.page10_div .p3{
    width: 6rem; height: 18%;position: absolute;top: 17%; right:90%;
}
.page10_div .p3 div{
    background: linear-gradient(to bottom,rgba(255,255,255,1),rgba(255,255,255,0.7),rgba(255,255,255,0)); position: absolute;width: 1px; height: 100%; top: 60%;
}
.page10_div .p3 h2{
    position: absolute;transform:translate(-50%, -50%); top: 50%;
}

.page10_div .p4{
    width: 6rem; height: 18%;position: absolute;top: 17%; right:30%;
}
.page10_div .p4 div{
    background: linear-gradient(to bottom,rgba(255,255,255,1),rgba(255,255,255,0.7),rgba(255,255,255,0)); position: absolute;width: 1px; height: 100%; top: 60%;
}
.page10_div .p4 h2{
    position: absolute;transform:translate(-50%, -50%); top: 50%;
}

.page10_div .p5{
    width: 6rem; height: 17%;position: absolute;top: 40%; right:30%;
}
.page10_div .p5 div{
    background: linear-gradient(to top,rgba(255,255,255,1),rgba(255,255,255,0.7),rgba(255,255,255,0)); position: absolute;width: 1px; height: 100%; top: 60%;
}
.page10_div .p5 h2{
    position: absolute;transform:translate(-50%, 0); bottom: -70%;
}

.page10_div .p6{
    width: 6rem; height: 19%;position: absolute;top: 42%; right:70%;
}
.page10_div .p6 div{
    background: linear-gradient(to top,rgba(255,255,255,1),rgba(255,255,255,0.7),rgba(255,255,255,0)); position: absolute;width: 1px; height: 100%; top: 60%;
}
.page10_div .p6 h2{
    position: absolute;transform:translate(-50%, 0); bottom: -70%;
}

.page10_div .p7{
    width: 6rem; height: 18.5%;position: absolute;top: 42%; right:120%;
}
.page10_div .p7 div{
    background: linear-gradient(to top,rgba(255,255,255,1),rgba(255,255,255,0.7),rgba(255,255,255,0)); position: absolute;width: 1px; height: 100%; top: 60%;
}
.page10_div .p7 h2{
    position: absolute;transform:translate(-50%, 0); bottom: -70%;
}

.page10_section{
    position: absolute; width:70rem; height:60%; transform:translate(0, -50%);top:47%; left:10%;
}
.page10_section .p8{
    text-align: left;
}
.page10_section .p9{
    text-align: left;
}
.page10_section .p10{
    text-align: left;margin-top: 3rem;
}
.page10_section .p11{
    text-align: left;
}
.page10_section .p12{
    text-align: left;margin-top: 3rem;
}
.page10_section .p13{
    text-align: left;
}
.page10_section .p14{
    text-align: left;margin-top: 3rem;
}
.page10_section .p15{
    text-align: left;
}
.page10_section .p16{
    text-align: left;margin-top: 3rem;
}
.page10_section .p17{
    text-align: left;
}

/* ---------------------------------------------------------------------------------------- page11 ---------------------------------------------------------------------------------------- */
.page11{
    height: 150vh; background-color: #000000;position: relative;
}
.page11_section{
    width: 100%; height: 80%;  position: relative; transform:translate(-50%, -50%); left:50%; top:50%; display: flex; display: -webkit-flex;justify-content: center;
}
.page11_section .p1{
    background-color: #ffffff; width: 80%; height: 30%; border-radius: 3rem; overflow: hidden;position: absolute;transform:translate(-50%, -50%);left: 50%;top:20%;
}
.page11_section .p1 .img{
    object-fit: cover; width: 100%; height: 100%;
}
.page11_section .p1 .masking{
    background: linear-gradient(to top,rgba(0,0,0,0.5),rgba(0,0,0,0));width: 100%;height: 50%;position: absolute; bottom: 0;
}
.page11_section_div{
    width: 100%; height: 100%;
}
.page11_section_div1{
    width: 100%;height: 80%; position: relative; transform:translate(-50%, -50%); left:60%; top:30%;
}
.page11_section_div1 .p2{
    text-align: left;
}
.page11_section_div1 .p3{
    color: #ffffff;margin-top: 3vw;
}
.page11_section_div2{
    position: absolute; width:100vw; height:120%; transform:translate(-50%, -50%);top:110%; left:11%;
}
.page11_section_div3{
    margin-top: 20vw;width: 100%; height:100%;position: absolute;display: flex; display: -webkit-flex;justify-content:left;align-items: center;flex-direction: column;
}
.page11_section_div3 .button_1{
    width: 50%; text-decoration: none;display: -webkit-flex;justify-content:left;align-items: left;flex-direction: row;
}
.page11_section_div3 .button_1 img{
    object-fit: cover;width: 50%;margin-left: 25%; height: 15vw;
}
.page11_section_div3 .button_1 h2{
    margin-left: 3vw;line-height: 1.2;margin-top: 3vw;color: #ffffff;width:100%;text-align: left;
}

.page11_section_div3 .button_2{
    width: 50%; text-decoration: none;display: -webkit-flex;justify-content:left;align-items: left;flex-direction: row;margin-top: 3vw;
}
.page11_section_div3 .button_2 img{
    object-fit: cover;width: 50%;margin-left: 25%; height: 15vw;
}
.page11_section_div3 .button_2 h2{
    margin-left: 3vw;line-height: 15vw;color: #ffffff;width:100%;text-align: left;  white-space: nowrap;
}

.page11_section_div3 .button_3{
    width: 50%; text-decoration: none;display: -webkit-flex;justify-content:left;align-items: left;flex-direction: row;margin-top: 3vw;
}
.page11_section_div3 .button_3 img{
    object-fit: cover;width: 50%;margin-left: 25%; height: 15vw;
}
.page11_section_div3 .button_3 h2{
    margin-left: 3vw;line-height: 15vw;color: #ffffff;width:100%;text-align: left;  white-space: nowrap;
}

.page11_section_div3 .button_4{
    width: 50%; text-decoration: none;display: -webkit-flex;justify-content:left;align-items: left;flex-direction: row;margin-top: 3vw;
}
.page11_section_div3 .button_4 img{
    object-fit: cover;width: 50%;margin-left: 25%; height: 15vw;
}
.page11_section_div3 .button_4 h2{
    margin-left: 3vw;line-height: 15vw;color: #ffffff;width:100%;text-align: left;  white-space: nowrap;
}

.page11_section_div3 .button_5{
    width: 50%; text-decoration: none;display: -webkit-flex;justify-content:left;align-items: left;flex-direction: row;margin-top: 3vw;
}
.page11_section_div3 .button_5 img{
    object-fit: cover;width: 50%;margin-left: 25%; height: 15vw;
}
.page11_section_div3 .button_5 h2{
    margin-left: 3vw;line-height: 15vw;color: #ffffff;width:100%;text-align: left;  white-space: nowrap;
}

.page11_section_div3 .button_6{
    width: 50%; text-decoration: none;display: -webkit-flex;justify-content:left;align-items: left;flex-direction: row;margin-top: 3vw;
}
.page11_section_div3 .button_6 img{
    object-fit: cover;width: 50%;margin-left: 25%; height: 15vw;
}
.page11_section_div3 .button_6 h2{
    margin-left: 3vw;line-height: 15vw;color: #ffffff;width:100%;text-align: left;  white-space: nowrap;
}
/* ---------------------------------------------------------------------------------------- page12 ---------------------------------------------------------------------------------------- */
.page12{
    height: 80vh; background-color: #000000;position: relative;
}
.page12_section{
    width: 90%; height: 80%;  position: relative; transform:translate(-50%, -50%); left:50%; top:40%; display: flex; display: -webkit-flex;justify-content: center;
}
.page12_section .p1{
    background-color: #000000; position: relative; width: 50%; height: 50%; border-radius: 30px; overflow: hidden; margin-right: 5px;
}
.page12_section .p1 .img{
    object-fit: cover; width: 100%; height: 100%;
}
.page12_section .p1 .masking{
    background: linear-gradient(to top,rgba(0,0,0,0.9),rgba(0,0,0,0.7),rgba(0,0,0,0.5),rgba(0,0,0,0));width: 100%;height: 50%;position: absolute; bottom: 0
}
.page12_section .p1 h2{
    position: absolute;  transform:translate(-50%, 0);top:70%; left:50%; text-align: center;
}
.page12_section .p1 h3{
    position: absolute;  transform:translate(-50%, 0);top:80%; left:50%; text-align: center;
}

.page12_section .p2{
    background-color: #000000; position: relative; width: 50%; height: 50%; border-radius: 30px; overflow: hidden; margin-left: 5px;
}
.page12_section .p2 .img{
    object-fit: cover; width: 100%; height: 100%;
}
.page12_section .p2 .masking{
    background: linear-gradient(to top,rgba(0,0,0,0.9),rgba(0,0,0,0.7),rgba(0,0,0,0.5),rgba(0,0,0,0));width: 100%;height: 50%;position: absolute; bottom: 0;
}
.page12_section .p2 h2{
    position: absolute;  transform:translate(-50%, 0);top:70%; left:50%; text-align: center;
}
.page12_section .p2 h3{
    position: absolute;  transform:translate(-50%, 0);top:80%; left:50%; text-align: center;
}
.page12_section1{
    width: 90%; height: 80%;  position: relative; transform:translate(-50%, -50%); left:50%; top:5%; display: flex; display: -webkit-flex;justify-content: center;
}

.page12_section1 .p3{
    background-color: #000000; position: relative; width: 50%; height: 50%; border-radius: 30px; overflow: hidden; margin-right: 5px;
}
.page12_section1 .p3 .img{
    object-fit: cover; width: 100%; height: 100%;
}
.page12_section1 .p3 .masking{
    background: linear-gradient(to top,rgba(0,0,0,0.9),rgba(0,0,0,0.7),rgba(0,0,0,0.5),rgba(0,0,0,0));width: 100%;height: 50%;position: absolute; bottom: 0;
}
.page12_section1 .p3 h2{
    position: absolute;  transform:translate(-50%, 0);top:70%; left:50%; text-align: center;
}
.page12_section1 .p3 h3{
    position: absolute;  transform:translate(-50%, 0);top:80%; left:50%; text-align: center;
}

.page12_section1 .p4{
    background-color: #000000; position: relative; width: 50%; height: 50%; border-radius: 30px; overflow: hidden; margin-left: 5px;
}
.page12_section1 .p4 .img{
    object-fit: cover; width: 100%; height: 100%;
}
.page12_section1 .p4 .masking{
    background: linear-gradient(to top,rgba(0,0,0,0.9),rgba(0,0,0,0.7),rgba(0,0,0,0.5),rgba(0,0,0,0));width: 100%;height: 50%;position: absolute; bottom: 0;
}
.page12_section1 .p4 h2{
    position: absolute;  transform:translate(-50%, 0);top:70%; left:50%; text-align: center;
}
.page12_section1 .p4 h3{
    position: absolute;  transform:translate(-50%, 0);top:80%; left:50%; text-align: center;
}
/* ---------------------------------------------------------------------------------------- page13 ---------------------------------------------------------------------------------------- */
.page13{
    height: 100vh; background-color: #000000;position: relative;
}
.page13_section{
    width: 100%; height: 80%;  position: relative; transform:translate(-50%, -50%); left:50%; top:50%; display: flex; display: -webkit-flex;justify-content: center;
}
.page13_section .p1{
    background-color: #000000; width: 80%; height: 30%; border-radius: 3rem; overflow: hidden;position: absolute;transform:translate(-50%, -50%);left: 50%;top:45%;
}
.page13_section .p1 .img{
    object-fit: cover; width: 100%; height: 100%;
}
.page13_section .p1 .masking{
    background: linear-gradient(to top,rgba(0,0,0,0.5),rgba(0,0,0,0));width: 100%;height: 50%;position: absolute; bottom: 0;
}

.page13_section_div{
    width: 100%; height: 100%;
}
.page13_section_div1{
    width: 100%;height: 80%; position: relative; transform:translate(-50%, -50%); left:60%; top:50%;
}
.page13_section_div1 .p2{
    text-align: left;
}
.page13_section_div1 .p3{
    color: #ffffff;margin-top: 3vw;
}
.page13_section_div2{
    position: absolute; width:100vw; height:120%; transform:translate(-50%, -50%);top:125%; left:48%; 
}
.page13_section_div2 h2{
    margin-left: 3vw;line-height: 15vw;color: #ffffff;width:100%;text-align: left;  white-space: nowrap;
}
/* ---------------------------------------------------------------------------------------- page14 ---------------------------------------------------------------------------------------- */
.page14{
    height: 100vh; background-color: #000000; position: relative;
}
.page14_section{
    position: absolute; width:100vw; height:60%; transform:translate(0, -50%);top:40%; left:10%;z-index: 6;
}
.page14_section .p1{
    text-align: left;font-weight: bold;
}
.page14_section .p2{
    text-align: left;margin-top: 1rem;
}
.page14_section .p3{
    width: 80%; height: 1px; background: #ffffff;position: absolute;transform:translate(-50%, -50%);top:15%;left:40%;
}
.page14_section .p15{
    width: 80%; height: 1px; background: #ffffff;position: absolute;transform:translate(-50%, -50%);top:115%;left:40%;
}
.page14_div1{
    position: absolute; width:100vw; height:20%; transform:translate(-50%, -50%);top:20%; left:50%;display: flex; display: -webkit-flex;justify-content:left;align-items: center;
}
.page14_div1 .p4{
    text-align: left;margin-top: 3rem;
}

.page14_div2{
    position: absolute; width:100vw; height:20%; transform:translate(-50%, -50%);top:27%; left:50%;display: flex; display: -webkit-flex;justify-content:left;align-items: center;
}
.page14_div2 .p5{
    text-align: center;width: 20vw;padding: 0.5vw 1vw;border-radius: 10vw;background-image:linear-gradient(to right,rgb(182,220,255),rgb(114 190 255));
}
.page14_div2 .p10{
    margin-left: 2rem;text-align: left;
}

.page14_div3{
    position: absolute; width:100vw; height:20%; transform:translate(-50%, -50%);top:34%; left:50%;display: flex; display: -webkit-flex;justify-content:left;align-items: center;
}
.page14_div3 .p6{
    text-align: center;width: 20vw;padding: 0.5vw 1vw;border-radius: 10vw;background-image:linear-gradient(to right,rgb(182,220,255),rgb(114 190 255));
}
.page14_div3 .p11{
    margin-left: 2rem;text-align: left;
}

.page14_div4{
    position: absolute; width:100vw; height:20%; transform:translate(-50%, -50%);top:41%; left:50%;display: flex; display: -webkit-flex;justify-content:left;align-items: center;
}
.page14_div4 .p7{
    text-align: center;width: 20vw;padding: 0.5vw 1vw;border-radius: 10vw;background-image:linear-gradient(to right,rgb(182,220,255),rgb(114 190 255));
}
.page14_div4 .p12{
    margin-left: 2rem;text-align: left;
}
.page14_div5{
    position: absolute; width:100vw; height:20%; transform:translate(-50%, -50%);top:48%; left:50%;display: flex; display: -webkit-flex;justify-content:left;align-items: center;
}
.page14_div5 .p8{
    text-align: center;width: 20vw;padding: 0.5vw 1vw;border-radius: 10vw;background-image:linear-gradient(to right,rgb(182,220,255),rgb(114 190 255));
}
.page14_div5 .p13{
    margin-left: 2rem;text-align: center;
}

.page14_div6{
    position: absolute; width:100vw; height:20%; transform:translate(-50%, -50%);top:62%; left:50%;
}
.page14_div7{
    position: absolute; width:80vw; height:60%; transform:translate(-50%, -50%);top:120%; left:37%;z-index: 6;
}
.page14_div8{
    margin-top: 20rem;width: 100%; position: absolute;display: flex; display: -webkit-flex;justify-content:center;align-items: center;
}
.page14_div8 .button_0{
    width: 33%;text-decoration: none;
}
.page14_div8 .button_0 img{
    object-fit: cover;width: 50%;margin-left: 25%; height: auto;margin-bottom: 10px;
}
.page14_div8 .button_0 h2{
    line-height: 3rem;color: #ffffff;width:100%;text-align: center; font-weight: normal;
}

.page14_div8 .button_1{
    width: 33%;text-decoration: none;
}
.page14_div8 .button_1 img{
    object-fit: cover;width: 50%;margin-left: 25%; height: auto;margin-bottom: 10px;
}
.page14_div8 .button_1 h2{
    line-height: 3rem;color: #ffffff;width:100%;text-align: center; font-weight: normal;
}

.page14_div8 .button_2{
    width: 33%;text-decoration: none;
}
.page14_div8 .button_2 img{
    object-fit: cover;width: 50%;margin-left: 25%; height: auto;margin-bottom: 10px;
}
.page14_div8 .button_2 h2{
    line-height: 3rem;color: #ffffff;width:100%;text-align: center; font-weight: normal;
}

.page14_div8 .button_3{
    width: 33%;text-decoration: none;
}
.page14_div8 .button_3 img{
    object-fit: cover;width: 50%;margin-left: 25%; height: auto;margin-bottom: 10px;
}
.page14_div8 .button_3 h2{
    line-height: 3rem;color: #ffffff;width:100%;text-align: center; font-weight: normal;
}
.page14_div9{
    width: 80%; height: 50%;transform:translate(-50%, -50%);top:52%; position: absolute; left: 50%;display: flex; display: -webkit-flex; justify-content: right;align-items: center;z-index: 5;
}
.page14_div9 .p0{
    object-fit: contain; position: absolute; width: 100%;
}
/* ---------------------------------------------------------------------------------------- page15 ---------------------------------------------------------------------------------------- */
.page15{
    height: 100vh;position: relative;background-color: #000000;
}
.page15 .t1{
    color: #ffffff;text-align: center;padding-top: 100px;
}
.page15_section{
    width:90%; height:60%; position: absolute; transform:translate(-50%, 10%);left:50%; display: flex; display: -webkit-flex;justify-content: center;align-items: center;
}

.page15_section_div{
    width:49.5%; height:100%; position: relative;
}
.page15_section_div .size{
    object-fit: contain; width:100%;height: 50rem;
} 
.page15_col{
    width: 100%; height: 5rem;display: flex; display: -webkit-flex;justify-content: center;align-items: center;
}
.page15_col .c1{
    width: 10px; height: 10px; border-radius: 50%; background-color: #ffffff;
}
.page15_col .c2{
    width: 10px; height: 10px; border-radius: 50%; background-color: #dcd4d0; margin-left: 5px;
}
.page15_col .c3{
    width: 10px; height: 10px; border-radius: 50%; background-color: #d0ba9f; margin-left: 5px;
}
.page15_section_div h1{
    width: 100%; text-align: center; color: #fcfcfc;margin-top: 5rem;margin-bottom: 2rem;
}
.page15_section_div h3{
    width: 100%; text-align: center; color: #d1d1d1;
}
.page15_section_div button{
    width:60px;height:30px;background: #0065cb;color: #ffffff;border: 0;border-radius: 27px;position: absolute; transform:translate(-50%, 0%); left:50%;bottom:10%
}
.page15_section_div .button_0{
    text-decoration: none;position: absolute; transform:translate(-50%, 0%); left:50%;bottom:0;
}
.page15_section_div span{
    color: #0065cb;
}
.page15_section_div .arr{
    width: 5vw;position: absolute;margin-left: 1vw; bottom: 0;
}

/* ---------------------------------------------------------------------------------------- page16 ---------------------------------------------------------------------------------------- */
.page16{
    height: 100vh;position: relative;background-color: #000000;
}
.page16_section{
    width: 90%; height:85%; position: absolute; transform:translate(-50%, 10%);left: 50%;
}
.page16_section_title{
    width: 100%; height:20%;margin-top: 5%;
}
.page16_section_title .logo{
    position: relative;transform:translate(-50%, -50%);left: 50%;top:20%;width: 60%;object-fit: cover;
}
.page16_section_title .t1{
    text-align: center; font-weight: normal;margin-top: 3rem;
}
.page16_section_page{
    width: 100%; height:40%;display: flex; display: -webkit-flex;justify-content: center;align-items: center;
}
.page16_section_page div{
    width: 30%;height: 40%;
}
.page16_section_page img{
    width: 100%;height: 40%;object-fit: cover;margin-bottom: 20px;
}
.page16_section_page h3{
    text-align: center;bottom: 0;
}
.page16_section_code{
    width: 100%; height:30%;
}
.page16_section_code .code{
    width: 100%;height:60%; object-fit: contain;
}



/* ---------------------------------------------------------------------------------------- modal ---------------------------------------------------------------------------------------- */
#modal-wrapper{
    position: fixed;left: 0;top: 0;right: 0;bottom: 0;background-color: rgba(0,0,0,1);display: none;justify-content: center;align-items: center;z-index: 999;
}
#videoPlay{
    position: fixed;width: 100vw;height: 100vh;z-index: 999999;display:none;
}
#PlayExit{
    position: absolute;top: 1.1rem;right: 1.1rem;width: 3.6rem;height: 3.6rem;z-index: 101;border-radius: 50%;transform: rotate(45deg);display: none;background-color: #e8e8ed;z-index: 999999;
}
#PlayExit span{
    color: rgba(29,29,31,0.56);font-size: 2.4rem;margin: 0.1rem;
}
#modal-wrapper1{
    position: fixed;left: 0;top: 0;right: 0;bottom: 0;background-color: rgba(0,0,0,0.8);display: none;justify-content: center;align-items: center;z-index: 999;
}
#imgPlay{
    position: fixed;width: 100vw;height: 100vh;z-index: 999999;display:none;
}
#imgPlayExit{
    position: absolute;top: 1.1rem;right: 1.1rem;width: 3.6rem;height: 3.6rem;z-index: 101;border-radius: 50%;transform: rotate(45deg);display: none;background-color: #e8e8ed;z-index: 999999;
}
#imgPlayExit span{
    color: rgba(29,29,31,0.56);font-size: 2.4rem;margin: 0.1rem;
}
/*20241115*/

@media screen and (max-width: 640px){
	.page8_div1 .swiper-slide{
		width: 100%;
	}
	.page8_div1 .swiper-slide>div{
		height: 100%;
		top: 50%;
        bottom: auto;
       
	}
	.page8_div3,
	.page8_div5,
	.page8_div7{
		flex-wrap: wrap;
		height: auto;
		bottom: 0;
	}
	.page8_div3 .button_0,
	.page8_div5 .button_0,
	.page8_div7 .button_0{
		order: 1;
	}
	.page8_div3 .button_0 img,
	.page8_div5 .button_0 img,
	.page8_div7 .button_0 img{
		height: auto;
		margin-left: 0;
		margin-top: 0;
	}
	.page8_div3 .p3,
	.page8_div5 .p3,
	.page8_div7 .p3{
		order: 2;
	}
	.page8_div3 .p5,
	.page8_div5 .p5,
	.page8_div7 .p5{
		order: 3;
		width: 100%;
		text-align: center;
	}
}