/*
by Eason Sun
2018/10/10
 */

/* 临时Icon */


/* 全局设定 */
.close-popup, .weui-popup__overlay, .keyboard {
    cursor: pointer;
}
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing: antialiased;-webkit-overflow-scrolling: touch;}

input:-webkit-autofill,select:-webkit-autofill {  
    -webkit-box-shadow: 0 0 0px 1000px white  inset !important;  
} 

input{
  outline-color: invert ;
  outline-style: none ;
  outline-width: 0px ;
  border: none ;
  border-style: none ;
  text-shadow: none ;
  -webkit-appearance: none ;
  -webkit-user-select: text ;
  outline-color: transparent ;
  box-shadow: none;
}
body{
  font-size: 4vw;
  font-family: "微软雅黑","Microsoft YaHei";
  color: #EBEBEB;
  background-color: #080808;
  z-index: 1;
  position: relative;
  width: 100vw;
  height: 100vh;
}
body::-webkit-scrollbar {
    width: 0px;
}
.none{
  display: none;
}
.bg-black {background-color: #080808;}
.bg-dark {background-color: #161616;}
.bg-light {background-color: #232323;}
.bg-white {background-color: #FFFFFF;}
.bg-red {background-color: #D04957;}
.bg-green {background-color: #01CB99;}
.font-white {color: #FFFFFF;}
.font-gray {color: #EBEBEB;}
.font-black {color: black;}
.green-L {color: #23E6C3;}
.green-D {color: #01CB99;}
.red-L {color: #F96E58;}
.red-D {color: #D04957;}
.gy-yellow {color: #F4D04E;}
.gy-blue {color: #5cccfc;}
.gy-purple {color: #FF7EFF;}
.gold {color: #FFD700 !important;}
.silver {color: #C0C0C0;}
.bronze {color: #CD853F;}

.comp-color1{background-color: #1cc7d0;}
.comp-color2{background-color: #2dde98;}
.comp-color3{background-color: #ffc168;}
.comp-color4{background-color: #ff6c5f;}
.comp-color5{background-color: #ff4f81;}
.comp-color6{background-color: #b84592;}


.mix1 { /* 深蓝色渐变色 */
  background: -webkit-linear-gradient(45deg, #86B2FF, #422370); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(45deg, #86B2FF, #422370); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(45deg, #86B2FF, #422370); /* Firefox 3.6 - 15 */
  background: linear-gradient(45deg, #86B2FF, #422370); /* 标准的语法 */
}
.mix2 { /* 深红色渐变色 */
  background: -webkit-linear-gradient(45deg, #F05F57 10%, #360940 100%); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(45deg, #F05F57 10%, #360940 100%); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(45deg, #F05F57 10%, #360940 100%); /* Firefox 3.6 - 15 */
  background: linear-gradient(45deg, #F05F57 10%, #360940 100%); /* 标准的语法 */
}
.mix3 { /* 深紫色渐变色 */
  background: -webkit-linear-gradient(45deg, #F97794 10%, #623AA2 100%); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(45deg, #F97794 10%, #623AA2 100%); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(45deg, #F97794 10%, #623AA2 100%); /* Firefox 3.6 - 15 */
  background: linear-gradient(45deg, #F97794 10%, #623AA2 100%); /* 标准的语法 */
}
.mix4 { /* 深绿色渐变色 */
  background: -webkit-linear-gradient(45deg, #79F1A4 10%, #0E5CAD 100%); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(45deg, #79F1A4 10%, #0E5CAD 100%); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(45deg, #79F1A4 10%, #0E5CAD 100%); /* Firefox 3.6 - 15 */
  background: linear-gradient(45deg, #79F1A4 10%, #0E5CAD 100%); /* 标准的语法 */
}
.mix5 { /* 深橘色渐变色 */
  background: -webkit-linear-gradient(45deg, #FD6E6A 10%, #FFC600 100%); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(45deg, #FD6E6A 10%, #FFC600 100%); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(45deg, #FD6E6A 10%, #FFC600 100%); /* Firefox 3.6 - 15 */
  background: linear-gradient(45deg, #FD6E6A 10%, #FFC600 100%); /* 标准的语法 */
}
.mix6 {
  background: -webkit-linear-gradient(45deg, #FF8A88, #FFB35E); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(45deg, #FF8A88, #FFB35E); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(45deg, #FF8A88, #FFB35E); /* Firefox 3.6 - 15 */
  background: linear-gradient(45deg, #FF8A88, #FFB35E); /* 标准的语法 */
}
.radius {
  -webkit-border-radius: 2vw;
  -moz-border-radius: 2vw;
  -ms-border-radius: 2vw;
  -o-border-radius: 2vw;
  border-radius: 2vw;
}
.shadow {
  box-shadow: 0px 15px 20px black;
}
.circle {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}

/* 登录界面 */
.welcome-page {
  position: absolute;
  width: 100vw;
  height: 82vh;
  left: 0vw;
  top: 0vw;
  overflow: hidden;
}
.welcome-hidden {
  height: 0vh;
  transition: height 0.5s linear;
  -moz-transition: height 0.5s linear; /* Firefox 4 */
  -webkit-transition: height 0.5s linear; /* Safari 和 Chrome */
  -o-transition: height 0.5s linear; /* Opera */
}
.login-btn {
  width: 100%;
  position: relative;
  float: left;
  font-weight: 900;
  margin-top: 2vw;
  margin-bottom: 5vw;
  font-size: 5vw;
  color: #ebebeb;
  box-shadow: 0px 3px 20px 3px black;
}
.normal {
  position: relative;
  float: left;
  width: 100%;
  height: auto;
}
.welcome-navbar{
  position: absolute;
  top: 82vh;
  left: 0vh;
  background-color: #080808; 
  z-index: 99;
}
.nav-after {
  top: 0vh;
  transition: top 0.5s linear;
  -moz-transition: top 0.5s linear; /* Firefox 4 */
  -webkit-transition: top 0.5s linear; /* Safari 和 Chrome */
  -o-transition: top 0.5s linear; /* Opera */
}
.swiper-container {
  width: 100%;
  height: 100%;
  background-color: #080808;
}
.weui-tab__bd {
  margin-top: 18vh;
}

.pic {
  width: 100%;
  position: relative;
  float: left;
  height: 45vw;
  text-align: center;
  margin-top: 12vh;
}
.pic img {
  width: 100vw;
  position: absolute;
  left: 0px;
  top: -35vw;
}
.welcome-page .title {
  position: relative;
  float: left;
  width: 100vw;
  padding: 5vw 10vw;
  text-align: center;
}
.welcome-page .title h1{
  font-size: 10vw;
  line-height: 10vw;
}
.welcome-page .title h2{
  font-size: 5vw;
  line-height: 7vw;
}
.welcome-page .title h3{
  font-size: 3.3vw;
  line-height: 4vw;
}


@keyframes rotation
{
  from {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-moz-keyframes rotation /* Firefox */
{
  from {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes rotation /* Safari 和 Chrome */
{
  from {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-o-keyframes rotation /* Opera */
{
  from {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


@keyframes rotation_back
{
  from {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  to {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@-moz-keyframes rotation_back /* Firefox */
{
  from {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  to {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@-webkit-keyframes rotation_back /* Safari 和 Chrome */
{
  from {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  to {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@-o-keyframes rotation_back /* Opera */
{
  from {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  to {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

/* 注册界面 */
.registe {
  position: relative;
  float: left;
  width: 100vw;
  height: 100vh;
  padding: 8vw 8vw;
}
.registe-btn {
  width: 100%;
  position: relative;
  float: left;
  font-weight: 900;
  margin-top: 2vw;
  margin-bottom: 5vw;
  font-size: 5vw;
  color: #ebebeb;
}
.registe .title {
  text-align: center;
  margin: 0 15%;
  color: #ebebeb;
}
.registe .title h1{
  font-size: 7vw;
  font-weight: 900;
}
.registe .title h2{
  font-size: 4vw;
  font-weight: 400;
  margin-bottom: 3vw;
}
.weui-msg {
  width: 100%;
  padding: 10vh 8vw 0px 8vw;
}

/* 帐号选择界面 */
.idchoose-area {
  position: relative;
  padding: 8vw;
}
.idchoose-area .title {
  text-align: center;
  font-size: 7vw;
  color: #3cc51f;
  font-weight: 900;
  width: 100%;
  text-align: center;
}
.idchoose-area .subtitle{
  text-align: center;
  font-size: 3.3vw;
  color: #ebebeb;
  font-weight: 400;
  width: 100%;
  text-align: center;
}
.idchoose-area .name {
  position: relative;
  float: left;
  width: 30vw;
}
.idchoose-area .job {
  position: relative;
  float: left;
  width: 24vw;
}
.idchoose-area .status {
  position: relative;
  float: left;
  width: 18vw;
  font-weight: 900;
  text-align: center;
}
.idchoose-area .btn {
  width: 100%;
  font-weight: 900;
  font-size: 5vw;
}


/* 大厅界面 */
.center-page {
  position: relative;
  float: left;
  width: 100vw;
  height: 100vh;
}
.center-page .msg-head {
  position: relative;
  float: left;
  width: 100vw;
  height: 20vw;
  padding: 3vw 8vw 3vw 8vw;
  margin-bottom: 4vw;
}
.center-page .msg-head p{
  font-size: 3.3vw;
  line-height: 5vw;
}
.center-page .block-1 {
  position: relative;
  float: left;
  width: 84vw;
  height: 25vw;
  padding: 4vw;
  margin: 0vw 8vw 4vw 8vw;
  text-align: center;
}
.center-page .block-1 h1{
  font-weight: 900;
  font-size:7vw;
  line-height: 10vw;
}
.center-page .block-1 h2{
  font-weight: 400;
  font-size:4vw;
}
.center-page .block-2-l {
  position: relative;
  float: left;
  width: 40vw;
  height: 25vw;
  padding: 4vw;
  margin: 0vw 4vw 4vw 8vw;
  text-align: center;
}
.center-page .block-2-r {
  position: relative;
  float: left;
  width: 40vw;
  height: 25vw;
  padding: 4vw;
  text-align: center;
  margin: 0vw 8vw 4vw 0vw;
}
.center-page .block-2-l h1{
  font-weight: 900;
  font-size:7vw;
  line-height: 10vw;
}
.center-page .block-2-l h2{
  font-weight: 400;
  font-size:4vw;
}
.center-page .block-2-r h1{
  font-weight: 900;
  font-size:7vw;
  line-height: 10vw;
}
.center-page .block-2-r h2{
  font-weight: 400;
  font-size:4vw;
}
.club-mgt-title {
  position: relative;
  float: left;
  width: 100%;
  height: 10vw;
  line-height: 10vw;
  text-align: center;
  font-weight: 900;
}
.club-mgt-title i{
  position: absolute;
  top: 0vw;
  right: 0vw;
  font-size: 6vw;
  font-weight: 400;
  width: auto;
  height: 10vw;
  line-height: 10vw;
  text-align: center;
  width: 10vw;
}
.club-mgt-area {
  position: relative;
  float: left;
  width: 100%;
  height: auto;
  padding: 4vw 8vw;
}
.club-mgt-area .weui-btn {
  position: relative;
  margin-top: 3vw;
}
#clubV {
  z-index: 3;
  position: relative;
}

.upPage{
  position:fixed;
  z-index:2;
  height:100vh;
  width:100vw;
  padding: 8vw;
  overflow: auto;
}
.upPage .goBack{
  position:relative;
  width:100vw;
  height:auto;
  background-color:#222;
}
.upPage .goBack p {
  font-weight: 900;
  font-size: 5vw;
  margin-left:2vw;
}
.upPage .user-area {
  position: relative;
  float: left;
  width: 100%;
  text-align: center;
  height: auto;
  padding-bottom: 4vw;
}
.upPage .user-area .goback-single {
  position: absolute;
  left: 4vw;
  top: -2vw;
  z-index: 100;
}
.upPage .user-area .goback-single i{
  font-size: 14vw;
}
.upPage .headimg{
  height:20vw;
  width:20vw;
  border-radius:50%;
  border:2px solid #ebebeb;
  margin-top: 5vw;
}
.upPage .weui-cells {
  position: relative;
  float: left;
  width: 100%;
}
.upPage .history-area {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
}
.upPage .history-area .history-btn {
  position: relative;
  float: left;
  margin-bottom: 4vw;
  text-align: center;
  padding: 3vw;
  width: 100%;
  height: auto;
}




/* 房间搜索界面 */
.room-list-area {
  position: relative;
  float: left;
  width: 100vw;
  height: auto;
  padding: 5vw 4vw;
}
.room-btn {
  font-size: 5vw;
  font-weight: 900;
  padding-top: 2vw;
  padding-bottom: 2vw;
}
.room-block {
  position: relative;
  float: left;
  width: 44vw;
  height: 40vw;
  background-color: #161616;
  color: #ebebeb;
  padding: 4vw;
  margin-top: 4vw;
}
.room-block:nth-child(2n) {
  margin-right: 4vw
}
.room-block .leftline {
  position: relative;
  float: left;
  width: 1vw;
  height: 32vw;
  border-radius: 0.5vw;
  margin-right: 2vw;
}
.room-block .roomname {
  position: relative;
  float: left;
  width: 33vw;
  height: auto;
  font-size: 3.6vw;
  font-weight: 900;
  line-height: 4.5vw;
}
.room-block .roomdetail {
  position: relative;
  float: left;
  width: 33vw;
  height: auto;
  font-size: 3vw;
  font-weight: 400;
  line-height: 3.5vw;
  margin-top: 1vw;
}
.room-block .roomstatus {
  position: absolute;
  top: 30vw;
  left: 8vw;
  width: 25vw;
  height: auto;
  font-size: 3.6vw;
  font-weight: 900;
}
.roomdetail {
  position: relative;
  float: left;
  width: 100vw;
  height: auto;
}
.roomdetail .title{
  position: relative;
  float: left;
  width: 100vw;
  height: auto;
  font-size: 4vw;
  font-weight: 900;
  padding: 2vw 0vw;
  text-align: center;
}
.roomdetail .area {
  position: relative;
  float: left;
  width: 100vw;
  height: auto;
  font-size: 3.3vw;
  font-weight: 400;
  padding: 8vw;
}
.roomdetail .area p{
  color: #ebebeb;
  line-height: 5.5vw;
}
.roomdetail .roomdetail-btn{
  margin-top: 5vw;
}
.roomdetail-close {
  position: absolute;
  right: 3vw;
  top: 2vw;
  font-size: 4vw;
}

/* 模拟界面 - 通用 */
.page-bottom {
  position: relative;
  float: left;
  width: 100%;
  height: 24vw;
}
.game-topbar {
  position: relative;
  float: left;
  width: 100vw;
  height: 8vw;
}
.game-topbar-left {
  position: relative;
  float: left;
  height: 100%;
  width: 30vw;
  margin-left:8vw;
  line-height: 8vw;
  font-weight: 900;
  font-size: 3.3vw;
}
.game-topbar-left .left-title{
  position: relative;
  float: left;
  text-align: left;
  width: 7vw;
}
.game-topbar-left .left-num{
  position: relative;
  float: left;
  text-align: right;
  width: 23vw;
}
.game-topbar-left .left-num .left-update{
  position: absolute;
  float: left;
  height: 100%;
  width: 0%;
  right:0vw;
  top: 0vw;
  background: -webkit-linear-gradient(left, rgba(1,203,153,0) , rgba(1,203,153,1)); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(right, rgba(1,203,153,0) , rgba(1,203,153,1)); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(right, rgba(1,203,153,0) , rgba(1,203,153,1)); /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, rgba(1,203,153,0) , rgba(1,203,153,1)); /* 标准的语法 */
}
.game-topbar-right {
  position: relative;
  float: left;
  height: 100%;
  width: 38vw;
  margin-left:6vw;
  line-height: 8vw;
  font-weight: 900;
  font-size: 3.3vw;
}
.game-topbar-right .right-title{
  position: relative;
  float: left;
  text-align: left;
  width: 14vw;
}
.game-topbar-right .right-num{
  position: relative;
  float: left;
  text-align: right;
  width: 24vw;
}
.game-topbar-more {
  position: relative;
  float: left;
  height: 100%;
  width: 6vw;
  margin-left:4vw;
  margin-right: 8vw;
  text-align: center;
}
.game-topbar-more i{
  font-size: 7vw;
  line-height: 8vw;
}
.game-topbar-add {
  position: relative;
  float: left;
  width: 100vw;
  height: 32vw;
  padding: 0vw 8vw 2vw 8vw;
  font-size: 3.3vw;
  font-weight: 900;
  margin-bottom: -4vw;
  z-index: 10;
}
.game-topbar-add .list-block {
  position: relative;
  float: left;
  width: 84vw;
  height: auto;
  padding: 0vw 1vw;
}
.game-topbar-add .list-block .list-1 {
  position: relative;
  float: left;
  text-align: left;
  width: 28vw;
}
.game-topbar-add .list-block .list-1 i{
  position: relative;
  display: inline-block;
  width: 2vw;
  height: 2vw;
  margin-right: 2px;
}
.game-topbar-add .list-block .list-2 {
  position: relative;
  float: left;
  text-align: center;
  width: 14vw;
}
.game-topbar-add .list-block .list-3 {
  position: relative;
  float: left;
  text-align: right;
  width: 40vw;
}

.game-menubar {
  position: fixed;
  bottom: 0vw;
  left: 0vw;
  width: 100vw;
  height: 15vw;
  z-index: 50;
}
.game-menubar-block {
    position: relative;
    float: left;
    width: 30.66vw;
    height: 100%;
    text-align: center;
    padding-top: 2vw;
}
.game-menubar-block1 {
    width: 27vw;
    margin-left: 0px !important;
}
.game-menubar-block2 {
    width: 16vw;
}
    .game-menubar-block .outtip {
        position: absolute;
        top: 30%;
        right: 0;
        text-align: right;
        z-index: 52;
        color: #FFC302;
        text-shadow: 0px 0px 2px #000;
        opacity: 0;
        pointer-events: none;
        transition: all 0.5s;
        -moz-transition: all 0.5s; /* Firefox 4 */
        -webkit-transition: all 0.5s; /* Safari 和 Chrome */
        -o-transition: all 0.5s; /* Opera */
    }
        .game-menubar-block .tip-up {
            top: 3%;
            opacity: 1;
        }
        .game-menubar-block .tip-over {
            top: -35%;
            opacity: 0;
        }
/*此样式用于渠道页面*/
.all-tips {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}
    .all-tips .tipbox {
        position: absolute;
        text-align: center;
        z-index: 3;
        color: #FFC302;
        font-weight: 900;
        pointer-events: none;
        
    }
        .all-tips .tipbox .tip {
            position: relative;
            margin-top: 30%;
            text-shadow: -3px 3px 1px #000;
            opacity: 0;
            transition: all 0.5s;
            -moz-transition: all 0.5s; /* Firefox 4 */
            -webkit-transition: all 0.5s; /* Safari 和 Chrome */
            -o-transition: all 0.5s; /* Opera */
        }
        .all-tips .tipbox .tip-up {
            margin-top: 0%;
            opacity: 1;
        }
        .all-tips .tipbox .tip-over {
            margin-top: -35%;
            opacity: 0;
        }
.menubar-line {
  position: relative;
  float: left;
  width: 1vw;
  height: 60%;
  margin: 20% 0%;
  background-color: black;
}
.game-menubar-block:nth-child(1) {
  margin-left: 4vw;
}
.game-menubar-block i{
  position: relative;
  font-size: 8vw;
  line-height: 6vw;
  margin-top: 2vw;
}
.game-menubar-block p{
  position: relative;
  font-size: 3.3vw;
  line-height: 3vw;
  font-weight: 900;
}
.game-prodcutbar {
  position: fixed;
  bottom: 15vw;
  left: 0vw;
  width: 100vw;
  height: 8vw;
  z-index: 49;
  overflow: hidden;
  border-bottom: 1px solid #080808;
}
.game-prodcutbar .product-info {
  position: absolute;
  left: 0vw;
  bottom: 0vw;
  padding: 0vw 8vw;
  z-index: 40;
}
.game-prodcutbar .animation1 {
  animation: product-info-rotation 10.713s linear 0s infinite normal;
  -moz-animation: product-info-rotation 10.713s linear 0s infinite normal;/* Firefox: */
  -webkit-animation: product-info-rotation 10.713s linear 0s infinite normal;/* Safari 和 Chrome: */
  -o-animation: product-info-rotation 10.713s linear 0s infinite normal;/* Opera: */
}
.game-prodcutbar .animation2 {
  animation: product-info-rotation 10.713s linear 3.57s infinite normal;
  -moz-animation: product-info-rotation 10.713s linear 3.57s infinite normal;/* Firefox: */
  -webkit-animation: product-info-rotation 10.713s linear 3.57s infinite normal;/* Safari 和 Chrome: */
  -o-animation: product-info-rotation 10.713s linear 3.57s infinite normal;/* Opera: */
}
.game-prodcutbar .animation3 {
  animation: product-info-rotation 10.713s linear 7.14s infinite normal;
  -moz-animation: product-info-rotation 10.713s linear 7.14s infinite normal;/* Firefox: */
  -webkit-animation: product-info-rotation 10.713s linear 7.14s infinite normal;/* Safari 和 Chrome: */
  -o-animation: product-info-rotation 10.713s linear 7.14s infinite normal;/* Opera: */
}

@keyframes product-info-rotation
{
  0% {z-index:40;bottom:-10vw;}
  8% {z-index:51;bottom:-10vw;}
  14% {z-index:51;bottom:0vw;}
  60% {z-index:40;bottom:0vw;}
  100% {z-index:0;bottom:-10vw;}
}

@-moz-keyframes product-info-rotation /* Firefox */
{
  0% {z-index:40;bottom:-10vw;}
  8% {z-index:51;bottom:-10vw;}
  14% {z-index:51;bottom:0vw;}
  60% {z-index:40;bottom:0vw;}
  100% {z-index:0;bottom:-10vw;}
}

@-webkit-keyframes product-info-rotation /* Safari 和 Chrome */
{
  0% {z-index:40;bottom:-10vw;}
  8% {z-index:51;bottom:-10vw;}
  14% {z-index:51;bottom:0vw;}
  60% {z-index:40;bottom:0vw;}
  100% {z-index:0;bottom:-10vw;}
}

@-o-keyframes product-info-rotation /* Opera */
{
  0% {z-index:40;bottom:-10vw;}
  8% {z-index:51;bottom:-10vw;}
  14% {z-index:51;bottom:0vw;}
  60% {z-index:40;bottom:0vw;}
  100% {z-index:0;bottom:-10vw;}
}


.game-prodcutbar .product-info .section {
  position: relative;
  float: left;
  height: 8vw;
  margin-right: 2vw;
  text-align: center;
  line-height: 8vw;
  font-weight: 900;
  font-size: 3.3vw;
}
.game-prodcutbar .product-info .name {
  width: 24vw;
}
.game-prodcutbar .product-info .price {
  width: 28vw;
}
.game-prodcutbar .product-info .cost {
  width: 28vw;
  margin-right: 0vw;
}


/* 模拟界面 - 店铺 */
.page-Channel {
  position: relative;
  float: left;
  width: 100vw;
  height: auto;
  padding: 8vw;
}
.page-Channel .Channel-maparea {
  width: 84vw;
  height: 84vw;
  position: relative;
  float: left;
  overflow: hidden;
  margin-bottom: 4vw;
}
.page-Channel .Channel-maparea .map {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0%;
  top: 0%;
  background-image: url(/images/areasBack2.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
    }
#areas {
  position: absolute;
  height: 92%;
  width: 92%;
  top: 3.5%;
  left: 3%;
  transform: rotate(-24deg);
  -ms-transform: rotate(-24deg);
  -moz-transform: rotate(-24deg);
  -webkit-transform: rotate(-24deg);
  -o-transform: rotate(-24deg);
}
#areas .area {
    /*38.49%是以(3*3^0.5)r作为整个区域宽度时，2r的长度占比。仅适用于七个六边形排布*/
    height: 38.49%;
    width: 38.49%;
    position: absolute;
}
.quickaction-block {
  position: relative;
  float: left;
  width: 25.33vw;
  height: 25.33vw;
  overflow: hidden;
  margin-right: 4vw;
  text-align: center;
  padding-top: 4vw;
}
.quickaction-block .num {
  font-size: 6vw;
  font-weight: 980;
  line-height: 8.5vw;
}
.quickaction-block i{
  position: relative;
  font-size: 10vw;
  line-height: 6vw;
  height: 10vw;
}
.quickaction-block h1{
  position: relative;
  font-size: 4vw;
  font-weight: 900vw;
  line-height: 5vw;
}
.quickaction-block:nth-child(3n+1){
  margin-right: 0vw;
}
.Channel-maparea .showmore {
  position: absolute;
  right: 4vw;
  bottom: 4vw;
  font-size: 3.3vw;
  font-weight: 900;
}
.Channel-maparea .yourcolor {
  position: absolute;
  left: 4vw;
  top: 4vw;
  padding: 1vw;
}
.Channel-maparea .yourcolor .color {
  position: relative;
  float: left;
  height: 2vw;
  width: 2vw;
  margin: 1vw;
}
.Channel-maparea .yourcolor p{
  position: relative;
  float: left;
  height: 4vw;
  width: auto;
  line-height: 4vw;
  font-size: 3.3vw;
  font-weight: 900;
}
.channel-popuparea {
  position: relative;
  width: 80vw;
  height: auto;
  max-height: 80vh;
  margin: 15vw auto;
  padding: 4vw;
  overflow-x: hidden;
  overflow-y: auto;
  color: #ebebeb;
}
.channel-popuparea .channel-btn {
  position: relative;
  float: left;
  width: 100%;
  height: auto;
  font-size: 4vw;
  font-weight: 900;
  text-align: center;
  padding: 3vw;
  margin-top: 2vw;
}
.channel-popuparea .part{
  position: relative;
  float: left;
  width: 100%;
  height: auto;
  font-weight: 900;
  color: #ebebeb;
  text-align: center;
  padding: 0vw 0vw 2vw 0vw ;
}
.channel-popuparea h1 {
  font-size: 7vw;
}
.channel-popuparea h2 {
  font-size: 4vw;
}
.channel-popuparea .part-two {
  position: relative;
  width: 100%;
  height: 25vw;
  text-align: center;
}
.channel-popuparea .part-two .title {
  position: relative;
  width: 100%;
  font-size: 4vw;
  font-weight: 900;
  margin-bottom: 2vw;
}
.channel-popuparea .part-two .block {
  position: relative;
  float: left;
  width: 22.6vw;
  height: auto;
  margin-right: 2vw;
  padding: 2vw 0vw;
}
.channel-popuparea .part-two .block:nth-child(3) {
  margin-right: 0vw;
}
.channel-popuparea .part-two .block h1 {
  position: relative;
  font-size: 5vw;
  font-weight: 900;
  margin-bottom: 0vw;
  line-height: 6vw;
}
.channel-popuparea .part-two .block h2 { 
  position: relative;
  font-size: 3.3vw;
  font-weight: 400;
  margin-bottom: 0vw;
  line-height: 5vw;
}
.channel-popuparea .part .channel-close {
  width: 10vw;
  height: 10vw;
  line-height: 10vw;
  text-align: center;
  font-size: 4vw;
  position: absolute;
  right: -3vw;
  top: -3vw;
  z-index:65;
}




/* 模拟界面 - 研发 */
.page-RD {
  position: relative;
  float: left;
  width: 100vw;
  height: auto;
  overflow-x: hidden;
}
.page-RD .RD-map {
  position: relative;
  float: left;
  margin-top: 3vh;
  width: 100vw;
  height: 100vw;
  text-align: center;
  /*animation: rotation 60s linear 0s infinite normal;*/
  /*-moz-animation: rotation 60s linear 0s infinite normal;*/ /* Firefox: */
  /*-webkit-animation: rotation 60s linear 0s infinite normal;*/ /* Safari 和 Chrome: */
  /*-o-animation: rotation 60s linear 0s infinite normal;*/ /* Opera: */
}
.page-RD .RD-ps {
  padding: 0vw 8vw;
  font-size: 3.3vw;
  line-height: 4.5vw;
}
.RD-selector {
  position: relative;
  float: left;
  text-align: center;
  width: 100%;
  padding: 2vw 2vw;
}
.RD-selector .product {
  position: relative;
  display: inline-block;
  margin: 0vw 2vw;
  width: 26vw;
  overflow: hidden;
  padding: 0vw 1vw;
  text-align: center;
  white-space: nowrap;
  font-weight: 900;
  height: 12vw;
  line-height: 12vw;
}
.rd-popuparea {
  position: relative;
  width: 90vw;
  height: 82vh;
  max-height: 115vw;
  margin: 15vw auto;
  padding: 4vw 9vw;
  overflow-x: hidden;
  overflow-y: auto;
  color: #ebebeb;
}
.rd-popuparea .part-one {
  position: relative;
  width: 100%;
  height: 63vw;
  text-align: center;
}
.rd-popuparea .part-one .images {
  position: relative;
  width: 100%;
  text-align: center;
  margin-bottom: 1vw;
}
.rd-popuparea .part-one .images .in_circle {
    width: 22vw;
    height: 22vw;
    margin: auto;
}
.rd-popuparea .part-one .title {
  position: relative;
  width: 100%;
  font-size: 4vw;
  font-weight: 900;
  margin-bottom: 2vw;
}
.rd-popuparea .part-one .block {
  position: relative;
  float: left;
  width: 22.6vw;
  height: auto;
  margin-right: 2vw;
  padding: 2vw 0vw;
}
.rd-popuparea .part-one .block:nth-child(3) {
  margin-right: 0vw;
}
.rd-popuparea .part-one .block h1 {
  position: relative;
  font-size: 6vw;
  font-weight: 900;
  margin-bottom: 0vw;
  line-height: 6vw;
}
.rd-popuparea .part-one .block h2 {
  position: relative;
  font-size: 4vw;
  font-weight: 900;
  margin-bottom: 0vw;
  line-height: 6vw;
}
.rd-popuparea .part-one .block h3 {
  position: relative;
  font-size: 3.3vw;
  font-weight: 400;
  margin-bottom: 0vw;
  line-height: 5vw;
}
.rd-popuparea .part-one .block h4 {
  position: relative;
  font-size: 3.3vw;
  font-weight: 400;
  line-height: 5vw;
  margin-bottom: 0vw;
}
.rd-popuparea .part-one .rd-close {
  width: 10vw;
  height: 10vw;
  line-height: 10vw;
  text-align: center;
  font-size: 4vw;
  position: absolute;
  right: -3vw;
  top: -3vw;
}
.rd-popuparea .part-one .block2 {
  position: relative;
  float: left;
  margin-top: 2vw;
  padding: 2vw;
  width: 100%;
  height: auto;
}
.rd-popuparea .part-one .block2 h1 {
  position: relative;
  float: left;
  width: 50%;
  height: auto;
  text-align: right;
  font-size: 4.5vw;
  font-weight: 900;
  padding-right: 2vw;
}
.rd-popuparea .part-one .block2 h2 {
  position: relative;
  float: left;
  width: 50%;
  height: auto;
  text-align: left;
  font-size: 4.5vw;
  font-weight: 900;
  padding-right: 2vw;
}



.rd-popuparea .part-two {
  position: relative;
  width: 100%;
  height: 30vw;
  text-align: center;
}
.rd-popuparea .part-two .title {
  position: relative;
  width: 100%;
  font-size: 4vw;
  font-weight: 900;
  margin-bottom: 2vw;
}
.rd-popuparea .part-two .block {
  position: relative;
  float: left;
  width: 22.6vw;
  height: auto;
  margin-right: 2vw;
  padding: 2vw 0vw;
}
.rd-popuparea .part-two .block:nth-child(3) {
  margin-right: 0vw;
}
.rd-popuparea .part-two .block h1 {
  position: relative;
  font-size: 5vw;
  font-weight: 900;
  margin-bottom: 0vw;
  line-height: 6vw;
}
.rd-popuparea .part-two .block h2 {
  position: relative;
  font-size: 3.3vw;
  font-weight: 400;
  margin-bottom: 0vw;
  line-height: 5vw;
}
.rd-popuparea .part-two .block h3 {
  position: relative;
  font-size: 3.3vw;
  font-weight: 400;
  margin-bottom: 0vw;
  line-height: 4vw;
}
    .rd-popuparea .rd-upgrade {
        width: 100%;
        height: auto;
        font-size: 4vw;
        font-weight: 900;
        text-align: center;
        padding: 3vw;
        cursor: pointer;
    }


.rd-popuparea .part-one .block
.rd-popuparea .part-one .block

/* 模拟界面 - 产品 */
.page-Product {
  position: relative;
  float: left;
  width: 100vw;
  height: auto;
}
.page-Product .swiper-container {
  position: relative;
  float: left;
  width: 100vw;
  height: 120vw;
}
.page-Product .swiper-container .product-area {
  position: relative;
  float: left;
  margin: 8vw;
  height: 110vw;
  width: 84vw;
}
.page-Product .swiper-container .product-area .keydata-area h1{
  position: relative;
  font-size: 4vw;
  font-weight: 900;
  width: 100%;
  line-height: 5vw;
}
.page-Product .swiper-container .product-area .keydata-area p{
  position: relative;
  font-size: 3.3vw;
  font-weight: 400;
  width: 100%;
  margin-bottom: 1vw;
}
.page-Product .swiper-container .product-area .keydata-area {
  position: relative;
  float: left;
  width: 100%;
  height: 30vw;
  border-bottom: 1vw solid #080808;
  text-align: center;
  padding-top: 4vw;
}
.page-Product .swiper-container .product-area .keydata-area .price {
  position: relative;
  display: inline-block;
  font-size: 7vw;
  height: 10vw;
  padding-right: 1vw;
  font-weight: 900;
}
.page-Product .swiper-container .product-area .keydata-area .data2 {
  position: relative;
  display: inline-block;
  font-size: 3.3vw;
  height: 10vw;
  line-height: 4vw;
  padding-left: 1vw;
  box-sizing: border-box;
}
.page-Product .swiper-container .product-area .keydata-area .data2 .cost{
  padding-top: 1vw;
  box-sizing: border-box;
}
.page-Product .swiper-container .product-area .graph-area {
  position: relative;
  float: left;
  width: 100%;
  height: 30vw;
  border-bottom: 1vw solid #080808;
  text-align: center;
}
.page-Product .swiper-container .product-area .graph-area img{
  position: relative;
  width: 100%;
  height: 100%;
}
.page-Product .swiper-container .product-area .element-area {
  position: relative;
  float: left;
  width: 100%;
  height: auto;
  padding-top: 2vw;
  padding-bottom: 2vw;
}
.page-Product .swiper-container .product-area .newproduct {
  position: relative;
  float: left;
  width: 100%;
  height: auto;
  padding: 20vw 0vw;
  text-align: center;
}
.page-Product .swiper-container .product-area .newproduct i {
  position: relative;
  font-size: 20vw;
  margin-bottom: 2vw;
}
.page-Product .swiper-container .product-area .newproduct h1 {
  font-size: 7vw;
  font-weight: 900;
}
.page-Product .swiper-container .product-area .newproduct h2 {
  font-size: 4vw;
  font-weight: 900;
}



.element-area .element-block {
  position: relative;
  float: left;
  width: 100%;
  height: auto;
  padding: 1vw 4vw;
}
.element-area .element-block .element-block-title {
  position: relative;
  float: left;
  width: 100%;
  height: auto;
}
.element-area .element-block .element-block-title .title1{
  position: relative;
  float: left;
  width: 80%;
  text-align: left;
  font-size: 3.3vw;
}
.element-area .element-block .element-block-title .title2{
  position: relative;
  float: left;
  width: 20%;
  text-align: right;
  font-size: 3.3vw;
}
.element-area .element-block .element-block-progress {
  position: relative;
  float: left;
  width: 76vw;
  height: 1vw;
}
.element-area .element-block .element-block-progress .progress-on {
  position: absolute;
  top: 0vw;
  left: 0vw;
  height: 1vw;
  border-radius: 0.5vw;
}
.element-area .element-block .element-block-progress .progress-bg {
  position: absolute;
  top: 0vw;
  left: 0vw;
  width: 76vw;
  height: 1vw;
  border-radius: 0.5vw;
}
.page-Product .swiper-container .product-area .btn-area {
  position: relative;
  float: left;
  width: 100%;
  height: auto;
  padding: 2vw 4vw;
}
.page-Product .swiper-container .product-area .btn-area .product-btn {
  position: relative;
  float: left;
  margin-left: 4vw;
  width: 36vw;
  height: 20vw;
  text-align: center;
  padding: 4.5vw 0vw;
}
.page-Product .swiper-container .product-area .btn-area .product-btn:nth-child(1){
  margin-left: 0vw;
}
.page-Product .swiper-container .product-area .btn-area .product-btn i{
  font-size: 7vw;
  line-height: 4vw;
}
.page-Product .swiper-container .product-area .btn-area .product-btn h1{
  font-size: 4vw;
  font-weight: 900;
  line-height: 4vw;
}

.product-popuparea::-webkit-scrollbar {
    width: 0px;
}
.product-popuparea {
    position: relative;
    width: 80vw;
    height: 80vh;
    margin: 15vw auto;
    padding: 4vw;
    overflow-x: hidden;
    overflow-y: auto;
    color: #ebebeb;
}
.product-popuparea .channel-btn {
  position: relative;
  float: left;
  width: 100%;
  height: auto;
  font-size: 4vw;
  font-weight: 900;
  text-align: center;
  padding: 3vw;
  margin-top: 2vw;
}
.product-popuparea .part{
  position: relative;
  width: 100%;
  height: auto;
  font-weight: 900;
  color: #ebebeb;
  text-align: center;
  padding: 0vw 0vw 2vw 0vw ;
}
.product-popuparea .part .product-close {
  width: 10vw;
  height: 10vw;
  line-height: 10vw;
  text-align: center;
  font-size: 4vw;
  position: absolute;
  right: -3vw;
  top: -3vw;
}
.product-popuparea .name .title {
  font-size: 5vw;
  font-weight: 900;
  line-height: 8vw;
}
.product-popuparea .name input {
  font-size: 4vw;
  font-weight: 900;
  padding: 2vw;
  width: 100%;
  color: #ebebeb;
  text-align: center;
}
.product-popuparea .part .weui-cell {
  padding: 0vw 0vw !important;
  margin: 0vw 0vw 2vw 0vw !important;
}
.product-popuparea .part .weui-cell .weui-cell__hd {
  font-size: 3vw !important;
}
.product-popuparea .part .weui-cell .weui-cell__bd {
  text-align: left !important;
}
.product-popuparea .choose {
  padding: 2vw;
}
.product-popuparea .customer {
  position: relative;
  width: 100%;
  height: 30vw;
  padding-top: 4vw;
  text-align: center;
}
.product-popuparea .customer .title {
  position: relative;
  width: 100%;
  font-size: 4vw;
  font-weight: 900;
  margin-bottom: 2vw;
}
.product-popuparea .customer .block {
  position: relative;
  float: left;
  width: 22.6vw;
  height: auto;
  margin-right: 2vw;
  padding: 2vw 0vw;
}
.product-popuparea .customer .block:nth-child(3) {
  margin-right: 0vw;
}
.product-popuparea .customer .block h1 {
  position: relative;
  font-size: 5vw;
  font-weight: 900;
  margin-bottom: 0vw;
  line-height: 6vw;
}
.product-popuparea .customer .block h2 {
  position: relative;
  font-size: 3.3vw;
  font-weight: 400;
  margin-bottom: 0vw;
  line-height: 5vw;
}
.product-popuparea .customer .block h3 {
  position: relative;
  font-size: 3.3vw;
  font-weight: 400;
  margin-bottom: 0vw;
  line-height: 4vw;
}


.product-popuparea .price-setting {
  padding: 2vw 0vw;
  margin-top: 4vw;
  margin-bottom: 2vw;
}
.product-popuparea .price-setting .title {
  position: relative;
  width: 100%;
  text-align: center;
  font-size: 4vw;
  font-weight: 900;
  margin-bottom: 1vw;
}
.product-popuparea .price-setting .data1 {
  position: relative;
  float: left;
  width: 60%;
  padding-right: 2vw;
  height: 8vw;
  text-align: right;
}
.product-popuparea .price-setting .data {
  position: relative;
  height: 8vw;
  text-align: center;
  margin-bottom: 2vw;
}
.product-popuparea .price-setting .data1-1 {
  position: relative;
  font-size: 6vw;
}
.product-popuparea .price-setting .data3 {
  position: relative;
  float: left;
  width: 100%;
  padding-right: 2vw;
  height: 8vw;
  text-align: right;
}
.product-popuparea .price-setting .data3-1 {
  position: relative;
  width: 100%;
  text-align: center;
  font-size: 6vw;
}
.product-popuparea .price-setting .data2 {
  position: relative;
  float: left;
  width: 40%;
  height: 8vw;
}
.product-popuparea .price-setting .data2 .data2-1 {
  position: relative;
  font-size: 3.3vw;
  text-align: left;
  height: 4vw;
}
.product-popuparea .price-setting .data2 .data2-2 {
  position: relative;
  font-size: 3.3vw;
  height: 4vw;
  text-align: left;
}
.product-popuparea .keyboard-area {
  position: relative;
  float: left;
  width: 100%;
  height: auto;
  margin-top: 3vw;
}
.product-popuparea .keyboard {
  position: relative;
  float: left;
  width: 32%;
  margin-right: 2%;
  margin-bottom: 2vw;
  height: auto;
  padding: 3vw 0vw;
  text-align: center;
}
.product-popuparea .keyboard:nth-of-type(3n){
  margin-right: 0px;
}


.product-delete {
  position: absolute;
  right: 3vw;
  top: 1vw;
  font-size: 6vw;
  z-index: 5;
}

/* 广告管理界面 */

.ad-mgt-title {
    position: relative;
    float: left;
    text-align: center;
    width: 100vw;
    height: auto;
    padding: 2vw 0vw;
    color: #ebebeb;
    font-weight: 900;
    font-size: 4vw;
}

.weui-popup__overlay {
  z-index: 60;
}
.weui-popup__modal {
  z-index: 61;
}
.ad-mgt-area {
  position: relative;
  float: left;
  text-align: center;
  width: 100vw;
  max-height: 65vh;
  height:auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4vw 8vw 8vw 8vw;
}
.ad-mgt-title-close {
  position: absolute;
  right: 3vw;
  top: 2vw;
  font-size: 6vw;
}
.new-ad {
    position: relative;
    float: left;
    width: 100%;
    font-size: 4vw;
    font-weight: 900;
    color: #ebebeb;
    padding: 2.5vw 0vw;
    cursor: pointer;
}
.ad-mgt-area .weui-cells {
  position: relative;
  float: left;
  width: 100%;
}
.ad-mgt-area .weui-cell__bd {
  color: #ebebeb;
}
.ad-mgt-area .weui-cell__bd {

}



/* OB界面 */
.ob-page {
  height: 100vh;
  width: 132vh;
  position: relative;
  margin: 0vh auto;
  padding: 0vh 4vh;
}
.ob-page-mobile {
  height: 100vh;
  width: 100vw;
  padding: 0vh;
}
.ob-info {
  position: relative;
  float: left;
  width: 132vh;
  margin-left: -4vh;
  height: 4vh;
  margin-bottom: 2vh;
  font-size: 1.8vh;
  font-weight: 900;
  text-align: center;
}
.ob-info-mobile {
  width: 100%;
  margin-left: 0vw;
}
.ob-info div{
  position: relative;
  display: inline-block;
  padding: 0vh 5vh;
  line-height: 4vh;
}
.ob-info-mobile div{
  position: relative;
  display: inline-block;
  padding: 0vh 2vw;
  line-height: 4vh;
}
.ob-section-1 {
  position: relative;
  float: left;
  width: 60vh;
  height: 60vh;
  overflow: hidden;
  margin: 0vh 2vh 2vh 0vh;
}
.ob-section-1-mobile {
  width: 96vw;
  height: 96vw;
  margin-left: 2vw;
}
.ob-radius {
  -webkit-border-radius: 1.5vh;
  -moz-border-radius: 1.5vh;
  -ms-border-radius: 1.5vh;
  -o-border-radius: 1.5vh;
  border-radius: 1.5vh;
}
.ob-section-1 .map {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0%;
  top: 0%;
  background-image: url(/images/areasBack2.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
}
.ob-section-2 {
  position: relative;
  float: left;
  width: 62vh;
  height: 60vh;
  overflow: hidden;
  padding: 2vh 3vh;
  margin-bottom: 2vh;
}
.ob-section-2-mobile {
  width: 96vw;
  height: 96vw;
  margin-left: 2vw;
}
.ob-section-2 .blcok{
  position: relative;
  float: left;
  width: 100%;
}
.ob-section-2 .block:nth-child(2n) {
  background-color: #080808;
}
.ob-section-2 .block p { 
  position: relative;
  float: left;
  width: 14.2%; 
  text-align: center;
  font-size: 1.7vh;
  margin-bottom: 0.25vh;
  white-space: nowrap;
}
.ob-section-2 .rank-title {
  font-weight: 900;
}
.ob-section-2 .block p:nth-child(1) { width: 20%; text-align: left;}
.ob-section-2 .block p:nth-child(2) { width: 17.5%; }
.ob-section-2 .block p:nth-child(3) { width: 17.5%; }
.ob-section-2 .block p:nth-child(4) { width: 8%; color: #01CB99; }
.ob-section-2 .block p:nth-child(5) { width: 8%; color: #D04957;}
.ob-section-2 .block p:nth-child(6) { width: 17%; }
.ob-section-2 .block p:nth-child(7) { width: 12%; text-align: right; }
.ob-section-3 {
  position: relative;
  float: left;
  width: 60vh;
  height: 28vh;
  overflow: hidden;
  padding: 2vh 2vh;
  margin-right: 2vh;
}
.ob-section-3-mobile {
  width: 96vw;
  height: 40vw;
  margin-left: 2vw;
  margin-bottom: 2vw;
}
.ob-section-3 .blcok{
  position: relative;
  float: left;
  width: 100%;
}
.ob-section-3 .block:nth-child(2n) {
  background-color: #080808;
}
.ob-section-3 .block span { 
  position: relative;
  float: left;
  width: 14.2%; 
  text-align: center;
  font-size: 1.7vh;
  margin-bottom: 0.25vh;
  height: 2.7vh;
}
.ob-section-3 .rank-title {
  font-weight: 900;
}
.ob-section-3 .comp-color {
  position: relative;
  margin: 0.3vh auto;
  width: 2vh;
  height: 2vh;
  background-color: white;
}
.ob-section-3 .block span:nth-child(1) { width: 15%;}
.ob-section-3 .block span:nth-child(2) { width: 35%; text-align: left;}
.ob-section-3 .block span:nth-child(3) { width: 15%; }
.ob-section-3 .block span:nth-child(4) { width: 35%; text-align: right;}

.ob-section-3-mobile .block span:nth-child(1) { width: 20%;}
.ob-section-3-mobile .block span:nth-child(2) { width: 30%; text-align: left;}
.ob-section-3-mobile .block span:nth-child(3) { width: 15%; }
.ob-section-3-mobile .block span:nth-child(4) { width: 35%; text-align: right;}

.ob-section-4 {
  position: relative;
  float: left;
  width: 62vh;
  height: 28vh;
  overflow: hidden;
  padding: 2vh 4vh;
}
.ob-section-4-mobile {
  width: 96vw;
  height: 60vw;
  margin-left: 2vw;
}
.ob-section-4 .customer-title {
  position: relative;
  float: left;
  width: 100%;
  height: 6vh;
  text-align: center;
  font-size: 3vh;
  font-weight: 900;
}
.ob-section-4 .customer {
  position: relative;
  float: left;
  height: 18vh;
  width: 16vh;
  margin-right: 2vh;
  text-align: center;
  padding-top: 3.3vh;
}
.ob-section-4 .customer:nth-child(3n+1) {margin-right: 0vh;}
.ob-section-4 .customer h1{
  position: relative;
  font-size: 2vh;
  font-weight: 900;
}
.ob-section-4 .customer h2{
  position: relative;
  font-size: 1.7vh;
  font-weight: 400;
}
.ob-section-4 .customer h3{
  position: relative;
  font-size: 1.7vh;
  font-weight: 400;
}
.ob-section-4 .customer h4{
  position: relative;
  font-size: 1.7vh;
  font-weight: 400;
}

/* Gamedone.html */
.gamedone-bg {
  position: absolute;
  left: 0vw;
  height: 0vw;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,0.5);
}
.gamedone-area {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
}
.gamedone-area .swiper-container {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
}
.gamedone-area .swiper-container .swiper-slide {
  position: relative;
  width: 70vw !important;
  height: 70vh;
  margin: 10vh 15vw 0vh 15vw;
  padding: 4vw;
}
.gamedone-area .swiper-slide .page-1 .section-1 {
  position: relative;
  float: left;
  width: 100%;
  text-align: center;
  margin-bottom: 4vw;
  margin-top: 4vw;
}
.gamedone-area .swiper-slide .page-1 .section-1 i{
  position: relative;
  font-size: 15vw;
  line-height: 18vw;
}
.gamedone-area .swiper-slide .page-1 .section-1 h1{
  position: relative;
  font-size: 3.3vw;
  line-height: 4vw;
  margin-bottom: 2vw;
  font-weight: 900;
}
.gamedone-area .swiper-slide .page-1 .section-1 h2{
  position: relative;
  font-size: 4vw;
  line-height: 4vw;
  margin-bottom: 1vw;
  font-weight: 900;
}
.gamedone-area .swiper-slide .page-1 .section-1 h3{
  position: relative;
  font-size: 3.3vw;
  line-height: 4vw;
  margin-bottom: 1vw;
  font-weight: 400;
}
.gamedone-area .swiper-slide .page-1 .section-2 {
  position: relative;
  float: left;
  width: 100%;
  text-align: center;
  margin-bottom: 4vw;
}
.gamedone-area .swiper-slide .page-1 .section-2 .block {
  position: relative;
  float: left;
  width: 47%;
  margin-right: 6%;
  margin-bottom: 4vw;
  padding: 4vw 0vw;
  text-align: center;
}
.gamedone-area .swiper-slide .page-1 .section-2 .block:nth-child(2n){
  margin-right: 0vw;
}
.gamedone-area .swiper-slide .page-1 .section-2 .block h1{
  position: relative;
  font-size: 5vw;
  line-height: 5vw;
  margin-bottom: 2vw;
  font-weight: 900;
}
.gamedone-area .swiper-slide .page-1 .section-2 .block h2{
  position: relative;
  font-size: 3.3vw;
  line-height: 4vw;
  margin-bottom: 1vw;
  font-weight: 900;
}
.gamedone-area .swiper-slide .page-1 .section-2 .block h3{
  position: relative;
  font-size: 3vw;
  line-height: 4vw;
  font-weight: 400;
}
.gamedone-area .swiper-slide .page-2 .block {
  position: relative;
  float: left;
  margin-bottom: 2vw;
  width: 100%;
  height: 15vw;
  padding: 1vw;
}
.gamedone-area .swiper-slide .page-2 .block .block-l {
  position: relative;
  float: left;
  height: 100%;
  width: 15%;
  text-align: center;
}
.gamedone-area .swiper-slide .page-2 .block .block-l i{
  font-size: 10vw;
  line-height: 13vw;
}
.gamedone-area .swiper-slide .page-2 .block .block-r {
  position: relative;
  float: left;
  height: 100%;
  width: 85%;
  text-align: right;
}
.gamedone-area .swiper-slide .page-2 .block .block-r .block-r-1 {
  position: relative;
  float: left;
  height: 50%;
  width: 100%;
  text-align: right;
  font-size: 4vw;
  font-weight: 900;
  line-height: 7.5vw;
  padding-right: 1vw;
}
.gamedone-area .swiper-slide .page-2 .block .block-r .block-r-2 {
  position: relative;
  float: left;
  height: 50%;
  width: 100%;
  text-align: right;
  font-size: 3.3vw;
  font-weight: 400;
  line-height: 5vw;
  padding-right: 1vw;
}

.gamedone-area .swiper-slide .page-2 .blockb {
    position: relative;
    float: left;
    margin-bottom: 2vw;
    width: 100%;
    height: 21vw;
    padding: 1vw;
}

.gamedone-area .swiper-slide .page-2 .blockb .block-l {
    position: relative;
    float: left;
    height: 100%;
    width: 15%;
    text-align: center;
}

.gamedone-area .swiper-slide .page-2 .blockb .block-l i {
    font-size: 10vw;
    line-height: 13vw;
}
.gamedone-area .swiper-slide .page-2 .blockb .block-r {
    position: relative;
    float: left;
    height: 100%;
    width: 85%;
    text-align: right;
}

.gamedone-area .swiper-slide .page-2 .blockb .block-r .block-r-1 {
    position: relative;
    float: left;
    height: 40%;
    width: 100%;
    text-align: right;
    font-size: 4vw;
    font-weight: 900;
    line-height: 7.5vw;
    padding-right: 1vw;
}

.gamedone-area .swiper-slide .page-2 .blockb .block-r .block-r-2 {
    position: relative;
    float: left;
    height: 30%;
    width: 100%;
    text-align: right;
    font-size: 3.3vw;
    font-weight: 400;
    line-height: 5vw;
    padding-right: 1vw;
}
.gamedone-area .swiper-slide .page-3 .section-1 {
  position: relative;
  float: left;
  width: 100%;
  text-align: center;
  margin-bottom: 4vw;
}
.gamedone-area .swiper-slide .page-3 .section-1 .block {
  position: relative;
  float: left;
  width: 47%;
  margin-right: 6%;
  margin-bottom: 4vw;
  padding: 4vw 0vw;
  text-align: center;
}
.gamedone-area .swiper-slide .page-3 .section-1 .block:nth-child(2n){
  margin-right: 0vw;
}
.gamedone-area .swiper-slide .page-3 .section-1 .block h1{
  position: relative;
  font-size: 5vw;
  line-height: 5vw;
  margin-bottom: 2vw;
  font-weight: 900;
}
.gamedone-area .swiper-slide .page-3 .section-1 .block h2{
  position: relative;
  font-size: 3.3vw;
  line-height: 4vw;
  margin-bottom: 1vw;
  font-weight: 900;
}
.gamedone-area .swiper-slide .page-3 .section-1 .block h3{
  position: relative;
  font-size: 3vw;
  line-height: 4vw;
  font-weight: 400;
}

.gamedone-close {
  position: absolute;
  width: 10vw;
  height: 10vw;
  left: 45vw;
  top: 82vh;
  text-align: center;
  z-index: 2;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}
.gamedone-close i{
  position: relative;
  line-height: 10vw;
  text-align: center;
  font-size: 5vw;
  color: #ebebeb;
}

.comp-popuparea {
    position: relative;
    width: 90vw;
    height: 70vh;
    margin: 15vw auto;
    padding: 8vw 4vw 4vw 4vw;
    overflow-x: hidden;
    overflow-y: auto;
    color: #ebebeb;
}
.comp-popuparea i{
  position: absolute;
  right: 2vw;
  top: 2vw;
}
.comp-popuparea .partbox {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
}
.comp-popuparea .partbox .block{
  position: relative;
  float: left;
  width: 40vw;
  height: 31vw;
  padding: 2vw;
  overflow: hidden;
  margin-top: 2vw;
}
.comp-popuparea .partbox .block:nth-child(2n) {
  margin-left: 2vw;
}
.comp-popuparea .partbox .block p { 
  position: relative;
  float: left;
  font-size: 3.3vw;
  white-space: nowrap;
  line-height: 5vw;
}
.comp-popuparea .partbox .rank-title {
  font-weight: 900;
}
.comp-popuparea .partbox .block h1 {
  position: relative;
  float: left;
  width: 36vw;
  font-size: 4vw;
  white-space: nowrap;
  line-height: 6vw;
}
.comp-popuparea .partbox .block h2 {
  position: relative;
  float: left;
  font-size: 4vw;
  white-space: nowrap;
  line-height: 5vw;
  margin-top: 1vw;
}
.comp-popuparea .partbox .block h2:nth-of-type(1){ text-align: left; width: 12vw; }
.comp-popuparea .partbox .block h2:nth-of-type(2){ text-align: left; width: 12vw; }
.comp-popuparea .partbox .block h2:nth-of-type(3){ text-align: right; width: 12vw; }
.comp-popuparea .partbox .block h2:nth-of-type(4){ text-align: left; width: 10vw; color: #01CB99;}
.comp-popuparea .partbox .block h2:nth-of-type(5){ text-align: left; width: 10vw; color: #D04957;}
.comp-popuparea .partbox .block h2:nth-of-type(6){ text-align: right; width: 16vw; }
.comp-popuparea .partbox .block p:nth-of-type(1){ text-align: left; width: 12vw; }
.comp-popuparea .partbox .block p:nth-of-type(2){ text-align: left; width: 12vw; }
.comp-popuparea .partbox .block p:nth-of-type(3){ text-align: right; width: 12vw; }
.comp-popuparea .partbox .block p:nth-of-type(4){ text-align: left; width: 10vw; color: #01CB99;}
.comp-popuparea .partbox .block p:nth-of-type(5){ text-align: left; width: 10vw; color: #D04957;}
.comp-popuparea .partbox .block p:nth-of-type(6){ text-align: right; width: 16vw; }

.challengeintro {
  position: relative;
  float: left;
  width: 100%;
  padding-bottom: 3vw;
  margin-bottom: 5vw;
  padding-top: 3vw;
  border-bottom: 2px solid #FFFFFF;
  text-align: left;
}
.challengeintro h1{
  font-size: 4.2vw;
  color: #EBEBEB;
  margin-bottom: 1vw;
  font-weight: 900;
}
.challengeintro h2{
  font-size: 3.6vw;
  color: #EBEBEB;
  margin-bottom: 1vw;
  font-weight: 600;
}
.challengeintro p{
  font-size: 3.3vw;
  color: #EBEBEB;
  margin-bottom: 0.5vw;
}
.starsettingintro {
  position: relative;
  float: left;
  width: 100%;
  padding-bottom: 3vw;
  padding-top: 3vw;
  border-top: 2px solid #FFFFFF;
  border-bottom: 2px solid #FFFFFF;
  text-align: left;
}
.starsettingintro h1{
  font-size: 4.2vw;
  color: #EBEBEB;
  margin-bottom: 1vw;
  font-weight: 900;
}
.starsettingintro h2{
  font-size: 3.3vw;
  color: #EBEBEB;
  margin-top: -0.5vw;
  margin-bottom: 1vw;
  font-weight: 400;
}
.starsettingintro p{
  font-size: 3.3vw;
  color: #EBEBEB;
  margin-bottom: 0.5vw;
}
.quickaction-block-setting {
  position: relative;
  float: left;
  width: 25.33vw;
  height: 25.33vw;
  overflow: hidden;
  margin-right: 4vw;
  text-align: center;
  padding-top: 5vw;
  margin-bottom: 5vw;
}
.quickaction-block-setting i{
  position: relative;
  font-size: 6vw;
  line-height: 6vw;
  height: 12vw;
}
.quickaction-block-setting h1{
  position: relative;
  font-size: 4vw;
  font-weight: 900vw;
  line-height: 5vw;

}
.quickaction-block-setting:nth-child(3n){
  margin-right: 0vw;
}
.obmobile-btn {
  position: absolute;
  width: 96vw;
  bottom: 10vw;
  left: 2vw;
  margin-top: 6vw;
  text-align: center;
  padding: 2vw 0vw;
  font-weight: 900;
  font-size: 4vw;
  z-index: 100;
}

.challenge-mode {
  width: 100%;
  position: relative;
  float: left;
  height: auto;
  padding: 3vw;
  text-align: left;
  padding-left: 8vw;
  margin-bottom: 3vw;
  overflow: hidden;
}
.challenge-mode-half {
  position: relative;
  float: left;
  width: 48%;
  margin-right: 4%;
}
.challenge-mode-half:nth-of-type(2){
  margin-right: 0px;
}
.challenge-mode-btn {
  cursor: pointer;
  text-align: center;
  padding-left: 3vw;
}
.rank-num {
  position: absolute;
  font-size: 20vw;
  top: -7.5vw;
  left: 0vw;
  font-weight: 900;
  font-style: italic;
  width: 100%;
  text-align: center;
}
.rank-num-gray {
  color: rgba(235,235,235,0.4);
}
.rank-num2 {
  position: absolute;
  font-size: 20vw;
  top: -7.5vw;
  left: 3vw;
  font-weight: 900;
  font-style: italic;
  width: 80%;
  text-align: center;
}
.rank-num2-gray {
  color: rgba(235,235,235,0.4);
}
.challenge-mode-color {
  position: absolute;
  left: 3vw;
  width: 2vw;
  top: 4.2vw;
  border-radius: 1vw;
  height: 40vw;
}
.challenge-mode h1 {
  font-size: 4.2vw;
  margin-bottom: 0.5vw;
}
.challenge-mode h2 {
  font-size: 3.3vw;
  margin-top: 3vw;
  margin-bottom: 0.5vw;
}
.challenge-mode h3 {
  font-size: 3.3vw;
  margin-bottom: 0.5vw;
}
.challenge-mode h4 {
  font-size: 3.3vw;
  margin-bottom: 0.5vw;
  font-weight: 400;
}
.challenge-mode p {
  font-size: 3.3vw;
  margin-bottom: 0.5vw;
}
.challenge-mode p:last-of-type{
  margin-bottom: 15vw;
}
.challenge-btn {
  position: absolute;
  height: 12vw;
  width: 100%;
  left: 0px;
  bottom: 0px;
  text-align: center;
  font-size: 4.2vw;
  font-weight: 900;
  line-height: 12vw;
  -webkit-border-radius: 0vw 0vw 2vw 2vw ;
  -moz-border-radius: 0vw 0vw 2vw 2vw ;
  -ms-border-radius: 0vw 0vw 2vw 2vw ;
  -o-border-radius: 0vw 0vw 2vw 2vw ;
  border-radius: 0vw 0vw 2vw 2vw ;
  cursor: pointer;
}
::-webkit-scrollbar{width:0px;height:0px;background-color:rgb(228, 232, 235)}
::-webkit-scrollbar-track{border-radius:6px;background-color:rgba(246,248,249,1);-webkit-box-shadow:inset 0 0 6px transparent}
::-webkit-scrollbar-thumb{border-radius:6px;background-color:rgb(228, 232, 235);-webkit-box-shadow:inset 0 0 6px transparent}

.star-off {
  color: rgba(255,255,255,0.4);
}
.challenge-lock {
  position: absolute;
  right: 3vw;
  top: 2.5vw;
  font-size: 4.2vw;
  font-weight: 900;
}
.challenge-lock i {
  font-size: 5vw !important;
}
.newrecord {
  position: absolute;
  left: -20px;
  top: -20px;
  font-size: 100px !important;
  transform:rotate(-30deg);
  -ms-transform:rotate(-30deg);   /* IE 9 */
  -moz-transform:rotate(-30deg);  /* Firefox */
  -webkit-transform:rotate(-30deg); /* Safari 和 Chrome */
  -o-transform:rotate(-30deg);  /* Opera */
  z-index: 150;
}
.rank-data {
  margin-top: -0.5vw;
  font-size: 3vw !important;
}
.rank-data2 {
  margin-top: 3.5vw;
  font-size: 3vw !important;
}
.rank-data2 i{
  font-size: 3vw !important;
}