

/*html, body{-webkit-overflow-scrolling:touch;}*/
html, body { background-color:#fff;}
.refresh_btn{width: 36px;height: 36px;background: url(/static/images/webapp/m/g_data/refresh.png) no-repeat; background-size: 36px auto;position: fixed;top: 87%;right: 3%;z-index:199}
/* top part */
.header{position:relative;z-index: 7;background:#37516e url('../images/head_bg.jpg') no-repeat center top; background-size: 100%;overflow:hidden;}
.top_nav{width: 100%;height:40px;color: #fff; text-align: center; display: inline-block;}
.top_nav_left{width:15%;float:left;}
.top_nav_left span{display:inline-block;width:12px;height:22px;background:url(/static/images/webapp/m/g_data/bn_prev.png) no-repeat 0 0;background-size:10px;position: relative; top: 12px; right: 6px;}
.top_nav_center{width:70%;float:left;
    transition:all 0.5s ease;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;
}
.animate_top .top_nav_center{
    opacity:0;
    transition:all 0.5s ease;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;
}
.top_nav_center div{position: relative; top: 13px; font-size: 12px;}
.top_nav_right{width:15%;float:right;}
.top_nav_right span{width:23px;height:23px;margin: 10px; background: url(/static/images/webapp/m/g_data/bn_gameOptions.png) no-repeat center center; border-radius:12px; display: inline-block;background-size:18px;}
.top_nav_right span.top_fav{background-image: url(/static/images/webapp/m/g_data/bn_gameOptions_hover.png)}



    /* center part */
.center_time{color:#a1a1a4;font-size:12px;line-height:14px;text-align:center;
    transition:all 0.5s ease;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;
}
.animate_con .center_time{
    opacity:0;
    transform:translate(0,-20px);-webkit-transform:translate(0,-20px);-moz-transform:translate(0,-20px);-o-transform:translate(0,-20px);
    transition:all 0.5s ease;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;
}
.center_part{text-align: center;min-height: 100px}
.game_btn{font-size:0;text-align: center;position: relative;height: 12px}
.game_btn div{position: absolute;width: 100%;top:-6px;left:0;}
.game_btn a{ border-radius:2px;position: relative;margin: 0 8px;height: 18px;padding-right: 18px;display: inline-block;vertical-align: top;line-height: 16px;font-size: 12px;color: #fff;padding-left: 8px;}
.game_btn a.red{background:#ff2536;}
.game_btn a.green{background: #36d257}
.game_btn a:after{position: absolute;content: '';display: block;top:50%;margin-top:-4px;right:2px;width:0;height: 0;border:4px solid transparent;border-left:8px solid #fff;}
.animate_btn{opacity: 0}

.center_content{width: 100%;text-align: center; display: inline-block;vertical-align: top;font-size: 0}
.team_home, .team_away{display: inline-block;vertical-align: top; width: 26%;}
.team_img{width: 40px; height: 40px;border-radius: 51px; border: 1px solid #3e434e; display: inline-block;overflow:hidden;
    transition:all 0.5s ease;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;
}
.team_img span{display:inline-block;width:38px;height:38px;line-height:normal;background:#fff;border-radius:43px;vertical-align:middle;overflow:hidden;
    transition:all 0.5s ease;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;
}
.team_img img{border-radius:50%;vertical-align:middle;}
.team_name{color: #fff; line-height: 12px; font-size: 12px;
    transition:all 0.5s ease;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;
}
.team_name span{display: block; font-size: 12px; margin: 2px 0; color: #ffffff;padding-top: 6px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: -o-ellipsis-lastline; overflow: hidden;}

.animate_home .team_img{
    /*width:34px;height:34px;border-radius:34px;
    transform:translate(46px,-41px);-webkit-transform:translate(46px,-41px);-moz-transform:translate(46px,-41px);-o-transform:translate(46px,-41px);
    transition:all 0.5s ease;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;*/
    display: none;
}
.animate_home .team_img span, .animate_away .team_img span{
    width: 26px;height:26px;border-radius: 26px;
    transition:all 0.5s ease;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;
}
.animate_home .team_name{
    transform:translate(24px,-48px);-webkit-transform:translate(24px,-46px);-moz-transform:translate(24px,-46px);-o-transform:translate(24px,-46px);
    transition:all 0.5s ease;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;
}

.animate_home .team_name span{
    font-size: 13px;-webkit-line-clamp:1;
}

.animate_away .team_img{
    /*width:34px;height:34px;border-radius:34px;
    transform:translate(-46px,-41px);-webkit-transform:translate(-46px,-41px);-moz-transform:translate(-46px,-41px);-o-transform:translate(-46px,-41px);
    transition:all 0.5s ease;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;*/
    display:none;
}
.animate_away .team_name{
    transform:translate(-24px,-48px);-webkit-transform:translate(-24px,-46px);-moz-transform:translate(-24px,-46px);-o-transform:translate(-24px,-46px);
    transition:all 0.5s ease;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;
}

.animate_away .team_name span{
    font-size: 13px;-webkit-line-clamp:1;
}

.time_content{position: relative;display: inline-block;vertical-align: top; width: 42%; text-align: center;}
.vs{position: absolute;opacity: 0;font-size: 20px;color:#fff;font-weight: bolder}
.animate_con .vs{position: relative;opacity: 1;transform:translate(0px,-44px);-webkit-transform:translate(0px,-44px);-moz-transform:translate(0px,-44px);-o-transform:translate(0px,-44px);
    transition:all 0.5s ease;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;}

.time{padding-top:12px;margin: 0 auto;color: #fff; line-height: 20px; font-size: 12px;color:rgba(255,255,255,0.5);transition:all 0.4s linear;-webkit-transition:all 0.4s linear;-moz-transition:all 0.4s linear;-o-transition:all 0.4s linear;
}
.time p{color:#fff;font-size: 18px;line-height: 24px}

.animate_con .time{
    transform:translate(0,-34px);-webkit-transform:translate(0,-34px);-moz-transform:translate(0,-34px);-o-transform:translate(0,-34px);
    transition:all 0.4s linear;-webkit-transition:all 0.4s linear;-moz-transition:all 0.4s linear;-o-transition:all 0.4s linear;
}
/* have text live */
.game_over{width: 60px; margin: 0 auto; color: #a1a1a4; line-height: 14px; padding-bottom:5px;margin-bottom:5px;border-bottom: 1px solid #434956; font-size: 14px;
    transition:all 0.5s ease;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;
}
.animate_con .game_over{
    transform:translate(0,-60px);-webkit-transform:translate(0,-60px);-moz-transform:translate(0,-60px);-o-transform:translate(0,-60px);
    opacity:0;
    transition:all 0.5s ease;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;
}
.game_score1{color: #fff; font-size: 0px;
    transition:all 0.4s linear;-webkit-transition:all 0.4s linear;-moz-transition:all 0.4s linear;-o-transition:all 0.4s linear;
}
.game_score1 span{display: inline-block;vertical-align: middle;font-size: 30px}
.game_score1 span.center{width:46px;margin:0 10px;font-size:12px;border:1px solid #fff;border-radius: 200px;background:rgba(255,255,255,0.5);}
.game_score1 span.center2{margin:0 8px;font-size: 20px;display: none}
.animate_con .game_score1 span.center{display: none}
.animate_con .game_score1 span.center2{display: inline}

.animate_con .game_score1{
    transform:translate(0,-50px);-webkit-transform:translate(0,-50px);-moz-transform:translate(0,-50px);-o-transform:translate(0,-50px);
    transition:all 0.4s linear;-webkit-transition:all 0.4s linear;-moz-transition:all 0.4s linear;-o-transition:all 0.4s linear;
}
.game_score2{color: #a1a1a4; line-height: 14px; font-size: 12px;padding-top:10px;
    transition:all 0.4s linear;-webkit-transition:all 0.4s linear;-moz-transition:all 0.4s linear;-o-transition:all 0.4s linear;
}
.animate_con .game_score2{
    opacity:0;
    transform:translate(0,-40px);-webkit-transform:translate(0,-40px);-moz-transform:translate(0,-40px);-o-transform:translate(0,-40px);
    transition:all 0.4s linear;-webkit-transition:all 0.4s linear;-moz-transition:all 0.4s linear;-o-transition:all 0.4s linear;
}

.game_live{ z-index: 1000; display:inline-block; margin-top: -16px; margin-left: -12px; position: absolute; width:24px;height:12px;background:url(/static/images/webapp/m/live/live_red.png) no-repeat; background-size:24px 10px;vertical-align:middle;}
.game_live.over{background:url(/static/images/webapp/m/live/live_blur.png) no-repeat; background-size:24px 10px;}
.animate_con .game_live{
    opacity:0;
    display:none !important;
    transform:translate(0,-40px);-webkit-transform:translate(0,-40px);-moz-transform:translate(0,-40px);-o-transform:translate(0,-40px);
    transition:all 0.4s linear;-webkit-transition:all 0.4s linear;-moz-transition:all 0.4s linear;-o-transition:all 0.4s linear;
}
.play_button{display:inline-block;width:45px;height:45px;margin-top:10px;border-radius:45px;border:2px solid #fff;background:#1da664 url(/static/images/webapp/m/g_data/bn_play.png) no-repeat center center;background-size:13px 15px;}
.game_tip{width:90%;margin:0 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color: #a1a1a4; line-height: 24px; font-size: 12px;}
.score_show{color: rgba(255,255,255,0.5); font-size: 12px; text-align: center; padding: 8px 16px;}

/* 秒表 */
#time_hightchart{width:100px;height:125px;margin:-32px auto -30px;}
.VSLogo{line-height:56px;font-size:26px;color:#fff;
    transition:all 0.4s linear;-webkit-transition:all 0.4s linear;-moz-transition:all 0.4s linear;-o-transition:all 0.4s linear;
}
.animate_con .VSLogo{
    font-size:20px;
    transform:translate(0,-50px);-webkit-transform:translate(0,-50px);-moz-transform:translate(0,-50px);-o-transform:translate(0,-50px);
    transition:all 0.4s linear;-webkit-transition:all 0.4s linear;-moz-transition:all 0.4s linear;-o-transition:all 0.4s linear;
}

.game_replay{background:url(/static/images/webapp/m/g_data/bn_bg.png) no-repeat;background-size:100%;background-position:center 38px;}

/* nav */
.bottom_part_nav { z-index: 7; width: 100%; background-color: #fff; position: relative; overflow: hidden;border-bottom: 1px solid #b2b2b2 }
.bottom_part_nav ul{font-size: 0;height: 38px;text-align: center;}
.bottom_part_nav ul li{display: inline-block;vertical-align: top;width: 25%;height: 38px}
.bottom_part_nav ul li a{display: block;margin:0 10px;color:#333333;font-weight:bolder;font-size:15px;height:38px;line-height: 38px}
.bottom_part_nav ul li.on a{color:#2a5c96;border-bottom:2px solid #2a5c96;}
.bottom_part_nav ul li a.hotSign{background:url('../images/icon_hot.png') no-repeat 90% center;background-size: 12px}
/* bottom part */
.bottom_part{clear:both;width:100%;position:relative;overflow-y:scroll;-webkit-overflow-scrolling:touch;}
.tabBox{min-height: 100%;background: #fff}
/*.bottom_part iframe{min-height:505px;}*/
.innerTab{background:#fff;padding: 8px 12px;border-bottom: 1px solid #dcdcdc}
.innerTab ul{font-size: 0;text-align: center;border:1px solid #295b96;border-radius: 3px;display:flex;}
.innerTab ul li{vertical-align: top;border-right: 1px solid #295b96;flex:1;}
.innerTab ul li:last-child{border-right:none;}
.innerTab ul li a{color:#295b96;font-size: 13px;display: block;height: 22px;line-height: 22px}
.innerTab ul li.on a{color:#fff;background: #295b96}
.innerTab ul.fourCol li{width: 25%}


.wuChart{box-sizing: initial;-webkit-box-sizing: initial;-moz-box-sizing:initial;-o-box-sizing:initial; width: 54px;height:54px;margin: 0 auto;border:5px solid #2b354a;border-radius: 1000px;position: relative;}
.wuChart svg{width: 100%;height: 100%;}
.wuChart span{font-size: 20px;color: #fff; position:absolute;top:49%;left:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}
.not_over{background: none;}
.not_over_box{top:66%;}
/*20170915-c*/
#not_con_info .not_over_box{top:120px;}
/* guessicon.png */
.guessing_a{width: 44px;height: 44px;position: fixed;right: 10px;bottom:74px;z-index: 99;}
.guessing_a a,
.guessing_a a img{display: block;width: 44px;height: 44px;}
.refresh_btn{top:auto;bottom:30px;}
/* 弹出框 */
.popBox{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);z-index: 400;}
.popBoxBackground{width: 95%; position: absolute;  /* padding: 0 20px; */  bottom: 0%; left: 50%;  transform: translate(-50%,  0%);    -webkit-transform: translate(-50%, 0%);    -moz-transform: translate(-50%,  0%);    -o-transform: translate(-50%,  0%);    -ms-transform: translate(-50%,  0%);}
.popBoxtop{ background-color: #ececec; border-radius: 0.3125rem; padding-bottom: 4%;}
.popBoxList{width: 100%; display: flex;justify-content:flex-start;    flex-wrap: wrap;  padding:  2%;}
.popBoxList li{ width: 46%; height: 2.5rem; line-height: 2.5rem; text-align: center;list-style-type:none;flex-wrap: wrap; border: 1px solid #cfcfcf; background: #fff; margin: 2%;    font-size: 1rem;overflow: hidden;white-space: nowrap;    text-overflow: ellipsis;    padding: 0 1%;}
.popBoxText{text-align: center;color: #999999;    margin-top: 2%;font-size: .9rem;}
.popBoxShare{text-align: center;color: #333333;    width: 94%;    height: 2.5rem;    line-height: 2.5rem;    list-style-type: none;    flex-wrap: wrap;    border: 1px solid #cfcfcf;    background: #fff;    margin: 2% auto 0 auto;    font-size: 1rem;}
.popBoxCancle{text-align: center;color: #157efb; font-size: 1.1rem; height: 2.5rem;  line-height: 2.5rem; background: #ececec; border: 1px solid #cfcfcf;    margin: 3% 0;border-radius: 0.3125rem;}
.p_box {position: absolute; background-color: #fff; border-radius: 0.3125rem; z-index: 401; /* padding: 0 20px; */ width: 86%;  background-color: rgba(0, 0, 0, 0.8);    padding: 2rem;    font-size: 1.5rem;    color: #ffffff;    text-align: center;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);    -webkit-transform: translate(-50%, -50%);    -moz-transform: translate(-50%, -50%);    -o-transform: translate(-50%, -50%);    -ms-transform: translate(-50%, -50%);}

.noneBox{background:#fff url(/static/images/webapp/m/load/ball_update.png) no-repeat 58% center;background-size: 36%;padding-top: 36%}
.noneBox p{color: #898989;font-size: 12px;text-align: center;}
@media screen and (min-width: 374px) and (max-width: 479px) {
    
}

@media screen and (min-width: 480px) and (max-width: 639px) {

}

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

}
@media screen and (orientation: portrait) {
    /*竖屏 css*/
    html, body {overflow:hidden;}
}
@media screen and (orientation: landscape) {
    /*横屏 css*/
    html, body {overflow:visible;}
}
/* 解决iphone横屏时字体变大问题或者内容大小不一样 */
@media screen and (max-device-width: 320px){body{-webkit-text-size-adjust:none}}
@media screen and (max-device-width: 480px){body{-webkit-text-size-adjust:none}}
@media only screen and (-webkit-min-device-pixel-ratio: 2){body{-webkit-text-size-adjust:none}}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px){body{-webkit-text-size-adjust:none}}

