@charset "utf-8";
@import url("_normalize.min.css");
@import url("_font.css");
@import url("_footer.css");
@import url("swiper.min.css");
@import url("animate.min.css");

/* ==========================================================================
Common
========================================================================== */
html, body {
	width: 100%;
	height: 100%;
	opacity: 1;
}
a {
	text-decoration: none;
	outline: none;
	hlbr:expression(this.onFocus=this.blur());
}
h1, h2, h3 {
	margin: 0;
	padding: 0;
	font-weight: normal;
	word-break: break-all;
	text-align: justify;
}

/* ==========================================================================
RWD
========================================================================== */
@media screen and (max-width: 1024px), screen and (max-width: 1366px) and (max-height: 1024px) and (orientation: landscape) {
	/* ============================================================
	Wrap
	============================================================ */
	.wrap {
		color: #111111;
		font-family: 'Microsoft JhengHei', Arial, sans-serif;
	}

	/* ============================================================
	header
	============================================================ */
	header {
		position: fixed;
		z-index: 99;
		top: 0;
		width: 100%;
		height: 60px;
		border-top: 5px #abdb4f solid;
		background: #ffffff;
		background: -webkit-linear-gradient(0deg, #e9e9e9 30%, #FFFFFF 100%);
		background: -ms-linear-gradient(0deg, #e9e9e9 30%, #FFFFFF 100%);
		background: linear-gradient(0deg, #e9e9e9 30%, #FFFFFF 100%);
	}
	.head {
		position: relative;
		padding-left: 20px;
		margin: 0 auto;
		height: 100%;
	}
	.header_logo {
		display: inline-block;
		padding: 9.5px 0;
	}
	.header_logo img {
		width: 159px;
	}
	.header_logo h1 {
		font-size: 0;
	}
	nav {
		position: relative;
		float: right;
	}
	nav a {
		display: inline-block;
		padding: 0 20px;
		margin-right: -4px;
		height: 55px;
		font-size: 16px;
		color: #333333;
		line-height: 52px;
	}
	.nav_game {
		padding-right: 30px;
		background-image: url('../img/nav_icon.gif');
		background-position: 90px 23px;
		background-repeat: no-repeat;
		cursor: default;
	}
	.navList {
		position: absolute;
		z-index: 99;
		top: -5px;
		right: -100vw;
		width: 100vw;
		height: 100vh;
		overflow-y: auto;
		background: rgba(0, 0, 0, 0.9);
		-webkit-transition: .4s cubic-bezier(0.4, 0, 0.2, 1);
		-moz-transition: .4s cubic-bezier(0.4, 0, 0.2, 1);
		-o-transition: .4s cubic-bezier(0.4, 0, 0.2, 1);
		transition: .4s cubic-bezier(0.4, 0, 0.2, 1);
	}
	.navList.open {
		right: 0vw;
	}
	.navList ul {
		position: relative;
	}
	.navList ul:before {
		content: '';
		position: absolute;
		width: 100%;
		height: 60px;
		background: #2c2c2c;
	}
	a.btn_close {
		position: relative;
		display: block;
		float: right;
		margin: 10px;
		width: 40px;
		height: 40px;
		border: 1px #ffffff solid;
	}
	a.btn_close span {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		display: block;
		width: 30px;
		height: 2px;
		background: #ffffff;
		border-radius: 1px;
	}
	a.btn_close span:nth-child(1) {
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	a.btn_close span:nth-child(2) {
		-webkit-transform: rotate(135deg);
		-moz-transform: rotate(135deg);
		-o-transform: rotate(135deg);
		transform: rotate(135deg);
	}
	/* .item {
		margin-bottom: 10px;
	} */
	.item a {
		position: relative;
		display: inline-block;
		margin-right: -4px;
		padding: 0 30px;
		width: 33.33%;
		font-size: 16px;
		color: #999999;
		line-height: 60px;
		border-width: 0;
		border-color: #333333;
		border-style: solid;
	}
	.item .sort {
		width: 100%;
		line-height: 0;
		vertical-align: top;
		border-width: 0 0 1px;
	}
	/* .item .sort {
		display: none;
		margin: 0 0 10px 0;
		width: 100%;
		color: #ffffff;
		line-height: 45px;
		text-align: center;
		cursor: default;
		background: #222222;
		border-width: 1px 0 1px;
		border-color: #333333;
		border-style: solid;
	} */
	.item img {
		padding-bottom: 3px;
		margin-right: 8px;
		width: 40px;
		height: auto;
	}
	.item b {
		position: absolute;
		top: 7px;
		left: 79px;
		font-size: 13px;
		color: #fe1a45;
		line-height: 13px;
		font-weight: 700;
		font-family: Arial;
	}
	body.hidden {
		overflow: hidden;
	}

	/* ============================================================
		Game
	============================================================ */
	.game {
		position: relative;
		padding-top: 60px;
	}
	.swiper-slide:before {
		content: '';
		display: block;
		width: 100vw;
		height: 100vw;
		background-size: cover;
		background-position: top center;
		background-repeat: no-repeat;
	}
	.swiper-slide.m3:before { background-image: url('../img/bg_m3_m.jpg'); }
	.swiper-slide.m4:before { background-image: url('../img/bg_m4_m.jpg'); }
	.swiper-slide.m7:before { background-image: url('../img/bg_m7_m.jpg'); }
	.swiper-slide.m7r:before { background-image: url('../img/bg_m7r_m.jpg'); }
	.swiper-slide.m11:before { background-image: url('../img/bg_m11_m.jpg'); }
	.swiper-slide.m12:before { background-image: url('../img/bg_m12_m.jpg'); }
	.swiper-slide.m13:before { background-image: url('../img/bg_m13_m.jpg'); }
	.swiper-slide.g2:before { background-image: url('../img/bg_g2_m.jpg'); }

	.txtBox {
		position: relative;
		padding: 13vw 5vw 5vw;
		color: #111111;
		background: #ffffff;
	}
	.txtBox:before {
		content: '';
		position: absolute;
		top: -40px;
		left: 0;
		right: 0;
		margin: auto;
		width: 0;
		height: 0;
		border: solid transparent;
		border-width: 20px;
		border-bottom-color: rgba(255,255,255,1);
	}
	.txtBox h2 {
		margin-bottom: 4vw;
		font-size: 7vw;
		line-height: 7vw;
	}
	.txtBox h3 {
		margin-bottom: 4vw;
		font-size: 16px;
		line-height: 26px;
	}
	.txtBox h2,
	.txtBox h3 {
		text-align: center;
	}

	/* ============================================================
		Button
	============================================================ */
	.button {
		text-align: center;
	}
	.button a {
		display: inline-block;
		margin: 0 0.5vw;
	}
	.button a,
	.button img {
		width: 45px;
		height: auto;
	}

	/* ============================================================
		App
	============================================================ */
	.app {
		position: absolute;
		top: -15vw;
		left: 0;
		right: 0;
		margin: auto;
		text-align: center;
	}
	.app a {
		display: inline-block;
		margin: 0 0.5vw;
		width: 21vw;
	}
	.app a img {
		width: 100%;
	}
	/* .app a.btn_pc {
		display: none;
	} */

	/* ============================================================
		Menu
	============================================================ */
	.swiper-container-horizontal>.swiper-pagination {
		top: 103vw;
		bottom: auto;
		left: 0;
		right: 0;
		margin: auto;
		text-align: center;
	}
	.swiper-pagination-bullet {
		margin: 0 1vw;
		width: 16px;
		height: 16px;
		opacity: .2;
		border-radius: 8px;
		-webkit-transition: all .3s;
		-moz-transition: all .3s;
		transition: all .3s;
	}
	.swiper-pagination-bullet-active {
		width: 30px;
		background: #85c800;
		opacity: 1;
	}
	.swiper-button-prev,
	.swiper-button-next {
		position: absolute;
		z-index: 10;
		top: 88.3vw;
		margin-top: -42px;
		width: 45px;
		height: auto;
		background-image: none;
		cursor: pointer;
	}
	.swiper-button-prev {
		left: 15px;
	}
	.swiper-button-next {
		right: 15px;
	}
	.swiper-button-next.swiper-button-disabled,
	.swiper-button-prev.swiper-button-disabled {
		opacity: 0;
	}
}

@media screen and (max-width: 600px) and (orientation: portrait) {
	.item a {
		width: 50%;
	}
}

@media screen and (max-width: 480px), screen and (max-height: 480px) and (orientation: landscape) {
	/* ============================================================
	header
	============================================================ */
	header {
		height: 52px;
	}
	.head {
		padding-left: 8px;
	}
	.header_logo {
		padding: 10px 0;
	}
	.header_logo img {
		width: 120px;
		height: auto;
	}
	nav a {
		padding: 0 10px;
		height: 47px;
		font-size: 15px;
		line-height: 49px;
	}
	.nav_game {
		padding-right: 18px;
		background-position: 73px 22px;
	}
	.navList ul:before {
		height: 52px;
	}
	a.btn_close {
		width: 32px;
		height: 32px;
	}
	a.btn_close span {
		width: 24px;
	}
	.item a {
		padding: 0 22px;
		width: 100vw;
		border-bottom-width: 1px;
	}
	.item .sort {
		display: table;
	}
	/* .item a:last-child {
		border-bottom-width: 0;
	} */
	.item b {
		top: 7px;
		left: 71px;
	}

	/* ============================================================
		Game
	============================================================ */
	.game {
		padding-top: 52px;
	}
	.txtBox {
		padding: 17vw 4vw 8vw;
	}
	.txtBox:before {
		top: -24px;
		border-width: 12px;
	}
	.txtBox h2 {
		margin-bottom: 6vw;
		font-size: 9vw;
		line-height: 9vw;
	}
	.txtBox h3 {
		margin-bottom: 5vw;
		font-size: 15px;
		line-height: 22px;
	}

	/* ============================================================
		App
	============================================================ */
	.app {
		top: -16vw;
	}
	.app a {
		width: 30vw;
	}

	/* ============================================================
		Menu
	============================================================ */
	.swiper-pagination-bullet {
		margin: 0 1.5vw;
		width: 12px;
		height: 12px;
		border-radius: 6px;
	}
	.swiper-pagination-bullet-active {
		width: 25px;
	}
	.swiper-button-prev,
	.swiper-button-next {
		top: 88.5vw;
		margin-top: -28px;
		width: 30px;
	}
	.swiper-button-prev {
		left: 2px;
	}
	.swiper-button-next {
		right: 2px;
	}
}

@media screen and (max-width: 320px) {
	.txtBox h3 {
		margin-bottom: 6vw;
	}
	.button a,
	.button img {
		width: 40px;
	}
	.swiper-button-prev,
	.swiper-button-next {
		top: 87.6vw;
		margin-top: -19px;
		width: 24px;
	}
}

@media screen and (max-height: 1024px) and (orientation: landscape) {
	.item .sort {
		display: inline-block;
	}
	.item a {
		padding: 0 30px;
		width: 25%;
	}
	.item b {
		top: 7px;
		left: 79px;
	}
	.swiper-container-autoheight,
	.swiper-container-autoheight .swiper-slide,
	.swiper-slide:before,
	.txtBox {
		height: 61.5vw;
	}
	.swiper-slide:before,
	.txtBox {
		display: inline-block;
	}
	.swiper-slide:before {
		margin-right: -4px;
		width: 60vw;
	}
	.txtBox {
		padding: 17vw 2vw 0;
		width: 40vw;
		vertical-align: top;
	}
	.txtBox:before {
		top: 50%;
		left: -40px;
		right: auto;
		margin: -20px 0 0 0;
		border-bottom-color: rgba(255,255,255,0);
		border-right-color: rgba(255,255,255,1);
	}
	.txtBox h2 {
		margin-bottom: 4vw;
		font-size: 4vw;
		line-height: 4vw;
	}
	.txtBox h3 {
		margin-bottom: 3vw;
	}
	.button {
		z-index: 20;
		top: auto;
		left: -44.2vw;
		right: auto;
		bottom: 40px;
	}
	.button a {
		margin: 0 0.3vw;
	}
	.button a,
	.button img {
		width: 40px;
	}
	.app {
		top: auto;
		bottom: 4vw;
		margin-left: -100vw;
	}
	.app a {
		margin: 0 0.2vw;
		width: 11vw;
	}
	.swiper-container-horizontal>.swiper-pagination {
		top: auto;
		left: auto;
		right: 0;
		bottom: 4.5vw;
		width: 40vw;
	}
	.swiper-pagination-bullet {
		margin: 0 0.5vw;
		width: 12px;
		height: 12px;
		border-radius: 6px;
	}
	.swiper-pagination-bullet-active {
		width: 20px;
	}
	.swiper-button-prev,
	.swiper-button-next {
		display: none;
	}
}

@media screen and (max-height: 600px) and (orientation: landscape) {
	.swiper-container-autoheight,
	.swiper-container-autoheight .swiper-slide,
	.swiper-slide:before,
	.txtBox {
		height: 50vw;
	}
	.swiper-slide:before,
	.txtBox {
		width: 50vw;
	}
	.txtBox {
		padding: 10vw 2vw 0;
	}
	.button {
		left: -39.2vw;
		bottom: 30px;
	}
	.app {
		bottom: 3vw;
	}
	.swiper-pagination,
	.swiper-container-horizontal>.swiper-pagination {
		bottom: 3vw;
		width: 50vw;
	}
}

@media screen and (max-height: 480px) and (orientation: landscape) {
	.head {
		padding-left: 12px;
	}
	nav a {
		padding: 0 15px;
	}
	.item a {
		width: 33.33%;
		border-bottom-width: 0;
	}
	.nav_game {
		padding-right: 25px;
		background-position: 78px 22px;
	}
	.txtBox:before {
		left: -24px;
	}
	.txtBox h2 {
		margin-bottom: 3vw;
	}
	.button a {
		margin: 0;
	}
	.button img {
		width: 36px;
	}
	.app a {
		width: 12vw;
	}
}

@media screen and (max-height: 420px) and (orientation: landscape) {
	.item a {
		padding: 0 20px;
	}
	.item b {
		left: 69px;
	}
	.txtBox h3 {
		font-size: 13px;
		line-height: 19px;
	}
	.button {
		left: -41.2vw;
		bottom: 2.5vw;
	}
	.app a {
		width: 13.5vw;
	}
}

@media screen and (max-height: 390px) and (orientation: landscape) {
	.item a {
		padding: 0 15px;
	}
	.item b {
		left: 64px;
	}
}

@media screen and (max-height: 320px) and (orientation: landscape) {
	.item a {
		padding: 0 30px;
		width: 50%;
	}
	.item b {
		left: 80px;
	}
	.txtBox {
		padding: 7vw 2vw 0;
	}
	.button a,
	.button img {
		width: 30px;
	}
}

@media screen and (max-height: 320px) and (max-width: 480px) and (orientation: landscape) {
	.txtBox h2 {
		font-size: 5vw;
		line-height: 5vw;
	}
	.app {
		bottom: 2vw;
	}
	.app a {
		width: 14.8vw;
	}
	.swiper-container-horizontal>.swiper-pagination {
		bottom: 1vw;
	}
}