@import url("index.css?3");

div{ display: block;}
a{ cursor: pointer; outline: none; display: inline-block;}

body{ font-size: 100%; }

.wrapper{}
.header, .content, .footer, .gamearea, .banner{
	position: relative;
	width: 100%; min-width: 1100px;
}
.headerInfo, .contentInfo, .footerInfo, .gameareaInfo, .bannerInfo{
	position: relative;
	width: 1100px;
	margin: 0px auto;
}


/*****header*****/
.header{
	position: relative; z-index:1;
	background: url(../images/common/header_bg.jpg) repeat-x;

}
.headerInfo{
	padding-top: 18px;  height: 52px;
}




/*****banner*****/
.banner{ height: 350px;}
.bannerInfo{}



/*****gamearea*****/
.gamearea{
	position: relative; z-index: 3;
	background: url(../images/common/gameinfo_bg.jpg) repeat-x;
	height: 154px;
}
.gameareaInfo{}

.gameareaInfo .box{
	position: relative;
	width: 48%;
	float: left; margin-right: 1%;
}
.gameitem{
/*	width: 100%;*/
	position: absolute; top: 0px; left: 0px;
	padding: 0px 0px 0px 0px; margin:0px;
}
.gamearea .title{ position: relative; z-index: 3; margin-top: 2px;}
.gameitem ul{ overflow: hidden; list-style: none; height: 154px;}
.gameitem li{
	position: relative; float: left; cursor: pointer;
	width: 90px; height: 154px;
}
.gameitem li:hover{
	background: url(../images/common/mask_g_bg.png) repeat;
	color: #fff; width: 110px;
}

.gameareaInfo .pointicon div{
	position: absolute; left: 0px; top: -2px;
	width: 22px; height: 22px;
}


.gameitem .txt{
	position: absolute; bottom:  0px; left: -5%; z-index:1;
	width:  110%; height: 22px;
	line-height:  22px; text-align: center; color: #213100; font-family: 微軟正黑體;
	font-size:  12px;
}
.gameitem li:hover .txt{
	color: #fff; font-weight: bold; font-size:  14px;
}

.gameitem .pic{
	position: absolute; top:  50px;
	width:  70px; height: 70px;
}
.gameitem li:hover .pic{
	top:  35px;
	width:  90px; height: 90px;
}
.gameitem .pic img{ width: 100%;}

.gamemobileitem{ margin-left: 25px;}
.gamemobileitem .pic{ left:  10px;}
.gamepcitem{ margin-left: 45px;}
.gamepcitem .pic{
	border: 1px solid #000; left:  8px;
	background: #fff; padding: 1px;
}

.gameallitem{display: none; }

.gameallitem ul{ overflow: hidden; list-style: none; height: auto; padding: 40px 0px;}
.gameallitem li{
	position: relative; float: left; cursor: pointer;
	width: 90px; height: 114px;
}
.gameallitem .txt{
	position: absolute; bottom:  0px; left:  0px; z-index:1;
	width:  100%; height: 22px;
	line-height:  22px; text-align: center; color: #213100; font-family: 微軟正黑體;
	font-size:  12px;
}
.gameallitem .pic{
	position: absolute; top:  10px;
	width:  70px; height: 70px;
}
.gameallitem .pic img{ width: 100%;}

.openbtn{
	position: absolute; z-index:4; cursor: pointer;
	top: 0px; right: 20px;
	background: url(../images/index/index_gameitem_add_icon.png) no-repeat;
	width: 27px; height: 30px;
}
.closebtn{
	position: absolute; z-index:2; cursor: pointer;
	bottom: 0px; right: 20px;
	background: url(../images/index/index_gameitem_up_icon.png) no-repeat;
	width: 27px; height: 30px;
}

.gameallitem{
	position: absolute; top: 0px; left: 0px; z-index: 2;
	padding: 0px 0px 0px 0px; margin:0px;
	background: #FFF;
}
.gameallitem ul{ margin-left: 45px; height: auto;}


/*****content*****/
.content{
	background: url(../images/common/content_bg.jpg) repeat-x;

}
.contentInfo{
	min-height: 500px; overflow: hidden;
	background: url(../images/common/contentInfo_bg.jpg) repeat;
}



/*****footer*****/
.footer{
	height: 70px; margin: 20px 0px;
	background: url(../images/common/footer_bg.jpg) repeat-x;
}
.footerInfo{}
.footerInfo .row{ margin-bottom: 25px; width: 100%; overflow: hidden;}

.linkbox a{
	font-size: 13px; color: #000; line-height: 20px;
	display: inline-block; padding: 0px 5px;
	text-decoration: none;
}
.linkbox a:hover{
	background: #FF8300; color: #fff;
}
.copyright{ font-size: 12px; color: #66666a; line-height: 16px;}

.link2box a{
	font-size: 12px; color:#FF8300; padding: 0px 5px; display: inline-block; line-height: 16px;
}
.footerInfo .row span{ display: inline-block; float: left;}
.footerInfo .row .linkbox, .footerInfo .row .pic-r{ float: right;}


/*****header-loginbox*****/
.logo{
	background: url(../images/common/logo.png) no-repeat;
	width: 136px; height: 32px;
	margin-right: 50px; float: left;
}

.gamelink, .recreationlink{
	position: relative; height: 35px;
	font-size: 13px; color: #000; font-weight: bold; float:left; cursor: pointer;
	padding-right: 12px; margin-left: 20px; margin-top: 10px; vertical-align: top;
	background: url(../images/common/arrow_01_icon.png) no-repeat;
	background-position: top right;
}
.gamelink:hover, .recreationlink:hover{
	background: url(../images/common/arrow_02_icon.png) no-repeat;
	background-position: top right;
}


.gamelink ul, .recreationlink ul{
	position: absolute; top: 20px; left: 50%; margin-left: -40px;
	width: 55px;
	list-style: none;
	padding: 15px 15px;
	background: #FFF;
	border: 1px solid #FF8300;
	display: none;
}
.gamelink:hover ul, .recreationlink:hover ul{ display: block;}
.gamelink li, .recreationlink li{ width: 100%;}
.gamelink li a, .recreationlink li a{ font-size: 12px; color: #a4a4a4; line-height: 20px;font-family: Microsoft JhengHei;}
.gamelink li:hover a, .recreationlink li:hover a{ color: #FF8300;}

.loginbox{
	width: 500px;
 	margin-left: 150px;  margin-top: 8px;
	display: inline-block;  float:left;
	overflow: hidden;
}
.loginbox .box{ float: left; margin-right: 20px;}
.loginbox span{ display: inline-block;}
.loginbox .txt{
	font-size: 13px; color: #000; line-height: 18px;
}
.loginbox .txt2{
	font-size: 12px; color: #a4a4a4; line-height: 20px;
}

.inputaccountID, .inputpassword{
	border: 1px solid #000;
	width: 138px; height: 18px;
}
.loginbtn{
	font-size: 13px; color: #fff; line-height: 18px;
	background: #8abd1d;
	height: 20px; padding: 0px 5px; *margin-left: 5px;
}
.loginbtn:hover{ color: #030;}

.inputremember{ margin: 3px; *margin-top: 0px;}

.savevaluebtn{
	font-size: 13px; color: #8abd1d; line-height: 16px;
	border: 1px solid #a4a4a4;
	height: 16px; padding: 0px 5px;
}
.savevaluebtn:hover{
	 color: #a4a4a4;
}


/*****site*****/
.pointicon{
	position: relative; display: inline-block; width: 22px; height: 22px;
}
.pointicon div{
	position: absolute; left: 0px; top: -2px;
	width: 22px; height: 22px;
}

.pointicon .infoN{
	background: url(../images/common/label_n_icon.png) no-repeat;
}
.pointicon .infoH{
	background: url(../images/common/label_h_icon.png) no-repeat;
}





.bx-wrapper {
	position: relative;
	margin: 0 auto 60px;
	padding: 0;
	*zoom: 1;
	height: 355px;
}
.slider{ display:block; position: absolute; width: 100%; height: 100%; top: 0px; left:0px; overflow: hidden;}
.slider .pic{
	position: absolute; width: 100%; height: 100%; height:355px;
	background-position: top center; background-repeat: no-repeat;
}
.slider .pic img{ display: none;}

.slder-l-btn, .slder-r-btn{
	position: absolute; top: 50%; margin-top: -24px;
	width: 24px; height: 47px;
	display: inline-block; cursor: pointer;
}
.slder-l-btn{
	left: 50px;
	background: url(../images/common/banner_lside_arrow.png) no-repeat;
}
.slder-r-btn{
	right: 50px;
	background: url(../images/common/banner_rside_arrow.png) no-repeat;
}
.slder-l-btn:hover, .slder-r-btn:hover{ opacity: 0.5;}
/** THEME
===================================*/

.bx-wrapper .bx-viewport {

	background: #fff; height: 355px;

	/*fix other elements on the page moving (on Chrome)*/
	-webkit-transform: translatez(0);
	-moz-transform: translatez(0);
    	-ms-transform: translatez(0);
    	-o-transform: translatez(0);
    	transform: translatez(0);
}

.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
	position: absolute;
	bottom: -30px;
	width: 100%;
}

/* LOADER */

.bx-wrapper .bx-loading {
	min-height: 50px;
	background: url(images/bx_loader.gif) center center no-repeat #fff;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2000;
}

/* PAGER */

.bx-wrapper .bx-pager {
	text-align: center;
	font-size: .85em;
	font-family: Arial;
	font-weight: bold;
	color: #666;
	padding-top: 20px;
}

.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
	display: inline-block;
	*zoom: 1;
	*display: inline;
}

.bx-wrapper .bx-pager.bx-default-pager a {
	background: #666;
	text-indent: -9999px;
	display: block;
	width: 10px;
	height: 10px;
	margin: 0 5px;
	outline: 0;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
	background: #000;
}

/* DIRECTION CONTROLS (NEXT / PREV) */

.bx-wrapper .bx-prev {
	left: 10px;
	background: url(../images/common/banner_lside_arrow.png) no-repeat;
}

.bx-wrapper .bx-next {
	right: 10px;
	background: url(../images/common/banner_rside_arrow.png) no-repeat;
}

.bx-wrapper .bx-prev:hover {
	background-position: 0 0;
}

.bx-wrapper .bx-next:hover {
	background-position: -43px 0;
}

.bx-wrapper .bx-controls-direction a {
	position: absolute;
	top: 50%;
	margin-top: -16px;
	outline: 0;
	width: 32px;
	height: 32px;
	text-indent: -9999px;
	z-index: 9999;
}

.bx-wrapper .bx-controls-direction a.disabled {
	display: none;
}

.bx-wrapper .bx-controls-auto {
	text-align: center;
}

.bx-wrapper .bx-controls-auto .bx-start {
	display: block;
	text-indent: -9999px;
	width: 10px;
	height: 11px;
	outline: 0;
	margin: 0 3px;
}

.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active {
	background-position: -86px 0;
}

.bx-wrapper .bx-controls-auto .bx-stop {
	display: block;
	text-indent: -9999px;
	width: 9px;
	height: 11px;
	outline: 0;
	margin: 0 3px;
}

.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active {
	background-position: -86px -33px;
}
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
	text-align: left;
	width: 80%;
}

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
	right: 0;
	width: 35px;
}
.bx-wrapper .bx-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	background: #666\9;
	background: rgba(80, 80, 80, 0.75);
	width: 100%;
}

.bx-wrapper .bx-caption span {
	color: #fff;
	font-family: Arial;
	display: block;
	font-size: .85em;
	padding: 10px;
}




.easy-select-box{
    display: inline-block;
    position: relative;
}

.easy-select-box .esb-dropdown{
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 99;
	display: none;
}

/*次要可修*/
.easy-select-box{
    width: 154px;
    text-align: left;
    color: #0c2245;
    outline: none;
}



.easy-select-box .esb-displayer{
	background: url(../images/bg-select-1.jpg) no-repeat 0 0;
	color: #0c2245;
	padding: 0 5px;
	height: 22px;
	line-height: 22px;
	cursor: default;
	padding-right: 20px;
}



.esb-dropdown{
    border: 1px solid #cccccc;
    border-top: none;
}

.easy-select-box:hover .esb-displayer{
    background-position: 0 -23px;
    text-decoration: none;
}



.easy-select-box .esb-dropdown .esb-item{
    padding: 0 5px;
    background: #FFFFFF;
    color: #0c2245;
    cursor: default;
}


.easy-select-box .esb-dropdown .esb-item:hover{
	background: #737373;
	color: #FFFFFF;
	text-decoration: none;
}