body {
    background-color: #f4f7fa;
    font-size: 0.24rem;
    margin: 0 auto !important;
    position: relative;
}

.desktop {
    color: black;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.desktop .main {
    width: 70vh;
    position: relative;
    background-color: #f4f7fa;
}

.desktop .main .fixed-header {
    position: fixed;
    top: 0;
    left: calc(50% - 35vh);
    width: 70vh;
    background-color: #f4f7fa;
    z-index: 100;
}

.desktop .main .fixed-header .download-section {
    position: relative;
}

.desktop .fixed-header img {
    width: 100%;
}

.desktop .main .fixed-header .qrcode-section {
    background-color: white;
    width: 11.2vh;
    height: 11.2vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 2vh;
    top: 1.85vh;
    border-radius: 8px;
}

.desktop .main .fixed-header .qrcode-section .qrcode {
    width: 90%;
    height: 90%;
}

.desktop .fixed-footer {
    position: fixed;
    bottom: 0;
    left: calc(50% - 35vh);
    width: 70vh;
    background-color: #f4f7fa;
    z-index: 100;
}

.desktop .fixed-footer img {
    width: 100%;
    margin-bottom: -5px;
}

.desktop .main .fixed-header .nav-wrap {
    padding: 2vh 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.desktop .main .fixed-header .nav-wrap .inner-wrap {
    height: 6vh;
    border-radius: 8px;
    display: flex;
    position: relative;
    overflow: hidden;
    background: #fff;
}

.desktop .main .fixed-header .nav-wrap .nav-item {
    z-index: 10;
    width: 12vh;
    height: 6vh;
    border-radius: 8px;
    flex-shrink: 0;
    color: #000000;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.desktop .main .fixed-header .nav-wrap .nav-item.active {
    background: #e800f0;
    color: #fff;
    /* font-weight: bold; */
    font-size: 14px;
}

.swiper-container {
    position: relative;
    margin-top: 27vh;
    margin-bottom: 17vh;
    width: 100%;
    overflow: hidden;
}

.slide-inner {
    width: 100%;
    height: 100%;
}

.slide-inner img {
    width: 100%;
}






/*.flex{*/
/*    display: flex;*/
/*}*/
/*.flex-center{*/
/*    display: flex;*/
/*    align-items: center;*/
/*}*/



/*.desktop .fixed-bg {*/
/*    position: absolute;*/
/*    left: 0;*/
/*    top: 0;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    background-image: url('./../images/pc/section-bg.jpg');*/
/*    background-size: cover;*/
/*}*/

/*.desktop .fixed-main {*/
/*    position: absolute;*/
/*    left: 0;*/
/*    top: 0;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    z-index: 99;*/
/*}*/

/*.desktop .fixed-main .layout-right {*/
/*    margin-right: 80vh;*/
/*    margin-bottom: -15vh;*/
/*}*/

/*.desktop .section {*/
/*    background-size: cover;*/
/*    background-position: center;*/
/*    text-align: center;*/
/*    overflow: hidden;*/
/*}*/

/*.desktop .layout {*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*}*/

/*.desktop .layout.col {*/
/*    flex-direction: column;*/
/*}*/

/*.desktop .layout-bottom {*/
/*    margin-top: 4vh;*/
/*}*/

/*.desktop .app-info {*/
/*}*/

/*.desktop .brand .logo {*/
/*    width: 12vh;*/
/*    height: 12vh;*/
/*    margin-right: 2.2vh;*/
/*}*/

/*.desktop .brand .app-name {*/
/*    font-size: 3.3vh;*/
/*    margin-bottom: 1vh;*/
/*}*/

/*.desktop .brand .app-slogn {*/
/*    font-size: 2.8vh;*/
/*}*/

/*.desktop .subject {*/
/*    margin-top: 3vh;*/
/*    margin-bottom: 3vh;*/
/*    color: #fff;*/
/*    font-size: 3vh;*/
/*    text-align: left;*/
/*    transition: 0.2s opacity;*/
/*    width: auto;*/
/*    height: 5vh;*/
/*    position: relative;*/
/*}*/

.desktop .qrcode-warp {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 5;
    padding: 5px 10px;
}

.desktop .qrcode-warp .qrcode {
    width: 25vh;
    height: 25vh;
    padding: 1.5vh;
    margin-bottom: 15px;
    box-sizing: border-box;
    border-radius: 2vh;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.desktop .qrcode-warp img {
    width: 100%;
    height: 100%;
}

.desktop .qrcode-warp .qrcode .qrcode-logo {
    width: 15%;
    height: 15%;
    padding: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
}

.desktop .qrcode-warp.animation {
    animation-name: shadow;
    animation-duration: 0.5s;
    animation-iteration-count: 2;
}

.desktop .section .app {
    height: 100vh;
    /*transition: 0.55s transform ease-in-out 0.30s;*/
    /*transform: translateY(400px);*/
    position: relative;
    display: flex;
    align-items: flex-end;
    margin-left: 20vh;
}

.desktop .section .app img.main-img {
    height: 90vh;
    margin-bottom: -15%;
}

.desktop .section .app .section-title {
    position: absolute;
    left: 73%;
    top: 34%;
    width: 49vh;
}

.desktop .section.active .app .section-title {
    animation: 0.7s sectionTile 0.2s both;
    transform-origin: left bottom;
}

.desktop .section.section2 .app .section-title {
    position: absolute;
    left: 73%;
    top: 37%;
    width: 49vh;
}

.desktop .section.section3 .app .section-title {
    position: absolute;
    left: 78%;
    top: 41%;
    width: 49vh;
}

/* ---------- section2 --------- */
.desktop .section.section2 .app img.main-img {
    height: 85vh;
    margin-bottom: -18%;
}

/* ---------- section3 --------- */
.desktop .section.section3 .app img.main-img {
    height: 85vh;
    margin-bottom: -18%;
}

/* ---------- section4 --------- */
.desktop .section.section4 .app img.main-img {
    height: 75vh;
    margin-bottom: 0;
}

.desktop .section.section4.active .app img.main-img {
    animation: 0.4s scale 0.3s both;
}

/*.desktop .section1{*/
/*    background: url("./../images/pc/section-bg.jpg") center/cover;*/
/*}*/
/*.desktop .section2{*/
/*    background: url("./../images/pc/section-bg.jpg") center/cover;*/
/*}*/
/*.desktop .section3{*/
/*    background: url("./../images/pc/section-bg.jpg") center/cover;*/
/*}*/


/* 动画 */

@keyframes shadow {
    0% {
        box-shadow: 0 0 10px rgb(249, 61, 115);
    }
    50% {
        box-shadow: 0 0 30px rgb(249, 61, 115);
    }
    100% {
        box-shadow: 0 0 10px rgb(249, 61, 115);
    }
}

@keyframes sectionTile {
    0% {
        transform: rotate(10deg) scale(0);
    }
    40% {
        transform: rotate(10deg) scale(1);
    }
    100% {
        transform: rotate(0deg) scale(1);
    }
}

@keyframes scale {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes fadeScaleIn {
    from {
        transform: scale(0);
        opacity: 0
    }
    to {
        transform: scale(1);
        opacity: 1
    }
}

@keyframes rotation1 {
    from {
        transform: rotate(15deg)
    }
    to {
        transform: rotate(0deg)
    }
}

.rotation.rotation1 {
    transform: rotate(15deg);
    transform-origin: bottom;
}

.rotation.rotation2 {
    transform: rotate(-9deg);
    transform-origin: bottom;
}

.rotation.rotation3 {
    transform: rotate(15deg);
    transform-origin: bottom;
}

/* cover fullpage */
#fp-nav {
    display: none;
}

#fp-nav.fp-right {
    right: 10px;
}

#fp-nav ul li, .fp-slidesNav ul li {
    height: auto;
}

#fp-nav ul li a span, .fp-slidesNav ul li a span {
    position: relative;
    display: block;
    background: #fff;
    font-size: 0;
    text-indent: -1000px;
    width: 9px;
    height: 9px;
    margin: 0 !important;
    border: 1px solid transparent;
}

#fp-nav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li a.active span, .fp-slidesNav ul li:hover a.active span {
    background: #fb729e;
    border-color: #fff;
}

#fp-nav ul li a span.fp-sr-only, .fp-slidesNav ul li a span.fp-sr-only {
    position: absolute;
}

#fp-nav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li a.active span, .fp-slidesNav ul li:hover a.active span {
    height: 45px;
    width: 9px;
    margin: -6px 0 0 -6px;
    border-radius: 11px;
}

#fp-nav ul li, .fp-slidesNav ul li {
    margin: 14px;
}

/*顶部*/
.pc-top {
    position: fixed;
    z-index: 99999;
    width: 100%;
    min-width: 775px;
    height: 88px;
    background-color: rgba(0, 0, 0, .3);
}

.pc-top > img {
    height: 38%;
    margin-top: 34px;
}

.pc-top > .left {
    margin-left: 120px;
    float: left;
}

.pc-top > .right {
    float: right;
    margin-right: 100px;
    cursor: pointer;
}

/*底部*/
.pc-bottom {
    position: fixed;
    left: 50%;
    z-index: 99999;
    bottom: 22px;
    height: 1.1rem;
    transform: translateX(-50%);
}

.pc-bottom > img {
    height: 100%;
}

/*主体*/
#fullpage .left {
    width: 480px;
}

#fullpage .left > img {
    width: 480px;
}

#fullpage .left .qrcode-warp {
    float: left;;
    margin-left: 33px;
}

#fullpage .left .app-info {
    margin-top: 8px;
    margin-left: 8px;
    width: 184px;
    float: left;
}

#fullpage .left .app-info img {
    width: 100%;
    cursor: pointer;
}

#fullpage .left .app-info img:nth-child(2) {
    margin: 4px 0;
}

#fullpage .right {
    margin-top: 44px;
    width: 600px;
}

#fullpage .right > img {
    width: 100%;
}