@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===============*/
#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;*/}
#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;}

/*============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 { padding-right:40px; line-height:1.8em; letter-spacing:1px; color: #000; float:right; writing-mode: tb-rl; -ms-writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; -moz-writing-mode: vertical-rl;
-ms-writing-mode: vertical-rl; writing-mode: vertical-rl;}
p strong { font-weight: bold; color: #FFF; }
a { color: #fff; }
a:visited { color: #dadada; }
a:hover { color: #ea6b26; text-decoration: none; }
h1{font-family: DFKai-sb; font-size:27px; font-weight:600; letter-spacing:2px; color: #000; float:right;writing-mode: tb-rl; -ms-writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; -moz-writing-mode: vertical-rl;
-ms-writing-mode: vertical-rl; writing-mode: vertical-rl; opacity:0; animation: 2s slidein2 forwards; animation-delay: 2s;}
h3{font-family: DFKai-sb; font-weight:600; font-size:2.2em; color:rgba(255,255,255,1); padding-bottom:20px;}

h4{ display:none; font-size:1.1em; font-weight:600; letter-spacing:2px; color:#000; float:right; padding-right:20px; line-height:1.8em; writing-mode: tb-rl; -ms-writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; -moz-writing-mode: vertical-rl;
-ms-writing-mode: vertical-rl; writing-mode: vertical-rl;}
/*===========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;}
/*============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:60px;*/}
.topnav{ width:65%; height:45px; padding-top:15px; float:left; padding-left:20px;}
.topnav li{}
.topnav li a { color: #000; font-weight: bold; text-decoration: none; display: block; float:left; padding: 3px 15px; font-size:17px; margin-left:8px; }
.topnav li a:hover, .topnav li.active a { color: #fff; background:#646464;}
.topnav.active li{ display: block; }
.toprnav{ width:25%; height:45px; padding-top:15px; float: right; padding-right:20px; z-index:100}
.toprnav li a { width:30px; display: block;float: right; padding: 3px 4px;}
.toprnav li a:hover {opacity:0.5;}

/*============name===============*/
#nav-name{}
#nav-name .logo{width:900px; margin:0 auto; top:10%; padding-top:170px; padding-bottom:100px; opacity:0; animation: 2s slidein forwards;}
#nav-name .pic1{ float:left; padding-left:8%; opacity:0; animation: 2s slidein1 forwards; animation-delay:1s;}
#nav-name .pic2{ padding-top:120px;  padding-left:30%; opacity:0; animation: 2s slidein forwards; animation-delay:2s;}
#nav-name .mobile{ display:none;}
#nav-name .mobile img{ width:100%}
@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}
}

/*============location===============*/
#nav-location{ position:relative; background:url(../images/location-bg.jpg) no-repeat bottom; opacity:0; animation: 2s slidein forwards;}
#nav-location .left{ position:absolute; padding:0 35px; border-left:#487299 1px solid; border-right:#487299 1px solid; top:22%; left:30%;}
#nav-location .left h1{ color:rgba(0,0,0,1)}

#nav-location2 .fotorama { position: absolute; width: 73%; height: 80%; top:8%; }
#nav-location2 .left{ position: absolute; right:0; top:17%}
#nav-location2 .right{position: absolute; z-index:1; width:220px; height:550px; bottom:5%; right:6%; padding:0 35px; border-left:#487299 1px solid; border-right:#487299 1px solid;}
#nav-location2 h1{ color:rgba(0,0,0,1)}
#nav-location2 p{color:rgba(0,0,0,1)}
#nav-location2 .top{ position:relative; margin:0 auto;}
#nav-location2 .mobile{ display:none;}

/*============build===============*/
#nav-build{ position:relative; background:url(../images/build-bg.jpg) no-repeat top center; background-size:cover; opacity:0; animation: 2s slidein forwards;}
#nav-build .left{ position:absolute; padding:0 35px; border-left:#487299 1px solid; border-right:#487299 1px solid; top:20%; left:46%;}
#nav-build .left h1{ color: #000}
#nav-build1 .left{ position:absolute; width:510px; height:500px; padding:0 35px; border-left:#487299 1px solid; border-right:#487299 1px solid; margin:12% 0 0 10%;}
#nav-build1 .left .pic{ padding-top: 395px;}
#nav-build1 .right{ width:54%; height:100%; float:right;}
#nav-build1 .right img{ height:100%;}
#nav-build1 .flower{ position:absolute; top:0; right:150px;}
#nav-build1 .mobile-pic{ display:none;}



/*============brand===============*/
#nav-brand{ position:relative; background:url(../images/brand-bg.jpg) no-repeat top center; background-size:cover; opacity:0; animation: 2s slidein forwards; }
#nav-brand .left{ position:absolute; padding:0 35px; border-left:#487299 1px solid; border-right:#487299 1px solid; top:30%; right:27%;}
#nav-brand .left h1{ color: #fff}
#nav-brand1{ }
#nav-brand1 .left{ width:55%; height:500px; margin:0 0 0 15%; float:left;}
#nav-brand1 .left li{ position:relative; width:21%; padding-right:8px; padding-top:9px; float:left;}
#nav-brand1 .left li img{ width:100%;}
#nav-brand1 .right{width:220px; height:670px; padding:0 35px; border-left:#487299 1px solid; border-right:#487299 1px solid; float:left; }
#nav-brand1 .right img{width:100%;}


/*============map===============*/
#nav-map{ }
#nav-map iframe{ width:75%; height:100%; float:right;}
.detal{ position:relative; width:1200px; height:55%; margin:0 auto; }
.detal .right{ float:right; width:75%; padding-top:30px; font-size:1.3em; text-align:center; line-height:1.6em;}
.txt4{ padding:4px 7px; margin:0 8px; background:#941515; color:#FFF; font-size:17px;}
.txt4:hover{ background:#000; color:rgba(255,255,255,1);}
.txt5{ font-size:15px; color:rgba(51,51,51,0.7); padding-left:10px;}
.txt5:hover{color:rgba(51,51,51,1);}
.detal .left{ position:absolute; left:10%; top:20%;}
#nav-map .pic1{ position:absolute; float:left; padding-left:8%; bottom:60px; opacity:0; animation: 2s slidein1 forwards; animation-delay:1s;}
#nav-map .pic2{ position:absolute; opacity:0; right:0; bottom:0; display:block; animation: 2s slidein forwards; animation-delay:2s;}


/*============footer===============*/ 
#footer { font-size: 0.9em; text-align: center; background-color: #000; color: #dadada; }
#footer .grid-middle{ padding-top: 15px;}
.footer-content{ line-height: 1.8em;}
.footer-sub{ border-bottom:solid 1px #ccc; margin-bottom:10px; padding-bottom:10px;}
.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:#5a5a5a; 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 #000;}
.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-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===============*/
#mbmenu{ display:none; margin-top:60px;}
#mbmenu li{ width:100%; background:rgba(0,0,0,0.9); border-bottom:rgba(102,102,102,1) 1px solid; font-size:1.5em; line-height:2.5em; text-align:center;}
#mbmenu li a{ color:rgba(255,255,255,1); }
#mbhrader{ width:100%; height:50px; background:#000; border-bottom:rgba(102,102,102,1) 2px solid;}
.mbtop{ display:none; margin:0 auto; width:210px;;}
.mbtop li a { width:40px;float: left; padding: 10px 8px;}
.mbtop li a:hover {opacity:0.5;}
.mbtop li a img{ width:100%;}
.mbtop li.nav-button { padding: 10px 18px; width: 4px; height: 40px; background: url('../images/menu-icon-large.png'); float:left;
		background-position: center center; background-repeat: no-repeat; cursor: pointer; border: 0 none; z-index: 999; text-indent: -9999px; background-size: 40px, 40px;}
.mbtop li.nav-button:hover { background-color: rgba(0,0,0,.5); }
.mbtop li.nav-button.open { background: url('../images/close-icon-large.png'); background-position: center center; background-repeat: no-repeat; background-size: 40px, 40px;}

p.mb-t{ display:none; font-size:1.1em;}
#nav-location .mobile{ display:none;}
#nav-build1 .mobile{ display:none;}
#nav-advocate .left .tan{ display:none;}
#nav-advocate .right .au{ display:none;}
#nav-brand1 .mb{display:none;}
#footer .footer-sub{ font-size:1.1em;}
#footer .footer-sub{ display: block; max-width:660px; margin:0 auto;margin-bottom:10px;}

@media screen and (max-width:1280px) {
	h4{ display:block;}
	h1{ font-size:1.6em; color:#000; float: right; }
p, p a { padding-right:20px; display:none;}
p.mb-t{ display: block;}
	#nav{ display:none;}
	.mbtop{ display:block;}
	#header { height:60px; background:#000;}
	#nav-name{}
	#nav-name .logo{ display:none}
	#nav-name .pic1{ display:none}
	#nav-name .pic2{ display:none}
    #nav-name .mobile{ display:block;}
	#nav-location{ background:url(../images/mobile/location1.jpg) bottom; background-size:cover}
	#nav-location .left{left:0%; margin-left:50px; top:15%;}
	
	#nav-location2 .fotorama { position: absolute; width: 100%; padding-top:60px; }
	#nav-location2 .left{ display:none; }
	#nav-location2 .right{ display:none}
	#nav-location2 .mobile{ display:block; width:100%; height:90%; padding-top:60px;}
	#nav-location2 .mobile img{ width:100%}
	
	#nav-build .left{left:0; margin-left:20px}
	#nav-build1 .left{ display:none;}
	#nav-build1 .right{ width:100%; height:100%; float: inherit; padding-top:70px;}
	#nav-build1 .flower{ position:absolute; top:50px; right:10px;}
	#nav-build1 .fotorama{ display:none;}
	#nav-build1 .mobile{ display:block; position:absolute; top:90px; left:20px; z-index:10;} 
	#nav-build1 .mobile-pic{ display: block;}
	
	#nav-brand .left{ top:50%; right:10%;}
	#nav-brand1 .left{ display:none;}
	#nav-brand1 .right{ display:none;}
	#nav-brand1 .mb{ display:block; padding-top:60px; height:100% !important;}
	#nav-brand1 .mb li{ width:100%;background-color:rgba(0,0,0,1); height:25%;}
	#nav-brand1 .mb li img{ width:100%; overflow:hidden;}
	#nav-map iframe{ width:100%; height:75%;}
	.detal .left{ display:none;}
.detal{width:80%; margin:0 auto;}
.detal .right{ width:100%; padding-top:20px; font-size:1.1em; text-align:center; line-height:1.5em;}
.txt4{ padding:4px 7px; margin:0 8px; background:#941515; color:#FFF; font-size:16px;}
/*============footer===============*/ 
#nav-map { background:url(../images/footer-bg.jpg) bottom center; width:100%; height:100%;}
#nav-map .footer-content br { display: none; }
#nav-map .footer-sub{ font-size:1.1em;}
#footer .footer-sub{ font-size:1.1em;}
#nav-map .pic1{ display:none;}
#nav-map .pic2{ display:none;}




	}
	@media screen and (max-width:415px) {
	#nav-brand1 .mb li{ height:20%}
	.txt4{ margin-left:10px; display:inline-block}

		
	}
	@media screen and (max-width:376px) {
		#nav-map iframe{ width:100%; height:70%;}
		.txt4{ display:none;}
		.detal .right{font-size:1.1em; }
		#nav-brand1 .mb{ display:block; padding-top:55px}
		
	}
	
	@media screen and (max-width:320px) {
		h1{ font-size:1.7em; }
		h2{ font-size:1.7em; }#mbmenu li{font-size:1.3em;}
		.detal .right{ font-size:1em; line-height:1.3em;}
		.txt4{ display:none;}

		
	}
		
@media only screen and (min-width: 660px) {
/*============none===============*/
#nav-brand1 .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;}
	}