/* 登入、註冊、會員資訊 */

.acc-left, .acc-right {
	padding: 0 3%!important;
	margin-bottom: 10px;
}

.acc-left > div, .acc-right > div {
	border: 1px solid #f3f5f4;
	height: auto;
}

.acc-txt {
	text-align: center;
    font-size: 28pt !important;
    color: #464646;
    font-weight: 600;
    padding-bottom: 20px;
	padding-top: 10px;
}

label { color: #8d8a8a; font-size: 12pt; }
label > span { color: #0d0d0d; }

input, select { font-size: 12pt; }

.checkcode > div:nth-child(2) {
	-ms-flex: 0 0 110px;
    flex: 0 0 110px;
    max-width: 110px;
	text-align: right;
}
.checkcode > div:nth-child(1) {
	-ms-flex: 1 1 0%;
	flex: 1 1 0%;
    min-width: 0;
    position: relative;
}

.checkcode > div:nth-child(3) {
	-ms-flex: 0 0 100%;
	flex: 0 0 100%;
    max-width: 100%;
    position: relative;
	font-size: 10pt;
	color: #FF2020;
}

#facebook_login, #line_login, #join {
	width: 98%;
    cursor: pointer;
    color: #FFF;
    font-weight: bold;
    text-decoration: none;
	
	margin: 0 auto 15px;
}

#facebook_login {
	display: block;
    background-color: #1877f2;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    border: 1px solid #1877f2;
}

#line_login {
	display: block;
    background-color: #00c300;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    border: 1px solid #00c300;
}

#join {
	display: block;
    background-color: #81ddd5;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    border: 1px solid #81ddd5;
}

#forgot_pass {
	line-height: 48px;
	display: inline-block;
	color: #0000FF;
}
#forgot_pass:hover {
	color: #F00;
}

#join_data {
	line-height: 48px;
	display: inline-block;
	color: #0000FF;
}
#join_data:hover {
	color: #F00;
}

/* my order */
.my-order-search { padding: 0 0 10px; }
.my-order-search > div:nth-child(1) { padding: 0 0 5px; }
.my-order-search > div:nth-child(2) > div > button { background: #DDD; border: 1px solid #CCC; }
.my-order-search > div:nth-child(2) > div:not(.d-none) { padding-left: 0; padding-right: 0; padding-bottom: 5px; }

.my-order-header { font-size: 10pt; }
.my-order-header div { background-color: #EEE;  line-height: 30px;  border-bottom: 1px dotted #CCC; border-top: 1px dotted #CCC; }

.my-order-detail { font-size: 10pt; padding: 5px 0; border-bottom: 1px dotted #CCC; position: relative; min-height: 50px; }
.my-order-detail > div {
	display: -ms-flexbox; 
	display: flex; 
	-ms-flex-wrap: wrap; 
	flex-wrap: wrap;
	align-items:center;
    justify-content:center;
}
.my-order-detail > div > div:not(.clearfix) {
	
}
.my-order-detail a { font-size: 10pt; }
.my-order-detail > div > div.text-center { text-align: center!important; }
.my-order-detail > div > div.text-right { text-align: right!important; }

.o-progress .o-active { font-size: 12pt; border-radius: 5px; padding: 8px 10px; background-color: #1571C7; color: #FFF; }
.o-progress .o-inactive { font-size: 12pt; border-radius: 5px; padding: 8px 10px; background-color: #E4E4E4; color: #1A1A1A; }
.o-progress .o-progress-bar { margin: 8px auto; }
.o-progress > div:not(.clearfix) > div:nth-child(1) { padding-left: 5px; padding-right: 5px; }	
.o-status { font-size: 12pt; padding: 8px 0; }

.row.faq > div.faq-item,
.row.faq > div.faq-arrow {
	-ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

.row.faq > div.faq-item > img {
	width: 100%;
	max-width: 300px; 
	margin: 0 auto; 
	display: block;
}
.row.faq > div.faq-arrow > img:nth-child(1) { display: none; }
.row.faq > div.faq-arrow > img:nth-child(2) { display: block; }
.row.faq > div.faq-arrow > img { 
	width: 40px; 
	max-width: auto;
	margin: 0 auto; 
}

.faq-title {
	font-family: 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei';
	font-size: 14pt;
	font-weight: 600;
	padding: 20px 0 10px;
	letter-spacing: 5px;
}

.ui-accordion .ui-accordion-content {
    padding: 1em 12px!important;
	line-height: 28px;
}

/* sms */
.mobile {
	max-width: 576px; 
	width: 100%; 
	padding: 0; 
	margin: 15px auto !important;
	padding: 40px 40px;
	border: 1px solid #CCC;
	border-radius: 8px;
}
.i-phone {
	-ms-flex: 0 0 100%;
	flex: 0 0 100%;
	max-width: 100%;
	padding: 0 !important;
	text-align: center;
}

.i-phone > div.time { margin-top: 5px; text-align: center; }

.r-word {
	-ms-flex: 0 0 100%;
	flex: 0 0 100%;
	max-width: 100%;
	padding: 0 !important;
}

.r-word > div {
	margin-bottom: 8px;
}

@media screen and (max-width: 374px) {

}

@media screen and (min-width: 576px) {
	.row.faq > div.faq-item {
		-ms-flex: 0 0 20%;
		flex: 0 0 20%;
		max-width: 20%;
	}
	.row.faq > div.faq-arrow {
		-ms-flex: 0 0 5%;
		flex: 0 0 5%;
		max-width: 5%;
		padding-left: 0;
		padding-right: 0;
	}
	.row.faq > div.faq-arrow > img:nth-child(1) { display: block; }
	.row.faq > div.faq-arrow > img:nth-child(2) { display: none; }

	.row.faq > div.faq-arrow > img {
		width: 100%;
		max-width: 40px;
	}
	
	/* sms */
	.i-phone {
		-ms-flex: 0 0 100px;
		flex: 0 0 100px;
		max-width: 100px;
	}

	.r-word {
		-ms-flex: 0 0 calc(100% - 100px);
		flex: 0 0 calc(100% - 100px);
		max-width: calc(100% - 100px);
	}

}

@media screen and (max-width: 767px) {
	.my-order-detail { height: auto; }
	.my-order-detail > div > div:not(.clearfix) { top: auto; transform: none; padding-left: 110px; min-height: 35px; line-height: 25px;}
	.my-order-detail .dth:before {
		content: attr(data-th) "：";
		font-weight: bold;
		width: 100px;
		display: inline-block;
		text-align: center;
		background-color: #EEE;
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		text-indent: 0;
		margin-right: 5px;
		line-height: 25px;
		font-size: 10pt;
	}
	.my-order-detail > div > div.text-center { text-align: left!important; }
	.my-order-detail > div > div.text-right { text-align: left!important; }
}

@media screen and (min-width: 768px) {
	.acc-left > div, .acc-right > div {
		height: 433px;
	}

	.my-order-search > div:nth-child(2) > div:nth-child(1),
	.my-order-search > div:nth-child(2) > div:nth-child(3)	{ padding-left: 0; padding-right: 0 }
	
	.my-order-search > div:nth-child(2) > div:nth-child(4)	{ padding-left: 15px; padding-right: 15px; }
	
	.my-order-header div { padding-left: 3px; padding-right: 3px; }
	
	.ui-accordion .ui-accordion-content {
		padding: 1em 2.2em!important;
	}
	
	.faq-title {
		font-size: 16pt;
	}
}

@media screen and (min-width: 992px) {
	.my-order-header, .my-order-detail { font-size: 11pt; }
	.my-order-header div { line-height: 45px; padding-left: 15px; padding-right: 15px; }	
}

@media screen and (min-width: 1200px) {
	


	
}