@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Lato:300,900,400);
/*============reset===============*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, select, p, blockquote, th, td, iframe, figure, figcaption { margin: 0; padding: 0; font-size: 100%; font-family: "微軟正黑體"; }
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video { display: block; }
table, table td { border-collapse: collapse; border-spacing: 0; border: none; }
fieldset, img { border: 0; vertical-align: bottom; }
address, caption, cite, code, dfn, em, strong, th, var, optgroup { font-style: inherit; font-weight: inherit; }
a, del, ins { text-decoration: none; }
ol, li { list-style: none; }
caption, th { text-align: left; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
abbr, acronym { border: 0; font-variant: normal; }
sup, sub { vertical-align: baseline; }
input, button, textarea, select, optgroup, option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; outline: 0; border: 0; }
/*============animate===============*/
#header, #nav a, #header #logo span,.top-button a, .img-size img, .img-size div,.footer-content a,.topnav li { -webkit-transition: all 200ms ease-in; -o-transition: all 200ms ease-in; -moz-transition: all 200ms ease-in; transition: all 200ms ease-in; }
/*============base===============*/
body, html { height: 100%; }
/*#container { width: 100%; height: 100%; }*/
#wrapper { width: 100%; min-height: 100%; }
#main {
+min-height: 100%; position: relative; padding-bottom: 100px; width: 100%; /*min-width:700px;*/}
#content { position: relative; margin: 0 auto; max-width: 1280px; }
#bg-img { width: 100%; height: 100%; display: block; position: fixed; top: 0; left: 0; z-index: 0; background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
#header {width: 100%; position:fixed; top:0; z-index:30;}
.hidden { opacity: 0; }
.visible { opacity: 1; }

/*============style===============*/
body { color: #000; background:url(../images/web-bg.jpg);}
.clear { clear: both; }
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }
p, p a {line-height:1.8em; color: #000; animation-delay: 1s; display:block;}
p strong { font-weight: bold; color: #FFF; }
a { color: #fff; }
a:visited { color: #dadada; }
a:hover { color: #ea6b26; text-decoration: none; }

h1{ font-family: "Lato", Arial, Helvetica, "微軟正黑體"; font-size:20px; font-weight:500; line-height:1.5em; display:block; letter-spacing:5px; padding:12px 0 30px 0; color: #c8a063;}
h2{ font-size:28px; font-weight:bold; color:#053e31; padding-bottom:12px; animation-delay: 1s;}
h3{ font-size:20px; line-height:2.2em; font-weight:600;}
h5{ font-size:27px; font-weight:600; display:block; line-height:3em; color: #000; opacity:0; animation: 2s slidein2 forwards; animation-delay: 2s;}


h4{ position:absolute; margin:0 auto; vertical-align:middle;}
/*===========img===============*/ 
.img-size { display:block; position: relative;/* height: 0;*/ overflow: hidden; }
.img-size div, .img-size img, .img-size iframe{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; /*height: 100%; */}
.img-size iframe{ height:100%; width:100%;}
.img-box{ display:block; position:relative;}
.img-txt{ z-index:1; position:absolute; color:#fff;}
.en{ font-size: 3em; line-height: 0.9em; font-family: Lato; font-weight: lighter; }
.en strong{ font-weight:bolder;}
img{ width:100%;}
/*============iframe===============*/
.iframe{/*overflow:hidden;*/}
.iframe-16x9 { position: relative; padding-bottom: 56.25%; /*padding-top: 35px;*/ height: 0; overflow: hidden; }
.iframe-4x3 { position: relative; padding-bottom: 75%;/* padding-top: 35px;*/ height: 0; overflow: hidden; }
.iframe-16x9 iframe, .iframe-4x3 iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/*============index===============*/
.index #bg-img{ }
body#index { height: auto; width: 100%;  background-color:#000;}
#index #footer { position: fixed; bottom:0; z-index:10;}
/*==============index==================*/ 
#nav-taste .fotorama { position: absolute; width: 100%; height: 100%; top:0; }

/*============nav===============*/
#header{ height:85px; width:66%; padding:0 17%; border-top:#064738 8px solid; background:rgba(255,255,255,1)}
.logo{ padding-top:20px; display:block; float:left;}
.topnav{ padding-top:20px; float: right;}
.topnav li{ float:left; padding-top:8px;}
.topnav li a { color: #000; font-weight: bold; text-decoration: none; display: block; float:left; padding: 3px 10px; font-size:17px; margin-left:15px; }
.topnav li a:hover, .topnav li.active a { border-bottom:#c79f62 3px solid}
.topnav.active li{ display: block; }
.toprnav{ width:150px; height:45px; padding-top:25px; float: right; padding-right:20px; z-index:100}
.toprnav li a { width:30px; display: block;float: right; padding: 3px 6px;}
.toprnav li a:hover {opacity:0.5;}


/*============name===============*/
#nav-name{ background:url(../images/name-bg.png) top no-repeat;}
#nav-name .fotorama { position: absolute; top:12%; right:0; }
#nav-name .right{ position: absolute; top:26%; right:54.2%}
#nav-name .left{position: absolute; z-index:1; width:230px; height:500px; top:20%; left:17%;}
#nav-name .left1{ position:absolute; top:61%; left:17%; overflow:hidden;}
#nav-name .mobile{ display:none;}
#nav-name .mobile img{ width:100%}

/* 手機選單 */
.nav-button { position:absolute; display: none; float:right; top: 15px; right:7px; width: 60px; height: 51px; background: url('../images/menu-icon-large.png');
		background-position: center center; background-repeat: no-repeat; background-size: 40px, 100%; cursor: pointer; border: 0 none; z-index: 999; text-indent: -9999px;}
.nav-button:hover { background-color: rgba(0,0,0,.1); }
.nav-button.open { background: url('../images/close-icon-large.png'); background-position: center center; background-repeat: no-repeat; background-size: 40px, 100%;}
.menu1 { margin-top:80px;}
.menu1 li{width:100%; background:rgba(0, 0, 0, 0.6); font-size:1.4em; color:#fff; line-height:2.0em; text-align:center; border-bottom:#d9d9d9 1px solid;}
.menu1 li a:hover{ color:#fabd00;}
#header .menu1 { display:none;}
.menu1.menuMO { display:none;}
@keyframes slidein {
  from {opacity:0;}
  to { opacity:1;}
}
@keyframes slidein1 {
  from {opacity:0; padding-left:7%; padding-top:10px}
  to { opacity:1; padding-left:8%; padding-top:0}
}
@keyframes slidein2 {
  from {opacity:0;  padding-top:40px}
  to { opacity:1; padding-top:0}
}
/*============park===============*/
.top { display:block; }
.topmb{ display:none;}
.top1 { display:block; animation-delay: 1s; position:relative}
.topmb1{ display:none; animation-delay: 1s;}
.park{ width:100%; padding-top:93px;}
.park .center{width:66%; margin:0 auto;height:528px;}
.park .center .left{ float:right; width:70%;}
.park .center .right{ float:left; width:24%; padding:8% 3%;}
.park .life{ clear:both;width:66%; margin:0 auto;height:528px;}
.park .life .left1{float:left; width:70%;}
.park .life .right1{float:right; width:24%; padding:6% 3%;}
.park .life .left2{ clear:both; float:left; width:30%; padding-left:20%; padding-top:26%;}
.park .life .right2{ float:right; width:50%; padding-top:50px;}
.park .life .right2 img{ width:100%}

/*============location===============*/


/*============build===============*/
.build{ width:100%;}
.build .center{ width:66%; margin:0 auto; min-height:600px;}
.build .center .left{ width:60%; float:left}
.build .center .mb{ width:100%; display:none}
.build .center .right{ float: right; width:30%; padding:11% 3%;}

/*============huyuu===============*/
.huyuu{ width:100%;}
.huyuu .center{ width:66%; height:2000px; padding:0 17%; background:#c5c5c5;}
.huyuu .center .left{ width:24%; float:left;}
.huyuu .center .right{ float:left; width:46%; padding:0 3%;}
.huyuu .center1{width:66%; padding:3% 17% 2% 17%; background:#c5c5c5; text-align:center;}
.huyuu .center .award{ display:none;}
.huyuu ul li{ position:relative; width:25%; float:left; display:block}
/*============map===============*/
.txt4{ padding:4px 7px; margin:0 8px; background:#b09e73; color:#FFF; font-size:17px;}
.txt4:hover{ background:#000; color:rgba(255,255,255,1);}
.txt5{ font-size:15px; color:#999!important; padding-left:10px;}

/*============footer===============*/ 
.footer { position: relative; width: 100%; height:1120px; background:url(../images/bg-1.jpg) top right no-repeat #c5c5c5;}
.footer .center{ width:444px; height:800px; margin:0 auto; padding-top:310px;}
.footer1{ width:100%; text-align:center; background:#f0f0f0; padding:10px 0; border-bottom:#064738 8px solid; font-size:19px; line-height:2em;}
.footermb{ display:none}
/*============icon===============*/
.icon-nav { background-image: url(../images/icon-nav.png); }
.icon-map { background-image: url(../images/icon-map2.png); }
.icon-fb { background-image: url(../images/icon-fb2.png); }
.icon-home { background-image: url(../images/icon-home2.png); }
.icon-prev { background-image: url(../images/icon-prev.png); }
.icon-next { background-image: url(../images/icon-next.png); }
.icon-close { background-image: url(../images/icon-close.png); }

/*============none-===============*/
#nav-landscape .grid-2-5 img, .landscape2-img, .en,#nav-architecture small,#nav-map h2{ display:none;}
#nav-brand1 .txt-box, #nav-architecture p{ display:none;}
#footer .footer-sub,.button-map,#footer .moss{ display:none;}

/*.horizontal{ display:none;}*/
.vertical{ display: inherit;}
/*.mobile{ display: inline;}*/
.computer{ display:none;}

/*============fotorama===============*/
.fotorama__caption__wrap { color: #fff; background-color: rgba(0,0,0,.9); }
.fotorama__fullscreen-icon { width: 35px; height: 40px; }
.fotorama__arr { width: 45px; height: 45px; top: 45%; border: 1px solid #fff; }
.fotorama__arr--prev { background: url(../images/icon-prev.png) no-repeat center center; background-color:rgba(51,51,51,0.7); left: 0; }
.fotorama__arr--next { background: url(../images/icon-next.png) no-repeat center center; background-color: rgba(51,51,51,0.7); right: 0; }
.fullscreen .fotorama__arr { top: 50%; }
/*a.icon-prev { position: absolute; left: 0px; top: 20%; z-index: 1; display: block; }
a.icon-next { position: absolute; right: 0px; top: 20%; z-index: 1; display: block; }
#number { position: absolute; right: 10px; top: 10px; z-index: 1; }*/
.arrow-disabled, li.arrow-disabled { pointer-events: none; cursor: default; *display:none;
filter: alpha(opacity=20); -khtml-opacity: 0.2; -moz-opacity: 0.2; opacity: 0.2; }
.fotorama__dot { border: 1px solid #fff; }
.fotorama__nav-wrap { position: absolute; bottom: 10px; }




/*============mobile===============*/

@media screen and (max-width:1740px) {
	.park .center{ height:442px;}
	.park .center .right{padding:5% 3%;}
	.park .center .right1{padding:0 3%;}
	
}

@media screen and (max-width:1280px) {
	
}
@media screen and (max-width:990px) {
	#header{width:100%; padding:0 0%;}
	.nav{ display:none}
	.logo{ padding-top:20px; padding-left:20px;}
	.toprnav{ display:none}
	.topnav{ display:none}
	.top{ display:none;}
	.topmb{ display:block;}
	.top1{ display:none;}
	.topmb1{ display:block;}
    .park .center{width:100%;height:auto;}
    .park .center .left{ clear:both; width:100%;}
    .park .center .right{ clear:both; width:84%; padding:2% 8% 10% 8%; border-bottom:#CCC solid 1px}
    .park .life .left1{clear:both; width:100%;}
    .park .life .right1{ clear:both; width:84%; padding:5% 8% 6% 8%;}
	.park .life{width:100%;height:auto;}
    .park .life .left2{ clear:both; width:90%; padding:5% 5% 4% 5%;}
    .park .life .right2{clear:both; width:90%}
	
	.build .center{ width:100%}
    .build .center .left{ clear:both; display:none;}
	.build .center .mb{display: block;}
    .build .center .right{ clear:both; width:90%; padding:5% 5% 20% 5%;}
	
.huyuu .center{ width:100%; height:2000px; padding:0 0%;}
.huyuu .center .left{ display:none}
.huyuu .center .right{ width:90%; padding:0 5% 10% 5%;}
.huyuu .center1{width:90%; height:250px; padding:4% 5% 2% 5%; }
.huyuu .center .award{ display:block; width:90%; padding:0 5%; }
.huyuu ul li{width:50%; float:left;}
.footer {height:600px; background:url(../images/) rgba(197,197,197,1)}
.footer .center{ width:80%; height:200px;; margin:0 auto; padding-top:0px;}
.footer1{ display:none;}
.footermb{ display:block; width:90%; text-align:center; background:#f0f0f0; padding:20px 5%; border-bottom:#064738 8px solid; font-size:20px; line-height:1.6em;}
figure.effect-honey h2 { bottom:10% !important; padding: 1em 1.5em !important;}
.nav-button{ display:block;}
	
}