@media screen and (max-width: 767px) {
	/* 有橫軸Srcoll */
	.grid-xs--scroll {
		flex-wrap: nowrap;
		white-space: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		-ms-overflow-style: -ms-autohiding-scrollbar;
		margin: -6px -12px;
		padding: 0 6px;
	}
	/* for flex padding collapse */
	.grid-xs--scroll::after {
		content: "";
		flex: 0 0 6px;
	}
	.grid-xs--scroll .grid__item {
		white-space: normal;
		margin: 6px;
	}
	.grid-xs-1--scroll .grid__item {
		width: calc(100% - 120px);
	}
	.grid-xs-2--scroll .grid__item {
		width: calc(50% - 30px);
	} 
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	.grid-md--scroll {
		flex-wrap: nowrap;
		white-space: nowrap;
		overflow-x: auto;
		margin: 0 -14px 7px;
		padding: 0 7px;
	}
	/* for flex padding collapse */
	.grid-xs--scroll::after {
		content: "";
		flex: 0 0 7px;
	}
	.grid-md--scroll .grid__item {
		white-space: normal;
		margin: 7px;
	}
	.grid-md-2--scroll .grid__item {
		width: calc(50% - 52px);
	}
	.grid-md-3--scroll .grid__item {
		width: calc(33.333% - 40px);
	}
	.grid-md-4--scroll .grid__item {
		width: calc(25% - 30px);
	}
	.grid-md-5--scroll .grid__item {
		width: calc(20% - 20px);
	}
}


@media screen and (min-width: 1024px) {
	.grid-lg--scroll {
		white-space: nowrap;
		overflow-x: auto;
		margin: 0 -9px 9px;
		padding: 0;
	}
	/* for style webkit scrollbar */
	.grid-lg--scroll::-webkit-scrollbar {
		width: 5px;
		height: 5px;
	}
	.grid-lg--scroll::-webkit-scrollbar-track {
		-webkit-border-radius: 10px;
		border-radius: 10px;
		margin: 80px 0 5px 0;
	}
	.grid-lg--scroll::-webkit-scrollbar-thumb {
		-webkit-border-radius: 4px;
		border-radius: 4px;
		background: rgb(219,219,219);
	}
	
}