/*PC端样式*/
body {
    background: #8fa2bf url(../img/new_bg_l.png) no-repeat left top;
    background-size: auto 100%;
    height: 100%;
}

.new-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    background: url(../img/new_bg_r1.png) no-repeat right top;
    background-size: auto 100%;
}

.content {
    position: absolute;
    /*top: 29.7%;*/
    top: 50%;
    margin-top: -197px;
    left: 50%;
}

.logo-box .logo {
    width: 100px;
    height: 100px;
}

.logo-box .name {
    margin-left: 20px;
}

.logo-box .name h1 {
    font-size: 64px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1;
    margin-bottom: 13px;
}

.logo-box .name .mq {
    width: 220px;
    height: auto;
    margin-top: 12px;
}

.logo-box .name .slogan {
    width: 220px;
    height: auto;
}

.text-box {
    width: 380px;
    margin-top: 20px;
    line-height: 40px;
    color: #fff;
}

.text-box div {
    margin-top: 30px;
}

.download-box {
    margin-top: 70px;
    position: relative;
    color: #fff;
}

.download-btn {
    position: relative;
    width: 180px;
    height: 54px;
    border-radius: 12px;
    background-color: #5859C7;
    margin-right: 20px;
    cursor: pointer;
}

.download-btn:hover {
    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.16);
}

.download-btn .download-icon {
    margin-right: 12px;
}

.download-popup {
    position: absolute;
    bottom: 72px;
    width: 180px;
    height: 87px;
    border-radius: 8px;
    background-color: #5859C7;
    text-align: center;
    color: #FFF;
    font-size: 12px;
    font-weight: normal;
    display: none;
}

.download-popup .icon {
    position: absolute;
    top: 84px;
    left: 50%;
    background: #5859C7;
    margin-left: -3px;
    width: 7px;
    height: 7px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
}

.download-popup .qrcode-img {
    margin-bottom: -5px;
    margin-top: 9px;
}

.download-popup .show-popup {
    width: 100%;
    height: 20px;
    position: absolute;
    bottom: -19px;
    background-color: transparent;
}

.download-popup .line {
    width: 1px;
    height: 39px;
    margin: 0 20px;
    opacity: 0.07;
    background-color: #6c4d23;
}

/*底部*/
.footer {
    position: absolute;
    bottom: 0;
    height: 60px;
    line-height: 60px;
    font-size: 14px;
    color: #ffffff;
    width: 100%;
    text-align: center;
}

.footer a {
    color: #ffffff;
    margin-left: 10px;
    text-decoration: underline;
}

.mask-t {
    width: 304px;
    height: 65px;
    background: url(../img/new_t.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: -11px;
    left: -11px;
}

.mask-l {
    width: 10px;
    height: 530px;
    background: url(../img/new_l.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 53px;
    left: -13px;
}

.mask-r {
    width: 10px;
    height: 532px;
    background: url(../img/new_r.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 53px;
    right: -315px;
}

.mask-b {
    width: 175px;
    height: 13px;
    background: url(../img/new_b.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 572px;
    left: 23px
}

.swiper {
    /*left: 182px;*/
    top: 50%;
    margin-top: -258px;
}

.swiper-shadow {
    top: 654px;
    left: 197px;
}

.swiper-mask {
    top: 50%;
    margin-top: -288px;
}

.bottom-wrapper .boy {
    width: 198px;
    height: auto;
    position: absolute;
    left: -120px;
    top: 338px;
}

.bottom-wrapper .girl {
    width: 349px;
    height: auto;
    position: absolute;
    left: 127px;
    top: 185px;
}

.swiper-shadow,
.download-bottom,
.look-img,
.footer1,
.download-box1,
.circle-wrap {
    display: none;
}

.swiper-button-next, .swiper-button-prev {
    position: absolute;
    top: 288px;
    width: 48px;
    height: 48px;
    color: transparent;
    border-radius: 50%;
    transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    opacity: 0;
}

.swiper-button-prev {
    left: -30px;
    background: rgba(0, 0, 0, .5) url(../img/new_swiper_l.png) no-repeat;
    background-size: 48px 48px;
}

.swiper-button-next {
    left: 249px;
    background: rgba(0, 0, 0, .5) url(../img/new_swiper_r.png) no-repeat;
    background-size: 48px 48px;
}

.swiper:hover + .swiper-mask .swiper-button-next,
.swiper:hover + .swiper-mask .swiper-button-prev,
.swiper-mask:hover > .swiper-button-prev,
.swiper-mask:hover > .swiper-button-next {
    opacity: 0.99;
}

.swiper-position-wrap {
    position: absolute;
    width: 266px;
    height: 527px;
    border-radius: 33px;
    left: 322px;
    top: 50%;
    margin-top: -288px;
}

.download-pc-mac,
.download-pc-windows {
    width: 49px;
    height: 60px;
    transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
}

.download-pc-mac {
    background: url("../img/new_mac.png") no-repeat top center;
    background-size: 36px 36px;
}

.download-pc-mac:hover {
    color: #000;
    background: url("../img/new_mac_h.png") no-repeat top center;
    background-size: 36px 36px;

}

.download-pc-windows {
    background: url("../img/new_windows.png") no-repeat top center;
    background-size: 36px 36px;
}

.download-pc-windows:hover {
    color: #000;
    background: url("../img/new_windows_h.png") no-repeat top center;
    background-size: 36px 36px;
}

@media screen and (min-width: 1600px) {
    .swiper-position-wrap {
        transform: translateZ(0) scale(1.2);
        -webkit-transform: translateZ(0) scale(1.2);
        -moz-transform: translateZ(0) scale(1.2);
        left: 300px;
    }

    .content {
        transform: scale(1.3);
        -webkit-transform: scale(1.3);
        -moz-transform: scale(1.3);
        left: 55%;
    }

}
/*@media screen and (min-width: 1920px)
 *@media screen and (min-width:1400px)and (max-width:1920px)
 *@media screen and (max-width: 1400px)
 *@media screen and (min-width: 1920px)
*/