@CHARSET "UTF-8";
@charset "utf-8";
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
    background: #110101;
	/*text-align:center;*/
	
}
body, html {
    font-family: "Microsoft YaHei";
    width: 100%;
    height: 1461px;
    background: #110101;
    color: #424242;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
a {
    text-decoration:none;
    color: #333;
}
body, html {
    font-family: "微软雅黑", "Microsoft YaHei";
    width: 100%;
    height: 800px;
    background: #fff;
}
.width{
    min-width: 1200px;
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;
}
.page{
    width:100%;
    height:100%;
    min-width: 1200px;
}
.page .title{
    height: 60px;
}
.page .title .logo{
    width: 244px;
    height: 68px;
    float: left;
    background: url(http://i0.sinashow.com/uc/show7.0/logo.jpg) no-repeat center center;
    background-size: 100%;
}
.page .title ul.dh{
    width: 252px;
    height: 60px;
    line-height: 60px;
    float: left;
    margin-left: 32px;
    font-size: 18px;
    color: #333;
    display: block;
}
.page .title ul.dh li{
    float: left;
    list-style-type: none;
    width: 84px;
    text-align: center;
}
.page .title ul.dh li.active{
    color: #d83cfb;
}
.page .title div.search{
    width:220px;
    height: 26px;
    border: 1px solid #e6e6e6;
    float: right;
    margin-right:290px;
    margin-top: 16px;
    border-radius: 13px;
    overflow: hidden;
}
.page .title div.search input{
    float: left;
    margin-left: 12px;
    border: 0;
    line-height: 26px;
    height: 26px;
    width: 178px;
    color: #ccc;
    font-size: 12px;
    border:none;
    outline: none;
}
.page .title div.search div.text{
    width: 200px;
    height: auto;
    border: 1px solid #e6e6e6;
    z-index: 300;
    position: absolute;
    background: #fff;
    margin-top: 26px;
    margin-left: 10px;
    border-radius: 5px;
    display: none;
}
.page .title div.search div.text div{
    font-size: 12px;
    text-indent: 5px;
    color: #666;
    line-height: 20px;
}
.page .title div.search button{
    cursor: pointer;
    width:14px;
    height:15px;
    float: left;
    display: block;
    margin-top:5.5px;
    margin-left:6px;
    border: 0;
    outline: 0;
    background: url("../../images/room/search.png") no-repeat;
}
.page .title div.download{
    width: 132px;
    height: 32px;
    float: right;
    margin-right: 140px;
    margin-top: -32px;
    background: url("../../images/room/download.png");
    cursor: pointer;
}
.page .title a.texts {
    width: 132px;
    height: 32px;
    float: right;
    margin-right: 140px;
    margin-top: -32px;
    cursor: pointer;
    line-height: 32px;
    text-align: center;
    color: #059CFA;
}
.page .title div.download div{
    width: 140px;
    height: 218px;
    background: url(../../images/room/downBox.png) no-repeat center center;
    position: absolute;
    margin-top:32px;
    z-index: 10000;
    display: none;
}
.page .title div.download div a{
    width: 118px;
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    color: #fff;
    text-indent: 32px;
    display: block;
    border: none;
    outline: none;
}
.page .title div.download div a.pc{
    background: url(../../images/room/pcDown.png) no-repeat center center;
    margin: 18px auto 0;
}
.page .title div.download div a.phone{
    background: url(../../images/room/phoneDown.png) no-repeat center center;
    margin: 8px auto 0;
}
.page .title div.download div img{
    width: 116px;
    height: 116px;
    display: block;
    margin: 8px auto 0;
    border: none;
    outline: none;
}
.page .title div#log{
    width: 124px;
    float: right;
    height: 40px;
    color: #d83cfb;
    margin-top: -34px;
    overflow: hidden;
}

.page .title div#log div#mp{
    width: 272px;
    height: 322px;
    border-radius: 20px;
    background: #fff;
    margin-top:42px;
    position: absolute;
    border: 1px solid #dbdbdb;
    margin-left: -124px;
    z-index: 900;
    display: none;
    overflow: hidden;
}
.page .title div#log div img{
    display: block;
    width: 100px;
    height:100px;
    border-radius: 100%;
    border: 2px solid #dbdbdb;
    margin: 22px auto 0;
}
.page .title div#log div span#logout{
    display: block;
    width: 30px;
    height: 22px;
    line-height: 22px;
    color: #999;
    font-size: 12px;
    text-align: center;
    cursor: pointer;
    position: absolute;
    margin-top: 6px;
    margin-left: 230px;
}
.page .title div#log div p{
    text-align: center;
}
.page .title div#log div p.nameNick{
    font-size: 16px;
    color: #333;
    margin-top: 6px;
}
.page .title div#log div p.userID{
    font-size: 12px;
    color: #666;
    margin-top: 6px;
	line-height: 20px;
}
.page .title div#log div div.leval{
    width: 244px;
	height: 22px;
	margin: 6px auto 0;
}
.page .title div#log div.leval span.lev1{
      width: 42px;
      height: 22px;
      float: left;
      display: block;
      background: url(../../images/room/contribution/lev0.png) no-repeat center center;
      background-size: 100%;
  }
.page .title div#log div.leval span.lev2{
    width: 42px;
    height: 22px;
    float: left;
    display: block;
    background: url(../../images/room/contribution/lev1.png) no-repeat center center;
    background-size: 100%;
}
.page .title div#log div.leval span.lev3{
    width: 42px;
    height: 22px;
    float: left;
    display: block;
    background: url(../../images/room/contribution/lev2.png) no-repeat center center;
    background-size: 100%;
}
.page .title div#log div.leval span.lev4{
    width: 42px;
    height: 22px;
    float: left;
    display: block;
    background: url(../../images/room/contribution/lev3.png) no-repeat center center;
    background-size: 100%;
}
.page .title div#log div.leval span.lev5{
    width: 42px;
    height: 22px;
    float: left;
    display: block;
    background: url(../../images/room/contribution/lev4.png) no-repeat center center;
    background-size: 100%;
}
.page .title div#log div.leval span.lev6{
    width: 42px;
    height: 22px;
    float: left;
    display: block;
    background: url(../../images/room/contribution/lev5.png) no-repeat center center;
    background-size: 100%;
}
.page .title div#log div.leval span.lev7{
    width: 42px;
    height: 22px;
    float: left;
    display: block;
    background: url(../../images/room/contribution/lev6.png) no-repeat center center;
    background-size: 100%;
}
.page .title div#log div.leval span p{
	font-size: 12px;
	text-indent: 22px;
	line-height:22px;
	color: #fff;	
}
.page .title div#log div.leval div.bar{
	width: 142px;
	height: 5px;
	border-radius: 2.5px;
	background: #efefef;
	margin-left: 10px;
	margin-top: 9px;
	float:left;
}
.page .title div#log div.u{
	width: 222px;
	height: 32px;
	margin: 11px auto 0;
}
.page .title div#log div.u span{
    display: block;
    width: 32px;
    height: 32px;
    background: url("../../images/room/u.png") no-repeat center center;
    background-size: 100%;
    float: left;
}
.page .title div#log div.u p{
    display: block;
    float: left;
    margin-left: 8px;
    line-height: 32px;
    color: #df6401;
    font-size: 14px;

}
.page .title div#log div.line{
    width: 222px;
    height: 2px;
    background: #efefef;
    margin: 20px auto 0;
}
.page .title div#log a.gr{
    line-height: 48px;
    color: #666;
    text-align: center;
    font-size: 14px;
    width: 70px;
    margin:0 auto;
    display: block;
}
.page .title div#log a.gr span{
    width: 8px;
    height: 14px;
    display: block;
    float: right;
    background: url(../../images/room/rj.png) no-repeat center center;
    background-size: 100%;
    margin-top: 17px;
}
.page .title div#log div.u a#payU{
    width: 48px;
    height: 28px;
    float: right;
    display: block;
    border: none;
    outline: none;
    border-radius: 5px;
    margin-top: 2px;
    color: #fff;
    font-size: 14px;
    text-align: center;
    line-height: 28px;
    background: #d83cfb;
}
.page .title div#log div.leval span.right{
	float: right;
}
.page .title div#log div.leval div.bar i{
	width: 50%;
	height: 5px;
	display: block;
	border-radius: 2.5px;
	background: #d83cfb;
}
.page .title div#log div div.level span img{
	width: 42px;
	height: 22px;
}
.page .title div#log img.hd{
    width: 38px;
    height: 38px;
    /*vertical-align: middle;*/
    border: 1px solid #d83cfb;
    border-radius: 100%;
    margin-right:2px;
    float: left;
    cursor: pointer;
}
.page .title div#log p.nick{
    width: 80px;
    line-height: 40px;
    float: left;
    text-overflow : ellipsis;
    white-space : nowrap;
    overflow : hidden;
    cursor: pointer;
}
.page .title div.login{
    width:120px;
    height: 30px;
    border: 1px solid #d83cfb;
    border-radius: 16px;
    text-align: center;
    font-size: 14px;
    /*margin-top: -32px;*/
    line-height: 32px;

}
.page .title div.login a{
    color: #d83cfb;
}
.footer{
    height: 300px;
    background: #fff;
    overflow: hidden;
}
.footer p{
    color: #333;
    font-size: 16px;
    line-height: 28px;
    text-align: center;
}
.footer p:nth-child(1){
    margin-top: 50px;
}
.masks{display:block;width: 100%;height: 1024px;position: absolute;top: 0;left:0;background: #000;opacity: 0.5; top:0;  left:0;filter:alpha(opacity=30);z-index: 500;}
.error{display:none;width:3rem;height:0.8rem;line-height: 0.8rem;background:#000;color:#fff;border-radius: 0.5rem;position: absolute;left: 50%;top: 50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);
    z-index: 1000;
    text-align: center;
    height:30px;
    line-height:30px;
    width:200px;
    font-size:12px;
}
.playend {
    width:418px;
    height: 524px;
    background: url(../../images/room/playendbg.png) no-repeat center center;
    background-size: 100%;
    position: absolute;
    top: 30%;
    left: 50%;
    margin-left: -209px;
    overflow: hidden;
    z-index: 800;
}
.playend img{
    width: 84px;
    height: 84px;
    border-radius: 100%;
    margin: 40px auto 0;
    display: block;
}
.playend .user{
    height: 54px;
    text-align: center;
    font-size: 16px;
    color: #fff;
    margin: 10px auto 0;
}
.playend .user p{
    line-height: 27px;
}
.playend .end{
    height: 56px;
    line-height: 56px;
    font-size: 28px;
    color: #fff;
    text-align: center;
}
.playend .line{
    /*height: 1px;*/
    width: 226px;
    border: 1px solid #fb9ac9;
    margin: 8px auto 0;
}
.playend .nums{
    height: 64px;
    color: #fff;
    margin: 10px auto 0;
    text-align: center;
    line-height: 32px;
}
.playend .nums p:nth-child(1) {
    font-size: 16px;
    color: #ffc0e7;
}
.playend .nums p:nth-child(2) {
    font-size: 32px;
    color: #fff;
    font-weight: bold;
}
.playend .button{
    width: 222px;
    height: 42px;
    margin: 32px auto 0;
}
.playend .button button{
    width:102px;
    height: 42px;
    border-radius: 5px;
    font-size: 16px;
    line-height: 42px;
    text-align: center;
    outline: none;
    border: none;
    cursor: pointer;
}
.playend .button button#break{
    background: #fbde3c;
    color: #eb8725;
    display: block;
    float: left;
}
.playend .button button#follow{
    background: #d83cfb;
    color: #fff;
    display: block;
    float: right;
}

/*控制栏*/
div#contro{
    width: 100%;
    height: 54px;
    background: rgba(0,0,0,0.4);
    position: relative;
    z-index: 200;
    overflow: hidden;
    margin-top: -54px;
    display: none;
}
/*已滑动样式*/

/*旋转*/
div#contro div#rotate{
    width: 27px;
    height: 21px;
    background: url(../../images/room/rotate.png) no-repeat;
    background-size: 100%;
    margin-top: 16px;
    margin-left: 18px;
    float: left;
    cursor: pointer;
}
/*!*喇叭按纽*!*/
div#contro div#horn{
    width:21px;
    height: 18px;
    background: url(../../images/room/hornon.png) no-repeat;
    margin-top:18px;
    margin-left:20px;
    float: left;
    cursor: pointer;
}
/*!*音量控制*!*/
/*input[type=range]{*/
    /*outline: none; !*去掉点击时出现的外边框*!*/
    /*-webkit-appearance: none;*/
    /*-moz-appearance: none;*/
    /*appearance: none; !*这三个是去掉那条线原有的默认样式，划重点！！*!*/
    /*width: 140px;*/
    /*height: 6px;*/
    /*margin-top: 24px;*/
    /*margin-left: 10px;*/
    /*float: left;*/
    /*border-radius: 3px;*/
    /*border:none;*/
    /*background: -webkit-linear-gradient(#ffcdfb, #ffcdfb) no-repeat, #584748;*/
    /*background-size: 30% 100%;*/
/*}*/

/*!*音量条*!*/
/*input[type=range]::-webkit-slider-runnable-track{*/
    /*width: 100%;*/
    /*height: 6px;*/
    /*border-radius: 3px;*/
    /*border: none;*/
/*}*/
/*!*滑块*!*/
/*input[type=range]::-webkit-slider-thumb{*/
    /*!*::-webkit-slider-thumb是代表给滑块的样式进行变更*!*/
    /*-webkit-appearance: none;*/
    /*-moz-appearance: none;*/
    /*appearance: none; !*这三个是去掉滑块原有的默认样式，划重点！！*/
    /*width: 14px;*/
    /*height: 14px;*/
    /*border-radius: 100%;*/
    /*background: #fff;*/
    /*margin-top: -4px;*/
    /*cursor: pointer;*/
/*}*/
/*input[type=range]::-ms-fill-lower {*/
    /*!*进度条已填充的部分*!*/
    /*height: 6px;*/
    /*border-radius: 10px;*/
    /*background: linear-gradient(to right, #059CFA, white 100%, white);*/
/*}*/

/*input[type=range]::-ms-fill-upper {*/
    /*!*进度条未填充的部分*!*/
    /*height: 6px;*/
    /*border-radius: 10px;*/
    /*background: #584748;*/
/*}*/
/*input[type=range]:focus::-ms-fill-lower {*/
    /*background: linear-gradient(to right, #059CFA, white 100%, white);*/
/*}*/

/*input[type=range]:focus::-ms-fill-upper {*/
    /*background: #584748;*/
/*}*/

/**
音量条控制
*/
div#contro div#range{
    width: 140px;
    height:6px;
    margin-top: 24px;
    margin-left: 15px;
    float: left;
    border-radius: 3px;
    border:none;
    /*background: -webkit-linear-gradient(#ffcdfb, #ffcdfb) no-repeat, #584748;*/
    /*background-size: 30% 100%;*/
}
/*已滑动样式*/
.ui-slider-horizontal .ui-slider-range-min {
    border-radius: 3px;
    background: #ffcdfb;
}
/*滑动块样式*/
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default{
    width: 14px !important;
    height: 14px !important;
    border-radius: 100% !important;
    background: #fff !important;
    border:none;
    outline: none;
    /*margin-top: -4px !important;*/
    cursor: pointer !important;
}
/*充值弹窗*/
.payBox {
    width: 261px;
    height:161px;
    background-image:-webkit-linear-gradient(to right, #f58872, #dd71db);
    background-image:linear-gradient(to right,#f58872,#dd71db);
    border: none;
    outline: none;
    border-radius: 5px;
    top: 40%;
    left: 50%;
    margin-left: -130px;
    position: absolute;
    z-index: 9999;
    display: none;
}
.payBox a.close{
    display: block;
    width: 12px;
    height: 12px;
    float: right;
    margin-top: 10px;
    margin-right:10px;
    background: url(../../images/room/close1.png) no-repeat center center;
    background-size: 100%;
}
.payBox div{
    height: 28px;
    line-height: 28px;
    color: #fff;
    font-size: 16px;
    text-align: center;
    margin-top: 38px;
}
.payBox a.pay{
    width: 200px;
    height: 36px;
    border-radius: 18px;
    border: none;
    outline: none;
    display: block;
    margin: 36px auto 0;
    background: #f8d7ff;
    color: #d83cfb;
    font-size: 16px;
    line-height: 36px;
    text-align: center;
}
.zhongjiang {
    width: 224px;
    height: 252px;
    background: url(../../images/room/123.png) no-repeat scroll 0 0;
    overflow: hidden;
    position: absolute;
    z-index: 900;
    margin-top: 35%;
    margin-left: 22%;
    animation:  downAn 0.5s, up 1s 0.5s steps(1);
    -webkit-animation: downAn 0.5s, up 1s 0.5s steps(1);
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
    display: none;
}
.zhongjiang .pic{
    margin: 0 auto 0;
    height: 23px;
    text-align: center;
    width: 54px;
}
.zhongjiang .pic img{
    width: 24px;
    height: 23px;
    display: block;
    float: left;
    vertical-align: middle;
}
.zhongjiang .pic img.num{
    width: 15px;
    height: 17px;
    margin-top: 4.5px;
}
.zhongjiang .nickname {
    width: 44px;
    height: 20px;
    color: #fff;
    font-size: 14px;
    margin-top: 106px;
    margin-left: 88px;
    line-height: 20px;
    text-align: center;
}
@keyframes downAn{
    0%{
        display: block;
        transform: scale(2)
    }
    100%{
        transform: scale(1)
    }
}
@keyframes up{
    0%{
        background: url(../../images/room/123.png) no-repeat scroll -223px 0;
    }
    5.9% {
        background: url(../../images/room/123.png) no-repeat scroll -446px 0;
    }
    11.8% {
        background: url(../../images/room/123.png) no-repeat scroll -669px 0;
    }
    17.7% {
        background: url(../../images/room/123.png) no-repeat scroll -892px 0;
    }
    23.6% {
        background: url(../../images/room/123.png) no-repeat scroll -1115px 0;
    }
    29.5% {
        background: url(../../images/room/123.png) no-repeat scroll -1338px 0;
    }
    25.4% {
        background: url(../../images/room/123.png) no-repeat scroll -1561px 0;
    }
    41.3% {
        background: url(../../images/room/123.png) no-repeat scroll -1784px 0;
    }
    47.2% {
        background: url(../../images/room/123.png) no-repeat scroll -2007px 0;
    }
    53.1% {
        background: url(../../images/room/123.png) no-repeat scroll -2230px 0;
    }
    59% {
        background: url(../../images/room/123.png) no-repeat scroll -2453px 0;
    }
    64.9% {
        background: url(../../images/room/123.png) no-repeat scroll -2676px 0;
    }
    70.8% {
        background: url(../../images/room/123.png) no-repeat scroll -2899px 0;
    }
    76.7% {
        background: url(../../images/room/123.png) no-repeat scroll -3122px 0;
    }
    82.6% {
        background: url(../../images/room/123.png) no-repeat scroll -3345px 0;
    }
    88.5% {
        background: url(../../images/room/123.png) no-repeat scroll -3568px 0;
    }
    94.40% {
        background: url(../../images/room/123.png) no-repeat scroll -3791px 0;
    }
    100% {
        background: url(../../images/room/123.png) no-repeat scroll -4014px 0;
    }

}
button.cla{
    width: 40px;
    height: 20px;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    outline: none;
    border-radius: 3px;
    line-height: 20px;
    font-size: 12px;
    color: #fff;
    text-align: center;
    position: absolute;
    margin-left: 264px;
    cursor: pointer;
}
button.clear{
   /*top: 680px;*/
    top: 620px;
    display: none;
}
button.lock{
    /*top: 710px;*/
    top:650px;
    display: none;
}
/*用户升级提示框*/
.levelbox {
    width: auto;
    height: 30px;
    line-height: 30px;
    position: absolute;
    margin-top: 600px;
    left: -100%;
    background: rgba(0, 0, 0, 0.5);
     /*background: red;*/
    border-radius: 15px;
    overflow: hidden;
}
.levelbox p{
    margin-left: 5px;
    margin-right: 5px;
    color: #fff;
    font-size: 12px;
    float: left;
}
.levelbox span.img{
    width: 40px;
    height:  20px;
    background: url(../../images/room/contribution/lev0.png) no-repeat center center;
    background-size: 100%;
    float: left;
    display: block;
    margin-top: 5px;
    font-size: 14px;
    color:  #fff;
    text-indent: 20px;
    line-height: 20px;
}
.levelbox span.name{
    float: left;
    margin-left: 5px;
    color: #fdf173;
    font-size: 12px;
    display: block;
}
#footer {
    width: 100%;
    text-align: center;
    background: #fff;
    height: 40px;
    line-height: 30px;
    font-size: 12px;
    color: #999;
    letter-spacing: 1px;
    padding-top: 60px;
    height: 122px;
}