@charset "utf-8";
/* html
------------------*/
body {
	font-family: "Helvetica Neue",Helvetica,Arial,"微軟正黑體",Microsoft JhengHei,sans-serif;
	background:  #efefef url(imgs/menu/menu.jpg) no-repeat;
	background-size: cover;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 53px 0 0;
	/*overflow-x: hidden;*/
}
a { text-decoration: none;}


.menuF { width: 1764px; margin: 25px auto 80px;}
.slogan,
.goIndex {
	vertical-align: bottom;
	display: inline-block;
	width: 50%;
	margin-left: -4px;
	box-sizing: border-box;	
}
.slogan { text-align: left; padding: 0 0 11px;}
.goIndex { text-align: right; padding-right: 7px;}

.menuF ul { margin: 25px 0 0;}
.menuF li, .menuF li a { line-height: 185px; height: 185px;}
.menuF li { 
	list-style-type: none;
	width: 33%;
	float: left;
}
.menuF li a { 
	color: #ffe253; 
	font-size: 18px;
	font-weight: bold;
	letter-spacing: 15px;
	text-align: center;
	width: 100%;	
	display: block;
}

.menuF li:nth-child(1) { background: url(imgs/menu/li1.jpg);}
.menuF li:nth-child(2) { background: url(imgs/menu/li2.jpg);}
.menuF li:nth-child(3) { background: url(imgs/menu/li3.jpg);}
.menuF li:nth-child(4) { background: url(imgs/menu/li4.jpg);}
.menuF li:nth-child(5) { background: url(imgs/menu/li5.jpg);}
.menuF li:nth-child(6) { background: url(imgs/menu/li6.jpg);}
.menuF li:nth-child(7) { background: url(imgs/menu/li7.jpg);}
.menuF li:nth-child(8) { background: url(imgs/menu/li8.jpg);}
.menuF li:nth-child(9) { background: url(imgs/menu/li9.jpg);}


.menuF li a:hover { font-size:0; overflow:hidden;}
.menuF li:nth-child(1) a:hover { background: url(imgs/menu/li1_hover.jpg);}
.menuF li:nth-child(2) a:hover { background: url(imgs/menu/li2_hover.jpg);}
.menuF li:nth-child(3) a:hover { background: url(imgs/menu/li3_hover.jpg);}
.menuF li:nth-child(4) a:hover { background: url(imgs/menu/li4_hover.jpg);}
.menuF li:nth-child(5) a:hover { background: url(imgs/menu/li5_hover.jpg);}
.menuF li:nth-child(6) a:hover { background: url(imgs/menu/li6_hover.jpg);}
.menuF li:nth-child(7) a:hover { background: url(imgs/menu/li7_hover.jpg);}
.menuF li:nth-child(8) a:hover { background: url(imgs/menu/li8_hover.jpg);}
.menuF li:nth-child(9) a:hover { background: url(imgs/menu/li9_hover.jpg);}

.menuF li:nth-child(1), .menuF li:nth-child(2), .menuF li:nth-child(3),
.menuF li:nth-child(4), .menuF li:nth-child(5), .menuF li:nth-child(6),
.menuF li:nth-child(7), .menuF li:nth-child(8), .menuF li:nth-child(9),
.menuF li:nth-child(1) a:hover, .menuF li:nth-child(2) a:hover, .menuF li:nth-child(3) a:hover,
.menuF li:nth-child(4) a:hover, .menuF li:nth-child(5) a:hover, .menuF li:nth-child(6) a:hover,
.menuF li:nth-child(7) a:hover, .menuF li:nth-child(8) a:hover, .menuF li:nth-child(9) a:hover { 
	background-repeat: no-repeat;
	background-size: cover;
}

@media only screen and (min-width: 769px) and (max-width: 1764px) {
	.menuF { width: 90%; margin: 25px auto 80px;}
	.menuF ul { margin: 15px 0 0;}
	.menuF li, .menuF li a { line-height: 135px; height: 135px;}
	.menuF li a { letter-spacing: 5px;}
}

@media screen and (max-width: 768px) {
	.menuF { width: 85%; margin: 25px auto 50px;}
	.menuF ul { margin: 10px 0 0;}
	.menuF li, .menuF li a { line-height: 110px; height: 110px;}
	.menuF li { width: 100%; float: left; margin-bottom: 1px;}
	.menuF li a { letter-spacing: 3px;}
	.slogan img { width: 75%;}
	.goIndex img { width: 40%;}
}