/* 篩選-簡易 */
.form-filter-simple {
	margin: 0 0 25px;
	/* background: #eaeaea; */
	padding: 0 10px;
}
.form-filter-simple--gray {
	background: #f7f7f7;
}
.form-filter-simple .form__body{
}
/* row */
.form-filter-simple .form__field {
	margin-bottom: 0;
}
/* 標題 */
.form-filter-simple .form__label {
	display: block;
	border-bottom: 1px solid #ccc;
	padding: 10px;
	text-align: center;
	display: none;
}
.form-filter-simple .form__inputgroup{
	padding: 10px;
}
.form-filter-simple .form-filter__btnbox{
	position: static;
	background: none;
	border: none;
	padding: 0;
	margin: 5px 0;
}
.form-filter-simple .form-filter__btnbox .btn{
	margin: 0;
	width: 100%;
	max-width: 100%;
}
@media screen and (min-width: 768px) {
	/* 篩選-簡易 */
	.form-filter-simple{
		background: none;
		padding: 0;
	}
	.form-filter-simple--gray {
		padding: 10px;
		background: #f7f7f7;
	}
	/* label */
	.form-filter-simple .form__label {
		border: none;
		margin: 0;
		padding: 8px 0;
		vertical-align: middle;
		width: 80px;
		border: none;
	}
	.form-filter-simple .form__body{
		padding: 0;
	}
	.form-filter-simple .form__label:after {
		content: "：";
		display: inline-block;
		vertical-align: middle;
	}
	/* row */
	.form-filter-simple .form__inputgroup{
		display: inline-block;
		vertical-align: middle;
		padding: 0;
	}
	.form-filter-simple .list-option{
		margin-bottom: 0;
	}
}
@media screen and (min-width: 1024px) {
	/* 篩選-簡易 */
	.form-filter-simple {
		margin: 0 0 5px;
		border: none;
	}
	/* .form-filter-simple--gray {
		padding: 10px 15px;
	} */
	/* 內容 */
	.form-filter-simple .form__body{
		padding: 0;
	}
	/* label */
	.form-filter-simple .form__label {
		display: none;
	}
}
/* pingle */
.filter {
	/* padding: 0; */
	/* -webkit-overflow-scrolling: touch; */
	/* display: none; */
	text-align: center;
	margin-bottom: 10px;
}
/* 觸發鈕 */
.filter_btn-triggle{
	display: inline-block;
	width: 100%;
	color: #fff;
	background: #00b0b9;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	padding: 10px 0;
	text-align: center;
	text-decoration: none;
	max-width: 300px;
}
/* 觸發鈕 */
.filter_btn-triggle:active{
	color: #fff;
}
.filter--open .filter_btn-triggle{

}
.filter_triggle-icon{
	font-size: 20px;
	margin-left: 5px;
	vertical-align: text-bottom;
	-webkit-transition: transform .25s ease-in-out;
	-moz-transition: transform .25s ease-in-out;
	transition: transform .25s ease-in-out;
}
.filter_btn-triggle:active .filter_triggle-icon{
	color: #fff;
}
/* 篩選表單 */
.form-filter{
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	background: #f7f7f7;
	overflow: hidden;
	/* padding: 10px; */
	/* display: none; */
	-webkit-transition: max-height .35s;
	-moz-transition: max-height .35s;
	transition: max-height .35s;
	max-height: 0;
}
.filter--open .form-filter{
	/* display: block; */
	z-index: 11;
	max-height: 2000px;
}
/* 篩選內容 */
.form-filter__body{
	height: calc(100vh - 58px);
	overflow-y: auto;
	padding: 10px;
}
/* 單項 */
.form-filter__field{
	margin-bottom: 0;
}
/* 欄位 */
.form-filter__label{
	color: #008f9e;
	border-bottom: 1px solid #ddd;
	padding: 20px 0 5px;
	display: block;
}
/* label-文字 */
.form-filter__label-tex{
	font-size: 18px;
}
/* label-icon */
.form-filter__label-icon{
	float: right;
	font-size: 16px;
	margin-right: 5px;
}
/* label-icon-開啟 */
.form-filter__label--active .form-filter__label-icon:before{
	content: "\e90d";
}
/* 填寫區 */
.form-filter__inputgroup{
	padding: 5px 0;
	display: none;
}
/* 填寫區-開啟 */
.form-filter__label--active + .form-filter__inputgroup{
	display: block;
}
/* 選項組 */
.form-filter__list-option{
	text-align: left;
}
/* 按鈕區 */
.form-filter__btnbox{
	border-top: 1px solid #ddd;
	padding: 5px 10px;
	margin: 0 -6px;
	font-size: 0;
	letter-spacing: -4px;
	word-spacing: 0;
}
.form-filter__btnbox .btn{
	margin: 0 5px;
	width: calc(50% - 10px);
	max-width: 144px;
	font-size: 16px;
	letter-spacing: normal;
	word-spacing: normal;
	zoom: 1;
}
.filter.FilterOpen {
	display: block;
}
.filter.FilterOpen + ul.List {
	display: none;
}
.filter.FilterOpen + ul.List + div.Loading {
	display: none;
}
.filter > form {
	width: auto;
	background: #fff;
	margin: 0;/*0 10px/320px*100*/
	border: 1px solid #ddd;
}
.filter > form fieldset {
	margin: 0 3.125%;/*0 10px/320px*100*/
	border-bottom: 1px solid #ddd;
}
.filter > form fieldset legend {
	font-weight: bold;
	color: #00bcbe;
	width: 100%;
	padding: 0 0 1.4375em;/*0 0 23px/16px*/
	margin: 0 0 -5px;
	position: relative;
	top: 1.125em;/*18px/16px*/
}
/*如果使用者之視窗寬度>=768px，將會再載入這裡的 CSS。*/
@media screen and (min-width: 768px) {
	/* 篩選內容 */
	.form-filter__body{
	}
	.form-filter__field{
		display: block;
	}
	.form-filter__list-option .list-option__item{
		display: block;
	}
}
/*如果使用者之視窗寬度>=1024px，將會再載入這裡的 CSS。*/
@media screen and (min-width: 1024px) {
	.filter{
		margin-bottom: 30px;
	}
	/* 觸發鈕 */
	.filter_btn-triggle{
		/* display: inline-block; */
		width: auto;
		color: #008f9e;
		background: transparent;
		-moz-border-radius: 0;
		-webkit-border-radius: 0;
		border-radius: 0;
		padding: 0;
		text-align: center;
		text-decoration: none;
		max-width: initial;
		float: right;
		margin-top: -45px;
	}
	.filter_triggle-icon{
		transform: rotate(90deg);
	}
	.filter--open .filter_triggle-icon{
		transform: rotate(-90deg);
	}
	/* 篩選表單 */
	.form-filter{
		display: block;
		position: static;
		background: none;
		padding: 0;
	}
	.filter--open .form-filter{
		border-bottom: 1px solid #ddd;

	}
	/* 篩選內容 */
	.form-filter__body{
		text-align: left;
		height: auto;
		overflow-y: initial;
		display: flex;
		justify-content: space-between;
		padding: 30px 15px 20px;

	}
	.form-filter__field{
		display: inline-block;
		vertical-align: top;
	}
	/* 主機 */
	.filter-machine .form-filter__field-sort{
		width: 25%;
	}
	/* 主機 */
	.filter-machine .form-filter__field-function{
		width: 75%;
	}
	/* 主機 */
	.filter-machine .form-filter__field-spec{
		width: 20%;
	}
	.form-filter__field-sort,
	.form-filter__field-spec{
		min-width: 210px;
	}
	/* field功能項 */
	.form-filter__field-function,
	.form-filter__field-style,
	.form-filter__field-material{
		display: flex;
		flex-flow: column wrap;
	}
	.form-filter__field-function .list-option__item{
		width: calc(33.333% - 5px);
		display: inline-block;
	}
	.form-filter__list-option .list-option__item{
		margin-right: 0;
	}
	.form-filter__field-style .list-option__item,
	.form-filter__field-material .list-option__item{
		width: calc(50% - 5px);
		display: inline-block;
	}
	/* 主機 */
	.filter-accessories .form-filter__field-sort{
		width: 16.6%;
	}
	/* 主機 */
	.filter-accessories .form-filter__field-style{
		width: 33.3%;
	}
	/* 主機 */
	.filter-accessories .form-filter__field-material{
		width: 33.3%;
	}
	/* 主機 */
	.filter-accessories .form-filter__field-spec{
		width: 16.6%;
	}
	/* 欄位 */
	.form-filter__label{
		color: #008f9e;
		border-bottom: none;
		padding: 0;
		margin-bottom: 13px;
	}
	/* label-icon */
	.form-filter__label-icon{
		display: none;
	}
	/* 填寫區 */
	.form-filter__inputgroup{
		/* padding: 5px 0; */
		display: block;
	}
	/* 按鈕區 */
	.form-filter__btnbox{
		background: initial;
		position: static;
		border-top: none;
		padding: 5px 10px;
		margin: 0 -6px 20px;
		text-align: center;
	}
	.form-filter__btnbox .btn{
		padding: 5px 0;
		margin: 0 5px;
		width: calc(50% - 10px);
		max-width: 90px;
	}
}