@media (max-width:1000px) {
	body {
		background-color: var(--secondary-color) !important;
	}

	.main {
		width: 100%;
		height: auto;
		padding: 0 0 15px;
	}
	.m-title{
		width: 100%;
		height: auto;
		font-size: 20px;
		color: var(--m-title);
		text-transform: uppercase;
		font-weight: 600;
		line-height: 1.5;
		margin: 0 auto;
		/* border-bottom: 2px solid #68bef0; */
		/* background-color: #F4F4F4; */
	}
	.m-title img{
		width: 28px;
		height: 28px;
		vertical-align: middle;
	}
	.m-title p{
		width: auto;
		height: auto;
		display: inline-block;
		text-align: center;
		padding: 0 5px;
		/* background-color: var(--m-title_p); */
	}
	.listOne{
		width: 100%;
		/* height: auto; */
		padding: 0px 0;
		display: flex;
		margin: 0 auto;
		justify-content: space-between;
		/* flex-wrap: wrap; */
		/* background-color: pink; */
		/* overflow: hidden; */
		overflow-x: auto;
		overflow-y: hidden;
		height: 215px;
	}

	/* 修改 */
	.category-teaser{
		height:180px;
		overflow:hidden;
		display:flex;
		flex-direction:row;
		flex-wrap:nowrap;
		justify-content:flex-start;
		align-content:flex-start;
		align-items:flex-start;
		width:100%
	}
	.scrollable-div{
		order:2;
		flex:1 1 auto;
		/* white-space:nowrap; */
		overflow-x:hidden;
		overflow-y:hidden;
		-webkit-overflow-scrolling:touch;
		scroll-behavior:smooth;
		display:flex;
	}
	.listOne::-webkit-scrollbar {
		display: none;
	}
	
	.image-placeholder{
		width: 132px;
		height: 130px;
	}

	.scroll{
		height:202px;
		order:3;
		flex:0 0 auto;
		align-self:flex-start;
		cursor:pointer;
		line-height:180px;
		font-size:2em;
		opacity:.7;
		user-select:none;
		width:30px;
		color:var(--scroll-color);
		padding-left:10px;
		position:absolute;
		right:0;
		background-color:var(--scroll-background-color)
	}



	.l1-box{
		width: 174px;
		display: block;
		height:auto;
		box-shadow: 0px 0px 10px gainsboro;
		margin-bottom: 20px;
		background-color: var(--l1-box);
	}
	.l1-box img{
		height: 130px;
		
	}
	.text{
		text-align: center;
		padding: 5px 0;
		font-size: 16px;
		overflow-wrap:break-word;
		height: 55px;
		overflow: hidden;
		/* color: white; */
	}
	.list2{
		width: 100%;
		margin: 0 auto;
		justify-content: space-between;
		display: flex;
		padding: 0px 0;
		overflow-x: auto;
		overflow-y: hidden;
		height: 215px;
	}
	.list2::-webkit-scrollbar {
		display: none;
	}
	.list2 .l1-box{
		width: 240px;
		height: auto;
		display: block;
		/* margin: 0 auto 20px;
		border-radius: 15px; */
		box-shadow: 0px 0px 10px gainsboro;
		margin-bottom: 20px;
	}
	.list2 .l1-box img{
		/* width: 130px; */
		height: 130px;
		/* display: block; */
		/* border-radius: 15px; */
	}
	.list2 .l1-box .text{
		text-align: center;
		padding: 5px 0;
		font-size: 16px;
		overflow-wrap:break-word;
		height: 55px;
		overflow: hidden;
	}
	.list3{
		width: 100%;
		/* height: auto; */
		padding: 0px 0;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		/* flex-wrap: wrap; */
		overflow-x: auto;
		overflow-y: hidden;
		height: 215px;
		
	}
	.list3::-webkit-scrollbar {
		display: none;
	}
	.list3 .l1-box{
		width: 240px;
		height: auto;
		display: block;
		/* border-radius: 10px; */
		margin-bottom: 15px;
		box-shadow: 0px 0px 10px gainsboro;
		
	}
	.list3 .l1-box img{
		/* width: 100%; */
		height: 130px;
		/* display: block;
		border-radius: 10px; */
	}
	.list3 .l1-box .text{
		text-align: center;
		padding: 5px 0;
		font-size: 16px;
		overflow-wrap:break-word;
		height: 55px;
		overflow: hidden;
	}
	.list4{
		width: 100%;
		/* height: auto; */
		margin: 0 auto;
		padding: 0px 0;
		overflow-x: auto;
		overflow-y: hidden;
		display: flex;
		justify-content: space-between;
		height: 215px;
	}
	.list4 .l1-box{
		width: 240px;
		height: auto;
		/* background-color: #FFFFFF; */
		box-shadow: 0px 0px 10px gainsboro;
		/* border-radius: 10px; */
		display: block;
		/* justify-content: space-between; */
		/* align-items: center; */
		margin-bottom:20px;
	}
	.list4::-webkit-scrollbar {
		display: none;
	}
	.list4 .l1-box img{
		/* width: 40%; */
		height: 130px;
		/* display: block;
		border-top-left-radius: 10px;
		border-bottom-left-radius: 10px; */
		
		
	}
	.list4 .l1-box .text{
		/* width: 55%;
		line-height: 1.5;
		font-weight: 600;
		font-size: 18px;
		text-align: center;
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1; */
		text-align: center;
		padding: 5px 0;
		font-size: 16px;
		overflow-wrap:break-word;
		height: 55px;
		overflow: hidden;
	}
}
@media (min-width:1000px) {
	body {
		/* background-color: #b5dbf2 !important; */
		background-color: var(--secondary-color) !important;
	}
	.main {
		width: 100%;
		height: auto;
		/* padding: 0 0 15px; */
		margin: 0 auto;
		/* background-color: #b5dbf2; */
	}
	.m-title{
		width: 100%;
		height: auto;
		font-size: 20px;
		color: var(--m-title);
		text-transform: uppercase;
		font-weight: 600;
		line-height: 1.5;
		
		margin: 0 auto;
		/* border-bottom: 2px solid #68bef0; */
		/* background-color: #F4F4F4; */
		
	}
	.m-title img{
		width: 28px;
		height: 28px;
		vertical-align: middle;
	}
	.m-title p{
		width: auto;
		height: auto;
		display: inline-block;
		padding: 0 5px;
		text-align: center;
		border-radius: 10px;
		/* background-color: var(--m-title_p); */
	}
	.listOne{
		width:100%;
		/* height: auto; */
		padding: 0px 0;
		display: flex;
		margin: 0 auto;
		justify-content: space-between;
		/* flex-wrap: wrap; */
		/* background-color: pink; */
		overflow-x: auto;
		overflow-y: hidden;
		height: 215px;
	}
	/* .category-teaser{
		height:180px;
		overflow:hidden;
		display:flex;
		flex-direction:row;
		flex-wrap:nowrap;
		justify-content:flex-start;
		align-content:flex-start;
		align-items:flex-start;
		width:100%
	} */
	.scrollable-div{
		order:2;
		flex:1 1 auto;
		/* white-space:nowrap; */
		overflow-x:hidden;
		overflow-y:hidden;
		-webkit-overflow-scrolling:touch;
		scroll-behavior:smooth;
		display:flex;
	}
	.listOne::-webkit-scrollbar {
		display: none;
	}
	.image-placeholder{
		width: 240px;
		height: 150px;
	}
	.scroll{
		height:202px;
		order:3;
		flex:0 0 auto;
		align-self:flex-start;
		cursor:pointer;
		line-height:180px;
		font-size:2em;
		opacity:.7;
		user-select:none;
		width:30px;
		color:var(--scroll-color);
		padding-left:10px;
		position:absolute;
		right:0;
		background-color:var(--scroll-background-color)
	}

	.l1-box{
		width: 400px;
		height: auto;
		display: block;
		/* border-radius: 10px; */
		margin-bottom: 15px;
		background-color: var(--l1-box);
		box-shadow: 0px 0px 10px gainsboro;
	}
	.l1-box img{
		width: 240px;
		height: 150px;
		/* display: block; */
		/* border-radius: 10px; */
		
	}
	.l1-box:hover .text{
		display: block;
	}
	
	.text{
		text-align: center;
		padding: 5px 0;
		font-size: 16px;
		font-weight: 600;
		/* color: white; */
	}
	.list2{
		width: 100%;
		padding: 0px 0;
		display: flex;
		margin: 0 auto;
		justify-content: space-between;
		/* flex-wrap: wrap; */
		/* background-color: pink; */
		overflow-x: auto;
		overflow-y: hidden;
		height: 215px;
		/* height: auto;
		margin: 0 auto;
		justify-content: space-around;
		flex-wrap: wrap;
		display: flex;
		padding: 15px 0; */
	}
	.list2 .l1-box{
		width: 400px;
		height: auto;
		/* border-radius: 10px; */
		margin-bottom: 15px;
		background-color: var(--l1-box);
		box-shadow: 0px 0px 10px gainsboro;
		display: block;
	}
	.list2 .l1-box img{
		/* width: 100%;
		height: 150px;
		display: block; */
		width: 240px;
		height: 150px;
		/* border-radius: 15px; */
	}
	.list2::-webkit-scrollbar {
		display: none;
	}
	.list3{
		/* width: 90%;
		height: auto;
		padding: 15px 0;
		margin: 0 auto;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap; */
		width:100%;
		/* height: auto; */
		padding: 0px 0;
		display: flex;
		margin: 0 auto;
		justify-content: space-between;
		/* flex-wrap: wrap; */
		/* background-color: pink; */
		overflow-x: auto;
		overflow-y: hidden;
		height: 215px;
		
	}
	.list3 .l1-box{
		/* width: 17%;
		height: auto;
		/* border-radius: 10px; */
		/* margin-bottom: 15px;
		background-color: #FFFFFF; */
		width: 400px;
		height: auto;
		display: block;
		/* border-radius: 10px; */
		margin-bottom: 15px;
		background-color: var(--l1-box);
		box-shadow: 0px 0px 10px gainsboro;
	}
	.list3 .l1-box img{
		/* width: 100%;
		height: 150px;
		display: block; */
		width: 240px;
		height: 150px;
		
	}
	.list3 .l1-box:hover .text{
		display: block;
	}
	.list3::-webkit-scrollbar {
		display: none;
	}
	.list4{
		/* width: 90%;
		height: auto;
		margin: 0 auto;
		padding: 15px 0;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap; */
		width:100%;
		/* height: auto; */
		padding: 0px 0;
		display: flex;
		margin: 0 auto;
		justify-content: space-between;
		/* flex-wrap: wrap; */
		/* background-color: pink; */
		overflow-x: auto;
		overflow-y: hidden;
		height: 215px;
	}
	.list4 .l1-box{
		/* width: 17%;
		height: auto;
		margin-bottom: 15px;
		background-color: #FFFFFF; */
		width: 400px;
		height: auto;
		display: block;
		/* border-radius: 10px; */
		margin-bottom: 15px;
		background-color: var(--l1-box);
		box-shadow: 0px 0px 10px gainsboro;
	}
	.list4 .l1-box img{
		/* width: 100%;
		height: 150px;
		display: block; */
		width: 240px;
		height: 150px;
		
	}
	.list4::-webkit-scrollbar {
		display: none;
	}
	
}