[v-cloak]{
    display: none;
}
* {
    margin: 0;
    padding: 0;
    border: none;
    outline: 0;
    box-sizing: border-box;
    
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10+ and Edge */
    user-select: none; /* Standard syntax */
}

a {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

img {
    display: block;
    max-width: 100%;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
input[type="number"]{
    -moz-appearance: textfield;
}
video::-internal-media-controls-download-button {
    display: none;
}
video::-webkit-media-controls-enclosure {
    overflow: hidden;
}


body {
    line-height: 1;
    font-family: PingFangSC-Medium, PingFang SC, '微软雅黑', 'Microsoft YaHei', '黑体', 'SimHei';
    font-size: .32rem;

    background-color: #FAFAFA;
    color: #333;

    /* --color: #8E43E7; */
    --margin: .4rem;
}
body::-webkit-scrollbar ,.modal-body::-webkit-scrollbar, .scrollbar-no::-webkit-scrollbar{
    width: 0;
    background: transparent;
}

.safe-area-inset-bottom{
	padding-bottom: 0;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}

.pointer-events-none{
    pointer-events: none!important;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    
    -webkit-user-select: text; /* Safari */
    -ms-user-select: text; /* IE 10+ and Edge */
    user-select: text; /* Standard syntax */
}
.text-line-2{
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.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;
}
.mt-auto{
    margin-top: auto;
}
.ml-auto{
    margin-left: auto;
}
.mr-auto{
    margin-right: auto;
}
.mx-auto{
    margin-left: auto;
    margin-right: auto;
}

.pt-40 {
    padding-top: .4rem;
}
.pt-80 {
    padding-top: .8rem;
}
.pb-100{
    padding-bottom: 1rem;
}

.color-main{
    color: #8E43E7!important;
}


.page{
    display: flex;
    flex-direction: column;
    /* min-height: 100vh; */
}
/* .page-content{
    flex: 1;
} */
.container{
    margin-left: var(--margin);
    margin-right: var(--margin);
}
.header{
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    
    z-index: 9;
    background-color: #FAFAFA;
}
.header.index{
    position: fixed;
    background-color: transparent;
}
.header .container{
    display: flex;
    align-items: center;
    height: 1.2rem;
}
.header .tab-item{
    font-size: .32rem;
    line-height: .52rem;
    font-weight: 400;
    color: #333;
}
.header.index .tab-item{
    color: #FFF;
}
.header .tab-item + .tab-item{
    margin-left: .8rem;
}
.header .tab-item.active{
    font-weight: bold;

    position: relative;
}
.header .tab-item.active::after{
    content: '';
    position: absolute;
    top: calc(100% + .04rem);
    left: 50%;
    margin-left: -.16rem;

    width: .32rem;
    height: .04rem;
    background-color: #333;
    border-radius: .02rem;
}
.header.index .tab-item.active::after{
    background-color: #FFF;
}
.header .btn-back{
    display: flex;
    align-items: center;
    margin-left: -.2rem;
}
.header .btn-back .icon-back{
    width: .48rem;
    height: .48rem;

    background-image: url(https://ymhimg.obs.cn-east-2.myhuaweicloud.com/piano2026/arrow-back.png);
    background-size: contain;
    background-repeat: no-repeat;
}
.header .btn-back .text{
    line-height: .52rem;
    font-size: .32rem;
    font-weight: bold;
    color: #333;
}

.van-toast{
    font-size: .32rem;
}

.btn-default{
    display: flex;
    align-items: center;
    justify-content: center;

    width: 6rem;
    height: 2.4rem;

    background-image: url(https://ymhimg.obs.cn-east-2.myhuaweicloud.com/piano2026/btn-bg.png);
    background-size: contain;
    background-repeat: no-repeat;
}
.btn-default .text{
    margin-top: -.4rem;
    font-size: .48rem;
    color: #FFF;
}
.btn-main{
    display: flex;
    justify-content: center;
    align-items: center;

    width: 4.8rem;
    height: .96rem;

    font-size: .32rem;
    font-weight: bold;
    color: #fff;
    background-color: #8E43E7;
    border-radius: .48rem;
}
.btn-main.btn-grey{
    color: inherit;
    background-color: #E6E6E6;
}

.page{
    min-height: calc(100vh - 1.2rem);
    padding-bottom: .4rem;
}

.page-home{
    height: 100vh;
    padding-bottom: 0;
    background-image: url(https://ymhimg.obs.cn-east-2.myhuaweicloud.com/piano2026/home-bg.png);
    background-size: auto;
    background-position: top center;
    background-repeat: no-repeat;

    position: relative;
}
.page-home .logo{
    width: 2rem;
    height: .8rem;
    position: absolute;
    top: .4rem;
    right: .4rem;
}
.page-home .title{
    width: 6.4rem;
    
    position: absolute;
    top: 1.6rem;
    right: 0;
}
.page-home .piano{
    width: 8.1rem;
    
    position: absolute;
    top: 50%;
    left: -1.04rem;
    margin-top: -3rem;
}
.page-home .backdrop{
    width: 100%;
    
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -6rem;
}
.page-home .btn-default{
    position: absolute;
    bottom: .1rem;
    left: 50%;
    margin-left: -3rem;
}


.page-my{
    padding-bottom: 1.22rem;
}
.page-my .info-head{
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;

    position: relative;
    height: 1.12rem;
}
.page-my .info-head .name{
    width: 4.84rem;
    height: 1.12rem;
    background-image: url(https://ymhimg.obs.cn-east-2.myhuaweicloud.com/piano2026/my-info.png);
    background-size: contain;
    background-repeat: no-repeat;

    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
}
.page-my .info-head .status{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    column-gap: .1rem;

    width: 100%;
    height: .8rem;
    margin-right: .2rem;
    padding: 0 .4rem;
    background-color: #E6E6E6;

    border-top-right-radius: .32rem;

    /* position: absolute;
    bottom: 0;
    right: 0; */
}
.page-my .info-head .status .text{
    font-size: .28rem;
    color: #FFF;
}
.page-my .info-head .status.edit{
    color: #FFF;
    background-color: #8E43E7;
}
.icon-edit{
    width: .48rem;
    height: .48rem;
    background-image: url(https://ymhimg.obs.cn-east-2.myhuaweicloud.com/piano2026/icon-edit.png);
    background-size: contain;
    background-repeat: no-repeat;
}
.page-my .info-head .status .icon-edit{
    background-image: url(https://ymhimg.obs.cn-east-2.myhuaweicloud.com/piano2026/btn-edit.png);
}
.page-my .info-content{
    padding: .2rem .4rem .4rem;
    background-color: #fff;
    border-radius: 0 0 .32rem .32rem;
}
.page-my .btn-text{
    display: flex;
    align-items: center;
    justify-content: center;

    width: 4rem;
    height: .96rem;

    font-weight: bold;
    color: #8E43E7;
}

.popup-content{
    max-height: 70vh;
    padding: var(--margin) .2rem;
    overflow: auto;
}
.popup-content .text{
    word-break: break-all;
    line-height: .52rem;
}
.popup-content .text a.color-main{
    margin: 0 .1rem;
    border-bottom: .02rem solid #8E43E7;
}
.popup-footer{
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: .4rem;
    padding: var(--margin);
}
.popup-footer .btn-main{
    width: 3rem;
}
.final-info{
    width: 5.1rem;
    margin: 0 auto;
    white-space: nowrap;
}


.page-login{
    display: flex;
    flex-direction: column;
    padding-left: .2rem;
    padding-right: .2rem;
    overflow: hidden;
}
.rules-text.dot{
    display: flex;
}
.rules-text .dot{
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 .52rem;
    height: .52rem;
}
.rules-text .dot::after{
    content: '';
    --width: .06rem;
    width: var(--width);
    height: var(--width);
    background-color: #333;
    border-radius: var(--width);
}
.rules-text .text{
    line-height: .52rem;
    font-size: .32rem;
}

.result-text{
    padding: 0 .2rem;
    line-height: .6rem;
}


.certificate{
    height: calc(100vh - 2rem);
    margin: var(--margin) var(--margin) 0;
    position: relative;
}
.certificate .top,
.certificate .right,
.certificate .bottom,
.certificate .left{
    width: 2rem;
    height: 4rem;
    background-image: url(https://ymhimg.obs.cn-east-2.myhuaweicloud.com/piano2026/certificate/top.png);
    background-size: contain;
    background-repeat: no-repeat;

    position: absolute;
}
.certificate .top{
    top: 0;
    left: 0;
}
.certificate .right{
    top: 0;
    right: 0;
    transform: scaleX(-1);
}
.certificate .bottom{
    bottom: 0;
    right: 0;
    transform: scale(-1);
}
.certificate .left{
    bottom: 0;
    left: 0;
    transform: scaleY(-1);
}
.certificate .bian1,
.certificate .bian2{
    width: .4rem;
    height: 2.4rem;
    background-image: url(https://ymhimg.obs.cn-east-2.myhuaweicloud.com/piano2026/certificate/left.png);
    background-size: contain;
    background-repeat: no-repeat;

    position: absolute;
    top: 50%;
    margin-top: -1.2rem;
}
.certificate .bian1{
    left: 0;
}
.certificate .bian2{
    right: 0;
    transform: scaleX(-1);
}
.certificate .center{
    width: 5.04rem;
    height: .32rem;
    background-image: url(https://ymhimg.obs.cn-east-2.myhuaweicloud.com/piano2026/certificate/center.png);
    background-size: contain;
    background-repeat: no-repeat;

    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: .6rem;
    margin-left: -2.52rem;
}
.certificate .head{
    position: absolute;
    top: .8rem;
    left: 50%;
    transform: translateX(-50%);
}
.certificate .text1{
    white-space: nowrap;
    text-align: center;
    line-height: .76rem;
    font-weight: bold;
    font-size: .4rem;
}
.certificate .text2,
.certificate .footer{
    text-align: center;
    line-height: .6rem;
    font-weight: bold;
}
.certificate .title{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -1rem);

    width: 3.52rem;
    text-align: center;
    line-height: 1.34rem;
    font-weight: bold;
    font-size: .96rem;
    color: #D4B379;
}
.certificate .footer{
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);

}
.certificate .logo{
    width: 2rem;
    position: absolute;
    bottom: .8rem;
    left: 50%;
    transform: translateX(-50%);
}


/* form */
.form-title{
    text-align: center;
    font-weight: bold;
    font-size: .48rem;
    line-height: .78rem;
}
.subtitle{
    display: flex;
    align-items: center;
    column-gap: .2rem;
}
.subtitle .text{
    font-weight: bold;
    line-height: .52rem;
}
.subtitle .btn{
    display: flex;
    justify-content: center;
    align-items: center;
    height: .64rem;
    padding: 0 .2rem;
    color: #8E43E7;
    background-color: #EFE8F8;
    border-radius: 1rem;
}

.icon-check{
    --width: .48rem;
    flex: 0 0 var(--width);
    width: var(--width);
    height: var(--width);

    background-image: url(https://ymhimg.obs.cn-east-2.myhuaweicloud.com/piano2026/icon-check.png);
    background-size: auto var(--width);
    background-position: left center;
    background-repeat: no-repeat;
}
.icon-check.on{
    background-position: center;
}
.icon-check.in{
    background-position: right;
}

.form-item{
    display: flex;
    padding: .28rem 0;
    column-gap: .2rem;
}
.form-item-label{
    flex: 0 0 1.3rem;
}
.form-item-label .text{
    font-size: .32rem;
    line-height: .52rem;
}
.form-item-content{
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}
.form-input, .form-upload{
    display: flex;
    flex: 1;
    min-width: 0;
    height: .62rem;
    padding: 0 .2rem .1rem;

    line-height: .52rem;
    font-size: .32rem;
    font-weight: bold;

    background-color: transparent;
    border-bottom: .02rem solid #E6E6E6;
}
.form-input .text{
    flex: 1;
    min-width: 0;
}
.form-input::placeholder{
    font-weight: 400;
}
.form-input.btn-code{
    flex: 0 0 auto;
    color: #8E43E7;
}

.form-upload{
    border-bottom: 0;
}
.form-upload .status.red{
    color: #FF3366;
}
.form-upload .status.green{
    color: #2DDE98;
}
.form-upload .btn{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: .8rem;
    background: #EFE8F8;
    border-radius: .4rem;
    border: .02rem solid #8E43E7;

    position: relative;
}
.form-upload .btn .text{
    color: #8E43E7;
}
.form-upload input{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 100%;
    opacity: 0;
}
/* .form-upload{
    display: flex;
    align-items: center;
    justify-content: center;

    height: 3.56rem;
    background: #EFE8F8;
    border-radius: .08rem;
    border: .02rem dashed #8E43E7;

    position: relative;
}
.form-upload .text{
    color: #8E43E7;
}
.form-upload input{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 100%;
    opacity: 0;
}
.form-video{
    height: 3.56rem;
    border-radius: .08rem;
    overflow: hidden;
    position: relative;
}
.form-video .icon-play{
    width: 1.6rem;
    height: 1.6rem;
    background-image: url(https://ymhimg.obs.cn-east-2.myhuaweicloud.com/piano2026/icon-play.png);
    background-size: contain;
    background-repeat: no-repeat;

    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -.8rem;
    margin-left: -.8rem;
}
.form-video .icon-del{
    position: absolute;
    top: .2rem;
    right: .2rem;
}
.form-video video{
    width: 100%;
    height: 100%;
    object-fit: cover;
} */

.form-read{
    display: flex;
    align-items: center;
    justify-content: center;
}
.form-read .icon-check{
    --width: .36rem;
    margin-right: .2rem;
}
.form-read .text{
    line-height: .52rem;
    font-size: .32rem;
}
.form-read .text span{
    display: inline-block;
    height: .52rem;
    border-bottom: .02rem solid #666;
}


.form-text{
    display: flex;
    align-items: center;
    column-gap: .4rem;
}
.form-text + .form-text{
    margin-top: .2rem;
}
.form-text .label{
    color: #999;
    line-height: .52rem;
}
.form-text .text{
    flex: 1;
    min-width: 0;
    line-height: .52rem;
}

.form-tips{
    display: flex;
    align-items: center;

    height: .8rem;
    padding: 0 .2rem;
    background: #EFE8F8;
    border-radius: .08rem;
}
.form-tips .text{
    white-space: nowrap;
    color: #8E43E7;
    line-height: .52rem;
}
/* form end */


/* team group */
.team-group{
    display: grid;
    gap: 1px;
}
.team-group .item{
    display: flex;
    align-items: center;
    column-gap: .4rem;

    padding: .4rem;
    background-color: #fff;
}
.team-group .item:first-child{
    border-top-left-radius: .32rem;
    border-top-right-radius: .32rem;
}
.team-group .item:last-child{
    border-bottom-left-radius: .32rem;
    border-bottom-right-radius: .32rem;
}
.team-group .content{
    flex: 1;
    min-width: 0;
}
.team-group .name{
    font-weight: bold;
    line-height: .52rem;
}
.team-group .status{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 1.68rem;
    height: .48rem;
    margin-top: .4rem;
    background-color: #F5F5F5;
    border-radius: .24rem;
}
.team-group .status .dot{
    width: .08rem;
    height: .08rem;
    margin-right: .2rem;
    background-color: #999;
    border-radius: .08rem;
}
.team-group .status .text{
    font-size: .28rem;
}
.team-group .status.s1, 
.team-group .status.s9{
    color: #FFF;
    background-image: url(https://ymhimg.obs.cn-east-2.myhuaweicloud.com/piano2026/label.png);
    background-size: contain;
    background-repeat: no-repeat;
}
.team-group .status.s1 .dot, 
.team-group .status.s9 .dot{
    display: none;
}
.team-group .status.s3, 
.team-group .status.s5, 
.team-group .status.s6, 
.team-group .status.s8{
    width: auto;
    padding: 0 .36rem 0 .2rem;
    color: #2DDE98;
    background-color: #D5F8EA;
}
.team-group .status.s3 .dot, 
.team-group .status.s5 .dot, 
.team-group .status.s6 .dot,
.team-group .status.s8 .dot{
    background-color: #2DDE98;
}
.team-group .status.s4, 
.team-group .status.s7{
    color: #FF3366;
    background-color: #FFD6E0;
}
.team-group .status.s4 .dot, 
.team-group .status.s7 .dot{
    background-color: #FF3366;
}

.team-group .btn{
    display: flex;
    align-items: center;
}
.team-group .btn .text{
    line-height: .52rem;
    color: #E6E6E6;
}

.icon-arrow{
    --width: .48rem;
    flex: 0 0 var(--margin);
    width: var(--margin);
    height: var(--margin);

    background-image: url(https://ymhimg.obs.cn-east-2.myhuaweicloud.com/piano2026/icon-arrow.png);
    background-size: auto var(--width);
    background-position: left center;
    background-repeat: no-repeat;
}
.icon-arrow.go{
    background-position: center;
}
.icon-arrow.to{
    background-position: right;
}

.icon-del{
    --width: .48rem;
    flex: 0 0 var(--margin);
    width: var(--margin);
    height: var(--margin);

    background-image: url(https://ymhimg.obs.cn-east-2.myhuaweicloud.com/piano2026/icon-del.png);
    background-size: var(--width);
    background-repeat: no-repeat;
}
.team-item{
    display: flex;
    align-items: center;
    column-gap: .6rem;
    padding: .4rem .2rem;
    border-bottom: .02rem solid #E6E6E6;
}
.team-item .content{
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
    row-gap: .2rem;
    column-gap: .4rem;
    line-height: .52rem;
}
.team-item .content .name{
    flex: 0 0 100%;
    width: 100%;
}
.team-item .desc{
    padding: .3rem 0;
    line-height: .52rem;
    color: #999;
}
/* team group end */
.van-tree-select{
    height: 6.8rem;
}
.van-sidebar{
    flex: 0 0 2.4rem;
    width: 2.4rem;
}
.van-sidebar-item,.van-tree-select__item{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 1.2rem;
    padding: 0;
    font-size: .28rem;
    font-weight: bold;
    color: #333;
}
.van-sidebar-item--select,.van-tree-select__item--active{
    color: #8E43E7;
}
.van-sidebar-item--select::before{
    background-color: #8E43E7;
}
.site-item{
    padding: .4rem;
    text-align: center;
}
.site-item .name{
    line-height: .52rem;
}
.site-item.active .name{
    font-weight: bold;
    color: #8E43E7;
}



@media screen and (min-width: 750px) {
    .van-toast{
        padding: .2rem .3rem;
    }
    .page-home{
        background-size: cover;
        overflow: hidden;
    }
}