@font-face { font-family: 'DIN-Medium'; src: url("fonts/DIN-Medium.eot-#iefix")/*tpa=http://www.ziran.hk/cn/System/View/css/fonts/DIN-Medium.eot?#iefix*/ format('embedded-opentype'), url("fonts/DIN-Medium.woff")/*tpa=http://www.ziran.hk/cn/System/View/css/fonts/DIN-Medium.woff*/ format('woff'), url("fonts/DIN-Medium.ttf")/*tpa=http://www.ziran.hk/cn/System/View/css/fonts/DIN-Medium.ttf*/ format('truetype'), url("fonts/DIN-Medium.svg#DIN-Medium")/*tpa=http://www.ziran.hk/cn/System/View/css/fonts/DIN-Medium.svg#DIN-Medium*/ format('svg'); font-weight: normal; font-style: normal }
html { overflow-x: hidden; height: 100% }
body { font-family: 'PingFang SC', 'Helvetica Neue', 'SF UI Text', 'Helvetica', 'Arial', 'Source Han Sans SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', 'sans-serif'; font-size: 14px; line-height: 2; -webkit-font-smoothing: antialiased; padding-top: 100px; color: rgb(49, 50, 50) }
body[data-screen='sm'], body[data-screen='xs'] { padding-top: 75px }
*:focus { outline: none }
a, button { transition: all .4s; -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0) }
a { color: rgb(34, 24, 21) }
a:hover, a.active, .active { text-decoration: none; color: rgb(255, 0, 0) }
h1, h2, h3, h4, h5, h6, ul, ol, li, p, strong, b { margin: 0; padding: 0; font-weight: normal }
div, section, dl, dt, dd { position: relative }
dl, dt, dd, textarea { font-size: 14px; font-weight: normal; margin: 0; padding: 0; vertical-align: top }
li { list-style: none }
input, textarea { resize: none; transition: border .4s, background-color .4s; border-radius: 0; -webkit-appearance: none }
label { font-weight: normal }
a:hover .no-hover { color: inherit; background: initial }
p { }
button { margin: 0; padding: 0; border: 0; background: transparent }
strong, .strong { font-weight: 500 }
img { max-width: 100%; height: auto }
.inline { position: relative; display: inline-block; vertical-align: top; letter-spacing: normal }
.inline-wrapper { font-size: 0 }
.inline-item { font-size: initial; display: inline-block }
.block { position: relative; display: block }
.nowrap { display: inline-block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
.gray { color: rgb(180, 180, 180) }
.ani { transition: all .4s }
.none { display: none !important }
.pc-div { display: block }
.mobile-div { display: none }
.full-size { position: relative; overflow: hidden; width: 100%; height: 100% }
.full-height { height: 100% }
.full-width { max-width: 100%; height: auto; vertical-align: top }
.fix-height { overflow: auto }
.abs { position: absolute; top: 0; left: 0; display: block; width: 100% }
.bgs-cover, .bgs-contain { background-position: center center }
.bgs-cover { background-size: cover; background-repeat: inherit }
.bgs-contain { background-size: contain; background-repeat: no-repeat }
.font-max { font-size: 50px }
.font-xxxl { font-size: 38px }
.font-xxl { font-size: 34px }
.font-xl { font-size: 30px }
.font-lg { font-size: 26px }
.font-xxm { font-size: 22px }
.font-xm { font-size: 20px }
.font-md { font-size: 18px }
.font-sm { font-size: 16px }
.font-xs { font-size: 14px }
.font-xxs { font-size: 14px }
.hide { opacity: 0 }
.full-line { position: relative; left: 0; width: 100%; height: 0; margin: 10px 0; border-bottom: 1px solid rgb(174, 174, 174) }
[class^='icon-cxany-'], [class*=' icon-cxany-'] { font-size: 16px; display: inline-block; margin-top: -1px; vertical-align: middle; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased }
.row { margin-right: -15px; margin-left: -15px }
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { padding-right: 15px; padding-left: 15px }
.row.row-no-padding { margin-right: 20px; margin-left: 20px }
.row-no-padding .col-xs-1, .row-no-padding .col-sm-1, .row-no-padding .col-md-1, .row-no-padding .col-lg-1, .row-no-padding .col-xs-2, .row-no-padding .col-sm-2, .row-no-padding .col-md-2, .row-no-padding .col-lg-2, .row-no-padding .col-xs-3, .row-no-padding .col-sm-3, .row-no-padding .col-md-3, .row-no-padding .col-lg-3, .row-no-padding .col-xs-4, .row-no-padding .col-sm-4, .row-no-padding .col-md-4, .row-no-padding .col-lg-4, .row-no-padding .col-xs-5, .row-no-padding .col-sm-5, .row-no-padding .col-md-5, .row-no-padding .col-lg-5, .row-no-padding .col-xs-6, .row-no-padding .col-sm-6, .row-no-padding .col-md-6, .row-no-padding .col-lg-6, .row-no-padding .col-xs-7, .row-no-padding .col-sm-7, .row-no-padding .col-md-7, .row-no-padding .col-lg-7, .row-no-padding .col-xs-8, .row-no-padding .col-sm-8, .row-no-padding .col-md-8, .row-no-padding .col-lg-8, .row-no-padding .col-xs-9, .row-no-padding .col-sm-9, .row-no-padding .col-md-9, .row-no-padding .col-lg-9, .row-no-padding .col-xs-10, .row-no-padding .col-sm-10, .row-no-padding .col-md-10, .row-no-padding .col-lg-10, .row-no-padding .col-xs-11, .row-no-padding .col-sm-11, .row-no-padding .col-md-11, .row-no-padding .col-lg-11, .row-no-padding .col-xs-12, .row-no-padding .col-sm-12, .row-no-padding .col-md-12, .row-no-padding .col-lg-12 { padding: 10px }
.row-padding-10 .col-xs-1, .row-padding-10 .col-sm-1, .row-padding-10 .col-md-1, .row-padding-10 .col-lg-1, .row-padding-10 .col-xs-2, .row-padding-10 .col-sm-2, .row-padding-10 .col-md-2, .row-padding-10 .col-lg-2, .row-padding-10 .col-xs-3, .row-padding-10 .col-sm-3, .row-padding-10 .col-md-3, .row-padding-10 .col-lg-3, .row-padding-10 .col-xs-4, .row-padding-10 .col-sm-4, .row-padding-10 .col-md-4, .row-padding-10 .col-lg-4, .row-padding-10 .col-xs-5, .row-padding-10 .col-sm-5, .row-padding-10 .col-md-5, .row-padding-10 .col-lg-5, .row-padding-10 .col-xs-6, .row-padding-10 .col-sm-6, .row-padding-10 .col-md-6, .row-padding-10 .col-lg-6, .row-padding-10 .col-xs-7, .row-padding-10 .col-sm-7, .row-padding-10 .col-md-7, .row-padding-10 .col-lg-7, .row-padding-10 .col-xs-8, .row-padding-10 .col-sm-8, .row-padding-10 .col-md-8, .row-padding-10 .col-lg-8, .row-padding-10 .col-xs-9, .row-padding-10 .col-sm-9, .row-padding-10 .col-md-9, .row-padding-10 .col-lg-9, .row-padding-10 .col-xs-10, .row-padding-10 .col-sm-10, .row-padding-10 .col-md-10, .row-padding-10 .col-lg-10, .row-padding-10 .col-xs-11, .row-padding-10 .col-sm-11, .row-padding-10 .col-md-11, .row-padding-10 .col-lg-11, .row-padding-10 .col-xs-12, .row-padding-10 .col-sm-12, .row-padding-10 .col-md-12, .row-padding-10 .col-lg-12 { padding-right: 10px; padding-left: 10px }
hr { margin-top: 10px; margin-bottom: 10px; border: 0; border-top: 1px solid rgb(200, 200, 200) }
[class^='col-10'] { display: inline-block; float: left }
.col-10-1 { width: 10% }
.col-10-2 { width: 20% }
.col-10-4 { width: 40% }
.ratio { position: relative; display: block; overflow: hidden }
.ratio .inner { position: absolute; top: 0; left: 0; width: 100%; height: 100% }
.ratio-16-9 { padding-top: 56.25% }
.ratio-16-3 { padding-top: 18.75% }
.frame-full { padding-right: 40px; padding-left: 40px; transition: padding .4s }
.frame-wide, .frame-middle { position: relative; display: block; margin-right: auto; margin-left: auto }
.frame-wide { padding-left: 15%; padding-right: 15% }
.frame-middle { width: 1000px }
.frame-table { display: table; width: 100%; height: inherit }
.frame-cell { display: table-cell; vertical-align: middle }
.main { transition: all .6s ease-out }
.main-nav { position: fixed; z-index: 1000; top: 0; left: 0; width: 0; height: 100%; display: none }
.btn-mobile-menu { position: absolute; top: 20px; left: 40px; overflow: hidden }
.btn-footer-menu { position: absolute; bottom: 50px; left: 40px }
.btn-mobile-menu .icon-cxany { font-size: 48px }
.icon-cxany-logo-1, .icon-cxany-block-1 { color: rgb(255, 220, 0) }
.icon-cxany-logo-2 { color: black }
.icon-cxany-block-1 { font-size: 30px }
.main-nav-menu { transition: all .3s ease-out; background: white }
.main-nav-logo { opacity: 0; transition: opacity .3s linear 1s; overflow: hidden }
.btn-mobile-menu:hover .main-nav-menu, .btn-mobile-menu.active .main-nav-menu { -webkit-transform: translateX(0); transform: translateX(0) }
.btn-mobile-menu:hover .main-nav-logo, .btn-mobile-menu.active .main-nav-logo { }
.top-nav-add { line-height: 23px; position: absolute; right: 0; bottom: 28px; display: block; width: 23px; height: 23px; text-align: center; color: rgb(0, 0, 0); background-color: rgb(255, 220, 0) }
.top-nav-add .icon-cxany { font-size: 14px; font-weight: 600 }
.top-nav-close { width: initial; margin-top: 5px; margin-left: 15px; opacity: 0; display: none }
.top-nav-close .icon-cxany { font-size: 28px; color: black }
.top-nav { position: fixed; z-index: 990; top: 0; left: 0; width: 100%; height: 100px; background: white; transition: all .2s ease }
.fixed-nav .top-nav { height: 75px }
.top-nav-menu { z-index: 1001; top: 0; right: 0; overflow: hidden; width: 100%; opacity: 1; background-color: white; max-width: 650px; float: right }
.top-nav-menu li { position: relative; width: 20%; float: left; height: 50px; line-height: 50px; overflow: hidden }
.top-nav-menu a { font-size: 20px; display: block; overflow: hidden; text-align: center; transition: color .2s }
.top-nav-menu a span { display: block; transition: margin .3s ease-in-out; font-weight: normal }
.top-nav-menu a:hover span { margin-top: -50px }
.btn-mobile-menu, .top-nav-close { transition: all .2s ease-out }

.fixed-nav .top-logo { background-position: 0 -100px }
.mobile-menu-active .btn-mobile-menu { transition-delay: 0s; transition-duration: .1s; opacity: 0 }
.mobile-menu-active .top-nav-close { transition-delay: .2s; opacity: 1 }
.mobile-menu-active .main, .mobile-menu-active .top-nav { margin-right: -330px; margin-left: 330px }
.mobile-menu-active .main { }
.mobile-menu-active .top-nav-menu { top: 0; width: 350px; margin-left: 0; opacity: 1 }
.mobile-body-mask { position: fixed; z-index: -1; top: 0; left: 0; display: none; width: 100%; height: 100% }
.mobile-menu-active .mobile-body-mask { z-index: 99 !important; display: block }
@-webkit-keyframes blur {
  to { -webkit-filter: blur(5px); filter: blur(5px) }
}
@keyframes blur {
  to { -webkit-filter: blur(5px); -moz-filter: blur(5px); filter: blur(5px) }
}
.always-nav { position: fixed; z-index: 9999; right: 40px; bottom: 30px; width: 30px; height: 30px; transition: -webkit-transform .3s ease-out; transition: transform .3s ease-out; transition: transform .3s ease-out, -webkit-transform .3s ease-out }
.always-nav:hover { -webkit-transform: scale(1.3); transform: scale(1.3) }
.btn-always-menu { width: 10px; height: 10px; margin: 15px; border-radius: 100%; background-color: black }
.main-footer { clear: both; margin-top: 90px; background-color: rgb(39, 39, 39); padding-top: 30px; color: rgb(113, 113, 113); font-size: 14px; line-height: 1.8 }
.main-footer img { max-width: 100%; height: 120px }
.main-footer .item { padding-bottom: 30px }
.main-footer .item strong { color: white; font-size: 15px; display: inline-block; margin-bottom: 10px }
.slides-list, .slides-list li, .slides-list li a, .bx-wrapper, .bx-viewport { height: inherit !important }
.home-slides-nav { top: 50%; height: 0; transition: opacity .4s; opacity: 1; z-index: 900 }
[class $='-slides']:hover .home-slides-nav { opacity: 1 }
[class $='-slides']:hover .home-slides-nav a { margin-right: 0; margin-left: 0 }
.home-slides-nav a { line-height: 70px; position: absolute; top: 50%; width: 140px; height: 140px; margin-top: -70px; transition: margin .4s, background-color .4s; text-align: center; color: rgba(255, 255, 255, .3); transition: all .3s }
.home-slides-nav a span { font-size: 140px }
.home-slides-nav a:hover { color: rgba(255, 255, 255, 1) }
.home-slides-nav a .icon-cxany { font-size: 24px }
.home-slides-nav-prev { left: 1% }
.home-slides-nav-next { right: 1% }
.home-slides .text { display: block; padding-top: 120px; padding-left: 240px; line-height: 1; color: black; font-weight: 500 }
.home-slides .text-list { font-size: 30px; display: block; margin-bottom: 5px; padding: 5px 5px; background-color: white; width: 350px }
.home-slides .text-list:last-child { width: 200px }
@media screen and (max-width:991px) {
  .home-slides .text { padding-top: 20px; padding-left: 20px; line-height: 1; color: black }
  .home-slides .text-list { font-size: 15px; width: 170px }
  .home-slides .text-list:last-child { width: 95px }
}
sup { font-size: 45%; top: -1.3em }
button, .button { position: relative; z-index: 1; display: inline-block; overflow: hidden; padding: 2px 25px; text-align: center; vertical-align: top; border: 0;  }
.button.btn-ani:after, .button.btn-ani:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; }
.button.btn-ani:before { z-index: -2 }
.button.btn-ani:after { z-index: -1; left: -100%; background: rgb(255, 0, 0) }
.button.btn-ani { line-height: 31px; padding: 0 15px 1px 15px; color: rgb(73, 73, 73); }
.btn-ani:hover { color: white }
.button.btn-border { line-height: 1; padding: 10px 25px; border: 1px solid rgb(128, 128, 128); font-family: Arial; letter-spacing: -0.001em;margin: 0 20px 30px 20px; }
.button.btn-ani.gray:before { background-color: rgb(73, 73, 73) }
.button.btn-border:hover { border-color: rgb(255, 0, 0); }
.button.btn-ani:hover:after { left: 0 }
.button.btn-ani:hover:before { left: 100% }
.button.btn-border.btn-xs { line-height: 25px; padding-right: 15px; padding-left: 15px }
.btn-border.with-plus i:before { content: '>'; font-style: normal; display: inline-block; padding-left: 20px }
.has-padding { padding-top: 20px; padding-bottom: 20px }
@media screen and (min-width:1366px) {
  .has-padding { padding-top: 40px; padding-bottom: 40px }
}
@media screen and (min-width:1600px) {
  .has-padding { padding-top: 55px; padding-bottom: 55px }
}
@media screen and (min-width:1900px) {
  .has-padding { padding-top: 80px; padding-bottom: 80px }
}
.common-header-text .title-with-line { padding-bottom: 20px }
.title-with-line { line-height: 1.5; position: relative; margin-bottom: 0; padding-bottom: 20px; text-align: center }
.common-header-text .title-with-line:before { font-size: 0; position: absolute; bottom: 0; left: 50%; display: block; width: 70px; height: 0; margin-left: -35px; content: ''; border-bottom: 4px solid black }
.home-about .overview { padding: 3% 0 4% 0 }
a.block span { position: relative }
.section-news { padding-bottom: 50px; background-color: rgb(247, 247, 247) }
.section-news:before { position: absolute; z-index: 0; top: 0; left: 0; width: 50%; height: 100%; content: ''; background-color: rgb(238, 238, 238) }
.home-news-list { padding-top: 5% }
.home-news-list a { color: rgb(128, 128, 128) }
.home-news-list .time { line-height: 1.5; width: 130px; height: 100px; padding-right: 40px; text-align: right; float: left }
.home-news-list .time-month-day { font-size: 28px; line-height: 38px }
.home-news-list .time-year { font-size: 18px }
.home-news-list .title { font-size: 18px; line-height: 1.8; padding-bottom: 10px }
.home-news-list .overview { font-size: 14px; line-height: 25px; position: relative; display: block; overflow: hidden; height: 50px }
.home-news-top { padding-right: 100px }
.home-news-top a { transition: none }
.home-news-top .image { margin-top: 20px; margin-bottom: 30px }
.home-news-top .image .inner { transition: all .4s }
.home-news-top .image img { width: 100%; height: 300px }
.home-news-top .specialty { font-size: 13px; margin-bottom: 10px; padding-bottom: 10px; color: rgb(128, 128, 128) }
.home-news-top .specialty:after { display: block; width: 25px; height: 1px; content: ''; transition: width .4s; background-color: rgb(128, 128, 128) }
.home-news .title { transition: color .4s; color: black }
.home-news-top .more { margin-top: 20px; padding-top: 8px; padding-bottom: 8px }
.home-news-top .overview { line-height: 30px; overflow: hidden; height: 60px; transition: color .4s }
.home-news-top:hover .image .inner { -webkit-transform: scale(1.05, 1.05); transform: scale(1.05, 1.05) }
.home-news-top:hover .overview { color: black }
.home-news-top:hover .specialty:after { width: 50px }
.home-news-top:hover .button:before { left: 100% }
.home-news-top:hover .button:after { left: 0 }
.home-news-top:hover .button { color: white !important }
.home-news-new { padding-left: 50px }
.home-news-new .item { padding-bottom: 20px }
.home-news-new .small { font-size: 12px; font-weight: normal }
.home-news-new .text { display: block !important; margin-left: 140px; padding-bottom: 35px; padding-left: 30px; transition: -webkit-transform .4s; transition: transform .4s; transition: transform .4s, -webkit-transform .4s; transition: transform .4s, -webkit-transform .4s; transition: transform .4s, -webkit-transform .4s; transition: transform .4s, -webkit-transform .4s }
.home-news-new .overview { font-size: 13px }
.home-news-new .item:last-child { padding-bottom: 0 }
.home-news-new .time:before { position: absolute; top: 5%; right: 0; width: 1px; height: 30%; content: ''; transition: height .3s; background-color: rgb(128, 128, 128) }
.home-news-new a:hover .text { border-color: rgb(32, 42, 61) }
.home-news-new a:hover .time:before { height: 90% }
.home-news-new ul:before { position: absolute; z-index: 0; top: 0; width: 130px; height: 100%; content: ''; border-right: 1px solid rgb(236, 236, 236) }
.home-news-new a:hover .text { -webkit-transform: translateX(30px); transform: translateX(30px) }
.home-news-left-title h4 { font-size: 30px; font-weight: normal; padding-bottom: 15px }
.home-slogan { color: white }
.home-slogan .frame-wide { padding-top: 20px; padding-bottom: 20px }
.home-slogan .subject { padding-top: 15px; padding-bottom: 25px }
.home-slogan.h-s-b { letter-spacing: 1rem }
.home-brand-heading h3 { display: inline-block; padding: 5px }
.home-brand-heading hr { border-top: 3px solid rgb(62, 58, 57) }
.home-brand .overview { padding-top: 25px; padding-bottom: 10px }
.home-brand-list { position: relative; font-size: 0; margin-left: -15px; margin-right: -15px }
.home-brand-list li { display: inline-block; vertical-align: top; width: 50%; text-align: center; padding: 15px }
.home-brand-list strong { display: inline-block; line-height: 1.1; }
.home-brand-list .overview { line-height: 2 }
@media screen and (min-width:1366px) {
  .home-brand-list li { width: 23%; text-align: left; margin-left:10% }
  .home-brand-list { position: relative; font-size: 0; margin-left: 45px; margin-right: -45px }
}
@media screen and (min-width:1600px) {
  .home-brand-list { position: relative; font-size: 0; margin-left: 55px; margin-right: -55px }
}
.home-contact { padding-bottom: 0 }
.home-contact .common-header-text h3:before { border-color: rgb(255, 0, 0) }
.home-contact .overview { padding-top: 20px; padding-bottom: 10px }
.main-footer { padding-top: 60px; padding-bottom: 60px; color: rgb(255, 255,255); line-height: 2; background-color:rgb(207, 0, 14) }
.main-footer a { color: rgb(113, 112, 113) }
.main-footer a:hover { color: rgb(255, 0, 0) }
.m-f-wechat { padding-left: 0 }
.m-f-wechat img { width: 100px; height: auto; margin-right: 20px }
.m-f-wechat img:last-child { margin-right: 0 }
.main-footer .title { line-height: 2; font-weight: bold; padding-bottom: 5px }
.m-f-contact .title { color: white }
.m-f-nav a { line-height: 1.8; white-space: nowrap }
.m-f-nav ul { display: inline-block }
.m-f-address p { height: 2rem }
.s-f-links-list { height: 105px; overflow: auto; display: inline-block; padding-right: 10px }
.s-f-links-list::-webkit-scrollbar { width: 3px; border-left: 1px solid rgb(50, 50, 50); border-right: 1px solid rgb(50, 50, 50); background-color: rgb(113, 112, 113) }
.s-f-links-list::-webkit-scrollbar-thumb { border-radius: 10px; background-color: rgb(113, 112, 113) }
u { position: relative; text-decoration: none; padding-bottom: 10px }
u:after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 0; border-top: 1px solid rgb(113, 112, 113) }
.related-news-more { margin-bottom: 15px; padding-top: 20px; padding-left: .5em; letter-spacing: .5em }
.project-item a { width: 100%; height: 100%; overflow: hidden; line-height: 1.6 }
.project-item .overview { position: absolute; top: inherit; bottom: 10%; height: auto; transition: opacity .4s; opacity: 0; color: white; padding: 0 6% }
.project-item .overview span { width: 100% }
.project-item .ratio { transition: opacity .4s }
.project-item .ratio:after { opacity: 0; transition: opacity .4s; content: ''; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(50, 50, 50, .6) }
.project-item .inner { transition: all .3s }
.project-item a:hover .inner { -webkit-transform: scale(1.1); transform: scale(1.1) }
.project-item a:hover .overview, .project-item a:hover .ratio:after { opacity: 1 }
.project-item .title { }
.project-item .client { font-size: 28px }
.project-item .sub { }
.project-item .title:before { content: '>'; font-size: 30px; display: block; margin-top: 5px; font-family: 'Arial'; font-weight: 200; line-height: 1 }
.slick-list, .slick-track { height: inherit }
.slick-dots { font-size: 0; line-height: 35px; position: absolute; bottom: 40px; left: 0; width: 100%; height: 35px; text-align: center }
.slick-dots li { width: 20px !important; height: 20px; margin: 0 10px; vertical-align: middle }
.slick-dots li button { border-color: transparent; border-radius: 100%; background-color: rgba(255, 255, 255, .5); width: 14px; height: 14px }
.slick-dots li button:before { content: none }
.slick-dots li.slick-active button { background-color: rgba(25, 43, 72, .95) }
.slick-dotted.slick-slider { margin-bottom: 40px }
.project-list-header { padding-top: 60px }
.project-list-header-title { line-height: 45px; padding-bottom: 25px }
.project-list-header-sub { line-height: 30px; padding-bottom: 30px }
.project-list-header-sub span { min-width: 80px }
.project-list-header-sub a { width: 30px; height: 30px; text-align: center }
.project-list-header-sub a i { font-size: 20px }
.project-list-header-sub a:hover, .project-list-header-sub a.active { color: rgb(255, 220, 0) }
.project-list { }
.ratio-img { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background-color: rgb(230, 230, 230) }
.ratio-img img { position: relative; z-index: -1; width: 100%; height: 100%; transition: opacity 1.5s; vertical-align: top; opacity: 0 }
.ratio-img img.display { opacity: 1 }
.ratio-img .picture { position: relative; z-index: 3; display: block; width: 100%; height: 100%; transition: opacity .5s; opacity: 0 }
.ratio-img .picture.display { opacity: 1 }
.ratio-img:before { position: absolute; z-index: 1; top: calc(50% - .25rem); right: calc(50% - .25rem); display: inline-block; width: 8px; height: 8px; content: ''; -webkit-animation: flickerAnimation .5s infinite alternate; animation: flickerAnimation .5s infinite alternate; opacity: 1; border-radius: 8px; background: black }
.ratio-empty { position: absolute; left: 0; top: -9999px; opacity: 0; width: 100%; z-index: -5 }
.ratio-empty img { vertical-align: top; width: 100%; height: auto }
@-webkit-keyframes flickerAnimation {
  0% { opacity: 1 }
  100% { opacity: 0 }
}
@keyframes flickerAnimation {
  0% { opacity: 1 }
  100% { opacity: 0 }
}
.project-list-text { padding-left: 5% }
.project-list-text .title { font-weight: 500; line-height: 1.3; padding-bottom: 15px }
.common-related-header { line-height: 50px }
.common-related-list { margin-bottom: 20px }
.img-hover, .block-hover { position: relative; display: block; overflow: hidden }
.img-hover .img { transition: -webkit-transform .4s ease-out; transition: transform .4s ease-out; transition: transform .4s ease-out, -webkit-transform .4s ease-out }
.img-hover:hover .img { -webkit-transform: scale(1.03); transform: scale(1.03) }
.home-about.pd-none { padding-bottom: 0 }
.project-details { }
.project-details-header { line-height: 30px; padding-top: 50px; padding-bottom: 50px }
.project-details-header .title { min-width: 100px }
.project-details-title { line-height: 40px; padding-bottom: 40px }
.frame-half { max-width: 1000px }
.frame-half img { width: 100%; max-width: 100%; height: auto }
.max-image-size img { width: 100%; height: auto }
.block-hover:before { position: absolute; z-index: 9; right: 0; left: 0; width: 100%; height: 100%; content: ''; transition: left .5s ease-out, opacity .5s; opacity: 0; background-color: rgb(255, 220, 0) }
.block-hover:hover:before { left: 100%; transition: left .5s ease-out, opacity .2s; opacity: 1 }
[data-screen='xs'] .block-hover:hover:before { opacity: 0 }
.common-like { padding-top: 50px }
.i-like-this button { border-radius: 100%; width: 100px; height: 100px; background-color: rgb(200, 200, 200); color: white }
.i-like-this button:hover { background-color: rgb(255, 0, 0) }
.i-like-this button i { font-size: 65px; margin-top: -5px }
.common-view .inline-item { color: rgb(200, 200, 200); min-width: 80px; padding-right: 5px }
.common-view .inline-item i { font-size: 18px }
.about-overview { padding-top: 50px }
.about-gallery img { width: 100%; vertical-align: top }
.contact-title { line-height: 60px; margin-bottom: 30px; padding-top: 10px; padding-bottom: 10px }
.fancybox-wrap.fancybox-type-inline { margin-top: -10% }
.share-to-wechat img { min-width: 200px; max-width: 20%; heighta: auto }
.gray-title { font-size: 18px; line-height: 35px; color: rgb(136, 136, 136); padding-top: 40px; padding-bottom: 30px }
.news-recommend .project-item { margin-bottom: 10px }
.views-likes i { margin: -2px 2px 0 2px }
.news .project-item .overview { padding: 0; text-align: center }
div[data-view='block'] .item a .overview { transition: background .4s, color .4s }
div[data-view='block'] .item a .inner { transition: -webkit-transform .4s; transition: transform .4s; transition: transform .4s, -webkit-transform .4s }
div[data-view='block'] .item a { padding-bottom: 120px; background-color: transparent }
div[data-view='block'] .overview { opacity: 1; background-color: transparent; height: 120px; top: initial; bottom: 0; padding: 10px; text-align: center; color: rgb(180, 180, 180); line-height: 25px }
.project-item .title-news { font-size: 16px }
div[data-view='block'] .title-news { color: rgb(50, 50, 50) }
div[data-view='block'] .project-item a:hover .ratio { opacity: 1 }
div[data-view='block'] .project-item .sub { font-size: 14px; line-height: 25px; margin-bottom: 0 }
div[data-view='block'] .project-item .sub:after { content: none }
div[data-view='block'] .project-item .title { font-size: 18px }
div[data-view='block'] .project-item .client { font-size: 15px }
div[data-view='block'] .project-item .overview { color: rgb(50, 50, 50) }
div[data-view='block'] a:hover .overview { background-color: rgb(230, 87, 34); color: white }
div[data-view='block'] a:hover span { color: white }
div[data-view='block'] a:hover span.inner { -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1) }
div[data-view='block'] .views-likes { margin-bottom: 10px }
body, .inline-item { font-size: 12px }
.fs-12 { font-size: 9px }
.fs-13 { font-size: 10px }
.fs-14 { font-size: 11px }
.fs-15 { font-size: 11px }
.fs-16 { font-size: 12px }
.fs-17 { font-size: 13px }
.fs-18 { font-size: 14px }
.fs-19 { font-size: 14px }
.fs-20 { font-size: 15px }
.fs-21 { font-size: 16px }
.fs-22 { font-size: 17px }
.fs-23 { font-size: 17px }
.fs-24 { font-size: 18px }
.fs-25 { font-size: 19px }
.fs-26 { font-size: 20px }
.fs-27 { font-size: 20px }
.fs-28 { font-size: 21px }
.fs-29 { font-size: 22px }
.fs-30 { font-size: 23px }
.fs-31 { font-size: 23px }
.fs-32 { font-size: 24px }
.fs-33 { font-size: 25px }
.fs-34 { font-size: 26px }
.fs-35 { font-size: 26px }
.fs-36 { font-size: 27px }
.fs-37 { font-size: 28px }
.fs-38 { font-size: 29px }
.fs-39 { font-size: 29px }
.fs-40 { font-size: 30px }
.fs-42 { font-size: 32px }
.fs-44 { font-size: 33px }
.fs-46 { font-size: 35px }
.fs-48 { font-size: 36px }
.fs-50 { font-size: 38px }
.fs-52 { font-size: 39px }
.fs-54 { font-size: 41px }
.fs-56 { font-size: 42px }
.fs-58 { font-size: 44px }
.fs-60 { font-size: 45px }
.fs-65 { font-size: 49px }
.fs-70 { font-size: 53px }
.fs-72 { font-size: 55px }
@media screen and (min-width:1200px) {
  body, .inline-item { font-size: 13px }
  .fs-12 { font-size: 10px }
  .fs-13 { font-size: 11px }
  .fs-14 { font-size: 12px }
  .fs-15 { font-size: 13px }
  .fs-16 { font-size: 14px }
  .fs-17 { font-size: 14px }
  .fs-18 { font-size: 15px }
  .fs-19 { font-size: 16px }
  .fs-20 { font-size: 17px }
  .fs-21 { font-size: 18px }
  .fs-22 { font-size: 19px }
  .fs-23 { font-size: 20px }
  .fs-24 { font-size: 20px }
  .fs-25 { font-size: 21px }
  .fs-26 { font-size: 22px }
  .fs-27 { font-size: 23px }
  .fs-28 { font-size: 24px }
  .fs-29 { font-size: 25px }
  .fs-30 { font-size: 26px }
  .fs-31 { font-size: 26px }
  .fs-32 { font-size: 27px }
  .fs-33 { font-size: 28px }
  .fs-34 { font-size: 29px }
  .fs-35 { font-size: 30px }
  .fs-36 { font-size: 31px }
  .fs-37 { font-size: 31px }
  .fs-38 { font-size: 32px }
  .fs-39 { font-size: 33px }
  .fs-40 { font-size: 34px }
  .fs-42 { font-size: 36px }
  .fs-44 { font-size: 37px }
  .fs-46 { font-size: 39px }
  .fs-48 { font-size: 41px }
  .fs-50 { font-size: 43px }
  .fs-52 { font-size: 44px }
  .fs-54 { font-size: 46px }
  .fs-56 { font-size: 48px }
  .fs-58 { font-size: 49px }
  .fs-60 { font-size: 51px }
  .fs-65 { font-size: 55px }
  .fs-70 { font-size: 60px }
  .fs-72 { font-size: 62px }
}
@media screen and (min-width:1600px) {
  body, .inline-item { font-size: 14px }
  .fs-12 { font-size: 12px }
  .fs-13 { font-size: 13px }
  .fs-14 { font-size: 14px }
  .fs-15 { font-size: 15px }
  .fs-16 { font-size: 16px }
  .fs-17 { font-size: 17px }
  .fs-18 { font-size: 18px }
  .fs-19 { font-size: 19px }
  .fs-20 { font-size: 20px }
  .fs-21 { font-size: 21px }
  .fs-22 { font-size: 22px }
  .fs-23 { font-size: 23px }
  .fs-24 { font-size: 24px }
  .fs-25 { font-size: 25px }
  .fs-26 { font-size: 26px }
  .fs-27 { font-size: 27px }
  .fs-28 { font-size: 28px }
  .fs-29 { font-size: 29px }
  .fs-30 { font-size: 30px }
  .fs-31 { font-size: 31px }
  .fs-32 { font-size: 32px }
  .fs-33 { font-size: 33px }
  .fs-34 { font-size: 34px }
  .fs-35 { font-size: 35px }
  .fs-36 { font-size: 36px }
  .fs-37 { font-size: 37px }
  .fs-38 { font-size: 38px }
  .fs-39 { font-size: 39px }
  .fs-40 { font-size: 40px }
  .fs-42 { font-size: 42px }
  .fs-44 { font-size: 44px }
  .fs-46 { font-size: 46px }
  .fs-48 { font-size: 48px }
  .fs-50 { font-size: 50px }
  .fs-52 { font-size: 52px }
  .fs-54 { font-size: 54px }
  .fs-56 { font-size: 56px }
  .fs-58 { font-size: 58px }
  .fs-60 { font-size: 60px }
  .fs-65 { font-size: 65px }
  .fs-70 { font-size: 70px }
  .fs-72 { font-size: 72px }
}
ins[data-type='screen'] { display: none; content: 'xs' }
@media (min-width:768px) {
  ins[data-type='screen'] { content: 'sm' }
}
@media (min-width:992px) {
  ins[data-type='screen'] { content: 'md' }
}
@media (min-width:1200px) {
  ins[data-type='screen'] { content: 'lg' }
}
@media only screen and (max-width:1599px) {
  .project-list[data-view='block'] .project-list-item { width: 33.3333% }
}
@media only screen and (max-width:1279px) {
  .frame-wide { margin-right: 40px; margin-left: 40px }
  .project-list[data-view='block'] .project-list-item { width: 50% }
}
@media (max-width:991px) {
  .font-max { font-size: 40px }
  .font-xxl { font-size: 28px }
  .font-xl { font-size: 24px }
  .font-lg { font-size: 20px }
  .font-md { font-size: 17px }
  .font-sm { font-size: 14px }
  .font-xs { font-size: 12px }
  .font-xxs { font-size: 10px }
  .frame-wide { margin-right: 30px; margin-left: 30px }
  .home-project-item .overview { padding: 20px 30px }
  .frame-contact { margin-right: 10%; margin-left: 10% }
  .project-list[data-view='block'] .project-list-item { width: 100% }
  .top-nav-menu { position: fixed; width: 600px; background-color: black; height: 100%; -webkit-transform: translateX(100%); transform: translateX(100%); padding: 100px 50px 50px 50px }
  .btn-nav-menu { top: 0 }
}
.btn-nav-menu { transition: none; position: absolute; z-index: 1002; right: 0; top: -100px; width: 50px; height: 50px; text-align: center; padding: 0 }
.btn-nav-menu i { transition: opacity .3s; position: absolute; font-size: 40px; width: 100%; height: 100%; left: 0; top: 0; margin: 0; display: block; line-height: 50px }
body.nav-opened .btn-nav-menu i.icon-cxany-menu, .btn-nav-menu i.icon-cxany-close { opacity: 0 }
body.nav-opened .btn-nav-menu i.icon-cxany-close { opacity: 1 }
body.nav-opened .btn-nav-menu i { color: white }
.btn-nav-menu:before { display: block; width: 100%; height: 100%; transition: opacity .3s; opacity: 0; background-size: auto 50px; background-image: url("../images/common/menu@2x.png")/*tpa=http://www.ziran.hk/cn/System/View/images/common/menu@2x.png*/; background-position: right top }
.btn-nav-menu[data-state="closed"][data-run="ended"]:before { opacity: 1 }
.btn-nav-menu:hover:before, .btn-nav-menu[data-state="closed"][data-run="ended"]:hover:before { opacity: 0 }
.fixed-nav .top-nav-menu { position: fixed; max-width: 100%; background-color: rgba(0, 0, 0, .8); height: 100%; text-align: center; -webkit-transform: translateY(-100%); transform: translateY(-100%); padding-top: 10% }
.fixed-nav .btn-nav-menu { top: 0 }
.fixed-nav .top-nav-menu.show-in { -webkit-transform: translateY(0); transform: translateY(0) }
.fixed-nav .top-nav-menu li { max-width: 300px; display: block; float: none; margin-left: auto; margin-right: auto; margin-top: 50px; margin-bottom: 50px }
.fixed-nav .top-nav-menu li a { font-size: 50px; color: white }
.home .slick-dots { display: none !important }
.home .slick-dots li { width: 50px !important; height: 2px !important; margin: 0 5px; vertical-align: middle }
.home .slick-dots li button { border: 0; background: rgba(128, 128, 128, 0.3); width: 100%; height: 100%; padding: 0; border-radius: 0 }
.home .slick-dots li.slick-active button { background: rgba(50, 50, 50, 0.5) }
@media (max-width:767px) {
  .font-max { font-size: 30px }
  .font-xxl { font-size: 20px }
  .font-xl { font-size: 16px }
  .font-lg { font-size: 15px }
  .font-md { font-size: 14px }
  .font-sm { font-size: 13px }
  .font-xs { font-size: 12px }
  .font-xxs { font-size: 10px }
  .home-project-item .overview { padding: 10px 20px }
  .frame-full { padding-right: 20px; padding-left: 20px }
  .frame-wide { margin-right: 20px; margin-left: 20px; padding-left: 0%; padding-right: 0% }
  .btn-mobile-menu { left: 20px }
  .top-nav-close { margin-left: -3px }
  .main-footer-icon a { margin-right: 20px; margin-left: 20px }
  .project-list-text { padding-bottom: 20px; padding-left: 0 }
  .project-list-text .title { line-height: 22px; padding-top: 15px; padding-bottom: 0 }
  .about-gallery-item { width: 100% }
  .always-nav, .btn-footer-menu { display: none }
  .contact-overview { padding-bottom: 30px }
  .main-footer-icon { padding-top: 20px; padding-bottom: 20px; height: 84px }
  .project-details-header { padding-top: 15px; padding-bottom: 15px }
  .home-slides-nav, .news.article-details .window-height.bgs-cover, .project.article-details .window-height.bgs-cover { display: none }
  .home .slick-dots { display: block !important }
  .fixed-nav .top-logo { -webkit-transform: scale(.8, .8) translateX(-1.7em); transform: scale(.8, .8) translateX(-1.7em) }
  .fixed-nav .top-nav-menu li { width: 100%; margin-top: 10%; margin-bottom: 10%; height: 35px; line-height: 35px }
  .fixed-nav .top-nav-menu li a { font-size: 30px; white-space: nowrap }
  .fixed-nav .top-nav-menu { padding-top: 30%; padding-bottom: 5% }
  .fs-40 { font-size: 24px }
  .fs-42 { font-size: 26px; line-height: 1.3 }
  .fs-65 { font-size: 28px; line-height: 1.2 }
  .home-about .overview { padding: 5% 0 4% 0 }
  div[data-view='block'] .overview { padding-top: 0 }
  .home-news-left-title h4 { font-size: 26px; padding-bottom: 5px }
  .home-news-top { padding-right: 15px }
  .section-news:before { width: 100% }
  .home-news-list, .home-news-list-more { text-align: center }
  .home-news-list-more a.button.btn-border { margin-top: 15px; padding-top: 10px; padding-bottom: 10px }
  .home-slogan .frame-wide { padding: 0 }
  .home-slogan .subject { padding-bottom: 5px }
  .home-brand-list li { width: 33.3333%; padding: 10px }
  .home-brand-list strong.fs-50 { font-size: 20px }
  .home-contact .fs-40 { font-size: 20px }
  .main-footer { padding-top: 30px; padding-bottom: 30px; margin-top: 20px; text-align: center }
  .m-f-wechat { padding: 15px }
  .m-f-wechat img { margin-left: 10px; margin-right: 15px }
  .m-f-nav li { display: inline-block; margin: 5px }
  .slick-dots { bottom: 5px }
}
@media (max-width:479px) {
  .top-logo-image { padding-left: 55px; padding-top: 28px; padding-bottom: 28px }
}

img.auto-image {
  max-width: 100%;
  width: auto;
  height: auto;
}