@charset "UTF-8";
/**
 * 
 * @authors Mina
 */

@import url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/css/animate.css");
@import url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/css/aos.css");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@500;700;900&family=Noto+Serif+TC&display=swap");

body {
	border: medium none;
	margin: 0;
	padding: 0;
	outline: none;
	font-family: "Microsoft JhengHei"; /*微軟正黑體*/
	background: #fff;
	color: #000;
	height: auto;
	overflow: hidden;
	position: relative;
	width: 100%;
	min-width: 800px;
	max-width: 1920px;
	margin: 0 auto;
}

ul,
li,
button,
p {
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
	outline: none;
}

.in {
	position: relative;
	height: 100%;
	max-width: 1200px;
	margin: 0 auto;
}

/* Top Menu ------------------------------------------------- */

#top_sp {
	display: none;
}

#top_menu {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/top_bg.jpg")
		top center no-repeat;
	height: 58px;
	z-index: 11;
	user-select: none;
	position: fixed;
	top: 0;
	width: 100%;
	min-width: 800px;
	margin: 0 auto;
	left: 0;
	right: 0;
}

#top_menu .top_menu_btn {
	font-size: 20px;
	font-weight: bold;
	color: #fff;
	position: relative;
	left: 3%;
	display: inline;
}

#top_menu .top_menu_btn li {
	line-height: 55px;
	margin: 0px 2.8%;
	cursor: pointer;
	position: relative;
	display: inline-block;
	transition: 0.2s;
}

#top_menu .top_menu_btn li:hover {
	color: #ffff00;
}

#top_menu .top_menu_right {
	border-left: 2px #ffff01 solid;
	top: 46%;
	transform: translate(0, -50%);
	position: relative;
	right: 3%;
	height: 34px;
	display: inline;
	float: right;
	width: 17%;
}

#top_menu .top_menu_right li {
	display: inline-block;
	height: 34px;
	width: 34px;
	cursor: pointer;
	position: relative;
}

#top_menu .top_menu_right li.fb {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/top_icon.svg")
		left bottom no-repeat;
	background-size: 200%;
	margin-left: 25%;
	margin-right: 17%;
}

#top_menu .top_menu_right li.music.off {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/top_icon.svg")
		right top no-repeat;
	background-size: 200%;
}

#top_menu .top_menu_right li.music.on {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/top_icon.svg")
		left top no-repeat;
	background-size: 200%;
	animation: music_rotate 2s infinite linear;
}

@keyframes music_rotate {
	from {
		transform: rotate(0);
	}
	to {
		transform: rotate(360deg);
	}
}

/* S1 ------------------------------------------------------- */

#s1 {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/main_bg.jpg")
		top center no-repeat;
	height: 812px;
	position: relative;
	overflow: hidden;
	background-position-y: -58px;
	margin-top: 58px;
}

#s1 .mid {
	position: absolute;
	margin: 0 auto;
	left: -51.5%;
	right: 0;
	z-index: 1;
}

#s1 .logo {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/logo.png")
		bottom center no-repeat;
	background-size: contain;
	max-width: 383px;
	min-width: 284px;
	width: 27vw;
	height: 203px;
	margin: 0 auto;
	margin-top: 150px;
}

#s1 .title0 {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/title0.svg")
		bottom center no-repeat;
	background-size: contain;
	max-width: 524px;
	min-width: 403px;
	width: 37vw;
	height: 62px;
	margin: 0 auto;
	margin-top: 20px;
}

#s1 .title1 {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/title1.svg")
		top center no-repeat;
	background-size: contain;
	max-width: 348px;
	min-width: 272px;
	width: 25vw;
	height: 30px;
	margin: 0 auto;
	margin-top: -1px;
	animation-delay: 0.6s;
	opacity: 0;
}

.s1_title_ani {
	animation: s1_title_ani 0.8s forwards;
}

@keyframes s1_title_ani {
	from {
		background-position: 0 -30px;
		opacity: 1;
	}
	to {
		background-position: 0 0px;
		opacity: 1;
	}
}

#s1 .scroll_effect {
	width: 37px;
	height: 232px;
	margin: 0 auto;
	position: relative;
	margin-top: 31px;
	animation-delay: 1s;
	opacity: 0;
}

.scroll_fade {
	animation: fadeIn 2s forwards;
}

#s1 .scroll_effect:before {
	content: " ";
	background: #434343;
	width: 2px;
	position: absolute;
	height: 100%;
	left: 0;
	right: 0;
	margin: 0 auto;
	box-shadow: 0 0 2px #fff;
}

#s1 .scroll_pic {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/scroll.png")
		top center no-repeat;
	width: 39px;
	height: 55px;
	position: absolute;
	left: -8px;
	top: 10%;
	animation: scroll_ani 3s infinite;
	animation-delay: 1s;
}

@keyframes scroll_ani {
	from {
		opacity: 0;
		top: 10%;
	}
	5% {
		opacity: 1;
		top: 10%;
	}
	80% {
		opacity: 1;
		top: 67%;
	}
	to {
		opacity: 0;
		top: 72%;
	}
}

#s1 .pic {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/pic.png")
		center center no-repeat;
	background-size: contain;
	width: 80vw;
	max-width: 1126px;
	min-width: 1016px;
	height: 990px;
	top: -49px;
	position: absolute;
	right: -41.5%;
	margin: 0 auto;
	left: 0;
}

/* S2 ------------------------------------------------------- */

#s2 {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/video_bg.png")
		top center no-repeat;
	height: 509px;
	position: relative;
	overflow: hidden;
	margin-top: -67px;
	z-index: 1;
}

#s2 .videos {
	position: relative;
	text-align: center;
	margin-top: 82px;
	z-index: 1;
}

#s2 .videos li {
	width: 407px;
	height: 236px;
	display: inline-block;
	position: relative;
	border: white 1px solid;
	box-shadow: 0 0 0 2px #fff, 2px 5px 6px 2px #000;
}

#s2 .video1 {
	margin-right: 3%;
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/video1.jpg")
		top center no-repeat;
	background-size: contain;
}

#s2 .video2 {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/video2.jpg")
		top center no-repeat;
	background-size: contain;
}

#s2 .video1 .title {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/video_title1.png")
		top center no-repeat;
}

#s2 .video2 .title {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/video_title2.png")
		top center no-repeat;
}

#s2 .videos .title {
	width: 278px;
	height: 47px;
	margin-top: -18px;
	margin-left: -20px;
	color: #fff;
	font-family: "Noto Sans TC", sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 33px;
	user-select: none;
}

#s2 .video_play {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/video_play.svg")
		center center no-repeat;
	width: 71px;
	height: 71px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	cursor: pointer;
	transition: 0.3s;
}

#s2 .video_play:hover {
	width: 78px;
	height: 78px;
}

#s2 .apps {
	text-align: center;
	margin-top: 30px;
}

#s2 .apps li {
	cursor: pointer;
	display: inline-block;
}

#s2 .google {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/app_google.svg")
		top center no-repeat;
	width: 187px;
	height: 55px;
	margin-right: 1%;
}

#s2 .ios {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/app_ios.svg")
		top center no-repeat;
	width: 166px;
	height: 55px;
	margin-right: 1%;
}

#s2 .apk {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/app_apk.jpg")
		top center no-repeat;
	width: 278px;
	height: 59px;
}

#s2 .arrow_move {
	display: none;
}

/* S3 ------------------------------------------------------- */

#s3 {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/story_bg.jpg")
		top center no-repeat;
	height: 981px;
	position: relative;
	overflow: hidden;
	margin-top: -90px;
}

#s3 .pic {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/story_pic.png")
		center center no-repeat;
	background-size: contain;
	max-width: 670px;
	min-width: 620px;
	width: 47vw;
	height: 1002px;
	position: absolute;
	margin: 0 auto;
	right: 52%;
	margin-top: 80px;
}

#s3 .mid {
	position: absolute;
	margin: 0 auto;
	left: 27.5%;
	right: 0;
	width: 632px;
}

#s3 .title {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/story_title.png")
		center center no-repeat;
	width: 406px;
	height: 135px;
	position: relative;
	margin-top: 125px;
	margin-left: 225px;
}

#s3 .txt {
	margin-top: 44px;
	position: relative;
}

#s3 .txt li {
	margin-bottom: 26px;
}

#s3 .txt1 {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/story_txt1.png")
		top left no-repeat;
	height: 53px;
}

#s3 .txt2 {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/story_txt2.png")
		top left no-repeat;
	height: 76px;
}

#s3 .txt3 {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/story_txt3.png")
		top left no-repeat;
	height: 77px;
}

#s3 .txt4 {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/story_txt4.png")
		top left no-repeat;
	height: 53px;
}

#s3 .photo {
	text-align: center;
}

#s3 .photo li {
	width: 174px;
	height: 126px;
	border: 2px solid #fff;
	display: inline-block;
	background: #000;
	margin: 0 14px;
	position: relative;
	cursor: pointer;
	transition: 0.5s;
}

#s3 .photo .photo1 {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/story_pic1.jpg")
		center center no-repeat;
	background-size: contain;
}

#s3 .photo .photo2 {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/story_pic2.jpg")
		center center no-repeat;
	background-size: contain;
}

#s3 .photo .photo3 {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/story_pic3.jpg")
		center center no-repeat;
	background-size: contain;
}

.photo_big_ani {
	animation: photo_big_ani 1s forwards;
	filter: brightness(1) !important;
}

@keyframes photo_big_ani {
	from {
		background-size: 100%;
	}
	to {
		background-size: 110%;
	}
}

#s3 .more {
	position: absolute;
	width: 28px;
	height: 25px;
	right: -2px;
	bottom: -2px;
	overflow: hidden;
}

#s3 .more:before {
	content: " ";
	width: 100%;
	height: 190%;
	background: #fff100;
	position: absolute;
	top: 1px;
	left: 6px;
	transform: rotate(49deg);
}

#s3 .more_pic {
	position: absolute;
	width: 10px;
	height: 10px;
	overflow: hidden;
	top: 49%;
	left: 49%;
}

#s3 .more_pic:before {
	position: absolute;
	content: " ";
	width: 100%;
	height: 2px;
	background: #000;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

#s3 .more_pic:after {
	position: absolute;
	content: " ";
	width: 2px;
	height: 100%;
	background: #000;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

/* S4 ------------------------------------------------------- */

#s4 {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/chara_bg.png")
		top center no-repeat;
	background-size: cover;
	height: 1355px;
	position: relative;
	overflow: hidden;
	margin-top: -116px;
	z-index: 1;
}

#s4.team1height {
	height: 1355px;
}

#s4 .page1 {
	display: block;
}

#s4 .menu {
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
	margin: 0 auto;
	right: 0;
	left: 0;
	text-align: center;
}

#s4 .menu li {
	width: 279px;
	height: 1164px;
	display: inline-block;
	margin: 0 -10px;
	cursor: pointer;
}

#s4 .menu .team1 {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/chara_list1.png")
		right center no-repeat;
	background-size: cover;
}

#s4 .menu .team2 {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/chara_list2.png")
		right center no-repeat;
	background-size: cover;
}

#s4 .menu .team3 {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/chara_list3.png")
		right center no-repeat;
	background-size: cover;
}

#s4 .menu .team4 {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/chara_list4.png")
		right center no-repeat;
	background-size: cover;
}

#s4 .menu .team1:hover {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/chara_list1.png")
		left center no-repeat;
	background-size: cover;
}

#s4 .menu .team2:hover {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/chara_list2.png")
		left center no-repeat;
	background-size: cover;
}

#s4 .menu .team3:hover {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/chara_list3.png")
		left center no-repeat;
	background-size: cover;
}

#s4 .menu .team4:hover {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/chara_list4.png")
		left center no-repeat;
	background-size: cover;
}

.teamchoose_up {
	animation: fadeOutUp 0.4s forwards;
}

.teamchoose_down {
	animation: fadeOutDown 0.4s forwards;
}

.teamchoose_up_in {
	animation: fadeInUp 0.4s forwards;
}

.teamchoose_down_in {
	animation: fadeInDown 0.4s forwards;
}

#s4 .menu .listarrow {
	display: none;
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/chara_arrow.svg")
		top center no-repeat;
	background-size: contain;
	transform: rotate(90deg);
	position: absolute;
	max-width: 56px;
	width: 20.08%;
	padding-top: 20.08%;
	top: 59%;
	margin: 0 auto;
	right: 0;
	left: 0;
	opacity: 0;
	animation: listarrow_ani 0.4s forwards;
}

@keyframes listarrow_ani {
	from {
		top: 60%;
		opacity: 0;
	}
	to {
		top: 59%;
		opacity: 1;
	}
}

#s4 .page2 {
	display: none;
}

#s4 .team_logo {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/chara_team_list.svg")
		no-repeat;
	width: 215px;
	height: 158px;
	position: absolute;
	background-size: 223.5%;
	margin-top: 255px;
	left: 4.6%;
	z-index: 1;
	cursor: pointer;
}

.team_logo_ani {
	animation: fadeInLeft 0.6s forwards;
}

#s4 .team_logo.team1 {
	background-position: -4px -5px;
}

#s4 .team_logo.team2 {
	background-position: -260px -5px;
}

#s4 .team_logo.team3 {
	background-position: -5px -186px;
}

#s4 .team_logo.team4 {
	background-position: -260px -186px;
}

#s4 .team_logo.teamlist {
	background-size: 100%;
	width: 275px;
	height: 198px;
	animation: fadeInLeft 0.6s forwards !important;
	background-position: 0 0;
}

#s4 .chara_bg {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/chara_team_bg.svg")
		center center no-repeat;
	max-width: 1770px;
	width: 92.2%;
	padding-top: 22.09%;
	position: absolute;
	left: 50%;
	top: 33.5%;
	transform: translate(-50%, 0);
	background-size: 100%;
	animation: chara_bg_ani 0.6s forwards;
}

@keyframes chara_bg_ani {
	from {
		transform: translate(-50%, 0) scale(1.1);
		opacity: 0;
	}
	to {
		transform: translate(-50%, 0) scale(1);
		opacity: 1;
	}
}

#s4 .chara_bg.team1 {
	background-position-y: 33.6%;
}

#s4 .chara_bg.team2 {
	background-position-y: 66.6%;
}

#s4 .chara_bg.team3 {
	background-position-y: 99.6%;
}

#s4 .chara_bg.team4 {
	background-position-y: 0.6%;
}

#s4 .chara_list {
	display: none;
	position: absolute;
	width: 100%;
	left: 50%;
	top: 33.5%;
	transform: translate(-50%, 0);
	text-align: center;
	z-index: 1;
}

#s4 .chara_list li {
	display: inline-block;
	width: 272px;
	height: 612px;
	margin: 0 0.4%;
	cursor: pointer;
	opacity: 0;
}

.chara_list_ani {
	animation: fadeInRight 0.3s forwards;
}

#s4 .chara_list li .pic {
	width: 100%;
	height: 100%;
	transition: 0.5s;
}

#s4 .chara_list li .pic:hover {
	transform: scale(1.05);
}

#s4 .chara_list .chara2 {
	animation-delay: 0.1s;
}

#s4 .chara_list .chara3 {
	animation-delay: 0.2s;
}

#s4 .chara_list .chara4 {
	animation-delay: 0.3s;
}

#s4 .chara_list .chara5 {
	animation-delay: 0.4s;
}

#s4 .chara_list.team1 .chara1 .pic,
#s4 .page3_sp .pic.chara1 {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/chara_pic1.png")
		top center no-repeat;
	background-size: contain;
}

#s4 .chara_list.team1 .chara2 .pic,
#s4 .page3_sp .pic.chara2 {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/chara_pic2.png")
		top center no-repeat;
	background-size: contain;
}

#s4 .chara_list.team1 .chara3 .pic,
#s4 .page3_sp .pic.chara3 {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/chara_pic3.png")
		top center no-repeat;
	background-size: contain;
}

#s4 .chara_list.team1 .chara4 .pic,
#s4 .page3_sp .pic.chara4 {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/chara_pic4.png")
		top center no-repeat;
	background-size: contain;
}

#s4 .chara_list.team1 .chara5 .pic,
#s4 .page3_sp .pic.chara5 {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/chara_pic5.png")
		top center no-repeat;
	background-size: contain;
}

#s4 .chara_list.team2 .chara1 .pic,
#s4 .page3_sp .pic.chara9 {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/chara_pic9.png")
		top center no-repeat;
	background-size: contain;
}

#s4 .chara_list.team2 .chara2 .pic,
#s4 .page3_sp .pic.chara10 {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/chara_pic10.png")
		top center no-repeat;
	background-size: contain;
}

#s4 .chara_list.team2 .chara3 .pic,
#s4 .page3_sp .pic.chara11 {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/chara_pic11.png")
		top center no-repeat;
	background-size: contain;
}

#s4 .chara_list.team3 .chara1 .pic,
#s4 .page3_sp .pic.chara6 {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/chara_pic6.png")
		top center no-repeat;
	background-size: contain;
}

#s4 .chara_list.team3 .chara2 .pic,
#s4 .page3_sp .pic.chara7 {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/chara_pic7.png")
		top center no-repeat;
	background-size: contain;
}

#s4 .chara_list.team3 .chara3 .pic,
#s4 .page3_sp .pic.chara8 {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/chara_pic8.png")
		top center no-repeat;
	background-size: contain;
}

#s4 .chara_list.team4 .chara1 .pic,
#s4 .page3_sp .pic.chara12 {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/chara_pic12.png")
		top center no-repeat;
	background-size: contain;
}

#s4 .chara_list.team4 .chara2 .pic,
#s4 .page3_sp .pic.chara13 {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/chara_pic13.png")
		top center no-repeat;
	background-size: contain;
}

#s4 .chara_list.team4 .chara3 .pic,
#s4 .page3_sp .pic.chara14 {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/chara_pic14.png")
		top center no-repeat;
	background-size: contain;
}

#s4 .chara_list .box_bg {
	position: relative;
	width: 100%;
	height: 100%;
}

#s4 .chara_list li .box {
	display: none;
	width: 699px;
	height: 486px;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
	overflow: hidden;
}

.box_ani {
	animation: box_ani 0.3s forwards;
}

@keyframes box_ani {
	from {
		width: 0;
	}
	to {
		width: 699px;
	}
}

#s4 .chara_list.team1 .box {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/chara_pop1.svg")
		top left no-repeat;
	background-size: cover;
}

#s4 .chara_list.team2 .box {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/chara_pop4.svg")
		top left no-repeat;
	background-size: cover;
}

#s4 .chara_list.team3 .box {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/chara_pop3.svg")
		top left no-repeat;
	background-size: cover;
}

#s4 .chara_list.team4 .box {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/chara_pop2.svg")
		top left no-repeat;
	background-size: cover;
}

.pic_unfocus {
	filter: brightness(0.5);
}

#s4 .chara_list li .pic.pic_focus {
	z-index: 11;
	position: absolute;
	filter: brightness(1);
}

#s4 .chara_list .close {
	width: 45px;
	height: 45px;
	background: #333;
	position: absolute;
	right: 0;
	top: 0;
	pointer-events: auto;
	cursor: pointer;
}

#s4 .chara_list .close div {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/chara_pop_close.svg")
		center center no-repeat;
	background-size: contain;
	width: 65%;
	height: 65%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: 0.2s;
}

#s4 .chara_list .close .close_ani {
	width: 65%;
	height: 65%;
	transform: rotate(10deg) translate(-50%, -50%);
	transform-origin: left;
}

#s4 .chara_list.team1 .chara1 .pic.pic_focus {
	transform: translate(128%, -9%) scale(1.217);
}

#s4 .chara_list.team1 .chara2 .pic.pic_focus {
	transform: translate(23%, -9%) scale(1.217);
}

#s4 .chara_list.team1 .chara3 .pic.pic_focus {
	transform: translate(-83%, -9%) scale(1.217);
}

#s4 .chara_list.team1 .chara4 .pic.pic_focus {
	transform: translate(-189%, -9%) scale(1.217);
}

#s4 .chara_list.team1 .chara5 .pic.pic_focus {
	transform: translate(-295%, -9%) scale(1.217);
}

#s4 .chara_list.team2 .chara1 .pic.pic_focus,
#s4 .chara_list.team3 .chara1 .pic.pic_focus,
#s4 .chara_list.team4 .chara1 .pic.pic_focus {
	transform: translate(23%, -9%) scale(1.217);
}

#s4 .chara_list.team2 .chara2 .pic.pic_focus,
#s4 .chara_list.team3 .chara2 .pic.pic_focus,
#s4 .chara_list.team4 .chara2 .pic.pic_focus {
	transform: translate(-83%, -9%) scale(1.217);
}

#s4 .chara_list.team2 .chara3 .pic.pic_focus,
#s4 .chara_list.team3 .chara3 .pic.pic_focus,
#s4 .chara_list.team4 .chara3 .pic.pic_focus {
	transform: translate(-189%, -9%) scale(1.217);
}

#s4 .chara_list .mid {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/chara_pop_in.svg")
		center center no-repeat;
	width: 435px;
	height: 380px;
	position: absolute;
	margin-top: 36px;
	left: 29.5%;
	opacity: 0;
}

.chara_mid_ani {
	animation: fadeIn 0.3s forwards;
}

#s4 .mid div {
	position: absolute;
	text-align: center;
}

#s4 .mid .job {
	font-size: 62px;
	font-family: "Noto Sans TC", sans-serif;
	font-weight: 900;
	width: 25%;
	left: 13.5%;
	top: -3%;
	letter-spacing: -4px;
	transform: scaleX(0.85);
}

#s4 .mid .name {
	font-size: 55px;
	font-family: "Noto Sans TC", sans-serif;
	font-weight: 900;
	width: 68%;
	top: -1.5%;
	left: 35.5%;
	transform: scaleX(0.85);
}

#s4 .mid .en {
	font-size: 13px;
	font-family: "Noto Serif TC", serif;
	width: 36%;
	top: 22%;
	left: 59%;
}

#s4 .mid .title {
	font-size: 40px;
	font-family: "Noto Sans TC", sans-serif;
	font-weight: 900;
	width: 70%;
	top: 29.5%;
	left: 15%;
}

#s4 .mid .txt {
	font-size: 14px;
	font-weight: bold;
	text-align: left;
	width: 100%;
	top: 51.5%;
	line-height: 25px;
}

#s4 .chara_list.team2 .chara2 .mid .txt {
	top: 48.5%;
}

#s4 .chara_list.team4 .mid .after {
	font-size: 13px;
}

#s4 .mid .line1 {
	left: 6.5%;
	width: 41.5%;
	top: 72%;
	position: absolute;
	height: 25%;
}

#s4 .mid .line2 {
	left: 52.5%;
	width: 41.5%;
	top: 72%;
	position: absolute;
	height: 16%;
}

#s4 .mid ul li {
	width: 100%;
	height: auto;
	display: block;
	margin: auto;
	margin-bottom: 4.5%;
	min-width: auto;
}

#s4 .mid .before {
	color: #fff;
	font-family: "Noto Sans TC", sans-serif;
	font-weight: 500;
	font-size: 14px;
	display: inline-block;
	width: 41%;
	position: relative;
	left: 0;
	line-height: 26px;
}

#s4 .mid .after {
	font-family: "Noto Sans TC", sans-serif;
	font-weight: 500;
	font-size: 14px;
	display: inline-block;
	width: 55.5%;
	left: -2%;
	position: relative;
}

#s4 .page3_sp {
	display: none;
}

/* S5 ------------------------------------------------------- */

#s5 {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/feature_bg.jpg")
		top center no-repeat;
	background-size: cover;
	height: 1215px;
	position: relative;
	overflow: hidden;
	margin-top: -114px;
}

#s5 .pic {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/feature_pic.png")
		center center no-repeat;
	width: 772px;
	height: 1168px;
	position: absolute;
	left: 0;
	right: -60%;
	margin: 0 auto;
	margin-top: -16px;
}

#s5 .title {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/feature_title.png")
		center center no-repeat;
	width: 500px;
	height: 164px;
	position: absolute;
	margin: 0 auto;
	left: -32vw;
	right: 0;
	margin-top: 166px;
}

#s5 .swiper_box {
	position: relative;
	margin: 0 auto;
	margin-top: 414px;
	width: 100%;
}

#s5 .swiper-container {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/feature_in.svg")
		center center no-repeat;
	width: 861px;
	height: 484px;
	padding: 13px 18px;
}

#s5 .swiper1 {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/swiper/1.jpg");
	background-size: contain;
}

#s5 .swiper2 {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/swiper/2.jpg");
	background-size: contain;
}

#s5 .swiper3 {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/swiper/3.jpg");
	background-size: contain;
}

#s5 .swiper4 {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/swiper/4.jpg");
	background-size: contain;
}

#s5 .swiper5 {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/swiper/5.jpg");
	background-size: contain;
}

#s5 .swiper-button-prev,
#s5 .swiper-button-next {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/chara_arrow.svg")
		center center no-repeat;
	background-size: contain;
	width: 73px;
	height: 95px;
	left: -1050px;
	right: 0;
	margin: 0 auto;
	margin-top: -102px;
	transition: 0.3s;
}

#s5 .swiper-button-prev:focus,
#s5 .swiper-button-next:focus {
	outline: 0;
}

#s5 .swiper-button-prev:hover {
	left: -1055px;
}

#s5 .swiper-button-next:hover {
	left: 1055px;
}

#s5 .swiper-button-next {
	transform: scaleX(-1);
	left: 1050px;
}

#s5 .dot_bg {
	width: 800px;
	height: 21px;
	position: relative;
	margin: 0 auto;
	margin-top: 52px;
}

#s5 .dot_bg:before,
#s5 .dot_bg:after {
	content: " ";
	width: 309px;
	height: 1px;
	background: #000;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translate(0, -50%);
}

#s5 .dot_bg:after {
	right: 0;
	left: auto;
}

#s5 .swiper-pagination {
	margin: 0 auto;
	position: absolute;
	right: 0;
	left: 0;
}

#s5 .swiper-pagination-bullet {
	background: #000;
	width: 8px;
	height: 8px;
	border: 2px solid #000;
	border-radius: 0;
	opacity: 1;
	margin: 0 5px;
}

#s5 .swiper-pagination-bullet-active {
	background: #fff100;
}

/* S6 ------------------------------------------------------- */

#s6 {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/news_bg.png")
		top center no-repeat;
	background-size: cover;
	height: 1166px;
	position: relative;
	overflow: hidden;
	margin-top: -134px;
}

#s6 .title {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/news_title.png")
		center center no-repeat;
	width: 458px;
	height: 151px;
	position: relative;
	margin: 0 auto;
	margin-top: 204px;
	left: 9%;
}

#s6 .box {
	position: relative;
	width: 1052px;
	height: 428px;
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/news_list_bg.png")
		bottom center no-repeat;
	margin: 0 auto;
	margin-top: 136px;
}

#s6 .box .more {
	position: absolute;
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/news_list_more.png")
		top center no-repeat;
	width: 164px;
	height: 48px;
	right: 6px;
	cursor: pointer;
	transition: 0.3s;
}

#s6 .box .more:hover {
	right: 2px;
}

#s6 .swiper_box {
	position: absolute;
	width: 515px;
	left: 8px;
	top: 54px;
}

#s6 .swiper-container3 {
	width: 478px;
	height: 290px;
	overflow: hidden;
	margin: 0 auto;
	background-color: #f7f7f7;
}
#s6 .swiper-slide img {
	width: 100%;
}
#s6 .swiper1 {
	/* background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/news/swiper1.png");
	background-size: cover; */
}

#s6 .swiper2 {
	/* background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/news/swiper2.png");
	background-size: cover; */
}

#s6 .swiper3 {
	/* background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/news/swiper3.png");
	background-size: cover; */
}

#s6 .swiper4 {
	/* background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/news/swiper4.png");
	background-size: cover; */
}

#s6 .swiper5 {
	/* background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/news/swiper5.png");
	background-size: cover; */
}

#s6 .dot_bg {
	position: relative;
	top: 3px;
}

#s6 .swiper-pagination3 {
	display: block;
}

#s6 .swiper-pagination3 .swiper-pagination-bullet {
	position: relative;
	width: 101px;
	height: 65px;
	text-align: center;
	font-weight: bold;
	font-size: 17px;
	color: #3f3f3f;
	opacity: 1;
	background-color: #f0f0f0;
	border-radius: 0;
	margin-right: 2px;
	transition: 0.3s;
}

#s6 .swiper-pagination3 .swiper-pagination-bullet-active {
	background: #fff;
}
#s6 .swiper-pagination3 .swiper-pagination-bullet-active:after {
	content: "";
	position: absolute;
	background: #fff100;
	width: 100%;
	height: 4px;
	bottom: 1px;
	left: 0;
}
#s6
	.swiper-pagination3
	.swiper-pagination-bullet:nth-child(1).swiper-pagination-bullet-active:after {
	content: none;
}

#s6 .swiper-pagination3 .swiper-pagination-bullet:nth-child(1) {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/news_list_swiperdot.png")
		bottom left no-repeat;
}

#s6
	.swiper-pagination3
	.swiper-pagination-bullet:nth-child(1).swiper-pagination-bullet-active {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/news_list_swiperdot_a.png")
		bottom left no-repeat;
}

#s6 .swiper-pagination3 .swiper-pagination-bullet:nth-last-child(1) {
	margin-right: 0;
}

#s6 .swiper-pagination3 .swiper-pagination-bullet {
	position: relative !important;
}

#s6 .swiper-pagination3 .swiper-pagination-bullet span {
	position: absolute;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;
	width: 88px;
	height: 48px;
}

#s6 .list_box {
	position: absolute;
	right: 36px;
	top: 54px;
	width: 464px;
}

#s6 .list_box .tabs {
	height: 35px;
	position: relative;
}

#s6 .list_box .newslist a,
#news_main .list_box a {
	text-decoration: none;
}

#s6 .list_box .tabs li,
#news_main .list_box .tabs li {
	float: left;
	width: 87px;
	height: 35px;
	line-height: 35px;
	text-align: center;
	font-weight: bold;
	font-size: 17px;
	background-color: #f0f0f0;
	margin-right: 7px;
	cursor: pointer;
	color: #3f3f3f;
	transition: 0.4s;
	background-position: -20px 4px;
	box-sizing: border-box;
}

#s6 .list_box .tabs li:nth-last-child(1),
#news_main .list_box .tabs li:nth-last-child(1) {
	margin-right: 0;
}

#s6 .list_box .tabs li.tab_active,
#news_main .list_box .tabs li.tab_active {
	border: 1px solid #3f3f3f;
	box-sizing: border-box;
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/news_list_title_bg.png")
		left bottom no-repeat #fff100;
	background-size: 46px;
	background-position: -17px 4px;
	padding-left: 12px;
}

#s6 .list_box .newslist {
	position: relative;
	top: 12px;
	height: 296px;
}

#s6 .list_box .newslist li,
#news_main .list_box .newslist li {
	font-size: 16.5px;
	font-weight: bold;
	height: 45px;
	padding-left: 60px;
	box-sizing: border-box;
	color: #3f3f3f;
	line-height: 45px;
	cursor: pointer;
	margin-bottom: 5px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	padding-right: 84px;
	transition: 0.3s;
}

#s6 .list_box .newslist li.tab1,
#news_main .list_box .newslist li.tab1 {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/news_list_class1.png")
		left center no-repeat;
	background-size: 40px;
	background-position-x: 10px;
}
#s6 .list_box .newslist li.tab2,
#news_main .list_box .newslist li.tab2 {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/news_list_class2.png")
		left center no-repeat;
	background-size: 40px;
	background-position-x: 10px;
}
#s6 .list_box .newslist li.tab3,
#news_main .list_box .newslist li.tab3 {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/news_list_class3.png")
		left center no-repeat;
	background-size: 40px;
	background-position-x: 10px;
}
#s6 .list_box .newslist li.tab4,
#news_main .list_box .newslist li.tab4 {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/news_list_class4.png")
		left center no-repeat;
	background-size: 40px;
	background-position-x: 10px;
}

#s6 .list_box .newslist li:hover,
#news_main .list_box .newslist li:hover {
	background-color: #f7f7f7;
}

#s6 .list_box .newslist li span,
#news_main .list_box .newslist li span {
	font-size: 11.5px;
	color: #a1a2a3;
	right: 10px;
	position: absolute;
}

/* Go Top --------------------------------------------------- */

#gotop {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/gotop.png")
		center center no-repeat;
	background-size: contain;
	width: 84px;
	height: 85px;
	position: absolute;
	right: 1.3%;
	margin-top: -106px;
	cursor: pointer;
	transition: 0.3s;
}

#gotop:hover {
	transform: rotate(10deg);
}

/* Footer --------------------------------------------------- */

footer {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/cr_line.jpg")
		top center no-repeat #000;
	height: 194px;
	color: #fff;
	user-select: none;
}

footer .pic {
	text-align: center;
	width: 284px;
	position: absolute;
	top: 14%;
	left: 3%;
}

footer .pic ul{
	margin-top: 2%;
}

footer .pic ul li{
	font-size: 12px;
    text-align: left;
    line-height: 18px;
}

footer .pic span {
	color: white;
    cursor: pointer;
    text-decoration: underline;
}

footer .pic span:hover {
    color: #fff100;
}

footer .dena,
footer .toei {
	display: inline-block;
	margin: 0 9px;
}

footer .dena {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/cr_dena.png")
		top center no-repeat;
	background-size: contain;
	width: 80px;
	height: 38px;
}

footer .toei {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/cr_toei.png")
		top center no-repeat;
	background-size: contain;
	width: 89px;
	height: 58px;
}

footer .pic ul {
	margin-top: 2%;
}

footer .pic ul li {
	font-size: 12px;
	text-align: left;
    line-height: 18px;
}

footer .pic span {
	cursor: pointer;
    text-decoration: underline;
    transition: .2s;
}

	footer .pic span:hover {
		color: #ffff01;
	}

footer .game {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/cr_game.jpg")
		top left no-repeat;
	background-size: contain;
	height: 48px;
	font-size: 12px;
	padding-left: 75px;
	position: absolute;
	right: 1%;
	top: 54%;
}

footer .game li {
	list-style-type: decimal;
}

footer .pic p {
	font-size: 15px;
	font-weight: bold;
}

footer .info {
	font-size: 12px;
	position: absolute;
	right: 1%;
	top: 17%;
	font-weight: bold;
}

footer .info p {
	margin-top: 14px;
}

footer a:link a:active a:visited {
	color: #fff !important;
	text-decoration: none;
}

[data-aos="title_ani"] {
	background-position: 0 135px !important;
	transition-property: background-position;
}

[data-aos="title_ani"].aos-animate {
	background-position: 0 0 !important;
}

[data-aos="fade-left2"] {
	opacity: 0 !important;
	transform: translate3d(100px, 0, 0) scaleX(-1) !important;
	transition-property: opacity, transform;
}

[data-aos="fade-left2"].aos-animate {
	opacity: 1 !important;
	transform: translateZ(0) scaleX(-1) !important;
}

[data-aos="opacity_ani"] {
	opacity: 0 !important;
	transition-property: opacity;
}

[data-aos="opacity_ani"].aos-animate {
	opacity: 1 !important;
}

/* Pop Frame ------------------------------------------------ */

#popframe {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1001;
	min-width: 800px;
}

#popframe .bg {
	background: #000;
	position: relative;
	width: 100%;
	height: 100%;
	opacity: 0.8;
	animation: pop_bg_ani 0.6s forwards;
}

@keyframes pop_bg_ani {
	from {
		opacity: 0;
	}
	to {
		opacity: 0.8;
	}
}

.pop_bg_out {
	animation: pop_bg_out 0.6s forwards !important;
}

@keyframes pop_bg_out {
	from {
		opacity: 0.8;
	}
	to {
		opacity: 0;
	}
}

#popframe .box {
	display: none;
	width: 527px;
	height: 382px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: #fff 2px solid;
	animation: pop_box_ani 0.3s forwards;
}

@keyframes pop_box_ani {
	from {
		transform: translate(-50%, -20%);
		opacity: 0;
	}
	to {
		transform: translate(-50%, -50%);
		opacity: 1;
	}
}

.pop_box_out {
	animation: pop_box_out 0.3s forwards !important;
}

@keyframes pop_box_out {
	from {
		transform: translate(-50%, -50%);
		opacity: 1;
	}
	to {
		transform: translate(-50%, -20%);
		opacity: 0;
	}
}

#popframe .box.photo1 {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/story_pic1.jpg")
		center center no-repeat;
	background-size: contain;
}

#popframe .box.photo2 {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/story_pic2.jpg")
		center center no-repeat;
	background-size: contain;
}

#popframe .box.photo3 {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/story_pic3.jpg")
		center center no-repeat;
	background-size: contain;
}

#popframe .video_box {
	display: none;
	width: 800px;
	height: 464px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: #fff 2px solid;
	animation: pop_box_ani 0.3s forwards;
}

#popframe .video_box .video {
	position: absolute;
	width: 100%;
	padding-top: 58%;
	max-width: 800px;
	top: 50%;
	-webkit-transform: translate(0, -50%);
	transform: translate(0, -50%);
}

.video-container {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#popframe .close {
	position: absolute;
	width: 42px;
	height: 42px;
	right: 0;
	top: -13.5%;
	cursor: pointer;
	transition: 0.3s;
}

#popframe .close:before {
	content: " ";
	transform: rotate(45deg);
	width: 120%;
	height: 1px;
	display: block;
	background: #fff;
	top: 20px;
	left: -5px;
	position: absolute;
}

#popframe .close:after {
	content: " ";
	transform: rotate(-45deg);
	width: 120%;
	height: 1px;
	display: block;
	background: #fff;
	top: 20px;
	left: -5px;
	position: absolute;
}

#popframe .close:hover {
	transform: rotate(10deg);
}

/* SP Menu -------------------------------------------------- */

.nav-icon {
	display: none;
	width: 8%;
	padding-top: 7%;
	position: absolute;
	top: 0.25%;
	left: 3%;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: 0.5s ease-in-out;
	-moz-transition: 0.5s ease-in-out;
	-o-transition: 0.5s ease-in-out;
	transition: 0.5s ease-in-out;
	cursor: pointer;
	z-index: 1000;
	animation: fadeInDown 0.6s forwards;
}

.nav-icon span {
	display: block;
	position: absolute;
	padding-top: 7%;
	width: 100%;
	background: #626262;
	opacity: 1;
	left: 0;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: 0.25s ease-in-out;
	-moz-transition: 0.25s ease-in-out;
	-o-transition: 0.25s ease-in-out;
	transition: 0.25s ease-in-out;
}

.nav-icon span:nth-child(1) {
	top: 0px;
}

.nav-icon span:nth-child(2),
.nav-icon span:nth-child(3) {
	top: 30%;
}

.nav-icon span:nth-child(4) {
	top: 60%;
}

.nav-icon.open span:nth-child(1) {
	top: 22%;
	width: 0%;
	left: 50%;
}

.nav-icon.open span:nth-child(2) {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}

.nav-icon.open span:nth-child(3) {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.nav-icon.open span:nth-child(4) {
	top: 22%;
	width: 0%;
	left: 50%;
}

#sp_menu {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
	min-width: 320px;
	overflow: auto;
}

#sp_menu .bg {
	background: #fff;
	position: relative;
	width: 100%;
	height: 100%;
	animation: fadeInLeft 0.3s forwards;
}

#sp_menu .box {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/sp_menu_bg.jpg")
		top center no-repeat;
	background-size: contain;
	padding-top: 150%;
	top: 0;
	left: 0;
	position: absolute;
	width: 100%;
	animation: fadeInLeft 0.3s forwards;
}

.sp_menu_box_out {
	animation: sp_menu_box_out 0.3s forwards !important;
}

@keyframes sp_menu_box_out {
	from {
		left: 0;
	}
	to {
		left: -100%;
	}
}

#sp_menu .logo {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/logo.png")
		top center no-repeat;
	background-size: contain;
	max-width: 511px;
	width: 64%;
	padding-top: 34%;
	position: absolute;
	top: 10.5%;
	margin: 0 auto;
	right: 0;
	left: 0;
	animation: zoomIn 0.6s forwards;
}

#sp_menu .btns {
	position: absolute;
	width: 100%;
	top: 37.5%;
}

#sp_menu .btns li {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/sp_menu_list.png")
		top center no-repeat;
	background-size: cover;
	max-width: 688px;
	width: 86%;
	padding-top: 10.25%;
	margin: 0 auto;
	margin-bottom: 6%;
	cursor: pointer;
	position: relative;
	animation: sp_menu_list_ani 0.6s forwards;
	overflow: hidden;
}

@keyframes sp_menu_list_ani {
	from {
		padding-top: 0;
	}
	to {
		padding-top: 10.25%;
	}
}

#sp_menu .btns p {
	position: absolute;
	font-family: "Microsoft JhengHei";
	transition: 0.3s;
}

#sp_menu .no {
	top: 29.4%;
	left: 9.8%;
	color: #0096db;
	font-size: 2.6vw;
	line-height: 2.6vw;
}

#sp_menu .no span {
	font-size: 4.5vw;
}

#sp_menu .title {
	color: #fff;
	top: -2%;
	right: 3.5%;
	font-size: 6.5vw;
	line-height: 7.5vw;
}

#sp_menu .txt {
	bottom: 6%;
	right: 3.5%;
	color: #fff585;
	font-size: 2.8vw;
	line-height: 2.8vw;
}

#sp_menu .apps {
	position: absolute;
	top: 84%;
	width: 100%;
	text-align: center;
	animation: fadeInDown 1s forwards;
}

#sp_menu .apps li {
	display: inline-block;
	cursor: pointer;
}

#sp_menu .google {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/app_google.svg")
		top center no-repeat;
	width: 24.5%;
	height: auto;
	padding-top: 8%;
	margin-right: 1%;
}

#sp_menu .ios {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/app_ios.svg")
		top center no-repeat;
	width: 22.5%;
	height: auto;
	padding-top: 8%;
	margin-right: 1%;
}

#sp_menu .apk {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/app_apk.jpg")
		top center no-repeat;
	width: 35.75%;
	height: auto;
	padding-top: 8%;
	background-size: contain;
}

/* Loading -------------------------------------------------- */

#app_loading {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/cr_line.jpg")
		center center no-repeat;
	position: fixed;
	margin: 0 auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
}

/* #app_loading:before, #app_loading:after {
	content: ' ';
	position: absolute;
	height: 2px;
	background: #ffff01;
	width: 43%;
	top: 50%;
	left: 0;
	transform: translate(0, -50%);
} */

#app_loading:after {
	right: 0;
	left: auto;
}

#app_loading .loadingbg {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/loading_bg.png")
		center center no-repeat;
	background-size: contain;
	width: 168px;
	height: 202px;
	position: absolute;
	margin: 0 auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	animation: rotate 1.5s linear infinite;
	transform-origin: 0% 0%;
	z-index: 1;
}

@keyframes rotate {
	from {
		transform: rotate(0) translate(-50%, -50%);
	}
	to {
		transform: rotate(360deg) translate(-50%, -50%);
	}
}

#app_loading img {
	position: absolute;
	margin: 0 auto;
	max-width: 168px;
	top: 50%;
	left: 50%;
	transform: translate(-38%, -50%);
	z-index: 1;
}

/* Rewards -------------------------------------------------- */

#rewards {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/reward_btn.png")
		top center no-repeat;
	background-size: contain;
	width: 38px;
	height: 253px;
	position: fixed;
	left: 0;
	top: 50%;
	transform: translate(0, -50%);
	z-index: 2;
	cursor: pointer;
	opacity: 0;
}

.rewards_ani {
	animation: rewards_ani 0.8s forwards;
}

@keyframes rewards_ani {
	from {
		left: -38px;
		opacity: 1;
	}
	to {
		left: 0;
		opacity: 1;
	}
}


/* User Agreement -------------------------------------------------- */

#popframe .agreement_box {
	display: none;
	width: 800px;
    height: 464px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: #fff 2px solid;
    animation: pop_box_ani .3s forwards;
    font-family: Arial;
}

#popframe .agreement {
	background: rgba(255,255,255,0.9);
	width: 100%;
    height: 100%;
    padding: 15px 8px 15px 15px;
    box-sizing: border-box;
    font-size: 12px;
    text-align: left;
    line-height: 14px;
}

#popframe .agreement_in {
	width: 100%;
	height: 100%;
	overflow: auto;
}

#popframe .title {
	font-weight: bold;
	font-size: 16px;
    margin: 6px 0;
}

#popframe p, #popframe ul {
	font-size: 14px;
	line-height: 20px;
}

#popframe ul {
	margin-left: 20px;
}

#popframe ul li {
    list-style: disc;
    margin-bottom: 5px;
}

#popframe ul li ul li {
	list-style: auto;
	margin-bottom: 0;
}

#popframe .tg  {border-collapse:collapse;border-spacing:0;}
#popframe .tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  overflow:hidden;padding:10px 5px;word-break:normal;}
#popframe .tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
#popframe .tg .tg-1wig{font-weight:bold;text-align:left;vertical-align:top}
#popframe .tg .tg-c3ow{border-color:inherit;text-align:center;vertical-align:top}
#popframe .tg .tg-0pky{border-color:inherit;text-align:left;vertical-align:top}
#popframe .tg .tg-0lax{text-align:left;vertical-align:top}




/* News Pages ------------------------------------------------ */

#news_main {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/newsmain_bg.jpg")
		top center no-repeat fixed;
	background-size: cover;
}

#news_main .top {
	height: 273px;
}

#news_main .title {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/news_title.png")
		center center no-repeat;
	background-size: contain;
	width: 458px;
	height: 151px;
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#news_main .in {
	background: url(https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/cr_line.jpg)
		top center no-repeat rgba(255, 255, 255, 0.7);
	background-position-y: -4.5px;
	max-width: none;
	height: auto;
}

#news_main .box {
	width: 755px;
	margin: 0 auto;
	padding-top: 30px;
}

#news_main .list_box {
	background: #fff;
	padding: 40px 34px;
	user-select: none;
}

#news_main .list_box .tabs {
	height: 51.6px;
}

#news_main .list_box .tabs li {
	width: 130px;
	height: 51.6px;
	line-height: 51.6px;
	font-size: 25px;
	margin-right: 9px;
	background-position: -32px 5px;
}

#news_main .list_box .tabs li.tab_active {
	background-position: -25px 5px;
	background-size: unset;
	padding-left: 20px;
}

#news_main .list_box .newslist {
	margin-top: 18px;
}

#news_main .list_box .newslist li {
	position: relative;
	font-size: 23.8px;
	height: 66.4px;
	padding-left: 95px;
	line-height: 66.4px;
	margin-bottom: 8px;
	padding-right: 128px;
}

#news_main .list_box .newslist li.tab1,
#news_main .list_box .newslist li.tab2,
#news_main .list_box .newslist li.tab3,
#news_main .list_box .newslist li.tab4 {
	background-size: unset;
	background-position-x: 17px;
}

#news_main .list_box .newslist li span {
	font-size: 16.35px;
	right: 16px;
}

#news_main .nav {
	background-color: #f7f7f7;
	margin-top: 18px;
	text-align: center;
	height: 66.4px;
}

#news_main .back_btn,
#news_main .list_btn {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/news_list_btnback.png")
		top center no-repeat;
	width: 215px;
	height: 71px;
	margin: 0 auto;
	margin-top: 56px;
	margin-bottom: 30px;
	cursor: pointer;
}
#news_main .list_btn {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/news_list_btn.png")
		top center no-repeat;
}

#news_main .nav li {
	display: inline-block;
	height: 38px;
	border: 1px solid #000;
	line-height: 38px;
	font-size: 17px;
	vertical-align: middle;
	top: 13px;
	position: relative;
}

#news_main .prev,
#news_main .next {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/news_list_arrow.png")
		center center no-repeat #fff;
	width: 38px;
	cursor: pointer;
	color: #fff;
}

#news_main .next {
	transform: scaleX(-1);
}

#news_main .pages {
	background: #fff;
	width: 203px;
	color: #3f3f3f;
	margin: 0px 10px;
}

#news_main .list_box.article {
	user-select: auto;
	color: #3f3f3f;
}

#news_main .article_title {
	background-color: #f7f7f7;
	font-size: 29px;
	font-weight: bold;
	text-align: center;
	padding: 18px 20px;
}

#news_main .article_title span {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

#news_main .time {
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	color: #7e7e7e;
	margin-top: 32px;
}

#news_main .share {
	font-size: 16px;
	color: #7e7e7e;
	float: right;
	margin-top: -40px;
}

#news_main .share li {
	display: inline-block;
	vertical-align: middle;
}

#news_main .share_fb,
#news_main .share_line {
	width: 53px;
	height: 52px;
	cursor: pointer;
}

#news_main .share_fb {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/news_list_sharefb.png")
		top center no-repeat;
}

#news_main .share_line {
	background: url("https://os-web-cdn.5xgames.com/cdn/web/sd/official/static/img/news_list_shareline.png")
		top center no-repeat;
}

#news_main .article_text {
	padding-top: 40px;
	padding-bottom: 26px;
	font-size: 16px;
	word-wrap: break-word;
}

#news_main .article_text img {
	max-width: 100%;
}

#news_main .article_text a:link,
#news_main .article_text a:visited,
#news_main .article_text a:hover,
#news_main .article_text a:active {
	color: rgb(25, 98, 213);
	text-decoration: none;
}

#news_main .article_text a:hover {
	text-decoration: underline;
}