@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Frank+Ruhl+Libre);
@import url(font-awesome/css/font-awesome.min.css);
@import url(animate-custom.css);
/*============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; }
/*============clear===============*/
.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; }
/*============animate===============*/
a, .visible, #header, a i, a em span, .icon-box, .img-box img, .img-over-box img, a:before, .owl-prev, .owl-next, .header-button, .header-button a b{ -webkit-transition: all 250ms ease-in; -o-transition: all 250ms ease-in; -moz-transition: all 250ms ease-in; transition: all 250ms ease-in; }
.header-icon a:hover { -ms-transform: scale3d(1.1, 1.1, 1.1); -moz-transform: scale3d(1.1, 1.1, 1.1); -webkit-transform: scale3d(1.1, 1.1, 1.1); -o-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); }
.hidden { opacity: 0; }
.visible { opacity: 1; }
.delay-1 { -webkit-animation-delay: .3s; -moz-animation-delay: .3s; animation-delay: .3s; }
.delay-2 { -webkit-animation-delay: .5s; -moz-animation-delay: .5s; animation-delay: .5s; }
.delay-3 { -webkit-animation-delay: 1s; -moz-animation-delay: 1s; animation-delay: 1s; }
.delay-4 { -webkit-animation-delay: 2s; -moz-animation-delay: 2s; animation-delay: 2s; }
.delay-list li { opacity: 0;opacity:1\9\0;/*IE9hack*/ -webkit-animation: fadeInUp 0.9s 1;  animation: fadeInUp 0.9s 1;  -webkit-animation-fill-mode: forwards;  animation-fill-mode: forwards;}
.delay-list li:nth-child(5n+1) {  -webkit-animation-delay: 0.2s;  animation-delay: 0.2s;}
.delay-list li:nth-child(5n+2) {  -webkit-animation-delay: 0.4s;  animation-delay: 0.4s;}
.delay-list li:nth-child(5n+3) {  -webkit-animation-delay: 0.6s;  animation-delay: 0.6s;}
.delay-list li:nth-child(5n+4) {  -webkit-animation-delay: 0.8s;  animation-delay: 0.8s;}
.delay-list li:nth-child(5n+5) {  -webkit-animation-delay: 1.0s;  animation-delay: 1.0s;}
.delay-list li:nth-child(5n+6) {  -webkit-animation-delay: 1.2s;  animation-delay: 1.2s;}
.delay-list li:nth-child(5n+7) {  -webkit-animation-delay: 1.4s;  animation-delay: 1.4s;}
.canvas-animation { position: absolute; width: 100%; height: 0; overflow: hidden; }
.canvas-animation canvas { display: block; position: absolute; width: 100%; height: 100%; top: 0;}
.canvas-animation img{ width:100%;}
/*============grids===============*/
.grid-large, .grid-middle, .grid-small { width: 85%; margin: 0 auto; position: relative; }
.grid-content{ margin: 0 auto; position: relative; }
.grid-large { max-width: 1440px; }
.grid-middle { max-width: 1240px; }
.grid-small { max-width: 1000px; }
.grid-1-12, .grid-2-12, .grid-3-12, .grid-4-12, .grid-5-12, .grid-6-12, .grid-7-12, .grid-8-12, .grid-9-12, .grid-10-12, .grid-11-12, .grid-3-8, .grid-5-8, .grid-1-2 { float: left; display: block; position: relative; }
.grid-1-12 { width: 8.3%; }
.grid-2-12 { width: 16.6%; }
.grid-3-12 { width: 25%; }
.grid-4-12 { width: 33.3%; }
.grid-5-12 { width: 41.6%; }
.grid-6-12 { width: 50%; }
.grid-7-12 { width: 58.3%; }
.grid-8-12 { width: 66.6%; }
.grid-9-12 { width: 75%; }
.grid-10-12 { width: 83.3%; }
.grid-11-12 { width: 91.6%; }
.grid-3-8 { width: 38%; }
.grid-5-8 { width: 62%; }
.grid-1-2 { width: 47%; }
.grid-bottom{margin-bottom:50px;}
.grid-right{float: right;}
/*============style===============*/
body { font-family: Arial, Helvetica, "微軟正黑體", "Microsoft JhengHei", "儷黑 Pro", "LiHei Pro", sans-serif; font-size: 1em; color: #000; word-wrap: break-word;}
p { font-size:1em; line-height: 1.875em; text-align: justify;}
p span, .br, h1 span, h2 span, em span, .footer-grid span, h4 span{ display: inline-block; }
::selection { background: #906d2e; color: #fff; }
a { color: #000;}
a:hover { color: #906d2e; }
strong { font-weight: bold; }
em, i { font-style: normal; }
big { font-size: 1.1em; }
small { font-size: 0.85em; }
h1 { font-size: 1.375em; font-weight:bold; line-height: 1.3em; letter-spacing: 0.2em;}
h2,h3 { font-size: 1.25em; font-weight:bold; line-height: 1.3em;}
h4 { font-size: 1em; line-height: 1.4em;}
h4, h5, h6 { font-size: 1em; }
.title-font, h1, h2, em, small{font-family: "Frank Ruhl Libre", Georgia, Times, "Times New Roman", "儷宋 Pro", "LiSong Pro Light", "宋体", SimSun, serif;}
.title-box em{ font-size:80px; line-height: 65px; letter-spacing: -0.05em; display: block; margin-bottom: 15px;}
.title-en{ font-size:70px; line-height: 60px; letter-spacing: -0.05em; display: block; margin-bottom: 5px; }
.text-caption{ display: block; padding-top:20px; color:#999; clear: both;}
.text-en{font-size:50px; line-height: 50px; color:#ccc; letter-spacing: -0.05em;}
.text-small{ display: block; font-size:16px; line-height: 20px;}
.text1{ font-size:15px; color:#906d2e;}
.color1{ color:#906d2e;}
.color2{ color:#999;}
.offscreen{position: absolute;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);padding: 0;border: 0;height: 1px;width: 1px;overflow: hidden;}
.align-left{ float: left;}
.align-right{ float: right;}
.align-center{ margin: 0 auto;}
.text-right{ text-align: right;}
.text-left{ text-align: left;}
.text-center{ text-align: center;}
.text-left{ text-align: right;}
.no-spacing{ letter-spacing: 0; }
.text-bottom{ display: block; margin-bottom:30px;}
/*============base===============*/
body, html { height: 100%; }
.wrapper { min-height: 100%; width: 100%; position: relative; }
.main {+min-height: 100%; position: relative; padding-bottom: 500px; width: 100%; /*overflow: hidden;*/ }
#footer { position: relative; width: 100%; margin-top: -500px; /*height: 500px;*/ z-index: 5;overflow: hidden;}
/*============iframe===============*/
.iframe-16x9 { position: relative; padding-bottom: 56.24%; height: 0; overflow: hidden; }
.iframe-4x3 { position: relative; padding-bottom: 75%; height: 0; overflow: hidden; }
.iframe-16x9 iframe, .iframe-4x3 iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/*==============text-ver==================*/
.text-ver, .ideal-text h1, .ideal-text p, .about-text h1, .about-text p { 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; }
.text-hor { writing-mode: lr-tb; -ms-writing-mode: lr-tb; -webkit-writing-mode: horizontal-tb; -moz-writing-mode: horizontal-tb; -ms-writing-mode: horizontal-tb; writing-mode: horizontal-tb; }
/*============nav===============*/
.logo { position: relative; display: block; float: left; }
.logo img { margin-left:40px; width: 164px; height: auto;}
#header { position: fixed; display: block; width: 100%; top: 0px; left: 0px; z-index: 101; overflow: hidden; padding-top: 40px; height:100px; background: #fff;}
#nav { float: right; margin-right: 210px;}
#nav li { position: relative; display: block; float: left;}
#nav li a, .footer-nav li a { display: block; padding: 15px;}
#nav li em, .footer-nav li em{ display: block; font-size: 18px; height: 24px; line-height: 24px; overflow: hidden;}
#nav li em span, .footer-nav li em span{ display: block; }
#nav li em span{ display: none;}
#nav li a:hover, #nav li.active a, .footer-nav a:hover, .footer-nav li.active a { color:#906943;}
#nav li a:hover em span, .footer-nav li a:hover em span{ margin-top:-24px;}

.header-button .fa-times { display: none; }
.header-button.active .fa-times { display: inline; }
.header-button.active .fa-bars { display: none; }
.header-button {position:absolute; top:45px; right:0px; z-index: 102;}
.header-button a { position: relative; display: block; float: left; width: 40px; height: 40px; text-align: center; overflow: hidden; background: #fff;filter: alpha(opacity=100); opacity: 1;}
.header-button a:hover { overflow: inherit; }
.header-button i { display: block; font-size: 20px; line-height: 40px; }
.header-button a b { display: block; right: 5px; filter: alpha(opacity=0); opacity: 0; margin-top: 0px; white-space: nowrap; bottom: -20px; }
.header-button a:hover b { position: absolute; filter: alpha(opacity=100); opacity: 1; margin-top: -5px; }
.header-button a:hover i{ font-size: 26px;}
a.header-nav, body.sticky .header-button a {height: 1px; filter: alpha(opacity=0); opacity: 0;}
.header-button.active a, body.sticky .header-button.active a, body.sticky a.header-nav{height: 40px;filter: alpha(opacity=100); opacity: 1;}
.header-button.active{ position:absolute;}
body.sticky #header{ padding-top: 0px; height:0;}
body.sticky #header.active{ padding-top: 30px; height:75px; border-bottom: solid 1px #ddd;}

body.sticky .header-button a.header-mail{height: 40px;filter: alpha(opacity=100); opacity: 1; width: 80px;}
body.sticky .header-button a.header-mail i{ display: none;}
body.sticky .header-button a.header-mail b { position:relative; filter: alpha(opacity=100); opacity: 1; margin-top: 8px; bottom: auto; right: auto;}
body.sticky .header-button{ position:fixed; top:35px;}
body.sticky .header-button.active a.header-mail{width: 40px;}
body.sticky .header-button.active a.header-mail i{ display:block;}
body.sticky .header-button.active a.header-mail b{ filter: alpha(opacity=0); opacity: 0; margin-top: 0px; right: 5px; bottom: -20px; }
body.sticky .header-button.active a.header-mail:hover b { position: absolute; filter: alpha(opacity=100); opacity: 1;}
/*============footer===============*/ 
.footer-grid { position: relative; width: 90%; margin: 0 auto; padding-top:30px; text-align: center;}
.footer-img { width: 100%; max-width: 355px; margin: 0 auto; margin-bottom: 40px;}
.footer-img img{ width: 100%; height: auto;} 
.footer-info { display: block; font-size: 24px; margin-bottom:5px; color: #906d2e;}
.footer-info small{ font-size: 16px;}
.footer-info a{color: #906d2e;}
.footer-copyright { display: block; font-size: 13px; color: #999; margin-top: 10px;}
.footer-copyright a{ color: #999;}
.footer-copyright a:hover{color: #906d2e;}
.footer-nav{ position: relative; padding: 22px 0 5px 0; width: 100%; border-top:solid 1px #ddd; margin-top: 55px; text-align: center;}
.footer-nav li{ position: relative; display: inline-block;}
/*============main===============*/
.content, .section-header{ position: relative; padding: 30px;}
.section-header { padding-top: 140px; background: url('../images/loader.gif') center center no-repeat; }
.section-header .header-box {position: relative;display: block;width: 100%;background-size: cover; background-repeat: no-repeat; background-position: center center;max-height: 1000px;}
.header-box:before { content: ''; position: absolute;display: none; width: 100%; height: 100%; top:0; left: 0; z-index: 1; background: url('../images/bg1.png');}
.title-box{ position:absolute; display:block; color: #fff;z-index: 2;}
.title-box a{ color: #fff;}

.img-container { position: relative; overflow: hidden; }
.img-container img { width: 100%; height: auto; }
.img-caption2 { position: absolute; display: block; bottom: 0; right: 20px; color: #fff; min-height: 35px; z-index: 1; -moz-text-shadow: 0px 0px 4px rgba(0,0,0,0.9); -webkit-text-shadow: 0px 0px 4px rgba(0,0,0,0.9); text-shadow: 0px 0px 4px rgba(0,0,0,0.9); text-align: right; }
.img-caption{ font-size: 18px; color: #999; text-align: left; letter-spacing: 0.05em; margin-top: 20px; position: relative; z-index: 1;}
.img-caption h1{ font-size: 55px; line-height: 55px; color: #fff; float: left; display: block; border-right: solid 1px #666; padding: 0 15px 0 2%; margin-right: 15px;}
.img-caption h2{ font-size: 26px; color: #fff; margin-top: -35px;}
.img-box, .img-over-box { position: relative; display: block; text-align: center; overflow: hidden;width: 100%;}
.img-box img, .img-over-box img { width: 100%; height: auto; -ms-transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: all 1000ms ease-out; -o-transition: all 1000ms ease-out; -moz-transition: all 1000ms ease-out; transition: all 1000ms ease-out; }
.img-box img { width: auto; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;}
a:hover .img-box img, a.img-box:hover img, a:hover .img-over-box img, .button-in .img-over-box:hover img { -ms-transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); }

.icon-box { color: #fff; position: absolute; width: 100%; height: 100%; top: 0; left: 0; filter: alpha(opacity=0); opacity: 0; z-index: 1; }
.icon-box span { position: absolute; display: block; top: 0px; right: 0; bottom: 0; left: 0; margin: auto; height: 60px; -moz-text-shadow: 0px 0px 4px rgba(0,0,0,0.9); -webkit-text-shadow: 0px 0px 4px rgba(0,0,0,0.9); text-shadow: 0px 0px 4px rgba(0,0,0,0.9);}
.icon-box span:after { content: ''; display: block; text-align: center; font-size: 0.7em; }
.icon-box i { display: block; font-size: 5em; line-height: 50px; }
a:hover .icon-box, .button-in .img-over-box:hover .icon-box { filter: alpha(opacity=85); opacity: 0.85; background-position: right top; }
a:hover .icon-box i, .button-in .img-over-box:hover .icon-box i { font-size: 2em; }

.img-1-2, .img-1-3, .img-2-3, .img-3-8, .img-5-8{ position: relative; display:block; float:left; margin-bottom:1%;}
.img-list .img-over-box, .img-list-2 .img-over-box{ width:98%; margin-left:1%; margin-right: 1%;}
.img-list, .img-list-2 { display:block; width:100.5%; margin-left:-0.5%;}
.img-1-2{width:50%;}
.img-1-3{width:33.2%;}
.img-2-3{width:66.7%;}
.img-3-8 { width: 38%; }
.img-5-8 { width: 62%; }
.img-2-3 .img-box{ padding-bottom:66.4%;}
.img-bottom{ margin-bottom:3%;}
/*============button===============*/
.button-text { position: relative; display: inline-block; padding: 15px 8%; line-height: 20px; text-align: center; color: #ccc; background-color: #000; letter-spacing: 0.1em; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
.button-text:hover { color: #906d2e;}
a.button-top { position:absolute ; z-index:1; top:0; left: 50%; margin-left: -23px; margin-top: -25px; width: 45px; height: 45px; line-height: 45px; font-size: 22px; text-align: center; background-color:#906d2e; color:#fff; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;}
a.button-top:hover { color:#fff; margin-top: -30px;}
.button-down{position: relative; display:inline-block; width: 45px; height: 45px; line-height: 45px; font-size:26px; color: #fff; text-align: center; margin-top: 30px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;}
.button-down:hover{background-color:#fff; color: #000;}
.button-enter{position: relative; display:inline-block; color: #fff; height: 40px; line-height: 40px; padding-left: 95px; margin-top: 25px;}
.button-enter:before{content: ''; position: absolute; left: 0; top:50%; margin-top: -5px; height: 10px; width: 86px; background-repeat: no-repeat; background-size: cover; background-image: url('../images/enter-img.png'); filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/enter-img.png', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/enter-img.png', sizingMethod='scale')";}
.button-enter:hover{padding-left: 100px;}
#audio-button { position: absolute; right: 40px;top: 160px; z-index: 2; }
#audio-button a { display: block; width: 50px; padding-top: 5px; height: 45px; overflow: hidden; font-size: 0.8em; text-align: center; color: #fff; }
.button-full{ position: absolute; display: block; width: 100%; height: 100%; left: 0; top:0;}
/*==============index==================*/
#index #section1 .header-box {background-image: url('../images/index-img1.jpg');filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/index-img1.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/index-img1.jpg', sizingMethod='scale')";}
#index #section2 .header-box {background-image: url('../images/index-img2.jpg');filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/index-img2.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/index-img2.jpg', sizingMethod='scale')";}
#index #section1 .title-box{top:15%; left: 7%;}
#index #section2 .title-box{top:15%; left: 10%;}
#index .header-box:before { background: none;}
#news .text-box{text-align: center; margin: 60px auto;}
.news-list a{position: relative; display: block; float: left; width: 22.5%; margin: 0 1.25% 2.5% 1.25%;}
.news-list .img-over-box{ margin-bottom: 5%;}
a.news-hide4{display: none;}
/*==============mrt==================*/
#mrt #section1 .header-box { background-image: url('../images/mrt-header.jpg');filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/mrt-header.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/mrt-header.jpg', sizingMethod='scale')";}
#mrt #section2 .header-box { background-image: url('../images/mrt-header2.jpg');filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/mrt-header2.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/mrt-header2.jpg', sizingMethod='scale')";}
#mrt .content .img-box, #location .content .img-box{ padding-bottom:66.6%; }
#mrt .title-box{ top:20%; right: 7%;}
#mrt .mobile-content{ margin-top:3%;}
#mrt .text-box p{ max-width: 390px;}
#mrt .img-list-2{ width: 30%; text-align: right;}
/*==============location==================*/
#location #section1 .header-box {background-position: top center;}
#location #section1 .header-box {background-image: url('../images/location-header.jpg');filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/location-header.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/location-header.jpg', sizingMethod='scale')";}
#location #section2 .header-box {background-image: url('../images/location-header2.jpg');filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/location-header2.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/location-header2.jpg', sizingMethod='scale')";}
#location #section3 .header-box {background-image: url('../images/location-header3.jpg');filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/location-header3.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/location-header3.jpg', sizingMethod='scale')";}
#location #section4 .header-box {background-image: url('../images/location-header4.jpg');filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/location-header4.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/location-header4.jpg', sizingMethod='scale')";}
#location #section5 .header-box {background-image: url('../images/location-header5.jpg');filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/location-header5.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/location-header5.jpg', sizingMethod='scale')";}
#location .title-box{ top:7%; right: 5%; text-align: right;}
#location .mobile-content{ max-width: 420px; margin-top:10%;}
/*==============architecture==================*/
#architecture .header-box { background-image: url('../images/architecture-header.jpg');filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/architecture-header.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/architecture-header.jpg', sizingMethod='scale')";}
#architecture .title-box{ top:15%; left: 7%;}
#architecture1 .mobile-content{max-width: 525px; margin-top:10%;}
#architecture2 .mobile-content{max-width: 450px;margin-top:5%;}
/*==============interior==================*/
/*#interior .header-box { background-image: url('../images/interior-header.jpg');filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/interior-header.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/interior-header.jpg', sizingMethod='scale')";}*/
#interior #section1 .header-box {background-image: url('../images/interior-header1.jpg');filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/interior-header1.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/interior-header1.jpg', sizingMethod='scale')";}
#interior #section2 .header-box {background-image: url('../images/interior-header2.jpg');filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/interior-header2.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/interior-header2.jpg', sizingMethod='scale')";}
#interior #section3 .header-box {background-image: url('../images/interior-header3.jpg');filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/interior-header3.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/interior-header3.jpg', sizingMethod='scale')";}
#interior .title-box{ top:12%; left: 7%;}
#interior .mobile-content{ max-width: 420px; margin-top:10%;}
/*==============brand==================*/
#brand #section1 .header-box { background-image: url('../images/brand-header.jpg');filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/brand-header.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/brand-header.jpg', sizingMethod='scale')";}
#brand #section2 .header-box { background-image: url('../images/brand-header2.jpg');filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/brand-header2.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/brand-header2.jpg', sizingMethod='scale')";}
#brand #section3 .header-box { background-position: center left; background-image: url('../images/brand-header3.jpg');filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/brand-header3.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/brand-header3.jpg', sizingMethod='scale')";}
#brand #section1 .title-box{ top:15%; left: 5%;}
#brand #section2 .title-box{ top:15%; right: 7%;}
#brand #section3 .title-box{ top:15%; left: 5%;}
#brand .mobile-content{ max-width: 420px; margin-top:10%;}
#brand .grid-8-12{ float: right; margin-top: 1%;}
#brand2 .text-caption{ margin-top: 5%; margin-left: 5%;}
/*==============form==================*/
#contact{max-width:400px;}
#contact .form-box{ padding: 7%;border-radius:5px; background: #fff; margin: 100px auto 0 auto;}
#contact h4{font-size: 1.4em; color:#906d2e; text-align: center; margin-bottom: 3%;}
form { position: relative; display: block; margin: 0 auto;}
form .input-column,form .input-row { position: relative; display: block; line-height:0; margin:0 0.8% 5px 0.8%; width:48%; color:#333; float:left; min-height: 46px; background: #fff;border-radius:4px;}
form .input-button{ position: relative; display: block; margin:0 0.8% 5px 0.8%; width:98%; text-align:center; float:left;}
form .input-row{ width:98%; clear:both;}
form label { position: absolute; width: 100px; height: 46px; line-height: 46px; display: block;}
form input[type="text"], form input[type="password"], form select, form textarea, .input-box{ line-height: 20px; padding-top: 13px; padding-bottom: 13px; height: 46px; width: 100%; padding-left: 105px; background-color:transparent; border: solid 1px #ddd; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;border-radius:4px; }
form textarea { height: 150px; line-height: 24px; padding-top: 8px;}
form select {  width: 80%; margin-left: 19%; line-height: 46px; padding:0;}
.input-box{line-height: 24px; padding-top: 8px;height: inherit; min-height:50px;}
form small { font-size: 16px; width: 15px; display: inline-block; color:#906943; font-weight:bold;text-align: center; padding-left: 5px;}
form input:focus, form textarea:focus, form select:focus { border: solid 1px #906943;}
form input.error, form textarea.error, form select.error { border: solid 1px #906943; background-color:#f0e2d5; }
img.rand-img { position: absolute; right: 1px; bottom:1px; width:90px; height:44px;cursor: pointer;}
.input-button input[type="submit"],#submit{ width:100%;}
.input-button input[type="reset"]{filter: alpha(opacity=80); opacity: 0.8; width:48.5%; margin-right:1%;}
input[type="reset"], input[type="submit"],input[type="button"],input[type="file"],#submit{ display: inline-block; min-height: 20px; line-height:20px; padding:13px 0; cursor: pointer;background-color:#000;  min-width: 120px; letter-spacing: 0.2em; font-weight:bold; color:#fff;border-radius:4px;}
input[type="reset"]:hover, input[type="submit"]:hover, input[type="reset"]:focus, input[type="submit"]:focus,input[type="button"]:hover,#submit:hover{ background-color:#906943;}
#result{text-align: center;}
@-webkit-keyframes autofill { to {color: #000; background: transparent;} }/*Change Chrome fill*/
input:-webkit-autofill {-webkit-animation-name: autofill;-webkit-animation-fill-mode: both;}
/*============pswp===============*/
.pswp__bg { opacity: 0.9 !important; }
.pswp__caption__center { font-size: 15px !important; }
.pswp__zoom-wrap { text-align: center; }
.pswp__zoom-wrap:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; }
.pswp__wrapper { line-height: 0; width: 100%; max-width: 1280px; position: relative; display: inline-block; vertical-align: middle; margin: 0 auto; text-align: left; z-index: 1045; }
.pswp__video_wrapper { position: relative; padding-bottom:56.25%; height: 0; width: 100%; }
.pswp__video_wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
video { width: 100% !important; height: auto !important; }
@media screen and (max-height: 750px) {
.pswp__wrapper { max-width: 960px;}
}
@media screen and (max-height: 600px) {
.pswp__wrapper { max-width: 720px;}
}
@media screen and (max-width: 790px) and (orientation:landscape){
.pswp__ui--fit .pswp__top-bar, .pswp__ui--fit .pswp__caption { background:rgba(0, 0, 0, 0) !important;}
.pswp__counter, .pswp__caption{ display:none;}
}
/*============owl===============*/
.owl-stage {display: -webkit-box;display: -moz-box;display: -ms-box;display: box;}/*fix autowidth*/
.owl-prev, .owl-next{ position:absolute; display:block; bottom: 15px; height:45px; width:45px; line-height: 45px; z-index:1; text-align:center; color: #fff;-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border: solid 2px #fff;}
.owl-prev:hover, .owl-next:hover{background-color: #fff ; color: #000;}
.owl-prev i, .owl-next i{font-size:24px;line-height: 45px;}
.owl-prev{ left:20px;}
.owl-next{ right:20px;}
.owl-carousel.off {display: block;}
.owl-prev.disabled, .owl-next.disabled{filter: alpha(opacity=0); opacity: 0;}
/*.owl-nav.disabled + .owl-dots { margin-top: 10px; }*/
.owl-dots { text-align: center; -webkit-tap-highlight-color: transparent;position: absolute; bottom:15px; width: 100%;}
.owl-dots .owl-dot {display: inline-block; zoom: 1; *display: inline; }
.owl-dots .owl-dot span { width: 5px; height: 5px; margin: 10px 5px; background: transparent; display: block; -webkit-backface-visibility: visible; transition: opacity 200ms ease; border: solid 2px #fff;-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;}
.owl-dots .owl-dot.active span, .owl-dots .owl-dot:hover span { background: #fff; width: 5px; height: 5px; margin: 10px 5px;}
/*============lightbox===============*/
.lightbox-container { position: fixed; display: block; top: 0; left: 0; z-index: 200; height: 100%; width: 100%; background: url(../images/bg.png) repeat; overflow: auto;}
.lightbox-close {position: fixed; color: #fff; right: 10px; display: block; width: 50px; height: 35px; right: 0; top: 0; text-align: center; padding-top: 15px;}
body.lightbox{overflow:hidden !important;}
.lightbox-container, .lightbox-item{ display: none;}
.lightbox-container.active, .lightbox-item.active{ display: block;}
.lightbox-bg{ position: fixed; display: block; top: 0; left: 0; height: 100%; width: 100%;}
.lightbox-content{ position: relative; display: block; width: 90%; margin: 0 auto;}
.lightbox-item{ min-height: 400px;}
/*============ie===============*/
.ie { position: fixed; display: block; top: 0; left: 0; z-index: 200; height: 100%; width: 100%; background: url(../images/bg.png) repeat; }
.ie div { position: relative; display: block; margin: 0 auto; margin-top: 3%; width: 90%; max-width: 600px; height: 300px; background-color: #fff; padding: 3%; border: solid 1px #ddd; }
.ie-close { position: absolute; display: block; width: 50px; height: 35px; right: 0; top: 0; text-align: center; padding-top: 15px; }

@media screen and (min-width: 1400px){
.img-list-2 .img-1-2{width:100%;}
}
@media screen and (max-width: 1500px) {
.title-box em {font-size: 60px;line-height: 45px;}
.title-en {font-size: 50px;line-height: 40px;}
h1 {font-size: 1.25em;}
h2, h3 { font-size: 1.125em;}
.text-small{font-size: 13px; line-height: 15px;}
.text-en{font-size: 36px;line-height: 36px;}
}
@media screen and (max-width: 1400px) {
.img-1-2.img-bottom { margin-bottom: 0;}
#mrt .mobile-content{ max-width: 390px;}
#mrt .text-box{padding-left:0;}
#mrt .img-list-2{ width: 100%;}
.owl-prev {left: 10px;}
.owl-next {right: 10px;}
.owl-prev, .owl-next{height: 40px;width: 40px;line-height: 40px;}
.owl-prev i, .owl-next i{line-height: 40px;}
.news-list a{ display: block; width: 30%; margin: 0 1.5% 3% 1.5%;}
a.news-hide3{display: none;}
}
@media screen and (max-width: 1400px),(max-height: 750px) {
/*============nav===============*/
.logo img { margin-left:30px; width: 140px;}
#header{ padding-top: 30px; height: 75px;}
.section-header {padding-top: 105px;}
.header-button{top: 35px;}
#nav li em, .footer-nav li em{font-size: 16px;}
#audio-button {top: 120px;}
}
@media screen and (max-width: 1300px) and (min-width: 950px) {
#mrt .content .img-box, #location .content .img-box{ padding-bottom:80%; }
}
@media screen and (max-width: 1100px){	
.text-en{font-size: 30px;line-height: 30px;}
.news-list a{ display: block; width: 46%; margin: 0 2% 4% 2%;}
a.news-hide2{display: none;}
}
@media screen and (max-width: 950px) {
/*============main===============*/
#nav li a, .footer-nav li a{padding: 15px 10px;}
.grid-1-12, .grid-2-12, .grid-3-12, .grid-4-12, .grid-5-12, .grid-6-12, .grid-7-12, .grid-8-12, .grid-9-12, .grid-10-12, .grid-11-12, .grid-3-8, .grid-5-8, .grid-1-2{ float: none; width: 100%;clear: both; }
.grid-right{float: none;}
.section-header{ padding-left: 0; padding-right: 0; padding-bottom: 0; margin-bottom: 30px;}
.mobile-content{ margin: 0 auto; margin-top: 0 !important; width: 100%;}
#section-content .content > div:first-child{ margin-bottom: 60px;}
.title-box em {font-size: 50px; line-height: 40px;}
#audio-button {right: 0px;}
/*==============other==================*/
#mrt .img-list-2{ text-align: left;}
#brand .text-small {max-width: 500px;}
#section-content #brand2 > div:first-child{ margin-bottom: 0;}
#mrt .title-box{ display: none !important;}
}
@media screen and (max-width: 800px) {
/*============nav===============*/
.logo { width: 100%; background: #fff; height: 80px;} 
.logo img{ margin-left:20px; margin-top: 20px; width: 120px;}
#header{ padding-top: 0px; height: 80px; background: transparent;}
.section-header {padding-top: 80px;}
.header-button{top: 20px;}
a.header-nav { height:40px;filter: alpha(opacity=100); opacity: 1; }
#nav { width: 100%; float:none; margin-right: 0;  clear: both;}
#nav li { font-size:0; float: none;}
#nav li a{ padding: 0; width: 100%;background: #000; border-bottom: solid 1px #333; color: #fff; filter: alpha(opacity=90); opacity: 0.9;}
#nav li em { height: 50px; line-height: 50px; color: #ccc; margin-left: 20px;}
#nav li em span{ display: inline-block; color: #fff; margin-right: 5px;}
#nav li a:hover em span{ margin-top:0px;}
#nav li a:hover , #nav li.active a{background:#906d2e;}
#header.active, body.sticky #header.active{padding-top: 0px; height:400px;border-bottom:none;}
body.sticky .header-button{ top:20px;}
#audio-button {top: 90px;}
/*==============main==================*/
.content{padding: 30px 20px;}
.grid-large, .grid-middle, .grid-small, .grid-content { width: 100%; }
	#interior .title-box h2 span{ display: block;}
}
@media screen and (max-width: 600px) {
/*============footer===============*/
.footer-grid span{ display: block;}
.footer-grid h3{ margin-bottom: 8px;}
.footer-info { font-size:20px;line-height: 26px;}
.footer-info small{font-size:14px; }
.footer-nav li a { padding: 10px 5px;}
.footer-nav li em { font-size: 14px;}
.footer-copyright{font-size: 12px;}
.footer-hide{ display:none;}
/*==============main==================*/
.title-box em {font-size: 40px; line-height: 30px;}
.mobile-width-full{ padding-left: 0; padding-right: 0;}
.mobile-width-full .mobile-content{ width: 88%;}
.owl-carousel .header-box:before { display: block;}
.button-enter{ padding-left: 75px;}
.button-enter:before{height: 8px; width: 70px;}
.button-enter:hover{padding-left: 80px;}
#brand2 .text-en {font-size: 20px;line-height: 20px;}
#index #section1 .title-box, #index #section2 .title-box, #brand #section1 .title-box, #brand #section2 .title-box{top:10%;}
.news-list a{ display: block; width: 100%; margin:0 auto 30px auto; float: none; max-width: 400px;}
a.news-hide1{display: none;}
}
@media screen and (max-width: 450px) {
/*============main===============*/
.icon-box{ font-size: 0.95em;}
a:hover .icon-box i, .button-in .img-over-box:hover .icon-box i { font-size: 1.5em; }
#brand2 .text-en {font-size: 15px;line-height: 15px;}
#brand2 .text-caption{ margin-top: 0;}
}
@media screen and (max-width: 370px) {
/*============footer===============*/
.footer-nav li a { padding: 10px 3px;}
.footer-nav li em {font-size: 13px;}
.footer-info {font-size: 18px; line-height: 24px;}
/*==============main==================*/
.text-caption{padding-top: 15px;}
#interior3 .text-en br{ display: none;}
}
@media screen and (max-width: 350px) {
.logo img {margin-left: 10px;margin-top: 25px;width: 100px;}
.header-button a{width: 35px;}
}
@media screen and (max-height: 620px) {
/*==============form==================*/
#contact .form-box{ margin-top: 50px;}
	form textarea {height: 100px;}
}
@media screen and (max-height: 400px) {
.header-box:before { display: block;}
.owl-prev, .owl-next{ display: none;}
}
@media screen and (max-height: 300px) {
.title-box em{ display: none;}
}
.horizontal { display: inherit; }
.vertical { display: none; }
@media screen and (orientation:portrait) {
.horizontal { display: none; }
.vertical { display: inherit; }
}
@media screen and (max-width: 1030px) {
#index #section1 .header-box {background-image: url('../images/small/index-img1.jpg');}
#index #section2 .header-box {background-image: url('../images/small/index-img2.jpg');}
#mrt #section1 .header-box { background-image: url('../images/small/mrt-header.jpg');}
#mrt #section2 .header-box { background-image: url('../images/small/mrt-header2.jpg');}
#location #section1 .header-box {background-image: url('../images/small/location-header.jpg');}
#location #section2 .header-box {background-image: url('../images/small/location-header2.jpg');}
#location #section3 .header-box {background-image: url('../images/small/location-header3.jpg');}
#location #section4 .header-box {background-image: url('../images/small/location-header4.jpg');}
#location #section5 .header-box {background-image: url('../images/small/location-header5.jpg');}
#architecture .header-box { background-image: url('../images/small/architecture-header.jpg');}
/*#interior .header-box { background-image: url('../images/small/interior-header.jpg');}*/
#interior #section1 .header-box { background-image: url('../images/small/interior-header1.jpg');}
#interior #section2 .header-box { background-image: url('../images/small/interior-header2.jpg');}
#interior #section3 .header-box { background-image: url('../images/small/interior-header3.jpg');}
#brand #section1 .header-box { background-image: url('../images/small/brand-header.jpg');}
#brand #section2 .header-box { background-image: url('../images/small/brand-header2.jpg');}
#brand #section3 .header-box { background-image: url('../images/small/brand-header3.jpg');}
}
@media screen and (orientation:portrait) and (max-width: 800px) {
#index #section1 .header-box {background-image: url('../images/mobile/index-img1.jpg');}
#index #section2 .header-box {background-image: url('../images/mobile/index-img2.jpg');}
#mrt #section1 .header-box { background-image: url('../images/mobile/mrt-header.jpg');}
#mrt #section2 .header-box { background-image: url('../images/mobile/mrt-header2.jpg');}
#location #section1 .header-box {background-image: url('../images/mobile/location-header.jpg');}
#location #section2 .header-box {background-image: url('../images/mobile/location-header2.jpg');}
#location #section3 .header-box {background-image: url('../images/mobile/location-header3.jpg');}
#location #section4 .header-box {background-image: url('../images/mobile/location-header4.jpg');}
#location #section5 .header-box {background-image: url('../images/mobile/location-header5.jpg');}
#architecture .header-box { background-image: url('../images/mobile/architecture-header.jpg');}
/*#interior .header-box { background-image: url('../images/mobile/interior-header.jpg');}*/
#interior #section1 .header-box { background-image: url('../images/mobile/interior-header1.jpg');}
#interior #section2 .header-box { background-image: url('../images/mobile/interior-header2.jpg');}
#interior #section3 .header-box { background-image: url('../images/mobile/interior-header3.jpg');}
#brand #section1 .header-box { background-image: url('../images/mobile/brand-header.jpg');}
#brand #section2 .header-box { background-image: url('../images/mobile/brand-header2.jpg');}
#brand #section3 .header-box {background-image: url('../images/mobile/brand-header3.jpg');}
}