/* ============================================================
   www.cqcjsh.com/netcourse - 移动端适配版 publice.css
   修改说明：全局盒模型、图片自适应、字体单位调整
   ============================================================ */

/* 全局盒模型 */
*, *::before, *::after {
  box-sizing: border-box;
}

/** 通用样式 **/
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td, img{
	border: medium none;
	margin: 0;
	padding: 0;
}

body,button, input, select, textarea{
	font: 12px/1.5 'Simsun',tahoma, Srial, helvetica, sans-serif;
}

h1, h2, h3, h4, h5, h6{
	font-size: 100%;
	font-weight: normal;
}

em{font-style:normal;}

ul, ol{list-style: none;}

a{text-decoration: none;color:#333;outline: none;}
a:hover{text-decoration: none;}

fieldset, img { 
	border: medium none; 
	vertical-align: middle;
}

/* 全局图片自适应 */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

body a{
	outline: none;
}

a:focus {outline:none;-moz-outline:none;}

a:hover{
	text-decoration: none;
	color: #0b6cb8;
	-moz-transition: all 0.3s ease-in; 
	-webkit-transition: all 0.3s ease-in; 
	-o-transition: all 0.3s ease-in; 
	transition: all 0.3s ease-in;
}

/*火狐去掉按钮、连接的虚线*/
a:focus, a:active,
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
	border: 0;
	outline: 0;
}

a:hover{text-decoration: none;}

body a{outline:none;}
a:focus {outline:none;-moz-outline:none;}
a{blr:expression(this.onFocus=this.blur());}
a.hidefocus{outline:none} 

img:hover{ 
	-moz-transition: all 0.3s ease-in; 
	-webkit-transition: all 0.3s ease-in; 
	-o-transition: all 0.3s ease-in; 
	transition: all 0.3s ease-in;
}

.clearfix:after{
	clear:both;
	content:"\200B";
	display:block;
	height:0;
}
.clearfix{*zoom:1;}

.fl{float:left;}
.clear{clear: both;}
.fr{float:right;}

/* 固定宽度改为流式 */
.w980{
	width: 100%;
	max-width: 980px; 
	height: auto; 
	margin: 0 auto;
	padding: 0 10px;
}

.hide{display:none}
.a3a3a2{color: #a3a3a2;}

input,textarea,select{
	font-family: "微软雅黑";
}

*{margin:0;padding:0;list-style-type:none;}

a,img{border:0;text-decoration:none;}

body{
	font-family: "微软雅黑";
	background: #eee;
}

.vsb-container{text-align: center;}

/* 课程网格容器 - 改为Flexbox */
.winstyle1027722 {
	width: 100%;
	max-width: 930px;
}
.winstyle1027722 table {
	width: 100%;
	border-collapse: collapse;
}
.winstyle1027722 tbody {
	display: flex;
	flex-wrap: wrap;
}
.winstyle1027722 tr {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}
.winstyle1027722 tr td {
	flex: 1 1 calc(33.333% - 10px);
	min-width: 250px;
	max-width: 300px;
	height: auto;
	margin: 5px;
	padding: 10px;
	text-align: left;
	background-color: #fff;
	border: 1px solid #eee;
	vertical-align: top;
}
.winstyle1027722 tr td table{
	border: none;
	width: 100%;
}
.winstyle1027722 tr td img {
	width: 100%;
	height: auto;
	margin-bottom: 10px;
}

/* ============================================================
   移动端媒体查询
   ============================================================ */

/* 平板竖屏 / 大手机 (max-width: 768px) */
@media screen and (max-width: 768px) {
	.w980 {
		width: 100% !important;
		max-width: 100% !important;
		padding: 0 10px;
		box-sizing: border-box;
	}

	.winstyle1027722 {
		width: 100% !important;
		max-width: 100% !important;
	}
	.winstyle1027722 tr td {
		flex: 1 1 calc(50% - 10px) !important;
		max-width: calc(50% - 10px) !important;
		min-width: 200px;
	}

	/* 取消浮动 */
	.fl, .fr {
		float: none !important;
	}
}

/* 手机竖屏 (max-width: 480px) */
@media screen and (max-width: 480px) {
	body {
		font-size: 14px;
	}

	.w980 {
		padding: 0 5px;
	}

	.winstyle1027722 tr td {
		flex: 1 1 100% !important;
		max-width: 100% !important;
		min-width: auto;
	}

	/* 图片全宽 */
	.winstyle1027722 tr td img {
		width: 100% !important;
		height: auto !important;
	}
}