@charset "utf-8";
/* css-grid-bgm-gr */

.grid-container-hi-silb {
	margin-top: 0;
	margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 0;
	width: 1500px;
	max-width: 90%;
	font-family: Arial, Helvetica, sans-serif;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 320px 320px 320px 100px;
	gap: 15px;
	grid-template-areas:
	"hi-gold-item1 hi-gold-item2 hi-gold-item3"
	"hi-gold-item4 hi-gold-item5 hi-gold-item6"
	"hi-gold-item7 hi-gold-item8 hi-gold-item9"
	"hi-gold-item10 hi-gold-item11 hi-gold-item12"
}

.grid-item-hi-silb {
	height: auto;
	background-color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 0;
	padding-bottom: 15px;
	gap: 50px;
	border-radius: 15px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.25);
}

.grid-item-hi-silb img {
	width: 100%;
	height: auto;
	border-radius: 10px;
}

#hi-silb-item1 {
	width: auto;
	grid-area: hi-gold-item1;
	flex-direction: column;
	gap: 10px;
}

#hi-silb-item2 {
	grid-area: hi-gold-item2;
	flex-direction: column;
	gap: 10px;
}

#hi-silb-item3 {
	grid-area: hi-gold-item3;
	flex-direction: column;
	gap: 10px;
}

#hi-silb-item4 {
	grid-area: hi-gold-item4;
	flex-direction: column;
	gap: 10px;
}

#hi-silb-item5 {
	grid-area: hi-gold-item5;
	flex-direction: column;
	gap: 10px;
}

#hi-silb-item6 {
	grid-area: hi-gold-item6;
	flex-direction: column;
	padding-top: 20px;
	gap: 10px;
}

#hi-silb-item7 {
	grid-area: hi-gold-item7;
	flex-direction: column;
	gap: 10px;
}

#hi-silb-item8 {
	grid-area: hi-gold-item8;
	flex-direction: column;
	gap: 10px;
}

#hi-silb-item9 {
	grid-area: hi-gold-item9;
	flex-direction: column;
	padding-top: 40px;
	gap: 10px;
}

#hi-silb-item10 {
	height: 70%;
	margin-bottom: 0;
	padding-top: 10px;
	grid-area: hi-gold-item10;
	flex-direction: column;
	gap: 10px;
}

#hi-silb-item11 {
	height: 70%;
	margin-bottom: 0;
	padding-top: 10px;
	grid-area: hi-gold-item11;
	flex-direction: column;
	gap: 10px;
}

#hi-silb-item12 {
	height: 70%;
	margin-bottom: 0;
	padding-top: 10px;
	grid-area: hi-gold-item12;
	flex-direction: column;
	gap: 10px;
}


@media only screen and (max-device-width: 1024px) and (orientation: portrait){

.grid-item-hi-silb {
	width: auto;
	max-width: 90%;
	height: auto;
	padding-top: 0px;
	padding-bottom: 50px;
	gap: 30px;
}

.grid-item-hi-silb img {
	width: 200px;
	height: 120px;
}

#hi-silb-item1 p {
	font-size: 12px;
}

#hi-silb-item6 {
	padding-top: 25px;
	gap: 10px;
}

#hi-silb-item9 {
	padding-top: 40px;
	gap: 10px;
}

#hi-silb-item10 {
	height: 30%;
	padding-top: 20px;
	padding-bottom: 20px;
}

#hi-silb-item11 {
	height: 30%;
	padding-top: 20px;
	padding-bottom: 20px;
}

#hi-silb-item12 {
	height: 30%;
	padding-top: 20px;
	padding-bottom: 20px;
}

}

@media only screen and (max-device-width: 1024px) and (orientation: landscape){

.grid-item-hi-silb {
	width: auto;
	max-width: 90%;
	height: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 8px;
	padding-bottom: 50px;
	gap: 30px;
}

.grid-item-hi-silb img {
	width: 220px;;
	height: 140px;
	padding-top: 10px;
}

#hi-silb-item9 {
	padding-top: 40px;
}

#hi-silb-item10 {
	height: 30%;
	padding-top: 30px;
	padding-bottom: 30px;
}

#hi-silb-item11 {
	height: 30%;
	padding-top: 30px;
	padding-bottom: 30px;
}

#hi-silb-item12 {
	height: 30%;
	padding-top: 30px;
	padding-bottom: 30px;
}
}


@media only screen and (max-width: 481px){
	
.grid-container-hi-silb {
	grid-template-columns: 1fr;
	grid-template-rows: auto auto auto auto auto auto auto auto auto auto;
	grid-template-areas:
    "hi-gold-item1" "hi-gold-item2" "hi-gold-item3"
	"hi-gold-item4" "hi-gold-item5" "hi-gold-item6"
	"hi-gold-item7" "hi-gold-item8" "hi-gold-item9"
	"hi-gold-item10" "hi-gold-item11" "hi-gold-item12";
}
.grid-item-hi-silb {
	height: auto;
	padding-top: 30px;
	
}

#hi-silb-item1 {
	margin-bottom: 0;
}

#hi-silb-item6 {
	padding-top: 50px;
	gap: 10px;
}

#hi-silb-item9 {
	padding-top: 30px;
	gap: 10px;
}

#hi-silb-item10 {
	height: auto;
	padding-top: 30px;
	padding-bottom: 30px;
}

#hi-silb-item11 {
	height: auto;
	padding-top: 30px;
	padding-bottom: 30px;
}

#hi-silb-item12 {
	height: auto;
	padding-top: 30px;
	padding-bottom: 30px;
}

.grid-item-hi-silb img{
	width: auto; 
	height: auto;
}

#hi-silb-item12 {
	margin-bottom: 10px;
}

}