* * 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 { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .ovh { overflow: hidden; } .noselect { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } .dn { display: none; } .w-f { width: 100%; } .h-f { height: 100%; } /*.loader{ width: 50px; height: 50px; position: 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%; 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); } } body, html { font-family: "Source Han Sans CN", "Hiragino Sans GB", "PingFang SC","Microsoft YaHei","Helvetica Neue", Helvetica, "Heiti SC",Arial, sans-serif; } @font-face { font-family: 'GOTHIC'; src: url("fonts/GOTHIC.eot"); src: url("fonts/GOTHIC.eot") format("embedded-opentype"), url("fonts/GOTHIC.woff2") format("woff2"), url("fonts/GOTHIC.woff") format("woff"), url("fonts/GOTHIC.ttf") format("truetype"), url("fonts/GOTHIC.svg#GOTHIC") format("svg"); } html, body { overflow: hidden; } * { border-sizing: border-box; } .ovh-f { width: 100%; height: 100%; position: fixed; left: 0; top: 0; } @font-face { font-family: "iconfont"; src: url("iconfont.eot?t=1526463825811"); /* IE9*/ src: url("iconfont.eot?t=1526463825811#iefix") format("embedded-opentype"), url("data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAjgAAsAAAAADJgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZW7kmbY21hcAAAAYAAAACXAAACCtA9bZhnbHlmAAACGAAABI0AAAWYPtpiIGhlYWQAAAaoAAAALwAAADYRY4CqaGhlYQAABtgAAAAcAAAAJAfeA4pobXR4AAAG9AAAABQAAAAkI+kAAGxvY2EAAAcIAAAAFAAAABQFoAcCbWF4cAAABxwAAAAfAAAAIAEaAI5uYW1lAAAHPAAAAUUAAAJtPlT+fXBvc3QAAAiEAAAAXAAAAHg1Uta7eJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2Bk/ss4gYGVgYOpk+kMAwNDP4RmfM1gxMjBwMDEwMrMgBUEpLmmMDgwVDxfytzwv4EhhrmdoQEozAiSAwAxmw0eeJzFkTEOgzAMRX9KSFFVoaobd+gBOFLFxMjCLTp152qfY9DvmCVq5/KjZ8k/shPZAGoAlXiICIQ3AkwvuSH7FS7Zj3gqv+Mm54SJkS079hw4r8u26e6XVyqovjzm1eoY1fOMBklG+qr7m8JxT5e65jjuWSOmHX2R0bHtsXVsi+wc2yR7R3MFB0cTBmfHeq6Lg/QBtnIq/QB4nD1UXYwURRDu6p7p+dnZmdv53d/b3dmbHeH0cru3OxMFlvBzHlxOfkXEwJFDL4TAHcaQAwQiyJ+JmhxPiMGQGBMl+KIhJgoRfdLEEBLjswlRfNM3H3hgsOYW6XSqu6a+qq5vqrqJSMjj++w2yxOLPENaZD3ZQgjwYfB1WoF62Bmhw+DURcezdRY2wrrU8EfYKvB8brvtqNP0uMQN0GEQxurtKByhIXQ7PboC2m4FoFAqbjeDsskWQc2Hg+eTSfopONVG2eg9l2x8drXdrlnyUc00C6b5gcxFUaZUMHSY81xFVFSefCYaRed2dRmtglYIi1O7srWSOfNeZ74SeArA6dNglWr656tzxRzOk0XXMgvSQFbOF7ONIRuO/pnJW1ql+QfBAalgP9B5wlEJFZBgjN1Zn5xLzo/DNzZdNp6cg5PjyWQf+/gcu8sukjYhgc2lyHVcpNoMGzqEIxB3Im8EurwZ9yBuRl405EWCF7nSIHguD1vs9aDBX+TRGelEw2+ckM5EfEJsBFuKor1DlAJWBNnzQC6ygAs7bLG45Tbd2oLRWJwAKIZhEWBCjEehtZUunLKm52Bblz3cn8nsf8i622Bu2jq1QIi0xOcn+ohUyHISk7VkiuwlZzD5Zo+GzTTbOGpKOuD00rwiVENADphz5HpoYGjhbt9ioKWDGxfZxnwEelhTLgWI7WKUtN5jfX6siRX3Wzo4+ClOPZAyeqOGgcbwDPqrx/hAcflRsQactXfueYeN6cz6+eCbf7WCV2rJb4cWGVs8NLdI6eJc+Y0qp1p59Vu+3z3QcEoF2yuV7O2SLgu6IYkc9igaZccVNZtVN2oiZNVcuEZjkMlaekZV9flhmzOBWYaWY+AvTMKX3GQratW6oOZLjZWl5vvS5DQcmxblV3fv3i4k99iuDRtmJGHTxMY5CQbst2UYNuul4dZZ8Ttq+WVGXb/AJkTQBjJUGxDvQkZm8wUpa2fVl2UlC2DInAEzNd2iIPBSb/QFrqqlHMjOpQvZJ31Gv6B38E6RQIGoE7aavoQ/k3vg9qBDryX/goKjoCQPJIrlqSp5awEU0JS8KmeSB7Jgmsl9Ccz80779nl4hHiFWXeJVcOM0KqQ1q0KdS467if5+S5YDRQFTEJJ/FCWQ5W8fDWUA4LWbSxrIgiqAvAT6GrRuJg3Ll2L/SP8mLqniC/A8WUdewiPb2N0hNojtelKMNW/HzW4PwjY2h49dIqUiVcQ+LEVEsYeNFaQW9LD52NMdvWYY3lfHLtxk61bWDle6FcNQ2eXYdN2hSvkXq1wOHId+xK7OH7nM2OUj3mh+Z761KrmqWZaGoE+yppk1ETJA952gCFhzcPnemCtAa/7BD3c56B04m/tLMnOW0rMz+96lKh/dPLRn2iqYAGbB+n9NS4N3+xLrsMPIN0Ku3U7T5xV8wyQk80RBQk5jqefr6Ss3DMhexKuQ6/PNDQIbsyo2uzg7e5HZFYteWbih27YOH6fyxsKV5N7ULKWzU0sSDsuGZRkyYtGjvz9+3TiAEdD3gHG9jUgY73skt6Zm/wNqE+P0AAAAeJxjYGRgYADig4pLtsTz23xl4GZhAIHrSnKBCPp/CwsDczuQy8HABBIFAAr+CNYAeJxjYGRgYG7438AQw8IAAkCSkQEVcAIARw8CcnicY2FgYGB+ycDAwoAbAwAfCwENAAAAAAB2AIwA3gGqAdICAAJ6Asx4nGNgZGBg4GRoYmBnAAEmIOYCQgaG/2A+AwAWkAGpAHicZY9NTsMwEIVf+gekEqqoYIfkBWIBKP0Rq25YVGr3XXTfpk6bKokjx63UA3AejsAJOALcgDvwSCebNpbH37x5Y08A3OAHHo7fLfeRPVwyO3INF7gXrlN/EG6QX4SbaONVuEX9TdjHM6bCbXRheYPXuGL2hHdhDx18CNdwjU/hOvUv4Qb5W7iJO/wKt9Dx6sI+5l5XuI1HL/bHVi+cXqnlQcWhySKTOb+CmV7vkoWt0uqca1vEJlODoF9JU51pW91T7NdD5yIVWZOqCas6SYzKrdnq0AUb5/JRrxeJHoQm5Vhj/rbGAo5xBYUlDowxQhhkiMro6DtVZvSvsUPCXntWPc3ndFsU1P9zhQEC9M9cU7qy0nk6T4E9XxtSdXQrbsuelDSRXs1JErJCXta2VELqATZlV44RelzRiT8oZ0j/AAlabsgAAAB4nG3IOQ6AIBRF0f9wYEiMK7HQHSFBwYKvCQbdvYWWnurmkqCXoX8aAhVqNGghoaBhCFcfHaeFU96iTZlPcRxN8XFm9Y2p+2IcHO93W7wLNstw2sxpJXoATvEYCQ==") format("woff"), url("iconfont.ttf?t=1526463825811") format("truetype"), url("iconfont.svg?t=1526463825811#iconfont") format("svg") /* iOS 4.1- */ } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-iconfontjiantou:before { content: "\e638"; } .icon-qq:before { content: "\e60e"; } .icon-jiantou1-copy:before { content: "\e7a5"; } .icon-jiantou2:before { content: "\e604"; } .icon-weibo:before { content: "\e619"; } .icon-wechat:before { content: "\e66a"; } .icon-huatong:before { content: "\e67d"; } body { padding: 0 60px; background: #ccc !important; } .w1400 { width: 1400px; margin: 0 auto; } .h-16 { font-size: 16px; line-height: 1.5; } .h-36 { font-size: .9rem; line-height: 1.2; } .p-14 { font-size: 14px; line-height: 1.8; } .p-18 { font-size: 18px; line-height: 1.8; } .p-20 { font-size: 20px; line-height: 1.5; } .tit-40 { font-size: 1rem; line-height: 1.5; } .tit-36 { font-size: .9rem; } .tit-30 { font-size: 30px; line-height: 1.5; } .tit-34 { font-size: .85rem; line-height: 1.5; } .tit-32 { font-size: .8rem; line-height: 1; } .tit-22 { font-size: 22px; line-height: 1.6; } .tit-48 { font-size: 1.2rem; line-height: 1.6; } .tit-20 { font-size: 20px; line-height: 1.2; } .col-ff { color: #fff; } .poa-top .img-icon { position: absolute; -webkit-transition: all 0.6s cubic-bezier(0.2, 1, 0.3, 1); transition: all 0.6s cubic-bezier(0.2, 1, 0.3, 1); } .poa-top:hover .img-icon { margin-top: -12px !important; } .bocweb-footer { padding-top: 2rem; background: #242424; } .bocweb-footer .top { padding-bottom: 1.75rem; position: relative; border-bottom: 1px solid rgba(137, 137, 137, 0.2); } .bocweb-footer .top .dlbox { width: 680px; margin-left: 5.5rem; } .bocweb-footer .top .dlbox a { display: block; font-size: 16px; line-height: 30px; color: #fff; opacity: .5; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .bocweb-footer .top .dlbox a:hover { opacity: 1; } .bocweb-footer .top .dlbox .dl { margin-right: 1.3rem; width: 120px; float: left; } .bocweb-footer .top .dlbox .dl:last-child { margin-right: 0; } .bocweb-footer .top .dlbox .dt { margin-bottom: .5rem; font-size: 18px; color: #fff; line-height: 1.2; opacity: 1; font-weight: bold; } .bocweb-footer .top .fot-top-left { width: 240px; } .bocweb-footer .top .fot-top-left .bot-logo { width: 224px; height: 22px; margin-bottom: .75rem; } .bocweb-footer .top .fot-top-left .tel { padding-left: 30px; font-size: 14px; color: rgba(255, 255, 255, 0.5); margin-bottom: 5px; line-height: 1.5; } .bocweb-footer .top .fot-top-left .tel .img-icon { left: 0; top: 50%; width: 18px; height: 18px; margin-top: -9px; } .bocweb-footer .top .fot-top-left .tel-number { font-size: 26px; line-height: 1.2; font-family: "GOTHIC"; color: #fff; } .bocweb-footer .top .fot-top-left .p-14 { color: rgba(255, 255, 255, 0.5); } .bocweb-footer .top .fot-top-right { width: 100px; text-align: center; } .bocweb-footer .top .fot-top-right img { margin-top: 5px; width: 100px; height: 100px; } .bocweb-footer .top .fxbox { position: absolute; right: 0; bottom: .65rem; } .bocweb-footer .top .fxbox span { color: #fff; opacity: .5; line-height: 25px; font-family: "GOTHIC"; } .bocweb-footer .top .fxbox a { padding: 0 !important; margin: 0 5px !important; width: 25px; height: 25px; } .bocweb-footer .top .fxbox .bds_sqq { background: url(../img/img5.png) no-repeat center; } .bocweb-footer .top .fxbox .bds_tsina { background: url(../img/img5-1.png) no-repeat center; } .bocweb-footer .top .fxbox .bds_weixin { background: url(../img/img5-2.png) no-repeat center; } .bocweb-footer .top .orderbtn { margin: .75rem 0 0; width: 3.8rem; height: 1.15rem; line-height: 1.15rem; border-radius: 1.15rem; text-align: center; color: #fff; background: #da3830; display: block; -webkit-transition: background 0.6s cubic-bezier(0.2, 1, 0.3, 1), box-shadow 0.6s 0.4s cubic-bezier(0.2, 1, 0.3, 1); transition: background 0.6s cubic-bezier(0.2, 1, 0.3, 1), box-shadow 0.6s 0.4s cubic-bezier(0.2, 1, 0.3, 1); } .bocweb-footer .top .orderbtn:hover { background: rgba(218, 56, 48, 0.4); box-shadow: inset 0px 0px 0px 2px #da3830; } .bocweb-footer .bot { padding: 22px 0; line-height: 22px; } .bocweb-footer .bot .p { font-size: 13px; color: #fff; } .bocweb-footer .bot .sp1 { opacity: .5; } .bocweb-footer .bot a { font-size: 14px; line-height: 16px; color: #fff; opacity: .5; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .bocweb-footer .bot a:hover { opacity: .9; } .bocweb-footer .bot .bot-r a { float: left; } .bocweb-footer .bot .bot-r span { float: left; display: block; width: 1px; height: 14px; background: #999; margin: 0 18px; } .bocweb-footer .sub-menu { width: 100%; z-index: 2; } .bocweb-footer .sub-menu ul { width: 100%; } .bocweb-footer .sub-menu li { border-bottom: 1px solid #dcdcdc; font-size: 16px; } .bocweb-footer .sub-menu .tit { display: block; width: 100%; padding: 0 3%; font-size: 14px; line-height: 60px; color: #000; position: relative; box-sizing: border-box; margin-bottom: 0; } .bocweb-footer .sub-menu .titx { display: block; width: 100%; padding: 0 3%; line-height: 60px; color: #000; position: relative; border-bottom: 1px solid #dcdcdc; } .bocweb-footer .sub-menu .sub-tit:after { content: ''; display: block; width: 26px; height: 26px; background: url(../img/ico_03.png) no-repeat center; background-size: 15px auto; position: absolute; right: 3%; top: 8px; } .bocweb-footer .sub-menu .sub-tit.on { background-color: #8453bb; color: #fff; } .bocweb-footer .sub-menu .sub-tit.on:after { background: url(../img/ico_03_h.png) no-repeat center; background-size: 15px auto; } .bocweb-footer .sub-menu .sec-list { line-height: 40px; padding: 10px 4%; display: none; } .bocweb-footer .sub-menu .sec-list p { background: url(../img/ico_04.png) no-repeat left center; background-size: 3px auto; font-size: 14px; } .bocweb-footer .sub-menu .sec-list a { padding-left: 3%; color: #666; display: block; } .header1 { z-index: 9; height: 80px; position: relative; background: #fff; width: 100%; box-shadow: 0px 0px 15px 0 rgba(0, 0, 0, 0.2); } .header1 h1 { margin: 16px 0 0; padding: 0; width: 180px; } .header1 h1 img { max-width: 100%; } .header1 nav { float: left; height: 80px; line-height: 80px; width: 610px; margin-left: 6.7rem; } .header1 nav li { float: left; display: inline-block; text-align: center; font-size: 20px; -webkit-transition: all 0.3s 0s cubic-bezier(0.86, 0.5, 1, 1); transition: all 0.3s 0s cubic-bezier(0.86, 0.5, 1, 1); margin-right: 66px; } .header1 nav li > a { padding-right: 22px; color: #000; display: block; position: relative; -webkit-transition: color 0.5s; transition: color 0.5s; -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); } .header1 nav li .j-btn { width: 9px; height: 6px; position: absolute; right: 0; top: 50%; margin-top: -3px; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .header1 nav li .j-btn img { width: 100%; } .header1 nav li:last-child { margin-right: 0; } .header1 nav li:hover > a, .header1 nav li.cur > a { color: #da3830; } .header1 nav li:hover .j-btn, .header1 nav li.cur .j-btn { -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); } .header1 .pc-sub-nav { background: #f5f5f5; position: absolute; top: 80px; padding: 0; height: 0; width: 100%; left: 0; visibility: hidden; /*text-align: center;*/ box-shadow: 2px 5px 10px 0px rgba(0, 0, 0, 0.1); -webkit-transition: all .6s .3s; transition: all .6s .3s; line-height: 50px; } .header1 .pc-sub-nav .list { -webkit-transition: all .6s; transition: all .6s; left: 50%; margin-left: -700px; padding: 15px 0; position: absolute; top: 0; opacity: 0; visibility: hidden; -webkit-transform: translate(0, -10px); -ms-transform: translate(0, -10px); transform: translate(0, -10px); } .header1 .pc-sub-nav a { padding: 15px .8rem; line-height: 24px; display: inline-block; text-align: center; position: relative; } .header1 .pc-sub-nav a:before { content: ''; position: absolute; right: 0; top: 50%; margin-top: -7.5px; width: 1px; height: 15px; background: #666; } .header1 .pc-sub-nav a p { font-size: 16px; color: #333; -webkit-transition: color 0.5s; transition: color 0.5s; -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); } .header1 .pc-sub-nav a:last-child:before { width: 0; } .header1 .pc-sub-nav a:hover p { color: #da3830; } .header1 .pc-sub-nav.on { height: auto; visibility: visible; -webkit-transition: all .6s; transition: all .6s; } .header1 .pc-sub-nav .list.on { /*display: block;*/ opacity: 1; visibility: visible; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } .header1 .header-right { width: 180px; position: absolute; right: 0; top: 0; z-index: 2; } .header1 .header-right .langbox { width: 115px; height: 80px; font-size: 14px; line-height: 80px; color: #000; cursor: pointer; -webkit-transition: color 0.5s; transition: color 0.5s; -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); } .header1 .header-right .langbox .sp1 { width: 24px; height: 80px; display: block; background: url(../img/img3.png) no-repeat left center; } .header1 .header-right .langbox .sp { display: inline-block; padding-right: 20px; position: relative; } .header1 .header-right .langbox .j-btn { width: 9px; height: 6px; position: absolute; right: 0; top: 50%; margin-top: -3px; opacity: .6; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .header1 .header-right .langbox .j-btn img { width: 100%; } .header1 .header-right .langbox.cur { color: #da3830; } .header1 .header-right .langbox.cur .j-btn { -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); } .header1 .header-right .search-btn { width: 65px; height: 80px; line-height: 80px; background: #ededed; text-align: center; cursor: pointer; } .header1 .header-right .search-btn img { width: 20px; height: 20px; display: inline-block; } .hvr-center { vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px transparent; -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; } .hvr-center:before { content: ""; position: absolute; z-index: -1; background: #8453bb; left: 50%; right: 0; width: 0%; bottom: 0; height: 3px; -webkit-transition: all .5s ease; transition: all .5s ease; } .hvr-center:hover:before, .hvr-center.cur:before { left: 50%; width: 20px; margin-left: -10px; } .hvr-left { vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px transparent; -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; } .hvr-left:before { content: ""; position: absolute; z-index: -1; background: #da3830; left: 0%; right: 0; width: 0%; bottom: 0; height: 2px; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .hvr-left:hover:before, .hvr-left.cur:before { width: 60%; margin-left: 5px; } .header2 { height: 55px; position: relative; background: #fff; z-index: 22; width: 100%; display: none; } .header2 .main-wrap { height: 55px; padding: 0 3%; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); } .header2 .logo { width: 6rem; height: 1.4rem; margin-top: .25rem; } .header2 .logo a { display: block; } .header2 .logo img { width: 100%; vertical-align: top; } .header2 .nav-btn { width: 35px; height: 25px; position: relative; cursor: pointer; margin-top: .5rem; } .header2 .nav-btn .line { display: block; width: 100%; height: 3px; border-radius: 3px; background-color: #ababab; position: absolute; left: 0; } .header2 .nav-btn .line1 { -webkit-transform-origin: left 0px 0; -ms-transform-origin: left 0px 0; transform-origin: left 0px 0; } .header2 .nav-btn .line2 { top: 11px; } .header2 .nav-btn .line3 { bottom: 0; -webkit-transform-origin: left 4px 0; -ms-transform-origin: left 4px 0; transform-origin: left 4px 0; } .header2 .nav-btn.active { -webkit-animation: rotate 0.5s linear 0s; animation: rotate 0.5s linear 0s; } .header2 .nav-btn.active .line1 { top: 0px; } .header2 .nav-btn.hover .line { background: #d7000e; } .header2 .sub-menu { width: 100%; padding: 0 3%; display: none; position: absolute; left: 0; top: 60px; z-index: 2; overflow-y: auto; } .header2 .sub-menu ul { width: 100%; overflow-y: scroll; height: calc(100vh - 55px - 1.5rem); } .header2 .sub-menu li { border-bottom: 1px solid #dcdcdc; font-size: 16px; } .header2 .sub-menu .tit { display: block; width: 100%; padding: 0 3%; line-height: 60px; color: #000; position: relative; box-sizing: border-box; } .header2 .sub-menu .titx { display: block; width: 100%; padding: 0 3%; line-height: 60px; color: #000; position: relative; border-bottom: 1px solid #dcdcdc; } .header2 .sub-menu .sub-tit:after { content: ''; display: block; width: 26px; height: 26px; background: url(../img/ico_03.png) no-repeat center; background-size: 17px auto; position: absolute; right: 3%; top: 15px; } .header2 .sub-menu .sub-tit.on { background-color: #e9e9e9; } .header2 .sub-menu .sub-tit.on:after { background: url(../img/ico_03_h-1.png) no-repeat center; background-size: 20px auto; } .header2 .sub-menu .sec-list { line-height: 40px; padding: 10px 4%; display: none; } .header2 .sub-menu .sec-list p { background: url(../img/ico_04.png) no-repeat left center; background-size: 3px auto; font-size: 14px; } .header2 .sub-menu .sec-list a { padding-left: 3%; color: #666; display: block; } .header2.active { background: #fff; } .por-fixheight { position: relative; width: 100%; height: 140px; } .n-fixheight { position: fixed; width: calc(100% - 120px); top: 0; -webkit-transition: all 1s cubic-bezier(0.2, 1, 0.3, 1); transition: all 1s cubic-bezier(0.2, 1, 0.3, 1); z-index: 9; } .n-fixheight.fixed { position: fixed; top: -80px; -webkit-transition: all 1s cubic-bezier(0.2, 1, 0.3, 1); transition: all 1s cubic-bezier(0.2, 1, 0.3, 1); } .search-bg { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 10; background-color: #f5f5f5; display: none; z-index: 20; } .ma-r-none { margin-right: 0 !important; } .col-fff { color: #fff !important; } .col-333 { color: #333 !important; } .col-666 { color: #666 !important; } .col-000 { color: #000 !important; } .col-888 { color: #888 !important; } .col-4c { color: #4c4c4c !important; } .col-red { color: #da3830 !important; } .p-16 { font-size: 16px; line-height: 1.8; } .tit-bold { font-weight: bold; } .p-12-en { font-family: "Arial"; font-size: 12px; line-height: 1.5; } .tac { text-align: center; } .i-banner { width: 100%; overflow: hidden; } .i-banner .slick-slider { margin-bottom: 0 !important; } .i-banner .slick-slide img { max-width: 100%; } .i-banner .li { position: relative; } .i-banner .slick-dots { height: 10px; bottom: .95rem !important; } .i-banner .slick-dots li { width: 6px; height: 6px; background: #fff; margin: 0 10px; } .i-banner .slick-dots li.slick-active { width: 18px; height: 6px; box-shadow: 0px 0px 0px 2px white; border-radius: 10px; margin-top: 0; background: transparent; } .i-banner .titlebox { position: absolute; width: 8.75rem; left: 4.5rem; top: 5rem; z-index: 2; } .i-banner .titlebox .tit-h { font-size: 1.2rem; line-height: 1.2; } .i-banner .titlebox .p-14 { margin-top: 15px; line-height: 1.2; } .i-banner img { width: 100%; display: inline-block !important; } .i-banner a { display: block; width: 100%; height: 100%; } .i-banner .slick-dots { bottom: 20px; } .i-img-list { overflow: hidden; } .i-img-list .li { text-align: center; position: relative; } .i-img-list p { font-size: .6rem; width: 100%; color: #fff; line-height: 2; position: absolute; bottom: .4rem; } .i-img-list .slick-prev { left: 0; -webkit-transform: scale(0) translateX(-100%); -ms-transform: scale(0) translateX(-100%); transform: scale(0) translateX(-100%); -webkit-transition: all .5s ease; transition: all .5s ease; } .i-img-list .slick-next { right: 0; -webkit-transition: all .5s ease; transition: all .5s ease; -webkit-transform: scale(0) translateX(100%); -ms-transform: scale(0) translateX(100%); transform: scale(0) translateX(100%); } .i-img-list .slick-prev, .i-img-list .slick-next { position: absolute; display: block; /*background: rgba(255,255,255,.7);*/ border-radius: 50%; height: 40px; width: 40px; line-height: 0; font-size: 20px; cursor: pointer; /*background: transparent;*/ color: #666; top: 50%; margin-top: -20px; padding: 0; border: none; outline: none; font-family: "SimSun"; } .i-img-list .slick-prev:after, .i-img-list .slick-next:after { top: -2px; left: -2px; padding: 2px; z-index: -1; background: rgba(255, 255, 255, 0.7); -webkit-transition: -webkit-transform 0.2s, opacity 0.2s; transition: transform 0.2s, opacity 0.2s; pointer-events: none; position: absolute; width: 100%; height: 100%; border-radius: 50%; content: ''; box-sizing: content-box; } .i-img-list:hover .slick-prev { -webkit-transform: scale(1) translateX(100%); -ms-transform: scale(1) translateX(100%); transform: scale(1) translateX(100%); } .i-img-list:hover .slick-next { -webkit-transform: scale(1) translateX(-100%); -ms-transform: scale(1) translateX(-100%); transform: scale(1) translateX(-100%); } .i-img-list .slick-prev:hover { box-shadow: 0 0 0 2px #fff; } .i-img-list .slick-prev:hover:after { background: rgba(255, 255, 255, 0.9); -webkit-transform: scale(0.85); -ms-transform: scale(0.85); transform: scale(0.85); } .i-img-list .slick-next:hover { box-shadow: 0 0 0 2px #fff; } .i-img-list .slick-next:hover:after { background: rgba(255, 255, 255, 0.9); -webkit-transform: scale(0.85); -ms-transform: scale(0.85); transform: scale(0.85); } .i-img-list .slick-slide img { -webkit-transition: all .5s ease; transition: all .5s ease; } .i-img-list .slick-slide { -webkit-transition: all 0.8s cubic-bezier(0.16, 0.82, 0.25, 1); transition: all 0.8s cubic-bezier(0.16, 0.82, 0.25, 1); -webkit-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); opacity: 0; } .i-img-list .slick-slide.slick-active { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; } .i-img-list .slick-slide:hover img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .hi-icon:after { pointer-events: none; position: absolute; width: 100%; height: 100%; border-radius: 45px; content: ''; box-sizing: content-box; } .hi-icon { box-shadow: 0 0 0 2px #8453bb; -webkit-transition: color 0.3s; transition: color 0.3s; } .i-lista { padding: 2rem 0; background: #f4f4f4 url(../img/img2.jpg) no-repeat bottom center; } .i-lista .p-18 { max-width: 800px; margin: .5rem auto; } .i-lista .ulbox { width: 28.75rem; height: 210px; position: relative; margin: 2rem auto 0; } .i-lista .li-item { position: absolute; z-index: 3; } .i-lista .li-item .img { width: 50px; height: 50px; border-radius: 50%; overflow: hidden; display: block; position: relative; z-index: 2; box-shadow: 0px 0px 0px 3px #ccc; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; } .i-lista .li-item .img img { width: 100%; border-radius: 50%; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; } .i-lista .li-item .jbtn { position: absolute; z-index: 1; width: 0; height: 0; left: 50%; bottom: -10px; margin-left: -8px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #ccc; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; } .i-lista .li-item .text { position: absolute; bottom: -50px; width: 200px; text-align: center; left: 50%; margin-left: -100px; opacity: 0; visibility: hidden; -webkit-transform: translate(0, 20px); -ms-transform: translate(0, 20px); transform: translate(0, 20px); -webkit-transition: all .5s .3s ease-in-out; transition: all .5s .3s ease-in-out; } .i-lista .li-item .text .p-14, .i-lista .li-item .text .p-12-en { color: #da3830; line-height: 1.2; } .i-lista .li-item1 { bottom: 2rem; } .i-lista .li-item2 { bottom: 3.5rem; left: 7rem; } .i-lista .li-item2 .img { width: 35px; height: 35px; } .i-lista .li-item2 .jbtn { bottom: -7px; margin-left: -5px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #ccc; } .i-lista .li-item3 { bottom: 0rem; left: 8rem; } .i-lista .li-item3 .img { width: 78px; height: 78px; } .i-lista .li-item3 .jbtn { bottom: -12px; margin-left: -12px; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 12px solid #ccc; } .i-lista .li-item4 { bottom: 2.5rem; left: 12rem; } .i-lista .li-item4 .img { width: 45px; height: 45px; } .i-lista .li-item4 .jbtn { bottom: -8px; margin-left: -8px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #ccc; } .i-lista .li-item5 { bottom: 1rem; left: 16.5rem; } .i-lista .li-item5 .img { width: 78px; height: 78px; } .i-lista .li-item5 .jbtn { bottom: -12px; margin-left: -12px; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 12px solid #ccc; } .i-lista .li-item6 { bottom: 2.5rem; left: 21.5rem; } .i-lista .li-item6 .img { width: 40px; height: 40px; } .i-lista .li-item6 .jbtn { bottom: -6px; margin-left: -6px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #ccc; } .i-lista .li-item7 { bottom: 1.5rem; left: 25rem; } .i-lista .li-item7 .img { width: 55px; height: 55px; } .i-lista .li-item7 .jbtn { bottom: -10px; margin-left: -10px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #ccc; } .i-lista .li-item8 { bottom: 3.8rem; left: 27.5rem; } .i-lista .li-item8 .img { width: 40px; height: 40px; } .i-lista .li-item8 .jbtn { bottom: -8px; margin-left: -8px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #ccc; } .i-lista .li-item:hover { z-index: 9; } .i-lista .li-item:hover .img { width: 78px; height: 78px; margin-left: -15px; box-shadow: 0px 0px 0px 3px #da3830; } .i-lista .li-item:hover .img img { -webkit-transform: scale3d(1.2, 1.2, 1.2); transform: scale3d(1.2, 1.2, 1.2); } .i-lista .li-item:hover .jbtn { border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 12px solid #da3830; bottom: -12px; margin-left: -19px; } .i-lista .li-item:hover .text { opacity: 1; visibility: visible; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } .i-listb { background: url(../img/img3.jpg) no-repeat center; background-size: cover; padding: 2.5rem 0 1.7rem; } .i-listb .dlbox { width: 1200px; margin: 0 auto; } .i-listb .dlbox .left { width: 32.5%; margin-top: 1rem; } .i-listb .dlbox .left .tit-40 { margin-bottom: .5rem; } .i-listb .dlbox .left .p-16 { opacity: .7; } .i-listb .dlbox .right { width: 58%; } .i-listb .dlbox .right img { width: 100%; } .i-listb .dlbox .button-box { margin-top: 1.6rem; } .i-listb .dlbox .button-box .orderbtn { width: 3.8rem; height: 1.15rem; line-height: 1.15rem; border-radius: 1.15rem; text-align: left; text-indent: .75rem; color: #fff; background:transparent; display: block; margin-right: 12px; position: relative; box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.1); -webkit-transition: all 0.6s cubic-bezier(0.2, 1, 0.3, 1); transition:all 0.6s cubic-bezier(0.2, 1, 0.3, 1); } .i-listb .dlbox .button-box .orderbtn:hover { background: rgba(218, 56, 48, 1); box-shadow: inset 0px 0px 0px 1px #da3830; } .i-listb .dlbox .button-box .orderbtn1:before { content: ""; position: absolute; width: 10px; height: 7px; top: 50%; margin-top: -3px; right: .75rem; background: url(../img/img16.png) no-repeat center; background-size: 10px 7px; } .i-listb .dlbox .button-box .orderbtn2 { background: transparent; box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.1); text-indent: 1.2rem; } .i-listb .dlbox .button-box .orderbtn2:before { content: ""; position: absolute; width: 0; height: 0; left: .7rem; top: 50%; margin-top: -6px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 6px solid #fff; } .i-listc .leftbox { width: 32.03%; } .i-listc .leftbox table { width: 100%; height: 100%; } .i-listc .leftbox table tr, .i-listc .leftbox table tbody { width: 100%; } .i-listc .leftbox .li-item .td1 { background: #fff; border-right: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; position: relative; width: 40%; overflow: hidden; } .i-listc .leftbox .li-item .td1 img { width: 100%; -webkit-transition: all 1s cubic-bezier(0.2, 1, 0.3, 1); transition: all 1s cubic-bezier(0.2, 1, 0.3, 1); } .i-listc .leftbox .li-item .td1 .p-12-en { position: absolute; width: 100%; bottom: .6rem; text-align: center; color: #2d2d2d; opacity: .5; -webkit-transition: all 1s cubic-bezier(0.2, 1, 0.3, 1); transition: all 1s cubic-bezier(0.2, 1, 0.3, 1); text-transform: uppercase; } .i-listc .leftbox .li-item .td2 { background: #fafafa; padding: 0 40px 0 .7rem; position: relative; width: 60%; } .i-listc .leftbox .li-item .td2:before { content: ""; position: absolute; left: 0; bottom: 0; height: 100%; width: 0; background: #da3830; -webkit-transition: all 1s cubic-bezier(0.2, 1, 0.3, 1); transition: all 1s cubic-bezier(0.2, 1, 0.3, 1); } .i-listc .leftbox .li-item .td2 .p-18-en { margin-bottom: 5px; position: relative; color: #333; z-index: 2; -webkit-transition: all 1s cubic-bezier(0.2, 1, 0.3, 1); transition: all 1s cubic-bezier(0.2, 1, 0.3, 1); } .i-listc .leftbox .li-item .td2 .p-18 { line-height: 1.2; color: #333; position: relative; z-index: 2; -webkit-transition: all 1s cubic-bezier(0.2, 1, 0.3, 1); transition: all 1s cubic-bezier(0.2, 1, 0.3, 1); } .i-listc .leftbox .li-item .td2 .j-btn { position: absolute; top: 50%; margin-top: -6px; right: .5rem; width: 11px; height: 20px; background: url(../img/z14.png) no-repeat center; background-size: 11px 20px; opacity: 0; z-index: 2; -webkit-transform: translate(-30px, 0); -ms-transform: translate(-30px, 0); transform: translate(-30px, 0); -webkit-transition: all 1s cubic-bezier(0.2, 1, 0.3, 1); transition: all 1s cubic-bezier(0.2, 1, 0.3, 1); } .i-listc .leftbox .li-item:hover .td1 img, .i-listc .leftbox .li-item.cur .td1 img { -webkit-transform: translate(-20px, 0); -ms-transform: translate(-20px, 0); transform: translate(-20px, 0); } .i-listc .leftbox .li-item:hover .td1 .p-12-en, .i-listc .leftbox .li-item.cur .td1 .p-12-en { -webkit-transform: translate(-20px, 0); -ms-transform: translate(-20px, 0); transform: translate(-20px, 0); } .i-listc .leftbox .li-item:hover .td2:before, .i-listc .leftbox .li-item.cur .td2:before { width: 100%; } .i-listc .leftbox .li-item:hover .td2 .p-18-en, .i-listc .leftbox .li-item.cur .td2 .p-18-en { color: #fff; } .i-listc .leftbox .li-item:hover .td2 .p-18, .i-listc .leftbox .li-item.cur .td2 .p-18 { color: #fff; } .i-listc .leftbox .li-item:hover .td2 .j-btn, .i-listc .leftbox .li-item.cur .td2 .j-btn { opacity: 1; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } .i-listc .rightbox { width: 67.97%; height: 100%; position: relative; overflow: hidden; } .i-listc .rightbox .img-item { background-position: center center; background-size: cover; width: 100%; height: 100%; position: absolute; left: 0; top: 0 /*&:before{ content:""; position: absolute; width: 100%; height: 100%; left: 0; top:0; z-index: 2; background: #da3830; transition: all 1s cubic-bezier(0.09, 0.6, 0.4, 0.91); }*/ } .i-listc .rightbox .img-item img { width: 100%; } .i-listc .rightbox .img-item .titlebox { opacity: 0; -webkit-transform: translate(-100px, 0); -ms-transform: translate(-100px, 0); transform: translate(-100px, 0); -webkit-transition: all 1s cubic-bezier(0.2, 1, 0.3, 1); transition: all 1s cubic-bezier(0.2, 1, 0.3, 1); } .i-listc .rightbox .titlebox { padding: 2.5rem 0 0 2.5rem; width: 500px; } .i-listc .rightbox .h-36 { margin-bottom: .3rem; } .i-listc .rightbox .orderbtn { width: 3.8rem; height: 1.15rem; line-height: 1.15rem; border-radius: 1.15rem; text-align: left; text-indent: .75rem; color: #fff; background: transparent; display: block; margin-right: 12px; position: relative; margin-top: 1rem; background: transparent; box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.1); -webkit-transition: background 0.6s cubic-bezier(0.2, 1, 0.3, 1), box-shadow 0.6s 0.4s cubic-bezier(0.2, 1, 0.3, 1); transition: background 0.6s cubic-bezier(0.2, 1, 0.3, 1), box-shadow 0.6s 0.4s cubic-bezier(0.2, 1, 0.3, 1); } .i-listc .rightbox .orderbtn:hover { background: rgba(218, 56, 48, 0.4); box-shadow: inset 0px 0px 0px 2px #da3830; } .i-listc .rightbox .orderbtn1:before { content: ""; position: absolute; width: 10px; height: 7px; top: 50%; margin-top: -3px; right: .75rem; background: url(../img/img16.png) no-repeat center; background-size: 10px 7px; } .i-listc .rightbox .img-item.active { z-index: 3 /*&:before{ width:0; left: auto; right: 0; }*/ } .i-listc .rightbox .img-item.active .titlebox { opacity: 1; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } .i-listc-m { background: #fff; padding: 2rem 0; } .i-listc-m .small-list { position: relative; } .i-listc-m .small-list:before { content: ""; width: 100%; height: 1px; background: #e5e5e5; bottom: 0; left: 0; position: absolute; } .i-listc-m .small-list .swiper-slide { text-align: center; padding-bottom: .5rem; } .i-listc-m .small-list .swiper-slide:before { content: ""; width: 80%; height: 3px; background: #da3830; bottom: 0; left: 50%; margin-left: -40%; position: absolute; -webkit-transform: scale(0, 0); -ms-transform: scale(0, 0); transform: scale(0, 0); -webkit-transition: all .5s ease; transition: all .5s ease; } .i-listc-m .small-list .swiper-slide img { max-width: 100%; display: inline-block; } .i-listc-m .small-list .swiper-slide.active-nav:before { -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); } .i-listc-m .big-list { width: 90%; margin: 1rem auto 0; } .i-listc-m .big-list .swiper-pagination { position: relative; margin-top: .7rem; } .i-listc-m .big-list .swiper-pagination span { margin: 0 5px; } .i-listc-m .big-list .swiper-pagination-bullet-active { background: #da3830; } .i-listc-m .big-list .tit-24 { font-size: 16px; color: #333; line-height: 1.5; margin-bottom: .5rem; text-align: center; } .i-listc-m .big-list .swiper-slide { position: relative; } .i-listc-m .big-list .swiper-slide img { width: 100%; } .i-listc-m .big-list .swiper-slide .text{ position: absolute; left: 1rem; top: 1.25rem; } .i-listc-m .big-list .swiper-slide .tit-32 { margin-bottom:.5rem; } .i-listd { padding: 2.25rem 0; background: #f2f2f2; } .i-listd .ulbox { margin-top: 1rem; display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; display: -webkit-flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; } .i-listd .li-item { display: block; background: #fff; margin-right: 2.5%; } .i-listd .bot { padding: 1.25rem; -webkit-transition: all .5s ease; transition: all .5s ease; } .i-listd .time { font-size: 14px; color: #4c4c4c; line-height: 1; margin-bottom: .3rem; } .i-listd .tit-24 { font-size: .6rem; line-height: 1.4; height: 1.68rem; color: #000; overflow: hidden; } .i-listd .p-16 { margin-top: .3rem; line-height: 24px; height: 48px; color: #4c4c4c; overflow: hidden; } .i-listd .orderbtn { width: 3.8rem; height: 1.15rem; line-height: 1.15rem; border-radius: 1.15rem; text-align: left; text-indent: .75rem; margin-left: -.75rem; margin-top: .5rem; color: #333; background: transparent; display: block; position: relative; font-size: 14px; -webkit-transition: all 0.6s cubic-bezier(0.2, 1, 0.3, 1); transition: all 0.6s cubic-bezier(0.2, 1, 0.3, 1); } .i-listd .orderbtn1 { margin-top: 1rem; } .i-listd .orderbtn1:before { content: ""; position: absolute; width: 10px; height: 7px; top: 50%; margin-top: -3px; right: .6rem; background: url(../img/img18-1.png) no-repeat center; background-size: 10px 7px; } .i-listd .li-item:hover .orderbtn { margin-left: 0px; color: #fff; background: #da3830; } .i-listd .li-item:hover .orderbtn:before { background: url(../img/img16.png) no-repeat center; background-size: 10px 7px; } .i-listd .li-item1 { width: 29%; } .i-listd .li-item2 { width: 37%; padding: 2rem 1.75rem; background: url(../img/img24.jpg) no-repeat center; background-size: cover; } .i-listd .li-item2 .orderbtn1 { margin-top: 2.25rem; } .i-listd .li-item2 .orderbtn1:before { background: url(../img/img16.png) no-repeat center; background-size: 10px 7px; } .i-listd .li-item3 { width: 29%; background: transparent; display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; display: -webkit-flex; -webkit-flex-flow: column wrap; -ms-flex-flow: column wrap; flex-flow: column wrap; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; } .i-listd .li-item4 { background: url(../img/img25.jpg) no-repeat center; background-size: cover; height: 50%; width:100%; overflow: hidden; } .i-listd .li-item4 .tit-24 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; height: auto; } .i-listd .news-video { position: relative; cursor: pointer; width:100%; height:48%; } .i-listd .news-video .p { position: absolute; bottom: .5rem; font-size: .5rem; color: #fff; line-height: 1.2; padding: 0 1rem 0 1.75rem; background: url(../img/pic30.png) no-repeat 1rem top; background-size: .6rem .6rem; z-index: 2; } .i-listd .news-video:before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 40%; background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.8), transparent); background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent); z-index: 1; } .i-listd .li-item:nth-child(3n) { margin-right: 0; } .i-liste { padding: 2rem 0; background: #fff; } .i-liste .ulbox { width: 1100px; margin: 1rem auto 0; } .i-liste .ulbox .img { width: 25%; text-align: center; margin-bottom: .5rem; float: left; padding: 3px; -webkit-transition: all .5s ease; transition: all .5s ease; } .i-liste .ulbox .img img { max-width: 100%; display: inline-block; -webkit-transition: all .5s ease; transition: all .5s ease; } .i-liste .ulbox .img:hover { /*background: #f5f5f5;*/ box-shadow: inset 0px 0px 0px 2px #da3830; } .i-liste .ulbox .slick-prev, .i-liste .ulbox .slick-next { width: 1.5rem; height: 1.5rem; text-indent: -9999px; margin-top: -.75rem; -webkit-transform: scale(1) translateX(0%); -ms-transform: scale(1) translateX(0%); transform: scale(1) translateX(0%); z-index: 3; } .i-liste .ulbox .slick-prev:before, .i-liste .ulbox .slick-next:before { content: ""; position: absolute; width: 1.5rem; height: 1.5rem; margin-top: -.75rem; /*overflow: hidden;*/ box-shadow: 0px 0px 0px 1px #efefef; background: #fff url(../img/pic24.png) no-repeat center; background-size: 38px 38px; display: block; border-radius: 50%; line-height: 0; top: 50%; padding: 0; border: none; outline: none; z-index: 1; -webkit-transition: all .5s ease; transition: all .5s ease; } .i-liste .ulbox .slick-prev { left: -2rem; } .i-liste .ulbox .slick-next { right: -2rem; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .i-liste .ulbox .slick-prev:after, .i-liste .ulbox .slick-next:after { -webkit-transition: all .5s ease; transition: all .5s ease; } .i-liste .slick-prev:hover:before, .i-liste .slick-next:hover:before { background: #da3830 url(../img/pic24-1.png) no-repeat center; } .i-liste .slick-prev:hover:after, .i-liste .slick-next:hover:after { background: #fdf2f1; -webkit-transform: scale(1.4); -ms-transform: scale(1.4); transform: scale(1.4); opacity: 0.9; } .n-banenr { width: 100%; height: 12.5rem; position: relative; background-repeat: no-repeat !important; background-position: center top !important; background-size: cover !important /*.scroll_down{ width: 60px; height: 60px; border:1px solid rgba(255,255,255,.2); position: absolute; border-radius: 50%; left: 50%; margin-left: -30px; bottom: 1.8rem; &:before{ color:#fff; transform:rotate(-90deg); font-size: 24px; position: absolute; left: 50%; top: 50%; margin-top: -16px; margin-left: -12.5px; opacity: .7; animation: start 1.5s infinite ease-in-out; } }*/ } .n-banenr .pc-block { opacity: 0; } .n-banenr img { width: 100%; } .n-banenr table { width: auto; float: right; margin-right: calc(300 * 0.052vw); height: 100%; color: #fff /*margin-top: -1rem;*/ } .n-banenr table .orderbtn { width: 3.8rem; height: 1.15rem; line-height: 1.15rem; border-radius: 1.15rem; text-align: left; text-indent: .75rem; font-size: 14px; color: #fff; background: #da3830; display: block; position: relative; margin-top: .75rem; -webkit-transition: background 0.6s cubic-bezier(0.2, 1, 0.3, 1), box-shadow 0.6s 0.4s cubic-bezier(0.2, 1, 0.3, 1); transition: background 0.6s cubic-bezier(0.2, 1, 0.3, 1), box-shadow 0.6s 0.4s cubic-bezier(0.2, 1, 0.3, 1); } .n-banenr table .orderbtn:hover { background: rgba(218, 56, 48, 0.4); box-shadow: inset 0px 0px 0px 2px #da3830; } .n-banenr table .orderbtn1:before { content: ""; position: absolute; width: 10px; height: 7px; top: 50%; margin-top: -3px; right: .75rem; background: url(../img/img16.png) no-repeat center; background-size: 10px 7px; } .n-banenr .table2 { float: none; margin-left: 6.8rem; margin-right: 0; } .n-banenr .tit-top-ma { margin-top: -5rem; line-height: 1.3; } .banenr-s { height: 18.75rem; } @-webkit-keyframes start { 0%,30% { opacity: 0; -webkit-transform: translate(0, -8px) rotate(-90deg); transform: translate(0, -8px) rotate(-90deg); } 60% { opacity: 1; -webkit-transform: translate(0, 0) rotate(-90deg); transform: translate(0, 0) rotate(-90deg); } 100% { opacity: 0; -webkit-transform: translate(0, 10px) rotate(-90deg); transform: translate(0, 10px) rotate(-90deg); } } @keyframes start { 0%,30% { opacity: 0; -webkit-transform: translate(0, -8px) rotate(-90deg); transform: translate(0, -8px) rotate(-90deg); } 60% { opacity: 1; -webkit-transform: translate(0, 0) rotate(-90deg); transform: translate(0, 0) rotate(-90deg); } 100% { opacity: 0; -webkit-transform: translate(0, 10px) rotate(-90deg); transform: translate(0, 10px) rotate(-90deg); } } .wn-sub-nav { position: relative; height: 60px; z-index: 3; } .wn-sub-nav .n-sub-nav { background: #fff; height: 60px; line-height: 60px; box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); } .wn-sub-nav .li { padding: 0 20px; font-size: 16px; display: block; float: left; color: #666; -webkit-transition: all .5s; transition: all .5s; position: relative; } .wn-sub-nav .li:before { content: ""; position: absolute; right: 0; top: 50%; background: #666; width: 1px; height: 20px; margin-top: -10px; } .wn-sub-nav .li:after { content: ''; position: absolute; bottom: 0; left: 15%; width: 70%; height: 3px; background: #da3830; -webkit-transform: scale3d(0, 5, 1); transform: scale3d(0, 5, 1); -webkit-transform-origin: 0% 80%; -ms-transform-origin: 0% 80%; transform-origin: 0% 80%; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; -webkit-transition-timing-function: cubic-bezier(1, 0.68, 0.16, 0.9); transition-timing-function: cubic-bezier(1, 0.68, 0.16, 0.9); } .wn-sub-nav .li:first-child { padding-left: 0; } .wn-sub-nav .li:first-child:after { left: 0%; } .wn-sub-nav .li:last-child:before { display: none; } .wn-sub-nav .li:hover, .wn-sub-nav .li.cur { color: #da3830; } .wn-sub-nav .li:hover:after, .wn-sub-nav .li.cur:after { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } .wn-sub-nav .sub-item { position: absolute; left: 0; top: 70px; width: 100%; background: #fff; text-align: center; display: none; } .wn-sub-nav .sub-item .sub-li { height: 50px; line-height: 50px; color: #333; display: block; -webkit-transition: color .5s; transition: color .5s; } .wn-sub-nav .sub-item .sub-li:hover { color: #d82128; } .wn-sub-nav .n-sub-nav .w1400 { overflow: hidden; } .wn-sub-nav .n-sub-nav .ul-item-5 .li { width: auto !important; } .li-img .img { overflow: hidden; } .li-img .img img { width: 100%; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); -webkit-transition-duration: 4s; transition-duration: 4s; -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); } .li-img:hover .img img { -webkit-transform: scale3d(1.1, 1.1, 1); transform: scale3d(1.1, 1.1, 1); } .nli-img { overflow: hidden; } .nli-img img { width: 100%; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); -webkit-transition-duration: 4s; transition-duration: 4s; -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); } .nli-img:hover img { -webkit-transform: scale3d(1.1, 1.1, 1); transform: scale3d(1.1, 1.1, 1); } .n-news { padding: 1.5rem 0; background: #fff; } .n-news .n-tit-top { margin-bottom: 1rem; } .n-news .li-item { background: #f2f2f2; display: block; width: 32%; margin-right: 2%; margin-bottom: 2%; float: left; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } .n-news .li-item:nth-child(3n) { margin-right: 0; } .n-news .li-item .dd { width: 100%; } .n-news .li-item .dd img { width: 100%; } .n-news .li-item .dt { width: 100%; padding: 1rem 1.2rem; } .n-news .li-item .dt-tit { font-size: 22px; line-height: 1.5; height: 66px; overflow: hidden; color: #505050; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } .n-news .li-item .time { font-size: 14px; line-height: 1; margin-bottom: .2rem; color: #333; padding-left: 0; position: relative; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } .n-news .li-item .time:before { content: ""; position: absolute; width: 0; height: 1px; top: 50%; left: 0; background: #666; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } .n-news .li-item .p { margin-top: .3rem; font-size: 14px; line-height: 24px; height: 48px; color: #666; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } .n-news .li-item .dd-j { margin-top: .6rem; font-size: 14px; color: #666; line-height: 1.5; padding-right: .8rem; display: inline-block; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; background: url(../img/img18-1.png) no-repeat right center; } .n-news .li-item:hover { background: #da3830; } .n-news .li-item:hover .dt-tit, .n-news .li-item:hover .time, .n-news .li-item:hover .p { color: #fff; } .n-news .li-item:hover:before { background: #fff; } .n-news .li-item:hover .dd-j { color: #fff; padding-right: 1rem; background: url(../img/img18.png) no-repeat right center; } .n-news .li-item:hover .time { padding-left: 15px; } .n-news .li-item:hover .time:before { width: 10px; background: #fff; } .click-btn { width: 100%; margin-top: 1rem; border-top: 1px solid #e3e3e3; text-align: center; padding-top: .5rem; } .click-btn span { font-size: 16px; line-height: 1.5; display: inline-block; padding-right: 30px; color: #333; position: relative; cursor: pointer; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; } .click-btn span:before { content: ""; position: absolute; width: 22px; height: 22px; border-radius: 50%; background: #d82128; right: 0; overflow: hidden; } .click-btn span:after { content: ""; position: absolute; background: url(../img/img16.png) no-repeat center center; width: 22px; height: 22px; right: 0; -webkit-animation: start1 1.5s infinite ease-in-out; animation: start1 1.5s infinite ease-in-out; } .click-btn:hover span { color: #d82128; } @-webkit-keyframes start1 { 0%,30% { opacity: 0; -webkit-transform: translate(0, -8px) rotate(90deg); transform: translate(0, -8px) rotate(90deg); } 60% { opacity: 1; -webkit-transform: translate(0, 0) rotate(90deg); transform: translate(0, 0) rotate(90deg); } 100% { opacity: 0; -webkit-transform: translate(0, 10px) rotate(90deg); transform: translate(0, 10px) rotate(90deg); } } @keyframes start1 { 0%,30% { opacity: 0; -webkit-transform: translate(0, -8px) rotate(90deg); transform: translate(0, -8px) rotate(90deg); } 60% { opacity: 1; -webkit-transform: translate(0, 0) rotate(90deg); transform: translate(0, 0) rotate(90deg); } 100% { opacity: 0; -webkit-transform: translate(0, 10px) rotate(90deg); transform: translate(0, 10px) rotate(90deg); } } .n-info { position: relative; background: #fff; z-index: 2; } .n-info .info-left { width: 21.5%; height: 100%; padding: 4rem 20px 0 0; position: absolute; } .n-info .info-left .time { font-size: 16px; line-height: 1; color: #999; padding-left: 3rem; position: relative; } .n-info .info-left .time:before { content: ""; position: absolute; width: 2.5rem; top: 50%; left: 0; height: 1px; background: #999; } .n-info .info-box { padding: 3rem 1.1rem 2.5rem; border-left: 1px solid #dbdbdb; border-right: 1px solid #dbdbdb; width: 57%; min-height: 600px; margin-left: 23.5%; } .n-info .info-box .top { text-align: center; } .n-info .info-box .h { font-size: .9rem; line-height: 1.5; margin-bottom: 10px; color: #000; } .n-info .info-box .time { font-size: 14px; line-height: 1; color: #999; } .n-info .info-box .info-text { font-size: 16px; line-height: 1.8; color: #666; padding-bottom: 1rem; border-bottom: 1px solid #dbdbdb; } .n-info .info-box .info-text img { max-width: 100%; } .n-info .info-box .fxbox { margin: 1rem 0 0; position: relative; } .n-info .info-box .fxbox .tit { font-size: 16px; line-height: 1; margin-bottom: 10px; color: #999; } .n-info .info-box .fxbox .bdsharebuttonbox a { padding-left: 0; width: 1.5rem; height: 1.5rem; background: #1a1a1a; color: #fff; text-align: center; line-height: 1.5rem; opacity: 1; -webkit-transition: all .5s; transition: all .5s; } .n-info .info-box .fxbox .icon-weibo:before, .n-info .info-box .fxbox .icon-wechat:before { font-size: 24px; } .n-info .info-box .fxbox .bdsharebuttonbox a:hover { background: #dc373d; opacity: 1; } .n-info .info-box .backbtn { width: 3.8rem; height: 1.15rem; line-height: 1.25rem; border-radius: 1.15rem; text-align: center; color: #fff; background: #da3830; display: block; margin-right: 12px; position: absolute; bottom: 10px; right: 0; -webkit-transition: background 0.6s cubic-bezier(0.2, 1, 0.3, 1), box-shadow 0.6s 0.4s cubic-bezier(0.2, 1, 0.3, 1); transition: background 0.6s cubic-bezier(0.2, 1, 0.3, 1), box-shadow 0.6s 0.4s cubic-bezier(0.2, 1, 0.3, 1); } .n-info .info-box .backbtn:hover { background: rgba(218, 56, 48, 0.4); box-shadow: inset 0px 0px 0px 2px #da3830; } .n-info .info-right { padding: 4rem 0 0 .9rem; width: calc(21.5% - .9rem); } .n-info .info-right .tit { font-size: 16px; color: #999; padding-bottom: 15px; position: relative; } .n-info .info-right .tit:before { content: ""; position: absolute; bottom: -5px; height: 1px; width: 50px; background: #999; margin-bottom: 15px; } .n-info .info-right .ul .li { font-size: 14px; line-height: 2; color: #999; padding-left: 10px; display: block; position: relative; margin-bottom: 10px; -webkit-transition: all .5s ease; transition: all .5s ease; } .n-info .info-right .ul .li:before { content: ""; position: absolute; width: 3px; height: 3px; background: #999; border-radius: 50%; top: 12px; left: 0; } .n-info .info-right .ul .li:hover { color: #d82128; } .n-info .info-left.active { position: fixed; top: 0; padding-top: 80px; } .n-service .list-item { background: #fff; padding: 1rem 0; } .n-service .list-item:nth-child(even) { background: #f2f2f2; } .n-service .listbox { margin-top: .7rem; padding-bottom: 1rem; } .n-service .listbox .slick-slide { width: 100%; } .n-service .listbox .slick-dots li { margin: 0 10px; background: transparent; box-shadow: 0px 0px 0px 1px #cdcdcd; } .n-service .listbox .slick-dots li.slick-active { background: #da3830; box-shadow: 0px 0px 0px 1px #da3830; } .n-service .listbox .li-item { width: 23%; float: left; margin-right: 2.6%; margin-bottom: 2.6%; border: 1px solid #e5e5e5; position: relative; } .n-service .listbox .li-item img { width: 100%; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); position: relative; z-index: 1; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; } .n-service .listbox .li-item:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(228, 50, 41, 0.9); opacity: 0; -webkit-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); z-index: 2; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; } .n-service .listbox .li-item p { text-align: center; color: #fff; padding: 0 5%; top: 50%; width: 100%; left: 0; position: absolute; z-index: 3; margin-top: -0.4rem; font-size: 0.65rem; opacity: 0; -webkit-transition: all .5s .3s ease-in-out; transition: all .5s .3s ease-in-out; } .n-service .listbox .li-item:hover:before { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .n-service .listbox .li-item:hover p { opacity: 1; } .n-service .listbox .li-item:hover img { -webkit-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); } .n-service .listbox .li-item:nth-child(4n) { margin-right: 0; } .n-service .listbox-two { margin-top: 1rem; margin-bottom: 1rem; } .n-service .listbox-two .li-item { display: block; padding: 0 2rem 0 1.25rem; height: 65px; line-height: 65px; background: #fafafa; position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #333; font-size: 18px; box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1); margin-bottom: .5rem; -webkit-transition: all .5s ease; transition: all .5s ease; } .n-service .listbox-two .li-item:before { content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #c3c3c3; left: .6rem; top: 50%; margin-top: -4px; -webkit-transition: all .5s ease; transition: all .5s ease; } .n-service .listbox-two .li-item:after { content: ""; position: absolute; width: 40px; height: 60px; right: .8rem; top: 0; background: url(../img/img19.png) no-repeat center top; } .n-service .listbox-two .li-item:hover { color: #da3830; } .n-service .listbox-two .li-item:hover:before { background: #da3830; } .n-service .listbox-two .li-item:hover:after { background: url(../img/img19.png) no-repeat center bottom; } .n-contact #dituContent { width: 100%; height: 12.5rem; } .n-contact #dituContent .BMap_Marker img { max-width: 100%; max-height: 100%; margin-left: 0px !important; margin-top: 0px !important; } .n-contact .lista { background: #fff; padding: 2rem 0; } .n-contact .lista .ulbox { margin-top: 1.5rem; } .n-contact .lista .ulbox .li { width: 25%; float: left; text-align: center; } .n-contact .lista .ulbox .li img { width: 2.6rem; height: 2.6rem; margin-bottom: .5rem; } .n-contact .lista .ulbox .li .tit-22 { font-size: .7rem; line-height: 1.2; color: #000; margin-bottom: .3rem; } .n-contact .lista .ulbox .li .p-16 { padding: 0 5%; } .n-contact .listb { background-color: #f7f7f7; padding: 1.5rem 0; } .n-contact .listb .formbox { margin-top: .7rem; } .n-contact .listb .formbox .input1 { float: left; height: 40px; line-height: 40px; width: 23%; margin-right: 2.6%; border: 1px solid #ededed; margin-bottom: .5rem; font-size: 16px; color: #333; text-indent: 10px; background: #fff; } .n-contact .listb .formbox .input2 { padding-top: 15px; width: 100%; font-size: 16px; color: #333; height: 7rem; line-height: 24px; text-indent: 10px; background: #fff; border: 1px solid #ededed; margin-bottom: .5rem; } .n-contact .listb .formbox .input1:nth-child(4) { margin-right: 0; } .n-contact .listb .formbox .coadbtn { width: 100px; height: 36px; margin-left: 0; } .n-contact .listb .formbox .inputbox2 { margin-bottom: 1rem; } .n-contact .listb .formbox .inputbox3 { text-align: center; } .n-contact .listb .formbox .inputbox3 .orderbtn { width: 3.8rem; height: 1.15rem; line-height: 1.15rem; border-radius: 1.15rem; text-align: center; color: #fff; background: #da3830; display: block; margin-right: 12px; position: relative; border: none; display: inline-block; -webkit-transition: background 0.6s cubic-bezier(0.2, 1, 0.3, 1), box-shadow 0.6s 0.4s cubic-bezier(0.2, 1, 0.3, 1); transition: background 0.6s cubic-bezier(0.2, 1, 0.3, 1), box-shadow 0.6s 0.4s cubic-bezier(0.2, 1, 0.3, 1); } .n-contact .listb .formbox .inputbox3 .orderbtn:hover { background: rgba(218, 56, 48, 0.4); box-shadow: inset 0px 0px 0px 2px #da3830; } .n-contact .listb .formbox .inputbox3 .orderbtn1:before { content: ""; position: absolute; width: 10px; height: 7px; top: 50%; margin-top: -3px; right: .75rem; background-size: 10px 7px; } .n-contact .listb .formbox .inputbox3 .orderbtn2 { background: transparent; box-shadow: inset 0px 0px 0px 1px #d2d2d2; color: #666; } .n-contact .listb .formbox .inputbox3 .orderbtn2:before { content: ""; position: absolute; width: 0; height: 0; left: .7rem; top: 50%; margin-top: -6px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 6px solid #fff; } .n-tech { background: #fff; padding: 2rem 0; } .n-tech .listbox { margin-top: 1rem; } .n-tech .li { position: relative; width: 32%; margin-right: 2%; float: left; margin-bottom: 2%; } .n-tech .li:before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 40%; background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.8), transparent); background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent); z-index: 1; } .n-tech .li p { position: absolute; width: 100%; padding: .5rem 1rem; bottom: 0; color: #fff; z-index: 2; } .n-tech .li:nth-child(3n) { margin-right: 0; } .n-join .lista { background: #fff; padding: 1.5rem 0; } .n-join .lista .tit-20 { line-height: 1.5; } .n-join .list-item { background: #fff; padding: 1rem 0; } .n-join .list-item .ul { margin-top: 1rem; } .n-join .list-item .li { width: 32%; margin-right: 2%; margin-bottom: 2%; float: left; display: block; } .n-join .list-item .li:nth-child(3n) { margin-right: 0; } .n-join .list-item .p { font-size: .55rem; line-height: 1.5; margin-top: .75rem; color: #333; } .n-join .list-item .jbtn { width: 35px; height: 35px; background: #fff; border-radius: 50%; position: relative; margin-top: .2rem; overflow: hidden; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); -webkit-transition: all .6s ease; transition: all .6s ease; } .n-join .list-item .jbtn:before { content: ""; position: absolute; width: 35px; height: 35px; left: 0; top: 0; background: url(../img/img18-1.png) no-repeat center center; z-index: 2; opacity: 1; -webkit-transform: translate(0%, 0); -ms-transform: translate(0%, 0); transform: translate(0%, 0); -webkit-transition: all .6s ease; transition: all .6s ease; } .n-join .list-item .jbtn:after { content: ""; position: absolute; width: 35px; height: 35px; left: 0; top: 0; background: url(../img/img18.png) no-repeat center center; z-index: 2; opacity: 0; -webkit-transform: translate(100%, 0); -ms-transform: translate(100%, 0); transform: translate(100%, 0); -webkit-transition: all .6s ease; transition: all .6s ease; } .n-join .list-item .li:hover .jbtn { background: #da3830; box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.1); } .n-join .list-item .li:hover .jbtn:before { opacity: 0; -webkit-transform: translate(100%, 0); -ms-transform: translate(100%, 0); transform: translate(100%, 0); } .n-join .list-item .li:hover .jbtn:after { opacity: 1; -webkit-transform: translate(0%, 0); -ms-transform: translate(0%, 0); transform: translate(0%, 0); } .n-join .list-item:nth-child(even) { background: #f2f2f2; } .n-join .list-item-two .li { width: 49%; margin-right: 2%; } .n-join .list-item-two .li:nth-child(2n) { margin-right: 0; } .n-join-info { padding: 2rem 0; background: #fff; } .n-join-info .imgbox { margin-top: 1.25rem; } .n-join-info .big-list { width: 1100px; margin: 0 auto; position: relative; } .n-join-info .big-list .arrow-left, .n-join-info .big-list .arrow-right { position: absolute; top: 50%; width: 50px; height: 50px; margin-top: -25px; display: block; -webkit-transform: scale(1) translateX(0%); -ms-transform: scale(1) translateX(0%); transform: scale(1) translateX(0%); } .n-join-info .big-list .arrow-left:before, .n-join-info .big-list .arrow-right:before { content: ""; position: absolute; width: 100%; height: 100%; /*overflow: hidden;*/ box-shadow: 0px 0px 0px 1px #efefef; background: #fff url(../img/pic24.png) no-repeat center; background-size: 38px 38px; display: block; border-radius: 50%; line-height: 0; top: 50%; padding: 0; border: none; outline: none; z-index: 1; -webkit-transition: all .5s ease; transition: all .5s ease; } .n-join-info .big-list .arrow-left { left: -3rem; } .n-join-info .big-list .arrow-right { right: -3rem; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .n-join-info .big-list .arrow-left:after, .n-join-info .big-list .arrow-right:after { -webkit-transition: all .5s ease; transition: all .5s ease; content: ""; width: 100%; height: 100%; position: absolute; left: 50%; top: 50%; margin-top: 0%; margin-left: -50%; border-radius: 50%; } .n-join-info .big-list .arrow-left:hover:before, .n-join-info .big-list .arrow-right:hover:before { background: #da3830 url(../img/pic24-1.png) no-repeat center; } .n-join-info .big-list .arrow-left:hover:after, .n-join-info .big-list .arrow-right:hover:after { background: #fdf2f1; -webkit-transform: scale(1.4); -ms-transform: scale(1.4); transform: scale(1.4); opacity: 0.9; } .n-join-info .big-list .swiper-slide { position: relative; } .n-join-info .big-list .swiper-slide:before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 40%; background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.8), transparent); background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent); z-index: 1; } .n-join-info .big-list .p-24 { font-size: 24px; width: 100%; text-align: center; position: absolute; bottom: .8rem; color: #fff; z-index: 2; } .n-join-info .small-list { width: 1112px; margin: 16px auto 0; position: relative /*.swiper-slide { width: 210px; height: 128px; cursor: pointer; }*/ } .n-join-info .small-list img { width: 100%; display: block; } .n-join-info .small-list .swiper-slide { padding: 0 6px; } .n-join-info .small-list .swiper-slide.active-nav img { border: 3px solid #da3830; } .n-join-info .small-list .swiper-button-prev { left: 0; } .n-join-info .small-list .swiper-button-next { right: 0; } .n-join-info .small-list .swiper-button-prev, .n-join-info .small-list .swiper-button-next { width: 45px; height: 100%; top: 0; margin-top: 0; background: rgba(0, 0, 0, 0.8); z-index: 6; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; } .n-join-info .small-list .swiper-button-prev:before, .n-join-info .small-list .swiper-button-next:before { position: absolute; content: ""; width: 100%; height: 100%; left: 0; top: 0; background: url(../img/pic28.png) no-repeat center; } .n-join-info .small-list .swiper-button-next:before { -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); } .n-join-info .small-list .swiper-button-prev:hover, .n-join-info .small-list .swiper-button-next:hover { background: #da3830; } .n-development { background: #fff; padding: 1.95rem 0; position: relative; z-index: 1; } .n-development .img { width: 60%; } .n-development .img img { width: 100%; } .n-development .text { background: url(../img/img14.jpg) no-repeat center center; padding: 1.25rem; background-size: cover; width: 48%; margin-left: -8%; margin-top: 2rem; position: relative; z-index: 2; } .n-development .text .tit-30 { margin-bottom: .5rem; font-weight: bold; } .n-development .text p { margin-bottom: 10px; } .n-about-tech { background: #fff; padding-bottom: 2.5rem; } .n-about-tech .n-tit-top { padding: 1.8rem 0 2.25rem; } .n-about-tech .list-item { padding-bottom: 1.5rem; } .n-about-tech .list-item .tit-20 { margin: .3rem 0 .6rem; } .n-about-tech .listbox { padding-bottom: 1rem; } .n-about-tech .list-item .listbox .slick-slide { padding: 0 20px 0 0; overflow: hidden; } .n-about-tech .list-item .listbox .slick-slide img { width: 100%; } .n-about-tech .slick-dots { height: 8px; bottom: 0; } .n-about-tech .slick-dots li { width: 8px; height: 8px; margin: 0 10px; background: #d9d9d9; } .n-about-tech .slick-dots li.slick-active { background: #da3830; } .n-about-tech .w-processbox:before { content: ""; position: absolute; width: 100%; height: 1px; top: 50%; margin-top: -0.5px; background: #e5e5e5; } .n-about-tech .processbox-top { padding-top: 0; } .n-about-tech .processbox { width: 978px; margin: 0 auto; } .n-about-tech .processbox .li-item { background: url(../img/pic22.png) no-repeat center; height: 326px; background-size: cover; padding: 0 70px; } .n-about-tech .processbox .li-item2 { background: url(../img/pic22-1.png) no-repeat center; height: 326px; background-size: cover; } .n-about-tech .processbox .iconbox { height: 163px; line-height: 163px; text-align: center; } .n-about-tech .processbox .iconbox img { width: 50px; height: 50px; display: inline-block; } .n-about-tech .processbox .p-18 { padding-top: 1rem; } .n-about-tech .processbox .dian { width: .5rem; height: .5rem; border-radius: 50%; background: rgba(218, 56, 48, 0.5); position: absolute; left: 50%; top: 50%; margin-top: -.25rem; margin-left: -.25rem; } .n-about-tech .processbox .dian:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 50%; background: #da3830; -webkit-transform: scale(0.5, 0.5); -ms-transform: scale(0.5, 0.5); transform: scale(0.5, 0.5); } .n-about-tech .processbox .slick-prev, .n-about-tech .processbox .slick-next { width: 38px; height: 38px; text-indent: -9999px; -webkit-transform: scale(1) translateX(0%); -ms-transform: scale(1) translateX(0%); transform: scale(1) translateX(0%); } .n-about-tech .processbox .slick-prev:before, .n-about-tech .processbox .slick-next:before { content: ""; position: absolute; width: 38px; height: 38px; margin-top: -19px; /*overflow: hidden;*/ box-shadow: 0px 0px 0px 1px #efefef; background: #fff url(../img/pic24.png) no-repeat center; background-size: 38px 38px; display: block; border-radius: 50%; line-height: 0; top: 50%; padding: 0; border: none; outline: none; z-index: 1; -webkit-transition: all .5s ease; transition: all .5s ease; } .n-about-tech .processbox .slick-prev { left: -3rem; } .n-about-tech .processbox .slick-next { right: -3rem; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .n-about-tech .processbox .slick-prev:after, .n-about-tech .processbox .slick-next:after { -webkit-transition: all .5s ease; transition: all .5s ease; } .n-about-tech .slick-prev:hover:before, .n-about-tech .slick-next:hover:before { background: #da3830 url(../img/pic24-1.png) no-repeat center; } .n-about-tech .slick-prev:hover:after, .n-about-tech .slick-next:hover:after { background: #fdf2f1; -webkit-transform: scale(1.4); -ms-transform: scale(1.4); transform: scale(1.4); opacity: 0.9; } .n-controller { background: #fff; padding: 1.6rem 0; } .n-controller .dlbox { background: #f5f5f5; margin-bottom: 1rem; } .n-controller .dlbox .img { width: 13rem; } .n-controller .dlbox .img img { width: 100%; } .n-controller .dlbox .text { width: calc(100% - 13rem); padding: 1.1rem; } .n-controller .dlbox .text .p-18 { margin-top: .3rem; word-wrap: break-word; } .n-govern { background: #fff; } .n-govern .lista { padding: 2.5rem 0 3rem; } .n-govern .lista .tit-20 { line-height: 1.6; } .n-govern .lista .tit-20-two { margin-top: 1.5rem; } .n-govern .listb { padding: 2rem 0; background: #f5f5f5; } .n-govern .listb .tit-36 { margin-bottom: .9rem; } .n-govern .listb .libox { display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; display: -webkit-flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; } .n-govern .listb .libox .li-item { width: 32%; margin-right: 2%; background: #fff; padding: 1rem; position: relative; } .n-govern .listb .libox .li-item .tit-30 { padding: 1.75rem 0; } .n-govern .listb .libox .li-item .img { width: 58px; height: 58px; margin-bottom: .75rem; } .n-govern .listb .libox .li-item .tit-20 { line-height: 1.5; } .n-govern .listb .libox .li-item:nth-child(1):before { content: ""; position: absolute; width: 40px; height: 40px; left: 1rem; top: 1rem; background: url(../img/pic25.png) no-repeat center center; background-size: 1rem auto; } .n-govern .listb .libox .li-item:nth-child(1):after { content: ""; position: absolute; width: 40px; height: 40px; background: url(../img/pic25-1.png) no-repeat center center; background-size: 1rem auto; right: 1rem; bottom: 1rem; } .n-govern .listb .libox .li-item:nth-child(3n) { margin-right: 2%; } .n-govern .listb .ulbox { display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; display: -webkit-flex; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; margin-top: 2rem; } .n-govern .listb .ulbox .li-item { background: #fff; margin-bottom: .7rem; width: 47%; display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; display: -webkit-flex; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; } .n-govern .listb .ulbox .li-item .left { width: 180px; background: #e6e6e6; padding: 0 .9rem; display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; display: -webkit-flex; -webkit-flex-flow: column nowrap; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-transition: all .6s ease; transition: all .6s ease; } .n-govern .listb .ulbox .li-item .left .tit-24 { font-family: "GOTHIC"; font-size: 24px; font-style: italic; color: #666; -webkit-transition: all .6s ease; transition: all .6s ease; } .n-govern .listb .ulbox .li-item .left .tit-120 { font-size: 120px; line-height: 1; color: #666; font-family: "GOTHIC"; font-style: italic; opacity: .2; -webkit-transition: all .6s ease; transition: all .6s ease; } .n-govern .listb .ulbox .li-item .right { width: calc(100% - 180px); height: 100%; padding: 1.25rem; } .n-govern .listb .ulbox .li-item .right .col-red { margin-bottom: .75rem; } .n-govern .listb .ulbox .li-item .right p { margin-bottom: 10px; } .n-govern .listb .ulbox .li-item .right img { max-width: 100%; } .n-govern .listb .ulbox .li-item:hover .left { background: #da3830; border-top-left-radius: 10px; border-bottom-left-radius: 10px; } .n-govern .listb .ulbox .li-item:hover .left .tit-24, .n-govern .listb .ulbox .li-item:hover .left .tit-120 { color: #fff; } .n-about { background: #fff; } .n-about .lista { width: 88%; margin-left: 12%; padding: 1.75rem 0; } .n-about .lista .right { width: 48%; padding-top: 13.5%; } .n-about .lista .right img { width: 100%; } .n-about .lista .n-tit-top { margin-bottom: 40px; padding-right: 5%; } .n-about .lista .pbox { padding: 1.2rem; background: #fafafa; } .n-about .lista .pbox .tit-24 { margin-bottom: .5rem; font-size: 24px; line-height: 1.5; } .n-about .lista .left { width: 52%; } .n-about .lista .left .p-18 { max-height: 12rem; } .n-about .lista .left .p-18 img { max-width: 100%; } .n-about .lista .mCSB_scrollTools { left: 0px !important; right: auto !important; opacity: 0; } .n-about .lista .p-18:hover .mCSB_scrollTools { opacity: 1; } .n-about .lista .mCSB_inside > .mCSB_container { margin-left: 20px; margin-right: 0; } .n-about .lista .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 2px; background: red !important; } .n-about .listb { background: #f5f5f5; padding: 1.75rem 0; } .n-about .listb .dlbox { margin-top: 1.5rem; display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; display: -webkit-flex; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; } .n-about .listb .li-item { width: 50%; padding: 1.8rem; } .n-about .listb .li-item .img { width: 60px; height: 60px; margin-right: 1rem; } .n-about .listb .li-item .img img { width: 100%; } .n-about .listb .li-item .tit-24 { font-size: 24px; color: #333; line-height: 1.5; margin-bottom: 15px; } .n-about .listb .li-item .text { width: calc(100% - 120px); } .n-about .listb .li-item:nth-child(1) { border-right: 1px solid #dadada; border-bottom: 1px solid #dadada; } .n-about .listb .li-item:nth-child(2) { border-bottom: 1px solid #dadada; } .n-about .listb .li-item:nth-child(3) { border-right: 1px solid #dadada; } .n-about .listc { padding: 1.75rem 0; } .n-about .listc .timebox { position: relative; margin-top: 1.25rem; } .n-about .listc .timebox:before { content: ""; position: absolute; width: 100%; height: 1px; bottom: 18px; background: #e5e5e5; } .n-about .listc .n-timebox { width: 800px; margin-left: 80px; } .n-about .listc .n-timebox .year-dian { padding-bottom: 1.2rem; font-size: 20px; color: #333; line-height: 1; position: relative; float: left; text-align: center; cursor: pointer; -webkit-transition: all .5s ease; transition: all .5s ease; } .n-about .listc .n-timebox .dian { width: .5rem; height: .5rem; border-radius: 50%; background: transparent; position: absolute; left: 50%; margin-left: -.25rem; bottom: 10px; -webkit-transition: all .5s ease; transition: all .5s ease; } .n-about .listc .n-timebox .dian:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 50%; background: #e4e4e4; -webkit-transform: scale(0.5, 0.5); -ms-transform: scale(0.5, 0.5); transform: scale(0.5, 0.5); -webkit-transition: all .5s ease; transition: all .5s ease; } .n-about .listc .n-timebox .slick-slide.active .year-dian { color: #dc2525; } .n-about .listc .n-timebox .slick-slide.active .year-dian .dian { background: rgba(218, 56, 48, 0.5); } .n-about .listc .n-timebox .slick-slide.active .year-dian .dian:before { background: #da3830; } .n-about .listc .n-timebox .slick-prev, .n-about .listc .n-timebox .slick-next { width: 38px; height: 38px; text-indent: -9999px; margin-top: -6px; -webkit-transform: scale(1) translateX(0%); -ms-transform: scale(1) translateX(0%); transform: scale(1) translateX(0%); } .n-about .listc .n-timebox .slick-prev:before, .n-about .listc .n-timebox .slick-next:before { content: ""; position: absolute; width: 38px; height: 38px; margin-top: -19px; box-shadow: 0px 0px 0px 1px #efefef; background: #fff url(../img/pic24.png) no-repeat center; background-size: 38px 38px; display: block; border-radius: 50%; line-height: 0; top: 50%; padding: 0; border: none; outline: none; z-index: 1; -webkit-transition: all .5s ease; transition: all .5s ease; } .n-about .listc .n-timebox .slick-prev { left: -2rem; } .n-about .listc .n-timebox .slick-next { right: -2rem; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .n-about .listc .n-timebox .slick-prev:after, .n-about .listc .n-timebox .slick-next:after { -webkit-transition: all .5s ease; transition: all .5s ease; } .n-about .listc .n-timebox .slick-prev:hover:before, .n-about .listc .n-timebox .slick-next:hover:before { background: #da3830 url(../img/pic24-1.png) no-repeat center; } .n-about .listc .n-timebox .slick-prev:hover:after, .n-about .listc .n-timebox .slick-next:hover:after { background: #fdf2f1; -webkit-transform: scale(1.4); -ms-transform: scale(1.4); transform: scale(1.4); opacity: 0.9; } .n-about .listc .timeajax { margin-top: 1.2rem; } .n-about .listc .timeajax .time-text { width: 57%; margin-left: 6.4%; padding-top: 1.5rem; position: relative; } .n-about .listc .timeajax .time-text:before { content: ""; position: absolute; width: 1px; height: 100%; left: 110px; top: 0; background: #e5e5e5; } .n-about .listc .timeajax .time-text .li { width: 100%; margin-bottom: 1.75rem; } .n-about .listc .timeajax .time-text .li .time-dian { width: 80px; font-size: 20px; font-family: "Arial"; line-height: 25px; height: 25px; color: #333; } .n-about .listc .timeajax .time-text .li .p-18 { padding-left: 80px; position: relative; width: calc(100% - 80px); line-height: 25px; } .n-about .listc .timeajax .time-text .li .p-18:before { content: ""; position: absolute; width: 60px; height: 1px; background: #d9d9d9; left: 0; top: 15px; } .n-about .listc .timeajax .time-text .li .p-18:after { content: ""; position: absolute; background: #d9d9d9; width: 9px; height: 9px; left: 26px; top: 11px; border-radius: 50%; } .n-about .listc .timeajax .time-text .morebtn { width: 40px; height: 40px; box-shadow: 0px 0px 10px 2px #f7d6d4; border-radius: 50%; position: absolute; bottom: 0; left: 90px; z-index: 2; cursor: pointer; -webkit-transition: all .8s ease; transition: all .8s ease; } .n-about .listc .timeajax .time-text .morebtn:before { content: ""; position: absolute; width: 100%; height: 100%; border-radius: 50%; background: #dc2525; position: absolute; top: 50%; left: 50%; margin-top: -50%; margin-left: -50%; z-index: 2; } .n-about .listc .timeajax .time-text .morebtn img { width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; margin-top: -50%; margin-left: -50%; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); z-index: 3; -webkit-animation: start 1.5s infinite ease-in-out; animation: start 1.5s infinite ease-in-out; } .n-about .listc .timeajax .morebtn:hover { box-shadow: 0px 0px 10px 10px #f7d6d4; } .n-about .listc .timeajax .time-img { width: 25%; padding-bottom: 1.2rem; } .n-about .listc .timeajax .time-img .li-item { width: 100%; } .n-about .listc .timeajax .time-img .img { margin-bottom: .5rem; } .n-about .listc .timeajax .time-img img { width: 100%; } .n-about .listc .timeajax .time-img .slick-dots li { margin: 0 10px; background: transparent; box-shadow: 0px 0px 0px 1px #cdcdcd; } .n-about .listc .timeajax .time-img .slick-dots li.slick-active { background: #da3830; box-shadow: 0px 0px 0px 1px #da3830; } .n-products { padding: .5rem 0 2.25rem; background: #f2f2f2; } .n-products .products-form { width: 200px; padding: 0 10px; height: 42px; line-height: 42px; border-radius: 42px; border-radius: 42px; border: 1px solid #d3d3d3; } .n-products .products-form .text { width: 140px; border: none; background: none; height: 40px; line-height: 22px; padding: 10px 0; font-size: 14px; color: #666; } .n-products .products-form .submit { width: 30px; height: 42px; background: url(../img/img2.png) no-repeat center center; border: none; } .n-products .ulbox { margin-top: .75rem; } .n-products .ulbox .li-item { width: 32%; margin-bottom: 2%; margin-right: 2%; float: left; border: 1px solid #e7e7e7; background: #fff; display: block; } .n-products .ulbox .li-item:nth-child(3n) { margin-right: 0; } .n-products .ulbox .bot { padding: .65rem .75rem; border-top: 1px solid #e7e7e7; -webkit-transition: all .5s ease; transition: all .5s ease; } .n-products .ulbox .sp1 { font-size: 20px; line-height: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: calc(100% - 80px); color: #333; -webkit-transition: all .5s ease; transition: all .5s ease; } .n-products .ulbox .sp2 { font-size: 14px; color: #333; line-height: 22px; padding-right: 20px; position: relative; -webkit-transition: all .5s ease; transition: all .5s ease; } .n-products .ulbox .sp2:before { content: ""; position: absolute; right: 0; top: 50%; margin-top: -11px; width: 15px; height: 22px; background: url(../img/img18-1.png) no-repeat right center; opacity: 1; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: all .5s ease; transition: all .5s ease; } .n-products .ulbox .sp2:after { content: ""; position: absolute; right: 0; top: 50%; width: 15px; height: 22px; margin-top: -11px; background: url(../img/img18.png) no-repeat right center; opacity: 0; -webkit-transform: translate(100%, 0); -ms-transform: translate(100%, 0); transform: translate(100%, 0); -webkit-transition: all .5s ease; transition: all .5s ease; } .n-products .ulbox .li-item:hover .bot { background: #da3830; } .n-products .ulbox .li-item:hover .sp1 { color: #fff; margin-left: -5px; } .n-products .ulbox .li-item:hover .sp2 { color: #fff; } .n-products .ulbox .li-item:hover .sp2:before { opacity: 0; -webkit-transform: translate(100%, 0%); -ms-transform: translate(100%, 0%); transform: translate(100%, 0%); } .n-products .ulbox .li-item:hover .sp2:after { opacity: 1; -webkit-transform: translate(0%, 0%); -ms-transform: translate(0%, 0%); transform: translate(0%, 0%); } .n-products-info .lista { display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; display: -webkit-flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; } .n-products-info .lista .pro-left { width: 50%; padding-left: 1.6rem; background: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; display: -webkit-flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .n-products-info .lista .pro-left .small-list { width: 80px; height: 300px; float: left; overflow: hidden; position: relative; margin-right: 50px; } .n-products-info .lista .pro-left .small-list .swiper-container { width: 100%; height: 240px; margin-top: 30px; } .n-products-info .lista .pro-left .small-list .swiper-slide { padding: 6px 0; cursor: pointer; } .n-products-info .lista .pro-left .small-list .swiper-slide img { width: 100%; border: 2px solid #bfbfbf; } .n-products-info .lista .pro-left .small-list .swiper-slide.active-nav img { border: 2px solid #cb231d; } .n-products-info .lista .pro-left .small-list .swiper-button-next, .n-products-info .lista .pro-left .small-list .swiper-button-prev { width: 40px; height: 40px; position: absolute; left: 50%; top: auto !important; margin-top: 0px !important; margin-left: -20px; background: url(../img/img6.png) no-repeat center center; } .n-products-info .lista .pro-left .small-list .swiper-button-prev { top: 0rem !important; background: url(../img/img6-1.png) no-repeat center center; } .n-products-info .lista .pro-left .small-list .swiper-button-next { bottom: 0rem; } .n-products-info .lista .pro-left .big-list { width: calc(100% - 130px); } .n-products-info .lista .pro-right { width: 50%; background: #f5f5f5; padding: 2.75rem 2.5rem 2rem; } .n-products-info .lista .pro-right .p-18 { margin-top: 1.25rem; } .n-products-info .lista .pro-right .orderbtn { width: 3.8rem; height: 1.15rem; line-height: 1.15rem; border-radius: 1.15rem; text-align: left; text-indent: .75rem; color: #fff; background: #da3830; display: block; position: relative; margin-top: 1.5rem; font-size: 14px; -webkit-transition: background 0.6s cubic-bezier(0.2, 1, 0.3, 1), box-shadow 0.6s 0.4s cubic-bezier(0.2, 1, 0.3, 1); transition: background 0.6s cubic-bezier(0.2, 1, 0.3, 1), box-shadow 0.6s 0.4s cubic-bezier(0.2, 1, 0.3, 1); } .n-products-info .lista .pro-right .orderbtn:hover { background: rgba(218, 56, 48, 0.4); box-shadow: inset 0px 0px 0px 2px #da3830; } .n-products-info .lista .pro-right .orderbtn1:before { content: ""; position: absolute; width: 10px; height: 7px; top: 50%; margin-top: -3px; right: .75rem; background: url(../img/img16.png) no-repeat center; background-size: 10px 7px; } .n-products-info .listb { background: #fff; padding: 1.8rem 0; } .n-products-info .listb .ulbox { margin-bottom: 1rem; } .n-products-info .listb .tit-50 { font-size: 1.25rem; line-height: 1; text-align: center; color: #000; margin-bottom: 1.25rem; } .n-products-info .listb .table { width: 48%; display: table; } .n-products-info .listb .td1 { width: 100%; padding: .5rem 0; text-align: center; background: #da3830; color: #fff; font-size: 24px; line-height: 1.2; } .n-products-info .listb .td2 { width: 100%; padding: .4rem 0; text-align: center; background: #da3830; color: #fff; font-size: 18px; line-height: 1.2; } .n-products-info .listb .tr2 td, .n-products-info .listb .tr1 td { padding: .32rem 0; text-align: center; font-size: 18px; color: #333; border-right: 1px solid #d6d6d6; } .n-products-info .listb .tr2 td:nth-child(2), .n-products-info .listb .tr1 td:nth-child(2) { border-right: 0; } .n-products-info .listb .tr1 { background: #f5f5f5; } .n-products-info .listb .tr1:nth-child(odd) { background: #e8e9eb; } .n-products-info .listb .tr2 { background: #fff; } .n-products-info .listc { padding: 1.5rem 0; background: #fff; } .n-products-info .listc .tit-48 { margin-bottom: 1.25rem; } .n-products-info .listc .ulbox { padding-bottom: 1.5rem; } .n-products-info .listc .slick-slide { padding: 10px; } .n-products-info .listc .slick-dots { height: 10px; bottom: 0; } .n-products-info .listc .slick-dots li { margin: 0 10px; background: #b6b6b6; } .n-products-info .listc .slick-dots li.slick-active { background: #da3830; } .n-products-info .listc .li-item { float: left; border: 1px solid #e7e7e7; background: #fff; display: block; } .n-products-info .listc .bot { padding: .65rem .75rem; border-top: 1px solid #e7e7e7; -webkit-transition: all .5s ease; transition: all .5s ease; } .n-products-info .listc .sp1 { font-size: 20px; line-height: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: calc(100% - 80px); color: #333; -webkit-transition: all .5s ease; transition: all .5s ease; } .n-products-info .listc .sp2 { font-size: 14px; color: #333; line-height: 22px; padding-right: 20px; position: relative; -webkit-transition: all .5s ease; transition: all .5s ease; } .n-products-info .listc .sp2:before { content: ""; position: absolute; right: 0; top: 50%; margin-top: -11px; width: 15px; height: 22px; background: url(../img/img18-1.png) no-repeat right center; opacity: 1; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: all .5s ease; transition: all .5s ease; } .n-products-info .listc .sp2:after { content: ""; position: absolute; right: 0; top: 50%; width: 15px; height: 22px; margin-top: -11px; background: url(../img/img18.png) no-repeat right center; opacity: 0; -webkit-transform: translate(100%, 0); -ms-transform: translate(100%, 0); transform: translate(100%, 0); -webkit-transition: all .5s ease; transition: all .5s ease; } .n-products-info .listc .li-item:hover { box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); } .n-products-info .listc .li-item:hover .bot { background: #da3830; } .n-products-info .listc .li-item:hover .sp1 { color: #fff; margin-left: -5px; } .n-products-info .listc .li-item:hover .sp2 { color: #fff; } .n-products-info .listc .li-item:hover .sp2:before { opacity: 0; -webkit-transform: translate(100%, 0%); -ms-transform: translate(100%, 0%); transform: translate(100%, 0%); } .n-products-info .listc .li-item:hover .sp2:after { opacity: 1; -webkit-transform: translate(0%, 0%); -ms-transform: translate(0%, 0%); transform: translate(0%, 0%); } .n-cases { background: #f2f2f2; padding: 2.2rem 0; } .n-cases .li-item { background: #fff; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); margin-bottom: .5rem; display: block; } .n-cases .li-item .img { width: 450px; } .n-cases .li-item .img img { width: 100%; } .n-cases .li-item .text { width: calc(100% - 450px); padding: 1.25rem 1.85rem; } .n-cases .li-item .text .tit-32 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: .4rem; } .n-cases .li-item .text .p-18 { line-height: 24px; height: 48px; overflow: hidden; margin-bottom: .65rem; } .n-cases .li-item .text .orderbtn { width: 3.8rem; height: 1.15rem; line-height: 1.15rem; border-radius: 1.15rem; text-align: left; text-indent: .75rem; color: #fff; background: #da3830; display: block; position: relative; font-size: 14px; -webkit-transition: background 0.6s cubic-bezier(0.2, 1, 0.3, 1), box-shadow 0.6s 0.4s cubic-bezier(0.2, 1, 0.3, 1); transition: background 0.6s cubic-bezier(0.2, 1, 0.3, 1), box-shadow 0.6s 0.4s cubic-bezier(0.2, 1, 0.3, 1); } .n-cases .li-item .text:hover .orderbtn { background: rgba(218, 56, 48, 0.4); box-shadow: inset 0px 0px 0px 2px #da3830; } .n-cases .li-item .text .orderbtn1:before { content: ""; position: absolute; width: 10px; height: 7px; top: 50%; margin-top: -3px; right: .75rem; background: url(../img/img16.png) no-repeat center; background-size: 10px 7px; } .n-cases .li-item:last-child { margin-bottom: 0; } .n-cases-info .lista { display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; display: -webkit-flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; } .n-cases-info .lista .tit-50 { font-size: 1.25rem; line-height: 1; text-align: center; color: #000; } .n-cases-info .lista .cases-left, .n-cases-info .lista .cases-right { width: 50%; } .n-cases-info .lista .cases-left { background: #f5f5f5; text-align: center; padding: 2.25rem 2rem; } .n-cases-info .lista .cases-left img { margin-top: 2rem; max-width: 100%; display: inline-block; } .n-cases-info .lista .cases-right { text-align: center; background: #e8e9eb; } .n-cases-info .lista .cases-right .li-top { width: 100%; background: #fff; padding: 2.25rem 2rem; } .n-cases-info .lista .cases-right .tit-20 { margin-top: 10px; } .n-cases-info .lista .cases-right .p-16 { margin-top: 1rem; } .n-cases-info .lista .cases-right .p-16 img { max-width: 100%; } .n-cases-info .lista .cases-right .li-bot { width: 100%; background: #e8e9eb; padding: 2.25rem 2rem; } .n-cases-info .lista .cases-right .ul-box { width: 75%; margin: 1rem auto 0; } .n-cases-info .lista .cases-right .ul-box .li { width: 32%; height: 50px; line-height: 50px; font-size: 16px; text-align: center; margin-right: 2%; margin-bottom: 2%; border-radius: 5px; color: #fff; float: left; background: #da3830; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .n-cases-info .lista .cases-right .ul-box .li:nth-child(3n) { margin-right: 0; } .n-cases-info .listb { background: #fff; padding: 1.8rem 0; } .n-cases-info .listb .ulbox { margin-bottom: 1rem; } .n-cases-info .listb .tit-50 { font-size: 1.25rem; line-height: 1; text-align: center; color: #000; margin-bottom: 1.25rem; } .n-cases-info .listb .table { width: 48%; display: table; } .n-cases-info .listb .td1 { width: 100%; padding: .5rem 0; text-align: center; background: #da3830; color: #fff; font-size: 24px; line-height: 1.2; } .n-cases-info .listb .td2 { width: 100%; padding: .4rem 0; text-align: center; background: #da3830; color: #fff; font-size: 18px; line-height: 1.2; } .n-cases-info .listb .tr2 td, .n-cases-info .listb .tr1 td { padding: .32rem 0; text-align: center; font-size: 18px; color: #333; border-right: 1px solid #d6d6d6; } .n-cases-info .listb .tr2 td:nth-child(2), .n-cases-info .listb .tr1 td:nth-child(2) { border-right: 0; } .n-cases-info .listb .tr1 { background: #f5f5f5; } .n-cases-info .listb .tr1:nth-child(odd) { background: #e8e9eb; } .n-cases-info .listb .tr2 { background: #fff; } .n-cases-info .listc { padding: 1.5rem 0; background: #f5f5f5; } .n-cases-info .listc .tit-48 { margin-bottom: 1.25rem; } .n-cases-info .listc .ulbox { padding-bottom: 1.5rem; } .n-cases-info .listc .slick-slide { padding: 10px; } .n-cases-info .listc .slick-dots { height: 10px; bottom: 0; } .n-cases-info .listc .slick-dots li { margin: 0 10px; background: #b6b6b6; } .n-cases-info .listc .slick-dots li.slick-active { background: #da3830; } .n-cases-info .listc .li-item { float: left; display: block; } .n-cases-info .listc .bot { padding: .5rem 0 0; -webkit-transition: all .5s ease; transition: all .5s ease; } .n-cases-info .listc .tit-24 { font-size: .6rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .n-cases-info .listc .p-16 { margin-top: .3rem; line-height: 24px; height: 48px; overflow: hidden; } .n-cases-info .listc .orderbtn { width: 3.8rem; height: 1.15rem; line-height: 1.15rem; border-radius: 1.15rem; text-align: left; text-indent: .75rem; margin-left: -.75rem; margin-top: .5rem; color: #333; background: transparent; display: block; position: relative; font-size: 14px; -webkit-transition: all 0.6s cubic-bezier(0.2, 1, 0.3, 1); transition: all 0.6s cubic-bezier(0.2, 1, 0.3, 1); } .n-cases-info .listc .orderbtn1:before { content: ""; position: absolute; width: 10px; height: 7px; top: 50%; margin-top: -3px; right: .75rem; background: url(../img/img18-1.png) no-repeat center; background-size: 10px 7px; } .n-cases-info .listc .li-item:hover .orderbtn { margin-left: 0px; background: #da3830; color: #fff; } .n-cases-info .listc .li-item:hover .orderbtn:before { background: url(../img/img16.png) no-repeat center; background-size: 10px 7px; } .cases-info-one .tit-56 { font-size: 1.4rem; line-height: 1.2; margin-bottom: .3rem; } .cases-info-one .lista { background: url(../img/img27.jpg) no-repeat center; background-size: cover; padding: 4rem 0 6rem; cursor: pointer; } .cases-info-one .lista .btn { width: 77px; height: 77px; display: block; margin: 1.25rem auto 0; } .cases-info-one .listb { background: url(../img/img28.jpg) no-repeat center; background-size: cover; padding: 3.5rem 0 2.5rem; } .cases-info-one .listb .dlbox { display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; display: -webkit-flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .cases-info-one .listb .img { width: 44%; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); } .cases-info-one .listb .p-18 { opacity: 1; } .cases-info-one .listb .text { width: 40%; } .cases-info-one .listb .colbox { margin-top: 1.5rem; display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; display: -webkit-flex; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .cases-info-one .listb .sp2 { font-size: 18px; color: #fff; line-height: 1.2; opacity: .5; } .cases-info-one .listb .sp1 { margin: 0 .3rem; width: 33px; height: 33px; border-radius: 5px; position: relative; border: 1px solid #8d8d8d; cursor: pointer; } .cases-info-one .listb .sp1 p { position: absolute; font-size: 12px; color: #fff; width: 80px; left: 50%; margin-left: -40px; text-align: center; bottom: -1rem; opacity: 0; -webkit-transform: translate(0, 10px); -ms-transform: translate(0, 10px); transform: translate(0, 10px); -webkit-transition: all .5s ease; transition: all .5s ease; } .cases-info-one .listb .sp1:before { content: ""; position: absolute; width: 24px; height: 24px; background: #2c2c2c; left: 50%; top: 50%; margin-left: -12px; margin-top: -12px; border-radius: 5px; } .cases-info-one .listb .sp1:hover p { opacity: .5; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } .cases-info-one .listb .sp3:before { background: #ccc; } .cases-info-one .listb .sp4:before { background: #2c2c2c; } .cases-info-one .listb .sp5:before { background:#000; } .cases-info-one .listb .sp6:before { background:red; } .cases-info-one .listb .sp7:before { background: #fff; } /*.cases-info-one .listb .sp8:before { background: #8d8d8d; }*/ .cases-info-one .listc { background: url(../img/img29.jpg) no-repeat center; background-size: cover; height: 18.75rem; padding: 4rem 0 0; } .cases-info-one .listc .p-18 { width: 520px; } .cases-info-one .listc .img { margin-top: 1.5rem; } .cases-info-one .listd { background: url(../img/img30.jpg) no-repeat center; background-size: cover; position: relative; z-index: 2; height: 18.75rem; padding: 2.5rem 0 0; } .cases-info-one .listd .img { margin: 1.5rem auto 0; display: block; } .cases-info-one .listd .p-18 { width: 520px; margin: .3rem auto 0; } .cases-info-one .listd .img2 { width: 32rem; display: block; margin: 1.5rem auto; } .cases-info-one .liste { padding: 5rem 0 1.75rem; background: #e9e9e9; position: relative; z-index: 1; } .cases-info-one .liste .dlbox { display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; display: -webkit-flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } .cases-info-one .liste .img { margin-top: 1.5rem; } .cases-info-one .liste .text { width: 36%; margin-left: 11.5%; margin-top: 1rem; } .cases-info-one .liste .imgright { width: 44%; } .cases-info-one .list1 { padding: 2rem 0; background: #f5f5f5; } .cases-info-one .list1 .img { margin: 1.25rem auto 0; display: block; max-width: 100%; } .cases-info-one .list1 .imgbox { margin-top: 1rem; } .cases-info-one .list1 .imgbox .li { width: 32%; margin-right: 2%; float: left; } .cases-info-one .list1 .imgbox .li img { width: 100%; } .cases-info-one .list1 .imgbox .li:nth-child(3n) { margin-right: 0; } .cases-info-one .list2 { background: url(../img/img32-1.jpg) no-repeat center; background-size: cover; height: 23rem; padding: 2.5rem 0 2rem; } .cases-info-one .list2 .p-18 { width: 18rem; opacity: .5; margin: .5rem auto 0; } .cases-info-one .list3 { background: url(../img/img33-1.jpg) no-repeat center; background-size: cover; height: 18rem; padding: 6.7rem 0; } .cases-info-one .list3 .text { width: 12rem; float: right; } .cases-info-one .list3 .p-18 { width: 100%; opacity: .7; margin: .5rem auto 0; } .cases-info-one .list4 { background: url(../img/6.jpg) no-repeat center; background-size: cover; height: 18rem; padding: 4.3rem 0; } .cases-info-one .list4 .text { width: 13rem; } .cases-info-one .list4 .p-18 { width: 100%; opacity: .7; margin: .5rem auto 0; } .cases-info-one .list5 { background: #fff; } .cases-info-one .list5 .tit-56 { padding: 2rem 0; } .cases-info-one .list5 .ulbox { display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; display: -webkit-flex; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; } .cases-info-one .list5 .ulbox .li-item { width: 50%; padding: 2.5rem 1rem 3rem 2rem; } .cases-info-one .list5 .ulbox .li-item1 { background: url(../img/img35.jpg) no-repeat center; background-size: cover; } .cases-info-one .list5 .ulbox .li-item2 { background: url(../img/img35-1.jpg) no-repeat center; background-size: cover; } .cases-info-one .list5 .ulbox .li-item3 { background: url(../img/img35-2.jpg) no-repeat center; background-size: cover; padding: 1.5rem 2rem; } .cases-info-one .list5 .ulbox .li-item3 .p-16 { opacity: .7; } .cases-info-one .list5 .ulbox .li-item3 .img { margin-top: 1rem; } .cases-info-one .list5 .ulbox .li-item4 { padding: 0; } .cases-info-one .list5 .ulbox .li-left, .cases-info-one .list5 .ulbox .li-right { width: 50%; } .cases-info-one .list5 .ulbox .li-left .text, .cases-info-one .list5 .ulbox .li-right .text { width: 100%; } .cases-info-one .list5 .ulbox .li-left .p-16, .cases-info-one .list5 .ulbox .li-right .p-16 { opacity: .7; } .cases-info-one .list5 .ulbox .li-left { background: url(../img/img36.jpg) no-repeat center; background-size: cover; padding: 1.5rem 1rem; height: 100%; } .cases-info-one .list5 .ulbox .li-right { background: url(../img/img37.jpg) no-repeat center; background-size: cover; padding: 1.5rem 1rem; height: 100%; } .cases-info-one .list5 .ulbox .text { width: 9.5rem; } .cases-info-one .list5 .ulbox .text .p-16 { margin-top: .3rem; } .cases-info-one .list6 { background: #f5f5f5; padding: 2rem 0 3rem; } .cases-info-one .list6 .img { max-width: 100%; display: block; margin: 1.5rem auto 0; } .bg-none-s { background: #000; opacity: .5; position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 100; display: none; } .meadia-ajax.active { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1 /*display: block;*/ } .meadia-ajax .close-btn { width: 75px; height: 75px; position: absolute; right: 0rem; top: 0; z-index: 9; cursor: pointer; background: #333; } .meadia-ajax { width: 80%; position: fixed; height: 16rem; left: 50%; margin-left: -40%; top: 50%; margin-top: -8rem; /*overflow: hidden;*/ opacity: 0; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: opacity .5s,-webkit-transform 1s; transition: opacity .5s,transform 1s; display: none; background: #000; z-index: 101; } .meadia-ajax video { width: 100%; max-height: 16rem; } .PageMenu-closeBtn { width: 26px; height: 26px; padding: 0; position: absolute; top: 50%; left: 50%; margin-top: -13px; margin-left: -13px; box-sizing: border-box; background-color: transparent; border: none; z-index: 20; outline: 0; -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1); transition: -webkit-transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1); -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1); } .PageMenu-closeBtn .line-01, .PageMenu-closeBtn .line-02 { width: 100%; height: 3px; background-color: #fff; position: absolute; left: 50%; top: 50%; } .PageMenu-closeBtn .line-01 { -webkit-transform: translate(-50%, -50%) rotate(45deg); -ms-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); } .PageMenu-closeBtn .line-02 { -webkit-transform: translate(-50%, -50%) rotate(-45deg); -ms-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg); } .PageMenu-closeBtn .line-01:after, .PageMenu-closeBtn .line-02:after { content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #e15d56; -webkit-transform: scaleX(0) translateZ(0); transform: scaleX(0) translateZ(0); -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1); transition: -webkit-transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1); transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1); transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1); } .PageMenu-closeBtn:hover .line-01:after, .PageMenu-closeBtn:hover .line-02:after { -webkit-transform: scaleX(1) translateZ(0); transform: scaleX(1) translateZ(0); } .PageMenu-closeBtn:hover { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } .pa90 { padding: 2.25rem 0 2.3rem; } .nh-tit { color: #333; line-height: 1; font-size: 1rem; text-align: center; margin-bottom: 1.5rem; font-weight: bold; } .morebtn-two { width: 180px; height: 45px; line-height: 45px; border-radius: 45px; text-align: center; display: block; color: #fff; margin: 1.4rem auto 0; position: relative; cursor: pointer; } .morebtn-two p { position: relative; z-index: 2; } .morebtn-two:after { top: -2px; left: -2px; padding: 2px; z-index: 1; background: #8453bb; -webkit-transition: -webkit-transform 0.2s, opacity 0.3s; transition: transform 0.2s, opacity 0.3s; } .morebtn-two:hover:after { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); opacity: 0; } .morebtn-two:hover { color: #333; } .backtop svg { height: 20px; width: 20px; position: relative; display: block; margin: 0 auto; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .backtop.active { -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; } @-webkit-keyframes scaleloading { 0% { -webkit-transform: scale(0.5); transform: scale(0.5); } 100% { -webkit-transform: scale(10); transform: scale(10); opacity: 0; } } @keyframes scaleloading { 0% { -webkit-transform: scale(0.5); transform: scale(0.5); } 100% { -webkit-transform: scale(10); transform: scale(10); opacity: 0; } } @-webkit-keyframes glowmation { 0% { top: -3%; left: -3%; background-position: 0% 50%; background-size: 150% 150%; } 12.5% { top: -3%; left: 0; background-size: 70% 30%; } 25% { top: -3%; left: 3%; background-size: 100% 50%; } 37.5% { top: 0; left: 3%; background-size: 70% 30%; } 50% { top: 3%; left: 3%; background-position: 100% 50%; background-size: 30% 30%; } 62.5% { top: 3%; left: 0; background-size: 30% 70%; } 75% { top: 3%; left: -3%; background-size: 50% 100%; } 87.5% { top: 0; left: -3%; background-size: 30% 70%; } 100% { top: -3%; left: -3%; background-position: 0% 50%; background-size: 150% 150%; } } @keyframes glowmation { 0% { top: -3%; left: -3%; background-position: 0% 50%; background-size: 150% 150%; } 12.5% { top: -3%; left: 0; background-size: 70% 30%; } 25% { top: -3%; left: 3%; background-size: 100% 50%; } 37.5% { top: 0; left: 3%; background-size: 70% 30%; } 50% { top: 3%; left: 3%; background-position: 100% 50%; background-size: 30% 30%; } 62.5% { top: 3%; left: 0; background-size: 30% 70%; } 75% { top: 3%; left: -3%; background-size: 50% 100%; } 87.5% { top: 0; left: -3%; background-size: 30% 70%; } 100% { top: -3%; left: -3%; background-position: 0% 50%; background-size: 150% 150%; } } @-webkit-keyframes img1 { 0% { opacity: .5; } 20% { opacity: 1; } 40% { opacity: .8; } 50% { color: 1; } 80% { color: 1; } 100% { color: .8; } } @keyframes img1 { 0% { opacity: .5; } 20% { opacity: 1; } 40% { opacity: .8; } 50% { color: 1; } 80% { color: 1; } 100% { color: .8; } } input::-webkit-input-placeholder { color: #666 !important; } input::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #666 !important; } input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #666 !important; } input:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #666 !important; } textarea::-webkit-input-placeholder { color: #666 !important; } textarea::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #666 !important; } textarea:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #666 !important; } textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #666 !important; } @-webkit-keyframes loader1 { 0% { -webkit-transform: scale(0.6); transform: scale(0.6); opacity: 0; } 50% { opacity: 1; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } } @keyframes loader1 { 0% { -webkit-transform: scale(0.6); transform: scale(0.6); opacity: 0; } 50% { opacity: 1; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } } @-webkit-keyframes arrow2 { 0% { -webkit-transform: translatey(0); transform: translatey(0); } 50% { -webkit-transform: translatey(4px); transform: translatey(4px); } } @keyframes arrow2 { 0% { -webkit-transform: translatey(0); transform: translatey(0); } 50% { -webkit-transform: translatey(4px); transform: translatey(4px); } } .js-m { opacity: 0; -webkit-transform: translate(0, 30px); -ms-transform: translate(0, 30px); transform: translate(0, 30px); -webkit-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1); transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1); } .js-m.animate { opacity: 1; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } .js-m.js-m-2 { opacity: 0; -webkit-transform: translate(30px, 0); -ms-transform: translate(30px, 0); transform: translate(30px, 0); -webkit-transition: all .8s ease; transition: all .8s ease; } .js-m.js-m-2.animate { opacity: 1; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } .js-m-3 { opacity: 0; -webkit-transform: translate(30px, 0); -ms-transform: translate(30px, 0); transform: translate(30px, 0); -webkit-transition: all .8s ease; transition: all .8s ease; } .js-m-3.animate { opacity: 1; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } .js-m.js-m-4 { opacity: 0; -webkit-transform: translate(0, -100px); -ms-transform: translate(0, -100px); transform: translate(0, -100px); -webkit-transition: all .8s ease; transition: all .8s ease; } .js-m.js-m-4.animate { opacity: 1; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } .js-m-top { opacity: 0; -webkit-transform: translate(0, 100px); -ms-transform: translate(0, 100px); transform: translate(0, 100px); -webkit-transition: all 1.5s cubic-bezier(0.69, 0.1, 0.12, 1.02); transition: all 1.5s cubic-bezier(0.69, 0.1, 0.12, 1.02); } .js-m-top.animate { opacity: 1; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } .bgcur.js-m{ opacity: 0; -webkit-transition-delay: 1.5s !important; transition-delay: 1.5s !important; -webkit-transform: translate(0,0); -ms-transform: translate(0,0); transform: translate(0,0); } .bgcur.js-m.animate{ opacity: 1; } .carimg_cur.js-m{ opacity: 0; -webkit-transform: translate(100px, 0px); -ms-transform: translate(100px, 0px); transform: translate(100px, 0px); -webkit-transition: all 1.5s cubic-bezier(0.69, 0.1, 0.12, 1.02); transition: all 1.5s cubic-bezier(0.69, 0.1, 0.12, 1.02); } .carimg_cur.js-m.animate{ opacity:1; -webkit-transform: translate(0,0); -ms-transform: translate(0,0); transform: translate(0,0); } .imgbg-tong { position: relative; } .imgbg-tong:after { content: ""; margin: 0 0 0 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #fff; z-index: 4; -webkit-transition: all 0.5s ease-in-out 0.5s; transition: all 0.5s ease-in-out 0.5s; } .imgbg-tong:before { content: ""; margin: 0 0 0 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #111; z-index: 5; opacity: 1; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .js-m.animate.imgbg-tong:before, .js-m.animate.imgbg-tong:after { margin-right: 0; right: 0; bottom: 0; left: 100%; } .image-in { display: block; overflow: hidden; } .image-in::before { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: right center 0px; -ms-transform-origin: right center 0px; transform-origin: right center 0px; -webkit-transition-duration: 1s; transition-duration: 1s; -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); -webkit-transition-property: -webkit-transform, -webkit-transform; transition-property: transform, -webkit-transform; -webkit-transition-delay: 0.6s; transition-delay: 0.6s; } .image-in::before { content: ""; display: block; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; z-index: 20; background-color: black; } .image-in { -webkit-transform: translate3d(-100.5%, 0px, 0px); transform: translate3d(-100.5%, 0px, 0px); -webkit-transform-origin: left center 0px; -ms-transform-origin: left center 0px; transform-origin: left center 0px; -webkit-transition-duration: 1s; transition-duration: 1s; -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); -webkit-transition-property: -webkit-transform, -webkit-transform; transition-property: transform, -webkit-transform; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .js-m.animate .image-in { -webkit-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px); } .js-m.animate .image-in::before { -webkit-transform: scale(0, 1); -ms-transform: scale(0, 1); transform: scale(0, 1); } .delay1 { -webkit-transition-delay: .1s !important; transition-delay: .1s !important; } .delay2 { -webkit-transition-delay: .2s !important; transition-delay: .2s !important; } .delay3 { -webkit-transition-delay: .3s !important; transition-delay: .3s !important; } .delay4 { -webkit-transition-delay: .4s !important; transition-delay: .4s !important; } .delay5 { -webkit-transition-delay: .5s !important; transition-delay: .5s !important; } .delay6 { -webkit-transition-delay: .6s !important; transition-delay: .6s !important; } .delay7 { -webkit-transition-delay: .7s !important; transition-delay: .7s !important; } .delay8 { -webkit-transition-delay: .8s !important; transition-delay: .8s !important; } .delay9 { -webkit-transition-delay: .9s !important; transition-delay: .9s !important; } .delay01 { -webkit-transition-delay: .03s !important; transition-delay: .03s !important; } .delay02 { -webkit-transition-delay: .08s !important; transition-delay: .08s !important; } .delay03 { -webkit-transition-delay: .13s !important; transition-delay: .13s !important; } .delay04 { -webkit-transition-delay: .18s !important; transition-delay: .18s !important; } .delay05 { -webkit-transition-delay: .23s !important; transition-delay: .23s !important; } .delay06 { -webkit-transition-delay: .28s !important; transition-delay: .28s !important; } .delay07 { -webkit-transition-delay: .33s !important; transition-delay: .33s !important; } .delay08 { -webkit-transition-delay: .38s !important; transition-delay: .38s !important; } .delay09 { -webkit-transition-delay: .43s !important; transition-delay: .43s !important; } /*.header1.on{ position: relative; background: #1a1a1a; background-image: linear-gradient(#000,#121212); h1{ margin: 38px 0 0; } nav{ top: 32px; } } .header2.on{ position: relative; background: #1a1a1a; background-image: linear-gradient(#000,#121212); } .star-bg { position: fixed; z-index: 0; top: 0; left: 0; width: 100%; height: 100%; }*/ .video-info{ width: 80%; margin:1rem auto 0; } .video-info video{ width: 100% !important; height: auto !important; } .por-fixheight-index{ height: 80px; } .slick-dots li button{ outline:none !important; } .i-listc .rightbox .orderbtn:hover{ background: rgba(218, 56, 48, 1); } .n-products-info .listb .tr1 td:nth-child(1){ width: 50%; } .n-cases-info .listb .tr1 td:nth-child(1){ width: 50%; } .n-cases-info .lista .pro-left .small-list .swiper-wrapper{ justify-content: center; } .n-products-info .listd { padding: 1.5rem 0; background: #f5f5f5; } .n-products-info .listd .tit-48 { margin-bottom: 1.25rem; } .n-products-info .listd .ulbox { padding-bottom: 1.5rem; } .n-products-info .listd .slick-slide { padding: 10px; } .n-products-info .listd .slick-dots { height: 10px; bottom: 0; } .n-products-info .listd .slick-dots li { margin: 0 10px; background: #b6b6b6; } .n-products-info .listd .slick-dots li.slick-active { background: #da3830; } .n-products-info .listd .li-item { float: left; border: 1px solid #e7e7e7; background: #fff; display: block; } .n-products-info .listd .bot { padding: .65rem .75rem; border-top: 1px solid #e7e7e7; -webkit-transition: all .5s ease; transition: all .5s ease; } .n-products-info .listd .sp1 { font-size: 20px; line-height: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: calc(100% - 80px); color: #333; -webkit-transition: all .5s ease; transition: all .5s ease; } .n-products-info .listd .sp2 { font-size: 14px; color: #333; line-height: 22px; padding-right: 20px; position: relative; -webkit-transition: all .5s ease; transition: all .5s ease; } .n-products-info .listd .sp2:before { content: ""; position: absolute; right: 0; top: 50%; margin-top: -11px; width: 15px; height: 22px; background: url(../img/img18-1.png) no-repeat right center; opacity: 1; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: all .5s ease; transition: all .5s ease; } .n-products-info .listd .sp2:after { content: ""; position: absolute; right: 0; top: 50%; width: 15px; height: 22px; margin-top: -11px; background: url(../img/img18.png) no-repeat right center; opacity: 0; -webkit-transform: translate(100%, 0); -ms-transform: translate(100%, 0); transform: translate(100%, 0); -webkit-transition: all .5s ease; transition: all .5s ease; } .n-products-info .listd .li-item:hover { box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); } .n-products-info .listd .li-item:hover .bot { background: #da3830; } .n-products-info .listd .li-item:hover .sp1 { color: #fff; margin-left: -5px; } .n-products-info .listd .li-item:hover .sp2 { color: #fff; } .n-products-info .listd .li-item:hover .sp2:before { opacity: 0; -webkit-transform: translate(100%, 0%); -ms-transform: translate(100%, 0%); transform: translate(100%, 0%); } .n-products-info .listd .li-item:hover .sp2:after { opacity: 1; -webkit-transform: translate(0%, 0%); -ms-transform: translate(0%, 0%); transform: translate(0%, 0%); } .cases-info-one .list2 .bgcur{ background: url(../img/img32.jpg) no-repeat center; background-size: cover; height: 100%; width: 100%; position: absolute; left: 0; top: 0; z-index: 1; } .cases-info-one .list2 .dlbox,.cases-info-one .list3 .dlbox,.cases-info-one .list4 .text{ position: relative; z-index: 2; } .cases-info-one .list3 .bgcur{ background: url(../img/img33.jpg) no-repeat center; background-size: cover; height: 18rem; width: 100%; position: absolute; left: 0; top: 0; z-index: 1; } .cases-info-one .list4 .bgcur{ background: url(../img/7.png) no-repeat center; background-size: cover; height: 18rem; width: 100%; position: absolute; left: 0; top: 0; z-index: 1; } .cases-info-one .list4 .carimg_cur{ position: absolute; right:3.5rem; bottom:2.5rem; width:20rem; height: 10.5rem; z-index: 1; } .cases-info-one .list4 .carimg_cur img{ max-width: 100%; } .cases-info-one .list5 .li-item .li-left{ position: relative; background-image: none !important; background-color: #fff; } .cases-info-one .list5 .li-item .li-right{ position: relative; background-image: none !important; background-color: #db3831; } .cases-info-one .list5 .city-img{ position: absolute; left: 0; top: 0; height: 100%; width: 100%; } .cases-info-one .list5 .allimg .li{ position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-size: cover; background-position: center center; background-repeat: no-repeat; display: none; } .cases-info-one .list5 .allimg .li.cur{ display: block; } .cases-info-one .list6 .img1{ display: inline-block; } .cases-info-one .list6 .img1{ display: inline-block; margin-top:1rem; } .cases-info-one .list6 .curbox{ margin: 1rem auto 0; width:28rem; height: 12.5rem; text-align: center; position:relative; } .cases-info-one .list6 .curbox .carimg_cur{ display: inline-block; width:20rem; height: 10.5rem; position: relative; z-index:2; } .cases-info-one .list6 .curbox .imgbg{ position: absolute; z-index: 1; width: 100%; height: auto; bottom: 0; left: 0; } .cases-info-one .list3 .p-18,.cases-info-one .list2 .p-18,.cases-info-one .list4 .p-18{ opacity:1; } .n-about .listc .timeajax .time-text .li .time-dian{ width:150px; text-align:right; } .n-about .listc .timeajax .time-text .li .p-18{ width: calc(100% - 160px); } .n-about .listc .timeajax .time-text:before{ left: 190px; } .lan-a { color: #3d3d3d; transition-duration: .3s; } .lan-a:hover { color: #da3830; } .i-banner{ height:17rem; } .i-banner{ height:16.8rem; } @media(max-width: 1650px) { .i-banner{ height:15rem; } } @media(max-width: 1440px) { .i-banner{ height:16.5rem; } } @media(max-width: 1300px) { .i-banner{ height:15rem; } } @media(max-width: 1023px) { .i-banner{ height:auto; } } .orderbox-warp{ position: relative; } .orderbox{ position: absolute; top:0rem; left:3.8rem; display: none; padding:0 .25rem; width:6.1rem; } .orderbox a{ float: left; } .orderbox img{ width:1.15rem; height:1.15rem; margin-right:0.25rem; } @media (max-width: 1023px){ .orderbox{ left: 110px; } } .video-alert .md-content { width: 100%; max-height:90vh; background: #000; } .video-alert .md-close { width: 55px; height: 55px; background:#000 url(../img/ico_07.png) no-repeat center; background-size: 24px auto; position: absolute; top: 0px; right:0px; z-index:2; cursor: pointer; transition: transform 0.3s ease 0s; } .video-alert { position: fixed; top: 50%; left: 50%; width: 50%; width: 100%; min-width: 320px; max-height:90vh; z-index: 2000; visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .video-alert .video { width: 100%; max-height:90vh; } .md-effect-1 .md-content { -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .md-show.md-effect-1 .md-content { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; } .video-alert.md-show.md-effect-1{ visibility: visible; } .fot-overlay { position: fixed; width: 100%; height: 100%; visibility: hidden; top: 0; left: 0; z-index: 1000; opacity: 0; background: rgba(0, 0, 0, 0.5); -webkit-transition: all 0.3s; transition: all 0.3s; } .video-alert.md-show ~ .fot-overlay { opacity: 1; visibility: visible; } .video-alert.md-show ~ .md-close { opacity: 1; visibility: visible; } .i-banner .li{ position:relative; } .i-banner .btn{ width:60px; height:60px; left:50%; top:50%; position:absolute; z-index:2; transform:translate(-50%,-50%); } /*# sourceMappingURL=style.css.map