/*--公共部分--*/ .fadeInUp{opacity:0;} html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; cursor: pointer; } body, form, img, ul, ol, li, dl, dt, dd, p, tr, td, strong, span, pre { margin: 0; padding: 0; border: 0; } h1, h2, h3, h4, h5, h6, p { margin: 0; padding: 0; font-weight: normal; } @font-face { font-family: Rubik; src: url("../sass/RUBIK-REGULAR.OTF"); font-family: siyuan; src: url("../css/SourceHanSansCN-Regular.otf"); } body, button, input, select, textarea { font: 14px/1.5 'siyuan','Microsoft YaHei', 'Hiragino Sans GB', sans-serif,Arial; color: #fff; } /* ul, li { list-style: none; } */ img { border: 0px; vertical-align: middle; } table { border-collapse: collapse; border-spacing: 0; } table th, table td { border: 1px solid #ccc; } *, :after, :before { -webkit-box-sizing: border-box; box-sizing: border-box; background-repeat: no-repeat; } article, aside, footer, header, nav, section { display: block; } a { background-color: transparent; -webkit-text-decoration-skip: objects; text-decoration: none; color: #333; outline: none; cursor: pointer; } a:hover { background-repeat: no-repeat; text-decoration: none; } a, input[type="button"], button, label, input[type="submit"], input[type="reset"] { cursor: pointer; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } audio, video { display: inline-block; } [type="checkbox"], [type="radio"] { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; } input, textarea, select { outline: none; } input[type="text"], input[type="password"], input[type="button"], input[type="submit"], input[type="reset"], select, textarea { outline-style: none; -webkit-appearance: none; resize: none; border: none; -webkit-border-radius: 0; border-radius: 0; } textarea { overflow: auto; vertical-align: top; } input:-webkit-autofill { -webkit-box-shadow: 0 0 0px rgba(255, 255, 255, 0) inset !important; } .bd_weixin_popup, .content-box { -webkit-box-sizing: content-box; box-sizing: content-box; } .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clearfix { *zoom: 1; } .clear { clear: both; line-height: 0; height: 0; font-size: 0; } .fl { float: left; } .fr { float: right; } .show { display: block !important; } .hide { display: none !important; } .commonweb { padding: 0px 10px; } .commonwebbox { margin-left: 0px; margin-right: 0px; } .commonleft { float: none; } .commonright { float: none; } .visible-sm, .visible-md, .visible-lg { display: none; } .hidden-sm, .hidden-md, .hidden-lg { display: block; } .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { float: left; padding-left: 10px; padding-right: 10px; } .col-xs-12 { width: 100%; } .col-xs-11 { width: 91.66666667%; } .col-xs-10 { width: 83.33333333%; } .col-xs-9 { width: 75%; } .col-xs-8 { width: 66.66666667%; } .col-xs-7 { width: 58.33333333%; } .col-xs-6 { width: 50%; } .col-xs-5 { width: 41.66666667%; } .col-xs-4 { width: 33.33333333%; } .col-xs-3 { width: 25%; } .col-xs-2 { width: 16.66666667%; } .col-xs-1 { width: 8.33333333%; } @media (max-width: 320px) { body { min-width: 320px; } } @media (min-width: 768px) { .commonweb { padding: 0px 20px; } .commonwebbox { margin-left: -10px; margin-right: -10px; } .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { float: left; padding-left: 10px; padding-right: 10px; } .col-sm-12 { width: 100%; } .col-sm-11 { width: 91.66666667%; } .col-sm-10 { width: 83.33333333%; } .col-sm-9 { width: 75%; } .col-sm-8 { width: 66.66666667%; } .col-sm-7 { width: 58.33333333%; } .col-sm-6 { width: 50%; } .col-sm-5 { width: 41.66666667%; } .col-sm-4 { width: 33.33333333%; } .col-sm-3 { width: 25%; } .col-sm-2 { width: 16.66666667%; } .col-sm-1 { width: 8.33333333%; } .visible-sm { display: block; } .hidden-sm { display: none; } .commonweb { margin: 0px auto; max-width: 750px; } } @media (min-width: 992px) { .commonweb { padding: 0px 10px; } .commonwebbox { margin-left: -10px; margin-right: -10px; } .commonleft { float: left; } .commonright { float: right; } .visible-md { display: block; } .hidden-md { display: none; } .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { float: left; padding-left: 10px; padding-right: 10px; } .col-md-12 { width: 100%; } .col-md-11 { width: 91.66666667%; } .col-md-10 { width: 83.33333333%; } .col-md-9 { width: 75%; } .col-md-8 { width: 66.66666667%; } .col-md-7 { width: 58.33333333%; } .col-md-6 { width: 50%; } .col-md-5 { width: 41.66666667%; } .col-md-4 { width: 33.33333333%; } .col-md-3 { width: 25%; } .col-md-2 { width: 16.66666667%; } .col-md-1 { width: 8.33333333%; } .commonweb { max-width: 970px; } } @media (min-width: 1260px) { html { cursor: default; } .commonleft { float: left; } .commonright { float: right; } .visible-lg { display: block; } .hidden-lg { display: none; } .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { float: left; padding-left: 10px; padding-right: 10px; } .col-lg-12 { width: 100%; } .col-lg-11 { width: 91.66666667%; } .col-lg-10 { width: 83.33333333%; } .col-lg-9 { width: 75%; } .col-lg-8 { width: 66.66666667%; } .col-lg-7 { width: 58.33333333%; } .col-lg-6 { width: 50%; } .col-lg-5 { width: 41.66666667%; } .col-lg-4 { width: 33.33333333%; } .col-lg-3 { width: 25%; } .col-lg-2 { width: 16.66666667%; } .col-lg-1 { width: 8.33333333%; } } @media (min-width: 1260px) { .commonweb { max-width: 1220px; } } /* layout start*/ .swiper-container { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; z-index: 1; } .swiper-container-no-flexbox .swiper-slide { float: left; } .swiper-container-vertical > .swiper-wrapper { -webkit-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; transition-property: transform,-webkit-transform; -webkit-box-sizing: content-box; box-sizing: content-box; } .swiper-container-android .swiper-slide, .swiper-wrapper { -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .swiper-container-multirow > .swiper-wrapper { -webkit-box-lines: multiple; -moz-box-lines: multiple; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; } .swiper-container-free-mode > .swiper-wrapper { -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; margin: 0 auto; } .swiper-slide { -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; -ms-flex-negative: 0; flex-shrink: 0; width: 100%; height: 100%; position: relative; } .swiper-container-autoheight, .swiper-container-autoheight .swiper-slide { height: auto; } .swiper-container-autoheight .swiper-wrapper { -webkit-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; -webkit-transition-property: -webkit-transform,height; -webkit-transition-property: height,-webkit-transform; transition-property: height,-webkit-transform; transition-property: transform,height; transition-property: transform,height,-webkit-transform; } .swiper-container .swiper-notification { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000; } .swiper-wp8-horizontal { -ms-touch-action: pan-y; touch-action: pan-y; } .swiper-wp8-vertical { -ms-touch-action: pan-x; touch-action: pan-x; } .swiper-button-next, .swiper-button-prev { position: absolute; top: 50%; width: 27px; height: 44px; margin-top: -22px; z-index: 10; cursor: pointer; background-size: 27px 44px; background-position: center; background-repeat: no-repeat; } .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { opacity: .35; cursor: auto; pointer-events: none; } .swiper-pagination { position: absolute; text-align: center; -webkit-transition: .3s; transition: .3s; -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); z-index: 10; } .swiper-pagination.swiper-pagination-hidden { opacity: 0; } .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer; } .swiper-container-fade.swiper-container-free-mode .swiper-slide { -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .swiper-container-fade .swiper-slide { pointer-events: none; -webkit-transition-property: opacity; transition-property: opacity; } .swiper-container-fade .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-fade .swiper-slide-active, .swiper-container-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-pagination.swiper-pagination-hidden { opacity: 0; } .swiper-pagination-bullet { width: 8px; height: 8px; display: inline-block; -webkit-border-radius: 100%; border-radius: 100%; background: #000; } button.swiper-pagination-bullet { border: none; margin: 0; padding: 0; -webkit-box-shadow: none; box-shadow: none; -moz-appearance: none; -ms-appearance: none; -webkit-appearance: none; appearance: none; } .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer; } .swiper-pagination-bullet-active { opacity: 1; background: #007aff; } .swiper-scrollbar { -webkit-border-radius: 10px; border-radius: 10px; position: relative; -ms-touch-action: none; background: #dde2e9; } .swiper-container-horizontal > .swiper-scrollbar { position: absolute; left: 0px; bottom: 20px; z-index: 50; height: 2px; width: 100%; opacity: 1 !important; } .swiper-container-vertical > .swiper-scrollbar { position: absolute; right: 3px; top: 1%; z-index: 50; width: 5px; height: 98%; } .swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background: #c1c7cf; -webkit-border-radius: 10px; border-radius: 10px; left: 0; top: 0; } .swiper-scrollbar-cursor-drag { cursor: move; } .animated { -webkit-animation-duration: 0.8s; animation-duration: 0.8s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; } .animated.bounceIn, .animated.bounceOut, .animated.flipOutX, .animated.flipOutY { -webkit-animation-duration: .75s; animation-duration: .75s; } @-webkit-keyframes bounce { 0%, 20%, 53%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translateZ(0); transform: translateZ(0); } 40%, 43% { -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 40%, 43%, 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); } 70% { -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0); } } @keyframes bounce { 0%, 20%, 53%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translateZ(0); transform: translateZ(0); } 40%, 43% { -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 40%, 43%, 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); } 70% { -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0); } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; -ms-transform-origin: center bottom; transform-origin: center bottom; } @-webkit-keyframes flash { 0%, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { 0%, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { -webkit-animation-name: flash; animation-name: flash; } @-webkit-keyframes pulse { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scaleX(1); transform: scaleX(1); } } @keyframes pulse { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scaleX(1); transform: scaleX(1); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes rubberBand { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } to { -webkit-transform: scaleX(1); transform: scaleX(1); } } @keyframes rubberBand { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } to { -webkit-transform: scaleX(1); transform: scaleX(1); } } .rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; } @-webkit-keyframes shake { 0%, to { -webkit-transform: translateZ(0); transform: translateZ(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } @keyframes shake { 0%, to { -webkit-transform: translateZ(0); transform: translateZ(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } .shake { -webkit-animation-name: shake; animation-name: shake; } @-webkit-keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } } .headShake { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-name: headShake; animation-name: headShake; } @-webkit-keyframes swing { 20% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } to { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes swing { 20% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } to { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } .swing { -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @-webkit-keyframes tada { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg); transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); } to { -webkit-transform: scaleX(1); transform: scaleX(1); } } @keyframes tada { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg); transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); } to { -webkit-transform: scaleX(1); transform: scaleX(1); } } .tada { -webkit-animation-name: tada; animation-name: tada; } @-webkit-keyframes wobble { 0% { -webkit-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate(-5deg); transform: translate3d(-25%, 0, 0) rotate(-5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate(3deg); transform: translate3d(20%, 0, 0) rotate(3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg); transform: translate3d(-15%, 0, 0) rotate(-3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate(2deg); transform: translate3d(10%, 0, 0) rotate(2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg); transform: translate3d(-5%, 0, 0) rotate(-1deg); } to { -webkit-transform: none; transform: none; } } @keyframes wobble { 0% { -webkit-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate(-5deg); transform: translate3d(-25%, 0, 0) rotate(-5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate(3deg); transform: translate3d(20%, 0, 0) rotate(3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg); transform: translate3d(-15%, 0, 0) rotate(-3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate(2deg); transform: translate3d(10%, 0, 0) rotate(2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg); transform: translate3d(-5%, 0, 0) rotate(-1deg); } to { -webkit-transform: none; transform: none; } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes jello { 0%, 11.1%, to { -webkit-transform: none; transform: none; } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.39063deg) skewY(0.39063deg); transform: skewX(0.39063deg) skewY(0.39063deg); } 88.8% { -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg); transform: skewX(-0.19531deg) skewY(-0.19531deg); } } @keyframes jello { 0%, 11.1%, to { -webkit-transform: none; transform: none; } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.39063deg) skewY(0.39063deg); transform: skewX(0.39063deg) skewY(0.39063deg); } 88.8% { -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg); transform: skewX(-0.19531deg) skewY(-0.19531deg); } } .jello { -webkit-animation-name: jello; animation-name: jello; -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; } @-webkit-keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scaleX(1); transform: scaleX(1); } } @keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scaleX(1); transform: scaleX(1); } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } to { -webkit-transform: none; transform: none; } } @keyframes bounceInDown { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } to { -webkit-transform: none; transform: none; } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } to { -webkit-transform: none; transform: none; } } @keyframes bounceInLeft { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } to { -webkit-transform: none; transform: none; } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } to { -webkit-transform: none; transform: none; } } @keyframes bounceInRight { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } to { -webkit-transform: none; transform: none; } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes bounceInUp { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } @keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } to { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-30px, 0, 0); transform: translate3d(-30px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-30px, 0, 0); transform: translate3d(-30px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(30px, 0, 0); transform: translate3d(30px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(30px, 0, 0); transform: translate3d(30px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 30px, 0); transform: translate3d(0, 30px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 30px, 0); transform: translate3d(0, 30px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeOut { 0% { opacity: 1; } to { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } to { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes fadeOutDown { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes fadeOutDownBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes fadeOutLeft { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes fadeOutLeftBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes fadeOutRight { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes fadeOutRightBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes fadeOutUp { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes fadeOutUpBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) rotateY(-1turn); transform: perspective(400px) rotateY(-1turn); } 0%, 40% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(-190deg); transform: perspective(400px) translateZ(150px) rotateY(-190deg); } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(-170deg); transform: perspective(400px) translateZ(150px) rotateY(-170deg); } 50%, 80% { -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95); transform: perspective(400px) scale3d(0.95, 0.95, 0.95); } to { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { 0% { -webkit-transform: perspective(400px) rotateY(-1turn); transform: perspective(400px) rotateY(-1turn); } 0%, 40% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(-190deg); transform: perspective(400px) translateZ(150px) rotateY(-190deg); } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(-170deg); transform: perspective(400px) translateZ(150px) rotateY(-170deg); } 50%, 80% { -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95); transform: perspective(400px) scale3d(0.95, 0.95, 0.95); } to { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .animated.flip { -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 0%, 40% { -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 40% { -webkit-transform: perspective(400px) rotateX(-20deg); transform: perspective(400px) rotateX(-20deg); } 60% { -webkit-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotateX(-5deg); transform: perspective(400px) rotateX(-5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 0%, 40% { -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 40% { -webkit-transform: perspective(400px) rotateX(-20deg); transform: perspective(400px) rotateX(-20deg); } 60% { -webkit-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotateX(-5deg); transform: perspective(400px) rotateX(-5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } 0%, 40% { -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 40% { -webkit-transform: perspective(400px) rotateY(-20deg); transform: perspective(400px) rotateY(-20deg); } 60% { -webkit-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotateY(-5deg); transform: perspective(400px) rotateY(-5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } 0%, 40% { -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 40% { -webkit-transform: perspective(400px) rotateY(-20deg); transform: perspective(400px) rotateY(-20deg); } 60% { -webkit-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotateY(-5deg); transform: perspective(400px) rotateY(-5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotateX(-20deg); transform: perspective(400px) rotateX(-20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } @keyframes flipOutX { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotateX(-20deg); transform: perspective(400px) rotateX(-20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotateY(-15deg); transform: perspective(400px) rotateY(-15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } @keyframes flipOutY { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotateY(-15deg); transform: perspective(400px) rotateY(-15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; } @-webkit-keyframes lightSpeedIn { 0% { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); } 60%, 80% { opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); } to { -webkit-transform: none; transform: none; opacity: 1; } } @keyframes lightSpeedIn { 0% { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); } 60%, 80% { opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); } to { -webkit-transform: none; transform: none; opacity: 1; } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedOut { 0% { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } @keyframes lightSpeedOut { 0% { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes rotateIn { 0% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } 0%, to { -webkit-transform-origin: center; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateIn { 0% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } 0%, to { -webkit-transform-origin: center; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0; } 0%, to { -webkit-transform-origin: left bottom; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0; } 0%, to { -webkit-transform-origin: left bottom; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; } 0%, to { -webkit-transform-origin: right bottom; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; } 0%, to { -webkit-transform-origin: right bottom; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; } 0%, to { -webkit-transform-origin: left bottom; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; } 0%, to { -webkit-transform-origin: left bottom; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 0%, to { -webkit-transform-origin: right bottom; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 0%, to { -webkit-transform-origin: right bottom; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } @-webkit-keyframes rotateOut { 0% { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } 0%, to { -webkit-transform-origin: center; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate(200deg); transform: rotate(200deg); opacity: 0; } } @keyframes rotateOut { 0% { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } 0%, to { -webkit-transform-origin: center; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate(200deg); transform: rotate(200deg); opacity: 0; } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; } @-webkit-keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } 0%, to { -webkit-transform-origin: left bottom; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; } } @keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } 0%, to { -webkit-transform-origin: left bottom; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } @-webkit-keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } 0%, to { -webkit-transform-origin: right bottom; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0; } } @keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } 0%, to { -webkit-transform-origin: right bottom; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0; } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } @-webkit-keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } 0%, to { -webkit-transform-origin: left bottom; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0; } } @keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } 0%, to { -webkit-transform-origin: left bottom; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0; } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } @-webkit-keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } 0%, to { -webkit-transform-origin: right bottom; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } 0%, to { -webkit-transform-origin: right bottom; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } @-webkit-keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; } 0%, 20%, 60% { -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; transform-origin: top left; } 40%, 80% { -webkit-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } @keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; } 0%, 20%, 60% { -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; transform-origin: top left; } 40%, 80% { -webkit-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } .hinge { -webkit-animation-name: hinge; animation-name: hinge; } @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg); transform: translate3d(-100%, 0, 0) rotate(-120deg); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes rollIn { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg); transform: translate3d(-100%, 0, 0) rotate(-120deg); } to { opacity: 1; -webkit-transform: none; transform: none; } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } @-webkit-keyframes rollOut { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate(120deg); transform: translate3d(100%, 0, 0) rotate(120deg); } } @keyframes rollOut { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate(120deg); transform: translate3d(100%, 0, 0) rotate(120deg); } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } @-webkit-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; } @-webkit-keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown; } @-webkit-keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft; } @-webkit-keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight; } @-webkit-keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 30px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 30px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -30px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -30px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 30px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 30px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -30px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -30px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp; } @-webkit-keyframes zoomOut { 0% { opacity: 1; } 50% { -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50%, to { opacity: 0; } } @keyframes zoomOut { 0% { opacity: 1; } 50% { -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50%, to { opacity: 0; } } .zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut; } @-webkit-keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomOutDown { -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown; } @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } @keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } .zoomOutLeft { -webkit-animation-name: zoomOutLeft; animation-name: zoomOutLeft; } @-webkit-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } @keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } .zoomOutRight { -webkit-animation-name: zoomOutRight; animation-name: zoomOutRight; } @-webkit-keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomOutUp { -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp; } @-webkit-keyframes slideInDown { 0% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes slideInDown { 0% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { 0% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes slideInLeft { 0% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { 0% { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes slideInRight { 0% { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideInUp { 0% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes slideInUp { 0% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } .slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp; } @-webkit-keyframes slideOutDown { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes slideOutDown { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown; } @-webkit-keyframes slideOutLeft { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes slideOutLeft { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes slideOutRight { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes slideOutUp { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } img.fr-dib { margin: 5px auto; display: block; float: none; vertical-align: top; } /*! normalize.css v3.0.0 | MIT License | git.io/normalize */ /** 1. Set default font family to sans-serif. 2. Prevent iOS text size adjust after orientation change, without disabling user zoom. */ html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /** Remove default margin. */ body { margin: 0; } /* HTML5 display definitions ========================================================================== */ /** Correct `block` display not defined in IE 8/9. */ article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } /** 1. Correct `inline-block` display not defined in IE 8/9. 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */ audio, canvas, progress, video { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** Prevent modern browsers from displaying `audio` without controls. Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /** Address `[hidden]` styling not present in IE 8/9. Hide the `template` element in IE, Safari, and Firefox < 22. */ [hidden], template { display: none; } /* Links ========================================================================== */ /** Remove the gray background color from active links in IE 10. */ a { background: transparent; } /** Improve readability when focused and also mouse hovered in all browsers. */ a:active, a:hover { outline: 0; } /* Text-level semantics ========================================================================== */ /** Address styling not present in IE 8/9, Safari 5, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /** Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. */ b, strong { font-weight: bold; } /** Address styling not present in Safari 5 and Chrome. */ dfn { font-style: italic; } /** Address variable `h1` font-size and margin within `section` and `article` contexts in Firefox 4+, Safari 5, and Chrome. */ h1 { font-size: 2em; margin: 0.67em 0; } /** Address styling not present in IE 8/9. */ mark { background: #ff0; color: #000; } /** Address inconsistent and variable font size in all browsers. */ small { font-size: 80%; } /** Prevent `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* Embedded content ========================================================================== */ /** Remove border when inside `a` element in IE 8/9. */ img { border: 0; } /** Correct overflow displayed oddly in IE 9. */ svg:not(:root) { overflow: hidden; } /* Grouping content ========================================================================== */ /** Address margin not present in IE 8/9 and Safari 5. */ figure { margin: 1em 40px; } /** Address differences between Firefox and other browsers. */ hr { -webkit-box-sizing: content-box; box-sizing: content-box; height: 0; } /** Contain overflow in all browsers. */ pre { overflow: auto; } /** Address odd `em`-unit font size rendering in all browsers. */ code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } /* Forms ========================================================================== */ /** Known limitation: by default, Chrome and Safari on OS X allow very limited styling of `select`, unless a `border` property is set. */ /** 1. Correct color not being inherited. Known issue: affects color of disabled elements. 2. Correct font properties not being inherited. 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. */ button, input, optgroup, select, textarea { color: inherit; /* 1 */ font: inherit; /* 2 */ margin: 0; /* 3 */ } /** Address `overflow` set to `hidden` in IE 8/9/10. */ button { overflow: visible; } /** Address inconsistent `text-transform` inheritance for `button` and `select`. All other form control elements do not inherit `text-transform` values. Correct `button` style inheritance in Firefox, IE 8+, and Opera Correct `select` style inheritance in Firefox. */ button, select { text-transform: none; } /** 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls. 2. Correct inability to style clickable `input` types in iOS. 3. Improve usability and consistency of cursor style between image-type `input` and others. */ button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ } /** Re-set default cursor for disabled elements. */ button[disabled], html input[disabled] { cursor: default; } /** Remove inner padding and border in Firefox 4+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /** Address Firefox 4+ setting `line-height` on `input` using `!important` in the UA stylesheet. */ input { line-height: normal; } /** It's recommended that you don't attempt to style these elements. Firefox's implementation doesn't respect box-sizing, padding, or width. 1. Address box sizing set to `content-box` in IE 8/9/10. 2. Remove excess padding in IE 8/9/10. */ input[type="checkbox"], input[type="radio"] { -webkit-box-sizing: border-box; box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** Fix the cursor style for Chrome's increment/decrement buttons. For certain `font-size` values of the `input`, it causes the cursor style of the decrement button to change from `default` to `text`. */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } /** 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome (include `-moz` to future-proof). */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; } /** Remove inner padding and search cancel button in Safari and Chrome on OS X. Safari (but not Chrome) clips the cancel button when the search input has padding (and `textfield` appearance). */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** Define consistent border, margin, and padding. */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** 1. Correct `color` not being inherited in IE 8/9. 2. Remove padding so people aren't caught out if they zero out fieldsets. */ legend { border: 0; /* 1 */ padding: 0; /* 2 */ } /** Remove default vertical scrollbar in IE 8/9. */ textarea { overflow: auto; } /** Don't inherit the `font-weight` (applied by a rule above). NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */ optgroup { font-weight: bold; } /* Tables ========================================================================== */ /** Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } /* Containers */ #content-wrapper, #example-wrapper { height: 100%; } .scrollContainer { overflow-y: scroll; overflow-x: hidden; width: 100%; } .scrollContainer { height: 100%; margin: auto; } #example-wrapper .scrollContent { height: 100%; } .horizontal.scrollContainer { overflow-y: hidden; overflow-x: scroll; } #example-wrapper.scrollContainer .scrollContent { width: 100%; height: auto; } #example-wrapper.scrollContainer.horizontal .scrollContent { width: auto; height: 100%; } #example-wrapper.horizontal { white-space: nowrap; font-size: 0; /* fix for spaces between inline block divs */ } #example-wrapper.horizontal div { font-size: 13px; } #example-wrapper .scrollContent, #example-wrapper.horizontal .scrollContent { font-size: 0; } #example-wrapper .scrollContent div { font-size: 13px; } section#titlechart { text-align: center; position: relative; height: 100%; min-height: 500px; min-width: 100%; height: 100vh; } .horizontal section, .horizontal section#titlechart { display: inline-block; vertical-align: top; height: 100%; } section#titlechart #description { top: 50%; left: 50%; position: absolute; width: 600px; height: 300px; margin: -150px auto auto -300px; } section#titlechart.home #description { padding-top: 0; padding-bottom: 100px; } section#titlechart #description h1 { margin: 0; } section#titlechart #description h2 { margin-bottom: 20px; } section#titlechart #description a.viewsource { margin-bottom: 20px; display: inline-block; } section#titlechart #description code { background-color: #E1F1FF; padding-left: 2px; padding-right: 2px; white-space: nowrap; } section#titlechart #description ol, section#titlechart #description p { text-align: left; max-width: 400px; margin: 10px auto 10px auto; white-space: normal; } section#titlechart #description ol { list-style-position: outside; } #example-wrapper section#titlechart #description:after { content: "↧"; font-size: 40px; display: block; } #example-wrapper.horizontal section#titlechart #description:after { content: "↦"; } section.demo * { font-size: 13px; } section.demo { font-size: 0; text-align: center; background-image: url(../images/example_bg_v.png); } section.demo.fullheight { min-height: 100%; } section.demo.doublewidth, .spacer.doublewidth { min-width: 200%; } .horizontal section.demo { text-align: inherit; white-space: nowrap; background-image: url(../images/example_bg_h.png); } .horizontal section.demo.fullwidth { min-width: 100%; } /* Elements */ h1.badge { /*cursor: text;*/ pointer-events: none; } h1.badge:after { vertical-align: text-top; display: inline-block; position: absolute; cursor: pointer; margin-left: 10px; font-family: "Source Sans Pro", Arial, sans-serif; font-weight: bold; font-style: normal; color: #FFFFFF; font-size: 12px; padding: 2px 5px; -webkit-border-radius: 10px; border-radius: 10px; pointer-events: all; } h1.badge.gsap:after { content: "GSAP"; background-color: #61AC27; } h1.badge.velocity:after { content: "Velocity.js"; background-color: #f53a47; } .spacer { text-align: center; min-height: 100px; background-image: url(../images/example_bg_spacer_v.gif); } .spacer.s0 { min-height: 1px; } .spacer.s1 { min-height: 100px; } .spacer.s2 { min-height: 200px; } .spacer.s3 { min-height: 300px; } .spacer.s4 { min-height: 400px; } .spacer.s5 { min-height: 500px; } .spacer.s6 { min-height: 600px; } .spacer.s7 { min-height: 700px; } .spacer.s8 { min-height: 800px; } .spacer.s9 { min-height: 900px; } .spacer.s10 { min-height: 1000px; } .spacer.s_viewport { min-height: 100%; } .horizontal .spacer { background-image: url(../images/example_bg_spacer_h.gif); margin-bottom: 0; min-height: initial; min-width: 100px; height: 100%; display: inline-block; vertical-align: top; } .horizontal .spacer.s0 { min-width: 1px; } .horizontal .spacer.s1 { min-width: 100px; } .horizontal .spacer.s2 { min-width: 200px; } .horizontal .spacer.s3 { min-width: 300px; } .horizontal .spacer.s4 { min-width: 400px; } .horizontal .spacer.s5 { min-width: 500px; } .horizontal .spacer.s6 { min-width: 600px; } .horizontal .spacer.s7 { min-width: 700px; } .horizontal .spacer.s8 { min-width: 800px; } .horizontal .spacer.s9 { min-width: 900px; } .horizontal .spacer.s10 { min-width: 1000px; } .spacer.s_viewport { min-width: 100%; } .box1, .box2, .box3 { display: inline-block; position: relative; -webkit-border-radius: 8px; border-radius: 8px; border: 0px solid white; text-align: center; vertical-align: middle; padding: 0 5px; } .box1 { min-width: 100px; height: 100px; margin: 0 auto 0 auto; } .box2 { min-width: 50px; height: 50px; margin: 25px auto 25px auto; } .box3 { min-width: 26px; height: 26px; margin: 37px auto 37px auto; } .horizontal .box1 { top: 50%; max-height: 100px; margin: -50px 0 auto 0; } .horizontal .box2 { top: 50%; max-height: 50px; margin: -25px 25px auto 25px; } .horizontal .box3 { top: 50%; max-height: 26px; margin: -13px 37px auto 37px; } .box1 p, .box2 p, .box3 p { margin: 5px 15px 5px 15px; font-size: 13px; font-weight: lighter; color: white; } #reveal-elements .digit { vertical-align: top; } #reveal-elements .digit p { font-size: 35px; font-weight: bold; } .box1 p:first-child { margin-top: 27px; } .box1 a, .box2 a, .box3 a { color: white; } .box1.white *, .box2.white *, .box3.white * { color: #2e639e; } .box2.mario { background-color: #004fae; border-top: 30px solid #fc112f; border-bottom: 10px solid #c4723b; } .box3.goomba { min-width: 30px; height: 4px; margin-top: 75px; margin-left: 30px; margin-bottom: 25px; background-color: #b39475; border-top: 30px solid #744527; border-bottom: 6px solid #c4723b; } /* colors */ .box1.outline, .box2.outline, .box3.outline { border: 1px solid white; } .blue { background-color: #3883d8; } .turqoise { background-color: #38ced7; } .brown { background-color: #a66f28; } .bordeaux { background-color: #953543; } .skin { background-color: #ED9F4C; } .black { background-color: #000000; } .white { background-color: #FFFFFF; } .red { background-color: #cf3535; } .green { background-color: #22d659; } .orange { background-color: #ea6300; } /* Form */ form.move { text-align: left; position: fixed; top: 70px; left: 20px; display: block; background-color: white; background-color: rgba(255, 255, 255, 0.9); -webkit-border-radius: 4px; border-radius: 4px; padding: 20px; z-index: 20; } html.touch form.move { top: 120px; } form > div, form > fieldset > div { margin: 10px 0 10px 0; display: block; } form .slider { min-width: 199px; display: inline-block; position: relative; height: 9px; border-right: 1px solid #2e639e; border-left: 1px solid #2e639e; vertical-align: middle; margin-right: 5px; } form .slider .trackbar { margin-top: 4px; border-top: 1px solid #2e639e; height: 4px; } form .slider .handle { height: 14px; width: 6px; position: absolute; top: -4px; margin-left: -4px; left: 0%; background-color: white; -webkit-border-radius: 4px; border-radius: 4px; cursor: pointer; border: 1px solid #2e639e; } form .slider .handle:hover, form .slider.dragging .handle { background-color: #79b0ee; } form .slider + input { background-color: transparent; border: none; padding: 0; } form #options label, form #actions label, form #tweenparams label { min-width: 90px; text-align: right; display: inline-block; margin-right: 10px; } form #tweenparams label { min-width: 50px; } form #options button { width: 65px; } form fieldset { padding: 0 10px 0 10px; margin: 5px 0 0 0; } form fieldset:first-child { margin-top: -5px; } form fieldset legend { padding: 0 5px 0 5px; margin: 0; } .move { cursor: move; } .move * { cursor: auto; } .move label { cursor: default; } /* MENU */ ul#menu, ul#menu ul { list-style: none; padding: 0; } ul#menu { position: fixed; z-index: 999; width: 540px; left: 50%; margin: 10px auto auto -270px; text-align: center; } ul#menu > li { display: inline-block; margin: 0 5px 0 5px; position: relative; min-height: 30px; -webkit-border-radius: 4px; border-radius: 4px; background-color: #79b0ee; vertical-align: top; min-width: 165px; } ul#menu li a { padding: 0 5px 0 5px; display: block; text-decoration: none; line-height: 30px; color: white; text-transform: uppercase; letter-spacing: 0.05em; font-size: 15px; } ul#menu ul { display: none; } ul#menu li:hover > a, ul#menu li.current > a { color: #2e639e; } ul#menu li:hover ul, html.touch ul#menu li.open ul { display: block; width: 100%; padding: 5px 0 5px 0; border-top: 1px dashed white; } ul#menu ul li a { text-transform: none; font-size: 12px; line-height: 20px; font-weight: lighter; color: #133f71; } ul#menu ul li.current a { background-color: #FFFFFF; } ul#menu ul li a:hover { background-color: #3883d8; color: white; } .menuwrap { position: fixed; background-color: white; background-color: rgba(255, 255, 255, 0.9); min-width: 540px; left: 50%; margin-left: -270px; min-height: 51px; -webkit-border-bottom-left-radius: 8px; border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px; border-bottom-right-radius: 8px; z-index: 99999; text-align: center; transition: top 0.5s; -webkit-transition: top 0.5s; /* Safari */ transition-delay: 1s; -webkit-transition-delay: 1s; /* Safari */ } #titlechart .menuwrap { position: absolute; z-index: inherit; background-color: transparent; } .menuwrap ul#menu { position: absolute; } .menuwrap > a.prev, .menuwrap > a.next { display: block; position: absolute; background-color: white; background-color: rgba(255, 255, 255, 0.9); -webkit-border-radius: 15px; border-radius: 15px; line-height: 30px; width: 30px; height: 30px; top: 11px; margin: 0 280px; -webkit-box-sizing: border-box; box-sizing: border-box; } .menuwrap > a.prev:hover, .menuwrap > a.next:hover { text-decoration: none; background-color: #79b0ee; color: #FFFFFF; } .menuwrap > a.prev { margin-left: 0; padding-right: 2px; right: 50%; } .menuwrap > a.next { margin-right: 0; padding-left: 4px; left: 50%; } /* mobile */ html.touch .menuwrap { z-index: 999999; -webkit-box-sizing: content-box; box-sizing: content-box; min-width: 0; width: 100%; margin: 0; left: 0; top: 0; height: auto; background-color: transparent; } html.touch ul#menu { position: static; margin: 100px 0 0 0; text-align: center; width: 100%; left: 0; display: none; } html.touch .menuwrap.open { height: 100%; background-color: rgba(255, 255, 255, 0.9); overflow: scroll; } html.touch .menuwrap.open ul#menu { display: block; } html.touch ul#menu > li { display: block; margin: 10px; height: auto; } html.touch ul#menu ul { margin-top: 10px; padding-top: 10px; border-top: 1px dashed white; } html.touch ul#menu li { padding: 10px 0; } html.touch ul#menu > li a { color: #2e639e; font-size: 4em; line-height: 1.2em; } html.touch ul#menu ul li a { font-size: 2.5em; line-height: 1.2em; } html.touch ul#menu ul { display: block; } html.touch ul#menu ul li.current a { background-color: transparent; } html.touch ul#menu ul li a:hover { background-color: transparent; } html.touch ul#menu ul li a:active { color: white; } html.touch .menuwrap > a.prev, html.touch .menuwrap > a.next, html.touch .menubtn { width: 80px; height: 80px; -webkit-border-radius: 40px; border-radius: 40px; top: 10px; background-color: #3883d8; color: white; font-size: 4em; line-height: 1.5em; } html.touch .menuwrap > a.prev:active, html.touch .menuwrap > a.next:active, html.touch .menubtn:active { background-color: white; color: #3883d8; border: 2px solid #3883d8; } html.touch .menuwrap > a.prev { margin-right: 70px; padding-right: 10px; } html.touch .menuwrap > a.next { margin-left: 70px; padding-left: 10px; } html.touch .menubtn { padding: 0; border: 0; position: absolute; left: 50%; margin-left: -40px; line-height: 0; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-justify-content: center; -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; -webkit-box-align: center; align-items: center; -webkit-transition: 0.3s; transition: 0.3s; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } html.touch .menubtn:active .button-lines, html.touch .menubtn:active .button-lines::before, html.touch .menubtn:active .button-lines::after { background: #3883d8; } html.touch .menubtn .button-lines, html.touch .menubtn .button-lines::before, html.touch .menubtn .button-lines::after { display: inline-block; height: 6px; width: 35px; -webkit-border-radius: 4px; border-radius: 4px; -webkit-transition: 0.3s; transition: 0.3s; background: #FFFFFF; position: relative; left: 0; top: -5px; } html.touch .menubtn .button-lines::before, html.touch .menubtn .button-lines::after { content: ''; position: absolute; } html.touch .menubtn .button-lines::before { top: 12px; } html.touch .menubtn .button-lines::after { top: -12px; } html.touch .menuwrap.open .menubtn .button-lines { background: transparent; } html.touch .menuwrap.open .menubtn .button-lines::before { top: 0px; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; } html.touch .menuwrap.open .menubtn .button-lines::after { top: 0px; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; } /* Codecontainer */ #codecontainer { position: fixed; top: 30px; bottom: 20px; right: 20px; left: 20px; background-color: white; -webkit-border-radius: 4px; border-radius: 4px; z-index: 99999; min-height: 300px; } #codecontainer pre { margin: 0; padding: 0; line-height: 16px; -moz-tab-size: 4; tab-size: 4; } #codecontainer pre .break { background-color: #F6F6F6; font-weight: bold; color: #aaa; } #codecontainer pre .break:before { content: "᎒"; } #codecontainer .codewrap { position: absolute; top: 10px; bottom: 10px; width: 100%; overflow: hidden; overflow: scroll; white-space: nowrap; } #codecontainer .code, #codecontainer .linenumbers { min-height: 100%; } #codecontainer .code { padding: 0; display: inline-block; } #codecontainer .code { padding: 0 15px 10px 5px; } #codecontainer .linenumbers { float: left; padding: 0px 5px 0px 10px; color: #aaa; text-align: right; border-right: 1px solid #e5e5e5; } #codecontainer span.indent { width: 31px; display: inline-block; white-space: nowrap; } #codecontainer #close.button { position: fixed; top: 20px; right: 10px; width: 20px; height: 20px; } #codecontainer #select.button { position: fixed; top: 20px; right: 40px; height: 20px; padding: 0 10px 0 10px; } #codecontainer #close.button:after { content: "྾"; } #codecontainer .button { background-color: white; -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid #e5e5e5; text-align: center; cursor: pointer; color: #2e639e; } #codecontainer .button:hover { background-color: #3883d8; color: white; } /* OTHER */ a.viewsource:after { content: " }"; } a.viewsource:before { content: "{ "; } #parallaxContainer { width: 900px; height: 500px; top: 30px; position: relative; } #parallaxContainer .layer1 { height: 100%; text-align: center; background-image: url(../images/example_parallax_l1.gif); } #parallaxContainer .layer2 { background-image: url(../images/example_parallax_l2.png); position: absolute; height: 139px; width: 100%; bottom: 32px; } #parallaxContainer .layer3 { background-image: url(../images/example_parallax_l3.gif); position: absolute; height: 32px; width: 100%; bottom: 0px; } #parallaxText { width: 0; height: 100%; margin: auto; position: relative; } #parallaxText .layer1, #parallaxText .layer2, #parallaxText .layer3 { position: absolute; font-size: 50px; line-height: 50px; margin-left: -150px; margin-top: -25px; width: 300px; top: 50%; left: 50%; text-align: center; color: #133f71; } #parallaxText .layer1 { top: 48%; } #parallaxText .layer2 { top: 49%; } #parallaxText .layer3 a { display: block; font-family: "Source Sans Pro", Arial, sans-serif; font-style: normal; font-weight: normal; } #parallax1 > div, #parallax2 > div, #parallax3 > div { -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; -webkit-perspective: 1000; } .dynamicContent #content { width: 390px; margin: auto; text-align: left; } .dynamicContent #content .box1 { margin: 10px; } .dynamicContent #loader { height: 0; overflow: hidden; line-height: 60px; } .dynamicContent #loader.active { height: 60px; } .dynamicContent #loader img { vertical-align: text-bottom; } #customactions { height: 160px; width: 170px; margin: auto; padding-top: 40px; text-align: left; } #customactions label { width: 100px; display: inline-block; } #customactions code { color: #3883d8; } #customactions a.viewsource { margin-top: 20px; display: block; text-align: center; } .demo.responsiveDuration { position: relative; } .responsiveDuration .box1 { top: 50%; left: 50%; position: absolute; margin-top: -50px; margin-left: -50px; } #destroybox a { display: block; margin-top: 20px; } #destroybox a.disabled { color: #79b0ee; } #mobileadvanced { width: 150px; height: 150px; } #mobileadvanced p { margin-top: 50px; } #multiDirect { text-align: left; position: relative; } #multiDirect .box1 { left: 50vw; top: 200px; margin-left: -60px; } #multiDirect .box1 p:first-child { margin-top: 20px; } #imagesequence { height: 300px; } .copyright { font-variant: italic; font-size: 11px; } #bezier { overflow: hidden; position: relative; } #bezier #plane { position: absolute; left: -100px; } #bezier a.viewsource { margin: 100px; display: inline-block; } .demo#section-slides, .demo#section-wipes { height: 100%; width: 100%; background-image: none; } .demo#section-slides .panel, .demo#section-wipes .panel { background-image: url(../images/example_bg_spacer_v.gif); } .demo#section-wipes #pinContainer .turqoise, .demo#section-wipes #pinContainer .green, .demo#section-slides #slideContainer .panel { background-image: url(../images/example_bg_spacer_h.gif); } .demo#section-slides .panel > b, .demo#section-wipes .panel > b { font-size: 15px; color: white; position: relative; display: block; height: 0; overflow: visible; top: 50%; } /* Codehighlighting github.com style (c) Vasily Polovnyov */ .hljs { display: block; padding: 0.5em; color: #333; /*background: #f8f8f8*/ } .hljs-comment, .hljs-template_comment, .diff .hljs-header, .hljs-javadoc { color: #998; font-style: italic; } .hljs-keyword, .css .rule .hljs-keyword, .hljs-winutils, .javascript .hljs-title, .nginx .hljs-title, .hljs-subst, .hljs-request, .hljs-status { color: #333; font-weight: bold; } .hljs-number, .hljs-hexcolor, .ruby .hljs-constant { color: #099; } .hljs-string, .hljs-tag .hljs-value, .hljs-phpdoc, .tex .hljs-formula { color: #d14; } .hljs-title, .hljs-id, .coffeescript .hljs-params, .scss .hljs-preprocessor { color: #900; font-weight: bold; } .javascript .hljs-title, .lisp .hljs-title, .clojure .hljs-title, .hljs-subst { font-weight: normal; } .hljs-class .hljs-title, .haskell .hljs-type, .vhdl .hljs-literal, .tex .hljs-command { color: #458; font-weight: bold; } .hljs-tag, .hljs-tag .hljs-title, .hljs-rules .hljs-property, .django .hljs-tag .hljs-keyword { color: #000080; font-weight: normal; } .hljs-attribute, .hljs-variable, .lisp .hljs-body { color: #008080; } .hljs-regexp { color: #009926; } .hljs-symbol, .ruby .hljs-symbol .hljs-string, .lisp .hljs-keyword, .tex .hljs-special, .hljs-prompt { color: #990073; } .hljs-built_in, .lisp .hljs-title, .clojure .hljs-built_in { color: #0086b3; } .hljs-preprocessor, .hljs-pragma, .hljs-pi, .hljs-doctype, .hljs-shebang, .hljs-cdata { color: #999; font-weight: bold; } .hljs-deletion { background: #fdd; } .hljs-addition { background: #dfd; } .diff .hljs-change { background: #0086b3; } .hljs-chunk { color: #aaa; } /* Chosen v1.1.0 | (c) 2011-2013 by Harvest | MIT License, https://github.com/harvesthq/chosen/blob/master/LICENSE.md */ .chosen-container { position: relative; display: inline-block; vertical-align: middle; font-size: 13px; zoom: 1; *display: inline; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .chosen-container .chosen-drop { position: absolute; top: 100%; left: -9999px; z-index: 1010; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; border: 1px solid #aaa; border-top: 0; background: #fff; -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15); box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15); } .chosen-container.chosen-with-drop .chosen-drop { left: 0; } .chosen-container a { cursor: pointer; } .chosen-container-single .chosen-single { position: relative; display: block; overflow: hidden; padding: 0 0 0 8px; height: 23px; border: 1px solid #aaa; -webkit-border-radius: 5px; border-radius: 5px; background-color: #fff; background: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #fff), color-stop(50%, #f6f6f6), color-stop(52%, #eee), to(#f4f4f4)); background: linear-gradient(top, #fff 20%, #f6f6f6 50%, #eee 52%, #f4f4f4 100%); background-clip: padding-box; -webkit-box-shadow: 0 0 3px #fff inset, 0 1px 1px rgba(0, 0, 0, 0.1); box-shadow: 0 0 3px #fff inset, 0 1px 1px rgba(0, 0, 0, 0.1); color: #444; text-decoration: none; white-space: nowrap; line-height: 24px; } .chosen-container-single .chosen-default { color: #999; } .chosen-container-single .chosen-single span { display: block; overflow: hidden; margin-right: 26px; text-overflow: ellipsis; white-space: nowrap; } .chosen-container-single .chosen-single-with-deselect span { margin-right: 38px; } .chosen-container-single .chosen-single abbr { position: absolute; top: 6px; right: 26px; display: block; width: 12px; height: 12px; font-size: 1px; } .chosen-container-single .chosen-single abbr:hover { background-position: -42px -10px; } .chosen-container-single.chosen-disabled .chosen-single abbr:hover { background-position: -42px -10px; } .chosen-container-single .chosen-single div { position: absolute; top: 0; right: 0; display: block; width: 18px; height: 100%; } .chosen-container-single .chosen-single div b { display: block; width: 100%; height: 100%; } .chosen-container-single .chosen-search { position: relative; z-index: 1010; margin: 0; padding: 3px 4px; white-space: nowrap; } .chosen-container-single .chosen-search input[type=text] { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 1px 0; padding: 4px 20px 4px 5px; width: 100%; height: auto; outline: 0; border: 1px solid #aaa; font-size: 1em; font-family: sans-serif; line-height: normal; -webkit-border-radius: 0; border-radius: 0; } .chosen-container-single .chosen-drop { margin-top: -1px; -webkit-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px; background-clip: padding-box; } .chosen-container-single.chosen-container-single-nosearch .chosen-search { position: absolute; left: -9999px; } .chosen-container .chosen-results { position: relative; overflow-x: hidden; overflow-y: auto; margin: 0 4px 4px 0; padding: 0 0 0 4px; max-height: 240px; -webkit-overflow-scrolling: touch; } .chosen-container .chosen-results li { display: none; margin: 0; padding: 5px 6px; list-style: none; line-height: 15px; -webkit-touch-callout: none; } .chosen-container .chosen-results li.active-result { display: list-item; cursor: pointer; } .chosen-container .chosen-results li.disabled-result { display: list-item; color: #ccc; cursor: default; } .chosen-container .chosen-results li.highlighted { background-color: #3875d7; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #3875d7), color-stop(90%, #2a62bc)); background-image: linear-gradient(#3875d7 20%, #2a62bc 90%); color: #fff; } .chosen-container .chosen-results li.no-results { display: list-item; background: #f4f4f4; } .chosen-container .chosen-results li.group-result { display: list-item; font-weight: 700; cursor: default; } .chosen-container .chosen-results li.group-option { padding-left: 15px; } .chosen-container .chosen-results li em { font-style: normal; text-decoration: underline; } .chosen-container-multi .chosen-choices { position: relative; overflow: hidden; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; width: 100%; height: auto !important; height: 1%; border: 1px solid #aaa; background-color: #fff; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #eee), color-stop(15%, #fff)); background-image: linear-gradient(#eee 1%, #fff 15%); cursor: text; } .chosen-container-multi .chosen-choices li { float: left; list-style: none; } .chosen-container-multi .chosen-choices li.search-field { margin: 0; padding: 0; white-space: nowrap; } .chosen-container-multi .chosen-choices li.search-field input[type=text] { margin: 1px 0; padding: 5px; height: 15px; outline: 0; border: 0 !important; background: transparent !important; -webkit-box-shadow: none; box-shadow: none; color: #666; font-size: 100%; font-family: sans-serif; line-height: normal; -webkit-border-radius: 0; border-radius: 0; } .chosen-container-multi .chosen-choices li.search-field .default { color: #999; } .chosen-container-multi .chosen-choices li.search-choice { position: relative; margin: 3px 0 3px 5px; padding: 3px 20px 3px 5px; border: 1px solid #aaa; -webkit-border-radius: 3px; border-radius: 3px; background-color: #e4e4e4; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), to(#eee)); background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%); background-clip: padding-box; -webkit-box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05); box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05); color: #333; line-height: 13px; cursor: default; } .chosen-container-multi .chosen-choices li.search-choice .search-choice-close { position: absolute; top: 4px; right: 3px; display: block; width: 12px; height: 12px; font-size: 1px; } .chosen-container-multi .chosen-choices li.search-choice .search-choice-close:hover { background-position: -42px -10px; } .chosen-container-multi .chosen-choices li.search-choice-disabled { padding-right: 5px; border: 1px solid #ccc; background-color: #e4e4e4; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), to(#eee)); background-image: linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%); color: #666; } .chosen-container-multi .chosen-choices li.search-choice-focus { background: #d4d4d4; } .chosen-container-multi .chosen-choices li.search-choice-focus .search-choice-close { background-position: -42px -10px; } .chosen-container-multi .chosen-results { margin: 0; padding: 0; } .chosen-container-multi .chosen-drop .result-selected { display: list-item; color: #ccc; cursor: default; } .chosen-container-active .chosen-single { border: 1px solid #5897fb; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); } .chosen-container-active.chosen-with-drop .chosen-single { border: 1px solid #aaa; -webkit-border-bottom-right-radius: 0; border-bottom-right-radius: 0; -webkit-border-bottom-left-radius: 0; border-bottom-left-radius: 0; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #eee), color-stop(80%, #fff)); background-image: linear-gradient(#eee 20%, #fff 80%); -webkit-box-shadow: 0 1px 0 #fff inset; box-shadow: 0 1px 0 #fff inset; } .chosen-container-active.chosen-with-drop .chosen-single div { border-left: 0; background: transparent; } .chosen-container-active.chosen-with-drop .chosen-single div b { background-position: -18px 2px; } .chosen-container-active .chosen-choices { border: 1px solid #5897fb; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); } .chosen-container-active .chosen-choices li.search-field input[type=text] { color: #111 !important; } .chosen-disabled { opacity: 0.5 !important; cursor: default; } .chosen-disabled .chosen-single { cursor: default; } .chosen-disabled .chosen-choices .search-choice .search-choice-close { cursor: default; } .chosen-rtl { text-align: right; } .chosen-rtl .chosen-single { overflow: visible; padding: 0 8px 0 0; } .chosen-rtl .chosen-single span { margin-right: 0; margin-left: 26px; direction: rtl; } .chosen-rtl .chosen-single-with-deselect span { margin-left: 38px; } .chosen-rtl .chosen-single div { right: auto; left: 3px; } .chosen-rtl .chosen-single abbr { right: auto; left: 26px; } .chosen-rtl .chosen-choices li { float: right; } .chosen-rtl .chosen-choices li.search-field input[type=text] { direction: rtl; } .chosen-rtl .chosen-choices li.search-choice { margin: 3px 5px 3px 0; padding: 3px 5px 3px 19px; } .chosen-rtl .chosen-choices li.search-choice .search-choice-close { right: auto; left: 4px; } .chosen-rtl.chosen-container-single-nosearch .chosen-search, .chosen-rtl .chosen-drop { left: 9999px; } .chosen-rtl.chosen-container-single .chosen-results { margin: 0 0 4px 4px; padding: 0 4px 0 0; } .chosen-rtl .chosen-results li.group-option { padding-right: 15px; padding-left: 0; } .chosen-rtl.chosen-container-active.chosen-with-drop .chosen-single div { border-right: 0; } .chosen-rtl .chosen-search input[type=text] { padding: 4px 5px 4px 20px; direction: rtl; } .chosen-rtl.chosen-container-single .chosen-single div b { background-position: 6px 2px; } .chosen-rtl.chosen-container-single.chosen-with-drop .chosen-single div b { background-position: -12px 2px; } @font-face { font-family: Rubik; src: url("../sass/RUBIK-REGULAR.OTF"); font-family: siyuan; src: url("../css/SourceHanSansCN-Regular.otf"); } body.active { width: 100%; height: 100vh; overflow-X: hidden; overflow-y: hidden; } /*--头部--*/ .row { width: 1440px; margin: 0 auto; padding: 0 15px; position: relative; } .hideScroll { overflow: hidden; } .header { width: 100%; position: absolute; top: 0; left: 0; text-align: center; z-index: 99; } .header .logo { display: inline-block; margin: 0px auto; height: 40px; width: 235px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 9999; cursor: pointer; } .header .logo a { display: block; width: 80%; height: auto; } .header .logo img { width: 100%; } .header .icon1 { padding: 25px 40px; width: 100%; background-color: transparent; } .header .icon1 .ico { width: 40px; height: 33px; overflow: hidden; } .header .icon1 .ico img { width: 100%; } .header .icon1 .ico.active { -webkit-animation: donghua1 0.5s forwards; animation: donghua1 0.5s forwards; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } .header .icon1 .ico.fl { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .header .con { position: absolute; top: 0; left: 0; width: 100%; padding: 25px 40px; -webkit-transition: all 1s; transition: all 1s; z-index: 200; opacity: 0; } .header .con .onleft { display: inline-block; } .header .con .onright { display: inline-block; } .header .con .nav .li { display: inline-block; vertical-align: top; } .header .con .nav .li a { color: #fff; font-size: 14px; line-height: 40px; width: 100%; height: 100%; padding: 0 20px; } @-webkit-keyframes donghua1 { from { width: 48px; opacity: 1; } to { width: 100px; opacity: 0; } } @keyframes donghua1 { from { width: 48px; opacity: 1; } to { width: 100px; opacity: 0; } } /*--头部产品--*/ .header .con .nav .li { position: relative; -webkit-transition: all 0.3s; transition: all 0.3s; cursor: pointer; } .SubnavBox { top: 0; left: 0; position: absolute; padding-top: 90px; text-align: left; display: none; padding-left: 57px; width: 100%; height: 100%; background-color: #000; right: 0; bottom: 0; } .SubnavBox .Subnav .li { white-space: nowrap; line-height: 35px; cursor: pointer; position: relative; z-index: 10; } .SubnavBox .Subnav .li a { font-size: 20px; color: #fff; -webkit-transition: all 0.3s; transition: all 0.3s; opacity: 0.5; } .SubnavBox .Subnav .li:hover a { opacity: 1; } .SubnavBox .Subnav .li.active a { opacity: 1; } .header .con .nav .li.active a { color: #d30a2d; font-weight: bold; } .header .con .nav .li.active { border-bottom: 1px solid #d30a2d; } .SubnavBox .SubImg .imgbox { position: absolute; top: 0; left: 0; width: 100%; z-index: 1; -webkit-transition: all 0.8s; transition: all 0.8s; opacity: 0; } .SubnavBox .SubImg .imgbox.active { opacity: 1; -webkit-transition-delay: 0s; transition-delay: 0s; z-index: 2; } .SubnavBox .SubImg .imgbox img.active { top: 193px; left: 440px; position: absolute; } .SubnavBox .SubImg .imgbox .SubImgIov { position: absolute; top: 200px; right: 120px; width: 400px;display: none } .SubnavBox .SubImg .imgbox.active .SubImgIov{display: block} .SubnavBox .SubImg .imgbox .SubImgIov .img2 { width: 100%; height: auto; } .SubnavBox .SubImg .imgbox .SubImgIov .img2 img { width: 100%; } .SubnavBox .SubImg .imgbox .SubImgIov .text { margin-top: 30px; } .SubnavBox .SubImg .imgbox .SubImgIov .text .t { margin-top: 10px; padding: 10px; border-bottom: 1px solid #666; font-size: 18px; color: #f9f9f9; } .SubnavBox .SubImg .imgbox .SubImgIov .text .t span { width: 140px; float: right; color: #999; } .SubnavBox.active { display: block; } .navOneClassChild { display: none; } /*--头部产品搜索框--*/ .headerIov { display: none; } .header .con .nav input { cursor: pointer; } .header .con .nav .ss { width: 40px; overflow: hidden; position: relative; background: url(../images/ss.png) no-repeat center center; height: 40px; cursor: pointer;background-size: 30px 30px } .SsIov { width: 200px; height: 40px; position: relative; background-color: #fff; font-size: 0; position: absolute; top: 0; left: 0; opacity: 0; -webkit-transition: all 0.3s; transition: all 0.3s; } .SsIov input { width: -webkit-calc(100% - 40px); width: calc(100% - 40px); line-height: 38px; font-size: 14px; color: #333; display: inline-block; outline: none; border: none; padding-left: 5px; } .SsIov button { width: 40px; display: inline-block; outline: none; border: none; height: 40px; vertical-align: top; } .SsIov button img { max-width: 90%; margin: 0 auto; width: 30px;height: auto; } .header .con .nav .ss.on { width: 200px; } .header .con .nav .ss.on .SsIov { opacity: 1; } /*--头部中英文切换--*/ .En { position: relative; } .EnIov { position: absolute; top: 100%; left: 50%; padding: 10px 5px; background-color: #fff; -webkit-border-radius: 5px; border-radius: 5px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); opacity: 0; -webkit-transition: all 0.3s; transition: all 0.3s; } .EnIov a { display: block; font-size: 14px !important; color: #333 !important; line-height: 30px !important; white-space: nowrap; } .En:hover .EnIov { opacity: 1; } .EnIov::before { content: ""; border: 7px solid transparent; border-bottom-color: #fff; position: absolute; top: -14px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .EnIov a:hover { background-color: #eee; } /*--banner--*/ .bannerBox { overflow: hidden; position: relative; width: 100%; display: block; z-index: 1;height: 100vh; } .banner { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; z-index: 0; position: fixed; top: 0; left: 0; width: 100%; z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: opacity; } .banner::before { content: ""; width: 32px; height: 44px; background: url(../images/icon1.png) no-repeat; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); bottom: 40px; z-index: 2; -webkit-animation: donghua2 1s ease-in-out infinite alternate; } @-webkit-keyframes donghua2 { from { bottom: 10px; } to { bottom: 40px; } } @keyframes donghua2 { from { bottom: 10px; } to { bottom: 40px; } } .banner.active { -webkit-filter: blur(15px); filter: blur(15px); } .banner ul li { overflow: hidden; } .banner a { display: block; } .banner img { display: block; position: relative; width: 100%; height: 100%; } .banner .swiper-pagination {display: none; width: 100%; top: 50%; right: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); text-align: right; padding-right: 55px; font-size: 16px; color: #fff; } .banner .swiper-pagination .paginationNum { padding-right: 5px; } /* .banner .swiper-pagination::before { content: ""; width: 100%; height: 1px; background-color: rgba(255, 255, 255, 0.3); position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } */ .banner .swiper-button-next, .banner .swiper-button-prev { width: 16px; height:16px; background: url(../images/jiant12.png) no-repeat; margin-top: 0; z-index: 20;top: 50%;transform: translateY(-50%);background-size: contain; } .banner .swiper-button-prev { left: 50px;} .banner .swiper-button-next {right: 50px; -webkit-transform:translateY(-50%) rotate(180deg); -ms-transform:translateY(-50%) rotate(180deg); transform:translateY(-50%) rotate(180deg); } .BannerText { width: 100%; position: absolute; color: #fff; z-index: 9; top: 35%; left: 0; } .BannerText h3 { font-size: 40px; } .BannerText h5 { font-size: 24px; } .BannerText p { font-size: 24px; text-transform: uppercase; margin-top: 90px; line-height: 1; } .banner ul li.swiper-slide-active .BannerText p { -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); opacity: 1; visibility: visible; -webkit-transition: all .8s ease; transition: all .8s ease; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .banner ul li.swiper-slide-active .BannerText h3 { -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); opacity: 1; visibility: visible; -webkit-transition: all .8s ease; transition: all .8s ease; -webkit-transition-delay: 0.6s; transition-delay: 0.6s; } /*--home1--*/ .home1 { padding: 20px; font-size: 0; overflow: hidden; position: relative; z-index: 2; } .home1Box { width: 50%; padding: 20px; position: relative; display: inline-block; } .home1Box .bj { width: 100%; height: auto; overflow: hidden; } .home1Box .bj img { width: 100%; -webkit-transition: all 0.3s; transition: all 0.3s; } .home1BoxText { position: absolute; bottom: 0; left: 0; width: 100%; color: #fff; padding: 0 60px 60px; } .home1BoxText h5 { font-size: 24px; } .home1BoxText p { font-size: 14px; line-height: 24px; margin-top: 10px; } .home1Box:hover .bj img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } /*--home2--*/ .home2 { padding: 100px 0; overflow: hidden; position: relative; z-index: 2; } .home2 .title { text-align: center; } .home2 .title h5 { font-size: 36px; color: #fff; } .home2Con { margin-top: 75px; padding-top: 40px; font-size: 0; } .home2ConBox { width: 50%; display: inline-block; position: relative; vertical-align: top; } .home2ConBox .home2ConBox_swiper{padding-bottom: 70px;} .home2ConBox .home2ConBox_swiper .swiper-slide{overflow: hidden;} .home2ConBox:last-child { padding-left: 45px; } .home2ConBoxImg { width: 100%; overflow: hidden; height: auto; } .home2ConBoxImg img { width: 100%; -webkit-transition: all 0.3s; transition: all 0.3s; } .home2ConBoxTextOne { position: absolute; bottom: -70px; right: 0; padding: 25px 30px; background: #fff;width: 575px;max-width: 100%; } .home2ConBoxTextOne p { font-size: 16px; color: #999; } .home2ConBoxTextOne h3 { font-size: 20px; color: #d30a2d; margin-top: 10px; -webkit-transition: all 0.3s; transition: all 0.3s; } .home2ConBoxTextOne .data { font-size: 18px; color: #d30a2d; margin-top: 25px; font-weight: bold; } .home2ConBoxList { padding-bottom: 30px; border-bottom: 1px solid #d30a2d; font-size: 0; padding-top: 25px; } .home2ConBoxList:first-child { padding-top: 0; } .home2ConBoxImgSm { float: right; width: 25%; overflow: hidden; } .home2ConBoxImgSm img { width: 100%; -webkit-transition: all 0.3s; transition: all 0.3s; } .home2ConBoxText { width: 75%; padding-right: 60px; } .home2ConBoxText h3 { font-size: 18px; line-height: 30px; color: #fff; -webkit-transition: all 0.3s; transition: all 0.3s; } .home2ConBoxText p { font-size: 16px; color: #999; margin-top: 10px; } .home2ConBoxText .data { font-size: 18px; color: #d30a2d; margin-top: 25px; font-weight: bold; } @media (min-width: 768px) { .home2ConBoxList:hover img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .home2ConBoxList:hover h3 { color: #d30a2d; } .home2ConBox:first-child:hover h3 { color: #d30a2d; } .home2ConBox:first-child:hover img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } } /*--home3--*/ .home3 { padding: 0 40px 40px; overflow: hidden; position: relative; z-index: 2; } .home3ConBox { width: 31.5%; display: inline-block; margin-left: 2%; background: #efeff0; text-align: center; -webkit-transition: all 0.3s; transition: all 0.3s; vertical-align: top;} .home3ConBox a { display: block; width: 100%; height: 100%; height: 390px;padding-top: 140px;} .home3ConBox:first-child { margin-left: 0; } .home3ConBoxIcon { width: 60px; height: 60px; overflow: hidden; display: inline-block; vertical-align: top; } .home3ConBoxIcon img { width: 100%; -webkit-transition: all 0.3s; transition: all 0.3s; } .home3ConBoxIcon .iov { display: none; } .home3ConBoxText { width: 260px; display: inline-block; margin-left: 35px; text-align: left; color: #3d3f41; -webkit-transition: all 0.3s; transition: all 0.3s; } .home3ConBoxText h3 { font-size: 20px; } .home3ConBoxText p { font-size: 14px; margin-top: 15px; height: 45px;} .home3ConBox:hover { background: #d30a2d; } .home3ConBox:hover .iov { display: block; } .home3ConBox:hover .sow { display: none; } .home3ConBox:hover .home3ConBoxText { color: #fff; } /*搜索*/ .search { background: #161a21; min-height:100vh;} .search .main1 { padding: 80px 0; } .search .main1 .search_box { width: 60%; margin: 30px auto 30px; border: 1px solid #d30a2d; -webkit-border-radius: 25px; border-radius: 25px; overflow: hidden; } .search .main1 .search_box input { padding: 0 20px; line-height: 48px; color: #333; } .search .main1 .search_box .btn { background-color: #d30a2d; width: 80px; cursor: pointer; border: none; } .search .main1 .search_box .btn img { width: 30px; } .search .main1 .content { border-top: 1px solid #dddddd; } .search .main1 .content .length { padding: 10px 0; } .search .main1 .content .block_box .block { padding: 20px 0; } .search .main1 .content .block_box .block:not(:first-child) { border-top: 1px solid #dddddd; } .search .main1 .content .block_box .block .img { width: 23.33333%; } .search .main1 .content .block_box .block .img .picture_container { padding-top: 60.71429%; } .search .main1 .content .block_box .block .img .picture_container img{max-height: 100%;max-width: 100%;} .search .main1 .content .block_box .block .txt { width: 70%; padding-left: 20px; } .search .main1 .content .block_box .block .txt .name { font-size: 20px; margin-bottom: 10px; font-weight: bold; max-height: 48px; line-height: 24px; -webkit-transition: all 0.5s; transition: all 0.5s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; } .search .main1 .content .block_box .block .txt .abstract { display: -webkit-box; height: 52px; line-height: 26px; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: #fff; } .search .main1 .content .block_box .block:hover .txt .name { color: #d30a2d; } .flex { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .flex_center { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; -ms-flex-align: center; align-items: center; } .flex_column { -webkit-box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; } .flex_wrap { -webkit-box-lines: multiple; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; } .flex_row_center { -webkit-box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; -ms-flex-pack: center; justify-content: center; } .flex_row_start { -webkit-box-pack: start; -webkit-justify-content: flex-start; -moz-justify-content: flex-start; -ms-justify-content: flex-start; -o-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; } .flex_row_end { -webkit-box-pack: end; -webkit-justify-content: flex-end; -moz-justify-content: flex-end; -ms-justify-content: flex-end; -o-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; } .flex_row_justify { -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -o-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .flex_column_center { -webkit-box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; -ms-flex-align: center; align-items: center; } .flex_column_start { -webkit-box-align: start; -webkit-align-items: flex-start; -moz-align-items: flex-start; -ms-align-items: flex-start; -o-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } .flex_column_end { -webkit-box-align: end; -webkit-align-items: flex-end; -moz-align-items: flex-end; -ms-align-items: flex-end; -o-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; } .flex1 { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .flex_rank_1 { -webkit-box-ordinal-group: 1; -ms-flex-order: 1; -webkit-order: 1; order: 1; } .flex_rank_2 { -webkit-box-ordinal-group: 2; -ms-flex-order: 2; -webkit-order: 2; order: 2; } /* 图片居中 */ .picture_container { position: relative; overflow: hidden; background: none; } .picture_container img { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; -webkit-transition: all .3s linear; transition: all .3s linear; } /*--底部--*/ .footerbox { background: #2d3337; padding: 100px 0 50px; position: relative; z-index: 100; } .footerboxTop { color: #919a9f; font-size: 0; } .footerboxTopNav { width: 100%; } .footerboxTopNav dl { display: inline-block; vertical-align: top; padding-right: 100px; } .footerboxTopNav dl:last-child { padding-right: 0; } .footerboxTopNav dl dt { font-size: 14px; padding-bottom: 20px; position: relative; margin-bottom: 10px; font-weight: bold; } .footerboxTopNav dl dt::before { content: ""; width: 20px; height: 1px; background: #515b62; position: absolute; bottom: 0; left: 0; } .footerboxTopNav dl dd { font-size: 14px; margin-top: 5px; color: #919a9f; display: block; } .footerboxTopNav dl dd a { font-size: 14px; margin-top: 5px; color: #919a9f; display: block; -webkit-transition: all 0.3s; transition: all 0.3s; } .footerboxTopNav dl dd a:hover { color: #c5cdd1; } .footerboxTopNav dl .dtTow { margin-top: 30px; } .footerboxTopNav dl form { margin-top: 15px; } .footerboxTopNav dl form input { width: 200px; line-height: 46px; border: none; background: #282d30; vertical-align: top; padding: 0 10px 0 30px; color: #919a9f; font-size: 14px; color: #999; } .footerboxTopNav dl form button { width: 48px; height: 48px; background: #828a8f url(../images/jiant3.png) no-repeat center center; border: none; } .footerbox .social-share { margin-top: 0; } .footerboxTopNavIcon { display: inline-block; width: 24px; height: 24px; margin: 20px 3px 0; -webkit-border-radius: 50%; border-radius: 50%; vertical-align: top; position: relative; } .footerboxTopNavIcon a { display: block; width: 100%; height: 100%; } .footerboxTopNavIcon a .iov { display: none; } .footerboxTopNavIcon a img { width: 100%; height: 100%; -webkit-transition: all 0.3s; transition: all 0.3s; } .footerboxTopNavIcon:hover a .sow { display: none; } .footerboxTopNavIcon:hover a .iov { display: block; } .footerboxTopNavIconIov { width: 100px; height: 100px; background: #fff; padding: 5px; -webkit-border-radius: 5px; border-radius: 5px; position: absolute; bottom: 120%; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); display: none; -webkit-transition: all 0.3s; transition: all 0.3s; } .footerboxTopNavIconIov img { width: 100%; height: 100%; } .footerboxTopNavIcon:hover .footerboxTopNavIconIov { display: block; } .footerboxBot { margin-top: 100px; } .footerboxBot .tit { padding-bottom: 45px; border-bottom: 1px solid #505558; } .footerboxBot .tit .logo2 { display: inline-block; width: 174px; height: 30px; vertical-align: middle; } .footerboxBot .tit h5 { font-size: 28px; color: #cacbcc; padding-left: 30px; display: inline-block; vertical-align: middle; } .footerboxBotTextOne { padding-top: 40px; } .footerboxBotTextOneFl { font-size: 14px; color: #3e4347; font-weight: bold; } .footerboxBotTextOneFl a { display: inline-block; font-size: 14px; color: #919a9f; padding: 0 20px; font-weight: lighter; } .footerboxBotTextOneFl a:first-child { padding-left: 0; } .footerboxBotTextOne .En .text { padding-left: 25px; font-size: 14px; color: #919a9f; position: relative; } .footerboxBotTextOne .En .text::before { content: ""; width: 14px; height: 14px; background: url(../images/icon10.png) no-repeat; position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .footerboxBotTextOne .En .EnIov { top: auto; bottom: 30px; padding: 10px; width: 100%; text-align: center; } .footerboxBotTextOne .En .EnIov::before { left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); bottom: -14px; border-bottom-color: transparent; border-top-color: #fff; top: auto; } .footerboxBotTextTow { padding-top: 10px; font-size: 14px; color: #919a9f; } .footerboxBotTextTow a { display: inline-block; font-size: 14px; color: #919a9f; } /*产品*/ .product1 { position: relative; overflow: hidden; background-color: #010101; } .product1Img { width: 100%; height: 100vh; overflow: hidden; } .product1Img img.active { position: absolute; top: 193px; left: 32%; width: auto; } .product1Img img { width: 100%; } .product1Img .imgbox { position: absolute; top: 0; left: 0; width: 100%; z-index: 1; -webkit-transition: all 0.8s; transition: all 0.8s; opacity: 1; } .product1Img .imgbox.active { opacity: 1; -webkit-transition-delay: 0s; transition-delay: 0s; z-index: 2; } .product1Img .imgbox .SubImgIov { position: absolute; top: 200px; right: 120px; width: 400px; } .product1Img .imgbox .SubImgIov .img2 { width: 100%; height: auto; } .product1Img .imgbox .SubImgIov .img2 img { width: 100%; } .product1Img .imgbox .SubImgIov .text { margin-top: 30px; } .product1Img .imgbox .SubImgIov .text .t { margin-top: 10px; padding: 10px; border-bottom: 1px solid #666; font-size: 18px; color: #f9f9f9; } .product1Img .imgbox .SubImgIov .text .t span { width:180px; color: #999; flex: 1;float:right;} .product1TextCon { width: 1680px; margin: 0 auto; } .product1Text { position: absolute; top: 40%; left: 50px; width: 100%; z-index: 2; } .product1Text p { font-size: 30px; color: #d30a2d; } .product1Text h5 { font-size: 35px; color: #f9f9f9; margin-top: 15px; } .product2 { position: relative; background: #0a0b0e; overflow: hidden; } .product2VideoSwitch { position: absolute; top: 0; left: 0; text-align: center; z-index: 100; width: 100%; height: 100%;cursor: pointer; } .product2VideoSwitch i{ width: 35px; height: 35px; background: url(../images/icon13.png)no-repeat; background-size: contain; position: absolute; top: 30px; right: 30px; z-index: 20; display: none; } .product2VideoSwitch.active i{display: block;} .product2VideoSwitch img {cursor: pointer; width: 100%; width: 99px; height: 99px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .product3 { position: relative; padding: 120px 0 150px; overflow: hidden; background-size: cover; } .product3Con { width: 1299px; margin: 0 auto; color: #fff; } .product3Tit h5 { font-size: 24px; line-height: 46px;} .product3Tab-mod { margin-top: 120px; } .product3Tab-mod .tab-term { display: inline-block; font-size: 18px; border-bottom: 2px solid transparent; -webkit-transition: all 0.3s; transition: all 0.3s; margin-right: 20px; margin-top: 40px; cursor: pointer; } .product3Tab-mod .tab-modTit { display: inline-block; width: 140px; font-size: 24px; margin-top: 40px; } .product3Tab-mod .tab-term.active, .product3Tab-mod .tab-term:hover { color: #d30a2d; border-color: #d30a2d; } .product3Tab-mod .tab-bar{max-width: 87%;} .product3Tab-mod .tab-cont { position: relative; margin-top: 90px; } .product3Tab-mod .tab-item { position: absolute; top: 0; left: 0; display: none; } .product3Tab-mod .tab-item.active { position: static; } .product3TabitemBox { width: auto; margin-right: 100px; display: inline-block; } .product3TabitemBox p { font-size: 14px; color: #fff; } .product3TabitemBox .num { font-size: 72px; color: #d30a2d; line-height: 1; margin-top: 20px; font-family: Rubik; } .product3TabitemMore { padding-left: 30px; position: absolute; bottom: 0; right: 0; cursor: pointer; } .product3TabitemMore i{width: 24px;height: 24px;background: #d30a2d;border-radius: 50%;display: inline-block;position: relative;vertical-align: bottom; -webkit-animation: ldonhua 1s infinite alternate;margin-right: 10px;} .product3TabitemMore i::before{width: 14px;height: 2px;content: "";background: #fff;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);} .product3TabitemMore i::after{width: 2px;height: 14px;content: "";background: #fff;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);} .product3TabitemMore .t { font-size: 14px; color: #fff; display: inline-block; line-height: 24px;transition: all 0.3s; } .product3TabitemMore:hover .t{color: #d30a2d;} @keyframes ldonhua { from {background:#d30a2d ;box-shadow: 0 0 0 #d30a2d;} to {background:#810116 ;box-shadow: 0 0 8px #d30a2d;} } .product3ModalBox { color: #fff; display: none; } .product3ModalBox .modal { width: 100%; height: 100%; overflow: auto; position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0.4); z-index: 1000; } .product3ModalBox .modal-content { width: 88%; height: auto; background: #161a21; padding: 150px 120px 175px 140px; margin: 0 auto; position: absolute; top: 200px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .product3ModalBox .modal-header p { font-size: 30px; color: #d30a2d; } .product3ModalBox .modal-header h2 { font-size: 36px; color: #fff; } .product3ModalBox .modal-body { margin-top: 40px; } /*.product3ModalBox .modal-body .ModalBoxList p span{font-size: 24px !important;}*/ .modal-body table{width: 100%} .modal-body table tr{ border-bottom: 1px solid #45484d; font-size: 18px; } .modal-body table tr td{border: none;padding: 15px 0 10px;} .modal-body table tr td:first-child{ width: 150px; } /*.ModalBoxLists h5 { display: inline-block;}*/ /*.ModalBoxListsCon { display: inline-block; }*/ .ModalBoxListsConBr { margin-top: 5px; padding-left: 150px; } .product3ModalBoxclose { position: absolute; top: -90px; right: 0; width: 50px; height: 50px; cursor: pointer; } .product3ModalBoxclose img { width: 100%; } .product4 { background: #161a21; padding: 100px 0; overflow: hidden; } .product4Con { width: 1400px; margin: 0 auto; } .product4ConTit { text-align: center; padding-bottom: 45px} /* .product4ConTit { text-align: center; padding-bottom: 45px; border-bottom: 1px solid #d30a2d; } */ .product4ConTit h5 { font-size: 36px; color: #d30a2d; line-height: 1; } .product4ConTit p { margin-top: 20px; font-size: 14px; color: #999999; line-height: 24px; } .product4ConBox { margin-top: 55px; } .product4ConBoxImg { width: 50%; float: right; } .product4ConBoxImg img { width: 100%; } .product4ConBoxText { width: 50%; float: left; padding-right: 35px; } .product4ConBoxText h3 { font-size: 24px; color: #d30a2d; } .product4ConBoxText .text { height: 286px; overflow-y: auto;} .product4ConBoxText .text::-webkit-scrollbar { display:none; } .product4ConBoxText .text p { font-size: 18px; color: #fff; margin-top: 10px; } .product4ConBoxText .text p:first-child { margin-top: 0; margin-bottom: 15px; } .product4ConBoxImg .swiper-button-prev, .product4ConBoxImg .swiper-button-next { width: 8px; height: 15px; background: url(../images/jiant4.png) no-repeat; left: 20px;transform: translateY(-50%); margin-top: 0;} .product4ConBoxImg .swiper-button-next { left: auto; right: 20px; transform: translateY(-50%) rotate(180deg);} .product4ConBoxImg .swiper-button-prev.swiper-button-disabled, .product4ConBoxImg .swiper-button-next.swiper-button-disabled { opacity：0 !important；} .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled{opacity:0;} .product4ConBox:nth-child(even) .product4ConBoxImg { float: left; } .product4ConBox:nth-child(even) .product4ConBoxText { float: right; padding-right: 0; padding-left: 35px; } .product4ConMore { margin-top: 110px; } .product4ConMore .More { width: 215px; height: 60px; background: #ecebea; margin-left: 10px; display: inline-block; position: relative; } .product4ConMore .More:first-child { margin-left: 0; -webkit-transition: all 0.3s; transition: all 0.3s; } .product4ConMore a { display: block; width: 100%; height: 100%; padding-left: 38px; font-size: 18px; color: #333; line-height: 60px; -webkit-transition: all 0.3s; transition: all 0.3s; text-align: left; } .product4ConMore img { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: 30px; } .product4ConMore .iov { display: none; } .product4ConMore .More:hover .iov { display: block; } .product4ConMore .More:hover .sow { display: none; } .product4ConMore .More:hover { background: #d30a2d; } .product4ConMore .More:hover a { color: #fff; } /*产品-咨询留言*/ .message1 { width: 100%; overflow: hidden; position: relative; overflow: hidden; } .message1Img { width: 100%; height: auto; } .message1Img img { width: 100%; } .message1Text { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .message1TextCon { width: 1400px; margin: 0 auto; color: #fff; position: relative; height: 100%; } .message1TextCon .text { vertical-align: bottom; position: absolute; left: 0; bottom: 0; } .message1TextCon p { font-size: 48px; } .message1TextCon h2 { font-size: 80px; line-height: 1; text-transform: uppercase; } .message2 { background-color: #161a21; padding: 35px 0 150px; overflow: hidden; } .message2Con { width: 1400px; margin: 0 auto; } .message2nav { font-size: 18px; color: #fff; } .message2nav a { font-size: 18px; color: #fff; } .message2Box { margin-top: 75px; background-color: #2d3337; padding: 70px 200px 100px; } .message2Box h5 { text-align: center; font-size: 24px; color: #e9e9e9; } .message2BoxList { margin-top: 35px; } .message2BoxListInputbox {border-bottom: 1px solid #43474b; display: flex;position: relative;} .message2BoxListInputbox .ECCon3inpboxDrop{width: calc(100% - 130px);cursor:pointer; } .message2BoxListInputbox .ECCon3inpboxDrop .h{height: auto;color: #fff;padding: 25px 0 15px 30px;z-index: 10; } .message2BoxListInputbox .ECCon3inpboxDrop::before{top: 14px;z-index: 1;} .message2BoxListInputbox .ECCon3inpboxDropDown {top: 100%;z-index: 20;} .message2BoxListInputbox .ECCon3inpboxDropDown .t{display: block;width: 100%;line-height: 45px;text-align: left;transition: all 0.3s;padding: 0 0 0 15px;} .message2BoxListInputbox .ECCon3inpboxDropDown .t:hover{background-color: rgba(255, 255, 255, 0.2);} .LiuYanBox{width: 100%;font-size: 0;} .LiuYanBox .t{font-size: 16px; color: #e9e9e9; width: 130px; text-align: right; display: inline-block; padding: 25px 0 15px 30px;} .LiuYanBox .t span{color: #d80b0b;padding-right: 5px;} .LiuYanBox textarea{ width: calc(100% - 150px); height: 200px; padding: 10px; border: 1px solid #43474b; background: none; margin-top: 30px; float: right; font-size: 14px; color: #fff; } /* 新添下拉框 */ .provinceLi{width: 100%;background: #282c2e;position: absolute;top: 155%;left: 0;max-height: 200px;overflow-y: auto;z-index: 9;display: none;cursor:pointer;z-index: 1;} .companyBox::before{content: "";border: 8px solid transparent;border-top-color: #d30a2d;position: absolute;top:30px;right: 28px;} .provinceLi::-webkit-scrollbar {display: none;}s .provinceLi li{white-space: nowrap;line-height: 40px;color: #999;font-size: 16px;padding-left: 15px;transition: all 0.3s;} .provinceLi li:hover{background-color: rgba(255, 255, 255, 0.2);} .message2BoxListInputbox .t { font-size: 16px; color: #e9e9e9; width: 130px; text-align: right; display: inline-block; padding: 25px 0 15px 30px; } .message2BoxListInputbox .t span { color: #d80b0b; padding-right: 5px; } .message2BoxListInputbox input.qq{width: calc(100% - 140px);} .message2BoxListInputbox input {cursor:pointer; width: 100%; display: inline-block; flex: 1; background: none !important; border: none; font-size: 16px; color: #fff; padding-left: 30px; padding: 25px 0 15px 30px; z-index: 10;} .message2BoxListInputboxLast { width: 700px; display: inline-block; } .message2BoxListSend { display: inline-block; width: 260px; height: 55px; text-align: center; margin-left: 35px; } .message2BoxListSend a { font-size: 16px; color: #d7d7d7; line-height: 55px; } .message2BoxListOn { margin-top: 70px; text-align: center; } .message2BoxListOn button { width: 458px; line-height: 60px; text-align: center; background-color: #d30a2d; border: none; font-size: 18px; color: #fff; } /*新闻*/ .banner2 { position: relative; overflow: hidden; } .banner2Img { width: 100%; overflow: hidden; } .banner2Img img { width: 100%; } .banner2Text { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .banner2TextCon { width: 1400px; color: #fff; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .banner2TextCon p { font-size: 42px; } .banner2TextCon h5 { font-size: 60px; line-height: 1; text-transform: uppercase; } .news1 { background-color: #161a21; padding: 35px 0 100px; overflow: hidden; } .news1Nav { font-size: 18px; color: #fff;overflow: hidden;white-space: nowrap; } .news1Nav a { display: inline-block; font-size: 18px; color: #fff; } .news1ConList { text-align: center; margin-top: 80px; } .news1ConListLi { display: inline-block; } .news1ConListLi a { width: 190px; line-height: 60px; display: inline-block; text-align: center; color: #999; font-size: 20px; } .news1ConListLi.active a { background-color: #d30a2d; color: #fff; } .news1Con { margin-top: 50px; font-size: 0; } .news1ConBox { width: 31%; margin-left: 3.5%; display: inline-block; vertical-align: top; } .news1ConBox:first-child { margin-left: 0; } .news1ConBox:nth-child(3n + 1) { margin-left: 0; } .news1ConBoxImg { width: 100%; overflow: hidden;height: 326px; position: relative;} .news1ConBoxImg img { width: auto; -webkit-transition: all 0.3s; transition: all 0.3s;height: 100%;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%); } .news1ConBoxText { padding: 30px 0; } .news1ConBoxText h5 { font-size: 20px; color: #fff; -webkit-transition: all 0.3s; transition: all 0.3s; display: -webkit-box; height: 48px; line-height: 24px; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .news1ConBoxText p { font-size: 14px; line-height: 24px; color: #999; margin-top: 20px; } .news1ConBoxion { display: inline-block; font-size: 14px; color: #d30a2d; } .news1ConBoxTextData { margin-top: 20px; } .news1ConBoxText .data { font-size: 14px; color: #d30a2d; display: inline-block; } .news1ConBox:hover .news1ConBoxImg img { -webkit-transform:translate(-50%,-50%) scale(1.1); -ms-transform:translate(-50%,-50%) scale(1.1); transform:translate(-50%,-50%) scale(1.1); } .news1ConBox:hover .news1ConBoxText h5 { color: #d30a2d; } /* .news1 .page{text-align: center;} .news1 .page a, .news1 .page .layui-laypage-curr em{ display: inline-block; width: 35px; height: 35px; line-height: 35px; font-size: 18px; color: #fff; font-weight: bold; margin: 0 5px; border: 1px solid #ddd; } .news1 .page .layui-laypage-curr em{ background: #d30a2d; border-color: #d30a2d; width: 35px; height: 35px; line-height: 35px; } */ .FyqBox{width: 100%;text-align: center;margin-top: 50px;} .FyqBox .jiant{ width: 40px; cursor:pointer; height: 40px; /* border: 1px solid #ddd; */ background: url(../images/jiant4.png)no-repeat center center; display: inline-block; } .FyqBox .FyqNext{transform: rotate(180deg);} .FyqBox p{margin: 0 30px;color: #fff; display: inline-block;line-height: 40px;vertical-align: top;} .FyqBox p span{padding: 0 5px;} .news1 .page .layui-laypage-curr .layui-laypage-em{display: none;} .x-more { text-align: center; margin-top: 25px; position: relative; } .x-more a { width: 100%; height: 100%; display: inline-block; font-size: 18px; color: #d30a2d; padding-bottom: 35px; } .x-more::before { content: ""; width: 13px; height: 21px; background: url(../images/jiant8.png) no-repeat; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); cursor: pointer; } /*新闻详情页*/ .news1Xq { width: 1200px; margin: 0 auto; margin-top: 90px; } .news1XqTit { text-align: center; color: #fff; } .news1XqTit h5 { font-size: 30px; } .news1XqTit .data { font-size:12px; margin-top: 10px;color:#aaa8a8 ; } .news1XqCon { margin-top: 25px; } .news1XqImgOne { width: 100%; overflow-x: hidden; margin-top: 25px; } .news1XqImgOne img { width: 100%; } .news1XqCon { width: 960px; margin: 0 auto; margin-top: 25px; } .news1XqConText p { font-size: 14px; line-height: 24px; color: #666; margin-top: 25px;text-indent: 0 !important; } .news1XqConText p video{max-width: 100%;} .news1XqConText img{max-width: 100%;} .news1XqConText h3 { font-size: 24px; margin-top: 25px; color: #fff; } .news1XqConImg { font-size: 0; margin: 50px 0; } .news1XqConImg img { width: 50%; display: inline-block; padding: 0 5px; vertical-align: top; height: 300px; } .news1XqConText .t { font-size: 14px; line-height: 24px; color: #666; margin-top: 10px; } .social-share { font-size: 0; } .social-share a { width: 73px; height: 73px; position: relative; display: inline-block; margin-right: 1px; -webkit-transition: none 0.3s; transition: none 0.3s; } .social-share a:hover { background: #de0012; } .social-share a.icon-weibo { background: #232a2f url(../images/icon16.png) no-repeat center center; } .social-share a.icon-qq { background: #232a2f url(../images/icon17.png) no-repeat center center; } .social-share a.icon-wechat { background: #232a2f url(../images/icon18.png) no-repeat center center; } .social-share a:hover.icon-weibo { background: #de0012 url(../images/icon16-1.png) no-repeat center center; } .social-share a:hover.icon-qq { background: #de0012 url(../images/icon17-1.png) no-repeat center center; } .social-share a:hover.icon-wechat { background: #de0012 url(../images/icon18-1.png) no-repeat center center; } .news1Ly { width: 960px; margin: 85px auto 0; } .news1Ly h5 { text-align: center; font-size: 18px; color: #f6f6f6; } .news1Ly form { margin-top: 25px; font-size: 0; } .news1Ly form input { width: 49%; margin-left: 2%; padding-left: 24px; background: #2d3337; border: none; font-size: 16px; color: #96999b; line-height: 60px; } .news1Ly form input:first-child { margin-left: 0; } .news1Ly form textarea { width: 100%; margin-top: 20px; background: #2d3337; padding: 10px 10px 10px 24px; font-size: 16px; color: #96999b; height: 220px; } .news1Ly form button { margin-top: 40px; width: 145px; line-height: 50px; text-align: center; font-size: 16px; color: #fff; background: #de0012; border: none; display: block; } .news1LyYzm { width: 50%; background: #2d3337; display: inline-block; position: relative; } .news1LyYzm input { padding-left: 24px; border: none; color: #96999b; line-height: 60px; width: 100% !important; } .news1LyYzmImg { width: 140px; height: 60px; vertical-align: top; display: inline-block; margin-left: 30px; } .news1LyYzmImg img{max-width: 100%;} .textIov { font-size: 16px; color: #de0012; position: absolute; top: 50%; right: 10px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); display: none; } .news1LyYzm.active .textIov { display: block; } .news1XqRelevant { margin-top: 100px; } .news1XqRelevantTit h5 { font-size: 24px; color: #fff; } .news1XqRelevant .news1Con { margin-top: 25px; } .bd_weixin_popup_bg { position: absolute; left: -400px; top: -400px; width: 260px; height: 320px; border: 0; padding: 0; margin: 0; opacity: 0; filter: alpha(opacity=0); z-index: 11000; } .bd_weixin_popup { position: absolute; left: -400px; top: -400px; padding: 10px; width: 240px; height: 300px; background: #fff; border: solid 1px #d8d8d8; z-index: 11001; font-size: 12px; } .bd_weixin_popup .bd_weixin_popup_head { font-size: 12px; font-weight: bold; text-align: left; line-height: 16px; height: 16px; position: relative; color: #000; } .bd_weixin_popup .bd_weixin_popup_head .bd_weixin_popup_close { width: 16px; height: 16px; position: absolute; right: 0; top: 0; color: #999; text-decoration: none; font-size: 16px; } .bd_weixin_popup .bd_weixin_popup_head .bd_weixin_popup_close:hover { text-decoration: none; } .bd_weixin_popup .bd_weixin_popup_main { padding: 15px 10px; min-height: 150px; _height: 150px; } .bd_weixin_popup .bd_weixin_popup_foot { font-size: 12px; text-align: left; line-height: 22px; color: #666; } .bdshare-button-style0-16 .bds_tsina { background-image: none; width: 73px; height: 73px; } .bdshare-button-style0-16 .bds_sqq { background-image: none; width: 73px; height: 73px; } .bdshare-button-style0-16 .bds_weixin { background-image: none; width: 73px; height: 73px; } .bdshare-button-style0-16 .bds_iguba { background-position: 0 -1300px; } .bdshare-button-style0-16 { zoom: 1; } .bdshare-button-style0-16:after { content: "."; visibility: hidden; display: block; height: 0; clear: both; } .bdshare-button-style0-16 a, .bdshare-button-style0-16 .bds_more { float: left; font-size: 12px; padding-left: 0 !important; line-height: 16px; height: 16px; background-image: url(../images/icons_0_16.png?v=d754dcc0.png); background-repeat: no-repeat; cursor: pointer; margin: 0 1px 0 0 !important; } .bdshare-button-style0-16 a:hover { color: #333; opacity: .8; filter: alpha(opacity=80); } .bdshare-button-style0-16 .bds_more { color: #333; float: left; } .bdshare-button-style0-16 .bds_count { color: #333; background: url(../images/sc.png?v=a970ff04.png) no-repeat 0 -30px; width: 42px; height: 16px; padding: 0; margin: 6px 0 0; text-align: center; } .bdshare-button-style0-16 .bds_count:hover { background-position: -42px -30px; } .bdshare-button-style0-16 .bds_button_image { float: left; cursor: pointer; margin: 6px 6px 0 0; height: auto; padding: 0; } .bdshare-button-style0-16 .bdshare_button_count { background: url(../images/sc.png?v=a970ff04.png) no-repeat 0 0; width: 44px; height: 24px; line-height: 24px; } .bdshare-button-style0-16 .bdshare_button_count:hover { background-position: -44px 0; } .bds_tfh, .bds_baidu, .bds_qq, .bds_msn, .bds_sohu, .bds_qy, .bds_leho, .bds_ifeng, .bds_ff, .bds_tuita, .bds_ms, .bds_deli, .bds_s51, .bds_t163, .bds_share189, .bds_xg, .bds_s139 { display: none; } /*新闻评论*/ .displayMessage{padding-top: 55px;border-top: 1px solid #2a2e34;margin-top: 60px;} .displayMessage .tit{width: 100%;text-align: left;font-size: 18px;color: #fff;text-align: center;} .displayMessage p{margin-top: 25px;font-size: 16px;color: #fff;} .displayMessage .name, .displayMessage .data{margin-top: 5px;display: inline-block;font-size: 14px;} .displayMessage .data{margin-left: 30px;color: #aaa8a8;} /*行业应用*/ .IndustryYyIco { font-size: 0; } .IndustryYyIcoBox { width: 33%; display: inline-block; text-align: center; margin-top: 75px; vertical-align: top; } .IndustryYyIcoBoxImg { text-align: center; overflow: hidden; width: 100%; min-height: 63px; position: relative; } .IndustryYyIcoBoxImg img { max-width: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .IndustryYyIcoBoxText { width: 100%; padding: 20px 0 55px; } .IndustryYyIcoBoxText h5 { font-size: 20px; color: #fff; } .IndustryYyIcoBoxText p { font-size: 16px; color: #999; margin-top: 10px; } .IndustryYyConTit { text-align: center; margin-top: 95px; } .IndustryYyConTit h5 { font-size: 36px; color: #d30a2d; line-height: 1; } .IndustryYyCon { font-size: 0; } .IndustryYyConBox { width: 31%; margin-left: 3%; display: inline-block; position: relative; margin-top: 40px; } .IndustryYyConBox:first-child { margin-left: 0; } .IndustryYyConBox:nth-child(3n + 1) { margin-left: 0; } .IndustryYyConBoxImg { width: 100%; overflow: hidden; } .IndustryYyConBoxImg img { width: 100%; -webkit-transition: all 0.3s; transition: all 0.3s; } .IndustryYyConBoxText { width: 100%; position: absolute; bottom: 0; left: 0; padding: 25px; height: 100%; -webkit-box-shadow: 0px -33px 70px #333 inset; box-shadow: 0px -33px 70px #333 inset; } .IndustryYyConBoxText h5 { font-size: 18px; color: #fff; position: absolute; bottom: 25px; } .IndustryYyConBox:hover .IndustryYyConBoxImg img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } /*行业应用-制造业*/ .banner3 { position: relative; } .banner3Img { width: 100%; overflow: hidden; } .banner3Img img { width: 100%; } .banner3Text { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #fff; text-align: center; } .banner3Text p { font-size: 36px; font-weight: bold; } .banner3Text h5 { font-size: 24px; margin-top: 10px; } .IndustryYy-Manu .news1 { padding: 35px 0 0; } .IndustryYyManu { background-color: #161a21; padding: 100px 0 120px; } .IndustryYyManuTit { text-align: center; } .IndustryYyManuTit h5 { font-size: 36px; color: #fff; line-height: 1; } .IndustryYyManuCon { margin-top: 55px; } .IndustryYyManuConBox { font-size: 0; margin-top: 70px; } .IndustryYyManuConBox:first-child { margin-top: 0; } .IndustryYyManuConBoxImg { float: left; width: 50%; padding: 0 0 29px 29px; position: relative; } .IndustryYyManuConBoxImg .img { width: 100%; overflow: hidden; } .IndustryYyManuConBoxImg .img img { width: 100%; -webkit-transition: all 0.3s; transition: all 0.3s; position: relative; z-index: 1; } .IndustryYyManuConBoxImg .img::before { content: ""; width: 90%; height: 90%; background-color: #d30a2d; position: absolute; left: 10px; bottom: 10px; -webkit-transition: all 0.3s; transition: all 0.3s; opacity: 0; } .IndustryYyManuConBox:hover .IndustryYyManuConBoxImg .img::before { opacity: 1; } .IndustryYyManuConBox:hover .IndustryYyManuConBoxImg .img img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .IndustryYyManuConBoxText { width: 50%; float: right; padding: 65px 100px 0 65px; } .IndustryYyManuConBoxText h5 { font-size: 18px; color: #fff; } .IndustryYyManuConBoxText p { font-size: 14px; line-height: 24px; color: #999; margin-top: 30px; } .IndustryYyManuConBoxTextMore { margin-top: 110px; width: 160px; line-height: 48px; background-color: #2d3337; position: relative; font-size: 16px; color: #fff; padding-left: 25px; } .IndustryYyManuConBoxTextMore::before { content: ""; width: 25px; height: 17px; background: url(../images/jiant9.png) no-repeat; position: absolute; top: 50%; right: 20px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .IndustryYyManuConBox:hover .IndustryYyManuConBoxTextMore { background: #d30a2d; } .IndustryYyManuConBox:nth-child(even) .IndustryYyManuConBoxImg { float: right; padding: 0 29px 29px 0; } .IndustryYyManuConBox:nth-child(even) .IndustryYyManuConBoxImg .img::before { right:11px; left: auto; } .IndustryYyManuConBox:nth-child(even) .IndustryYyManuConBoxText { float: left; padding: 65px 65px 0 100px; } /*行业应用-制造业详情*/ .IndustryYyManuXqTit { padding-top: 70px; text-align: center; } .IndustryYyManuXqTit h5 { font-size: 24px; color: #fff; } .IndustryYyManuXqCon { margin-top: 70px; font-size: 0; } .IndustryYyManuXqConBox { width: 31%; display: inline-block; text-align: center; margin-left: 3%; margin-top: 40px;} .IndustryYyManuXqConBox:first-child { margin-left: 0; } .IndustryYyManuXqConBox:nth-child(3n + 1){margin-left: 0;} .IndustryYyManuXqConBox p { font-size: 18px; color: #fff; } .IndustryYyManuXqConBoxImg { width: 100%; height: auto; margin-top: 40px; overflow: hidden; } .IndustryYyManuXqConBoxImg img { width: 100%; -webkit-transition: all 0.3s; transition: all 0.3s; } .IndustryYyManuXqConBoxImg:hover img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .IndustryYyManuXqConOne { margin-top: 135px; } .IndustryYyManuXqConOneBox { margin-top: 85px; font-size: 0; } .IndustryYyManuXqConOneBoxImg { float: right; overflow: hidden; width: 45%; } .IndustryYyManuXqConOneBoxImg img { width: 100%; -webkit-transition: all 0.3s; transition: all 0.3s; } .IndustryYyManuXqConOneBoxImg:hover img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .IndustryYyManuXqConOneBoxText { width: 55%; float: left; padding-right: 50px; } .IndustryYyManuXqConOneBoxText h5 { font-size: 24px; color: #fff; margin-bottom: 15px; } .IndustryYyManuXqConOneBoxText p { font-size: 14px; line-height: 24px; color: #999; } .IndustryYyManuXqConOneBox:nth-child(even) .IndustryYyManuXqConOneBoxImg { float: left; } .IndustryYyManuXqConOneBox:nth-child(even) .IndustryYyManuXqConOneBoxText { float: right; padding-right: 0; padding-left: 50px; } /*服务与支持-产品支持*/ .ServiceSupportNav { margin-top: 55px; text-align: center; } .ServiceSupportNavLi { display: inline-block; width: auto; height: 50px; } .ServiceSupportNavLi a { width: 100%; line-height: 50px; padding: 0 50px; font-size: 20px; color: #999; display: block; } .ServiceSupportNavLi.active { background-color: #d30a2d; } .ServiceSupportNavLi.active a { color: #fff; } .ServiceSupportProductCon { font-size: 0; } .ServiceSupportProductConBox { width: 23%; margin-left: 2.5%; display: inline-block; margin-top: 50px; } .ServiceSupportProductConBox:first-child { margin-left: 0; } .ServiceSupportProductConBox:nth-child(4n + 1) { margin-left: 0; } .ServiceSupportProductConBoxImg { width: 100%; overflow: hidden; position: relative; height: 230px; } .ServiceSupportProductConBoxImg img { max-width: 100%; position: absolute; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); left: 50%; } .ServiceSupportProductConBoxImgIov { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(211, 10, 45, 0.8); padding: 25px 30px; color: #fff; text-align: left; opacity: 0; -webkit-transition: all 0.3s; transition: all 0.3s; } .ServiceSupportProductConBoxImgIov h3 { font-size: 24px; position: relative; padding-bottom: 20px; } .ServiceSupportProductConBoxImgIov h3::before { content: ""; width: 30px; height: 2px; background-color: #fff; position: absolute; bottom: 0; left: 0; } .ServiceSupportProductConBoxImgIov .text { margin-top: 30px; } .ServiceSupportProductConBoxImgIov .text a { display: inline-block; font-size: 18px; margin-right: 20px; line-height: 28px; color: #fff; transition: all 0.3s;border-bottom: 1px solid transparent;} .ServiceSupportProductConBoxImgIov .text a:hover{border-color: #fff;} .ServiceSupportProductConBox h5 { font-size: 18px; color: #999; margin-top: 35px; text-align: center; -webkit-transition: all 0.3s; transition: all 0.3s; } /*服务与支持-产品支持-IQ系列*/ .ServiceSupportProductSeriesCon { margin-top: 50px; position: relative; } .ServiceSupportProductSeriesConImg { width: auto; overflow: hidden; position: absolute; top: 0; left: 0; } .ServiceSupportProductSeriesConImg img { width: 100%; } .ServiceSupportProductSeriesConText { height: auto; padding-top: 20px; vertical-align: top; padding-left: 382px; } .ServiceSupportProductSeriesConText h3 { font-size: 24px; position: relative; padding-bottom: 35px; color: #d30a2d; } .ServiceSupportProductSeriesConText h3::before { content: ""; width: 30px; height: 2px; background-color: #d30a2d; position: absolute; bottom: 0; left: 0; } .ServiceSupportProductSeriesConTextTabBar { width: 450px; margin-top: 35px; } .ServiceSupportProductSeriesConTextTabBar .tab-termOne { display: inline-block; margin-right: 30px; font-size: 18px; color: #fff; line-height: 28px; cursor: pointer; } .ServiceSupportProductSeriesConTextTabBar .tab-termOne.active { color: #d30a2d; } .ServiceSupportProductSeriesConTextTabBar .tab-termOne:hover { color: #d30a2d; } .ServiceSupportProductSeriesConTextTabCont { width: 100%; margin-top: 70px; position: relative; } .SSPSeriesConTextTabContBoxLTabMod { font-size: 0; } .SSPSeriesConTextTabContBoxLTabBar { width: 25%; display: inline-block; } .SSPSeriesConTextTabContBoxLTabCont { width: 73%; margin-left: 2%; position: relative; display: inline-block; vertical-align: top; } .SSPSeriesConTextTabContBoxLTabBar .tab-termTwo { width: 100%; height: 100px; background-color: #2d3337; -webkit-transition: all 0.3s; transition: all 0.3s; position: relative; margin-bottom: 1px; font-size: 0; cursor: pointer; } .SSPSeriesConTextTabContBoxLTabBar .tab-termTwo .ico { width: 33%; position: relative; height: 100%; display: inline-block; } .SSPSeriesConTextTabContBoxLTabBar .tab-termTwo .ico img { max-width: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .SSPSeriesConTextTabContBoxLTabBar .tab-termTwo .ico .iov { display: none; } .SSPSeriesConTextTabContBoxLTabBar .tab-termTwo p { font-size: 18px; color: #999; -webkit-transition: all 0.3s; transition: all 0.3s; vertical-align: top; display: inline-block; width: 66%; line-height: 100px; } .SSPSeriesConTextTabContBoxLTabBar .tab-termTwo.active { background-color: #e9e9e9; } .SSPSeriesConTextTabContBoxLTabBar .tab-termTwo.active .iov { display: block; } .SSPSeriesConTextTabContBoxLTabBar .tab-termTwo.active .sow { display: none; } .SSPSeriesConTextTabContBoxLTabBar .tab-termTwo.active p { color: #d30a2d; } .SSPSeriesConTextTabContBoxLTabCont .tab-itemTwo .con { width: 100%; height: 80px; background-color: #e9e9e9; margin-bottom: 8px; position: relative; } .SSPSeriesConTextTabContBoxLTabCont .tab-itemTwo a { display: block; padding-left: 45px; font-size: 18px; color: #2d3337; line-height: 80px; width: 100%; padding-right: 85px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .SSPSeriesConTextTabContBoxLTabCont .tab-itemTwo .con a::before { content: ""; border: 8px solid transparent; border-top-color: #d30a2d; position: absolute; top: 50%; right: 45px;transform: translateY(-50%); } .SSPSeriesConTextTabContBoxLTabCont .tab-itemTwo.Down .con a{position: relative;} .SSPSeriesConTextTabContBoxLTabCont .tab-itemTwo.Down .con a::before { width: 14px; height: 14px; background: url(../images/icon32.png) no-repeat; border: none; } .SSPSeriesConTextTabContBoxLTabCont .tab-itemTwo .con.active a { color: #d30a2d; } /*服务与支持-产品支持-IQ系列-详情*/ .ServiceSupportDetalis { margin-top: 50px;width: 960px;max-width: 100%;margin: 50px auto 0; } .ServiceSupportDetalis img{max-width: 100%;} .ServiceSupportDetalisTit { display: inline-block; padding-bottom: 20px; font-size: 24px; color: #d30a2d; border-bottom: 1px solid #d30a2d; } .ServiceSupportDetalisText { margin-top: 50px;} .ServiceSupportDetalisText table{margin:0 auto;} .ServiceSupportDetalisText video{max-width: 100%;} .ServiceSupportDetalisText h5 { font-size: 18px; color: #fff; } .ServiceSupportDetalisText .content { font-size: 16px; line-height: 30px; color: #999; } .ServiceSupportDetalisBut { display:block; width: 100%; height: 50px; margin-top: 100px; } .ServiceSupportDetalisBut a{ width: 150px; line-height: 50px; background: #d30a2d; display: block; font-size: 20px; color: #fff;position: relative;margin: 0 auto; text-align: center;} /* .ServiceSupportDetalisBut a::before{content: "";width: 20px;height: 14px;background: url(../images/jiant9.png)no-repeat;position: absolute;top: 19px;left: 10px;background-size: contain;transform: rotate(180deg);} */ .ServiceSupportDetalisBut a img{display: inline-block;width: 20px;height: 14px;padding-right: 5px;transform: rotate(180deg);} /*服务与支持-更多支持*/ .SSMoreSupportTabMod { margin-top: 60px; } .SSMoreSupportTabBar { font-size: 0; height: 100px; text-align: center; } .SSMoreSupportTabBar .tab-term { width: 43%; display: inline-block; font-size: 24px; color: #ececec; line-height: 100px; text-align: center; background: #2d3337; cursor: pointer;} .SSMoreSupportTabBar .tab-term.active { background: #d30a2d; color: #fff} .SSMoreSupportTabCont { position: relative; margin-top: 70px; text-align: center; } .SSMoreSupportTabCont .tab-item{display: none} .SSMoreSupportTabCont .tab-item.active{display: block} .SSMoreSupportTabCont .tab-item a { font-size: 18px; color: #999; padding: 0 40px; display: inline-block; -webkit-transition: all 0.3s; transition: all 0.3s; line-height: 30px; } .SSMoreSupportTabCont .tab-item a:hover { color: #fff; } /*服务与支持-更多支持-常见服务问题*/ .SSCommonSP { margin: 50px auto 0;width: 960px; } .SSCommonSPConBox { width: 100%; border-bottom: 1px solid #23272d; padding: 20px 0; position: relative; cursor: pointer; padding-right: 60px; } .SSCommonSPConBox::before { content: ""; width: 10px; height: 10px; border: 2px solid transparent; border-left-color: #979797; border-bottom-color: #979797; position: absolute; top: 26px; right: 24px; transition: all 0.3s; -webkit-transform:rotate(-45deg); -ms-transform:rotate(-45deg); transform:rotate(-45deg); } .SSCommonSPConBox:hover::before{ border-left-color: #d30a2d; border-bottom-color: #d30a2d; } /* .SSCommonSPConBox::after { content: ""; width: 2px; height: 26px; background: #979797; position: absolute; top: 50%; right: 36px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } */ .SSCommonSPConBox.active::before { transform: rotate(-135deg); border-left-color: #d30a2d; border-bottom-color: #d30a2d; } .SSCommonSPConBoxT1 { font-size: 18px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .SSCommonSPConBoxt2 { font-size: 16px; color: #999; margin-top: 20px; display: none;padding-left: 40px; } .SSCommonSPConBoxt2 img{max-width: 100% !important;height: auto !important;} .SSCommonSPConBox.active .SSCommonSPConBoxT1 { color: #d30a2d; } /*服务与支持-更多支持-保修条例*/ .SSWarranty { margin: 50px auto 0; width: 960px;} .SSWarrantyText h5 { font-size: 18px; color: #fff; margin-top: 45px; } .SSWarrantyText .t { font-size: 16px; line-height: 30px; color: #999; margin-top: 30px; } .SSWarrantyText .t span { color: #d30a2d; } .SSWarrantyText table { width: 910px; margin: 40px 0 20px; max-width: 100%; } .SSWarrantyText table th { padding: 25px 20px; font-size: 24px; color: #999; font-weight: inherit; text-align: left; vertical-align: top; } .SSWarrantyText table td { padding: 5px 25px 30px; font-size: 16px; color: #999; line-height: 30px; vertical-align: top; } /*服务与支持-更多支持-免责声明*/ .SSDisclaimers { margin: 50px auto 0;width: 960px; } .SSDisclaimersConText { margin-top: 50px; font-size: 16px; line-height: 30px; color: #999; } .SSDisclaimersConText .t1 { margin-top: 80px; text-align: right; } /*服务与支持-更多支持-维修流程*/ .SSMaintenanceProcess { margin-top: 50px; } .SSMaintenanceProcessCon { margin-top: 50px; text-align: right; } .SSMaintenanceProcessCon img { max-width: 100%; } /*服务与支持-维修服务*/ .SSMaintenanceService { width: 75%; margin: 60px auto; background-color: #1b1f25; font-size: 0; } .SSMaintenanceServiceBox { width: 33.3%; text-align: center; display: inline-block; padding-top: 70px; position: relative; height: 290px; cursor: pointer; overflow: hidden; } .SSMaintenanceServiceBoxImg { width: 100%; overflow: hidden; vertical-align: top; } .SSMaintenanceServiceBoxImg img { max-width: 100%; } .SSMaintenanceServiceBoxText { margin-top: 25px; } .SSMaintenanceServiceBoxText h5 { font-size: 18px; color: #fff; } .SSMaintenanceServiceBoxText p { font-size: 14px; color: #f9f9f9;display: none; } .SSMaintenanceServiceBoxIov { width: 100%; height: 100%; background-color: #2d3337; position: absolute; top: 100%; left: 0; -webkit-transition: all 0.5s; transition: all 0.5s;padding: 20px ;} .SSMaintenanceServiceBoxIov a { font-size: 14px; line-height: 36px; display: block; color: #fff; } .SSMaintenanceServiceBoxIov p { margin-top: 15px; font-size: 14px; color: #fff; } .SSMaintenanceServiceBox.active .SSMaintenanceServiceBoxIov { top: 0; } .SSMaintenanceServiceBox img { max-width: 100%; } /*服务与支持-下载中心*/ .SSDownloadCenterTop { margin-top: 40px; font-size: 0; position: relative; z-index: 5; } .SSDownloadCenterDrop { width: 15%; background-color: #2d3337; position: relative; display: inline-block; margin-left: 1%; vertical-align: top; } .SSDownloadCenterDrop:first-child { margin-left: 0; } .SSDownloadCenterDrop .h { width: 100%; padding-left: 25px; line-height: 60px; font-size: 14px; color: #999; position: relative; cursor: pointer; } .SSDownloadCenterDrop .h::before { content: ""; border: 8px solid transparent; border-top-color: #d30a2d; position: absolute; top: 29px; right: 18px; } .SSDownloadCenterDropDownBox { width: 100%; position: absolute; top: 100%; left: 0; background-color: #2d3337; display: none; z-index: 10; } .SSDownloadCenterDropDownBox .t { width: 100%; line-height: 30px; font-size: 12px; color: #999; padding-left: 30px; cursor: pointer; } .SSDownloadCenterButton { margin-left: 1%; width: 68%; display: inline-block; background-color: #2d3337; } .SSDownloadCenterButton input { width: -webkit-calc(100% - 60px); width: calc(100% - 60px); border: none; background-color: #2d3337; height: 60px; vertical-align: top; padding-left: 170px; font-size: 14px; color: #999; } .SSDownloadCenterButton button { width: 60px; height: 60px; background: url(../images/icon36.png) no-repeat center center; border: none; } .SSDownloadCenterBot { margin-top: 60px; width: 100%; background: #2d3337; padding: 40px 50px 30px; } .SSDownloadCenterBotOn { text-align: center; } .SSDownloadCenterBotOn a { display: inline-block; padding: 0 25px; font-size: 18px; color: #eee; } .SSDownloadCenterBotOn a.active { color: #d30a2d; } .SSDownloadCenterBot .table { width: 100%; margin-top: 25px; border: none; } .SSDownloadCenterBot .tr { border-bottom: 1px solid #31393e; height: 60px; cursor: pointer;font-size: 0 } .SSDownloadCenterBot .tr:last-child { border: none; } .SSDownloadCenterBot .td { border: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; line-height: 60px;position: relative } .SSDownloadCenterBot .th { border: none; background: #232a2f; line-height: 60px; width: 100%; font-size: 18px; color: #eee; font-weight: inherit; display: inline-block; } .SSDownloadCenterBot .th:first-child { width: 38%; padding-left: 65px; text-align: left; } .SSDownloadCenterBot .th:nth-child(2) { width: 54%;padding-left: 10%; } .SSDownloadCenterBot .th:nth-child(3) { width: 8%; } .SSDownloadCenterBot .td:first-child { width: 38%; font-size: 18px; color: #999; padding: 0 20px; } .SSDownloadCenterBot .td:nth-child(2) { width: 54%; font-size: 18px; color: #666; padding-left: 10%;} .SSDownloadCenterBot .td:nth-child(3) { width: 8%;height: 60px;vertical-align: top;} .SSDownloadCenterBot .td img { -webkit-transition: none 0.3s; transition: none 0.3s;position: absolute;top: 50%;left:0;transform: translateY(-50%); } .SSDownloadCenterBot .td img.Lhide{display: none;} .SSDownloadCenterBot .tr a { display: block; width: 100%; height: 100%; } .SSDownloadCenterBot .tr.active .td { color: #d30a2d; } .SSDownloadCenterBot .tr.active .td img { display: block; } .SSDownloadCenterBot .tr.active .td img.Lshow{display: none;} .SSDownloadCenterBot .tr.active .td img.Lhide{display: block;} /*关于我们*/ #pinContainer{height: 100vh;position: relative;} .AboutUsCon { height: 100vh; width: 100%; overflow: hidden; z-index: 2; } .AboutUsMenu { width: 180px; height: auto; position: fixed; left: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); padding-left: 40px; z-index: 80; } .AboutUsMenuLi { margin-top: 25px; } .AboutUsMenuLi a { display: block; line-height: 25px; font-size: 16px; color: #d4d4d4; padding-left: 15px; border-left: 2px solid transparent; } .AboutUsMenuLi.active a { border-color: #d30a2d; color: #d30a2d; } .AboutUsConOne { position: relative; } .AboutUsCon_1 { position: relative; } .AboutUsConOneBj { position: absolute; top: 0; left: 0; width: 100%; right: 0; bottom: 0; } .AboutUsConOneBj img { width: 100%; height: 100%; } .AboutUsConOneText { width: 800px; margin: 0 auto; padding-top: 8%; position: relative; z-index: 2; } .AboutUsConOneText h5 {display: none; } .AboutUsConOneText .text { font-size: 16px; line-height: 24px; color: #fff; margin-top: 35px; text-align: justify; } .AboutUsCon { background-color: #161a21;position: absolute;top: 0;left: 0;min-height: 100vh; } #pinContainer .footerbox{width: 100%; position: absolute;top: 100%;left: 0;z-index: 100;} .AboutUsConTwoCon { font-size: 0; width: 100%; height: 100%; } .AboutUsConTwoConImg {position: relative; width: 50%; overflow: hidden; float: left; background-size: cover; height: 100%; overflow: hidden;} .AboutUsConTwoConImg img { position: absolute;top: 0;left: 0;right: 0;bottom: 0;max-width: none;max-height: none;min-height: 100%;} .AboutUsConTwoConText { width: 50%; float: right; } .AboutUsConTwoContent h5 { font-size: 36px; color: #d30a2d; } .AboutUsConTwoContent p { font-size: 24px; margin: 45px 0 10px; color: #fff; } .AboutUsConTwoContent .t { font-size: 14px; color: #999; line-height: 24px; margin-top: 20px; } .AboutUsConTwoContent { width: 1200px; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .AboutUsConTwoContent .text { position: absolute; top: 150px; right: 0; width: 50%; padding-left: 130px; } .AboutUsConThreeCon { padding-left: 183px; height: 100%; font-size: 0; overflow-x: auto; white-space: nowrap; z-index: 1; width: auto !important; } .AboutUsConThreeCon::-webkit-scrollbar { display: none; } .AboutUsConTextTit { font-size: 36px; color: #d30a2d; margin-bottom: 10px;line-height: 1; } .AboutUsConThreeConLi { border-left: 1px solid #41474d; height: 100Vh; padding-top: 25px; display: inline-block; vertical-align: top; -webkit-transition: all 0.2s; transition: all 0.2s; overflow: hidden; cursor: pointer; width: 70px; } .AboutUsConThreeConLi:hover { background: #43474b; } .AboutUsConThreeConLi:hover .h{color: #fff;} .AboutUsConThreeConLi .h { margin-top: 10px; font-size: 30px; color: #8a8888; text-align: center;transition: all 0.3s; } .AboutUsConThreeConLiIov { padding: 0 15px 0 15px; text-align: justify; display: none; } .AboutUsConThreeConLiIov .data { font-size: 36px; color: #fff; padding-bottom: 10px; } .AboutUsConThreeConLiIov .t { font-size: 16px; color: #fff; line-height: 24px; margin-top: 20px; white-space: initial; } .AboutUsConThreeConLiIov .swiper-container { margin-top: 95px; padding-top: 68px; } .AboutUsConThreeConLiIov .swiper-but { width: 40px; height: 40px; background: url(../images/jiant10.png) no-repeat center center; top: 0; margin-top: 0; left: auto; right: 0; background-size: 100% 100%; -webkit-border-radius: 50%; border-radius: 50%; } .AboutUsConThreeConLiIov .swiper-button-prev { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); right: 50px; } .AboutUsConThreeConLiIov img { max-width: 100%; } .swiperTwo .swiper-container .swiper-slide{width: 100%;} .AboutUsConThreeConLi.active { width: 27.5%;padding-top: 32px; } .AboutUsConThreeConLi.active .h { display: none; } .AboutUsConThreeConLi.active .AboutUsConThreeConLiIov { display: block; } .AboutUsConThreeConLi.active .AboutUsConThreeConLiIov .swiper-container{ -webkit-animation: donhua3 0.8s; animation: donhua3 0.8s; } .AboutUsConThreeConLi.active .AboutUsConThreeConLiIov .AboutUsConText { -webkit-animation: donhua4 0.4s; animation: donhua4 0.4s; } .AboutUsConFourCon { width: 100%; position: relative; } .AboutUsConFourConImg { width: 50%; overflow: hidden; float: right; height: 100VH; overflow: hidden;position: relative;} .AboutUsConFourConImg img { position: absolute;top: 0;left: 0;right: 0;bottom: 0;max-width: none;max-height: none;min-height: 100%; } .AboutUsConFourConText { width: 50%; position: absolute; top: 0; left:0; min-height: 100vh; padding-left: 368px; } .AboutUsConFourConText::-webkit-scrollbar { display: none; } .AboutUsConFourConText .text { width: 100%; padding-right: 125px; text-align: justify; padding-top: 75px;padding-bottom: 150px; } .AboutUsConFourConText .text img{max-width:100% ;} .AboutUsConFourConText .text h5 { font-size: 36px; color: #d30a2d; } .AboutUsConFourConText .text p { font-size: 24px; color: #fff; margin-top:15px; } .AboutUsConFourConText .text .t1 { font-size: 18px; color: #fff; margin-top: 30px; } .AboutUsConFourConText .text .t2 { font-size: 16px; color: #999; line-height: 24px; margin-top: 15px; } .AboutUsConFourConText .text .t2 span{background: none !important;} .AboutUsConFiveContent { width: 1200px; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); height: 100%; } .AboutUsConFiveConImg { width: 50%; overflow: hidden; float: left; height: 100VH;overflow: hidden;position: relative; } .AboutUsConFiveConImg img { position: absolute;top: 0;left: 0;right: 0;bottom: 0;max-width: none;max-height: none;min-height: 100%;} .AboutUsConFiveContent .text::-webkit-scrollbar { display: none; } .AboutUsConFiveContent .text { width: 50%; float: right; height: 100%; padding: 75px 0 150px 133px;} .AboutUsConFiveContent .text h5 { font-size: 36px; color: #d30a2d; } .AboutUsConFiveContent .text p { font-size: 24px; color: #fff; margin-top: 45px; } .AboutUsConFiveContent .text .t1 { font-size: 18px; color: #fff; margin-top: 30px; } .AboutUsConFiveContent .text .t2 { font-size: 16px; color: #999; line-height: 24px; margin-top: 15px; } .AboutUsConFiveContent .text .imgbox { margin-top: 30px; } .AboutUsConFiveContent .text .imgbox img { display: inline-block; overflow: hidden; } .AboutUsConFiveContent .text .imgbox .t { font-size: 14px; color: #999; padding-left: 20px; display: inline-block; } .AboutUsConFiveContent .text .imgbox .text1 { margin-top: 30px; display: block; font-size: 14px; color: #999; line-height: 24px; width: 100%; } .AboutUsConFiveContent .text .img1 { width: 100%; margin-top: 15px; overflow: hidden; } .AboutUsConFiveContent .text .img1 img { width: 100%; } @-webkit-keyframes donhua3 { from { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes donhua3 { from { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes donhua4 { from { opacity: 0; -webkit-transform: translateX(100%); transform: translateX(100%); } to { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes donhua4 { from { opacity: 0; -webkit-transform: translateX(100%); transform: translateX(100%); } to { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } /*回到顶部*/ .suspend_nav { cursor: pointer; width: 50px; height: 50px; padding: 10px; position: fixed; bottom: 100px; right: 50px; z-index: 10; background: #d30a2d; display: none; -webkit-border-radius: 50%; border-radius: 50%; } .suspend_nav .top { width: 100%; } .suspend_nav img { width: 100%; } .suspend_nav.active { display: block; } /*联系我们*/ .ContactUsTabBar { text-align: center; margin-top: 70px; } .ContactUsTabBar .TabTerm { height: 60px; display: inline-block; cursor: pointer; } .ContactUsTabBar .TabTerm a { font-size: 20px; color: #999; width: 100%; line-height: 60px; display: block; padding: 0 45px; } .ContactUsTabBar .TabTerm.active a { background: #d30a2d; color: #fff; } .ContactUsTabCont { position: relative; margin-top: 40px; } .ContactUsTabCont .TabItem { position: absolute; top: 0; left: 0; font-size: 0; display: none;font-size: 16px;color: #fff; } .ContactUsTabCont .TabItem.active { position: static; display: block; } .ContactUsTabCont .TabItem .img { width: 63%; overflow: hidden; } .ContactUsTabCont .TabItem .img img { width: 100%; } .ContactUsTabCont .TabItem .text { width: 37%; color: #fff; vertical-align: top; } .ContactUsTabCont .TabItem h5 { font-size: 24px; } .ContactUsTabCont .TabItem .num { font-size: 30px; } .ContactUsTabCont .TabItem .t1 { font-size: 16px; color-interpolation-filters: #f9f9f9; margin-top: 10px; } .ContactUsTabCont .TabItem .t1 p { margin-top: 10px; } .ContactUsTabCont .TabItem .t2 { margin-top: 35px; color: f9f9f9; } .ContactUsTabCont .TabItem .t2 h3 { font-size: 18px; padding-bottom: 15px; } .ContactUsTabCont .TabItem .t2 p { font-size: 16px; } .RecruitConLi { text-align: left;width: 60%;margin: 100px auto 0; } .RecruitConLi a { font-size: 18px; color: #eee; padding:5px 0;display: inline-block;width: 120px; } .RecruitConLi a.active { color: #d30a2d; } .RecruitCon { margin-top: 20px; } .RecruitConTable { width: 100%; padding: 0 50px; } .RecruitContd { cursor: pointer; } .RecruitConTh{display: flex;justify-content: space-between;background: #232a2f;padding: 0 10px; } .RecruitConTh,.RecruitContd{white-space: nowrap;font-size: 0;} .RecruitConTh p {line-height: 60px; font-size: 18px; color: #eee; border: none; font-weight: inherit; text-align: center; display: inline-block;width: 16.666666%; } .RecruitConTh p:nth-child(4) { width: 25%; } .RecruitConTh p:last-child { width: 15%; text-align: right; padding-right: 30px; } .RecruitContdText{display: flex;justify-content: space-between;border: 1px solid transparent;border-bottom-color: #31393e;padding: 0 10px; } .RecruitContdText p {overflow: hidden; width: 16.666666%; line-height: 60px; font-size: 18px; color: #999; font-weight: inherit; text-align: center; display: inline-block; vertical-align: top; height: 60px; padding: 0 10px;} .RecruitContdText p:nth-child(4) { width: 25%; height: 60px; } .RecruitContdText p:last-child { width: 15%; height: 60px; position: relative; } .RecruitContdText p img { position: absolute; top: 50%; right: 30px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .RecruitContdText p img.iov { display: none; } .RecruitConTrIov { width: 100%; padding: 20px 60px 70px; background: #2d3337; display: none; } .RecruitConTrIov h5 { font-size: 18px; color: #e7e7e7; margin-top: 30px; } .RecruitConTrIov p { font-size: 14px; color: #999; line-height: 24px; } .RecruitConTrIovBot { margin-top: 45px; width: 200px; line-height: 50px; -webkit-border-radius: 5px; border-radius: 5px; text-align: center; font-size: 16px; color: #999; } .RecruitConTrIovBot a { border: none; width: 100%; background: #232a2f; -webkit-border-radius: 5px; border-radius: 5px;display: block;color: #999 } .RecruitContd.active .RecruitContdText p { color: #d30a2d; } .RecruitContd.active .RecruitContdText p img.iov { display: block; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .RecruitContd.active .RecruitContdText p img.sow { display: none; } /*企业合作*/ .EnterpriseCooperationTit { margin-top: 75px; text-align: center; } .EnterpriseCooperationTit a { font-size: 20px; color: #999; line-height: 60px; display: inline-block; padding: 0 45px; } .EnterpriseCooperationTit a.active { background: #d30a2d; color: #fff; } .EnterpriseCooperationCon { margin-top: 80px; } .ECConList { border-bottom: 1px solid #3e4147; padding-bottom: 20px; font-size: 0; } .ECConListBox { display: inline-block; text-align: center; position: relative; } .ECConListBox:first-child { width: 20%; } .ECConListBox:nth-child(2) { width: 31%; } .ECConListBox:nth-child(3) { width: 31%; } .ECConListBox:last-child { text-align: right; width: 15%; } .ECConListBox:last-child::before { display: none; } .ECConListBox::before { content: ""; width:20px; height: 12px; position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background: url(../images/jiant11.png) no-repeat;background-size:100% } .ECConListBox .num { display: inline-block; font-size: 18px; color: #161a21; background-color: #999; width: 34px; line-height: 34px; -webkit-border-radius: 50%; border-radius: 50%; text-align: center; } .ECConListBox .t { font-size: 18px; color: #999; display: inline-block; padding-left: 10px; } .ECConListBox.active .num { background-color: #d30a2d; color: #fff; } .ECConContent { text-align: center; margin-top: 75px; } .ECConContent h5 { font-size: 20px; color: #999; } .ECConContentDrop { width: 380px; margin: 40px auto 0; -webkit-border-radius: 8px; border-radius: 8px; position: relative; cursor: pointer; } .ECConContentDrop .h { width: 380px; line-height: 70px; padding-left: 25px; font-size: 16px; color: #999; background: #2d3337; text-align: left; position: relative; } .ECConContentDrop .h::before { content: ""; border: 8px solid transparent; border-top-color: #d30a2d; position: absolute; top: 29px; right: 24px; } .ECConContentDropDown { width: 100%; background: #2a3033; position: absolute; top: 100%; left: 0; display: none; } .ECConContentDropDown .t { font-size: 16px; line-height: 40px; padding-left: 25px; color: #999; text-align: left; -webkit-transition: all 0.3s; transition: all 0.3s; } .ECConContentDropDown .t:hover { background: #3e4147; } .ECConContentImg { margin-top: 30px; font-size: 0; } .ECConContentImgBox { display: inline-block; width: 33.33%; text-align: center; margin-top: 30px; } .ECConContentImgBox img { max-width: 100%; overflow: hidden; width: 300px; } .ECConContentImgBox .t { margin-top: 30px; font-size: 24px; color: #999; } .ECConContentButton { width: 190px; height: 60px; margin: 100px auto 0; } .ECConContentButton a { width: 100%; line-height: 60px; text-align: center; font-size: 20px; color: #fff; background: #d30a2d; border: none; display: block; } /*企业合作-经销商门户*/ .EnterpriseCooperationCon2 { margin-top: 70px; } .EnterpriseCooperationCon2 h5 { margin-top: 40px; font-size: 18px; color: #e9e9e9; } .ECCon2inpbox { font-size: 0; margin-top: 10px; } .ECCon2inpbox .tOne { border-bottom: 1px solid #303339; display: inline-block; padding-left: 35px; font-size: 16px; color: #999; line-height: 59px; width: 210px; vertical-align: top; position: relative; } .ECCon2inpbox .t { border-bottom: 1px solid #303339; display: inline-block; padding-left: 35px; font-size: 16px; color: #999; line-height: 59px; width: 212px; vertical-align: top; position: relative; } .ECCon2inpbox .t.xin { position: relative; } .ECCon2inpbox .t.xin::before { content: "*"; font-size: 18px; position: absolute; top: 0; left: 24px; } .ECCon2inpbox input { border-bottom: 1px solid #303339; width: -webkit-calc(100% - 212px); width: calc(100% - 212px); display: inline-block; background: none; height: 60px; vertical-align: top; font-size: 16px; color: #999; } .ECCon2inpbox1 { font-size: 0; margin-top: 10px; } .ECCon2inpbox1 .tOne { border-bottom: 1px solid #303339; display: inline-block; padding-left: 35px; font-size: 16px; color: #999; line-height: 59px; width: 210px; vertical-align: top; position: relative; } .ECCon2inpbox1 .t { border-bottom: 1px solid #303339; display: inline-block; padding-left: 35px; font-size: 16px; color: #999; line-height: 59px; width: 210px; vertical-align: top; position: relative; } .ECCon2inpbox1 .t.xin { position: relative; } .ECCon2inpbox1 .t.xin::before { content: "*"; font-size: 18px; position: absolute; top: 0; left: 24px; } .ECCon2inpbox1 input { border-bottom: 1px solid #303339; width: -webkit-calc(100% - 210px); width: calc(100% - 210px); display: inline-block; background: none; height: 60px; vertical-align: top; font-size: 16px; color: #999; } .ECCon2inpbox2 { font-size: 0; margin-top: 10px; } .ECCon2inpbox2 .tOne { border-bottom: 1px solid #303339; display: inline-block; padding-left: 35px; font-size: 16px; color: #999; line-height: 59px; width: 210px; vertical-align: top; position: relative; } .ECCon2inpbox2 .t { border-bottom: 1px solid #303339; display: inline-block; padding-left: 35px; font-size: 16px; color: #999; line-height: 59px; width: 210px; vertical-align: top; position: relative; } .ECCon2inpbox2 .t.xin { position: relative; } .ECCon2inpbox2 .t.xin::before { content: "*"; font-size: 18px; position: absolute; top: 0; left: 24px; } .ECCon2inpbox2 input { border-bottom: 1px solid #303339; width: -webkit-calc(100% - 210px); width: calc(100% - 210px); display: inline-block; background: none; height: 60px; vertical-align: top; font-size: 16px; color: #999; } .ECCon2inpboxDrop { border-bottom: 1px solid #303339; width: -webkit-calc(100% - 212px); width: calc(100% - 212px); display: inline-block; position: relative; height: 60px; } .ECCon2inpboxDrop::before { content: ""; border: 8px solid transparent; border-top-color: #d30a2d; position: absolute; top: 29px; right: 35px; } .ECCon2inpboxDrop input { border: none; } .ECCon2inpboxDrop .chosen-container { width: 100% !important; padding-left: 110px; } .ECCon2inpboxDrop .chosen-container-single .chosen-single { border: none; height: 58px; line-height: 58px; background: none; -webkit-box-shadow: none; box-shadow: none; font-size: 16px; color: #999; } .ECCon2inpboxDrop .chosen-container .chosen-drop { background: #32363b; -webkit-box-shadow: none; box-shadow: none; border: none; } .ECCon2inpboxDrop .chosen-container .chosen-results li.highlighted { background-color: #99a0a8; background-image: none; } .ECCon2inpboxDrop .h { line-height: 58px; font-size: 16px; color: #999; cursor: pointer; display: inline-block; padding-left: 100px; } .ECCon2inpboxDropDown { width: 100%; display: inline-block; background: none; line-height: 58px; border: none; vertical-align: top; font-size: 16px; color: #999; background: #32363b; position: absolute; top: 100%; left: 0; display: none; z-index: 1; } .ECCon2inpboxDropDown .t { display: block; width: 100%; cursor: pointer; } .ECCon2inpboxDropAdd { margin-top: 20px; width: 200px; line-height: 50px; text-align: center; font-size: 16px; color: #161a21; margin-left: 50px; background: #999; cursor: pointer; } .ECCon2inpboxDropAddTwo { margin-top: 20px; width: 200px; line-height: 50px; text-align: center; font-size: 16px; color: #161a21; margin-left: 50px; background: #999; cursor: pointer; } .ECCon2inpboxTow { width: 47%; display: inline-block; } .ECCon2inpboxTow .t { width: 212px; text-align: left; } .ECCon2inpboxTow input { width: -webkit-calc(100% - 212px); width: calc(100% - 212px); } .ECCon2inpboxOne .t { width: 212px; text-align: left; } .ECCon2inpboxOne input { width: -webkit-calc(100% - 212px); width: calc(100% - 212px); } .ECCon2But { text-align: center; margin-top: 60px; } .ECCon2But a { display: inline-block; width: 190px; line-height: 60px; background: #999; text-align: center; margin: 0 5px; font-size: 20px; color: #161a21; } .ECCon2But a.active { background: #d30a2d; color: #fff; } .ECCon2inpboxposition, .ECCon2inpbox.WZ, .ECCon2inpbox.Xin, .ECCon2inpbox.Min{position: relative;} .ECCon2inpboxposition .iov, .ECCon2inpbox.WZ .iov, .ECCon2inpbox.Xin .iov, .ECCon2inpbox.Min .iov{display: none;} .ECCon2inpboxposition.active .t, .ECCon2inpbox.WZ.active .t, .ECCon2inpbox.Xin.active .t, .ECCon2inpbox.Min.active .t{color: #d30a2d;} .ECCon2inpboxposition.active .iov, .ECCon2inpbox.WZ.active .iov, .ECCon2inpbox.Xin.active .iov, .ECCon2inpbox.Min.active .iov{ font-size: 16px; color: #d30a2d; line-height: 60px; position: absolute; top: 0; right: 0;display: block; } .ECCon2inpboxZzphone.active { position: relative; } .ECCon2inpboxZzphone.active .t { color: #d30a2d; } .ECCon2inpboxZzphone.active .iov { font-size: 16px; color: #d30a2d; line-height: 60px; position: absolute; top: 0; right: 0; } .ECCon2inpboxZzE-mail.active { position: relative; } .ECCon2inpboxZzE-mail.active .t { color: #d30a2d; } .ECCon2inpboxZzE-mail.active .iov { font-size: 16px; color: #d30a2d; line-height: 60px; position: absolute; top: 0; right: 0; } .ECCon2remove { cursor: pointer; font-size: 14px; color: #fff; text-align: right; padding-right: 20px; margin-top: 15px; } .ECCon2remove2 { cursor: pointer; font-size: 14px; color: #fff; text-align: right; padding-right: 20px; margin-top: 15px; } .EnterpriseCooperationCon3 { width: 895px; margin: 50px auto 0; } .EnterpriseCooperationCon3 h5 { font-size: 18px; color: #e9e9e9; } .ECConT1 { margin-top: 20px; color: #999; font-size: 16px; } .EnterpriseCooperationCon3 textarea { width: 100%; height: 230px; border: 1px solid #999; padding: 10px; margin-top: 18px; color: #999; background: none; margin-bottom: 10px; } .EnterpriseCooperationCon3 .ipaddr.active{border-color:#d30a2d;} .EnterpriseCooperationCon3 .attachmentmate.active{border-bottom:1px solid #d30a2d;} .EnterpriseCooperationCon3 .imgurl.active{border-bottom:1px solid #d30a2d;} .EnterpriseCooperationCon3 .imgurlmate.active{border-bottom:1px solid #d30a2d;} .EnterpriseCooperationCon3 .subimgurl.active{border-bottom:1px solid #d30a2d;} .EnterpriseCooperationCon3 .subimgurlmate.active{border-bottom:1px solid #d30a2d;} .ECConT2 { font-size: 16px; color: #999; line-height: 60px; border-bottom: 1px solid #303339; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .ECConT2 p { white-space: nowrap; } .ECConT2 input { overflow: hidden; border: none; background: none; width: 100%; padding-left: 15px;} .ECConT3 { font-size: 16px; color: #999; line-height: 60px; } .L-IovECConT3 .ECConT2{display: none;} .ECCon3inpboxDrop { width: 100%; background: #2d3337; position: relative; cursor: pointer; } .ECCon3inpboxDrop::before { content: ""; border: 8px solid transparent; border-top-color: #d30a2d; position: absolute; top: 21px !important; right: 28px; } .ECCon3inpboxDrop .h { width: 100%; background: none; height: 48px; border: none; font-size: 16px; color: #999; padding-left: 30px; cursor: pointer;} .ECCon3inpboxDropDown { width: 100%; background: #282c2e; display: none; position: absolute; top: 100%; left: 0; } .ECCon3inpboxDropDown .t { font-size: 16px; color: #999; line-height: 30px; padding-left: 30px; } .ECCon3inpbox input { width: 160px; border: 1px solid #3e4147; background: none; line-height: 46px; text-align: center; margin-right: 10px; cursor: pointer; margin-top: 15px; color: #999; } .ECCon3inpbox input.active { background: #d30a2d; border-color: #d30a2d; color: #fff; } .ECCon3inpbox input.cur{border-color: #d30a2d;} .ECConDistributor { margin-top: 20px; font-size: 0; } .ECConDistributorBox { display: inline-block; width: 23%; margin-right: 2.5%; margin-top: 40px; vertical-align: top; } .ECConDistributorBox:last-child { margin-right: 0; } .ECConDistributorBox:nth-child(4) { margin-right: 0; } .ECConDistributorBox .img { width: 100%; overflow: hidden; } .ECConDistributorBox .img img { width: 100%; -webkit-transition: all 0.3s; transition: all 0.3s; } .ECConDistributorBox .t { margin-top: 10px; font-size: 18px; color: #999; } .QuestionFeedbackBox { background: #161a21; } .QuestionFeedback { width: 960px; margin: 0 auto; padding: 100px 0; } .QuestionFeedbackText { font-size: 16px; color: #999; line-height: 30px; } .QuestionFeedbackText span { color: #d90000; } .ECCon2inpboxImg { display: inline-block; width: 100px; height: 35px; vertical-align: bottom; margin-left: 30px; } .ECCon2inpboxImg img { width: 100%; } .QuestionFeedbackBox .ECCon2inpboxTow .t { padding-left: 0; } .QuestionFeedbackBox .ECCon3inpboxDropDown { z-index: 1; } .QuestionFeedbackCli { margin-top: 30px; } .QuestionFeedbackCli .i { width: 15px; height: 15px; display: inline-block; vertical-align: middle; } .QuestionFeedbackCli .i input { width: 100%; height: 100%; vertical-align: top; color: #d90000; } .QuestionFeedbackCli .p { display: inline-block; font-size: 14px; color: #e6e6e6; vertical-align: top; } .QuestionFeedbackCli .p a { display: inline-block; color: #d90000; } @media (min-width: 992px) { .ServiceSupportProductConBox:hover .ServiceSupportProductConBoxImgIov { opacity: 1; } .ServiceSupportProductConBox:hover h5 { color: #d30a2d; } .SSPSeriesConTextTabContBoxLTabBar .tab-termTwo:hover { background-color: #fff; } .SSPSeriesConTextTabContBoxLTabBar .tab-termTwo:hover .iov { display: block; } .SSPSeriesConTextTabContBoxLTabBar .tab-termTwo:hover .sow { display: none; } .SSPSeriesConTextTabContBoxLTabBar .tab-termTwo:hover p { color: #d30a2d; } .SSPSeriesConTextTabContBoxLTabCont .tab-itemTwo .con:hover a { color: #d30a2d; } .SSMaintenanceServiceBox:hover .SSMaintenanceServiceBoxIov { top: 0; } .SSDownloadCenterBot .tr:hover .td { color: #d30a2d; } .SSDownloadCenterBot .tr:hover .td img { display: block; } .RecruitConTrIovBot:hover a { background: #d30a2d; color: #fff; } .ECConDistributorBox:hover .img img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } } @media (max-width: 1441px) { .banner2TextCon{width:100%;padding:0 10px;} .row { width: 100% !important; } .product1Text { left: 50px; } .product4Con { width: 100%; padding: 0 20px; } .product1TextCon { width: 100%; padding: 0 15px; } .message1TextCon { width: 100%; padding: 0 15px; } .message2Con { width: 100%; padding: 0 15px; } .AboutUsConThreeConLiIov .t { margin-top: 10px; } .AboutUsConThreeConLiIov .swiper-container { margin-top: 30px; } .AboutUsConThreeConLi { padding-top: 80px; } .product1Img { height: 750px; } .product1Img img.active { left:28%; } .SubnavBox .SubImg .imgbox img.active { left: 335px; } .message2BoxListSend{width: 220px;margin-left: 0;} .AboutUsConFourConText{padding-left: 170px;} .AboutUsConFourConText .text{padding-right: 63px;} } @media (min-width: 1920px) { .product1Img img{width: auto;} .product1Img .imgbox .SubImgIov{width: auto;} .product1Img .imgbox .SubImgIov .text{width: 60%;margin: 30px auto 0;min-width: 400px;} } @media (max-width: 1600px) { .product1TextCon{ width: 100%; padding: 0 30px; } } @media (max-width: 1370px) {.RecruitConLi{width: 63%;}} @media (max-width: 1220px) { .RecruitConLi{width: 72%;} .product1Img { height: 650px; } .product1Img img.active { width: 300px; left: 35%;} .SubnavBox .SubImg .imgbox img.active { left: 175px; width: 300px; } .BannerText { left: 30px; top: 28%; } .BannerText h3 { font-size: 45px; } .BannerText h5 { font-size: 26px; } .BannerText p { font-size: 30px; margin-top: 50px; } /* .banner .swiper-button-prev { top: 40%; } .banner .swiper-button-next { bottom: 40%; } */ .home1BoxText { padding: 0 40px 40px; } .home1BoxText h5 { font-size: 28px; } .home1BoxText p { font-size: 14px; line-height: 20px; margin-top: 10px; } .home2 { padding: 50px 0; } .home2 .title h5 { font-size: 28px; } .home2Con { margin-top: 30px; } .home2ConBoxImg { width: 95%; height: auto; } .home3 { padding: 50px 20px 20px; } .home3ConBoxIcon { display: block; margin: 0 auto; } .home3ConBoxText { width: 80%; text-align: center; padding-top: 20px; margin-left: 0; } .footerboxTopNav { text-align: center; } .footerboxTopNav dl { padding-right: 50px; text-align: left; } .footerboxTopNav dl dd { margin-top: 5px; } .footerboxTopNav dl dd a { margin-top: 5px; } .footerboxBot .tit { text-align: center; } .footerboxBotTextOne { padding-top: 20px; } .product3Con { width: 100%; } .product3Tit h5 { padding-left: 50px; } .product3Tab-mod { margin-top: 60px; padding-left: 50px; } .product3TabitemMore { right: 20px; font-size: 14px; } .product4ConBoxText .text { height: 217px; } .product3ModalBox .modal-content { padding: 50px; } .product3ModalBox .modal-header p { font-size: 26px; } .product3ModalBox .modal-header h2 { font-size: 30px; } .product3ModalBox .modal-body { margin-top: 20px; } .message1TextCon .text { left: 20px; } .message2Box { margin-top: 50px; } .message2Box { padding: 50px; } .message2BoxListInputbox .t { width: 125px; } .message2BoxListInputboxLast { width: 785px; } .banner2TextCon { width: 100%; padding: 0 15px; } .news1Xq { width: 100%; } .ServiceSupportProductConBoxImgIov { padding: 20px 10px; } .AboutUsConOneText { width: 100%; padding: 290px 50px 0 140px; } .AboutUsConTwoContent { width: 100%; padding: 0 15px; } .AboutUsConTwoContent .text { padding-left: 80px; padding-right: 15px; } .AboutUsConThreeConLi { padding-top: 80px; } .AboutUsConThreeConLiIov .t { font-size: 14px; line-height: 20px; margin-top: 5px; } .AboutUsConThreeConLiIov .swiper-container { margin-top: 30px; } .AboutUsConFourConText .text { padding: 30px 20px 30px 140px;width: 50%; } .AboutUsConFiveContent .text { padding-left: 80px;padding-bottom: 100px; } #pinContainer { width: 100% !important; } .AboutUsConFiveContent { width: 100%; padding: 0 15px; } .AboutUsConFourConText { width: 100%; padding: 0 15px; } .product1Img .imgbox .SubImgIov { width: 250px; top: 120px; } .product1Img .imgbox .SubImgIov .text .t { font-size: 16px; } .product1Img .imgbox .SubImgIov .text .t span { width: auto; } } @media (max-width: 992px) { .SSCommonSP {width: 100%;} .headerIovSsEn a{line-height:30px; font-weight: bold; margin-left: 10px; font-size: 18px; margin-top: 5px; color: #525151;} .SSWarranty, .SSDisclaimers{width: 100%;} .nav ul li { position: relative; } .home2ConBox .home2ConBox_swiper{padding-bottom: 20px;} .nav ul li.on::after { content: ""; width: 16px; height: 16px; background: url(../images/jiangt3.png) no-repeat; position: absolute; top: 15px; right: 10px; } .nav ul li.on.active::after { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .nav ul li .t { position: static; background: #f7f0e7; -webkit-border-radius: 0; border-radius: 0; -webkit-box-shadow: none; box-shadow: none; } .nav ul li .p { border-top: 1px solid #d3ad82; text-align: left; padding-left: 20px; } .nav ul li .t::before { display: none; } .SubnavBox { padding-left: 45px; } .SubnavBox .SubImg .imgbox.active { opacity: 0; } .SubnavBox .Subnav .li a { font-size: 24px; } .SubnavBox .Subnav .li { line-height: 28px; } .header { z-index: 200; } .header.active { background: #000; } .header .logo { -webkit-transform: none; -ms-transform: none; transform: none; display: block; left: 10px; margin: 0; width: 165px; } .header .con { top: 52px; display: none; opacity: inherit; right: 0; bottom: 0; height: 100vh; overflow-y: auto; background: #000; z-index: 300; } .header .con.active { display: block; } .header .con .nav .li a { padding: 0 10px; } .header .icon1 { padding: 10px 20px; } .header .icon1 .ico.fr { z-index: 200; } .header .icon1 .ico.fl { display: none; } .header .con .onleft, .header .con .onright { float: none; width: 100%; text-align: left; } .header .con .nav .li { display: block; } .headerIovSs { display: inline-block; } .headerIov { display: block; margin-right: 10px; } .headerIovSsIov button { width: 40px; height: 40px; border: none; background: none; } .headerIovSsIov .headerIovSsIovInput { width: 100%; background: #fff; position: absolute; top: 110%; left: 0; padding: 15px; display: none; font-size: 0; } .headerIovSsIov .headerIovSsIovInput input { width: 80%; line-height: 55px; background: #fff; border: 1px solid #dddddd; padding-left: 15px; font-size: 16px; color: #333; } .headerIovSsIov .headerIovSsIovInput button { width: 20%; line-height: 60px; text-align: center; font-size: 16px; background: #de0012; color: #fff; height: 60px; } .headerIovSsEn { display: inline-block; position: relative; vertical-align: top; } .headerIovSsEn .EnIov { width: 100px; top: 120%; display: none; opacity: 1; } .headerIovSsEn.active .EnIov { display: block; } .navOneClassChild .li { font-size: 14px; } .BannerText { top: 27%; } .BannerText h3 { font-size: 38px; } .BannerText h5 { font-size: 20px; } .BannerText p { font-size: 24px; } .banner::before { bottom: 20px; } .home1Box { padding: 10px; } .home1BoxText { padding: 0 20px 20px; } .home1BoxText h5 { font-size: 22px; } .home2ConBox { width: 100%; } .home2ConBox:last-child { padding-left: 0; } .home2ConBoxImg { width: 100%; } .home2ConBoxTextOne { position: static; padding: 20px 0; } .home2ConBoxTextOne h3 { margin-top: 5px; } .home2ConBoxTextOne .data { margin-top: 10px; } .home2ConBoxList { padding: 20px 0; } .home2ConBoxText p { margin-top: 5px; } .home2ConBoxText .data { margin-top: 10px; } .home2ConBoxList:first-child { padding: 20px 0; padding-left: 0; border-top: 1px solid #d30a2d; } .home3ConBox a { height: auto;padding: 50px 0; } .footerboxBotTextTow a{font-size: 12px !important;} .footerboxTopNav dl { display: block; padding-right: 0; border-bottom: 1px solid #515b62; padding-bottom: 10px; } .footerboxTopNav dl .lxlx{padding-bottom: 10px;} .footerboxTopNav dl dd { display: block; line-height: 30px; display: none; padding: 0 10px; margin-top: 0; } .footerboxTopNav dl dd a { margin-top: 0; } .footerboxTopNav dl .dtTow { padding-top: 10px; border-top: 1px solid #515b62; margin-top: 0; padding-bottom: 0; } .footerboxTopNav dl dt { padding-bottom: 10px; margin-top: 10px; } .footerboxBot { margin-top: 50px; } .footerboxBot .tit { padding-bottom: 20px; } .product1Img img.active { left: 420px; } .product1Text { top: 30%; } .product1Text p { font-size: 26px; } .product1Text h5 { font-size: 30px; margin-top: 10px; } .product3 { padding: 50px 0; } .product3Tit h5 { font-size: 18px; line-height: 26px; } .product3Tab-mod { margin-top: 0; } .product3Tab-mod .tab-modTit { font-size: 20px; margin-top: 20px; } .product3Tab-mod .tab-term { margin-top: 20px; } .product3Tab-mod .tab-cont { margin-top: 50px; } .product3TabitemBox { margin-right: 50px; } .product4 { padding: 50px 0; } .product4ConTit h5 { font-size: 28px; } .product4ConTit p { line-height: 22px; } .product4ConBox { margin-top: 30px; } .product4ConBoxImg { float: none; width: 100%; } .product4ConBoxText { float: none; width: 100%; padding: 20px 0; } .product4ConBox:nth-child(even) .product4ConBoxImg { float: none; } .product4ConBox:nth-child(even) .product4ConBoxText { float: none; padding-left: 0; } .product4ConBoxText .text { height: auto; } .product4ConMore { margin-top: 50px; text-align: center; } .product3ModalBoxclose { width: 50px; height: 50px; top: -70px; } .product3ModalBox .modal-content { top: 100px; } .product3ModalBox .modal-header p { font-size: 22px; } .product3ModalBox .modal-header h2 { font-size: 28px; } .product3ModalBox .modal-body { margin-top: 10px; } .ModalBoxLists { padding: 8px 5px; } .message1TextCon p { font-size: 40px; } .message1TextCon h2 { font-size: 60px; } .message2 { padding: 50px 0; } .message2Box h5 { font-size: 20px; } .message2BoxList { margin-top: 20px; } .message2BoxListInputboxLast { width: 65%; } .message2BoxListSend { width: 30%; } .message2BoxListOn { margin-top: 30px; } .banner2TextCon p { font-size: 30px; } .banner2TextCon h5 { font-size: 60px; } .news1ConList { margin-top: 50px; } .news1ConListLi a { width: 150px; line-height: 40px; font-size: 20px; } .news1ConBoxText p { margin-top: 10px; line-height: 20px; } .news1XqCon { width: 100%; } .IndustryYyIcoBoxText h5 { font-size: 24px; } .IndustryYyIcoBoxText p { font-size: 14px; } .IndustryYyConTit { margin-top: 50px; } .IndustryYyConTit h5 { font-size: 30px; } .IndustryYyConBoxText { padding: 15px; } .IndustryYyConBoxText h5 { bottom: 15px; } .banner3Text p { font-size: 30px; } .banner3Text h5 { font-size: 20px; margin-top: 0; } .IndustryYyManu { padding: 50px 0; } .IndustryYyManuTit h5 { font-size: 30px; } .IndustryYyManuConBoxImg .img::before { display: none; } .IndustryYyManuConBoxImg { padding: 0; } .IndustryYyManuConBox:nth-child(even) .IndustryYyManuConBoxImg { padding: 0; } .IndustryYyManuConBoxText { padding: 30px; } .IndustryYyManuConBox:nth-child(even) .IndustryYyManuConBoxText { padding: 30px; } .IndustryYyManuConBoxTextMore { margin-top: 50px; } .banner3Text p { font-size: 24px; } .IndustryYyManuXqTit { padding-top: 30px; } .IndustryYyManuXqCon { margin-top: 20px; } .IndustryYyManuXqConBox{margin-top: 20px;} .IndustryYyManuXqConBox p { font-size: 16px; } .IndustryYyManuXqConBoxImg { margin-top: 20px; } .IndustryYyManuXqConOne { margin-top: 60px; } .IndustryYyManuXqConOneBoxText h5 { font-size: 20px; padding-bottom: 5px; } .IndustryYyManuXqConOneBoxText p { line-height: 20px; } .IndustryYyManuXqConOneBoxText { padding-right: 20px; } .IndustryYyManuXqConOneBox:nth-child(even) .IndustryYyManuXqConOneBoxText { padding-left: 20px; } .ServiceSupportProductConBox { width: 32%; margin-left: 2%; } .ServiceSupportProductConBox:nth-child(4n + 1) { margin-left: 2%; } .ServiceSupportProductConBox:nth-child(3n + 1) { margin-left: 0; } .ServiceSupportProductConBox:hover .ServiceSupportProductConBoxImgIov { opacity: 0; } .ServiceSupportProductConBox.active h5 { color: #d30a2d; } .ServiceSupportProductConBox.active .ServiceSupportProductConBoxImgIov { opacity: 1; } .ServiceSupportProductConBox h5 { margin-top: 20px; } .ServiceSupportProductSeriesConText { padding-left: 260px; } .SSPSeriesConTextTabContBoxLTabBar { width: 30%; } .SSPSeriesConTextTabContBoxLTabCont { width: 68%; margin-left: 2%; } .SSPSeriesConTextTabContBoxLTabBar .tab-termTwo .ico { width: 30%; } .SSPSeriesConTextTabContBoxLTabBar .tab-termTwo p { width: 70%; font-size: 16px; } .SSMoreSupportTabMod { margin-top: 40px; } .SSMoreSupportTabBar { height: 80px; } .SSMoreSupportTabCont { margin-top: 50px; } .SSMoreSupportTabBar .tab-term { width: 40%; line-height: 80px; } .SSMoreSupportTabCont .tab-item a { padding: 0 20px; } .SSMaintenanceService { width: 100%; margin: 30px 0 0; } .SSDownloadCenterDrop { width: 20%; } .SSDownloadCenterButton { width: 58%; } .SSDownloadCenterButton input { padding-left: 25px; } .SSDownloadCenterBot { margin-top: 30px; } /* .AboutUsConOne { overflow-y: auto; } */ .AboutUsConOneText { padding-bottom: 50px; } .AboutUsConOneText .text { font-size: 14px; line-height: 20px; } .AboutUsConTwoContent .text { top: 80px; } .AboutUsConTwoContent h5 { font-size: 30px; } .AboutUsConTextTit { font-size: 30px; } .AboutUsConTwoContent p { font-size: 20px; margin: 20px 0 5px; } .AboutUsConTwoContent .t { line-height: 20px; margin-top: 10px; } .AboutUsConThreeConLiIov .t { font-size: 12px; } .AboutUsConThreeConLiIov .data { font-size: 32px; } .AboutUsConThreeConLiIov .swiper-but { width: 30px; height: 30px; } /* .AboutUsConFour { overflow-y: auto; } .AboutUsCon_4 { overflow-y: auto; } */ .AboutUsConFourConText .text{padding: 30px 45px 30px 108px;} .AboutUsConFourConText .text h5 { font-size: 30px; } .AboutUsConFourConText .text p { font-size: 20px; margin-top: 20px; } .AboutUsConFourConText .text .t1 { margin-top: 20px; font-size: 16px; } .AboutUsConFourConText .text .t2 { font-size: 14px; line-height: 20px; } .AboutUsConFiveContent .text h5 { font-size: 30px; } .AboutUsConFiveContent .text p { font-size: 20px; margin-top: 20px; } .AboutUsConFiveContent .text { padding-left: 30px; padding-bottom: 50px;} .RecruitConTable { padding: 0; } .RecruitConLi { margin: 30px auto; width: 100%;} .EnterpriseCooperationTit { margin-top: 30px; } .EnterpriseCooperationTit a { font-size: 18px; padding: 0 20px; line-height: 40px; } .EnterpriseCooperationCon { margin-top: 30px; } .ECConListBox .num { width: 30px; height: 30px; font-size: 14px; } .ECConListBox .t { font-size: 16px; } .ECConContent { margin-top: 30px; } .ECConContent h5 { font-size: 18px; } .ECConContentDrop { width: 330px; } .ECConContentDrop .h { width: 330px; line-height: 60px; } .ECConContentDrop .h::before { top: 18px; } .ECConContentImgBox .t { font-size: 20px; margin-top: 20px; } .ECConContentButton { width: 100px; height: 40px; } .ECConContentButton a { line-height: 40px; font-size: 14px; } .ECConContentButton button { font-size: 20px; line-height: 40px; } .EnterpriseCooperationCon3 { width: 100%; margin-top: 20px; } .AboutUsMenu { width: 140px; padding-left: 10px; } .news1Ly { width: 100%; } .header .con .nav .ss { display: none; } .header .con .nav .li.En { display: none; } .AboutUsConThreeConLi { width: 50px; } .product1Img .imgbox .SubImgIov { display: none; } } @media (max-width: 768px) { .product3Tab-mod .tab-bar{width: 100%;} .RecruitConLi a{width: 100px;} .bannerBox{height: auto;} .product1Img img.active { left: auto; right: 115px; } .BannerText { top: 25%; } .BannerText h3 { font-size: 26px; } .BannerText h5 { font-size: 18px; } .BannerText p { font-size: 20px; } .banner .swiper-button-prev { left: 25px; } .banner .swiper-button-next { right: 25px; } .banner .swiper-pagination { display: none; } .home1Box { width: 100%; } .home2 { padding: 30px 0; } .home2Con { padding-top: 20px; } .home3 { padding: 30px 20px 20px; } .home3ConBox { width: 100%; display: block; margin: 5px auto; } .home3ConBox:first-child { margin: 5px auto; } .home3ConBox a { padding: 30px 0; } .home3ConBoxText p{height: auto;} .footerbox { padding: 30px 0; } .product1Text { top: 60%; } .product1Text p { font-size: 18px; } .product1Text h5 { font-size: 22px; margin-top: 5px; } .product2VideoSwitch img { width: 50px; height: 50px; } .product3Tab-mod { padding: 0 15px; } .product3Tit h5 { padding:0 20px; } .product3Tit h5 { font-size: 16px; line-height:1.4; } .product3Tab-mod { padding-left: 20px; text-align: center; } .product3Tab-mod .tab-modTit { text-align: left; } .product3Tab-mod .tab-cont { margin-top: 30px; } .product3Tab-mod .tab-item { font-size: 0; } .product3TabitemBox { margin-right: 0; width: 25%; text-align: center; } .product3TabitemBox .num { font-size: 46px; } .product3TabitemMore { position: static; float: none; text-align: left; margin-top: 30px; } .product4ConTit p { padding: 30px; text-align: left; } .product3ModalBox .modal-content { padding: 20px; } .product3ModalBox .modal-header p { font-size: 18px; } .product3ModalBox .modal-header h2 { font-size: 22px; } .ModalBoxLists { font-size: 16px; } .ModalBoxLists h5 { width: 100px; } .ModalBoxListsConBr { padding-left: 100px; } .message1TextCon p { font-size: 28px; } .message1TextCon h2 { font-size: 40px; } .message2 { padding: 20px 0 50px; } .message2Box { margin-top: 30px; padding: 30px; } .message2Box h5 { font-size: 16px; } .message2BoxListInputbox { padding: 15px 0 8px; } .message2BoxListSend { margin-left: 3%; height: 45px; } .message2BoxListSend a { line-height: 45px; } .message2BoxListOn button { width: 200px; line-height: 50px; } .banner2TextCon p { font-size: 24px; } .banner2TextCon h5 { font-size: 40px; } .news1 { padding: 20px 0 50px; overflow: hidden; } .news1ConList { white-space: nowrap; overflow-x: auto; margin-top: 30px; } .news1ConListLi a { width: auto; padding: 0 10px; font-size: 16px; } .news1Con { margin-top: 30px; } .news1ConBox { width: 49%; margin-left: 2%; } .news1ConBox:nth-child(3n +1) { margin-left: 2%; } .news1ConBox:nth-child(2n +1) { margin-left: 0; } .news1Xq { margin-top: 30px; } .news1XqTit h5 { font-size: 24px; } .news1XqTit .data { font-size: 18px; } .news1XqConText p { line-height: 20px; margin-top: 10px; } .news1XqConText p span{font-size: 16px !important;} .news1XqConText h3 { font-size: 20px; margin-top: 10px; } .news1XqConImg { margin: 20px 0; } .news1XqConImg img { width: 100%; height: auto; padding: 0; } .news1XqRelevant { margin-top: 30px; } .IndustryYyIcoBox { margin-top: 30px; } .IndustryYyIcoBoxText { padding: 10px; } .IndustryYyIcoBoxText h5 { font-size: 20px; } .IndustryYyIcoBoxText p { font-size: 12px; } .IndustryYyConTit { margin-top: 30px; } .IndustryYyConTit h5 { font-size: 26px; } .IndustryYyConBox { width: 49%; margin-left: 2%; margin-top: 15px; } .IndustryYyConBox:nth-child(3n + 1) { margin-left: 2%; } .IndustryYyConBox:nth-child(2n + 1) { margin-left: 0; } .IndustryYyManuTit h5 { font-size: 24px; } .IndustryYyManuCon { margin-top: 30px; } .IndustryYyManuConBoxImg { width: 100%; float: none; } .IndustryYyManuConBox:nth-child(even) .IndustryYyManuConBoxImg { float: none; } .IndustryYyManuConBoxText { width: 100%; padding: 15px; } .IndustryYyManuConBox:nth-child(even) .IndustryYyManuConBoxText { padding: 15px; } .IndustryYyManuXqConOneBox { margin-top: 30px; } .IndustryYyManuXqConOneBoxImg { width: 100%; float: none; } .IndustryYyManuXqConOneBoxText { width: 100%; padding: 20px 0; } .IndustryYyManuXqConOneBox:nth-child(even) .IndustryYyManuXqConOneBoxImg { float: none; } .IndustryYyManuXqConOneBox:nth-child(even) .IndustryYyManuXqConOneBoxText { float: none; padding: 20px 0; } .ServiceSupportNav { white-space: nowrap; overflow-x: auto; } .ServiceSupportNavLi a { padding: 0 30px; } .ServiceSupportProductConBox { width: 50%; margin-left: 0; } .ServiceSupportProductConBox:nth-child(4n + 1) { margin-left: 0; } .ServiceSupportProductConBox:nth-child(3n + 1) { margin-left: 0; } .ServiceSupportProductSeriesConTextTabCont { margin-top: 30px; } .SSPSeriesConTextTabContBoxLTabBar { width: 100%; white-space: nowrap; overflow-x: auto; } .SSPSeriesConTextTabContBoxLTabBar .tab-termTwo { width: auto; padding: 10px; height: auto; display: inline-block; margin-left: 10px; vertical-align: top; min-height: 100px; min-width: 150px; } .SSPSeriesConTextTabContBoxLTabBar .tab-termTwo .ico { width: 100%; height: 40px; text-align: center; } .SSPSeriesConTextTabContBoxLTabBar .tab-termTwo .ico img { position: static; -webkit-transform: none; -ms-transform: none; transform: none; margin: 0 auto; } .SSPSeriesConTextTabContBoxLTabBar .tab-termTwo p { width: 100%; line-height: 1; display: block; margin-top: 20px; text-align: center; } .SSPSeriesConTextTabContBoxLTabCont { width: 100%; margin-left: 0; margin-top: 25px; } .SSPSeriesConTextTabContBoxLTabCont .tab-itemTwo .con { height: 60px; } .SSPSeriesConTextTabContBoxLTabCont .tab-itemTwo .con a { line-height: 60px; } .ServiceSupportNavLi a { font-size: 20px; } .SSMoreSupportTabBar { height: 60px; } .SSMoreSupportTabBar .tab-term { line-height: 60px; font-size: 20px; } .SSCommonSP { margin-top: 30px; } .SSCommonSPConBox { padding: 15px 60px 15px 0; } .SSCommonSPConBoxT1 { font-size: 16px; } .SSCommonSPConBoxt2 { font-size: 14px; margin-top: 10px; } .SSWarranty { margin-top: 30px; } .SSWarrantyText h5 { margin-top: 30px; } .SSMaintenanceServiceBox { width: 100%; } .SSDownloadCenter { width: 100%; overflow: auto; } .SSDownloadCenterDrop { width: 49.5%; } .SSDownloadCenterButton { width: 100%; margin-left: 0; margin-top: 10px; } .SSDownloadCenterBot .th:nth-child(3) { display: none; } .SSDownloadCenterBot .th:first-child { width: 70%; } .SSDownloadCenterBot .th:nth-child(2) { width: 30%;} .SSDownloadCenterBot .td:first-child { width: 70%; } .SSDownloadCenterBot .td:nth-child(2) { width: 30%; } .AboutUsConOneText { padding: 150px 50px 0 140px; } .AboutUsConTwoConImg{position: relative;width: 100%;float: none;} .AboutUsConTwoConImg img { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);width: auto; } .AboutUsConTwo { background: #161a21; background-size: cover; } .AboutUsCon_2 { background: #161a21; background-size: cover; } .AboutUsConTwoContent .text { width: 100%; padding: 0 50px 0 140px; } .AboutUsConTwoContent .t { color: #fff; } .AboutUsConThreeCon { padding-left: 140px; } .AboutUsConThreeConLi .h { padding: 0 5px; } .AboutUsConThreeConLi.active { width: 33%; } .AboutUsConFourConImg{position: relative;width: 100%;float: none;height: 100vh;} .AboutUsConFourConImg img { width: auto; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);width: auto; } .AboutUsConFourConText { height: auto; } .AboutUsConFourConText .text { width: 100%; padding: 100px 20px 0 108px; } .AboutUsConFiveConImg { width: 100%; float: none; } .AboutUsConFiveConImg img { width: auto; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .AboutUsConFiveContent .text { width: 100%;padding-left: 140px;} .AboutUsConFiveContent .text .t2 { color: #fff; } /* .AboutUsConFiveContent .text h5 { color: #fff; } */ .AboutUsConFiveContent .text p { color: #fff; } .AboutUsConFiveContent .text .t1 { color: #fff; } .AboutUsConFiveContent .text .imgbox .t { color: #333; } .AboutUsConFiveContent .text .imgbox .text1 { color: #333; } .ContactUsTabBar { margin-top: 30px; } .ContactUsTabCont .TabItem .img { float: none; width: 100%; } .ContactUsTabCont .TabItem .text { float: none; width: 100%; padding-top: 20px; } .RecruitCon { width: 100%; overflow-x: auto;overflow-y: hidden;padding-bottom: 20px; } .RecruitCon::-webkit-scrollbar { -webkit-appearance: none; } .RecruitCon::-webkit-scrollbar:vertical { width: 5px; } .RecruitCon::-webkit-scrollbar:horizontal { height: 5px; } .RecruitCon::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, .5); border-radius: 10px; border: 1px solid #ffffff; } .RecruitCon::-webkit-scrollbar-track { border-radius: 10px; background-color: #ffffff; } /* .RecruitCon::-webkit-scrollbar { display: none; } */ .RecruitConTable { width: 1000px; } .ECConListBox { width: 50% !important; margin-top: 15px; text-align: left; padding-left: 25px; } .ECConListBox:last-child { text-align: left; } .ECConListBox .t { font-size: 14px; } .ECConContent h5 { font-size: 16px; } .ECConContentDrop { width: 300px; } .ECConContentDrop .h { width: 300px; } .ECConContentImgBox .t { font-size: 16px; } .ECConContentButton { margin: 30px auto 0; } .ECConContentButton button { font-size: 16px; } .ECCon2inpboxDropAdd { width: 140px; line-height: 40px; margin-left: 30px; } .ECCon2inpboxDropAddTwo { width: 140px; line-height: 40px; margin-left: 30px; } .EnterpriseCooperationCon2 h5 { font-size: 16px; } .ECCon2inpbox .t { font-size: 12px; padding-left: 20px; } .ECCon2inpbox .t.xin::before { left: 8px; } .ECCon2inpbox1 .tOne { font-size: 14px; } .ECCon2inpbox2 .tOne { font-size: 14px; } .ECCon2inpboxDrop .h { font-size: 14px; } .ECCon2But { margin-top: 30px; } .ECCon2But a { width: 130px; line-height: 40px; font-size: 16px; } .ECCon2inpboxDrop .chosen-container { padding-left: 50px; } .ECCon3inpbox input { margin-top: 10px; } .ECConT1 { margin-top: 10px; } .ECConDistributorBox { width: 31%; margin-right: 0; margin-top: 20px; margin-left: 3%; } .ECConDistributorBox:first-child { margin-left: 0; } .ECConDistributorBox:nth-child(3n + 1) { margin-left: 0; } .SSMoreSupportTabCont { text-align: left; } .footerbox .social-share { text-align: center; } .footerboxBot .tit h5 { padding-left: 20px; } .footerboxTopNav dl dt { margin-bottom: 0; padding-bottom: 0; } .footerboxTopNav dl dt::before { display: none; } .footerboxTopNavIconBox { text-align: center; } .search .main1 .search_box { width: 90%; margin: 10px auto 10px; } .search .main1 .content .block_box .block { -webkit-box-lines: multiple; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; } .search .main1 .content .block_box .block .img { width: 100%; margin-bottom: 10px; } .search .main1 .content .block_box .block .txt { width: 100%; } .header .icon1 .ico img { display: none; } .header .ydd_btn { width: 30px; height: 30px; cursor: pointer; position: absolute; z-index: 2000; top: 15px; right: 10px; } .header .ydd_btn span { display: block; width: 100%; height: 2px; background: #d30a2d; } .header .ydd_btn span.span02 { margin: 5px 0; } .header .ydd_btn.active span { background: #d30a2d; } .header .ydd_btn.active span.span01 { transform: rotate(45deg); -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); position: relative; top: 7px; margin-top: 0px; } .header .ydd_btn.active span.span02 { margin: 0.5px 0; } .header .ydd_btn.active span.span03 { transform: rotate(-45deg); -ms-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); position: relative; top: 2px; margin-top: 0px; } .header .ydd_btn.active span.span02 { width: 0; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } .news1Ly { margin: 30px auto 0; } .QuestionFeedback { width: 100%; padding: 50px 15px; } .SSDownloadCenterBotOn { text-align: left; } .product4ConTit { padding-bottom: 10px; } .AboutUsConOneBj img { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: auto; } .displayMessage{padding-top: 30px;margin-top: 30px;} .displayMessage p{margin-top: 15px;font-size: 14px;color: #fff;} .displayMessage .name, .displayMessage .data{font-size: 14px;} .displayMessage .data{margin-left: 20px;} .SSCommonSPConBox::before{top: 18px;} } @media (max-width: 465px) { .IndustryYyManuXqConOne{margin-top:0;} .navOneClassChild .li a::before{content:"- ";font-size:14px;color:#fff;} .IndustryYyConTit h5{font-size:20px;} #YSF-CUSTOM-ENTRY-0 img{max-width:80px !important;} .product2VideoSwitch i{ width: 25px; height: 25px; top: 10px; right: 10px; } .headerIovSsEn a{ line-height:26px; font-size: 16px; } .AboutUsConFiveContent .text .t2{font-size: 14px;} .news1XqConText p span{font-size: 14px !important;} .product3ModalBox .modal-body .ModalBoxList p span{font-size: 18px !important;} .AboutUsConTwoContent h5, .AboutUsConFourConText .text h5, .AboutUsConFiveContent .text h5{font-size: 22px;} .AboutUsConTwoContent p{font-size: 16px;margin-top: 10px;} .RecruitConTh p:nth-child(1){width: 7%;} .RecruitContdText p:nth-child(1){width: 7%;padding: 0;} .banner a{height: 300px;} .banner a img{position: absolute;width: auto;height: 100%; top: 0;left: 50%;transform: translateX(-50%);} .bannerBox{background-color:#000;} .home1Box a{display: block;max-height: 170px;overflow: hidden;} .home1Box .bj{height: 100%;} .home1{margin-top: -3px;} .AboutUsConOneText h5{display: block;font-size: 30px;color: #d30a2d;text-align: center;text-align: left;} .AboutUsConOneText .text{margin-top: 15px;} .news1ConBoxImg{height: auto;} .news1ConBoxImg img{position: static;transform: none;width: 100%;height: auto;} .news1ConBox:hover .news1ConBoxImg img{transform: translate(0) scale(1.1);} .product1Img { height: 400px; } .product1Img img.active { width: 200px; right: 50px; top: 100px; } .banner::before { display: none; } .header .icon1 .ico.fr { width: 30px; height: 30px; } .BannerText { left: 0; } .BannerText h3 { font-size: 20px; } .BannerText h5 { font-size: 14px; } .BannerText p { font-size: 16px; margin-top: 15px; } .banner .swiper-button-prev { left: 10px; } .banner .swiper-button-next { right: 10px; } .home1,.home2,.home3{background-color: #000;} .home1Box { padding: 0; margin-bottom: 10px; } .home2 { padding: 0 0 30px; } .home2Con { margin-top: 10px; } .home2ConBoxTextOne { padding: 15px 0; } .home2ConBoxImgSm { width: 100%; float: none; } .home2ConBoxText { width: 100%; padding-right: 0; padding-top: 20px; } .footerboxBotTextOne { text-align: center; } .footerboxBotTextOneFl a { padding: 0 10px; } .footerboxBotTextOneFl { float: none; width: 100%; text-align: center; } .En { float: none; margin-top: 10px; display: inline-block; } .product1Text { left: 20px; } .product1Text p { font-size: 14px; } .product1Text h5 { font-size: 18px; } .product3{margin-top:-5px} .product3Tab-mod .tab-modTit { display: block; } .product3Tab-mod .tab-term { width: auto; padding: 0 10px; margin-right: 0; } .product3Tab-mod { text-align: left; } .product3TabitemBox { width: 50%; margin-top: 10px; } .product4ConTit h5 { font-size: 20px;margin-bottom:20px; } .product4ConTit p { margin-top: 10px; text-align: left !important;padding: 0 15px;} .product4ConTit p span{font-size: 16px !important; line-height: 18px !important; } .product4ConBox { margin-top: 20px; } .product4ConBoxText h3 { font-size: 20px; } .product4ConBoxText .text { margin-top: 10px; } .product4ConBoxText .text p:first-child { font-size: 16px; margin-bottom: 5px; } .product4ConMore .More { width: 150px; height: 40px; } .product4ConMore .More a { line-height: 40px; padding-left: 10px; } .product4ConMore img { right: 10px; } .product4ConMore { margin-top: 20px; } .message1TextCon p { font-size: 20px; } .message1TextCon h2 { font-size: 30px; } .message2nav a { font-size: 14px; } .message2Box { margin-top: 20px; padding: 15px; } .message2Box h5 { font-size: 14px; } .message2BoxListInputbox{display: block;} .message2BoxListInputbox .t { width: 100%; font-size: 14px; text-align: left;padding: 0;} .message2BoxListSend a { font-size: 12px; } .message2BoxListOn button { font-size: 16px; } .message2BoxListOn button { width: 150px; line-height: 40px; } .news1Nav { font-size: 12px; } .news1Nav a { font-size: 12px; } .news1 { padding: 10px 0 30px; } .news1ConBox { width: 100%; margin-left: 0; } .news1ConBoxText .data { font-size: 18px; } .banner2TextCon p { font-size: 18px; } .banner2TextCon h5 { font-size: 26px; } .news1XqTit h5 { font-size: 18px; } .news1XqConText h3 { font-size: 16px; } .news1XqTit .data { font-size: 14px; margin-top: 5px;} .bdsharebuttonbox { margin-top: 30px; } .IndustryYyIcoBox { width: 100%; margin-top: 20px; } .IndustryYyIcoBoxText { padding: 10px 0; } .IndustryYyConBox { width: 100%; margin-left: 0; } .IndustryYyConBox:nth-child(3n + 1) { margin-left: 0; } .IndustryYy-Manu .news1 { padding-top: 20px; } .IndustryYyManuConBoxText p { margin-top: 20px; } .IndustryYyManuConBox { margin-top: 20px; } .IndustryYyManuConBoxTextMore { margin-top: 20px; width: 180px; line-height: 40px; padding-left: 15px; font-size: 14px; } .banner3Text { left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); text-align: center; width: 100%; } .banner3Text p { font-size: 18px; } .banner3Text h5 { font-size: 14px; } .IndustryYyManuXqCon { margin-top: 0; } .IndustryYyManuXqTit { padding-top: 15px; } .IndustryYyManuXqTit h5 { font-size: 18px; } .IndustryYyManuXqConBox { width: 100%; margin-left: 0; margin-top: 10px; } .IndustryYyManuXqConBoxImg { margin-top: 10px; } .IndustryYyManuXqConOneBox { margin-top: 20px; } .IndustryYyManuXqConOneBoxText p { margin-top: 5px; } .ServiceSupportProductConBox { width: 100%; margin-top: 20px; } .ServiceSupportProductConBox h5 { margin-top: 10px; } .ServiceSupportNav { margin-top: 30px; } .ServiceSupportNavLi { height: 40px; } .ServiceSupportNavLi a { font-size: 18px; line-height: 40px; } .ServiceSupportProductSeriesConText h3 { padding-bottom: 20px; } .ServiceSupportProductSeriesConTextTabBar .tab-termOne { margin-right: 20px; } .ServiceSupportProductSeriesConImg { width: 100%; position: static; text-align: center; } .ServiceSupportProductSeriesConImg img { max-width: 100%; width: auto; } .ServiceSupportProductSeriesConText { padding-left: 0; } .ServiceSupportProductSeriesConTextTabBar { width: 100%; } .SSPSeriesConTextTabContBoxLTabCont .tab-itemTwo .con::before { right: 20px; } .SSPSeriesConTextTabContBoxLTabCont .tab-itemTwo a { padding: 0 40px 0 15px; font-size: 16px; } .ServiceSupportDetalis { margin-top: 30px; } .ServiceSupportDetalisTit { font-size: 20px; padding-bottom: 10px; } .ServiceSupportDetalisText { margin-top: 20px; } .ServiceSupportDetalisText h5 { font-size: 16px; } .ServiceSupportDetalisText .content { font-size: 12px; line-height: 18px; } .ServiceSupportDetalisBut { margin-top: 30px; } .ServiceSupportDetalisBut { width: 120px; height: 40px; } .ServiceSupportDetalisBut a { line-height: 40px; font-size: 16px; } .SSMoreSupportTabBar { height: 40px; } .SSMoreSupportTabBar .tab-term { line-height: 40px; font-size: 16px; } .SSMoreSupportTabCont { margin-top: 30px; } .SSCommonSPConBox::before { width: 10px;height: 10px;} .SSCommonSPConBox::after { height: 20px; } .SSCommonSPConBoxt2 { font-size: 12px; } .SSWarrantyText h5 { margin-top: 20px; font-size: 16px; } .SSWarrantyText .t { margin-top: 20px; font-size: 14px; line-height: 26px; } .SSWarrantyText table th { padding: 15px; font-size: 20px; } .SSWarrantyText table td { padding: 5px 10px 15px; font-size: 14px; line-height: 24px; } .SSDisclaimersConText { margin-top: 20px; font-size: 14px; line-height: 20px; } .SSDisclaimersConText .t1 { margin-top: 40px; } .SSMaintenanceProcess { margin-top: 30px; } .SSDownloadCenterBotOn a { font-size: 16px; } .SSDownloadCenterBot .th:first-child { font-size: 16px; } .SSDownloadCenterBot .td:first-child { font-size: 14px; padding: 0 10px; } .SSDownloadCenterBot .td:nth-child(2) { font-size: 14px; } .SSDownloadCenterBot .tr { height: 40px; } .SSDownloadCenterBot .td { line-height: 1; } .AboutUsConOneText { padding: 100px 20px 0; height: 100vh;} .AboutUsConTwoContent .text { padding: 35px 20px 0; } .AboutUsConTwoContent p span, .AboutUsConFourConText .text .t2 span, .AboutUsConFiveContent .text span, .AboutUsConThreeConLiIov .t span, .AboutUsConFiveContent .text .imgbox .t{font-size: 14px !important;color: #fff !important;} .AboutUsConThreeConLi.active { width: 50%; } .AboutUsConFourConText .text { padding: 50px 20px 50px; } .ContactUsTabBar .TabTerm { padding: 0 20px; font-size: 20px; line-height: 40px; } .RecruitConLi { white-space: nowrap; overflow-x: auto;} /* .RecruitConLi::-webkit-scrollbar { display: none; } */ .RecruitConTh p { font-size: 16px; } .RecruitContdText { height: 40px; } .RecruitContdText p { font-size: 14px; line-height: 40px; height: 40px; } .RecruitConTrIov { padding: 20px 20px; } .ContactUsTabCont .TabItem{font-size: 14px;} .ContactUsTabCont .TabItem h5 { margin-top: 10px; font-size: 18px; } .RecruitConTrIovBot { margin-top: 20px; } .RecruitConTrIovBot { width: 140px; height: 40px; } .RecruitContdText p:nth-child(4) { height: 40px; } .RecruitContdText p:last-child { height: 40px; } .ContactUsTabCont .TabItem .num { font-size: 26px; } .ContactUsTabCont .TabItem .t1 { font-size: 14px; line-height: 20px; margin-top: 5px; } .EnterpriseCooperationTit a { font-size: 16px; padding: 0 10px; } .EnterpriseCooperationCon { margin-top: 20px; } .ECConListBox { padding-left: 10px; } .ECConContentDrop { margin: 20px auto 0; } .ECConContentDrop .h { line-height: 40px; font-size: 14px; } .ECConContentDropDown .t { font-size: 14px; } .ECCon2inpboxOne .t { width: 92px; } .EnterpriseCooperationCon2 { margin-top: 30px; } .EnterpriseCooperationCon2 h5 { margin-top: 20px; } .ECCon2inpbox{display: flex;} .ECCon2inpbox .t { width: auto; line-height: 49px; white-space: nowrap;padding-right: 20px;} .ECCon2inpbox input { height: 50px; } .ECCon2inpboxDrop { height: 50px; line-height: 49px; width: 100%; flex: 1;} .ECCon2inpbox input { width:100%;flex: 1;} .ECCon2inpboxDrop .chosen-container-single .chosen-single { height: 46px; } .ECCon2inpboxDrop .chosen-container-single .chosen-single span { line-height: 46px; } .ECCon2inpbox1 .tOne { width: 145px; line-height: 49px; } .ECCon2inpbox2 .tOne { width: 145px; line-height: 49px; } .ECCon2inpboxDrop { width: 100%; width: 100%;flex: 1; } .EnterpriseCooperationCon3 h5 { font-size: 16px; } .ECConT1 { font-size: 14px; } .EnterpriseCooperationCon3 textarea { height: 180px; } .ECConT2 { display: block; line-height: 30px; margin-top: 10px; font-size: 14px; } .ECConT2 p { display: block; } .ECConT3 { line-height: 24px; margin-top: 10px; font-size: 14px; } .ECCon3inpboxDrop { margin-top: 0; } .ECCon3inpbox input { width: 100px; margin-right: 5px; line-height: 30px; } .ECConDistributorBox { width: 49%; margin-left: 2%; } .ECConDistributorBox:nth-child(3n + 1) { margin-left: 2%; } .ECConDistributorBox:first-child { margin-left: 0; } .ECConDistributorBox:nth-child(2n + 1) { margin-left: 0; } .ECConDistributorBox .t { font-size: 16px; } .ECCon2inpboxDrop::before { top: 22px; } .AboutUsMenu { display: none !important;} .AboutUsConThreeCon { padding-left: 0; } .AboutUsConThreeConLi { padding-top: 20px; } .AboutUsConThreeConLiIov .swiper-container { margin-top: 10px; padding-top: 40px; } .SSDownloadCenterTop { margin-top: 20px; } .SSDownloadCenterDrop { width: 100%; margin-left: 0; margin-top: 10px; } .SSDownloadCenterBot { padding: 20px; } .SSDownloadCenterBotOn a { padding: 0 10px; } .SSDownloadCenterBot .th { line-height: 40px; font-size: 16px; } .EnIov { width: 100%; } .EnIov::before { left: 46px; -webkit-transform: none; -ms-transform: none; transform: none; } .home1BoxText h5 { font-size: 18px; } .news1Ly form input { line-height: 40px; font-size: 14px; padding-left: 10px; } .news1Ly form textarea { height: 150px; font-size: 14px; padding: 10px; } .news1Ly form button { margin-top: 20px; width: 100px; line-height: 40px; font-size: 14px; } .QuestionFeedback { padding: 30px 15px; } .QuestionFeedbackText { font-size: 12px; } .AboutUsConFiveContent .text { padding-left: 0; } .home1BoxText p { display: none; } .headerIovSsIov .headerIovSsIovInput { top: 100%; } .headerIovSsIov .headerIovSsIovInput input { line-height: 35px; } .headerIovSsIov .headerIovSsIovInput button { height: 40px; line-height: 40px; font-size: 14px; } .header .logo { top: 10px; -webkit-transform: none; -ms-transform: none; transform: none; } /* .banner .swiper-button-next, .banner .swiper-button-prev { display: none; } */ .ContactUsTabBar .TabTerm { padding: 0; } .ContactUsTabBar .TabTerm a { line-height: 40px; padding: 0 15px; font-size: 18px; } .ECConListBox::before { display: none; } .headerIov { margin-right: 0; } .news1ConBoxText h5 { height: auto; } .displayMessage{padding-top: 20px;margin-top: 20px;} .displayMessage p{margin-top: 15px;font-size: 14px;color: #fff;} .displayMessage .name, .displayMessage .data{display: block;} .displayMessage .data{margin-left: 0;margin-top: 5px;} .IndustryYyManuConBoxTextMore::before{width: 18px;height: 12px;background-size: 100%;} .AboutUsConTwoConImg{display: none;} .AboutUsConTwo{background: url(../images/Lbjj1.jpg)no-repeat;background-size: cover;} } @media (max-width: 380px) { .ECConListBox { padding-left: 0; width: 100% !important; } } @media (max-height: 750px) { .AboutUsConTwoContent .text{top:50px;} } @media (max-height: 600px) { .AboutUsConTwoContent p{margin: 20px 0 10px;} .AboutUsConFourConText .text{padding-right: 25px;} } @media (max-height: 900px) { .AboutUsConFourConText{padding-left: 200px;} .AboutUsConFourConText .text{padding-right: 133px;} } @media (max-height: 730px) { .AboutUsConFourConText .text{padding-right: 92.5px;} } @media (max-width: 1920px) { .product1Img img{max-width: 420px;} .product1Img .imgbox .SubImgIov .text{min-width: 400px;} } @media (max-width: 765px) { .AboutUsConFourConText{padding: 0;} .AboutUsConFourConText .text{padding-right: 20px;} .SSDownloadCenterBot .td:nth-child(3){display: none;} .SSDownloadCenterBot .th:nth-child(2), .SSDownloadCenterBot .td:nth-child(2){padding-left: 0;} } /*分享插件*/ .social-share .icon-wechat .wechat-qrcode { display: none; border: 1px solid #eee; position: absolute; z-index: 9; top: -205px; left: -84px; width: 200px; height: 192px; color: #666; font-size: 12px; text-align: center; background-color: #fff; -webkit-transition: all 200ms; transition: all 200ms; -webkit-tansition: all 350ms; -moz-transition: all 350ms; } .social-share .icon-wechat .wechat-qrcode.bottom { top: 40px; left: -84px; } .social-share .icon-wechat .wechat-qrcode.bottom:after { display: none; } .social-share .icon-wechat .wechat-qrcode h4 { font-weight: normal; height: 26px; line-height: 26px; font-size: 12px; background-color: #f3f3f3; margin: 0; padding: 0; color: #777; } .social-share .icon-wechat .wechat-qrcode .qrcode { width: 105px; margin: 10px auto; } .social-share .icon-wechat .wechat-qrcode .qrcode table { margin: 0 !important; } .social-share .icon-wechat .wechat-qrcode .help p { font-weight: normal; line-height: 16px; padding: 0; margin: 0; } .social-share .icon-wechat .wechat-qrcode:after { content: ''; position: absolute; left: 50%; margin-left: -6px; bottom: -13px; width: 0; height: 0; border-width: 8px 6px 6px 6px; border-style: solid; border-color: #fff transparent transparent transparent; } .social-share .icon-wechat:hover .wechat-qrcode { display: block; } .defaWebMap { background-color: #fff; margin: 50px 0; } .defaWebMap dl { border: 1px solid #e6e6e6; margin-top: 30px; } .defaWebMap dl h3 { padding-left: 20px; padding-bottom: 5px; } .defaWebMap dl h3 span { font-size: 20px; color: #00a1e9; position: relative; top: -12px; background-color: #fff; padding: 0px 13px; } .defaWebMap dl h3 span a { color: #d90000; } .defaWebMap dl dd { padding-left: 33px; padding-bottom: 15px; } .defaWebMap dl dd a { font-size: 14px; padding-right: 20px; display: inline-block; padding-bottom: 8px; } .defaWebMap dl dd a em { display: inline-block; margin-right: 8px; width: 3px; height: 3px; background-color: #d90000; vertical-align: middle; } /* 9-8新增样式 */ @media (max-width: 768px) { .home1{padding: 15px;} .home3 {padding: 20px 15px 15px;} } @media (max-width: 460px) { .ECCon2inpboxImg{position:relative;top:-40px;left:150px} .SSPSeriesConTextTabContBoxLTabCont .tab-itemTwo .con a::before{right:10px} .AboutUsConOneText h5{display: none;} .AboutUsConOneText .text{margin-top: 0;} .modal-body table tr td:first-child{width: 100px;} .ContactUsTabCont{margin-top: 10px;} .home2ConBoxText h3,.home2ConBoxTextOne h3{font-size: 16px;line-height: 24px;} .header .logo a{width: 85px;} .headerIov img{width: 20px;} .header .ydd_btn{width: 20px;} .header .ydd_btn{right: 15px;} .header .con{top: 50px;padding:10px 20px;} .IndustryYyManuTit h5{font-size:20px;} .IndustryYyManuConBoxText h5{font-size:16px;} .IndustryYyManuConBoxText p{margin-top:10px;} .header .logo{left: 15px;} .headerIovSsIov .headerIovSsIovInput input{line-height: 36px;} .indexnews_box .home2ConBoxImg,.indexnews_box .home2ConBoxImgSm{display: none;} .home2ConBoxTextOne{background: none;} .home3 .home3Con{display: flex;flex-wrap: wrap;justify-content: space-between;} .home3ConBox{width: 32.5%;display: inline-block;} .home3ConBoxText h3{font-size: 14px;} .home3ConBoxText p{font-size: 12px;margin-top: 5px;} .home3ConBoxIcon{width: 30px;height:30px;} .home3ConBoxText p br{display: none;} .footerboxTopNav dl form button{width: 40px;height:40px;} .footerboxTopNav dl form input{line-height: 40px;} .footerboxBot .tit .logo2{width: 100px;height:auto;} .footerboxBot .tit h5{font-size: 20px;} .footerboxBot {margin-top: 20px;} .suspend_nav{width: 40px;height:40px;text-align: center;right: 15px;bottom: 60px;} .suspend_nav img{width:80%;} .footerboxBotTextTow{font-size: 12px;} .footerboxBotTextTow span{display: block;} .product3ModalBox .modal-header p{font-size: 14px;} .product3Tab-mod .tab-modTit,.product3ModalBox .modal-header h2{font-size: 16px;} .modal-body table tr td{font-size: 12px;} .modal-body table tr td{padding: 5px 0 5px;} .product3TabitemBox{text-align: left;} .product3TabitemMore{padding-left: 0;} .product4ConMore a{font-size: 14px;} .product4ConMore img{width: 17px;} .product4ConMore .More{width: 120px;} .message1Img,.banner2Img{height: 200px;position: relative;} .message1Img img,.banner2Img img { width: 100%; position: absolute; top: 50%; left: 50%; width: 200%; transform: translate(-50%, -50%); } input::-ms-reveal{display: none !important;} input:internal-autofill-selected{display: none !important;color: transparent;background: none !important;} .message1TextCon p,.banner2TextCon p{font-size: 18px;} .message1TextCon h2,.banner2TextCon h5{font-size: 22px;} .message1TextCon .text,.banner2TextCon{bottom: 10px;} .ECCon3inpboxDrop .h{padding-left: 15px;} .message2BoxListInputbox .ECCon3inpboxDrop,.companyBox{width:100%!important;} /* .message2BoxListInputbox .ECCon3inpboxDrop::before{top: 10px;} */ .ECCon3inpboxDrop::before{top: 21px !important;} .ECCon3inpboxDrop::before,.companyBox::before{right: 10px;} .message2BoxListInputbox .ECCon3inpboxDrop .h{padding: 10px;} .ECCon3inpboxDrop .h,.SSMoreSupportTabBar .tab-term,.SSMoreSupportTabCont .tab-item a{font-size: 14px;} .message2BoxListInputbox .ECCon3inpboxDropDown .t{line-height: 35px;} .ECCon3inpboxDropDown .t{padding-left: 15px;} .message2BoxListInputbox input{padding-left: 15px;font-size: 14px;padding: 10px;} .message2BoxListInputbox input::-ms-reveal{display: none;} .message2BoxListInputbox input.qq{width: 100%;} .message2BoxListInputboxLast{display: inline-block;} .companyBox::before{top: 18px;} .company{background: #161a21;font-size: 14px;width: 100%;} .message2BoxListSend img{width: 100%;} .ServiceSupportNavLi a{font-size: 14px;line-height: 35px;padding: 0 10px;} .ServiceSupportNavLi{height: 35px;} .ServiceSupportNav{text-align: left;} .ServiceSupportProductConBoxImg img{position: static !important;transform: translate(0);} .ServiceSupportProductConBoxImg{height: auto;text-align: center;} .ServiceSupportProductConBox{margin-top: 30px;} .SSMaintenanceServiceBoxText h5{font-size: 16px;} .SSMaintenanceServiceBoxIov{top: -100%;} .SSDownloadCenterBot .td{line-height: 30px !important;margin-top: 5px;} .SSDownloadCenterBot .th:nth-child(2){text-align: center;} .ServiceSupportProductConBoxImgIov h3{font-size: 14px;padding-bottom: 10px;} .ServiceSupportProductConBoxImgIov .text{margin-top: 20px;} .ServiceSupportProductConBoxImgIov .text a,.ServiceSupportProductSeriesConTextTabBar .tab-termOne,.SSPSeriesConTextTabContBoxLTabCont .tab-itemTwo a{font-size: 14px;} .ServiceSupportProductConBoxImgIov .text{margin-top: 15px;} .ServiceSupportProductSeriesConText h3{font-size: 18px;padding-bottom: 10px;} .SSPSeriesConTextTabContBoxLTabBar .tab-termTwo:first-child{margin-left: 0;} .ServiceSupportProductSeriesConTextTabBar{margin-top: 20px;} .SSPSeriesConTextTabContBoxLTabBar .tab-termTwo p{font-size: 12px;} .SSPSeriesConTextTabContBoxLTabBar{white-space: normal;} .SSPSeriesConTextTabContBoxLTabBar .tab-termTwo{min-width: inherit;width: calc(33.333% - 7px);margin-bottom: 10px;min-height:inherit;} .SSPSeriesConTextTabContBoxLTabBar{display: flex;flex-wrap: wrap;} .SSPSeriesConTextTabContBoxLTabBar .tab-termTwo:nth-child(4n){margin-left: 0;} .SSPSeriesConTextTabContBoxLTabBar .tab-termTwo p{margin-top: 10px;} .SSPSeriesConTextTabContBoxLTabBar .tab-termTwo .ico{height: 25px;} .SSPSeriesConTextTabContBoxLTabBar .tab-termTwo .ico img{width: 20px;} .SSMoreSupportTabMod .SSMoreSupportTabCont .tab-item a{padding: 0;width: 32.5%;} .SSMoreSupportTabMod .SSMoreSupportTabCont .tab-item:nth-child(2) a{width: 100%;} .IndustryYy .IndustryYyIco{display: flex;} .IndustryYyIcoBoxText h5{font-size: 16px;} .IndustryYyIcoBoxImg img{width: 40px;} .news1ConBoxText h5{font-size: 16px;line-height: 24px;} .news1ConBoxText{padding-top: 15px;} .home2ConBoxTextOne .data,.home2ConBoxText .data,.news1ConBoxText .data{font-size: 14px;} .home2ConBoxText,.home2Con{padding-top: 0;} .home2 .title h5{font-size: 22px;} .social-share a{width: 50px;height: 50px;background-size: 36% !important;} .news1XqRelevant .row{padding: 0;} .news1XqRelevantTit h5{font-size: 16px;} .news1XqRelevantTit img{width:20px;} .news1LyYzmImg{margin-left: 10px;} .SSDownloadCenterBot .th:first-child{padding-left: 30px;} .SSDownloadCenterBot{padding: 10px;} .LiuYanBox .t{ width: 100%; font-size: 14px; text-align: left; padding:10px 0;} .LiuYanBox textarea{ float: none; width: 100%; margin-top: 0; } } @media (max-width: 400px) { .message1Img img, .banner2Img img{width: 250%;} }