@charset "UTF-8"; /*! Important comments included in minified output. https://www.bocweb.cn/ 2021-03-15 漏2021 鍗氶噰缃戠粶 ALL RIGHTS RESERVED. 鍗氶噰缃戠粶 */ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .simple-form-basic, .simple-text, .simple-textarea, .simple-select { border: 1px solid #ccc; padding: 4px; vertical-align: middle; } .simple-form-basic:focus, .simple-text:focus, .simple-textarea:focus, .simple-select:focus { outline: 0 none; } .simple-text { height: 18px; -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; transition: border linear 0.2s, box-shadow linear 0.2s; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); } .simple-text:focus { border-color: rgba(82, 168, 236, 0.8); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); } .simple-textarea { height: 18px; -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; transition: border linear 0.2s, box-shadow linear 0.2s; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); height: 80px; width: 500px; vertical-align: top; } .simple-textarea:focus { border-color: rgba(82, 168, 236, 0.8); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); } .simple-select { *margin-top: 5px; *margin-bottom: 5px; *vertical-align: top; } .reset-radio-checkbox { margin: 0 5px 0 0; padding: 0; font-size: 13px; *width: 13px; *height: 13px; } /** * 1. Set default font family to sans-serif. * 2. Prevent iOS text size adjust after orientation change, without disabling * user zoom. * 0. sassCore's style */ html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ overflow-y: scroll; /* 0 */ -webkit-overflow-scrolling: touch /* 0 */ } /** * 1. Remove default margin * 0. sassCore's style. */ body { margin: 0; /* 1 */ font-size: 12px; /* 0 */ line-height: 1.6; /* 0 */ color: #333; /* 0 */ background-color: #fff /* 0 */ } /* HTML5 display definitions ========================================================================== */ /** * Correct `block` display not defined for any HTML5 element in IE 8/9. * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. * Correct `block` display not defined for `main` in IE 11. */ article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } /** * 1. Correct `inline-block` display not defined in IE 8/9. * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. * 3. Correct `inline-block` display in IE 6/7. */ audio, canvas, progress, video { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ *display: inline; /* 3 */ *zoom: 1 /* 3 */ } /** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /** * Address `[hidden]` styling not present in IE 8/9/10. * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. */ [hidden], template { display: none; } /* Links ========================================================================== */ /** * 1. Remove the gray background color from active links in IE 10. * 2. Improve readability when focused and also mouse hovered in all browsers. * 0. sassCore's style. */ a { background: transparent; /* 1 */ /* 0 */ text-decoration: none; color: #000; } a:active, a:hover { outline: 0 /* 2 */ } a:hover { color: #006699; } /* Text-level semantics ========================================================================== */ /** * Address styling not present in IE 8/9/10/11, Safari, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /** * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */ b, strong { font-weight: bold; } /** * Address styling not present in Safari and Chrome. */ dfn { font-style: italic; } /** * Address styling not present in IE 8/9. */ mark { background: #ff0; color: #000; } /** * Address inconsistent and variable font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* Embedded content ========================================================================== */ /** * 1. Remove border when inside `a` element in IE 8/9/10. * 2. Improve image quality when scaled in IE 7. * 0. sassCore's style. */ img { border: 0; /* 1 */ vertical-align: middle; /* 0 */ -ms-interpolation-mode: bicubic /* 2 */ } /** * Correct overflow not hidden in IE 9/10/11. */ svg:not(:root) { overflow: hidden; } /* Grouping content ========================================================================== */ /** * Address differences between Firefox and other browsers. */ hr { box-sizing: content-box; height: 0; } /** * 1. Contain overflow in all browsers. * 2. Improve readability of pre-formatted text in all browsers. */ pre { overflow: auto; /* 1 */ white-space: pre; /* 2 */ white-space: pre-wrap; /* 2 */ word-wrap: break-word /* 2 */ } /** * 1. Address odd `em`-unit font size rendering in all browsers. * 2. Correct font family set oddly in IE 6, Safari 4/5, and Chrome. */ code, kbd, pre, samp { font-family: monospace, monospace; /* 1 */ _font-family: 'courier new', monospace; /* 1 */ font-size: 1em /* 2 */ } /* Forms ========================================================================== */ /** * Known limitation: by default, Chrome and Safari on OS X allow very limited * styling of `select`, unless a `border` property is set. */ /** * 1. Correct color not being inherited. * Known issue: affects color of disabled elements. * 2. Correct font properties not being inherited. * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */ button, input, optgroup, select, textarea { color: inherit; /* 1 */ font: inherit; /* 2 */ margin: 0 /* 3 */ } /** * Address `overflow` set to `hidden` in IE 8/9/10/11. */ button { overflow: visible; } /** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. * Correct `select` style inheritance in Firefox. */ button, select { text-transform: none; } /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. * 4. Remove inner spacing in IE 7 without affecting normal text inputs. * Known issue: inner spacing remains in IE 6. */ button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ *overflow: visible /* 4 */ } /** * Re-set default cursor for disabled elements. */ button[disabled], html input[disabled] { cursor: default; } /** * Remove inner padding and border in Firefox 4+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } textarea:focus, input:focus { outline: none; } /** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ input { line-height: normal; } /** * It's recommended that you don't attempt to style these elements. * Firefox's implementation doesn't respect box-sizing, padding, or width. * * 1. Address box sizing set to `content-box` in IE 8/9/10. * 2. Remove excess padding in IE 8/9/10. * 3. Remove excess padding in IE 7. * Known issue: excess padding remains in IE 6. */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ *height: 13px; /* 3 */ *width: 13px /* 3 */ } /** * Fix the cursor style for Chrome's increment/decrement buttons. For certain * `font-size` values of the `input`, it causes the cursor style of the * decrement button to change from `default` to `text`. */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Address `appearance` set to `searchfield` in Safari and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari and Chrome * (include `-moz` to future-proof). */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ /* 2 */ box-sizing: content-box; } /** * Remove inner padding and search cancel button in Safari and Chrome on OS X. * Safari (but not Chrome) clips the cancel button when the search input has * padding (and `textfield` appearance). */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration, input[type="text"] { -webkit-appearance: none; } /** * Define consistent border, margin, and padding. */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1. Correct `color` not being inherited in IE 8/9/10/11. * 2. Remove padding so people aren't caught out if they zero out fieldsets. * 3. Correct alignment displayed oddly in IE 6/7. */ legend { border: 0; /* 1 */ padding: 0; /* 2 */ *margin-left: -7px /* 3 */ } /** * 1. Remove default vertical scrollbar in IE 8/9/10/11. * 0. sassCore's style */ textarea { overflow: auto; /* 1 */ resize: vertical /* 0 */ } /** * Don't inherit the `font-weight` (applied by a rule above). * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */ optgroup { font-weight: bold; } /* Tables ========================================================================== */ /** * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } /** * Address CSS quotes not supported in IE 6/7. */ q { quotes: none; } html, button, input, select, textarea { font-family: "Noto Sans SC", "Source Han Sans CN", "Noto Sans S Chinese Light", "Microsoft Yahei", "Microsoft YaHei Light", "Pingfang sc regular", "Helvetica Neue", Helvetica, Tahoma, sans-serif; } h1, h2, h3, h4, h5, h6, p, figure, form, blockquote { margin: 0; } ul, ol, li, dl, dd { margin: 0; padding: 0; } ul, ol { list-style: none outside none; } h1, h2, h3 { line-height: 2; font-weight: normal; } h1 { font-size: 18px; } h2 { font-size: 15.6px; } h3 { font-size: 14.04px; } h4 { font-size: 12px; } h5, h6 { font-size: 10.2px; text-transform: uppercase; } input:-moz-placeholder, textarea:-moz-placeholder { color: #ccc; } input::-moz-placeholder, textarea::-moz-placeholder { color: #ccc; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #ccc; } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #ccc; } html { overflow: hidden; overflow-y: scroll; } button, input, textarea, select { border: none; border-radius: 0; outline: none; padding: 0; } * { box-sizing: border-box; -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; } .clear { clear: both; } .f-cb { zoom: 1; } .f-cb:after { display: block; height: 0; clear: both; visibility: hidden; overflow: hidden; content: "."; } .fl { float: left; } .fr { float: right; } .por { position: relative; } .poa { position: absolute; } .pof { position: fixed; } .poa-f { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .ovh { overflow: hidden; } .noselect { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } .dn { display: none; } .w-f { width: 100%; } .h-f { height: 100%; } .loader { width: 50px; height: 50px; position: fixed; top: 50%; left: 50%; margin: -25px 0 0 -25px; font-size: 10px; border-top: 2px solid rgba(0, 0, 0, 0.08); border-right: 2px solid rgba(0, 0, 0, 0.08); border-bottom: 2px solid rgba(0, 0, 0, 0.08); border-left: 2px solid rgba(0, 0, 0, 0.5); border-radius: 50%; -webkit-animation: spinner 700ms infinite linear; animation: spinner 700ms infinite linear; } .loader.white { border-top: 2px solid rgba(255, 255, 255, 0.08); border-right: 2px solid rgba(255, 255, 255, 0.08); border-bottom: 2px solid rgba(255, 255, 255, 0.08); border-left: 2px solid rgba(255, 255, 255, 0.5); } @-webkit-keyframes spinner { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spinner { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /*鎵嬫満涓奱閾炬帴鏈夐粦鑹查€忔槑搴曟€庝箞鍘绘帀 缁檃鍔犺繖涓牱寮?/ a { -webkit-tap-highlight-color: rgba(255, 0, 0, 0); } select, input { outline: none; } /*ie 鍘绘帀鑷甫鍏抽棴*/ input::-ms-clear { display: none; } /* 2023-03-02 琚侀槼缃戠珯閫傞厤閲嶆柊璋冩暣*/ html { font-size: 2.084vw !important; } @media (max-width: 1481px) { /* html { font-size: 2.5vw !important; } */ } @media (max-width: 996px) { html { font-size: 28px !important; } } ::-moz-selection { background: black; color: #fff; } ::selection { background: black; color: #fff; } ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); } ::-webkit-scrollbar-thumb { background: #000; } ::-webkit-scrollbar-thumb:window-inactive { background: #000; } ::-webkit-scrollbar-thumb:vertical:hover { background: #000; } /*==甯哥敤棰滆壊==*/ .col-fff { color: #fff; } .col-000 { color: #000; } .col-111 { color: #111; } .col-222 { color: #222; } .col-333 { color: #333; } .col-444 { color: #444; } .col-555 { color: #555; } .col-666 { color: #666; } .col-777 { color: #666; } .col-888 { color: #666; } .col-999 { color: #999; } /*==甯哥敤瀛楀彿==*/ .tit-12 { font-size: 12px; } .tit-13 { font-size: 13px; } .tit-14 { font-size: .35rem; } .tit-15 { font-size: .4rem; } .tit-16 { font-size: .4rem; } .tit-17 { font-size: .4rem; } .tit-18 { font-size: .45rem; } .tit-19 { font-size: .475rem; } .tit-20 { font-size: .5rem; } .tit-21 { font-size: .525rem; } .tit-22 { font-size: .55rem; } .tit-23 { font-size: .575rem; } .tit-24 { font-size: .6rem; } .tit-25 { font-size: .625rem; } .tit-26 { font-size: .65rem; } .tit-27 { font-size: .675rem; } .tit-28 { font-size: .7rem; } .tit-29 { font-size: .725rem; } .tit-30 { font-size: .75rem; } .tit-31 { font-size: .775rem; } .tit-32 { font-size: .8rem; } .tit-33 { font-size: .825rem; } .tit-34 { font-size: .85rem; } .tit-35 { font-size: .875rem; } .tit-36 { font-size: .9rem; } .tit-37 { font-size: .925rem; } .tit-38 { font-size: .95rem; } .tit-39 { font-size: .975rem; } .tit-40 { font-size: 1rem; } .tit-41 { font-size: 1.025rem; } .tit-42 { font-size: 1.05rem; } .tit-43 { font-size: 1.075rem; } .tit-44 { font-size: 1.1rem; } .tit-45 { font-size: 1.125rem; } .tit-46 { font-size: 1.15rem; } .tit-47 { font-size: 1.175rem; } .tit-48 { font-size: 1.2rem; } .tit-49 { font-size: 1.225rem; } .tit-50 { font-size: 1.25rem; } .tit-51 { font-size: 1.275rem; } .tit-52 { font-size: 1.3rem; } .tit-53 { font-size: 1.325rem; } .tit-54 { font-size: 1.35rem; } .tit-55 { font-size: 1.375rem; } .tit-56 { font-size: 1.4rem; } .tit-57 { font-size: 1.425rem; } .tit-58 { font-size: 1.45rem; } .tit-59 { font-size: 1.475rem; } .tit-60 { font-size: 1.5rem; } .tit-61 { font-size: 1.525rem; } .tit-62 { font-size: 1.55rem; } .tit-63 { font-size: 1.575rem; } .tit-64 { font-size: 1.6rem; } .tit-65 { font-size: 1.625rem; } .tit-66 { font-size: 1.65rem; } .tit-67 { font-size: 1.675rem; } .tit-68 { font-size: 1.7rem; } .tit-69 { font-size: 1.725rem; } .tit-70 { font-size: 1.75rem; } .tit-71 { font-size: 1.775rem; } .tit-72 { font-size: 1.8rem; } .tit-73 { font-size: 1.825rem; } .tit-74 { font-size: 1.85rem; } .tit-75 { font-size: 1.875rem; } .tit-76 { font-size: 1.9rem; } .tit-77 { font-size: 1.925rem; } .tit-78 { font-size: 1.95rem; } .tit-79 { font-size: 1.975rem; } .tit-80 { font-size: 2rem; } /*姝f枃瀛楀彿*/ .conbox-14 { font-size: 14 px; line-height: 1.8; } .conbox-15 { font-size: 15 px; line-height: 1.8; } .conbox-16 { font-size: 16 px; line-height: 1.8; } .conbox-17 { font-size: 17 px; line-height: 1.8; } .conbox-18 { font-size: 18 px; line-height: 1.8; } .conbox-19 { font-size: 19 px; line-height: 1.8; } .conbox-20 { font-size: 20 px; line-height: 1.8; } .conbox-21 { font-size: 21 px; line-height: 1.8; } .conbox-22 { font-size: 22 px; line-height: 1.8; } .conbox-23 { font-size: 23 px; line-height: 1.8; } .conbox-24 { font-size: 24 px; line-height: 1.8; } @media (max-width: 1481px) { .conbox-18 { font-size: 16px; } .conbox-20 { font-size: 18px; } .conbox-24 { font-size: 20px; } } @media (max-width: 1281px) { .conbox-14 { font-size: 13px; } .conbox-16 { font-size: 14px; } .conbox-18 { font-size: 15px; } .conbox-20 { font-size: 15px; } .conbox-24 { font-size: 16px; } } /*鍝嶅簲闅愯棌鏍峰紡*/ .pc-block { display: block; } .pc-block-768 { display: block; } .pc-block-767 { display: block; } .m-block { display: none; } .m-block-767 { display: none; } .m-block-768 { display: none; } @media (max-width: 1024px) { .m-block { display: block; } } @media (max-width: 768px) { .pc-block-768 { display: none; } .m-block-768 { display: block; } } @media (max-width: 767px) { .pc-block-767 { display: none; } .m-block-767 { display: block; } } /*甯哥敤鏍峰紡绫诲悕*/ .poa-middle { left: 0; top: 0; bottom: 0; right: 0; margin: auto; } .tran-middle { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .text-hide { word-break: keep-all; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .img-cover { background-size: cover; background-position: center center; background-repeat: no-repeat; } .pointer { cursor: pointer; } .bgtop { background-position: top; } .containbg { background-repeat: no-repeat; background-size: contain; background-position: center; } .text-left { text-align: left; } .text-right { text-align: right; } .text-center { text-align: center; } .text-justif { text-align: justify; } .text-nowrap { white-space: nowrap; } .text-lowercase { text-transform: lowercase; } .text-uppercase { text-transform: uppercase; } .text-capitalize { text-transform: capitalize; } .text-bold { font-weight: bold; } .centerh { position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .centerv { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .centerblock { margin-left: auto; margin-right: auto; } .shadow1 { box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.15); } .full { width: 100%; height: 100%; } .fullw { width: 100%; } .fullh { height: 100%; } .fullvh { height: 100vh; } .top { top: 0; } .btm { bottom: 0; } .lt { left: 0; } .rt { right: 0; } .block { display: block; } .inlineblock { display: inline-block; } .notrans { -webkit-transition-duration: 0s !important; transition-duration: 0s !important; } .no-hover { pointer-events: none !important; cursor: default; } .trans3d0 { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .round { border-radius: 50%; } .mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; } .in-block { display: inline-block; *display: inline; *zoom: 1; } /*缃戠珯涓讳綋鍖哄煙瀹藉害鏍峰紡*/ .w100 { width: 100%; } .w1720 { max-width: 1720px; width: 90%; margin: 0 auto; } .w1300 { width: 1300px; margin: 0 auto; } @media (max-width: 1350px) { .w1300 { width: 94%; } } .w1080 { width: 1080px; margin: 0 auto; } @media (max-width: 1100px) { .w1080 { width: 94%; } } .w1070 { width: 1070px; margin: 0 auto; } @media (max-width: 1100px) { .w1070 { width: 94%; } } /*鍒嗛〉鏍峰紡*/ .wpage { text-align: center; } .page { padding: 40px 0 0; font-size: 14px; font-weight: bold; line-height: 22px; text-align: center; clear: both; display: inline-block; } .page a { text-decoration: none; color: #d2d2d2; width: 38px; height: 38px; line-height: 38px; margin: 0 2px; background: #f0efef; display: block; float: left; -webkit-transition: 0.5s cubic-bezier(0.6, 0.2, 0.1, 1); transition: 0.5s cubic-bezier(0.6, 0.2, 0.1, 1); } .page a.active { background: #da3830; color: #fff; -webkit-transition: 0.5s cubic-bezier(0.6, 0.2, 0.1, 1); transition: 0.5s cubic-bezier(0.6, 0.2, 0.1, 1); } .page span.laypage_curr { width: 38px; height: 38px; line-height: 38px; margin: 0 2px; display: inline-block; background: #da3830; color: #fff; -webkit-transition: 0.5s cubic-bezier(0.6, 0.2, 0.1, 1); transition: 0.5s cubic-bezier(0.6, 0.2, 0.1, 1); } .page a:hover { text-decoration: none; color: #fff; background: #da3830; -webkit-transition: 0.5s cubic-bezier(0.6, 0.2, 0.1, 1); transition: 0.5s cubic-bezier(0.6, 0.2, 0.1, 1); } /*鍒嗛〉鏍峰紡end*/ @media (max-width: 767px) {} .wrap-sm { padding: 30px; } @media (max-width: 767px) { .wrap-sm { padding: 15px; } } .wrap-xs { padding: 20px; } @media (max-width: 767px) { .wrap-xs { padding: 10px; } } .p-v-xs { padding-top: 20px; padding-bottom: 20px; } @media (max-width: 767px) { .p-v-xs { padding-top: 10px; padding-bottom: 10px; } } .p-v-sm { padding-top: 30px; padding-bottom: 30px; } @media (max-width: 767px) { .p-v-sm { padding-top: 20px; padding-bottom: 20px; } } .p-v-md { padding-top: 60px; padding-bottom: 60px; } @media (max-width: 959px) { .p-v-md { padding-top: 40px; padding-bottom: 40px; } } @media (max-width: 767px) { .p-v-md { padding-top: 30px; padding-bottom: 30px; } } .p-v-lg { padding-top: 100px; padding-bottom: 100px; } @media (max-width: 959px) { .p-v-lg { padding-top: 70px; padding-bottom: 70px; } } @media (max-width: 767px) { .p-v-lg { padding-top: 50px; padding-bottom: 50px; } } .p-h-sm { padding-left: 30px; padding-right: 30px; } @media (max-width: 767px) { .p-h-sm { padding-left: 20px; padding-right: 20px; } } .pt0 { padding-top: 0; } .pb0 { padding-bottom: 0; } .m-v-lg { margin-top: 100px; margin-bottom: 100px; } @media (max-width: 959px) { .m-v-lg { margin-top: 70px; margin-bottom: 70px; } } @media (max-width: 767px) { .m-v-lg { margin-top: 50px; margin-bottom: 50px; } } .m-b-xxs { margin-bottom: 5px; } .m-b-xs { margin-bottom: 10px; } .m-b-sm { margin-bottom: 20px; } @media (max-width: 767px) { .m-b-sm { margin-bottom: 15px; } } .m-b-md { margin-bottom: 30px; } @media (max-width: 767px) { .m-b-md { margin-bottom: 20px; } } .m-b-lg { margin-bottom: 60px; } @media (max-width: 767px) { .m-b-lg { margin-bottom: 40px; } } .m-b-xl { margin-bottom: 100px; } @media (max-width: 959px) { .m-b-xl { margin-bottom: 70px; } } @media (max-width: 767px) { .m-b-xl { margin-bottom: 50px; } } .m-t-xxs { margin-top: 5px; } .m-t-xs { margin-top: 10px; } .m-t-sm { margin-top: 20px; } @media (max-width: 767px) { .m-t-sm { margin-top: 15px; } } .m-t-md { margin-top: 30px; } @media (max-width: 767px) { .m-t-md { margin-top: 20px; } } .m-t-lg { margin-top: 60px; } @media (max-width: 767px) { .m-t-lg { margin-top: 40px; } } .m-r-xxs { margin-right: 5px; } .m-r-xs { margin-right: 10px; } .m-r-sm { margin-right: 20px; } @media (max-width: 767px) { .m-r-sm { margin-right: 10px; } } .m-l-xxs { margin-left: 5px; } .m-l-xs { margin-left: 10px; } .m-l-sm { margin-left: 20px; } @media (max-width: 767px) { .m-l-sm { margin-left: 10px; } } @media (max-width: 767px) and (orientation: portrait) { .phone-v-fullw { width: 100%; } .phone-v-p0 { padding: 0; } } /*甯哥敤css3鍔ㄧ敾鏍峰紡*/ .trans { -webkit-transition: all .4s; transition: all 0.4s; } .trans2 { -webkit-transition: all 0.4s cubic-bezier(0.77, 0, 0.175, 1); transition: all 0.4s cubic-bezier(0.77, 0, 0.175, 1); } .trans-md { -webkit-transition: all .8s; transition: all 0.8s; } .trans-md2 { -webkit-transition: all 0.8s cubic-bezier(1, 0, 0, 1); transition: all 0.8s cubic-bezier(1, 0, 0, 1); } /*loadering鍔ㄧ敾鏍峰紡2*/ .anim-loader { -webkit-animation: loader 1829ms linear infinite, loader_dash 2156ms ease-in-out infinite; animation: loader 1829ms linear infinite, loader_dash 2156ms ease-in-out infinite; } .anim-fade-out { -webkit-animation: fade_out .5s ease forwards; animation: fade_out 0.5s ease forwards; } /*妯″潡鍔犺浇鐨刲oading-2*/ .ajax-loader { background: rgba(0, 0, 0, 0.2); visibility: hidden; opacity: 0; z-index: 1036; } .tt-ajax-loader .ajax-loader { visibility: visible; opacity: 1; } .tt-ajax-loader .ajax-loader .loader-icon .line { -webkit-animation: loader 1829ms linear infinite, loader_dash 2156ms ease-in-out infinite; animation: loader 1829ms linear infinite, loader_dash 2156ms ease-in-out infinite; } /*end*/ /*鍏ュ満鍔ㄧ敾鏍峰紡*/ .cssanimations .anim_emt, .cssanimations .anim_group .anim_item { visibility: hidden; } .cssanimations .anim_emt.visb, .cssanimations .anim_group .anim_item.visb { visibility: inherit; } .anim_emt.start { -webkit-animation-duration: .6s; animation-duration: .6s; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .anim_emt.start.scale_up { -webkit-animation-name: mk_scale; animation-name: mk_scale; } .anim_emt.start.fade_in { -webkit-animation-name: mk_fade; animation-name: mk_fade; } .anim_emt.start.r_to_l { -webkit-animation-name: mk_right_to_left; animation-name: mk_right_to_left; } .anim_emt.start.l_to_r { -webkit-animation-name: mk_left_to_right; animation-name: mk_left_to_right; } .anim_emt.start.t_to_b { -webkit-animation-name: mk_top_to_bottom; animation-name: mk_top_to_bottom; } .anim_emt.start.b_to_t { -webkit-animation-name: mk_bottom_to_top; animation-name: mk_bottom_to_top; } .slide_anim { visibility: hidden; } .slide_anim.start { visibility: visible; } .slide_anim.b_to_t.start { -webkit-animation: mk_bottom_to_top .6s; animation: mk_bottom_to_top 0.6s; } .anim_emt.palx_img.start { overflow: hidden; -webkit-animation-name: tt_palx_wrap; animation-name: tt_palx_wrap; } .anim_emt.palx_img.start .img-wrap { -webkit-animation: tt_palx_img .6s; animation: tt_palx_img 0.6s; } @-webkit-keyframes tt_palx_wrap { 0% { -webkit-transform: translateY(30px); transform: translateY(30px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @keyframes tt_palx_wrap { 0% { -webkit-transform: translateY(30px); transform: translateY(30px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @-webkit-keyframes tt_palx_img { 0% { -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes tt_palx_img { 0% { -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes loader { to { -webkit-transform: rotate3d(0, 0, 1, 360deg); transform: rotate3d(0, 0, 1, 360deg); } } @keyframes loader { to { -webkit-transform: rotate3d(0, 0, 1, 360deg); transform: rotate3d(0, 0, 1, 360deg); } } @-webkit-keyframes loader_dash { from { stroke-dasharray: 0 150; stroke-dashoffset: 0; } to { stroke-dasharray: 100 150; stroke-dashoffset: -140; } } @keyframes loader_dash { from { stroke-dasharray: 0 150; stroke-dashoffset: 0; } to { stroke-dasharray: 100 150; stroke-dashoffset: -140; } } @-webkit-keyframes line_w100 { to { left: 100%; } } @keyframes line_w100 { to { left: 100%; } } @-webkit-keyframes rotate_360 { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotate_360 { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes fade_out { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fade_out { 0% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes fade_in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade_in { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fade_out_in { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } @keyframes fade_out_in { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } @-webkit-keyframes mk_scale { 0% { -webkit-transform: scale(0.5); transform: scale(0.5); opacity: 0; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes mk_scale { 0% { -webkit-transform: scale(0.5); transform: scale(0.5); opacity: 0; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @-webkit-keyframes mk_fade { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes mk_fade { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes mk_left_to_right { 0% { -webkit-transform: translateX(-30px); transform: translateX(-30px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } @keyframes mk_left_to_right { 0% { -webkit-transform: translateX(-30px); transform: translateX(-30px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } @-webkit-keyframes mk_right_to_left { 0% { -webkit-transform: translateX(30px); transform: translateX(30px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } @keyframes mk_right_to_left { 0% { -webkit-transform: translateX(30px); transform: translateX(30px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } @-webkit-keyframes mk_bottom_to_top { 0% { -webkit-transform: translateY(30px); transform: translateY(30px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @keyframes mk_bottom_to_top { 0% { -webkit-transform: translateY(30px); transform: translateY(30px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @-webkit-keyframes mk_top_to_bottom { 0% { -webkit-transform: translateY(-30px); transform: translateY(-30px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @keyframes mk_top_to_bottom { 0% { -webkit-transform: translateY(-30px); transform: translateY(-30px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @-webkit-keyframes mk_spt { 0% { -webkit-transform: translateY(10%); transform: translateY(10%); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @keyframes mk_spt { 0% { -webkit-transform: translateY(10%); transform: translateY(10%); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } .js-m { opacity: 0; -webkit-transform: translate(0, 30px); -ms-transform: translate(0, 30px); transform: translate(0, 30px); -webkit-transition: all 0.8s cubic-bezier(0.79, -0.27, 0.21, 0.82); transition: all 0.8s cubic-bezier(0.79, -0.27, 0.21, 0.82); } .js-m.animate { opacity: 1; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } .js-m-2-1 { opacity: 0; -webkit-transform: translate(0, 30px); -ms-transform: translate(0, 30px); transform: translate(0, 30px); -webkit-transition: all 0.8s cubic-bezier(0.79, -0.27, 0.21, 0.82); transition: all 0.8s cubic-bezier(0.79, -0.27, 0.21, 0.82); } .js-m-2-1.animate { opacity: 1; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } .a-del1 { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } .a-del2 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .a-del3 { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .a-del4 { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .a-del5 { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } .a-del6 { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .a-del7 { -webkit-animation-delay: 0.7s; animation-delay: 0.7s; } .a-del8 { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; } .a-del9 { -webkit-animation-delay: 0.9s; animation-delay: 0.9s; } .a-del10 { -webkit-animation-delay: 1s; animation-delay: 1s; } .a-dur1 { -webkit-animation-duration: 0.3s; animation-duration: 0.3s; } .a-dur2 { -webkit-animation-duration: 0.4s; animation-duration: 0.4s; } .a-dur3 { -webkit-animation-duration: 0.5s; animation-duration: 0.5s; } .a-dur4 { -webkit-animation-duration: 0.6s; animation-duration: 0.6s; } .a-dur5 { -webkit-animation-duration: 0.7s; animation-duration: 0.7s; } .a-dur6 { -webkit-animation-duration: 0.8s; animation-duration: 0.8s; } .a-dur7 { -webkit-animation-duration: 0.9s; animation-duration: 0.9s; } .a-dur8 { -webkit-animation-duration: 1s; animation-duration: 1s; } .a-dur9 { -webkit-animation-duration: 1.1s; animation-duration: 1.1s; } .a-dur10 { -webkit-animation-duration: 1.2s; animation-duration: 1.2s; } .a-dur11 { -webkit-animation-duration: 1.3s; animation-duration: 1.3s; } .a-dur12 { -webkit-animation-duration: 1.4s; animation-duration: 1.4s; } .a-dur13 { -webkit-animation-duration: 1.5s; animation-duration: 1.5s; } .a-dur14 { -webkit-animation-duration: 1.6s; animation-duration: 1.6s; } .a-dur15 { -webkit-animation-duration: 1.7s; animation-duration: 1.7s; } .a-dur16 { -webkit-animation-duration: 1.8s; animation-duration: 1.8s; } .a-dur17 { -webkit-animation-duration: 1.9s; animation-duration: 1.9s; } .a-dur18 { -webkit-animation-duration: 2s; animation-duration: 2s; } .t-del1 { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } .t-del2 { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .t-del3 { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } .t-del4 { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } .t-del5 { -webkit-transition-delay: 0.5s; transition-delay: 0.5s; } .t-del6 { -webkit-transition-delay: 0.6s; transition-delay: 0.6s; } .t-del7 { -webkit-transition-delay: 0.7s; transition-delay: 0.7s; } .t-del8 { -webkit-transition-delay: 0.8s; transition-delay: 0.8s; } .t-del9 { -webkit-transition-delay: 0.9s; transition-delay: 0.9s; } .t-del10 { -webkit-transition-delay: 1s; transition-delay: 1s; } /*ie10浠ヤ笅鏄剧ず*/ .browsers { position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: #fff url(../../img/iebgimg.png); background-repeat: no-repeat; background-position: 50% 50%; z-index: 99; } .line-1 { line-height: 1.1; } .line-2 { line-height: 1.2; } .line-3 { line-height: 1.3; } .line-4 { line-height: 1.4; } .line-5 {} .line-6 { line-height: 1.6; } .line-7 { line-height: 1.7; } .line-8 { line-height: 1.8; } .line-9 { line-height: 1.9; } .line-10 { line-height: 2; } .line-11 { line-height: 2.1; } .line-12 { line-height: 2.2; } /*姣涚幓鐠?/ .some-class-zxx { background-color: #fff; } @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) { .some-class-zxx { background: rgba(255, 255, 255, 0.75); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); } } /*鏂囧瓧寮曠敤*/ /*@include font-face($font-family:'ad', $file-path:"../fonts/BEBAS", $weight: normal, $style: normal); @include simple-text($borderColorFocus:#000); @include simple-textarea($borderColorFocus:#52a8ec, $width:500px, $height:80px) @include simple-btn($formbtn:false, $bgColor: $primary, $textColor:$white); /*@include triangle(left, 10px, #000 )*/ /*@include triangle($direction, $size, $borderColor )*/ /*.conbox-16{ color:nth($infoColor,1); background:nth($infoColor,2); border:1px solid nth($infoColor,3); }*/ /*@include placeholder(#999);*/ /*margin-right: pe(16px);*/ /*@extend .in-block;*/ /*鍒濆鏍峰紡缁撴潫*/ /*棣栭〉鍔犺浇loading*/ body.loading { overflow: hidden; } #pageloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #f5f3f0; overflow: hidden; z-index: 5000; } #pageloader .logo { width: auto; height: 51px; } .darkmode #pageloader { background: #252525; } body.init #pageloader { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); -webkit-transition: all 1.2s cubic-bezier(0.77, 0, 0.175, 1); transition: all 1.2s cubic-bezier(0.77, 0, 0.175, 1); } body.init #pageloader .cont { opacity: 0; -webkit-transition: all .6s; transition: all 0.6s; } body.init #pageloader .logo, body.init #pageloader div { -webkit-transition: all .6s; transition: all 0.6s; } body.init #pageloader .logo { -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } body.init #pageloader .small { -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } body.init #pageloader .loader-line { -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); } .loader-line { width: 50vw; max-width: 300px; height: 2px; background: #A96B41; overflow: hidden; } .loader-icon { width: 24px; height: 24px; border-radius: 50%; } .loader-icon .line { fill: none; stroke: #fff; stroke-width: 4px; stroke-linecap: round; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } /*.loader-line .gradient,.loader-line .gradient2 { width:40%; height:100%; left:-40%; background-image:-webkit-gradient(linear,left top,right top,color-stop(0,rgba(218,157,119,0)),color-stop(50%,#DA9D77),to(rgba(218,157,119,0))); background-image:-o-linear-gradient(left,rgba(218,157,119,0) 0,#DA9D77 50%,rgba(218,157,119,0) 100%); background-image:linear-gradient(to right,rgba(218,157,119,0) 0,#DA9D77 50%,rgba(218,157,119,0) 100%); -webkit-animation:line_w100 2s cubic-bezier(.165,.84,.44,1) infinite; animation:line_w100 2s cubic-bezier(.165,.84,.44,1) infinite } .loader-line .gradient2 { -webkit-animation-delay:1s; animation-delay:1s }*/ /*棣栭〉鍔犺浇loading-end*/ /*# sourceMappingURL=boc_reset.css.map */ .wr { width: 100%; position: relative; } .lh1 { line-height: 1; } .bg { width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; } header { width: 100%; position: fixed; top: 0; left: 0; z-index: 99; } .pc-header { width: 100%; height: 2.5rem; display: flex; align-items: center; justify-content: space-between; padding: 0 2rem; transition: all 0.5s; } .pc-header .left-btn { display: flex; height: 100%; align-items: center; } .pc-header .left-btn .logo { position: relative; } .pc-header .op1 { opacity: 1; } .pc-header .op2 { opacity: 0; position: absolute; top: 0; left: 0; } .pc-header .nav { height: 100%; display: flex; align-items: center; justify-content: center; } .pc-header .nav .li { margin: 0 .875rem; } .pc-header .nav .li .tit { font-size: .5rem; line-height: 2.5rem; position: relative; } .pc-header .nav .li .tit::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background-color: #333; transition: all .4s; } .pc-header .nav .li .tit a { color: #fff; transition: all .3s; } .pc-header .nav .li .tit a i { font-size: 12px; } .pc-header .nav .li.cur .tit a { color: #F23840; } .pc-header .nav .li.cur .tit::after { background-color: #F23840; } .pc-header .nav .li:hover .tit::after { width: 100%; } .pc-header .logo { width: 4.9rem; } .pc-header .right-btn { display: flex; height: 100%; align-items: center; } .pc-header .right-btn .search { height: 24px; cursor: pointer; } .pc-header .right-btn .search svg { fill: #fff; width: 100%; } .pc-header .right-btn .search:hover svg { fill: #F23840; } .pc-header.head-scroll .right-btn .search:hover svg { fill: #F23840; } .pc-header .right-btn .langbox { position: relative; margin-left: 0.5rem; } .pc-header .right-btn .langbox a { transition: all .3s; } .pc-header .right-btn .langbox a svg { transition: all .3s; } .pc-header .right-btn .litip .img1 { width: .5rem; height: .5rem; margin-right: .125rem; fill: #fff; } .pc-header .right-btn .litip .icon { width: .25rem; fill: #fff; margin-left: .225rem; } .pc-header .right-btn .litip .x { margin-right: 14px; } .pc-header .right-btn .litip .s { width: 7px; height: 7px; margin-left: 7px; } .pc-header .right-btn .libox { padding: .2rem .2rem 0; background: #fff; width: 2.5rem; position: absolute; top: 1rem; left: 50%; margin-left: -1.25rem; opacity: 0; visibility: hidden; border-radius: .2rem; transform: translate(0, -0.5rem); } .pc-header .right-btn .libox a { display: block; width: 2.1rem; height: 1rem; line-height: 1rem; text-align: center; border-radius: .125rem; background: #eee; color: #999; transition: all .3s; margin-bottom: .25rem; } .pc-header .right-btn .libox a:hover { color: #fff; background: #F23840; ; } .pc-header .right-btn .litip { color: #fff; } .pc-header .right-btn .landbtn { margin-left: .5rem; display: none; } .pc-header .right-btn .landbtn.active { display: flex; } @-webkit-keyframes jackInTheBox { from { opacity: 0; -webkit-transform: scale(0.1) rotate(30deg); transform: scale(0.1) rotate(30deg); -webkit-transform-origin: center bottom; transform-origin: center bottom; } 50% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 70% { -webkit-transform: rotate(3deg); transform: rotate(3deg); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes jackInTheBox { from { opacity: 0; -webkit-transform: scale(0.1) rotate(30deg); transform: scale(0.1) rotate(30deg); -webkit-transform-origin: center bottom; transform-origin: center bottom; } 50% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 70% { -webkit-transform: rotate(3deg); transform: rotate(3deg); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } .banner { height: 24.375rem; } .banner-container { width: 100%; height: 100%; overflow: hidden; position: relative; } .banner-container .swiper-slide { width: 100%; height: 100%; overflow: hidden; } .pc { display: block; } .mb { display: none; } .banner .swiper-slide, .banner .slide-inner { height: 100%; overflow: hidden; position: relative; } .banner-container .txt { position: absolute; top: 6.975rem; left: 6.4rem; } .banner-container .txt .t1 { width: 12.25rem; line-height: 1.2; color: #333333; } .banner-pagination { position: absolute; bottom: 1.35rem !important; z-index: 9; text-align: center; } .banner-pagination .swiper-pagination-bullet { width: 8px; height: 8px; border: 2px solid #FFFFFF; border-radius: 50%; background: transparent; opacity: 1; position: relative; } .banner-pagination .swiper-pagination-bullet::after { content: ""; width: 20px; height: 20px; background: #FFFFFF; opacity: 0.2; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); transition: all 0.5s; } .banner-pagination .swiper-pagination-bullet::before { content: ""; width: 0; height: 1px; opacity: 0.5; position: absolute; background-color: #fff; left: 100%; top: 50%; transform: translateY(-50%); } .banner-nums { position: absolute; bottom: 2rem; text-align: center; width: 100%; z-index: 3; color: #fff; font-size: 12px; } .banner-container .banner-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: #fff; margin-right: 75px; } .banner-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::after { transform: translate(-50%, -50%) scale(1); } .banner-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::before { transition: all 7s; width: 75px; } .banner-container .txt .t1 .t2 { color: #F23840; letter-spacing: 10px; } .banner-container .txt .t3 { color: #333333; text-transform: uppercase; margin-top: 1rem; } .banner-container .txt .t4 { margin-top: .35rem; line-height: 1.2; color: #333333; opacity: 0.5; } .banner-container .txt .more { margin-top: 1.45rem; } .imgspc { height: 100%; position: relative; object-fit: cover; } .view { max-width: 75vw; margin: 0 auto; } .home-a { padding: 3.75rem 0 2.25rem; height: 25.35rem; } .home-a .img1 { position: absolute; left: -2rem; top: -5rem; width: 24.5rem; opacity: 0.3; } .home-a .txt { z-index: 2; } .home-a .txt .t1 { font-weight: 500; color: #333333; line-height: 1; } .home-a .txt .t2 { width: 14.6rem; font-weight: 400; color: #666666; margin-top: 1.125rem; } .home-a .txt .more { margin-top: 3.425rem; } .more { display: inline-block; padding: .45rem .9rem; border: 1px solid rgba(51, 51, 51, 0.2); border-radius: .65rem; font-size: 0; text-align: center; transition: all 0.5s; } .more .tit-14 { line-height: 1rem; display: inline-block; vertical-align: top; line-height: 1; color: #F23840; } .more .icon { display: inline-block; margin-left: .3rem; vertical-align: top; transition: all 0.5s; } .home-a .img2 { width: 43rem; position: absolute; bottom: 2.25rem; right: 0; } .home-a .img2 img { width: 100%; } .more:hover { border: 1px solid #F23840; } .more:hover .icon { transform: translateX(10px); } .home-b { height: 20.5rem; } .home-b .bglist { height: 100%; overflow: hidden; position: relative; } .home-b .bglist .bg { position: absolute; top: 0; left: 0; display: none; } .home-b .bglist .bg:first-child { opacity: 1; } .home-b .bglist .bg .txt { position: absolute; top: 16.7%; left: 6rem; } .home-b .bglist .bg .txt .t1 { color: #333333; line-height: 1; font-weight: 500; opacity: 0; transform: translateY(20px); transition: all 0.5s; } .home-b .bglist .bg .txt .t2 { width: 12.825rem; font-weight: 400; color: #666666; margin-top: 1.35rem; opacity: 0; transform: translateY(20px); transition: all 0.5s; transition-delay: 0.2s; } .home-b .bglist .bg .txt .more { border: 1px solid #F23840; margin-top: 2rem; opacity: 0; transform: translateY(20px); transition: all 0.5s; transition-delay: 0.2s; } .home-b .navlist { position: absolute; bottom: 12%; left: 12.5vw; width: 75vw; height: 3rem; background: rgba(255, 255, 255, 0.8); } .home-b .navlist .li { width: calc(100% / 6); /* float: left; */ height: 100%; display: flex; align-items: center; justify-content: center; transition: all 0.5s; cursor: pointer; font-weight: 500; } .home-b .navlist .li .icon { margin-right: .3rem; width: .95rem; } .home-b .navlist .li.on { background-color: #F23840; color: #fff; } .home-b .navlist .li.on .icon img { filter: grayscale(100%) brightness(1000%) !important; } .home-b .bglist .bg.on .t1 { opacity: 1; transform: translateY(0); } .home-b .bglist .bg.on .t2 { opacity: 1; transform: translateY(0); } .home-b .bglist .bg.on .more { opacity: 1; transform: translateY(0); } .home-c .top { display: flex; padding: 2rem 0 1.25rem; align-items: center; justify-content: space-between; } .home-c .top .tit-42 { font-weight: 500; } .home-c .more { border: 1px solid #F23840; margin-top: 0; } .home-c .list { border-top: 1px solid rgba(0, 0, 0, 0.1); } .home-c .list .view { border-right: 1px solid rgba(0, 0, 0, 0.1); } .home-c .list .swiper-pagination { position: absolute; bottom: 1rem; left: 0; width: 100%; text-align: center; } .home-c .list .swiper-pagination .swiper-pagination-bullet { display: inline-block; margin: 0 4px; background: #000; opacity: .3; } .home-c .list .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background: #F23840; opacity: 1; } .home-c .list .swiper-slide { display: block; padding: .925rem .75rem; border-left: 1px solid rgba(0, 0, 0, 0.1); width: calc(100% / 3); padding-bottom: 2.75rem; transition: all 0.5s; } .home-c .list .swiper-slide .time { display: flex; color: #F23840; align-items: center; justify-content: flex-start; font-weight: 500; } .home-c .list .swiper-slide .time .icon { width: 17px; margin-right: 9px; } .home-c .list .swiper-slide .t1 { font-weight: 500; margin-top: .875rem; line-height: .9rem; height: 1.8rem; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; color: #000; } .home-c .list .swiper-slide .more { padding: .4rem .7rem; line-height: 1; margin-top: 1rem; transition: all 0.8s; } .home-c .list .swiper-slide .img { width: 100%; height: 7rem; margin-top: 1.325rem; overflow: hidden; } .home-c .list .swiper-slide:hover { box-shadow: inset -9px -4px 5px 2px rgb(0 0 0 / 10%) } .home-c .list .swiper-slide:hover .more { background-color: #F23840; } .home-c .list .swiper-slide:hover .more .tit-14 { color: #fff; } .home-c .list .swiper-slide .bg { transition: all 0.5s; } .home-c .list .swiper-slide:hover .bg { transform: scale(1.06); } footer { background: #EAEAEA; } footer .top { padding: 1.8rem 0 .5rem; display: flex; align-items: flex-start; justify-content: space-between; } footer .top .nav { display: flex; } footer .top .nav .li { margin-right: 2.5rem; } footer .top .nav .li .tit { font-weight: 400; color: #333333; font-size: .4rem; transition: all 0.5s; } footer .top .nav .li .tit:hover { color: #F23840; transform: translateX(5px); } footer .top .nav .li .sub { margin-top: 0.4rem; } footer .top .nav .li .sub a { display: block; font-size: .35rem; color: #666; line-height: 1; transition: all 0.5s; line-height: .9rem; } footer .top .nav .li .sub a:hover { color: #F23840; transform: translateX(5px); } footer .top .right { display: flex; flex-direction: column; align-items: flex-end; } footer .top .right .leng { display: flex; min-width: 2.9rem; padding: 5px 10px; min-height: .875rem; background: #FFFFFF; border-radius: 18px; align-items: center; justify-content: center; color: #333; transition: all 0.5s; } footer .top .right .leng .icon { margin-right: 2px; height: 16px; } footer .top .right .leng .icon svg { fill: #333; transition: all 0.5s; } footer .top .right .leng:hover { background-color: #F23840; color: #fff; } footer .top .right .leng:hover .icon svg { fill: #fff; } footer .top .right .share-list { margin-top: .625rem; font-size: 0; text-align: right; } footer .top .right .share-list a { display: inline-block; vertical-align: top; width: 1rem; height: 1rem; border-radius: 50%; border: 1px solid rgba(102, 102, 102, 0.25); position: relative; margin-left: .45rem; transition: all 0.5s; } footer .top .right .share-list a .code-img { position: absolute; top: calc(100% + 15px); left: 50%; transform: translateX(-50%); width: 4rem; opacity: 0; visibility: hidden; transition: all .5s; } footer .top .right .share-list a .code-img img { width: 100%; } footer .top .right .share-list a:hover { background-color: #F23840; border-color: #F23840; } footer .top .right .share-list a:hover img { filter: grayscale(100%) brightness(1000%) !important; } footer .top .right .share-list a:hover .code-img { top: calc(100% + 5px); opacity: 1; visibility: visible; } footer .top .right .t1 { margin-top: 1.65rem; line-height: 1; color: #666666; } footer .top .right .t2 { margin-top: .375rem; line-height: 1; color: #F23840; } footer .top .right .t3 { font-weight: 400; color: #333333; margin-top: .275rem; line-height: 1; } footer .bot { /* border-top: 1px solid rgba(102, 102, 102, 0.1); */ display: flex; align-items: flex-start; justify-content: space-between; /* padding-top: .8rem; */ padding-bottom: 1rem; } footer .bot a { display: inline; } footer .bot a br { display: none; } footer .bot span { color: #F23840; } footer .bot a:hover { color: #F23840; } .pc-header.on { background: rgba(255, 255, 255, .9); height: 2.2rem; backdrop-filter: blur(5px); } .pc-header.on .nav .li .tit { line-height: 2.2rem; } .pc-header.on .op1 { opacity: 0; } .pc-header.on .op2 { opacity: 1; } .pc-header.on .nav .li .tit a { color: #333; } .pc-header.on .nav .li .tit::after { background-color: #333; } .pc-header.on .nav .li.cur .tit>a { color: #F23840; } .pc-header.on .right-btn .search svg { fill: #333; } .pc-header.on .right-btn .litip { color: #333; } .pc-header.on .right-btn .litip .icon { fill: #333; } .pc_seachbox { position: absolute; top: 0; width: calc(100% - 11.5rem); right: 4.5rem; height: 2.2rem; background-color: rgba(255, 255, 255, .9); backdrop-filter: blur(5px); z-index: 999; /* background-image: url(../img/ha1.png); */ background-position: center; background-repeat: no-repeat; display: none; background-size: auto; } .zk_search_wrap { width: 50%; margin: 0 auto; /* padding: 2rem 0 1.25rem; */ } .head_seachbox { position: relative; line-height: 1.15rem; height: 1.2rem; margin-top: .5rem; } .head_seachbox .seach_input { border: 1px solid #999; box-sizing: border-box; padding: 0 4.5rem 0 1.75rem; background: url(../img/head_searchicon.7de0b5f.png) .5rem no-repeat; } .head_seachbox .seach_submit { position: absolute; right: 0; top: 0; width: 4rem; height: 100%; color: #fff; background-color: #F23840; transition: .4s; } .head_seachbox .seach_input input { font-size: .4rem; width: 100%; background-color: transparent; } .head_seachbox .seach_submit input { color: #fff; font-size: .45rem; cursor: pointer; width: 100%; background-color: transparent; height: 100%; } .header_nav_bg { width: 100%; height: 100%; position: fixed; left: 0; top: 0; background: rgba(0, 0, 0, .5); opacity: 0; pointer-events: none; transition: .4s; z-index: 100; } .header_nav_bg.header_nav_bg_on { opacity: 1; } .pc-header .right-btn .langbox.show .libox { transition: none; opacity: 1; visibility: visible; transform: translate(0, 0); } .pc-header .right-btn .langbox.show .litip .icon { transform: rotate(180deg); } @media (min-width: 997px) { .pc-header .right-btn .langbox:hover>a { color: #F23840; } .pc-header .right-btn .langbox:hover>a svg { transform: rotate(180deg); fill: #F23840; } .pc-header .right-btn .langbox:hover .libox { transition: none; opacity: 1; visibility: visible; transform: translate(0, 0); } }