/*! normalize.css v1.1.0 | MIT License | git.io/normalize */ /* ========================================================================== HTML5 display definitions ========================================================================== */ /** * Correct `block` display not defined in IE 6/7/8/9 and Firefox 3. */ article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } /** * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. */ audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } /** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /** * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4. * Known issue: no IE 6 support. */ [hidden] { display: none; } /* ========================================================================== Base ========================================================================== */ /** * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using * `em` units. * 2. Prevent iOS text size adjust after orientation change, without disabling * user zoom. */ html { font-size: 100%; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -ms-text-size-adjust: 100%; /* 2 */ } /** * Address `font-family` inconsistency between `textarea` and other form * elements. */ html, button, input, select, textarea { font-family: sans-serif; } /** * Address margins handled incorrectly in IE 6/7. */ body { margin: 0; } /* ========================================================================== Links ========================================================================== */ /** * Address `outline` inconsistency between Chrome and other browsers. */ a { text-decoration: none; color: #666666; } a:focus { outline:0; } /** * Improve readability when focused and also mouse hovered in all browsers. */ a:active, a:hover { outline: 0; } /* ========================================================================== Typography ========================================================================== */ /** * Address font sizes and margins set differently in IE 6/7. * Address font sizes within `section` and `article` in Firefox 4+, Safari 5, * and Chrome. */ h1 { font-size: 2em; margin: 0.67em 0; } h2 { font-size: 1.5em; margin: 0.83em 0; } h3 { font-size: 1.17em; margin: 1em 0; } h4 { font-size: 1em; margin: 1.33em 0; } h5 { font-size: 0.83em; margin: 1.67em 0; } h6 { font-size: 0.67em; margin: 2.33em 0; } /** * Address styling not present in IE 7/8/9, Safari 5, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /** * Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome. */ b, strong { font-weight: bold; } blockquote { margin: 1em 40px; } /** * Address styling not present in Safari 5 and Chrome. */ dfn { font-style: italic; } /** * Address differences between Firefox and other browsers. * Known issue: no IE 6/7 normalization. */ hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; } /** * Address styling not present in IE 6/7/8/9. */ mark { background: #ff0; color: #000; } /** * Address margins set differently in IE 6/7. */ p, pre { margin: 0; padding: 0; } /** * Correct font family set oddly in IE 6, Safari 4/5, and Chrome. */ code, kbd, pre, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; } /** * Improve readability of pre-formatted text in all browsers. */ pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } /** * Address CSS quotes not supported in IE 6/7. */ q { quotes: none; } /** * Address `quotes` property not supported in Safari 4. */ q:before, q:after { content: ''; content: none; } /** * 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; } /* ========================================================================== Lists ========================================================================== */ /** * Address margins set differently in IE 6/7. */ dl, menu, ol, ul { margin: 0; padding: 0; } dd { margin: 0; padding: 0; } /** * Address paddings set differently in IE 6/7. */ menu, ol, ul { list-style-type: none; } /** * Correct list images handled incorrectly in IE 7. */ nav ul, nav ol { list-style: none; list-style-image: none; } /* ========================================================================== Embedded content ========================================================================== */ /** * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3. * 2. Improve image quality when scaled in IE 7. */ img { border: 0; /* 1 */ -ms-interpolation-mode: bicubic; /* 2 */ } /** * Correct overflow displayed oddly in IE 9. */ svg:not(:root) { overflow: hidden; } /* ========================================================================== Figures ========================================================================== */ /** * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11. */ figure { margin: 0; } /* ========================================================================== Forms ========================================================================== */ /** * Correct margin displayed oddly in IE 6/7. */ form { margin: 0; } /** * 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 6/7/8/9. * 2. Correct text not wrapping in Firefox 3. * 3. Correct alignment displayed oddly in IE 6/7. */ legend { border: 0; /* 1 */ padding: 0; white-space: normal; /* 2 */ *margin-left: -7px; /* 3 */ } /** * 1. Correct font size not being inherited in all browsers. * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5, * and Chrome. * 3. Improve appearance and consistency in all browsers. */ button, input, select, textarea { font-size: 100%; /* 1 */ margin: 0; /* 2 */ vertical-align: baseline; /* 3 */ *vertical-align: middle; /* 3 */ } /** * Address Firefox 3+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ button, input { line-height: normal; } /** * 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 Chrome, Safari 5+, and IE 6+. * Correct `select` style inheritance in Firefox 4+ and Opera. */ 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; } /** * 1. Address box sizing set to content-box in IE 8/9. * 2. Remove excess padding in IE 8/9. * 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 */ } /** * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome * (include `-moz` to future-proof). */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; } /** * Remove inner padding and search cancel button in Safari 5 and Chrome * on OS X. */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * Remove inner padding and border in Firefox 3+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /** * 1. Remove default vertical scrollbar in IE 6/7/8/9. * 2. Improve readability and alignment in all browsers. */ textarea { overflow: auto; /* 1 */ vertical-align: top; /* 2 */ } /* ========================================================================== Tables ========================================================================== */ /** * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } /* * HTML5 Boilerplate * * What follows is the result of much research on cross-browser styling. * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, * Kroc Camen, and the H5BP dev community and team. */ /* ========================================================================== Base styles: opinionated defaults ========================================================================== */ html, button, input, select, textarea { font-family: "Microsoft Yahei", Arial, sans-serif; color: #666; } body { font-size: 14px; line-height: 1.4; } img { width: auto; height: auto; } /* * Remove text-shadow in selection highlight: h5bp.com/i * These selection declarations have to be separate. * Customize the background color to match your design. */ ::-moz-selection { background: #b3d4fc; text-shadow: none; } ::selection { background: #b3d4fc; text-shadow: none; } /* * A better looking default horizontal rule */ hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } /* * Remove the gap between images and the bottom of their containers: h5bp.com/i/440 */ img { vertical-align: middle; } /* * Remove default fieldset styles. */ fieldset { border: 0; margin: 0; padding: 0; } /* * Allow only vertical resizing of textareas. */ textarea { resize: vertical; } /* ========================================================================== Chrome Frame prompt ========================================================================== */ .chromeframe { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; } /* ========================================================================== Helper classes ========================================================================== */ /* * Image replacement */ .ir { background-color: transparent; border: 0; overflow: hidden; /* IE 6/7 fallback */ *text-indent: -9999px; } .ir:before { content: ""; display: block; width: 0; height: 150%; } /* * Hide from both screenreaders and browsers: h5bp.com/u */ /* .hidden { display: none !important; visibility: hidden; } */ /* * Hide only visually, but have it available for screenreaders: h5bp.com/v */ .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; /* * Extends the .visuallyhidden class to allow the element to be focusable * when navigated to via the keyboard: h5bp.com/p */ } .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } /* * Hide visually and from screenreaders, but maintain layout */ .invisible { visibility: hidden; } /* * Clearfix: contain floats * * For modern browsers * 1. The space content is one way to avoid an Opera bug when the * `contenteditable` attribute is included anywhere else in the document. * Otherwise it causes space to appear at the top and bottom of elements * that receive the `clearfix` class. * 2. The use of `table` rather than `block` is only necessary if using * `:before` to contain the top-margins of child elements. */ .clearfix { /* * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */ *zoom: 1; } .clearfix:before, .clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ } .clearfix:after { clear: both; } /* ========================================================================== EXAMPLE Media Queries for Responsive Design. Theses examples override the primary ('mobile first') styles. Modify as content requires. ========================================================================== */ @media only screen and (min-width: 35em) { /* Style adjustments for viewports that meet the condition */ } @media print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { /* Style adjustments for high resolution devices */ } /* ========================================================================== Print styles. Inlined to avoid required HTTP connection: h5bp.com/r ========================================================================== */ @media print { * { background: transparent !important; color: #000 !important; /* Black prints faster: h5bp.com/s */ box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } /* * Don't show links for images, or javascript/internal links */ .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; /* h5bp.com/t */ } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } } h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; } .container { max-width: 1340px; margin: 0 auto; padding: 0 50px; } @media screen and (max-width: 480px) { .container { padding: 0; } } .fl { float: left; } .fr { float: right; } .fli { float: left !important; } .fri { float: right !important; } .fni { float: none !important; } .clear { clear: both; } .relative { position: relative; } /* grid */ .col-1 { float: left; width: 8.33333333%; *width: 8.23333333%; } @media screen and (max-width: 768px) { .col-1 { float: none; width: 100%; } } .offset-1 { margin-left: 8.33333333%; } @media screen and (max-width: 768px) { .offset-1 { margin-left: 0; } } .col-2 { float: left; width: 16.66666667%; *width: 16.56666667%; } @media screen and (max-width: 768px) { .col-2 { float: none; width: 100%; } } .offset-2 { margin-left: 16.66666667%; } @media screen and (max-width: 768px) { .offset-2 { margin-left: 0; } } .col-3 { float: left; width: 25%; *width: 24.9%; } @media screen and (max-width: 768px) { .col-3 { float: none; width: 100%; } } .offset-3 { margin-left: 25%; } @media screen and (max-width: 768px) { .offset-3 { margin-left: 0; } } .col-4 { float: left; width: 33.33333333%; *width: 33.23333333%; } @media screen and (max-width: 768px) { .col-4 { float: none; width: 100%; } } .offset-4 { margin-left: 33.33333333%; } @media screen and (max-width: 768px) { .offset-4 { margin-left: 0; } } .col-5 { float: left; width: 41.66666667%; *width: 41.56666667%; } @media screen and (max-width: 768px) { .col-5 { float: none; width: 100%; } } .offset-5 { margin-left: 41.66666667%; } @media screen and (max-width: 768px) { .offset-5 { margin-left: 0; } } .col-6 { float: left; width: 50%; *width: 49.9%; } @media screen and (max-width: 768px) { .col-6 { float: none; width: 100%; } } .offset-6 { margin-left: 50%; } @media screen and (max-width: 768px) { .offset-6 { margin-left: 0; } } .col-7 { float: left; width: 58.33333333%; *width: 58.23333333%; } @media screen and (max-width: 768px) { .col-7 { float: none; width: 100%; } } .offset-7 { margin-left: 58.33333333%; } @media screen and (max-width: 768px) { .offset-7 { margin-left: 0; } } .col-8 { float: left; width: 66.66666667%; *width: 66.56666667%; } @media screen and (max-width: 768px) { .col-8 { float: none; width: 100%; } } .offset-8 { margin-left: 66.66666667%; } @media screen and (max-width: 768px) { .offset-8 { margin-left: 0; } } .col-9 { float: left; width: 75%; *width: 74.9%; } @media screen and (max-width: 768px) { .col-9 { float: none; width: 100%; } } .offset-9 { margin-left: 75%; } @media screen and (max-width: 768px) { .offset-9 { margin-left: 0; } } .col-10 { float: left; width: 83.33333333%; *width: 83.23333333%; } @media screen and (max-width: 768px) { .col-10 { float: none; width: 100%; } } .offset-10 { margin-left: 83.33333333%; } @media screen and (max-width: 768px) { .offset-10 { margin-left: 0; } } .col-11 { float: left; width: 91.66666667%; *width: 91.56666667%; } @media screen and (max-width: 768px) { .col-11 { float: none; width: 100%; } } .offset-11 { margin-left: 91.66666667%; } @media screen and (max-width: 768px) { .offset-11 { margin-left: 0; } } .col-12 { float: left; width: 100%; *width: 99.9%; } @media screen and (max-width: 768px) { .col-12 { float: none; width: 100%; } } .offset-12 { margin-left: 100%; } @media screen and (max-width: 768px) { .offset-12 { margin-left: 0; } } .row { /* * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */ *zoom: 1; margin-right: -20px; } .row:before, .row:after { content: " "; /* 1 */ display: table; /* 2 */ } .row:after { clear: both; } @media screen and (max-width: 768px) { .row { margin-right: 0; } } .col-content { margin-right: 20px; } @media screen and (max-width: 768px) { .col-content { margin-right: 0; } } /* margin */ .margin-0 { margin: 0px; } .margin-t-0 { margin-top: 0px; } .margin-r-0 { margin-right: 0px; } .margin-b-0 { margin-bottom: 0px; } .margin-l-0 { margin-left: 0px; } .margin-1 { margin: 10px; } .margin-t-1 { margin-top: 10px; } .margin-r-1 { margin-right: 10px; } .margin-b-1 { margin-bottom: 10px; } .margin-l-1 { margin-left: 10px; } .margin-2 { margin: 20px; } .margin-t-2 { margin-top: 20px; } .margin-r-2 { margin-right: 20px; } .margin-b-2 { margin-bottom: 20px; } .margin-l-2 { margin-left: 20px; } .margin-3 { margin: 30px; } .margin-t-3 { margin-top: 30px; } .margin-r-3 { margin-right: 30px; } .margin-b-3 { margin-bottom: 30px; } .margin-l-3 { margin-left: 30px; } .margin-4 { margin: 40px; } .margin-t-4 { margin-top: 40px; } .margin-r-4 { margin-right: 40px; } .margin-b-4 { margin-bottom: 40px; } .margin-l-4 { margin-left: 40px; } .margin-5 { margin: 50px; } .margin-t-5 { margin-top: 50px; } .margin-r-5 { margin-right: 50px; } .margin-b-5 { margin-bottom: 50px; } .margin-l-5 { margin-left: 50px; } .margin-6 { margin: 60px; } .margin-t-6 { margin-top: 60px; } .margin-r-6 { margin-right: 60px; } .margin-b-6 { margin-bottom: 60px; } .margin-l-6 { margin-left: 60px; } .margin-7 { margin: 70px; } .margin-t-7 { margin-top: 70px; } .margin-r-7 { margin-right: 70px; } .margin-b-7 { margin-bottom: 70px; } .margin-l-7 { margin-left: 70px; } .margin-8 { margin: 80px; } .margin-t-8 { margin-top: 80px; } .margin-r-8 { margin-right: 80px; } .margin-b-8 { margin-bottom: 80px; } .margin-l-8 { margin-left: 80px; } .margin-9 { margin: 90px; } .margin-t-9 { margin-top: 90px; } .margin-r-9 { margin-right: 90px; } .margin-b-9 { margin-bottom: 90px; } .margin-l-9 { margin-left: 90px; } .margin-10 { margin: 100px; } .margin-t-10 { margin-top: 100px; } .margin-r-10 { margin-right: 100px; } .margin-b-10 { margin-bottom: 100px; } .margin-l-10 { margin-left: 100px; } .margin-11 { margin: 110px; } .margin-t-11 { margin-top: 110px; } .margin-r-11 { margin-right: 110px; } .margin-b-11 { margin-bottom: 110px; } .margin-l-11 { margin-left: 110px; } .margin-12 { margin: 120px; } .margin-t-12 { margin-top: 120px; } .margin-r-12 { margin-right: 120px; } .margin-b-12 { margin-bottom: 120px; } .margin-l-12 { margin-left: 120px; } .margin-13 { margin: 130px; } .margin-t-13 { margin-top: 130px; } .margin-r-13 { margin-right: 130px; } .margin-b-13 { margin-bottom: 130px; } .margin-l-13 { margin-left: 130px; } .margin-14 { margin: 140px; } .margin-t-14 { margin-top: 140px; } .margin-r-14 { margin-right: 140px; } .margin-b-14 { margin-bottom: 140px; } .margin-l-14 { margin-left: 140px; } .margin-15 { margin: 150px; } .margin-t-15 { margin-top: 150px; } .margin-r-15 { margin-right: 150px; } .margin-b-15 { margin-bottom: 150px; } .margin-l-15 { margin-left: 150px; } .margin-16 { margin: 160px; } .margin-t-16 { margin-top: 160px; } .margin-r-16 { margin-right: 160px; } .margin-b-16 { margin-bottom: 160px; } .margin-l-16 { margin-left: 160px; } .margin-17 { margin: 170px; } .margin-t-17 { margin-top: 170px; } .margin-r-17 { margin-right: 170px; } .margin-b-17 { margin-bottom: 170px; } .margin-l-17 { margin-left: 170px; } .margin-18 { margin: 180px; } .margin-t-18 { margin-top: 180px; } .margin-r-18 { margin-right: 180px; } .margin-b-18 { margin-bottom: 180px; } .margin-l-18 { margin-left: 180px; } .margin-19 { margin: 190px; } .margin-t-19 { margin-top: 190px; } .margin-r-19 { margin-right: 190px; } .margin-b-19 { margin-bottom: 190px; } .margin-l-19 { margin-left: 190px; } .margin-20 { margin: 200px; } .margin-t-20 { margin-top: 200px; } .margin-r-20 { margin-right: 200px; } .margin-b-20 { margin-bottom: 200px; } .margin-l-20 { margin-left: 200px; } .margin-21 { margin: 210px; } .margin-t-21 { margin-top: 210px; } .margin-r-21 { margin-right: 210px; } .margin-b-21 { margin-bottom: 210px; } .margin-l-21 { margin-left: 210px; } .margin-22 { margin: 220px; } .margin-t-22 { margin-top: 220px; } .margin-r-22 { margin-right: 220px; } .margin-b-22 { margin-bottom: 220px; } .margin-l-22 { margin-left: 220px; } .margin-23 { margin: 230px; } .margin-t-23 { margin-top: 230px; } .margin-r-23 { margin-right: 230px; } .margin-b-23 { margin-bottom: 230px; } .margin-l-23 { margin-left: 230px; } .margin-24 { margin: 240px; } .margin-t-24 { margin-top: 240px; } .margin-r-24 { margin-right: 240px; } .margin-b-24 { margin-bottom: 240px; } .margin-l-24 { margin-left: 240px; } .margin-25 { margin: 250px; } .margin-t-25 { margin-top: 250px; } .margin-r-25 { margin-right: 250px; } .margin-b-25 { margin-bottom: 250px; } .margin-l-25 { margin-left: 250px; } .margin-26 { margin: 260px; } .margin-t-26 { margin-top: 260px; } .margin-r-26 { margin-right: 260px; } .margin-b-26 { margin-bottom: 260px; } .margin-l-26 { margin-left: 260px; } .margin-27 { margin: 270px; } .margin-t-27 { margin-top: 270px; } .margin-r-27 { margin-right: 270px; } .margin-b-27 { margin-bottom: 270px; } .margin-l-27 { margin-left: 270px; } .margin-28 { margin: 280px; } .margin-t-28 { margin-top: 280px; } .margin-r-28 { margin-right: 280px; } .margin-b-28 { margin-bottom: 280px; } .margin-l-28 { margin-left: 280px; } .margin-29 { margin: 290px; } .margin-t-29 { margin-top: 290px; } .margin-r-29 { margin-right: 290px; } .margin-b-29 { margin-bottom: 290px; } .margin-l-29 { margin-left: 290px; } .margin-30 { margin: 300px; } .margin-t-30 { margin-top: 300px; } .margin-r-30 { margin-right: 300px; } .margin-b-30 { margin-bottom: 300px; } .margin-l-30 { margin-left: 300px; } /* padding */ .padding-0 { padding: 0px; } .padding-t-0 { padding-top: 0px; } .padding-r-0 { padding-right: 0px; } .padding-b-0 { padding-bottom: 0px; } .padding-l-0 { padding-left: 0px; } .padding-1 { padding: 10px; } .padding-t-1 { padding-top: 10px; } .padding-r-1 { padding-right: 10px; } .padding-b-1 { padding-bottom: 10px; } .padding-l-1 { padding-left: 10px; } .padding-2 { padding: 20px; } .padding-t-2 { padding-top: 20px; } .padding-r-2 { padding-right: 20px; } .padding-b-2 { padding-bottom: 20px; } .padding-l-2 { padding-left: 20px; } .padding-3 { padding: 30px; } .padding-t-3 { padding-top: 30px; } .padding-r-3 { padding-right: 30px; } .padding-b-3 { padding-bottom: 30px; } .padding-l-3 { padding-left: 30px; } .padding-4 { padding: 40px; } .padding-t-4 { padding-top: 40px; } .padding-r-4 { padding-right: 40px; } .padding-b-4 { padding-bottom: 40px; } .padding-l-4 { padding-left: 40px; } .padding-5 { padding: 50px; } .padding-t-5 { padding-top: 50px; } .padding-r-5 { padding-right: 50px; } .padding-b-5 { padding-bottom: 50px; } .padding-l-5 { padding-left: 50px; } .padding-6 { padding: 60px; } .padding-t-6 { padding-top: 60px; } .padding-r-6 { padding-right: 60px; } .padding-b-6 { padding-bottom: 60px; } .padding-l-6 { padding-left: 60px; } .padding-7 { padding: 70px; } .padding-t-7 { padding-top: 70px; } .padding-r-7 { padding-right: 70px; } .padding-b-7 { padding-bottom: 70px; } .padding-l-7 { padding-left: 70px; } .padding-8 { padding: 80px; } .padding-t-8 { padding-top: 80px; } .padding-r-8 { padding-right: 80px; } .padding-b-8 { padding-bottom: 80px; } .padding-l-8 { padding-left: 80px; } .padding-9 { padding: 90px; } .padding-t-9 { padding-top: 90px; } .padding-r-9 { padding-right: 90px; } .padding-b-9 { padding-bottom: 90px; } .padding-l-9 { padding-left: 90px; } .padding-10 { padding: 100px; } .padding-t-10 { padding-top: 100px; } .padding-r-10 { padding-right: 100px; } .padding-b-10 { padding-bottom: 100px; } .padding-l-10 { padding-left: 100px; } .padding-11 { padding: 110px; } .padding-t-11 { padding-top: 110px; } .padding-r-11 { padding-right: 110px; } .padding-b-11 { padding-bottom: 110px; } .padding-l-11 { padding-left: 110px; } .padding-12 { padding: 120px; } .padding-t-12 { padding-top: 120px; } .padding-r-12 { padding-right: 120px; } .padding-b-12 { padding-bottom: 120px; } .padding-l-12 { padding-left: 120px; } .padding-13 { padding: 130px; } .padding-t-13 { padding-top: 130px; } .padding-r-13 { padding-right: 130px; } .padding-b-13 { padding-bottom: 130px; } .padding-l-13 { padding-left: 130px; } .padding-14 { padding: 140px; } .padding-t-14 { padding-top: 140px; } .padding-r-14 { padding-right: 140px; } .padding-b-14 { padding-bottom: 140px; } .padding-l-14 { padding-left: 140px; } .padding-15 { padding: 150px; } .padding-t-15 { padding-top: 150px; } .padding-r-15 { padding-right: 150px; } .padding-b-15 { padding-bottom: 150px; } .padding-l-15 { padding-left: 150px; } .padding-16 { padding: 160px; } .padding-t-16 { padding-top: 160px; } .padding-r-16 { padding-right: 160px; } .padding-b-16 { padding-bottom: 160px; } .padding-l-16 { padding-left: 160px; } .padding-17 { padding: 170px; } .padding-t-17 { padding-top: 170px; } .padding-r-17 { padding-right: 170px; } .padding-b-17 { padding-bottom: 170px; } .padding-l-17 { padding-left: 170px; } .padding-18 { padding: 180px; } .padding-t-18 { padding-top: 180px; } .padding-r-18 { padding-right: 180px; } .padding-b-18 { padding-bottom: 180px; } .padding-l-18 { padding-left: 180px; } .padding-19 { padding: 190px; } .padding-t-19 { padding-top: 190px; } .padding-r-19 { padding-right: 190px; } .padding-b-19 { padding-bottom: 190px; } .padding-l-19 { padding-left: 190px; } .padding-20 { padding: 200px; } .padding-t-20 { padding-top: 200px; } .padding-r-20 { padding-right: 200px; } .padding-b-20 { padding-bottom: 200px; } .padding-l-20 { padding-left: 200px; } .padding-21 { padding: 210px; } .padding-t-21 { padding-top: 210px; } .padding-r-21 { padding-right: 210px; } .padding-b-21 { padding-bottom: 210px; } .padding-l-21 { padding-left: 210px; } .padding-22 { padding: 220px; } .padding-t-22 { padding-top: 220px; } .padding-r-22 { padding-right: 220px; } .padding-b-22 { padding-bottom: 220px; } .padding-l-22 { padding-left: 220px; } .padding-23 { padding: 230px; } .padding-t-23 { padding-top: 230px; } .padding-r-23 { padding-right: 230px; } .padding-b-23 { padding-bottom: 230px; } .padding-l-23 { padding-left: 230px; } .padding-24 { padding: 240px; } .padding-t-24 { padding-top: 240px; } .padding-r-24 { padding-right: 240px; } .padding-b-24 { padding-bottom: 240px; } .padding-l-24 { padding-left: 240px; } .padding-25 { padding: 250px; } .padding-t-25 { padding-top: 250px; } .padding-r-25 { padding-right: 250px; } .padding-b-25 { padding-bottom: 250px; } .padding-l-25 { padding-left: 250px; } .padding-26 { padding: 260px; } .padding-t-26 { padding-top: 260px; } .padding-r-26 { padding-right: 260px; } .padding-b-26 { padding-bottom: 260px; } .padding-l-26 { padding-left: 260px; } .padding-27 { padding: 270px; } .padding-t-27 { padding-top: 270px; } .padding-r-27 { padding-right: 270px; } .padding-b-27 { padding-bottom: 270px; } .padding-l-27 { padding-left: 270px; } .padding-28 { padding: 280px; } .padding-t-28 { padding-top: 280px; } .padding-r-28 { padding-right: 280px; } .padding-b-28 { padding-bottom: 280px; } .padding-l-28 { padding-left: 280px; } .padding-29 { padding: 290px; } .padding-t-29 { padding-top: 290px; } .padding-r-29 { padding-right: 290px; } .padding-b-29 { padding-bottom: 290px; } .padding-l-29 { padding-left: 290px; } .padding-30 { padding: 300px; } .padding-t-30 { padding-top: 300px; } .padding-r-30 { padding-right: 300px; } .padding-b-30 { padding-bottom: 300px; } .padding-l-30 { padding-left: 300px; } /* 澶撮儴鏍峰紡 */ .header { position: fixed; left: 0; top: 0; width: 100%; margin: 0 auto; height: 130px; background: #fff; z-index: 1000; } .header.on{border-bottom: 1px solid #f3f3f3;} .header .header-in { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; } .header .header-in .logo { position: absolute; left: 0; top: 30px; width: 256px; height: 70px; overflow: hidden; text-indent: -999em; background: url("../images/logo.png") center no-repeat; } .header .header-in .nav { margin-top: 54px; } .header .header-in .nav ul { font-size: 0; text-align: right; } .header .header-in .nav ul li { display: inline-block; *display: inline; *zoom: 1; font-size: 18px; padding: 0 1.5%; line-height: 76px; } .header .header-in .nav ul li a { display: block; color: #000; outline: none; } .header .header-in .nav ul li:first-child { padding-left: 0; } .header .header-in .nav ul li.last { padding-right: 0; } .header .header-in .nav ul li.on a { color: #e10032; } .header .header-in .header-r { position: absolute; right: 0; top: 30px; font-size: 0; } .header .header-in .header-r > div { display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; font-size: 14px; } .header .header-in .header-r .login-box { /*6-14 淇敼*/ margin: 0 2.5em; float: right; /*width: 240px;*/ /*text-align: center;*/ /*position: absolute;*/ /*top: 0;*/ /*right: 120px;*/ } .header .header-in .header-r .login-box a { display: inline-block; max-width: 158px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; color: #000; font-size: 16px; vertical-align: middle; } .header .header-in .header-r .login-box a:hover { color: #e10032; } .header .header-in .header-r .login-box span { margin: 0 0.8em; color: #ccc; font-size: 12px; vertical-align: middle; } .header .header-in .header-r .language a { font-size: 16px; color: #000; padding-left: 20px; vertical-align: middle; background: url("../images/icon-lang.png") left center no-repeat; } .header .header-in .header-r .language a:hover { color: #e10032; } .header .header-in .header-r .search-box { position: relative; } .header .header-in .header-r .search-box .search { width: 290px; height: 28px; border: 1px solid #ebebeb; /*border-radius: 10px;*/ overflow: hidden; position: relative; padding: 0 35px 0 10px; } .header .header-in .header-r .search-box .search .i-search { border: 0; height: 28px; line-height: 28px; outline: none; display: block; width: 100% ; background: url("../images/search-line.png") right center no-repeat; } .header .header-in .header-r .search-box .btn-search { position: absolute; right: 0; top: 0; border: 0; outline: none; padding: 0; width: 35px; height: 30px; background:#de0031 url("../images/rj-searchIcon.png") center no-repeat; } .header .header-in .mobile-nav { display: none; } .header .header-in .mobile-search-box { display: none; } .header.on .header-in .logo { background-image: url("../images/mobile_logo.png"); } .header-box { height: 130px; } @media screen and (max-width: 1366px) { .header .header-in .logo { margin-left: 15px; } .header .header-in .nav { padding-right: 15px; } .header .header-in .header-r { right: 15px; } } @media screen and (max-width: 1024px) { .header { height: 60px!important; border-bottom: 1px solid #f3f3f3; } .header .header-in { padding-top: 0; } .header .header-in .logo { position: static; width: 154px; height: 30px!important; margin-left: 15px; margin-top: 15px; background-image: url("../images/mobile_logo.png"); } .header .header-in .nav { margin: 0; position: fixed; right: -280px; top: 0; width: 280px; height: 100%; padding-right: 0; background: #ec5735 ; z-index: 100; } .header .header-in .nav ul { padding: 0 5%; } .header .header-in .nav ul li { float: none; } .header .header-in .nav ul li a { display: block; color: #fff; } .header .header-in .header-r { display: none!important; } .header .header-in .mobile-nav { display: block; font-size: 0; position: absolute; right: 10px; top: 12px; } .header .header-in .mobile-nav a { display: inline-block; *display: inline; *zoom: 1; width: 35px ; height: 35px; outline: none; } .header .header-in .mobile-nav .mobile-search { background: url("../images/icon-zoom2.png") center no-repeat; background-size: 70%; } .header .header-in .mobile-nav .mobile-menu { margin-left: 10px; background: url("../images/icon-menu.png") center no-repeat; background-size: 70%; } .header .header-in .mobile-nav .mobile-menu.tc { background-image: url("../images/icon-close.png"); } .header .header-in .mobile-search-box { display: none; position: absolute; top: 60px; left: 0; width: 94%; /*overflow: hidden;*/ /*6-12 淇敼*/ background: #ffffff; padding: 15px 3%; } .header .header-in .mobile-search-box .search { /*padding: 0 45px 0 35px;*/ /*6-12 淇敼*/ position: relative; background: #f7f7f7 url("../images/icon-zoom3.png") 10px center no-repeat; background-size: auto 50%; -webkit-background-size: auto 50%; -o-background-size: auto 50%; -moz-background-size: auto 50%; } .header .header-in .mobile-search-box .search .i-search { border: 0; outline: none; display: block; height: 32px; line-height: 32px; padding: 6px 0 6px 38px; /*6-12 淇敼*/ width: 90% ; /*6-12 淇敼*/ background: url("../images/search-line.png") right center no-repeat; /*6-12 淇敼*/ } .header .header-in .mobile-search-box .search .btn-search { position: absolute; right: 0; top: 0; border: 0; outline: none; background: none; padding: 0; text-align: center; width: 45px; line-height: 32px; height: 32px; } .header-box { height: 60px; } } .index-banner { width: 100%; position: relative; } .index-banner .banner-slider .bd { width: 100%; position: relative; overflow: hidden; } .index-banner .banner-slider .bd ul { width: 600%; } .index-banner .banner-slider .bd ul li { float: left; width: 16.666%; position: relative; } .index-banner .banner-slider .bd ul li .cont { position: absolute; left: 50%; top: 26%; width: 1200px; margin-left: -600px; } .index-banner .banner-slider .bd ul li .cont .tit { font-weight: normal; font-size: 50px; color: #e10332; margin-bottom:10px; } .index-banner .banner-slider .bd ul li .cont .text { font-size: 26px; margin-bottom: 50px; } .index-banner .banner-slider .bd ul li .cont .know-more { display: inline-block; *display: inline; *zoom: 1; padding: 15px 0; width: 200px; text-align: center; font-size: 18px; color: #fff; border-radius: 30px; -webkit-border-radius: 30px; -o-border-radius: 30px; -moz-border-radius: 30px; background: #ec5735 url("../images/btn_bg.jpg") left top repeat-y; } .index-banner .banner-slider .bd ul li .pic { width: 100%; } .index-banner .banner-slider .bd ul li .pic img { display: block; width: 100%; } .index-banner .banner-slider .bd ul li .pic .m-img{display:none;} .index-banner .banner-slider .hd { position: absolute; left: 0; bottom: 70px; width: 100%; z-index: 2; text-align: center; font-size: 0; } .index-banner .banner-slider .hd .swiper-pagination-switch { display: inline-block; *display: inline; *zoom: 1; width: 15px; height: 15px; text-indent: -10em; overflow: hidden; margin: 0 10px; cursor: pointer; background: url("../images/pointer.png") center no-repeat; } .index-banner .banner-slider .hd .swiper-pagination-switch.swiper-active-switch { background-image: url("../images/pointer_on.png"); } @media screen and (max-width: 1440px) { .index-banner .banner-slider .bd ul li .cont .tit { font-size: 50px; } .index-banner .banner-slider .bd ul li .cont .text { margin-bottom: 50px; } } @media screen and (max-width: 1366px) { .index-banner .banner-slider .bd ul li .cont { width: auto; margin-left: 0; left: 5%; } } @media screen and (max-width: 1280px) { .index-banner .banner-slider .bd ul li .cont { top: 24%; } .index-banner .banner-slider .bd ul li .cont .tit { font-size: ; } .index-banner .banner-slider .bd ul li .cont .text { font-size: 18px; } .index-banner .banner-slider .bd ul li .cont .know-more { width: 160px; padding: 10px 0; background-position: top center; } } @media screen and (max-width: 1024px) { .index-banner .banner-slider .bd ul li .cont { width: 80%; margin-left: 0; left: 5%; } .index-banner .banner-slider .bd ul li .cont .know-more { font-size: 16px; } .index-banner .banner-slider .hd { bottom: 20px; } } @media screen and (max-width: 768px) { .index-banner .banner-slider .bd ul li .pic { position: relative; width: auto; } .index-banner .banner-slider .bd ul li .pic .m-img{display:block;width:100%;} .index-banner .banner-slider .bd ul li .pic .pc-img{display:none;} .index-banner .banner-slider .bd ul li .cont { width: 90%; left: 5%; } .index-banner .banner-slider .bd ul li .cont .tit { font-size: 2.285em; } .index-banner .banner-slider .bd ul li .cont .know-more { display:none; font-size: 14px; width: 120px; } .index-banner .banner-slider .bd ul li .cont .text { margin-bottom: 12px; } } @media screen and (max-width: 480px) { .index-banner .banner-slider .bd ul li .cont { top: 20%; width: 92%; left: 0; padding-left: 3%; } .index-banner .banner-slider .bd ul li .cont .tit { font-size: 32px; } .index-banner .banner-slider .bd ul li .cont .know-more { font-size: 14px; width: 110px; padding: 6px 0; } .index-banner .banner-slider .hd { bottom: 15px; } .index-banner .banner-slider .hd .swiper-pagination-switch { margin: 0 5px; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; } } @media screen and (max-width: 414px) { .index-banner .banner-slider .bd ul li .cont .text { font-size:1.2em; } .index-banner .banner-slider .bd ul li .cont .know-more { width: 120px; } } @media screen and (max-width: 375px) { .index-banner .banner-slider .bd ul li .cont .text { font-size:1.1em; } } @media screen and (max-width: 320px) { .index-banner .banner-slider .bd ul li .cont .tit { font-size: 1.8em; } .index-banner .banner-slider .bd ul li .cont .text { font-size:1em; } .index-banner .banner-slider .bd ul li .cont .know-more { width: 100px; } } .notice { position: absolute; bottom: 0; left: 50%; width: 1200px; margin-left: -600px; background: url("../images/notice_bg.png") left top repeat; height: 60px; overflow: hidden; z-index: 2; } .notice ul { position: relative; } .notice ul li { padding: 19px 35px; height:62px; } .notice ul li .notice-box { font-size: 16px; color: #000; padding-right: 100px; } .notice ul li .notice-box a { color: #000; outline: none; cursor: pointer; } .notice ul li .notice-box i { margin: 0 1em; font-style: normal; } .notice ul li .notice-box .class { float: left; width: 8.5em; } .notice ul li .notice-box .class span { display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; padding-left: 2em; background: url("../images/icon_notice.png") left center no-repeat; } .notice ul li .notice-box .title { display: block; margin-left: 8.5em; line-height: 24px; } .notice ul li .notice-box .title span { display: block; width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .notice .control { position: absolute; right: 35px; top: 15px; font-size: 0; } .notice .control .next, .notice .control .prev { display: inline-block; *display: inline; *zoom: 1; width: 35px; height: 35px; outline: none; cursor: pointer; background: url("../images/a_new_no_jt.png") center no-repeat; font-size: 14px; } .notice .control .next { margin-left: 10px; background-image: url("../images/a_new_no_jt_2.png"); } .notice .control .prev:hover{ background: url("../images/a_new_hover_jt_2.png") center no-repeat; } .notice .control .next:hover { background: url("../images/a_new_hover_jt.png") center no-repeat; } @media screen and (max-width: 1220px) { .notice { width: 100%; margin-left: 0; left: 0; } } @media screen and (max-width: 1024px) { .notice { display: none; } } .feature { text-align: center; padding-top: 6%; padding-bottom: 3.4%; } .feature .tit { font-size: 36px; color: #333; font-weight: normal; } .feature .text { width: 94%; max-width: 940px; margin: 24px auto 34px; font-size: 16px; color: #666; line-height: 1.7; } .feature .more { display: inline-block; *display: inline; *zoom: 1; height: 46px; width: 215px; line-height: 46px; text-align: center; font-size: 16px; color: #fff; border-radius: 30px; -webkit-border-radius: 30px; -o-border-radius: 30px; -moz-border-radius: 30px; background: #ec5735 url("../images/btn_bg.jpg") left top repeat-y; } @media screen and (max-width: 1366px) { .feature .tit { font-size: 36px; } } @media screen and (max-width: 1024px) { .feature .tit { font-size: 32px; } } @media screen and (max-width: 768px) { .feature { padding: 50px 0 30px; } .feature .tit { font-size: 22px; margin-bottom: 25px; } .feature .text { display: none; } .feature .more { font-size: 14px; width: 130px; height: 34px; line-height: 34px; } } .layout-lr { position: relative; width: 100%; } .layout-lr .left { float: left; width: 238px; background: #eee; } .product-center .left { background: #f7f7f7; } .product-center .left .product-tab { padding: 9px 0; } .product-center .left .product-tab li { font-size: 18px; } .product-center .left .product-tab li>a { display: block; padding: 0 30px; line-height: 61px; color: #333; outline: none; } .product-center .left .product-tab li a .icon { vertical-align: middle; } .product-center .left .product-tab li a .icon img { display: none; } .product-center .left .product-tab li a .icon img:first-child { display: block; vertical-align: middle; } .product-center .left .product-tab li a strong { font-weight: normal; } .product-center .left .product-tab li.on>a { color: #fff; background: #e1003a url("../images/product_arr.png") 200px center no-repeat; } .product-center .left .product-tab li.on>a .icon img { display: block; } .product-center .left .product-tab li.on>a .icon img:first-child { display: none; } .product-center .left .icon { display: inline-block; *display: inline; *zoom: 1; margin-right: 15px; width: 24px; height: 20px; } .product-center .right .product-lists .product-list ul { font-size: 0; } .product-center .right .product-lists .product-list ul li { display: inline-block; *display: inline; *zoom: 1; vertical-align: top; width: 32.83%; *width: 32.63%; margin-left: 0.5%; background: #f7f7f7; margin-bottom: 0.5%; font-size: 14px; } .product-center .right .product-lists .product-list ul li a { display: block; text-align: center; padding: 38px 15px; } .product-center .right .product-lists .product-list ul li a img { display: block; width: 100%; max-width: 250px; max-height: 170px; margin: 0 auto; } .product-center .right .product-lists .product-list ul li a .tit { display: block; font-size: 18px; font-weight: normal; color: #000000; width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; margin-bottom: 5px; } .product-center .right .product-lists .product-list ul li a .text { display: block; font-size: 16px; color: #999999; height: 3em; overflow: hidden; width: 95%; margin: 0 auto; } .product-center .right .product-lists .product-list ul li a .more { color: #e1003a; text-align: center; } .product-center .right .product-lists .product-list .hd { display: none; } .solution .left { background: #f7f7f7; } .solution .left .solution-tab { padding-bottom: 10px; } .solution .left .solution-tab ul li { font-size: 18px; } .solution .left .solution-tab ul li a { display: block; padding: 0 30px; line-height: 41px; color: #333; outline: none; } .solution .left .solution-tab ul li a strong { font-weight: normal; } .solution .left .solution-tab ul li a .icon { vertical-align: middle; } .solution .left .solution-tab ul li a .icon img { display: none; width: 100%; } .solution .left .solution-tab ul li a .icon img:first-child { display: block; vertical-align: middle; } .solution .left .solution-tab ul li.on a { color: #fff; background: #e1003a; } .solution .left .solution-tab ul li.on a .icon img { display: block; } .solution .left .solution-tab ul li.on a .icon img:first-child { display: none; } .solution .left .solution-tab dl { display: block; padding-left: 30px; padding-right: 20px; } .solution .left .solution-tab dl dd { float: left; width: 50%; *width: 49.9%; font-size: 16px; } .solution .left .solution-tab dl dd a { color: #666; line-height: 32px; } .solution .left .solution-tab dl dd.long { width: 100%; float: none; } .solution .left .icon { display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; margin-right: 15px; width: 25px; height: 25px; } .solution .right .solution-list ul li { float: left; width: 31.6%; width: 32% \9; margin-left: 2%; margin-bottom: 2%; } .solution .right .solution-list ul li a { display: block; position: relative; } .solution .right .solution-list ul li a img { display: block; width: 100%; } .solution .right .solution-list ul li a .cont { position: absolute; bottom: 0; left: 0; width: 90%; padding: 10px 5%; color: #fff; background: url("../images/solution_bg.png") left top repeat; } .solution .right .solution-list ul li a .cont .tit { font-size: 16px; font-weight: bold; display: block; } .solution .right .solution-list ul li.focus { width: 66%; margin-left: 0; } .solution .right .solution-list ul li.focus a .cont { padding-top: 30px; padding-bottom: 30px; } .solution .right .solution-list ul li.focus a .cont .tit { font-size: 28px; font-weight: normal; } .solution .right .solution-list ul li.focus a .cont .text { font-size: 16px; display: block; min-height: 2.4em; } .solution .right .solution-list ul li.focus a .cont .know-more { font-size: 14px; display: block; font-style: normal; } @media screen and (max-width: 1280px) { .product-center .left { float: none; min-height: 576px; position: relative; z-index: 3; } .product-center .right { position: absolute; right: 0; top: 0; width: 100%; margin-left: 0; height: 100%; } .product-center .right .product-lists { padding-left: 258px ; height: 100%; } .product-center .right .product-lists .product-list { height: 100%; } .product-center .right .product-lists .product-list .bd { height: 100%; } .product-center .right .product-lists .product-list .bd ul { height: 100%; } .product-center .right .product-lists .product-list .bd ul li { height: 49.5%; } .solution .left { position: relative; z-index: 3; min-height: 430px; float: none; } .solution .right { position: absolute; right: 0; top: 0; margin-left: 0; height: 100%; width: 100%; } .solution .right .solution-lists { padding-left: 258px ; height: 100%; } .solution .right .solution-lists .solution-list { height: 100%; } .solution .right .solution-lists .solution-list ul { height: 100%; } .solution .right .solution-lists .solution-list ul li { position: absolute; height: 100%; overflow: hidden; margin-bottom: 0; } .solution .right .solution-lists .solution-list ul li a { display: block; height: 100%; } .solution .right .solution-lists .solution-list ul li a img { height:100%; /* width: 150%; margin-left: -25%;*/ } .solution .right .solution-lists .solution-list ul li.focus { left: 0; top: 0; } .solution .right .solution-lists .solution-list ul li.second { right: 0; top: 0; height: 48%; } .solution .right .solution-lists .solution-list ul li.third { right: 0; bottom: 0; height: 48%; } } @media screen and (max-width: 1024px) { .layout-lr .left { float: none; width: 100%; background: none; } .layout-lr .right { margin-left: 0; } .product-center .left { margin-bottom: 15px; min-height: 0; } .product-center .left .product-tab { font-size: 0; } .product-center .left .product-tab li { display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; font-size: 16px; width: 20%; *width: 19.9%; text-align: center; } .product-center .left .product-tab li a { line-height: 28px; padding: 0; } .product-center .left .product-tab li.on a { background: none; color: #333; } .product-center .left .icon { display: none; } .product-center .right { position: static; } .product-center .right .product-lists { padding-left: 0; } .product-center .right .product-lists .product-list ul li { margin: 0 0.25% 0.5%; } .solution .left { min-height: 0; } .solution .left .solution-tab ul li { float: left; width: 25%; *width: 24.9%; font-size: 16px; text-align: center; } .solution .left .solution-tab ul li a { padding: 0; } .solution .left .solution-tab ul li a .icon { width: 36px; height: 36px; } .solution .left .solution-tab ul li.on a { color: #333; background: none; } .solution .left .solution-tab ul li.on a .icon img { display: none; } .solution .left .solution-tab ul li.on a .icon img:first-child { display: block; } .solution .left .solution-tab dl { display: none; padding: 0; } .solution .left .solution-tab dl dd { width: auto; margin: 0 3%; } .solution .left .solution-tab dl dd a { white-space: nowrap; line-height: 28px; } .solution .left .solution-tab dl dd.long { width: auto; float: left; } .solution .left .icon { display: block; margin: 0 auto; } .solution .right { margin-top: 2%; position: static; } .solution .right .solution-lists { padding-left: 0; } .solution .right .solution-lists .solution-list ul li { position: static; } .solution .right .solution-lists .solution-list ul li a img { width: 100%; margin-left: 0; } .solution .right .solution-lists .solution-list ul li.second { margin-bottom: 2%; } } @media screen and (max-width: 768px) { .product-center .left .product-tab ul li { font-size: 14px; } .product-center .right .product-lists .product-list { position: relative; width: auto; padding: 0 15px; } .product-center .right .product-lists .product-list .bd { width: 100%; overflow: hidden; } .product-center .right .product-lists .product-list .bd ul { position: relative; width: 800%!important; } .product-center .right .product-lists .product-list .bd ul li { width: 12.5%!important; margin: 0; display: block; float: left; } .product-center .right .product-lists .product-list .hd { display: block; padding-top: 20px; width: 100%; text-align: center; font-size: 0; } .product-center .right .product-lists .product-list .hd .swiper-pagination-switch { display: inline-block; *display: inline; *zoom: 1; font-size: 14px; width: 15px; height: 15px; *height: 20px; text-indent: -10em; overflow: hidden; margin: 0 10px; cursor: pointer; background: url("../images/pointer.png") center no-repeat; } .product-center .right .product-lists .product-list .hd .swiper-pagination-switch.swiper-active-switch { background-image: url("../images/pointer_on.png"); } .solution .left .solution-tab ul li { font-size: 14px; } .solution .left .solution-tab dl { display: none; } .solution .right .solution-lists .solution-list ul { width: 500%; } .solution .right .solution-lists .solution-list ul li { width: 20%; *width: 19.9%; margin-left: 0; margin-bottom: 0; } .solution .right .solution-lists .solution-list ul li a .cont { padding: 3%; width: 94%; } .solution .right .solution-lists .solution-list ul li a .cont .tit { font-size: 20px; font-weight: normal; } .solution .right .solution-lists .solution-list ul li.focus { width: 20%; *width: 19.9%; } .solution .right .solution-lists .solution-list ul li.focus a .cont { padding: 3%; } .solution .right .solution-lists .solution-list ul li.focus a .cont .tit { font-size: 20px; } .solution .right .solution-lists .solution-list ul li.focus a .cont .text { font-size: 14px; margin-bottom: 10px; display:none; } .solution .right .solution-list ul li.focus a .cont .know-more{ display:none; } .solution .right .solution-lists .solution-list ul li a img{ height:100%; } .solution .right .solution-lists .solution-list ul li.second { margin-bottom: 0; } .solution .right .solution-lists .solution-list .hd { display: block; width: 100%; text-align: center; font-size: 0; padding-top: 20px; } .solution .right .solution-lists .solution-list .hd .swiper-pagination-switch { display: inline-block; *display: inline; *zoom: 1; font-size: 14px; width: 15px; height: 15px; *height: 20px; text-indent: -10em; overflow: hidden; margin: 0 10px; cursor: pointer; background: url("../images/pointer.png") center no-repeat; } .solution .right .solution-lists .solution-list .hd .swiper-pagination-switch.swiper-active-switch { background-image: url("../images/pointer_on.png"); } } @media screen and (max-width: 480px) { .product-center .right .product-lists .product-list .hd { padding-top: 15px; } .product-center .right .product-lists .product-list .hd .swiper-pagination-switch { margin: 0 5px; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; } .solution .left .solution-tab ul li { width: 24%; } .solution .left .solution-tab ul li.last { width: 28%; } .solution .right .solution-list .hd { padding-top: 15px; } .solution .right .solution-list .hd .swiper-pagination-switch { margin: 0 5px; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; } } .index-case .left { float: left; width: 49%; } .index-case .left .case-slider, .index-case .right .case-slider { position: relative; } .index-case .left .case-slider .bd { width: 100%; overflow: hidden; } .index-case .left .case-slider .bd ul { /* width:700%!important;*/ } .index-case .left .case-slider .bd ul li { float: left; /* width: 14.285%!important;*/ position: relative; } .index-case .left .case-slider .bd ul li img { display: block; width: 100%; } .index-case .left .case-slider .bd ul li .cont { position: absolute; right: 0; bottom: 0; background: url("../images/notice_bg.png") left top repeat; width: 242px; padding: 30px 100px 30px 25px; } .index-case .left .case-slider .bd ul li .cont .tit { font-size: 20px; color: #333; } .index-case .left .case-slider .bd ul li .cont .text { margin: 20px 0; font-size: 14px; color: #717171; } .index-case .left .case-slider .bd ul li .cont a { font-size: 14px; color: #e10032; } .index-case .left .case-slider .hd { display: none; } .index-case .left .case-slider .control, .index-case .right .case-slider .control { position: absolute; right: 0; bottom: 0; z-index: 2; } .index-case .left .case-slider .control .pageStateCell { text-align: center; font-size: 16px; color: #a8a7a7; } .index-case .left .case-slider .control .pageStateCell span { font-size: 28px ; color: #2c2c2c; } .index-case .left .case-slider .control .prev, .index-case .left .case-slider .control .next, .index-case .right .case-slider .control .prev, .index-case .right .case-slider .control .next { float: left; width: 40px; height: 80px; outline: none; cursor: pointer; background: url("../images/case_arr.jpg") left center no-repeat; } .index-case .left .case-slider .control .next, .index-case .right .case-slider .control .next { background-position: right center; } .index-case .right { margin-left: 51%; } .index-case .right .index-case-video { display: block; width: 100%; position: relative; } .index-case .right .index-case-video .bg-pic img { width: 100%; display: block; } .index-case .right .index-case-video .text-pic { position: absolute; left: 0; top: 34%; width: 100%; text-align: center; } .index-case .right .index-case-video .text-pic img { margin: 0 auto; display: block; } .index-case .right .index-case-video .text-pic strong { display: block; margin-top: 3%; font-size: 20px; color: #222222; font-weight: normal; } @media screen and (max-width: 768px) { .index-case .left { float: none; width: auto; } .index-case .left .case-slider .bd ul li { overflow: hidden; } .index-case .left .case-slider .bd ul li img { width: 150%; position: relative; left: -25%; } .index-case .left .case-slider .bd ul li .cont { width: 94%; padding: 15px 3%; } .index-case .left .case-slider .bd ul li .cont .text { width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; margin: 5px 0; display:none; } .index-case .left .case-slider .bd ul li .cont a{ display:none; } .index-case .left .case-slider .hd { display: block; width: 100%; text-align: center; padding-top: 20px; font-size: 0; } .index-case .left .case-slider .hd .swiper-pagination-switch { display: inline-block; *display: inline; *zoom: 1; font-size: 14px; width: 15px; height: 15px; *height: 20px; text-indent: -10em; overflow: hidden; margin: 0 10px; cursor: pointer; background: url("../images/pointer.png") center no-repeat; } .index-case .left .case-slider .hd .swiper-pagination-switch.swiper-active-switch { background-image: url("../images/pointer_on.png"); } .index-case .left .case-slider .control { display: none; } .index-case .right { margin-left: 0; margin-top: 30px; width: auto; } } @media screen and (max-width: 480px) { .index-case .left .case-slider .hd { padding-top: 15px; } .index-case .left .case-slider .hd .swiper-pagination-switch { margin: 0 5px; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; } } .service-support { padding: 6% 0; } .service-support .tit { font-size: 36px; color: #303030; font-weight: normal; text-align: center; } .service-support ul { margin-top: 25px; width: 100%; position: relative; overflow: hidden; } .service-support ul li { float: left; width: 25%; *width: 24.9%; padding: 15px 0; text-align: center; border-left: 1px solid #eeeeee; margin-left: -1px; font-size: 24px; color: #666666; } .service-support ul li a { outline: none; } .service-support ul li a strong { font-weight: normal; } .service-support .icon { display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; margin-right: 15px; width: 50px; height: 50px; background: url("../images/support_sprite.png") no-repeat; } .service-support .icon-ques { background-position: 0 center; } .service-support .icon-file { background-position: -150px center; } .service-support .icon-download { background-position: -300px center; } .service-support .icon-tool { background-position: -450px center; } @media screen and (max-width: 1366px) { .service-support .tit { font-size: 36px; } } @media screen and (max-width: 1024px) { .service-support .tit { font-size: 32px; } .service-support ul li { width: 50%; *width: 49.9%; margin-top: -1px; border-top: 1px solid #eeeeee; } } @media screen and (max-width: 768px) { .service-support { padding-top: 50px; padding-bottom: 50px; } .service-support .tit { font-size: 22px; } .service-support ul li { font-size: 18px; } .service-support .icon { width: 30px; height: 30px; width: 50px\9; height: 50px\9; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; } .service-support .icon-ques { background-position: 0 center; } .service-support .icon-file { background-position: -90px center; *background-position: -150px center; } .service-support .icon-download { background-position: -180px center; *background-position: -300px center; } .service-support .icon-tool { background-position: -270px center; *background-position: -450px center; } } .consult { position: fixed; right: -196px; top: 33%; width: 245px; z-index: 99; height: 180px; } .consult .pcbox { height: 100%; } .consult .pcbox .left { width: 49px; position: absolute; left: 0; top: 0; height: 100%; } .consult .pcbox .left .floatbtn { position: relative; height: 100%; width: 100%; cursor: pointer; background: #e10032 ; border-radius: 12px 0 0 12px; overflow: hidden; } .consult .pcbox .left .floatbtn span { display: block; padding: 35px 10px 0; margin-top: 30px; text-align: center; color: #fff; font-size: 20px; line-height: 1; word-break: break-all; word-wrap: break-word; background: url("../images/consult_l_01.png") center top no-repeat; } .consult .pcbox .right { position: relative; width: 100%; height: 100%; overflow: hidden; } .consult .pcbox .right .floatlist { position: absolute; right: 0; top: 0; height: 100%; width: 160px; padding: 0 18px; background: #fff; } .consult .pcbox .right .floatlist dl { padding: 14px 0; border-top: 1px solid #999; } .consult .pcbox .right .floatlist dl dt { padding-left: 34px; font-size: 16px; font-weight: bold; line-height: 23px; background: url("../images/consult_pc_01.png") left top no-repeat; } .consult .pcbox .right .floatlist dl dt a { color: #333; outline: none; } .consult .pcbox .right .floatlist dl dd { padding-left: 34px; font-size: 14px; line-height: 20px; } .consult .pcbox .right .floatlist dl dd a { color: #e10032; outline: none; } .consult .pcbox .right .floatlist dl.before { border-top: 0; } .consult .pcbox .right .floatlist dl.before dt { background-image: url("../images/consult_pc_01.png"); } .consult .pcbox .right .floatlist dl.after dt { background-image: url("../images/consult_pc_02.png"); } .consult .pcbox .right .floatlist dl.more dt { background-image: url("../images/consult_pc_03.png"); } .consult .mobilebox { display: none; } @media screen and (max-width: 768px) { .consult { right: auto!important; left: 0; top: auto; bottom: 0; margin-top: 0; border-top: 1px solid #ccc; height: 82px; width: 100%; background: #fff; } .consult .pcbox { display: none; } .consult .mobilebox { padding: 14px 0; display: block; } .consult .mobilebox ul { text-align: center; font-size: 0; } .consult .mobilebox ul li { display: inline-block; *display: inline; *zoom: 1; width: 25%; *width: 24.9%; font-size: 14px; } .consult .mobilebox ul li a { display: block; outline: none; width: 100%; } .consult .mobilebox ul li a img { display: block; width: 100%; max-width: 26px; max-height: 26px; margin: 0 auto; } .consult .mobilebox ul li a strong { margin-top: 8px; font-weight: normal; display: block; } } /*5-9 淇敼*/ .nav-list { position: fixed; top: -333px; /*top:130px;*/ left: 0; width: 100%; background: #efefef; height: 270px; z-index: 99999; padding: 18px 0; } .nav-list ol { width: 100%; max-width: 1200px; margin: 0 auto; position: relative; /*height: 100%;*/ } .nav-list ol > li { height: 100%; display: none; } .nav-list ol > li .tit-a { display: none; } .nav-list ol > li ul { font-size: 0; height: 100%; } .nav-list ol > li ul > li { height: 100%; display: inline-block; *display: inline; *zoom: 1; vertical-align: top; position:relative; } .nav-list ol > li ul > li .tit-b { font-size: 20px;/*22淇敼涓?0*/ color: #df0031; padding: 12px 0 5px; } .nav-list ol > li ul > li .tit-b a { color: #df0031; } .nav-list ol > li ul > li dl { display: inline-block; *display: inline; *zoom: 1; vertical-align: top; } .nav-list ol > li ul > li dl dt { font-size: 18px; color: #000; padding: 5px 0; } .nav-list ol > li ul > li dl dd { font-size: 15px; padding: 6px 0; } .nav-list ol > li ul > li dl dd a { /*color: #585858;*/ color: #333; } .nav-list ol > li ul > li dl dd a:hover { color: #e50033; } .nav-list ol > li ul > li dl.col2 dd { display: inline-block; *display: inline; *zoom: 1; width: 50%; *width: 49.9%; } .nav-list ol > li.nav-list-product { display: block; } .nav-list ol > li.nav-list-product ul .li01 { width: 32%; margin-left: -1px; margin-right: 3%; padding-right: 3%; } .nav-list ol > li.nav-list-product ul .li01 dd{ width:33.33%; vertical-align:top; } .nav-list ol > li.nav-list-product ul .li01 dl { width: 100%; } .nav-list ol > li.nav-list-product ul .li02 { width: 32%; padding-right: 3%; margin-right: 3%; /* padding-left: 9%; border-left: 1px solid #e8e8e8;*/ } /*淇敼闅愯棌*/ /*.nav-list ol > li.nav-list-product ul .li02 dl dt{ font-weight: bold; }*/ /*淇敼闅愯棌*/ .nav-list ol > li.nav-list-product ul .li02 dl { /*width: 33.33%;*/ /**width: 33.23%;*/ width:auto; margin-right:10%; } .nav-list ol > li.nav-list-product ul .li02 dl:nth-child(4){ margin-right:0; } .nav-list ol > li.nav-list-product ul .li03{ width:24%; } .nav-list ol > li.nav-list-product ul .li03 p{ font-size:14px;/*16鍙峰瓧淇敼涓?4鍙峰瓧*/ color:#333; margin-top:10px; } .nav-list ol > li.nav-list-product ul .li03 p img{ width:100%; } .nav-list ol > li.nav-list-product ul .li03 a{ display:inline-block; font-size:14px; color:#df0031; margin-top:16px; } @media screen and (max-width: 1180px){ .nav-list ol > li.nav-list-product ul .li02 dl{ margin-right: 4%; } } .nav-list ol > li.nav-list-solution{ /*display:block !important;*/ } .nav-list ol > li.nav-list-solution ul .li01{ width:36%; margin-right:4%; /*padding-right:3%;*/ } .nav-list ol > li.nav-list-solution ul .li01 .col2 dd{ /*width:33.33%;*/ width: auto; min-width: 110px; vertical-align:top; } .nav-list ol > li.nav-list-solution ul .li02{ width:60%; } .nav-list ol > li.nav-list-solution ul .li02 .li02-case{ width:100%; position:relative; } .nav-list ol > li.nav-list-solution ul .li02 .li02-case .li02-case-img{ float:left; width:68%; margin-top: 18px; } .nav-list ol > li.nav-list-solution ul .li02 .li02-case .li02-case-img p{ float:left; width:48%; margin-right:4%; background:#fff; } .nav-list ol > li.nav-list-solution ul .li02 .li02-case .li02-case-img p:last-child{ margin-right:0; } .nav-list ol > li.nav-list-solution ul .li02 .li02-case .li02-case-img p img{ display:block; width:100%; } .nav-list ol > li.nav-list-solution ul .li02 .li02-case .li02-case-img p span{ display:block; font-size:14px; color:#666; margin:8px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; } .nav-list ol > li.nav-list-solution ul .li02 .li02-case .li02-case-txt{ float:left; width:28%; margin-right:4%;/*宸︽诞鍔ㄤ慨鏀逛负鍙虫诞鍔?/ } .nav-list ol > li.nav-list-solution ul .li02 .li02-case .li02-case-txt p{ font-size:14px;/*16鍙峰瓧浣撲慨鏀逛负14鍙?/ color:#333; margin-top:10px; } .nav-list ol > li.nav-list-solution ul .li02 .li02-case .li02-case-txt a{ display:inline-block; font-size:14px; color:#df0031; margin-top:10px; position:unset; bottom:0; } .nav-list ol > li.nav-list-industry ul .li01 { width: 40%; margin-left: -1px; } .nav-list ol > li.nav-list-industry ul .li01 .dl01 { width: 20%; } .nav-list ol > li.nav-list-industry ul .li01 .dl02 { width: 25%; } .nav-list ol > li.nav-list-industry ul .li01 .dl03 { width: 55%; *width: 54.9%; } .nav-list ol > li.nav-list-industry ul .li02 { padding-left: 8%; width: 41%; font-size: 14px; /*border-left: 1px solid #e8e8e8;*/ } .nav-list ol > li.nav-list-industry ul .li02 .navlist-cases { margin-top: ; font-size: 0; } .nav-list ol > li.nav-list-industry ul .li02 .navlist-cases .navlist-case { display: inline-block; *display: inline; *zoom: 1; margin-left: 4%; width: 48% ; *width: 47.9%; font-size: 14px; vertical-align: middle; } .nav-list ol > li.nav-list-industry ul .li02 .navlist-cases .navlist-case a { display: block; border: 1px solid #cac8c7; } .nav-list ol > li.nav-list-industry ul .li02 .navlist-cases .navlist-case a img { display: block; width: 100%; } .nav-list ol > li.nav-list-industry ul .li02 .navlist-cases .navlist-case a span { color: #585858; display: block; padding: 4px 6px; background: #ececec; height:36px; } .nav-list ol > li.nav-list-industry ul .li02 .navlist-cases .navlist-case:first-child { margin-left: 0; } .nav-list ol > li.nav-list-industry ul .li02 .link-more { text-align: right; padding-top: 5px; } .nav-list ol > li.nav-list-industry ul .li02 .link-more span { margin-left: 3px; font-size: 20px; } /* wangdaoxin_2018-07-03_瀹樼綉澶撮儴瀵艰埅鏈嶅姟涓庢敮鎸佹ā鍧椾笅鎷夋敼鐗坃寮€濮 .nav-list ol > li.nav-list-service ul li { width: 12%; padding-left: 4%; border-left: 1px solid #e8e8e8; margin-left: -1px; } */ .nav-list ol > li.nav-list-service ul li{ width: auto !important; padding: 0 2.5% !important; } .nav-list ol > li.nav-list-service ul li:nth-child(5) .sa-fun-add-line{ display: block; } .nav-list ol > li.nav-list-service ul li:last-child{ /* float: right; */ /* padding: 0 5% 3%; */ /* background: #f2f2f2; */ } .nav-list ol > li.nav-list-service ul li:last-child .navlist-case{ position: relative; } .nav-list ol > li.nav-list-service ul li:last-child .navlist-case .i{ display: block; width: 50px; height: 50px; background: url("https://image.ruijie.com.cn/UIA/v2.0/images/navIcon-h01.png") no-repeat center; position: absolute; top: 50%; left: 50%; margin-top: -25px; margin-left: -25px; } .nav-list ol > li.nav-list-service ul li .dlt-link{ display: block; font-size: 15px; color: #df0031; margin-top: 10px; } @media screen and (max-width: 1280px){ .nav-list ol > li.nav-list-service ul li:last-child{ padding: 0 2% 3% !important; } .nav-list ol > li.nav-list-service ul li:last-child img{ width: 100% !important; } } /* wangdaoxin_2018-07-03_瀹樼綉澶撮儴瀵艰埅鏈嶅姟涓庢敮鎸佹ā鍧椾笅鎷夋敼鐗坃缁撴潫*/ .nav-list ol > li.nav-list-service ul li:first-child { border-left: 0; padding-left: 0; } .nav-list ol > li.nav-list-service ul li.li03 { width: 22%; } .nav-list ol > li.nav-list-service ul li.li03 .cont { width: 85%; font-size: 15px; line-height: 30px; margin-bottom: 18px; } .nav-list ol > li.nav-list-service ul li.li03 .cont a { color: #585858; } .nav-list ol > li.nav-list-service ul li.li05 { width: 22%; } .nav-list ol > li.nav-list-service ul li.li05 .navlist-case { width: 100%; margin-top: 8px; font-size: 14px; } .nav-list ol > li.nav-list-service ul li.li05 .navlist-case a { display: block; border: 1px solid #cac8c7; } .nav-list ol > li.nav-list-service ul li.li05 .navlist-case a img { display: block; width: 100%; } .nav-list ol > li.nav-list-service ul li.li05 .navlist-case a span { color: #585858; display: block; padding: 4px 6px; background: #ececec; } .nav-list ol > li.nav-list-cooperative ul li { width: 14%; padding-left: 5%; /*border-left: 1px solid #e8e8e8;*/ margin-left: -1px; } .nav-list ol > li.nav-list-cooperative ul li:first-child { width: 16%; padding-left: 0; border-left: 0; } .nav-list ol > li.nav-list-cooperative ul li.li04 { width: 20%; } .nav-list ol > li.nav-list-buy ul li { width: 11%; padding-left: 4%; /* border-left: 1px solid #e8e8e8;*/ margin-left: -1px; } .nav-list ol > li.nav-list-buy ul li:first-child { width: 13%; padding-left: 0; border-left: 0; } .nav-list ol > li.nav-list-about ul li { width: 11%; padding-left: 4%; /* border-left: 1px solid #e8e8e8;*/ margin-left: -1px; } .nav-list ol > li.nav-list-about ul li:first-child { padding-left: 0; border-left: 0; } .nav-list ol > li.nav-list-about ul li.li05 { width: 15%; } .nav-list ol > li.nav-list-about ul li.li06 { width: 20%; } .nav-list ol > li.nav-list-about ul li.li06 .navlist-case { *width: 100%; margin-top: 8px; font-size: 14px; } .nav-list ol > li.nav-list-about ul li.li06 .navlist-case a { display: block; border: 1px solid #cac8c7; } .nav-list ol > li.nav-list-about ul li.li06 .navlist-case a img { display: block; width: 100%; } .nav-list ol > li.nav-list-about ul li.li06 .navlist-case a span { color: #585858; display: block; padding: 4px 6px; background: #ececec; } /*5-9 淇敼 end*/ /*5-9 淇敼*/ .sa-fun-add-line{ position:absolute; top:16px; right:0; width:1px; border-left:1px solid #e0e0e0; } /*5-9 淇敼 end*/ @media screen and (max-width: 1024px){ .sa-fun-add-line{border:0;} } @media screen and (max-width: 1280px) { .nav-list ol > li { padding: 0 1% 0 3% ; } /*5-9 淇敼*/ /*.nav-list ol > li.nav-list-product ul .li02 { padding-left: 7%; }*/ /*5-9 淇敼 end*/ .nav-list ol > li.nav-list-service ul li { width: 12%; padding-left: 2%; } .nav-list ol > li.nav-list-cooperative ul li { padding-left: 2%; } .nav-list ol > li.nav-list-buy ul li { width: 12%; padding-left: 2%; } .nav-list ol > li.nav-list-about ul li { width: 12%; padding-left: 2%; } .nav-list ol > li.nav-list-about ul li.li05 { width: 17%; } } @media screen and (max-width: 1024px) { .nav-list { display: none; position: fixed; left: 0; top: 0!important; height: 100%; overflow-x: auto; background: #fff; padding: 0; } .nav-list .hidden { display: none!important; } .nav-list ol { padding-top: 60px; } .nav-list ol > li.nav-list-child { display: block!important; height: auto; background: #f7f7f7; padding: 0; border-bottom: 1px solid #e5e5e5; } .nav-list ol > li.nav-list-child .tit-a { display: block; margin: 0 15px; font-size: 20px; height: 54px; line-height: 54px; color: #1a1a1a; position: relative; } .nav-list ol > li.nav-list-child .tit-a a{display: block;color: #1a1a1a;} .nav-list ol > li.nav-list-child .tit-a .addbtn{position:absolute;display: block;right: 0px;top:0px;width: 50%;height: 54px;cursor: pointer; background: url("../images/footer_add.png") right center no-repeat;z-index: 2;} .nav-list ol > li.nav-list-child.on .tit-a .addbtn{ background-image: url("../images/footer_add_on.png"); } .nav-list ol > li.nav-list-child ul { display: none; padding: 0 15px; background: #e6e6e6; *height: auto!important; } .nav-list ol > li.nav-list-child ul > li.ul-child { display: block; width: auto; *height: auto!important; margin-left: 0; border-left: 0; border-top: 1px solid #ccc; padding: 10px 0; } .nav-list ol > li.nav-list-child ul > li.ul-child:first-child { border-top: 0; } .nav-list ol > li.nav-list-child ul > li.ul-child .tit-b { font-size: 18px; } .nav-list ol > li.nav-list-child ul > li.ul-child dl { width: auto; display: block; font-size: 0; } .nav-list ol > li.nav-list-child ul > li.ul-child dl dt { font-size: 18px; padding: 8px 0; } .nav-list ol > li.nav-list-child ul > li.ul-child dl dd { width: 33.33%; display: inline-block; *display: inline; *zoom: 1; padding: 0.08rem 0; } .nav-list ol > li.nav-list-child ul > li.ul-child dl dd a { font-size: 16px; color: #1a1a1a; } .nav-list ol > li.nav-list-child ul > li.ul-child .cont { margin: 0 0 15px; } .nav-list ol > li.nav-list-child ul > li.ul-child .cont a { font-size: 16px; color: #1a1a1a; } .nav-list ol > li.nav-list-child ul > li.ul-child .link-more { padding: 20px 0 10px; text-align: center; font-size: 16px; } .nav-list ol > li.nav-list-child ul > li.ul-child .navlist-case { max-width: 280px; } .nav-list ol > li.nav-list-child.nav-list-industry ul li dl { display: inline; *width: 100%!important; } } @media screen and (min-width: 1025px) { .nav-list { display: block!important; } .nav-list ol > li ul { display: block!important; } } @media screen and (max-width: 768px) { .nav-list ol > li.nav-list-child .tit-a { font-size: 18px; line-height: 52px; height: 52px; } .nav-list ol > li.nav-list-child .tit-a .addbtn{position:absolute;display: block;right: 0px;top:0px;width: 50%;height: 51px;cursor: pointer; background: url("../images/footer_add.png") right center no-repeat;z-index: 2; background-size: auto 38%; -webkit-background-size: auto 38%; -moz-background-size: auto 38%; -o-background-size: auto 38%;} .nav-list ol > li.nav-list-child ul > li.ul-child dl dd { width: 100%; height:auto; } .nav-list ol > li.nav-list-child ul > li.ul-child .navlist-case { margin: 0 auto; } } .footer { width: 100%; position: relative; background: #efefef;/*ff7f7f7棰滆壊淇敼涓篹fefef*/ } .footer .top { max-width: 1200px; width: 96%; margin: 0 auto; position: relative; padding: 60px 0; } .footer .back-top { display: none; } .footer .footer-nav { padding-right: 165px; font-size: 0; } .footer .footer-nav dl { font-size: 14px; display: inline-block; *display: inline; *zoom: 1; vertical-align: top; width: 18%; *width: 17.9%; } .footer .footer-nav dl dt { font-size: 18px; color: #000; margin-bottom: 18px; } .footer .footer-nav dl dd ul li { font-size: 16px; line-height: 2; } .footer .footer-nav dl dd ul li a:hover{color:#e10032;} .footer .footer-nav dl.double { width: 28%; } .footer .footer-nav dl.double dd ul { float: left; width: 75%; *width: 74.9%; } .footer .footer-nav dl.double dd ul:first-child { width: 25%; } .footer .consultation { position: absolute; right: 0; top: 60px; width: 165px; } .footer .consultation .title { display: inline-block; *display: inline; *zoom: 1; height: 35px; width: 160px; line-height: 35px; text-align: center; font-size: 16px; color: #fff; border-radius: 30px; -webkit-border-radius: 30px; -o-border-radius: 30px; -moz-border-radius: 30px; background: #ec5735 url("../images/btn_bg.jpg") left top repeat-y; } .footer .consultation .cont { margin-top: 20px; } .footer .consultation .cont .sale-before, .footer .consultation .cont .sale-after { font-size: 14px; font-weight: bold; color: #333333; display: block; } .footer .consultation .cont .sale-before span, .footer .consultation .cont .sale-after span { display: block; } .footer .consultation .cont .sale-after { margin-top: 10px; } .footer .consultation .cont .tel { font-size: 20px; font-weight: bold; color: #e10032; outline: none; } .footer .consultation .sharebox { margin-top: 10px; } .footer .consultation .sharebox .bdsharebuttonbox .bds_weixin { background: url("../images/share_weixin.png") center no-repeat; } .footer .consultation .sharebox .bdsharebuttonbox .bds_tsina { background: url("../images/share_sina.png") center no-repeat; } .footer .bottom { border-top: 1px solid #e4e4e4; } .footer .bottom .bottom-in { max-width: 1280px; width: 100%; margin: 0 auto; position: relative; line-height: 58px; } .footer .bottom .bottom-in ul { position: absolute; left: 0; top: 0; font-size: 0; } .footer .bottom .bottom-in ul li { display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; font-size: 14px; margin-right: 18px; } .footer .bottom .bottom-in ul li a { color: #999; } .footer .bottom .bottom-in .copyright { text-align: right; } @media screen and (max-width: 1366px) { .footer .bottom .bottom-in { line-height: 1.6; padding: 15px 0; } .footer .bottom .bottom-in ul { position: static; text-align: center; margin-bottom: 5px; } .footer .bottom .bottom-in .copyright { text-align: center; font-size: 12px; word-break:keep all; } .footer .bottom .bottom-in .copyright a{font-size: 12px;} } @media screen and (max-width: 1024px) { .footer .top { padding-bottom: 20px; } .footer .top .footer-nav { padding-right: 0; } .footer .top .consultation { position: static; width: 80%; margin: 0 auto; } .footer .top .consultation .title { display: none; } .footer .top .consultation .cont .sale-before, .footer .top .consultation .cont .sale-after { float: left; width: 50%; *width: 49.9%; text-align: center; font-weight: normal; } .footer .top .consultation .cont .sale-before span, .footer .top .consultation .cont .sale-after span { font-size: 18px; } .footer .top .consultation .cont .sale-after { margin: 0; } .footer .top .consultation .cont .tel { font-size: 20px; font-weight: normal; } .footer .top .consultation .sharebox { margin-top: 5px; } .footer .top .consultation .sharebox .bdsharebuttonbox { text-align: center; } .footer .top .consultation .sharebox .bdsharebuttonbox a { display: inline-block; *display: inline; *zoom: 1; float: none; position: relative; left: -25%; margin: 0; *float: left; *left: 22%; } .footer .top .consultation .sharebox .bdsharebuttonbox .bds_tsina { left: 25%; *left: 72%; margin-left: -32px; } } @media screen and (max-width: 768px) { .footer { padding-bottom: 82px; border-top: 1px solid #e1e1e1; } .footer .top { padding-top: 20px; } .footer .top .back-top { width: 30px; height: 43px; display: block; margin: 0 auto 20px; text-indent: -999em; overflow: hidden; background: url("../images/backtop.png") center no-repeat; background-size: cover; } .footer .top .footer-nav dl { display: block; width: auto; padding: 5px 0; } .footer .top .footer-nav dl dt { margin-bottom: 5px; cursor: pointer; background: url("../images/footer_add.png") 98% center no-repeat; background-size: auto 64%; -webkit-background-size: auto 64%; -o-background-size: auto 64%; -moz-background-size: auto 64%; opacity: 0.8; } .footer .top .footer-nav dl dt.on { background-image: url("../images/footer_add_on.png"); } .footer .top .footer-nav dl dd { display: none; } .footer .top .footer-nav dl dd ul { padding-left: 1em; } .footer .top .footer-nav dl.double dd ul { float: none; width: auto; } .footer .top .consultation { width: 98%; } .footer .bottom .bottom-in { width: 80%; margin: 0 auto; overflow: hidden; } .footer .bottom .bottom-in ul { *width: 100%; margin-left: -1px; } .footer .bottom .bottom-in ul li { width: 33.33%; *width: 33.23%; margin: 0 0 10px ; line-height: 24px; } .footer .bottom .bottom-in ul li a { display: inline-block; *display: inline; *zoom: 1; width: 100%; box-sizing: border-box; border-left: 1px solid #ccc; } } .main { max-width: 1200px; width: 100%; margin: 0 auto; } /*@media screen and (max-width: 1280px){ .main{ max-width: 1000px; } }*/ .wap-content { max-width: 1200px; width: 94%; margin: 0 auto; } .wap-content .leftwap { float: left; width: 230px; position: relative; } .wap-content .rightwap { margin-left: 270px; padding: 40px 0 30px 0; } @media screen and (max-width: 1024px) { .wap-content { width: 100%; } .wap-content .leftwap { float: none !important; width: 100%; z-index: 1; } .wap-content .rightwap { width: 94%; margin: 0 auto; padding: 20px 0; } } .my-container { padding-right: 10px; padding-left: 10px; margin-right: auto; margin-left: auto; width:1200px\9; } @media (min-width:768px) { .my-container { width: 750px; } } @media (min-width:992px) { .my-container { width: 970px; } } @media (min-width:1200px) { .my-container { width: 1170px; } } .call-top{display:none;text-align:center;background:#e50033;color:#fff;position:fixed;bottom:150px;right:0;z-index:99;cursor:pointer;width:48px;height:48px;overflow: hidden;} .call-top-san{display:block;width:10px;height:10px;background:#fff;margin:0 auto;margin-top:-14px;border: 8px solid #e50033; border-bottom: 10px solid #fff;width: 0px;} .call-top-zf{display:block;width:4px;height:12px;background:#fff;margin:0 auto;} .hytc{position:fixed;right:0;bottom:200px;cursor:pointer;z-index:99;} @media screen and (max-width: 768px){ .hytc{display:none;} } .product-center .left .product-tab {position:relative;} .product-tab-erji{display:none;position:absolute;top:0;left:238px;z-index:3;background:#fff;border:2px solid #f7f7f7;padding:20px;width:750px;min-height:645px;} .product-tab-erji .dt-title{font-size:18px;color:#e1003a;} .product-tab-erji .dt-title>a{color:#e1003a;} .product-tab-erji .dd-item{font-size:16px;line-height:28px;float:left;width:50%;overflow: hidden;white-space: nowrap;} .product-tab-erji>dl{margin-bottom:12px;} .product-tab-erji .dt-title-child{font-size:16px;font-weight:bold;margin:6px 0;} .product-tab-erji .dt-title-child:before, .product-tab-erji .dt-title-child:after { content: " "; /* 1 */ display: table; /* 2 */ clear:both; } .product-center .left .product-tab li.on .product-tab-erji{display:block;} @media screen and (max-width: 1024px){ .product-tab-erji{display:none;} .product-center .left .product-tab li.on .product-tab-erji{display:none;} } .sy-btns-left{position:absolute;top:50%;margin-top:-33px;left:5%;z-index:99;cursor:pointer;} .sy-btns-right{position:absolute;top:50%;margin-top:-33px;right:5%;z-index:99;cursor:pointer;} @media (max-width:768px) { .sy-btns-left{display:none;} .sy-btns-right{display:none;} } .typeahead__cancel-button{ display: none !important; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; width: 124px; position: absolute; background-color: #f9f9f9; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); padding: 12px 0; } .dropdown-content p a { background: none !important; color: #3a3a3a !important; } .dropdown-content .current a { background: none !important; color: #8d8d8d !important; } .dropdown-content .current:hover a { background: none !important; color: #8d8d8d !important; } .dropdown-content p { margin-top: 4px !important; } .dropdown-content p:hover a { color: #DD1D40 !important; } .dropdown:hover .dropdown-content { display: block; } .header .header-in .header-r .language { margin-right: 1.5em; } .header .header-in .header-r .language a { padding-left: 30px; padding-right: 30px; background: url('../images/icon-lang.png') left center no-repeat,url('../images/dowm.png') right center no-repeat; } .nav-list{ /*overflow-y: hidden;*/ } .lagCon{ display:none; width:100%; height:52px; line-height:52px; position: absolute; bottom: 0; z-index:6; } .lagCon p{ font-size:20px; color:#fff; padding:0 15px; border-bottom: 1px solid #e5e5e5; background:#666 url(http://image.ruijie.com.cn/UIA/v2.0/images/footer_add.png) right 15px center no-repeat; cursor:pointer; } .lagCon p.on{ background:#666 url(http://image.ruijie.com.cn/UIA/v2.0/images/footer_add_on.png) right 15px center no-repeat; } .lagCon ul{ display:none; position: absolute; bottom: 52px; width: 100%; background: #fff; } .lagCon ul li{ height:52px; line-height:52px; padding:0 15px; border-top: 1px solid #e5e5e5; } .lagCon ul li a{ display:block; font-size:20px; } .lagCon ul li .current{ color: #dfdfdf; cursor: no-drop; } @media screen and (max-width:1024px){ .lagCon{ display:block; } } @media screen and (max-width:768px){ .lagCon p{ background-size:auto 38%; } .lagCon p.on{ background-size:auto 38%; } .nav-list ol > li.nav-list-child .tit-a{ height:40px; line-height:40px; } .nav-list ol > li.nav-list-child .tit-a a{ font-size:20px; } .nav-list ol > li.nav-list-child .tit-a .addbtn{ height:40px; } .lagCon{ height:40px; line-height:40px; } .lagCon p{ font-size:14px; } .lagCon ul{ bottom:40px; } .lagCon ul li{ height:40px; line-height:40px; } .lagCon ul li a{ font-size:14px; } } .nav-list ol{ padding-bottom: 40px; } .nav-list ol > li ul{ height: auto; } .nav-list ol > li ul > li{ height: auto; } .user-agreement { color: #999; line-height: 160%; margin: 20px auto; font-size: 14px; } .user-agreement a { color: #333; text-decoration: underline; }