@charset "utf-8";
/* CSS Document */

html {
    font-family: "微軟正黑體";
    background: #ffffff;
    color: #000;
	font-size:20px;
	line-height: 2em;
}

.slicknav_menu{
	display: none;
}

#menu{
width:100%;
background:url(../images/logo.png)#000 no-repeat;
background-position:15% 0%;　
padding:0 5%;
height: 90px;
position: fixed;
z-index: 99;
}

#menu div{
width:1000px;
position: relative;
left:25%;
}
#menu li{
float: left;
position: relative;
margin: 0 50px;
top:25px;
}
#menu li a{
color:#fff;
transition: transform 0.25s;
}
#menu li a:hover{
color:#FFF84D;
transition: transform 0.25s;
}
header{
position: relative;	
top:90px;
width:100%;
background: url(../images/header_bg.jpg)top center no-repeat;
background-size: 100%;
}
header div{
width:50%;
position: relative;
top:50px;
left:5%;
}

.slogan_1{
position: relative;
left:5%;
width:80%;
max-width:486px;
}
.slogan_2{
width:100%;
max-width:750px;
}
.slogan_3{
position: relative;
width:30%;
max-width:189px;
padding-bottom: 30%;
left:4%;		
}
.name{
position:absolute;
width: 10%;
max-width: 219px;
right:3%;
top:70%;
}

.movie_1{
background: url(../images/movie_bg.jpg)top center no-repeat;
background-size: 100%;
width:100%;
}

.movie_2{
background: url(../images/movie_2_bg.jpg)top center no-repeat;
background-size: 100%;
width:100%;
}

.movie_in{
width:80%;
margin: 0 auto;
}

.movie_slogan{
	position: relative;
	padding-top:40%;
	float: left;
display: inline-block;
	width:50%;	
}

.movie img{
width:100%;
display: inline-block;
margin: 2%;
}

.movie{
	float: left;
	width:45%;
	position: relative;
	margin-top: 10%;
	padding-bottom: 5%;
}
.movie:hover{
}

.movie a{
-webkit-filter:brightness(.7);
transition: all 0.3s ease-in-out;
}
.movie a:hover{
-webkit-filter:brightness(1);
transition: all 0.3s ease-in-out;
}
	
}

.cook{
background: #e9e4de;
}

.cook_in{
	position: relative;
	width:85%;
	left:15%;
	padding:5% 0;
}
.cook_in_pic{
display: inline-block;
width:28% !important;
	float: left;
}
.cook li img{	
width:100%;
height: auto;
}
.cook_in ul{
	float: left;
	width:72%;
	margin-bottom: 2%;
}

.cook_in li{
	width:33%;
	float: left;
	margin:0 1px;
transition: all 0.3s ease-in-out;
}

.cook_in li:hover{
    -ms-transform: scale(1.05); /* IE 9 */
    -webkit-transform: scale(1.05); /* Safari */
    transform: scale(1.05);
transition: all 0.3s ease-in-out;
}


.cook_slogan{
display: inline-block;
width:70%;
	float: left;
margin-right: 3%;
}

.btn_more{
display: inline-block;
width:20%;
margin-right: 3%;
	float: left;
}

.product{
background: url(../images/product_bg.jpg)bottom center no-repeat;	
background-size: 100%;
padding: 5% 0;
}

.pro_movie{
width:90%;
max-width: 1200px;
display:block;
position: relative;
margin: 0 auto;	
-webkit-filter:brightness(.7);
transition: all 0.3s ease-in-out;
}

.pro_movie:hover{
-webkit-filter:brightness(1);
transition: all 0.3s ease-in-out;
}

.pro_title{
width:90%;
position: relative;
margin:0 auto 2%;
text-align: center;
	
}

.pro_title_in{
margin-right: 2%;
}
.product ul{
width:70%;
margin: 0 auto;
}
.product li{
position: relative;
width: 19%;
margin:0 0.5%;
float: left;
display: inline-block;
	transition: all 0.3s ease-in-out;


}

.product li:hover{
position: relative;
top:-5px;
transition: all 0.3s ease-in-out;
-webkit-filter:drop-shadow(5px 5px 5px #333);
}

.product li img{
width:100%;
	
}

.mij{
position:absolute;
right:5%;
margin-top:-20%;
display: inline-block;
}

.product p{
display: block;
width:90%;
margin:2% auto 0;
font-size: 18px;
line-height: 2em;
}

footer{
background: #000;
color:white;
width:90%;	
padding:2% 5%;
line-height: 2em;
text-align: center;
}

.logo{
width:200px;
height: 100px;
position:fixed;
top:0;
left: 15%;
z-index: 999;
}