@charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url(http://fonts.googleapis.com/earlyaccess/notosanssc.css);
:root { --normal: rgb(39, 39, 39); --link: rgb(71, 71, 71); --secondary: rgb(93, 93, 93); --mute: rgb(192, 192, 192); --mute-light: rgb(168, 168, 168); --white: rgb(255, 255, 255); --gray-light: rgb(248, 248, 248); --gray: rgb(238, 238, 238); --red: rgb(255, 87, 20); --black: rgb(0, 0, 0); --yellow: rgb(251, 202, 183); --dark: rgb(53, 53, 53); --light: rgb(120, 120, 120); --top-nav: 8.5rem; --logo-size: 60px; --left-pad: 20px; --left-big: calc(var(--left-pad) + var(--logo-size)); --right-pad: 20px; --fw-bold: 400; --fw-normal: 300; --fw-light: 200; --sub-banner: 81rem; --font-sans: "Noto Sans SC", "Microsoft JhengHei", "-apple-system", "Noto Sans", "Helvetica Neue", "Helvetica", "Nimbus Sans L", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "Source Han Sans CN", "Microsoft YaHei", "ST Heiti", "SimHei"; --font-family: "-apple-system", "Noto Sans", "Helvetica Neue", "Helvetica", "Nimbus Sans L", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "Source Han Sans CN", "Microsoft YaHei", "ST Heiti", "SimHei" }
@media screen and (min-width:1200px) { }
@media screen and (min-width:1440px) {
  :root { --left-pad: 40px }
}
@media screen and (min-width:1600px) { }
@media screen and (min-width:1920px) {
  :root { --left-pad: 60px }
}
@media screen and (min-width:2500px) { }
html { overflow: auto }
body { font-family: var(--font-family); font-weight: var(--fw-normal); font-size: 14px; line-height: 2.3; overflow: hidden; width: 100%; color: var(--secondary) }
body.computer { -webkit-font-smoothing: antialiased }
a:focus, a:active, button:hover, button:focus, button:active, input:focus, textarea:focus, li:focus { text-decoration: none; color: inherit; outline: none }
a, button { transition: background-color .3s, border-color .3s, color .3s, opacity .3s }
a { color: var(--link) }
a:hover, .active em, a:hover em { text-decoration: none; color: var(--primary) }
a.green, .front-green { color: var(--primary) }
a.orange:hover, a.orange.active { color: rgb(128, 128, 128) }
ul, ol, li, p { margin: 0; padding: 0; list-style: none }
p { font-family: var(--font-family) !important }
div, section, dl, dt, dd { position: relative }
dl, dt, dd { vertical-align: top }
input, textarea { resize: none; transition: border .3s, background-color .3s; border-radius: 0; -webkit-appearance: none }
textarea { vertical-align: top }
h1, h2, h3, h4, h5, h6, strong, b { position: relative; margin: 0; font-weight: unset }
h1 { font-size: 22px; line-height: 28px }
h5 { font-size: 15px }
label { font-weight: unset }
dl { margin-bottom: unset }
b, strong { font-weight: var(--fw-bold) }
.ani { transition: all .3s }
.none { display: none !important }
.overview { font-size: 15px }
.inline { display: inline-block; vertical-align: top }
.inline-wrapper { font-size: 0; position: relative }
.inline-item { font-size: 14px; position: relative; display: inline-block; vertical-align: top }
.block { display: block; position: relative }
.pc-div { display: block }
.mobile-div { display: none }
.black-100 { color: rgb(0, 0, 0) }
.black-90 { color: rgb(26, 26, 26) }
.black-60 { color: var(--secondary) }
.white { color: rgb(255, 255, 255) }
.strong { font-weight: 400 }
.normal { font-weight: 300; font-style: normal }
.light { font-weight: 200 }
.front-link { transition: color .4s, background-color .4s }
.primary { color: var(--primary) }
.gray { color: var(--gray) }
.white { color: var(--white) }
.dark { color: var(--dark) }
.black { color: var(--black) }
.mute { color: var(--mute) }
.light { color: var(--light) }
.secondary { color: var(--secondary) }
h2.subject { font-size: 16px; font-weight: 400; line-height: 55px; margin-bottom: 1px; text-align: center; color: rgb(77, 77, 77); background: rgb(224, 224, 224) }
.full-size { position: relative; overflow: hidden; width: 100%; height: 100% }
.height-full { height: 100% }
.font-0 { font-size: 0 }
.fix-height { overflow: hidden }
.font-0>div, .font-0>p, .font-0>button, .font-0>a { font-size: 14px }
.shadow { margin-bottom: 15px; border: 1px solid rgb(224, 224, 224); border-radius: 2px; box-shadow: 1px 1px 3px rgba(0, 0, 0, .35) }
.full-height { height: 100% }
.frame-full { padding-right: var(--left-pad); padding-left: var(--left-pad); transition: padding .3s }
.frame-wide, .frame-middle, .frame-narrow, .frame-text, .row-middle, .max-1200, .max-1500, .max-1700, .row-wide { max-width: 100%; margin-right: auto; margin-left: auto }
.frame-middle { max-width: 1000px }
.frame-narrow { width: 750px }
.frame-text { width: 460px }
.frame-table { display: table !important; width: 100%; height: 100% }
.frame-cell, .table-cell { display: table-cell !important; vertical-align: middle }
.max-900 { max-width: 900px; margin-right: auto; margin-left: auto }
.row-wide { max-width: 100%; padding-left: 10px; padding-right: 10px }
.row-middle { max-width: 100%; padding-left: 20px; padding-right: 20px }
.max-1200 { max-width: 1200px }
.max-1500 { max-width: 1500px }
.max-1700 { max-width: 1700px }
.frame-wide { padding-left: calc(var(--left-pad) + var(--logo-size)); padding-right: calc(var(--left-pad) + var(--logo-size)) }
@media screen and (min-width:768px) {
  .row-middle { padding-left: 40px; padding-right: 40px }
  .align-menu { padding-left: 45px; padding-right: 45px }
}
@media screen and (min-width:1280px) {
  .row-wide { padding-left: 40px; padding-right: 40px }
  .row-middle { padding-left: 80px; padding-right: 80px }
  .align-menu { padding-left: 45px; padding-right: 45px }
}
@media screen and (min-width:1600px) {
  .row-wide { padding-left: 30px; padding-right: 30px }
  .row-middle { padding-left: 105px; padding-right: 105px }
}
@media screen and (min-width:1920px) {
  .row-wide { padding-left: 80px; padding-right: 80px }
  .row-middle { max-width: 1920px; padding-left: 145px; padding-right: 145px }
  .align-menu { padding-left: 85px; padding-right: 85px }
}
.nowrap, .ellipsis { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
.multi-ellipsis { display: -webkit-box !important; overflow: hidden; word-break: break-word; -webkit-box-orient: vertical }
.fs-light { font-family: var(--font-sans); font-weight: var(--fw-light) !important }
.fw-200 { font-weight: 200 }
.fw-300 { font-weight: 300 }
.fw-400 { font-weight: 400 }
.fw-500 { font-weight: 500 }
.fs-9{font-size:.45rem}.fs-10{font-size:.5rem}.fs-11{font-size:.55rem}.fs-12{font-size:.6rem}.fs-13{font-size:.65rem}.fs-14{font-size:.7rem}.fs-15{font-size:.75rem}.fs-16{font-size:.8rem}.fs-17{font-size:.85rem}.fs-18{font-size:.9rem}.fs-19{font-size:.95rem}.fs-20{font-size:1rem}.fs-21{font-size:1.05rem}.fs-22{font-size:1.1rem}.fs-23{font-size:1.15rem}.fs-24{font-size:1.2rem}.fs-25{font-size:1.25rem}.fs-26{font-size:1.3rem}.fs-27{font-size:1.35rem}.fs-28{font-size:1.4rem}.fs-29{font-size:1.45rem}.fs-30{font-size:1.5rem}.fs-31{font-size:1.55rem}.fs-32{font-size:1.6rem}.fs-33{font-size:1.65rem}.fs-34{font-size:1.7rem}.fs-35{font-size:1.75rem}.fs-36{font-size:1.8rem}.fs-37{font-size:1.85rem}.fs-38{font-size:1.9rem}.fs-39{font-size:1.95rem}.fs-40{font-size:2rem}.fs-42{font-size:2.1rem}.fs-44{font-size:2.2rem}.fs-46{font-size:2.3rem}.fs-48{font-size:2.4rem}.fs-50{font-size:2.5rem}.fs-52{font-size:2.6rem}.fs-54{font-size:2.7rem}.fs-56{font-size:2.8rem}.fs-58{font-size:2.9rem}.fs-60{font-size:3rem}.fs-62{font-size:3.1rem}.fs-64{font-size:3.2rem}.fs-66{font-size:3.3rem}.fs-68{font-size:3.4rem}.fs-70{font-size:3.5rem}.fs-72{font-size:3.6rem}.fs-74{font-size:3.7rem}.fs-76{font-size:3.8rem}.fs-78{font-size:3.9rem}.fs-80{font-size:4rem}.fs-82{font-size:4.1rem}.fs-84{font-size:4.2rem}.fs-86{font-size:4.3rem}.fs-88{font-size:4.4rem}.fs-90{font-size:4.5rem}.fs-92{font-size:4.6rem}.fs-94{font-size:4.7rem}.fs-96{font-size:4.8rem}.fs-98{font-size:4.9rem}.fs-100{font-size:5rem}
.p-t{padding-top:5rem}.p-t-lg{padding-top:8rem}.p-t-md{padding-top:4rem}.p-t-sm{padding-top:2.5rem}.p-t-xs{padding-top:1.5rem}.p-t-min{padding-top:.75rem}.p-b{padding-bottom:5rem}.p-b-lg{padding-bottom:8rem}.p-b-md{padding-bottom:4rem}.p-b-sm{padding-bottom:2.5rem}.p-b-xs{padding-bottom:1.5rem}.p-b-min{padding-bottom:.75rem}.m-t{margin-top:5rem}.m-t-lg{margin-top:8rem}.m-t-md{margin-top:4rem}.m-t-sm{margin-top:2.5rem}.m-t-xs{margin-top:1.5rem}.m-t-min{margin-top:.75rem}.m-b{margin-bottom:5rem}.m-b-lg{margin-bottom:8rem}.m-b-md{margin-bottom:4rem}.m-b-sm{margin-bottom:2.5rem}.m-b-xs{margin-bottom:1.5rem}.m-b-min{margin-bottom:.75rem}.m-l{margin-right:5rem}.m-l-lg{margin-left:8rem}.m-l-md{margin-left:4rem}.m-l-sm{margin-left:2.5rem}.m-l-xs{margin-left:1.5rem}.m-l-min{margin-left:.75rem}.m-r{margin-right:5rem}.m-r-lg{margin-right:8rem}.m-r-md{margin-right:4rem}.m-r-sm{margin-right:2.5rem}.m-r-xs{margin-right:1.5rem}.m-r-min{margin-right:.75rem}.l-h-lg{line-height:2.5}.l-h-md{line-height:2.2}.l-h-sm{line-height:2}.l-h-xs{line-height:1.6}.l-h-2-8{line-height:2.8}.l-h-2-7{line-height:2.7}.l-h-2-6{line-height:2.6}.l-h-1-4{line-height:1.4}.l-h-1-3{line-height:1.3}.l-h-1-2{line-height:1.2}.l-h-1-1{line-height:1}.l-h-1{line-height:1}@media screen and (min-width:1900px){.p-t{padding-top:6rem}.p-b{padding-bottom:6rem}.m-t{margin-top:6rem}.m-b{margin-bottom:6rem}.p-t-md{padding-top:5rem}.p-b-md{padding-bottom:5rem}.m-t-md{margin-top:5rem}.m-b-md{margin-bottom:5rem}}.p-l{padding-left:5rem}.p-l-lg{padding-left:8rem}.p-l-md{padding-left:4rem}.p-l-sm{padding-left:2.5rem}.p-l-xs{padding-left:1.5rem}.p-l-min{padding-left:.75rem}.p-r{padding-right:5rem}.p-r-lg{padding-right:8rem}.p-r-md{padding-right:4rem}.p-r-sm{padding-right:2.5rem}.p-r-xs{padding-right:1.5rem}.p-r-min{padding-right:.75rem}.m-l{margin-left:5rem}.m-l-lg{margin-left:8rem}.m-l-md{margin-left:4rem}.m-l-sm{margin-left:2.5rem}.m-l-xs{margin-left:1.5rem}.m-l-min{margin-left:.75rem}.m-r{margin-right:5rem}.m-r-lg{margin-right:8rem}.m-r-md{margin-right:4rem}.m-r-sm{margin-right:2.5rem}.m-r-xs{margin-right:1.5rem}.m-r-min{margin-right:.75rem}
[data-clamp="2"] { -webkit-line-clamp: 2 }
[data-clamp="3"] { -webkit-line-clamp: 3 }
[data-clamp="4"] { -webkit-line-clamp: 4 }
[data-clamp="5"] { -webkit-line-clamp: 5 }
.flex { display: flex }
.flex-row, .flex-sb { display: flex; justify-content: space-between }
.flex-cc { display: flex !important; align-items: center; justify-content: center }
.flex-cs { display: flex !important; align-items: center; justify-content: flex-start }
.flex-ce { display: flex !important; align-items: center; justify-content: flex-end }
.flex-cb { display: flex !important; align-items: center; justify-content: space-between }
.flex-se { display: flex !important; justify-content: flex-end }
.grid { display: flex; list-style: none; flex-wrap: wrap }
.grid [class*="width-"] { max-width: 100% }
.width-1-8 { width: 12.5% }
.width-2-8, .width-1-4 { width: 25% }
.width-1-5 { width: 20% }
.width-3-8 { width: 37.5% }
.width-4-8, .width-1-2 { width: 50% }
.width-5-8 { width: 62.5% }
.width-6-8, .width-3-4 { width: 75% }
.width-7-8 { width: 87.5% }
.width-1-3 { width: 33.3333% }
.width-2-3 { width: 66.6666% }
.width-1-6 { width: 16.6666% }
.width-1-7 { width: 14.285% }
.width-1-10 { width: 10% }
.width-auto { flex-grow: 1 }
.grid.spacing-10>[class*="width-"] { padding-right: .5rem; padding-left: .5rem }
.nav-tele { height: 3.2rem; color: var(--white); border: 1px solid var(--white); border-radius: 16px; line-height: 3rem; padding-left: 3.5rem; padding-right: 3.5rem; margin-left: 7rem }
.nav-tele>a { color: var(--white); font-weight: 400 }
.nav-tele>a:hover { color: var(--primary) }
.nav-tele-con { z-index: -1; pointer-events: none; transition: opacity .25s; opacity: 0; font-size: 1.4rem; color: var(--normal); background-color: var(--white); position: absolute; width: 100%; padding: 2.5rem 2rem; left: 0; top: 3.5rem; border-radius: 10px; box-shadow: 0 0 9px 3px rgba(0, 0, 0, .1) }
.nav-tele-con dl:not(:first-child) { margin-bottom: 0; margin-top: 1.5rem }
.nav-tele-con dt { color: var(--mute); margin-bottom: 15px }
.nav-tele-con dd { line-height: 1.8 }
.nav-tele-con:before { content: ""; position: absolute; width: 100%; height: 1rem; z-index: 0; left: 0; top: -1rem }
.nav-tele:hover .nav-tele-con { z-index: 1; opacity: 1; pointer-events: unset }
.white-nav .nav-tele, .white-nav .nav-tele a { border-color: var(--link); color: var(--link) }
.white-nav .nav-tele a:hover { color: var(--primary) }
.white-nav body { padding-top: var(--top-nav) }
.bottom-shadow { margin-bottom: 100px !important; z-index: 1 }
.bottom-shadow:after { content: ""; position: absolute; z-index: -1; width: 200%; left: -25%; bottom: -20px; background: white; height: 20px; box-shadow: 0 5px 4px -1px rgba(0, 0, 0, .15) }
.top-shadow { overflow: hidden }
.top-shadow:after { content: ""; position: absolute; z-index: 1; width: 200%; left: -25%; top: -20px; background: white; height: 20px; box-shadow: 0 5px 4px -1px rgba(0, 0, 0, .15) }
.home .hwt-list .subject { font-size: 35px; line-height: 1.8 }
.home .hwt-list .sub { font-size: 20px }
.common-works-list-item a .ratio-4-3 { padding-top: 77% }
.common-works-list-item a .inner img { width: 1px; height: 1px; opacity: 0 }
.home .section-works .h-s-more { padding-top: 1rem; padding-bottom: 50px }
.home-works-header .title-with-line, .twl-gray.title-with-line { padding-top: 5rem; margin-top: 0; margin-bottom: 5rem; color: var(--secondary) }
.home-works-header .title-with-line:before, .twl-gray.title-with-line:before { border-left: 1px solid rgb(149, 149, 149) !important }
.home-overview-con.bottom-shadow.dark-shadow:after { background-color: var(--white); z-index: 3 }
.home-mono.bottom-shadow { padding-bottom: 8rem; margin-bottom: 20px !important }
.home-mono.bottom-shadow:after { z-index: 2; background-color: var(--gray); height: 10rem }
.home-mono-list { border-top: 0 solid var(--white); background-color: var(--white) }
.home-mono-list>li { margin-bottom: 2px }
.home-mono a { transition: background-color .25s; background-color: var(--gray) }
.home-mono a:hover { background-color: var(--light) }
.home-mono .text { padding: 2rem 4rem; display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%; height: 100% }
.home-mono .text>span { transition: all .25s; width: 100% }
.home-mono .cats, .home-mono .subject, .home-mono .sub { color: var(--black); line-height: 1.5 }
.home-mono .cats { font-family: var(--font-sans); font-weight: var(--fw-light); font-size: 8.4rem; line-height: 1; padding-bottom: 3rem; border-bottom: 1px solid var(--white); margin-bottom: 3rem }
.home-mono .sub { line-height: 2; font-size: 1.4rem }
.home-mono .date { position: absolute; bottom: 2rem; color: var(--secondary) }
.home-mono .date .icon-cxany-eye { display: inline-block; font-size: inherit; margin-bottom: 0; margin-left: 1rem }
.home-mono .front { transition: all .25s ease-in-out; transform: rotateY(-90deg); position: absolute; z-index: 5; width: 100%; height: 100%; left: 0; top: 0; display: flex; flex-direction: column; justify-content: space-between }
.home-mono .front-subject { height: 9.5rem; line-height: 9.5rem; text-align: center; color: white; font-size: 2.5rem; padding-left: 1.5rem; padding-right: 1.5rem }
.home-mono .front-image { width: 100%; flex-grow: 1 }
.home-mono a:hover .front { transform: none }
.home-mono a:hover .cats { opacity: 0 }
.home-mono-list { border: 1px solid var(--white) }
.home-contact { min-height: 40rem; width: 100%; padding-top: 8rem; padding-bottom: 8rem }
.home-contact-header { width: 60rem }
.hch-front { transition: all .25s ease-in-out; position: absolute !important; width: 100%; height: 100%; left: 0; top: 0; z-index: 2; opacity: 0 }
.hch-back { transition: all .25s ease-in-out }
.cfc-btn:hover .hch-back { opacity: 0 }
.cfc-btn:hover .hch-front { opacity: 1 }
.cfc-btn:hover .button.btn-ani { color: var(--black) }
.cfc-btn:hover .button.btn-ani:after { left: 0 }
.cfc-btn:hover .button.btn-ani:before { left: calc(100% + 1px) }
.cfc-avatar { display: block; width: 8.5rem; height: 8.5rem; margin: 1.5rem auto }
.shadow-box { border-radius: 12px; background-color: var(--white); width: 100%; padding: 25px; box-shadow: 0 0 5px rgba(0, 0, 0, .2) }
.fancy-box { display: none }
.fancy-box-con { text-align: center; margin-top: 1.25rem; margin-bottom: 1.25rem }
.fancy-user .fancy-box-con img { max-width: 10rem }
.fancy-user { width: 22rem }
.fbc-tele { padding: 0 1rem; line-height: 32px; height: 32px; border-radius: 16px; font-size: 1.8rem }
.fancy-feedback .fancy-box-con img { width: 575px }
.zygj .quick-fancy .fancybox-close { display: none }
.zygj .quick-fancy .fancybox-skin { background: transparent; padding: 0 !important }
.no-spacing { margin-right: 0; margin-left: 0 }
.no-spacing [class^="col-"] { padding-right: 0; padding-left: 0 }
.spacing-1 { margin-right: -1px; margin-left: -1px }
.spacing-1 [class^="col-"] { padding-right: 1px; padding-left: 1px }
.spacing-2 { margin-right: -2px; margin-left: -2px }
.spacing-2 [class^="col-"] { padding-right: 2px; padding-left: 2px }
.spacing-5 { margin-right: -5px; margin-left: -5px }
.spacing-5 [class^="col-"] { padding-right: 5px; padding-left: 5px }
.spacing-7 { margin-right: -7px; margin-left: -7px }
.spacing-7 [class^="col-"] { padding-right: 7px; padding-left: 7px }
.spacing-10 { margin-right: -10px; margin-left: -10px; margin-right: -1rem; margin-left: -1rem }
.spacing-10 > [class^="col-"] { padding-right: 10px; padding-left: 10px; padding-right: 1rem; padding-left: 1rem }
.spacing-15 { margin-right: -15px; margin-left: -15px }
.spacing-15 > [class^="col-"] { padding-right: 15px; padding-left: 15px }
.spacing-20 { margin-right: -20px; margin-left: -20px }
.spacing-20 > [class^="col-"] { padding-right: 20px; padding-left: 20px }
.spacing-25 { margin-right: -25px; margin-left: -25px }
.spacing-25 > [class^="col-"] { padding-right: 25px; padding-left: 25px }
.spacing-30 { margin-right: -30px; margin-left: -30px }
.spacing-30 > [class^="col-"] { padding-right: 30px; padding-left: 30px }
.spacing-40 { margin-right: -40px; margin-left: -40px; margin-right: -4rem; margin-left: -4rem }
.spacing-40 > [class^="col-"] { padding-right: 40px; padding-left: 40px; padding-right: 4rem; padding-left: 4rem }
.spacing-50 { margin-right: -50px; margin-left: -50px; margin-right: -5rem; margin-left: -5rem }
.spacing-50 > [class^="col-"] { padding-right: 50px; padding-left: 50px; padding-right: 5rem; padding-left: 5rem }
.spacing-60 { margin-right: -60px; margin-left: -60px; margin-right: -6rem; margin-left: -6rem }
.spacing-60 > [class^="col-"] { padding-right: 60px; padding-left: 60px; padding-right: 6rem; padding-left: 6rem }
.spacing-80 { margin-right: -80px; margin-left: -80px }
.spacing-80 > [class^="col-"] { padding-right: 80px; padding-left: 80px }
.fl, .fr { position: relative; display: inline }
.fl { float: left }
.fr { float: right }
.container-fluid { padding: 0 }
[data-ani], .wow { visibility: hidden }
[data-ani].animated { visibility: visible }
.visibility { visibility: visible }
.ratio { position: relative; display: block; overflow: hidden }
.opacity { opacity: 0 }
.ratio .inner { position: absolute; top: 0; left: 0; width: 100%; height: 100% }
.ratio-16-9 { padding-top: 56.25% }
.ratio-9-16 { padding-top: 177.7777% }
.ratio-3-2 { padding-top: 66.6666% }
.ratio-1-1 { padding-top: 100% }
.ratio-2-1 { padding-top: 50% }
.ratio-3-1 { padding-top: 33.3333% }
.ratio-4-3 { padding-top: 75% }
.ratio-3-4 { padding-top: 133.3333% }
.ratio-16-3 { padding-top: 18.75% }
.abs { position: absolute; top: 0; left: 0; display: block; width: 100% }
.round { overflow: hidden; border-radius: 50% }
.bgs-cover, .bgs-contain, .bgs-height, .bgs-width { background-repeat: no-repeat; background-position: center center }
.bgs-cover { background-size: cover }
.bgs-contain { background-size: contain }
.bgs-height { background-size: auto 100% }
.bgs-width { background-size: 100% auto }
.front-white { color: white }
button, .button { overflow: hidden; background-color: transparent; font-weight: 400; position: relative; z-index: 1; display: inline-block; overflow: hidden; padding: 2px 25px; text-align: center; vertical-align: top; border: 0; border-radius: 100px }
.icon { position: relative; display: inline-block; width: 30px; height: 30px; text-align: center; vertical-align: middle; border-radius: 100px; background-image: url(../images/common/btn_common.png); background-repeat: repeat-x; background-position: 0 -1000px; background-size: 500px 500px }
.icon:before { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; content: attr(title); opacity: 0; background-image: url(../images/common/btn_common.png); background-position: 0 -1000px; background-size: 500px 500px; text-shadow: none }
.icon-cxany { font-size: 16px; display: inline-block; vertical-align: middle }
button:hover:before, .button:hover:before, button.active:before, .button.active:before { opacity: 1 }
.button.btn-ani:after, .button.btn-ani:before { position: absolute; top: -1px; left: -1px; width: calc(100% + 2px); height: calc(100% + 2px); content: ""; transition: all .3s; border-radius: 500px }
.button.btn-ani:before { z-index: -2 }
.button.btn-ani:after { z-index: -1; left: calc(-100% - 2px); background: var(--primary) }
.button.btn-ani { line-height: 31px; padding: 0 15px 1px 15px; color: rgb(73, 73, 73); background-color: transparent !important }
.btn-ani:hover { color: white }
.button.btn-border { font-size: 14px; line-height: 1; padding: 8px 25px; letter-spacing: 2px; border: 1px solid rgb(128, 128, 128) }
.button.btn-ani.gray:before { background-color: rgb(73, 73, 73) }
.button.btn-ani:hover:after { left: 0 }
.button.btn-ani:hover:before { left: calc(100% + 1px) }
.button.btn-border.btn-xs { line-height: 25px; padding-right: 15px; padding-left: 15px }
.button.disable, .button.disable:hover:before { cursor: default; color: rgb(210, 210, 210); background: rgb(150, 150, 150); text-shadow: none }
.button.disable:hover:before { opacity: 0 }
.button.normal-spacing { letter-spacing: initial }
button.white, .button.white { border-color: rgb(249, 249, 249) }
button.black, .button.black { color: var(--primary); background: rgba(0, 0, 0, .7) }
button.black:hover, .button.black:hover { color: rgb(249, 249, 249); background-color: var(--primary) }
button.green, .button.green { color: var(--primary); border: 1px solid var(--primary) }
button.green:hover, .button.green:hover { color: rgb(249, 249, 249); background-color: var(--primary) }
button.orange:before, .button.orange:before { color: rgb(249, 249, 249); background-position: 0 -150px }
button.btn-large, .button.btn-large { min-width: 260px }
.at-bottom { position: absolute; bottom: 0; left: 0; width: 100% }
.auto-return { display: none }
.icon, .icon:before { position: relative; display: inline-block; background-image: url(../images/common/icon_common.png); background-repeat: no-repeat; background-position: 0 -1000px; background-size: 500px 500px }
.icon:before { position: absolute; z-index: 1; top: 0; left: 0; display: block; width: 100%; height: 100%; content: " "; transition: opacity .3s; opacity: 0 }
.icon:hover:before { opacity: 1 }
.line-gray-bottom { border-bottom: 1px solid rgb(241, 241, 241) }
.common-header-text { font-size: 14px; max-width: 1200px; margin-right: auto; margin-bottom: 0; margin-left: auto; text-align: center }
.common-header-text p { opacity: .8; padding-top: 2rem }
.title-with-line { font-size: 2.8rem; line-height: 1; position: relative; margin-bottom: 0; padding-top: 8rem; padding-bottom: 6rem; text-align: center }
.title-with-line:before { font-size: 0; position: absolute; bottom: 25px; left: 50%; display: block; width: 40px; height: 1px; margin-left: -20px; content: ""; border-bottom: 1px solid var(--primary) }
h4.title-with-line { font-size: 20px; font-size: 2rem; line-height: 30px; line-height: 3rem; padding-top: 20px; padding-bottom: 5px; padding-bottom: .5rem }
.title-with-line.green, .title-no-line.green { color: var(--primary) }
.title-with-line.at-left { text-align: left }
.title-with-line.at-left:before { left: 0; margin-left: 0 }
.title-no-line { font-size: 20px; font-size: 2rem; font-weight: 400; padding-top: 80px; padding-bottom: 40px; text-align: left; color: rgb(158, 158, 158) }
.height-full { height: 100% }
.same-height { transition: height .5s }
.home { height: 100% }
.top-banner { z-index: 108; height: 100% }
.top-banner .slides-container, .top-banner li { height: 100% }
.has-mask:before { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; content: ""; background-position: center center }
.intro-video { position: absolute; overflow: hidden; width: 100%; height: 100%; transition: opacity .3s; opacity: 0; -o-object-fit: cover; object-fit: cover }
.intro-video.playing { opacity: 1 }
.top-banner-frame { position: absolute; display: flex; align-items: center; justify-content: center; z-index: 5; top: 0; left: 0; width: 100%; height: 100%; padding-top: 120px; padding-bottom: 75px; color: rgb(249, 249, 249) }
.top-banner-frame a:hover { color: white; border-color: white }
.nav-top-logo a { font-size: 14px; line-height: 60px; display: inline-block; height: 60px; vertical-align: top; color: rgb(249, 249, 249) }
.nav-top-logo img { float: left; max-width: 100%; height: 100% }
.nav-top-social { line-height: 60px; height: 60px }
.share-to-wechat { width: 320px; padding: 10px; background-color: rgb(255, 255, 255) }
.share-to-wechat-header { font-size: 18px }
.share-to-wechat-content { padding: 20px 0; border-top: 1px solid rgb(200, 200, 200); border-bottom: 1px solid rgb(200, 200, 200) }
.share-to-wechat-content img { max-width: 220px }
.share-to-wechat-footer { font-size: 12px; line-height: 1.6; padding: 10px }
.common-social a { font-size: 24px; display: inline-block; width: 30px; height: 30px; margin: 0 5px; padding: 3px; vertical-align: middle; color: rgba(255, 255, 255, .9) !important; border-radius: 50%; background-color: rgba(0, 0, 0, .4) }
.common-social a:hover { background-color: var(--primary) }
.icon-webchat { background-position: -180px 0 }
.icon-qzone { background-position: -210px 0 }
.icon-sina { background-position: -240px 0 }
.icon-qq { background-position: -270px 0 }
.top-banner-text { width: 100%; padding-left: 10%; padding-right: 10% }
.top-banner-line:after { position: absolute; bottom: 0; opacity: .5; left: 50%; width: 260px; margin-left: -130px; content: ""; border-bottom: 1px solid rgb(249, 249, 249) }
.top-banner-frame h2 { font-size: 58px; font-weight: normal; margin: 15px 0; padding: 10px 0; transition: font-size .3s; text-indent: 5px; letter-spacing: 5px; background-repeat: no-repeat; background-position: center center; background-size: auto 100% }
.top-banner-frame h2>img { margin-left: -5px }
.top-banner-scroll { font-size: 16px; line-height: 50px; text-indent: 8px; letter-spacing: 8px }
.top-banner-more { color: var(--primary); font-size: 2.2rem; line-height: 2; position: relative; display: inline-block; padding: 0 28px; margin-top: 20px; margin-right: auto; margin-left: auto; letter-spacing: 3px; opacity: .75; border: 1px solid var(--primary); border-radius: 100px }
.top-banner-more:hover { opacity: 1; border-color: var(--primary) }
.home-flash-down { position: relative; display: inline-block; width: 70px; height: 40px; margin-bottom: 120px; transition: all .4s }
.home-flash-down .icon-cxany-flash-down { font-size: 35px; position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; -webkit-font-smoothing: auto }
.home-flash-down em { position: absolute; z-index: 2; top: 0; left: 0; display: block; visibility: hidden; width: 100%; height: 100%; -webkit-animation: moveInUp .6s cubic-bezier(.445, .05, .55, 1) .2s infinite alternate; animation: moveInUp .6s cubic-bezier(.445, .05, .55, 1) .2s infinite alternate }
.home-flash-down em i { font-size: 35px; text-shadow: 0 0 5px rgba(255, 255, 255, .8) }
.home-flash-down:hover .mm { -webkit-animation-play-state: paused; animation-play-state: paused }
.home-flash-down:hover em { visibility: visible }
.home-flash-down:hover .flash-down { visibility: hidden }
.nav-main { position: relative; height: var(--top-nav); z-index: 128; top: 0; left: 0; width: 100%; background-color: rgb(249, 249, 249); box-shadow: 0 2px 2px rgba(0, 0, 0, .1) }
.nav-main .row { line-height: 60px; height: 60px; width: 100% }
.nav-main-logo { display: inline-block; width: var(--logo-size); height: var(--logo-size); overflow: hidden }
.nav-main-logo img { width: 100%; height: 100%; position: absolute; left: 0; top: 0; transition: opacity .25s }
.logo-white { opacity: 0 }
.logo-color { opacity: 1 }
.nav-main-menu { height: 60px; padding-left: 20px }
.nav-main-menu a, .nav-main-menu h2 { font-weight: normal; font-size: 20px; line-height: 60px; display: inline-block; margin-right: 15px; margin-left: 15px; transition: font .35s; color: var(--link) }
body.fixed-bar .nav-main { position: fixed; z-index: 999; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); height: 60px }
body.fixed-bar .nav-main-menu a { font-size: 1.8rem }
body.fixed-bar .nav-tele { border-color: var(--link); color: var(--link) }
body.fixed-bar .nav-tele a { color: var(--link) }
body.fixed-bar .logo-white { opacity: 0 }
body.fixed-bar .logo-color { opacity: 1 }
@media only screen and (min-width:992px) { }
.nav-main-menu a { transition: all .25s }
.nav-main-menu a:last-child { margin-right: 0 }
.nav-main-menu h2 a { margin: 0; vertical-align: top }
.nav-main-menu a.active, .nav-main-menu a:hover, .nav-main-menu h2 a { color: var(--primary) !important }
.nav-main { transition: all .25s }
.home .sub-page-top-block { display: none }
.home .fixed-background { background-attachment: initial !important }
.nav-main { position: fixed; background-color: white; box-shadow: none }
.transparent-nav .nav-main { background-color: transparent }
.transparent-nav .nav-main-menu a { color: white }
.fixed-bar .nav-main { position: fixed; background-color: white; box-shadow: 0 2px 8px rgba(0, 0, 0, .2) }
.transparent-nav .fixed-bar .nav-main-menu a { color: var(--link) }
.white-nav .nav-main-logo img.logo-color { opacity: 1 }
.white-nav .nav-main-logo img.logo-white { opacity: 0 }
.section-services { background-color: var(--gray) }
.home-notice-text { padding: 40px }
.home-notice-image { background-repeat: no-repeat; background-position: center center; background-size: auto 100% }
.home-notice-image img { visibility: hidden }
.home-overview { padding-top: 120px; padding-bottom: 120px }
.home-bd-thumbs { position: absolute; left: -54321px }
.home-brand-con.bottom-shadow.dark-shadow { z-index: 2 }
.home-brand-, .section-services { padding-bottom: 50px }
.home-brand { padding-bottom: 0; padding-top: 8rem }
.home-brand-header { padding-bottom: 0px; padding-bottom: 0px }
.home-brand .title-with-line:before { border-color: white; bottom: 10px }
.home-brand-list-, .home-brand-links { overflow: hidden; max-width: 1450px; margin-right: auto; margin-left: auto; padding-right: 50px; padding-left: 50px }
.home-brand-list-li { padding: 10px; color: var(--normal); line-height: 2 }
.home-brand-list-div { overflow: hidden; min-height: 45rem; padding: 0 2rem; border: 1px solid var(--dark) }
.home-brand-list-sub-subject { font-size: 1.6rem }
.home-brand-list-subject { margin-top: 70px; background-size: auto 100%; height: 200px }
.home-brand-links { padding-top: 40px }
.home-brand-links a { font-size: 18px; line-height: 41px !important; min-width: 75%; max-width: 95%; margin-top: 20px; padding: 2px 15px !important; text-indent: 3px; letter-spacing: 3px; color: white !important; border-color: rgb(209, 209, 209) }
.home-brand-list-div>div { transition: all .3s ease-in-out; z-index: 2 }
.home-brand-list-div .background { font-size: 2.5rem; position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 30px; -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg); color: black; line-height: 2 }
.home-brand-list-div .front { z-index: 2 }
.home-brand-list-div:before { transition: all .3s ease-in-out; content: ''; pointer-events: none; z-index: 0; font-size: 2.5rem; position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 30px; transform-origin: left top; transform: scaleY(0); background-color: var(--primary) }
.home-brand-list-div:hover .front { -webkit-transform: rotateY(90deg); transform: rotateY(90deg) }
.home-brand-list-div:hover .background, .home-brand-list-div:hover:before { transform: none }
.section-news { padding-bottom: 15rem }
.section-news:after { position: absolute; z-index: -1; top: 0; left: 0; width: 50%; height: 100%; content: ""; background-color: var(--gray-light) }
.home-news-list { padding-top: 10% }
.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: 30px; line-height: 38px }
.home-news-list .time-year { font-size: 18px }
.home-news-list .title { font-size: 21px; 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: 3rem; margin-bottom: 3rem }
.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 }
.home-news-top .title { line-height: 1.4; font-size: 3.5rem }
.home-news-top .overview { line-height: 30px; overflow: hidden; height: 90px; 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: 5rem; 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: 0 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: 20px }
.button-arrow-down { font-size: 12px; line-height: 29px; position: relative; display: inline-block; height: 30px; padding: 0 20px; color: rgb(255, 255, 255); border-radius: 100px; background-color: rgba(0, 0, 0, .7) }
.button-arrow-down:after { position: absolute; z-index: 9; top: 30px; left: 50%; height: 0; margin-left: -8px; content: ""; transition: border-color .3s; border-top: 10px solid rgba(0, 0, 0, .7); border-right: 8px solid transparent; border-left: 8px solid transparent }
.button-arrow-down:hover { color: rgb(255, 255, 255); background-color: var(--primary) }
.button-arrow-down:hover:after { border-top-color: var(--primary) }
.button-arrow-down.bg-green { background-color: var(--primary) }
.button-arrow-down.bg-green:after { border-top-color: var(--primary) }
.button-arrow-down.bg-green:hover { background-color: rgba(0, 0, 0, .7) }
.button-arrow-down.bg-green:hover:after { border-top-color: rgba(0, 0, 0, .7) }
.full-list { overflow: auto }
.part-main { float: left; max-width: 1200px }
.part-right { float: right; max-width: 625px }
.home-practice-list { min-height: 620px; margin-top: 20px; background-color: rgb(249, 249, 249) }
.home-practice-list .part-main:before { position: absolute; top: 0; left: 0; width: 10px; height: 140px; content: ""; background-color: var(--primary) }
.home-practice-list .part-main { width: 900px; padding-left: 165px }
.home-practice-list-header h5 { font-size: 13px; height: 65px; padding-top: 40px }
.home-practice-list-header h3 { font-size: 36px; position: relative; height: 75px; padding-top: 12px; color: var(--primary) }
.home-practice-list-header h3:after { position: absolute; bottom: 0; left: 0; width: 70px; height: 1px; content: ""; background-color: var(--primary) }
.home-practice-list-header strong { font-weight: normal; position: absolute; right: 0; bottom: 20px; display: block; text-align: right; color: var(--primary) }
.home-practice-list .part-right { width: 400px }
.home-practice-list-overview { overflow: hidden; height: 340px; margin-bottom: 5px; padding-top: 50px; padding-left: 80px }
.home-practice-list-more { padding-left: 80px }
.home-practice-list-more-tag { display: block; visibility: hidden; margin-bottom: 20px }
.home-practice-list-more-tag.active { visibility: visible }
.home-practice-list-image { position: relative; height: 620px; margin: 0 }
.home-practice-list-image dt { font-weight: normal; height: 460px; margin-bottom: 10px; background-position: center center; background-size: cover }
.home-practice-list-image dd { float: left; width: 33.3333%; height: 150px; background-position: center center; background-size: cover }
.home-practice-list-image a { position: relative; display: block; width: 100%; height: 100%; text-align: center; opacity: 0; background-color: rgba(0, 0, 0, .75) }
.home-practice-list-image a:hover { opacity: 1 }
.home-practice-list-image a span { font-size: 13px; line-height: 20px; position: absolute; top: 50%; left: 0; overflow: hidden; width: 100%; height: 70px; margin-top: -35px; padding: 0 20px; color: rgb(180, 179, 179) }
.home-practice-list-image a strong { font-size: 14px; position: relative; display: block; margin-bottom: 5px; color: rgb(249, 249, 249) }
.home-practice-list-image a strong:after { font-weight: normal; display: block; margin-top: 5px; content: "———"; color: var(--primary) }
.hsmore-inno.h-s-more { padding-top: 6rem; padding-bottom: 6rem }
.home-teams { padding-bottom: 50px; color: rgb(255, 255, 255) }
.home-teams-header { padding-bottom: 50px }
.home-teams-list .row:first-child { font-size: 0 }
.home-teams-list .col-md-6 { font-size: 13px; display: inline-block; float: none; vertical-align: top }
.home-teams-list dl { margin-top: 30px; margin-bottom: 30px; padding-right: 30px; padding-left: 30px }
.home-teams-list dt { position: absolute; top: 8px; left: 30px; display: block }
.home-teams-list dt img { width: 110px; height: 110px; border-radius: 50% }
.home-teams-list dd { line-height: 200%; padding-left: 140px }
.home-teams-list-subject { padding-bottom: 15px; font-weight: 400 }
.home-teams-list-subject span { display: inline-block; padding: 0 0 0 10px; vertical-align: top; font-weight: normal }
.home-reviews { padding-top: 0 }
.home-works-con { padding-top: 8rem }
.home-works, .section-works { padding-bottom: 0px }
.home-works-con .hcw-list { margin-top: 10rem }
.home-works { padding-bottom: 8rem }
.home-works-mono { display: flex; flex-wrap: wrap; padding-top: 8rem }
.home-works-mono .hwm-item { width: 33.3333% }
.hwm-item a .inner>img { width: 0; height: 0; position: absolute }
.hwm-item-text { padding: 2rem 6rem; max-width: 100% }
.hwmi-subject { font-size: 3.5rem; color: var(--black) }
.hwmi-sub { font-size: 2rem; color: var(--dark) }
.hwm-item a:before { transition: all .25s; content: ''; transform-origin: left top; pointer-events: none; position: absolute; left: 0; top: 0; width: 100%; height: 100% }
.hmono-item .hwm-item-text { text-align: center }
.hmono-item a { background-color: var(--gray) }
.hmono-item a .ratio { z-index: 1 }
.hmono-item a:before { background-color: var(--primary); z-index: 0; transform: scaleY(0) }
.hmono-item a:hover:before { transform: none }
.home-works-mono a .ratio-4-3 { padding-top: 85% }
.hworks-item .hwm-item-text { width: 100%; transition: all .25s; opacity: 0; z-index: 3; line-height: 2.1 }
.hworks-item .hwmi-subject { font-size: 5.5rem; color: var(--white) }
.hworks-item .hwmi-sub { color: var(--white); padding-top: 2rem; padding-bottom: 2rem }
.hworks-item .hwmi-sub:before { content: ''; position: absolute; left: 0; top: 0; width: 11.5rem; height: 0; border-top: 1px solid var(--white) }
.hworks-item a:before { background-color: var(--black); z-index: 2; transform: scaleY(0); opacity: .5 }
.hworks-item a:hover:before { transform: none }
.hworks-item a:hover .hwm-item-text { opacity: 1 }
.hwmo-1 { order: 1 }
.hwmo-2 { order: 2 }
.hwmo-3 { order: 3 }
.hwmo-4 { order: 4 }
.hwmo-5 { order: 5 }
.hwmo-6 { order: 6 }
.hwmo-7 { order: 7 }
.hwmo-8 { order: 8 }
.hwmo-9 { order: 9 }
@media screen and (max-width:1440px){
  .hwm-item-text { padding: 1.5rem 4rem; }
  .hworks-item .hwmi-subject { font-size: 4rem; }
}
.home-works-list-filter { padding-bottom: 50px }
.home-works-list-more { padding-top: 30px; padding-bottom: 10px; text-align: center }
.common-works-trade { width: 86px; height: 32px; cursor: pointer; text-align: center }
.common-works-trade-title { z-index: 6; width: 100%; transition: background-color .1s }
.common-works-trade:hover .common-works-trade-title { background-color: var(--primary) }
.common-works-trade-list { position: absolute; z-index: 5; top: 30px; left: 18px; overflow: hidden; width: 60px; height: 0; background-color: var(--primary) }
.common-works-trade:hover .common-works-trade-list { height: auto }
.common-works-trade-list a { font-size: 13px; line-height: 30px; position: relative; display: block; transition: font .3s; color: rgb(255, 255, 255) !important }
.common-works-trade-list a:hover { font-weight: 600 }
.common-works-trade-list a:after { position: absolute; bottom: 0; left: 50%; width: 30px; margin-left: -15px; content: ""; border-bottom: 1px solid rgba(0, 0, 0, .1) }
.common-works-trade-list a:first-child { margin-top: 10px }
.common-works-trade-list a:last-child { margin-bottom: 10px }
button.gray, .button.gray { font-size: 13px; line-height: 31px; margin-right: 5px; margin-left: 5px; padding: 0 15px 1px 15px; color: rgb(249, 249, 249); background-color: rgb(73, 73, 73) }
button.gray:hover, .button.gray:hover, button.gray.active, .button.gray.active { background-color: var(--primary) }
.common-works-list { font-size: 0; padding-bottom: 20px }
.common-works-list-item { font-size: 13px; display: inline-block; width: 25% }
.common-works-list-item a { line-height: 2; position: relative; display: block; background-position: center center; background-size: cover }
.common-works-list-item .item-inner { transition: all .5s }
.common-works-list-item:hover .item-inner { z-index: 2; -webkit-transform: scale(1.02); transform: scale(1.02); opacity: 1; box-shadow: 0 0 5px rgba(0, 0, 0, .1) }
.common-works-list-item:hover .common-works-list-title { opacity: 1; background-color: rgb(255, 255, 255) }
.common-works-list-item:hover a img:first-child { opacity: 0 }
.common-works-list-title { padding: 28px 20px; transition: opacity .5s; opacity: 1; text-align: left; padding-bottom: 40px }
.common-works-list-item a, .common-works-list-item a em { color: var(--primary) }
.common-works-list-title strong { font-weight: var(--normal); font-size: 2rem; display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--black) }
.common-works-list-title em { font-size: 16px; font-style: normal; display: block }
.common-works-list-information { line-height: 35px; position: relative; display: block }
.common-works-list-information:before { position: absolute; z-index: 2; display: block; width: 100%; height: 100%; content: ""; background-color: rgba(255, 255, 255, .01) }
.common-works-list-information span { font-size: 12px; display: inline-block; min-width: 40px; height: 30px; vertical-align: top }
.icon-cxany-eye, .icon-cxany-heart { font-size: 18px; margin-bottom: 1px }
.home-teams-list dl { min-height: 160px }
.home-enjoy { padding-bottom: 50px }
.home-enjoy .common-works-list-item { width: 20% }
.home-contact-header .h3 { font-size: 16px; line-height: 4rem; letter-spacing: .5rem; margin: 0 }
.home-contact-header .h3 .sup { font-size: 8px; display: inline-block; margin-top: -2px; margin-right: 10px; vertical-align: top }
.home-contact-header .button { transition: all .25s; display: inline-block !important; color: var(--primary); border-color: var(--primary); font-size: 14px; font-weight: 400; padding-left: 2rem; padding-right: 2rem; letter-spacing: initial }
.home-contact-header:hover .button { font-weight: 600 }
.home-contact-details img { max-width: 100%; height: auto }
.cfct-con { padding: 1.5rem 0 2rem 0 }
.btn-inquiry { padding-left: 22px !important; letter-spacing: 5px }
.home-footer { font-size: 12px; z-index: 9; overflow: hidden; background-color: rgb(249, 249, 249) }
.home-footer .row>div { line-height: 220%; float: left; width: 24%; padding-top: 40px; padding-right: 5px; padding-bottom: 40px; padding-left: 5px }
.home-footer .row>div:first-child { width: 22% }
.home-footer .row>div:nth-child(2) { width: 26% }
.home-footer .row>div:last-child { width: 28%; padding-left: 110px; background-repeat: no-repeat; background-position: left center }
.home-footer-links { line-height: 20px; height: 200px; padding-right: 30px !important; padding-left: 30px }
.home-footer-links a { font-size: 12px; display: inline-block; min-width: 49%; padding-right: 10px; padding-left: 20px }
.home-footer-links a:nth-child(even) { padding-left: 5px }
.home-footer-links-div { height: 105px }
.mCSB_inside>.mCSB_container { margin-right: 5px }
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 3px }
.mCS-dark.mCSB_scrollTools .mCSB_draggerRail { width: 1px; background-color: rgba(0, 0, 0, .3) }
.main-footer { z-index: 9; width: 100%; height: 65px; padding-top: 10px; padding-bottom: 10px; background-color: rgb(91, 93, 93) }
.main-footer-nav a { font-size: 13px; font-weight: 400; line-height: 36px; display: inline-block; width: 42px; height: 42px; margin: 0 5px; color: rgb(53, 53, 53); border: 3px solid rgb(113, 115, 115); border-radius: 50%; background-color: rgb(157, 157, 158) }
.main-footer-nav a.qq { background-color: rgb(91, 93, 93) }
.main-footer-nav a:hover { color: rgb(249, 249, 249); background-color: var(--primary) }
.main-footer-nav .icon-cxany-qq { font-size: 32px; padding-bottom: 3px }
.fp-viewing-contact .home .main-footer { bottom: 0 }
.footer-author { margin-top: -35px }
.footer-author a { font-size: 11px; color: rgb(255, 255, 255) }
.sub-page-top-block { z-index: 99; height: 10px; transition: none; background: rgb(0, 0, 0) url(../images/common/sub_page_top_block.jpg) no-repeat center center; background-size: cover; display: none }
.sub-page-nav { font-size: 13px; min-height: 65px; color: rgb(92, 93, 93); background-color: var(--gray) }
.sub-page-nav em { font-style: normal; display: inline-block; padding: 0 5px; color: rgb(92, 93, 93) }
.sub-page-nav em:before { content: ">" }
.sub-page-nav a { color: rgb(182, 182, 181) }
.sub-page-nav a:hover { color: var(--primary) }
.sub-page-nav-position { padding-top: 18px }
.sub-page-search { padding-top: 15px }
.sub-page-nav-search { line-height: 35px; width: 330px; height: 35px; border: 1px solid rgb(209, 209, 209); border-radius: 100px; background-color: var(--gray) }
.sub-page-search .sub-page-nav-search { float: right }
.sub-page-nav-search:after, .sub-page-nav-keywords { line-height: 27px; position: absolute; top: 3px; right: 45px; width: 100%; height: 27px; padding-left: 70px; background-color: transparent }
.sub-page-nav-search:after { font-size: 13px; z-index: 1; content: attr(data-title); transition: all .3s; color: rgba(0, 0, 0, .35) }
.sub-page-nav-search.active:after { width: 80px; padding-left: 0 }
.sub-page-nav-search.input:after { display: none }
.sub-page-nav-keywords { z-index: 2; border: 0 }
.btn-search { font-size: 16px; line-height: 28px; position: absolute; top: -1px; right: -1px; width: 35px; height: 35px; margin: 0; padding: 0; color: rgb(128, 128, 128); border: 1px solid rgb(209, 209, 209); background-color: var(--gray); box-shadow: -2px 0 3px rgba(0, 0, 0, .15), 0 0 0 rgb(0, 0, 0), 0 0 0 rgb(0, 0, 0), 0 0 0 rgb(0, 0, 0) }
.btn-search:hover { background-color: var(--primary) }
.sub-page-overview { padding-bottom: 40px }
.works-class-nav { margin-bottom: 100px; padding-bottom: 5px; border-bottom: 1px solid rgb(174, 174, 174) }
.works-class-nav>a { font-size: 16px; font-weight: 600; position: relative; display: inline-block; margin: 0 10px; padding: 0 5px }
.works-class-nav>a:hover:after, .works-class-nav>a.active:after { position: absolute; bottom: -7px; left: 0; width: 100%; content: ""; border-bottom: 3px solid var(--primary) }
.pager-list { padding-top: 100px; padding-bottom: 100px }
.pager-list a { line-height: 35px; display: inline-block; min-width: 38px; margin: 0 2px; padding: 0 8px; border: 1px solid rgb(203, 204, 204); background-color: rgb(255, 255, 255) }
.pager-list a:hover, .pager-list a.active { color: rgb(255, 255, 255); background-color: var(--primary) }
.pager-list-return { margin-left: 30px !important }
.sub-page-footer .row div { font-size: 12px }
.sub-page-footer h5 { font-size: 12px; font-weight: 600; padding-bottom: 20px }
.home-footer.sub-page-footer .row .sub-page-footer-links { width: 27% }
.home-footer.sub-page-footer .row>div:last-child { width: 25%; padding-left: 0 }
.link-dark a { display: inline-block; padding-right: 15px; color: rgb(128, 128, 128) }
.link-dark a:hover { color: var(--primary) }
.works-back-color { color: rgb(255, 255, 255) }
.works-details .max-1200 { padding-left: calc(var(--left-pad) + var(--logo-size)); padding-right: calc(var(--left-pad) + var(--logo-size)) }
.works-details-overview { font-size: 2.8rem }
@media screen and (min-width:2560px) {
  .frame-wide:not(.always) { max-width: 1700px; padding-left: 0; padding-right: 0 }
  .frame-wide.max-2000 { max-width: 2000px; padding-left: 0; padding-right: 0 }
}
.wdh-con { height: 100%; flex-direction: column; align-items: flex-start }
.works-details-header { line-height: 250%; padding-top: 50px; padding-bottom: 50px }
.works-details-header h3 { font-size: 18px }
.works-details-header h2 { font-size: 30px; font-weight: 600; line-height: 70px; position: relative; margin-bottom: 50px; padding-bottom: 20px }
.works-details-header h2:after { position: absolute; bottom: 0; left: 0; width: 145px; height: 1px; content: ""; background-color: rgb(255, 255, 255) }
.works-details-header a { color: rgb(255, 255, 255) }
.works-details-content { padding-bottom: 8rem }
.gray-block { height: 45px; background-color: rgb(128, 128, 128) }
.works-details-hexinjiazhi-image img { border-radius: 50% }
.works-title { font-size: 24px; font-weight: 600; line-height: 32px; margin-top: 15px; padding-bottom: 5px; color: rgb(77, 77, 77) }
.has-block:before { display: inline-block; width: 25px; height: 29px; margin-right: 10px; content: ""; vertical-align: top; border-top: 4px solid rgb(255, 255, 255) }
.has-line { position: relative; clear: both; height: 0; margin-top: 15px; margin-bottom: 20px }
.has-line:before { position: absolute; bottom: 0; left: 0; display: block; width: 35px; content: " "; border-bottom: 1px solid transparent }
.has-line:after { position: relative; clear: both; content: " " }
.full-line { position: relative; left: 0; width: 100%; height: 1px; margin: 50px 0 }
.image-max-full img { max-width: 100%; height: auto }
.works-details-gallery { font-size: 12px; margin-right: -60px; margin-left: -60px; padding-top: 80px; padding-bottom: 20px }
.works-details-gallery>div { padding-right: 60px; padding-left: 60px }
.works-details-gallery img { width: 100%; height: auto; margin-bottom: 30px }
.works-details-feedback { padding-top: 80px; padding-bottom: 80px }
.works-details-feedback-header { line-height: 100px; padding-left: 30px; border: 1px solid rgb(229, 229, 229); background-color: rgb(255, 255, 255) }
.need-offer { font-size: 16px; line-height: 28px; display: inline-block; height: 30px; margin-left: 10px; padding: 0 15px; color: rgb(255, 255, 255); border-radius: 5px; background-color: var(--primary) }
.need-offer:hover { color: rgb(0, 0, 0) }
.works-details-views { float: right; height: 100px }
.works-details-views>div { display: inline-block; width: 110px; height: 100%; text-align: center; color: var(--primary); border-left: 1px solid rgb(229, 229, 229) }
.works-details-tags { background-color: var(--gray); padding-bottom: 10rem }
.works-details-feedback-list li { position: relative; margin-top: 20px; color: var(--secondary); border: 1px solid rgb(229, 229, 229); background-color: rgb(255, 255, 255) }
.works-details-feedback-list li .user { line-height: 1.6; position: absolute; z-index: 2; top: 0; left: 0; width: 100px; min-height: 100px; margin-right: 20px; padding-top: 30px; padding-right: 10px; padding-bottom: 30px; padding-left: 10px; text-align: center; vertical-align: top; color: rgb(255, 255, 255) }
.works-details-feedback-list li .user:after { position: absolute; top: 20px; right: -5px; width: 0; height: 0; content: ""; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid rgb(209, 209, 209) }
.works-details-feedback-list li .text { width: 100%; min-height: 100px; padding: 10px 10px 10px 25px !important; vertical-align: top; border-left: 100px solid rgb(209, 209, 209) }
.works-details-feedback-list li .time { line-height: 35px; display: block; color: rgb(158, 158, 158) }
.works-details-feedback-list .admin-reply { padding-top: 20px }
.works-details-feedback-list .admin-reply img { float: left; width: 45px; margin: 0 15px 0 5px }
.works-details-feedback-list .admin-reply strong { line-height: 20px; display: block; color: rgb(158, 158, 158) }
.works-details-feedback-form { font-size: 12px; overflow: hidden; margin: 30px 0 80px 0; background-color: rgb(255, 255, 255) }
.works-details-feedback-form input, .works-details-feedback-form textarea { line-height: 30px; position: relative; width: 100%; padding: 15px 25px; transition: border .3s; border: 0; border: 1px solid rgb(229, 229, 229); border-radius: 0; background: transparent }
.works-details-feedback-form input:focus, .works-details-feedback-form textarea:focus { z-index: 2; border: 1px solid var(--primary) }
.works-details-feedback-form textarea { height: 150px; margin-top: -1px }
.btn-submit { font-size: 16px; line-height: 55px; position: absolute; z-index: 9; right: 0; bottom: 0; width: 55px; height: 55px; padding: 0; text-align: center; color: rgb(255, 255, 255); border-radius: 0; background-color: var(--primary) }
.btn-submit:hover { color: rgb(0, 0, 0) }
.common-details-left { overflow-x: hidden; max-width: 1200px; margin-right: 500px; padding-top: 55px }
.common-details-right { z-index: 0; right: 0; float: right; width: 350px; border-right: 1px solid rgb(229, 229, 229); border-left: 1px solid rgb(229, 229, 229); border-bottom: 1px solid rgb(229, 229, 229); background-color: rgb(255, 255, 255) }
.common-details-right.fixed { position: fixed; top: 60px; right: 0 }
.common-details-right-title { font-size: 16px; font-weight: 600; line-height: 70px; border-top: 1px solid rgb(229, 229, 229); border-bottom: 1px solid rgb(229, 229, 229) }
.common-details-right .common-details-right-title { padding-left: 20px }
.common-details-right>ul { padding: 30px 20px }
.common-details-right-related a.text { font-size: 12px; line-height: 30px; display: inline-block; overflow: hidden; width: 220px; vertical-align: top }
.common-details-right-related span { font-size: 12px; display: inline-block; width: 80px; white-space: nowrap; padding-left: 10px; text-align: right; vertical-align: top }
.common-details-right-tags { z-index: 2 }
.common-details-right-tags a { display: inline-block; margin-right: 20px }
.common-details-right-related li .ehrrc-img img { width: 0; height: 0 }
.common-details-right-related li .ehrrc-img { display: none; margin: 10px 0 }
.common-details-right-related li.active .ehrrc-img { display: block; width: 100%; max-height: 245px; height: 20rem }
.common-details-right-related li.active a { font-weight: 400; color: var(--primary) }
.common-details-right-related i { font-size: 1.3rem }
.right-fixed-addons { line-height: 30px; padding-top: 100px; letter-spacing: .5em; border-top: 1px solid rgb(229, 229, 229) }
.i-like-this { height: 24rem; flex-direction: column; text-align: center }
.i-like-this a { line-height: 6.4rem; position: relative; display: inline-block; width: 6.4rem; height: 6.4rem }
@media (max-width:991px) {
  .i-like-this a { -webkit-transform: scale(.6, .6); transform: scale(.6, .6) }
}
.i-like-this span { font-size: 2.3rem; position: relative; z-index: 2; display: inline-block; transition: color .4s; color: rgb(255, 255, 255) }
.icon-cxany-polygon { transition: all .25s; font-size: 6.4rem; position: absolute; top: 0; left: 0 }
.i-like-this a:hover .icon-cxany-polygon { transform: scale3d(1.2, 1.2, 1) }
.enjoy-details { background-color: unset }
.article-like-this { background-color: var(--gray-light) }
.article-prev-next { background-color: var(--gray) }
.enjoy-details .tags-list a { font-size: 1.6rem; color: var(--black) }
.edr-title.edr-tag-title { line-height: 12rem }
.works-related-recommend { margin-top: 50px; padding: 50px 0 }
.works-related-recommend .row { z-index: 1 }
.common-works-list-frame { overflow: hidden; padding: 20px 0 }
.works-related-recommend .common-works-list-item { width: 33.3333%; background-color: rgb(255, 255, 255) }
.works-related-recommend .common-works-list-title { line-height: 1.8; padding-bottom: 5px }
.works-related-recommend-header { padding-bottom: 40px; color: rgb(255, 255, 255) }
.works-related-recommend-header h4 { font-size: 16px }
.works-related-recommend-header>div { line-height: 18px }
.works-related-recommend-header a { color: rgb(255, 255, 255) }
.works-related-recommend-header a:hover { color: var(--primary) }
.gray-box { border: 1px solid rgb(229, 229, 229); background-color: rgb(255, 255, 255) }
.gray-box-header { font-size: 16px; font-weight: 400; padding: 20px 20px 0 20px }
.gray-box-content { padding: 20px }
.gray-box-footer { padding: 0 20px 20px 20px }
.view-more-feedback { line-height: 1.5; margin-top: 20px; margin-bottom: 80px }
.works-feedback-overview { margin-bottom: 50px }
.works-related-sm { display: none }
.works-related-sm .common-details-right-related li { float: left; width: 50% }
.works-related-sm .common-details-right-related li:nth-child(odd) { padding-right: 100px }
.works-related-sm .common-details-right-related li:nth-child(even) { padding-left: 100px }
.article-prev-next { font-size: 1.4rem; line-height: 1; z-index: 9 }
.article-prev-next a { font-size: 1.4rem; position: relative; display: block; transition: background-color .3s }
.article-prev-next a:hover { background-color: transparent !important; color: var(--primary) }
.apn-con { padding: 5rem 10rem; height: 12rem }
.apn-con a { transition: all .25s }
.apn-con a:hover .with-arrow-line:before, .apn-con a:hover .with-arrow-line:after { border-color: var(--primary); color: var(--primary) }
.apnc-back { width: 4%; min-width: 5rem; z-index: 2 }
.apnc-back a { font-size: 3.2rem }
.apnc-item { width: 48% }
.apnc-item strong { padding: 2.5rem; font-weight: 400; max-width: calc(100% - 18rem) }
.apnc-arrow { transition: width .25s; width: 13rem; position: relative; flex-shrink: 0 }
.apnca-left { transform: rotateY(180deg) }
.article-prev-next a:hover .apnc-arrow { width: 18rem }
.mono-details-banner { height: 68rem; padding-bottom: 5rem; padding-left: calc(var(--left-pad) + var(--logo-size)); padding-right: calc(var(--left-pad) + var(--logo-size)) }
.mdb-subject { color: white; font-size: 6rem }
.mdh-con.enjoy-details-header { height: auto; transform: translateY(-100%); flex-direction: unset }
.mono-details-container { background-color: var(--gray-light) }
.mdo-con { transform: translateY(-10rem); margin-bottom: -10rem }
.mdwo { padding-left: 15rem; padding-right: 15rem }
.mdob-heading.edc-heading { margin-top: 1.5rem; color: var(--dark); font-size: 5rem }
@media screen and (min-width:1280px) {
  .mdo-con, .mdwo { padding-left: 9rem; padding-right: 9rem }
}
@media screen and (min-width:1920px) {
  .mdo-con, .mdwo { padding-left: 15rem; padding-right: 15rem }
}
@media screen and (min-width:2560px) {
  .mdo-con, .mdwo { padding-left: 150px; padding-right: 150px }
}
.mdob-nav { height: 5rem; border-bottom: 1px solid var(--gray); margin-bottom: 4.5rem; font-size: 2rem }
.mdob-nav a { display: block; height: 100%; margin-right: 5rem; color: var(--black); font-weight: 400; border-bottom: 3px solid transparent }
.mdob-nav a:hover, .mdob-nav a.active { border-color: var(--primary); color: var(--black) }
.mdob-con { font-size: 2.5rem; color: var(--black); line-height: 2.5 }
.mdob-item { padding-bottom: 8rem }
.mdobi-subject { font-size: 3rem; padding: 2rem; margin-bottom: 1rem }
@media screen and (max-width:1024px) {
  .mdwo, .mdobi-subject { padding-left: 0; padding-right: 0 }
  .mdo-body.max-1200, .mdob-con.max-1200 { padding-left: var(--logo-size); padding-right: var(--logo-size) }
}
.mdc-title { padding: 5rem 0 }
.mdc-title.edhc-list a { pointer-events: none; background-color: var(--primary); color: var(--black) }
.mono-details-archive { padding-top: 6rem; padding-bottom: 6rem }
.mdwo-con { padding-top: 13rem }
.mdwo-con .mdob-item { padding-bottom: 4rem }
.mono-details-info { padding-top: 6rem }
.mono-details-tags { border-bottom: 1px solid rgb(220, 220, 220); margin-bottom: 2rem }
.mono-details-tags a { display: inline-block; padding: 1rem 2.5rem; color: var(--black) }
.mdi-title.title-with-line { font-size: 2.4rem; margin-bottom: 2rem }
.mdi-title.title-with-line:before { display: none }
.mono-details-interested { padding-bottom: 15rem }
.mdsl-item { padding-bottom: 1px; padding-top: 1px }
.mdsl-item a { transition: none; background-color: var(--primary); color: var(--black); font-weight: 400 }
.mdsl-item a:hover { color: var(--white) }
.mdsl-item a .inner>span { transition: all .25s; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; position: absolute; left: 0; top: 0 }
.mdsl-item a .inner i { display: block; font-style: normal; font-size: 4.9rem; line-height: 1.3 }
.mdsl-item .front { opacity: 0 }
.mdsl-item .front i { width: 5rem; text-align: center }
.mdsl-item:nth-child(n+5) { display: none }
.mds-con.active .mdsl-item a .text { opacity: 0 }
.mds-con.active .mdsl-item a .front { opacity: 1 }
.mds-con.active .mdsl-item:nth-child(n+5) { display: block }
.mds-con.active .h-s-more { display: none }
.mds-con.active { padding-bottom: 8rem }
.mds-con .h-s-more { line-height: 8rem; padding-top: 5rem; padding-bottom: 5rem }
.mds-con .h-s-more .button { vertical-align: middle }
.mds-con.bottom-shadow.dark-shadow:after { background-color: var(--gray-light) }
.zygj .fancybox-close { position: absolute; top: -60px; right: 0; width: 60px; height: 60px; transition: all .3s; background: url(../images/common/icon_common.png) no-repeat -220px -60px; background-size: 500px 500px }
.zygj .fancybox-close:hover { -webkit-transform: rotateZ(90deg); transform: rotateZ(90deg) }
.zygj .fancybox-skin { padding: 50px !important; border-radius: 0; background: rgba(35, 35, 35, .9) }
.zygj .fancybox-inner { overflow-x: hidden !important }
.zygj .fancybox-opened .fancybox-skin { box-shadow: none }
.fancybox-quick-feedback { display: none; min-height: 300px; color: rgb(127, 128, 128) }
.fancybox-quick-feedback .title-with-line { padding-top: 0 }
.fancybox-quick-feedback input[type="text"], .fancybox-quick-feedback textarea { width: 100%; margin: 10px 0; padding: 0 15px; vertical-align: top; color: rgb(0, 0, 0); border: 0; border: 1px solid rgb(0, 0, 0); border-radius: 4px }
.fancybox-quick-feedback input[type="text"] { line-height: 50px; height: 50px }
.fancybox-quick-feedback textarea { height: 190px }
.fancybox-quick-feedback .btn-submit { font-size: 13px; line-height: 40px; right: 1px; bottom: 11px; width: 40px; height: 40px }
.fancybox-quick-feedback label { font-weight: normal; padding-right: 15px }
.fancybox-quick-feedback input[type="text"]:focus, .fancybox-quick-feedback textarea:focus { border: 1px solid var(--primary) }
.fancybox-quick-feedback-label { line-height: 16px; width: 14px; margin-top: -15px; margin-bottom: 5px; color: var(--primary) }
.fancybox-quick-feedback-label:after { position: absolute; top: 25px; right: -30px; content: "→" }
.fancybox-quick-feedback .icheckbox_square-green, .iradio_square-green { background-image: url(../images/form/green@gray.png) !important }
.sub-page-banner { height: var(--sub-banner) }
.profession-banner-header { z-index: 2; padding: 0 0 30px 0; background-color: rgb(238, 237, 236) }
.profession-banner-header .title-with-line { padding-top: 60px }
.has-bottom-mask:after { position: absolute; z-index: 3; bottom: -10px; left: 0; display: block; width: 100%; height: 10px; content: ""; background: url(../images/common/profession_banner_header.png) repeat-x left 0; display: none }
.has-bottom-mask.green:after { background-position: left -10px }
.profession-banner-header h3 { font-size: 60px; line-height: 80px }
.profession-banner-body { display: table; width: 100%; height: 580px; margin-top: -5px }
.profession-banner-overview { margin-right: auto; margin-left: auto; padding: 50px 0; color: rgb(255, 255, 255); background-color: rgba(0, 0, 0, .5) }
.table-frame { display: table; width: 100% }
.table-middle { display: table-cell; text-align: center; vertical-align: middle }
.profession-banner-overview-title { font-size: 58px; line-height: 1.5; width: 320px; text-align: center; border-right: 1px dotted rgb(255, 255, 255) }
.profession-banner-overview-text { padding-right: 60px; padding-left: 60px }
.profession-banner-overview-text h4 { font-size: 24px; padding-top: 5px; padding-bottom: 20px; text-align: left }
.opacity-80 { opacity: .8 }
.opacity-60 { opacity: .6 }
.second-fixed-nav { pointer-events: none; opacity: 0; transition: opacity .25s; line-height: 65px; z-index: -1; top: 0; left: 0; width: 100%; transition: opacity .4s; text-align: center; background-color: rgb(249, 249, 249) }
.second-fixed-nav.show-me { pointer-events: unset; opacity: 1; z-index: 110 }
.first-main-page { background-color: rgb(255, 255, 255) }
.bg-default:after, .bg-gray:after { display: table; clear: both; content: "" }
body.fixed-second .second-fixed-nav { position: fixed }
body.fixed-second .first-main-page { margin-top: 70px }
.second-fixed-nav a { transition: background-color .25s; font-size: 15px; display: inline-block; height: 100%; padding-right: 15px; padding-left: 15px }
.second-fixed-nav a:hover { color: var(--primary) }
.second-fixed-nav a.active { color: rgb(255, 255, 255); background-color: var(--primary) }
.second-fixed-nav a.icon-cxany-go-top { font-size: 24px; margin-left: 5px; padding-bottom: 2px; color: rgb(249, 249, 249); -webkit-text-stroke: 1px rgb(155, 155, 155); -moz-text-stroke: 1px rgb(155, 155, 155) }
.second-fixed-nav a.icon-cxany-go-top:hover { color: var(--primary); -webkit-text-stroke: 1px var(--primary) }
.home-pages[data-first="true"] .second-fixed-nav { right: -100%; transition: opacity 300ms linear, right .01s linear 400ms; opacity: 0 }
.row-no-padding.row { margin-right: 0; margin-left: 0 }
.row-no-padding.row>div, .row-no-padding.row>span, .row-no-padding.row>li { padding-right: 0; padding-left: 0 }
.row-no-padding:before, .row-no-padding:after { display: table; content: " " }
.row-no-padding:after { clear: both }
.no-padding>div { padding-right: 0; padding-left: 0 }
.page-scroll-list-header { margin-bottom: 80px }
.title-with-line.has-top-line { margin-top: 70px; padding-top: 30px; border-top: 1px solid rgb(128, 128, 128) }
.profession-values { }
.prov-con { height: 55rem }
.provc-item { width: 100%; height: 100%; transition: all .25s }
.prov-con { padding-left: 20rem; padding-right: 20rem }
.prov-con .spacer i { font-size: 6.4rem; -webkit-font-smoothing: auto; opacity: .65 }
.provc-item dl { display: flex }
.provc-item dt { line-height: 1.1; font-size: 6rem; width: 6rem; font-weight: 400; color: var(--black) }
.provc-item dd { line-height: 1.2; font-size: 2.1rem; width: 2.1rem; color: var(--secondary); margin-left: 5rem; transform: translateY(-5rem) }
.provc-front { position: absolute; left: 0; top: 0; opacity: 0; z-index: 1 }
.prov-con:hover .provc-back { opacity: 0 }
.prov-con:hover .provc-front { opacity: 1 }
.proi-con { border: .8rem solid var(--mute) }
.proi-overview { font-size: 2.2rem; line-height: 2.5; padding: 14rem 18rem 7rem 18rem; margin-bottom: 4rem }
.proi-overview:after { content: ""; position: absolute; left: 50%; bottom: 0; height: 3rem; border-left: 1px solid var(--mute) }
.proi-more { padding-bottom: 4rem }
.proi-more .button { font-size: 2rem; padding-left: 4rem; padding-right: 4rem }
.button.bs-primary { border-color: var(--primary); color: var(--primary) }
.button.bs-dark { border-color: var(--dark); color: var(--dark); background-color: transparent }
.button.bs-primary:hover { background-color: var(--primary); color: var(--white) }
.button.bs-dark:hover { background-color: var(--dark); color: var(--white) }
.button.bottom-arrow { margin-bottom: 20px; overflow: unset }
.button.bottom-arrow:before, .button.bottom-arrow:after { transition: all .3s; content: ""; position: absolute; left: 50%; margin-left: -12px; bottom: -21px; width: 0; height: 0; border: 12px solid transparent; border-top: 9px solid var(--primary) }
.button.bottom-arrow:before { border-top-color: var(--white); z-index: 2; bottom: -20px }
.button.bottom-arrow:hover:before { border-top-color: var(--primary) }
.button.top-arrow { margin-top: 10px; overflow: unset }
.button.top-arrow:after { content: ""; position: absolute; left: 50%; margin-left: -12px; top: -21px; width: 0; height: 0; border: 12px solid transparent; border-bottom: 9px solid var(--dark) }
.button.bs-dark i { margin-bottom: 0; font-size: 80%; margin-left: 1.5rem }
.proi-details { transition: all .5s; overflow: hidden; max-height: 0; background-color: var(--primary); font-size: 2.5rem; color: var(--black); line-height: 2.5 }
.proi-details.opened { max-height: unset }
.proid-con { padding-top: 5rem; padding-bottom: 2rem }
.proid-con hr { border-top-style: dotted }
.proid-con p { padding-left: 10%; padding-right: 10% }
.proi-less { padding-bottom: 5rem }
.profession-team .max-1500 { padding-left: 0; padding-right: 0 }
.proteam-item .subject { font-size: 1.8rem; color: var(--black); padding-top: 3rem; padding-bottom: 10rem }
.proteam-front>em { z-index: 2; content: ""; transition: all 0.5s cubic-bezier(.2, 1, .2, 1); transform: scaleY(0); transform-origin: center top; display: block; position: absolute; top: 20%; left: 0; width: 100%; height: 80% }
.proteam-image { z-index: 2; width: 100%; height: 100%; background-position: center bottom }
.proteam-front:hover>em { transform: none }
.proteam-front:after { content: ""; position: absolute; width: 100%; height: 80%; left: 0; bottom: 0; background-color: var(--gray) }
.proteam-list .ratio-3-1 { padding-top: 45% }
.protrain-con { background-color: var(--white); padding: 6rem 5rem; height: 100% }
.border-bottom-arrow { position: relative; margin-bottom: 5rem; line-height: 5.5rem; padding-bottom: 2px; border-radius: 3.7rem; border: 1px solid var(--primary); background-color: var(--white); text-align: center; font-size: 3rem }
.border-bottom-arrow:before { content: ""; position: absolute; left: 50%; margin-left: -12px; bottom: -24px; width: 0; height: 0; border: 12px solid transparent; border-top: 13px solid var(--white); z-index: 2 }
.border-bottom-arrow:after { transition: none; content: ""; position: absolute; left: 50%; margin-left: -12px; bottom: -25px; width: 0; height: 0; border: 12px solid transparent; border-top: 13px solid var(--primary); z-index: 1 }
.border-bottom-arrow { box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, .15) }
.protrain-title { text-align: center }
.protrain-title .border-bottom-arrow { display: inline-block; padding-left: 8rem; padding-right: 8rem; margin-left: auto; margin-right: auto; white-space: nowrap }
.protrain-overview { font-size: 1.5rem; line-height: 2; color: var(--dark) }
.protrain-info { padding-top: 7rem; padding-bottom: 8rem; font-size: 2rem }
.bottom-shadow.white-shadow { margin-bottom: 0 !important }
.profession-enjoy { padding-bottom: 15rem }
.pro-enjoy .h-s-more, .pro-mono .h-s-more, .inno-enjoy .h-s-more { padding-top: 6rem; padding-bottom: 6rem }
.profession-values-list div p { padding-right: 30px }
.profession-partners-list li { display: inline-block }
.profession-partners-list li img { width: 100%; height: auto }
.profession-partners-list li a { cursor: default }
.image-has-cover-list { position: relative; width: 100%; height: auto }
.image-has-cover-list img { width: 100%; height: auto }
.image-has-cover-list a { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; text-align: center; opacity: 0; background-color: rgba(0, 0, 0, .75) }
.image-has-cover-list a:hover { opacity: 1 }
.image-has-cover-list a span { font-size: 12px; line-height: 20px; position: absolute; top: 50%; left: 0; overflow: hidden; width: 100%; height: 120px; margin-top: -50px; padding: 0 40px; color: rgb(180, 179, 179) }
.image-has-cover-list a span p { line-height: 2.5 }
.image-has-cover-list a strong { position: relative; display: block; height: 30px; margin-bottom: 30px; color: rgb(249, 249, 249) }
.image-has-cover-list a strong:after { font-size: 12px; font-weight: normal; display: block; margin-top: 10px; content: "——"; color: var(--primary) }
.profession-partners-list .image-has-cover-list a span { height: 90px; margin-top: -40px }
.profession-partners-list .image-has-cover-list a strong { height: 5px; margin-bottom: 15px }
.profession-partners-list-title { font-size: 12px; padding: 20px 0; color: rgb(180, 179, 179) }
.profession-partners-list-title strong { font-size: 16px; font-weight: 400; line-height: 24px; display: block; color: rgb(128, 128, 128) }
.profession-partners-list .image-has-cover-list a span p { line-height: 1.8 }
.profession-environment { background-color: var(--gray-light) }
.profession-environment-list { height: 560px }
.profession-environment-list-image { position: relative; width: 100%; height: 100%; background-position: center center; background-size: cover }
.profession-environment-list-image img { width: 0; height: 0 }
.profession-environment-list-image.animated { -webkit-animation-duration: .4s; animation-duration: .4s }
@-webkit-keyframes MyflixOutX {
  0% { -webkit-transform: rotate3d(0, 1, 0, 0deg); transform: rotate3d(0, 1, 0, 0deg) }
  100% { visibility: hidden; -webkit-transform: rotate3d(0, 1, 0, 90deg); transform: rotate3d(0, 1, 0, 90deg) }
}
@keyframes MyflixOutX {
  0% { -webkit-transform: rotate3d(0, 1, 0, 0deg); transform: rotate3d(0, 1, 0, 0deg) }
  100% { visibility: hidden; -webkit-transform: rotate3d(0, 1, 0, 90deg); transform: rotate3d(0, 1, 0, 90deg) }
}
.MyflixOutX { -webkit-animation-name: MyflixOutX; animation-name: MyflixOutX }
@-webkit-keyframes MyflixInX {
  0% { -webkit-transform: rotate3d(0, 1, 0, 90deg); transform: rotate3d(0, 1, 0, 90deg) }
  100% { -webkit-transform: rotate3d(0, 1, 0, 0deg); transform: rotate3d(0, 1, 0, 0deg) }
}
@keyframes MyflixInX {
  0% { -webkit-transform: rotate3d(0, 1, 0, 90deg); transform: rotate3d(0, 1, 0, 90deg) }
  100% { -webkit-transform: rotate3d(0, 1, 0, 0deg); transform: rotate3d(0, 1, 0, 0deg) }
}
.MyflixInX { -webkit-animation-name: MyflixInX; animation-name: MyflixInX }
.profession-join-list { padding: 30px 0; border-top: 1px solid rgb(219, 220, 220) }
.profession-join-list .col-md-4 { color: var(--secondary) }
.profession-join-sign { font-size: 16px; line-height: 50px; display: inline-block; min-width: 120px; margin-top: 20px; text-align: center; color: rgb(128, 128, 128); border: 1px solid rgba(0, 0, 0, .3) }
.profession-join-list .title-with-line { padding-top: 0 }
.profession-join-sign { position: relative; width: 8rem; height: 7rem; padding-top: 1.5rem; line-height: 1.2; color: var(--black) }
a.profession-join-sign:hover { color: var(--black); border-color: var(--primary); background-color: var(--primary) }
.profession-join-sign>span { pointer-events: none; display: block; width: 23rem; position: absolute; right: 0; top: 50%; transform: translate3d(100%, -50%, 0); opacity: 0 }
.profession-join-sign:hover>span { pointer-events: unset; opacity: 1 }
.projoin-nav a { margin-left: 3rem; font-size: 20px; font-weight: 400; color: var(--mute-light) }
.projoin-nav a:hover, .projoin-nav a.active { color: var(--dark) }
.projoin-action { font-size: 3.2rem; display: flex; justify-content: flex-end; align-items: center }
.projoin-action button { color: var(--secondary) }
.projoin-action button:hover { color: var(--primary) }
.projoin-overview { font-size: 1.8rem; max-height: 0; overflow: hidden }
.profession-join-contact { font-size: 3.6rem; padding-top: 12rem; padding-bottom: 14rem; line-height: 1.5; border-top: 1px solid rgb(219, 220, 220) }
.projoin-left { display: flex; flex-direction: row }
.projoin-sn { font-size: 6rem; display: flex; align-items: center; padding-right: 2rem }
.projoin-subject { line-height: 2; padding-top: 1.5rem; padding-bottom: 1.5rem }
.symbol-open { display: none }
.profession-join-sign { display: none }
.projoin-list.opened .profession-join-sign { display: block }
.projoin-list.opened .projoin-overview { max-height: unset }
.projoin-list.opened .projoin-sn { font-size: 2.1rem; align-items: flex-start }
.projoin-list.opened .projoin-left { flex-direction: column }
.projoin-list.opened .symbol-open { display: block }
.projoin-list.opened .symbol-close { display: none }
.fixed-background { background-attachment: fixed; background-position: center center; background-size: cover }
.fixed-top-background { position: fixed; z-index: -1; top: 0; left: 0; width: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover }
body.mobile-set .fixed-background, body.phone .fixed-background { background-attachment: scroll }
.about-banner-body { height: 450px; height: var(--sub-banner) }
.fixed-top-background { height: var(--sub-banner); top: 0 }
.about-banner-overview h4, .innovation-banner-overview h4 { font-family: var(--font-sans); font-weight: var(--fw-light); font-size: 35px; line-height: 2; letter-spacing: 1em; color: rgb(255, 255, 255); margin-bottom: 1.5rem }
.about-banner-overview h4 { font-size: 6.2rem; color: var(--primary); letter-spacing: 1rem; margin-bottom: 5rem }
.about-banner-overview h4.spacer-bottom:after { content: ""; position: absolute; width: 9rem; height: 0; left: 50%; margin-left: -4.5rem; bottom: 0; border-top: 1px solid var(--primary) }
.about-us { padding-top: 80px; padding-top: 8rem }
.about-us .common-header-text { padding-bottom: 50px }
.has-gray-shadow:after { position: absolute; bottom: 65px; left: 0; width: 100%; height: 30px; content: ""; background: url(../images/common/line_gray.png) no-repeat center center; background-size: 750px 30px }
.about-us-overview { margin-bottom: 0 }
.about-us-business-system { line-height: 60px; margin-top: 20px; text-align: center; background-color: rgb(249, 249, 249) }
.about-us-business-system p { font-size: 15px; display: inline-block; display: inline-block; margin: 0 30px }
.about-us-business-system a { color: var(--secondary) }
.about-us-intro { padding-bottom: 80px }
.about-us-intro-title { font-size: 24px; line-height: 55px; margin-bottom: 20px; color: var(--primary); border-bottom: 1px solid var(--primary) }
.about-us-intro-title span { font-size: 14px }
.about-us-intro-content { font-size: 12px }
.about-us-intro.row>div:nth-child(1) { width: 40% }
.about-us-intro.row>div:nth-child(2) { width: 30% }
.about-us-intro.row>div:nth-child(3) { width: 30% }
@media only screen and (max-width:1199px) {
  .about-us-intro.row>div:nth-child(1) { width: 65% }
  .about-us-intro.row>div:nth-child(2) { width: 35% }
  .about-us-intro.row>div:nth-child(3) { width: 100% }
}
@media only screen and (min-width:768px) { }
.about-business-scope { margin-bottom: 50px; background-color: var(--primary) }
[data-role="tab-content"] { display: none; transition: opacity .5s }
[data-role="tab-content"].active { display: block }
.row-padding-15.row { margin-right: -15px; margin-left: -15px }
.row-padding-15.row>div { padding-right: 15px; padding-left: 15px }
.row-padding-20.row { margin-right: -20px; margin-left: -20px }
.row-padding-20.row>div { padding-right: 20px; padding-left: 20px }
.row-padding-30.row { margin-right: -30px; margin-left: -30px }
.row-padding-30.row>div { padding-right: 30px; padding-left: 30px }
.about-business-scope-list-tab { position: relative; z-index: 5; bottom: 0; left: 0; width: 100% }
.about-business-scope-list-tab-block { width: 100%; transition: background-color .3s; text-align: left; background-color: rgba(255, 255, 255, 1) }
.about-business-scope-list-tab-block h3 { font-size: 120px; color: rgb(56, 56, 56) }
.about-business-scope-list-tab-block h5 { line-height: 1.5; padding: 20px 0; color: var(--primary) }
.active .about-business-scope-list-tab-block { color: rgb(255, 255, 255); background-color: var(--primary) }
.about-business-scope-list-tab .icon-cxany { font-size: 50px; display: inline-block; width: 50px; height: 50px; margin-right: 10px; vertical-align: middle; color: var(--secondary) }
.about-business-scope-list-tab .active .icon-cxany { color: rgb(255, 255, 255) }
.active .about-business-scope-list-tab-block .icon:before { opacity: 1 }
.about-business-scope-list-details { margin-right: -30px }
.about-business-scope-list-details p { display: inline-block; min-width: 160px; margin-right: 15px; white-space: nowrap }
.about-business-scope-list-details-header { padding: 1.5rem 0 }
.icon-scope-1 { background-position: 0 -300px }
.icon-scope-1:before { background-position: 0 -350px }
.icon-scope-2 { background-position: -50px -300px }
.icon-scope-2:before { background-position: -50px -350px }
.icon-scope-3 { background-position: -100px -300px }
.icon-scope-3:before { background-position: -100px -350px }
.about-business-scope-icon { font-size: 16px; margin-top: 5px; color: rgb(58, 58, 58) }
.about-business-scope-list { padding-bottom: 6rem }
.about-business-scope-related-title { line-height: 60px }
.about-business-scope-related-archive a { line-height: 35px; display: block }
.about-business-scope-related-works img { width: 100%; height: auto }
.about-advantages { background-attachment: fixed; background-size: cover }
.about-advantages-list { color: var(--white) }
.about-advantages-list h4 { font-size: 24px; font-size: 2.4rem; color: var(--primary) }
.about-advantages-list h5 { font-size: 14px; padding: 2rem 0 5rem 0; color: var(--primary) }
.about-advantages-list>div { padding-bottom: 80px }
@media only screen and (max-width:1199px) {
  .about-advantages-list h5 { padding-bottom: 2rem }
  .about-advantages-list>div { padding-bottom: 10rem }
  .about-advantages-list { font-size: 1.2rem }
}
.business-scope.bottom-shadow { margin-bottom: 2rem !important }
.about-process { padding-top: 8rem; background-color: var(--gray-light) }
.about-process-index { width: 100% }
.about-process-index .row>div img:nth-child(2) { position: absolute; top: 0; left: 0 }
.about-process-index .row>div img { width: 100%; transition: opacity .3s }
.about-process-index .row>div img:nth-child(2) { opacity: 0 }
.about-process-index .row>div:hover img:nth-child(2), .about-process-index .row>div.active img:nth-child(2) { opacity: 1 }
.about-process-content .title-with-line { font-size: 4.5rem; line-height: 1.2; text-align: left }
h5.about-process-content-title { line-height: 2 }
.about-process-content-body { line-height: 2 }
.about-process-content-pic { padding-top: 10px }
.about-process-content-pic p { }
.about-works-list-more { padding: 50px 0 }
.about-methods-pic.row { margin-right: -30px; margin-left: -30px }
.about-methods-pic>p { display: inline-block; min-width: 200px; max-width: 300px; padding: 20px 40px }
.about-methods-pic a { display: block; width: 100%; height: 100%; opacity: .8 }
.about-methods-pic a:hover { opacity: 1 }
.about-methods-link>p { line-height: 50px; display: inline-block; width: 16.6667% }
@media only screen and (max-width:1199px) {
  .about-methods-link>p { width: 20% }
}
.about-methods-link { padding: 50px 0 }
.about-office-footer { padding: 30px 0 30px 0; color: rgb(165, 165, 165) }
.about-office-advisory { line-height: 113px; display: inline-block; width: 115px; height: 115px; margin: 60px 0; color: rgb(255, 255, 255); border-radius: 50%; background-color: var(--primary) }
.about-office-advisory:hover { color: rgb(255, 255, 255); background-color: rgb(73, 73, 73) }
.about-office-gallery { height: 600px }
.about-office-gallery-frame { position: absolute; top: 0; left: 50%; width: 3000px; height: 100%; margin-left: -1500px }
.about-office-gallery-list li { cursor: pointer; transition: opacity .2s; opacity: .6 }
.about-office-gallery-list li.active { cursor: default; opacity: 1 }
.about-office-gallery-list li:hover { opacity: 1 }
.about-office-gallery-list li img { display: block; max-width: 100% }
.about-office-gallery .bx-wrapper .bx-pager, .about-office-gallery .bx-wrapper .bx-controls-auto { bottom: 2rem }
.about-office-gallery .bx-wrapper .bx-pager.bx-default-pager a { width: 6px; height: 6px; margin: 0 10px; border-radius: 0 }
.about-office-gallery .bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active { background-color: var(--primary) }
.about-banner { }
.about-banner-overview h4:after { }
a.btn-video-play img { width: 10rem }
a.btn-video-play:hover { opacity: .85 }
.aho.enjoy-home-overview>.row { height: auto }
.aho-item dt { color: var(--primary); font-size: 2rem; padding-bottom: 2.5rem; margin-bottom: 3.5rem; font-weight: 500 }
.aho-item dt:after { content: ""; position: absolute; left: 0; bottom: 0; width: 4rem; height: 0; border-top: 1px solid var(--dark) }
.aho-item dd { font-size: 1.8rem; color: var(--black) }
.aho-item dd .empty-line { line-height: 1.5 }
.aho-item .ahoi-left dd { line-height: 2.5 }
.aho-item .ahoi-right dd { line-height: 2.2 }
.aho-right { background-color: var(--gray-light) }
.aadv { background-color: var(--link); padding-top: 12rem; padding-bottom: 5rem }
.aadv-con { border: .7rem solid var(--white); padding: 10rem 10rem }
.aadv-overview { padding-top: 8rem; padding-bottom: 4rem; font-size: 2rem }
.aadv-con h4 { font-size: 5.3rem; color: var(--primary) }
.aadv-con h5 { font-size: 3.7rem; color: var(--primary) }
.aadv-text { line-height: 2; padding-left: 3rem; padding-right: 3rem }
.aadv-list:not(:last-child) .aadv-text:after { content: ""; position: absolute; right: 0; top: 1rem; height: 10rem; border-left: 1px solid var(--mute) }
@media screen and (max-width:1900px) {
  .aadv-con { padding: 10rem 6rem }
}
@media screen and (max-width:1500px) {
  span[style*="font-size:2.5rem"] { font-size: 2rem !important }
  span[style*="font-size:2.8rem"] { font-size: 2.3rem !important }
  span[style*="font-size:3rem"] { font-size: 2.6rem !important }
  span[style*="font-size:3.1rem"] { font-size: 2.7rem !important }
  span[style*="font-size:3.2rem"] { font-size: 2.8rem !important }
  span[style*="font-size:3.5rem"] { font-size: 3rem !important }
  span[style*="font-size:4.8rem"] { font-size: 4rem !important }
}
.absl { overflow: initial }
.absl-item { padding: 5rem 2rem; flex-direction: column; border: 1px solid var(--primary); border-bottom-color: transparent }
.absl-subject { font-size: 3.6rem; color: var(--secondary) }
.absl-overview { font-size: 1.6rem; color: var(--black) }
.absl-icon { width: 100%; height: 55% }
.absl-icon>div { width: 100%; height: 100%; transition: all .25s }
.absli-front { position: absolute; left: 0; top: 0; opacity: 0 }
.active .absli-back { opacity: 0 }
.active .absli-front { opacity: 1 }
.active .absl.about-business-scope-list-tab-block { background-color: var(--white) }
.active .absl-item { border-bottom-color: var(--primary) }
.absl-item.border-bottom-arrow { border-radius: 0; box-shadow: unset; font-weight: normal }
.absl-item.border-bottom-arrow:before, .absl-item.border-bottom-arrow:after { border-width: 16px; margin-left: -16px; opacity: 0 }
.absl-item.border-bottom-arrow:before { bottom: -31px }
.absl-item.border-bottom-arrow:after { bottom: -32px }
.active .absl-item.border-bottom-arrow:before, .active .absl-item.border-bottom-arrow:after { opacity: 1 }
.active .absl-subject { color: var(--primary) }
.abslt.bottom-shadow { margin-bottom: 2rem !important }
.abslt.bottom-shadow:after { background-color: var(--primary); bottom: 0 }
.abslc-right { width: 45rem }
.abslc-right.home-mono a { background-color: transparent; border: 1px solid var(--dark) }
.abslc-right.home-mono a:hover { background-color: var(--light) }
.about-business-scope-list-content { padding-top: 5rem; padding-bottom: 5rem }
@media screen and (min-width:2560px) {
  .about-business-scope-list-content.frame-wide { max-width: 2000px; padding-left: var(--left-pad); padding-right: var(--left-pad) }
}
.aproi-box { max-width: 1711px; margin: auto }
.aproi.border-bottom-arrow { border: 0; box-shadow: none; border-radius: 0; background-color: transparent }
.aproi.border-bottom-arrow:before { border-top-color: var(--gray-light) }
.apc-con { border-top: 1px solid var(--primary) }
.aproi-box .title-with-line { padding-top: 5rem; margin-bottom: 0 }
.aproi-box.common-header-text { background-position: center top; background-size: 100% auto }
.apcb-con p { overflow: auto; clear: both }
.apc-item .home-mono { width: 45rem; margin: auto }
.apc-item .home-mono a { border: 1px solid var(--dark) }
.apc-item { height: 100% }
.acli { background: var(--dark); padding-top: 8rem; padding-bottom: 8rem }
.acli-title h3 { padding-top: 5rem; margin-bottom: 0 }
.acli-con { padding-top: 7rem; padding-bottom: 5rem }
.acli-con img { width: 100% }
.apc-right-title { font-size: 2rem; padding-bottom: 1rem }
.apc-mono.eho-item { padding-top: 2rem; padding-bottom: 2rem }
.aworks { background-color: var(--white) }
.aenjoy { padding-bottom: 10rem }
.aoffice .bx-wrapper .bx-pager.bx-default-pager a { background-color: var(--white) }
.atl-item { width: 50%; flex-shrink: 0; transition: all .75s ease }
.atl-item .ratio-3-2 { padding-top: 80% }
.atli-con { display: flex; justify-content: center; font-size: 3.6rem; color: var(--white); line-height: 3; flex-direction: column }
.atli-con dt, .atli-con dd { line-height: 2; font-weight: var(--fw-normal) }
.atli-con dt:after { content: ""; display: block; width: 6rem; line-height: 0; height: 2rem; border-top: 1px solid var(--white); margin-left: auto; margin-top: 1rem; opacity: .5 }
.atli-con dd { font-size: 1.6rem; line-height: 1.8 }
.atli-con dd>em { font-style: normal; padding-top: 10rem; display: inline-block }
.atl-item:first-child .atli-con { align-items: flex-end; padding-right: 33%; background-position: right center }
.atl-item:first-child .atli-con dt, .atl-item:first-child .atli-con dd { text-align: right }
.atl-item:last-child .atli-con { padding-left: 33%; background-position: left center }
.atl-item:last-child .atli-con dt:after { margin-right: auto; margin-left: unset }
.atlist:hover .atl-item:first-child { transform: translateX(-100%) }
.atlist:hover .atl-item:last-child { transform: translateX(100%) }
.about-qa { padding-top: 10rem; padding-bottom: 10rem }
.aqah-title { font-size: 2.4rem; line-height: 1.5; padding-bottom: 5rem }
.aqah-con { font-size: 4.8rem; line-height: 1.8; padding-bottom: 20rem }
.btn-aqah a.border-bottom-arrow { box-shadow: none; font-size: 2.4rem; padding: 0 5rem; color: var(--secondary); border-color: var(--secondary) }
.btn-aqah a.border-bottom-arrow:after { border-top-color: var(--secondary) }
.btn-aqah a.border-bottom-arrow:hover { color: var(--primary); border-color: var(--primary) }
.btn-aqah a.border-bottom-arrow:hover:after { border-top-color: var(--primary) }
.aqad-overview { line-height: 1.8; padding-bottom: 10rem }
.aqado-sm { font-size: 3.1rem; padding-top: 2rem; padding-bottom: 8rem; padding-left: 10rem; padding-right: 10rem }
.aqadc-item { margin-bottom: 6rem }
.aqadc-item>dt, .aqadc-item>dd { width: 50%; padding-left: 10rem; padding-right: 10rem; flex-shrink: 0; height: 44rem }
.aqadc-item>dt { background-color: var(--gray); padding-top: 6rem; padding-bottom: 4rem; line-height: 1.6 }
.aqadc-item>dd { padding-top: 2rem; overflow: hidden }
.aqadc-item h4 { font-size: 3.6rem; padding-bottom: 3rem }
.aqadc-item dt h4 { font-weight: var(--fw-bold) }
.aqadci-con { font-size: 5rem }
.aqadc-item h5 { font-size: 1.6rem; font-weight: var(--fw-light); position: absolute; bottom: 4rem }
.aqadd h4 { font-size: 5rem; padding-bottom: 3rem }
.aqadd-con { font-size: 2.4rem; line-height: 2; padding-bottom: 6rem }
.aqadd h6 { position: absolute; bottom: 0; width: calc(100% - 20rem); z-index: 2; text-align: right; background: white; height: 4rem; line-height: 4rem; box-shadow: 0 -20px 20px white; border-bottom: 1px solid var(--mute) }
.btn-aqa-more { line-height: 4rem; padding-right: 2rem; width: 50% }
.aqa-desc { height: 0; overflow: hidden }
.about-qa.opened .aqa-desc { height: auto }
.about-qa.opened .aqadc-item.opened .aqadd { height: auto; max-height: unset }
.profession .about-office-gallery { height: 500px; margin-bottom: 10px }
.profession .about-office-gallery-frame { width: 2280px; margin-left: -970px }
.profession-gallery-control { position: absolute; z-index: 5; top: 0; left: 0; width: 100%; height: 100% }
.profession-gallery-control-mask { position: relative; float: left; width: 33.333333333333%; height: 100% }
.profession-gallery-control .slider-copy { position: absolute; width: 350px; height: 100%; margin-left: -350px; color: rgb(53, 53, 53); background-color: rgba(255, 255, 255, .8) }
@media only screen and (max-width:1199px) {
  .about-office-gallery { height: 455px }
  .about-office-gallery-list li { width: 700px }
  .about-office-gallery-frame { width: 2100px; margin-left: -1050px }
  .profession .about-office-gallery-frame { width: 1800px; margin-left: -730px }
  .profession .about-office-gallery { height: 395px }
}
.slider-copy h2 { font-size: 16px; font-weight: 400; line-height: 1.8; margin-top: 10px; margin-bottom: 40px }
.slider-copy p { font-size: 13px }
.slider-copy .service { position: absolute; z-index: 0; top: 0; left: 0; padding: 10px 80px 10px 30px; transition: all 450ms cubic-bezier(.19, 1, .22, 1); -webkit-transform: translate3d(0, 15%, 0); transform: translate3d(0, 15%, 0); opacity: 0 }
.slider-copy .service.active { z-index: 10; transition: all 450ms cubic-bezier(.19, 1, .22, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
.profession-gallery-more { line-height: 30px; z-index: 10; margin-top: 30px; padding: 0 15px; pointer-events: all }
.profession .slider-arrows { position: absolute; z-index: 20; top: 50%; left: -50px; width: 100px; height: 50px; margin-top: -25px }
.profession .slider-arrows:after { display: table; clear: both; content: "" }
.profession .slider-arrows>div { width: 50%; height: 100%; cursor: pointer; transition: background-color .6s; text-align: center; border: 1px solid rgb(148, 192, 34); background-color: rgba(255, 255, 255, .95) }
.profession .slider-arrows-right { float: right }
.profession .slider-arrows-left { float: left; border-right: 0 !important }
.profession .slider-arrows>div i { width: 35px; height: 50px }
.profession .slider-arrows>div:hover { background-color: rgb(148, 192, 34) }
.profession .slider-arrows .icon-cxany { font-size: 36px; margin-top: 5px }
.profession .slider-arrows>div:hover .icon-cxany { color: rgb(255, 255, 255) }
.profession .slider-next, .profession .slider-prev { cursor: pointer }
.contact-banner .fixed-top-background { background-size: auto 100% }
.contact-top-frame { position: absolute; z-index: 10; top: -40px; left: 0; width: 100%; height: 40px }
.contact-top-text { font-size: 16px; line-height: 40px; display: inline-block; vertical-align: top; min-width: 600px; padding-right: 50px; padding-left: 50px; letter-spacing: .2em; color: rgb(255, 255, 255); background-color: var(--primary) }
.bg-default { background-color: rgb(255, 255, 255) }
.bg-gray { background-color: var(--gray) }
.bg-white { background-color: var(--white) }
.bg-green { background-color: var(--primary) }
.bg-primary { background-color: var(--primary) }
.contact-overview { padding-bottom: 80px }
.contact-details { padding-bottom: 100px }
.contact-details>.row>div { padding-top: 30px; margin-bottom: 80px; overflow: hidden }
.contact-details-subject { font-size: 16px; line-height: 50px }
.contact-details-sub-subject, .contact-feedback-item { line-height: 60px; height: 66px }
.contact-details-img { width: 100%; height: auto }
.contact-details-box { background-color: rgb(255, 255, 255) }
.cdb-left:after { content: ""; position: absolute; width: 100%; height: 20rem; top: 100%; left: 0; background-color: white; display: block }
p span[style*="font-size:30px"] { font-size: 3rem !important }
.contact-details-content { padding: 20px 30px }
.contact-feedback-item label { line-height: 30px; float: left; margin: 0 20px 0 0 }
@media only screen and (min-width:1366px) {
  .contact-feedback-item label { margin-right: 25px }
}
.contact-feedback-box { height: 420px }
.contact-feedback-group { margin-bottom: 20px }
.contact-feedback input[type="text"] { line-height: 40px; width: 100% }
.contact-feedback-description textarea { width: 100%; height: 35rem }
.contact-feedback input[type="text"], .contact-feedback-description textarea { font-size: 12px; padding: 10px 20px; border: 1px solid rgb(229, 229, 229); border-radius: 4px; background-color: rgb(255, 255, 255) }
.contact-feedback input[type="text"]:focus, .contact-feedback-description textarea:focus { border: 1px solid var(--primary) }
.btn-contact-feedback-submit { font-size: 13px; line-height: 50px; right: 1px; bottom: 1px; width: 50px; height: 50px }
.innovation-banner-body { height: var(--sub-banner) }
.innovation-banner .fixed-top-background { height: var(--sub-banner) }
.innovation-choose { padding-bottom: 10rem; background-color: rgb(229, 229, 229) }
.title-with-line.at-top:before { top: -25px; bottom: auto }
.innovation-choose-list { padding-top: 8rem }
.inno-clc { padding-top: 3rem; padding-bottom: 13rem }
.innovation-choose-list h4.title-with-line:before { width: 50px; margin-left: -25px }
.innovation-choose-list-content { padding: 0 25px }
.innovation-choose-addons { padding-top: 50px }
.innovation-point-header { padding-bottom: 40px }
.innovation-point-list img { max-width: 100%; height: auto }
.innovation-think-list { padding-top: 40px }
.innovation-advisory { padding: 80px 0 50px 0; padding-top: 8rem }
.enjoy-banner { height: 450px; height: 74rem; padding-bottom: 14rem }
.enjoy-banner .fixed-top-background { height: 60rem; top: var(--top-nav) }
.enjoy-search { z-index: 5; height: 14rem; padding: 5.3rem 0 0 0; background-color: var(--secondary); position: absolute; width: 100%; left: 0; border-bottom: 0 }
.enjoy-banner-body, .enjoy-banner .max-1200 { height: 100% }
.enjoy-banner-categories { height: 100% }
.enjoy-home-categories { position: absolute; z-index: 3; bottom: 14rem; left: 60px; width: 520px; min-height: 300px; padding: 4rem 7rem; transition: left .5s; background-color: rgba(255, 255, 255, .9) }
@media screen and (min-width:2560px) {
  .enjoy-home-categories { width: 750px }
}
.enjoy-home-caption { position: absolute; z-index: 1; bottom: 0; left: 0; width: 100%; height: 70px; background-color: rgba(0, 0, 0, .6) }
.enjoy-home-caption-frame { line-height: 30px; position: absolute; z-index: 2; bottom: 10px; left: 620px; width: 400px; height: 60px; transition: left .5s; color: rgba(255, 255, 255, .8) }
.row.no-padding { margin-left: 0; margin-right: 0 }
.col-5-3-2 .item { width: 50% }
.col-4-4-2 .item { width: 50% }
.inno-bo.about-banner-overview h4:after { display: none }
.innoo-title.title-with-line { font-size: 5rem; padding-top: 15rem }
.innood-title { font-size: 3.5rem; line-height: 1.5; padding-bottom: 8rem }
.innoo-con { line-height: 2.5; font-size: 2rem }
.innoo-desc.frame-box { padding: 9rem 20rem 11rem 20rem }
.innovation-choose { background-color: var(--gray) }
.inno-enjoy { background-color: var(--gray-light) }
.inno-enjoy-mono.home-mono a { background-color: var(--gray-light) }
.inno-enjoy-mono.home-mono .front-subject { color: var(--link) }
.inno-enjoy.bottom-shadow.dark-shadow:after { background-color: var(--gray-light) }
.inno-slogan { line-height: 2; padding-top: 15rem; padding-bottom: 15rem }
.innos-con { min-height: 50rem }
.innos-small { padding-top: 5rem; display: inline-block }
.inno-enjoy-mono li a { margin-bottom: 2px }
@media screen and (max-width:1599px) {
  .inno-slogan { padding-left: var(--left-big); padding-right: var(--left-big) }
}
.ecl-zhishi-con { flex-wrap: wrap; padding-bottom: .5rem }
.ecl-zhishi-con a { font-size: 2.6rem; display: block; line-height: 1.8; font-weight: 400 }
.ecl-zhishi-con em { display: block; width: 100%; flex-shrink: 0; height: 0 }
.enjoy .sub-page-nav-search, .enjoy .btn-search { border-color: var(--mute) }
.enjoy-details-header { height: 38rem; flex-direction: column; padding-top: 0; padding-bottom: 0; align-items: flex-start }
.edh-con h2.edh-subject { font-size: 4.5rem; font-weight: 400; margin-top: 6rem; line-height: 1; padding-bottom: 0 }
.edh-con h3.edh-date { font-size: 2rem }
.edh-con h2:after { position: absolute; top: -3rem; left: 0; width: 4rem; height: 1px; content: ""; background-color: var(--white) }
.edh-con .edh-sub { font-size: 1.8rem; width: 100% }
.edh-con .edh-cats { position: absolute; right: 0; bottom: 0 }
.edhc-list a { line-height: 1.2; color: var(--primary); display: block; width: 7.5rem; height: 7.5rem; background-color: rgba(0, 0, 0, .5); display: flex; align-items: center; justify-content: center; flex-wrap: wrap }
.edhc-list a:not(:last-child) { margin-right: 2rem }
.edhc-list a:hover { color: var(--white) }
.edhc-list span { text-align: center; display: inline-block }
.edhcl-sm span { font-size: 1.8rem; width: 3.8rem; line-height: 1.3 }
.edhcl-lg span { font-size: 2.9rem; width: 6rem; line-height: 1.1 }
.edr-title { font-size: 1.8rem; font-weight: 600; line-height: 12rem; text-align: center; padding: 0 !important; border-top: 1px solid rgb(229, 229, 229); border-bottom: 1px solid rgb(229, 229, 229) }
.edc-heading { font-size: 2.9rem; margin-top: 5rem }
.edc-date { font-size: 1.6rem; line-height: 1; margin-bottom: 5rem }
.edcd-date { margin-right: 2rem }
.ech-cats-con { position: absolute; width: 100%; left: 0; bottom: 0; height: 0 }
.ech-cats-con .max-1200 { padding-left: calc(var(--left-pad) + var(--logo-size)); padding-right: calc(var(--left-pad) + var(--logo-size)) }
.edh-con .edh-cats { right: calc(var(--left-pad) + var(--logo-size)) }
@media screen and (min-width:2560px) {
  .edh-con .edh-cats { right: 0 }
}
@media screen and (min-width:1366px) {
  .col-5-3-2 .item { width: 33.3333% }
  .col-4-4-2 .item { width: 25% }
}
@media screen and (min-width:1600px) {
  .col-5-3-2 .item { width: 20% }
}
@media (min-width:992px) and (max-width:1599px) {
  .enjoy-home-categories { left: 40px }
  .enjoy-home-caption-frame { left: 580px }
}
.enjoy-home-caption-frame a { display: block; opacity: .8; color: rgb(255, 255, 255) }
.enjoy-home-caption-frame a:hover { opacity: .95 }
.enjoy-home-caption-frame h4 { font-size: 18px; padding-top: 15px; padding-bottom: 10px }
.enjoy-home-caption-frame h5 { font-size: 12px }
.enjoy-home-categories dl { position: relative; width: 100%; padding-top: 5px; padding-bottom: 10px }
.enjoy-home-categories dl:last-child { padding-bottom: 0; border-bottom: 0 }
.enjoy-home-categories dt { font-size: 2.6rem; color: var(--link); font-weight: normal; padding-bottom: .5rem }
.enjoy-home-categories dt em { display: none; font-size: 12px; font-weight: normal; font-style: normal; line-height: 25px; color: rgb(170, 170, 170) }
.enjoy-home-categories dd { display: flex; flex-wrap: wrap; margin-left: -1.5rem; margin-right: -1.5rem }
.enjoy-home-categories dd a { font-size: 16px; padding-left: 1.5rem; padding-right: 1.5rem; line-height: 1.85 }
.enjoy-home-categories dd a:last-child { margin-right: auto }
.with-arrow-line { margin-bottom: 20px }
.with-arrow-line:before, .with-arrow-line:after { position: absolute; transition: all .25s }
.with-arrow-line:before { content: ""; width: 100%; height: 0; left: -1px; bottom: -10px; border-top: 1px solid var(--mute) }
.with-arrow-line:after { content: "\c1022"; font-family: "cxany"; width: 10px; height: 10px; line-height: 10px; font-size: 10px; text-align: right; right: 0; bottom: -15px; color: var(--mute) }
.with-arrow-line-sm:after { font-size: 8px }
.ecl-hangye { margin-bottom: 2rem }
.enjoy-home-overview>.row { background-color: var(--white); z-index: 2 }
.enjoy-home-overview.bottom-shadow { margin-bottom: 2rem !important }
.enjoy-home-overview.bottom-shadow:after { bottom: 0 }
.eho-item { padding: 13rem var(--left-big); line-height: 2; height: 100% }
.enjoy-home-overview>.row>div, .eho-item-left, .eho-item-right { height: 100% }
.eho-item h3 { font-size: 5.8rem; line-height: 1.2; padding-bottom: 3rem; margin-bottom: 5rem }
.eho-item h3:after { content: ""; position: absolute; bottom: 0; height: 0; left: 0; width: 6rem; border-top: 1px solid var(--mute) }
@media screen and (min-width:1600px) {
  .eho-item-right { padding-left: 10rem }
}
.enjoy-mono-header .title-with-line { margin-bottom: 5rem; color: var(--secondary) }
.home-mono.enjoy-home-mono .cats { border-bottom-color: var(--white) }
.home-mono.enjoy-home-mono.bottom-shadow { padding-bottom: 0 }
.home-mono.enjoy-home-mono.bottom-shadow:after, .bottom-shadow.dark-shadow:after { height: 20px }
.enjoy-body .h-s-more { padding-top: 6rem; padding-bottom: 6rem; background-color: var(--gray) }
.home-mono .subject { font-size: 2.5rem }
.bottom-shadow.dark-shadow { margin-bottom: 0 !important; z-index: unset }
.bottom-shadow.dark-shadow:after { background-color: var(--gray); z-index: 1; bottom: 0 }
.enjoy-home-recommend-images img { width: 100%; height: auto }
.common-full-left { max-width: 1200px; margin-right: 400px }
.common-full-right { float: right; width: 350px }
.enjoy-home-recommend .common-details-right-related a.text { width: 250px; padding-left: 20px }
.enjoy-home-recommend .common-details-right-title { border: 0 }
.enjoy-home-recommend .common-full-right { overflow: hidden; transition: height .3s }
.enjoy-home-recommend-images .col-xs-6 { margin-bottom: 10px }
.enjoy-home-recommend .common-details-right-related { padding-top: 30px; border: 1px solid rgb(226, 226, 226) }
.enjoy-home-recommend .common-details-right-related li { padding-top: 4px; padding-bottom: 4px }
.enjoy-home-recommend-hot-tags { margin-top: 30px; padding: 30px 5px 20px 20px; border-top: 1px solid rgb(226, 226, 226) }
.tags-list { display: flex; justify-content: space-between; flex-wrap: wrap; line-height: 1.5; align-items: flex-start; height: 20rem; }
.tags-list>li { display: flex; justify-content: center; align-items: center; height: 4rem; }
.tags-list a { display: inline-block; margin: .25rem .4rem; padding: .2rem 1.25rem; border: 1px solid var(--white) }
.tags-list li:last-child { margin-right: auto }
.tags-list a:hover { color: var(--black); border-color: var(--mute-light) }
.edr-tag-list.tags-list a:last-child { margin-right: unset }
/*.enjoy-hot-tags-list { height: auto }*/
.enjoy-home-recommend-related { z-index: 9; width: 360px; position: absolute; padding: 2rem 2rem; right: 60px; bottom: 0; height: 100%; background-color: var(--white) }
.ehrr-con .title-no-line { padding-top: 1rem; padding-bottom: 3rem; margin-bottom: 3rem; border-bottom: 1px solid var(--mute); text-align: center; font-size: 2.5rem }
.ehrr-con .common-details-right-related a.text { line-height: 4rem; font-size: 1.4rem }
.enjoy-archive { background-color: var(--gray); padding-top: 2rem }
.cwl-item { margin-bottom: .4rem }
.cwl-item a { display: block; transition: none }
.cwli-con { width: 100%; height: 100%; padding: 6.5rem; background-color: white; line-height: 1.2 }
.cwli-con>em { display: block; z-index: 0; position: absolute; transition: all .25s; width: 100%; height: 100%; left: 0; top: 0; background-color: var(--primary); transform: translateY(-101%) }
.cwli-con .sub { font-size: 2.5rem; margin-bottom: 3.5rem; padding-bottom: 3.5rem }
.cwli-con .sub:after { content: ""; position: absolute; left: 2px; bottom: 0; width: 3rem; border-top: 1px solid var(--secondary) }
.cwli-con .subject, .cwli-con .cats { font-family: var(--font-sans); font-weight: var(--fw-light); transition: color .25s; font-size: 6rem; line-height: 1; padding-bottom: 2rem; color: var(--secondary) }
.cwli-con .date { transition: color .25s; position: absolute; left: 0; padding: 0 6.5rem; bottom: 3.5rem; width: 100%; font-size: 1.2rem; color: var(--secondary) }
.cwli-con .date i { font-size: 1.8rem; margin-bottom: 0; margin-left: 1rem; margin-right: .2rem; display: inline-block }
.cwl-item a:hover .cwli-con>em { transform: none }
.cwl-item a:hover .sub, .cwl-item a:hover .cats, .cwl-item a:hover .subject, .cwl-item a:hover .date { color: var(--white) }
.cwl-item a:hover .sub:after { border-color: var(--white) }
.enjoy-home-works { padding-top: 2rem; background-color: var(--gray) }
.ehw-list .ehwl-item { width: 33.3333% }
.enjoy-home-works .h-s-more { padding-top: 1rem }
.enjoy-home-works .common-works-list { padding-bottom: 0 }
.eht-header h3 { font-size: 2.5rem }
.ewl-item .ratio-4-3 { padding-top: 100% }
.eml-item, .ewl-item { border: 1px solid var(--white) }
.eel-item { border: 1px solid var(--gray); margin-bottom: 0 }
.ehw-list.common-works-list { padding-bottom: 6rem }
.enjoy-details-works .wdwr { padding-bottom: 6rem }
.wdwr-item.common-works-list-item { width: 33.3333% }
.works-home { padding-top: 8rem }
.cfp-feedback { width: 55rem }
.cfp-feedback input, .cfp-feedback textarea { transition: all .25s; width: 100%; font-size: 1.6rem; line-height: 1.9rem; padding: 1.25rem 2rem; background-color: transparent; border: 1px solid var(--gray) }
.cfp-item:not(:last-child) { margin-bottom: 2.5rem }
.cfp-feedback textarea { height: 10rem }
.cfp-feedback input:focus, .cfp-feedback textarea:focus { border-color: var(--primary) }
@media only screen and (max-width:1365px) {
  .enjoy-home-recommend-related ul li:nth-child(n+7) { }
}
@media only screen and (max-width:1199px) {
  .enjoy-home-recommend .common-full-right { display: none }
  .enjoy-home-recommend .common-full-left { width: 100%; margin: 0 }
  .col-5-4-3 .common-works-list-item, .col-5-4-3 .item { width: 24.9999% }
  .col-4-4-3 .item, .col-4-4-3 .common-works-list-item, .col-5-3-2 .item { width: 33.3333% }
  .col-4-2-2 .item { width: 49.9999% }
}
@media only screen and (max-width:991px) {
  .wow { visibility: visible }
  .col-5-4-3 .common-works-list-item, .col-5-4-3 .item { width: 33.3333% }
  .col-4-4-3 .common-works-list-item, .col-5-3-2 .item { width: 49.9999% }
  .footer-author { display: none }
  .home .nav-main { height: 45px }
  body.fixed-bar { padding-top: 45px }
  .home .section-overview { padding-top: 50px; padding-bottom: 50px }
  .home .section-banner { }
  .home #fixed-nav { }
  .home .home-works-heading { margin-bottom: 50px; padding-bottom: 30px; background-color: rgb(56, 58, 58) }
  .home .section-news { padding-bottom: 0 }
  .home .home-news-top { margin-bottom: 10px; padding-top: 30px; padding-right: 5px; padding-bottom: 20px }
  .home .home-brand, .section-services { padding-bottom: 50px }
  .home-news-left-title h4 { font-size: 22px; padding-bottom: 10px }
  .home-news-top .specialty:after { margin-right: auto }
  .home-news-top a, .home-news-new .item { padding-bottom: 20px }
  .home-news-top .image { margin-top: 25px }
  .home .section-news:after, .home-news-new ul:before, .home-news-new .time:before, .home-news-new .item:last-child:after { content: normal }
  .home-news-new { padding-left: 5px }
  .home-news-new .text { width: 100%; padding-bottom: 0; padding-left: 0 }
  .home-news-list .time-month-day, .home-news-list .time-year { font-size: 12px; line-height: 30px; display: inline-block }
  .home-news-list .time { font-size: 0; line-height: 1; width: 100%; height: 30px; padding-right: 0; text-align: left }
  .home-news-list .overview { height: auto }
  .home-news-list .title { font-size: 15px; line-height: 25px }
  .home-news-list .more { margin-left: -10px; -webkit-transform: translateX(100%); transform: translateX(100%); margin-top: 40px }
  .home-news-new .item:after { display: block; width: 25px; height: 1px; margin-top: 15px; margin-bottom: -1px; content: ""; background-color: rgba(128, 128, 128, .5) }
  .home-contact { padding-top: 30px; padding-bottom: 30px }
  .home .home-contact-header { display: inline-block; min-width: initial; padding: 20px }
  .home-brand-list-div .background { font-size: 15px; padding: 10px }
  .auto-return { display: block }
  .home .main-footer { position: relative; bottom: 0 }
}
body.mobile-set [data-ani], body.mobile-set.wow { visibility: visible }
body.mobile-set .opacity { opacity: 1 }
.enjoy-works-industry { padding-top: 75px }
.enjoy-works-industry a { font-size: 12px; display: inline-block; margin-left: 20px }
.enjoy-interview { padding-bottom: 50px }
.enjoy-interview-title { opacity: 1 }
.enjoy-interview-title .common-works-list-information span { min-width: 60px }
.enjoy-interview-title a { padding-left: 70px; text-align: left; opacity: .5 }
.enjoy-interview-avatar { position: absolute; top: -40px; left: 10px; display: block; width: 80px; height: 80px; border-radius: 50%; background: rgb(255, 255, 255) }
.enjoy-interview-avatar img { width: 100%; height: 100%; opacity: 1 !important; border: 3px solid rgb(255, 255, 255); border-radius: 50% }
.enjoy-interview-list .item:hover .enjoy-interview-title a { opacity: 1 }
.enjoy-hot-tags { padding-bottom: 10rem }
.enjoy-home-recommond-list .item { position: relative; width: 100%; height: 100% }
.enjoy-home-recommond-list .item a { position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; text-align: center; opacity: 0; background-color: rgba(0, 0, 0, .75) }
.enjoy-home-recommond-list .item a, .enjoy-home-recommond-list .item a em, .enjoy-home-recommond-list .item a strong { color: rgb(255, 255, 255) }
.enjoy-home-recommond-list .item a:hover { opacity: 1 }
.enjoy-home-recommond-list .common-works-list-title { position: absolute; top: 50%; left: 0; width: 100%; height: 130px; margin-top: -65px; background-color: transparent }
.enjoy-home-recommond-list .common-works-list-title strong { color: rgb(255, 255, 255) }
.enjoy-home-recommond-list .common-works-list-information { bottom: 40px; right: 20px }
.tag-item { font-size: 12px; line-height: 22px; display: inline-block; margin: 0 5px; padding: 0 10px; color: var(--primary) !important; border: 1px solid var(--primary) }
.tag-item:hover { color: rgb(255, 255, 255) !important; background-color: var(--primary) }
.tag-item:after { display: inline-block; padding-left: 8px; content: "X" }
.enjoy-categories-list { background-color: rgb(249, 249, 249) }
.enjoy-categories-items { border: 1px dotted rgb(149, 149, 149) }
.enjoy-categories-items dt em { display: none }
.enjoy-categories-items dl { margin: 0; border-bottom: 1px dotted rgb(149, 149, 149) }
.enjoy-categories-items dl:last-child { border-bottom: 0 }
.enjoy-categories-items dt { font-size: 20px; line-height: 50px; position: absolute; top: 50%; left: 0; display: block; width: 110px; height: 50px; margin-top: -27px; text-align: center }
.enjoy-categories-items dd { margin-left: 120px; padding: 15px 30px; border-left: 1px dotted rgb(149, 149, 149) }
.enjoy-categories-items dd a { font-size: 15px; line-height: 35px; display: inline-block; margin-right: 15px; margin-left: 15px; color: rgb(145, 145, 145) }
.enjoy-categories-items dd a:hover, .enjoy-categories-items dd a.active { color: var(--primary) }
.enjoy-categories-items dd a.active { font-weight: 400 }
.enjoy-categories-sort { background-color: var(--gray) }
.enjoy-categories-sort .frame-full a { font-size: 16px; line-height: 80px; display: inline-block; width: 80px; text-align: center; border-right: 1px dotted rgb(149, 149, 149); border-left: 1px dotted rgb(149, 149, 149) }
.enjoy-categories-sort .frame-full a:first-child { margin-left: 121px; border-right: 0 }
.enjoy-categories-sort .frame-full a.active { color: var(--primary) }
.enjoy-categories-color dd { padding-left: 45px }
.enjoy-categories-color dd a { position: relative; overflow: hidden; width: 40px; height: 16px; margin: 9px 0; margin-right: 1px; opacity: .6; border: 1px solid rgba(0, 0, 0, .2) }
.enjoy-categories-color dd a:hover, .enjoy-categories-color dd a.active { opacity: 1; border-color: rgba(0, 0, 0, .6) }
.enjoy-categories-color .multicolor { background: url(../images/common/bg_color.png) repeat-x left center; background-size: 40px 16px }
.eci-cats a.active { color: var(--primary) }
.enjoy-hot-tags-list { overflow: hidden }
.enjoy .works-related-recommend { background-color: rgb(89, 87, 87) }
.eci-cats .with-arrow-line { margin-bottom: 0 }
.eci-cats .with-arrow-line:before, .eci-cats .with-arrow-line:after { display: none }
.eci-cats .ecl-zhishi-con em { display: none }
.eci-cats .ecl-zhishi { padding: 2rem 165px; border-bottom: 1px dotted rgb(149, 149, 149) }
.eci-cats .ecl-zhishi-con { padding-bottom: 0 }
.eci-cats .ecl-zhishi-con a { font-size: 2rem }
.common-works-list-item a .inner>img { width: 0; height: 0 }
.works-related-recommend-header .text-right a { font-size: 13px }
.like-nums { display: inline-block }
.article-prev-next a { display: block }
.story-full { position: relative; width: 100%; height: 100% }
.flash-arrow { position: absolute; bottom: 20px; left: 0; width: 100%; height: 50px; text-align: center }
.flash-arrow i, .flash-down { -webkit-animation: fadeInUp .6s cubic-bezier(.445, .05, .55, 1) .2s infinite alternate; animation: fadeInUp .6s cubic-bezier(.445, .05, .55, 1) .2s infinite alternate }
.flash-down-:hover { -webkit-animation-name: showbutton; animation-name: showbutton }
@-webkit-keyframes nextbutton {
  0% { -webkit-transform: translateY(0px); transform: translateY(0px); opacity: 0 }
  50% { -webkit-transform: translateY(-35px); transform: translateY(-35px); opacity: 1 }
  100% { -webkit-transform: translateY(0px); transform: translateY(0px); opacity: 0 }
}
@keyframes nextbutton {
  0% { -webkit-transform: translateY(0px); transform: translateY(0px); opacity: 0 }
  50% { -webkit-transform: translateY(-35px); transform: translateY(-35px); opacity: 1 }
  100% { -webkit-transform: translateY(0px); transform: translateY(0px); opacity: 0 }
}
@-webkit-keyframes showbutton {
  100% { -webkit-transform: translateY(0px); transform: translateY(0px); opacity: 1 }
}
@keyframes showbutton {
  100% { -webkit-transform: translateY(0px); transform: translateY(0px); opacity: 1 }
}

.enjoy-top-works { display: flex; flex-wrap: wrap; }
.enjoy-top-works .hwm-item { width: 25%; }
.enjoy-top-works .hwm-item .ratio { padding-top: 70%; }
.enjoy-tw-more { text-align: center; padding-top: 6rem; padding-bottom: 8rem; }
@media only screen and (max-width:991px) {
  .enjoy-top-works .hwm-item { width: 50%; }
}

.story-full-footer { position: fixed; z-index: 110; bottom: -10px; left: 0; width: 100%; height: 0; transition: height 1s; background-color: rgba(255, 255, 255, 1) }
.story-full-footer.show { height: 80px }
.has-top-mask:after { position: absolute; top: -10px; left: 0; display: block; width: 100%; height: 10px; content: ""; background: url(../images/common/profession_banner_header.png) repeat-x left -30px }
.story-full-footer .text-center { font-size: 18px; line-height: 50px; padding: 10px 0 }
.icon-story-zoyoo, .icon-story-growing, .icon-story-talking, .icon-story-flash-arrow, .icon-growing-title, .icon-growing-flag { width: 50px; height: 50px; vertical-align: top }
.icon-story-zoyoo { background-position: -250px -300px }
.icon-story-growing { background-position: -150px -300px }
.icon-story-growing:before { background-position: -150px -350px }
.icon-story-talking { background-position: -200px -300px }
.icon-story-talking:before { background-position: -200px -350px }
a.active .icon:before, a:hover .icon:before { opacity: 1 }
.icon-story-talking { background-position: -200px -300px }
.icon-story-flash-arrow { background-position: -300px -300px }
.icon-growing-title { border-radius: 0; background-position: -350px -300px }
.icon-growing-flag { border-radius: 0; background-position: -350px -350px }
.story-normal-mode .story-full { display: none }
.story-normal-mode .story-normal { display: block }
.story-normal-mode { overflow-y: auto; padding-top: 150px }
.story-normal-nav { position: relative; z-index: 5; top: 0; left: 0; width: 100%; height: 90px; padding-top: 21px; transition: all .3s; background-color: rgb(85, 215, 170) }
.story-normal-nav a { font-size: 26px; line-height: 50px; display: inline-block; margin-right: 100px; transition: all .3s; color: rgb(28, 79, 62) }
.story-normal-nav i { transition: all .3s }
.story-normal-nav a:hover, .story-normal-nav a.active { color: rgb(255, 255, 255) }
.fixed-bar .story-normal-nav { position: fixed; top: 60px; height: 60px; padding-top: 15px }
.fixed-bar .story-normal { padding-top: 60px }
.fixed-bar .story-normal-nav a i { margin-top: -10px; -webkit-transform: scale(0); transform: scale(0) }
.fixed-bar .story-normal-nav a { font-size: 16px; line-height: 30px; margin-right: 0; margin-left: 25px }
.story-normal-growing-overview { padding-top: 80px; padding-bottom: 50px }
.story-normal-growing-list:last-child { margin-bottom: 150px }
.story-right { float: right; width: 350px; color: rgb(45, 108, 112) }
.story-left { max-width: 900px; margin-right: 500px }
.story-right:before { position: absolute; top: 0; left: 1px; width: 50%; height: 100%; content: " "; border-right: 1px solid rgb(59, 120, 123) }
.story-right-top-image img { width: 100% }
.icon-growing-title { font-size: 16px; font-style: normal; line-height: 28px }
.story-right-image img { max-width: 320px; max-height: 320px; margin-top: 20px; border: 1px solid rgb(59, 120, 123); border-radius: 50%; background-color: rgb(255, 255, 255); background-repeat: no-repeat; background-size: cover }
.story-right-caption { font-size: 13px; line-height: 2; padding: 20px 25px 10px 25px; text-align: center; background-color: rgb(249, 249, 249) }
.story-right-caption:after { position: absolute; bottom: -9px; left: 50%; width: 9px; height: 9px; margin-left: -4px; content: " "; border-radius: 50%; background-color: rgb(59, 120, 123) }
.story-normal-growing-list:last-child .story-right-image:last-child .story-right-caption:after { display: none }
.story-right-flag { padding-top: 30px }
.story-right-top-image { min-height: 200px }
.story-left-subject, .story-left-sub-subject { color: rgb(45, 108, 112) }
.story-left-subject { font-size: 30px; line-height: 60px; padding-top: 50px }
.story-left-subject span { font-size: 34px; display: inline-block; width: 60px; height: 60px; margin-right: 15px; text-align: center; color: rgb(255, 255, 255); border-radius: 50%; background-color: rgb(45, 108, 112) }
.story-left-sub-subject { font-size: 16px; padding: 30px 0 100px 0 }
.story-right-at-bottom { display: none }
.story-right-at-bottom .story-right-image img { max-width: 95%; max-height: 95%; margin: 2px }
@media only screen and (max-width:1199px) {
  .story-left { width: 100%; max-width: 1200px; margin: 0 }
  .story-right, .story-right-at-bottom .story-right-caption:after { display: none }
  .story-right-at-bottom { display: block }
}
.story-talking-list { padding-top: 80px }
.story .pager-list { padding-top: 80px; padding-bottom: 80px }
.story-talking-list .item { margin: 50px 0; padding-right: 50px }
.story-talking-list .item a { display: block; padding-left: 170px }
.story-talking-list .item a:hover { color: rgb(25, 216, 170) }
.story-talking-list .item img { position: absolute; top: 0; left: 0; width: 150px; border-radius: 50%; background-position: center center; background-size: cover }
.story-talking-list .item i { display: inline-block; width: 10px; height: 10px; margin-right: 10px; vertical-align: middle; border-radius: 50%; background-color: var(--secondary) }
.story-talking-list .item a:hover i { background-color: rgb(25, 216, 170) }
.story-talking-list .item strong { font-size: 20px; position: relative; display: block; padding: 10px 0 20px 0 }
.story-talking-list .item strong:after { position: absolute; bottom: 10px; left: 0; display: block; width: 40px; height: 0; content: ""; border-bottom: 1px solid rgb(147, 147, 148) }
.story-talking-list .item a:hover strong:after { border-color: rgb(25, 216, 170) }
.story-talking-list .item span { font-size: 12px; font-style: normal }
.story-talking-details-right-tips { line-height: 1.5; margin-top: 30px; padding-top: 40px; border-top: 1px solid rgb(229, 229, 229) }
.result-not-found { min-height: 320px; padding-left: 280px; background: url(../images/common/result_not_found.gif) no-repeat left 70px; background-size: 200px auto }
.result-not-found-title { font-size: 28px; line-height: 1.5; padding-top: 60px; padding-bottom: 60px }
.result-not-found-tags { line-height: 30px; overflow: hidden; height: 120px }
.tips-not-found { font-size: 15px; padding-bottom: 50px }
.div-frame-100-50 { float: left; width: 50%; padding: 5px; border: 1px dotted red; min-width: 200px }
.div-frame-100-50:before, .div-frame-100-50:after { display: table; content: " " }
.div-frame-100-50:after { clear: both }
.common-footer-sitemap { z-index: 3; display: none }
.common-footer-sitemap-header { line-height: 1.8; padding: 20px 20px 40px 20px; color: rgb(128, 128, 128); background-color: rgb(0, 0, 0) }
.common-footer-sitemap-header h3 { padding: 20px; color: rgb(231, 231, 231) }
.common-footer-sitemap-content { font-size: 13px; padding: 20px; color: rgb(204, 204, 204); background-color: rgb(43, 43, 43) }
.common-footer-sitemap-content strong { font-size: 14px; display: inline-block; padding-top: 10px; color: rgb(255, 255, 255) }
.common-footer-sitemap-close { position: absolute; top: 50%; right: 50px; width: 40px; height: 40px; margin-top: -20px; opacity: .7; background: url(../images/common/icon_common.png) no-repeat 0 -110px; background-size: 500px 500px }
.common-footer-sitemap-close:hover { opacity: .9; background-position: -40px -110px }
.page-404 { min-height: 900px; padding-top: 80px; background: url(../images/common/bg_404.png?v1) no-repeat center top; background-size: 2000px 800px }
.page-404 h2 { font-size: 40px; color: rgb(128, 128, 128) }
.max-700 { max-width: 700px; margin-right: auto; margin-left: auto; padding-left: 30px }
.page-404-nav { font-size: 15px; line-height: 45px; padding-top: 80px; padding-left: 30px }
.page-404-nav a, .page-404-nav .wait-time { color: var(--primary) }
.page-404-nav a:hover { color: rgb(53, 53, 53) }
.tags-list-category { padding: 50px 0; border-bottom: 1px solid rgb(168, 168, 168) }
.tags-list-category h4 { padding-bottom: 20px }
.bg-size-cover { background-repeat: no-repeat; background-position: center center; background-size: cover }
.fp-viewing-home #fp-nav { display: none }
#fp-nav ul { position: relative; padding-top: 5px; padding-bottom: 5px }
#fp-nav ul li, .fp-slidesNav ul li { width: 25px; height: 25px; margin: 10px 5px; text-align: center }
#fp-nav ul li .fp-tooltip.right { font-size: 14px; line-height: 29px; z-index: 2; right: -2px; width: 29px !important; height: 29px !important; color: white; border-radius: 50% }
#fp-nav ul li .fp-tooltip.right:after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; border: 1px solid transparent; border-radius: 50% }
#fp-nav ul li a span, .fp-slidesNav ul li a span { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: rgba(0, 0, 0, .8) }
#fp-nav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li a.active span, .fp-slidesNav ul li:hover a.active span, #fp-nav ul li:hover a span, .fp-slidesNav ul li:hover a span { display: none }
.pace-inactive { display: none }
img { max-width: 100%; height: auto }
a.block span { display: block; position: relative }
a.block span.inline, a.block span.inline-block, a.block span.inline-item { display: inline-block }
a .hover-zoom { transition: all .4s ease-out; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden }
a:hover .hover-zoom { -webkit-transform: scale(1.08); transform: scale(1.08) }
.slides-list, .slides-list li, .slides-list li a, .bx-wrapper, .bx-viewport { position: relative; height: 100% }
.slick-list, .slick-track { height: inherit }
.cxany-color-strong { color: rgb(98, 212, 155) }
.cxany-font-sm { font-size: 12px }
.cxany-font-md { font-size: 16px }
.cxany-font-lg { font-size: 18px }
.text-right { text-align: right }
.text-center { text-align: center }
.text-justify { text-align: justify }
.cxany-valign-middle span, .cxany-valign-middle img { display: inline-block; vertical-align: middle; float: none }
.section-banner { left: 0; top: 0; width: 100%; z-index: 0 }
.home-pages { z-index: 2; background-color: white }
.top-banner-frame h2 { padding-top: 0; padding-bottom: 0; margin: 0 auto }
.top-banner-text h3 { padding-bottom: 20px }
.btn-border.with-plus i:before { content: "+"; font-style: normal; display: inline-block; padding-left: 20px }
.home-overview { color: var(--secondary) }
.h-o-text { padding-left: 3% }
.h-o-text-subject { line-height: 1.8; font-size: 30px; font-weight: 400 }
.free-line { line-height: 1 }
.free-line span { content: " "; display: inline-block; width: 30px; height: 0; border-top-width: 1px; border-top-style: solid; margin-top: 20px; margin-bottom: 20px }
.h-o-content { font-size: 18px }
.h-o-footer { font-size: 20px; padding-top: 30px; padding-bottom: 40px }
.home-brand-list-div .background em { font-size: 16px; font-style: normal }
.home-brand-list-div table tr { line-height: 1.5 }
.home-brand-list-div table { margin: auto; width: 100% !important }
.home-brand-list-div i.spacer { position: relative; content: ""; height: 30px; width: 5px; border-right: 1px solid black }
.home .subject { font-size: 25px; line-height: 1.5; transition: color .25s }
.home .sub { font-size: 16px; transition: color .25s }
.title-with-line { padding-top: 100px; padding-top: 12rem; font-size: 3.5rem; margin-bottom: 10px; margin-bottom: 5rem }
.title-with-line:not(.no-rotate):before { width: 0; height: 4.5rem; border-left: 1px solid white; bottom: 0; margin-left: 0 }
.title-with-line.gray-line:before { border-color: rgb(128, 128, 128) }
.home .section-slides .title-with-line:before { border-left: 1px solid rgb(149, 149, 149) }
.home .section-slides .title-with-line { padding-top: 5rem; margin-top: 0; margin-bottom: 5rem }
.section-innovation { padding: 40px 0; margin-bottom: 30px; color: var(--secondary) }
.section-innovation a.btn-border { margin-top: 20px }
.home-works-top .hover-zoom { transition: all .8s }
.home-works-top a:hover .hover-zoom { -webkit-transform: scale3d(1.02, 1.02, 1); transform: scale3d(1.02, 1.02, 1) }
.home-works-top .text { padding-top: 12rem; padding-bottom: 12rem; color: var(--secondary) }
.home .common-works-list-item { width: 100% }
.hwt-list .slick-dots { bottom: 38rem }
.zygj .video .fancybox-skin { padding: 0 !important }
.archives-video-frame, .archives-video-frame body, .archives-video-box { height: 100% }
.archives-video-frame video { width: 100%; height: 100%; object-fit: cover }
@media screen and (min-width:1024px) {
  .home .common-works-list-item { width: 50% }
  .works-home .common-works-list-item { width: 50% }
  .home .common-works-list-item:nth-child(-n+4) { display: inline-block }
}
@media screen and (min-width:1280px) {
  .home .common-works-list-item { width: 33.3333% }
  .works-home .common-works-list-item { width: 33.3333% }
  .home .common-works-list-item:nth-child(-n+6) { display: inline-block }
}
@media screen and (min-width:2048px) {
  .home .common-works-list-item:nth-child(-n+8) { display: inline-block }
}
.common-works-list-information { line-height: 30px; position: relative; display: block; width: 150px; position: absolute; right: 0; bottom: -5px; text-align: right }
.home-slides-list img { width: 1px; z-index: -1 }
.slick-dotted.slick-slider { margin-bottom: 0 }
.slick-dots { line-height: 1; bottom: 30px }
.slick-dots li { width: auto; height: auto }
.slick-dots li button { width: 35px; height: 1px; padding: 0; background: white }
.slick-dots li button:before { display: none }
.slick-dots li.slick-active button { background-color: var(--primary) }
.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) }
.section-footer { padding-top: 100px; padding-bottom: 30px; line-height: 2.1; color: var(--secondary); z-index: 9; background-color: white }
.section-footer a { color: inherit }
.section-footer h4 { color: rgb(158, 158, 158); font-size: 16px; margin-bottom: 30px }
.s-f-copyright { color: rgb(68, 68, 68) }
.s-f-copyright a { color: inherit }
.s-f-touch { line-height: 2.3 }
.s-f-links-list { font-size: 15px; line-height: 1.8; height: 130px; min-width: 200px; overflow: auto; display: inline-block; padding-right: 30px }
.s-f-links-list::-webkit-scrollbar { width: 3px; border-left: 1px solid white; border-right: 1px solid white; background-color: rgb(220, 220, 220) }
.s-f-links-list::-webkit-scrollbar-thumb { border-radius: 10px; background-color: rgb(128, 128, 128) }
.s-f-links-list a { color: rgb(68, 68, 68); white-space: nowrap }
.s-f-contact { text-align: right }
.s-f-contact h3 { font-size: 30px; color: rgb(48, 48, 48); font-weight: 400; padding-bottom: 20px }
.s-f-contact h5 { font-size: 13px; padding-bottom: 30px }
.s-f-c-user { padding-left: 20px; padding-right: 20px; line-height: 1.8; font-size: 14px }
.s-f-c-user em { display: block }
.s-f-c-wechat img { max-width: 85px }
.section-footer .spacer-gray { line-height: 1; font-size: 0; border-top: 1px solid rgb(220, 220, 220); margin-top: 50px; margin-bottom: 30px }
.s-f-b-nav { text-align: right; font-size: 14px }
.s-f-b-nav-list { display: inline-block; text-align: left; padding-top: 15px }
.s-f-b-nav-list li { display: inline-block; padding-left: 25px }
.s-f-b-nav-list a.green:hover { color: black }
.h-s-more { padding-top: 4rem; padding-bottom: 1rem; line-height: 1 }
.h-s-more.has-padding { padding-bottom: 5rem }
.h-n-n-more { padding-left: 170px; background-color: white; padding-top: 35px }
.frame-box { border: 5px solid rgb(204, 204, 204); padding: 50px 100px; padding: 5rem 10rem; margin-top: 30px; margin-top: 3rem; margin-bottom: 100px; margin-bottom: 10rem }
.innovation-choose-list h4.title-with-line:before { border-left: 0 }
.innovation-choose-list h4.title-with-line { padding-bottom: 0; margin-bottom: 35px }
.profession .common-header-text { max-width: inherit; margin-bottom: 0 }
.profession .frame-box { margin-bottom: 50px; margin-bottom: 5rem }
.i-n-l-text { padding-top: 60px; padding-top: 6rem; padding-bottom: 60px; padding-bottom: 6rem; padding-right: 20px !important; padding-left: 20px !important }
.i-n-l-text h4 { padding: 0; padding-bottom: 2rem; margin-bottom: 2rem }
.i-n-l-text h4:before { left: 0; bottom: 0; margin: 0 }
.i-n-l-line:nth-child(even) .i-n-l-text { float: right }
.innovation-think { background: rgb(245, 245, 245) }
.section-contact { z-index: 9 }
.whome .home-works-top .text { transition: all .25s; position: absolute; background-color: rgba(0, 0, 0, .5); padding: 1rem; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; z-index: 2; opacity: 0 }
.whome .wht-list.bottom-shadow { margin-bottom: 0 !important }
.whome .wht-list.bottom-shadow:after { bottom: 0 }
.whome .hwt-list .slick-dots { bottom: 3rem }
.whome .wht-list .subject { font-size: 3.5rem; padding-bottom: .5rem }
.whome .wht-list .sub { font-size: 2rem }
.whome .wht-list a:hover .text { opacity: 1 }
.safari:root { --fw-normal: 300; --fw-bold: 500; --fw-light: 200 }
.safari .nav-main-menu a, .safari .nav-main-menu h2 { font-weight: var(--fw-bold) }
.safari .nav-tele>a { font-weight: var(--fw-bold) }
.safari body { font-weight: var(--fw-normal) }
@media screen and (min-width:1024px) {
  .i-n-l-text { padding-left: 35px !important; padding-right: 35px !important }
}
@media screen and (min-width:1366px) {
  .frame-box { border-width: 6px }
}
@media screen and (min-width:1600px) {
  .frame-box { border-width: 6px }
  .i-n-l-text { padding-left: 60px !important; padding-right: 60px !important }
}
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 (min-width:1280px) {
  ins[data-type="screen"] { content: "xl" }
}
@media (min-width:1366px) {
  ins[data-type="screen"] { content: "1366" }
}
@media (min-width:1440px) {
  ins[data-type="screen"] { content: "1440" }
}
@media (min-width:1600px) {
  ins[data-type="screen"] { content: "1600" }
}
@media (min-width:1920px) {
  ins[data-type="screen"] { content: "1920" }
}
@media (min-width:2560px) {
  ins[data-type="screen"] { content: "2560" }
}
@media screen and (max-width:3800px) {
  .top-banner-more { font-size: 25px }
}
@media screen and (max-width:2500px) {
  .top-banner-more { font-size: 20px }
}
@media screen and (max-width:1900px) {
  body { font-size: 15px }
  .nav-main-menu a, .nav-main-menu h2 { font-size: 1.8rem }
  .top-banner-text h3 { font-size: 1.8rem }
  .top-banner-more { font-size: 16px }
  .slick-dots { -webkit-transform: scale(.7, 1); transform: scale(.7, 1); -webkit-transform-origin: center bottom; transform-origin: center bottom }
  .home-overview { padding-top: 100px; padding-bottom: 100px }
  .h-o-text-subject { font-size: 20px; line-height: 1.6 }
  .h-o-content { font-size: 15px }
  .h-o-footer { font-size: 17px }
  .h-o-image img { max-width: 450px }
  .button.btn-border { font-size: 12px; padding: 5px 20px }
  .home-brand-list-div .background { font-size: 18px }
  .home .subject { font-size: 2rem }
  .home .sub { font-size: 1.2rem }
  .home-news-list .title { font-size: 2.1rem }
  .home-news-list .home-news-top .title { font-size: 2.6rem }
  .home-news-list .overview { font-size: 12px; height: 69px; line-height: 23px }
  .home-news-new .home-news-list .title { font-weight: 400 }
  .home-news-list .time-month-day { font-size: 26px; line-height: 30px; padding-top: 2px }
  .home-news-list .time-year { font-size: 14px }
  .home-contact-header-text { font-size: 28px }
  .home-contact-header h3 { font-size: 15px }
  .home-contact-header { padding: 20px }
  .overview { font-size: 14px }
  ..s-f-b-nav { font-size: 13px }
  .s-f-links-list { font-size: 13px; line-height: 25px; height: 125px; min-width: 140px }
  .s-f-contact h3 { font-size: 24px }
  .s-f-contact h5, .s-f-c-user { font-size: 12px }
  .cwli-con { padding: 3.5rem }
  .cwli-con .date { padding-left: 3.5rem; padding-right: 3.5rem }
  .cwli-con .subject, .cwli-con .cats { font-size: 5rem }
}
@media screen and (max-width:1599px) {
  :root { --sub-banner: 68rem }
  .top-banner-more { font-size: 14px }
  .overview { font-size: 13px }
  .section-footer h4 { margin-bottom: 20px }
  .home-news-new .text { padding-bottom: 5px }
  .cwli-con { padding: 3rem }
  .cwli-con .date { padding-left: 3rem; padding-right: 3rem }
  .cwli-con .subject, .cwli-con .cats { font-size: 4rem }
}
@media screen and (max-width:1200px) {
  body { font-size: 12px }
  .section-overview { padding-top: 40px }
  .home-news-new { padding-left: 20px }
  .home-news-list .time { width: 100px; height: 80px; padding-right: 10px }
  .home-news-new ul:before { width: 100px }
  .home-news-left-title h4 { font-size: 24px }
  .home-news-list .title { line-height: 1.8 }
  .home-news-new .small { display: block }
  .home-flash-down { margin-bottom: 60px }
  .home-overview { padding-top: 50px; padding-bottom: 50px }
  .home-brand-list-div .background, .home-brand-list-div .background em { font-size: 15px }
  .section-innovation a.btn-border { margin-top: 15px }
  .section-footer { padding-top: 40px }
  .s-f-contact { text-align: center }
  .s-f-c-user { padding-top: 125px }
  .s-f-c-user em { display: inline-block; width: 15px }
  .s-f-c-wechat { width: 100%; margin-top: -140px; float: left !important }
  .s-f-c-wechat img { max-width: 110px; max-height: 110px; margin: auto; float: none }
  .section-footer .spacer-gray { width: 1px; height: 25px; display: block; margin: 15px auto; border-left: 1px solid rgb(193, 193, 193) }
  .s-f-social a { font-size: 35px; color: black; margin: 0 15px; line-height: 1.5 }
  .s-f-b-nav { font-size: 12px; text-align: center; white-space: nowrap }
  .s-f-b-nav li { font-size: 13px; padding: 0 10px }
  .zygj.mobile .fancybox-skin { padding: 10px !important }
  .btn-border.with-plus i:before { padding-left: 10px }
  .s-f-contact-mobile { font-size: 13px; padding-top: 20px; padding-bottom: 0 }
  .s-f-contact-mobile h5 { font-size: 15px; padding-bottom: 0; color: black }
  .h-o-image img { max-width: 400px }
  .h-o-content { font-size: 14px }
  .h-o-footer { font-size: 15px }
  .home-brand { padding-bottom: 10px !important }
}
@media screen and (max-width:1023px) {
  .slick-dots li button { width: 15px }
  .home-overview { padding-top: 0; padding-bottom: 0 }
  .h-o-text { text-align: center }
  .h-o-text { padding-left: 5px }
  .h-o-text-subject { font-size: 18px; line-height: 1.5 }
  .h-o-content { font-size: 13px }
  .h-o-footer { font-size: 14px; padding-top: 20px; padding-bottom: 30px }
  .home-works-top .ratio-3-1 { padding-top: 70% }
  .home-works-top .text { padding-top: 15px; padding-bottom: 15px; margin-bottom: 5px; text-align: center }
  .h-w-t-info { display: none !important }
  .home .sub { font-size: 10px }
  .home .common-works-list-item:nth-child(-n+4) { display: inline-block }
  .home .common-works-list-title { background-color: transparent; padding: 15px 0; margin-bottom: 5px }
  .home-works-list-more { padding-top: 0; padding-bottom: 50px }
  .home-slides-list .ratio-3-1 { padding-top: 60% }
  .home-slides-list .slick-dots { bottom: 15px }
  .home .home-contact-header { padding: 5px }
  .home-contact-header-text { font-size: 18px; font-size: 18px; letter-spacing: 8px; padding-left: 5px; padding-top: 15px; padding-bottom: 25px }
  .home-contact-header h3 { font-size: 10px }
  .home-news-list-more { text-align: center; margin-bottom: 50px; margin-top: -10px }
  .home .section-slides .title-with-line { margin-top: 0; padding-top: 10px; margin-bottom: 25px }
  .home .title-with-line:before { height: 20px }
  .h-s-more { padding-top: 0; padding-bottom: 4rem }
}
@media screen and (max-width:991px) { }
@media only screen and (min-width:992px) {
  .second-fixed-nav { line-height: normal; position: fixed; z-index: 110; top: 45%; right: 17px; left: auto; width: 35px; margin-top: -115px; text-align: center; background-color: transparent }
  .second-fixed-nav a { font-size: 0; line-height: 29px; position: relative; display: block; overflow: hidden; width: 29px; height: 29px; margin: 8px 3px; padding: 0; color: var(--white); border-radius: 50% }
  .second-fixed-nav a:after { position: absolute; top: 12px; left: 12px; width: 100%; width: 6px; height: 100%; height: 6px; content: ""; border: 1px solid transparent; border-radius: 50%; background: rgba(0, 0, 0, .8) }
  .second-fixed-nav a:hover, .second-fixed-nav a.active { font-size: 14px }
  .second-fixed-nav a:hover:after, .second-fixed-nav a.active:after { background: transparent }
}