body {
    margin: 0;
}
.page1 {
    height: 51.4271vw;
    background-image: url('https://juhehuyu-1319496743.cos.ap-beijing.myqcloud.com/asfximg/img/page1-bg.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    z-index: 5;
}
.page2 {
    height: 52.0833vw;
    /* background-image: url('https://juhehuyu-1319496743.cos.ap-beijing.myqcloud.com/asfximg/img/page2-bg.jpg'); */
    /* margin-top: -11vw; */
    margin-top: -0.1vw;
    position: relative;
}
.content-container {
    position: absolute;
    top: 0;
    width: 100%;
}
.page2-bg{
    height: 52.0833vw;
    background-image: url('https://juhehuyu-1319496743.cos.ap-beijing.myqcloud.com/asfximg/img/page2-bg.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
}
.page3 {
    height: 52.08vw;
    background-image: url('https://juhehuyu-1319496743.cos.ap-beijing.myqcloud.com/asfximg/img/page3-bg.jpg');
    position: relative;
    margin-top: -0.6vw;
}
.page3-bg{
    height: 52.08vw;
    background-image: url('https://juhehuyu-1319496743.cos.ap-beijing.myqcloud.com/asfximg/img/page3-bg.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
}
.page4 {
    height: 52.08vw;
    position: relative;
    /* margin-top: -15.2vw; */
}
.page4-bg{
    height: 52.08vw;
    background-image: url('https://juhehuyu-1319496743.cos.ap-beijing.myqcloud.com/asfximg/img/page4-bg.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
}
.page5 {
    height: 52.08vw;
    background-image: url('https://juhehuyu-1319496743.cos.ap-beijing.myqcloud.com/asfximg/img/page5-bg.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    z-index: 5;
    margin-top: -0.6vw;
    width: 100%;
    overflow: hidden;
}
.page6 {
    height: 10vw;
    background-image: url('https://juhehuyu-1319496743.cos.ap-beijing.myqcloud.com/asfximg/img/page-seperator.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    z-index: 5;
    margin-top: -0.8vw;
    display: flex;
    align-items: center;
    justify-content: center;
}
.page-title {
    text-align: center;
    padding: 7vw 0 3vw;
    position: relative;
}
.page-title img, .page3-title img {
    width: 42vw;
}
.page3-title {
    text-align: center;
    padding: 6.4vw 0 2vw;
    position: relative;
}
.gift-container {
    position: relative;
    z-index: 100;
}
.gift-container div {
    display: flex;
    justify-content: center;
}
.gift-container div img {
    transition: transform 0.3s;
    width: 14.4146vw;
    display: block;
    height: auto;
}
.gift-container .up .poster {
    width: 28.802vw;
}
.gift-container div img:hover {
    transform: scale(1.06);
}
.profession-container {
    /* padding: 0 21vw; */
    position: relative;
    width: 100%;
}

.profession-container .profession-note {
    width: 6.354vw ;
    top: 14vw;
    right: 25vw;
    position: absolute;
}
.profession-container .icon-title {
    width: 8.2292vw ;
    top: 3.2vw;
    left: 27.4vw;
    position: absolute;
}
.profession-container .profession-portrait {
    width: 40.6771vw ;
    position: absolute;
    left: 30vw;
    top: -3vw;
}
.icon-container {
    padding: 1.6vw 38.8vw;
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 10;
    margin-top: 30vw;
}
.icon-container img {
    width: 3.9583vw;
    height: 3.9583vw;
    cursor: pointer;
    outline: none;
}

.deer {
    width: 33.072vw;
    position: absolute;
    left: 0;
    bottom: 5vw;
}
.horse {
    width: 30.572vw;
    position: absolute;
    right: 0;
    bottom: 9vw;
}
.code-wrapper {
    position: relative;
    height: 36vw;
}
.code-wrapper .circle1 {
    width: 18vw;
    height: 18vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}
.code-wrapper .circle1 .inform {
    position: absolute;
    bottom: 2vw;
    left: 50%;
    color: #ffd181;
    transform: translateX(-50%);
}
.code-wrapper .circle3 {
    width: 29vw;
    height: 29vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    
}
.code-wrapper .circle3::after {
    display: inline-block;
    content: '';
    width: 100%;
    height: 100%;
    border-radius: 29vw;
    border: 2px solid rgba(252, 219, 161, 0.6);
    animation: spinClock 3s infinite linear;
}
.code-wrapper .circle1::after {
    display: inline-block;
    content: '';
    width: 100%;
    height: 100%;
    border-radius: 20vw;
    border: 2px solid #fcdba1;
    animation: spinClock 12s infinite linear;
}
.code-wrapper .circle5 {
    width: 20.6vw;
    height: 20.6vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}
.code-wrapper .circle5 img {
    width: 100%;
    height: 100%;
    animation: spinClock 34s infinite linear;
}
.code-wrapper .circle4 {
    width: 34.6vw;
    height: 34.6vw;
    border-radius: 34.6vw;
    border: 2px solid rgba(252, 219, 161, 0.2);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    /* animation: spinReverse 3s infinite linear; */
}
.code-wrapper .circle2 {
    width: 24vw;
    height: 24vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    
}
.code-wrapper .circle2 img {
    width: 100%;
    height: 100%;
    animation: spinReverse 16s infinite linear;
}
.code-wrapper .wrapper1 {
    padding: 6px;
    border: 4px solid #fff4b5;
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}
.code-wrapper .wrapper2 {
    text-align: center;
    display: inline-block;
    padding: 4px;
    background-color: #8c7359;
    font-size: 0;
}
.code-wrapper .wrapper2 img {
    width: 9vw;
    height: 9vw;
}

.wrapper{
    position: relative;
}
.swiper-container {
    width: 50%;
    margin-top: -26.4354vw;
}
.slide-bg {
    width: 51.4%;
    margin: 0 auto;
    height: 27.1354vw;
    background-image: url('https://juhehuyu-1319496743.cos.ap-beijing.myqcloud.com/asfximg/img/slide-bg.png');
    background-size: 100%;
    background-repeat: no-repeat;
}
.swiper-slide {
    text-align: center;
    max-width: 100%;
}
.swiper-slide img{
    width: 100%
}
.swiper-pagination {
    left: 50%;
    transform: translateX(-50%);
    margin-top: 24px;
    display: flex;
}
.swiper-pagination-bullet {
    display: flex;
    width: 16px;
    height: 16px;
    border: 3px solid #8c7359;
    border-radius: 16px;
    background: none;
    justify-content: center;
    align-items: center;
    margin: 0 4px;
    outline: none;
}
.swiper-pagination-bullet-active {
    color:#fff;
    outline: none;
	border: 2px solid #bb343a;
}
.swiper-pagination-bullet-active::after {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background-color: #bb343a;
}
.next-img,.prev-img {
    width: 1.459vw;
    height: auto;
    background-image: none;
    outline: none;
}
.prev-img {
    left: 21.6vw;
}
.next-img {
    right: 21.6vw;
    
}

@keyframes spinReverse {
    from {
        transform: rotate(360deg) ;
    }
    to {
        transform: rotate(0deg) ;
    }
}
@keyframes spinClock {
    from {
        transform: rotate(0deg) ;
    }
    to {
        transform: rotate(360deg) ;
    }
}
.side-bar {
    position: fixed;
    top: 10vw;
    right: 1.4vw;
    background-image: url('https://juhehuyu-1319496743.cos.ap-beijing.myqcloud.com/asfximg/img/side-bar.png');
    background-size: 0.7882vw 100%;
    background-position: center;
    background-repeat: no-repeat;
    height: 28.2712vw;
    display: flex;
    flex-direction: column;
    z-index: 100;
    justify-content: space-around;
}
.side-bar img {
    width: 4.8345vw;
    cursor: pointer;
}

.download-wrapper {
    position: absolute;
    top: 29.6vw;
    left: 35%;
    transform: translateX(-50%);
    display: flex;
    padding: 14px;
    background-image: url('https://juhehuyu-1319496743.cos.ap-beijing.myqcloud.com/asfximg/img/downlaod-box.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.download-wrapper .left {
    background-image: url('https://juhehuyu-1319496743.cos.ap-beijing.myqcloud.com/asfximg/img/downlaod-bg.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
}
.download-wrapper .left img {
    width: 7vw;
    /* height: 6.8vw; */
    margin: 4px;
}
.download-wrapper .left span {
    width: 14px;
    font-size: 14px;
    word-wrap: break-word;
    display: inline-block;
    color: white;
    margin: 0 4px;
}
.download-wrapper .right {
    display: flex;
    flex-direction: column;
    justify-content: space-between ;
    margin-left: 4px;
}
.download-wrapper .right img {
    /* flex-grow: 1; */
    margin-bottom: 4px;
    cursor: pointer;
    width: 10.2995vw;
    height: auto;
}

.download-wrapper .right a img {
    margin-top: 4px;
    margin-bottom: 0;
}
.page6-wrapper {
    /* position: absolute; */
    /* bottom: 0.1vw; */
    /* padding-top: 18vw; */
    margin: 0 6px;
    /* left: 50%;
    transform: translateX(-50%); */
}
.page6-wrapper p {
    margin: 6px 0;
    text-align: center;
    color: #c7b390;
}
.page1-video {
    width: 100%;
}

@media screen and (max-width: 900px) {
    .download-wrapper .left span {
        font-size: 10px;
        display: none;
    }
    .download-wrapper {
        padding: 3px;
    }
    .swiper-pagination-bullet {
        width: 4px;
        height: 4px;
        border: 1px solid #8c7359;
        margin: 0 2px;
    }
    .swiper-pagination-bullet-active {
        border: 1px solid #bb343a;
    }
    .swiper-pagination {
        margin-top: 8px;
    }
    .page6-wrapper p {
        font-size: 10px;
        margin: 2px 0;
    }
    .swiper-container {
        overflow: hidden;
    }

    .code-wrapper .circle1 .inform {
        display: none;
    }
    .code-wrapper .wrapper2 {
        padding: 2px;
    }
    .code-wrapper .wrapper1 {
        border: 1px solid #fff4b5;
        padding: 2px;
        font-size: 0;
    }
    .gift-container div img {
        width: 14.4146vw;
        height: 15.1042vw;
    }
    .gift-container .up .poster {
        width: 28.802vw;
        height: 17.70833vw;
    }
    .code-wrapper .circle3::after {
        border: 1px solid rgba(252, 219, 161, 0.6);
    }
    .code-wrapper .circle1::after {
        border: 1px solid #fcdba1;
    }
    .code-wrapper .circle4 { 
        border: 1px solid rgba(252, 219, 161, 0.2);
    }
    .swiper-button-next, .swiper-button-prev {
        margin-top: -2.91vw;
        /* transform: translateY(-50%); */
    }
    .swiper-pagination-bullet-active::after {
        width: 2px;
        height: 2px;
    }
    .download-wrapper .left img {
        width: 7vw;
        margin: 2px;
    }
    .download-wrapper .right img {
        margin-bottom: 2px;
    }
    .download-wrapper .right img:nth-child(2) {
        margin-top: 2px;
        margin-bottom: 0;
    }
    .side-bar {
        display: none;
    }
    .page1-video::-webkit-media-controls-enclosure
    {
        display:none !important;
    }
    
}
@media screen and (max-width: 1717px) {
    .download-wrapper .left span {
        display: none;
    }
}
@media screen and (min-width: 900px) {
    .swiper-container {
        width: 967px;
        margin-top: -510px;
    }
    .slide-bg {
        width: 993px;
        height: 523px;
        background-size: 100% 100%;
    }
    .prev-img {
        left: 20.6vw;
    }
    .next-img {
        right: 20.6vw;
        
    }
}

.aside {
    position: fixed;
    left: 2vw;
    z-index: 100;
    top: 10vw;
}
.asideContainer {
    background-image: url('https://juhehuyu-1319496743.cos.ap-beijing.myqcloud.com/asfximg/img/download-bg.png');
    /* height: 26.3542vw; */
    /* background-size: 100vw; */
    padding: 8px 10px;

}
.asideContainer div {
    margin: 6px 0;
    text-align: center;
}
.codeBox {
    font-size: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.codeBox img{
    width: 150px;
    height: 150px;
    padding: 10px;
    box-sizing: border-box;
    background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(2,0,36,0.04) 100%);
}
.channelBox {
    display: flex;
    align-items: center;
    font-size: 12px;
    color:white;
    justify-content: space-between;
}
.channelBox .channelCode{
    width: 70px;
}
.channelWrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}
.channelBox .channelItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 10px;
}
.toTop {
    cursor: pointer;
}