.n-inline-block, .nice-validator input, .nice-validator select, .nice-validator textarea, .nice-validator [contenteditable], .msg-wrap, .n-icon, .n-msg { display: inline-block; *display: inline; *zoom: 1; } .nice-validator .msg-container .msg-box { display: block; } .nice-validator .msg-container .msg-wrap { position: static; } .msg-box { position: relative; *zoom: 1; } .msg-wrap { position: relative; white-space: nowrap; line-height: 16px; font-size: 12px; } .msg-wrap, .n-icon, .n-msg { vertical-align: top; } .msg-box .msg-wrap .n-error, .msg-box .msg-wrap .n-ok, .msg-box .msg-wrap .n-tip { display: block; background: none; -webkit-box-shadow: none; box-shadow: none; padding: 3px 2px; } .n-arrow { position: absolute; overflow: hidden; } .n-arrow b, .n-arrow i { position: absolute; left: 0; top: 0; border: 0; margin: 0; padding: 0; overflow: hidden; font-weight: 400; font-style: normal; font-size: 12px; font-family: serif; line-height: 14px; _line-height: 15px; } .n-arrow i { text-shadow: none; } .n-icon { width: 16px; height: 16px; overflow: hidden; background-repeat: no-repeat; } .n-msg { display: inline-block; *display: inline; *zoom: 1; margin-left: 1px; } .n-error { color: #c33; } .n-ok { color: #390; } .n-tip .n-msg, .n-loading { color: #808080; } .n-error .n-icon { background-position: 0 0; } .n-ok .n-icon { background-position: -16px 0; } .n-tip .n-icon { background-position: -32px 0; } .n-loading .n-icon { background: url("images/loading.gif") 0 center no-repeat !important; } .n-top, .n-right, .n-bottom, .n-left { display: inline-block; *display: inline; *zoom: 1; line-height: 0; vertical-align: top; outline: 0; } .n-top .n-arrow, .n-bottom .n-arrow { height: 6px; width: 12px; left: 8px; } .n-left .n-arrow, .n-right .n-arrow { width: 6px; height: 12px; top: 6px; } .n-top { vertical-align: top; } .n-top .msg-wrap { margin-bottom: 6px; } .n-top .n-arrow { bottom: -6px; } .n-top .n-arrow b { top: -6px; } .n-top .n-arrow i { top: -7px; } .n-bottom { vertical-align: bottom; } .n-bottom .msg-wrap { margin-top: 6px; } .n-bottom .n-arrow { top: -6px; } .n-bottom .n-arrow b { top: -1px; } .n-bottom .n-arrow i { top: 0; } .n-left .msg-wrap { right: 100%; margin-right: 6px; } .n-left .n-arrow { right: -6px; } .n-left .n-arrow b { left: -6px; } .n-left .n-arrow i { left: -7px; } .n-right .msg-wrap { margin-left: 6px; } .n-right .n-arrow { left: -6px; } .n-right .n-arrow b { left: 1px; } .n-right .n-arrow i { left: 2px; } /********************* * Themes *********************/ .n-default .n-left, .n-default .n-right { margin-top: 5px; } .n-default .n-top .msg-wrap { bottom: 100%; } .n-default .n-bottom .msg-wrap { top: 100%; } .n-default .msg-wrap { position: absolute; z-index: 1; } .n-default .msg-wrap .n-icon { background-image: url("images/validator_default.png"); } .n-default .n-tip .n-icon { display: none; } .n-simple .msg-wrap { position: absolute; z-index: 1; } .n-simple .msg-wrap .n-icon { background-image: url("images/validator_simple.png"); } .n-simple .n-top .msg-wrap { bottom: 100%; } .n-simple .n-bottom .msg-wrap { top: 100%; } .n-simple .n-left, .n-simple .n-right { margin-top: 5px; } .n-simple .n-bottom .msg-wrap { margin-top: 3px; } .n-simple .n-tip .n-icon { display: none; } .n-yellow .msg-wrap { position: absolute; z-index: 1; padding: 4px 6px; font-size: 12px; border: 1px solid transparent; background-color: #fffcef; border-color: #ffbb76; color: #db7c22; -webkit-box-shadow: 0 1px 3px #ccc; box-shadow: 0 1px 3px #ccc; border-radius: 2px; } .n-yellow .msg-wrap .n-arrow b { color: #ffbb76; text-shadow: 0 0 2px #ccc; } .n-yellow .msg-wrap .n-arrow i { color: #fffcef; } .n-yellow .msg-wrap .n-icon { background-image: url("images/validator_simple.png"); } .n-yellow .n-top .msg-wrap { bottom: 100%; } .n-yellow .n-bottom .msg-wrap { top: 100%; } .n-yellow .n-tip, .n-yellow .n-ok, .n-yellow .n-loading { background-color: #f8fdff; border-color: #ddd; color: #333; -webkit-box-shadow: 0 1px 3px #ccc; box-shadow: 0 1px 3px #ccc; } .n-yellow .n-tip .n-arrow b, .n-yellow .n-ok .n-arrow b, .n-yellow .n-loading .n-arrow b { color: #ddd; text-shadow: 0 0 2px #ccc; } .n-yellow .n-tip .n-arrow i, .n-yellow .n-ok .n-arrow i, .n-yellow .n-loading .n-arrow i { color: #f8fdff; } body.stop-scrolling { height: 100%; overflow: hidden; } .sweet-overlay { background-color: black; /* IE8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; /* IE8 */ background-color: rgba(0, 0, 0, 0.4); position: fixed; left: 0; right: 0; top: 0; bottom: 0; display: none; z-index: 10000; } .sweet-alert { background-color: white; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; width: 478px; padding: 17px; border-radius: 5px; text-align: center; position: fixed; left: 50%; top: 50%; margin-left: -256px; margin-top: -200px; overflow: hidden; display: none; z-index: 99999; } @media all and (max-width: 540px) { .sweet-alert { width: auto; margin-left: 0; margin-right: 0; left: 15px; right: 15px; } } .sweet-alert h2 { color: #575757; font-size: 30px; text-align: center; font-weight: 600; text-transform: none; position: relative; margin: 25px 0; padding: 0; line-height: 40px; display: block; } .sweet-alert p { color: #797979; font-size: 16px; text-align: center; font-weight: 300; position: relative; text-align: inherit; float: none; margin: 0; padding: 0; line-height: normal; } .sweet-alert fieldset { border: none; position: relative; } .sweet-alert .sa-error-container { background-color: #f1f1f1; margin-left: -17px; margin-right: -17px; overflow: hidden; padding: 0 10px; max-height: 0; webkit-transition: padding 0.15s, max-height 0.15s; -webkit-transition: padding 0.15s, max-height 0.15s; transition: padding 0.15s, max-height 0.15s; } .sweet-alert .sa-error-container.show { padding: 10px 0; max-height: 100px; webkit-transition: padding 0.2s, max-height 0.2s; -webkit-transition: padding 0.25s, max-height 0.25s; transition: padding 0.25s, max-height 0.25s; } .sweet-alert .sa-error-container .icon { display: inline-block; width: 24px; height: 24px; border-radius: 50%; background-color: #ea7d7d; color: white; line-height: 24px; text-align: center; margin-right: 3px; } .sweet-alert .sa-error-container p { display: inline-block; } .sweet-alert .sa-input-error { position: absolute; top: 29px; right: 26px; width: 20px; height: 20px; opacity: 0; -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transition: all 0.1s; transition: all 0.1s; } .sweet-alert .sa-input-error::before, .sweet-alert .sa-input-error::after { content: ""; width: 20px; height: 6px; background-color: #f06e57; border-radius: 3px; position: absolute; top: 50%; margin-top: -4px; left: 50%; margin-left: -9px; } .sweet-alert .sa-input-error::before { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .sweet-alert .sa-input-error::after { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .sweet-alert .sa-input-error.show { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } .sweet-alert input { width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 3px; border: 1px solid #d7d7d7; height: 43px; margin-top: 10px; margin-bottom: 17px; font-size: 18px; -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.06); box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.06); padding: 0 12px; display: none; -webkit-transition: all 0.3s; transition: all 0.3s; } .sweet-alert input:focus { outline: none; -webkit-box-shadow: 0px 0px 3px #c4e6f5; box-shadow: 0px 0px 3px #c4e6f5; border: 1px solid #b4dbed; } .sweet-alert input:focus::-moz-placeholder { -webkit-transition: opacity 0.3s 0.03s ease; transition: opacity 0.3s 0.03s ease; opacity: 0.5; } .sweet-alert input:focus:-ms-input-placeholder { -webkit-transition: opacity 0.3s 0.03s ease; transition: opacity 0.3s 0.03s ease; opacity: 0.5; } .sweet-alert input:focus::-webkit-input-placeholder { -webkit-transition: opacity 0.3s 0.03s ease; transition: opacity 0.3s 0.03s ease; opacity: 0.5; } .sweet-alert input::-moz-placeholder { color: #bdbdbd; } .sweet-alert input:-ms-input-placeholder { color: #bdbdbd; } .sweet-alert input::-webkit-input-placeholder { color: #bdbdbd; } .sweet-alert.show-input input { display: block; } .sweet-alert .sa-confirm-button-container { display: inline-block; position: relative; } .sweet-alert .la-ball-fall { position: absolute; left: 50%; top: 50%; margin-left: -27px; margin-top: 4px; opacity: 0; visibility: hidden; } .sweet-alert button { background-color: #8CD4F5; color: white; border: none; -webkit-box-shadow: none; box-shadow: none; font-size: 17px; font-weight: 500; border-radius: 5px; padding: 10px 32px; margin: 26px 5px 0 5px; cursor: pointer; } .sweet-alert button:focus { outline: none; -webkit-box-shadow: 0 0 2px rgba(128, 179, 235, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.05); box-shadow: 0 0 2px rgba(128, 179, 235, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.05); } .sweet-alert button:hover { background-color: #7ecff4; } .sweet-alert button:active { background-color: #5dc2f1; } .sweet-alert button.cancel { background-color: #C1C1C1; } .sweet-alert button.cancel:hover { background-color: #b9b9b9; } .sweet-alert button.cancel:active { background-color: #a8a8a8; } .sweet-alert button.cancel:focus { -webkit-box-shadow: rgba(197, 205, 211, 0.8) 0px 0px 2px, rgba(0, 0, 0, 0.0470588) 0px 0px 0px 1px inset !important; box-shadow: rgba(197, 205, 211, 0.8) 0px 0px 2px, rgba(0, 0, 0, 0.0470588) 0px 0px 0px 1px inset !important; } .sweet-alert button[disabled] { opacity: .6; cursor: default; } .sweet-alert button.confirm[disabled] { color: transparent; } .sweet-alert button.confirm[disabled] ~ .la-ball-fall { opacity: 1; visibility: visible; -webkit-transition-delay: 0s; transition-delay: 0s; } .sweet-alert button::-moz-focus-inner { border: 0; } .sweet-alert[data-has-cancel-button=false] button { -webkit-box-shadow: none !important; box-shadow: none !important; } .sweet-alert[data-has-confirm-button=false][data-has-cancel-button=false] { padding-bottom: 40px; } .sweet-alert .sa-icon { width: 80px; height: 80px; border: 4px solid gray; border-radius: 40px; border-radius: 50%; margin: 20px auto; padding: 0; position: relative; -webkit-box-sizing: content-box; box-sizing: content-box; } .sweet-alert .sa-icon.sa-error { border-color: #F27474; } .sweet-alert .sa-icon.sa-error .sa-x-mark { position: relative; display: block; } .sweet-alert .sa-icon.sa-error .sa-line { position: absolute; height: 5px; width: 47px; background-color: #F27474; display: block; top: 37px; border-radius: 2px; } .sweet-alert .sa-icon.sa-error .sa-line.sa-left { -webkit-transform: rotate(45deg); transform: rotate(45deg); left: 17px; } .sweet-alert .sa-icon.sa-error .sa-line.sa-right { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); right: 16px; } .sweet-alert .sa-icon.sa-warning { border-color: #F8BB86; } .sweet-alert .sa-icon.sa-warning .sa-body { position: absolute; width: 5px; height: 47px; left: 50%; top: 10px; border-radius: 2px; margin-left: -2px; background-color: #F8BB86; } .sweet-alert .sa-icon.sa-warning .sa-dot { position: absolute; width: 7px; height: 7px; border-radius: 50%; margin-left: -3px; left: 50%; bottom: 10px; background-color: #F8BB86; } .sweet-alert .sa-icon.sa-info { border-color: #C9DAE1; } .sweet-alert .sa-icon.sa-info::before { content: ""; position: absolute; width: 5px; height: 29px; left: 50%; bottom: 17px; border-radius: 2px; margin-left: -2px; background-color: #C9DAE1; } .sweet-alert .sa-icon.sa-info::after { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; margin-left: -3px; top: 19px; background-color: #C9DAE1; } .sweet-alert .sa-icon.sa-success { border-color: #A5DC86; } .sweet-alert .sa-icon.sa-success::before, .sweet-alert .sa-icon.sa-success::after { content: ''; border-radius: 40px; border-radius: 50%; position: absolute; width: 60px; height: 120px; background: white; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .sweet-alert .sa-icon.sa-success::before { border-radius: 120px 0 0 120px; top: -7px; left: -33px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 60px 60px; transform-origin: 60px 60px; } .sweet-alert .sa-icon.sa-success::after { border-radius: 0 120px 120px 0; top: -11px; left: 30px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0px 60px; transform-origin: 0px 60px; } .sweet-alert .sa-icon.sa-success .sa-placeholder { width: 80px; height: 80px; border: 4px solid rgba(165, 220, 134, 0.2); border-radius: 40px; border-radius: 50%; -webkit-box-sizing: content-box; box-sizing: content-box; position: absolute; left: -4px; top: -4px; z-index: 2; } .sweet-alert .sa-icon.sa-success .sa-fix { width: 5px; height: 90px; background-color: white; position: absolute; left: 28px; top: 8px; z-index: 1; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .sweet-alert .sa-icon.sa-success .sa-line { height: 5px; background-color: #A5DC86; display: block; border-radius: 2px; position: absolute; z-index: 2; } .sweet-alert .sa-icon.sa-success .sa-line.sa-tip { width: 25px; left: 14px; top: 46px; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .sweet-alert .sa-icon.sa-success .sa-line.sa-long { width: 47px; right: 8px; top: 38px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .sweet-alert .sa-icon.sa-custom { background-size: contain; border-radius: 0; border: none; background-position: center center; background-repeat: no-repeat; } /* * Animations */ @-webkit-keyframes showSweetAlert { 0% { transform: scale(0.7); -webkit-transform: scale(0.7); } 45% { transform: scale(1.05); -webkit-transform: scale(1.05); } 80% { transform: scale(0.95); -webkit-transform: scale(0.95); } 100% { transform: scale(1); -webkit-transform: scale(1); } } @keyframes showSweetAlert { 0% { transform: scale(0.7); -webkit-transform: scale(0.7); } 45% { transform: scale(1.05); -webkit-transform: scale(1.05); } 80% { transform: scale(0.95); -webkit-transform: scale(0.95); } 100% { transform: scale(1); -webkit-transform: scale(1); } } @-webkit-keyframes hideSweetAlert { 0% { transform: scale(1); -webkit-transform: scale(1); } 100% { transform: scale(0.5); -webkit-transform: scale(0.5); } } @keyframes hideSweetAlert { 0% { transform: scale(1); -webkit-transform: scale(1); } 100% { transform: scale(0.5); -webkit-transform: scale(0.5); } } @-webkit-keyframes slideFromTop { 0% { top: 0%; } 100% { top: 50%; } } @keyframes slideFromTop { 0% { top: 0%; } 100% { top: 50%; } } @-webkit-keyframes slideToTop { 0% { top: 50%; } 100% { top: 0%; } } @keyframes slideToTop { 0% { top: 50%; } 100% { top: 0%; } } @-webkit-keyframes slideFromBottom { 0% { top: 70%; } 100% { top: 50%; } } @keyframes slideFromBottom { 0% { top: 70%; } 100% { top: 50%; } } @-webkit-keyframes slideToBottom { 0% { top: 50%; } 100% { top: 70%; } } @keyframes slideToBottom { 0% { top: 50%; } 100% { top: 70%; } } .showSweetAlert[data-animation=pop] { -webkit-animation: showSweetAlert 0.3s; animation: showSweetAlert 0.3s; } .showSweetAlert[data-animation=none] { -webkit-animation: none; animation: none; } .showSweetAlert[data-animation=slide-from-top] { -webkit-animation: slideFromTop 0.3s; animation: slideFromTop 0.3s; } .showSweetAlert[data-animation=slide-from-bottom] { -webkit-animation: slideFromBottom 0.3s; animation: slideFromBottom 0.3s; } .hideSweetAlert[data-animation=pop] { -webkit-animation: hideSweetAlert 0.2s; animation: hideSweetAlert 0.2s; } .hideSweetAlert[data-animation=none] { -webkit-animation: none; animation: none; } .hideSweetAlert[data-animation=slide-from-top] { -webkit-animation: slideToTop 0.4s; animation: slideToTop 0.4s; } .hideSweetAlert[data-animation=slide-from-bottom] { -webkit-animation: slideToBottom 0.3s; animation: slideToBottom 0.3s; } @-webkit-keyframes animateSuccessTip { 0% { width: 0; left: 1px; top: 19px; } 54% { width: 0; left: 1px; top: 19px; } 70% { width: 50px; left: -8px; top: 37px; } 84% { width: 17px; left: 21px; top: 48px; } 100% { width: 25px; left: 14px; top: 45px; } } @keyframes animateSuccessTip { 0% { width: 0; left: 1px; top: 19px; } 54% { width: 0; left: 1px; top: 19px; } 70% { width: 50px; left: -8px; top: 37px; } 84% { width: 17px; left: 21px; top: 48px; } 100% { width: 25px; left: 14px; top: 45px; } } @-webkit-keyframes animateSuccessLong { 0% { width: 0; right: 46px; top: 54px; } 65% { width: 0; right: 46px; top: 54px; } 84% { width: 55px; right: 0px; top: 35px; } 100% { width: 47px; right: 8px; top: 38px; } } @keyframes animateSuccessLong { 0% { width: 0; right: 46px; top: 54px; } 65% { width: 0; right: 46px; top: 54px; } 84% { width: 55px; right: 0px; top: 35px; } 100% { width: 47px; right: 8px; top: 38px; } } @-webkit-keyframes rotatePlaceholder { 0% { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } 5% { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } 12% { transform: rotate(-405deg); -webkit-transform: rotate(-405deg); } 100% { transform: rotate(-405deg); -webkit-transform: rotate(-405deg); } } @keyframes rotatePlaceholder { 0% { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } 5% { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } 12% { transform: rotate(-405deg); -webkit-transform: rotate(-405deg); } 100% { transform: rotate(-405deg); -webkit-transform: rotate(-405deg); } } .animateSuccessTip { -webkit-animation: animateSuccessTip 0.75s; animation: animateSuccessTip 0.75s; } .animateSuccessLong { -webkit-animation: animateSuccessLong 0.75s; animation: animateSuccessLong 0.75s; } .sa-icon.sa-success.animate::after { -webkit-animation: rotatePlaceholder 4.25s ease-in; animation: rotatePlaceholder 4.25s ease-in; } @-webkit-keyframes animateErrorIcon { 0% { transform: rotateX(100deg); -webkit-transform: rotateX(100deg); opacity: 0; } 100% { transform: rotateX(0deg); -webkit-transform: rotateX(0deg); opacity: 1; } } @keyframes animateErrorIcon { 0% { transform: rotateX(100deg); -webkit-transform: rotateX(100deg); opacity: 0; } 100% { transform: rotateX(0deg); -webkit-transform: rotateX(0deg); opacity: 1; } } .animateErrorIcon { -webkit-animation: animateErrorIcon 0.5s; animation: animateErrorIcon 0.5s; } @-webkit-keyframes animateXMark { 0% { transform: scale(0.4); -webkit-transform: scale(0.4); margin-top: 26px; opacity: 0; } 50% { transform: scale(0.4); -webkit-transform: scale(0.4); margin-top: 26px; opacity: 0; } 80% { transform: scale(1.15); -webkit-transform: scale(1.15); margin-top: -6px; } 100% { transform: scale(1); -webkit-transform: scale(1); margin-top: 0; opacity: 1; } } @keyframes animateXMark { 0% { transform: scale(0.4); -webkit-transform: scale(0.4); margin-top: 26px; opacity: 0; } 50% { transform: scale(0.4); -webkit-transform: scale(0.4); margin-top: 26px; opacity: 0; } 80% { transform: scale(1.15); -webkit-transform: scale(1.15); margin-top: -6px; } 100% { transform: scale(1); -webkit-transform: scale(1); margin-top: 0; opacity: 1; } } .animateXMark { -webkit-animation: animateXMark 0.5s; animation: animateXMark 0.5s; } @-webkit-keyframes pulseWarning { 0% { border-color: #F8D486; } 100% { border-color: #F8BB86; } } @keyframes pulseWarning { 0% { border-color: #F8D486; } 100% { border-color: #F8BB86; } } .pulseWarning { -webkit-animation: pulseWarning 0.75s infinite alternate; animation: pulseWarning 0.75s infinite alternate; } @-webkit-keyframes pulseWarningIns { 0% { background-color: #F8D486; } 100% { background-color: #F8BB86; } } @keyframes pulseWarningIns { 0% { background-color: #F8D486; } 100% { background-color: #F8BB86; } } .pulseWarningIns { -webkit-animation: pulseWarningIns 0.75s infinite alternate; animation: pulseWarningIns 0.75s infinite alternate; } @-webkit-keyframes rotate-loading { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotate-loading { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* Internet Explorer 9 has some special quirks that are fixed here */ /* The icons are not animated. */ /* This file is automatically merged into sweet-alert.min.js through Gulp */ /* Error icon */ .sweet-alert .sa-icon.sa-error .sa-line.sa-left { -ms-transform: rotate(45deg) \9; } .sweet-alert .sa-icon.sa-error .sa-line.sa-right { -ms-transform: rotate(-45deg) \9; } /* Success icon */ .sweet-alert .sa-icon.sa-success { border-color: transparent\9; } .sweet-alert .sa-icon.sa-success .sa-line.sa-tip { -ms-transform: rotate(45deg) \9; } .sweet-alert .sa-icon.sa-success .sa-line.sa-long { -ms-transform: rotate(-45deg) \9; } /*! * Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/) * Copyright 2015 Daniel Cardoso <@DanielCardoso> * Licensed under MIT */ .la-ball-fall, .la-ball-fall > div { position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; } .la-ball-fall { display: block; font-size: 0; color: #fff; } .la-ball-fall.la-dark { color: #333; } .la-ball-fall > div { display: inline-block; float: none; background-color: currentColor; border: 0 solid currentColor; } .la-ball-fall { width: 54px; height: 18px; } .la-ball-fall > div { width: 10px; height: 10px; margin: 4px; border-radius: 100%; opacity: 0; -webkit-animation: ball-fall 1s ease-in-out infinite; animation: ball-fall 1s ease-in-out infinite; } .la-ball-fall > div:nth-child(1) { -webkit-animation-delay: -200ms; animation-delay: -200ms; } .la-ball-fall > div:nth-child(2) { -webkit-animation-delay: -100ms; animation-delay: -100ms; } .la-ball-fall > div:nth-child(3) { -webkit-animation-delay: 0ms; animation-delay: 0ms; } .la-ball-fall.la-sm { width: 26px; height: 8px; } .la-ball-fall.la-sm > div { width: 4px; height: 4px; margin: 2px; } .la-ball-fall.la-2x { width: 108px; height: 36px; } .la-ball-fall.la-2x > div { width: 20px; height: 20px; margin: 8px; } .la-ball-fall.la-3x { width: 162px; height: 54px; } .la-ball-fall.la-3x > div { width: 30px; height: 30px; margin: 12px; } /* * Animation */ @-webkit-keyframes ball-fall { 0% { opacity: 0; -webkit-transform: translateY(-145%); transform: translateY(-145%); } 10% { opacity: .5; } 20% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 80% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 90% { opacity: .5; } 100% { opacity: 0; -webkit-transform: translateY(145%); transform: translateY(145%); } } @keyframes ball-fall { 0% { opacity: 0; -webkit-transform: translateY(-145%); transform: translateY(-145%); } 10% { opacity: .5; } 20% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 80% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 90% { opacity: .5; } 100% { opacity: 0; -webkit-transform: translateY(145%); transform: translateY(145%); } } @charset "utf-8"; .container:after, .product-detail-effect:after, .search-img-list:after, .tag-list .tag-image-text-list li:after, .tag-list .tag-image-list:after, .clearfix:after { content: ""; display: table; clear: both; } .product-lists li p, .about-icon li p, .news-first .text h3, .news-lists li h3, .page-left-sort > li a, .latest-news li a, .page-next-prev li, .search-list li a, .search-img-list li h3, .page-news-list li h3, .page-video-list li h3, .page-down-list li a, .tag-list .tag-image-text-list li .wz h3, .tag-list .tag-image-list li .img-text h3, .tag-list .tag-line-list li a, .tow { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .page-banner, .center { position: relative; width: 100%; margin: 0 auto; } /*! normalize.css v4.2.0 | MIT License | github.com/necolas/normalize.css */ html { font-family: sans-serif; line-height: 1.15; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; } article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { display: block; } audio, canvas, progress, video { display: inline-block; } audio:not([controls]) { display: none; height: 0; } progress { vertical-align: baseline; } template, [hidden] { display: none; } a { background-color: transparent; -webkit-text-decoration-skip: objects; } a:active, a:hover { outline-width: 0; } abbr[title] { border-bottom: none; text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } b, strong { font-weight: inherit; } b, strong { font-weight: bolder; } dfn { font-style: italic; } h1 { font-size: 2em; margin: 0.67em 0; } mark { background-color: #ff0; color: #000; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } img { border-style: none; } svg:not(:root) { overflow: hidden; } code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } figure { margin: 1em 40px; } hr { -webkit-box-sizing: content-box; box-sizing: content-box; height: 0; overflow: visible; } button, input, optgroup, select, textarea { font: inherit; margin: 0; } optgroup { font-weight: bold; } button, input { overflow: visible; } button, select { text-transform: none; } button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { -webkit-box-sizing: border-box; box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } textarea { overflow: auto; } [type="checkbox"], [type="radio"] { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; } [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } [type="search"] { -webkit-appearance: textfield; outline-offset: -2px; } [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-input-placeholder { color: inherit; opacity: 0.54; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } body, div, span, h1, h2, h3, h4, h5, h6, p, em, img, strong, b, small, u, i, center, dl, dt, dd, ol, ul, li, sub, sup, tt, var, del, dfn, ins, kbd, q, s, samp, strike, applet, object, iframe, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, blockquote, pre, a, abbr, acronym, address, big, cite, code, mark, audio, video, input, textarea, select { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } html { font-size: 14px; font-family: Microsoft YaHei,arial,sans-serif; overflow-x: hidden; color: #333; line-height: 1.5; } ul li { list-style: none; } a { color: inherit; text-decoration: none; } a:hover { color: #034399; text-decoration: none; } .fl { float: left; } .fr { float: right; } .container { width: 100%; max-width: 1500px; margin: 0 auto; } .len { width: 320px !important; } .len50 { width: 50px !important; } .len80 { width: 80px !important; } .len100 { width: 100px !important; } .len110 { width: 110px !important; } .len150 { width: 150px !important; } .len200 { width: 200px !important; } .len500 { width: 500px !important; } .len600 { width: 600px !important; } .len700 { width: 700px !important; } .len800 { width: 800px !important; } .font-10 { font-size: 10px !important; } .font-12 { font-size: 12px !important; } .font-13 { font-size: 13px !important; } .font-14 { font-size: 14px !important; } .font-15 { font-size: 15px !important; } .font-16 { font-size: 16px !important; } .font-18 { font-size: 18px !important; } .font-20 { font-size: 20px !important; } .font-50 { font-size: 50px !important; } .font-100 { font-size: 100px !important; } .pl-0 { padding-left: 0 !important; } .pl-5 { padding-left: 5px !important; } .pl-7 { padding-left: 7px !important; } .pl-10 { padding-left: 10px !important; } .pl-15 { padding-left: 15px !important; } .pl-20 { padding-left: 20px !important; } .pl-119 { padding-left: 119px !important; } .pl-139 { padding-left: 139px !important; } .pl-149 { padding-left: 149px !important; } .pr-5 { padding-right: 5px !important; } .pr-7 { padding-right: 7px !important; } .pr-10 { padding-right: 10px !important; } .pr-15 { padding-right: 15px !important; } .pr-20 { padding-right: 20px !important; } .pt-3 { padding-top: 3px !important; } .pt-5 { padding-top: 5px !important; } .pt-7 { padding-top: 7px !important; } .pt-10 { padding-top: 10px !important; } .pt-15 { padding-top: 15px !important; } .pt-20 { padding-top: 20px !important; } .pt-30 { padding-top: 30px !important; } .pt-40 { padding-top: 40px !important; } .pt-50 { padding-top: 50px !important; } .pb-3 { padding-bottom: 3px !important; } .pb-5 { padding-bottom: 5px !important; } .pb-7 { padding-bottom: 7px !important; } .pb-10 { padding-bottom: 10px !important; } .pb-15 { padding-bottom: 15px !important; } .pb-20 { padding-bottom: 20px !important; } .pb-30 { padding-bottom: 30px !important; } .pb-40 { padding-bottom: 40px !important; } .pb-50 { padding-bottom: 50px !important; } .ml-5 { margin-left: 5px !important; } .ml-7 { margin-left: 7px !important; } .ml-10 { margin-left: 10px !important; } .ml-15 { margin-left: 15px !important; } .ml-20 { margin-left: 20px !important; } .ml-30 { margin-left: 30px !important; } .ml-40 { margin-left: 40px !important; } .mr-5 { margin-right: 5px !important; } .mr-7 { margin-right: 7px !important; } .mr-10 { margin-right: 10px !important; } .mr-15 { margin-right: 15px !important; } .mr-20 { margin-right: 20px !important; } .mr-30 { margin-right: 30px !important; } .mr-40 { margin-right: 40px !important; } .mt-0 { margin-top: 0px !important; } .mt-3 { margin-top: 3px !important; } .mt-5 { margin-top: 5px !important; } .mt-7 { margin-top: 7px !important; } .mt-10 { margin-top: 10px !important; } .mt-15 { margin-top: 15px !important; } .mt-20 { margin-top: 20px !important; } .mt-30 { margin-top: 30px !important; } .mt-40 { margin-top: 40px !important; } .mt-50 { margin-top: 50px !important; } .mt-100 { margin-top: 100px !important; } .mt-150 { margin-top: 150px !important; } .mb-3 { margin-bottom: 3px !important; } .mb-5 { margin-bottom: 5px !important; } .mb-7 { margin-bottom: 7px !important; } .mb-10 { margin-bottom: 10px !important; } .mb-15 { margin-bottom: 15px !important; } .mb-20 { margin-bottom: 20px !important; } .mb-30 { margin-bottom: 30px !important; } .mb-40 { margin-bottom: 40px !important; } .text-muted { color: #999 !important; } .text-primary { color: #3399ff !important; } .text-light-primary { color: #5cadff !important; } .text-dark-primary { color: #3091f2 !important; } .text-info { color: #3399ff !important; } .text-success { color: #00cc66 !important; } .text-warning { color: #ff9900 !important; } .text-error { color: #ff6600 !important; } .text-title { color: #464c5b !important; } .text-content { color: #657180 !important; } .text-sub { color: #9ea7b4 !important; } .i-block { display: inline-block !important; } .pretty * { -webkit-box-sizing: border-box; box-sizing: border-box; } .pretty input:not([type='checkbox']):not([type='radio']) { display: none; } .pretty { position: relative; display: inline-block; margin-right: 1em; white-space: nowrap; line-height: 1; } .pretty input { position: absolute; left: 0; top: 0; min-width: 1em; width: 100%; height: 100%; z-index: 2; opacity: 0; margin: 0; padding: 0; cursor: pointer; } .pretty .state label { position: initial; display: inline-block; font-weight: normal; margin: 0; text-indent: 1.5em; min-width: calc(1em + 2px); } .pretty .state label:before, .pretty .state label:after { content: ''; width: calc(1em + 2px); height: calc(1em + 2px); display: block; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 0; border: 1px solid transparent; z-index: 0; position: absolute; left: 0; top: calc((0% - (100% - 1em)) - 8%); background-color: transparent; } .pretty .state label:before { border-color: #bdc3c7; } .pretty .state.p-is-hover, .pretty .state.p-is-indeterminate { display: none; } @-webkit-keyframes zoom { 0% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } } @keyframes zoom { 0% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } } @-webkit-keyframes tada { 0% { -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; -webkit-transform: scale(7); transform: scale(7); } 38% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 55% { -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; -webkit-transform: scale(1.5); transform: scale(1.5); } 72% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-transform: scale(1); transform: scale(1); } 81% { -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; -webkit-transform: scale(1.24); transform: scale(1.24); } 89% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-transform: scale(1); transform: scale(1); } 95% { -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; -webkit-transform: scale(1.04); transform: scale(1.04); } 100% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-transform: scale(1); transform: scale(1); } } @keyframes tada { 0% { -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; -webkit-transform: scale(7); transform: scale(7); } 38% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 55% { -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; -webkit-transform: scale(1.5); transform: scale(1.5); } 72% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-transform: scale(1); transform: scale(1); } 81% { -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; -webkit-transform: scale(1.24); transform: scale(1.24); } 89% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-transform: scale(1); transform: scale(1); } 95% { -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; -webkit-transform: scale(1.04); transform: scale(1.04); } 100% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes jelly { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 40% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 50% { -webkit-transform: scale3d(0.85, 1.15, 1); transform: scale3d(0.85, 1.15, 1); } 65% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } 75% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes jelly { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 40% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 50% { -webkit-transform: scale3d(0.85, 1.15, 1); transform: scale3d(0.85, 1.15, 1); } 65% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } 75% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @-webkit-keyframes rotate { 0% { opacity: 0; -webkit-transform: translateZ(-200px) rotate(-45deg); transform: translateZ(-200px) rotate(-45deg); } 100% { opacity: 1; -webkit-transform: translateZ(0) rotate(0); transform: translateZ(0) rotate(0); } } @keyframes rotate { 0% { opacity: 0; -webkit-transform: translateZ(-200px) rotate(-45deg); transform: translateZ(-200px) rotate(-45deg); } 100% { opacity: 1; -webkit-transform: translateZ(0) rotate(0); transform: translateZ(0) rotate(0); } } @-webkit-keyframes pulse { 0% { -webkit-box-shadow: 0px 0px 0px 0px #bdc3c7; box-shadow: 0px 0px 0px 0px #bdc3c7; } 100% { -webkit-box-shadow: 0px 0px 0px 1.5em rgba(189, 195, 199, 0); box-shadow: 0px 0px 0px 1.5em rgba(189, 195, 199, 0); } } @keyframes pulse { 0% { -webkit-box-shadow: 0px 0px 0px 0px #bdc3c7; box-shadow: 0px 0px 0px 0px #bdc3c7; } 100% { -webkit-box-shadow: 0px 0px 0px 1.5em rgba(189, 195, 199, 0); box-shadow: 0px 0px 0px 1.5em rgba(189, 195, 199, 0); } } .pretty.p-default.p-fill .state label:after { -webkit-transform: scale(1); transform: scale(1); } .pretty.p-default .state label:after { -webkit-transform: scale(0.6); transform: scale(0.6); } .pretty.p-default input:checked ~ .state label:after { background-color: #bdc3c7 !important; } .pretty.p-default.p-thick .state label:before, .pretty.p-default.p-thick .state label:after { border-width: calc(1em / 7); } .pretty.p-default.p-thick .state label:after { -webkit-transform: scale(0.4) !important; transform: scale(0.4) !important; } .pretty.p-icon .state .icon { position: absolute; font-size: 1em; width: calc(1em + 2px); height: calc(1em + 2px); left: 0; z-index: 1; text-align: center; line-height: normal; top: calc((0% - (100% - 1em)) - 8%); border: 1px solid transparent; opacity: 0; } .pretty.p-icon .state .icon:before { margin: 0; width: 100%; height: 100%; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; line-height: 1; } .pretty.p-icon input:checked ~ .state .icon { opacity: 1; } .pretty.p-icon input:checked ~ .state label:before { border-color: #5a656b; } .pretty.p-svg .state .svg { position: absolute; font-size: 1em; width: calc(1em + 2px); height: calc(1em + 2px); left: 0; z-index: 1; text-align: center; line-height: normal; top: calc((0% - (100% - 1em)) - 8%); border: 1px solid transparent; opacity: 0; } .pretty.p-svg .state svg { margin: 0; width: 100%; height: 100%; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; line-height: 1; } .pretty.p-svg input:checked ~ .state .svg { opacity: 1; } .pretty.p-image .state img { opacity: 0; position: absolute; width: calc(1em + 2px); height: calc(1em + 2px); top: 0; top: calc((0% - (100% - 1em)) - 8%); left: 0; z-index: 0; text-align: center; line-height: normal; -webkit-transform: scale(0.8); transform: scale(0.8); } .pretty.p-image input:checked ~ .state img { opacity: 1; } .pretty.p-switch input { min-width: 2em; } .pretty.p-switch .state { position: relative; } .pretty.p-switch .state:before { content: ''; border: 1px solid #bdc3c7; border-radius: 60px; width: 2em; -webkit-box-sizing: unset; box-sizing: unset; height: calc(1em + 2px); position: absolute; top: 0; top: calc((0% - (100% - 1em)) - 16%); z-index: 0; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .pretty.p-switch .state label { text-indent: 2.5em; } .pretty.p-switch .state label:before, .pretty.p-switch .state label:after { -webkit-transition: all 0.5s ease; transition: all 0.5s ease; border-radius: 100%; left: 0; border-color: transparent; -webkit-transform: scale(0.8); transform: scale(0.8); } .pretty.p-switch .state label:after { background-color: #bdc3c7 !important; } .pretty.p-switch input:checked ~ .state:before { border-color: #5a656b; } .pretty.p-switch input:checked ~ .state label:before { opacity: 0; } .pretty.p-switch input:checked ~ .state label:after { background-color: #5a656b !important; left: 1em; } .pretty.p-switch.p-fill input:checked ~ .state:before { border-color: #5a656b; background-color: #5a656b !important; } .pretty.p-switch.p-fill input:checked ~ .state label:before { opacity: 0; } .pretty.p-switch.p-fill input:checked ~ .state label:after { background-color: #fff !important; left: 1em; } .pretty.p-switch.p-slim .state:before { height: 0.1em; background: #bdc3c7 !important; top: calc(50% - 0.1em); } .pretty.p-switch.p-slim input:checked ~ .state:before { border-color: #5a656b; background-color: #5a656b !important; } .pretty.p-has-hover input:hover ~ .state:not(.p-is-hover) { display: none; } .pretty.p-has-hover input:hover ~ .state.p-is-hover { display: block; } .pretty.p-has-hover input:hover ~ .state.p-is-hover .icon { display: block; } .pretty.p-has-focus input:focus ~ .state label:before { -webkit-box-shadow: 0px 0px 3px 0px #bdc3c7; box-shadow: 0px 0px 3px 0px #bdc3c7; } .pretty.p-has-indeterminate input[type='checkbox']:indeterminate ~ .state:not(.p-is-indeterminate) { display: none; } .pretty.p-has-indeterminate input[type='checkbox']:indeterminate ~ .state.p-is-indeterminate { display: block; } .pretty.p-has-indeterminate input[type='checkbox']:indeterminate ~ .state.p-is-indeterminate .icon { display: block; opacity: 1; } .pretty.p-toggle .state.p-on { opacity: 0; display: none; } .pretty.p-toggle .state.p-off, .pretty.p-toggle .state .icon, .pretty.p-toggle .state .svg, .pretty.p-toggle .state img { opacity: 1; display: inherit; } .pretty.p-toggle .state.p-off .icon { color: #bdc3c7; } .pretty.p-toggle input:checked ~ .state.p-on { opacity: 1; display: inherit; } .pretty.p-toggle input:checked ~ .state.p-off { opacity: 0; display: none; } .pretty.p-plain input:checked ~ .state label:before, .pretty.p-plain.p-toggle .state label:before { content: none; } .pretty.p-plain.p-plain .icon { -webkit-transform: scale(1.1); transform: scale(1.1); } .pretty.p-round .state label:before, .pretty.p-round .state label:after { border-radius: 100%; } .pretty.p-round.p-icon .state .icon { border-radius: 100%; overflow: hidden; } .pretty.p-round.p-icon .state .icon:before { -webkit-transform: scale(0.8); transform: scale(0.8); } .pretty.p-curve .state label:before, .pretty.p-curve .state label:after { border-radius: 20%; } .pretty.p-smooth label:before, .pretty.p-smooth label:after, .pretty.p-smooth .icon, .pretty.p-smooth .svg { -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .pretty.p-smooth input:checked + .state label:after { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .pretty.p-smooth input:checked + .state .icon, .pretty.p-smooth input:checked + .state .svg, .pretty.p-smooth input:checked + .state img { -webkit-animation: zoom 0.2s ease; animation: zoom 0.2s ease; } .pretty.p-smooth.p-default input:checked + .state label:after { -webkit-animation: zoom 0.2s ease; animation: zoom 0.2s ease; } .pretty.p-smooth.p-plain input:checked + .state label:before { content: ''; -webkit-transform: scale(0); transform: scale(0); -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .pretty.p-tada:not(.p-default) input:checked + .state .icon, .pretty.p-tada:not(.p-default) input:checked + .state .svg, .pretty.p-tada:not(.p-default) input:checked + .state img, .pretty.p-tada:not(.p-default) input:checked + .state label:before, .pretty.p-tada:not(.p-default) input:checked + .state label:after { -webkit-animation: tada 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1 alternate; animation: tada 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1 alternate; opacity: 1; } .pretty.p-jelly:not(.p-default) input:checked + .state .icon, .pretty.p-jelly:not(.p-default) input:checked + .state .svg, .pretty.p-jelly:not(.p-default) input:checked + .state img, .pretty.p-jelly:not(.p-default) input:checked + .state label:before, .pretty.p-jelly:not(.p-default) input:checked + .state label:after { -webkit-animation: jelly 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); animation: jelly 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); opacity: 1; } .pretty.p-jelly:not(.p-default) input:checked + .state label:before { border-color: transparent; } .pretty.p-rotate:not(.p-default) input:checked ~ .state .icon, .pretty.p-rotate:not(.p-default) input:checked ~ .state .svg, .pretty.p-rotate:not(.p-default) input:checked ~ .state img, .pretty.p-rotate:not(.p-default) input:checked ~ .state label:before, .pretty.p-rotate:not(.p-default) input:checked ~ .state label:after { -webkit-animation: rotate 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); animation: rotate 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); opacity: 1; } .pretty.p-rotate:not(.p-default) input:checked ~ .state label:before { border-color: transparent; } .pretty.p-pulse:not(.p-switch) input:checked ~ .state label:before { -webkit-animation: pulse 1s; animation: pulse 1s; } .pretty input[disabled] { cursor: not-allowed; display: none; } .pretty input[disabled] ~ * { opacity: .5; } .pretty.p-locked input { display: none; cursor: not-allowed; } .pretty input:checked ~ .state.p-primary label:after, .pretty.p-toggle .state.p-primary label:after { background-color: #428bca !important; } .pretty input:checked ~ .state.p-primary .icon, .pretty input:checked ~ .state.p-primary .svg, .pretty.p-toggle .state.p-primary .icon, .pretty.p-toggle .state.p-primary .svg { color: #fff; stroke: #fff; } .pretty input:checked ~ .state.p-primary-o label:before, .pretty.p-toggle .state.p-primary-o label:before { border-color: #428bca; } .pretty input:checked ~ .state.p-primary-o label:after, .pretty.p-toggle .state.p-primary-o label:after { background-color: transparent; } .pretty input:checked ~ .state.p-primary-o .icon, .pretty input:checked ~ .state.p-primary-o .svg, .pretty input:checked ~ .state.p-primary-o svg, .pretty.p-toggle .state.p-primary-o .icon, .pretty.p-toggle .state.p-primary-o .svg, .pretty.p-toggle .state.p-primary-o svg { color: #428bca; stroke: #428bca; } .pretty.p-default:not(.p-fill) input:checked ~ .state.p-primary-o label:after { background-color: #428bca !important; } .pretty.p-switch input:checked ~ .state.p-primary:before { border-color: #428bca; } .pretty.p-switch.p-fill input:checked ~ .state.p-primary:before { background-color: #428bca !important; } .pretty.p-switch.p-slim input:checked ~ .state.p-primary:before { border-color: #245682; background-color: #245682 !important; } .pretty input:checked ~ .state.p-info label:after, .pretty.p-toggle .state.p-info label:after { background-color: #5bc0de !important; } .pretty input:checked ~ .state.p-info .icon, .pretty input:checked ~ .state.p-info .svg, .pretty.p-toggle .state.p-info .icon, .pretty.p-toggle .state.p-info .svg { color: #fff; stroke: #fff; } .pretty input:checked ~ .state.p-info-o label:before, .pretty.p-toggle .state.p-info-o label:before { border-color: #5bc0de; } .pretty input:checked ~ .state.p-info-o label:after, .pretty.p-toggle .state.p-info-o label:after { background-color: transparent; } .pretty input:checked ~ .state.p-info-o .icon, .pretty input:checked ~ .state.p-info-o .svg, .pretty input:checked ~ .state.p-info-o svg, .pretty.p-toggle .state.p-info-o .icon, .pretty.p-toggle .state.p-info-o .svg, .pretty.p-toggle .state.p-info-o svg { color: #5bc0de; stroke: #5bc0de; } .pretty.p-default:not(.p-fill) input:checked ~ .state.p-info-o label:after { background-color: #5bc0de !important; } .pretty.p-switch input:checked ~ .state.p-info:before { border-color: #5bc0de; } .pretty.p-switch.p-fill input:checked ~ .state.p-info:before { background-color: #5bc0de !important; } .pretty.p-switch.p-slim input:checked ~ .state.p-info:before { border-color: #2390b0; background-color: #2390b0 !important; } .pretty input:checked ~ .state.p-success label:after, .pretty.p-toggle .state.p-success label:after { background-color: #5cb85c !important; } .pretty input:checked ~ .state.p-success .icon, .pretty input:checked ~ .state.p-success .svg, .pretty.p-toggle .state.p-success .icon, .pretty.p-toggle .state.p-success .svg { color: #fff; stroke: #fff; } .pretty input:checked ~ .state.p-success-o label:before, .pretty.p-toggle .state.p-success-o label:before { border-color: #5cb85c; } .pretty input:checked ~ .state.p-success-o label:after, .pretty.p-toggle .state.p-success-o label:after { background-color: transparent; } .pretty input:checked ~ .state.p-success-o .icon, .pretty input:checked ~ .state.p-success-o .svg, .pretty input:checked ~ .state.p-success-o svg, .pretty.p-toggle .state.p-success-o .icon, .pretty.p-toggle .state.p-success-o .svg, .pretty.p-toggle .state.p-success-o svg { color: #5cb85c; stroke: #5cb85c; } .pretty.p-default:not(.p-fill) input:checked ~ .state.p-success-o label:after { background-color: #5cb85c !important; } .pretty.p-switch input:checked ~ .state.p-success:before { border-color: #5cb85c; } .pretty.p-switch.p-fill input:checked ~ .state.p-success:before { background-color: #5cb85c !important; } .pretty.p-switch.p-slim input:checked ~ .state.p-success:before { border-color: #357935; background-color: #357935 !important; } .pretty input:checked ~ .state.p-warning label:after, .pretty.p-toggle .state.p-warning label:after { background-color: #f0ad4e !important; } .pretty input:checked ~ .state.p-warning .icon, .pretty input:checked ~ .state.p-warning .svg, .pretty.p-toggle .state.p-warning .icon, .pretty.p-toggle .state.p-warning .svg { color: #fff; stroke: #fff; } .pretty input:checked ~ .state.p-warning-o label:before, .pretty.p-toggle .state.p-warning-o label:before { border-color: #f0ad4e; } .pretty input:checked ~ .state.p-warning-o label:after, .pretty.p-toggle .state.p-warning-o label:after { background-color: transparent; } .pretty input:checked ~ .state.p-warning-o .icon, .pretty input:checked ~ .state.p-warning-o .svg, .pretty input:checked ~ .state.p-warning-o svg, .pretty.p-toggle .state.p-warning-o .icon, .pretty.p-toggle .state.p-warning-o .svg, .pretty.p-toggle .state.p-warning-o svg { color: #f0ad4e; stroke: #f0ad4e; } .pretty.p-default:not(.p-fill) input:checked ~ .state.p-warning-o label:after { background-color: #f0ad4e !important; } .pretty.p-switch input:checked ~ .state.p-warning:before { border-color: #f0ad4e; } .pretty.p-switch.p-fill input:checked ~ .state.p-warning:before { background-color: #f0ad4e !important; } .pretty.p-switch.p-slim input:checked ~ .state.p-warning:before { border-color: #c77c11; background-color: #c77c11 !important; } .pretty input:checked ~ .state.p-danger label:after, .pretty.p-toggle .state.p-danger label:after { background-color: #d9534f !important; } .pretty input:checked ~ .state.p-danger .icon, .pretty input:checked ~ .state.p-danger .svg, .pretty.p-toggle .state.p-danger .icon, .pretty.p-toggle .state.p-danger .svg { color: #fff; stroke: #fff; } .pretty input:checked ~ .state.p-danger-o label:before, .pretty.p-toggle .state.p-danger-o label:before { border-color: #d9534f; } .pretty input:checked ~ .state.p-danger-o label:after, .pretty.p-toggle .state.p-danger-o label:after { background-color: transparent; } .pretty input:checked ~ .state.p-danger-o .icon, .pretty input:checked ~ .state.p-danger-o .svg, .pretty input:checked ~ .state.p-danger-o svg, .pretty.p-toggle .state.p-danger-o .icon, .pretty.p-toggle .state.p-danger-o .svg, .pretty.p-toggle .state.p-danger-o svg { color: #d9534f; stroke: #d9534f; } .pretty.p-default:not(.p-fill) input:checked ~ .state.p-danger-o label:after { background-color: #d9534f !important; } .pretty.p-switch input:checked ~ .state.p-danger:before { border-color: #d9534f; } .pretty.p-switch.p-fill input:checked ~ .state.p-danger:before { background-color: #d9534f !important; } .pretty.p-switch.p-slim input:checked ~ .state.p-danger:before { border-color: #a02622; background-color: #a02622 !important; } .pretty.p-bigger label:before, .pretty.p-bigger label:after, .pretty.p-bigger .icon, .pretty.p-bigger .svg, .pretty.p-bigger .img { font-size: 1.2em !important; top: calc((0% - (100% - 1em)) - 35%) !important; } .pretty.p-bigger label { text-indent: 1.7em; } @media print { .pretty .state:before, .pretty .state label:before, .pretty .state label:after, .pretty .state .icon { color-adjust: exact; /* stylelint-disable */ -webkit-print-color-adjust: exact; print-color-adjust: exact; } } .n-loading .n-icon { background: url("../images/loading.gif") 0 center no-repeat !important; } .n-default .msg-wrap .n-icon { background-image: url("../images/validator_default.png"); } .n-simple .msg-wrap .n-icon { background-image: url("../images/validator_default.png"); } .n-yellow .msg-wrap .n-icon { background-image: url("../images/validator_default.png"); } .layui-layer-xypt .layui-layer-title { background: #e2e2e2; color: #fff; } .layui-layer-xypt .layui-layer-btn a { background: #e2e2e2; border: none; } .top { background: #eaeaea; line-height: 35px; font-size: 12px; color: #4b4b4b; } .top span { padding-right: 5px; } .top a { color: #4b4b4b; display: inline-block; padding-right: 10px; } .top a:not(:last-child):after { content: "|"; position: absolute; margin: -1px 0 0 4px; } .top a:hover { color: #e2e2e2; } .top .user-name { color: #e2e2e2; } .header { padding: 15px 0; } .header-right { flex: 0 0 74%; align-self: center; display: flex; flex-wrap: wrap; } .header-right .header-phone { flex: 0 0 5%; align-self: center; } .header-right .header-phone p { width: 100%; display: flex; justify-content: flex-end; } .header-right .header-phone img { max-width: 100%; } .search { width: 25%; border: 2px solid #e2e4e5; height: 46px; border-radius: 46px; padding-right: 60px; position: relative; margin-top: 26px; background: #fff; line-height: 46px; } .search .input-text { width: 100%; height: 46px; background: none; outline: none; border: none; font-size: 14px; color: #a3a3a3; padding-left: 24px; line-height: 46px; } .search .input-submit { position: absolute; right: 0; top: 0; width: 60px; background: url(../images/btn.png) center no-repeat; height: 42px; cursor: pointer; outline: none; border: none; font-size: 0; } .nav { flex: 0 0 90%; align-self: center; } .nav-lists { width: 100%; display: flex; position: relative; justify-content: flex-end; } .nav-lists > li { line-height: 104px; text-align: center; } .nav-lists > li > a { display: block; text-align: center; line-height: 104px; font-size: 18px; color: #fefefe; padding: 0 30px; } .nav-lists > li.active > a, .nav-lists > li:hover > a { color: #eb3d00; } /*product-center*/ .product-center { padding: 65px 0; width: 100%; background: #ecedef; } .product-title { text-align: center; } .product-title h3 { color: #333333; font-size: 48px; font-weight: 700; } .product-title h3 span { color: #19489c; } .product-title p { font-size: 20px; color: #555555; margin-top: 5px; } .product-content { padding-top: 55px; } .product-content .product-cate { width: 22%; float: left; } .product-content .product-cate .cate-title { background: url("../images/probg.jpg") top center no-repeat; padding: 16px 0; text-align: center; color: #fff; } .product-content .product-cate .cate-title h3 { font-size: 36px; text-transform: uppercase; } .product-content .product-cate .cate-title p { font-size: 18px; } .product-cate .bd { overflow: hidden; } .product-cate .bd dt { position: relative; height: 64px; line-height: 64px; background: #edeef2; } .product-cate .bd dt:after { display: block; position: absolute; z-index: 1; left: 0; top: 0; width: 0; height: 64px; content: ""; background: #2ca0db; transition: all .5s; } .product-cate .bd dt a { display: block; position: relative; z-index: 2; padding-left: 58px; font-size: 16px; color: #333; background: url(../images/cate_dt-1.png) no-repeat 32px center; } .product-cate .bd dt:hover a { color: #fff; background: url(../images/cate_dt.png) no-repeat 32px center; } .product-cate .bd dd { padding: 24px 0; min-height: 205px; overflow: hidden; background: #fff; border: #ddd solid 1px; border-top: none; } .product-cate .bd .item span { display: block; height: 35px; line-height: 35px; font-size: 14px; } .product-cate .bd .item span.second { height: 40px; line-height: 40px; } .product-cate .bd .item span a { display: block; padding-left: 55px; color: #666; background: url(../images/cate_dd.png) no-repeat 40px center; } .product-cate .bd .item span.second a { font-size: 18px; color: #19489c; font-weight: 700; background: none; padding-left: 40px; } .product-cate .bd .item .subMenu a { display: block; padding-left: 55px; height: 35px; line-height: 35px; font-size: 14px; color: #666; background: url(../images/cate_dd.png) no-repeat 40px center; } .product-cate .bd .item span a:hover,.product-cate .bd .item .subMenu a:hover { color: #19489c; } .product-cate .bd dt:hover:after,.product-cate .bd dt.cur:after { width: 100%; } .product-main { width: 73.7%; float: right; } .product-ad { position: relative; } .product-ad .tag { position: absolute; right: 16px; top: -25px; padding: 15px 24px; width: 84px; height: 84px; font-size: 18px; color: #fff; background: #2ca0db; z-index: 99; } .product-ad .owl-carousel .banner-item a img { max-width: 100%; } .product-ad .owl-carousel { position: relative; } .product-ad .owl-carousel .banner-item a { display: block; } .product-ad .owl-carousel .owl-nav { height: 0; display: none; } .product-ad .owl-carousel .owl-dots { position: absolute; z-index: 999; left: 0; width: 100%; text-align: center; font-size: 0; bottom: 9%; } .product-ad .owl-carousel .owl-dots button.owl-dot { display: inline-block; vertical-align: middle; font-size: 14px; margin: 0 .6em; outline: none; background: #a5a6a9; border-radius: 50%; width: 10px; height: 10px; } .product-ad .owl-carousel .owl-dots button.owl-dot:hover { background: #19489c; border-radius: 10px; } .product-ad .owl-carousel .owl-dots button.owl-dot.active { background: #19489c; border-radius: 10px; } .product-list .item { float: left; margin-top: 32px; padding: 0 13px; width: 33.333%; background: #fff; } .product-list .item a { border: #ddd solid 1px; display: block; padding: 6px; overflow: hidden; transition: all .5s linear; } .product-list .pic { width: 100%; height: auto; overflow: hidden; } .product-list .pic img { display: block; width: 100%; height: auto; } .product-list .text { text-align: center; padding: 10px 0; overflow: hidden; } .product-list .text span { display: block; height: 28px; line-height: 28px; font-size: 15px; color: #666666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .product-list .item a:hover { background: #19489c; border-color: #19489c; box-shadow: 0 0 20px #ccc; transform: translateY(-20px); } .product-list .item a:hover * { color: #fff; } .box-title { text-align: center; } .box-title h2 { height: 62px; line-height: 62px; font-size: 48px; color: #333333; font-weight: bold; } .box-title p { font-size: 20px; color: #555555; height: 32px; line-height: 32px; margin-top: 10px; } .product-tab .hd { margin-bottom: 35px; } .product-category { text-align: center; } .product-category li { display: inline-block; margin: 0 30px; text-align: left; } .product-category li .number { padding-left: 25px; font-size: 14px; color: #9f9e9e; } .product-category li .text { background: url(../images/sort-jt.png) left center no-repeat; padding-left: 25px; font-size: 16px; color: #3f3f3f; } .product-category li:hover .text, .product-category li.on .text { color: #e2e2e2; } .product-lists { margin: 0 -1%; } .product-lists li { width: 31.333333%; float: left; margin: 0 1% 20px 1%; position: relative; -webkit-box-sizing: content-box; box-sizing: content-box; transition: all .3s; } .product-lists li:hover a{ border-color: #034399; } @media (max-width: 768px) { .product-lists li { width: 48%; } } .product-lists li a { display: block; border: 1px solid #eee; } .product-lists li .img { text-align: center; display: block; width: 100%; overflow: hidden; } .product-lists li .img img { max-width: 100%; max-height: 100%; vertical-align: middle; transition: all .3s; } .product-lists li:hover .img img{ transform: scale(1.1); } .product-lists li .img:after { content: ''; height: 100%; display: inline-block; vertical-align: middle; } .product-lists li p { font-size: 16px; color: #3f3f3f; text-align: center; line-height: 3.2; } .product-lists li:hover p{ color:#013171; } .shop-box { padding-bottom: 10px; } .shop-box .price { width: 50%; float: left; padding-left: 10px; font-size: 16px; color: red; line-height: 33px; } .shop-box .add-cart { float: right; margin-right: 10px; padding: 5px 15px; border-radius: 5px; font-size: 14px; color: #fff; background: #e2e2e2; cursor: pointer; } .u-flyer { width: 50px; height: 50px; border-radius: 50%; } /*recommend-product*/ .recommend-product { padding: 50px 0 70px 0; } .product-slick .hd { margin-top: 40px; } .product-slick .product-dots { position: relative; text-align: center; font-size: 0; height: 20px; } .product-slick .product-dots:before { content: ''; position: absolute; left: 10%; right: 10%; top: 49%; height: 2px; background: #dddbdb; z-index: -1; } .product-slick .product-dots li { display: inline-block; vertical-align: middle; width: 15px; height: 15px; background: #dddbdb; margin: 0 35px; -webkit-transition: all .5s ease; transition: all .5s ease; border-radius: 50%; } .product-slick .product-dots li.on, .product-slick .product-dots li:hover { background: #e2e2e2; width: 20px; height: 20px; } /*news-center*/ .news-center { padding: 75px 0; } .news-left { flex: 0 0 35%; width: 35%; } .news-left .owl-carousel { position: relative; } .news-left .owl-carousel .owl-nav button.owl-prev, .news-left .owl-carousel .owl-nav button.owl-next { outline: none; position: absolute; top: 50%; z-index: 9999; height: 70px; width: 30px; margin-top: -40px; -webkit-transition: all .5s ease; transition: all .5s ease; background: rgba(0,0,0,0.3); } .news-left .owl-carousel .owl-nav button.owl-prev { left: 0; background: url("../images/l-arrow.png") no-repeat; } .news-left .owl-carousel .owl-nav button.owl-next { right: 0; background: url("../images/r-arrow.png") no-repeat; } .news-left li { width: 100%; } .news-left li a { display: block; position: relative; } .news-left li a img { width: 100%; } .news-left li a span { display: block; width: 100%; position: absolute; left: 0; bottom: 0; height: 48px; text-align: center; line-height: 48px; color: #fff; font-size: 16px; background: rgba(0, 0, 0, 0.6); } .news-right { flex: 0 0 63%; } .news-right .news-img { flex: 0 0 41%; } .news-right .news-img img { width: 100%; } .news-right > div { justify-content: flex-end; display: flex; flex-wrap: wrap; } .news-right .news-list { flex: 0 0 55%; } .news-right .news-list ul { display: flex; flex-wrap: wrap; justify-content: flex-end; } .news-right .news-list li { width: 100%; line-height: 44px; position: relative; display: flex; flex-wrap: nowrap; } .news-right .news-list li a { display: block; color: #333333; font-size: 16px; line-height: 44px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 0 75%; text-indent: 10%; } .news-right .news-list li span { color: #888888; font-size: 14px; display: inline-block; flex: 0 0 25%; text-align: right; } .news-right .news-list li:hover a { color: #eb3d00; } /*links*/ .links { background: #f6f6f6; padding: 15px 0; font-size: 16px; color: #33943d; line-height: 23px; } .links a { color: #33943d; display: inline-block; } .links a:not(:last-child) { margin-right: 5px; } .links a:not(:last-child):after { content: '|'; margin-left: 5px; } .links a:hover { text-decoration: underline; } .foot-nav { display: flex; flex-wrap: nowrap; width: 100%; } .foot-nav .quick-nav { flex: 0 0 37%; } .foot-nav .product { flex: 0 0 60%; } .foot-nav > div h3 { color: #fff; font-size: 20px; font-weight: bold; margin-bottom: 25px; } .foot-nav li a { color: rgba(255,255,255,0.6); font-size: 15px; display: block; line-height: 36px; } .foot-nav li a:hover { color: #fff; } .footer-right { width: 50%; display: flex; flex-wrap: wrap; justify-content: end; } .footer-contact { margin-top: 10px; flex: 0 0 70%; } .footer-contact h3 { background: url("../images/Tel.png") 0 50% no-repeat; color: rgba(255, 255, 255, 0.6); font-size: 14px; padding-left: 30px; } .footer-contact .tels { margin-top: 15px; } .footer-contact .tels p { font-size: 30px; color: #fff; font-weight: bold; line-height: 38px; } .footer-contact .content { font-size: 14px; color: rgba(255, 255, 255, 0.6); line-height: 28px; margin-top: 20px; } .footer-contact .share { margin-top: 6%; } .footer-contact .share a { width: 32px; height: 32px; background: #393939; border-radius: 3px; margin-right: 20px; } .footer-contact .share a:first-child { display: none; } .footer-contact .share a:nth-child(5) { display: none; } .footer-contact .share a:nth-child(2) { background-image: url("../images/qq.png"); } .footer-contact .share a:nth-child(3) { background-image: url("../images/xl.png"); } .footer-contact .share a:nth-child(4) { background-image: url("../images/txwb.png"); } .footer-contact .share a:nth-child(6) { background-image: url("../images/wx.png"); } .footer-ewm { margin-top: 10%; } .footer-ewm .wz { font-size: 14px; color: rgba(255, 255, 255, 0.6); line-height: 28px; text-align: center; } .footer-bot { background: #000; text-align: center; padding: 20px 0; color: rgba(255, 255, 255, 0.6); font-size: 14px; line-height: 30px; } .footer-bot a { color: rgba(255, 255, 255, 0.6); font-size: 14px; } .footer-bot a:hover { color: rgba(255, 255, 255, 1); } .footer .copyright { font-size: 16px; color: rgba(255, 255, 255, 0.45); line-height: 1; text-align: center; } /*page-banner*/ .page-banner img { width: 100%; height: auto; } /*page-wrap*/ .page-wrap { padding: 20px 0 40px 0; margin: 0 auto; } .page-left { width: 23%; } @media (max-width: 1200px) { .page-left { width: 23%; } } @media (max-width: 768px) { .page-left { width: 100%; } } .page-left-box { margin-bottom: 30px; } @media (max-width: 768px) { .page-left-box.page-left-news, .page-left-box.page-left-contact { display: none !important; } } .page-left-title { height: 74px; background: #363232; text-align: center; } .page-left-title strong { font-size: 24px; color: #fff; line-height: 1; line-height: 74px; } .page-left-sort > li { margin-bottom: 2px; position: relative; padding: 0 16px; background: #f5f5f5; } /*.page-left-sort > li:before { content: ''; width: 6px; height: 6px; background: #999898; border-radius: 50%; position: absolute; margin-left: -16px; margin-top: 10px; }*/ .page-left-sort > li:after { content: ''; width: 10px; height: 10px; display: inline-block; background: url(../images/page-sort-jt.png) -10px no-repeat; position: absolute; right: 30px; top: 24px; z-index: 99; cursor: pointer; } .page-left-sort > li:hover:before, .page-left-sort > li.active:before { background: #d93900; } .page-left-sort > li:hover:after, .page-left-sort > li.active:after { background-position: 0 4px; } .page-left-sort > li a { display: block; } .page-left-sort > li a:hover, .page-left-sort > li a.active { color: #034399; } .page-left-sort > li > a { font-size: 16px; color: #333; line-height: 58px; } .page-sort { height: 64px; background: #fff; margin-bottom: 20px; overflow: hidden; background: #efefed; } .page-about-title { display: none; } .page-sort > li { height: 64px; line-height: 64px; text-align: center; float: left; cursor: pointer; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding: 0; border-right: 2px solid #fff; } .page-sort > li > a { line-height: 64px; } .page-sort > li > a:hover,.page-sort > li > a.active { background: #034399; color: #fff; } .page-sort > li:after { display: none; } .second-sort { padding: 10px 0 10px 15px; display: none; } .second-sort > li:not(:last-child) { margin-bottom: 20px; } .second-sort > li > a { font-size: 14px; color: #312f2f; line-height: 20px; } .latest-news { margin-top: 20px; } .latest-news li { margin-bottom: 20px; padding-left: 35px; } .latest-news li i { font-style: normal; position: absolute; margin-left: -30px; width: 17px; height: 17px; background: #f8f9f9; border: 1px solid #e6e6e6; text-align: center; font-size: 14px; color: #9f9b9b; line-height: 15px; } .latest-news li a { display: block; font-size: 16px; color: #312f2f; line-height: 1; } .latest-news li a:hover { color: #034399; } .page-left-phone { background: url(../images/page-left-phone.png) left center no-repeat; padding-left: 55px; font-size: 14px; color: #312f2f; line-height: 1; margin-bottom: 25px; min-height: 33px; } .page-left-phone p { margin-bottom: 10px; } .page-left-phone h3 { font-size: 16px; color: #33943d; } .page-left-contact h3 { font-size: 18px; color: #181818; line-height: 1; margin-bottom: 20px; } .page-left-contact h3 span { color: #e2e2e2; font-weight: normal; } .page-left-contact p { margin-bottom: 20px; font-size: 14px; color: #312f2f; line-height: 1; } .page-right { width: 73%; } @media (max-width: 1200px) { .page-right { width: 73%; } } @media (max-width: 768px) { .page-right { width: 100%; } } .bread-crumbs { position: relative; line-height: 39px; margin-bottom: 20px; color:#888; } .bread-crumbs i { color: #333; margin-right: 8px; } .page-product-wrap { margin-bottom: 40px; } /* 文件上传框美化 */ .a-upload { display: inline-block; padding: 5px 15px; border: 1px solid #ececec; border-radius: 5px; background: #efefef; cursor: pointer; } .a-upload input[type="file"] { display: none; } /* 暂无信息 */ .no-information { border: 1px solid red; padding: 10px; color: red; margin: 20px 0; text-align: center; font-size: 16px; } /* 分页样式 */ .paging { line-height: 25px; } .pagination { text-align: right; font-size: 12px; color: #666; } .pagination span, .pagination a { display: inline-block; vertical-align: middle; border: 1px solid #e2e2e2; padding: 0 10px; } .pagination a { background: #fff; } .pagination li { display: inline-block; } .pagination li:not(.disabled):hover a, .pagination li:not(.disabled):hover span, .pagination li:not(.disabled).active a, .pagination li:not(.disabled).active span { background: #d93900; color: #fff; } .pagination li.disabled { cursor: not-allowed; } /*product-detail-top*/ .product-detail-effect { width: 50%; } @media (max-width: 768px) { .product-detail-effect { width: 100%; } } .product-detail-effect .zoom-left { width: 100%; } .product-detail-effect .zoom-left .big-img { background: #fff; /* border: 6px solid whitesmoke; -webkit-box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.24); box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.24);*/ } @media (max-width: 1200px) { .product-detail-effect .zoom-left .big-img #showbox { height: 300px !important; } } @media (max-width: 768px) { .product-detail-effect .zoom-left .big-img #showbox { height: auto !important; } } .product-detail-effect .zoom-left .zoom-tab { margin-top: 15px; position: relative; } .product-detail-effect .zoom-left .zoom-tab .tab-list { width: 100%; overflow: hidden; padding: 0 28px; } .product-detail-effect .zoom-left .zoom-tab span { border: 1px solid #ddd; } .product-detail-effect .zoom-left .zoom-tab span.sel { border-color: #e2e2e2; } .product-detail-effect .zoom-left .zoom-tab a { display: block; background: #eee; text-align: center; line-height: 80px; border: 1px solid #ddd; width: 20px; position: absolute; top: 0; } .product-detail-effect .zoom-left .zoom-tab #showlast { left: 0; } .product-detail-effect .zoom-left .zoom-tab #shownext { right: 0; } .product-detail-effect #showbox span { background: url(../images/whitebg.png) repeat; } .product-detail-list { width: 45%; } @media (max-width: 768px) { .product-detail-list { width: 100%; margin-top: 20px; } } .product-detail-list h1 { font-size: 26px; color: #312f2f; line-height: 1.2; margin-bottom: 15px; font-weight: normal; } .product-detail-list .details { padding-bottom: 15px; font-size: 16px; color: #312f2f; line-height: 1.5; border-bottom: 1px solid #e2e2e2; margin-bottom: 15px; } .product-detail-list li { font-size: 15px; color: #666; line-height: 1.5; margin-bottom: 15px; } .red { color: red; } .product-detail-list li .add-cart { background: #ab0020; border-radius: 3px; padding: 0 20px; line-height: 35px; display: inline-block; font-size: 16px; color: #fff; -webkit-transition: all 0.2 ease; transition: all 0.2 ease; } .product-detail-list li .add-cart:hover { background: #bc334d; } .product-detail-list li.nums { border-top: 1px dotted #dcdcdc; margin-top: 15px; overflow: hidden; height: 60px; padding-top: 20px; } .product-detail-list li.nums label { display: block; float: left; width: 50px; line-height: 28px; letter-spacing: 4px; } .product-detail-list li.nums span { width: 26px; display: block; cursor: pointer; line-height: 26px; background: #f5f5f5; color: #222; border: 1px solid #cecece; text-align: center; font-weight: bold; font-size: 20px; float: left; position: relative; z-index: 2; } .product-detail-list li.nums .amount { position: relative; z-index: 1; display: block; background: #fff; color: #666; width: 58px; text-align: center; line-height: 28px; height: 28px; float: left; border: none; border-top: 1px solid #cecece; border-bottom: 1px solid #cecece; } .product-detail-list li.nums .amount-msg { color: red; padding-left: 10px; float: left; } .product-detail-list .Inquiry { background: #034399; border-radius: 3px; padding: 0 20px; line-height: 40px; display: inline-block; font-size: 16px; color: #fff; margin-top: 20px; } .product-detail-list .Inquiry:hover { background-color: #2ca0db; } .bdsharebuttonbox { display: inline-block; vertical-align: middle; } /*product-detail-tab*/ .product-detail-tab { margin-top: 40px; } .product-detail-tab .hd li { float: left; padding: 0 30px; font-size: 18px; color: #333; line-height: 50px; cursor: pointer; } .product-detail-tab .hd li.on, .product-detail-tab .hd li:hover { color: #333; background: #e2e2e2; } .product-detail-tab .bd { border: 1px solid #e2e2e2; padding: 20px 15px; } .product-detail-text { font-size: 16px; color: #312f2f; line-height: 1.8; } .product-detail-text img, .product-detail-text p img { max-width: 100%; } /*detail-message*/ .detail-message { margin: 40px 0; border-top: 1px solid #efefef; border-bottom: 1px solid #efefef; padding: 40px 0; } .detail-message .input-group { margin-bottom: 20px; line-height: 38px; } .w48 { width: 48%; } @media (max-width: 768px) { .w48 { width: 100%; } } .detail-message .input-group .msg-wrap { white-space: nowrap; line-height: 16px; font-size: 13px; position: relative; } .detail-message .input-group .msg-wrap .n-arrow { display: none; } .detail-message .input-group .msg-wrap b { display: none; } .detail-message .input-group .msg-wrap .n-icon { background-image: url(../images/validator_default.png); width: 16px; height: 14px; overflow: hidden; background-repeat: no-repeat; background-position: 0 0; display: inline-block; } .detail-message .input-group .msg-wrap .n-msg { color: #c33; } .detail-message .input-group label { display: inline-block; vertical-align: middle; width: 75px; font-size: 16px; color: #312f2f; } .detail-message .input-group label i { color: red; font-style: normal; margin-right: 8px; width: 8px; display: inline-block; } .detail-message .input-group .input-text { width: 100%; display: block; vertical-align: middle; height: 38px; font-size: 14px; padding-left: 10px; border: 1px solid #d2d2d2; } .detail-message .textarea-group label { display: inline-block; vertical-align: top; } .detail-message .textarea-group textarea.input-text { height: 150px; resize: none; } .detail-message .submit-btn { width: 120px; height: 38px; outline: none; border: none; background: #e2e2e2; color: #000; font-size: 16px; cursor: pointer; -webkit-transition: all .5s ease; transition: all .5s ease; } .detail-message .submit-btn:hover { background: #cbcbcb; } /* article-url */ .article-url { border-bottom: 1px dashed #e2e2e2; font-size: 16px; color: #a09f9f; line-height: 1; padding: 20px 0; } .article-url span{ font-size: 12px; font-family: 'Arial' } /*article-tags*/ .article-tags { padding: 20px 0; font-size: 14px; color: #a09f9f; line-height: 1.5; border-bottom: 1px dashed #e2e2e2; } .article-tags a { color: #a09f9f; display: inline-block; padding-right: 5px; } .article-tags a:not(:last-child):after { content: '|'; margin-left: 5px; } .article-tags a:hover { color: #d93900; } /*page-next-prev*/ .page-next-prev { margin-top: 20px; } .page-next-prev li { font-size: 14px; color: #312f2f; line-height: 2; } /*page-article*/ .page-article img, .page-article p img { max-width: 100% !important; height: auto !important; } /*message-wrap*/ .message-wrap.resume-form { display: block; } /*video-player-box*/ .video-player-box { margin: 20px 0; } .video-details-body > h3 { border-bottom: 1px solid #eee; line-height: 40px; margin-bottom: 10px; } /*download-file*/ .download-file { margin: 20px 0; text-align: center; } .download-file .download-icon .iconfont { font-size: 60px; } /* 相关 */ .related-product { margin-top: 40px; } .related-product .related-title { margin-bottom: 20px; } .related-product .related-title span { display: inline-block; padding: 0 15px; line-height: 40px; font-size: 18px; color: #ffffff; background: #d93900; } .relate-product-lists li a { height: 190px; } .relate-product-lists li .img { height: 155px; } .relate-product-lists li p { font-size: 14px; } .job-details-top { padding-bottom: 35px; border-bottom: 1px solid #efefef; } .job-details-top h1 { font-size: 24px; color: #312f2f; margin-bottom: 15px; } .job-details-top .info span { display: inline-block; vertical-align: middle; font-size: 14px; color: #6d6c6c; margin-right: 30px; } .job-details-body { padding-top: 20px; } .job-details-body h3 { font-size: 16px; color: #312f2f; margin: 20px 0 10px 0; } .job-details-body p { font-size: 14px; color: #312f2f; line-height: 1.7; } .job-details-body .download0-btn { font-size: 16px; color: #3d5bf6; } .job-details-body .submit-btn { display: block; margin: 10px auto 0 auto; width: 125px; line-height: 40px; text-align: center; background: #e2e2e2; font-size: 14px; color: #333; border-radius: 5px; } .job-details-body .submit-btn:hover { background: #cbcbcb; } .job-details-body .submit-btn.visible-wap { display: none; } @media (max-width: 768px) { .job-details-body .submit-btn.visible-wap { display: block; } } /*resume-form*/ .resume-form { padding: 20px 10px; text-align: left; display: none; } .resume-form .resume-title { border-bottom: 1px solid #efefef; margin-bottom: 20px; padding-bottom: 15px; } .resume-form .resume-title h2 { font-size: 20px; color: #302f2f; margin-bottom: 10px; } .resume-form .resume-title .info span { display: inline-block; vertical-align: middle; font-size: 14px; color: #6d6c6c; margin-right: 30px; } .resume-form .input-group { margin-bottom: 10px; } .resume-form .input-group .input-title { display: block; font-size: 14px; color: #6c6c6c; line-height: 30px; } .resume-form .input-group .input-title i { color: red; font-style: normal; } .resume-form .input-group .input-text { width: 100%; height: 34px; border: 1px solid #cbcbcb; padding-left: 10px; font-size: 12px; color: #6c6c6c; } .resume-form .input-group textarea.input-text { height: 120px; resize: none; padding-top: 5px; } .resume-form .radio-group { margin-bottom: 10px; line-height: 30px; } .resume-form .radio-group .input-title { font-size: 14px; color: #6c6c6c; } .resume-form .radio-group .radio-style { display: inline-block; position: relative; font-size: 14px; color: #6c6c6c; margin-right: 20px; cursor: pointer; } .resume-form .radio-group .radio-style input[type="radio"] { position: absolute; opacity: 0; } .resume-form .radio-group .radio-style i { display: inline-block; vertical-align: middle; margin-right: 5px; width: 15px; height: 15px; border: 1px solid #cacaca; border-radius: 50%; } .resume-form .radio-group .radio-style input[type="radio"]:checked + i { position: relative; border-color: #2c8ee9; } .resume-form .radio-group .radio-style input[type="radio"]:checked + i:after { content: ''; position: absolute; left: 2px; top: 2px; width: 9px; height: 9px; background: #2c8ee9; border-radius: 50%; } .resume-form .upload-group { margin-bottom: 10px; font-size: 14px; color: #6c6c6c; } .resume-form .upload-group i { font-style: normal; } .resume-form .input-btn { display: block; margin: 0 auto; width: 100%; line-height: 42px; border-radius: 5px; background: #034399; color: #fff; font-size: 16px; text-align: center; outline: none; border: none; cursor: pointer; } .resume-form .select-group { margin: 0 -1% 10px -1%; } .resume-form .select-group .input-text { height: 34px; border: 1px solid #cbcbcb; padding-left: 10px; font-size: 12px; color: #6c6c6c; } .resume-form .select-group select { width: 31.3333%; margin: 0 1%; float: left; } @media (max-width: 768px) { .layui-layer { width: 90% !important; left: 5% !important; } } .page-job-wrap .job-lists { width: 100%; border: 1px solid #d2d2d2; border-bottom: 0; margin-bottom: 40px; } .page-job-wrap .job-lists thead th { background: #f6f6f6; border-bottom: 1px solid #d2d2d2; font-size: 16px; color: #312f2f; line-height: 50px; font-weight: normal; } .page-job-wrap .job-lists tbody td { font-size: 14px; line-height: 20px; padding: 10px 0; color: #312f2f; border-bottom: 1px solid #d2d2d2; text-align: center; } .page-job-wrap .job-lists tbody td a { color: #e2e2e2; } .page-job-wrap .job-lists tbody td a:hover { text-decoration: underline; color: #d93900; } .page-job-wrap .job-lists tbody tr:hover { background: #f6f6f6; } .search-form { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 500px; border-radius: 30px; background-color: #fff; margin-bottom: 0.24rem; padding: 15px 0; border: 1px solid #e2e2e2; } @media (max-width: 768px) { .search-form { width: 100%; } } .search-form input { padding: 0 0.4rem; border: none; font-size: 16px; background-color: transparent; } .search-form .input-text { width: 100%; height: 20px; border-right: 1px solid #ddd; } .search-form .input-submit { padding-right: 0.3rem; padding-left: 0.35rem; -ms-flex-negative: 0; flex-shrink: 0; color: #d93900; } .search-menu { text-align: center; border: 1px solid #ececec; font-size: 0; margin-bottom: 20px; } .search-menu li { display: inline-block; width: 16.6666666%; text-align: center; font-size: 14px; color: #333; padding: 5px 0; line-height: 30px; } .search-menu li.on { color: #d93900; } .search-list { margin-bottom: 20px; } .search-list li { line-height: 35px; border-bottom: 1px dotted #ececec; position: relative; font-size: 14px; color: #333; } .search-list li a { display: block; padding-right: 160px; } .search-list li span { position: absolute; right: 0; font-size: 12px; } .search-img-list { margin: 0 -1% 20px -1%; } .search-img-list li { width: 31.33333%; margin: 0 1% 20px 1%; float: left; } @media (max-width: 768px) { .search-img-list li { width: 48%; } } .search-img-list li .img { text-align: center; display: block; width: 100%; height: 200px; border: 1px solid #ececec; } .search-img-list li .img img { max-width: 100%; max-height: 100%; vertical-align: middle; } .search-img-list li .img:after { content: ''; height: 100%; display: inline-block; vertical-align: middle; } .search-img-list li h3 { text-align: center; font-size: 16px; color: #333; font-weight: normal; line-height: 2.5; } .search-img-list li:hover .img { border-color: #e2e2e2; } .search-img-list li:hover h3 { color: #d93900; } .page-news-wrap { padding-top: 30px; } .page-news-list li { padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px dashed #e7e7e7; padding-right: 120px; position: relative; } @media (max-width: 768px) { .page-news-list li { padding-right: 0; } } .page-news-list li h3 { font-weight: normal; font-size: 16px; color: #312f2f; margin-bottom: 10px; } .page-news-list li .date { font-size: 12px; color: #717171; margin-bottom: 15px; } .page-news-list li .info { font-size: 12px; line-height: 2; color: #717171; } .page-news-list li .more { position: absolute; right: 0; width: 100px; height: 32px; text-align: center; line-height: 32px; border: 1px solid #eee; color: #666; font-size: 13px; margin-top: -16px; top: 50%; } @media (max-width: 768px) { .page-news-list li .more { position: relative; display: block; left: 0; top: 0; margin-top: 0; } } .page-news-list li:hover h3 { color: #034399; } .page-news-details { padding: 30px 0; } .page-news-details .job-details-top { padding-bottom: 20px; } .page-news-details .job-details-top h1 { text-align: center; } .page-news-details .job-details-top .info { text-align: center; } .page-video-list { margin: 0 -1%; } .page-video-list li { float: left; width: 31.33333%; margin: 0 1% 20px 1%; } .page-video-list li .img { text-align: center; display: block; width: 100%; height: 220px; border: 1px solid #eee; padding: 1px; } .page-video-list li .img img { max-width: 100%; max-height: 100%; vertical-align: middle; } .page-video-list li .img:after { content: ''; height: 100%; display: inline-block; vertical-align: middle; } .page-video-list li h3 { text-align: center; line-height: 30px; font-size: 14px; color: #333; font-weight: normal; } .page-video-list li:hover .img { border-color: #e2e2e2; } .page-video-list li:hover h3 { color: #e2e2e2; } .page-down-wrap { margin-bottom: 40px; } .page-down-list li { position: relative; padding-right: 100px; line-height: 40px; border-bottom: 1px dashed #eee; } .page-down-list li a { display: block; color: #333; padding-left: 15px; } .page-down-list li a:before { content: ''; width: 0; height: 0; line-height: 0; font-size: 0; overflow: hidden; border-width: 4px; cursor: pointer; border-style: solid dashed dashed dashed; border-color: #666 transparent transparent transparent; border-bottom: none; position: absolute; margin-left: -15px; margin-top: 18px; } .page-down-list li span { position: absolute; right: 0; color: #999; font-size: 12px; } .page-down-list li:hover a { color: #d93900; } .page-down-list li:hover a:before { border-top-color: #e2e2e2; } /*custom-crumbs*/ .custom-crumbs { background: #f6f6f6; padding: 30px 0; line-height: 30px; font-size: 16px; color: #312f2f; } .custom-crumbs i { color: #333; margin-right: 8px; } .custom-crumbs a { color: #312f2f; } .custom-crumbs a:hover { color: #034399; text-decoration: underline; } /*tags-list*/ .tags-list { padding: 20px 0; } .tags-list .container { border: 1px solid #eee; padding: 20px 20px 10px 20px; } .tags-list a { background-color: #f2f2f2; color: #666; padding: 5px 8px; text-decoration: none; margin-right: 5px; margin-bottom: 10px; display: inline-block; } .tags-list a:hover { background-color: #ddd; } /*custom-wrap*/ .custom-wrap { padding-bottom: 40px; } .tag-menu li { width: 20%; float: left; padding: 25px 0; } .tag-menu li a { display: block; text-align: center; color: #312f2f; font-size: 16px; } .tag-menu li a:hover, .tag-menu li a.on { color: #d93900; } .tag-menu li:not(:last-child) a { border-right: 1px solid #eee; } .tag-about { font-size: 14px; color: #6a6969; padding: 15px; border: 1px solid #eee; margin-bottom: 20px; } .tag-sort { font-size: 16px; color: #312f2f; margin-bottom: 20px; } .tag-sort a { display: inline-block; border: 1px solid #eee; border-radius: 5px; font-size: 14px; color: #717171; padding: 5px 20px; margin-right: 20px; } .tag-sort a:hover, .tag-sort a.on { background: #e2e2e2; color: #fff; border-color: #e2e2e2; } .tag-list { margin-bottom: 20px; } .tag-list .change-layout { padding: 10px 0; border-bottom: 1px solid #dfdfdf; font-size: 16px; color: #312f2f; line-height: 20px; margin-bottom: 35px; } .tag-list .change-layout .iconfont { display: inline-block; vertical-align: -1px; color: #8c8c8c; margin-left: 20px; cursor: pointer; } .tag-list .change-layout .iconfont.on { color: #fd7216; } .tag-list .change-layout .layout-a { font-size: 18px; vertical-align: -2px; } .tag-list .tag-image-text-list li { padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px dashed #e7e7e7; } .tag-list .tag-image-text-list li .img-text { float: left; margin-right: 40px; width: 283px; } @media (max-width: 768px) { .tag-list .tag-image-text-list li .img-text { width: 100%; } } .tag-list .tag-image-text-list li .img-text h3 { display: none; } .tag-list .tag-image-text-list li .img-text a { display: block; position: relative; -webkit-box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.24); box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.24); } .tag-list .tag-image-text-list li .img-text a:before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; top: 0; border: 6px solid whitesmoke; -webkit-transition: border .5s ease; transition: border .5s ease; } .tag-list .tag-image-text-list li .img-text a .img { text-align: center; display: block; width: 100%; height: 262px; } .tag-list .tag-image-text-list li .img-text a .img img { max-width: 100%; max-height: 100%; vertical-align: middle; } .tag-list .tag-image-text-list li .img-text a .img:after { content: ''; height: 100%; display: inline-block; vertical-align: middle; } .tag-list .tag-image-text-list li .wz { overflow: hidden; } @media (max-width: 768px) { .tag-list .tag-image-text-list li .wz { width: 100%; } } .tag-list .tag-image-text-list li .wz h3 { font-size: 22px; color: #3f3f3f; padding: 25px 0; font-weight: normal; } @media (max-width: 768px) { .tag-list .tag-image-text-list li .wz h3 { font-size: 20px; } } .tag-list .tag-image-text-list li .wz .wz-info { font-size: 0; margin-bottom: 10px; } .tag-list .tag-image-text-list li .wz .wz-info p { width: 50%; display: inline-block; vertical-align: middle; font-size: 16px; color: #717171; margin-bottom: 15px; } @media (max-width: 768px) { .tag-list .tag-image-text-list li .wz .wz-info p { font-size: 14px; } } .tag-list .tag-image-text-list li .wz .wz-info p.date { width: 100%; } .tag-list .tag-image-text-list li .wz .btn-g { text-align: left; } .tag-list .tag-image-text-list li .wz .btn-g a { display: inline-block; width: 144px; text-align: center; line-height: 42px; margin-right: 24px; color: #fff; font-size: 16px; border-radius: 5px; } @media (max-width: 768px) { .tag-list .tag-image-text-list li .wz .btn-g a { width: 110px; line-height: 35px; margin-right: 10px; font-size: 14px; } } .tag-list .tag-image-text-list li .wz .btn-g .send-query { background: #fd7216; } .tag-list .tag-image-text-list li .wz .btn-g .see-more { background: #d93900; margin-right: 0; } .tag-list .tag-image-text-list li:hover .img-text a:before { border: 1px solid #d93900; } .tag-list .tag-image-list { margin: 0 -10px; } .tag-list .tag-image-list li { width: 285px; margin: 0 10px 20px 10px; float: left; border-bottom: none; padding: 0; } .tag-list .tag-image-list li .img-text { width: 100%; float: none; margin-right: 0; } .tag-list .tag-image-list li .img-text h3 { display: block; text-align: center; font-size: 16px; color: #333; font-weight: normal; padding-bottom: 10px; line-height: 2; } .tag-list .tag-image-list li .wz { display: none; } .tag-list .tag-line-list li { line-height: 35px; border-bottom: 1px dotted #ececec; position: relative; font-size: 14px; color: #333; } .tag-list .tag-line-list li a { display: block; padding-right: 160px; } .tag-list .tag-line-list li a:before { content: ''; width: 0; height: 0; line-height: 0; font-size: 0; overflow: hidden; border-width: 4px; cursor: pointer; border-style: dashed dashed dashed solid; border-color: transparent transparent transparent #ccc; border-right: none; display: inline-block; vertical-align: middle; margin-right: 5px; } .tag-list .tag-line-list li span { position: absolute; right: 0; font-size: 12px; } .tag-list .tag-line-list li:hover a:before { border-left-color: #e2e2e2; color: #e2e2e2; } .tag-relate > h4 { padding-bottom: 10px; font-weight: normal; border-bottom: 1px solid #eee; font-size: 16px; color: #333; margin-bottom: 20px; } .slide-bar { position: fixed; z-index: 99; right: 5px; top: 40%; } .slide-bar li { position: relative; cursor: pointer; } .slide-bar li .icon { display: block; width: 60px; height: 60px; border-radius: 5px; border: 1px solid #eeeeee; background: #fff; margin-bottom: 5px; -webkit-box-shadow: 0px 0px 6.3px 0.7px rgba(0, 0, 0, 0.05); box-shadow: 0px 0px 6.3px 0.7px rgba(0, 0, 0, 0.05); text-align: center; line-height: 60px; } .slide-bar li a { display: block; } .slide-bar li .cart-num { width: 15px; height: 15px; background: #f21f3d; text-align: center; line-height: 15px; border-radius: 50%; color: #fff; font-size: 12px; position: absolute; font-style: normal; margin: 3px 0 0 -10px; } .slide-bar li .iconfont { font-size: 26px; color: #333; } .slide-bar li .text { position: absolute; right: 80px; top: 0; border: 1px solid #e4e7e5; -webkit-box-shadow: 0 0 6.3px 0.7px rgba(0, 0, 0, 0.05); box-shadow: 0 0 6.3px 0.7px rgba(0, 0, 0, 0.05); padding: 8px 15px; border-radius: 5px; -webkit-transition: all .5s ease; transition: all .5s ease; opacity: 0; visibility: hidden; -webkit-transform: translateX(50px); transform: translateX(50px); background: #fff; width: 150px; text-align: center; } .slide-bar li .text:after { content: url(../images/right-arrow.png); position: absolute; right: -16px; top: 10px; } .slide-bar li .QR-code { padding: 5px; } .slide-bar li .QR-code img { width: 120px; height: 120px; } .slide-bar li:hover .icon { background: #d93900; border-color: #d93900; } .slide-bar li:hover .iconfont { color: #fff; } .slide-bar li:hover .text { opacity: 1; visibility: visible; -webkit-transform: translateX(0); transform: translateX(0); } .site-map-wrap { padding: 20px 0; } /* 一级分类 */ .site-map-list > li { padding-bottom: 10px; } .site-map-list > li > a { display: block; padding-left: 15px; font-weight: bold; color: #000; font-size: 16px; background: #f6f6f6; line-height: 45px; margin-bottom: 10px; } .site-map-list .site-map-about { font-size: 14px; line-height: 2.35; color: #6c6a6a; padding: 10px; } .site-map-list .site-tag > a { display: inline-block; padding: 5px 17px; border: 1px solid #eeeeee; border-radius: 3px; font-size: 14px; color: #717171; margin: 15px 10px 0 10px; } .site-map-list .site-tag > a:hover { border-color: #d93900; color: #d93900; } /* 二级分类 */ .site-sub-menu > li { margin-bottom: 15px; position: relative; } .site-sub-menu > li > a { font-size: 15px; color: #000000; line-height: 35px; display: inline-block; padding: 0 15px; background: #fff; } .site-sub-menu > li > a:hover { color: #d93900; } .site-sub-menu > li:after { content: ''; position: absolute; left: 0; right: 0; top: 18px; border-bottom: 2px dashed #eaefeb; z-index: -1; } /* 三级分类 */ .site-child-menu { padding-left: 40px; } .site-child-menu > li { display: block; border-bottom: 1px dashed #eee; padding: 10px 0 10px 30px; } .site-child-menu > li:before { content: '\221F'; position: absolute; margin-left: -30px; } .site-child-menu > li > a { display: block; font-size: 14px; color: #717171; margin-right: 20px; line-height: 30px; } .site-child-menu > li > a:hover { color: #fd7216; } /* 四级分类 */ .next-site-menu > a { display: inline-block; margin-right: 20px; line-height: 30px; font-size: 14px; color: #999; } .next-site-menu > a:before { content: ''; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: #bfbebe; vertical-align: middle; margin-right: 5px; } .next-site-menu > a:hover { color: #fd7216; } .next-site-menu > a:hover:before { background: #fd7216; } /*手机端底部*/ .mobile-foot { padding-top: 5px; position: fixed; z-index: 999; left: 0; right: 0; bottom: 0; background: #eee; display: none; } .mobile-foot .foot-icon { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; -ms-flex-wrap: nowrap; flex-wrap: nowrap; text-align: center; } .mobile-foot .foot-icon i { font-size: 20px; color: #323232; display: block; line-height: 30px; } .mobile-foot .foot-icon p { font-size: 14px; color: #323232; } /*手机端头部*/ .mobile-head { position: fixed; top: 0; z-index: 999999; left: 0; right: 0; background: #fff; display: none; } .mobile-head-box { position: relative; height: 66px; box-shadow: 2px 0px 10px rgba(0,0,0,0.2); padding: 0 15px; z-index: 9; background: #fff; } .mobile-head-box .mobile-logo { float: left; margin: 15px auto auto auto; height: 40px; } .mobile-head-box .mobile-logo h1, .mobile-head-box .mobile-logo a { display: inline; font-size: 0; } .mobile-head-box .mobile-logo img { height: 40px; } .mobile-navbtn { float: right; margin: 25px auto auto auto; width: 30px; height: 20px; } .mobile-navbtn span, .mobile-navbtn:after, .mobile-navbtn:before { display: block; height: 2px; width: 100%; background: #666; } .mobile-navbtn span { margin: 7px 0; } .mobile-navbtn:after, .mobile-navbtn:before { content: ''; -webkit-transform-origin: 7.5%; transform-origin: 7.5%; } .mobile-navbtn.clicked span { -webkit-transform: translateX(-100%); transform: translateX(-100%); opacity: 0; } .mobile-navbtn.clicked:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .mobile-navbtn.clicked:before { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .mobile-search-btn { position: absolute; z-index: 9; right: 55px; top: 0; bottom: 0; width: 14%; text-align: center; line-height: 66px; } .mobile-search-btn .icon-search { font-size: 24px; color: #000; } .mobile-menu { width: 100%; position: fixed; left: 100%; top: 66px; bottom: 0; padding: 0 15px; background-color: #f8f8f8; -webkit-transition: all 0.5s; transition: all 0.5s; overflow: hidden; padding-bottom: 48px; } .mobile-menu.active { left: 0; } .mobile-menu .mobile-menu-box { height: 100vh; overflow: auto; padding: 15px 0 80px 0; } .mobile-nav > li { border-bottom: 1px solid #d4d4d4; position: relative; } .mobile-nav > li > a { display: block; line-height: 50px; font-size: 14px; color: #333; font-weight: bold; } .mobile-nav .mobile-menu-jt { position: absolute; width: 8%; height: 50px; line-height: 50px; right: 0; top: 0; text-align: center; z-index: 9; } .mobile-nav .mobile-menu-jt i { color: #333; font-weight: bold; font-size: 20px; } .mobile-nav .mobile-menu-jt i.icon-down { display: none; } .mobile-nav .mobile-menu-jt.clicked i.icon-down { display: block; } .mobile-nav .mobile-menu-jt.clicked i.icon-jinrujiantou1 { display: none; } .mobile-nav .mobile-sub-menu { display: none; } .mobile-nav .mobile-sub-menu > li { border-top: 1px solid #d4d4d4; } .mobile-nav .mobile-sub-menu > li > a { display: block; font-size: 14px; color: #666; line-height: 40px; text-indent: 1em; } .mobile-dlbtn { margin-top: 40px; } .mobile-dlbtn a { text-align: center; display: block; width: 100%; height: 40px; line-height: 40px; background: #FFB300; color: #333; font-size: 16px; border-radius: 5px; } .mobile-dlbtn a i { display: inline-block; vertical-align: middle; width: 30px; height: 30px; margin-right: 5px; } .mobile-dlbtn a .icon-dl:after { background-position: -30px -540px; } .mobile-dlbtn a .icon-pn:after { background-position: -30px -600px; } .mobile-dlbtn a .icon-tc:after { background-position: -30px -570px; } .mobile-dlbtn .zx-btn { margin-top: 10px; background: none; border: 1px solid #fff; } .mobile-search { position: fixed; z-index: 99999; left: 100%; bottom: 0; top: 0; width: 100%; background: #fff; padding: 15px 5% 0 5%; -webkit-transition: all .5s; transition: all .5s; } .mobile-search .mobile-search-close-btn { position: absolute; top: 25px; right: 15px; width: 8%; height: 30px; text-align: center; line-height: 30px; } .mobile-search .search-keyword { position: absolute; background-color: #f8f8f8; left: 0; right: 0; bottom: 0; top: 76px; overflow-y: auto; border-top: 1px solid #d4d4d4; } .mobile-search .search-keyword .search-keyword-title { margin: 0 15px; margin-top: 20px; border-bottom: 1px solid #d4d4d4; padding-bottom: 10px; } .mobile-search .search-keyword ul { padding: 15px; padding-top: 0; } .mobile-search .search-keyword li { border-bottom: 1px solid #d4d4d4; } .mobile-search .search-keyword li a { color: #333; line-height: 44px; font-weight: bold; font-size: 13px; } .mobile-search .mobile-search-close-btn i { width: 100%; height: 100%; display: block; font-size: 30px; } .mobile-search .mobile-search-close-btn i:after { background-position: -30px -300px; } .mobile-search .mobile-search-box { } .mobile-search .mobile-search-box form { width: 90%; position: relative; } .mobile-search .mobile-search-box input[type="text"] { width: 100%; height: 48px; border: 1px solid #d4d4d4; line-height: 48px; padding-left: 20px; outline: none; font-size: 16px; padding-right: 50px; background-color: #fff; } .mobile-search .mobile-search-box #s_btn { width: 10%; height: 48px; outline: none; cursor: pointer; font-size: 0; background: none; border: none; position: absolute; top: 0; right: 10px; } .mobile-search .mobile-search-box .icon-search { font-size: 24px; } .mobile-search .mobile-seaerch-wz span, .mobile-search .mobile-seaerch-wz a { display: block; font-size: 14px; color: rgba(255, 255, 255, 0.9); line-height: 45px; border-bottom: 1px solid #2b2b2b; } .mobile-search.clicked { left: 0; } .mobile-cate { position: fixed; right: 15px; bottom: 40%; z-index: 8; } .mobile-cate li { width: 40px; height: 40px; line-height: 40px; text-align: center; margin-bottom: 1px; cursor: pointer; position: relative; } .mobile-cate li:before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; top: 0; background: #000; opacity: .7; } .mobile-cate li i { display: block; width: 100%; height: 100%; color: #fff; font-size: 22px; position: relative; } .page-left-close { position: absolute; top: -12px; right: -12px; } .page-left-close i { display: block; width: 30px; height: 30px; color: #fff; border: 1px solid #000; border-radius: 30px; text-align: center; line-height: 30px; font-size: 20px; background: #000; } .custom-wrap .about-content { padding: 2rem 0 3rem 0; } .about-box1 { display: flex; justify-content: space-between; } .about-box1 .count-list { width: 49.6%; background: #ededed; display: block; padding: 8vh 0 0.4rem; box-shadow: 0 0 20px rgba(0, 0, 0, .06); } .about-box1 .count-list li { float: left; width: 50%; padding: 2rem 0; position: relative; text-align: center; } .about-box1 .count-list li:before { position: absolute; left: 20%; bottom: 0; width: 60%; height: 1px; content: ""; background: #dfdfdf; } .about-box1 .count-list li:nth-child(2n):after { position: absolute; left: 0; top: 25%; width: 1px; height: 50%; content: ""; background: #dfdfdf; } .about-box1 .count-list li:nth-child(n+3):before { background-color: rgba(255, 255, 255, .01); } .about-box1 .count-list li span { color: #666; font-size: 18px; line-height: 1; } .about-box1 .count-list li .timer { color: #034399; font-size: 72px; font-family: arial; font-weight: bold; padding-right: 5px; } .about-box1 .count-list li p { display: inline-block; color: #666; font-size: 14px; vertical-align: top; text-align: center; margin-top: 1rem; } .about-box1 .box1-img { width: 49.6%; } .about-box1 .box1-img img { max-width: 100%; } .about-box2 { padding: 9vh 0 10vh; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .about-box2 .box2-left { width: 45.4%; } .about-box2 .box2-left h2 { color: #333; font: 600 36px/52px "Microsoft yahei"; } .about-box2 .box2-left .txt { color: #666; font-size: 16px; line-height: 2.625; margin-top: 2vw; } .about-box2 .box2-right { width: 48%; padding: 9vh 4.2%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; position: relative; } .about-box2 .box2-right .server-tel { width: 65%; } .about-box2 .box2-right .server-tel .title { color: #000; font-size: 22px; line-height: 1.5; } .about-box2 .box2-right .server-tel .tel { color: #000; font-size: 38px; line-height: 1.5; font-weight: bold; font-family: arial; } .about-box2 .box2-right .server-tel span { display: inline-block; width: 200px; color: #fff; font-size: 18px; line-height: 48px; background: #034399; border-radius: 5px; text-align: center; vertical-align: top; margin-top: 4vh; box-shadow: 0 0 20px rgba(27, 57, 183, .3); } .about-box2 .box2-right .server-code { width: 30.7%; } .about-box2 .box2-right .server-code img { max-width: 100%; height: auto; } .about-box3 { background: url(http://cdn.qsyseo.top/public/images/network.jpeg) no-repeat 50% 0; padding: 6.5vh 0 6vh; } .about-box3 .container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .about-box3 .box3-left { width: 60.07%; display: flex; align-items: center; } .about-box3 .box3-left img { max-width: 100%; } .about-box3 .box3-right { width: 35%; } .about-box3 .box3-right h2 { color: #333; font: 600 36px/52px "Microsoft yahei"; } .about-box3 .box3-right .txt { color: #666; font-size: 16px; line-height: 2; margin: 1vw 0 3.8vw; } .about-box3 .box3-right .net-list li { width: 336px; color: #fff; font-size: 24px; line-height: 3.66; font-weight: bold; text-align: center; cursor: pointer; background: #034399; position: relative; } .about-box3 .box3-right .net-list li:after { position: absolute; left: 0; top: 50%; margin-top: -15px; content: ""; width: 0; height: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 15px solid #fff; } .contact-box1 { margin-bottom: 30px; } .contact-box1 .resume-form { padding: 20px 0; } .contact-box1 .title { font-size: 35px; font-weight: 600; font-stretch: normal; line-height: 60px; letter-spacing: 0px; color: #333333; } .contact-box1 .summary { font-size: 16px; font-weight: normal; font-stretch: normal; line-height: 40px; letter-spacing: 0px; color: #666666; } .contact-box2 { padding: 0 20px; background-color: #fafafa; } .contact-box2 table { width: 100%; } .contact-box2 table tr td:first-child { width: 45% !important; } .contact-box2 table tr td .ueditor_baidumap { width: 100%; } @media (max-width: 1200px) { .about-box1 .count-list { padding-top: 3vh; } .about-box3 .box3-left { width: 50%; } .about-box2 .box2-right { padding: 20px; } } @media (min-width: 768px) { .mobile-cate { display: none } .page-left-close { display: none; } } @media (max-width: 768px) { body { padding: 66px 0; } .hidden-xs { display: none !important; } .visible-xs { display: block !important; } .page-wrap-left { position: fixed; width: 100vw; overflow-y: scroll; top: 66px; left: 100%; -webkit-transition: all .5s ease; transition: all .5s ease; z-index: 9; height: 100vh; background: rgba(0, 0, 0, 0.7); } .page-wrap-left.active { left: 0; } .page-left { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-height: 90vh; padding: 4vh 0 14vh 0; width: 78vw !important; margin-left: 22vw; background: #fff; position: relative; z-index: 999; } .page-left-box { width: 95%; background: #fff; position: relative; } body.no-scroll, html.no-scroll { height: 100vh; overflow: hidden; } .page-sort { height: auto; background: no-repeat; margin-bottom: 0; } .page-about-title { display: block; } .page-sort > li { width: 100% !important; margin-bottom: 2px; position: relative; padding: 0 16px; background: #ececeb; height: 58px; text-align: left; border-right: none; } .page-sort > li > a:hover,.page-sort > li > a.active { background: none; color: #034399; } .bread-crumbs { display: none; } .slide-bar { display: none; } .about-box1, .about-box2 { display: block; } .about-box1 .count-list, .about-box1 .box1-img, .about-box2 .box2-left, .about-box2 .box2-right { width: 100%; } .about-box1 .count-list { padding-top: 0; } .about-box2 { padding: 20px 0; } .about-box1 .count-list li .timer { font-size: 32px; } .about-box2 .box2-left h2 { font-size: 32px; } .about-box2 .box2-right { padding: 20px 0; } .about-box2 .box2-right .server-tel .title { font-size: 18px; } .about-box2 .box2-right .server-tel .tel { font-size: 24px; } .about-box2 .box2-right .server-tel span { font-size: 16px; width: 160px; } .contact-box2 table tr td:first-child { width: 100% !important; } } .thumb-item .owl-carousel { position: relative; } .thumb-item .owl-carousel .owl-nav button.owl-prev, .thumb-item .owl-carousel .owl-nav button.owl-next { outline: none; position: absolute; top: 0; z-index: 9999; height: 90px; width: 20px; background: #eee; line-height: 90px; border: 1px solid #ddd; } .thumb-item .owl-carousel .owl-nav button.owl-prev { left: -25px; } .thumb-item .owl-carousel .owl-nav button.owl-next { right: -25px; }