@import 'https://fonts.googleapis.com/css?family=Pinyon+Script';

/* ---------- TOP ---------- */
	.sec01{
		width: 100%;
		height: 0;
		padding-bottom: 45.05%;
		margin-top:90px;
		background-position: 0 0;
		background-repeat: no-repeat;
		background-size: cover;
		position: relative;
	}
	.title_container{
		width: 30%;
		position: absolute;
		top: 38%;
		left: 11%;
		padding-right: 5%;
		animation: fadefromdown .7s forwards;
	}
	.title,
	.title_zh{
		font-family: 'Pinyon Script', cursive;
		color:white;
		font-weight: 400;
		font-size: 1.8em;
		line-height: 1.3em;
		text-shadow: 0 0 20px rgba(0,0,0,.8);
		/*text-transform: uppercase;*/
		letter-spacing: 1px;
		text-align: right;
		padding-top: 3%;
	}
	.title_zh{
		font-family: 'Crimson Text', serif;
	}
	.title{
		font-size: 4em;
		letter-spacing: -1px;
		border-bottom: 2px solid white;
		padding:0 0 2%;
	}
/* ---------- END TOP ---------- */
/* ---------- MAIN ---------- */
	.filter{
		display: block;
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background:rgba(0,0,0,.5);
		z-index: 1000;
	}
	.box{
		background:#fff;
		width: 40%;
		height: 250px;
		padding:50px 50px;
		position: absolute;
		top: 0;right: 0;bottom: 0;left: 0;
		margin:auto;
	}
	.box h3,
	.box p{
		text-align: center;
	}
	.box .btn{
		margin:30px auto 10px;
		cursor: pointer;
	}
	.box p:last-child{
		font-size: .9em;
		color:#aaa;
	}

	.container{
		position: relative;
		margin: 0 auto;
		width: 62.5%;
		max-width: 1200px;
	}
	.p_search{
		width: 100%;
		margin-bottom: 150px;
	}
	.category{
		display: inline-block;
		width: 30%;
		margin-right: 9%;
		position: relative;
	}
	.search{
		display: inline-block;
		width: 60%;
	}
/* ---------- END MAIN ---------- */
/* ---------- FORM ---------- */
	select{
		width: 100%;
		height: 36px;
		color:#3B3B3B;
		font-size: 1em;
		border:2px solid #E88400;
		padding: 2px 15px 2px 5px;
		-webkit-appearance: none; /*Removes default chrome and safari style*/
		-moz-appearance: none; /* Removes Default Firefox style*/
	}
	select:focus{
		outline:none;
	}
	option{
		color:#3B3B3B;
	}
	.category:after{
		position: absolute;
		bottom: 13px;
		right: 10px;
		content:"";
		display:block;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 7px 7px 0 7px;
		border-color: #E88400 transparent transparent transparent;
		pointer-events: none;
	}
	input[type="text"]{
		width: calc(100% - 100px);
		height: 36px;
		font-size: 1em;
		border:2px solid #E88400;
		box-sizing: border-box;
		padding: 2px 5px;
	}
	input[type="text"]:focus{
		outline:2px solid #E88400;
	}
	button[type="submit"]{
		width: 100px;
		height: 36px;
		color:white;
		font-size: 1em;
		vertical-align: top;
		background: #E88400;
		border:2px solid #E88400;
		outline: none;
		margin-left:-4px;
		cursor: pointer;
		text-align: left;
		padding-left:15px;
		box-sizing: border-box;
		position: relative;
		letter-spacing: 3px;
	}
	.icon{
		width:21px;
		height:21px;
		display:inline-block;
		position: absolute;
		top: 6px;
		right: 12px;
	}
	.btn>span {
		display: inline-block;
		top: 8px;
	}
/* ---------- END FORM ---------- */
/* ---------- PRODUCTS ---------- */
	.product{
		display: block;
		width: 100%;
		margin-bottom: 50px;
		position: relative;
		
		/*background: #ccc;*/
	}
	.preview{
		width: 22%;
		display: inline-block;
		margin-right: 7%;
		vertical-align: top;
	}
	.preview img{
		width: 100%;
	}
	.p_title{
		display: inline-block;
		width: 70.5%;
		height: auto;
		min-height: 200px;
		vertical-align: top;
		padding:25px 0;
	}
	.p_title h3{
		/*margin-left: -15px;*/？
		margin-top:8px;
		margin-bottom:15px;
		text-align: left;
	}
	.p_title h4{
		color: #3B3B3B;
		font-size: 1.5em;
		font-weight: bold;
	}
	.btn_down{
		position: absolute;
		bottom: 10px;
		left: 30%;
	}
/* ---------- END PRODUCTS ---------- */

/* ---------- RWD ---------- */
	@media only screen and (max-width: 1750px){
		.p_title{
			padding:0;
		}
	}
	@media only screen and (max-width: 1550px){
		.container{
			width: 85%;
		}
	}
	@media only screen and (max-width: 1220px){
		.title{
			font-size: 2.8em;
		}
		.p_title{
			width: 70%;
		}
	}
	@media only screen and (max-width: 1220px){
		.box{
			width: 60%;
		}
		.p_title h3{
			font-size: 1.5em;
			margin-bottom: 10px;
			margin-left: -4px;
			line-height: normal;
		}
		.p_title h4{
			font-size: 1.2em;
		}
	}
	@media only screen and (max-width: 768px){
		.box h3{
			font-size: 1.5em;
		}
		.sec01{
			margin-top: 50px;
			padding-bottom: 0;
			height: 100vh;
			background-position: center center;
		}
		.title_container{
			width: auto;
		}
		.category,
		.search{
			width: 100%;
			margin-bottom:20px;
		}
		.p_search{
			margin-bottom: 80px;
		}
		.preview{
			width: 40%;
		}
		.p_title{
			width: 50%;
		}
		.btn_down{
			position: absolute;
			bottom: 10px;
			left: 48%;
		}
	}
	@media only screen and (max-width: 650px){
		.preview{
			width: 50%;
			margin:0 auto;
			display: block;
		}
		.p_title{
			width: 100%;
			text-align: center;
		}
		.p_title h3{
			text-align: center;
		}
		.btn_down{
			position: relative;
			bottom: auto;
			left: auto;
			margin:20px auto;
		}
	}
	@media only screen and (max-width: 480px){
		.box{
			width: 80%;
			padding:50px 20px;
		}
		
	}
/* ---------- END RWD ---------- */