@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Lato);
@import url(https://fonts.googleapis.com/css?family=Frank+Ruhl+Libre:400,500,700);
@import url(https://fonts.googleapis.com/css?family=Noto+Serif+TC);
@import url(ElegantIcons/style.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-tel, a i, .icon-box, .img-box img, .img-over-box img, a:before, #fp-nav,form input { -webkit-transition: all 250ms ease-in; -o-transition: all 250ms ease-in; -moz-transition: all 250ms ease-in; transition: all 250ms ease-in; }
.hidden { opacity: 0; }
.visible { opacity: 1; }
.fade { display: none; }
.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(10n+1) {-webkit-animation-delay: 0.2s;  animation-delay: 0.2s;}
.delay-list li:nth-child(10n+2) {-webkit-animation-delay: 0.4s;  animation-delay: 0.4s;}
.delay-list li:nth-child(10n+3) {-webkit-animation-delay: 0.6s;  animation-delay: 0.6s;}
.delay-list li:nth-child(10n+4) {-webkit-animation-delay: 0.8s;  animation-delay: 0.8s;}
.delay-list li:nth-child(10n+5) {-webkit-animation-delay: 1.0s;  animation-delay: 1.0s;}
.delay-list li:nth-child(10n+6) {-webkit-animation-delay: 1.2s;  animation-delay: 1.2s;}
.delay-list li:nth-child(10n+7) {-webkit-animation-delay: 1.4s;  animation-delay: 1.4s;}
.delay-list li:nth-child(10n+8) {-webkit-animation-delay: 1.6s;  animation-delay: 1.6s;}
.delay-list li:nth-child(10n+9) {-webkit-animation-delay: 1.8s;  animation-delay: 1.8s;}
.delay-list li:nth-child(10n+10) {-webkit-animation-delay: 2.0s;  animation-delay: 2.0s;}
.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%;}
/*============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; }
/*============grids===============*/
.grid-large, .grid-middle, .grid-small, .grid-max, .grid-min, .grid-content { width: 90%; margin: 0 auto; position: relative; }
.grid-large { max-width: 1600px; }
.grid-middle { max-width:500px; }
.grid-small { max-width: 350px; }
.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%; }
/*============style===============*/
body { font-family: "Frank Ruhl Libre", Times, "Times New Roman", "Noto Serif TC", "儷宋 Pro", "LiSong Pro Light", "宋体", SimSun, serif; font-size: 1em; color: #fff; word-wrap: break-word; background: #777; }
.font-en, #header small{font-family: "Lato", Arial, Helvetica, "微軟正黑體", "Microsoft JhengHei", "儷黑 Pro", "LiHei Pro", sans-serif;}
p { font-size: 1em; line-height: 1.6em; }
p span, .br, h1 span, h2 span { display: inline-block; }
::selection { background: #333; color: #fff; }
a { color: #fff;}
a:hover { color: #e71e1d; }
a.button-line:before, .footer-info a:before{ position: absolute; content: ''; display: block; background-color: #e71e1d; bottom:0; left:50%; width: 0px; height: 2px;}
a.button-line:hover:before, .footer-info a:hover:before{ width: 100%; left:0;}
strong { font-weight: bold; }
em, i { font-style: normal; }
big { font-size: 1.1em; }
small { font-size: 0.85em; }
h1 { font-size: 48px;line-height: 1.15em; font-weight:bold;}
h2 { font-size: 34px; line-height: 1.4em;}
h3 { font-size: 22px; line-height: 1.6em;}
h4, h5, h6 { font-size: 1em; }
/*.title2{font-size: 34px;}*/
.nowrap{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.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;}
.no-space{ letter-spacing: 0 !important;}
.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-top{margin-top:35px;}
.text-bottom{margin-bottom:5px;}
.box-top{margin-top:50px;}
.box-bottom{ margin-bottom: 50px;}
.text-line, .footer-info li { position: relative; display: inline-block; padding-right: 10px; margin-right: 10px; }
.text-line:before, .footer-info li:before { position: absolute; content: ''; display: block; background-color: #b0c200; width: 1px; height: 18px; margin-top: -9px; right: 0; top: 50%;  filter: alpha(opacity=60); opacity: 0.6;}
/*============base===============*/
body, html { height: 100%; }
/*.wrapper { min-height: 100%; width: 100%; position: relative; }
.main {+min-height: 100%; position: relative; padding-bottom: 60px; width: 100%; }
#footer { position: relative; width: 100%; margin-top: -60px; height: 60px; z-index: 5;}*/
/*============header===============*/
/*.logo { position:absolute; display: block; z-index: 2; left: 3%; top: 3%; width: 20%; max-width: 170px; min-width: 100px;}*/
#header { position: fixed; display: block; top: 2%; right:2%; z-index: 101; text-align: right;-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);}
.button-icon a{position: relative; display: inline-block; width: 80px; height: 65px; padding-top: 15px; color: #fff; text-align: center; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;}
.button-icon i{ display: block;font-size: 26px; margin-bottom: 7px; }
.button-icon small{ display: block; font-size: 13px;}
.button-icon a:hover{ background: #e71e1d;}
/*============main===============*/
.img-bg { position: fixed !important; top: 0; left: 0; height: 100% !important; width: 100%; z-index: 0;background-size: cover; background-repeat: no-repeat; background-position: center center;}
.bg-white { background-color: #fff; }
.bg-green { background: url(../images/bg_Material.jpg);filter: alpha(opacity=90);opacity: 0.9;}
.bg-green2 { background-color: #e71e1d; }
.bg-pattern1 { background: url(../images/pattern1.jpg) repeat top left #fff; }
.bg-pattern2 { background: url(../images/pattern1.jpg) repeat top left #777; }
.section img{ width: 100%; height: auto;align-items: center }
.img-h img, img.img-h{ height: 100%; width: auto;}
.bg-img,.slide-bg .slide, .full-box{background-size: cover; background-repeat: no-repeat; background-position: center center;}
.text-box, .illustr-box{ position: absolute; display: block; z-index: 2;}
.illustr-box{ z-index: 3;}
.full-box,.full-3-12,.full-9-12, .full-6-12, .full-mobile{/*position: absolute;*/ left: 0; top:0; height: 100%; width: 100%;overflow: hidden;}
.full-right{ right: 0; left: auto;}
.full-3-12{ width: 25%; }
.full-9-12{ width: 75%; }
.full-6-12{ width: 50%; }

.img-container { position: relative; overflow: hidden; }
.img-container img { width: 100%; height: auto; }
.img-caption { position: absolute; display: block; bottom: 0; left:0px; padding: 15px; font-size: 15px; 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);*/ }
.img-caption i{ margin-right: 3px;}
.img-box, .img-over-box { position: relative; display: block; text-align: center; overflow: hidden; }
.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 { 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 { -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; width: 60px; height: 60px; background: #b0c200; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; }
.icon-box span:after { content: ''; display: block; text-align: center; font-size: 0.7em; }
.icon-box i { display: block; font-size: 5em; line-height: 60px; }
a:hover .icon-box { filter: alpha(opacity=85); opacity: 0.85; background-position: right top; }
a:hover .icon-box i { font-size: 2em; }

/*============button===============*/
.button-top { position: fixed; z-index: 6; right: 10px; bottom: 10px; margin-left: -50px; width: 50px; height: 50px; font-size: 12px; text-align: center; filter: alpha(opacity=0); opacity: 0; background: #b0c200; color: #fff; border-radius:50%;}
.button-top.active { filter: alpha(opacity=100); opacity: 1; }
.button-top:hover { bottom: 18px; color: #fff; }
.button-top i { font-size: 18px; display: block; line-height: 50px; }
.button-down i{position: absolute; bottom: 5%; left: 50%; margin-left: -30px; font-size: 36px; padding: 10px; color: #b0c200;}
.button-full{ position: absolute; display: block; left: 0; top:0; width: 100%; height: 100%; z-index: 3;}
.button-text{ display: block; font-size: 15px; line-height: 30px; height: 30px; padding: 0 10px; color: #fff; background-color: #96a900; border-radius:30px; }
.button-icon2{ display: block; font-size: 18px; line-height: 40px; height: 35px; width: 35px; text-align: center; color: #fff; background-color: #e81e1e; border-radius:20px; }
/*==============index==================*/
#index{ text-align: center;}
.index-logo{ position: relative; width: 30%; max-width: 105px; margin-left: auto; margin-right: auto; }
.index-logo .delay-list{ position: absolute; top:0; left: 0; width: 100%; height: 100%; }
.index-logo li{ position: absolute; top:0; left: 0;}
img.index-text{ width: 60%; max-width: 330px;}
img.index-logo-text{  width: 60%; max-width: 330px;}
/*==============section==================*/
.illustr1{ bottom:30px; left: 50%; margin-left: -50px; width: 100px;}
#section3 .text-box{ bottom:30px; left: 0; width: 100%; text-align: center;}
img.text1{ width: 70%; max-width: 277px;}
img.illustr2{width: 55px;}
#section4{background: url('../images/bg1.png') center bottom repeat;}
#section4 .text-box{bottom:15%; width: 95%; max-width: 400px; left: 50%; margin-left: -100px; text-align: right;}
img.title2{width: 25%; max-width: 100px; margin-bottom: 50%; margin-left:5%;}
img.text2{width: 25%; max-width: 200px;margin-bottom: 0; margin-left: 5%;}
.illustr3{position: absolute; width: 45%; max-width: 170px;margin-bottom: 35%; bottom: 0;}
.illustr3 .animated{position: absolute; left: 0; top:0;}
#section5 .text-box{ bottom:10px; right: 20px;width: 35%; max-width: 600px;min-width: 320px;}
.lightBox-img a{position: relative;}
#section6 .full-box{background-image: url('../images/interior-img1-2.jpg');}
#section6 .text-box{ bottom:0; left: 5%;width: 30%; max-width: 420px; min-width: 350px;}
#section7{background-image: url('../images/portfolio-img3.jpg');}
#section8 .full-box{background-image: url('../images/portfolio-img4.jpg');}
#section8 .text-box{ bottom:0; right: 0;width: 30%; max-width: 450px; min-width: 360px;}
#section9{background-image: url('../images/portfolio-img4-2.jpg');}
#section10{background-image: url('../images/portfolio-img5.jpg');}
#section11{background-image: url('../images/portfolio-img5-2.jpg');}
.iframe-googlemap{position: absolute; left: 0; top:0; height: 100%; width: 50%;overflow: hidden;}
/*============info===============*/
#info .grid-6-12{top: 50%; margin-top: -310px;}
#info .grid-small{padding: 10% 0;}
.iframe-googlemap iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
img.logo-text2{ width: 100%; max-width: 350px;}
img.logo2{ width: 50%; max-width:180px;align-items: center}
.info-text{position: relative; display: inline-block; border-top:solid 1px #fff; border-bottom:solid 1px #fff; margin-top: 7%;}
.text-add{display:block;font-size: 21px; padding: 20px 0 0 0;}
.text-tel{display:block; font-size: 50px;}
.info-title{ display: inline-block; font-size: 18px; background: #fff; color:#d0111b; padding: 0 8px;-webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; margin-right: 8px;}
.info-text .info-title{ position: absolute; top: -15px;}
#contact .grid-middle{ text-align: center;border:solid 1px #cccccc;border-radius:5px; padding-bottom:30px;margin-top: 90px; margin-bottom: 50px;}
#contact .grid-middle h2{ display: inline-block; margin-top: -25px; background: #777;}
#contact em{position: absolute; font-size: 14px; display: inline-block; padding: 0 5px; bottom: -10px; left: 50%;margin-left: -48px; background: #777;}
#contact form{ padding:0 5%;}
/*==============form==================*/
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% 8px 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% 8px 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 2px transparent; -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:#96a900; font-weight:bold;text-align: center; padding-left: 5px;}
form input:focus, form textarea:focus, form select:focus { border: solid 2px #96a900;}
form input.error, form textarea.error, form select.error { border: solid 2px #96a900; background-color:#f0f2dd; }
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:#96a900;  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:#b0c200;}
#result{padding-top: 30px; 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.85 !important; }
.pswp__caption__center { font-size: 15px !important; }
/*============jquery.fullPage===============*/
.fp-section{overflow: hidden;}
.fp-tableCell{ position: relative;overflow: hidden; }
.full-height .fp-tableCell{ display:block; }
#fp-nav ul li a span, .fp-slidesNav ul li a span{ background: #eee;}
.fp-controlArrow{width: 40px; height: 40px; border-radius:50%; color: #fff; text-align: center; line-height: 40px;}
.fp-controlArrow.fp-next, .fp-controlArrow.fp-prev{border-width:2px;border-color:#fff;width: 40px;}
/*============ie===============*/
.ie { position: fixed; display: block; top: 0; left: 0; z-index: 200; height: 100%; width: 100%; background:#333; }
.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 h1,.ie p { margin-bottom: 10px; }
.ie-close { position: absolute; display: block; width: 50px; height: 35px; right: 0; top: 0; text-align: center; padding-top: 15px; }
.ie , .ie a{color:#000;}
.ie a:hover{text-decoration: underline;}
.horizontal { display: auto; }
.vertical { display: none; }

@media screen and (orientation:portrait) {
.horizontal { display: none; }
.vertical { display: auto; }
/*============main===============*/
.ratio65-mobile, .ratio120-mobile{ width: 100%; height: 0; overflow: hidden;}
.ratio65-mobile img, .ratio120-mobile img{position: absolute;}
.ratio65-mobile{padding-bottom:65%;}
.ratio120-mobile{padding-bottom:120%;}
.height75-mobile{height: 75%;}
.full-mobile{ width: 100%;}
.img-w-mobile img{ height: auto; width: 100%;}
.img-h-mobile img{ height: 100%; width: auto;}
.box-top-mobile { margin-top: 8%;}
.box-bottom-mobile { margin-bottom: 8%;}
/*==============other==================*/ 
#section6 .full-box{background-image: url('../images/mobile/interior-img1-2.png');}
#section7{background-image: url('../images/mobile/portfolio-img3.jpg');}
#section8 .full-box{background-image: url('../images/mobile/portfolio-img4.png');}
#section9{background-image: url('../images/mobile/portfolio-img4-2.jpg');}
#section10{background-image: url('../images/mobile/portfolio-img5.jpg');}
#section11{background-image: url('../images/mobile/portfolio-img5-2.jpg');}
.img-mask:before{content: ''; position: absolute; left: 0; bottom: -2px; width: 100%; height: 140px; background: url('../images/pattern1-mask.png') repeat-x bottom left;}
}
@media screen and (orientation:landscape) {
}
@media screen and (max-width: 1500px),(max-height: 600px) {
.button-icon a{width: 65px;height: 55px;padding-top: 10px;}
.button-icon i {font-size: 20px;}
.button-icon small {font-size: 12px;}
.button-down i{margin-left: -22px;font-size: 24px;bottom: 1%;}
#info .grid-6-12{ margin-top: -230px;}
#info .grid-small {max-width: 285px;}
.text-add{font-size: 17px; padding-top: 15px;}
.text-tel{font-size: 41px;}
.info-title{font-size: 16px;}
.info-text .info-title {top: -12px;}
img.logo2{margin-bottom: 1px;align-items: center}
}
@media screen and (max-width: 1050px),(max-height: 600px) {
/*============main===============*/
h1{font-size: 36px;}
h2{font-size: 28px;}
p{font-size: 15px;}
.fp-controlArrow.fp-prev{left: 1%;}
.fp-controlArrow.fp-next{right:1%;}
.fp-slidesNav.bottom { bottom: 5px;}
#fp-nav.right {right: 5px;}
.box-top { margin-top: 8%;}
.box-bottom { margin-bottom: 8%;}
.text-top {margin-top: 25px;}
.text-bottom {margin-bottom: 25px;}
/*============other===============*/
.illustr1 { margin-left: -40px; width: 80px;}
img.illustr2 {width: 45px;}
#section4{ background: url('../images/bg2.png') center bottom repeat; background-size: cover;}
#section4 .text-box{margin-left: -200px; max-width: 330px;}
#info .grid-6-12{ margin-top: -210px;}
#info .grid-small {max-width: 250px;}
.text-add{font-size: 18px;}
.text-tel{font-size: 44px;}
.info-title{font-size: 14px;}
/*============form===============*/
#contact .grid-middle{ border: none;padding-bottom: 0;}
#contact .grid-middle h2{background:transparent;}
#contact em{display: none;}
form .input-column, form .input-row{ margin-bottom: 2px;}
form select {  width: 68%; margin-left: 31%; line-height: 46px; padding:0;}
form textarea { height: 100px;}
/*form label { position: relative; width:100%; text-align:left; height: 35px; line-height: 35px;}
form input[type="text"], form input[type="password"], form textarea,.input-box{ padding-left: 20px; }
form select { width: 95%; margin-left: 5%; padding-left: 0; }*/
}
@media screen and (max-width: 700px),(max-height: 600px){
.fp-controlArrow{ display: none;}
#header{top: 0; right: 0;width: 100%; text-align: center; background: #231815;}
.button-icon a{-webkit-border-radius: 0; -moz-border-radius: 0; border-radius:0;}
}
@media screen and (orientation:portrait),(max-width: 650px) {
.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%; }
.iframe-googlemap{position: relative; width: 100%; height: 35%; top:auto;}
#info .grid-small{padding-top: 90px;}
#info .grid-6-12{ margin-top: auto; top:auto;}
}
@media screen and (max-width: 360px){
.mobile-hide{ display:none;}
#section6 .text-box{width: 100%; min-width:auto; }
#section8 .text-box{width: 110%; min-width:auto; }
}
@media screen and (max-height: 800px){
#section6 .text-box {bottom: -20px;}
#section8 .text-box{bottom: -30px;}
}
@media screen and (max-height: 550px){
.section{min-height: 550px;}
#header {position:absolute;}
#info .grid-small {padding-left: 5%;}
}