@charset "utf-8"; /*css 初始化 */ html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin: 0; padding: 0; } fieldset, img, input, button, textarea { border: none; padding: 0; margin: 0; outline-style: none; } /*去掉input等聚焦时的蓝色边框*/ ul, ol { list-style: none; } input { padding-top: 0; padding-bottom: 0; font-family: "pingfang sc", "microsoft yahei", "simsun", "宋体"; } select, input { vertical-align: middle; } select, input, textarea { font-size: 12px; margin: 0; } textarea { resize: none; } /*防止拖动*/ img { border: 0; vertical-align: middle; } /* 去掉图片低测默认的3像素空白缝隙,或者用display:block也可以*/ table { border-collapse: collapse; } body { font-family: "pingfang sc", "microsoft yahei", "simsun", "宋体"; color: #001207; } .clearfix:before, .clearfix:after { /*清楚浮动*/ content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; /*ie/7/6*/ } a { text-decoration: none !important; color: #666; } h1, h2, h3, h4, h5, h6 { text-decoration: none; font-weight: normal; font-size: 100%; } /*设置h标签的大小,设置跟父亲一样大的字体font-size:100%;*/ s, i, em { font-style: normal; text-decoration: none; } html, body { width: 100%; min-height: 100%; margin: 0; padding: 0; scroll-behavior: smooth; overflow-x: hidden; } * { -webkit-box-sizing: border-box; box-sizing: border-box; } input[type=number] { -moz-appearance: textfield; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } *::-webkit-scrollbar { /*滚动条整体样式*/ width: 12px; /*高宽分别对应横竖滚动条的尺寸*/ height: 12px; } *::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 6px; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow: none; box-shadow: none; background-color: #d6d8da; border-color: transparent; border-width: 1px; border-style: solid; background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background-color: #83888e !important; border-color: #83888e !important; } *::-webkit-scrollbar-track { border-radius: 10px; background: rgba(0, 0, 0, 0); -webkit-box-shadow: none; box-shadow: none; } /*! animate.css - http://daneden.me/animate licensed under the mit license - http://opensource.org/licenses/mit copyright (c) 2015 daniel eden */ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -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 { -webkit-animation-duration: 0.75s; animation-duration: 0.75s; } .animated.flipoutx, .animated.flipouty { -webkit-animation-duration: 0.75s; animation-duration: 0.75s; } @-webkit-keyframes bounce { 0%, 20%, 53%, 80%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40%, 43% { -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -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%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40%, 43% { -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -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; transform-origin: center bottom; } @-webkit-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { -webkit-animation-name: flash; animation-name: flash; } /* originally authored by nick pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes pulse { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes pulse { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes rubberband { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 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); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes rubberband { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 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); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .rubberband { -webkit-animation-name: rubberband; animation-name: rubberband; } @-webkit-keyframes shake { 0%, 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 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%, 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 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 swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } 100% { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } @keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } 100% { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } .swing { -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @-webkit-keyframes tada { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes tada { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .tada { -webkit-animation-name: tada; animation-name: tada; } /* originally authored by nick pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes wobble { 0% { -webkit-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } 100% { -webkit-transform: none; transform: none; } } @keyframes wobble { 0% { -webkit-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } 100% { -webkit-transform: none; transform: none; } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes bouncein { 0%, 20%, 40%, 60%, 80%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-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); } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes bouncein { 0%, 20%, 40%, 60%, 80%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-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); } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .bouncein { -webkit-animation-name: bouncein; animation-name: bouncein; } @-webkit-keyframes bounceindown { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-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); } 100% { -webkit-transform: none; transform: none; } } @keyframes bounceindown { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-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); } 100% { -webkit-transform: none; transform: none; } } .bounceindown { -webkit-animation-name: bounceindown; animation-name: bounceindown; } @-webkit-keyframes bounceinleft { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-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); } 100% { -webkit-transform: none; transform: none; } } @keyframes bounceinleft { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-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); } 100% { -webkit-transform: none; transform: none; } } .bounceinleft { -webkit-animation-name: bounceinleft; animation-name: bounceinleft; } @-webkit-keyframes bounceinright { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-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); } 100% { -webkit-transform: none; transform: none; } } @keyframes bounceinright { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-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); } 100% { -webkit-transform: none; transform: none; } } .bounceinright { -webkit-animation-name: bounceinright; animation-name: bounceinright; } @-webkit-keyframes bounceinup { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-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); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceinup { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-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); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 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); } 100% { 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); } 100% { 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); } 100% { 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); } 100% { 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); } 100% { 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); } 100% { 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); } 100% { 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); } 100% { 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); } 100% { 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); } 100% { 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; } 100% { opacity: 1; } } @keyframes fadein { 0% { opacity: 0; } 100% { opacity: 1; } } .fadein { -webkit-animation-name: fadein; animation-name: fadein; } @-webkit-keyframes fadeindown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeindown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 100% { 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); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeindownbig { 0% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeindownbig { -webkit-animation-name: fadeindownbig; animation-name: fadeindownbig; } @-webkit-keyframes fadeinleft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeinleft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } 100% { 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); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeinleftbig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeinleftbig { -webkit-animation-name: fadeinleftbig; animation-name: fadeinleftbig; } @-webkit-keyframes fadeinright { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeinright { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } 100% { 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); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeinrightbig { 0% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } 100% { 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, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeinup { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { 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); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeinupbig { 0% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeinupbig { -webkit-animation-name: fadeinupbig; animation-name: fadeinupbig; } @-webkit-keyframes fadeout { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeout { 0% { opacity: 1; } 100% { opacity: 0; } } .fadeout { -webkit-animation-name: fadeout; animation-name: fadeout; } @-webkit-keyframes fadeoutdown { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes fadeoutdown { 0% { opacity: 1; } 100% { 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; } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes fadeoutdownbig { 0% { opacity: 1; } 100% { 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; } 100% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes fadeoutleft { 0% { opacity: 1; } 100% { 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; } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes fadeoutleftbig { 0% { opacity: 1; } 100% { 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; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes fadeoutright { 0% { opacity: 1; } 100% { 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; } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes fadeoutrightbig { 0% { opacity: 1; } 100% { 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; } 100% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes fadeoutup { 0% { opacity: 1; } 100% { 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; } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes fadeoutupbig { 0% { opacity: 1; } 100% { 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) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -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); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -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) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -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); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -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) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipinx { 0% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } 100% { -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) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipiny { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } 100% { -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) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } @keyframes flipoutx { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 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) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } @keyframes flipouty { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 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); opacity: 1; } 80% { -webkit-transform: skewx(-5deg); transform: skewx(-5deg); opacity: 1; } 100% { -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); opacity: 1; } 80% { -webkit-transform: skewx(-5deg); transform: skewx(-5deg); opacity: 1; } 100% { -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; } 100% { -webkit-transform: translate3d(100%, 0, 0) skewx(30deg); transform: translate3d(100%, 0, 0) skewx(30deg); opacity: 0; } } @keyframes lightspeedout { 0% { opacity: 1; } 100% { -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: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } 100% { -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: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } 100% { -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: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } 100% { -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: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } 100% { -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: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { -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: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { -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: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { -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: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { -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: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } 100% { -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: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } 100% { -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; } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } @keyframes rotateout { 0% { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 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; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } @keyframes rotateoutdownleft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 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; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateoutdownright { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -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; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateoutupleft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -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; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } @keyframes rotateoutupright { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } .rotateoutupright { -webkit-animation-name: rotateoutupright; animation-name: rotateoutupright; } @-webkit-keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 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; } 100% { -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; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 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; } 100% { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } .hinge { -webkit-animation-name: hinge; animation-name: hinge; } /* originally authored by nick pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollin { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes rollin { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .rollin { -webkit-animation-name: rollin; animation-name: rollin; } /* originally authored by nick pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollout { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } @keyframes rollout { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 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, 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 zoominup { 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); } } .zoominup { -webkit-animation-name: zoominup; animation-name: zoominup; } @-webkit-keyframes zoomout { 0% { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 100% { opacity: 0; } } @keyframes zoomout { 0% { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 100% { 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); } 100% { 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); } 100% { 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); } 100% { 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); } 100% { 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); } 100% { 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); } 100% { 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); } 100% { 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); } 100% { 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; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideindown { 0% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 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; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideinleft { 0% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 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; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideinright { 0% { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 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; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideinup { 0% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideinup { -webkit-animation-name: slideinup; animation-name: slideinup; } @-webkit-keyframes slideoutdown { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes slideoutdown { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes slideoutleft { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes slideoutright { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes slideoutup { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .slideoutup { -webkit-animation-name: slideoutup; animation-name: slideoutup; } .cp { cursor: pointer !important; } .cm { cursor: move !important; } .cna { cursor: not-allowed !important; } .fw-b { font-weight: bold !important; } .fw-n { font-weight: normal !important; } .fs-10 { font-size: 10px !important; } .fs-12 { font-size: 12px !important; } .fs-14 { font-size: 14px !important; } .fs-16 { font-size: 16px !important; } .fs-18 { font-size: 18px !important; } .fs-20 { font-size: 20px !important; } .fs-22 { font-size: 22px !important; } .fs-24 { font-size: 24px !important; } .fs-26 { font-size: 26px !important; } .fs-28 { font-size: 28px !important; } .fs-30 { font-size: 30px !important; } .fs-32 { font-size: 32px !important; } .fs-34 { font-size: 34px !important; } .fs-36 { font-size: 36px !important; } .fs-38 { font-size: 38px !important; } .fs-40 { font-size: 40px !important; } .fs-42 { font-size: 42px !important; } .fs-44 { font-size: 44px !important; } .fs-46 { font-size: 46px !important; } .fs-48 { font-size: 48px !important; } .fs-50 { font-size: 50px !important; } .fs-52 { font-size: 52px !important; } .fs-54 { font-size: 54px !important; } .fs-56 { font-size: 56px !important; } .fs-58 { font-size: 58px !important; } .fs-60 { font-size: 60px !important; } .w-20 { width: 20px !important; } .w-24 { width: 24px !important; } .w-28 { width: 28px !important; } .w-32 { width: 32px !important; } .w-36 { width: 36px !important; } .w-40 { width: 40px !important; } .w-44 { width: 44px !important; } .w-48 { width: 48px !important; } .w-52 { width: 52px !important; } .w-56 { width: 56px !important; } .w-60 { width: 60px !important; } .w-64 { width: 64px !important; } .w-68 { width: 68px !important; } .w-72 { width: 72px !important; } .w-76 { width: 76px !important; } .w-80 { width: 80px !important; } .w-84 { width: 84px !important; } .w-88 { width: 88px !important; } .w-92 { width: 92px !important; } .w-96 { width: 96px !important; } .w-100 { width: 100px !important; } .w-104 { width: 104px !important; } .w-108 { width: 108px !important; } .w-112 { width: 112px !important; } .w-116 { width: 116px !important; } .w-120 { width: 120px !important; } .w-124 { width: 124px !important; } .w-128 { width: 128px !important; } .w-132 { width: 132px !important; } .w-136 { width: 136px !important; } .w-140 { width: 140px !important; } .w-144 { width: 144px !important; } .w-148 { width: 148px !important; } .w-152 { width: 152px !important; } .w-156 { width: 156px !important; } .w-160 { width: 160px !important; } .w-164 { width: 164px !important; } .w-168 { width: 168px !important; } .w-172 { width: 172px !important; } .w-176 { width: 176px !important; } .w-180 { width: 180px !important; } .w-184 { width: 184px !important; } .w-188 { width: 188px !important; } .w-192 { width: 192px !important; } .w-196 { width: 196px !important; } .w-200 { width: 200px !important; } .w-204 { width: 204px !important; } .w-208 { width: 208px !important; } .w-212 { width: 212px !important; } .w-216 { width: 216px !important; } .w-220 { width: 220px !important; } .w-224 { width: 224px !important; } .w-228 { width: 228px !important; } .w-232 { width: 232px !important; } .w-236 { width: 236px !important; } .w-240 { width: 240px !important; } .w-244 { width: 244px !important; } .w-248 { width: 248px !important; } .w-252 { width: 252px !important; } .w-256 { width: 256px !important; } .w-260 { width: 260px !important; } .w-264 { width: 264px !important; } .w-268 { width: 268px !important; } .w-272 { width: 272px !important; } .w-276 { width: 276px !important; } .w-280 { width: 280px !important; } .w-284 { width: 284px !important; } .w-288 { width: 288px !important; } .w-292 { width: 292px !important; } .w-296 { width: 296px !important; } .w-300 { width: 300px !important; } .w-304 { width: 304px !important; } .w-308 { width: 308px !important; } .w-312 { width: 312px !important; } .w-316 { width: 316px !important; } .w-320 { width: 320px !important; } .w-324 { width: 324px !important; } .w-328 { width: 328px !important; } .w-332 { width: 332px !important; } .w-336 { width: 336px !important; } .w-340 { width: 340px !important; } .w-344 { width: 344px !important; } .w-348 { width: 348px !important; } .w-352 { width: 352px !important; } .w-356 { width: 356px !important; } .w-360 { width: 360px !important; } .w-364 { width: 364px !important; } .w-368 { width: 368px !important; } .w-372 { width: 372px !important; } .w-376 { width: 376px !important; } .w-380 { width: 380px !important; } .w-384 { width: 384px !important; } .w-388 { width: 388px !important; } .w-392 { width: 392px !important; } .w-396 { width: 396px !important; } .w-400 { width: 400px !important; } .w-404 { width: 404px !important; } .w-408 { width: 408px !important; } .w-412 { width: 412px !important; } .w-416 { width: 416px !important; } .w-420 { width: 420px !important; } .w-424 { width: 424px !important; } .w-428 { width: 428px !important; } .w-432 { width: 432px !important; } .w-436 { width: 436px !important; } .w-440 { width: 440px !important; } .w-444 { width: 444px !important; } .w-448 { width: 448px !important; } .w-452 { width: 452px !important; } .w-456 { width: 456px !important; } .w-460 { width: 460px !important; } .w-464 { width: 464px !important; } .w-468 { width: 468px !important; } .w-472 { width: 472px !important; } .w-476 { width: 476px !important; } .w-480 { width: 480px !important; } .w-484 { width: 484px !important; } .w-488 { width: 488px !important; } .w-492 { width: 492px !important; } .w-496 { width: 496px !important; } .w-500 { width: 500px !important; } .w-600 { width: 600px !important; } .w-700 { width: 700px !important; } .w-800 { width: 800px !important; } .w-900 { width: 900px !important; } .h-0 { height: 0px !important; } .h-10 { height: 10px !important; } .h-20 { height: 20px !important; } .h-30 { height: 30px !important; } .h-40 { height: 40px !important; } .h-50 { height: 50px !important; } .h-60 { height: 60px !important; } .h-70 { height: 70px !important; } .h-80 { height: 80px !important; } .h-90 { height: 90px !important; } .h-100 { height: 100px !important; } .h-110 { height: 110px !important; } .h-120 { height: 120px !important; } .h-130 { height: 130px !important; } .h-140 { height: 140px !important; } .h-150 { height: 150px !important; } .h-160 { height: 160px !important; } .h-170 { height: 170px !important; } .h-180 { height: 180px !important; } .h-190 { height: 190px !important; } .h-200 { height: 200px !important; } .h-210 { height: 210px !important; } .h-220 { height: 220px !important; } .h-230 { height: 230px !important; } .h-240 { height: 240px !important; } .h-250 { height: 250px !important; } .h-260 { height: 260px !important; } .h-270 { height: 270px !important; } .h-280 { height: 280px !important; } .h-290 { height: 290px !important; } .h-300 { height: 300px !important; } .h-310 { height: 310px !important; } .h-320 { height: 320px !important; } .h-330 { height: 330px !important; } .h-340 { height: 340px !important; } .h-350 { height: 350px !important; } .h-360 { height: 360px !important; } .h-370 { height: 370px !important; } .h-380 { height: 380px !important; } .h-390 { height: 390px !important; } .h-400 { height: 400px !important; } .h-410 { height: 410px !important; } .h-420 { height: 420px !important; } .h-430 { height: 430px !important; } .h-440 { height: 440px !important; } .h-450 { height: 450px !important; } .h-460 { height: 460px !important; } .h-470 { height: 470px !important; } .h-480 { height: 480px !important; } .h-490 { height: 490px !important; } .h-500 { height: 500px !important; } .margin-0 { margin: 0px !important; } .margin-4 { margin: 4px !important; } .margin-8 { margin: 8px !important; } .margin-12 { margin: 12px !important; } .margin-16 { margin: 16px !important; } .margin-20 { margin: 20px !important; } .margin-24 { margin: 24px !important; } .margin-28 { margin: 28px !important; } .margin-32 { margin: 32px !important; } .margin-36 { margin: 36px !important; } .margin-40 { margin: 40px !important; } .margin-44 { margin: 44px !important; } .margin-48 { margin: 48px !important; } .margin-52 { margin: 52px !important; } .margin-56 { margin: 56px !important; } .margin-60 { margin: 60px !important; } .margin-64 { margin: 64px !important; } .mg-l-0 { margin-left: 0px !important; } .mg-l-4 { margin-left: 4px !important; } .mg-l-8 { margin-left: 8px !important; } .mg-l-12 { margin-left: 12px !important; } .mg-l-16 { margin-left: 16px !important; } .mg-l-20 { margin-left: 20px !important; } .mg-l-24 { margin-left: 24px !important; } .mg-l-28 { margin-left: 28px !important; } .mg-l-32 { margin-left: 32px !important; } .mg-l-36 { margin-left: 36px !important; } .mg-l-40 { margin-left: 40px !important; } .mg-l-44 { margin-left: 44px !important; } .mg-l-48 { margin-left: 48px !important; } .mg-l-52 { margin-left: 52px !important; } .mg-l-56 { margin-left: 56px !important; } .mg-l-60 { margin-left: 60px !important; } .mg-l-64 { margin-left: 64px !important; } .mg-t-0 { margin-top: 0px !important; } .mg-t-4 { margin-top: 4px !important; } .mg-t-8 { margin-top: 8px !important; } .mg-t-12 { margin-top: 12px !important; } .mg-t-16 { margin-top: 16px !important; } .mg-t-20 { margin-top: 20px !important; } .mg-t-24 { margin-top: 24px !important; } .mg-t-28 { margin-top: 28px !important; } .mg-t-32 { margin-top: 32px !important; } .mg-t-36 { margin-top: 36px !important; } .mg-t-40 { margin-top: 40px !important; } .mg-t-44 { margin-top: 44px !important; } .mg-t-48 { margin-top: 48px !important; } .mg-t-52 { margin-top: 52px !important; } .mg-t-56 { margin-top: 56px !important; } .mg-t-60 { margin-top: 60px !important; } .mg-t-64 { margin-top: 64px !important; } .mg-r-0 { margin-right: 0px !important; } .mg-r-4 { margin-right: 4px !important; } .mg-r-8 { margin-right: 8px !important; } .mg-r-12 { margin-right: 12px !important; } .mg-r-16 { margin-right: 16px !important; } .mg-r-20 { margin-right: 20px !important; } .mg-r-24 { margin-right: 24px !important; } .mg-r-28 { margin-right: 28px !important; } .mg-r-32 { margin-right: 32px !important; } .mg-r-36 { margin-right: 36px !important; } .mg-r-40 { margin-right: 40px !important; } .mg-r-44 { margin-right: 44px !important; } .mg-r-48 { margin-right: 48px !important; } .mg-r-52 { margin-right: 52px !important; } .mg-r-56 { margin-right: 56px !important; } .mg-r-60 { margin-right: 60px !important; } .mg-r-64 { margin-right: 64px !important; } .mg-b-0 { margin-bottom: 0px !important; } .mg-b-4 { margin-bottom: 4px !important; } .mg-b-8 { margin-bottom: 8px !important; } .mg-b-12 { margin-bottom: 12px !important; } .mg-b-16 { margin-bottom: 16px !important; } .mg-b-20 { margin-bottom: 20px !important; } .mg-b-24 { margin-bottom: 24px !important; } .mg-b-28 { margin-bottom: 28px !important; } .mg-b-32 { margin-bottom: 32px !important; } .mg-b-36 { margin-bottom: 36px !important; } .mg-b-40 { margin-bottom: 40px !important; } .mg-b-44 { margin-bottom: 44px !important; } .mg-b-48 { margin-bottom: 48px !important; } .mg-b-52 { margin-bottom: 52px !important; } .mg-b-56 { margin-bottom: 56px !important; } .mg-b-60 { margin-bottom: 60px !important; } .mg-b-64 { margin-bottom: 64px !important; } .padding-0 { padding: 0px !important; } .padding-4 { padding: 4px !important; } .padding-8 { padding: 8px !important; } .padding-12 { padding: 12px !important; } .padding-16 { padding: 16px !important; } .padding-20 { padding: 20px !important; } .padding-24 { padding: 24px !important; } .padding-28 { padding: 28px !important; } .padding-32 { padding: 32px !important; } .padding-36 { padding: 36px !important; } .padding-40 { padding: 40px !important; } .padding-44 { padding: 44px !important; } .padding-48 { padding: 48px !important; } .padding-52 { padding: 52px !important; } .padding-56 { padding: 56px !important; } .padding-60 { padding: 60px !important; } .padding-64 { padding: 64px !important; } .pd-l-0 { padding-left: 0px !important; } .pd-l-4 { padding-left: 4px !important; } .pd-l-8 { padding-left: 8px !important; } .pd-l-12 { padding-left: 12px !important; } .pd-l-16 { padding-left: 16px !important; } .pd-l-20 { padding-left: 20px !important; } .pd-l-24 { padding-left: 24px !important; } .pd-l-28 { padding-left: 28px !important; } .pd-l-32 { padding-left: 32px !important; } .pd-l-36 { padding-left: 36px !important; } .pd-l-40 { padding-left: 40px !important; } .pd-l-44 { padding-left: 44px !important; } .pd-l-48 { padding-left: 48px !important; } .pd-l-52 { padding-left: 52px !important; } .pd-l-56 { padding-left: 56px !important; } .pd-l-60 { padding-left: 60px !important; } .pd-l-64 { padding-left: 64px !important; } .pd-t-0 { padding-top: 0px !important; } .pd-t-4 { padding-top: 4px !important; } .pd-t-8 { padding-top: 8px !important; } .pd-t-12 { padding-top: 12px !important; } .pd-t-16 { padding-top: 16px !important; } .pd-t-20 { padding-top: 20px !important; } .pd-t-24 { padding-top: 24px !important; } .pd-t-28 { padding-top: 28px !important; } .pd-t-32 { padding-top: 32px !important; } .pd-t-36 { padding-top: 36px !important; } .pd-t-40 { padding-top: 40px !important; } .pd-t-44 { padding-top: 44px !important; } .pd-t-48 { padding-top: 48px !important; } .pd-t-52 { padding-top: 52px !important; } .pd-t-56 { padding-top: 56px !important; } .pd-t-60 { padding-top: 60px !important; } .pd-t-64 { padding-top: 64px !important; } .pd-r-0 { padding-right: 0px !important; } .pd-r-4 { padding-right: 4px !important; } .pd-r-8 { padding-right: 8px !important; } .pd-r-12 { padding-right: 12px !important; } .pd-r-16 { padding-right: 16px !important; } .pd-r-20 { padding-right: 20px !important; } .pd-r-24 { padding-right: 24px !important; } .pd-r-28 { padding-right: 28px !important; } .pd-r-32 { padding-right: 32px !important; } .pd-r-36 { padding-right: 36px !important; } .pd-r-40 { padding-right: 40px !important; } .pd-r-44 { padding-right: 44px !important; } .pd-r-48 { padding-right: 48px !important; } .pd-r-52 { padding-right: 52px !important; } .pd-r-56 { padding-right: 56px !important; } .pd-r-60 { padding-right: 60px !important; } .pd-r-64 { padding-right: 64px !important; } .pd-b-0 { padding-bottom: 0px !important; } .pd-b-4 { padding-bottom: 4px !important; } .pd-b-8 { padding-bottom: 8px !important; } .pd-b-12 { padding-bottom: 12px !important; } .pd-b-16 { padding-bottom: 16px !important; } .pd-b-20 { padding-bottom: 20px !important; } .pd-b-24 { padding-bottom: 24px !important; } .pd-b-28 { padding-bottom: 28px !important; } .pd-b-32 { padding-bottom: 32px !important; } .pd-b-36 { padding-bottom: 36px !important; } .pd-b-40 { padding-bottom: 40px !important; } .pd-b-44 { padding-bottom: 44px !important; } .pd-b-48 { padding-bottom: 48px !important; } .pd-b-52 { padding-bottom: 52px !important; } .pd-b-56 { padding-bottom: 56px !important; } .pd-b-60 { padding-bottom: 60px !important; } .pd-b-64 { padding-bottom: 64px !important; } .rotate-0 { -webkit-transform: rotate(0deg); transform: rotate(0deg); } .rotate-45 { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .rotate-90 { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .rotate-135 { -webkit-transform: rotate(135deg); transform: rotate(135deg); } .rotate-180 { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .rotate-225 { -webkit-transform: rotate(225deg); transform: rotate(225deg); } .rotate-270 { -webkit-transform: rotate(270deg); transform: rotate(270deg); } .rotate-315 { -webkit-transform: rotate(315deg); transform: rotate(315deg); } .rotate-360 { -webkit-transform: rotate(360deg); transform: rotate(360deg); } .text-left { text-align: left !important; } .text-center { text-align: center !important; } .text-right { text-align: right !important; } .flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .flex-row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .flex-col { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .flex-ai { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .flex-jc { -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } /****主轴水平、垂直方向***/ .flex-rowc { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .flex-rowl { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .flex-rowr { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .flex-colc { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .flex-colt { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } .flex-colb { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: end; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; } .flex-between { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .flex-around { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } /**水平方向(一个固定宽度,一个自适应填充)**/ /* 固定宽度 */ .fixedwidth { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; } /* 自适应宽度 */ .autofullwidth { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; } /**垂直方向(一个固定高度,一个自适应填充)**/ /**固定高度*/ .fixedhig { -webkit-box-flex: 0; -webkit-flex: 0; -ms-flex: 0; flex: 0; } /**自动填充剩余区域*/ .autofullhig { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } /** 自身对其方式 **/ .flex-self-start { -webkit-align-self: start; -ms-flex-item-align: start; align-self: start; } .flex-self-end { -webkit-align-self: end; -ms-flex-item-align: end; align-self: end; } .flex-self-center { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; } .hide { display: none !important; } .bg-white { background-color: #fff !important; } .bg-background { background-color: #f5f6f8 !important; } .bg-background-1 { background-color: #f9fafc !important; } .bg-theme-1 { background-color: #0054a7 !important; } .bg-theme-2 { background-color: #009ff7 !important; } .bg-theme-3 { background-color: #000077 !important; } .bg-theme-red { background-color: #e30b20 !important; } .bg-gray-1 { background-color: #223343 !important; } .bg-gray-2 { background-color: #666b75 !important; } .bg-gray-3 { background-color: #aaaab3 !important; } .text-white { color: #fff !important; } .text-background { color: #f5f6f8 !important; } .text-background-1 { color: #f9fafc !important; } .text-theme-1 { color: #0054a7 !important; } .text-theme-2 { color: #009ff7 !important; } .text-theme-3 { color: #000077 !important; } .text-theme-red { color: #e30b20 !important; } .text-gray-1 { color: #223343 !important; } .text-gray-2 { color: #666b75 !important; } .text-gray-3 { color: #aaaab3 !important; } body { position: relative; } .container { width: 100%; overflow: hidden; } .inner { width: 1400px; margin: 0 auto; } .inner-desc { font-size: 18px; line-height: 32px; color: #666b75; } .index { position: relative; min-height: 100vh; } @media screen and (max-width: 1400px) { .inner { width: 1200px; } } /***** location begin *****/ .jz-mask { display: none; position: fixed; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.3); z-index: 999; top: 0; left: 0; } .jz-mask.show { display: block; } .jz-mask_dialog { -webkit-animation: mask_show 0.2s ease-out both; animation: mask_show 0.2s ease-out both; width: 1120px; height: 560px; position: fixed; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } .jz-mask_header { background: #0054a7; width: 100%; height: 80px; color: #ffffff; overflow: hidden; 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: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; padding: 0 20px; color: #ffffff; font-size: 18px; } .jz-mask_close { cursor: pointer; } .jz-mask_close .iconfont { font-size: 18px; } .jz-mask_close.posi { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 24px; height: 24px; -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; position: absolute; right: 8px; top: 8px; } .jz-mask_body { padding: 40px; background: #ffffff; min-height: 400px; border-radius: 4px; } @-webkit-keyframes mask_show { from { top: -100px; } to { top: 0px; } } @keyframes mask_show { from { top: -100px; } to { top: 0px; } } @media screen and (max-width: 1400px) { .jz-mask_dialog { width: 920px; } } .photo-cover img { width: 100%; height: auto; border-radius: 4px; } /***** location end *****/ /* header */ .header { -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; height: 80px; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; position: fixed; z-index: 1000; width: 100%; min-width: 1200px; background: #ffffff; top: 0px; left: 50%; -webkit-transform: translatex(-50%); transform: translatex(-50%); max-width: 2560px; color: #000000; } .header .front { color: #000000; } .header.transparent { background-color: rgba(255, 255, 255, 0); color: #ffffff; } .header.transparent .header-logo { display: none; } .header.transparent .header-logo.white { display: block; } .header.transparent .front { color: #ffffff; } .header.transparent .header-icon { color: #ffffff; } .header.transparent .header-icon a { color: #ffffff; } .header.transparent .header-icon .icon-left { color: #ffffff; } .header .header-logo { display: block; margin-left: 1.5%; margin-top: 18px; float: left; position: absolute; z-index: 9999; } .header .header-logo img { width: 250px; } .header .header-logo.white { display: none; } .header .navbar { width: auto; display: inline-block; position: relative; left: 18%; } .header .navbar:before, .header .navbar:after { content: " "; display: table; } .header .navbar:after { clear: both; } .header .navbar .nav { padding: 26px; padding-bottom: 7px; } .header .navbar .nav:before, .header .navbar .nav:after { content: " "; display: table; } .header .navbar .nav:after { clear: both; } .header .navbar .nav.nav-active .dropdown-menu { display: block; } .header .navbar ul li { list-style: none; float: left; font-size: 16px; font-weight: 600; text-align: center; margin: 0 12px; cursor: pointer; position: relative; display: block; } .header .navbar ul li:hover { transition: all 0.2s linear; -moz-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; } .header .navbar ul li a { text-decoration: none; font-family: myfirstfont; font-size: 18px; font-weight: 600; color: #ffffff; text-align: center; cursor: pointer; padding: 0; position: relative; display: block; } .header .navbar .dropdown-menu { display: none; width: 120px; -webkit-transition: height 0.2s linear; transition: height 0.2s linear; -webkit-animation: a_menu_item_show 0.1s ease-out both; animation: a_menu_item_show 0.1s ease-out both; background-color: rgba(255, 255, 255, 0); border: none; -webkit-box-shadow: none; box-shadow: none; padding-top: 40px; min-width: auto; position: absolute; z-index: 2; } .header .navbar .dropdown-menu li { color: #ffffff; margin: 0; width: 120px; margin-left: -15px; } .header .navbar .dropdown-menu li a { background: rgba(255, 255, 255, 0); padding: 5px; font-size: 14px; font-weight: 400; margin: 0; text-align: center; white-space: normal; color: #ffffff; } .header .navbar .dropdown-menu li a:hover { color: rgba(255, 255, 255, 0.7) !important; } .header-div { min-width: 1200px; width: 100%; height: 0px; background: rgba(0, 0, 0, 0.4); transition: height 0.2s linear; -moz-transition: height 0.2s linear; -webkit-transition: height 0.2s linear; -o-transition: height 0.2s linear; position: fixed; top: 80px; } /* 翻转样式 */ .nav-item { width: 90px; } .nav-item.active .three-d-box .front { color: #0054a7 !important; } .three-d { -webkit-perspective: 200px; perspective: 200px; -webkit-transition: all 0.34s linear; transition: all 0.34s linear; position: relative; height: 26px; width: 100%; } .three-d-box { -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -webkit-transform: translatez(-8px); transform: translatez(-8px); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; pointer-events: none; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 26px; } .front, .back { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; pointer-events: none; -webkit-box-sizing: border-box; box-sizing: border-box; } .front { color: #000000; -webkit-transition: color 0.2s linear; transition: color 0.2s linear; -webkit-transform: rotatex(0deg) translatez(8px); transform: rotatex(0deg) translatez(8px); } .back { -webkit-transform: rotatex(-90deg) translatez(8px); transform: rotatex(-90deg) translatez(8px); color: transparent; } .header .navbar ul li .header .navbar .nav > li > a:hover, .header .navbar .nav > li > a:focus { background-color: rgba(255, 255, 255, 0); } /* ie9 */ @media all and (min-width: 0) { .dropdown-active .three-d-box .front { color: #0054a7 !important; } } /* chrome 和 opera */ @media screen and (-webkit-min-device-pixel-ratio: 0) { .dropdown-active .three-d-box { -webkit-transform: translatez(-8px) rotatex(90deg); transform: translatez(-8px) rotatex(90deg); } .dropdown-active .three-d-box .front { color: transparent !important; } .dropdown-active .three-d-box .back { color: #0054a7 !important; } .three-d:hover .three-d-box { -webkit-transform: translatez(-8px) rotatex(90deg); transform: translatez(-8px) rotatex(90deg); } .three-d:hover .three-d-box .back { color: #0054a7; } .three-d:hover .three-d-box .front { -webkit-transition: color 0.2s linear; transition: color 0.2s linear; color: transparent !important; } } .menu-hook { /* background:#e8a204; */ width: 130px; height: 300px; position: absolute; left: -20px; margin-top: 28px; z-index: 1; visibility: hidden; -webkit-transition: background-color 0.3s linear; transition: background-color 0.3s linear; } .menu-hook::before { content: ""; width: 0%; height: 0%; background: #0054a7; position: absolute; left: 50%; top: 0; -webkit-transition: width 0.3s, left 0.3s; transition: width 0.3s, left 0.3s; } .dropdown-active .menu-hook::before { width: 100%; height: 100%; left: 0; } @-webkit-keyframes a_menu_item_show { from { top: 5px; } to { top: 20px; } } @keyframes a_menu_item_show { from { top: 5px; } to { top: 20px; } } .header-icon { line-height: 80px; font-size: 16px; float: right; text-align: center; z-index: 99999; position: absolute; right: 0px; padding-left: 20px; width: 90px; } .icon-left { float: left; margin-right: 1.5%; color: #000000; } /* 搜索 */ .icon-search { cursor: pointer; margin-right: 15px; } /* 中英文切换 */ .international { cursor: pointer; } .international a { color: #000000; text-decoration: none; } /* 搜索 */ .header-search { visibility: hidden; position: fixed; top: 80px; height: 100px; z-index: 10000; width: 0vw; background: rgba(0, 0, 0, 0.5); color: #ffffff; padding: 0px; -webkit-transition: width 0.5s; transition: width 0.5s; -webkit-box-shadow: 10px 10px 20px 10px rgba(53, 67, 93, 0.5); box-shadow: 10px 10px 20px 10px rgba(53, 67, 93, 0.5); } .header-search span { cursor: pointer; } .header-search input { width: 30vw; height: 50px; position: absolute; top: 50%; left: 35%; margin-top: -25px; padding: 0 12px; font-size: 14px; } .header-search .search-btn { background: #0054a7; padding: 8px 20px; font-size: 25px; margin-left: 15px; border-radius: 3px; position: absolute; margin-top: -25px; top: 50%; left: 65%; height: 50px; 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; } .header-search-close { cursor: pointer; position: absolute; right: 100px; top: 50%; -webkit-transform: translatey(-50%); transform: translatey(-50%); width: 50px; height: 50px; 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; } @media screen and (min-width: 1800px) { .menu-hook { width: 140px; left: -25px; } .header .navbar ul li { margin: 0 20px; } .header-logo img { width: 270px; } } @media screen and (max-width: 1500px) { body { overflow-x: hidden; } } @media screen and (max-width: 1450px) { .header .menu-hook { width: 120px; left: -15px; } .header .navbar ul li { margin: 0 5px; } .header .header-logo img { width: 210px; } } /* 整体布局响应式小于1400px */ @media screen and (max-width: 1400px) { .header .header-logo img { width: 200px; } } @media screen and (max-width: 1300px) { .header .navbar ul li { margin: 0; } .header .navbar ul li a { font-size: 16px; } .header .menu-hook { left: -5px; width: 100px; } .header .header-logo img { width: 190px; } } @media screen and (max-width: 1200px) { body { overflow-x: auto; } .header { position: absolute; } } /***** header end *****/ /***** footer begin *****/ .footer { background: #f9fafc; min-width: 1200px; } .footer .footer-container { width: 1400px; margin: 0 auto; padding: 48px 0; position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .footer .footer-container .footer-left { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .footer .footer-container .footer-right { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .footer .footer-container .info-row { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; font-size: 16px; line-height: 40px; color: #777c86; } .footer .footer-container .info-row .menu-list { color: #223343; font-weight: 600; margin-right: 20px; } .footer .footer-container .info-row .menu-list a { color: #223343; } .footer .footer-container .info-row .line { margin: 0 12px; } .footer .footer-container .info-row .link-item { margin-right: 16px; 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; } .footer .footer-container .code-item { position: relative; margin-left: 20px; } .footer .footer-container .code-item:first-child { margin-left: 0; } .footer .footer-container .code-item:hover .code-pop { display: block; } .footer .footer-container .code-item .code-pop { display: none; position: absolute; top: -20px; left: 50%; -webkit-transform: translate(-50%, -100%); transform: translate(-50%, -100%); width: 120px; height: 120px; padding: 12px; background-color: #ffffff; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); } .footer .footer-container .code-item .code-pop img { width: 100%; height: 100%; } .footer .footer-container .code-item .code-pop::after { display: block; content: ""; position: absolute; bottom: -20px; left: 50%; -webkit-transform: translatex(-50%); transform: translatex(-50%); width: 0; height: 0; border-width: 10px; border-style: solid; border-color: #ffffff transparent transparent transparent; } .footer .footer-container .code-item .code-info { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .footer .footer-container .code-item .code-info_icon { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; width: 60px; height: 60px; border-radius: 100%; background-color: #47db8a; color: #ffffff; } .footer .footer-container .code-item .code-info_icon .iconfont { font-size: 40px; } .footer .footer-container .code-item .code-info_icon.blue { background-color: #55b0f2; } .footer .footer-container .code-item .code-info_label { color: #777c86; font-size: 14px; margin-top: 12px; } .footer .dropdown-select { color: #666b75; height: 40px; border-radius: 3px; font-size: 16px; background-color: rgb(249, 250, 252); border: 1px solid rgb(200, 200, 200); position: relative; z-index: 1; } .footer .dropdown-select:hover { color: #333; background-color: #e6e6e6; border-color: #adadad; } .footer .dropdown-select .dropdown-toggle { color: #666b75; padding: 4px 12px; font-size: 16px; background-color: transparent; cursor: pointer; } .footer .dropdown-select .dropdown-menu { display: none; position: absolute; top: -20px; left: 50%; -webkit-transform: translate(-50%, -100%); transform: translate(-50%, -100%); width: 200px; padding: 8px 0; background-color: #ffffff; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); } .footer .dropdown-select .dropdown-menu li > a { display: block; padding: 4px 12px; clear: both; font-weight: normal; line-height: 1.42857143; color: #262626; white-space: nowrap; } .footer .dropdown-select .dropdown-menu li > a:hover { color: #262626; text-decoration: none; background-color: #f5f5f5; } .footer .dropdown-select .dropdown-menu.show { display: block; } .footer .dropdown-select .dropdown-menu::after { display: block; content: ""; position: absolute; bottom: -20px; left: 50%; -webkit-transform: translatex(-50%); transform: translatex(-50%); width: 0; height: 0; border-width: 10px; border-style: solid; border-color: #ffffff transparent transparent transparent; } /***** footer end *****/ /***** swiper begin *****/ .swiper-container { width: 100%; height: 35vw; max-height: 700px; position: relative; } .swiper-container .swiper-slide { background: #000000; background-position: center; background-size: 100% auto; } .swiper-container .banner-item { width: 1200px; height: 456px; margin: 0 auto; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .swiper-container .banner-item .title-info { color: #ffffff; text-align: center; font-size: 40px; font-weight: 500; line-height: 56px; } .swiper-container .banner-item .subtitle-info { color: #ffffff; font-size: 20px; line-height: 28px; text-align: center; } .swiper-container .banner-item .detail-btn { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-align: center; padding: 12px 32px; font-size: 16px; line-height: 24px; color: #ffffff; cursor: pointer; border-radius: 40px; border: 1px solid #ffffff; } .swiper-home-pagination { text-align: center; -webkit-transition: 300ms; transition: 300ms; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); position: relative; z-index: 10; margin-top: -32px; } .swiper-home-pagination .swiper-pagination-bullet { background-color: rgba(255, 255, 255, 0.4); opacity: 1; width: 64px; height: 4px; border-radius: 2px; margin: 0 8px !important; } .swiper-home-pagination .swiper-pagination-bullet-active { opacity: 1; background: #ffffff; } .swiper-module-pagination { text-align: right; position: absolute; z-index: 10; bottom: 0px !important; 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: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; height: 52px; padding: 0 16px; } .swiper-module-pagination .swiper-pagination-bullet { -webkit-transition: all 0.3s; transition: all 0.3s; background-color: #ffffff; opacity: 1; width: 8px; height: 8px; border-radius: 8px; margin: 0 8px !important; } .swiper-module-pagination .swiper-pagination-bullet-active { width: 12px; height: 12px; border-radius: 12px; opacity: 1; background: #0070de; } /***** swiper end *****/ /***** 通用列表样式 begin *****/ .jz-list { margin: 0 auto; min-height: 300px; } .jz-list .notice-item { 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; height: 80px; width: 100%; font-size: 18px; line-height: 28px; color: #666b75; padding: 28px 32px; margin-bottom: 28px; position: relative; overflow: hidden; border: 1px solid #e8e8e8; border-radius: 2px; cursor: pointer; } .jz-list .notice-item:hover { -webkit-box-shadow: 0 8px 24px 0 rgba(187, 191, 196, 0.2); box-shadow: 0 8px 24px 0 rgba(187, 191, 196, 0.2); color: #337ab7; } .jz-list .notice-item:hover::before { background-color: rgb(0, 84, 167); } .jz-list .notice-item::before { content: ""; width: 10px; height: 10px; background-color: rgb(153, 153, 153); margin-right: 18px; } .jz-list .notice-item .name { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 18px; } .jz-list .search-item { display: block; cursor: pointer; width: 100%; border-radius: 5px; height: 230px; border: 1px solid rgb(232, 232, 232); margin-bottom: 20px; -webkit-transition: -webkit-box-shadow 0.3s; transition: -webkit-box-shadow 0.3s; transition: box-shadow 0.3s; transition: box-shadow 0.3s, -webkit-box-shadow 0.3s; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; padding: 32px; } .jz-list .search-item:hover { -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2); } .jz-list .search-item_cover { width: 300px; height: 100%; overflow: hidden; } .jz-list .search-item_cover img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .jz-list .search-item_info { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; margin-left: 32px; overflow: hidden; } .jz-list .search-item_info .title { display: block; width: 100%; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #223343; font-size: 18px; margin-bottom: 16px; } .jz-list .search-item_info .time { color: #cccccc; font-size: 16px; line-height: 16px; margin-bottom: 28px; } .jz-list .search-item_info .desc { width: 100%; color: #777c86; font-size: 16px; line-height: 28px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; } .jz-list .search-item_info i { color: #e30b20; } /***** 通用列表样式 end *****/ /***** 通用网格列表样式 begin *****/ .jz-grid { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .jz-grid .grid-item { width: 22.9%; margin-bottom: 28px; margin-right: 2.8%; position: relative; -webkit-transition: -webkit-box-shadow 0.4s linear; transition: -webkit-box-shadow 0.4s linear; transition: box-shadow 0.4s linear; transition: box-shadow 0.4s linear, -webkit-box-shadow 0.4s linear; border-bottom: 1px solid #e8e8e8; -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); } .jz-grid .grid-item:nth-child(4n) { margin-right: 0px; } .jz-grid .grid-item_img { width: 100%; height: 220px; overflow: hidden; } .jz-grid .grid-item_img img { width: 100%; height: 100%; } .jz-grid .grid-item_name { font-size: 18px; color: #666b75; padding: 12px; } .jz-grid .news-item { cursor: pointer; float: left; width: 440px; margin-right: 40px; margin-bottom: 30px; position: relative; -webkit-transition: -webkit-box-shadow 0.4s linear; transition: -webkit-box-shadow 0.4s linear; transition: box-shadow 0.4s linear; transition: box-shadow 0.4s linear, -webkit-box-shadow 0.4s linear; border-bottom: 1px solid #e8e8e8; border-radius: 3px; } .jz-grid .news-item:hover { -webkit-box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2); } .jz-grid .news-item:nth-child(3n) { margin-right: 0px; } .jz-grid .news-item_cover { border-radius: 3px; height: 300px; width: 100%; overflow: hidden; } .jz-grid .news-item_cover img { width: 100%; height: 100%; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .jz-grid .news-item_cover img:hover { -webkit-transform: scale(1.1); transform: scale(1.1); } .jz-grid .news-item_info { padding: 20px; } .jz-grid .news-item_info .time { font-size: 16px; color: #999999; } .jz-grid .news-item_info .name { color: #333333; font-size: 18px; font-weight: 600; margin-top: 12px; line-height: 24px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } @media screen and (max-width: 1400px) { .jz-grid .news-item { width: 380px; margin-right: 30px; } .jz-grid .news-item_cover { height: 260px; } } /***** 通用网格列表样式 end *****/ .pagination { width: 100%; max-width: 1400px; margin: 0 auto; font-size: 14px; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .pagination label { vertical-align: middle; } .pagination > .pagination-btns { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .pagination > .pagination-btns > a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; z-index: 1; position: relative; width: 32px; height: 32px; color: #0054a7; background-color: #fff; border: 1px solid rgba(0, 84, 167, 0.8); text-align: center; cursor: pointer; margin: 0 4px; font-size: 14px; } .pagination > .pagination-btns > a::before, .pagination > .pagination-btns > a::after { content: ""; height: 0; } .pagination > .pagination-btns > a:first-child { margin-left: 0; } .pagination > .pagination-btns > a.first, .pagination > .pagination-btns > a.prev, .pagination > .pagination-btns > a.next, .pagination > .pagination-btns > a.last { font-size: 20px; line-height: 22px; } .pagination > .pagination-btns > a:hover { background-color: rgba(0, 84, 167, 0.1); } .pagination > .pagination-btns > a.activated { z-index: 2; color: #fff; background-color: #0054a7; border-color: #0054a7; } .pagination > .pagination-btns > a.activated:hover { opacity: 0.8; } .pagination > .pagination-btns > a.disabled { z-index: 1; cursor: not-allowed; color: #d9d9d9; background-color: #fff; border-color: #d9d9d9; filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: progid:dximagetransform.microsoft.basicimage(grayscale=1); -webkit-filter: grayscale(1); } .pagination > .pagination-goto, .pagination > .pagination-info { float: left; display: block; color: #666b75; padding: 4px 12px; background-color: transparent; } .pagination > .pagination-goto > input { margin: 0 3px; padding: 2px; width: 32px; height: 14px; color: #7f7f7f; border: 1px solid #d9d9d9; text-align: center; border-radius: 1px; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .pagination > .pagination-goto > input:focus { color: #06f; background-color: #f4f9ff; border-color: #06f; } .pagination_red > .pagination-btns > a:hover { background-color: rgba(230, 0, 19, 0.1); } .pagination_red > .pagination-btns > a.activated { background-color: #e60013; border-color: #e60013; } .pagination_red > .pagination-btns > a { color: #e60013; border: 1px solid #e60013; } @media screen and (max-width: 1400px) { .pagination { max-width: 1200px; } } /***** location begin *****/ .location-container { width: 100%; background: #f5f6f8; overflow: hidden; } .location-container .location-inner { height: 68px; font-size: 14px; color: #777c86; width: 1400px; margin: auto; border-bottom: 1px solid #e5e5e5; 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; } .location-container .location-item { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-right: 8px; color: #aaaab3; font-weight: 500; font-size: 14px; line-height: 20px; cursor: pointer; } .location-container .location-item.active { color: #0054a7; } .location-container .location-item::before { font-family: "iconfont" !important; font-size: 16px; font-style: normal; content: "\e615"; margin-right: 8px; } .location-container .location-item:first-child::before { content: "\e674"; } @media screen and (max-width: 1400px) { .location-container .location-inner { width: 1200px; } } /***** location end *****/ /***** tabs begin *****/ .jz-tabs { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .jz-tabs .tab-item { height: 60px; text-align: center; line-height: 60px; border: 1px solid rgb(232, 232, 232); border-radius: 3px; width: 150px; margin-right: 25px; font-size: 18px; color: #223343; cursor: pointer; } .jz-tabs .tab-item:last-child { margin-right: 0px; } .jz-tabs .tab-item.active { color: #ffffff; background: #0054a7; } /***** tabs end *****/ /***** 二级页面样式 begin *****/ .sub-banner { position: relative; width: 100%; min-width: 1200px; height: 400px; max-width: 2560px; } .sub-banner img { position: absolute; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .sub-banner .sub-banner_title { position: absolute; top: 30%; left: 150px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .sub-banner .sub-banner_title .title-name { font-weight: bold; font-size: 48px; color: #136ebc; line-height: 70px; } .sub-banner .sub-banner_title .title-desc { font-weight: bold; font-size: 36px; color: #136ebc; line-height: 70px; } .sub-banner .sub-banner_title .title-en { font-size: 20px; color: #4ea0db; } .menu-tab { background: #f5f6f8; min-width: 1200px; max-width: 2560px; position: relative; } .menu-tab .tab-list { width: 1400px; margin: 0 auto; } .menu-tab .tab-list:before, .menu-tab .tab-list:after { content: " "; display: table; } .menu-tab .tab-list:after { clear: both; } .menu-tab .tab-list .tab-item { display: block; color: #000000; height: 70px; padding: 22px 34px; font-size: 18px; float: left; background: #f5f6f8; cursor: pointer; } .menu-tab .tab-list .tab-item.active { background: #0054a7; color: #ffffff; } @media screen and (max-width: 1400px) { .menu-tab .tab-list { width: 1200px; } } /***** 二级页面样式 end *****/ /***** 网格布局相册 begin *****/ .grid-photo { width: 1400px; } .grid-photo_cover { width: 100%; border-radius: 20px; overflow: hidden; } .grid-photo_cover img { width: 100%; height: auto; } .grid-photo_card { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-row-gap: 20px; grid-column-gap: 20px; } .grid-photo_card .item { border-radius: 20px; overflow: hidden; } .grid-photo_card .item img { width: 100%; height: auto; } .grid-photo_card .item.item-1 { grid-column: 3/3; grid-row: 1/3; } @media screen and (max-width: 1400px) { .grid-photo { width: 1200px; } } /***** 网格布局相册 end *****/ /***** 详情 begin *****/ .detail-header { background-color: #f5f6f8; width: 100%; padding: 20px; } .detail-header_inner { width: 1400px; margin: auto; } .detail-header_inner .title { font-size: 36px; line-height: 44px; color: #223343; font-weight: 600; } .detail-header_inner .tags { 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; margin-top: 20px; } .detail-header_inner .tags_item { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; font-size: 16px; color: #777c86; margin-right: 24px; } .detail-header_inner .tags_item .iconfont { font-size: 18px; margin-right: 8px; } .detail-content { width: 1200px; padding: 20px 0; margin: auto; min-height: 300px; } .back-btn { position: relative; z-index: 1; display: block; -webkit-box-sizing: border-box; box-sizing: border-box; width: 170px; height: 50px; border: 1px solid rgb(204, 204, 204); line-height: 48px; text-align: center; font-size: 18px; cursor: pointer; color: #666666; -webkit-transition: all 0.3s; transition: all 0.3s; } .back-btn::before { position: absolute; z-index: -1; width: 0; height: 50px; top: 0px; left: 0px; background: #0054a7; content: ""; -webkit-transition: all 0.3s; transition: all 0.3s; } .back-btn:hover { color: #ffffff; } .back-btn:hover::before { width: 170px; } @media screen and (max-width: 1400px) { .detail-header_inner { width: 1200px; } } /***** 详情 end *****/ /***** search end *****/ .content-search { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 1400px; margin: auto; margin-bottom: 20px; } .content-search .form-control { display: block; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; height: 50px; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: #555; background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s; transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s; transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s; } .content-search .search-btn { background: #0054a7; text-align: center; line-height: 50px; font-size: 25px; color: #ffffff; border-radius: 3px; display: block; height: 50px; float: right; width: 100px; margin-left: 12px; } /***** search end *****/ /***** 通用列表样式 begin *****/ .jz-list { margin: 0 auto; min-height: 300px; } .jz-list .notice-item { 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; height: 80px; width: 100%; font-size: 18px; line-height: 28px; color: #666b75; padding: 28px 32px; margin-bottom: 28px; position: relative; overflow: hidden; border: 1px solid #e8e8e8; border-radius: 2px; cursor: pointer; } .jz-list .notice-item:hover { -webkit-box-shadow: 0 8px 24px 0 rgba(187, 191, 196, 0.2); box-shadow: 0 8px 24px 0 rgba(187, 191, 196, 0.2); color: #337ab7; } .jz-list .notice-item:hover::before { background-color: rgb(0, 84, 167); } .jz-list .notice-item::before { content: ""; width: 10px; height: 10px; background-color: rgb(153, 153, 153); margin-right: 18px; } .jz-list .notice-item .name { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 18px; } .jz-list .search-item { display: block; cursor: pointer; width: 100%; border-radius: 5px; height: 230px; border: 1px solid rgb(232, 232, 232); margin-bottom: 20px; -webkit-transition: -webkit-box-shadow 0.3s; transition: -webkit-box-shadow 0.3s; transition: box-shadow 0.3s; transition: box-shadow 0.3s, -webkit-box-shadow 0.3s; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; padding: 32px; } .jz-list .search-item:hover { -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2); } .jz-list .search-item_cover { width: 300px; height: 100%; overflow: hidden; } .jz-list .search-item_cover img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .jz-list .search-item_info { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; margin-left: 32px; overflow: hidden; } .jz-list .search-item_info .title { display: block; width: 100%; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #223343; font-size: 18px; margin-bottom: 16px; } .jz-list .search-item_info .time { color: #cccccc; font-size: 16px; line-height: 16px; margin-bottom: 28px; } .jz-list .search-item_info .desc { width: 100%; color: #777c86; font-size: 16px; line-height: 28px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; } .jz-list .search-item_info i { color: #e30b20; } /***** 通用列表样式 end *****/ /***** 通用网格列表样式 begin *****/ .jz-grid { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .jz-grid .grid-item { width: 22.9%; margin-bottom: 28px; margin-right: 2.8%; position: relative; -webkit-transition: -webkit-box-shadow 0.4s linear; transition: -webkit-box-shadow 0.4s linear; transition: box-shadow 0.4s linear; transition: box-shadow 0.4s linear, -webkit-box-shadow 0.4s linear; border-bottom: 1px solid #e8e8e8; -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); } .jz-grid .grid-item:nth-child(4n) { margin-right: 0px; } .jz-grid .grid-item_img { width: 100%; height: 220px; overflow: hidden; } .jz-grid .grid-item_img img { width: 100%; height: 100%; } .jz-grid .grid-item_name { font-size: 18px; color: #666b75; padding: 12px; } .jz-grid .news-item { cursor: pointer; float: left; width: 440px; margin-right: 40px; margin-bottom: 30px; position: relative; -webkit-transition: -webkit-box-shadow 0.4s linear; transition: -webkit-box-shadow 0.4s linear; transition: box-shadow 0.4s linear; transition: box-shadow 0.4s linear, -webkit-box-shadow 0.4s linear; border-bottom: 1px solid #e8e8e8; border-radius: 3px; } .jz-grid .news-item:hover { -webkit-box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2); } .jz-grid .news-item:nth-child(3n) { margin-right: 0px; } .jz-grid .news-item_cover { border-radius: 3px; height: 300px; width: 100%; overflow: hidden; } .jz-grid .news-item_cover img { width: 100%; height: 100%; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .jz-grid .news-item_cover img:hover { -webkit-transform: scale(1.1); transform: scale(1.1); } .jz-grid .news-item_info { padding: 20px; } .jz-grid .news-item_info .time { font-size: 16px; color: #999999; } .jz-grid .news-item_info .name { color: #333333; font-size: 18px; font-weight: 600; margin-top: 12px; line-height: 24px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } @media screen and (max-width: 1400px) { .jz-grid .news-item { width: 380px; margin-right: 30px; } .jz-grid .news-item_cover { height: 260px; } } /***** 通用网格列表样式 end *****/ /***** 产业领域 begin *****/ .cyly-content { min-width: 1200px; width: 100%; height: 930px; position: relative; margin-top: 80px; padding-bottom: 100px; } .cyly-content .bg-img { position: absolute; width: 100%; height: 100%; top: 0; z-index: -1; left: 0; } .cyly-content .con-header { width: 1400px; margin: 0 auto; padding-top: 70px; font-size: 16px; color: #ffffff; line-height: 30px; } .cyly-content .con-body { height: 60%; position: relative; margin: 42px 4%; min-width: 1200px; } .cyly-content .con-body:before, .cyly-content .con-body:after { content: " "; display: table; } .cyly-content .con-body:after { clear: both; } .cyly-content .con-item { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; width: 18%; height: 545px; float: left; margin-right: 2.5%; -webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1); box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1); cursor: pointer; } .cyly-content .con-item:hover .con-item_cover img { -webkit-transform: scale(1); transform: scale(1); } .cyly-content .con-item:nth-child(5n) { margin-right: 0; } .cyly-content .con-item_title { width: 100%; height: 80px; color: #223343; font-size: 20px; background: #ffffff; text-align: center; line-height: 80px; opacity: 0.9; border-top: 5px solid #0054a7; } .cyly-content .con-item_title.sec { border-top: 5px solid #0080ff; } .cyly-content .con-item_title.thr { border-top: 5px solid #00bdff; } .cyly-content .con-item_cover { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; width: 100%; overflow: hidden; } .cyly-content .con-item_cover img { -webkit-transform: scale(1.1); transform: scale(1.1); width: 100%; height: 100%; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; -o-object-fit: cover; object-fit: cover; } @media screen and (max-width: 1600px) { .cyly-content .con-item { height: 510px; } } @media screen and (max-width: 1500px) { .cyly-content .con-item { height: 480px; } } @media screen and (max-width: 1400px) { .cyly-content { height: 850px; } .cyly-content .con-header { width: 1200px; } .cyly-content .con-item { height: 450px; } } @media screen and (max-width: 1300px) { .cyly-content .con-item { height: 410px; } } /***** 产业领域 end *****/ /***** 产业领域-详情 begin *****/ .cyly-desc { font-size: 16px; color: #666666; line-height: 30px; } .cyly-desc p { margin: 0 0 10px; } .cyly-section-title { font-size: 24px; color: #223343; border-bottom: 5px solid #0054a7; width: 100px; margin-bottom: 40px; padding-bottom: 6px; margin-top: 20px; } .cyly-grid-list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .cyly-grid-list .company-item { width: 210px; height: 300px; cursor: pointer; margin-right: 87px; } .cyly-grid-list .company-item:nth-child(5n) { margin-right: 0px; } .cyly-grid-list .company-item_cover { width: 210px; height: 210px; overflow: auto; border-radius: 100%; position: relative; overflow: hidden; } .cyly-grid-list .company-item_cover img { height: 100%; position: absolute; left: 50%; top: 0; -webkit-transform: translatex(-50%); transform: translatex(-50%); } .cyly-grid-list .company-item_cover:hover::before { -webkit-transition: all 0.3s; transition: all 0.3s; content: ""; display: block; width: 100%; height: 100%; position: absolute; z-index: 1; left: 0; top: 0; background-color: rgba(0, 0, 0, 0.3); } .cyly-grid-list .company-item_name { margin-top: 15px; text-align: center; font-size: 18px; color: #223343; } @media screen and (max-width: 1400px) { .cyly-grid-list .company-item { margin-right: 87px; } } .cyly-introduce { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .cyly-introduce_text { height: 350px; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; padding: 0 72px; 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; text-align: left; background-color: #f9fafc; line-height: 30px; color: #666666; font-size: 16px; } .cyly-introduce_text.odd { background-color: #f2f4f8; } .cyly-introduce_img { cursor: default; width: 628px; height: 350px; float: left; overflow: hidden; } .cyly-introduce_img img { -webkit-transform: scale(1.1); transform: scale(1.1); width: 100%; -webkit-transition: -webkit-transform 0.2s linear; transition: -webkit-transform 0.2s linear; transition: transform 0.2s linear; transition: transform 0.2s linear, -webkit-transform 0.2s linear; height: 100%; } .cyly-introduce_img:hover img { -webkit-transform: scale(1); transform: scale(1); } @media screen and (max-width: 1400px) { .cyly-introduce_text { padding: 0 38px; } .cyly-introduce_img { width: 528px; } } .company-dialog { color: #223343; } .company-dialog .info-header { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .company-dialog .info-header .info { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; margin-left: 30px; } .company-dialog .company-cover { width: 350px; height: 230px; } .company-dialog .company-cover img { width: 100%; height: 100%; } .company-dialog .copybtn { width: 30px; height: 30px; line-height: 30px; border-radius: 100%; background-color: #0054a7; color: #ffffff; margin-left: 8px; 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; text-align: center; font-size: 18px; cursor: pointer; } /***** 产业领域-详情 begin *****/ /***** 科技创新 begin *****/ .kjcx-section-title { height: 50px; font-size: 42px; color: #223343; text-align: center; margin-top: 40px; } .kjcx-section-desc { font-size: 16px; line-height: 30px; color: #666666; margin-bottom: 40px; margin-top: 36px; } .kjcx-section-con { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; margin-top: 30px; margin-bottom: 50px; } .kjcx-section-con .con-img { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; position: relative; height: 434px; } .kjcx-section-con .con-img img { display: block; width: 100%; height: 434px; -o-object-fit: cover; object-fit: cover; } .kjcx-section-con .con-text { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; position: relative; height: 434px; background: #f5f6f8; color: #666b75; font-size: 16px; line-height: 30px; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0px 60px; 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; } .kjcx-grid-list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .kjcx-grid-list.center { -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .kjcx-grid-list .plat-item { width: 685px; height: 470px; margin-right: 30px; margin-bottom: 40px; overflow: hidden; } .kjcx-grid-list .plat-item:nth-child(2n) { margin-right: 0px; } .kjcx-grid-list .plat-item_img { width: 100%; height: 400px; overflow: hidden; } .kjcx-grid-list .plat-item_img img { display: block; width: 100%; height: 400px; -o-object-fit: cover; object-fit: cover; } .kjcx-grid-list .plat-item_name { text-align: center; height: 70px; overflow: hidden; line-height: 70px; background: #f9fafc; font-size: 18px; color: #223343; } .kjcx-grid-list .strength-item { width: 200px; margin-right: 100px; margin-bottom: 20px; overflow: hidden; } .kjcx-grid-list .strength-item:last-child { margin-right: 0px; } .kjcx-grid-list .strength-item:nth-child(5n) { margin-right: 0px; } .kjcx-grid-list .strength-item_img { width: 100%; height: 200px; border-radius: 100%; overflow: hidden; } .kjcx-grid-list .strength-item_img img { display: block; width: 100%; height: 200px; -o-object-fit: cover; object-fit: cover; } .kjcx-grid-list .strength-item_num { width: 200px; text-align: center; margin-top: 24px; font-size: 30px; color: #223343; } .kjcx-grid-list .strength-item_desc { text-align: center; margin-top: 5px; font-size: 16px; color: #223343; } .kjcx-grid-list .achieve-item { width: 300px; height: 140px; margin-right: 50px; margin-bottom: 10px; overflow: hidden; 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; color: #223343; } .kjcx-grid-list .achieve-item:last-child { margin-right: 0px; } .kjcx-grid-list .achieve-item:nth-child(4n) { margin-right: 0px; } .kjcx-grid-list .achieve-item:hover .achieve-item_icon { color: #0054a6; } .kjcx-grid-list .achieve-item_icon { font-size: 50px; margin-right: 12px; } .kjcx-grid-list .achieve-item_info { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .kjcx-grid-list .achieve-item_info .num { font-size: 30px; } .kjcx-grid-list .achieve-item_info .name { font-size: 16px; margin-top: 4px; } .kjcx-grid-list .figures-item { width: 230px; height: 450px; margin-right: 4px; margin-bottom: 20px; overflow: hidden; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; color: #223343; cursor: pointer; } .kjcx-grid-list .figures-item:last-child { margin-right: 0px; } .kjcx-grid-list .figures-item:nth-child(6n) { margin-right: 0px; } .kjcx-grid-list .figures-item_img { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; width: 100%; overflow: hidden; } .kjcx-grid-list .figures-item_img img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .kjcx-grid-list .figures-item_name { font-size: 20px; color: #223343; text-align: center; height: 70px; line-height: 70px; background: #f5f6f8; width: 100%; } .kjcx-grid-list .figures-item_name .border { border: 1px solid #223343; } @media screen and (max-width: 1400px) { .kjcx-grid-list .plat-item { width: 585px; } .kjcx-grid-list .strength-item { margin-right: 50px; } .kjcx-grid-list .achieve-item { width: 265px; } .kjcx-grid-list .figures-item { height: 390px; width: 196px; } } .kjcx-dialog { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .kjcx-dialog_cover { width: 210px; } .kjcx-dialog_cover img { width: 100%; } .kjcx-dialog_info { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; margin-left: 40px; } .kjcx-dialog_info .name { margin-top: 50px; color: #223343; font-size: 36px; } .kjcx-dialog_info .desc { margin-top: 30px; font-size: 18px; color: #666b75; line-height: 30px; } /***** 科技创新 end *****/ /***** 九洲概况 begin *****/ .jzgk-title { color: #223343; font-size: 38px; font-weight: bold; margin-bottom: 20px; } .jzgk-desc { color: #666b75; line-height: 30px; font-size: 16px; line-height: 30px; } .jzgk-section-title { position: relative; height: 170px; } .jzgk-section-title .name { color: #223343; font-size: 34px; font-weight: bold; position: absolute; z-index: 1; top: 85px; left: 12px; } .jzgk-section-title .number { position: absolute; top: 0; color: #eef0f2; font-size: 150px; z-index: 0; line-height: 1; } .jzgk-section-con { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .jzgk-section-con .con-cover { width: 810px; height: 550px; position: relative; } .jzgk-section-con .con-cover img { width: 1065px; height: 550px; position: absolute; border-radius: 10px; left: -260px; -o-object-fit: cover; object-fit: cover; } .jzgk-section-con .con-cover-1 { width: 720px; height: auto; max-height: 580px; display: block; border-radius: 10px; -o-object-fit: cover; object-fit: cover; } .jzgk-section-con .con-cover-2 { width: 840px; height: 530px; display: block; border-radius: 10px; -o-object-fit: cover; object-fit: cover; } .jzgk-section-con .con-cover-3 { width: 810px; height: 550px; position: relative; } .jzgk-section-con .con-cover-3 img { width: 1065px; height: 550px; position: absolute; border-radius: 10px; right: -260px; -o-object-fit: cover; object-fit: cover; } .jzgk-section-con .con-info { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; } .jzgk-section-con .con-info_desc { color: #666b75; font-size: 16px; line-height: 2em; } .jzgk-section-con .space-left { padding-left: 60px; } .jzgk-section-con .space-right { padding-right: 60px; } .jzgk-grid { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .jzgk-grid .grid-item { width: 400px; height: 150px; margin-right: 100px; margin-bottom: 20px; overflow: hidden; 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; color: #223343; } .jzgk-grid .grid-item:last-child { margin-right: 0px; } .jzgk-grid .grid-item:nth-child(3n) { margin-right: 0px; } .jzgk-grid .grid-item_icon { width: 60px; height: 60px; margin-right: 40px; } .jzgk-grid .grid-item_info { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .jzgk-grid .grid-item_info .num { font-size: 48px; line-height: 48px; margin-bottom: 10px; } .jzgk-grid .grid-item_info .name { font-size: 16px; } @media screen and (max-width: 1400px) { .jzgk-section-con .con-cover { width: 660px; } .jzgk-section-con .con-cover img { width: 920px; height: 480px; } .jzgk-section-con .con-cover-1 { width: 650px; max-height: 540px; } .jzgk-section-con .con-cover-2 { width: 730px; height: 460px; } .jzgk-section-con .con-cover-3 { width: 660px; } .jzgk-section-con .con-cover-3 img { width: 920px; height: 480px; } .jzgk-section-con .space-left { padding-left: 30px; } .jzgk-section-con .space-right { padding-right: 30px; } .jzgk-grid .grid-item { width: 380px; height: 150px; margin-right: 30px; } } /***** 产业领域 end *****/ /***** 关于我们-发展战略 begin *****/ .fzzl-title { height: 50px; font-size: 42px; color: #666b75; text-align: center; margin-top: 40px; } .fzzl-desc { font-size: 16px; color: #666b75; line-height: 30px; margin-top: 30px; } .fzzl-section-con { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .fzzl-section-con .con-cover { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .fzzl-section-con .con-cover img { display: block; max-height: 400px; -o-object-fit: cover; object-fit: cover; } .fzzl-section-con .con-info { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; padding: 0px 40px; font-size: 16px; color: #666b75; line-height: 1.5; } .fzzl-section-con .con-info .li-row { margin: 8px 0; font-size: 16px; color: #666b75; position: relative; line-height: 28px; padding-left: 28px; } .fzzl-section-con .con-info .li-row::after { content: " "; position: absolute; left: -14px; top: 11px; width: 7px; height: 7px; background-color: #000; border-radius: 50%; } .fzzl-section-con .con-info .info-grid { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .fzzl-section-con .con-info .info-grid .info-item { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; margin-right: 20px; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .fzzl-section-con .con-info .info-grid .info-item .iconfont { color: #009ae4; font-size: 48px; margin-right: 8px; } .fzzl-section-con .con-info .info-grid .info-item .info { font-size: 16px; color: #666666; } .fzzl-section-con .con-info .info-grid .info-item .num { font-size: 18px; color: #009ae4; } .fzzl-grid { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .fzzl-grid .grid-item { width: 440px; height: 270px; position: relative; margin-right: 40px; margin-bottom: 30px; overflow: hidden; } .fzzl-grid .grid-item:last-child { margin-right: 0; } .fzzl-grid .grid-item:nth-child(3n) { margin-right: 0px; } .fzzl-grid .grid-item:hover .mask { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); /* 设置模糊程度 */ background-color: rgba(196, 196, 196, 0.3); /* 添加透明度作为背景色 */ } .fzzl-grid .grid-item:hover .grid-item_info .desc { height: 28px; } .fzzl-grid .grid-item .mask { position: absolute; top: 0; z-index: 0; width: 100%; height: 100%; border-radius: 10px; overflow: hidden; } .fzzl-grid .grid-item_cover { position: absolute; top: 0; z-index: 0; width: 100%; height: 100%; border-radius: 10px; -o-object-fit: cover; object-fit: cover; } .fzzl-grid .grid-item_info { position: absolute; left: 0; bottom: 12px; z-index: 1; padding-left: 12px; -webkit-transition: all 0.3; transition: all 0.3; color: #ffffff; font-size: 24px; margin-bottom: 4px; } .fzzl-grid .grid-item_info .desc { height: 0; line-height: 28px; overflow: hidden; -webkit-transition: all 0.5s; transition: all 0.5s; font-size: 16px; } .fzzl-grid .reform-item { width: 350px; margin-right: 175px; margin-bottom: 60px; overflow: hidden; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .fzzl-grid .reform-item:last-child { margin-right: 0; } .fzzl-grid .reform-item:nth-child(3n) { margin-right: 0px; } .fzzl-grid .reform-item:hover .iconfont { color: #0054a6; } .fzzl-grid .reform-item .iconfont { font-size: 60px; color: #666b75; } .fzzl-grid .reform-item_info { margin-left: 30px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; font-size: 24px; } .fzzl-grid .reform-item_info .name { color: #223343; font-size: 20px; } .fzzl-grid .reform-item_info .desc { color: #666b75; font-size: 16px; margin-top: 12px; } @media screen and (max-width: 1400px) { .fzzl-grid .grid-item { width: 380px; height: 230px; margin-right: 30px; } .fzzl-grid .reform-item { width: 300px; margin-right: 150px; } } /***** 关于我们-发展战略 end *****/ /***** 关于我们-发展战略 begin *****/ .fzls-tabs { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; margin-bottom: 40px; } .fzls-tabs .tab-item { cursor: pointer; width: 210px; height: 80px; line-height: 80px; font-size: 24px; background: #f5f6f8; color: #666b75; text-align: center; margin-right: 20px; } .fzls-tabs .tab-item.active { color: #ffffff; background: #0054a7; } .timeline { width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 140px; } .timeline_item { padding-bottom: 40px; padding-left: 38px; border-left: 1px solid #e8e8e8; position: relative; color: #666b75; font-size: 16px; } .timeline_item.active::after { width: 18px; height: 18px; } .timeline_item.active .line-time { font-size: 22px; line-height: 34px; padding-right: 20px; text-align: left; } .timeline_item.active .con-box { background: transparent; width: 100%; padding: 4px 0 0 0; color: #666b75; } .timeline_item::after { content: ""; display: block; position: absolute; top: 8px; left: 0; -webkit-transform: translatex(-50%); transform: translatex(-50%); width: 12px; height: 12px; background: #0054a7; border-radius: 100%; } .timeline_item .line-time { position: absolute; left: -140px; top: 0; display: block; width: 140px; padding-right: 20px; font-size: 18px; line-height: 28px; color: #223343; text-align: right; } .timeline_item .con-box { color: #223343; font-size: 16px; line-height: 28px; background: #f5f6f8; width: 100%; padding: 28px 36px; } .timeline_item .con-box img { max-width: 100%; } /***** 关于我们-发展战略 end *****/ /** 企业与文化 **/ .culture_header { font-size: 42px; color: #223343; text-align: center; } .culture_header_title { z-index: 1; position: relative; } .culture_header_subtitle { font-size: 50px; color: #eef0f2; margin-top: -46px; } .culture_header_content { width: 1200px; margin: 0 auto; color: #666b75; font-size: 18px; line-height: 30px; } /** 九洲风采 **/ .jzfc-banner { width: 100%; margin-bottom: 75px; } .jzfc-banner-left { width: 700px !important; height: 434px !important; float: left; position: relative; } .jzfc-banner-left .banner-item { width: 700px !important; height: 434px !important; float: left; list-style: none; } .banner-item-img { display: block; width: 700px; height: 434px; -o-object-fit: cover; object-fit: cover; border-radius: 10px 0px 0px 10px; } .jzfc-banner-right { width: 700px; height: 434px; float: left; background: #f9fafc; color: #666b75; font-size: 16px; line-height: 30px; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 150px 60px 0px; position: relative; } .jzfc-banner-title { color: #223343; font-size: 36px; margin-bottom: 26px; z-index: 1; position: relative; font-weight: bold; } .jzfc-list { width: 100%; } .jzfc-list a:hover, .jzfc-list a:focus { color: #23527c; text-decoration: none; } .jzfc-list-item { cursor: pointer; width: 100%; border-radius: 5px; height: 240px; border: 1px solid rgb(232, 232, 232); margin-bottom: 27px; -webkit-transition: -webkit-box-shadow 0.3s; transition: -webkit-box-shadow 0.3s; transition: box-shadow 0.3s; transition: box-shadow 0.3s, -webkit-box-shadow 0.3s; -moz-transition: box-shadow 0.3s; -webkit-transition: box-shadow 0.3s; -o-transition: box-shadow 0.3s; } .jzfc-list-item:hover { -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); } .jzfc-img { float: left; width: 375px; height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 35px; } .jzfc-news { float: left; width: 1020px; height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 50px 50px 50px 0px; } .jzfc-news-img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .jzfc-news-title { display: block; width: 100%; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #223343; font-size: 18px; margin-bottom: 16px; } .jzfc-news-time { color: #cccccc; font-size: 16px; line-height: 16px; margin-bottom: 28px; } .jzfc-news-desc { width: 100%; color: #777c86; font-size: 16px; line-height: 30px; /* display: -webkit-box; */ /*! autoprefixer: off */ -webkit-box-orient: vertical; /*! autoprefixer: on */ -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; } .clearfix:after { /*伪元素是行内元素 正常浏览器清除浮动方法*/ content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { *zoom: 1; } @media screen and (max-width: 1400px) { .jzfc-banner { width: 100%; margin-bottom: 50px; } .jzfc-banner-left { width: 600px !important; height: 374px !important; float: left; position: relative; } .jzfc-banner-left .banner-item { width: 600px !important; height: 374px !important; float: left; list-style: none; } .banner-item-img { display: block; width: 600px; height: 374px; -o-object-fit: cover; object-fit: cover; } .jzfc-banner-right { width: 600px; height: 374px; float: left; background: #f5f6f8; color: #666b75; font-size: 16px; line-height: 30px; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 80px 60px 0px; } .jzfc-list { width: 100%; } .jzfc-list a:hover, .jzfc-list a:focus { color: #23527c; text-decoration: none; } .jzfc-list-item { width: 100%; border-radius: 5px; height: 205px; border: 1px solid rgb(232, 232, 232); margin-bottom: 22px; } .jzfc-img { float: left; width: 320px; height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 30px; } .jzfc-news { float: left; width: 878px; height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 40px 40px 40px 0px; } .jzfc-news-img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .jzfc-news-title { display: block; width: 100%; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #223343; font-size: 18px; margin-bottom: 12px; } .jzfc-news-time { color: #cccccc; font-size: 16px; line-height: 16px; margin-bottom: 20px; } } /** 社会责任 **/ .shzr-one-num { font-size: 100px; position: absolute; color: #eef0f2; z-index: 0; top: 130px; } .shzr-two { margin-left: -110px; position: relative; width: 99vw; height: 700px; overflow: hidden; } .shzr-two-left { width: 50vw; background: #f9fafc; height: 700px; float: left; min-width: 600px; } .shzr-two-num { font-size: 100px; color: #eef0f2; position: absolute; top: 40px; z-index: 0; } .two-left-list { margin-top: 120px; } .two-left-span { display: none; } .two-left-header { color: #223343; font-size: 30px; position: relative; z-index: 1; font-weight: bold; } .two-left-body { margin-top: 20px; line-height: 30px; font-size: 16px; color: #666b75; width: 550px; max-height: 470px; overflow-y: auto; } .two-left-middle { position: absolute; left: 47%; top: 40px; z-index: 99; } .two-middle-span { position: relative; width: 100px; height: 100px; border-radius: 100px; border: 1px solid #bdd7f1; margin-bottom: 30px; } .middle-span-num { width: 70px; height: 70px; font-family: youshetitlename; margin: 0 auto; border-radius: 70px; line-height: 70px; cursor: pointer; text-align: center; font-size: 40px; color: #0054a7; background: #ffffff; margin-top: 15px; } .middle-span-num-active { color: #ffffff; background: #0054a7; } .two-list-right { width: 49vw; float: right; height: 700px; background: #eaf0f9; } .right-list-span { display: none; } .right-list-span img { width: 588px; margin-top: 160px; position: absolute; -webkit-transition: -webkit-transform 0.2s; transition: -webkit-transform 0.2s; transition: transform 0.2s; transition: transform 0.2s, -webkit-transform 0.2s; -moz-transition: transform 0.2s; -webkit-transition: transform 0.2s; -o-transition: transform 0.2s; } .two-left-body::-webkit-scrollbar { /*滚动条整体样式*/ width: 10px !important; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px !important; } .two-left-body::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 10px !important; -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important; background: #f9fafc !important; border: 0px; } .two-left-body::-webkit-scrollbar-track { /*滚动条里面轨道*/ -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important; border-radius: 10px !important; background: #ededed !important; } /* 强化安全 */ .part-three { position: relative; margin-top: 60px; } .qhaq-three-num { font-size: 100px; color: #eef0f2; position: absolute; top: -60px; left: 0px; z-index: -1; } .qhaq-header-title { font-size: 30px; color: #223343; margin-bottom: 10px; font-weight: bold; } .qhaq-three-body { position: relative; overflow: hidden; } .qhaq-left { float: left; width: 45%; height: 450px; position: relative; } .qhaq-left img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 10px; } .qhaq-right { float: right; width: 50%; } .tab-content { display: none; } .qhaq-03-top { font-size: 16px; line-height: 30px; color: #666b75; } .qhaq-03-body { margin-top: 20px; } .tab-header { color: #223343; font-size: 24px; cursor: pointer; } .tab-header-active { color: #0054a7; } .qhaq-tab-span { margin-top: 10px; } .tab-content { display: none; margin-top: 10px; font-size: 16px; line-height: 30px; color: #666b75; } /* 注重环保 */ .clear-fix { clear: both; } .zhhb-four { margin-top: 90px; position: relative; margin-bottom: 40px; } .zhhb-four-body { position: relative; } .zhhb-left { width: 55%; float: right; } .zhhb-four-header { position: relative; } .zhhb-four-num { font-size: 100px; color: #eef0f2; position: absolute; top: -70px; left: 0px; /* z-index: -1; */ } .zhhb-header-title { font-size: 30px; color: #223343; margin-bottom: 10px; position: relative; z-index: 1; font-weight: bold; } .zzhb-img { width: 700px; height: 500px; position: relative; } .zzhb-img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 10px; } .zhhb-right { width: 35%; float: left; } .part-three-mask { position: absolute; width: 60vw; background: #f8f9fa; right: 0px; top: 0px; z-index: -1; } @media screen and (max-width: 1400px) { .shzr-one-num { font-size: 100px; position: absolute; color: #eef0f2; z-index: 0; top: 70px; } } /** 品牌文化 **/ .ppdw-box { margin-bottom: 60px; height: 480px; } .ppdw-container-left { width: 50%; height: 100%; float: left; background: #f5f6f8; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 60px 60px 0px; } .ppdw-container-left-title { color: rgb(34, 51, 67); font-size: 42px; text-align: left; margin-bottom: 20px; } .ppdw-container-left-subtitle { color: rgb(34, 51, 67); font-size: 24px; text-align: left; margin-bottom: 10px; } .ppdw-container-left-content { color: #666b75; font-size: 16px; line-height: 30px; text-align: justify; } .ppdw-container-right { width: 50% !important; height: 100%; float: right; position: relative; } .ppdw-item-img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .ppwh-palt-title { height: 50px; font-size: 42px; color: #223343; text-align: center; } .ppjz-content { height: 160px; margin-top: 25px; overflow: hidden; margin-bottom: 60px; } .ppjz-content-span { height: 160px; width: 20%; float: left; margin-bottom: 60px; } .ppjz-content-span:hover span { color: #0054a6; } .content-span-icon { height: 80px; text-align: center; } .content-span-icon span { font-size: 50px; } .content-span-subtitle { color: #666b75; font-size: 18px; text-align: center; margin-bottom: 8px; } .content-span-title { color: rgb(34, 51, 67); font-size: 24px; text-align: center; } .ppxg-box { width: 100%; height: 290px; position: relative; margin-bottom: 60px; } .ppxg-item-img { -o-object-fit: cover; object-fit: cover; height: 100%; width: 100%; } .ppxg-content { position: absolute; top: 45%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .ppxg-content-title { color: rgb(255, 255, 255); font-size: 42px; text-align: center; } .ppxg-content-subtitle { color: rgb(255, 255, 255); font-size: 24px; text-align: center; } .ppkh-box { height: 600px; } .ppkh-container-left { width: 50% !important; height: 100%; float: left; position: relative; } .ppkh-container-right-title { color: rgb(34, 51, 67); font-size: 42px; text-align: left; margin-bottom: 20px; } .ppkh-container-right-subtitle { color: rgb(34, 51, 67); font-size: 24px; text-align: left; margin-bottom: 10px; } .ppkh-container-right-content { color: #666b75; font-size: 16px; line-height: 30px; text-align: justify; } .ppkh-container-right { width: 50%; height: 100%; float: right; background: #f5f6f8; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 60px 60px 0px; } .ppkh-item-img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .list-span-noicon .span-noicon-point { margin-top: 13px; border-radius: 50%; } .list-span-noicon { height: auto; border: none; padding: 0; margin: 0 10px 0; line-height: 36px; font-size: 16px; position: relative; overflow: hidden; } .list-span-noicon:nth-child(5n) { margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px dotted #999; } .list-span-noicon:hover { -webkit-box-shadow: none; box-shadow: none; } .newsv2:nth-last-child(1) { margin-bottom: 30px !important; padding-bottom: 0 !important; border: none !important; } .span-noicon-point { float: left; height: 10px; width: 10px; background: #999999; margin-top: 7px; } .span-noicon-title { float: left; margin-left: 18px; } .span-noicon-date { float: right; } .list-span-noicon:hover { cursor: pointer; -webkit-box-shadow: none; box-shadow: none; } .list-span-noicon a { color: #666b75; } a:hover, a:focus { color: #23527c; text-decoration: none !important; } .rich-text { font-size: 16px; width: 1200px; color: #666b75; line-height: 30px; margin: 0 auto; } .rich-text p { margin: 0 0 10px; } .rich-text a { text-decoration: underline !important; color: #337ab7 !important; } .swiper-dwhz { width: 100%; height: 660px; overflow: hidden; position: relative; } .swiper-dwhz img { width: 100%; height: 100%; } .center-slider-desc { text-align: left; font-size: 16px; position: absolute; color: #ffffff; width: 100%; height: 150px; background: rgba(0, 0, 0, 0.3); padding: 20px 20px; bottom: 0; } .center-center-title { font-size: 30px; width: 75%; } .center-center-subtitle { font-size: 18px; margin-top: 10px; width: 75%; } .content-main { position: relative; margin-top: 40px; } .content-title { text-align: center; font-size: 42px; } .content-subtitle { text-align: center; font-size: 16px; color: #666b75; line-height: 28px; margin-top: 10px; margin-bottom: 40px; } .content-main { margin-bottom: 60px; } .content-main img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .mycp { color: #223343; font-size: 16px; margin-top: 15px; } .mycp-item { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .mycp-tit { color: #0054a6; font-size: 43px; margin: 120px 0 40px 0; font-weight: bold; } .mycp-tit1 { color: #223343; font-size: 24px; margin-bottom: 10px; font-weight: bold; } .mycp-nav { -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; text-align: center; margin-top: 50px; display: grid; grid-template-columns: repeat(6, auto); grid-gap: 16px; } .mycp-nav-i { color: #223343; margin: 0 20px; text-decoration: none; cursor: pointer; font-size: 15px; width: 160px; } .mycp-nav-i:hover { color: #0054a6; } .mycp-nav-i.curr { color: #0054a6; } .mycp-des { margin-right: 50px; text-indent: 30px; } .mycp-desl { 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; } .hide { display: none; } /***** 人力资源 begin *****/ .rlzy-section { 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; margin-bottom: 40px; } .rlzy-section_cover { width: 650px; height: 500px; border-radius: 6px; overflow: hidden; } .rlzy-section_cover img { width: 100%; height: 100%; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .rlzy-section_cover img:hover { -webkit-transform: scale(1.1); transform: scale(1.1); } .rlzy-section_info { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; height: 427px; float: right; background: #f9fafc; padding: 0 60px; } .rlzy-section_info .info-title { position: relative; height: 200px; margin-bottom: 24px; } .rlzy-section_info .info-title .name { font-size: 38px; line-height: 54px; color: #223343; position: absolute; bottom: 0; left: 0; z-index: 2; } .rlzy-section_info .info-title .en { font-size: 38px; line-height: 54px; color: #eef0f2; position: absolute; bottom: 0; left: 230px; } .rlzy-section_info .info-title .num { line-height: 200px; height: 200px; font-size: 200px; color: #eef0f2; width: 200px; position: absolute; top: 0; } .rlzy-section_info .info-desc { color: #666b75; line-height: 30px; font-size: 16px; } .rlzy-section-1 { margin-top: 40px; width: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; background-color: #f9fafc; height: 460px; margin-bottom: 50px; } .rlzy-section-1_cover { width: 45%; height: 100%; position: relative; overflow: hidden; } .rlzy-section-1_cover img { max-width: 80%; max-height: 80%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .rlzy-section-1_info { width: 55%; height: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; padding: 40px; } .rlzy-section-1_info .title { color: #333; font-size: 30px; } .rlzy-section-1_info .desc { margin-top: 8px; font-size: 16px; color: #666b75; line-height: 28px; } .rlzy-section-2 .title { text-align: center; font-size: 42px; color: #333; } .rlzy-section-2 .desc { font-size: 18px; color: #666b75; line-height: 28px; margin-top: 20px; } .rlzy-section-3 { background: #f9fafc; width: 48%; padding: 40px; float: left; margin-left: 1%; margin-right: 1%; height: 570px; overflow: hidden; } .rlzy-section-3 .title { font-size: 30px; } .rlzy-section-3 .desc { margin-top: 8px; font-size: 16px; color: #666b75; line-height: 28px; } .rlzy-section-3 .cover { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; margin-top: 40px; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .rlzy-section-3 .cover img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; border-radius: 5px; } @media screen and (max-width: 1400px) { .rlzy-section_cover { width: 550px; } .rlzy-section_info { padding: 0 40px; } } /***** 人力资源 begin *****/ /* 轮播 begin*/ .mv-player { min-width: 1200px; max-width: 2560px; background-color: #fff; position: relative; left: 50%; -webkit-transform: translatex(-50%); transform: translatex(-50%); } .home-banner a:focus { outline: none; } .background-roller img { width: 100%; min-height: 600px !important; } .slick-track { min-height: 600px; } @media screen and (min-width: 2560px) { .background-roller img { width: 100%; height: 1060px !important; } .slick-track { height: 1060px; } .background-roller img { width: 100%; height: 1060px !important; } .video { height: 1060px !important; } } @media screen and (max-width: 2500px) { .background-roller img { width: 100%; height: 730px !important; } .slick-track { height: 730px; } .background-roller img { width: 100%; height: 730px !important; } .video { height: 730px !important; } } @media screen and (max-width: 1900px) { .background-roller img { width: 100%; height: 650px !important; } .slick-track { height: 650px; } .background-roller img { width: 100%; height: 650px !important; } .video { height: 650px !important; } } @media screen and (max-width: 1400px) { .background-roller img { width: 100%; height: 600px !important; } .slick-track { height: 600px; } .background-roller img { width: 100%; height: 600px !important; } .video { height: 600px !important; } } .index-background-img img { -o-object-fit: cover; object-fit: cover; } .slick-dots { bottom: 25px !important; } .slick-dots li button::before { opacity: 0.5 !important; color: #ffffff !important; background: #ffffff !important; content: "" !important; width: 30px !important; height: 10px !important; } .slick-dots li.slick-active button:before { opacity: 1 !important; } .slick-dots li { width: 30px !important; height: 10px !important; } .slick-dots li button { width: 30px !important; height: 10px !important; } video { right: 0px; bottom: 0px; min-height: 600px; min-width: 1200px; -o-object-fit: cover; object-fit: cover; } .background-loading { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgb(0, 0, 0); } .background-loading img { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; } source { min-width: 100%; min-height: 100%; height: auto; width: auto; } /* 轮播 end */ .section-title { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 50px; margin-top: 30px; } .section-title_left { position: relative; width: 50px; } .section-title_left::before { content: ""; position: absolute; left: 0; top: 35px; width: 12px; height: 12px; background: rgba(0, 130, 247, 0.4); -webkit-transform: rotate(45deg); transform: rotate(45deg); } .section-title_left::after { content: ""; position: absolute; left: 12px; top: 34px; width: 16px; height: 16px; background-color: #0082f7; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .section-title_info { position: relative; margin: 0 20px; text-align: center; font-weight: 600; font-size: 32px; line-height: 44px; color: #002d57; } .section-title_info .en { color: #afb4b7; font-size: 16px; line-height: 24px; font-weight: 400; margin-bottom: 10px; } .section-title_info::after { content: ""; position: absolute; bottom: 0; left: calc(50% - 24px); background: #0082f7; border-radius: 4px; width: 48px; height: 4px; -webkit-box-sizing: border-box; box-sizing: border-box; } .section-title_right { position: relative; width: 50px; } .section-title_right::before { content: ""; position: absolute; top: 35px; right: 0; width: 12px; height: 12px; background: rgba(0, 130, 247, 0.4); -webkit-transform: rotate(45deg); transform: rotate(45deg); } .section-title_right::after { content: ""; position: absolute; right: 11px; top: 34px; width: 16px; height: 16px; background-color: #0082f7; -webkit-transform: rotate(45deg); transform: rotate(45deg); } /* section-con-0 begin */ .section-con-0 { width: 1400px; margin: 0 auto; } .section-con-0 .module-left { background: #f7f9fb; height: 720px; width: 700px; float: left; position: relative; } .section-con-0 .module-left_title { overflow: hidden; height: 230px; background: rgba(25, 30, 89, 0.1); color: #ffffff; position: relative; } .section-con-0 .module-left_title .img { width: 100%; height: 100%; } .section-con-0 .module-left_title .mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 84, 167, 0.8); } .section-con-0 .module-left_title .name { position: absolute; top: 75px; left: 50px; color: #ffffff; font-size: 36px; } .section-con-0 .module-left_title::after { content: ""; display: block; position: absolute; left: 50px; width: 100px; border-bottom: 5px solid; top: 143px; } .section-con-0 .module-left_text { overflow: hidden; padding: 56px; color: #666b75; font-size: 16px; line-height: 30px; text-align: left; } .section-con-0 .module-left .more-box { position: absolute; z-index: 1; bottom: 56px; left: 56px; display: block; -webkit-box-sizing: border-box; box-sizing: border-box; width: 170px; height: 50px; border: 1px solid rgb(204, 204, 204); line-height: 48px; text-align: center; font-size: 18px; cursor: pointer; color: #666666; -webkit-transition: all 0.3s; transition: all 0.3s; } .section-con-0 .module-left .more-box::before { position: absolute; z-index: -1; width: 0; height: 50px; top: 0px; left: 0px; background: #0054a7; content: ""; -webkit-transition: all 0.3s; transition: all 0.3s; } .section-con-0 .module-left .more-box:hover { color: #ffffff; } .section-con-0 .module-left .more-box:hover::before { width: 170px; } .section-con-0 .module-other { width: 350px; overflow: hidden; color: #ffffff; height: 720px; background: rgba(25, 30, 89, 0.1); position: relative; float: left; } .section-con-0 .module-other_img { -webkit-transform: none; transform: none; width: 100%; height: 100%; -webkit-transition: all 0.8s; transition: all 0.8s; } .section-con-0 .module-other_con { position: absolute; z-index: 1; top: 3%; left: 3%; width: 94%; height: 94%; 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; font-size: 36px; color: #ffffff; } .section-con-0 .module-other_con::before { -webkit-box-sizing: inherit; box-sizing: inherit; content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 100%; -webkit-transform-origin: center; transform-origin: center; border-top: 1px solid #ffffff; border-bottom: 1px solid #ffffff; -webkit-transform: scale3d(0, 1, 1); transform: scale3d(0, 1, 1); -webkit-transition: all 0.8s; transition: all 0.8s; } .section-con-0 .module-other_con::after { -webkit-box-sizing: inherit; box-sizing: inherit; content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 100%; -webkit-transform-origin: center; transform-origin: center; border-left: 1px solid #ffffff; border-right: 1px solid #ffffff; -webkit-transform: scale3d(1, 0, 1); transform: scale3d(1, 0, 1); -webkit-transition: all 0.8s; transition: all 0.8s; } .section-con-0 .module-other_mask { position: absolute; top: 0; z-index: 0; height: 100%; width: 100%; background-color: rgba(0, 84, 167, 0.2); } .section-con-0 .module-other:hover .module-other_img { -webkit-transform: scale(1.3); transform: scale(1.3); } .section-con-0 .module-other:hover .module-other_con::before { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } .section-con-0 .module-other:hover .module-other_con::after { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } .section-con-0 .module-other:hover .module-other_mask { background-color: rgba(0, 84, 167, 0.8); } /* section-con-0 end */ /* section-con-1 begin */ .section-con-1 { height: 630px; background: #081c32; width: 100%; } .section-con-1 .module-tab { width: 420px; float: left; } .section-con-1 .module-tab_item { position: relative; -webkit-transition: all 0.6s linear; transition: all 0.6s linear; cursor: default; font-size: 24px; height: 126px; background: #081c32; } .section-con-1 .module-tab_item.active { background: #00408a; color: #ffffff; } .section-con-1 .module-tab_item.active .item-con_desc { color: #ffffff; } .section-con-1 .module-tab_item .item-num { font-family: youshetitlename; float: left; font-size: 150px; height: 126px; top: 0px; position: absolute; left: 12px; color: rgba(255, 255, 255, 0.2); } .section-con-1 .module-tab_item .item-con { height: 126px; padding-left: 40px; width: 250px; margin: 0 auto; color: #ffffff; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .section-con-1 .module-tab_item .item-con_desc { font-size: 16px; color: #959faa; margin-top: 8px; } .section-con-1 .module-con-box { overflow: hidden; width: 980px; height: 630px; } .section-con-1 .module-con { overflow: hidden; width: 980px; height: 630px; display: none; } .section-con-1 .module-con.active { display: block; } .section-con-1 .module-con .module-con_item { display: block; width: 100%; height: 100%; position: relative; overflow: hidden; cursor: pointer; } .section-con-1 .module-con .module-con_item .img { width: 100%; height: 100%; } .section-con-1 .module-con .module-con_item .item-desc { position: absolute; width: 100%; bottom: 0; padding: 12px 40px; color: #ffffff; } .section-con-1 .module-con .module-con_item .item-desc .desc-title { font-size: 24px; margin-bottom: 8px; } .section-con-1 .module-con .module-con_item .item-desc .desc-content { font-size: 16px; height: 0; overflow: hidden; line-height: 20px; transition: all 0.5s; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; /*!autoprefixer:off*/ -webkit-line-clamp: 2; } .section-con-1 .module-con .module-con_item:hover .item-desc .desc-content { height: 40px; } .section-con-1 .module-con .module-con_item:hover .item-desc .desc-content.row4 { height: 80px; /*!autoprefixer:off*/ -webkit-line-clamp: 4; } .section-con-1 .module-con .module-con_col { width: 480px; height: 630px; float: left; } .section-con-1 .module-con .module-con_col_1 { width: 500px; height: 630px; float: left; } .section-con-1 .module-con .module-con_row { height: 315px; width: 100%; } /* section-con-1 end */ /* section-con-2 begin */ .section-con-2 { width: 1400px; margin: 0 auto; } .section-con-2 .tab-box { 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: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 32px; } .section-con-2 .tab-box .tab-title { font-size: 32px; } .section-con-2 .tab-box .tab-list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .section-con-2 .tab-box .tab-list .tab-item { font-size: 16px; padding: 7px 15px; text-align: center; cursor: pointer; margin-left: 20px; } .section-con-2 .tab-box .tab-list .tab-item:first-child { margin-left: 0; } .section-con-2 .tab-box .tab-list .tab-item.active { background: #0054a7; color: #ffffff; } .section-con-2 .tab-box .tab-list .more { font-size: 16px; padding: 7px 15px; text-align: center; cursor: pointer; margin-left: 20px; } .section-con-2 .module-con { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 530px; width: 100%; } .section-con-2 .module-con .module-left { -webkit-box-flex: 0; -webkit-flex: 0 0 700px; -ms-flex: 0 0 700px; flex: 0 0 700px; width: 700px; height: 530px; overflow: hidden; position: relative; } .section-con-2 .module-con .module-left .swiper-item { width: 700px; height: 530px; overflow: hidden; position: relative; } .section-con-2 .module-con .module-left .swiper-item .img { width: 100%; height: 100%; } .section-con-2 .module-con .module-left .swiper-item .info-box { position: absolute; left: 0; bottom: 0; width: 100%; height: 150px; padding: 28px 20px; background-color: rgba(0, 0, 0, 0.3); color: #ffffff; } .section-con-2 .module-con .module-left .swiper-item .info-box_title { font-size: 24px; } .section-con-2 .module-con .module-list { width: 670px; margin-left: 30px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .section-con-2 .module-con .module-list .module-item { height: 90px; width: 100%; padding: 0 20px; -webkit-box-sizing: border-box; box-sizing: border-box; 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: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; border-bottom: 1px solid #e8e8e8; -webkit-transition: all 0.3s; transition: all 0.3s; cursor: pointer; } .section-con-2 .module-con .module-list .module-item:hover { -webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); } .section-con-2 .module-con .module-list .module-item .item-title { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #223343; font-size: 20px; font-weight: 600; } .section-con-2 .module-con .module-list .module-item .item-time { font-size: 30px; color: #cccccc; } .section-con-2 .module-con .module-list .track-link { display: block; height: 80px; width: 100%; } .section-con-2 .module-con .module-list .track-link img { width: 100%; height: 100%; } .section-con-2 .module-con .new-list-box { display: none; } .section-con-2 .module-con .new-list-box.active { display: block; } /* section-con-2 end */ /* section-con-3 begin */ .section-con-3 { width: 100%; height: 650px; overflow: hidden; position: relative; } .section-con-3 .section_bg { display: block; position: absolute; width: 2560px; height: 647px; top: 0; left: 50%; -webkit-transform: translatex(-50%); transform: translatex(-50%); } .section-con-3 .backdrop-box { position: absolute; z-index: 0; top: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; height: 100%; } .section-con-3 .backdrop-box .col { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; height: 100%; overflow: hidden; -webkit-transition: all 0.3s; transition: all 0.3s; } .section-con-3 .backdrop-box .col.center { -webkit-box-flex: 0; -webkit-flex: 0 0 390px; -ms-flex: 0 0 390px; flex: 0 0 390px; } .section-con-3 .backdrop-box .col.hover { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); /* 设置模糊程度 */ background-color: rgba(196, 196, 196, 0.3); /* 添加透明度作为背景色 */ } .section-con-3 .hover-box { position: absolute; z-index: 1; top: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; height: 100%; } .section-con-3 .hover-box .col { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; height: 100%; overflow: hidden; -webkit-transition: all 0.3s; transition: all 0.3s; } .section-con-3 .hover-box .col.center { -webkit-box-flex: 0; -webkit-flex: 0 0 390px; -ms-flex: 0 0 390px; flex: 0 0 390px; border-left: 1px solid #ffffff; border-right: 1px solid #ffffff; } .section-con-3 .module-con { width: 97%; max-width: 1180px; height: 650px; margin: 0 auto; position: relative; overflow: hidden; color: #ffffff; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .section-con-3 .module-con_title { position: absolute; top: 0; left: 0; font-size: 36px; text-align: left; padding-top: 60px; padding-left: 30px; } .section-con-3 .module-con_desc { position: absolute; top: 110px; padding-left: 30px; max-width: 360px; font-size: 14px; line-height: 24px; text-align: left; margin-top: 10px; } .section-con-3 .module-con_item { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; padding: 350px 80px 0; font-size: 24px; } /* section-con-3 end */ /*# sourcemappingurl=index.css.map */