/*
 * w2001 - jnp iweb11
 * http://jnp.com.tw
 *
 * Copyright 2013, Evelyn Wang
 * 
 * 
 * December 2013
 */


/*-----------------------------------------------------------------------------
 [TABLE OF CONTENTS]
    +common
        =anchor
        =clear,clearfix
        =banner
    +header
        =cis
        =site-func
        =share-func
        =nav
    +content
        +content-main
        +content-sidebar
    +footer
        =footer-link
        =company-info
-----------------------------------------------------------------------------*/

/* +common
*----------------------------------------------------------------------------*/

* {
    margin: 0;
    padding: 0;
}

body {
	margin:0;
	color: #919191;
	font-size: 14px;
}

div, h1, h2, h3, h4, h5, h6, hr, p, form, label, input, textarea, img, span, ul, li {
	text-align: left;
	vertical-align: middle;
	margin: 0;
	padding: 0;
	word-wrap: normal;
	word-break: normal;
	border-width: 0;
	font-family: "微軟正黑體", "蘋果儷中黑", "Lucida Grande", "Arial", "Arial Narrow";
}

hr {
	noshade:noshade;
}

th {
	font-weight: normal;
}

ul, li {
	list-style: none;
}

/**
*
* =anchor
*
**/

a:link, a:visited {
	color: #FF6BA0;
	font-weight: normal;
	text-decoration: none;
}

a:hover {
	color: #900;
	text-decoration: none;
}

/**
*
* =clear,clearfix
*
**/

/* regular clearing apply to column that should drop below previous ones. */
.clear {
    clear: both;
}

/* this needs to be first because FF3 is now supporting this */
.clearfix {
    display: inline-block;
}

/* clearing floats without extra markup */
.clearfix:after {
    display: block;
    visibility: hidden;
    clear: both;
    height: 0;
    font-size: 0;
    content: ".";
}

/* hides from IE-mac \*/
* html .clearfix {
    height: 1%;
}
.clearfix {
    display: block;
}
/* end hide from IE-mac */


/* +header
*----------------------------------------------------------------------------*/
#header {
	width: 100%;
	height: 214px;
	background: url(../images/all/bg-header.jpg) #000 repeat-x 0 0;
	overflow: hidden;
	position: relative;
}

#header .logoWrap {
	width: 100%;
	height: 170px;
	overflow: hidden;
}

#header .logoWrap .wrap {
	margin: 0 auto;
	width: 960px;
	height: 170px;
	overflow: hidden;
	position: relative;
}
/**
*
* =cis
*
**/
#header .logoWrap .wrap #cis {
	width: 325px;
	height: 170px;
	position: absolute;
	z-index: 50;
	top: 0px;
	left: 0;
}
#header .logoWrap .wrap #cis h2 a {
	display: block;
	width: 325px;
	height: 170px;
	background: url(../images/all/logo.png) no-repeat 0 0;
	text-indent: -999999px;
	}
/**
*
* =cis(原本flash檔)
*
**/
/*
#header .logoWrap .wrap #cis {
	width: 425px;
	height: 95px;
	position: absolute;
	z-index: 50;
	top: 35px;
	left: 0;
}

#header .logoWrap .wrap #cis #flash {
	width: 425px;
	height: 95px;
}

#header .logoWrap .wrap #cis #flash h2 a {
	width: 425px;
	height: 95px;
	background: url(../images/all/logo.png) no-repeat 0 0;
	display: block;
	text-indent: -999999px;
}
*/

/**
*
* =call
*
**/
#header .logoWrap .wrap .call {
	width: 300px;
	height: 80px;
	position: absolute;
	z-index: 50;
	top: 75px;
	right: 10px;
	background: url(../images/all/img-call.gif) no-repeat 0 0;
	text-indent: -999999px;
}


/**
*
* =login
*
**/
#header #login {
	position: absolute;
	top: 60px;
	z-index: 100;
	right: 0;
}

#header #login ul li {
	float: left;
	text-align: center;
	margin: 0 10px;
	background: url(../images/all/btn_promo.png) no-repeat;
	width: 100px;
	height: 48px;
}

#header #login ul li a.member,
#header #login ul li a.point {
    color: #fff;
    font-size: 16px;
    line-height: 24px;
}

#header #login ul li a.member:hover,
#header #login ul li a.point:hover  {
	color: #ece061;
}



/**
*
* =nav
*
**/
#header #nav {
	width: 635px;
	position: absolute;
	bottom: 30px;
	z-index: 100;
	right: 0;
}

#header #nav h3 {
	display: none;
}

#header #nav ul {
	margin: 0 auto;
	overflow: hidden;
	padding-left: 185px;
}

#header #nav ul li {
	width: 90px;
	float: left;
	text-align: center;
}

#header #nav ul li a.home ,
#header #nav ul li a.games ,
#header #nav ul li a.download ,
#header #nav ul li a.events ,
#header #nav ul li.last a.service {
	color: #fff;
	font-size: 16px;
}

#header #nav ul li a.home:hover ,
#header #nav ul li a.games:hover ,
#header #nav ul li a.download:hover ,
#header #nav ul li a.events:hover ,
#header #nav ul li.last a.service:hover {
	color: #ece061;
}

/*
#header #nav ul li.last {
	margin: 0;
}*/
#header #nav ul li.last a.service {
	width: 130px;
	background-position: -830px 0;
}
#header #nav ul li.last a.service:hover {
	background-position: -830px -55px;
}

#header .seo {
	padding-top: 10px;
	color: #fff;
}


/* +banner
*----------------------------------------------------------------------------*/
#bannerWrap {
	width: 100%;
	background: #000;
	overflow: hidden;
}

#bannerWrap .wrap {
	margin: 0 auto;
}

#bannerWrap .wrap .functionWrap #callCenter {
	background: url(../images/member/icon-callCenterIndex.gif) no-repeat 0 0;
}

#bannerWrap .wrap .functionWrap #member {
	background: url(../images/all/bg-memberIndex.png) no-repeat 0 0;
}

#bannerWrap .wrap .functionWrap #member #memberBox #point a {
	background: url(../images/index/icon-points.gif) no-repeat 0 0;
}

/**
*
* =banner
*
**/
#bannerWrap .wrap #banner ,
#bannerWrap .wrap #banner ul {
	width: 960px;
	height: 300px;
	overflow: hidden;
}

#bannerWrap .wrap #banner ul li {
	width: 960px;
	height: 300px;
	float: left;
}

.contetWrap .content #sidebar #pointS a {
	margin: 15px 0 10px;
	background: url(../images/index/icon-point.png) no-repeat 0 0;
}


/* +bannerAD
*----------------------------------------------------------------------------*/
#bannerWrap .wrap #bannerAD {
	overflow: hidden;
	position: relative;
}
#bannerWrap .wrap #bannerAD .bannerbox {
	position: absolute;
	z-index: 100;
	top: 8px;
	}
#bannerWrap .wrap #bannerAD ul {
	overflow: hidden;
}

#bannerWrap .wrap #bannerAD ul li {
	float: left;
	overflow: hidden;
}

#bannerWrap .wrap #bannerAD ul li img {
	max-width: 100%;
	height: auto;
}

#bannerWrap .wrap #bannerAD .pager {
	width: 960px;
	position: absolute;
	bottom: 0;
	z-index: 1000;
	text-align: right;
	margin: 0 auto;
}

#bannerWrap .wrap #bannerAD .pager a ,
#bannerWrap .wrap #bannerAD .pager a.active {
	margin-left: 5px;
	width: 20px;
	height: 20px;
	background: #000;
	display: inline-block;
	line-height: 20px;
	font-weight: 900;
	text-align: center;
	color: #fff;
}

#bannerWrap .wrap #bannerAD .pager a:hover ,
#bannerWrap .wrap #bannerAD .pager a.active {
	background: #FFBF38;
	color: #000;
}




/* +memberWrap
*----------------------------------------------------------------------------*/
#bannerWrap .wrap .functionWrap {
	width: 310px;
	position: absolute;
	z-index: 10;
	bottom: 0;
}

/**
*
* =callCenter
*
**/
#bannerWrap .wrap .functionWrap #callCenter ,
.contetWrap .content #sidebar #callCenter {
	margin: 0 0 3px;
	width: 335px;
	height: 100px;
	background: url(../images/member/icon-callCenter.gif) no-repeat 0 0;
	text-indent: -999999px;
}

/**
*
* =member
*
**/
#bannerWrap .wrap .functionWrap #member ,
.contetWrap .content #sidebar #member {
	width: 310px;
	background: url(../images/all/bg-memberIndex.png) no-repeat 0 0;
	overflow: hidden;
	margin: 15px 0 0;
}

/**
*
* =login
*
**/
#bannerWrap .wrap .functionWrap #member #memberLogin ,
.contetWrap .content #sidebar #member #memberLogin ,
#bannerWrap .wrap .functionWrap #member #memberBox ,
.contetWrap .content #sidebar #member #memberBox {
	overflow: hidden;
}

#bannerWrap .wrap .functionWrap #member #memberLogin h3 ,
.contetWrap .content #sidebar #member #memberLogin h3 {
	display: none;
}

#bannerWrap .wrap .functionWrap #member #memberLogin .login ,
.contetWrap .content #sidebar #member #memberLogin .login {
	margin: 70px 10px 10px 10px;
}

#bannerWrap .wrap .functionWrap #member #memberLogin .login fieldset ,
.contetWrap .content #sidebar #member #memberLogin .login fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

#bannerWrap .wrap .functionWrap #member #memberLogin .login fieldset p ,
.contetWrap .content #sidebar #member #memberLogin .login fieldset p {
	margin: 0 0 8px;
	overflow: hidden;
}

#bannerWrap .wrap .functionWrap #member #memberLogin .login fieldset p .name ,
#bannerWrap .wrap .functionWrap #member #memberLogin .login fieldset p .password ,
#bannerWrap .wrap .functionWrap #member #memberLogin .login fieldset p .code ,
.contetWrap .content #sidebar #member #memberLogin .login fieldset p .name ,
.contetWrap .content #sidebar #member #memberLogin .login fieldset p .password ,
.contetWrap .content #sidebar #member #memberLogin .login fieldset p .code {
	width: 110px;
	height: 30px;
	background: url(../images/member/img-loginName.png) no-repeat 0 0;
	display: block;
	float: left;
	text-indent: -999999px;
}

#bannerWrap .wrap .functionWrap #member #memberLogin .login fieldset p .password ,
.contetWrap .content #sidebar #member #memberLogin .login fieldset p .password {
	background: url(../images/member/img-loginPassword.png) no-repeat 0 0;
}
#bannerWrap .wrap .functionWrap #member #memberLogin .login fieldset p .code ,
.contetWrap .content #sidebar #member #memberLogin .login fieldset p .code {
	background: url(../images/member/img-loginCode.png) no-repeat 0 0;
}

#bannerWrap .wrap .functionWrap #member #memberLogin .login fieldset p input ,
.contetWrap .content #sidebar #member #memberLogin .login fieldset p input {
	padding: 3px;
	width: 165px;
	height: 22px;
	background: #350027;
	border: 1px #8a7c7c solid;
	float: left;
	color: #ff60ae;
}

#bannerWrap .wrap .functionWrap #member #memberLogin .login fieldset.btn ,
.contetWrap .content #sidebar #member #memberLogin .login fieldset.btn {
	margin: 0;
	padding: 0 30px 0;
	overflow: hidden;
}

#bannerWrap .wrap .functionWrap #member #memberLogin .login fieldset.btn a ,
#bannerWrap .wrap .functionWrap #member #memberLogin .login fieldset.btn .btn-submit ,
.contetWrap .content #sidebar #member #memberLogin .login fieldset.btn a ,
.contetWrap .content #sidebar #member #memberLogin .login fieldset.btn .btn-submit {
	width: 105px;
	height: 31px;
	background: url(../images/member/icon-ForgotPassword.jpg) no-repeat 0 0;
	display: inline-block;
	float: right;
	text-indent: -999999px;
}

#bannerWrap .wrap .functionWrap #member #memberLogin .login fieldset.btn .btn-submit ,
.contetWrap .content #sidebar #member #memberLogin .login fieldset.btn .btn-submit {
	margin: 0 5px 0 0;
	background: url(../images/member/icon-login.jpg) no-repeat 0 0;
}

#bannerWrap .wrap .functionWrap #member #memberLogin .login fieldset.btn .btn-submit:hover ,
.contetWrap .content #sidebar #member #memberLogin .login fieldset.btn .btn-submit:hover {
	background-position: 0 -31px;
}

/**
*
* =join
*
**/
#bannerWrap .wrap .functionWrap #member #memberLogin #join ,
.contetWrap .content #sidebar #member #memberLogin #join {
	margin: 20px 0 0;
}

#bannerWrap .wrap .functionWrap #member #memberLogin #join a ,
.contetWrap .content #sidebar #member #memberLogin #join a {
	width: 310px;
	height: 70px;
	background: url(../images/index/icon-join.png) no-repeat 0 0;
	display: block;
	text-indent: -999999px;
}

/**
*
* =membernBox
*
**/
#bannerWrap .wrap .functionWrap #member #memberBox .mamberinfo,
.contetWrap .content #sidebar #member #memberBox .mamberinfo {
	margin: 70px 30px 5px 15px;
	overflow: hidden;
}

#bannerWrap .wrap .functionWrap #member #memberBox .mamberinfo h4 ,
.contetWrap .content #sidebar #member #memberBox .mamberinfo h4 {
	font-size: 16px;
	color: #000;
}

#bannerWrap .wrap .functionWrap #member #memberBox .mamberinfo ul ,
.contetWrap .content #sidebar #member #memberBox .mamberinfo ul {
	margin: 5px 0 10px;
}

#bannerWrap .wrap .functionWrap #member #memberBox .mamberinfo ul li ,
.contetWrap .content #sidebar #member #memberBox .mamberinfo ul li {
	margin: 0 0 5px;
	padding: 0 0 5px 20px;
	background: url(../images/member/dot02.png) no-repeat 2px 2px;
	border-bottom: 1px #000 dotted;
	overflow: hidden;
}

#bannerWrap .wrap .functionWrap #member #memberBox .mamberinfo ul li a ,
.contetWrap .content #sidebar #member #memberBox .mamberinfo ul li a {
	color: #000;
	font-weight: bold;
}

#bannerWrap .wrap .functionWrap #member #memberBox .mamberinfo .logout ,
.contetWrap .content #sidebar #member #memberBox .mamberinfo .logout {
	margin: 0 0 10px;
	overflow: hidden;
}

#bannerWrap .wrap .functionWrap #member #memberBox .mamberinfo .logout a ,
.contetWrap .content #sidebar #member #memberBox .mamberinfo .logout a {
	width: 105px;
	height: 31px;
	background: url(../images/member/icon-logout.jpg) no-repeat 0 0;
	display: inline-block;
	float: right;
	text-indent: -999999px;
}

#bannerWrap .wrap .functionWrap #member #memberBox #point ,
.contetWrap .content #sidebar #member #memberBox #point ,
.contetWrap .content #sidebar #pointS {
	overflow: hidden;
}

#bannerWrap .wrap .functionWrap #member #memberBox #point a ,
.contetWrap .content #sidebar #member #memberBox #point a ,
.contetWrap .content #sidebar #pointS a {
	width: 310px;
	height: 70px;
	display: block;
	background: url(../images/index/icon-point.png) no-repeat 0 0;
	text-indent: -999999px;
}

/**
*
* =marquee
*
**/
#bannerWrap .wrap #webSeo {
	margin: 5px auto 0;
	padding: 0;
	width: 960px;
	height: 55px;
	background: url(../images/all/title-notice.png) no-repeat 0 0;
	position: relative;
}
#bannerWrap .wrap #webSeo .seo {
	width: 495px;
	width: 750px;
	height: 55px;
	overflow: hidden;
	line-height: 20px;
	color: #fff;
	padding: 15px 0 0 0;
	margin: 0 0 0 190px;
}


/* +contet
*----------------------------------------------------------------------------*/
.contetWrap {
	width: 100%;
	background: #fff;
	overflow: hidden;
}

.contetWrap .content {
	margin: 0 auto;
	width: 960px;
	overflow: hidden;
}

.contetWrap .content #sidebar {
	width: 310px;
	float: right;
}

/**
*
* =gameType
*
**/
.contetWrap #gameType {
	background: url(../images/index/home_bg3.jpg) center;
}

.contetWrap #gameType ul {
	width: 960px; 
	height:400px; 
	margin: 0 auto; 
	padding-top: 50px;
}

.contetWrap #gameType ul li {
	float: left;
}

.contetWrap #gameType ul li img {
	max-width: 100%
}

.contetWrap #gameType #gameTypeBottom {
	background: url(../images/index/img-gameshadow.png) no-repeat center; 
	height: 50px;
}


/**
*
* =contentMain
*
**/
.contetWrap .content .contentMain {
	overflow: hidden;
}


/* +footer
*----------------------------------------------------------------------------*/
#footer {
	width: 100%;
	padding: 0 0 20px;
	background: url(../images/all/bg-footer.jpg) #000 no-repeat center 0;
	overflow: hidden;
}

#footer p ,
#footer .footerNav ,
#footer .design {
	margin: 0 auto;
	width: 960px;
}

#footer p ,
#footer .design {
	margin-bottom: 5px;
	font-size: 12px;
	color: #fff;
	text-align: center;
}

#footer .design p {
	margin: 0 0 5px;
	text-align: center !important;
	color: #fff !important;
}

#footer .design p a {
	color: #fff !important;
}

#footer .footerNav h3 {
	display: none;
}

#footer .footerNav ul {
	margin: 20px auto;
	width: 480px;
	overflow: hidden;
}

#footer .footerNav ul li {
	margin: 0 5px 0 0;
	padding: 0 15px 0 0;
	background: url(../images/all/bg-footerNav.png) no-repeat right center;
	float: left;
}

#footer .footerNav ul li a {
	font-size: 16px;
	color: #fff;
}