/*--------reset---------*/

* {
    margin: 0;
    padding: 0;
}

body,
p,
h1,
h2,
h3,
ul,
li,
ol,
button,
input,
form,
label,
div,
h4,
span {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

button,
input,
select {
    border: none;
    outline: none;
}

ol,
ul {
    list-style: none;
    overflow: hidden;
}

a {
    text-decoration: none;
    position: relative;
}

a,
button,
input,
div {
    -webkit-tap-highlight-color: rgba(255, 0, 0, 0);
}

em,
i {
    font-style: normal;
}

ul a {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}

html,
body {
    height: 100%;
}

body img {
    max-width: 100%;
}

body {
    font-family: "Microsoft YaHei";
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    font-size: 12px;
    background-color: #181a1b
}

.container {
    height: 100%;
    overflow: hidden;
    padding-left: 0;
    padding-left: constant(safe-area-inset-left);
    padding-left: env(safe-area-inset-left);
}

.sp {
    background: url(http://game.gtimg.cn/images/hyrz/ingame/v2017/icon.png) no-repeat;
    background-size: 3.9rem auto;
}

.of {
    overflow: hidden;
}


/* main-nav */

#live-iframe {
    height: 6rem;
    margin-top: 0.64rem;
}

.main-nav {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 1rem;
    background: url(http://game.gtimg.cn/images/hyrz/ingame/v2017/bg-nav.jpg) repeat-y;
    background-size: 1rem;
    overflow: hidden;
    bottom: 0;
    z-index: 90;
    display: none;
}

.main-nav.on {
    display: block;
}

.main-nav ul {
    text-align: center;
    height: 100%;
}

.main-nav ul li {
    width: 100%;
    height: 20%;
}

.main-nav ul a {
    color: #a5936d;
    width: 100%;
    height: 100%;
    position: relative;
    display: table;
}

.main-nav ul li.current a {
    color: #ff4b2c;
}

.main-nav ul a span {
    display: table-cell;
    vertical-align: middle;
    line-height: 1.2!important
}

.main-nav .hyicon {
    display: block;
    width: .45rem;
    height: .44rem;
    margin: 0 auto .1rem;
    background: url(http://game.gtimg.cn/images/hyrz/ingame/v2017/icon.png) no-repeat;
    background-size: 3.9rem auto;
}

.main-nav .hyicon-nav-index {
    background-position: -2.7rem 0;
}

.main-nav .current .hyicon-nav-index {
    background-position: -2.1rem 0;
}

.main-nav .hyicon-nav-info {
    background-position: -2.1rem -.6rem;
}

.main-nav .current .hyicon-nav-info {
    background-position: -3.3rem 0;
}

.main-nav .hyicon-nav-event {
    background-position: -2.7rem -1.2rem;
}

.main-nav .current .hyicon-nav-event {
    background-position: -2.1rem -1.2rem;
}

.main-nav .hyicon-nav-ninja {
    background-position: -3.3rem -.6rem;
}

.main-nav .current .hyicon-nav-ninja {
    background-position: -2.7rem -.6rem;
}

.main-nav .hyicon-nav-video {
    background-position: -2.1rem -1.8rem;
}

.main-nav .current .hyicon-nav-video {
    background-position: -3.3rem -1.2rem;
}


/* top-menu */

.top-menu {
    width: 100%;
    height: .64rem;
    position: fixed;
    top: 0;
    left: 0;
    background: url(http://game.gtimg.cn/images/hyrz/ingame/v2017/bg-top-menu.jpg) no-repeat top center;
    background-size: 100% 100%;
    z-index: 20;
}

.top-menu .change-tab {
    width: 1rem;
    background-color: rgba(0, 0, 0, .15);
    height: 100%;
    overflow: hidden;
    float: left;
    display: block
}

.change-tab.on span {
    background-position: 0 -.5rem;
}

.change-tab span {
    display: block;
    width: .34rem;
    height: .34rem;
    background-position: 0 0;
    margin: .15rem auto;
}

.top-menu ul {
    height: 100%;
    overflow: hidden;
}

.top-menu li {
    float: left;
    width: 33.33%;
    line-height: .64rem;
}

.top-menu li.on a {
    color: #ff4b2c;
}

.top-menu a {
    display: block;
    color: #9a9a9a;
    font-size: .26rem;
    text-align: center;
    vertical-align: middle;
}

.top-menu i {
    width: .36rem;
    height: .36rem;
    vertical-align: middle;
    margin-right: .1rem;
    display: inline-block;
}

.tm-video i {
    background-position: -.69rem 0;
}

.tm-video.on i {
    background-position: -.69rem -.49rem;
}

.tm-guess i {
    background-position: -1.38rem 0;
}

.tm-guess.on i {
    background-position: -1.39rem -.49rem;
}

.tm-more i {
    background-position: -.69rem -.98rem;
}

.tm-more.on i {
    background-position: -1.39rem -.98rem;
}

.main-con {
    width: 100%;
    height: 100%;
    padding-top: .64rem;
    position: relative;
    padding-bottom: .1rem;
}


/* index-left */

.igui-index_left {
    width: 8.7rem;
    padding: .2rem .1rem 0;
    overflow-y: hidden;
    height: 100%;
    float: left;
    position: relative;
}

.igui-air {
    height: 100%;
    overflow-y: auto;
}

.igui-air_player {
    position: relative;
}

.igui-air_player::before {
    content: '';
    padding-top: 57%;
    background: #2c2f3b;
    display: block;
}

.igui-air_playerui {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.igui-air_danmu {
    background: #242424;
    /* height: .74rem; */
    padding-right: 1.5rem;
}

.igui-air_danmu .igui-input {
    height: .44rem;
    line-height: .44rem;
    background: #1d1d1d;
}

.igui-air_danmu .igui-danmu-switcher {
    width: .7rem;
    border-radius: 22px;
}

.igui-air_danmu .danmu_switch_on span {
    color: #e1e1e1;
    background: #242424;
}

.air-player-wrap .btn-play {
    width: .97rem;
    height: .97rem;
    background: url(http://game.gtimg.cn/images/hyrz/ingame/v2017/btn-play.png) no-repeat top center;
    background-size: 100% 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

.danmustage {
    position: absolute;
    width: 100%;
    height: 80%;
    top: 10%;
    left: 0;
    z-index: 20;
}


/* index-right */

.igui-index_right {
    float: right;
    width: 4.52rem;
    padding: .2rem 0 0 0;
    height: 100%;
    margin-right: .1rem;
    position: relative;
}

.igui-section {
    padding: .1rem;
    padding-top: .68rem;
    display: none;
    height: 100%;
    overflow-y: scroll;
    background: #242424;
}

.igui-section.on {
    display: block;
}

.igui-tab {
    height: .65rem;
    line-height: .65rem;
    position: absolute;
    top: .2rem;
    left: 0;
    width: 100%;
    z-index: 20;
}

.igui-tab ul {
    height: 100%;
    width: 100%;
}

.igui-tab li {
    width: 50%;
    float: left;
    text-align: center;
    color: #9a9a9a;
    background: #2b2b2b;
    font-size: .25rem;
}

.igui-tab li.on {
    background: #9a9a9a;
    color: #242424;
}

.igui-chat_top {
    font-size: .26rem;
}

.igui-chat_top .igui-chat_num {
    float: left;
    color: #a9a9a9;
    height: .4rem;
    line-height: .4rem;
}

.igui-chat_top .igui-new_coming {
    float: right;
    color: #ff4d2e;
    height: .4rem;
    line-height: .4rem;
}

.igui-user_list {
    overflow-x: auto;
    overflow-y: hidden;
    height: .61rem;
    margin: .1rem 0;
}

.igui-user_list ul {
    width: 300%;
}

.igui-user_list li {
    float: left;
    width: .72rem;
    margin-bottom: .1rem;
}

.igui-user_list li img {
    display: block;
    height: .61rem;
    width: .61rem;
    margin: 0 auto;
    border-radius: 50%;
}

.igui-chat_list {
    font-size: .24rem;
}

.igui-chat_list li {
    padding-bottom: .1rem;
    overflow: hidden;
}

.igui-chat_list .user-name {
    color: #ff4d2e;
    float: left;
}

.igui-chat_list .chat-con {
    color: #aaaaaa;
}

.igui-chat_hint {
    background: rgba(255, 75, 44, .9);
    border-radius: .1rem;
    color: #fff;
    font-size: .2rem;
    position: absolute;
    bottom: .01rem;
    left: 50%;
    padding: 0 .1rem;
    height: .4rem;
    line-height: .4rem;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}


/* font-face */

@font-face {
    font-family: "igfont";
    src: url('//ossweb-img.qq.com/images/js/bsCommonFiles/iconfont/iconfont.eot');
    src: url('//ossweb-img.qq.com/images/js/bsCommonFiles/iconfont/iconfont.eot?#iefix') format('embedded-opentype'), url('//ossweb-img.qq.com/images/js/bsCommonFiles/iconfont/iconfont.svg#iconfont') format('svg'), url('//ossweb-img.qq.com/images/js/bsCommonFiles/iconfont/iconfont.woff') format('woff'), url('//ossweb-img.qq.com/images/js/bsCommonFiles/iconfont/iconfont.ttf') format('truetype')
}

.igfont {
    font-family: "igfont" !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: .1px;
    -moz-osx-font-smoothing: grayscale
}

.time {
    font-size: .21rem;
    color: #ffffff;
}

.time i {
    color: #ff4b2c;
}

.igui-schedule_list {
    margin-top: .1rem;
}

.igui-schedule_item {
    color: #ffffff;
    width: 100%;
    height: 1.9rem;
    background: url(http://game.gtimg.cn/images/hyrz/ingame/v2017/bg-schedule.jpg) no-repeat top center;
    background-size: 100% 100%;
    text-align: center;
    padding: .1rem;
    position: relative;
    margin: 0 auto .2rem;
}

.vs-player {
    width: 34%;
    margin-top: .2rem;
}

.vs-player01 {
    float: left;
}

.vs-player02 {
    float: right;
}

.vs-player img {
    width: .97rem;
    height: .97rem;
    border-radius: 50%;
    margin: 0 auto;
}

.vs-info {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.vs-info p {
    margin-top: .03rem;
}

.vs-info .vs-competition {
    margin-top: .1rem;
    font-size: .29rem;
}

.vs-time {
    font-size: .21rem;
    color: #737373;
}

.vs-info p:nth-of-type(3) {
    font-size: .32rem;
    color: #ab9a75;
}

.vs-schedule {
    padding: 0 .2rem;
    height: .45rem;
    line-height: .45rem;
    background: #2b2b2b;
    position: absolute;
    left: 50%;
    bottom: .1rem;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    border-radius: 10px;
}


/* more */


/*  player */

.page-con {
    overflow-y: auto;
    height: 100%;
}

.sub-tab-con {
    position: relative;
}

.sub-tab-con.on {
    display: block;
}

.nav-scroll {
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}

.igui-nav-wrap {
    position: absolute;
    top: .64rem;
    left: 0;
    right: 0;
    z-index: 50;
    background: #242424;
    font-size: 0;
    z-index: 20;
}

.igui-nav-wrap li {
    display: inline-block;
    text-align: center;
}

.game-tab li {
    min-width: 25%;
    height: .56rem;
    line-height: .56rem;
    font-size: .24rem;
    padding: 0 .4rem;
    color: #9a9a9a;
    border-bottom: .01rem solid #2b2b2b;
}

.game-tab li a {
    color: #fff
}

.game-tab li.cur {
    color: #ff4b2c;
    border-bottom: .04rem solid #ff4b2c;
    background: #2b2b2b;
}

.sub-tab {
    height: .65rem;
}

.sub-tab li {
    font-size: .2rem;
    line-height: .3rem;
    padding: .05rem .15rem;
    border-radius: .05rem;
    margin: .12rem 0 0 .2rem;
    background: #2b2b2b;
}

.sub-tab li a {
    color: #fff;
}

.sub-tab li.cur {
    background: #ff4b2c;
}

.page-con {
    padding-top: 1.21rem;
}

.player {
    width: 100%;
    padding-top: .2rem;
    font-size: 0;
    padding-right: .35rem;
}

.dis {
    display: none;
}

.player .player-item {
    display: inline-block;
    vertical-align: top;
    font-size: .22rem;
    width: 25%;
    margin-bottom: .3rem;
    padding-left: .35rem;
    position: relative;
}

.player .item-con {
    display: block;
    width: 100%;
    height: 100%;
}

.player-item-vote {
    height: 2.29rem;
    text-align: center;
    background: url(http://game.gtimg.cn/images/hyrz/ingame/v2017/bg-player.png) no-repeat center bottom;
    overflow: hidden;
    background-size: cover;
    position: relative;
    display: block;
}

.player-vote {
    font-size: .2rem;
    color: #fff;
}

.player-vote p {
    margin: .07rem;
}

.player-vote a {
    display: table;
    margin: 0 auto;
    width: 1.4rem;
    height: .4rem;
    color: #fff;
    text-align: center;
    background: #FF4D2E;
    border-radius: 18px;
}

.player-vote a:active {
    background: #E53E24;
}

.player-vote a span {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 100%;
}

.player-hot .item-con::before {
    position: absolute;
    left: 0;
    top: 0;
    width: .97rem;
    height: .94rem;
    background: url(http://game.gtimg.cn/images/hyrz/ingame/v2017/icon.png) no-repeat;
    background-position: -1.1rem -1.7rem;
    background-size: 3.9rem auto;
    content: '';
}

.player-avatar {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0 auto;
    margin-top: .2rem;
    border-radius: 300px;
    overflow: hidden;
}

.player-name {
    font-size: .28rem;
    color: #fff;
    line-height: .5rem
}

.player-votecount {
    font-size: .24rem;
    color: #c8b58e;
}

.player-item-bd {
    padding: .25rem;
    padding-top: .15rem;
    padding-bottom: .15rem;
    background: #2A2C2D;
}

.player-info {
    line-height: 1.5
}

.player-info p {
    padding-top: .04rem
}

.player-info i {
    color: #c8b58e;
    font-style: normal;
}

.player-info span {
    color: #fff;
}

.player-vote_action {
    position: absolute;
    top: .15rem;
    right: .15rem;
    background: #FF4B2C;
    color: #fff;
    width: .45rem;
    height: .45rem;
    text-align: center;
    border-radius: .06rem;
    z-index: 10;
}

.player-vote_action i {
    padding-top: .04rem;
    margin-top: .06rem;
    display: inline-block
}

.player-vote_action.off {
    background: #909090;
    color: #fafafa
}

.player-vote_action:active {
    -webkit-transform: translateY(.01rem)
}


/* player-detail */

.player-detail {
    padding: .2rem .35rem .2rem;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.detail-top {
    overflow: hidden;
}

.player-detail .detail-avatar {
    width: 3.3rem;
    height: 3.87rem;
    overflow: hidden;
    border: .02rem solid #000;
    float: left;
}

.player-detail .detail-base {
    padding-left: 3.5rem;
    color: #fff;
    width: 8.2rem;
}

.player-detail .pl-info {
    margin: .1rem 0 .2rem 0;
}

.detail-base .pl-info p {
    font-size: .34rem;
    display: inline-block;
    margin: 0;
    color: #fff;
    vertical-align: middle;
}

.pl-info span {
    display: inline-block;
    color: #ff4b2c;
    font-size: .18rem;
    padding: 0 .1rem;
    line-height: .36rem;
    margin-left: .1rem;
    border: 1px solid #ff4b2c;
    border-radius: .05rem;
    vertical-align: middle;
}

.detail-base p {
    line-height: .4rem;
    font-size: .24rem;
    color: #c8b58e;
}

.pl-name span,
.pl-area span,
.pl-motto span,
.pl-honour span,
.player-ninja p span {
    display: inline-block;
    text-align: justify;
    text-align-last: justify;
    width: 1.1rem;
}

.pl-name i,
.pl-area i,
.pl-motto i,
.pl-honour i {
    color: #fff;
}

.player-ninja {
    margin-top: .3rem;
    padding-top: .3rem;
    border-top: .01rem solid #272829;
    overflow: hidden;
}

.player-ninja p,
.player-ninja ul,
.player-ninja li {
    float: left;
    overflow: hidden;
}

.player-ninja li {
    width: .75rem;
    height: .75rem;
    margin-right: .1rem;
    border: .02rem solid #000;
}

.player-ninja p {
    height: .4rem;
    line-height: .4rem;
    margin-top: .17rem;
}

.detail-data {
    position: absolute;
    top: .2rem;
    right: .35rem;
    width: 4.2rem;
    height: 4rem;
}

.video {
    border-top: .01rem solid #272829;
    margin-top: .3rem;
    overflow: hidden;
}

.video h5 {
    color: #fff;
}

.video-list {
    margin-left: -.3rem;
}

.video-list li {
    width: 33.33%;
    float: left;
    padding-left: .3rem;
    margin-bottom: .2rem;
}

.video-list a {
    display: block;
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: .3rem;
}

.video-list .video-box {
    height: 2.17rem;
    overflow: hidden;
    margin-bottom: .1rem;
    position: relative;
    opacity: .7;
}

.video-list .video-box span {
    display: block;
    width: .6rem;
    height: .6rem;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    margin: -.3rem auto 0;
    background-position: 0 -1.6rem;
}

.video-list .video-tt {
    height: .8rem;
    line-height: .4rem;
}


/* game-info */

.game-info {
    padding: 0 .2rem;
    color: #fff;
}

.game-info h5,
.video h5 {
    font-size: .26rem;
    line-height: .3rem;
    height: .3rem;
    padding-left: .1rem;
    margin: .2rem 0;
    border-left: .04rem solid #ff4b2c;
}

.info-txt {
    background: #252525;
    padding: .2rem .2rem .6rem .2rem;
}

.info-logo {
    width: 1.98rem;
    overflow: hidden;
    padding: .2rem;
    background: #2b2b2b;
    border-radius: .05rem;
    float: left;
    margin: 0 .2rem 0 0;
    vertical-align: middle;
}

.info-txt h3 {
    font-size: .32rem;
    margin: .1rem 0;
}

.info-txt p {
    font-size: .22rem;
    color: #737373;
    line-height: .38rem;
}

#nav3 i.hyicon .red-dot {
    content: " ";
    width: 8px;
    height: 8px;
    background: #FF4B2C;
    position: absolute;
    top: 0.25rem;
    right: 0.15rem;
    border-radius: 50%;
}

@media all and (orientation: portrait) {
    .container {
        overflow-y: auto;
    }
    /* main-nav */
    .main-nav {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        height: 1.2rem;
        width: 100%;
        background: url(http://game.gtimg.cn/images/hyrz/ingame/v2017/bg-nav-land.jpg) repeat-x;
        background-size: cover;
    }
    .main-nav ul li {
        width: 20%;
        height: 100%;
        float: left;
    }
    /* index */
    .igui-index_left,
    .igui-index_right {
        width: 96%;
        margin: 0 auto;
        float: none;
        height: auto;
    }
    .igui-index_left {
        padding: .15rem 0;
    }
    .igui-index_right {
        padding: .15rem 0;
        height: 54%;
    }
    .igui-tab {
        top: .15rem;
    }
    .igui-chat_hint {
        bottom: .2rem;
    }
    .igui-user_list li {
        width: .7rem;
    }
    .igui-schedule_list {
        overflow: hidden;
    }
    .igui-schedule_item {
        width: 49%;
        float: left;
        padding: 0 .1rem;
    }
    .igui-schedule_item:nth-of-type(2n+1) {
        float: left;
    }
    .igui-schedule_item:nth-of-type(2n) {
        float: right;
    }
    .vs-info p {
        margin-top: .08rem;
        font-size: .21rem;
    }
    .vs-info .vs-competition {
        font-size: .22rem;
    }
    .vs-info .vs-schedule {
        bottom: .15rem;
    }
    /* more */
    /* player */
    .player {
        padding-right: .2rem;
    }
    .player .player-item {
        width: 50%;
        padding-left: .2rem;
        margin-bottom: .2rem;
    }
    /* player-detail */
    .player-detail {
        padding: .2rem;
    }
    .player-detail .detail-avatar {
        width: 2.8rem;
        height: 3.2rem;
        margin-top: .2rem;
    }
    .player-detail .detail-base {
        padding-left: 3rem;
        width: auto;
    }
    .player-detail .detail-data {
        position: relative;
        margin: .2rem auto;
        right: 0;
        top: 0;
    }
    .video-list li {
        width: 50%;
    }
    .video-list .video-box {
        height: 2rem;
    }
    #nav3 i.hyicon .red-dot {
        top: 0.1rem;
        right: 0.35rem;
    }
}