@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%; }

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===============*/

 #nav a,.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;*/}

#footer { position: relative; width: 100%; margin-top: -100px; height: 100px; /*overflow: hidden;*//* 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; background-color: #fff; border-bottom-width: 4px; border-bottom-style: solid; border-bottom-color: #d7d7d7; }

/*============grids===============*/

.section{ position:relative;}

.grid-large { max-width: 1600px; }

.grid-middle { max-width: 1280px; }

.grid-small { max-width: 1024px; }

.grid-large, .grid-middle, .grid-small { width: 100%; position: relative; margin: 0 auto; }

.grid-1-3, .grid-1-2, .grid-2-3, .grid-2-5, .grid-3-5 { width: 100%; margin: 0 auto; float: none; display: block;position: relative;}

/*============style===============*/

body { font: 1em 'Lato', Arial, Helvetica, 微軟正黑體; 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 { margin: 0 0 15px 0; font-size:1.1em; line-height: 1.8em; }

p strong { font-weight: bold; color: #FFF; }

a { color: #FFF; }

a:visited { color: #FFF; }

a:hover { color: #999999; text-decoration: none; }

h1{ /*font-size:1.1em; line-height: 1.8em;*/ text-indent: -9999px; overflow: hidden; margin-bottom:10px; background-repeat:no-repeat;background-size:contain;}

/*===========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:Arial; /*font-family: Lato;*/ font-weight: lighter; }

.en strong{ /*font-weight:bolder;*/}

/*============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: 1px; left: 0px; width: 100%; height: 100%; }

/*============index===============*/

.index #bg-img{ background-image:url(../images/index_bg.jpg);}

body#index { height: auto; width: 100%; background: none; background-color: #c0c0c0; }

#index #footer { position: fixed; bottom:0; z-index:10;}

/*==============index==================*/ 

#nav-taste .fotorama { position: absolute; width: 100%; height: 100%; top:0; }

#nav-landscape .fotorama { position: absolute; width: 100%; height: 100%; top:0; }

/*============nav===============*/

#header{ /*height:60px;*/}

#header #logo span{ display:block; height:0px; overflow:hidden;}

#logo{width:100%; border-bottom:solid 1px #d7d7d7; padding:12px 0; text-align:center;}

#logo img{ width:100%; max-width:140px;}

.topnav{ width:100%; background-color:#FFF;}

.topnav li{ width:100%; border-bottom:solid 1px #c79f62; position: relative; text-align: center;}

.topnav li a { color: #666; font-weight: bold; text-decoration: none; display: block; width: 100%; padding: 19px 0 15px 0; font-size:1.2em; }

.topnav li a:hover, .topnav li.active a { color: #c79f62; }

.topnav li{ display:none;}

.topnav.active li{ display: block; }

.top-button{ position:relative; width:100%;background-color: #d7d7d7; border-bottom:solid 1px #fff; text-align:center; line-height:0;}

.top-button a{ width: 45px; height:40px; border-left:solid 1px #fff; cursor: pointer; background-repeat: no-repeat;  background-position: center center; display: inline-block; text-indent: -9999px; overflow: hidden; text-align:center;}

.top-button a:last-child{ border-right:solid 1px #fff;}



/*============landscape===============*/

#nav-landscape h1{ max-width:217px; height:27px; background-image: url(../images/landscape-sub.png); margin-top:25px; }

#nav-landscape .grid-3-5{ background-image: url(../images/landscape-bg.jpg);/*background-color:#26b7bc;*/ overflow:hidden;}

#nav-landscape .grid-3-5 img{ width:90%; border-left:solid 2px #fff; margin-left:10%;}

#nav-landscape .grid-3-5 .img-txt{ right:5%; bottom:3%; text-align:right;}

#nav-landscape .txt-box{ width:80%; max-width:340px; margin:0 auto; display:block;}

#nav-landscape .txt-box img{ width:100%; }

#nav-landscape .en{ color:rgba(255, 255, 255, 0.7);}

#nav-landscape2 h1{ max-width:217px; height:27px; background-image: url(../images/landscape-sub2.png); margin-top:100px;} 

#nav-landscape2 .grid-2-5{width:90%;}

#nav-landscape2 .grid-3-5{text-align:right;}

#nav-landscape2 .img-txt{left:5%; bottom:3%; text-align:right; /*right:3%; top:3%;*/ text-shadow:3px 3px 3px #000;}

#nav-landscape2 .en{ color:rgba(255, 255, 255, 0.7);}

#nav-landscape2 .grid-3-5 img{ width:100%;}

#nav-landscape2 .img-box { margin-top:10px;}

.landscape2-img{ width:100%; max-width:350px;}

.landscape2-img li{ float:left; margin:2px; background-color:#d7d7d7; color:#fff; text-align:center; font-size:1.2em; font-weight:bolder; width:48%; height:135px; line-height:135px; overflow:hidden;}

.landscape2-img li img{ width:100%;}



/*============architecture===============*/

#nav-architecture{ /*background: url(../images/architecture-bg.jpg) repeat-x bottom left #26b7bc;*/}

#nav-architecture .img-txt{left:3%; bottom:3%; text-align:right; text-shadow:3px 3px 3px #000;}

#nav-architecture .grid-1-2{text-align:left; color:#000; width:90%;max-width:400px;}

#nav-architecture .img-box{ width:100%; max-width:400px; margin:0 auto;}

#nav-architecture .img-box img{ width:100%; }

#nav-architecture h1{max-width:124px; height:27px; background-image: url(../images/architecture-sub.png); margin-top:25px;}

#nav-architecture .en{ color:#c79f62;}

#nav-architecture2 h1{ max-width:217px; height:27px; background-image: url(../images/architecture-sub2.png); margin-top:25px; }

#nav-architecture2 .grid-3-5{/* background-color:#26b7bc;*/ overflow:hidden;}

#nav-architecture2 .grid-3-5 img{ width:100%; border-left:solid 2px #fff; /*margin-left:10%;*/}

#nav-architecture2 .grid-3-5 .img-txt{ left:5%; bottom:3%; text-align:left;}

#nav-architecture2 .txt-box{ width:80%; max-width:500px; margin:0 auto; display:block;}

#nav-architecture2 .txt-box img{ width:100%; }

#nav-architecture2 .en{ color:#c79f62;}




/*============space===============*/

#nav-space h1{ max-width:217px; height:27px; background-image: url(../images/space-sub.png); margin-top:25px; }

#nav-space .grid-3-5{/* background-color:#26b7bc;*/ overflow:hidden;}

#nav-space .grid-3-5 img{ width:100%; border-left:solid 2px #fff; /*margin-left:10%;*/}

#nav-space .grid-3-5 .img-txt{ left:5%; bottom:3%; text-align:left; text-shadow:3px 3px 3px #000;}

#nav-space .txt-box{ width:80%; max-width:340px; margin:0 auto; display:block;}

#nav-space .txt-box img{ width:100%; }

#nav-space .en{ color:#c79f62;}


/*============brand===============*/

.list-box{ position: relative; background-color:#000; color:#fff;float: left; display: block; height:70px; width: 100%; margin-right:0.5%; margin-bottom:0.5%; overflow:hidden;}

.list-box .img-size { width: 100%; /*padding-bottom: 56%;*/height:100%;text-align: center; }

.img-size img{ width: 100%;}

.list-box a.img-size:hover div img{ width: 105%; filter: alpha(opacity=50); -khtml-opacity: 0.5; -moz-opacity: 0.5; opacity: 0.5; }

.list-box i{ position:absolute; display:block; top:65%; left:0; width:85%; z-index: 1; text-align:center;}

.list-box i img{ position:relative; margin-top:-50px; width:100%; max-width:150px;}

/*.list-box:first-child{ height:110px; background-color:inherit;}*/


.flower{ position: absolute; bottom:0; width:562px; height:405px; background-image: url(../images/brand-flower.png); /*z-index: 2;*/ background-position:left bottom; }

#brand{ position: relative;left:15%; width:85%; margin-top:20px; /*z-index:3;*/  }

#brand h1{ width:100px; height:27px; background-image: url(../images/brand-sub.png);}



/*============map===============*/

#nav-map iframe{ width:100%; height:50%;}

#nav-map .grid-small{ padding-top:20px;}

#nav-map .footer-content{ font-size: 1em; text-align:center;}

#nav-map h2{ width:165px; height:146px; /*background-image: url(../images/map-sub.png);  color:#fff; font-size:1.4em; line-height:1.5em; font-weight:bolder; padding:40px 30px;*/ float:left; margin-top:-120px;}



/*============footer===============*/ 

#footer { font-size: 0.9em; text-align: center; background-color: rgba(0,0,0,0.7); color: #FFF; font-family: "微軟正黑體"; }

#footer .grid-middle{ padding-top: 15px;}

.footer-content{ line-height: 1.8em;}

.footer-sub{ margin-bottom: 10px; padding-bottom: 10px; border-bottom-width: 1.3px; border-bottom-style: solid; border-bottom-color: #FFF; }

.footer-content img { vertical-align: middle; padding-right:5px; height:18px;}

.footer-content strong,.tel{ font-size:1.2em; font-weight:bolder;}

.moss, .moss a, .moss a:visited { color: #999; font-size:0.95em; }

.button-map a,.button-enter a {background-color:#c79f62; color:#fff; padding:3px 8px;}

.button-map a:hover{ padding:3px 15px;}

.button-enter a{ position:absolute; display:block; left:50%; margin-left:-20px; margin-top:-50px; z-index:10; padding:8px 8px; border:solid 1px #fff;}

.button-enter a:hover{ padding:8px 15px;}

.button-enter span{ display:none;}

.button-enter a:hover span{ display:inline;}



/*============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-brand .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;}

.flower{ display:none; }

#brand{ display:none; }

#brand h1{ 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(0,0,0,0.5); left: 0; }

.fotorama__arr--next { background: url(../images/icon-next.png) no-repeat center center; background-color: rgba(0,0,0,0.5); 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; }



@media only screen and (min-width: 370px) {

.button-map{ display: inline-block;}

#nav-architecture p{ display: inline-block;}

.flower{ display:none; }

#brand{ display:none; }

#brand h1{ display:none;}


p{ display:none;}

	}

@media only screen and (min-width: 660px) {

/*============brand===============*/

.list-box{ width: 49.5%; height:200px;} /*width: 49.5%; height:200px;*/

/*.list-box:first-child{ height:150px; background-color:#000;}*/




/*============none===============*/

#nav-brand .txt-box{ display:inherit;}

/*============footer===============*/ 

#footer .footer-content br { display: none; }

#footer .footer-sub{ font-size:1.1em;}

#footer .footer-sub{ display: block; max-width:660px; margin:0 auto;margin-bottom:10px;}

#footer .moss{ display: inline;}

	}

@media only screen and (min-width: 850px) {

/*============nav===============*/

#header{ overflow:hidden;}

#logo{ width:15%; border-bottom:none; padding:6px 0; float: left;}

.topnav{width: 80%; max-width: 1000px; display: block; margin: 0 auto;}

.topnav li { float: left; width: 15%; border-bottom: none; display: block;}

.top-button{ position:absolute; right:0; bottom:0;width: auto;background-color:#fff; border-bottom:none;}

.top-button a{background-position: center 20px; height:60px; border-left:solid 1px #d7d7d7; line-height:60px;}

.top-button a:last-child{ border-right:inherit;}

.top-button a:hover{color: #fff; background-color: #999; text-indent: inherit;}

a.icon-nav{ display:none;}





/*============icon===============*/

.icon-map { background-image: url(../images/icon-map.png); }

.icon-fb { background-image: url(../images/icon-fb.png); }

.icon-home { background-image: url(../images/icon-home.png); }




}

@media only screen and (min-width: 1000px) {

	

/*============grid===============*/

.grid-large, .grid-middle, .grid-small { width: 90%;}

.grid-1-3, .grid-1-2, .grid-2-3, .grid-2-5, .grid-3-5 { float: left;}

.grid-1-3 { width: 33.3%; }

.grid-1-2 { width: 49.5%; }

.grid-2-3 { width: 66%; }

.grid-1-1 { width: 99%; }

.grid-2-5 { width: 39.5%; }

.grid-3-5 { width: 60%; }

h1{ margin-bottom:25px; }

/*============landscape===============*/

#nav-landscape h1{margin-top:50px; }

#nav-landscape .txt-box{margin-top:10%;}

#nav-landscape2 h1{margin-top:0px; width:90%;}

#nav-landscape2 p{ margin-bottom:10%;}

#nav-landscape2 .grid-2-5{width: 39.5%;}



/*============architecture===============*/

#nav-architecture .grid-1-2{ padding-left:6%; position:absolute; height:100%; max-width:400px; z-index:1; /*background: url(../images/architecture-bg.jpg) repeat-x bottom left #26b7bc;*/}

#nav-architecture .img-box{/* height:100%;*/width:65%; max-width: inherit; overflow:hidden; float:right; text-align:right;}

#nav-architecture .img-box img{ height:100%;width:auto;}

#nav-architecture h1{/*display:none;*/}

#nav-architecture h2{ padding-top:120px;/*font-weight:bolder;*/}

#nav-architecture small{/*margin-bottom:25px;*/}



/*============brand===============*/

/*.list-box,.list-box:first-child{ width: 32.7%; height:300px;}原本寫的*/ 

.list-box{ width: 32.7%; height:300px;}

.img-size img{ height:100%; width:auto;} /*height:100%; width:auto;*/

.list-box a.img-size:hover div img{ height: 105%; width:auto;}

.list-box i{ position:absolute; display:block; top:50%; left:0; width:100%; z-index: 1; text-align:center;}

.list-box i img{ margin-top:-60px; max-width:200px;}

.flower{ display:inherit;}

#brand{ display:inherit;  left:55%;}

#brand h1{ display:inherit; }




/*============map===============*/

#nav-map iframe{ height:70%;}

#nav-map .grid-small{ padding-top:40px;}

#nav-map .footer-content{ float:right; font-size: 1.1em; text-align:left;}

/*============footer===============*/ 

#nav-map .footer-content br { display: none; }

#nav-map .footer-sub{ font-size:1.1em;}

/*============none-===============*/

#nav-landscape .grid-2-5 img, .landscape2-img, .en,#nav-architecture small,#nav-map h2{ display: inherit;}



.mobile{ display:none;}

.computer{ display: inline;}

p{ display:none;}
}

@media only screen and (min-width: 1280px) {

/*============landscape===============*/

#nav-landscape { /*background-image: url(../images/logo-line2.png); background-repeat: no-repeat; background-position: right bottom;*/ }

#nav-landscape2 { /*background-image: url(../images/logo-line.png); background-repeat: no-repeat; background-position: 40% 70%;*/ }


}

@media only screen and (min-width: 1400px) {

.en{ font-size: 4em;}

p{ display: inline;}

}


@media only screen and (max-height: 500px) {

p{ display:none;}


}



@media only screen and (max-width: 600px) and (max-height: 600px) {

.topnav li{ display: block;}

.topnav { display:none;}

.topnav.active { display: block; }

/*.list-box:first-child{ height:40px;}*/

p{ display:none;}

/*#brand .txt-box{ display:none;}*/




}

@media screen and (orientation:landscape) and (max-height: 500px){

#index #footer{height:0;}

}

@media only screen and (orientation:landscape){

.horizontal{ display: inherit;}

.vertical{ display:none;}

}

@media screen and (orientation:portrait){}