@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 { background-color: #d9742b;}

* { box-sizing: border-box;}

img { max-width: 100%;}

.wrapper {
	position: relative;
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
}

.head {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 49.2188%;
	display: block;
	background-image: url(../images/bg_index.jpg);
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	margin: 0 auto;
}

.comic_line {
	position: absolute;
	width: 100%;
	height: 0;
	padding-bottom: 49.2188%;
	display: block;
	background-image: url(../images/comic_line.png);
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	margin: 0 auto;
}

.character {
	position: absolute;
	width: 100%;
	height: 0;
	padding-bottom: 53.125%;
	display: block;
	background-image: url(../images/character.png);
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	margin: 0 auto;
	bottom: 0;
}

.logo_wfnx {
	position: absolute;
	width: 18.4896%;
	height: 0;
	padding-bottom: 8.75%;
	display: block;
	background-image: url(../images/logo_wind_fantasy_nexus.png);
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	top: -0.5291%;
}

.slogan {
	position: absolute;
	width: 29.1146%;
	height: 0;
	padding-bottom: 11.9792%;
	display: block;
	background-image: url(../images/slogan.png);
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	right: 26.3542%;
	bottom: 0.6349%;
}

.download {
	position: absolute;
	width: 28.1771%;
	right: 0.8333%;
	bottom: 3.3862%;
	display: flex;
	justify-content: space-between;
}

.btn_app_store, .btn_google_play {
	height: 0;
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
}

.btn_app_store, .btn_google_play {
	display: block;
	width: 47.6895%;
	padding-bottom: 14.2329%;
}

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

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

.btn_app_store:hover, .btn_google_play:hover { filter: brightness(150%);}

.btn_download_m { display: none;}

.burgers {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 26.4063%;
	background-image: url(../images/carousel_bg.png);
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	margin: -0.7813% auto 0 auto;
	z-index: 1;
	display: flex;
	flex-direction: column;
    align-items: center;
}

.carousel {
	width: 100%;
	padding-top: 2.3438%;
	margin: 0 auto;
}

.burger_01, .burger_02, .burger_03, .burger_04 {
	width: 63.9583%;
	height: 0;
	padding-bottom: 19.4792%;
	display: block;
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	margin: 0 auto;
}

.burger_01 { background-image: url(../images/burgers_whopper.png);}

.burger_02 { background-image: url(../images/burgers_chicken_king.png);}

.burger_03 { background-image: url(../images/burgers_whopper.png);}

.burger_04 { background-image: url(../images/burgers_chicken_king.png);}

/* 輪播 */
.slick-dots { bottom:  -8.8757% !important;}

.slick-dots li {
	width: 0.7813% !important;
	height: 0 !important;
	padding-bottom: 0.7813% !important;
}

.slick-dotted.slick-slider { margin-bottom: 0 !important;}

.slick-dots li img:nth-child(1) { display: block;}

.slick-dots li img:nth-child(2) { display: none;}

.slick-dots li.slick-active img:nth-child(1) { display: none;}

.slick-dots li.slick-active img:nth-child(2) { display: block;}

.slick-list { pointer-events: none !important;}

.kailyn {
	position: absolute;
	width: 13.6979%;
	height: 0;
	padding-bottom: 16.6146%;
	display: block;
	background-image: url(../images/kailyn.png);
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	top: 14.9901%;
}

.container {
	width: 100%;
	margin: 0 auto;
}

.float {
	position: fixed;
	width: 13.5417%;
	right: 0;
	bottom: 25%;
	display: flex;
	flex-direction: column;
    align-items: center;
	opacity: 0;
	z-index: 1;
	transition: all .5s linear;
}

.float.show {
	opacity: 1;
	transition: all .5s linear;
}

.float.on {
	right: -13.5417%;
	transition: all .5s linear;
}

.yemila, .float_bg, .inquire, .download_btn, .facebook, .discord {
	height: 0;
	display: block;
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
}

.yemila {
	width: 69.2308%;
	padding-bottom: 76.9231%;
	background-image: url(../images/yemila.png);
	z-index: 1;
}

.float_bg {
	width: 100%;
	padding-bottom: 115.7692%;
	background-image: url(../images/float_bg.png);
	margin-top: -9.6154%;
	display: flex;
	flex-direction: column;
    align-items: center;
}

.inquire {
	width: 62.3077%;
	padding-bottom: 19.2308%;
	background-image: url(../images/btn_inquire.png);
	margin-top: 15.3846%;
	cursor: pointer;
}

.inquire:hover { filter: brightness(115%);}

.download_btn {
	width: 100%;
	padding-bottom: 30.7692%;
	background-image: url(../images/btn_download.png);
	margin-top: 5.7692%;
	cursor: pointer;
}

.download_btn:hover { filter: brightness(110%);}

.sns {
	width: 64.2308%;
	display: flex;
	justify-content: space-between;
}

.facebook, .discord {
	width: 45.509%;
	height: 0;
	padding-bottom: 45.509%;
	cursor: pointer;
}

.facebook { background-image: url(../images/btn_facebook.png);}

.discord {background-image: url(../images/btn_discord.png);}

.facebook:hover, .discord:hover { filter: brightness(120%);}

.btn_burger { display: none;}

/* 遮罩 */
.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;
}

.lightbox { width: 38.9583%;}

.f_i_t, .f_i_b { background-repeat: no-repeat;}

.f_i_t {
	padding-bottom: 4.4118%;
	background-image: url(../images/frame_inquire_top.png);
}

.f_i_m {
	padding: 4.0107% 4.4118%;
	background-repeat:repeat-y;
	background-image: url(../images/frame_inquire_middle.png);
}

.f_i_b {
	padding-bottom: 5.0802%;
	background-image: url(../images/frame_inquire_bottom.png);
}

.itbox {
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
}

.ititle {
	width: 42.7807%;
	height: 0;
	padding-bottom: 6.8182%;
	display: block;
	background-image: url(../images/title_inquire.png);
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	margin: 0 auto;
}

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

.close:hover { filter: brightness(150%);}

.phone {
	display: block;
	width: 206px;
	font-weight: 400;
	font-size: 25px;
	line-height: 25px;
	text-align: center;
	border-radius: 10px;
	margin: 4.386% auto;
}

.confirm {
	height: 0;
	display: block;
	background-image: url(../images/btn_confirm.png);
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	margin: 0 auto;
	cursor: pointer;
}

.confirm:hover { filter: brightness(110%);}

#i_confirm {
	width: 19.2513%;
	padding-bottom: 7.2193%;
}

#tabs {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 44.2513%;
	margin: 0 auto 4.0107% auto;
	display: none;
}

.scrollbox, .scrollbox_s {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow-y: scroll;
}

.scrollbox { margin: 4.0107% auto 0 auto;}

.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: #ebd9be;
		height: 10px;
    }
    &::-webkit-scrollbar-track { box-shadow: transparent;    }
}

table.itable th { background-color: #137530;}

table.itable td { background-color: #c4dccb;}

footer {
	width: 100%;
	background-color: #d9742b;
	margin: 0 auto;
}

.footer {
	width: 100%;
	max-width: 1000px;
	padding: 1.5625% 0;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
    align-items: center;
}

.logo {
	position: relative;
	width: 36.4%;
	display: flex;
	justify-content: space-between;
    align-items: center;
}

.logo_game_flier, .logo_fun_yours, .gsrr_pg_15, .gsrr_pg_15_m {
	height: 0;
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
}

.logo_game_flier, .logo_fun_yours, .gsrr_pg_15 { display: block;}

.logo_game_flier {
	width: 48.9011%;
	padding-bottom: 12.9121%;
	background-image: url(../images/logo_game_flier.png);
}

.logo_fun_yours {
	width: 42.8571%;
	padding-bottom: 11.2637%;
	background-image: url(../images/logo_fun_yours.png);
}

.gsrr_pg_15, .gsrr_pg_15_m {
	width: 6.6%;
	padding-bottom: 6.6%;
	background-image: url(../images/gsrr_pg_15.png);
}

.gsrr_pg_15_m { display: none;}

footer p {
	font-size: 15px;
    line-height: 20px;
	color: #fff;
}

.mt5 { margin-top: 0.5%;}

@media screen and (max-width:1440px) {
	.burgers { padding-bottom: 26.4046%;}

	.float {
		width: 18.0556%;
		bottom: 28.5%;
	}

	.float.on { right: -18.0556%;}

	.btn_burger {
		position: fixed;
		width: 3.75%;
		height: 0;
		padding-bottom: 3.75%;
		right: 1.0417%;
		bottom: 22.5%;
		display: block;
		background-image: url(../images/float_btn.png);
		background-size: 100%;
		background-position: top center;
		background-repeat: no-repeat;
		opacity: 0;
		cursor: pointer;
		transition: all .5s linear;
	}

	.btn_burger.show {
		opacity: 1;
		transition: all .5s linear;
	}

	.btn_burger.on { background-image: url(../images/float_btn-.png);}

	.lightbox { width: 51.9444%;}
}

@media screen and (max-width:1366px) {
	.float {
		width: 19.0337%;
		bottom: 32%;
	}

	.float.on { right: -19.0337%;}

	.btn_burger {
		width: 3.9531%;
		padding-bottom: 3.9531%;
		right: 1.0981%;
		bottom: 25%;
	}

	.lightbox { width: 54.7584%;}
}

@media screen and (max-width:1024px) {
	.float {
		width: 25.3906%;
		bottom: 29.5%;
	}

	.float.on { right: -25.3906%;}

	.btn_burger {
		width: 5.2734%;
		padding-bottom: 5.2734%;
		right: 1.4648%;
		bottom: 22.5%;
	}

	.lightbox { width: 73.0469%;}

	.footer { width: 94.1406%;}
}

@media screen and (max-width:960px) {
	.float {
		width: 27.0833%;
		bottom: 25%;
	}

	.float.on { right: -27.0833%;}

	.btn_burger {
		width: 5.625%;
		padding-bottom: 5.625%;
		right: 1.5625%;
		bottom: 20%;
	}

	.lightbox { width: 77.9167%;}

	.footer {
		width: 93.75%;
		flex-direction: column;
		justify-content: normal;
		align-items: center;
	}

	.logo {
		width: 100%;
		justify-content: center;
	}

	.logo_game_flier {
		width: 18.5417%;
		padding-bottom: 4.8958%;
	}

	.logo_fun_yours {
		width: 16.25%;
		padding-bottom: 4.2708%;
		margin: 0 3.125%;
	}

	.gsrr_pg_15 { display: none;}

	.gsrr_pg_15_m {
		display: block;
		width: 6.875%;
		padding-bottom: 6.875%;
	}
}

@media screen and (max-width:480px) {
	.head {
		padding-bottom: 177.9167%;
		background-image: url(../images/bg_index_m.jpg);
	}

	.comic_line {
		padding-bottom: 177.9167%;
		background-image: url(../images/comic_line_m.png);
	}

	.character {
		width: 159.1667%;
		padding-bottom: 183.3333%;
		background-image: url(../images/character_m.png);
		top: -2.9167%;
		left: -29.5833%;
	}

	.logo_wfnx {
		width: 46.4583%;
		padding-bottom: 21.875%;
		top: 3.1616%;
		left: 1.0417%;
	}

	.btn_app_store, .btn_google_play { display: none;}

	.btn_download_m {
		position: absolute;
		display: block;
		width: 43.75%;
		height: 0;
		padding-bottom: 11.6667%;
		background-image: url(../images/btn_download_m.png);
		background-size: 100%;
		background-position: top center;
		background-repeat: no-repeat;
		top: 6.7916%;
		right: 6.25%;
		cursor: pointer;
	}

	.btn_download_m:hover { filter: brightness(150%);}

	.slogan {
		width: 58.75%;
		padding-bottom: 24.375%;
		right: 1.4583%;
		bottom: 3.8642%;
	}

	.burgers {
		padding-bottom: 98.6749%;
		background-image: url(../images/carousel_bg_m.png);
		margin: -3.125% auto 0 auto;
	}

	.carousel {
		padding-top: 9.1667%;
	}

	.burger_01, .burger_02, .burger_03, .burger_04 {
		width: 93.75%;
		padding-bottom: 71.25%;
	}

	.burger_01 { background-image: url(../images/burgers_whopper_m.png);}

	.burger_02 { background-image: url(../images/burgers_whopper_spicy_m.png);}

	.burger_03 { background-image: url(../images/burgers_chicken_king_m.png);}

	.burger_04 { background-image: url(../images/burgers_chicken_king_spicy_m.png);}

	/* 輪播 */
	.slick-dots { bottom:  -8.8757% !important;}
	
	.slick-dots li {
		width: 2.2222% !important;
		padding-bottom: 2.2222% !important;
	}

	.kailyn { display: none;}

	.float {
		width: 54.1667%;
		bottom: 32%;
	}

	.float.on { right: -54.1667%;}

	.btn_burger {
		width: 11.25%;
		padding-bottom: 11.25%;
		right: 3.125%;
		bottom: 25%;
	}

	.lightbox { width: 93.75%;}

	.ititle {
		width: 76.1905%;
		padding-bottom: 12.1429%;
	}
	
	.close {
		position: absolute;
		width: 7.1429%;
		padding-bottom: 7.1429%;
		right: 0;
	}

	.phone { border-radius: 5px;}

	#i_confirm {
		width: 34.2857%;
		padding-bottom: 12.8571%;
	}

	.footer {
		width: 100%;
		padding: 3.125%;
	}

	.logo { justify-content: space-between;}

	.logo_game_flier {
		width: 37.0833%;
		padding-bottom: 9.7917%;
	}

	.logo_fun_yours {
		width: 32.5%;
		padding-bottom: 8.5417%;
		margin: 0;
	}

	.gsrr_pg_15_m {
		display: block;
		width: 13.75%;
		padding-bottom: 13.75%;
	}

	footer p {
		font-size: 10px;
		line-height: 15px;
	}
}