#index {
    position   : relative;
    /* display : none; */

}

.center {
    margin-left: 17%;
    margin-top : 5%;
}

.left {
    width      : 30%;
    font-size  : 25px;
    font-weight: bold;
    text-align : center;

}

.shareclose {
    position: absolute;
    left    : 0;
    right   : 0;
    bottom  : -20%;
    margin  : auto;
}

#share {
    position        : fixed;
    z-index         : 50;
    background-color:  hsla(0, 4%, 11%, 0.7)!important;
   display: none;
    width           : 100%;
    height          : 100vh;
}

.Share_main {
    opacity         : 1;
    position        : fixed;
    z-index         : 50;
    top             : 5vh;
    left            : 0;
    right           : 0;
    margin          : auto;
    width           : 90%;
    height          : 70vh;
    background-color: #fff !important;
    border-radius   : 2.5vh;
    box-sizing      : border-box;
    border          : 1vh solid hsla(0, 2%, 9%, 0.2);
    padding-top     : 6vh;
}

.Share_img {
    width           : 100%;
    height          : 35vh;
    background-color: #ccc;
    margin          : 0 auto;
    margin-bottom   : 8vh;

}
#tutu{
    height: 0;
}
.Share_bottom {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
}



.right {
    height    : 50%;
    width     : 40%;
    text-align: center;
}

.right img {

    height: 10vh;
    width : 65%;

}


.wenzi {
    text-align: center;
}




.shuming {
    font-size  : 18px;
    font-family: Source Han Sans SC;
    font-weight: bold;
    color      : #565D5E;
    line-height: 26px;
}


/* 
.index2 {

    width   : auto;
    height  : auto;
    position: absolute;
    z-index : 20;


} */

.index22 {
    user-select     : none;
    overflow-y      : auto;
    overflow-x      : hidden;
    position        : fixed;
    background-color: #fff;
    width           : 100%;
    height          : 100vh;
    z-index         : 20;
    display         : none;
}

#jindu {
    position : fixed;
    left     : 46%;
    bottom   : 50%;
    color    : #b42323;
    font-size: 24px;
    z-index  : 200;
}

#video-player {
    position           : fixed;
    /* top             : 0; */
    /* bottom          : 0;
    left               : 0; */
    width              : 100%;
    height             : 100vh;
    z-index            : 21;
    background-color   : black;
}

.guanbi1 {
    position: absolute;
    margin  : 0 auto;
    top     : 5%;
    right   : 2%;
    cursor  : pointer;
    z-index : 21;
}

#video-player video {
    width : 100% !important;
    height: 100vh !important;
}

#video111 {
    position           : fixed;
    /* top             : 0; */
    /* bottom          : 0;
    left               : 0; */
    z-index            : 20;
    background-color   : black;
    width              : 100% !important;
    height             : 100vh !important;
}

#video-player button {
    position        : absolute;
    bottom          : 20px;
    right           : 20px;
    z-index         : 99999;
    padding         : 10px;
    font-size       : 16px;
    color           : white;
    background-color: rgba(0, 0, 0, 0.5);
    border          : none;
    outline         : none;
    cursor          : pointer;
}

.head {
    width   : 100%;
    position: absolute;
    height  : 100vh;
    z-index : 50;
    top     : 0;
}


.head1 {
    position: fixed;
    top     : 10%;
    left    : 18%;
    z-index : 50;
}

.head2 {
    position: fixed;
    top     : 60%;
    left    : 45%;
    z-index : 50;
    cursor  : pointer;
}

#my3dFrame {
    position: absolute;
    top     : 0;
    width   : 100%;
    height  : 100%;
    z-index : 1;
}
#my3dFrame1 {
    /* position: absolute;
    top     : 0; */
    /* width   : 100%;
    height  : 100%; */
    z-index : 1111;
}
.shu {
    display: block;
    /* 将 <img> 元素转换为块级元素 */
    margin : 0 auto;
    height : 57vh;
    width: 100%;
}
.man {
    width          : 158px;
    height         : 31px;
    background     : url("../img/mid.png");
    background-size: 100% 100%;
    position       : absolute;
    left           : 0;
    right          : 0;
    margin         : 0 auto;
    font-size      : 15px;
    font-family    : Source Han Sans SC;
    font-weight    : bold;
    color          : #FFFFFF;
    z-index        : 2;
    text-align     : center;
    line-height    : 31px;
}

.img1 {
    position: absolute;
    top     : 10%;
    left    : 2.5%;
    z-index : 2;
    width   : 32px;
    height  : 32px;
}

.img2 {
    position: absolute;
    top     : 10%;
    right   : 2.5%;
    z-index : 2;
    width   : 32px;
    height  : 32px;
}

.img3 {
    position: absolute;
    top     : 15.8%;
    right   : 2.5%;
    z-index : 2;
    width   : 32px;
    height  : 32px;
}

.bottom {
    visibility: visible;
    opacity   : 1;
    transform : translateY(0%);
    transition: opacity 0.8s ease-out, transform 1.5s ease-out;
}

.hd {
    opacity   : 0;
    transform : translateY(0);
    /* width  : 0; */
    visibility: hidden;
}

#open {
    position: absolute;
    z-index : 20;
    bottom  : 6%;
    left    : 0;
    right   : 0;
    margin  : 0 auto;
    display : none;
    width   : 2%;
}


.bottom {
    /* background-color   : #5E5C5A; */
    /* height             : 182px; */
    /* position        : fixed;
    bottom             : 0; */
    position           : absolute;
    z-index            : 2;
    /* cursor          : default; */
    left               : 0;
    right              : 0;
    bottom             : 0;
    max-width          : 770px;
    margin             : 0 auto;
    overflow           : hidden;

}



.jianjie {

    display         : none;
    background-color: #5E5C5A;


}

.text1 {
    /* height       : auto; */
    font-size  : 10px;
    font-family: Source Han Sans SC;
    font-weight: 400;
    color      : #E5EAEA;
    transform  : scale(0.95);
    text-indent: 0.6cm
}

.text {
    margin-left: 2%;

    font-size  : 14px;
    font-family: Source Han Sans SC;
    font-weight: bold;
    color      : #FFFFFF;
    line-height: 21px;

}

.swiper-container {
    height          : 70px;
    background-color: #5E5C5A;
    padding-top     : 16px;
}

.swiper-slide img {
    width : 95%;
    height: 100%;
}

.swiper-button-prev {
    bottom          : 76px;
    top             : auto;
    background-image: url("../img/left.png");
    background-size : 100%;
    margin-top      : -15px;
    margin-left     : 20px;
    width           : 19px;
    height          : 21px;
}

.swiper-button-next {
    bottom          : 76px;
    top             : auto;
    margin-top      : -15px;
    margin-right    : 20px;
    background-image: url("../img/right.png");
    background-size : 100%;
    width           : 19px;
    height          : 21px;
}

.swiper-button-next:after,
.swiper-button-prev:after {
    content: "";
}


.btn:active {

    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0);
}

.btnbtn {
    position        : relative;
    background-color: #5E5C5A;
    height          : 112px;
    z-index         : 10;
}

.btn {

    background-color: #5E5C5A;

    height  : 112px;
    position: absolute;
    display : flex;
    width   : 80%;

    bottom: -11px;
    left  : 9%;
}

.btn1 {
    flex: 1;

    margin-left: 14px;
}

.btn1 img {
    margin-top: -5px;
    width     : 33%;
}

.btn1 p {
    margin-top : 30px;
    font-size  : 11px;
    font-family: Source Han Sans SC;
    font-weight: 400;
    color      : #FFFFFF;

}

.line {

    width           : 100%;
    height          : 1px;
    background-color: #FFFFFF;
    position        : absolute;
    bottom          : 52px;
    z-index         : 8;

}

#myDiv {
    transition: all 0.3s ease-in-out;
    transform : scaleY(1);
}

#myDiv.hidden {
    transform     : scaleY(0);
    height        : 0;
    padding-top   : 0;
    padding-bottom: 0;
    margin-top    : 0;
    margin-bottom : 0;
    overflow      : hidden;
}

#app {
    background-color: rgba(128, 128, 128, 0.8);
    width           : 100%;
    position        : absolute;
    z-index         : 20;
    top             : 0;
    min-height      : 100vh;
    display         : none;
}

.container {
    display            : flex;
    flex-wrap          : wrap;
    justify-content    : center;
    align-items        : center;
    position           : absolute;
    z-index            : 20;
    /* height          : 98vh; */
    width              : 100%;
    /* background-color: rgba(128, 128, 128, 0.5); */
    top                : 15%;
}

.box {
    width           : 25vw;
    height          : 18vw;
    margin          : 1.8vw;
    background-color: #DDDBDC;
    display         : flex;
    justify-content : center;
    align-items     : center;
    font-size       : 6vw;
    font-weight     : bold;
    border-radius   : 10px;
    cursor          : pointer;
    position        : relative;
}

.box.selected {
    background-color: #2bb7ad;
    color           : white;
}

.tit {
    text-align : center;
    position   : absolute;
    top        : 8%;
    left       : 0;
    right      : 0;
    margin     : 0 auto;
    font-size  : 41px;
    font-family: Source Han Sans SC;
    font-weight: bold;
    color      : #FFFFFF;
}

.tit1 {
    position   : absolute;
    text-align : center;
    font-size  : 44px;
    font-family: Bahnschrift;
    font-weight: normal;
    top        : 20%;
}

.tit2 {
    position   : absolute;
    text-align : center;
    font-size  : 20px;
    font-family: Source Han Sans SC;
    font-weight: 500;
    top        : 50%;

}



.guanbi {
    position: absolute;
    left    : 0;
    right   : 0;
    margin  : 0 auto;
    bottom  : 6%;
    cursor  : pointer;
}

@media only screen and (min-width: 768px) {
    .container {
        padding: 0 32px;
    }

    .box {
        width    : 212px;
        height   : 161px;
        font-size: 32px;
    }


}

@media screen and (max-width: 1000px) {
    .foot {
        height: 135px;
    }
}

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

@media screen and (max-width: 800px) {
    #ship{
        width: 100%;
      }
    #toggle-autoplay{
        width: 56%;
    }
    .head1 {
        position: fixed;
        width   : 80%;
        left    : 10%;
        top     : 20%;
    }

    #open {

        width: 8%;
    }

    .row11 {
        width: 80%;
    }

    .center {
        margin-left: 12%;
        margin-top : 20%;
    }

    .btn1 img {
        margin-top: -5px;
        width     : 67%;
    }

    .guanbi1 {
        width: 10%;
    }

    .row {
        margin-bottom: 1px !important;

    }

    .head2 {
        position: fixed;
        width   : 30%;
        left    : 35%;
        bottom  : 30%;
    }

    .swiper-slide img {
        width : 90%;
        height: 6vh;
    }

    .tit1 {
        position   : absolute;
        text-align : center;
        font-size  : 24px;
        font-family: Bahnschrift;
        font-weight: normal;
        top        : 15%;
    }

    .anniu {
        width: 103%;
    }

    .tit2 {
        position   : absolute;
        text-align : center;
        font-size  : 13px;
        font-family: Source Han Sans SC;
        font-weight: 500;
        top        : 60%;
    }

    .column1 {
        display: block !important;
        width  : 86%;
    }

    .column1 p {
        margin-left: 13px;
        display    : inline-block;
    }

    .column2 p {
        margin-left: 13px;
        display    : inline-block;
    }

    .swiper-button-prev {

        margin-left: 8px;

    }

    .swiper-button-next {

        margin-right: 8px;

    }

    .column2 {
        display: block !important;
        width  : 86%;
    }

    .container1 {
        position     : relative;
        top          : 50%;
        left         : 20% !important;
        /* margin-top: 37px; */
    }
}

@media screen and (min-width: 801px) and (max-width: 1730px) {}

@media screen and (min-width: 1731px) and (max-width: 1920px) {}