.first-slider-wrap { position: relative; background-position: top content; }

.first-5game-wrap { width: 1000px; margin: 0 auto; padding: 54px 0 78px 0; display: flex; flex-wrap: nowrap; }

.gameBox-nav {width: 250px;margin-top: 22px;}
.gameBox-nav ul { font-size: 0; }
.gameBox-nav ul li {display: inline-block;width: 250px;aspect-ratio: 25/9;}
.gameBox-nav ul li a {display: inline-block;width: 100%;aspect-ratio: 25 / 9;cursor: pointer;}
.gameBox-nav ul li a.g1 { background-image: url("/images/21/first_game_btn01.webp"); background-repeat: no-repeat; background-position: top; margin-bottom: 10px; }
.gameBox-nav ul li a.g2 { background-image: url("/images/21/first_game_btn02.webp"); background-repeat: no-repeat; background-position: top; margin-bottom: 10px; }
.gameBox-nav ul li a.g3 { background-image: url("/images/21/first_game_btn03.webp"); background-repeat: no-repeat; background-position: top; margin-bottom: 10px; }
.gameBox-nav ul li a.g4 { background-image: url("/images/21/first_game_btn04.webp"); background-repeat: no-repeat; background-position: top; margin-bottom: 10px; }
.gameBox-nav ul li a.g5 { background-image: url("/images/21/first_game_btn05.webp"); background-repeat: no-repeat; background-position: top; }
.gameBox-nav ul li.active a {background-position: 0 100%;}
.first-5game-main { flex: 1; height: 512px; }
.gameBox-content { display: none; }
.gameBox-content.active { display: block; }

.games-wrap { float: left; width: 750px; height: 512px; }

.gameBox-bg { display: inline-block; width: 750px; height: 512px; background-repeat: no-repeat; }
.gameBox-bg.g01 { background-image: url("/images/21/first_game_img01.webp"); }
.gameBox-bg.g02 { background-image: url("/images/21/first_game_img02.webp"); }
.gameBox-bg.g03 { background-image: url("/images/21/first_game_img03.webp"); }
.gameBox-bg.g04 { background-image: url("/images/21/first_game_img04.webp"); }
.gameBox-bg.g05 { background-image: url("/images/21/first_game_img05.webp"); }
.gameBox-bg .text {width: 40%;margin: 95px 50% 0 30px;}
.gameBox-bg .text h2 { font-size: 30px; line-height: 30px; color: var(--banner-progress); font-weight: bold; }
.gameBox-bg .text p {font-size: 14px;line-height: 30px;color: #979797;margin: 34% 0 1em 0;}
.gameBox-bg .game-box {float: left;width: 320px;height: 86px;margin-left: 30px;display: flex;align-items: center;}
.gameBox-bg .game-box a {display: flex;width: 70px;font-size: 14px;color: #adadad;line-height: 22px;text-decoration: none;text-align: center;margin-right: 10px;flex-direction: column;}
.gameBox-bg .game-box a img {float: left;width: 60px;aspect-ratio: 1/1;margin: 0 5px;}
.gameBox-bg .game-box .game-ball { animation-name: lottoballJump; animation-duration: 7s; animation-fill-mode: both; animation-timing-function: linear; animation-iteration-count: infinite; }
.gameBox-bg .game-box .game-ball.ball-2 { animation-delay: 0.25s; }
.gameBox-bg .game-box .game-ball.ball-3 { animation-delay: 0.5s; }
.gameBox-bg .game-box .game-ball.ball-4 { animation-delay: 0.75s; }

@keyframes lottoballJump { 0% { transform: translateY(0); } 20% { transform: translateY(0); } 25% { transform: translateY(-10px); } 30% { transform: translateY(0); } 100% { transform: translateY(0); } }

.first-title { height: 144px; }
.first-title h1 { font-size: 40px; text-align: center; line-height: 40px; color: #5f5f5f; padding: 50px 0 18px 0; }
.first-title span { display: block; width: 40px; height: 3px; margin: 0 auto; background-color: #d0b7a1; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); }
.first-title p { font-size: 13px; color: #cacbc5; text-align: center; line-height: 13px; padding-top: 22px; letter-spacing: 3px; }

.gameBox-wrap { position: relative; width: 100%; height: 740px; background-color: #f6f6f6; }
.gameBox-main { width: 1000px; height: 476px; margin: 0 auto; padding-top: 60px; }
.gameBox-main ul { display: block; }
.gameBox-main li { display: block; float: left; }
.gameBox-main li a { display: block; width: 100%; height: 100%; }

.gameBox-main li.gameBox01 a { background-image: url("/images/21/game01.webp"); }
.gameBox-main li.gameBox02 a { background-image: url("/images/21/game02.webp"); }
.gameBox-main li.gameBox02 { margin: 0 20px; }
.gameBox-main li.gameBox03 a { background-image: url("/images/21/game03.webp"); }

.first-mobile-wrap { position: relative; height: 625px; background: url("/images/21/first_mobile_img03.webp") no-repeat; background-position: center 254px; }
.first-mobile-wrap .m-img01 { position: absolute; animation: m-img01 1.8s linear infinite alternate; top: 202px; left: 171px; background: url("/images/21/first_mobile_img01.webp") no-repeat left top; width: 371px; height: 425px; }
.first-mobile-wrap .m-img02 { position: absolute; animation: m-img02 1.8s linear infinite alternate; top: 173px; right: 141px; background: url("/images/21/first_mobile_img02.webp") no-repeat left top; width: 310px; height: 227px; }

@-webkit-keyframes m-img01 { 0% { left: 171px; } 100% { left: 161px; } }
@-webkit-keyframes m-img02 { 0% { right: 141px; } 100% { right: 151px; } }

.first-mobile-qrcode-wrap { float: left; width: 203px; margin: 62px 0 0 10px; }
.first-mobile-qrcode-wrap h1 { font-size: 18px; line-height: 18px; text-align: center; color: #bc987a; margin-bottom: 6px; }
.first-mobile-qrcode-wrap p { font-size: 14px; line-height: 14px; text-align: center; color: #5f5f5f; margin-bottom: 18px; }
.first-mobile-qrcode-wrap .m-bg { width: 125px; height: 125px; background: url(/images/21/first_mobile_qr_bg.webp) no-repeat; margin: 0 39px; }
.mobile-qrcode { width: 125px; height: 125px; background-repeat: no-repeat; background-position: center; background-size: 125px; }
.first-mobile-h5-wrap { float: right; width: 150px; margin: 85px 0 0 10px; }
.first-mobile-h5-wrap h1 { font-size: 18px; line-height: 18px; text-align: center; color: #bc987a; margin-bottom: 16px; }
.first-mobile-h5-wrap h2 { font-size: 20px; line-height: 16px; text-align: center; color: #666666; margin: 17px 0 11px 0; }
.first-mobile-h5-wrap p { font-size: 14px; line-height: 14px; text-align: center; color: #5f5f5f; }
.first-mobile-h5-wrap .h-5 { width: 103px; height: 118px; background: url(/images/21/first_mobile_h5.webp) no-repeat; margin: 0 23px; }

/* 品牌 */
.first-contact-wrap { position: relative; width: 100%; height: 660px; background-color: #f6f6f6; }
.first-contact-main { width: 1000px; height: 370px; margin: 0 auto; padding-top: 66px; }
.first-contact-main .c-01, .first-contact-main .c-02, .first-contact-main .c-03, .first-contact-main .c-04 { float: left; width: 238px; margin-right: 10px; position: relative; }
.first-contact-main .c-01 h1, .first-contact-main .c-02 h1, .first-contact-main .c-03 h1, .first-contact-main .c-04 h1 { width: 208px; font-size: 20px; line-height: 20px; text-align: center; color: #5f5f5f; margin: 0 15px 11px 15px; }
.first-contact-main .c-01 h2, .first-contact-main .c-02 h2, .first-contact-main .c-03 h2, .first-contact-main .c-04 h2 { width: 208px; font-size: 12px; line-height: 12px; text-align: center; color: #cccccc; margin: 0 15px 7px 15px; }
.first-contact-main .c-01 p, .first-contact-main .c-02 p, .first-contact-main .c-03 p, .first-contact-main .c-04 p { width: 208px; font-size: 13px; line-height: 26px; text-align: center; color: #5f5f5f; margin-bottom: 18px; margin: 0 15px 0 15px; }
.first-contact-main .c-01 .num, .first-contact-main .c-02 .num, .first-contact-main .c-03 .num, .first-contact-main .c-04 .num { position: absolute; width: 120px; height: 54px; font-size: 56px; text-align: center; color: #d0b7a1; line-height: 54px; font-weight: bold; font-style: italic; top: 138px; left: 4px; }
.first-contact-main .c-01 .c-img-1 { width: 192px; height: 192px; margin: 0 23px 28px 23px; background: url(/images/21/contact_img01.webp) top center no-repeat; }
.first-contact-main .c-02 .c-img-2 { width: 192px; height: 192px; margin: 0 23px 28px 23px; background: url(/images/21/contact_img02.webp) top center no-repeat; }
.first-contact-main .c-03 .c-img-3 { width: 192px; height: 192px; margin: 0 23px 28px 23px; background: url(/images/21/contact_img03.webp) top center no-repeat; }
.first-contact-main .c-04 { margin-right: 0px; }
.first-contact-main .c-04 .c-img-4 { width: 238px; height: 192px; margin: 0 0 28px 0; background: url(/images/21/contact_img04.webp) top center no-repeat; }

@media (min-width: 1025px) {
	.gameBox-nav ul li:hover a {background-position: 0 100%;}
	.gameBox-main li.gameBox01 a:hover { background-image: url("/images/21/game01_over.webp"); }
	.gameBox-main li.gameBox02 a:hover { background-image: url("/images/21/game02_over.webp"); }
	.gameBox-main li.gameBox03 a:hover { background-image: url("/images/21/game03_over.webp"); }
	.gameBox-bg .game-box a:hover { color: #585252; font-weight: bold; }
}
@media (max-width: 999px) and (min-width: 768px) {
	.first-5game-wrap { width: 100%; padding: 30px 10px; flex-direction: column; align-items: center; }
	.gameBox-nav { width: 100%; height: auto; margin: 0 0 20px 0; }
	.gameBox-nav ul { width: min(90%, 700px); justify-content: center; flex-wrap: wrap; margin: auto; display: flex; }
	.gameBox-nav ul li { width: 30%; margin: 5px; }
	.gameBox-nav ul li a { background-size: cover; }
	.first-5game-main { width: 100%; height: auto; }
	.games-wrap, .gameBox-bg { width: 100%; height: auto; background-size: cover; }
	.gameBox-bg .text {margin: 12% 0 0 6%;text-align: center;}
	.gameBox-bg .game-box {width: 100%;display: flex;flex-wrap: wrap;margin: 20px 0 20px 5%;}
	.gameBox-bg .game-box a { margin: 5px; }
}
@media (max-width: 767px) {
	.first-5game-wrap { width: 100%; padding: 20px 10px; flex-direction: column; }
	.gameBox-nav { width: 100%; margin: 0; }
	.gameBox-nav ul { display: flex; flex-wrap: wrap; justify-content: center; }
	.gameBox-nav ul li {width: 31%;margin: 5px;}
	.gameBox-nav ul li a { width: 100%; background-size: 100%; background-position: center; }
	.games-wrap, .gameBox-bg { width: 100%; height: auto; background-size: cover; }
	.gameBox-bg .text { text-align: center; }
	.gameBox-bg .text p { font-size: 16px; }
	.gameBox-bg .game-box { display: flex; flex-wrap: wrap; width: 100%; }
	.gameBox-bg .game-box a {width: min(100%, 70px);margin: 5px;}
	.gameBox-bg .game-box a img { width: 50px; margin: 0 auto; }
}
@media (max-width: 550px) {
	.gameBox-bg {background-size: 130% auto;}
	.gameBox-bg .text {margin: 15% 0 0 30px;width: 60%;}
	.gameBox-bg .text p { margin-top: 20%; }
	.gameBox-bg.g03 .text p , .gameBox-bg.g04 .text p { margin-right: 20%; }
}
@media (max-width: 450px) {
	.gameBox-nav ul li {width: 43%;}
}