* {
	font-family: Arial, 微軟正黑體, sans-serif;
	text-decoration: none;
}
ul {
	list-style: none;
}
input:focus {
	outline: none;
}
.search_box ::placeholder {
 color: rgba(255,255,255,.8);
}
table {
	border-spacing: 0;
	border-collapse: separate;
}
html, body {
	box-sizing: border-box;
	position: relative;
	margin: 0 auto;
	min-width: 1320px;
}
html {
	background: url(../images/bg1.png) no-repeat center top;
}
nav, footer {
	width: 100%;
}
.wrap {
	position: relative;
	margin: 0 auto 80px;
	max-width: 1200px;
}
/*----nav----*/
nav {
	position: relative;
	height: 77px;
	z-index: 2;
	animation: down 1.5s forwards;
	background-color: rgb(0, 0, 0, 0.7);
}
 @keyframes down {
 from {
 opacity: 0;
 top: -77px;
}
to {
	opacity: 1;
	top: 0;
}
}
nav a {
	display: block;
	color: rgba(255,255,255,.7)!important;
	line-height: 30px;
	font-size: 16px;
}
nav a:hover {
	color: #fff!important;
	    text-decoration: none;
}
.logo {
	filter: drop-shadow(0px 0px 7px rgba(0,0,0,.9));
	position: absolute;
	margin-top: 26%;
	margin-left: 16%;
	z-index: 1;
}
.logo img {
	margin-top: -130px;
}
.menu {
	display: inline-block;
	margin: 0 auto;
	height: 77px;
	vertical-align: top;
	overflow: hidden;
}
.menu:hover {
	height: 340px;
	transition: height 1s;
}
.menu li {
	display: inline-block;
	margin: 0 -2px;
	width: 160px;
	height: 340px;
	text-align: center;
	vertical-align: top;
	cursor: pointer;
	background: rgb(5 5 5 / 50%);
}
.menu li a.nav_head {
	display: block;
	padding: 25px 0 30px;
	color: #ffffff;
	font-size: 20px;
}
.menu li:hover a.nav_head {
	background: url(../images/nav_hover.png) no-repeat center top;
}
.shade {
	display: none;
	position: absolute;
	width: 100%;
	height: 270px;
	top: 77px;
	left: 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 80%, rgba(21,26,29,0) 100%);
	z-index: 1;
}
.download_top {
	display: inline-block;
	border: 0.5px solid #737272;
	margin: 20px 2px;
	padding: 5px 20px;
	background: rgb(255 255 255 / 10%);
	transition: .3s;
	margin-left: 25%;
	position: absolute;
	width: 136px;
	text-align: center;
}
.sign_up {
	display: inline-block;
	border: 0.5px solid #737272;
	margin: 20px 2px;
	padding: 5px 20px;
	background: rgb(255 255 255 / 10%);
	transition: .3s;
	margin-left: 9%;
	position: absolute;
	width: 136px;
	text-align: center;
}
.fb_icon {
	display: inline-block;
	margin: 16px 2px;
	padding: 5px 20px;
	transition: .3s;
	margin-left: 40%;
	position: absolute;
}
.game_icon {
	display: inline-block;
	margin: 16px 2px;
	padding: 5px 20px;
	transition: .3s;
	margin-left: 45%;
	position: absolute;
}
.logo_s {
	display: inline-block;
	margin: 1px 2px;
	padding: 5px 20px;
	transition: .3s;
	margin-left: -13%;
	position: absolute;
}
/*----game_download----*/
.mall {
	margin: 280px 0 10px;
	margin-left: 3%;
	margin-top: 45%;
	margin-bottom: 15%;
}
.mall img {
	max-width: 241px;
	transition: .5s;
}
.btn_mall img {
	max-width: 300px;
	transition: .5s;
}
.btn_mall img:hover {
	filter: brightness(1.3);
}
.img_zoom img:hover {
	filter: brightness(1.3);
	animation: gd ease-in-out 1.5s infinite;
}
 @keyframes gd {
 0% {
 transform: scale(1);
}
 50% {
 transform: scale(0.95);
}
 100% {
 transform: scale(1);
}
}
/*----aside---*/
.left {
    width: 315px;
    display: inline-block;
    position: relative;
}
aside {
	position: relative;
	display: block;
	margin-right: 10px;
	width: 315px;
}

.btn_login {
	position: absolute;
	right: 0px;
	top: 5px;
}
.g-recaptcha {
	margin: 7px auto 11px;
	transform-origin: 0 0;
	margin-left: 4px;
}
.login .member_info {
	color: #fff;
	text-align: center;
}
.login img:hover, .link img:hover {
	transition: .3s;
}
.login img:hover, .link img:hover {
	filter: brightness(1.3);
}
.login ul {
	margin: 10px auto 0;
	margin-left: -38px;
	text-align: center;
}
.login ul li {
	display: inline-block;
}
.login ul li:nth-child(3) {
	border: none;
}
.login ul li a {
	padding-left: 6px;
	padding-right: 8px;
	color: #ffffff;
	font-size: 16px;
	transition: .2s;
}
.login ul li a:hover {
	color: #fff;
}
.gamedownload {
	margin-top: 10px;
}
.login.inner {
    position: relative;
    padding-top: 8px;
}
.gamedownload a:hover {
	filter: brightness(1.3);
}
/*form {
	padding-top: -5px;
	margin-top: 10px;
}*/
/*----game_time&game_link----*/

.game_inner {
	position: relative;
	margin: 10px 0 0 0;
	width: 315px;
	display: inline-block;
}
.link {
	width: 100%;
	display: block;
	/* margin: -8px auto; */
	/* margin-left: -59px; */
	text-align: center;
	display: grid;
	padding: 0;
}
.link li {
	width: 100%;
	margin: 2px auto;
}
.link img {
	width: 100%;
}
video {
	margin-left: -360px;
	position: absolute;
	margin-top: -200px;
}
/*----content----*/
article {
	width: 840px;
	display: inline-block;
	position: relative;
	padding: 0 15px;
	padding-bottom: 15px;
	margin-left: 10px;
	background: rgb(0 0 0 / 30%);
	vertical-align: top;
}
/*----news----*/
#news {
	display: inline-block;
	border-radius: 10px;
	margin: 15px auto;
	width: 840px;
	vertical-align: top;
}
.new_icon {
    background: url(../images/new_icon.png) no-repeat center center;
    width: 40px;
    height: 12px;
    display: inline-block;
    padding-left: 5px;
}
.news_box {
	position: relative;
	padding: 10px 0;
	width: 100%;
	text-align: center;
	margin-top: -3%;
}
.news_box ul {
	margin: 0 auto;
	margin-left: 0px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: rgb(99,99,99);
	text-align: left;
}
.news_box ul.tabs li {
	display: inline-block;
	margin: -14px -1px;
	padding: 22px 0 5px;
	width: 110px;
	height: 51px;
	transition: .5s;
	font-size: 19px;
	text-align: left;
}
.news_box ul.tabs li:hover, .news_box ul.tabs li.active {
	filter: brightness(1.3);
}
.news_box ul.tabs li a {
	color: #fff;
}
a.new_s {
	margin-top: -6%;
	margin-left: 44%;
	position: absolute;
}
.tab_container {
	margin-left: 15px;
	margin-bottom: 10px;
	padding-right: 15px;
	text-align: left;
}
.tab_container li {
	cursor: pointer;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #1d1d1d;
	margin-left: -45px;
}
.tab_container li a {
	display: block;
	padding: 17px 0;
	color: #e2e2e2;
}
.tab_container li:hover a {
	color: #EBD67E;
}
.tab_container .top a {
	color: #face2e;
}
.tab_container li a span {
	margin-right: 10px;
	padding: 5px 8px;
	color: rgba(255,255,255,.9);
	font-size: 15px;
	background: #464748;
	margin-left: 11px;
}
li a span.type_a {
    background: #2e3880 !important;
}
li a span.type_b {
    background: #c11111 !important;
}
li a span.type_d {
    background: #964516 !important;
}
.tab_container time {
	font-size: 14px;
	float: right;
}
.search_box {
	margin-left: 15px;
	text-align: left;
}
.search_box input {
	font-size: 14px;
	color: rgb(0 0 0 / 80%);
	background: #710000;
	margin-left: 4px;
	margin-top: 10px;
}
input.btn_purple {
	width: 90px;
	height: 35px;
	font-size: 16px;
	font-weight: bold;
	background: url(../images/news_bg.png) no-repeat;
	background-size: cover;
	box-shadow: none;
	cursor: pointer;
	transition: .5s;
}
input.btn_purple:hover, .btn_more:hover {
	filter: brightness(1.3);
}
.btn_more {
	position: absolute;
	right: 15px;
	bottom: 15px;
	transition: .5s;
}
/*----notice----*/
.notice {
	border: 1px solid rgba(255,255,255,.6);
	padding: 15px 0;
	margin: 0 auto;
	max-width: 255px;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	cursor: pointer;
	transition: .5s;
}
.notice:hover {
	border: 1px solid rgba(255,255,255,1);
	background: rgba(0,0,0,.6);
}
.notice_box, .intro {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	color: rgba(255,255,255,.8);
	background: rgba(0,0,0,.8);
	z-index: 999;
	display: none;
}
.pop_crazyAD {
    display: block;
}
.notice_box .wrap, .intro .wrap {
	position: absolute;
	top: 50%;
	left: 50%;
	max-width: 960px;
	text-align: left;
	transform: translate(-50%, -50%);
	opacity: 0;
}
.intro .wrap {
	opacity: 1;
	height: 700px;
	width: 766px;
	background-image: url(../images/intro.jpg);
	background-repeat: no-repeat;
	border: 1px solid rgb(90 45 18);
}
.notice_box .content, .intro .content {
	border: 1px solid rgba(255,255,255,.7);
	padding: 20px 25px;
	background: rgba(0,0,0,.7);
}
.intro .content {
	padding: 0;
}
.notice_box h4 {
	margin: 5px auto;
	color: #ffdca6;
	font-size: 18px;
}
.notice_box ol {
	padding-left: 25px;
}
.notice_box .en li {
	list-style: upper-alpha;
}
.notice_box ol li {
	list-style: decimal;
	line-height: 26px;
}
.notice_box .popup-close, .intro .popup-close {
	position: absolute;
	top: -40px;
	right: 0;
	color: #fff;
	cursor: pointer;
}
.logo_con img {
	width: 50%;
	margin-top: 5%;
	margin-left: 10%;
}
ul.BOX {
	margin-top: 1%;
	position: relative;
	margin-left: 2%;
}
.BOX > li {
	width: 660px;
	height: 125px;
	margin-bottom: 10px;
	overflow: hidden;
	background: rgb(10 1 1 / 50%);
	border: 1px solid rgb(60 31 30);
}
.BOX > li .title {
	font-size: 19px;
	margin-top: 20px;
	margin-bottom: 15px;
	color: #ffb91d;
	font-weight: bold;
	width: 300px;
	text-align: left;
	position: relative;
	top: -6px;
	left: 146px;
}
.BOX > li .money {
	font-size: 1.5em;
	color: #ffb01f;
	font-weight: bold;
	width: 200px;
	overflow: hidden;
	position: relative;
	top: -29px;
	left: 453px;
	text-align: center;
}
.BOX .img {
	position: relative;
	margin-top: -9%;
	margin-left: 44px;
}
/*----banner----*/
#banner {
	display: inline-block;
	margin: 15px auto;
	width: 840px;
	height: 310px;
	overflow: hidden;
}
.imgSlider {
	margin: 0 auto;
	padding-left: 0;
	width: 100%;
}
.owl-theme .owl-dots .owl-dot span {
	position: relative;
	margin: 0 5px;
	bottom: 41px;
	width: 19px;
	height: 5px;
	background: #fff;
}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots.active span {
	width: 53px;
	background: #ffa311;
}
section {
	border-radius: 20px;
	padding: 10px;
	background: #4f80be;
}
.section_box {
	border-radius: 15px;
	padding: 6px;
	background: linear-gradient(#b5d5ff, #6aacf1);
}
.chars {
	position: relative;
	border-radius: 10px;
	height: 392px;
	background: url(../images/char_bg.jpg) no-repeat;
	background-size: cover;
	overflow: hidden;
}
.chars ul.tabs {
	position: absolute;
	bottom: -10px;
	left: 0;
	z-index: 5;
}
.tab01, .tab02, .tab03, .tab04, .tab05, .tab06, .tab07 {
	display: inline-block;
	width: 94px;
	height: 94px;
	background: url(../images/char_btn01.png) no-repeat;
}
.tab02 {
	background: url(../images/char_btn02.png) no-repeat;
}
.tab03 {
	background: url(../images/char_btn03.png) no-repeat;
}
.tab04 {
	background: url(../images/char_btn04.png) no-repeat;
}
.chars ul.tabs a {
	display: block;
	width: 94px;
	height: 94px;
	background: rgba(0,0,0,.5);
	transform: rotate(45deg)scale(.7);
	transition: .8s;
}
.chars ul.tabs a:hover, .chars ul.tabs li.active a {
	background: rgba(0,0,0,0);
}
.section_box .tab_content {
	display: none;
}
.section_box .tab_content.on {
	display: block !important;
}
.char_txt {
	position: absolute;
	left: 35px;
	top: 30px;
}
.tab_content.on .char_txt {
	animation: fadeInBottom linear .8s forwards;
}
 @keyframes fadeInBottom {
 0% {
 opacity: 0;
 transform: translateY(10px);
}
 100% {
 opacity: 1;
 transform: translateY(0);
}
}
.char_img {
	position: absolute;
	right: 0;
	top: 0;
}
.tab_content.on .char_img {
	animation: fadeInRight linear .7s forwards;
}
 @keyframes fadeInRight {
 0% {
 opacity: 0;
 transform: translateX(20px);
}
 100% {
 opacity: 1;
 transform: translateX(0);
}
}
.owl-prev, .owl-prev:hover, .owl-next, .owl-next:hover {
	position: absolute;
	width: 40px;
	height: 66px;
	top: 50%;
	right: 2px;
	transform: translateY(-50%);
	background-image: url(../images/next.png);
	background-repeat: no-repeat;
	background-position: center top;
}
.owl-prev, .owl-prev:hover {
	left: 2px;
	transform: scaleX(-1)translateY(-50%);
}
/*----footer----*/
footer {
	position: relative;
	padding: 40px 0 30px;
	color: #fff;
	font-size: 12px;
	text-align: center;
	letter-spacing: .2px;
	line-height: 18px;
	background: #1d1d1d;
	display: grid;
}
footer .button {
	margin-bottom: 25px;
}
footer .button a {
	border-radius: 0;
	margin: 0 -2px;
	background: none;
}
footer p {
	margin: 3px auto;
	opacity: .6;
}
footer .copyright img {
	margin-right: 5px;
}
.pw {
	opacity: .6;
}
footer .grading img {
	display: inline-block;
	margin-right: 5px;
	vertical-align: middle;
}
footer ul {
	display: inline-block;
	padding: 0;
	line-height: normal;
	vertical-align: middle;
	opacity: .6;
}
footer .grading img {
	display: inline-block;
	margin-right: 5px;
	vertical-align: middle;
}
 @media screen and (max-width: 1200px) {
.sign_up {
	display: none;
}
.download_top {
	display: none;
}
.fb_icon {
	margin-left: 20%;
}
.game_icon {
	margin-left: 26%;
}
.logo_s {
	display: none;
}
video {
	display: none;
}
.logo {
	margin-left: 2%;
}
}
#mall_menu {
}
.mall_menu {
    width: 280px;
    position: relative;
    display: inline-block;
    padding: 0;
    margin: 30px 18px 0;
}
.drop-down {
	position: relative;
	margin-top: 12px;
	display: grid;
	margin-bottom: 12px;
}
.submenu {
	position: relative;
	opacity: 0;
	width: 100%;
	z-index: 8;
	transition: opacity 0.5s ease;
}
.submenu-item {
	display: block;
	height: 0px;
	overflow: hidden;
	transition: height 0.5s ease;
}
.drop-down.active .submenu {
	opacity: 1;
}
.drop-down.active .submenu-item {
	overflow: hidden;
	height: 30px;
}
.item {
	padding: 10px;
	color: rgb(255,255,255);
	width: 258px;
	background-image: url(../images/menu_bg.png);
        cursor: pointer;
}
.item:hover {
	background: rgb(255 0 0 / 50%);
	background-position: 255;
}
li.itembox.drop-down {
}
.submenu-item {
 background: : rgb(255 255 255 / 10%);
	color: #eee;
	width: 88%;
	line-height: 30px;
}
.submenu-item:hover {
		background: rgb(255 0 0 / 20%);
		
}
a.submenu-item {
	text-align: center;
	width: 100%;
}
.now .item {
	background: #ddd;
}
.now .submenu {
	opacity: 1;
}
.now .submenu-item {
	background: #555;
	overflow: visible;
	height: 30px;
}
.text {
	position: absolute;
	padding-right: 10px;
	width: 40%;
	padding-left: 15px;
	padding-top: 3px;
	height: 68px;
	line-height: 21px;
	overflow: auto;
	margin-top: -2%;
	text-align: left;
	margin-left: 19.5%;
	font-size: 13px;
	z-index: 99;
	color: rgb(253 223 178);
	background: rgb(58 0 0 / 70%);
	overflow: auto;
}
/*----scroll----*/
.text::-webkit-scrollbar {
 width: 4px;
 margin-top: 50px;
}
.text::-webkit-scrollbar-track {
 border-radius: 7px;
 box-shadow: inset 0 0 6px rgba(0,0,0,0.0);
 background: rgba(0,0,0,0.3);
}
.text::-webkit-scrollbar-thumb {
 border-radius: 10px;
 box-shadow: inset 1px 1px 6px 2px #b17e68;
}
.btn_intro {
	width: 120px;
	margin-top: -14px;
	height: 25px;
	line-height: 25px;
	text-align: center;
	background: #6f0101;
	color: #FFF;
	display: block;
	position: absolute;
	margin-left: 66%;
	z-index: 99;
}
.btn_intro:hover {
	color: #FFF;
	text-decoration: none;
	background-color: #D59191;
}
.icon {
	position: absolute;
	background: url(../images/ico_cash.png) no-repeat;
	width: 75px;
	height: 20px;
	margin-left: 48px;
	margin-top: 4px !important;
	margin-bottom: 30px !important;
	color: #ce9928 !important;
	display: block;
}