
/*========= 登入/註冊 共用===========*/
.topbtnBox {
	position: relative;
	margin: 0 auto;
	width: 85%;
}
.topbtn {
	width: 50%;
	float: left;
	text-align: center;
	font-size: 16px;
  color: #757575;
  border: 1px solid #E7E7E7; 
	padding: 5px 0;
}
.topbtn-action {
	width: 50%;
	float: left;
	text-align: center;
	font-size: 16px;
  color: #fff;
  background-color: #ffae00;
  border: 1px solid #ffae00; 
	padding: 5px 0;
}
.topbtn-action img,
.topbtn img {
	width: 20px;
	height: auto;
	margin-right: 5px;
}
.account{
	width: 100%;
	float: left;
	padding: 3em 15px;
	background:#fff;
	text-align:center;
	border-radius: 2.5rem ;
	margin-bottom: 2rem;
}
.account h3{
	font-size: 1.8em;
	color: #575757;
	margin: 0;
}
.form-group{
	margin-top:5% !important;
}
.form-group form input[type=submit] {
	color: #fff;
	padding: 13px 0px;
	font-size: 1.5em;
	cursor: pointer;
	font-weight: 600;
	border: none;
	background: #dd2727;
	outline: none;
	width: 85%;
	}
.form-group form input[type=submit]:hover{
	background: #bb0a0a;
	transition: 0.5s all ease;
	-webkit-transition: 0.5s all ease;
	-moz-transition: 0.5s all ease;
	-o-transition: 0.5s all ease;
	-ms-transition: 0.5s all ease;
}

.form-group form input[type=button] {
	color: #fff;
	padding: 13px 0px;
	font-size: 1.5em;
	cursor: pointer;
	font-weight: 600;
	border: none;
	background: #dd2727;
	outline: none;
	width: 85%;
	}
.form-group form input[type=button]:hover{
	background: #bb0a0a;
	transition: 0.5s all ease;
	-webkit-transition: 0.5s all ease;
	-moz-transition: 0.5s all ease;
	-o-transition: 0.5s all ease;
	-ms-transition: 0.5s all ease;
}
/*--responsive media-quries--*/
@media(max-width:550px){
.form-group form input[type=submit] {
	padding: 10px 0px;
}	
.form-group form input[type=button] {
	padding: 10px 0px;
}
}
@media(max-width:400px){
.topbtnBox {
	width: 85%;
}
.topbtn,
.topbtn-action {
	font-size: 14px;
	padding: 2px 0 3px;
}
.account {
	padding: 1.8em 0px;
}
.account h3{
	font-size: 1.4em;
}
.form-group form input[type=submit] {
	width: 90%;
	padding: 8px 0px;
	font-size: 15px;
}
.form-group form input[type=button] {
	width: 90%;
	padding: 8px 0px;
	font-size: 15px;
}
.topbtnBox {
	position: relative;
	margin: 0 auto;
	width: 90%;
}
}



/*========= 登入===========*/

.sign {
	border: 1px solid #ebebeb;
	position: relative;
	margin: 8% auto 0;
	width: 85%;
}
.sign input[type="text"] {
	background: none;
	width: 90%;
	outline: none;
	border: none;
	padding: 12px 17px;
	font-size: 1.1em;
	color: #888;
	margin: 0 0 0 18%;
	border-left: 1px solid #ebebeb;
	display: inline-block;
}
.sign i {
	background: url("../images/mail.png")no-repeat;
	width: 15px;
	height: 15px;
	display: inline-block;
	position: absolute;
	top: 35%;
	left: 7.2%;
}
.sign i.psd{
	background: url(../images/lock.png)no-repeat;
}
.forgot{
	margin-top:8%;
}
.forgot a{
	color:#8b8b8b;
	font-size:14px;
	text-decoration:underline;
}
.forgot a:hover{
	color:#dd5555;
	transition: 0.5s all ease;
	-webkit-transition: 0.5s all ease;
	-moz-transition: 0.5s all ease;
	-o-transition: 0.5s all ease;
	-ms-transition: 0.5s all ease;
}

/*--responsive media-quries--*/
@media(max-width:400px){
.sign {
	width: 85%;
	margin: 7% auto 0;
}
.sign input[type="text"] {
	width: 85%;
	margin: 0 0 0 16%;
	padding: 9px 13px;
	font-size: 13px;
}
.sign i {
	top: 33%;
	left: 5.5%;
}

}



/*========= 註冊===========*/
.register {
	background: #fff;
	text-align: left;
	margin: 3% auto 0;
	width: 85%;
}
.register span{
	width: 100%;
	float: left;
	color: #D50000;
	font-size: 1.1em;
	margin-bottom: 1.5em;
}
.register h3{
	font-size: 17px;
	color: #575757;
	margin: 0;
	font-weight: bold;
}
.form-group_register{
	margin-top:5% !important;
}
.register input[type="text"] {
	width: 100%;
	margin: 0px;
	color: #888;
	background: none;
	padding: 12px 10px;
	outline: none;
	font-size:16px;
	border: 1px solid #ebebeb;
	margin: 3px 0 15px 0;
}
.register input[type="date"] {
	width: 100%;
	margin: 0px;
	color: #888;
	background: none;
	padding: 6px;
	outline: none;
	font-size:16px;
	border: 1px solid #ebebeb;
	margin: 3px 0 15px 0;
}
.register textarea {
	width: 100%;
	color: #888;
	resize: none;
	background: none;
	height: 6em;
	padding: 13px 10px;
	outline: none;
	border: 1px solid #ebebeb;
	margin: 3px 0 15px 0;
	}
.register input[type=submit] {
	color: #fff;
	padding: 10px 50px;
	font-size: 16px;
	cursor: pointer;
	font-weight: 400;
	margin: 2em 0 0 0px;
	border: none;
	background: #dd5555;
	outline: none;
	width: 100%;
}
.register input[type=submit]:hover{
	background: #82ca9c;
	transition: 0.5s all ease;
	-webkit-transition: 0.5s all ease;
	-moz-transition: 0.5s all ease;
	-o-transition: 0.5s all ease;
	-ms-transition: 0.5s all ease;
}
.check-area {
	width: 100%;
	float: left;
	color: #888;
	background: none;
	outline: none;
	font-size:16px;
	margin: 3px 0 15px 0;
}
.checkBox {
	width: 33.3333333%;
	float: left;
	margin: 0.375rem 0;
}
.check-area input[type="date"] {
	width: auto;
	color: #888;
	background: none;
	padding: 5px 10px;
	outline: none;
	font-size:15px;
	border: 1px solid #ebebeb;
	margin: 3px 10px 0 0;
}
.Policy{
	margin-top:5%;
}
.register_form-control {
  border: 1px solid #e1e1e1;
  border-radius: 3px;
  font-size: 15px;
  color: #888;
  width: 100%;
}
.CountyBox{
	width: 25%;
	margin: 3px 1% 0 0;
	float: left;
}
.AddBox {
	width: 74%;
	float: left;
}
.emergencyPhonBox{
	width: 40%;	
	float: left;
}
.relationBox{
	width: 29%;
	float: left;
	margin-right: 1%;
}
.info-box .title {
	width: 100%;
  font-weight: normal;
  font-family: 微軟正黑體;
  height: 100%;
  margin: 0px 0px 17px;
}
.info-box i {  
	color: #dc3545;
	margin-right: 5px;
	line-height: 1.2;
}
.info-box h3 {
  font-size: 32px;
  font-weight: 600;
}
.info-box p {
  font-size: 15px;
	color: #888;
}

/*--responsive media-quries--*/
@media(max-width:550px){
.checkBox {
	width: 50%;
}	
}
@media(max-width:420px){
.register {
    width: 90%;
}
.register h3 {
    font-size: 16px;
}
.register input[type="text"] {
  padding: 8px;
  margin: 3px 0 12px 0;
	font-size: 15px;
}
.register input[type="date"] {
	padding: 2px 10px;
  margin: 3px 0 12px 0;
	font-size: 15px;
}
.check-area {
    font-size: 15px;
}
.info-box h3 {
    font-size: 20px;
}
	
	
}
@media(max-width:380px){
.register h3 {
    font-size: 15px;
}
.register input[type="text"] {
  padding: 8px;
  margin: 3px 0 12px 0;
	font-size: 14px;
}
.register input[type="date"] {
	padding: 2px 10px;
  margin: 3px 0 12px 0;
	font-size: 14px;
}
.check-area {
    font-size: 14px;
}
.info-box h3 {
    font-size: 18px;
}
	
	
}

/*=== WHY VIP ===*/
.WhyVIP {
	width: 100%;
	float: left;
	margin: 1em 0 0;
	
}
.WhyVIP-btn{
	width: 100%;
	color: #fff;
  padding: 12px;
  font-size: 18px;
  text-align: center;
  border-radius: 2.5rem;
	background-color: #B9A601;
}
.WhyVIP-btn:hover{
	color: #fff;
}

/*--responsive media-quries--*/
@media(max-width:550px){
.WhyVIP-btn{
  padding: 10px;
  font-size: 16px;
}	
}
