/*共同*/
body{ font-family:"Noto Sans CJK TC",Arial,sans-serif;}
.content{ width: 60%; height: auto; margin: 0 auto;}
h1{ font-family: "Noto Sans CJK TC",Arial,sans-serif;
	font-size: 2.5rem;
	font-weight: 700;
	display: block;
	width: 100%;
	clear: both;
	border-bottom:#464646 1px solid;
	margin-bottom: 2rem;
}

h4{font-family: "Noto Sans CJK TC",Arial,sans-serif;font-weight: 700;font-size: 1.3rem; line-height: 1.6rem;}
p{ font-family: "Noto Sans CJK TC",Arial,sans-serif;font-size: 1rem; color: #757575;}


/*====scrollbar CSS====*/
#sharebox {scrollbar-width: thin;scrollbar-color: #ADADAD; margin-left: 30px;}

/* Works on Chrome, Edge, and Safari */
#sharebox::-webkit-scrollbar {width: 5px;}

#sharebox::-webkit-scrollbar-track {/* background: #FFF;*/}

#sharebox::-webkit-scrollbar-thumb {background-color: #ADADAD;border-radius: 16px;/*border: 1px solid white;*/}





/*選單*/
#topbar{width: 100%;height: 50px;}
#topbar ul{line-height: 50px;}
#topbar ul .logo_LG ,#topbar ul .logo_01{display: inline-block; vertical-align: middle;}
#topbar ul .logo_LG img,#topbar ul .logo_01 img{width: 70%;}



/*gotop*/
#btn_gotop{
	width: 90px;
	height: 135px;
	position: fixed;
	top: 35%;
	right: 20px;
}


/*版頭*/
#header{
	width: 100%;
	height: auto;
	background: #9C7B7C;
	position: relative;
	margin-bottom: 50px;
}
		
#header img{
	width: 100%;
	height: auto;
	background-size: 100%;
}
		
#header h3{
	display: block;
	width: 100%;
	padding: 10px 2.5%;
	position: absolute;
	bottom: 0;
	background: rgba(0,0,0,0.7);
	color: #FFFFFF;
	font-size: 1.5em;
	font-weight: 400;
	letter-spacing: 1px;
	text-overflow : ellipsis;  /*同時需要搭配*/
	white-space:nowrap; /*不斷行*/
	overflow:hidden;
}


/*4大過敏原剋星*/
.product{text-align: center;margin: 2rem 0 10rem 0 ;}
.product_box{display:inline-grid;width: 22%;margin: 0 1%;}		
.product_pic{width: 100%;}		
.product_pic img{width: 90%;margin: 0 auto;}
		
.product_text{
	padding: 2.5% 3%;
	font-size: 1rem;
	line-height: 1.4rem;
	font-weight: 300;
	text-align: left;
	border-top: #6A6A6A 1px solid;
}

.product_text h4{color: #961535;margin-bottom: 20px;}

.product_text h5{
	font-weight: 700;
	font-size: 1.05rem;
	color: #333;
	margin-top: 15px;
}

.more{
	display: block;
    width: 100px;
    padding: 5px 10px;
    background: #961535;
    border-radius: 6px;
    margin-top: 1rem;
    text-align: center;
	color: #FFFFFF;
	font-size: medium;
}

.more:hover{background: #BF385A; color: #FFFFFF;}
#AD_banner{width: 40%;margin: 10rem auto;}
#AD_banner img{width: 100%;margin: 0 auto;}
#AD_banner img:hover{-webkit-filter:brightness(105%);}


/*專家達人怎麼說*/
.video_box{
	width: 100%;
	height: auto;
	padding-top: 20px;
	display: inline-block;
}
	
.video_01,.video_02{width: 48.5%;height: auto;}	
.video_01{float: left; margin-right: 3%;}	
.video_02{ float: left;}
.video_01 iframe,.video_02 iframe{width: 100%;height: 16vw;}	
.topic{width: 100%;display: inline-block;margin: 2rem auto 10rem auto;}	
.topic_01,.topic_02{width: 48.5%;height: 7vw;float: left;}
.topic_01{margin-right: 3%;}	
	
.topic_img{
	width: 34.5%;
	height: auto;
	float: left;
	border: #454545 1px solid;
	overflow: hidden;
}

.topic_img img{width: 100%; background-position: center center;}

.topic_text{
	width: 60%;
	margin-left: 2.5%;
	float: left;
	text-align: justify;
	font-size: 1rem;
	color: #555555;
	border-left: 1px solid #000;
    padding-left: 1.5%;
}
	
.topic_text h4{width: 100%;margin-bottom: 10px;color: #000000;}
.topic_text h4:hover{color:#961535;}

.topic_text, .topic_text h4{
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2; /*超過n行文字消失*/
}


/*寵物換毛區域*/
.poster{width: 100%;margin: 0 auto; text-align: center;}
.poster_m{display: none;}
.poster01,.poster02{width: 100%;/*float: left;*/}	
.poster01 img,.poster02 img{width: 100%; margin: 2rem auto 1rem auto;}		
.video_03{width: 100%;margin: 2rem auto 10rem auto;text-align: center; clear: both;}		
.video_03 iframe{width: 100%;height: 29vw;}



/*小惡魔編輯開箱*/
.editor_box{
	width: 100%;
	height: auto;
	margin-top: 2rem;
}

.editor_text h4{color: #333; margin-bottom: 10px;}
.editor_text h4:hover{color: #961535;}

.editor_text p,.editor_text h4{
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2; /*超過n行文字消失*/
}

.editor_left,.editor_right{width: 50%; float: left; padding-right: 1%; margin-bottom: 1rem;}
.editor_pic{width: 100%;/* height: 22rem; overflow: hidden;*/}
.editor_pic img{width: 100%; }
.editor_pic img:hover{-webkit-filter:brightness(110%);}
.editor_text{overflow: hidden;margin: 0.5rem auto 1rem auto; min-height: 6vw;}


/*達人體驗分享區*/
.article_text h4{color: #333; margin-bottom: 10px;}
.article_text h4:hover{color: #961535;}

.article_text p,.article_text h4{
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2; /*超過n行文字消失*/
}

.share_area_01{width: 100%;height: auto;margin-top: 2rem;}
.article_left,.article_right{width: 50%; float: left; padding-right: 1%; margin-bottom: 10rem;}
.article_pic img{width: 100%; }
.article_pic img:hover{-webkit-filter:brightness(110%);}
.article_text{overflow: hidden;margin: 0.5rem auto 1rem auto;}
/*.article_text h4{font-size: 1.4rem; line-height: 1.8rem;}*/

.share_area_02{
	width: 100%;
	height: auto;
	background: #f7f3ee;
	clear: both;
	margin-top: 2rem;
	margin-bottom: 9rem;
	padding: 3rem 2rem;
}

#sharebox{
	width: 100%;
	height: 30vw;
	margin: 0 auto;
	overflow-y: auto;
	margin: 0 auto;
	padding: 1rem;
}
				
.share_pic{
	width: 33%;
	height: auto;
	padding: 1%;
	overflow: hidden;
	position: relative;
	float: left;
}
	
.share_pic ul{transition: transform 1s ease;}
	
.share_pic ul:hover{
	transform: scale(1.2);
	-ms-transform: scale(1.2);
	-webkit-transform: scale(1.2);
	}
	
.share_text{
	display: block;
	width: 98%;
	/*background: rgba(256,0,0,0.7);*/
	padding: 10px;
	text-align: left;
	text-align: justify;
	color: #FFF;
	position: absolute;
	bottom: 5px;
	
	/*text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;*/ /*超過n行文字消失*/
	
	text-overflow : ellipsis;  /*同時需要搭配*/
	white-space:nowrap; /*不斷行*/
	overflow:hidden;
	}
			
.share_pic img{width: 100%;}


/*SP banner*/
#slider_SP_banner{width: 100% ; margin-top: 5rem;}
#slider_SP_banner img:hover{-webkit-filter:brightness(105%);}


/*Footer*/
footer{
	width: 100%;
	height: 80px;
	background:#000;
	clear: both;
}

#page_bottmo{text-align: center;}


#page_bottmo li{
	font-family: "Noto Sans CJK TC",Arial,sans-serif;
	font-size:x-small;
	letter-spacing: 1px;
	font-weight: 200;
	display: inline-block;
	vertical-align: middle;
	line-height: 80px;
	color:#FFFFFF;
}

#page_bottmo li img{width: 80%; margin: 0 auto;}




/*==========小螢幕==========*/
@media screen and (max-width:1280px){
.content{ width: 72%;}


/*4大過敏原剋星*/
.product_box{width: 40%;margin: 0 4%;}	
.product_text h5{margin-top: 10px;}


/*專家達人怎麼說*/
.video_01 iframe,.video_02 iframe{height: 22vw;}	
.topic_01,.topic_02{width: 100%; height: auto; float: left; margin-bottom: 1rem;}
.topic_01{margin-right: 0;}		
.topic_img{width: 25%;}
.topic_text h4{margin-bottom: 20px;}
#AD_banner{width: 85%;}


/*寵物換毛區域*/
.poster{width: 100%;}		
.poster01,.poster02{width: 100%;float: none;}	
.poster01 img,.poster02 img{width: 90%; margin: 2rem auto 2rem auto;}
.video_03{ margin: 2rem auto 5rem auto;}
.video_03 iframe{width: 89%;height: 35vw;}


/*小惡魔編輯開箱*/
/*#btn_Group{width: 100%;}*/


/*達人體驗分享區*/
/*.article_text h4{font-size: 1.3rem; line-height: 1.6rem;}*/
.share_pic{width: 33%;}
.share_text{width: 92.7%;padding: 2%;}

	
	
}



/*==========手機版==========*/
@media screen and (max-width:768px){
.content{ width: 92%;}
h1{ font-size: 1.8rem; margin-bottom: 2rem;}
h4{font-size: 1.3rem; line-height: 1.6rem;}
p{font-size: 1rem;}
	
/*====scrollbar CSS====*/
/*#sharebox { margin-left: 10px;}*/


/*選單*/
#topbar{width: 100%;height: 50px;}
#topbar ul{line-height: 50px;}
#topbar ul .logo_LG ,#topbar ul .logo_01{ width: 4.5rem; margin-right: 10px;}
#topbar ul .logo_LG img,#topbar ul .logo_01 img{width: 100%;}


/*gotop*/
#btn_gotop{display: none;}


/*版頭*/		
#header h3{padding: 5px 2%;font-size: 1.1em;}


/*4大過敏原剋星*/
.product{margin: 3rem 0 5rem 0 ;}
.product_box{width: 90%;}
.product_pic img{width: 70%;}		
.product_text{padding: 2%;line-height: 1.1rem;}
.product_text h5{font-weight: 700;font-size: 1.05rem;margin-top: 15px;}
.more{float: right;margin-bottom: 2rem;}
#AD_banner{width: 40%;margin: 10rem auto;}
	

/*專家達人怎麼說*/
.video_box{width: 100%;}	
.video_01,.video_02{width: 100%;}	
.video_01{ margin-right: 3%;}
.video_01 iframe,.video_02 iframe{ height: 50vw; margin-bottom: 10px;}	
.topic{ margin: 2rem auto 5rem auto;}
.topic_01,.topic_02{width: 100%; }
.topic_img{width: 36%;}
.topic_text h4{margin-bottom: 20px;}	
.topic_img{width: 100%;border: #454545 0px solid;}
.topic_text{width: 100%;margin-left: 0%; margin-top: 10px;}
.topic_text h4{ margin-bottom: 10px;}
	

/*寵物換毛區域*/	
.poster{display: none;}
.poster_m{
		display: block;
	}
.poster01_m,.poster02_m{width: 100%;}	
.poster01_m img,.poster02_m img{width: 100%; margin: 2rem auto 0rem auto;}			
.video_03 iframe{ width: 100%; height: 50vw;}



/*小惡魔編輯開箱*/
/*.explore p{ padding: 10px 25px;}
#btn_Group{ width: 100%; margin: 3rem auto 5rem auto;}
.LG_btn{ width: 40%; margin: 3px;}*/
	
.editor_left,.editor_right{ width: 100%; float: none; padding-right: 0; margin: 0 auto 3rem auto;}
.editor{ margin-top: 2rem;}
.editor_pic{height: auto;}
.editor_text{ min-height: auto;}



/*達人體驗分享區*/
.article_left,.article_right{ width: 100%; float: none; padding-right: 0; margin: 0 auto 3rem auto;}
.share_area_01{ margin-top: 2rem;}
.share_area_02{ width: 100%; margin: 2rem auto; padding: 1rem 0.2rem;}
#sharebox{ width: 100%; height: 70vw; padding: 5px;}				
.share_pic{ width: 33%;}
.share_text{ width: 98%; font-size: small;}
	

/*SP banner*/
#slider_SP_banner{ margin-top: 5rem;}


/*Footer*/
footer{height:auto; padding: 10px 0;}
#page_bottmo{text-align: center;}
#page_bottmo li{font-size:xx-small;letter-spacing: 1px;line-height:normal; padding: 10px;}
#page_bottmo li img{width: 80%;}
	
}