@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap');
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
	padding: 0;
	margin: 0;
	font-family: "Noto Sans TC", '微軟正黑體', 'Helvetica', 'Arial', sans-serif !important;
}

body {
	height: 100%;
	min-height: 100vh;
	background-color: #004738;
}

* { box-sizing: border-box;}

.wrapper {
	position: relative;
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 100vh;
}

nav {
	position: relative;
	width: 100%;
	top: 0;
	margin: 0 auto;
	filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.25));
	z-index: 3;
}

.nbox {
	width: 100%;
	background-color: #004738;
	margin: 0 auto;
	padding: 0.6771% 0;
	display: flex;
	flex-direction: row;
    justify-content: center;
	align-items: center;
}

.wlogo {
	display: block;
	width: 17.1875%;
	height: 0;
	padding-bottom: 2.6042%;
	background-image: url(../images/logo_logo.png);
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
}

.float {
	position: fixed;
	width: 155px;
	padding: 12.5px;
	border: 3px solid #fff;
	border-radius: 20px;
	background-color: rgba(0, 0, 0, 0.5);
	top: 41.07%;
	right: 20px;
	z-index: 99;
	display: flex;
	flex-direction: column;
    align-items: center;
}

.fmlogo {
	width: 130px;
	height: 40px;
	display: block;
	background-image: url(../images/fm_logo.png);
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
}

.appstore, .googleplay {
	width: 130px;
	display: block;
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
}

.appstore {
	height: 48px;
	background-image: url(../images/app_store.png);
	margin-top: 20px;
}

.googleplay {
	height: 38px;
	background-image: url(../images/google_play.png);
	margin-top: 10px;
}

.sns {
	width: 130px;
	margin-top: 15px;
	display: flex;
	flex-direction: row;
    justify-content: center;
    align-items: center;
}

.fb, .ig {
	width: 40px;
	height: 40px;
	display: block;
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
}

.fb {
	background-image: url(../images/FB_icon.png);
	margin-right: 5px;
}

.ig {
	background-image: url(../images/IG_icon.png);
	margin-left: 5px;
}

.container {
	position: relative;
	width: 100%;
	display: block;
	background-image: url(../images/bg.webp);
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	background-color: #010907;
	margin: 0 auto;
	padding-bottom: 9.1667%;
	flex: 1;
}

.ttbox {
	position: relative;
	width: 100%;
	padding-top: 24.5%;
}

.thetitle {
	position: relative;
	width: 40.2604%;
	height: 0;
	padding-bottom: 8.4%;
	display: block;
	background-image: url(../images/title.webp);
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	margin: 0 auto;
}

.dtitle_m, .dpbox_m {
	display: none;
}

.btnbox {
	width: 100%;
	margin-top: 4.375%;
	display: flex;
	flex-direction: row;
    justify-content: center;
}

.bbox01, .bbox02, .bbox03 {
	width: 10.4167%;
	display: flex;
	flex-direction: column;
    align-items: center;
}

.bbox02 {
	margin: 0 10.9375%;
}

.btn01, .btn02, .btn03 {
	width: 51.5%;
	height: 0;
	padding-bottom: 51.5%;
	display: block;
	background-image: url(../images/ball_btn.png);
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	margin: 0 auto;
	cursor: pointer;
}

.bbp {
	font-weight: 400;
	font-size: 40px;
	font-size: min(max(2vw, 20px), 40px);
	line-height: 40px;
	line-height: min(max(2vw, 20px), 40px);
	color: #fff;
	text-align: center;
}

.dtitle {
	position: relative;
	width: 33.125%;
	height: 0;
	padding-bottom: 2.8%;
	display: block;
	background-image: url(../images/download_title.png);
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	    margin: 3.9063% auto 0 auto;		    
	    margin: 3.75% auto 0 auto;
} 		 
 		 
.dpbox { 		 
    display: block; 		 
    width: 100%; 		 
    margin-top: 1.8229%; 		 
    display: flex; 		 
    flex-direction: row; 		 
    justify-content: center; 		 
    align-items: center; 		 
} 		 
 		 
.dpbox .appstore, .dpbox .googleplay { 		 
    height: 0; 		 
    padding-bottom: 6.25%; 		 
    display: block; 		 
    background-size: 100%; 		 
    background-position: top center; 		 
    background-repeat: no-repeat; 		 
    margin-top: 0; 		 
} 		 
 		 
.dpbox .appstore { 		 
    width: 16.9271%; 		 
    background-image: url(../images/app_store.png); 		 
    margin-right: 0.7813%; 		 
} 		 
 		 
.dpbox .googleplay { 		 
    width: 21.1979%; 		 
    background-image: url(../images/google_play.png); 		 
    margin-left: 0.7813%; 
}

.dbox {
	width: 100%;
	margin-top: 13px;
	display: flex;
	flex-direction: row;
    justify-content: center;
}

.event01 {
	margin-top: 5.4688%;
}

.event02, .event03 {
	margin-top: 4.3229%;
}

.title01, .title02, .title03 {
	width: 23.3333%;
	height: 0;
	padding-bottom: 6.0938%;
	display: block;
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	margin: 0 auto 2.3438% auto;
	opacity: 0;
}

.title01 {
	background-image: url(../images/title_01.webp);
}

.title02 {
	background-image: url(../images/title_02.webp);
}

.title03 {
	background-image: url(../images/title_03.webp);
}

.ebg {
	position: relative;
	width: 88.0208%;
	height: 0;
	padding-bottom: 29.2708%;
	display: block;
	background-image: url(../images/event_bg.png);
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	margin: 0 auto;
	opacity: 0;
	animation-delay: 0.25s;
}

.edgbox {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 1.2426%;
	display: flex;
	flex-direction: row;
}

.eb01, .eb02, .eb03 {
	width: 49.6%;
	height: 0;
	padding-bottom: 31.7354%;
	display: block;
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
}

.eb01 {
	background-image: url(../images/event_01.webp);
}

.eb02 {
	background-image: url(../images/event_02.webp);
}

.eb03 {
	background-image: url(../images/event_03.webp);
}

.notebtn {
	position: absolute;
	width: 9.3447%;
	height: 0;
	padding-bottom: 3.4587%;
	top: 3.6%;
	right: 1.2%;
	cursor: pointer;
	z-index: 1;
}

.nbtn {
	display: block;
	width: 100%;
	height: 0;
	padding-bottom: 37.013%;
	background-image: url(../images/note_btn.png);
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
}

.ebtn01, .ebtn02, .ebtn03 {
	display: block;
	width: 98.7685%;
	height: 0;
	padding-bottom: 64.532%;
	cursor: pointer;
}

.ibox {
	position: relative;
	width: 51.0291%;
	height: 0;
	padding-bottom: 31.7191%;
}

.pbox {
	position: relative;
	width: 100%;
	padding: 6.4057% 2.1352% 2.4911% 3.5587%;
}

.p01, .p02, .p03 {
	opacity: 0;
	animation-delay: 0.5s;
}

.et {
	font-size: 45px;
	font-size: min(max(2.4vw, 22.5px), 45px);
	line-height: 45px;
	line-height: min(max(2.4vw, 22.5px), 45px);
	font-weight: 700;
	color: #004738;
}

.pbp {
	font-size: 32px;
	font-size: min(max(1.7vw, 16px), 32px);
	line-height: 32px;
	line-height: min(max(1.7vw, 16px), 32px);
	font-weight: 400;
	color: #004738;
	margin-top: 4.5077%;
}

.yline {
	width: 71.8861%;
	height: 0;
	padding-bottom: 1.3049%;
	display: block;
	background-image: url(../images/yline.png);
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	margin-top: 0.7117%;
}

.o01, .o02, .o03 {
	opacity: 0;
	animation-delay: 0.75s;
}

ol {
	font-size: 32px;
	font-size: min(max(1.7vw, 16px), 32px);
	line-height: 48px;
	line-height: min(max(2.5vw, 24px), 48px);
	font-weight: 400;
	color: #004738;
	list-style-position: inside;
	text-indent: -3.3%;
	margin-left: 3.3%;
	margin-top: 8.8968%;
}

.gift01, .gift02, .gift03 {
	position: absolute;
	width: 29.656%;
	height: 0;
	padding-bottom: 35.1127%;
	display: block;
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	right: 2.1352%;
	bottom: 2.4911%;
	opacity: 0;
	animation-delay: 1s;
}

.gift01 {
	background-image: url(../images/gift_01.webp);
}

.gift02 {
	background-image: url(../images/gift_02.webp);
}

.gift03 {
	background-image: url(../images/gift_03.webp);
}

.note1, .note2, .note3, .rules {
	position: relative;
	display: none;
	width: 46.875%;
	height: 0;
	padding-bottom: 31.25%;
	border-radius: 15px;
	background-color: #004738;
}

.note1.on, .note2.on, .note3.on, .rules.on {
	display: block;
}

.nclose {
	position: absolute;
	width: 4.4444%;
	height: 0;
	padding-bottom: 4.4444%;
	top: 2.2222%;
	right: 2.6667%;
	display: block;
	background-image: url(../images/close_note.png);
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	cursor: pointer;
}

.ntitle {
	width: 14.2222%;
	height: 0;
	padding-bottom: 4.2222%;
	display: block;
	background-image: url(../images/title_note.png);
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	margin: 3.6667% auto 0 auto;
}

.rtitle {
	width: 35.5556%;
	height: 0;
	padding-bottom: 4.2222%;
	display: block;
	background-image: url(../images/title_rules.png);
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	margin: 3.6667% auto 0 auto;
}

.nline {
	width: 44.4444%;
	height: 0.5px;
	background-color: #d9ae36;
	margin: 1.3333% auto 0 auto;
}

.npbox {
	position: relative;
	width: 89.8889%;
	height: 0;
	padding-bottom: 49.6667%;
	margin: 2.4444% auto 0 auto;
}

.np {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow-y: scroll;
}

.scrollable {
	padding-right: 5px;
	&::-webkit-scrollbar { width: 6px;}
    &::-webkit-scrollbar-button { display: none;}
    &::-webkit-scrollbar-track-piece { background: transparent;}
    &::-webkit-scrollbar-thumb {
		border-radius: 6px;
		background-color: #81a49d;
		height: 10px;
    }
    &::-webkit-scrollbar-track { box-shadow: transparent;    }
}

.np p {
	font-family: "Noto Sans TC";
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	color: #fff;
}

.np a {
	color: #D9AE36;
	text-decoration: none;
}

.smbg {
	position: relative;
	width: 325px;
	height: 165px;
	display: none;
	background-image: url(../images/sm_bg.png);
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	padding: 14px 18px;
}

.smbg1.on, .smbg1.on, .smbg3.on, .smbg4.on {
	display: block;
}

.smtitle {
	width: 86px;
	height: 23px;
	display: block;
	background-image: url(../images/sm_title.png);
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	margin: 0 auto;
}

.smbg p {
	font-family: "Noto Sans TC";
	font-size: 14px;
	font-weight: 400;
	line-height: 18px;
	text-align: center;
	margin-top: 17px;
}

.smbtn {
	width: 81px;
	height: 28px;
	display: block;
	background-image: url(../images/sm_btn.png);
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	margin: 18px auto 0 auto;
}

.top {
	position: fixed;
	width: 73px;
	height: 73px;
	display: block;
	background-image: url(../images/top.png);
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	right: 20px;
	bottom: 40px;
	z-index: 99;
	cursor: pointer;
}

footer {
	width: 100%;
	margin: 0 auto;
	filter: drop-shadow(0px -5px 5px rgba(0, 0, 0, 0.25));
	background-color: #004738;
	padding: 37px 0;
	align-items: flex-end;
}

.lbox {
	width: 100%;
	display: flex;
	flex-direction: row;
    justify-content: center;
}

.tsghicon {
	width: 40px;
	height: 40px;
	display: block;
	background-image: url(../images/tsgh_icon.png);
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	margin-right: 5px;
}

.fmicon {
	width: 40px;
	height: 40px;
	display: block;
	background-image: url(../images/fm_icon.png);
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	margin-left: 5px;
}

footer p {
	font-family: "Noto Sans TC";
	font-size: 20px;
	font-weight: 400;
	line-height: 20px;
	color: #fff;
	text-align: center;
	margin-top: 17px;
}

#ampp {
	text-decoration: underline;
	margin-top: 21px;
	cursor: pointer;
}

/* 遮罩 */
.mask {
	position: fixed;
	display: none;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.7);
	z-index: 999;
}

.mask.on {
    display: flex !important;
    justify-content: center;
    align-items: center;
}

@media screen and (max-width:768px) {
	.nbox {
		padding: 3.6111% 0;
	}

	.wlogo {
		width: 47.2222%;
		padding-bottom: 6.9444%;
	}

	.float {
		display: none;
	}

	.container {
		background-image: url(../images/bg_m.webp);
		padding-bottom: 7.7778%;
	}

	.ttbox {
		padding-top: 72%;
	}

	.thetitle {
		width: 93.6111%;
		padding-bottom: 19.4444%;
	}


	.dtitle_m {
		position: relative;
		width: 73.8889%;
		height: 0;
		padding-bottom: 5.2778%;
		display: block;
		background-image: url(../images/download_title.png);
		background-size: 100%;
		background-position: top center;
		background-repeat: no-repeat;
		margin: 9.4444% auto 0 auto;
	}

	.dpbox_m {
		display: block;
		width: 100%;
		margin-top: 3.8889%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.appstore, .googleplay {
		height: 0;
		padding-bottom: 10.8333%;
		margin-top: 0;
	}

	.appstore {
		width: 29.4444%;
		margin-right: 1.3889%;
	}

	.googleplay {
		width: 36.6667%;
		margin-left: 1.3889%;
	}

	.btnbox {
		margin-top: 4.375%;
	}

	.bbox01, .bbox02, .bbox03 {
		width: 24.7396%;
	}

	.bbox02 {
		margin: 0 6.901%;
	}

	.btn01, .btn02, .btn03 {
		width: 59.4737%;
		padding-bottom: 59.4737%;
	}

	.bbp {
		font-size: 40px;
		font-size: min(max(4.9vw, 20px), 40px);
		line-height: 40px;
		line-height: min(max(4.9vw, 20px), 40px);
		margin-top: 1.3889%;
	}

	.dtitle {
		 display: none;		 
   	 }		 
 		 
    .dpbox {
		display: none;
	}

	.event01 {
		margin-top: 13.0556%;
	}

	.event02, .event03 {
		margin-top: 10.2778%;
	}

	.title01, .title02, .title03 {
		width: 51.1111%;
		padding-bottom: 13.6111%;
	}

	.ebg {
		width: 85.9375%;
		padding-bottom: 134.8958%;
		background-image: url(../images/event_bg_m.png);
	}

	.edgbox {
		padding: 2.1212%;
		flex-direction: column;
	}

	.notebtn {
		width: 95.4545%;
		padding-bottom: 6.3636%;
		top: 1.322%;
		right: 2%;
		display: flex;
		flex-direction: row-reverse;
	}

	.nbtn {
		width: 20.4114%;
		padding-bottom: 6.6456%;
		background-image: url(../images/note_btn_m.png);
	}

	.eb01, .eb02, .eb03 {
		width: 100%;
		padding-bottom: 66.1491%;
	}

	.eb01 {
		background-image: url(../images/event_01_m.webp);
	}

	.eb02 {
		background-image: url(../images/event_02_m.webp);
	}

	.eb03 {
		background-image: url(../images/event_03_m.png);
	}

	.ebtn01, .ebtn02, .ebtn03 {
		width: 100%;
		padding-bottom: 41.9255%;
		margin-top: 23.2%;
	}

	.ibox {
		width: 100%;
		padding-bottom: 94%;
	}

	.pbox {
		padding: 4.6584% 7.1429% 0 7.1429%;
	}

	.et {
		font-size: min(max(5.4vw, 22.5px), 45px);
		line-height: min(max(5.4vw, 22.5px), 45px);
	}

	.pbp {
		font-size: min(max(3.9vw, 16px), 32px);
		line-height: min(max(3.9vw, 16px), 32px);
		margin-top: 4%;
	}

	.yline {
		width: 86.9565%;
		padding-bottom: 1.5528%;
		margin-top: 1.5528%;
	}

	ol {
		font-size: min(max(3.9vw, 16px), 32px);
		line-height: min(max(6vw, 24px), 48px);
		text-indent: -4.2%;
		margin-left: 4.2%;
		margin-top: 3%;
	}

	.gift01, .gift02, .gift03 {
		width: 90%;
		padding-bottom: 36.646%;
		right: 7%;
	}

	.gift01 {
		background-image: url(../images/gift_01_m.webp);
		bottom: 3%;
	}

	.gift02 {
		background-image: url(../images/gift_02_m.webp);
		bottom: 8%;
	}

	.gift03 {
		background-image: url(../images/gift_03_m.webp);
		bottom: 3%;
	}

	.note1, .note2, .note3, .rules {
		width: 90.2778%;
		padding-bottom: 111.1111%;
	}

	.npbox {
		width: 86.1538%;
		padding-bottom: 101.5385%;
		margin: 4.6154% auto 0 auto;
	}
}

@media screen and (max-width:480px) {
	.nbox {
		height: 50px;
		padding: 0;
	}

	.wlogo {
		width: 170px;
		height: 25px;
		padding-bottom: 0;
	}

	.bbp {
		font-size: 18px;
		font-size: min(max(4.8vw, 18px), 18px);
		line-height: 18px;
		line-height: min(max(4.8vw, 18px), 18px);
	}

	.et {
		font-size: 20px;
		font-size: min(max(5.4vw, 20px), 20px);
		line-height: 20px;
		line-height: min(max(5.4vw, 20px), 20px);
	}

	.pbp {
		font-size: 14px;
		font-size: min(max(3.8vw, 14px), 14px);
		line-height: 14px;
		line-height: min(max(3.8vw, 14px), 14px);
	}

	ol {
		font-size: 14px;
		font-size: min(max(3.8vw, 14px), 14px);
		line-height: 21px;
		line-height: min(max(5.6vw, 21px), 21px);
		text-indent: -14px;
		margin-left:14px;
		margin-top: 15px;
	}

	.note1, .note2, .note3, .rules {
		width: 325px;
		height: 400px;
		padding: 15px;
	}

	.nclose {
	width: 25px;
	height: 25px;
	top: 10px;
	right: 15px;
}

	.ntitle {
		width: 80px;
		height: 23px;
		padding-bottom: 0;
		margin: 5px auto 0 auto;
	}

	.rtitle {
		width: 198px;
		height: 23px;
		padding-bottom: 0;
		margin: 5px auto 0 auto;
	}

	.nline {
		width: 227px;
		margin: 5px auto 0 auto;
	}

	.npbox {
		width: 280px;
		height: 315px;
		padding-bottom: 0;
		margin: 15px auto 0 auto;
	}

	.np p {
		font-size: 12px;
		line-height: 18px;
	}

	.top {
		width: 38px;
		height: 38px;
		right: 22px;
		bottom: 77px;
	}

	footer {
		padding: 10px;
	}

	footer p {
		font-size: 10px;
		line-height: 10px;
		margin-top: 5px;
	}

	#ampp {
		margin-top: 5px;
	}
}