@charset "utf-8";
body {
	margin:0px;
	padding:0px;
	width:100%;
	min-width:1000px;
	max-width:2526px;	
	height:100%;
	background-color: #F6F6F6;
	background-image: url(../images/bg_beveled.png);
	overflow-x:hidden;
}
* {
	margin:0px;
	padding:0px;
	outline:none;
	text-decoration: none;
	font-family: "微軟正黑體";
	
}

img {
	outline:none;
	border:none;
}

.redColor{color:#b70000;}

/*----hander------*/
.fb-like-box {
background:#fff;}

.hander {
	height:100px;
	width:100%;
	background-image:url(../images/top_bg.png);
	background-color:#E6E6E6;
	background-position:center;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #000;
	*z-index:10;
}

.hander > div {
	width:1000px;
	height:100px;
	margin:0px auto 0px auto;
	position:relative;
}

.hander > div > span {
	display:block;
	width:450px;
	height:50px;
	float: left;
	position:absolute;
	top:40px;
	left:430px;
}

.hander > div > span > a {
	display: inline-block;
	margin-right: 25px;
	border-left-width: 8px;
	border-left-style: solid;
	border-left-color: #F39;
	padding-left: 5px;
}

.hander > div > span > a > b{
	color:#000;
	font-size:18px;
	font-weight: bold;
	font-family: "微軟正黑體";
	letter-spacing: 4px;
	transition:All .3s ease;
	-webkit-transition:All .3s ease;
	-moz-transition:All .3s ease;
	-o-transition:All .3s ease;	
}
.hander > div > span > a:hover > b {
	color:#F39;
}
.hander > div > span > a > p{
	color:#999;
	font-size:14px;
	font-weight: bold;
	font-family: "微軟正黑體";
	letter-spacing: 4px;
	
	text-align: left;
	transition:All .3s ease;
	-webkit-transition:All .3s ease;
	-moz-transition:All .3s ease;
	-o-transition:All .3s ease;	
}

.hander > div > span > a:hover > p {
	color:#FFF;
	background-color: #F39;
	text-align: center;
}

.go_mobile {
	position:absolute;
	right:60px;
	top:5px;
	z-index:100;
	transition:All .3s ease;
	-webkit-transition:All .3s ease;
	-moz-transition:All .3s ease;
	-o-transition:All .3s ease;	
}
.go_mobile:hover {
	top:15px;
}
/*----//hander------*/

/*-----show_box-----*/

.show_box {
	width:100%;
	height:356px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #FFF;
	*z-index:9;
	overflow:hidden;
}
.show_box > div {
	width:100%;
	height:330px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #000;
	overflow:hidden;
	position:relative;
	background-color:#000;
}

.box {
	position:relative;
}

.box > a {
	position:absolute;
	width:850px;
	height:330px;
	top:0px;
	left:50%;
	margin-left:-425px;
/*	z-index:10;*/
}
 

/*
.box > a+a {
	margin-left:425px;
	z-index:9;
}

*/


	/*這個是最後一張圖*/
	
/*		
.box > a+a+a+a {
	margin-left:-1275px;
	z-index:9;
}


*/
	/*這個是最後一張圖*/
	
	
.box > a > img {
	width:850px;
	height:330px;
}



.show_box > div > span {
	display:block;
	position:absolute;
	width:850px;
	height:330px;
	right:50%;
	margin-right:425px;
	margin-right:424px\9;
	background-image:url(../images/show_box/black_bg_l.png);
	background-position: right 0px;
	z-index:11;
	


}


.show_box > div > span a {
	display:block;
	background-image:url(../images/show_box/go_l.png);
	position:absolute;
	top:130px;
	right:10px;
	height: 60px;
	width: 60px;
	cursor:pointer;
	text-indent: -10000px;
	opacity: 0.5;
	transition:All .5s ease;
	-webkit-transition:All .5s ease;
	-moz-transition:All .5s ease;
	-o-transition:All .5s ease;
}

.show_box:hover > div > span >a {
	opacity: 1;
}

.show_box > div > span+span {
	display:block;
	position:absolute;
	width:850px;
	height:330px;
	right:50%;
	margin-right:-1275px;
	background-image:url(../images/show_box/black_bg_r.png);
	background-position: left 0px;
	

}

.show_box > div > span+span >a {
	display:block;
	background-image:url(../images/show_box/go_r.png);
	position:absolute;
	top:130px;
	left:5px;
	height: 60px;
	width: 60px;
}


.show_box > span {
	display:block;
	background-color:#FFF;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
	width:100%;
	height:23px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #CCC;
}



/*-----//show_box-----*/


/*-----content-----*/

.content {
	width:100%;
	
}
.content > div {
	min-height:1000px;
	background-color:#F8F8F8;
	width:1000px;
	margin:auto;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: ridge;
	border-right-style: ridge;
	border-bottom-style: ridge;
	border-left-style: ridge;
	border-top-color: #FFF;
	border-right-color: #CCC;
	border-bottom-color: #CCC;
	border-left-color: #CCC;
	position:relative;
}

.game_list {
	width:100%;
	height:580px;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #FFF;
	border-bottom-color: #CCC;
	position:relative;
}

.icon {
	width:230px;
	height:350px;
	background-image:url(../images/game_icon_bg.png);
	background-repeat:no-repeat;
	position:absolute;
	top:0px;
	left:68px;
}

.icon > a {
	width:160px;
	height:160px;
	display:block;
	margin:10px auto;
}


.icon > a > img {
	width:160px;
	height:160px;
}

.icon > b {
	width:92%;
	margin-left:4%;
	display:block;
	height:40px;
	font-size:19px;
	text-align: center;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
	padding-bottom: 8px;
}
.icon > div {
	width:92%;
	margin-left:4%;
	padding-bottom:10px;
	display:block;
	height:60px;
	background-color:#FFF;
}

.game_list > span {
	display:block;
	width:560px;
	height:115px;
	position:absolute;
	top:350px;
	left:90px;
}

.game_list > span > p {
	font-size:13px;
	color:#666;
	line-height: 26px;
	margin-right:150px
}

.more {
	display:block;
	float:right;
	width:80px;
	height:20px;
	background-image:url(../images/more.png);
	transition:All .5s ease;
	-webkit-transition:All .5s ease;
	-moz-transition:All .5s ease;
	-o-transition:All .5s ease;
	margin-left: 25px;
}

.more:hover{
	opacity: .7;
	padding-right: 25px;
	margin-left: 0px;
}

.my_list {
	width:65px;
	height:250px;
	background-image:url(../images/game_list.png);
	position:absolute;
	top:50px;
	left:0px;
}

.my_list_fixed {
	position:fixed;
	width:65px;
	height:250px;
	left:50%;
	margin-left:-500px;
	top:100px;
	z-index:100;
	display:block;
	background-image:url(../images/game_list.png);
}

.game_pic {
	display:block;
	position:absolute;
	width:630px;
	height:285px;
	background-color:#F39;
	right:68px;
	top:25px;
	border: 2px solid #FFF;
}

.game_pic > img {
	width:630px;
	height:285px;
}

.qrcode {
	position:absolute;
	bottom:43px;
	left:520px;
}


 .qrcode >a{
	display:inline-block;
	width:140px;
	height:180px;
	position:relative;
	margin:0px;
	padding: 0px;
	float: left;
	bottom: 0px;	
	transition:All .3s ease;
	-webkit-transition:All .3s ease;
	-moz-transition:All .3s ease;
	-o-transition:All .3s ease;	
}

.qrcode >a:hover {
	bottom: 15px;

}

.qr_google {
	background-image:url(../images/game/qr_google.png);
}
.qr_apple {
	background-image:url(../images/game/qr_apple.png);
}

.qr_apk {
	background-image:url(../images/game/qr_apk.png);
}

.qrcode > a > img {
	position:absolute;
	bottom:30px;
	left:28px;
}



/*-----//content-----*/



/*-------footer------*/
.footer {
	height:60px;
	width:100%;
	max-width:2526px;
	background-image:url(../images/footer_bg.png);
	background-repeat:repeat-x;
	background-color:#FFF;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #FFF;
	padding-top:30px;
}

.footer > p {
	text-align: center;
	font-size:12px;
	line-height:20px;
}



/*-------//footer------*/


/*----浮動標籤區域-------*/

.gotop {
	position:fixed;
	width: 75px;
	height: 95px;
	left:50%;
	margin-left:465px;
	bottom:90px;
	cursor:pointer;
	display:none;
	background-image:url(../images/go_top.png);
	transition:All .5s ease;
	-webkit-transition:All .5s ease;
	-moz-transition:All .5s ease;
	-o-transition:All .5s ease;
}
.gotop:hover {
	background-image:url(../images/go_top_2.png);
}



/*------//浮動標籤區域-------*/


/*-----------裡面是info頁----------------------------------*/


.game_introduce {
	width:100%;
	height:312px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
}

.game_introduce > img {
	width:246px;
	left:246px;
	margin:25px 0px 0px 65px;
	float:left;
}

.game_introduce > div {
	width:610px;
	height:300px;
	float:right;
	margin-right:65px;
}

.game_introduce > div > b {
	font-size:30px;
	display:block;
	height:70px;
	line-height:100px;
	width:100%;
	border-bottom:solid 1px #CCC;
}

.game_norm {
	width:100%;
	height:80px;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #FFF;
	border-bottom-color: #CCC;
}

.game_norm > p {
	font-size:12px;
	line-height:22px;
	width:300px;
	display:block;
	height:80px;
	float:left;
}

.game_fb {
	width:100%;
	height:55px;
	padding-top:5px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #FFF;
}

.download a {
	opacity: 1;
	transition:All .3s ease;
	-webkit-transition:All .3s ease;
	-moz-transition:All .3s ease;
	-o-transition:All .3s ease;	
}
.download a:hover {
	opacity: .7;

}

/**/
.game_screenshot {
	width:100%;
	border-top:solid 1px #FFF;
	height:300px;
}

.game_screenshot > div {
	width:860px;
	height:235px;
	border:solid 5px #FFF;
	margin:30px auto 0px auto;
	overflow:hidden;
	-moz-box-shadow:0px 0px 5px #CCC;
	-webkit-box-shadow:0px 0px 5px #CCC;
	box-shadow:0px 0px 5px #CCC;
}

.game_screenshot > div > div {
	width:1800px;
}

.game_screenshot > div > div > img {
	width:auto;
	height:235px;
	float:left;
	margin-right:5px;
	cursor:pointer;
	display: block;
}




/*這裡是點擊圖片後*/

.game_screenshot_click {
	height: 100%;
	width: 100%;
	left: 0px;
	top: 0px;
	z-index: 101;
}
.game_screenshot_click > div {
	position: absolute;
	width: 100%;
	top: 0px;
	left: 0px;
	margin: 0px;
	padding: 0px;
	z-index: 109;
}

.game_screenshot_click > div > div {
	position: relative;
}

.game_screenshot_click > div > div > img {
	top: 5%;
	left: 50%;
	right: auto;
	width:auto;
	max-width: 1000px;
	max-height: 70%;
	height:auto;
	margin:auto;
	cursor:pointer;
	display: block;
	z-index: 120;
	position: fixed;
	-moz-box-shadow:0px 0px 15px #000000;
	-webkit-box-shadow:0px 0px 15px #000000;
	box-shadow:0px 0px 15px #000000;	

}
.game_screenshot > div > div > img {
	transition:All .5s ease;
	-webkit-transition:All .5s ease;
	-moz-transition:All .5s ease;
	-o-transition:All .5s ease;
	transform: scale(1);
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);

}
.game_screenshot > div > div > img:hover{
	transform: scale(1.05);
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);
	-o-transform: scale(1.05);
	-ms-transform: scale(1.05);
	-moz-box-shadow:0px 0px 5px #000000;
	-webkit-box-shadow:0px 0px 5px #000000;
	box-shadow:0px 0px 5px #000000;
	border: solid 5px #FFF;
	margin-right: 10px;
}

.game_screenshot_click > div > div > img+img {
	display: none;
}

.game_screenshot > span {
	display: none;
	
}

.clo {
	position: fixed;
	display:none;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	background-color: rgba(0,0,0,.5);
	z-index: 100;
}
.game_screenshot_click > span {
	display:block;
	height: 60px;
	width: 60px;
	z-index: 121;

}

.goto_l {
	position: fixed;
	display:block;
	left: 10%;
	top: 40%;	
}
.goto_r {
	display:block;
	position: fixed;
	right: 10%;
	top: 40%;
	margin-right: -6px;
}

.goto_l > a {
	background-image:url(../images/show_box/go_l.png);
	height: 60px;
	width: 60px;
	text-indent:-100000px;
	cursor: pointer;
	z-index: 121;
	display:block;
	position: absolute;
}

.goto_r > a {	
	background-image:url(../images/show_box/go_r.png);
	height: 60px;
	width: 60px;
	cursor:pointer;
	text-indent: -100000px;
	z-index: 121;
	display:block;
	position: absolute;	
}



/*
.game_screenshot_click > span > img {
	position: fixed;
	display:block;
	left: 10%;
	top: 40%;
	cursor: pointer;
	z-index: 121;

}

.game_screenshot_click > span > img+img {
	position: fixed;
	display:block;
	margin-right: -7px;
	left: auto;
	right: 10%;
	top: 40%;
	cursor: pointer;

}
*/



/*---//這裡是點擊圖片後*/
.game_detail {
	width:870px;
	margin:auto;
	background-color:#FFF;
	border:1px solid #E6E6E6;
	min-height:500px;
	padding-bottom:50px;
	position:relative;
}


.game_detail > iframe {
	display:block;
	width:640px;
	height:360px;
	margin:50px auto 30px auto;
	background-color:#CCC;
	z-index: 10;
}


.game_detail hr {
	width:100%;
	border-bottom-width: 1px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-bottom-color: #CCC;
	margin-bottom:30px;
	margin-top:30px;
	display:block;
}

.game_detail p {
	font-size:13px;
	width:86%;
	padding:0px 7% 0px 7%;
	line-height:24px;
}

.game_detail h1 {
	font-size:30px;
	color:#F39;
	margin-left:10px;
	margin-top:20px;
	margin-bottom:10px;
}

.game_detail h2 {
	font-size:16px;
	color:#FFF;
	margin-left:60px;
	margin-top:20px;
	margin-bottom:10px;
	background-color:#F39;
	padding:2px 10px 2px 10px;
	display:inline-block;
}

.game_detail ul {
	margin-left:100px;
	font-size:13px;
}
.game_detail ul li {
	font-size:13px;
	line-height:24px;
}


.game_cr {
	width:100%;
	margin-top:10px;
	margin-bottom:10px;
	text-align:center;
}

.golist {
	position:absolute;
	right:0px;
	margin-right:-50px;
	top:30px;
	cursor:pointer;

}

.golist_fixed {
	position:fixed;
	left:50%;
	margin-left:435px;
	top:325px;
	cursor:pointer;

}
.golist:hover,.golist_fixed:hover {
	opacity: .7;

	-webkit-transition:All .3s ease;
	-moz-transition:All .3s ease;
	-o-transition:All .3s ease;	
}
/*
.fixed_man {
	position: fixed;
	width: 60%;
	height: 0px;
	left: 50%;
	padding-bottom: 50%;
	margin-left: -30%;
	top: 5%;
	background-image:url(../images/game/play/play_05.png);
	background-repeat: no-repeat;
	background-size: 100%;
	background-color: #000;
	background-position: center center;
	z-index: 110;
}
*/

/*----------------//裡面是info頁-----------------------------*/

/*-----畫面小於1024顯示------*/

@media screen and (max-width:1050px){ 
body {
	margin:0px;
	padding:0px;
	width:100%;
	min-width:1050px;
	height:100%;
	background-color: #F6F6F6;
	background-image: url(../images/bg_beveled.png);
/*	overflow: visible  hidden;*/
	overflow-x:visible;
}


.show_box > div > span {
	display:block;
	position:absolute;
	width:100px !important;
	height:330px;
	right:auto;
	left:0px;
	margin-right:425px;
	background-image:url(../images/show_box/black_bg_l.png);
	background-position: right 0px;
	z-index:11;
}

.show_box > div > span+span {
	display:block;
	position:absolute;
	height:330px;
	left:auto;
	right:0px;
	margin-left:0px;
	margin-right:0px;
	background-image:url(../images/show_box/black_bg_r.png);
	background-position: left 0px;
}



.gotop {
	position:fixed;
	right:0%;
	left:auto;
	margin-left:0px;
	bottom:90px;
	cursor:pointer;
}




}


/*-----//畫面小於1024顯示------*/