@charset "utf-8";
/* CSS Document */

.wrapMax{ max-width:640px; margin:0 auto; background:#FFF;}

.seachBox{ padding:7px 8px; background:#ebecee;}
.seachBox a{ display: -webkit-box;display: -moz-box; display: -ms-flexbox; -webkit-box-align:center; -webkit-box-pack:center; height:30px; line-height:30px; width:100%; color:#CCC; position:relative; z-index:0; font-size:14px;}
.seachBox a::before{position: absolute;background: #FFF; z-index:-1; top: 0;left: 0;border: solid #e5e5e5 2px;width: 200%;height: 200%;content: ""; box-sizing: border-box;-webkit-transform: scale(.5);transform: scale(.5); -webkit-transform-origin: left top;transform-origin: left top; display:block; border-radius:6px;}
.seachBox a b{width:18px; height: 18px; background: url(http://img.learn.16q.cn/home/cx/ss.png) no-repeat; background-size:contain; display:block; margin:0px 0.2rem 0 0;}

.course{ background:#f7f7f7;}
.course ul{ background: -webkit-linear-gradient(top,transparent 50%,#d9d9d9 50%) center top no-repeat;background-size: 100% 1px; padding-top:1px;}
.course li{ width:20%; text-align:center; float:left; background: -webkit-linear-gradient(bottom,transparent 50%,#d9d9d9 50%) center bottom no-repeat;background-size: 100% 1px;}
.course li a{ display:block;text-align:center; height:85px; padding:15px 0 0 0; background: -webkit-linear-gradient(left,transparent 50%,#e7e7e9 50%) center right no-repeat;background-size: 1px 100%;}
.course li:nth-child(5) a{ background:none;}
.course li.active{ background:#FFF;}
.course li img{ display:inline-block; vertical-align:top;width:27px; height:27px; margin-bottom:10px; border-radius:4px;}
/*@media only screen and (min-width: 414px){.zonetitle li img{width:27px; height:27px;}} */
.course li p{font-size:12px; width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}

.course_content{ padding:15px 10px 0 10px;}
.course_content dt{ padding:0 5px;}
.course_content dt a{ display:block; position:relative;}
.course_content dt img{ width:100%; display:block;}
.course_content .feedma{ width:100%; position:absolute; top:0; bottom:0; background:#000; opacity:0.5;}
.course_content .cour_title{ width:100%; height:100%; position:absolute; top:0; color:#FFF; text-align:center; display:-webkit-box; -webkit-box-orient:vertical; -webkit-box-pack:center;}
.course_content .cour_title h3{ font-size:22px; padding:0 15px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;}
.course_content .cour_title p{ font-size:13px; padding:0 15px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;}
.course_content dd{ width:50%; float:left;}
.course_content dd a{ display:block; margin:10px 5px 0 5px;-webkit-box-flex:1;}
.course_content dd img{ display:block; width:100%; margin-bottom:5px;}
.course_content dd .tit{ font-size:14px; min-height:22px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;}
.course_content dd .text{ font-size:12px; min-height:20px; color:#8c8c8c; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;}
.course_content dd .urse{ float:right; font-size:12px; line-height:12px; font-size:12px; color:#8c8c8c; margin-top:4px;}
.course_content dd .urse i{ width:9px; height:10px; background:url(../images/urse_ico.png) no-repeat; background-size:contain; display:inline-block; vertical-align:top; margin-right:5px; }


@media screen and (min-width: 212px) {.course_content dd img{ height:47px;}}
@media screen and (min-width: 319px) {.course_content dd img{ height:77px;}}
@media screen and (min-width: 359px) {.course_content dd img{ height:83px;}}
@media screen and (min-width: 374px) {.course_content dd img{ height:87px;}}
@media screen and (min-width: 383px) {.course_content dd img{ height:90px;}}
@media screen and (min-width: 399px) {.course_content dd img{ height:94px;}}
@media screen and (min-width: 414px) {.course_content dd img{ height:98px;}}
@media screen and (min-width: 423px) {.course_content dd img{ height:101px;}}
@media screen and (min-width: 479px) {.course_content dd img{ height:116px;}}
@media screen and (min-width: 539px) {.course_content dd img{ height:133px;}}
@media screen and (min-width: 640px) {.course_content dd img{ height:161px;}}




/*------------直播列表---------------*/
.zlivelist { padding:0; margin:10px 15px 0 15px; background:#e6e6e6;}
.zlivelist_item { margin-top:10px; background:#FFF;}
.zlivelist_item:first-child { margin-top: 0;}
.zlivelist_pic { overflow: hidden;}
.zlivelist_pic img { width: 100%; display:block;}

.zlivelist_info { display: -webkit-box; -webkit-box-pack: justify; height:55px; background:#FFF; border-left:solid #e6e6e6 1px;border-right:solid #e6e6e6 1px;}
.zlivelist_title { -webkit-box-flex:1; margin-right:20px; padding-left:10px;}
.zlivelist_title dt { margin-top:5px; font-size:15px; color: #333; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.zlivelist_title dd { font-size:12px; color: #929292; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.zlivelist_status { display: -webkit-box; -webkit-box-orient:vertical; -webkit-box-pack:center; margin-right:10px; color: #09f; font-size: 15px;}
.zlivelist_status a { display: block; padding:4px 6px; color: #09f;}
.zlivelist_status span { display: block; padding: 0.4rem 1rem; color: #929292;}

/*直播中样式暂时去掉蓝底*/
.zlivelist_ing { background: #09f; color: #fff;}
.zlivelist_ing  .zlivelist_info{ background:none; border:0;}
.zlivelist_ing .zlivelist_title dt { color: #fff;}
.zlivelist_ing .zlivelist_title dd { color: #fff;}
.zlivelist_ing .zlivelist_status a { color: #fff; border:1px #fff solid; border-radius: 0.4rem;}



