@import '../css/ui.css';
@import '../css/swiper.min.css';

html {
    width: 100%;
    overflow-x: hidden;
}

body {
    position: relative;
    max-width: 1920px;
    height: 5000px;
    background-image: url(../images/body.jpg);
    background-position: center 42px;
    background-repeat: no-repeat;    
    background-color: #222229;
    font-family: "Microsoft Yahei";
    overflow-x: hidden;
}

#M3-foot{
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
}

/* public */
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

.u-btn {
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.f-l {
    float: left;
}

.f-r {
    float: right;
}

.m-user{
    position: absolute;
    right: 30px;
    top: 60px;
    height: 41px;
    z-index: 10;  
}

.m-user .u-btn.login{
    width: 123px;
    height: 41px;
    background-image: url(../images/btn-login.png);
}

.user-info{
    font-size: 16px;
    color: #fff;
}

.app-ad{
    position: fixed;
    right: 18px;
    top: 120px;
    width: 143px;
    height: 181px;
    background-image: url(../images/bg-qr.png);
    z-index: 20; 
}

.logo {
    position: absolute;
    left: 30px;
    top: 60px;
    width: 115px;
    height: 91px;
    background-image: url(../images/logo.png);
    z-index: 10;
}

.logo a {
    display: block;
    width: 100%;
    height: 100%;
}

.u-web {
    position: absolute;
    left: 150px;
    top: 80px;
    width: 123px;
    height: 38px;
    background-image: url(../images/logo_h.png);
    z-index: 10;
}

.u-web a {
    display: block;
    width: 100%;
    height: 100%;
}

.u-top {
    position: relative;
    width: 100%;
    height: 842px;
}

.u-top .main-title{
    width: 608px;
    height: 426px;
    margin: 0 auto;
    background-image: url(../images/main-title.png);
}

.u-top .u-btn.apply {
    width: 255px;
    height: 82px;
    margin: 0 auto;
    background-image: url(../images/btn-apply.png);
}

.u-top .u-btn.apply:hover {
    background-image: url(../images/btn-apply-a.png);
}

.m-viewport>.wrapper {
    width: 1000px;
    margin: 0 auto;
}

.u-nav {
    width: 100%;
    left: 50%;
    height: 60px;
    margin: 0 auto;
    background-image: url(../images/bg-nav.png);
    z-index: 12;
}

.u-nav .wrapper {
    width: 1000px;
    margin: 0 auto;
    font-size: 0;
    color: transparent;
}

.nav-item {
    display: inline-block;
    width: 250px;
    height: 60px;
}

.nav-item.nav-1 {
    background-image: url(../images/nav-1.png);
}

.nav-item.nav-2 {
    background-image: url(../images/nav-2.png);
}

.nav-item.nav-3 {
    background-image: url(../images/nav-3.png);
}

.nav-item.nav-4 {
    background-image: url(../images/nav-4.png);
}

.nav-item.nav-1:hover {
    background-image: url(../images/nav-1-a.png);
}

.nav-item.nav-2:hover {
    background-image: url(../images/nav-2-a.png);
}

.nav-item.nav-3:hover {
    background-image: url(../images/nav-3-a.png);
}

.nav-item.nav-4:hover {
    background-image: url(../images/nav-4-a.png);
}

.m-timeline {
    width: 100%;
    padding-top: 140px;
    margin-top: 90px;
    background-image: url(../images/bg-timeline.png);
    background-repeat: no-repeat;
}

.m-timeline ul{
    margin-left: -25px;
}

.m-timeline li{
    display: inline-block;
    width: 144px;
    margin-left: 23px;
    font-size: 14px;
    vertical-align: top;
}

.m-timeline li .time{
    margin-bottom: 15px;
    text-align: center;
    color: #ff6e3b;
}

.m-timeline li .detail{
    padding: 0 10px 0 15px;
    color: #f3ccb8;
}

.match-item{
    margin-top: 80px;
}

.match-item>.title {
    width: 594px;
    height: 160px;
    margin: 0 auto 25px;
    background-position: center;
    background-repeat: no-repeat;
}

.match-item>.title.t-1 {
    background-image: url(../images/title-1.png);
}

.match-item>.title.t-2 {
    background-image: url(../images/title-2.png);
}

.match-item>.title.t-3 {
    background-image: url(../images/title-3.png);
}

.reward-view .money {
    width: 449px;
    height: 696px;
    background-image: url(../images/img-money.png);
}

.reward-view .reward {
    width: 466px;
    height: 695px;
    background-image: url(../images/img-reward.png);
}

.video-list{
    position: relative;
    margin-top: 30px;
}

#prev{
    width: 30px;
    height: 110px;
    top: 22px;
    left: -60px;
    margin-top: 0;
    background-image: url(../images/btn-prev.png);
    background-size: 100% 100%;
}

#next{
    width: 30px;
    height: 110px;
    top: 22px;
    right: -60px;
    margin-top: 0;
    background-image: url(../images/btn-next.png);
    background-size: 100% 100%;
}

.air-view{
    position: relative;
    width: 1000px;
    height: 486px;
    margin: 0 auto;
    padding-top: 25px;
    background-image: url(../images/bg-onair.png);
}

.air-cast,.air-cover{
    display: none;
    width: 732px;
    height: 452px;
    margin: 0 auto;
}

.air-cover img{
    width: 100%;
    height: 100%;
}

.video-cover{
    position: relative;
    width: 220px;
    height: 140px;
    padding: 2px;
    border: 1px solid #8f4e38;
}

.video-cover::after{
    position: absolute;
    display: block;
    content: '';
    left: 50%;
    top: 50%;
    width: 50px;
    height: 50px;
    margin: -25px 0 0 -25px;
    background-image: url(../images/icon-lpay.png);
}

.video-cover a{
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
}

.video-cover img{
    width: 100%;
    height: 100%;
}

.m-video p{
    margin-top: 15px;
    padding: 0 2px;
    font-size: 14px;
    color: #f3ccb8;
}

/* Modals */
.u-window .u-rule{
    margin-top: 20px;
    text-decoration: underline;
    cursor: pointer;
}

.u-window .window-content {
    background-color: #f1ddd3;
}

.u-window .header {
    height: 55px;
    line-height: 55px;
    margin-bottom: 50px;
    font-size: 28px;
    color: #fff;
    text-align: center;
    background-color: #822206;
}

.u-window .u-btn.close{
    font-size: 20px;
    color: #f2e0d7;
}

/* modal-rule */
.m-rule.u-window{
    width: 950px;
}

.m-rule .window-content {}

.m-rule .rule-content {
    padding: 0 55px 75px;
}

.m-rule .rule-view {
    max-height: 70vh;
    overflow-y: scroll;
    font-size: 15px;
    color: #0e0c0b;
}

.rule-view::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 10px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}

.rule-view::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #535353;
}

.rule-view::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #EDEDED;
}

.rule-item{
    padding-right: 10px;
}

.rule-item h6{
    margin-bottom: 14px;
}

.rule-item p{
    position: relative;
    margin-bottom: 20px;
    padding-left: 40px;
    line-height: 1.8;
}

.rule-item p em{
    position: absolute;
    left: 0;
    top: 0;
    display: inline-block;
    width: 27px;
    height: 27px;
    line-height: 27px;
    text-align: center;
    background-color: #e7d2c8;
    border: 1px solid #dd5e5e;
    vertical-align: middle;
}

.rule-item b{
    color: #c02b00;
}

/* enter */
.enter-view{
    padding: 0 30px 50px;
}

.enter-view li{
    display: inline-block;
}

.enter-view ul .u-btn{
    width: 124px;
    height: 124px;
    margin: 0 25px;
}

.enter-view .u-btn.leader{
    background-image: url(../images/icon-leader.png);
}

.enter-view .u-btn.leader:hover{
    background-image: url(../images/icon-leader-a.png);
}

.enter-view .u-btn.team-member{
    background-image: url(../images/icon-member.png);
}

.enter-view .u-btn.team-member:hover{
    background-image: url(../images/icon-member0a.png);
}

.enter-view p{
    font-size: 18px;
    color: #822206;
    margin-top: 18px;
    text-align: center;
}

.code-view .input{
    width: 352px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    color: #0e0c0b;    
    background-color: #e8d4ca;
    border: 1px solid #dd5e5e;
}

:-webkit-input-placeholder {
    /* WebKit browsers */
    color: #a76b2b;
    font-size: 16px;
}

::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #a76b2b;
    font-size: 16px;
}

:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #a76b2b;
    font-size: 16px;
}

input:focus,
textarea:focus {
    outline: none;
}

input[type=text] {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    line-height: 1;
    text-align: center;
    font-size: 14px;
    color: #0e0c0b;
    background-color: transparent;
    border: none;
}

.u-btn.search{
    width: 250px;
    height: 60px;
    margin: 25px auto 0;
    background-image: url(../images/btn-search.png);
}

.u-btn.join{
    width: 250px;
    height: 60px;
    margin: 25px auto 0;
    background-image: url(../images/btn-join.png);
}

.m-leader.u-window .window-content{
    padding-bottom: 45px;
}

.base-info{
    margin-bottom: 20px;
    padding: 20px 55px 15px;
    border-bottom: 1px solid #d1b9ad;
}

.base-item{
    margin-bottom: 10px;
}

/* area */
.area-view{
    display: inline-block;
}

.area-item{
    position: relative;
    display: inline-block;
    width: 244px;
    height: 30px;
    line-height: 30px;
    margin-left: 10px;
    text-align: center;
    font-size: 14px;
    color: #0e0c0b;
    background-color: #e8d4ca;
    border: 1px solid #e3c8bb;
}

.area-view .now{
    position: relative;
}

.area-view .u-list {
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    width: 100%;
    background-color: #e8d4ca;
    z-index: 30;
}

.area-view .u-list li {
    display: inline-block;
    min-width: 50%;
    height: 30px;
    line-height: 30px;
    text-align: center;

}

.area-view .u-list li a {
    color: #0e0c0b;
    transition: all .5s;
}

.area-view .u-list li a:hover{
    color: #ebcf6e;
}

.notice{
    padding-left: 15px;
    color: #a80000;
    font-size: 14px;
}

.message-view{
    width: 26em;
    margin: 0 auto;
    padding: 0 45px 60px;
    font-size: 14px;
    color: #0e0c0b;    
}

.message-view h6{
    margin-bottom: 30px;
    font-size: 24px;
    font-weight: 400;
    color: #822206;
    text-align: center;
}

.message-view p{
    line-height: 1.8;
    margin-bottom: 15px;
}

.message-view b{
    color: #c02b00;
}

.message-view .code{
    display: inline-block;
    width: 63px;
    height: 22px;
    line-height: 22px;
    margin: 0 10px;
    text-align: center;
    background-color: #e7d2c8;
    border: 1px solid #dd5e5e;
    vertical-align: middle;    
}

.member-view{
    width: 720px;
    padding: 0 55px 50px;
    font-size: 14px;
    color: #0e0c0b;
}

.leader-view .member-view{
    padding-bottom: 15px;
}

.member-view .form-item{
    margin-bottom: 10px;
}

.form-tag{
    display: inline-block;
    width: 10em;
    font-size: 14px;
    color: #0e0c0b;
    text-align: right;
}

.input{
    display: inline-block;
    width: 244px;
    height: 30px;
    line-height: 30px;
    margin-left: 10px;
    text-align: center;
    font-size: 14px;
    color: #0e0c0b;
    background-color: #e8d4ca;
    border: 1px solid #e3c8bb;    
}

.check-view{
    padding: 40px 55px 0;
    font-size: 14px;
    color: #0e0c0b;    
    border-top: 1px solid #d1b9ad;
}

.v-code span,
.v-code div{
    display: inline-block;
    margin-right: 10px;
    vertical-align: middle;
}

.v-code .input{
    width: 155px;
}

.v-code .tag{
    display: inline-block;
    width: 10em;
    text-align: right;    
}

.u-btn.submit{
    width: 250px;
    height: 60px;
    margin: 25px auto 0;
    background-image: url(../images/btn-submit.png);    
}

.m-confirm .modal-wrapper {
    padding-bottom: 60px;
}

.member-title{
    margin-bottom: 25px;
    font-size: 36px;
    text-align: center;
    color: #892406;
    background-image: url(../images/bg-member-title.png);
    background-position: center;
    background-repeat: no-repeat;
}

.m-leader.u-window .header{
    height: 0;
}

.m-leader.u-window .u-btn.close{
    top: 60px;
    right: -40px;
    width: 25px;
    height: 25px;
    background-image: url(../images/btn-close-2.png);
    color: transparent;
    font-size: 0;
}

.leader-view{
    width: 858px;
}

.leader-view .tab-hd .u-btn{
    display: inline-block;
    width: 142px;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    color: #d69480;
    text-align: center;
    background-color: #551503;
    border-right: 1px solid #822206;
    border-bottom: 1px solid #822206;
    transition: .4s all;
}

.leader-view .tab-hd .u-btn.active,
.leader-view .tab-hd .u-btn:hover{
    background-color: #822206;
    color: #fff;
}

@-webkit-keyframes flesh {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.leader-view .tab-hd .u-btn.error{
    animation: flesh 2.5s 1 alternate linear;
}

.notice.error{
    animation: flesh 1s 3 alternate linear;
}

.m-leader.u-window .member-title{
    margin-top: 50px;
}

.check-box{
    width: 100%;
    text-align: center;
}

.u-window.m-member-list{
    width: 855px;
}

.u-window.m-member-list .modal-body{
    padding-bottom: 50px;
}

.u-window.m-member-list .list-item{
    position: relative;
    padding: 30px 55px 25px 125px;
    border-bottom: 1px solid #d1b9ad;
}

.u-window.m-member-list .list-item.leader::after{
    content: '';
    display: block;
    position: absolute;
    top: 30px;
    left: 40px;
    width: 51px;
    height: 51px;
    background-image: url(../images/icon-info-leader.png);
}

.u-window.m-member-list .list-item.player::after,
.u-window.m-member-list .list-item.backup::after{
    content: '';
    display: block;
    position: absolute;
    top: 30px;
    left: 40px;
    width: 51px;
    height: 51px;
    background-image: url(../images/icon-area.png);
}

.u-window.m-member-list .list-item.backup::after{
    background-image: url(../images/icon-back.png);
}

.u-window.m-member-list .list-item.backup{
    border-bottom: none;
}

.u-window.m-member-list .player-item{
    display: inline-block;
    width: 20%;
    margin-bottom: 20px;
    font-size: 14px;
    text-align: center;
    /* margin-left: 20px; */
}

.u-window.m-member-list .avatar{
    width: 53px;
    height: 53px;
    margin: 0 auto 10px;
    background-image: url(../images/avatar.png);
}

.u-window.m-member-list .avatar.avatar-temp{
    background-image: url(../images/avatar-empty.png);
}

.icon-check{
    display: inline-block;
    width: 19px;
    height: 16px;
    margin-right: 10px;
    background-image: url(../images/icon-ok.png);
    vertical-align: middle;
}

.play-name{
    font-size: 14px;
    color: #0e0c0b;
}

.play-name em{
    display: inline-block;
    width: 6em;
    overflow:hidden;
    text-overflow:ellipsis;
    vertical-align: middle;
    white-space: nowrap;   
}

.u-btn.add{
    width: 250px;
    height: 60px;
    margin: 25px auto 0;
    background-image: url(../images/btn-add.png);    
}

.u-window.m-supply .modal-body{
    padding-bottom: 50px;
}


.m-tab-hd{
    font-size: 0;
    color: transparent;
}

.m-tab-hd .match-btn{
    display: inline-block;
    width: 500px;
    height: 87px;
    background-position: center;
}

.match-btn.tab-1{
    background-image: url(../images/tab-1.png);
}

.match-btn.tab-1.active{
    background-image: url(../images/tab-1-a.png);
}

.match-btn.tab-2{
    background-image: url(../images/tab-2.png);
}

.match-btn.tab-2.active{
    background-image: url(../images/tab-2-a.png);
}

.m-match-tab .group{
    height: 40px;
    margin-bottom: 20px;
}

.m-match-tab .trriger{
    display: inline-block;
    width: 100px;
    height: 40px;
    line-height: 40px;
    margin-left: 15px;
    font-size: 16px;
    color: #d69480;
    text-align: center;
    background-color: #551503;
    border: 1px solid #822206;
    transition: .4s all;
}

.m-match-tab .pic{
    width: 1000px;
    max-height: 1000px;
    padding-right: 12px;
    overflow-y: auto;
}

.m-match-tab .trriger:hover,
.m-match-tab .trriger.active{
    background-color: #822206;
    color: #fff;    
}

.m-match-tab .pic::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 10px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}

.m-match-tab .pic::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #535353;
}

.m-match-tab .pic::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #EDEDED;
}

.member-list-view{
    position: relative;
}

.code-box{
    position: absolute;
    top: 15px;
    right: 70px;
    width: 125px;
    height: 30px;
    line-height: 30px;
    color: #0e0c0b;
    font-size: 14px;
    text-align: center;
    background-color: #e8d3ca;
    border: 1px solid #dd5e5e;
}

.code-box span{
    color: #724f44;
    padding-right: 20px;
}