@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@400;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Courgette&display=swap');


*{
	margin:0;
	padding:0;
}

/* section */
section{
	margin:auto;
	width: 100%;
}


.art{
	width: 104%;
	margin: auto;
	
	overflow:hidden;
	left: -2%;
}

.box{
	display: inline-block;
	box-sizing: border-box;
	width: 24%;
	margin: 12px 1px 0px;
	background: rgba(55,55,55,1);
	z-index: 10;
	
	cursor: pointer;
}

@media only screen and (max-width: 1500px){
	.art{
		width: 104%;
		margin: auto;
		
		overflow:hidden;
		left: -2%;
	}
	
	.box{
		display: inline-block;
		box-sizing: border-box;
		width: 30%;
		margin: 12px 1px 0px;
		background: rgba(55,55,55,1);
		z-index: 10;
		
		cursor: pointer;
	}
}

@media only screen and (max-width: 890px){

	.art{
		width: 104%;
		margin: auto;
		
		overflow:hidden;
		left: -2%;
	}
	
	.box{
		display: inline-block;
		box-sizing: border-box;
		width: 100%;
		margin: 12px 1px 0px;
		background: rgba(55,55,55,1);
		z-index: 10;
		
		cursor: pointer;
	}
}