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

/*样式重置（reset）*/
body,h1,h2,h3,h4,h5,h6,p,dl,dt,dd,ul,ol,form,input,textarea,th,td,select{ margin:0; padding:0; }
em{ font-style: normal; }
li{ list-style: none; }
a{ text-decoration: none; color:#333;}
a,a:hover { text-decoration: none; outline: none;  }
i{ font-style: normal; }
img{ border: none;}
table{ border-collapse: collapse; }
input, select, textarea { border: none; outline: none; background: none }
textarea{ resize: none; overflow: auto; }
dl{ display: block; }
dt{ float: left; }
body{font-family: 'Microsoft Yahei',sans-serif,arial;font-size: 14px; color: #333;background: #fff;}
*{ line-height: 150%; box-sizing: border-box; -moz-box-sizing:border-box; /* Firefox */ 	-webkit-box-sizing:border-box; /* Safari */}
/*public*/
.fl{ float: left; }
.fr{ float: right;}
.clearfix:before, .clearfix:after {content:"";display:table;}
.clearfix:after{clear:both;overflow:hidden;}
.clearfix{zoom:1;}
.text-hidden{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.wrap{width: 1424px; margin: 0 auto;}
div ::-webkit-scrollbar {
  overflow: visible;
  width: 8px; 
}
div ::-webkit-scrollbar-thumb {
  background-color: #e6e6e6;
  border-radius: 8px;
  min-height: 15px; 
}


/*header*/
.header{ position: relative; height: 80px; }
.logo-img{ float: left; padding: 15px 0; }
.logo-img img{ display: block; width: 216px; height: 50px; object-fit: cover; overflow: hidden; }
.header-nav{ float: left; margin-left: 60px; }
.header-nav ul li{ float: left; display: block;  }
.header-nav ul li a{ display: block; line-height: 80px; padding: 0 20px; font-size: 16px; }
.header-nav ul li.active a,.header-nav ul li:hover a{ background: #04a7ec; color: #fff; transition: background .3s; }
.header-login-box,.header-login,.header-search,.header-area{ float: right; }
.header-login-box a{display: inline-block; line-height: 80px; margin-left: 24px; }
.header-login{ position: relative; cursor: pointer; width: 80px; height: 80px; margin-left: 24px; text-align: center; }
.header-login .login-img{ position:relative; display: inline-block; padding: 25px 0; }
.header-login .login-img img{ display: block; width: 30px; height:30px; border: 1px solid #333; border-radius: 50%; object-fit: cover; overflow: hidden; }
.header-mes{ position: absolute; top:21px; right: 50%; margin-right: -20px; width: 8px; height: 8px; border-radius: 50%; background: #fe5149; }
.header-login-list{ display: none; position: absolute; z-index: 9; right: 0; top:80px; width: 140px; background: #fff;  box-shadow: -3px 3px 10px 0px rgba(0,0,0,.2); }
.header-login-list li{ display: block; text-align: center; }
.header-login-list .identity{ line-height: 60px;border-bottom: 1px solid #eaeaea; color: #333;cursor: default;}
.header-login-list .logout{ border-top: 1px solid #eaeaea; }
.header-login-list li a{ display: block; line-height: 50px; color: #666; }
.header-login-list li:hover a{ background: #e7f8ff; color: #333; }
.header-search{ height: 80px; }
.header-search .search-btn{ display: inline-block; width: 30px; height: 100%; background: url(../images/icon_search.png) no-repeat center; margin-left: 15px; }
.header-area{ width: 160px; height: 20px; line-height: 20px; padding: 0 10px 0 25px; margin: 30px 0; background: url(../images/icon_position.png) no-repeat 0 center; border-right: 1px solid #acacac; }
.header:after{ position: absolute; z-index: 2; content: "";width: 100%; height: 8px; bottom: 0px; -webkit-box-shadow: 0px 4px 8px rgba(0,0,0,.08);-moz-box-shadow: 0px 4px 8px rgba(0,0,0,.08); box-shadow: 0px 4px 8px rgba(0,0,0,.08);}

.header-search-box{ display: none; position: absolute; z-index: 2; left: 50%; top:0; margin-left: -228px; width: 456px; background: #fff; }
.search-area{ padding: 20px 0; }
.search-area-text{ display: block; width: 100%; padding: 0 60px; line-height: 40px;font-size: 16px; }
.search-area-btn,.search-area-close{ position: absolute; top:20px; display: inline-block; width: 60px;height: 40px; cursor: pointer;}
.search-area-btn{ right: 0; background: url(../images/icon_search.png) no-repeat center center;  }
.search-area-close{ left: 0; line-height: 40px; font-size: 20px; text-align: center; }
.search-des{ display: block; line-height: 40px; padding: 10px 20px 0; font-size: 14px; color: #333; }
.search-history ul{ padding-bottom: 15px; }
.search-history ul li{ display: block; line-height: 50px; padding: 0 20px; color: #666; font-size: 16px; }
.search-history ul li:hover{ background: #e7f8ff; font-size: 18px; color: #333;}

.footer{ padding: 15px 0; background: #333; text-align: center; color: #fff; }
.footer p{ line-height: 26px;}

/*课程列表*/
.course-list li{ display: block; width: 320px; float: left;margin-right: 48px; margin-bottom: 30px; }
.course-list li:nth-child(4n){ margin-right: 0; }
.course-list .course-img{ position: relative; height: 196px; overflow:hidden; margin-bottom: 14px; border-radius: 10px; }
.course-list .course-img img{ width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease 0s;-webkit-transition: -webkit-transform 0.3s ease 0s;-moz-transition: -moz-transform 0.3s ease 0s;}
.course-list li h4{ font-size: 16px; line-height: 30px; font-weight: normal; }
.course-list .course-des span{ line-height: 25px;}
.course-list .course-people{ float: left; color: #acacac; }
.course-list .course-price{ float: right;}
.course-list li:hover .course-img{-webkit-box-shadow: 0 0 15px rgba(0,0,0,.3);-moz-box-shadow: 0 0 15px rgba(0,0,0,.3); box-shadow: 0 0 15px rgba(0,0,0,.3);}
.course-list li:hover img{ transform: scale(1.1);-webkit-transform:scale(1.1);-moz-transform:scale(1.1); }
.course-list li:hover h4 a{ color: #04a7ec; }
.course-list li:hover .course-people{ color: #333; }
.course-tip{ position: absolute; right: 15px; bottom: 15px; display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: 12px; color: #fff; }
.tip-live{ background: rgba(4,167,236,.8); }
.tip-video{ background: rgba(0,0,0,.6); }

/*热门新闻*/
.hot-list-title{ height: 35px; line-height: 35px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hot-list-title a{ color: #acacac;}
.hot-list-title .num{ float: left; display: block; width: 16px; height: 16px; margin-top: 9.5px; margin-right: 14px; line-height: 14px; border-radius: 2px; font-size: 12px; border: 1px solid #fe5149; color: #fe5149; text-align: center; }
.hot-list-info{ display: none;}
.hot-list li:first-child .hot-list-info{ display: block; }
.hot-list-info{ position: relative; padding: 3px 0 5px;  }
.hot-list-info span{ display: inline-block; font-size: 12px;color: #acacac; }
.hot-list-info .tip{ margin-left: 35px; float: left; max-width: 90px; padding: 0 2px; border-radius: 2px; background: #04a7ec; color: #fff; }
.hot-list-info .tip a{ color: #fff; }
.hot-list-info .scan{ position: absolute; left: 130px; padding-left: 20px; background: url(../images/icon_scan.png) no-repeat left center; background-size: 15px auto; color: #fe5149;  }
.hot-list-info .publish{ float: right; }
.hot-list li:nth-child(1) .num,.hot-list li:nth-child(2) .num,.hot-list li:nth-child(3) .num{ background: #fe5149; color: #fff; }

/*分页*/
.page{ padding: 70px 0 120px; text-align: center; }
.page ul{ display: inline-block; }
.page ul li{ display: inline-block; margin: 0 5px; float: left; }
.page ul li a{ display: inline-block; color: #fff; padding: 5px 12px; border-radius: 15px; color: #333;}
.page ul li.disabled a{ cursor: default; color: #666; }
.page ul li.current a{ background: #04a7ec; color: #fff;}
.page ul li:hover a{ background: #d8f3ff;}
.page ul li.current a:hover{ background: #04a7ec; }

@media screen and (max-width: 1500px) {
  .wrap{width: 1180px; }
  
  .course-list li{ width: 23.5%; margin-right: 2%;}
	.course-list .course-img{ height: 170px; }
}
@media screen and (max-width: 1280px) {
	.wrap{width: 1000px; }

  .course-list .course-img{ height: 144px;}
	.page{ padding: 30px 0 80px; }
	.header-nav{ margin-left: 30px;}
	.header-area{ width: 110px;}
	.header-login{ margin-left: 15px;}
}