
@media (max-width:1000px) {
	.banner {
		width: 95%;
		position: relative;
		margin: 15px auto;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: space-around;
	}
	.g-name{
		display: none;
	}
	.b1-box img{
		width: 100%;
		height: 100%;
		border-radius: 10px;
	}
	.b1-box{
		display: block;
		margin-bottom: 10px;
		width: 45%;
		height: 140px;
		border-radius: 10px;
	}
	.b1-box:nth-of-type(1){
		width: 95%;
		height: 200px;
	}
	.b1-box:nth-last-of-type(1){
		width: 95%;
		height: 200px;
	}
	
	
	
	
}
/* PC */
@media (min-width:1000px) {
	.banner {
		width: 1300px;
		height: 300px;
		position: relative;
		background-color: var(--banner-color);
		margin: 15px auto;
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
	}
	
	.b1-box img{
		width: 100%;
		height: 100%;
		border-radius: 10px;
		transition: 0.5s all linear; 
		transform: scale(1.0);
	}
	.b1-box{
		display: block;
		/* margin-bottom: 10px; */
		width: 20%;
		height: 145px;
		position: relative;
		overflow: hidden;
		border-radius: 10px;
	}
	.g-name{
		width: 90%;
		background-color: var(--gname-backgroundcolor);
		padding: 0 5%;
		line-height: 1.5;
		font-size: 18px;
		color: var(--gname-color);
		position: absolute;
		bottom: -19%;
		left: 0;
		right: 0;
		margin: auto;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
		transition: 0.5s all linear;
		text-align: center;
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}
	.b1-box:hover .g-name{
		transform: translateY(-24px);
	}
	.b1-box:hover img{
		transform: scale(1.2);
	}
	.b1-box:nth-of-type(1){
		width: 28%;
		height: 300px;
		margin-bottom: 0px;
	}
	.b1-box:nth-of-type(1):hover .g-name{
		transform: translateY(-24px);
	}
	.b1-box:nth-of-type(6):hover .g-name{
		transform: translateY(-24px);
	}
	.b1-box:nth-of-type(6){
		width: 28%;
		height: 300px;
	}
	.b1-box:nth-of-type(1) .g-name{
		bottom: -9%;
	}
	.b1-box:nth-of-type(6) .g-name{
		bottom: -9%;
	}
}