body, button, dd, div, dl, form, h1, h2, h3, h4, h5, h6, html, img, input, li, ol, p, ul { margin: 0; padding: 0; border: 0 } * { -webkit-tap-highlight-color: transparent; } body { font-family: mgiFont, FZLTDHJW; background-color: #FFFFFF; overflow-x: hidden; } button, input, textarea,select{ -webkit-appearance: none; resize: none; outline: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); border: 0; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } img { border: 0; max-width: 100%; vertical-align: middle; } .none{ display:none; } .online_x{ cursor:pointer; } button:hover, input[type=submit]:hover { cursor: pointer } button:focus, input:active, input:focus, textarea:focus { /* border: 0*/ outline: 0 none; outline-color: transparent; } a { color: #333; display: inline-block; } a:link { text-decoration: none } a:visited { text-decoration: none } a:hover { text-decoration: none; } a:active { text-decoration: none } li { list-style: none; } .clear { clear: both; font-size: 0; line-height: 0; height: 0; visibility: hidden } .clearfix:after, .clearfix:before { content: ""; display: table } .clearfix:after { clear: both } .clearfix { zoom: 1 } .fl { float: left; } .fr { float: right; } @font-face{ font-family: mgiFont, FZLTDHJW;; } @font-face{ font-family: mgiFont, FZLTDHJW; } .conwidth{ max-width: 1600px; width: 90%; margin: auto; } .owidth{ max-width: 1920px; width: 100%; margin: auto; padding: 0 5.2%; box-sizing: border-box; } /*项目导航*/ #fp-nav ul li, .fp-slidesNav ul li{ width: 21px; height: 21px; } #fullPage-nav li, .fullPage-slidesNav li{ margin: 10px; } #fp-nav ul li a span, .fp-slidesNav ul li a span{ width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; background: #00a19b; } #fp-nav ul li a.active span, .fp-slidesNav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li:hover a.active span{ width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; border: none; background: #00a19b; box-sizing: border-box; } /*banner*/ .banner{position: relative;height: 100%;width: 100%;} .banner-lunbo{height: 100%;} .banner img{width: 100%;max-width: 100%;height: 100%; object-fit: cover;} .banner .bgimg{ width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; } .bannerImg{ display: none; } .banner-box{position: relative;height: 100%;} .banner-title{position: absolute;left: 50%; top: 50%; transform: translate(-50%, -50%);} .banner-title h1{font-size: 50px;color: #ffffff; margin-bottom: 20px;} .banner-title p{font-family: mgiFont, FZLTDHJW; font-size: 16px;color: rgba(255,255,255,0.8);} .banner-lunbo .swiper-slide>a{ position:relative; display:block; width: 100%; height: 100%; } .bannerNew{ position: absolute; right: 6%; top: 50%; transform: translateY(-50%); z-index: 9; display: flex; justify-content:flex-end; } .bannerNew .wrap{ position: relative; width: 415px; background: rgba(255,255,255,0.1); border-radius: 10px; overflow: hidden; } .bannerNew .wrap .title{ padding: 25px; color: #ffffff; font-size: 18px; } .bannerNew .wrap .swiper-slide ul li a{ position: relative; display: flex; align-items: center; flex-wrap: wrap; width: 100%; min-height: 75px; color: #FFFFFF; font-size: 16px; line-height: 1.7; border-top: rgba(255,255,255,0.2) solid 1px; padding: 10px 50px 10px 25px; box-sizing: border-box; transition: all 0.4s ease; } .bannerNew .wrap .swiper-slide ul li a:after{ content: ''; position: absolute; right: 20px; top: 0; width: 10px; height: 100%; background: url(../images/index/small_arrow_w.png) right center no-repeat; } .bannerNew .wrap .swiper-slide ul li:hover a{ background: rgba(255,255,255,0.2); } .bannerNew .wrap .swiper-slide ul li a:before{ content: ''; position: absolute; left: 0; top: 0; bottom: 0; margin: auto; width: 3px; height: 0; background: #00a19b; transition: all 0.6s ease; } .bannerNew .wrap .swiper-slide ul li:hover a:before{ height: 75%; } .bannerNew .wrap .swiper-slide ul li .t2{ width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bannerNew .swiper-pagination{ display: inline-block; width: auto; bottom: auto; top: 27px; left: auto; right: 25px; } .bannerNew .swiper-pagination-bullet{ width: 14px; height: 14px; background: rgba(255,255,255,0.2); opacity: 1; } .bannerNew .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{ margin: 0px 8px; } .bannerNew .swiper-pagination-bullet-active{ background: #00a19b; } .downward{ display: none; position: absolute; left: 50%; transform: translateX(-50%); bottom: 56px; z-index: 10; } .downward .downIcon{ position: relative; width: 24px; height: 36px; margin: 0px auto 15px; border-radius: 15px; border: #FFFFFF solid 1px; box-sizing: border-box; } .downward .downIcon .ic{ position:absolute; left:0; right: 0; top: 7px; margin: auto; width:2px; height:6px; background: #FFFFFF;    animation:wheel 1.2s infinite; -moz-animation:wheel 1.2s infinite; -webkit-animation:wheel 1.2s infinite; } .downward .txt{ color: #FFFFFF; font-size: 14px; } @keyframes wheel{ to{opacity:0;top:20px} } @-moz-keyframes wheel{ to{opacity:0;top:20px} } @-webkit-keyframes wheel{ to{opacity:0;top:20px} } .comTitle{ color: #000000; font-size: 40px; text-align: center; } .comTitle.white{ color: #FFFFFF; } .comTitle.left{ text-align: left; } /*产品中心*/ .ProductCenter .wrap{ margin-top: 40px; display: flex; align-items: stretch; justify-content: space-between; } .ProductCenter .wrap .left_w{ position: relative; float: left; width: 68%; } .mainProduct{ position: relative; width: 100%; overflow: hidden; border-radius: 10px; } .mainProduct .swiper-slide a{ display: block; width: 100%; overflow: hidden; } .mainProduct .swiper-slide a img{ display: block; width: 100%; } .ProductCenter .wrap .right_w{ float: right; /*width: 31.1%;*/ width: calc(32% - 20px); } .mainTab{ position: absolute; left: 0; bottom: 0; z-index: 5; width: 100%; text-align: center; } .mainTab ul{ display: flex; align-items: flex-end; justify-content: center; } .mainTab ul li{ min-width: 25.6%; max-width: calc((100% - 36px) /3); text-align: center; padding: 27px 10px; margin-right: 18px; background: #FFFFFF; box-sizing: border-box; border-radius: 10px; box-shadow: 0px 0px 18px rgba(0,0,0,0.1); transition: all 0.5s ease; } .mainTab ul li:hover, .mainTab ul li.on{ background: #00a19b; box-shadow: 1px 0px 32px rgba(0,0,0,0.2); } .mainTab ul li:last-child{ margin-right: 0; } .mainTab ul li .icon{ margin-bottom: 20px; } .mainTab ul li .icon .ic2{ display: none; } .mainTab ul li:hover .icon .ic1, .mainTab ul li.on .icon .ic1{ display: none; } .mainTab ul li:hover .icon .ic2, .mainTab ul li.on .icon .ic2{ display: inline-block; } .mainTab ul li .txt{ color: #00a19b; font-size: 20px; transition: all 0.5s ease; } .mainTab ul li:hover .txt, .mainTab ul li.on .txt{ color: #ffffff; } .mainTab ul li .arrow{ height: 0; overflow: hidden; transition: all 0.5s ease; } .mainTab ul li:hover .arrow, .mainTab ul li.on .arrow{ height: 50px; } .mainTab ul li .arrow img{ padding-top: 30px; } .picswiper{ position: relative; width: 100%; overflow: hidden; border-radius: 10px; box-shadow: 0px 0px 13px rgba(0,0,0,0.15); margin-bottom: 15px; } .picswiper .swiper-slide a{ display: block; width: 100%; overflow: hidden; } .picswiper .swiper-slide a img{ width: 100%; } .picswiper .swiper-button-next, .picswiper .swiper-button-prev{ position: absolute; top: 50%; width: 45px; height: 45px; margin-top: -23px; z-index: 10; cursor: pointer; -moz-background-size: 100% 100%; -webkit-background-size: 100% 100%; background-size: 100% 100%; background-position: center; background-repeat: no-repeat; } .picswiper .swiper-button-next, .picswiper.swiper-container-rtl .swiper-button-prev { background-image: url(../images/index/ic16.png); right: 0; left: auto; } .picswiper .swiper-button-prev, .picswiper.swiper-container-rtl .swiper-button-next { background-image: url(../images/index/ic15.png); left: 0; right: auto; } .productNew{ position: relative; width: 100%; background: rgba(255,255,255,0.1); border-radius: 10px; overflow: hidden; box-shadow: 0px 0px 13px rgba(0,0,0,0.15); } .productNew .title{ padding: 25px; color: #00a19b; font-size: 18px; } .productNew .swiper-slide ul li{ border-bottom: rgba(0,0,0,0.1) solid 1px; } .productNew .swiper-slide ul li:first-child{ border-top: rgba(0,0,0,0.1) solid 1px; } .productNew .swiper-slide ul li:last-child{ border-bottom: none; } .productNew .swiper-slide ul li a{ position: relative; display: flex; align-items: center; flex-wrap: wrap; width: 100%; min-height: 75px; color: rgba(0,0,0,0.6); font-size: 16px; line-height: 1.7; border-top: rgba(255,255,255,0.2) solid 1px; padding: 10px 50px 10px 25px; box-sizing: border-box; transition: all 0.4s ease; } .productNew .swiper-slide ul li a:after{ content: ''; position: absolute; right: 20px; top: 0; width: 10px; height: 100%; background: url(../images/index/small_arrow.png) right center no-repeat; } .productNew .swiper-slide ul li:hover a{ color: #00a19b; background: rgba(215,215,215,0.2); } .productNew .swiper-slide ul li:hover a:after{ background: url(../images/index/small_arrow_g.png) right center no-repeat; } .productNew .swiper-slide ul li a:before{ content: ''; position: absolute; left: 0; top: 0; bottom: 0; margin: auto; width: 3px; height: 0; background: #00a19b; transition: all 0.6s ease; } .productNew .swiper-slide ul li:hover a:before{ height: 75%; } .productNew .swiper-slide ul li .t2{ width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .productNew .swiper-pagination{ display: inline-block; width: auto; bottom: auto; top: 27px; left: auto; right: 25px; } .productNew .swiper-pagination-bullet{ width: 14px; height: 14px; background: #e5e5e5; opacity: 1; } .productNew.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{ margin: 0px 8px; } .productNew .swiper-pagination-bullet-active{ background: #00a19b; } /*热门应用*/ .section .pagebg{ position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; overflow: hidden; } .section .pagebg.none{ display: none; } .section .videoBG{ position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; overflow: hidden; } .section .videoBG video{ position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; object-fit: fill; } .TopicalApplication .wrap{ margin-top: 4.36%; } .TopicalApplication .wrap>ul{ display: flex; justify-content: space-between; } .TopicalApplication .wrap>ul>li{ position: relative; text-align: center; padding-top: 35px; } .TopicalApplication .wrap ul li.first{ max-width: 570px; width: 33.33%; } .TopicalApplication .wrap ul li.second{ max-width: 430px; width: 33.33%; } .TopicalApplication .wrap ul li.third{ max-width: 350px; width: 33.33%; } .TopicalApplication .wrap ul li .img{ width: 100%; overflow: hidden; } .TopicalApplication .wrap ul li.first .img img{ width: 54%; } .TopicalApplication .wrap ul li.second .img img{ width: 86%; } .TopicalApplication .wrap ul li.third .img img{ width: 72.57%; } .TopicalApplication .wrap ul li ul{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .TopicalApplication .wrap ul li ul li{ position: absolute; } .TopicalApplication .wrap ul li.first ul li.w1{ left: 12%; top: 40%; } .TopicalApplication .wrap ul li.first ul li.w2{ left: 32%; top: 0; } .TopicalApplication .wrap ul li.first ul li.w3{ right: 15%; bottom: 20%; } /**/ .TopicalApplication .wrap ul li.first ul li.w4{ top: -25%; left: 18%; } .TopicalApplication .wrap ul li.first ul li.w5{ bottom: -5%; left: 16%; } .TopicalApplication .wrap ul li.first ul li.w6{ top: -16%; right: 5%; } .TopicalApplication .wrap ul li.first ul li.w7{ top: 20%; right: -20%; } .TopicalApplication .wrap ul li.first ul li.w8{ bottom: 50%; right: 0%; } /**/ .TopicalApplication .wrap ul li.second ul li.w1{ left: 8%; bottom: 20% } /**/ .TopicalApplication .wrap ul li.second ul li.w2{ left: -16%; bottom: -9%; } .TopicalApplication .wrap ul li.second ul li.w3{ left: 30%; bottom: -9%; } .TopicalApplication .wrap ul li.second ul li.w4{ right: 30%; bottom: 38%; } .TopicalApplication .wrap ul li.second ul li.w5{ right: -8%; bottom: 22%; } .TopicalApplication .wrap ul li.second ul li.w6{ right: -3%; top: 34%; } .TopicalApplication .wrap ul li.second ul li.w7{ left: 19%; top: 34%; } .TopicalApplication .wrap ul li.second ul li.w8{ left: 10%; top: 16%; } .TopicalApplication .wrap ul li.second ul li.w9{ left: 38%; top: 1%; } .TopicalApplication .wrap ul li.second ul li.w10{ right: 0%; top: 16%; } /**/ .TopicalApplication .wrap ul li.third ul li.w1{ right: 15%; top: 0% } /**/ .TopicalApplication .wrap ul li.third ul li.w2{ left: -32%; top: -11%; } .TopicalApplication .wrap ul li.third ul li.w3{ left: 13%; top: 13%; } .TopicalApplication .wrap ul li.third ul li.w4{ left: -4%; bottom: 25%; } .TopicalApplication .wrap ul li.third ul li.w5{ right: 0; bottom: 50%; } .TopicalApplication .wrap ul li.third ul li.w6{ right: 20%; bottom: 15%; } /**/ .TopicalApplication .wrap ul li ul li i{ display: none; } .TopicalApplication .wrap ul li ul li .txt{ color: #FFFFFF; font-size: 20px; } .TopicalApplication .wrap ul li ul li .txt a{ color: #FFFFFF; } .TopicalApplication .wrap .btn{ margin-top: 16vh; text-align: center; } .TopicalApplication .wrap .btn a{ display: flex; align-items: center; justify-content: space-between; width: 180px; height: 50px; line-height: 48px; margin: auto; padding: 0px 25px; box-sizing: border-box; border-radius: 25px; border: rgba(255,255,255,0.2) solid 1px; color: rgba(255,255,255,0.5); font-size: 16px; transition: all 0.5s ease; } .TopicalApplication .wrap .btn a:hover{ background: #00a19b; color: #FFFFFF; } .TopicalApplication .wrap .btn a img{ display: inline-block; } /*组学创新的力量*/ .InnovationPower .wrap{ margin-top: 50px; position: relative; width: 100%; overflow: hidden; } .InnovationPower .wrap a{ display: block; width: 100%; overflow: hidden; border-radius: 10px; background-color: #f7f7f7; } .InnovationPower .wrap .img{ width: 100%; overflow: hidden; } .InnovationPower .wrap .img img{ width: 100%; transition: all 0.4s ease; } .InnovationPower .wrap a:hover .img img{ transform: scale(1.1); } .InnovationPower .wrap .txt{ padding: 35px 25px; overflow: hidden; } .InnovationPower .wrap .txt .t1{ display: flex; justify-content: space-between; color: #b4b4b4; font-size: 16px; transition: all 0.4s ease; margin-bottom: 20px; } .InnovationPower .wrap .txt .t1 .sp{ font-family: mgiFont, FZLTDHJW; } .InnovationPower .wrap .txt .t2{ color: #000000; font-size: 24px; line-height: 1.3; transition: all 0.4s ease; height: 63px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .InnovationPower .wrap .txt .t3{ color: #b4b4b4; font-size: 16px; margin-top: 45px; } .InnovationPower .wrap .txt .t3 span{ position: relative; padding-right: 40px; } .InnovationPower .wrap .txt .t3 span i{ position: absolute; right: 0; top: 0; width: 23px; height: 100%; background: url(../images/index/ic18.png) center no-repeat; } .InnovationPower .wrap a:hover .txt .t3 span i{ background: url(../images/index/ic19.png) center no-repeat; } .InnovationPower .wrap a:hover .txt .t1, .InnovationPower .wrap a:hover .txt .t2, .InnovationPower .wrap a:hover .txt .t3{ color: #00a19b; } .InnovationPower .swiper-pagination{ display: none; } .InnovationPower .indexbtn{ margin-top: 50px; } .InnovationPower .indexbtn a{ margin: auto; } /*关于我们*/ .AboutUs .wrap{ display: flex; justify-content: space-between; align-items: flex-end; } .AboutUs .wrap .abstract{ max-width: 800px; width: 55%; margin-bottom: 70px; padding: 3.8% 3.8% 4%; border-radius: 10px; background: rgba(0,0,0,0.2); border: rgba(255,255,255,0.2) solid 1px; box-sizing: border-box; overflow: hidden; } .AboutUs .wrap .abstract .line{ width: 42px; height: 1px; margin-top: 20px; margin-bottom: 20px; background: rgba(255,255,255,0.2); } .AboutUs .wrap .abstract .text{ color: #f2f2f2; font-size: 16px; line-height: 1.7; } .AboutUs .wrap .abstract .indexbtn{ margin-top: 40px; } .indexbtn a{ display: flex; justify-content: space-between; align-items: center; width: 180px; padding: 0px 25px; height: 50px; line-height: 48px; border: #00a19b solid 1px; border-radius: 25px; background: #00a19b; transition: all 0.4s ease; color: #FFFFFF; font-size: 16px; } .indexbtn a img{ display: inline-block; } .indexbtn a .ic2{ display: none; } .indexbtn a:hover .ic2{ display: inline-block; } .indexbtn a:hover .ic1{ display: none; } .indexbtn a:hover{ background: none; color: #00a19b; } .AboutUs .wrap .numBox{ max-width: 386px; width: 40%; margin-right: 25px; overflow: hidden; } .AboutUs .wrap .numBox ul{ display: flex; align-items: stretch; flex-wrap: wrap; } .AboutUs .wrap .numBox ul li{ float: left; display: flex; align-items: center; flex-wrap: wrap; justify-content: center; width: calc((100% - 15px) / 2); min-height: 190px; margin-right: 15px; margin-bottom: 15px; border-radius: 10px; padding: 15px; background: rgba(0,0,0,0.2); border: rgba(255,255,255,0.2) solid 1px; box-sizing: border-box; overflow: hidden; } .AboutUs .wrap .numBox ul li:nth-child(2n){ margin-right: 0; } .AboutUs .wrap .numBox ul li .t1{ color: #FFFFFF; font-size: 16px; margin-bottom: 12px; } .AboutUs .wrap .numBox ul li .t1 .timer{ color: #FFFFFF; font-size: 34px; margin-right: 10px; } .AboutUs .wrap .numBox ul li .t1 .sp1{ font-family: mgiFont, FZLTDHJW; } .AboutUs .wrap .numBox ul li .t1 .sp2{ font-family: mgiFont, FZLTDHJW; font-size: 22px; } .AboutUs .wrap .numBox ul li .t2{ color: #e8e8e8; font-size: 14px; } /*加入我们*/ .JoinUs { } .JoinUs .text{ color: #FFFFFF; font-size: 16px; line-height: 1.7; margin: 20px auto 40px; text-align: center; } .JoinUs .indexbtn a{ margin: auto; } /**/ .section { position: relative; overflow: hidden; } @media only screen and (min-width: 1025px){ .section .pagebg { -o-transform: scale(1.2, 1.2); -ms-transform: scale(1.2, 1.2); -moz-transform: scale(1.2, 1.2); -webkit-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2); -o-transition: ease 2s; -ms-transition: ease 2s; -moz-transition: ease 2s; -webkit-transition: ease 2s; transition: ease 2s; } .section.active .pagebg { -o-transform: scale(1, 1); -ms-transform: scale(1, 1); -moz-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); } .section.active .banner-title h1, .section.active .banner-title p, .section.active .bannerNew .wrap{ -moz-animation: DownMove 1s ease; -webkit-animation: DownMove 1s ease; animation: DownMove 1s ease; } @-moz-keyframes DownMove{ 0%{ transform: translateY(100px); opacity: 0.5; } 100%{ transform: translateY(0px); opacity: 1; } } @-webkit-keyframes DownMove{ 0%{ transform: translateY(100px); opacity: 0.5; } 100%{ transform: translateY(0px); opacity: 1; } } @keyframes DownMove{ 0%{ transform: translateY(100px); opacity: 0.5; } 100%{ transform: translateY(0px); opacity: 1; } } .section .ProductCenter .comTitle, .section .TopicalApplication .comTitle, .section .InnovationPower .comTitle{ opacity: 0; transform: translateY(200px); transition: all 1.2s ease; } .section.active .ProductCenter .comTitle, .section.active .TopicalApplication .comTitle, .section.active .InnovationPower .comTitle{ opacity: 1; transform: translateY(0); } .section .ProductCenter .wrap .left_w, .section .picswiper, .section .productNew, .TopicalApplication .wrap, .section .TopicalApplication .wrap .btn, .InnovationPower .wrap, .InnovationPower .indexbtn, .AboutUs .wrap, .JoinUs .owidth{ opacity: 0; transform: translateY(200px); transition: all 1.5s ease; } .section.active .ProductCenter .wrap .left_w, .section.active .picswiper, .section.active .productNew, .section.active .TopicalApplication .wrap, .section.active .TopicalApplication .wrap .btn, .section.active .InnovationPower .wrap, .section.active .InnovationPower .indexbtn, .section.active .AboutUs .wrap, .section.active .JoinUs .owidth{ opacity: 1; transform: translateY(0); } } @media only screen and (max-width: 1680px){ .ProductCenter .comTitle{ padding-top: 30px; } .ProductCenter .owidth{ width: 90%; } .InnovationPower .comTitle{ padding-top: 30px; } .InnovationPower .owidth{ width: 90%; } } @media only screen and (max-width: 1536px){ .banner-title h1{ font-size: 42px; } .comTitle{ font-size: 36px; } /**/ .bannerNew .wrap .title, .productNew .title{ padding: 20px; } .bannerNew .wrap .swiper-slide ul li a, .productNew .swiper-slide ul li a{ min-height: 64px; font-size: 15px; padding: 6px 50px 6px 20px } .bannerNew .swiper-pagination, .productNew .swiper-pagination{ top: 22px; right: 15px; } .bannerNew .swiper-pagination-bullet, .productNew .swiper-pagination-bullet{ width: 12px; height: 12px; } .bannerNew .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .productNew.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{ margin: 0px 6px; } .ProductCenter .comTitle{ padding-top: 30px; } .mainTab ul li{ padding: 24px 10px; } .mainTab ul li:hover .arrow, .mainTab ul li.on .arrow{ height: 40px; } .mainTab ul li .arrow img{ padding-top: 20px; } /**/ .TopicalApplication .wrap ul li.first ul li.w1 { left: 10%; top: 36%; } .TopicalApplication .wrap ul li.first ul li.w3 { bottom: 14%; } .TopicalApplication .wrap ul li.second ul li.w1{ bottom: 23%; } /**/ .InnovationPower .wrap{ margin-top: 40px; } .InnovationPower .wrap .txt .t2{ font-size: 21px; height: 55px; } .InnovationPower .wrap .txt .t3{ margin-top: 35px; } /**/ .AboutUs .wrap .numBox ul li{ min-height: 160px; } /**/ .ProductCenter .owidth{ width: 90%; } } @media only screen and (max-width: 1440px){ .TopicalApplication .wrap ul li.first ul li.w3{ right: 12%; bottom: 16%; } .TopicalApplication .wrap .btn{ margin-top: 12vh; } } @media only screen and (max-width: 1280px){ .banner-title h1{ font-size: 32px; } .banner-title p{ font-size: 15px; } .bannerNew { right: 8%; } .comTitle{ font-size: 32px; } /**/ .bannerNew .wrap .title, .productNew .title{ padding: 18px; } .bannerNew .wrap .swiper-slide ul li a, .productNew .swiper-slide ul li a{ min-height: 54px; font-size: 14px; padding: 5px 40px 5px 18px } .bannerNew .swiper-pagination, .productNew .swiper-pagination{ top: 18px; } .bannerNew .swiper-pagination-bullet, .productNew .swiper-pagination-bullet{ width: 10px; height: 10px; } .bannerNew .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .productNew.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{ margin: 0px 5px; } .ProductCenter .comTitle{ padding-top: 60px; } .ProductCenter .wrap{ margin-top: 30px; } .mainTab ul li{ padding: 18px 10px; } .mainTab ul li .icon{ margin-bottom: 15px; } .mainTab ul li .txt{ font-size: 18px; } .mainTab ul li:hover .arrow, .mainTab ul li.on .arrow{ height: 30px; } .mainTab ul li .arrow img{ padding-top: 15px; } /**/ .TopicalApplication .wrap ul li ul li .txt{ font-size: 18px; } /**/ .TopicalApplication .wrap ul li.first ul li.w7{ right: -10%; } .TopicalApplication .wrap ul li.third ul li.w4{ left: 8%; bottom: 22%; } /**/ .InnovationPower .comTitle{ padding-top: 60px; } .InnovationPower .wrap .txt{ padding: 30px 20px; } .InnovationPower .wrap .txt .t1{ margin-bottom: 15px; } .InnovationPower .wrap .txt .t2{ font-size: 19px; height: 50px; } .InnovationPower .wrap .txt .t3{ margin-top: 25px; } .InnovationPower .indexbtn{ margin-top: 40px; } } @media only screen and (max-width: 1024px){ .comTitle{ font-size: 30px; } /**/ .indexmian{ padding-top: 70px; } .banner .bgimg{ display: none; } .bannerImg{ display: block; } .bannerImg .img2{ display: none; } .bannerNew{ /*display: none;*/ max-width: 27%; right:3%; } .bannerNew .wrap{ width: 100%; } .downward{ bottom: 36px; display: none; } .downward .downIcon{ width: 18px; height: 30px; margin-bottom: 0; } .downward .txt{ display: none; } /**/ .ProductCenter{ padding-top: 70px; padding-bottom: 70px; } .ProductCenter .owidth{ width: 100%; } .ProductCenter .comTitle{ padding-top: 0; } .ProductCenter .wrap{ margin-top: 40px; } .ProductCenter .wrap .left_w{ width: 70%; } .ProductCenter .wrap .right_w{ width: calc(30% - 15px); } .mainTab ul li{ padding: 20px; } .bannerNew .wrap .swiper-slide ul li a, .productNew .swiper-slide ul li a{ padding-right: 30px; } .productNew .swiper-slide ul li a:after{ right: 15px; } .productNew .swiper-pagination{ right: 12px; } /**/ .TopicalApplication{ padding-top: 70px; padding-bottom: 70px; } .TopicalApplication .wrap{ margin-top: 50px; } .TopicalApplication .wrap ul li ul li .txt{ /*font-size: 16px;*/ font-size: 15px; } .TopicalApplication .wrap ul li.first ul li.w1 { left: 8%; top: 39%; } .TopicalApplication .wrap ul li.first ul li.w2 { left: 27%; top: 4%; } .TopicalApplication .wrap ul li.first ul li.w7{ right: -4%; } .TopicalApplication .wrap ul li.third ul li.w2{ left: 0; } .TopicalApplication .wrap ul li.third ul li.w4{ bottom: 13%; } .TopicalApplication .wrap ul li.third ul li.w1{ top: 4%; } .TopicalApplication .wrap ul li.third ul li.w6{ bottom: 0; } .TopicalApplication .wrap .btn a{ width: 150px; font-size: 15px; height: 45px; line-height: 43px; } .indexbtn a{ font-size: 15px; } /**/ .InnovationPower{ padding-top: 70px; padding-bottom: 70px; } .InnovationPower .comTitle{ padding-top: 0; } .InnovationPower .owidth{ width: 100%; } .InnovationPower .wrap .txt .t1, .InnovationPower .wrap .txt .t3{ font-size: 15px; } .InnovationPower .wrap .txt .t2{ font-size: 18px; height: 47px; } .InnovationPower .indexbtn{ margin-top: 30px; } /**/ .AboutUs{ padding-top: 70px; padding-bottom: 70px; } .AboutUs .wrap .abstract .text{ font-size: 15px; } .indexbtn a{ width: 150px; height: 45px; line-height: 43px; } .AboutUs .wrap .numBox ul li{ min-height: 130px; } /**/ .section .pagebg.none{ display: block; } .section .videoBG{ display: none; } .JoinUs{ padding-top: 15%; padding-bottom: 15%; } .JoinUs .text{ font-size: 15px; } } @media only screen and (max-width: 768px){ .banner-title h1{ font-size: 28px; } .comTitle{ font-size: 28px; } /*20220825*/ .banner{ height: calc(100vh - 70px); } .banner-title{ top: 20%; left: 0; transform: none; } .bannerImg .img1{ display: none; } .bannerImg .img2{ display: block; height: calc(100vh - 70px); object-fit: cover; } .bannerNew{ max-width: 90%; right: 5%; top: auto; bottom: 10%; transform: none; display: block; padding: 0 !important; } .bannerNew .swiper-slide li{ display: block; } /**/ /*.bannerNew{ position: static; padding: 60px 0px; transform: none; max-width: 90%; width: 90%; margin: auto; } .bannerNew .wrap{ background: rgba(255,255,255,0.1); box-shadow: 0px 0px 13px rgb(0 0 0 / 15%); } .bannerNew .wrap .title{ color: #00a19b; } .bannerNew .swiper-slide ul li{ border-bottom: rgba(0,0,0,0.1) solid 1px; } .bannerNew .swiper-slide ul li:first-child{ border-top: rgba(0,0,0,0.1) solid 1px; } .bannerNew .wrap .swiper-slide ul li a{ color: rgba(0,0,0,0.6) } .bannerNew .wrap .swiper-slide ul li a:after{ background: url(../images/index/small_arrow.png) right center no-repeat; } .bannerNew .wrap .swiper-slide ul li:hover a{ color: #00a19b; background: rgba(215,215,215,0.2); } .bannerNew .swiper-slide ul li:hover a:after{ background: url(../images/index/small_arrow_g.png) right center no-repeat; }*/ /**/ .ProductCenter{ display: none; padding-top: 60px; padding-bottom: 60px; } .ProductCenter .wrap{ display: block; margin-top: 0; } .ProductCenter .comTitle{ display: none; } .ProductCenter .wrap .left_w{ float: none; width: 100%; padding-bottom: 8%; display: none; } .ProductCenter .wrap .right_w{ float: none; width: 100%; /*margin-top: 40px;*/ } .picswiper{ display: none; margin-bottom: 30px; } .bannerNew .wrap .title, .productNew .title{ padding: 25px; font-size: 20px; } .bannerNew .swiper-pagination, .productNew .swiper-pagination{ top: 28px; right: 15px; } .bannerNew .wrap .swiper-slide ul li a, .productNew .swiper-slide ul li a{ padding-top: 10px; padding-bottom: 10px; padding-left: 25px; padding-right: 40px; min-height: 60px; font-size: 16px; } .productNew .swiper-slide ul li a:after{ right: 20px; } /**/ .TopicalApplication { min-height: calc(100vh - 70px); } .TopicalApplication .wrap>ul{ display: block; min-height: 50vh; } .TopicalApplication .wrap>ul>li{ padding-top: 0; } .TopicalApplication .wrap ul li.first, .TopicalApplication .wrap ul li.second, .TopicalApplication .wrap ul li.third{ max-width: 100%; width: 100%; } .TopicalApplication .wrap ul li .img{ display: none; } .TopicalApplication .wrap ul li ul{ position: static; } .TopicalApplication .wrap ul li ul li{ position: static; text-align: left; margin-bottom: 40px; } .TopicalApplication .wrap ul li ul li .txt{ position: relative; padding-left: 12px; } .TopicalApplication .wrap ul li ul li i{ display: block; position: absolute; left: 0; top: 3px; width: 6px; height: 6px; background: rgba(255,255,255,0.8); border-radius: 50%; box-shadow: 0px 0px 20px rgba(255,255,255,0.2); } .TopicalApplication .wrap ul li ul{ display: flex; align-items: center; flex-wrap: wrap; } .TopicalApplication .wrap ul li ul li{ min-width: 33.33%; box-sizing: border-box; padding-right: 10px; } .TopicalApplication .wrap ul li ul li:nth-child(4), .TopicalApplication .wrap ul li ul li:nth-child(5), .TopicalApplication .wrap ul li ul li:nth-child(6), .TopicalApplication .wrap ul li ul li:nth-child(10){ padding-left: 20px; text-align: right; } /*.TopicalApplication .wrap ul li.first ul li.w1 { left: 2%; top: 44%; } .TopicalApplication .wrap ul li.first ul li.w2{ left: 21%; } .TopicalApplication .wrap ul li.first ul li.w3 { right: 7%; bottom: 10%; } .TopicalApplication .wrap ul li.second ul li.w1{ left: 4%; } .TopicalApplication .wrap ul li.third ul li.w1{ right: 11%; top: 4%; }*/ .TopicalApplication .wrap ul li ul li .txt{ display:inline-block; font-size: 15px; } .TopicalApplication .wrap .btn{ margin-top: 40px; } /**/ .InnovationPower{ padding-top: 60px; padding-bottom: 60px; } .InnovationPower .wrap{ padding-bottom: 40px; } .InnovationPower .swiper-pagination{ display: block; } .InnovationPower .swiper-container-horizontal>.swiper-pagination-bullets, .InnovationPower .swiper-pagination-custom, .InnovationPower .swiper-pagination-fraction{ bottom: 0; } .bannerNew .swiper-pagination-bullet, .productNew .swiper-pagination-bullet{ width: 10px; height: 10px; background: #e5e5e5; opacity: 1; } .bannerNew .swiper-pagination-bullet-active, .productNew .swiper-pagination-bullet-active{ background: #00a19b; } .InnovationPower .swiper-pagination-bullet-active{ background: #00a19b; } /**/ .AboutUs .wrap .numBox{ margin-right: 0; } .AboutUs .wrap .numBox ul li .t1 .timer{ font-size: 30px; } } @media only screen and (max-width: 640px){ .banner-title h1, .comTitle{ font-size: 24px; } .downward{ bottom: 20px; } .bannerNew{ padding-top: 50px; padding-bottom: 50px; } /**/ .ProductCenter{ padding-top: 50px; padding-bottom: 50px; } /*.ProductCenter .wrap{ margin-top: 35px; }*/ .mainTab ul li{ padding: 20px 15px; } .mainTab ul li .icon img{ max-width: 56%; } .mainTab ul li .txt{ font-size: 16px; } /**/ .AboutUs .wrap{ display: block; } .AboutUs .wrap .abstract{ max-width: 100%; width: 100%; margin-bottom: 30px; padding: 30px; } .AboutUs .wrap .numBox{ max-width: 100%; width: 100%; } } @media only screen and (max-width: 540px){ .indexmian{ padding-top: 60px; } /**/ .banner-title p{ font-size: 14px; } .banner-title h1{ margin-bottom: 15px; } .banner{ height: calc(100vh - 60px); } .bannerImg .img2{ height: calc(100vh - 60px); } /**/ /*.ProductCenter .wrap{ margin-top: 30px; }*/ .ProductCenter .wrap .left_w{ padding-bottom: 0; } .mainTab{ display: none; } /**/ /*.ProductCenter .wrap .right_w{ margin-top: 30px; }*/ .bannerNew .wrap .swiper-slide ul li a, .productNew .swiper-slide ul li a{ font-size: 15px; } /**/ /*.TopicalApplication .wrap>ul{ display: block; } .TopicalApplication .wrap>ul>li{ padding-top: 0; } .TopicalApplication .wrap ul li.first, .TopicalApplication .wrap ul li.second, .TopicalApplication .wrap ul li.third{ max-width: 100%; width: 100%; } .TopicalApplication .wrap ul li .img{ display: none; } .TopicalApplication .wrap ul li ul{ position: static; } .TopicalApplication .wrap ul li ul li{ position: relative; left: 0 !important; top: 0 !important; text-align: left; padding-left: 12px; margin-bottom: 30px; } .TopicalApplication .wrap ul li ul li i{ display: block; position: absolute; left: 0; top: 3px; width: 6px; height: 6px; background: rgba(255,255,255,0.8); border-radius: 50%; box-shadow: 0px 0px 20px rgba(255,255,255,0.2); } .TopicalApplication .wrap ul li.first ul{ display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } .TopicalApplication .wrap ul li.first ul li{ width: 50%; } .TopicalApplication .wrap ul li.second{ float: left; width: 50%; text-align: left; padding-left: 5%; box-sizing: border-box; } .TopicalApplication .wrap ul li.third{ float: left; width: 50%; padding-right: 5%; text-align: right; box-sizing: border-box; } .TopicalApplication .wrap ul li.second ul, .TopicalApplication .wrap ul li.third ul{ display: inline-block; width: auto; height: auto; } .TopicalApplication .wrap .btn{ margin-top: 10vh; }*/ .TopicalApplication .wrap ul li ul li{ margin-bottom: 30px; } .TopicalApplication .wrap .btn{ margin-top: 20px; } /**/ .InnovationPower{ padding-top: 50px; padding-bottom: 50px; } .InnovationPower .wrap{ margin-top: 30px; } /**/ .AboutUs{ padding-top: 60px; } /**/ .TopicalApplication{ min-height: calc(100vh - 60px); box-sizing: border-box; } .TopicalApplication .wrap .btn{ /*position: absolute; bottom: 32%; left: 50%; margin-left: -75px; width: 150px; margin-top: 0;*/ } .JoinUs{ position: relative; padding: 0px; min-height: calc(100vh - 60px); box-sizing: border-box; } .JoinUs .owidth{ position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; } } @media only screen and (max-width: 480px){ .banner-title h1, .comTitle{ font-size: 22px; } .sidebar{ right: 15px; } .sidebar ul li a, .sidebar ul li.istop a { width: 40px; height: 40px; line-height: 40px; } .sidebar ul li a img, .sidebar ul li.istop a img{ max-width: 52%; } /**/ .addfooter .foot_infor ul li{ display: block; } .addfooter .foot_infor .h3, .addfooter .foot_infor .h5{ font-size: 14px; } /**/ .bannerNew .wrap .title, .productNew .title{ padding: 20px; } .bannerNew .wrap .swiper-slide ul li a, .productNew .swiper-slide ul li a{ padding-left: 20px; } .bannerNew .swiper-pagination, .productNew .swiper-pagination{ top: 24px; } .bannerNew, .ProductCenter, .InnovationPower{ padding-top: 40px; padding-bottom: 40px; } .TopicalApplication .wrap .btn a, .indexbtn a{ width: 136px; font-size: 14px; height: 42px; line-height: 40px; padding: 0px 20px; } .AboutUs{ padding-top: 50px; } .AboutUs .wrap .abstract .text{ font-size: 14px; } .AboutUs .wrap .numBox ul li .t1 .timer{ font-size: 28px; } /**/ .JoinUs .text{ font-size: 14px; } /**/ .TopicalApplication .wrap ul li ul li{ min-width: 50%; } .TopicalApplication .wrap ul li ul li:nth-child(3), .TopicalApplication .wrap ul li ul li:nth-child(4), .TopicalApplication .wrap ul li ul li:nth-child(7), .TopicalApplication .wrap ul li ul li:nth-child(8){ text-align: right; padding-left: 0; } .TopicalApplication .wrap ul li ul li:nth-child(5), .TopicalApplication .wrap ul li ul li:nth-child(6), .TopicalApplication .wrap ul li ul li:nth-child(9), .TopicalApplication .wrap ul li ul li:nth-child(10){ text-align: left; padding-left: 0; } } @media only screen and (max-width: 375px){ .banner-title{ top: 15%; } .bannerNew{ bottom: 5%; } } .mImg{ display: none; } @media only screen and (max-width: 768px){ .mImg{ display: block; } .pImg{ display: none; } } @media only screen and (max-width: 1024px){ .fp-tableCell{ height: auto !important; } .section .pagebg{ z-index: 1; } .TopicalApplication, .AboutUs, .JoinUs{ position: relative; z-index: 2; } } /*20220923*/ .statisticsTxt{ font-family: "syr"; color: #F2F2F2; font-size: 14px; line-height: 1.7; text-align: center; } /*@media only screen and (max-width: 768px){ .ProductCenter{ display: block; } }*/ /*20220926*/ .MProductCenter{ display: none; padding-top: 60px; padding-bottom: 60px } .MProductCenter ul{ margin-top: 50px; } .MProductCenter ul li{ margin-bottom: 8%; } .MProductCenter ul li:last-child{ margin-bottom: 0; } .MProductCenter ul li .tit{ font-size: 21px; color: #333333; margin-bottom: 30px; } .MProductCenter ul li .img{ width: 100%; overflow: hidden; } .MProductCenter ul li .img img{ width: 100%; } .MBox{ display: none; } .selectBox{ width: 100%; position:relative; z-index: 10; display:block; margin-top: 8%; margin-bottom: 10px; } .selectBox-tit{ font-size: 16px; color: #333333; width:100%; line-height: 50px; height: 50px; padding-left: 15px; padding-right: 35px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; background: url(../images/index/down.png) center right 15px no-repeat; cursor:pointer; box-sizing: border-box; border: #e5e5e5 solid 1px; } .selectBox.on .selectBox-tit{ } .selectBox-options{ display:none; position:absolute; left:0; z-index:110; width: 100%; border-radius: 2px; background-color:#fff; border: 1px solid #ebebeb; overflow: hidden; box-sizing: border-box; } .selectBox-options li{ cursor:pointer; padding: 0px 15px; line-height: 2.8; font-size: 14px; color: #666666; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; } .selectBox-options li:last-child{ border-bottom:none; } .selectBox-options li:hover{ color: #8590a6; background: rgba(246,246,246); } @media only screen and (max-width: 768px){ .MProductCenter{ display: block; } .MBox{ display: block; } .PBox{ display: none; } .bannerNew{ display: none; } } @media only screen and (max-width: 640px){ .MProductCenter{ padding-top: 50px; padding-bottom: 50px; } .MProductCenter ul{ margin-top: 40px; } .MProductCenter ul li .tit{ font-size: 19px; margin-bottom: 25px; } } @media only screen and (max-width: 480px){ .MProductCenter{ padding-top: 40px; padding-bottom: 40px; } .MProductCenter ul{ margin-top: 35px; } .MProductCenter ul li{ margin-bottom: 30px; } .MProductCenter ul li:last-child{ margin-bottom: 0; } .MProductCenter ul li .tit{ font-size: 17px; margin-bottom: 20px; } .selectBox{ margin-top: 30px; } } /*20221026*/ .banner-lunbo .swiper-pagination{ max-width: 1920px; width: 100%; margin: auto; padding: 0 5.2%; box-sizing: border-box; text-align: center; } .banner-lunbo.swiper-container-horizontal>.swiper-pagination-bullets, .banner-lunbo .swiper-pagination-custom, .banner-lunbo .swiper-pagination-fraction{ bottom: 7%; } .banner-lunbo .swiper-pagination-bullet{ position: relative; vertical-align: bottom; width: 20px; height: 15px; /*background: #FFFFFF;*/ background: none; opacity: 0.2; border-radius: 0; transition: all 0.5s ease; } .banner-lunbo .swiper-pagination-bullet-active{ height: 30px; /*background: #00a19b;*/ background: none; opacity: 1; } .banner-lunbo .swiper-pagination-bullet:before{ content: ''; position: absolute; left: 50%; transform: translateX(-50%); width: 3px; height: 100%; background: #FFFFFF; } .banner-lunbo .swiper-pagination-bullet-active:before{ background: #00a19b; } .banner-lunbo.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{ margin: 0; } @media (min-width: 1100px) and (max-width: 1300px) { .comTitle.left{zoom: 1.35} .InnovationPower .comTitle, .TopicalApplication .comTitle, .ProductCenter .comTitle{zoom: .8;} .JoinUs .owidth, .AboutUs .owidth, .InnovationPower .indexbtn, .InnovationPower .wrap, .TopicalApplication .wrap, .ProductCenter .wrap{zoom: .65;} } @media (min-width: 800px) and (max-width: 1100px) { .comTitle.left{zoom: 1.25} .InnovationPower .comTitle, .TopicalApplication .comTitle, .ProductCenter .comTitle{zoom: .7;} .JoinUs .owidth, .AboutUs .owidth, .InnovationPower .indexbtn, .InnovationPower .wrap, .TopicalApplication .wrap, .ProductCenter .wrap{zoom: .55;} }