@import url('./fontawesome-all.css');
@import url('./font-awesome.min.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;300;400;500;700;900&family=Noto+Sans+TC:wght@100;300;400;500;700;900&family=Noto+Sans:wght@400;700&display=swap');

*:focus { outline: none; }
*, ::after, ::before { margin: 0; padding: 0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; transition: all .2s linear; -webkit-transition: all .2s linear; -moz-transition: all .2s linear; -o-transition: all .2s linear; -ms-transition: all .2s linear; }

header, footer, div, nav, article, h2, h3, h4, h5, h6, hr, p, form, label, input, textarea, ul, li, img, svg, span, font, strong, b, a, i { text-align: left; vertical-align: middle; word-wrap: break-word; word-break: break-word; line-height: 170%; border-width: 0; font-family: 'Noto Sans TC', 'Noto Sans SC', sans-serif; font-size: 16px; color: #111; }

ul , ol { list-style: none; }

/* img */
img { max-width: 100%; }
.img_cover { object-fit: cover; }
.img_contain { object-fit: contain; }

a , a:link , a:visited , a:hover { text-decoration: none; white-space: pre-wrap; }

.left_txt { text-align: left; }
.center_txt { text-align: center; }

/* wrap */
#wrap { overflow: hidden; position: relative; background: #fff; }
#wrap .content_box { position: relative; margin: 0 auto; padding-bottom: 30px; width: 100%; background: rgb(255 255 255 / 75%); z-index: 3; }
#wrap .content_box section { margin: 0 auto; width: 960px; }

/* game_info */
.game_info .row { margin: 5vmax 0; }
.game_info .row.s_box { margin: 2vmax 0; }
.game_info .title_box { margin-bottom: 30px; }
.game_info .s_box .title_box { margin-bottom: 15px; }
.game_info .title_box h3 { display: flex; justify-content: center; align-items: center; }
.game_info .title_box h3 svg { width: 24px; height: 44px; fill: #1b2e68; }
.game_info .title_box h3 svg:first-child { fill: #f2a01c; -webkit-transform: scaleX(-1); transform: scaleX(-1); }
.game_info .title_box h3 b { margin: 0 15px; font-size: 30px; color: #901a1a; }
.game_info .title_box p { margin-top: 10px; font-weight: 600; font-size: 20px; color: #901a1a; }
.game_info .title_box article { margin-top: 10px; font-weight: 600; font-size: 20px; }

/* win_box */
#win_box { position: absolute; width: 100%; height: 100%; background: rgb(0 0 0 / 70%); display: flex; justify-content: center; align-items: center; top: 0; left: 0; z-index: 10; }
#win_box article { position: relative; padding: 50px 20px 30px; width: 386px; background: url(../img/img_win_bg.png) #fff no-repeat 50% 0 / 120% auto; border-radius: 10px; text-align: center; -webkit-animation: winBg 1.5s infinite alternate ease-in-out; animation: winBg 1.5s infinite alternate ease-in-out; }
#win_box .close_win_box { position: absolute; width: 30px; height: 30px; background: #000; border: 2px #fff solid; border-radius: 50%; display: flex; justify-content: center; align-items: center;  top: -10px; right: -10px; }
#win_box .close_win_box svg { width: 55%; height: 55%; }
#win_box article h3 { font-size: 22px; }
#win_box article h2 { margin: .8em 0 .2em; font-size: 42px; color: #901a1a; }
#win_box article h2 b { display: inline-block; font-size: 42px; color: #901a1a; }
#win_box article h2 span { margin: 4px 10px 0; display: inline-block; font-size: 25px; }
#win_box article a.ok_btn { margin-top: 10px; display: inline-block; }

@-webkit-keyframes winBg { 0% , 100% { background-size: 120% auto; } 50% { background-size: 100% auto; } }
@keyframes winBg { 0% , 100% { background-size: 120% auto; } 50% { background-size: 100% auto; } }

@media screen and (min-width: 1281px){
	#wrap .content_box { width: 1280px; background: rgb(255 255 255 / 97%); }
	#wrap .content_box section { width: 1000px; }
}
@media screen and (max-width: 1024px){
	#wrap:before , #wrap:after { background-size: 140% auto; }
	#wrap .content_box section { width: 95%; }
}
@media screen and (min-width: 769px){
	header, footer, div, nav, article, h2, h3, h4, h5, h6, hr, p, form, label, input, textarea, ul, li, img, svg, span, font, strong, b, a, i { font-size: 18px; }
}
@media screen and (max-width: 768px){
	#wrap .content_box { padding-bottom: 70px; }
	.game_info .title_box { margin-bottom: 15px; }
	.game_info .title_box h3 b { font-size: 25px; }
	.game_info .title_box h3 svg { height: 34px; }
	.game_info .title_box p { font-size: 18px; }
	.game_info .title_box article { font-weight: 500; font-size: 17px; }
}
@media screen and (max-width: 640px){
	#win_box article { padding: 20px 20px 10px; width: 250px; }
	#win_box article h3 { font-size: 19px; }
	#win_box article h2 , #win_box article h2 b { font-size: 35px; line-height: 1.4; }
	#win_box article h2 span { font-size: 20px; }
	#win_box article p { font-size: 15px; }
	#win_box article a.ok_btn { margin-top: 0; width: 120px; }
}
@media screen and (max-width: 550px){
	#wrap:before , #wrap:after { background-size: 190% auto; }
	#wrap .content_box section { width: 99%; }
	.game_info { margin: 0 10px; }
}