* {
    margin: 0;
    padding: 0;
}

*:focus {
    outline: none;
}

html {
    font-size: 62.5%;
}

body {
    font: 500 1.2rem/160% Microsoft YaHei, Arial, Helvetica, sans-serif;
    color: #222;
    margin: 0;
    padding: 0;
    background: #fff;
}

form, ul, ol, li, a, input, p, em, label, select, textarea, h1, h2, h3, h4, img {
    margin: 0;
    padding: 0;
    list-style: none;
    border: none;
    outline: none;
}

body, div, ul, form, ol, ul, li, a, a:focus, a:hover, input, p, span, i, h1, h2, h3 {
    tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -moz-tap-highlight-color: rgba(0, 0, 0, 0);
}

a {
    text-decoration: none;
}

p {
    clear: both;
}

.page {
    display: none;
    width: 100%;
    height: 100%;
    position: relative;
    top: 0;
    left: 0;
}

#channel_list {
    z-index: 10;
    overflow: hidden;
}

#channel_programs_list {
    z-index: 20;
}

/*=============header===========*/
.header {
    width: 100%;
    min-width: 320px;
    background: #f0eeee;
    border-bottom: 1px solid #b1b1b1;
    height: 54px;
}

.detailsHeader {
    background: #fff;
    border-bottom-color: #fff;
    padding-top: 8px;
}

.header h1 {
    font-size: 2rem;
    font-weight: 600;
    color: #545454;
    height: 54px;
    line-height: 54px;
    text-align: center;
    text-shadow: 1px 1px 1px #f4f4f4;
}

.header h1.controlTitle {
    color: #fff;
    position: relative;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .4);
    box-shadow: 0 1px #4e494d, inset 0 -1px 1px rgba(0, 0, 0, .33);
    background-image: -webkit-linear-gradient(bottom, #292929, #2d2d2d);
    background-image: -moz-linear-gradient(bottom, #292929, #2d2d2d);
    background-image: -o-linear-gradient(bottom, #292929, #2d2d2d);
    background-image: linear-gradient(to top, #292929, #2d2d2d);
    background-color: #292929;
}

.searchHeader {
    margin-top: 55px;
}

.controlBack {
    width: 12px;
    height: 24px;
    background: url(../images/back2.png) no-repeat;
    background-size: 100% 100%;
    text-indent: -9999px;
    float: left;
    margin: 14px;
    position: absolute;
    left: 0;
    top: 0;
}

.header h1 .text {
    margin: 0 90px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.header h1.controlTitle .text {
    margin: 0 40px;
}

.header h1 .text i {
    width: 12px;
    height: 6px;
    background: url(../images/arrow_down.png) no-repeat;
    background-size: 100% 100%;
    margin-left: 4px;
    position: relative;
    top: -2px;
    display: inline-block;
}

.header .search {
    display: block;
    padding: 5px 20px;
    overflow: hidden;
}

.search .searchInput {
    width: 70%;
    position: relative;
    float: left;
}

.search .searchInput input[type="text"] {
    position: relative;
    z-index: 0;
    border-radius: 30px;
    border: 1px solid #a8b0b1;
    height: 19px;
    line-height: 19px;
    text-indent: 15px;
    font-size: 2.2rem;
    color: #1a95cc;
}

.search .delete {
    z-index: 1;
    width: 27px;
    height: 27px;
    position: absolute;
    top: 7px;
    right: 4px;
    background: url(../images/search_icon.png) no-repeat;
    background-size: 100% 100%;
    text-indent: -9999px;
    display: none;
}

.search .searchButton {
    float: left;
    width: 24%;
    padding-left: 6%;
}

.search .button {
    border-radius: 8px;
}

.search .button a {
    display: block;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #eef0f8;
    font-size: 1.8rem;
    border-radius: 5px;
    background-image: -webkit-linear-gradient(bottom, #3c7df9, #34a5fc);
    background-image: -moz-linear-gradient(bottom, #3c7df9, #34a5fc);
    background-image: -o-linear-gradient(bottom, #3c7df9, #34a5fc);
    background-image: linear-gradient(to top, #3c7df9, #34a5fc);
    background-color: #34a5fc;
}

.header2 {
    height: 108px;
}

.absolute {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
}

.header .myBoxes {
    width: 80px;
    height: 34px;
    border: 1px solid #838787;
    position: relative;
    z-index: 3;
    top: -52px;
    float: right;
    margin: 7px 20px 0 0;
    border-radius: 8px;
}

.myBoxes > a {
    display: block;
    line-height: 30px;
    text-align: center;
    font-size: 1.6rem;
    color: #fff;
    border: 2px solid #aeadad;
    text-shadow: 2px 2px 1px #555;
    border-radius: 7px;
    background-color: #999898;
}

.myBoxes .boxes {
    width: 246px;
    border: 2px solid #a3a0a0;
    background: #dadada;
    border-radius: 8px;
    position: absolute;
    left: -174px;
    top: 50px;
    display: none;
}

.myBoxes .boxes ul {
    max-height: 300px;
    overflow: auto;
}

.myBoxes .boxes li {
    padding: 0 10px;
    text-align: center;
    height: 50px;
    line-height: 50px;
    font-size: 1.8rem;
    text-shadow: 1px 1px 1px #f4f4f4;
    border-bottom: 1px solid #999c9a;
    cursor: pointer;
}

.myBoxes .boxes li i {
    width: 26px;
    height: 20px;
    margin: 0 8px 0 0;
    position: relative;
    top: 5px;
    background: url(../images/selected.png) no-repeat;
    background-size: 100% 100%;
    display: none;
}

.myBoxes .boxes li.on i {
    display: inline-block;
}

.myBoxes .boxes li span {
    color: #515456;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 190px;
    display: inline-block;
}

.myBoxes .boxes li:last-child {
    border-radius: 0 0 7px 7px;
    background: #e8ebea;
    box-shadow: 1px -1px 5px #fff inset;
}

.myBoxes .boxes li:last-child span {
    display: inline-block;
    color: #7f8482;
    float: none;
    text-align: center;
}

.myBoxes .boxes > i {
    width: 34px;
    height: 16px;
    display: block;
    position: absolute;
    right: 16px;
    top: -15px;
    background: url(../images/icon.png) no-repeat -151px -2px;
}

.header .moreTv {
    padding: 5px 16px;
    height: 42px;
    border-bottom: 2px solid #b8b7b7;
    background-image: -webkit-linear-gradient(#f1f1f1, #d4d4d4);
    background-image: -moz-linear-gradient(#f1f1f1, #d4d4d4);
    background-image: -o-linear-gradient(#f1f1f1, #d4d4d4);
    background-image: -ms-linear-gradient(#f1f1f1, #d4d4d4);
    background-image: linear-gradient(#f1f1f1, #d4d4d4);
    background-color: #d4d4d4;
}

.moreTv .left {
    width: 170px;
    float: left;
}

.moreTv .logo {
    width: 43px;
    height: 43px;
    background: url(../images/moretv.png) no-repeat;
    background-size: 100% 100%;
    float: left;
}

.moreTv .text {
    padding: 3px 0 0 17px;
    float: left;
}

.moreTv .text p:first-child {
    font-size: 1.8rem;
    color: #535456;
}

.moreTv .text p:last-child {
    font-size: 12px;
    color: #7f8482;
    padding-top: 2px;
}

.moreTv .right {
    float: right;
    padding-top: 6px;
}

.moreTv .install {
    width: 62px;
    background: #d6d6d6;
    float: left;
    border-radius: 6px;
    box-shadow: 0 2px 2px #eee inset, 0 2px 1px #aaa9a9;
    height: 28px;
    line-height: 28px;
    text-align: center;
    border: 2px solid #aeadad;
    font-size: 1.8rem;
    color: #535456;
    text-shadow: 1px 1px 1px #f4f4f4;
}

.moreTv .close {
    width: 24px;
    height: 24px;
    float: left;
    margin: 7px 0 0 20px;
    background: url(../images/close.png) no-repeat;
    background-size: 100% 100%;
}

/*=============layout main===========*/
.layout {
    width: 100%;
    min-width: 320px;
}

.fixedTop {
    padding-top: 54px;
}

.pin {
    position: relative;
    z-index: 22;
}

.pin input[type="text"] {
    border: 1px solid #8c8a8a;
    font-size: 1.8rem;
    height: 22px;
    line-height: 22px;
    color: #babec1;
    box-shadow: 0 0 5px rgba(0, 0, 0, .1);
}

.pin input[type="text"].blue {
    color: #1a95cc;
}

.pin .button {
    width: 100%;
    margin-top: 16px;
    border-radius: 8px;
}

.pin .button a {
    display: block;
    padding: 10px 0;
    float: left;
    width: 48%;
    text-align: center;
    height: 22px;
    line-height: 18px;
    color: #eef0f8;
    font-size: 1.8rem;
    border-radius: 5px;

}

.pin .button a.cancel {
    background-image: -webkit-linear-gradient(bottom, #5a5a58, #818681);
    background-image: -moz-linear-gradient(bottom, #5a5a58, #818681);
    background-image: -o-linear-gradient(bottom, #5a5a58, #818681);
    background-image: linear-gradient(to top, #5a5a58, #818681);
    background-color: #5a5a58;
}

.pin .button a.join {
    margin-left: 4%;
    background-image: -webkit-linear-gradient(bottom, #3c7df9, #34a5fc);
    background-image: -moz-linear-gradient(bottom, #3c7df9, #34a5fc);
    background-image: -o-linear-gradient(bottom, #3c7df9, #34a5fc);
    background-image: linear-gradient(to top, #3c7df9, #34a5fc);
    background-color: #34a5fc;
}

.pin .close {
    width: 22px;
    height: 22px;
    position: absolute;
    top: -58px;
    right: -18px;
    background: url(../images/close_icon.png) no-repeat;
    background-size: 100% 100%;
    text-indent: -9999px;
    display: block;
}

.pin .warm {
    padding: 0;
    margin-bottom: 14px;
    font-size: 1.6rem;
    line-height: 24px;
    color: #fff;
    position: relative;
}

.pin .warm span {
    position: absolute;
    left: -12px;
    top: 3px;
}

.pin .sure {
    font-size: 1.4rem;
    color: #f6f6f6;
    padding-top: 10px;
    clear: both;
}

.pin .sure span {
    width: 5px;
    height: 5px;
    border-radius: 5px;
    background: #f6f6f6;
    float: left;
    margin: 10px 5px 0 0;
    overflow: hidden;
}

.pin .sure_jc {
    font-size: 1.4rem;
    color: #f6f6f6;
    padding-top: 10px;
    clear: both;
}

.pin .sure_jc span {
    width: 5px;
    height: 5px;
    border-radius: 5px;
    background: #f6f6f6;
    float: left;
    margin: 10px 5px 0 0;
    overflow: hidden;
}

/*.alert .button { width: 48%; border:1px solid #8c8b8a; margin-top:16px; border-radius: 8px; margin-bottom: 16px;}*/
.alert .b1 {
    float: right;
}

.alert .b2 {
    float: left;
}

.alert .button {
    width: 48%;
    margin-bottom: 15px;
}

.alert .button a {
    display: block;
    width: 100%;
    padding: 10px 0;
    text-align: center;
    height: 24px;
    line-height: 24px;
    color: #eef0f8;
    font-size: 2.0rem;
    border-radius: 7px;
    background-image: -webkit-linear-gradient(bottom, #3c7df9, #34a5fc);
    background-image: -moz-linear-gradient(bottom, #3c7df9, #34a5fc);
    background-image: -o-linear-gradient(bottom, #3c7df9, #34a5fc);
    background-image: linear-gradient(to top, #3c7df9, #34a5fc);
    background-color: #34a5fc;
}

.alert .close {
    width: 22px;
    height: 22px;
    position: absolute;
    top: -58px;
    right: -18px;
    background: url(../images/close_icon.png) no-repeat;
    background-size: 100% 100%;
    text-indent: -9999px;
    display: block;
}

/*======list===*/
.layout .sifting {
    width: 100%;
    border-bottom: 1px solid #e6eae9;
    overflow: hidden;
    position: relative;
}

.sifting .shade {
    width: 24px;
    height: 50px;
    position: absolute;
    top: 5px;
    right: 0;
}

.siftingContent {
    width: 100%;
    overflow-y: hidden;
    overflow-x: auto;
}

.sifting ul {
    padding: 0 10px;
    border-bottom: 1px solid #b9b8b8;
    min-width: 100%;
    width: 700px;
    float: left;
    position: relative;
}

.sifting li {
    min-width: 80px;
    height: 44px;
    float: left;
}

.sifting li.visited {
    padding: 0;
    background: #35a2fc;
}

.sifting li a {
    display: block;
    padding: 0 8px;
    white-space: nowrap;
    font-size: 2.0rem;
    color: #11171c;
    text-shadow: 1px 1px 1px #f4f4f4;
    text-align: center;
    height: 44px;
    line-height: 44px;
}

.sifting li.visited a {
    color: #eef0f8;
    text-shadow: none;
}

.layout .list {
    width: 100%;
    clear: both;
    padding-top: 20px;
    overflow: hidden;
}

.list ul {
    width: 100%;
    float: left;
	position:relative;
	z-index:5;
}

.list li {
    max-width: 134px;
    width: 27%;
    float: left;
    max-height: 240px;
    margin: 0 0px 20px 19px;
    position: relative;
}

.list li a {
    display: block;
}

.list li img {
    width: 100%;
    box-shadow: 1px 5px 5px #a5a5a5;
}

.list li p {
    padding-top: 5px;
    width: 100%;
    text-align: center;
    font-size: 1.5rem;
    line-height: 22px;
    color: #4c4a4a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.list .shortInfo li p {
    text-align: left; white-space: normal; height: 42px;
}
.list li .shade {
    max-width: 100%;
    height: 20px;
    line-height: 20px;
    position: absolute;
    right: 0;
    bottom: 32px;
    background-image: -webkit-linear-gradient(left, transparent, rgba(0, 0, 0, 0.7));
    background-image: -moz-linear-gradient(left, transparent, rgba(0, 0, 0, 0.7));
    background-image: -o-linear-gradient(left, transparent, rgba(0, 0, 0, 0.7));
    background-image: -ms-linear-gradient(left, transparent, rgba(0, 0, 0, 0.7));
    background-image: linear-gradient(left, transparent, rgba(0, 0, 0, 0.7));
}
.list .shortInfo .shade{
    bottom:53px;
}
.list li .shadeMoive {
    max-width: 100%;
    height: 26px;
    line-height: 26px;
    position: absolute;
    right: 0;
    bottom: 32px;
    background-image: -webkit-linear-gradient(left, transparent, rgba(0, 0, 0, 0.7));
    background-image: -moz-linear-gradient(left, transparent, rgba(0, 0, 0, 0.7));
    background-image: -o-linear-gradient(left, transparent, rgba(0, 0, 0, 0.7));
    background-image: -ms-linear-gradient(left, transparent, rgba(0, 0, 0, 0.7));
    background-image: linear-gradient(left, transparent, rgba(0, 0, 0, 0.7));
}

.list li .shade span {
    text-align: center;
    padding: 0 2px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #eef0f8;
    font-size: 1.4rem;
    text-shadow: 1px 1px 1px #000;
}
.list .shortInfo .shade span{display:none;}
.list li .shadeMoive span {
    text-align: center;
    padding: 0 4px 0 8px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.list li.none {
    width: 100%;
    max-width: 100%;
    text-align: center;
    font-size: 2rem;
    line-height: 30px;
}

/*======details===*/
.layout .details {
    padding: 12px 15px 5px 15px;
    overflow: hidden;
    clear: both;
}

.details .detaLeft {
    max-width: 150px;
    width: 40%;
    max-height: 176px;
    float: left;
    position: relative;
}

.details .detaLeft img {
    max-width: 134px;
    max-height: 176px;
    width: 96%;
    box-shadow: 1px 3px 5px #ccc;
}

.details .detaLeft .shadow {
    max-width: 134px;
    width: 96%;
    height: 28px;
    position: absolute;
    left: 0;
    bottom: 0;
    background: url(../images/shadow.png) repeat-x 0 0;
}

.details .detaLeft .grade {
    width: 96px;
    margin: 4px auto;
}

.details .detaLeft .star1, .details .detaLeft .star2 {
    width: 65px;
    float: left;
    height: 13px;
    background-size: 65px 13px;
}

.details .detaLeft .star1 {
    position: relative;
    margin-top: 2px;
    background-image: url(../images/star1.png);
}

.details .detaLeft .star2 {
    position: absolute;
    left: 0;
    top: 0;
    background-image: url(../images/star2.png);
}

.details .detaLeft .number {
    float: right;
    font-size: 1.4rem;
    color: #ff6701;
    font-weight: bold;
}

.details .detaRight {
    min-width: 120px;
    width: 54%;
    float: left;
    margin-top: -3px;
    padding-left: 10px;
    max-height: 180px;
    overflow: hidden;
}

.details .detaRight p {
    width: 100%;
    padding-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.6rem;
    color: #828282;
}

.details .detaRight p strong {
    color: #555;
    font-weight: bold;
}

.details .detaRight p.tvplay {
    color: #c65f1a;
    font-size: 1.8rem;
}

.layout .push {
    padding: 10px 15px 15px 15px;
    border-bottom: 1px solid #c2c2c2;
    clear: both;
    overflow: hidden;
}

.layout .push2 {
    padding: 10px 0 0 0;
    border-bottom: 1px solid #c2c2c2;
    clear: both;
    overflow: hidden;
}

.push2 li {
    width: 33.333%;
    float: left;
    text-align: center;
    height: 54px;
}

/*.push2 li:first-child { border-radius: 8px 0 0 8px; border-right: none; }
.push2 li:last-child { border-radius: 0 8px 8px 0; }
.push2 li:first-child a { border-radius: 7px 0 0 7px; }
.push2 li:last-child a { border-radius: 0 7px 7px 0; }*/
.push2 li a {
    padding-bottom: 13px;
    border-bottom: 4px solid #fff;
    font-size: 2.0rem;
    text-align: center;
    color: #575757;
    height: 50px;
    line-height: 50px;
}

.push2 li.visited a {
    color: #35a2fc;
    text-shadow: none;
    border-color: #35a2fc;
}

.push .button {
    border-radius: 8px;
    width: 48%;
    float: left;
}

.push .button:first-child {
    margin-right: 4%;
}

.push .button a {
    display: block;
    border-radius: 6px;
    color: #fff;
    font-size: 1.8rem;
    text-align: center;
    height: 48px;
    line-height: 48px;
    background-image: -webkit-linear-gradient(bottom, #3c7df9, #34a5fc);
    background-image: -moz-linear-gradient(bottom, #3c7df9, #34a5fc);
    background-image: -o-linear-gradient(bottom, #3c7df9, #34a5fc);
    background-image: linear-gradient(to top, #3c7df9, #34a5fc);
    background-color: #34a5fc;
}

.prompt_bg {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 40;
    background: #000;
    opacity: 0.6;
    display: none;
}

.prompt {
    width: 80%;
    min-width: 256px;
    left: 10%;
    top: 30px;
    position: absolute;
    z-index: 101;
    border-radius: 8px;
    box-shadow: 2px 2px 8px #000;
    background: rgba(0, 0, 0, .7);
    display: none;
}

.prompt .title {
    padding: 12px 0;
    width: 80%;
    margin: 0 auto;
    border-radius: 6px 6px 0 0;
    text-align: center;
    color: #fff;
    font-size: 1.8rem;
    line-height: 22px;
    border-bottom: 1px solid rgba(255, 255, 255, .5);
}

.prompt .title i {
    width: 24px;
    height: 24px;
    display: inline-block;
    margin-right: 8px;
    background: url(../images/warn.png) no-repeat;
    background-size: 100% 100%;
}

.prompt .content {
    padding: 20px 0;
    width: 80%;
    margin: 0 auto;
    font-size: 1.8rem;
    color: #666767;
    line-height: 24px;
}

.tip {
    width: 94%;
    min-width: 256px;
    left: 3%;
    position: fixed;
    z-index: 101;
    border-radius: 8px;
    box-shadow: 2px 2px 8px #000;
    background: #e8e3df;
    display: none;
}

.tip .tips {
    padding: 10px 0;
    border: 1px solid #5f6778;
    border-radius: 7px;
    text-align: center;
    background: rgba(56, 64, 82, 0.8);
    color: #fff;
    text-shadow: 1px 1px 1px #333;
    font-size: 1.4rem;
    line-height: 22px;
}

#conflict {
    background: none;
    position: fixed;
    bottom: 50px;
    font-size: 1.6rem;
    display: none;
}

.content p.button {
    margin-top: 24px;
    text-align: center;
}

.content p.button a {
    display: inline-block;
    width: 74px;
    height: 46px;
    line-height: 46px;
    text-align: center;
    font-size: 2.0rem;
    color: #535456;
    text-shadow: 1px 1px 1px #f4f4f4;
    border: 2px solid #b8b5b3;
    box-shadow: 1px 1px 3px #f9f9f9 inset, 1px 1px 3px #ccc;
    background: #e8e3df;
    border-radius: 6px;
}

.content p.button a:first-child {
    margin-right: 20px;
}

.layout .episodes {
    padding: 15px 10px;
    clear: both;
    overflow: hidden;
    border-top: 1px solid #fff;
}

.episodes ul {
    width: 100%;
    float: left;
}

.episodes .introduction {
    font-size: 1.6rem;
    color: #666;
    padding: 0 5px;
    clear: both;
    line-height: 22px;
}

.episodes li {
    width: 17%;
    height: 38px;
    box-shadow: 1px 1px 8px #eee;
    float: left;
    margin: 0 0 9px 8px;
    border-radius: 8px;
}

.episodes ul.onlyOne li {
    width: 97%;
}

.episodes ul.onlyTwo li {
    width: 47%;
}

.episodes ul.onlyThree li {
    width: 30%;
}

.episodes ul.onlyFour li {
    width: 22%;
}

.episodes li.visited {
    box-shadow: 1px 1px 5px #eee;
}

.episodes li a {
    display: block;
    box-shadow: 2px 2px 3px #f3f1ee inset;
    text-align: center;
    line-height: 38px;
    font-size: 1.8rem;
    color: #666767;
    text-shadow: 1px 1px 1px #f4f4f4;
    border-radius: 7px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 5px;
    border: 1px solid rgba(4, 4, 4, 0.1);
    background: #f0ece9;
}

.onlyOne li a {
    text-align: left;
}

.episodes li.visited a {
    text-shadow: none;
    box-shadow: none;
    color: #fff;
    border: none;
    background-image: -webkit-linear-gradient(bottom, #3c7df9, #34a5fc);
    background-image: -moz-linear-gradient(bottom, #3c7df9, #34a5fc);
    background-image: -o-linear-gradient(bottom, #3c7df9, #34a5fc);
    background-image: linear-gradient(to top, #3c7df9, #34a5fc);
    background-color: #34a5fc;
}

.orange {
    color: #eb6a13;
}

/*=======play=======*/
.playContent {
    padding: 124px 24px 0 30px;
    position: relative;
}

.playContent .playTop {
    margin: 0 auto;
    padding-left: 10px;
    width: 206px;
    clear: both;
    height: 204px;
}

.playTop .topLeft {
    width: 100%;
    height: 210px;
    float: left;
}

.playTop .pause {
    background: url(../images/play.gif) no-repeat;
    background-size: 100% 100%;
}

.playTop .playing {
    background: url(../images/pause.png) no-repeat;
    background-size: 100% 100%;
}

.playTop .topRight {
    width: 30px;
    position: absolute;
    right: 16px;
}

.playTop .volumnProgressBarBox {
    width: 6px;
    height: 210px;
    position: relative;
    margin: -10px 0 8px 5px;
}

.volumnProgressBar {
    width: 6px;
    height: 210px;
    background: #c7c3c0;
    border-radius: 10px;
    position: absolute;
}

.volumnProgressBarOn {
    width: 6px;
    height: 210px;
    border-radius: 10px;
    position: absolute;
    bottom: 0;
    background-image: -webkit-linear-gradient(#0ab0f4, #277fab);
    background-image: -moz-linear-gradient(#0ab0f4, #277fab);
    background-image: -o-linear-gradient(#0ab0f4, #277fab);
    background-image: -ms-linear-gradient(#0ab0f4, #277fab);
    background-image: linear-gradient(#0ab0f4, #277fab);
    background-color: #149fdb;
}

.volumnProgressPoint {
    position: absolute;
    height: 48px;
    width: 48px;
    background: url(../images/icon.png) -46px -66px;
    top: -24px;
    left: -21px;
}

.playBottom .progressBarBox {
    width: 90%;
    height: 6px;
    position: relative;
    margin: 0 auto;
}

.progressBar {
    width: 100%;
    height: 6px;
    background: #c7c3c0;
    border-radius: 10px;
    position: absolute;
}

.progressBarOn {
    width: 100%;
    height: 6px;
    border-radius: 10px;
    position: absolute;
    background-image: -moz-linear-gradient(100% 0% 180deg, #0ab0f4, #277fab);
    background-image: -webkit-gradient(linear, 100% 0%, 0% 100%, from(#0ab0f4), to(#277fab));
    background-color: #149fdb;
}

.progressPoint {
    position: absolute;
    height: 46px;
    width: 46px;
    background: url(../images/icon.png) 0 -66px;
    top: -21px;
    left: -23px;
}

.progressTime {
    width: 58px;
    height: 48px;
    line-height: 35px;
    text-align: center;
    background: url(../images/icon.png) -94px -66px;
    font-size: 1.4rem;
    color: #fff;
    position: absolute;
    margin-left: -30px;
    left: 0;
    top: -54px;
}

.totalTime {
    width: 120px;
    text-align: right;
    height: 30px;
    line-height: 24px;
    font-size: 1.6rem;
    color: #aba9a7;
    text-shadow: 1px 1px 1px #fff;
    position: absolute;
    right: 0;
    top: 10px;
}

.playTop .topRight .volumeOn {
    width: 28px;
    height: 28px;
    background: url(../images/voice.png) no-repeat;
    background-size: 100% 100%;
    margin-top: 25px;
}

.playTop .topRight .volumeOff {
    width: 28px;
    height: 28px;
    background: url(../images/novoice.png) no-repeat;
    background-size: 100% 100%;
    margin-top: 25px;
}

.playContent .playBottom {
    height: 6px;
    position: relative;
    clear: both;
    margin: 60px 0 28px 0;
}

.playContent .playSelections {
    height: 54px;
    width: 100%;
    text-align: center;
    clear: both;
    position: relative;
}

.playContent .playSelections > a {
    width: 60px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    display: inline-block;
    border-radius: 6px;
    border: 2px solid #bfbab7;
    font-size: 2.0rem;
    color: #535456;
    box-shadow: 1px 2px 3px #f1f1f1 inset;
    background-image: -webkit-linear-gradient(#e8e3df, #cacbce);
    background-image: -moz-linear-gradient(#e8e3df, #cacbce);
    background-image: -o-linear-gradient(#e8e3df, #cacbce);
    background-image: -ms-linear-gradient(#e8e3df, #cacbce);
    background-image: linear-gradient(#e8e3df, #cacbce);
    background-color: #e8e3df;
}

.playSelections .content {
    width: 90%;
    position: absolute;
    left: 5%;
    bottom: 72px;
    border: 2px solid #a09b97;
    border-radius: 8px;
    background: #d4d4d6;
    z-index: 2;
    display: none;
}

.playSelections .content ul {
    width: 100%;
    max-height: 250px;
    overflow: auto;
}

.playSelections .content li {
    float: left;
    width: 20%;
    text-align: center;
    height: 47px;
    line-height: 47px;
    box-shadow: 1px 1px 1px #f4f4f4 inset;
    cursor: pointer;
    font-size: 1.8rem;
    color: #535456;
    text-shadow: 1px 1px 2px #f4f4f4;
}

.playSelections .content li.visited {
    background: #1898d0;
    color: #fff;
    text-shadow: 1px 1px 2px #555;
    box-shadow: 2px 2px 10px #065BA8 inset;
}

.playSelections .content li:first-child, .playSelections .content li:first-child a {
    border-top-left-radius: 7px;
}

.playSelections .content li:nth-child(5n) a {
    border-right: none;
}

.playSelections .content li a {
    padding: 0 5px;
    color: #535456;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-right: 2px solid #adadac;
    border-bottom: 2px solid #adadac;
    display: block;
}

.playSelections .content li.visited a {
    color: #fff;
}

.playSelections .content li.topRight, .playSelections .content li.topRight a {
    border-top-right-radius: 7px;
}

.playSelections .content li.bottomLeft, .playSelections .content li.bottomLeft a {
    border-bottom-left-radius: 7px;
}

.playSelections .content li.bottomRight, .playSelections .content li.bottomRight a {
    border-bottom-right-radius: 7px;
}

.playSelections .content ul.oneLine li:first-child, .playSelections .content ul.oneLine li:first-child a {
    border-radius: 7px 0 0 7px;
}

.playSelections .content ul.oneLine li.topRight, .playSelections .content ul.oneLine li.topRight a {
    border-radius: 0 7px 7px 0;
}

.playSelections .content ul.onlyOne li {
    width: 100%;
}

.playSelections .content ul.onlyOne li a {
    border-right: none;
}

.playSelections .content ul.onlyOne li:first-child {
    border-radius: 7px 7px 0 0;
}

.playSelections .content ul.onlyOne li:last-child {
    border-radius: 0 0 7px 7px;
}

.playSelections .content ul.onlyOne li:last-child a {
    border-bottom: none;
}

.playSelections .content i {
    width: 42px;
    height: 22px;
    display: block;
    position: absolute;
    background: url(../images/icon.png) no-repeat -129px -36px;
    bottom: -18px;
    left: 50%;
    margin-left: -21px;
}

/*===========channel===============*/
.channelItem {
    background: #fff;
    border-bottom: 1px solid #dedede;
    width: 100%;
}

.channelPlayStatusIcon {
    float: left;
}

.channelIcon {
    float: left;
    margin: 5px 15px 0 10px;
}

.imgChannelIcon {
    background: url(../images/channel_shadow.png) no-repeat;
    background-size: 100% 100%;
    padding: 5px;
    width: 45px;
    height: 45px;
}

.channelListRightSideOn .imgChannelIcon {
    background: #fff;
}

.imgPlayIcon {
    margin-top: 30px;
    width: 23px;
    height: 18px;
    background: url(../images/channel_playing.png) no-repeat;
    background-size: 100% 100%;
    float: left;
}

.playOn {
    background-image: url(../images/channel_playOn.png);
}

.channelInfo {
    height: 60px;
    overflow: hidden;
}

.channelTitle {
    font-size: 2.0rem;
    color: #131313;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 25px;
    margin-top: 8px;
    line-height: 24px;
}

.channelCurrent {
    font-size: 1.6rem;
    color: #777;
    margin-top: 0px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 20px;
}

.channelExpandArrow {
    float: right;
    display: none;
}

.arrowIcon {
    width: 9px;
    height: 17px;
    display: block;
    background: url('../images/arrow.png') no-repeat;
    background-size: 100% 100%;
    margin-top: 22px;
    margin-left: 5px;
}

.channelListLeftSide {
    width: 35px;
    padding-right: 8px;
    float: right;
}

.channelListRightSide {
    margin-right: 58px;
    padding: 5px 15px 5px 0;
}

.channelListRightSideOn {
    background-color: #35a2fc;
}

.channelListRightSideOn div {
    color: #fff;
}

.channelListRightSideOn .arrowIcon {
    background-image: url(../images/arrowOn.png);
}

.headerBar {
    height: 54px;
    line-height: 54px;
    font-size: 2.0rem;
    color: #333;
    width: 100%;
    background: #f0eeee;
    border-bottom: 1px solid #c2c2c2;
    margin-bottom: 35px;
    position: fixed;
    top: 0;
    z-index: 100;
}

.backBtn {
    width: 12px;
    height: 24px;
    background: url(../images/back.png) no-repeat;
    background-size: 100% 100%;
    text-indent: -9999px;
    float: left;
    margin: 14px;
    position: absolute;
    left: 0;
    top: 0;
}

.titleBox {
    text-align: center;
    overflow: hidden;
}

.headerBar .rightBtn {
    width: 60px;
    display: block;
    float: right;
    font-size: 1.8rem;
    color: #398afa;
    position: absolute;
    top: 0;
    right: 0;
}

.headerBar .rightBtn:hover {
    color: #393740;
}

.headSpace {
    width: 100%;
    height: 97px;
    background: #f0f0f0;
}

.categoryBox {
    height: 40px;
    font-size: 1.8rem;
    color: #333;
    width: 100%;
    min-width: 100%;
    border-top: 1px solid #fff;
    position: fixed;
    top: 0;
    left: 0;
    overflow-y: hidden;
    overflow-x: auto;
    z-index: 2;
}

.categoryBar {
    font-size: 1.8rem;
    color: #333;
    min-width: 100%;
    background: #f0eeee;
    position: relative;
    overflow-y: hidden;
    overflow-x: auto;
}

.categoryItem {
    float: left;
    padding-top: 5px;
    margin-left: 15px;
    margin-right: 20px;
    color: #9b9b9b;
}

.categoryBottom {
    height: 3px;
    background: #35a2fc;
    display: none;
}

.channelGroupBox {
    display: none;
}

.categoryTitle {
    padding: 0 5px;
    line-height: 32px;
}

.channelDateBar {
    position: fixed;
    top: 0;
    left: 0;
    height: 40px;
    z-index: 10;
    width: 100%;
}

.rightToLeftGradient {
    background-color: #1286f8;
    background-image: -webkit-linear-gradient(left, #8c8b8a, #1286f8);
    background-image: -moz-linear-gradient(left, #8c8b8a, #1286f8);
    background-image: -o-linear-gradient(left, #8c8b8a, #1286f8);
    background-image: linear-gradient(to right, #8c8b8a, #1286f8);
}

.leftToRightGradient {
    background-color: #1286f8;
    background-image: -webkit-linear-gradient(left, #1286f8, #8c8b8a);
    background-image: -moz-linear-gradient(left, #1286f8, #8c8b8a);
    background-image: -o-linear-gradient(left, #1286f8, #8c8b8a);
    background-image: linear-gradient(to right, #1286f8, #8c8b8a);
}

.separateLine {
    height: 3px;
    border-radius: 5px;
    box-shadow: 1px 1px 5px #eee;
    float: left;
    margin-top: 20px;
}

.lineDefaultBg {
    background: #8c8b8a;
}

#line_1 {
    width: 20%;
}

#line_2 {
    width: 30%;
}

#line_3 {
    width: 30%;
}

#line_4 {
    width: 20%;
}

.dateText {
    position: absolute;
    top: 3px;
    float: left;
    text-align: center;
    font-size: 1.6rem;
    color: #f0f0f0;
    margin-left: -5px;
    width: 34px;
    height: 34px;
    line-height: 34px;
    border-radius: 20px;
    background-color: #818080;
    background-image: -webkit-linear-gradient(bottom, #818080, #9b9c9a);
    background-image: -moz-linear-gradient(bottom, #818080, #9b9c9a);
    background-image: -o-linear-gradient(bottom, #818080, #9b9c9a);
    background-image: linear-gradient(to top, #818080, #9b9c9a);
}

#date_1 {
    left: 20%;
}

#date_2 {
    left: 50%;
}

#date_3 {
    left: 80%;
}

.dateDefaultBg {
    background-color: #818080;
}

.dateCurrentBg {
    background-color: #34a5fc;
    background-image: -webkit-linear-gradient(bottom, #3c7df9, #34a5fc);
    background-image: -moz-linear-gradient(bottom, #3c7df9, #34a5fc);
    background-image: -o-linear-gradient(bottom, #3c7df9, #34a5fc);
    background-image: linear-gradient(to top, #3c7df9, #34a5fc);
}

.channelProgramItem {
    width: 100%;
    height: 60px;
    line-height: 60px;
    border-bottom: 1px solid #c2c2c2;
    background: #fff;
    color: #555;
}

#cur {
    background: #e5e5e5;
    color: #131313;
}

.channelProgramTime {
    width: 80px;
    border-right: 1px solid #D0D0D0;
    font-weight: 500;
    font-size: 1.6rem;
    color: #333;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    float: left;
}

.channelProgramCurrentTime {
    color: #f0f0f0;
    background-color: #35a2fc;
}

.channelProgramTitle {
    font-size: 1.8rem;
    line-height: 60px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    height: 60px;
}

.channelProgramTitle2 {
    line-height: 28px;
    white-space: normal;
}

.channelProgramTitleText {
    padding-left: 15px;
    display: inline-block;
}

.channelTextDone {
    color: #999;
}

.channelProgramPlayIconSpace {
    width: 34px;
    height: 27px;
    float: right;
    margin-right: 15px;
}

.channelProgramPlayIcon {
    width: 30px;
    height: 23px;
    background: url(../images/channel_playing.png) no-repeat;
    background-size: 100% 100%;
    float: right;
    margin-top: 18px;
    margin-right: 15px;
}

.channelProgramPlayIconOn {
    background-image: url(../images/channel_playOn.png);
}

/*============subscription==============*/
.mySubscription, .subscription {
    width: 100%;
    clear: both;
    padding-top: 55px;
    position: relative;
    min-height: 100%;
}

.mySubscription .box {
    margin-top: 14px;
    overflow: hidden;
}

.mySubscription .title {
    font-size: 2.0rem;
    line-height: 20px;
    color: #403e3e;
    padding-bottom: 15px;
}

.mySubscription .title i {
    display: block;
    float: left;
    width: 8px;
    height: 18px;
    margin-right: 10px;
}

.mySubscription .title i.one {
    background: #e27413;
}

.mySubscription .title i.two {
    background: #058fe7;
}

.mySubscription .title i.three {
    background: #2cba40;
}

.mySubscription .title i.four {
    background: #da20be;
}

.mySubscription .title i.five {
    background: #ceb71b;
}

.mySubscription .title a {
    color: #777777;
    font-size: 1.6rem;
    float: right;
    margin-left: 8px;
    margin-right: 10px;
}

.mySubscription .title a:hover {
    color: #0c81d9;
}

.mySubscription .title .text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 20px;
}

.mySubscription .content {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    min-height: 100px;
    position: relative;
}

.mySubscription ul {
    width: 10000px;
    margin-left: 17px;
    padding-bottom: 14px;
    border-bottom: 1px solid #ccc;
    float: left;
    min-width: 90%;
    min-height: 100px;
}

.mySubscription li {
    max-width: 120px;
    width: 25%;
    float: left;
    margin-right: 14px;
    position: relative;
}

.mySubscription li a {
    display: block;
}

.mySubscription li .imgBox {
    width: 100%;
    max-height: 180px;
    background: url(../images/default.png) no-repeat;
    background-size: 100% 100%;
    box-shadow: 1px 1px #fff inset, -1px -1px 1px #fff inset, 1px 1px 5px #999;
}

.mySubscription li img {
    width: 100%;
    max-height: 180px;
    vertical-align: top;
    box-shadow: 1px 5px 5px #a5a5a5;
}

.mySubscription .content.shortInfo li .imgBox {
    max-height: 106px;
    background-image: url(../images/default2.png);
}

.mySubscription .content.shortInfo li .imgBox img {
    max-height: 106px;
}

.mySubscription li p {
    clear: both;
    font-size: 1.4rem;
    width: 100%;
    text-align: center;
    color: #131313;
    margin-top: 8px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    height: 19px;
}

.mySubscription .content.shortInfo li p {
    height: 40px;
    white-space: normal;
    overflow: hidden;
}

.subscriptionNoDatas {
    text-align: center;
    margin-top: 20px;
}

.mySubscription li .shade {
    max-width: 100%;
    height: 20px;
    line-height: 20px;
    position: absolute;
    right: 0;
    bottom: 27px;
    background-image: -webkit-linear-gradient(left, transparent, rgba(0, 0, 0, 0.7));
    background-image: -moz-linear-gradient(left, transparent, rgba(0, 0, 0, 0.7));
    background-image: -o-linear-gradient(left, transparent, rgba(0, 0, 0, 0.7));
    background-image: -ms-linear-gradient(left, transparent, rgba(0, 0, 0, 0.7));
    background-image: linear-gradient(left, transparent, rgba(0, 0, 0, 0.7));
}
.mySubscription .shortInfo li .shade{
    bottom:48px; display: none;
}
.mySubscription li .shade span {
    text-align: center;
    padding: 0 2px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #eef0f8;
    font-size: 1.4rem;
    text-shadow: 1px 1px 1px #000;
}

.mySubscription li .shadeMoive {
    max-width: 100%;
    height: 26px;
    line-height: 26px;
    position: absolute;
    right: 0;
    bottom: 27px;
    background-image: -webkit-linear-gradient(left, transparent, rgba(0, 0, 0, 0.7));
    background-image: -moz-linear-gradient(left, transparent, rgba(0, 0, 0, 0.7));
    background-image: -o-linear-gradient(left, transparent, rgba(0, 0, 0, 0.7));
    background-image: -ms-linear-gradient(left, transparent, rgba(0, 0, 0, 0.7));
    background-image: linear-gradient(left, transparent, rgba(0, 0, 0, 0.7));
}

.mySubscription li .shadeMoive span {
    text-align: center;
    padding: 0 4px 0 8px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.list li .shade span.red {
    font-size: 1.4rem;
    color: #ff6701;
    text-shadow: none;
}

.mySubscription li .shade span.red {
    font-size: 1.4rem;
    color: #ff6701;
    text-shadow: none;
}

.subscriptionMore {
    display: none;
}

.noPrograms {
    text-align: center;
    margin-top: 120px;
    color: #999;
    font-size: 1.6rem;
}

.mySubscription .content {
    min-height: 100px;
    width: 100%;
    clear: both;
}

.mySubscription .tips {
    width: 100%;
    padding: 20px 0;
    text-align: center;
    font-size: 1.6rem;
    color: #777;
}

.mySubscription .tips a {
    width: 70px;
    height: 70px;
    display: block;
    clear: both;
    margin: 0 auto 20px;
    background: url(../images/subscription.png) no-repeat;
    background-size: 100% 100%;
}

.subscription .tag {
    width: 80px;
    float: left;
    text-align: center;
    font-size: 1.8rem;
    padding: 15px 0;
    position: fixed;
    min-height: 100%;
    left: 0;
    top: 55px;
    box-shadow: inset -3px 0 2px rgba(4, 60, 108, .1);
    background-image: -webkit-linear-gradient(bottom, #212121, #44414d);
    background-image: -moz-linear-gradient(bottom, #212121, #44414d);
    background-image: -o-linear-gradient(bottom, #212121, #44414d);
    background-image: linear-gradient(to top, #212121, #44414d);
    background-color: #212121;
}

.subscription .tag a {
    height: 50px;
    line-height: 50px;
    clear: both;
    width: 100%;
    color: #b1b0b4;
    display: block;
}

.subscription .tag a.visited {
    color: #fff;
    background: #35a2fc;
}

.subscription .content {
    margin-left: 80px;
}

.subscription .content ul {
    width: 100%;
    overflow: hidden;
}

.subscription li {
    width: 100%;
    clear: both;
    overflow: hidden;
    padding: 12px 0;
    border-bottom: 1px solid #ddd;
}

.subscription li .imgBox {
    width: 60px;
    height: 60px;
    float: left;
    margin-left: 12px;
    box-shadow: 0px 0px 7px #999;
}

.subscription li .imgBox img {
    width: 60px;
    height: 60px;
}

.subscription li .select {
    width: 28px;
    height: 28px;
    float: right;
    margin-right: 12px;
    margin-top: 15px;
    background: url(../images/select.png) no-repeat;
    background-size: 100% 100%;
}

.subscription li .text {
    font-size: 2.1rem;
    color: #7e7d7d;
    margin: 0 47px 0 86px;
}

.subscription li .text span {
    height: 60px;
    line-height: 60px;
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.subscription li.selected .select {
    background-image: url(../images/my_selected.png);
}

.subscription li.selected .text {
    color: #131313;
}

/*=====subscription classify====*/
.classifyMenu {
    width: 100%;
    overflow-y: hidden;
    overflow-x: auto;
    font-size: 1.8rem;
    color: #393838;
    position: relative;
    top: 1px;
}

.classifyMenu ul {
    width: 200%;
}

.classifyMenu li {
    width: 62px;
    text-align: center;
    float: left;
    padding: 8px 0;
    height: 34px;
    line-height: 34px;
    border-bottom: 4px solid transparent;
}

.classifyMenu li.on {
    border-color: #058fe7;
}

.subMenu {
    width: 100%;
    clear: both;
    background: #e2e2e2;
    overflow: hidden;
    font-size: 1.4rem;
}

.subMenu .content {
    padding: 15px 0 5px;
    overflow: hidden;
    border-bottom: 1px solid #aaa;
}

.subMenu .code {
    display: none;
}

.subMenu .box {
    width: 100%;
    float: left;
    overflow: auto;
}

.subMenu ul {
    width: 200%;
    float: left;
    margin-bottom: 8px;
}

.subMenu li {
    width: 50px;
    text-align: center;
    height: 30px;
    line-height: 30px;
    float: left;
    margin: 0 7px;
    border: 1px solid transparent;
    border-radius: 3px;
    color: #393d41;
}

.subMenu li.on {
    border-color: #b8b8b8;
    background: #f6f6f6;
    color: #006cff;
}

/*=====director====*/
.director {
    padding-top: 61px;
}

.director .honor {
    padding: 6px 5px 20px 15px;
    clear: both;
    font-size: 1.5rem;
    line-height: 22px;
    color: #585858;
}

.director .honor li {
    padding-bottom: 8px;
    clear: both;
    overflow: hidden;
}

.director .honor li .icon {
    width: 18px;
    height: 18px;
    margin-top: 3px;
    float: left;
    background: url(../images/cup.png) no-repeat;
    background-size: 100% 100%;
}

.director .honor li .text {
    margin-left: 26px;
    overflow: hidden;
}

.director .slide {
    width: 100%;
    position: relative;
    clear: both;
    height: 20px;
    border-top: 1px solid #d9d9d9;
}

.director .slide .triangle {
    font-size: 10rem;
    color: #fff;
    top: -4px;
    text-indent: -9999px;
    position: absolute;
    width: 88px;
    text-align: center;
    height: 28px;
    line-height: 28px;
    left: 50%;
    margin-left: -44px;
    background: url(../images/slide2.png) no-repeat;
}

.director .slide .triangle2 {
    color: #c2c2c2;
    top: -23px;
    display: none;
    visibility: hidden;
}

.director .slide .text {
    width: 26px;
    height: 60px;
    line-height: 30px;
    text-align: center;
    color: #8a8a8a;
    position: absolute;
    left: 50%;
    margin-left: -13px;
    top: -25px;
}

.director .slide .text i {
    width: 12px;
    height: 7px;
    background: url(../images/slide.png) no-repeat;
    background-size: 100% 100%;
    display: block;
    position: absolute;
    left: 7px;
    top: 28px;
    opacity: 0.6;
    filter: alpha(opacity=60);
}

.director .slide.up .triangle {
    color: #fff;
    top: -23px;
    background: url(../images/slide3.png) no-repeat;
}

.director .slide.up .triangle2 {
    color: #c2c2c2;
    top: -24px;
}

.director .slide.up .text {
    line-height: 52px;
    top: -17px;
}

.director .slide.up .text i {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
    top: 6px;
}

.director .list li img {
    box-shadow: 1px 6px 6px #ccc;
}

/*=====control====*/
.controllerTip {
    width: 100%;
    height: 100%;
    background: url(../images/tipText.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    z-index: 100;
    display: none;
}

.deviceBox {
    width: 70%;
    position: absolute;
    z-index: 10;
    left: 15%;
    top: 62px;
    border-radius: 10px;
    display: none;
    box-shadow: 0 34px 49px rgba(0, 0, 0, .75);
    border: solid 2px #51b7ff;
    background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(255, 255, 255, .1));
    background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(255, 255, 255, .1));
    background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(255, 255, 255, .1));
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(255, 255, 255, .1));
    background-color: #131313;
}

.deviceBox i.arrow {
    width: 36px;
    height: 20px;
    display: block;
    font-size: 6rem;
    position: absolute;
    left: 50%;
    margin-left: -17px;
    top: -20px;
    background: url(../images/tip.png) no-repeat;
    background-size: 100% 100%;
}

.deviceBox li {
    width: 100%;
    float: left;
    height: 48px;
    line-height: 48px;
    border-top: 1px solid #323232;
    text-align: center;
    color: #d0cdcb;
    font-size: 1.6rem;
}

.deviceBox li:first-child {
    border: none;
}

.deviceBox li span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    max-width: 80%;
}

.deviceBox li i.tv {
    width: 19px;
    height: 18px;
    display: inline-block;
    margin-right: 5px;
    position: relative;
    font-size: 3.4rem;
    top: 3px;
    background: url(../images/tv.png) no-repeat;
    background-size: 100% 100%;
}

.deviceBox li i.add {
    width: 19px;
    height: 18px;
    display: inline-block;
    margin-right: 5px;
    position: relative;
    font-size: 3.4rem;
    top: 3px;
    background: url(../images/add.png) no-repeat;
    background-size: 100% 100%;
}

.controller {
    width: 100%;
    height: 100%;
    background: url(../images/control_bg.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
}

.controller .footer {
    width: 100%;
    overflow: hidden;
    position: absolute;
    height: 110px;
    border-top: 2px solid #0a0a0a;
    bottom: 0;
    z-index: 30;
    background-image: -webkit-linear-gradient(bottom, #1c1c1c, #1e1e1e);
    background-image: -moz-linear-gradient(bottom, #1c1c1c, #1e1e1e);
    background-image: -o-linear-gradient(bottom, #1c1c1c, #1e1e1e);
    background-image: linear-gradient(to top, #1c1c1c, #1e1e1e);
    background-color: #1c1c1c;
}

.controller .footer ul {
    padding: 30px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.controller .footer li {
    width: 25%;
    margin-top: 8px;
    float: left;
}

.controller .footer li.toBack {
    width: 50%;
    margin-top: 4px;
}

.controller .footer div {
    width: 110%;
    height: 90px;
    left: -5%;
    top: -28px;
    text-align: center;
    display: block;
    position: relative;
    overflow: hidden;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center 0;
    background-image: url(../images/to_bg2.png);
    z-index: 1;
}

.controller .footer div::before {
    display: block;
    margin: 2px 3px 2px 3px;
    height: 63px;
    content: "";
}

.controller .footer div.on {
    background-image: url(../images/to_bg.png);
}

.controller .footer li.toBack div {
    width: 110%;
    z-index: 0;
    left: -5%;
    top: -24px;
    background-image: url(../images/toBack_bg2.png);
}

.controller .footer li.toBack div.on {
    background-image: url(../images/toBack_bg.png);
}

.controller .footer i.home {
    width: 24px;
    height: 24px;
    display: inline-block;
    margin: 0 auto;
    position: relative;
    top: -36px;
    z-index: 3;
    background: url(../images/to_home.png) no-repeat;
    background-size: 100% 100%;
}

.controller .footer i.menu {
    width: 22px;
    height: 19px;
    display: inline-block;
    margin: 0 auto;
    position: relative;
    top: -33px;
    z-index: 3;
    background: url(../images/to_menu.png) no-repeat;
    background-size: 100% 100%;
}

.controller .footer i.back {
    width: 29px;
    height: 22px;
    display: inline-block;
    margin: 0 auto;
    position: relative;
    top: -35px;
    z-index: 3;
    background: url(../images/to_back.png) no-repeat;
    background-size: 100% 100%;
}

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

.pointer {
    position: absolute;
    top: 0;
    left: 0;
    background: url('../images/pointer.png') no-repeat;
    background-size: 100% 100%;
    width: 100px;
    height: 100px;
    display: none;
    z-index: 1;
}

.pointer2 {
    position: absolute;
    top: 0;
    left: 0;
    background: url('../images/pointer.png') no-repeat;
    background-size: 100% 100%;
    width: 200px;
    height: 200px;
    display: none;
    z-index: 2;
}

.Arrow {
    display: none;
    z-index: 1;
}

.arrowLeft, .arrowRight, .arrowUp, .arrowDown {
    width: 100%;
    height: 100%;
    position: absolute;
    top: -34px;
}

.arrowLeft {
    float: left;
    background: url("../images/arrow-left.png") center center no-repeat;
    background-size: 188px 120px;
}

.arrowRight {
    float: right;
    background: url("../images/arrow-right.png") center center no-repeat;
    background-size: 188px 120px;
}

.arrowUp {
    background: url("../images/arrow-top.png") center center no-repeat;
    background-size: 120px 188px;
}

.arrowDown {
    background: url("../images/arrow-bottom.png") center center no-repeat;
    background-size: 120px 188px;
}

/*===============loading===============*/
.loading {
    width: 100%;
    height: 50px;
    line-height: 20px;
    margin: 0 auto;
    clear: both;
    display: none;
    position: relative;
    top: -10px;
    text-align: center;
}

.loading2 {
    z-index: 99;
    background: rgba(255, 255, 255, 0.8);
    width: 100%;
    height: 100%;
    clear: both;
    display: none;
    position: absolute;
}

.loading2 .loadingImg {
    z-index: 99;
    width: 32px;
    height: 32px;
    background: url(../images/loading.gif) no-repeat;
    clear: both;
    position: relative;
    top: 120px;
    margin: 0 auto;
}

.loading3 {
    z-index: 99;
    background: rgba(255, 255, 255, 0.8);
    width: 100%;
    height: 99px;
    clear: both;
    display: block;
    position: absolute;
}

.loading3 .loadingImg {
    z-index: 99;
    width: 32px;
    height: 32px;
    background: url(../images/loading.gif) no-repeat;
    clear: both;
    position: relative;
    top: 15px;
    margin: 0 auto;
}

.loading3 .loadingtext {
    width: 255px;
    position: relative;
    top: 25px;
    height: 32px;
    line-height: 32px;
    font-size: 1.6rem;
    color: #666;
    z-index: 99;
}

.loadingtext {
    width: 255px;
    position: relative;
    top: 130px;
    height: 32px;
    line-height: 32px;
    font-size: 1.6rem;
    color: #666;
    z-index: 99;
}

.loadingicon {
    background: url(../images/loading2.gif) no-repeat center center;
    width: 24px;
    height: 24px;
    display: inline-block;
}

.loadingtext2 {
    clear: both;
    font-size: 1.4rem;
    display: block;
}

.loading4 {
    position: relative;
    height: auto;
    padding: 0 0 8px;
    display: none;
}

.loading4 .loadingImg {
    top: 0;
}

.loading4 .loadingtext {
    width: 100%;
    text-align: center;
    top: 0;
}

/*===============input===============*/
textarea, input[type="text"], input[type="password"] {
    border: 2px solid #dce4ec;
    outline: none;
    color: #34495e;
    font-size: 1.4rem;
    padding: 10px 0;
    text-indent: 10px;
    width: 100%;
    background: #fff;
    border-radius: 6px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

textarea:focus, input[type="text"]:focus, input[type="password"]:focus {
    border-color: #0badf0;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}

input[type="text"].error {
    border-color: #e74c3c;
}

/*=======text=*/
.textShadow {
    text-shadow: none;
}

.textShadow2 {
}

/*================float========================*/
.right {
    float: right;
}

.left {
    float: left;
}

.clear {
    clear: both;
    height: 0;
    width: 100%;
}

.black {
    color: #131313;
}

/*==========padding=======*/
.layout .pd_top10 {
    padding-top: 10px;
}

.allDataFinished {
    text-align: center;
    height: 30px;
    line-height: 40px;
    font-size: 1.6rem;
    color: #333;
    display: none;
    width: 100%;
    position: relative;
    clear: both;
    top: -10px;
    border-top: 1px solid #e0e0e0;
}

.allDataFinishedText {
    display: block;
}

.red {
    color: #c65f1a;
}

/*======score======*/
.bigRed {
    font-size: 2.2rem;
    color: #f60;
    font-style: normal;
}

.smallRed {
    font-size: 1.5rem;
    color: #f60;
    font-style: normal;
}
/*=======hot play=======*/
.hotPlay{width:100%; height: 42px; position: absolute; top: 50%; margin-top: -50px; text-align: center; display: none;}
.hotPush,.hotLive{width:42px; height: 42px;display: inline-block !important;  background-repeat: no-repeat; background-size: 100% 100%;}
.hotPush{background-image:url(../images/hot_push.png); margin-left:10px; }
.hotLive{background-image: url(../images/hot_live.png);}
/*====iscroll====*/
#wrapper {
    position: absolute;
    top: 181px;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 10px 0;
    margin-top: 74px;
}

.program {
    position: absolute;
    right: 0;
    left: 0;
}

/**
 *
 * Pull down styles
 *
 */
#pullDown, #pullUp {
    height: 40px;
    line-height: 40px;
    padding: 5px 10px;
    font-weight: bold;
    font-size: 14px;
    color: #888;
}
#pullUp{position: relative; top: -10px;}
#pullDown .pullDownIcon, #pullUp .pullUpIcon {
    display: block;
    float: left;
    width: 40px;
    height: 40px;
    background: url(../images/pull-icon@2x.png) 0 0 no-repeat;
    -webkit-background-size: 40px 80px;
    background-size: 40px 80px;
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 250ms;
}

#pullDown .pullDownIcon {
    -webkit-transform: rotate(0deg) translateZ(0);
}

#pullUp .pullUpIcon {
    -webkit-transform: rotate(-180deg) translateZ(0);
}

#pullDown.flip .pullDownIcon {
    -webkit-transform: rotate(-180deg) translateZ(0);
}

#pullUp.flip .pullUpIcon {
    -webkit-transform: rotate(0deg) translateZ(0);
}

#pullDown._loading .pullDownIcon, #pullUp._loading .pullUpIcon {
    background-position: 0 100%;
    -webkit-transform: rotate(0deg) translateZ(0);
    -webkit-transition-duration: 0ms;

    -webkit-animation-name: loading;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}

@-webkit-keyframes loading {
    from {
        -webkit-transform: rotate(0deg) translateZ(0);
    }
    to {
        -webkit-transform: rotate(360deg) translateZ(0);
    }
}
@media screen and (max-width: 320px) {
    html {
        font-size: 55.5%;
    }

    body {
        background-position: 0 48px;
    }

    .header .search {
        padding: 5px 10px;
    }

    .searchHeader {
        margin-top: 44px;
    }

    .header {
        height: 48px;
    }

    .header2 {
        height: 94px;
    }

    .header h1 {
        height: 48px;
        line-height: 48px;
    }

    .sifting ul {
        width: 600px;
    }

    .sifting li {
        min-width: 60px;
        height: 32px;
    }

    .sifting li a {
        height: 32px;
        line-height: 32px;
    }

    .sifting .shade {
        height: 36px;
    }

    .search .delete {
        width: 19px;
        height: 19px;
    }

    .search .button a {
        height: 32px;
        line-height: 32px;
    }

    .fixedTop {
        padding-top: 44px;
    }

    .layout .list {
        padding-top: 10px;
    }

    .list li {
        margin: 0 0px 15px 15px;
    }

    .list li p {
        line-height: 18px;
    }

    .layout .details {
        padding: 12px 10px 5px 10px;
    }

    .layout .push {
        padding: 5px 10px 8px 10px;
    }

    .layout .episodes {
        padding: 12px 7px;
    }

    .push2 li {
        height: 45px;
    }

    .push .button a, .push2 li a {
        height: 38px;
        line-height: 38px;
    }

    .episodes li {
        height: 30px;
    }

    .episodes li a {
        line-height: 30px;
    }
	.list li .shadeMoive{
		bottom:28px;
	}
    .prompt .content {
        padding: 14px;
    }

    .prompt .title {
        padding: 8px 0;
        line-height: 24px;
    }

    .pin .close {
        width: 17px;
        height: 17px;
        top: -43px;
        right: -16px;
    }

    .alert .close {
        width: 17px;
        height: 17px;
        top: -43px;
        right: -16px;
    }

    .pin .button {
        margin-top: 12px;
    }

    .pin .button a {
        padding: 7px 0;
        height: 18px;
        line-height: 16px;
    }

    .details .detaRight {
        margin-top: -4px;
    }

    .details .detaRight p {
        padding-bottom: 8px;
    }

    .header .moreTv {
        padding: 5px 10px;
        height: 38px;
    }

    .moreTv .logo {
        width: 36px;
        height: 36px;
    }

    .moreTv .text {
        padding: 0px 0 0 12px
    }

    .playContent .playTop {
        width: 164px;
        height: 168px;
    }

    .playTop .topLeft {
        height: 168px;
    }

    .moreTv .install {
        width: 48px;
        height: 24px;
        line-height: 24px;
    }

    .moreTv .close {
        width: 20px;
        height: 20px;
        margin: 5px 0 0 14px;
    }

    .header .myBoxes {
        width: 62px;
        height: 30px;
        top: -47px;
        margin-right: 10px;
    }

    .myBoxes > a {
        line-height: 26px;
    }

    .myBoxes .boxes {
        left: -139px;
        width: 200px;
    }

    .myBoxes .boxes li {
        padding: 0 7px;
        height: 38px;
        line-height: 38px;
    }

    .playContent .playSelections > a {
        height: 30px;
        line-height: 30px;
    }

    .playSelections .content li {
        height: 34px;
        line-height: 34px;
    }

    .myBoxes .boxes li i {
        width: 18px;
        height: 14px;
    }

    .myBoxes .boxes li span {
        max-width: 154px;
    }

    .playTop .volumnProgressBarBox, .volumnProgressBar, .volumnProgressBarOn {
        height: 176px;
    }

    .playTop .topRight .volumeOn, .playTop .topRight .volumeOff {
        margin-top: 15px;
    }

    .playContent .playBottom {
        margin-top: 40px;
    }

    textarea, input[type="text"], input[type="password"] {
        padding: 6px 0;
    }

    .search .searchInput input[type="text"] {
        text-indent: 8px;
        height: 19px;
        line-height: 19px;
    }

    .pin input[type="text"] {
        height: 19px;
        line-height: 19px;
    }

    .headerBar {
        height: 44px;
        line-height: 44px;
        z-index: 100;
    }

    .classifyMenu li {
        height: 24px;
        line-height: 24px;
    }

    .mySubscription, .subscription {
        padding-top: 45px;
    }

    .categoryBox {
        top: 0;
    }

    .headSpace {
        height: 87px;
    }

    .backBtn {
        margin-top: 10px;
    }

    .subscription .tag {
        width: 70px;
        top: 45px;
    }

    .subscription .tag a {
        height: 42px;
        line-height: 42px;
    }

    .subscription .content {
        margin-left: 70px;
    }

    .subscription li {
        padding: 7px 0;
    }

    .subscription li .text {
        margin: 0 40px 0 80px;
    }

    .subscription li .select {
        width: 26px;
        height: 26px;
        margin-top: 20px;
        margin-right: 10px;
    }

    .arrowLeft, .arrowRight, .arrowUp, .arrowDown {
        top: -20px;
    }

    .controller .footer {
        height: 88px;
    }

    .controller .footer ul {
        padding: 26px 0;
    }

    .controller .footer div {
        height: 72px;
    }

    .controller .footer div::before {
        height: 52px;
    }

    .controller .footer i.home {
        width: 18px;
        height: 18px;
        top: -30px;
    }

    .controller .footer i.menu {
        width: 16px;
        height: 14px;
        top: -28px;
    }

    .controller .footer i.back {
        top: -29px;
        width: 27px;
        height: 20px;
    }

    .list li .shade span, .list li .shade span.red {
        font-size: 12px;
    }

    .mySubscription li .shade span, .mySubscription li .shade span.red {
        font-size: 12px;
    }

    .list li .shade {
        bottom: 28px;
        height: 18px;
        line-height: 18px;
    }

    .mySubscription li .shade {
        height: 18px;
        line-height: 18px;
    }
    .list .shortInfo li p,.mySubscription .content.shortInfo li p{height: 36px;}
    .arrowLeft, .arrowRight, .arrowUp, .arrowDown {
        top: -21px;
    }

    #wrapper {
        margin-top: 58px;
    }
    .hotPlay{margin-top:-44px;}
    .hotPush,.hotLive{width:38px; height: 38px;}

}

.unconnect {
    color: #ff0000;
}