html,
body {
    position: relative;
    height: 100%;
}

:root {
    --blur: 2;
}

body {
    background: #000;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #fff;
    padding: 0;
    max-width: 750px;
    margin: 0 auto;
}

.wrapper {
    width: 100%;
    height: auto;
    position: relative;
}

.nav {
    width: 100%;
    height: 138px;
    background: url('../images/images/head_01.png') no-repeat center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
}

.nav-content {
    width: 100%;
    height: 107px;
    overflow: hidden;
}



.nav-content .nav-right {
    width: 330px;
    height: 100%;
    float: right;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-content .nav-right a.btn {
    display: block;
    width: 192px;
    height: 63px;
    background: url('../images/images/chuzhi_btn_03.png') no-repeat center;
    background-size: 100%;
    margin-right: 22px;


}

.nav-content .nav-right a.ips {
    display: block;
    width: 98px;
    height: 44px;
    background: url('../images/images/ip_03.png') no-repeat center;
    background-size: 100%;
    margin-right: 14px;
}

/* 目录 */

.menu-content {
    position: fixed;
    top: 0;
    right: 0;
    min-height: 100vh;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    width: 227px;
    z-index: 199;
    transform: translate3d(227px, 0, 0);
    transition: all 0.8s linear;
    opacity: 0;
    display: none;
}

.menu-content.stopActive {
    transform: translate3d(227px, 0, 0);
    transition: all 0.8s linear;
    opacity: 0;
}

.menu-content.active {
    transform: translate3d(0, 0, 0);
    opacity: 1;
}

.menu-content .modalM {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 95px;
    right: 20px;
    background: url('../images/images/close_m_12.png') no-repeat center;
    background-size: 100% 100%;
}

.menu-container .nav-wrapper {
    width: 100%;
    margin-top: 207px;
}

.menu-container .nav-wrapper li {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    margin: 0 auto 40px;
}

.menu-container .nav-wrapper li a {
    display: block;
    color: #fff;
    font-size: 25px;
    width: 224px;
    height: 58px;
    line-height: 58px;
    margin: 0 auto;
    text-align: center;
    position: relative;
}

.menu-container .nav-wrapper li.active a {
    color: #ffc000;
}

.menu-container .nav-wrapper li.active a::after {
    content: '';
    position: absolute;
    width: 119px;
    height: 3px;
    background: #ffc000;
    bottom: 0;
    left: 50%;
    margin-left: -59.5px;
}

.menu-container .nav-wrapper li.nav1 a {
    background: url('../images/images/nav1_16.png') no-repeat center;
    background-size: 100%;
}

.menu-container .nav-wrapper li.nav2 a {
    background: url('../images/images/nav2_16.png') no-repeat center;
    background-size: 100%;
}

.menu-container .nav-wrapper li.nav3 a {
    background: url('../images/images/nav3_16.png') no-repeat center;
    background-size: 100%;
}

.menu-container .nav-wrapper li.nav4 a {
    background: url('../images/images/nav4_16.png') no-repeat center;
    background-size: 100%;
}

.menu-container .nav-wrapper li.nav5 a {
    background: url('../images/images/nav5_16.png') no-repeat center;
    background-size: 100%;
}



.content {
    width: 100%;
    height: 5751px;
    background: url('../images/images/content_01.jpg') no-repeat center;
    background-size: 100%;
    position: relative;
    margin: 0 auto;
}

/* 1 */
.area1 {
    width: 100%;
    height: 1258px;
    position: relative;

}

.area1 .play {
    display: block;
    width: 100px;
    height: 100px;
    background: url('../images/play_btn_03.png') no-repeat center;
    background-size: 100%;
    position: absolute;
    top: 707px;
    right: 100px;
}

.area1 .icon_wrapper {
    width: 48px;
    position: absolute;
    top: 110px;
    right: 37px;
}

.area1 .icon_wrapper a {
    display: block;
    width: 48px;
    height: 48px;
}

.area1 .icon_wrapper a.facebook {
    background: url('../images/images/facebook_03.png') no-repeat center;
    background-size: 100%;
}

.area1 .icon_wrapper a.youtube {
    margin-top: 10px;
    background: url('../images/images/youtube_03.png') no-repeat center;
    background-size: 100%;
}

.area1 a.order {
    display: block;
    width: 390px;
    height: 152px;
    position: absolute;
    bottom: 44px;
    background: url('../images/images/yuyue_btn_03.png') no-repeat center;
    background-size: 100%;
    left: 50%;
    margin-left: -195px;
}

/* 2 */
.area2 {
    width: 100%;
    height: 2171px;
    position: relative;
    overflow: hidden;

}

.area2 .area2_wrapper {
    width: 600px;
    height: 480px;
    position: absolute;
    top: 739px;
    left: 50%;
    margin-left: -295px;
}

.area2 .area2_wrapper .check_wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.area2 .area2_wrapper .check_wrapper a {
    margin: 0 19px 32px;
}

.area2 .area2_wrapper .check_wrapper .appstore_check {
    display: block;
    width: 247px;
    height: 76px;
    background: url('../images/images/appstore_check_03.png') no-repeat center;
    background-size: 100%;
}

.area2 .area2_wrapper .check_wrapper .appstore_check.active {
    background: url('../images/images/appstore_check_active_03.png') no-repeat center;
    background-size: 100%;
}

.area2 .area2_wrapper .check_wrapper .google_check {
    display: block;
    width: 251px;
    height: 76px;
    background: url('../images/images/google_check_03.png') no-repeat center;
    background-size: 100%;
}

.area2 .area2_wrapper .check_wrapper .google_check.active {
    background: url('../images/images/gooogle_check_active_03.png') no-repeat center;
    background-size: 100%;
}

.area2 .area2_wrapper .input-wrapper {
    position: relative;
    width: 580px;
    display: flex;
    margin: 0 auto;
}

#dropdown1 {
    background: none;
    border: none;
    /* padding-left: 10px; */
    width: 152px;
    height: 66px;
    text-align: center;
    outline: none;
    color: #7f7f7f;
    font-size: 22px;
    background: url("../images/images/select-wrapper_07.png") no-repeat center;
    background-size: 100%;
}

.area2 .area2_wrapper .input-wrapper input {
    width: 396px;
    height: 66px;
    line-height: 66px;
    background: url("../images/images/phone_wrapper_07.png") no-repeat center;
    background-size: 100%;
    color: #868585;
    font-size: 24px;
    margin-left: 30px;
    padding-left: 10px;
}

.area2 .area2_wrapper .service-wrapper {
    text-align: center;
    color: #fff;
    font-size: 28px;
    margin-top: 35px;
}

.service-wrapper a.check {
    display: inline-block;
    width: 52px;
    height: 42px;
    background: url('../images/images/check_14.png') no-repeat center;
    background-size: 100%;
}

.service-wrapper a.check.active {
    background: url('../images/check_active_03.png') no-repeat center;
    background-size: 100%;
}

.area2 .area2_wrapper #submit1 {
    display: block;
    width: 388px;
    height: 127px;
    background: url('../images/images/submit_btn_18.png') no-repeat center;
    background-size: 100%;
    margin: 30px auto 0;
}

.service-wrapper span {
    vertical-align: top;
}



.area2 .jump_btn {
    display: block;
    width: 173px;
    height: 62px;
    background: url('../images/images/jump_btn_03.png') no-repeat center;
    background-size: 100%;
    position: absolute;
    bottom: 5px;
    right: 144px;
}

/* 3 */
.area3 {
    width: 100%;
    height: 1333px;
    position: relative;
    overflow: hidden;
}

.area3 .swiper-container {
    width: 100%;
    height: 100%;
}

.area3 .swiper-slide {
    width: 100%;
    position: relative;
}

.area3 .swiper-slide div.people {
    transform: translateX(-100%);
    opacity: 0;
    transition: all .4s;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

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

.area3 .swiper-slide div.text {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: all 0.7s 0.1s ease;
    z-index: 3;
}

.area3 .ani-slide div.people {
    transform: translateX(0);
    opacity: 1;
}

.area3 .ani-slide div.text {
    opacity: 1;
}




.area3 .swiper-button-next,
.area3 .swiper-button-prev {
    display: block;
    position: absolute;
    top: 60%;
    width: 48px;
    height: 72px;
    z-index: 2;
    font-size: 0;

}

.area3 .swiper-button-next {
    background: url('../images/images/right_03.png') no-repeat center;
    background-size: 100% 100%;
    right: 24px;
}

.area3 .swiper-button-prev {
    background: url('../images/images/left_03.png') no-repeat center;
    background-size: 100% 100%;
    left: 24px;
}

.area3 .swiper-button-next:after,
.area3 .swiper-button-prev:after {
    font-size: 0;
    color: none;
    content: '';
}

/* 4 */
.area4 {
    width: 100%;
    height: 990px;
    position: relative;
    overflow: hidden;
}

.area4 .carousel_wrapper {
    width: 100%;
    height: 355px;
    position: absolute;
    left: 0;
    top: 318px;
}

.area4 .carousel_wrapper .carousel {
    width: 630px;
    height: 355px;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
}

.carousel .swiper-slide {
    width: 630px;
    height: 355px;
    margin: 0 auto;
    position: relative;
}

.carousel .swiper-slide .img-wrapper {
    width: 630px;
    height: 355px;
    background: url('../images/kuang_03.png') no-repeat center;
    background-size: 100%;
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    margin-left: -315px;
    margin-top: -177.5px;
}

.carousel .swiper-slide img {
    width: 600px;
    height: 340px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -300px;
    margin-top: -170px;
    z-index: 1;
}

.carousel_wrapper .swiper-button-next1,
.carousel_wrapper .swiper-button-prev1 {
    display: block;
    position: absolute;
    width: 48px;
    height: 72px;
    z-index: 2;
    font-size: 0;
    top: 39%;
    cursor: pointer;
}

.carousel_wrapper .swiper-button-next1 {
    background: url('../images/images/right_03.png') no-repeat center;
    background-size: 100% 100%;
    right: 10px;
}

.carousel_wrapper .swiper-button-prev1 {
    background: url('../images/images/left_03.png') no-repeat center;
    background-size: 100% 100%;
    left: 10px;
}

.carousel_wrapper .swiper-button-next1:after,
.carousel_wrapper .swiper-button-prev1:after {
    font-size: 0;
    color: none;
    content: '';
}

.fadeInUp {
    animation: fadeInUp 0.9s cubic-bezier(.25, .46, .45, .94) 0.3s forwards;

}

.footer {
    width: 100%;
    height: 470px;
    background: #000;
    font-size: 12px;
    color: #585858;
    text-align: center;
    overflow: hidden;
}

.footer-header {
    width: 100%;
    margin: 30px 0 0 52px;
    display: flex;
    align-items: center;

}

.footerText {
    margin-left: 112px;
    width: 80%;
    line-height: 20px;
    text-align: left;
    margin-bottom: 12px;
    font-size: 14px;
    margin-top: -12px;
}

.footer .img-wrapper img {
    margin: 20px 10px 15px;
}

.footer .footer_text {
    width: 100%;
    margin-left: 52px;
    display: flex;
}

.footer .footer_text .img-wrapper {
    width: 39px;
    margin: 0 12px 0 0;
}

.footer .footer_text .right_text {
    flex: 1;
    font-size: 14px;
    text-align: left;
    margin-left: 12px;
}

.footer .footer_text .right_text p i {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: #585858;
    margin-right: 7px;
}

.footer .footer_link a {
    color: #686868;
    text-decoration: underline;
    margin: 0 10px;
    font-size: 13px;
}

/* fixed */
.fix_switch {
    display: block;
    position: fixed;
    right: 0;
    bottom: 0;
    width: 36px;
    height: 121px;
    z-index: 100;
    background: url('../images/images/close_03.png') no-repeat center;
    background-size: 100%;
}



.fix_switch.open {
    background: url('../images/images/open_03.png') no-repeat center;
    background-size: 100%;
}

.fixed.hidden {
    display: none;
}

.fixed {
    width: 100%;
    height: 265px;
    background: url('../images/images/fixed_wrapper_02.png') no-repeat center;
    background-size: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 99;
    display: block;
}

.fixed .fixed_wrapper a {
    display: block;
    width: 192px;
    height: 65px;
}

.fixed .fixed_wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 430px;
    height: 65px;
    position: absolute;
    bottom: 24px;
}

.fixed .fixed_wrapper .fixed_order {
    background: url('../images/images/fix_order_03.png') no-repeat center;
    background-size: 100%;
    margin: 0 20px;
}

.fixed .fixed_wrapper .fixed_reward {
    background: url('../images/images/fix_reward_03.png') no-repeat center;
    background-size: 100%;
}

/* 彈框 */
.modal {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    top: 0;
    left: 0;
    z-index: 999;
    display: none;
}

.modal .close {
    display: block;
    width: 43px;
    height: 42px;
    background: url('../images/images/close_m_03.png') no-repeat center;
    background-size: 100%;
    position: absolute;
    top: -57px;
    right: 31px;
}

/* 首屏弹框 */
/* oneModal */
.oneWrapper {
    width: 100%;
    height: 787px;
    background: url('../images/images/oneModal_02.png') no-repeat center;
    background-size: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -393.5px;
    position: relative;
}

.oneWrapper .oneContent {
    width: 546px;
    height: 370px;
    left: 50%;
    margin-left: -273px;
    position: absolute;
    bottom: 0px;
}

.oneWrapper .oneContent .check_wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.oneWrapper .oneContent .check_wrapper a {
    margin-bottom: 18px;
    display: block;
    width: 233px;
    height: 70px;
}

.oneWrapper .oneContent .check_wrapper .appstore_check {
    margin-right: 80px;

    background: url('../images/images/appstore_check_m_04.png') no-repeat center;
    background-size: 100%;
}

.oneWrapper .oneContent .check_wrapper .appstore_check.active {
    background: url('../images/images/appstore_check_active_m_04.png') no-repeat center;
    background-size: 100%;
}

.oneWrapper .oneContent .check_wrapper .google_check {

    background: url('../images/images/google_check_m_04.png') no-repeat center;
    background-size: 100%;
}

.oneWrapper .oneContent .check_wrapper .google_check.active {
    background: url('../images/images/google_check_active_m_04.png') no-repeat center;
    background-size: 100%;
}

.oneWrapper .oneContent .input-wrapper {
    position: relative;
    width: 548px;
    display: flex;
    margin: 0 auto;
}

.oneWrapper .oneContent .input-wrapper input {
    width: 371px;
    height: 62px;
    line-height: 62px;
    background: url("../images/images/input-wrapper-m_08.png") no-repeat center;
    background-size: 100%;
    color: #868585;
    font-size: 24px;
    margin-left: 25px;
    padding-left: 10px;
}

.oneWrapper .oneContent .service-wrapper {
    text-align: center;
    color: #fff;
    font-size: 26px;
    margin-top: 13px;
    margin-bottom: 5px;
}

.oneWrapper .oneContent .service-wrapper a.check {
    display: inline-block;
    width: 50px;
    height: 40px;
    background: url('../images/images/check_m_14.png') no-repeat center;
    background-size: 100%;
}

.oneWrapper .oneContent .service-wrapper a.check.active {
    background: url('../images/images/check_active_m_14.png') no-repeat center;
    background-size: 100%;
}

.oneWrapper .oneContent #submit {
    display: block;
    width: 365px;
    height: 122px;
    background: url('../images/images/submit_m_18.png') no-repeat center;
    background-size: 100%;
    margin: 0 auto;
}

.service-wrapper span {
    vertical-align: top;
}

#dropdown {
    background: none;
    border: none;
    width: 142px;
    height: 62px;
    text-align: center;
    outline: none;
    color: #7f7f7f;
    font-size: 20px;
    background: url("../images/images/select-wrapper-m_08.png") no-repeat center;
    background-size: 100%;
}

option {
    font-size: 12px;
}

/* code */
.codeWrapper {
    width: 100%;
    height: 789px;
    background: url('../images/images/codeModal_02.png') no-repeat center;
    background-size: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -394.5px;

}

.codeWrapper .code_content {
    width: 550px;
    height: 64px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 211px;
    left: 50%;
    margin-left: -275px;
}

.codeWrapper .code_content #code {
    width: 378px;
    height: 64px;
    line-height: 64px;
    text-align: center;
    background: url('../images/images/code_input_07.png') no-repeat center;
    background-size: 100%;
    font-size: 24px;
    color: #000;
}

.codeWrapper .code_content a.copy {
    display: block;
    width: 101px;
    height: 62px;
    background: url('../images/images/copy_btn_04.png') no-repeat center;
    background-size: 100%;
    margin-left: 38px;
}

.codeWrapper a.jump_chat {
    display: block;
    width: 386px;
    height: 130px;
    background: url('../images/images/code_btn_04.png') no-repeat center;
    background-size: 100%;
    position: absolute;
    bottom: 14px;
    left: 50%;
    margin-left: -193px;
}

/* reward */
.rewardWrapper {
    width: 100%;
    height: 454px;
    background: url('../images/images/rewardModal_02.png') no-repeat center;
    background-size: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -227px;


}

.rewardWrapper .rewardContent {
    width: 610px;
    height: 180px;
    margin: 175px auto 0;
}

.rewardWrapper .rewardContent .rewards {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 45px;
}

.rewardWrapper .rewardContent .rewards .reward_title {
    width: 168px;
    height: 44px;
}

.rewardWrapper .rewardContent .rewards .reward_title.title1 {
    background: url('../images/images/title1_04.png') no-repeat center;
    background-size: 100%;
}

.rewardWrapper .rewardContent .rewards .reward_title.title2 {
    background: url('../images/images/title2_04.png') no-repeat center;
    background-size: 100%;
}

.rewardWrapper .rewardContent .rewards .wrapper {
    width: 297px;
    height: 64px;
    line-height: 64px;
    background: url('../images/images/reward_input_04.png') no-repeat center;
    background-size: 100%;
    margin: 0 27px 0 7px;
    font-size: 24px;
    color: #000;
    text-align: center;
}

.rewardWrapper .rewardContent .rewards a.copy {
    width: 113px;
    height: 64px;
    display: block;
    background: url('../images/images/reward_copy_06.png') no-repeat center;
    background-size: 100%;
}

.rewardWrapper .rewardContent .rewards a.lottery {
    display: block;
    width: 113px;
    height: 64px;
    background: url('../images/images/reward_lottery_11.png') no-repeat center;
    background-size: 100%;
}

/* tip */
.tipWrapper {
    width: 100%;
    height: 335px;
    background: url('../images/images/tipModal_02.png') no-repeat center;
    background-size: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -167.5px;
}

/* tip */
.errorWrapper {
    width: 100%;
    height: 335px;
    background: url('../images/images/errorModal_02.png') no-repeat center;
    background-size: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -167.5px;
}

/* tip */
.qidaiWrapper {
    width: 100%;
    height: 335px;
    background: url('../images/images/qidaiModal_02.png') no-repeat center;
    background-size: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -167.5px;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes myBreath {
    to {
        transform: scale(0.88)
    }
}

@keyframes shake {

    0%,
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }

    20%,
    40%,
    60%,
    80% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }
}

@keyframes role {
    0% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(20px);
    }
}