@charset "utf-8";

/* CSS Document */

body>a {
	display: none !important;
}


/*整体容器*/

.box {
	width: 100%;
}

.box>section {
	width: 970px;
	margin: auto;
	font: 16px "微软雅黑";
}

.none-border {
	border-bottom: 0;
}

.violet {
	background-color: #d3e7ff;
}


/* 活动中心 */

.activeB-box {
	position: relative;
	width: 100%;
	/* padding-bottom: calc(589 / 720 * 100%);
	 */
	height: 81.8056vw;
}

.activeTitle {
	position: absolute;
	top: 0px;
	left: 50%;
	transform: translateX(-50%);
	width: 49.8611vw;
	height: auto;
	z-index: 2;
}

.activeB-box-conts {
	position: absolute;
	width: 95.5556%;
	/* height: calc(477 / 589 * 100%);;
	 */
	min-width: 95.5556%;
	height: 69.8611vw;
	left: 2.2222vw;
	top: 15.5556vw;
	/* background: rgba(42,45,83,0.9);
	box-shadow: 0px 0px 1.25vw .1389vw rgba(6,6,22,0.7); */
	background: rgba(42, 45, 83, 0.6);
	box-shadow: 0px 0px 1.25vw .1389vw rgba(6, 6, 22, 0.3);
	border-radius: 1.1111vw;
	overflow: auto;
	display: flex;
	justify-content: flex-start;
}

.activeB-box-conts .activeB-box-conts-item {
	position: relative;
	margin-top: 4.1667vw;
	width: 38.0556vw;
	flex: 0 0 38.0556vw; /* 不增长，不收缩，固定基础宽度 */
}

.activeB-box-conts .activeB-box-conts-item .activeBanner {
	width: 100%;
	height: 58.3333vw;
}

.activeB-box-conts .activeB-box-conts-item .joinBtn {
	position: absolute;
	width: 25.8333vw;
	height: 9.3056vw;
	margin-bottom: 11.1111vw;
	left: 5.8333vw;
	bottom: 1.9444vw;
}

.activeB-box-conts .activeB-box-conts-item>p {
	width: 100%;
	font-family: PingFang SC;
	font-weight: 500;
	font-size: 2.7778vw;
	color: #FFFFFF;
	line-height: 2.7778vw;
	text-align: center;
}

.activeB-box-conts .activeB-box-conts-item .timeTitle {
	color: #FFFFFF;
}

.activeB-box-conts .activeB-box-conts-item .timeDesc {
	padding-top: .8vw;
	color: #0FFF44;
}


/*超多玩法*/

.more-game-box {
	position: relative;
	width: 100%;
}

.moreGameTitleBg {
	position: relative;
	top: 9.4444vw;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	height: auto;
	overflow: hidden;
}

.moreGameTitle {
	position: absolute;
	width: 44.7222vw;
	height: 21.5278vw;
	top: 6.5278vw;
	left: 50%;
	transform: translateX(-50%);
}

.tap-game-list {
	position: relative;
	height: 10.2778vw;
	margin-top: 10vw;
	margin-left: 2.2222vw;
	margin-right: 2.2222vw;
	background: #282b4f;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
}

.tab-game-item {
	position: relative;
	display: inline-block;
	width: 19.8611vw;
	height: 10.2778vw;
	overflow: hidden
}

.tab-game-item .img-line {
	position: absolute;
	right: 0px;
	top: 1.6667vw;
	width: .2778vw;
	height: 6.3889vw;
}

.tab-game-item .img-light {
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
}


.tab-game-item .name {
	position: absolute;
	font-family: PingFang SC;
	font-weight: 500;
	font-size: 4.0278vw;
	color: #FFFFFF;
	line-height: 4.0278vw;
	top: 3.1944vw;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap
}

.game-text {
	margin-top: 2.7778vw;
	margin-left: 2.2222vw;
	margin-right: 2.2222vw;
	font-family: PingFang SC;
	font-weight: 400;
	font-size: 3.3333vw;
	color: #FFFFFF;
	line-height: 4.1667vw;
}

.imgPanel {
	position: relative;
	left: 50%;
	width: 100%;
	height: auto;
	transform: translateX(-50%);
}


/* 社区 */

.community-box {
	position: relative;
	width: 100%;
}

.community-box-title {
	font-family: FZLTHK;
	font-weight: normal;
	font-size: 4.4444vw;
	color: #FFFFFF;
	margin-left: 5.4167vw;
}

.community-item {
	height: 6.6667vw;
	margin-left: 5.2778vw;
	margin-top: 4.7222vw;
	display: grid;
	grid-template-columns: auto 1fr;
	/* 图片占 auto，文字占剩余空间 */
	/* grid-template-rows: auto auto; */
	grid-template-rows: 1fr 1fr;
	/* 均分高度 */
	/* 两行文字 */
	align-items: center;
	/* 垂直居中 */
	gap: 0vw .9722vw;
	/* 行间距 0，列间距 10px */
	color: #8F95A5;
	font-size: 3.0556vw;
	font-family: PingFang SC;
	line-height: 3.3333vw;
}

.community-item>img {
	height: 100%;
	width: auto;
	grid-row: span 2;
}

.community-item>a {
	text-decoration-line: underline;
	color: #8F95A5;
}

/* .community-item>span {
	margin-left: .9722vw;
	font-weight: 400;
	font-size: 3.0556vw;
	color: #8F95A5;
	line-height: 4.1667vw; 
}  */


/*模块三-關於我們*/

.about-us-box {
	position: relative;
	width: 100%;
	padding-bottom: 18.0556vw;
}

.about-us-box-title {
	font-family: FZLTHK;
	font-weight: normal;
	font-size: 4.4444vw;
	color: #FFFFFF;
	margin-left: 5.4167vw;
	margin-top: 7.9167vw;
}

.about-us-item {
	font-family: PingFang SC;
	font-weight: 500;
	font-size: 3.0556vw;
	color: #8F95A5;
	line-height: 3.75vw;
	margin-top: 4.1667vw;
	margin-left: 5.4167vw;
}

.about-us-item>a {
	color: #8F95A5;
}

.about-us-logo {
	position: relative;
	width: 19.5833vw;
	margin-top: 10vw;
	left: 50%;
	transform: translateX(-50%);
}

.about-us-text {
	width: 100%;
	margin-top: 21px;
	font-family: PingFang SC;
	font-weight: 500;
	font-size: 2.5vw;
	color: #787D90;
	line-height: 4.1667vw;
	text-align: center;
}


.twDesc {
	display: none;
	width: 100%;
	margin-top: 6.9444vw;
	background-color: #141722;
	font-family: PingFang SC;
	font-weight: 500;
	color: #787D90;
	font-size: 2.5vw;
	line-height: 3.6111vw;
	padding-bottom: 3.4722vw;
}

.twDesc .imgs {
	padding-top: 1.3889vw;
	display: flex;
	justify-content: center;
	/* 水平居中 */
	align-items: center;
	/* 垂直居中（如果需要） */
	gap: 2.7778vw;
	/* 可选：图片之间的间距 */
}

.twDesc .imgs>img:nth-child(1) {
	width: 23.6111vw;
	height: 8.1944vw;
}

.twDesc .imgs>img:nth-child(2) {
	width: 18.1944vw;
	height: 5.8333vw;
}

.twDesc .imgs>img:nth-child(3) {
	width: 6.1111vw;
	height: 6.1111vw;
}

.twDesc .txtDesc {
	padding-top: 1.3889vw;
	width: 95%;
	margin-left: 2.5%;
}

/*我們的遊戲*/

.modular1 {}

.conts-title {
	display: inline-block;
	margin-top: 60px;
	padding-bottom: 5px;
	margin-bottom: 20px;
	border-bottom: 1px dotted #38739d;
	color: #38739d;
	font-size: 38px;
	line-height: 38px;
	font-weight: 500;
}

.conts-title>.title-icon-l {
	width: 41px;
	height: 35px;
	margin-right: 12px;
	position: relative;
	display: inline-block;
}

.conts-title>.title-icon-l:before {
	position: absolute;
	content: '';
	width: 100%;
	height: 100%;
	bottom: -12%;
	background: url(./../images/i.png) no-repeat 0 0;
	background-size: 200% 100%;
}

.conts-title>.title-icon-w {
	width: 41px;
	height: 35px;
	margin-right: 12px;
	position: relative;
	display: inline-block;
}

.conts-title>.title-icon-w:before {
	position: absolute;
	content: '';
	width: 100%;
	height: 100%;
	bottom: -12%;
	background: url(./../images/i.png) no-repeat 100% 0;
	background-size: 200% 100%;
}

.conts-box {
	width: 100%;
	margin-bottom: 60px;
	display: inline-block;
}



.conts-box-left {
	width: 50%;
	float: left;
}

.conts-box-left .conts-box-left-text {
	color: #4b475a;
	line-height: 38px;
	text-align: left;
}

/*切换面板*/

.conts-box-left-nav {
	margin-top: 15px;
	width: 100%;
	display: inline-block;
}

.conts-box-left-nav>li {
	width: 33%;
	height: 50px;
	text-align: center;
	display: inline-block;
	border-right: 1px dotted #2c659d;
	position: relative;
	background-color: #38739d;
}

.conts-box-left-nav>li:last-child {
	border-right: none;
}

.conts-box-left-nav>li:first-child {
	border-radius: 0.5em 0 0 0.5em;
}

.conts-box-left-nav>li:last-child {
	border-radius: 0 0.5em 0.5em 0;
}

.conts-box-left-nav>li>a {
	color: #fff;
	position: relative;
	top: 28%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.conts-box-left-nav>li>a>i {
	width: 16px;
	height: 15px;
	margin-right: 8px;
	display: inline-block;
	vertical-align: middle;
	background-image: url(./../images/tx.png);
	background-position: 100% 0;
	background-size: 200% 100%;
}

.conts-box-left-nav>li.active>a>i {
	background-position: 0 0;
}

.conts-box-left-nav>li.active {
	background-color: #f19651;
}

.conts-box-left-nav>li.active:after {
	position: absolute;
	content: '';
	width: 27px;
	height: 13px;
	bottom: -20%;
	left: 37%;
	background: url(./../images/d1.png) no-repeat 0 0;
	background-size: 100% 100%;
}

.conts-box-left-cont {
	margin-top: 30px;
	width: 100%;
	color: #4b475a;
}

.conts-box-left-cont>div {
	width: 100%;
	display: none;
}

.conts-box-left-cont>div.active {
	display: block;
}



.conts-box-right {
	width: 50%;
	float: left;
}

.conts-box-right-img {}

.conts-box-right-img>img {
	width: 100%;
}





/*模块二-為什麼選擇我們*/

.modular2 {}

.modular2-box {
	width: 100%;
	display: inline-block;
	margin-bottom: 34px;
}

.modular2-box-top {
	width: 100%;
	color: #4b475a;
	line-height: 38px;
	text-align: left;
}

.modular2-box-conts {
	background-color: #edf5ff;
	width: 86%;
	padding: 3%;
	margin: 2% 4%;
	border-radius: 0.5em;
	display: inline-block;
}

.modular2-box-conts-1 {
	width: 33%;
	float: left;
}

.modular2-box-conts-1-top {}

.modular2-box-conts-1-down {
	margin-top: 38px;
}

.modular2-box-conts-1-top-title>a {
	color: #38739d;
	font-size: 24px;
	line-height: 24px;
	font-weight: 400;
	display: inline-block;
	vertical-align: middle;
}

.modular2-box-conts-1-top-text {
	margin-left: 18px;
	padding: 12px;
	color: #4b475a;
}

.icon-img {
	width: 24px;
	height: 24px;
	display: inline-block;
	vertical-align: middle;
	display: inline-block;
	background-image: url(./../images/icon.png);
	background-position: 0 0;
	background-size: 500% 100%;
}

.i-dianzan {
	background-position: 100% 0;
}

.i-jiangbei {
	background-position: 0 0;
}

.i-jianzhushi {
	background-position: 25% 0;
}

.i-mao {
	background-position: 50% 0;
}

.i-yusan {
	background-position: 75% 0;
}





/*模块三-關於我們*/

.modular3-box {
	width: 100%;
	margin-bottom: 60px;
	display: inline-block;
}

.abouts-text {
	line-height: 38px;
	color: #4b475a;
}

.abouts-text>i {
	width: 15px;
	height: 15px;
	margin: 4px;
	display: inline-block;
	vertical-align: middle;
	background: url(./../images/q.png) no-repeat 0 0;
	background-size: 100% 100%;
}





/*模块四-聯絡方式*/

.modular4-box {
	width: 100%;
	margin-bottom: 60px;
	display: inline-block;
}

.modular4-box-text {
	width: 50%;
	float: left;
}

.modular4-box-text-top {
	color: #4b475a;
	margin-bottom: 26px;
}

.modular4-box-text-down {
	color: #4b475a;
}





/*移动版导航栏*/

.iphone-list {
	width: 20px;
	height: 20px;
	cursor: pointer;
	display: none;
	position: absolute;
	left: 85%;
	top: 30%;
	background: url(./../images/list.png) no-repeat 0 0;
	background-size: 100% 100%;
}

.menu-iphone {
	display: none;
	position: fixed;
	top: 0;
	width: 100%;
	bottom: 0;
	z-index: 9999;
	background: rgba(0, 0, 0, 0.6);
	-webkit-transition: all .4s;
	-o-transition: all .4s;
	-moz-transition: all .4s;
	transition: all .4s;
}

.menu-overlay {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 90%;
	background: rgba(0, 0, 0, 0.6);
	opacity: 1;
}

.menu-list {
	position: absolute;
	top: 6%;
	left: 10%;
	width: 90%;
	height: 40%;
}

.menu-list>ul {
	width: 100%;
}

.menu-list>ul>li {
	width: 100%;
	float: left;
}

.menu-list>ul>li>a {
	display: block;
	-webkit-transition: 300ms;
	-o-transition: 300ms;
	-moz-transition: 300ms;
	transition: 300ms;
	padding: 10px 20px;
	font-size: 14px;
	text-transform: uppercase;
	color: #fff;
	font-weight: 400;
	line-height: 28px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.8);
}

.menu-list>ul>li.active {
	color: #fff;
}

.omenu-close {
	position: absolute;
	top: 6%;
	right: 6%;
	padding: 1% 2%;
}

.omenu-close>a {
	display: inline-block;
	color: #fff;
	font: 16px "微软雅黑";
	cursor: pointer;
}





@media (max-width: 767px) {

	.box>section {
		width: auto;
		position: relative;
		min-height: 1px;
		padding-left: 15px;
		padding-right: 15px;
		font-size: 12px;
	}

	.conts-title {
		font-size: 32px;
	}

	.top>div>ul {
		display: none;
	}

	.iphone-list {
		display: block;
	}



	.conts-title {
		margin-top: 38px;
	}

	.conts-box-left {
		width: 100%;
		margin-bottom: 20px;
	}

	.conts-box-right {
		width: 100%;
	}

	.conts-box-left-nav>li {
		height: 38px;
	}



	/*.modular2-box-conts{width: 92%;}*/

	.modular2-box-conts .modular2-box-conts-1 {
		width: 100%;
	}

	.modular2-box-conts .modular2-box-conts-1:nth-child(1),
	.modular2-box-conts .modular2-box-conts-1:nth-child(2),
	.modular2-box-conts .modular2-box-conts-1:nth-child(3) {
		margin-top: 38px;
	}

	.modular2-box-conts .modular2-box-conts-1:nth-child(3) {
		margin-bottom: 38px;
	}

	.conts-box-left-nav>li>a {
		font-size: 12px;
	}



	.modular4-box-text {
		width: 100%;
	}

	.modular4-box-text:nth-child(2) {
		margin-top: 26px;
	}



}