@font-face {}

* {
    box-sizing: border-box
}

html,
body {
    width: 640px;
    max-width: 640px;
    margin: 0 auto
}

.topsection {
    padding-top: 2%;
    width: 100%;
    height: 912px;
    position: relative
}

.midsection {
    padding-top: 22%;
    width: 100%
}

.midsection .tip {
    width: 60%;
    padding-left: 3%;
    line-height: 22px;
    font-size: 15px;
    color: #fff;
    font-weight: bold
}

.midsection .rank {
    margin-top: 9%;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center
}

.midsection .rank .rank-mid {
    margin: 0 7%
}

.midsection .rank img {
    width: 20%
}

.midcotent {
    padding-top: 10%;
    width: 100%;
    padding-bottom: 8%
}

.midcotent .vediotitle {
    display: block;
    margin: 0 auto;
    width: 74%
}

.midcotent .vedioplay {
    background: url("../img/vbg.png") no-repeat;
    background-size: cover;
    width: 376px;
    height: 221px;
    margin: 2% auto 0;
    padding-top: 8px
}

.midcotent .vedioplay video {
    margin: 0 auto;
    display: block
}

.midcotent .vedioplay img {
    width: 100%
}

.midcotent .showcard {
    padding-top: 2%
}

.midcotent .showcard .cardtitle {
    display: block;
    width: 74%;
    margin: 6% auto 0
}

.midcotent .showcard .cardbg {
    margin-top: -4%;
    background: url("../img/swiperbg.png") no-repeat;
    background-size: cover;
    width: 100%;
    height: 500px
}

.midcotent .showcard .cardbg .card-container {
    width: 94%;
    height: 500px
}

.midcotent .showcard .cardbg .card-container .cardimg {
    width: 86%;
    margin-left: 13%;
    margin: 3% 0 0 13%
}

.midcotent .showcard .cardbg .card-container .swiper-button-prev {
    background: url("../img/prel.png") no-repeat;
    background-size: cover;
    left: 1%;
    right: auto
}

.midcotent .showcard .cardbg .card-container .swiper-button-next {
    background: url("../img/nexl.png") no-repeat;
    background-size: cover;
    right: 1%;
    left: auto
}

.midcotent .showcard .cardbg .card-container .swiper-pagination {
    bottom: 20px
}

.midcotent .showcard .cardbg .card-container .swiper-pagination-bullet {
    margin: 0 9px;
    width: 8px;
    height: 8px;
    border-radius: initial;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg)
}

.midcotent .showcard .cardname {
    text-align: center;
    background: url("../img/siwpername.png") no-repeat;
    background-size: cover;
    margin: 4% auto 0;
    width: 32%;
    height: 48px
}

.midcotent .showcard .cardname .cardtext {
    line-height: 52px;
    font-size: 18px;
    color: #fff;
    font-weight: normal
}

.footer {
    padding-top: 3%;
    padding-bottom: 6%;
    width: 100%
}

.footer .f-title {
    display: block;
    width: 68%;
    margin: 0 auto 4%
}

.footer .footerswiper {
    margin: 0 auto;
    width: 100%;
    height: 312px
}

.footer .footerswiper .swiper-container {
    width: 100%;
    height: 312px
}

.footer .footerswiper .swiper-container .swiper-slide .swiper-img {
    display: block;
    margin: 0 auto;
    width: 74%;
    box-shadow: 2px 2px 10px #888888
}

.footer .footerswiper .swiper-container .swiper-button-prev {
    background: url("../img/left.png") no-repeat;
    background-size: cover;
    left: 2%;
    right: auto;
    width: 25px;
    height: 40px;
    margin-top: -48px
}

.footer .footerswiper .swiper-container .swiper-button-next {
    background: url("../img/right.png") no-repeat;
    background-size: cover;
    right: 2%;
    left: auto;
    width: 25px;
    height: 40px;
    margin-top: -48px
}

.footer .footerswiper .swiper-container .swiper-pagination {
    position: absolute;
    bottom: 0
}

.footer .footerswiper .swiper-container .swiper-pagination-bullet {
    margin: 0 9px
}

.swiper-pagination-bullet {
    margin: 0 9px;
    width: 8px;
    height: 8px;
    border-radius: initial;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg)
}

.swiper-pagination-bullet-active {
    background: #fff
}