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

	.main {
		width: 100%;
		height: auto;
		padding: 0 0 15px;
		/* background-color: #b5dbf2; */
	}
	.m-title1{
		display: block;
	}
	.m-title2{
		display: none;
	}
	.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;
		margin-top: 13px;
		/* 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;
		font-size: 20px;
		font-weight: 600;
		/* background-color: var(--m-title_p); */
	}
	.image-placeholder{
		width: 188px;
		height: 188px;
	}
	.listOne{
		width: 100%;
		/* height: auto; */
		padding: 0px 0;
		display: flex;
		margin: 5px auto;
		/* justify-content: space-between; */
		justify-content: center;
		align-items: center;
		/* flex-wrap: wrap; */
		overflow-x: auto;
		/* overflow-y: hidden; */
		/* background-color: pink; */
		/* height: 215px; */
		gap: 5px;
	}
	.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;
	}
	.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)
	}
	.listOne::-webkit-scrollbar {
		display: none;
	}
	.l1-box{
		width: 188px;
		display: block;
		height:auto;
		border-radius: 10px;
		/* background-color: #FFFFFF; */
		box-shadow: 0px 0px 10px gainsboro;
		margin-bottom: 20px;
	}
	.l1-box:nth-child(n+3) {
		display: none;
	}
	.l1-box img{
		/* width: 100%; */
		/* height: 130px; */
		/* width: 240px; */
		height: 188px;
		border-radius: 8px;
	}
	.text{
		text-align: center;
		padding: 5px 0;
		font-size: 16px;
		overflow-wrap: break-word;
		height: 35px;
    	overflow: hidden;
		color: var(--m-title);
		line-height: 35px;
		/* color: white; */
		/* font-weight: 600; */
	}
	/* .l1-box:hover .text{
		display: block;
	} */
	.list2{
		width: 100%;
		/* height: auto; */
		margin: 0 auto;
		justify-content: space-between;
		/* flex-wrap: wrap; */
		display: flex;
		padding: 15px 0;
		overflow-x: auto;
		overflow-y: hidden;
		height: 207px;
	}
	.list2 .l1-box{
		width: 174px;
		display: block;
		height: auto;
		/* margin: 0 auto 20px; */
		border-radius: 15px;
		box-shadow: 0px 0px 10px gainsboro;
	}
	.list2 .l1-box img{
		/* width: 100%; */
		height: 130px;
		/* display: block;
		border-radius: 15px; */
	}
	.list2 .l1-box .text{
		/* display: none; */
		text-align: center;
		padding: 5px 0;
		font-size: 16px;
		overflow-wrap:break-word;
	}
	.list3{
		width: 90%;
		height: auto;
		padding: 15px 0;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		
	}
	.list3 .l1-box{
		width: 30%;
		height: auto;
		border-radius: 10px;
		margin-bottom: 15px;
		box-shadow: 0px 0px 10px gainsboro;
		
	}
	.list3 .l1-box img{
		width: 100%;
		height: 90px;
		display: block;
		border-radius: 10px;
	}
	.list3 .l1-box .text{
		display: none;
	}
	.list4{
		width: 90%;
		height: auto;
		margin: 0 auto;
		padding: 15px 0;
	}
	.list4 .l1-box{
		width: 100%;
		height: auto;
		/* background-color: #FFFFFF; */
		box-shadow: 0px 0px 10px gainsboro;
		border-radius: 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom:20px;
	}
	.list4 .l1-box img{
		width: 40%;
		height: 90px;
		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;
	}

	.scrollable-div{
		order:2;
		flex:1 1 auto;
		/* white-space:nowrap; */
		overflow-x:hidden;
		overflow-y:hidden;
		-webkit-overflow-scrolling:touch;
		scroll-behavior:smooth
	}
}
@media (min-width:1000px) {
	body {
		/* background-color: #b5dbf2 !important; */
		background-color: var(--secondary-color) !important;
	}
	.main {
		width: 1400px;
		height: auto;
		padding: 0 0 15px;
		margin: 0 auto;
		/* background-color: #b5dbf2; */
	}
	.m-title1{
		display: none;
	}
	.m-title2{
		display: block;
	}
	.m-title{
		width: 80%;
		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;
		font-size: 20px;
		font-weight: 600;
		/* background-color: var(--m-title_p); */
	}
	.listOne{
		width:100%;
		/* height: auto; */
		padding: 15px 0;
		display: flex;
		margin: 0 auto;
		justify-content: space-between;
		/* justify-content: center; */
		/* align-items:center; */
		/* flex-wrap: wrap; */
		/* background-color: pink; */
		overflow-x: auto;
		overflow-y: hidden;
		height: 215px;
	}
	.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;
	}
	.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;
		/* display: flex; */
		/* flex-direction: column; */
		/* justify-content: center; */
		/* align-items: center; */
		/* box-sizing:border-box; */
		/* border-radius: 10px; */
		margin-bottom: 15px;
		background-color: var(--l1-box);
		box-shadow: 0px 0px 10px gainsboro;
	}
	.image-placeholder{
		/* width: 160px;
		height: 100px; */
		width: 240px;
		height: 150px;
	}
	.l1-box img{
		/* width: 160px;
		height: 100px; */
		width: 240px;
		height: 150px;
		/* display: block; */
		/* border-radius: 10px; */
		
	}
	.l1-box:hover .text{
		display: block;
	}
	
	.text{
		/* display: none; */
		text-align: center;
		padding: 5px 0;
		font-size: 16px;
		font-weight: 600;
		height: 35px;
		color: var(--m-title);
    	overflow: hidden;
		/* color: white; */
	}
	.list2{
		width: 100%;
		/* height: auto; */
		margin: 0 auto;
		justify-content: space-around;
		/* flex-wrap: wrap; */
		display: flex;
		padding: 15px 0;
		overflow-x: auto;
		overflow-y: hidden;
		height: 207px;
	}
	.list2 .l1-box{
		width: 400px;
		height: auto;
		display: block;
		/* border-radius: 10px; */
		margin-bottom: 15px;
		box-shadow: 0px 0px 10px gainsboro;
		background-color: var(--l1-box);
	}
	.list2 .l1-box img{
		/* width: 100%;
		height: 150px;
		display: block; */
		height: 240px;
		height: 150px;
		/* border-radius: 15px; */
	}
	
	.list3{
		width: 90%;
		height: auto;
		padding: 15px 0;
		margin: 0 auto;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		
	}
	.list3 .l1-box{
		width: 17%;
		height: auto;
		/* border-radius: 10px; */
		margin-bottom: 15px;
		background-color: var(--l1-box);
		
	}
	.list3 .l1-box img{
		width: 100%;
		height: 150px;
		display: block;
		
	}
	.list3 .l1-box:hover .text{
		display: block;
	}
	.list4{
		width: 90%;
		height: auto;
		margin: 0 auto;
		padding: 15px 0;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}
	.list4 .l1-box{
		width: 17%;
		height: auto;
		margin-bottom: 15px;
		background-color: var(--l1-box);
	}
	.list4 .l1-box img{
		width: 100%;
		height: 150px;
		display: block;
		
		
	}
}