@charset "utf-8";
body {
  margin: 0;
  background-color: #f4f4f4;
  width: 100%;
  background-position: center top;
  background-image: url("../images/index/bg.jpg");
  background-repeat: no-repeat;
  max-height: 2300px;
  min-height: 800px;
  overflow-x: hidden;
}
/*網頁版*/
.warp {
	width: 100%;
	min-height: 800px;
	position: relative;
	overflow: hidden;
}



/*-------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------*/
.header {
	height: 800px;
	width: 1920px;
	position: relative;
  z-index: 0;
	margin: 0 auto;
}



/*下底圖*/
.header-bg-black {
  height: 2000px;
  width: 1920px;
  position: absolute;
  z-index: 50;
  background-image: url(../images/index/fallen.png);
  background-repeat: no-repeat;
  margin: 0 auto 0 -960px;
  top: 0;
  left: 50%;
}

.header .centerbg {
	background-image: url("../images/index/centerbg.png");
	background-repeat: no-repeat;
	height: 689px;
	width: 1920px;
	position: absolute;
	display: block;
	left: 0%;
	top: 0%;
	z-index: 5;
  opacity: 1;
}

/*-------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------*/
.TitleBox{
  width: 100%;
  height: 150px;
  margin: 0 auto 1%;
  position: relative;
  float: left;
}
.TitleBox_01{
  width: 100%;
  height: 150px;
  margin: 0 auto;
  position: relative;
  background-image: url("../images/index/title01.png");
  background-repeat: no-repeat;
}
.TitleBox_02{
  width: 100%;
  height: 150px;
  margin: 0 auto;
  position: relative;
  background-image: url("../images/index/title02.png");
  background-repeat: no-repeat;
}

/*-------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------*/
/*大廣告*/
.adbannerBig {
	height: 1080px;
	width: 1920px;
	position: absolute;
	top: 0;
	left: 50%;
	margin: 0 0 0 -960px;
	z-index: 1;
}

/*輪播bn*/
#abgne_fade_Big {
	position: relative;
	width: 1920px;
	height: 1080px;
}
#abgne_fade_Big a.ad {
	position: absolute;	/* 讓圖片疊在一起 */
}
#abgne_fade_Big .control {
	position: absolute;
	left: 50%;
	bottom: 21%;
}
#abgne_fade_Big .control a {
	display: inline-block;
	width: 10px;
	text-align: center;
	font-size: 0px;
	text-decoration: none;
	background-color: #fff;
	height: 10px;
	border-radius: 5px;
	color: #FFF;
	margin-right: 5px;
}
#abgne_fade_Big .control a.on {
	background-color: #fff1c2;
}


/*-------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------*/
/*----內容----*/
.content {
	width: 1200px;
	position: relative;
	z-index: 99;
	margin: 0 auto;
}


.content .news,
.content .adbanner,
.content .job,
.content .Dise02, 
.content .facebook, 
.content .raider {
	float: left;
	margin-bottom: 30px;
}
.content .GamestartBox,
.content .Dise02,
.content .adbanner {
}


/*-------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------*/
.content .GamestartBox {
  width: 1200px;
  height: 300px;
  display: block;
  position: relative;
  background-image: url("../images/index/box01.png");
  background-position: center center;
}

/*開始遊戲*/
.GamestartBox .gamestart-btn {
	position: relative;
	float: left;
}

.GamestartBox .gamestart {
	background-image: url(../images/index/gamestart-1.png);
	background-repeat: no-repeat;
	height: 300px;
	width: 300px;
	display: block;
}
.GamestartBox .gamestart:hover {
	background-image: url(../images/index/gamestart-2.png);
	background-repeat: no-repeat;
}

/*-------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------*/
/*按鈕群*/
.GamestartBox .Dise01 {
	height: 300px;
	width: 900px;
	float: left;
	display: flex;
	align-items: flex-end;
}
.GamestartBox .Dise01 ul {
	height: 240px;
	width: 900px;
	display: flex;
	justify-content: flex-start;
  padding: 10px;
}

.GamestartBox .Dise01 ul li {
	height: auto;
	width: 210px;
}

.GamestartBox .Dise01 ul li a.DiseBtn{
	height: 100px;
	width: 210px;
	position: relative;
	display: block;
  margin: 0 0 10px 0;
  background-size: 84%;
  background-position: center;
}

/*伺服*/
.GamestartBox .Dise01 ul li#SeverBtn{
	padding: 8% 1% 1%;
	background-image: url(../images/index/free-0.png);
	background-repeat: no-repeat;
  background-position: center 8px;
}

.GamestartBox .Dise01 ul li .severBox {
	width: 100%;
  margin: 0 auto;
	float: left;
	display: block;
}
.GamestartBox .Dise01 ul li .severBox .sever-list {
	width: 100%;
	height: 35px;
	float: left;
	color: #d2b576;
	text-align: center;
	font-size: 14px;
	line-height: 35px;
}
.GamestartBox .Dise01 ul li .severBox .sever-list:hover {
	color: #fff;
}
.GamestartBox .Dise01 ul li .severBox .sever-list:nth-child(3) {
  border-right: none;
}
.GamestartBox .Dise01 ul li .severBox .sever-new {
  width: 100%;
  height: 35px;
  color: #d2b576;
  text-align: center;
  font-size: 14px;
  line-height: 35px;
  position: relative;
  display: inline-block;
}
.GamestartBox .Dise01 ul li .severBox .sever-new:hover {
  color: #fff;
}
.GamestartBox .Dise01 ul li .severBox .sever-new::after {
  content: "";
  width: 30px;
  height: 30px;
  position: absolute;
  top: 6%;
  left: 70%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  background-image: url("../images/index/new.gif");
}
.GamestartBox .Dise01 ul li .severBox .sever-new:hover::after {
}

/*遊戲儲值*/
.GamestartBox .Dise01 ul li a#storage {
	background-image: url(../images/index/free-1.png);
	background-repeat: no-repeat;
	transition: all 600ms ease;
	display: block;
}
.GamestartBox .Dise01 ul li a:hover#storage {
	background-image: url(../images/index/free-12.png);
	background-repeat: no-repeat;
	transition: all 600ms ease;
}



/*微端下載*/
.GamestartBox .Dise01 ul li a#download {
	background-image: url(../images/index/free-2.png);
	background-repeat: no-repeat;
	transition: all 600ms ease;
	display: block;
}
.GamestartBox .Dise01 ul li a:hover#download {
	background-image: url(../images/index/free-22.png);
	background-repeat: no-repeat;
	transition: all 600ms ease;
}



/*新手好康*/
.GamestartBox .Dise01 ul li a#newbies {
	background-image: url("../images/index/free-3.png");
	background-repeat: no-repeat;
	transition: all 600ms ease;
	display: block;
}
.GamestartBox .Dise01 ul li a:hover#newbies {
	background-image: url(../images/index/free-32.png);
	background-repeat: no-repeat;
	transition: all 600ms ease;
}


/*攻略*/
.GamestartBox .Dise01 ul li a#gamedate {
	background-image: url("../images/index/free-4.png");
	background-repeat: no-repeat;
	transition: all 600ms ease;
	display: block;
}
.GamestartBox .Dise01 ul li a:hover#gamedate {
	background-image: url(../images/index/free-42.png);
	background-repeat: no-repeat;
	transition: all 600ms ease;
}


/*社群*/
.GamestartBox .Dise01 ul li a#socialmedia {
	background-image: url(../images/index/free-5.png);
	background-repeat: no-repeat;
	transition: all 600ms ease;
	display: block;
}
.GamestartBox .Dise01 ul li a:hover#socialmedia {
	background-image: url(../images/index/free-52.png);
	background-repeat: no-repeat;
	transition: all 600ms ease;
}

/*客服*/
.GamestartBox .Dise01 ul li a#customer {
	background-image: url(../images/index/free-6.png);
	background-repeat: no-repeat;
	transition: all 600ms ease;
	display: block;
}
.GamestartBox .Dise01 ul li a:hover#customer {
	background-image: url(../images/index/free-62.png);
	background-repeat: no-repeat;
	transition: all 600ms ease;
}

/*-------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------*/
/*按扭02*/
.content .Dise02 {
  height: 300px;
  width: 280px;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.content .Dise02 .DiseBtn2{
  height: 140px;
  width: 280px;
	position: relative;
}


/*-------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------*/
/*最新消息*/
.content .news {
  height: 350px;
  width: 500px;
  background-image: url(../images/index/news-bg.png);
  background-repeat: no-repeat;
}

.content .news .news-title {
	height: 50px;
	width: 100%;
	display: block;
	box-sizing: border-box;
  margin: auto;
  padding: 0 5%;
}
.content .news .news-title h3 {
  font-size: 24px;
  line-height: 36px;
  color: #fff;
  float: left;
  height: 36px;
  width: 120px;
  font-weight: 100;
  vertical-align: middle;
  display: block;
  margin: 2% 1% 1% 0%;
  text-align: center;
}
.content .news .news-title .more {
	font-size: 12px;
	line-height: 25px;
	color: #d2b576;
	height: 25px;
	width: 40px;
	border-radius: 20px;
	float: right;
	text-align: center;
	display: block;
	margin: 5% 2% 0 0;
}
.content .news .news-title .more:hover {
	color: #fff;
}
.content .news .news-content {
	display: block;
	height: 250px;
	width: 100%;
	overflow: hidden;
  margin: auto;
  padding: 0 6%;
}
.content .news .news-content li {
	height: 50px;
	padding-right: 10px;
	padding-left: 10px;
	display: block;
	border-bottom: thin dotted #d2b576;
	box-sizing: border-box;
	overflow: hidden;
}
.content .news .news-content li:hover {
	border-bottom-color: #d2b576;
	box-sizing: border-box;
}
.content .news .news-content li:hover .to, .content .news .news-content li:hover .laer, .content .news .news-content li:hover .date {
  color: #fff;
 /* font-weight: bold;
  text-shadow: 1px 1px 2px #fff, 1px 1px 2px #fff, 1px 1px 2px #fff;*/
}
.content .news .news-content li .to {
	font-size: 14px;
	line-height: 50px;
	color: #d2b576;
	float: left;
	width: 12%;
	display:inline-block;
}
.content .news .news-content li .laer {
	font-size: 14px;
	line-height: 50px;
	color: #d2b576;
	float: left;
	height: 50px;
	width: 63%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	display:inline-block;
}
.content .news .news-content li .date {
	font-size: 14px;
	line-height: 50px;
	color: #d2b576;
	text-align: right;
	float: left;
	height: 50px;
	width: 25%;
	display:inline-block;
	overflow:hidden;
}
/*-------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------*/
/*--廣告---*/
.content .adbanner {
	height: 350px;
	width: 700px;
}

/*輪播bn*/
#abgne_fade_pic {
	position: relative;
	height: 350px;
	width: 700px;
}
#abgne_fade_pic a.ad {
	position: absolute;	/* 讓圖片疊在一起 */
}
#abgne_fade_pic .control {
	position: absolute;
	right: 10px;
	bottom: 8px;
}
#abgne_fade_pic .control a {
	display: inline-block;
	width: 10px;
	text-align: center;
	font-size: 0px;
	text-decoration: none;
	background-color: #FFF;
	height: 10px;
	border-radius: 5px;
	color: #FFF;
	margin-right: 5px;
}
#abgne_fade_pic .control a.on {
	background-color: #E18014;
}

/*-------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------*/
/*----職業---*/
.content .job {
	width: 1200px;
	height: 700px;
	/* [disabled]background-color: #FFF;*/
}
#abgne-block-20110111 {
	width: 1200px;
	height: 700px;
	box-sizing: border-box;
  position: relative;
}
#abgne-block-20110111 .info {
	display: none;
	width: 1200px;
	height: 700px;
}
#abgne-block-20110111 .on {
	display: block;
}
#abgne-block-20110111 .title {
	position: absolute;
	z-index: 50;
	left: 35%;
  top: 95%;
  width: 30%;
}
#abgne-block-20110111 .title ul.set {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
  flex-direction: row;
}

#abgne-block-20110111 .title li {
	cursor: pointer;
	width: 68px;
	height: 68px;
	text-align: center;
	text-shadow: -1px -1px rgba(255, 254, 254, 0.3), 2px 3px 2px rgba(30%,30%,36%,0.4);
  float: left;
  margin: 0.7%;
}
#abgne-block-20110111 .title li.on, #abgne-block-20110111 .title li.over {
/*	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #FC0;
	color: #FC0;
	font-weight: bold;
*/
}
#abgne-block-20110111 .title li h3 {
	/* [disabled]font-size: 13px;
*/
	/* [disabled]color: #c90;
*/
	/* [disabled]padding-bottom: 6px;
*/
}
#abgne-block-20110111 .title li p {
	/* [disabled]font-size: 12px;
*/
	/* [disabled]color: #ccc;
*/
}
#abgne-block-20110111 .title li.on h3,
#abgne-block-20110111 .title .over h3,
#abgne-block-20110111 .title li.on p,
#abgne-block-20110111 .title .over p {
	color: #fff;
}
#setli-bg01 {
	background-image: url(../images/index/occ_icon1.png);
	background-repeat: no-repeat;
	width: 68px;
	height: 68px;
}
#abgne-block-20110111 .title li.on_0, #setli-bg01:hover {
	background-image: url(../images/index/occ_icon_active1.png);
	background-repeat: no-repeat;
	background-size: cover;
}
#setli-bg02 {
	background-image: url(../images/index/occ_icon2.png);
	background-repeat: no-repeat;
	width: 68px;
	height: 68px;
}
#abgne-block-20110111 .title li.on_1, #setli-bg02:hover {
	background-image: url(../images/index/occ_icon_active2.png);
	background-repeat: no-repeat;
	background-size: cover;
}

#setli-bg03 {
	background-image: url(../images/index/occ_icon3.png);
	background-repeat: no-repeat;
	width: 68px;
	height: 68px;
}
#abgne-block-20110111 .title li.on_2, #setli-bg03:hover {
	background-image: url(../images/index/occ_icon_active3.png);
	background-repeat: no-repeat;
	background-size: cover;
}
#setli-bg04 {
	background-image: url(../images/index/occ_icon4.png);
	background-repeat: no-repeat;
	width: 68px;
	height: 68px;
}
#abgne-block-20110111 .title li.on_3, #setli-bg04:hover {
	background-image: url(../images/index/occ_icon_active4.png);
	background-repeat: no-repeat;
	background-size: cover;
}

/*-------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------*/


/*-------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------*/


/*-------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------*/
/*---------------------------LOADING------------------------------------------*/

.loading-header {
	display: block;
	height: 100px;
	width: 100%;
}
.loading {
	background-color: rgba(255,255,255,0.6);
	height: 600px;
	width: 1100px;
	margin-right: auto;
	margin-left: auto;
	box-sizing: border-box;
	padding-top: 70px;
	padding-right: 130px;
	padding-bottom: 50px;
	padding-left: 130px;
}
.loading .loading-title {
	text-align: center;
	height: 100px;
	width: 840px;
}
.loading .loading-title h1 {
	/* [disabled]font-family: MHeiHK-Xbold, Arial, "微軟正黑體";
*/
	font-size: 40px;
	display: inline-block;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #3086ae;
	font-weight: bold;
	color: #484848;
	padding-right: 10px;
	padding-left: 10px;
}
.loading .loading-title dd {
	font-family: MHeiHK-Xbold, Arial, "微軟正黑體";
	font-size: 18px;
	color: #484848;
	padding-top: 5px;
}
.loading .loginbox {
	background-color: #fafafa;
	width: 750px;
	margin-bottom: 130px;
	padding-top: 20px;
	padding-right: 0px;
	padding-bottom: 20px;
	padding-left: 0px;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #c3c3c3;
	border-bottom-color: #c3c3c3;
	overflow: hidden;
	box-sizing: border-box;
	margin-right: auto;
	margin-left: auto;
}
.loading .loginbox .sectionL {
	height: auto;
	width: 374px;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #cbcbcb;
	float: left;
	padding-right: 40px;
	padding-left: 40px;
	box-sizing: border-box;
}
.loading .loginbox .sectionR {
	height: auto;
	width: 374px;
	float: left;
	padding-right: 40px;
	padding-left: 40px;
	box-sizing: border-box;
}
.loading .loginbox .sectionL p, .loading .loginbox .sectionR p {
	font-size: 20px;
	color: #000;
	padding-bottom: 10px;
}

/*-------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------*/

input[type="text"], input[type="password"] {
	position: relative;
	height: 40px;
	border: 1px solid #bbb;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background: #fff;
	width: 100%;
	padding-top: 0;
	padding-right: 10px;
	padding-bottom: 0;
	padding-left: 10px;
	margin-bottom: 15px;
}
.loading .loginbox .sectionL .sectionL-box {
	height: 40px;
	display: inline-block;
	float: left;
	width: 50%;
	overflow: hidden;
}
.loading .loginbox .sectionL .err {
	font-size: 14px;
	color: #F00;
	text-align: right;
}


/*-------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------*/

input[type="checkbox"].css-checkbox {
	position: absolute;
	z-index: -1000;
	left: -1000px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	height: 1px;
	width: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
}
input[type="checkbox"].css-checkbox + label.css-label {
	padding-left: 25px;
	height: 15px;
	display: inline-block;
	line-height: 15px;
	background-repeat: no-repeat;
	background-position: 0 0;
	font-size: 14px;
	vertical-align: middle;
	cursor: pointer;
}
input[type="checkbox"].css-checkbox:checked + label.css-label {
	background-position: 0 -15px;
}
label.css-label {
	background-image: url(../images/loading/icn_check.png);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/*-------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------*/
input[type="button"].loginbox-button {
	font-family: "Heiti TC", "微軟正黑體";
	font-size: 16px;
	line-height: 40px;
	text-align: center;
	display: block;
	height: 40px;
	width: 100%;
	border-radius: 3px;
	cursor: pointer;
	border: 0px none;
	font-weight: bold;
}
/*登入*/
input[type="button"].loginbox-button {
	color: #FFF;
	background-color: #ff7700;
}
input[type="button"].loginbox-button:hover {
	background-color: #ff8d2a;
}
/*-------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------*/

.loading .loginbox .sectionL .sectionL-box .finPW {
	font-size: 16px;
	line-height: 40px;
	color: #000;
	cursor: pointer;
}
.loading .loginbox .sectionL .sectionL-box .finPW:hover{
	color: #F00;
}
.loading .loginbox .sectionL .sectionL-box .memJOIN {
	font-size: 16px;
	line-height: 40px;
	color: #39F;
	text-decoration: underline;
	cursor: pointer;
	text-align: right;
	font-family: "Heiti TC", "微軟正黑體";
	font-weight: bold;
	float: right;
}
.loading .loginbox .sectionL .sectionL-box .memJOIN:hover {
	color: #F60;
	text-decoration: underline;
}
.loading .loginbox .sectionR .sectionR-box {
	padding-top: 5px;
}
.loading .loginbox .sectionR .sectionR-box ul li {
	float: left;
	height: 40px;
	width: 40px;
}