@charset "utf-8";
/* CSS Document */
body{margin:0;padding:0;font-size:12px;background-color:#fff;font-family:"微软雅黑";}
img{border:none;}
a{text-decoration:none;}
ul{list-style:none;}
p,h1,h2,h3,h4,h5,h6,ul,li,ol,img,form{margin:0;padding:0;}
h1,h2,h3,h4,h5{font-size:14px;font-weight:900;}	
.clear{	clear: both;}

#online_banner{ width: 100%;}
#online_banner_pc{ width: 100%; background:url(../images/online_banner_bg.jpg) no-repeat center;}
#online_banner_pc img{ display: block; margin: 0 auto;}
#online_banner_yd{ display: none;}
#online_banner_yd img{ width: 100%;}

.online_title{ width: 1220px; margin: 0 auto; text-align: center; padding-bottom: 30px;}
.online_title h2{ font-size: 42px; color: #2e2e2e; padding: 30px 0 8px;}
.online_title h3{ font-size: 20px; color: #585858; font-weight: normal;}
.online_title h2.online_title_color,.online_title h3.online_title_color{ color: #fff;}

#online_hot{ width: 1220px; margin: 0 auto;}
#online_hot ul li{ float: left; margin:0 0 20px 20px; }
#online_hot ul li:nth-of-type(4n+1){ margin-left: 0;}
.online_hot_box{ width: 100%; position: relative; overflow: hidden;}
.online_hot_box>img{ width: 100%; display: block;}
.online_hot_mask{ width: 100%; height: 220px; position: absolute; top: 0; left: 0; }
.online_hot_mask img{ padding:70px 0 0 106px;}
.online_hot_area{ width: 100%; background: #f8f8f8; padding-bottom: 40px;}
.online_hot_area h4{ font-size: 24px; color: #363636; padding:15px 0 10px 10px;}
.online_hot_area h5{ font-size: 16px; color: #858585; font-weight: normal; padding:0 0 30px 10px;}
.online_hot_area a{ display: block; width: 174px; height: 46px; background-image: linear-gradient(to right, #ff603f,#ff8641); border-radius: 50px; color: #fff; text-align: center; line-height: 46px; margin: 0 auto; font-size: 18px;}

#online_hot ul li:hover .online_hot_mask{ background: rgba(0,0,0,0.3);}

#online_free{ width: 100%; background: #f8f8f8; padding-bottom: 40px;}
#online_free_main{ width: 1220px; margin: 0 auto;}
#online_free_sub{ width: 1220px; margin: 0 auto 30px;}
#online_free_sub h4{ width: 180px; height: 52px; line-height: 52px; float: left; background: #fff; font-size: 20px; color: #2e2e2e; text-align: center; margin-left: 30px; font-weight: normal; border-radius: 50px;}
#online_free_sub h4:nth-of-type(1){ margin-left: 100px;}
#online_free_sub h4.online_free_color{ background: #ed0a0e; color: #fff;}

#online_free_exp{ width: 1220px; margin: 0 auto;}
.online_free_region{ width: 1220px; margin: 0 auto; display: none}
.online_free_region ul li{ float: left; margin-left: 20px;}
.online_free_region ul li:nth-of-type(4n+1){ margin-left: 0;}
.online_free_region ul li h4{ font-size: 18px; color:#363636; font-weight: normal; line-height: 36px; padding:0 0 20px 10px;}
.online_free_box{ width: 100%; position: relative; overflow: hidden;}
.online_free_mask{ width: 100%; height: 220px; position: absolute; top: 0; left: 0;}
.online_free_mask img{ padding:70px 0 0 106px;}

.online_free_region ul li:hover .online_free_mask{ background: rgba(0,0,0,0.3);}

#online_free_main>a,#online_record a,#online_class>a,#vision_aid a{ display: block; width: 320px; height: 70px; background: #fc2ba5; margin: 20px auto 30px; text-align: center; line-height: 70px; color: #fff; font-size: 28px; border-radius: 50px;}

#online_record{ width: 100%; background:#822dc7 url(../images/online_record_bg.jpg) no-repeat center; padding-bottom: 30px;}
#online_record_main{ width: 1220px; margin: 0 auto;}
#online_record_main ul li{ width: 600px; float: left; margin:0 0 30px 20px;}
#online_record_main ul li:nth-of-type(2n+1){ margin-left: 0;}
#online_record_main ul li video{ width: 600px; background: #000;}
#online_record_main ul li video:focus {outline:none;}
.online_record_area{ width: 100%; background: #fff; padding: 20px 0;}
.online_record_area p{ font-size: 20px; color: #5a5a5a; line-height: 32px; text-align: center;}

/*actual*/ 
#about_actual_big{ width: 100%;  background: url(../images/yshq_actual_bg.png) no-repeat center; padding: 10px 0; margin-bottom: 50px;}
#about_actual{ width: 1220px; height: 718px; margin: 0 auto; position: relative;  }
#about_actual ul li{ position: absolute;}
#about_actual ul li.about_actual_w1{ top: 0; left: 0;}
#about_actual ul li.about_actual_w2{ top: 0; left: 510px;}
#about_actual ul li.about_actual_w3{ top: 0; left: 882px;}
#about_actual ul li.about_actual_w4{ top: 258px; left: 0;}
#about_actual ul li.about_actual_w5{ top: 258px; left: 348px;}
#about_actual ul li.about_actual_w6{ top: 258px; left: 615px;}
#about_actual ul li.about_actual_w7{ top: 470px; left: 348px;}
#about_actual ul li.about_actual_w8{ top: 470px; left: 720px;}

#about_actual_yd{ display: none;}
/*actualOver*/ 

#online_package{ width: 100%; background: #5061f2;}

/*实录课堂*/
#online_class{ width: 100%;}
#online_class_main{ width: 1220px; margin: 0 auto;}
#online_class_main ul li{ width: 356px; float: left; background-color: #fff; border-radius: 16px; padding: 16px; margin:0 0 30px 28px;}
#online_class_main ul li:nth-of-type(3n+1){ margin-left: 0;}
#online_class_main ul li img{ display: block; border-radius: 10px;}
#online_class_main ul li h4{ font-size: 24px; color: #1e1e1e; text-align: center; font-weight: normal; padding:15px 0 5px;}
.online_class_box{ width: 100%; position: relative;}
.online_class_mask{ position: absolute; left: 10px; bottom: 10px;}
.online_class_mask img{ width: 18%;}
/*实录课堂*/

/*实训就业*/
#vision_aid{ width: 100%; padding-bottom: 50px;}
#vision_aid_main{ width: 1220px; margin: 0 auto;}
#vision_aid_main ul li{ float: left; margin:0 0 30px 39px; }
#vision_aid_main ul li:nth-of-type(3n+1){ margin-left: 0;}
#vision_aid_main ul li img{ display: block; width: 100%;}
.vision_aid_area{ width: 380px; text-align: center; background-color: #fff;}
.vision_aid_area h4{ font-size: 30px; color: #353535; padding-top: 20px;}
.vision_aid_area p{ font-size: 20px; color: #707070; padding: 5px 0 20px;}
/*实训就业*/

/*学习环境*/
#online_place{ width: 100%;}
#online_place ul li{ float: left; margin-left: 0.55%; margin-bottom: 0.55%;}
#online_place ul li img{ width: 100%; display: block; }
#online_place ul li:nth-of-type(5n+1){ margin-left: 0;}
#online_place ul li.online_space_w1{ width: 24.45%;}
#online_place ul li.online_space_w2{ width: 16.2%;}
/*学习环境*/

/*教学专场*/
#address_session{ width: 1220px; margin: 0 auto;}
#address_session ul li{ float: left; margin:0 0 10px 12px;}
#address_session ul li img{ display: block; width: 100%;}
#address_session ul li:nth-of-type(4n+1){ margin-left: 0;}
/*教学专场*/

/*Ipid*/
@media only screen and (min-width: 768px) and (max-width: 1024px){
	#online_banner_pc{ display: none;}
	#online_banner_yd{ display: block;}
	
	.online_title{ width: 100%; padding-bottom: 1.6rem;}
	.online_title h2{ font-size: 2.4rem;  padding: 1.6rem 0 0.2rem;}
	.online_title h3{ font-size: 1.6rem;}
	
	#online_hot{ width: 100%;}
	#online_hot ul li{ width: 47%; margin:0 0 1rem 2%; }
	#online_hot ul li:nth-of-type(4n+1){ margin-left: 2%;}
	.online_hot_mask{ height: 18rem;}
	.online_hot_mask img{ padding:6rem 0 0 9rem;}
	.online_hot_area{ padding-bottom: 2rem;}
	.online_hot_area h4{ font-size: 1.6rem; padding:1rem 0 0.6rem 1rem;}
	.online_hot_area h5{ font-size: 1.2rem; padding:0 0 2rem 1rem;}
	.online_hot_area a{ width: 60%; height: 3.6rem; line-height: 3.6rem; font-size: 1.4rem;}
	
	#online_free{ width: 100%;}
	#online_free_sub{ width: 100%; margin: 0 auto 0.5rem;}
	#online_free_sub h4{ width: 30%; height: 3.6rem; line-height: 3.6rem; font-size: 1.4rem; margin:0 0 1rem 2.5%;}
	#online_free_sub h4:nth-of-type(1){ margin-left: 2.5%;}
	
	#online_free_exp{ width: 100%;}
	.online_free_region{ width: 100%;}
	.online_free_region ul li{ width: 47%; margin-left: 2%;}
	.online_free_region ul li:nth-of-type(4n+1){ margin-left: 2%;}
	.online_free_region ul li h4{ font-size: 1.4rem; line-height: 2.6rem; padding:0 0 1rem 1rem;}
	.online_free_box>img{ width: 100%; display: block;}
	.online_free_mask{ height: 18rem; }
	.online_free_mask img{ padding:6rem 0 0 9rem;}
	
	#online_free>a,#online_record a,#online_class>a,#vision_aid a{ width: 40%; height: 4.0rem; margin: 1rem auto 2rem; line-height: 4.0rem; font-size: 1.4rem; }
	
	#online_record{ padding-bottom: 0.5rem;}
	#online_record_main{ width: 100%;}
	#online_record_main ul li{ width: 90%; float: none; margin:0 0 1.5rem 5%;}
	#online_record_main ul li:nth-of-type(2n+1){ margin-left: 5%;}
	#online_record_main ul li video{ width: 100%;}
	.online_record_area{ padding: 1rem 0;}
	.online_record_area p{ font-size: 1.4rem; line-height: 2.6rem; }
	
	#about_actual_big{ display: none;}
	#about_actual_yd{ display: block; width: 100%; padding-bottom: 2rem;}
	#about_actual_yd ul li{ width: 47%; height: auto; margin:0 0 1rem 2%; float: left;}
	#about_actual_yd ul li img{ width: 100%; display: block;}
	
	#online_class{padding-bottom: 0.5rem;}
	#online_class_main{ width: 100%;}
	#online_class_main ul li{ width: 43%; padding: 1rem; margin:0 0 1rem 2%;}
	#online_class_main ul li:nth-of-type(3n+1){ margin-left: 2%;}
	.online_class_box>img{ width: 98%; }
	#online_class_main ul li h4{ font-size: 1.4rem; padding:1.5rem 0 0.5rem;}
	
	#vision_aid{ padding-bottom: 1rem;}
	#vision_aid_main{ width: 100%;}
	#vision_aid_main ul li{ width: 47%; margin: 0 0 1.0rem 2%;}
	#vision_aid_main ul li:nth-of-type(3n+1){ margin-left: 2%;}
	.vision_aid_area{ width: 100%; }
	.vision_aid_area h4{ font-size: 1.8rem; padding-top: 1.6rem;}
	.vision_aid_area p{ font-size: 1.2rem;  padding: 0.3rem 0 1.6rem;}
	
	#online_place ul li{ margin-left: 2%; margin-bottom: 1rem;}
	#online_place ul li:nth-of-type(5n+1){ margin-left: 2%;}
	#online_place ul li.online_space_w1{ width: 47%;}
	#online_place ul li.online_space_w2{ display: none;}
	
	#address_session{ width: 100%;}
	#address_session ul li{ width: 47%; margin:0 0 1rem 2%;}
	#address_session ul li:nth-of-type(4n+1){ margin-left: 2%;}
}

/*ipone*/
@media only screen and (min-width: 320px) and (max-width: 767px){
	#online_banner_pc{ display: none;}
	#online_banner_yd{ display: block;}
	
	.online_title{ width: 100%; padding-bottom: 1.0rem;}
	.online_title h2{ font-size: 1.6rem;  padding: 1.0rem 0 0.1rem;}
	.online_title h3{ font-size: 1.0rem; padding: 0 1rem;}
	
	#online_hot{ width: 100%;}
	#online_hot ul li{ width: 90%; margin:0 0 1rem 5%; }
	#online_hot ul li:nth-of-type(4n+1){ margin-left: 5%;}
	.online_hot_mask{ height: 12rem;}
	.online_hot_mask img{ padding:4.5rem 0 0 6.5rem;}
	.online_hot_area{ padding-bottom: 1rem;}
	.online_hot_area h4{ font-size: 1.2rem; padding:0.5rem 0 0.6rem 0.8rem;}
	.online_hot_area h5{ font-size: 1.0rem; padding:0 0 1rem 0.8rem;}
	.online_hot_area a{ width: 50%; height: 2.6rem; line-height: 2.6rem; font-size: 1.2rem;}
	
	#online_free{ width: 100%;}
	#online_free_sub{ width: 100%; margin: 0 auto 0.2rem;}
	#online_free_sub h4{ width: 47%; height: 3.2rem; line-height: 3.2rem; font-size: 1.2rem; margin:0 0 0.5rem 2%;}
	#online_free_sub h4:nth-of-type(1){ margin-left: 2%;}
	
	#online_free_exp{ width: 100%;}
	.online_free_region{ width: 100%;}
	.online_free_region ul li{ width: 90%; margin:0 0 0.5rem 5%;}
	.online_free_region ul li:nth-of-type(4n+1){ margin-left: 5%;}
	.online_free_region ul li h4{ font-size: 1.0rem; line-height: 1.8rem; padding:0 0 0.5rem 1rem;}
	.online_free_box>img{ width: 100%; display: block;}
	.online_free_mask{ height: 12rem; }
	.online_free_mask img{ padding:4.5rem 0 0 6.5rem;}
	
	#online_free>a,#online_record a,#online_class>a,#vision_aid a{ width: 70%; height: 3.0rem; margin: 0.6rem auto 1.5rem; line-height: 3.0rem; font-size: 1.2rem;}
	
	#online_record{ padding-bottom: 0.2rem;}
	#online_record_main{ width: 100%;}
	#online_record_main ul li{ width: 90%; float: none; margin:0 0 0.8rem 5%;}
	#online_record_main ul li:nth-of-type(2n+1){ margin-left: 5%;}
	#online_record_main ul li video{ width: 100%;}
	.online_record_area{ padding: 0.6rem 0;}
	.online_record_area p{ font-size: 1.0rem; line-height: 1.4rem; }
	
	#about_actual_big{ display: none;}
	#about_actual_yd{ display: block; width: 100%; padding-bottom: 1rem;}
	#about_actual_yd ul li{ width: 94%; height: auto; margin:0 0 0.5rem 3%;}
	#about_actual_yd ul li img{ width: 100%; display: block;}
	
	#online_class{padding-bottom: 0.5rem;}
	#online_class_main{ width: 100%;}
	#online_class_main ul li{ width: 44%; padding: 0.3rem; margin:0 0 1rem 2%;}
	#online_class_main ul li:nth-of-type(3n+1){ margin-left: 2%;}
	.online_class_box>img{ width: 99%; }
	#online_class_main ul li h4{ font-size: 1.0rem; padding:0.6rem 0 0.3rem;}
	.online_class_mask img{ width: 25%;}
	
	#vision_aid{ padding-bottom: 0.5rem;}
	#vision_aid_main{ width: 100%; padding-bottom: 1rem;}
	#vision_aid_main ul li{ width: 47%; margin: 0 0 1.0rem 2%;}
	#vision_aid_main ul li:nth-of-type(3n+1){ margin-left: 2%;}
	.vision_aid_area{ width: 100%; height: 5rem;}
	.vision_aid_area h4{ font-size: 1.2rem; padding-top:0.8rem;}
	.vision_aid_area p{ font-size: 0.9rem;  padding: 0.1rem 0 0.8rem;}
	
	#online_place ul li{ margin-left: 2%; margin-bottom: 0.5rem;}
	#online_place ul li:nth-of-type(5n+1){ margin-left: 2%;}
	#online_place ul li.online_space_w1{ width: 96%;}
	#online_place ul li.online_space_w2{ display: none;}
	
	#address_session{ width: 100%; }
	#address_session ul li{ width: 47%; margin:0 0 0.5rem 2%;}
	#address_session ul li:nth-of-type(4n+1){ margin-left: 2%;}
}