/*loading页面*/
.Loading {
    width: 750px;
    height: 1401px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    z-index: 1;
}

.Loading .bg {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 750px;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url(../images/loading/Loading_bg.jpg?t=202109141506);
}

.Loading .line {
    position: absolute;
    top: 50%;
    left: 0px;
    width: 750px;
    height: 1333px;
    transform: translateY(-50%);
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url(../images/loading/loading_line.png?t=202109141506);
}

.Loading .contBox {
    position: absolute;
    top: 50%;
    left: 224px;
    width: 303px;
    height: 1120px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    z-index: 3;
    transform: translateY(-50%);
}

.Loading .contBox .clickTips {
    position: absolute;
    top: 924px;
    left: 32px;
    width: 239px;
    height: 48px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    background-image: url(../images/loading/Loading_contBox_clickTips.png?t=202109141506);
    opacity: 0;
}

.Loading .contBox .clickTips.showed {
    animation: fadeIn forwards 0.38s linear;
}

.Loading .contBox .finger {
    position: absolute;
    top: 808px;
    left: 120px;
    width: 61px;
    height: 74px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    background-image: url(../images/loading/Loading_contBox_finger.png?t=202109141506);
    opacity: 0;
    transform: scale(0.88);
    transform-origin: top center;
}

.Loading .contBox .finger.showed {
    animation: fadeIn forwards 0.38s 0s linear, posterYoyo infinite alternate 0.38s 0.30s linear;
}

.Loading .contBox .loadBox {
    position: absolute;
    bottom: 178px;
    left: 0px;
    width: 303px;
    height: 72px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    z-index: 6;

}

.Loading .contBox .loadBox .round {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 90px;
    height: 90px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    background-image: url(../images/loading/Loading_contBox_loadBox_round.png?t=202109141506);
}

.Loading .contBox .loadBox .round_inner {
    position: absolute;
    bottom: 9px;
    left: 9px;
    width: 72px;
    height: 0px;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-image: url(../images/loading/Loading_contBox_loadBox_round_inner.png?t=202109141506);
}

.Loading .contBox .loadBox .loadText {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 303px;
    height: 72px;
    text-align: center;
    line-height: 72px;
    color: #ffffff;
    font-size: 20px;
    font-family: "HYHeiLiZhiTiJ";
    font-weight: lighter;
}

.Loading .contBox .loadBox .loadText span {
    font-size: 33px;
    font-weight: bold;
    margin-right: 2px;
}

.Loading .contBox .logo {
    position: absolute;
    top: 48px;
    left: 0px;
    width: 303px;
    height: 129px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    background-image: url(../images/loading/Loading_contBox_logo.png?t=202109141506);
}

.Loading .contBox .startBtnBox {
    position: absolute;
    bottom: 0px;
    left: 0.5px;
    width: 302px;
    height: 144px;
    opacity: 0;
}

.Loading .contBox .startBtnBox.showed {
    animation: fadeIn forwards 0.28s linear;
}

.Loading .contBox .startBtnBox .startShadow {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 302px;
    height: 144px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    background-image: url(../images/loading/loadingBtn02.png?t=202109141506);
    opacity: 0.38;
    z-index: 1;
}

.Loading .contBox .startBtnBox.showed .startShadow {
    animation: fadeInLittle forwards 1.88s linear infinite alternate;
}

.Loading .contBox .startBtnBox .startBtn {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 302px;
    height: 144px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    background-image: url(../images/loading/loadingBtn01.png?t=202109141506);
    z-index: 2;
}

/*intro视频*/

.videoBox {
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translateY(-50%);
    width: 750px;
    height: 1500px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.videoBox #introVideo {
    width: 753px;
    height: 1500px;
}

.videoBox .videoPoster {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 750px;
    height: 1500px;
    z-index: 18;
    cursor: pointer;
    overflow: hidden;
    display: none;
}

.videoBox .videoPoster.showed {
    display: block;
}

/*3D界面*/
.threeStage {

}

.threeStage .threeBox {
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translateY(-50%);
    width: 750px;
    height: 1500px;
    pointer-events: auto;
}

.threeStage .threeBox.noTouch {
    pointer-events: none;
}

.playCanvas {
    width: 750px;
    height: 1500px;
}

.threeStage .mainBox {
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translateY(-50%);
    width: 750px;
    height: 1500px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    pointer-events: none;
    /*opacity: 0.38;*/
    opacity: 0;
    display: none;
}

.threeStage .mainBox.showed {
    animation: fadeIn forwards 0.68s linear;
    display: block;
}

.threeStage .mainBox.noTouch {
    pointer-events: none;
}

.content.loaded .threeStage .mainBox.showBg {
    /*background-image: url(../videos/Intro_750_1500-0002.jpg?t=202109141506);*/
}

.threeStage .mainBox .contBox {
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translateY(-50%);
    width: 750px;
    height: 1118px;
}

.threeStage .mainBox .contBox .logo {
    position: absolute;
    top: 0px;
    left: 223px;
    width: 303px;
    height: 129px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
}

.content.loaded .threeStage .mainBox .contBox .logo {
    background-image: url(../images/loading/Loading_contBox_logo.png?t=202109141506);
}

.threeStage .mainBox .contBox .changBtn {
    position: absolute;
    top: 160px;
    right: 50px;
    width: 135px;
    height: 138px;
    background-position: bottom center;
    background-repeat: no-repeat;
    cursor: pointer;
    pointer-events: auto;
}

.content.loaded .threeStage .mainBox .contBox .changBtn01 {
    background-image: url(../images/main/changBtn02.png?t=202109141506);
}

.content.loaded .threeStage .mainBox .contBox .changBtn02 {
    background-image: url(../images/main/changBtn01.png?t=202109141506);
}


.threeStage .mainBox .contBox .tipsBox {
    position: absolute;
    top: 450px;
    left: 239.5px;
    width: 271px;
    height: 351px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
}

.threeStage .mainBox .contBox .tipsBox .tipsImg {
    position: absolute;
    top: 0px;
    left: 29px;
    width: 247px;
    height: 234px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
}

.content.loaded .threeStage .mainBox .contBox .tipsBox .tipsImg {
    background-image: url(../images/main/moveIcon.png?t=202109141506);
}

.threeStage.showed .mainBox .contBox .tipsBox .tipsImg {
    animation: fadeYoyo alternate infinite 1.2s 0.38s linear;
}

.threeStage .mainBox .contBox .tipsBox .tipsText {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 271px;
    height: 159px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
}

.content.loaded .threeStage .mainBox .contBox .tipsBox .tipsText {
    background-image: url(../images/main/moveTips.png?t=202109141506);
}

.threeStage .mainBox .contBox .nextBtnBox {
    position: absolute;
    bottom: 49px;
    left: 291px;
    width: 168px;
    height: 161px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    cursor: pointer;
    pointer-events: auto;
}

.threeStage .mainBox .contBox .nextBtnBox .nextBtnShadow {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 168px;
    height: 161px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    cursor: pointer;
    z-index: 1;
    opacity: 0;
}

.threeStage .mainBox.showed .contBox .nextBtnBox .nextBtnShadow {
    animation: fadeIn forwards 2.2s 1.2s linear infinite alternate;
}

.threeStage .mainBox .contBox .nextBtnBox .nextBtn {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 168px;
    height: 161px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    cursor: pointer;
    z-index: 2;
}

.content.loaded .threeStage .mainBox .contBox .nextBtnBox .nextBtn {
    background-image: url(../images/main/nextBtn01.png?t=202109141506);
}

.content.loaded .threeStage .mainBox .contBox .nextBtnBox .nextBtnShadow {
    background-image: url(../images/main/nextBtn02.png?t=202109141506);
}

.threeStage .mainBox .contBox .nextTips {
    position: absolute;
    bottom: 0px;
    left: 290px;
    width: 170px;
    height: 27px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    z-index: 3;
}

.content.loaded .threeStage .mainBox .contBox .nextTips {
    background-image: url(../images/main/nextBtnTips.png?t=202109141506);
}

/*拆解视频完*/
.threeStage .mainBoxTwo {
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translateY(-50%);
    width: 750px;
    height: 1500px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    opacity: 0;
    display: none;
}

.threeStage .mainBoxTwo.showed {
    animation: fadeIn forwards 0.68s linear;
    display: block;
}

.content.loaded .threeStage .mainBoxTwo {
    /*background-image: url(../videos/dismantleVideo-0002.jpg?t=202109141506);*/
}

.threeStage .mainBoxTwo .contBox {
    position: absolute;
    top: 57.6%;
    left: 0px;
    transform: translateY(-50%);
    width: 750px;
    height: 1100px;
}

.threeStage .mainBoxTwo .contBox .modelTips {
    position: absolute;
    bottom: 136px;
    left: 221px;
    width: 308px;
    height: 19px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    z-index: 33;
    pointer-events: none;
}

.content.loaded .threeStage .mainBoxTwo .contBox .modelTips {
    background-image: url(../images/main/modelTips.png?t=202109141506);
}

.threeStage .mainBoxTwo .contBox .backBtn {
    position: absolute;
    top: 0px;
    right: 30px;
    width: 144px;
    height: 94px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    z-index: 30;
    pointer-events: auto;
}

.threeStage .mainBoxTwo .contBox .backBtn .backBtnShadow {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 144px;
    height: 94px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    z-index: 30;
    opacity: 0;
}

.content.loaded .threeStage .mainBoxTwo .contBox .backBtn .backBtnShadow {
    background-image: url(../images/main/backBtn02.png?t=202109141506);
}

.mainBoxTwo.showed .contBox .backBtn .backBtnShadow {
    animation: fadeIn forwards 2.2s 0.2s linear infinite alternate;
}

.threeStage .mainBoxTwo .contBox .backBtn .backBtner {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 144px;
    height: 94px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    z-index: 31;
}

.content.loaded .threeStage .mainBoxTwo .contBox .backBtn .backBtner {
    background-image: url(../images/main/backBtn.png?t=202109141506);
}

.threeStage .mainBoxTwo .contBox .wechatBtn {
    position: absolute;
    bottom: 0px;
    left: 60px;
    width: 205px;
    height: 107px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    cursor: pointer;
}

.threeStage .mainBoxTwo .contBox .wechatBtn .buttonShadow {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 205px;
    height: 107px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    z-index: 10;
    opacity: 0;
}

.content.loaded .threeStage .mainBoxTwo .contBox .wechatBtn .buttonShadow {
    background-image: url(../images/main/infoTips02.png?t=202109141506);
}

.mainBoxTwo.showed .contBox .wechatBtn .buttonShadow {
    animation: fadeIn forwards 2.2s 0.1s linear infinite alternate;
}

.threeStage .mainBoxTwo .contBox .wechatBtn .btner {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 205px;
    height: 107px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    z-index: 12;
}

.content.loaded .threeStage .mainBoxTwo .contBox .wechatBtn .btner {
    background-image: url(../images/main/wechatBtn01.png?t=202109141506);
}


.threeStage .mainBoxTwo .contBox .orderBtn {
    position: absolute;
    bottom: 0px;
    left: 272.5px;
    width: 205px;
    height: 107px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    cursor: pointer;
}

.threeStage .mainBoxTwo .contBox .orderBtn.orderBtn02 {
    left: 100px;
}

.threeStage .mainBoxTwo .contBox .orderBtn .buttonShadow {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 205px;
    height: 107px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    z-index: 10;
    opacity: 0;
}

.content.loaded .threeStage .mainBoxTwo .contBox .orderBtn .buttonShadow {
    background-image: url(../images/main/infoTips02.png?t=202109141506);
}

.mainBoxTwo.showed .contBox .orderBtn .buttonShadow {
    animation: fadeIn forwards 2.2s 0.3s linear infinite alternate;
}

.threeStage .mainBoxTwo .contBox .orderBtn .btner {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 205px;
    height: 107px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    z-index: 12;
}

.content.loaded .threeStage .mainBoxTwo .contBox .orderBtn .btner {
    background-image: url(../images/main/order_btn01_02.png?t=202109141506);
}


.threeStage .mainBoxTwo .contBox .shopBtn {
    position: absolute;
    bottom: 0px;
    right: 60px;
    width: 205px;
    height: 107px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    cursor: pointer;
}

.threeStage .mainBoxTwo .contBox .shopBtn.shopBtn02 {
    right: 100px;
}

.threeStage .mainBoxTwo .contBox .shopBtn .buttonShadow {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 205px;
    height: 107px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    z-index: 10;
    opacity: 0;
}

.content.loaded .threeStage .mainBoxTwo .contBox .shopBtn .buttonShadow {
    background-image: url(../images/main/infoTips02.png?t=202109141506);
}

.mainBoxTwo.showed .contBox .shopBtn .buttonShadow {
    animation: fadeIn forwards 2.2s 0.5s linear infinite alternate;
}

.threeStage .mainBoxTwo .contBox .shopBtn .btner {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 205px;
    height: 107px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    z-index: 12;
}

.content.loaded .threeStage .mainBoxTwo .contBox .shopBtn .btner {
    background-image: url(../images/main/test_btn.png?t=202109141506);
}

.threeStage .mainBoxTwo .contBox .pupBtns .points {
    position: absolute;
    width: 93px;
    height: 95px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    cursor: pointer;
}

.content.loaded .threeStage .mainBoxTwo .contBox .pupBtns .points {
    background-image: url(../images/main/points.png?t=202109141506);
}

.threeStage .mainBoxTwo .contBox .pupBtn01 {
    position: absolute;
    top: 135px;
    left: 373px;
    width: 350px;
    height: 95px;
    background-position: center right;
    background-repeat: no-repeat;
    opacity: 0;
    cursor: pointer;
}

.threeStage .mainBoxTwo .contBox .pupBtn01 .points {
    top: 0px;
    left: 0px;
}

.threeStage .mainBoxTwo.showed .contBox .pupBtn01 {
    animation: fadeIn forwards 0s 0.38s;
}

.threeStage .mainBoxTwo.showed .contBox .pupBtn01 .points {
    animation: fadeYoyo alternate infinite 1.2s 0.38s linear;
}

.content.loaded .threeStage .mainBoxTwo .contBox .pupBtn01 {
    background-image: url(../images/main/info01.png?t=202109141506);
}

.threeStage .mainBoxTwo .contBox .pupBtn02 {
    position: absolute;
    top: 420px;
    left: 53px;
    width: 302px;
    height: 95px;
    background-position: center left;
    background-repeat: no-repeat;
    opacity: 0;
}

.threeStage .mainBoxTwo .contBox .pupBtn02 .points {
    top: 0px;
    right: 0px;
}

.threeStage .mainBoxTwo.showed .contBox .pupBtn02 {
    animation: fadeIn forwards 0.2s 0.38s;
}

.threeStage .mainBoxTwo.showed .contBox .pupBtn02 .points {
    animation: fadeYoyo alternate infinite 1.2s 0.58s linear;
}

.content.loaded .threeStage .mainBoxTwo .contBox .pupBtn02 {
    background-image: url(../images/main/info02.png?t=202109141506);
}

.threeStage .mainBoxTwo .contBox .pupBtn03 {
    position: absolute;
    top: 792px;
    left: 508px;
    width: 215px;
    height: 95px;
    background-position: center right;
    background-repeat: no-repeat;
    opacity: 0;
}

.content.loaded .threeStage .mainBoxTwo .contBox .pupBtn03 {
    background-image: url(../images/main/info03.png?t=202109141506);
}

.threeStage .mainBoxTwo .contBox .pupBtn03 .points {
    top: 0px;
    left: 0px;
}

.threeStage .mainBoxTwo.showed .contBox .pupBtn03 {
    animation: fadeIn forwards 0.4s 0.38s;
}

.threeStage .mainBoxTwo.showed .contBox .pupBtn03 .points {
    animation: fadeYoyo alternate infinite 1.2s 0.78s linear;
}

/*弹窗*/
.pupWindows {
    display: none;
    opacity: 0;
    pointer-events: none;
}

.pupWindows.showed {
    display: block;
    animation-name: fadeIn;
    animation-duration: 0.38s;
    animation-delay: 0s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    pointer-events: auto;
}

.pupBox {
    width: 750px;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 20;
    background: rgba(0, 0, 0, 0.8);
    cursor: pointer;
}

.pupBox .pupCont {
    width: 653px;
    height: 1200px;
    position: absolute;
    top: 50%;
    left: 49px;
    transform: translateY(-50%);
    z-index: 21;
    background-repeat: no-repeat;
    background-position: top center;
}

.pupBox .pupVideoBox {
    position: absolute;
    top: 42px;
    left: 79px;
    width: 546px;
    height: 732px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    overflow: hidden;
}

.pupBox .pupVideoBox #dismantleVideo {
    width: 546px;
    height: 1092px;
}

.pupBox .pupVideoBox .videoPoster {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 546px;
    height: 1092px;
    z-index: 28;
    cursor: pointer;
    overflow: hidden;
    display: none;
}

.pupBox .pupVideoBox .videoPoster.showed {
    display: block;
}

.pupBox .backBtn {
    position: absolute;
    bottom: 0px;
    left: 254.5px;
    width: 144px;
    height: 94px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    z-index: 30;
}

.pupBox .backBtn .backBtnShadow {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 144px;
    height: 94px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    z-index: 30;
    opacity: 0;
}

.content.loaded .pupBox .backBtn .backBtnShadow {
    background-image: url(../images/main/backBtn02.png?t=202109141506);
}

.pupBox.showed .backBtn .backBtnShadow {
    animation: fadeIn forwards 2.2s 0.2s linear infinite alternate;
}

.pupBox .backBtn .backBtner {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 144px;
    height: 94px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    z-index: 31;
}

.content.loaded .pupBox .backBtn .backBtner {
    background-image: url(../images/main/backBtn.png?t=202109141506);
}

.pupBox .descBox {
    position: absolute;
    bottom: 75px;
    left: 100px;
    width: 550px;
    height: 100px;
    z-index: 30;
    background-position: center top;
    background-repeat: no-repeat;
}

.shopBox {
    width: 750px;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 20;
    background: rgba(0, 0, 0, 0.89);
    cursor: pointer;
}

.shopBoxCont {
    width: 653px;
    height: 1210px;
    position: absolute;
    top: 50%;
    left: 49px;
    transform: translateY(-50%);
    z-index: 21;
    background-repeat: no-repeat;
    background-position: top center;
    overflow: hidden;
}

.content.loaded .shopBox .shopBoxCont {
    background-image: url(../images/main/shopBg.jpg?t=202109141506);
}

.shopBox .shopBoxCont .scroller {
    width: 626px;
    height: 630px;
    position: absolute;
    bottom: 118px;
    left: 13.5px;
    z-index: 21;
    background-repeat: no-repeat;
    background-position: top center;
    overflow: hidden;
}

.shopBox .scroller .scorllerCenter {
    width: 626px;
    height: 2249px;
    position: relative;
    z-index: 21;
    padding: 18px 0 38px 0;
    margin: 0 auto;
}

.shopBox .scroller .scorllerCenter .shopLists {
    position: relative;
    margin: 0 auto;
    width: 626px;
    z-index: 21;
    background-repeat: no-repeat;
    background-position: center center;
    overflow: hidden;
}

.shopBox .scroller .scorllerCenter .shopList01 {
    height: 865px;
}

.content.loaded .shopBox .scroller .scorllerCenter .shopList01 {
    background-image: url(../images/main/shopList_01.png?t=202109141506);
}

.shopBox .scroller .scorllerCenter .shopList02 {
    height: 900px;
}

.content.loaded .shopBox .scroller .scorllerCenter .shopList02 {
    background-image: url(../images/main/shopList_02.png?t=202109141506);
}

.shopBox .scroller .scorllerCenter .shopList03 {
    height: 484px;
}

.content.loaded .shopBox .scroller .scorllerCenter .shopList03 {
    background-image: url(../images/main/shopList_03.png?t=202109141506);
}

.shopBox .scroller .scorllerCenter .shopList03 .telBox01 {
    position: absolute;
    left: 115px;
    top: 391px;
    width: 398px;
    height: 32px;
    cursor: pointer;
}

.shopBox .scroller .scorllerCenter .shopList03 .telBox02 {
    position: absolute;
    left: 116px;
    top: 426px;
    width: 397px;
    height: 30px;
    cursor: pointer;
}

.shopBox .backBtn {
    position: absolute;
    bottom: 0px;
    left: 254.5px;
    width: 144px;
    height: 94px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    z-index: 30;
}

.shopBox .backBtn .backBtnShadow {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 144px;
    height: 94px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    z-index: 30;
    opacity: 0;
}

.content.loaded .shopBox .backBtn .backBtnShadow {
    background-image: url(../images/main/backBtn02.png?t=202109141506);
}

.shopBox.showed .backBtn .backBtnShadow {
    animation: fadeIn forwards 2.2s 0.2s linear infinite alternate;
}

.shopBox .backBtn .backBtner {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 144px;
    height: 94px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    z-index: 31;
}

.content.loaded .shopBox .backBtn .backBtner {
    background-image: url(../images/main/backBtn.png?t=202109141506);
}

/*微信弹窗*/
.wechatBox {
    width: 750px;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 20;
    background: rgba(0, 0, 0, 0.89);
    cursor: pointer;
}

.wechatBoxCont {
    width: 653px;
    height: 1182px;
    position: absolute;
    top: 50%;
    left: 49px;
    transform: translateY(-50%);
    z-index: 21;
    background-repeat: no-repeat;
    background-position: top center;
    overflow: hidden;
}

.content.loaded .wechatBox .wechatBoxCont {
    background-image: url(../images/main/frameBg.jpg?t=202109141506);
}

.wechatBox .wechatBoxCont .wechatFrame {
    width: 653px;
    height: 1111px;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 21;
    background-repeat: no-repeat;
    background-position: top center;
    overflow: hidden;
}

.wechatBox .backBtn {
    position: absolute;
    bottom: 0px;
    left: 275.5px;
    width: 102px;
    height: 50px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    z-index: 30;
}

.content.loaded .wechatBox .backBtn {
    background-image: url(../images/live/live_contBox_backBtn.png?t=202109141506);
}

/*直播预告*/
.live {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 750px;
    height: 1398px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    z-index: 11;
}

.live .videoBg {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 750px;
    height: 1500px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
}

.live .videoBg {
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translateY(-50%);
    width: 750px;
    height: 1500px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.live .videoBg #liveVideo {
    width: 750px;
    height: 1500px;
}

.live .videoBg .videoPoster {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 750px;
    height: 1500px;
    z-index: 18;
    cursor: pointer;
    overflow: hidden;
    display: none;
}

.live .videoBg .videoPoster.showed {
    display: block;
}


.live .contBox {
    position: absolute;
    top: 140px;
    left: 117px;
    width: 585px;
    height: 1199px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    z-index: 13;
}

.live .contBox .logo {
    position: absolute;
    top: 0px;
    left: 110px;
    width: 303px;
    height: 129px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
}

.content.loaded .live .contBox .logo {
    background-image: url(../images/live/live_contBox_logo.png?t=202109141506);
}

.live .contBox .startTips {
    position: absolute;
    top: 648px;
    left: 0px;
    width: 519px;
    height: 351px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
}

.content.loaded .live .contBox .startTips {
    background-image: url(../images/live/live_contBox_startTips.png?t=202109141506);
}

.live .contBox .backBtn {
    position: absolute;
    top: 27px;
    left: 483px;
    width: 102px;
    height: 50px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
}

.content.loaded .live .contBox .backBtn {
    background-image: url(../images/live/live_contBox_backBtn.png?t=202109141506);
}

.live .contBox .shareBtn {
    position: absolute;
    top: 982px;
    left: 140px;
    width: 236px;
    height: 217px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
}

.content.loaded .live .contBox .shareBtn {
    background-image: url(../images/live/live_contBox_shareBtn.png?t=202109141506);
}

.live .shareBox {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 750px;
    height: 100%;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    z-index: 18;
    opacity: 0;
    display: none;
}

.live .shareBox.showed {
    display: block;
    animation: fadeIn forwards 0.38s linear;
}

.live .shareBox .share_bg {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 750px;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
}

.live .shareBox .share_arrow {
    position: absolute;
    top: 67px;
    left: 685px;
    width: 31px;
    height: 44px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
}

.content.loaded .live .shareBox .share_arrow {
    background-image: url(../images/live/live_shareBox_share_arrow.png?t=202109141506);
}

.live .shareBox.showed .share_arrow {
    animation: yoyoTwo forwards 0.38s 0.2s linear alternate infinite;
}

.live .shareBox .shareTips {
    position: absolute;
    top: 175px;
    left: 478px;
    width: 237px;
    height: 34px;
    background-position: 0px 0px;
    background-repeat: no-repeat;
}

.content.loaded .live .shareBox .shareTips {
    background-image: url(../images/live/live_shareBox_shareTips.png?t=202109141506);
}