@charset "utf-8";
/* CSS Document */
a, a:focus, a:hover, a:visited {
		text-decoration: none;}
a{
	color: #3f3f3f;}
*, :after, :before {
	margin: 0;
	box-sizing: border-box;}
ul,ol,li{
	list-style: none;
	margin: 0;
	padding: 0;}
body{
	color: #3f3f3f;
	font-family: "Tinos", "Noto Sans TC", serif;
	font-style: normal;
	letter-spacing: .1em;
	background-image: url("../image/bg02.jpg");
	background-position: center;
	background-repeat: repeat;
	background-size: 500px auto;
	background-attachment: fixed;}
body,html{
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;}
p{
	margin: 0.5em 0;}
hr{
	margin:1.5em 0;
	border: 1px solid #e6e6e6;
	border-width: 1px 0 0 0;}
.bg01{
	position: relative;
	background-image: linear-gradient(125deg, rgb(197, 100, 50) 0%, rgb(107, 34, 33) 53%);
	/*background-image: url("../image/bg01.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;*/
	color: #FFF;}
.bg02a{
	width: 100%;
    min-height: 100vh;
	height: 100vh;
    display: flex;
    justify-content: center;
	flex-wrap: wrap;
    align-items: center;}
.login_box01{
	width: 90%;
	margin: 30px auto;
	max-width: 1000px;
	min-height: 600px;
	display: flex;
	overflow: hidden;
	align-items: stretch;
	border-radius: 30px;
	background: #FFF;
	/*box-shadow: 10px 10px 10px #e6dbdb,  -10px -10px 10px #FFFFFF;*/}
.login_box01a,.login_box01b{
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;}
.login_box01a{
	padding: 30px;
	width: 40%;}
.login_box01a h1{
	font-weight: 700;
	color: #ffc8b2;
	letter-spacing: 0.1em;
	font-size: 24px;}
.login_box01b{
	padding:30px 5%;
	width: 60%;}
.login_box01b h2{
	font-size: 28px;
	letter-spacing: 0.1em;
	display: block;
	color: #2d282a;
	width: 100%;
	text-align: center;}
.login_box01b h2 span{
	letter-spacing: 0em;
	font-family: "Tinos", serif;
	font-size: 0.65em;
	font-weight: 700;
	display: block;}
form{
	width: 100%;
	font-size: 16px;}
label{
	display: block;
	font-weight: 500;
	margin:1em 0 0.5em;}
input,select{
	background: #f9f9f9;
	margin-right: 5px;
	border-width: 0px;
	padding: 0 15px;
	height: 50px;
	border-radius: 5px;
	width: 100%;}
input:focus{outline:2px solid  #ffa37f}
.input_box01{
	display: flex;
	flex-wrap: wrap;
	align-items: center;}
.input_box01 label{
	width: 100%;}
.input_box01 input{
	width: auto;
	flex: 1;}
#reBtn{
	border-style: none;
	border: none;
	outline: none;
	font-size: 16px;
	font-weight: 700;
	color: #6B2221;
	background: none;
	cursor: pointer;}
#auth-code{
	width: 170px;
	height: auto;}
.mem_b01{
	margin-top: 1em;}
.mem_b02{
	margin-top: 1.5em;
	display: flex;
	align-items: center;
	justify-content: space-between;}
.mem_b01 a,.mem_b02 a{
	font-weight: 500;
	transition: all 0.3s;
	margin: 0 auto;
	padding:15px 20px;
	display: block;
	font-size: 15px;
	text-align: center;
	letter-spacing: 0.1em;
	border-radius: 999px;}
.mem_b02 a{
	width: calc(50% - 5px);
	padding:13px 20px;
	margin: 10px 0 0;}
.mem_b01 a:hover,.mem_b02 a:hover{
	opacity: 0.85}
a.mem_b01a{
	background: #6B2221;
	color: #fff;}
a.mem_b01d{
	background: #6b6b6b;
	color: #fff;}
a.mem_b01b{
	background: #06c755;
	margin-top: 1em;
	color: #fff;}
a.mem_b01c{
	padding:13px 20px;
	margin: 10px 0 0;
	border: 1px solid #ffa37f;
	color: #ffa37f;}
a.mem_b01c:hover{
	color: #661b1a;
	background: #ffad8d;}
a.mem_b02a{
	background: #c56432;
	color: #FFF;}
a.mem_b02b{
	background: #3a3a3a;
	color: #FFF;}
.err_t01{
	font-size: 14px;
	color: #f00;
	font-style: normal;
	font-weight: 400;
	margin-top: 5px;
	display: block;
	letter-spacing: 0.05em;}
.login_box01a img{
	margin-bottom: 0.5em;
	width: 100%;}
img.logo01{
	width: 314px;
	margin-left: 30px;
	height: auto;}
#header,#footer,.member_box01{
	width: 100%;
	padding: 20px 50px;}
#header{
	display: flex;
	align-items: center}
#header h1{
	margin: 0 0 0 1em;
	color: #72170d;
	font-weight: 700;
	font-size: 20px;}
#footer{}
.member_box01{
	overflow: hidden;
	display: flex;
	align-items: stretch;}
.member_box01a,
.member_box01b{
	box-shadow: 0 0 0.75em rgba(0,0,0,0.1);
	overflow: hidden;
	padding: 50px 30px;
	background: #FFF;
	border-radius: 20px;}
.member_box01a{
	width: 480px;}
.member_box01 h2{
	margin-bottom:1.5em;
	font-size: 20px;
	color: #6B2221;
	font-weight: 600;}
.member_box01b{
	flex: 1;
	margin-left: 30px;}
.member_box02,.member_box03{
	font-size: 15px;}
.member_box02 li,.member_box03 li{
	display: flex;
	min-height: 37px;
	align-items: center;
	flex-wrap: wrap;
	font-weight: 500;
	margin-bottom: 0.5em;}
.member_box02 b{
	color: #3f3f3f;
	display: inline-block;
	width: 6em;}
.member_box03 b{
	color: #3f3f3f;
	display: inline-block;
	width: 9em;}
.member_box02a span{
	display: inline-block;
	background: #6B2221;
	color: #FFF;
	font-weight: 500;
	border-radius: 5px;
	padding: 5px 10px;
	font-size: 14px;
	margin: 0.5em 5px 0 0;	}
.member_box03 span{
	font-weight: 800;
	color: #C56432;
	font-size: 1.25em;
	display: inline-block;
	margin: 0 0.25em;}
.table_width{
	width: 100%;
	overflow-x: auto;}
.table_box01{
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: center;}
.table_box01 li{
	font-family: "Noto Sans TC", serif; ;
	flex: 1;
	border:1px solid #FFF;
	padding: 15px 10px;
	font-size: 15px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	font-weight: 500;}
.table_all li{
	line-height: 1.5;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: normal;
	color: #222;}
.table_all ul{
	background: #fefefe}
.table_all ul:nth-child(odd){
	background: #f6f6f6}
.table_box01 li.table_box01a{
	flex: inherit;
    width: calc(100% / 8* 5);}
.table_box01 li.table_box01b{
	flex: inherit;
    width: calc(100% / 8* 3);}
.table_bg01{
	background: #72170d;
	color: #FFF;}
.table_bg02{
	background: #ffa37f20;
	color: #222}
.table_all b,.table_all strong{
	display: none;}
.page_box01{
	width: 100%;
	margin-top: 30px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	letter-spacing: inherit;}
.page_box01 a,.page_box01 span{
	font-size: 13px;
	display: block;
	margin: 5px;
	width: 3em;
	font-weight: bold;
	height: 3em;
	line-height: 3em;
	text-align: center;
	background: #ffa37f20;
	color: #202020;
	border-radius: 999px;}
.page_box01 span{
	background: none;}
.page_box01 span[aria-current="page"],
.page_box01 a:hover{
	color: #FFF;
	background: #72170d;}
#footer{
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .05em;
	text-align: center;}
a.add-company-link{
	background: #3a3a3a;
    color: #FFF;
    border-width: 0;
    font-size: 14px;
    letter-spacing: .1em;
    padding: 7px 20px;
    border-radius: 99px;
    font-weight: 300;
	margin: 3px;
    line-height: 1.5;}
a.add-company-link:hover{
	background: #72170d;
	color: #FFF;
	border-width: 0;}
.pwd_box01{
	flex-wrap: wrap;
	display: flex;
	align-items: center;
	justify-content: space-between}
.pwd_box01 input{
	width: calc(50% - 10px);}
.pwd_box01 label{
	width: 100%;}
input[type="submit"] {
    padding: 13px 20px;
    background: #c56432;
    color: #FFF;}
@media (max-width: 1440px){
	.member_box01{
		flex-wrap: wrap;	}
	.member_box01a,.member_box01b{
		padding: 30px;	}
	.member_box01a{
		width: 100%;
		margin-bottom: 30px;}
	.member_box01b{
		margin: 0;	}
}
@media (max-width: 1024px){
	.mobile_none{
		display: none;	}
	.table_all li,.table_box01 li.table_box01b{
		width: 100%;
		flex:auto;
		font-size: 15px;
		border-width: 0;
		display: block;
		text-align: left;
		justify-content: space-between}
	.table_box01 b{
		text-align: left;
		color: #a74949;
		font-weight: 600;
		display: block;
		margin-bottom: 5px;}
	.table_all strong{
		display: block;
		font-size: 17px;
		color: #72170d;
		margin: 10px 0 5px;	}
	.table_box01 li{
		font-weight: 400;
		padding: 7.5px 20px;}
	.table_box01{
		padding: 0px 0 20px 0;
		flex-wrap: wrap;}
	.table_box01c{
		background: #C56432;
		margin-bottom: 10px;
		padding:17px 20px!important;
		color: #FFF!important;}
	.table_all ul:nth-child(odd) .table_box01c{
		background: #72170d;}
	.table_box01c b{
		margin: 0;
		color: #FFF;
		display: inline;}
}
@media (max-width: 921px){	
	.login_box01a h1,.login_box01b h2{
		font-size: 20px;	}
	.login_box01a img{
		max-width: 360px;}
	.login_box01{
		width: 90%;
		flex-wrap: wrap;	}
	.login_box01a,
	.login_box01b{
		width: 100%;
		padding: 30px;}
	
}