[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 */
}

[class*="btn-"] {
    cursor: pointer;
}

[class*="icon-"] {
    flex: 0 0 .24rem;
    width: .24rem;
    height: .24rem;
}

.icon-2x {
    flex: 0 0 .48rem;
    width: .48rem;
    height: .48rem;
}

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;
}


.container {
    max-width: 9.2rem;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

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

    color: #333;
}

body::-webkit-scrollbar,
.scrollbar-no::-webkit-scrollbar {
    width: 0;
    background: transparent;
}

.pointer-events-none,
.isSubmit {
    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;
}

.font-small {
    line-height: 1.3;
    font-size: .2rem;
}

.font-bold {
    font-weight: bold !important;
}

.weight-400 {
    font-weight: 400;
}

.color-main {
    color: #265EAA;
}

.color-red {
    color: #FF6C5F;
}

.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-100 {
    margin-top: 1rem;
}

.mt-120 {
    margin-top: 1.2rem;
}

.ml-auto {
    margin-left: auto;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.pt-40 {
    padding-top: .4rem;
}

.pt-80 {
    padding-top: .8rem;
}

.pb-100 {
    padding-bottom: 1rem;
}

.btn-group {
    display: flex;
    align-items: center;
}

.btn {
    cursor: pointer;
}

.btn-submit {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2.95rem;
    height: .4rem;
    font-size: .17rem;
    font-weight: bold;
    color: #FFFFFF;
    background: #265EAA;
    border-radius: .4rem;

    cursor: pointer;
}

.btn-cancel {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2.95rem;
    height: .4rem;

    cursor: pointer;
}

/* header */
header {
    /* background-color: #fff; */
    position: sticky;
    top: 0;
    z-index: 3;
    overflow: hidden;
}

header::before {
    content: '';

    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
}

header .container {
    display: flex;
    align-items: center;

    height: 1.2rem;
    padding-left: .4rem;
    padding-right: .4rem;
}

header .btn-back {
    display: flex;
    align-items: center;
    cursor: pointer;
}

header .btn-back .arrow {
    width: .24rem;
    height: .24rem;

    background-image: url(/static/image/icon-back.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

header .btn-back .text {
    margin-left: .1rem;
    font-size: .28rem;
    line-height: .52rem;
    color: #265EAA;
}

/* header end */

.page {
    min-height: 100vh;
    padding-bottom: 1rem;
    background-attachment: fixed;
}

.page>.container {
    overflow: hidden;
}

/* home */
.page-home {
    padding-bottom: 0;
}

.page-home .swiper-container {
    width: 100%;
    height: 100%;
}

#swiper-container2 .swiper-slide>div {
    width: 7.5rem;
    max-width: 100%;
    margin: 0 auto;
}

.page-home .bg i {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    position: absolute;
}
.page-home-logo{
    background-image: url(/static/image/logo.png);
}
.page-home-match{
    background-image: url(/static/image/match.png);
}

.page-home .btn {
    background-image: url(/static/image/btn-bg.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.page-home .btn::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-size: auto .64rem;
    background-position: center .5rem;
    background-repeat: no-repeat;
}

.page-home .btn.btn-sign::after {
    background-image: url(/static/image/btn-sign.png);
}

.page-home .btn.btn-upload::after {
    background-image: url(/static/image/btn-upload.png);
}

.page-home .btn.btn-list::after {
    background-image: url(/static/image/btn-list.png);
}

.page-home .btn.btn-certificate::after {
    background-image: url(/static/image/btn-certificate.png);
}

.page-home .arrow {
    width: .48rem;
    height: .72rem;
    background-image: url(/static/image/arror-bottom.png);

    position: absolute;
    bottom: .8rem;
    left: 50%;
    margin-left: -.24rem;

    animation-name: fadeOutDown;
    animation-duration: 1.4s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
}

.swiper-prize {
    position: relative;
}

.swiper-prize .hand {
    width: 2rem;
    position: absolute;
    top: 2rem;
    left: 50%;
    margin-left: 1.2rem;

    animation-name: hand;
    animation-duration: 1.4s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
}

.prize {
    margin-left: 0 !important;
    background-color: transparent;
}

.prize .content {
    width: 6.3rem;
}

.prize .prize-content {
    max-height: 60vh;
    overflow: auto;
    border-radius: .3rem;
}

.prize .prize-close {
    width: .96rem;
}

.icon-goTop {
    width: .48rem;
    height: .48rem;

    background-image: url(/static/image/goTop.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    bottom: .4rem;
    right: .4rem;
    z-index: 1;
}

/* home end */


/* form */
.form-title {
    font-size: .4rem;
    line-height: .76rem;
}

.form-item {
    display: flex;
    align-items: center;
    min-height: 1.2rem;
}

.form-item .form-item-label {
    font-size: .32rem;
    line-height: .6rem;
}

.form-item .form-item-content {
    flex: 1;
    min-width: 0;
    margin-left: .4rem;

    position: relative;
}

.form-item .form-item-control {
    width: 100%;
    height: .8rem;
    padding-left: .2rem;
    padding-right: .2rem;
    font-size: .32rem;
    color: #333;
    background-color: transparent;
    border-bottom: .02rem solid #333;
    border-radius: 0;
    -webkit-user-select: auto;
    -ms-user-select: auto;
    user-select: auto;
}

.form-item .form-item-control::placeholder {
    font-weight: 400;
    color: #999999;
}

.form-item .form-item-control+.arrow-down {
    width: .24rem;
    height: .24rem;
    position: absolute;
    top: 50%;
    right: .2rem;
    margin-top: -.12rem;

    background-image: url(/static/image/arrow-down.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.form-item-tip {
    font-size: .26rem;
    color: #265EAA;
    line-height: .48rem;
}

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

.form-read .text {
    font-size: .26rem;
    font-weight: 400;
    color: #333;
    line-height: .48rem;
}

.form-read .text span {
    border-bottom: .02rem solid #333;
}

.form-read .radio+.text {
    margin-left: .2rem;
}

.read-content {
    max-height: 80vh;
}

.read-content .icon-close {
    width: .88rem;
    height: .88rem;
    padding: .2rem;
    position: sticky;
    top: .4rem;
    left: 100%;
    margin-right: -.2rem;
    z-index: 9;

    background-image: url(/static/image/icon-close.png);
    background-size: .48rem;
    background-position: center;
    background-repeat: no-repeat;
}

.read-content .title {
    height: 2rem;
    font-size: .4rem;
    background-color: #fff;
    border-bottom: .02rem solid #ccc;

    position: sticky;
    top: 0;
    z-index: 2;
}

.read-content .label {
    font-size: .32rem;
    line-height: .6rem;
}

.read-content .text {
    font-size: .28rem;
    font-weight: 400;
    line-height: .52rem;
}


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

    width: .4rem;
    height: .4rem;
    border: .02rem solid #333;
    border-radius: .2rem;
}

.radio.on {
    border: none;
    background-image: url(/static/image/radio.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.check {
    width: .48rem;
    height: .48rem;
    border-radius: .12rem;
    border: .02rem solid #333;
}

.check.on {
    border: none;
    background-image: url(/static/image/check.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.check+.text {
    margin-left: .4rem;

    font-size: .32rem;
    line-height: .6rem;
}

.check+.text+.desc {
    font-size: .28rem;
    font-weight: 400;
}

.form-group-content {
    display: flex;
    font-size: .28rem;
    line-height: .52rem;
}

.form-group-content .label {}

.form-group-content .text {
    flex: 1;
    min-width: 0;
    margin-left: .4rem;
    font-weight: 400;
}


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

    width: 4rem;
    height: 1.2rem;
    padding-bottom: .3rem;
    font-size: .32rem;
    color: #fff;
    background-image: url(/static/image/btn-bg.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.btn-form-submit.not {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);

}

.success-title {
    width: 4.8rem;
}

.success-h2 {
    font-size: .4rem;
    line-height: .76rem;
}

.success-h3 {
    font-size: .32rem;
    line-height: .6rem;
}

.success-h3 span {
    padding: 0 .2rem;
}

.success-h4 {
    font-size: .28rem;
    font-weight: 400;
    line-height: .52rem;
}

.success-item {
    display: flex;
    align-items: center;
    font-size: .32rem;
    line-height: .6rem;
}

.success-item .label {}

.success-item .text {
    flex: 1;
    min-width: 0;
    margin-left: .4rem;
    font-weight: 400;
}


/* upload */
.page-upload .guild-title {
    font-size: .4rem;
    line-height: .76rem;
}

.page-upload .guild-subtitle {
    font-size: .32rem;
    line-height: .6rem;
}

.guild-video {
    width: 100%;
    height: 3.5rem;
    background-color: #000;
    border-radius: .16rem;
    overflow: hidden;

    position: relative;
}

.guild-video video {
    width: 100%;
    height: 100%;
}

.guild-video .icon-player {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;

    width: 1.28rem;
    height: 1.28rem;
    margin-top: -.64rem;
    margin-left: -.64rem;
    background-image: url(/static/image/player.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.page-upload .guild-text {
    font-size: .28rem;
    font-weight: 400;
    line-height: .6rem;
}

.page-upload .guild-text b {
    font-size: .32rem;
}

.page-upload .guild-text b+span {
    margin-left: .2rem;
}

.page-upload .guild-text p b {
    font-size: .28rem;
}

.upload-url {
    height: .8rem;
    border-radius: .4rem;
    border: .02rem solid #CCCCCC;
    overflow: hidden;
}

.upload-url input {
    width: 100%;
    height: 100%;
    padding: 0 .4rem;
    font-size: .28rem;
    font-weight: 400;
    color: #333;
}

.upload-url input::placeholder {
    color: #999999;
}

/* upload end */


/* name list */
.name-list {}

.name-list .name {
    font-size: .32rem;
    color: #265EAA;
    line-height: .6rem;
}

.name-list .content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.name-list .content .user {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 2.75rem;
    margin-bottom: .2rem;

    font-size: .28rem;
    font-weight: 400;
    line-height: .52rem;
}

.name-list .content .user .mobile {
    margin-left: .2rem;
}

/* name list end */


.van-tabs,
.van-popup {
    color: #333;
}

@keyframes fadeOutDown {
    0% {
        opacity: 1
    }

    80% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }

    100% {
        opacity: 0;
        transform: translate3d(0, 0, 0)
    }
}

@keyframes hand {
    0% {
        opacity: 1
    }

    80% {
        opacity: 1;
        -webkit-transform: translate3d(0, 20%, 0);
        transform: translate3d(0, 20%, 0)
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}

@media screen and (max-width: 751px) {
    body{
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* 手机 */
    .container {
        padding-left: .6rem;
        padding-right: .6rem;
    }

    .btn {
        width: 5.6rem;
        height: 1.8rem;
    }
    .page,
    header::before {
        background-image: url(/static/image/bg-mobile.png);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }


    .page-home .bg{
        background-image: url(/static/image/bg-home-m.png);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    /* .page-home-65{
        width: 1.36rem;
        height: 1.2rem;

        top: .8rem;
        left: .8rem;
    } */
    .page-home-logo{
        width: 1.8rem;
        height: .72rem;

        top: .96rem;
        right: .6rem;
    }
    .page-home-match{
        width: 1.28rem;
        height: 1.04rem;

        top: .8rem;
        left: 3.22rem;
    }
    .page-home-title{
        width: 6.1rem;
        height: 2.68rem;

        top: 50%;
        left: 50%;
        margin-top: -3rem;
        margin-left: -3.05rem;

        background-image: url(/static/image/title-m.png);
    }
    .page-home .btn-group {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        
        width: 100%;
        position: absolute;
        bottom: constant(safe-area-inset-bottom);
        bottom: env(safe-area-inset-bottom);
        bottom: 0;
        margin-bottom: .8rem;
    }

    .page-home .btn-group .btn{
        position: unset;
    }
    .page-home .btn-group .btn+.btn {
        margin-top: .3rem;
    }

    .page-home .arrow {
        position: unset;
        margin-top: auto;

        margin-bottom: constant(safe-area-inset-bottom);
        margin-bottom: env(safe-area-inset-bottom);
    }

    .page-list .success-title {
        margin-top: 1.2rem;
    }

    .animated {
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation-delay: .5s;
        opacity: 0;
    }

    .bounceInLeft {
        -webkit-animation-name: bounceInLeft;
        animation-name: bounceInLeft;
    }
    .bounceInRight {
        -webkit-animation-name: bounceInRight;
        animation-name: bounceInRight;
    }

}


@-webkit-keyframes bounceInLeft {
    0%,
    60%,
    75%,
    90%,
    to {
        opacity: 1;
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3);
        transform: translate3d(-3000px, 0, 0) scaleX(3)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(25px, 0, 0) scaleX(1);
        transform: translate3d(25px, 0, 0) scaleX(1)
    }

    75% {
        -webkit-transform: translate3d(-10px, 0, 0) scaleX(.98);
        transform: translate3d(-10px, 0, 0) scaleX(.98)
    }

    90% {
        -webkit-transform: translate3d(5px, 0, 0) scaleX(.995);
        transform: translate3d(5px, 0, 0) scaleX(.995)
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes bounceInLeft {
    0%,
    60%,
    75%,
    90%,
    to {
        opacity: 1;
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3);
        transform: translate3d(-3000px, 0, 0) scaleX(3)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(25px, 0, 0) scaleX(1);
        transform: translate3d(25px, 0, 0) scaleX(1)
    }

    75% {
        -webkit-transform: translate3d(-10px, 0, 0) scaleX(.98);
        transform: translate3d(-10px, 0, 0) scaleX(.98)
    }

    90% {
        -webkit-transform: translate3d(5px, 0, 0) scaleX(.995);
        transform: translate3d(5px, 0, 0) scaleX(.995)
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@-webkit-keyframes bounceInRight {
    0%,
    60%,
    75%,
    90%,
    to {
        opacity: 1;
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
        transform: translate3d(3000px, 0, 0) scaleX(3)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
        transform: translate3d(-25px, 0, 0) scaleX(1)
    }

    75% {
        -webkit-transform: translate3d(10px, 0, 0) scaleX(.98);
        transform: translate3d(10px, 0, 0) scaleX(.98)
    }

    90% {
        -webkit-transform: translate3d(-5px, 0, 0) scaleX(.995);
        transform: translate3d(-5px, 0, 0) scaleX(.995)
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes bounceInRight {

    0%,
    60%,
    75%,
    90%,
    to {
        opacity: 1;
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
        transform: translate3d(3000px, 0, 0) scaleX(3)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
        transform: translate3d(-25px, 0, 0) scaleX(1)
    }

    75% {
        -webkit-transform: translate3d(10px, 0, 0) scaleX(.98);
        transform: translate3d(10px, 0, 0) scaleX(.98)
    }

    90% {
        -webkit-transform: translate3d(-5px, 0, 0) scaleX(.995);
        transform: translate3d(-5px, 0, 0) scaleX(.995)
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}


@media screen and (min-width: 751px) {

    /* pc */
    .container {
        padding-left: .6rem;
        padding-right: .6rem;
    }
    .btn {
        width: 5.6rem;
        height: 1.8rem;
    }

    .page,
    header::before {
        background-image: url(/static/image/bg-pc.png);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    
    .page-home .bg{
        background-image: url(/static/image/bg-home.png);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    .page-home-65{
        width: 1.9rem;
        height: 1.7rem;

        top: .6rem;
        left: 1.6rem;
    }
    .page-home-match{
        width: 1.19rem;
        height: .96rem;

        top: .56rem;
        left: .51rem;
    }
    .page-home-logo{
        width: 1.8rem;
        height: .72rem;

        top: .57rem;
        right: .57rem;
    }
    .page-home-title{
        width: 7.15rem;
        height: 3.6rem;

        top: 50%;
        margin-top: -4rem;
        right: .51rem;
        /* transform: scale(.8); */
        /* transform-origin: left center; */

        background-image: url(/static/image/title.png);
    }
    .page-home .btn-group {
        display: flex;
        flex-direction: column;
        
        position: absolute;
        bottom: constant(safe-area-inset-bottom);
        bottom: env(safe-area-inset-bottom);
        bottom: 0;
        right: 1.6rem;
        margin-bottom: 1.6rem;
    }

    .page-home .btn-group .btn{
        position: unset;
        
        width: 3rem;
        height: 1.04rem;
    }
    .page-home .btn::after{
        background-size: auto 0.48rem;
        background-position: center 0.24rem;
    }
    .page-home .btn-group .btn+.btn {
        margin-top: .3rem;
    }


    .page-list .success-title {
        margin-top: .6rem;
    }


    .van-popup {
        max-width: 8rem;
        left: 50%;
        margin-left: -4rem;
    }

    @media screen and (min-width: 1400px) {
        /* 更大屏 */
        .page-home-title{
            /* width: 10rem;
            height: 2.2rem; */
        }
        .page-home .btn-group{
            flex-direction: row;
            margin-bottom: 1.6rem;
        }
        .page-home .btn-group .btn+.btn {
            margin-top: 0;
            margin-left: .4rem;
        }

    }
}