/* 首页样式文件 */





.list_one {


	background-color: #0872E0 !important;


}





.list_one a {


	color: #fff !important;


}





.banners {


	position: relative;


	width: 1300px;


	margin: 0 auto;


}


.banners>div {


	overflow: hidden;


}


.banners .w{


	position: relative;


	overflow: unset;


}





.swiper {


	width: 100%;


	margin: 20px auto;


}





.swiper-slide {


	text-align: center;


	font-size: 18px;


	/* background: #fff; */


	display: -webkit-box;


	display: -ms-flexbox;


	display: -webkit-flex;


	display: flex;


	-webkit-box-pack: center;


	-ms-flex-pack: center;


	-webkit-justify-content: center;


	justify-content: center;


	-webkit-box-align: center;


	-ms-flex-align: center;


	-webkit-align-items: center;


	align-items: center;


}





.append-buttons {


	text-align: center;


	margin-top: 20px;


}





.append-buttons a {


	display: inline-block;


	border: 1px solid #007aff;


	color: #007aff;


	text-decoration: none;


	padding: 4px 10px;


	border-radius: 4px;


	margin: 0 10px;


	font-size: 13px;


}





.swiper-button-prev {


	background-color: #FFFFFF;


	color: #CCCCCC;


	width: 42px;


	height: 70px;


	left: -50px;


	top: 55%;


	transform: translate(0, -55%);


}





.swiper-button-next {


	background-color: #FFFFFF;


	color: #CCCCCC;


	width: 42px;


	height: 70px;


	right: -50px;


	top: 55%;


	transform: translate(0, -55%);


}





.swiper-button-prev,


.swiper-button-next {


	--swiper-navigation-size: 30px;


	background: #fff;


	//修改按钮大小





}





.container {


	height: 552px;


	background-color: #F3F3F3;


}





.recommends {


	padding-top: 70px;


}





.recommend {


	padding-top: 55px;


	background: #f9f9f9;


}





.recommend_head {


	text-align: center;


	position: relative;


	display: flex;


	flex-direction: column;


	align-items: center;


}





.fade {


	color: #e7e7e7;


	text-transform: uppercase;


	font-size: 40px;


	font-weight: 700;


}











.product_title {


	font-size: 32px;


	position: absolute;


	top: 26px;


	display: flex;


}





.product_title {


	font-weight: 700;


	text-align: center;


	width: 100%;


	display: flex;


	align-items: center;


	justify-content: center;


}





.product_title div {


	position: absolute;


	right: 0;


	color: #0872E0;


	font-size: 16px;


	cursor: pointer;


}


.product_title div a{


	color: #0872E0;


}





.product_title span {


	color: #0872E0;


	font-weight: 700;


}





.product_title b {


	width: 105px;


	height: 1px;


	background-color: #e7e7e7;


	display: inline-block;


	position: relative;


	vertical-align: top;


	margin: 0 20px 0 20px;


}





.product_title b:nth-child(1)::after {


	content: '';


	position: absolute;


	top: -1px;


	right: 0;


	width: 26px;


	height: 3px;


	background-color: #0872E0;


}





.last::after {


	content: '';


	position: absolute;


	top: -1px;


	left: 0;


	width: 26px;


	height: 3px;


	background-color: #0872E0;


}





.recommend_list {


	margin-top: 50px;


}





.recommend_list ul {


	display: flex;


	justify-content: space-around;


}





.recommend_list li {


	list-style: none;


	text-align: center;


	width: 100%;


	height: 310px;


	border: 1px solid #dedede;


	padding: 10px;


	box-sizing: border-box;


}





.recommend_list img {


	width: 195px;


	height: 195px;


}





.recommend_list p {


	font-size: 14px;


	font-weight: bold;


	color: #333;


	margin: 10px 0;


}





.recommend_list span {


	color: #999;


}





.price {


	display: flex;


	justify-content: center;


	border: 1px solid #0872E0;


	width: 208px;


	height: 32px;


	align-items: center;


	margin: 0 auto;


	margin-top: 20px;


	color: #0872E0;


}





.price div {


	font-size: 14px;


	padding-left: 10px;


}





.price span {


	display: inline-block;


	width: 16px;


	height: 16px;


	border-radius: 50%;


	text-align: center;


	line-height: 16px;


	background-color: #0872E0;


	position: relative;


	top: 3px;


}





.price:hover {


	background-color: #0872E0;


	color: #fff;


}





.price img {


	width: 16px;


	height: 16px;


	position: absolute;


	right: 4px;


	top: 0;


}





.price_face {


	font-size: 16px;


	border-right: 1px solid #add9a1;


	padding-right: 10px;


}





.classification_list {


	padding-top: 60px;


	display: flex;


}





.classification_title {


	font-size: 20px;


	font-weight: bold;


	background: #0872E0;


	width: 261px;


	color: #83B8EF;


	height: 60px;


	display: flex;


	justify-content: center;


	align-items: center;


}





.active {


	color: #fff;


	position: relative;


}





.active::after {


	content: '';


	width: 34px;


	height: 3px;


	display: block;


	background-color: #fff;


	position: absolute;


	left: 50%;


	bottom: -6px;


	border-radius: 2px;


	transform: translate(-50%);


}





.classification_title p {


	cursor: pointer;


}





.classification_title em {


	display: inline-block;


	width: 1px;


	height: 19px;


	background-color: #fff;


	margin: 0 30px;


}





.classification_selects {


	width: 261px;


	background-color: #fff;


	padding: 20px 0;


}





.ifcation_list {


	display: none;


	background-color: #fff;


	padding: 15px 0;


}





.ifcation_list>div {


	width: 201px;


	height: 40px;


	border: none;


	background-color: #F8F8F8;


	padding: 0 15px;


	line-height: 40px;


	font-size: 14px;


	color: #333;


	cursor: pointer;


	display: flex;


	margin: 0 15px;


	justify-content: space-between;


	align-items: center;


}





.ifcation_list>div:hover {


	/* background-color: #0872E0; */


	/* color: #fff; */


}





.classification_selects .arrows {


	width: 201px;


	height: 40px;


	border: none;


	background-color: #F8F8F8;


	padding: 0 15px;


	line-height: 40px;


	font-size: 14px;


	color: #333;


	cursor: pointer;


	display: flex;


	margin: 0 15px;


	margin-bottom: 10px;


	justify-content: space-between;


	align-items: center;


	user-select: none;


}





.classification_selects .arrows:hover {


	background: #0872E0;


	color: #fff;


}





.arrows img {


	width: 16px;


	height: 16px;


}





.arrow_s {


	display: none;


}





.classification_selects dl {


	background-color: #fff;


	margin-bottom: 15px;


}





.classification_selects dd {


	background-color: #F8F8F8;


	cursor: pointer;


	width: 201px;


	height: 40px;


	border: none;


	background-color: #F8F8F8;


	padding: 0 15px;


	line-height: 40px;


	font-size: 14px;


	color: #333;


	display: flex;


	margin: 0 15px;


	justify-content: space-between;


	align-items: center;


}





.classification_selects dd:hover {


	color: #0872E0;


}





.arrow_content {


	display: none;


}





.classification_right {


	width: 100%;


}





.classification_right ul {


	display: flex;


	flex-wrap: wrap;


}





.classification_right li {


	background-color: #fff;


	margin-bottom: 20px;


	margin-left: 18px;


	width: 222px;


	text-align: center;


	font-size: 14px;


	color: #333;


	padding: 15px 0;


}





.classification_right img {


	margin-top: 20px;


	width: 160px;


	height: 160px;


}





.classification_right p {


	font-weight: bold;


	margin: 10px 0;


	padding: 0 15px;


}





.inquiry {


	color: #0872E0;


	font-size: 16px;


	width: 190px;


	height: 38px;


	line-height: 39px;


	border: 1px solid #0872e0;


	margin: 0 auto;


	margin-top: 10px;


	display: flex;


	align-content: center;


	justify-content: space-around;


}





.inquiry:hover {


	background: #0872E0;


	color: #fff;


}





.em {


	width: 1px;


	background-color: #add9a1;


	line-height: 38px;


	margin: 8px 0;


}





.into {


	font-size: 14px;


	display: flex;


	align-items: center;


}





.into span {


	display: inline-block;


	width: 16px;


	height: 16px;


	border-radius: 50%;


	text-align: center;


	line-height: 16px;


	background-color: #0872e0;


	position: relative;


	margin-left: 6px;


}





.into img {


	width: 16px;


	height: 16px;


	margin: 0;


	vertical-align: middle;


	position: absolute;


	right: 4px;


	top: 0;


}





.downall {


	background-color: #F9F9F9;


}





.classification_selects button {


	display: block;


	border: none;


	width: 94%;


	background-color: #0872E0;


	color: #fff;


	font-size: 18px;


	margin: 0 auto;


	margin-top: 20px;


	height: 46px;


	box-shadow: 0 0 5px #0872e0;


	cursor: pointer;


}





.dynimic {


	padding: 30px 0;


	background: #0872E0;


	/* height: 677px; */


}





.dynimic_container {


	display: flex;


}





.dynimic_container>div {


	flex: 1;


}





.dynimic_one {


	margin-right: 20px;


}





.dynimic_two {


	margin-left: 20px;


}











.dynimic_title {


	display: flex;


	align-items: center;


	justify-content: space-between;


	color: #fff;


	cursor: pointer;


	margin-bottom: 30px;


}





.dynimic_title h2 {


	font-size: 22px;


}





.dynimic_title span {


	display: inline-block;


	width: 16px;


	height: 16px;


	border-radius: 50%;


	background: #fff;


	position: relative;


	top: 2px;


	margin-left: 6px;


}





.dynimic_title img {


	width: 16px;


	height: 16px;


	vertical-align: middle;


	position: absolute;


	right: 4px;


}





.dynimic_con{


	display: flex;


	flex-wrap: wrap;


	justify-content: space-between;


}


.actives {


	width: 44%;


	margin-bottom: 20px;


	height: 120px;


	background-color: #fff;


	display: flex;


	align-items: center;


	padding: 0 30px;


	cursor: pointer;


}





.actives:hover {}





.content_left {


	width: 18%;


	height: 80px;


	background-color: #C8C8C8;


	text-align: center;


	display: flex;


	flex-direction: column;


	justify-content: center;


}





.content_left h3 {


	font-size: 38px;


	color: #fff;


}





.content_left p {


	color: #fff;


	font-size: 14px;


}





.content_right {


	width: 85%;


	margin-left: 20px;


}





.content_right h6 {


	font-weight: 400;


	font-size: 16px;


	margin-bottom: 5px;


}





.content_right p {


	color: #9999B2;


	line-height: 22px;


}





.activechange {


	background: #0872E0;


}





.matter {


	height: 45px;


	background-color: #fff;


	margin-bottom: 20px;


	line-height: 45px;


	color: #333;


	display: flex;


	align-content: center;


	justify-content: space-between;


	position: relative;


	padding: 0 30px;


	font-size: 16px;


}





.matter::before {


	content: '';


	position: absolute;


	left: 15px;


	top: 50%;


	transform: translateY(-50%);


	width: 5px;


	height: 5px;


	border-radius: 100%;


	background: #0872e0;


}





.matter p {


	cursor: pointer;


	max-width: 283px;


	overflow: hidden;


}





.matter span {


	display: inline-block;


	color: #C6C5C5;


}





.spnspor {


	background-color: #F9F9F9;


	padding-top: 55px;


	padding-bottom:60px;


}





.spnspor_title {


	display: flex;


	align-items: center;


}


.spnspor_img{


	width: 488px;


	height: 360px;


	overflow: hidden;


	text-align: center;


}


.spnspor img {


	height: 100%;


}





.spnspor_details {


	width: 692px;


	height: 300px;


	background-color: #fff;


	font-size: 14px;


	line-height: 25px;


	color: #333;


	padding: 30px 34px;


	position: relative;


	float: right;


}





.spnspor_details h3 {


	font-size: 24px;


	line-height: 40px;


	color: #333;


}





.spnspor_details p {


	font-size: 14px;


	line-height: 28px;


	color: #333;


	text-indent: 2rem;


	width: 100%;


	height: 260px;


	overflow: hidden;


	text-overflow: ellipsis;


	-webkit-line-clamp: 9;


	display: -webkit-box;


	-webkit-box-orient: vertical;


}





.spnspor_details span {


	display: inline-block;


	position: absolute;


	height: 40px;


	color: #fff;


	background-color: #0872e0;


	line-height: 40px;


	font-size: 14px;


	padding: 0 16px;


	right: 26px;


	bottom: -26px;


	cursor: pointer;


}