@charset "UTF-8"; body, html { width: 100% } input::-ms-clear, input::-ms-reveal { display:none } *, :after, :before { box-sizing: inherit } html { font-family: sans-serif; line-height: 1.15; box-sizing: border-box; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -ms-overflow-style: scrollbar; -webkit-tap-highlight-color: rgba(0,0,0,0) } @-ms-viewport { width:device-width } article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section { display: block } body { margin: 0; color: rgba(0,0,0,.6); font-size: 14px; font-family: -apple-system, BlinkMacSystemFont, Open Sans, OpenSans, PingFang SC, Arial, Microsoft YaHei, Segoe UI, Hiragino Sans GB, Helvetica Neue, Helvetica, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; font-variant: tabular-nums; font-weight: 400; line-height: 1.5715; background-color: #fff; font-feature-settings: "tnum" } [tabindex="-1"]:focus { outline: none!important } hr { box-sizing: content-box; height: 0; overflow: visible } h1, h2, h3, h4, h5, h6 { color: rgba(0,0,0,.6); font-weight: 500 } h1, h2, h3, h4, h5, h6, p { margin-top: 0; margin-bottom: 0 } abbr[src-title], abbr[title] { text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; border-bottom: 0; cursor: help } address { margin-bottom: 1em; font-style: normal; line-height: inherit } input[type=number], input[type=password], input[type=text], textarea { -webkit-appearance: none } dl, ol, ul { margin-top: 0; margin-bottom: 1em } ol ol, ol ul, ul ol, ul ul { margin-bottom: 0 } dt { font-weight: 500 } dd { margin-bottom: .5em; margin-left: 0 } blockquote { margin: 0 0 1em } dfn { font-style: italic } b, strong { font-weight: bolder } small { font-size: 80% } sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline } sub { bottom: -.25em } sup { top: -.5em } a { color: rgba(0,0,0,.6); text-decoration: none; background-color: transparent; outline: none; cursor: pointer; transition: color .3s; -webkit-text-decoration-skip: objects } a:focus { text-decoration: none; -webkit-text-decoration-skip: ink; text-decoration-skip-ink: auto } a:hover { text-decoration: none; outline: 0 } code, kbd, pre, samp { font-size: 1em; font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace } pre { margin-top: 0; margin-bottom: 1em; overflow: auto } figure { margin: 0 0 1em } img { vertical-align: middle; border-style: none } svg:not(:root) { overflow: hidden } [role=button], a, area, button, input:not([type=range]), label, select, summary, textarea { touch-action:manipulation } table { border-collapse: collapse } caption { padding-top: .75em; padding-bottom: .3em; color: rgba(0,0,0,.45); text-align: left; caption-side: bottom } th { text-align: inherit } button, input, optgroup, select, textarea { margin: 0; color: inherit; font-size: inherit; font-family: inherit; line-height: inherit } button, input { overflow: visible } button, select { text-transform: none } [type=reset], [type=submit], button, html [type=button] { -webkit-appearance:button } [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner { padding:0; border-style:none } input[type=checkbox], input[type=radio] { box-sizing: border-box; padding: 0 } input[type=date], input[type=datetime-local], input[type=month], input[type=time] { -webkit-appearance: listbox } textarea { overflow: auto; resize: vertical } fieldset { min-width: 0; margin: 0; padding: 0; border: 0 } legend { display: block; width: 100%; max-width: 100%; margin-bottom: .5em; padding: 0; color: inherit; font-size: 1.5em; line-height: inherit; white-space: normal } progress { vertical-align: baseline } [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height:auto } [type=search] { outline-offset:-2px; -webkit-appearance:none } [type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration { -webkit-appearance:none } ::-webkit-file-upload-button { font:inherit; -webkit-appearance:button } output { display: inline-block } summary { display: list-item } template { display: none } [hidden] { display:none!important } mark { padding: .2em; background-color: #feffe6 } ::-moz-selection { color:#fff; background:#1a8b8e } ::selection { color: #fff; background: #1a8b8e } .h1, .h2, .h3, .h4, .h5, .h6 { font-family: inherit; font-weight: 400; line-height: 1.3; color: inherit; margin-bottom: 0 } .h1 { font-size: 32px } .h2 { font-size: 28px } .h3 { font-size: 24px } .h4 { font-size: 20px } .h5 { font-size: 18px } .h6 { font-size: 16px } .maxwidth { /* width: 84%;*/ width:100%; max-width:1200px; margin: 0 auto } hr { margin-top: 16px; margin-bottom: 16px; border: 0; border-top: 1px solid rgba(0,0,0,.1) } .clearfix:after, .clearfix:before { content: " "; display: table } .clearfix:after { clear: both } .center-block { display: block; margin-left: auto; margin-right: auto } .pull-right { float: right } .pull-left { float: left } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0 } .sr-only-focusable:active, .sr-only-focusable:focus { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto } .invisible { visibility: hidden } .text-hide { font: "0/0", a; color: transparent; text-shadow: none; background-color: transparent; border: 0 } .text-left { text-align: left } .text-right { text-align: right } .text-center { text-align: center } .text-justify { text-align: justify; text-justify: inter-ideograph } .text-nowrap, .text-truncate { white-space: nowrap } .text-truncate { overflow: hidden; text-overflow: ellipsis } .text-lowercase { text-transform: lowercase } .text-uppercase { text-transform: uppercase } .text-capitalize { text-transform: capitalize } .c-flex { display: flex; flex-wrap: wrap; align-items: center } .overflow-hidden { overflow: hidden } ::-webkit-scrollbar { background:#f4f4f4; width:8px; height:8px } ::-webkit-scrollbar-thumb { background:rgba(0,0,0,.2); width:8px; height:8px; border-radius:8px } ::-webkit-scrollbar-track { border-radius:8px } input:-webkit-autofill { box-shadow:inset 0 0 0 1000px #fff!important } svg.icon { width: 1em; height: 1em; vertical-align: -.15em; fill: currentColor; overflow: hidden } .unable-to-interact { cursor: not-allowed; pointer-events: none } @font-face { font-family: bebas; src: url(../fonts/bebas-webfont.woff2) format("woff2"), url(../fonts/bebas-webfont.woff) format("woff"); font-weight: 400; font-style: normal } @font-face { font-family: dinb; src: url(../fonts/dinb.woff2) format("woff2"), url(../fonts/dinb.woff) format("woff"); font-weight: 400; font-style: normal } @font-face { font-family: OpenSans; src: url(../fonts/opensans.woff2) format("woff2"), url(../fonts/opensans.woff) format("woff"); font-weight: 400; font-style: normal } @media only screen and (min-width:641px) { a:hover { color: #1a8b8e } } @media only screen and (max-width:1440px) { .maxwidth { width: 94% } .h1 { font-size: 28px } .h2 { font-size: 24px } .h3 { font-size: 22px } .h4 { font-size: 18px } .h5 { font-size: 16px } .h6 { font-size: 14px } } @media only screen and (max-width:960px) { .h1 { font-size: 24px } .h2 { font-size: 20px } .h3 { font-size: 18px } .h4 { font-size: 16px } .h5 { font-size: 14px } .h6 { font-size: 13px } } @media only screen and (max-width:640px) { .h1 { font-size: 20px } .h2 { font-size: 18px } .h3 { font-size: 17px } .h4 { font-size: 15px } } @-webkit-keyframes fadeIn { 0% { opacity:0 } to { opacity: 1 } } @keyframes fadeIn { 0% { opacity:0 } to { opacity: 1 } } @-webkit-keyframes fadeOut { 0% { opacity:1 } to { opacity: 0 } } @keyframes fadeOut { 0% { opacity:1 } to { opacity: 0 } } @-webkit-keyframes scaleIn { 0% { transform:scale(.88) } to { transform: scale(1) } } @keyframes scaleIn { 0% { transform:scale(.88) } to { transform: scale(1) } } a[title=站长统计] { display: none } .v-container { opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s } .v-container.ready { opacity: 1; visibility: visible } .el-message-box { max-width: 94% } @media only screen and (max-width:640px) { .el-cascader-menu { min-width: 100px } .el-cascader-menu .el-cascader-node__label { font-size: 12px } .el-cascader-menu .el-cascader-node__postfix { right: 6px; font-size: 12px } .el-cascader-menu .el-cascader-node__prefix { left: 6px; font-size: 12px; display: none } .el-cascader-menu .el-cascader-node { padding: 0 16px 0 0; line-height: 28px; height: 28px } } .iconfont { font-family: iconfont!important; font-size: inherit; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } .magnifierRentgen { box-sizing: border-box; overflow: hidden; position: relative; width: 100% } .magnifierRentgen .magnifier-loupe { overflow: hidden; position: absolute; border-radius: 50%; top: 0; left: 0; border: 2px solid #fff; box-shadow: 0 0 8px 0 rgba(0,0,0,.06); cursor: none; transform: scale(1.5); display: none } @media only screen and (max-width:960px) { .magnifierRentgen .magnifier-loupe { opacity: 0; visibility: hidden } } .c-notification { position: fixed; right: 0; top: 24px; z-index: 9999; max-width: calc(100vw - 32px); margin-right: 24px } .c-notification-notice { position: relative; padding: 16px 24px; width: 384px; margin-bottom: 16px; margin-left: auto; overflow: hidden; background: #fff; border-radius: 2px; box-shadow: 0 3px 6px -4px rgba(0,0,0,.12), 0 6px 16px 0 rgba(0,0,0,.08), 0 9px 28px 8px rgba(0,0,0,.05); -webkit-animation: NotificationFadeIn .2s cubic-bezier(.645, .045, .355, 1); animation: NotificationFadeIn .2s cubic-bezier(.645, .045, .355, 1) } .c-notification-notice .c-notification-notice-content { position: relative } .c-notification-notice .c-notification-notice-with-icon { padding-left: 48px } .c-notification-notice .c-notification-notice-with-icon .c-notification-notice-description { margin-top: 4px } .c-notification-notice .c-notification-notice-icon { position: absolute; left: 0; margin-left: 4px; font-size: 24px; line-height: 24px } .c-notification-notice .c-notification-notice-icon .icon-success { color: #52c41a } .c-notification-notice .c-notification-notice-icon .icon-info { color: #1890ff } .c-notification-notice .c-notification-notice-icon .icon-warning { color: #faad14 } .c-notification-notice .c-notification-notice-icon .icon-error { color: #ff4d4f } .c-notification-notice .c-notification-notice-message { color: rgba(0,0,0,.85); font-size: 16px; line-height: 24px; padding-right: 24px } .c-notification-notice .c-notification-notice-description { font-size: 14px; margin-top: 8px } .c-notification-notice .c-notification-notice-close { position: absolute; top: 20px; right: 24px; color: #000; outline: none; font-size: 16px; line-height: 1; cursor: pointer; opacity: .5; transition: opacity .3s } .c-notification-notice .c-notification-notice-close:hover { opacity: 1 } @-webkit-keyframes NotificationFadeIn { 0% { left:384px; opacity:0 } to { left: 0; opacity: 1 } } @keyframes NotificationFadeIn { 0% { left:384px; opacity:0 } to { left: 0; opacity: 1 } } .c-modal { position: relative; z-index: 1; background-color: #fff; margin: 0 auto; box-shadow: 0 2px 8px 0 rgba(0,0,0,.2); -webkit-animation: scaleIn .2s ease-in; animation: scaleIn .2s ease-in; border-radius: 5px; overflow: hidden } .c-modal-wrap { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 99; display: flex; flex-wrap: wrap; align-items: center; -webkit-animation: fadeIn .2s ease-in; animation: fadeIn .2s ease-in; transition: opacity .2s, visibility .2s } .c-modal-wrap.c-modal-wrap-hide { opacity: 0; visibility: hidden } .c-modal-mask { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 0; background-color: rgba(0,0,0,.45); cursor: pointer } .c-modal-content { max-width: 92vw; max-height: 84vh; overflow-y: auto } .c-modal-close { position: absolute; right: 20px; top: 20px; z-index: 2; font-size: 24px; line-height: 1; cursor: pointer; opacity: .5; transition: opacity .3s, transform .3s; color: #000 } .c-modal-content-img a { display: block } .c-modal-content-img img { max-width: 100% } .c-modal-content-video video { width: 800px; max-width: 100%; display: block } .c-modal-content-videojs { width: 800px; padding-bottom: 56.25%; max-width: 100% } .c-modal-content-videojs .video-js { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0 } .email-modal .c-modal-content { width: 94vw; max-width: 800px; background: url(../images/email-modal01.jpg) no-repeat 50%/cover; color: #fff; padding: 20px } .email-modal .main { border: 1px solid hsla(0,0%,100%,.3); padding: 6%; line-height: 1.4 } .email-modal .tit { font-size: 30px } .email-modal .title { font-size: 42px; font-weight: 700; margin-bottom: 36px } .email-modal .s_form { background: #fff; overflow: hidden; max-width: 520px } .email-modal .input { width: calc(100% - 80px); border: none; outline: none; line-height: 50px; padding: 0 16px; background: none; color: #000 } .email-modal .submit { outline: none; width: 80px; height: 36px; padding: none; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAABYCAYAAABxlTA0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFNDIyMzU5OTNFNTgxMUU5OTY3N0IzNTVEN0UzNEFCRCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFNDIyMzU5QTNFNTgxMUU5OTY3N0IzNTVEN0UzNEFCRCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU0MjIzNTk3M0U1ODExRTk5Njc3QjM1NUQ3RTM0QUJEIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU0MjIzNTk4M0U1ODExRTk5Njc3QjM1NUQ3RTM0QUJEIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Fi+pnAAABGhJREFUeNrsnc1P1EAYxmcL8rXALpqoePFiTEwQARWDJ2L4MPAnePUv8QgJnD3rSW8G1gUVOIm7y0f8SEi8edJ4kQuJGg2+w76bjKXbTred6Xw9yZPuR7fT/Gb6dp5uF3L7pPCEEPIC/Jw4xdbI8WHo+x74GvgZ+A141iFLVxTwU3x8D1wGr4InHZr0AFd9r82BN8EvwTMOUXLA78FBheQ+eA1Lx7xD1TrgI/B+yDq0dKyA18HTDll8wFS7HOtOI+QVhO4UA/DbGJ+Zx7KxhmXEiQPwHvhPzM/O4IlwE0+MTiGAv4A/t7iNSZzalV3paA6YaifhtmaxdFDYUw7tacDbKW2TlotX6DkHOL0R7NcUjmarIzgL+CP4h4A2rI7gLOBf4JrAtqyM4J7veUVCm1ZFcD/gHYltWxHB/YCrGeyD0RHcD/gb+ENG+2JkBPcCXqtlvE9GRfAgwFVF9s2ICB4EuKLYPmodwYMAH4C/KrivWkbwIMC/Sf3yparSKoJ7TV6vajA4tIjgzQBXiD5SOoI3A0y/BP2p2flEyQjeDPB38CdNZ0ZKRXAv5L0q0VtKRHCTASsRwcMA14hZyiSChwFWNXBoFcHDAB+D3xFzJSWCexHv14j5EhrBowBXiD0SEsGjAO9pGDiUiuBRgA9J+K2tppeOxBHc41hnh9itRBGcB/A2cWo5gvMA3nVsW4/guX1S4OmEx+BhcC+4D9wNzuPSdlHYyyPHh+VWAQeJQi6C+8EFXBYR+lnwAD4v4vN+pnN60V2Ggd4CLwLoUhqAW1UXA7kPwfs7ZQBdwHUaHcg+Vln0hLgAoDeyAJxEbdhB1J0IvNFJ/Uwn5JnHF9AXweewI9sk7S+9nv6oXaND8C+p/+TsiHmtE4GyR8V58CAuPQSaw2VRIuCTAZwF4DNMHW44z9TxQsAyz4zSXmaEdqheIloF3M3UyH7fso+poQUfqB7mMG6AzZl8kuMB3JimDSGQAnNo9nDOpa2dpvEAvgJ+6Ka7p0QvBi01SkEz8QC+6Vj+J3rdeBGXkeIBPOGYnoiO1CUcudziAXzLcrC0ti5jrY2tKMD07D9qKdgSloKtJBuJAjxm4DUDnlKwgPPZxIoCPG4R2NdYCkppbtQBrgNdRsCpKwrwHYPBrmEp2BDZSBhg+vfULhkIdgtPXiUZjbVbVB7WsRSUZTZqA+BVDAgbWTRuMuBYkVY2YHqxesimSCsb8KiGASNRpJUNWKfpWSqRVjbgcU1KQWqRVibgDrwGYVWklQmYBoxB2yKtTMCq1V8pkVYmYFXqr9RIKxPwbRsjrSzA9BajYRsjrSzAWYxeJSKtiYCVirSyAMuYQSgZaWUAprdDifyKXulIKwPwdVK/f9bKSCsDcNqjV6tIKwPwRIqlQLtIq8MI1jrSigZ8GXzV5kgrGvAYiX+3u1GRVjTgu7ZHWtGAeW6yNjrSigRMf2sxanukFQn4BqnfB2x1pBUJeNxFWrGAH7hIKxbwAYJ1//ZXgP4JMACi0gNuutVPOwAAAABJRU5ErkJggg==) no-repeat 50%; background-size: 22px; border: none; border-left: 1px solid #e3e3e3; cursor: pointer } .email-modal .agree { font-size: 12px; margin-top: 30px; padding: 0 0 0 36px; line-height: 16px; position: relative; cursor: pointer; text-align: justify } .email-modal .agree.active .iconfont { opacity: 1 } .email-modal .spot { width: 20px; height: 20px; border-radius: 50%; background-color: #fff; position: absolute; left: 0; top: 2px; z-index: 0 } .email-modal .iconfont { font-size: 16px; color: #1a8b8e; font-weight: 700; text-align: center; width: 20px; height: 20px; line-height: 20px; display: block; opacity: 0; transition: opacity .3s } .email-modal .box { max-width: 520px; padding-right: 160px; position: relative } .email-modal .btn { width: 120px; line-height: 40px; border: 1px solid #fff; text-align: center; position: absolute; right: 0; top: 4px; z-index: 0; cursor: pointer; transition: color .3s, background-color .3s } @media only screen and (min-width:961px) { .c-modal-close:hover { opacity: 1; transform: rotate(180deg) } .email-modal .btn:hover { background-color: #fff; color: #1a8b8e } } @media only screen and (max-width:640px) { .c-modal-content { max-width: 80vw; max-height: 72vh } .c-modal-close { padding: 4px; top: 16px; right: 16px } .email-modal .c-modal-content { padding: 14px } .email-modal .tit { font-size: 14px; margin-bottom: 4px } .email-modal .title { font-size: 20px; margin-bottom: 24px } .email-modal .input { width: calc(100% - 48px); line-height: 40px } .email-modal .submit { width: 48px; background-size: 16px; height: 32px } .email-modal .agree { margin-top: 12px; padding-left: 30px } .email-modal .spot { width: 16px; height: 16px; top: 6px } .email-modal .iconfont { width: 16px; height: 16px; line-height: 16px; font-size: 12px } .email-modal .box { padding-right: 0 } .email-modal .btn { width: 100px; line-height: 32px; font-size: 12px; position: relative; top: 0; margin: 16px 0 0 30px } } .mbnav-btn { width: 60px; height: 60px; position: absolute; right: 0; top: 0; cursor: pointer; overflow: hidden; transition: all .4s ease-out; display: none } .mbnav-btn-list { width: 30px; height: 18px; position: absolute; top: 21px; right: 15px } .mbnav-btn-item { position: absolute; right: 0; width: 100%; height: 2px; background-color: #666; border-radius: 1px; border-radius: 1.5px; transition: all .3s } .mbnav-btn-item:first-of-type { top: 0 } .mbnav-btn-item:nth-of-type(2) { top: 8px } .mbnav-btn-item:nth-of-type(3) { width: 50%; top: 16px } .mbnav { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 10; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; overflow: hidden } .mbnav ::-webkit-scrollbar { width:0; height:0; background-color:hsla(0,0%,100%,0) } .mbnav .data { display: none } .mbnav .bg { left: 0; bottom: 0; z-index: 0 } .mbnav .bg, .mbnav .main { position: absolute; top: 0; right: 0 } .mbnav .main { z-index: 1; width: 240px; height: 100%; background-color: #fff; box-shadow: 0 0 8px 0 rgba(0,0,0,.1); overflow: hidden; transform: translateX(100%); transition: transform .3s } .mbnav .header { background-color: #1a8b8e } .mbnav .search { display: flex; flex-wrap: wrap; align-items: center; padding: 0 20px; height: 60px; line-height: 60px; border-bottom: none; background: #1a8b8e } .mbnav .search .submit { background: none; padding: 0; width: 22px; background-size: 20px; font-size: 22px } .mbnav .search .input, .mbnav .search .submit { border: none; outline: none; height: 60px; color: #fff } .mbnav .search .input { width: calc(100% - 22px); line-height: 1.5; padding: 0 0 0 12px; font-size: 16px; background: none } .mbnav .search ::-moz-placeholder { color:#fff } .mbnav .search ::-webkit-input-placeholder { color:#fff } .mbnav .search :-ms-input-placeholder { color:#fff } .mbnav .item { display: block; height: 60px; line-height: 60px; padding: 0 20px; font-size: 14px; border-bottom: 1px solid #f2f2f2; color: #777; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative } .mbnav .item.sub { padding-right: 40px } .mbnav .item.sub:after { position: absolute; right: 16px; top: 50%; margin-top: -7px; content: "\E6A4"; font-family: iconfont!important; font-size: 14px; line-height: 1; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } .mbnav .slist { position: fixed; top: 0; right: 0; z-index: 1; width: 240px; height: 100%; transform: translateX(100%) } .mbnav .sitem { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #fff; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s, transform .3s } .mbnav .sitem.active { transform: translateX(-100%); opacity: 1; visibility: visible } .mbnav .tit { font-size: 16px; line-height: 60px; padding-right: 20px; padding-left: 40px; text-align: right; background-size: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background-color: #f2f2f2; position: relative } .mbnav .tit:before { position: absolute; left: 16px; top: 50%; margin-top: -7px; content: "\E6DB"; font-family: iconfont!important; font-size: 14px; line-height: 1; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } @-webkit-keyframes phone-navtop-animon { 0% { top:0; transform:rotate(0) } 50% { top:8px; transform:rotate(0) } to { top: 8px; transform: rotate(45deg) } } @keyframes phone-navtop-animon { 0% { top:0; transform:rotate(0) } 50% { top:8px; transform:rotate(0) } to { top: 8px; transform: rotate(45deg) } } @-webkit-keyframes phone-navbottom-animon { 0% { width:50%; top:16px; transform:rotate(0) } 50% { width:100%; top:8px; transform:rotate(0) } to { width: 100%; top: 8px; transform: rotate(-45deg) } } @keyframes phone-navbottom-animon { 0% { width:50%; top:16px; transform:rotate(0) } 50% { width:100%; top:8px; transform:rotate(0) } to { width: 100%; top: 8px; transform: rotate(-45deg) } } @-webkit-keyframes phone-navtop-animoff { 0% { top:8px; transform:rotate(45deg) } 50% { top:8px; transform:rotate(0) } to { top: 0; transform: rotate(0) } } @keyframes phone-navtop-animoff { 0% { top:8px; transform:rotate(45deg) } 50% { top:8px; transform:rotate(0) } to { top: 0; transform: rotate(0) } } @-webkit-keyframes phone-navbottom-animoff { 0% { width:100%; top:8px; transform:rotate(-45deg) } 50% { width:100%; top:8px; transform:rotate(0) } to { width: 50%; top: 16px; transform: rotate(0) } } @keyframes phone-navbottom-animoff { 0% { width:100%; top:8px; transform:rotate(-45deg) } 50% { width:100%; top:8px; transform:rotate(0) } to { width: 50%; top: 16px; transform: rotate(0) } } @media only screen and (max-width:960px) { .mbnav-btn { display: block } body.mbNavOpen .mbnav-btn-item:first-of-type { -webkit-animation: phone-navtop-animon .4s linear forwards; animation: phone-navtop-animon .4s linear forwards } body.mbNavOpen .mbnav-btn-item:nth-of-type(2) { opacity: 0 } body.mbNavOpen .mbnav-btn-item:nth-of-type(3) { -webkit-animation: phone-navbottom-animon .4s linear forwards; animation: phone-navbottom-animon .4s linear forwards } body.mbNavOpen .mbnav { opacity: 1; visibility: visible } body.mbNavOpen .mbnav .main { transform: translateX(0) } body.mbNavOpen .page-header { transform: translateX(-240px) } body.mbNavOff .mbnav-btn-item:first-of-type { -webkit-animation: phone-navtop-animoff .4s linear forwards; animation: phone-navtop-animoff .4s linear forwards } body.mbNavOff .mbnav-btn-item:nth-of-type(2) { opacity: 1; transition: opacity .2s linear .2s } body.mbNavOff .mbnav-btn-item:nth-of-type(3) { -webkit-animation: phone-navbottom-animoff .4s linear forwards; animation: phone-navbottom-animoff .4s linear forwards } body.mbNavOff .mbnav { opacity: 0; visibility: hidden } body.mbNavOff .mbnav .main { transform: translateX(100%) } } .c-pagination { display: flex; flex-wrap: wrap; align-items: flex-start; margin-top: 60px; justify-content: flex-start; font-weight: 400 } .c-pagination.center { justify-content: center } .c-pagination.type-a .c-pagination-item { background: none; color: #fff } .c-pagination.type-a .c-pagination-item.active { background-color: #1a8b8e } .c-pagination-item { display: block; font-size: 14px; line-height: 28px; background: #fff; border: 1px solid #ddd; padding: 0 10px; margin-right: 8px; margin-top: 8px; color: #999; transition: all .3s ease-out } .c-pagination-item.disabled { cursor: not-allowed; color: #999; opacity: .4 } .c-pagination-item:last-of-type { margin-left: 0 } .c-pagination-item.active { color: #fff; background-color: #1a8b8e; border-color: #1a8b8e } @media only screen and (min-width:641px) { .c-pagination-item:not(.disabled):hover { color: #fff; background-color: #1a8b8e; border-color: #1a8b8e } } @media only screen and (max-width:1440px) { .c-pagination { margin-top: 48px } } @media only screen and (max-width:960px) { .c-pagination { margin-top: 40px } } @media only screen and (max-width:640px) { .c-pagination { margin-top: 30px } } .c-dropdown { position: absolute; z-index: 0; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; padding: 10px } .c-dropdown:after, .c-dropdown:before { content: ""; position: absolute; z-index: 1; width: 0; height: 0 } .c-dropdown-wrap { position: relative; z-index: 1 } .c-dropdown-wrap:hover .c-dropdown { opacity: 1; visibility: visible } .c-dropdown-main { border: 1px solid #e6e6e6; z-index: 0 } .c-dropdown-main, .c-dropdown-menu { background-color: #fff; position: relative } .c-dropdown-menu { padding: 6px 0; text-align: left; outline: none; min-width: 120px } .c-dropdown-menu-item { padding: 6px 12px; display: block; color: rgba(0,0,0,.65); background-color: #fff; font-size: 14px; transition: background-color .3s } .c-dropdown-menu-item:hover { background-color: #f5f5f5 } .c-dropdown-placement-bottomCenter { bottom: 0; left: 50%; transform: translate(-50%, 100%) } .c-dropdown-placement-bottomCenter:after, .c-dropdown-placement-bottomCenter:before { top: 2px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 8px solid #e6e6e6 } .c-dropdown-placement-bottomCenter:after { top: 4px; border-bottom: 7px solid #fff } .c-dropdown-placement-bottomCenter:after, .c-dropdown-placement-bottomCenter:before { left: 50%; margin-left: -6px } .c-dropdown-placement-bottomLeft { bottom: 0; left: -10px; transform: translateY(100%) } .c-dropdown-placement-bottomLeft:after, .c-dropdown-placement-bottomLeft:before { top: 2px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 8px solid #e6e6e6 } .c-dropdown-placement-bottomLeft:after { top: 4px; border-bottom: 7px solid #fff } .c-dropdown-placement-bottomLeft:after, .c-dropdown-placement-bottomLeft:before { left: 24px } .c-dropdown-placement-bottomRight { bottom: 0; right: -10px; transform: translateY(100%) } .c-dropdown-placement-bottomRight:after, .c-dropdown-placement-bottomRight:before { top: 2px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 8px solid #e6e6e6 } .c-dropdown-placement-bottomRight:after { top: 4px; border-bottom: 7px solid #fff } .c-dropdown-placement-bottomRight:after, .c-dropdown-placement-bottomRight:before { right: 24px } .c-dropdown-placement-topCenter { top: 0; left: 50%; transform: translate(-50%, -100%) } .c-dropdown-placement-topCenter:after, .c-dropdown-placement-topCenter:before { bottom: 2px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid #e6e6e6 } .c-dropdown-placement-topCenter:after { bottom: 4px; border-top: 7px solid #fff } .c-dropdown-placement-topCenter:after, .c-dropdown-placement-topCenter:before { left: 50%; margin-left: -6px } .c-dropdown-placement-topLeft { top: 0; left: -10px; transform: translateY(-100%) } .c-dropdown-placement-topLeft:after, .c-dropdown-placement-topLeft:before { bottom: 2px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid #e6e6e6 } .c-dropdown-placement-topLeft:after { bottom: 4px; border-top: 7px solid #fff } .c-dropdown-placement-topLeft:after, .c-dropdown-placement-topLeft:before { left: 24px } .c-dropdown-placement-topRight { top: 0; right: -10px; transform: translateY(-100%) } .c-dropdown-placement-topRight:after, .c-dropdown-placement-topRight:before { bottom: 2px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid #e6e6e6 } .c-dropdown-placement-topRight:after { bottom: 4px; border-top: 7px solid #fff } .c-dropdown-placement-topRight:after, .c-dropdown-placement-topRight:before { right: 24px } .c-dropdown-placement-leftCenter { left: 0; padding: 20px; top: 50%; transform: translate(-100%, -50%) } .c-dropdown-placement-leftCenter:after, .c-dropdown-placement-leftCenter:before { right: 12px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 8px solid #e6e6e6 } .c-dropdown-placement-leftCenter:after { right: 14px; border-left: 7px solid #fff } .c-dropdown-placement-leftCenter:after, .c-dropdown-placement-leftCenter:before { top: 50%; margin-top: -6px } .c-dropdown-placement-leftTop { left: 0; padding: 20px; top: -20px; transform: translateX(-100%) } .c-dropdown-placement-leftTop:after, .c-dropdown-placement-leftTop:before { right: 12px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 8px solid #e6e6e6 } .c-dropdown-placement-leftTop:after { right: 14px; border-left: 7px solid #fff } .c-dropdown-placement-leftTop:after, .c-dropdown-placement-leftTop:before { top: 40px } .c-dropdown-placement-leftBottom { left: 0; padding: 20px; bottom: -20px; transform: translateX(-100%) } .c-dropdown-placement-leftBottom:after, .c-dropdown-placement-leftBottom:before { right: 12px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 8px solid #e6e6e6 } .c-dropdown-placement-leftBottom:after { right: 14px; border-left: 7px solid #fff } .c-dropdown-placement-leftBottom:after, .c-dropdown-placement-leftBottom:before { bottom: 40px } @media only screen and (max-width:960px) { .c-dropdown-wrap .c-dropdown { opacity: 1; visibility: visible; display: none } .c-dropdown-wrap.mOn .c-dropdown { display: block; -webkit-animation: fadeIn .2s cubic-bezier(.645, .045, .355, 1); animation: fadeIn .2s cubic-bezier(.645, .045, .355, 1) } } .swiper-container { opacity: 0; transition: opacity .4s ease } .swiper-container.isready { opacity: 1 } .swiper-slide { box-sizing: border-box; overflow: hidden } .swiper-button-next, .swiper-button-prev { outline: none } .swiper-pagination.typea { bottom: 5%; display: flex; flex-wrap: wrap; justify-content: center; margin-top: 28px } .swiper-pagination.typea .swiper-pagination-bullet { width: 12px; height: 12px; border: 1px solid transparent; background-color: #fff; opacity: 1; position: relative; transition: all .3s; box-shadow: 0 0 4px 0 rgba(0,0,0,.3) } .swiper-pagination.typea .swiper-pagination-bullet:after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 4px; height: 4px; background-color: #fff; border-radius: 50%; overflow: hidden; opacity: 0; transition: opacity .3s } .swiper-pagination.typea .swiper-pagination-bullet-active { border-color: #fff; background-color: transparent; opacity: 1 } .swiper-pagination.typea .swiper-pagination-bullet-active:after { opacity: 1 } .swiper-pagination.typea.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 5px } .swiper-pagination.typeb { position: relative; bottom: 0; display: flex; flex-wrap: wrap; justify-content: center; margin-top: 28px } .swiper-pagination.typeb .swiper-pagination-bullet { width: 12px; height: 12px; border: 1px solid transparent; opacity: 1; background-color: #000; opacity: .2; position: relative; transition: all .3s; outline: none } .swiper-pagination.typeb .swiper-pagination-bullet:after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 4px; height: 4px; background-color: #1a8b8e; border-radius: 50%; overflow: hidden; opacity: 0; transition: opacity .3s } .swiper-pagination.typeb .swiper-pagination-bullet-active { border-color: #1a8b8e; background-color: transparent; opacity: 1 } .swiper-pagination.typeb .swiper-pagination-bullet-active:after { opacity: 1 } .swiper-pagination.typeb.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 5px } @media only screen and (min-width:961px) { .swiper-pagination.typea .swiper-pagination-bullet:hover { border-color: #fff; background-color: transparent; opacity: 1 } .swiper-pagination.typea .swiper-pagination-bullet:hover:after { opacity: 1 } } .editor-detail { color: rgba(0,0,0,.65); font-size: 15px; line-height: 1.8; text-align: justify; text-justify: inter-ideograph } .editor-detail h4 { font-size: 20px; font-weight: 700; color: #333; margin-bottom: 4px } .editor-detail p { padding: 1px 0 } .editor-detail ul { list-style: none; -webkit-padding-start: 0; padding-inline-start: 0; margin-bottom: 0 } .editor-detail ul li:before { box-sizing: border-box; content: "\2022"; display: inline-block; font-size: 17px; margin-left: -24px; padding-right: 11px; text-align: right; font-weight: 700; width: 24px } .editor-detail ul p { margin: 0 } .editor-detail ol { list-style: decimal } .editor-detail li { margin-left: 24px; padding-top: 2px } .editor-detail a { text-decoration: underline } .editor-detail blockquote { background-color: #f2f5fb; padding: 5px 20px; margin-left: 0; margin-right: 0; color: #243342; border-left: 5px solid #d0d6dc } .editor-detail img { max-width: 100% } .editor-detail.img-center img { display: block; margin: 0 auto } .editor-detail.img-mg img { display: block; margin: 15px auto } .editor-detail.word-type p { margin: 20px 0 } .editor-detail.word-type p img { display: block; margin: 0 auto } .editor-detail.word-type p:first-of-type { margin-top: 0 } .editor-detail.no-spacing p { margin: 0 } .article-page01 { background-color: #f9f9f9; padding: 50px 0 100px } .article-page01 .wrap { max-width: 1200px } .article-page01 .title { font-weight: 700; color: #000; margin-bottom: 40px; text-align: center } .article-page01 .content h5 { font-weight: 700 } @media only screen and (max-width:1440px) { .editor-detail { font-size: 14px } .editor-detail h4 { font-size: 18px; margin-bottom: 2px } } @media only screen and (max-width:960px) { .article-page01 { padding: 0 } .article-page01 .wrap { width: 100%; padding: 40px 3% } .article-page01 .title { margin-bottom: 24px } } @media only screen and (max-width:640px) { .editor-detail { font-size: 14px } .editor-detail.img-mg img { margin: 10px auto } .editor-detail.word-type p { margin: 10px 0 } } body { opacity: 0; transition: opacity .3s } body.isReady { opacity: 1 } .page-main { overflow: hidden } .page-pd { padding: 100px 0 } .page-pd-m { padding: 80px 0 } .c-imghover { overflow: hidden } .c-imghover .c-imghover-item { transition: transform .4s ease-out } .page-dw { position: absolute; left: 0; top: -100px; z-index: -1 } .inside-banner { position: relative } .inside-banner .img { width: 100% } .inside-banner .wrap { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 0; display: flex; align-items: center; background-color: rgba(0,0,0,.2); color: #fff; text-shadow: 0 0 2px rgba(0,0,0,.2) } .inside-banner .main.center { text-align: center } .inside-banner .main .content { margin: 0 auto } .inside-banner .title { font-size: 64px; line-height: 1.2; font-weight: 700; margin-bottom: 14px } .inside-banner .content { font-size: 20px; max-width: 550px; color: #e2e2e2 } .inside-titlea { max-width: 640px; margin: 0 auto 60px; text-align: center } .inside-titlea-title { font-size: 32px; font-weight: 700; color: #333; line-height: 1.2 } .inside-titlea-content { font-size: 16px; margin-top: 20px; line-height: 1.7; color: rgba(0,0,0,.35) } .inside-nav { justify-content: center; align-items: stretch; box-shadow: 0 0 20px 0 rgba(0,0,0,.1) } .inside-nav.typea .item { width: 15%; font-size: 16px } .inside-nav .icon { width: 50px; position: relative; margin: 0 auto 6px } .inside-nav .img1 { width: 100% } .inside-nav .img2 { width: 100%; position: absolute; left: 0; top: 0; opacity: 0 } .inside-nav .item { width: 30%; text-align: center; padding: 24px; transition: background-color .3s, color .3s } .inside-nav .item.active { background-color: #1a8b8e; color: #fff } .inside-nav .item.active .img1 { opacity: 0 } .inside-nav .item.active .img2 { opacity: 1 } @media only screen and (min-width:961px) { .c-imghover:hover .c-imghover-item { transition: transform 1.2s ease-out; transform: scale(1.1) } .inside-nav .item:hover { background-color: #1a8b8e; color: #fff } .inside-nav .item:hover .img1 { opacity: 0 } .inside-nav .item:hover .img2 { opacity: 1 } } @media only screen and (max-width:1440px) { .page-pd { padding: 80px 0 } .page-pd-m { padding: 60px 0 } .page-dw { top: -80px } .inside-banner .title { font-size: 44px; margin-bottom: 10px } .inside-banner .content { font-size: 15px; max-width: 460px } .inside-titlea { max-width: 560px; margin-bottom: 40px } .inside-titlea-title { font-size: 28px } .inside-titlea-content { font-size: 14px; margin-top: 16px } .inside-nav.typea .item { font-size: 14px } .inside-nav .icon { width: 40px } .inside-nav .item { padding: 16px } } @media only screen and (max-width:1200px) { .page-pd { padding: 60px 0 } .page-pd-m { padding: 50px 0 } } @media only screen and (max-width:960px) { .page-main { padding-top: 60px } .page-pd { padding: 48px 0 } .page-pd-m { padding: 40px 0 } .page-dw { top: -60px } .inside-banner .img { width: 960px; position: relative; left: 50%; margin-left: -480px } .inside-banner .title { font-size: 32px; margin-bottom: 10px } .inside-banner .content { font-size: 14px; max-width: 420px } .inside-titlea { max-width: 520px; margin-bottom: 32px } .inside-titlea-title { font-size: 24px } .inside-titlea-content { font-size: 13px; margin-top: 12px } .inside-nav .icon { width: 32px } .inside-nav .item { padding: 12px; font-size: 12px } .inside-nav.typea .item { font-size: 12px; padding: 12px 6px } } @media only screen and (max-width:640px) { .page-pd { padding: 40px 0 } .page-pd-m { padding: 32px 0 } .inside-banner .img { width: 640px; margin-left: -320px } .inside-banner .title { font-size: 24px; margin-bottom: 0; text-align: center } .inside-banner .content { display: none } .inside-titlea { margin-bottom: 24px } .inside-titlea-title { font-size: 20px } .inside-titlea-content { font-size: 12px; margin-top: 8px } .inside-nav .icon { width: 28px } .inside-nav .item { width: 50%; padding: 10px } .inside-nav.typea { padding: 20px 3% 0; justify-content: flex-start } .inside-nav.typea .item { width: auto; padding: 0; line-height: 1.8; font-size: 13px; margin-right: 28px; margin-bottom: 14px; position: relative } .inside-nav.typea .item:after { content: ""; position: absolute; left: 0; bottom: 0; z-index: 0; background-color: #1a8b8e; width: 100%; height: 1px; display: none } .inside-nav.typea .item.active { /*background: none;*/ color: #1a8b8e } .inside-nav.typea .item.active:after { display: block } } .page-header { width: 100%; position: fixed; left: 0; top: 0; z-index: 999999999; background-color: #fff; box-shadow: 0 2px 4px 0 rgba(0,0,0,.05); transition: transform .3s, background-color .3s ease-in, opacity .3s .3s; } .page-header .wrap { width: 94%; margin: 0 auto; position: relative } .page-header:after { content: ""; position: absolute; left: 0; bottom: 0; z-index: 0; width: 100%; height: 1px; background-color: #000; opacity: .1; transition: opacity .3s, background-color .3s } .page-header .other { margin-left: auto; transition: opacity .3s, visibility .3s } .page-header .search { font-size: 16px } .page-header .hr { width: 1px; height: 14px; background-color: #ccc; margin: 0 16px } .page-header .language { font-size: 15px; transition: color .3s } .page-header .language .title { cursor: pointer; padding: 8px 0; transition: color .3s } .page-header .language .title>span { margin-right: 8px } .page-header .language .c-dropdown-menu { min-width: 90px; text-align: center } .page-header .language .icon { display: none } .page-header .friendship { font-size: 20px; margin-left: 30px } .page-header .friendship .item { margin-right: 12px } .page-header .friendship .item:last-of-type { margin-right: 0 } .page-header .friendship .iconfont { display: block } .page-header-zw { height: 100px; display: none } .page-header-zw.show, .page-logo { display: block } .page-logo { position: relative } .page-logo .img, .page-logo .img-w { height: 80px; transition: opacity .3s } .page-logo .img-w { position: absolute; left: 0; top: 0; z-index: 0; opacity: 0 } .page-nav { margin-left: auto; position: relative; z-index: 1; transition: opacity .3s, visibility .3s } .page-nav .item { position: relative; padding: 0 20px; margin-right: 30px } .page-nav .item:last-of-type { margin-right: 0 } .page-nav .item.on .link { color: #1a8b8e } .page-nav .item.on .link:after { transform: scaleX(1); opacity: 1 } .page-nav .link { height: 100px; display: flex; flex-wrap: wrap; align-items: center; text-align: center; position: relative; font-size: 15px; font-weight: 500; text-transform: uppercase } .page-nav .link:after { content: ""; position: absolute; left: 0; bottom: 0; background-color: #1a8b8e; width: 100%; height: 2px; transform: scaleX(0); opacity: 0; transition: opacity .3s, transform .3s } .page-subnav { position: absolute; left: 50%; top: 100px; margin-left: -80px; width: 160px; box-shadow: 0 2px 8px 0 rgba(0,0,0,.1); opacity: 0; visibility: hidden; transform: scaleY(0); transform-origin: center top; transition: transform .4s, opacity .4s, visibility .4s } .page-subnav .slink { display: block; font-size: 14px; padding: 10px 16px; color: #666; background: #fff; position: relative; transition: background-color .4s, color .4s; text-align: center } .page-subnav .slink:before { content: ""; display: block; height: 1px; background: #f6f6f6; position: absolute; top: 0; left: 10%; width: 80% } .page-subnav .slink:first-of-type:before { opacity: 0 } .page-subnav .slink:hover { background: #f6f6f6; color: #1a8b8e } @media only screen and (min-width:961px) { .page-header.typea:not(.typeanot) { background-color: transparent; box-shadow: none } .page-header.typea:not(.typeanot):after { background-color: #fff; opacity: .15 } .page-header.typea:not(.typeanot) .page-logo .img { opacity: 0 } .page-header.typea:not(.typeanot) .page-logo .img-w { opacity: 1 } .page-header.typea:not(.typeanot) .language .title, .page-header.typea:not(.typeanot) .page-nav .link, .page-header.typea:not(.typeanot) .search { color: #fff } .page-header.typea:not(.typeanot) .hr { background-color: #fff } .page-header.typea:not(.typeanot) .friendship .item { color: #fff } .page-header.typea:not(.typeanot):hover { background-color: #fff } .page-header.typea:not(.typeanot):hover:after { background-color: #000; opacity: .07 } .page-header.typea:not(.typeanot):hover .page-logo .img { opacity: 1 } .page-header.typea:not(.typeanot):hover .page-logo .img-w { opacity: 0 } .page-header.typea:not(.typeanot):hover .page-nav .link { color: rgba(0,0,0,.6) } .page-header.typea:not(.typeanot):hover .page-nav .item.on .link, .page-header.typea:not(.typeanot):hover .page-nav .item:hover .link { color: #1a8b8e } .page-header.typea:not(.typeanot):hover .language .title, .page-header.typea:not(.typeanot):hover .search { color: rgba(0,0,0,.6) } .page-header.typea:not(.typeanot):hover .hr { background-color: #ccc } .page-header.typea:not(.typeanot):hover .friendship .item { color: rgba(0,0,0,.6) } .page-nav .item:hover .link { color: #1a8b8e } .page-nav .item:hover .link:after { transform: scaleX(1); opacity: 1 } .page-nav .item:hover .page-subnav { transform: scaleY(1); opacity: 1; visibility: visible } } @media only screen and (max-width:1440px) { .page-header .language .title { padding: 6px 0; font-size: 12px } .page-header .language .title .icon { font-size: 18px } .page-header .language .title>span { margin-right: 6px } .page-header .friendship { font-size: 16px; margin-left: 20px } .page-header .friendship .item { margin-right: 8px } .page-header .search { font-size: 15px } .page-logo .img, .page-logo .img-w { height: 60px } .page-nav .item { padding: 0 12px; margin-right: 12px } .page-nav .link { font-size: 14px; height: 80px } .page-header-zw { height: 80px } .page-subnav { top: 80px } } @media only screen and (max-width:1200px) { .page-subnav.typea.product .main { padding-left: 0 } .page-subnav.typea .picture { display: none } .page-subnav.typea .main { width: 100%; padding-left: 0 } .page-nav .item { padding: 0 6px } .page-nav .link { font-size: 12px; font-weight: 400 } } @media only screen and (max-width:960px) { .page-logo .img, .page-logo .img-w { height: 50px; margin-top:5px; } .page-nav { display: none } .page-header { height: 60px } .page-header .wrap { width: 100%; padding-left: 3% } .page-header .other { margin-left: auto; margin-right: 60px } .page-header .language { margin-right: 0 } .page-header .language .title { width: 60px; line-height: 60px; height: 60px; border-right: 1px solid #eee; text-align: center; font-size: 17px; padding: 0 } .page-header .language .title .iconfont, .page-header .language .title>span { display: none } .page-header .language .title .icon { display: block; margin: 0 auto; font-size: 26px } .page-header .friendship, .page-header .hr, .page-header .search { display: none } .page-header-zw { display: none!important } } /*.page-footer { background: #333; color: hsla(0,0%,100%,.75); padding-top: 70px } .page-footer .wrap { align-items: flex-start; padding-bottom: 24px } .page-footer .nav { width: 72%; align-items: flex-start } .page-footer .nav .title { font-size: 18px; letter-spacing: .3px; margin-bottom: 14px; text-transform: uppercase; font-weight: 700 } .page-footer .nav .title>a { color: #fff } .page-footer .nav .text { margin-bottom: 8px } .page-footer .nav .text>a { color: #ccc } .page-footer .nav .text>a:hover { color: #fff } .page-footer .nav .item { width: 16.66%; padding-right: 2% } .page-footer .other { width: 28%; max-width: 250px; margin-left: auto } .page-footer .other .logo { height: 28px; margin-bottom: 20px; display: block } .page-footer .other .text { margin-bottom: 60px } .page-footer .other .title { font-size: 20px; color: #fff; margin-bottom: 12px } .page-footer .statement { font-size: 12px } .page-footer .statement>a { color: #ccc; padding-right: 14px; margin-right: 10px; position: relative } .page-footer .statement>a:hover { color: #fff } .page-footer .statement>a:after { content: ""; position: absolute; right: 0; top: 50%; width: 4px; height: 4px; border-radius: 50%; background-color: #fff; margin-top: -2px } .page-footer .statement>a:last-of-type { margin-right: 0; padding-right: 0 } .page-footer .statement>a:last-of-type:after { display: none } .page-footer .copyright { font-size: 12px; padding: 12px 0 40px } .page-footer .friendship .item { font-size: 24px; color: #fff; opacity: .72; line-height: 1; transition: opacity .3s; margin-right: 12px } .page-footer .friendship .item:hover { opacity: 1 } .page-footer .friendship .iconfont { display: block } @media only screen and (max-width:1440px) { .page-footer { padding-top: 60px } .page-footer .nav { width: 70% } .page-footer .nav .title { font-size: 16px } .page-footer .nav .text { font-size: 13px; margin-bottom: 6px } .page-footer .other { width: 30% } .page-footer .other .title { font-size: 16px } .page-footer .other .text { font-size: 13px; margin-bottom: 40px } .page-footer .copyright { padding: 10px 0 28px } } @media only screen and (max-width:960px) { .page-footer { padding: 24px 0 } .page-footer .wrap { display: none } .page-footer .copyright { padding: 6px 0 0 } .page-footer .statement { justify-content: center } .page-footer .copyright { text-align: center } }*/ .index-banner { width: 100%; height: 100vh; overflow: hidden } .index-banner .swiper-slide { background-position: 50%; background-repeat: no-repeat; background-size: cover } .index-banner .swiper-slide:after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: 0; z-index: 0; background-color: #000; opacity: .15 } .index-banner .swiper-slide.swiper-slide-active .text, .index-banner .swiper-slide.swiper-slide-active .tit { opacity: 1; transform: translateX(0) } .index-banner .swiper-pagination { display: none } .index-banner .swiper-pagination.typea { margin-top: 0; bottom: 16px } .index-banner .img-m { display: none; width: 100% } .index-banner .main { color: #fff; position: absolute; left: 0; top: 50%; z-index: 1; width: 100%; transform: translateY(-50%); padding: 0 3%; text-align: center; font-family: OpenSans, Arial, Helvetica, sans-serif } .index-banner .text, .index-banner .tit { opacity: 0; transform: translateX(100px); transition: transform 1s, opacity 1s } .index-banner .tit { font-size: 66px; line-height: 84px; font-weight: 700 } .index-banner .text { font-size: 22px; line-height: 28px; color: #e0e0e0; margin-top: 8px; transition-delay: .2s } .index-banner-bottom { position: absolute; left: 50%; bottom: 60px; z-index: 1; font-size: 12px; color: #fff; transform: translateX(-50%) } .index-banner-bottom:after { content: ""; width: 1px; height: 50px; background-color: #fff; position: absolute; left: 50%; bottom: -60px; -webkit-animation: index-banner-bottom 2s linear infinite; animation: index-banner-bottom 2s linear infinite; transform-origin: center top; transform: scaleY(0) } .c-btna-next, .c-btna-prev { width: 50px; height: 50px; border-radius: 50%; border: 1px solid #fff; position: absolute; top: 50%; z-index: 2; margin-top: -25px; outline: none; display: flex; align-items: center; justify-content: center; cursor: pointer } .c-btna-prev { left: 3% } .c-btna-next { right: 3%; transform: rotate(180deg) } .c-btna-arrow { height: 11px; background: url(../images/icon-arrow-w.png) no-repeat 0/6px 11px; position: relative } .c-btna-arrow:after { content: ""; display: block; position: relative; left: 0; top: 5px; width: 6px; height: 1px; background-color: #fff; opacity: 0; transition: opacity .3s, width .3s } } @media only screen and (max-width:1440px) { .index-banner .tit { font-size: 54px; line-height: 64px } .index-banner .text { font-size: 18px; line-height: 26px } .index-banner-bottom { bottom: 40px } .index-banner-bottom:after { height: 32px; bottom: -40px } } @media only screen and (max-width:960px) { .index-banner { height: auto } .index-banner .swiper-slide { background: none } .index-banner .swiper-pagination { display: block } .index-banner .swiper-pagination.typea { bottom: 5% } .index-banner .img-m { display: block } .index-banner .c-btna-next, .index-banner .c-btna-prev { display: none } .index-banner .tit { font-size: 36px; line-height: 46px; opacity: 1; transform: translateX(0) } .index-banner .text { font-size: 14px; line-height: 22px; opacity: 1; transform: translateX(0) } .index-banner-bottom { display: none } .index-media .bg, .index-media .box, .index-media .btn-next { display: none } .c-btnc-next, .c-btnc-prev { width: 48px; height: 48px } .c-btnc-arrow { background-size: auto 12px } } @media only screen and (max-width:640px) { .index-banner .tit { font-size: 24px; line-height: 30px } .index-banner .text { font-size: 12px; line-height: 18px; margin-top: 2px } .index-page01 .main { padding: 48px 3% } .index-page01 .index-title-text { line-height: 22px; font-size: 14px; margin-bottom: 30px } .index-title-tit { font-size: 24px; margin-bottom: 6px } .index-project .swiper-slide { width: 200px; transform: scale(1) } .index-project .title { font-size: 16px; padding: 8px 0 0 } .index-page03 .media { margin-bottom: 24px } .index-media .play { width: 48px; height: 48px; margin: -24px 0 0 -24px } .c-btnc-next, .c-btnc-prev { width: 40px; height: 40px } .c-btnc-arrow { background-size: auto 10px } } @-webkit-keyframes banner-btn-anim { 0% { opacity:0; transform:scale(.5) } 20% { opacity:.6 } 50% { opacity:.6 } to { opacity: 0; transform: scale(1) } } @keyframes banner-btn-anim { 0% { opacity:0; transform:scale(.5) } 20% { opacity:.6 } 50% { opacity:.6 } to { opacity: 0; transform: scale(1) } } .clr{ clear:both} .spacer{ height:0px;} @media (max-width: 639px) {.pcbox{ display:none}} @media (min-width: 640px) and (max-width:1920px ) {.mbbox{ display:none}} .index-pro-swiper .swiper-slide { width: 1065px; position: relative; padding-bottom:.45rem } @media (max-width: 1366px) { .index-pro-swiper .swiper-slide { width: 925px } } @media (max-width: 1024px) { .index-pro-swiper .swiper-slide { width: 725px } } @media screen and (max-width: 900px) { .index-pro-swiper .swiper-slide { width: 2.95rem } } .index-pro-swiper .swiper-slide-active .shadow { display: block } .index-pro-swiper .swiper-slide-active .img:after { display: none } .index-pro-swiper .swiper-slide-active .info { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex } .index-pro-swiper .img { width: 100%; padding-bottom: 52.20657%; background-position: center center; background-repeat: no-repeat; background-size: cover; position: relative; z-index: 2; display: block } .index-pro-swiper .img:after { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0,0,0,0.5); content: '' } .index-pro-swiper .img:hover .more { color: #ccc } @media screen and (max-width: 900px) { .index-pro-swiper .img { padding-bottom: 105.35714% } } .index-pro-swiper .shadow { position: absolute; bottom: 26px; left: 0; width: 100%; z-index: 1; display: none } .index-pro-swiper .shadow img { width: 100%; display: block } @media screen and (max-width: 900px) { .index-pro-swiper .shadow { bottom:.275rem } } .index-pro-swiper .index-pro-prev, .index-pro-swiper .index-pro-next { position: absolute; width:.25rem; height:.25rem; border-radius: 100%; background-color: rgba(0,0,0,0.5); top: 250px; left: 50%; z-index: 5; color: #fff; text-align: center; line-height:.25rem; cursor: pointer; -webkit-transition: all .2s ease; -o-transition: all .2s ease; -moz-transition: all .2s ease; transition: all .2s ease; outline: none; font-size:.12rem; } .index-pro-swiper .index-pro-prev:hover, .index-pro-swiper .index-pro-next:hover { background-color: #000; } @media (max-width: 1366px) { .index-pro-swiper .index-pro-prev, .index-pro-swiper .index-pro-next { top: 220px } } @media (max-width: 1024px) { .index-pro-swiper .index-pro-prev, .index-pro-swiper .index-pro-next { top: 170px } } @media (max-width: 900px) { .index-pro-swiper .index-pro-prev, .index-pro-swiper .index-pro-next { top: 50% } } .index-pro-swiper .index-pro-prev { margin-left: -556px } @media (max-width: 1366px) { .index-pro-swiper .index-pro-prev { margin-left: -486px } } @media (max-width: 900px) { .index-pro-swiper .index-pro-prev { margin-left: 0; left:.23rem; -webkit-transform: translateY(-120%); -moz-transform: translateY(-120%); -ms-transform: translateY(-120%); transform: translateY(-120%) } } .index-pro-swiper .index-pro-next { margin-left: 506px; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg) } @media (max-width: 1366px) { .index-pro-swiper .index-pro-next { margin-left: 436px } } @media (max-width: 900px) { .index-pro-swiper .index-pro-next { margin-left: 0; right:.23rem; left: auto; -webkit-transform: translateY(-120%) rotate(180deg); -moz-transform: translateY(-120%) rotate(180deg); -ms-transform: translateY(-120%) rotate(180deg); transform: translateY(-120%) rotate(180deg) } } .index-pro-swiper .info { width: 330px; background-color: rgba(0,0,0,0.6); position: absolute; top: 0; right: 0; height: 100%; z-index: 5; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: none; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; padding: 0 50px } .index-pro-swiper .info img { max-width: 100% } @media (max-width: 900px) { .index-pro-swiper .info { width: 100%; top: auto; bottom: 0; height: 1.25rem; padding:0 .2rem; -webkit-box-align: start; -webkit-align-items: start; -moz-box-align: start; -ms-flex-align: start; align-items: start } } .index-pro-swiper .top { text-align: center } @media (max-width: 900px) { .index-pro-swiper .top { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; text-align: left; margin-bottom:.15rem } .index-pro-swiper .top .info-img { width:.3rem; height:.3rem; margin-right: 10px; margin-bottom: 0 } .index-pro-swiper .top .r { -webkit-box-flex: 1; -webkit-flex: 1; -moz-box-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden } } @media screen and (max-width: 750px) { .index-pro-swiper .top .title { font-size: 14px } .index-pro-swiper .top .en { font-size: 10px } } .index-pro-swiper .info-img { margin: 0 auto 15px } .index-pro-swiper .info-img img { display: block; max-width: 100%; margin: 0 auto } .index-pro-swiper .title { color: #fff; font-size: 24px } .index-pro-swiper .en { font-family: Arial; font-size: 12px; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-top: 5px } .index-pro-swiper .icon { margin: 10px auto 20px } @media (max-width: 1024px) { .index-pro-swiper .icon { display: none } } .index-pro-swiper .p { font-size: 14px; line-height: 30px; color: #fff; height: 90px; overflow: hidden; margin-top: 10px } @media (max-width: 900px) { .index-pro-swiper .p { height: 60px } } @media (max-width: 750px) { .index-pro-swiper .p { font-size: 12px; height: 40px; line-height: 20px; margin-top: 0 } } .index-pro-swiper .more { display: inline-block; vertical-align: top; border-bottom: 1px solid #fff; font-family: 'CERA_GR_BOLD'; font-size: 14px; color: #fff; line-height: 30px; width: auto; text-transform: uppercase; margin-top: 10px; -webkit-transition: color .2s ease; -o-transition: color .2s ease; -moz-transition: color .2s ease; transition: color .2s ease } @media (max-width: 900px) { .index-pro-swiper .more { display: none } }