@charset "utf-8";


/*************************  CSS Document  *************************/
html, body {
	width: 100%;
	height: 100%;
}
body {
	margin: 0;
	padding: 0;
	border: 0;
	background: url(../images/bg.png) repeat;
	background: #FFF;
	font-family: Arial, "微軟正黑體", Verdana, Helvetica, SansSerif;
}
* {
	margin: 0;
	padding: 0;
}
:focus {
	border: 0;
	outline: none;
}
a {
	text-decoration: none;
	outline: none;
}
ul, li {
	list-style: none;
	margin: 0;
	padding: 0;
}
img {
	border: none;
	outline: none;
}
input, select {
	padding: 0;
	border: 0;
	outline: none;
}
button, button:active {
	outline: none;
}
.ex {
	box-shadow: 0 /*{shadow-x}*/ 0 /*{shadow-y}*/ 0 /*{blur radius}*/ 0 /*{spread radius}*/ #000;
	border-radius: 0 /*{左上}*/ 0 /*{右上}*/ 0 /*{右下}*/ 0 /*{左下}*/;
	text-shadow: 0 /*{shadow-x}*/ 0 /*{shadow-y}*/ 0 /*{shadow-radius}*/ #000 /*{shadow-color}*/;
}


/*************** common css ***************/
.text_black, .link_black a, a.link_black {
}
.text_gray, .link_gray a, a.link_gray {
	color: #bfbfbf;
}
.link_gray a:hover, a:hover.link_gray {
	font-weight: bold;
	color: #c80d48;
}
.text_blue, .link_blue a, a.link_blue {
}
.text_orange, .link_orange a, a.link_orange {
}
.text_red, .link_red a, a.link_red {
}


/*************** Page ***************/
.page {
	float: left;
	width: 100%;
	height: auto;
	background: url(../images/page_bg.jpg) no-repeat top center;
}


/*************** Top ***************/
.top {
	width: 100%;
	height: 920px;
	margin: 0px auto;
	position: relative;
	z-index: 0;
}
.top_frame {
	width: 1000px;
	height: 920px;
	margin: 0 auto;
}
.logo {
	display: block;
	float: left;
	width: 320px;
	height: 260px;
	background: url(../images/logo.png) no-repeat;
	margin-left: 478px;
}
.faq {
	display: block;
	float: left;
	width: 130px;
	height: 65px;
	background: url(../images/bt_faq.png) no-repeat;
	margin: 325px 0 0 870px;
}
.menu {
	float: left;
	width: 1000px;
	height: 260px;
	background: url(../images/menu_bg.png) no-repeat;
}
.menu_frame {
	float: left;
	width: 1000px;
	height: 60px;
}
.menu_frame a {
	display: block;
	float: left;
	height: 60px;
}
.menu_bt01 {
	width: 140px;
	background: url(../images/menu_bt01.png) no-repeat;
}
.menu_bt02 {
	width: 140px;
	background: url(../images/menu_bt02.png) no-repeat;
}
.menu_bt03 {
	width: 140px;
	background: url(../images/menu_bt03.png) no-repeat;
}
.menu_bt04 {
	width: 140px;
	background: url(../images/menu_bt04.png) no-repeat;
}
.menu_bt05 {
	width: 140px;
	background: url(../images/menu_bt05.png) no-repeat;
}
.menu_bt06 {
	width: 140px;
	background: url(../images/menu_bt06.png) no-repeat;
}
.fb {
	width: 50px;
	background: url(../images/fb.png) no-repeat;
	margin-left: 5px;
}
.bh {
	width: 50px;
	background: url(../images/bh.png) no-repeat;
}
.gb {
	width: 50px;
	background: url(../images/gb.png) no-repeat;
	margin-right: 5px;
}
.top_info {
	float: left;
	width: 1000px;
	height: 200px;
}
.btn_frame {
	float: left;
	width: 300px;
	height: 150px;
	margin: 25px 10px;
}
a.start {
	float: left;
	width: 300px;
	height: 100px;
	background: url(../images/start.jpg) no-repeat;
}
a.account, a.download {
	float: left;
	width: 150px;
	height: 50px;
}
a.account {
	background: url(../images/account.jpg) no-repeat;
}
a.download {
	background: url(../images/download.jpg) no-repeat;
}
.banner {
	float:left;
	width:360px;
	height:180px;
	background:url(../images/banner_bg.png) no-repeat top center;
	margin: 10px 0;
}
a.media {
	display: block;
	float: left;
	width: 300px;
	height: 150px;
	margin: 25px 10px;
	z-index: 100;
}


/*************** Main ***************/
.main {
	width: 1000px;
	height: auto;
	min-height: 710px;
	margin: 0px auto;
}
.mid {
	float: left;
	width: 1000px;
	height: auto;
}


/*************** Content ***************/
.cont {
	float: left;
	width: 720px;
	height: auto;
}
.cont_info {
	float: left;
	width: 1000px;
	height: auto;
	min-height: 300px;
	margin-top: 40px;
}


/*************** 遊戲特色 ***************/
.ts {
	position: relative;
	height: 570px;
	background: url(../images/ts_bg.jpg) no-repeat center bottom;
	overflow: hidden;
	width: 100%;
}
.ts_lunbo ul {
	position: relative;
}
.ts_lunbo ul li {
	position: relative;
	float: left;
	width: 1903px;
	height: 570px;
	margin: 0 auto;
	background-position: center top;
}
.ts_lunbo h4 {
	width: 350px;
	position: absolute;
	left: 50%;
	margin-left: -600px;
	top: 240px;
	font-size: 73px;
	color: #fff;
	text-align: center;
	font-family: "微軟正黑體";
	text-shadow: 0 /*{shadow-x}*/ 0 /*{shadow-y}*/ 5px /*{shadow-radius}*/ #000 /*{shadow-color}*/;
}
.ts_lunbo h4 span {
	color: #FFF;
}
.ts_lunbo p {
	width: 350px;
	position: absolute;
	left: 50%;
	margin-left: -600px;
	top: 330px;
	color: #fff;
	text-align: center;
	font-size: 18px;
	font-family: "微軟正黑體";
	text-shadow: 0 /*{shadow-x}*/ 0 /*{shadow-y}*/ 5px /*{shadow-radius}*/ #000 /*{shadow-color}*/;
}
.ts_01 {
	background-image: url(../images/ts_01.png);
}
.ts_02 {
	background-image: url(../images/ts_02.png);
}
.ts_03 {
	background-image: url(../images/ts_03.png);
}
.ts_04 {
	background-image: url(../images/ts_04.png);
}
.ts_05 {
	background-image: url(../images/ts_05.png);
}
.ts_06 {
	background-image: url(../images/ts_06.png);
}
.ts_nav {
	position: absolute;
	right: 50%;
	margin-right: -495px;
	top: 10px;
	width: 180px;
	height: 571px;
	z-index: 11;
	background: url(../images/ts_navbg.png) no-repeat center;
	color: #FFF;
	text-align: center;
}
.ts_nav h3 {
	margin-top: 130px;
	margin-bottom: 20px;
	color: #4c4c4c;
	font-size: 30px;
	font-weight: bold;
}
.ts_nav ul li {
	font-size: 16px;
	height: 20px;
	line-height: 20px;
	padding: 10px 0;
	background: url(../images/ts_icon.png) no-repeat 35px center;
	color: #4c4c4c;
	cursor: pointer;
}
.ts_nav ul li.on {
	background: url(../images/ts_icon_on.png) no-repeat left center;
	color: #FFF;
}
.ts_click {
	width: 140px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	font-size: 16px;
	color: #fff;
	position: absolute;
	left: 50%;
	margin-left: -500px;
	top: 370px;
	background: #009fbf;
	overflow: hidden;
	cursor: pointer;
}
.ts_click:before, .ts_click:after {
	-webkit-transition: all .3s; /* Safari 和 Chrome */
	-moz-transition: all .3s; /* Firefox 4 */
	-o-transition: all .3s; /* Opera */
	transition: all .3s;
}
.ts_click:before {
	content: '>';
	height: 30px;
	position: absolute;
	top: 0;
	right: 18px;
	line-height: 30px;
	font-size: 18px;
}
.ts_click:after {
	content: '>';
	height: 30px;
	position: absolute;
	top: 0;
	left: -40px;
	line-height: 30px;
	font-size: 18px;
}
.ts_click:hover:before {
	right: -30px;
}
.ts_click:hover:after {
	left: 18px;
}
.ts_link {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
}


/*************** 職業介紹 ***************/
.zy {
	position: relative;
	height: 590px;
	background: url(../images/zy_bg.jpg) no-repeat center bottom;
	overflow: hidden;
	width: 100%;
}
.zy_lunbo {
	width: 100%;
	margin: 0 auto;
}
.zy_lunbo ul {
	position: relative;
}
.zy_lunbo ul li {
	float: left;
	position: relative;
	background-position: center top;
	width: 16%;
	height: 590px;
	color: #40455c;
	font-family: "微軟正黑體";
	background-repeat: no-repeat;
	background-position: left center;
}
.zy_lunbo ul h4 {
	position: absolute;
	right: 50%;
	margin-right: -150px;
	top: 210px;
	font-size: 78px;
	color: #44869c;
}
.zy_lunbo ul h5 {
	position: absolute;
	right: 50%;
	margin-right: -300px;
	top: 315px;
	font-size: 20px;
	color: #4c4c4c;
}
.zy_lunbo ul h6 {
	width: 460px;
	position: absolute;
	right: 50%;
	margin-right: -460px;
	top: 345px;
	line-height: 25px;
	font-size: 16px;
	color: #4c4c4c;
}
.zy_lunbo ul .ts_click {
	position: absolute;
	left: 50%;
	margin-left: 5px;
	top: 390px;
	margin-top: 20px;
}
.zy .zy_01 {
	background-image: url(../images/zy_01.png);
}
.zy .zy_02 {
	background-image: url(../images/zy_02.png);
}
.zy .zy_03 {
	background-image: url(../images/zy_03.png);
}
.zy .zy_04 {
	background-image: url(../images/zy_04.png);
}
.zy .zy_05 {
	background-image: url(../images/zy_05.png);
}
.zy .zy_06 {
	background-image: url(../images/zy_06.png);
}
.zy .zy_07 {
	background-image: url(../images/zy_07.png);
}
.zy_nav {
	position: absolute;
	left: 50%;
	top: 520px;
	margin-left: -480px;
	width: 1000px;
	height: 60px;
	background: url(../images/zy_navulbg.png) no-repeat center;
	z-index: 11;
}
.zy_nav ul {
	width: 640px;
	height: 2px;
	position: absolute;
	top: 20px;
	left: 180px;
	right: 180px;
	/*background-color: #00b5d9;*/
}
.zy_nav ul li {
	float: left;
	margin-right: 60px;
	padding-top: 25px;
	margin-top: -13px;
	text-align: center;
	width: 40px;
	height: 50px;
	font-size: 16px;
	color: #00b5d9;
	background: url(../images/zy_icon.png) no-repeat center top;
	cursor: pointer;
}
.zy_nav ul li.on {
	background-image: url(../images/zy_icon_on.png);
}
.zy_nav ul li.nomargin {
	margin-right: 0;
}


/*************** 收藏專區 ***************/
.collect {
	width: 100%;
	height: 160px;
	background: url(../images/collect_bg.jpg) no-repeat top center;
	margin: 20px 0;
}
.collect_frame {
	width: 1000px;
	height: 160px;
	margin: 0 auto;
}
.mediaimg {
	display: block;
	width: 190px;
	height: 110px;
}
.mediaplay {
	width: 190px;
	height: 110px;
	background: url(../images/vplay.png) no-repeat;
	position: absolute;
	z-index: 99;
}


/*************** Footer ***************/
.footer {
	float: left;
	width: 100%;
	height: 90px;
	margin-top: 0;
	background: url(../images/footer_bg.png) repeat-x center bottom;
}
ul.footer_frame {
	display: block;
	width: 1000px;
	height: 90px;
	margin: 0 auto;
	font-size: 13px;
	text-align: center;
	color: #bfbfbf;
}
ul.footer_frame li {
	display: block;
	width: 100%;
	line-height: 30px;
}
.back_top {
	position: fixed;
	bottom: 10%;
	right: 2%;
	opacity: .9;
	display: none;
	z-index: 100;
}
.back_top:hover {
	animation: shake 1s linear 0s infinite alternate;
	-webkit-animation: shake 1s linear 0s infinite alternate;
}