/*
 * Copyright 2017, TANK
 * 
 * 
 * 2017 / 02 / 02
 */


/*-----------------------------------------------------------------------------
 [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;
	background: url(/images/17/remake/mainbg.jpg) #000 no-repeat 0 bottom;
	color: #fff;
}

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;
	line-height: 170%;
	border-width: 0;
	font-family: '微軟正黑體', "Arial", "Arial Narrow";
}

hr {
	border-top:1px #000 solid;
	margin:0 0 10px 0;
}

th {
	font-weight: normal;
}

ul, ol {
	list-style: none;
}

p.lineHeight {
	line-height:170%;
}
p.marginTop {
	margin:10px 0;
}
p.marginLeft {
	margin: 0 10px;
}

fieldset {
	border: 0;
}

input,button,select,textarea {
	outline:none
}

img {
	max-width: 100%;
}

/**
*
* =anchor
*
**/

a:link, a:visited {
	color: #0E0E0E;
	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 */


livedemo00.template-help.com/media="screen":after, :before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}


/* +body
*----------------------------------------------------------------------------*/
.wrapper {
	width: 100%;
	overflow: hidden;
	position: relative;
}

.wrapper .wrap {
	overflow: hidden;
	margin: 504px auto 0;
	width: 1160px;
	box-shadow: 0 0 30px #000;
}


/**
*
* =jumpDiv
*
**/
/* + 跳一  跳三
*----------------------------------------------------------------------------*/
#jumpDiv ,
#jumpIframe {
	position: relative;
	background: #fff;
	top: 0;
	left: 0;
	z-index: 50;
}


/* + a.photo
*----------------------------------------------------------------------------*/
a.photo {
	overflow: hidden;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: auto 100%;
	display: block;
}

a.photo img {
	width: 100%;
	max-width: inherit;
}


/* + banner
*----------------------------------------------------------------------------*/
.wrapper #banner .bd {
	position: absolute;
	top:0;
	left: 0;
	width:  100%;
	z-index: -1;
}

.wrapper #banner .bannerPage {
	position: absolute;
	top: 708px;
	width: 100%;
	text-align: center;
	display:none;
}

.wrapper #banner .bannerPage a.prev {
	margin-right: -2px;
}

.wrapper #banner .bannerPage a.next {
	margin-left: -2px;
}
.wrapper #banner .bd img{
	width:100%;
}

/* + header
*----------------------------------------------------------------------------*/
.wrapper #header {
}
.wrapper #header .topBar{
	background: rgb(76,111,153); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(76,111,153,1) 1%, rgba(23,67,109,1) 98%, rgba(0,73,153,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(76,111,153,1) 1%,rgba(23,67,109,1) 98%,rgba(0,73,153,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgb(255 217 0) 1%,rgb(253 180 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c6f99', endColorstr='#004999',GradientType=0 ); /* IE6-9 */
	padding: 5px 0;
}
.wrapper #header .topBar ,
.wrapper #header .box {
	overflow: hidden;
	margin: 0 auto;
	width: 100%;
	text-align: right;
	font-size: 14px;
}

.wrapper #header .topBar a {
	margin: 0 5px;
	font-weight: bold;
}

.wrapper #header .topBar a ,
.wrapper #header .box #nav a {
	color: #fff;
}

.wrapper #header .topBar a:hover {
	text-shadow: 0 0 5px #fff;
}

.wrapper #header .box {
    background: rgb(0 0 0 / 50%);
    box-shadow: 0 0 5px #000;
}
.wrapper #header .box section, .wrapper #header .topBar section{
	overflow:hidden;
	width: 1200px;
    margin: 0 auto;
}
.wrapper #header .box #cis ,
.wrapper #header .box #nav {
	float: left;
	width: 245px;
	padding: 26px 0;
}

.wrapper #header .box #nav {
    width: calc(100% - 245px);
    padding: 0;
}
.wrapper #header .box #nav ul{
	overflow:hidden;
	margin-left: 20px;
	text-align: end;
}
.wrapper #header .box #nav li{
    display: inline-block;
    padding: 0 20px;
}
.wrapper #header .box #nav li:last-child{
    padding-right: 0;
}
.wrapper #header .box #nav a {
	font-weight: bold;
	text-align: center;
	font-size: 18px;
	display: block;
	position:relative;
	height: 105px;
	line-height: 105px;
}
.wrapper #header .box #nav li:hover {
}
.wrapper #header .box #nav li:hover a:after{
	content:'';
	position:absolute;
	bottom:0;
	left:0;
	background: #fec700;
	width:100%;
	height:3px;
}

.wrapper #header .box #nav li.about:hover a {
	background-image:url(/images/17/remake/hover-icon-about.png);
}

.wrapper #header .box #nav li a:hover {
}

.wrapper #header .box #nav a:nth-child(2):hover {
}

.wrapper #header .box #nav a:nth-child(3):hover {
}

.wrapper #header .box #nav a:nth-child(4):hover {
}

.wrapper #header .box #nav a:nth-child(5):hover {
}

.wrapper #header .box #nav a:nth-child(6):hover {
}

.wrapper #header .box #nav a:nth-child(7):hover {
}

.wrapper #header .box #nav a:nth-child(8):hover {
}


/* + memberOption
*----------------------------------------------------------------------------*/
.wrapper #memberOption {
	overflow: hidden;
}

.wrapper #memberOption .item ,
.wrapper #memberOption .item .linkBox a {
	float: left;
	width: 50%;
}

.wrapper #memberOption .item .marq {
	padding: 14px 20px 14px 100px;
	background: url(/images/17/main/img-maqueeBg.jpg) no-repeat 0 0;
}

.wrapper #memberOption #webSeo ,
.wrapper #memberOption #webSeo .seo {
	overflow: hidden;
	font-size: 12px;
}

.wrapper #memberOption #webSeo .seo .js-marquee-wrapper {
	transition: none;
	font-size: 12px !important;
}

.wrapper #memberOption .item .linkBox a {
	width: 25%;
	display: block;
}

.wrapper #memberOption .item .linkBox a .hov ,
.wrapper #memberOption .item .linkBox a:hover img.fir {
	display: none;
}

.wrapper #memberOption .item .linkBox a:hover .hov {
	display: inline-block;
}


/* + main-nav
*----------------------------------------------------------------------------*/
#main-nav {
	margin-right: 15px;
	float: left;
	width: 225px;
	display: none;
}

#main-nav #member-wrap form p {
	margin: 0 5px;
}

#main-nav #member-wrap form p label {
	margin: 0 10px;
}

#main-nav #member-wrap form p input {
	margin-left: 5px;
    padding: 0 10px;
    width: 140px;
    border: 1px #ffcc00 solid;
    background: transparent;
	color: #ffcc00;
}

#main-nav #member-wrap form fieldset.btn {
	margin: 10px 0;
	text-align: center;
}

#main-nav #memberBox .logout a ,
#main-nav #member-wrap form fieldset.btn a {
	padding: 5px 0px;
	width: 125px;
	background: #676767;
	border-radius: 20px;
	display: inline-block;
	text-align: center;
	font-size: 12px;
	color: #fff;
}

#main-nav #member-wrap form fieldset.btn a#btnOKSP ,
#main-nav #memberBox .logout a.member {
	background: #e7bb1c;
    color: #000;
}

#main-nav #member-wrap form fieldset.btn a:hover ,
#main-nav #memberBox .logout a:hover {
	opacity: 0.7;
}

#main-nav #memberBox .logout a {
	margin: 0 5px;
}

#main-nav .gameCate {
	margin: 20px 0;
}

#main-nav .gameCate ul li {
	overflow: hidden;
	margin: 10px 0;
}

#main-nav .gameCate ul li a {
	padding-left: 10px;
	height: 50px;
	display: block;
	background: url(/images/17/main/img-gameLink.png) no-repeat 0 center;
	color: #fff;
}

#main-nav .gameCate ul li span ,
#main-nav .gameCate ul li strong ,
#main-nav .gameCate ul li b {
	width: 28px;
	display: inline-block;
	text-align: center;
	font-weight: bold;
	color: #f3d889;
	vertical-align: top;
}

#main-nav .gameCate ul li strong {
	padding: 10px 0 10px 20px;
	width: 145px;
	text-align: left;
	font-size: 20px;
	color: #fff;
}

#main-nav .gameCate ul li b {
	margin-left: 7px;
	padding: 10px 0;
	width: 54px;
	font-size: 18px;
	color: #3a0b08;
}

#main-nav .adBox ul li {
	overflow: hidden;
	text-align: center;
	margin: 0 2%;
	position: relative;
}
#main-nav .adBox ul li:hover a img{-webkit-filter:saturate(0.5);}
#main-nav .adBox ul li p {
	overflow: hidden;
	text-overflow : ellipsis;
	white-space : nowrap;
	width: 100%;
	position: absolute;
	bottom: 0;
	background: rgba(235, 192, 37, .8);
	color: #262626;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	display: none;
}

#main-nav .adBox ul li:hover p {
	color: #900;
}

/* +footer
*----------------------------------------------------------------------------*/
.wrapper #footer {
	overflow: hidden;
	padding: 20px 0;
	color: #fff;
	font-size: 0;
	width: 1160px;
	max-width: 95%;
	margin: 0 auto;
}
.wrapper #footer .JJ01{
    width: 100%;
    display: block;
    font-size:0;
}
.wrapper #footer .JJ02{
	width: 50%;
    display: inline-block;
    font-size:0;
}
.wrapper #footer .JJ02 p{
	text-align: right;
}
.wrapper #footer .JJ02 p.QRmagic img{
	width: 164px;
}
.wrapper #footer .JJ02 p.QRJJmagic a{
	color:white;
}
.wrapper #footer .JJ02 p.QRJJmagic{
	margin-top:10px;
	font-size: 17px;
}
.wrapper #footer p {
	text-align: left;
	font-size: 12px;
}


/* + serviceWrap
*----------------------------------------------------------------------------*/
#serviceWrap {
	position: fixed;
	top: 220px;
	right: 10%;
	color: #000;
}

#serviceWrap a#closeIcon {
	position: absolute;
	width: 20px;
	height: 20px;
	background: #585656;
	display: block;
	line-height: 18px;
	text-align: center;
	color: #fff;
	right: 0;
}

#serviceWrap a#closeIcon:hover {
	opacity: 0.7;
}

#serviceWrap p ,
#serviceWrap p a {
	font-weight: bold;
	font-size: 14px;
}

#serviceWrap p a {
	word-wrap: break-word;
	word-break: break-all;
}

#serviceWrap ul {
	overflow: hidden;
	width: 165px;
	background: #ffc932;
}

#serviceWrap ul li {
	padding: 10px;
	background: url(/images/17/main/icon-line.jpg) no-repeat 10px center;
	border-bottom: 1px #bb952c solid;
}

#serviceWrap ul li:nth-child(2) {
	background: url(/images/17/main/icon-wechat.jpg) no-repeat 10px center;
}

#serviceWrap ul li:nth-child(3) {
	background: url(/images/17/main/icon-mail.jpg) no-repeat 10px center;
	border-bottom: 0;
}

#serviceWrap ul li:nth-child(4) {
	background: none;
	border-bottom: 0;
}

#serviceWrap ul li p {
	padding-left: 40px;
}

#serviceWrap ul li:nth-child(4) p {
	padding-left: 0;
}
#content{
	padding: 20px;
	background: rgba(60, 60, 60, 0.7);
	overflow:hidden;
}
/* +width:1159 ↓
*----------------------------------------------------------------------------*/
@media screen and (max-width: 1159px) {
	.wrapper {
		width: 1160px;
		overflow: inherit;
	}
	.wrapper .wrap{
		margin: 304px auto 0;	
	}
	.wrapper #header .box section, .wrapper #header .topBar section{
		width: 95%;
	}
}