@charset "utf-8"; /** * 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: 2; /* 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: #08c; } 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: "Microsoft Yahei", "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; } .clear { clear: both; } .f-cb { zoom: 1; } .f-cb:after { display: block; height: 0; clear: both; visibility: hidden; overflow: hidden; content: "."; } .fl { float: left; display: inline; } .fr { float: right; display: inline; } .por { position: relative; } .poa { position: absolute; } .pof { position: fixed; } .poa-f, .iwrap .ban .bg, .iwrap .ban .sign, .iwrap .history .main .image .scroll, .iwrap .products .list li .bg, .about-wrap .structure .main li .tips, .products-wrap li span.bg, .videoout, .videoout .bg, .jobsintro-wrap .tips .list li .bg, .jobsintro-wrap .tips .list li .hoverbg, .jobsintro-wrap .idea .list li .detail, .jobsintro-wrap .elfare .list li::after, .contact-wrap .map { 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; } .z1 { z-index: 1; } .z2 { z-index: 2; } .z3 { z-index: 3; } .dn { display: none; } .dib { display: inline-block; } .w-f { width: 100%; } .h-f { height: 100%; } .fwn { font-weight: normal; } .tac { text-align: center; } .t-f { -webkit-transition: all 0.5s; transition: all 0.5s; } .t-c { -webkit-transition: color 0.5s; transition: color 0.5s; } .t-bg { -webkit-transition: background 0.5s; transition: background 0.5s; } .loader { width: 50px; height: 50px; position: absolute; top: 50%; left: 50%; margin: -25px 0 0 -25px; font-size: 10px; border-top: 1px solid rgba(0, 0, 0, 0.08); border-right: 1px solid rgba(0, 0, 0, 0.08); border-bottom: 1px solid rgba(0, 0, 0, 0.08); border-left: 1px 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: 1px solid rgba(255, 255, 255, 0.08); border-right: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid rgba(255, 255, 255, 0.08); border-left: 1px 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); } } .history-wrap .year .list li::before { content: ""; height: 0; width: 0; overflow: hidden; } .page img { max-width: 100%; } .m { display: none; } @media screen and (max-width: 1023px) { .pc { display: none !important; } .m { display: block; } } footer .main { padding: 2.3% 5% 2.7% 7%; background-color: #2e3642; } footer .main .list { float: left; width: 52%; border-right: 1px solid #434a55; } footer .main .list li { float: left; width: 20%; } footer .main .list li a { display: block; width: 100%; font-size: 12px; line-height: 2; color: rgba(255, 255, 255, 0.8); -webkit-transition: all 0.5s; transition: all 0.5s; } footer .main .list li a.tit { margin-bottom: 15px; font-weight: bold; font-size: 14px; line-height: 2; color: #fff; } footer .main .list li a:hover { color: #fff; } footer .main .sharebox { float: left; width: 270px; font-size: 14px; line-height: 2; color: rgba(255, 255, 255, 0.8); margin-left: 60px; } footer .main .sharebox p { margin-bottom: 17px; text-align: left; } footer .main .sharebox .homelx b{ font-size: 28px; } footer .main .sharebox .selectbox { position: relative; width: 250px; border-radius: 3px; background-color: #ebebec; font-size: 12px; line-height: 38px; color: rgba(51, 51, 51, 0.8); cursor: pointer; } footer .main .sharebox .selectbox p { position: relative; padding: 0 15px; text-align: left; } footer .main .sharebox .selectbox p::after { content: ""; display: inline-block; position: absolute; right: 15px; top: 16px; width: 9px; height: 6px; background: url(../images/bg_sign03.png) no-repeat center; -webkit-transition: all 0.5s; transition: all 0.5s; } footer .main .sharebox .selectbox:hover p::after { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } footer .main .sharebox .selectbox .box { display: none; position: absolute; left: 0; bottom: 38px; width: 220px; padding: 10px 15px; border-radius: 3px; background-color: #ebebec; line-height: 1.5; } footer .main .sharebox .selectbox .box a { display: inline-block; width: 100%; color: #333; -webkit-transition: all 0.5s; transition: all 0.5s; } footer .main .sharebox .selectbox .box a:hover { color: #316db5; } footer .main .bdsharebuttonbox { margin-top: 20px; } footer .main .bdsharebuttonbox a { display: inline-block; float: right; width: 45px; height: 45px; padding: 0; margin: 0; margin-left: 20px; background: url(../images/bg_sign04.png) no-repeat center top; } footer .main .bdsharebuttonbox a:nth-child(1) { background-position: center 0px; } footer .main .bdsharebuttonbox a:nth-child(2) { background-position: center -45px; } footer .main .bdsharebuttonbox a:nth-child(3) { background-position: center -90px; } @media screen and (max-width: 1023px) { footer .main { padding: 5%; } footer .main .list { float: none; width: 100%; height: auto; border-right: 0; } footer .main .list li a.tit { margin-bottom: 0; } footer .main .sharebox { margin-top: -7%; } } footer .bot { border-top: 1px solid #434a55; background-color: #282f3a; font-size: 12px; line-height: 58px; color: #fff; text-align: center; } footer .bot p:first-child { float: left; } footer .bot p:last-child { float: right; } footer .bot a { color: #fff; -webkit-transition: all 0.5s; transition: all 0.5s; } footer .bot a:hover { color: #316db5; } @media screen and (max-width: 1023px) { footer .bot { padding: 5%; line-height: 2; } footer .bot p { float: none !important; text-align: center; } } img.backtop { /*position: absolute; left: 50%; bottom: 25px; margin-left: -25px;*/ cursor: pointer; -webkit-transition: all 0.5s; transition: all 0.5s; } img.backtop:hover { opacity: .8; } @media screen and (max-width: 1023px) { img.backtop { /*bottom: 5px;*/ } } .iwrap a.more, .about-wrap .team .box a { display: block; width: 53%; min-width: 200px; margin-top: 20%; border: 1px solid #316db5; background-color: #316db5; font: bold 18px/70px Arial; color: #fff; text-align: center; text-transform: uppercase; -webkit-transition: all 0.5s; transition: all 0.5s; } .about-wrap .team .box a { margin-top: 10%; line-height: 60px; } .iwrap a.more:hover, .about-wrap .team .box a:hover { background: none; color: #316db5; } @media screen and (max-width: 1023px) { .iwrap a.more, .about-wrap .team .box a { width: 150px !important; min-width: 0; font-size: 14px; line-height: 36px; } } .iwrap .ban { position: relative; overflow: hidden; height: 683px; padding-top: 120px; } .iwrap .ban .bg { opacity: 0; } .iwrap .ban .bg .move { position: relative; left: 0; } .iwrap .ban .bg img { float: left; } .iwrap .ban .sign .move { position: relative; left: 0; } .iwrap .ban .sign .part { position: relative; overflow: hidden; float: left; width: 1920px; height: 682px; } .iwrap .ban .sign .part .smoke { position: absolute; left: -1041px; top: 72%; width: 1041px; height: 23px; background-repeat: no-repeat; background-position: right center; } @media screen and (max-width: 1023px) { .iwrap .ban .sign .part { height: 340px; } } .iwrap .ban .sign .part2 .smoke, .iwrap .ban .sign .part3 .smoke { background-image: url(../images/smoke01.png); } .iwrap .ban .car { position: absolute; left: 50%; top: 66.7%; width: 140px; height: 58px; background: url(../images/car.png) no-repeat left center; margin-left: -70px; } .iwrap .ban .btns { position: absolute; left: 0; bottom: 0; width: 100%; height: 18px; padding: 8px 0; background: rgba(255, 255, 255, 0.5); text-align: center; } .iwrap .ban .btns span { display: inline-block; position: relative; width: 16px; height: 16px; border: 1px solid #a1a1a1; border-radius: 50%; margin: 0 8px; cursor: pointer; -webkit-transition: all 0.5s; transition: all 0.5s; } .iwrap .ban .btns span.cur { border-color: #316db5; background-color: #316db5; } @media screen and (max-width: 1023px) { .iwrap .ban { height: 340px; } .iwrap .ban .bg { -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; -webkit-transform: scale(0.5); -ms-transform: scale(0.5); transform: scale(0.5); } .iwrap .ban .bg .move { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .iwrap .ban .car { top: 62%; } } .iwrap .about { padding: 7.8% 0 18%; background-color: #f6f6f6; } @media screen and (max-width: 1023px) { .iwrap .about { padding-bottom: 30%; } } .iwrap .about .main { position: relative; width: 75%; margin: 0 auto; } .iwrap .about .main > * { position: relative; opacity: 0; -webkit-transform: translateY(5%); -ms-transform: translateY(5%); transform: translateY(5%); } .iwrap .about .main > img { float: right; width: 66.5%; -webkit-transform: translate(10%, 0); -ms-transform: translate(10%, 0); transform: translate(10%, 0); opacity: 0; -webkit-transition: all 0.5s; transition: all 0.5s; } @media screen and (max-width: 1200px) { .iwrap .about .main > img { width: 60%; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } } .iwrap .about .main > img.show { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; } .iwrap .about .main h2 { font: bold 55px/62px Arial; color: #316db5; } .iwrap .about .main h2 span { font-weight: normal; font-size: 40px; color: #000; } .iwrap .about .main h3 { font-size: 24px; line-height: 42px; color: #666; } .iwrap .about .main .tips { position: absolute; left: 0; top: 26%; width: 40.5%; height: 70%; padding: 4% 8.7% 0 0; background-color: #f6f6f6; font-size: 14px; } .iwrap .about .main .tips p.tit { position: relative; padding: 6px 0 6px 17.5%; font-size: 24px; line-height: 1.5; color: #666; } .iwrap .about .main .tips p.tit::before { content: ""; display: inline-block; position: absolute; left: 2px; top: 23px; width: 13.6%; height: 1px; background-color: #000; } .iwrap .about .main .tips p.en { font: 18px/28px Arial; color: #b7b7b7; } @media screen and (max-width: 1365px) { .iwrap .about .main .tips { top: 30%; padding-top: 2%; } } @media screen and (max-width: 1200px) { .iwrap .about .main .tips { position: relative; top: 0; padding-top: 4%; } .iwrap .about .main .tips a.more { width: 60%; margin-top: 10%; } } @media screen and (max-width: 1200px) { .iwrap .about .main { width: 90%; } } @media screen and (max-width: 1023px) { .iwrap .about .main h2 { font-size: 28px; line-height: 32px; } .iwrap .about .main h2 span { font-size: 20px; } .iwrap .about .main h3 { font-size: 14px; line-height: 24px; } .iwrap .about .main .tips { position: absolute; top: 58px; width: 61%; } .iwrap .about .main .tips p.tit { font-size: 14px; } .iwrap .about .main .tips p.en { font-size: 12px; line-height: 22px; } } .iwrap .history { position: relative; padding-bottom: 12%; } .iwrap .history .main { position: relative; z-index: 2; padding: 0 5% 0 57.5%; font-size: 14px; line-height: 2; color: #666; } @media screen and (max-width: 1200px) { .iwrap .history .main { padding-right: 8%; } } .iwrap .history .main > * { position: relative; opacity: 0; -webkit-transform: translateY(10%); -ms-transform: translateY(10%); transform: translateY(10%); } .iwrap .history .main .image { position: absolute; left: 0; top: -15.7%; width: 53%; } .iwrap .history .main .image .scroll { overflow: hidden; } .iwrap .history .main .image .scroll li { float: left; } .iwrap .history .main h2 { position: relative; z-index: 2; padding: 0 0 13px 35px; font-size: 24px; line-height: 35px; color: #666; } .iwrap .history .main h3 { position: relative; z-index: 2; margin: 20px 0; font: 50px/1 Arial; color: #000; text-transform: uppercase; } .iwrap .history .main h3 b { color: #316db5; } .iwrap .history .main .list { position: relative; overflow: hidden; top:-60px; } .iwrap .history .main .list li { float: left; width: 100%; height: 337px; } .iwrap .history .main .list .year { font-size: 24px; line-height: 65px; color: #999; } .iwrap .history .main .list a{ margin-top: 40px !important; } .iwrap .history .main a.more { margin-top: 0; } .iwrap .history .main .btns { position: absolute; top: 51%; left: 0; width: 53%; } @media screen and (max-width: 1439px) { .iwrap .history .main .btns { top: 30%; left: 0; width: 53%; } } .iwrap .history .main .btns .btn { width: 82px; height: 42px; border: 1px solid #316db5; cursor: pointer; -webkit-transition: all 0.5s; transition: all 0.5s; } .iwrap .history .main .btns .btn.prev { background: url(../images/prev01.png) no-repeat right center; float: right; } .iwrap .history .main .btns .btn.prev:hover { background-color: #316db5; background-position: left center; } .iwrap .history .main .btns .btn.next { background: url(../images/next01.png) no-repeat left center; float: left; } .iwrap .history .main .btns .btn.next:hover { background-color: #316db5; background-position: right center; } @media screen and (max-width: 1023px) { .iwrap .history { padding-top: 9%; } .iwrap .history .main { width: 90%; padding: 0 5%; } .iwrap .history .main .image { position: relative; left: 0; top: 0; width: 100%; } .iwrap .history .main h2 { padding: 0; font-size: 18px; text-align: center; } .iwrap .history .main h3 { margin-left: 0; font-size: 26px; text-align: center; } .iwrap .history .main .list .year { font-size: 24px; line-height: 1.5; } .iwrap .history .main .btns { left: 2%; top: 30%; width: 96%; } .iwrap .history .main .btns .btn.prev { float: right; } .iwrap .history .main a.more { display: block; margin: 0 auto; } } .iwrap .news { position: relative; overflow: hidden; padding: 8% 0 0; } @media screen and (max-width: 1023px) { .iwrap .news { padding-bottom: 60px; } } .iwrap .product .main { width: 92%; margin: 0 auto; } .iwrap .news .main { width: 92%; margin: 0 auto; } .title { margin-bottom: 2%; } .title h2 { position: relative; font: 36px/62px "华文中宋", Arial; color: #666; text-align: center; text-transform: uppercase; } .title h2 span { display: inline-block; position: relative; z-index: 2; padding: 0 16px; background-color: #fff; } .title h2::before, .title h2::after { content: ""; display: inline-block; position: absolute; top: 31px; width: 32%; height: 1px; background-color: #cecece; } .title h2::before { left: 9%; } .title h2::after { right: 9%; } @media screen and (max-width: 1023px) { .title h2 { font-size: 18px; line-height: 2; } .title h2::before, .title h2::after { top: 17px; } } .title h3 { position: relative; font-size: 24px; line-height: 64px; color: #666; text-align: center; } @media screen and (max-width: 1023px) { .title h3 { font-size: 20px; line-height: 2; } } .title h3::before { content: ""; display: inline-block; position: absolute; left: 50%; top: 0; width: 48px; height: 3px; background-color: #666; margin-left: -24px; } .iwrap .news li { float: left; width: 31.3%; margin: 0 1%; position: relative; opacity: 0; left: 10%; } @media screen and (max-width: 1023px) { .iwrap .news li { width: 100%; margin: 0 0 5%; } } .iwrap .news li a { display: block; width: 100%; font-size: 14px; line-height: 24px; color: #666; -webkit-transition: all 0.5s; transition: all 0.5s; } .iwrap .news li a.tit { margin: 14px 0; font-size: 18px; line-height: 2; color: #333; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } @media screen and (max-width: 1023px) { .iwrap .news li a.tit { margin-bottom: 0; font-size: 16px; } } .iwrap .news li a:hover { color: #316db5; } .iwrap .news .btn { margin: 5% auto; text-align: center; } .iwrap .news .btn a { width: 20%; margin: auto; } .about-wrap .intro { padding: 5.2% 0 8.75%; background: url(../images/bg_bg01.jpg) no-repeat center/cover; font-size: 16px; line-height: 30px; color: #fff; } .about-wrap .intro.jobs-intro { background-image: url(../images/bg_bg03.jpg); } .about-wrap .intro h2 { font-size: 48px; line-height: 82px; color: #fff; text-align: center; } .about-wrap .intro h3 { margin-bottom: 6.7%; font-size:48px; color: #fff; text-align: center; text-transform: uppercase; } .about-wrap .intro h3 span { display: inline-block; position: relative; } .about-wrap .intro h3 span::before, .about-wrap .intro h3 span::after { content: ""; display: inline-block; position: absolute; top: 50%; width: 104px; height: 1px; background-color: rgba(255, 255, 255, 0.3); } .about-wrap .intro h3 span::before { left: -135px; } .about-wrap .intro h3 span::after { right: -135px; } .about-wrap .intro .main { width: 1100px; margin: 0 auto; } .about-wrap .intro .main a { display: block; width: 29%; background-color: #316db5; margin: 6% auto 0; font: 16px/72px Arial; color: #fff; text-align: center; text-transform: uppercase; -webkit-transition: all 0.5s; transition: all 0.5s; } .about-wrap .intro .main a:hover { background-color: #fff; color: #316db5; } @media screen and (max-width: 1279px) { .about-wrap .intro h3 { margin-bottom: 5%; } .about-wrap .intro .main { width: 90%; } } @media screen and (max-width: 1023px) { .about-wrap .intro { font-size: 14px; line-height: 1.5; } .about-wrap .intro h2 { font-size: 24px; line-height: 2; } .about-wrap .intro h3 { font-size: 16px; } .about-wrap .intro h3 span::before, .about-wrap .intro h3 span::after { width: 52px; } .about-wrap .intro h3 span::before { left: -70px; } .about-wrap .intro h3 span::after { right: -70px; } .about-wrap .intro .main a { width: 120px; font-size: 14px; line-height: 36px; } } .about-wrap .team { position: relative; padding: 5% 0; } @media screen and (max-width: 1023px) { .about-wrap .team { padding: 8% 0; } } .about-wrap .team > img { position: absolute; -webkit-transition: all 0.5s; transition: all 0.5s; } .about-wrap .team > img:nth-child(1) { left: 4.7%; top: 19.6%; width: 10.3%; } .about-wrap .team > img:nth-child(2) { left: 4.7%; top: 46.5%; width: 15.2%; } .about-wrap .team > img:nth-child(3) { right: 4.6%; top: 5%; width: 15.2%; } .about-wrap .team > img:nth-child(4) { right: 4.6%; top: 71%; width: 10.3%; } .about-wrap .team .box-wrap { position: relative; z-index: 2; } .about-wrap .team .box-wrap .box { position: relative; width: 78%; margin: 0 auto; } .about-wrap .team .box-wrap .box .tips { width: 420px; padding-left: 145px; font-size: 16px; line-height: 30px; color: #666; } .about-wrap .team .box-wrap .box .tips p.en { padding-left: 75px; font: 16px/20px Arial; color: #000; } .about-wrap .team .box-wrap .box .tips h2 { position: relative; padding-left: 122px; font-size: 24px; line-height: 2; color: #666; } .about-wrap .team .box-wrap .box .tips h2::before { content: ""; display: inline-block; position: absolute; left: 0; top: 50%; width: 95px; height: 1px; background-color: #000; } .about-wrap .team .box-wrap .box .tips h3 { margin-bottom: 20px; font: 40px/62px Arial; color: #000; text-transform: uppercase; } .about-wrap .team .box-wrap .box .tips h3 b { color: #316db5; } .about-wrap .team .box-wrap .box:nth-child(1) { margin-bottom: 4.6%; } .about-wrap .team .box-wrap .box:nth-child(1) .tips { float: left; } @media screen and (max-width: 1500px) { .about-wrap .team .box-wrap .box:nth-child(1) .tips { padding-left: 45px; } } @media screen and (max-width: 1200px) { .about-wrap .team .box-wrap .box:nth-child(1) .tips { width: 350px; padding-left: 0; } } .about-wrap .team .box-wrap .box:nth-child(1) img { float: right; width: 47%; margin: 6% 3% 0 0; } .about-wrap .team .box-wrap .box:nth-child(2) .tips { float: right; padding-left: 0; margin-right: 22.5%; } @media screen and (max-width: 1500px) { .about-wrap .team .box-wrap .box:nth-child(2) .tips { margin-right: 0; } } .about-wrap .team .box-wrap .box:nth-child(2) img { float: left; width: 42%; margin-top: 6%; } .about-wrap .team .box-wrap .box:nth-child(2) img.pc { float: none; position: absolute; left: 34%; top: 72%; width: 14.8%; margin-top: 0; } @media screen and (max-width: 1023px) { .about-wrap .team .box-wrap .box { width: 90%; } .about-wrap .team .box-wrap .box .tips { float: none; width: 100%; padding-left: 0; } .about-wrap .team .box-wrap .box .tips p.en { padding-left: 40px; } .about-wrap .team .box-wrap .box .tips h2 { padding-left: 60px; font-size: 20px; line-height: 2; } .about-wrap .team .box-wrap .box .tips h2::before { width: 50px; } .about-wrap .team .box-wrap .box .tips h3 { margin-bottom: 5%; font-size: 22px; line-height: 1.5; } .about-wrap .team .box-wrap .box img { float: none !important; width: 100% !important; margin: 5% 0 !important; } } .about-wrap .structure .title { position: relative; overflow: hidden; padding: 2.8% 0 4.3%; background-color: #797979; text-align: center; } .about-wrap .structure .title h2 { font-size: 48px; line-height: 96px; color: #fff; text-align: center; font-family: YaHei !important; display: inline-block; } .about-wrap .structure .title h2::before, .about-wrap .structure .title h2::after{ top: 50px; width: 104px; } .about-wrap .structure .title h2::before{ left: -130px; } .about-wrap .structure .title h2::after{ right: -130px; } .about-wrap .structure .title h3 { font: 30px/46px "华文中宋", Arial; color: #fff; text-align: center; text-transform: uppercase; } .about-wrap .structure .title h3 span { display: inline-block; position: relative; } .about-wrap .structure .title h3 span::before, .about-wrap .structure .title h3 span::after { content: ""; display: inline-block; position: absolute; top: 50%; width: 104px; height: 1px; background-color: #a1a1a1; } .about-wrap .structure .title h3 span::before { left: -125px; } .about-wrap .structure .title h3 span::after { right: -125px; } @media screen and (max-width: 1023px) { .about-wrap .structure .title h2 { font-size: 24px; line-height: 2; } .about-wrap .structure .title h3 { font-size: 16px; line-height: 2; } } .about-wrap .structure .main { padding: 5% 0 6.6%; } .about-wrap .structure .main .list { position: relative; width: 1208px; padding-top: 293px; margin: 0 auto; } @media screen and (max-width: 1279px) { .about-wrap .structure .main .list { width: 90%; } } .about-wrap .structure .main .box { position: absolute; width: 120px; left: 50%; top: 0; height: 122px; padding: 0 1px; margin-left: -73px; border: 12px solid #316db5; border-radius: 50%; font-size: 14px; line-height: 24px; color: #316db5; text-align: center; } .about-wrap .structure .main .box::after { content: ""; display: inline-block; position: absolute; left: 50%; top: calc(100% + 12px); width: 3px; height: 82px; background-color: #ccc; margin-left: -1px; } .about-wrap .structure .main .box .dtb { display: table; height: 122px; } .about-wrap .structure .main .box .dtb span { display: table-cell; vertical-align: middle; } .about-wrap .structure .main .in { position: relative; } .about-wrap .structure .main .in::before, .about-wrap .structure .main .in::after { content: ""; display: inline-block; position: absolute; top: -50%; width: calc(50% - 66px); height: 2px; background-color: #ccc; } .about-wrap .structure .main .in::before { left: 66px; } .about-wrap .structure .main .in::after { right: 66px; } .about-wrap .structure .main li { position: relative; float: left; width: 118px; height: 118px; padding: 7px; border-radius: 50%; background-color: #316db5; cursor: pointer; } .about-wrap .structure .main li:nth-child(2) { margin: 0 calc(50% - 198px); } .about-wrap .structure .main li::before { content: ""; display: inline-block; position: absolute; left: 50%; top: -50%; width: 1px; height: 50%; background-color: #ccc; } .about-wrap .structure .main li img { opacity: 0; -webkit-transition: all 0.5s; transition: all 0.5s; } .about-wrap .structure .main li:hover img { opacity: 1; } .about-wrap .structure .main li .tips .dtb { width: 118px; height: 118px; margin: 7px; } .about-wrap .structure .main li .tips .dtb span { display: table-cell; vertical-align: middle; height: 118px; font-size: 14px; line-height: 24px; color: #fff; text-align: center; } @media screen and (max-width: 1023px) { .about-wrap .structure .main { padding: 8% 0; } .about-wrap .structure .main .list { width: 120%; padding-top: 250px; margin-left: -10%; -webkit-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); } .about-wrap .structure .main .box::after { height: 40px; } } .history-wrap .year { position: relative; overflow: hidden; padding: 2.5% 0; padding-left: 18.5%; background-color: #316db5; } @media screen and (max-width: 1365px) { .history-wrap .year { padding-left: 5%; } } .history-wrap .year .tips { float: left; } .history-wrap .year .tips h3 { position: relative; padding-left: 122px; font-size: 24px; line-height: 2; color: #fff; } .history-wrap .year .tips h3::after { content: ""; display: inline-block; position: absolute; left: 2px; top: 50%; width: 96px; height: 2px; background-color: #fff; margin-top: -1px; } .history-wrap .year .tips p.en { font: 40px/64px Arial; color: #fff; text-transform: uppercase; } @media screen and (max-width: 1023px) { .history-wrap .year .tips h3 { padding-left: 60px; font-size: 16px; } .history-wrap .year .tips h3::after { width: 48px; height: 1px; } .history-wrap .year .tips p.en { font-size: 20px; line-height: 32px; } } .history-wrap .year .list { float: left; margin: 70px 0 0 65px; } @media screen and (max-width: 1365px) { .history-wrap .year .list { margin-left: 30px; } } @media screen and (max-width: 1023px) { .history-wrap .year .list { margin: 0; } } .history-wrap .year .list li { position: relative; float: left; margin-right: 58px; font-size: 16px; line-height: 2; color: #ccc; cursor: pointer; -webkit-transition: all 0.5s; transition: all 0.5s; } .history-wrap .year .list li::before { content: ""; display: inline-block; position: absolute; left: 50%; top: 45px; border-bottom: 6px solid #fff; border-left: 6px dashed transparent; border-right: 6px dashed transparent; margin-left: -6px; opacity: 0; -webkit-transition: all 0.5s; transition: all 0.5s; } .history-wrap .year .list li::after { content: ""; display: inline-block; position: absolute; right: -36px; top: 50%; width: 14px; height: 1px; background-color: #6592c8; } .history-wrap .year .list li:last-child { margin-right: 0; } .history-wrap .year .list li:last-child::after { display: none; } .history-wrap .year .list li:hover, .history-wrap .year .list li.cur { color: #fff; } .history-wrap .year .list li:hover::before, .history-wrap .year .list li.cur::before { opacity: 1; } @media screen and (max-width: 1365px) { .history-wrap .year .list li { margin-right: 45px; } .history-wrap .year .list li::after { right: -29px; } } @media screen and (max-width: 1023px) { .history-wrap .year .list li { margin-right: 40px; } .history-wrap .year .list li:nth-child(4n) { margin-right: 0; } .history-wrap .year .list li:nth-child(4n)::after { display: none; } .history-wrap .year .list li::before { display: none; } } .history-wrap > .list li { position: relative; height: 385px; padding-top: 5.5%; font-size: 14px; line-height: 2; color: #666; padding-left: 57%; } .history-wrap > .list li h2 { font-size: 48px; line-height: 2; color: #999; } .history-wrap > .list li h2, .history-wrap > .list li p { min-width: 225px; } .history-wrap > .list li .image { position: absolute; left: 0; top: 0; width: 50%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; } .history-wrap > .list li:nth-child(2n) { padding-left: 7.5%; padding-right: 73.4%; } .history-wrap > .list li:nth-child(2n) .image { left: auto; right: 0; } @media screen and (max-width: 1023px) { .history-wrap > .list li { width: 90%; height: auto; padding: 5% !important; line-height: 1.8; } .history-wrap > .list li h2 { font-size: 24px; } .history-wrap > .list li .image { position: relative; width: 100%; margin-top: 5%; } } .products-wrap { background-color: #2e3642; } .products-wrap li { float: left; position: relative; width: 25%; opacity: 0; -webkit-transition: all 1s; transition: all 1s; } .products-wrap li:nth-child(1) { -webkit-transition-delay: 0.44493s; transition-delay: 0.44493s; } .products-wrap li:nth-child(2) { -webkit-transition-delay: 0.49482s; transition-delay: 0.49482s; } .products-wrap li:nth-child(3) { -webkit-transition-delay: 0.31021s; transition-delay: 0.31021s; } .products-wrap li:nth-child(4) { -webkit-transition-delay: 0.28068s; transition-delay: 0.28068s; } .products-wrap li span { display: inline-block; } .products-wrap li span.bg { background-color: rgba(0, 0, 0, 0.6); -webkit-transition: all 0.5s; transition: all 0.5s; } .products-wrap li span.tips { position: absolute; left: 0; top: 31.6%; width: 100%; font-size: 28px; line-height: 44px; color: #fff; } .products-wrap li span.num { width: 72px; background-color: rgba(0, 0, 0, 0.5); margin-bottom: 2.5%; font: 48px/98px Helvetica, Arial; color: #fff; text-align: center; } .products-wrap li span.sign { position: relative; width: 40px; height: 40px; background: url(../images/bg_sign05.png) no-repeat center; margin: 8% 0 0 3%; } .products-wrap li span.sign::after { content: ""; display: inline-block; position: absolute; left: 0; top: 0; width: 40px; height: 40px; background: url(../images/bg_sign06.png) no-repeat center; -webkit-transition: all 0.5s; transition: all 0.5s; } .products-wrap li p { padding-left: 3%; } .products-wrap li p.en { font: 18px/28px Arial; opacity: .6; text-transform: uppercase; } .products-wrap li.show { opacity: 1; } .products-wrap li.show:hover span.bg { opacity: 0; } .products-wrap li.show:hover span.sign::after { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } @media screen and (max-width: 1366px) { .products-wrap li span.tips { font-size: 20px; } .products-wrap li span.num { font-size: 38px; line-height: 2; } .products-wrap li p.en { font-size: 16px; } } @media screen and (max-width: 1023px) { .products-wrap li { width: 100%; } } .path { margin-bottom: 4.5%; font-size: 14px; line-height: 24px; color: #666; } .path a { display: inline-block; color: #666; -webkit-transition: all 0.5s; transition: all 0.5s; } .path a:hover { color: #5083c0; } .path b { margin: 0 8px; font-family: "\5b8b\4f53"; } .path span { color: #5083c0; } .pdlist-wrap { position: relative; overflow: hidden; padding: 2.5% 2.3% 2.8%; } @media screen and (max-width: 1023px) { .pdlist-wrap { padding: 8% 5%; } } .pdlist-wrap::before { content: ""; display: inline-block; position: absolute; left: 0; top: -1px; width: 100%; height: 1px; box-shadow: 0 0 15px #000; } .pdlist-wrap .list li { float: left; width: 20%; margin: 0 2.5% 5%; position: relative; opacity: 0; left: 10%; } .pdlist-wrap .list li.show { left: 0; opacity: 1; } .pdlist-wrap .list li a { display: inline-block; width: 100%; height: 100%; } .pdlist-wrap .list li p { position: relative; padding: 5.5% 5% 15%; font-size: 24px; line-height: 30px; color: #000; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .pdlist-wrap .list li p::after { content: ""; display: inline-block; position: absolute; left: 50%; top: 70%; width: 9px; height: 13px; background: url(../images/bg_sign07.png) no-repeat center; } @media screen and (max-width: 1439px) { .pdlist-wrap .list li p { font-size: 18px; } } @media screen and (max-width: 1024px) { .pdlist-wrap .list li p { font-size: 16px; } } .pdlist-wrap .list li:nth-child(2n) p { padding: 11.5% 5% 9%; } .pdlist-wrap .list li:nth-child(2n) p::after { top: 85%; } .pdlist-wrap .list li img { -webkit-transition: all 0.5s; transition: all 0.5s; } .pdlist-wrap .list li span { display: block; position: relative; width: 104px; margin: 10.5% auto 0; border-top: 1px solid #316db5; border-right: 1px solid #fff; border-bottom: 1px solid #316db5; border-left: 1px solid #fff; font: 14px/24px Arial; color: #316db5; text-transform: uppercase; text-align: center; -webkit-transition: all 0.5s; transition: all 0.5s; } .pdlist-wrap .list li:hover img { box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); } .pdlist-wrap .list li:hover span { border-color: #316db5; background-color: #316db5; color: #fff; } @media screen and (max-width: 1023px) { .pdlist-wrap .list li { width: 100%; margin: 0 0 5%; } .pdlist-wrap .list li p { padding: 5% !important; } .pdlist-wrap .list li p::after { display: none; } } .pdlist-wrap .btn { text-align: center; } .pdlist-wrap .btn span { display: inline-block; position: relative; padding: 0 35px 0 15px; border-top: 1px solid #316db5; border-bottom: 1px solid #316db5; background-image: url(../images/bg_sign08.png); background-repeat: no-repeat; background-position: 100px center; font-size: 14px; line-height: 34px; color: #316db5; -webkit-transition: all 0.5s; transition: all 0.5s; cursor: pointer; } .pdlist-wrap .btn span:hover { background-position: right center; } .pdinfo-wrap { position: relative; overflow: hidden; background-color: #eee; } .pdinfo-wrap::before { content: ""; display: inline-block; position: absolute; left: 0; top: -1px; z-index: 2; width: 100%; height: 1px; box-shadow: 0 0 15px #000; } .pdinfo-wrap .image { position: absolute; left: 0; top: 0; width: 50%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; } @media screen and (max-width: 1279px) { .pdinfo-wrap .image { width: 40%; } } @media screen and (max-width: 1023px) { .pdinfo-wrap .image { position: relative; width: 100%; background: none !important; } } .pdinfo-wrap .tips { float: right; width: 42%; padding: 2.4% 4.68% 4.5% 0; } .pdinfo-wrap .tips .path { margin-bottom: 0; text-align: right; } .pdinfo-wrap .tips .path span { font-weight: bold; } .pdinfo-wrap .tips h2 { padding: 2.2% 0 1.2%; border-bottom: 1px solid #a9a4aa; margin-bottom: 1.5%; font-size: 26px; line-height: 2; color: #316db5; } .pdinfo-wrap .tips td { padding: 0 0 5px 10px; font-size: 14px; line-height: 30px; color: #666; } .pdinfo-wrap .tips td b { display: inline-block; font-size: 18px; line-height: 30px; color: #666; } .pdinfo-wrap .tips td span { /*padding-left: 70px;*/ } .pdinfo-wrap .tips .btn { border-top: 1px solid #a9a4aa; margin-top: 10px; padding-top: 15px; } .pdinfo-wrap .tips .btn > a { display: inline-block; float: left; width: 38px; height: 38px; border: 1px solid #bbb; margin: 0 5px; -webkit-transition: all 0.5s; transition: all 0.5s; } .pdinfo-wrap .tips .btn > a.prev { background: url(../images/prev02.png) no-repeat center; } .pdinfo-wrap .tips .btn > a.next { background: url(../images/next02.png) no-repeat center; } .pdinfo-wrap .tips .btn > a:hover { border-color: #316db5; background-color: #316db5; } .pdinfo-wrap .tips .btn .share { float: right; padding-right: 24%; font: 18px/40px Arial; color: #666; } .pdinfo-wrap .tips .btn .share span { float: left; } .pdinfo-wrap .tips .btn .share a { width: 21px; height: 40px; padding: 0; margin: 0 8px; background: url(../images/bg_sign09.png) no-repeat center top; } .pdinfo-wrap .tips .btn .share a:last-child { background-position: center bottom; } @media screen and (max-width: 1279px) { .pdinfo-wrap .tips { width: 50%; } } @media screen and (max-width: 1023px) { .pdinfo-wrap .tips { float: none; width: 90%; padding: 5%; } .pdinfo-wrap .tips .path { text-align: left; } .pdinfo-wrap .tips h2 { font-size: 20px; margin-bottom: 3%; } .pdinfo-wrap .tips td { width: 100%; float: left; } .pdinfo-wrap .tips td b { font-size: 16px; } .pdinfo-wrap .tips .btn .share { padding-right: 0; } } .news-wrap .ban { height: 360px; background-attachment: fixed !important; } .news-wrap .ban h2 { padding-top: 102px; font-size: 48px; line-height: 82px; color: #fff; text-align: center; } .news-wrap .ban p { font-size: 48px; line-height: 360px; color: #fff; text-align: center; text-transform: uppercase; } .news-wrap .ban p span { display: inline-block; position: relative; } .news-wrap .ban p span::before, .news-wrap .ban p span::after { content: ""; display: inline-block; position: absolute; top: 50%; width: 104px; height: 1px; background-color: rgba(255, 255, 255, 0.3); } .news-wrap .ban p span::before { left: -168px; } .news-wrap .ban p span::after { right: -168px; } @media screen and (max-width: 1023px) { .news-wrap .ban { height: auto; padding: 5.5% 0 6%; background: url(../images/bg_bg02m.jpg) no-repeat center/cover; } .news-wrap .ban h2 { padding-top: 0; font-size: 26px; line-height: 2; } .news-wrap .ban p { font-size: 18px; } .news-wrap .ban p span::before, .news-wrap .ban p span::after { width: 52px; } .news-wrap .ban p span::before { left: -84px; } .news-wrap .ban p span::after { right: -84px; } } .news-wrap menu { padding: 0; margin: 0; border-bottom: 1px solid #d6d6d6; text-align: center; } .news-wrap menu a { display: inline-block; position: relative; padding: 0 27px; font-size: 14px; line-height: 72px; color: #666; -webkit-transition: all 0.5s; transition: all 0.5s; } .news-wrap menu a::before { content: ""; display: inline-block; position: absolute; left: 0; top: 50%; width: 1px; height: 14px; background-color: #b9b9b9; margin-top: -7px; } .news-wrap menu a:first-child::before { display: none; } .news-wrap menu a::after { content: ""; display: inline-block; position: absolute; left: 50%; bottom: 0; width: 58px; height: 6px; background-color: #666; margin-left: -29px; opacity: 0; -webkit-transition: all 0.5s; transition: all 0.5s; } .news-wrap menu a:hover, .news-wrap menu a.cur { color: #316db5; } .news-wrap menu a:hover::after, .news-wrap menu a.cur::after { bottom: -1px; opacity: 1; background-color: #316db5; } @media screen and (max-width: 1023px) { .news-wrap menu a { font-size: 16px; line-height: 52px; } .news-wrap menu a::after { height: 3px; } } .news-wrap .list { width: 1205px; padding: 3.75% 0 6%; margin: 0 auto; } @media screen and (max-width: 1279px) { .news-wrap .list { width: 90%; } } .news-wrap .list li { position: relative; margin-bottom: 40px; } .news-wrap .list li img { float: left; width: 30%; } @media screen and (max-width: 1023px) { .news-wrap .list li img { float: none; width: 100%; margin-bottom: 5%; } } .news-wrap .list li .tips { position: absolute; right: 0; top: 0; width: 62.5%; height: 100%; padding-right: 3.5%; border-bottom: 1px solid #e0e0e0; } .news-wrap .list li .tips a { display: inline-block; font-size: 14px; line-height: 30px; color: #666; } .news-wrap .list li .tips a.tit { float: left; width: 74%; height: 60px; padding-top: 2.4%; font-size: 18px; line-height: 30px; color: #333; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .news-wrap .list li .tips a.tit:hover{ color: #008fd7; } .news-wrap .list li .tips a.day { float: right; width: 72px; /* padding-right: 74px;*/ border: 1px solid #e0e0e0; background: #e0e0e0 url(../images/bg_sign10.png) no-repeat right 28px center; -webkit-transition: all 0.5s; transition: all 0.5s; } .news-wrap .list li .tips a.day p { padding-top: 10px; background-color: #fff; font: 36px/1 Arial; color: #666; text-align: center; } .news-wrap .list li .tips a.day span { display: inline-block; float: left; width: 100%; padding-bottom: 6px; background-color: #fff; font: 12px/20px Arial; color: #999; text-align: center; } .news-wrap .list li .tips a:last-child { margin-top: 15px; } .news-wrap .list li .tips:hover a.day { background-position: right 18px center; } @media screen and (max-width: 1023px) { .news-wrap .list li .tips { position: relative; width: 100%; height: auto; padding-bottom: 5%; } .news-wrap .list li .tips a { line-height: 24px; } .news-wrap .list li .tips a.tit { width: 100%; font-size: 16px; line-height: 24px; } .news-wrap .list li .tips a:last-child { margin-top: 0; } } .newsinfo-wrap { padding: 2.5% 2.8%; } @media screen and (max-width: 1023px) { .newsinfo-wrap { padding: 8% 0; } } .newsinfo-wrap .main { width: 1100px; margin: 0 auto; } @media screen and (max-width: 1279px) { .newsinfo-wrap .main { width: 90%; } } .newsinfo-wrap h2 { font-size: 18px; line-height: 30px; color: #333; text-align: center; } @media screen and (max-width: 1023px) { .newsinfo-wrap h2 { font-size: 16px; } } .newsinfo-wrap .time { padding-bottom: 5px; border-bottom: 1px solid #ccc; margin-bottom: 15px; font: 14px/2 Arial; color: #999; text-align: center; } .newsinfo-wrap .detail { font-size: 14px; line-height: 30px; color: #666; } .newsinfo-wrap .detail img { max-width: 100%; height: auto !important; } .newsinfo-wrap .turn { position: relative; margin-top: 30px; border-top: 1px solid #ccc; padding-top: 15px; font-size: 14px; line-height: 30px; color: #666; } .newsinfo-wrap .turn a { color: #666; -webkit-transition: all 0.5s; transition: all 0.5s; } .newsinfo-wrap .turn a:hover { color: #316db5; } .newsinfo-wrap .turn a.back { position: absolute; right: 10px; top: 15px; color: #316db5; } .jobs-wrap .main { width: 1205px; margin: 0 auto; } @media screen and (max-width: 1279px) { .jobs-wrap .main { width: 90%; } } .jobs-wrap .intro { padding: 3.5% 0 1.7%; border-bottom: 1px solid #e5e5e5; } .jobs-wrap .intro .tips { float: left; width: 29%; font-size: 16px; line-height: 2; color: #666; } @media screen and (max-width: 1023px) { .jobs-wrap .intro .tips { font-size: 14px; } } .jobs-wrap .intro .tips a { color: #666; -webkit-transition: all 0.5s; transition: all 0.5s; } .jobs-wrap .intro .tips a:hover { color: #316db5; } .jobs-wrap .intro .tips h2 { position: relative; padding-left: 120px; font-size: 24px; line-height: 2; color: #666; } .jobs-wrap .intro .tips h2::before { content: ""; display: inline-block; position: absolute; left: 0; top: 50%; width: 96px; height: 1px; background-color: #000; } @media screen and (max-width: 1023px) { .jobs-wrap .intro .tips h2 { padding-left: 60px; font-size: 18px; } .jobs-wrap .intro .tips h2::before { width: 48px; } } .jobs-wrap .intro .tips h3 { margin-bottom: 34px; font: 40px/64px Arial; color: #000; text-transform: uppercase; } .jobs-wrap .intro .tips h3 b { color: #316db5; } @media screen and (max-width: 1023px) { .jobs-wrap .intro .tips h3 { font-size: 24px; line-height: 2; } } .jobs-wrap .intro .search { float: right; width: 62%; padding-top: 48px; margin-right: 2.5%; font-size: 16px; line-height: 30px; color: #666; } @media screen and (max-width: 1023px) { .jobs-wrap .intro .search { padding-top: 5%; } } .jobs-wrap .intro .search a { color: #666; -webkit-transition: all 0.5s; transition: all 0.5s; } .jobs-wrap .intro .search a:hover { color: #316db5; } .jobs-wrap .intro .search span { font-size: 14px; color: #316db5; } @media screen and (max-width: 1023px) { .jobs-wrap .intro .search span { line-height: 24px; } } .jobs-wrap .intro .search form { position: relative; margin-top: 25px; } .jobs-wrap .intro .search form input { width: 600px; height: 42px; padding: 0 10px; border: 1px solid #ccc; border-radius: 10px; background-color: #f7f7f7; box-shadow: -3px 0 3px rgba(0, 0, 0, 0.1); font-size: 14px; line-height: 42px; color: #666; } .jobs-wrap .intro .search form input[type="submit"] { width: 150px; height: 44px; padding-left: 60px; background: #316db5 url(../images/bg_sign11.png) no-repeat 32px center; margin-left: -30px; box-shadow: none; color: #fff; } @media screen and (max-width: 1023px) { .jobs-wrap .intro .search form input { width: 80%; } .jobs-wrap .intro .search form input[type="submit"] { position: absolute; right: 0; } } @media screen and (max-width: 1279px) { .jobs-wrap .intro { padding: 3.5% 0 5%; } .jobs-wrap .intro .tips { float: none; width: 100%; } .jobs-wrap .intro .tips h3 { margin-bottom: 0; } .jobs-wrap .intro .search { float: none; width: 100%; margin-right: 0; } } .jobs-wrap .list { padding: 4% 0 6%; } .jobs-wrap .list li { position: relative; border: 1px solid #ccc; margin-bottom: 18px; } .jobs-wrap .list li .top { -webkit-transition: all 0.5s; transition: all 0.5s; } .jobs-wrap .list li .tips { float: left; box-sizing: border-box; width: 86%; padding: 1.4% 4.6% 1.4%; border-right: 1px solid #ccc; font-size: 16px; line-height: 30px; color: #333; } .jobs-wrap .list li .tips h2 { font-size: 20px; line-height: 48px; color: #316db5; } .jobs-wrap .list li .tips h2 span { position: relative; display: inline-block; margin-left: 25px; padding-left: 23px; font-size: 14px; line-height: 48px; color: #666; } .jobs-wrap .list li .tips h2 span::before { content: ""; display: inline-block; position: absolute; left: 0; top: 50%; width: 1px; height: 15px; background-color: #d6d6d6; margin-top: -8px; } @media screen and (max-width: 1023px) { .jobs-wrap .list li .tips { width: 80%; font-size: 12px; line-height: 2; } .jobs-wrap .list li .tips h2 { font-size: 18px; line-height: 2; } .jobs-wrap .list li .tips td { float: left; width: 50%; } } .jobs-wrap .list li .view { position: relative; float: right; width: 14%; padding-top: 0.4%; text-align: center; cursor: pointer; } .jobs-wrap .list li .view span { display: inline-block; padding-top: 48px; background: url(../images/bg_sign12.png) no-repeat center top; font-size: 16px; line-height: 1; color: #666; -webkit-transition: all 0.5s; transition: all 0.5s; } .jobs-wrap .list li .view:hover span { background-position: center 25%; color: #316db5; } .jobs-wrap .list li .view::after { opacity: 0; content: ""; display: inline-block; position: absolute; left: 50%; top: 70%; width: 0; height: 0; background: url(../images/close01.png) no-repeat center; -webkit-transition: all 0.5s; transition: all 0.5s; } @media screen and (max-width: 1023px) { .jobs-wrap .list li .view { padding-top: 5%; width: 20%; } .jobs-wrap .list li .view span { font-size: 14px; } } .jobs-wrap .list li .box { display: none; position: relative; padding: 2.2% 4% 5%; background-color: #f7f7f7; border-top: 1px solid #d0d0d0; font-size: 14px; line-height: 24px; color: #666; } .jobs-wrap .list li .box h2 { margin-bottom: 20px; font-size: 16px; line-height: 32px; color: #333; } .jobs-wrap .list li .box a.mail { display: inline-block; position: absolute; right: 3.5%; bottom: 14%; width: 90px; padding-left: 60px; border-radius: 8px; background: #316db5 url(../images/bg_sign13.png) no-repeat 30px center; font-size: 16px; line-height: 44px; color: #fff; -webkit-transition: all 0.5s; transition: all 0.5s; } .jobs-wrap .list li .box a.mail:hover { box-shadow: 2px 2px 15px #316db5; } @media screen and (max-width: 1023px) { .jobs-wrap .list li .box a.mail { position: relative; left: 0; right: auto; margin-top: 5%; } } .jobs-wrap .list li.cur .top { background-color: #f7f7f7; } .jobs-wrap .list li.cur .view span { opacity: 0; } .jobs-wrap .list li.cur .view::after { width: 37px; height: 37px; margin: -26.5px 0 0 -16.5px; opacity: 1; } .jobsintro-wrap { position: relative; } .jobsintro-wrap::before { position: absolute; left: 0; top: -1px; z-index: 5; width: 100%; height: 1px; box-shadow: 0 0 5px black; } .jobsintro-wrap .title { position: relative; overflow: hidden; } .jobsintro-wrap .title h2 { font-size: 48px; line-height: 80px; color: #666; text-align: center; } .jobsintro-wrap .title h3 { font: 30px/2 "华文中宋", Arial; color: #666; text-align: center; text-transform: uppercase; } .jobsintro-wrap .title h3 span { display: inline-block; position: relative; } .jobsintro-wrap .title h3 span::before, .jobsintro-wrap .title h3 span::after { content: ""; display: inline-block; position: absolute; top: 50%; width: 104px; height: 1px; background-color: #d1d1d1; } .jobsintro-wrap .title h3 span::before { left: -142px; } .jobsintro-wrap .title h3 span::after { right: -142px; } @media screen and (max-width: 1279px) { .jobsintro-wrap .title h2 { font-size: 30px; line-height: 2; } .jobsintro-wrap .title h3 { font-size: 16px; } } .jobsintro-wrap .tips { position: relative; } .jobsintro-wrap .tips .box { position: absolute; left: 0; top: 0; width: 48%; height: 100%; background: url(../images/img22.jpg) no-repeat center/cover; } .jobsintro-wrap .tips .box .in { position: absolute; left: 0; top: 50%; width: 100%; margin-top: -59px; } .jobsintro-wrap .tips .box .in h2 { font-size: 48px; line-height: 72px; color: #fff; text-align: center; } @media screen and (max-width: 1279px) { .jobsintro-wrap .tips .box .in h2 { font-size: 36px; line-height: 2; } } .jobsintro-wrap .tips .box .in p { font: 30px/46px "华文中宋", Arial; color: #fff; text-align: center; } .jobsintro-wrap .tips .box .in p span { position: relative; display: inline-block; } .jobsintro-wrap .tips .box .in p span::before, .jobsintro-wrap .tips .box .in p span::after { content: ""; display: inline-block; position: absolute; top: 50%; width: 104px; height: 1px; background-color: #fff; opacity: .3; } .jobsintro-wrap .tips .box .in p span::before { left: -185px; } .jobsintro-wrap .tips .box .in p span::after { right: -185px; } @media screen and (max-width: 1023px) { .jobsintro-wrap .tips .box { position: relative; width: 100%; height: auto; } .jobsintro-wrap .tips .box .in { -webkit-transform: scale(0.6); -ms-transform: scale(0.6); transform: scale(0.6); } .jobsintro-wrap .tips .box .in p span::before, .jobsintro-wrap .tips .box .in p span::after { display: none; } } .jobsintro-wrap .tips .list { float: right; width: 52%; } .jobsintro-wrap .tips .list li { position: relative; overflow: hidden; float: left; width: 33.33%; } .jobsintro-wrap .tips .list li::first-child { width: 33.34%; } .jobsintro-wrap .tips .list li:nth-child(4), .jobsintro-wrap .tips .list li:nth-child(5) { width: 50%; } .jobsintro-wrap .tips .list li .bg { background: rgba(49, 109, 181, 0.5); -webkit-transition: all 0.5s; transition: all 0.5s; } .jobsintro-wrap .tips .list li .top { position: absolute; left: 10%; top: 15%; font-size: 22px; line-height: 35px; color: #fff; } .jobsintro-wrap .tips .list li .top p.en { position: relative; font: 14px/20px Arial; color: #fff; } .jobsintro-wrap .tips .list li .top p.en::after { content: ""; display: inline-block; position: absolute; left: 0; bottom: -20px; width: 22px; height: 2px; background-color: #fff; } @media screen and (max-width: 1279px) { .jobsintro-wrap .tips .list li .top { font-size: 18px; } } .jobsintro-wrap .tips .list li .hoverbg { background: url(../images/bg_bg04.png) no-repeat center bottom/cover; -webkit-transition: all 0.5s; transition: all 0.5s; -webkit-transform: translateY(50%); -ms-transform: translateY(50%); transform: translateY(50%); opacity: 0; } .jobsintro-wrap .tips .list li .bot { position: absolute; left: 10%; bottom: 24%; width: 80%; font-size: 12px; line-height: 2; color: #fff; -webkit-transition: all 0.5s; transition: all 0.5s; -webkit-transform: translateY(10%); -ms-transform: translateY(10%); transform: translateY(10%); opacity: 0; } .jobsintro-wrap .tips .list li:hover .bg { -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); opacity: 0; } .jobsintro-wrap .tips .list li:hover .hoverbg, .jobsintro-wrap .tips .list li:hover .bot { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1; } @media screen and (max-width: 1023px) { .jobsintro-wrap .tips .list { width: 100%; } .jobsintro-wrap .tips .list li .top { font-size: 14px; line-height: 2; } .jobsintro-wrap .tips .list li .top p.en { font-size: 12px; } .jobsintro-wrap .tips .list li .top p.en::after { bottom: -10px; } .jobsintro-wrap .tips .list li .bot { bottom: 15%; line-height: 20px; } .jobsintro-wrap .tips .list li:hover .top { -webkit-transform: translateY(-200%); -ms-transform: translateY(-200%); transform: translateY(-200%); } } .jobsintro-wrap .idea { padding: 20px 0 5%; } .jobsintro-wrap .idea .list { width: 1212px; margin: 30px auto 0; } .jobsintro-wrap .idea .list li { box-sizing: border-box; float: left; position: relative; overflow: hidden; width: 16%; border: 6px solid #efefef; margin: 0 .3%; } .jobsintro-wrap .idea .list li .detail { box-sizing: border-box; background: rgba(0, 0, 0, 0.5); padding: 30px 12px; font-size: 18px; line-height: 1; color: #fff; -webkit-transition: all 0.5s; transition: all 0.5s; } .jobsintro-wrap .idea .list li .detail p { float: left; width: 18px; margin: -26px 0 0 24px; } .jobsintro-wrap .idea .list li .detail p.en { width: 300%; padding: 4px 0; margin: 0; font-family: Arial; text-transform: uppercase; -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; -webkit-transform: translateX(22px) rotate(90deg); -ms-transform: translateX(22px) rotate(90deg); transform: translateX(22px) rotate(90deg); } .jobsintro-wrap .idea .list li .detail p.tip { opacity: 0; padding: 4px 0; border-top: 1px solid rgba(255, 255, 255, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.2); font-size: 13px; line-height: 1.5; } .jobsintro-wrap .idea .list li:hover .detail { left: 8%; top: 22%; width: 72.5%; height: auto; padding: 42% 5.5% 45%; background-color: rgba(49, 109, 181, 0.9); } .jobsintro-wrap .idea .list li:hover .detail p { width: 100%; margin: 0 0 13% 0; font-weight: bold; text-align: center; } .jobsintro-wrap .idea .list li:hover .detail p.en { opacity: 0; display: none; } .jobsintro-wrap .idea .list li:hover .detail p.tip { font-weight: normal; opacity: 1; text-align: left; } @media screen and (max-width: 1279px) { .jobsintro-wrap .idea .list { width: 100%; } } @media screen and (max-width: 1023px) { .jobsintro-wrap .idea .list { width: 90%; } .jobsintro-wrap .idea .list li { width: 48%; margin: 0 1% 2%; } } .jobsintro-wrap .elfare { padding: 40px 0 5%; background-color: #efefef; } .jobsintro-wrap .elfare .detail { padding: 0 5%; margin: 3.3% 0 6.3%; font-size: 14px; line-height: 24px; color: #666; text-align: center; } .jobsintro-wrap .elfare .list { width: 1205px; margin: 0 auto; } @media screen and (max-width: 1279px) { .jobsintro-wrap .elfare .list { width: 90%; } } .jobsintro-wrap .elfare .list li { position: relative; overflow: hidden; float: left; box-sizing: border-box; width: 22.8%; padding: 4.8% 18px; background-color: #fff; margin: 0 1.1%; text-align: center; -webkit-perspective: 500px; perspective: 500px; } .jobsintro-wrap .elfare .list li span { display: inline-block; width: 100px; padding-top: 26.5%; background: url(../images/bg_sign14.png) no-repeat center top; font-size: 14px; line-height: 2; color: #666; } @media screen and (max-width: 1279px) { .jobsintro-wrap .elfare .list li span { background-size: 40% auto; } } @media screen and (max-width: 1023px) { .jobsintro-wrap .elfare .list li span { background-size: auto auto; } } .jobsintro-wrap .elfare .list li:nth-child(2) span { background-image: url(../images/bg_sign15.png); } .jobsintro-wrap .elfare .list li:nth-child(3) span { background-image: url(../images/bg_sign16.png); } .jobsintro-wrap .elfare .list li:nth-child(4) span { background-image: url(../images/bg_sign17.png); } .jobsintro-wrap .elfare .list li::after { content: attr(title); display: inline-block; box-sizing: border-box; padding: 16% 18px 0; background-color: rgba(23, 86, 161, .8); font-size: 14px; line-height: 24px; color: #fff; -webkit-transition: all 0.5s; transition: all 0.5s; -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg); -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; opacity: 0; text-align: left; } .jobsintro-wrap .elfare .list li:hover::after { -webkit-transform: rotateY(0); transform: rotateY(0); opacity: 1; } @media screen and (max-width: 1023px) { .jobsintro-wrap .elfare .list li { width: 100%; padding: 10% 5%; margin: 0 0 3%; } .jobsintro-wrap .elfare .list li::after { padding-top: 10%; } } .jobsintro-wrap .staff { padding: 4.3% 0 2.7%; } .jobsintro-wrap .staff .detail { width: 1205px; margin: 5% auto; font-size: 14px; line-height: 24px; color: #666; } @media screen and (max-width: 1279px) { .jobsintro-wrap .staff .detail { width: 90%; } } .jobsintro-wrap .staff .list { width: 1205px; margin: 0 auto; } .jobsintro-wrap .staff .list li { float: left; width: 30%; } .jobsintro-wrap .staff .list li:nth-child(2) { margin: 0 5%; } @media screen and (max-width: 1279px) { .jobsintro-wrap .staff .list { width: 90%; } } @media screen and (max-width: 1023px) { .jobsintro-wrap .staff .list li { float: none; width: 100%; margin: 0 0 5% !important; } } @media screen and (max-width: 1279px) { .jobsintro-wrap .staff { padding: 5% 0; } } .contact-wrap { position: relative; } @media screen and (max-width: 1279px) { .contact-wrap { min-height: 600px; } } @media screen and (max-width: 1023px) { .contact-wrap { min-height: 0; } } @media screen and (max-width: 1023px) { .contact-wrap .map { position: relative; height: 400px; } } .contact-wrap .tips { position: absolute; left: 0; top: 0; z-index: 2; width: 100%; /*padding-top: 3%;*/ background-color: rgba(49, 109, 181, 0.85); font-size: 16px; line-height: 36px; color: #fff; } .contact-wrap .tips .main { position: relative; width: 1210px; margin: 0 auto; padding-bottom: 5%; } .contact-wrap .tips .aaa { padding-top: 3%; } @media screen and (max-width: 1279px) { .contact-wrap .tips .main { width: 90%; } } .contact-wrap .tips .main h2 { font-size: 24px; line-height: 44px; color: #fff; } .contact-wrap .tips .main h3 { margin-bottom: 30px; font: 16px/34px Arial; color: #fff; } .contact-wrap .tips .main .box { position: relative; float: left; padding-right: 52px; } .contact-wrap .tips .main .box:nth-child(3) { margin-right: 62px; } .contact-wrap .tips .main .box:nth-child(3) ::after { content: ""; display: inline-block; position: absolute; right: 0; top: 50%; width: 1px; height: 96px; background-color: rgba(255, 255, 255, 0.25); margin-top: -48px; } .contact-wrap .tips .main .box p { padding-left: 32px; } .contact-wrap .tips .main .box p:nth-child(1) { background: url(../images/bg_sign18.png) no-repeat left 8px; } .contact-wrap .tips .main .box p:nth-child(2) { background: url(../images/bg_sign19.png) no-repeat left 8px; } .contact-wrap .tips .main .box p:nth-child(3) { background: url(../images/bg_sign20.png) no-repeat left 8px; } .contact-wrap .tips .main .box.on p:nth-child(1) { background: url(../images/bg_sign18s.png) no-repeat left 8px; } .contact-wrap .tips .main .btn { position: absolute; right: 0; bottom: 0; width: 65px; height: 55px; background: #ccc url(../images/bg_sign21.png) no-repeat center; transition-duration: 0.5s; -webkit-transition-duration: 0.5s; -ms-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-property: background; -webkit-transition-property: background; -ms-transition-property: background; -o-transition-property: background; cursor: pointer; } .contact-wrap .tips .main .btn.on { background: #ccc url(../images/20170328/icon10_10.png) no-repeat center; } @media screen and (max-width: 1023px) { .contact-wrap .tips { position: relative; font-size: 14px; } .contact-wrap .tips .main h2 { font-size: 18px; line-height: 2; } .contact-wrap .tips .main h3 { font-size: 14px; line-height: 2; } .contact-wrap .tips .main .box { float: none; width: 100%; margin: 0; } } /*# sourceMappingURL=style.css.map */ .team-wrap { width: 1210px; padding: 5.5% 0 7%; margin: 0 auto; } .team-wrap .tips { padding-bottom: 5%; font-size: 16px; line-height: 30px; color: #333; } .team-wrap li { margin-bottom: 15px; font-size: 16px; line-height: 30px; color: #333; } .team-wrap li h2 { padding: 0 4%; background-color: #316db5; font-size: 20px; line-height: 62px; color: #fff; } .team-wrap li .detail { padding: 1.3% 4%; border: 1px solid #ccc; border-top: 0; } @media screen and (max-width: 1279px) { .team-wrap { width: 90%; } .team-wrap li h2 { padding: 0 5%; } .team-wrap li .detail { padding: 5%; } } .news-wrap .videolist { width: 1280px; padding: 5% 0; margin: 0 auto; } @media screen and (max-width: 1365px) { .news-wrap .videolist { width: 90%; } } .news-wrap .videolist li { float: left; width: 30%; margin-bottom: 3%; text-align: center; } @media screen and (max-width: 1023px) { .news-wrap .videolist li { width: 100%; margin: 0 0 3% !important; } } .news-wrap .videolist li:nth-child(3n - 1) { margin: 0 5% 3%; } .news-wrap .videolist li a { position: relative; display: inline-block; width: 100%; height: 100%; } .news-wrap .videolist li a::after { content: ""; display: inline-block; position: absolute; left: 50%; top: 45%; width: 70px; height: 70px; background: url(../images/video.png) no-repeat center/cover; margin: -35px 0 0 -35px; -webkit-transition: all 0.5s; transition: all 0.5s; } @media screen and (max-width: 1024px) { .news-wrap .videolist li a::after { width: 56px; height: 56px; margin: -28px 0 0 -28px; } } .news-wrap .videolist li a:hover::after { -webkit-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); } .news-wrap .videolist li p { margin: 2% 0; font-size: 14px; line-height: 1.5; color: #666; } .videoout { display: none; z-index: 10; } .videoout .bg { background: rgba(0, 0, 0, 0.6); } .videoout .close { position: absolute; right: -60px; top: 0; z-index: 2; width: 60px; font: 40px/60px Arial; color: #fff; text-align: center; cursor: pointer; } .videoout .main { position: absolute; left: 50%; top: 0; width: 900px; height: 600px; background-color: #fff; margin-left: -450px; } .investor-wrap .ban { padding: 9.4% 0 7%; background: url(../images/bg_bg05.jpg) no-repeat center/cover; } .investor-wrap .ban h2 { font-size: 48px; line-height: 82px; color: #fff; text-align: center; } .investor-wrap .ban p { font: 30px/2 "华文中宋", Arial; color: #fff; text-align: center; text-transform: uppercase; } .investor-wrap .ban p span { display: inline-block; position: relative; } .investor-wrap .ban p span::before, .investor-wrap .ban p span::after { content: ""; display: inline-block; position: absolute; top: 50%; width: 104px; height: 1px; background: rgba(255, 255, 255, 0.3); } .investor-wrap .ban p span::before { left: -115px; } .investor-wrap .ban p span::after { right: -115px; } @media screen and (max-width: 1023px) { .investor-wrap .ban { background-image: url(../images/bg_bg05m.jpg); } .investor-wrap .ban h2 { font-size: 24px; line-height: 2; } .investor-wrap .ban p { font-size: 15px; } .investor-wrap .ban p span::before, .investor-wrap .ban p span::after { width: 52px; } .investor-wrap .ban p span::before { left: -60px; } .investor-wrap .ban p span::after { right: -60px; } } .investor-wrap .title { padding: 2.8% 0 1.7%; border-bottom: 1px solid #e5e5e5; } .investor-wrap .title .in { width: 1210px; margin: 0 auto; } @media screen and (max-width: 1279px) { .investor-wrap .title .in { width: 90%; } } .investor-wrap .title h2 { position: relative; padding-left: 10%; font-size: 24px; line-height: 2; color: #666; } .investor-wrap .title h2::before { content: ""; display: inline-block; position: absolute; left: 0; top: 50%; width: 8%; height: 1px; background-color: #000; } @media screen and (max-width: 1023px) { .investor-wrap .title h2 { padding-left: 15%; font-size: 16px; } .investor-wrap .title h2::before { width: 12%; } } .investor-wrap .title h3 { font: 40px/64px Arial; color: #000; text-transform: uppercase; } .investor-wrap .title h3 b { color: #316db5; } @media screen and (max-width: 1023px) { .investor-wrap .title h3 { font-size: 16px; line-height: 2; } } .investor-wrap .box { width: 1210px; margin: 0 auto; } @media screen and (max-width: 1279px) { .investor-wrap .box { width: 90%; } } .investor-wrap .bg { background-color: #efefef; } .investor-wrap .bg .title { border-bottom-color: #d9d9d9; } .investor-wrap .list { width: 1210px; padding: 2.6% 0; margin: 0 auto; } @media screen and (max-width: 1279px) { .investor-wrap .list { width: 90%; } } .investor-wrap .list li { box-sizing: border-box; padding: 3.8% 4.5%; border: 1px solid #e5e5e5; background-color: #f7f7f7; margin-bottom: 16px; font-size: 14px; line-height: 30px; color: #666; } .investor-wrap .list li:nth-child(2n) { background-color: #fff; } .investor-wrap .list li h2 { padding-bottom: 13px; border-bottom: 1px solid #d6d6d6; margin-bottom: 2.6%; font-size: 18px; line-height: 2; color: #333; } .investor-wrap .list li h2 span { color: #316db5; } .investor-wrap .list .mail { height: 100px; background: #316db5 url(../images/bg_bg06.png) no-repeat left center/auto 100%; border-radius: 18px; } .investor-wrap .list .mail .name { float: left; padding: 0 2.5% 0 17.7%; margin-top: 27px; font-size: 18px; line-height: 28px; color: #fff; } .investor-wrap .list .mail .name span { font: 14px/2 Arial; color: #fff; } @media screen and (max-width: 1210px) { .investor-wrap .list .mail .name { padding-left: 20%; } } .investor-wrap .list .mail a { display: inline-block; float: left; margin-top: 34px; padding-left: 3%; border-left: 1px solid rgba(255, 255, 255, 0.2); font: 24px/2 Arial; color: #fff; text-transform: uppercase; } .investor-wrap .list .mail a.btn { float: right; margin: 29px 4.3% 0 0; padding: 0 3%; background-color: #181c22; border-radius: 20px; font-size: 16px; line-height: 40px; color: #fff; } @media screen and (max-width: 1023px) { .investor-wrap .list .mail { height: 50px; } .investor-wrap .list .mail a { margin-top: 0; padding-left: 29%; font-size: 14px; line-height: 50px; } } .backbtn { position: relative; margin: 25px auto; height: 50px; text-align: center; } @media screen and (max-width: 1450px) { .iwrap .history .main h3 { font-size: 36px; } } .header { position: fixed; width: 100%; height: 120px; background: #fff; z-index: 5; border-bottom: 1px solid #e0e0e0; } .header .container { height: 100%; } .header .headerLogo { position: absolute; top: 28px; left: 60px; } .header .nav .navTop { position: absolute; top: 0px; display: none; height: 4px; background: #7e308e; } .header .nav .navTop { transition-duration: .5s; -ms-transition-duration: .5s; -moz-transition-duration: .5s; -webkit-transition-duration: .5s; } .header .nav { position: absolute; top: 0px; right: 0px; width: 72%; height: 120px; } .header .nav .child { position: relative; float: left; padding: 0 1.2em; height: 120px; line-height: 120px; text-align: center; color: #666; } .header .nav .child:after{ position: absolute; content: ''; display: block; width: 100%; height: 3px; bottom: 0; background: #008fd7; opacity: 0; left: -0.1em; } .header .nav .child:hover:after, .header .nav .child.on:after{ opacity: 1; } .header .nav .child.navChildSearch { line-height: 20px !important; } .header .nav .child:hover .title { color: #008fd7; } .header .nav .child .title { font-size: 16px; color: #666; } .header .nav .child .title { transition-duration: .5s; -ms-transition-duration: .5s; -moz-transition-duration: .5s; -webkit-transition-duration: .5s; } .header .nav .child.on .title { color: #008fd7; } .header .nav .child .childContent { display: none; position: absolute; top: 120px; width: 100%; left: -1px; } .header .nav .child .childContent .childContentLi { background: url(../images/navChildBg.png); color: #666; font-size: 14px; height: 38px; line-height: 38px; border-bottom: 1px solid #c6c5c4; -webkit-box-shadow: 0px 2px 2px 0px rgba(125, 125, 125, 0.2); -moz-box-shadow: 0px 2px 2px 0px rgba(125, 125, 125, 0.2); -ms-box-shadow: 0px 2px 2px 0px rgba(125, 125, 125, 0.2); -o-box-shadow: 0px 2px 2px 0px rgba(125, 125, 125, 0.2); box-shadow: 0px 2px 2px 0px rgba(125, 125, 125, 0.2); } .header .nav .child .childContent .childContentLi a{ display: block; } .header .nav .child .childContent .childContentLi:hover a { background: #008fd7; color: #fff; } .header .nav .child .language { display: inline-block; *display: inline; *zoom: 1; height: 16px; line-height: 16px; padding: 0 8px; font-size: 16px; color: #666; } .header .nav .child .language:hover { color: #008fd7; } .header .nav .child .language.cn { border-right: 1px solid #ccc; } .header .nav .child .language.on { color: #008fd7; } .header .nav .child .seachIcon { cursor: pointer; } .header .list { position: relative; background: #363839; z-index: 6; } .header .list .container { padding: 50px 0; display: none; } .header .list .content { width: 492px; } .header .list .listMTitle { color: #fff; font-size: 18px; line-height: 24px; padding-bottom: 24px; } .header .list .listTitle { position: relative; width: 100%; } .header .list .listTitle:after { content: "020"; display: block; height: 0; clear: both; visibility: hidden; } .header .list .listTitle .title { border-bottom: 1px solid #999999; line-height: 36px; color: #B9B9B9; font-size: 14px; font-family: Arial, Helvetica, sans-serif; } .header .list .listTitle .title a { color: #B9B9B9; font-size: 14px; } .header .list .listTitle .title img { margin-right: 12px; } .header .list .listTitle .title .pointer { cursor: pointer; position: absolute; right: 0px; top: 16px; width: 11px; height: 11px; } .header .list .listTitle .title .pointer .sub { position: absolute; left: 0px; top: 5px; width: 11px; height: 1px; background: #999; } .header .list .listTitle .title .pointer .sub.sub2 { transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); -webkit-transform: rotate(90deg); } .header .list .listTitle .title .pointer .sub.sub2 { transition-duration: .5s; -ms-transition-duration: .5s; -moz-transition-duration: .5s; -webkit-transition-duration: .5s; } .header .list .listTitle .title .pointer.on .sub.sub2 { transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); -webkit-transform: rotate(0deg); } .header .list .listTitle .listContent { display: none; width: 94%; float: right; } .header .list .addBtn { z-index: 5; cursor: pointer; position: absolute; bottom: -35px; right: 0; width: 35px; height: 35px; background: url(../images/addIcon.png) no-repeat; } .header .list .addBtn .sub { position: absolute; width: 10px; height: 2px; background: #fff; } .header .list .addBtn .sub.sub1 { top: 12px; left: 22px; } .header .list .addBtn .sub.sub2 { top: 12px; left: 22px; transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); -webkit-transform: rotate(90deg); } .header .list .addBtn .sub.sub2 { transition-duration: .5s; -ms-transition-duration: .5s; -moz-transition-duration: .5s; -webkit-transition-duration: .5s; } .header .list .addBtn.on .sub.sub2 { transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); -webkit-transform: rotate(0deg); } .header .searchContent { display: none; position: absolute; bottom: -80px; right: 0px; padding: 25px; background-color: #f2efef; border-bottom: 1px solid #dcdadb; border-left: 1px solid #dcdadb; } .header .searchContent .seach { margin: 0; } .seach { position: relative; margin-top: 40px; width: 300px; height: 30px; background: #fff; } .seach .seachText { width: 260px; color: #999999; font-size: 12px; padding: 0 0 0 6px; line-height: 1; margin: 0; border: 0; height: 30px; } .seach .btn { cursor: pointer; position: absolute; top: 0; right: 0; width: 30px; height: 30px; text-align: center; line-height: 0; background: #474747; border: 0; } .seach .btn { transition-duration: .5s; -ms-transition-duration: .5s; -moz-transition-duration: .5s; -webkit-transition-duration: .5s; } .seach .btn:hover { background: #000; } .seach .btn img { vertical-align: middle; } .wapNavBtn{display:none;position:absolute;top:38px;right:32px;cursor:pointer;} .wapLanguage{display:none;position:absolute;top:35px;right:120px;} .wapLanguage .language{padding:0 14px;color:#999999;font-size:28px;line-height:28px;display:inline-block;*display:inline;*zoom:1;} .wapLanguage .language.on{color:#008fd7;} .wapLanguage .language.cn{border-right:3px solid #bababa;} .products{ background: url("../images/bg_Sport.png"); padding: 80px 0; } .iwrap .products .main { width: 92%; margin: 0 auto; } .products .title h2 span{ background: none; color: #fff; } .products .title h2::before, .products .title h2::after{ width: 20% !important; } .products .title h3{ color: #fff; } .products .title h3::before{ background: #fff; } .cpfl{ text-align: center; margin-bottom: 50px; } .cpfl a{ color: #fff; font-size: 14px; border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: rgba(255,255,255,0); display: inline-block; margin: 0 10px; } .cpfl a:hover{ border-bottom-color: rgba(255,255,255,1); } .ewm{ float: right; margin-top: 58px; } .about-wrap{ padding-top: 120px; } .container{ width: 1200px; margin: 0 auto; } .ry .child{ float: left; position: relative; width: 386px; border: 1px solid #e9e9e9; background: #f7f7f7; margin: 0 12px 12px 0; } .ry .child .childImg { border: 1px solid #fdfdfd; text-align: center; } .ry .child .childImg img { transition-duration: .5s; -ms-transition-duration: .5s; -moz-transition-duration: .5s; -webkit-transition-duration: .5s; height: 256px; } .ry .child .childTitle { height: 50px; line-height: 50px; } .ry .child .childTitle .title { color: #008fd7; font-size: 16px; text-align: center; background: #fff; } .news-wrap{ padding-top: 120px; } .slt{ text-align: center; margin: 50px 0; } .slt img{ max-width: 90%; } .pagination li{ border:0 !important; } .contact{ float: left; width: 45%; } .contact h1{ font-size: 24px; line-height: 44px; margin-bottom: 10px; } .map{ width: 55%; float: right; height: 300px; } .mesform { position: relative; overflow: hidden; width: 100%; margin: 20px auto 50px; text-align: left; } .mfields .txtarea { font-size: 14px; padding: 2px 0; width: 100%; border: 1px solid #eeeeee; height: 100px; background: #f5f5f5; text-indent: 10px; line-height: 36px; font-family: '微软雅黑'; } .mfields li { float: left; width: 47%; margin-bottom: 13px; } .mfields li:last-child{ width: 100%; margin-right: 0; } .mfields li:nth-child(even){ float: right; } .mfields li span{ display: inline-block; width: 10%; font-size: 14px; margin-bottom: 10px; } .mfields .title { padding: 10px 0; line-height: 1.5; width: 100%; text-align: left; } .mfields .inpbox { width: 100%; } .mfields .inptext { font-family: '微软雅黑'; border: 1px solid #eeeeee; font-size: 14px; text-indent: 10px; height: 34px; width: 89%; background: #f5f5f5; } .lx-tit { text-align: center; color: #333; font-size: 24px; margin: 50px 0 30px; } .btnsubmit { display: inline-block; background-color: #008fd7; border-style: solid; border-width: 0; line-height: 40px; height: 40px; width: 95%; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; text-align: center; margin: 5px auto; color: #FFF !important; transition: 0.4s; -moz-transition: 0.4s; /* Firefox 4 */ -webkit-transition: 0.4s; /* Safari 和 Chrome */ -o-transition: 0.4s; /* Opera */ cursor: pointer; } .btnsubmit:hover { background-color: #042b65; text-decoration: none; } #slider{ overflow: hidden; } .sudyslider{ margin: auto; } .wh { font-size: 16px; line-height: 30px; color: #666; } /* reveal-modal */ .reveal-modal-bg { position: fixed; height: 100%; width: 100%; background-color: #000; z-index: 100; display: none; top: 0; left: 0; } .reveal-modal { visibility: hidden; top: 100px; left: 50%; transform: translateX(-50%); width: 50%; background: #fff; position: absolute; z-index: 101; padding: 30px 40px 34px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 0 10px rgba(0, 0, 0, .4); -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .4); -box-shadow: 0 0 10px rgba(0, 0, 0, .4); } .reveal-modal .close-reveal-modal { font-size: 22px; line-height: .5; position: absolute; top: 8px; right: 11px; color: #aaa; text-shadow: 0 -1px 1px rbga(0, 0, 0, .6); font-weight: bold; cursor: pointer; } .reveal-modal h2 { font-size: 18px; color: #990000; padding: 0 0 20px 0; } .reveal-modal p { padding: 0 0 15px 0; } #myModal ul li{ margin-bottom: 35px; } #myModal ul li:last-child{ margin-bottom: 0; } #myModal ul li img{ float: left; display: block; } #myModal ul li .fr{ display: block; width: 77%; } .swiper2{ width: 80%; margin: auto; } .swiper2 a{ padding: 0 !important; } .swiper2 .swiper-button-next, .swiper2 .swiper-button-prev{ width: 15px; height: 20px; background-size: contain; transform: translateY(-50%); margin-top: 0; } .homelx p i{ font-size: 18px; margin-right: 8px; } .homelx p span{ display: block; width: 202px; float: right; margin-top: 6px; } .pagination li{ display: inline-block; } .pagination li.thisclass{ text-decoration: none; color: #fff; background: #316db5; border: 1px solid #316db5 !important; padding: 3px 12px; margin-right: 3px; } .cpbg{ background: url(../images/bg_Sport.jpg) center no-repeat; height: 698px; overflow: hidden; } .cpbgm{ width: 1236px; margin: 253px auto 0; } .cpbg a{ display: inline-block; width: 136px; height: 136px; margin: 0 60px 43px; } .cpbg a:first-child,.cpbg a:nth-child(6){ margin-left: 0; } .cpbg a:nth-child(5),.cpbg a:last-child{ margin-right: 0; margin-left: 80px; }