@charset "UTF-8";
@import url("./icon.css");
@import url("./player_detail.css");

/* all */
body, html{width:100%; height:100%;}
body{ margin:0; font-family:"Microsoft YaHei", "微软雅黑", "STHeiti", "WenQuanYi Micro Hei", SimSun, sans-serif; font-size:14px; line-height:140%; color:#757575; background:#FFF;}
ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,tr{margin:0;padding:0; font-weight:normal}
input,select{font-size:12px;vertical-align:middle; border:none;}
ul,li{list-style-type:none;}
a{ transition:0.2s;}
img{border:0 none;}
.wap{ display:none}
.pc{ display:block}
/* container */
*{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box}
:after,:before{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box}
.container{ width:80%; position:relative;margin:auto; padding:0 20px; background:#FFF;}
.clearfix::after {content: "";display: table;clear: both}
.container .row {
        display: block;
        width: 100%;
    }
/* more */
h1{ font-size:18px; line-height:24px;}
h2{ font-size:18px; line-height:24px;}
h3{ font-size:18px; line-height:24px;}
h4{ font-size:16px; line-height:22px;}
h5{ font-size:14px; line-height:20px;}
h6{ font-size:12px; line-height:18px;}
a,button{ text-decoration:none; color:#AAA; outline:none; -webkit-tap-highlight-color:rgba(0,0,0,0)}
button:hover{ cursor:pointer;}
a:focus,a:hover,a:active{ text-decoration:none; color:#FFF;}
.icon{font-size: 16px;vertical-align:-1px;}
.font-16{ font-size:16px;}
.font-14{ font-size:14px;}
.font-12{ font-size:12px;}
.text-red{ color:#fe0277;}
.text-center{ text-align:center;}
.text-left{ text-align:left;}
.text-right{ text-align:right;}
.pull-right{ float:right !important;}
.mg10{ margin:10px 0;}
.cb{ clear:both; width:100%;}
.hide{ display:none !important; }
.text-overflow{ width:100%; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; white-space:nowrap;}
.pic-tag{ position:absolute; top:0; right:0; z-index:99; padding:2px 8px; font-size:12px; border-radius:0 0 0 8px; background-color:#FF9900; color:#FFFFFF;}
/* form */
input,textarea{outline:medium none; outline:none; -webkit-tap-highlight-color:rgba(0, 0, 0, 0);}
input.form-control,input.btn{ outline:0px; -webkit-appearance:none;}
input[type="checkbox"]{ vertical-align:-2px;}
textarea{ height:auto;}
/* embed */
.embed-responsive{position:relative;display:block;overflow:hidden;padding:0;height:0}
.embed-responsive .embed-responsive-item,.embed-responsive embed,.embed-responsive iframe,.embed-responsive object,.embed-responsive video{position:absolute;top:0;bottom:0;left:0;width:100%;height:100%;border:0}
.embed-responsive-16by9{padding-bottom:56.25%}
.embed-responsive-4by3{padding-bottom:75%}



/****************css****************/
.top_padding{ height:60px;}
.header{ height:60px; line-height:60px; background:#111; width:100%; position:fixed; z-index:100;}
/* logo */
.header_logo{ float:left; display:block; width:240px; height:60px; background: center center no-repeat; position:relative; overflow:hidden; overflow:hidden;}
.header_logo *{ font-size: 0;}

/* 快捷菜单 */
.header_menu_open,.header_search_open{ display:block; width:60px; height:60px; line-height:59px; font-size:20px; border-left:1px solid #555; font-weight:900; text-align:center; color:#FFF; float:right;}
.header_search_open{ display:none;}
.header_menu_open:hover,.header_search_open:hover,.ico_active{ background:#333; color:#fe0277;}
.tanchu{ display:none; width:260px; height:auto; position:fixed; top:20%; left:50%; margin-left:-130px; background:#FFF; border-radius:20px; overflow:hidden; z-index:100; border:10px solid #666; box-shadow:0px 0px 0px 2000px rgba(0,0,0,0.8); -webkit-box-shadow:0px 0px 0px 2000px rgba(0,0,0,0.8); -moz-box-shadow:0px 0px 0px 2000px rgba(0,0,0,0.8);}
.tanchu h5{ line-height:50px; width:100%; background:#F5F5F5; text-align:center; color:#fe0277; border-bottom:1px solid #eee; font-weight:900; font-size:20px;}
.tanchu div{ overflow-y:scroll; height:300px;}
.tanchu div::-webkit-scrollbar{ width:5px; background-color:#FFF;}
.tanchu div::-webkit-scrollbar-thumb{ background-color:#222;}
.tanchu div a{ display:block; width:calc(100% - 15px); line-height:40px; background:#FFF; color:#000; background:#F0F0F0; margin:10px 5px 0 10px; text-align:center; border-radius:5px;}
.tanchu div a:hover{ background:#fe0277; color:#FFF;}
.tanchu p{ width:200px; height:56px; margin:auto; line-height:30px; color:#FFF; font-size:20px; font-weight:900; text-align:center; cursor:pointer; background:#fe0277; border:10px solid #FFF; border-radius:20px;}
.tanchu p:hover{ background-color:#fa2286;}
/* search */ 
.header_search{ overflow:hidden; width:300px; float:right;}
#search{ position:relative; margin:12px;}
.header_search .form-control:hover{ background-color:#F0F0F0;}
.header_search .form-control{display:block;width:100%;height: 32px;padding:0 10px;font-size:12px;background-color:#FFF;color:#222;line-height:20px;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;}
.header_search .submit{color:#FFF;font-weight:900;display:block;background:#fe0277;position:absolute;top:0;right:0;height: 32px;line-height: 32px;width:36px;text-align:center;border:0;cursor:pointer;}

/* 导航 */
.menu{ float:left;}
.menu a,.menu span{ display:block; float:left; cursor:pointer; border-right:1px solid #222; height:60px; padding:0 12px; color:#FFF; margin-right:-3px; margin-bottom:-3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.menu a:hover,.menu span:hover,.menu a.active{ background:#fe0277;}
.menu a h2{ font-weight:900; font-size:16px; line-height:60px; margin-bottom:0; margin-top:0;}

/* 列表分类 */
.index_text{font-size: 18px;color: #000;padding: 10px;}
.index_class,.class_list{ width:100%; margin-bottom:20px;}
.class_list a,.index_class a{display:block;float:left;width: calc(10% - 5px);height: 32px;line-height: 30px;border-radius: 5px;border: 1px solid #555;font-size: 14px;font-weight:900;text-align:center;color:#222;margin:2px;background:#F0F0F0;}
.class_list a:hover,.my_active,.index_class a:hover{ background:#fe0277 !important; color:#FFF !important;}

/* 视频单元 */
.vodlist{ margin:0 -2px;}
.vodlist li{float:left;border: 3px solid #FFF;margin:0px;width:16.66666666666667%;}
.vodlist li a:hover .vod_title h4{ color:#fe0277;}
.vodlist li a:hover .play{display: block;}
.vodlist li a:hover .vod_img{ opacity:0.9;}
.vod_img{ position:relative; padding-top:65%; background-position:50% 30%; background-size:cover; background-color:#333;}
.vod_img .play{ display: none;position:absolute; top:-5px; z-index:1; width:100%; height:100%; background:url(../images/play.png) center center no-repeat;}
.vod_img .vod_tab{ width:100%; position:absolute; bottom:0; left:0; padding:5px 10px; font-size:12px;  background-image:linear-gradient(transparent,rgba(0,0,0,.5)); color:#FFF;}
.vod_title{padding: 3px;}
.vod_title h4{ font-size:13px; line-height:30px; color:#000}

/* 分页 */
.page{ padding:20px 0 20px;}
.page a{ display:inline-block; padding:5px 10px; color:#222; transition:0.2s; border:1px solid #222;}
.page a.active,.page a:hover{ background-color:#fe0277; color:#FFF;}
.page a.num{ display:none;}

/* player */
.player{ position:relative; z-index:2; overflow:hidden; border-bottom:20px solid #FFF; background-color:#222; background-position:right top; background-size:33.3333333333% 100%; background-repeat:no-repeat;}
.player .player_title{height: 40px;line-height:40px;clear:both;background:#FFF;}
.player .player_title a{width:80px;height: 30px;line-height: 28px;text-align:center;float:left;color:#000;background:#F0F0F0;border: 1px solid #222;}
.player .player_title a:hover{ background:#fe0277; color:#FFF;}
.player .player_title h1{float:left;width:calc(100% - 80px);font-weight:900;line-height: 28px;margin-top:0;margin-bottom:0;color:#222;padding-left: 10px;max-width:80%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.player_video{ background-color:#000;}
.player_left{position:relative;float:left;width: 75%;overflow:hidden;}
.player_side{position:relative;float:left;width: 25%;padding: 5px;overflow:hidden;}
.player_side li{ float:left; display:inline-block; width:100%; height:48.5px; line-height:48px; font-size:12px; text-align:center; margin-bottom:5px; margin-bottom:1px; background:#333; cursor:pointer;}
.player_side li:hover{ background:#555;}
.player_side a.play_side_img{ display:inline-block; height:400px; width:100%;}

.player_detail{height: 40px;background:#333;}
.player_detail a{display:inline-block;height: 40px;padding:0 20px;line-height: 40px;color:#FFF}
.player_detail a b{color:#FFF;font-size: 15px;}

.vodlist_more{ display:block; text-align:center; width:30%; height:36px; line-height:36px; border-radius:20px; color:#FFF; background:#444; margin:20px auto;}
.vodlist_more:hover{ background:#fe0277;}

/* 向上 */
.my_top{width: 2.25rem;height: 2.25rem;background:#fe0277 url(../images/top.png) center center no-repeat;position:fixed;right:30px;bottom: 3rem;z-index:10;cursor:pointer;border-radius: 10px;}
.my_top:hover{ background-color:#222;}
.email{ line-height:30px; text-align:center; color:#fe0277; font-weight:900; background:#F0F0F0; padding:30px 0;}
.pc4{ display:inline-block !important;}

.Play_imgAD,.Play_appAD,.bottomAD,.dingAD,.sideAD_left,.sideAD_right{ display:none;}

.Play_imgAD{ width:100%; height:auto; overflow:hidden; margin-bottom:-3px;}
.Play_imgAD img{ width:100%;}
.Play_appAD{ padding-bottom:15PX;}
.Play_appAD a{ float:left; color:#000; border-radius:6px; width:25%; text-align:center; font-weight:900; cursor:pointer; padding:5px 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:16px;}
.Play_appAD a img{ display:block; width:56px; height:56px; border-radius:12%; clear:both; margin:0 auto 6px;}
.Play_appAD a:hover{ color:#ed0242; background:#F0F0F0;}

.dingAD{ position:fixed; width:100%; height:auto; top:0;left:0; z-index:9999;}
.dingAD span{ display:block; float:left; width:20px; height:20px; line-height:20px; text-align:center; background:#F00; color:#FFF; clear:both;position:absolute; top:0;}
.dingAD a{ display:block; width:100%; height:auto;}
.dingAD a img{ width:100%; height:70px;}

.bottomAD{ position:fixed; width:100%; height:auto; bottom:0;left:0; z-index:9999;}
.bottomAD span{ display:block; float:left; width:20px; height:20px; line-height:20px; text-align:center; background:#F00; color:#FFF; clear:both;}
.bottomAD a{ display:block; width:100%; height:auto;}
.bottomAD a img{ width:100%;}

.sideAD_left,.sideAD_right{ width:70px; height:90px; position:fixed; bottom:40%; z-index:9999;}
.sideAD_left{left:0;}.sideAD_right{right:0;}
.sideAD_left a,.sideAD_right a{ display:block; width:70px; height:70px; overflow:hidden;}
.sideAD_right a img,.sideAD_left a img{ width:70px; height:70px;}
.sideAD_left span,.sideAD_right span{ display:block; width:70px; height:20px; font-size:12px; line-height:20px; text-align:center; color:#000; clear:both; background:#DDD;}
/****************css****************/
@media (max-width:1900px){
	.vodlist li{ width:20%;}
	.player_side li{ height:40.2px; line-height:40px;}
}
@media (max-width:1600px){
	.vodlist li{ width:20%; display:block !important;}
	.player_side li{ height:40.2px; line-height:40px;}
}
@media (max-width:1300px){
	.container{width:96%;}
	.header_search_open{ display:block;} 
	#search{margin: 20px 0;}
	.header_search{display:none;position:absolute;left:0;top:70px;width:100%;background: #555;padding: 0 5%;background:rgb(0,0,0,0.5)}
	.vodlist li{ width:25%;}
	.player_side li{ height:40.2px; line-height:40px;}
}
@media (max-width:1000px){
	.index_class a,.class_list a{width: calc(16.6666666666666% - 5px);}
	.container{width:100%;}
	.menu,.player_side{ display:none;}
	.my_top_banner a{ width:100%;}
	.my_top_banner a img{ height:70px;}
	.vodlist li{ width:33.333333333333333%;}
	.player_left{ width:100%;}
	.player_side{ padding-top:10px; height:95px; width:calc(100% + 2px); padding-left:0;}
	.player_side li{ float:left; width:20%; height:36px; line-height:36px; border-right:1px solid #FFF;}
}
@media (max-width:650px){
	.Play_imgAD,.Play_appAD,.bottomAD,.dingAD{ display:block; width:100%; overflow:hidden:}
	.sideAD_left,.sideAD_right{ display:block;}
	.index_class a,.class_list a{width: calc(25% - 5px);height: 30px;line-height: 28px;}
	.wap4{ display:inline-block !important;}
	.wap{ display:block;}
	.vodlist li{ width:50%;}
	.container{width:100%;padding: 0 5px;}
	.header{ height:50px; line-height:50px;}
	.header_logo{ height:50px; width:180px; background-size:160px auto;}
	.header_menu_open, .header_search_open{ height:50px; line-height:48px;}
	.header_search{ top:50px;}
	.top_padding{ height:50px;}
	.my_top_app a{ padding:0px;}
	.my_top_app a img{ width:50px; height:50px;}
	.my_top_banner a img{ height:60px;}
	.my_top_link a,.my_link a{ font-size:12px; padding:4px 6px; font-weight:400;}
	.player_side{ height:135px;}
	.player_side li{ width:25%;}
	.hidden-xs{ display:none !important;}
	.num{ display:inline-block !important;}
	.my_top{ right:5px;}
}
@media (max-width:414px){
	.player_side{ height:170px;}
	.player_side li{ width:33.3333333333333%;}
}