@font-face {
	font-family: "responsivenav";
	src:url("../icons/responsivenav.eot");
	src:url("../icons/responsivenav.eot?#iefix") format("embedded-opentype"),
    url("../icons/responsivenav.ttf") format("truetype"),
    url("../icons/responsivenav.woff") format("woff"),
    url("../icons/responsivenav.svg#responsivenav") format("svg");
	font-weight: normal;
	font-style: normal;
}

.black-ribbon {
  position: fixed;
  z-index: 10000;
  width: 70px;
}
@media only all and (min-width: 768px) {
  .black-ribbon {
    width: auto;
  }
}

.stick-left { left: 0; }
.stick-right { right: 0; }
.stick-top { top: 0; }
.stick-bottom { bottom: 0; }

body,div,
h1,h2,p,
ol,ul,li {
	margin: 0;
	padding: 0;
	border: 0;
}

@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }

html, body {
	min-height: 100%;
}

body {
	min-width: 320px;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	text-size-adjust: 100%;
	background: #649305;
	/*color: #666;*/
	font: normal 100%/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h1 {
	font-size: 3em;
	line-height: 1;
	color: #222;
	margin-bottom: .5em;
	float: left;
	width: 100%;
}

h2 {
	float: left;
	width: 100%;
	font-size: 1.5em;
	color: #222;
	margin: 1em 0 .5em;
}

p {
	float: left;
	width: 100%;
	margin-bottom: 1em;
}

p.intro {
	font-size: 1.25em;
	/*color: #555;*/
	font-weight: bold;
}

a {
	color: #f4f4f4;
	text-decoration: none;
}

a:active,
a:hover {
	outline: 0;
}

.main {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-overflow-scrolling: touch;
	/*padding: 3em 5em 5em 15em;*/
	/*position: fixed;*/
	overflow: hidden;
	/*overflow-y: scroll;*/
	border-top-left-radius: 0px;
	top: .0em;
	right: 0;
	bottom: 0;
	width: 100%;
	background: #639206;
}

.main::-webkit-scrollbar {
	-webkit-appearance: none;
	background-color: rgba(0,0,0, .15);
	width: 8px;
	height: 8px;
}

.main::-webkit-scrollbar-thumb {
	border-radius: 0;
	background-color: rgba(0,0,0, .4);
}

.nav-collapse {
	position: fixed;
	width: 24%;
	top: 0em;
	left: 0;
	height: 100%;
	z-index: 9999;
}

.nav-collapse ul {
	display: block;
	width: 100%;
	list-style: none;
}

.nav-collapse li {
	width: 100%;
	display: block;
}

.nav-collapse a {
	color: #aaa;
	font-weight: bold;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: background .3s ease;
	-moz-transition: background .3s ease;
	transition: background .3s ease;
	text-shadow: 0 -1px rgba(0,0,0, .5);
	display: block;
	padding: .6em 2em;
	width: 100%;
}

.nav-collapse a:hover { background: rgba(255,255,255, .1) }
.nav-collapse .active a { color: #fff; background: rgba(0,0,0, .3) }
.nav-collapse li:first-child a { border-top: 0 }
.nav-collapse li:last-child a { border-bottom: 0 }
.nav-toggle { display: none }

.section {
	position: relative;
}
.section:target {
	padding-top: 90px;
}

.separator{
	margin:15px 0;
	opacity:0.1;
	border-width: 1px;
	border-bottom:none;
}
.separator2{
	margin:5px 0;
	opacity:0.1;
	border-width: 1px;
	border-bottom:none;
}

.comment-text{	font-size: 0.85em;	color:#424242;}
.soft-text { color: #bbb; }
div.text{ padding-bottom: 15px; }
.red-text{ color: #f22; }

@media screen and (max-width: 64em) {
	.js .nav-collapse {
		clip: rect(0 0 0 0);
		max-height: 9999px;
		position: absolute;
		display: block;
		overflow: hidden;
	}
	.nav-collapse {
		top: 0;
		width: 100%;
		/* position: relative; */
		z-index: -1;
	}
	.nav-collapse.opened { max-height: 9999px }
	.nav-collapse a:hover { background: transparent }
	.nav-collapse .active a:hover { color: #fff; background: rgba(0,0,0, .3) }
	.nav-toggle {
		background:	url(/images/left-bt.png) no-repeat;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		text-decoration: none;
		text-indent: -999px;
		position: relative;
		overflow: hidden;
		width: 25px;
		height: 25px;
		float: left;
		display: block;
		margin: -3em 0em 0em 1.5em;
		z-index: 9999;
	}
	.nav-toggle:hover {
		background:	url(../images/left-bt-hover.png) no-repeat;
	}
	/*-------------- nav toggle 2 -----------------------*/
	.nav-toggle2 {
		background:	url(../images/right-bt.png) no-repeat;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		text-decoration: none;
		text-indent: -999px;
		position: relative;
		overflow: hidden;
		width: 22px;
		height: 26px;
		float: right;
		display: block;
		margin: -3.2em 1.5em 1em 0em;
		z-index: 9999;
		border: 0em;
	}
	.nav-toggle2:hover {
		background:	url(../images/right-bt-hover.png) no-repeat;
	}
	/*-------------- nav toggle 2 -----------------------*/
	
	.main {
		-webkit-overflow-scrolling: auto;
		box-shadow: none;
		padding: 0em 0em 0em 0em;
		border-radius: 0;
		/*position: fixed;*/
		width: 100%;
		overflow: hidden;
	}
	.main::-webkit-scrollbar { background-color: transparent }
}

@media screen and (-webkit-min-device-pixel-ratio: 1.3), screen and (min--moz-device-pixel-ratio: 1.3), screen and (-o-min-device-pixel-ratio: 2 / 1), screen and (min-device-pixel-ratio: 1.3), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
	body {
		background-image: url("debut_dark_@2X.png");
		-webkit-background-size: 200px 200px;
		-moz-background-size: 200px 200px;
		-o-background-size: 200px 200px;
		background-size: 200px 200px;
	}
}
@media screen and (min-width: 64.063em) {
	.nav-collapse { width: 14.4em; height: 100%; box-shadow: 0 0 15px rgba(0,0,0, .6); }
	.main { width: auto; left: 0em; }
}
@media screen and (max-width: 320px){
	.nav-toggle {
		-moz-user-select: none;
		text-decoration: none;
		text-indent: -999px;
		position: fixed;
		overflow: hidden;
		width: 25px;
		height: 25px;
		float: right;
		display: block;
		margin: -3em 0em 0em 1.5em;
		z-index: 9999;
	}
}
@media screen and (max-width: 640px){
	.main{
		top: 0px;
	}
}

/*----------- contact page css --------------*/
.sub-topic{
	width: 800px;
	height: 50px;
	margin-top: 35px;
	/*border-bottom: 1px solid #999;*/
}
.sub-container{
	width: 100%;
	max-width: 1200px;
	margin: 10px 10px;
	background: #fff;
	border-radius: 10px;
}
.paragraph1{width: 70%; color: #000; margin-top: 15px; padding: 20px;}
.paragraph1 > h1{font-size: 1.85em; color: #FF5200; line-height: 1.8;}
.sub-container > img {
	width: 90%; 
	max-width: 1400px;
	/*-webkit-border-radius: 20px; 
		-moz-border-radius: 20px; 
	border-radius: 20px;*/
	-webkit-box-shadow: 4px 4px 7px #333; 
	-moz-box-shadow: 4px 4px 7px #333; 
	box-shadow: 4px 4px 7px #333;
	margin: 20px 20px;
}
@media screen and (max-width: 1024px){
	.sub-topic{margin-left: 10px;}
	.paragraph1{width: 80%; color: #000; margin-left: 10px;}
	.sub-container > img {margin-left: 10px; }
	.sub-container{
		width: 96%;
		margin: 10px 5px;
		background: #fff;
		border-radius: 10px;
	}
}
@media screen and (max-width: 640px){
	.sub-topic{margin-left: 0px;}
	.paragraph1{width: 100%; color: #000; margin-left: 0px; font-size: 12px;}
	.paragraph1 > h1{font-size: 1.7em; color: #FF5200; line-height: 1.8;}
	.sub-container > img {
		width: 100%; 
		margin-left: 0;
		-webkit-box-shadow: 4px 4px 7px #333; 
		-moz-box-shadow: 4px 4px 7px #333; 
		box-shadow: 4px 4px 7px #333;
	}
	.sub-container{
		width: 96%;
		margin: 10px 5px;
		background: #fff;
		border-radius: 10px;
	}
}

.details-container .alert{
	border: 2px solid #EEBBBB;
	margin: 20px auto;
	width: 90%;
	max-width: 550px;
/*	background-color: #fffafa;  */
}

.details-container .alert .alert-message{
	text-align: left;
	width: 92%;
}


/*----------- forgetpwd css --------------*/
.form-fgpwd {margin: 20px 0px; min-height: 320px;}
.form-fgpwd .control-label{
	padding-top: 6px;
	width: 38%;
	display:block;
	text-align: right;
	float: left; 
}

.form-fgpwd .col2 { 
	display: block; 
	width: 60%;
	margin-left: 39%;
	max-width: 400px;
	text-align: left;
} 

.form-fgpwd #txt_email{ width: 350px; max-width: 350px; }

.form-fgpwd #img_captcha {
display: inline-block;
margin-left: 15px;
margin-top: 2px;
}

@media screen and (max-width: 640px){
	.form-fgpwd .control-label{ width: 30%; }
	.form-fgpwd .col2 { 	width: 65%; 	margin-left: 31%; 	}
	.form-fgpwd #txt_email { width: 100%; max-width: none;}
}
@media screen and (max-width: 360px){
	.form-fgpwd .col2 { clear: left; margin: 0px 0px; width:100%; max-width: none; }	
	.form-fgpwd .control-label{ text-align: left; font-size: 0.9em;}
	.form-fgpwd #txt_userid { width: 100%; max-width: none;}
}

/*----------- verify css --------------*/
.form-verify {margin: 20px 0px; min-height: 320px;}
.form-verify .control-label{
	padding-top: 6px;
	width: 38%;
	display:block;
	text-align: right;
	float: left; 
}

.form-verify .col2 { 
	display: block; 
	width: 60%;
	margin-left: 39%;
	max-width: 400px;
	text-align:left;
} 

.form-verify #txt_userid{ background-color:#eee; }
.form-verify #txt_mobile{ background-color:#eee; }
.form-verify #txt_email{ width: 350px; max-width: 350px; }

@media screen and (max-width: 640px){
	.form-verify .control-label{ width: 30%; }
	.form-verify .col2 { 	width: 65%; 	margin-left: 31%; 	}
	.form-verify #txt_email { width: 100%; max-width: none;}
}
@media screen and (max-width: 360px){
	.form-verify .col2 { clear: left; margin: 0px 0px; width:100%; max-width: none; }	
	.form-verify .control-label{ text-align: left; font-size: 0.9em;}
	.form-verify #txt_userid { width: 100%; max-width: none;}
}

/*---------- Change password ----------*/
.form-changepwd { margin: 20px 0px; min-height: 320px; }
.form-changepwd .changepwd-title{ font-size: 1em; text-align: left; margin: 25px 5px; margin-left: 10%;}

.form-changepwd .control-label{
	padding-top: 6px;
	width: 20%;
	display:block;
	text-align: left;
	float: left; 
	margin-left: 10%;
}

.form-changepwd .col2 { 
	display: block; 
	width: 70%;
	margin-left: 30%;
	text-align:left;
/*	max-width: 350px;  */
} 

.form-changepwd h5 {
	line-height: 1.8;
	font-weight: 600;
	color: red;
	font-size: 12px;
	width: 90%;
}

@media screen and (max-width: 800px){
	.form-changepwd .changepwd-title{ margin-left: 5%; }
	.form-changepwd .control-label{ margin-left: 5%; font-size: 0.85em;}
}
@media screen and (max-width: 640px){
	.form-changepwd .control-label{ width: 30%; }
	.form-changepwd .col2 { width: 60%; margin-left: 35%; }
}
@media screen and (max-width: 480px){
	.form-changepwd .control-label{ width: 50%; }
	.form-changepwd .col2 { width: 95%; clear: left; margin-left: 5% }
}

/*----------- regisvip login css --------------*/
.form-regisvip-login {margin: 20px 0px; min-height: 320px;}
.form-regisvip-login .control-label{
	padding-top: 6px;
	width: 43%;
	display:block;
	text-align: right;
	float: left; 
}

.form-regisvip-login .col2 { 
	display: block; 
	width: 58%;
	margin-left: 44%;
	max-width: 350px; 
	text-align:left;
} 

.form-regisvip-login #img_captcha {
display: inline-block;
margin-left: 15px;
margin-top: 2px;
}

@media screen and (max-width: 480px){
	.form-regisvip-login .control-label{ width: 37%; }
	.form-regisvip-login .col2 { 	width: 62%; 	margin-left: 38%; 	}
}
@media screen and (max-width: 400px){
	.form-regisvip-login .control-label{ width: 30%; }
	.form-regisvip-login .col2 { 	width: 65%; 	margin-left: 31%; 	}
}
@media screen and (max-width: 360px){
	.form-regisvip-login .col2 { clear: left; margin: 0px 0px; width:100%; max-width: none; }	
	.form-regisvip-login .control-label{ text-align: left; font-size: 0.9em;}
	.form-regisvip-login #txt_userid, .form-regisvip-login #txt_passwd { width: 100%; max-width: none;}
}


/*----------- register page css --------------*/
.paragraph2{width: 100%; max-width: 1200px; color: #000; margin-top: 15px; background: #fff; border-radius: 10px;}
.regis-choice {max-width: 300px; background: #405f01; height: 35px; border-radius: 7px;}
.regis-choice > h1 {font-size: 18px; color: #fff; line-height: 1.8; text-align: center;}
.regis-choice > h1 > a{font-size: 18px; color: #fff; line-height: 1.8;}
.regis-choice > h1 > a:hover{font-size: 18px; color: #ffff00; line-height: 1.8; text-decoration: none;}
.regis-choice > h1 > a:active{font-size: 18px; color: #ffff00; line-height: 1.8; text-decoration: none;}
.regis-title {background: #405f01; height: 35px; border-radius: 7px; padding-left: 20px; padding-right: 20px;}
.regis-title > h1 {font-size: 18px; color: #fff; line-height: 1.8; text-align: center;}
.form-horizontal {margin-top: 20px; margin-left: -150px;}
.form-new {
	display: block;
	width: 50%;
	height: 34px;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.42857143;
	color: #555;
	background-color: #fff;
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
	-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
	-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.vip {
	max-width: 200px;
	/*display: block;*/
	height: 34px;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.42857143;
	color: #555;
	background-color: #fff;
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
	-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
	-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.password {
	max-width: 200px;
	display: block;
	height: 34px;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.42857143;
	color: #555;
	background-color: #fff;
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
	-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
	-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.zipcode {
	max-width: 100px;
	display: block;
	height: 34px;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.42857143;
	color: #555;
	background-color: #fff;
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
	-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
	-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.call {
	max-width: 200px;
	display: block;
	height: 34px;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.42857143;
	color: #555;
	background-color: #fff;
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
	-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
	-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.id-code{
	max-width: 350px;
	/*display: block;*/
	height: 34px;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.42857143;
	color: #555;
	background-color: #fff;
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
	-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
	-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.email{
	max-width: 200px;
	/*display: block;*/
	height: 34px;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.42857143;
	color: #555;
	background-color: #fff;
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
	-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
	-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.calculate{
	max-width: 150px;
	/*display: block;*/
	height: 34px;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.42857143;
	color: #555;
	background-color: #fff;
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
	-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
	-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.col-sm-7 > h5{
	line-height: 1.8;
	font-weight: 600;
	color: red;
	font-size: 12px;
	width: 70%;
}
@media screen and (max-width: 1280px){
	.form-horizontal {margin-top: 20px; margin-left: -100px;}	
}
@media screen and (max-width: 1024px){
	.paragraph2{width: 97%; color: #000; margin-top: 15px; margin-left: 15px;}
	.paragraph2 > h1 {font-size: 25px; color: #FF5200; line-height: 1.8; margin-left: 20px;}
	.form-horizontal {margin-top: 20px; margin-left: -20px;}
}
@media screen and (max-width: 768px){
	.paragraph2{width: 88%; color: #000; margin-top: 15px; margin-left: 15px;}
	.form-horizontal {margin-top: 20px; margin-left: 0px;}
	.col-sm-7 > h5{
		width: 100%;
	}
	.sub-container{
		width: 96%;
		margin: 10px 5px;
		background: #fff;
		border-radius: 10px;
	}
	.result-table{ width: 90%; }
}
@media screen and (max-width: 640px){
	.paragraph2{width: 99%; color: #000; margin-top: 15px; margin-left: 5px; font-size: 12px;}
	.form-new {
		display: block;
		width: 100%;
		height: 34px;
		padding: 6px 12px;
		font-size: 14px;
		line-height: 1.42857143;
		color: #555;
		background-color: #fff;
		background-image: none;
		border: 1px solid #ccc;
		border-radius: 4px;
		-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
		box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
		-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
		-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
		transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	}
	.result-table{ width: 95%; }
}
/* redio button */
input[type=radio].css-checkbox {
	/*position:absolute;*/ z-index:-1000; top:-1000px; overflow: hidden; clip: rect(0 0 0 0); /*height:1px;*/ width:1px; margin-top:10px; padding:0; border:0;
}

input[type=radio].css-checkbox + label.css-label {
	padding-left:21px;
	height:16px; 
	display:inline-block;
	line-height:16px;
	background-repeat:no-repeat;
	background-position: 0 0;
	font-size:16px;
	vertical-align:middle;
	cursor:pointer;
	
}

input[type=radio].css-checkbox:checked + label.css-label {
	background-position: 0 -16px;
}
label.css-label {
	background-image:url(../images/radiobox.png); 
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

input[type='number'] {
    -moz-appearance:textfield;
}
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
}

/*----------- news page -----------*/
.paragraph3{width: 100%; max-width: 1280px; color: #000; border-radius: 10px; padding: 5px; margin: 10px 100px; float: left;}
.paragraph4{width: 100%; max-width: 1280px; color: #000; border-radius: 10px; padding: 5px; margin: 10px 0px; float: left;}
.news-container{width: 100%; max-width: 1200px; margin: 10px 0px; background: #fff; border-radius: 10px; float: left; padding: 10px;}
.news-box{background: #fff; max-width: 100%; height: 240px; margin: 5px 10px; float: left; display: inline; overflow: hidden;}
.news-box > img {max-width:100%;}
.news-box > a{text-decoration: none; color: #666; font-size: 12px;}
.news-box > a:hover{text-decoration: none; color: #999;}
.news-box > a > strong {text-decoration: none; color: #006699; display:block;}
.news-box > a > strong:hover {text-decoration: none; color: #ff6633;}
.col-sm-12 > a > strong {text-decoration: none; color: #006699; display:block;}
.col-sm-12 > a > strong:hover {text-decoration: none; color: #ff6633;}

.btn-navbox {margin: 10px 0;}
.btn_head_news {position:relative;left: 0px;}
.btn_head_news li { float:left; margin-right: 0px;}
.btn_head_news li a{ display:block; background-image:url(/images/BT-New&Pro.jpg); background-repeat:no-repeat; text-indent: -999em;}
.btn_head_news1 a { width: 216px; height: 88px; background-position: 0px 0;}
.btn_head_news2 a { width: 216px; height: 88px; background-position: -216px 0;}
.btn_head_news1 a:hover { background-image:url(/images/BT-New&Pro-hover.jpg); background-position: 0px 0px;}
.btn_head_news2 a:hover { background-image:url(/images/BT-New&Pro-hover.jpg); background-position: -216px 0px;}

.btn_head_npp {position:relative;left: 0px;}
.btn_head_npp li { float:left; margin-right: 0px;}
.btn_head_npp li a{ display:block; background-image:url(/images/BT-News-Tab.jpg); background-repeat:no-repeat; text-indent: -999em;}
.btn_head_npp1 a { width: 216px; height: 88px; background-position: 0px 0;}
.btn_head_npp2 a { width: 216px; height: 88px; background-position: -216px 0;}
.btn_head_npp3 a { width: 216px; height: 88px; background-position: -432px 0;}
.btn_head_npp1 a:hover { background-image:url(/images/BT-News-Tab-hover.jpg); background-position: 0px 0px;}
.btn_head_npp2 a:hover { background-image:url(/images/BT-News-Tab-hover.jpg); background-position: -216px 0px;}
.btn_head_npp3 a:hover { background-image:url(/images/BT-News-Tab-hover.jpg); background-position: -432px 0px;}

@media screen and (max-width: 90em){
	.paragraph3{margin: 10px 90px;}
}
@media screen and (max-width: 85.375em){
	.paragraph3{margin: 10px 60px;}
}
@media screen and (max-width: 48em){
	.paragraph3{margin: 10px 20px;}
	.news-box{height: auto; margin: 10px 10px;}
	.btn_head_news {margin: 10px; padding: 10px 0px;}
	/*.btn_head_npp {margin: 10px; padding: 10px 0px;}*/
}

@media screen and (max-width: 40em){
	.news-container{width: 100%; }
	.paragraph3{margin: 10px 0px; padding: 0 45px;}
	.btn-navbox {margin: 5px 0;}
	.btn_head_news li { float:left; margin-right: 0px;}
	.btn_head_news li a{ display:block; background-image:url(../images/BT-New&Pro.jpg); background-repeat:no-repeat; text-indent: -999em; background-size: 350px;}
	.btn_head_news1 a { width: 174px; height: 70px; background-position: 0px 0;}
	.btn_head_news2 a { width: 174px; height: 70px; background-position: -174px 0;}
	.btn_head_news1 a:hover { background-image:url(../images/BT-New&Pro-hover.jpg); background-position: 0px 0px;}
	.btn_head_news2 a:hover { background-image:url(../images/BT-New&Pro-hover.jpg); background-position: -174px 0px;}

	.btn_head_npp1 a { width: 174px; height: 60px; background-position: -20px -13px;}
	.btn_head_npp2 a { width: 174px; height: 60px; background-position: -250px -13px;}
	.btn_head_npp3 a { width: 174px; height: 60px; background-position: -455px -13px;}
	.btn_head_npp1 a:hover { background-image:url(../images/BT-News-Tab-hover.jpg); background-position: -20px -13px;}
	.btn_head_npp2 a:hover { background-image:url(../images/BT-News-Tab-hover.jpg); background-position: -250px -13px;}
	.btn_head_npp3 a:hover { background-image:url(../images/BT-News-Tab-hover.jpg); background-position: -455px -13px;}

}
@media screen and (max-width: 38em){
	.paragraph3{margin: 10px 0px; padding: 0 0 }
	.news-box{height: auto; margin: 5px 10px;}
	.news-box{height: auto; margin: 5px 10px;}
}

/*--------------- more news ------------------*/
.news-container2{width: 100%; max-width: 1200px; margin: 10px 0px; background: #fff; border-radius: 10px; float: left; padding: 10px;}
.morenews-table > table,thead,th,tr,td {
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}
.morenews-table > thead > tr > th {color: #069;}
.morenews-table > thead > tr > th > img {width:8px; max-width: none;}
th{font-weight: 400;}
th > a {color: #666;}
th > a:hover {color: #999; text-decoration: none;}
.th-space1{width: 15px;}
.th-space2{width: 50px;}
.morenews > a > strong {text-decoration: none; color: #006699;}
.morenews > a > strong:hover {text-decoration: none; color: #ff6633;}
.morenews{float: right; margin: 20px 0;}
.morenews-table{max-width: 700px;}
.newsdate {width: 90px; text-align: right;}
@media screen and (max-width: 90em){
	.news-container2{width: 100%;}
}
@media screen and (max-width: 64em){
	.news-container2{width: 100%;}
}
@media screen and (max-width: 48em){
	th{font-size: 13px;}
	th > a {font-size: 13px;}
	th > a:hover {color: #999; text-decoration: none;}
	.news-container2{width: 92%;}
	.th-space2{ width: 15px; }
}
@media screen and (max-width: 40em){
	.news-container2{width: 100%;}
}
/*------------------- details ---------------------*/
.details-container{width: 100%; max-width: 1200px; margin: 10px 0px; background: #fff; border-radius: 10px; float: left; padding: 10px; margin-bottom: 30px;}
.details-body{max-width: 860px; text-align: left; margin-top: 20px;}
.box-youtube{margin-top: 20px;}
.box-button{max-width: 100%; background: #fbfbfb; margin-top: 30px; padding-right: 0px; padding-left: 0px; border: 1px solid #cecece; clear: both;}
.youtube-responsive{width: 100%; max-width: 475px; height: 285px;}
.details-head{width: 100%; background: #dbdbdb; padding: 0 15px;}
.details-bt > ul {height: 200px;}
.details-bt > ul > li {max-width: 289px; height: 50px; margin: 20px 0;}
.details-bt > ul > li > a.entersite-bt {background: url(/images/entersite.png) no-repeat; max-width: 100%; background-size: 100%; display: block; height: 100%;}
.details-bt > ul > li > a.entersite-bt:hover {background: url(/images/entersite-hover.png) no-repeat; max-width: 100%; background-size: 100%;}
.details-bt > ul > li > a.download-bt{background: url(/images/download-bt.png) no-repeat; max-width: 100%; background-size: 100%; display: block; height: 100%;}
.details-bt > ul > li > a.download-bt:hover {background: url(/images/download-bt-hover.png) no-repeat; max-width: 100%; background-size: 100%;}
.details-bt > ul > li > a.topup-bt{background: url(/images/topup-bt.png) no-repeat; max-width: 100%; background-size: 100%; display: block; height: 100%;}
.details-bt > ul > li > a.topup-bt:hover {background: url(/images/topup-bt-hover.png) no-repeat; max-width: 100%; background-size: 100%;}
.details > img {max-width: 100%; background-size:100%;}
.more-gamedetails{width: 100%; padding: 0 0px;}
.details-topic {margin: 8px 0 8px 0;}
.details {margin: 8px 0 8px 0;}
.col-sm-3 > a {color: #666; text-decoration: none;}
.col-sm-3 > a:hover {color: #111; text-decoration: none;}
.details-online{border-bottom: 2px solid #3399ff;}
.details-mobile{border-bottom: 2px solid #ff6600;}

.details-bt2{
	width: 100%;
	text-align: center;
	display: block;
}
.details-bt2 > ul {
	overflow: hidden;
	margin-top: 0px;
	width: 100%;
	height: 200px;
}
.details-bt2 > ul > li {
	display: inline-block;
	position: relative;
	margin: 10px 10px;
}
.details-bt2 > ul > li > a.entersite-bt {background: url(/images/entersite.png) no-repeat; width:289px; background-size: 100%; display: block; height: 47px;}
.details-bt2 > ul > li > a.entersite-bt:hover {background: url(/images/entersite-hover.png) no-repeat; height: 47px;}
.details-bt2 > ul > li > a.download-bt{background: url(/images/download-bt.png) no-repeat; width:289px; background-size: 100%; display: block; height: 47px;}
.details-bt2 > ul > li > a.download-bt:hover {background: url(/images/download-bt-hover.png) no-repeat; height: 47px;}
.details-bt2 > ul > li > a.topup-bt{background: url(/images/topup-bt.png) no-repeat; width:289px; background-size: 100%; display: block; height: 47px;}
.details-bt2 > ul > li > a.topup-bt:hover {background: url(/images/topup-bt-hover.png) no-repeat; height: 47px;}


@media screen and (max-width: 767px){
	.details {margin: 0px; margin-bottom: 20px;}
	.details-topic {margin: 8px 0 0;}
	.details-bt{clear: both;}
}
/*------------------- fullnews ------------------*/
.fullnews-table {border: 1px solid; max-width: 100%;}
.fullnews-table > tr,td{border: 1px solid; vertical-align: top;}
.fullnews-table > tbody > tr > td > img {width: 100%; border: 0;}
.fullnews-table > tbody > tr > img {width: 100%; border: 0;}
img{max-width: 100%;}
.fullnews-title{color: #0B66A0; font-weight: 700; font-size: 12px;}
.fullnews-date{color: #FF0078; font-weight: 600; font-size: 12px}
.fullnews {margin: 8px 0 8px 0;}
.fullnews {font-size: 12px; color: #000;}

/*----------------- already have ID? -----------------*/
.youhaveid{
	width: 100%;
/*	height: 170px;*/
	text-align: center;
	display: block;
}
.youhaveid > ul {
	overflow: hidden;
	margin-top: 0px;
	width: 100%;
	height: 200px;
}
.youhaveid > ul > li {
	display: inline-block;
	position: relative;
	margin: 10px 10px;
}
.youhaveid > ul > li > a.alreadyhave-bt {background: url(/images/alreadyhave.png) no-repeat; width: 210px; background-size: 100%; display: block; height: 47px;}
.youhaveid > ul > li > a.alreadyhave-bt:hover {background: url(/images/alreadyhave-hover.png) no-repeat;}
.youhaveid > ul > li > a.donthave-bt{background: url(/images/donthave.png) no-repeat; max-width: 100%; width: 210px; background-size: 100%; display: block; height: 47px;}
.youhaveid > ul > li > a.donthave-bt:hover {background: url(/images/donthave-hover.png) no-repeat;}

.youhaveid > ul > li > .login-bt { background: url(/images/bt-regisvip-login.png); width: 210px; background-size: 100%; display: block; height: 47px;}
.youhaveid > ul > li > .login-bt:hover {background: url(/images/bt-regisvip-login-hover.png) no-repeat; cursor:pointer;}
.youhaveid > ul > li > .forgetpwd-bt {background: url(/images/bt-regisvip-forgetpwd.png) no-repeat; max-width: 100%; width: 210px; background-size: 100%; display: block; height: 47px;}
.youhaveid > ul > li > .forgetpwd-bt:hover {background: url(/images/bt-regisvip-forgetpwd-hover.png) no-repeat; cursor:pointer;}


#div_process{
	font-size:0.85em;
	display:none;
	margin-top: 10px;
	/*text-align:center;*/
}

/*---------------------- Profile -------------------------*/

.details-body .label {
	display: block; 
	color: #292FF8;
	width: 35%; 
	text-align: left; 
	float: left; 
	font-size: 1em;
	height: 26px;
	line-height: 24px;
	vertical-align: top; 
	margin-left: 5px;	
}	
.details-body div.text { margin: 0; padding: 0; clear: left; margin-bottom: 10px; } 
.details-body .col2 { margin-left: 36%; font-size: 1em; color:#555; line-height: 26px; vertical-align: top; text-align:left}

.youhaveid > ul > li > a.bt-change_pwd {background: url(../images/bt-changePwd.png) no-repeat; width: 210px; background-size: 100%; display: block; height: 47px;}
.youhaveid > ul > li > a.bt-change_pwd:hover {background: url(../images/bt-changePwd-hover.png) no-repeat;}
.youhaveid > ul > li > a.bt-edit_profile{background: url(../images/bt-editProfile.png) no-repeat; max-width: 100%; width: 210px; background-size: 100%; display: block; height: 47px;}
.youhaveid > ul > li > a.bt-edit_profile:hover {background: url(../images/bt-editProfile-hover.png) no-repeat;}
.youhaveid > ul > li > a.bt-activate_game {background: url(../images/bt-activateGame.png) no-repeat; width: 210px; background-size: 100%; display: block; height: 47px;}
.youhaveid > ul > li > a.bt-activate_game:hover {background: url(../images/bt-activateGame-hover.png) no-repeat;}
.youhaveid > ul > li > a.bt-activate_winnervip{background: url(../images/bt-activateWinnerVIP.png) no-repeat; max-width: 100%; width: 210px; background-size: 100%; display: block; height: 47px;}
.youhaveid > ul > li > a.bt-activate_winnervip:hover {background: url(../images/bt-activateWinnerVIP-hover.png) no-repeat;}
.youhaveid > ul > li > a.bt-binding_id{background: url(../images/bt-bindingID.png) no-repeat; max-width: 100%; width: 210px; background-size: 100%; display: block; height: 47px;}
.youhaveid > ul > li > a.bt-binding_id:hover {background: url(../images/bt-bindingID-hover.png) no-repeat;}

.bt-activate-mobile { text-align:center; color: #FFF; background-color: #FA7D00; display: block; height: 27px; width: 150px; border-top-left-radius: 6px; border-bottom-right-radius: 6px;}
.bt-activate-mobile:hover { color: #FFF; background-color: #E87400; text-decoration:none }

.youhaveid .gamepic{
	margin-left: 15px;
	margin-bottom: 5px;
	border: none;
}

@media screen and (max-width: 500px){
	.youhaveid > ul { height: 300px; }
	.details-body .label { font-size: 0.9em; width: 37%; }
	.details-body .col2 { font-size: 0.9em; margin-left: 38%; }
}
@media screen and (max-width: 400px){
	.details-body .label { margin-left: auto; width: 40%; }
	.details-body .col2 { margin-left: 41%; }
}
@media screen and (max-width: 360px){
	.details-body .label { margin-left: auto; width: 43%; }
	.details-body .col2 { margin-left: 44%; }
}


/*------------------ edit profile ----------------*/
#frmEditprofile .label {
	display: block; 
	color: #292FF8;
	width: 30%; 
	text-align: left; 
	float: left; 
	font-size: 1em;
	height: 26px;
	line-height: 24px;
	vertical-align: top; 
	margin-left: 5px;	
}	
#frmEditprofile .details-body .col2 { margin-left: 31%; font-size: 1em; color:#555; line-height: 26px; vertical-align: top; text-align:left}
#frmEditprofile #txt_address1, #frmEditprofile #txt_address2 {
	width: 98%; 
	max-width: 350px;
}
#frmEditprofile #txt_email {
	width: 98%;
	max-width: 300px;
}

@media screen and (max-width: 720px){
	#frmEditprofile .details-body .label { width: 35%; }
	#frmEditprofile .details-body .col2 { margin-left: 36%; }
}
@media screen and (max-width: 520px){
	#frmEditprofile .details-body .label { width: 40%; }
	#frmEditprofile .details-body .col2 { margin-left: 41%; }
}
@media screen and (max-width: 480px){
	#frmEditprofile .details-body .label { margin-left: auto; width: 40%; padding: 0; }
	#frmEditprofile .details-body .col2 { clear: left; margin-left: auto;}
}

/*----------- ActivateID css --------------*/
.form_activateid {margin: 20px 0px; min-height: 320px;}
.form_activateid .control-label{
	padding-top: 6px;
	width: 38%;
	display:block;
	text-align: right;
	float: left; 
}

.form_activateid .col2 { 
	display: block; 
	width: 60%;
	margin-left: 39%;
	max-width: 400px;
	text-align:left;
} 

.form_activateid #txt_userid{ background-color:#eee; }

@media screen and (max-width: 360px){
	.form_activateid .control-label{ text-align: left; }
	.form_activateid .label { margin-left: auto; width: 40%; padding: 0; text-align: left }
	.form_activateid .col2{ clear:left; width: 90%; margin-left: 0px; }
}

/*----------------- about ---------------------*/
.btn-navbox {margin: 10px 0;}
.btn_head_about {position:relative;left: 0px;}
.btn_head_about li { float:left; margin-right: 0px; margin-bottom: 5px}
.btn_head_about li a{ display:block; background-image:url(../images/bt-about.jpg); background-repeat:no-repeat; text-indent: -999em;}
.btn_head_about1 a { width: 213px; height: 88px; background-position: 0px 0;}
.btn_head_about2 a { width: 213px; height: 88px; background-position: -213px 0;}
.btn_head_about3 a { width: 213px; height: 88px; background-position: -434px 0;}
.btn_head_about4 a { width: 250px; height: 88px; background-position: -652px 0;}
.btn_head_about1 a:hover { background-image:url(../images/bt-about-hover.jpg); background-position: 0px 0px;}
.btn_head_about2 a:hover { background-image:url(../images/bt-about-hover.jpg); background-position: -213px 0px;}
.btn_head_about3 a:hover { background-image:url(../images/bt-about-hover.jpg); background-position: -434px 0px;}
.btn_head_about4 a:hover { background-image:url(../images/bt-about-hover.jpg); background-position: -652px 0px;}
.about-bt{margin: 8px 0 8px 0; text-align: center;}
.text-about{color: #fe004a; text-align: left; font-family: kanda; font-size: 3.5em; font-weight: 900; margin-bottom: 10px;}
.about{width: 100%;}
.about > ul {width: 100%; margin: 20px 0; text-align: left;}
.about > ul > li {margin: 30px 10px; list-style: disc inside; color: #505050;}
.about > ul > li > strong{text-decoration: none; color: #fe004a; font-weight: 700;}
.about > ul > li > a{text-decoration: none; color: #5d8610; font-weight: 700;}
.about-container{width: 80%; margin: 0 auto; background: #fff; border-radius: 10px; padding: 10px;}
.details-container{width: 100%; margin: 10px 0px; background: #fff; border-radius: 10px; float: left; padding: 10px; text-align: center;}
.bt-about{display: none;}

/* our business */
.ob-body{max-width: 890px; text-align: left; margin-top: 20px;}
.about2{width: 100%;}
.about2 > ul {width: 100%; margin: 20px 0; text-align: left;}
.about2 > ul > li {margin: 20px 10px; list-style: none; color: #505050;}
.about2 > ul > li > strong{text-decoration: none; color: #fe004a; font-weight: 700;}
.about2 > ul > li > a{text-decoration: none; color: #5d8610; font-weight: 700;}

@media screen and (max-width: 1570px){
	.btn_head_about {display: flex;}
	.btn_head_about1 a { width: 143px; height: 88px; background-position: -30px 0;}
	.btn_head_about2 a { width: 158px; height: 88px; background-position: -245px 0;}
	.btn_head_about3 a { width: 152px; height: 88px; background-position: -470px 0;}
	.btn_head_about4 a { width: 200px; height: 88px; background-position: -682px 0;}
	.btn_head_about1 a:hover { background-image:url(../images/bt-about-hover.jpg); background-position: -30px 0px;}
	.btn_head_about2 a:hover { background-image:url(../images/bt-about-hover.jpg); background-position: -245px 0px;}
	.btn_head_about3 a:hover { background-image:url(../images/bt-about-hover.jpg); background-position: -470px 0px;}
	.btn_head_about4 a:hover { background-image:url(../images/bt-about-hover.jpg); background-position: -682px 0px;}
}
@media screen and (max-width: 1150px){
	.about-bt{display:none;}
	.bt-about{display: block;  width: 100%;}
	.about-bt-01 {margin: 0; background: #bf256e;}
	.about-bt-02 {margin: 0; background: #00bdf4;}
	.about-bt-03 {margin: 0; background: #158a9b;}
	.about-bt-04 {margin: 0; background: #4e236a;}
	.about-bt-01 a:hover {margin: 6px 0; padding: 10px;}
	.about-bt-02 a:hover {margin: 6px 0; padding: 10px;}
	.about-bt-03 a:hover {margin: 6px 0; padding: 10px;}
	.about-bt-04 a:hover {margin: 6px 0; padding: 10px;}
}
@media screen and (max-width: 48em){
	.ob-body{max-width: 100%;}
	.about-container{width: 90%;}
	.about-bt-01{margin: auto;}
	.about-bt-02{margin: auto;}
	.about-bt-03{margin: auto;}
	.about-bt-04{margin: auto;}
	.bt-about{display: block; width: 100%;}
	.text-about{font-size: 2.5em;}
}

/*------------------ Register Result ---------------------*/
.result-table{ width: 80%; max-width: 800px;  text-align: center; vertical-align: middle; margin: 20px 0; border:0;}
.result-table > tbody > tr > td {height: 30px; border: 2px solid #fff;}
.topic-result{background: #f9a912; color: #fff; font-weight: 600;}
.body-data{background: #f3f3f3; font-weight: 600;}
.body-data-2{background: #e9e9e9; font-weight: 600;}
.body-result{color:#009de2;}
.body-result-fail{color:#D5393C}
.text-result{color: #fe6a00;}
.result-bt{width: 100%; height: 80px; text-align: center; display: block;}
.result-bt > ul { overflow: hidden; margin-top: 0px; width: 100%; height: 200px; }
.result-bt > ul > li { display: inline-block; position: relative; margin: 10px 10px; }
.result-bt > ul > li > a.yes-bt {background: url(../images/yes-bt.png) no-repeat; width: 210px; background-size: 100%; display: block; height: 47px;}
.result-bt > ul > li > a.yes-bt:hover {background: url(../images/yes-bt-hover.png) no-repeat; width: 210px; background-size: 100%; display: block; height: 47px;}
.result-bt > ul > li > a.no-bt{background: url(../images/no-bt.png) no-repeat; max-width: 100%; width: 210px; background-size: 100%; display: block; height: 47px;}
.result-bt > ul > li > a.no-bt:hover {background: url(../images/no-bt-hover.png) no-repeat; width: 210px; background-size: 100%; display: block; height: 47px;}
.result-bt > ul > li > a.ok-bt{background: url(../images/bt-ok.png) no-repeat; max-width: 100%; width: 210px; background-size: 100%; display: block; height: 47px;}
.result-bt > ul > li > a.ok-bt:hover {background: url(../images/bt-ok-hover.png) no-repeat; width: 210px; background-size: 100%; display: block; height: 47px;}

/*@media screen and (max-width: 1280px){
	.details-container{ width: 98%; }
}*/
@media screen and (max-width: 1024px){
	.details-container{ width: 98%; margin-left: 15px;}
}
@media screen and (max-width: 768px){
	.result-table{ width: 90%; }
	.details-container{ width: 98%; margin-left: 14px;}
}
@media screen and (max-width: 640px){
	.result-table{ width: 96%; }
	.details-container{ width: 99%; margin-left: 5px;}
}
@media screen and (max-width: 510px){
	.result-bt{ height: 160px; }
}

/*------------------ Jobs ---------------------*/
@font-face {
    font-family: kanda;
	src: url('../fonts/PSL-KandaBold.eot');
	src: local('☺'), url('../fonts/PSL-KandaBold.woff') format('woff'), url('../fonts/PSL-KandaBold.ttf') format('truetype'), url('../fonts/PSL-KandaBold.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
.text-jobs{color: #fe004a; text-align: left; font-family: kanda; font-size: 4.0em; font-weight: bold;}
.text-jobs2{color: #fe004a; text-align: left; font-family: kanda; font-size: 3.0em; font-weight: bold;}
.text-jobs3{color: #fe004a; text-align: left; font-family: kanda; font-size: 2.5em; font-weight: bold;}
.text-jobs4{color: #fe004a; text-align: left; font-family: kanda; font-size: 2.0em; font-weight: bold;}
.details-body > p {text-align: left; margin-bottom: 25px; font-size: 1.1em;}
.positions{width: 100%;}
.positions > ul {width: 100%; margin: 5px 0;}
.positions > ul > li {margin: 10px 10px; list-style: disc inside; font-size: 1.1em;}
.positions > ul > li > a{text-decoration: none; font-size: 1.1em;}
.job-address{color: #fe004a;}
.job-email{color: #fe004a;}

@media screen and (max-width: 48em){
	.text-jobs{font-size: 3.25em;}
	.text-jobs2{font-size: 2.5em;}
	.text-jobs3{font-size: 2.0em;}
	.text-jobs4{font-size: 1.75em;}
	.positions > ul {width: 100%; margin: 20px 0;}
}

/*------------------ service ---------------------*/
.service-body{text-align: center;}
.service{margin: 15px 0; width: 315px; height: auto;}
@media screen and (max-width: 40em){
	.service{margin: 10px 0; height: auto;}
}

/* ------------------- Request Clinet ------------------- */
.frmReqClient .label{
	display: block; 
	color: #292FF8;
	width: 30%; 
	text-align: left; 
	float: left; 
	font-size: 1em;
	height: 26px;
	line-height: 24px;
	vertical-align: top; 
	margin-left: 5px;
}
.frmReqClient .col2{ margin-left: 31%; font-size: 1em; color:#555; line-height: 26px; vertical-align: top; text-align:left }

@media screen and (max-width: 640px){
	.frmReqClient .label{ width: 35%; }
	.frmReqClient .col2{ margin-left: 38%; }
}

@media screen and (max-width: 480px){
	.frmReqClient .label{ width: 50%; padding: 0px; }
	.frmReqClient .col2 { width: 96%; clear: left; margin-left: 5px; }
}

/* ----------------------- Terms of service -------------------------- */
.form-tos h1{	color:#FF5200; font-size: 1.85em; line-height: 1.8; margin: 20px 0px 5px; }
.form-tos h2{	color: #0676FF; font-size: 1.3em; line-height: 1.5; margin: 15px 0px 5px; }
.form-tos p{font-size: 1em;}

@media screen and (max-width: 640px){
.form-tos h1{	font-size: 1.7em; }
.form-tos h2{	font-size: 1.2em; }
}

/*------------------ payment ---------------------*/
.payment-body{text-align: center;}
.payment{margin: 15px 0; width: 315px; height: auto;}
@media screen and (max-width: 40em){
	.payment{margin: 10px 0; height: auto;}
}

/*------------------ BindingAccount ---------------------*/
.form-binding-account { margin: 20px 0px; min-height: 250px; }
.form-binding-account #txt_email{ width: 96%; max-width: 300px; }
.form-binding-account #binding_desc { width: 80%; margin-left: 10%; }
.form-binding-account .control-label{
	padding-top: 6px;
	width: 20%;
	display:block;
	text-align: left;
	float: left; 
	margin-left: 10%;
}

.form-binding-account .col2 { 
	display: block; 
	width: 70%;
	margin-left: 30%;
	text-align:left;
} 

.form-binding-account h5 {
	line-height: 1.8;
	font-weight: 600;
	color: red;
	font-size: 12px;
	width: 90%;
}

@media screen and (max-width: 800px){
	.form-binding-account .control-label{ margin-left: 5%; font-size: 0.85em;}
	.form-binding-account #binding_desc { margin-left: 5%; width: 90%; font-size: 0.85em; }
}
@media screen and (max-width: 640px){
	.form-binding-account .control-label{ width: 30%; }
	.form-binding-account .col2 { width: 60%; margin-left: 35%; }
}
@media screen and (max-width: 480px){
	.form-binding-account .control-label{ width: 50%; }
	.form-binding-account .col2 { width: 95%; clear: left; margin-left: 5% }
}

/*------------------ winnercard ---------------------*/
.text-left{text-align: left;}
.winnercard-logo{padding: 20px;}
.title-text1{color: #06F; }
.title-text2{color: #E30FDE; text-align:left; }
.text1{text-align: left}

div.gamebox {
	max-width: 100%;
	float: left;
}
div.gamebox2 {
	width: 100%;
	max-width: 100%;
	float: left;
}

div.box {
	box-sizing: border-box;
	width: auto;
	border: 1px solid;
	float: left;
	padding: 30px;
}
div.box2 {
	box-sizing: border-box;
	width: auto;
	border: 1px solid;
	float: left;
	padding: 10px 30px;
}
div.box3 {
	box-sizing: border-box;
	width: 280px;
	height: 280px;
	border: 1px solid;
	float: left;
	padding: 10px 30px;
}

box-padding{
	border-bottom: 1px solid blue;
}
div.cardbox {
	box-sizing: border-box;
	width: auto;
	float: left;
	padding: 5px;
}
hr.gamebox{
	border-color: #FE004A;
	margin-top: 5px;
	margin-bottom: 5px;
}
div.box > a{color:#FE004A; text-decoration: none; }
div.box > a:hover{color:#F9708D; text-decoration: none; }
.gamebox-topic{color:#FE004A; text-align: left; font-size: 2.4em; line-height: 1.2; font-family: kanda;}
.agent-topic{color:#06F; text-align: left; font-size: 2.4em; line-height: 1.2; font-family: kanda;}
.agent-topic-line{border-bottom: 1px solid; color:#06F; margin-bottom: 20px; }
.logo_agent{ padding: 10px 3px;}

@media screen and (max-width: 48em){
	.gamebox-topic{font-size: 2em; line-height: 1.2;}
	.agent-topic{font-size: 2em; line-height: 1.2;}
	div.box {max-width: 150px;padding: 5px;}
	div.cardbox {max-width: 150px;}
}
@media screen and (max-width: 20em){
	div.box {max-width: 120px;padding: 5px; overflow: hidden; height: 150px;}
	div.cardbox {max-width: 120px;}
}

/*----------------- winner club ---------------------*/
.btn_head_winclub {position:relative;left: 0px; float: left;}
.btn_head_winclub li { float:left; margin-right: 0px;}
.btn_head_winclub li a{ display:block; background-image:url(../images/bt-winnerclub.jpg); background-repeat:no-repeat; text-indent: -999em;}
.btn_head_winclub1 a { width: 187px; height: 88px; background-position: 0px 0;}
.btn_head_winclub2 a { width: 184px; height: 88px; background-position: -187px 0;}
.btn_head_winclub3 a { width: 180px; height: 88px; background-position: -371px 0;}
.btn_head_winclub4 a { width: 177px; height: 88px; background-position: -551px 0;}
.btn_head_winclub5 a { width: 190px; height: 88px; background-position: -728px 0;}
.btn_head_winclub1 a:hover { background-image:url(../images/bt-winnerclub-hover.jpg); background-position: 0px 0px;}
.btn_head_winclub2 a:hover { background-image:url(../images/bt-winnerclub-hover.jpg); background-position: -187px 0px;}
.btn_head_winclub3 a:hover { background-image:url(../images/bt-winnerclub-hover.jpg); background-position: -371px 0px;}
.btn_head_winclub4 a:hover { background-image:url(../images/bt-winnerclub-hover.jpg); background-position: -551px 0px;}
.btn_head_winclub5 a:hover { background-image:url(../images/bt-winnerclub-hover.jpg); background-position: -728px 0px;}
.winclub-bt{margin: 8px 0 8px 0; text-align: center;}
.winclub{width: 100%;}
.winclub > ul {width: 100%; margin: 20px 0; text-align: left;}
.winclub > ul > li {margin: 30px 10px; list-style: disc inside; color: #505050;}
.winclub > ul > li > strong{text-decoration: none; color: #fe004a; font-weight: 700;}
.winclub > ul > li > a{text-decoration: none; color: #5d8610; font-weight: 700;}
.winclub-container{width: 83%; margin: 0 auto; background: #fff; border-radius: 10px; padding: 10px;}
.bt-winclub{display: none;}

.winclub2{width: 100%;}
.winclub2 > ul {width: 100%; margin: 20px 0; text-align: left;}
.winclub2 > ul > li {margin: 20px 10px; list-style: none; color: #505050;}
.winclub2 > ul > li > strong{text-decoration: none; color: #fe004a; font-weight: 700;}
.winclub2 > ul > li > a{text-decoration: none; color: #5d8610; font-weight: 700;}

.winnerclub-logo{padding: 20px;}
.winclub-topic{color:#FE004A; text-align: left; font-size: 1.8em; line-height: 1.2; font-family: kanda;}

.tablewinclub{border: 2px solid #000033; color:black;}
.goldclass{background: #FF9900; text-align: center;}
.platinumclass{background: #5897E4; text-align: center;}
.winclubpadding{padding: 8px;}

@media screen and (max-width: 1570px){
	.btn_head_winclub1 a { width: 135px; height: 88px; background-position: -25px 0;}
	.btn_head_winclub2 a { width: 135px; height: 88px; background-position: -210px 0;}
	.btn_head_winclub3 a { width: 155px; height: 88px; background-position: -385px 0;}
	.btn_head_winclub4 a { width: 150px; height: 88px; background-position: -570px 0;}
	.btn_head_winclub5 a { width: 150px; height: 88px; background-position: -740px 0;}
	.btn_head_winclub1 a:hover { background-image:url(../images/bt-winnerclub-hover.jpg); background-position: -25px 0px;}
	.btn_head_winclub2 a:hover { background-image:url(../images/bt-winnerclub-hover.jpg); background-position: -210px 0px;}
	.btn_head_winclub3 a:hover { background-image:url(../images/bt-winnerclub-hover.jpg); background-position: -385px 0px;}
	.btn_head_winclub4 a:hover { background-image:url(../images/bt-winnerclub-hover.jpg); background-position: -570px 0px;}
	.btn_head_winclub5 a:hover { background-image:url(../images/bt-winnerclub-hover.jpg); background-position: -740px 0px;}
	.winclub-container{width: 100%;}
}
@media screen and (max-width: 1150px){
	.winclub-bt{display:none;}
	.bt-winclub{display: block;  width: 100%;}
	.winclub-bt-01 {margin: 0; background: #bf256e;}
	.winclub-bt-02 {margin: 0; background: #00bdf4;}
	.winclub-bt-03 {margin: 0; background: #158a9b;}
	.winclub-bt-04 {margin: 0; background: #4e236a;}
	.winclub-bt-05 {margin: 0; background: #f67927;}
	.winclub-bt-01 a:hover {margin: 6px 0; padding: 10px;}
	.winclub-bt-02 a:hover {margin: 6px 0; padding: 10px;}
	.winclub-bt-03 a:hover {margin: 6px 0; padding: 10px;}
	.winclub-bt-04 a:hover {margin: 6px 0; padding: 10px;}
	.winclub-bt-05 a:hover {margin: 6px 0; padding: 10px;}
}
@media screen and (max-width: 48em){
	.winclub-container{width: 90%;}
	.winclub-bt-01{margin: auto;}
	.winclub-bt-02{margin: auto;}
	.winclub-bt-03{margin: auto;}
	.winclub-bt-04{margin: auto;}
	.bt-winclub{display: block; width: 100%;}
	.winclub-container{width: 100%;}
}

/*----------------- get reward ---------------------*/
.tablegetreward{border: 2px solid red; color:black;}
.rewardtopic{background: #F7F4AE; text-align: center;}
table.tablegetreward > thead > tr > th {color:black;}
table.tablegetreward > tbody > tr > td {color:black; border-color: red; max-width: 600px;}
table.tablegetreward > tbody > tr > td > img {width: 100%; padding: 10px 80px;}
table.rewarddetail{margin: 10px;}
table.rewarddetail > tbody > tr > td{border: 0; padding: 0 5px;}

.selectGame{
	background-color: #7AB700; 
	border-color: #629802;
	padding: 5px;
	margin: 5px;
	cursor: pointer;
	outline: medium none;
	border-radius: 4px;
	color:#fff;
	text-shadow: 1px 1px 1px #333;
}
.textwarn{color:red; font-size: 0.9em;}

.pagenumber{text-align:center; margin: 15px 0; color: }
.pagenumber > p > a{color:#FE004A; letter-spacing: 3px;}
.pagenumber > p > a:hover{color:#FF6E98; text-decoration: none;}
@media screen and (max-width: 48em){
	table.tablegetreward > tbody > tr > td > img {width: 100%; padding: 0;}
}
/*----------------- winner vip ---------------------*/
.btn_head_vip {position:relative;left: 0px; float: left;}
.btn_head_vip li { float:left; margin-right: 0px;}
.btn_head_vip li a{ display:block; background-image:url(../images/bt-winnervip.jpg); background-repeat:no-repeat; text-indent: -999em;}
.btn_head_vip1 a { width: 187px; height: 88px; background-position: 0px 0;}
.btn_head_vip2 a { width: 184px; height: 88px; background-position: -187px 0;}
.btn_head_vip3 a { width: 180px; height: 88px; background-position: -371px 0;}
.btn_head_vip4 a { width: 177px; height: 88px; background-position: -551px 0;}
.btn_head_vip5 a { width: 190px; height: 88px; background-position: -728px 0;}
.btn_head_vip1 a:hover { background-image:url(../images/bt-winnervip-hover.jpg); background-position: 0px 0px;}
.btn_head_vip2 a:hover { background-image:url(../images/bt-winnervip-hover.jpg); background-position: -187px 0px;}
.btn_head_vip3 a:hover { background-image:url(../images/bt-winnervip-hover.jpg); background-position: -371px 0px;}
.btn_head_vip4 a:hover { background-image:url(../images/bt-winnervip-hover.jpg); background-position: -551px 0px;}
.btn_head_vip5 a:hover { background-image:url(../images/bt-winnervip-hover.jpg); background-position: -728px 0px;}
.vip-bt{margin: 8px 0 8px 0; text-align: center;}
.vip{width: 100%;}
.vip > ul {width: 100%; margin: 20px 0; text-align: left;}
.vip > ul > li {margin: 30px 10px; list-style: disc inside; color: #505050;}
.vip > ul > li > strong{text-decoration: none; color: #fe004a; font-weight: 700;}
.vip > ul > li > a{text-decoration: none; color: #5d8610; font-weight: 700;}
.vip-container{width: 83%; margin: 0 auto; background: #fff; border-radius: 10px; padding: 10px;}
.bt-vip{display: none;}

.vip2{width: 100%;}
.vip2 > ul {width: 100%; margin: 0px 0; text-align: left;}
.vip2 > ul > li {margin: 10px 40px; list-style: none; color: #505050;}
.vip2 > ul > li > strong{text-decoration: none; color: #fe004a; font-weight: 700;}
.vip2 > ul > li > a{text-decoration: none; color: #5d8610; font-weight: 700;}

.vip-logo{padding: 20px;}
.vip-topic{color:#FE004A; text-align: left; font-size: 1.8em; line-height: 1.2; font-family: kanda;}

.tablevip{border: 2px solid #000033; color:black;}
.goldclass{background: #FF9900; text-align: center;}
.platinumclass{background: #5897E4; text-align: center;}
.vippadding{padding: 7px;}

.vip-body{text-align:center; width: 90%;}
.vip-body img{margin: 10px 0px 15px;}

@media screen and (max-width: 1550px){
	.btn_head_vip1 a { width: 130px; height: 88px; background-position: -25px 0;}
	.btn_head_vip2 a { width: 170px; height: 88px; background-position: -193px 0;}
	.btn_head_vip3 a { width: 165px; height: 88px; background-position: -380px 0;}
	.btn_head_vip4 a { width: 170px; height: 88px; background-position: -556px 0;}
	.btn_head_vip5 a { width: 150px; height: 88px; background-position: -740px 0;}
	.btn_head_vip1 a:hover { background-image:url(../images/bt-winnervip-hover.jpg); background-position: -25px 0px;}
	.btn_head_vip2 a:hover { background-image:url(../images/bt-winnervip-hover.jpg); background-position: -193px 0px;}
	.btn_head_vip3 a:hover { background-image:url(../images/bt-winnervip-hover.jpg); background-position: -380px 0px;}
	.btn_head_vip4 a:hover { background-image:url(../images/bt-winnervip-hover.jpg); background-position: -556px 0px;}
	.btn_head_vip5 a:hover { background-image:url(../images/bt-winnervip-hover.jpg); background-position: -740px 0px;}
	.winclub-container{width: 100%;}
}
@media screen and (max-width: 1400px){
	.vip-container{width: 100%;}
	.btn_head_vip1 a { width: 120px; height: 88px; background-position: -30px 0;}
	.btn_head_vip2 a { width: 170px; height: 88px; background-position: -193px 0;}
	.btn_head_vip3 a { width: 165px; height: 88px; background-position: -380px 0;}
	.btn_head_vip4 a { width: 170px; height: 88px; background-position: -556px 0;}
	.btn_head_vip5 a { width: 120px; height: 88px; background-position: -757px 0;}
	.btn_head_vip1 a:hover { background-image:url(../images/bt-winnervip-hover.jpg); background-position: -30px 0px;}
	.btn_head_vip2 a:hover { background-image:url(../images/bt-winnervip-hover.jpg); background-position: -193px 0px;}
	.btn_head_vip3 a:hover { background-image:url(../images/bt-winnervip-hover.jpg); background-position: -380px 0px;}
	.btn_head_vip4 a:hover { background-image:url(../images/bt-winnervip-hover.jpg); background-position: -556px 0px;}
	.btn_head_vip5 a:hover { background-image:url(../images/bt-winnervip-hover.jpg); background-position: -757px 0px;}
}
@media screen and (max-width: 1150px){
	.vip-bt{display:none;}
	.bt-vip{display: block;  width: 100%;}
	.vip-bt-01 {margin: 0; background: #bf256e;}
	.vip-bt-02 {margin: 0; background: #00bdf4;}
	.vip-bt-03 {margin: 0; background: #158a9b;}
	.vip-bt-04 {margin: 0; background: #4e236a;}
	.vip-bt-05 {margin: 0; background: #f67927;}
	.vip-bt-01 a:hover {margin: 6px 0; padding: 10px;}
	.vip-bt-02 a:hover {margin: 6px 0; padding: 10px;}
	.vip-bt-03 a:hover {margin: 6px 0; padding: 10px;}
	.vip-bt-04 a:hover {margin: 6px 0; padding: 10px;}
	.vip-bt-05 a:hover {margin: 6px 0; padding: 10px;}
}
@media screen and (max-width: 48em){
	.vip-container{width: 90%;}
	.vip-bt-01{margin: auto;}
	.vip-bt-02{margin: auto;}
	.vip-bt-03{margin: auto;}
	.vip-bt-04{margin: auto;}
	.bt-vip{display: block; width: 100%;}
	.vip-container{width: 100%;}
	.vip-body{text-align:center; width: 100%;}
}

/*----------------- active game ---------------------*/
.active-topicbg{background: url(../images/activegame/topic-bg.png) repeat-x; height: 40px; padding: 10px 0; width: 95%;}
.active-topic{color:#fff; text-align: center; font-size: 2.3em; line-height: 1; font-family: kanda;}
.active-area{position: relative; max-width: 620px; margin-bottom: 20px;}
.active-area > a > img.active-bt{width: 25%;}
.active-area > a:hover > img.active-bt{width: 24%;}
.active-picgame {
	position: relative;
	padding: 20px;
}
.active-bt {
	float: left;
	position: absolute;
	z-index: 0;
	right: 10px;
	width: 25%;
}
.active{width: 100%;}
.active > ul {width: 100%; margin: 0px 0; text-align: left;}
.active > ul > li {margin: 5px 10px; color: red;}
.active > ul > li  > strong{text-decoration: none; color: black; font-size: 1em; font-weight: 200;}
.active > ul > li > a{text-decoration: none; color: #5d8610; font-weight: 700;}
.active-mark{display: inline; color: red;}
.active > ul > li:before {
   content: "*" ;
   padding-right: 10px;
}

/* ----------------------- winner club history -------------------*/
.history-container{
    display:table;
    width:100%;
    border-collapse: collapse;
	margin: 0 auto;
}
.tbl-row{  
     display:table-row;
     font-size: 1em;
}
.tbl-col{ 
	display:table-cell;
    text-align: left;
	font-size: 1em;
	padding:0px 2px;
}
.tbl-col1{ 
	display:table-cell;
    text-align: left;
	font-size: 1em;
	padding:0px 2px;
	width: 200px;
}
.separator3{
	clear: left; 
	margin:10px 0;
	opacity:1;
	border-width: 2px;
	border-bottom:none;
}

@media screen and (max-width: 480px){
	.history-container .tbl-col1{ 
		width: 120px;
	}
}