body {
    min-width: 100vw;
    max-width: 100vw;
    min-height: 100vh;
    max-height: 100vh;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    /*font-family: Pingfang SC;*/
    font-size: 16px;
    font-family: PingFangSC;
    font-weight: 400;
    color: #333333;
}

a {
    text-decoration: none;
}

.container {
    position: relative;
    /*min-width: 1200px;*/
    width: 100vw;
    height: 26vw;
    margin: auto;
    overflow: hidden;
}

.container .top-logo {
    position: fixed;
    top: 0;
    width: 100%;
    height: 99px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-content: space-around;
}
.container .top-logo .state1{
    align-self: center;
    height: 100%;

}
.container .top-logo .state2{
    display: flex;
    width: 100%;
    height: 100%;
    background: #3A0043;
    align-items: center;
    flex-direction: column;
}

.container .top-logo .state2 .top-content{
   /* position: absolute;
    margin-left: 18.75vw;
    width: 62.5vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 2;
    margin-top: 16px;*/
    width: 100%;
    height: 100%;
    position: relative;
 }
.container .top-logo .state2 .top-content .simple-logo{
    position: absolute;
    top: 16px;
    left: calc(13.92vw - 10px);;
    /*left: calc((100% - 50.7vw) / 2 - 216px);*/
}
.container .top-logo .state2 .top-content .download-btn{
    position: absolute;
    top: 16px;
    /*right: calc((100% - 50.7vw) / 2);*/
/*    right: calc(24.65vw - 25px);*/
    left: calc(75.35vw - 206px);
}
.container .top-logo .state2 .top-line{
    display: flex;
}

.container .top-logo .state2 .logo-img{
    width: 50%;
    margin-top: 15px;
    margin-left: calc(((100% - 972px)/2) - 216px);
}
.container .top-logo .state2 .download-img{
    width: 50%;
    margin-top: 15px;
    margin-left: calc(((100% - 972px)/2) - 216px);
    cursor: pointer;
}
.container .top-logo .state2 .logo-img img {
    position: fixed;
}
.container .top-logo .state2 .download-img img {
    position: fixed;

}

.container .icons .icon {
    width: 7.23125vw;
}

.container .icons .download {
    width: 15.15625vw;
}

.container .wrap {
    position: absolute;
    width: 600vw;
    height: 26vw;
    z-index: 1;
    transition: all 3s;
    display: flex;
}

.wrap {

}

.container .wrap .banner-container {
    height: 100%;
    width: 100vw;
    display: flex;
}

.container .wrap img {
    /*float: left;*/
    /*width: 1920px;*/
    height: 26vw;
    margin: auto;
}

.container .buttons {
    position: absolute;
    margin: 0 auto;
    bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    z-index: 2;
}

.container .buttons .dot {
    margin-left: 12px;
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    text-align: center;
    color: white;
    cursor: pointer;
    border: 1px solid #fff;
    background-color: transparent;
    box-sizing: border-box;
}

.container .buttons .dot.on {
    background-color: #fff;
}

.fd {
    position: fixed;
    right: 100px;
    bottom: 80px;
    width: 234px;
    height: 310px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    flex-direction: column;
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0px 0px 15px 1px rgba(52, 32, 109, 0.2);
    ;
}

.fd .fd-icon {
    width: 120px;
    height: 120px;
}

.fd .fd-text {
    color: #000;
    font-size: 20px;
    line-height: 60px;
    height: 60px;
}

.fd .fd-btn {
    width: 182px;
    height: 52px;
    line-height: 52px;
    background-color: #4f30a7;
    border-radius: 16px;
    font-size: 16px;
    color: #fff;
    text-align: center;
}
/*
    mid part
*/

/*
.detail-wrapper {
    width: 100%;
    background: #3B0044;
    display: flex;
    !*border-top: #818181 solid;*!
    min-height: 500px;
}
!*.detail-wrapper .left {
    width:27%
}*!
.detail-wrapper .left {
    width: calc((100% - 50.7vw) / 2);
    position: relative;
    min-width: 230px;
}
.detail-wrapper .left .selector{
    position: absolute;
    display: flex;
    flex-direction: column;
    right: 10px;
}
.detail-wrapper .left .selector .select-item{
    width: 206px;
    height: 67px;
    margin-top: 10px;
    text-align: center;
    line-height: 67px;
    background: url("../images/unselected.png");
    font-size: 20px;
    font-weight: 400;
    color: #FFB6F0;
}
.detail-wrapper .left .selector .select-item .text {

}
.detail-wrapper .left .selector .selected{
    background: url("../images/selected.png");
    font-size: 24px;
    font-weight: bold;
    color: #610633;

}
.detail-wrapper .middle {
    width: 50.7vw;
    margin-top: 10px;
    margin-left: 10px;
    background: #4A0056;
    border: solid #81257B;
}
.detail-wrapper .middle .context-container .slot-box .overview {
    margin-top: 20px;
    margin-left: 20px;
    margin-bottom: 20px;
    display: flex;
}
.detail-wrapper .middle .context-container .slot-box .overview .slot-pic{
    !*width: 27vw;*!
    !*height: 23vh;*!
}
.detail-wrapper .middle .context-container .slot-box .split-line {
    width: calc(100% - 40px);
    height: 1px;
    margin-left: 20px;
    background: #5F205B;
}
.detail-wrapper .middle .context-container .slot-box .overview .introduction{
    width: calc(100% - 524px);
    height: 100%;
    display: flex;
    flex-direction: column;
}
.introduction .title {
    height: 40px;
    width: 180px;
}
.introduction .text {
    font-size: 16px;
    font-weight: 400;
    color: #FFB6F0;
    width: calc(100% - 20px);
    padding: 10px;
    line-height:200%;

}
.introduction .text a{
    color: #FFD76E;
    cursor: text;
}
.introduction .text a .disabled {
    pointer-events: none;
}

.introduction .text .highlight {
    width: 974px;
    height: 2150px;
    background: #4A0056;
    border: 2px solid #81257B;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #FFB6F0;
 }

.detail-wrapper .middle .context-container .slot-box .how{
    margin-top: 20px;
    margin-left: 40px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}
.how .title{
    width: 272px;
    height: 55px;
}
.how ul{
    margin-left: 20px;
    margin-top: 10px;
    list-style-image: none
}
.how .star-list{
    list-style-image: url("../images/star-icon.png");
}
.how .process-img {
    width: 100%;
}
.how li {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #FFB6F0;
}

.detail-wrapper .middle .context-container .slot-box .multiples {
    margin: 20px;
    display: flex;
    flex-direction: column;
}

.detail-wrapper .middle .context-container .slot-box .lines {
    margin: 20px;
    display: flex;
    flex-direction: column;
}

.detail-wrapper .middle .context-container .slot-box .rules {
    margin: 20px;
    display: flex;
    flex-direction: column;
}

.detail-wrapper .middle .context-container .slot-box  .title {
    font-size: 20px;
    font-weight: bold;
    color: #FFD66D;
}

.detail-wrapper .middle .context-container .slot-box  .my-content {
    margin-top: 10px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #FFB6F0;
}
*/


.detail-wrapper .right .download-area{
    width: 215px;
    height: 267px;
    right: 200px;
    margin-left: 10px;
    margin-top: 20px;
    position: fixed;
    bottom: 80px;
    cursor: pointer;
    z-index: 999;
    /*margin-top: 261px;*/
}

body {
    background: #3B0044;
    min-height: 100vh;
}

.footer {
    background: #3B0044;
    min-width: 1400px;
    width: 100vw;
    box-sizing: content-box;
    height: 120px;
    margin-top: 20px;
    text-align: center;
    position: absolute;
    /*bottom: 0;*/
}
.footer .text {
    position: absolute;
    top: 20px;
    width: 100%;
    /*bottom: 20px;*/
}
.footer .text span {
    font-size: 16px;
    font-weight: 400;
    color: #A16A96;
}
.footer-img {
    width: 100%;
    position: relative;
}
.footer-img .coins-img {
    z-index: 2;
    width: 100%;
    margin-top: 20px;
    bottom: 0;
    left: 0;
}

.download-btn {
    cursor: pointer;
}