* {
    margin: 0;
    padding: 0;
    border: 0;
    word-break: break-word;
    font-family: 'arial';
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-origin: padding-box;
    background-clip: padding-box;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    font-size: 0.22rem;
    line-height: 1;
    box-sizing: border-box;
    position: relative;
}

html,
body {
    width: 100%;
    height: 100%;
}

body {
    text-size-adjust: 100% !important;
    -webkit-text-size-adjust: 100% !important;
    transform-origin: 0 0;
}

.logo {
    width: 1.10rem;
    height: 1.10rem;
    position: fixed;
    top: 0.56rem;
    left: 5.64rem;
    z-index: 1;
}

.main {
    width: 100%;
    height: 100%;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
}
.main-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.main-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.main-d {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.main-nav{
    width: 5.00rem;
    height: 0.60rem;
    position: absolute;
    top: 2.2rem;
    left: 0.90rem;
    display: flex;
    z-index: 1;
}

.main-nav-item{
    width: 33.3%;
}

.k {
    width: 100%;
    height: 6.57rem;
    position: absolute;
    top: 2.3rem;
    left: 0;
    right: 0;
    display: block;
    margin: 0 auto;
}

.k-bg {
    width: 6.52rem;
    height: 7.52rem;
    position: absolute;
    left: 0;
    right: 0;
    display: block;
    margin: 0 auto;
}

.k-t {
    width: 1.68rem;
    height: 0.38rem;
    position: absolute;
    bottom: -1.80rem;
    right: 0;
}

.kk-list {
    width: 6.52rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 0.3rem;
    margin: 0 auto;
    margin-top: 0.95rem;
}

.kk-item {
    width: 1.91rem;
    height: 1.88rem;
    margin-bottom: 0.22rem;
}

.kk-item-bg {
    width: 1.91rem;
    height: 1.88rem;
}
.kk-item-logo{
    width: 1.36rem;
    height: 1.36rem;
    position: absolute;
    top: 0.14rem;
    left: 0;
    right: 0;
    display: block;
    margin: 0 auto;
}
.kk-item-name{
    position: absolute;
    top: 1.58rem;
    left: 0;
    right: 0;
    font-size: 0.20rem;
    text-align: center;
    color: #fff;
}


/*------------------------------------- 19:9---------------------------------*/
@media screen and (orientation:portrait) and (width: 360px) and (max-height: 670px),
screen and (orientation:portrait) and (width: 375px) and (max-height: 700px),
screen and (orientation:portrait) and (min-width: 390px) and (max-width: 400px) and (max-height: 710px),
screen and (orientation:portrait) and (min-width: 412px) and (max-width: 414px) and (max-height: 770px),
screen and (orientation:portrait) and (width: 428px) and (max-width: 790px),
screen and (orientation:landscape) and (height: 360px) and (max-width: 670px),
screen and (orientation:landscape) and (height: 375px) and (max-width: 700px),
screen and (orientation:landscape) and (min-height: 390px) and (max-height: 400px) and (max-width: 710px),
screen and (orientation:landscape) and (min-height: 412px) and (max-height: 414px) and (max-width: 770px),
screen and (orientation:landscape) and (height: 428px) and (max-width: 790px) {
    .k{
        margin-top: -0.5rem;
    }
    .k-bg{
        scale: 0.9;
    }
    .kk-list{
        scale: 0.9;
    }
    .main-d{
        bottom: -0.50rem;
    }
}

/*------------------------------------- 18:9---------------------------------*/
@media 
screen and (orientation:portrait) and (width: 360px) and (max-height: 610px),
screen and (orientation:portrait) and (width: 375px) and (max-height: 650px),
screen and (orientation:portrait) and (min-width: 390px) and (max-width: 400px) and (max-height: 670px),
screen and (orientation:portrait) and (min-height: 412px) and (max-height: 414px) and (max-height: 710px),
screen and (orientation:portrait) and (width: 428px) and (max-height: 752px),
screen and (orientation:landscape) and (height: 360px) and (max-width: 610px),
screen and (orientation:landscape) and (height: 375px) and (max-width: 650px),
screen and (orientation:landscape) and (min-height: 390px) and (max-height: 400px) and (max-width: 670px),
screen and (orientation:landscape) and (min-height: 412px) and (max-height: 414px) and (max-width: 710px),
screen and (orientation:landscape) and (height: 428px) and (max-width: 752px) {
    .k{
        margin-top: -0.5rem;
    }
    .k-bg{
        scale: 0.9;
    }
    .kk-list{
        scale: 0.9;
    }
    .main-d{
        bottom: -0.55rem;
    }
}

/*------------------------------------- 16:9---------------------------------*/
@media 
screen and (orientation:portrait) and (width: 360px) and (max-height: 580px),
screen and (orientation:portrait) and (width: 375px) and (max-height: 605px),
screen and (orientation:portrait) and (min-width: 390px) and (max-width: 400px) and (max-height: 645px),
screen and (orientation:portrait) and (min-width: 412px) and (max-width: 414px) and (max-height: 675px),
screen and (orientation:landscape) and (height: 360px) and (max-width: 580px),
screen and (orientation:landscape) and (height: 375px) and (max-width: 605px),
screen and (orientation:landscape) and (min-height: 390px) and (max-height: 400px) and (max-width: 645px),
screen and (orientation:landscape) and (min-height: 412px) and (max-height: 414px) and (max-width: 675px) {
    .k{
        margin-top: -0.5rem;
    }
    .k-bg{
        scale: 0.9;
    }
    .kk-list{
        scale: 0.9;
    }
    .main-d{
        bottom: -0.60rem;
    }
}

/*------------------------------------ 15:9-----------------------------------*/
@media 
screen and (orientation:portrait) and (width: 360px) and (max-height: 540px),
screen and (orientation:portrait) and (width: 375px) and (max-height: 560px),
screen and (orientation:portrait) and (min-width: 390px) and (max-width: 400px) and (max-height: 590px),
screen and (orientation:portrait) and (min-width: 412px) and (max-width: 414px) and (max-height: 630px),
screen and (orientation:landscape) and (height: 360px) and (max-width: 540px),
screen and (orientation:landscape) and (height: 375px) and (max-width: 560px),
screen and (orientation:landscape) and (min-height: 390px) and (max-height: 400px) and (max-width: 590px),
screen and (orientation:landscape) and (min-height: 412px) and (max-height: 414px) and (max-width: 630px) {
    .k{
        margin-top: -0.5rem;
    }
    .k-bg{
        scale: 0.9;
    }
    .k-list{
        scale: 0.9;
    }
    .main-d{
        bottom: -0.65rem;
    }
}