body.login	{
	background: url(../login_img/bg_login.jpg);
    background-attachment: fixed;
	background-position: center center;
	background-size: cover;
}
.raduis-zero	{	border-radius: 0 !important;}
a {
	color: #92badd;
	display: inline-block;
	text-decoration: none;
	font-weight: 400;
}
h2 {
	text-align: center;
	font-size: 16px;
	font-weight: 500;
	text-transform: uppercase;
	display: inline-block;
	color: #56baed;
}

/* STRUCTURE */
.wrapper {
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	min-height: 100%;
}
#formContent {
	top:30%;
	top: 7vh;
	position: relative;
	margin: 0 auto;
}
.box_deco_top {
	width: 96%;
	max-width: 500px;
	margin: 0 auto;
}
.box_deco_top > img {
	width: 100%;
	height: auto;
}
.box_wrap {
	background: url(../login_img/box_bg.png?v=1);
	background-size: cover;
	background-position: top left;
	padding: 50px 30px;
	width: 96%;
	max-width: 500px;
	margin: 0 auto;
	-webkit-box-shadow: 0 10px 10px 5px rgba(0, 0, 0, 0.5);
	box-shadow: 0 10px 10px 5px rgba(0, 0, 0, 0.5);
	text-align: center;
	border:1px solid #061620;
	position: relative;
}

#formFooter {
	padding: 2px;
	text-align: right;
	width: 90%;
}

.logo_login { width: 100%; max-width: 800px; min-width: 300px; margin: 10px auto 60px;}
.img_tit { margin: 40px 0 30px 0; display: block;}

/* TABS */
h2.inactive {	color: #cccccc;}
h2.active	{	color: #707e8f;	border-bottom: 2px solid #5fbae9;}

/* FORM TYPOGRAPHY*/
input[type=button],
input[type=submit],
input[type=reset] {
	background-color: #FFFFFF;
	border: none;
	width: 90%;
	/*padding: 15px 5px 13px 5px;*/
	text-align: center;
	text-decoration: none;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 16px;
	display: inline-block;
	cursor: pointer;
	-webkit-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
	margin: 5px 10px 7px 10px;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}
/*
input[type=button] {
	background: #3598db;
	border-bottom:4px solid #2873a6;
	border-top: 1px solid #48cdff;
	-webkit-box-shadow: 0 3px 0px 4px rgba(0, 0, 0, 0.35);
	box-shadow: 0 3px 0px 4px rgba(0, 0, 0, 0.35);
	color: #FFFFFF;
}
input[type=submit] {
	background: #ecf0f1;
	border-bottom:4px solid #bbbebf;
	border-top: 1px solid #FFFFFF;
	-webkit-box-shadow: 0 3px 0px 4px rgba(0, 0, 0, 0.35);
	box-shadow: 0 3px 0px 4px rgba(0, 0, 0, 0.35);
	color:#3a5b81;
}
input[type=reset]:hover		{	background-color:inherit;}
input[type=submit]:hover	{	background: #FFFFFF;	border-bottom:1px solid #FFFFFF;	border-top: 4px solid #bbbebf;}
input[type=button]:hover {	background: #31a4f1;	border-bottom:1px solid #48cdff;	border-top: 4px solid #2873a6;}
*/
input[type=button]:active,
input[type=submit]:active,
input[type=reset]:active {
	-moz-transform: scale(0.95);
	-webkit-transform: scale(0.95);
	-o-transform: scale(0.95);
	-ms-transform: scale(0.95);
	transform: scale(0.95);
}
input[type=text],
input[type=password],
input[type=id] {
	background-color: #e5dfbf;
	color: #afd4ff;
	padding: 15px 10px 14px 17px;
	text-align: left;
	text-decoration: none;
	display: inline-block;
	font-size: 15px;
	/*margin: 5px;*/
	width: 90%;
	border:none;
	border-top: 1px solid #0d1218;
	border-bottom: 1px solid #3b5169;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	-webkit-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
	-webkit-box-shadow: inset 0 3px 10px 0px rgba(0, 0, 0, 0.5);
	box-shadow: inset 0 3px 10px 0px rgba(0, 0, 0, 0.5);
}
input[type=text]:focus,
input[type=id]:focus {
	background-color: #ecf0f1;
	border-bottom: 1px solid #3b5169;
	color: #1c2733;
}
input[type=text]:placeholder,
input[type=id]:placeholder {
	color: #707e8f;
}


/*	Modal	*/
.modal-content {
	background:#0c1e27 url(../login_img/box_bg.png);
    background-size: cover;
    background-position: top left;
    padding: 10px;
    width: 98%;
	max-width: 340px;
    margin: 0 auto;
    -webkit-box-shadow: 0 10px 10px 5px rgb(0 0 0 / 50%);
    box-shadow: 0 10px 10px 5px rgb(0 0 0 / 50%);
    text-align: center;
    border: 1px solid #061620;
	top:20vh;
}
.modal-content.recommend { color: #FFFFFF;}
input.recommend {	width: 100%; margin: 0;}
.modal-header { border-bottom: none;}
.modal-header .modal-title {
	background: url(../img/img_element_login_box_tit.png);
	background-position: top center;
	background-repeat: no-repeat;
	height: 30px;
	width: 100%;
}
.modal-header .modal-title > span { display: none;}
.modal-footer { display: flex; border-top:none;}
.modal-footer .btn+.btn { margin: 0 0;}
.modal-footer .btn {
	padding: 20px 5px;
	line-height: 0;
	font-weight: bold;
}
.btn.join { width: 49%; margin: 0;}
.btn.closex { width: 49%; margin: 0 0 0 2% !important; color: #707070;}
.modal-backdrop.in { opacity: .75;}
.modal-content.recommend .close {
	color: #FFFFFF;
	text-shadow:0 1px 0 #000;
	top: -7px;
}

/* ANIMATIONS */
/* Simple CSS3 Fade-in-down Animation */
.fadeInDown {
	-webkit-animation-name: fadeInDown;
	animation-name: fadeInDown;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}
@-webkit-keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
@keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
/* Simple CSS3 Fade-in Animation */
@-webkit-keyframes fadeIn {
	from	{	opacity: 0;}
	to		{	opacity: 1;}
}
@-moz-keyframes fadeIn {
	from	{	opacity: 0;}
	to		{	opacity: 1;}
}
@keyframes fadeIn {
	from	{	opacity: 0;}
	to		{	opacity: 1;}
}
.fadeIn {
	opacity: 0;
	-webkit-animation: fadeIn ease-in 1;
	-moz-animation: fadeIn ease-in 1;
	animation: fadeIn ease-in 1;

	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	animation-fill-mode: forwards;

	-webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
	animation-duration: 1s;
}
.fadeIn.first {
	-webkit-animation-delay: 0.4s;
	-moz-animation-delay: 0.4s;
	animation-delay: 0.4s;
}
.fadeIn.second {
	-webkit-animation-delay: 0.6s;
	-moz-animation-delay: 0.6s;
	animation-delay: 0.6s;
}
.fadeIn.third {
	-webkit-animation-delay: 0.8s;
	-moz-animation-delay: 0.8s;
	animation-delay: 0.8s;
}
.fadeIn.fourth {
	-webkit-animation-delay: 1s;
	-moz-animation-delay: 1s;
	animation-delay: 1s;
}
/* Simple CSS3 Fade-in Animation */
.underlineHover:after {
	display: block;
	width: 0;
	height: 2px;
	background-color: #56baed;
	content: "";
	transition: width 0.2s;
}
.underlineHover:hover		{	color: #707e8f;}
.underlineHover:hover:after	{	width: 100%;}

/* OTHERS */
*:focus	{	outline: none;}
#icon	{	width: 30%;}




/*	************************************************************************	
	JOIN
	************************************************************************	*/
body.join	{
	background: url(../login_img/bg.jpg);
    background-attachment: fixed;
	background-position: center center;
	background-size: cover;
}
body.join #formContent { top: 30px;}
body.join .box_deco_top { max-width:none;}
body.join .box_wrap {
	max-width:none;
	padding: 20px 20px 40px 20px;
	width: 100%;
	border-radius: 10px;
}
body.join .img_tit { margin:20px 0 15px 0;}
body.join .img_tit > img { width: 162px;}

.container_join h1 {
	margin: 0 0 10px 0;
	padding: 0;
	text-align: center;
	width: 100%;
}
.join_wrap {
	overflow: hidden;
	width: 100%;
	margin: 0 auto;
}
.join-tb {
	margin: 0 auto;
}
.join-tb th {
	font-size: 18px;
	letter-spacing: -1px;
	padding: 20px 0 15px 0;
	background: #F3F3F3;
	border-bottom: 1px solid #16212d;
}
.join-tb .j-tit {
	font-size: 12px;
	color: #FFFFFF;
	font-weight: bold;
	width: 130px;
	text-align: left;
	padding-left: 5px;
	float: left;
}
.join-tb td {
	border-bottom: 1px solid #16212d;
	padding: 8px 0 9px 0;
	text-align: left;
	color: #abbbc5;
}
.join-tb tr:last-child td { border-bottom:none;}

input.join-put {
	width: 241px;
	border: 1px solid #0d1218;
	padding: 9px 0 7px 7px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	vertical-align: middle;
	color: #333;
}
input.join-put.banknum { width: 187px;}
.join-tb td span.js-txt {
	font-size: 11px;
	color: #abbbc5;
	display: block;
	margin-top: 5px;
	letter-spacing: -0.05rem;
}
.join-tb td > button {
	-webkit-border-radius: 4px;
	border-radius: 4px;
	border: 1px solid #0d1218;
	background: #DDDDDD;
	font-size: 12px;
	font-weight: bold;
	cursor: pointer;
	padding: 12px 9px 7px 9px;
	margin-right: 7px;
	vertical-align: middle;
	color: #707070;
}
.join-tb td > select {
	-webkit-border-radius: 4px;
	border-radius: 4px;
	border: 1px solid #0d1218;
	padding: 9px 7px 9px 7px;
	vertical-align: middle;
	color: #333;
}
.j-enter {
	text-align: center;
}
.j-enter > button {
	margin: 15px auto 25px auto;
	font-size: 14px;
}



@media (max-width: 490px) {
	body.join #formContent { top: 0;}
	body.join .box_wrap { width: 90%;}
	.join-tb td { text-align: center;}
	.join-tb .j-tit {float: none; width:100%; text-align: center; margin: 3px 0 4px 0; font-size: 11px;}
	.join-tb td > button {margin-left: -72px; margin-right: 0;}
	input.join-put, input.join-put.banknum { width: 260px;}
	.selec_bank { width: 260px; margin-bottom: 5px;}
}

@media (max-width: 375px) {
	#formContent { min-width: 310px;}
	body.join .box_wrap { width: 96%; padding: 20px 10px 30px 10px;}
	.logo_login { margin-top: 20px; width: 199px;}
}











/* ONLY BOLTON */
.bolton-btn {
	width: 90%;
	/*display: block;*/
	height: 50px;
	line-height: 50px;
	font-size: 18px;
	border-radius: 25px !important;
	font-weight: bold !important;
	border-top: none;
	border-bottom: none;
	margin: 5px auto !important;
	padding: 0 0;
}
.bolton-btn.okok {
	color: #fff;
	background: linear-gradient(#a10623, #7b0923);
}

.bolton-btn.cancel {}

input.join-put + font {
display: inline-block;
	font-size: 12px;
	margin-left: 5px;
	}

.joinbox .logo_login {
width: 295px;
	height: auto;
	margin: 15px auto 30px;
	}

	body.join .img_tit { display:none;}