@charset "UTF-8";

article {
	min-height: 0;
	height: calc(100vh - 75px);
}
@media (max-width: 350px) {
	article {
		height: 100vh;
	}
}

/* yellow_circle
-------------------------------------------------- */
.yellow_circle {
	background: #FFF;
}
.trim {
	position: absolute;
	overflow: hidden;
	height: 310px;
	width: 310px;
	top: 20px;
	left: 50%;
	transform: translate(-155px,0);
	-moz-transform: translate(-155px,0);
	-webkit-transform: translate(-155px,0);
	-o-transform: translate(-155px,0);
	-ms-transform: translate(-155px,0);
	border-radius: 155px;
	border: 5px solid #FDE4A6;
}
.trim img {
	transform: translate(-50%,0);
	-moz-transform: translate(-50%,0);
	-webkit-transform: translate(-50%,0);
	-o-transform: translate(-50%,0);
	-ms-transform: translate(-50%,0);
	opacity: 0.8;
}

/* h1Section
-------------------------------------------------- */
.h1Section {
	padding-top: 20px;
	height: 330px;
	width: 310px;
	margin: 0 auto 30px;
	position: relative;
}
.h1Section-inner {
	position: absolute;
	top: 165px;
	left: 155px;
	transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
}
.h1Section p {
	display: block;
	padding: 0 40px;
	margin: 0 auto;
}
.h1Section h1 {
	display: inline-block;
	margin: 0 auto;
	width: 310px;
}

/* loginSection
-------------------------------------------------- */
.loginSection {
	padding-bottom: 40px;
}
.loginSection .container {
	text-align: center;
}
.loginSection .fa {
	color: #FFF;
}
.loginSection p {
	margin-bottom: 10px;
}
a.btn-fblogin {
	color: #fff !important;
	text-decoration: none;
	padding: 15px 0;
	width: 406px;
	border-radius: 0;
	background: #3753A3;
	font-size: 16px;
	margin: 0 auto 10px;
}
a.btn-fblogin:hover {
	background: #004098;
}
a.btn-twlogin {
	color: #fff !important;
	text-decoration: none;
	padding: 15px 0;
	width: 406px;
	border-radius: 0;
	background: #58A3DA;
	font-size: 16px;
	margin: 0 auto 10px;
}
a.btn-twlogin:hover {
	background: #0088CE;
}
a.btn-lnlogin {
	color: #fff !important;
	text-decoration: none;
	padding: 15px 0;
	width: 406px;
	border-radius: 0;
	background: #71BB3B;
	font-size: 16px;
	margin: 0 auto 10px;
}
a.btn-lnlogin:hover {
	background: #3FB042;
}
.borderOn {
	background: url(../images/home/border_bg.png) no-repeat 50% 50%;
	background-size: 100% auto;
	color: #727171;
	text-align: center;
	position: relative;
	margin: 0 auto 10px;
	width: 204px;
}
.loginSection form {
	margin: 0 auto;
	width: 406px;
}
.loginSection input[type="text"],
.loginSection input[type="email"],
.loginSection input[type="password"] {
	-webkit-transition: 0.7s;
	transition: 0.7s;
}
.loginSection input[type="text"]:focus,
.loginSection input[type="email"]:focus,
.loginSection input[type="password"]:focus {
	width: 100%;
}
.btn input[type="submit"] {
	width: 188px;
	font-size: 16px;
	display: block;
	padding: 15px 0;
	color: #fff;
	background-color: #C30D23;
	border: none;
	-webkit-transition: 0.7s;
	transition: 0.7s;
	cursor: pointer;
}
.btn input[type="submit"]:hover {
	text-decoration: none;
	background-color: #A7041A;
}
form input.error {
	background: #fffbcc;
	border: 1px solid #e6db55;
}
@media (max-width: 446px) {
	a.btn-fblogin,a.btn-twlogin,a.btn-lnlogin,
	.loginSection form {
		width: 91.0313901345291vw;
	}
}
@media (max-width: 350px) {
	.hidden-350 {
		display: none;
	}
}