@import ; @font-face { font-family: "iconfont"; src: ; src: format("embedded-opentype"), format("woff2"), format("woff"), format("truetype"), format("svg") } * { margin: 0; padding: 0; outline: none; border: none; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } html, body { background-color: #fff; color: #000; -webkit-text-size-adjust: none; font: 14px/1.8 "微软雅黑", "microsoft yahei", arial, "simhei", "黑体", "微软正黑体", "microsoft jhenghei" } html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; overflow-x: hidden } body { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; overflow-x: hidden; -webkit-tap-highlight-color: transparent } h1, h2, h3, h4, h5, h6, small, big, input, textarea, button, select { font-size: 100% } h1, h2, h3, h4, h5, h6 { font-family: "微软雅黑", "microsoft yahei", tahoma, arial, "hiragino sans gb", sans-serif } table { border-collapse: collapse; border-spacing: 0; text-align: left } ul, ol, menu { list-style: none } fieldset, img { border: 0; display: block } img, object, input, textarea, button, select { vertical-align: middle } article, aside, footer, header, section, nav, figure, figcaption, hgroup, details, menu { display: block } audio, canvas, video { display: inline-block; zoom: 1 } blockquote, q { quotes: none } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none } textarea { overflow: auto; resize: vertical } input, textarea, button, select, a { outline: none; border: none } input, textarea { display: block; -webkit-user-select: auto } button::-moz-focus-inner, input::-moz-focus-inner { padding: 0; border: 0 } mark { background-color: transparent } a, ins, s, u, del { text-decoration: none } sup, sub { vertical-align: baseline } a { color: #000 } ::-webkit-scrollbar { width: 6px; height: 6px; background-color: #fff } ::-webkit-scrollbar-thumb { background-color: #70bc5f } ::-moz-selection { background: #70bc5f; color: #fff; text-shadow: none } ::selection { background: #70bc5f; color: #fff; text-shadow: none } p { font-size: 14px; line-height: 1.8 } h4, h5, h6 { color: #333; font-weight: 400 } .linka { position: absolute !important; top: 0; left: 0; width: 100% !important; height: 100% !important; background: transparent !important } .newspaper a:link, .newspaper a:visited { color: #666 } .newspaper a:active, .newspaper a:hover { color: #70bc5f } .newspaper img { max-width: 100% !important; width: 100%; height: auto !important } ::-webkit-input-placeholder { color: #cbcbcb } :-moz-placeholder { color: #cbcbcb } ::-moz-placeholder { color: #cbcbcb } :-ms-input-placeholder { color: #cbcbcb } .imgs { max-width: 100%; width: 100%; height: auto !important; display: block } .w1200 { width: 1200px; margin: auto } .w1280 { width: 1280px; margin: auto } .w1320 { width: 1320px; margin: auto } .weixin { position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: auto; background: rgba(0, 0, 0, 0.7); z-index: 99; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; visibility: hidden; opacity: 0; -webkit-transition: .3s; transition: .3s; cursor: pointer } .weixin.active { visibility: visible; opacity: 1 } .weixin.active section { -webkit-transform: translatey(0); transform: translatey(0) } .weixin section { height: auto; padding: 20px; background: #eee; text-align: center; -webkit-transition: .3s; transition: .3s; -webkit-transform: translatey(50px); transform: translatey(50px) } .weixin section img { width: 100%; display: block; margin: auto } .weixin section p { font-size: 14px; color: #666; margin-top: 6px } .z150 { -webkit-transform: scale(1.5); transform: scale(1.5); opacity: 0; -webkit-transition: 1s; transition: 1s } .z50 { -webkit-transform: scale(0.5); transform: scale(0.5); opacity: 0; -webkit-transition: 1s; transition: 1s } .z0 { -webkit-transform: scale(1); transform: scale(1); opacity: 1 } .y100 { -webkit-transform: translatey(100px); transform: translatey(100px); opacity: 0; -webkit-transition: 1s; transition: 1s } .y75 { -webkit-transform: translatey(75px); transform: translatey(75px); opacity: 0; -webkit-transition: 1s; transition: 1s } .y50 { -webkit-transform: translatey(50px); transform: translatey(50px); opacity: 0; -webkit-transition: 1s; transition: 1s } .y25 { -webkit-transform: translatey(25px); transform: translatey(25px); opacity: 0; -webkit-transition: 1s; transition: 1s } .y0 { -webkit-transform: translatey(0); transform: translatey(0); opacity: 1 } .x100 { -webkit-transform: translatex(-100px); transform: translatex(-100px); opacity: 0; -webkit-transition: 1s; transition: 1s } .x_100 { -webkit-transform: translatex(100px); transform: translatex(100px); opacity: 0; -webkit-transition: 1s; transition: 1s } .x75 { -webkit-transform: translatex(-75px); transform: translatex(-75px); opacity: 0; -webkit-transition: 1s; transition: 1s } .x75 { -webkit-transform: translatex(75px); transform: translatex(75px); opacity: 0; -webkit-transition: 1s; transition: 1s } .x50 { -webkit-transform: translatex(-50px); transform: translatex(-50px); opacity: 0; -webkit-transition: 1s; transition: 1s } .x-50 { -webkit-transform: translatex(50px); transform: translatex(50px); opacity: 0; -webkit-transition: 1s; transition: 1s } .x0 { -webkit-transform: translatex(0); transform: translatex(0); opacity: 1 } .xz { -webkit-transform: translate(-900px, 0) scale(0.4); transform: translate(-900px, 0) scale(0.4); opacity: 0; -webkit-transition: .5s; transition: .5s } .xz0 { -webkit-transform: translate(0px, 0) scale(1); transform: translate(0px, 0) scale(1); opacity: 1; -webkit-transition: .5s; transition: .5s } .opacitys { opacity: 0; -webkit-transition: 1s; transition: 1s } .reset_opacitys { opacity: 1; -webkit-transition: 1s; transition: 1s; -webkit-transition-duration: .5s; transition-duration: .5s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out } .inthemiddle { position: relative; cursor: pointer } .inthemiddle:hover section div::before { height: 100%; -webkit-transition: .5s ease-in; transition: .5s ease-in } .inthemiddle:hover section div::after { height: 100%; -webkit-transition: .5s ease; transition: .5s ease } .inthemiddle section { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; z-index: 9; overflow: hidden } .inthemiddle section div::before, .inthemiddle section div::after { content: ''; position: absolute; width: 100%; height: 0; background: black; left: 0; bottom: 50%; z-index: -1; -webkit-transition: .3s; transition: .3s } .inthemiddle section div::after { top: 50% } .inthemiddleround { position: relative; cursor: pointer } .inthemiddleround:hover section div:last-child { width: 100%; height: 100% } .inthemiddleround section { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; z-index: 9; overflow: hidden } .inthemiddleround section div:last-child { position: absolute; border-radius: 50%; width: 0%; height: 0%; background: black; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: -1; -webkit-transition: .3s; transition: .3s } .button_fadeinmid { position: relative; width: 180px; height: 64px; background: red; border-radius: 60px; color: white; cursor: pointer } .button_fadeinmid section { position: absolute; top: 0; left: 50%; -webkit-transform: translatex(-50%); transform: translatex(-50%); width: 80%; height: 100%; background: transparent; border-radius: 60px; -webkit-transition: .3s; transition: .3s } .button_fadeinmid div { position: absolute; width: 100%; top: 50%; left: 50%; line-height: 1; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: .3s; transition: .3s } .button_fadeinmid:hover section { width: 100%; background: rgba(0, 0, 0, 0.5) } .button_fadeinrotate { position: relative; width: 180px; height: 64px; background: red; color: white; cursor: pointer; overflow: hidden } .button_fadeinrotate section { position: absolute; top: 0; left: -40%; width: 150%; height: 100%; background: black; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: left top; transform-origin: left top; -webkit-transition: .3s; transition: .3s; -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1) } .button_fadeinrotate div { position: absolute; top: 50%; left: 50%; line-height: 1; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%) } .button_fadeinrotate:hover section { height: 100%; -webkit-transform: rotate(0deg); transform: rotate(0deg) } .button_double_fadeintop { display: block; position: relative; width: 180px; height: 64px; background: red; color: white; cursor: pointer; overflow: hidden } .button_double_fadeintop section { position: absolute; top: 0; left: 0; width: 100%; height: 0; background: black; -webkit-transition: .3s; transition: .3s; -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1) } .button_double_fadeintop section::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.2); -webkit-transition: .3s; transition: .3s; -webkit-transition-delay: .3s; transition-delay: .3s } .button_double_fadeintop div { position: absolute; top: 50%; left: 50%; line-height: 1; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%) } .button_double_fadeintop:hover section { height: 100% } .button_double_fadeintop:hover section::after { height: 0% } .button_double_fadeinbottom { display: block; position: relative; width: 180px; height: 64px; background: red; color: white; cursor: pointer; overflow: hidden } .button_double_fadeinbottom section { position: absolute; bottom: 0; left: 0; width: 100%; height: 0; background: black; -webkit-transition: .3s; transition: .3s; -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1) } .button_double_fadeinbottom section::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.2); -webkit-transition: .3s; transition: .3s; -webkit-transition-delay: .3s; transition-delay: .3s } .button_double_fadeinbottom div { width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; line-height: 1; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%) } .button_double_fadeinbottom:hover section { height: 100% } .button_double_fadeinbottom:hover section::after { height: 0% } .button_highlight { display: block; position: relative; width: 180px; height: 64px; background: red; color: white; cursor: pointer; overflow: hidden; -webkit-transition: .3s; transition: .3s } .button_highlight section { position: absolute; top: -30%; left: -100%; width: 40%; height: 200%; background: rgba(255, 255, 255, 0.5); -webkit-transition: .5s; transition: .5s; -webkit-transform: rotate(30deg); transform: rotate(30deg); -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1) } .button_highlight div { position: absolute; top: 50%; left: 50%; line-height: 1; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%) } .button_highlight:hover { background: aqua } .button_highlight:hover section { left: 150% } @-webkit-keyframes huayu { 0% { left: -100% } 100% { left: 100% } } @keyframes huayu { 0% { left: -100% } 100% { left: 100% } } @-webkit-keyframes guodong { from, to { -webkit-transform: scale(1, 1); transform: scale(1, 1) } 25% { -webkit-transform: scale(0.9, 1.1); transform: scale(0.9, 1.1) } 50% { -webkit-transform: scale(1.1, 0.9); transform: scale(1.1, 0.9) } 75% { -webkit-transform: scale(0.95, 1.05); transform: scale(0.95, 1.05) } } @keyframes guodong { from, to { -webkit-transform: scale(1, 1); transform: scale(1, 1) } 25% { -webkit-transform: scale(0.9, 1.1); transform: scale(0.9, 1.1) } 50% { -webkit-transform: scale(1.1, 0.9); transform: scale(1.1, 0.9) } 75% { -webkit-transform: scale(0.95, 1.05); transform: scale(0.95, 1.05) } } @-webkit-keyframes fadeinup { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes fadeinup { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @-webkit-keyframes zoominleft { from { 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) } 100% { opacity: 1; -webkit-transform: scale3d(0) translate3d(0, 0, 0); transform: scale3d(0) translate3d(0, 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 { from { 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) } 100% { opacity: 1; -webkit-transform: scale3d(0) translate3d(0, 0, 0); transform: scale3d(0) translate3d(0, 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) } } @-webkit-keyframes bounce { from, 20%, 53%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0) } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -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 { from, 20%, 53%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0) } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0) } 90% { -webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0) } } @-webkit-keyframes bounceindown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1) } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0) } 60% { opacity: 1; -webkit-transform: translate3d(0, 35px, 0); transform: translate3d(0, 35px, 0) } 75% { -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0) } 90% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0) } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes bounceindown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1) } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0) } 60% { opacity: 1; -webkit-transform: translate3d(0, 35px, 0); transform: translate3d(0, 35px, 0) } 75% { -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0) } 90% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0) } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @-webkit-keyframes fadeindownbig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes fadeindownbig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @-webkit-keyframes rote { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg) } } @keyframes rote { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg) } } @-webkit-keyframes rotes { 0% { -webkit-transform: rotate(360deg); transform: rotate(360deg) } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } } @keyframes rotes { 0% { -webkit-transform: rotate(360deg); transform: rotate(360deg) } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } } @-webkit-keyframes home_times { 0% { width: 0 } 100% { width: 100% } } @keyframes home_times { 0% { width: 0 } 100% { width: 100% } } @-webkit-keyframes home_shubiao { 0% { -webkit-transform: translatey(0px); transform: translatey(0px); opacity: 0 } 100% { -webkit-transform: translatey(20px); transform: translatey(20px); opacity: 1 } } @keyframes home_shubiao { 0% { -webkit-transform: translatey(0px); transform: translatey(0px); opacity: 0 } 100% { -webkit-transform: translatey(20px); transform: translatey(20px); opacity: 1 } } @-webkit-keyframes flipinx { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-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-animation-timing-function: ease-in; animation-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) } to { -webkit-transform: perspective(400px); transform: perspective(400px); opacity: 1 } } @keyframes flipinx { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-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-animation-timing-function: ease-in; animation-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) } to { -webkit-transform: perspective(400px); transform: perspective(400px); opacity: 1 } } @-webkit-keyframes dx { 0%, 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: scale(1.1); transform: scale(1.1) } 50% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: scale(1); transform: scale(1) } } @keyframes dx { 0%, 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: scale(1.1); transform: scale(1.1) } 50% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: scale(1); transform: scale(1) } } .swiper-container { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1 } .swiper-container-no-flexbox .swiper-slide { float: left } .swiper-container-vertical>.swiper-wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; transition-property: transform, -webkit-transform; -webkit-box-sizing: content-box; box-sizing: content-box } .swiper-container-android .swiper-slide, .swiper-wrapper { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } .swiper-container-multirow>.swiper-wrapper { -ms-flex-wrap: wrap; flex-wrap: wrap } .swiper-container-free-mode>.swiper-wrapper { -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; margin: 0 auto } .swiper-slide { -ms-flex-negative: 0; flex-shrink: 0; width: 100%; height: 100%; position: relative; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; transition-property: transform, -webkit-transform } .swiper-slide-invisible-blank { visibility: hidden } .swiper-container-autoheight, .swiper-container-autoheight .swiper-slide { height: auto } .swiper-container-autoheight .swiper-wrapper { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-transition-property: height, -webkit-transform; transition-property: height, -webkit-transform; transition-property: transform, height; transition-property: transform, height, -webkit-transform } .swiper-container-3d { -webkit-perspective: 1200px; perspective: 1200px } .swiper-container-3d .swiper-cube-shadow, .swiper-container-3d .swiper-slide, .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-wrapper { -webkit-transform-style: preserve-3d; transform-style: preserve-3d } .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10 } .swiper-container-3d .swiper-slide-shadow-left { background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)) } .swiper-container-3d .swiper-slide-shadow-right { background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)) } .swiper-container-3d .swiper-slide-shadow-top { background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)) } .swiper-container-3d .swiper-slide-shadow-bottom { background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)) } .swiper-container-wp8-horizontal, .swiper-container-wp8-horizontal>.swiper-wrapper { -ms-touch-action: pan-y; touch-action: pan-y } .swiper-container-wp8-vertical, .swiper-container-wp8-vertical>.swiper-wrapper { -ms-touch-action: pan-x; touch-action: pan-x } .swiper-button-next, .swiper-button-prev { position: absolute; top: 50%; width: 27px; height: 44px; margin-top: -22px; z-index: 10; cursor: pointer; background-size: 27px 44px; background-position: center; background-repeat: no-repeat } .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { opacity: .35; cursor: auto; pointer-events: none } .swiper-button-prev, .swiper-container-rtl .swiper-button-next { background-image: ; left: 10px; right: auto } .swiper-button-next, .swiper-container-rtl .swiper-button-prev { background-image: ; right: 10px; left: auto } .swiper-button-prev.swiper-button-white, .swiper-container-rtl .swiper-button-next.swiper-button-white { background-image: } .swiper-button-next.swiper-button-white, .swiper-container-rtl .swiper-button-prev.swiper-button-white { background-image: } .swiper-button-prev.swiper-button-black, .swiper-container-rtl .swiper-button-next.swiper-button-black { background-image: } .swiper-button-next.swiper-button-black, .swiper-container-rtl .swiper-button-prev.swiper-button-black { background-image: } .swiper-button-lock { display: none } .swiper-pagination { position: absolute; text-align: center; -webkit-transition: .3s opacity; transition: .3s opacity; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); z-index: 10 } .swiper-pagination.swiper-pagination-hidden { opacity: 0 } .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 10px; left: 0; width: 100% } .swiper-pagination-bullets-dynamic { overflow: hidden; font-size: 0 } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { -webkit-transform: scale(0.33); transform: scale(0.33); position: relative } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { -webkit-transform: scale(1); transform: scale(1) } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { -webkit-transform: scale(1); transform: scale(1) } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { -webkit-transform: scale(0.66); transform: scale(0.66) } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { -webkit-transform: scale(0.33); transform: scale(0.33) } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { -webkit-transform: scale(0.66); transform: scale(0.66) } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { -webkit-transform: scale(0.33); transform: scale(0.33) } .swiper-pagination-bullet { width: 8px; height: 8px; display: inline-block; border-radius: 100%; background: #000; opacity: .2 } button.swiper-pagination-bullet { border: none; margin: 0; padding: 0; -webkit-box-shadow: none; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none } .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer } .swiper-pagination-bullet-active { opacity: 1; background: #007aff } .swiper-container-vertical>.swiper-pagination-bullets { right: 10px; top: 50%; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0) } .swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet { margin: 6px 0; display: block } .swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { top: 50%; -webkit-transform: translatey(-50%); transform: translatey(-50%); width: 8px } .swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { display: inline-block; -webkit-transition: .2s top, .2s -webkit-transform; transition: .2s top, .2s -webkit-transform; -webkit-transition: .2s transform, .2s top; transition: .2s transform, .2s top; -webkit-transition: .2s transform, .2s top, .2s -webkit-transform; transition: .2s transform, .2s top, .2s -webkit-transform } .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 4px } .swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { left: 50%; -webkit-transform: translatex(-50%); transform: translatex(-50%); white-space: nowrap } .swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { -webkit-transition: .2s left, .2s -webkit-transform; transition: .2s left, .2s -webkit-transform; -webkit-transition: .2s transform, .2s left; transition: .2s transform, .2s left; -webkit-transition: .2s transform, .2s left, .2s -webkit-transform; transition: .2s transform, .2s left, .2s -webkit-transform } .swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { -webkit-transition: .2s right, .2s -webkit-transform; transition: .2s right, .2s -webkit-transform; -webkit-transition: .2s transform, .2s right; transition: .2s transform, .2s right; -webkit-transition: .2s transform, .2s right, .2s -webkit-transform; transition: .2s transform, .2s right, .2s -webkit-transform } .swiper-pagination-progressbar { background: rgba(0, 0, 0, 0.25); position: absolute } .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: #007aff; position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-transform: scale(0); transform: scale(0); -webkit-transform-origin: left top; transform-origin: left top } .swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { -webkit-transform-origin: right top; transform-origin: right top } .swiper-container-horizontal>.swiper-pagination-progressbar, .swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { width: 100%; height: 4px; left: 0; top: 0 } .swiper-container-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-container-vertical>.swiper-pagination-progressbar { width: 4px; height: 100%; left: 0; top: 0 } .swiper-pagination-white .swiper-pagination-bullet-active { background: #fff } .swiper-pagination-progressbar.swiper-pagination-white { background: rgba(255, 255, 255, 0.25) } .swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill { background: #fff } .swiper-pagination-black .swiper-pagination-bullet-active { background: #000 } .swiper-pagination-progressbar.swiper-pagination-black { background: rgba(0, 0, 0, 0.25) } .swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill { background: #000 } .swiper-pagination-lock { display: none } .swiper-scrollbar { border-radius: 10px; position: relative; -ms-touch-action: none; background: rgba(0, 0, 0, 0.1) } .swiper-container-horizontal>.swiper-scrollbar { position: absolute; left: 1%; bottom: 3px; z-index: 50; height: 5px; width: 98% } .swiper-container-vertical>.swiper-scrollbar { position: absolute; right: 3px; top: 1%; z-index: 50; width: 5px; height: 98% } .swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background: rgba(0, 0, 0, 0.5); border-radius: 10px; left: 0; top: 0 } .swiper-scrollbar-cursor-drag { cursor: move } .swiper-scrollbar-lock { display: none } .swiper-zoom-container { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center } .swiper-zoom-container>canvas, .swiper-zoom-container>img, .swiper-zoom-container>svg { max-width: 100%; max-height: 100%; -o-object-fit: contain; object-fit: contain } .swiper-slide-zoomed { cursor: move } .swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; -webkit-transform-origin: 50%; transform-origin: 50%; -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite; animation: swiper-preloader-spin 1s steps(12, end) infinite } .swiper-lazy-preloader:after { display: block; content: ''; width: 100%; height: 100%; background-image: '/>"); background-position: 50%; background-size: 100%; background-repeat: no-repeat } .swiper-lazy-preloader-white:after { background-image: '/>") } @-webkit-keyframes swiper-preloader-spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg) } } @keyframes swiper-preloader-spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg) } } .swiper-container .swiper-notification { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000 } .swiper-container-fade.swiper-container-free-mode .swiper-slide { -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out } .swiper-container-fade .swiper-slide { pointer-events: none; -webkit-transition-property: opacity; transition-property: opacity } .swiper-container-fade .swiper-slide .swiper-slide { pointer-events: none } .swiper-container-fade .swiper-slide-active, .swiper-container-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto } .swiper-container-cube { overflow: visible } .swiper-container-cube .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; visibility: hidden; -webkit-transform-origin: 0 0; transform-origin: 0 0; width: 100%; height: 100% } .swiper-container-cube .swiper-slide .swiper-slide { pointer-events: none } .swiper-container-cube.swiper-container-rtl .swiper-slide { -webkit-transform-origin: 100% 0; transform-origin: 100% 0 } .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-active .swiper-slide-active { pointer-events: auto } .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-next, .swiper-container-cube .swiper-slide-next .swiper-slide, .swiper-container-cube .swiper-slide-prev { pointer-events: auto; visibility: visible } .swiper-container-cube .swiper-slide-shadow-bottom, .swiper-container-cube .swiper-slide-shadow-left, .swiper-container-cube .swiper-slide-shadow-right, .swiper-container-cube .swiper-slide-shadow-top { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden } .swiper-container-cube .swiper-cube-shadow { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; background: #000; opacity: .6; -webkit-filter: blur(50px); filter: blur(50px); z-index: 0 } .swiper-container-flip { overflow: visible } .swiper-container-flip .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1 } .swiper-container-flip .swiper-slide .swiper-slide { pointer-events: none } .swiper-container-flip .swiper-slide-active, .swiper-container-flip .swiper-slide-active .swiper-slide-active { pointer-events: auto } .swiper-container-flip .swiper-slide-shadow-bottom, .swiper-container-flip .swiper-slide-shadow-left, .swiper-container-flip .swiper-slide-shadow-right, .swiper-container-flip .swiper-slide-shadow-top { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden } .swiper-container-coverflow .swiper-wrapper { -ms-perspective: 1200px } h1, h2, h3, h4, h5, h6 { font-family: "微软雅黑", "microsoft yahei", tahoma, arial, "hiragino sans gb", sans-serif } .span_text { width: auto; opacity: 0; display: inline-block; -webkit-animation: flipinx 1s forwards; animation: flipinx 1s forwards; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-backface-visibility: visible !important; backface-visibility: visible !important } header { position: fixed; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; z-index: 9; width: 100%; height: 100px; background: transparent; -webkit-transition: .3s; transition: .3s } header.active { background: white; -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); box-shadow: 0 0 3px rgba(0, 0, 0, 0.3) } header .logo { padding-left: 30px; -webkit-box-sizing: border-box; box-sizing: border-box; display: block } header .nav { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100% } header .nav ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transition: .3s; transition: .3s } header .nav ul.active { opacity: 0; visibility: hidden } header .nav ul li { margin-right: 50px; cursor: pointer } header .nav ul li:hover a { color: #70bc5f } header .nav ul li:hover a:before { width: 100%; left: 0 } header .nav ul li.active a { color: #70bc5f } header .nav ul li.active a:before { width: 100%; left: 0 } header .nav ul li.home a { color: white } header .nav ul li a { position: relative; font-size: 16px; font-weight: 700; color: #333333; -webkit-transition: .3s; transition: .3s } header .nav ul li a:before { position: absolute; content: ''; width: 0%; bottom: -8px; right: 0; height: 4px; background: #70bc5f; -webkit-transition: .3s; transition: .3s } header .nav .menu { width: 100px; height: 100%; background-color: #70bc5f; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center } header .nav .menu .menu_box { cursor: pointer; width: 36px; height: 24px; position: relative } header .nav .menu .menu_box.active div:nth-child(1) { top: 50%; margin-top: -1.5px } header .nav .menu .menu_box.active div:nth-child(2) { opacity: 0 } header .nav .menu .menu_box.active div:nth-child(3) { bottom: 50%; margin-bottom: -1.5px } header .nav .menu .menu_box div { width: 100%; height: 3px; position: absolute; background-color: white; -webkit-transition: .3s; transition: .3s; -webkit-transform-origin: center; transform-origin: center } header .nav .menu .menu_box div.active:first-child { -webkit-transform: rotate(45deg); transform: rotate(45deg) } header .nav .menu .menu_box div.active:last-child { -webkit-transform: rotate(-45deg); transform: rotate(-45deg) } header .nav .menu .menu_box div:nth-child(1) { top: 0 } header .nav .menu .menu_box div:nth-child(2) { top: 50%; margin-top: -1.5px } header .nav .menu .menu_box div:nth-child(3) { bottom: 0 } header .nav .menu .text { display: none; font-size: 16px; color: white } @media screen and (max-width: 860px) { header .logo img { height: 60px } } @media screen and (max-width: 640px) { header .logo img { height: 40px } } .mob_nav { position: fixed; top: 0px; width: 100%; right: 0; height: 100vh; z-index: 9; -webkit-transform: translatex(100%); transform: translatex(100%); -webkit-transition: .3s; transition: .3s } .mob_nav.active { -webkit-transform: translatex(0); transform: translatex(0) } .mob_nav.actives { background: rgba(0, 0, 0, 0.6) } .mob_nav ul { width: 45%; overflow: auto; height: 100%; background: #70bc5f; margin-left: auto; padding: 20px 0; padding-top: 115px; -webkit-box-sizing: border-box; box-sizing: border-box } .mob_nav ul>li { height: auto; overflow: hidden; line-height: 45px; -webkit-transition: .3s; transition: .3s } .mob_nav ul>li.active>ol li { opacity: 1 } .mob_nav ul>li div { padding: 0 50px; -webkit-box-sizing: border-box; box-sizing: border-box } .mob_nav ul>li div a { font-size: 30px; color: white; -webkit-transition: .3s; transition: .3s } .mob_nav ul>li ol { padding: 0 50px; -webkit-box-sizing: border-box; box-sizing: border-box; display: none; } .mob_nav ul>li ol li { height: 30px; line-height: 30px; -webkit-transition: .5s; transition: .5s; opacity: 0 } .mob_nav ul>li ol li:first-child { height: 15px } .mob_nav ul>li ol li:last-child { height: 15px } .mob_nav ul>li ol li a { font-size: 20px; color: white } .mob_nav ul>li ol li a.active { color: #e4322b } .swiper-container { position: relative } .swiper-container .swiper-wrapper .swiper-slide { position: relative; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center } .swiper-container .swiper-wrapper .swiper-slide.slide1 { position: relative } .swiper-container .swiper-wrapper .swiper-slide.slide1 .swiper-wrapper .swiper-slide { position: relative; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center } .swiper-container .swiper-wrapper .swiper-slide.slide1 .swiper-wrapper .swiper-slide .items { width: 567px; height: 567px; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center } .swiper-container .swiper-wrapper .swiper-slide.slide1 .swiper-wrapper .swiper-slide .items.active .dot h1 span { width: auto; -webkit-animation: flipinx 1s forwards; animation: flipinx 1s forwards; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-backface-visibility: visible !important; backface-visibility: visible !important } .swiper-container .swiper-wrapper .swiper-slide.slide1 .swiper-wrapper .swiper-slide .items.active .dot div h2 span { width: auto; -webkit-animation: flipinx 1s forwards; animation: flipinx 1s forwards; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-backface-visibility: visible !important; backface-visibility: visible !important } .swiper-container .swiper-wrapper .swiper-slide.slide1 .swiper-wrapper .swiper-slide .items .dot { width: 529px; height: 529px; background: rgba(112, 188, 95, 0.5); border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; color: white } .swiper-container .swiper-wrapper .swiper-slide.slide1 .swiper-wrapper .swiper-slide .items .dot>span { width: 105px; height: 30px; background: rgba(255, 255, 255, 0.2); font-size: 14px; text-align: center; line-height: 30px; border-radius: 15px } .swiper-container .swiper-wrapper .swiper-slide.slide1 .swiper-wrapper .swiper-slide .items .dot h1 { text-align: center; width: 350px; font-size: 50px; margin: 30px 0; line-height: 1.2 } .swiper-container .swiper-wrapper .swiper-slide.slide1 .swiper-wrapper .swiper-slide .items .dot h1 span { opacity: 0; display: inline-block } .swiper-container .swiper-wrapper .swiper-slide.slide1 .swiper-wrapper .swiper-slide .items .dot div { margin: 30px 0 } .swiper-container .swiper-wrapper .swiper-slide.slide1 .swiper-wrapper .swiper-slide .items .dot div h2 { text-align: center; width: 350px; font-size: 50px } .swiper-container .swiper-wrapper .swiper-slide.slide1 .swiper-wrapper .swiper-slide .items .dot div h2 span { opacity: 0; display: inline-block } .swiper-container .swiper-wrapper .swiper-slide.slide1 .swiper-wrapper .swiper-slide .items .dot p { font-size: 16px; line-height: 1.2 } .swiper-container .swiper-wrapper .swiper-slide.slide1 .swiper-wrapper .swiper-slide .items .line1 { position: absolute; width: 529px; height: 529px; animation: rotes 7s linear infinite; -webkit-animation: rotes 7s linear infinite } .swiper-container .swiper-wrapper .swiper-slide.slide1 .swiper-wrapper .swiper-slide .items .line2 { position: absolute; width: 529px; height: 529px; animation: rote 10s linear infinite; -webkit-animation: rote 10s linear infinite } .swiper-container .swiper-wrapper .swiper-slide.slide1 .swiper-wrapper .swiper-slide .items .line3 { position: absolute; width: 100%; height: 100%; animation: rotes 15s linear infinite; -webkit-animation: rotes 15s linear infinite } .swiper-container .swiper-wrapper .swiper-slide.slide1 ol { display: -webkit-box; display: -ms-flexbox; display: flex } .swiper-container .swiper-wrapper .swiper-slide.slide1 .slide1_pag { width: auto; position: absolute; bottom: 50px; left: 50%; -webkit-transform: translatex(-50%) !important; transform: translatex(-50%) !important; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 5 } .swiper-container .swiper-wrapper .swiper-slide.slide1 .slide1_pag .swiper-pagination-bullet { width: auto; height: auto; background: transparent; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: white; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; cursor: pointer; margin: 0 5px; opacity: 1 } .swiper-container .swiper-wrapper .swiper-slide.slide1 .slide1_pag .swiper-pagination-bullet.swiper-pagination-bullet-active p { color: #70bc5f !important } .swiper-container .swiper-wrapper .swiper-slide.slide1 .slide1_pag .swiper-pagination-bullet.swiper-pagination-bullet-active span { height: 3px } .swiper-container .swiper-wrapper .swiper-slide.slide1 .slide1_pag .swiper-pagination-bullet p { font-size: 14px; line-height: 1.2; -webkit-transition: .3s; transition: .3s } .swiper-container .swiper-wrapper .swiper-slide.slide1 .slide1_pag .swiper-pagination-bullet span { display: block; width: 14px; height: 0; -webkit-transition: .3s; transition: .3s; background: #70bc5f } .swiper-container .swiper-wrapper .swiper-slide.slide1 .slide1_pag li.slide_prev, .swiper-container .swiper-wrapper .swiper-slide.slide1 .slide1_pag li.slide_next { width: 30px; height: 30px; border-radius: 50%; background: white; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: .3s; transition: .3s; cursor: pointer } .swiper-container .swiper-wrapper .swiper-slide.slide1 .slide1_pag li.slide_prev div, .swiper-container .swiper-wrapper .swiper-slide.slide1 .slide1_pag li.slide_next div { color: #70bc5f; -webkit-transition: .3s; transition: .3s } .swiper-container .swiper-wrapper .swiper-slide.slide1 .slide1_pag li.slide_prev:hover, .swiper-container .swiper-wrapper .swiper-slide.slide1 .slide1_pag li.slide_next:hover { background: #70bc5f } .swiper-container .swiper-wrapper .swiper-slide.slide1 .slide1_pag li.slide_prev:hover div, .swiper-container .swiper-wrapper .swiper-slide.slide1 .slide1_pag li.slide_next:hover div { color: white } .swiper-container .swiper-wrapper .swiper-slide.slide1 .slide1_pag li.slide_prev { margin-right: 20px } .swiper-container .swiper-wrapper .swiper-slide.slide1 .slide1_pag li.slide_next { margin-left: 20px } .swiper-container .swiper-wrapper .swiper-slide.slide3 { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column } .swiper-container .swiper-wrapper .swiper-slide.slide3.active .prd, .swiper-container .swiper-wrapper .swiper-slide.slide3.active .prd_item { visibility: visible; opacity: 1; -webkit-transform: translate(0); transform: translate(0) } .swiper-container .swiper-wrapper .swiper-slide.slide3 .prd { position: relative; overflow: hidden; margin: 0 auto; visibility: hidden; opacity: 0; -webkit-transform: translatey(100px); transform: translatey(100px); -webkit-transition: .3s; transition: .3s } .swiper-container .swiper-wrapper .swiper-slide.slide3 .prd .swiper-wrapper .swiper-slide .prd_box { position: relative; width: 810px; padding: 50px 54px 0 140px; -webkit-box-sizing: border-box; box-sizing: border-box; background: white; margin-left: 70px } .swiper-container .swiper-wrapper .swiper-slide.slide3 .prd .swiper-wrapper .swiper-slide .prd_box .prd_logo { position: absolute; top: 50%; -webkit-transform: translatey(-50%); transform: translatey(-50%); left: -70px; z-index: 3 } .swiper-container .swiper-wrapper .swiper-slide.slide3 .prd .swiper-wrapper .swiper-slide .prd_box .prd_logo img { width: 100% } .swiper-container .swiper-wrapper .swiper-slide.slide3 .prd .swiper-wrapper .swiper-slide .prd_box h5 { font-size: 30px; color: #333; margin-bottom: 10px } .swiper-container .swiper-wrapper .swiper-slide.slide3 .prd .swiper-wrapper .swiper-slide .prd_box p { color: #666 } .swiper-container .swiper-wrapper .swiper-slide.slide3 .prd .swiper-wrapper .swiper-slide .prd_box a { margin: 40px 0; margin-bottom: 30px; width: 105px; height: 30px; background: rgba(112, 188, 95, 0.7); display: block; font-size: 14px; color: white; line-height: 30px; text-align: center; border-radius: 30px; -webkit-transition: .3s; transition: .3s } .swiper-container .swiper-wrapper .swiper-slide.slide3 .prd .swiper-wrapper .swiper-slide .prd_box a:hover section { width: 100%; background: #70bc5f } .swiper-container .swiper-wrapper .swiper-slide.slide3 .prd .swiper-wrapper .swiper-slide .prd_box h2 { white-space: nowrap; font-size: 86px; text-transform: uppercase; color: rgba(112, 188, 95, 0.05) } .swiper-container .swiper-wrapper .swiper-slide.slide3 .prd .swiper-button-prev, .swiper-container .swiper-wrapper .swiper-slide.slide3 .prd .swiper-button-next { width: 46px; height: 46px; cursor: pointer; border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: white; -webkit-transition: .3s; transition: .3s } .swiper-container .swiper-wrapper .swiper-slide.slide3 .prd .swiper-button-prev:hover, .swiper-container .swiper-wrapper .swiper-slide.slide3 .prd .swiper-button-next:hover { background: #70bc5f } .swiper-container .swiper-wrapper .swiper-slide.slide3 .prd .swiper-button-prev:hover span, .swiper-container .swiper-wrapper .swiper-slide.slide3 .prd .swiper-button-next:hover span { color: white } .swiper-container .swiper-wrapper .swiper-slide.slide3 .prd .swiper-button-prev span, .swiper-container .swiper-wrapper .swiper-slide.slide3 .prd .swiper-button-next span { font-size: 12px; color: #70bc5f; -webkit-transition: .3s; transition: .3s; font-weight: 700 } .swiper-container .swiper-wrapper .swiper-slide.slide3 .prd_item { width: 880px; margin-left: 70px; margin: 0 auto; margin-top: 35px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; visibility: hidden; opacity: 0; -webkit-transform: translatey(100px); transform: translatey(100px); -webkit-transition: .3s; transition: .3s; -webkit-transition-delay: .3s; transition-delay: .3s } .swiper-container .swiper-wrapper .swiper-slide.slide3 .prd_item .prd_prev, .swiper-container .swiper-wrapper .swiper-slide.slide3 .prd_item .prd_next { font-size: 20px; color: white; cursor: pointer; -webkit-transition: .3s; transition: .3s } .swiper-container .swiper-wrapper .swiper-slide.slide3 .prd_item .prd_prev:hover, .swiper-container .swiper-wrapper .swiper-slide.slide3 .prd_item .prd_next:hover { color: #70bc5f } .swiper-container .swiper-wrapper .swiper-slide.slide3 .prd_item .prd_prev { margin-right: 30px } .swiper-container .swiper-wrapper .swiper-slide.slide3 .prd_item .prd_next { margin-left: 30px } .swiper-container .swiper-wrapper .swiper-slide.slide3 .prd_item .prd_items { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; position: relative; margin: 0 auto } .swiper-container .swiper-wrapper .swiper-slide.slide3 .prd_item .prd_items .swiper-wrapper { width: 100% } .swiper-container .swiper-wrapper .swiper-slide.slide3 .prd_item .prd_items .swiper-wrapper .swiper-slide { text-align: center } .swiper-container .swiper-wrapper .swiper-slide.slide3 .prd_item .prd_items .swiper-wrapper .swiper-slide.swiper-slide-thumb-active .item { background: #70bc5f } .swiper-container .swiper-wrapper .swiper-slide.slide3 .prd_item .prd_items .swiper-wrapper .swiper-slide.swiper-slide-thumb-active .item span { color: white } .swiper-container .swiper-wrapper .swiper-slide.slide3 .prd_item .prd_items .swiper-wrapper .swiper-slide .item { width: 62px; height: 62px; border-radius: 50%; background: white; -webkit-transition: .3s; transition: .3s; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; cursor: pointer } .swiper-container .swiper-wrapper .swiper-slide.slide3 .prd_item .prd_items .swiper-wrapper .swiper-slide .item:hover { background: #70bc5f } .swiper-container .swiper-wrapper .swiper-slide.slide3 .prd_item .prd_items .swiper-wrapper .swiper-slide .item:hover span { color: white } .swiper-container .swiper-wrapper .swiper-slide.slide3 .prd_item .prd_items .swiper-wrapper .swiper-slide .item span { font-size: 30px; color: #70bc5f; -webkit-transition: .3s; transition: .3s } .swiper-container .swiper-wrapper .swiper-slide.slide3 .prd_item .prd_items ul { width: 810px; -webkit-transform: translatex(100px); transform: translatex(100px); background: red; margin: 0 auto } .swiper-container .swiper-wrapper .swiper-slide.slide4.active .w1200 { opacity: 1; visibility: visible } .swiper-container .swiper-wrapper .swiper-slide.slide4 .w1200 { visibility: hidden; opacity: 0; -webkit-transition: .5s; transition: .5s } .swiper-container .swiper-wrapper .swiper-slide.slide4 .w1200 .hezuo { position: relative } .swiper-container .swiper-wrapper .swiper-slide.slide4 .w1200 .hezuo .swiper-wrapper .swiper-slide .hezuo_box { position: relative; margin-left: 50px; margin-right: auto; width: 930px; height: 450px; background: white; padding: 55px 0 55px 105px; -webkit-box-sizing: border-box; box-sizing: border-box } .swiper-container .swiper-wrapper .swiper-slide.slide4 .w1200 .hezuo .swiper-wrapper .swiper-slide .hezuo_box .left { width: 560px } .swiper-container .swiper-wrapper .swiper-slide.slide4 .w1200 .hezuo .swiper-wrapper .swiper-slide .hezuo_box .left span { width: 105px; height: 30px; background: rgba(112, 188, 95, 0.2); font-size: 14px; color: #70bc5f; text-align: center; line-height: 30px; border-radius: 15px; display: block } .swiper-container .swiper-wrapper .swiper-slide.slide4 .w1200 .hezuo .swiper-wrapper .swiper-slide .hezuo_box .left h5 { font-size: 30px; color: #333; margin-top: 20px; margin-bottom: 15px } .swiper-container .swiper-wrapper .swiper-slide.slide4 .w1200 .hezuo .swiper-wrapper .swiper-slide .hezuo_box .left p { font-size: 14px; color: #666666 } .swiper-container .swiper-wrapper .swiper-slide.slide4 .w1200 .hezuo .swiper-wrapper .swiper-slide .hezuo_box .left a { margin-top: 50px; width: 160px; height: 50px; background: rgba(112, 188, 95, 0.7); display: block; font-size: 14px; color: white; line-height: 50px; text-align: center; border-radius: 50px; -webkit-transition: .3s; transition: .3s } .swiper-container .swiper-wrapper .swiper-slide.slide4 .w1200 .hezuo .swiper-wrapper .swiper-slide .hezuo_box .left a:hover section { width: 100%; background: #70bc5f } .swiper-container .swiper-wrapper .swiper-slide.slide4 .w1200 .hezuo .swiper-wrapper .swiper-slide .hezuo_box .right { position: absolute; right: -215px; top: 50%; -webkit-transform: translatey(-50%); transform: translatey(-50%) } .swiper-container .swiper-wrapper .swiper-slide.slide4 .w1200 .hezuo .swiper-wrapper .swiper-slide .hezuo_box .right img { display: block; border-radius: 50%; border: 8px solid #70bc5f; -webkit-box-sizing: border-box; box-sizing: border-box } .swiper-container .swiper-wrapper .swiper-slide.slide4 .w1200 .hezuo .swiper-button-prev, .swiper-container .swiper-wrapper .swiper-slide.slide4 .w1200 .hezuo .swiper-button-next { width: 50px; height: 50px; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: #f1f1f1; -webkit-transition: .3s; transition: .3s } .swiper-container .swiper-wrapper .swiper-slide.slide4 .w1200 .hezuo .swiper-button-prev:hover, .swiper-container .swiper-wrapper .swiper-slide.slide4 .w1200 .hezuo .swiper-button-next:hover { background: #70bc5f } .swiper-container .swiper-wrapper .swiper-slide.slide4 .w1200 .hezuo .swiper-button-prev span, .swiper-container .swiper-wrapper .swiper-slide.slide4 .w1200 .hezuo .swiper-button-next span { font-size: 18px; color: white; -webkit-transition: .3s; transition: .3s; font-weight: 700 } .swiper-container .swiper-wrapper .swiper-slide.slide4 .w1200 .hezuo .swiper-button-prev { left: 0 } .swiper-container .swiper-wrapper .swiper-slide.slide4 .w1200 .hezuo .swiper-button-next { left: 50px } .swiper-container .swiper-wrapper .swiper-slide.slide5 { height: auto; background: #222222 } .swiper-container .swiper-wrapper .swiper-slide .home_about { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center } .swiper-container .swiper-wrapper .swiper-slide .home_about.active .left, .swiper-container .swiper-wrapper .swiper-slide .home_about.active .right { opacity: 1; visibility: visible; -webkit-transform: translate(0); transform: translate(0) } .swiper-container .swiper-wrapper .swiper-slide .home_about .left { width: 780px; color: white; visibility: hidden; opacity: 0; -webkit-transform: translatex(-100px); transform: translatex(-100px); -webkit-transition: .3s; transition: .3s } .swiper-container .swiper-wrapper .swiper-slide .home_about .left span { display: block; width: 105px; height: 30px; background: rgba(255, 255, 255, 0.2); font-size: 14px; text-align: center; line-height: 30px; border-radius: 15px } .swiper-container .swiper-wrapper .swiper-slide .home_about .left h1 { margin-top: 30px; margin-bottom: 20px; font-size: 50px } .swiper-container .swiper-wrapper .swiper-slide .home_about .left p { font-size: 14px; color: white } .swiper-container .swiper-wrapper .swiper-slide .home_about .left a { margin-top: 80px; width: 160px; height: 50px; background: rgba(112, 188, 95, 0.7); display: block; font-size: 14px; color: white; line-height: 50px; text-align: center; border-radius: 50px; -webkit-transition: .3s; transition: .3s } .swiper-container .swiper-wrapper .swiper-slide .home_about .left a:hover section { width: 100%; background: #70bc5f } .swiper-container .swiper-wrapper .swiper-slide .home_about .right { visibility: hidden; opacity: 0; -webkit-transform: translatex(100px); transform: translatex(100px); -webkit-transition: .3s; transition: .3s } .swiper-container .swiper-wrapper .swiper-slide .home_news.active .home_news_head, .swiper-container .swiper-wrapper .swiper-slide .home_news.active .home_news_box { opacity: 1; visibility: visible; -webkit-transform: translate(0); transform: translate(0) } .swiper-container .swiper-wrapper .swiper-slide .home_news .home_news_head { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; opacity: 0; visibility: hidden; -webkit-transform: translatey(100px); transform: translatey(100px); -webkit-transition: .3s; transition: .3s } .swiper-container .swiper-wrapper .swiper-slide .home_news .home_news_head .left h1 { font-size: 36px; color: white } .swiper-container .swiper-wrapper .swiper-slide .home_news .home_news_head .right a { display: block; width: 105px; height: 30px; background: rgba(255, 255, 255, 0.2); font-size: 14px; color: white; text-align: center; line-height: 30px; border-radius: 15px; -webkit-transition: .3s; transition: .3s } .swiper-container .swiper-wrapper .swiper-slide .home_news .home_news_head .right a:hover { background: #70bc5f } .swiper-container .swiper-wrapper .swiper-slide .home_news .home_news_box { opacity: 0; visibility: hidden; -webkit-transform: translatey(100px); transform: translatey(100px); -webkit-transition: .3s; transition: .3s; -webkit-transition-delay: .3s; transition-delay: .3s; margin-top: 40px; background: white; padding: 42px; padding-bottom: 0 } .swiper-container .swiper-wrapper .swiper-slide .home_news .home_news_box .first_news { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer } .swiper-container .swiper-wrapper .swiper-slide .home_news .home_news_box .first_news:hover .first_left img { -webkit-transform: scale(1.1); transform: scale(1.1) } .swiper-container .swiper-wrapper .swiper-slide .home_news .home_news_box .first_news:hover .first_right h5 { color: #70bc5f } .swiper-container .swiper-wrapper .swiper-slide .home_news .home_news_box .first_news:hover .first_right a span { color: #70bc5f } .swiper-container .swiper-wrapper .swiper-slide .home_news .home_news_box .first_news .first_left { margin-right: 40px; overflow: hidden } .swiper-container .swiper-wrapper .swiper-slide .home_news .home_news_box .first_news .first_left img { -webkit-transition: .3s; transition: .3s } .swiper-container .swiper-wrapper .swiper-slide .home_news .home_news_box .first_news .first_right { -webkit-box-flex: 1; -ms-flex: 1; flex: 1 } .swiper-container .swiper-wrapper .swiper-slide .home_news .home_news_box .first_news .first_right h5 { font-size: 24px; color: #333333; -webkit-transition: .3s; transition: .3s; margin-top: 10px; margin-bottom: 15px } .swiper-container .swiper-wrapper .swiper-slide .home_news .home_news_box .first_news .first_right p { color: #999999; margin-bottom: 40px; overflow: hidden; height: 50px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2 } .swiper-container .swiper-wrapper .swiper-slide .home_news .home_news_box .first_news .first_right div span { font-size: 12px; color: #cccccc } .swiper-container .swiper-wrapper .swiper-slide .home_news .home_news_box .first_news .first_right div span:last-child { color: #999 } .swiper-container .swiper-wrapper .swiper-slide .home_news .home_news_box .first_news .first_right a { font-size: 0 } .swiper-container .swiper-wrapper .swiper-slide .home_news .home_news_box .first_news .first_right a span { font-size: 14px; color: #999999; -webkit-transition: .3s; transition: .3s } .swiper-container .swiper-wrapper .swiper-slide .home_news .home_news_box .other_news { margin-top: 28px; padding: 26px 0 36px; border-top: 1px solid rgba(0, 0, 0, 0.1); display: -webkit-box; display: -ms-flexbox; display: flex } .swiper-container .swiper-wrapper .swiper-slide .home_news .home_news_box .other_news .item { width: 50%; border-right: 1px solid rgba(0, 0, 0, 0.1) } .swiper-container .swiper-wrapper .swiper-slide .home_news .home_news_box .other_news .item:last-child { border: none } .swiper-container .swiper-wrapper .swiper-slide .home_news .home_news_box .other_news .item:last-child ul li a { margin-left: 40px } .swiper-container .swiper-wrapper .swiper-slide .home_news .home_news_box .other_news .item:last-child ul li span { width: auto } .swiper-container .swiper-wrapper .swiper-slide .home_news .home_news_box .other_news .item ul li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between } .swiper-container .swiper-wrapper .swiper-slide .home_news .home_news_box .other_news .item ul li:nth-child(2n) { padding: 12px 0 } .swiper-container .swiper-wrapper .swiper-slide .home_news .home_news_box .other_news .item ul li a { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-size: 14px; color: #333; -webkit-transition: .3s; transition: .3s } .swiper-container .swiper-wrapper .swiper-slide .home_news .home_news_box .other_news .item ul li a:hover { color: #70bc5f } .swiper-container .swiper-wrapper .swiper-slide .home_news .home_news_box .other_news .item ul li span { width: 70px; text-align: left; margin-left: 35px; font-size: 12px; color: #999 } .swiper-container .swiper-wrapper .swiper-slide .img { position: absolute; width: 100%; height: 100%; z-index: -1 } .home_left_text { position: absolute; top: 0; left: 30px; height: 100%; width: 30px; -webkit-transition: 1s; transition: 1s; z-index: 3; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out } .home_left_text p { position: absolute; left: 0; top: 50%; -webkit-transform: translatey(-50%); transform: translatey(-50%); font-size: 12px; color: white; white-space: nowrap; letter-spacing: 10px; -webkit-writing-mode: vertical-lr; -ms-writing-mode: tb-lr; writing-mode: vertical-lr; font-family: arial; z-index: 3 } .home_right_box { position: absolute; right: 0; top: 0; width: 100px; height: 100%; -webkit-transition: 1s; transition: 1s; background: rgba(112, 188, 95, 0.5); border-left: 1px solid rgba(255, 255, 255, 0.5); z-index: 3 } .home_right_box ol { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100% } .home_right_box ol li { width: 100%; position: relative; height: 70px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; cursor: pointer } .home_right_box ol li:hover .dot { background: #70bc5f } .home_right_box ol li:hover .text { color: white; font-weight: 700 } .home_right_box ol li:hover .text:after { width: 100%; opacity: 1; left: 0 } .home_right_box ol li .dot { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 10px; height: 10px; border-radius: 50%; background: white; -webkit-transition: .5s; transition: .5s } .home_right_box ol li .dot.active { visibility: hidden; opacity: 0 } .home_right_box ol li .text { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: white; white-space: nowrap; font-size: 14px; -webkit-transition: .5s; transition: .5s } .home_right_box ol li .text:after { content: ''; width: 0%; height: 2px; background: white; position: absolute; right: 0; opacity: 0; bottom: -3px; -webkit-transition: .3s; transition: .3s } .home_right_box ol li .text.active { font-weight: 700 } .home_right_box ol li .text.active:after { width: 100%; opacity: 1; left: 0 } .home_right_box .shubiao { position: absolute; left: 50%; -webkit-transform: translatex(-50%); transform: translatex(-50%); bottom: 25px; -webkit-transition: .3s; transition: .3s } .home_right_box .shubiao.active { visibility: hidden; opacity: 0 } .home_right_box .shubiao img { margin: auto; -webkit-animation: home_shubiao 1.5s infinite ease-in-out; animation: home_shubiao 1.5s infinite ease-in-out } .home_right_box .shubiao p { margin-top: 27px; width: 30px; line-height: 1.2; color: white; font-size: 14px } .home_right_box .fanhui { position: absolute; left: 50%; -webkit-transform: translatex(-50%); transform: translatex(-50%); bottom: 25px; cursor: pointer; visibility: hidden; opacity: 0; -webkit-transition: .3s; transition: .3s } .home_right_box .fanhui.active { opacity: 1; visibility: visible } .home_right_box .fanhui:hover span { color: #70bc5f } .home_right_box .fanhui:hover p { color: #70bc5f } .home_right_box .fanhui span { font-size: 20px; color: white; display: block; margin: auto; -webkit-transition: .3s; transition: .3s } .home_right_box .fanhui p { margin-top: 10px; width: 30px; line-height: 1.2; color: white; font-size: 14px; -webkit-transition: .3s; transition: .3s } .count li { width: 170px; height: 110px; background: white; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: #70bc5f } .count li.active { background: #70bc5f; color: white } .count li div p { font-size: 14px; text-align: left; line-height: 1.5 } .count li div span { font-size: 40px; font-weight: lighter } .count li div div span:last-child { font-size: 14px } .count li div div span.counts { font-size: 40px } footer { width: 100%; height: auto; background: #222; padding: 28px 0; -webkit-box-sizing: border-box; box-sizing: border-box } footer .w1200 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between } footer .w1200 ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center } footer .w1200 ul li.fj span { margin: 0 7px } footer .w1200 ul li span { color: #999; font-size: 12px } footer .w1200 ul li a { margin: 0 4px; font-size: 12px; color: rgba(255, 255, 255, 0.5); -webkit-transition: .3s; transition: .3s } footer .w1200 ul li a:hover { color: #70bc5f } footer .w1200 ol { display: -webkit-box; display: -ms-flexbox; display: flex } footer .w1200 ol li span { color: #555; font-size: 12px } footer .w1200 ol li a { font-size: 12px; color: #555555; margin-left: 10px; -webkit-transition: .3s; transition: .3s } footer .w1200 ol li a:hover { color: #70bc5f } .nav_bg { position: fixed; visibility: hidden; opacity: 0; top: 0; left: 0; z-index: 8; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: .3s; transition: .3s; -webkit-transform: translatex(100%); transform: translatex(100%) } .nav_bg.active { visibility: visible; opacity: 1; -webkit-transform: translatex(0); transform: translatex(0) } .nav_bg .w1200 ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around } .nav_bg .w1200 ul li h5 { color: white; font-size: 20px; margin-bottom: 2px } .nav_bg .w1200 ul li h6 { text-transform: uppercase; font-size: 20px; color: rgba(255, 255, 255, 0.2); font-weight: 300 } .nav_bg .w1200 ul li ol { margin-top: 25px } .nav_bg .w1200 ul li ol li { padding: 5px 0 } .nav_bg .w1200 ul li ol li a { position: relative; padding: 4px 0; font-size: 14px; color: white } .nav_bg .w1200 ul li ol li a::before { position: absolute; right: 0; bottom: 0; content: ''; width: 0; height: 2px; background: white; -webkit-transition: .3s; transition: .3s } .nav_bg .w1200 ul li ol li a:hover::before { width: 100%; left: 0 } .head { width: 100%; overflow: hidden; height: 790px } .head.honors { height: 500px } .head.guihua { height: 960px } .head.youshi { height: auto } .head .w1200 { position: relative; padding-top: 165px; -webkit-box-sizing: border-box; box-sizing: border-box; height: 100% } .head .w1200 .subnav { width: 100% } .head .w1200 .subnav>ul { display: -webkit-box; display: -ms-flexbox; display: flex } .head .w1200 .subnav>ul li { position: relative; cursor: pointer; margin-right: 30px } .head .w1200 .subnav>ul li:hover h6 { color: #999999 } .head .w1200 .subnav>ul li:hover .dot { background: #999 } .head .w1200 .subnav>ul li.active h6 { color: #999999 } .head .w1200 .subnav>ul li.active .dot { background: #999 } .head .w1200 .subnav>ul li:last-child { margin-right: 0 } .head .w1200 .subnav>ul li h6 { margin-bottom: 8px; font-size: 12px; color: #d4c9c9; -webkit-transition: .3s; transition: .3s } .head .w1200 .subnav>ul li .dot { position: relative; width: 10px; height: 10px; border-radius: 50%; -webkit-transition: .3s; transition: .3s; background: #d4c9c9 } .head .w1200 .subnav>ul li .dot:after { position: absolute; content: ''; left: 100%; top: 50%; -webkit-transform: translatey(-50%); transform: translatey(-50%); width: 2000px; height: 1px; background: #d4c9c9 } .head .w1200 .spans { font-size: 12px; color: #999999; margin-top: 105px; display: block; margin-bottom: 15px } .head .w1200 .yfzx { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 60px } .head .w1200 .yfzx .left { width: 685px } .head .w1200 .yfzx .left h5 { font-size: 36px; color: #333333; margin-bottom: 36px } .head .w1200 .yfzx .left p { color: #666666 } .head .w1200 .yfzx .right img { border: 9px solid white; -webkit-box-sizing: border-box; box-sizing: border-box } .head .w1200 .jianjie { margin-top: 105px; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between } .head .w1200 .jianjie .left { width: 700px } .head .w1200 .jianjie .left span { font-size: 14px; color: #999999 } .head .w1200 .jianjie .left h5 { font-size: 36px; color: #333333; margin-top: 15px; margin-bottom: 30px } .head .w1200 .head_honor { margin-top: 105px; width: 100% } .head .w1200 .head_honor span { font-size: 12px; color: #999999 } .head .w1200 .head_honor h5 { font-size: 36px; color: #333333; margin-top: 15px } .head .w1200 .head_honor .chanpin { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 85px; margin-top: 60px } .head .w1200 .head_honor .chanpin .cp_prev, .head .w1200 .head_honor .chanpin .cp_next { margin-top: 30px; cursor: pointer } .head .w1200 .head_honor .chanpin .cp_prev:hover span, .head .w1200 .head_honor .chanpin .cp_next:hover span { color: #70bc5f } .head .w1200 .head_honor .chanpin .cp_prev span, .head .w1200 .head_honor .chanpin .cp_next span { color: #d4c9c9; font-size: 18px; -webkit-transition: .3s; transition: .3s } .head .w1200 .head_honor .chanpin .cp_prev { margin-right: 66px } .head .w1200 .head_honor .chanpin .cp_next { margin-left: 66px } .head .w1200 .head_honor .chanpin .cp { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden } .head .w1200 .head_honor .chanpin .cp .swiper-wrapper .swiper-slide { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; cursor: pointer } .head .w1200 .head_honor .chanpin .cp .swiper-wrapper .swiper-slide.active .item { background: #70bc5f } .head .w1200 .head_honor .chanpin .cp .swiper-wrapper .swiper-slide.active .item span { color: white } .head .w1200 .head_honor .chanpin .cp .swiper-wrapper .swiper-slide .item { width: 82px; height: 82px; border-radius: 50%; background: white; -webkit-transition: .3s; transition: .3s; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; cursor: pointer } .head .w1200 .head_honor .chanpin .cp .swiper-wrapper .swiper-slide .item:hover { background: #70bc5f } .head .w1200 .head_honor .chanpin .cp .swiper-wrapper .swiper-slide .item:hover span { color: white } .head .w1200 .head_honor .chanpin .cp .swiper-wrapper .swiper-slide .item span { font-size: 30px; color: #70bc5f; -webkit-transition: .3s; transition: .3s } .head .w1200 .head_honor .chanpin .cp .swiper-wrapper .swiper-slide p { width: 100%; font-size: 12px; color: #999999; margin-top: 17px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; text-align: center } .head .w1200 .head_honor .gylc { margin-top: 60px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between } .head .w1200 .head_honor .gylc li { cursor: pointer } .head .w1200 .head_honor .gylc li:hover div { background: #70bc5f } .head .w1200 .head_honor .gylc li:hover div div { color: white } .head .w1200 .head_honor .gylc li.active div { background: #70bc5f } .head .w1200 .head_honor .gylc li.active div div { color: white } .head .w1200 .head_honor .gylc li.active div span { visibility: visible; opacity: 1 } .head .w1200 .head_honor .gylc li div { position: relative; width: 140px; height: 140px; border-radius: 50%; background: white; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: .3s; transition: .3s } .head .w1200 .head_honor .gylc li div div { font-size: 38px; color: #767676; -webkit-transition: .3s; transition: .3s } .head .w1200 .head_honor .gylc li div span { position: absolute; left: 50%; -webkit-transform: translatex(-50%); transform: translatex(-50%); bottom: -40px; z-index: 3; color: white; font-size: 18px; visibility: hidden; opacity: 0; -webkit-transition: .3s; transition: .3s } .head .w1200 .head_honor .gylcbox { margin-top: 37px; margin-bottom: 90px; position: relative; height: 300px } .head .w1200 .head_honor .gylcbox .item { position: absolute; padding: 34px 55px 40px; background: white; visibility: visible; opacity: 0; -webkit-transition: .3s; transition: .3s } .head .w1200 .head_honor .gylcbox .item.active { visibility: visible; opacity: 1 } .head .w1200 .head_honor .gylcbox .item h6 { color: #999999; font-size: 24px } .head .w1200 .head_honor .gylcbox .item p { height: 50px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: #666666 } .head .w1200 .head_guihua { position: relative; margin-top: 105px; padding-bottom: 60px; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between } .head .w1200 .head_guihua .left { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; position: relative } .head .w1200 .head_guihua .left span { font-size: 12px; color: #999999 } .head .w1200 .head_guihua .left h5 { font-size: 36px; color: #333333; margin-top: 15px } .head .w1200 .head_guihua .left .box { width: 556px; overflow: hidden; position: absolute; left: 0; bottom: 50px; background: white; padding: 64px 73px 0px; z-index: 3 } .head .w1200 .head_guihua .left .box h4 { font-size: 70px; white-space: nowrap; text-transform: uppercase; color: rgba(112, 188, 95, 0.05) } .head .w1200 .head_guihua .left .box p { color: #666666 } .head .w1200 .head_guihua .right { width: 830px } .head .w1200 .head_guihua .right .guihuas { position: relative } .head .w1200 .head_guihua .right .guihuas .swiper-button-prev, .head .w1200 .head_guihua .right .guihuas .swiper-button-next { width: 50px; height: 50px; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: white; -webkit-transition: .3s; transition: .3s; top: calc(100% - 50px); margin-top: 0 } .head .w1200 .head_guihua .right .guihuas .swiper-button-prev:hover, .head .w1200 .head_guihua .right .guihuas .swiper-button-next:hover { background: #70bc5f } .head .w1200 .head_guihua .right .guihuas .swiper-button-prev:hover span, .head .w1200 .head_guihua .right .guihuas .swiper-button-next:hover span { color: white } .head .w1200 .head_guihua .right .guihuas .swiper-button-prev span, .head .w1200 .head_guihua .right .guihuas .swiper-button-next span { font-size: 16px; color: #70bc5f; -webkit-transition: .3s; transition: .3s; font-weight: 700 } .head .w1200 .head_guihua .right .guihuas .swiper-button-prev { left: -50px } .head .w1200 .head_guihua .right .guihuas .swiper-button-next { left: 0 } .first_jianjie { width: 100%; height: 680px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative } .first_jianjie .first { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between } .first_jianjie .first .img { position: relative; z-index: 2; border: 8px solid #70bc5f; border-radius: 50%; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden } .first_jianjie .first .img img { -webkit-transform: scale(1.05); transform: scale(1.05) } .first_jianjie .first .text { position: relative; z-index: 2; margin-left: 60px; margin-right: 45px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1 } .first_jianjie .first .text div { padding-top: 66px } .first_jianjie .first .text div:last-child { margin-bottom: 0 } .first_jianjie .first .text div h6 { font-size: 24px; color: white } .first_jianjie .first .text div h6 span { margin-left: 1px; font-weight: 700; color: white } .first_jianjie .first .text div p { color: #666 } .jianjie_item { width: 100% } .jianjie_item ul li { display: -webkit-box; display: -ms-flexbox; display: flex; cursor: pointer } .jianjie_item ul li:nth-child(even) { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse } .jianjie_item ul li:nth-child(even) .left { background: white } .jianjie_item ul li:hover .left h5 { color: #70bc5f } .jianjie_item ul li:hover .right img { -webkit-transform: scale(1.1); transform: scale(1.1) } .jianjie_item ul li .left { position: relative; width: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: #f1f1f1; padding: 0 190px; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden } .jianjie_item ul li .left h5 { position: relative; z-index: 3; font-size: 24px; color: #333333; margin-bottom: 28px; -webkit-transition: .3s; transition: .3s } .jianjie_item ul li .left p { position: relative; z-index: 3; color: #666 } .jianjie_item ul li .right { overflow: hidden; width: 50% } .jianjie_item ul li .right img { -webkit-transition: .3s; transition: .3s; display: block; width: 100%; height: auto } .green_dot { position: absolute; z-index: 1 } .green_dot.dot1 { left: 145px; bottom: 45px; z-index: 0 } .green_dot.dot2 { left: -45px; bottom: -120px } .green_dot.dot3 { right: 80px; bottom: 100px } .green_dot.dot4 { right: -100px; bottom: -100px } .green_dot.dot5 { left: 20px; top: 95px } .green_dot.dot6 { right: 50px; bottom: 115px } .green_dot.dot7 { right: 100px; bottom: -77px } .honor { padding: 70px 0 87px } .honor.honor1 { background: #f1f1f1 } .honor h5 { font-size: 36px; color: #333; text-align: center; margin-bottom: 40px } .honor>a { margin: 0 auto; width: 160px; height: 50px; background: rgba(112, 188, 95, 0.7); display: block; font-size: 14px; color: white; line-height: 50px; text-align: center; border-radius: 50px; -webkit-transition: .3s; transition: .3s } .honor>a:hover section { width: 100%; background: #70bc5f } .honor .demo-gallery { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap } .honor .demo-gallery .item { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 49%; height: 340px; cursor: pointer; margin-bottom: 40px; overflow: hidden } .honor .demo-gallery .item:hover .text { visibility: hidden; opacity: 0 } .honor .demo-gallery .item .text { visibility: visible; opacity: 1; -webkit-transition: .5s; transition: .5s; position: absolute; width: 100%; bottom: 0; padding: 40px 87px; -webkit-box-sizing: border-box; box-sizing: border-box; z-index: 4; text-align: center; background: white } .honor .demo-gallery .item .text h4 { font-size: 12px; color: #999999 } .honor .demo-gallery .item .text h5 { font-size: 20px; color: #666666; margin-bottom: 11px } .honor .demo-gallery .item .text p { border-top: 1px solid rgba(0, 0, 0, 0.1); padding-top: 20px; font-size: 12px; color: #999999 } .honor .demo-gallery .item>a { position: absolute; width: 100%; height: 100%; z-index: 2 } .honor .demo-gallery .item .img { position: absolute; right: 24px; bottom: 92px; z-index: 3 } .honor .demo-gallery .item .img:hover img { -webkit-transform: scale(1.1); transform: scale(1.1) } .honor .demo-gallery .item .img.img1 { bottom: 24px } .honor .demo-gallery .item .img img { -webkit-transition: .3s; transition: .3s } .honor .pswp__bg { background: rgba(0, 0, 0, 0.7) } .honor .pswp__bg .pswp__top-bar { background-color: transparent } .honor .pswp__bg .pswp__top-bar .pswp__button--close { display: none; width: 60px; height: 60px; border-radius: 50%; top: 0; background: #c9b194; font-size: 14px; color: white; background-position: 0 0; opacity: 1 } .honor .pswp__bg .pswp__caption { margin-top: 20px; background: transparent; bottom: 0 } .honor .pswp__bg .pswp__caption small { display: none } .honor .pswp__bg .pswp__caption__center { min-width: auto; margin: auto !important; -webkit-transition: .3s; transition: .3s; font-size: 14px; color: #747474; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 10px 20px; background: white; white-space: nowrap; -webkit-box-sizing: border-box; box-sizing: border-box; display: none } .honor .pswp__bg .pswp__button { width: 30px; height: 30px; background: transparent } .honor .pswp__bg .pswp__button--arrow--left, .honor .pswp__bg .pswp__button--arrow--right { width: 46px; height: 46px; background: white; border-radius: 50%; -webkit-transition: .3s; transition: .3s; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 20px; color: #70bc5f; left: 50%; opacity: 1; -webkit-transform: translatex(-50%); transform: translatex(-50%) } .honor .pswp__bg .pswp__button--arrow--left:hover, .honor .pswp__bg .pswp__button--arrow--right:hover { background: #70bc5f; color: white } .honor .pswp__bg .pswp__button--arrow--left { margin-left: -600px } .honor .pswp__bg .pswp__button--arrow--right { margin-left: 600px } .honor .pswp__bg .pswp__button--arrow--left:before { width: 66px; height: 66px; background: transparent } .honor .pswp__bg .pswp__button--arrow--right:before { width: 66px; height: 66px; background: transparent } .news { padding: 80px 0; padding-bottom: 0 } .news .w1200 ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap } .news .w1200 ul li { position: relative; width: 32%; cursor: pointer; margin-bottom: 40px } .news .w1200 ul li:last-child:nth-child(3n-1) { margin-right: calc(32% 4% / 2) } .news .w1200 ul li:hover .top .img { visibility: visible; opacity: 1 } .news .w1200 ul li .top { position: relative } .news .w1200 ul li .top .img { visibility: hidden; opacity: 0; -webkit-transition: .3s; transition: .3s; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.5); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center } .news .w1200 ul li .bot { padding: 30px 0 36px; border-bottom: 1px solid #f1f1f1 } .news .w1200 ul li .bot div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center } .news .w1200 ul li .bot div span { line-height: 1; font-size: 14px; color: #999999 } .news .w1200 ul li .bot div span:nth-child(2) { margin: 0 7px; color: #f1f1f1 } .news .w1200 ul li .bot p { margin-top: 15px; font-size: 24px; line-height: 1.2; color: #333333; height: 60px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2 } .fy { padding-bottom: 60px } .fy ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center } .fy ul li { margin: 0 6px } .fy ul li a { display: block; font-size: 22px; position: relative; color: #333333; -webkit-transition: .3s; transition: .3s } .fy ul li a:hover { color: #70bc5f } .fy ul li a:hover:before { left: 0; width: 100% } .fy ul li a.active { color: #70bc5f } .fy ul li a.active:before { left: 0; width: 100% } .fy ul li a:before { content: ''; position: absolute; right: 0; bottom: 0; width: 0%; height: 2px; background: currentcolor; -webkit-transition: .3s; transition: .3s } .news_nei { padding: 122px 0 80px } .news_nei .w1200 { position: relative } .news_nei .w1200 .w800 { width: 800px; margin: 0 auto } .news_nei .w1200 .w800 h5 { font-size: 36px; color: #333 } .news_nei .w1200 .w800 span { color: #999999; font-size: 16px; margin-top: 16px; display: block } .news_nei .w1200 .w800 .text { border-top: 1px solid #d4c9c9; padding-top: 48px; margin-top: 48px } .news_nei .w1200 .w800 .text p { color: #333333 } .news_nei .w1200 .prev, .news_nei .w1200 .next, .news_nei .w1200 .fenxiang, .news_nei .w1200 .fanhui { position: absolute; width: 46px; height: 46px; border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: #eaeaea; -webkit-transition: .3s; transition: .3s; cursor: pointer } .news_nei .w1200 .prev:hover, .news_nei .w1200 .next:hover, .news_nei .w1200 .fenxiang:hover, .news_nei .w1200 .fanhui:hover { background: #70bc5f } .news_nei .w1200 .prev:hover span, .news_nei .w1200 .next:hover span, .news_nei .w1200 .fenxiang:hover span, .news_nei .w1200 .fanhui:hover span { color: white } .news_nei .w1200 .prev span, .news_nei .w1200 .next span, .news_nei .w1200 .fenxiang span, .news_nei .w1200 .fanhui span { font-size: 18px; color: #70bc5f; -webkit-transition: .3s; transition: .3s } .news_nei .w1200 .prev { position: fixed; left: 50%; top: 50%; -webkit-transform: translate(-50%); transform: translate(-50%); margin-left: -577px } .news_nei .w1200 .next { position: fixed; right: 50%; top: 50%; -webkit-transform: translate(-50%); transform: translate(-50%); margin-right: -623px } .news_nei .w1200 .fanhui { left: 0; bottom: 0 } .news_nei .w1200 .fenxiang { left: 0; bottom: 60px } .news_nei .w1200 .fenxiang:hover .box { visibility: visible; opacity: 1 } .news_nei .w1200 .fenxiang .box { visibility: hidden; opacity: 0; -webkit-transition: .3s; transition: .3s; position: absolute; right: calc(-100% - 30px); top: 50%; -webkit-transform: translatey(-50%); transform: translatey(-50%); width: 50px; height: 120px; background: #70bc5f; border-radius: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center } .news_nei .w1200 .fenxiang .box a { color: white; font-size: 16px } .news_nei .w1200 .fenxiang .box a:nth-child(2) { margin: 15px 0 } .news_nei .w1200 .fenxiang .box span { color: #70bc5f; font-size: 14px; position: absolute; left: -12px; top: 50%; -webkit-transform: translate(0, -50%) rotate(-90deg); transform: translate(0, -50%) rotate(-90deg) } .gylct { padding: 70px 0 137px } .gylct.hzhb { padding: 80px 0 } .gylct.hzhb .w1200 h5 { margin-bottom: 50px } .gylct .w1200 span { font-size: 12px; color: #999 } .gylct .w1200 h5 { margin-top: 15px; font-size: 36px; color: #333333; margin-bottom: 80px } .gylct .w1200 ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap } .gylct .w1200 ul li { width: 48%; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border: 1px solid rgba(0, 0, 0, 0.1); margin-bottom: 40px } .gylct .w1200 a { margin: auto; margin-top: 10px; width: 160px; height: 50px; background: rgba(112, 188, 95, 0.7); display: block; font-size: 14px; color: white; line-height: 50px; text-align: center; border-radius: 50px; -webkit-transition: .3s; transition: .3s } .gylct .w1200 a:hover section { width: 100%; background: #70bc5f } .hzal { padding: 80px 0 70px } .hzal .w1200 ul li { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; margin-bottom: 40px } .hzal .w1200 ul li:last-child { margin-bottom: 0 } .hzal .w1200 ul li:hover .left img { -webkit-transform: scale(1.1); transform: scale(1.1) } .hzal .w1200 ul li:hover .right a section { background: #70bc5f } .hzal .w1200 ul li .left { overflow: hidden; margin-right: 84px } .hzal .w1200 ul li .left img { -webkit-transition: .3s; transition: .3s } .hzal .w1200 ul li .right { -webkit-box-flex: 1; -ms-flex: 1; flex: 1 } .hzal .w1200 ul li .right div span { color: #999999; font-size: 14px } .hzal .w1200 ul li .right div span:nth-child(2) { color: #f1f1f1; margin: 0 8px } .hzal .w1200 ul li .right h5 { font-size: 30px; margin-top: 15px; margin-bottom: 48px; color: #333333; line-height: 1.5; height: 90px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2 } .hzal .w1200 ul li .right a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center } .hzal .w1200 ul li .right a section { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: #d4c9c9; -webkit-transition: .3s; transition: .3s } .hzal .w1200 ul li .right a section div { color: white } .hzal .w1200 ul li .right a p { color: #999999; margin-left: 14px } .w404 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center } .w404 .box { text-align: center; color: white } .w404 .box h5 { margin-top: 100px; font-size: 36px; color: white } .w404 .box p { font-size: 14px; margin-top: 12px; margin-bottom: 45px } .w404 .box a { display: block; width: 160px; height: 50px; border-radius: 50px; background: white; -webkit-transition: .3s; transition: .3s; line-height: 50px; text-align: center; font-size: 14px; color: #70bc5f; margin: auto } .cpzxs { height: auto; padding-top: 77px } .cpzxs .w1200 { position: relative } .cpzxs .w1200 .item.static { position: static; -webkit-transition: .3s; transition: .3s } .cpzxs .w1200 .item h5 { font-size: 36px; color: #333333; text-align: center; margin-bottom: 40px } .cpzxs .w1200 .item .text { padding: 55px 85px 67px; -webkit-box-sizing: border-box; box-sizing: border-box; border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.1) } .cpzxs .w1200 .item .text h6 { font-size: 20px; color: #333333 } .cpzxs .w1200 .item .text div { margin-top: 15px; margin-bottom: 28px } .cpzxs .w1200 .item .text div section { display: inline-block; margin-right: 60px } .cpzxs .w1200 .item .text div section:last-child { margin-right: 0 } .cpzxs .w1200 .item .text div section span { font-size: 14px; color: #666666; display: block } .cpzxs .w1200 .item .text p { color: #666666 } .cpzxs .w1200 .item .syff { margin-top: 20px; margin-bottom: 70px; padding: 46px 240px 55px 85px; background: #f1f1f1 } .cpzxs .w1200 .item ol { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 45px; -ms-flex-wrap: wrap; flex-wrap: wrap } .cpzxs .w1200 .item ol li { padding: 50px 0; width: 32%; border: 1px solid rgba(0, 0, 0, 0.1); -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 2% } .cpzxs .w1200 .item ol li:last-child:nth-child(3n-1) { margin-right: calc(32% 4% / 2) } .zp { padding: 70px 0 } .zp .w1200 h5 { font-size: 36px; color: #333; text-align: center; margin-bottom: 35px } .zp .w1200 ul li { cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; line-height: 60px; height: auto; overflow: hidden; -webkit-transition: .3s; transition: .3s; margin-bottom: 10px; border: 1px solid rgba(0, 0, 0, 0.1); -webkit-box-sizing: border-box; box-sizing: border-box } .zp .w1200 ul li:last-child { margin-bottom: 0 } .zp .w1200 ul li:first-child { background: #70bc5f; border: 1px solid #70bc5f } .zp .w1200 ul li:first-child div { color: white } .zp .w1200 ul li:first-child .menus { border: none } .zp .w1200 ul li:first-child:hover { background: #70bc5f } .zp .w1200 ul li:first-child:hover div { color: white } .zp .w1200 ul li:hover { background: #70bc5f } .zp .w1200 ul li:hover div { color: white } .zp .w1200 ul li:hover .menus { border-left-color: #70bc5f } .zp .w1200 ul li:hover .menus div { background: #e5e5e5 } .zp .w1200 ul li.active { background: #70bc5f; border: none } .zp .w1200 ul li.active div { color: white } .zp .w1200 ul li.active .menus div { background: #70bc5f } .zp .w1200 ul li.active section { border: 1px solid rgba(0, 0, 0, 0.1); border-top: none } .zp .w1200 ul li div { text-align: center; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; font-size: 14px; -webkit-transition: .3s; transition: .3s; color: #666666 } .zp .w1200 ul li .menus { -webkit-box-flex: 0; -ms-flex: none; flex: none; width: 60px; height: 60px; border-left: 1px solid rgba(0, 0, 0, 0.1); position: relative } .zp .w1200 ul li .menus.active { border: 1px solid rgba(0, 0, 0, 0.1); background: white } .zp .w1200 ul li .menus.active div:last-child { opacity: 0; visibility: visible; -webkit-transition: .3s; transition: .3s } .zp .w1200 ul li .menus div { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 14px; height: 2px; -webkit-transition: .5s; transition: .5s; background: #e5e5e5 } .zp .w1200 ul li .menus div:last-child { -webkit-transform-origin: left; transform-origin: left; -webkit-transform: rotate(90deg); transform: rotate(90deg); margin-top: -8px; -webkit-transition: .3s; transition: .3s } .zp .w1200 ul li section { width: 100%; background: white; border-color: #70bc5f; padding: 0 340px 0 80px; -webkit-box-sizing: border-box; box-sizing: border-box } .zp .w1200 ul li section h3 { line-height: 2; font-size: 14px; color: #707070 } .zp .w1200 ul li section p { line-height: 1.5; font-size: 14px; color: #707070 } .zp .w1200 ul li section span { padding: 8px 0; -webkit-box-sizing: border-box; box-sizing: border-box; display: block } .zp .w1200 ul li section .a { padding-top: 40px; -webkit-box-sizing: border-box; box-sizing: border-box; height: 0px; display: block } .zp .w1200 a { margin: auto; margin-top: 55px; width: 160px; height: 50px; background: rgba(112, 188, 95, 0.7); display: block; font-size: 14px; color: white; line-height: 50px; text-align: center; border-radius: 50px; -webkit-transition: .3s; transition: .3s } .zp .w1200 a:hover section { width: 100%; background: #70bc5f } .zt { padding: 70px 0; background: #f1f1f1 } .zt h5 { font-size: 36px; color: #333; text-align: center; margin-bottom: 50px } .zt .w1200 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between } .zt .w1200 .left, .zt .w1200 .right { position: relative; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 48% } .zt .w1200 .left:hover div img, .zt .w1200 .right:hover div img { -webkit-transform: scale(1.1); transform: scale(1.1) } .zt .w1200 .left:hover p, .zt .w1200 .right:hover p { color: #70bc5f } .zt .w1200 .left div, .zt .w1200 .right div { overflow: hidden } .zt .w1200 .left div img, .zt .w1200 .right div img { -webkit-transition: .3s; transition: .3s } .zt .w1200 .left p, .zt .w1200 .right p { color: #333333; font-size: 24px; margin-top: 20px; -webkit-transition: .3s; transition: .3s } .zt a { margin: auto; margin-top: 55px; width: 160px; height: 50px; background: rgba(112, 188, 95, 0.7); display: block; font-size: 14px; color: white; line-height: 50px; text-align: center; border-radius: 50px; -webkit-transition: .3s; transition: .3s } .zt a:hover section { width: 100%; background: #70bc5f } .contact { padding: 97px 0 117px } .contact .w1200 ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap } .contact .w1200 ul li { width: 25% } .contact .w1200 ul li .item div { margin: auto; width: 80px; height: 80px; border-radius: 50%; background: #70bc5f; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center } .contact .w1200 ul li .item div span { font-size: 24px; color: white } .contact .w1200 ul li .item p { text-align: center; margin-top: 35px; color: #848181 } .mobts { position: fixed; right: 5%; bottom: 35px; z-index: 7; display: none; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center } .mobts div { width: 40px; height: 40px; border-radius: 50%; background: white; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center } .mobts div span { color: #70bc5f; display: block; -webkit-transform: rotate(180deg); transform: rotate(180deg); font-size: 14px } .mobts p { width: 30px; font-size: 14px; color: white; margin-top: 5px; line-height: 1.4 } #map { width: 100%; height: 580px } .zhongvideo { position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: 9; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; opacity: 0; visibility: hidden; -webkit-transition: .5s; transition: .5s } .zhongvideo.active { opacity: 1; visibility: visible } .zhongvideo.active .bg { opacity: 1; -webkit-transition: 1s; transition: 1s } .zhongvideo.active .videolist { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; -webkit-transition: .6s; transition: .6s } .zhongvideo .bg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, 0.7); z-index: -1; opacity: 0 } .zhongvideo .close { position: absolute; top: 0; right: 0; width: 100px; height: 100px; z-index: 3; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; cursor: pointer } .zhongvideo .close i { display: block; width: 50px; height: 50px; border-radius: 50%; position: relative; background: white } .zhongvideo .close i:after, .zhongvideo .close i:before { content: ''; position: absolute; top: 50%; left: 50%; width: 50%; height: 2px; background: #70bc5f; -webkit-transform-origin: center; transform-origin: center } .zhongvideo .close i:after { -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg) } .zhongvideo .close i:before { -webkit-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg) } .zhongvideo .videolist { opacity: 0; -webkit-transform: translate3d(0, 30%, 0); transform: translate3d(0, 30%, 0); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center } .zhongvideo .videolist .videolistbox { position: relative; width: 44.375vw; overflow: hidden } .zhongvideo .videolist .videolistbox img { opacity: 0 } .zhongvideo .videolist .videolistbox video { position: absolute; width: 100%; top: 50%; left: 0; max-height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transform: translatey(-50%); transform: translatey(-50%) } .zhongvideo .videolist .videolistitem { margin-left: 0.8333vw; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 10.9375vw } .zhongvideo .videolist .videolistitem .item { position: relative; cursor: pointer } .zhongvideo .videolist .videolistitem .item.active figure:after { opacity: 1 } .zhongvideo .videolist .videolistitem .item.active figure:before { opacity: 1 } .zhongvideo .videolist .videolistitem .item.active span { opacity: 1 } .zhongvideo .videolist .videolistitem .item:hover figure img { -webkit-transform: scale(1.1); transform: scale(1.1) } .zhongvideo .videolist .videolistitem .item figure { position: relative; overflow: hidden } .zhongvideo .videolist .videolistitem .item figure span { position: absolute; top: 50%; left: 50%; white-space: nowrap; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); z-index: 3; font-size: 14px; color: white; opacity: 0; -webkit-transition: .5s; transition: .5s } .zhongvideo .videolist .videolistitem .item figure:after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(73, 73, 73, 0.5); opacity: 0; -webkit-transition: .5s; transition: .5s } .zhongvideo .videolist .videolistitem .item figure:before { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: 2px solid white; -webkit-box-sizing: border-box; box-sizing: border-box; opacity: 0; z-index: 6; -webkit-transition: .5s; transition: .5s } .zhongvideo .videolist .videolistitem .item figure img { width: 100%; -webkit-transition: .5s; transition: .5s } .zhongvideo .videolist .videolistitem .item p { font-size: 13px; color: white; margin-top: 8px; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical } .zhongnongvideo { position: relative; margin-right: 9.8958vw; width: 36.4583vw; overflow: hidden } .zhongnongvideo:hover>img { -webkit-transform: scale(1.1); transform: scale(1.1) } .zhongnongvideo img { -webkit-transition: .6s; transition: .6s } .zhongnongvideo .bg { cursor: pointer; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, 0.1); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center } .swiper-container .swiper-wrapper .swiper-slide.slide1 .swiper-wrapper .swiper-slide .items:first-child { display: none }