@import url(../fonts/flaticon/flaticon.css);
@import url(revise.css);
@import url(header.css);
@import url(footer.css);
@import url(hover.css);
@import url(banner.css);


/*========================================================
                      	 基本介紹
=========================================================*/

.info-wrap {
	padding: 40px 12% 40px;
	text-align: center;
    font-size: 1.2rem;
}
.info-wrap h1 {
	color: #736357;
	font-size: 2rem;
	position: relative;
	margin: 20px 0 20px 0;
	font-weight: bold;
}
.info-wrap p {
	color: #998675;
    padding-bottom: 1rem;
}
.info-wrap .more {
}
.info-wrap .more a {
    background-color: #bfb8ae;
	color: #fff;
    padding: 0.75rem 5rem;
}
.info-wrap .more a:hover {
    background-color: #a09483;
}


/*========================================================
                      	 產品介紹
=========================================================*/

.product-wrap {
	padding: 40px 8% 80px;
}

.product-wrap .image-box .image-pic {
	position: relative;
    margin: 0 10px;
}
.product-wrap .image-box .image-pic > img {
	width: 100%;
	vertical-align: bottom;
}
.product-wrap .image-box .image-pic a {
	display: block;
	color: #3f3229;
}
.product-wrap .image-box .image-pic:before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 5;
	width: 100%;
	height: 10%;
	opacity: 0;
	transition: all 0.3s;
}
.product-wrap .image-box .image-pic:before {
	background-color: rgba(255, 255, 255, 0.5);
	opacity: 1;
	height: 100%;
}
.product-wrap .image-box .image-pic:hover:before {
	background-color: rgba(255, 255, 255, 0);
}
.product-wrap .thumb-inner {
	position: absolute;
	left: 0;
	top: 50%;
	z-index: 6;
	transform: translateY(-50%);
	width: 100%;
	text-align: center;
}
.product-wrap .image-box .image-pic:hover .thumb-inner {
	display: block;
	display: none;
}
.product-wrap .thumb-inner h3 {
	color: #3f3229;
	font-size: 32px;
    font-weight: bold;
    margin: 0;
}
.product-wrap .thumb-inner span {
	display: inline-block;
	color: #3f3229;
	font-size: 22px;
    font-weight: bold;
}

/*  尺寸設定 */
@media (min-width: 1600px) {
    .product-wrap .image-box .image-pic {
        margin: 0 30px;
    }
}


/*========================================================
                      	 專業團隊
=========================================================*/

.team-wrap {
	padding: 0;
	overflow: hidden;
}
.team-wrap .wrap {
	width: 100%;
	padding: 0;
}
.team-wrap .bx-wrapper .bx-controls-direction a {
	width: 40px;
	height: 40px;
	margin-top: -20px;
	-webkit-transform: none;
	-moz-transform: none;
	-o-transform: none;
	transform: none;
}

.responsive-team {
	margin: 0;
	padding: 0;
	background: #f8f8f8;
}
.responsive-team li {
	transition: all 0.4s ease;
}
.responsive-team li.slick-current {
	position: relative;
	opacity: 1;
	z-index: 99;
}
.responsive-team li .item {
	background: #fff;
}
.responsive-team li img {
	display: block;
	width: 100%;
}


/*箭頭*/
.team-wrap .slick-prev, .team-wrap .slick-next {
	z-index: 99;
	border-radius: 50%;
}
.team-wrap .slick-prev {
	left: 18%;
	margin-left: -40px;
}
.team-wrap .slick-next {
	right: 18%;
	margin-right: -40px;
}
.team-wrap .slick-prev:hover, .team-wrap .slick-prev:focus, .team-wrap .slick-next:hover, .team-wrap .slick-next:focus {
	background-color: #998675;
}


/*  尺寸設定 */
@media (min-width: 1200px) {
	.responsive-team li {
		opacity: 0.2;
	}
}


/*========================================================
                           問與答
=========================================================*/

.faq-wrap {
    background-color: #f7f7f7;
	padding: 60px 10% 100px;
}
.faq-box {
	border: 1px solid #736357;
    margin-top: 50px;
    padding: 0 40px 80px 40px;
    position: relative;
}
.faq-box h2 {
	font-family: Verdana, Helvetica, sans-serif;
	text-align: center;
	color: #736357;
	font-size: 6rem;
	margin: -70px 0 30px 0;
	font-weight: bold;
    position: relative;
    z-index: 9;
}
.faq-box h2:before {
	content: '';
	position : absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: -1;
    width: 200px;
    height: 50px;
    background-color: #f7f7f7;
}
.faq-box .slider .info {
    color: #998675;
}
.faq-wrap .slider .info h3  {
    color: #736357;
    font-size: 2rem;
    text-align: center;
    font-weight: bold;
    margin: 0 0 30px 0;
}

.faq-box .more {
    text-align: center;
    position: absolute;
    bottom: -25px;
	left: 50%;
	transform: translateX(-50%);
    z-index: 9;
}
.faq-box .more a {
    display: inline-block;
    background-color: #bfb8ae;
    color: #fff;
    padding: 10px 30px;
}
.faq-box .more a:hover {
    background-color: #736357;
}


/*  尺寸設定 */
@media (min-width: 768px) {
    .faq-box {
        padding: 0 80px 60px 80px;
    }
    .faq-box .more a {
        padding: 10px 100px;
    }
}


/*========================================================
                      	 好評推薦
=========================================================*/

.good-wrap {
	background-color: #f7f7f7;
	padding: 60px 5% 60px;
}
.good-wrap img {
    width: 100%;
    vertical-align: bottom;
    border-radius: 50%;
}
.good-wrap img:hover {
    opacity: 0.7;
}
.good-wrap h1 {
	text-align: center;
	color: #736357;
	font-size: 2.4rem;
	position: relative;
	margin: 0 0 50px 0;
	font-weight: bold;
}

.good-wrap [class*="col-"] dl { 
    box-shadow: 2px 2px 8px rgba(0,0,0,0.3);
    border-radius: 13px;
    margin: 0 15px 30px;
    padding: 20px;
}
.good-wrap [class*="col-"] dl dt { 
    padding: 20px 40px 0;
	margin-bottom: 10px;
}
.good-wrap [class*="col-"] dl dd {
	color: #774f36;
    padding: 20px;
    text-align: left;
}
.good-wrap [class*="col-"] dl dd h3 {
    text-align: center;
	margin: 0 0 10px 0;
	font-size: 1.6rem;
    font-weight: bold;
}
.good-wrap [class*="col-"] dl dd p {
	font-size: 1.2rem;
    margin: 0;
}


/*  尺寸設定 */
@media (max-width: 991px) {
	.good-wrap [class*="col-"] {	
		display: none;
	}
	.good-wrap [class*="col-"]:nth-of-type(-n+4) {	
		display: block;
	}
}
@media (min-width: 640px) and (max-width: 767px) {
    .good-wrap [class*="col-"] dl { 
        margin: 0 0px 30px;
        padding: 5px;
    }
    .good-wrap [class*="col-"] dl dt { 
        padding: 20px 15px 0;
    }
}

@media (min-width: 1200px) and (max-width: 1599px) {
    .good-wrap [class*="col-"] dl { 
        margin: 0 5px 30px;
        padding: 5px;
    }
}



/*========================================================
                         毛毛部落
=========================================================*/

.daily-wrap {
	background-color: #e2daca;
	padding: 60px 0 80px; 
}
.daily-wrap h1 {
	text-align: center;
	color: #736357;
	font-size: 2.4rem;
	position: relative;
	margin: 0 0 30px 0;
	font-weight: bold;
}
.daily-wrap [class*="col-"] {

}
.daily-wrap .image-box .image-pic {
    overflow: hidden;
	position: relative;
}
.daily-wrap .image-box .image-pic > img {
	width: 100%;
	vertical-align: bottom;
}
.daily-wrap .image-box .image-pic:hover > img  {
    transform: scale(1.1);
    transition: .3s;
}
.daily-wrap .image-box .image-pic a {
	display: block;
	color: #3f3229;
}
.daily-wrap .thumb-inner {
/*	display: none;*/
	position: absolute;
	left: 0;
	top: 80%;
	z-index: 6;
	transform: translateY(-80%);
	width: 100%;
	text-align: center;
}
.daily-wrap .thumb-inner span {
	display: inline-block;
	color: #736357;
	font-size: 2rem;
    font-weight: bold;
    background-color: rgba(255,255,255,0.8);
    padding: 15px 25%;
}

/*  尺寸設定 */
@media (max-width: 575px) {
	.daily-wrap [class*="col-"] {	
		padding: 15px 30px;
	}
	.daily-wrap .thumb-inner span {
		font-size: 1.6rem;
		padding: 10px 25%;
	}
}


/*========================================================
                      	 影音專區
=========================================================*/

.video-wrap {
	background-color: #d7d0c5;
	padding: 80px 5% 0px;
}
.video-wrap [class*="col-"] {
	margin-bottom: 30px;
}
.video-wrap .image-box .image-pic {
	position: relative;
    overflow: hidden;
}
.video-wrap .image-box .image-pic > img {
	width: 100%;
	vertical-align: bottom;
}
.video-wrap .image-box .image-pic:hover > img  {
    transform: scale(1.1);
    transition: .3s;
}
.video-wrap .image-box .image-pic a {
	display: block;
	color: #3f3229;
}
.video-wrap .thumb-inner {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 6;
	width: 100%;
	text-align: center;
    color: #fff;
}
.video-wrap .thumb-inner > img {
    display: block;
    margin: 0 auto;
	width: 128px;
}
.video-wrap .thumb-inner span {
	display: inline-block;
	color: #fff;
	font-size: 2rem;
    font-weight: bold;
    margin-top: 20px;
}
.video-wrap .image-box .image-pic:hover .thumb-inner  {
    display: none;
    transition: .3s;
}

.fb-page {
    overflow: hidden;
}

/*  尺寸設定 */
@media (max-width: 991px) {
	.video-wrap .col-sm-6 {	
		display: none;
	}
}
@media (min-width: 640px) and (max-width: 1199px) {
    .video-wrap [class*="col-"]  {
        text-align: center;
    }
}
@media (min-width: 1200px) {
    .fb-page {
        height: 354px !important;
    }
}
@media (min-width: 1360px) {
    .fb-page {
        height: 384px !important;
    }
}
@media (min-width: 1600px) {
    .fb-page {
        height: 474px !important;
    }
}

@media (min-width: 1800px) {
    .fb-page {
        height: 550px !important;
    }
}



/*========================================================
                         圖片效果
=========================================================*/

a.figure {
	display: block;
	position: relative;
	}
a.figure:hover:before {
    opacity: 0.3;
    -webkit-transform: scale(1);
    transform: scale(1);
}
a.figure:before {
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 6px;
    right: 6px;
    content: '';
    display: inline-block;
    background-color: #fff;
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    transition: .3s;
}