@charset "utf-8";

/* CSS Document */
button {
	cursor: pointer;
}

button:focus {
	outline: none;
}

/*log.html同意條文*/
.online-item {
	display: none;
}

.navbar-light .navbar-nav>li:nth-child(5)>a {
	color: #2d2d2d;
}

#step2Disclaimer {
	border: solid 1px #ffa3a3;
	margin-bottom: 15px;
	height: 450px;
	overflow-y: scroll;
	padding: 20px;
	margin: 30px 0;
}

#step2Disclaimer p {
	line-height: 30px;
}

.unread {
	cursor: not-allowed;
	padding: 3px;
	color: #CCC;
}

.fully_read {
	padding: 3px;
}

.log-form .note {
	color: #e01f13;
}

/*同意條文end*/
.log-block {
	margin-top: 0px;
	padding: 50px 0;
}

.log02 {
	background-image: url(../images/log-bg.png);
	background-repeat: no-repeat;
	background-position: -5px bottom;
	background-size: 300px auto;
}
@media(max-width:1160px) {
	.log02 {
		background-image: none;
	}
}

.forget01 {
	background-image: url(../images/forget-bg.png);
	background-repeat: no-repeat;
	background-position: -5px bottom;
	background-size: 300px auto;
}

.log-block-top {
	margin-top: 160px;
}

/*log 01*/
.log01 h1 {
	color: #e01f13;
	line-height: 35px;
}

.log-image {
	text-align: center;
	margin: 50px auto;
}

.log-image img {
	width: 32%;
}

.log01-input {
	width: 360px;
	margin: 20px auto;
}

.log02 h1,
.forget01 h1 {
	color: #f26762;
	margin-top: 10px;
}

.log02 .log-form {
	margin-top: 40px;
}

.log-form p {
	color: #2d2d2d;
	margin-bottom: 10px;
}

.log-form .pinkspan {
	display: block;
	float: left;
	color: #fff;
	background-color: #ffa3a3;
	height: 55px;
	width: 60px;
	border-radius: 30px 0 0 30px;
	text-align: center;
}

.log-form .row {
	margin-bottom: 30px;
}

.log-form i {
	font-size: 1.5em;
	line-height: 55px;
}

.log-form .red-note {
	font-size: initial;
	color: #e01f13;
}

input[type="password"] {
	border: solid 2px #b5b5b5;
	padding: 15px;
	border-radius: 0 30px 30px 0;
	width: calc(100% - 60px);
	max-width: 300px;
}

input[type="text"] {
	border: solid 2px #b5b5b5;
	padding: 15px;
	border-radius: 0 30px 30px 0;
	width: calc(100% - 60px);
	max-width: 300px;
	height: 55px;
}

input[type="email"] {
	border: solid 2px #b5b5b5;
	padding: 15px;
	border-radius: 0 30px 30px 0;
	width: calc(100% - 60px);
	max-width: 300px;
	height: 55px;
}

#datepicker {
	border: solid 2px #b5b5b5;
	padding: 15px;
	border-radius: 0 30px 30px 0;
	width: calc(100% - 60px);
	max-width: 300px;
	cursor: pointer;
	height: 55px;
}

.city-choose {
	border: solid 2px #b5b5b5;
	padding: 15px;
	border-radius: 0 30px 30px 0;
	width: calc(100% - 60px);
	outline: none;
	height: 55px;
}

.option-block .city-sub-choose {
	border: solid 2px #b5b5b5;
	padding: 15px;
	border-radius: 30px;
	width: 100%;
	outline: none;
	height: 55px;
}

.option-block .city-input {
	border: solid 2px #b5b5b5;
	padding: 15px;
	border-radius: 30px;
	outline: none;
	width: 100%;
	height: 55px;
}

.two-choose {
	float: left;
	width: 50%;
}

.two-choose input[type="radio"] {
	display: none;
}

.two-choose input[type="radio"]~label {
	border: solid 2px #b5b5b5;
	padding: 15px;
	background-color: #b5b5b5;
	max-width: 300px;
	cursor: pointer;
	width: 100%;
	text-align: center;
	height: 55px;
	line-height: 25px;
	font-size: 1.1em;
}

.two-choose input[type="radio"]:checked~label {
	background-color: #ffa3a3;
	color: #fff;
	font-weight: 700;
}

.left {
	border-radius: 30px 0 0 30px;
}

.right {
	border-radius: 0 30px 30px 0;
}

.send-btn {
	border-radius: 30px;
	background-color: #ffa3a3;
	color: #fff;
	outline: none;
	border: none;
	padding: 15px;
	width: 200px;
	font-size: 1.1em;
}

.two-choose input[type="radio"]:checked~label {
	background-color: #ffa3a3;
	color: #fff;
	font-weight: 700;
}

.log01-input input[type="text"] {
	width: 100%;
}

.forget-finish {
	padding: 120px 0 80px;
}

.yes-image {
	text-align: center;
	margin-bottom: 20px;
}

.yes-image i {
	font-size: 10em;
	color: #5fd3bc;
}

.forget-finish p {
	text-align: center;
	font-size: 1.3em;
	margin: 30px auto;
}

/*驗證碼btn*/
#exampleModalCenter .modal-content input {
	border-radius: 25px;
	padding: 15px 20px;
	border: solid 2px #e8e8e8;
	margin: 10px auto;
	width: 80%;
	max-width: unset;
}

#get-number input[type="text"] {
	width: 50%;
	border-radius: 30px 0 0 30px;
	float: left;
}

#btn {
	width: calc(50% - 4px);
	border-radius: 0 30px 30px 0;
	padding: 16px 0;
	font-size: 1.18em;
	float: left;
	cursor: pointer;
	background-color: #ffa3a3;
	color: #fff;
}

input#GetOTPCode {
	width: calc(50% - 4px);
	border-radius: 0 30px 30px 0;
	padding: 16px 0;
	font-size: 1.18em;
	float: left;
	cursor: pointer;
	background-color: #ffa3a3;
	color: #fff;
}

.btn-wrapper {
	text-align: center;
	margin: 20px auto;
}

#final-send {
	clear: both;
	margin-top: 100px;
}

#btn:disabled {
	background-color: #a0a0a0;
	color: #dcdcdc;
	cursor: default;
}

input#GetOTPCode:disabled {
	background-color: #a0a0a0;
	color: #dcdcdc;
	cursor: default;
}

.clear {
	clear: both;
	margin-top: 90px;
}

/*#birth-pick span {
	background-color: transparent;
	color: #2d2d2d;
	width: auto;
	height: auto;
	border-radius: none;
}*/

.dtp_modal-time-block {
	display: none;
}

#picker-3 span:last-child {
	display: none;
}

.dtp_main i {
	display: none;
	padding-right: 8px;
}

.dtp_main {
	border: solid 2px #b5b5b5;
	border-radius: 0 30px 30px 0;
	width: calc(100% - 60px);
	max-width: 300px;
	text-align: center;
	line-height: 55px;
	margin: 0;
	cursor: pointer;
	float: left;
	height: 55px;
	padding-left: 5px;
}

#birth-pick #cake {
	display: block;
	float: left;
	color: #fff;
	background-color: #ffa3a3;
	height: 55px;
	width: 60px;
	border-radius: 30px 0 0 30px;
	text-align: center;
}

.dtp_modal-content {
	width: auto;
	padding-bottom: 25px;
}

.dtp_modal-cell-date {
	float: none;
	margin-bottom: 0;
}

.dtp_modal-cell-time {
	width: 311px;
	float: none;
	text-align: center;
	direction: ltr;
	border-right: solid 1px #000;
}

#email {
	position: relative;
}

#auto-list {
	position: absolute;
	z-index: 3;
	border: solid 1px #b5b5b5;
	background-color: #fff;
	width: 290px;
	left: 75px;
}

#auto-list li {
	padding: 10px;
}

.highlighted {
	background-color: #FFD4D5;
}

#password-notice {
	border: none;
	background-color: transparent;
	color: #e01f13;
}

.modal-content span {
	/*display: block;
	float: none;
	color: #e01f13;
	background-color: transparent;
	height: auto;
	width: auto;
	border-radius: 50%;
	text-align: center;*/
}

.log-block .modal-body p {
	text-align: left;
	line-height: 25px;
	width: 90%;
}

.for-job .modal-header {
	background-color: #ffa3a3;
}

.modal-header {
	border-radius: 20px 20px 0 0;
}

.for-job h5 {
	color: #fff;
	font-weight: 700;
}

.name-result {
	margin-top: 10px;
}

p.correct {
	color: rgb(75, 150, 87);
}

p.error {
	color: rgb(247, 125, 125);
}

/*ipad*/
@media(max-width:991px) {
	.log-block {
		margin-top: 0;
	}

	.online-item {
		display: block;
	}
}



/*smartphone*/
@media(max-width:480px) {
	.log01-input {
		width: 90%;
		margin: auto;
	}

	.log01-input input[type="text"] {
		width: calc(100% - 60px);
	}

	.forget01,
	.log02 {
		background-size: 50% auto;
	}

	.yes-image i {
		font-size: 8em;
	}

	.yes-image {
		margin-bottom: 30px;
	}

	.log-form p {
		margin-top: 20px;
	}

	.log-form .row .col-md-4:first-child>p {
		margin-top: 0;
	}

	.modal-content {
		margin: auto;
	}
}

/* new_log 0816 */

.log_title_tip{
	font-size:18px;
	text-align:center;
	line-height:28px;
	margin-top:30px;
	margin-bottom:20px;
}
.log_tab_container{
	width:730px;
	margin:0 auto;
	display:flex;
}
.log_tab_container > div{
	width:50%;
	height:66px;
	background:#e8e8e8;
	color:#9b9b9b;
	text-align: center;
	line-height:24px;
	border-radius:16px 16px 0px 0px;
	cursor:pointer;
	display:flex;
	justify-content: center;
	align-items: center;
}
.log_tab_container > div.active{
	background:#FFA3A3;
	color:#ffffff;
}
.log_tab_text_small{font-size:18px;}
.log_tab_text_large{font-size:22px;}

.log_main_container{
	width:730px;
	border:2px solid #FFA3A3;
	border-radius:0px 0px 16px 16px;
	padding:30px 30px 40px 30px;
	margin:0 auto;
}
.log_main_text{
	font-size:18px;
	line-height:28px;
}
.log_main_ol{
	font-size:18px;
	line-height:28px;
	color:#E01E12;
	margin-top:20px;
	padding-left:30px;
}
.log_main_ol ol{
	list-style:decimal;
}
.log_main_checkbox_container{
	margin-top:30px;
	position:relative;
}
.log_main_checkbox_container input{
	position:absolute;
	top:5px;
	left:0px;
	transform:scale(1.2);
}
.log_main_checkbox_container label{
	color:#E01E12;
	line-height:22px;
	padding-left:18px;
}
.show_password_checkbox_container{text-align:center;;}
.show_password_checkbox_container input{
	transform:scale(1.2);
}
.log_input_area{
	width:450px;
	margin:30px auto;
}
.log_input_area input{
	width:100%;
	height:55px;
	max-width:100%;
	border-radius:99px;
}
.log_input_password{
	padding-left:70px !important;
}
.log_input_validated_code{
	padding-right:160px !important;
}
.log_input_title{
	margin-bottom:10px;
}
.log_input_title_tip{
	font-size:14px;
	color:#E01E12;
	float:right;
}
.log_input_container{
	font-size:20px;
	position:relative;
}
.log_input_container .validated_code_btn{
	width: 150px;
	height:55px;
	background:#FFA3A3;
	font-size:20px;
	color:#ffffff;
	border-radius:0px 99px 99px 0px;
	position:absolute;
	top:0px;
	right:0px;
	display:flex;
	justify-content: center;
	align-items: center;
	cursor:pointer;
}
.log_input_container .icon_title{
	width:60px;
	height:55px;
	background:#FFA3A3;
	font-size:1.5rem;
	color:#ffffff;
	border-radius:99px 0px 0px 99px;
	position:absolute;
	top:0px;
	left:0px;
	display:flex;
	justify-content: center;
	align-items: center;
}
.sent_out_btn{
	width:200px;
	height:55px;
	font-size:20px;
	color:#ffffff;
	background:#FFA3A3;
	border-radius:99px;
	margin:50px auto;
	display:flex;
	justify-content: center;
	align-items: center;
	cursor:pointer;
}

@media(max-width:991px) {
	.log_tab_container,.log_main_container{
		width:100%;
	}
	.log_main_container{
		padding:20px 20px 30px 20px;
	}
	.log_input_area{
		width:100%;
		padding:0 20px;
	}
}
@media(max-width:640px) {
	.log_title_tip{
		font-size:16px;
		text-align:left;
		line-height:24px;
		margin-top:20px;
		margin-bottom:20px;
	}
	.log_title_tip span{
		display:none;
	}
	.log_tab_text_small{font-size:16px;}
	.log_tab_text_large{font-size:20px;}
	.log_tab_container > div{
		height:60px;
	}
	.log_main_text{
		font-size:16px;
		line-height:24px;
	}
	.log_main_checkbox_container input{
		transform:scale(1);
	}
	.log_main_checkbox_container label{
		font-size:15px;
		padding-left:16px;
	}
	.log_main_checkbox_container{
		margin-top:20px;
	}
	.log_input_container .validated_code_btn{
		width:120px;
		font-size:18px;
	}
	.sent_out_btn{
		width:160px;
	}
}
@media(max-width:480px) {
	.log_input_title span{
		display:block;
	}
	.log_input_title_tip{
		margin-top:5px;
		float:none;
	}
	.log_input_area{
		padding:0 0px;
	}
	.log_main_ol{
		font-size:16px;
		line-height:24px;
		padding-left:20px;
		margin-top:10px;
	}
	.log_tab_text_large{font-size:18px;}
	.log_input_area{
		margin:20px auto;
	}
	.log_main_container{
		padding:20px 20px 20px 20px;
		margin-bottom:30px;
	}
	.sent_out_btn{
		margin:40px auto;
	}
}

/* new_log 0816 end */