/** * 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, .nav-bg, .index-wrap .top-video .bg, .index-wrap .part2 .main .list li .image .bg, .index-wrap .part2 .main .list li .image a, .contact-main .map .box .in, .pd-box .box .bg, .pd-box .box .tips { 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); } } html, body { position: relative; } header { position: fixed; left: 0; top: 0; z-index: 2; width: 250px; height: 100%; background: #fff; -webkit-transition: background 0.5s; transition: background 0.5s; } header .logo { display: inline-block; height: 44px; margin: 52px 0 28px; } @media screen and (max-height: 700px) { header .logo { margin: 28px 0; } } header .logo img { float: left; } header .tips { height: 46px; background: #f5f5f5; font-size: 12px; line-height: 46px; color: #000; position: relative; text-align: center; } header .tips a, header .tips .tips-email{ display: inline-block; padding: 0 15px 0 42px; cursor:pointer; background: url(../img/bg_btn01.png) no-repeat 15px top; color: #000; -webkit-transition: all 0.5s; transition: all 0.5s; } header .tips a:hover, header .tips .tips-email:hover{ color: #e60012; } header .tips .tips-email{ background-position: 15px bottom; } header .tips .top-e{ position: absolute; top:47px; right: 17px; display: none; width: 95px; z-index: 9; } header .tips .top-e a{ width: 95px; height: 31px; text-align: center; line-height: 31px; font-size: 12px; color: #333333; background: #f5f5f5; padding: 0; display: block; margin-bottom: 5px; } header .tips .top-e a:hover{ box-shadow: 0 0 5px #bdb8b8; color: #e60012; } header nav li { position: relative; margin-bottom: 8px; } header nav li a.tit { display: inline-block; width: 100%; font-size: 15px; line-height: 3; color: #000; text-align: center; -webkit-transition: all 0.5s; transition: all 0.5s; } header nav li a.tit:hover, header nav li a.tit.show, header nav li a.tit.cur { background-color: #e60012; color: #fff; } header nav li .sub { display: none; padding: 13px 0; background: #f5f5f5; } header nav li .sub a { display: inline-block; width: 100%; font-size: 13px; line-height: 30px; color: #333; text-align: center; -webkit-transition: all 0.5s; transition: all 0.5s; } header nav li .sub a.cur, header nav li .sub a:hover { color: #e60012; } header .bottom { position: absolute; left: 0; bottom: 0; width: 250px; } @media screen and (max-height: 700px) { header .bottom { display: none; } } header .bottom .intro { padding: 7px 35px; margin-top: 20px; background: #f5f5f5; font-size: 13px; line-height: 22px; color: #000; } header .top{ padding: 8px 0; padding-left: 20px; border-bottom: 1px solid #e6e6e6; margin-bottom: 25px; } @media screen and (max-width: 1000px) { header .top { display: none; } } header .search a { display: inline-block; padding: 0 15px; margin-left: 12px; font-size: 14px; line-height: 2; color: #666; font-family: Arial; text-transform: uppercase; -webkit-transition: all 0.5s; transition: all 0.5s; } header .search a:hover { color: #e60012; } header .search form { position: relative; padding-left: 15px; } header .search form::before { content: ""; display: inline-block; position: absolute; left: 0; top: 7px; width: 1px; height: 14px; background: #666; } header .search form input { width: 0; height: 27px; border: 0; border-bottom: 1px solid #333; font-size: 14px; line-height: 2; color: #666; } header .search form input.submit { width: 20px; height: 30px; border-bottom: 0; background: url(../img/bg_btn02.png) no-repeat center; } header .btns { display: none; padding-right: 10px; cursor: pointer; } header .btns a { display: inline-block; width: 28px; background: #e60012; font-size: 14px; line-height: 22px; color: #fff; text-align: center; } header .btns .nav-btn { float: right; position: relative; width: 29px; height: 22px; margin-left: 15px; } header .btns .nav-btn .line { position: absolute; left: 0; width: 29px; height: 2px; border-radius: 2px; background: #272636; -webkit-transition: all 0.5s; transition: all 0.5s; } header .btns .nav-btn .line:nth-child(1) { top: 0; -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; } header .btns .nav-btn .line:nth-child(2) { top: 10px; } header .btns .nav-btn .line:nth-child(3) { bottom: 0; -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; } header .btns .nav-btn.cur .line { background-color: #fff; } header .btns .nav-btn.cur .line:nth-child(1) { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } header .btns .nav-btn.cur .line:nth-child(2) { opacity: 0; } header .btns .nav-btn.cur .line:nth-child(3) { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } header.cur { background-color: #000; } @media screen and (max-width: 1000px) { header { position: relative; width: 100%; height: 22px; padding: 11px 0; } header .logo { height: 100%; margin: 0; } header .tips, header .bottom { display: none; } header nav { display: none; position: absolute; left: 0; top: 44px; width: 100%; background: #0a0f10; } header nav li { width: 93.75%; margin: 0 auto; border-bottom: 1px solid #303435; } header nav li:last-child { border-bottom: 0; } header nav li::after { content: ""; display: inline-block; position: absolute; right: 0; top: 0; width: 45px; height: 45px; background: url(../img/bg_sign01.png) no-repeat center/cover; opacity: .5; -webkit-transition: all 0.5s; transition: all 0.5s; } header nav li.cur::after { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } header nav li a.tit { width: 90%; padding-left: 10%; background: url(../img/bg_btn03.png) no-repeat 3.4% 0/auto 700%; font-size: 14px; line-height: 45px; color: #fff; text-align: left; } header nav li a.tit:hover, header nav li a.tit.show, header nav li a.tit.cur { color: #e60012; background-color: #0a0f10; background-image: url(../img/bg_btn03s.png); } header nav li:nth-child(1) a.tit { background-position: 3.4% 0px; } header nav li:nth-child(2) a.tit { background-position: 3.4% -45px; } header nav li:nth-child(3) a.tit { background-position: 3.4% -90px; } header nav li:nth-child(4) a.tit { background-position: 3.4% -135px; } header nav li:nth-child(5) a.tit { background-position: 3.4% -180px; } header nav li:nth-child(6) a.tit { background-position: 3.4% -225px; } header nav li:nth-child(7) a.tit { background-position: 3.4% -270px; } header nav li .sub { padding: 0 10% 10px; background: none; } header nav li .sub a { font-size: 13px; line-height: 30px; color: rgba(255, 255, 255, 0.4); text-align: left; } header .btns { display: block; } } footer { position: relative; padding: 16px 70px; background-color: #797979; font-size: 13px; line-height: 2; color: #fff; text-align: left; } @media screen and (max-width: 1280px) { footer { padding: 16px 6.5%; } } @media screen and (max-width: 1000px) { footer table { display: none; } } footer th { padding-bottom: 3px; font-weight: normal; font-size: 16px; line-height: 34px; color: #fff; text-align: left; } footer span { display: inline-block; padding: 0 5px; color: #e60012; } footer a { color: #fff; } footer a:hover { color: #e60012; } footer .backtop { position: absolute; right: 7%; top: 50%; width: 34px; height: 34px; background: url(../img/bg_btn05.png) no-repeat center; margin-top: -17px; cursor: pointer; opacity: .5; } @media screen and (max-width: 1280px) { footer .backtop { right: 5%; } } @media screen and (max-width: 1000px) { footer .backtop { display: none; } } footer .m { display: none; padding: 3% 0; text-align: center; } @media screen and (max-width: 1000px) { footer .m { display: block; } } footer .m p:first-child a { display: inline-block; padding: 0 20px; font-size: 14px; line-height: 24px; color: rgba(255, 255, 255, 0.8); background: url(../img/bg_sign02.png) no-repeat left top/auto 200%; } footer .m p:first-child a:last-child { margin-left: 10px; background-position: left bottom; } .nav-bg { display: none; background: rgba(0, 0, 0, 0.5); } .right-wrap { width: calc(100% - 250px); margin-left: 250px; } .right-wrap.bl { width: calc(100% - 251px); border-left: 1px solid #d6d6d6; } @media screen and (max-width: 1000px) { .right-wrap.bl { width: 100%; border-left: 0; } } @media screen and (max-width: 1000px) { .right-wrap { width: 100%; border-left: 0; margin-left: 0; } } .ins-ban { position: relative; overflow: hidden; background-repeat: no-repeat; background-position: center; background-size: cover; } .ins-ban .tips { position: absolute; left: 50%; top: 29%; width: 66%; margin-left: -33%; font-weight: bold; font-size: 60px; line-height: 76px; color: #fff; text-align: center; text-transform: uppercase; text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.16); } @media screen and (max-width: 1680px) { .ins-ban .tips { top: 20%; } } @media screen and (max-width: 1440px) { .ins-ban .tips { font-size: 40px; line-height: 50px; } } @media screen and (max-width: 1000px) { .ins-ban .tips { position: relative; left: 0; top: 0; width: 100%; padding: 10% 0; margin: 0; font-size: 30px; line-height: 1.5; } } .ins-ban .tips a { display: inline-block; width: 20%; min-width: 112px; padding: 0 2%; margin: 3% 0 10%; border: 1px solid #be000f; background-color: #e60012; font-weight: normal; font-size: 14px; line-height: 40px; color: #fff; -webkit-transition: all 0.5s; transition: all 0.5s; } .ins-ban .tips a:hover { background: none; border-color: #fff; color: #fff; } @media screen and (max-width: 1440px) { .ins-ban .tips a { margin-bottom: 8%; } } @media screen and (max-width: 1000px) { .ins-ban .tips a { width: 25%; line-height: 2.2; } } .ins-ban .tips img.sign { display: block; margin: 0 auto; -webkit-animation: updown 1s infinite; animation: updown 1s infinite; } .ins-ban .tips img.sign.mt { margin-top: 15%; } @media screen and (max-width: 1000px) { .ins-ban > img { display: none; } } @-webkit-keyframes updown { 0% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(10px); transform: translateY(10px); } } @keyframes updown { 0% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(10px); transform: translateY(10px); } } .ins-menu { height: 60px; background-color: #fff; } .ins-menu .main { width: 1100px; margin: 0 auto; } @media screen and (max-width: 1400px) { .ins-menu .main { width: 90%; } } .ins-menu .main menu { padding: 0; margin: 0; } @media screen and (max-width: 1000px) { .ins-menu .main menu { display: none; } } .ins-menu .main menu.max { position: relative; overflow: hidden; width: 88%; height: 60px; } @media screen and (max-width: 1000px) { .ins-menu .main menu.max { display: block; width: 98%; } } .ins-menu .main menu a { position: relative; display: inline-block; float: left; width: 246px; font-size: 16px; line-height: 60px; color: rgba(0, 0, 0, 0.5); text-align: center; -webkit-transition: all 0.5s; transition: all 0.5s; } @media screen and (max-width: 1366px) { .ins-menu .main menu a { width: 168px; } } .ins-menu .main menu a:hover, .ins-menu .main menu a.cur { background-color: #e60012; color: #fff; } .ins-menu .main menu a::after { content: ""; display: inline-block; position: absolute; right: -1px; top: 28px; width: 1px; height: 14px; background-color: #ccc; } .ins-menu .main menu a:last-child::after { display: none; } @media screen and (max-width: 1000px) { .ins-menu .main menu a::after { top: 18px; } } .ins-menu .main .path { padding: 5px 0; font-size: 12px; line-height: 60px; color: #999; } .ins-menu .main .path a { display: inline-block; float: left; color: #999; -webkit-transition: all 0.5s; transition: all 0.5s; } .ins-menu .main .path a:hover { color: #e60012; } .ins-menu .main .path span { display: inline-block; float: left; width: 3px; height: 60px; background: url(../img/bg_sign03.png) no-repeat center; margin: 0 8px; } .ins-menu .main .path i { font-style: normal; } .ins-menu .main .path.m { padding: 0; } @media screen and (max-width: 1000px) { .ins-menu .main .path { padding: 0; } .ins-menu .main .path.m { display: none; } } .ins-menu .main .btns { width: 10%; height: 60px; margin-left: 2%; } .ins-menu .main .btns .btn { display: inline-block; width: 50%; height: 60px; cursor: pointer; } .ins-menu .main .btns .btn.prev { background: url(../img/prev03.png) no-repeat center #ccc; } .ins-menu .main .btns .btn.next { background: url(../img/next03.png) no-repeat center #ccc; } .ins-menu .main .btns .btn:hover { background-color: #e60012; } @media screen and (max-width: 1000px) { .ins-menu .main .btns { display: none; } } .ins-wrap { padding: 60px 0 80px; background-color: #f5f5f5; } @media screen and (max-width: 1000px) {z .ins-wrap { padding: 9% 0 12.5%; } } .index-wrap { background-color: #fafafa; } .index-wrap .top-video { position: relative; overflow: hidden; } @media screen and (max-width: 1000px) { .index-wrap .top-video > img { display: none; } } .index-wrap .top-video video { position: absolute; left: 0; top: 0; } @media screen and (max-width: 1000px) { .index-wrap .top-video video { display: none; } } .index-wrap .top-video .img { display: none; } @media screen and (max-width: 1000px) { .index-wrap .top-video .img { display: block; } } .index-wrap .top-video .bg { background: rgba(0, 0, 0, 0.4) url(../img/bg_bg01.png) no-repeat center bottom 14px; } .index-wrap .ititle { font-size: 18px; line-height: 38px; color: #000; text-align: center; } .index-wrap .ititle h3 { font: bold 36px/44px Arial; color: #000; text-transform: uppercase; } .index-wrap .ititle span { position: relative; display: inline-block; } .index-wrap .ititle span::before, .index-wrap .ititle span::after { content: ""; display: inline-block; position: absolute; top: 18.5px; width: 30px; height: 1px; background: #808080; } .index-wrap .ititle span::before { left: -40px; } .index-wrap .ititle span::after { right: -40px; } .index-wrap .part1 { padding: 4.8% 0; font-size: 13px; line-height: 30px; color: #666; text-align: center; } @media screen and (max-width: 1000px) { .index-wrap .part1 { padding: 8% 0 10%; } } .index-wrap .part1 .tips { width: 50%; margin: 22px auto 0; } @media screen and (max-width: 1366px) { .index-wrap .part1 .tips { width: 93.75%; } } .index-wrap .part1 .tips a { display: inline-block; width: 196px; border: 1px solid #4e5051; margin-top: 4%; font-size: 14px; line-height: 36px; color: #000; -webkit-transition: all 0.5s; transition: all 0.5s; } .index-wrap .part1 .tips a:hover { border-color: #e60012; background-color: #e60012; color: #fff; } .index-wrap .part2 { padding-bottom: 6%; } @media screen and (max-width: 1000px) { .index-wrap .part2 { padding: 5% 0 15%; } } .index-wrap .part2 .main { width: 1264px; margin: 30px auto 0; } @media screen and (max-width: 1600px) { .index-wrap .part2 .main { width: 892px; } } @media screen and (max-width: 1280px) { .index-wrap .part2 .main { position: relative; width: 744px; } } @media screen and (max-width: 1000px) { .index-wrap .part2 .main { width: 100%; } } .index-wrap .part2 .main .btn { float: left; width: 74px; height: 180px; cursor: pointer; } .index-wrap .part2 .main .btn.prev { background: url(../img/prev01.png) no-repeat left center/100% auto; } .index-wrap .part2 .main .btn.next { background: url(../img/next01.png) no-repeat right center/100% auto; } @media screen and (max-width: 1280px) { .index-wrap .part2 .main .btn { position: absolute; top: 0; z-index: 2; } .index-wrap .part2 .main .btn.prev { left: 8px; background-image: url(../img/prev01s.png); } .index-wrap .part2 .main .btn.next { right: 8px; background-image: url(../img/next01s.png); } } @media screen and (max-width: 1000px) { .index-wrap .part2 .main .btn { display: none; } } .index-wrap .part2 .main .list { float: left; position: relative; overflow: hidden; width: 1116px; height: 180px; } @media screen and (max-width: 1600px) { .index-wrap .part2 .main .list { width: 744px; } } @media screen and (max-width: 1000px) { .index-wrap .part2 .main .list { float: none; width: 372px; margin: 0 auto; } } @media screen and (max-width: 320px) { .index-wrap .part2 .main .list { width: 100%; height: 254px; } } .index-wrap .part2 .main .list li { float: left; width: 356px; padding: 0 8px; } @media screen and (max-width: 320px) { .index-wrap .part2 .main .list li { width: 304px; } } .index-wrap .part2 .main .list li .image { position: relative; } .index-wrap .part2 .main .list li .image .bg { background: rgba(0, 0, 0, 0.4); -webkit-transition: all 0.5s; transition: all 0.5s; } .index-wrap .part2 .main .list li .image a { font-size: 16px; line-height: 180px; color: #fff; text-align: center; -webkit-transition: all 0.5s; transition: all 0.5s; } .index-wrap .part2 .main .list li .image:hover .bg { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } .index-wrap .part2 .main .list li .image:hover a { color: #000; text-shadow: 0 0 5px rgba(0, 0, 0, 0.3); } .index-wrap .part2 .main .list li .in { padding-top: 10px; } .index-wrap .part2 .main .list li .in a { font-size: 12px; line-height: 30px; color: #000; } .index-wrap .part2 .main .list li .in a span { display: inline-block; position: relative; padding: 0 15px 0 10px; -webkit-transition: all 0.5s; transition: all 0.5s; } .index-wrap .part2 .main .list li .in a span::before { content: "-"; display: inline-block; position: absolute; left: 0; top: 0; width: 10px; height: 30px; } .index-wrap .part2 .main .list li .in a span::after { content: ""; display: inline-block; position: absolute; right: 0; top: 0; width: 15px; height: 30px; background: url(../img/bg_btn04.png) no-repeat right top/auto 200%; } .index-wrap .part2 .main .list li .in a span:hover { color: #e60012; } .index-wrap .part2 .main .list li .in a span:hover::after { background-position: right bottom; } @media screen and (max-width: 1000px) { .index-wrap .part2 .main .list li .in a { font-size: 14px; } } .index-wrap .part2 .btns { display: none; height: 10px; margin-top: 10px; text-align: center; } @media screen and (max-width: 1000px) { .index-wrap .part2 .btns { display: block; } } .index-wrap .part2 .btns span { display: inline-block; width: 10px; height: 10px; border-radius: 5px; background: #cfcfcf; margin: 0 6px; cursor: pointer; } .index-wrap .part2 .btns span.cur { background-color: #e60012; } .index-wrap .part3 { padding-bottom: 5%; } @media screen and (max-width: 1000px) { .index-wrap .part3 { padding-bottom: 9%; } } .index-wrap .part3 .main { width: 66%; margin: 2% auto 0; background: #fff; font-size: 13px; line-height: 22px; color: #666; text-align: center; } @media screen and (max-width: 1440px) { .index-wrap .part3 .main { width: 80%; } } @media screen and (max-width: 1280px) { .index-wrap .part3 .main { width: 90%; } } .index-wrap .part3 .main img { float: left; width: 50%; } .index-wrap .part3 .main .intro { float: right; width: 44%; padding: 4.7% 3% 0; } @media screen and (max-width: 1680px) { .index-wrap .part3 .main .intro { padding-top: 2%; } } .index-wrap .part3 .main .intro p.fz20 { margin-bottom: 2%; font-size: 20px; line-height: 2; color: #000; } .index-wrap .part3 .main .intro a { display: inline-block; width: 36%; background: #e60012; margin-top: 7%; font-size: 14px; line-height: 40px; color: #fff; } @media screen and (max-width: 1000px) { .index-wrap .part3 .main { width: 94%; padding-bottom: 6%; background: none; } .index-wrap .part3 .main img { float: none; width: 100%; } .index-wrap .part3 .main .intro { float: none; width: 100%; padding: 5% 0 0; } } .index-wrap .part4 { padding-bottom: 5%; } @media screen and (max-width: 1000px) { .index-wrap .part4 { padding-bottom: 9%; } } .index-wrap .part4 .list { width: 65%; margin: 2% auto 0; border-top: 1px solid #dedede; } @media screen and (max-width: 1440px) { .index-wrap .part4 .list { width: 80%; } } @media screen and (max-width: 1000px) { .index-wrap .part4 .list { width: 94%; } } .index-wrap .part4 .list li { width: 100%; border-bottom: 1px solid #dedede; } .index-wrap .part4 .list li span { padding: 0 10px; font: bold 13px/60px Arial; color: #333; } @media screen and (max-width: 1550px) { .index-wrap .part4 .list li span { display: none; } } @media screen and (max-width: 1000px) { .index-wrap .part4 .list li span { display: block; line-height: 40px; } } .index-wrap .part4 .list li a { display: inline-block; margin-left: 2%; font-size: 13px; line-height: 60px; color: #666; -webkit-transition: all 0.5s; transition: all 0.5s; } @media screen and (max-width: 1550px) { .index-wrap .part4 .list li a { margin-left: 0; } } @media screen and (max-width: 1280px) { .index-wrap .part4 .list li a { padding: 17px 0; line-height: 2; } } @media screen and (max-width: 1000px) { .index-wrap .part4 .list li a { width: 70%; padding: 7px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } .index-wrap .part4 .list li a:hover { color: #e60012; } .index-wrap .part4 .list li a.new { position: relative; } .index-wrap .part4 .list li a.new span { display: inline-block; width: 42px; background-color: #e60012; font-size: 13px; line-height: 20px; color: #fff; text-align: center; } .index-wrap .part4 .list .btn { height: 38px; margin-top: 24px; text-align: center; } .index-wrap .part4 .list .btn a { display: inline-block; width: 196px; height: 36px; border: 1px solid #4e5051; font-size: 14px; line-height: 36px; color: #000; text-align: center; -webkit-transition: all 0.5s; transition: all 0.5s; } .index-wrap .part4 .list .btn a:hover { border-color: #e60012; background-color: #e60012; color: #fff; } .about-main { width: calc(1100px - 6%); padding: 3.5% 3% 5.5%; background-color: #fff; margin: 0 auto; font-size: 14px; line-height: 30px; color: #666; } @media screen and (max-width: 1400px) { .about-main { width: 84%; } } .about-main > img { float: left; width: 30%; } @media screen and (max-width: 1000px) { .about-main > img { float: none; width: 100%; margin-bottom: 5%; } } .about-main .intro { float: right; width: 65%; } @media screen and (max-width: 1000px) { .about-main .intro { float: none; width: 100%; } } .about-main .intro h2 { font-size: 24px; line-height: 74px; color: #333; text-align: center; } .intro-wrap .title { font-size: 18px; line-height: 28px; color: #000; } .intro-wrap .title p.en { font: 36px/1 Arial; color: #d9d9d9; } .intro-wrap .main { width: 1100px; margin: 0 auto; } @media screen and (max-width: 1400px) { .intro-wrap .main { width: 90%; } } .intro-wrap .part { padding: 5% 0; } @media screen and (max-width: 1000px) { .intro-wrap .part { padding: 10% 0; } } .intro-wrap .part1 { background-color: #f5f5f5; } .intro-wrap .part1 .box { margin-top: 4%; } .intro-wrap .part1 .image { position: relative; float: left; width: 28%; padding: 10px 0 0 10px; } @media screen and (max-width: 1000px) { .intro-wrap .part1 .image { float: none; width: calc(100% - 10px); margin: 4% 0; } } .intro-wrap .part1 .image::before, .intro-wrap .part1 .image::after { content: ""; display: inline-block; position: absolute; left: 0; top: 0; background-color: #e60012; } .intro-wrap .part1 .image::before { width: calc(100% - 10px); height: 10px; } .intro-wrap .part1 .image::after { width: 10px; height: calc(100% - 10px); } .intro-wrap .part1 .in { float: right; width: 62%; font-size: 14px; line-height: 30px; color: #666; } @media screen and (max-width: 1000px) { .intro-wrap .part1 .in { float: none; width: 100%; } } .intro-wrap .part1 .in h2 { margin-bottom: 3%; font-size: 24px; line-height: 40px; color: #333; } .intro-wrap .part2{ position: relative; } .intro-wrap .part2 .list { position: relative; overflow: hidden; height: 536px; margin-top: 10px; background: url(../img/bg_bg02.png) no-repeat left 148px; } .intro-wrap .part2 .list li { float: left; width: 233px; height: 464px; padding-top: 72px; font-size: 14px; line-height: 24px; color: #666; text-align: center; } .intro-wrap .part2 .list li .year { padding: 103px 0 180px; background: url(../img/bg_sign04.png) no-repeat center top; font-weight: bold; font-size: 30px; line-height: 2; color: #fff; text-align: center; } .intro-wrap .part2 .list li:nth-child(2n) { padding-top: 0; } .intro-wrap .part2 .list li:nth-child(2n) .year { padding: 183px 0 149px; background: url(../img/bg_sign05.png) no-repeat center top; } .intro-wrap .part2 .list li:hover .year { background-position: center bottom; } .intro-wrap .part2 .list li .box { display: table; width: 100%; height: 72px; } .intro-wrap .part2 .list li .box p { display: table-cell; vertical-align: bottom; width: 100%; } .intro-wrap .part2 .btn{ position: absolute; top: 50%; width: 48px; height: 48px; margin-top: -24px; cursor: pointer; transtion: all .5s; } .intro-wrap .part2 .btn.prev{ left: 0; background: url(../img/prevn.png) no-repeat left center; } .intro-wrap .part2 .btn.prev:hover{ background-position: right center; } .intro-wrap .part2 .btn.next{ right: 0; background: url(../img/nextn.png) no-repeat right center; } .intro-wrap .part2 .btn.next:hover{ background-position: left center; } .intro-wrap .part3 { background-color: #f5f5f5; } .intro-wrap .part3 .list { margin: 5% auto 0; } @media screen and (max-width: 1400px) { .intro-wrap .part3 .list { width: 530px; } } @media screen and (max-width: 1000px) { .intro-wrap .part3 .list { width: 340px; margin-top: 10%; } } @media screen and (max-width: 320px) { .intro-wrap .part3 .list { width: 100%; margin-top: 10%; } } .intro-wrap .part3 li { float: left; position: relative; width: 150px; height: 207px; margin-right: 40px; font-size: 14px; line-height: 24px; color: #666; text-align: center; } .intro-wrap .part3 li b { display: inline-block; width: 110px; height: 110px; border-radius: 50%; margin: 0 auto 25px; background-color: #c2c2c2; font-size: 16px; line-height: 110px; color: #fff; -webkit-transition: all 0.5s; transition: all 0.5s; } .intro-wrap .part3 li::after { content: ""; display: inline-block; position: absolute; right: -40px; top: 55px; width: 32px; height: 1px; background-color: #dbdbdb; } .intro-wrap .part3 li:last-child { margin-right: 0; } .intro-wrap .part3 li:last-child::after { display: none; } .intro-wrap .part3 li:hover{ color: #e60012; } .intro-wrap .part3 li:hover b { background-color: #e60012; } @media screen and (max-width: 1400px) { .intro-wrap .part3 li { margin-bottom: 25px; } .intro-wrap .part3 li:nth-child(3n) { margin-right: 0; } .intro-wrap .part3 li:nth-child(3n)::after { display: none; } } @media screen and (max-width: 1000px) { .intro-wrap .part3 li:nth-child(3n) { margin-right: 40px; } .intro-wrap .part3 li:nth-child(3n)::after { display: block; } .intro-wrap .part3 li:nth-child(2n) { margin-right: 0; } .intro-wrap .part3 li:nth-child(2n)::after { display: none; } } @media screen and (max-width: 320px) { .intro-wrap .part3 li { width: 135px; margin-right: 18px; } .intro-wrap .part3 li::after { right: -18px; width: 14px; } .intro-wrap .part3 li:nth-child(3n) { margin-right: 18px; } .intro-wrap .part3 li:nth-child(2n) { margin-right: 0; } } .intro-wrap .part4 .list { position: relative; margin-top: 50px; padding-bottom: 35px; } .intro-wrap .part4 .list .in { position: relative; overflow: hidden; height: 304px; margin: 0 auto; } @media screen and (max-width: 1400px) { .intro-wrap .part4 .list .in { width: 726px; } } @media screen and (max-width: 1000px) { .intro-wrap .part4 .list .in { width: 288px; height: 264px; } } .intro-wrap .part4 .list ul { width: 1128px; } .intro-wrap .part4 .list li { float: left; width: 350px; margin-right: 26px; } .intro-wrap .part4 .list li p { min-height: 56px; margin-top: 20px; font-size: 14px; line-height: 2; color: #666; text-align: center; } @media screen and (max-width: 1000px) { .intro-wrap .part4 .list li { width: 288px; margin-right: 20px; } } .intro-wrap .part4 .list .btns { position: absolute; left: 50%; bottom: 0; height: 14px; text-align: center; } .intro-wrap .part4 .list .btns span { display: inline-block; float: left; width: 14px; height: 14px; border-radius: 7px; margin: 0 8px; background-color: #fff; box-shadow: inset 5px 5px 5px rgba(188, 188, 188, 0.68); cursor: pointer; -webkit-transition: all 0.5s; transition: all 0.5s; } .intro-wrap .part4 .list .btns span.cur { background-color: #e10011; box-shadow: inset 5px 5px 5px rgba(131, 1, 11, 0.75); } .intro-wrap .part5 .image { float: right; padding: 10px 10px 0 0; } .intro-wrap .part5 .image::before, .intro-wrap .part5 .image::after { left: auto; right: 0; } .intro-wrap .part5 .in { float: left; } .news-main { width: calc(1100px - 7%); padding: 3.5%; background-color: #fff; margin: 0 auto; } @media screen and (max-width: 1400px) { .news-main { width: 83%; } } .news-main .title { margin-bottom: 25px; font-size: 30px; line-height: 40px; color: #000; } .news-main .title p.en { font: 36px/1 Arial; color: #dadada; opacity: .3; } .news-main .list { border-top: 1px solid #dedede; } .news-main .list li { border-bottom: 1px solid #dedede; font-size: 12px; line-height: 60px; color: #808080; } @media screen and (max-width: 1000px) { .news-main .list li { line-height: 50px; } } .news-main .list li a { display: inline-block; width: calc(90% - 65px); font-size: 14px; line-height: 60px; color: #666; -webkit-transition: all 0.5s; transition: all 0.5s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media screen and (max-width: 1000px) { .news-main .list li a { line-height: 50px; } } .news-main .list li a:hover { color: #e60012; } .news-main .list li a.new { position: relative; } .news-main .list li a.new span { display: inline-block; width: 42px; background-color: #e60012; font-size: 13px; line-height: 20px; color: #fff; text-align: center; } .news-main .list .page { margin-top: 3.5%; } .news-main h2 { font-size: 28px; line-height: 46px; color: #333; text-align: center; } .news-main .time { padding-bottom: 25px; border-bottom: 1px solid #e6e6e6; margin-bottom: 25px; font-size: 13px; line-height: 2; color: #999; text-align: center; } .news-main .info-detail { font-size: 16px; line-height: 26px; color: #666; } .news-main .info-detail img{ display: block; max-width: 100%; margin: 0 auto; } .news-main .turn { position: relative; padding-top: 15px; border-top: 1px solid #e6e6e6; margin-top: 50px; font-size: 13px; line-height: 2; color: #666; } .news-main .turn a { color: #666; -webkit-transition: all 0.5s; transition: all 0.5s; } .news-main .turn a.back { position: absolute; right: 0; top: 20px; padding-top: 15px; background: url(../img/bg_btn06.png) no-repeat center top; } .news-main .turn a:hover { color: #e60012; } .news-main .video-box { position: relative; width: 87%; margin: 3% auto; } @media screen and (max-width: 1000px) { .news-main .video-box { width: 100%; margin: 0; } } .news-main .video-box video { position: absolute; left: 0; top: 0; } .service-main .main { width: 1100px; margin: 0 auto; } .service-main .title { font-size: 24px; line-height: 46px; color: #333; } .service-main .title p.en { font-size: 60px; line-height: 1; color: #d7d7d7; text-transform: uppercase; } .service-main .part1 { padding: 3% 0 3.7%; background-color: #f5f5f5; } .service-main .part1 .title { float: left; width: 43%; } .service-main .part1 .box { float: right; width: 57%; font-size: 14px; line-height: 30px; color: #666; } .service-main .part1 .box h3 { margin-bottom: 16px; font-size: 24px; line-height: 44px; color: #333; } .service-main .part1 .box img { display: block; max-width: 100%; margin-top: 5%; } @media screen and (max-width: 1120px) { .service-main .part1 .title { float: none; width: 100%; padding-bottom: 5%; } .service-main .part1 .box { float: none; width: 100%; } } .service-main .part2 { padding: 4.6% 0 4.2%; } .service-main .part2 .box { margin-top: 5%; font-size: 14px; line-height: 24px; color: #666; } .service-main .part2 .in { float: left; width: 45%; font-size: 14px; line-height: 24px; color: #666; } .service-main .part2 .in img { display: block; max-width: 100%; margin-bottom: 6%; } .service-main .part2 .in:last-child { float: right; } .service-main .part2 .in:last-child img { margin: 12% 0 0; } @media screen and (max-width: 1120px) { .service-main .part2 .in { float: none; width: 100%; margin-bottom: 5%; } .service-main .part2 .in:last-child { margin-bottom: 0; } } .service-main .part3 { padding: 5% 0; background-color: #f5f5f5; } .service-main .part3 .box { margin-top: 4%; } .service-main .part3 .intro { float: left; width: 46.3%; font-size: 14px; line-height: 24px; color: #666; } .service-main .part3 .intro .tab { margin-top: 16.8%; font-size: 12px; line-height: 18px; color: #666; text-align: center; } .service-main .part3 .intro .tab .in { float: left; width: 24%; } .service-main .part3 .intro .tab .in:nth-child(2) { margin: 0 14%; } @media screen and (max-width: 1120px) { .service-main .part3 .intro { float: none; width: 100%; } .service-main .part3 .intro .tab { margin-top: 5%; } } .service-main .part3 .list { float: right; width: 39%; padding-left: 8%; border-left: 1px solid #e6e6e6; } .service-main .part3 .list h3 { padding-bottom: 3%; font-size: 18px; line-height: 28px; color: #333; } .service-main .part3 .list li { position: relative; padding: 4px 0 4px 20px; font-size: 14px; line-height: 22px; color: #666; } .service-main .part3 .list li::before { content: ""; display: inline-block; position: absolute; left: 0; top: 13px; width: 4px; height: 4px; border-radius: 2px; background-color: #00072c; } .service-main .part3 .list .btn { width: 35%; margin-top: 9%; background-color: #000; font-size: 14px; line-height: 38px; color: #fff; text-align: center; cursor: pointer; } @media screen and (max-width: 1120px) { .service-main .part3 .list { float: none; width: 100%; padding-left: 0; border-left: 0; margin-top: 5%; } } .service-main .part4 { padding: 4.5% 0; } .service-main .part4 .box { margin-top: 4.8%; font-size: 14px; line-height: 30px; color: #666; } .service-main .part4 .box .in { float: left; width: 45.5%; } .service-main .part4 .box .in:last-child { float: right; } .service-main .part4 .box .in h3 { margin: 7.4% 0 3%; font-size: 24px; line-height: 30px; color: #333; } @media screen and (max-width: 1120px) { .service-main .part4 .box .in { float: none; width: 100%; margin-bottom: 5%; } .service-main .part4 .box .in:last-child { margin-bottom: 0; } } @media screen and (max-width: 1400px) { .service-main .part { padding: 10% 0; } .service-main .main { width: 90%; } } .network-list { position: relative; width: 1100px; margin: -20px auto 0; } @media screen and (max-width: 1400px) { .network-list { width: 90%; } } .network-list li { width: 266px; margin-bottom: 20px; box-shadow: 5px 5px 5px rgba(245, 245, 245, 0); -webkit-transition: all 0.5s; transition: all 0.5s; } .network-list li .intro { padding: 20px 28px 14px; background-color: #fff; } .network-list li .intro a { display: inline-block; min-height: 126px; font-size: 12px; line-height: 18px; color: #4c4c4c; -webkit-transition: all 0.5s; transition: all 0.5s; } .network-list li .intro a.tit { min-height: 32px; padding-bottom: 8px; font-size: 16px; line-height: 2; color: #333; } .network-list li .intro a:hover { color: #e60012; } .network-list li:hover { box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); } .network-load { display: none; position: relative; height: 80px; } .network-main { width: calc(1100px - 7%); padding: 3.5%; background-color: #fff; margin: 0 auto; } @media screen and (max-width: 1400px) { .network-main { width: 80%; padding: 5%; } } .network-main .top { position: relative; padding-bottom: 25px; border-bottom: 1px solid #e6e6e6; margin-bottom: 25px; } .network-main .top h2 { padding-bottom: 6px; font-size: 28px; line-height: 2; color: #333; } .network-main .top span { display: inline-block; padding-left: 30px; font-size: 12px; line-height: 2; color: #666; background: url(../img/bg_sign06.png) no-repeat 2px top; } .network-main .top span:last-child { margin-left: 24px; background-position: 2px bottom; } @media screen and (max-width: 1000px) { .network-main .top span { width: calc(100% - 24px); margin: 0 0 2% 0; } .network-main .top span:last-child { margin-left: 0; } } .network-main .top a { display: inline-block; position: absolute; right: 0; top: 46px; padding-top: 16px; background: url(../img/bg_btn06.png) no-repeat center top; font-size: 12px; line-height: 2; color: #666; -webkit-transition: all 0.5s; transition: all 0.5s; } .network-main .top a:hover { color: #e60012; } @media screen and (max-width: 1000px) { .network-main .top a { position: relative; top: 0; float: right; margin-top: 3%; } } @media screen and (max-width: 1000px) { .network-main .top { padding-bottom: 5%; } } .network-main .intro { font-size: 14px; line-height: 24px; color: #666; } @media screen and (max-width: 1000px) { .network-main .intro img { float: none !important; width: 100% !important; margin: 0 0 5% !important; } } .join-list { width: 1100px; margin: 0 auto; } .join-list ul { width: 1113px; } .join-list li { float: left; width: 312px; height: 209px; padding: 24px 22px 27px; background: url(../img/bg_bg03.png) no-repeat center top; box-shadow: 5px 0 10px rgba(0, 0, 0, 0.06); margin: 0 15px 20px 0; font-size: 12px; line-height: 2; color: #999; } .join-list li a.t { display: inline-block; width: 100%; height: 48px; margin-bottom: 3px; font-size: 24px; line-height: 2; color: #444; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .join-list li span { display: inline-block; padding: 0 18px 0 22px; background: url(../img/bg_sign07.png) no-repeat left top; } .join-list li span:last-child { padding-right: 0; } .join-list li .tips { margin-top: 7px; height: 48px; margin-bottom: 12px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .join-list li .tips a { color: #999; } .join-list li a.btn { display: inline-block; width: 52px; height: 31px; margin: 24px 0 0 7px; background: url(../img/bg_btn07.png) no-repeat center top; } .join-list li:hover { background-position: center bottom; color: #fff; } .join-list li:hover a.t { color: #fff; } .join-list li:hover span { background-position: left bottom; } .join-list li:hover .tips a { color: #fff; } .join-list li:hover a.btn { background-position: center bottom; } @media screen and (max-width: 1400px) { .join-list { width: 727px; } .join-list ul { width: 742px; } } @media screen and (max-width: 1000px) { .join-list { width: 90%; } .join-list ul { width: 100%; } .join-list li { width: calc(100% - 44px); height: auto; border-bottom: 6px solid #bfbfbf; border-radius: 6px; background: #fff; margin: 0; margin-bottom: 20px; } .join-list li:hover { color: #999; } .join-list li:hover a.t { color: #444; } .join-list li:hover span { background-position: left top; } .join-list li:hover .tips a { color: #999; } .join-list li:hover a.btn { background-position: center top; } } .contact-main { width: 1100px; margin: 0 auto; } @media screen and (max-width: 1400px) { .contact-main { width: 90%; } } .contact-main .map { position: relative; overflow: hidden; z-index: 1; width: calc(100% - 18px); padding: 9px 9px 51px; background-color: #fff; margin-bottom: 4.2%; font-size: 14px; line-height: 30px; color: #666; } .contact-main .map .box { position: relative; min-height: 300px; } .contact-main .map .box .in { font-size: 12px; line-height: 2; color: #666; } .contact-main .map .tips { padding: 2.4% 4.3% 0; } .contact-main .map .tips h2 { padding-bottom: 6px; border-bottom: 1px solid #e6e6e6; margin-bottom: 18px; font-size: 18px; line-height: 2; color: #e60012; } .contact-main .map .tips p { padding-left: 36px; background: url(../img/bg_sign08.png) no-repeat left top; } .contact-main .map .tips p:nth-child(2) { background-position: left -30px; } .contact-main .map .tips p:nth-child(3) { background-position: left -60px; } .contact-main .map .tips p:nth-child(4) { background-position: left -90px; } .contact-main .list { position: relative; height: 346px; } .contact-main .list .in { position: relative; overflow: hidden; width: 1098px; height: 288px; margin: 0 auto; } @media screen and (max-width: 1400px) { .contact-main .list .in { width: 820px; } } @media screen and (max-width: 1200px) { .contact-main .list .in { width: 542px; } } @media screen and (max-width: 1000px) { .contact-main .list .in { width: 264px; } } .contact-main .list .in ul { width: 1098px; } .contact-main .list .in li { float: left; width: 264px; height: 288px; border-radius: 4px; background-color: #fff; margin-right: 14px; font-size: 14px; line-height: 26px; color: #999; } .contact-main .list .in li img { display: block; border-radius: 4px 4px 0 0; } .contact-main .list .in li h3 { padding-bottom: 6px; border-bottom: 1px solid #e9e7e4; margin: 12px 0 9px 20px; font-size: 16px; line-height: 2; color: #333; } .contact-main .list .in li .tips { padding-left: 20px; } .contact-main .list .in li:last-child { margin-right: 0; } .contact-main .list .btns { position: absolute; left: 50%; bottom: 0; height: 14px; text-align: center; } .contact-main .list .btns span { display: inline-block; float: left; width: 14px; height: 14px; border-radius: 7px; margin: 0 8px; background-color: #fff; box-shadow: inset 5px 5px 5px rgba(188, 188, 188, 0.68); cursor: pointer; -webkit-transition: all 0.5s; transition: all 0.5s; } .contact-main .list .btns span.cur { background-color: #e10011; box-shadow: inset 5px 5px 5px rgba(131, 1, 11, 0.75); } .pd-box { position: relative; overflow: hidden; min-height: 100vh; } .pd-box.bg { background-color: #000; } .pd-box .box { float: left; position: relative; overflow: hidden; margin-left: -0.01%; background-size: cover; opacity: 0; } .pd-box .box img { opacity: 0; } .pd-box .box .bg { -webkit-transition: all 0.5s; transition: all 0.5s; } .pd-box .box .tips { text-align: center; } .pd-box .box .tips a { display: table; width: 90%; height: 100%; padding: 0 5%; font-size: 20px; line-height: 2; color: #fff; } .pd-box .box .tips a span { display: table-cell; vertical-align: middle; } .pd-box .box .tips a i { font-style: normal; font-size: 14px; line-height: 36px; color: #fff; } .pd-box .box .name { position: absolute; left: 50%; bottom: 2.8%; width: 54.8%; height: 19.8%; margin-left: -27.4%; background: rgba(255, 255, 255, 0.9); text-align: center; } .pd-box .box .name a { display: table; width: calc(100% - 20px); height: calc(100% - 20px); border: 1px solid #0b0305; margin: 10px; font-size: 18px; line-height: 2; color: #000; } .pd-box .box .name a span { display: table-cell; vertical-align: middle; } .pd-box .box .name.full { left: 0; bottom: 0; width: 100%; height: 100%; margin-left: 0; background: none; } .pd-box .box .name.mid { height: 59.2%; bottom: 20.4%; } .pd-box .box.white a, .pd-box .box.white i { color: #000; } .pd-box .box:hover .bg { -webkit-transform: scale(0.95); -ms-transform: scale(0.95); transform: scale(0.95); } @media screen and (max-width: 1530px) { .pd-box .box { margin-left: 0; } } .pd-box .w1 { width: 16.67%; } @media screen and (max-width: 1530px) { .pd-box .w1 { width: 25%; } } @media screen and (max-width: 1000px) { .pd-box .w1 { width: 50%; } } .pd-box .w2 { width: 33.34%; } @media screen and (max-width: 1530px) { .pd-box .w2 { width: 50%; } } @media screen and (max-width: 1000px) { .pd-box .w2 { width: 100%; } } @media screen and (max-width: 1530px) { .pd-box .w2.full { width: 100%; } } @media screen and (max-width: 1530px) { .pd-box .w2.w3 { width: 33.34%; margin-left: -0.01%; } } @media screen and (max-width: 1000px) { .pd-box .w2.w3 { width: 100%; height: auto !important; margin-left: 0; } } .pd-box .btn { position: absolute; top: 50%; width: 49px; height: 214px; margin-top: -107px; cursor: pointer; -webkit-transition: all 0.5s; transition: all 0.5s; } .pd-box .btn.prev { left: 0; background: url(../img/prev04.png) no-repeat left center; } .pd-box .btn.prev:hover { background-position: right center; } .pd-box .btn.next { right: 0; background: url(../img/next04.png) no-repeat right center; } .pd-box .btn.next:hover { background-position: left center; } .pd-list { position: relative; width: calc(100% - 251px); height: 100vh; margin-left: 250px; border-left: 1px solid #d6d6d6; background-repeat: no-repeat; background-position: center; background-size: cover; } .pd-list footer { position: absolute; left: 0; bottom: 0; width: calc(100% - 140px); } @media screen and (max-width: 1680px) { .pd-list footer { padding-right: 70px; } } @media screen and (max-width: 1440px) { .pd-list footer { padding-right: 70px; } } @media screen and (max-width: 1280px) { .pd-list footer { padding-right: 70px; } } .pd-list .main { position: absolute; left: 16.5%; top: 45%; width: 67%; height: 422px; margin-top: -211px; } @media screen and (max-width: 1000px) { .pd-list .main { width: 90%; left: 5%; } } .pd-list .main h2 { margin-bottom: 30px; font-size: 24px; line-height: 38px; color: #fff; text-align: center; } .pd-list .main h2.durk { color: #333; } .pd-list .main h2 span { position: relative; display: inline-block; font-size: 18px; line-height: 30px; color: #fff; } .pd-list .main h2 span::before, .pd-list .main h2 span::after { content: ""; display: inline-block; position: absolute; top: 14.5px; width: 60px; height: 1px; background-color: #fff; } .pd-list .main h2 span::before { left: -78px; } .pd-list .main h2 span::after { right: -78px; } .pd-list .main .list { position: relative; height: 324px; } .pd-list .main .list .btn { position: absolute; top: 50%; width: 46px; height: 80px; margin-top: -40px; cursor: pointer; -webkit-transition: all 0.5s; transition: all 0.5s; } .pd-list .main .list .btn.prev { left: 0; background: url(../img/prev02.png) no-repeat left center; } .pd-list .main .list .btn.prev:hover { background-position: right center; } .pd-list .main .list .btn.next { right: 0; background: url(../img/next02.png) no-repeat right center; } .pd-list .main .list .btn.next:hover { background-position: left center; } @media screen and (max-width: 1000px) { .pd-list .main .list .btn { display: none; } } .pd-list .main .list .in { position: relative; overflow: hidden; width: 69%; height: 324px; margin: 0 auto; } @media screen and (max-width: 1000px) { .pd-list .main .list .in { width: 100%; } } .pd-list .main .list .in ul{ min-width: 328px; } .pd-list .main .list .in li { float: left; width: 185px; height: 160px; background: url(../img/bg_sign09.png) no-repeat center top; margin: 82px 0 0 -42px; } .pd-list .main .list .in li:first-child { margin-left: 0; } .pd-list .main .list .in li:nth-child(3n-1) { margin: 0 0 0 -42px; } .pd-list .main .list .in li:nth-child(3n) { margin: 164px 0 0 -185px; } .pd-list .main .list .in li a { display: table; width: 90%; height: 100%; padding: 0 5%; font-size: 18px; line-height: 2; color: #2e2e2e; text-align: center; } .pd-list .main .list .in li a span { display: table-cell; vertical-align: middle; } .pd-list .main .list .in li:hover { background-position: center bottom; } .pd-list .main .list .in li:hover a { color: #fff; } .pd-list .main .list-other .in li { width: 168px; height: 168px; background: url(../img/bg_sign10.png) no-repeat center top; margin: 0 0 0 -83px; } .pd-list .main .list-other .in li:nth-child(3n-1) { margin: 0 0 0 -83px; } .pd-list .main .list-other .in li:nth-child(3n) { margin: 0 0 0 -83px; } .pd-list .main .list-other .in li:nth-child(2n) { margin: 155px 0 0 -83px; } .pd-list .main .list-other .in li a { font-size: 18px; line-height: 2; } @media screen and (max-width: 1000px) { .pd-list { width: 100%; height: calc(100vh - 44px); border-left: 0; margin-left: 0; } .pd-list footer { display: none; } } .pdinfo-wrap { padding: 60px 0; background-color: #f5f5f5; } @media screen and (max-width: 1000px) { .pdinfo-wrap { padding: 10% 0; } } .pdinfo-wrap .main { width: 1100px; margin: 0 auto; } @media screen and (max-width: 1400px) { .pdinfo-wrap .main { width: 90%; } } .pdinfo-wrap .tabs { width: calc(1100px - 11.2%); margin: 0 auto; padding: 1.8% 3.5% 0 7.7%; background-color: #d1d1d1; font-size: 16px; line-height: 26px; color: #333; } @media screen and (max-width: 1400px) { .pdinfo-wrap .tabs { width: 78.8%; } } @media screen and (max-width: 1000px) { .pdinfo-wrap .tabs { margin-bottom: 10%; } } .pdinfo-wrap .tabs h2 { font-size: 24px; line-height: 36px; color: #333; } .pdinfo-wrap .tabs .in { margin-top: 1.5%; } .pdinfo-wrap .tabs .in span { float: left; display: inline-block; width: calc(23% - 2px); padding-left: 2%; margin-right: 2px; font-size: 18px; line-height: 60px; color: #333; background: url(../img/bg_btn08.png) no-repeat right -8px #fff; cursor: pointer; } .pdinfo-wrap .tabs .in span:nth-child(2) { background-position: right -84px; } .pdinfo-wrap .tabs .in span:nth-child(3) { background-position: right -160px; } .pdinfo-wrap .tabs .in span:nth-child(4) { background-position: right -236px; } @media screen and (max-width: 1000px) { .pdinfo-wrap .tabs .in span { width: calc(48% - 2px); line-height: 56px; background-size: auto 224px; margin-bottom: 2px; } .pdinfo-wrap .tabs .in span:nth-child(1) { background-position: right -8px; } .pdinfo-wrap .tabs .in span:nth-child(2) { background-position: right -64px; } .pdinfo-wrap .tabs .in span:nth-child(3) { background-position: right -120px; } .pdinfo-wrap .tabs .in span:nth-child(4) { background-position: right -176px; } } .pdinfo-wrap .tabs .in span.cur { background-color: #e60012; color: #fff; } .pdinfo-wrap .detail { padding: 60px 0; font-size: 14px; line-height: 30px; color: #666; } .pdinfo-wrap .detail img{ max-width: 100%; } @media screen and (max-width: 1000px) { .pdinfo-wrap .detail { padding: 10% 0; } } .pdinfo-wrap .detail:nth-child(2n+1) { background-color: #e6e6e6; } .pdinfo-wrap .detail h2 { font-size: 24px; line-height: 40px; color: #2f2f2f; } .pdinfo-wrap .detail h3 { font-size: 16px; line-height: 30px; color: #333; } .pdinfo-wrap .detail .in { margin: 24px 0; } .pdinfo-wrap > .detail:first-child { padding: 0; background: none; } .pdinfo-wrap .turn { padding-top: 25px; font-size: 12px; line-height: 36px; color: #666; } @media screen and (max-width: 1000px) { .pdinfo-wrap .turn { line-height: 2; } } .pdinfo-wrap .turn .in { position: relative; padding-top: 30px; border-top: 1px solid #e6e6e6; margin-top: 30px; line-height: 30px; } .pdinfo-wrap .turn a { color: #666; -webkit-transition: all 0.5s; transition: all 0.5s; } .pdinfo-wrap .turn a.back { position: absolute; right: 0; top: 40px; padding-top: 15px; background: url(../img/bg_btn06.png) no-repeat center top; } .pdinfo-wrap .turn a:hover { color: #e60012; } .search-wrap { padding: 3.5% 0; background-color: #f5f5f5; } @media screen and (max-width: 1000px) { .search-wrap { padding: 10% 0; } } .search-wrap .list { width: 69.5%; margin: 0 auto; } .search-wrap .list li { float: left; position: relative; width: 28%; margin: 0 2.65% 4.5%; text-align: center; } @media screen and (max-width: 1000px) { .search-wrap .list li { width: 100%; margin: 0; margin-bottom: 10%; } } .search-wrap .list a { position: absolute; left: 0; top: 0; width: 90%; height: 100%; padding: 0 5%; } .search-wrap .list a span { display: table; width: 100%; height: 100%; } .search-wrap .list a span i { display: table-cell; vertical-align: middle; font-style: normal; -webkit-transition: all 0.5s; transition: all 0.5s; font-size: 24px; line-height: 1; color: #333; } @media screen and (max-width: 1366px) { .search-wrap .list a span i { font-size: 16px; } } @media screen and (max-width: 1000px) { .search-wrap .list a span i { font-size: 24px; } } .search-wrap .list a:hover i { color: #e60012; } .pdd-list li { float: left; position: relative; width: 33.34%; margin-left: -0.01%; } .pdd-list li .bg, .pdd-list li .tips { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-transition: all 0.5s; transition: all 0.5s; } .pdd-list li a { display: table; width: 90%; height: 100%; padding: 0 5%; font-size: 24px; line-height: 2; color: #fff; text-align: center; } .pdd-list li em { display: table-cell; vertical-align: middle; font-style: normal; } .pdd-list li:hover .bg { -webkit-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); } @media screen and (max-width: 1280px) { .pdd-list li { width: 50%; margin-left: 0; } } @media screen and (max-width: 1000px) { .pdd-list li { width: 100%; } } /*# sourceMappingURL=style.css.map */ .side{ position: fixed; right: 0; top: 30%; width: 52px; height: 158px; z-index: 10; } .side a{ display: inline-block; float: left; width: 52px; height: 52px; background-color: #8e8b8b; -webkit-transition: all 0.5s; transition: all 0.5s; } .side a:hover{ background-color: #e60012; } .side a:nth-child(2){ margin: 1px 0; } .side > img{ display: none; position: absolute; right: 62px; top: -26px; border: 4px solid #333; } .side > img:last-child{ top: auto; bottom: -26px; }