@charset "UTF-8";
.contentBox .leftBox {
		padding-right: 50px;
}
@media (max-width: 1023px) {
		.contentBox .leftBox {
				padding: 0 0 30px 0;
		}
}

.titleBox {
		margin-bottom: 30px;
}

.loginArea {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		width: 100%;
		max-width: 1060px;
		margin: 60px auto 30px;
		background-color: #fff;
		padding: 90px;
		border: 1px solid #f1f1f1;
		-webkit-box-shadow: 0px 0px 15px 0px rgba(4, 4, 4, 0.1);
		        box-shadow: 0px 0px 15px 0px rgba(4, 4, 4, 0.1);
}
@media (max-width: 960px) {
		.loginArea {
				padding: 45px;
		}
}
@media (max-width: 767px) {
		.loginArea {
				-webkit-box-orient: vertical;
				-webkit-box-direction: normal;
				    -ms-flex-direction: column;
				        flex-direction: column;
				padding: 30px 20px;
		}
}
@media (max-width: 640px) {
		.loginArea {
				border: none;
				-webkit-box-shadow: none;
				        box-shadow: none;
				padding-left: 0;
				padding-right: 0;
				background-color: transparent;
		}
}
.loginArea .leftBox,
.loginArea .rightBox {
		position: relative;
		width: 50%;
}
@media (max-width: 767px) {
		.loginArea .leftBox,
.loginArea .rightBox {
				width: 100%;
		}
}
.loginArea .leftBox {
		padding-right: 90px;
}
@media (max-width: 960px) {
		.loginArea .leftBox {
				padding-right: 45px;
		}
}
@media (max-width: 767px) {
		.loginArea .leftBox {
				padding-right: 0;
				padding-bottom: 30px;
		}
}
.loginArea .rightBox {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		padding-left: 90px;
		border-left: 1px solid #eaeaea;
}
@media (max-width: 960px) {
		.loginArea .rightBox {
				padding-left: 45px;
		}
}
@media (max-width: 767px) {
		.loginArea .rightBox {
				padding-left: 0;
				padding-top: 30px;
				border-left: none;
				border-top: 1px solid #eaeaea;
		}
}
.loginArea .rightBox::before {
		content: "OR";
		position: absolute;
		left: -25px;
		top: 50%;
		margin-top: -25px;
		width: 50px;
		height: 50px;
		line-height: 50px;
		text-align: center;
		letter-spacing: 0.05em;
		background-color: #fff;
}
@media (max-width: 767px) {
		.loginArea .rightBox::before {
				top: -25px;
				left: 50%;
				margin-left: -25px;
				margin-top: 0;
		}
}
.loginArea .logoArea .textEditor {
		border: none;
		overflow: hidden;
}
.loginArea .welcomeText {
		margin-bottom: 50px;
		letter-spacing: 0.05em;
}
.loginArea .welcomeText .text {
		font-size: 22px;
		color: #111;
}
@media (max-width: 767px) {
		.loginArea .welcomeText .text {
				font-size: 16px;
		}
}
.loginArea input[type=text], .loginArea input[type=email], .loginArea input[type=password] {
		width: 100%;
		height: 42px;
		padding: 10px 50px 10px 0;
		background: none;
		border: none;
		border-bottom: 1px solid #555;
		font-size: 16px;
		color: #000;
		-webkit-transition: all 0.5s;
		transition: all 0.5s;
}
.loginArea input[type=text]:focus, .loginArea input[type=text].hasValue, .loginArea input[type=email]:focus, .loginArea input[type=email].hasValue, .loginArea input[type=password]:focus, .loginArea input[type=password].hasValue {
		border-color: #29b8ed;
}
.loginArea input[type=text]:focus ~ .title, .loginArea input[type=text].hasValue ~ .title, .loginArea input[type=email]:focus ~ .title, .loginArea input[type=email].hasValue ~ .title, .loginArea input[type=password]:focus ~ .title, .loginArea input[type=password].hasValue ~ .title {
		top: -15px;
}
.loginArea .btn_relog {
		font-size: 14px;
		letter-spacing: 0.05em;
		color: #454545;
}
.loginArea .icon {
		position: absolute;
		right: 10px;
		top: 50%;
		-webkit-transform: translateY(-50%);
		        transform: translateY(-50%);
}
.loginArea .iconLock {
		width: 15px;
		height: 20px;
}
.loginArea .iconKey {
		width: 15px;
		height: 15px;
}
.loginArea .inputBox {
		position: relative;
		color: #000;
		margin-bottom: 40px;
}
.loginArea .textBox {
		padding-top: 15px;
		text-align: center;
		font-size: 16px;
}
.loginArea .textBox a {
		color: #29b8ed;
}
.loginArea .textBox a:hover {
		text-decoration: underline;
}
.loginArea .title {
		position: absolute;
		left: 0;
		top: -15px;
		font-size: 14px;
		letter-spacing: 0.05em;
		color: #808080;
		-webkit-transition: all 0.5s;
		transition: all 0.5s;
}
.loginArea .btnBox {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		margin-bottom: 15px;
}
.loginArea .btnBox a {
		position: relative;
		font-size: 14px;
		padding-right: 10px;
		margin-right: 10px;
}
.loginArea .btnBox a:not(:last-child)::after {
		content: "";
		position: absolute;
		right: 0;
		top: 50%;
		margin-top: -7px;
		width: 1px;
		height: 14px;
		background-color: #808080;
}
.loginArea .thirdPartyBox {
		width: 100%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
}
.loginArea .thirdPartyItem {
		margin-bottom: 25px;
		height: 50px;
		line-height: 50px;
		text-align: center;
		background-repeat: no-repeat;
		background-size: 22px 22px;
		background-position: 18px 50%;
		-webkit-transition: all 0.5s;
		transition: all 0.5s;
}
.loginArea .thirdPartyItem:hover {
		-webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
		        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
		-webkit-transform: translateY(-2px);
		        transform: translateY(-2px);
}
.loginArea .thirdPartyItem a {
		display: block;
		font-size: 14px;
		letter-spacing: 0.05em;
		color: #454545;
}
.loginArea .thirdPartyItemGoogle {
		background-color: #f1f1f1;
		background-image: url("../images/google.svg");
}
.loginArea .thirdPartyItemFb {
		background-image: url("../images/facebook.svg");
		background-color: #3b5781;
}
.loginArea .thirdPartyItemFb a {
		color: #fff;
}
.loginArea .thirdPartyItemLine {
		background-image: url("../images/line.svg");
		border: 1px solid #c9c9c9;
}
.loginArea .forgetCheck,
.loginArea .resendCheck {
		display: none;
}
.loginArea .btn_relog {
		display: inline-block;
		padding-top: 15px;
		color: #808080;
}
.loginArea .btn_relog:hover {
		color: #29b8ed;
		border-bottom-color: #29b8ed;
}

/*註冊頁面*/
.section {
		margin-bottom: 40px;
}
.section h3 {
		position: relative;
		clear: both;
		margin-bottom: 15px;
		padding: 8px 0;
		border-bottom: 1px solid #02152c;
		font-weight: 400;
		font-size: 20px;
}

.condition .textEditor {
		height: 120px;
		margin: 0;
		padding: 15px;
		border: 1px solid #ccc;
		font-size: 13px;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
}
.condition .check {
		margin-top: 10px;
		font-size: 15px;
		color: #db1b60;
}
.condition .check label {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
}
.condition .check input[type=checkbox] {
		margin-right: 5px;
		width: 25px;
		height: 25px;
}

.formList {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
		margin-left: -20px;
		margin-right: -20px;
}
@media (max-width: 640px) {
		.formList {
				margin: 0;
		}
}
.formList li {
		width: 50%;
		padding-left: 20px;
		padding-right: 20px;
		margin-bottom: 20px;
}
@media (max-width: 767px) {
		.formList li {
				width: 100%;
		}
}
@media (max-width: 640px) {
		.formList li {
				padding: 0;
		}
}
.formList .noteTxt {
		margin-top: 10px;
		font-size: 13px;
		color: #959595;
		letter-spacing: 0.05em;
}
.formList .left {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		margin-bottom: 12px;
		font-size: 15px;
		color: #454545;
		letter-spacing: 0.05em;
}
.formList .left em {
		color: #e24242;
}
.formList .right {
		font-size: 15px;
		letter-spacing: 0.05em;
		color: #454545;
}
.formList .right a {
		font-size: 15px;
		letter-spacing: 0.05em;
		color: #454545;
}
.formList .right a:hover {
		text-decoration: underline;
}
.formList select {
		height: 50px;
		border: 1px solid #dbdbdb;
		background-color: transparent;
}
.formList input[type=text], .formList input[type=password] {
		width: 100%;
		height: 50px;
		line-height: 50px;
		padding: 0 25px;
		border: 1px solid #dbdbdb;
		font-size: 14px;
		letter-spacing: 0.2em;
}
.formList textarea {
		display: block;
		width: 100%;
		height: 100px;
		line-height: 50px;
		padding: 0 25px;
		border: 1px solid #dbdbdb;
		font-size: 14px;
		letter-spacing: 0.2em;
}
.formList .full {
		width: 100%;
}
.formList .full .item {
		width: 100%;
}
.formList .full .item .right {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
		width: 100%;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
}
@media (max-width: 640px) {
		.formList .full .item .right {
				-webkit-box-orient: vertical;
				-webkit-box-direction: normal;
				    -ms-flex-direction: column;
				        flex-direction: column;
				-webkit-box-align: start;
				    -ms-flex-align: start;
				        align-items: flex-start;
		}
}
.formList .full .item .right input {
		width: calc(50% - 20px);
}
@media (max-width: 640px) {
		.formList .full .item .right input {
				width: 100%;
		}
}
.formList .full .item .right .noteTxt {
		width: 50%;
		padding: 0 0 0 40px;
}
@media (max-width: 640px) {
		.formList .full .item .right .noteTxt {
				width: 100%;
				padding: 0;
		}
}
.formList .full .item .right .condition {
		width: 100%;
}
.formList .full .item.tip .left {
		width: 100%;
}
.formList .full .item.tip .left h3 {
		width: 100%;
		font-weight: 400;
}
.formList .full .item.tip .right {
		width: 100%;
}
.formList .full .item.tip .right .condition {
		width: 100%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
}
.formList .full .item.tip .right .condition .textEditor {
		width: 100%;
}
.formList .full .item.tip .right .condition .check {
		width: 100%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: start;
		    -ms-flex-pack: start;
		        justify-content: flex-start;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
}
.formList .full .item.tip .right .condition .check input {
		width: auto;
}

#data_address {
		margin-top: 12px;
}

.error {
		border-color: #f00 !important;
}

.orderTxt {
		font-size: 14px;
		letter-spacing: 0.05em;
		padding-bottom: 10px;
}

/*驗證碼*/
.checkArea {
		clear: both;
		padding-top: 25px;
}
.checkArea a {
		/*送出按鈕*/
		display: block;
		-webkit-box-shadow: 2px 2px 2px #ccc;
		        box-shadow: 2px 2px 2px #ccc;
		font-size: 16px;
		color: #fff;
		cursor: pointer;
		border-radius: 3px;
}

.checkArea .btn,
.sliderBox {
		display: inline-block;
		vertical-align: middle;
}

.sliderBox {
		position: relative;
		margin-right: 8px;
}

.note {
		/*向右滑動解鎖*/
		position: absolute;
		left: 55px;
		top: 7px;
		font-size: 15px;
		font-family: "微軟正黑體";
		color: #999;
}

/*history.php 歷史訂單列表*/
.orderList table {
		border-collapse: collapse;
		color: #222;
}
.orderList th {
		padding: 15px;
		letter-spacing: 0.1em;
		font-size: 15px;
		font-weight: 400;
		color: #fff;
		border: 1px solid #ececec;
		background-color: #bbb;
}
.orderList td {
		padding: 15px 10px;
		font-size: 13px;
		color: #434343;
		letter-spacing: 0.05em;
		background: #fff;
		border: 1px solid #ececec;
}
.orderList a {
		color: #29b8ed;
}
.orderList a:hover {
		text-decoration: underline;
}

@media (max-width: 640px) {
		.formBox .left {
				display: block;
				float: none;
				width: 100%;
				margin: 0 0 5px 0;
				text-align: left;
		}
		.formBox input[type=text], .formBox input[type=password] {
				width: 100%;
		}
}