* {
    box-sizing: border-box;
}

.nav {
    /* position: fixed;
    top: 0;
    left: 0;
    right: 0; */
    background-color: #FFFFFF;
    z-index: 50;
}

.nav-content {
    margin: auto;
    width: 70%;
    height: .5556rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    margin-right: .125rem;
    width: .3333rem;
    height: .3333rem;
    background-image: url(../../static/images/logo.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

}

.nav-left {
    display: flex;
    align-content: center;
}

.nav-left .name {
    color: #333333;
    font-size: .1528rem;
    line-height: .2292rem;
}

.nav-left .English-name {
    font-size: .0833rem;
    color: #666666;
    line-height: .1181rem;
}

.nav-right {
    padding-left: .1528rem;
    font-size: .125rem;
    color: #333333;
    background-image: url(../../static/images/phone.png);
    background-repeat: no-repeat;
    background-size: .0972rem;
    background-position: left;
}

.swiper {
    position: relative;
    width: 100%;
    height: 4.458rem;
    padding-left: 1.460rem;
    background-image: url(../../static/images/swiper.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: #FFFFFF;
    overflow: hidden;
}

.content {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.right-img {
    width: 4.9722rem;
    height: 3.7778rem;
    background-image: url(../../static/images/right_img.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.left-box {
    /* width: 4.9722rem; */
    padding:0 .4722rem 0 1.3403rem;
    display: flex;
    flex-direction: column;
}

.left-title {
    margin-top: .9931rem;
    width: 2.5625rem;
    height: .5278rem;
    background: url(../../static/images/title1.png) no-repeat center;
    background-size: cover;
}

.descript {
    margin-top: .0625rem;
    color: #666666;
    font-size: .1528rem;
}

.detail {
    margin-top: .3125rem;
    width: 3.0208rem;
    color: #777777;
    line-height: 25px;
    /* line-height: 1.5em; */
}

.section-title {
    width: 2.4583rem;
    height: .9236rem;
    background: url(../../static/images/title2.png) no-repeat center;
    background-size: cover;
    
}

.game-content {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.card-box {
    margin-top: .5417rem;
}
.card{
    width: 1.8125rem;
    height: 2.2083rem;
}
.card:nth-of-type(1) {
    background: url(../../static/images/card1.png) no-repeat center;
    background-size: cover;
}

.card:nth-of-type(2) {
    margin: 0 .6111rem;
    background: url(../../static/images/card2.png) no-repeat center;
    background-size: cover;
}

.card:nth-of-type(3) {
    background: url(../../static/images/card3.png) no-repeat center;
    background-size: cover;
}
.game-img{
    margin-top: .9028rem;
    width: 8.7778rem;
    height: 4.4167rem;
    background: url(../../static/images/bg1.png) no-repeat center;
    background-size: cover;
}

.service-title{
    margin-top: .6667rem;
    width: 2.7083rem;
    height: .3403rem;
    background: url(../../static/images/title3.png) no-repeat center;
    background-size: cover;
}
.bg{
    margin-top: .25rem;
    height: 3.7778rem;
    width: 100%;
    background: url(../../static/images/bg2.png) no-repeat center;
    background-size: cover;
}
.bg2{
    width: 100%;
    height: 2.5rem;
    background-color: #FFCA00;
    display: flex;
    align-items: center;
}
.boder-box{
    width: 2.2847rem;
    height: 1.5417rem;
    
}
.boder-box:nth-of-type(1){
    margin-left: 1.4375rem;
    border: 4px solid #FFFFFF;
    padding: .2639rem 0 0 .4514rem;
}
.boder-box:nth-of-type(2){
    margin-left: .7361rem;
    padding: .2639rem 0 0 .4514rem;
    
    border: 4px solid #FFFFFF;

}
.boder-box:nth-of-type(3){
    margin-left: .7361rem;

}
.red-text{
    font-size: .2431rem;
    color: #FF6400;
}
.white-text{
    margin-top: .1389rem;
    width: 1.6389rem;
    font-size: .1875rem;
    color: #FFFFFF;
}
.text1{
    width: .9792rem;
    height: .7986rem;
    background: url(../../static/images/title4.png) no-repeat center;
    background-size: cover;
}
.text2{
    margin-top: .1111rem;
    color: #FFFFFF;
    font-size: .1828rem;
}
.text3{
    margin-top: .2006rem;
    color: #FFFFFF;
    font-size: .1528rem;
}
.footer{
    position: relative;
    width: 100%;
    background-color: #1F2836;
    color: #FFFFFF;
}
.footer-top{
    margin: auto;
    width: 7.1111rem;
    height: 2.0972rem;
    display: flex;
    justify-content: space-between;
}
.footer::after{
    content: '';
    position: absolute;
    bottom: .5347rem;
    left: 50%;
    width: 1100%;
    height: 1px;
    transform: translateX(-50%);
    background-color: #E6E6E6;
}
.footer-bottom{
    margin: auto;
    width: 7.1111rem;
    height: .5347rem;
    display: flex;
    align-items: center;
}
.footer-bottom p{
    font-size: .0833rem;
    margin-right: .9444rem;
}
.column{
    padding-top: .3333rem;
    flex-shrink: 0;
}
.rowT{
    padding-bottom: .0833rem;
    font-size: .125rem;
}
.row{
    margin-top: .0833rem;
    font-size: .0833rem;
}
.column img{
    width: .8403rem;
    height: .8403rem;
}