@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; }

body { min-height: 100vh; display: flex; background: url(/img/img_body_background.jpg) no-repeat 0 20% / cover; }

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; }

/* turntable */
#turntable_box { position: relative; margin: auto; padding-top: 50px; width: min(90%, 1000px); background: url(/img/img_bg.png) no-repeat 50% 0 / 100% auto; }
#turntable_box .turntable_bg { position: relative; margin: 0 auto; width: 867px; height: 751px; background: url(/img/img_turntable_bg.png) no-repeat 50% / auto 100%; }
#turntable_box .turntable_bg .mask { position: absolute; width: 454px; height: 451px; left: 116px; top: 60px; }
#turntable_box .turntable_bg .pointer { position: absolute; width: 119px; height: 115px; top: 50%; left: 50%; z-index: 8; cursor: pointer; -webkit-transform: translate(-50%, -70%); transform: translateX(-50%, -70%); }
#turntable_box .turntable_bg .pointerb { position: absolute; width: 145px; height: 362px; top: 6px; left: 50%; z-index: 7; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
#turntable_box .turntable_bg .rotate { position: absolute; width: 560px; height: 560px; top: 71px; left: 153px; }
#turntable_box .turntable_bg .rotate img { transition: none; -webkit-transition: none; -moz-transition: none; -o-transition: none; -ms-transition: none; }

/* win_box */
#win_box { position: fixed; 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 { 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 (max-width: 800px){
	#turntable_box .turntable_bg { width: 100%; height: 88vw; }
	#turntable_box .turntable_bg .pointer { width: 15vw; height: 15vw; }
	#turntable_box .turntable_bg .pointerb { width: 18vw; height: auto; top: -1vw; }
	#turntable_box .turntable_bg .rotate { width: 67vw; height: auto; top: 8vw; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}
@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){
	#turntable_box .turntable_bg { height: 105vw; }
	#turntable_box .turntable_bg .pointer { width: 19vw; height: 19vw; }
	#turntable_box .turntable_bg .pointerb { width: 21vw; }
	#turntable_box .turntable_bg .rotate { width: 81vw; }
}