body{ position: relative }

/*slick屬性修改 */
.index_banner{ overflow: hidden;}
	.slick-slide img{ width: 100% !important;}
	.slick-dots{ bottom: 40px; width: 100%; text-align: center; }
		.slick-dots li{ margin:0 10px; width: 12px; height: inherit;}
			.slick-dots li button{ width: 14px; height:14px; border-radius:18px; background-color: #9B938C;}
			.slick-dots li.slick-active button{ background-color: #E1D8CA;}
			.slick-dots li button:before,.slick-dots li.slick-active button:before{ color: inherit;}

.pic_02{ margin:0;}

/* 產品區塊*/
.block_02{ position: relative; width: 100%; }
.block_02_contain::before{ content: ""; color: #9B938C; padding: 300px 0 0; background-color: #E1D8CA; text-align: center; width: 100%; display: block; }
.block_02_title{ position: relative; color: transparent; display: table; margin: -190px auto 210px; animation-delay: 1.2s; font-family:'Ubuntu',sans-serif,\5FAE\8EDF\6B63\9ED1\9AD4; color: #9B938C;}
.block_02.active .block_02_title::before{ content: ""; display: block; height: 100%; background-color: #9B938C; position: absolute; top: 0; bottom: 0; left: 0; -webkit-animation-delay: 2s; animation-delay: 2s; -webkit-animation: title_animate 1.2s cubic-bezier(.785, .135, .15, .86); -moz-animation: title_animate 1.2s cubic-bezier(.785, .135, .15, .86); animation: title_animate 1.2s cubic-bezier(.785, .135, .15, .86);  }
.block_02.active .block_02_title::after{ content: "推薦項目"; display: block; font-size: 2.8em; font-stretch: condensed; opacity: 0; -webkit-animation: title_show 1.2s ease-in-out; -moz-animation: title_show 1.2s ease-in-out; animation: title_show 1.2s ease-in-out; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;}

@-webkit-keyframes title_show {
  80% { opacity: 0; }
  100%{ opacity: 1; }
}
@-moz-keyframes title_show {
  80% { opacity: 0; }
  100%{ opacity: 1; }
}
@keyframes title_show {
  80% { opacity: 0; }
  100%{ opacity: 1; }
}

@-webkit-keyframes title_animate {
  0% { width: 0; }
  40% { width: 100%; }
  80% { width: 0; left: auto; right: 0; }
}
@-moz-keyframes title_animate {
  0% { width: 0; }
  40% { width: 100%; }
  80% { width: 0; left: auto; right: 0; }
}
@keyframes title_animate {
  0% { width: 0; }
  40% { width: 100%; }
  80% { width: 0; left: auto; right: 0; }
}

.product_demo{ margin:0 auto; padding: 0; max-width:1500px; font-size: 0; text-align: center; /*margin-top: -140px;*/ }
	.product_demo li{ display: inline-block; vertical-align: top; text-align: left; padding: 0 15px; margin-bottom: 100px; position: relative; font-size: 15px; }
		.p_photo{ display: block; padding-top: 100%; background-repeat: no-repeat; background-size: cover; position: relative; border: 1px solid #D2D2D2; }
			.p_content{ text-align: center; padding-top: 45px; }
			.p_title{ font-size: 1.2em; padding: 0 0 15px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
			.p_text{ line-height: 23px; height: 23px; color: #aaa; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
			.p_btn{ padding: 8px 10px; font-size: 1.05em; border: 1px solid #fff; color: #ffffff; display: block; text-align: center; margin-top: 15px; position: relative; }		
				.p_btn .svg-inline--fa{ position: absolute; right: 10px; top: 9px; }

		._showEffect{ opacity: 0; -webkit-transition:all .6s ease-out; -o-transition:all .6s ease-out; transition:all .6s ease-out;}
		.active._showEffect,.active ._showEffect{ opacity: 1; }
		.active._showEffect{ transition-delay: .4s; }
		.active .product_demo ._showEffect{ transform:translateY(30px);}
		.product_demo_item_01{ -webkit-transition-delay: .8s; -o-transition-delay: .8s; transition-delay: .8s; }
		.product_demo_item_02{ -webkit-transition-delay: 1.2s; -o-transition-delay: 1.2s; transition-delay: 1.2s; }
		.product_demo_item_03{ -webkit-transition-delay: 1.6s; -o-transition-delay: 1.6s; transition-delay: 1.6s; }
		.product_demo_item_04{ -webkit-transition-delay: 2s; -o-transition-delay: 2s; transition-delay: 2s; }
		.product_demo li:hover .p_content,.product_demo li._touchOn .p_content{ opacity: 1; top: 50%; }
			.product_demo li:hover .p_photo::before,.product_demo li._touchOn .p_photo::before{ opacity: 1; }


@media screen and (min-width: 768px){
/* 產品區塊*/
.product_demo{ padding:0 50px; }
	
.block_02_title{ margin: -160px auto 30px; }
.block_02.active .block_02_title::after{ font-size: 2.4em; }
}

@media screen and (min-width: 1024px){
	.block_02 .fp-tableCell{vertical-align:top !important;}
	.product_demo li{ width: 25%; }
	/*footer{ position: absolute; left: 0; right: 0; bottom: 0; }*/
}

@media screen and (max-width: 1023px){
	body{ padding-left: 0; }
	/*關於區塊*/
	.is-active._showEffect{ opacity: 1; }
	.block_01 .page_content{ padding: 0 10%; }

	/* 產品區塊*/
	.block_02_contain::before{ padding: 100px 0; }
	.block_02_title{ margin: -140px auto 75px; }
	.block_02 .block_02_title::after{ font-size: 1.9em; content: "推薦項目"; display: block;}
	.product_demo{ padding: 0; margin: -45px 0 0; }
		.product_demo li{ width: 45%; }
		.p_content{ padding: 15px 0 30px; }
			.p_title{ font-size: 1.2em; padding: 6px 0; margin-bottom: 6px;  }
			.p_text{ font-size: .85em; line-height: 18px;height:18px;}
			.p_btn{ margin-top: 8px; font-size: .75em; }

	.product_demo li{ margin-bottom: 0 }
}
/*若無推薦項目，直接顯示Footer*/
.block_02.fp-auto-height footer{position:relative;}
.block_02.fp-auto-height .footer_bg{opacity:1 !important;}

@media screen and (max-width: 768px){
.block_01,.block_01 .fp-tableCell{ height: auto !important; }
}

@media screen and (max-width: 767px){
/* slick*/
/*.slides{ width: 140%; margin: 0 -20%; }*/
.slick-dots{ bottom: 30px; }
	.slick-dots li{ margin:0 7px;}
		.slick-dots li button{ width: 8px; height:8px; }

/*.block_01_contain,.block_02_contain{ padding: 70px 0; }*/

/*關於區塊*/
.about_content{ font-size: .9em; line-height: 25px; margin-top: 0; }
.detail{ margin-top: 25px; }
.pic_02{ overflow: hidden;}
	.pic_02 img{ width: 130%; margin: 0 -15%; }

/* 產品區塊*/
.block_02_title{ margin: -150px auto 50px; }
.product_demo{ padding: 0 3% 60px; }
	.product_demo li{ width: 90%; max-width: 420px; padding-top: 30px; }
	.product_demo li:last-child{ border-bottom: 0; margin-bottom: 0; }
		.p_photo{ vertical-align: top; background-size: cover; }	
		.p_content{ vertical-align: top; }
}