body{
	background: #f8f8f8;
}
.cate_banner_group{margin-top: 30px; display: flex; flex-wrap: wrap; justify-content: space-between;}
.categories{ width: 320px; background: #fff; height: 315px; border-radius: 5px; 
	padding-bottom: 10px; position:relative; }
.categories h3{ background: #01abec; border-radius: 5px 5px 0px 0px; 
font-size: 18px; color: #fff; height: 50px; line-height: 50px; padding: 0 20px;}
.categories h3 i{ font-size: 24px; margin-right: 10px;}
.categories dl{ padding: 10px 20px; width: 100%; margin: 0px 0px;}
.categories dl:hover{ background: #f8f8f8;}
.categories dl a {display: flex;}
.categories dl a img{ height: 22px;margin-right: 10px; margin-top: 3px;}
.categories dl a h4{ font-size: 14px; line-height: 30px; font-weight: 500;}
.categories dl .cateTwo{position: absolute; right: 0; top: 0; width: 100%;right:-320px;
	z-index: 999; background: #fff; border-radius: 0px 5px 5px 0px; min-height: 315px; 
	display: none;
	}
.categories dl .cateTwo li{ line-height: 25px; padding: 10px 20px;}
.categories dl .cateTwo li:hover{ background: #f8f8f8;}
.categories dl:hover  .cateTwo{ display:block; }

.banner{ width: calc(100% - 320px - 315px - 40px);}
.banner .swiper-container {
    height: 315px;
	border-radius: 5px;
}
.banner .swiper-slide {
	text-align: center;
	font-size: 18px;
	background: #fff;
	/* Center slide text vertically */
	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;
	
}
.banner .swiper-slide img{width: 100%;}
.swiper-button-next{ background: #fff; text-align: center; width: 40px!important; height: 40px!important; border-radius: 30px; box-shadow: 0px 0px 5px #dadadc;}
.swiper-button-prev{ background: #fff; text-align: center; width: 40px!important; height: 40px!important; border-radius: 30px; box-shadow: 0px 0px 5px #dadadc;}
.swiper-button-next:after{ content: ''!important;}
.swiper-button-prev:after{ content: ''!important;}


.group{ height: 315px; width: 315px; background: #fff; border-radius: 5px;}
.group h4{ font-size: 18px; text-align: left; padding: 10px 10px; line-height: 30px;}
.group h4 i{ font-size: 12px; font-style: normal; background: #ff6600; color: #fff; margin-left: 5px; 
padding:  2px 3px; border-radius: 3px;}
.group h4 a.more{ float: right; display: block; height: 35px; line-height: 35px; 
text-align: center; color: #01abec; font-size: 14px; border-radius: 3px; font-weight: 500; transition: all 0.5s;}

.group .list{ height: 255px; padding: 10px; overflow: hidden; background: #01abec; 
border-radius: 0px 0px 5px 5px; overflow-y: auto;}
.group .list::-webkit-scrollbar {
    width: 4px;    
    /*height: 4px;*/
}
.group .list::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: rgba(0,0,0,0.2);
}
.group .list::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 0;
    background: rgba(0,0,0,0.1);

}
.group .list dl{ margin-bottom: 10px;}
.group .list dl a{ padding: 5px; background: #fff; border-radius: 5px; display:  flex; flex-wrap: wrap; transition: all 0.5s;}
.group .list dl a:hover{ background: #f7f7f7;}
.group .list dl a dd{ margin: 0px;}
.group .list dl a dd:nth-child(1){background: #f2f3f8; height: 62px; width: 62px; overflow: hidden; margin-right: 10px;}
.group .list dl a dd:nth-child(1) img{ width: auto; height:62px; transition: all 0.5s;}
.group .list dl a dd:nth-child(1):hover img{ transform: scale(1.1);}
.group .list dl a dd:nth-child(2){ flex: 1; margin-top: 0px;}
.group .list dl a dd:nth-child(2) span:nth-child(1){ color: #bbbbbb; font-size: 12px;text-decoration:line-through}
.group .list dl a dd:nth-child(2) span:nth-child(2){ color: #19abec;}
.group .list dl a dd:nth-child(2) h4{ font-size:14px; padding:0; line-height: 23px; font-weight:500;
text-overflow:-o-ellipsis-lastline; overflow:hidden; text-overflow: ellipsis; text-align: left; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.advList{ margin-top: 20px; margin-bottom: 20px; overflow: hidden;}
.advList .row{margin: 0;}
.advList .row>* {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding: 0!important;align-items: flex-start;
}
.advList .col{ background: #fff; margin-right: 20px; position: relative; text-align: right; height: 188px; }
.advList .col:nth-child(3n){ margin-right: 0px;}
.advList .col dd{ margin-top: 25px; margin-left: 30px; overflow: hidden; position: absolute; text-align: left;} 
.advList .col dd h4{ font-size: 22px; font-weight: bold;}
.advList .col a{ display:block; }
.advList .col img{width: 100%; height: 100%; transition: all 0.5s;}
.advList .col:hover img{transform: scale(1.05);}
/*.advList .col img{ margin: 20px 30px 20px 0px;}*/
.advList .col dd p{ color: #999999; font-size: 14px; display: block; margin-bottom: 20px; margin-top: 5px;}
.advList .col dd span{ background: #01abec; padding: 5px 8px; border-radius: 3px; color: #fff;}
.advList .col:nth-child(2){ padding: 0;}
.advList .col:nth-child(2) img{ margin: 0; width: 100%; height: 100%;}
.advList .col:nth-child(2) p{ color: #fff;}
.advList .col:nth-child(2) p i{ font-style: normal; color: #01abec; font-size: 22px;}


.productList{ background: #fff; border: #f2f3f8 10px solid; border-radius: 5px;
margin-left: -10px; margin-right: -10px; margin-top: 20px; padding: 0 20px; position: relative;}
.productList .title{ font-size: 20px; font-weight: bold; height: 50px; line-height: 50px; overflow: hidden; border-bottom: 1px solid #e2e5ec; }
.productList .title span{ border-bottom: #01abec 2px solid; height: 49px; display: block; float: left;}
.productList .title a.more{ float: right; background: #01abec; display: block; width: 100px; height: 35px; line-height: 35px; 
text-align: center; color: #fff; font-size: 14px; margin-top: 7px; border-radius: 3px; font-weight: 500; transition: all 0.5s;}
.productList .title a.more:hover{ background-color:#f7f7f7; color:#01abec;}
.productList .pros{ overflow: hidden; margin: 20px 0px; padding: 0px 0px; width: 100%;}
.productList .pros .swiper-slide {
	text-align: center;
	border: 2px solid #f2f3f8;
	border-radius: 5px;
	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	transition: all 0.5s;
}
.productList .pros .swiper-slide:hover{ border: 2px solid #01abec;}
.productList .pros .swiper-button-next{ right: 3px;}
.productList .pros .swiper-button-prev{ left: 3px;}
.productList .pros .swiper-slide a{ display:block; }
.productList .pros .swiper-slide dd{ height: 200px; width: 100%; position: relative; overflow: hidden; text-align: center; justify-content: space-around; display: flex; flex-direction: column; align-items: center;}
.productList .pros .swiper-slide dd img{ width: 100%; transition: all 0.5s; }
.productList .pros .swiper-slide dd:hover img{ transform: scale(1.1);}
.productList .pros .swiper-slide dd span{ display: block; 
width: 50px; height: 50px; line-height: 50px; border-radius: 50px; font-size: 14px; background: #007bff; color: #fff; padding: 0; margin: 0; position: absolute; left: 10px; top: 10px;}
.productList .pros .swiper-slide dt{ padding: 10px;}
.productList .pros .swiper-slide h3{ color: #007bff; font-size: 16px; font-weight: 700 !important; text-align: left;}
.productList .pros .swiper-slide .star{ text-align: left;}
.productList .pros .swiper-slide .star i{color: #c3c3c5;}
.productList .pros .swiper-slide h4{ 
	font-size: 14px; margin-top: 5px; text-align: left; line-height: 25px;
	text-overflow:-o-ellipsis-lastline; overflow:hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical}
.wap{display: none;}
.pc{ display:block;}
.swiper-wrapper{ display:flex!important; }
.swiper-slide{ margin-bottom:0px; }

@media only screen and (max-width: 1400px) {
.productList .pros .swiper-slide dd{ height: 150px;}
}


@media (max-width: 767px) {
  	.cate_banner_group{margin-top: 20px; display: flex; flex-wrap: wrap; justify-content: space-between;}
	.categories{ width: 100%; display: none; background: #fff; height: auto; border-radius: 5px; padding-bottom: 10px; position:relative; }

	.banner{ width: calc(100%); margin-top: 0px;}
	.banner .swiper-container {
	    height: 160px;
		border-radius: 5px;
	}
	.banner .swiper-slide {
		text-align: center;
		font-size: 18px;
		background: #fff;
		/* Center slide text vertically */
		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;
		
	}
	.banner .swiper-slide img{width: 100%;}
	.swiper-button-next{ background: #fff; text-align: center; width: 40px!important; height: 40px!important; border-radius: 30px; box-shadow: 0px 0px 5px #dadadc;}
	.swiper-button-prev{ background: #fff; text-align: center; width: 40px!important; height: 40px!important; border-radius: 30px; box-shadow: 0px 0px 5px #dadadc;}
	.swiper-button-next:after{ content: ''!important;}
	.swiper-button-prev:after{ content: ''!important;}


	.group{ height: 315px; margin-top: 20px; width: 100%; background: #fff; border-radius: 5px;}


	.advList{ margin-top: 20px; margin-bottom: 20px; overflow: hidden; display: none;}


	.productList{ background: #fff; border: #f2f3f8 10px solid; border-radius: 5px;
	margin-left: -10px; margin-right: -10px; margin-top: 20px; padding: 0 20px; position: relative;}
	.productList .title{ font-size: 20px; font-weight: bold; height: 50px; line-height: 50px; overflow: hidden; border-bottom: 1px solid #e2e5ec; }
	.productList .title span{ border-bottom: #01abec 2px solid; height: 49px; display: block; float: left;}
	.productList .title a.more{ float: right; background: #01abec; display: block; width: 100px; height: 35px; line-height: 35px; 
	text-align: center; color: #fff; font-size: 14px; margin-top: 7px; border-radius: 3px; font-weight: 500; transition: all 0.5s;}
	.productList .title a.more:hover{ background-color:#f7f7f7; color:#01abec;}
	.productList .pros{ overflow: hidden; margin: 20px 0px; padding: 0px 0px; width: 100%;}
	.productList .pros .swiper-slide {
		width: 100%!important;
		text-align: center;
		border: 2px solid #f2f3f8;
		border-radius: 5px;
		/* Center slide text vertically */
		display: -webkit-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
		transition: all 0.5s;
	}
	.productList .pros .swiper-slide:hover{ border: 2px solid #01abec;}
	.productList .pros .swiper-button-next{ right: 3px;}
	.productList .pros .swiper-button-prev{ left: 3px;}
	.productList .pros .swiper-slide a{ display:block; width:100%; }
	.productList .pros .swiper-slide dd{ height: 200px; width: 100%; position: relative; overflow: hidden; text-align: center; justify-content: center; display: flex; flex-direction: column; align-items: center;}
	.productList .pros .swiper-slide dd img{ height: 100%; width: auto; transition: all 0.5s; }
	.productList .pros .swiper-slide dd:hover img{ transform: scale(1.1);}
	.productList .pros .swiper-slide dd span{ display: block; 
	width: 50px; height: 50px; line-height: 50px; border-radius: 50px; font-size: 14px; background: #007bff; color: #fff; padding: 0; margin: 0; position: absolute; left: 10px; top: 10px;}
	.productList .pros .swiper-slide dt{ padding: 10px;}
	.productList .pros .swiper-slide h3{ color: #007bff; font-size: 16px; font-weight: 700 !important; text-align: left;}
	.productList .pros .swiper-slide .star{ text-align: left;}
	.productList .pros .swiper-slide .star i{color: #c3c3c5;}
	.productList .pros .swiper-slide h4{ 
		font-size: 14px; margin-top: 5px; text-align: left; line-height: 25px;
		text-overflow:-o-ellipsis-lastline; overflow:hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical}
	.wap{display: block;}
	.pc{ display:none; }
	.swiper-wrapper{ display:block!important; }
	.swiper-slide{ margin-bottom:20px; }
}