/* Write your styles */
.am-navbar-label {
    color: #5d5d5d;
}

.am-navbar-label.select {
    color: #e40242;
}

.line {
    width: 100%;
    height: 1px;
    background-color: #ccc;
}

.home-img-head {
    width: 176px;
    height: 27px;
    content: url("../img/logo@2x.png");
}

.home-img-qing {
    content: url("../img/nav/qing@2x.png");
}

.home-img-qing_hover {
    content: url("../img/nav/qing_hover@2x.png");
}

.home-img-yun {
    content: url("../img/nav/yun@2x.png");
}

.home-img-yun_hover {
    content: url("../img/nav/yun_hover@2x.png");
}

.home-img-ti {
    content: url("../img/nav/ti@2x.png");
}

.home-img-ti_hover {
    content: url("../img/nav/ti_hover@2x.png");
}

.home-img-yu {
    content: url("../img/nav/yu@2x.png");
}

.home-img-yu_hover {
    content: url("../img/nav/yu_hover@2x.png");
}

.body-nodata {
    width: 100%;
    height: 100%;
    display: flex;
    /*实现垂直居中*/
    align-items: center;
    /*实现水平居中*/
    justify-content: center;
    text-align: justify;
}

.account-bg {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 30%;
    content: url("../img/user/bg@2x.png");
    z-index: -100;
}

.account-avatar {
    width: 100px;
    height: 100px;
    margin-top: 0px;
    border-radius: 15rem;
    /*content:url("../img/user/touxiang@2x.png");*/
}

.home-page {
    width: 100%;
}

.account-page {
    width: 100%;
    padding: 10px;
    text-align: center;
}

.account-page2 {
    width: 100%;
    text-align: center;
}

.account-title {
    width: 95%;
    margin: -50px auto 0px auto;
    height: 135px;
    background-color: white;
    text-align: center;
    border-radius: 1rem;
}

.header-icon-back {
    width: 10px;
    height: 18px;
    content: url("../img/Path@2x.png");
}

.account-name {
    font-size: 22px;
    padding-top: 50px;
    color: #000;
}

.account-subname {
    font-size: 16px;
    padding-top: 5px;
    color: #c1bfca;
}

.account-items {
    width: 95%;
    margin: 20px auto 0px auto;
    background-color: white;
}

.account-item {
    padding: 10px;
    display: flex;
    /*实现垂直居中*/
    align-items: center;
    /*实现水平居中*/
    justify-content: left;
    text-align: justify;
}

.account-item-icon-ziliao {
    width: 30px;
    height: 30px;
    float: left;
    margin-right: 10px;
    content: url("../img/user/ziliao@2x.png");
}

.account-item-icon-saishi {
    width: 30px;
    height: 30px;
    float: left;
    margin-right: 10px;
    content: url("../img/user/saishi@2x.png");
}

.account-item-icon-us {
    width: 30px;
    height: 30px;
    float: left;
    margin-right: 10px;
    content: url("../img/user/us@2x.png");
}

.account-item-icon-yijian {
    width: 30px;
    height: 30px;
    float: left;
    margin-right: 10px;
    content: url("../img/user/yijian@2x.png");
}

.account-item-title {
    width: 100%;
    font-size: 20px;
    text-align: left;
}

.account-item-arrow {
    width: 8px;
    height: 12px;
    float: right;
    right: 0px;
    content: url("../img/arrow-right.png");
}

.account-logout {
    width: 95%;
    display: flex;
    /*实现垂直居中*/
    align-items: center;
    background-color: white;
    /*实现水平居中*/
    justify-content: center;
    text-align: justify;
    padding-top: 10px;
    padding-bottom: 10px;
    margin: 20px auto 10px auto;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.account-logo {
    width: 131px;
    height: 76px;
    margin: 40px auto 20px auto;
    content: url("../img/user/logo@2x.png");
}

.login-type-container {
    width: 50%;
    height: 90px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.login-type {
    color: black;
    font-size: 20px;
}

.login-type-unselect {
    color: #999999;
    font-size: 20px;
}

.account-icon-geren {
    width: 15px;
    height: 16px;
    content: url("../img/user/geren@2x.png");
}

.account-icon-mima {
    width: 15px;
    height: 16px;
    content: url("../img/user/mima@2x.png");
}

.account-icon-phone {
    width: 15px;
    height: 16px;
    content: url("../img/user/phone@2x.png");
}

.account-icon-yanzhegnma {
    width: 15px;
    height: 16px;
    content: url("../img/user/yanzhegnma@2x.png");
}

.input-item {
    width: 80%;
    margin: 0 auto 20px auto;
    display: flex;
    flex-direction: column;
    align-items: start;
}

.input {
    width: 100%;
    height: 35px;
    border: 0px;
    outline: none;
    cursor: pointer;
    font-size: 16px;
}

.login-btn {
    width: 80%;
    height: 45px;
    display: flex;
    color: white;
    background-color: #ff6565;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 20px auto;
}

.register-container {
    width: 80%;
    margin: 0px auto;
    display: flex;
    flex-direction: row;
    color: #ff6565;
    justify-content: space-between;
}

.register-btn {
    width: 90%;
    height: 45px;
    display: flex;
    color: white;
    background-color: #ff6565;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 20px auto 0px auto;
}

.back-btn {
    width: 90%;
    height: 45px;
    display: flex;
    color: white;
    background-color: #696767;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 20px auto;
}

.step-container {
    width: 100%;
    height: 95px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.phoneCode {
    width: 110px;
    text-align: center;
    color: #999999;
    border-color: #999999;
    border-style: solid;
    border-width: 1px 1px;
    border-radius: 10rem;
    font-size: 14px;
}

.step1-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.step2-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.step-title {
    width: 80%;
    height: 45px;
    font-size: 20px;
    font-weight: bold;
    text-align: left;
    color: #000;
}

.step-title2 {
    width: 90%;
    height: 45px;
    font-size: 20px;
    font-weight: bold;
    text-align: left;
    color: #000;
}

.input-item2 {
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 10px;
}

.input-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.input-label {
    width: 30vw;
    height: 10vw;
    text-align: left;
}

.input-right {
    width: 100%;
    height: 10vw;
    text-align: right;
    border: 0px;
    outline: none;
    cursor: pointer;
    background-color: white;
    font-size: 4vw;
}

.input-region {
    width: 100%;
    height: 35px;
    display: flex;
    border: 0px;
    outline: none;
    cursor: pointer;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}

.input-unit {
    width: 100%;
    height: 35px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}

.picker-item {
    width: 110px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.picker-r-item {
    width: 220px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}

.input-lr-item {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
}

.account-code-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.icon-step1 {
    width: 100px;
    height: 15px;
    content: url("../img/user/jindu_f@2x.png");
    margin-bottom: 10px;
}

.icon-step2 {
    width: 100px;
    height: 15px;
    content: url("../img/user/jindu_s@2x.png");
    margin-bottom: 10px;
}

.step-info {
    width: 150px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    color: #999999;
    font-size: 13px;
}

.match-arrow {
    width: 4vw;
    height: 2vw;
    content: url("../img/match/xiala@2x.png");
}

.head-img {
    width: 8vw;
    height: 8vw;
    float: right;
    position: relative;
    right: 0px;
}


.weui-uploader__file {
    position: relative;
}

.pic_del {
    width: 25px;
    height: 25px;
    float: right;
    position: absolute;
    top: 0px;
    right: 0px;
    display: block;
    content: url("../img/pic_del.png");
}

.nav-wrap-bg {
    position: fixed;
    width: 100%;
    top: 0;
    background: #3c3c3c;
    color: #000;
    z-index: -1;
}

.ads-logo {
    width: 100%;
    height: 55vw;
}

.home-page {
    width: 100%;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.swiper-container {
    width: 95%;
    height: 51vw;
    margin: 0px auto;
}

/*.swiper-container .swiper1 {*/
/*width: 100%;*/
/*height: 384px;*/
/*}*/

/*.swiper-container .swiper1 image {*/
/*width: 100%;*/
/*height: 384px;*/
/*}*/

.signup-container {
    width: 100%;
    height: 31vw;
    margin: 0px auto;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: white;
}

.signup-item {
    width: 100%;
    position: relative;
}

.signup-imgbox-baoming {
    /*width: 366px;*/
    /*height: 214px;*/
    width: 100%;
    height: 30vw;
    /*偏移*/
    z-index: -1;
    content: url("../img/baoming@2x.png");
}

.signup-imgbox-zixun {
    width: 100%;
    height: 30vw;
    /*偏移*/
    z-index: -1;
    content: url("../img/zixun@2x.png");
}

.signup-title {
    position: absolute;
    left: 5vw;
    top: 3vw;
    width: 100%;
    color: #ffffff;
    font-size: 5vw;
}

.signup-sutitle {
    position: absolute;
    left: 5vw;
    top: 12vw;
    width: 300px;
    color: #ffffff;
    font-size: 3vw;
}

.news-container {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: white;
}

.news-title {
    width: 95%;
    height: 10vw;
    margin: 0px auto;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-content: center;
    flex-wrap: wrap;
}

.news-item {
    width: 95%;
    height: 67vw;
    position: relative;
    margin: 2vw auto;
}

.news-imgbox {
    /*width: 203px;*/
    /*height: 51px;*/
    width: 30%;
    height: 8vw;
    position: relative;
    content: url("../img/zuixinsaishi@2x.png");
}

.champion-container {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: white;
}

.champion-title {
    width: 95%;
    height: 8vw;
    margin: 0px auto;
    display: flex;
    justify-content: flex-start;
    align-content: center;
    flex-wrap: wrap;
    position: relative;
}

.champion-matchName {
    width: 95%;
    height: 6vw;
    margin: 0px auto;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    font-size: 4vw;
    position: relative;
}

.champion-imgbox {
    /*width: 203px;*/
    /*height: 51px;*/
    width: 40%;
    height: 6vw;
    position: relative;
    content: url("../img/title_guangjun@2x.png");
}
.champion-item-container{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.champion-item {
    width: 95%;
    height: 59vw;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-content: center;
    margin: 1vw auto;
}

.champion-athlete-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    height: 53vw;
    width: 100%;
    overflow: hidden;
    line-height: 53vw;
    font-size: 16px;
    /*box-sizing: border-box;*/
    /*white-space: nowrap;*/
    overflow-x: scroll;
}

.animate {
    padding-left: 20px;
    font-size: 12px;
    color: #000;
    display: inline-block;
    white-space: nowrap;
    animation: 10s wordsLoop linear infinite normal;
}

@keyframes wordsLoop {
    0% {
        transform: translateX(200px);
        -webkit-transform: translateX(200px);
    }
    100% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
    }
}

@-webkit-keyframes wordsLoop {
    0% {
        transform: translateX(200px);
        -webkit-transform: translateX(200px);
    }
    100% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
    }
}

.champion-athlete-table tr{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    height: 53vw;
    width: 100%;
    overflow: hidden;
    line-height: 53vw;
    font-size: 16px;
    padding: 1vw;
    /*box-sizing: border-box;*/
    /*white-space: nowrap;*/
}
.champion-athlete-table tr td{
    width: 33.3%;
}

.champion-athlete-container::-webkit-scrollbar {
    display: none
}

.champion-tab-item {
    width: 29vw;
    height: 50vw;
    position: relative;
    margin: 1.5vw 2vw 0vw 0vw;
    color: #0C0C0C;
    border: 1px solid #ccc;
    display: inline-block;
}

.champion-tab-c {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.champion-athlete-img {
    width: 29vw;
    height: 29vw;
    position: relative;
    /*display: flex;*/
    /*flex-direction: column;*/
    /*justify-content: flex-start;*/
    /*align-content: center;*/
}

.champion-athlete-name {
    position: absolute;
    top: 7vw;
    font-weight: bold;
    position: absolute;
    font-size: 4.5vw;
    color: #333333;
}
.champion-athlete-groupName {
    position: absolute;
    top: 13vw;
    position: absolute;
    font-size: 3.5vw;
    color: #777777;
}
.champion-athlete-address {
    position: absolute;
    top: 18vw;
    position: absolute;
    font-size: 3.5vw;
    color: #777777;
}

.caipan-container {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: white;
    margin-bottom: 3vw;
}

.caipan-title {
    width: 95%;
    height: 8vw;
    position: relative;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.caipan-imgbox {
    /*width: 266rpx;*/
    /*height: 57rpx;*/
    width: 50%;
    height: 7vw;
    position: relative;
    content: url("../img/title_caipan@2x.png");
}
.caipan-item{
    width: 95%;
    height: 44vw;
    position: relative;
}
.caipan-bg-item {
    width: 95%;
    height: 37vw;
    position: absolute;
    bottom: 0px;
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: right;
    flex-wrap: wrap;
    border-radius: 1vw;
    border:1px solid #ccc;
}
.caipan-name{
    position: relative;
    width: 60%;
    height: 6vw;
    top:1vw;
    color: #343434;
    font-size: 4.5vw;
    font-weight: bold;
    left: 33vw;
}
.caipan-intro{
    position: relative;
    width: 59%;
    height: 21vw;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    color: #323232;
    font-size: 3.5vw;
    left: 33vw;
}
.caipan-avatar-imgbox{
    position: relative;
    width: 25vw;
    height: 36vw;
    left: 4vw;
    top: 3vw;
    border-radius: 1vw;
}
.match-join-info {
    /*width: 702px;*/
    /*height: 400px;*/
    width: 100%;
    height: 57vw;
    position: relative;
    margin-bottom: 0px;
}

.caipan-info-container {
    width: 90%;
    min-height: 500px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 10px auto;
}
.caipan-info-item {
    width: 100%;
    min-height: 450px;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: white;
    margin: 10px auto;
    top: 12vw;
    left: 0vw;
    border-radius: 1vw;
    border: 1vw solid white;
    z-index: 90;
}
.caipan-info-avatar-imgbox{
    position: absolute;
    width: 28vw;
    height: 36vw;
    display: flex;
    top: 1vw;
    left: 5vw;
    border-radius: 1vw;
    border: 1vw solid white;
    z-index: 100;
}
.caipan-info-name{
    position: absolute;
    width: 60%;
    height: 10vw;
    top:2vw;
    color: #343434;
    font-size: 5.5vw;
    font-weight: bold;
    left: 36vw;
}
.caipan-info-addr{
    position: absolute;
    width: 60%;
    height: 10vw;
    top:13vw;
    left: 36vw;
}

.caipan-info-addr-txt{
    font-size: 3.8vw;
    padding: 3px 10px;
    color: #fe3a3b;
    border: 1px solid #fe3a3b;
    margin-right: 5px;
}
.caipan-info-intro{
    width: 90%;
    position: absolute;
    top: 23vw;
    font-size: 3.8vw;
}

.match-join-imgbox {
    /*width: 702px;*/
    /*height: 384px;*/
    width: 100%;
    height: 55vw;
    position: absolute;
}

.match-join-title {
    width: 100%;
    height: 12vw;
    position: absolute;
    bottom: 1.3vw;
    background-color: #100e0e6b;
    color: white;
    font-size: 3.3vw;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.match-join-subtitle {
    padding-left: 3vw;
}

.match-join-btn {
     width: 100%;
     height: 11vw;
     display: flex;
     background-color: #ff6565;
     flex-direction: row;
     align-items: center;
     justify-content: center;
     margin-bottom: 4vw;
 }
.match-endjoin-btn {
    width: 100%;
    height: 11vw;
    display: flex;
    background-color: #9a9a9a;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-bottom: 4vw;
}

.match-join-logo {
    width: 4vw;
    height: 5vw;
    position: relative;
    content: url("../img/btn_icon@2x.png");
}

.match-join-txt {
    color: #fff;
    font-weight: bold;
    font-size: 4vw;
}

.more {
    color: #333333;
    font-size: 4vw;
}


/** 比赛相关**/
.match-select {
    position: fixed;
    top: 0px;
    width: 100%;
    height: 12vw;
    font-size: 6vw;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.match-item {
    position: relative;
    width: 95%;
    height: 27vw;
    margin: 10px auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.score-item {
    position: relative;
    margin: 3vw auto 3vw auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.order-unpay-btn {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 150px;
    height: 50px;
    background-color: #ff4a49;
    border-radius: 5px;
    border: 1px solid #ff4a49;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    font-size: 23px;
}

.match-imgbox {
    position: relative;
    width: 40vw;
    height: 27vw;
    border-radius: 5px;
}

.match-right-item {
    width: 60vw;
    height: 27vw;
    position: relative;
    display: flex;
    flex-direction: column;
    left: 10px;
    align-items: flex-start;
    justify-content: left;
}

.match-type-item {
    width: 95%;
    margin: 3vw 0px;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 3.5vw;
    justify-content: left;
}

.match-group-name {
    color: #323232;
    margin-right: 5px;
}

.match-type-name1 {
    padding: 0px 4vw;
    text-align: center;
    color: #ffc20b;
    font-size: 3vw;
    margin-right: 2vw;
    border-radius: 50px;
    border: 1px solid #ffc20b;
}

.match-type-name2 {
    width: 17vw;
    text-align: center;
    color: #64c66f;
    font-size: 3.2vw;
    margin-right: 2vw;
    border-radius: 50px;
    border: 1px solid #64c66f;
}

.match-group-status1 {
    width: 17vw;
    text-align: center;
    color: #ff3938;
    font-size: 3.2vw;
    margin-right: 2vw;
    border-radius: 50px;
    border: 1px solid #ff3938;
}

.match-group-status2 {
    width: 17vw;
    text-align: center;
    color: #9a9a9a;
    font-size: 3.2vw;
    margin-right: 2vw;
    border-radius: 50px;
    border: 1px solid #9a9a9a;
}

.match-name {
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    color: #333333;
    font-size: 4vw;
    font-weight: bold;
}

.match-content {
    position: relative;
    color: #757575;
    font-size: 3.5vw;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.match-operate {
    width: 95%;
    position: relative;
    bottom: 0px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}

.match-signup-btn {
    width: 25vw;
    height: 7vw;
    color: white;
    font-size: 4vw;
    margin-right: 5vw;
    text-align: center;
    position: relative;
    background-color: #ff5f5f;
    border-radius: 5px;
}

.match-comment-btn {
    width: 25vw;
    height: 7vw;
    color: white;
    font-size: 4vw;
    margin-right: 5vw;
    text-align: center;
    position: relative;
    background-color: #fec901;
    border-radius: 5px;
}

.match-end-btn {
    width: 25vw;
    height: 7vw;
    color: white;
    font-size: 4vw;
    margin-right: 5vw;
    text-align: center;
    position: relative;
    background-color: #e5e5e5;
    border-radius: 5px;
}

.match-operate2 {
    width: 95%;
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}

.match-athlete {
    width: 22vw;
    height: 10vw;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #989898;
    font-size: 3.3vw;
}
.match-score {
    width: 22vw;
    height: 10vw;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #989898;
    font-size: 3.3vw;
}

.match-ranking {
    width: 22vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #989898;
    font-size: 3.3vw;
}

.match-score-title {
    height: 5vw;
    color: #333333;
}

.match-score-value {
    height: 5vw;
    color: red;
    font-size: 3.3vw;
    font-weight: bold;
}

.match-score-btn {
    position: relative;
    bottom: 2vw;
    top: 2vw;
    width: 25vw;
    height: 6vw;
    background-color: #ff4a49;
    border-radius: 5px;
    border: 1px solid #ff4a49;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    font-size: 4vw;
}

.match-fail-btn {
    position: relative;
    bottom: 2vw;
    top: 2vw;
    width: 25vw;
    height: 6vw;
    background-color: #706e6e;
    border-radius: 5px;
    border: 1px solid #706e6e;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    font-size: 4vw;
}

.match-video-btn {
    position: relative;
    bottom: 2vw;
    top: 2vw;
    width: 25vw;
    height: 6vw;
    background-color: #fed000;
    border-radius: 5px;
    border: 1px solid #fed000;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    font-size: 4vw;
}

/*match相关*/
.match-container {
    width: 100%;
    background-color: white;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.match-title {
    width: 95%;
    font-size: 5vw;
    color: #333;
    font-weight: 700;
    margin: 2vw auto;
}

.match-intro {
    position: relative;
    width: 95%;
    height: 31vw;
    font-size: 4vw;
    color: #333333;
    margin: 0 auto;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
}

.match-intro2 {
    width: 95%;
    font-size: 4vw;
    color: #333333;
    margin: 0 auto;
}

.match-process-icon {
    width: 95%;
    display: flex;
    flex-direction: row;
    margin: 3vw auto 0 auto;
    align-items: center;
    justify-content: center;
}

.match-process {
    width: 95%;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 3vw auto 1vw auto;
    justify-content: space-between;
}

.match-process-step {
    width: 30vw;
    display: flex;
    color: #333333;
    font-size: 4.5vw;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.match-process-step1 {
    width: 12vw;
    height: 12vw;
    position: relative;
    content: url("../img/match/baomingkaishi@2x.png");
}

.match-process-step2 {
    width: 12vw;
    height: 12vw;
    position: relative;
    content: url("../img/match/baomingjiesu@2x.png");
}

.match-process-step3 {
    width: 12vw;
    height: 12vw;
    position: relative;
    content: url("../img/match/bisaizhibo@2x.png");
}

.match-process-line {
    width: 20vw;
    height: 1vw;
    position: relative;
    margin-left: 1vw;
    margin-right: 1vw;
    content: url("../img/match/line@2x.png");
}

.group-container {
    width: 100%;
    margin: 5vw auto 0px auto;
    background-color: white;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.group-condition {
    width: 99%;
    margin: 2vw auto;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.group-select {
    width: 33%;
    height: 70px;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.group-arrow {
    width: 21px;
    height: 10px;
}

.group-list {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: left;
    margin-bottom: 120px;
}

.group-item {
    width: 95%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: left;
    margin: 2vw auto;
}

.group-type-name {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;
}

.group-tname {
    font-size: 4vw;
    color: #333;
    font-weight: bold;
    margin-right: 2vw;
}

.group-status1 {
    width: 20vw;
    height: 6vw;
    margin-right: 2vw;
    font-size: 3.2vw;
    text-align: center;
    background-color: #fff0f1;
    color: #ff393e;
    border-radius: 5px;
    border: 1px solid #ff393e;
}

.group-status2 {
    width: 20vw;
    height: 6vw;
    margin-right: 2vw;
    font-size: 3.2vw;
    text-align: center;
    background-color: #f3f3f3;
    color: #9c9c9c;
    border-radius: 5px;
    border: 1px solid #9c9c9c;
}

.group-name {
    font-size: 4vw;
    margin-top: 3vw;
    color: #343434;
}

.group-info-item {
    font-size: 3.5vw;
    margin-top: 2vw;
    margin-bottom: 2vw;
    color: #343434;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.group-info-item-left {
    float: left;
}

.group-info-item-right {
    float: right;
    position: absolute;
    right: 0px;
}

.red {
    color: red;
}

.page-bottom {
    width: 100%;
    height: 20vw;
    background-color: white;
    position: fixed;
    bottom: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: left;
}

.bottom-operate {
    width: 95%;
    height: 20vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.score-btn {
    width: 45%;
    height: 10vw;
    font-size: 4vw;
    background-color: #ff5959;
    color: white;
    border-radius: 5px;
    border: 1px solid #ff5959;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

}

.signup-btn {
    width: 45%;
    height: 70px;
    font-size: 4vw;
    background-color: white;
    color: #ff5959;
    border-radius: 5px;
    border: 1px solid #ff5959;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.order-operate {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.order-btn {
    position: fixed;
    bottom: 5vw;
    width: 95%;
    height: 10vw;
    display: flex;
    color: white;
    background-color: #ff6565;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 5vw;
}
.ordered-btn {
    position: fixed;
    bottom: 5vw;
    width: 95%;
    height: 10vw;
    display: flex;
    color: white;
    background-color: #0e93d7;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 5vw;
}

.order-items {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 4vw;
    margin-bottom: 20vw;
}

.order-item {
    width: 95%;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    border: 1px solid #ccc;
    margin: 5vw auto 0 auto;
}

.input-item2 {
    width: 95%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}


.commont-item{
    width: 95%;
    display: flex;
    flex-direction: row;
    align-items: self-start;
    justify-content: space-between;
    margin: 0 auto 1vw auto;
}
.commont-view{
    width: 46vw;
    height: 43vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    border-radius: 1vw;
    border:1px solid #ccc;
}
.commont-video{
    width: 45vw;
    height: 28vw;
    position: relative;
}
.commont-caipan-name{
    color: #494949;
    font-size: 4.6vw;
}
.commont-video-cover{
    width: 100%;
    height: 28vw;
    position: absolute;
    left: 0;
    top: 0
}
.commont-video-play-btn{
    position: absolute;
    width: 8vw;
    height: 8vw;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto
}
.commont-caipan-level{
    color: #787878;
    font-size: 3.3vw;

}

/*.input-label{*/
/*width: 150px;*/
/*height: 70px;*/
/*text-align: left;*/
/*display: flex;*/
/*flex-direction: row;*/
/*align-items: center;*/
/*justify-content: flex-start;*/
/*}*/
/*.input-right{*/
/*width: 65%;*/
/*height: 70px;*/
/*text-align: right;*/
/*}*/
.input-lr-item {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.red {
    color: red;
}

.match-video-play-btn {
    position: absolute;
    right: 0px;
    width: 6vw;
    height: 4vw;
    content: url("../img/live@2x.png");
}

.video-item {
    position: relative;
    width: 100%;
    height: 60vw;
}

video {
    width: 100%;
    height: 100%;
}

.video-cover {
    width: 100%;
    height: 60vw;
    position: absolute;
    left: 0;
    top: 0
}

.personal-container {
    width: 100%;
    padding-left: 3vw;
}

.unit-container {
    width: 100%;
    padding-left: 3vw;
}

.upload1-btn {
    width: 95%;
    height: 10vw;
    display: flex;
    color: white;
    position: relative;
    font-size: 5vw;
    background-color: #ff6565;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 5vw auto 3vw auto;
}

.upload2-btn {
    width: 95%;
    height: 10vw;
    display: flex;
    color: white;
    font-size: 5vw;
    background-color: #15228f;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 5vw auto 3vw auto;
}


.hidden {
    display: none;
}