:root:after {
    display: none;
    content: 'author:wangxiaolong,update:20190923';
}

html,
body {
    background: #f1f3f8;
}

.wrapper {
    min-width: 960px;
    min-height: 100%;
    margin: 0 auto;
    color: #000000;
    position: relative;
}

.gicon {
    background-position: -88px -227px;
    background-repeat: no-repeat;
    width: 12px;
    height: 12px;
}

.online_num_ico {
    background-position: 0px -227px;
    background-repeat: no-repeat;
    width: 13px;
    height: 17px;
}

.online_num_info:hover .online_num_ico {
    background-position: -21px -227px;
    background-repeat: no-repeat;
}

.online_num_info:active .online_num_ico {
    background-position: -42px -227px;
    background-repeat: no-repeat;
}

.icon_phone_live {
    background-position: -237px 0px;
    background-repeat: no-repeat;
    width: 11px;
    height: 20px;
}

.phone_live:hover .icon_phone_live {
    background-position: -237px -28px;
    background-repeat: no-repeat;
}

.phone_live:active .icon_phone_live {
    background-position: -237px -56px;
    background-repeat: no-repeat;
}

.package>i {
    background-position: -142px -161px;
    background-repeat: no-repeat;
    width: 22px;
    height: 22px;
}

.recharge>i {
    background-position: -112px -161px;
    background-repeat: no-repeat;
    width: 22px;
    height: 22px;
}

.rankNo.rankNo_1,
.rankNo.rankNo_2,
.rankNo.rankNo_3 {
    background-position: -163px -199px;
    background-repeat: no-repeat;
    width: 17px;
    height: 12px;
}

.rankNo.rankNo_2 {
    background-position: -63px -227px;
    background-repeat: no-repeat;
}

.rankNo.rankNo_3 {
    background-position: -188px -199px;
    background-repeat: no-repeat;
}

.rank_number>i {
    background-position: -213px -199px;
    background-repeat: no-repeat;
    width: 15px;
    height: 12px;
}

.emoji_btn {
    background-position: 0px -199px;
    background-repeat: no-repeat;
    width: 23px;
    height: 20px;
}

.emoji_btn:hover {
    background-position: -203px -161px;
    background-repeat: no-repeat;
}

.emoji_btn:active {
    background-position: -172px -161px;
    background-repeat: no-repeat;
}

.graph {
    background-position: -115px -199px;
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
}

.lookat_title>a:hover .graph {
    background-position: -134px -120px;
    background-repeat: no-repeat;
}

.lookat_title>a:active .graph {
    background-position: -139px -199px;
    background-repeat: no-repeat;
}

.hov_play>i {
    background-position: -95px 0px;
    background-repeat: no-repeat;
    width: 55px;
    height: 54px;
}

.visitor:before {
    background-position: -237px -84px;
    background-repeat: no-repeat;
    width: 10px;
    height: 10px;
}

.icon_empty {
    background-position: 0px -78px;
    background-repeat: no-repeat;
    width: 69px;
    height: 75px;
    display: block;
    margin: 0 auto;
}

.nav_charge:before {
    background-position: -197px -112px;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
}

.nav_charge:hover:before {
    background-position: -158px -38px;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
}

.nav_concern:before {
    background-position: -95px -120px;
    background-repeat: no-repeat;
    width: 31px;
    height: 30px;
}

.nav_concern:hover:before {
    background-position: -158px 0px;
    background-repeat: no-repeat;
    width: 31px;
    height: 30px;
}

.nav_index:before {
    background-position: -158px -76px;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
}

.nav_index:hover:before {
    background-position: -158px -114px;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
}

.nav_mall:before {
    background-position: -197px -37px;
    background-repeat: no-repeat;
    width: 32px;
    height: 29px;
}

.nav_mall:hover:before {
    background-position: -197px 0px;
    background-repeat: no-repeat;
    width: 32px;
    height: 29px;
}

.nav_download:before {
    background-position: -197px -74px;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
}

.nav_download:hover:before {
    background-position: 0px -161px;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
}

.login_before>a:before {
    background-position: -38px -161px;
    background-repeat: no-repeat;
    width: 29px;
    height: 30px;
}

.login_before>a:hover:before {
    background-position: -75px -161px;
    background-repeat: no-repeat;
    width: 29px;
    height: 30px;
}

.icon_fans_empty {
    background-position: 0px 0px;
    background-repeat: no-repeat;
    width: 87px;
    height: 70px;
    display: block;
    margin: 0 auto;
}

.play_auto_icon {
    background-position: -95px -62px;
    background-repeat: no-repeat;
    width: 50px;
    height: 50px;
}

.nav_report_ico {
    background-position: -31px -199px;
    background-repeat: no-repeat;
    width: 20px;
    height: 17px;
}

.nav_report_info:hover .nav_report_ico {
    background-position: -87px -199px;
    background-repeat: no-repeat;
}

.nav_report_info:active .nav_report_ico {
    background-position: -59px -199px;
    background-repeat: no-repeat;
}

.play_room {
    padding: 10px 10px 10px 100px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.play_room .wrapper {
    width: 100%;
}

.play_wp {
    position: relative;
}

.play_top {
    margin-bottom: 10px;
    position: relative;
    padding-right: 360px;
}

.play_live,
.play_interact {
    background: #FFFFFF;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.play_live {
    width: 100%;
}

.play_main {}

.play_box {
    position: relative;
}

.play_interact {
    width: 350px;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    overflow: hidden;
}

.active_gift {
    height: 75px;
    padding: 0 70px 0 155px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    z-index: 11;
}

.play_interact_part1 {
    position: relative;
    z-index: 2;
    border-bottom: 1px solid #E5E5E5;
}

.play_interact_part2 {
    background: #F8F8F8;
}

.play_interact_part3 {
    position: relative;
    background: #FFFFFF;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: 44px;
    border-top: 1px solid #E5E5E5;
}

.play_download_slide {
    margin-bottom: 10px;
}

.play_download_slide a {
    display: block;
    background: url("../img/play/download_banner.png") no-repeat center top;
    background-size: cover;
    height: 100px;
}

.aside {
    text-align: center;
    width: 90px;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    background: #2F2F2F;
    z-index: 12;
}

.nav_logo .logo {
    width: 100%;
}

.nav_logo>a {
    display: block;
    width: 100%;
    margin: 0 auto 20px;
}

.nav>li {
    position: relative;
}

.nav>li>a:hover,
.nav>li>a:active,
.login_before a:hover {
    color: #FFFFFF;
}

.login_before>a:before {
    content: "";
    margin: 0 auto;
    display: block;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    opacity: 0;
}

.nav>li>a:before {
    display: block;
}

.aside .login_before>a:before {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    opacity: 1;
}

.aside .login_success>a {
    width: 50px;
    height: 50px;
}

.aside .login_success p {
    padding: 6px 2px;
}

.navdl_pop {
    background: #fff;
    border-radius: 4px;
    position: absolute;
    left: 100%;
    top: -30px;
    padding: 20px 0 0;
    display: none;
    -webkit-box-shadow: 0px 1px 7px rgba(9, 2, 4, .14);
    box-shadow: 0px 1px 7px rgba(9, 2, 4, .14);
}

.navdl_pop img {
    width: 120px;
    height: 120px;
    margin: 0 30px;
}

.navdl_pop p {
    height: 40px;
    line-height: 40px;
    color: #525252;
    font-size: 14px;
}

.navdl_pop:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    top: 35px;
    left: -20px;
    border-width: 5px 10px;
    border-style: dashed solid dashed dashed;
    border-color: transparent #fff transparent transparent;
}

.aside .userarea {
    position: relative;
}

.aside .login_success>a {
    position: relative;
    display: block;
    width: 36px;
    height: 36px;
    margin: 0 auto 10px;
}

.aside .login_success>a>img {
    width: 100%;
    width: 100%;
    margin: 0 auto;
    border-radius: 50%;
}

.aside .login_success>a>i {
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 0;
    border: 1px solid #2f2f2f;
    border-radius: 50%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.aside .login_success>p {
    width: 80%;
    margin: 5px auto;
    padding: 3px 0s;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 12px;
    text-align: center;
    color: #fff;
    border-radius: 8px;
    background: #000000;
    background: rgba(0, 0, 0, 0.80);
    color: #FFEE00;
    line-height: 1;
}

.gicon {
    display: block;
    margin: 2px auto 0;
}

.nav>li>a:before {
    content: "";
    display: none;
    margin: 0 auto 5px;
}

.nav_qr_img {
    background-image: url(../img/play/spr_play_down.png?v=2020228);
    background-position: -236px 0px;
    background-repeat: no-repeat;
    width: 80px;
    height: 80px;
    margin: 0 auto;
}

.app_qr_txt {
    color: #fff;
    font-size: 12px;
    line-height: 1.3;
    padding-top: 7px;
}

.nav_pop {
    left: 100%;
    top: -30px;
    position: absolute;
    min-width: 286px;
    height: 300px;
    background: #ffffff;
    border-radius: 6px;
    -webkit-box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.20);
    box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.20);
}

.nav_pop:before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    top: 35px;
    left: -9px;
    border-width: 5px 10px 5px 0;
    border-style: solid;
    border-color: transparent #fff transparent transparent;
}

.user_info {
    top: -22px;
}

.user_iwp {
    padding: 20px 5px;
}

.user_avatar {
    width: 60px;
    height: 60px;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 50%;
    margin: 0 auto 10px;
}

.user_name {
    font-size: 14px;
    font-weight: bold;
}

.user_icon {
    margin: 5px auto 24px;
    white-space: nowrap;
}

.user_pro {
    white-space: nowrap;
}

.userpw_prog_wp {
    display: inline-block;
    height: 20px;
    background: #EDEDED;
    border-radius: 3px;
    padding: 0 10px;
    color: #9B9B9B;
    margin-left: 13px;
    margin-bottom: 28px;
}

.userpw_prog,
.userpw_pro_txt {
    display: inline-block;
    vertical-align: middle;
}

.userpw_prog {
    width: 120px;
    height: 3px;
    border-radius: 3px;
    background: #D0D0D0;
    position: relative;
    margin-right: 25px;
}

.userpw_pro {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    border-radius: 3px;
    background: #FF5A6A;
    background: -webkit-gradient(linear, left top, right top, from(0%), to(#FA60C5));
    background: linear-gradient(90deg, 0%, #FA60C5 100%);
}

.user_value {
    display: inline-block;
    vertical-align: middle;
}

.user_value {
    width: 165px;
    text-align: left;
}

.user_value>span {
    font-weight: bold;
    font-size: 18px;
    display: inline-block;
    vertical-align: middle;
    width: 120px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.user_charge_btn {
    display: inline-block;
    width: 100px;
    height: 26px;
    line-height: 26px;
}

.user_btn {
    border-top: 1px solid #E5E5E5;
}

.user_center_btn {
    display: block;
    font-size: 14px;
    height: 45px;
    line-height: 45px;
}

.user_logout {
    position: absolute;
    top: 10px;
    right: 10px;
}

.user_center_btn:hover,
.user_logout:hover {
    color: #FF2C55;
}

.user_center_btn:active,
.user_logout:active {
    color: #E8002D;
}

.myrss_pop {
    text-align: left;
    position: relative;
    height: inherit;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 30px 15px 0;
}

.myrss_pop_con {
    position: absolute;
    top: 65px;
    bottom: 0px;
    left: 15px;
    right: 0;
    overflow: hidden;
    padding-right: 15px;
}

.myrss_pop_con h3 {
    margin-bottom: 16px;
}

.myrss_pop_con h3 span {
    color: #FF2C55;
}

.myrss_list_wp {
    position: absolute;
    left: 0;
    top: 0;
}

.myrss_list {
    position: relative;
}

.myrss_list.offline {
    padding-top: 10px;
}

.myrss_list.offline:before {
    content: "";
    display: block;
    width: 200px;
    height: 2px;
    background: #E5E5E5;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -100px;
}

.myrss_item {
    margin-bottom: 16px;
}

.myrss_link {
    display: block;
}

.myrss_img,
.myrss_info_wp {
    display: inline-block;
    vertical-align: middle;
}

.myrss_img {
    width: 58px;
    height: 58px;
    margin-right: 5px;
    position: relative;
}

.myrss_img>img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.myrss_info_wp {
    width: 186px;
}

.myrss_name,
.myrss_txt,
.myrss_visitor {
    display: inline-block;
    vertical-align: middle;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.myrss_name {
    font-size: 14px;
    font-weight: bold;
    width: 120px;
}

.cur .myrss_name {
    color: #FF2C55;
}

.myrss_name em {
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.myrss_info {
    color: #9B9B9B;
    margin-top: 5px;
}

.myrss_txt {
    width: 100px;
}

.myrss_visitor {
    width: 60px;
    text-align: right;
}

.myrss_visitor:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAAH6Nf8rAAAABGdBTUEAALGPC/xhBQAAANpJREFUGBltT6sSgkAUZVeGYNFgMBq0OiTGSkCawWIxGfwog98BS6AaCH6CMwazldd6zg6X5C1nz2Pvw/OGUkVRHPu+X3jGmLO21k6dk+f5VTK0Qk2G4FKJpajg+w7qlu80TW+qLEu/rusLhaG+DtmEM0R1DTEv4ky2oeFE4JskSZIHkRNPwBkJKwiCO5OjQLFt24NbiQRbrLDFnm8p/DJxHL/IZQ4vmkhAsOu60XePqqqmCK4lINg0zYYeucqyLFJKhWL+Q5z69BHi4h+gK3Qe99ZaWxyCnJ3/AIHyZUx0XdjQAAAAAElFTkSuQmCC');
    width: 10px;
    height: 10px;
    margin: -3px 2px 0 0;
}

.aside .ico_live {
    border: 2px solid #ffffff;
    border-radius: 50%;
}

.anchor_info {
    height: 80px;
    padding: 15px 20px;
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 11;
}

.anchor_info_img,
.ai_content {
    display: inline-block;
    vertical-align: middle;
}

.anchor_info_img {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 15px;
}

.anchor_info_img>a {
    display: block;
    border-radius: 100%;
    overflow: hidden;
}

.anchor_info_img>a img {
    width: 100%;
    height: 100%;
    border-radius: 100%;
}

img.photo-bg {
    position: absolute;
    left: -10%;
    top: -14%;
    width: 120%!important;
    height: 120%!important;
}

.anchor_info_img>div {
    position: absolute;
    bottom: -54px;
    left: -55px;
    z-index: 999;
    height: 50px;
    padding: 6px 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 5px;
    background: #fff;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .29);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .29);
}

.anchor_info_img>div p {
    max-width: 215px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.anchor_info_img>div:before {
    position: absolute;
    top: -22px;
    left: 72px;
    display: block;
    content: '';
    width: 0;
    height: 0;
    border-width: 12px 8px;
    border-style: dashed dashed solid dashed;
    border-color: transparent transparent #fff transparent;
}

.ai_content {}

.aic_name_wp {
    margin-bottom: 5px;
}

.aic_name,
.aic_message_wp {
    display: inline-block;
    vertical-align: middle;
}

.aic_name,
.aic_name>span {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.aic_name {
    font-size: 17px;
    font-weight: bold;
    max-width: 200px;
}

.aic_name>span {
    display: block;
}

.icon_aic_message {
    display: block;
    cursor: pointer;
}

.aic_Lv {
    position: relative;
}

.aic_Lv .iczb-hostlv:hover~.aic_pop,
.aic_pop:hover {
    display: block;
}

.aic_pop {
    display: none;
    min-width: 230px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 8px 6px;
    background: #ffffff;
    border-radius: 6px;
    position: absolute;
    top: 26px;
    left: -25px;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.20);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.20);
}

.aic_pop:before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    top: -9px;
    left: 36px;
    border-width: 0 5px 10px 5px;
    border-style: solid;
    border-color: transparent transparent #fff transparent;
}

.aicp_pro {
    margin: 12px 0 8px;
    white-space: nowrap;
}

.aicp_txt_1 {
    font-size: 14px;
}

.aicp_txt_1 em {
    color: #FF2C55;
}

.aicp_txt_2 {
    color: #9B9B9B;
}

.aicppw_prog_wp {
    display: inline-block;
    height: 20px;
    margin-left: 10px;
    background: #EDEDED;
    border-radius: 3px;
    padding: 0 10px;
    color: #9B9B9B;
}

.aicppw_prog,
.aicppw_pro_txt {
    display: inline-block;
    vertical-align: middle;
}

.aicppw_prog {
    width: 90px;
    height: 3px;
    border-radius: 3px;
    background: #D0D0D0;
    position: relative;
    margin-right: 3px;
}

.aicppw_pro {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 3px;
    background: #FF5A6A;
    background: -webkit-gradient(linear, left top, right top, from(#FF5A6A), to(#FA60C5));
    background: linear-gradient(90deg, #FF5A6A 0%, #FA60C5 100%);
}

.anchor_info_right {
    position: absolute;
    right: 10px;
    bottom: 12px;
}

.anchor_info_right>div {
    display: inline-block;
    vertical-align: bottom;
    margin-left: 20px;
}

.gzbtn {
    height: 30px;
    line-height: 30px;
    text-align: center;
    width: 100px;
    position: relative;
}

.gzbtn>a,
.gzbtn>span {
    float: left;
    display: block;
    width: 49%;
}

.gzbtn>a {
    border-radius: 6px 0 0 6px;
}

.gzbtn>span {
    border-radius: 0 6px 6px 0;
    background: #ff8ca7;
    color: #FFFFFF!important;
    cursor: default;
}

.gzbtn.ygz>a,
.gzbtn.ygz>a:hover .gzbtn.ygz>a:active {
    background-color: #FF5A6A;
    background: -webkit-gradient(linear, left top, right top, from(#FA60C5), to(#FF5A6A));
    background: linear-gradient(90deg, #FA60C5 0%, #FF5A6A 100%);
}

.ygz_pop {
    background: #FFFFFF;
    position: absolute;
    left: -85px;
    top: 42px;
    color: #000000;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 192px;
    padding: 10px 20px;
    border-radius: 6px;
    -webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.40);
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.40);
}

.ygz_pop:before,
.ygz_pop:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0px 5px 10px 5px;
    border-color: transparent transparent #fff transparent;
    position: absolute;
    right: 77px;
    top: -10px;
}

.ygz_pop:before {
    border-width: 0px 6px 11px 6px;
    border-color: transparent transparent #e0dede transparent;
    right: 76px;
    top: -11px;
}

.ygz_sure_btn>a {
    display: inline-block;
    vertical-align: middle;
    width: 60px;
    height: 20px;
    line-height: 20px;
    margin: 0 5px;
    color: #000000;
    border-radius: 3px;
    border: 1px solid currentColor;
}

.ygz_sure_btn>a.cancle {
    color: #FF2C55;
}

.anchor_info_right>div {
    color: #9B9B9B;
}

.anchor_info_right>div>span:hover {
    color: #FF2C55;
}

.anchor_info_right>div>span:active {
    color: #E8002D;
}

.online_num_ico,
.nav_report_ico {
    display: inline-block;
    vertical-align: middle;
    margin-top: -3px;
}

.nav_report {
    cursor: pointer;
}

.play_area {
    position: relative;
    width: 100%;
    height: 378px;
    overflow: hidden;
}

.play_video,
.play_loading,
.unplay_wp,
.play_auto_tips {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.h5_video_container video {
    top: 0
}

.play_loading {
    background: #191c1f;
}

.play_loading_img,
.play_loading_img img,
.play_loading_cover {
    width: 100%;
    height: 100%;
}

.play_loading_img img {
    -o-object-fit: cover;
    object-fit: cover;
}

.play_loading_icon {
    display: block;
    width: 39px;
    height: 34px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -17px 0 0 -19px;
    background: url("../img/play/spr_loading.png") 0 0;
    -webkit-animation: ani_loading .5s steps(6) infinite;
    animation: ani_loading .5s steps(6) infinite;
}

@-webkit-keyframes ani_loading {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -234px 0;
    }
}

@keyframes ani_loading {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -234px 0;
    }
}

.flash_down {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    background: #191c1f;
    color: #fff;
    text-align: center;
}

.flash_down p {
    width: 100%;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -10px;
}

.flash_down p a {
    color: #ff0000;
}

.unplay_wp {
    background: #000000;
    background: rgba(0, 0, 0, 0.75);
}

.unplay {
    width: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.unplay_txt {
    position: relative;
    text-align: center;
    font-size: 14px;
    color: #FFFFFF;
    margin-bottom: 20px;
}

.unplay_list ul {
    text-align: center;
}

.unplay_list ul li {
    display: inline-block;
    margin: 15px;
    position: relative;
}

.unplay_list ul li a {
    display: block;
    width: 140px;
    height: 140px;
    overflow: hidden;
    border-radius: 6px;
}

.unplay_list ul li a img {
    display: block;
    width: 140px;
    height: 140px;
    overflow: hidden;
    border-radius: 6px;
}

.unplay_list .unplay_info {
    width: 100%;
    padding: 18px 0 6px 0;
    text-indent: 8px;
    position: absolute;
    left: 0;
    bottom: 0;
    text-align: left;
    background: #000000;
    background: rgba(0, 0, 0, .3);
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, .5)));
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .5));
    border-radius: 0 0 5px 5px;
}

.unplay_list .unplay_info p {
    color: #fff;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.unplay_list .ico-live {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 1;
}

.kick-mask {
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #000;
}

.play_auto_tips {
    background: #000000;
    background: rgba(0, 0, 0, .6);
    z-index: 1;
}

.play_auto_con {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: #FFFFFF;
    font-size: 14px;
}

.play_auto_con em {
    color: #FF2C55;
}

.play_auto_icon {
    display: block;
    margin: 0 auto 20px;
}

.play_auto_btn {
    display: block;
    margin: 20px auto 0;
    width: 118px;
    height: 38px;
    line-height: 38px;
    border-radius: 6px;
    border: 1px solid #FF2C55;
    background: #000000;
    background: rgba(0, 0, 0, 0.40);
    text-align: center;
    -webkit-transition: background .5s;
    transition: background .5s;
}

.play_auto_btn:hover {
    background: #000000;
    background: rgba(0, 0, 0, 0.8);
}

.timer {
    position: absolute;
    top: 50px;
    right: 10px;
}

.timer_wp {
    position: relative;
    margin: 0 auto;
    -webkit-transition: all .5s ease-out;
    transition: all .5s ease-out;
}

.timer_wp+.timer_wp {
    margin-top: 10px;
}

.timer_wp.timer_hide {
    position: absolute;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    opacity: 0;
}

.timer_wp.timer_hide~.timer_wp {
    -webkit-animation: ani_timer .5s both ease-out;
    animation: ani_timer .5s both ease-out;
}

@-webkit-keyframes ani_timer {
    from {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
    to {
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes ani_timer {
    from {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
    to {
        -webkit-transform: none;
        transform: none;
    }
}

.timer_top>span {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 44px;
    height: 18px;
    line-height: 17px;
    border-radius: 9px;
    color: #fff;
    text-align: center;
}

.timer_d {
    background: #ff3a3a;
}

.timer-s {
    background: #00e888;
}

.timer_top_img {
    width: 60px;
    height: 60px;
    margin: 0 auto;
    padding: 5px 0 6px;
    overflow: hidden;
}

.timer_top_img img {
    width: inherit;
}

.timer_top_text {
    padding: 6px 12px;
    border-radius: 10px;
    background: #000000;
    background: rgba(0, 0, 0, .35);
    font-size: 14px;
    color: #fff;
    text-align: center;
    line-height: 1.2;
}

.timer_top_text p+p {
    color: #de2977;
}

.play-pc .timer_top_img {
    padding: 5px 0;
}

.play_notice {
    position: absolute;
    width: 100%;
    left: 0;
    top: 40px;
    z-index: 6;
}

.notice_customizable {
    position: absolute;
    max-height: 50px;
    border-radius: 25px;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 3px 54px 5px 5px;
    white-space: nowrap;
    background: #006cff;
    background: #7022a7;
    background: #fe663b;
}

.notice_custom_head,
.notice_custom_txt,
.notice_custom_txt em,
.notice_custom_icon {
    display: inline-block;
    vertical-align: middle;
}

.notice_custom_head {
    width: 44px;
    height: 44px;
    border-radius: 100%;
}

.notice_custom_head>img {
    width: 100%;
    height: auto;
    border-radius: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.notice_custom_txt {
    margin-left: 5px;
}

.notice_custom_txt,
.notice_custom_txt a {
    color: #ffffff;
}

.notice_custom_txt em {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.notice_custom_txt em {
    color: #ffea00;
    max-width: 70px;
    margin-top: -3px;
}

.notice_custom_icon {
    margin-top: -3px;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAtklEQVQokZXSsSrFARTH8a9rMhgMnoCJWSmTsnkYs1VKKW/gIUiZhDdQ12KyGJTJLPoYkDvcq79fneV3+nY65/xCU2qEQ4xn9JtmLuLMl14n/AVcYn0auIJ7v5oE53CKJyyFZ7P1A95hH/N4wEF/QJPgNt6whT2MRw3TTXVb7VbjanUoWPVefVSquaHgRrVTXVVr1WN4GbDjNY6/jzPG0X/eEU6+By3PCsD5FHCEC2yakZxBkfsEms205VGAgzEAAAAASUVORK5CYII=');
    width: 14px;
    height: 12px;
}

.notice_custom_pic {
    width: 54px;
    height: 54px;
    position: absolute;
    right: -22px;
    top: 50%;
    margin-top: -27px;
}

.notice_custom_pic>img {
    width: 100%;
    height: auto;
}

.notice_custom_href {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 1;
    background: transparent;
}

.notice_global_wp {
    position: absolute;
    z-index: 1;
    max-width: 446px;
    height: 32px;
    line-height: 32px;
    border-radius: 16px;
    color: #ffffff;
    background: #4881fd;
    background: rgba(72, 129, 253, .8);
    background: linear-gradient(45deg, rgba(144, 19, 254, .8), rgba(72, 129, 253, .8))
}

.notice_global_wp:after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    margin-top: -6px;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAERJREFUKBVjYICC////KwLxTCCWg4nhpYEKnYAYBO4BMdGa8sFaBr2mO0BnssICgAnGoIgGmki852mqmLSIAzqFqKQBAFBClHrxn5tcAAAAAElFTkSuQmCC') no-repeat;
    width: 12px;
    height: 12px;
}

.notice_global {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 28px 0 15px;
    overflow: hidden;
}

.notice_global_txt {
    white-space: nowrap;
    position: relative;
    left: ;
}

.notice_global_name {
    display: inline-block;
    vertical-align: middle;
    margin-top: -2px;
    color: #FDE970;
    max-width: 74px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.video_special,
.penpen_special {
    width: inherit;
    height: inherit;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    pointer-events: none;
}

.video_special img,
.penpen_special img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.penpen_special {
    z-index: 5;
}

.video_special .video_special_gift {
    width: 160px;
    height: 160px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -40px 0 0 -80px;
    -webkit-animation: gift_special 2s linear both;
    animation: gift_special 2s linear both;
    -webkit-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}

@-webkit-keyframes gift_special {
    0%,
    100% {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
    }
    20%,
    80% {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
    }
    40% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
    }
    60% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes gift_special {
    0%,
    100% {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
    }
    20%,
    80% {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
    }
    40% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
    }
    60% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@font-face {
    font-family: giftFont;
    src: url('../fonts/giftfont.eot');
    src: url('../fonts/giftfont.eot?#iefix') format('embedded-opentype'), url('../fonts/giftfont.woff') format('font-woff'), url('../fonts/giftfont.ttf') format('truetype'), url('../fonts/giftfont.svg#svgFontName') format('svg');
}

.direct_gift_wp {
    position: absolute;
    left: 10px;
    bottom: 40px;
    z-index: 5;
}

.direct_gift {
    width: 220px;
    height: 56px;
    border-radius: 28px;
    white-space: nowrap;
    margin-bottom: 15px;
    position: relative;
    position: absolute;
    left: 0;
}

.direct_gift2 {
    bottom: 20px;
}

.direct_gift1 {
    bottom: 100px;
}

@media screen and (min-width:1900px) {
    .direct_gift2 {
        bottom: 90px;
    }
    .direct_gift1 {
        bottom: 170px;
    }
}

.direct_gift[name="0"] {
    background: #000000;
    background: rgba(0, 0, 0, 0.60);
}

.direct_gift[name="1"] {
    background-image: url(../img/play/direct_gift/spr_main.png?v=2020228);
    background-position: 0px 0px;
    background-repeat: no-repeat;
    background-color: #499060;
    background-image: url(../img/play/direct_gift/spr_main.png?v=2020228);
    background-position: 0px 0px;
    background-repeat: no-repeat;
}

.direct_gift[name="2"] {
    background-image: url(../img/play/direct_gift/spr_main.png?v=2020228);
    background-position: 0px -64px;
    background-repeat: no-repeat;
    background-color: #47a6be;
    background-image: url(../img/play/direct_gift/spr_main.png?v=2020228);
    background-position: 0px -64px;
    background-repeat: no-repeat;
}

.direct_gift[name="3"] {
    background-image: url(../img/play/direct_gift/spr_main.png?v=2020228);
    background-position: 0px -128px;
    background-repeat: no-repeat;
    background-color: #ecb927;
    background-image: url(../img/play/direct_gift/spr_main.png?v=2020228);
    background-position: 0px -128px;
    background-repeat: no-repeat;
}

.direct_gift[name="4"] {
    background-image: url(../img/play/direct_gift/spr_main.png?v=2020228);
    background-position: -228px 0px;
    background-repeat: no-repeat;
    background-color: #843be4;
    background-image: url(../img/play/direct_gift/spr_main.png?v=2020228);
    background-position: -228px 0px;
    background-repeat: no-repeat;
}

.direct_gift_img,
.direct_gift_info,
.direct_gift_pic {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    z-index: 1;
}

.direct_gift_img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
}

.direct_gift_img>img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.direct_gift_info {
    width: 100px;
    margin: 0 2px;
}

.direct_gift_info>p {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    color: #ffffff;
}

.direct_gift_info>p:first-child {
    font-size: 14px;
}

.direct_gift_pic {
    white-space: nowrap;
    margin-top: -4px;
}

.direct_gift_pic>img,
.direct_gift_num {
    display: inline-block;
    vertical-align: middle;
}

.direct_gift_pic>img {
    width: 60px;
    height: auto;
}

.direct_gift_num {
    font-size: 28px;
    font-weight: bold;
    position: relative;
    color: #FFF052;
    font-family: giftFont;
    letter-spacing: 10px;
    background-image: -webkit-gradient(linear, left 0, right 0, from(#FFFFFF), to(#FFF052));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

_:-ms-lang(x),
.direct_gift_num {
    -webkit-text-fill-color: #FFF052;
}

.direct_gift_icon {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
    border-radius: inherit;
}

.direct_gift_icon:before {
    position: absolute;
    top: -2px;
    left: 0;
    width: 100px;
    height: 60px;
    display: block;
    content: '';
    background: linear-gradient(120deg, transparent 0, transparent 25%, #ffffff 25%, #ffffff 35%, transparent 35%, transparent 45%, #ffffff 45%, #ffffff 70%, transparent 70%, transparent 100%);
    background: linear-gradient(120deg, transparent 0, transparent 25%, rgba(255, 255, 255, .2) 25%, rgba(255, 255, 255, .2) 35%, transparent 35%, transparent 45%, rgba(255, 255, 255, .2) 45%, rgba(255, 255, 255, .2) 70%, transparent 70%, transparent 100%);
    -webkit-animation: direct_gift_animation 1.5s .5s linear infinite both;
    animation: direct_gift_animation 1.5s .5s linear infinite both;
}

@-webkit-keyframes direct_gift_animation {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
    }
    25% {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
    }
    50%,
    100% {
        -webkit-transform: translateX(150%);
        transform: translateX(150%);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
    }
}

@keyframes direct_gift_animation {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
    }
    25% {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
    }
    50%,
    100% {
        -webkit-transform: translateX(150%);
        transform: translateX(150%);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
    }
}

.direct_gift,
.direct_gift_icon {
    -webkit-animation: direct_gift_show .5s linear both;
    animation: direct_gift_show .5s linear both;
    -webkit-transform-origin: 0% 50%;
    -ms-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
}

@-webkit-keyframes direct_gift_show {
    0% {
        width: 56px;
    }
    100% {
        width: 220px;
    }
}

@keyframes direct_gift_show {
    0% {
        width: 56px;
    }
    100% {
        width: 220px;
    }
}

.ani.direct_gift_num {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
    -webkit-animation: fontScale .5s linear both;
    animation: fontScale .5s linear both;
}

@-webkit-keyframes fontScale {
    0%,
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    50% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
    }
}

@keyframes fontScale {
    0%,
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    50% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
    }
}

.direct_gift_ani {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -39px 0 0 -115px;
    width: 230px;
    height: 78px;
    background: url("../img/play/direct_gift/ani_round.png") -230px 0px no-repeat;
    -webkit-animation: direct_gift_roundBg 1.5s steps(1) infinite forwards;
    animation: direct_gift_roundBg 1.5s steps(1) infinite forwards;
}

@-webkit-keyframes direct_gift_roundBg {
    0% {
        background-position: -230px 0px;
    }
    5.00% {
        background-position: -2300px 0px;
    }
    10.00% {
        background-position: -460px 0px;
    }
    15.00% {
        background-position: -690px 0px;
    }
    20.00% {
        background-position: -920px 0px;
    }
    25.00% {
        background-position: -1150px 0px;
    }
    30.00% {
        background-position: -1380px 0px;
    }
    35.00% {
        background-position: -1610px 0px;
    }
    40.00% {
        background-position: -1840px 0px;
    }
    45.00% {
        background-position: -2070px 0px;
    }
    50.00% {
        background-position: 0px 0px;
    }
    55.00% {
        background-position: -2530px 0px;
    }
    60.00% {
        background-position: -2760px 0px;
    }
    65.00% {
        background-position: -2990px 0px;
    }
    70.00% {
        background-position: -3220px 0px;
    }
    75.00% {
        background-position: -3450px 0px;
    }
    80.00% {
        background-position: -3680px 0px;
    }
    85.00% {
        background-position: -3910px 0px;
    }
    90.00% {
        background-position: -4140px 0px;
    }
    95.00%,
    100% {
        background-position: -4370px 0px;
    }
}

@keyframes direct_gift_roundBg {
    0% {
        background-position: -230px 0px;
    }
    5.00% {
        background-position: -2300px 0px;
    }
    10.00% {
        background-position: -460px 0px;
    }
    15.00% {
        background-position: -690px 0px;
    }
    20.00% {
        background-position: -920px 0px;
    }
    25.00% {
        background-position: -1150px 0px;
    }
    30.00% {
        background-position: -1380px 0px;
    }
    35.00% {
        background-position: -1610px 0px;
    }
    40.00% {
        background-position: -1840px 0px;
    }
    45.00% {
        background-position: -2070px 0px;
    }
    50.00% {
        background-position: 0px 0px;
    }
    55.00% {
        background-position: -2530px 0px;
    }
    60.00% {
        background-position: -2760px 0px;
    }
    65.00% {
        background-position: -2990px 0px;
    }
    70.00% {
        background-position: -3220px 0px;
    }
    75.00% {
        background-position: -3450px 0px;
    }
    80.00% {
        background-position: -3680px 0px;
    }
    85.00% {
        background-position: -3910px 0px;
    }
    90.00% {
        background-position: -4140px 0px;
    }
    95.00%,
    100% {
        background-position: -4370px 0px;
    }
}

.direct_gift[name="3"] .direct_gift_star {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -39px 0 0 -115px;
    width: 230px;
    height: 78px;
    background: url("../img/play/direct_gift/ani_star1.png") -230px 0px no-repeat;
    -webkit-animation: direct_gift_star1 2s steps(1) infinite forwards;
    animation: direct_gift_star1 2s steps(1) infinite forwards;
}

@-webkit-keyframes direct_gift_star1 {
    0% {
        background-position: -230px 0px;
    }
    20.00% {
        background-position: -1840px 0px;
    }
    25.00% {
        background-position: -460px 0px;
    }
    30.00% {
        background-position: -690px 0px;
    }
    35.00% {
        background-position: -920px 0px;
    }
    40.00% {
        background-position: -1150px 0px;
    }
    45.00% {
        background-position: -1380px 0px;
    }
    50.00% {
        background-position: -1610px 0px;
    }
    55.00% {
        background-position: 0px 0px;
    }
    60.00% {
        background-position: -2070px 0px;
    }
    65.00% {
        background-position: -2300px 0px;
    }
    70.00% {
        background-position: -2530px 0px;
    }
    75.00% {
        background-position: -2760px 0px;
    }
    80.00% {
        background-position: -2990px 0px;
    }
    85.00% {
        background-position: -3220px 0px;
    }
    90.00% {
        background-position: -3450px 0px;
    }
    95.00%,
    100% {
        background-position: -230px 0px;
    }
}

@keyframes direct_gift_star1 {
    0% {
        background-position: -230px 0px;
    }
    20.00% {
        background-position: -1840px 0px;
    }
    25.00% {
        background-position: -460px 0px;
    }
    30.00% {
        background-position: -690px 0px;
    }
    35.00% {
        background-position: -920px 0px;
    }
    40.00% {
        background-position: -1150px 0px;
    }
    45.00% {
        background-position: -1380px 0px;
    }
    50.00% {
        background-position: -1610px 0px;
    }
    55.00% {
        background-position: 0px 0px;
    }
    60.00% {
        background-position: -2070px 0px;
    }
    65.00% {
        background-position: -2300px 0px;
    }
    70.00% {
        background-position: -2530px 0px;
    }
    75.00% {
        background-position: -2760px 0px;
    }
    80.00% {
        background-position: -2990px 0px;
    }
    85.00% {
        background-position: -3220px 0px;
    }
    90.00% {
        background-position: -3450px 0px;
    }
    95.00%,
    100% {
        background-position: -230px 0px;
    }
}

.direct_gift[name="4"] .direct_gift_star {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -39px 0 0 -115px;
    width: 230px;
    height: 78px;
    background: url("../img/play/direct_gift/ani_star2.png") -230px 0px no-repeat;
    -webkit-animation: direct_gift_star2 2s steps(1) infinite forwards;
    animation: direct_gift_star2 2s steps(1) infinite forwards;
}

@-webkit-keyframes direct_gift_star2 {
    0% {
        background-position: -230px 0px;
    }
    5.00% {
        background-position: -2300px 0px;
    }
    10.00% {
        background-position: -460px 0px;
    }
    15.00% {
        background-position: -690px 0px;
    }
    20.00% {
        background-position: -920px 0px;
    }
    25.00% {
        background-position: -1150px 0px;
    }
    30.00% {
        background-position: -1380px 0px;
    }
    35.00% {
        background-position: -1610px 0px;
    }
    40.00% {
        background-position: -1840px 0px;
    }
    45.00% {
        background-position: -2070px 0px;
    }
    50.00% {
        background-position: 0px 0px;
    }
    55.00% {
        background-position: -2530px 0px;
    }
    60.00% {
        background-position: -2760px 0px;
    }
    65.00% {
        background-position: -2990px 0px;
    }
    70.00% {
        background-position: -3220px 0px;
    }
    75.00% {
        background-position: -3450px 0px;
    }
    80.00% {
        background-position: -3680px 0px;
    }
    85.00% {
        background-position: -3910px 0px;
    }
    90.00% {
        background-position: -4140px 0px;
    }
    95.00%,
    100% {
        background-position: -4370px 0px;
    }
}

@keyframes direct_gift_star2 {
    0% {
        background-position: -230px 0px;
    }
    5.00% {
        background-position: -2300px 0px;
    }
    10.00% {
        background-position: -460px 0px;
    }
    15.00% {
        background-position: -690px 0px;
    }
    20.00% {
        background-position: -920px 0px;
    }
    25.00% {
        background-position: -1150px 0px;
    }
    30.00% {
        background-position: -1380px 0px;
    }
    35.00% {
        background-position: -1610px 0px;
    }
    40.00% {
        background-position: -1840px 0px;
    }
    45.00% {
        background-position: -2070px 0px;
    }
    50.00% {
        background-position: 0px 0px;
    }
    55.00% {
        background-position: -2530px 0px;
    }
    60.00% {
        background-position: -2760px 0px;
    }
    65.00% {
        background-position: -2990px 0px;
    }
    70.00% {
        background-position: -3220px 0px;
    }
    75.00% {
        background-position: -3450px 0px;
    }
    80.00% {
        background-position: -3680px 0px;
    }
    85.00% {
        background-position: -3910px 0px;
    }
    90.00% {
        background-position: -4140px 0px;
    }
    95.00%,
    100% {
        background-position: -4370px 0px;
    }
}

.direct_gift_shadow {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    margin: auto;
    border-radius: 40px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    opacity: 0;
    -webkit-animation: direct_gift_shadow 1.5s linear infinite forwards;
    animation: direct_gift_shadow 1.5s linear infinite forwards;
}

.direct_gift[name="3"] .direct_gift_shadow {
    -webkit-box-shadow: 0 0 5px 5px #ebbb2a;
    box-shadow: 0 0 5px 5px #ebbb2a;
}

.direct_gift[name="4"] .direct_gift_shadow {
    -webkit-box-shadow: 0 0 2px 3px #873de5;
    box-shadow: 0 0 2px 3px #873de5;
}

@-webkit-keyframes direct_gift_shadow {
    0%,
    90% {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
    }
    45% {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
        opacity: .6;
    }
}

@keyframes direct_gift_shadow {
    0%,
    90% {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
    }
    45% {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
        opacity: .6;
    }
}

.ani_leave.direct_gift {
    -webkit-animation: direct_gift_show_leave .5s linear both, direct_gift_hidden .5s .5s linear both;
    animation: direct_gift_show_leave .5s linear both, direct_gift_hidden .5s .5s linear both;
}

.ani_leave .direct_gift_icon {
    -webkit-animation: none;
    animation: none;
}

@-webkit-keyframes direct_gift_show_leave {
    0% {
        width: 220px;
    }
    100% {
        width: 56px;
    }
}

@keyframes direct_gift_show_leave {
    0% {
        width: 220px;
    }
    100% {
        width: 56px;
    }
}

@-webkit-keyframes direct_gift_hidden {
    0% {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
    }
    100% {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
    }
}

@keyframes direct_gift_hidden {
    0% {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
    }
    100% {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
    }
}

.barrage {
    width: 100%;
    position: absolute;
    bottom: 47px;
    left: 0;
    z-index: 5;
}

.barrage p {
    font-size: 20px;
    height: 28px;
    line-height: 28px;
    color: #ffffff;
    position: relative;
    text-shadow: 0 1px 1px #000000;
    margin-bottom: 8px;
}

.barrage p span {
    position: absolute;
    top: 0;
    left: ;
    white-space: nowrap;
}

.active_gift_right {
    width: 80px;
    position: absolute;
    right: 0;
    top: 16px;
    text-align: center;
}

.agr_item {
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    margin: 0 2px;
}

.agr_item>a {
    display: block;
    color: #9B9B9B;
}

.agr_item>a:hover {
    color: #FF2C55;
}

.agr_item>a:active {
    color: #E8002D;
}

.agr_item>a>i {
    display: block;
    margin: 2px auto;
}

.charge_btn {}

.charge_btn .recharge {}

.gift,
.gift_show,
.gift_list_wp,
.gift_list {
    height: inherit;
}

.gift {
    position: relative;
}

.gift_show {
    position: relative;
    max-width: 632px;
    min-width: 370px;
    float: right;
}

.gift_list {
    width: 100%;
    position: relative;
    background: #ffffff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 45px;
    border-radius: 6px;
    position: absolute;
    left: 0;
    bottom: 0;
    -webkit-transition: .2s;
    transition: .2s;
    overflow: hidden;
    max-height: 198px;
}

.gift_list>ul {
    padding: 9px 0;
    position: relative;
    top: 0;
}

.gift_list>ul>li {
    float: left;
    width: 48px;
    height: 48px;
    border: 2px solid #EEEEEE;
    position: relative;
    cursor: pointer;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 6px 3px;
    border-radius: 6px;
    background: #EEEEEE;
}

.gift_list ul li:hover,
.gift_list ul li.chosen {
    border: 2px solid #FF2C55;
}

.gift_list ul li img {
    width: 40px;
    height: 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -20px 0 0 -20px;
}

.sel_inputed {
    display: block;
    width: 20px;
    height: 48px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 6px;
    position: absolute;
    right: 22px;
    top: 50%;
    margin-top: -24px;
    cursor: pointer;
    background: #eeeeee;
}

.sel_inputed:hover {
    border-color: #FF2C55;
    background: #ff2c55;
    background: rgba(255, 44, 85, 0.16);
}

.sel_inputed i {
    display: block;
    width: 8px;
    height: 8px;
    border: 2px solid #C1BFBF;
    border-left: 0;
    border-top: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -2px 0 0 -5px;
    -webkit-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    transform: rotate(-135deg);
    -webkit-transition: -webkit-transform .2s;
    transition: -webkit-transform .2s;
    transition: transform .2s;
    transition: transform .2s, -webkit-transform .2s;
}

.sel_inputed:hover i {
    border-color: #FF2C55;
}

.sel_inputed.down i {
    margin-top: -4px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.gift_rest {
    display: block;
    min-width: 15px;
    height: 15px;
    line-height: 15px;
    text-align: center;
    background: #ff292f;
    color: #fff;
    border-radius: 8px;
    position: absolute;
    top: -2px;
    right: -2px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 2px;
    white-space: nowrap;
}

.gift_detail {
    position: absolute;
    z-index: 11;
    padding-bottom: 14px;
    text-align: left;
}

.gift_detail.up {
    padding-top: 14px;
    padding-bottom: 0;
}

.gdwp {
    width: 314px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 30px 0 10px;
    padding-left: 90px;
    border-radius: 6px;
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.30);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.30);
    background: #fff;
    position: relative;
    min-height: 150px;
}

.gdwp_img {
    width: 70px;
    height: 70px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #D0D0D0;
    border-radius: 6px;
    position: absolute;
    left: 10px;
    top: 30px;
}

.gdwp_img img {
    position: absolute;
    width: 60px;
    height: 60px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -30px 0 0 -30px;
}

.gift_detail .gift_name {
    margin-bottom: 4px;
}

.gift_detail .gift_name>span {
    font-size: 14px;
    font-weight: bold;
}

.gift_detail .gift_name em {
    color: #FF2C55;
}

.gift_detail .gift_txt {
    color: #9B9B9B;
}

.gift_detail:before,
.gift_detail:after {
    content: "";
    display: block;
    position: absolute;
    left: 50px;
    bottom: 4px;
    width: 0;
    height: 0;
    border-width: 11px 5px 0 5px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
}

.gift_detail:before {
    border-width: 12px 6px 0 6px;
    left: 49px;
    bottom: 3px;
    border-color: #e0dede transparent transparent transparent;
}

.gift_detail.up:before,
.gift_detail.up:after {
    top: 4px;
    border-width: 0 5px 11px 5px;
    border-style: solid;
    border-color: transparent transparent #fff transparent;
}

.gift_detail.up:before {
    border-width: 0 6px 12px 6px;
    top: 3px;
    border-color: transparent transparent #e0dede transparent;
}

.gift_list ul li img.gift_label,
.gift_detail img.gift_label {
    width: 30px!important;
    height: auto!important;
    margin: 0!important;
    position: absolute;
    left: -2px;
    top: -2px;
    z-index: 1;
}

.gift_detail img.gift_label {
    left: -1px;
    top: -1px;
}

.present_give {}

.sel_input {
    margin-top: 10px;
}

.sel_list {
    text-align: center;
}

.sel_list>ul {
    font-size: 0;
    text-align: left;
}

.sel_list li {
    display: inline-block;
    vertical-align: middle;
    width: 40px;
    height: 20px;
    line-height: 18px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #D0D0D0;
    border-radius: 6px;
    font-size: 12px;
    margin-right: 2px;
    margin-bottom: 6px;
    text-align: center;
}

.sel_list li a {
    display: block;
    font-weight: bold;
}

.sel_list li:hover,
.sel_list li.cur {
    background: #ff2c55;
    background: rgba(255, 44, 85, 0.16);
    border-color: #FF2C55;
}

.gift_num_input {
    height: 26px;
    line-height: 26px;
    text-align: left;
    margin-bottom: 5px;
    font-size: 0
}

.gift_num_input input,
.give_btn {
    display: inline-block;
    vertical-align: middle;
}

.gift_num_input input {
    font-size: 12px;
    height: 24px;
    line-height: 24px;
    width: 42px;
    text-align: center;
    border: 1px solid #E5E5E5;
    border-right: 0;
    border-radius: 6px 0 0 6px;
}

.give_btn {
    width: 48px;
    font-size: 14px;
    border-radius: 0 6px 6px 0;
    background-color: #FF5A6A;
    background: -webkit-gradient(linear, right top, left top, from(#FA60C5), to(#FF5A6A));
    background: linear-gradient(-90deg, #FA60C5 0%, #FF5A6A 100%);
}

.give_btn.disabled {
    background: #C1BFBF;
}

.give_btn.disabled:hover {
    background: #C1BFBF;
}

.use_btn {
    border-radius: 6px;
    margin-top: 10px;
}

.gift_detail_use {}

.top_gift_name .gdwp {
    border-radius: 0 0 6px 6px;
    padding-top: 4px;
    padding-bottom: 2px;
}

.top_gift_name .gdwp_img {
    top: 8px;
}

.top_gift_name .gift_detail .gift_name {
    margin-bottom: 0px;
}

.top_gift_name .top_gift_detail_name {
    width: 314px;
    height: 48px;
    position: absolute;
    right: 0;
    top: -48px;
    background-size: 100%;
    background-color: #8621AD;
    border-radius: 6px 6px 0 0;
}

.top_gift_name .top_gift_detail_name .bgBigImg {
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0;
    border-radius: 6px 6px 0 0;
}

.top_gift_name .top_gift_detail_name .avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: solid 1px #ffffff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.top_gift_name .top_gift_detail_name .avatar_bg {
    position: absolute;
    border-radius: 50%;
    width: 128%;
    height: 128%;
    top: -24%;
    left: -15%;
}

.top_gift_name .top_gift_detail_name .top_feature_wp {
    display: inline-block;
    width: 48%;
    padding: 6px 0px 0px 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.top_gift_name .top_gift_detail_name .top_feature_wp .top_feature_info {
    display: inline-block;
    position: relative;
}

.top_gift_name .top_gift_detail_name .top_feature_wp .top_gift_detail_label {
    font-size: 12px;
    color: #fff;
    width: 96px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.top_gift_name .top_gift_detail_name .top_feature_wp .top_name {
    font-size: 12px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    opacity: .7;
    color: #fff;
    width: 96px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.top_gift_name .top_gift_detail_name .top_feature_wp.top_player .top_gift_detail_label {
    color: #fbe695;
}

.top_gift_name .top_gift_detail_name a {
    width: 314px;
    height: 48px;
    position: absolute;
    right: 0;
}

.new_player_wp {
    position: absolute;
    width: 70px;
    height: 70px;
    right: 0px;
    top: -5px;
    font-size: 12px;
    z-index: 10;
}

.new_player {
    position: absolute;
    left: -100px;
    bottom: 100px;
    height: 300px;
    width: 220px;
}

.nptip {
    padding: 8px 9px;
    width: 152px;
    height: 92px;
    text-align: center;
    color: #525252;
    background: url(../img/play/newplayer/newplayer_tip.png) no-repeat 0 0;
    position: absolute;
    bottom: 122px;
    right: 23px;
}

.npt {
    font-size: 14px;
    color: #fff;
    height: 53px;
}

.npt img {
    display: inline-block;
    width: 39px;
    height: 39px;
    margin: 6px 5px 0;
    vertical-align: -13px;
}

.npbox1 {
    display: block;
    width: 220px;
    height: 300px;
    background: url(../img/play/newplayer/newplayer_box.png) no-repeat 0 0;
    position: absolute;
    left: 0;
    bottom: 0;
}

.npbox2 {
    display: none;
    width: 70px;
    height: 70px;
    background: url(../img/play/newplayer/newplayer_boom.png) no-repeat 0 0;
    position: absolute;
    left: 0;
    top: 0;
}

.nptip {
    -webkit-animation: nptshow 6s 2s linear both;
    animation: nptshow 6s 2s linear both;
    -webkit-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}

@-webkit-keyframes nptshow {
    from {
        -webkit-transform: scale(0);
        transform: scale(0);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
    }
    3% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
    }
    6% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
    }
    10% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
    }
    30%,
    70% {
        -webkit-transform: translate3d(0, -5%, 0);
        transform: translate3d(0, -5%, 0);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
    }
    50%,
    90% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
    }
    to {
        -webkit-transform: translate3d(0, 25%, 0);
        transform: translate3d(0, 25%, 0);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
    }
}

@keyframes nptshow {
    from {
        -webkit-transform: scale(0);
        transform: scale(0);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
    }
    3% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
    }
    6% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
    }
    10% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
    }
    30%,
    70% {
        -webkit-transform: translate3d(0, -5%, 0);
        transform: translate3d(0, -5%, 0);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
    }
    50%,
    90% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
    }
    to {
        -webkit-transform: translate3d(0, 25%, 0);
        transform: translate3d(0, 25%, 0);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
    }
}

.package_list {
    position: absolute;
    z-index: 11;
    top: -96px;
    left: -238px;
}

.package_list:before,
.package_list:after {
    content: "";
    display: block;
    position: absolute;
    left: 254px;
    bottom: -11px;
    width: 0;
    height: 0;
    border-width: 11px 5px 0 5px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
}

.package_list:before {
    border-width: 12px 6px 0 6px;
    left: 253px;
    bottom: -12px;
    border-color: #e0dede transparent transparent transparent;
}

.package_list_wp {
    width: 314px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
    padding-left: 22px;
    border-radius: 6px;
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.30);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.30);
    background: #fff;
}

.package_list_box>li {
    float: left;
    width: 48px;
    height: 48px;
    border: 2px solid #EEEEEE;
    position: relative;
    cursor: pointer;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 6px 3px;
    border-radius: 6px;
    background: #EEEEEE;
}

.package_list_box>li img {
    width: 40px;
    height: 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -20px 0 0 -20px;
}

.package_list_box li:hover,
.gift_list li.chosen {
    border: 2px solid #FF2C55;
}

.package_left_arrow,
.package_right_arrow {
    display: block;
    position: absolute;
    width: 6px;
    height: 6px;
    border-left: 1px solid #c4c2c2;
    border-top: 1px solid #c4c2c2;
    top: 36px;
    cursor: pointer;
    -webkit-transition: all .2s;
    transition: all .2s
}

.package_left_arrow:hover,
.package_right_arrow:hover {
    border-color: #333;
}

.package_left_arrow {
    left: 10px;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.package_right_arrow {
    right: 10px;
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg)
}

.package_none {
    color: #c5c5c5;
    padding: 20px 0;
}

.package_list_scroll {
    width: 270px;
    height: 60px;
    overflow: hidden;
    position: relative;
}

.package_list_scroll .package_list_box {
    font-size: 0;
    white-space: nowrap;
    position: absolute;
    left: 0;
    -webkit-transition: left .2s;
    transition: left .2s;
    top: 0;
}

.package_list_scroll .package_list_box>li {
    font-size: 12px;
    float: none;
    display: inline-block;
}

.package-new {
    position: relative;
}

.package-new:before {
    display: block;
    content: "";
    width: 8px;
    height: 8px;
    background-color: #fd505e;
    border-radius: 8px;
    position: absolute;
    right: -3px;
    top: -8px;
}

.rank {}

.rank_nav {
    height: 30px;
    line-height: 30px;
    font-size: 13px;
    text-align: center;
}

.rank_nav_item {
    float: left;
    width: 33.3%;
    background: #E3E3E3;
}

.rank_nav_item.cur {
    background-color: #FFFFFF;
    border-radius: 6px;
    position: relative;
}

.rank_nav_item>a {
    display: block;
}

.rank_nav_item:hover a,
.rank_nav_item.cur a {
    color: #FF2C55;
}

.rank_nav_item.cur:before {
    content: "";
    display: block;
    width: 100%;
    height: 4px;
    background: #FF5A6A;
    position: absolute;
    top: -1px;
    left: 0;
}

.rank_content {
    height: 126px;
}

.rank_wp,
.rank_page_wp {
    position: relative;
}

.rank_wp {
    height: 100%;
}

.rank_page_wp {
    height: 103px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    background: #FFFFFF;
    border-bottom: 1px solid #E5E5E5;
    -webkit-transition: .2s;
    transition: .2s;
}

.rank_wp:hover .rank_page_wp {
    height: 230px;
}

.rank_list {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 8px 20px 0px;
    position: absolute;
    left: 0;
    width: 100%;
}

.rank_item {
    height: 25px;
    line-height: 25px;
    margin-bottom: 7px;
    position: relative;
}

.rankNo,
.rank_name,
.rank_number {
    display: inline-block;
    vertical-align: middle;
}

.rankNo {
    width: 16px;
    height: 16px;
    line-height: 16px;
    border-radius: 50%;
    background: #D8D8D8;
    color: #ffffff;
    text-align: center;
    margin-right: 2px;
}

.rank_name {
    cursor: pointer;
}

.rank_name,
.rank_number {
    width: 160px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.rank_number {
    width: 80px;
    float: right;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    text-align: right;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-right: 18px;
    position: relative;
}

.rank_number>i {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.rank_empty {
    text-align: center;
    color: #9B9B9B;
    width: 100%;
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.rank_empty a {
    color: #FF2C55;
    text-decoration: underline;
}

.rank_link {
    display: block;
    height: 24px;
    line-height: 24px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-right: 10px;
    text-align: right;
    background: #FFEEEB;
}

.rank_link>a {
    color: #FF2C55;
}

.rank_link>a:hover {
    color: #E8002D;
}

.rank_metal {
    position: absolute;
    right: 0;
    top: 0;
}

.rank_head {
    display: inline-block;
    vertical-align: middle;
}

.rank_head {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    margin-right: 5px;
    position: relative;
}

.rank_head>img {
    width: 100%;
    height: 100%;
    border-radius: 50%
}

.offlinebg {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    background: #fff;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    opacity: .7;
    position: absolute;
    left: 0;
    top: 0;
}

.is_offline {
    color: #9B9B9B;
}

.rank_notice {
    color: #FF7777;
    text-align: center;
}

.rank_notice:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAKCAYAAAEV95QVAAAABGdBTUEAALGPC/xhBQAAARZJREFUGBljYMAO/peXr2UAEv9QpP9XVMwHCTCCiP/d3dwMb9+eALEZgDK1IJoRyNjM8P+/NwMjYyyDsPAGhq9ffwLFWVAMA2sF6aqsbAbpAoP/VVU6QBtvgDiMUKsvMnBymjJ8//4OKLYVbCtYKZAAKvjEwMZmyfS/oUEIJgi0lJHh9+9KiPsqKoyBEhuBmJ+xo4MXVXtFhRPQmSVASW2grllAdjljZycfzCQWsAOYmfUYWluvAk3dB5QAYYiv37wpB7MrKuYCNb5iAprwn7Gt7QpQ4X+QBFbw//8EoDovWAgpA63TAobWTqDgOgZJyQUMP3+yAMPzBQMHhyDQyzOAXs9CcTPMVGCoaYDcC+RbAT2mDhMHAG/XcBoBHxU3AAAAAElFTkSuQmCC');
    width: 11px;
    height: 10px;
    margin: -2px 5px 0 0;
}

.rankNo.rankNo_1,
.rankNo.rankNo_2,
.rankNo.rankNo_3 {
    border-radius: 0;
    background-color: transparent;
    text-indent: -9999em;
    overflow: hidden;
}

.rank_wp:hover .rank_weekly {
    height: 260px;
}

.rank_weekly .rank_item {
    height: 18px;
    line-height: 18px;
    margin-bottom: 13px;
}

.rank_online {
    height: 100%;
    position: relative;
    background: transparent;
}

.rank_online .rank_page {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
}

.ro_name,
.ro_name>em {
    display: inline-block;
    vertical-align: middle;
}

.ro_name>em {
    max-width: 160px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.rank_online .rank_head,
.rank_online .ro_name>em {
    cursor: pointer;
}

.chat_nav {
    height: 30px;
    line-height: 30px;
    font-size: 13px;
    text-align: center;
}

.chat_nav_item {
    float: left;
    width: 50%;
    background: #E3E3E3;
}

.chat_nav_item.cur {
    background: #F8F8F8;
}

.chat_nav_item>a {
    display: block;
}

.chat_nav_item.cur>a,
.chat_nav_item:hover>a {
    color: #FF2C55;
}

.chat_content {
    height: 100%;
    overflow: hidden;
}

.chat {
    height: 100%;
    position: relative;
}

.chat:before {
    content: '';
    position: absolute;
    top: 0;
    width: 100%;
    height: 30px;
    background: -webkit-gradient(linear, left top, left bottom, from(#FBFBFB), to(rgba(251, 251, 251, 0.00)));
    background: linear-gradient(#FBFBFB, rgba(251, 251, 251, 0.00) 100%);
    pointer-events: none;
    z-index: 1;
}

.chat_box {
    height: 100%;
    overflow: hidden;
    position: relative;
}

.chat_box .chatlist {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    padding: 0 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.chat_box .chatlist li {
    margin-top: 10px;
    margin-bottom: 25px;
    position: relative;
    word-wrap: break-word;
}

.chat_item {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.chat_item.chat_padding {
    padding-right: 55px!important;
}

.chat_link {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background: transparent;
}

.chat_link>i {
    width: 12px;
    height: 12px;
    border: 2px solid #FFE38E;
    border-left: 0;
    border-bottom: 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    right: 20px;
    top: 50%;
    margin-top: -7px;
}

.chat_href,
.chat_href:hover {
    color: #FF2C55;
    text-decoration: underline;
    margin-left: 4px;
}

.chat_item .chat_name {
    cursor: pointer;
    color: #000;
    margin-right: 4px;
}

.chat_item>i {
    margin-top: -2px;
}

.chat_item .chat_info {
    padding-right: 10px;
}

.chat_item .chat_info_18 {
    color: #F29906;
}

.chat_item img {
    display: inline-block;
    width: 30px;
    height: 30px;
    vertical-align: middle;
    margin: -2px 2px 0;
}

.chat_item .chat_gift {
    margin-left: 10px;
    margin-right: 10px;
}

.chat_item3 strong {
    color: #F29906;
    font-size: 14px;
    vertical-align: middle;
}

.chat_item4 {
    padding: 10px 14px 10px 70px;
    position: relative;
    background-color: #FFEAEA;
    background: -webkit-gradient(linear, left top, right top, from(#FFEAEA), color-stop(99%, #FFEBD0));
    background: linear-gradient(90deg, #FFEAEA 0%, #FFEBD0 99%);
}

.chat_item4 .chat_tit {
    position: absolute;
    left: 10px;
    top: 10px;
}

.chat_item4 .chat_info {
    word-break: break-all;
    word-wrap: break-word;
}

.chat_item4 .chat_info strong {
    margin-right: 4px;
}

.chat_item5 {
    background: #FFFAEC;
    padding: 3px 10px;
    line-height: 2.4;
}

.chat_item6 {
    background-image: url(../img/play/spr_chat_notice.png?v=2020228);
    background-position: 0px 0px;
    background-repeat: no-repeat;
    max-height: 66px;
    background-color: #fbd094;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 11px;
    overflow: hidden;
    line-height: 2;
}

.chat_notice_icon {
    display: inline-block;
    vertical-align: middle;
    background-image: url(../img/play/spr_chat_notice.png?v=2020228);
    background-position: 0px -74px;
    background-repeat: no-repeat;
    width: 11px;
    height: 10px;
    margin: -2px 5px 0 0;
}

.chat_head_wp {
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    border-radius: 100%;
    margin-top: -12px;
    margin-right: 2px;
}

.chat_head_wp>img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 100%;
}

.chat_ride {
    padding-right: 70px;
    margin-top: 40px;
}

.chat_ride .chat_ride_img {
    width: 60px;
    height: auto;
    position: absolute;
    right: 6px;
    bottom: 0;
}

.chat_lock_wp {
    position: absolute;
    right: 20px;
    top: 10px;
    z-index: 1;
}

.chat_lock {
    display: block;
    width: 48px;
    height: 22px;
    line-height: 22px;
    background: #FFFFFF;
    border: 1px solid #E5E5E5;
    border-radius: 2px;
    font-size: 13px;
    text-align: center;
}

.chat_lock:hover {
    border-color: #ff2c55;
}

.chat_lock:active {
    border-color: #e8002d;
}

.icon_chat_lock {
    display: inline-block;
    vertical-align: middle;
    margin-top: -4px;
    margin-right: 1px;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMzggNzkuMTU5ODI0LCAyMDE2LzA5LzE0LTAxOjA5OjAxICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+IEmuOgAAAlVJREFUOI2VVDtr21AU/lKcQRJkuJMDlj1msLxkcJaYIjJ5Le3gkq3gZOncpX+gcwbhwIUU2mRKFg8mpUE4NpS4EEKkDFkCkg32oltskIRI0OkQyziKU+iBC4fz+M77LhERXqDaAtnRIsPMS85CiA/D4XArDENIkoTV1dUzxthCsKVUJoXJZPLVNM3Xvu9DVVVIkoQwDNHv96EoCnRdP1pZWXn/JCwRzZ7jOJ8NwyDLsoiIDqIoOm232xRF0SkRHdi2TZzzO8dxnvglTH08HhPnnDzPIyL6GMfxYbPZJMMwqNlsUhzHh0RU8zzvj2EY5+Px+JiI6kSEV0lGpmliY2MDjLFjAHuu62YGgwEAYDAYwHXdDIAjxtinzc3Nimmab+YbWxdCbPu+j2KxeDxrTqHQ2d3dfZir/FfCaJq2c3193RBCbDPGHjMZjUYVVVUB4AeAt1PboNfrrXPOa71ebx1AMJXvA4CqqhgOhxUAjyBBEECSpGeztixr7f7+HpZlraV1ydRmILIszwTzVCqVbpeXl1EqlW7TumR/kp4gm812rq6uKlN9fZqyXC6XL8vl8uVULs/p0e/3USwWOwnIPmMMiqJUbNtuaJq2AwCO41Rarda7JHK1Ws0UCoU9ALi5uWkoigLG2DcA+7MR67p+0u12O0KIBoDv+Xxey+VyAIBcLod8Pv8AoCaE+HJxceHoun4yqy21seCc39m2TUT0O72xlmWRYRg/0xubvh1MJhMyTRP/czvPQDB3xaPRaCsIAsiyjGw2e8YY41Obf17xM7AULfxP/gKAy21RGjlqfAAAAABJRU5ErkJggg==');
    width: 17px;
    height: 17px;
}

.unlock .icon_chat_lock {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAARCAYAAADUryzEAAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMzggNzkuMTU5ODI0LCAyMDE2LzA5LzE0LTAxOjA5OjAxICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+IEmuOgAAAoxJREFUOI11Uz9IG3EU/i6NwyXtDddJ692UKXggVlSqWI6CVJdAEYmF0qFTKy5tB4UO3SrYpdNlOXCJQqEgpFSEtkcc+idSW3vn1DpcDCTLHU3AnCGSr0NVzpg+eMPvve+9773v8RNIooPNdoitdQJGOxX6vv+gXC7fCoIAoiiiu7v7gyzLHRsJoQnu1Gq1N5Zl4fDwEIqiQBRFBEGAg4MDxONx6Lq+JknS3XOUJEESruvuG4ZB27ZJcrvRaGzm83k2Go1NkiuO49A0Tbqu+57kjdM6kOyrVqv3TdOk53kkudVqtb7ncjkahsFcLsdWq7VKctbzvKJhGKxWqxskdZKIAIBlWSvDw8OfZFkWAIwXi8VfpVIJAFAqlVAsFqMA1mRZTo+NjTUty7p9toLnefPZbJYk+07HIjlP8nPI50M5PZvN0vO8ZyQRqVQqaUVR2q/TXygUBk3THCkUCoMA+sNJRVFQLpdTABCp1+sjoii2ACTCINu2o81mE7Ztt58aiUTi1dHRUQ8ARGKx2JcgCCIAfodBmqYdd3V1QdO0YwCAX/Mwu0jMLn683GzdU1X1WrsGL0k+PdnzMcmvIQfTC+TWDpn/RqYXeKpJRJZlKx6Pw3GcJ6fsruuOZjKZoUwmMwRgF3NLhLMPPHrhY27Jh7MPzC0RwGQUAHRdx+rqKnp6epZlWYaqqnJvby9OTpnE1g5gv54CsHHCMQlt5h0ARAA4kiQJU1NTwvr6urC3t7csCMLViYmJ7WQy2a7fBTtTWFVVTE9P07Ksn7u7u1cURdFisRgA/AAwCmAIwKUT+PULDQBAkiQhlUrB9/0/lUoF9Xr9X2J84BjazPNz1DcHjoHzvzFsD9veB//Z4O1flpqEVjL7ESoAAAAASUVORK5CYII=');
    width: 16px;
    height: 17px;
}

.chat_more_tip {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 32px;
    line-height: 32px;
    background: #ffb4a8;
    background: rgba(255, 180, 168, .8);
    z-index: 1;
}

.chat_more_tip>a {
    display: block;
    color: #FFFFFF;
    text-align: center;
}

.chat_more_tip>a:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 8px;
    height: 8px;
    border: 1px solid #FFFFFF;
    border-top: 0;
    border-left: 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    margin: -6px 6px 0 0;
}

.chat_host {
    position: absolute;
    left: 20px;
    bottom: 30px;
    overflow: hidden;
    z-index: 1;
}

.chat_host .ch_con {
    color: #fff;
    line-height: 18px;
    padding: 4px 15px 5px 46px;
    margin-top: 9px;
    width: 213px;
    height: 38px;
    position: relative;
    background: #ed98e5;
    background: -webkit-gradient(linear, left top, left bottom, from(#dfa2fb), to(#ff89c2));
    background: linear-gradient(#dfa2fb, #ff89c2);
    border-radius: 6px;
}

.chat_host .ch_con span {
    max-width: 82px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 21px;
}

.chat_host .ch_con a {
    text-decoration: underline;
    margin-left: 2px;
    color: #b21cff;
}

.chat_host .ch_close {
    display: block;
    position: absolute;
    right: 3px;
    top: 3px;
    cursor: pointer;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMzggNzkuMTU5ODI0LCAyMDE2LzA5LzE0LTAxOjA5OjAxICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+IEmuOgAAAMJJREFUGJVt0KFKxEEUxeGRBdFlcS02q2XRYhM2WWwW38AgGMwubPM9DGa3CFa7ZREU30AMJouCon6W84dh2HC53JnfzD3nFAwxxSbKgtrDE45LQHjEegPu4h1/HbyEyzy4Rz/gNt5yfobS/dDDTS5uMcJr5vNuU71yFXcBvtMvalmtmRF+A85bs/WwgeeAn+mTRfAQDwGusIWXzKc1vJYU4DpmC3YS2w+OOnhWpbDc6BzjA1/YLxjgBCutodRhJB78A7lQlovhOEYLAAAAAElFTkSuQmCC');
    width: 11px;
    height: 11px;
    -webkit-transition: .2s;
    transition: .2s;
}

.chat_host .ch_close:hover {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.chat_host .ch_con img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    position: absolute;
    left: 8px;
    top: 9px;
}

.ani.chat_host {
    -webkit-animation: chat_hostIn .5s ease-in both;
    animation: chat_hostIn .5s ease-in both;
}

@-webkit-keyframes chat_hostIn {
    0% {
        -webkit-transform: translateX(-120%);
        transform: translateX(-120%);
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes chat_hostIn {
    0% {
        -webkit-transform: translateX(-120%);
        transform: translateX(-120%);
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

.playin_wp {
    z-index: 1;
    width: 256px;
    height: 100px;
    position: absolute;
    top: 10px;
    left: 0;
}

.playin_wp ul {
    overflow: hidden;
}

.playin_list {
    height: 23px;
    line-height: 23px;
    padding-left: 10px;
    margin-bottom: 10px;
    background-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, .9)));
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, .9));
    color: #fff;
    font-size: 13px;
}

.playin_list1 {
    background-color: #ff71bd;
}

.playin_list2 {
    background-color: #5c42c8;
}

.playin_list i {
    vertical-align: -3px;
}

.playin_wp .piUser_name {
    margin: 0 3px;
}

.chat_area_wp {
    height: 100%;
    position: relative;
    background: #FFFFFF;
    z-index: 3;
}

.chat_area {
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 20px 14px;
}

.edit_area_wrap {
    position: relative;
    height: 48px;
    line-height: 48px;
    padding: 0 52px 0 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 6px;
    background: #F6F6F6;
    width: 310px;
}

.edit_area_wrap:after {
    display: block;
    content: '';
    clear: both;
}

.chat_input {
    position: relative;
    float: left;
    width: 170px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
}

.edit_area {
    padding: 10px 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    background: transparent;
    border: 0 none;
}

.send_btn {
    position: absolute;
    display: block;
    text-align: center;
    width: 60px;
    color: #fff;
    cursor: pointer;
    border-radius: 0 6px 6px 0;
    height: 48px;
    line-height: 48px;
    right: -1px;
    top: 0;
}

.chat_area.usable .edit_area_wrap,
.usable .edit_txt {
    background: #EEEEEE;
}

.chat_area.usable .send_btn {
    cursor: default;
    background: #CCCCCC;
}

.chat_area.usable .edit_areat {
    color: #aaaaaa;
}

.chat_area .pcommon_tip {
    line-height: 1.7;
    bottom: 34px;
    left: 50px;
    color: #525252;
}

.edit_txt {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    color: #aaaaaa;
    cursor: default;
    background: #F6F6F6;
}

.edit_txt span {
    margin-right: 5px;
    color: #ff2c55;
    cursor: pointer;
}

.chat_last_txt {
    position: absolute;
    right: 20px;
    top: 13px;
    color: #9B9B9B;
    z-index: 1;
}

.pcommon_tip {
    padding: 5px 10px;
    background: #fff;
    position: absolute;
    border-radius: 4px;
    -webkit-box-shadow: 0px 1px 7px rgba(9, 2, 4, .14);
    box-shadow: 0px 1px 7px rgba(9, 2, 4, .14);
    z-index: 100;
    line-height: 1.5;
}

.pcommon_tip:after,
.pcommon_tip:before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    position: absolute;
}

.pcommon_tip.common_tip_bottom:before,
.pcommon_tip.common_tip_bottom:after {
    border-width: 8px 6px 0 6px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
    bottom: -8px;
    left: 20px;
}

.pcommon_tip.common_tip_bottom:before {
    border-width: 9px 7px 0 7px;
    border-color: #e0dede transparent transparent transparent;
    bottom: -9px;
    left: 19px;
}

.emoji_wp {
    position: absolute;
    left: 0;
    top: 12px;
    line-height: 1;
    width: 100%;
    z-index: 1;
}

.emoji_btn {
    display: block;
    position: relative;
    left: 20px;
}

.emoji_list_wp {
    position: absolute;
    bottom: 32px;
    left: 0;
    background: #ffffff;
    width: 100%;
}

.emoji_list {
    font-size: 0;
}

.emoji_item {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    width: 36px;
    height: 36px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
}

.emoji_item a {
    display: block;
    height: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: 3px;
}

.emoji_item a img {
    width: 30px;
    height: 30px;
    margin: 0 auto;
}

.emoji_item.cur,
.emoji_item:hover {
    background: #FFDEE4;
    position: relative;
    z-index: 1;
}

.private_letter {
    position: absolute;
    width: 100%;
    bottom: 62px;
    left: 0;
    z-index: 2;
    -webkit-transition: .5s;
    transition: .5s;
}

.prile_tit {
    height: 30px;
    line-height: 30px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 10px;
    font-size: 13px;
    color: #FFFFFF;
    background: #FF5A6A;
    background: -webkit-gradient(linear, left top, right top, from(#FA60C5), to(#FF5A6A));
    background: linear-gradient(90deg, #FA60C5 0%, #FF5A6A 100%);
    border-radius: 6px 6px 0 0;
}

.prile_close {
    display: block;
    width: 11px;
    height: 11px;
    position: absolute;
    right: 10px;
    top: 10px;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMzggNzkuMTU5ODI0LCAyMDE2LzA5LzE0LTAxOjA5OjAxICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+IEmuOgAAAMJJREFUGJVt0KFKxEEUxeGRBdFlcS02q2XRYhM2WWwW38AgGMwubPM9DGa3CFa7ZREU30AMJouCon6W84dh2HC53JnfzD3nFAwxxSbKgtrDE45LQHjEegPu4h1/HbyEyzy4Rz/gNt5yfobS/dDDTS5uMcJr5vNuU71yFXcBvtMvalmtmRF+A85bs/WwgeeAn+mTRfAQDwGusIWXzKc1vJYU4DpmC3YS2w+OOnhWpbDc6BzjA1/YLxjgBCutodRhJB78A7lQlovhOEYLAAAAAElFTkSuQmCC');
    -webkit-transition: .2s;
    transition: .2s;
}

.prile_close:hover {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.prile_con_wp {
    height: 110px;
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

.prile_con {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.prile_con_list {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px 20px;
}

.prile_con_item {
    margin-top: 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 46px;
    position: relative;
}

.prile_con_item:first-child {
    margin-top: 0;
}

.prile_con_img {
    width: 30px;
    height: 30px;
    border-radius: 100%;
    position: absolute;
    left: 0;
    top: 5px;
}

.prile_con_img>img {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.prile_con_info {
    display: inline-block;
    min-width: 140px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 11px 14px;
    background: #F2F2F2;
    border-radius: 10px 2px 10px 2px;
}

.play_lookat {
    width: 100%;
    padding: 14px 0 48px;
    background: #FFFFFF;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 25px;
}

.lookat_title {
    padding: 0 15px;
}

.lookat_title h3 {
    float: left;
    margin-bottom: 15px;
    font-size: 17px;
    font-weight: bold;
    cursor: default;
}

.lookat_title h3:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 2px;
    height: 16px;
    background-color: #FA60C5;
    background: -webkit-gradient(linear, left top, left bottom, from(#FA60C5), to(#FF5A6A));
    background: linear-gradient(-180deg, #FA60C5 0%, #FF5A6A 100%);
    margin-right: 6px;
    margin-top: -3px;
}

.lookat_title>a {
    float: right;
    display: block;
    -webkit-transition: .2s;
    transition: .2s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 13px;
}

.lookat_title a:hover {
    color: #FF2C55;
}

.lookat_title a:active {
    color: #E8002D;
}

.graph {
    display: inline-block;
    vertical-align: middle;
    margin-right: 4px;
    margin-top: -5px;
}

.livelist ul {
    overflow: hidden;
    text-align: center;
    font-size: 0;
}

.livelist li {
    display: inline-block;
    vertical-align: top;
    width: 18%;
    margin: 0 1%;
    text-align: left;
    font-size: 12px;
}

.livelist li:nth-child(6),
.livelist li:nth-child(7) {
    display: none;
}

.live_item {
    position: relative;
    display: block;
}

.live_item .ico-live {
    z-index: 3;
    position: absolute;
    top: 0;
    right: 0;
    text-indent: -9999em;
}

.live_item .poster {
    height: 180px;
    border-radius: 6px;
    overflow: hidden;
    background-size: 100% 100%;
}

.live_item .poster img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-transition: all .2s linear;
    transition: all .2s linear;
}

.live_item:hover .poster img {
    -webkit-transform: scale(1.1, 1.1);
    -ms-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
}

.live_item .hov_play {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 180px;
    z-index: 2;
    background: #000000;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 6px;
}

.live_item .hov_play>i {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.live_item:hover .hov_play {
    display: block;
}

.live_it_info .name {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.live_it_info .visitor {
    position: absolute;
    top: 12px;
    right: 0;
    color: #9B9B9B;
}

.live_it_info .visitor:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    margin-right: 2px;
    margin-top: -3px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    opacity: 0.4;
}

.act_tagwp {
    z-index: 3;
    position: absolute;
    left: 2px;
    top: 2px;
    overflow: hidden;
}

.act_tagwp .ico-hostLabel {
    display: block;
    margin-bottom: 3px;
}

.active_entry_wrap {
    margin: 0 auto;
    position: absolute;
    z-index: 2;
    right: 40px;
    bottom: 120px;
}

.active_entry,
.active_entry_item {
    width: 160px;
    height: 160px;
}

.active_entry {
    overflow: hidden;
    position: relative;
    cursor: pointer;
    border-radius: 4px;
}

.active_entry_list {
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap;
    font-size: 0;
}

.active_entry_item {
    display: inline-block;
    vertical-align: top;
    font-size: 12px;
    overflow: hidden;
}

.active_entry_img_default {
    display: block;
    width: 100%;
    height: auto;
}

.active_entry_nav {
    font-size: 0;
    position: absolute;
    bottom: -20px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 1;
    text-align: center;
    padding: 0 10px;
    height: 14px;
    line-height: 14px;
    border-radius: 7px;
    background: #000000;
    background: rgba(0, 0, 0, .6);
}

.active_entry_nav_item {
    display: inline-block;
    vertical-align: middle;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffffff;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    opacity: .4;
    margin: 0 4px;
}

.active_entry_nav_item.cur {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    opacity: 1;
}

.active_entry_nav_arrow {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #000000;
    background: rgba(0, 0, 0, .6);
    position: absolute;
    top: 50%;
    margin-top: -15px;
    -webkit-transition: .2s;
    transition: .2s;
}

.active_entry_wrap:hover .active_entry_nav_arrow,
.active_entry_nav_arrow:hover {
    background: #000000;
    background: rgba(0, 0, 0, .8);
}

.active_entry_nav_arrow.pre {
    left: -36px;
}

.active_entry_nav_arrow.next {
    right: -36px;
}

.active_entry_nav_arrow:before {
    content: "";
    width: 8px;
    height: 8px;
    border: 1px solid #ffffff;
    border: 1px solid rgba(255, 255, 255, .8);
    border-left-color: transparent;
    border-bottom-color: transparent;
    position: absolute;
    top: 50%;
    margin-top: -5px;
}

.active_entry_nav_arrow.pre:before {
    -webkit-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    transform: rotate(-135deg);
    left: 50%;
    margin-left: -3px;
}

.active_entry_nav_arrow.next:before {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    right: 50%;
    margin-right: -3px;
}

.active_entry_close {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #000000;
    background: rgba(0, 0, 0, .6);
    position: absolute;
    right: -15px;
    top: -15px;
    -webkit-transition: .2s;
    transition: .2s;
}

.active_entry_close:hover {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.active_entry_close:before {
    content: "";
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMzggNzkuMTU5ODI0LCAyMDE2LzA5LzE0LTAxOjA5OjAxICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+IEmuOgAAAMJJREFUGJVt0KFKxEEUxeGRBdFlcS02q2XRYhM2WWwW38AgGMwubPM9DGa3CFa7ZREU30AMJouCon6W84dh2HC53JnfzD3nFAwxxSbKgtrDE45LQHjEegPu4h1/HbyEyzy4Rz/gNt5yfobS/dDDTS5uMcJr5vNuU71yFXcBvtMvalmtmRF+A85bs/WwgeeAn+mTRfAQDwGusIWXzKc1vJYU4DpmC3YS2w+OOnhWpbDc6BzjA1/YLxjgBCutodRhJB78A7lQlovhOEYLAAAAAElFTkSuQmCC');
    width: 11px;
    height: 11px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.actlist_wp {
    width: 178px;
    z-index: 5;
    position: absolute;
    left: 0;
    top: 0;
    height: inherit;
}

.actlist {
    padding-right: 32px;
    padding-left: 10px;
    overflow: hidden;
    position: absolute;
    left: 0;
    bottom: 15px;
    background: #fff;
    border-radius: 6px;
    -webkit-transition: height .2s;
    transition: height .2s;
}

.actlist>ul>li,
.active_in_img {
    display: inline-block;
    vertical-align: middle;
    margin: 5px 3px;
    width: 36px;
    height: 36px;
    position: relative;
}

.active_in_img>img {
    display: block;
    height: 36px;
    width: auto;
    margin: 0 auto;
    cursor: pointer;
}

.actlist_wp .sel_inputed {
    right: 8px;
}

.active_in_pop {
    position: absolute;
    z-index: 1;
}

.fc_icon {
    text-indent: -9999px;
    overflow: hidden;
    display: block;
    background-image: url(../img/play/spr_first_charge.png?v=2020228);
    background-position: 0px -87px;
    background-repeat: no-repeat;
    width: 36px;
    height: 36px;
}

.fct_main {
    background-image: url(../img/play/spr_first_charge.png?v=2020228);
    background-position: 0px 0px;
    background-repeat: no-repeat;
    width: 164px;
    height: 79px;
}

.fc_tip .fct_close {
    background-image: url(../img/play/spr_first_charge.png?v=2020228);
    background-position: -44px -87px;
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
}

.fc_tip .fct_close:hover {
    background-image: url(../img/play/spr_first_charge.png?v=2020228);
    background-position: -72px -87px;
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
}

.fc_tip {
    position: relative;
}

.fct_main {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 37px 30px 0 30px;
    -webkit-animation: fc_animate .2s .2s ease-in both;
    animation: fc_animate .2s .2s ease-in both;
}

.fct_main p {}

.fct_main p a {
    text-decoration: underline;
    color: #ff2c55;
}

.fct_close {
    display: block;
    position: absolute;
    right: 7px;
    top: 3px;
    cursor: pointer;
}

.fctm_count {
    position: absolute;
    right: -25px;
    top: 5px;
    color: #ff9019;
}

.fc_tip>i {
    display: block;
    position: absolute;
    -webkit-animation: fc_animate .2s ease-in both;
    animation: fc_animate .2s ease-in both;
}

.fc_tip .fc_icon1 {
    left: 13px;
    bottom: 17px;
    -webkit-animation-delay: .1s;
    animation-delay: .1s;
}

.fc_tip .fc_icon2 {
    left: 1px;
    bottom: 0;
}

@-webkit-keyframes fc_animate {
    from {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
    }
    to {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
    }
}

@keyframes fc_animate {
    from {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
    }
    to {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
    }
}

.first_recharge_tips_box {
    position: absolute;
    left: 10px;
    bottom: 52px;
    z-index: 6;
    width: 305px;
    height: 52px;
}

.first_recharge_tips_close {
    position: absolute;
    width: 20px;
    height: 20px;
    display: block;
    right: 11px;
    top: 24px;
    cursor: pointer;
    z-index: 2
}

.first_recharge_tips_close:after {
    content: "";
    display: block;
    width: 11px;
    height: 11px;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMzggNzkuMTU5ODI0LCAyMDE2LzA5LzE0LTAxOjA5OjAxICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+IEmuOgAAAMJJREFUGJVt0KFKxEEUxeGRBdFlcS02q2XRYhM2WWwW38AgGMwubPM9DGa3CFa7ZREU30AMJouCon6W84dh2HC53JnfzD3nFAwxxSbKgtrDE45LQHjEegPu4h1/HbyEyzy4Rz/gNt5yfobS/dDDTS5uMcJr5vNuU71yFXcBvtMvalmtmRF+A85bs/WwgeeAn+mTRfAQDwGusIWXzKc1vJYU4DpmC3YS2w+OOnhWpbDc6BzjA1/YLxjgBCutodRhJB78A7lQlovhOEYLAAAAAElFTkSuQmCC');
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    opacity: .5;
    position: absolute;
    left: 5px;
    top: 4px;
}

.first_recharge_tips_go {
    width: 72px;
    height: 24px;
    position: absolute;
    right: 35px;
    top: 21px;
    z-index: 3;
    border-radius: 40px;
    cursor: pointer;
}

.rule_box-enter,
.rule_box-leave-to {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    opacity: 0;
    -webkit-transform: translate(0, 10%);
    -ms-transform: translate(0, 10%);
    transform: translate(0, 10%);
}

.rule_box-enter-active,
.rule_box-leave-active {
    -webkit-transition: all .3s;
    transition: all .3s;
}

.rule_mask-enter,
.rule_mask-leave-to {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    opacity: 0;
}

.rule_mask-enter-active,
.rule_mask-leave-active {
    -webkit-transition: all .3s;
    transition: all .3s;
}

.play_download {
    background-image: url(../img/play/spr_play_down.png?v=2020228);
    background-position: 0px 0px;
    background-repeat: no-repeat;
    width: 130px;
    height: 145px;
}

.play_download_close {
    background-image: url(../img/play/spr_play_down.png?v=2020228);
    background-position: -236px -88px;
    background-repeat: no-repeat;
    width: 18px;
    height: 18px;
}

.app_phone {
    position: relative;
}

.phone_live {
    cursor: pointer;
}

.icon_phone_live {
    display: inline-block;
    vertical-align: middle;
    margin-top: -3px;
}

.app_phone_qr_pop {
    position: absolute;
    width: 374px;
    height: 280px;
    padding-top: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    top: 11px;
    left: 50%;
    margin-left: -232px;
    display: none;
}

.app_phone_qr_pop:before,
.app_phone_qr_pop:after {
    content: "â–²";
    display: block;
    color: #ffffff;
    font-size: 16px;
    position: absolute;
    top: 3px;
    left: 220px;
}

.app_phone_qr_pop:before {
    color: #e0dede;
    font-size: 18px;
    position: absolute;
    top: 1px;
    left: 219px;
}

.app_phone_qr_wp {
    width: 100%;
    height: 100%;
    background: #FFFFFF;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.17);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.17);
    border-radius: 6px;
    color: #000000;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.20);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.20);
}

.app_phone_qr_txt {
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 17px;
    padding-top: 12px;
}

.app_phone_qr>ol {
    text-align: center;
}

.app_phone_qr>ol>li {
    display: inline-block;
    vertical-align: top;
}

.icon_app_phone,
.app_phone_qr_img {
    display: block;
    margin: 5px auto;
}

.icon_app_phone {
    height: 138px;
    width: auto;
}

.app_phone_qr_img {
    width: 120px;
    height: 120px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 15px;
    border: 1px solid #E5E5E5;
    margin: 10px auto 20px;
}

.app_phone_qr_img>img {
    width: 100%;
    height: auto;
}

.app_phone_btn_wp {
    color: #9B9B9B;
    height: 52px;
    line-height: 52px;
    border-radius: 0 0 6px 6px;
    background: #EDEDED;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 15px;
}

.app_phone_btn_wp>a {
    display: block;
    width: 100px;
    height: 26px;
    line-height: 26px;
    float: right;
    margin-top: 13px;
}

.app_phone:hover .app_phone_qr_pop {
    display: block;
    -webkit-animation: phone-pop_fadein 0.5s alternate ease-in-out both;
    animation: phone-pop_fadein 0.5s alternate ease-in-out both;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
}

@-webkit-keyframes phone-pop_fadein {
    0% {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px)
    }
    50% {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
        -webkit-transform: translateY(4px);
        transform: translateY(4px)
    }
    80% {
        -webkit-transform: translateY(-2px);
        transform: translateY(-2px)
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes phone-pop_fadein {
    0% {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px)
    }
    50% {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
        -webkit-transform: translateY(4px);
        transform: translateY(4px)
    }
    80% {
        -webkit-transform: translateY(-2px);
        transform: translateY(-2px)
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

.icon_phone_live {
    -webkit-animation: phone-wobble 2s .5s linear infinite;
    animation: phone-wobble 2s .5s linear infinite;
    -webkit-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}

.app_phone:hover .icon_phone_live {
    -webkit-animation: none;
    animation: none;
}

@-webkit-keyframes phone-wobble {
    from {
        -webkit-transform: none;
        transform: none;
    }
    8% {
        -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    }
    16% {
        -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    }
    24% {
        -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    }
    32% {
        -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    }
    40% {
        -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    }
    48%,
    to {
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes phone-wobble {
    from {
        -webkit-transform: none;
        transform: none;
    }
    8% {
        -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    }
    16% {
        -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    }
    24% {
        -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    }
    32% {
        -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    }
    40% {
        -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    }
    48%,
    to {
        -webkit-transform: none;
        transform: none;
    }
}

.play_download {
    position: absolute;
    right: 13px;
    bottom: 120px;
    z-index: 2;
}

.play_download img {
    margin: 5px auto 3px;
    width: 105px;
    height: 105px;
}

.play_download p {
    color: #ffffff;
    text-align: center;
    line-height: 1.2;
}

.play_download_close {
    display: block;
    position: absolute;
    right: -6px;
    top: -7px;
    -webkit-transition: .5s;
    transition: .5s;
}

.play_download_close:hover {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.packet_entrance .spr_packet {
    background-image: url(../img/play/spr_red_packet.png?v=2020228);
    background-position: -942px -300px;
    background-repeat: no-repeat;
    width: 32px;
    height: 36px;
}

.packet_plugin {
    background-image: url(../img/play/spr_red_packet.png?v=2020228);
    background-position: -751px -388px;
    background-repeat: no-repeat;
    width: 31px;
    height: 39px;
}

.packet_button {
    background-image: url(../img/play/spr_red_packet.png?v=2020228);
    background-position: -751px -344px;
    background-repeat: no-repeat;
    width: 183px;
    height: 36px;
}

.packet_button:hover,
.packet_button:active {
    background-image: url(../img/play/spr_red_packet.png?v=2020228);
    background-position: -751px -300px;
    background-repeat: no-repeat;
}

.packet_close {
    background-image: url(../img/play/spr_red_packet.png?v=2020228);
    background-position: -982px -300px;
    background-repeat: no-repeat;
    width: 23px;
    height: 23px;
}

.send_packet {
    background-image: url(../img/play/spr_red_packet.png?v=2020228);
    background-position: -483px 0px;
    background-repeat: no-repeat;
    width: 260px;
    height: 317px;
}

.send_packet:before {
    background-image: url(../img/play/spr_red_packet.png?v=2020228);
    background-position: 0px -751px;
    background-repeat: no-repeat;
    width: 318px;
    height: 97px;
}

.open_packet_n {
    background-image: url(../img/play/spr_red_packet.png?v=2020228);
    background-position: 0px -483px;
    background-repeat: no-repeat;
    width: 233px;
    height: 260px;
}

.open_packet-a {
    background-image: url(../img/play/spr_red_packet.png?v=2020228);
    background-position: -751px 0px;
    background-repeat: no-repeat;
    width: 256px;
    height: 292px;
}

.pop-twinkle {
    background-image: url(../img/play/spr_red_packet.png?v=2020228);
    background-position: 0px 0px;
    background-repeat: no-repeat;
    width: 475px;
    height: 475px;
}

.neck_packet {
    background-image: url(../img/play/spr_red_packet.png?v=2020228);
    background-position: -241px -483px;
    background-repeat: no-repeat;
    width: 233px;
    height: 250px;
}

.neck_packet:before {
    background-image: url(../img/play/spr_red_packet.png?v=2020228);
    background-position: -482px -483px;
    background-repeat: no-repeat;
    width: 275px;
    height: 180px;
}

.packet_entrance .spr_packet {
    position: relative;
    display: block;
}

.packet_show {
    position: absolute;
    top: 160px;
    right: 0;
    z-index: 1;
}

.marquee_text {
    white-space: nowrap;
    position: absolute;
    padding: 0 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    min-width: 267px;
    height: 34px;
    border-radius: 17px;
    line-height: 34px;
    text-align: center;
    font-size: 12px;
    color: #fff;
    background: #ff00a0;
    background: rgba(255, 0, 160, .7);
    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 0, 160, .78)), color-stop(26%, rgba(255, 0, 110, .78)), to(rgba(255, 137, 92, .78)));
    background: linear-gradient(to right, rgba(255, 0, 160, .78), rgba(255, 0, 110, .78) 26%, rgba(255, 137, 92, .78) 100%);
}

.marquee_text:hover {
    -webkit-box-shadow: 0 2px 5px 0 rgba(73, 0, 14, .2);
    box-shadow: 0 2px 5px 0 rgba(73, 0, 14, .2);
}

.marquee_text strong {
    display: inline-block;
    vertical-align: -12px;
    max-width: 95px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: normal;
    color: #fcff1c;
}

.packet_plugin {
    float: right;
    margin-right: 18px;
    display: block;
    cursor: default;
    -webkit-box-shadow: 0 2px 4px 0 rgba(73, 0, 14, .3);
    box-shadow: 0 2px 4px 0 rgba(73, 0, 14, .3);
    border-radius: 3px;
    -webkit-transition: .2s;
    transition: .2s;
    position: relative;
}

.packet_plugin:hover {
    -webkit-box-shadow: 0 1px 2px 0 rgba(73, 0, 14, .2);
    box-shadow: 0 1px 2px 0 rgba(73, 0, 14, .2);
}

.packet_plugin i {
    position: absolute;
    font-style: normal;
}

.packet_number {
    top: -3px;
    right: -13px;
    font-size: 13px;
    font-weight: bold;
    text-shadow: 2px 0 1px #feeb00, -2px 0 1px #feeb00, 0 2px 1px #feeb00, 0 -2px 1px #feeb00;
    color: #fd4d6a;
}

.packet_timer {
    bottom: 0;
    right: -15px;
    width: 19px;
    height: 19px;
    border: 3px solid #feeb00;
    border-radius: 50%;
    line-height: 19px;
    text-align: center;
    color: #9e5601;
    background: #ffca25;
    white-space: nowrap;
}

.packet_button {
    display: block;
    -webkit-box-shadow: 0 2px 5px 4px rgba(127, 107, 0, .12);
    box-shadow: 0 2px 5px 4px rgba(127, 107, 0, .12);
    line-height: 36px;
    text-align: center;
    font-size: 13px;
    color: #b96400;
}

.packet_button:hover,
.packet_button:active {
    -webkit-box-shadow: 0 1px 2px 1px rgba(127, 107, 0, .1);
    box-shadow: 0 1px 2px 1px rgba(127, 107, 0, .1)
}

.packet_close {
    position: absolute;
    display: block;
    text-indent: -9999em;
    -webkit-transition: .25s;
    transition: .25s;
}

.packet_close:hover {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.send_packet {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    border-radius: 6px;
    -webkit-box-shadow: 0 2px 10px 2px rgba(9, 2, 4, .11);
    box-shadow: 0 2px 10px 2px rgba(9, 2, 4, .11);
}

.send_packet:before {
    position: absolute;
    top: -24px;
    left: -41px;
    display: block;
    content: '';
}

.send_packet_ul {
    margin-top: 94px;
    text-align: center;
}

.send_packet_li {
    display: inline-block;
    vertical-align: middle;
    margin: 0 6px 14px;
}

.send_packet_link {
    display: block;
    width: 94px;
    height: 32px;
    line-height: 32px;
    border-radius: 4px;
    line-height: 32px;
    text-align: center;
    font-size: 14px;
    color: #FD4C60;
    background: #FFFFFF;
    -webkit-box-shadow: 0 0 4px 0 #D40018;
    box-shadow: 0 0 4px 0 #D40018;
    -webkit-transition: .2s;
    transition: .2s;
}

.send_packet_link:hover,
.send_packet_li--selected .send_packet_link {
    background: #FFE936;
    color: #111111;
}

.redpacket_input>input {
    display: block;
    margin: 0 auto 15px;
    width: 204px;
    height: 30px;
    line-height: 30px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 10px;
    font-size: 13px;
    background: #FFFFFF;
    -webkit-box-shadow: inset 0 0 3px 0 #9D1228;
    box-shadow: inset 0 0 3px 0 #9D1228;
    border-radius: 4px;
    border: 0;
    outline: none;
}

.send_packet p {
    line-height: 1;
    text-align: center;
    font-size: 12px;
    color: #fff;
    margin-bottom: 5px;
}

.send_packet .packet_button {
    margin: 0 auto;
    width: 186px;
    height: 42px;
    line-height: 42px;
    font-size: 17px;
    color: #111111;
    background: #FFE936;
    -webkit-box-shadow: 0 0 8px 0 rgba(212, 0, 24, 0.80);
    box-shadow: 0 0 8px 0 rgba(212, 0, 24, 0.80);
    border-radius: 4px;
}

.send_packet .packet_button:hover {
    background: #FFF17E;
}

.send_packet .packet_button:active {
    background: #FCCD22;
}

.send_packet .packet_close {
    top: -21px;
    right: -33px;
}

.open_packet {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    border-radius: 6px;
}

.open_packet_img {
    margin: 22px auto 6px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid #ffdd2a;
    overflow: hidden;
}

.open_packet_img img {
    width: inherit;
    height: inherit;
}

.open_packet p {
    margin: 0 auto 10px;
    max-width: 145px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 1;
    text-align: center;
    font-size: 12px;
    color: #fff;
}

.open_packet p:first-child {
    font-size: 13px;
}

.open_packet_btn {
    position: relative;
    margin: 20px auto;
    display: block;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    -webkit-box-shadow: 0 0 4px 0 rgba(253, 82, 94, .12), 0 2px 8px 5px rgba(73, 0, 14, .12);
    box-shadow: 0 0 4px 0 rgba(253, 82, 94, .12), 0 2px 8px 5px rgba(73, 0, 14, .12);
    line-height: 62px;
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    text-shadow: 1px 0 0 #ffff00, -1px 0 0 #ffff00, 0 1px 0 #ffff00, 0 -1px 0 #ffff00;
    color: #b96400;
    background: #ffe46e;
    -webkit-transition: .2s;
    transition: .2s;
}

.open_packet_btn:hover {
    -webkit-box-shadow: 0 0 4px 0 rgba(253, 82, 94, .12), 0 1px 5px 2px rgba(73, 0, 14, .12);
    box-shadow: 0 0 4px 0 rgba(253, 82, 94, .12), 0 1px 5px 2px rgba(73, 0, 14, .12);
}

.open_packet_n {
    -webkit-box-shadow: 0 2px 10px 2px rgba(9, 2, 4, .11);
    box-shadow: 0 2px 10px 2px rgba(9, 2, 4, .11);
}

.open_packet_n .packet_close {
    top: -12px;
    right: -24px;
}

@-webkit-keyframes twinkle-rotate {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes twinkle-rotate {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.pop-twinkle {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    -webkit-animation: twinkle-rotate 10s linear infinite;
    animation: twinkle-rotate 10s linear infinite;
}

.open_packet-a .open_packet_img {
    margin-top: 32px;
}

.open_packet-a p {
    color: #ffe46e;
}

.open_packet-a .open_packet_btn:before {
    position: absolute;
    display: block;
    margin: -6px;
    content: '';
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: #ffe46e;
    background: rgba(255, 228, 110, .22);
}

.open_packet-a .packet_close {
    top: -4px;
    right: -11px;
}

.neck_packet {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

.neck_packet:before {
    position: absolute;
    top: -12px;
    left: -22px;
    display: block;
    content: '';
}

.neck_packet .open_packet_img {
    margin-top: 12px;
}

.neck_packet p {
    margin-left: auto;
    margin-right: auto;
    max-width: 210px;
    line-height: 1;
    font-size: 12px;
    text-align: center;
    color: #fff;
}

.neck_packet_span {
    display: inline-block;
    vertical-align: middle;
    margin-top: -2px;
    max-width: 123px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.neck_packet .open_packet_img+p {
    margin-top: 8px;
    color: #525252;
}

.neck_packet .neck_packet_text {
    margin: 18px auto 50px;
    font-size: 19px;
    color: #fd565d;
}

.neck_packet_lucky {
    display: inline-block;
    vertical-align: middle;
    margin-top: -2px;
    max-width: 62px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.neck_packet .packet_button {
    margin: 8px auto;
}

.neck_packet .packet_close {
    top: -13px;
    right: -14px;
}

.neck_packet_2 .neck_packet_text {
    margin: 8px auto 9px;
}

.neck_packet_2 .neck_packet_text+p {
    margin-bottom: 39px;
    color: #b96400;
}

.rank_defend {
    height: 127px;
}

.rank_wp:hover .rank_defend.rank_page_wp {
    height: 284px;
}

.rank_defend .rank_page {
    height: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.rank_defend .rank_page,
.rank_defend_height {
    padding-bottom: 55px;
}

.rank_defend .rank_item {
    height: 44px;
    line-height: 44px;
    margin-bottom: 0;
    border-top: 1px solid rgba(232, 232, 232, 0.50)
}

.rank_defend .rank_item:first-child {
    border-top: 0;
}

.rank_defend .rank_name,
.rank_defend .rank_name>span {
    width: 130px;
}

.rank_defend .rank_empty {
    padding-top: 20px;
    position: relative;
    top: auto;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    position: relative;
    top: 0;
}

.rank_defend .defend_btn {
    padding: 14px 0;
    width: 100%;
    z-index: 1;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ffffff;
    display: none;
}

.rank_wp:hover .rank_defend .defend_btn {
    display: block;
}

.defend_btn .common_btn {
    display: block;
    margin: 0 auto;
    width: 100px;
    height: 26px;
    line-height: 26px;
    color: #ffffff;
    text-decoration: none;
}

.rank_defend_mine {
    padding-top: 5px;
    color: #4A4A4A;
    font-size: 13px;
    text-align: center;
}

.rank_defend_head {
    margin: 0 auto 6px;
    width: 60px;
    height: 60px;
    position: relative
}

.rank_defend_head:before {
    content: "";
    width: 66px;
    height: 66px;
    background: url("../img/play/guardian/head_dec.png") no-repeat center;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -33px 0 0 -33px;
}

.rank_defend_head img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.rank_defend_name>span,
.rank_defend_txt>span {
    display: inline-block;
    vertical-align: middle;
}

.rank_defend_name>span {
    cursor: pointer;
}

.guardian2_appr[name="1"] .guardian2_appr_head {
    background-image: url(../img/play/guardian/spr_defend_in.png?v=2020228);
    background-position: 0px 0px;
    background-repeat: no-repeat;
    width: 260px;
    height: 43px;
}

.guardian2_appr[name="2"] .guardian2_appr_head {
    background-image: url(../img/play/guardian/spr_defend_in.png?v=2020228);
    background-position: 0px -51px;
    background-repeat: no-repeat;
    width: 260px;
    height: 43px;
}

.guardian2_appr[name="3"] .guardian2_appr_head {
    background-image: url(../img/play/guardian/spr_defend_in.png?v=2020228);
    background-position: 0px -102px;
    background-repeat: no-repeat;
    width: 260px;
    height: 43px;
}

.guardian2_appr:before,
.guardian2_appr:after {
    background-image: url(../img/play/guardian/spr_defend_in.png?v=2020228);
    background-position: 0px -153px;
    background-repeat: no-repeat;
    width: 60px;
    height: 24px;
}

.guardian2_appr[name="4"] .guardian2_appr_head {
    width: 260px;
    height: 43px;
    background: url("../img/play/guardian/ani_head.png") -260px 0px no-repeat;
    -webkit-animation: guardian2_appr-animation2 1s steps(1) infinite forwards;
    animation: guardian2_appr-animation2 1s steps(1) infinite forwards;
}

.guardian2_appr_fire {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -130px;
    width: 260px;
    height: 43px;
    background: url("../img/play/guardian/ani_fire.png") -260px 0px no-repeat;
    -webkit-animation: guardian2_appr-animation2 1s steps(1) infinite forwards;
    animation: guardian2_appr-animation2 1s steps(1) infinite forwards;
}

.guardian2 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
}

.guardian2 i {
    font-style: normal;
}

.guardian2_appr {
    width: 330px;
    position: relative;
    margin: 30px auto 0;
}

.guardian2_appr_head {
    display: block;
    margin: 0 auto;
}

.guardian2_appr p {
    height: 20px;
    line-height: 20px;
    border-radius: 10px;
    text-align: center;
    color: #ffffff;
    position: relative;
    overflow: hidden;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.guardian2_appr[name="1"] p {
    background: #274e2f;
    background: -webkit-gradient(linear, left top, right top, from(#7aaa8c), color-stop(#274e2f), to(#7aaa8c));
    background: linear-gradient(90deg, #7aaa8c, #274e2f, #7aaa8c);
}

.guardian2_appr[name="2"] p {
    background: #2194b1;
    background: -webkit-gradient(linear, left top, right top, from(#73e3fe), color-stop(22%, #75c9df), color-stop(50%, #2194b1), color-stop(79%, #4ecaeb), to(#73e3fe));
    background: linear-gradient(90deg, #73e3fe, #75c9df 22%, #2194b1 50%, #4ecaeb 79%, #73e3fe);
}

.guardian2_appr[name="3"] p {
    background: #ca7400;
    background: -webkit-gradient(linear, left top, right top, from(#e6d366), color-stop(#ca7400), to(#e6d366));
    background: linear-gradient(90deg, #e6d366, #ca7400, #e6d366);
}

.guardian2_appr[name="4"] p {
    background: #6f16cc;
    background: -webkit-gradient(linear, left top, right top, from(#b683ff), color-stop(#6f16cc), to(#b683ff));
    background: linear-gradient(90deg, #b683ff, #6f16cc, #b683ff);
}

.guardian2_appr span {
    color: #fff21a;
}

.guardian2_appr span>* {
    display: inline-block;
    vertical-align: middle;
    margin-top: -2px;
}

.guardian2_appr span>i {
    max-width: 82px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.guardian2_appr:before,
.guardian2_appr:after {
    position: absolute;
    display: block;
    content: '';
    z-index: 1;
}

.guardian2_appr[name="1"]:before,
.guardian2_appr[name="1"]:after {
    display: none;
}

.guardian2_appr:before {
    left: 30px;
    bottom: 10px;
    -webkit-animation: guardian2_appr-animation3 1.5s linear infinite;
    animation: guardian2_appr-animation3 1.5s linear infinite;
}

.guardian2_appr:after {
    right: 44px;
    bottom: -12px;
    -webkit-animation: guardian2_appr-animation4 1.5s linear infinite;
    animation: guardian2_appr-animation4 1.5s linear infinite;
}

.guardian2_appr_light {
    position: absolute;
    left: 20px;
    top: -10px;
    width: 56px;
    height: 30px;
    background: linear-gradient(120deg, transparent 0, transparent 25%, #ffffff 25%, #ffffff 40%, transparent 40%, transparent 55%, #ffffff 55%, #ffffff 80%, transparent 80%, transparent 100%);
    background: linear-gradient(120deg, transparent 0, transparent 25%, rgba(255, 255, 255, .2) 25%, rgba(255, 255, 255, .2) 40%, transparent 40%, transparent 55%, rgba(255, 255, 255, .2) 55%, rgba(255, 255, 255, .2) 80%, transparent 80%, transparent 100%);
    -webkit-animation: guardian2_appr-animation3 1s linear infinite;
    animation: guardian2_appr-animation3 1s linear infinite;
}

@-webkit-keyframes guardian2_appr-animation2 {
    0% {
        background-position: -260px 0px;
    }
    6.67% {
        background-position: -1820px 0px;
    }
    13.33% {
        background-position: -520px 0px;
    }
    20.00% {
        background-position: -780px 0px;
    }
    26.67% {
        background-position: -1040px 0px;
    }
    33.33% {
        background-position: -1300px 0px;
    }
    40.00% {
        background-position: -1560px 0px;
    }
    46.67% {
        background-position: 0px 0px;
    }
    53.33% {
        background-position: -2080px 0px;
    }
    60.00% {
        background-position: -2340px 0px;
    }
    66.67% {
        background-position: -2600px 0px;
    }
    73.33% {
        background-position: -2860px 0px;
    }
    80.00% {
        background-position: -3120px 0px;
    }
    86.67% {
        background-position: -3380px 0px;
    }
    93.33%,
    100% {
        background-position: -3640px 0px;
    }
}

@keyframes guardian2_appr-animation2 {
    0% {
        background-position: -260px 0px;
    }
    6.67% {
        background-position: -1820px 0px;
    }
    13.33% {
        background-position: -520px 0px;
    }
    20.00% {
        background-position: -780px 0px;
    }
    26.67% {
        background-position: -1040px 0px;
    }
    33.33% {
        background-position: -1300px 0px;
    }
    40.00% {
        background-position: -1560px 0px;
    }
    46.67% {
        background-position: 0px 0px;
    }
    53.33% {
        background-position: -2080px 0px;
    }
    60.00% {
        background-position: -2340px 0px;
    }
    66.67% {
        background-position: -2600px 0px;
    }
    73.33% {
        background-position: -2860px 0px;
    }
    80.00% {
        background-position: -3120px 0px;
    }
    86.67% {
        background-position: -3380px 0px;
    }
    93.33%,
    100% {
        background-position: -3640px 0px;
    }
}

@-webkit-keyframes guardian2_appr-animation3 {
    from {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    to {
        -webkit-transform: translateX(230px);
        transform: translateX(230px);
    }
}

@keyframes guardian2_appr-animation3 {
    from {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    to {
        -webkit-transform: translateX(230px);
        transform: translateX(230px);
    }
}

@-webkit-keyframes guardian2_appr-animation4 {
    from {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    to {
        -webkit-transform: translateX(-230px);
        transform: translateX(-230px);
    }
}

@keyframes guardian2_appr-animation4 {
    from {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    to {
        -webkit-transform: translateX(-230px);
        transform: translateX(-230px);
    }
}

.derege_content {
    background-image: url(../img/play/guardian/spr_defend_opened.png?v=2020228);
    background-position: -165px -68px;
    background-repeat: no-repeat;
    width: 373px;
    height: 25px;
    line-height: 25px;
}

.derege1 .derege_content {
    background-image: url(../img/play/guardian/spr_defend_opened.png?v=2020228);
    background-position: -165px -68px;
    background-repeat: no-repeat;
}

.derege2 .derege_content {
    background-image: url(../img/play/guardian/spr_defend_opened.png?v=2020228);
    background-position: -165px -34px;
    background-repeat: no-repeat;
}

.derege3 .derege_content {
    background-image: url(../img/play/guardian/spr_defend_opened.png?v=2020228);
    background-position: -165px 0px;
    background-repeat: no-repeat;
}

.derege4 .derege_content {
    background-image: url(../img/play/guardian/spr_defend_opened.png?v=2020228);
    background-position: 0px -122px;
    background-repeat: no-repeat;
}

.derege2 .derege_shine:before {
    background-image: url(../img/play/guardian/spr_defend_opened.png?v=2020228);
    background-position: -208px -155px;
    background-repeat: no-repeat;
}

.derege3 .derege_shine:before {
    background-image: url(../img/play/guardian/spr_defend_opened.png?v=2020228);
    background-position: 0px -155px;
    background-repeat: no-repeat;
}

.derege4 .derege_shine:before {
    background-image: url(../img/play/guardian/spr_defend_opened.png?v=2020228);
    background-position: -104px -155px;
    background-repeat: no-repeat;
}

.derege1 .derege_img {
    background-image: url(../img/play/guardian/spr_defend_opened.png?v=2020228);
    background-position: 0px 0px;
    background-repeat: no-repeat;
    width: 157px;
    height: 114px;
}

.derege2 .derege_img {
    background-image: url(../img/play/guardian/spr_defend_opened.png?v=2020228);
    background-position: -312px -155px;
    background-repeat: no-repeat;
    width: 151px;
    height: 41px;
}

.derege3 .derege_img {
    background-image: url(../img/play/guardian/spr_defend_opened.png?v=2020228);
    background-position: 0px -257px;
    background-repeat: no-repeat;
    width: 110px;
    height: 37px;
}

.derege4 .derege_img {
    background-image: url(../img/play/guardian/spr_defend_opened.png?v=2020228);
    background-position: 0px -302px;
    background-repeat: no-repeat;
    width: 72px;
    height: 44px;
}

.derege2 .derege_img:before {
    background-image: url(../img/play/guardian/spr_defend_opened.png?v=2020228);
    background-position: -381px -122px;
    background-repeat: no-repeat;
    width: 25px;
    height: 16px;
}

.derege3 .derege_img:before {
    background-image: url(../img/play/guardian/spr_defend_opened.png?v=2020228);
    background-position: -165px -101px;
    background-repeat: no-repeat;
    width: 17px;
    height: 11px;
}

.derege_ani_fire1,
.derege_ani_fire3 {
    background-image: url(../img/play/guardian/spr_defend_opened.png?v=2020228);
    background-position: -190px -101px;
    background-repeat: no-repeat;
    width: 11px;
    height: 10px;
}

.derege_ani_fire2 {
    background-image: url(../img/play/guardian/spr_defend_opened.png?v=2020228);
    background-position: -209px -101px;
    background-repeat: no-repeat;
    width: 11px;
    height: 10px;
}

.derege_ani_fire4,
.derege_ani_fire6 {
    background-image: url(../img/play/guardian/spr_defend_opened.png?v=2020228);
    background-position: -228px -101px;
    background-repeat: no-repeat;
    width: 11px;
    height: 10px;
}

.derege_ani_fire5 {
    background-image: url(../img/play/guardian/spr_defend_opened.png?v=2020228);
    background-position: -247px -101px;
    background-repeat: no-repeat;
    width: 11px;
    height: 10px;
}

.derege {
    position: absolute;
    z-index: 1;
    top: 13px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.derege_content {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    margin: 0 auto;
}

.derege1 .derege_content {
    bottom: 12px;
}

.derege2 .derege_content {
    bottom: -12px;
}

.derege3 .derege_content {
    bottom: -18px;
}

.derege4 .derege_content {
    bottom: -16px;
}

.derege_content:before,
.derege_content:after {
    position: absolute;
    display: block;
    content: '';
    width: 53px;
    height: 24px;
}

.derege_content:before {
    top: -12px;
    left: 15%;
    -webkit-animation: derege_ani_lightto 1.5s linear both infinite;
    animation: derege_ani_lightto 1.5s linear both infinite;
}

.derege_content:after {
    bottom: -12px;
    right: 15%;
    -webkit-animation: derege_ani_lightback 1.5s linear both infinite;
    animation: derege_ani_lightback 1.5s linear both infinite;
}

.derege1 .derege_content:before,
.derege1 .derege_content:after {
    display: none;
}

.derege_shine {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
}

.derege_shine:before {
    position: absolute;
    display: block;
    content: '';
    width: 96px;
    height: 93px;
    -webkit-animation: derege_ani_shine 1.8s linear both infinite;
    animation: derege_ani_shine 1.8s linear both infinite;
}

.derege_info {
    position: relative;
    text-align: center;
    color: #fff;
}

.derege_info_c {
    position: relative;
}

.derege_info_em {
    max-width: 48px;
    display: inline-block;
    vertical-align: -9px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #feed19;
}

.derege_info_c>a {
    text-decoration: none;
    color: inherit;
}

.derege_info_c>a:hover {
    text-decoration: underline;
}

.derege_img {
    position: relative;
    margin: 0 auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: 5px;
}

.derege_img img {
    display: block;
    margin: 0 auto;
    width: 27px;
    height: 27px;
    border-radius: 100%;
}

.derege1 .derege_img img {
    width: 53px;
    height: auto;
    border-radius: 0;
}

.derege1 .derege_img {
    padding-top: 20px;
}

.derege4 .derege_img {
    padding-top: 8px;
}

.derege2 .derege_img:before,
.derege3 .derege_img:before {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    display: block;
    content: '';
}

.derege2 .derege_img:before {
    top: -7px;
}

.derege3 .derege_img:before {
    top: -6px;
}

.derege_ani {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.derege_ani>i {
    position: absolute;
    display: block;
}

.derege2 .derege_ani_fire1 {
    top: 5px;
    left: 25px;
    -webkit-animation: derege_ani_fires 2.5s 1s linear both infinite;
    animation: derege_ani_fires 2.5s 1s linear both infinite;
}

.derege2 .derege_ani_fire2 {
    top: -6px;
    right: 17px;
    -webkit-animation: derege_ani_fires 2.2s .2s linear both infinite;
    animation: derege_ani_fires 2.2s .2s linear both infinite;
}

.derege2 .derege_ani_fire3 {
    top: 16px;
    right: -28px;
    -webkit-animation: derege_ani_fires 2.4s .8s linear both infinite;
    animation: derege_ani_fires 2.4s .8s linear both infinite;
}

.derege3 .derege_ani_fire1 {
    top: 2px;
    left: 11px;
    -webkit-animation: derege_ani_fires 2.5s 1s linear both infinite;
    animation: derege_ani_fires 2.5s 1s linear both infinite;
}

.derege3 .derege_ani_fire2 {
    top: 11px;
    right: -17px;
    -webkit-animation: derege_ani_fires 2.2s .2s linear both infinite;
    animation: derege_ani_fires 2.2s .2s linear both infinite;
}

.derege4 .derege_ani_fire4 {
    top: 18px;
    left: -28px;
    -webkit-animation: derege_ani_fires 2.5s 1s linear both infinite;
    animation: derege_ani_fires 2.5s 1s linear both infinite;
}

.derege4 .derege_ani_fire5 {
    top: 6px;
    right: -25px;
    -webkit-animation: derege_ani_fires 2.2s .2s linear both infinite;
    animation: derege_ani_fires 2.2s .2s linear both infinite;
}

.derege4 .derege_ani_fire6 {
    top: 19px;
    right: -63px;
    -webkit-animation: derege_ani_fires 2.4s .8s linear both infinite;
    animation: derege_ani_fires 2.4s .8s linear both infinite;
}

.derege_ani_shadow {
    width: 4px;
    height: 4px;
    border-radius: 100%;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    opacity: 1;
}

.derege2 .derege_ani_shadow,
.derege3 .derege_ani_shadow {
    background: #d53bff;
}

.derege4 .derege_ani_shadow {
    background: #fff83b;
}

.derege2 .derege_ani_shadow {
    top: 18px;
    left: -13px;
    -webkit-box-shadow: 12px 5px 0 0.8px rgba(0, 216, 217, .65), 126px -15px 0 1px #00d8d9, 165px 3px 0 0.4px #d53bff;
    box-shadow: 12px 5px 0 0.8px rgba(0, 216, 217, .65), 126px -15px 0 1px #00d8d9, 165px 3px 0 0.4px #d53bff;
}

.derege3 .derege_ani_shadow {
    top: 22px;
    left: -26px;
    -webkit-box-shadow: 14px -2px 0 0.8px rgba(0, 216, 217, .65), 117px -16px 0 0.5px #d53bff, 165px -2px 0 1.2px #00d8d9;
    box-shadow: 14px -2px 0 0.8px rgba(0, 216, 217, .65), 117px -16px 0 0.5px #d53bff, 165px -2px 0 1.2px #00d8d9;
}

.derege4 .derege_ani_shadow {
    top: 20px;
    left: -43px;
    -webkit-box-shadow: 33px -6px 0 0.8px #fff, 123px 3px 0 0.8px #fff, 151px -5px 0 1.2px #fff83b;
    box-shadow: 33px -6px 0 0.8px #fff, 123px 3px 0 0.8px #fff, 151px -5px 0 1.2px #fff83b;
}

@-webkit-keyframes derege_ani_shine {
    from,
    61%,
    to {
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px);
    }
    60% {
        -webkit-transform: translateX(500px);
        transform: translateX(500px);
    }
}

@keyframes derege_ani_shine {
    from,
    61%,
    to {
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px);
    }
    60% {
        -webkit-transform: translateX(500px);
        transform: translateX(500px);
    }
}

@-webkit-keyframes derege_ani_lightto {
    from {
        -webkit-transform: none;
        transform: none;
    }
    to {
        -webkit-transform: translateX(220px);
        transform: translateX(220px);
    }
}

@keyframes derege_ani_lightto {
    from {
        -webkit-transform: none;
        transform: none;
    }
    to {
        -webkit-transform: translateX(220px);
        transform: translateX(220px);
    }
}

@-webkit-keyframes derege_ani_lightback {
    from {
        -webkit-transform: none;
        transform: none;
    }
    to {
        -webkit-transform: translateX(-220px);
        transform: translateX(-220px);
    }
}

@keyframes derege_ani_lightback {
    from {
        -webkit-transform: none;
        transform: none;
    }
    to {
        -webkit-transform: translateX(-220px);
        transform: translateX(-220px);
    }
}

@-webkit-keyframes derege_ani_fires {
    from {
        -webkit-transform: scale(.6) rotate(0deg);
        transform: scale(.6) rotate(0deg);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
        opacity: .3;
    }
    50% {
        -webkit-transform: scale(1) rotate(120deg);
        transform: scale(1) rotate(120deg);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
    }
    80% {
        -webkit-transform: scale(1.2) rotate(150deg);
        transform: scale(1.2) rotate(150deg);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
    }
    to {
        -webkit-transform: scale(1.2) rotate(150deg);
        transform: scale(1.2) rotate(150deg);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
    }
}

@keyframes derege_ani_fires {
    from {
        -webkit-transform: scale(.6) rotate(0deg);
        transform: scale(.6) rotate(0deg);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
        opacity: .3;
    }
    50% {
        -webkit-transform: scale(1) rotate(120deg);
        transform: scale(1) rotate(120deg);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
    }
    80% {
        -webkit-transform: scale(1.2) rotate(150deg);
        transform: scale(1.2) rotate(150deg);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
    }
    to {
        -webkit-transform: scale(1.2) rotate(150deg);
        transform: scale(1.2) rotate(150deg);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
    }
}

.chat_fans .chat_name {
    color: #ff3f12;
}

.fansdoor_content {
    padding: 5px 20px;
}

.fansdoor_name {
    font-size: 14px;
}

.fansdoor_name img {
    display: inline-block;
    vertical-align: middle;
    margin-left: 2px;
    margin-top: -2px;
    height: 16px;
    width: auto;
}

.fansdoor_data {
    color: #9B9B9B;
}

.fansdoor_data>span>i {
    color: #ff2c55;
    font-weight: bold;
}

.fansdoor_data span+span {
    margin-left: 20px;
}

.fansdoor_rate {
    margin: 6px 0 17px;
    white-space: nowrap;
}

.fansdoor_rank,
.fansdoor_progress_wp,
.fansdoor_progressOuter,
.fansdoor_progress_txt {
    display: inline-block;
    vertical-align: middle;
}

.fansdoor_rank {}

.fansdoor_progress_wp {
    background: #EDEDED;
    border-radius: 3px;
    line-height: 20px;
    margin-left: 10px;
    padding: 0 10px;
}

.fansdoor_progressOuter {
    position: relative;
    width: 120px;
    height: 3px;
    border-radius: 2px;
    text-align: center;
    background: #D0D0D0;
    color: #9B9B9B;
    margin-right: 18px;
}

.fansdoor_progressInside {
    position: absolute;
    height: 100%;
    border-radius: inherit;
    background: #FF5A6A;
    background: -webkit-gradient(linear, left bottom, left top, from(#FA60C5), to(#FF5A6A));
    background: linear-gradient(0deg, #FA60C5 0%, #FF5A6A 100%);
}

.rank_wp:hover .rank_fans {
    height: 224px;
}

.rank_fans .rank_list {
    min-height: 128px;
}

.rank_fans .rank_list>li {
    height: 17px;
    line-height: 17px;
    margin-bottom: 13px;
}

.rank_fans .rank_list .rank_item_tit {
    padding-top: 3px;
    margin-bottom: 10px;
}

.rank_fans .rank_name {
    width: 200px;
}

.rank_fans .rank_name>span {
    display: inline-block;
    vertical-align: middle;
    max-width: 120px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.rank_fans .rank_name .img_icon {
    cursor: default;
}

.editAreafans {
    position: relative;
    z-index: 1;
    width: 58px;
    float: left;
    line-height: 1.5;
    height: 100%;
    margin-right: 14px;
}

.editAreafans:after {
    content: "";
    display: block;
    width: 1px;
    height: 16px;
    background: #DBDBDB;
    position: absolute;
    right: -6px;
    top: 53%;
    margin-top: -8px;
}

.editAreafans_btn {
    position: absolute;
    top: 19px;
    left: -3px;
    width: 58px;
    border-radius: 8px;
    text-align: center;
    font-size: 12px;
    color: #fff;
    background: #FF94DA;
    background: -webkit-gradient(linear, right top, left top, from(#FF94DA), to(#FF929D));
    background: linear-gradient(-90deg, #FF94DA 0%, #FF929D 100%);
}

.editAreafans_btn:before {
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    margin: auto;
    display: block;
    content: '';
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAICAYAAAAftBSpAAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMzggNzkuMTU5ODI0LCAyMDE2LzA5LzE0LTAxOjA5OjAxICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+IEmuOgAAAWVJREFUKJFt0TFrk2EUxfHf876NTWPapo2DbYWsLhXExaEOgqKTg+DgIjj4AQS/hZ+gVdTBwal20MVBQRwcBMFFaBUsiKhYkZTUNPF9rkMtGPSu9/zPvZyT/Gfi9up52WURS5jDQLJJeiK5k65dfPu3Po3Cjzuq3fsiLxHE/jr2pCmQsqJYUZu5nq6e7o+YxPLaoqieiWiLIGcik/fPJYq0RxQFZfFSvXkmXTnXG4O4+7BlUD0S0ZYropJPfKG9K21MiFbFob60MSW9m2GsRJzU793DpQSxsnpTzjdE5shhZndUU0//ySrlUvH5Al+/0+1RJora2TKWX9X48QB1zQmWjhMHpO5rfnUZ9qXhgGFf0ZuXWsfozPP+I0VJiqkUt9ZOydVzEVSZ4ZDZFrtbYuGFGN/e+2JrTvqwyMEGvZ/U69RKinJnjOiM9ovNT3R70psFjq6zPS6tTzP5jekmk40/TUE0fgPAiYpQ+fFO+AAAAABJRU5ErkJggg==');
    width: 17px;
    height: 8px;
}

.editAreafans_btn img {
    display: none;
    width: 100%;
    height: auto;
}

.editAreafans_btn.cur {
    font-size: 0;
    text-indent: -9999em;
    background: none;
    top: 15px;
}

.editAreafans_btn.cur:before {
    display: none;
    content: none;
}

.editAreafans_btn.cur img {
    display: block;
}

.editAreafans_none {
    position: absolute;
    left: -23px;
    top: -172px;
    width: 230px;
    height: 165px;
    -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .24);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .24);
    border-radius: 5px;
    text-align: center;
    background: #fff;
}

.editAreafans_none .icon_fans_empty {
    margin-top: 20px;
}

.editAreafans_none:before,
.editAreafans_none:after,
.editAreafans_list:before,
.editAreafans_list:after {
    display: block;
    content: '';
    position: absolute;
    bottom: -18px;
    left: 40px;
    border-width: 9px 7px;
    border-style: solid dashed dashed dashed;
    border-color: #fff transparent transparent transparent;
    cursor: pointer;
}

.editAreafans_none:before,
.editAreafans_list:before {
    bottom: -20px;
    left: 39px;
    border-width: 10px 9px;
    border-style: solid dashed dashed dashed;
    border-color: #e0dede transparent transparent transparent;
}

.icon_fans_empty {
    margin: 13px auto 10px;
}

.editAreafans_none_info {
    color: #525252;
}

.editAreafans_none_link {
    display: block;
    width: 100px;
    height: 26px;
    line-height: 26px;
    margin: 10px auto 0;
}

.editAreafans_list {
    position: absolute;
    left: -24px;
    bottom: 57px;
    width: 119px;
    border-radius: 6px;
    -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .24);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .24);
    background: #fff;
}

.editAreafans_list>ul {
    max-height: 137px;
    overflow-y: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px 0;
}

.editAreafans_list li {
    height: 24px;
    line-height: 24px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 5px;
    -webkit-transition: .2s;
    transition: .2s;
    cursor: pointer;
    margin-top: 6px;
    text-align: center;
}

.editAreafans_list li:first-child {
    margin-top: 0;
}

.editAreafans_list li:hover {
    background: #F0F0F0;
}

.editAreafans_list_c {
    white-space: nowrap;
}

.editAreafans_list_img {
    width: 58px;
    height: 19px;
}

.editAreafans_list_img,
.editAreafans_list_btn {
    display: inline-block;
    vertical-align: middle;
}

.editAreafans_list_btn {
    padding-left: 2px;
}

.editAreafans_list_c.cur .editAreafans_list_img {
    display: none;
}

.editAreafans_list_c.cur .editAreafans_list_btn {
    width: 58px;
    height: 19px;
    line-height: 19px;
    background: #D8D8D8;
    color: #9B9B9B;
    border-radius: 6px;
}

.fans_wp {
    background: transparent;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}

.playfans {
    position: absolute;
    top: 0;
    left: 0;
}

.playfans_info {
    position: relative;
    max-width: 275px;
    height: 38px;
    line-height: 38px;
    padding-left: 4px;
    padding-right: 5px;
    border-radius: 19px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    font-size: 0;
    text-align: left;
    background: #c26aff;
    background: -webkit-gradient(linear, left top, right top, from(#ca5bf8), to(#ff399d));
    background: linear-gradient(to right, #ca5bf8, #ff399d);
}

.playfans_info:before {
    content: "";
    display: block;
    width: 100px;
    height: 100%;
    background: linear-gradient(135deg, transparent 0, transparent 30px, #ffffff 30px, #ffffff 45px, transparent 45px, transparent 55px, #ffffff 55px, #ffffff 65px, transparent 65px, transparent 100%);
    background: linear-gradient(135deg, transparent 0, transparent 30px, rgba(255, 255, 255, .2) 30px, rgba(255, 255, 255, .2) 45px, transparent 45px, transparent 55px, rgba(255, 255, 255, .2) 55px, rgba(255, 255, 255, .2) 65px, transparent 65px, transparent 100%);
    position: absolute;
    right: 0;
    top: 0;
}

.playfans_info_img,
.playfans_info_mse {
    display: inline-block;
    vertical-align: middle;
}

.playfans_info_img {
    margin-right: 7px;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background: #fff;
}

.playfans_info_img img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

.playfans_info_mse {
    max-width: 226px;
    line-height: 1.5;
    font-size: 12px;
    text-align: left;
    color: #fff;
}

.playfans_info_mse em,
.playfans_info_mse i,
.playfans_info_mse strong {
    font-weight: normal;
    font-style: normal;
}

.playfans_info_mse strong {
    display: inline-block;
    vertical-align: -4px;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.playfans_info_mse img {
    display: inline-block;
    vertical-align: middle;
    height: 16px;
    width: auto;
    margin-top: -3px;
    margin-right: 2px;
}

.playfanscontrol {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 330px;
    height: 255px;
    background: url(../img/play/fans_ani/fans_sprites.png) no-repeat;
    -webkit-animation: ani_playfanscontrol 1.35s steps(1) forwards;
    animation: ani_playfanscontrol 1.35s steps(1) forwards;
    z-index: 5;
}

.playfanscontrol_c {
    -webkit-animation: ani_playfansopacity 1s forwards;
    animation: ani_playfansopacity 1s forwards;
}

.playfanscontrol_img {
    display: block;
    margin: 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 100%;
    background: #fff;
}

.playfanscontrol_info {
    text-align: center;
    font-size: 12px;
    color: #fcffa7;
}

.playfanscontrol_info a {
    text-decoration: underline;
    color: #ff27b5;
}

.playfanscontrol_info img {
    display: inline-block;
    vertical-align: -3px;
    width: 66px;
    max-height: 16px;
    margin-left: 5px;
}

@-webkit-keyframes ani_playfanscontrol {
    0% {
        background-position: -330px 0;
    }
    5.56% {
        background-position: -990px 0;
    }
    11.11% {
        background-position: 0 -255px;
    }
    16.67% {
        background-position: -330px -255px;
    }
    22.22% {
        background-position: -660px 0;
    }
    27.78% {
        background-position: -660px -255px;
    }
    33.33% {
        background-position: 0 -510px;
    }
    38.89% {
        background-position: -330px -510px;
    }
    44.44% {
        background-position: -660px -510px;
    }
    50.00% {
        background-position: 0 0;
    }
    55.56% {
        background-position: -990px -255px;
    }
    61.11% {
        background-position: -990px -510px;
    }
    66.67% {
        background-position: 0 -765px;
    }
    72.22% {
        background-position: -330px -765px;
    }
    77.78% {
        background-position: -660px -765px;
    }
    83.33% {
        background-position: -990px -765px;
    }
    88.89% {
        background-position: 0 -1020px;
    }
    94.44% {
        background-position: -330px -1020px;
    }
    100% {
        background-position: -330px -1020px;
    }
}

@keyframes ani_playfanscontrol {
    0% {
        background-position: -330px 0;
    }
    5.56% {
        background-position: -990px 0;
    }
    11.11% {
        background-position: 0 -255px;
    }
    16.67% {
        background-position: -330px -255px;
    }
    22.22% {
        background-position: -660px 0;
    }
    27.78% {
        background-position: -660px -255px;
    }
    33.33% {
        background-position: 0 -510px;
    }
    38.89% {
        background-position: -330px -510px;
    }
    44.44% {
        background-position: -660px -510px;
    }
    50.00% {
        background-position: 0 0;
    }
    55.56% {
        background-position: -990px -255px;
    }
    61.11% {
        background-position: -990px -510px;
    }
    66.67% {
        background-position: 0 -765px;
    }
    72.22% {
        background-position: -330px -765px;
    }
    77.78% {
        background-position: -660px -765px;
    }
    83.33% {
        background-position: -990px -765px;
    }
    88.89% {
        background-position: 0 -1020px;
    }
    94.44% {
        background-position: -330px -1020px;
    }
    100% {
        background-position: -330px -1020px;
    }
}

@-webkit-keyframes ani_playfansopacity {
    from {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
    }
    80% {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
    }
}

@keyframes ani_playfansopacity {
    from {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
    }
    80% {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
    }
}

.fanscome {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
    overflow: hidden;
}

.fanscome .video_zoom {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 740px;
}

.fanscome_shine,
.fanscome_people {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.fanscome_shine {
    height: 416px;
    background: url(../img/play/fans_ani/fans_spr_shine.png) no-repeat;
    -webkit-animation: fanscome_ani_shine 3s .2s steps(1) both;
    animation: fanscome_ani_shine 3s .2s steps(1) both;
    -webkit-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
    transform-origin: center bottom;
}

.fanscome_people {
    height: 200px;
    background: url(../img/play/fans_ani/fans_spr_people.png) no-repeat;
    -webkit-animation: fanscome_ani_people .8s steps(1) infinite, fanscome_ani_people_quit 3.3s both;
    animation: fanscome_ani_people .8s steps(1) infinite, fanscome_ani_people_quit 3.3s both;
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
}

.fanscome_appear {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    -webkit-animation: fanscome_ani_change 2.7s .4s both;
    animation: fanscome_ani_change 2.7s .4s both;
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
}

.fanscome_heart {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 150px;
    height: 100px;
    background: url(../img/play/fans_ani/fans_spr_heart.png) no-repeat;
    -webkit-animation: fanscome_ani_heart 1.3s .6s steps(1) infinite both;
    animation: fanscome_ani_heart 1.3s .6s steps(1) infinite both;
}

.fanscome_img {
    position: absolute;
    top: 25px;
    left: 0;
    right: 0;
    margin: auto;
    width: 250px;
    height: 150px;
    background: url(../img/play/fans_ani/fans_spr_avatar.png) no-repeat;
    -webkit-animation: fanscome_ani_avatar 2.8s .6s steps(1) infinite both;
    animation: fanscome_ani_avatar 2.8s .6s steps(1) infinite both;
}

.fanscome_img img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 88px;
    height: 88px;
    border-radius: 100%;
}

.fanscome_info {
    margin-top: 154px;
    line-height: 1;
    font-size: 16px;
    text-shadow: 0 0 2px rgba(0, 0, 0, .8);
    color: #fff;
}

.fanscome_rank {
    margin-top: 5px;
}

.fanscome_ico {
    position: relative;
    display: inline-block;
    padding: 0 26px 0 8px;
    height: 18px;
    line-height: 18px;
    border: 1px solid #ffff00;
    border-radius: 15px;
    font-size: 12px;
    color: #fff;
    background: #ff5d24;
    background: -webkit-gradient(linear, left top, right top, from(#ff0048), to(#ffba00));
    background: linear-gradient(to right, #ff0048, #ffba00);
}

.fanscome_ico_sun {
    position: absolute;
    top: -6px;
    right: -8px;
    display: block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-style: normal;
    font-size: 12px;
    color: #fff;
    background: url(../img/play/fans_ani/fanscome_rank_sun.png) no-repeat;
}

.fanscome_name {
    margin-left: 12px;
    font-size: 16px;
    text-shadow: 0 0 2px rgba(0, 0, 0, .8);
    color: #ffcc2d;
}

@-webkit-keyframes fanscome_ani_shine {
    0% {
        background-position: -740px 0;
    }
    2.50% {
        background-position: 0 -2080px;
    }
    5.00% {
        background-position: 0 -416px;
    }
    7.50% {
        background-position: -740px -416px;
    }
    10.00% {
        background-position: 0 -832px;
    }
    12.50% {
        background-position: -740px -832px;
    }
    15.00% {
        background-position: -1480px 0;
    }
    17.50% {
        background-position: -1480px -416px;
    }
    20.00% {
        background-position: -1480px -832px;
    }
    22.50% {
        background-position: 0 -1248px;
    }
    25.00% {
        background-position: -740px -1248px;
    }
    27.50% {
        background-position: -1480px -1248px;
    }
    30.00% {
        background-position: 0 -1664px;
    }
    32.50% {
        background-position: -740px -1664px;
    }
    35.00% {
        background-position: -1480px -1664px;
    }
    37.50% {
        background-position: -2220px 0;
    }
    40.00% {
        background-position: -2220px -416px;
    }
    42.50% {
        background-position: -2220px -832px;
    }
    45.00% {
        background-position: -2220px -1248px;
    }
    47.50% {
        background-position: -2220px -1664px;
    }
    50.00% {
        background-position: 0 0;
    }
    52.50% {
        background-position: -740px -2080px;
    }
    55.00% {
        background-position: -1480px -2080px;
    }
    57.50% {
        background-position: -2220px -2080px;
    }
    60.00% {
        background-position: 0 -2496px;
    }
    62.50% {
        background-position: -740px -2496px;
    }
    65.00% {
        background-position: -1480px -2496px;
    }
    67.50% {
        background-position: -2220px -2496px;
    }
    70.00% {
        background-position: -2960px 0;
    }
    72.50% {
        background-position: -2960px -416px;
    }
    75.00% {
        background-position: -2960px -832px;
    }
    77.50% {
        background-position: -2960px -1248px;
    }
    80.00% {
        background-position: -2960px -1664px;
    }
    82.50% {
        background-position: -2960px -2080px;
    }
    85.00% {
        background-position: -2960px -2496px;
    }
    87.50% {
        background-position: 0 -2912px;
    }
    90.00% {
        background-position: -740px -2912px;
    }
    92.50% {
        background-position: -1480px -2912px;
    }
    95.00% {
        background-position: -2220px -2912px;
    }
    97.50% {
        background-position: -2960px -2912px;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
    }
    100% {
        background-position: -2960px -2912px;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
    }
}

@keyframes fanscome_ani_shine {
    0% {
        background-position: -740px 0;
    }
    2.50% {
        background-position: 0 -2080px;
    }
    5.00% {
        background-position: 0 -416px;
    }
    7.50% {
        background-position: -740px -416px;
    }
    10.00% {
        background-position: 0 -832px;
    }
    12.50% {
        background-position: -740px -832px;
    }
    15.00% {
        background-position: -1480px 0;
    }
    17.50% {
        background-position: -1480px -416px;
    }
    20.00% {
        background-position: -1480px -832px;
    }
    22.50% {
        background-position: 0 -1248px;
    }
    25.00% {
        background-position: -740px -1248px;
    }
    27.50% {
        background-position: -1480px -1248px;
    }
    30.00% {
        background-position: 0 -1664px;
    }
    32.50% {
        background-position: -740px -1664px;
    }
    35.00% {
        background-position: -1480px -1664px;
    }
    37.50% {
        background-position: -2220px 0;
    }
    40.00% {
        background-position: -2220px -416px;
    }
    42.50% {
        background-position: -2220px -832px;
    }
    45.00% {
        background-position: -2220px -1248px;
    }
    47.50% {
        background-position: -2220px -1664px;
    }
    50.00% {
        background-position: 0 0;
    }
    52.50% {
        background-position: -740px -2080px;
    }
    55.00% {
        background-position: -1480px -2080px;
    }
    57.50% {
        background-position: -2220px -2080px;
    }
    60.00% {
        background-position: 0 -2496px;
    }
    62.50% {
        background-position: -740px -2496px;
    }
    65.00% {
        background-position: -1480px -2496px;
    }
    67.50% {
        background-position: -2220px -2496px;
    }
    70.00% {
        background-position: -2960px 0;
    }
    72.50% {
        background-position: -2960px -416px;
    }
    75.00% {
        background-position: -2960px -832px;
    }
    77.50% {
        background-position: -2960px -1248px;
    }
    80.00% {
        background-position: -2960px -1664px;
    }
    82.50% {
        background-position: -2960px -2080px;
    }
    85.00% {
        background-position: -2960px -2496px;
    }
    87.50% {
        background-position: 0 -2912px;
    }
    90.00% {
        background-position: -740px -2912px;
    }
    92.50% {
        background-position: -1480px -2912px;
    }
    95.00% {
        background-position: -2220px -2912px;
    }
    97.50% {
        background-position: -2960px -2912px;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
    }
    100% {
        background-position: -2960px -2912px;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
    }
}

@-webkit-keyframes fanscome_ani_people {
    0% {
        background-position: 0 -201px;
    }
    8.33% {
        background-position: 0 -601px;
    }
    16.67% {
        background-position: 0 -401px;
    }
    25.00% {
        background-position: -740px -1px;
    }
    33.33% {
        background-position: -740px -201px;
    }
    41.67% {
        background-position: -740px -401px;
    }
    50.00% {
        background-position: 0 -1px;
    }
    58.33% {
        background-position: -740px -601px;
    }
    66.67% {
        background-position: 0 -801px;
    }
    75.00% {
        background-position: -740px -801px;
    }
    83.33% {
        background-position: 0 -1001px;
    }
    91.67% {
        background-position: -740px -1001px;
    }
    100% {
        background-position: -740px -1001px;
    }
}

@keyframes fanscome_ani_people {
    0% {
        background-position: 0 -201px;
    }
    8.33% {
        background-position: 0 -601px;
    }
    16.67% {
        background-position: 0 -401px;
    }
    25.00% {
        background-position: -740px -1px;
    }
    33.33% {
        background-position: -740px -201px;
    }
    41.67% {
        background-position: -740px -401px;
    }
    50.00% {
        background-position: 0 -1px;
    }
    58.33% {
        background-position: -740px -601px;
    }
    66.67% {
        background-position: 0 -801px;
    }
    75.00% {
        background-position: -740px -801px;
    }
    83.33% {
        background-position: 0 -1001px;
    }
    91.67% {
        background-position: -740px -1001px;
    }
    100% {
        background-position: -740px -1001px;
    }
}

@-webkit-keyframes fanscome_ani_avatar {
    0% {
        background-position: -250px 0;
    }
    4.76% {
        background-position: -250px -450px;
    }
    9.52% {
        background-position: 0 -150px;
    }
    14.29% {
        background-position: -250px -150px;
    }
    19.05% {
        background-position: 0 -300px;
    }
    23.81% {
        background-position: -250px -300px;
    }
    28.57% {
        background-position: -500px 0;
    }
    33.33% {
        background-position: -500px -150px;
    }
    38.10% {
        background-position: -500px -300px;
    }
    42.86% {
        background-position: 0 -450px;
    }
    47.62% {
        background-position: 0 0;
    }
    52.38% {
        background-position: -500px -450px;
    }
    57.14% {
        background-position: 0 -600px;
    }
    61.90% {
        background-position: -250px -600px;
    }
    66.67% {
        background-position: -500px -600px;
    }
    71.43% {
        background-position: -750px 0;
    }
    76.19% {
        background-position: -750px -150px;
    }
    80.95% {
        background-position: -750px -300px;
    }
    85.71% {
        background-position: -750px -450px;
    }
    90.48% {
        background-position: -750px -600px;
    }
    95.24% {
        background-position: 0 -750px;
    }
    100% {
        background-position: 0 -750px;
    }
}

@keyframes fanscome_ani_avatar {
    0% {
        background-position: -250px 0;
    }
    4.76% {
        background-position: -250px -450px;
    }
    9.52% {
        background-position: 0 -150px;
    }
    14.29% {
        background-position: -250px -150px;
    }
    19.05% {
        background-position: 0 -300px;
    }
    23.81% {
        background-position: -250px -300px;
    }
    28.57% {
        background-position: -500px 0;
    }
    33.33% {
        background-position: -500px -150px;
    }
    38.10% {
        background-position: -500px -300px;
    }
    42.86% {
        background-position: 0 -450px;
    }
    47.62% {
        background-position: 0 0;
    }
    52.38% {
        background-position: -500px -450px;
    }
    57.14% {
        background-position: 0 -600px;
    }
    61.90% {
        background-position: -250px -600px;
    }
    66.67% {
        background-position: -500px -600px;
    }
    71.43% {
        background-position: -750px 0;
    }
    76.19% {
        background-position: -750px -150px;
    }
    80.95% {
        background-position: -750px -300px;
    }
    85.71% {
        background-position: -750px -450px;
    }
    90.48% {
        background-position: -750px -600px;
    }
    95.24% {
        background-position: 0 -750px;
    }
    100% {
        background-position: 0 -750px;
    }
}

@-webkit-keyframes fanscome_ani_people_quit {
    from {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
    15% {
        -webkit-transform: none;
        transform: none;
    }
    85% {
        -webkit-transform: none;
        transform: none;
    }
    to {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
}

@keyframes fanscome_ani_people_quit {
    from {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
    15% {
        -webkit-transform: none;
        transform: none;
    }
    85% {
        -webkit-transform: none;
        transform: none;
    }
    to {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
}

@-webkit-keyframes fanscome_ani_change {
    from,
    to {
        -webkit-transform: scale(0);
        transform: scale(0);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
    }
    8% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
    }
    13% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    16% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
    }
    22% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    90% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
    }
}

@keyframes fanscome_ani_change {
    from,
    to {
        -webkit-transform: scale(0);
        transform: scale(0);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
    }
    8% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
    }
    13% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    16% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
    }
    22% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    90% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
    }
}

@-webkit-keyframes fanscome_ani_heart {
    0% {
        background-position: -150px 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
    }
    0.69% {
        background-position: -300px 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
    }
    3.38% {
        background-position: 0 -100px;
    }
    11.08% {
        background-position: -150px -100px;
    }
    18.77% {
        background-position: 0 -200px;
    }
    26.46% {
        background-position: -150px -200px;
    }
    34.15% {
        background-position: 0 0;
    }
    41.85% {
        background-position: -300px -100px;
    }
    49.54% {
        background-position: -300px -200px;
    }
    57.23% {
        background-position: 0 -300px;
    }
    64.92% {
        background-position: -150px -300px;
    }
    72.62% {
        background-position: -300px -300px;
    }
    80.31% {
        background-position: -450px 0;
    }
    88% {
        background-position: -450px 0;
    }
}

@keyframes fanscome_ani_heart {
    0% {
        background-position: -150px 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
    }
    0.69% {
        background-position: -300px 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
    }
    3.38% {
        background-position: 0 -100px;
    }
    11.08% {
        background-position: -150px -100px;
    }
    18.77% {
        background-position: 0 -200px;
    }
    26.46% {
        background-position: -150px -200px;
    }
    34.15% {
        background-position: 0 0;
    }
    41.85% {
        background-position: -300px -100px;
    }
    49.54% {
        background-position: -300px -200px;
    }
    57.23% {
        background-position: 0 -300px;
    }
    64.92% {
        background-position: -150px -300px;
    }
    72.62% {
        background-position: -300px -300px;
    }
    80.31% {
        background-position: -450px 0;
    }
    88% {
        background-position: -450px 0;
    }
}

.gdwp .fans_giftBag_tip {
    width: 100%;
    line-height: 24px;
    font-size: 12px;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 2px;
    white-space: nowrap;
    text-align: center;
}

.pop_phone_close {
    background-image: url(../img/play/spr_phone_certy.png?v=2020228);
    background-position: -218px -38px;
    background-repeat: no-repeat;
    width: 14px;
    height: 14px;
}

.pop_phone_icon {
    background-image: url(../img/play/spr_phone_certy.png?v=2020228);
    background-position: 0px 0px;
    background-repeat: no-repeat;
    width: 210px;
    height: 143px;
}

.pop_phone_btn {
    background-image: url(../img/play/spr_phone_certy.png?v=2020228);
    background-position: 0px -151px;
    background-repeat: no-repeat;
    width: 209px;
    height: 30px;
    line-height: 30px;
}

.pop_phone_btn.disabled {
    background-image: url(../img/play/spr_phone_certy.png?v=2020228);
    background-position: -218px 0px;
    background-repeat: no-repeat;
}

.pop_phone_wp {
    width: 308px;
    height: 320px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 4px;
    background: #ffffff;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -160px 0 0 -154px;
}

.pop_phone_close {
    display: block;
    position: absolute;
    right: 9px;
    top: 9px;
    -webkit-transition: .5s;
    transition: .5s;
}

.pop_phone_close:hover {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.pop_phone_icon {
    display: block;
    margin: -6px 0 15px 25px;
    text-indent: -9999px;
    overflow: hidden;
}

.pop_phone_number,
.pop_phone_message {
    height: 48px;
}

.pop_phone_border,
.pop_phone_wrong_txt,
.pop_phone_btn_wp,
.pop_phone_fail {
    width: 209px;
    margin: 0 auto;
}

.pop_phone_border {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 30px;
    border: 1px solid #ffe9f3;
    border-radius: 4px;
}

.pop_phone_wrong .pop_phone_border {
    border-color: #ff0066;
}

.pop_phone_border input,
.pop_phone_txt {
    display: inline-block;
    font-size: 12px;
    padding: 6px 9px;
    background: transparent;
}

.pop_phone_border input {
    width: 105px;
    color: #565656;
    border: 0 none;
}

.pop_phone_message .pop_phone_border input {
    width: 189px;
}

.pop_phone_border input::-webkit-input-placeholder {
    color: #a9a9a9;
}

.pop_phone_border input:-moz-placeholder {
    color: #a9a9a9;
}

.pop_phone_border input::-moz-placeholder {
    color: #a9a9a9;
}

.pop_phone_border input:-ms-input-placeholder {
    color: #a9a9a9;
}

.pop_phone_txt {
    width: 80px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #f8198f;
    position: relative;
}

.pop_phone_txt.send {
    cursor: default;
    color: #a9a9a9;
}

.pop_phone_txt:before {
    content: "";
    display: block;
    width: 1px;
    height: 12px;
    background: #ffe9f3;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -6px;
}

.pop_phone_btn_wp {
    margin-top: 20px;
}

.pop_phone_btn {
    display: block;
    font-size: 14px;
    color: #ffffff;
    text-align: center;
}

.pop_phone_btn.disabled {
    cursor: default;
}

.pop_phone_wrong_txt {
    color: #ff0066;
    display: none;
}

.pop_phone_wrong .pop_phone_wrong_txt {
    display: block;
}

.pop_phone_fail {
    margin-top: 44px;
    margin-bottom: 45px;
    font-size: 14px;
    color: #a2a2a2;
    text-align: center;
    position: relative;
}

.pop_phone_fail:before,
.pop_phone_fail:after {
    content: "";
    display: block;
    width: 10px;
    height: 1px;
    background: #e6e6e6;
    position: absolute;
    left: 50%;
    margin-left: -5px;
}

.pop_phone_fail:before {
    top: -18px;
}

.pop_phone_fail:after {
    bottom: -18px;
}

.chest_close {
    background-image: url(../img/play/chest/spr_icon.png?v=2020228);
    background-position: -237px -46px;
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
}

.popc_close {
    background-image: url(../img/play/chest/spr_icon.png?v=2020228);
    background-position: -261px -46px;
    background-repeat: no-repeat;
    width: 14px;
    height: 14px;
}

.popc_buff .popc_tit h3 {
    background-image: url(../img/play/chest/spr_icon.png?v=2020228);
    background-position: -163px 0px;
    background-repeat: no-repeat;
    width: 193px;
    height: 38px;
}

.popc_buff .popc_icon {
    background-image: url(../img/play/chest/spr_icon.png?v=2020228);
    background-position: 0px 0px;
    background-repeat: no-repeat;
    width: 155px;
    height: 77px;
}

.popc_fail .popc_icon {
    background-image: url(../img/play/chest/spr_icon.png?v=2020228);
    background-position: -163px -46px;
    background-repeat: no-repeat;
    width: 66px;
    height: 98px;
}

.popc_suc .popc_icon {
    background-image: url(../img/play/chest/spr_icon.png?v=2020228);
    background-position: 0px -85px;
    background-repeat: no-repeat;
    width: 96px;
    height: 123px;
}

.chest_wp {
    background: #000000;
    background: rgba(0, 0, 0, .2);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 10;
}

.chest_list {
    position: relative;
    height: 100%;
}

.chest_list>ul {
    position: absolute;
    width: 100%;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.chest_item {
    width: 25%;
    float: left;
    padding: 12px 0;
    height: 90px;
    position: relative;
    overflow: hidden;
}

.chest_item a {
    display: block;
    width: 90px;
    margin: 0 auto;
}

.chest_item .chest_img {
    width: inherit;
    height: auto;
}

.chest_txt {
    white-space: nowrap;
    position: absolute;
    bottom: 75px;
    left: 0;
    right: 0;
    width: 100%;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #f8198f;
    text-shadow: 1px 1px #ffffff, -1px -1px #ffffff, 1px -1px #ffffff, -1px 1px #ffffff;
}

.chest_close {
    display: block;
    position: absolute;
    right: 13px;
    top: 13px;
    z-index: 1;
}

.chest_close,
.popc_close {
    -webkit-transition: .2s;
    transition: .2s;
}

.chest_close:hover,
.popc_close:hover {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.pop_chest {
    text-align: center;
    width: 341px;
    height: 220px;
    background: #ffffff;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -170px;
    margin-top: -88px;
    z-index: 10;
}

.pop_chest .popc_icon {
    position: absolute;
    z-index: 1;
    left: 50%;
}

.popc_close {
    display: block;
    position: absolute;
    right: 10px;
    top: 12px;
}

.popc_buff .popc_tit {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 60px;
    padding-top: 12px;
    border-radius: 4px 4px 0 0;
    background: #ffd101;
    background: -webkit-gradient(linear, left top, left bottom, from(#ffe400), to(#ff9f00));
    background: linear-gradient(to bottom, #ffe400, #ff9f00);
}

.popc_buff .popc_tit h3 {
    text-indent: -9999px;
    overflow: hidden;
    margin: 0 auto;
}

.popc_buff .popc_content {
    padding-top: 15px;
    font-size: 15px;
    color: #f8198f;
}

.popc_buff .popc_count {
    width: 127px;
    height: 102px;
    margin: 10px auto;
    background: url(../img/play/chest/count-spr.png) 0 0;
}

.popc_buff .popc_icon {
    top: -69px;
    margin-left: -78px;
}

.popc_suc,
.popc_fail {}

.popc_suc {
    height: 290px;
    margin-top: -70px;
    width: 400px;
    margin-left: -200px;
}

.popc_fail {
    height: 190px;
    margin-top: -95px;
    padding-top: 60px;
    width: 291px;
    margin-left: -146px;
}

.popc_suc h4 {
    line-height: 60px;
    font-size: 15px;
    color: #525252;
}

.popc_fail h4 {
    font-size: 15px;
    margin-bottom: 10px;
    color: #525252;
}

.popc_suc p,
.popc_fail p {
    font-size: 13px;
    color: #333333;
}

.popc_suc p span,
.popc_fail p span {
    color: #f8198f;
}

.popc_suc p span.suctips {
    padding: 0 2px;
}

.popc_btn {
    margin: 20px 0 25px;
}

.popc_btn a {
    display: block;
    width: 170px;
    height: 40px;
    line-height: 40px;
    margin: 0 auto;
    color: #fefefe;
    background: #f8198f;
    font-size: 16px;
    border-radius: 2px;
}

.popc_btn a:hover {
    background: #ff55af;
}

.popc_suc .popc_icon {
    top: -70px;
    margin-left: -51px;
}

.popc_fail .popc_icon {
    top: -50px;
    margin-left: -33px;
}

.chest-gift-wp {
    height: 130px;
    vertical-align: middle;
}

.chest-gift {
    display: inline-block;
    vertical-align: middle;
}

.chest-gift img {
    display: inline-block;
    width: 90px;
    height: 90px;
    vertical-align: middle;
    margin: 15px;
}

.imgList1.chest-gift img {
    width: 130px;
    height: 130px;
    margin: 0 15px;
}

.chest-gift img,
.chest-gift span {
    vertical-align: middle;
    color: #f8198f;
}

.chest_accom {
    position: absolute;
    top: 23px;
    left: 0;
    border-radius: 5px;
    padding: 5px 60px 5px 45px;
    white-space: nowrap;
    background: #ff8ac5;
    background: -webkit-gradient(linear, left top, right top, from(#dca7ff), to(#ff8ac5));
    background: linear-gradient(to right, #dca7ff, #ff8ac5);
}

.chest_accom_img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    position: absolute;
    left: 8px;
    top: 9px;
}

.chest_accom_img img {
    width: inherit;
    height: inherit;
    border-radius: 50%;
}

.chest_accom_txt {
    color: #ffffff;
}

.chest_accom_txt em,
.chest_accom_click {
    color: #b21cff;
    font-weight: bold;
}

.chest_accom_click {
    text-decoration: underline;
}

.chest_accom:before {
    content: "";
    display: block;
    width: 100px;
    height: 100%;
    background: linear-gradient(135deg, transparent 0, transparent 30px, #ffffff 30px, #ffffff 45px, transparent 45px, transparent 55px, #ffffff 55px, #ffffff 65px, transparent 65px, transparent 100%);
    background: linear-gradient(135deg, transparent 0, transparent 30px, rgba(255, 255, 255, .2) 30px, rgba(255, 255, 255, .2) 45px, transparent 45px, transparent 55px, rgba(255, 255, 255, .2) 55px, rgba(255, 255, 255, .2) 65px, transparent 65px, transparent 100%);
    position: absolute;
    right: 0;
    top: 0;
}

.chest_handle {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    background: transparent;
}

.chest_progress_wp {
    position: absolute;
    top: 120px;
    left: 15px;
}

.chest_progress {
    position: relative;
    margin-bottom: 10px;
}

.chest_pic_ico {
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
}

.chest_progress_bg {
    width: 91px;
    height: 14px;
    line-height: 14px;
    border-radius: 6px;
    overflow: hidden;
}

.chest_progress_cur {
    width: 91px;
    height: 14px;
    line-height: 14px;
    border-radius: 6px;
    overflow: hidden;
}

.chest_progress_txt {
    width: 91px;
    height: 14px;
    line-height: 14px;
    border-radius: 6px;
    overflow: hidden;
}

.chest_progress_bg {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    background: #666666
}

.chest_progress_cur,
.chest_progress_txt {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
}

.chest_progress_cur {
    background: #f187bf;
}

.chest_progress_full .chest_progress_cur {
    background: #f8198f;
}

.chest_progress_txt {
    text-align: center;
    color: #ffffff;
}

.catfight {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.catfight_mask_wp {
    width: 184px;
    height: 184px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -92px 0 0 -92px;
    text-align: center;
    color: #ffffff
}

.catfight_mask_wp:before,
.catfight_mask_wp:after {
    content: "";
}

.catfight_mask_wp:before,
.catfight_mask_wp:after,
.catfight_mask {
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    background: #E755B6;
    background: linear-gradient(-45deg, #4D31EA 3%, #E755B6 99%);
}

.catfight_mask_wp:before {
    width: 184px;
    height: 184px;
    margin: -92px 0 0 -92px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    opacity: .3;
}

.catfight_mask_wp:after {
    width: 160px;
    height: 160px;
    margin: -80px 0 0 -80px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    opacity: .6;
}

.catfight_mask {
    width: 130px;
    height: 130px;
    margin: -65px 0 0 -65px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: 22px;
    z-index: 1;
}

.catfight_countdown_num {
    font-size: 60px;
    margin-top: -14px;
}

.catfight_first_blood {
    position: absolute;
    width: 112px;
    height: 40px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    opacity: 0.7;
    background: #000000;
    border-radius: 20px;
}

.catfight_first_blood.left {
    left: 20px;
    bottom: 76px;
}

.catfight_first_blood.right {
    right: 140px;
    bottom: 76px;
}

.catfight_rank_entry {
    position: absolute;
    left: 20px;
    bottom: 0;
    height: 24px;
    padding: 0 4px;
    border-radius: 15px;
    line-height: 26px;
    text-align: center;
    color: #ffffff;
    background-color: #000000;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    opacity: .7;
    font-size: 12px;
    cursor: pointer;
    z-index: 1;
}

.catfight_rank_entry i {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-image: url(../img/play/pk/spr_catfight2.png?v=2020228);
    background-position: -393px -142px;
    background-repeat: no-repeat;
    vertical-align: baseline;
}

.catfight_window {
    position: absolute;
    right: 20px;
    bottom: 0;
    background-image: url(../img/play/pk/spr_catfight2.png?v=2020228);
    background-position: -208px -120px;
    background-repeat: no-repeat;
    width: 100px;
    height: 100px;
    z-index: 5;
    cursor: pointer;
}

.catfight_rival_name {
    height: 22px;
    padding: 0 2px;
    line-height: 22px;
    font-size: 12px;
    color: #ffffff;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.catfight_window_remain_normal {
    position: absolute;
    left: 50%;
    top: 46px;
    margin-left: -15px;
    width: 28px;
    height: 28px;
    background: #00356C;
    line-height: 30px;
    color: #ffffff;
    text-align: center;
    font-size: 12px;
    border-radius: 50%;
    overflow: hidden;
}

.catfight_window_remain_normal .remain_left {
    position: absolute;
    left: 0;
    top: 0;
    width: 14px;
    height: 30px;
    overflow: hidden;
}

.catfight_window_remain_normal .remain_left .progress {
    border: 2px solid transparent;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
    height: 24px;
    border-bottom: 2px solid #66E1F4;
    border-left: 2px solid #66E1F4;
    -webkit-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

.catfight_window_remain_normal .remain_right {
    position: absolute;
    right: 0;
    top: 0;
    width: 14px;
    height: 30px;
    overflow: hidden;
}

.catfight_window_remain_normal .remain_right .progress {
    border: 2px solid transparent;
    border-radius: 50%;
    position: absolute;
    right: 0;
    top: 0;
    width: 24px;
    height: 24px;
    border-top: 2px solid #66E1F4;
    border-right: 2px solid #66E1F4;
    -webkit-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

.catfight_window_remain_star {
    position: absolute;
    left: 50%;
    top: 40px;
    margin-left: -18px;
    width: 37px;
    height: 35px;
    background-image: url(../img/play/pk/spr_catfight2.png?v=2020228);
    background-position: 0px -237px;
    background-repeat: no-repeat;
    line-height: 40px;
    color: #00356C;
    text-align: center;
}

.catfight_window_remain_star .light {
    position: absolute;
    left: -14px;
    top: -14px;
    width: 69px;
    height: 68px;
    background-image: url(../img/play/pk/spr_catfight2.png?v=2020228);
    background-position: -316px -120px;
    background-repeat: no-repeat;
    -webkit-animation: star_light 8s linear infinite;
    animation: star_light 8s linear infinite;
}

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

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

.catfight_window_me {
    position: absolute;
    left: 4px;
    top: 24px;
    font-size: 12px;
    color: #FFFFFF;
}

.catfight_window_rival {
    position: absolute;
    right: 6px;
    bottom: 2px;
    font-size: 12px;
    color: #FFFFFF;
    text-align: right;
}

.catfight_window_me .score,
.catfight_window_rival .score {
    font-size: 14px;
    color: #FFFF00;
}

.catfight_window_me .score.first_blood,
.catfight_window_rival .score.first_blood {
    -webkit-animation: widow_first_blood_ani1 1s linear forwards;
    animation: widow_first_blood_ani1 1s linear forwards;
}

@keyframes widow_first_blood_ani1 {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    20% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }
    40% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    60% {
        -webkit-transform: scale(0.95);
        transform: scale(0.95);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@-webkit-keyframes widow_first_blood_ani1 {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    20% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }
    40% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    60% {
        -webkit-transform: scale(0.95);
        transform: scale(0.95);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.catfight_head {
    position: absolute;
    left: 0;
    bottom: 60px;
    width: 100%;
}

.catfighthead_bar {
    position: absolute;
    bottom: 0;
    left: 230px;
    right: 230px;
    margin: auto;
    max-width: 615px;
}

.catfighthead_bar .catfight_over {
    zoom: .3;
    top: -26px;
}

.catfighthead_bar .catfight_over3 {
    top: 60px;
}

.catfighthead_pbars {
    position: relative;
    z-index: 1;
    height: 40px;
    line-height: 40px;
}

.catfighthead_pbarsouter {
    position: relative;
    height: 100%;
    background: #4D31EA;
    border-radius: 20px;
    overflow: hidden;
}

.catfighthead_pbarsinner {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: #E755B6;
    overflow: hidden;
}

.catfighthead_pbars_info {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    left: 0;
}

.catfighthead_pbars_info>span {
    position: absolute;
    font-size: 14px;
    color: #fff;
}

.catfighthead_pbars_info1 {
    left: 12px;
}

.catfighthead_pbars_info2 {
    right: 12px;
}

.catfighthead_pbars_info i {
    font-style: normal;
    color: #FFFF00;
}

.catfighthead_time {
    position: absolute;
    top: -12px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 8px;
    min-width: 72px;
    height: 20px;
    line-height: 20px;
    border-radius: 12px;
    background: #373737;
    font-size: 12px;
    text-align: center;
    z-index: 1;
    color: #ffffff;
}

.catfighthead_time.v2 {
    width: 73px;
    padding: 0;
    background: #FE5A6F;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: star_time 1s linear forwards;
    animation: star_time 1s linear forwards;
}

.catfighthead_time.v3 {
    line-height: 19px;
    background: #FE5A6F;
    border: 1px solid #FFE389;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: star_time 1s linear forwards;
    animation: star_time 1s linear forwards;
}

@-webkit-keyframes star_time {
    0% {
        -webkit-transform: translateX(-50%) scale(0.2);
        transform: translateX(-50%) scale(0.2);
    }
    25% {
        -webkit-transform: translateX(-50%) scale(1.1);
        transform: translateX(-50%) scale(1.1);
    }
    50% {
        -webkit-transform: translateX(-50%) scale(0.9);
        transform: translateX(-50%) scale(0.9);
    }
    80%,
    100% {
        -webkit-transform: translateX(-50%) scale(1);
        transform: translateX(-50%) scale(1);
    }
}

@keyframes star_time {
    0% {
        -webkit-transform: translateX(-50%) scale(0.2);
        transform: translateX(-50%) scale(0.2);
    }
    25% {
        -webkit-transform: translateX(-50%) scale(1.1);
        transform: translateX(-50%) scale(1.1);
    }
    50% {
        -webkit-transform: translateX(-50%) scale(0.9);
        transform: translateX(-50%) scale(0.9);
    }
    80%,
    100% {
        -webkit-transform: translateX(-50%) scale(1);
        transform: translateX(-50%) scale(1);
    }
}

.catfighthead_time.v2 .ani1 {
    position: absolute;
    left: -4px;
    top: -6px;
    width: 100%;
    height: 100%;
    -webkit-animation: starlight1 1.5s steps(1) infinite;
    animation: starlight1 1.5s steps(1) infinite;
}

@-webkit-keyframes starlight1 {
    0% {
        width: 79px;
        height: 28px;
        background-image: url("../img/play/pk/star_ani_1.png");
        background-size: 830px 28px;
        -webkit-transform: translate(0px, 1px);
        transform: translate(0px, 1px);
    }
    9.09% {
        width: 66px;
        background-position: -79px 0px;
    }
    18.18% {
        background-position: -145px 0px;
    }
    27.27% {
        width: 79px;
        background-position: -211px 0px;
    }
    36.36% {
        width: 82px;
        background-position: -290px 0px;
    }
    45.45% {
        background-position: -372px 0px;
    }
    54.55% {
        width: 79px;
        background-position: -454px 0px;
        -webkit-transform: translate(3px, 1px);
        transform: translate(3px, 1px);
    }
    63.64% {
        width: 65px;
        background-position: -533px 0px;
        -webkit-transform: translate(17px, 1px);
        transform: translate(17px, 1px);
    }
    72.73% {
        width: 69px;
        background-position: -598px 0px;
        -webkit-transform: translate(13px, 1px);
        transform: translate(13px, 1px);
    }
    81.82% {
        width: 81px;
        background-position: -667px 0px;
        -webkit-transform: translate(1px, 1px);
        transform: translate(1px, 1px);
    }
    90.91%,
    100% {
        width: 82px;
        background-position: -748px 0px;
        -webkit-transform: translate(0px, 1px);
        transform: translate(0px, 1px);
    }
}

@keyframes starlight1 {
    0% {
        width: 79px;
        height: 28px;
        background-image: url("../img/play/pk/star_ani_1.png");
        background-size: 830px 28px;
        -webkit-transform: translate(0px, 1px);
        transform: translate(0px, 1px);
    }
    9.09% {
        width: 66px;
        background-position: -79px 0px;
    }
    18.18% {
        background-position: -145px 0px;
    }
    27.27% {
        width: 79px;
        background-position: -211px 0px;
    }
    36.36% {
        width: 82px;
        background-position: -290px 0px;
    }
    45.45% {
        background-position: -372px 0px;
    }
    54.55% {
        width: 79px;
        background-position: -454px 0px;
        -webkit-transform: translate(3px, 1px);
        transform: translate(3px, 1px);
    }
    63.64% {
        width: 65px;
        background-position: -533px 0px;
        -webkit-transform: translate(17px, 1px);
        transform: translate(17px, 1px);
    }
    72.73% {
        width: 69px;
        background-position: -598px 0px;
        -webkit-transform: translate(13px, 1px);
        transform: translate(13px, 1px);
    }
    81.82% {
        width: 81px;
        background-position: -667px 0px;
        -webkit-transform: translate(1px, 1px);
        transform: translate(1px, 1px);
    }
    90.91%,
    100% {
        width: 82px;
        background-position: -748px 0px;
        -webkit-transform: translate(0px, 1px);
        transform: translate(0px, 1px);
    }
}

.catfighthead_time.v2 .ani2 {
    position: absolute;
    left: 0;
    top: -34px;
    width: 100%;
    height: 100%;
    -webkit-animation: starlight2 3s steps(1) infinite;
    animation: starlight2 3s steps(1) infinite;
}

@-webkit-keyframes starlight2 {
    0% {
        width: 74px;
        height: 28px;
        background-image: url("../img/play/pk/star_ani_2.png");
        background-size: 1714px 34px;
        -webkit-transform: translate(0px, 6px);
        transform: translate(0px, 6px);
    }
    4.17% {
        width: 72px;
        height: 29px;
        background-position: -74px 0px;
        -webkit-transform: translate(0px, 5px);
        transform: translate(0px, 5px);
    }
    8.33% {
        height: 31px;
        background-position: -146px 0px;
        -webkit-transform: translate(0px, 3px);
        transform: translate(0px, 3px);
    }
    12.50% {
        height: 32px;
        background-position: -218px 0px;
        -webkit-transform: translate(0px, 2px);
        transform: translate(0px, 2px);
    }
    16.67% {
        background-position: -290px 0px;
    }
    20.83% {
        width: 73px;
        height: 33px;
        background-position: -362px 0px;
        -webkit-transform: translate(0px, 1px);
        transform: translate(0px, 1px);
    }
    25.00% {
        height: 34px;
        background-position: -435px 0px;
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
    }
    29.17% {
        background-position: -508px 0px;
    }
    33.33% {
        background-position: -581px 0px;
    }
    37.50% {
        width: 70px;
        background-position: -654px 0px;
    }
    41.67% {
        height: 31px;
        background-position: -724px 0px;
        -webkit-transform: translate(0px, 3px);
        transform: translate(0px, 3px);
    }
    45.83% {
        background-position: -794px 0px;
    }
    50.00% {
        height: 28px;
        background-position: -864px 0px;
        -webkit-transform: translate(0px, 6px);
        transform: translate(0px, 6px);
    }
    54.17% {
        background-position: -934px 0px;
    }
    58.33% {
        height: 29px;
        background-position: -1004px 0px;
        -webkit-transform: translate(1px, 5px);
        transform: translate(1px, 5px);
    }
    62.50% {
        width: 71px;
        height: 30px;
        background-position: -1074px 0px;
        -webkit-transform: translate(1px, 4px);
        transform: translate(1px, 4px);
    }
    66.67% {
        background-position: -1145px 0px;
        -webkit-transform: translate(2px, 4px);
        transform: translate(2px, 4px);
    }
    70.83% {
        height: 29px;
        background-position: -1216px 0px;
        -webkit-transform: translate(2px, 5px);
        transform: translate(2px, 5px);
    }
    75.00% {
        width: 70px;
        height: 30px;
        background-position: -1287px 0px;
        -webkit-transform: translate(3px, 4px);
        transform: translate(3px, 4px);
    }
    79.17% {
        height: 31px;
        background-position: -1357px 0px;
        -webkit-transform: translate(3px, 3px);
        transform: translate(3px, 3px);
    }
    83.33% {
        width: 71px;
        height: 32px;
        background-position: -1427px 0px;
        -webkit-transform: translate(2px, 2px);
        transform: translate(2px, 2px);
    }
    87.50% {
        height: 33px;
        background-position: -1498px 0px;
        -webkit-transform: translate(2px, 1px);
        transform: translate(2px, 1px);
    }
    91.67% {
        width: 72px;
        background-position: -1569px 0px;
        -webkit-transform: translate(1px, 1px);
        transform: translate(1px, 1px);
    }
    95.83%,
    100% {
        width: 73px;
        height: 34px;
        background-position: -1641px 0px;
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
    }
}

@keyframes starlight2 {
    0% {
        width: 74px;
        height: 28px;
        background-image: url("../img/play/pk/star_ani_2.png");
        background-size: 1714px 34px;
        -webkit-transform: translate(0px, 6px);
        transform: translate(0px, 6px);
    }
    4.17% {
        width: 72px;
        height: 29px;
        background-position: -74px 0px;
        -webkit-transform: translate(0px, 5px);
        transform: translate(0px, 5px);
    }
    8.33% {
        height: 31px;
        background-position: -146px 0px;
        -webkit-transform: translate(0px, 3px);
        transform: translate(0px, 3px);
    }
    12.50% {
        height: 32px;
        background-position: -218px 0px;
        -webkit-transform: translate(0px, 2px);
        transform: translate(0px, 2px);
    }
    16.67% {
        background-position: -290px 0px;
    }
    20.83% {
        width: 73px;
        height: 33px;
        background-position: -362px 0px;
        -webkit-transform: translate(0px, 1px);
        transform: translate(0px, 1px);
    }
    25.00% {
        height: 34px;
        background-position: -435px 0px;
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
    }
    29.17% {
        background-position: -508px 0px;
    }
    33.33% {
        background-position: -581px 0px;
    }
    37.50% {
        width: 70px;
        background-position: -654px 0px;
    }
    41.67% {
        height: 31px;
        background-position: -724px 0px;
        -webkit-transform: translate(0px, 3px);
        transform: translate(0px, 3px);
    }
    45.83% {
        background-position: -794px 0px;
    }
    50.00% {
        height: 28px;
        background-position: -864px 0px;
        -webkit-transform: translate(0px, 6px);
        transform: translate(0px, 6px);
    }
    54.17% {
        background-position: -934px 0px;
    }
    58.33% {
        height: 29px;
        background-position: -1004px 0px;
        -webkit-transform: translate(1px, 5px);
        transform: translate(1px, 5px);
    }
    62.50% {
        width: 71px;
        height: 30px;
        background-position: -1074px 0px;
        -webkit-transform: translate(1px, 4px);
        transform: translate(1px, 4px);
    }
    66.67% {
        background-position: -1145px 0px;
        -webkit-transform: translate(2px, 4px);
        transform: translate(2px, 4px);
    }
    70.83% {
        height: 29px;
        background-position: -1216px 0px;
        -webkit-transform: translate(2px, 5px);
        transform: translate(2px, 5px);
    }
    75.00% {
        width: 70px;
        height: 30px;
        background-position: -1287px 0px;
        -webkit-transform: translate(3px, 4px);
        transform: translate(3px, 4px);
    }
    79.17% {
        height: 31px;
        background-position: -1357px 0px;
        -webkit-transform: translate(3px, 3px);
        transform: translate(3px, 3px);
    }
    83.33% {
        width: 71px;
        height: 32px;
        background-position: -1427px 0px;
        -webkit-transform: translate(2px, 2px);
        transform: translate(2px, 2px);
    }
    87.50% {
        height: 33px;
        background-position: -1498px 0px;
        -webkit-transform: translate(2px, 1px);
        transform: translate(2px, 1px);
    }
    91.67% {
        width: 72px;
        background-position: -1569px 0px;
        -webkit-transform: translate(1px, 1px);
        transform: translate(1px, 1px);
    }
    95.83%,
    100% {
        width: 73px;
        height: 34px;
        background-position: -1641px 0px;
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
    }
}

.catfighthead_ico,
.catfighthead_time_info,
.catfighthead_time_txt {
    display: inline-block;
    vertical-align: middle;
}

.catfighthead_ico {
    background-image: url(../img/play/pk/spr_catfight2.png?v=2020228);
    background-position: -45px -237px;
    background-repeat: no-repeat;
    width: 21px;
    height: 13px;
}

.catfighthead_time_txt {
    text-indent: -9999em;
    overflow: hidden;
    background-image: url(../img/play/pk/spr_catfight2.png?v=2020228);
    background-position: -316px -196px;
    background-repeat: no-repeat;
    width: 23px;
    height: 12px;
}

.catfight_other_wp {
    position: absolute;
    width: 50%;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

.catfight_other_wp .h5_video {
    width: 100%;
}

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

.catfight_over {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 1
}

.catfight_over.left {
    left: 25%;
    margin-left: -100px;
}

.catfight_over.right {
    right: 25%;
    margin-right: -100px;
}

.catfight_over.center {
    left: 50%;
    margin-left: -100px;
}

.catfight_over1 {
    background-image: url(../img/play/pk/spr_catfight2.png?v=2020228);
    background-position: -208px 0px;
    background-repeat: no-repeat;
    width: 200px;
    height: 110px;
}

.catfight_over2 {
    background-image: url(../img/play/pk/spr_catfight2.png?v=2020228);
    background-position: 0px -120px;
    background-repeat: no-repeat;
    width: 200px;
    height: 109px;
}

.catfight_over3 {
    background-image: url(../img/play/pk/spr_catfight2.png?v=2020228);
    background-position: 0px 0px;
    background-repeat: no-repeat;
    width: 200px;
    height: 112px;
}

.catfight_focus {
    position: absolute;
    right: 20px;
    bottom: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 6px;
    max-width: 196px;
    height: 40px;
    line-height: 36px;
    border-radius: 20px;
    background: #000000;
    background: rgba(0, 0, 0, 0.50);
    border: 1px solid #fa60be;
    border: 1px solid rgba(250, 96, 190, 0.61);
    white-space: nowrap;
    color: #ffffff;
    z-index: 1;
    -webkit-transition: .5s;
    transition: .5s;
}

.catfight_focus_head,
.catfight_focus_name,
.catfight_focus_btn {
    display: inline-block;
    vertical-align: middle;
}

.catfight_focus_head {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    max-width: 94px;
}

.catfight_focus_name {
    font-size: 13px;
    max-width: 94px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    margin: 0 4px;
}

.catfight_focus_btn {
    width: 46px;
    height: 24px;
    line-height: 24px;
    border-radius: 12px;
}

.pk_gift_tips {
    width: 100%;
    line-height: 24px;
    background: rgb(255, 240, 238);
    font-size: 12px;
    color: #000000;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 4px 4px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 2px;
    white-space: nowrap
}

.pk_gift_tips:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    margin: -4px 2px 0 0;
    background-image: url(../img/play/pk/spr_catfight2.png?v=2020228);
    background-position: -393px -120px;
    background-repeat: no-repeat;
    width: 14px;
    height: 14px;
}

@media screen and (max-width:1200px) {
    .catfight_head {
        width: 576px;
        left: 50%;
        margin-left: -288px;
    }
    .catfighthead_bar {
        width: 100%;
        left: 0;
        right: 0;
    }
    .catfighthead_pbars {
        height: 32px;
        line-height: 32px;
        border-radius: 16px;
    }
    .catfight_focus {
        right: 0;
        bottom: 56px;
    }
}

.chat_task {
    position: absolute;
    height: 38px;
    border-radius: 19px;
    padding-right: 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    white-space: nowrap;
    background: #ff8ac5;
    background: -webkit-gradient(linear, left top, right top, from(#dca7ff), to(#ff8ac5));
    background: linear-gradient(to right, #dca7ff, #ff8ac5);
}

.chat_task:before {
    content: "";
    display: block;
    width: 100px;
    height: 100%;
    background: linear-gradient(135deg, transparent 0, transparent 30px, #ffffff 30px, #ffffff 45px, transparent 45px, transparent 55px, #ffffff 55px, #ffffff 65px, transparent 65px, transparent 100%);
    background: linear-gradient(135deg, transparent 0, transparent 30px, rgba(255, 255, 255, .2) 30px, rgba(255, 255, 255, .2) 45px, transparent 45px, transparent 55px, rgba(255, 255, 255, .2) 55px, rgba(255, 255, 255, .2) 65px, transparent 65px, transparent 100%);
    position: absolute;
    right: 0;
    top: 0;
}

.chat_task_img {
    position: absolute;
    left: 5px;
    top: 0;
    bottom: 0;
    margin: auto 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
}

.chat_task_img img {
    width: inherit;
    height: inherit;
}

.chat_task p {
    padding: 13px 0;
    padding-left: 40px;
    line-height: 1;
    font-size: 12px;
    color: #fff;
}

.chat_task p span {
    color: #b21cff;
}

.task_in {
    position: absolute;
    top: 20px;
    left: 30px;
    width: 84px;
    text-align: center;
    cursor: pointer;
}

.task_in .task_inWraper {
    width: 84px;
    height: 96px;
}

.act_task_face.front {
    z-index: 1;
    display: block;
}

.act_task_face.behind {
    z-index: 0;
    transform: rotateY(180deg);
    display: none;
}

.act_task_face.behind .task_in_tips span {
    width: 70px;
    position: absolute;
    top: 68px;
    left: 8px;
    height: 27px;
    line-height: 17px;
    color: #ff2c55;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.act_task_face.behind .task_in_tips {
    margin: 0 auto;
    width: 77px;
    height: 95px;
    background: url("../img/play/task_img/taskb.png");
}

.ani .act_task_face.front {
    z-index: 0;
    transform: rotateY(180deg);
    display: none;
}

.ani .act_task_face.behind {
    z-index: 1;
    transform: rotateY(0deg);
    display: block;
}

.act_task_face {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: .5s;
}

.task_in_img {
    width: 40px;
    margin: 0 auto;
}

.task_in_img>img {
    width: 100%;
    height: auto;
}

.task_in_name {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAAAbCAYAAAGVYpjuAAAABGdBTUEAALGPC/xhBQAABT9JREFUaAXtWmtoHUUUPmfvTTBtbVLTiqYRLZE0muTa5IIIsWCtIhZESLw3qSKIiIovsP7zlz/9Y/8EBFtaS6FoeklA8VVQLPgOxpqk2jxqHlis0Ghrraa39+4ev9lkw26ys73ZbKI1GdjM7JwzZ858e+bMOXfCNKtIIv0KWXIvMfdw/+EX3GRWL1KXEnenX5uPZ9j4qeGh7R4i07d430fE5939gw3NQuqP3XBTfNqKx1bDoUnikUqS3KskUkoG7eW+zLsOrWB9jTlTMx8ips8cSU4dVw21OqfDr/boCLjeBlOrH2PBfUxPcX9mj+EasDCBSpDQG6piZ+3VuRjR+tUlfPTARUWYb5H61CcQevdQkQnoAorUtz5IZN0Dlk0kXAZVRjDiJHHxfu47dEo3dPpz7kwQ5Xt1TAX1Mw/Btjcr3ilM2VSmubAiUu0ImBIqknU6oqh5sLHlRFXOqIn57T/mMeA4gA8wiK17I7aD0uZW3cTqI5HBu+NgrBGMgiHsg2E/oRsQ1C+3pe8jUz6yeSzZZS9/JG6pnRJKoBLEvYePDBdbk87EwSaV3LmesubDYE4DhiZnUKQ1Uz/MtROwdXJfx3GdbI+iUpcG0OLeubpxS9Lv9l1epThaa41yNV5FiS5FKTxKWTO+VAmtgj+FR/UW5hw2217iWDv3vzXgJYZ7ky2PlZE52YqdjENBtumk2Ft+muhR1Bmw+ViXx3ad/qWqnYPIPR8PNbScYuL2slVrX9/wxf4/3cT/QvtksnmbJfR8KOQk+WQR5c82wCSSZOE0JF6HRa0jFlWvxfMHnrPox2PXI7Cp7yhW+j337Mmhb94lUFFJtG0nMeFD4UeFcDRHXrI4nt6B7E66RTo5k4F79C8eRaU+/SzYXoaRV/izL1Ev0wHMtBvhWL8zo1fRAsJjZ+BS1HqHvxSzh5xjtsMPKWbxh60oGjXGPJhseQ0J6C4l2E5JCp2B+S94h3G4lwnUE6h/w3GIEJzL8V6ODKMcoq6B64GfDVfsI5R5IC78XNxRUiuKqQdKtFNvx0Fm9gvatUN1BNmSbkKk3QY6znvaoOOz+xHZ50k+9pz1CtE8dIkbsQe4t+O9QAEREyWZKqVL/BK+xosQvUaJvyKDkjm7Hp93Jk+JGLQFieOhxuYug6n95p6uTxckaREGn2l6/Opzf59/BtlnuOgpSCdpaKugnFlLhlELe0MeLPiZiCsQWV0/vXE8x3aQrAhoAu8zATmnocNptH9BG3m6nKA4/UhVNBoUCIWZv+DFSSIFd2hshTfbCoXuBDg1YSa8IsbYRwR1Q9evYBBf0qqSr7n7II6JyxctoIX8Hnp58f9fDncA6l7lHCc6Q2TKz7RXGgUjoAdUSJtkFSx9GTLqAeUVQMPYgx7QFQsNgycCCVcZuz21KWfK/SLWDlwT7DCEPXQX67JvDheb7zMbHxTF+MObujOjDiCeXMnpVDUAxQ9vYfFUF57qjgt3NFMZ6jguEcbJssappGSs0BDErU9QW+5KraHfaSN48BiVCO02QvXpdxUHUyVo1wXJmC/Nnce5x8bdL962FswLSNmPAKDPSaxvqHz1sbA3kt75wr/x0Qx0QsA+9cxLkCQevZY4W0sm1yG+roch3IEkoBa13h0GzKC10BvyBl0EphcMoUlk+P/2r/kBa1h0kqRSsfFhM1+C/xW4ymJS9ai68fQp2q/wMy4wz8QsG0yfccuqS6WnWRjXORjXr8BFB6YCZQ6guL7BN+AfcBy9Caf7tBHjxurSRNGyQtBnsQoDhYXCxMZGYQSsZrP+A7KCv53X6I4iAAAAAElFTkSuQmCC');
    width: 84px;
    height: 27px;
    line-height: 17px;
    margin: 3px auto;
    color: #ffffff;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.task_in_txt {
    min-width: 70px;
    height: 20px;
    line-height: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 6px;
    border-radius: 10px;
    color: #ffffff;
    background: #fa60c5;
    background: rgba(250, 96, 197, .6);
    background: -webkit-gradient(linear, left top, right top, from(rgba(250, 96, 197, .6)), to(rgba(255, 90, 106, .6)));
    background: linear-gradient(90deg, rgba(250, 96, 197, .6) 0%, rgba(255, 90, 106, .6) 100%);
}

.pop_box_main .pop_report {
    width: 406px;
}

.pop_report_item {
    width: 186px;
    height: 39px;
    line-height: 39px;
    border-radius: 4px;
    background: #f5f5f5;
    float: left;
    margin: 15px 8px;
    -webkit-transition: .2s;
    transition: .2s;
}

.pop_report_item:hover,
.pop_report_item.cur {
    background: #d4d4d4;
}

.pop_report_item a {
    display: block;
    text-align: center;
    font-size: 14px;
}

.pop_report_link {
    font-size: 12px;
    color: #6ca3d2;
    text-align: center;
    text-decoration: underline;
    display: block;
    margin: 0 auto;
}

.pop_report_link:hover {
    text-decoration: underline;
}

.pop_btn a.pop_content_disable {
    background: #d4d4d4;
    cursor: default;
}

.vr_timer_tit .ico {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAAqElEQVQokaXRIQoCURSF4W9kMLgHNRmtNovBYLS5A3ENswUXYROsugI1mm2Cok0wisUx+AaGARWZHx6Xe+7hXLgvSi9J6k0XGzRwDFoz1E99xgNLjGPlmOCKNhJUywaucMICQ/QrJQMhQg8tHGKkQcwbMoqzIvlb3jCJMccovDsGwbDGGfUvgdkN79jiFqWXpIE9ajnjEx3s/P71U35DJQjTwuZZCPubF0x9J4gamwTvAAAAAElFTkSuQmCC') no-repeat;
    width: 20px;
    height: 8px;
}

.viproom {
    position: absolute;
    z-index: 5;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: #000000;
    background: rgba(0, 0, 0, 0.95);
}

.vrinfo+.vrappr {
    margin-top: 30px;
}

.vrinfo_cd {
    margin: 10px 0 20px;
    text-align: center;
    font-size: 0;
    font-weight: bold;
    color: #ffe57c;
}

.vrinfo_cd .tit {
    font-size: 12px;
    white-space: pre;
}

.vrinfo_num {
    display: inline-block;
    margin-left: 7px;
    font-size: 0;
}

.vrinfo_num em {
    display: inline-block;
    margin-right: 2px;
    width: 12px;
    height: 19px;
    line-height: 19px;
    border: 1Px solid #ffe57c;
    border: 1Px solid rgba(255, 229, 124, .2);
    border-radius: calc(6px/2);
    font-size: 12px;
}

.vr_come {
    position: absolute;
    z-index: 5;
    bottom: 80px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    padding: 0 18px;
    height: 30px;
    line-height: 30px;
    border-radius: 15px;
    -webkit-box-shadow: 1px 0 1px rgba(255, 255, 255, .06), 0 10px 20px rgba(7, 0, 2, .12);
    box-shadow: 1px 0 1px rgba(255, 255, 255, .06), 0 10px 20px rgba(7, 0, 2, .12);
    text-align: center;
    white-space: nowrap;
}

.vr_come:before {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: #000000;
    background: rgba(0, 0, 0, .8);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
}

.vr_come .info {
    position: relative;
    font-size: 0;
    color: #ffe57c;
}

.vr_come .icvip {
    margin-right: 5px;
}

.vr_come .mes {
    font-size: 12px;
}

.vr_timer {
    position: relative;
    width: 96px;
    height: 34px;
    border-radius: 17px;
    text-align: center;
    line-height: 1;
}

.vr_timer:before {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: #000000;
    background: rgba(0, 0, 0, .5);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
}

.vr_timer .info {
    position: relative;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.vr_timer .info>span {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.vr_timer_tit {
    font-size: 0;
    color: #ffe57c;
}

.vr_timer_tit .ico {
    display: inline-block;
}

.vr_timer_tit em {
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
}

.vr_timer_time {
    margin-top: 2px;
    font-size: 12px;
    color: #fff;
}

.vr_timer_time i {
    font-weight: normal;
    font-style: normal;
    margin-left: 1px;
}

.vrinfo {
    text-align: center;
    color: #fff;
}

.vrinfo_tit {
    position: absolute;
    top: 10px;
    right: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 auto;
    width: 128px;
    height: 24px;
    line-height: 24px;
    border-radius: 12px;
    font-size: 0;
    text-indent: -9999em;
    background: #2a2a2a;
    color: #ffe57c;
}

.vrinfo_titinfo {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 112px;
    height: 15px;
}

.vrinfo_titsvg {
    display: block;
    width: 100%;
    height: 100%;
}

.vrinfo_titsvg .cls-1 {
    fill: #efd97e;
}

.vrinfo_desc {
    line-height: 1;
    font-size: 26px;
    font-weight: bold;
    letter-spacing: 3px;
    color: inherit;
}

.vrinfo_ti {
    margin-top: 10px;
    line-height: 1;
    font-size: 12px;
    letter-spacing: 2px;
    color: inherit;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    opacity: .7;
}

.vrappr_tit {
    line-height: 1;
    text-align: center;
    font-size: 0;
    font-weight: bold;
    color: #fff;
}

.vrappr_tit .dec {
    font-size: 12px;
    font-weight: normal;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
    opacity: .2;
}

.vrappr_tit .info {
    margin: 0 8px;
    font-size: 13px;
}

.vrappr_list {
    margin-top: 12px;
    font-size: 0;
    text-align: center;
}

.vrappr_list li {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 0 5px;
    width: 116px;
    height: 116px;
    border-radius: 6px;
    background: #38003c;
    background: rgba(56, 0, 60, .1);
    color: #fff;
    cursor: pointer;
}

.vrlist_wp {
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

.vrlist_img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

.vrlist_img img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    -o-object-fit: cover;
    object-fit: cover;
}

.vrlist_info {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.vrlist_mes {
    position: absolute;
    left: 0;
    bottom: 5px;
    width: 100%;
    padding-left: 6px;
    font-size: 0;
    line-height: 1;
    text-align: left;
}

.vrlist_mes em {
    display: block;
    font-size: 12px;
}

.vrlist_mes .name {
    margin-top: 4px;
    width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
    font-weight: bold;
}

.vrlist_tag {
    position: absolute;
    top: 0;
    right: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 60px;
    height: 24px;
    line-height: 24px;
    border-radius: 0 6px 0 6px;
    text-align: center;
    font-size: 12px;
    color: #fff;
    background: #000000;
    background: rgba(0, 0, 0, .5);
}

.vrlist_tag.cur:before {
    display: inline-block;
    content: '';
    margin-right: 5px;
    width: 4px;
    height: 4px;
    border-radius: 100%;
    background: #ff2c55;
}

.vrappr_info {
    margin-top: 12px;
    line-height: 1;
    text-align: center;
    font-size: 12px;
    white-space: nowrap;
    color: #fff;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    opacity: .7;
}

.vrappr_ctr {
    margin-top: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.vrappr_btn {
    width: 140px;
    height: 38px;
    line-height: 36px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 19px;
    border: 1px solid #ffffff;
    border: 1px solid rgba(255, 255, 255, .6);
    font-size: 13px;
    text-align: center;
    color: #fff;
    -webkit-transition: .2s;
    transition: .2s;
}

.vrappr_btn:hover {
    background: #ffffff;
    background: rgba(255, 255, 255, .2);
}

.vrappr_btn.done {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    opacity: .5;
    cursor: not-allowed;
}

.vrappr_btn.done:hover {
    background: transparent;
}

.vrappr_btn.cur {
    margin-left: 10px;
    line-height: 38px;
    border: none;
    background: #2a2a2a;
    color: #ffe57c;
}

.vrappr_btn.cur:hover {
    background: #3f3f3f;
}

.vrappr_login {
    margin: 20px auto 0;
    display: block;
    line-height: 1;
    text-align: center;
    font-size: 12px;
    text-decoration: underline;
    color: #fff;
    -webkit-transition: .2s;
    transition: .2s;
}

.vrappr_login:hover {
    text-decoration: underline;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    opacity: .8;
}

.icvip {
    display: inline-block;
    width: 42px;
    height: 12px;
    background: url(../img/play/viproom/ic_vip.png) no-repeat 0 999em;
    overflow: hidden;
    vertical-align: -1px;
    margin: 0 0 0 2px;
    background-image: url(../img/play/viproom/ic_vip.png);
}

@media (-webkit-min-device-pixel-ratio:2),
(min-resolution:192dpi) {
    .icvip {
        background-image: url(../img/play/viproom/ic_vip_2x.png);
    }
}

.icvip {
    background-image: -webkit-image-set(url(../img/play/viproom/ic_vip.png) 1x, url(../img/play/viproom/ic_vip_2x.png) 2x);
}

.icgold08:before,
.icgold09:before,
.icgold10:before,
.icsuper08:before,
.icsuper09:before,
.icsuper10:before {
    background-image: url(../img/play/viproom/ic_vip.png);
}

@media (-webkit-min-device-pixel-ratio:2),
(min-resolution:192dpi) {
    .icgold08:before,
    .icgold09:before,
    .icgold10:before,
    .icsuper08:before,
    .icsuper09:before,
    .icsuper10:before {
        background-image: url(../img/play/viproom/ic_vip_2x.png);
    }
}

.icgold08:before,
.icgold09:before,
.icgold10:before,
.icsuper08:before,
.icsuper09:before,
.icsuper10:before {
    background-image: -webkit-image-set(url(../img/play/viproom/ic_vip.png) 1x, url(../img/play/viproom/ic_vip_2x.png) 2x);
    display: block;
    margin-left: 8px;
    width: 24px;
    height: 12px;
    background-position: 0 -145px;
    background-repeat: no-repeat;
    content: "";
    -webkit-animation: iconVip 2s both infinite;
    animation: iconVip 2s both infinite;
}

@-webkit-keyframes iconVip {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    50%,
    100% {
        -webkit-transform: translateX(30px);
        transform: translateX(30px)
    }
}

@keyframes iconVip {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    50%,
    100% {
        -webkit-transform: translateX(30px);
        transform: translateX(30px)
    }
}

.icvip00 {
    width: 36px;
    background-position: 0 0
}

.icvip01 {
    background-position: -37px 0
}

.icvip02 {
    background-position: -80px 0
}

.icvip03 {
    background-position: -123px 0
}

.icvip04 {
    background-position: -166px 0
}

.icvip05 {
    background-position: -209px 0
}

.icvip06 {
    background-position: -252px 0
}

.icvip07 {
    background-position: -295px 0
}

.icvip00hui {
    width: 35px;
    background-position: 0px -18px
}

.icvip01hui {
    background-position: -37px -18px
}

.icvip02hui {
    background-position: -80px -18px
}

.icvip03hui {
    background-position: -123px -18px
}

.icvip04hui {
    background-position: -166px -18px
}

.icvip05hui {
    background-position: -209px -18px
}

.icvip06hui {
    background-position: -252px -18px
}

.icvip07hui {
    background-position: -295px -18px
}

.icgold00 {
    width: 35px;
    background-position: 0 -36px
}

.icgold01 {
    background-position: -37px -36px
}

.icgold02 {
    background-position: -80px -36px
}

.icgold03 {
    background-position: -123px -36px
}

.icgold04 {
    background-position: -166px -36px
}

.icgold05 {
    background-position: -209px -36px
}

.icgold06 {
    background-position: -252px -36px
}

.icgold07 {
    background-position: -295px -36px
}

.icgold08 {
    background-position: -338px -36px
}

.icgold09 {
    background-position: -381px -36px
}

.icgold10 {
    background-position: -424px -36px;
    width: 46px;
}

.icgold00hui {
    width: 35px;
    background-position: 0px -54px
}

.icgold01hui {
    background-position: -37px -54px
}

.icgold02hui {
    background-position: -80px -54px
}

.icgold03hui {
    background-position: -123px -54px
}

.icgold04hui {
    background-position: -166px -54px
}

.icgold05hui {
    background-position: -209px -54px
}

.icgold06hui {
    background-position: -252px -54px
}

.icgold07hui {
    background-position: -295px -54px
}

.icgold08hui {
    background-position: -338px -54px
}

.icgold09hui {
    background-position: -381px -54px
}

.icgold10hui {
    background-position: -424px -54px;
    width: 46px;
}

.icsuper00 {
    width: 35px;
    background-position: 0 -72px
}

.icsuper01 {
    background-position: -37px -72px
}

.icsuper02 {
    background-position: -80px -72px
}

.icsuper03 {
    background-position: -123px -72px
}

.icsuper04 {
    background-position: -166px -72px
}

.icsuper05 {
    background-position: -209px -72px
}

.icsuper06 {
    background-position: -252px -72px
}

.icsuper07 {
    background-position: -295px -72px
}

.icsuper08 {
    background-position: -338px -72px
}

.icsuper09 {
    background-position: -381px -72px
}

.icsuper10 {
    background-position: -424px -72px;
    width: 46px;
}

.icsuper00hui {
    width: 35px;
    background-position: 0px -90px
}

.icsuper01hui {
    background-position: -37px -90px
}

.icsuper02hui {
    background-position: -80px -90px
}

.icsuper03hui {
    background-position: -123px -90px
}

.icsuper04hui {
    background-position: -166px -90px
}

.icsuper05hui {
    background-position: -209px -90px
}

.icsuper06hui {
    background-position: -252px -90px
}

.icsuper07hui {
    background-position: -295px -90px
}

.icsuper08hui {
    background-position: -338px -90px
}

.icsuper09hui {
    background-position: -381px -90px
}

.icsuper10hui {
    background-position: -424px -90px;
    width: 46px;
}

.icnian {
    width: 12px;
    height: 12px;
    background-position: 0px -108px;
}

.icnianhui {
    width: 12px;
    height: 12px;
    background-position: 0px -128px
}

.icdongjie {
    width: 16px;
    height: 16px;
    background-position: -19px -109px
}

.icdongjiehui {
    width: 16px;
    height: 16px;
    background-position: -19px -128px
}

.icshuai {
    width: 16px;
    height: 16px;
    background-position: -38px -109px
}

.icshuaihui {
    width: 16px;
    height: 16px;
    background-position: -38px -128px
}

.icqiye {
    width: 16px;
    height: 16px;
    background-position: -57px -109px
}

.icqiyehui {
    width: 16px;
    height: 16px;
    background-position: -57px -128px
}

.ichongren {
    width: 16px;
    height: 16px;
    background-position: -76px -109px
}

.ichongrenhui {
    width: 16px;
    height: 16px;
    background-position: -76px -128px
}

.icbao {
    width: 16px;
    height: 16px;
    background-position: -95px -109px
}

.icbaohui {
    width: 16px;
    height: 16px;
    background-position: -95px -128px
}

.icxun {
    width: 15px;
    height: 16px;
    background-position: -116px -109px
}

.icxunhui {
    width: 15px;
    height: 16px;
    background-position: -116px -128px
}

.icgold {
    width: 15px;
    height: 16px;
    background-position: -136px -109px
}

.icgoldhui {
    width: 15px;
    height: 14px;
    background-position: -136px -128px
}

.icgrow {
    width: 12px;
    height: 14px;
    background-position: -155px -109px;
}

.icdown {
    width: 12px;
    height: 14px;
    background-position: -155px -128px;
}

.ickuainiao {
    background-position: -338px 0;
    width: 36px;
}

.ickuainiaohui {
    background-position: -338px -18px
}

.icshangxing {
    background-position: -380px 0;
    width: 36px
}

.icshangxinghui {
    background-position: -380px -18px;
}

.wrap.over .vrappr_list li {
    background: #ffffff;
    background: rgba(255, 255, 255, .2);
}

.wrap.over .vrinfo+.vrappr {
    margin-top: 60px;
}

.pop_notice_content {
    width: 278px;
    margin: 0 auto;
}

.pop_notice_input {
    background-color: #f1f1f1;
    border-radius: 8px;
    height: 35px;
    position: relative;
}

.pop_notice_input input {
    height: 35px;
    border: none;
    width: 95%;
    background: none;
    color: #181818;
}

.pop_send_title {
    text-align: left;
    font-size: 12px;
    color: #b4b4b4;
    padding: 18px 0 12px;
}

.pop_quick_txt {
    padding: 5px;
    border: 1px solid #e1e1e1;
    border-radius: 4px;
    line-height: 1.5em;
    font-size: 14px;
    color: #717171;
    text-align: left;
    cursor: pointer;
    margin-bottom: 10px;
}

.pop_uplevel_wrap {
    width: 320px;
    height: 400px;
    color: #5e2bca;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    z-index: 2
}

.pop_uplevel_wrap.animation {
    -webkit-animation: ani1 200ms ease;
    animation: ani1 200ms ease;
}

.pop_uplevel_wrap.animation .pop_uplevel_button {
    -webkit-animation: ani_button 200ms ease 160ms;
    animation: ani_button 200ms ease 160ms;
}

.pop_uplevel_wrap.animation .pop_uplevel_ribbon {
    -webkit-animation: keyframes-img 480ms steps(1) 240ms forwards;
    animation: keyframes-img 480ms steps(1) 240ms forwards;
}

.pop_uplevel_wrap.animation .star {
    -webkit-animation: ani2 680ms ease 160ms forwards;
    animation: ani2 680ms ease 160ms forwards;
}

.pop_uplevel_wrap.animation .light {
    -webkit-animation: ani2 680ms ease 160ms forwards;
    animation: ani2 680ms ease 160ms forwards;
}

.pop_uplevel_wrap.animation .pop_uplevel_coupon_main {
    -webkit-animation: couponAni 1120ms ease 320ms forwards;
    animation: couponAni 1120ms ease 320ms forwards;
}

.pop_uplevel_wrap.animation .coupon_text {
    -webkit-animation: textAni 320ms ease 320ms forwards;
    animation: textAni 320ms ease 320ms forwards;
}

.pop_uplevel_wrap .light {
    position: absolute;
    top: -62px;
    left: 160px;
    margin-left: -88px;
    background-image: url(../img/play/spr_user_uplevel.png?v=2020228);
    background-position: 0px -151px;
    background-repeat: no-repeat;
    width: 176px;
    height: 176px;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

.pop_uplevel_wrap .pop_uplevel {
    width: 320px;
    height: 400px;
    color: #5e2bca;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.pop_uplevel_wrap .pop_uplevel .pop_uplevel_close {
    width: 23px;
    height: 23px;
    background-image: url(../img/play/spr_user_uplevel.png?v=2020228);
    background-position: -511px -119px;
    background-repeat: no-repeat;
    position: absolute;
    top: 10px;
    right: 10px;
    text-indent: -9999em;
    font-size: 0;
    -webkit-transition: .2s;
    transition: .2s;
    z-index: 3;
}

.pop_uplevel_wrap .pop_uplevel .pop_uplevel_close:hover {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.pop_uplevel_wrap .pop_uplevel .pop_uplevel_head {
    border-radius: 10px 10px 0 0;
    width: 320px;
    height: 143px;
    background-image: url(../img/play/spr_user_uplevel.png?v=2020228);
    background-position: 0px 0px;
    background-repeat: no-repeat;
    padding-top: 50px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    font-weight: 700;
}

.pop_uplevel_wrap .pop_uplevel .pop_uplevel_box {
    background: #ece1ff;
    padding: 15px 0;
    border-radius: 0 0 10px 10px;
}

.pop_uplevel_wrap .pop_uplevel .pop_uplevel_coupon {
    margin: 12px auto 0;
}

.pop_uplevel_wrap .pop_uplevel .pop_uplevel_coupon .pop_uplevel_couponWrap {
    width: 284px;
    margin: 0 auto;
    position: relative;
    height: 120px;
}

.pop_uplevel_wrap .pop_uplevel .pop_uplevel_coupon .pop_uplevel_coupon_top {
    width: 285px;
    height: 42px;
    background-image: url(../img/play/spr_user_uplevel.png?v=2020228);
    background-position: -292px -335px;
    background-repeat: no-repeat;
}

.pop_uplevel_wrap .pop_uplevel .pop_uplevel_coupon .coupon_main_wrap {
    position: absolute;
    top: 6px;
    left: -134px;
    margin-left: 143px;
    width: 269px;
    height: 111px;
    overflow: hidden
}

.pop_uplevel_wrap .pop_uplevel .pop_uplevel_coupon .coupon_main_wrap:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: -2px;
    z-index: 2;
    width: 271px;
    height: 42px;
    background-image: url(../img/play/spr_user_uplevel.png?v=2020228);
    background-position: 0px -392px;
    background-repeat: no-repeat;
}

.pop_uplevel_wrap .pop_uplevel .pop_uplevel_coupon .pop_uplevel_coupon_main {
    position: absolute;
    top: -81px;
    left: 0;
    width: 267px;
    height: 111px;
    background-image: url(../img/play/spr_user_uplevel.png?v=2020228);
    background-position: -328px 0px;
    background-repeat: no-repeat;
}

.pop_uplevel_wrap .pop_uplevel .pop_uplevel_coupon .pop_uplevel_coupon_main .coupon_text {
    height: 62px;
    width: 100%;
    margin-top: 32px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    opacity: 0;
    filter: alpha(opacity=0);
}

.pop_uplevel_wrap .pop_uplevel .pop_uplevel_coupon .pop_uplevel_coupon_main .coupon_left,
.pop_uplevel_wrap .pop_uplevel .pop_uplevel_coupon .pop_uplevel_coupon_main .coupon_right {
    float: left;
}

.pop_uplevel_wrap .pop_uplevel .pop_uplevel_coupon .pop_uplevel_coupon_main .coupon_common {
    text-align: center;
    height: 62px;
    font-weight: 700;
}

.pop_uplevel_wrap .pop_uplevel .pop_uplevel_coupon .pop_uplevel_coupon_main .coupon_left {
    width: 148px;
    line-height: 66px;
    margin-left: 8px;
    border-right: 1px dashed #5e2bca;
}

.pop_uplevel_wrap .pop_uplevel .pop_uplevel_coupon .pop_uplevel_coupon_main .coupon_left>span {
    font-size: 50px;
}

.pop_uplevel_wrap .pop_uplevel .pop_uplevel_coupon .pop_uplevel_coupon_main .coupon_right {
    width: 104px;
    padding: 8px 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.pop_uplevel_wrap .pop_uplevel .pop_uplevel_coupon .pop_uplevel_coupon_main .coupon_right .coupon_give {
    width: 80px;
    margin: 0 auto;
    font-size: 11px;
    height: 20px;
    line-height: 20px;
    border-radius: 7px 0 7px 0;
    background: #ff2c55;
    font-weight: 400;
}

.pop_uplevel_wrap .pop_uplevel .pop_uplevel_coupon .pop_uplevel_coupon_main .coupon20 {
    font-size: 24px;
    text-align: center;
    line-height: 66px;
    text-align: left;
    padding-left: 18px
}

.pop_uplevel_wrap .pop_uplevel .pop_uplevel_coupon .pop_uplevel_coupon_main .coupon20:after {
    content: '';
    display: block;
    position: absolute;
    top: 66px;
    margin-top: -40px;
    right: 10px;
    width: 68px;
    height: 57px;
    background-image: url(../img/play/spr_user_uplevel.png?v=2020228);
    background-position: -435px -119px;
    background-repeat: no-repeat;
}

.pop_uplevel_wrap .pop_uplevel .pop_uplevel_tips {
    font-size: 13px;
    text-align: center;
    height: 43px
}

.pop_uplevel_wrap .pop_uplevel .pop_uplevel_tips.uplevel_center {
    line-height: 43px;
}

.pop_uplevel_wrap .pop_uplevel .pop_uplevel_tips .pop_uplevel_time {
    color: #ff2c55;
    font-size: 16px;
}

.pop_uplevel_wrap .pop_uplevel .pop_uplevel_text {
    font-size: 30px;
    line-height: 30px;
}

.pop_uplevel_wrap .pop_uplevel .pop_uplevel_txt {
    font-size: 17px;
}

.pop_uplevel_wrap .pop_uplevel .pop_uplevel_level {
    color: #ffe000;
    font-size: 36px;
    line-height: 36px;
}

.pop_uplevel_wrap .pop_uplevel .pop_uplevel_button {
    border-radius: 22px;
    margin: 0 auto;
    width: 284px;
    height: 49px;
    background-image: url(../img/play/spr_user_uplevel.png?v=2020228);
    background-position: 0px -335px;
    background-repeat: no-repeat;
    line-height: 44px;
    color: #ffffff;
    text-align: center;
    font-size: 17px;
    font-weight: 700;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

.pop_uplevel_wrap .pop_uplevel .pop_uplevel_button>a {
    display: inline-block;
    height: 44px;
    line-height: 44px;
    width: 282px;
    border-radius: 22px;
}

.pop_uplevel_wrap .pop_uplevel .text_white {
    color: #ffffff;
}

.pop_uplevel_wrap .pop_uplevel .marginTop8 {
    margin-top: 8px;
}

.pop_uplevel_wrap .pop_uplevel .pop_uplevel_star {
    position: relative;
}

.pop_uplevel_wrap .pop_uplevel .pop_uplevel_star .star {
    background-image: url(../img/play/spr_user_uplevel.png?v=2020228);
    background-position: -328px -119px;
    background-repeat: no-repeat;
    width: 99px;
    height: 80px;
    position: absolute;
    top: -28px;
    left: 92px;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

.pop_uplevel_wrap .pop_uplevel .pop_uplevel_ribbon {
    position: absolute;
    left: 160px;
    margin-left: -188px;
    top: -36px;
    width: 375px;
    height: 80px;
    background: url("../img/play/user_uplevel/sprites.png") no-repeat;
    background-size: 4500px 80px;
}

@-webkit-keyframes ani1 {
    0% {
        -webkit-transform: scale(0) translate(-50%, -50%);
        transform: scale(0) translate(-50%, -50%);
    }
    100% {
        -webkit-transform: scale(1) translate(-50%, -50%);
        transform: scale(1) translate(-50%, -50%);
    }
}

@keyframes ani1 {
    0% {
        -webkit-transform: scale(0) translate(-50%, -50%);
        transform: scale(0) translate(-50%, -50%);
    }
    100% {
        -webkit-transform: scale(1) translate(-50%, -50%);
        transform: scale(1) translate(-50%, -50%);
    }
}

@-webkit-keyframes ani2 {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    31.25% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    43.75% {
        -webkit-transform: scale(1.154);
        transform: scale(1.154);
    }
    56% {
        -webkit-transform: scale(1.014);
        transform: scale(1.014);
    }
    68.5% {
        -webkit-transform: scale(0.926);
        transform: scale(0.926);
    }
    80.75% {
        -webkit-transform: scale(0.987);
        transform: scale(0.987);
    }
    93.25% {
        -webkit-transform: scale(1.035);
        transform: scale(1.035);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes ani2 {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    31.25% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    43.75% {
        -webkit-transform: scale(1.154);
        transform: scale(1.154);
    }
    56% {
        -webkit-transform: scale(1.014);
        transform: scale(1.014);
    }
    68.5% {
        -webkit-transform: scale(0.926);
        transform: scale(0.926);
    }
    80.75% {
        -webkit-transform: scale(0.987);
        transform: scale(0.987);
    }
    93.25% {
        -webkit-transform: scale(1.035);
        transform: scale(1.035);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@-webkit-keyframes ani_button {
    0% {
        -webkit-transform: scale(1.15);
        transform: scale(1.15);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
        filter: alpha(opacity=0);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
        filter: alpha(opacity=100);
    }
}

@keyframes ani_button {
    0% {
        -webkit-transform: scale(1.15);
        transform: scale(1.15);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
        filter: alpha(opacity=0);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
        filter: alpha(opacity=100);
    }
}

@-webkit-keyframes couponAni {
    0% {
        top: -81px;
        left: 0;
    }
    36% {
        top: -6px;
        left: 0;
    }
    43% {
        top: -3px;
        left: 0;
    }
    50% {
        top: -4px;
        left: 0;
    }
    57% {
        top: -6px;
        left: 0;
    }
    63% {
        top: -5px;
        left: 0;
    }
    70% {
        top: -5px;
        left: 0;
    }
    77% {
        top: -6px;
        left: 0;
    }
    83% {
        top: -5px;
        left: 0;
    }
    90% {
        top: -5px;
        left: 0;
    }
    100% {
        top: -6px;
        left: 0;
    }
}

@keyframes couponAni {
    0% {
        top: -81px;
        left: 0;
    }
    36% {
        top: -6px;
        left: 0;
    }
    43% {
        top: -3px;
        left: 0;
    }
    50% {
        top: -4px;
        left: 0;
    }
    57% {
        top: -6px;
        left: 0;
    }
    63% {
        top: -5px;
        left: 0;
    }
    70% {
        top: -5px;
        left: 0;
    }
    77% {
        top: -6px;
        left: 0;
    }
    83% {
        top: -5px;
        left: 0;
    }
    90% {
        top: -5px;
        left: 0;
    }
    100% {
        top: -6px;
        left: 0;
    }
}

@-webkit-keyframes textAni {
    0% {
        margin-top: 30px;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
        filter: alpha(opacity=0);
    }
    50% {
        margin-top: 27px;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
        opacity: 0.1;
        filter: alpha(opacity=10);
    }
    100% {
        margin-top: 22px;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
        filter: alpha(opacity=100);
    }
}

@keyframes textAni {
    0% {
        margin-top: 30px;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
        filter: alpha(opacity=0);
    }
    50% {
        margin-top: 27px;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
        opacity: 0.1;
        filter: alpha(opacity=10);
    }
    100% {
        margin-top: 22px;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
        filter: alpha(opacity=100);
    }
}

@-webkit-keyframes keyframes-img {
    0% {
        width: 375px;
        height: 80px;
        background-image: url("../img/play/user_uplevel/sprites.png");
        background-size: 4500px 80px;
    }
    8.33% {
        background-position: -375px 0px;
    }
    16.67% {
        background-position: -750px 0px;
    }
    25.00% {
        background-position: -1125px 0px;
    }
    33.33% {
        background-position: -1500px 0px;
    }
    41.67% {
        background-position: -1875px 0px;
    }
    50.00% {
        background-position: -2250px 0px;
    }
    58.33% {
        background-position: -2625px 0px;
    }
    66.67% {
        background-position: -3000px 0px;
    }
    75.00% {
        background-position: -3375px 0px;
    }
    83.33% {
        background-position: -3750px 0px;
    }
    91.67%,
    100% {
        background-position: -4125px 0px;
    }
}

@keyframes keyframes-img {
    0% {
        width: 375px;
        height: 80px;
        background-image: url("../img/play/user_uplevel/sprites.png");
        background-size: 4500px 80px;
    }
    8.33% {
        background-position: -375px 0px;
    }
    16.67% {
        background-position: -750px 0px;
    }
    25.00% {
        background-position: -1125px 0px;
    }
    33.33% {
        background-position: -1500px 0px;
    }
    41.67% {
        background-position: -1875px 0px;
    }
    50.00% {
        background-position: -2250px 0px;
    }
    58.33% {
        background-position: -2625px 0px;
    }
    66.67% {
        background-position: -3000px 0px;
    }
    75.00% {
        background-position: -3375px 0px;
    }
    83.33% {
        background-position: -3750px 0px;
    }
    91.67%,
    100% {
        background-position: -4125px 0px;
    }
}

@media screen and (min-width:1900px) {
    .play_room {
        padding-left: 110px;
        padding-right: 30px;
    }
    .play_top {
        padding-right: 410px;
    }
    .play_interact {
        width: 400px;
    }
    .aside {
        width: 100px;
    }
    .nav_logo .logo {
        width: 66px;
        margin: 20px auto 30px;
    }
    .aside .login_before>a:before {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
    }
    .aside .login_success>a {
        width: 50px;
        height: 50px;
    }
    .aside .login_success p {
        padding: 6px 2px;
    }
    .nav_qr_box {
        background-image: url(../img/play/spr_play_down.png?v=2020228);
        background-position: -138px 0px;
        background-repeat: no-repeat;
        width: 90px;
        height: 130px;
        padding-top: 9px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin: 0 auto;
    }
    .gicon {
        display: inline-block;
        vertical-align: middle;
        margin-top: -3px;
    }
    .livelist li {
        width: 12%;
    }
    .livelist li:nth-child(6),
    .livelist li:nth-child(7) {
        display: inline-block;
    }
    .unplay_list ul li {
        margin: 15px 5px;
    }
    .unplay_list ul li a,
    .unplay_list ul li a img {
        width: 206px;
        height: 206px;
    }
    .actlist_wp {}
    .catfightother_bottom .img_icon_small {
        height: 18px;
    }
    .edit_area_wrap {
        width: 360px;
    }
    .chat_input {
        width: 213px;
    }
    .first_recharge_tips_close {
        right: 16px;
        top: 34px
    }
    .first_recharge_tips_close:after {
        content: "";
        display: block;
        width: 14px;
        height: 14px;
        background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAA4ElEQVQokY3TMUoDQRTG8d9uYtAjmCDeQrAKlra2giezERuPYCEGxSZgIR5BUQ9gISnCZ+EGlnF3yYNh3ryZ/zcz7/EkqZJMk+wkscUYJZklqcY4wik+cY0f/TbBOQ6xqLFqNqa4wN4WIKxqvOCxCez3CJTgEsu6WdwPCHSBt0iVpH3DCeaN/4UbnHWBUMKlwBqjLhBq/22Bp8bfgM8l2AdPcFDEZtgtD5ZwmZyPZu6sQhvuyuolHvoE6gFw88dFn0CVZAhsW1nGqxrHW4A6XjAf4x3feMVdD9gWWPtrprdf7V5uxWFHYpoAAAAASUVORK5CYII=');
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
        position: absolute;
        left: 3px;
        top: 4px;
    }
    .first_recharge_tips_go {
        width: 90px;
        height: 30px;
        right: 52px;
        top: 29px;
    }
    .first_recharge_tips_box {
        width: 425px;
        height: 75px;
    }
}

.act_weekstar .actico_live {
    display: block;
    width: 24px;
    height: 24px;
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 1;
}

.act_weekstar .actico_live i {
    display: block;
    width: 100%;
    height: 100%;
    background: url(../img/weekstar/actico_live.png);
    background-size: 100%;
    -webkit-animation: actXX_live 1s steps(8) infinite;
    animation: actXX_live 1s steps(8) infinite;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
}

@-webkit-keyframes actXX_live {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 -192px;
    }
}

@keyframes actXX_live {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 -192px;
    }
}

.act_weekstar .sk-three-bounce {
    width: 100%;
    height: 100%;
    min-height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.act_weekstar .sk-three-bounce .sk-child {
    width: 40px;
    height: 40px;
    background-color: #7951ff;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
    animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
}

.act_weekstar .sk-three-bounce .sk-bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.act_weekstar .sk-three-bounce .sk-bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

@-webkit-keyframes sk-three-bounce {
    0%,
    80%,
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    40% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes sk-three-bounce {
    0%,
    80%,
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    40% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.act_weekstar {
    width: 100vw;
    height: 100vh;
    padding-bottom: 140px;
    overflow-x: hidden;
    overflow-y: scroll;
    background-color: #7951ff;
}

.act_weekstar::-webkit-scrollbar {
    display: none;
}

.act_weekstar .act_banner {
    width: 750px;
    height: 500.4px;
    background: url(../img/weekstar/banner.png) no-repeat center/100% 100%;
}

.act_weekstar .tabs {
    margin: 32px 20px 14px 20px;
    display: flex;
    justify-content: space-between;
}

.act_weekstar .tab {
    width: 228px;
    height: 88px;
    line-height: 88px;
    text-align: center;
    font-size: 34px;
    color: #6B00FF;
    font-weight: 500;
    background-image: url(../img/weekstar/sprite.png);
    background-position: -318px -451px;
    background-size: 854px;
    background-repeat: no-repeat;
}

.act_weekstar .tab.currentTab {
    background-position: -76px -451px;
    font-weight: 600;
}

.act_weekstar .week_out_container {
    width: 710px;
    margin: 0 20px;
    box-sizing: border-box;
    padding: 4px;
    border-radius: 40px;
    background-color: #7951ff;
    border: 3px solid #9A7CFF;
}

.act_weekstar .week_inner_container {
    background-color: #5B00DE;
    border-radius: 40px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.act_weekstar .week_title {
    width: 670px;
    height: 70px;
    margin: 20px;
    background-image: url(../img/weekstar/sprite.png);
    background-size: 854px;
    background-repeat: no-repeat;
}

.act_weekstar .preweek_title {
    background-position: -40px -594px;
}

.act_weekstar .head_rank_wp {
    width: 670px;
    height: 203px;
    margin-bottom: 24px;
    overflow: hidden;
    background: url(../img/weekstar/star.png) no-repeat center/100%;
}

.act_weekstar .head_rank_title {
    height: 48px;
    margin-top: 8px;
    line-height: 48px;
    font-size: 34px;
    color: #FFFE93;
    letter-spacing: 0;
    text-align: center;
    text-shadow: 0 1px 2px rgba(242, 137, 81, 0.65);
    font-weight: 500;
}

.act_weekstar .head_rank_content {
    margin-top: 6px;
    display: flex;
    justify-content: space-between;
}

.act_weekstar .head_rank_user {
    width: 50%;
    margin-left: 20px;
    display: flex;
    justify-content: flex-start;
}

.act_weekstar .head_rank_avatar {
    width: 120px;
    height: 120px;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    position: relative;
}

.act_weekstar .head_rank_avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.act_weekstar .head_rank_name {
    flex: 1;
    overflow: hidden;
    margin-left: 16px;
    color: #AC4012;
    letter-spacing: 0;
}

.act_weekstar .head_rank_nickname {
    margin-top: 20px;
    height: 42px;
    line-height: 42px;
    font-size: 30px;
    color: #AC4012;
    letter-spacing: 0;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.act_weekstar .head_rank_champions {
    height: 34px;
    line-height: 34px;
    font-size: 24px;
    font-weight: 400;
}

.act_weekstar .head_rank_acount {
    width: 50%;
    font-size: 24px;
    color: #AC4012;
    letter-spacing: 0;
    text-align: center;
    font-weight: 400;
    overflow: hidden;
    white-space: nowrap;
}

.act_weekstar .head_rank_acount span {
    display: inline-block;
    margin: 20px 20px 0 8px;
    font-size: 50px;
    color: #AC4012;
    font-weight: 700;
}

.act_weekstar .preweek_nav__list {
    width: 670px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.act_weekstar .preweek_nav_item {
    width: 162px;
    height: 162px;
    box-sizing: border-box;
    background: #7951FF;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.act_weekstar .preweek_nav__list .active {
    height: 184px;
    background-image: linear-gradient(180deg, #550CC0 12%, #7B20FF 100%);
    border-top: 2px solid #E5B1FF;
    border-left: 2px solid #E5B1FF;
    border-right: 2px solid #E5B1FF;
    border-bottom: none;
}

.act_weekstar .nav_active_bottom {
    width: 158px;
    height: 12px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    background: #E5B1FF;
    opacity: 0;
    position: absolute;
    left: 0;
    bottom: 0;
}

.act_weekstar .preweek_nav__list .active .nav_active_bottom {
    opacity: 1;
}

.act_weekstar .preweek_nav_item_icon {
    width: 100px;
    max-width: 100px;
    max-height: 100px;
    margin-top: 14px;
}

.act_weekstar .preweek_nav__list .active .preweek_nav_item_icon {
    width: 120px;
    max-width: 120px;
    max-height: 120px;
    margin-top: 8px;
}

.act_weekstar .nav_name {
    font-size: 22px;
    color: #FFFFFF;
    letter-spacing: 0;
    text-align: center;
    font-weight: 400;
}

.act_weekstar .preweek_nav__list .active {
    font-size: 24px;
    font-weight: 500;
}

.act_weekstar .last_week_rank_info {
    width: 670px;
    height: 203px;
    margin-top: 8px;
    margin-bottom: 32px;
    background: #FFFEF5;
    border-radius: 20px;
}

.act_weekstar .preweek_content__item {
    overflow: hidden;
    padding-top: 32px;
    padding-bottom: 35px;
    display: flex;
    justify-content: flex-start;
}

.act_weekstar .preweek_goddess_item {
    width: 50%;
    height: 136px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.act_weekstar .preweek_goddess_item_left {
    width: 140px;
    height: 100%;
    margin-left: 10px;
    position: relative;
}

.act_weekstar .preweek_goddess_item_left .head_rank_avatar {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.act_weekstar .preweek_goddess_tag {
    box-sizing: border-box;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    -webkit-text-size-adjust: none;
    color: #FFFFFF;
    background-image: linear-gradient(-45deg, #FF7200 0%, #FF3C00 100%);
    letter-spacing: 0;
    font-weight: 400;
    border: 2px solid #FFF7EA;
    border-radius: 20px;
}

.act_weekstar .preweek_goddess_badge {
    display: inline-block;
    width: 32px;
    height: 32px;
}

.act_weekstar .preweek_goddess_tag_left .preweek_goddess_badge {
    background: url(../img/weekstar/sprite.png) no-repeat -121px -968px / 854px;
}

.act_weekstar .preweek_goddess_tag_right {
    background-image: linear-gradient(-45deg, #7951FF 0%, #460FFF 100%);
}

.act_weekstar .preweek_goddess_tag_right .preweek_goddess_badge {
    background: url(../img/weekstar/sprite.png) no-repeat -80px -968px / 854px;
}

.act_weekstar .preweek_goddess_item_right {
    width: 150px;
    margin-left: 10px;
    color: #000000;
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 0;
    text-align: left;
}

.act_weekstar .preweek_goddess_name {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 30px;
    line-height: 44px;
    font-weight: 500;
}

.act_weekstar .preweek_goddess_count {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 32px;
}

.act_weekstar .preweek_goddess_important {
    width: 100%;
    color: #6B00FF;
    height: 32px;
    line-height: 32px;
}

.act_weekstar .act_footer {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    padding: 30px 20px;
    font-size: 28px;
    color: #6B00FF;
    text-align: center;
}

.act_weekstar .act_entry {
    background-color: #fff;
    position: fixed;
    z-index: 10;
    left: 0;
    bottom: 0;
    right: 0;
    height: 120px;
    line-height: 120px;
    left: 50%;
    width: 750px;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

.act_weekstar .act_entry_btn {
    display: block;
    text-align: center;
    font-size: 36px;
    color: #7951ff;
}

.act_weekstar .currentweek_title {
    background-position: -40px -676px;
}

.act_weekstar .currentweek_box {
    margin-top: 20px;
    margin-bottom: 20px;
}

.act_weekstar .currentweek_box .week_inner_container {
    height: auto;
}

.act_weekstar .currentweek_time {
    width: 670px;
    height: 80px;
    line-height: 80px;
    border-radius: 40px;
    margin-bottom: 24px;
    background: #7951FF;
    font-size: 13px;
    color: #FFFFFF;
    letter-spacing: 0;
    text-align: center;
    font-weight: 400;
}

.act_weekstar .currentweek_time span {
    display: inline-block;
    width: 46px;
    height: 46px;
    line-height: 46px;
    margin: 0 8px;
    vertical-align: middle;
    background: #6B13EB;
    border-radius: 10px;
    font-size: 30px;
    font-weight: 700;
}

.act_weekstar .currentweek_content__box {
    width: 670px;
    background-color: #fff;
    border-radius: 20px;
    margin-top: 8px;
    margin-bottom: 32px;
    overflow: hidden;
    min-height: 410px;
}

.act_weekstar .cur_week_best {
    width: 670px;
    height: 90px;
    background-image: linear-gradient(270deg, #FF3BE9 0%, #A317FF 100%);
    border-radius: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: #FFFFFF;
    font-size: 24px;
}

.act_weekstar .h_best_icon {
    font-size: 22px;
    font-weight: 600;
    margin: 0 20px;
}

.act_weekstar .head_rank_avatar.h_best_img {
    width: 60px;
    height: 60px;
}

.act_weekstar .best_name {
    font-weight: 500;
    margin-left: 15px;
}

.act_weekstar .best_count {
    font-weight: 400;
    text-align: right;
    padding-right: 25px;
    flex: 1;
}

.act_weekstar .act_score_list {
    padding: 10px 25px 15px 0;
    position: relative;
}

.act_weekstar .act_score_item {
    padding: 10px 0;
    white-space: nowrap;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.act_weekstar .act_num,
.act_weekstar .act_head,
.act_weekstar .act_info,
.act_weekstar .act_user,
.act_weekstar .act_user_accout {
    display: inline-block;
    vertical-align: middle;
}

.act_weekstar .act_score_item .act_num {
    width: 90px;
    margin-right: 40px;
    height: 55px;
    line-height: 55px;
    text-align: center;
    font-size: 28px;
    color: #000000;
    font-weight: 700;
}

.act_weekstar .act_score_list .act_score_item:nth-child(-n+3) .act_num {
    text-indent: -9999em;
    overflow: hidden;
    background: url('../img/weekstar/spr_main.png') no-repeat -2px 100%/190px;
}

.act_weekstar .act_score_list .act_score_item:first-child .act_num {
    background-position: -2px 100%;
}

.act_weekstar .act_score_list .act_score_item:nth-child(2) .act_num {
    background-position: -3px 0;
}

.act_weekstar .act_score_list .act_score_item:nth-child(3) .act_num {
    background-position: -102px 0;
}

.act_weekstar .head_rank_avatar.act_head {
    width: 90px;
    height: 90px;
    border: 2px solid #FF7200;
}

.act_weekstar .act_info {
    width: 200px;
    margin: 0 1px;
}

.act_weekstar .act_name,
.act_weekstar .act_desc {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.act_weekstar .act_name {
    font-size: 24px;
    color: #000000;
    font-weight: 500;
    max-width: 168px;
    vertical-align: middle;
}

.act_weekstar .act_desc_box {
    line-height: 40px;
    font-size: 22px;
    color: #000000;
    font-weight: 400;
}

.act_weekstar .act_desc {
    vertical-align: middle;
    line-height: 41px;
}

.act_weekstar .act_desc_img {
    display: inline-block;
    vertical-align: middle;
    width: 40px;
    height: 40px;
    border: 1 solid #6B00FF;
    margin-left: 1px;
}

.act_weekstar .act_desc_img img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.act_weekstar .act_user_accout {
    font-size: 24px;
    color: #000000;
    text-align: right;
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.act_weekstar .act_more {
    padding-bottom: 32px;
    display: block;
    text-align: center;
    font-size: 22px;
    color: #000;
    font-weight: 400;
    line-height: 32px;
}

.act_weekstar .act_more .act_more_btn {
    display: inline-block;
    vertical-align: middle;
    width: 32px;
    height: 32px;
    background: url('../img/weekstar/reload.png') no-repeat center/100%;
}

.act_weekstar .act_empty_wp {
    width: 100%;
    padding: 180px 0;
    font-size: 30px;
    color: #6B00FF;
    text-align: center;
}

.act_weekstar .act_empty_wp .act_empty_icon {
    margin: 0 auto;
}

.act_weekstar .act_empty_wp p {
    padding-top: 10px;
}

.act_weekstar .act_mine.act_score_item {
    width: 750px;
    height: 160px;
    background-image: linear-gradient(180deg, #9E6DFF 0%, #7951FF 100%);
    box-shadow: inset 0px 2px 0px 0px rgba(255, 255, 255, 1);
    box-sizing: border-box;
    position: fixed;
    left: 0;
    bottom: -2px;
    z-index: 99;
    border-radius: 0 0 20px 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.act_weekstar .act_mine.act_score_item .act_num {
    width: 80px;
    margin-right: 0;
}

.act_weekstar .act_mine.act_score_item .act_name,
.act_weekstar .act_mine.act_score_item .act_desc,
.act_weekstar .act_mine.act_score_item .act_week_p {
    color: #fff;
    font-size: 20px;
    font-weight: 400;
    height: 28px;
    line-height: 28px;
}

.act_weekstar .act_mine.act_score_item .act_num {
    color: #fff;
    font-size: 28px;
    font-weight: 600;
}

.act_weekstar .act_mine.act_score_item .act_name {
    font-size: 28px;
    font-weight: 500;
    height: 40px;
    line-height: 40px;
}

.act_weekstar .act_mine.act_score_item .act_info {
    width: auto;
    margin-right: 0;
}

.act_weekstar .act_mine.act_score_item .act_week_p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.act_weekstar .act_mine.act_score_item .act_week_p span:first-child {
    padding-right: 7px;
}

.act_weekstar .act_givelove_btn {
    position: absolute;
    right: 18px;
    top: 14px;
    display: inline-block;
    padding: 4px 12px 4px 4px;
    height: 78px;
    border: 4px solid #ab49f9;
    border-radius: 78px;
    box-sizing: border-box;
    background: linear-gradient(to right, #ff922d 0%, #fce12c 100%);
}

.act_weekstar .act_givelove_icon,
.act_weekstar .act_givelove_info {
    vertical-align: top;
    display: inline-block;
}

.act_weekstar .act_givelove_icon {
    width: 62px;
    height: 62px;
    background: #fff;
    border-radius: 62px;
}

.act_weekstar .act_givelove_icon img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

.act_weekstar .act_givelove_info {
    position: relative;
    top: 6px;
}

.act_weekstar .act_givelove_info_p1 {
    font-size: 26px;
    color: #8726FF;
    line-height: 1.1;
}

.act_weekstar .act_givelove_info_p2 {
    font-size: 20px;
    color: #AC4012;
    line-height: 1.1;
}

.act_weekstar .toplist_container .week_inner_container {
    padding: 20px 0;
    min-height: 500px;
}

.act_weekstar .toplist_celebrity_item {
    width: 670px;
    height: 192px;
    margin: 8px 0;
    overflow: hidden;
    background: url(../img/weekstar/sprite.png) no-repeat -76px -79px / 854px;
}

.act_weekstar .toplist_celebrity_item .head_rank_title {
    height: 34px;
    line-height: 34px;
    margin: 10px 0;
    font-size: 22px;
    color: #FFFE93;
    letter-spacing: 0;
    text-align: center;
    text-shadow: 0 2px 4px rgba(242, 137, 81, 0.65);
    font-weight: 700;
}

.act_weekstar .toplist_celebrity_content {
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
}

.act_weekstar .toplist_celebrity_content_item {
    width: 50%;
    height: 110px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.act_weekstar .toplist_celebrity_content_left {
    padding-left: 36px;
}

.act_weekstar .toplist_celebrity_content_right {
    padding-left: 25px;
}

.act_weekstar .toplist_celebrity_avatar {
    width: 110px;
    height: 110px;
    text-align: center;
    line-height: 110px;
}

.act_weekstar .toplist_celebrity_avatar img {
    display: inline-block;
    vertical-align: middle;
    width: 90px;
    height: 90px;
    border-radius: 50%;
}

.act_weekstar .toplist_celebrity_content_left .toplist_celebrity_avatar {
    background: url(../img/weekstar/sprite.png) no-repeat -80px -304px / 854px;
}

.act_weekstar .toplist_celebrity_content_right .toplist_celebrity_avatar {
    background: url(../img/weekstar/sprite.png) no-repeat -396px -304px / 854px;
}

.act_weekstar .toplist_celebrity_desc {
    margin-left: 8px;
    padding-top: 18px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.act_weekstar .toplist_celebrity_badge {
    padding: 0 15px;
    height: 32px;
    line-height: 32px;
    border: 1px solid #FFF7EA;
    border-radius: 16px;
    font-size: 22px;
    color: #FFFFFF;
    letter-spacing: 0;
    text-align: center;
    font-weight: 400;
}

.act_weekstar .toplist_celebrity_content_left .toplist_celebrity_badge {
    background-image: linear-gradient(-45deg, #FF7200 0%, #FF3C00 100%);
}

.act_weekstar .toplist_celebrity_content_right .toplist_celebrity_badge {
    background-image: linear-gradient(-45deg, #7951FF 0%, #460FFF 100%);
}

.act_weekstar .toplist_celebrity_name {
    width: 188px;
    height: 42px;
    font-size: 30px;
    color: #AC4012;
    letter-spacing: 0;
    font-weight: 400;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.act_weekstar .toplist_celebrity_act_more {
    padding-top: 30px;
}

.act_weekstar .rule_box {
    width: 100%;
}

.act_weekstar .rule__g01 {
    width: 750px;
    height: 504px;
    background: url(../img/weekstar/play1.png) no-repeat center/100%;
}

.act_weekstar .rule__g02 {
    width: 750px;
    height: 1318px;
    background: url(../img/weekstar/play2.png) no-repeat center/100%;
}

.act_weekstar .rule__g03 {
    width: 750px;
    height: 756px;
    background: url(../img/weekstar/play3.png) no-repeat center/100%;
}

.act_weekstar .rule__g04 {
    width: 750px;
    height: 1714px;
    background: url(../img/weekstar/play4.png) no-repeat center/100%;
}

.act_weekstar .rule__g05 {
    width: 750px;
    height: 1434px;
    background: url(../img/weekstar/play5.png) no-repeat center/100%;
}

.act_weekstar .rule__g06 {
    width: 750px;
    height: 970px;
    background: url(../img/weekstar/play6.png) no-repeat center/100%;
}

.act_weekstar_web_out_container {
    width: 100%;
    height: 100%;
    margin: 0;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background: rgba(0, 0, 0, .6);
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.act_weekstar.act_weekstar_web_out_wrapper {
    width: 750px;
    height: 100vh;
    overflow: visible;
    transform: scale(0.5);
    transform-origin: center center;
}

.act_weekstar .act_weekstar_room {
    width: 750px;
    height: 100vh;
    overflow-y: scroll;
    overflow-x: hidden;
}

.act_weekstar .act_side {
    position: fixed;
    z-index: 10;
    top: 35%;
    right: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.act_weekstar .act_side_btn {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 42px;
    height: 124px;
    border: 4px solid #fddff2;
    color: #fff;
    font-size: 22px;
    font-weight: bold;
    line-height: 1.1;
    text-align: center;
    background: #7951ff;
    border-radius: 20px 0 0 20px;
    margin-bottom: 30px;
}

.act_weekstar .act_side_btn.act_side_refresh {
    height: 80px;
}

.wstar_in {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background: url(../img/play/weekstar/week_star_icon.png) no-repeat;
    background-size: 36px 36px;
    left: 0;
    top: 0;
    overflow: hidden;
    text-indent: -999em;
}

.act_weekstar .act_weekstar_close {
    display: block;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAtFBMVEUAAADZTe3ZTe3ZTe3ZTe3ZTe3ZTe3ZTe3ZTe3ZTe3ZTe3ZTe3ZTe3ZTe3ZTe3ZTe3ZTe3ZTe3ZTe3ZTe3ZTe3ZTe3ZTe3ZTe3ZTe3ZTe3ZTe3ZTe3ZTe3ZTe3ZTe3ZTe3ZTe3ZTe3ZTe3ZTe3ZTe3ZTe3////88v7aUe3tq/fhcPHgb/Dzx/nzxvnro/b++v/76/3ywfnhdPH55Pz43fz10Prwuvjur/fplvTfavDeY+/dYO8bNnAQAAAAJXRSTlMA6/rTYf788OLDvINpT0PKta6kWSYaAvbOcTYzLB/YeT07HhEENqWKTAAAASVJREFUOMt10ed2gkAQhuEPREAU7DWaPigmwZKe3P99BZzZsyxZnj/O8R3KHlD3gGZ33Y5DRE6nu7LUR++atNZ4BtNVi0z9tdF7LtXNPWhdsmgv9fVk1R6r57tkN59c+mxBpXP2rdOOfzooefzXNt3uVT6lnzzFKMgBj6na2L0Uo77FitjTttyQnubEJnJEvcE9I7EEIjI2ztLFEAjJ2Eilixbgk7khXTiYUcXuveiHPWkB4Fb6c9HlLMIBQrN/yGn1OwyMnqnTihFwY3YyN3rAWsYTd9l4lS++AdDn+cBdNt54ilCIec6POSk/X788JChF1GSIi0nQ0J0pWOxbu5tA8XxbH0OLg//3T1C1GdTfb4qaJGqT4g9uYXHfGy3CIOyPvMrVf+NQbCjF6igbAAAAAElFTkSuQmCC') no-repeat;
    background-size: 60px 60px;
    width: 60px;
    height: 60px;
    position: absolute;
    top: -60px;
    right: -60px;
}