@charset "utf-8";
/* CSS Document */
/* @import url(https://fonts.googleapis.com/earlyaccess/cwTeXFangSong.css); */
@import url("jquery.mmenu.all.css");
@import url("mmenu.css");
@import url("swiper.min.css");
@font-face {
    font-family: 'Noto Serif CJK SC';
    src: url('../font/NotoSerifCJKtc-Bold.otf');

	format('woff');
}
body {font-family:  'Noto Serif', 'Noto Serif CJK SC', 'Noto Serif CJK', 'Source Han Serif SC', ‘Source Han Serif’, source-han-serif-sc, serif;color:#000; background:url(../images/bg.jpg) repeat; font-size:1.125rem; line-height: 1.2;  margin:0; padding:0;}
a { text-decoration:none; color:#000; cursor:pointer; transition:all 0.3s; }
a.current, a:hover{color: #ee7b1c;}
div, p, span, ul, ol, li, h1, h2, h3, h4, h5, h6, input, table, td, th, img {margin: 0;padding: 0;border: none;}
img {border: none;display:block;}
ul, li {list-style: none;}

h1{ position: absolute; top:0px; left:50%; width: 156px; height: 140px; margin: 0 -88px;  background:url(../images/logo.png) no-repeat; background-size: cover;  z-index: 9; }
h1 a{ width: 156px; height: 140px; display: block;}
h2{}
h3{}
h4{}
h5{}
h6{}
p{}



.pagesize{ position: relative;}
/*header*/
header{ position: relative; width: 100%; height: 304px; display: flex; text-align: center; background:url(../images/hd_bg.png) center 80px no-repeat; }
nav{ width:100%; display: flex; justify-content: center;}
nav ul{width:100%; display: flex; justify-content: center; align-items: baseline; font-size: 1.313rem; padding: 155px 0 0; }
nav ul li{ padding: 0 18px;}
nav ul li a{ width: auto; height: 150px; display: block; padding: 120px 0 0; box-sizing: border-box;}
nav ul li:nth-child(1) a{background:url(../images/nav01.png) center top no-repeat;}
nav ul li:nth-child(1) a:hover, nav ul li:nth-child(1) a.on{background:url(../images/nav01.gif) center top no-repeat;}
nav ul li:nth-child(2) a{ width:107px; background:url(../images/nav02.png) center top no-repeat;}
nav ul li:nth-child(2) a:hover, nav ul li:nth-child(2) a.on{background:url(../images/nav02.gif) center top no-repeat;}
nav ul li:nth-child(3) a{ width:107px;background:url(../images/nav03.png) center top no-repeat;}
nav ul li:nth-child(3) a:hover, nav ul li:nth-child(3) a.on{background:url(../images/nav03.gif) center top no-repeat;}
nav ul li:nth-child(4) a{background:url(../images/nav04.png) center top no-repeat;}
nav ul li:nth-child(4) a:hover, nav ul li:nth-child(4) a.on{background:url(../images/nav04.gif) center top no-repeat;}
nav ul li:nth-child(5) a{ width:90px;background:url(../images/nav05.png) center top no-repeat;}
nav ul li:nth-child(5) a:hover, nav ul li:nth-child(5) a.on{background:url(../images/nav05.gif) center top no-repeat;}
nav ul li:nth-child(6) a{ width:113px;background:url(../images/nav06.png) center top no-repeat;}
nav ul li:nth-child(6) a:hover, nav ul li:nth-child(6) a.on{background:url(../images/nav06.gif) center top no-repeat;}
nav ul li:nth-child(7) a{ width:100px;background:url(../images/nav07.png) center top no-repeat;}
nav ul li:nth-child(7) a:hover, nav ul li:nth-child(7) a.on{background:url(../images/nav07.gif) center top no-repeat;}
nav#menu{ width:100%; height:auto; display: block; top:70px; }
nav#menu ul{width:100%; height:auto; display: block;  font-size: 1.375rem; padding: 0;  }
nav#menu ul li{ padding: 0;}
nav#menu ul li a{ width: 200px; height: 100px; line-height: 100px; display: block; padding:15px 0 0 80px; margin: 0 auto; text-align: center; box-sizing: border-box;}
nav#menu ul li:nth-child(1) a, nav#menu ul li:nth-child(1) a:hover{ background:url(../images/nav01.png) 15px center no-repeat; background-size:44px auto;}
nav#menu ul li:nth-child(2) a, nav#menu ul li:nth-child(2) a:hover{ background:url(../images/nav02.png) 0px center no-repeat; background-size:77px auto;}
nav#menu ul li:nth-child(3) a, nav#menu ul li:nth-child(3) a:hover{ background:url(../images/nav03.png) 5px center no-repeat; background-size:63px auto;}
nav#menu ul li:nth-child(4) a, nav#menu ul li:nth-child(4) a:hover{ background:url(../images/nav04.png) 10px center no-repeat; background-size:65px auto;}
nav#menu ul li:nth-child(5) a, nav#menu ul li:nth-child(5) a:hover{ background:url(../images/nav05.png) 10px center no-repeat; background-size:64px auto;}
nav#menu ul li:nth-child(6) a, nav#menu ul li:nth-child(6) a:hover{ background:url(../images/nav06.png) 0px center no-repeat; background-size:80px auto;}
nav#menu ul li:nth-child(7) a, nav#menu ul li:nth-child(7) a:hover{ background:url(../images/nav07.png) 10px center no-repeat; background-size:70px auto;}
nav ul li a.on, nav#menu ul li a.on{color: #ee7b1c;}
.icon_menu{ position: absolute; top:35px; left: 20px; width: 40px; height: 35px; display: none; background:url(../images/menu_open.png) no-repeat; background-size: cover;}
.mm-wrapper_opening .icon_menu{ background:url(../images/menu_close.png) no-repeat;background-size: cover;}
.mm-wrapper_opening h1{ display: none;}
.mm-wrapper_opening header{ background:none; background-color: #ffcb67; }
/*searchBox*/
.searchBox{ position:fixed; top: 100px; right: 0; z-index: 999;}
.searchBox a.btn{position: absolute; top:10px; right: 0; width: 90px; height: 220px; font-size: 1.313rem; font-weight: bolder;  -webkit-writing-mode: vertical-lr; writing-mode: vertical-lr ;background:url(../images/search_btn.png) no-repeat; box-sizing: border-box; padding:110px 35px 0; }
.searchBox a.btn:hover{color: #111111;}
.searchBox .zone{width:402px; height: 302px; display: block;background:url(../images/search_bg.png) no-repeat; box-sizing: border-box; padding:40px 0 0 40px;}
.searchBox a.send{ color:#fff; width: 171px; height: 53px; line-height: 53px; text-align: center; display: block; font-size: 1.313rem; font-weight: bolder;background:url(../images/send_btn.png) no-repeat; margin: 0 0 0 45px;}
.searchBox a.send:hover{ color:#000;}
/*select*/
.sBox {  position: relative; width: 250px; height: 36px; margin: 0 0 20px; font-size: 0.875rem; }
.sBox select { display: none;}
.select-selected {border-radius: 10px;  background-color: #ae651a;}
.select-selected:after {  position: absolute;  content: "";  top: 14px;  right: 10px;  width: 0;  height: 0;  border: 6px solid transparent;  border-color: #fff transparent transparent transparent;}
.select-selected.select-arrow-active:after {  border-color: transparent transparent #fff transparent;  top: 7px;}
.select-items div,.select-selected {  color: #ffffff;  padding: 12px 16px; border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;  cursor: pointer;}
.select-selected{ padding: 8px 16px;}
.select-items { font-size: 0.875rem;  position: absolute;  background-color: #814400;  top: 100%;  left: 0;  right: 0;  z-index: 99;}
.select-hide {  display: none;}
.select-items div:hover, .same-as-selected {  background-color: rgba(0, 0, 0, 0.1);}
/*goTop*/
.goTop{ position:absolute; width: 104px; height: 162px; display: block;   z-index: 999;left:auto !important;right: 83px !important;}
.goTop a{  width: 104px; height: 162px; display: block;background:url(../images/top.png) no-repeat;}
/*btnSet*/
.btnSet{ display: flex; justify-content: center; align-items: center;}
.btnSet a{font-size:1.125rem; width:170px; height: 53px; display: block; text-align: center; color:#fff;background:url(../images/btn.png) no-repeat; background-size:170px 53px; margin: 0 5px; line-height: 53px; }
.btnSet a.fb{width:198px; height:50px; display: block;  background: url(../images/fb.png) no-repeat; margin: 0 auto ;}
/*footer*/
footer{position: relative; width: 100%; height:154px; display: flex; text-align: left; background:url(../images/footer.png) center bottom no-repeat; font-size: 0.750rem; font-family:  Arial, Helvetica, "微軟正黑體";}
footer .in{ width: 768px; height:154px; display: flex; justify-content: space-between; align-items: center; margin: 0 auto; padding:50px  0 0; box-sizing: border-box;}
footer .in .logo a{ width: 77px; height:50px; display: block;background:url(../images/logo_ft.png) no-repeat; background-size: cover; margin: 0 20px 0 0;}
footer .in ul{  display: flex; align-items: center; margin: 0 0 5px;font-size: 0.875rem; font-weight: bold; line-height: 1;}
footer .in ul li a{ color:#6b2b00;}
footer .in ul li:nth-child(1){ padding:0 10px 0 18px;background:url(../images/ico_fb.png) 0 0 no-repeat; background-size:15px 15px; border-right:1px solid #6b2b00; }
footer .in ul li:nth-child(2){padding:0 10px 0 30px; background:url(../images/ico_mail.png) 10px -2px no-repeat; background-size:15px 15px; }
footer .in p{ line-height: 1.2;}
@media screen and (max-width:1279px){
	/*header*/
	header{height: 200px;}
	header ul{width:100%; display: none;}
	.icon_menu{display:block;}
	/*searchBox*/
	.searchBox{ top:100px;  font-size: 0.813rem;}
	.searchBox a.btn{ top:10px; right: 0; width: 66px; height: 161px; font-size:1rem;background-size:cover; padding:70px 25px 0; }
	.searchBox .zone{width:320px; height:240px;background-size:cover;  padding:25px 0 0 20px;}
	.searchBox a.send{  width: 156px; height: 48px; line-height: 48px;background-size:cover; font-size: 1rem; margin: 0 0 0 50px;}
	.searchBox a.send:hover{ color:#fff;}
	/*select*/
	.sBox { width: 230px; height: 36px; margin: 0 0 10px; letter-spacing: 0; }
	.select-selected:after { right: 8px; }
	.select-items div,.select-selected {  color: #ffffff;  padding: 8px 10px;}
	.select-selected{ padding: 8px 10px;}
	.select-items { font-size: 0.875rem; }
	/*goTop*/
	.goTop{  width:70px; height: 110px; }
	.goTop a{width:70px; height: 110px; ;background:url(../images/top.png) no-repeat; background-size:cover;}

	/*footer*/
	footer{ width: 100%; height:220px; display: flex; text-align: center; background-size: auto 220px; }
	footer .in{width:100%; height:220px;display: block; justify-content: center; align-items: center; margin: 0 auto; flex-wrap: wrap;padding:70px 70px 0; }
	footer .in .logo{width:100%; margin: 0 auto 10px; }
	footer .in .logo a{ width: 77px; height:50px; display: block;background:url(../images/logo_ft.png) no-repeat; background-size: cover; margin: 0 auto;}
	footer .in ul{  width: 100%;  justify-content: center;font-size: 1rem;}
	footer .in p{ width:100%; padding: 0; box-sizing: border-box; margin: 0 0 5px;}
}
@media screen and (max-width: 767px){
	/*header*/
	.icon_menu{ top:20px; left: 20px; }
	nav#menu ul li a{height: 80px; line-height: 80px; display: block; padding:15px 0 0 80px; margin: 0 auto; text-align: center; box-sizing: border-box;}
	/*searchBox*/
	.searchBox{ top:100px; }
	.searchBox a.btn{ top:10px; right: 0; width: 50px; height: 124px; font-size:0.875rem;background-size:cover; padding:55px 20px 0; }
	.searchBox .zone{width:320px; height:240px;background-size:cover;  padding:30px 0 0 30px;}
	.searchBox a.send{  width: 156px; height: 48px; line-height: 48px;background-size:cover; font-size: 1rem; margin: 0 0 0 45px;}
	.searchBox a.send:hover{ color:#fff;}
	/*select*/
	.sBox { width: 230px; height: 36px; margin: 0 0 10px; }
	.select-items div,.select-selected {  color: #ffffff;  padding: 8px 16px;}
	.select-selected{ padding: 8px 16px;}
	.select-items { font-size: 0.875rem; }
	/*goTop*/
	.goTop{  width:50px; height: 78px; right: 20px !important;}
	.goTop a{width:50px; height: 78px; }
	/*footer*/
	footer{  height:280px;background:url(../images/footer_m.png) center bottom no-repeat;  background-size: auto 280px; }
	footer .in{ height:280px; padding:53px 30px 0; }
	footer .in .logo{ margin: 0 auto 10px; }
	footer .in ul{ margin: 0 0 8px;}
	footer .in ul li:nth-child(1){ padding:0 10px 0 23px;background:url(../images/ico_fb.png) 0 -3px no-repeat; background-size:20px 20px; }
	footer .in ul li:nth-child(2){padding:0 10px 0 35px; background:url(../images/ico_mail.png) 10px -3px no-repeat; background-size:20px 20px; }
	footer .in p{ line-height: 1.3;}
}