/* reservation */
.wideBackground{}

#content-container article{
	
}
	#content-container article .wrapper{
		position:relative;
	}
/*-------------------------------------------
filter
-------------------------------------------*/
#filter{
	padding:30px 15px;
	text-align:center;
	position:relative; z-index:99;
	text-align:left;
}
	#filter > div{
		position:relative;
		height:auto!important; min-height:34px;
		padding:10px 0 10px 45px;
		border-top:1px solid #e3e3e3;
		line-height:34px;
	}
	#filter > div:first-child{
		border:none;
	}
		#filter .step{
			position:absolute; left:0;
			width:32px; height:32px;
			font-size:130%; line-height:32px; color:#fff; 
			text-align:center;
			background-color:#666;
			border-radius:50%;
		}
		#filter ul{
			list-style:none;
			margin:0;
			padding:0;
		}
			#filter ul li{
				float:left;
				padding-bottom:2px;
			}
			#filter .filter-date li{
				padding-right:20px;
			}
			#filter .filter-get li{
				padding-right:20px;
			}
			#filter .filter-size li{
				padding-right:20px;
			}
			#filter .filter-other li{
				padding-right:20px;
			}
				#filter input.datepicker{
					width:130px;
				}
				.btn-q{
					color:#09F;
					background:url(../images/icon-help-24px.svg) 0 50% no-repeat;
					background-size:20px 20px;
					padding-left:16px;
				}
				.btn-q:hover{
					color:#0499ef;
				}
				#filter .btn-search{
					width:64px; height:64px;
					background:url(../images/icon-search-24px.svg) 50% 50% no-repeat #df151d;
					background-size:cover;
					border-radius:50%;
					text-indent:-99999em;
					position:absolute; left:50%; margin-left:-32px !important; bottom:-32px;
					box-shadow:none;
				}
				#filter .btn-search2{
					width:64px; height:64px;
					background:50% 50% no-repeat #df151d;
					border-radius:50%;
					text-align:center;
					font-size:18px;
					position:absolute; left:50%; margin-left:-32px !important; bottom:-32px;
					box-shadow:none;
				}
@media screen and (max-width:667px){/* i6,i7,i8 Landscape */
	#filter .filter-date li{
		padding-bottom:5px;
	}
}
@media screen and (max-width:414px){/* i6,i7,i8 Plus */
	#ui-datepicker-div.for-fun{
		width:60% !important;
		top:50% !important;
		left:50% !important;
		transform:translate(-50%, -50%);
		font-family:inherit;
		border-radius:5px;
		box-shadow:0 0 10px rgba(0,0,0,.4);
	}
		#ui-datepicker-div.for-fun .ui-datepicker-group{
			width:100% !important;
		}
}

/*-------------------------------------------
products list
-------------------------------------------*/
#products-list{
	list-style:none;
	padding:20px 10px 0;
	margin:0; 
	display:-webkit-box; display:-ms-flexbox;
	display:flex; display:-webkit-flex;
	flex-wrap:wrap; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap;
}
	#products-list li{
		flex:0 0 25%;
		text-align:center;
		padding:0 15px;
		margin-bottom:30px;
	}
		#products-list a{
			display:block;
			position:relative;
			width:100%;
			height:0;
			padding-bottom:72.2%;
			overflow:hidden;
			margin:0 auto;
			background-color:#fff;
			border-radius:5px;
			box-shadow:0 0 8px rgba(0,0,0,.2);
			transition:.2s; -webkit-transition:.2s;
		}
		#products-list a:hover{
			
		}
		#products-list .empty{
		  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
		  filter:alpha(opacity=30);
		  -moz-opacity:.3;
		  -khtml-opacity:.3;
		  opacity:.3;
		  box-shadow:0 0 0 rgba(0,0,0,0);
		}
			#products-list .product-img{
				position:absolute; left:0; top:0;
				width:100%; height:100%;
				margin:0;
			}
		#products-list .product-name{
			font-size:100%; line-height:1.2;
			color:#000;
			margin-top:8px;
		}
@media screen and (max-width:768px){/* Pad */
	#products-list li{
		flex:0 0 33%;
	}
}
@media screen and (max-width:414px){/* i6,i7,i8 Plus */
	#products-list li{
		flex:0 0 50%;
		padding:0 10px;
	}
}

/*-------------------------------------------
product view
-------------------------------------------*/
#product-detail{
	margin:0;
}
	#product-detail .product-header{
		display:-webkit-box; display:-ms-flexbox;
		display:flex; display:-webkit-flex;
		flex-wrap:wrap; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap;
	}
		#product-detail .productImg{
			flex:0 0 45%;
			padding:15px 0 30px;
			text-align:center;
		}
			#product-detail .productImg .productTitle{
				display:none;
			}
			#product-detail .productImg img{
				width:100%;
				height:auto;
			}
		#product-detail .productDesc{
			flex:0 0 55%;
			padding-left:35px;
		}
			#product-detail .productDesc .productTitle{
				margin:0;
				color:#000;
				font-size:150%; line-height:1.2;
				padding:0 0 10px; 
				border-bottom:2px solid #e1c9af;
			}
			#product-detail .productDesc ul{
				margin:0; padding:0; list-style:none;
			}
				#product-detail .productDesc ul li{
					position:relative;
					padding:10px 5px 10px 7em;
				}
				#product-detail .productDesc ul li:nth-child(even){
					background-color:#f7f7f7;
				}
					#product-detail .productDesc ul li strong{
						position:absolute; left:0; 
						display:inline-block;*display:inline;zoom:1;
						width:6em;
						padding-left:10px;
						border-right:1px solid #ddd;
						color:#111;
					}
					#product-detail .productDesc .btn-booking{
						width:100%;
						margin-top:10px;
						font-size:120%;
					}
@media screen and (max-width:568px){/* i5 Landscape */
	#product-detail .productImg{
		flex:0 0 100%;
		padding-top:0;
	}
		#product-detail .productImg .productTitle{
			display:block;
			margin-top:0;
			color:#000;
			font-size:150%; line-height:1.2;
		}
		#product-detail .productImg img{
			width:80%;
		}
	#product-detail .productDesc{
		flex:0 0 100%;
		padding-left:0;
	}
		#product-detail .productDesc .productTitle{
			text-align:center;
		}
}
@media screen and (max-width:414px){/* i6,i7,i8 Plus */
	#product-detail .productImg .productTitle{
		text-align:left;
	}
	#product-detail .productImg img{
		width:100%;
	}
	#product-detail .productDesc .productTitle{
		text-align:left;
	}
}
@media screen and (max-width:320px){/* i5 */
	#product-detail .productImg .productTitle,
	#product-detail .productDesc .productTitle{
		font-size:130%;
	}
}
	
#product-content{
	margin-top:20px;
}
	#product-content .productBody{
		clear:both;
		word-wrap:break-word; word-break:normal;
		padding:0 0 25px;
	}
		#product-content .productBody *{
			font-family:inherit !important;
		}
		#product-content .productBody .block-grid,
		#product-content .productBody .block-grid div{
			width:100% !important;
			max-width:100% !important;
		}
		#product-content .productBody .block-grid{
		}
		#product-content .productBody .block-grid{
		}
		#product-content .productBody .block-grid{
		}
		#product-content .productBody img{
			display:block; 
			margin:10px auto;
			width:100% !important;max-width:100% !important;
			height:auto !important;
			transition:.3s; -webkit-transition:.3s;
		}
		#product-content .productBody .iframeWrap{
			position:relative;
			width:100%;
			height:0;
			padding-bottom:56.25%;
			transition:.3s; -webkit-transition:.3s;
		}
			#product-content .productBody .iframeWrap iframe{
				position:absolute; left:0; top:0;
				width:100%;
				height:100%;
				transition:.3s; -webkit-transition:.3s;
			}
			#product-content .productBody iframe{
				display:block;
				margin:0 auto;
			}

/*-------------------------------------------
booking
-------------------------------------------*/
#booking{
	
}
	#booking .list{
		background-color:#fff;
	}
		#booking .list thead th{
			text-align:center;
			padding:5px;
			color:#000;
			line-height:1.2;
			border:1px solid #dac1a8; border-bottom:2px solid #dac1a8;
			background-color:#f5ecd8;
		}
		#booking .list tbody td{
			padding:10px;
			border:1px solid #dac1a8;
			color:#111;
			line-height:1.2;
		}	
		#booking .list .product-name{
			text-align:left;
		}
			#booking .list .product-name strong{
				color:#111; font-size:16px;
			}
			#booking .list .product-name span{
				color:#777; font-size:13px;
			}
			#booking input[type=checkbox] + label:before{
				display:inline-block;*display:inline;zoom:1;
				content:"  ";
				height:24px; line-height:24px; padding-left:26px;
				vertical-align:-7px;
			}
			#booking .list .price{
				text-align:right;
			}
			#booking .btn-del{
				padding:5px 8px;
				margin:0 auto;
			}
		#booking .list tfoot th,
		#booking .list tfoot td{
			border-top:2px solid #dac1a8;
			padding:10px 10px;
			line-height:1.2;
		}
			#booking .list .total{
				color:#f00;
				text-align:right;
			}
	.buttons-addBooking .btn.btnAddBooking{
		background-color:#0499ef;
		margin:5px;
	}
@media screen and (max-width:812px){/* iX Landscape */
	#booking .list{
		border:1px solid #dac1a8;
	}
	#booking .list thead{
		display:none;
	}
	#booking .list tbody{
		display:block;
		padding:0 15px;
	}
		#booking .list tbody tr{
			display:block;
			padding:15px 0;
			position:relative;
		}
		#booking .list tbody tr{
			border-bottom:1px solid #dac1a8;
		}
			#booking .list tbody td{
				display:block;
				width:100%;
				padding:3px 0;
				text-align:left;
				border:none;
			}
			#booking .list tbody td.none-data{
				text-align:center;
			}
			#booking .list tbody td[data-th="NO."]{
				width:auto;
				position:absolute; top:15px; left:0;
				background-color:#666;
				color:#fff;
				padding:4px 5px;
				border-radius:5px;
			}
			#booking .list tbody td[data-th*="租用物品"]{
				padding-top:40px;
			}
			#booking .list tbody td[data-th*="日期"]{
				display:inline-block;
				width:49%;
			}
			#booking .list tbody td[data-th="刪除"]{
				width:auto;
				position:absolute; top:15px; right:0;
				padding:0;
			}
				#booking .list tbody td:before{
					display:inline-block;
					content:attr(data-th)"：";
				}
				#booking .list tbody td[data-th="刪除"]:before,
				#booking .list tbody td.none-data:before{
					display:none;
				}
				#booking .list tbody td[data-th="NO."]:before{
					content:attr(data-th)"";
				}
				#booking .list tbody td[data-th="日租金"] br,
				#booking .list .product-name br{
					display:none;
				}
				#booking .list .product-name span{
					margin-left:15px;
				}
				#booking .list tbody td[data-th="日租金"] strong{
					margin-left:15px;
				}
	#booking .list tfoot{
		display:block;
		padding:0 15px 20px;
	}
		#booking .list tfoot tr{
			display:block;
			position:relative;
			padding:10px 0;
			border-top:2px solid #dac1a8;
		}
			#booking .list tfoot th{
				border:none;
				padding:0;
				font-size:110%;
			}
			#booking .list tfoot td{
				display:none;
			}
	.buttons-addBooking .btn.btnAddBooking{
		width:48%;
	}

	#booking .list-add-booking tbody tr{
		padding:15px 0;
		overflow:hidden;
	}
	#booking .list-add-booking tr:last-of-type{
		border-bottom:none;
	}
		#booking .list-add-booking tbody td{
			margin-left:140px;
			border-bottom:1px solid #ddd;
			padding-left:5em;
		}
		#booking .list-add-booking tbody td:last-of-type{
			border:none;
		}
		#booking .list-add-booking tbody td[data-th="商品圖片"]{
			position:absolute; left:0; top:15px;
			width:120px;
			padding:0;
			margin:0;
			border:none;
		}
			#booking .list-add-booking tbody td:before{
				font-weight:700;
				position:absolute; left:140px;
			}
			#booking .list-add-booking td img{
				height:auto !important;
				width:100%;
			}
			#booking .list-add-booking tbody td[data-th="商品圖片"]:before{
				display:none;
			}
			#booking .list-add-booking tbody td .btn{
				line-height:1.2;
			}
}
@media screen and (max-width:640px){/* Xiaomi Landscape */
	.buttons-addBooking .btn.btnAddBooking{
		width:47%;
	}
}
@media screen and (max-width:414px){/* i6,i7,i8 Plus */
	#booking .list tbody td[data-th*="日期"]{
		display:block;
		width:100%;
	}
	.buttons-addBooking .btn.btnAddBooking{
		margin:5px 0;
		width:100%;
	}

	#booking .list-add-booking tbody td{
		margin-left:0;
		padding-left:90px;
	}
	#booking .list-add-booking tbody td[data-th="商品圖片"]{
		position:static;
		margin:0 auto;
		padding-bottom:15px;
	}
		#booking .list-add-booking tbody td:before{
			position:absolute; left:0;
		}
}

/*-------------------------------------------
check-out
-------------------------------------------*/
#check-out .group-title{
	margin:5px 0;
	font-size:130%;
	color:#ed1c24;
}
	/*-------------------------------------------
	check-out contact info
	-------------------------------------------*/
	.contact-info tbody th{
		padding:8px;
		color:#000;
		font-size:95%;
		border:1px solid #dac1a8;
		background-color:#f5ecd8;
		width:140px;
		text-align:left;
	}
	.contact-info tbody td{
		padding:8px;
		background-color:#fff;
		border:1px solid #dac1a8;
	}
		.contact-info input[name="address"]{
			width:350px;
		}
		.contact-info input[name="coupon_code"]{
			width:150px;
		}
		.contact-info .explanation{
			margin-left:5px;
		}
		.contact-info .btn-coupon{
			margin:0;
		}
		.contact-info .payType{
			margin:5px 0;
		}
		.contact-info .total{
			color:#f00; font-size:18px;
		}
@media screen and (max-width:667px){/* i6,i7,i8 Landscape */
	.contact-info{
		border:1px solid #dac1a8;
		background-color:#fff;
	}
		.contact-info tbody{
			display:block;
			padding:15px 0;
		}
		.contact-info tbody tr{
			display:block;
			padding:0 15px;
		}
			.contact-info tbody th{
				display:block;
				width:100%;
				padding:3px 5px;
				border:none;
			}
			.contact-info tbody td{
				display:block;
				position:relative;
				padding:5px 5px 10px 3px;
				border:none;
			}
				.contact-info input{
					margin-bottom:3px;
				}
}
@media screen and (max-width:414px){/* i6,i7,i8 Plus */
	.contact-info input[name="address"],
	.contact-info input[name="tax_comp_name"]{
		width:100%;
	}
}
	/*-------------------------------------------
	check-out list
	-------------------------------------------*/
	#check-out .list{
		background-color:#fff;
	}
		#check-out .list thead th{
			text-align:center;
			padding:5px;
			color:#000;
			line-height:1.2;
			border:1px solid #dac1a8; border-bottom:2px solid #dac1a8;
			background-color:#f5ecd8;
		}
		#check-out .list tbody td{
			padding:10px;
			border:1px solid #dac1a8;
			color:#111;
			line-height:1.2;
		}
		#check-out .list tbody td.no-padding{
			padding:0;
		}
		#check-out .list tfoot th,
		#check-out .list tfoot td{
			line-height:1.2;
			padding:10px;
			border-top:1px solid #dac1a8;
		}
		#check-out .list tfoot tr:first-child th,
		#check-out .list tfoot tr:first-child td{
			border-top-width:2px;
		}
			#check-out .list .product-name{
				text-align:left;
			}
				#check-out .list .product-name strong{
					color:#111; font-size:16px;
				}
				#check-out .list .product-name span{
					color:#777; font-size:13px;
				}

			#check-out input[type=checkbox] + label:before{
				display:inline-block;
				content:"  ";
				height:24px; line-height:24px; padding-left:26px;
				vertical-align:-7px;
			}
			#check-out .list .price{
				text-align:right;
			}
			#check-out .btn-del{
				padding:2px 10px;
				margin:0 auto;
			}
			#check-out .list tfoot td{
				padding:10px;
			}
			#check-out .list .total{
				text-align:right;
				color:#f00;
			}
@media screen and (max-width:812px){/* iX Landscape */
	#check-out .list{
		border:1px solid #dac1a8;
	}
	#check-out .list thead{
		display:none;
	}
	#check-out .list tbody{
		display:block;
		padding:0 15px;
	}
		#check-out .list tbody tr{
			display:block;
			padding:15px 0;
			position:relative;
		}
		#check-out .list tbody tr{
			border-bottom:1px solid #dac1a8;
		}
			#check-out .list tbody td{
				display:block;
				width:100%;
				padding:3px 0;
				text-align:left;
				border:none;
			}
			#check-out .list tbody td.none-data{
				text-align:center;
			}
			#check-out .list tbody td[data-th="NO."]{
				width:auto;
				position:absolute; top:15px; left:0;
				background-color:#666;
				color:#fff;
				padding:4px 5px;
				border-radius:5px;
			}
			#check-out .list tbody td[data-th*="租用物品"]{
				padding-top:40px;
			}
			#check-out .list tbody td[data-th*="日期"]{
				display:inline-block;
				width:49%;
			}
			#check-out .list tbody td[data-th="刪除"]{
				width:auto;
				position:absolute; top:15px; right:0;
				padding:0;
			}
				#check-out .list tbody td:before{
					display:inline-block;
					content:attr(data-th)"：";
				}
				#check-out .list tbody td[data-th="刪除"]:before,
				#check-out .list tbody td.none-data:before{
					display:none;
				}
				#check-out .list tbody td[data-th="NO."]:before{
					content:attr(data-th)"";
				}
				#check-out .list tbody td[data-th="日租金"] br,
				#check-out .list .product-name br{
					display:none;
				}
				#check-out .list .product-name span{
					margin-left:15px;
				}
				#check-out .list tbody td[data-th="日租金"] strong{
					margin-left:15px;
				}
	#check-out .list tfoot{
		display:block;
		padding:0 15px 20px;
	}
		#check-out .list tfoot tr{
			display:block;
			position:relative;
			padding:10px 0;
			border-top:2px solid #dac1a8;
		}
			#check-out .list tfoot th{
				border:none;
				padding:0 10px 0 0;
				font-size:110%;
			}
			#check-out .list tfoot td{
				display:none;
			}
				#check-out .list tfoot th[data-th="運費"]:before,
				#check-out .list tfoot th[data-th="租用物品"]:before{
					display:inline-block;
					content:attr(data-th)"：";
					color:#333;
				}
				#check-out .list tfoot th[data-th="租用物品"]:before{
					margin-left:15px;
				}
}
@media screen and (max-width:667px){/* i6,i7,i8 Landscape */

}
/*-------------------------------------------
Confirm
-------------------------------------------*/
#confirm{
	
}
.imgCode{
	display:inline-block;*display:inline;zoom:1;
	line-height:38px;
	background-color:#fff;
	color:#333; font-size:18px;
	padding:0 20px;
}

/*-------------------------------------------
AD
-------------------------------------------*/
#myCarousel{
	margin-top:20px;
}

/*-------------------------------------------
rent_rule
-------------------------------------------*/
.agree{
	text-align:center;
	background-color:#fffbe7;
}
	.agree a{
		margin-left:10px;
		cursor:pointer;
	}

.popup_msg {
    width: 900px;
    height: 600px;
    overflow: auto;
    background-color: #FFF;
    display: none;
    padding: 40px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    font-size: 15px;
	line-height:1.8em;
}
.popup_msg h1 {
	text-align: center;
	margin-bottom: 30px;
	color: #EA2F00
}
.popup_msg::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
}
.popup_msg::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 3px solid #fff;
    background-color: rgba(0, 0, 0, .3);
}