@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:300);
@import url(https://fonts.googleapis.com/css?family=Quicksand);
body{font-family:Verdana,"微軟正黑體";}
.clean{clear:both;}

.wrapper{width:100%; padding-top:90px;}
.container{width:1200px; padding-top:90px; margin:0 auto;}
.bg404{background:url(../images/404.jpg) no-repeat; background-size:100%;}
.wrong_404{font-size:20px; color:#464646; line-height:56px; padding:330px 0 40px 200px;}
.wrong_404 ul{width:520px; display:inline-block;}
.wrong_404 ul li{display:inline;}
.wrong_404 a{color:#464646;}
.wrong_404 a:hover{color:#84A500;}
a.back2h{width:125px; padding:15px; color:#fff; text-align:center; display:block; margin:0 auto 150px; border-radius:25px; background:#84a500;}
a.back2h:hover{position:relative; top:1px; left:1px;}

#header{width:100%; height:90px; position:fixed; background:#fff; z-index:9999999999999999999999999999;} 
.logo{width:218px; height:90px; float:left; margin-right:15px;} 
.logo img{width:100%;}

.menu{font-size:18px; position:relative; top:40px; float:left;}
.menu li{border:2px solid #84a500; padding:2px 12px; border-radius:35px; display:inline-block; margin:0 2px; box-sizing:border-box; vertical-align: middle;  -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; overflow: hidden; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-property: color, background; transition-property: color, background; background-position:0 60%; background:#fff;}
.menu li a{color:#84a500;}
.menu li:hover a{color:#fff;}
.menu li:hover{padding-left:39px; background-image:url(../images/menu_icon.png); background-position:12px 60%; background-repeat:no-repeat; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; background-color:#84a500;}

.topnav{float:right; margin:20px 15px 0 0; text-align:right; font-size:12px;}
.topnav dt ul li{display:inline-block; width:35px;}
.topnav dt ul li a:hover{position:relative; top:1px; left:1px;}
.topnav dt ul li img{width:100%;}
.topnav dd{color:#adadad; width:400px; height:20px; overflow:hidden;}


.mainnav{color:#aeaeae; font-size:12px; margin:1% 0 2% 0;}
.mainnav li{display:inline; padding:0 12px 0 0; background:url(../images/other/gnav_icon.png) no-repeat right;}
.mainnav li:last-child{background:none;}
.mainnav li a{color:#aeaeae;}
.mainnav li a:hover{color:#876A00;}




#footer{width:100%; padding-top:1.5%; padding-left:5%; padding-right:5%; color:#e0d8ce; font-size:14px; background:#918a7f; box-sizing:border-box;}
#footer dl{width:50%; float:left;}
#footer dl dt{color:#fff; width:40%; font-size:22px; border-bottom:2px solid #fff; margin-bottom:15px;}
#footer dl dd{line-height:28px; font-size:14px; padding:0 0 0 10px; background:url(../images/ft_icon.png) no-repeat 0 12px; box-sizing:border-box;}
#footer a{color:#e0d8ce;}
#footer a:hover{color:#fff;}
#footer .copyright{width:100%; padding:15px 0 0 0; border-top:1px solid #a59f95;}
#footer .copyright dt{border-bottom:none; width:80%; font-size:12px; color:#e0d8ce; float:left;}
#footer .copyright dd{width:20%; float:right; text-align:right; font-size:12px; line-height:normal; background:none;}
#footer ul{width:100%; text-align:center; margin:30px 0 5px 0;}
#footer ul li{display:inline-block; height:18px; padding:0 7px 0 2px; border-right:1px solid #aca498;}
#footer ul li a{ color:#aca498;}
#footer ul li:last-child{border:0;}





/*--------------------------*\
    Responsive menu
\*--------------------------*/ 
.nav { position:absolute;  display:inline-block;  font-size:14px; text-align:center; font-weight:900; display:none;}
.nav-list {}
/*.nav-active li:nth-child(7n+1){display:none;}*/
.nav-item { float:left;  *display:inline;  zoom:1;}
.nav-item a {  display:block;  padding:15px 20px;  color:#FFF;  background:#84A500;}
.nav-item:first-child a {  border-radius:5px 0 0 5px;}
.nav-item:last-child a {  border-radius:0 5px 5px 0;}
.nav-item a:hover {  background:#adcd2c; color:#56690c;}
/* Mobile Navigation */
.nav-mobile {  display:none; /* Hide from browsers that don't support media queries */  cursor:pointer;  position:absolute;  top:0;  right:0;  background:#84A500 url(../images/nav.svg) no-repeat center center;  height:35px;  width:35px;  border-radius:5px;  -webkit-border-radius:5px;  -moz-border-radius:5px;}

/*@media screen and (max-width: 500px) {
.topnav{display:none;} .nav-active li:nth-child(7n+1){display:block;}
}*/


/*back to top*/
.cd-top {display: inline-block;height: 40px;width: 40px; z-index:999; position: fixed;bottom:140px;right: 10px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);/* image replacement properties */overflow: hidden;text-indent: 100%;white-space: nowrap;background:rgb(132, 165, 0) url(../images/cd-top-arrow.svg) no-repeat center 50%;visibility: hidden;opacity: 0;-webkit-transition: opacity .3s 0s, visibility 0s .3s;-moz-transition: opacity .3s 0s, visibility 0s .3s;transition: opacity .3s 0s, visibility 0s .3s;}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {-webkit-transition: opacity .3s 0s, visibility 0s 0s;-moz-transition: opacity .3s 0s, visibility 0s 0s;transition: opacity .3s 0s, visibility 0s 0s;}
.cd-top.cd-is-visible {/* the button becomes visible */visibility: visible;opacity: 1;}
.cd-top.cd-fade-out {/* if the user keeps scrolling down, the button is out of focus and becomes less visible */opacity: .5;}
.no-touch .cd-top:hover {background-color: #e86256;opacity: 1;}




@media screen and (max-width: 1440px) {
.menu li{margin-right:2px;}
.logo{margin-right:3%;}
.topnav dt{float:right;}
.topnav dd{float:right; margin:2px 5px 0 0;}
.topnav{margin:0 15px 0 0; position:relative; top:-20px;}
.topnav dt ul li{width:25px;}
}
@media screen and (max-width: 1216px) {
.container{width:100%; padding:90px 2px 0; box-sizing:border-box;}
.wrong_404{padding:33vw 0 15vw 17%;}
}
@media screen and (max-width: 1200px) {
.menu{top:40px; font-size:16px;}
.topnav{margin:0 15px 0 0; position:relative; top:-20px;}
.menu li{margin:0 2px;}
.menu li{background-position:0 61%; background-size:15%;}
.menu li:hover{padding-left:25px; background-position:8px 61%; background-size:15%;}
.ft_bannerbox .next,
.ft_bannerbox .prev {background-size:75%;}
}

@media screen and (max-width: 1024px) {
.ft_banner{width:100%;}
}

@media screen and (max-width: 980px) {
.wrong_404{text-align:center; padding:25vw 0 8vw;}
.nav-mobile { display:block;}
.nav {display:block; width:30%; padding:40px 0 0; top:30px; right:12px;}
.nav-list { display:none; position:absolute; right:0;}
.nav-item { width:100%;}
.nav-item a { background:#84A500;  padding:10px; border-bottom:1px solid #759200;}
.nav-item:nth-child(n+9){display:none;}
.nav-item:first-child a { border-radius:5px 0 0;}
.nav-item:last-child a { border-radius:0 0 5px 5px;}
.nav-active { display:block;}
.nav-mobile-open { height:40px; border-radius:5px 5px 0 0; -webkit-border-radius:5px 5px 0 0; -moz-border-radius:5px 5px 0 0;}
.menu{display:none;}
.topnav{top:30px; right:43px; z-index:999;}
.topnav dt{float:none;}
.topnav dd{margin:-5px 0 0 0;}

#footer dl dt{font-size:18px; width:60%; margin-bottom:5px;}
.ft_bannerbox .next{right:-3px; top:18px;}
.ft_bannerbox .prev{top:18px;}
.ft_bannerbox .next,
.ft_bannerbox .prev {background-size:65%;}
}

@media screen and (max-width: 680px) {
.wrapper{padding-top:80px;}
.container{padding-top:80px;}
#header{height:80px;}
.nav{top:20px;}
.topnav dd{display:none;} .topnav{top:25px; right:40px;} .topnav dt ul li{width:30px;}
.logo{width:180px; height:auto;}
.wrong_404{font-size:16px; line-height:36px; padding:22vw 0 2vw;}
a.back2h{margin:0 auto 10vw;}
.wrong_404 ul{width:410px;}
}


@media screen and (max-width: 640px) {
.topnav{/*right:40px;*/ display:none;}
.nav{width:97%;}
.nav-item { width:50%; float:left;}
/*.nav-item:nth-child(7) a{padding:13px 10px 14px 10px;}*/
.nav-item:nth-child(n+9){display:block; font-size:13px;}
.nav-item:nth-child(odd) a{ border-right:1px solid #759200;}
/*.nav-item:last-child{width:100%;}*/
.nav-item img{vertical-align:middle; margin-right:5px; width:28px; height:auto;}
#footer .copyright dd{width:100%; text-align:center;}
#footer .copyright dt{width:100%; text-align:center;}
#footer dl{width:100%; margin-bottom:10px;}
#footer dl dt{width:100%;}
.ft_banner{width:25%; height:auto; margin:0 auto;}
.wrong_404{text-align:left; padding:22vw 3% 2vw;}

}

@media screen and (max-width: 460px) {
.nav{width:92%;}
.ft_banner{width:50%; height:auto; margin:0 auto;}
a.back2h{width:90px; padding:10px;}
.wrong_404 ul{width:auto;}
/*.wrong_404 ul li{display:block; width:200px;}*/
}