.indexbanner{ height:100vh; overflow:hidden; position: relative;} .indexbanner:after{ height:240px;content:""; position:absolute; left:0px; right:0px; top:0px; z-index:1; background: linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7)); } .indexbanner .content{ height:100%; } .indexbanner .swiper{ height:100%; } .indexbanner .swiper-wrapper{ } .indexbanner .swiper-slide{ overflow:hidden; position:relative;} .indexbanner .swiper-slide img.pc{ width: 100%; height:100%; object-fit:cover; } .indexbanner .swiper-slide img.mobile{ width: 100%; height:100%; object-fit:cover;display:none; } .indexbanner .swiper-slide a{ color:#fff; } .indexbanner .swiper-slide .button{position: absolute; width: 1400px; text-align: right; left: 50%; margin-left: -700px; bottom: 200px; z-index: 3} .indexbanner .swiper-slide .button a{display: inline-block; border:#fff solid 1.5px; transition-duration: 0.3s; font-weight: normal; color: #fff; height: 44px; padding-left: 20px; padding-right: 20px; line-height: 44px;} .indexbanner .swiper-slide .button a i{ margin-left:20px; font-weight:normal; } .indexbanner .swiper-slide .button a:hover{background: var(--main); color: #fff; border: var(--main) solid 1px;} .indexbanner .thumbs{width: 1400px; margin:0 auto; position:absolute; left: 50%;transform: translateX(-50%); bottom:30px!important; height:auto!important } .indexbanner .thumbs .swiper-slide{ background:rgba(255, 255, 255, 0.3); color: var(--font); font-size: 16px; height: 75px; text-align: center; line-height: 75px; transition-duration:0.3s;-webkit-backdrop-filter:blur(5px); backdrop-filter: blur(5px);} .indexbanner .thumbs .swiper-slide-thumb-active{background:rgba(72, 193, 168, 0.8); color: #fff;} .indexabout{overflow:hidden; position: relative;height:820px; background: #fff;} .indexabout .title{ position:absolute; top:100px; width: 1400px; margin:0 auto; position:absolute; left: 50%;transform: translateX(-50%); z-index:2;display:flex; justify-content:space-between; align-items:center; } .indexabout .title{font-weight:bold; color:var(--main); justify-content:left; display:flex; align-items:center; } .indexabout .title span{ color:var(--main); font-size:36px; font-weight:bold; margin-right:15px;} .indexabout .title h2{ color:var(--font); font-size:40px; font-weight:300; } .indexabout .swiper-content{ height:100%; } .indexabout .swiper-wrapper{ height:100%; } .indexabout .swiper-slide{ height:100%; overflow:hidden; position:relative;} .indexabout .thumbs{width: 1400px; margin:0 auto; position:absolute; left: 50%;transform: translateX(-50%); bottom:50px; } .indexabout .thumbs .swiper-slide{background:rgba(247, 248, 251, 0.9); color: var(--font); font-size: 16px; height: 60px; text-align: center; line-height: 60px; transition-duration:0.3s;-webkit-backdrop-filter:blur(5px); backdrop-filter: blur(5px);} .indexabout .thumbs .swiper-slide-thumb-active{background:rgba(72, 193, 168, 0.8); color: #fff;} .indexabout .index_about_a{ height:100%; padding-top:100px; } .indexabout .circle1{animation: moveAndBlur 8s linear infinite; content:""; position:absolute; left:-200px; top:-200px; height: 500px; width: 500px; border-radius: 50%; background: linear-gradient(0deg, var(--main), #fff); opacity:0.15 } .indexabout .circle2{animation: moveAndBlur 8s linear infinite; content:""; position:absolute; right:-200px; top:300px; height: 350px; width: 350px; border-radius: 50%; background: linear-gradient(0deg, var(--main), #fff); opacity:0.15 } @keyframes moveAndBlur { 0%, 100% { transform:translate(0, 0); filter: blur(0); } 25% { transform: translate(30px, 0); filter: blur(5px); } 50% { transform: translate(0, 30px); filter: blur(15px); } 75% { transform: translate(-30px, 0); filter: blur(5px); }} .indexabout .index_about_a .description{ position:absolute; top:100px; width:686px; padding-top: 10px; padding-left: 714px; margin:0 auto; position:absolute; left: 50%; margin-left: -700px; z-index:2;} .indexabout .index_about_a .description h3{font-size: 30px; margin-bottom: 20px; font-weight: normal; color: var(--main);} .indexabout .index_about_a .description p{ font-size:16px; color:var(--font); line-height:1.8em; margin-bottom:20px; } .indexabout .index_about_a .index_about_a_content{display: grid; grid-template-columns: repeat(7,1fr);padding-top: 0px; align-items: center; width: 1400px; margin:0 auto; position:absolute; z-index: 44; align-items: center; left: 50%;top: 57%; margin-left:-700px; } .indexabout .index_about_a .index_about_a_content .item { border-radius: ; transition-duration:0.3s; height: 200px; position: relative; top:0px;} .indexabout .index_about_a .index_about_a_content #waves{ z-index:1; position:relative; } .indexabout .index_about_a .index_about_a_content .item .icon{border-radius: 80px;height: 80px;width: 80px; transition-duration: 0.3s; position: relative; display: flex; margin: 0 auto; text-align: center; position: relative; top: 0px; transition-duration: 0.3s; align-items: center;border:#dddddd solid 1px; background: rgba(255, 255, 255, 0.7);} .indexabout .index_about_a .index_about_a_content .item .icon img.color{width: 56px; margin: 0 auto; opacity: 1; transition-duration: 0.3s; position: absolute; position:absolute; left: 50%;top: 50%; transform: translate(-50%,-50%);} .indexabout .index_about_a .index_about_a_content .item .icon img.white{width: 56px; margin: 0 auto; opacity: 0; transition-duration: 0.3s; position: absolute; position:absolute; left: 50%;top: 50%; transform: translate(-50%,-50%);} .indexabout .index_about_a .index_about_a_content .item h2{ font-size:16px; color:var(--main); font-weight:normal; padding-top:14px; text-align: center; opacity:0;transition-duration: 0.3s; } .indexabout .index_about_a .index_about_a_content .item:hover { top: -20px;} .indexabout .index_about_a .index_about_a_content .item:hover .icon{ height:120px; width:120px;background:var(--main); border:var(--main) solid 1px;} .indexabout .index_about_a .index_about_a_content .item:hover .icon img.color{width: 84px; margin: 0 auto; opacity: 0; } .indexabout .index_about_a .index_about_a_content .item:hover .icon img.white{width: 84px; margin: 0 auto; opacity: 1;} .indexabout .index_about_a .index_about_a_content .item:hover h2{opacity: 1; font-size: 16px;} .indexabout .swiper-slide .index_about_a > *{opacity: 0; transition: all 1s; transform: translateX(40px); } .indexabout .swiper-slide-active .index_about_a > * { opacity: 1;transform: translateX(0px); } .indexabout .swiper-slide-active .index_about_a > *:nth-child(1) { transition-delay: 0.8s;transform: translateX(0px);} .indexabout .swiper-slide-active .index_about_a > *:nth-child(2) { transition-delay: 1s;transform: translateX(0px);} .indexabout .swiper-slide-active .index_about_a > *:nth-child(3) { transition-delay: 1.2s;transform: translateX(0px);} .indexabout .swiper-slide-active .index_about_a > *:nth-child(4) { transition-delay: 1.4s;transform: translateX(0px);} .indexabout .index_about_b{ position:absolute; top:100px; width:1400px; margin:0 auto; position:absolute; left: 50%; margin-left: -700px; z-index:2;display: flex; justify-content: space-between;} .indexabout .index_about_b .description{ width:26%; padding-top:170px; padding-left:40px; } .indexabout .index_about_b .description h3{ font-size:30px; color:var(--main); font-weight:normal; margin-bottom:24px; } .indexabout .index_about_b .description h4{ font-size:20px; color:var(--font); font-weight:normal; margin-bottom:24px; line-height:1.6em } .indexabout .index_about_b .description p{ font-size:16px; color:var(--font); line-height:1.8em;} .indexabout .index_about_b .button{display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 20px; width:30%; padding-top:170px; height:280px; } .indexabout .index_about_b .button .item{ border:#ececec solid 1px; text-align: center; background:#fff; padding:30px 40px; box-shadow:0px 5px 40px rgba(0, 0, 0, 0.05); transition-duration: 0.3s;} .indexabout .index_about_b .button .item:hover{ transform:scale(1.1); } .indexabout .index_about_b .button .item i{ font-size:36px; color:var(--font); margin-bottom: 10px; display: inline-block; } .indexabout .index_about_b .button .item h3{ font-weight: normal; font-size: 16px; color: var(--font);} .indexabout .index_about_b .photo{ width:30%; } .indexabout .index_about_b .photo img{width:100%} .indexabout .swiper-slide .index_about_b > *{opacity: 0; transition: all 1s;transform: translateX(40px); } .indexabout .swiper-slide-active .index_about_b > * { opacity: 1; transform: translateX(0px); } .indexabout .swiper-slide-active .index_about_b > *:nth-child(1) { transition-delay: 0.8s;transform: translateX(0px);} .indexabout .swiper-slide-active .index_about_b > *:nth-child(2) { transition-delay: 1s;transform: translateX(0px);} .indexabout .swiper-slide-active .index_about_b > *:nth-child(3) { transition-delay: 1.2s;transform: translateX(0px);} .indexabout .swiper-slide-active .index_about_b > *:nth-child(4) { transition-delay: 1.4s;transform: translateX(0px);} .indexabout .index_about_c{ position:absolute; width:1400px; margin:0 auto; position:absolute; left: 50%; margin-left: -700px; z-index:2; display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 28px;} .indexabout .index_about_c .item{ padding:50px 40px ;top:180px; position: relative; padding-bottom: 220px; overflow: hidden; position: relative; background: linear-gradient(200deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(238, 249, 247, 1) 100%); box-shadow:0px 5px 40px rgba(0, 0, 0, 0.05); } .indexabout .index_about_c .item .number{ transition-duration: 0.3s; background:var(--main); padding:5px 12px; border-radius: 0px 0px 0px 10px; position:absolute; right:0px; top:0px;font-family: 'Barlow'; color:#fff; font-size:24px; font-style:italic; } .indexabout .index_about_c .item .icon{ transition-duration: 0.3s; width:160px; height:160px; position:absolute; right:-40px; bottom:-40px;opacity:0.4 } .indexabout .index_about_c .item .icon img{ width:100%; } .indexabout .index_about_c .item h2{ transition-duration: 0.3s; font-weight: normal; font-size: 30px; color: var(--font); margin-bottom: 24px;} .indexabout .index_about_c .item p{ font-weight: normal; font-size:16px; color: var(--font); line-height: 1.8em;} .indexabout .swiper-slide .index_about_c > *{opacity: 0; transition: all 1s;transform: translateX(40px); } .indexabout .swiper-slide-active .index_about_c > * { opacity: 1; transform: translateX(0px); } .indexabout .swiper-slide-active .index_about_c > *:nth-child(1) { transition-delay: 0.8s;transform: translateX(0px);} .indexabout .swiper-slide-active .index_about_c > *:nth-child(2) { transition-delay: 1s;transform: translateX(0px);} .indexabout .swiper-slide-active .index_about_c > *:nth-child(3) { transition-delay: 1.2s;transform: translateX(0px);} .indexabout .swiper-slide-active .index_about_c > *:nth-child(4) { transition-delay: 1.4s;transform: translateX(0px);} .indexabout .index_about_c .item:hover .number{padding:8px 16px;} .indexabout .index_about_c .item:hover h2{ color: var(--main); } .indexabout .index_about_c .item:hover .icon{ opacity: 1;right:-30px; bottom:-30px;} /* 每个圆圈不同的浮动动画 */ .indexabout .index_about_a .index_about_a_content .item:nth-child(1) {animation: float-1 6s ease-in-out infinite;} .indexabout .index_about_a .index_about_a_content .item:nth-child(2) {animation: float-2 5s ease-in-out infinite;} .indexabout .index_about_a .index_about_a_content .item:nth-child(3) { animation: float-3 7s ease-in-out infinite;} .indexabout .index_about_a .index_about_a_content .item:nth-child(4) {animation: float-4 6.5s ease-in-out infinite;} .indexabout .index_about_a .index_about_a_content .item:nth-child(5) { animation: float-5 5.5s ease-in-out infinite;} .indexabout .index_about_a .index_about_a_content .item:nth-child(6) { animation: float-6 6.5s ease-in-out infinite;} .indexabout .index_about_a .index_about_a_content .item:nth-child(7) {animation: float-7 6s ease-in-out infinite;} .indexsolution{overflow:hidden; position: relative;height:960px; background: #fff;} .indexsolution .swiper-content{ height:100%; } .indexsolution .swiper-content .swiper-slide img{ width:100%; height:100%;object-fit:cover; } .indexsolution .swiper-content .swiper-slide .text{display:none;} .indexsolution .swiper-wrapper{ height:100%; } .indexsolution .swiper-slide{ height:100%; overflow:hidden; position:relative;} .indexsolution .title{ position:absolute; top:100px; width: 1400px; margin:0 auto; position:absolute; left: 50%;transform: translateX(-50%); z-index:2;display:flex; justify-content:space-between; align-items:center; } .indexsolution .title{font-weight:bold; color:var(--main); justify-content:left; display:flex; align-items:center; } .indexsolution .title span{ color:var(--main); font-size:36px; font-weight:bold; margin-right:15px;} .indexsolution .title h2{ color:var(--font); font-size:40px; font-weight:300; } .indexsolution .thumbs{width:850px; margin:0 auto; position:absolute; left: 50%;margin-left: 252px; bottom:0px;top:0px; } .indexsolution .thumbs .swiper-slide{ cursor:pointer; background:rgba(247, 248, 251, 0.3); display: flex; align-items: center; color: var(--font); font-size: 16px; transition-duration:0.3s;-webkit-backdrop-filter:blur(5px); backdrop-filter: blur(5px);} .indexsolution .thumbs .swiper-slide:hover{background:rgba(247, 248, 251, 0.6);} .indexsolution .thumbs .swiper-slide-thumb-active{background:rgba(72, 193, 168, 0.7); color: #fff;} .indexsolution .thumbs .swiper-slide-thumb-active:hover{background:rgba(72, 193, 168, 0.7); color: #fff;} .indexsolution .thumbs .swiper-slide .box{ padding-left:50px; padding-right:50px;} .indexsolution .thumbs .swiper-slide .box .number{font-family: 'Barlow'; font-size: 36px;margin-bottom: 40px; } .indexsolution .thumbs .swiper-slide .box .solution_name{font-size: 20px; color: var(--font); margin-bottom: 10px;} .indexsolution .thumbs .swiper-slide .box .solution_descrition{font-size: 16px; color: var(--font);visibility: hidden; display: none;} .indexsolution .thumbs .swiper-slide-thumb-active .box .number{font-family: 'Barlow';color: #fff; font-size: 36px;margin-bottom: 20px;} .indexsolution .thumbs .swiper-slide-thumb-active .box .solution_name{font-size: 20px; color: #fff; margin-bottom: 10px;} .indexsolution .thumbs .swiper-slide-thumb-active .box .solution_descrition{font-size: 16px; color: #fff;visibility:inherit; display: block;} .indexsolution{background: #fff;} .indexsolution .swiper-pagination{ position:absolute; right:auto!important; left:50%!important; margin-left: -700px;} .indexsolution .swiper-pagination .swiper-pagination-bullet{background:rgba(101, 101, 101, 0.8); margin-top: 10px!important; margin-bottom: 10px!important; height: 6px; width: 6px; border-radius: 6px; transition-duration: 0.3s;} .indexsolution .swiper-pagination .swiper-pagination-bullet-active{background: var(--main);height: 16px; width: 6px;} .indexcro{background: #fff; height: 800px; overflow: hidden; position: relative;} .indexcro .pagewidth{display: flex; justify-content: space-between; align-items: center;} .indexcro .content{width: 30%;} .indexcro .content .description{font-size: 16px; color: var(--font); line-height: 1.8em; margin-bottom: 30px;} .indexcro .content .title span{ color:var(--main); font-size:36px; margin-right:15px; position: relative; top: -3px; font-weight: normal;} .indexcro .content .title strong{font-family: 'Barlow'; font-size: 40px; color: var(--font); font-weight: 500;} .indexcro .content .title h2{ color:#666; font-size:40px; font-weight:normal; margin-bottom:30px; } .indexcro .content .button a{display: inline-block;border:#ddd solid 2px; padding: 16px 30px; color: var(--font); transition-duration:0.3s;} .indexcro .content .button a:hover{display: inline-block;border:var(--main) solid 2px; background: var(--main); padding: 16px 30px; color:#fff;} .indexcro .rotate{ width:50%; ; } .indexcro .circle1{animation: moveAndBlur 8s linear infinite; content:""; position:absolute; left:-200px; top:-100px; height: 500px; width: 500px; border-radius: 50%; background: linear-gradient(0deg, var(--main), #fff); opacity:0.15 } .indexcro .circle2{animation: moveAndBlur 8s linear infinite; content:""; position:absolute; right:-200px; top:300px; height: 350px; width: 350px; border-radius: 50%; background: linear-gradient(0deg, var(--main), #fff); opacity:0.15 } .solar-system {width: 700px; height: 700px; position: relative; margin: 50px auto;} .sun {width: 280px; height: 280px; background: #48c1a8; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; text-align: center;} .sun span{ font-size:24px;text-align: center;display:block; width:100%; font-weight:bold; color:#fff; } .orbit {position: absolute; top: 50%; left: 50%; border-radius: 50%; transform: translate(-50%, -50%); ;} .planet {position: absolute; top: 50%; left: 50%; width: 90px; height: 90px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; transform-origin: 50% 50%;transition-duration: 0.3s; text-align: center;} .orbit:nth-child(2) { width: 700px; height: 700px; animation: orbit 30s linear infinite; border:rgba(0, 0, 0, 0.04) solid 1px; font-size: 12px;} .orbit:nth-child(3) { width: 600px; height: 600px; animation: orbit 30s linear infinite; border:rgba(0, 0, 0, 0.06) solid 1px;font-size: 13px;} .orbit:nth-child(4) { width: 500px; height: 500px; animation: orbit 30s linear infinite; border:rgba(0, 0, 0, 0.08) solid 1px;font-size: 14px; } .orbit:nth-child(5) { width: 400px; height: 400px; animation: orbit 30s linear infinite; border:rgba(0, 0, 0, 0.1) solid 1px; font-size: 15px;} .orbit:nth-child(2) .planet {background: #fff;border:#ddd solid 1px; color: #666; transform: translate(-50%, -50%) rotate(0deg) translateX(350px) rotate(-0deg);} .orbit:nth-child(2) .planet:nth-child(2) {transform: translate(-50%, -50%) rotate(120deg) translateX(350px) rotate(-120deg);} .orbit:nth-child(3) .planet {background:rgba(72, 193, 168, 0.7); transform: translate(-50%, -50%) rotate(90deg) translateX(300px) rotate(-90deg);} .orbit:nth-child(3) .planet:nth-child(2) {transform: translate(-50%, -50%) rotate(270deg) translateX(300px) rotate(-270deg);} .orbit:nth-child(3) .planet:nth-child(3) {transform: translate(-50%, -50%) rotate(170deg) translateX(300px) rotate(-170deg);} .orbit:nth-child(4) .planet { background: #fff;border:#ddd solid 1px; color: #666; transform: translate(-50%, -50%) rotate(60deg) translateX(250px) rotate(-60deg);} .orbit:nth-child(4) .planet:nth-child(2) {transform: translate(-50%, -50%) rotate(180deg) translateX(250px) rotate(-180deg);} .orbit:nth-child(4) .planet:nth-child(3) {transform: translate(-50%, -50%) rotate(300deg) translateX(250px) rotate(-300deg);} .orbit:nth-child(5) .planet {background:rgba(72, 193, 168, 0.7); transform: translate(-50%, -50%) rotate(45deg) translateX(200px) rotate(-45deg);} .orbit:nth-child(5) .planet:nth-child(2) {transform: translate(-50%, -50%) rotate(135deg) translateX(200px) rotate(-135deg);} .orbit .planet:hover{ box-shadow:0px 5px 20px rgba(72, 193, 168, .2); z-index:444; position:relative; } @keyframes orbit {from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); }} .orbit:nth-child(2) .planet span{animation: rotate 30s linear infinite reverse;} .orbit:nth-child(3) .planet span{animation: rotate 30s linear infinite reverse;} .orbit:nth-child(4) .planet span{ animation: rotate 30s linear infinite reverse;} .orbit:nth-child(5) .planet span{animation: rotate 30s linear infinite reverse;} @keyframes rotate {to {transform: rotate(360deg);}} .indexcellstorebio{background: url(../images/indexaboutbg.jpg) no-repeat center; background-size:cover; padding-top:100px; padding-bottom:100px; } .indexcellstorebio .title_box{display:flex; justify-content: space-between; align-items:center; padding-bottom:50px; } .indexcellstorebio .title{display:flex; justify-content:space-between; align-items:center; font-weight:bold; color:var(--main); justify-content:left; display:flex; align-items:center; } .indexcellstorebio .title span{ color:var(--main); font-size:36px; font-weight:bold; margin-right:15px;} .indexcellstorebio .title h2{ color:var(--font); font-size:40px; font-weight:300; } .indexcellstorebio .more a{display: inline-block; border:var(--font) solid 1.5px; transition-duration: 0.3s; font-weight: normal; color: var(--font); height: 44px; padding-left: 20px; padding-right: 20px; line-height: 44px;} .indexcellstorebio .more a i{ margin-left:20px; font-weight:normal; } .indexcellstorebio .more a:hover{background: var(--main); color: #fff; border: var(--main) solid 1px;} .indexcellstorebio .content{ display:grid; grid-template-columns:4fr 5fr 3fr;} .indexcellstorebio .content .img{ height:530px; } .indexcellstorebio .content .img img{ height:100%;width:100%; object-fit:cover; } .indexcellstorebio .content .info{background:rgba(255, 255, 255, 0.4); padding: 45px; } .indexcellstorebio .content .info h3{font-size: 26px; color: var(--main); margin-bottom: 30px;font-weight: normal;} .indexcellstorebio .content .info p{ color:var(--font); line-height:1.8em; font-size:16px; text-align:justify; margin-bottom:1px; } .indexcellstorebio .content .info p:last-child{ margin-bottom:0; } .indexcellstorebio .content .advantage{background: var(--main);} .indexcellstorebio .content .advantage ul{ padding:30px; } .indexcellstorebio .content .advantage ul li{ border-bottom:rgba(255, 255, 255, 0.4) solid 1px; padding-bottom:15px; padding-top:15px; } .indexcellstorebio .content .advantage ul li:last-child{ border-bottom:none; } .indexcellstorebio .content .advantage ul li h2{display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;} .indexcellstorebio .content .advantage ul li h2 span{color: #fff; font-size: 26px; font-weight: normal;} .indexcellstorebio .content .advantage ul li h2 img{ height:32px; } .indexcellstorebio .content .advantage ul li p{ font-size:16px; color:#fff; } .indexnews{padding-top:100px; padding-bottom:100px; background:#fff; } .indexnews .title_box{display:flex; justify-content: space-between; align-items:center; padding-bottom:50px; } .indexnews .title{display:flex; justify-content:space-between; align-items:center; font-weight:bold; color:var(--main); justify-content:left; display:flex; align-items:center; } .indexnews .title span{ color:var(--main); font-size:36px; font-weight:bold; margin-right:15px;} .indexnews .title h2{ color:var(--font); font-size:40px; font-weight:300; } .indexnews .more a{display: inline-block; border:var(--font) solid 1.5px; transition-duration: 0.3s; font-weight: normal; color: var(--font); height: 44px; padding-left: 20px; padding-right: 20px; line-height: 44px;} .indexnews .more a i{ margin-left:20px; font-weight:normal; } .indexnews .more a:hover{background: var(--main); color: #fff; border: var(--main) solid 1px;} .indexnews .hot{width: 100%; margin-bottom: 25px;} .indexnews .hot{display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 28px;} .indexnews .hot .item{ position:relative; overflow:hidden; height:260px; } .indexnews .hot .item img{ width:100%; height:100%; object-fit:cover; transition-duration:0.3s } .indexnews .hot .item:hover img{ transform:scale(1.05); } .indexnews .hot .item .cat{ position:absolute; left:10px; top:10px; z-index:1; background:var(--main); font-size:14px; color:#fff; padding:6px 10px; } .indexnews .hot .item h2{ position:absolute; left:0px; right:0px; font-weight: normal; bottom:0px; z-index:1; padding: 20px; font-size: 20px; color:var(--font); line-height: 1.4em; background:rgba(255, 255, 255, 0.4); color:#fff;-webkit-backdrop-filter:blur(5px); backdrop-filter: blur(5px); } .indexnews .hot .item h2 a{ color:var(--font); } .indexnews .content{background: #fff; box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.05);} .indexnews .content ul{ padding:30px;} .indexnews .content ul{display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 0px 60px} .indexnews .content ul li{ border-bottom:#ddd solid 1px; padding-bottom:25px; margin-bottom:25px; display:grid; grid-template-columns: auto 100px; grid-gap:40px; } .indexnews .content ul li h2 { font-weight: normal; font-size: 17px; line-height: 1.5em;} .indexnews .content ul li h2 a{ color:var(--font); } .indexnews .content ul li span{ line-height:1.5em; color:#cecece;font-family: 'Barlow'; } .indexnews .content ul li:hover h2 a{ color:var(--main); } .indexnews .content ul li:hover span{ color:var(--main); } .indexnews .content ul li:nth-last-child(2){ margin-bottom:0; padding-bottom: 0; border-bottom: none;} .indexnews .content ul li:nth-last-child(1){ margin-bottom:0; padding-bottom: 0; border-bottom: none; } .detailbanner{overflow: hidden; position: relative; background: var(--main);height: 100vh;} .detailbanner .pagewidth{ height: 100vh; position: relative;} .detailbanner .crumb{ position:absolute; top:160px; z-index:4; font-size:14px; color:rgba(255, 255, 255, .8); } .detailbanner .crumb a{color:rgba(255, 255, 255, .8); } .detailbanner .crumb i:last-child{display: none;} .detailbanner .text{ text-align: left; position: absolute; left: 0px; right: 0px; top: 50%; transform: translateY(-50%); z-index: 2; } .detailbanner .text h1{ font-size: 60px; color: #fff; font-weight:normal; text-align: left; line-height: 1.1em; z-index: 2; margin-bottom:20px; } .detailbanner .text h2{font-size: 30px;color: #fff; text-align: left; font-weight: 300; text-transform: uppercase;} .detailbanner .project_text{ text-align: left; position: absolute; left: 0px; right: 0px; bottom: 180px;z-index: 2; } .detailbanner .project_text .project_name{display:flex; justify-content:space-between; align-items:center; font-weight:bold; color:var(--main); justify-content:left; display:flex; align-items:center; margin-bottom:10px; } .detailbanner .project_text .project_name span{ color:#fff; font-size:52px; font-weight:bold; margin-right:15px;} .detailbanner .project_text .project_name h2{ color:#fff; font-size:60px; font-weight:300; } .detailbanner .project_text .project_description{ font-size:24px; color:#fff; padding-left:32px; font-weight:300; } .detailbanner img.detailbg{ height: 100%; width: 100%; object-fit: cover; position: absolute; left: 0px; top: 0px; bottom: 0px; right: 0px; z-index: 1; opacity: 1} .detailmenu{box-shadow: 0px 10px 40px rgba(210, 229, 223, 0.4); position: relative; z-index: 4; background: #fff;} .detailmenu ul{display:flex; justify-content: space-between;} .detailmenu ul li{ width:50%;text-align:center; font-size:17px; } .detailmenu ul li a{ position: relative; color:var(--font); display:block; cursor: pointer; height:80px; line-height:80px; } .detailmenu ul li:hover a:after{ position:absolute; left:0px; right:0px; bottom:0px; height:2px; background:var(--main); content:""; } .detailmenu ul li a:hover{ color:var(--main); } .detailmenu ul li.active a:after{ position:absolute; left:0px; right:0px; bottom:0px; height:2px; background:var(--main); content:""; } .detailmenu ul li.active a{ color:var(--main); } .about_box_1{ padding-top:80px; padding-bottom:80px; position: relative; background: #fff;} .about_box_1 .pagewidth{display:grid; grid-template-columns: 5fr 7fr; grid-gap: 28px;} .about_box_1 .title_box{ } .about_box_1 .title{display:flex; justify-content:space-between; align-items:center; font-weight:bold; color:var(--main); justify-content:left; display:flex; align-items:center; } .about_box_1 .title span{ color:var(--main); font-size:36px; font-weight:bold; margin-right:15px;} .about_box_1 .title h2{ color:var(--font); font-size:40px; font-weight:300; } .about_box_1 .slogin { padding-left:60px; padding-top:100px; } .about_box_1 .slogin img{ width:350px; } .about_box_1 .content h3{font-size: 26px; color: var(--font); margin-bottom: 30px;font-weight: normal;} .about_box_1 .content p{ color:var(--font); line-height:1.8em; font-size:16px; text-align:justify; margin-bottom:20px; } .about_box_1 .xibao1{animation: movexibao 8s linear infinite; content:""; position:absolute; left:-120px; bottom:-50px; width: 230px; } .about_box_1 .xibao1 img{ width:100% } .about_box_1 .xibao2{animation: movexibao 8s linear infinite; content:""; position:absolute; left:120px; bottom:100px; width: 120px; } .about_box_1 .xibao2 img{ width:100% } @keyframes movexibao { 0%, 100% { transform:translate(0, 0); filter: blur(0); } 25% { transform: translate(30px, 0); filter: blur(5px); } 50% { transform: translate(0, 30px); filter: blur(15px); } 75% { transform: translate(-30px, 0); filter: blur(5px); }} .about_box_2 { position:relative; overflow:hidden; overflow:hidden; } .about_box_2 img.bg{ position:absolute; left:0px; right:0px; top:0px; bottom:0px; width:100%; height:100%; object-fit:cover; z-index:-1 } .about_box_2 .pagewidth{ height:100vh; position:relative; } .about_box_2 .pagewidth:after{ content: ""; position: absolute; width:3400px; border-radius: 50%; height:2800px; background:rgba(72, 193, 168, 0.9);z-index: 3; top: 50%; transform: translateY(-50%); left: -2910px;} .about_box_2 .pagewidth:before{ content: ""; position: absolute; width:3400px;border-radius: 50%; height:2800px; background:rgba(255, 255, 255, 0.3);z-index: 2;top: 54%; transform: translateY(-50%); left: -2900px;} .about_box_2 .content {width: 400px; position: absolute; top: 50%; transform: translateY(-50%); z-index: 4} .about_box_2 .content .title{display:flex; justify-content:space-between; align-items:center; font-weight:bold; color:var(--main); justify-content:left; display:flex; align-items:center; } .about_box_2 .content .title span{ color:#fff; font-size:36px; font-weight:bold; margin-right:15px;} .about_box_2 .content .title h2{ color:#fff; font-size:40px; font-weight:300; } .about_box_2 .content .advantage{} .about_box_2 .content .advantage ul{ padding-top:30px; } .about_box_2 .content .advantage ul li{ border-bottom:rgba(255, 255, 255, 0.4) solid 1px; padding-bottom:15px; padding-top:15px; } .about_box_2 .content .advantage ul li:last-child{ border-bottom:none; } .about_box_2 .content .advantage ul li h2{display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;} .about_box_2 .content .advantage ul li h2 span{color: #fff; font-size: 26px; font-weight: normal;} .about_box_2 .content .advantage ul li h2 img{ height:32px; } .about_box_2 .content .advantage ul li p{ font-size:16px; color:#fff; } .about_box_3 {background: linear-gradient(0deg, #e4f6f2, #f8fdfc);overflow:hidden; } .about_box_3 .pagewidth{display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 28px; } .about_box_3 .left{ padding-top:100px; height:700px; position:relative; } .about_box_3 .left .title{display:flex; justify-content:space-between; align-items:center; font-weight:bold; color:var(--main); justify-content:left; display:flex; align-items:center; } .about_box_3 .left .title span{ color:var(--main); font-size:36px; font-weight:bold; margin-right:15px;} .about_box_3 .left .title h2{ color:var(--font);font-size:40px; font-weight:300; } .about_box_3 .left .img{ position: absolute; left: 0px; bottom: 0px;} .about_box_3 .left .img img{ width:100%; } .about_box_3 .right{display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 40px; height:700px; padding-top: 30px; padding-bottom: 30px; } .about_box_3 .right .imglist{} .about_box_3 .right .imglist img{ width:100%; margin-bottom:20px;box-shadow: 0px 10px 40px rgba(72, 193, 168, 0.3); } .about_box_3 .right .imglist:last-child{ padding-top: 30px;} .about_box_4{ padding-top:100px; padding-bottom:100px; background: #fff; } .about_box_4 .title{display:flex; justify-content:space-between; align-items:center; font-weight:bold; color:var(--main); justify-content:left; display:flex; align-items:center; } .about_box_4 .title span{ color:var(--main); font-size:36px; font-weight:bold; margin-right:15px;} .about_box_4 .title h2{ color:var(--font);font-size:40px; font-weight:300; } .about_box_4 .content { padding-top:40px; } .about_box_4 .content .item{display: grid; grid-template-columns: 400px auto; align-items: center; padding-top: 14px; padding-bottom: 14px;} .about_box_4 .content .item .time{ padding-right: 50px; font-size:60px;text-transform: uppercase; text-align: right; font-style: italic; transition-duration: 0.2s; font-weight: bold; z-index: 2;-webkit-text-stroke: 1px #cccccc; -webkit-text-fill-color: transparent; } .about_box_4 .content .item .info{ padding-left:60px; position:relative; } .about_box_4 .content .item .info:after{ content:""; top: 50%;transform: translateY(-50%); left:5px; width:10px; height:10px; transition-duration: 0.2s; background: #fff; border-radius:10px; border:#cccccc solid 2px; position:absolute; } .about_box_4 .content .item .info p{ font-size:16px; color:var(--font); margin-bottom:10px; } .about_box_4 .content .item .info h3{ font-size:22px; color:var(--font); font-weight:500; } .about_box_4 .content .item:hover .time{ -webkit-text-stroke: 1px var(--main); -webkit-text-fill-color:var(--main) ; } .about_box_4 .content .item:hover .info:after{ content:""; top: 50%;transform: translateY(-50%); left:5px; width:10px; background:var(--main); height:10px; border-radius:10px; border:var(--main) solid 2px; position:absolute; } .about_box_4 .content .item:hover .info p{ font-size:16px; color:var(--main); margin-bottom:10px; } .about_box_4 .content .item:hover .info h3{ font-size:22px; color:var(--main); font-weight:500; } .about_box_5{ padding-top:100px; padding-bottom:60px; background: linear-gradient(0deg, #ffffff, #e4f6f2);overflow:hidden; } .about_box_5 .title{display:flex; justify-content:space-between; align-items:center; font-weight:bold; color:var(--main); justify-content:left; display:flex; align-items:center; } .about_box_5 .title span{ color:var(--main); font-size:36px; font-weight:bold; margin-right:15px;} .about_box_5 .title h2{ color:var(--font);font-size:40px; font-weight:300; } .about_box_5 .content {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 28px; padding-top:40px; align-items: flex-start;} .about_box_5 .content .client{width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 28px;} .about_box_5 .content .client .item {box-shadow: 10px 10px 20px rgba(72, 193, 168, 0.1); } .about_box_5 .content .client .item img{ width:100%; display:block; } .about_box_5 .content .earth{ height:550px; position: relative; width: 100%;} .about_box_5 .content .earth #tag-cloud{ position: relative; margin:0 auto;margin-top: -50px; width:550px; height:550px; background: url(../images/diqiubg.png) no-repeat center; background-size: 100%;} .technology_box_1{ padding-top:100px; padding-bottom:0px;background: linear-gradient(0deg, #7dd3c1, #ffffff);overflow:hidden; } .technology_box_1 .title{display:flex; justify-content:space-between; align-items:center; font-weight:bold; color:var(--main); justify-content:left; display:flex; align-items:center; } .technology_box_1 .title span{ color:var(--main); font-size:36px; font-weight:bold; margin-right:15px;} .technology_box_1 .title h2{ color:var(--font);font-size:40px; font-weight:300; } .technology_box_1 .pagewidth {display:grid; grid-template-columns: 8fr 4fr; grid-gap:50px;align-items:flex-end; } .technology_box_1 .pagewidth .description{ padding-top:75px; margin-bottom: 40px;} .technology_box_1 .pagewidth .description .name{ font-size:36px; color:var(--main);margin-bottom:25px; } .technology_box_1 .pagewidth .description .info{display: flex; justify-content: space-between; grid-gap: 20px;} .technology_box_1 .pagewidth .description .info ul li{ font-size:16px; color: var(--font); line-height:1.8em; } .technology_box_1 .pagewidth .description .info ul:first-child li{ font-size:20px; line-height:1.6em; } .technology_box_1 .pagewidth .tab{ padding-bottom:60px; } .technology_box_1 .pagewidth .tab .layui-tab-title{display: flex; justify-content: left;grid-gap: 10px;align-items:flex-end; height: 60px;} .technology_box_1 .pagewidth .tab .layui-tab-title li{ cursor: pointer; background:rgba(72, 193, 168, 0.5); transition-duration: 0.3s; font-size: 16px; color:#fff; height:50px; line-height:50px; padding-left:30px; padding-right:30px; } .technology_box_1 .pagewidth .tab .layui-tab-title li.layui-this{ background:#fff;height:60px; line-height:60px; color: var(--main) } .technology_box_1 .pagewidth .tab .layui-tab-content{ height: 280px; padding: 30px; background: linear-gradient(0deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 1));-webkit-backdrop-filter:blur(5px); backdrop-filter: blur(5px);} .technology_box_1 .pagewidth .tab .layui-tab-content .layui-tab-item p{ font-size:16px; line-height:1.6em; color:var(--font); } .technology_box_1 .pagewidth .tab .layui-tab-content .layui-tab-item .lista ul li{ margin-bottom: 15px; font-size: 15px; color: var(--font); line-height: 1.5em; display: grid; grid-template-columns: 120px auto;grid-gap: 30px;} .technology_box_1 .pagewidth .tab .layui-tab-content .layui-tab-item .lista ul li span{ text-align:left; position:relative;} .technology_box_1 .pagewidth .tab .layui-tab-content .layui-tab-item .lista ul li span:after{content: ""; position: absolute; right: -15px; top: 9px;height: 4px; width: 4px; border-radius: 5px; border:#ddd solid 2px;} .technology_box_1 .pagewidth .tab .layui-tab-content .layui-tab-item .lista ul li p{ text-align:left; } .technology_box_1 .pagewidth .tab .layui-tab-content .layui-tab-item .listb ul li{ margin-bottom: 15px; font-size: 15px; color: var(--font); line-height: 1.5em; display: grid; grid-template-columns: 60px auto;grid-gap: 30px;} .technology_box_1 .pagewidth .tab .layui-tab-content .layui-tab-item .listb ul li span{ text-align:left; position:relative;} .technology_box_1 .pagewidth .tab .layui-tab-content .layui-tab-item .listb ul li span:after{content: ""; position: absolute; right: -15px; top: 9px;height: 4px; width: 4px; border-radius: 5px; border:#ddd solid 2px;} .technology_box_1 .pagewidth .tab .layui-tab-content .layui-tab-item .listb ul li p{ text-align:left; } .technology_box_1 .pagewidth .tab .layui-tab-content .layui-tab-item .listc ul li{ margin-bottom: 15px; font-size: 15px; color: var(--font); line-height: 1.5em;} .technology_box_1 .pagewidth .tab .layui-tab-content .layui-tab-item .listc ul li p{ text-align:left; } .technology_box_1 .pagewidth .tab .layui-tab-content .layui-tab-item {height: 280px;overflow: auto; padding-right: 20px;} /* 针对Webkit内核浏览器 */ .technology_box_1 .pagewidth .tab .layui-tab-content .layui-tab-item::-webkit-scrollbar { width: 8px; height: 10px;} /* 滚动条轨道 */ .technology_box_1 .pagewidth .tab .layui-tab-content .layui-tab-item::-webkit-scrollbar-track {background: #f1f1f1; border-radius: 10px;} /* 滚动条滑块 */ .technology_box_1 .pagewidth .tab .layui-tab-content .layui-tab-item::-webkit-scrollbar-thumb {background: var(--main);border-radius: 10px; border: 2px solid #f1f1f1;} /* 鼠标悬停时滑块样式 */ .technology_box_1 .pagewidth .tab .layui-tab-content .layui-tab-item::-webkit-scrollbar-thumb:hover {background: #555;} /* 针对Firefox浏览器 */ @supports (scrollbar-width: thin) {.technology_box_1 .pagewidth .tab .layui-tab-content .layui-tab-item {scrollbar-width: thin;scrollbar-color: #888 #f1f1f1;}} .technology_box_1 .pagewidth .photo img{ width:100%; } .technology_box_2{ padding-top:100px; padding-bottom:320px;background:#fff;overflow:hidden; position:relative; } .technology_box_2 .pagewidth{display: grid; grid-template-columns: 30% 70%; grid-gap: 28px;} .technology_box_2 .title{ font-weight:bold; color:var(--main); justify-content:left; display:flex; } .technology_box_2 .title span{ color:var(--main); font-size:36px; font-weight:bold; margin-right:15px;} .technology_box_2 .title h2{ color:var(--font);font-size:40px; font-weight:300; } .technology_box_2 .content h3{font-size: 30px; color: var(--main); margin-bottom: 30px;font-weight: normal;} .technology_box_2 .content p{ color:var(--font); line-height:1.8em; font-size:16px; text-align:justify; margin-bottom:20px; } .technology_box_2 .index_about_a_content{display: grid; grid-template-columns: repeat(7,1fr); padding-top: 0px; align-items: center; width: 1400px; margin:0 auto; position:absolute; z-index: 44; align-items: center; left: 50%;bottom: 60px; margin-left:-700px; } .technology_box_2 .index_about_a_content .item { border-radius: ; transition-duration:0.3s; height: 200px; position: relative; top:0px;} .technology_box_2 #waves{ z-index:1; position:absolute; left:0px;right:0px;bottom:10px; } .technology_box_2 .index_about_a_content .item .icon{border-radius: 80px;height: 80px;width: 80px; transition-duration: 0.3s; position: relative; display: flex; margin: 0 auto; text-align: center; position: relative; top: 0px; transition-duration: 0.3s; align-items: center;border:#dddddd solid 1px; background: rgba(255, 255, 255, 0.7);} .technology_box_2 .index_about_a_content .item .icon img.color{width: 56px; margin: 0 auto; opacity: 1; transition-duration: 0.3s; position: absolute; position:absolute; left: 50%;top: 50%; transform: translate(-50%,-50%);} .technology_box_2 .index_about_a_content .item .icon img.white{width: 56px; margin: 0 auto; opacity: 0; transition-duration: 0.3s; position: absolute; position:absolute; left: 50%;top: 50%; transform: translate(-50%,-50%);} .technology_box_2 .index_about_a_content .item h2{ font-size:16px; text-align: center; color:var(--main); font-weight:normal; padding-top:14px; opacity:0;transition-duration: 0.3s; } .technology_box_2 .index_about_a_content .item:hover { top: -20px;} .technology_box_2 .index_about_a_content .item:hover .icon{ height:120px; width:120px;background:var(--main); border:var(--main) solid 1px;} .technology_box_2 .index_about_a_content .item:hover .icon img.color{width: 84px; margin: 0 auto; opacity: 0; } .technology_box_2 .index_about_a_content .item:hover .icon img.white{width: 84px; margin: 0 auto; opacity: 1;} .technology_box_2 .index_about_a_content .item:hover h2{opacity: 1; } .technology_box_3{ padding-top:100px; padding-bottom:100px;background: linear-gradient(0deg, #ffffff, #e4f6f2);overflow:hidden; } .technology_box_3 .pagewidth{} .technology_box_3 .title{ font-weight:bold; color:var(--main); justify-content:left; display:flex; margin-bottom:120px; } .technology_box_3 .title span{ color:var(--main); font-size:36px; font-weight:bold; margin-right:15px;} .technology_box_3 .title h2{ color:var(--font);font-size:40px; font-weight:300; } .technology_box_3 .content{display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 50px;position: relative; } .technology_box_3 .content .new{ position:relative; z-index:4; transition-duration:0.3s; transform: scale(1);} .technology_box_3 .content .new .box {position:relative; z-index:2;transition-duration:0.3s;background: linear-gradient(0deg,rgba(72, 193, 168, 0.9), rgba(122, 215, 195, 0.9));color: #fff; padding:50px; position:relative; margin:-60px -60px; margin-left: 0;box-shadow:0px 10px 20px rgba(72, 193, 168, .1); } .technology_box_3 .content .new .box h3{ font-size:36px; color:#fff; font-weight:500; margin-bottom:40px; } .technology_box_3 .content .new .box ul{display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 30px; margin-bottom:30px;} .technology_box_3 .content .new .box ul li h4{ font-size:22px; font-weight:500; margin-bottom:10px;color:#fff; } .technology_box_3 .content .new .box ul li p{ font-size:16px; line-height:1.6em; color:#fff; } .technology_box_3 .content .new .box p{ font-size:16px; line-height:1.6em;color:#fff; } .technology_box_3 .content .new .box .tag{ padding-top:40px;font-size:16px; color:#fff; } .technology_box_3 .content .new .box .tag span{background:#fff; color:var(--main); padding: 5px 10px; margin-right: 10px;} .technology_box_3 .content .new .cell{ width:160px; position:absolute; top:-90px; right:-40px;animation: cell 48s linear infinite; z-index:1; opacity: 0; transition-duration:0.6s; } .technology_box_3 .content .new .cell img{width: 100%;} .technology_box_3 .content .new:hover .cell{ z-index:10; opacity: 1; } .technology_box_3 .content .new:hover{transform: scale(1.01);} .technology_box_3 .content .old{ position:relative;z-index:3; transition-duration:0.3s; transform: scale(1);} .technology_box_3 .content .old .box{ transition-duration:0.3s;background:rgba(255, 255, 255, 0.9); padding:40px; position:relative; z-index:2;box-shadow:0px 10px 20px rgba(72, 193, 168, .1); } .technology_box_3 .content .old .box h3{ font-size:28px; color:var(--font); font-weight:500; margin-bottom:40px; } .technology_box_3 .content .old .box ul{display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 30px; margin-bottom: 30px;} .technology_box_3 .content .old .box ul li h4{ font-size:20px; font-weight:500; margin-bottom:10px;color:var(--font); } .technology_box_3 .content .old .box ul li p{ font-size:14px; line-height:1.6em;color:var(--font); } .technology_box_3 .content .old .box p{ font-size:14px; line-height:1.6em;color:var(--font); } .technology_box_3 .content .old .box .tag{ padding-top:40px;font-size:14px; color:var(--font); } .technology_box_3 .content .old .box .tag span{background:#dddddd; color:var(--font); padding: 5px 10px; margin-right: 10px;} .technology_box_3 .content .old .cell{ width:150px; position:absolute; top:-65px; right:10px;animation: cell 48s linear infinite; z-index:1; opacity: 0; transition-duration:0.6s; } .technology_box_3 .content .old .cell img{width: 100%;} .technology_box_3 .content .old:hover .cell{ z-index:10; opacity: 1; } .technology_box_3 .content .old:hover{transform: scale(1.01);} @keyframes cell { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .technology_box_4{ padding-top:100px; padding-bottom:100px;background: linear-gradient(0deg, #ffffff, #e4f6f2);overflow:hidden; } .technology_box_4 .pagewidth{} .technology_box_4 .title{ font-weight:bold; color:var(--main); justify-content:left; display:flex; } .technology_box_4 .title span{ color:var(--main); font-size:36px; font-weight:bold; margin-right:15px;} .technology_box_4 .title h2{ color:var(--font);font-size:40px; font-weight:300; } .technology_box_4 .content{display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 28px; padding-top: 40px;} .technology_box_4 .content .item{background: #fff;box-shadow:0px 10px 20px rgba(72, 193, 168, .1); overflow: hidden;position: relative; padding: 60px 32px; padding-bottom: 120px; transform:scale(1.0); transition-duration: 0.3s;} .technology_box_4 .content .item img{ width:160px; position:absolute; right:-50px; bottom:-50px; opacity:0.3; transition-duration:0.3s; } .technology_box_4 .content .item .number{ font-size:28px;font-family: 'Barlow';color:#fff;background:var(--main); font-style: italic; padding:2px 10px; position:absolute; right:0px; top:0px; border-bottom-left-radius:12px; } .technology_box_4 .content .item h3{font-size: 30px;color: var(--font); font-weight:normal; margin-bottom:15px;} .technology_box_4 .content .item h4{ font-size:20px; color:var(--main); font-weight:normal; margin-bottom:30px; } .technology_box_4 .content .item .description p{ line-height:1.8em; color:var(--font); text-align:justify; } .technology_box_4 .content .item:hover{ transform:scale(1.05); } .technology_box_4 .content .item:hover img{ opacity:1; } .app{background: var(--main); width: 36px; padding: 10px; height: 120px; text-align: center; position: fixed; right: 20px; top:50%; z-index: 33} .app i.ri-file-edit-line{display: block; color: #fff; font-size: 32px; margin: 0 auto; margin-bottom: 5px;} .app span{ font-size:16px; line-height:1.2em; color:#fff; display: block; margin-bottom: 8px; text-align: center;} .app .backtop{ font-size:32px; color:#fff; padding-top:5px; border-top:rgba(255, 255, 255, 0.7) solid 1px; } .CRO_box_1{ padding-top:100px; padding-bottom:100px; background:#fff; } .CRO_box_1 .pagewidth{display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 28px;} .CRO_box_1 .pagewidth .content{} .CRO_box_1 .pagewidth .content .title{ font-weight:bold; color:var(--main); justify-content:left; display:flex; margin-bottom:30px; } .CRO_box_1 .pagewidth .content .title span{ color:var(--main); font-size:36px; font-weight:bold; margin-right:15px;} .CRO_box_1 .pagewidth .content .title h2{ color:var(--font);font-size:40px; font-weight:300; } .CRO_box_1 .pagewidth .content .html p{ color:var(--font); line-height:1.8em; font-size:16px; text-align:justify; margin-bottom:20px; } .CRO_box_1 .pagewidth .content .html p strong{ color:var(--main); } .CRO_box_1 .pagewidth .img{ } .CRO_box_1 .pagewidth .img img{width: 450px; display:block ;margin: 0 auto;} .CRO_box_2{ padding-top:100px; padding-bottom:100px; background:#eef9f7; } .CRO_box_2 .pagewidth .title{ font-weight:bold; color:var(--main); justify-content:left; display:flex; margin-bottom:30px; } .CRO_box_2 .pagewidth .title span{ color:var(--main); font-size:36px; font-weight:bold; margin-right:15px;} .CRO_box_2 .pagewidth .title h2{ color:var(--font);font-size:40px; font-weight:300; } .CRO_box_2 .pagewidth .content{display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 16px;} .CRO_box_2 .pagewidth .content .item{ background:#fff;box-shadow:0px 10px 20px rgba(72, 193, 168, .1); transition-duration:0.3s; transform:scale(1.0); height: 230px; padding-top: 70px; position:relative; overflow: hidden;} .CRO_box_2 .pagewidth .content .item .icon{display: block; margin: 0 auto; height: 72px; width: 72px; position: relative; margin-bottom: 20px;} .CRO_box_2 .pagewidth .content .item .icon img{ position:absolute; width: 100%; height: 100%; object-fit: cover;} .CRO_box_2 .pagewidth .content .item .icon img.color{ opacity:1; } .CRO_box_2 .pagewidth .content .item .icon img.white{ opacity:0; } .CRO_box_2 .pagewidth .content .item img.bg{ opacity:0.2; width:132px; height:132px; position:absolute; right:-50px;bottom:-50px; } .CRO_box_2 .pagewidth .content .item h3{ text-align:center; font-weight:none; font-size:16px; color:var(--main);font-weight:normal; } .CRO_box_2 .pagewidth .content .item:hover{ background:var(--main); transform:scale(1.1); } .CRO_box_2 .pagewidth .content .item:hover .icon img.color{ opacity:0; } .CRO_box_2 .pagewidth .content .item:hover .icon img.white{ opacity:1; } .CRO_box_2 .pagewidth .content .item:hover h3{ text-align:center; font-weight:none; font-size:16px; color:#fff; } .CRO_box_3{ padding-top:100px; padding-bottom:100px; background:#fff; } .CRO_box_3 .pagewidth .title{ font-weight:bold; color:var(--main); justify-content:left; display:flex; margin-bottom:30px; } .CRO_box_3 .pagewidth .title span{ color:var(--main); font-size:36px; font-weight:bold; margin-right:15px;} .CRO_box_3 .pagewidth .title h2{ color:var(--font);font-size:40px; font-weight:300; } .CRO_box_3 .pagewidth .content{display: grid;grid-gap: 28px;grid-template-columns: repeat(3, 1fr);} .CRO_box_3 .pagewidth .content .item{background:#fff;box-shadow:0px 10px 20px rgba(72, 193, 168, .1); padding: 40px; overflow: hidden; position: relative;} .CRO_box_3 .pagewidth .content .item:after{content: ""; position: absolute; border-radius: 50%; right: -240px; top: -300px; width: 500px; height: 500px; background: linear-gradient(230deg, #cbede6, #ffffff 85%);} .CRO_box_3 .pagewidth .content .item img{width: 72px; margin-bottom: 20px;} .CRO_box_3 .pagewidth .content .item h3{ text-align:left; font-weight:none; position: relative; z-index: 4; font-size:30px; color:var(--main);font-weight:normal; margin-bottom:15px;} .CRO_box_3 .pagewidth .content .item p{ color:var(--font); line-height:1.8em; position: relative; z-index: 4; font-size:18px; text-align:justify; } .CRO_box_3 .pagewidth .content .item .number{ transition-duration: 0.3s; position: relative; z-index: 4;background:var(--main); padding:5px 12px; border-radius: 0px 0px 0px 10px; position:absolute; right:0px; top:0px;font-family: 'Barlow'; color:#fff; font-size:24px; font-style:italic; } .CRO_box_4{ padding-top:100px; padding-bottom:100px; background:#eef9f7; } .CRO_box_4 .pagewidth .title{ font-weight:bold; color:var(--main); justify-content:left; display:flex; margin-bottom:30px; } .CRO_box_4 .pagewidth .title span{ color:var(--main); font-size:36px; font-weight:bold; margin-right:15px;} .CRO_box_4 .pagewidth .title h2{ color:var(--font);font-size:40px; font-weight:300; } .CRO_box_4 .pagewidth .content{display: grid;grid-gap: 28px;grid-template-columns: repeat(4, 1fr);} .CRO_box_4 .pagewidth .content .item{ height:280px; position:relative; overflow:hidden;box-shadow:0px 10px 20px rgba(72, 193, 168, .1); } .CRO_box_4 .pagewidth .content .item:after{content: "";left: 0px; right: 0px; bottom: 0px; position: absolute; height: 200px;background: linear-gradient(0deg, rgba(72, 193, 168, 1.0), rgba(72, 193, 168, 0));} .CRO_box_4 .pagewidth .content .item img{ width:100%; height:100%; object-fit:cover; transition-duration: 0.3s} .CRO_box_4 .pagewidth .content .item:hover img{transform: scale(1.05);} .CRO_box_4 .pagewidth .content .item h4{ position:absolute; left:0px; right:0px; z-index: 4; transition-duration: 0.3s; transform: background 0.3s; color: var(--font); bottom:0px; height:70px; line-height:70px; text-align:center; font-size:18px; font-weight:normal; background: linear-gradient(230deg, rgba(228, 246, 242, 1), rgba(255, 255, 255, 1.0) 50%);} .CRO_box_4 .pagewidth .content .item:hover h4{ height:100px; line-height: 100px;color: #fff;background: linear-gradient(0deg, rgba(72, 193, 168, 1.0), rgba(72, 193, 168, 0.6) 85%);-webkit-backdrop-filter:blur(5px); backdrop-filter: blur(5px); } .CRO_box_5{ padding-top:100px; padding-bottom:100px; background:#fff; } .CRO_box_5 .pagewidth .title{ font-weight:bold; color:var(--main); justify-content:left; display:flex; margin-bottom:30px; } .CRO_box_5 .pagewidth .title span{ color:var(--main); font-size:36px; font-weight:bold; margin-right:15px;} .CRO_box_5 .pagewidth .title h2{ color:var(--font);font-size:40px; font-weight:300; } .CRO_box_5 .pagewidth .content{box-shadow:0px 10px 20px rgba(72, 193, 168, .1); background: linear-gradient(230deg, #cbede6, #ffffff 15%); position: relative; margin-bottom: 30px;} .CRO_box_5 .pagewidth .content .subtitle{ transition-duration: 0.3s; background:var(--main); padding:5px 12px; border-radius: 0px 0px 10px 0px ; position:absolute; left:0px; top:0px; color:#fff; font-size:20px; } .CRO_box_5 .pagewidth .advantage{display: grid;grid-gap: 58px;grid-template-columns: repeat(6, 1fr);padding: 50px; } .CRO_box_5 .pagewidth .advantage .item{ overflow: hidden; position: relative;} .CRO_box_5 .pagewidth .advantage .item img{width: 72px; display:block; margin: 0 auto; margin-bottom: 20px;} .CRO_box_5 .pagewidth .advantage .item h3{ text-align:center; font-weight:none; position: relative; z-index: 4; font-size:18px; color:var(--font);font-weight:normal; margin-bottom:15px;} .CRO_box_5 .pagewidth .table{box-shadow:0px 10px 20px rgba(72, 193, 168, .1);} .CRO_box_5 .pagewidth .table table{border-collapse: collapse;} .CRO_box_5 .pagewidth .table th{background: var(--main); color: #fff; font-size: 16px; text-align: center;padding:20px;} .CRO_box_5 .pagewidth .table td{ padding:20px; color:var(--font); font-size:16px; line-height:1.6em;border: 1px solid #ececec; text-align:center; } .list_news_hot{ padding-top:80px; padding-bottom:80px; } .list_news_hot .content{display:grid; grid-template-columns:repeat(2, 1fr); grid-gap:28px; } .list_news_hot .content .item a{ height:360px; position:relative; overflow:hidden; display: block;} .list_news_hot .content .item a img{ width:100%; height:100%; object-fit:cover; transition-duration: 0.3s} .list_news_hot .content .item a:hover img{transform: scale(1.05);} .list_news_hot .content .item a .info{ position:absolute; z-index:2; left:0px; right:0px; bottom:0px; background:rgba(255, 255, 255, .4); padding:30px; -webkit-backdrop-filter:blur(8px); backdrop-filter: blur(8px);} .list_news_hot .content .item a .info p{ font-size:18px;font-family: 'Barlow'; color:var(--font); margin-bottom:10px; } .list_news_hot .content .item a .info h3{ color:var(--font); font-size:24px; font-weight:normal; } .list_news{ padding-bottom:80px; } .list_news .cat_title{ font-weight:bold; color:var(--main); justify-content:left; display:flex; margin-bottom:30px; } .list_news .cat_title span{ color:var(--main); font-size:36px; font-weight:bold; margin-right:15px;} .list_news .cat_title h2{ color:var(--font);font-size:40px; font-weight:300; } .list_news .article-list{display: grid; grid-template-columns:repeat(3, 1fr); grid-gap: 38px 28px;} .list_news .article-list .item .img{ height:220px; position:relative; overflow:hidden; margin-bottom: 20px;} .list_news .article-list .item .img img{ width:100%; height:100%; object-fit:cover; transition-duration: 0.3s} .list_news .article-list .item:hover .img img{transform: scale(1.05);} .list_news .article-list .item .info .time{ font-size: 16px; font-family: 'Barlow'; color: var(--font); margin-bottom: 10px;} .list_news .article-list .item .info h2{ font-weight:normal; } .list_news .article-list .item .info h2 a{ font-size:20px; color:var(--font); } .show_news { padding-top:60px; padding-bottom:60px; } .show_news .pagewidth{display: grid; grid-template-columns: 8fr 4fr; grid-gap: 28px;} .show_news .content{ padding-right:45px; } .show_news .content .article_time{font-size: 16px; font-weight: normal; font-family: 'Barlow'; color: var(--font); margin-bottom: 20px;} .show_news .content .article_title h1{font-size: 40px; font-weight: 400;color: var(--font);} .show_news .content .article_title{ border-bottom:#ddd solid 1px; padding-bottom:30px; margin-bottom:30px; } .show_news .content .article_html{ font-size:18px; color:var(--font); line-height:32px; margin-bottom:0px; } .show_news .content .article_html p{ margin-bottom:20px; } .show_news .content .article_other{ padding-top:30px; border-top:#ddd solid 1px; } .show_news .content .article_other a{ font-size:18px; color:var(--font); } .show_news .content .article_other a:hover{ color:var(--main); } .show_news .content .article_other p{ margin-bottom:10px; } .show_news .side .side_title{display:flex; justify-content:space-between; align-items:center; font-weight:bold; color:var(--main); justify-content:left; display:flex; align-items:center; margin-bottom:35px; } .show_news .side .side_title span{ color:var(--main); font-size:22px; font-weight:bold; margin-right:15px;} .show_news .side .side_title h2{ color:var(--font); font-size:24px; font-weight:500; } .show_news .side ul li{display: grid; grid-template-columns: auto 200px; border:#ececec solid 1px; margin-bottom: 20px;} .show_news .side ul li .info{ position: relative; z-index: 1; margin-right: 0px; transition-duration: 0.3s; background: linear-gradient(230deg, rgba(228, 246, 242, 1), rgba(255, 255, 255, 1.0) 40%);} .show_news .side ul li .info h2{ padding:15px 20px; padding-bottom: 10px; font-weight: normal; font-size:17px; line-height:26px;display: -webkit-box; -webkit-line-clamp:3; -webkit-box-orient: vertical; overflow: hidden; } .show_news .side ul li .info h2 a{ transition-duration: 0.3s; color:var(--font); } .show_news .side ul li .info p{ transition-duration: 0.3s;font-size: 14px; color: #999; padding-left: 20px;font-family: 'Barlow'; } .show_news .side ul li:hover .info{background: linear-gradient(90deg, rgba(72, 193, 168, 1.0) 76%, rgba(72, 193, 168, 0) 100%); position: relative; z-index: 1; margin-right: -100px; padding-right:100px;} .show_news .side ul li:hover .info h2 a{ color:#fff; } .show_news .side ul li:hover .info p{ color:#fff; } .show_news .side ul li .img img{ width:100%; height:100%; object-fit:cover; } .show_news .side ul li .img { width:100%; height:140px; overflow:hidden; } .list_contact_form{ padding-top:100px; padding-bottom:100px; background:#fff; } .list_contact_form .cat_title{ font-weight:bold; color:var(--main); justify-content:left; display:flex; margin-bottom:30px; } .list_contact_form .cat_title span{ color:var(--main); font-size:36px; font-weight:bold; margin-right:15px;} .list_contact_form .cat_title h2{ color:var(--font);font-size:40px; font-weight:300; } .list_contact_form .layui-form .four{display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 28px;} .list_contact_form .layui-form .four .layui-form-label{display: block; float: none; padding: 0; line-height: auto; text-align: left; width: 100%; color: var(--font); margin-bottom: 10px;} .list_contact_form .layui-form .four .layui-form-label em{ font-style:inherit; color:#ce0000; position: relative; top: 3px;} .list_contact_form .layui-form .four .layui-input-block{ margin-left:0; } .list_contact_form .layui-form .layui-input-block{ margin-left:0; } .list_contact_form .layui-form .layui-input{ height:55px; } .list_contact_form .layui-form .layui-btn{ height:55px; } .list_contact_form .layui-form .layui-form-submit{display:flex; align-items: center; padding-top: 20px; justify-content: center;} .list_contact_form .layui-form .layui-form-submit .layui-btn{ width:300px; } .list_contact_info{ padding-top:100px; padding-bottom:100px; background:#f3fbf9; } .list_contact_info .cat_title{ font-weight:bold; color:var(--main); justify-content:left; display:flex; margin-bottom:30px; } .list_contact_info .cat_title span{ color:var(--main); font-size:36px; font-weight:bold; margin-right:15px;} .list_contact_info .cat_title h2{ color:var(--font);font-size:40px; font-weight:300; } .list_contact_info .content{display: grid; grid-template-columns: repeat(2, 1fr);} .list_contact_info .content .info{ padding:40px; background:#fff;box-shadow:0px 10px 20px rgba(72, 193, 168, .1); } .list_contact_info .content .info ul li{display: flex; color: #333333; font-size: 17px; justify-content: space-between;border-bottom: #ececec solid 1px; padding-top: 15px; padding-bottom: 15px;} .list_contact_info .content .info ul li i{width:25px;} .list_contact_info .content .info ul li .name{width:90px; text-align: left} .list_contact_info .content .info ul li .con{width: calc(100% - 105px); text-align: left;} .list_contact_info .content .info ul li .con img{width: 100px;} .list_contact_info .content .info ul li .con span{ margin-right:30px; } .list_contact_info .content .info .wechatcontent{} .list_contact_info .content .info ul li .wechatcontent p{width: 100px; text-align: center; font-size: 14px; color: #333;} .list_contact_info .content .map{ box-shadow:0px 10px 20px rgba(72, 193, 168, .1);} .list_contact_info .content .info ul li:last-child{ border-bottom:none; } .list_project{ padding-top:80px; padding-bottom:80px; } .list_project .article-list{display:grid; grid-template-columns:repeat(2, 1fr); grid-gap:28px; } .list_project .article-list .item { height:460px; position:relative; overflow:hidden; display: block;box-shadow:0px 10px 20px rgba(72, 193, 168, .1); border:#ececec solid 1px;} .list_project .article-list .item img{ width:100%; height:100%; object-fit:cover; transition-duration: 0.3s} .list_project .article-list .item:hover img{transform: translateY(-50px);} .list_project .article-list .item .info{ transition-duration: 0.3s; overflow: hidden; position:absolute; z-index:2; left:0px; right:0px; bottom:-60px; background:#fff; padding:30px; -webkit-backdrop-filter:blur(8px); backdrop-filter: blur(8px); transition-duration: 0.3s} .list_project .article-list .item .info h2{ color:var(--font); font-size:30px; font-weight:normal; margin-bottom:10px;transition-duration: 0.3s} .list_project .article-list .item .info p{ font-size:16px; color:var(--font); margin-bottom:20px;transition-duration: 0.3s} .list_project .article-list .item .info .more a{display: inline-block; border:#fff solid 1.5px; transition-duration: 0.3s; font-weight: normal; color:#fff; height: 44px; padding-left: 20px; padding-right: 20px; line-height: 44px;} .list_project .article-list .item .info .more a i{ margin-left:20px; font-weight:normal; } .list_project .article-list .item .info .more a:hover{background: #fff; color:var(--font); border: #fff solid 1px;} .list_project .article-list .item:hover .info{background:rgba(72, 193, 168, 0.7); bottom: 0;} .list_project .article-list .item:hover .info h2{color: #fff;} .list_project .article-list .item:hover .info p{color: #fff;} .list_contact_info .cat_title{ font-weight:bold; color:var(--main); justify-content:left; display:flex; margin-bottom:30px; } .list_contact_info .cat_title span{ color:var(--main); font-size:36px; font-weight:bold; margin-right:15px;} .list_contact_info .cat_title h2{ color:var(--font);font-size:40px; font-weight:300; } .show_project{background: linear-gradient(180deg, #f2faf9, #ffffff 90%); padding-bottom: 80px;} .show_project .show_project_content{ padding:70px 50px;padding-bottom: 0; padding-right: 0; position:relative; margin-top:-100px;background:#fff; position:relative; z-index:2; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 50px;box-shadow:0px 10px 20px rgba(72, 193, 168, .15);} .show_project .show_project_content .text .title{ font-weight:bold; color:var(--main); justify-content:left; display:flex; margin-bottom:12px; } .show_project .show_project_content .text .title span{ color:var(--main); font-size:20px; font-weight:bold; margin-right:15px;} .show_project .show_project_content .text .title h2{ color:var(--font);font-size:24px; font-weight: normal; } .show_project .show_project_content .text .html{ font-size:18px; color:var(--font); padding-left:20px; margin-bottom:40px; line-height:1.8em; } .show_project .show_project_content .text .button{ padding-left:20px; } .show_project .show_project_content .text .button a{ color:#fff; background:var(--main);display:inline-block; width:300px; height:66px; line-height:66px; text-align:center; font-size:18px; } .show_project .show_project_content .img img{width: 100%;} .show_project .show_project_product{ padding-top:80px; } .show_project .show_project_product .title{ font-weight:bold; color:var(--main); justify-content:left; display:flex; margin-bottom:30px; } .show_project .show_project_product .title span{ color:var(--main); font-size:36px; font-weight:bold; margin-right:15px;} .show_project .show_project_product .title h2{ color:var(--font);font-size:40px; font-weight:300; } .show_project .show_project_product .content{box-shadow:0px 10px 20px rgba(72, 193, 168, .15); padding: 30px; background: #fff;} .show_project .show_project_product .content ul.table_title{display: grid; grid-template-columns: 2fr 3fr 2fr 1.5fr 2fr 2fr 50px; border-bottom: #ddd solid 1px;} .show_project .show_project_product .content ul li{ padding:20px; color: var(--font); } .show_project .show_project_product .content ul.table_item{display: grid; grid-template-columns: 2fr 3fr 2fr 1.5fr 2fr 2fr 90px; background: #fff; transition-duration: 0.3s; align-items: center;} .show_project .show_project_product .content ul.table_item li{ padding:20px; font-size: 16px; color: var(--font);} .show_project .show_project_product .content ul.table_item li img{width: 100%;} .show_project .show_project_product .content ul.table_item li.name{ font-size:18px!important; } .show_project .show_project_product .content ul.table_item:hover{background: #f6fbfa} .show_project .show_project_product .content ul.table_item li:last-child a{width: 100%; height: 180px; cursor: pointer; line-height: 180px; transition-duration: 0.3s; display: block; background: #fff; text-align: center; font-size: 16px; color: #fff;} .show_project .show_project_product .content ul.table_item:hover li:last-child a{width: 100%; height: 180px; background: var(--main); text-align: center; font-size: 16px; color: #fff;} .show_project .show_project_certification{ padding-top:80px; } .show_project .show_project_certification .title{ font-weight:bold; color:var(--main); justify-content:left; display:flex; margin-bottom:30px; } .show_project .show_project_certification .title span{ color:var(--main); font-size:36px; font-weight:bold; margin-right:15px;} .show_project .show_project_certification .title h2{ color:var(--font);font-size:40px; font-weight:300; } .show_project .show_project_certification .content .swiper-slide{width: auto;} .show_project .show_project_certification .content .swiper-slide img{ border:#ddd solid 1px; height: 300px; } .show_project .show_project_certification .content .swiper{ padding-bottom:50px; } .show_project .show_project_certification .content .swiper-pagination .swiper-pagination-bullet{ border-radius: 4px; width:50px; height:2px; background:var(--font); } .show_project .show_project_certification .content .swiper-pagination .swiper-pagination-bullet-active {background:var(--main);} .show_product{ padding-bottom:80px; } .show_product .content{ padding-bottom: 0; padding-right: 0; position:relative; margin-top:-100px;position:relative; z-index:2; display: grid; grid-template-columns: 330px auto; grid-gap: 30px;} .show_product .content .side{ box-shadow:0px 10px 20px rgba(72, 193, 168, .1); background: #fff;} .show_product .content .side ul li a{ color: var(--font); display: block; font-size:16px; padding-top:20px; padding-bottom:20px; text-align:center; } .show_product .content .side ul li.active a{background: var(--main); color: #fff;} .show_product .content .html{ box-shadow:0px 10px 20px rgba(72, 193, 168, .1); background: #fff; padding: 30px;} .show_product .content .bottom { text-align:center; padding-top: 40px;} .show_product .content .bottom p{ padding-bottom:20px; } .show_product .content .bottom p a{ color:var(--main); font-size:16px; text-decoration:underline; text-underline-offset: 3px;} .show_product .content .bottom .button a{ background:var(--main); color:#fff; font-size:16px; padding:20px 50px; display: inline-block;} @media screen and (max-width: 2560px) { } @media screen and (max-width: 1920px) { } @media screen and (max-width: 1600px) { .indexabout .title{ width: 1240px; } .indexsolution .title{ width: 1240px; } .indexabout .index_about_a .description{ width:592px; padding-left:648px; margin-left: -620px;} .indexbanner .thumbs{width: 1240px; } .indexabout .thumbs{width: 1240px; } .indexsolution{ height:880px; } .indexsolution .thumbs{ } .indexsolution .thumbs{margin-left: 226px;} .indexbanner .swiper-slide .button{width: 1240px; margin-left: -640px;} .indexsolution .thumbs .swiper-slide .box{ width: 350px;} .indexabout .index_about_a .index_about_a_content .item:hover { top: 0px;} .indexabout .index_about_a .index_about_a_content .item:hover .icon{ height:100px; width:100px;background:var(--main); border:var(--main) solid 1px;} .indexabout .index_about_a .index_about_a_content .item:hover .icon img.color{width: 60px; margin: 0 auto; opacity: 0; } .indexabout .index_about_a .index_about_a_content .item:hover .icon img.white{width: 60px; margin: 0 auto; opacity: 1;} .indexabout .index_about_a .index_about_a_content{width: 1240px;margin-left: -620px; } .indexabout .index_about_b{ width: 1240px; margin-left: -620px; } .indexabout .index_about_b .description{ padding-left: 24px;} .indexabout{ height: 750px;} .indexabout .index_about_c{ width: 1240px; margin-left: -620px; } .about_box_3 .left{ height: 620px;} .about_box_3 .right{ height: 620px;} .technology_box_2 .index_about_a_content{ width: 1240px; margin-left: -620px; } } @media screen and (max-width: 1440px) { } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1024px) { } @media screen and (max-width: 480px) { .indexbanner{ height:100vh; overflow:hidden; position: relative;} .indexbanner:after{ height:240px;content:""; position:absolute; left:0px; right:0px; top:0px; z-index:1; background: linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7)); } .indexbanner .content{ height:100%; } .indexbanner .swiper{ height:100%; } .indexbanner .swiper-wrapper{ } .indexbanner .swiper-slide{ overflow:hidden; position:relative;} .indexbanner .swiper-slide img{ width: 100%; height:100%; object-fit:cover; } .indexbanner .swiper-slide img.pc{ width: 100%; height:100%; object-fit:cover;display:none; } .indexbanner .swiper-slide img.mobile{ width: 100%; height:100%; object-fit:cover;display:block; } .indexbanner .swiper-slide a{ color:#fff; } .indexbanner .swiper-slide .button{position: absolute; width: auto; text-align: left; left: 20px; right: 20px; margin-left: 0px; bottom: 120px; z-index: 3} .indexbanner .swiper-slide .button a{display: inline-block; border:#fff solid 1.5px; transition-duration: 0.3s; font-weight: normal; color: #fff; height: 44px; padding-left: 20px; padding-right: 20px; line-height: 44px;} .indexbanner .swiper-slide .button a i{ margin-left:20px; font-weight:normal; } .indexbanner .swiper-slide .button a:hover{background: var(--main); color: #fff; border: var(--main) solid 1px;} .indexbanner .thumbs{width: auto; margin:0 auto; position:absolute; left: 0px; right:0px; transform: translateX(0%); bottom:30px!important; height:auto!important; display: none } .indexbanner .thumbs .swiper-slide{ background:rgba(255, 255, 255, 0.3); color: var(--font); font-size: 14px; height: auto; padding-top: 20px; padding-bottom: 20px; text-align: center; line-height: 1.4em; transition-duration:0.3s;-webkit-backdrop-filter:blur(5px); backdrop-filter: blur(5px);} .indexbanner .thumbs .swiper-slide-thumb-active{background:rgba(72, 193, 168, 0.8); color: #fff;} .indexabout{overflow:hidden; position: relative;height:660px; background: #fff;} .indexabout .title{ position:absolute; top:60px; width: auto; padding-right: 0; margin:0 auto; position:absolute; left: 20px;transform: translateX(0%); z-index:2;display:flex; justify-content:space-between; align-items:center; } .indexabout .title{font-weight:bold; color:var(--main); justify-content:left; display:flex; align-items:center; } .indexabout .title span{ color:var(--main); font-size:24px; font-weight:bold; margin-right:15px;} .indexabout .title h2{ color:var(--font); font-size:24px; font-weight:500; } .indexabout .swiper-content{ height:100%; } .indexabout .swiper-wrapper{ height:100%; } .indexabout .swiper-slide{ height:100%; overflow:hidden; position:relative;} .indexabout .thumbs{width: auto; margin:0 auto; position:absolute; left:0px;transform: translateX(0%); bottom:20px; right:0px; } .indexabout .thumbs .swiper-slide{background:rgba(247, 248, 251, 0.9); color: var(--font); font-size: 16px; height: 60px; text-align: center; line-height: 60px; transition-duration:0.3s;-webkit-backdrop-filter:blur(5px); backdrop-filter: blur(5px);} .indexabout .thumbs .swiper-slide-thumb-active{background:rgba(72, 193, 168, 0.8); color: #fff;} .indexabout .index_about_a{ height:100%; padding-top:100px; } .indexabout .circle1{animation: moveAndBlur 8s linear infinite; content:""; position:absolute; left:-200px; top:-200px; height: 500px; width: 500px; border-radius: 50%; background: linear-gradient(0deg, var(--main), #fff); opacity:0.15 } .indexabout .circle2{animation: moveAndBlur 8s linear infinite; content:""; position:absolute; right:-200px; top:300px; height: 350px; width: 350px; border-radius: 50%; background: linear-gradient(0deg, var(--main), #fff); opacity:0.15 } @keyframes moveAndBlur { 0%, 100% { transform:translate(0, 0); filter: blur(0); } 25% { transform: translate(30px, 0); filter: blur(5px); } 50% { transform: translate(0, 30px); filter: blur(15px); } 75% { transform: translate(-30px, 0); filter: blur(5px); }} .indexabout .index_about_a .description{ position: initial; top:150px; width:auto; padding-top: 10px; padding-left:0px; margin:0 auto; position:absolute; left: 20px; right: 20px; margin-left: 0px; z-index:2;} .indexabout .index_about_a .description h3{font-size: 30px; margin-bottom: 20px; font-weight: normal; color: var(--main);} .indexabout .index_about_a .description p{ font-size:16px; color:var(--font); line-height:1.8em; margin-bottom:20px; } .indexabout .index_about_a .index_about_a_content{ display:none } .indexabout .swiper-slide .index_about_a > *{opacity: 0; transition: all 1s; transform: translateX(40px); } .indexabout .swiper-slide-active .index_about_a > * { opacity: 1;transform: translateX(0px); } .indexabout .swiper-slide-active .index_about_a > *:nth-child(1) { transition-delay: 0.8s;transform: translateX(0px);} .indexabout .swiper-slide-active .index_about_a > *:nth-child(2) { transition-delay: 1s;transform: translateX(0px);} .indexabout .swiper-slide-active .index_about_a > *:nth-child(3) { transition-delay: 1.2s;transform: translateX(0px);} .indexabout .swiper-slide-active .index_about_a > *:nth-child(4) { transition-delay: 1.4s;transform: translateX(0px);} .indexabout .swiper-slide-active .index_about_a .waves{display: none;} .indexabout .index_about_b{ position:absolute; top:0px; width:auto; margin:0 auto; left: 20px; margin-left: 0px; right: 0px; z-index:2;display: flex; justify-content: space-between; align-items: flex-end;} .indexabout .index_about_b .description{ width:50%; padding-top:160px; padding-left:0px; } .indexabout .index_about_b .description h3{ font-size:30px; color:var(--main); font-weight:normal; margin-bottom:24px; } .indexabout .index_about_b .description h4{ font-size:16px; color:var(--font); font-weight:normal; margin-bottom:24px; line-height:1.6em } .indexabout .index_about_b .description p{ font-size:14px; color:var(--font); line-height:1.8em;} .indexabout .index_about_b .button{display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 10px; width:100%; padding-top:130px; height:auto; position:absolute;left:0px; bottom:-130px; right:0px; } .indexabout .index_about_b .button .item{ border:#ececec solid 1px; text-align: center; background:#fff; padding:15px; box-shadow:0px 5px 40px rgba(0, 0, 0, 0.05); transition-duration: 0.3s; } .indexabout .index_about_b .button .item:hover{ transform:scale(1.1); } .indexabout .index_about_b .button .item a{display: inline-block; display: flex;justify-content: center; align-items: center;} .indexabout .index_about_b .button .item i{ font-size:24px; color:var(--font); margin-bottom:0px; display: inline-block; } .indexabout .index_about_b .button .item h3{ font-weight: normal; font-size: 14px; color: var(--font);} .indexabout .index_about_b .photo{ width:50%; } .indexabout .index_about_b .photo img{width:100%} .indexabout .swiper-slide .index_about_b > *{opacity: 0; transition: all 1s;transform: translateX(40px); } .indexabout .swiper-slide-active .index_about_b > * { opacity: 1; transform: translateX(0px); } .indexabout .swiper-slide-active .index_about_b > *:nth-child(1) { transition-delay: 0.8s;transform: translateX(0px);} .indexabout .swiper-slide-active .index_about_b > *:nth-child(2) { transition-delay: 1s;transform: translateX(0px);} .indexabout .swiper-slide-active .index_about_b > *:nth-child(3) { transition-delay: 1.2s;transform: translateX(0px);} .indexabout .swiper-slide-active .index_about_b > *:nth-child(4) { transition-delay: 1.4s;transform: translateX(0px);} .indexabout .index_about_c{ position:absolute; width:auto; margin:0 auto; position:absolute; left: 20px; right: 20px; margin-left:0px; z-index:2; display: grid; grid-template-columns: repeat(1, 1fr); grid-gap: 10px;} .indexabout .index_about_c .item{ padding:20px ; top:130px; position: relative; padding-bottom: 20px; overflow: hidden; position: relative; background: linear-gradient(200deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(238, 249, 247, 1) 100%); box-shadow:0px 5px 40px rgba(0, 0, 0, 0.05); } .indexabout .index_about_c .item .number{ transition-duration: 0.3s; background:var(--main); padding:5px 12px; border-radius: 0px 0px 0px 10px; position:absolute; right:0px; top:0px;font-family: 'Barlow'; color:#fff; font-size:24px; font-style:italic; } .indexabout .index_about_c .item .icon{ transition-duration: 0.3s; width:80px; height:80px; position:absolute; right:-30px; bottom:-30px;opacity:0.4 } .indexabout .index_about_c .item .icon img{ width:100%; } .indexabout .index_about_c .item h2{ transition-duration: 0.3s; font-weight: normal; font-size: 18px; color: var(--font); margin-bottom: 5px;} .indexabout .index_about_c .item p{ font-weight: normal; font-size:14px; color: var(--font); line-height: 1.8em;} .indexabout .swiper-slide .index_about_c > *{opacity: 0; transition: all 1s;transform: translateX(40px); } .indexabout .swiper-slide-active .index_about_c > * { opacity: 1; transform: translateX(0px); } .indexabout .swiper-slide-active .index_about_c > *:nth-child(1) { transition-delay: 0.8s;transform: translateX(0px);} .indexabout .swiper-slide-active .index_about_c > *:nth-child(2) { transition-delay: 1s;transform: translateX(0px);} .indexabout .swiper-slide-active .index_about_c > *:nth-child(3) { transition-delay: 1.2s;transform: translateX(0px);} .indexabout .swiper-slide-active .index_about_c > *:nth-child(4) { transition-delay: 1.4s;transform: translateX(0px);} .indexabout .index_about_c .item:hover .number{padding:8px 16px;} .indexabout .index_about_c .item:hover h2{ color: var(--main); } .indexabout .index_about_c .item:hover .icon{ opacity: 1;right:-30px; bottom:-30px;} /* 每个圆圈不同的浮动动画 */ .indexabout .index_about_a .index_about_a_content .item:nth-child(1) {animation: float-1 6s ease-in-out infinite;} .indexabout .index_about_a .index_about_a_content .item:nth-child(2) {animation: float-2 5s ease-in-out infinite;} .indexabout .index_about_a .index_about_a_content .item:nth-child(3) { animation: float-3 7s ease-in-out infinite;} .indexabout .index_about_a .index_about_a_content .item:nth-child(4) {animation: float-4 6.5s ease-in-out infinite;} .indexabout .index_about_a .index_about_a_content .item:nth-child(5) { animation: float-5 5.5s ease-in-out infinite;} .indexabout .index_about_a .index_about_a_content .item:nth-child(6) { animation: float-6 6.5s ease-in-out infinite;} .indexabout .index_about_a .index_about_a_content .item:nth-child(7) {animation: float-7 6s ease-in-out infinite;} .indexsolution{overflow:hidden; position: relative;height:600px; background: #fff;} .indexsolution .swiper-content{ height:100%; } .indexsolution .swiper-content .swiper-slide { position:relative; } .indexsolution .swiper-content .swiper-slide:after{ content:"";left: 0px; right: 0px; bottom: 0px; z-index: 3; position: absolute; height: 300px;background: linear-gradient(0deg, rgba(72, 193, 168, 1.0), rgba(72, 193, 168, 0)); } .indexsolution .swiper-content .swiper-slide img{ width:100%; height:100%;object-fit:cover; object-position:-260px; } .indexsolution .swiper-content .swiper-slide .text{display:block; position: absolute; left: 20px; bottom: 60px; right: 20px; z-index: 4;} .indexsolution .swiper-content .swiper-slide .text .solution_name{font-size: 24px; color: #fff; margin-bottom: 20px;} .indexsolution .swiper-content .swiper-slide .text .button{width: auto; text-align: left; left: 20px; right: 20px; margin-left: 0px; bottom: 120px; z-index: 3} .indexsolution .swiper-content .swiper-slide .text .button a{display: inline-block; border:#fff solid 1.5px; transition-duration: 0.3s; font-weight: normal; color: #fff; height: 44px; padding-left: 20px; padding-right: 20px; line-height: 44px;} .indexsolution .swiper-content .swiper-slide .text .button a i{ margin-left:20px; font-weight:normal; } .indexsolution .swiper-content .swiper-slide .text .button a:hover{background: var(--main); color: #fff; border: var(--main) solid 1px;} .indexsolution .swiper-wrapper{ height:100%; } .indexsolution .swiper-slide{ height:100%; overflow:hidden; position:relative;} .indexsolution .title{ position:absolute; top:60px; width: auto; margin:0 auto; position:absolute; left: 20px;transform: translateX(0%); z-index:2;display:flex; justify-content:space-between; align-items:center; } .indexsolution .title{font-weight:bold; color:var(--main); justify-content:left; display:flex; align-items:center; } .indexsolution .title span{ color:var(--main); font-size:24px; font-weight:bold; margin-right:15px;} .indexsolution .title h2{ color:var(--font); font-size:24px; font-weight:500; } .indexsolution .thumbs{display: none!important} .indexsolution{background: #fff;} .indexsolution .swiper-pagination{ position:absolute; right:auto!important; left:auto!important; margin-left: 0px;} .indexsolution .swiper-pagination .swiper-pagination-bullet{background:#fff; opacity: 0.5; margin-top: 10px!important; margin-bottom: 10px!important; height: 6px; width: 6px; border-radius: 6px; transition-duration: 0.3s;} .indexsolution .swiper-pagination .swiper-pagination-bullet-active{background: #fff;height: 6px; width: 16px; opacity: 1} .indexcro{background: #fff; height: 700px; overflow: hidden; position: relative; padding-top: 60px;} .indexcro .pagewidth{display: block; justify-content: space-between; align-items: center;} .indexcro .content{width: 100%;} .indexcro .content .description{font-size: 16px; color: var(--font); line-height: 1.8em; margin-bottom: 30px;} .indexcro .content .title span{ color:var(--main); font-size:24px; margin-right:15px; position: relative; top: -3px; font-weight: normal;} .indexcro .content .title strong{font-family: 'Barlow'; font-size: 24px; color: var(--font); font-weight: 500;} .indexcro .content .title h2{ color:#666; font-size:24px; font-weight:normal; margin-bottom:30px; } .indexcro .content .button { position:relative; z-index:1 } .indexcro .content .button a{display: inline-block;border:#ddd solid 2px; padding: 16px 30px; color: var(--font); transition-duration:0.3s;} .indexcro .content .button a:hover{display: inline-block;border:var(--main) solid 2px; background: var(--main); padding: 16px 30px; color:#fff;} .indexcro .rotate{ width:100%; ; } .indexcro .circle1{animation: moveAndBlur 8s linear infinite; content:""; position:absolute; left:-200px; top:-100px; height: 500px; width: 500px; border-radius: 50%; background: linear-gradient(0deg, var(--main), #fff); opacity:0.15 } .indexcro .circle2{animation: moveAndBlur 8s linear infinite; content:""; position:absolute; right:-200px; top:300px; height: 350px; width: 350px; border-radius: 50%; background: linear-gradient(0deg, var(--main), #fff); opacity:0.15 } .solar-system {width: 350px; height: 350px; position: relative; margin: 50px auto; transform: scale(0.5);} .sun {width: 280px; height: 280px; background: #48c1a8; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; text-align: center;} .sun span{ font-size:24px;text-align: center;display:block; width:100%; font-weight:bold; color:#fff; } .orbit {position: absolute; top: 50%; left: 50%; border-radius: 50%; transform: translate(-50%, -50%); ;} .planet {position: absolute; top: 50%; left: 50%; width: 90px; height: 90px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; transform-origin: 50% 50%;transition-duration: 0.3s; text-align: center;} .orbit:nth-child(2) { width: 700px; height: 700px; animation: orbit 30s linear infinite; border:rgba(0, 0, 0, 0.04) solid 1px; font-size: 12px;} .orbit:nth-child(3) { width: 600px; height: 600px; animation: orbit 30s linear infinite; border:rgba(0, 0, 0, 0.06) solid 1px;font-size: 13px;} .orbit:nth-child(4) { width: 500px; height: 500px; animation: orbit 30s linear infinite; border:rgba(0, 0, 0, 0.08) solid 1px;font-size: 14px; } .orbit:nth-child(5) { width: 400px; height: 400px; animation: orbit 30s linear infinite; border:rgba(0, 0, 0, 0.1) solid 1px; font-size: 15px;} .orbit:nth-child(2) .planet {background: #fff;border:#ddd solid 1px; color: #666; transform: translate(-50%, -50%) rotate(0deg) translateX(350px) rotate(-0deg);} .orbit:nth-child(2) .planet:nth-child(2) {transform: translate(-50%, -50%) rotate(120deg) translateX(350px) rotate(-120deg);} .orbit:nth-child(3) .planet {background:rgba(72, 193, 168, 0.7); transform: translate(-50%, -50%) rotate(90deg) translateX(300px) rotate(-90deg);} .orbit:nth-child(3) .planet:nth-child(2) {transform: translate(-50%, -50%) rotate(270deg) translateX(300px) rotate(-270deg);} .orbit:nth-child(3) .planet:nth-child(3) {transform: translate(-50%, -50%) rotate(170deg) translateX(300px) rotate(-170deg);} .orbit:nth-child(4) .planet { background: #fff;border:#ddd solid 1px; color: #666; transform: translate(-50%, -50%) rotate(60deg) translateX(250px) rotate(-60deg);} .orbit:nth-child(4) .planet:nth-child(2) {transform: translate(-50%, -50%) rotate(180deg) translateX(250px) rotate(-180deg);} .orbit:nth-child(4) .planet:nth-child(3) {transform: translate(-50%, -50%) rotate(300deg) translateX(250px) rotate(-300deg);} .orbit:nth-child(5) .planet {background:rgba(72, 193, 168, 0.7); transform: translate(-50%, -50%) rotate(45deg) translateX(200px) rotate(-45deg);} .orbit:nth-child(5) .planet:nth-child(2) {transform: translate(-50%, -50%) rotate(135deg) translateX(200px) rotate(-135deg);} .orbit .planet:hover{ box-shadow:0px 5px 20px rgba(72, 193, 168, .2); z-index:444; position:relative; } @keyframes orbit {from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); }} .orbit:nth-child(2) .planet span{animation: rotate 30s linear infinite reverse;} .orbit:nth-child(3) .planet span{animation: rotate 30s linear infinite reverse;} .orbit:nth-child(4) .planet span{ animation: rotate 30s linear infinite reverse;} .orbit:nth-child(5) .planet span{animation: rotate 30s linear infinite reverse;} @keyframes rotate {to {transform: rotate(360deg);}} .indexcellstorebio{background: url(../images/indexaboutbg.jpg) no-repeat center; background-size:cover; padding-top:60px; padding-bottom:60px; } .indexcellstorebio .title_box{display:flex; justify-content: space-between; align-items:center; padding-bottom:30px; } .indexcellstorebio .title{display:flex; justify-content:space-between; align-items:center; font-weight:bold; color:var(--main); justify-content:left; display:flex; align-items:center; } .indexcellstorebio .title span{ color:var(--main); font-size:24px; font-weight:bold; margin-right:15px;} .indexcellstorebio .title h2{ color:var(--font); font-size:24px; font-weight:500; } .indexcellstorebio .more a{display: inline-block; border:var(--font) solid 1.5px; transition-duration: 0.3s; font-size: 14px; font-weight: normal; color: var(--font); height: 36px; padding-left: 10px; padding-right: 10px; line-height: 36px;} .indexcellstorebio .more a i{ margin-left:20px; font-weight:normal; } .indexcellstorebio .more a:hover{background: var(--main); color: #fff; border: var(--main) solid 1px;} .indexcellstorebio .content{ display:block; grid-template-columns:4fr 5fr 3fr;} .indexcellstorebio .content .img{ height:280px; } .indexcellstorebio .content .img img{ height:100%;width:100%; object-fit:cover; } .indexcellstorebio .content .info{background:rgba(255, 255, 255, 0.4); padding: 20px; } .indexcellstorebio .content .info h3{font-size: 24px; color: var(--main); margin-bottom: 10px;font-weight: normal;} .indexcellstorebio .content .info p{ color:var(--font); line-height:1.8em; font-size:14px; text-align:justify; margin-bottom:1px; } .indexcellstorebio .content .info p:last-child{ margin-bottom:0; } .indexcellstorebio .content .advantage{background: var(--main);} .indexcellstorebio .content .advantage ul{ padding:20px; } .indexcellstorebio .content .advantage ul li{ border-bottom:rgba(255, 255, 255, 0.4) solid 1px; padding-bottom:15px; padding-top:15px; } .indexcellstorebio .content .advantage ul li:last-child{ border-bottom:none; } .indexcellstorebio .content .advantage ul li h2{display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;} .indexcellstorebio .content .advantage ul li h2 span{color: #fff; font-size: 24px; font-weight: normal;} .indexcellstorebio .content .advantage ul li h2 img{ height:32px; } .indexcellstorebio .content .advantage ul li p{ font-size:14px; color:#fff; } .indexnews{padding-top:60px; padding-bottom:60px; background:#fff; } .indexnews .title_box{display:flex; justify-content: space-between; align-items:center; padding-bottom:30px; } .indexnews .title{display:flex; justify-content:space-between; align-items:center; font-weight:bold; color:var(--main); justify-content:left; display:flex; align-items:center; } .indexnews .title span{ color:var(--main); font-size:24px; font-weight:bold; margin-right:15px;} .indexnews .title h2{ color:var(--font); font-size:24px; font-weight:500; } .indexnews .more a{display: inline-block; border:var(--font) solid 1.5px; transition-duration: 0.3s; font-size: 14px; font-weight: normal; color: var(--font); height: 36px; padding-left: 10px; padding-right: 10px; line-height: 36px;} .indexnews .more a i{ margin-left:20px; font-weight:normal; } .indexnews .more a:hover{background: var(--main); color: #fff; border: var(--main) solid 1px;} .indexnews .hot{width: 100%; margin-bottom: 25px;} .indexnews .hot{display: grid; grid-template-columns: repeat(1, 1fr); grid-gap: 20px;} .indexnews .hot .item{ position:relative; overflow:hidden; height:260px; } .indexnews .hot .item img{ width:100%; height:100%; object-fit:cover; transition-duration:0.3s } .indexnews .hot .item:hover img{ transform:scale(1.05); } .indexnews .hot .item .cat{ position:absolute; left:10px; top:10px; z-index:1; background:var(--main); font-size:14px; color:#fff; padding:6px 10px; } .indexnews .hot .item h2{ position:absolute; left:0px; right:0px; font-weight: normal; bottom:0px; z-index:1; padding: 20px; font-size: 20px; color: #fff; line-height: 1.4em; background:rgba(255, 255, 255, 0.4); color:#fff;-webkit-backdrop-filter:blur(5px); backdrop-filter: blur(5px); } .indexnews .hot .item h2 a{ color:#fff; } .indexnews .content{background: #fff; box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.05);} .indexnews .content ul{ padding:20px;} .indexnews .content ul{display: grid; grid-template-columns: repeat(1, 1fr); grid-gap: 0px 20px} .indexnews .content ul li{ border-bottom:#ddd solid 1px; padding-bottom:20px; margin-bottom:20px; display:grid; grid-template-columns: auto 72px; grid-gap:20px; } .indexnews .content ul li h2 { font-weight: normal; font-size: 16px; line-height: 1.5em;} .indexnews .content ul li h2 a{ color:var(--font); } .indexnews .content ul li span{ line-height:1.5em; color:#cecece;font-family: 'Barlow'; font-size: 14px;} .indexnews .content ul li:hover h2 a{ color:var(--main); } .indexnews .content ul li:hover span{ color:var(--main); } .indexnews .content ul li:nth-last-child(2){border-bottom:#ddd solid 1px; padding-bottom:20px; margin-bottom:20px;} .indexnews .content ul li:nth-last-child(1){ margin-bottom:0; padding-bottom: 0; border-bottom: none; } .detailbanner{overflow: hidden; position: relative; background: var(--main);height: 100vh;} .detailbanner .pagewidth{ height: 100vh; position: relative;} .detailbanner .crumb{ position:absolute; top:100px; z-index:4; font-size:14px; color:rgba(255, 255, 255, .8); } .detailbanner .crumb a{color:rgba(255, 255, 255, .8); } .detailbanner .crumb i:last-child{display: none;} .detailbanner .text{ text-align: left; position: absolute; left: 20px; right: 20px; top: 50%; transform: translateY(-50%); z-index: 2; } .detailbanner .text h1{ font-size: 48px; color: #fff; font-weight:normal; text-align: left; line-height: 1.1em; z-index: 2; margin-bottom:20px; } .detailbanner .text h2{font-size: 24px;color: #fff; text-align: left; font-weight: 300; text-transform: uppercase;} .detailbanner .project_text{ text-align: left; position: absolute; left: 0px; right: 0px; bottom: 180px;z-index: 2; } .detailbanner .project_text .project_name{display:flex; justify-content:space-between; align-items:flex-start; font-weight:bold; color:var(--main); justify-content:left; display:flex; align-items:flex-start; margin-bottom:10px; } .detailbanner .project_text .project_name span{ color:#fff; font-size:32px; font-weight:bold; margin-right:10px;} .detailbanner .project_text .project_name h2{ color:#fff; font-size:32px; font-weight:300; } .detailbanner .project_text .project_description{ font-size:16px; color:#fff; padding-left:20px; padding-right:20px; font-weight:300; } .detailbanner img.detailbg{ height: 100%; width: 100%; object-fit: cover; position: absolute; left: 0px; top: 0px; bottom: 0px; right: 0px; z-index: 1; opacity: 1} .detailmenu{box-shadow: 0px 10px 40px rgba(210, 229, 223, 0.4); position: relative; z-index: 4; background: #fff;} .detailmenu .pagewidth{ padding-left: 0px; padding-right:0px; } .detailmenu ul{display:flex; justify-content: space-between;} .detailmenu ul li{ width:50%;text-align:center; font-size:14px;; } .detailmenu ul li a{ position: relative; color:var(--font); display:block; cursor: pointer; height:80px; line-height:1.4em; display:flex; align-items:center; text-align: center; justify-content: center;} .detailmenu ul li:hover a:after{ position:absolute; left:0px; right:0px; bottom:0px; height:2px; background:var(--main); content:""; } .detailmenu ul li a:hover{ color:var(--main); } .detailmenu ul li.active a:after{ position:absolute; left:0px; right:0px; bottom:0px; height:2px; background:var(--main); content:""; } .detailmenu ul li.active a{ color:var(--main); } .about_box_1{ padding-top:60px; padding-bottom:60px; position: relative; background: #fff;} .about_box_1 .pagewidth{display:block; grid-template-columns: 5fr 7fr; grid-gap: 28px;} .about_box_1 .title_box{ } .about_box_1 .title{display:flex; justify-content:space-between; align-items:center; font-weight:bold; color:var(--main); justify-content:left; display:flex; align-items:center; } .about_box_1 .title span{ color:var(--main); font-size:24px; font-weight:bold; margin-right:15px;} .about_box_1 .title h2{ color:var(--font); font-size:24px; font-weight:500; } .about_box_1 .slogin { padding-left:0px; padding-top:30px; margin-bottom:20px; } .about_box_1 .slogin img{ width:100%; } .about_box_1 .content h3{font-size: 20px; color: var(--font); line-height: 1.5em; margin-bottom: 20px;font-weight: normal;} .about_box_1 .content p{ color:var(--font); line-height:1.8em; font-size:14px; text-align:justify; margin-bottom:14px; } .about_box_1 .xibao1{animation: movexibao 8s linear infinite; content:""; position:absolute; left:-120px; bottom:-50px; width: 230px; } .about_box_1 .xibao1 img{ width:100% } .about_box_1 .xibao2{animation: movexibao 8s linear infinite; content:""; position:absolute; left:120px; bottom:100px; width: 120px; } .about_box_1 .xibao2 img{ width:100% } @keyframes movexibao { 0%, 100% { transform:translate(0, 0); filter: blur(0); } 25% { transform: translate(30px, 0); filter: blur(5px); } 50% { transform: translate(0, 30px); filter: blur(15px); } 75% { transform: translate(-30px, 0); filter: blur(5px); }} .about_box_2 { position:relative; overflow:hidden; overflow:hidden; } .about_box_2 img.bg{ position:absolute; left:0px; right:0px; top:0px; bottom:0px; width:100%; height:100%; object-fit:cover; z-index:-1 } .about_box_2 .pagewidth{ height:600px; position:relative; } .about_box_2 .pagewidth:after{ content: ""; position: absolute; width:3400px; border-radius: 50%; height:2800px; background:rgba(72, 193, 168, 0.9);z-index: 3; top: 50%; transform: translateY(-50%); left: -2910px;} .about_box_2 .pagewidth:before{ content: ""; position: absolute; width:3400px;border-radius: 50%; height:2800px; background:rgba(255, 255, 255, 0.3);z-index: 2;top: 54%; transform: translateY(-50%); left: -2900px;} .about_box_2 .content {width: calc(100% - 40px); padding: 0px; position: absolute; top: 50%; transform: translateY(-50%); z-index: 4} .about_box_2 .content .title{display:flex; justify-content:space-between; align-items:center; font-weight:bold; color:var(--main); justify-content:left; display:flex; align-items:center; } .about_box_2 .content .title span{ color:#fff; font-size:24px; font-weight:bold; margin-right:15px;} .about_box_2 .content .title h2{ color:#fff; font-size:24px; font-weight:500; } .about_box_2 .content .advantage{} .about_box_2 .content .advantage ul{ padding-top:30px; } .about_box_2 .content .advantage ul li{ border-bottom:rgba(255, 255, 255, 0.4) solid 1px; padding-bottom:15px; padding-top:15px; } .about_box_2 .content .advantage ul li:last-child{ border-bottom:none; } .about_box_2 .content .advantage ul li h2{display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;} .about_box_2 .content .advantage ul li h2 span{color: #fff; font-size: 24px; font-weight: normal;} .about_box_2 .content .advantage ul li h2 img{ height:32px; } .about_box_2 .content .advantage ul li p{ font-size:14px; color:#fff; } .about_box_3 {background: linear-gradient(0deg, #e4f6f2, #f8fdfc);overflow:hidden; padding-bottom:60px; } .about_box_3 .pagewidth{display: grid; grid-template-columns: repeat(1, 1fr); grid-gap: 10px; } .about_box_3 .left{ padding-top:60px; height:auto; position:relative; } .about_box_3 .left .title{display:flex; justify-content:space-between; align-items:center; margin-bottom: 30px; font-weight:bold; color:var(--main); justify-content:left; display:flex; align-items:center; } .about_box_3 .left .title span{ color:var(--main); font-size:24px; font-weight:bold; margin-right:15px;} .about_box_3 .left .title h2{ color:var(--font);font-size:24px; font-weight:500; } .about_box_3 .left .img{display: none; position: absolute; left: 0px; bottom: 0px;} .about_box_3 .left .img img{ width:100%; } .about_box_3 .right{display: grid; grid-template-columns: repeat(1, 1fr); grid-gap: 10px; height:auto; } .about_box_3 .right .imglist{display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 10px; } .about_box_3 .right .imglist img{ width:calc(100% - 4px); height: 100px; object-fit: cover;border: #fff solid 2px; margin-bottom:0px;box-shadow: 0px 10px 40px rgba(72, 193, 168, 0.1); } .about_box_4{ padding-top:60px; padding-bottom:60px; background: #fff; } .about_box_4 .title{display:flex; justify-content:space-between; align-items:center; font-weight:bold; color:var(--main); justify-content:left; display:flex; align-items:center; } .about_box_4 .title span{ color:var(--main); font-size:24px; font-weight:bold; margin-right:15px;} .about_box_4 .title h2{ color:var(--font);font-size:24px; font-weight:500; } .about_box_4 .content { padding-top:30px; } .about_box_4 .content .item{display: block; grid-template-columns: 400px auto; align-items: center; padding-top: 14px; padding-bottom: 14px;} .about_box_4 .content .item .time{ padding-right: 50px; font-size:32px;text-transform: uppercase; padding-left: 0px; text-align: left; font-style: italic; transition-duration: 0.2s; font-weight: bold; z-index: 2;-webkit-text-stroke: 1px #cccccc; -webkit-text-fill-color: transparent; } .about_box_4 .content .item .info{ padding-left:0px; position:relative; padding-top:10px; } .about_box_4 .content .item .info:after{ display: none; } .about_box_4 .content .item .info p{ font-size:14px; color:var(--font); margin-bottom:10px; } .about_box_4 .content .item .info h3{ font-size:18px; color:var(--font); font-weight:500; } .about_box_4 .content .item:hover .time{ -webkit-text-stroke: 1px var(--main); -webkit-text-fill-color:var(--main) ; } .about_box_4 .content .item:hover .info:after{ content:""; top: 20px;transform: translateY(0%); left:5px; width:10px; background:var(--main); height:10px; border-radius:10px; border:var(--main) solid 2px; position:absolute; } .about_box_4 .content .item:hover .info p{ font-size:14px; color:var(--main); margin-bottom:10px; } .about_box_4 .content .item:hover .info h3{ font-size:18px; color:var(--main); font-weight:500; } .about_box_5{ padding-top:60px; padding-bottom:60px; background: linear-gradient(0deg, #ffffff, #e4f6f2);overflow:hidden; } .about_box_5 .title{display:flex; justify-content:space-between; align-items:center; font-weight:bold; color:var(--main); justify-content:left; display:flex; align-items:center; } .about_box_5 .title span{ color:var(--main); font-size:24px; font-weight:bold; margin-right:15px;} .about_box_5 .title h2{ color:var(--font);font-size:24px; font-weight:500; } .about_box_5 .content {display: block; grid-template-columns: repeat(2, 1fr); grid-gap: 28px; padding-top:40px; align-items: flex-start;} .about_box_5 .content .client{width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 28px;} .about_box_5 .content .client .item {box-shadow: 10px 10px 20px rgba(72, 193, 168, 0.1); } .about_box_5 .content .client .item img{ width:100%; display:block; } .about_box_5 .content .earth{ height:280px; position: relative; width: 100%;} .about_box_5 .content .earth #tag-cloud{ position: relative; margin:0 auto;margin-top: 0px; width:300px; height:300px; background: url(../images/diqiubg.png) no-repeat center; background-size: 100%;} .about_box_5 .content .earth #tag-cloud svg{ width:300px!important; height:300px!important } .about_box_5 .content .earth #tag-cloud text{ font-size: 16px!important;} .technology_box_1{ padding-top:60px; padding-bottom:0px;background: linear-gradient(0deg, #7dd3c1, #ffffff);overflow:hidden; } .technology_box_1 .title{display:flex; justify-content:space-between; align-items:center; font-weight:bold; color:var(--main); justify-content:left; display:flex; align-items:center;padding-left: 20px; } .technology_box_1 .title span{ color:var(--main); font-size:24px; font-weight:bold; margin-right:15px;} .technology_box_1 .title h2{ color:var(--font);font-size:24px; font-weight:500; } .technology_box_1 .pagewidth {display:block; grid-template-columns: 8fr 4fr; grid-gap:50px;align-items:flex-end; position:relative; padding-left:0px; padding-right:0px; } .technology_box_1 .pagewidth .description{ padding-top:75px; margin-bottom: 40px;padding-left: 20px;} .technology_box_1 .pagewidth .description .name{ font-size:32px; color:var(--main);margin-bottom:25px; } .technology_box_1 .pagewidth .description .info{display: block; justify-content: space-between; grid-gap: 40px;} .technology_box_1 .pagewidth .description .info ul li{ font-size:12px; color: var(--font); line-height:1.8em; } .technology_box_1 .pagewidth .description .info ul:first-child li{ font-size:20px; line-height:1.6em; } .technology_box_1 .pagewidth .tab{ padding-bottom:0px; width:100%; position:relative; z-index:10 } .technology_box_1 .pagewidth .tab .layui-tab-title{display: flex; grid-template-columns: repeat(4, 1fr);grid-gap: 10px;align-items:flex-end; height: 60px;} .technology_box_1 .pagewidth .tab .layui-tab-title li i{display: none;} .technology_box_1 .pagewidth .tab .layui-tab-title li{ cursor: pointer; background:rgba(72, 193, 168, 0.5); transition-duration: 0.3s; font-size: 13px; color:var(--main); height:50px; width:25%; line-height:50px; padding-left:0px; padding-right:0px; -webkit-backdrop-filter:blur(5px); backdrop-filter: blur(5px); text-align: center;} .technology_box_1 .pagewidth .tab .layui-tab-title li.layui-this{ background:#fff;height:60px; line-height:60px; } .technology_box_1 .pagewidth .tab .layui-tab-content{ height: 280px; padding: 20px; background: linear-gradient(0deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 1));-webkit-backdrop-filter:blur(5px); backdrop-filter: blur(5px);} .technology_box_1 .pagewidth .tab .layui-tab-content .layui-tab{ width:100%; } .technology_box_1 .pagewidth .tab .layui-tab-content .layui-tab-item p{ font-size:14px; line-height:1.6em; color:var(--font); } .technology_box_1 .pagewidth .tab .layui-tab-content .layui-tab-item .lista ul li{ margin-bottom: 15px; font-size: 14px; color: var(--font); line-height: 1.5em; display: grid; grid-template-columns: 120px auto;grid-gap: 30px;} .technology_box_1 .pagewidth .tab .layui-tab-content .layui-tab-item .lista ul li span{ text-align:left; position:relative;} .technology_box_1 .pagewidth .tab .layui-tab-content .layui-tab-item .lista ul li span:after{content: ""; position: absolute; right: -15px; top: 9px;height: 4px; width: 4px; border-radius: 5px; border:#ddd solid 2px;} .technology_box_1 .pagewidth .tab .layui-tab-content .layui-tab-item .lista ul li p{ text-align:left; } .technology_box_1 .pagewidth .tab .layui-tab-content .layui-tab-item .listb ul li{ margin-bottom: 15px; font-size: 14px; color: var(--font); line-height: 1.5em; display: grid; grid-template-columns: 60px auto;grid-gap: 30px;} .technology_box_1 .pagewidth .tab .layui-tab-content .layui-tab-item .listb ul li span{ text-align:left; position:relative;} .technology_box_1 .pagewidth .tab .layui-tab-content .layui-tab-item .listb ul li span:after{content: ""; position: absolute; right: -15px; top: 9px;height: 4px; width: 4px; border-radius: 5px; border:#ddd solid 2px;} .technology_box_1 .pagewidth .tab .layui-tab-content .layui-tab-item .listb ul li p{ text-align:left; } .technology_box_1 .pagewidth .tab .layui-tab-content .layui-tab-item .listc ul li{ margin-bottom: 15px; font-size: 14px; color: var(--font); line-height: 1.5em;} .technology_box_1 .pagewidth .tab .layui-tab-content .layui-tab-item .listc ul li p{ text-align:left; } .technology_box_1 .pagewidth .tab .layui-tab-content .layui-tab-item {height: 280px;overflow: auto; padding-right: 20px;} /* 针对Webkit内核浏览器 */ .technology_box_1 .pagewidth .tab .layui-tab-content .layui-tab-item::-webkit-scrollbar { width: 8px; height: 10px;} /* 滚动条轨道 */ .technology_box_1 .pagewidth .tab .layui-tab-content .layui-tab-item::-webkit-scrollbar-track {background: #f1f1f1; border-radius: 10px;} /* 滚动条滑块 */ .technology_box_1 .pagewidth .tab .layui-tab-content .layui-tab-item::-webkit-scrollbar-thumb {background: var(--main);border-radius: 10px; border: 2px solid #f1f1f1;} /* 鼠标悬停时滑块样式 */ .technology_box_1 .pagewidth .tab .layui-tab-content .layui-tab-item::-webkit-scrollbar-thumb:hover {background: #555;} /* 针对Firefox浏览器 */ @supports (scrollbar-width: thin) {.technology_box_1 .pagewidth .tab .layui-tab-content .layui-tab-item {scrollbar-width: thin;scrollbar-color: #888 #f1f1f1;}} .technology_box_1 .pagewidth .photo{ position:absolute; right:-50px; top:110px; } .technology_box_1 .pagewidth .photo img{ width:230px; } .technology_box_2{ padding-top:60px; padding-bottom:60px;background:#fff;overflow:hidden; position:relative; } .technology_box_2 .pagewidth{display: grid; grid-template-columns: repeat(1, 1fr); grid-gap: 28px;} .technology_box_2 .title{ font-weight:bold; color:var(--main); justify-content:left; display:flex; } .technology_box_2 .title span{ color:var(--main); font-size:24px; font-weight:bold; margin-right:15px;} .technology_box_2 .title h2{ color:var(--font);font-size:24px; font-weight:500; } .technology_box_2 .content h3{font-size: 24px; color: var(--main); margin-bottom: 30px;font-weight: normal;} .technology_box_2 .content p{ color:var(--font); line-height:1.8em; font-size:14px; text-align:justify; margin-bottom:20px; } .technology_box_2 .index_about_a_content{display:none; } .technology_box_2 #waves{display:none; } .technology_box_3{ padding-top:60px; padding-bottom:60px;background: linear-gradient(0deg, #ffffff, #e4f6f2);overflow:hidden; } .technology_box_3 .pagewidth{} .technology_box_3 .title{ font-weight:bold; color:var(--main); justify-content:left; display:flex; margin-bottom:80px; } .technology_box_3 .title span{ color:var(--main); font-size:24px; font-weight:bold; margin-right:15px;} .technology_box_3 .title h2{ color:var(--font);font-size:24px; font-weight:500; } .technology_box_3 .content{display: grid; grid-template-columns: repeat(1, 1fr); grid-gap: 50px;position: relative; } .technology_box_3 .content .new{ position:relative; z-index:4; transition-duration:0.3s; transform: scale(1);} .technology_box_3 .content .new .box {position:relative; z-index:2;transition-duration:0.3s;background: linear-gradient(0deg,rgba(72, 193, 168, 0.9), rgba(122, 215, 195, 0.9));color: #fff; padding:30px 20px ; position:relative; margin:0px 0px; margin-left: 0;box-shadow:0px 10px 20px rgba(72, 193, 168, .1); } .technology_box_3 .content .new .box h3{ font-size:24px; color:#fff; font-weight:500; margin-bottom:20px; } .technology_box_3 .content .new .box ul{display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 30px; margin-bottom:30px;} .technology_box_3 .content .new .box ul li h4{ font-size:18px; font-weight:500; margin-bottom:10px;color:#fff; } .technology_box_3 .content .new .box ul li p{ font-size:14px; line-height:1.6em; color:#fff; } .technology_box_3 .content .new .box p{ font-size:14px; line-height:1.6em;color:#fff; } .technology_box_3 .content .new .box .tag{ padding-top:40px;font-size:14px; color:#fff; } .technology_box_3 .content .new .box .tag strong{display: block; margin-bottom: 10px;} .technology_box_3 .content .new .box .tag span{background:#fff; color:var(--main);padding: 3px 6px; margin-right: 6px; font-size: 12px;} .technology_box_3 .content .new .cell{ width:80px; position:absolute; top:-40px; right:-20px;animation: cell 48s linear infinite; z-index:11; opacity:1; transition-duration:0.6s; } .technology_box_3 .content .new .cell img{width: 100%;} .technology_box_3 .content .new:hover .cell{ z-index:10; opacity: 1; } .technology_box_3 .content .new:hover{transform: scale(1.01);} .technology_box_3 .content .old{ position:relative;z-index:3; transition-duration:0.3s; transform: scale(1);} .technology_box_3 .content .old .box{ transition-duration:0.3s;background:rgba(255, 255, 255, 0.9); padding:30px 20px; position:relative; z-index:2;box-shadow:0px 10px 20px rgba(72, 193, 168, .1); } .technology_box_3 .content .old .box h3{ font-size:24px; color:var(--font); font-weight:500; margin-bottom:20px; } .technology_box_3 .content .old .box ul{display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 30px; margin-bottom: 30px;} .technology_box_3 .content .old .box ul li h4{ font-size:18px; font-weight:500; margin-bottom:10px;color:var(--font); } .technology_box_3 .content .old .box ul li p{ font-size:14px; line-height:1.6em;color:var(--font); } .technology_box_3 .content .old .box p{ font-size:14px; line-height:1.6em;color:var(--font); } .technology_box_3 .content .old .box .tag{ padding-top:40px;font-size:14px; color:var(--font); } .technology_box_3 .content .old .box .tag strong{display: block; margin-bottom: 10px;} .technology_box_3 .content .old .box .tag span{background:#dddddd; color:var(--font); padding: 3px 6px; margin-right: 6px; font-size: 12px;} .technology_box_3 .content .old .cell{ width:80px; position:absolute; top:-40px; right:-20px;animation: cell 48s linear infinite; z-index:11; opacity: 1; transition-duration:0.6s; } .technology_box_3 .content .old .cell img{width: 100%;} .technology_box_3 .content .old:hover .cell{ z-index:10; opacity: 1; } .technology_box_3 .content .old:hover{transform: scale(1.01);} @keyframes cell { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .technology_box_4{ padding-top:60px; padding-bottom:60px;background: linear-gradient(0deg, #ffffff, #e4f6f2);overflow:hidden; } .technology_box_4 .pagewidth{} .technology_box_4 .title{ font-weight:bold; color:var(--main); justify-content:left; display:flex; } .technology_box_4 .title span{ color:var(--main); font-size:24px; font-weight:bold; margin-right:15px;} .technology_box_4 .title h2{ color:var(--font);font-size:24px; font-weight:500; } .technology_box_4 .content{display: grid; grid-template-columns: repeat(1, 1fr); grid-gap: 20px; padding-top: 30px;} .technology_box_4 .content .item{background: #fff;box-shadow:0px 10px 20px rgba(72, 193, 168, .1); overflow: hidden;position: relative; padding: 20px; padding-bottom: 70px; transform:scale(1.0); transition-duration: 0.3s;} .technology_box_4 .content .item img{ width:160px; position:absolute; right:-50px; bottom:-50px; opacity:0.3; transition-duration:0.3s; } .technology_box_4 .content .item .number{ font-size:28px;font-family: 'Barlow';color:#fff;background:var(--main); font-style: italic; padding:2px 10px; position:absolute; right:0px; top:0px; border-bottom-left-radius:12px; } .technology_box_4 .content .item h3{font-size: 24px;color: var(--font); font-weight:normal; margin-bottom:10px;} .technology_box_4 .content .item h4{ font-size:18px; color:var(--main); font-weight:normal; margin-bottom:15px; } .technology_box_4 .content .item .description p{ line-height:1.8em; font-size: 14px; color:var(--font); text-align:justify; } .technology_box_4 .content .item:hover{ transform:scale(1); } .technology_box_4 .content .item:hover img{ opacity:1; } .app{background: var(--main); width: 24px; padding: 6px; height: 130px; text-align: center; position: fixed; right: 10px; top:auto; bottom: 100px; z-index: 33} .app i.ri-file-edit-line{display: block; color: #fff; font-size: 24px; margin: 0 auto; margin-bottom: 5px;} .app span{ font-size:14px; line-height:1.2em; color:#fff; display: block; margin-bottom: 8px; text-align: center;} .app .backtop{ font-size:24px; color:#fff; padding-top:5px; border-top:rgba(255, 255, 255, 0.7) solid 1px; } .CRO_box_1{ padding-top:60px; padding-bottom:60px; background:#fff; } .CRO_box_1 .pagewidth{display:block; grid-template-columns: repeat(2, 1fr); grid-gap: 28px;} .CRO_box_1 .pagewidth .content{} .CRO_box_1 .pagewidth .content .title{ font-weight:bold; color:var(--main); justify-content:left; display:flex; margin-bottom:30px; } .CRO_box_1 .pagewidth .content .title span{ color:var(--main); font-size:24px; font-weight:bold; margin-right:15px;} .CRO_box_1 .pagewidth .content .title h2{ color:var(--font);font-size:24px; font-weight:500; } .CRO_box_1 .pagewidth .content .html p{ color:var(--font); line-height:1.8em; font-size:14px; text-align:justify; margin-bottom:20px; } .CRO_box_1 .pagewidth .content .html p strong{ color:var(--main); } .CRO_box_1 .pagewidth .img{ } .CRO_box_1 .pagewidth .img img{width: 100%; display:block ;margin: 0 auto;} .CRO_box_2{ padding-top:60px; padding-bottom:60px; background:#eef9f7; } .CRO_box_2 .pagewidth .title{ font-weight:bold; color:var(--main); justify-content:left; display:flex; margin-bottom:30px; } .CRO_box_2 .pagewidth .title span{ color:var(--main); font-size:24px; font-weight:bold; margin-right:15px;} .CRO_box_2 .pagewidth .title h2{ color:var(--font);font-size:24px; font-weight:500; } .CRO_box_2 .pagewidth .content{display:grid; grid-template-columns: repeat(2, 1fr); grid-gap: 16px;} .CRO_box_2 .pagewidth .content .item{ background:#fff;box-shadow:0px 10px 20px rgba(72, 193, 168, .1); transition-duration:0.3s; transform:scale(1.0); height: 180px; padding-top: 40px; position:relative; overflow: hidden;} .CRO_box_2 .pagewidth .content .item .icon{display: block; margin: 0 auto; height: 72px; width: 72px; position: relative; margin-bottom: 20px;} .CRO_box_2 .pagewidth .content .item .icon img{ position:absolute; width: 100%; height: 100%; object-fit: cover;} .CRO_box_2 .pagewidth .content .item .icon img.color{ opacity:1; } .CRO_box_2 .pagewidth .content .item .icon img.white{ opacity:0; } .CRO_box_2 .pagewidth .content .item img.bg{ opacity:0.2; width:132px; height:132px; position:absolute; right:-50px;bottom:-50px; } .CRO_box_2 .pagewidth .content .item h3{ text-align:center; font-weight:none; font-size:16px; color:var(--main);font-weight:normal; } .CRO_box_2 .pagewidth .content .item:hover{ background:var(--main); transform:scale(1); } .CRO_box_2 .pagewidth .content .item:hover .icon img.color{ opacity:0; } .CRO_box_2 .pagewidth .content .item:hover .icon img.white{ opacity:1; } .CRO_box_2 .pagewidth .content .item:hover h3{ text-align:center; font-weight:none; font-size:16px; color:#fff; } .CRO_box_3{ padding-top:60px; padding-bottom:60px; background:#fff; } .CRO_box_3 .pagewidth .title{ font-weight:bold; color:var(--main); justify-content:left; display:flex; margin-bottom:30px; } .CRO_box_3 .pagewidth .title span{ color:var(--main); font-size:24px; font-weight:bold; margin-right:15px;} .CRO_box_3 .pagewidth .title h2{ color:var(--font);font-size:24px; font-weight:500; } .CRO_box_3 .pagewidth .content{display: block;grid-gap: 28px;grid-template-columns: repeat(3, 1fr);} .CRO_box_3 .pagewidth .content .item{background:#fff;box-shadow:0px 10px 20px rgba(72, 193, 168, .1); padding:20px; overflow: hidden; position: relative;} .CRO_box_3 .pagewidth .content .item:after{content: ""; position: absolute; border-radius: 50%; right: -240px; top: -300px; width: 500px; height: 500px; background: linear-gradient(230deg, #cbede6, #ffffff 85%);} .CRO_box_3 .pagewidth .content .item img{width: 36px; margin-bottom: 20px;} .CRO_box_3 .pagewidth .content .item h3{ text-align:left; font-weight:none; position: relative; z-index: 4; font-size:24px; color:var(--main);font-weight:normal; margin-bottom:15px;} .CRO_box_3 .pagewidth .content .item p{ color:var(--font); line-height:1.8em; position: relative; z-index: 4; font-size:14px; text-align:justify; } .CRO_box_3 .pagewidth .content .item .number{ transition-duration: 0.3s; position: relative; z-index: 4;background:var(--main); padding:5px 12px; border-radius: 0px 0px 0px 10px; position:absolute; right:0px; top:0px;font-family: 'Barlow'; color:#fff; font-size:24px; font-style:italic; } .CRO_box_4{ padding-top:60px; padding-bottom:60px; background:#eef9f7; } .CRO_box_4 .pagewidth .title{ font-weight:bold; color:var(--main); justify-content:left; display:flex; margin-bottom:30px; } .CRO_box_4 .pagewidth .title span{ color:var(--main); font-size:24px; font-weight:bold; margin-right:15px;} .CRO_box_4 .pagewidth .title h2{ color:var(--font);font-size:24px; font-weight:500; } .CRO_box_4 .pagewidth .content{display: grid;grid-gap: 10px;grid-template-columns: repeat(2, 1fr);} .CRO_box_4 .pagewidth .content .item{ height:180px; position:relative; overflow:hidden;box-shadow:0px 10px 20px rgba(72, 193, 168, .1); } .CRO_box_4 .pagewidth .content .item:after{content: "";left: 0px; right: 0px; bottom: 0px; position: absolute; height: 100px;background: linear-gradient(0deg, rgba(72, 193, 168, 1.0), rgba(72, 193, 168, 0));} .CRO_box_4 .pagewidth .content .item img{ width:100%; height:100%; object-fit:cover; transition-duration: 0.3s} .CRO_box_4 .pagewidth .content .item:hover img{transform: scale(1.05);} .CRO_box_4 .pagewidth .content .item h4{ position:absolute; left:0px; right:0px; z-index: 4; transition-duration: 0.3s; transform: background 0.3s; color: var(--font); bottom:0px; height:60px; line-height:60px; text-align:center; font-size:14px; font-weight:normal; background: linear-gradient(230deg, rgba(228, 246, 242, 1), rgba(255, 255, 255, 1.0) 50%);} .CRO_box_4 .pagewidth .content .item:hover h4{ height:70px; line-height: 70px;color: #fff;background: linear-gradient(0deg, rgba(72, 193, 168, 1.0), rgba(72, 193, 168, 0.6) 85%);-webkit-backdrop-filter:blur(5px); backdrop-filter: blur(5px); } .CRO_box_5{ padding-top:60px; padding-bottom:60px; background:#fff; } .CRO_box_5 .pagewidth { padding-right:0px; } .CRO_box_5 .pagewidth .title{ font-weight:bold; color:var(--main); justify-content:left; display:flex; margin-bottom:30px; } .CRO_box_5 .pagewidth .title span{ color:var(--main); font-size:24px; font-weight:bold; margin-right:15px;} .CRO_box_5 .pagewidth .title h2{ color:var(--font);font-size:24px; font-weight:500; } .CRO_box_5 .pagewidth .content{box-shadow:0px 10px 20px rgba(72, 193, 168, .1); background: linear-gradient(230deg, #cbede6, #ffffff 15%); position: relative; margin-bottom: 30px; margin-right: 20px;} .CRO_box_5 .pagewidth .content .subtitle{ transition-duration: 0.3s; background:var(--main); padding:5px 12px; border-radius: 0px 0px 10px 0px ; position:absolute; left:0px; top:0px; color:#fff; font-size:20px; } .CRO_box_5 .pagewidth .advantage{display: grid;grid-gap: 10px;grid-template-columns: repeat(2, 1fr);padding: 20px; padding-top:50px; } .CRO_box_5 .pagewidth .advantage .item{ overflow: hidden; position: relative;} .CRO_box_5 .pagewidth .advantage .item img{width: 36px; display:block; margin: 0 auto; margin-bottom: 20px;} .CRO_box_5 .pagewidth .advantage .item h3{ text-align:center; font-weight:none; position: relative; z-index: 4; font-size:16px; color:var(--font);font-weight:normal; margin-bottom:15px;} .CRO_box_5 .pagewidth .table{box-shadow:0px 10px 20px rgba(72, 193, 168, .1); overflow: auto} .CRO_box_5 .pagewidth .table table{border-collapse: collapse; width: 1000px;} .CRO_box_5 .pagewidth .table th{background: var(--main); color: #fff; font-size: 16px; text-align: center;padding:20px;} .CRO_box_5 .pagewidth .table td{ padding:20px; color:var(--font); font-size:16px; line-height:1.6em;border: 1px solid #ececec; text-align:center; } .list_news_hot{ padding-top:60px; padding-bottom:60px; } .list_news_hot .content{display:grid; grid-template-columns:repeat(1, 1fr); grid-gap:40px; } .list_news_hot .content .item a{ height:260px; position:relative; overflow:hidden; display: block;} .list_news_hot .content .item a img{ width:100%; height:100%; object-fit:cover; transition-duration: 0.3s} .list_news_hot .content .item a:hover img{transform: scale(1.05);} .list_news_hot .content .item a .info{ position:absolute; z-index:2; left:0px; right:0px; bottom:0px; background:rgba(255, 255, 255, .4); padding:20px; -webkit-backdrop-filter:blur(8px); backdrop-filter: blur(8px);} .list_news_hot .content .item a .info p{ font-size:14px;font-family: 'Barlow'; color:#fff; margin-bottom:10px; } .list_news_hot .content .item a .info h3{ color:#fff; font-size:18px; font-weight:normal; } .list_news{ padding-bottom:60px; } .list_news .cat_title{ font-weight:bold; color:var(--main); justify-content:left; display:flex; margin-bottom:30px; } .list_news .cat_title span{ color:var(--main); font-size:24px; font-weight:bold; margin-right:15px;} .list_news .cat_title h2{ color:var(--font);font-size:24px; font-weight:500; } .list_news .article-list{display: grid; grid-template-columns:repeat(1, 1fr); grid-gap:40px;} .list_news .article-list .item .img{ height:180px; position:relative; overflow:hidden; margin-bottom: 20px;} .list_news .article-list .item .img img{ width:100%; height:100%; object-fit:cover; transition-duration: 0.3s} .list_news .article-list .item:hover .img img{transform: scale(1.05);} .list_news .article-list .item .info .time{ font-size: 14px; font-family: 'Barlow'; color: var(--font); margin-bottom: 10px;} .list_news .article-list .item .info h2{ font-weight:normal; } .list_news .article-list .item .info h2 a{ font-size:18px; color:var(--font); } .show_news { padding-top:60px; padding-bottom:60px; } .show_news .pagewidth{display: block; grid-template-columns: 8fr 4fr; grid-gap: 28px;} .show_news .content{ padding-right:0px; } .show_news .content .article_time{font-size: 14px; font-weight: normal; font-family: 'Barlow'; color: var(--font); margin-bottom: 20px;} .show_news .content .article_title h1{font-size:24px; font-weight: 400;color: var(--font);} .show_news .content .article_title{ border-bottom:#ddd solid 1px; padding-bottom:30px; margin-bottom:30px; } .show_news .content .article_html{ font-size:14px; color:var(--font); line-height:32px; margin-bottom:0px; } .show_news .content .article_html p{ margin-bottom:20px; } .show_news .content .article_other{ padding-top:30px; border-top:#ddd solid 1px; } .show_news .content .article_other a{ font-size:14px; color:var(--font); } .show_news .content .article_other a:hover{ color:var(--main); } .show_news .content .article_other p{ margin-bottom:10px; } .show_news .side { display:none; } .list_contact_form{ padding-top:60px; padding-bottom:60px; background:#fff; } .list_contact_form .cat_title{ font-weight:bold; color:var(--main); justify-content:left; display:flex; margin-bottom:30px; } .list_contact_form .cat_title span{ color:var(--main); font-size:24px; font-weight:bold; margin-right:15px;} .list_contact_form .cat_title h2{ color:var(--font);font-size:24px; font-weight:500; } .list_contact_form .layui-form .four{display: block; grid-template-columns: repeat(4, 1fr); grid-gap: 28px;} .list_contact_form .layui-form .four .layui-form-label{display: block; float: none; padding: 0; line-height: auto; text-align: left; width: 100%; color: var(--font); margin-bottom: 10px;} .list_contact_form .layui-form .four .layui-form-label em{ font-style:inherit; color:#ce0000; position: relative; top: 3px;} .list_contact_form .layui-form .four .layui-input-block{ margin-left:0; } .list_contact_form .layui-form .layui-input-block{ margin-left:0; } .list_contact_form .layui-form .layui-input{ height:55px; } .list_contact_form .layui-form .layui-btn{ height:55px; } .list_contact_form .layui-form .layui-form-submit{display:flex; align-items: center; padding-top: 20px; justify-content: center;} .list_contact_form .layui-form .layui-form-submit .layui-btn{ width:100%; } .list_contact_info{ padding-top:60px; padding-bottom:60px; background:#f3fbf9; } .list_contact_info .cat_title{ font-weight:bold; color:var(--main); justify-content:left; display:flex; margin-bottom:30px; } .list_contact_info .cat_title span{ color:var(--main); font-size:24px; font-weight:bold; margin-right:15px;} .list_contact_info .cat_title h2{ color:var(--font);font-size:24px; font-weight:500; } .list_contact_info .content{display: block; grid-template-columns: repeat(2, 1fr);} .list_contact_info .content .info{ padding:20px; background:#fff;box-shadow:0px 10px 20px rgba(72, 193, 168, .1); } .list_contact_info .content .info ul li{display: flex; color: #333333; font-size: 14px; justify-content: space-between;border-bottom: #ececec solid 1px; padding-top: 15px; padding-bottom: 15px;} .list_contact_info .content .info ul li i{width:25px;} .list_contact_info .content .info ul li .name{width:90px; text-align: left} .list_contact_info .content .info ul li .con{width: calc(100% - 105px); text-align: left;} .list_contact_info .content .info ul li .con img{width: 100px;} .list_contact_info .content .info ul li .con span{ margin-right:30px; } .list_contact_info .content .info .wechatcontent{} .list_contact_info .content .info ul li .wechatcontent p{width: 100px; text-align: center; font-size: 14px; color: #333;} .list_contact_info .content .map{ box-shadow:0px 10px 20px rgba(72, 193, 168, .1); height: 600px;} .list_contact_info .content .info ul li:last-child{ border-bottom:none; } .list_project{ padding-top:60px; padding-bottom:60px; } .list_project .article-list{display:grid; grid-template-columns:repeat(1, 1fr); grid-gap:20px; } .list_project .article-list .item { height:400px; position:relative; overflow:hidden; display: block;box-shadow:0px 10px 20px rgba(72, 193, 168, .1); border:#ececec solid 1px;} .list_project .article-list .item img{ width:100%; height:100%; object-fit:cover; transition-duration: 0.3s} .list_project .article-list .item:hover img{transform: translateY(-50px);} .list_project .article-list .item .info{ transition-duration: 0.3s; overflow: hidden; position:absolute; z-index:2; left:0px; right:0px; bottom:-60px; background:#fff; padding:20px; -webkit-backdrop-filter:blur(8px); backdrop-filter: blur(8px); transition-duration: 0.3s} .list_project .article-list .item .info h2{ color:var(--font); font-size:24px; font-weight:normal; margin-bottom:10px;transition-duration: 0.3s} .list_project .article-list .item .info p{ font-size:14px; color:var(--font); margin-bottom:20px;transition-duration: 0.3s} .list_project .article-list .item .info .more a{display: inline-block; border:#fff solid 1.5px; transition-duration: 0.3s; font-weight: normal; color:#fff; height: 44px; padding-left: 20px; padding-right: 20px; line-height: 44px;} .list_project .article-list .item .info .more a i{ margin-left:20px; font-weight:normal; } .list_project .article-list .item .info .more a:hover{background: #fff; color:var(--font); border: #fff solid 1px;} .list_project .article-list .item:hover .info{background:rgba(72, 193, 168, 0.7); bottom: 0;} .list_project .article-list .item:hover .info h2{color: #fff;} .list_project .article-list .item:hover .info p{color: #fff;} .list_contact_info .cat_title{ font-weight:bold; color:var(--main); justify-content:left; display:flex; margin-bottom:30px; } .list_contact_info .cat_title span{ color:var(--main); font-size:36px; font-weight:bold; margin-right:15px;} .list_contact_info .cat_title h2{ color:var(--font);font-size:40px; font-weight:300; } .show_project{background: linear-gradient(180deg, #f2faf9, #ffffff 90%); padding-bottom: 60px;} .show_project .show_project_content{ padding-bottom: 0; padding-right: 0;padding:0px; position:relative; margin-top:-100px;background:#fff; position:relative; z-index:2; display: block; grid-template-columns: repeat(2, 1fr); grid-gap: 50px;box-shadow:0px 10px 20px rgba(72, 193, 168, .15);} .show_project .show_project_content .text{ padding:20px; } .show_project .show_project_content .text .title{ font-weight:bold; color:var(--main); justify-content:left; display:flex; margin-bottom:12px; } .show_project .show_project_content .text .title span{ color:var(--main); font-size:20px; font-weight:bold; margin-right:15px;} .show_project .show_project_content .text .title h2{ color:var(--font);font-size:24px; font-weight: normal; } .show_project .show_project_content .text .html{ font-size:16px; color:var(--font); padding-left:20px; margin-bottom:40px; line-height:1.8em; } .show_project .show_project_content .text .button{ padding-left:20px; } .show_project .show_project_content .text .button a{ color:#fff; background:var(--main);display:inline-block; width:calc(100% - 20px); height:66px; line-height:66px; text-align:center; font-size:18px; } .show_project .show_project_content .img img{width: 100%;} .show_project .show_project_product{ padding-top:80px; } .show_project .show_project_product .title{ font-weight:bold; color:var(--main); justify-content:left; display:flex; margin-bottom:30px; } .show_project .show_project_product .title span{ color:var(--main); font-size:24px; font-weight:bold; margin-right:15px;} .show_project .show_project_product .title h2{ color:var(--font);font-size:24px; font-weight:500; } .show_project .show_project_product .content{box-shadow:0px 10px 20px rgba(72, 193, 168, .15); padding: 20px; background: #fff;} .show_project .show_project_product .content ul.table_title{display: grid; grid-template-columns: 2fr 3fr 2fr 1.5fr 2fr 2fr 50px; border-bottom: #ddd solid 1px; display:none;} .show_project .show_project_product .content ul li{ padding:20px; color: var(--font); } .show_project .show_project_product .content ul.table_item{display: block; grid-template-columns: 2fr 3fr 2fr 1.5fr 2fr 2fr 90px; background: #fff; transition-duration: 0.3s; align-items: center; margin-bottom: 30px;} .show_project .show_project_product .content ul.table_item li{ padding:0px; font-size: 14px; color: var(--font); line-height: 1.6em; margin-bottom: 10px} .show_project .show_project_product .content ul.table_item li img{width: 100%;} .show_project .show_project_product .content ul.table_item li.name{ font-size:18px!important; } .show_project .show_project_product .content ul.table_item:hover{background: #fff} .show_project .show_project_product .content ul.table_item li:last-child a{width: 100%; height: 44px; cursor: pointer; line-height: 44px; transition-duration: 0.3s; display: block; background: var(--main); text-align: center; font-size: 16px; color: #fff;} .show_project .show_project_product .content ul.table_item:hover li:last-child a{width: 100%; height: 44px; background: var(--main); text-align: center; font-size: 16px; color: #fff;} .show_project .show_project_certification{ padding-top:60px; } .show_project .show_project_certification .title{ font-weight:bold; color:var(--main); justify-content:left; display:flex; margin-bottom:30px; } .show_project .show_project_certification .title span{ color:var(--main); font-size:24px; font-weight:bold; margin-right:15px;} .show_project .show_project_certification .title h2{ color:var(--font);font-size:24px; font-weight:500; } .show_project .show_project_certification .content .swiper-slide{ width: auto;} .show_project .show_project_certification .content .swiper-slide img{ height: 200px; border:#ddd solid 1px; } .show_project .show_project_certification .content .swiper{ padding-bottom:50px; } .show_project .show_project_certification .content .swiper-pagination .swiper-pagination-bullet{ width:8px; height:8px; background:var(--font); } .show_project .show_project_certification .content .swiper-pagination .swiper-pagination-bullet-active {background:var(--main);} .show_product{ padding-bottom:60px; } .show_product .content{ padding-bottom: 0; padding-right: 0; position:relative; margin-top:-100px;position:relative; z-index:2; display: block; grid-template-columns: 330px auto; grid-gap: 30px;} .show_product .content .side{ box-shadow:0px 10px 20px rgba(72, 193, 168, .1); background: #fff; display: none;} .show_product .content .side ul li a{ color: var(--font); display: block; font-size:16px; padding-top:20px; padding-bottom:20px; text-align:center; } .show_product .content .side ul li.active a{background: var(--main); color: #fff;} .show_product .content .html{ box-shadow:0px 10px 20px rgba(72, 193, 168, .1); background: #fff; padding: 0px;} .show_product .content .bottom { text-align:center; padding: 20px;} .show_product .content .bottom p{ padding-bottom:20px; } .show_product .content .bottom p a{ color:var(--main); font-size:16px; text-decoration:underline; text-underline-offset: 3px;} .show_product .content .bottom .button a{ background:var(--main); color:#fff; font-size:16px; padding:20px; display: block;} } @media screen and (max-width: 320px) {} @media all and (orientation : landscape) {} @media all and (orientation : portrait){}