[v-cloak]{
    display: none;
}
* {
    margin: 0;
    padding: 0;
    border: none;
    outline: 0;
    box-sizing: border-box;
}

[class*="btn-"]{
    cursor: pointer;
}
a {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

img {
    display: block;
    max-width: 100%;
}

body {
    min-height: 100vh;
    line-height: 1;
    font-family: PingFangSC-Medium, PingFang SC, '微软雅黑', 'Microsoft YaHei', '黑体', 'SimHei';
    font-size: .24rem;
    color: #fff;

    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10+ and Edge */
    user-select: none; /* Standard syntax */
}
body::-webkit-scrollbar ,.noScrollbar::-webkit-scrollbar{
    width: 0;
    background: transparent;
}

.container{
    max-width: 7.5rem;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
.flex-right{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h1 {
    font-size: .6rem;
    font-weight: bold;
}

.h2 {
    font-size: .4rem;
    font-weight: bold;
}

.h3 {
    font-size: .28rem;
    font-weight: bold;
}

.font-small {
    line-height: 1.3;
    font-size: .2rem;
}

.font-bold {
    font-weight: bold;
}

.pic img{
    width: 100%;
    height: 100%;
}

.mt-10 {
    margin-top: .1rem;
}

.mt-20 {
    margin-top: .2rem;
}

.mt-30 {
    margin-top: .3rem;
}

.mt-40 {
    margin-top: .4rem;
}

.mt-60 {
    margin-top: .6rem;
}

.mt-80 {
    margin-top: .8rem;
}
.mt-120 {
    margin-top: 1.2rem;
}
.ml-auto{
    margin-left: auto;
}

.pt-40 {
    padding-top: .4rem;
}
.pt-80 {
    padding-top: .8rem;
}
.pb-100{
    padding-bottom: 1rem;
}
.btn {
    cursor: pointer;
}
.btn-default{
    width: 4.8rem;
    height: 1.28rem;
    background-image: url(https://casiomatch2022.obs.cn-east-2.myhuaweicloud.com/assets/image/btn-default.png);
    background-size: contain;
    background-repeat: no-repeat;

    position: relative;
}
.btn-default .text{
    width: 100%;
    height: 100%;
    font-size: .48rem;
    font-weight: bold;
    color: #02387E;
    letter-spacing: .1rem;

    text-shadow: .02rem .02rem #F7E2C6;
}
/* 
.btn-submit{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2.95rem;
    height: .4rem;
    font-size: .17rem;
    font-weight: bold;
    color: #FFFFFF;
    background: #8E43E7;
    border-radius: .4rem;
    cursor: pointer;
} */

/* .progress{
    height: .06rem;
    background: rgba(51,51,051.5);
    border-radius: .03rem;
    overflow: hidden;
}
.progress-box{
    height: 100%;
    background: #8E43E7;
    border-radius: .03rem;
} */

.page{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
}
.page > .content{
    margin-top: .4rem;
    padding-top: .4rem;
    padding-bottom: 2rem;
    
    overflow: auto;
    scrollbar-width: none;
}
.page > .content::-webkit-scrollbar{
    width: 0;
    background: transparent;
}
/* header */
header .container{
    display: flex;
    justify-content: space-between;
    align-items: center;

    height: 1.3rem;
    border-bottom: .02rem solid #fff;
}
header .logo{
    height: .44rem;
}
header .icon-menu{
    width: .48rem;
    height: .48rem;

    background-image: url(https://casiomatch2022.obs.cn-east-2.myhuaweicloud.com/assets/image/icon-menu.png);
    background-size: contain;
    background-repeat: no-repeat;
    
    cursor: pointer;
}

.icon-close{
    width: .48rem;
    height: .48rem;
    background-image: url(https://casiomatch2022.obs.cn-east-2.myhuaweicloud.com/assets/image/icon-close.png);
    background-size: contain;
    background-repeat: no-repeat;
    
    position: absolute;
    top: .2rem;
    right: .2rem;

    cursor: pointer;
}
.menu-list{
    height: 100vh;
    padding: .8rem;
    background-color: #02387E;
    overflow: auto;
}
.menu-item{
    display: flex;
    align-items: center;

    height: .48rem;
    cursor: pointer;
}
.menu-item + .menu-item{
    margin-top: .8rem;
}
.menu-item .text{
    font-size: .34rem;
    font-weight: bold;
    color: #3369E7;
}
.menu-item .dot{
    width: .04rem;
    height: .04rem;
    margin-right: .2rem;
    background-color: #3369e7;
    border-radius: .02rem;
}
.menu-item.active .dot{
    height: .24rem;
    background-color: #fff;
}
.menu-item.active .text{
    color: #fff;
}
/* header */


/* 首页 */
.page{
    display: flex;
    flex-direction: column;

    height: 100vh;
}
.page-home-content,.page > .content{
    min-width: 0;
    flex: 1;
    flex-direction: column;
}
.page-home-content .title{
    margin-top: -2.6rem;
    background-size: contain;
    background-repeat: no-repeat;
}
.page-home .btn-default{
    margin-top: 1.1rem;
}
.page-home-content .info{
    height: .4rem;
    margin-top: 1.8rem;
}
.page-home-content .info .text span{
    font-size: .28rem;
    font-weight: bold;
}
/* 首页 end */

/* 章程 */
.page-about .video{
    height: 3.76rem;
    border-radius: .12rem;
    overflow: hidden;
}
.page-about .video video{
    width: 100%;
    height: 100%;

    object-fit: cover
}
.page-about .about-content{
    font-size: .28rem;
    font-weight: 400;
    line-height: .52rem;
    word-break: break-word;
}
.about-content.link{
    display: flex;
}
.about-content.link .text{
    border-bottom: .02rem solid #fff;
}
.page-about table{
    width: 100%;
    text-align: center;
    line-height: .6rem;
    border: .02rem solid #fff;
    border-bottom: none;
}
.page-about table th,.page-about table td{
    border-right: .02rem solid #fff;
    border-bottom: .02rem solid #fff;
}

.about-imgs img{
    width: 100%;
}
.popup-video{
    width: 100%;
    max-width: 7.5rem;
    padding: .3rem;
    background-color: transparent;
}
.popup-video video{
    display: block;
    width: 100%;
    height: 6rem;
    background-color: #000;
}
/* 章程 end */

/* 新闻 */
.page-news .banner{
    height: 2.4rem;
    border-radius: .12rem;
    overflow: hidden;
}
.page-news .banner img,.page-news-detail .banner img{
    width: 100%;
}

.news-list{
    min-height: 100vh;
    min-height: calc(100vh - 3.1rem );
}
.news-item{
    display: flex;
}
.news-item + .news-item{
    margin-top: .4rem;
}
.news-item .pic{
    flex: 0 0 2.56rem;
    width: 2.56rem;
    height: 1.44rem;
    border-radius: .12rem;
    overflow: hidden;
}
.news-item .info{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    min-width: 0;
    margin-left: .4rem;
}
.news-item .info .title{
    margin-top: -.1rem;
    line-height: .52rem;
}
.news-item .info .date{
    font-weight: 400;
    line-height: .34rem;
}

.page-news-detail .banner{
    border-radius: .12rem;
    overflow: hidden;
}
.detail-title{
    line-height: .76rem;
}
.detail-date{
    line-height: .34rem;
}
.detail-content{
}
.detail-content *{
    font-size: .28rem!important;
    line-height: .52rem!important;
    color: #fff!important;
    background: none!important;
}
/* 新闻 end */

/* 区域 */
.page-area .tip{
    font-size: .28rem;
    line-height: .52rem;
}
.area-choice{
    height: .56rem;
}
.icon-address{
    width: .48rem;
    height: .48rem;
    background-image: url(https://casiomatch2022.obs.cn-east-2.myhuaweicloud.com/assets/image/icon-address.png);
    background-size: contain;
    background-repeat: no-repeat;
}
.area-choice .text{
    margin-left: .1rem;
    font-size: .4rem;
    font-weight: bold;
    line-height: .56rem;
}
.area-choice-line{
    width: .32rem;
    height: .04rem;
    margin-left: auto;
    margin-right: auto;
    background-color: #FFFFFF;
    border-radius: .02rem;
}
.area-content p{
    display: flex;
    align-items: center;
    font-size: .28rem;
}
.area-content .label{
    font-weight: bold;
}
.area-content .text{
    margin-left: .4rem;
}
/* 区域 end */


@media screen and (max-width: 751px) {
    /* 手机 */
    .page{
        background-image: url(https://casiomatch2022.obs.cn-east-2.myhuaweicloud.com/assets/image/bg-m-2.png);
    }
    .page-home{
        background-image: url(https://casiomatch2022.obs.cn-east-2.myhuaweicloud.com/assets/image/bg-m.png);
    }
    .container{
        margin-left: .4rem;
        margin-right: .4rem;
    }

    /*  */
    .page-home-content .title{
        width: 7.2rem;
        height: 2.9rem;
        background-image: url(https://casiomatch2022.obs.cn-east-2.myhuaweicloud.com/assets/image/title-m.png);
    }
    .about-imgs{
        margin: 0;
    }
}
@media screen and (min-width: 751px) {
    /* pc */
    .container{
        width: 7.5rem;
    }
    .page{
        background-image: url(https://casiomatch2022.obs.cn-east-2.myhuaweicloud.com/assets/image/bg-pc-2.png);
    }
    .page-home{
        background-image: url(https://casiomatch2022.obs.cn-east-2.myhuaweicloud.com/assets/image/bg-pc.png);
    }
    .page-home-content .title{
        width: 7.2rem;
        height: 2.9rem;
        background-image: url(https://casiomatch2022.obs.cn-east-2.myhuaweicloud.com/assets/image/title-pc.png);
    }
    .page-home .btn-default{
        margin-top: .2rem;
    }
    
    .page-home-content .title{
        margin-top: -1.6rem;
    }
    .page-home-content .info{
        margin-top: .6rem;
    }
}