// display:flex属性设置
.disflexCenSmall {
  display: flex;
  align-items: center;
}
.disflexCen {
  display: flex;
  justify-content: center;
  align-items: center;
}
.disflexCenBtw {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.disflexCenAro {
  display: flex;
  justify-content: space-around;
  align-items: center;
}


// 内容部分
#contents{
	.sameStyle{
		padding-bottom: 60px;
		h2{
			padding: 60px 0 15px;
			text-align: center;
			font-size: 32px;
			line-height: 32px;
			color: #373232;
		}
		h4{
			text-align: center;
			font-size: 18px;
			line-height: 18px;
			color: #928080;
			margin-bottom: 40px;
		}
	}
	// banner部分
	#banners{
		img{
			width: 100%;
			height:100%;
		}
	}
	.numsListshow{
		width: 1200px;
		margin: 30px auto;
		padding-bottom: 30px;
		border-bottom:1px solid #ddd;
		.disflexCenBtw();
		.number{
			color: #c98988;
			font-size: 16px;
			span{
				font-size: 40px;
				color: #e84f4e;
			}
		}
	}
	.wecandos{
		.doslist{
			width: 1200px;
			margin: 0 auto;
			display: flex;
			flex-wrap: wrap;
			.wecandos-item{
				width: 240px;
				height: 280px;
				position: relative;
				transition: all linear .3s;
				-moz-transition: all linear .3s;
				-webkit-transition: all linear .3s;
				-o-transition: all linear .3s;
				cursor: pointer;
				overflow: hidden;
				>div{
					position: absolute;
					text-align: center;
					display: block;
					transition: all linear .3s;
					-moz-transition: all linear .3s;
					-webkit-transition: all linear .3s;
					-o-transition: all linear .3s;
				}
				/*新改动部分*/
				.can-do-lines{
				    width: 30px;
				    height: 2px;
				    background: #e84f4e;
				    top: 160px;
				    left: 108px;
				    transition: all linear .3s;
				    -moz-transition: all linear .3s;
				    -webkit-transition: all linear .3s;
				    -o-transition: all linear .3s;
				}
				.imgSetItem{
				    top: 50px;
				    left: 50%;
				    margin-left: -40px;
				}
				.wecando3{
				    top: 186px;
				    left: 95px;
				    color: #333;
				    font-size: 16px;
				}
				.wecando4{
				    padding: 20px;
				    box-sizing: border-box;
				    text-align: justify!important;
				    top: 200px;
				    opacity: 0;
				    font-size: 12px;
				    color: #be8f80;
				}
				.wecando5{
				    width: 110px;
				    height: 36px;
				    line-height: 36px;
				    text-align: center;
				    font-size: 15px;
				    background-color: #fff;
				    color: #e84f4e;
				    border:1px solid #e84f4e;
				    border-radius: 4px;
				    top: 300px;
				    left: 50%;
				    margin-left: -55px;
				    opacity: 0;
				}
				.wecando5:hover{
				    background-color: #d73e3e;
				    color: #fff;
				    border:none;
				}
				
			}
			.wecandos-item:not(.wecandos-item-special):hover{
			    box-shadow: 0 2px 10px 0 rgba(141, 26, 26, 0.1);
			    transform: scale(1.1);
				.imgSetItem{
					top: 20px;
				}
				.can-do-lines{
					opacity: 0;
					top: 110px;
				}
				.wecando3{
					top: 116px;
				}
				.wecando4{
					top: 125px;
					opacity: 1;
				}
				.wecando5{
					top:226px;
					opacity: 1;
				}
			}
		}
	}
	.advantage{
		background-color: #f9f9f9;
		.advantage-list{
			width: 1200px;
			margin: 0 auto;
		    position: relative;
		    height: 400px;
		    margin-top: 60px;
		    background: url(/static/site/img/index/advantage.png) center center no-repeat;
			dl {
			    position: absolute;
				dt{
					font-size: 16px;
					color: #ea6060;
					line-height: 30px;
				}
				dd{
					font-size: 14px;
					color: #5f616d;
					line-height: 24px;
				}
			}
			dl:nth-child(1) {
			    top: 35px;
			    left: 135px;
			    text-align: right
			}
			dl:nth-child(2) {
			    top: 152px;
			    left: 83px;
			    text-align: right
			}
			dl:nth-child(3) {
			    top: 282px;
			    left: 100px;
			    text-align: right
			}
			dl:nth-child(4) {
			    top: 64px;
			    right:130px
			}
			dl:nth-child(5) {
			    top: 183px;
			    right: 10px
			}
			dl:nth-child(6) {
			    top: 300px;
			    right: 137px
			}
		}
	}
	.progress{
		height: 350px;
		background: url(/static/site/img/index/progress_bg.png) center center no-repeat;
		.progress-list{
			width: 1200px;
			margin: 0 auto;
			margin-top: 50px;
			font-size: 16px;
			.disflexCenBtw();
			dl {
			    display: inline-block;
			    vertical-align: middle;
			    line-height: 40px;
			    cursor: pointer;
			    color: #373232;
				text-align: center;
				img{
					-webkit-filter: grayscale(100%);
					-moz-filter: grayscale(100%);
					-ms-filter: grayscale(100%);
					-o-filter: grayscale(100%);
					filter: grayscale(100%);
					filter: gray;
				}
			}
			dl:hover {
			    color: #e45656;
				img{
					-webkit-filter: grayscale(0);
					-moz-filter: grayscale(0);
					-ms-filter: grayscale(0);
					-o-filter: grayscale(0);
					filter: grayscale(0);
					filter: none;
				}
			}
			.progress-arrow{
				display: inline-block;
				margin: 0 32px;
				width: 24px;
				height: 20px;
				background: url(/static/site/img/index/progress_arrow.png) center center no-repeat;
			}
		}
	}
	.moreResources{
		.resource-wrap{
			width: 1200px;
			margin: 0 auto;
			.resource-nav {
			    text-align: center;
				li{
					width: 120px;
					height: 46px;
					line-height: 46px;
					border: 1px solid transparent;
					margin: 0 20px;
					display: inline-block;
					vertical-align: middle;
					font-size: 18px;
					border-radius: 3px;
					cursor: pointer;
				}
				li.active,li:hover{
					border-color: #ea6060;
					color: #ea6060;
				}
			}
			.resource-list {
			    margin-top: 45px;
			    height: 260px;
				.resource-item{
					display: none;
					li{
						width: 240px;
						height: 130px;
						text-align: center;
						cursor: pointer;
						display: inline-block;
						img{
							vertical-align: middle;
							margin-top: 10px;
						}
					}
					li:hover{
						background-color: #fff;
						box-shadow: 0px 2px 18px 0px rgb(254 98 71 / 9%);
					}
				}
				.resource-item.active{
					display: block;
				}
			}
		}
	}
	.agent{
		.agents{
			height: 380px;
			background: url(/static/site/img/index/agent_bg.jpg) center center no-repeat;
			background-size: cover;
			ul{
				width: 1200px;
				margin: 0 auto;
				li{
					width: 300px;
					text-align: center;
					display: inline-block;
					height: 380px;
					vertical-align: top;
					img{
						margin-top: 110px;
					}
					p{
						padding: 65px 60px 0;
						color: #fff;
						font-size: 16px;
					}
				}
				li:nth-child(2n+1){
					background-color: rgba(31, 32, 33, .6);
				}
				li:nth-child(2n+2){
					background-color: rgba(31, 32, 33, .5);
				}
			}
			.agent-btn{
				display: block;
				margin: auto;
				margin-top: 46px;
				text-align: center;
				width: 180px;
				height: 46px;
				line-height: 46px;
				border: 1px solid #cb3333;
				background-color: transparent;
				border-radius: 3px;
				font-size: 18px;
				color: #cb3333;
				transition: all linear .3s;
				-moz-transition: all linear .3s;
				-webkit-transition: all linear .3s;
				-o-transition: all linear .3s;
			}
			.agent-btn:hover {
			    background-color: #cb3333;
			    color: #fff;
			}
		}
	}
	
	.article-wrap {
	    margin: 50px auto 0;
	    width: 1100px;
	    height: 360px;
		.article-left {
		    float: left;
		    position: relative;
		    height: 360px;
		    width: 546px;
			.article-img {
			    position: absolute;
			    width: 430px;
			    height: 250px;
			    z-index: 5;
			    overflow: hidden;
			    top: 0;
			    left: 0;
				img {
				    width: 100%;
				    height: 100%;
				}
			}
			.article-date {
			    position: absolute;
			    bottom: 20px;
			    left: 25px;
			    font-size: 10px;
			    color: #606060;
			    width: 50px;
			    text-align: center;
			    line-height: 20px;
				span{
					font-size: 40px;
					letter-spacing: -2px;
				}
			}
			.article-hot {
			    position: absolute;
			    right: 0;
			    bottom: 0;
			    width: 440px;
			    height: 140px;
			    background-color: #f8f8f8;
			    z-index: 10;
			    padding: 22px;
				box-sizing: border-box;
				h6 {
				    font-size: 16px;
				    color: #373232;
				}
				p{
					font-size: 12px;
					color: #999;
					line-height: 22px;
				}
				a{
					float: right;
					width: 50px;
					height: 20px;
					line-height: 18px;
					border-radius: 10px;
					border: 1px solid #e2e2e2;
					color: #666;
					font-size: 10px;
					text-align: center;
				}
				a:hover {
				    border: 1px solid #c72a33;
				    color: #c72a33;
				}
			}
		}
		.article-right {
		    float: right;
			li {
			    width: 490px;
			    height: 120px;
			    background-color: #ffffff;
			    padding: 10px 24px;
			    border-bottom: 1px solid #f8f8f8;
				box-sizing: border-box;
				h5 {
				    line-height: 30px;
				    letter-spacing: -1px;
				    color: #373232;
				}
				h5:hover {
				    color: #cb3333;
				}
				p {
				    font-size: 12px;
				    color: #999999;
				    line-height: 22px;
				}
			}
			li:hover {
			    box-shadow: 0 2px 18px 0 rgba(210, 205, 205, 0.2);
			}
		}
	}
	.article-btn {
	    margin: 50px 0 0;
	    text-align: center;
		a {
		    display: inline-block;
		    width: 100px;
		    height: 30px;
		    line-height: 30px;
		    border-radius: 3px;
		    border: 1px solid #bfbfbf;
		    color: #bfbfbf;
		}
		a:hover {
		    border: 1px solid #d73e3e;
		    color: #d73e3e;
		}
	}
	
}


@media only screen and (max-width:767px) {
	#contents{
		.numsListshow{
			width: 100%!important;
			
		}
		.wecandos .doslist{
			width: 100%!important;
			.wecandos-item{
				width: 50%!important;
			}
		}
		.advantage{
			.advantage-list{
				width: 100%!important;
			}
		}
		.moreResources{
			.resource-wrap{
				width: 100%!important;
				.resource-nav{
					li{
						margin: 0;
						flex: 1;
						width: 19%;
						font-size: 14px;
					}
				}
			}
		}
	}
	#resource_list{
		height: auto!important;
	}
	.resource-item li{
		width: 33%!important;
		height: auto!important;
		img{
			width: 100%;
		}
	}
	.agents{
		background: initial!important;
		height: auto!important;
		.agent-list{
			width: 100%!important;
			li{
				width: 50%!important;
				height: 220px!important;
				p{
					padding: 20px!important;
					box-sizing: border-box;
				}
				img{
					margin-top: 30px!important;
				}
			}
		}
	}
	.article-wrap{
		width: 100%!important;
		height: auto!important;
		 .article-left{
			 width: 100%!important;
			 .article-img{
				 width: 100%!important;
			 }
			 .article-hot{
				 width: 94%!important;
				 box-shadow: 1px 2px 10px #ddd;
				 margin-right: -47%;
				     right: 50%!important;
			 }
		 }
		 .article-right{
			 li{
				 width: 100%!important;
			 }
		 }
	}
	.can-do-lines{
		left: 44%!important;
	}
	.wecando3{
		left: 40%!important;
	}
	.resource-list{
		margin-top: 15px!important;
	}
	.swiper-wrapper{
		height: 220px!important;
	}
	.numsListshow-small{
		display: flex!important;
		justify-content: space-around;
		text-align: center;
		padding: 0 15px;
		box-sizing: border-box;
		div{
			margin: 20px 0;
			flex: 1;
			p{
				display: block;
			}
			p:first-child{
				font-size: 22px;
				color: #eb4f4e;
			}
			p:last-child{
				font-size: 13px;
				color: #c98988;
			}
		}
	}
}