@font-face {
    font-family: "font-content";
    src: url("../fonts/content.eot"); /* IE9 */
    src: url("../fonts/content.ie.eot") format("embedded-opentype"), /* IE6-IE8 */
    
    url("../fonts/content.woff") format("woff"), /* chrome、firefox */
    url("../fonts/content.ttf") format("truetype"); /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
    font-style: normal;
    font-weight: normal;
}
@font-face {
    font-family: "font-title";
    src: url("../fonts/title.eot"); /* IE9 */
    src: url("../fonts/title.ie.eot") format("embedded-opentype"), /* IE6-IE8 */
    
    url("../fonts/title.woff") format("woff"), /* chrome、firefox */
    url("../fonts/title.ttf") format("truetype"); /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
    font-style: normal;
    font-weight: normal;
}
.font-content{
    font-family:'font-content';
}
.font-title{
    font-family:'font-title';
}
.hide {
    display: none
}

.full {
    width: 100%;
    height: 100%
}

.abs {
    position: absolute
}

.l0 {
    left: 0
}

.t0 {
    top: 0
}

.lhalf {
    left: 50%
}

.thalf {
    top: 50%
}

.absf {
    left: 0;
    top: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: all;
}

.abcter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.lcter {
    position: absolute;
    left: 50%;
    transform: translate(-50%)
}

.tcter {
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

.fcter {
    display: flex;
    align-items: center;
    justify-content: center
}

.fdc {
    flex-direction: column
}

.sizcont {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center
}

.sizcover {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center
}

.ol {
    border: .01rem solid #fff;
    border-image: linear-gradient(to top, #f80, #2ed);
    border-image-slice: 10;
    box-sizing: border-box
}

.active-center {
    transition: transform .3s;
    cursor: pointer
}

.active-center:hover,
.active-center:active {
    transform: translate(-50%, -50%) scale(1.1)
}

.active {
    transition: transform .3s;
    cursor: pointer
}

.active:hover {
    transform: scale(1.1)
}

.active:active {
    transform: scale(1.05)
}

.m-icon-loading {
    position: fixed;
    z-index: 999;
    display: none
}

.m-icon-loading .inner {
    width: 1.2rem;
    height: 1.2rem;
    background-color: rgba(0, 0, 0, .7);
    border-radius: .1rem
}

.m-icon-loading .inner svg path,
.m-icon-loading .inner svg rect {
    fill: #fff
}
.pop_share {
    display: none;
    z-index: 40;
    background-color: rgba(0, 0, 0, .6);
}
@keyframes msgIn {
    0% {
        opacity: .4;
        transform: translateY(0)
    }

    to {
        opacity: 1;
        transform: translateY(-.1rem)
    }
}

:root {
    font-family: -apple-system, BlinkMacSystemFont, PingFang SC, Helvetica Neue, STHeiti, Tahoma, Simsun, sans-serif;
    line-height: 1.5;
    font-weight: 400;
    color-scheme: light dark;
    color: rgba(255, 255, 255, .87);
    background-color: #242424;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    vertical-align: baseline;
    -webkit-user-select: none;
    user-select: none;
    touch-action: none
}

a {
    font-weight: 500;
    color: #646cff;
    text-decoration: inherit
}

a:hover {
    color: #535bf2
}

body {
    margin: 0;
    line-height: 1;
    -webkit-touch-callout: none;
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

html {
    font-size: .5rem
}
.wrap{

}
@media screen and (max-width: 768px) and (min-width: 414px) {
    html {
        font-size: .552rem
    }
}

html {
    font-size: 13.33333333vw
}

@media screen and (max-height: 600px) and (min-height: 310px) {
    html {
        font-size: 12.33333vw
    }
}

@media all and (min-aspect-ratio: 1334/646) and (orientation: landscape) {
    html {
        font-size: 6.25vw
    }
}

@media all and (max-aspect-ratio: 1334/646) and (orientation: landscape) {
    html {
        font-size: 13.33vh
    }
}
/* .wrap{
    transform: rotate(90deg);
    width: 100vw;
    height: 100vh;
    
} */
.app {
    transform-origin: center center;
    transform: rotate(90deg);
    position: absolute;
    /* left: 0; */
    top:0;
    pointer-events: none;
    height: 100%;
    right: 0;
}
option {
    -webkit-transform: rotate(90deg);/* 旋转选项文本（适用于WebKit浏览器） */
    -moz-transform: rotate(90deg);/* 旋转选项文本（适用于Firefox） */
    transform: rotate(90deg);
}
/* select {
    transform: rotate(90deg)
} */
.app .r_wrap {
    position: relative;
    width: 100vh;
    height: 100vw;
    overflow: hidden;
}
.pop_share .share_tips {
    width: 3.48rem;
    height: 4.08rem;
    background: url(../images/dialog/share_tips_left.png) center / contain no-repeat;
    left: 0.2rem;
    transform: rotate(-90deg);
    /* right: 0; */
    top: -.3rem
}
@media all and (orientation: landscape) {
    html .app {
        transform: rotate(0)
    }
    /* html .wrap{
        transform: rotate(0);
        width: 100%;
        height:100% ;
    } */
    option {
        -webkit-transform: rotate(0deg);/* 旋转选项文本（适用于WebKit浏览器） */
        -moz-transform: rotate(0deg);/* 旋转选项文本（适用于Firefox） */
        transform: rotate(0deg);
    }
    /* select {
        transform: rotate(0deg)
    } */
    html .app .r_wrap {
        width: 100vw;
        height: 100vh
    }

    html .pop_share .share_tips {
        width: 4.70rem;
        height: 2.60rem;
        background: url(../images/dialog/share_tips.png) center / contain no-repeat;
        left: auto;
        right: 0;
        top: 0;
        transform: rotate(0deg);
    }
}
/* .app.game{
    width: 100%;
    height:100%
} */
/* .wrap.game ,.wrap canvas{
    width: 100%;
    height: 100%
} */
/* #page.game{
    left: 50%;
    transform:translate(-50%);
} */
@keyframes fadeOut {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes scaleAnim {
    0% {
        transform: scale(1)
    }

    to {
        transform: scale(1.2)
    }
}

@keyframes moveIn {
    0% {
        transform: translate(-70%, -50%)
    }

    to {
        transform: translate(-50%, -50%)
    }
}

@keyframes fadeOutH {
    0% {
        opacity: 1
    }

    to {
        opacity: .3
    }
}

@keyframes fadeOutH2 {
    0% {
        opacity: 1
    }

    to {
        opacity: .6
    }
}

@keyframes moveY {
    to {
        transform: translateY(-100%)
    }
}

@keyframes guideMoveAnim {
    0% {
        transform: translate(-80%, -50%)
    }

    to {
        transform: translate(-20%, -50%)
    }
}

html {
    width: 100%;
    height: 100%;
    background: #242424
}

html body {
    width: 100%;
    height: 100%;
    font-size: .2rem;
    color: #fff;
    overflow: hidden
}

.btn_back_game {
    z-index: 999;
    top: .2rem;
    left: .4rem;
    width: .84rem;
    height: .52rem;
    transform: translateZ(0);
    pointer-events: all;

}

.top_mnue {
    display: none;
    z-index: 10;
    top: .41rem;
    right: .44rem;
    pointer-events: all;
}
.top_mnue.on{
    display: block;
}
.top_mnue .btn {
    position: relative;
    width: 0.6rem;
    height:0.6rem;
    margin-bottom: 0.17rem;
    /* overflow: hidden */
}

.top_mnue .btn_music.on .anim_wrap .anim {
    /* width: 1.15rem;
    height: 1.14rem; */
    /* background: url(https://game.gtimg.cn/../images/dialog/btn_music_on.png) center / contain no-repeat */
}

.top_mnue .btn_music .anim_wrap {
    /* width: 1.15rem;
    height: 1.14rem; */
    overflow: hidden
}

.top_mnue .btn_music .anim_wrap .anim {
    position: relative;
    width: 0.6rem;
    height:0.6rem;
    /* width: 1.15rem;
    height: 1.14rem;
    background: url(https://game.gtimg.cn/../images/dialog/btn_music_on.png) center / contain no-repeat */
}
.top_mnue .btn_music .anim_wrap .anim::after{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1rem;
    height: 1rem;
    background: url(../images/dialog/btn_music_on.png) center / contain no-repeat
}
.top_mnue .btn_music.pause .anim_wrap .anim::after{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1rem;
    height: 1rem;
    background: url(../images/dialog/btn_music_on_pause.png) center / contain no-repeat
}
.top_mnue .btn_share:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1rem;
    height: 1rem;
    background: url(../images/dialog/btn_share.png) center / contain no-repeat;
   
}
.top_mnue .btn_share{
    display: none;
}
.btn-nav-back{
    width: 0.84rem;
    height: 0.52rem;
    top:0.2rem;
    left: 0.2rem;
    position: fixed;
    background: url(../images/dialog/btn_back_game.png) center / contain no-repeat;
    display: none;
    z-index: 999;
    pointer-events: all;
}
.top_mnue .btn_grally{
    /* width: 0.59rem;
    height: 0.59rem; */
    display: none;
}
.top_mnue .btn_grally.on{
    display: block;
}
.top_mnue .btn_grally:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1rem;
    height: 1rem;
    background: url(../images/dialog/btn_tag.png) center / contain no-repeat
}
.pop_common {
    display: none;
    z-index: 200;
    perspective: 10rem;
    transform: translateZ(0)
}

.pop_common .bg {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .8)
}

.pop_common .container {
    transform-origin: center bottom;
    animation: cardFlipIn .6s .2s cubic-bezier(.25, 1.47, .6, .99) both
}

@keyframes cardFlipIn {
    0% {
        opacity: .1;
        transform: translate(-100%, -50%) rotate3d(0, -.3, 0, 30deg)
    }
}
.pop_common .container .btn_close{
    top: -.27rem;
    right: -.79rem;
    width: .56rem;
    height: .56rem;
    background: url(../images/dialog/btn_close.png) center / contain no-repeat;
}
.pop_common .container .btn_rule{
    top: .19rem;
    right: -1.26rem;
    width: 1.40rem;
    height: 1.92rem;
    background: url(../images/dialog/btn_open_rule.png) center / contain no-repeat;
}
/* 登录 */
.pop_login .container {
    width: 7.18rem;
    height: 4.59rem;
    background: url(../images/dialog/pop_login.png) center / contain no-repeat
}
.pop_login .container .btn_wrap {
    margin-top: .2rem
}

.pop_login .container .btn_wrap .btn_wx {
    width: 2.06rem;
    height: 2.47rem;
    background: url(../images/dialog/btn_wx.png) center / contain no-repeat
}

.pop_login .container .btn_wrap .btn_qq {
    width: 2.06rem;
    height: 2.5rem;
    background: url(../images/dialog/btn_qq.png) center / contain no-repeat
}
.pop_login .container .fdc{
    display: flex;
    flex-direction: row;
}
 .container .btn_open_rule{
    top: .19rem;
    right: -1.26rem;
    width: 1.40rem;
    height: 1.92rem;
    background: url(../images/dialog/btn_open_rule.png) center / contain no-repeat;
}
/* 活动规则 */
.pop_rule{
    z-index: 999;
}
.pop_rule .container {
    width: 7.18rem;
    height: 4.59rem;
    background: url(../images/dialog/pop_rule_bg.png) center / contain no-repeat;
}
.pop_rule .rule_text{
    width: 90%;
    height: 2.84rem;
    color: #b36f28;
    font-size: 0.24rem;
    line-height: 0.3rem;
    box-sizing: border-box;
    padding: 0 0.61rem;
    margin: 1.08rem auto 0;
    overflow-y: auto;
}
.pop_rule .rule_text::-webkit-scrollbar-track {
    width: 2px;
    background-color: #f2d6a2;
}
.pop_rule .rule_text::-webkit-scrollbar {
    width: 2px;
    /* background-color: #e1a24a; */
}
.pop_rule .rule_text::-webkit-scrollbar-thumb{
      background-color: #e1a24a;
}
/* 奖励弹框 */
.pop_arawd .container{
    width:7.24rem;
    height: 4.64rem;
    background: url(../images/dialog/pop_award.png) center / contain no-repeat;
    margin-top: .0rem
}
.pop_arawd .container .award[data-id="1"] {
    width: 1.7rem;
    height: 2.09rem;
    background: url(../images/dialog/award_1.png) center / contain no-repeat
}

.pop_arawd .container .award[data-id="2"] {
    width: 1.7rem;
    height: 2.09rem;
    background: url(../images/dialog/award_2.png) center / contain no-repeat
}

.pop_arawd .container .award[data-id="3"] {
    width: 1.7rem;
    height: 2.09rem;
    background: url(../images/dialog/award_3.png) center / contain no-repeat
}
.pop_arawd .container .award[data-id="4"] {
    width: 1.7rem;
    height: 2.09rem;
    background: url(../images/dialog/award_4.png) center / contain no-repeat
}


.pop_arawd .container .btn_close{
    top: 0.2rem;
    right: -.79rem;
    background: url(../images/dialog/btn_close.png) center / contain no-repeat;
}
.pop_arawd .container .btn_get {
    width: 2.98rem;
    height: .9rem;
    background: url(../images/dialog/pop_award_btn.png) center / contain no-repeat;
    top: 50%;
    margin-top: 1.7rem
}
.pop_arawd .container .btn_rule {
    top: 0.75rem;
}
/* 绑定大区 */
.pop_bind .container,.pop_role_info .container {
    width: 7.18rem;
    height: 4.59rem;
    background: url(../images/dialog/pop_bind.png) center / contain no-repeat
}
.pop_bind .btn_wrap {
    margin-top: 1.6rem
}
.pop_bind .bind_info .platform {
    position: relative;
    width: 5.54rem;
    height: .6rem;
    background: url(../images/dialog/bind_info_item1.png) center / contain no-repeat
}

.pop_bind .bind_info .area {
    position: relative;
    width: 5.54rem;
    height: .6rem;
    background: url(../images/dialog/bind_info_item2.png) center / contain no-repeat
}

.pop_bind .bind_info .role {
    position: relative;
    width: 5.54rem;
    height: .6rem;
    background: url(../images/dialog/bind_info_item3.png) center / contain no-repeat
}
.pop_bind .bind_info select {
    position: absolute;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
    outline: none;
    background-color: transparent;
    width: 3.9rem;
    height: .6rem;
    line-height: .6rem;
    color: #b36f28;
}
.pop_bind .bind_info .select_wrap {
    width: 3.4rem;
    height: .6rem;
    margin-left: 1.15rem
}
.pop_bind .bind_info div {
    margin: .2rem 0
}
.pop_bind .bind_info {
    display: block;
    font-size: .2rem;
    color: #103244;
    z-index: 10;
}
.pop_bind .btn_wrap .btn_cancel,.pop_role_info .btn_wrap .btn_cancel {
    width: 2.67rem;
    height: .70rem;
    background: url(../images/dialog/pop_bind_btn_cancel.png) center / contain no-repeat
}

.pop_bind .btn_wrap .btn_sure,.pop_role_info .btn_wrap .btn_sure {
    width: 2.67rem;
    height: .70rem;
    background: url(../images/dialog/pop_bind_btn_ok.png) center / contain no-repeat
}
/* 确认绑定大区 */
.pop_role_info .btn_wrap{
    margin-top: 1.5rem;
}
.role_info_text{
    padding-top: 1.31rem;
    color: #b36f28;
    font-size: 0.32rem;
    width: 90%;
    margin: 0 auto;
    text-align: center;
}
.role_info_text span{
    color: #da4120;
}
.role_info_list{
    margin-bottom: 0.23rem;
}
/* 通用弹框 */
.pop_info .container{
    width:7.18rem;
    height: 4.01rem;
    background: url(../images/dialog/pop_common.png) center / contain no-repeat;
    margin-top: .0rem
}
.pop_info .text{
    color: #804a18;
    font-size: 0.51rem;
    font-weight: bolder;
     width: 80%;
     text-align: center;
}
.pop_arawd .container .award {
    margin-top: .2rem
}

.pop_bind .bind_info select::-ms-expand {
    display: none
}

.pop_bind .bind_info select option {
    background-color: rgba(0, 0, 0, .8)
}