body{
	background: #f8f8f8;
}
.prolist{margin-top: 30px; display: flex; flex-wrap: wrap; justify-content: space-between;}
.left{ width: 320px; }
.categories{background: #fff; min-height: 215px; 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: 0 20px; margin: 10px 0px;}
.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; }

.screen{ margin-bottom:20px; display:flex; justify-content:space-between; }
.screen h4{ font-size:18px; }
.screen div{ display: flex; }
.screen div dd { margin-left:20px; }
.screen div dd label{ display:block; font-size:14px; color:#999; margin-bottom:2px; }
.screen div dd select{ width:200px; line-height:35px; height: 35px; border-radius:3px; border:1px solid #e2e5ec; }
.screen div dd select option{ padding: 10px 0px;}

.price{ margin-top:20px; }
.price h3{ background: #01abec; border-radius: 5px 5px 0px 0px; 
font-size: 18px; color: #fff; height: 50px; line-height: 50px; padding: 0 20px;}
.price button{ height: 35px; width: 100px; background: #01abec; margin-top: 20px; border: none; color: #fff; border-radius: 5px; }


.demo-slider{ margin-top:20px; }
.layui-slider{ height:10px!important; }
.layui-slider-wrap-btn {
    width: 10px!important;
    height: 20px!important;
    margin-top: 5px!important;
    background: #fff;
    border-radius: 0!important;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    transition: .3s;
}

.list{ width:calc(100% - 340px); }
.tgprout{
	margin:auto;
}
.tgprout ul{
	margin:0;
	padding:0;
}
.tgprout ul li{
	width:32%;
	margin-right:2%;
	border:1px solid #ececec;
	background:#fff;
	float:left;
	margin-bottom:2%
}

.tgprout ul li:nth-child(3n){
	margin-right:0;
}
.tgprout ul li .tgcp-top{
	width:100%;
	height:500px;
}
.tgprout ul li .cptp{
	max-height: 380px;
	overflow: hidden;
	text-align: center;
}
.tgprout ul li .cptp img{
	width: auto;
    height: 330px;
	transition: all 0.5s;
	margin: 0 auto;
}
.tgprout ul li .cptp:hover img{ transform: scale(1.1);}
.tgprout ul li .cpmc{
	margin:0 auto;
	width:85%;
	font-size:20px;
	font-weight:bold;
	padding:10px 0;
	text-align:center;
	line-height:25px;
	height: 85px;
    overflow: hidden;
    text-overflow: ellipsis;
	display: block;
	transition: all 0.5s;
}

.tgprout ul li .tgjg{
 text-align:center;
 padding:10px 0;
}
.tgjg span:nth-child(1){
	font-size:12px;
	color:#00c3ff;
	font-weight:bold;
}
.tgjg b{
	color:#00c3ff;
	font-size:18px;
}
.tgjg span:nth-child(3){
	font-size:12px;
	color:#00c3ff;
	font-weight:bold;
}
.tgjg span:nth-child(4){
	font-size:14px;
	color:#999999;
	text-decoration:line-through;
	padding-left:10px;
	
}
.tgprout ul li .xzcp{
	width:90%;
	display:block;
	background:#00c3ff;
	margin:auto;
	height:50px;
	text-align:center;
	color:#000;
	font-weight:bold;
	line-height:50px;
	font-size:16px;
	transition: all 0.5s;
}
.tgprout ul li:hover .xzcp{background:#ffbf0f;}
.tgprout ul li .tgsj{
	width:90%;
    margin:auto;
	margin-top:15px;
	margin-bottom:15px;
}
.tgprout ul li .tgsj p{
	margin:0;
	background:url('../images/sjtb_03.png') left no-repeat;
	background-size:4%;
	padding-left:20px;
	font-size:14px;
}
.tgprout ul li .tgsj p span{
	float:right;
}

.shopInfo{ margin-bottom:20px; background:#fff; }
.shopInfo h3{ background: #01abec; border-radius: 5px 5px 0px 0px; 
font-size: 18px; color: #fff; height: 50px; line-height: 50px; padding: 0 20px;}
.shopInfo .infos{padding: 20px;}
.shopInfo .infos h4{ font-size:18px;}
.shopInfo .infos button{ background:#d9f3fc; border: none; height:40px; line-height:40px; font-size:14px; padding:0 20px; border-radius:5px; margin-top:10px; }

@media only screen and (max-width: 1400px) {
.tgprout ul li .tgcp-top{
	height:350px;
}
.tgprout ul li .cptp img{
	width: auto;
    height: 220px;
}
}

.coupons ul{ display:flex; margin: 20px 0px; }
.coupons ul li {display: flex; height: 109px; padding: 15px; border-radius: 10px; margin-right: 10px;}
.coupons ul li dd:nth-child(1){ display:flex; line-height:20px; position: relative; padding-right: 20px; color: #fff;}
.coupons ul li dd:nth-child(1) h1{ font-size: 48px; line-height: 79px;}
.coupons ul li dd:nth-child(1) span{ margin-top: 40px; font-size: 25px; margin-right: 5px; }
.coupons ul li dd:nth-child(1)::after{ content: ''; width: 1px; height: 50px; background: #fff; right: 0; top: 12px; position: absolute;}
.coupons ul li dd:nth-child(2){ padding-left: 20px;}
.coupons ul li dd:nth-child(2) p{ font-size: 16px; color: #fff; height: 30px; line-height: 30px;}
.coupons ul li dd:nth-child(2) button{ height: 30px; line-height: 30px; background: #fff; border-radius: 5px; width: 100px; border: 0;}
.coupons ul li dd:nth-child(2) button:disabled{ background: #ddd; color: #000;}
.coupons ul li.c1{ background: url(../images/yhq1bg.png);}
.coupons ul li.c1 button{ color: #01abec;}
.coupons ul li.c2{ background: url(../images/yhq2bg.png);}
.coupons ul li.c2 button{ color: #01abec;}
.coupons ul li.c3{ background: url(../images/yhq3bg.png);}
.coupons ul li.c3 button{ color: #01abec;}
.coupons ul li.c4{ background: url(../images/yhq4bg.png);}
.coupons ul li.c4 button{ color: #01abec;}


.box{height: auto; padding:20px;}
.box a{ display: block;}
.Collapsing{ width: 100%; height: 30px; line-height: 30px; cursor: pointer; text-align: left; background-repeat: no-repeat; color: #000; font-size: 16px; font-weight: 400; position: relative; }
.child::before{ content: ''; background-image: url("../icon/right.png"); background-size: 20px 20px; width: 20px; height: 20px; display: block; position: absolute; right: 0;}
.coll_body{display: none; text-align: left; }
.coll_body a{display:block; margin:10px 20px; text-align: left;}
.current{}
.current::before{ content: ''; background-image: url("../icon/right.png"); background-size: 20px 20px; width: 20px; height: 20px; display: block; position: absolute; right: 0;transform: rotate(90deg); /*旋转背景图片*/}


@media (max-width: 767px) {
	.prolist{margin-top: 30px; display: flex; flex-wrap: wrap; justify-content: space-between;}
	.left{ width: 100%; }
	.categories{background: #fff; display: none; min-height: 215px; 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: 0 20px; margin: 10px 0px;}
	.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; }

	.screen{ margin-bottom:20px; display:flex; justify-content:space-between; }
	.screen h4{ font-size:18px; }
	.screen div{ display: flex; }
	.screen div dd { margin-left:20px; }
	.screen div dd label{ display:block; font-size:14px; color:#999; margin-bottom:2px; }
	.screen div dd select{ width:200px; line-height:35px; height: 35px; border-radius:3px; border:1px solid #e2e5ec; }
	.screen div dd select option{ padding: 10px 0px;}

	.price{ margin-top:20px; display:none; }
	.price h3{ background: #01abec; border-radius: 5px 5px 0px 0px; 
	font-size: 18px; color: #fff; height: 50px; line-height: 50px; padding: 0 20px;}
	.price button{ height: 35px; width: 100px; background: #01abec; margin-top: 20px; border: none; color: #fff; border-radius: 5px; }


	.demo-slider{ margin-top:20px; }
	.layui-slider{ height:10px!important; }
	.layui-slider-wrap-btn {
	    width: 10px!important;
	    height: 20px!important;
	    margin-top: 5px!important;
	    background: #fff;
	    border-radius: 0!important;
	    display: inline-block;
	    vertical-align: middle;
	    cursor: pointer;
	    transition: .3s;
	}
	.banner{ display:none; }
	.list{ width:calc(100%); margin-top:20px; }
	.tgprout{
		margin:auto;
	}
	.tgprout ul{
		margin:0;
		padding:0;
	}
	.tgprout ul li{
		width:100%;
		margin-right:0;
		border:1px solid #ececec;
		background:#fff;
		float:none;
		margin-bottom:2%
	}

	.tgprout ul li:nth-child(3n){
		margin-right:0;
	}
	.tgprout ul li .tgcp-top{
		width:100%;
		height:auto;
	}
	.tgprout ul li .cptp{
		height: 280px;
		overflow: hidden;
		text-align: center;
	}
	.tgprout ul li .cptp img{
		width: auto;
	    height: 100%;
		transition: all 0.5s;
		margin: 0 auto;
	}
	.tgprout ul li .cptp:hover img{ transform: scale(1.1);}
	.tgprout ul li .cpmc{
		margin:0 auto;
		width:85%;
		font-size:20px;
		font-weight:bold;
		padding:10px 0;
		text-align:center;
		line-height:25px;
		height: 85px;
	    overflow: hidden;
	    text-overflow: ellipsis;
		display: block;
		transition: all 0.5s;
	}

	.tgprout ul li .tgjg{
	 text-align:center;
	 padding:10px 0;
	}
	.tgjg span:nth-child(1){
		font-size:12px;
		color:#00c3ff;
		font-weight:bold;
	}
	.tgjg b{
		color:#00c3ff;
		font-size:18px;
	}
	.tgjg span:nth-child(3){
		font-size:12px;
		color:#00c3ff;
		font-weight:bold;
	}
	.tgjg span:nth-child(4){
		font-size:14px;
		color:#999999;
		text-decoration:line-through;
		padding-left:10px;
		
	}
	.tgprout ul li .xzcp{
		width:90%;
		display:block;
		background:#00c3ff;
		margin:auto;
		height:50px;
		text-align:center;
		color:#000;
		font-weight:bold;
		line-height:50px;
		font-size:16px;
		transition: all 0.5s;
	}
	.tgprout ul li:hover .xzcp{background:#ffbf0f;}
	.tgprout ul li .tgsj{
		width:90%;
	    margin:auto;
		margin-top:15px;
		margin-bottom:15px;
	}
	.tgprout ul li .tgsj p{
		margin:0;
		background:url('../images/sjtb_03.png') left no-repeat;
		background-size:4%;
		padding-left:20px;
		font-size:14px;
	}
	.tgprout ul li .tgsj p span{
		float:right;
	}

	.shopInfo{ margin-bottom:20px; background:#fff; }
	.shopInfo h3{ background: #01abec; border-radius: 5px 5px 0px 0px; 
	font-size: 18px; color: #fff; height: 50px; line-height: 50px; padding: 0 20px;}
	.shopInfo .infos{padding: 20px;}
	.shopInfo .infos h4{ font-size:18px;}
	.shopInfo .infos button{ background:#d9f3fc; border: none; height:40px; line-height:40px; font-size:14px; padding:0 20px; border-radius:5px; margin-top:10px; }

	.coupons ul{ display:block; margin: 20px 0px; }
	.coupons ul li {display: flex; margin-top: 10px; width: 100%; height: 109px; padding: 15px; border-radius: 10px; margin-right: 10px;}
	.coupons ul li dd:nth-child(1){ display:flex; line-height:20px; position: relative; padding-right: 20px; color: #fff;}
	.coupons ul li dd:nth-child(1) h1{ font-size: 48px; line-height: 79px;}
	.coupons ul li dd:nth-child(1) span{ margin-top: 40px; font-size: 25px; margin-right: 5px; }
	.coupons ul li dd:nth-child(1)::after{ content: ''; width: 1px; height: 50px; background: #fff; right: 0; top: 12px; position: absolute;}
	.coupons ul li dd:nth-child(2){ padding-left: 20px;}
	.coupons ul li dd:nth-child(2) p{ font-size: 16px; color: #fff; height: 30px; line-height: 30px;}
	.coupons ul li dd:nth-child(2) button{ height: 30px; line-height: 30px; background: #fff; border-radius: 5px; width: 100px; border: 0;}
	.coupons ul li dd:nth-child(2) button:disabled{ background: #ddd; color: #000;}
	.coupons ul li.c1{ background: url(../images/yhq1bg.png);}
	.coupons ul li.c1 button{ color: #01abec;}
	.coupons ul li.c2{ background: url(../images/yhq2bg.png);}
	.coupons ul li.c2 button{ color: #01abec;}
	.coupons ul li.c3{ background: url(../images/yhq3bg.png);}
	.coupons ul li.c3 button{ color: #01abec;}
	.coupons ul li.c4{ background: url(../images/yhq4bg.png);}
	.coupons ul li.c4 button{ color: #01abec;}


	.box{height: auto; padding:20px;}
	.box a{ display: block;}
	.Collapsing{ width: 100%; height: 30px; line-height: 30px; cursor: pointer; text-align: left; background-repeat: no-repeat; color: #000; font-size: 16px; font-weight: 400; position: relative; }
	.child::before{ content: ''; background-image: url("../icon/right.png"); background-size: 20px 20px; width: 20px; height: 20px; display: block; position: absolute; right: 0;}
	.coll_body{display: none; text-align: left; }
	.coll_body a{display:block; margin:10px 20px; text-align: left;}
	.current{}
	.current::before{ content: ''; background-image: url("../icon/right.png"); background-size: 20px 20px; width: 20px; height: 20px; display: block; position: absolute; right: 0;transform: rotate(90deg); /*旋转背景图片*/}

}