/*共同*/
body{ font-family:"Noto Sans CJK TC",Arial,sans-serif;}
.video_box span,.article span{color: #FF0004;font-weight: bold;}


/*選單*/
#topbar{
	width: 100%;
	height: auto;
}

#menu{
	width: 80%;
	margin: 10px auto;
}

#menu ul li{
	display:inline-block;
	vertical-align: middle;
	padding: 0.5vw 0;
}

.menu_left{width: 47%; text-align: left;}

.menu_left img{width: 80%; max-width: 472px;}

.menu_right{
	width: 47%;
	margin: 10px;
	text-align: right;
	float: right;
}

.menu_right ul li{
	padding-left: 0.5rem;
}

.loco_01 img,.icon_fb img{width:70%;}



/*主視覺*/
main{
	width:100%;
	height: auto;
	border-bottom: #E60012 0.6vw solid;
}

main img{width: 100%;}

#slogin{
	width: 20%;
	position: absolute;
	margin-left: 14vw;
	margin-top: 15vw;
	z-index: 1px;
}

#slogin img{width: 100%;}

#warpper{
	width: 100%;
	height: auto;
	background:url("../images/bg.jpg") no-repeat top center;
	background-size: cover;
	padding: 2vw 0 8vw 0;
}

.data_box{
	width: 60%;
	height: auto;
	border-style:solid;
	border-width:0.3vw;
	background: #FFF;
	margin: 9rem auto 1rem auto;
	
	-moz-border-image: -moz-linear-gradient(to top left, #e95295 0%, #f9d797 50%, #d6b3d3 100%);
	-webkit-border-image: -webkit-linear-gradient(to top left,  #e95295 0%, #f9d797 50%, #d6b3d3 100%);
	     -o-border-image: -o-linear-gradient(to to top left,  #e95295 0%, #f9d797 50%, #d6b3d3 100%);
	        border-image: linear-gradient(to top left,  #e95295 0%, #f9d797 50%, #d6b3d3 100%);
	  	    border-image-slice: 1;
	
	position: relative;
	
}

/*框框漸層色*/
/*.border-img{
       -moz-border-image: -moz-linear-gradient(to top left, #e95295 0%, #f9d797 50%, #d6b3d3 100%);
	-webkit-border-image: -webkit-linear-gradient(to top left,  #e95295 0%, #f9d797 50%, #d6b3d3 100%);
	     -o-border-image: -o-linear-gradient(to to top left,  #e95295 0%, #f9d797 50%, #d6b3d3 100%);
	        border-image: linear-gradient(to top left,  #e95295 0%, #f9d797 50%, #d6b3d3 100%);
	  	    border-image-slice: 1;
}*/

.title{
	background: #E60012;
	width: auto;
	z-index: 1px;
	border-bottom-right-radius :50px;
	position: absolute;/*定位扣框線粗細*/
	top: -0.3vw;
	left: -0.3vw;
}

.title h3{
	color: #FFF;
	font-size: 1.8vw;
	letter-spacing: 2px;
	padding: 0.3vw 3vw;;
}

.data{
	width: 85%;
	height: auto;
	margin: 5vw auto 3vw auto;
}


/*第一區塊-產品介紹*/
#demos .owl-carousel .item {
    height: auto;
    padding: 0px;
}

.slider_area{width: 80%;margin: 0 auto;}
.item img{max-width: 1080px;}


/*影片區塊*/
.video_box ul{width: 100%;}
.video_box ul li{
	display: inline-grid;
	margin: 2% 0.5%;
	width: 31%;
	}
			
.video_box h4{
	font-size: 1.15rem;
	line-height: 2rem;
	color: #E60012;
	border-bottom: 2px #E60012 solid;
	}
			
.video_box p{
	font-size: 1rem;
	line-height: 1.4rem;
	margin-top: 1rem;
	color: #222222;
	}



/*合作文章*/
.pic,.text{margin: 0 2%;float: left;}

.pic{
	width: 56%;
	height: auto;
}

.text{
	width: 36%;
	height: auto;
}

.text h1{
	font-size: 2.25vw;
	line-height: 2.5vw;
	margin-bottom: 1rem;
}

.text h4{
	font-size: 1.5vw;
	line-height: 2vw;
}

.text p{
	font-size: 1rem;
	line-height: 1.3rem;
	margin-bottom: 2rem;
}

.text span{color: #e30103;}

.pink_box{
	background: #fbdac7;
	padding: 0.8rem 1rem;
	border-radius: 1vw;
	text-align: right;
}

.pink_box p{
	color: #e30103;
	font-size: 1rem;
	line-height: 1.3rem;
	text-align: left;
}

.btn_more{
	background-color: #FFFFFF;
	color: #2B2B2B;
	padding: 0.3vw 1.5vw;
	border-radius: 1vw;
}

.btn_more:hover{background-color: #e30103;color: #FFFFFF;}

.instruction{
	width: 60%;
	height: auto;
	margin: 0 auto;
}
		
.instruction p{
	font-size: 0.7rem;
	width: auto;
	text-align: left;
	float: right;
}



/*Footer*/
footer{
	width: 100%;
	height: 80px;
	background:#E60012;
	clear: both;
	/*margin-top: 7rem;*/
}

#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){
.menu_left img{width: 70%;}
.loco_01 img,.icon_fb img{width:60%;}
.data_box{width: 75%;}

	
/*影片區塊*/		
.video_box h4{font-size: 1.1rem;line-height: 2rem;}		
.video_box p{font-size: 0.95rem;line-height: 1.2rem;}

/*合作文章*/
.text h1{font-size: 2.3vw;}
.text p{line-height: 1.2rem;}
.pink_box p{font-size: 0.95rem;}
.instruction{width: 75%;}


}



/*==========phone==========*/
@media screen and (max-width:768px){
/*選單*/
#menu{width: 95%;margin: 0.3rem auto;}
#menu ul{display:inline-flex;}
#menu ul li {padding: 1vw;}
.menu_left{width: 55%;}
.menu_left img{width: 100%;}
.menu_right{width: 45%;margin: 0.3rem;}
.menu_right ul li{padding-left: 0rem;}
.loco_01 img,.icon_fb img{width:70%;}


/*主視覺*/
main{border-bottom: #E60012 1.2vw solid;}
#slogin{width: 30%;margin-left: 7.5vw;margin-top: 10vw;}
#warpper{
	background:url("../images/bg.jpg") repeat-y top center;
	background-size: 100%;
	padding: 2vw 0 5vw 0;
}

.data_box{ width: 94%; border-width:0.5vw; margin: 1rem auto 2rem auto;}	
.title{border-bottom-right-radius :70px;top: -0.5vw;left: -0.5vw;}
.title h3{font-size: 1rem;letter-spacing: 0px;padding: 0.5rem 3rem 0.5rem 1rem;}
.data{width: 100%;margin: 19vw auto 3vw auto;}


/*第一區塊-產品介紹*/
.slider_area{width: 90%;}

/*影片區塊*/
.video_box ul li{display: block;margin: 1rem auto 2rem auto;width: 90%;}		
.video_box p{margin-top: 0.5rem;}

/*合作文章*/
.pic,.text{margin: 0 5%;float: none;margin: 0 auto;}
.pic{width: 90%;height: auto;/*overflow:hidden;*/}
.text{width: 90%;height: auto;}
.text h1{font-size: 1.5rem;line-height: 2rem;margin-bottom: 0.5rem;}
.text h4{font-size: 1.1rem;line-height: 2rem;}
.text p{font-size: 1rem;line-height: 1.3rem;margin-bottom: 1rem;}
.pink_box{
	
	width: 100%;
	padding: 1rem;
	border-radius: 3vw;
	margin-bottom: 1rem;
}

.btn_more{
	background-color: #FFFFFF;
	color: #2B2B2B;
	padding: 0.3rem 1rem;
	border-radius: 1rem;
}
	
.instruction{
	width: 90%;
	height: auto;
	margin: 0 auto;
}
		
.instruction p{
	font-size: 0.8rem;
	width: 100%;
	text-align: left;
	float: none;
}
	
/*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%;}
}