@charset "utf-8";
@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(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, .hidden, a:before, a:after, .owl-prev, .owl-next, input, textarea, select, a i, .back-box, .icon-box, #nav, b:before, .button-text span, .text-more:before, .text-more:after, .text-line, .text-line:before{ -webkit-transition: all 250ms ease-in; -o-transition: all 250ms ease-in; -moz-transition: all 250ms ease-in; transition: all 250ms ease-in; }
.button-icon i{ -webkit-transition: all 100ms ease-in; -o-transition: all 100ms ease-in; -moz-transition: all 100ms ease-in; transition: all 100ms ease-in; }
.transition-1s, .img-box img, .img-over-box img, .header-img:before, .img-box:before, .img-over-box:before{ -webkit-transition: all 1000ms ease-out; -o-transition: all 1000ms ease-out; -moz-transition: all 1000ms ease-out; transition: all 1000ms ease-out;}
.transition-5s{ -webkit-transition: all 5000ms ease-out; -o-transition: all 5000ms ease-out; -moz-transition: all 5000ms ease-out; transition: all 5000ms ease-out;}

.img-bg .zoomout, .icon-box, .page a:hover,.footer-icon a:hover,.share-button a:hover{ -ms-transform: scale(1.3);-webkit-transform: scale(1.3);-moz-transform: scale(1.3);-o-transform: scale(1.3);transform: scale(1.3);}
a:hover .img-box img, a:hover .img-over-box img, .img-list a:hover, .button-icon a:hover{-ms-transform: scale(1.1);-webkit-transform: scale(1.1);-moz-transform: scale(1.1);-o-transform: scale(1.1);transform: scale(1.1);z-index: 1;}
.img-box img, .img-over-box img, .img-bg .loaded, a:hover .icon-box{ -ms-transform: scale(1);-webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);transform: scale(1);}
.button-top:hover{-ms-transform: translate(0,-10px); -moz-transform: translate(0,-10px); -webkit-transform: translate(0,-10px); -o-transform: translate(0,-10px); transform: translate(0,-10px);}

.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%;}
.particles { position: absolute; width: 100%; height: 100%; z-index: 0; }
/*============iframe===============*/
.iframe-16x9 { position: relative; padding-bottom: 56.25%; 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%;}
.iframe-16x9:before{ content: ''; position: absolute; top:0; right: 0; width: 3px; height: 100%; background:#fff; z-index: 1;}
/*==============text-ver==================*/
.text-ver{ 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; white-space: nowrap;}
.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; }
@media screen and (min-width: 980px){.text-ver-computer{ 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; white-space: nowrap;}}
/*============grids===============*/
.grid-large, .grid-middle, .grid-small, .grid-max, .grid-min, .grid { /*width: 80%; margin: 0 auto;*/ position: relative; }
.grid-max { max-width: 1500px; }
.grid-large { max-width: 1330px;}
.grid-middle { max-width: 1200px;}
.grid-small { max-width: 720px;}
.grid-min { max-width: 400px; }
.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, .grid-12-12 { 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-12-12 { width: 100%; }
.grid-3-8 { width: 38%; }
.grid-5-8 { width: 62%; }
.grid-1-2 { width: 47%; }
.grid-space{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-right: 4%;}
.grid-right{ float: right;}
.grid-aside{ position: absolute;}
/*============style===============*/
body { font-family:"Frank Ruhl Libre","Noto Serif TC", Times,"Times New Roman", "儷宋 Pro", "LiSong Pro Light", "宋体", SimSun, serif; font-size: 1em; word-wrap: break-word; overflow-x: hidden; color: #333;}
p{ font-size: 1em; line-height: 1.65em; letter-spacing: 0.05em; margin-bottom: 10px; }
p span, h1 span, h2 span, h3 span, h4 span, .br, li span, b span, em span{ display: inline-block; }
::selection { background: #000; color: #fff; }
a { color: #333; }
a:hover { color: #c30d23;}
strong { font-weight: bold; }
em, i { font-style: normal; }
big { font-size: 1.125em; }
small { font-size: 0.9375em; }
h1{ font-size: 2.5em; line-height: 1.25em; }
h2 { font-size: 2.25em; line-height: 1.25em;}
h3 { font-size: 1.5em; line-height: 1.4em; }
h4 {font-size: 1.25em; line-height: 1.25em;}
h5, h6 { font-size: 1em; }
.title1 { font-size: 2.5em; }
.title2 { font-size: 2.25em;}
.title3 { font-size: 1.875em;}
.title4 { font-size: 1.5em;letter-spacing: 0.1em; line-height: 1.4em;}
.text0 { font-size: 1em;letter-spacing:0.05em;line-height: 1.6em;}
.text1 { font-size: 1.125em; line-height: 1.65em;}
.text2 { font-size: 1em;letter-spacing:0.2em;}
.text3 { font-size: 15px; line-height: 24px;}
.text4 {letter-spacing:0.2em;color: #999;}
.text-small { font-size: 14px;}
.text-en-small{display: block;font-size: 12px; line-height: 18px;color: #999;}
.line-height{ line-height: 1.75em;}
.text-spacing-normal{letter-spacing:0em;}
.text-spacing2{letter-spacing:0.2em; line-height: 1.4em;}
.text-block{display:block; font-weight: normal;}
.color-white { color: #fff; }
.color1 { color: #c30d23; }
.color2 { color: #333; }
.color3 { color: #666;}
.color4 { color: #999; }
.classic-text h2,.construction-list .info-list li, #index-portfolio h2{ 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;}
.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:25px;}
.text-bottom{margin-bottom:25px;}
.text-top2{margin-top:35px;}
.text-bottom2{margin-bottom:35px;}
.box-top{margin-top:50px;}
.box-bottom{ margin-bottom: 50px;}
/*============base===============*/
body, html { height: 100%; }
.wrapper { min-height: 100%; width: 100%; position: relative; /*overflow: hidden;*/padding-top: 1px; margin-top: -1px; }
.main { position: relative;/* padding-bottom: 300px;*/ width: 100%; background-color: #fff;z-index: 9;}
#footer { position: relative; width: 100%;/* margin-top: -300px;*/ min-height: 300px; z-index: 15; }
/*============nav===============*/
.logo { position:fixed; display: block; width: 50px; height: auto; top:25px; right: 30px; z-index: 11;background: #fff; padding:5px; padding-bottom: 10px;-webkit-border-radius: 30px;-moz-border-radius: 30px; border-radius: 30px;}
.logo img{ width:100%; height:auto;}
.logo-horizontal { display: none; }
.logo-vertical { display: inline; }
#header { position: absolute; display: block; height: 100%; top: 0px; right: 0px; z-index: 9; overflow: hidden; width:385px;}
.content-page #header {z-index: 10;}
#nav { position: absolute;height: 100%; width:385px; background:#fff; overflow: hidden;top: 0px; right: 0px; z-index: 10;}
#nav ul{ position: relative; height: 100%; width:240px; margin-left:30px; margin-top:100px;}
#nav li { position: absolute; display: block; width: 16.6%; height: 100%; text-align: center;}
#nav li:before{ content:''; position: absolute; display: block; left:50%; top: 0; width: 1px; height: 100%; background: #ddd; z-index: 0;}
#nav-about{ left:83%;}
#nav-hot{ left:66.4%;}
#nav-portfolio{ left: 49.8%;}
#nav-news{ left: 33.2%;}
#nav-construction{ left: 16.6%;}
#nav-contact{ left: 0;}
#nav li a{ position:relative; display:inline-block; background:#fff;color:#000; width: 20px; padding: 0 10px 20px 10px; font-size: 16px; line-height: 17px; text-align: center;}
#nav li div{ display:inline-block;}
#nav li div a{color:#999;}
#nav li div a:before{ content:'‧'; position: absolute; display: block; left: 0; top:-20px; width: 100%; color:#999;}
#nav li div a:first-child:before{ display: none;}
#nav li.active > a, #nav a.active, #nav li a:hover{color: #c30d23;}

.nav-toggle{ position: fixed; display: block; right: -60px; top:220px; width: 38px; height: 38px; padding:11px; text-align: center; color: #000; background: #fff; z-index: 11;  cursor:pointer;-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;}
.nav-toggle em{ display: block; width: 100%; font-size: 12px; line-height: 12px; position: absolute; bottom: 8px; left: 0px; letter-spacing: 0.1em; font-weight: 500;}
.nav-toggle:hover{ color: #c30d23;}
.nav-toggle span ,.nav-toggle span:before ,.nav-toggle span:after{ display:block; width:100%; background:#000; height:3px;}
.nav-toggle span{ position:relative; top:25%; }
.nav-toggle span:before ,.nav-toggle span:after{ content:''; position:absolute; }
.nav-toggle span:before{ top:-.4em; }
.nav-toggle span:after{ bottom:-.4em; }
body.active .nav-toggle span{ background:none; transition:background .3s .6s;}
body.active .nav-toggle span:before{ top:0; transform:rotate(135deg); transition:top .2s .1s,transform .2s .6s;}
body.active .nav-toggle span:after{ bottom:0; transform:rotate(225deg);  transition:bottom .2s .1s,transform .2s .6s;}

body.sticky #header{ position: fixed; width:0;}
body.active #header{ position: fixed; width:390px;}
body.sticky #nav{ right: -400px;}
body.active #nav{right: 0px;}
body.sticky.active #nav{-moz-box-shadow: 0px 0px 15px rgba(0,0,0,0.1);-webkit-box-shadow: 0px 0px 15px rgba(0,0,0,0.1);box-shadow: 0px 0px 15px rgba(0,0,0,0.1);}
body.sticky .nav-toggle{right: 30px;}
body.active .logo,body.active .nav-toggle{z-index: 20;}
body.active #header{z-index: 19;}
/*============footer===============*/
#footer { background: url('../images/bg-dot2.gif') top center; color: #ccc; font-size: 15px; line-height: 20px;}
#footer a{ color: #ccc;}
#footer a:hover{ color: #c30d23;}
#footer .grid-middle{padding-top: 40px;}
.footer-about,.footer-logo, #footer .footer-info, .footer-nav{ position: relative; display: block; float: left; width: 32%; padding: 20px 3% 20px 0;}
.footer-nav{width: 17%; padding-right: 0;}
.footer-logo{width: 10%; padding-bottom: 35px;}
.footer-logo img{width: 100%;max-width: 80px; height: auto;}
#footer em{ display: block; font-size: 24px; margin-bottom: 25px;}
#footer .footer-about em{margin-bottom: 35px;}
.footer-about p{ max-width: 330px;}
.footer-icon{ font-size: 20px; line-height: 40px;}
.footer-icon a{ display:inline-block; width: 40px; text-align: center;}
.footer-info li{position: relative; display:block; padding-left: 30px; min-height: 40px;}
.footer-info i{position: absolute; left: 0; top:12px;display: block; font-size: 16px;}
.footer-info b{ display: inline-block;padding: 10px 0; font-weight: normal;}
.footer-copyright { font-size: 13px; color:#666; line-height: 20px;padding: 15px 25px; text-align: right;}
#footer .footer-copyright a{ color:#666;}
#footer .footer-copyright a:hover{ color:#fff;}
.footer-nav a{ display: inline-block; width: 50%; max-width: 85px;min-width: 70px; padding: 10px 0;}
/*============html-edit===============*/
.html-edit { text-align:left; line-height: 1.65em;}
.html-edit a{ color:#c30d23; text-decoration:underline;}
.html-edit a:hover { color: #fff; background:#c30d23;text-decoration:none;}
.html-edit img { max-width: 100%; height:auto; }
.html-edit h1{ font-size: 1.25em;}
.html-edit li { list-style: outside; margin-left: 30px; }
.html-edit ul li { list-style-type: disc; }
.html-edit ol li { list-style-type: decimal; }
.html-edit p,.html-edit h1,.html-edit h2,.html-edit h3{ margin-bottom: 10px;}
.html-edit p{line-height: 1.75em;}
/*============main===============*/
.grid-header{ position: relative; margin-right: 420px; width: auto;}
.grid-content{position: relative; padding-right: 420px;padding-left:10%; width: auto; }
.header-top{ margin-top: 100px;}
.content { position: relative; padding-top: 110px; padding-bottom: 120px;}
.header-img{position: absolute; width: 100%; height: 55%; background-repeat: no-repeat; background-size: cover; background-position: center center; }
.header-img:before{content: ''; position: absolute; display: block; width: 100%; height: 100%; background: #fff; top:0; right: 0;}
.header-img.loaded:before{ width: 0;}
.title-box{position: absolute;left: 15%;  bottom: -280px; height: 250px; z-index: 10;}
.title-box h2{ font-size: 30px; line-height: 36px; margin-left: 20px;}
.title-box h2 small{ font-size: 14px;}
.title-box em{ display: block; font-size: 12px; line-height: 12px; color: #999;}
.bg-dot{background: url('../images/bg-dot1.gif') center top repeat #fff; background-attachment: fixed;}
.bg-line{background: url('../images/bg-line1.png') right 380px no-repeat #fff; background-attachment: fixed;}
.mobile .bg-line, .mobile .bg-dot, .mobile .about-illustr5{background-attachment:inherit;}
.section-container{ position: relative; padding-bottom: 50px; padding-top: 50px;}
.section-box{ position: relative; padding-bottom: 70px; padding-top: 70px;}
.column-box { float: left; display: block; position: relative; }
.column-space { margin-right: 4%; margin-bottom: 35px;}
.text-box{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.content-top{ margin-bottom: 40px;margin-top: -10px;}
.content-top a{ margin-left: -5px;}
.content-top strong{ border-left: solid 1px #ccc; padding-left: 10px; margin-left: 5px; font-weight: normal;}
.content-info{margin-top: 60px;}
.content-info h3{margin-bottom: 10px;}
.content-page .main { padding-bottom: 300px; }
.no-content-bottom .main{ padding-bottom: 0px; }
.content-bottom{ position: relative; margin-top: -210px; padding-top: 40px; padding-bottom: 40px;z-index: 9;}
.content-bottom li{float: left; margin-right: 7%; margin-bottom: 40px;}
.content-bottom small{ display: block; margin-bottom: 15px;}
.content-bottom small i{ margin-right: 7px;}
.content-text{position:relative;}
.content-text .button-icon{position: absolute; top:0; right: 0;}
.imgtext-item{ position: relative; display: block; margin-top: 70px; clear: both;}
.imgtext-item .text-box{padding: 4% 0 0 5%;}

.img-caption{ position:absolute; display:block; bottom:0; font-size:0.95em; line-height: 1.4em; color:#fff; z-index:1; left:0; padding: 0 10px; width: 100%; background: url(../images/bg-alpha4.png) center center repeat; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-align: left;}
.img-caption2{ position:relative; display:block; font-size:0.95em; line-height: 1.4em; text-align: center; color:#000; margin: 10px 0; }
.img-box,.img-over-box{ position:relative; display: block; text-align:center; overflow:hidden; }
.img-box{background: url(../images/img-bg.jpg) center center no-repeat #ddd; background-size: cover;}
.img-box:before, .img-over-box:before{content: ''; position: absolute; display: block; width: 100%; height: 100%; background: #fff; top:0; right: 0; z-index: 1;}
.mobile .img-box:before, .mobile .img-over-box:before{width:0;}
.img-box.visible:before, .img-over-box.visible:before{width:0;}
.img-box img,.img-over-box img{ width:100%; height:auto;}
.img-box img{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;}
.img-box.height img{ width:auto; height:100%; }
.video .img-box:before, .video .img-over-box:before, .img-list .video:before{ content:''; background: url(../images/icon-video.png) center center no-repeat; position:absolute; display:block; height:100%; width:100%; z-index:1;}
.back-box{ position: absolute; display: block; top:0; left: 0; width: 100%; height: 100%; filter: alpha(opacity=0); opacity: 0; z-index:1; background-color: rgba(204,0,0,0.8); }
a:hover .back-box, .back-box.active{ color: #fff; filter: alpha(opacity=100); opacity: 1;}
.back-box.active{background-color: rgba(0,0,0,0.5);}
a:hover .back-box.active{background-color: rgba(204,0,0,0.8);}
.vertical-box, .icon-box, .num-box{ position: absolute; display:block; top: 0px; right: 0; bottom: 0; left: 0; margin: auto; height: 50px; color:#fff; filter: alpha(opacity=0); opacity: 0; text-align:center;}
.back-box.active .num-box{filter: alpha(opacity=100); opacity: 1;}
.icon-box{ height: 60px; width: 60px; line-height: 60px; background:#c30d23; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius:50%;}
a:hover .vertical-box, a:hover .icon-box{ filter: alpha(opacity=100); opacity: 1;}
a:hover .vertical-box i{ margin-top: -10px;}
.img-box i, .img-over-box i, .img-list i{display:block;font-size:45px; padding-bottom: 10px;}
.img-box em, .img-over-box em, .img-list em{display:block;font-size:12px; line-height: 12px; letter-spacing: 0.1em;}
.img-box b, .img-over-box b, .img-list b{display:block;font-size:14px; line-height: 20px; font-weight: normal;}
.img-box big{display:block;font-size:40px; line-height: 40px;}

.grid-item{ position:relative; display:block; float:left; width:100%; padding-bottom: 80px;}
.grid-item a:hover, .index-item a:hover, .construction-grid2 a:hover{color: #000;}
.text-date{ display: block; margin-top: 5px;}
.text-year, .text-year-ver{position: relative; display:block; font-size: 30px; line-height: 36px; letter-spacing: -0.05em; z-index: 1;}
.text-year:before, .text-year-to:before{content: 'year'; display:block; position: absolute; left: 0; bottom: -22px; width: 100%; font-size: 16px; letter-spacing: 0.05em; white-space: nowrap;}
.text-year-ver{ width:80px; text-align: center; }
.text-year-ver span{display: block;}
.text-year-from:after{content: ''; display:block; position:relative; margin: 0 auto; width:2px; height:25px; background: #333; }
.icon-new small:after, .icon-hot small:after{content: 'NEW'; display: inline-block; color:#fff; background:#c30d23; font-size:12px; letter-spacing: 0; padding: 0 5px; margin-left: 5px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius:10px;vertical-align: middle;}
.icon-hot small:after{content: 'HOT'; color:#fff; } 
.text-more{position: relative; padding-bottom: 35px;}
.text-more:before{content: '更多'; display: block; color:#c30d23; position: absolute; left: 40px; bottom: 0; font-size: 15px;line-height: 15px; letter-spacing: 0.2em;white-space: nowrap;}
.text-more:after, .text-line:before{content: ''; display:block; background:#f295a0; width: 35px; height: 1px; position: absolute; left: 0; bottom: 7px;}
.text-more:before,.text-more:after{display: none;}
a .text-more:before,a .text-more:after{display: block;}
a:hover .text-more:before{left: 45px;}
a:hover .text-more:after{width: 40px;}
.text-line{position: relative; padding-left: 30px;color:#c30d23; font-size: 15px;line-height: 15px;letter-spacing: 0.1em;}
.text-line:before{width: 25px;}
a:hover .text-line{padding-left: 35px;}
a:hover .text-line:before{width: 30px;}

.info-list{ position: relative; /*background: #fff;*/}
.info-list li{ position: relative; display: block; padding:12px 0 4px 0; border-bottom:solid 1px #ddd;/* min-width: 280px;*/}
.info-list small{ position: absolute; display: block; left: 0; top:12px; font-size: 15px; color: #999;}
.info-list strong{ display: block; line-height: 1.4em; padding-left:72px; font-weight: normal;}
.info-list i{margin-left:5px; }
.info-list-3{width: 103%;}
.info-list-3 li{ float: left; width: 30%; margin-right: 3%;}
.text-tel strong{ font-size: 24px; line-height: 24px; color: #c30d23;}
.text-tel small{top:auto; bottom:5px;}
.computer-img{ display:block; opacity: 1 !important;}
.mobile-img{ display:none; opacity: 0 !important;}
/*============button===============*/
.underline b{position: relative;display:inline-block;}
.underline b:before{ position: absolute; content: ''; display: block; height: 2px; width: 0px; bottom: 0px; left: 50%; background-color:#c30d23; z-index: 1; }
.underline.left a b:before{ left: 0;}
.underline a:hover b:before, .underline a.active b:before{width: 100%; left: 0%;}
.border-line a{overflow: hidden;}
.border-line a:before, .border-line a:after{content: ''; position: absolute; border: solid 1px transparent; width: 0; height: 0;}
.border-line a:before, .border-line a:hover:before{left: 0; top:0;}
.border-line a:after, .border-line a:hover:after{right: 0; bottom: 0;}
.border-line a:hover:before, .border-line a:hover:after{ width: 100%; height: 100%;}
.border-line a:hover:before{ border-top: solid 1px #c30d23; border-left: solid 1px #c30d23;}
.border-line a:hover:after{ border-bottom: solid 1px #c30d23; border-right: solid 1px #c30d23;}

.category-list{ width: 100%; margin-bottom: 50px; margin-left: -2%;}
.category-list a{ position:relative; display: inline-block;line-height: 30px; padding: 5px 2%; letter-spacing: 0.1em;}
.category-list a:hover, .category-list a.active{color: #c30d23;}

.button-icon a, a.button-icon, a .button-icon{ position: relative;display: block;float: left; width: 60px; height: 47px; padding-top: 13px; text-align:center; overflow:hidden; font-size:15px;line-height: 18px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;color: #666; border: solid 1px #ddd; margin-right: 5px;}
.button-icon i{ display:block; font-size: 36px; line-height: 36px; height: 36px; overflow:hidden; margin: 10px 0 5px 0; color: #c30d23;}
.button-icon a:hover i, a.button-icon:hover i, a:hover .button-icon i{ color: #fff;}
.button-icon i.num{ font-size:40px; font-weight: 200; margin-bottom: 0;}
.button-icon a:hover, a.button-icon:hover, a:hover .button-icon{ background-color:#c30d23; color: #fff;}
.button-icon-text a, a.button-icon-text, a .button-icon-text{ position: relative; display:inline-block; background: #c30d23; color:#fff; font-size: 16px; line-height:24px; padding: 8px 35px; text-align: center; text-decoration:inherit; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px;}
a.button-icon-text, a .button-icon-text{ display:block; width: 140px; padding: 8px 0px;}
.button-icon-text i{display:inline; margin-left: -20px; margin-right: 3px; font-size:20px; filter: alpha(opacity=0); opacity: 0;vertical-align: middle;}
.button-icon-text a:hover i, a.button-icon-text:hover i, a:hover .button-icon-text i{ margin-left: -10px; filter: alpha(opacity=100); opacity: 1;}
.button-text a, a.button-text, a .button-text{ position: relative; display:inline-block; text-decoration:inherit;color: #c30d23; padding: 8px 0;}
.button-text span{ display: inline-block; padding: 0 8px;-webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius:20px; }
.button-text a:hover span, a.button-text:hover span, a:hover .button-text span{ color: #fff; background:#c30d23;}

.share-button{margin-left: -10px;}
.share-button a{ position: relative; float:left; display:block; width:45px; height:45px; text-align:center; color:#333;}
.share-button i{ font-size:28px; line-height:45px;}
.share-button span{ display: block; position:absolute; top:0; left:0;bottom:0; right:0; margin:auto; width: 30px; height: 30px; overflow: hidden;}
.share-button img{ position:absolute; left: 0; top:0; width: 60px; height: 30px;}
.share-button a:hover img{left: -30px;}
.share-button a:hover .fa-facebook{ color:#3b5998;}
.share-button a:hover .fa-google-plus{ color:#df493a;}
.share-button a:hover .fa-twitter{ color:#1da1f3;}
/*a:hover .fa-line{ background:#00b900;}*/

a.button-top { position: fixed; z-index: 9; right: 2%; bottom: 30px; display: block; width: 50px; height:50px; line-height: 25px; font-size:12px;text-align:center; margin: 0 auto;overflow:hidden;filter: alpha(opacity=0); opacity: 0; color:#000 !important;}
a.button-top.active { filter: alpha(opacity=100); opacity: 1; }
.button-down{ position:absolute; display:block; top: -10px; right: -50px; width:50px; height:50px; z-index:1; text-align:center; background:url('../images/arrow-down.png') no-repeat center center;}
.button-down:hover{ top:0;}

#audio-button{position:absolute; right:35px; bottom: 15px; z-index:10;}
#audio-button a{ display:block; width: 50px; padding-top:5px; height: 45px; overflow: hidden; font-size:12px; text-align:center;}
#audio-button i{font-size:20px;}
/*============page===============*/
.page { width: 100%; margin-top: 30px;}
.page a { padding: 0 5px; min-width:30px; height: 40px; line-height: 40px; display: inline-block; margin:0 2px;vertical-align: middle; text-align: center;}
.page a:hover,.page a.active { color: #c30d23;}
.page-prev,.page-next{ font-size: 24px;}
/*==============index==================*/
#index .grid-header{min-height: 400px;}
.index-banner-text{ margin: 50px 80px 0 auto; float: right;}
#index-banner .img-box{ padding-bottom: 79%;}
#index-news .img-box{ padding-bottom: 56.25%;}
#index-portfolio .text-box{padding: 7% 0 0 7%;}
.hot-text {padding: 4% 0 5% 5%;}
.owl-carousel.off {margin-bottom: -50px;}
.owl-carousel.off .index-item{margin-bottom: 60px;}
/*==============about==================*/
#about .header-img{background-image: url('../images/about-head.jpg');}
#about .content{padding-bottom: 0;padding-right: 8%;}
.about-container{position: relative; width: 100%; max-width: 1320px;/*padding-right: 15%;*/ background: url('../images/about-line.gif') no-repeat left 120px;}
.about-section{position: relative; display: block; width: 100%; clear: both;}
.about-text h1{font-size: 36px; line-height: 50px; letter-spacing: 0.1em;}
.about-text em{display: inline-block;font-size: 24px;color: #999; margin-bottom: 10px;}
.about-text p, .about-text2 p{background: #fff;}
.about-img{ width: 100%; height: auto;}
.about-o,.about-n,.about-e{position: absolute; z-index: 1;}
#about-section1{ height: 1100px;}
.about-o{ left: 100px; top:0px; max-width:348px;}
#about-section1 .about-img{width: 20%; max-width: 234px; position: absolute; left: 7%; top:340px;}
#about-section1 .about-text{ padding-top: 340px; padding-left: 30%;}
#about-section1 p{ max-width: 800px;}
#about-section2{ height: 1030px;}
.about-n{ top:0px; left: 12%; max-width:350px; }
#about-section2 .about-img{position: absolute; left: 0; top: 0; max-width: 329px; margin-left: 890px; margin-top:110px;}
#about-section2 .about-text{ padding-top: 140px; padding-left:560px;}
#about-section2 p{ max-width: 280px;}
#about-section3 { float:right; max-width: 1000px; height: 715px;}
.about-e{ top:0px; left: 300px; max-width:300px;}
#about-section3 .about-img{ position: absolute; max-width: 380px;top: 0;left: 0;}
#about-section3 .about-text{ padding-top: 0px; padding-left:550px;}
#about-section3 .about-text2{ max-width: 370px;padding-left: 640px;}
#about-section4 .about-img{max-width: 650px; margin: 0 auto;}
#about-section4{text-align: center;}
#about-section4 .about-text{ display: block; background:#c30d23; color: #fff; width: 400px; height: 300px; padding-top: 100px; margin: 0 auto;-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;}
#about-section4 em{ color: #fff; border-bottom: solid 2px #fff;line-height: 30px; padding-bottom: 12px; margin-bottom: 17px;}
.about-text em big{ font-size: 55px;}
.about-text em small{font-size: 26px;}
#about-section4 p{ margin: 40px 0 70px 0;}
.about-illustr5{ display: block; width: 100%; height:700px;background: url('../images/about-illustr5.jpg') center top; background-size: cover; background-attachment: fixed;}
/*==============hot==================*/
#hot .header-img{background-image: url('../images/hot-head.jpg');}
.hot-list .grid-item:nth-child(even) .img-over-box{float: right;}
.hot-list .text-box {padding: 4% 5% 0 5%;}
.hot-list .button-icon{float: left; width: 100%;}
.hot-list,.classic-list,.portfolio-list,.construction-list{ margin-bottom: -60px;}
/*==============classic==================*/
#classic .header-img{background-image: url('../images/classic-head.jpg');}
.classic-text {position: relative; padding-top: 10%;}
.classic-list .grid-item{ width: 25%; margin: 0 4%;}
.classic-list .text-year-ver{position: absolute; right: -57px; top:-35px;}
.classic-list .img-box{ padding-bottom: 100%;}
/*==============portfolio==================*/
#portfolio .header-img{background-image: url('../images/portfolio-head.jpg');}
.portfolio-list .grid-item{padding-bottom: 40px; min-height: 150px;}
.portfolio-list .grid-item:before{ content: ''; position: absolute; display: block; height: 100%; width: 200px; border-left: solid 1px #ddd; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;left: -25px;}
.portfolio-list .grid-item:nth-child(even):before{border-left:none;border-right: solid 1px #ddd;}
.portfolio-list .img-box{position: absolute; width: 150px; padding-bottom: 150px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;}
.portfolio-text{ padding: 3% 0 0 190px;}
.portfolio-text .info-list{ margin-top: -15px;margin-bottom: 35px;}
/*==============news==================*/
#news .header-img{background-image: url('../images/news-head.jpg');}
.news-list .text-box{ padding: 2% 0 0 4%;}
.news-list small{ display: block; width: 100%; margin-bottom: 4%;}
.news-list p{ max-width: 380px;}
.news-list .img-box{ padding-bottom: 56.25%;}
.news-grid1,.news-grid2{position: relative; float: left;}
.news-grid1{width: 33%; max-width: 480px;}
.news-grid2{width: 66%;}
/*==============construction==================*/
#construction .header-img{background-image: url('../images/construction-head.jpg'); background-position: center left;}
#construction-content .main .grid-middle {padding-bottom: 100px;}
.construction-item{ position: relative; margin-bottom: 60px;}
.construction-item .text-box{padding: 2% 0 0 3%;}
.construction-item small{ display: block; margin-bottom: 15px;}
.construction-grid1,.construction-grid2{position: relative; float: left;}
.construction-grid1{width: 75%;}
.construction-grid2{width: 25%;}
.construction-list .text-box{padding-top: 0;}
/*==============contact==================*/
#contact .header-img{background-image: url('../images/contact-head.jpg'); background-position: center left;}
.contact-img{ width: 100%; max-width: 317px; height: auto;}
/*==============repair==================*/
#repair .header-img{background-image: url('../images/repair-head.jpg'); background-position: center right;}
.repair-img{ width: 100%; max-width: 223px; height: auto;}
/*==============form==================*/
form { position: relative; display: block; width:84%; padding: 8%; background: #fff;-moz-box-shadow: 0px 0px 15px rgba(0,0,0,0.1);-webkit-box-shadow: 0px 0px 15px rgba(0,0,0,0.1);box-shadow: 0px 0px 15px rgba(0,0,0,0.1);}
form .input-column,form .input-row, .hide-box{ position: relative; display: block; line-height:0; margin:0; width:100%; border-bottom: solid 1px #ddd;}
form .input-column,form .input-row{ min-height: 50px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
form .input-column{float:left; width:48%; margin-right: 2%;}
.input-text{ position: relative; display: inline-block; min-height: 20px; line-height: 24px; margin:0; padding: 13px 0; color: #666;}
.input-text a{ display:inline-block;}
form label { position: relative; height: 20px; padding-top: 10px; line-height: 20px; display: block; font-size:16px; color: #000;}
form label em{ font-size: 12px; color: #999; padding-left: 5px;}
form input[type="text"], form input[type="password"], form select, form textarea, .input-box{ line-height: 20px; padding-top: 15px; padding-bottom: 15px; padding-left:12px; height: 50px; width: 100%; background-color:transparent; border: solid 1px transparent; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color:#666;}
form textarea { height: 150px; line-height: 24px; padding-top: 5px;}
form select { line-height: 50px; padding-left:10px;padding-top: 12px;}
.input-box{ line-height: 26px; min-height: 50px; height:inherit; padding-top: 10px;}
form small {font-size:20px; width: 15px; display: inline-block; color:#c30d23; font-weight:bold; }
form input[type="text"]:focus, form input[type="password"]:focus, form textarea:focus, form select:focus { }
form input[type="text"].error, form input[type="password"].error, form textarea.error, form select.error { border-bottom: dotted 2px #c30d23; }
.rand-img { position: absolute; right: 1px; bottom: 1px; width:110px; height:48px;cursor: pointer;}
input[type="reset"], input[type="submit"], #submit, #reset,.submitBTN{width:100%; height: 45px; display: inline-block; text-align: center; font-size:16px; cursor: pointer; background:#c30d23; color:#fff; -webkit-border-radius: 25px; -moz-border-radius:25px; border-radius: 25px;}
input[type="reset"], #reset{background:#999;}
input[type="submit"]:hover,input[type="reset"]:hover, input[type="reset"]:focus, input[type="submit"]:focus, #submit:hover, .submitBTN:hover{}
input[type="button"], input[type="file"], input[type="button"]:focus, input[type="file"]:focus{ background:transparent; color:#c30d23; cursor: pointer; font-size:16px;padding-right:5px;text-decoration: underline; }
.input-button{ width: 102%; margin-top: 15px;}
.input-button-column{position: relative; display: block; line-height:0; margin:0; float:left; width:48%; margin-right: 2%;}
@-webkit-keyframes autofill { to {color: #000; background: transparent;} }/*Change Chrome fill*/
input:-webkit-autofill {-webkit-animation-name: autofill;-webkit-animation-fill-mode: both;}
.hide-box p{ padding: 0 0px 15px 0px; color: #333;}
.form-link{ color: #c30d23; text-decoration: underline; display: inline-block;}
.form-link:hover{ text-decoration: none;}
.pswp-box { position: absolute; display: block; top: 0px; right: 0; bottom: 0; left: 0; margin: auto; width: 85%; max-width: 500px;height: 300px; background-color: #fff; padding: 40px; border: solid 1px #ddd; text-align: left; }
/*==============fileupload==================*/
#files p, .progress-bar p{ margin:0; line-height:1.5em; letter-spacing:0; margin-bottom:10px; font-size:0.9em;}
.progress {height: 10px; margin: 10px 0; overflow: hidden; background-color: #ccc; border-radius: 4px; display:none;}
.progress-bar { height:10px; background: #c30d23; width:0%; margin-bottom:10px; font-size:0.9em; line-height:1.5em; color:#fff; overflow:hidden; white-space: nowrap; text-overflow: ellipsis;}
.progress-bar {
	background-image: -webkit-linear-gradient(45deg, rgba(255,255,255,.3) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.3) 50%, rgba(255,255,255,.3) 75%, transparent 75%, transparent);
	background-image: -o-linear-gradient(45deg, rgba(255,255,255,.3) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.3) 50%, rgba(255,255,255,.3) 75%, transparent 75%, transparent);
	background-image: linear-gradient(45deg, rgba(255,255,255,.3) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.3) 50%, rgba(255,255,255,.3) 75%, transparent 75%, transparent);
	-webkit-background-size: 40px 40px;	background-size: 40px 40px;
	-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);	box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
	-webkit-animation-duration: 1s;	animation-duration: 1s;
	-webkit-animation-name: progress-bar-stripes;	animation-name: progress-bar-stripes;
	-webkit-animation-iteration-count: infinite;	animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;	animation-timing-function: linear;
}
@-webkit-keyframes progress-bar-stripes {
  from  { background-position: 40px 0; }
  to    { background-position: 0 0; }
}
@keyframes progress-bar-stripes {
  from  { background-position: 40px 0; }
  to    { background-position: 0 0; }
}     
/*============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: 0; height:40px; width:40px; line-height: 40px; z-index:1; text-align:center; color: #999;}
.owl-prev:hover, .owl-next:hover{color: #c30d23;}
.owl-prev i, .owl-next i{font-size:20px;line-height: 40px;}
.owl-prev{ right:40px;}
.owl-next{ right:0px;}
.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: right; margin-right: 90px; margin-top:20px; -webkit-tap-highlight-color: transparent;}
.owl-dots .owl-dot {display: inline-block; zoom: 1; *display: inline; }
.owl-dots .owl-dot span { width: 7px; height: 7px; margin: 9px 6px; background: #ccc; display: block; -webkit-backface-visibility: visible; transition: opacity 200ms ease; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; }
.owl-dots .owl-dot.active span, .owl-dots .owl-dot:hover span { background: #c30d23; width: 7px; height: 7px; margin: 9px 6px;}
.button-inside .owl-prev{display: block !important;top:50%; margin-top: -20px; right:auto; left: 0;color: #fff;}
.button-inside .owl-next{display: block !important;top:50%; margin-top: -20px; color: #fff;}
.button-inside .owl-dots{ display: none;}
/*============googlemaps===============*/
#map_canvas iframe{width:100%; height:550px; z-index: 9;}
/*============justifiedGallery===============*/
.justified-gallery{overflow: inherit !important;}
.justified-gallery > a > .caption, .justified-gallery > div > .caption, .justified-gallery > figure > .caption{display: initial !important;padding: 8px !important;opacity: 0;}
/*============plyr===============*/
.plyr__control--overlaid{ background: rgba(195,13,35,.8) !important;}
.plyr__control--overlaid:focus,.plyr__control--overlaid:hover{background:#c30d23 !important;}
.plyr--audio .plyr__control.plyr__tab-focus,.plyr--audio .plyr__control:hover,.plyr--audio .plyr__control[aria-expanded=true]{background:#c30d23 !important;color:#fff}
.plyr--video .plyr__controls .plyr__control.plyr__tab-focus,.plyr--video .plyr__controls .plyr__control:hover,.plyr--video .plyr__controls .plyr__control[aria-expanded=true]{background:#c30d23 !important;color:#fff}
.plyr__menu__container label.plyr__control input[type=radio]:checked+span{background:#c30d23 !important;}
.plyr--full-ui input[type=range]{color: #c30d23 !important;}
/*============ie/lightbox===============*/
.ie, .lightbox-container { position: fixed; display: block; top: 0; left: 0; z-index: 200; height: 100%; width: 100%; background: url(../images/bg-alpha.png) repeat; overflow: auto;}
.ie .ie-content { position: relative; display: block; margin: 0 auto; width: 90%; max-width: 600px; height: 300px; top:50%; margin-top: -150px; background-color: #fff; padding: 3%; border: solid 1px #ddd; }
.ie-close, .lightbox-close { position:absolute; display: block; width: 50px; height: 35px; right: 0; top: 0; text-align: center; padding-top: 15px;}
.lightbox-close {position: fixed; color: #fff; right: 10px;}
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%; max-width:1000px; margin: 0 auto; background: #fff;}
.lightbox-item{ min-height: 400px; margin: 50px 0;}
#construction .lightbox-content{max-width: 500px;background-color: transparent; height: 400px; top: 50%; margin-top: -200px;}
#construction .lightbox-content form{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
/*============nav===============*/
@media screen and (max-width: 1500px),(max-height: 800px) {
#header,body.active #header{ width:330px;}
.logo {width: 35px; top: 15px;right: 10px;}
#nav {width: 325px;}
#nav ul {margin-left: 20px;margin-top: 70px;}
.nav-toggle{top: 150px;width: 32px; height: 32px;}
.nav-toggle em{letter-spacing: 0;}
body.sticky .nav-toggle {right: 5px;}
.grid-header { margin-right: 325px;}
.grid-content {padding-left: 7%; padding-right: 325px;}
.header-top{ margin-top: 70px;}
.title-box h2 {font-size: 24px;line-height: 30px;margin-left: 10px;}
.title-box h2 small{ font-size: 12px;}
.title-box em{-webkit-transform: scale(0.9);-moz-transform: scale(0.9);-o-transform: scale(0.9);transform: scale(0.9);}
a.button-top{right: 7px;}
#audio-button{right:7px;}
}
@media screen and (max-width: 1500px){
.grid-content {padding-right: 12%;}
.content-page #header{ position: fixed; width:0;}
.content-page #nav{ right: -400px;}
.content-page .nav-toggle{right: 5px;}
.content-page .main {padding-bottom: 590px;}
.content-bottom { margin-top: -505px;}
.no-content-bottom .main {padding-bottom: 300px;}
.no-content-bottom #footer { margin-top: -300px;}
}
@media screen and (max-width: 1200px){
.content-page .main {padding-bottom: 690px;}
.content-bottom { margin-top: -605px;}
.no-content-bottom .main {padding-bottom: 400px;}
.no-content-bottom #footer { margin-top: -400px;}
}
@media screen and (max-width: 800px){
.content-page .main {padding-bottom: 920px;}
.content-bottom { margin-top: -835px;}
.no-content-bottom .main {padding-bottom: 630px;}
.no-content-bottom #footer { margin-top: -630px;}
}
@media screen and (max-width: 980px){
#header{ width:0;}
#nav{ right: -400px;}
.nav-toggle{right: 5px;}
.grid-header{margin-right: 70px;}
}
@media screen and (max-width: 700px){
.header-img{height: 45%;}
}
@media screen and (max-height: 600px) {
#nav ul{margin-top: 25px;}
.header-top {margin-top: 25px;}
.title-box{bottom: -270px;}
.title-box h2 {font-size: 20px;line-height: 26px;}
}
@media screen and (max-width:600px) and (orientation:portrait) {
.logo,.nav-toggle{ position:absolute;}
body.sticky .logo, body.active .logo,body.sticky .nav-toggle, body.active .nav-toggle { position: fixed;}
#header,body.sticky #header{ width: 100%; height: 0;}
body.active #header{width: 100%;height: 100%;}
.logo{ width: 130px; top: 10px; right: 50%; margin-right: -55px;}
body.sticky .logo{ top: -70px;}
body.active .logo{ top: 10px;}
.logo-horizontal { display: inline;}
.logo-vertical { display: none; }
#nav{ width: 100%; right: -100%;}
#nav ul{width:90%; max-width: 300px; margin: 0 auto; margin-top:100px;}
.nav-toggle{top:10px;right: 5px;}
.grid-header{margin-right:0;}
.header-top {margin-top: 70px;}
.grid-content { padding-left: 7%; padding-right: 7%;}
.content-page .header-top { margin-top: 100px;}
.content-page .logo{ top: -70px;}
.content-page.active .logo{ top: 10px;}
.index-banner-text{margin-right: 7% !important;}
#audio-button {bottom: auto; top: 70px;}
}
/*============mobile===============*/
@media screen and (min-width: 980px) {
.imgtext-item:nth-child(odd) .lightBox-img{ float: right;}
.imgtext-item:nth-child(odd) .text-box{padding: 4% 5% 0 0;}
}
@media screen and (max-width: 1400px) {
.bg-line{background-image:none;}
.grid-space{padding-right: 0;}
h1,.title1{ font-size: 2.25em;}
h2,.title2 { font-size: 1.875em;}
.title3 { font-size: 1.6em;}
.about-text h1 {font-size: 30px;line-height: 42px;}
.text-year, .text-year-ver{font-size: 26px;line-height: 30px;}
.classic-list .text-year-ver{right: -50px;}
.news-list .column-box{float: none;}
.news-grid1{width: 50%;}
.news-grid2{width: 50%;}
#about .content {padding-right: 0;padding-left: 5%;}
.about-section{width: 90%;}
#about-section2 p { max-width: 250px;}
#about-section2 .about-img{margin-left: 840px;width: 22%;max-width: 250px;}
#about-section4 .about-text{ width: 330px;height: 250px;padding-top: 80px;}
.about-text em big {font-size: 48px;}
.about-text em small {font-size: 22px;}
#about-section3 { float:none;height: 785px;}
#about-section3 .about-text { padding-top:300px; padding-left: 5%;}
#about-section3 .about-text2 { max-width: 500px; padding-top: 0; padding-left: 5%;}
}
@media screen and (max-width: 1300px){
.index-banner-text{ margin-right: 50px;}
.about-n{position: relative; left: 0;padding-left: 15%; float: left;width: 50%;}
#about-section2 .about-text { padding-top: 50px;padding-left: 15%; width: 290px; float: left; clear: both;}
#about-section2 .about-img { position: relative; margin-top: 190px;  margin-left: 0;float: left; width: 35%;}
}
@media screen and (max-width: 1200px){
/*============footer===============*/
.footer-logo{ width: 13%; padding-right:5%;}
.footer-about{width: 38%; padding-right:5%; }
#footer .footer-info{width: 38%; padding-right:0; }
.footer-nav{width: 82%; padding-left: 18%;}
#footer em{margin-bottom: 15px;}
#footer .footer-about em {margin-bottom: 25px;}
/*============other===============*/
.info-list-3 li{ width: 47%;}
.portfolio-list .text-year{float:none;}
.portfolio-text{padding-top: 10px;}
.construction-grid1 { width: 65%;}
.construction-grid2 {width: 35%;}
}
@media screen and (max-width: 980px) {
/*============main===============*/
/*.grid-large, .grid-middle, .grid-small, .grid-max, .grid-min, .grid{ width: 80%;}*/
.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%;}
.imgtext-item .text-box {padding: 40px 0 0 0;}
#map_canvas iframe {height: 400px;}
.owl-dots { text-align: left; margin-right: 0;margin-left: 0;}
.owl-prev, .owl-next{ display: none;}
#index-banner .owl-dots {margin-left: 7%;}
.section-container {padding-bottom: 20px; padding-top: 20px;}
.section-box { padding-bottom: 50px; padding-top: 50px;}
/*============other===============*/
.index-banner-text {margin: 35px 0 0 7%; float: none;}
.hot-text,#index-portfolio .text-box {padding: 35px 0 0 0;}
.hot-list .text-box, .hot-text{padding: 35px 0 0 0;}
.hot-list .grid-item:nth-child(even) .img-over-box{float: none;}
.classic-list .grid-item{width: 40%;margin: 0 5%;}
.portfolio-text .column-space{float:none;}
.contact-img, .repair-img{float: right;margin-top: -30px;}
.construction-grid2 .title4 { font-size: 1.25em;}
.construction-item .text-box{padding-left:4%; }
.about-e {width: 50%;}
.about-o {position: relative;width: 50%; left: auto;padding-left: 100px;}
#about-section1 .about-text { padding-top: 50px; padding-left: 100px;}
#about-section1 .about-img{left: auto;top: auto; float: right; position: relative; margin-top: 130px;width: 27%;}
}
@media screen and (max-width: 980px) and (min-width: 700px) {
.portfolio-list .img-box{width: 250px; padding-bottom: 250px;}
.portfolio-list .grid-item{min-height: 250px;}
.portfolio-text{padding-left: 290px;}
.portfolio-list .grid-item:before{width: 300px;}
}
@media screen and (max-width: 800px) {
/*============footer===============*/
.footer-nav{max-width:300px; }
.footer-logo {width: 20%; padding-right: 5%;}
.footer-about,#footer .footer-info,.footer-nav{width: 75%;padding-right: 0; padding-left: 25%;}
.footer-about{padding-left: 0;}
/*============other===============*/
h1,.title1{ font-size: 2em;}
.content-text .button-icon{position: relative;}
.info-list-3 li{ width: 100%;margin-right: 0;}
.news-list .text-box {padding: 35px 0 0 0;}
.news-grid1,.news-grid2{width: 100%;}
.construction-grid1 {width: 45%;}
.construction-grid2 {width: 55%;}
#about .content { padding-left: 0;}
.about-section {width: 80%; margin: 0 auto; height: auto !important; padding-bottom: 140px;}
#about-section4{padding-bottom: 0px !important;}
.about-container{background-position: -100px 40px;}
.about-o, #about-section1 .about-text, .about-n, #about-section2 .about-text, .about-e, #about-section3 .about-text, #about-section3 .about-text2 {padding-left: 0;}
.about-e{position: relative;left:auto;}
#about-section3 .about-img{ float: right; position: relative;margin-top: 10px;}
#about-section3 .about-text {padding-top: 50px;}
}
@media screen and (max-width: 700px) {
/*============main===============*/
.hide-w700{ display: none !important;}
/*============other===============*/
.classic-list .grid-item { width: 80%;max-width: 360px; margin: 0 auto; float: none; }
.portfolio-list .grid-item:before{ display: none;}
.about-n, #about-section2 .about-text, #about-section2 .about-img, #about-section2 .about-img{float: none;}
#about-section2 .about-img{margin-top: 30px; width: 100%; max-width: 250px;}
#about-section2 .about-text{ width: auto;}
#about-section2 p {max-width:inherit;}
}
@media screen and (max-width: 600px) {
/*============footer===============*/
.footer-logo {width: 90px; padding-right: 0;margin: 0 auto; float: none;}
.footer-about,#footer .footer-info,.footer-nav{width: 100%;padding-right: 0; padding-left: 0;}
.footer-copyright{text-align: left; padding-left: 7%;}
/*============main===============*/
.hide-w600{ display: none !important;}
.computer-img{ display:none; opacity: 0 !important;}
.mobile-img{ display:block; opacity: 1 !important;}
.pswp-box{padding: 7%;}
.page a { display: none; }
.page a.active, .page a.page-first, .page a.page-last, .page a.page-next, .page a.page-prev{ display: inline-block; }
h1,.title1,h2,.title2 { font-size: 1.7em;}
.content{ padding-top: 100px;padding-bottom: 100px;}
.grid-item{padding-bottom: 60px;}
form textarea {	height: 170px;}
/*============other===============*/
#hot-content .img-over-box, #map_canvas{width: 126%; margin-left: -13%;}
.portfolio-list .img-box{ position: relative;float: right;}
.portfolio-text {padding-left: 0;}
.construction-grid1, .construction-grid2 {width: 100%;}
.construction-item .text-box {padding: 20px 0 0 0;}
#index-hot .owl-carousel, #index-news .owl-carousel, #index-portfolio .owl-carousel{max-width: 400px; margin-left:auto; margin-right:auto;}
}
@media screen and (max-width: 500px) {
/*============main===============*/
.hide-w500{ display: none !important;}
.content form{width: 106%; margin-left: -11%;}
.pswp-box{height: 350px;}
.portfolio-text { clear: both;}
.portfolio-list .text-year{margin-top: -55px;}
a.button-top { float: right; position: relative;bottom: 60px;}
#about-section1 .about-img{width: 40%;}
}
@media screen and (max-width: 400px) {
/*============main===============*/
.hide-w400{ display: none !important;}
.title2.text-spacing2{ font-size: 1.4em;}
.title4 { font-size: 1.25em;}
.text1 { font-size: 1em;}
.text-year, .text-year-ver {font-size: 22px;}
.text-year:before, .text-year-to:before{bottom: -18px;}
.text-year-from:after{height: 20px;}
.text-date{font-size: 14px;}
.text-tel strong {font-size: 20px;}
.column-space{margin-bottom: 25px;margin-right: 0;}
.text-top{margin-top:15px;}
.text-bottom{margin-bottom:15px;}
.text-top2{margin-top:25px;}
.text-bottom2{margin-bottom:25px;}
.box-top{margin-top:40px;}
.box-bottom{ margin-bottom: 40px;}
/*==============other==================*/
.column-space, .portfolio-text .info-list {margin-bottom: 25px;}
.index-banner-text {margin-top: 25px;}
.hot-text,#index-portfolio .text-box, .hot-list .text-box, .hot-text, .news-list .text-box {padding-top: 25px;}
.classic-list .grid-item {width: 90%;}
.about-section {padding-bottom: 100px;}
.about-text h1 {font-size: 26px; line-height: 36px;}	
#about-section4 .about-text {width: 230px;height: 190px; padding-top: 40px;}
#about-section4 em {line-height: 26px;padding-bottom: 8px; margin-bottom: 14px;}
.about-text em big {font-size: 40px;}
.about-text em small {font-size: 20px;}
}
@media screen and (max-width: 360px) {
.hide-w360{ display: none !important;}
p { font-size: 0.9375em;}
}
@media screen and (max-width: 310px) {
.hide-w310{ display: none !important;}
.page a.page-first, .page a.page-last { display: none; }
}	
.horizontal { display: inherit; }
.vertical { display: none; }

@media screen and (orientation:portrait) {
.horizontal { display: none; }
.vertical { display: inherit; }
.header-img{max-height: 750px;}
}
@media screen and (orientation:portrait) and (min-height: 1100px) {
.grid-header {min-height:inherit;}
.header-img {position: relative; padding-bottom: 100%; margin-bottom: 250px;}
}