/*自写全局样式*/
html,body,div,span,h1,h2,h3,h4,h5,h6,p,a,em,img,strong,b,dl,dt,dd,ol,ul,li,form,label,table,tbody,tr,th,td,header,nav,video{margin:0;padding:0}
html{overflow-x:auto;overflow-y:scroll;box-sizing:border-box;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
*,*:before,*:after{box-sizing:inherit}
html,body{font:15px/1.5"Microsoft YaHei","PingFang SC","Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;color:#333}
h1,h2,h3,h4,h5,h6{font-weight:normal}
h1{font-size:36px}
h2{font-size:30px}
h3{font-size:22px}
h4{font-size:18px}
h5{font-size:14px}
h6{font-size:12px}
video{border:none;outline:none;vertical-align:middle}
ol,ul{list-style:none}

table{border-collapse:collapse;border-spacing:0}
select{outline:none;background:none;border-radius:3px;border:1px solid#ccc;padding:4px;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);transition:border-color ease-in-out 0.25s,box-shadow ease-in-out 0.25s}
input{height:40px;line-height:40px;outline:none;background:none;border:1px solid#ccc;border-radius:4px;transition:all 0.3s ease-in-out; padding: 0 8px;}
textarea{outline:none;background:none;border:1px solid#ccc;border-radius:4px;transition:all 0.3s ease-in-out}
input::placeholder,textarea::placeholder{color:#ccc; font-family: Verdana, Geneva, Tahoma, sans-serif;}
button{overflow:visible;vertical-align:middle;outline:none;border:none;border-radius:4px;color:#fff;text-align:center;background-color:cornflowerblue;&:disabled{cursor:not-allowed}}
input[type="button"],input[type="submit"],input[type="file"],button{cursor:pointer}
a{text-decoration:none;cursor:pointer;color:#333;}
a:focus{outline:none}
a:hover,a:active{outline:none}
img{border:0;}
.cl:after,.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.cl,.clearfix{zoom:1}
.hidden{display:none!important}
.visible-hidden{visibility:hidden}
[v-cloak]{display:none!important}
/* -------------- 背景颜色 -------------- */
.left{text-align: left;}
.right{text-align: right;}
.gray{background: #f4f7fa;}
.white{background: #Fff;}
/* -------------- 盒子相关 -------------- */
.wrap{width:100%; overflow: hidden; padding-bottom:80px;}
.box{max-width:1400px;margin:0 auto}
.overflow-hidden{overflow:hidden}
/*---------------盒子相关--------------*/
.fixed{position:fixed}
.absolute{position:absolute}
.relative{position:relative}
.position-half{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}

/* ------------ flex布局相关 ------------ */
.flex{display:flex}
.flex-box{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}
.flex-j{display: flex; justify-content: space-between;flex-flow: wrap;}
.flex-start{display: flex; align-items:flex-start; justify-content: space-between;}
.flex-start-center{display: flex; justify-content: space-between; align-items: center; flex-flow: wrap;}
.flex-c{display:flex; align-items: center;}

.grid{display:flex;justify-content:space-between;flex-wrap:wrap}
.col-4{width: 23%; margin-bottom: 20px;}
.col-2{width: 48%;}
.col-2-r{width: 48%;}
.col-5{width: 20%;}
.col-5-g{width: 19.5%;}
.col-5-r{width: 20%;}
.col-3{width: 32%;}
.col-3-r{width: 32%;}
.col-4-r{width: 25%;}
/*margin*/
.mt-30{margin-top: 30px;}

@media screen and (min-width:769px) and (max-width:1199px)
{
	.col-3{width: 100%;}	
	.col-5-r{width: 50%;}
	.col-5-g{width: 50%;}
	.col-4-r{width: 50%;}
	@media screen and (min-width:992px)and (max-width:1199px)
	{
		.wrap{padding-bottom: 60px;}
	}
	@media screen and (min-width:769px)and (max-width:991px)
	{
		.wrap{padding-bottom: 50px;}
	}
}
@media screen and (max-width:768px)
{
	
	.hidden-xs {display: none !important;}
	.box {max-width: 94%;}
	.mt-30{margin-top: 15px;}
	.col-2{width: 100%;}
	.col-3{width: 100%;}
	.col-2-r{width: 100%;}
	.col-4-r{width: 100%;}
	@media screen and (min-width:361px)and (max-width:768px)
	{
		.col-3-r{width: 48%;}
		.col-4{width: 48%;}
		.wrap{padding-bottom: 30px;}
		.col-5-r{width: 50%;}
		.col-5-g{width: 100%;}
	}
	@media screen and (max-width:360px)
	{
		.col-4{width: 100%;}
		.col-3-r{width: 100%;}
		.wrap{padding-bottom: 20px;}
		.col-5-r{width: 100%;}
		.col-5-g{width: 100%;}
	}
}

@media screen and (min-width:769px)and (max-width:1199px)
{
 	.box{width: 94%;}
}
/* 下面是响应式显示隐藏 */
@media (min-width: 769px)
{
	.visible-xs {display: none !important;} /*最小屏幕宽度为769时候，移动菜单隐藏*/
}