/**
 * Date: 2019.1.21
 * Update: 2019.1.21
 * Developer: Mine
 * Theme: 新三国志春节抽奖活动
 */

@charset "utf-8";
/*导入字体*/
@font-face { font-family: 'fzjh'; src: url('../font/fzjh.TTF');  font-weight: normal; font-style: normal; }
/* CSS Document wlo:Cflower */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { border: 0 none; font: inherit; margin: 0; padding: 0; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: outside none none; }
blockquote, q { quotes: none; }
blockquote::before, blockquote::after, q::before, q::after { content: none; }
table { border-collapse: collapse; border-spacing: 0; }
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; outline: 0 none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
input, textarea { -moz-border-radius: 0; border-radius: 0; outline: 0 none; resize: none; -webkit-appearance: none;    /*去掉iOS下input的默认内阴影*/ }
.clearfix:after, .clearfloat:after { visibility: hidden; display: block; font-size: 0; content: ""; clear: both; height: 0; }
html { font-family: "Arial", "Heiti SC", "Helvetica", "Microsoft YaHei", sans-serif; -webkit-text-size-adjust: none; }
body { margin: 0 auto; min-width: 320px; position: relative; width: 100%; height: 100%; }
a { text-decoration: none; color: inherit; }
.clearfloat:after { clear: both; content: ""; display: block; height: 0; visibility: hidden; }
.ridius { -moz-border-radius: 5px; border-radius: 5px; }

/*假如添加了video标签,可能会出现video标签默认置顶的情况,解决这个bug可以通过样式设置来规避;*/
.compatibleStyle { backface-visibility: hidden; -webkit-backface-visibility: hidden;    /* Chrome 和 Safari */ -moz-backface-visibility: hidden;    /* Firefox */ -ms-backface-visibility: hidden;    /* Internet Explorer */ -webkit-perspective: 0; -webkit-transform: translate3d(0, 0, 0); visibility: visible; }

/*弹出层遮罩div*/
.black_overlay { display: none; position: absolute; top: 0%; left: 0%; bottom: 0; right: 0; width: 100%; height: 100%; background-color: #000; z-index: 988; -moz-opacity: 0.5; opacity: .50; filter: alpha(opacity=50); }
.btn { display: block; }
.pos { position: absolute; }
.fl { float: left; }
.fr { float: right; }
.w750{width: 100%;}
/*.fnt_pinghei { font-family: "pinghei"; }*/
.fnt_pinghei img { width: 1.6rem; }

/*menu*/
.menu { display: none; position: fixed; width: 7.5rem; margin: 0 auto; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.9); z-index: 9999; overflow-y: auto; }

/*  */
.wrap { width: 7.5rem; min-height: 38.83rem; position: relative; background: url(../images/bg.png) no-repeat; -moz-background-size: 100% 100%; background-size: 100% 100%; margin: 0 auto; padding-bottom: 0rem; overflow: hidden; }
.topbar { display: -webkit-box; display: -moz-box; display: box; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; box-orient: horizontal; -webkit-box-align: center; -moz-box-align: center; box-align: center; position: fixed; }
.topbar { width: 7.5rem; height: 1.25rem; background: url(../images/topbar.png) no-repeat; -moz-background-size: 100% 100%; background-size: 100% 100%; z-index: 9999; margin: 0 auto; }
.topbar a { display: block; color: #fff; margin: 0; }
.topbar .logo { display: block; text-indent: -9999px; width: 1.39rem; height: 1.39rem; position: relative; top: 0.2rem; z-index: 1; margin-left: .15rem; margin-top: 0; margin-right: .15rem; -moz-border-radius: .15rem; border-radius: .15rem; }
.topbar .logo { background: url(../images/logo.png) center center no-repeat; -moz-background-size: cover; background-size: cover; }
.game_name h2 { font-size: 0.19rem; color: #fff; }
.game_name p { font-size: 0.12rem; color: #cccccc; margin-top: 0.05rem; }
.down {/*  overflow: hidden; */ margin-left: 2.1rem; margin-top: 0.1rem;}
.down a { display: inline-block; }
.glp, .app { width: 1.77rem; height: 0.52rem; }
.glp img, .app img { width: 100%; height: 100%; }

.bg1 {
    width: 7.5rem;
    height: 7.9rem;
    position: relative;
    background: url(../images/bg1.png) no-repeat;
    background-size: 100% 100%;
}
/* 人物 */
.part { position: relative; width: 100%; }
.part-01 { position: relative;}
.list { width: 100%; position: relative; text-indent: -999em; }

/*人物*/
.list .item { overflow: hidden;  }

/*人物三*/
.list .item1 { width: 9.8rem; height: 9.58rem; background: url(../images/sunshangxiang.png) no-repeat 0 0; -moz-background-size: 100% 100%; background-size: 100% 100%; left: -3.4rem; top: 0.3rem; z-index: 0; }
.list .item2 { width: 8.06rem; height: 10.7rem; background: url(../images/zhugeliang.png) no-repeat 0 0; -moz-background-size: 100% 100%; background-size: 100% 100%; left: -0.8rem; top: 2rem; z-index: 1; }
.list .item3 { width: 12.72rem; height: 10.80rem; background: url(../images/zhangfei.png) no-repeat 0 0; -moz-background-size: 100% 100%; background-size: 100% 100%; left:-3.8rem; top: 3.2rem; z-index: 2; }
.list .item4 { width: 9.43rem; height: 14.59rem; background: url(../images/liubei.png) no-repeat 0 0; -moz-background-size: 100% 100%; background-size: 100% 100%; left: -0.4rem; top: 1.6rem; z-index: 4; }
.item5 { width: 2.62rem; height: 1.14rem; background: url(../images/pig.png) no-repeat 0 0; background-size: 100% 100%; left: 4.2rem; top: -0.9rem; z-index: 5;}
/* 春节简介 */
.side {
    position: relative;
    top: 4.2rem;
    left: 6.8rem;
    z-index: 10;
}
.side .side_btn img {
    display: block;
    width: 0.71rem;
    height: 1.75rem;
    -webkit-animation-name: shake-vertical;
    -ms-animation-name: shake-vertical;
    animation-name: shake-vertical;
    -webkit-animation-duration: 3s;
    -ms-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -ms-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: 0s;
    -ms-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-play-state: running;
    -ms-animation-play-state: running;
    animation-play-state: running;
}
@keyframes shake-vertical {
    0% {
        transform: translate(0px, 0px) rotate(0deg);
    }
    2% {
        transform: translate(0px, 0px) rotate(0deg);
    }
    4% {
        transform: translate(0px, 0px) rotate(0deg);
    }
    6% {
        transform: translate(0px, 0px) rotate(0deg);
    }
    8% {
        transform: translate(0px, 0px) rotate(0deg);
    }
    10% {
        transform: translate(0px, 0px) rotate(0deg);
    }
    12% {
        transform: translate(0px, 0px) rotate(0deg);
    }
    14% {
        transform: translate(0px, 0px) rotate(0deg);
    }
    16% {
        transform: translate(0px, 0px) rotate(0deg);
    }
    18% {
        transform: translate(0px, 0px) rotate(0deg);
    }
    20% {
        transform: translate(0px, 0px) rotate(0deg);
    }
    22% {
        transform: translate(0px, 0px) rotate(0deg);
    }
    24% {
        transform: translate(0px, 0px) rotate(0deg);
    }
    26% {
        transform: translate(0px, 0px) rotate(0deg);
    }
    28% {
        transform: translate(0px, 0px) rotate(0deg);
    }
    30% {
        transform: translate(0px, 0px) rotate(0deg);
    }
    32% {
        transform: translate(0px, 0px) rotate(0deg);
    }
    34% {
        transform: translate(0px, 0px) rotate(0deg);
    }
    36% {
        transform: translate(0px, 0px) rotate(0deg);
    }
    38% {
        transform: translate(0px, 4px) rotate(0deg);
    }
    40% {
        transform: translate(0px, 7px) rotate(0deg);
    }
    42% {
        transform: translate(0px, -5px) rotate(0deg);
    }
    44% {
        transform: translate(0px, 0px) rotate(0deg);
    }
    46% {
        transform: translate(0px, -2px) rotate(0deg);
    }
    48% {
        transform: translate(0px, -5px) rotate(0deg);
    }
    50% {
        transform: translate(0px, -4px) rotate(0deg);
    }
    52% {
        transform: translate(0px, 1px) rotate(0deg);
    }
    54% {
        transform: translate(0px, -1px) rotate(0deg);
    }
    56% {
        transform: translate(0px, -2px) rotate(0deg);
    }
    58% {
        transform: translate(0px, 5px) rotate(0deg);
    }
    60% {
        transform: translate(0px, 6px) rotate(0deg);
    }
    62% {
        transform: translate(0px, -3px) rotate(0deg);
    }
    64% {
        transform: translate(0px, -3px) rotate(0deg);
    }
    66% {
        transform: translate(0px, -9px) rotate(0deg);
    }
    68% {
        transform: translate(0px, -8px) rotate(0deg);
    }
    70% {
        transform: translate(0px, -7px) rotate(0deg);
    }
    72% {
        transform: translate(0px, 5px) rotate(0deg);
    }
    74% {
        transform: translate(0px, 5px) rotate(0deg);
    }
    76% {
        transform: translate(0px, -6px) rotate(0deg);
    }
    78% {
        transform: translate(0px, 8px) rotate(0deg);
    }
    80% {
        transform: translate(0px, 2px) rotate(0deg);
    }
    82% {
        transform: translate(0px, -8px) rotate(0deg);
    }
    84% {
        transform: translate(0px, -6px) rotate(0deg);
    }
    86% {
        transform: translate(0px, 5px) rotate(0deg);
    }
    88% {
        transform: translate(0px, -9px) rotate(0deg);
    }
    90% {
        transform: translate(0px, 1px) rotate(0deg);
    }
    92% {
        transform: translate(0px, -9px) rotate(0deg);
    }
    94% {
        transform: translate(0px, -8px) rotate(0deg);
    }
    96% {
        transform: translate(0px, -3px) rotate(0deg);
    }
    98% {
        transform: translate(0px, 1px) rotate(0deg);
    }
}
/* 抽奖 */
.cj_box { width: 7.50rem; height: 6.80rem; background: url(../images/bg2.png) no-repeat 0 0; background-size: 100% 100%; position: relative; left: 0; top: 0; z-index: 7; }
.cj_cen {width: 6.8rem; height: 2.6rem; margin: 0 auto; position: relative; overflow: hidden; }
.cj_img { width: 6.3rem; height: 1rem; position: relative; top: 1.308rem; overflow: hidden; margin: 0 auto;}

#xx{}
.cj_img img {width: 100%; vertical-align: top}
.btn_cen { position: relative; overflow: hidden; padding-bottom: 0.23rem; }
.btn img { width: 100%; }
.btn_cj { width: 6.35rem;height: 1.65rem; margin: 0.12rem auto 0;background: url(../images/cj_btn.png) no-repeat 0 0;
    background-size: 100% 100%;
    position: relative;
    z-index: 20;
 }
 .btn_cj .after{
    position:absolute;
    width:0.67rem;
    height:0.69rem;
    background: url(../images/cj_num.png) no-repeat 0 0;
    background-size: 100% 100%;
    display: block;
    top: -0.15rem;
    right: 0.01rem;
    text-align: center;
    color: #fff;
    line-height: 0.69rem;
 }


.btn_bl { text-align: center; }
.txt { width: 2.94rem; right: 0.7rem; bottom: 0; }
.txt img { width: 100%; display: block; }
.datial,.fb_shere{
    display: inline-block;
    width: 3.2rem;
    height: 0.94rem;
}
.datial{
    background: url(../images/record.png) no-repeat 0 0;
    background-size: 100% 100%;
    text-indent: -999em;
}
.fb_shere{
    background: url(../images/share.png) no-repeat 0 0;
    background-size: 100% 100%;
    position: relative;
}
.fb_shere .after,.datial .after{
    position:absolute;
    width:0.56rem;
    height:0.58rem;
    background: url(../images/share_btn.png) no-repeat 0 0;
    background-size: 100% 100%;
    display: block;
    top: -0.1rem;
    right: 0.01rem;
    text-align: center;
    color: #fff;
    line-height: 0.58rem;
    /* text-indent: -999em; */
 }
 .fb_shere .after {
     color: #213a54;
 }
.datial .after{
    display: none;
}
.active{
    width:1.41rem;
    height: 1.41rem;
    background: url(../images/selected.png) no-repeat 0 0;
    -moz-background-size: 100% 100%;
         background-size: 100% 100%;
    position: absolute;
    top: 1.14rem;
    left: 50%;
    margin-left: -0.705rem;
    animation:activeAni 2s ease-in-out infinite;
}

/* 动画 prev + next */
@keyframes activeAni {
    0% {left: 10%;}
    50% {left: 90%;}
    100% {left: 10%;}
}

/* 页面主体 */
.centbox { overflow: hidden; position: relative; }
.cc_cen{
    width: 7.5rem;
    height: 7.5rem;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
.pos_cc_cen{
    position: relative;
    bottom: -0.4rem;
    left: 0.35rem;
    z-index: 5;
}
/*c1*/
.time{margin: 0.2rem 0 0.1rem;}
.time i,.detail i{display: inline-block;background: #b50000;color: #fff;font-size: 0.2rem;padding: 0.07rem 0.13rem;font-family: "Meiryo";}
.time span{display: inline-block; margin-left: 0.1rem;color: #b50000;font-size: 0.2rem;font-family: "Meiryo";}
.detail{width: 6.78rem;margin: 0 auto;position: relative;}
.detail span{color: #b50000;font-size: 0.2rem;display: inline-block;padding-top: 0.08rem;font-family: "Meiryo";}
.detail .rotate_next{display: none;}
.detail em{display: block;}
.tits img{ width: 6.67rem; }

.bg4 {
    background: url(../images/bg4.png) no-repeat; 
    background-size: 100% 100%;
    width: 7.5rem;
    height: 24.13rem;
    position: relative;
    z-index: 6;
}
.bg4 .cloud1 {
    position: absolute;
    left: -3rem;
    top: 15rem;
    width: 2.31rem;
    height: 1.09rem;
    animation: cloud1 linear 10s infinite;
}
@keyframes cloud1 {
    0% {
        transform: translateX(0rem)
    }
    8% {
        transform: translateX(1rem)
    }
    16% {
        transform: translateX(2rem)
    }
    24% {
        transform: translateX(3rem)
    }
    32% {
        transform: translateX(4rem)
    }
    40% {
        transform: translateX(5rem)
    }
    48% {
        transform: translateX(6rem)
    }
    56% {
        transform: translateX(7rem)
    }
    64% {
        transform: translateX(8rem)
    }
    72% {
        transform: translateX(9rem)
    }
    80% {
        transform: translateX(10rem)
    }
    88% {
        transform: translateX(11rem)
    }
    100% {
        transform: translateX(12rem)
    }
}
.bg4 .cloud2 {
    position: absolute;
    left: 8rem;
    top: 22rem;
    width: 2.52rem;
    height: 1.19rem;
    animation: cloud2 linear 12s infinite;
}

@keyframes cloud2 {
    0% {
        transform: translateX(0rem)
    }
    16% {
        transform: translateX(-2rem)
    }
    32% {
        transform: translateX(-4rem)
    }
    48% {
        transform: translateX(-6rem)
    }
    64% {
        transform: translateX(-8rem)
    }
    80% {
        transform: translateX(-10rem)
    }
    100% {
        transform: translateX(-12rem)
    }
}
.bg4 .flower1 {
    position: absolute;
    left: 1.6rem;
    top: 14.4rem;
    width: 0.88rem;
    height: 0.87rem;
    animation: flower1 linear 1s infinite;
}
@keyframes flower1 {
    0% {
        transform: rotate(-5deg)
    }
    25% {
        transform: rotate(0deg)
    }
    50% {
        transform: rotate(5deg)
    }
    75% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(-5deg)
    }
}
.bg4 .flower2 {
    position: absolute;
    left: 6rem;
    top: 22rem;
    width: 0.59rem;
    height: 0.57rem;
    animation: flower1 linear 2s infinite;
}
/* 登录签到 */
.login_award {
    height: 11.11rem;
    position: relative;
    top: 2.2rem;
}
.login_award .award_bg {
    width: 6.76rem;
    height: 11.11rem;
    position: absolute;
    left: 50%;
    margin-left: -3.38rem;
    top: 0;
}

/* 进度条 */
.jindu{position: relative;overflow: hidden;}
.jindu .jdt{
    width: 0.09rem;
    height: 8.56rem;
    background: url(../images/jdt.png) no-repeat 0 0.2rem;
    -moz-background-size: 0.09rem 8.16rem;
         background-size: 0.09rem 8.16rem;
    position: relative;
    margin-top: 0.1rem;
}
.jindu .jdt:before{
    content: '0';
    position: absolute;
    top: 0.1rem;
    right: -0.2rem;
    font-size:0.1rem;
    color: #3fd9ff;
    zoom: 1;
    *zoom: 1;
}
.jindu .jdt:after{
    content: '50000';
    position: absolute;
    bottom: 0.15rem;
    right: -0.44rem;
    font-size:0.1rem;
    color: #69604d;
    zoom: 1;
    *zoom: 1;
}
.jdt .curr{
    width: 0.09rem;
    height: 2.56rem;
    background: url(../images/jdt_curr.png) no-repeat 0 0.2rem;
    -moz-background-size: 0.09rem 8.16rem;
         background-size: 0.09rem 8.16rem;
}
.jindu .pics{width: 6.35rem;height: 2.11rem}
.jindu img{width: 100%;}
.c3 {
    position: relative;
    top: 4.4rem;
}
.c678{width: 6.78rem;margin: 0 auto;position: relative;overflow: hidden;}
.sign{width: 4.8rem;height: 1.48rem;margin: 0 auto;background: url(../images/sign.png) no-repeat 0 bottom;-moz-background-size: 4.8rem 1.45rem;background-size: 4.8rem 1.45rem;}
.sign_end{width: 4.8rem;height: 1.48rem;margin: 0 auto;background: url(../images/sign_end.png) no-repeat 0 0;-moz-background-size: 4.8rem 1.48rem;background-size: 4.8rem 1.48rem;}


/* c2 */
.c2 .mt{margin-top: 0.1rem;}
.c2 .mt a {
    display: block;
    width: 90%;
    position: absolute;
    left: 50%;
    margin-left: -45%;
}
.c2 .mt #Return_Bonus { top: 14.35rem; height: 2rem;}
.c2 .mt #Event_1 {top: 17.57rem; height: 2rem;}
.c2 .mt #Event_2 {top: 20rem; height: 4.4rem;}
.c2 .mt #Event_3 {top: 24.8rem; height: 2.7rem;}
.c2 .mt #Event_4 {top: 27.9rem; height: 2rem;}
.c2 .mt #Event_5 {top: 30.3rem; height: 4.4rem;}
/*选项卡*/
.tabpos{position: relative;overflow: hidden;width: 7.19rem;height: 5.23rem;margin: 0 auto;}
.tabcen{width: 7.19rem;height: 5.23rem;position: absolute;top:0;z-index: 9;}
.tcb1{background: url(../images/tab1.png) no-repeat 0 0;-moz-background-size: 100% 100%;background-size: 100% 100%;}
.tcb2{background: url(../images/tab2.png) no-repeat 0 0;-moz-background-size: 100% 100%;background-size: 100% 100%;}
.tcb3{background: url(../images/tab3.png) no-repeat 0 0;-moz-background-size: 100% 100%;background-size: 100% 100%;}
.tab_cc{width: 7.19rem;height: 5.23rem;background: url(../images/tab_cc.png) no-repeat center 0.05rem;-moz-background-size: 6.89rem 4.89rem;background-size: 6.89rem 4.89rem;}

.tab_box {width: 6.89rem;height: 4.04rem;margin: 0.18rem auto 0;overflow: hidden;position: relative;}
.tab_list{height: 1.02rem;width: 6.89rem;margin:0 auto;z-index: 10;position: absolute;bottom: 0;left: 50%;margin-left: -3.34rem;}
.tab_list p{float: left;width: 1.9rem;height: 100%;}
.tab_list .list2{margin: 0 0.5rem;}

.show{
    font-size: 0.2rem;
    color: #ffff;
    height: 100%;
}

.show img{width: 100%;}

.videoplay_rotate {z-index: 10;overflow: hidden;position: absolute;left: 0.5rem;bottom: 0.9rem;width: 1.8rem;height: 0.88rem;}
.videoplay_rotate a { position: absolute; display: block; background: url(../images/play.png) no-repeat;
    -moz-background-size: 100% 100%;
    background-size: 100% 100%;left: 42%; top: 50%; width: 0.8rem; height: 0.88rem; margin-top: -0.42rem; margin-left: -0.44rem; }

.pos_3d {width: 0.6rem;height: 0.52rem;top: 0.22rem;right: 0.05rem;}
.pos_3d img{width: 100%;}
/*c3*/
/*视频*/
.videoplay a {position: absolute;  left: 50%; top: 50%; width: 1.2rem; height: 1.2rem; margin-top: -0.6rem; margin-left: -0.6rem; background: url(../images/play.png) no-repeat;-moz-background-size: 100% 100%;background-size: 100% 100%; animation: scale 1s ease-out infinite;}
@keyframes scale {
    0% {
        transform: scale(1)
    }
    50% {
        transform: scale(1.2)
    }
    100% {
        transform: scale(1)
    }
}

.playimg{ width: 7.36rem; height: 4.31rem; background: url(../images/video_img.png) no-repeat; -moz-background-size :100% 100%; background-size :100% 100%; margin: 0.3rem auto 0.5rem; position: relative; z-index: 9;}

/*footer*/
.footer { position: relative; left: 0.3rem; top: -0.4rem;}
.footer img {
    width: 6.33rem;
    height: 1.4rem;
}


/*回到顶部*/
.up { width: 0.63rem; height: 0.73rem; position: fixed; bottom: 1.5rem; right: 0.1rem; z-index: 99 }

/*彩带*/
.caid { width: 100%; position: absolute; top: 1.5rem; left: 0; z-index: 0; display: block; }
/*background: rgba(0,0,0,0.9)*/
.caid_r .cp2 img { position: absolute; right: 1rem;top: 0.5rem; }

/*粉色彩带*/
.caid_pink { top: 3rem;z-index: 99;}
.caid_pink img {position: absolute; right: 0.4rem; top: 2.2rem;}

.caid_yellow { top: 18rem;display: none; }
.caid_pk2 { top: 41rem; }
.caid_pk3 { top: 50.2rem; }
.caid .cp1 img { width: 1.24rem; transform: scale(2.5) rotate(-45deg) translateX(-0.1rem); }
.caid_r .cp2 img { width: 1.12rem; position: absolute; right: 0.1rem; top: 0rem;}
.caid_pink .cp3 img { width: 0.97rem; position: absolute; right: -0.1rem; top: 15rem; }
.caid_yellow .cp4 img { width: 0.97rem; position: absolute; right: 0; }
.caid_pk2 .cp5 img { width: 0.69rem;position: absolute; right: -0.1rem; }
.caid_pk3 .cp6 img { width: 0.84rem; position: absolute; left: -0.1rem; }
.up { display: none; -webkit-animation: bounceInDown .5s 0s ease-in-out both; -moz-animation: bounceInDown .5s 0s ease-in-out both; animation: bounceInDown .5s 0s ease-in-out both; }
.up img { width: 100%; }
@-webkit-keyframes prev {
    50% { -webkit-transform: translate(10px) }
}
@-moz-keyframes prev {
    50% { -moz-transform: translate(10px); transform: translate(10px) }
}
@keyframes prev {
    50% { -webkit-transform: translate(10px); -moz-transform: translate(10px); transform: translate(10px) }
}
@-webkit-keyframes next {
    50% { -webkit-transform: translate(-10px) }
}
@-moz-keyframes next {
    50% { -moz-transform: translate(-10px); transform: translate(-10px) }
}
@keyframes next {
    50% { -webkit-transform: translate(-10px); -moz-transform: translate(-10px); transform: translate(-10px) }
}
@-webkit-keyframes move {
    from { -webkit-transform: rotate(0); }
    to { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes move {
    from { -moz-transform: rotate(0); }
    to { -moz-transform: rotate(360deg); }
}
@keyframes move {
    from { -webkit-transform: rotate(0); -moz-transform: rotate(0); transform: rotate(0); }
    to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); transform: rotate(360deg); }
}

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

/* float element translateY*/
@keyframes float-animate2 {
    0%, 100% { -webkit-transform: translateY(-3px); -moz-transform: translateY(-3px); transform: translateY(-3px); }
    50% { -webkit-transform: translateY(2px); -moz-transform: translateY(2px); transform: translateY(2px); }
}
@-webkit-keyframes float-animate2 {
    0%, 100% { -webkit-transform: translateY(-3px); }
    50% { -webkit-transform: translateY(2px); }
}
@-moz-keyframes float-animate2 {
    0%, 100% { -moz-transform: translateY(-3px); }
    50% { -moz-transform: translateY(2px); }
}

/* float element translateY end*/

/* float element translateY*/
@keyframes float-animate1 {
    0%, 100% { -webkit-transform: translateY(-5px); -moz-transform: translateY(-5px); transform: translateY(-5px); }
    50% { -webkit-transform: translateY(1px); -moz-transform: translateY(1px); transform: translateY(1px); }
}
@-webkit-keyframes float-animate1 {
    0%, 100% { -webkit-transform: translateY(-5px); }
    50% { -webkit-transform: translateY(1px); }
}
@-moz-keyframes float-animate1 {
    0%, 100% { -moz-transform: translateY(-5px); }
    50% { -moz-transform: translateY(1px); }
}

/* float element translateY end*/

/* float element translateY*/
@keyframes float-animate {
    0%, 100% { -webkit-transform: translateY(-8px); -moz-transform: translateY(-8px); transform: translateY(-8px); }
    50% { -webkit-transform: translateY(0); -moz-transform: translateY(0); transform: translateY(0); }
}
@-webkit-keyframes float-animate {
    0%, 100% { -webkit-transform: translateY(-8px); }
    50% { -webkit-transform: translateY(0); }
}
@-moz-keyframes float-animate {
    0%, 100% { -moz-transform: translateY(-8px); }
    50% { -moz-transform: translateY(0); }
}

/* float element translateY end*/
@-webkit-keyframes aniArrowA {
    0% { -webkit-transform: translateY(0.3rem) }
    100% { -webkit-transform: translateY(-.3rem) }
}
@-moz-keyframes aniArrowA {
    0% { -moz-transform: translateY(0.3rem) }
    100% { -moz-transform: translateY(-.3rem) }
}
@keyframes aniArrowA {
    0% { -webkit-transform: translateY(0.3rem); -moz-transform: translateY(0.3rem); transform: translateY(0.3rem) }
    100% { -webkit-transform: translateY(-.3rem); -moz-transform: translateY(-.3rem); transform: translateY(-.3rem) }
}
@-webkit-keyframes aniArrowA {
    0% { -webkit-transform: translateY(0.3rem) }
    100% { -webkit-transform: translateY(-.3rem) }
}
@-moz-keyframes aniArrowA {
    0% { -moz-transform: translateY(0.3rem) }
    100% { -moz-transform: translateY(-.3rem) }
}
@keyframes aniArrowA {
    0% { -webkit-transform: translateY(0.3rem); -moz-transform: translateY(0.3rem); transform: translateY(0.3rem) }
    100% { -webkit-transform: translateY(-.3rem); -moz-transform: translateY(-.3rem); transform: translateY(-.3rem) }
}

/* 动画 prev + next */
@-webkit-keyframes prev {
    50% { -webkit-transform: translate(10px) }
}
@keyframes prev {
    50% { -webkit-transform: translate(10px); -moz-transform: translate(10px); transform: translate(10px) }
}
@-webkit-keyframes next {
    50% { -webkit-transform: translate(-10px) }
}
@keyframes next {
    50% { -webkit-transform: translate(-10px); -moz-transform: translate(-10px); transform: translate(-10px) }
}

/* 弹出 */
#maskLayer { display: none; position: absolute; z-index: 10000; left: 0; top: 0; width: 100%; margin: 0 auto; height: 100%; background: #040001; opacity: 0.9; filter: alpha(opacity=90); }
#alertInfo { display: none; background: rgba(255, 255, 255, 0); left: 50%; top: -100%; position: absolute; z-index: 10000; width: 100%; max-width: 7.5rem; }
#alertInfo .close { position: absolute; right: 0.5rem; top: 0.4rem; overflow: hidden; font-size: 0; text-indent: -999999px; display: block; width: 0.4rem; height: 0.4rem; cursor: pointer;  z-index: 220; }

.pop_warp { width: 7.22rem; height: 4.89rem; margin: 0 auto; background: url(../images/pop_v.png) no-repeat; -moz-background-size: 7.22rem 4.25rem; background-size: 7.22rem 4.25rem; position: relative; overflow: hidden; }
.pop_warp .before { width: 6rem; height: 3rem; margin: 0.6rem auto 0; }
.pop_warp .before iframe, .pop_warp .before embed { width: 100%; height: 100%; }

.pop_Prize #pop_Prize_close {
    position: absolute;
    width: 0.4rem;
    height: 0.4rem;
    top: 0.36rem;
    left: 6.4rem;
    cursor: pointer;
}
.userPrize #userPrize_close {
    position: absolute;
    width: 0.4rem;
    height: 0.4rem;
    top: 0.36rem;
    left: 6.4rem; 
    cursor: pointer;
}
/* 侧边简介弹窗 */
.alertSide {
    width: 7.14rem;
    height: 8.97rem;
    background: url(../images/side_bg.png) no-repeat;
    background-size: 100% 100%;
    margin: 0 auto;
}
.alertSide #alertSide_close {
    position: absolute;
    width: 0.4rem;
    height: 0.4rem;
    top: 0.36rem;
    left: 6.6rem;
    cursor: pointer;
}
.pop_warp #pop_warp_close {
    position: absolute;
    width: 0.4rem;
    height: 0.4rem;
    top: 0.3rem;
    left: 6.5rem;
    cursor: pointer;
}
/* tw登录 */
.twlogin {
    background: url(../images/login_bg.png) no-repeat;
    background-size: 100% 100%;
    width: 7.14rem;
    height: 3.9rem;
    margin: 0 auto;
    position: relative;
}
.twlogin #twLogin_close {
    position: absolute;
    width: 0.4rem;
    height: 0.4rem;
    top: 0.36rem;
    left: 6.4rem;
    cursor: pointer;
}
.twlogin .tw_btn {
    background: url(../images/tw_btn.png) no-repeat;
    background-size: 100% 100%;
    width: 2.94rem;
    height: 0.68rem;
    position: absolute;
    top: 2rem;
    left: 50%;
    margin-left: -1.47rem;
    cursor: pointer;
}
/* 弹窗剩余次数 */
.use_num {
    background: url(../images/use_num.png) no-repeat;
    background-size: 100% 100%;
    width: 7.14rem;
    height: 3.16rem;
    margin: 0 auto;
}
/*收缩文本*/
.ellips{
    text-overflow: ellipsis;
    white-space: nowrap;/*禁止自动换行*/
    overflow: hidden;
    padding-right: 0.4rem;
}
.ellips em{
    display:inline;
}


.w_rotate_next{
    width: 100%;
    background: url(../images/bg3.png) no-repeat;
    background-size: 100% 100%;
    position: relative;
    overflow: hidden;
    z-index: 5;
}
.rotate_next{
    display: inline-block;
    width:0.35rem;
    height: 0.35rem;
    background: url(../images/rotate_next.png) no-repeat 0 0;
    -moz-background-size: 0.35rem 0.35rem;
         background-size: 0.35rem 0.35rem;
    text-indent: -999em;
    position: absolute;
    right: 0.25rem;
    top: 0;
}
.postt1 .rotate_next{
    right: 0.25rem;
    top: 2.25rem;
}

.postt2 .rotate_next{
    right: 0.25rem;
    top: 0.75rem;
}


.retate_a{
    -webkit-transform: rotate(0deg);
       -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.retate_b{
    -webkit-transform: rotate(90deg);
       -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
            transform: rotate(90deg);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}



/* 人物移动banner 效果 */
#yd_list{position: relative;width: 100%;}



/* fb login */
.fblogin{width: 94%;margin: 0 auto;border: 1px solid #ca8000;position: relative;}
#alertInfo .fblogin .close{
    position: absolute;
    right: 0.2rem;
    top: 50%;
    width: 0.5rem;
    height: 0.5rem;
    background: url(../images/close_2.png) no-repeat 0 0;
    margin-top: -0.25rem;
    -moz-background-size: 0.5rem 0.5rem;
         background-size: 0.5rem 0.5rem;
    text-indent: -999em;
}
.fblogin h2{position: relative;text-align: center;font-size: 0.24rem;color: #ffd541;height: 0.74rem;line-height: 0.74rem;background: #191919;}
.fblogin .fblog_cen {background: #2a2a2a;padding: 0.65rem 0 1.05rem;border-top: 1px solid #494949;}
.fblogin .fblog_cen p{text-align: center;color: #fff;font-size: 0.2rem;}
.btn_fblogin{width: 3.55rem;height: 0.73rem;background: url(../images/btn_fblogin.png) no-repeat 0 0;-moz-background-size: 3.55rem 0.73rem;background-size: 3.55rem 0.73rem;margin: 0.15rem auto 0;}

/* pop 兑换码  css 个人动态*/
.userPrize{
    background: url(../images/record_bg.png) no-repeat;
    background-size: 100% 100%;
    width: 7.14rem;
    height: 9.97rem;
    margin: 0 auto;
    position: relative;
}

#alertInfo .userPrize .close,#alertInfo .pop_Prize .close,#alertInfo .alert_faq .close{
    position: absolute;
    right: 0.2rem;
    top: 50%;
    width: 0.5rem;
    height: 0.5rem;
    background: url(../images/close_2.png) no-repeat 0 0;
    margin-top: -0.25rem;
    -moz-background-size: 0.5rem 0.5rem;
         background-size: 0.5rem 0.5rem;
    text-indent: -999em;
}

.userPrize .th { width: 80%; margin: 0 auto; position: relative; top: 1.2rem;}
.userPrize table th { color:#000; width:50%; text-align: center; font-weight: normal; padding: 0.05rem 0; font-size: 0.16rem; border: none; position: relative;}
.userPrize table tr th { color: #b50000; font-size: 0.2rem;width: 50%;background: #b50000;color: #fff;padding: 0.1rem 0; }
.userPrize .etable { margin: 0 auto; width: 80%; height: 6.8rem; overflow: auto; color: #b50000; position: relative; top: 1.5rem; border: 0.01rem solid #b50000;}
.userPrize .etable table {
    width: 100%;
}
.userPrize .etable table tr { 
    width: 100%;
    border-bottom: 0.01rem solid #b50000;
    font-size: 0.16rem; 
    text-align: center;
}
.userPrize .etable table tr td {
    position: relative;
    width: 50%;
}
.userPrize table th:nth-child(odd):after,.userPrize table td:nth-child(odd):after{
    content: '';
    width: 1px;
    height:100%;
    position: absolute;
    top: 0;
    right: 0;
    background:#b50000;
}
.userPrize table th:nth-child(odd):after{
    background:#fff;
    height: 80%;
    top: 10%;
}

/* 抽奖展示 */
.pop_Prize{
    position: relative;
    background: url(../images/award_bg.png) no-repeat;
    background-size: 100% 100%;
    width: 7.14rem;
    height: 9.97rem;
    margin: 0 auto;
}

.pop_Prize h2{position: relative;text-align: center;font-size: 0.24rem;color: #ffd541;height: 0.74rem;line-height: 0.74rem;background: #191919;}
.prize_img{
    width: 2.18rem;
    height: 2.18rem;
    position: absolute;
    top: 1.1rem;
    left: 50%;
    margin-left: -1.05rem;
}

.prize_img img{    
    width: 2.18rem;
    height: 2.18rem;
    margin: 0 auto;
}

.pop_Prize  .lb_name{
    width: 100%;
    text-align: center;
    font-size:0.46rem;
    color: #ffd43f;
    position: absolute;
    top: 3.5rem;
    /* left: 50%; */
    /* margin-left: -1.2rem; */
    white-space: nowrap;
}
.pop_Prize  p{text-align: center;color: #fff;font-size: 0.26rem;margin-bottom: 0.2rem;}
.pop_Prize dd{
    text-align: center;
    font-size: 0.2rem;
    color: #fff;
}

.pop_Prize .input{
    text-align: center;
    color: #232323;
    font-size: 0.28rem;
    line-height: 0.94rem;
    background: url(../images/cdk_bg.png) no-repeat;
    background-size: 100% 100%;
    width: 6.06rem;
    height: 0.94rem;
    position: absolute;
    top: 6rem;
    left: 50%;
    margin-left: -3.03rem;
}
.pop_Prize .copyBtn{
    background: url(../images/copy_btn.png) no-repeat;
    background-size: 100% 100%;
    width: 4.02rem;
    height: 0.94rem;
    position: absolute;
    top: 6.8rem;
    left: 50%;
    margin-left: -2.01rem;
}
.hr_x{
    width:6.12rem;;
    height: 0.02rem;
    background: #ca8000;
    margin: 0.3rem auto;
}

.down_cen{
    width: 6.2rem;
    height: 0.85rem;
    position: absolute;
    top: 8.2rem;
    left: 50%;
    margin-left: -3.1rem;
    display: flex;
    justify-content: space-between;
}

.down_cen a{
    width: 2.96rem;
    height: 0.85rem;
}
.down_cen a img{width: 100%;}

.mCSB_scrollTools{
    right: 0px;
    width: 1px;
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
    background-color: #ca8000;
    width: 1px;
}

.alert_faq{
    width: 99%;
    border: 1px solid #ca8000;
    height: 5rem;
    overflow: hidden;
    background: #2a2a2a;
    margin: 0 auto;
}
.alert_faq h2{
    position: relative;text-align: center;font-size: 0.24rem;color: #ffd541;height: 0.74rem;line-height: 0.74rem;background: #191919;
}
.faq_cen{
    margin: 0 auto;
    height: 4rem;
    overflow: hidden;
    padding-bottom: 0.15rem;
}

.faq_cen p{color: #fff;font-size: 0.2rem;text-indent: 1em;padding:0.15rem 0; }
.faq_cen .faq_img{height: 4rem;margin: 0 auto;display: block;}


.landscape{
    display: none;
    position: fixed;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #000;
    z-index: 99999;
}

.mod-orient-layer__desc{
    font-size: 0.24rem;
    color: #fff;
    text-align: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 45%;

}




/* add 20181108 */
.glp,.app{position: relative;}

.free{
    width: 1.33rem;
    height: 0.58rem;
    position: absolute;
    right: 0;
    bottom: -0.3rem;
    -webkit-animation-name: scaleDraw; /*关键帧名称*/
    -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
    -webkit-animation-iteration-count: infinite;  /*动画播放的次数*/
    -webkit-animation-duration: 3s; /*动画所花费的时间*/
}

.free img{
    width: 100%;
}

/* 动画 缩放 */
@-webkit-keyframes scaleDraw {  /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
            0%{
                -webkit-transform: scale(0.9);
                        transform: scale(0.9);  /*开始为原始大小*/
            }
            25%{
                -webkit-transform: scale(1.1);
                        transform: scale(1.1); /*放大1.1倍*/
            }
            50%{
                -webkit-transform: scale(0.9);
                        transform: scale(0.9);
            }
            75%{
                -webkit-transform: scale(1.1);
                        transform: scale(1.1);
            }
            100%{
                -webkit-transform: scale(0.9);
                        transform: scale(0.9);
            }
        }
@-moz-keyframes scaleDraw {  /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
            0%{
                -moz-transform: scale(0.9);
                     transform: scale(0.9);  /*开始为原始大小*/
            }
            25%{
                -moz-transform: scale(1.1);
                     transform: scale(1.1); /*放大1.1倍*/
            }
            50%{
                -moz-transform: scale(0.9);
                     transform: scale(0.9);
            }
            75%{
                -moz-transform: scale(1.1);
                     transform: scale(1.1);
            }
            100%{
                -moz-transform: scale(0.9);
                     transform: scale(0.9);
            }
        }
@keyframes scaleDraw {  /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
            0%{
                -webkit-transform: scale(0.9);
                   -moz-transform: scale(0.9);
                        transform: scale(0.9);  /*开始为原始大小*/
            }
            25%{
                -webkit-transform: scale(1.1);
                   -moz-transform: scale(1.1);
                        transform: scale(1.1); /*放大1.1倍*/
            }
            50%{
                -webkit-transform: scale(0.9);
                   -moz-transform: scale(0.9);
                        transform: scale(0.9);
            }
            75%{
                -webkit-transform: scale(1.1);
                   -moz-transform: scale(1.1);
                        transform: scale(1.1);
            }
            100%{
                -webkit-transform: scale(0.9);
                   -moz-transform: scale(0.9);
                        transform: scale(0.9);
            }
        }
.login_award .award1 {
    position: absolute;
    left: 50% ;
    margin-left: -3.715rem;
    width: 7.43rem;
    height: 1.5rem;
    top: 2.6rem;
}
.login_award .award2 {
    position: absolute;
    left: 50% ;
    margin-left: -3.715rem;
    width: 7.43rem;
    height: 1.5rem;
    top: 4.8rem;
}
.login_award .award3 {
    position: absolute;
    left: 50% ;
    margin-left: -3.715rem;
    width: 7.43rem;
    height: 1.5rem;
    top: 7rem;
}
.login_award .award4 {
    position: absolute;
    left: 50% ;
    margin-left: -3.715rem;
    width: 7.43rem;
    height: 1.5rem;
    top: 9.2rem;
}
.shake-horizontal {
    -webkit-animation-name: shake-slow;
    -ms-animation-name: shake-slow;
    animation-name: shake-slow;
    -webkit-animation-duration: 7s;
    -ms-animation-duration: 7s;
    animation-duration: 7s;
    -webkit-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -ms-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: 0s;
    -ms-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-play-state: running;
    -ms-animation-play-state: running;
    animation-play-state: running;
}

@keyframes shake-slow {
    0% {
        transform: translate(0px, 0px) rotate(0deg);
    }
    2% {
        transform: translate(-7px, 0px) rotate(0deg);
    }
    4% {
        transform: translate(7px, 0px) rotate(0deg);
    }
    6% {
        transform: translate(5px, 0px) rotate(0deg);
    }
    8% {
        transform: translate(9px, 0px) rotate(0deg);
    }
    10% {
        transform: translate(9px, 0px) rotate(0deg);
    }
    12% {
        transform: translate(3px, 0px) rotate(0deg);
    }
    14% {
        transform: translate(9px, 0px) rotate(0deg);
    }
    16% {
        transform: translate(-6px, 0px) rotate(0deg);
    }
    18% {
        transform: translate(8px, 0px) rotate(0deg);
    }
    20% {
        transform: translate(-2px, 0px) rotate(0deg);
    }
    22% {
        transform: translate(-1px, 0px) rotate(0deg);
    }
    24% {
        transform: translate(0px, 0px) rotate(0deg);
    }
    26% {
        transform: translate(-6px, 0px) rotate(0deg);
    }
    28% {
        transform: translate(-5px, 0px) rotate(0deg);
    }
    30% {
        transform: translate(-4px, 0px) rotate(0deg);
    }
    32% {
        transform: translate(-10px, 0px) rotate(0deg);
    }
    34% {
        transform: translate(9px, 0px) rotate(0deg);
    }
    36% {
        transform: translate(4px, 0px) rotate(0deg);
    }
    38% {
        transform: translate(-1px, 0px) rotate(0deg);
    }
    40% {
        transform: translate(2px, 0px) rotate(0deg);
    }
    42% {
        transform: translate(2px, 0px) rotate(0deg);
    }
    44% {
        transform: translate(-4px, 0px) rotate(0deg);
    }
    46% {
        transform: translate(8px, 0px) rotate(0deg);
    }
    48% {
        transform: translate(-6px, 0px) rotate(0deg);
    }
    50% {
        transform: translate(4px, 0px) rotate(0deg);
    }
    52% {
        transform: translate(-5px, 0px) rotate(0deg);
    }
    54% {
        transform: translate(6px, 0px) rotate(0deg);
    }
    56% {
        transform: translate(-5px, 0px) rotate(0deg);
    }
    58% {
        transform: translate(0px, 0px) rotate(0deg);
    }
    60% {
        transform: translate(3px, 0px) rotate(0deg);
    }
    62% {
        transform: translate(5px, 0px) rotate(0deg);
    }
    64% {
        transform: translate(-4px, 0px) rotate(0deg);
    }
    66% {
        transform: translate(-8px, 0px) rotate(0deg);
    }
    68% {
        transform: translate(4px, 0px) rotate(0deg);
    }
    70% {
        transform: translate(-5px, 0px) rotate(0deg);
    }
    72% {
        transform: translate(7px, 0px) rotate(0deg);
    }
    74% {
        transform: translate(-5px, 0px) rotate(0deg);
    }
    76% {
        transform: translate(1px, 0px) rotate(0deg);
    }
    78% {
        transform: translate(8px, 0px) rotate(0deg);
    }
    80% {
        transform: translate(8px, 0px) rotate(0deg);
    }
    82% {
        transform: translate(7px, 0px) rotate(0deg);
    }
    84% {
        transform: translate(-10px, 0px) rotate(0deg);
    }
    86% {
        transform: translate(9px, 0px) rotate(0deg);
    }
    88% {
        transform: translate(-1px, 0px) rotate(0deg);
    }
    90% {
        transform: translate(0px, 0px) rotate(0deg);
    }
    92% {
        transform: translate(-2px, 0px) rotate(0deg);
    }
    94% {
        transform: translate(5px, 0px) rotate(0deg);
    }
    96% {
        transform: translate(5px, 0px) rotate(0deg);
    }
    98% {
        transform: translate(-8px, 0px) rotate(0deg);
    }
}