/*共同*/
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;
	
	/*文字漸層色*/
	background: linear-gradient(to top, #b53056, #cb748d);
    background: -webkit-linear-gradient(to top,#b53056 ,#cb748d);
	background-clip: text;
  	-webkit-background-clip: text;
  	color: transparent;
}

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;*/}

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

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

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

#sharebox_1::-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;
	position: fixed;
	top: 50%;
	right: 20px;
	z-index: 99px;
}


/*版頭*/
.main_m{display: none;}
#header{
	width: 100%;
	height: auto;
	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: #CFCFCF;
	font-size: 1.6em;
	font-weight: 400;
	letter-spacing: 1px;
	text-overflow : ellipsis;  /*同時需要搭配*/
	white-space:nowrap; /*不斷行*/
	overflow:hidden;
}

#header h3:hover{color: #FFFFFF;}


/*廣編文章區*/
.article_A,.article_B,.video_A{
	width: 100%;
	height: auto;
	margin-top: 5rem;
	display: block;
}
		
.article_gap{width: 100%; height: 3rem; clear: both;}
		
.pic_box{
	width: 65%;
	height: 28vw;
	min-height: 100%;
}
		
.text_box{
	width: 35%;
	height: 28vw;
	min-height: 100%;
	text-align: left;
	display: flex;
	align-items: center;
	vertical-align: middle;
}
		
.pic_R{float: right;}
		
.text_R,.text_L{float: left; text-align: left; color: #686868;}
		
.pic_L img,.pic_R img{width: 100%;}
		
.text_box_style{
	display: block;
	width: 80%;
	height: auto;
	margin: 1rem auto;
}
		
.text_box h3{
	color: #b53056;
	font-size: 2rem;
	font-weight: lighter;
	border-bottom: #686868 1px solid;
	line-height: 2.3rem;
}
		
.text_box h4{
	font-size: 1.2rem;
	font-weight:500;
	line-height: 1.8rem;
	margin: 0.5rem 0 ;
}
		
.text_box p{
	font-size: 0.95rem;
	color: #686868;
	line-height: 1.5rem;
}

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

.btn_more{
	border: #686868 1px solid;
	margin-top: 2rem;
	text-align: center;
	-moz-transition: all 0.5s ease-in;
	-webkit-transition: all 0.5s ease-in;
	transition: all 0.5s ease-in;
}
		
.btn_more:hover{
	border: #b53056 1px solid;
	color: #FFF;
	background: #b53056;
	-moz-transition: all 0.5s ease-in;
	-webkit-transition: all 0.5s ease-in;
	transition: all 0.5s ease-in;
}
		
.btn_more a{
	display: block;
	padding: 0.7rem 1rem;
	font-size: 1.1rem; 
	color: #686868;
}
.btn_more a:hover{color: #FFF;}

/*影片區*/
.video_box{
	width: 100%;
	/*background: #000000;*/
	text-align: center;
	/*margin-bottom: 5rem;*/
	margin: 5rem auto;
}

.video_box iframe{
	width: 100%;
	height: 30vw;
	
}

.text_video{
	width: 30%;
	height: 25vw;
	min-height: 100%;
	text-align: left;
	display: flex;
	align-items: center;
	vertical-align: middle;
	/*background: #FF0004;*/
}

/*.video_bg{
	height: 25vw;
	background: url("../images/video_bg.jpg") no-repeat center;
	background-size: cover;
}*/

.video_A .text_video h3{
	color: #FFF;
	border-bottom: #FFF 1px solid;
	text-align: center;
	margin-bottom: 1.5rem;
}

.video_A .text_video h4,.video_A .text_video p{color: #FFF;}
.pic_L,.video_L{float: left;}
.video_A .text_video .btn_more{border: #FFF 1px solid;}
.video_A .text_video .btn_more:hover{
	border: #b53056 1px solid;
	color: #FFF;
	background: #b53056;
}

.video_A .text_video .btn_more a{color: #FFF;}


達人體驗分享區
.grey_box{
	width: 100%; 
	height: auto; 
	background: #efefef; 
	padding: 2rem 0; 
	margin: 5rem auto 0 auto;
}

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

#sharebox{
	width: 100%;
	height: 31vw;
	margin: 0 auto;
	overflow-y: auto;
	margin: 0 auto;
	padding: 1rem;
}

/*#sharebox_1{
	width: 100%;
	height: 17vw;
	margin: 0 auto;
	overflow-y: auto;
	margin: 4rem auto 0 auto;
	padding: 1rem;
}*/
				
.share_pic{
	width: 20%;
	height: auto;
	padding: 1%;
	position: relative;
	float: left;
}

.share_pic ul li {overflow: hidden;}
	
.share_pic ul li img{transition: transform 1s ease; width: 100%}
	
.share_pic ul li img:hover{
	transform: scale(1.2);
	-ms-transform: scale(1.2);
	-webkit-transform: scale(1.2);
	}
	
.share_text{
	display: block;
	width: 94%;
	padding: 0 3%;
	text-align: left;
	text-align: justify;
	color: #FFF;
	font-size: 1.2rem;
	position: absolute;
	bottom: 15px;
	
	text-overflow : ellipsis;  /*同時需要搭配*/
	white-space:nowrap; /*不斷行*/
	overflow:hidden;
	}

.share_text span{ color:#686868;}
			
/*.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;}




/*==========1440寬==========*/
@media screen and (max-width:1440px){
.content{ width: 75%;}
.article_gap{height: 10rem;}
.text_box h3{font-size: 1.7rem;line-height: 2.3rem;}
.text_box h4{font-size: 1.1rem;line-height: 1.5rem;}
.video_box {height: 28vw;}
.video_box iframe{height:28vw}
.text_video{height: 28vw;}
.video_A .text_video h4{
	font-size: 1.2rem;
	line-height: 1.6rem;
	margin-bottom: 1rem;
	}
	
}



/*==========小螢幕==========*/
@media screen and (max-width:1280px){
.content{ width: 80%;}
#btn_gotop{width: 50px;}
.text_area{
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:4; /*超過n行文字消失*/
}
.article_gap{height: 8rem;}
.pic_box,.video_box{height: 30vw;}
.video_box iframe{height:30vw}
.text_video{height: 30vw;}
	
/*達人體驗分享區*/
.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{display: none;}

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



/*版頭*/
.main{display: none;}
.main_m{display: block; margin-bottom: 3rem;}
#header{margin-bottom: 0;}
#header h3{padding: 5px 2%;font-size: 1.1em;}

	
/*廣編文章與影片區*/
.article_A,.article_B,.video_A{
	margin-top: 1rem;
	display: block;
}
		
.article_gap{ height: 1.5rem; }
		
.pic_box{
	width: 100%;
	height: auto;
}
		
.text_box{
	width: 100%;
	height: auto;
}
		
.pic_R{float: none;}
		
.text_R,.text_L{float: none;}
		
		
.text_box_style{
	width: 100%;
	margin: 0rem auto;
	padding: 0.5rem 0 0 0;
}
		
.text_box h3{font-size: 2rem;}
		
.text_box h4{
	font-size: 1.2rem;
	font-weight:500;
	line-height: 1.8rem;
	margin: 0.5rem 0 ;
}
		
.text_box p{
	font-size: 0.95rem;
	color: #686868;
	line-height: 1.5rem;
}

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

.btn_more{
	margin-top: 1rem;
	text-align: center;
	-moz-transition: all 0.5s ease-in;
	-webkit-transition: all 0.5s ease-in;
	transition: all 0.5s ease-in;
}
		
.btn_more:hover{
	border: #6b8b8d 1px solid;
	color: #FFF;
	background: #6b8b8d;
	-moz-transition: all 0.5s ease-in;
	-webkit-transition: all 0.5s ease-in;
	transition: all 0.5s ease-in;
}
		
.btn_more a{
	display: block;
	padding: 0.7rem 1rem;
	font-size: 1.1rem; 
	color: #686868;
}
.btn_more a:hover{color: #FFF;}

/*影片區*/
.video_box{
	width: 100%;
	height: auto;
	margin: 0 auto;
}
	
.video_box iframe{
	width: 100%;
	height:49vw
}

.text_video{
	width: 100%;
	height: auto;
}
	
.text_video .text_box_style{margin: 1rem;}

.video_bg{
	background: url("../images/video_bg.jpg") no-repeat center;
	background-size: 100%;
}

.video_A .text_video h3{
	color: #FFF;
	border-bottom: #FFF 1px solid;
	text-align: center;
	margin-bottom: 0.5rem;
	padding-bottom: 0.5rem;
}

.video_A .text_video h4,.video_A .text_video p{color: #FFF;}
.pic_L,.video_L{float: left;}
.video_A .text_video .btn_more{border: #FFF 1px solid;}
.video_A .text_video .btn_more a{color: #FFF;}



/*達人體驗分享區*/
.grey_box{margin: 2rem auto 0 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 0 auto; padding: 1rem 0.2rem;}
#sharebox{ width: 100%; height: 70vw; padding: 5px;}
#sharebox_1{width: 100%; height: 38vw; padding: 5px;margin: 1rem auto 0 auto;}
.share_pic{ width: 50%;}
.share_text{ width: 98%; font-size: 1rem;}
	

/*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%;}
	
}