@charset "utf-8";
/* Reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}

/* html element */
a{
	text-decoration:none;
}

img{
	vertical-align:middle;
}
.floatLeft{
	float:left;
}
.floatRight{
	float:right;
}

* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

/****************************/
/* 		page framework		*/
/****************************/
body{
	color:#333;
	background-color:#fff;
}
header, #content, footer, #kv{
	position:relative;
}

#kv, #content, footer .center{
	margin:0 auto;
}
header{
	height:105px;
	background-color:#fff;
	width:986px;
	margin: 0 auto -100px;
	/* position: absolute; */
	z-index: 2;
}
header .center{
	position:relative;
}
header .top{
	padding:0 12px;
	position:relative;
	height:60px;
}
header .logo{
	display:block;
	width:175px;
	height:60px;
	background:url(../images/logo.png) no-repeat -12px 0;
	float:left;
}
nav{
	height:45px;
	position:relative;
	z-index:2000;
}
#kv{
	height:592px;
	border-top:4px solid #f49c00;
	top:-119px;

}
#content{
	background-color:#fff;
	padding:12px;
	z-index:3000;
}



/* navigation */
nav ul{
	position:relative;
	height:45px;
}
nav li{
	float:left;
	height:45px;
	margin-right:42px;
	position:relative;
}
nav li .sub{
	border-bottom:3px solid #f49c00;
	left:0;
	position:absolute;
	width:auto;
	background-color:#fff;
	display:none;
}
nav li ul{
	padding:5px 20px;
	width:110px;
	float:left;
	height:auto;
}
nav li li{
	float:none;
	border-left:1px solid #fff;
	height:auto;
	margin-right:0;
	padding:5px 0;
}

/* index */
body.index #content{
	width:963px;
	margin-top:-115px;
}
body.index #kv{
	height:592px;
	overflow:hidden;
	border:0;
	width:100%;
}

/* kv */
#kv .slide li, .gamatour .slide li{
	width:1200px;
	float:left;
}
#kv .frame, .gamatour .frame{
	display: block;
    height: 200px;
    left: 50%;
    margin-left: -600px;
    position: absolute;
    top: 120px;
    width: 1200px;
    z-index:5;
	cursor:pointer;
	background:url(../images/px.png) repeat;/*ＩＥ要有背景才點得到*/
}
#kv .prev, #kv .next, .gamatour .prev, .gamatour .next{
	display:block;
	position:absolute;
	//width:51px;
	height:55px;
	top:240px;
	text-indent:-9999px;
	z-index:10;
}
#kv .prev, .gamatour .prev{
	left:1px;
}
#kv .next, .gamatour .next{
	background-position:right 0;
	right:0;
}
#kv .bgLeft,#kv .bgRight{
	background:url(../img/index/white.png) repeat;
	height:592px;
	width:auto;
	position:absolute;
	top:0;
}
#kv .bgLeft{
	left:0;
}
#kv .bgRight{
	right:0;
}

/* feature */
#feature{
	margin-bottom:30px;
}
#feature li{
	float:left;
	width:231px;
	margin:0 0 0 13px;
}
#feature li .mask{
	background-color:#000;
	height:128px;
	margin-bottom:10px;
	position:relative;
	border-bottom:3px solid #f49c00;
}
#feature li .imgbox{
	background-repeat:no-repeat;
	background-position:0 0;
	width:100%;
	height:100%;
	opacity:0.8;
	filter:alpha(opacity=80);
	position:relative;
	z-index:0;
}
#feature li a{
	display:block;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:10;
	cursor:pointer;
	text-indent:-9999px;
	background:none;
}

#feature li.item1{
	margin-left:0;
}
#feature h2{
	height:23px;
	/*background:url(../images/h2-chs.png) no-repeat 0 0;
	text-indent:-9999px;*/
	color:#484848;
	font-weight:bold;
	font-size:17px;
	padding-left:3px;
}
#feature p{
	color:#707070;
	padding:0 5px 5px;
}

/* product list */
body.list #kv{
	background-position:center 0;
	background-repeat:no-repeat;
}
body.list h1{
	padding:0 0 0 20px;
}
#kv .front{
	height:85px;
	padding-top:216px;
	position:relative;
	margin:0 auto;
	width:986px;
	overflow:visible;
}
#kv .front .kvFront{
	position:absolute;
	right:50px;
	bottom:0;
	z-index:2000;
}
.btn{
	position:absolute;
}
#kv .front .btn{
	left:415px;
	top:190px;
}
#kv .shadow{
	position:relative;
	height:60px;
  	-webkit-box-shadow: 0px 0px 8px 0px #999;
    box-shadow: 0px 0px 8px 0px #999;
	z-index:2005;
	margin:5px auto 0;
}
#breadcrumb{
	text-align:right;
	position:relative;
	z-index:2005;
	font-size:11px;
	-webkit-text-size-adjust: none;
	color:#fff;	
}


#breadcrumb ul{
	background:url(../images/black.png) repeat;
	padding:5px 8px;
}
#breadcrumb ul,#breadcrumb li{
	display:inline;
}
#breadcrumb li{
	margin-left:2px;
}
body.list #content{
	margin-top:-40px;
	width:951px;
	padding:42px 0 20px 35px;
}
#main{
	/*float:left;*/
	width:812px;
	min-height:400px;
	position:relative;
}
aside{
	float:left;
	width:128px;
	padding:0 10px 0 0;
}
aside h3{
	color:#666;
	font-size:16px;
	padding-bottom:5px;
	border-bottom:1px solid #f5f5f5;
	margin-bottom:10px;
}



.action{
	height:35px;
	margin-bottom:10px;
	text-align:center;
}
.action a, a.more{
	display:block;
	float:left;
	width:121px;
	height:35px;
	margin-right:5px;
	text-indent:-9999px;
}
a.official{
	background:url(../images/btn-official.png) no-repeat 0 0;
}
a.official:hover{
	background:url(../images/btn-official-h.png) no-repeat 0 0;
}
a.playnow{
	background:url(../images/btn-playnow.png) no-repeat 0 0;
}
a.playnow:hover{
	background:url(../images/btn-playnow-h.png) no-repeat 0 0;
}

.gamatour, .gamatour .slide li, .gamatour .frame{
	width:460px;
}
.gamatour{
	position:absolute;
	top:93px;
	right:0;
}
.gamatour .slide li{
	position:relative;
}

.gamatour .wrap{overflow:hidden;}

.gamatour .frame{
    height: 290px;
    margin-left:0;
    left: 0;
    cursor:default;
}
.gamatour .prev, .gamatour .next{
	width:34px;
	height:39px;
	background-image:url(../images/prev-next_s.png);
	top:130px;
}
.gamatour .prev{left:-5px;}
.gamatour .next{right:-5px;}


@media screen and (max-device-width :1023px){ /*1023px:可區分ipad/小螢幕及筆電*/
	#kv,body.index #kv,footer{
		width:986px;
	}
}