@charset "utf-8"; /* ===================首页样式========================== */ /*banner*/ .banner{height:calc(100vh - 90px)} .banner .swiper-container,.banner .swiper-wrapper,.banner-bg{height:100%} .bannerBg-mb{display:none} .banner-content{position:absolute;width:100%;height:100%;top:0;left:0} .banner .swiper-pagination{width:100%;text-align:center;font-size:0;bottom:30px} .banner .swiper-pagination-bullet{width:60px;background:rgba(255,255,255,.8);border-radius:10px;opacity:1;position:relative;overflow:hidden;margin:0 7.5px;height:5px} .banner .swiper-pagination-bullet i{left:-100%;content:'';display:block;width:100%;height:100%;background:#14a83b;border-radius:10px;position:absolute} .banner .active i{transition:all 4s linear;left:0} .banner .nav-video i{transition: none} .banner .active.nav-video i{transition-property:all} .banner .video-btn{width:40px;height:40px;background:#14a83b;display:none;align-items:center;justify-content:center;border-radius:50%;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding-left:5px} .banner .video-btn:hover{transform:translate(-50%,-50%) scale(1.1)} .banner .video-btn:before{content:"";position:absolute;top:-1px;bottom:-1px;right:-1px;left:-1px;background-color:#11d443;border-radius:50%;transform:scale(0);transition:transform .3s cubic-bezier(.215,.61,.355,1)} .banner .video-btn:after{content:"";position:absolute;top:-1px;bottom:-1px;right:-1px;left:-1px;border-radius:50%;transform:scale(1);opacity:1;transition:opacity .3s cubic-bezier(.215,.61,.355,1),transform .3s cubic-bezier(.215,.61,.355,1)} .banner .video-btn:hover:before{transform:scale(1)} .banner .video-btn:hover:after{transform:scale(1.2);opacity:0} .banner .video-btn i{display:block;width:18px;height:25px;background:url(../images/index/video-icon.png) no-repeat center/100%;z-index:9} .banner-bg{transform:scale(1);transition:all 4s linear} .banner .swiper-slide-active .banner-bg{transform:scale(1.1)} .banner .swiper-slide video {position: absolute;width: 100%;left: 0;top: 0;height: 100%;object-fit: cover} /*企业简介*/ .intro{padding:100px 0 130px;background:linear-gradient(to bottom,#fff 0,#f5f6f6 100%)} .intro h2{font-size:40px;color:#000b3f;font-weight:700;text-align:center;margin-bottom:20px} .intro h2.startAnimate{animation: to-up 1.5s ease both} .intro .top-tip.startAnimate{animation: to-up 1.5s ease both .2s} .intro .top-tip{font-size:16px;line-height:30px;color:#666;text-align:center;max-width:850px;margin:0 auto} .intro-cont{display:flex;align-items:flex-start;justify-content:space-between;margin-top: -40px} .intro-lft{width:29.5%;margin-top:110px} .intro-lft h3{font-size: 28px;font-weight: bold;margin-bottom: 20px} .intro-lft p{font-size:15px;line-height:28px;color:#666;margin-bottom: 40px} .intro-lft h4{font-size:30px;color:#00132c;margin-top:8px} .intro-lft .tip{font-size:16px;line-height:22px;color:#aeaeae;margin-top:10px} .intro-lft .view-btn{margin-top: 50px} .view-btn{font-size:14px;color:#444;display:inline-flex;align-items:center} .view-btn:hover{color:#14a83b} .view-btn.mb{display: none} .view-btn.startAnimate span{animation: bounceR 1.5s ease both} .view-btn span{display:flex;align-items:center;justify-content:center;width:14px;height:14px;background:#14a83b;font-size:10px;color:#fff;border-radius:50%;margin-left:5px;font-weight:400;transition:all .4s ease} .view-btn span i{transform:scale(.9);font-style:normal} .intro-rgt{width:65%} .intro.startAnimate .intro-rgt img{animation: rgt-img 1.5s ease} .intro.startAnimate p{animation: to-up 1.5s ease both} .intro.startAnimate .intro-lft img{animation: to-up 1.5s ease both .2s} .intro.startAnimate h4{animation: to-up 1.5s ease both .4s} .intro.startAnimate .tip{animation: to-up 1.5s ease both .6s} .intro.startAnimate .view-btn{animation: to-up 1.5s ease both .8s} @keyframes rgt-img{0%{transform-origin: right top;transform: scale(.8)}100%{opacity: 1;transform: scale(1)}} /*科研产品*/ .product{padding:70px 0 20px;overflow: hidden} .product h2{font-size:40px;color:#000b3f;font-weight:700;text-align:center;margin-bottom:20px} .product .tip{font-size:16px;line-height:30px;color:#666;text-align:center;max-width:850px;margin:0 auto} .product h2.startAnimate{animation: to-up 1.5s ease both} .product .tip.startAnimate{animation: to-up 1.5s ease both .2s} .product-cont{display:flex;margin-top:50px;justify-content:space-between;height:684px} .product-lft{width:49.5%} .product-lft.startAnimate{animation: clip 1.5s ease both} .product-lft .swiper-container{height:100%} .product-lft .swiper-pagination{bottom:30px} .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 10px} .swiper-pagination-bullet{width:10px;height:10px;opacity:1;background:#0667ae} .swiper-pagination-bullet-active{background:#14a83b} .product-rgt{width:49.5%;display:flex;flex-wrap:wrap;justify-content:space-between;align-content: space-between} .product-cell{width:59%;height:48.3%;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;overflow:hidden;transition:all .6s ease} .product-rgt.startAnimate .product-cell{animation: to-up 1.5s ease both} .product-rgt.startAnimate .product-cell:nth-child(2){animation: to-upB 1.5s ease both .2s} .product-rgt.startAnimate .product-cell:nth-child(3){animation: to-upB 1.5s ease both .4s} .product-rgt.startAnimate .product-cell:nth-child(4){animation: to-upB 1.5s ease both .6s} .product-cell:nth-child(2),.product-cell:nth-child(3){width:39%} .product-cell .img-hover,.product-cell:hover .img-prod{display:none} .product-cell:hover .img-hover{display:block} .product-cell:after{content:'';width:100%;height:100%;position:absolute;top:0;left:0;z-index:1;opacity:0;transition:all .6s ease} .product-cell:hover:after{opacity:1;background:rgba(6,103,174,.9)} .product-cell .img-hover{max-width:100%;max-height:100%;object-fit:cover;z-index:0} .product-text{position:absolute;width:100%;height:100%;top:0;left:0;color:#fff;z-index:2;display:flex;flex-direction:column;justify-content:center;padding:20px 60px;transition:all .6s ease;transform:translateY(100%)} .product-cell:hover .product-text{opacity:1;transform:translateY(0)} .product-text h6{font-size:24px} .product-text p{font-size:16px;line-height:28px} /*banner2*/ .banner2 img{display:block;width:100%;object-fit:cover} /*专家团队*/ .team{padding:90px 0} .team-top{display:flex;align-items:center} .index-tit{margin: 0 auto;text-align: center} .team-top h2{font-size:40px;font-weight:700;color:#000b3f;opacity: 0;text-align: center} .index-tip{font-size: 16px;line-height: 30px;color: #666;text-align: center;max-width: 850px;margin: 20px auto 0} .team-top h2.startAnimate{animation: fontB 1.5s both ease-in-out;} .team-list{margin-top:30px;opacity: 0} .team-list.startAnimate{animation: to-upB 1.5s ease both} .team-list a{position:absolute;width:100%;height:100%;left:0;top:0} .team img{width:170px;height:170px;object-fit:cover;border-radius:100%;margin-bottom:20px} .team h4{font-size:20px;font-weight:700;color:#0667ae} .team .tip{font-size:16px;color:#444;margin:10px 0 18px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden} .team .desc{font-size:14px;color:#999;line-height:24px;overflow:hidden;display:-webkit-box;text-overflow:ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:3;height:74px} .team p{font-size:14px;color:#999;line-height:24px;} .team-list i{display:block;width:34px;height:8px;margin-top:18px;background:url(../images/index/team-arr.png) no-repeat center/100%;transition: all .4s ease} .team .swiper-wrapper{padding-bottom:60px} .team .swiper-slide:hover i{transform: translateX(20px)} /*全国试点医院*/ .hospital{padding:100px 0} .hospital h2{font-size:40px;font-weight:700;color:#000b3f;text-align:center;margin-bottom:20px} .hospital .tip{font-size:16px;line-height:22px;color:#859eb0;text-align:center} .hospital h2.startAnimate{animation: to-up 1.5s ease both} .hospital .tip.startAnimate{animation: to-up 1.5s ease both .2s} .hospital-cont{display:flex;margin-top:30px;align-items:center} .hospital-lft{width:56%} .hospital-lft .map{width:699px;height:604px;margin-left:auto;position:relative} .hospital-lft a{position:absolute;display:flex;align-items:center;color:#005695;font-weight:700;font-size:16px} .hospital-lft i{display:block;width:10px;height:10px;border-radius:50%;background:#14a83b;margin-right:20px} .hospital-lft .active i{background:#e60000} .hospital-lft .xinjiang{left:154px;top:150px} .hospital-lft .shanxi{right:161px;top:250px} .hospital-lft .hubei{right:135px;top:373px} .hospital-lft .hubei{right:135px;top:373px} .hospital-lft .sichuan{right:284px;top:369px} .hospital-lft .chongqing{right:229px;top:404px} .hospital-lft .guangdong{right:139px;bottom:93px} .hospital-lft .hainan{right:176px;bottom:16px} .hospital-lft .heilongjiang{right:26px;top:80px} .hospital-lft .jilin{right:30px;top:139px} .hospital-lft .liaoning{right:48px;top:184px} .hospital-lft .hebei{right:118px;top:245px} .hospital-lft .beijing{right:114px;top:214px} .hospital-lft .tianjin{right:103px;top:232px} .hospital-lft .neimenggu{right:181px;top:207px} .hospital-lft .shandong{right:90px;top:273px} .hospital-lft .jiangsu{right:60px;top:319px} .hospital-lft .shanghai{right:24px;top:355px} .hospital-lft .zhejiang{right:45px;top:390px} .hospital-lft .henan{right:147px;top:318px} .hospital-lft .anhui{right:89px;top:349px} .hospital-lft .jiangxi{right:105px;top:421px} .hospital-lft .fujian{right:71px;top:452px} .hospital-lft .hunan{right:149px;top:426px} .hospital-lft .guangxi{right:213px;top:494px} .hospital-lft .guizhou{right:227px;top:449px} .hospital-lft .yunnan{right:325px;top:490px} .hospital-lft .xizang{left:182px;top:375px} .hospital-lft .qinghai{left:258px;top:296px} .hospital-lft .gansu{left:346px;top:258px} .hospital-lft .ningxia{left:397px;top:274px} .hospital-lft .shanxi2{right:197px;top:304px} .hospital-lft .aomen{right:130px;bottom:65px} .hospital-lft .xianggang{right:117px;bottom:68px} .hospital-lft .taiwan{right:21px;top:470px} @-webkit-keyframes ripple{0%{opacity:0;-webkit-transform:scale(.1)} 5%{opacity:1} to{opacity:0;-webkit-transform:scale(1)} } @keyframes ripple{0%{opacity:0;-webkit-transform:scale(.1);transform:scale(.1)} 5%{opacity:1} to{opacity:0;-webkit-transform:scale(1);transform:scale(1)} } .hospital-lft .orn{width:60px;height:60px;position:absolute;top:-18px;left:-25px} .hospital-lft .orn:after{background:rgba(20,168,59,.5)} .hospital-lft .active .orn:after{background:rgba(230,0,0,.5)} .hospital-lft .orn:after{content:"";display:block;border-radius:50%;opacity:0;position:absolute;top:0;left:0;bottom:0;right:0} .hospital-lft .orn.orn1:after{animation:ripple 4.5s ease-out 0s infinite;-webkit-animation:ripple 4.5s ease-out 0s infinite} .hospital-lft .orn.orn2:after{animation:ripple 4.5s ease-out 675ms infinite;-webkit-animation:ripple 4.5s ease-out 675ms infinite} .hospital-lft .orn.orn3:after{animation:ripple 4.5s ease-out 1.575s infinite;-webkit-animation:ripple 4.5s ease-out 1.575s infinite} .hospital-rgt{width:32%;margin-left:50px;position:relative} .hospital-rgt.startAnimate{animation: to-rgt 1.5s ease both} .hospital-lft.startAnimate{animation: to-lft 1.5s ease both} .cont-out{margin-top: 50px;height: 340px;overflow: auto} .cont-out::-webkit-scrollbar {width:5px;height: 100%;background: transparent} .cont-out::-webkit-scrollbar-thumb {background: #0667ae;border-radius: 30px} .hospital-rgt:after{content:"";width:0;height:0;border-top:15px solid transparent;border-bottom:15px solid transparent;border-right:15px solid #fff;position:absolute;top:50%;left:-14px;transform:translateY(-50%)} .hospital-rgt:before{content:"";width:0;height:0;border-top:15px solid transparent;border-bottom:15px solid transparent;border-right:15px solid #ced8e0;position:absolute;top:50%;left:-15px;transform:translateY(-50%)} .hospital-city{background:#fff;display:none;height:430px;border:1px solid #ced8e0;overflow: hidden} .hospital-city.active{display:block} .hospital-city h6{font-size:20px;color:#0667ae;font-weight:700;margin-bottom:15px} .hospital-city p{font-size:14px;line-height:24px;color:#777} .hospital-item{padding:0 50px} .hospital-item:not(:first-child){margin-top:35px} /*新闻动态*/ .news{padding:80px 0 90px} .news-cont{margin-top:40px;position: relative} .news-cont.startAnimate{animation: to-up 1.5s ease both;opacity: 0} .news-nav .swiper-prev{position: absolute;left: -82px;top: 50%} .news-nav .swiper-next{position: absolute;right: -82px;top: 50%} .news-cont a{position:absolute;width:100%;height:100%;left:0;top:0;z-index: 1} .news-picture{height:264px;width:100%;overflow: hidden} .news-text{margin-top:35px} .news-top{display:flex;justify-content:space-between;align-items:center} .news-top h3{font-size:20px;line-height:28px;color:#333;max-width:72%;overflow:hidden;display:-webkit-box;text-overflow:ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:2;height:60px;transition:all .4s ease} .news-top .time{text-align:center;font-size:14px;color:#666;transition:all .4s ease} .news-top .time span{display:block;font-size:36px;font-family:Arial;font-weight:700;color:#333;transition:all .4s ease} .news-text p{font-size:15px;line-height:26px;color:#888;margin-top:20px;overflow:hidden;display:-webkit-box;text-overflow:ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:2;height:55px} .news .swiper-slide:hover .time,.news .swiper-slide:hover .time span,.news .swiper-slide:hover h3{color:#0667ae} .news img{transition: all .6s ease} .news .swiper-slide:hover img{transform: scale(1.1)} /*投资机构*/ .agency{padding:90px 0;background:#eef5fa} .agency .swiper-wrapper{padding:40px 0 60px} .agency h2{font-size:40px;color:#000b3f;font-weight:700;text-align:center} .agency h2.startAnimate{animation: to-up 1.5s ease both} .agency .swiper-slide{background:#fff;height:100px;display:flex;align-items:center;justify-content:center;border-radius:10px;transition:all .4s ease} .agency .swiper-slide.startAnimate{animation: zoom-icon 1.5s ease both} .agency .swiper-slide{overflow: hidden} .agency .swiper-slide:after{content: "";position: absolute;z-index: 2;width: 24px;height: 80px;top: 8px;background: #fff;left: -25%;transform: skewX(32deg);opacity: 0.6} .agency .swiper-slide:hover:after{left: 120%;transition: all 1s ease;} .agency img{max-width:100%;max-height:100%;object-fit:cover} .agency .swiper-slide:hover{box-shadow:0 20px 40px rgba(6,103,174,.2)} .team-nav{display:flex;justify-content:center} .index-nav>div{width:50px;height:50px;display:flex;align-items:center;justify-content:center;border:2px solid #e8e8e8;border-radius:50%;cursor:pointer;color:#717171;transition:all .4s ease} .index-nav>div:hover{background:#0667ae;border-color:#0667ae;color:#fff} .index-nav>div:not(:first-child){margin-left:20px} .index-platform{background-repeat:no-repeat;background-position:center;background-size:cover;padding:130px 0 108px;color:#fff} .index-platform .container{display:flex;align-items:center;height:100%} .platform-lft{width:40%;text-align:center} .platform-lft img{max-width: 100%} .platform-rgt{width:60%;text-align:center;font-family:'思源黑体 CN'} .platform-rgt h2{font-weight:700;font-size:52px;margin-bottom:10px} .platform-rgt p{font-size:28px} .platform-list{display:flex;margin-top:20px;justify-content:center} .platform-list li{padding:2px 8px;border:1px solid #fff;font-size:20px;border-radius:5px;margin-bottom: 20px} .platform-list li:not(:first-child){margin-left:12px} .platform-qr-code{width:152px;height:152px;display:block;margin:60px auto 25px} .scan-btn{display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(to right,#29d437 0,#1bba43 100%);width:274px;height:60px;font-size:26px;border-radius:30px;margin:0 auto} .scan-btn i{display:block;background:url(../images/index/download-icon.png) no-repeat center/100%;width:25px;height:25px;margin-right:5px} .scan-btn:hover{color: #fff} .hospital-close{ display: none; position: absolute; right: 10px; top: 10px; color: #999; } /* -------------------------PC端--------------------------- */ @media all and (max-width:1700px) { /* 1600 × (900/1024/1200) */ } @media all and (max-width:1599px) { /* 1440 × (900/1050) */ .intro-lft{width: 35%} .intro-rgt{width: 60%} .product-text{padding: 20px} .news-nav .swiper-prev{position: absolute;left: -62px;top: 50%} .news-nav .swiper-next{position: absolute;right: -62px;top: 50%} } @media all and (max-width:1439px) { /* 1360 × (768) */ .product-cont{height: 500px} .news-nav .swiper-prev,.news-nav .swiper-next{position: static} .news-nav{display: flex;align-items: center;justify-content: center;margin-top: 30px} } @media all and (max-width:1359px) { /* 1280 × (800/854/1024) */ } @media all and (max-width:1279px) { /* 1152 × (864) */ .intro-lft{width: 40%} .intro-rgt{width: 55%} .hospital-rgt{margin-left: auto;width: 30%} } @media all and (max-width:1151px) { /* 1024 × (600/768) */ .intro-cont,.product-cont,.hospital-cont{flex-wrap: wrap} .intro-lft,.intro-rgt,.product-lft,.product-rgt,.hospital-lft,.hospital-rgt{width: 100%} .intro{padding: 80px 0} .product-cont{height: auto} .product-lft,.product-rgt{height: 550px} .product-rgt{margin-top: 20px} .hospital-lft .map{margin: 0 auto} .hospital-rgt:after{border-left:15px solid transparent;border-right:15px solid transparent;border-bottom:15px solid #fff;border-top:unset;position:absolute;top:-13px;left:50%;transform:translateX(-50%)} .hospital-rgt:before{border-left:15px solid transparent;border-right:15px solid transparent;border-bottom:15px solid #ced8e0;border-top:unset;position:absolute;top:-15px;left:50%;transform:translateX(-50%)} .hospital-lft a{position: static!important;left: 0!important;top: 0!important;padding: 20px} .hospital-lft .orn{display: none} .hospital-lft .map ul{width: 90%;display: flex;justify-content: space-between;flex-wrap: wrap;margin: calc(-100% + 140px) auto 0} .hospital-lft .map li{width: 30%;background: rgba(255,255,255,.5);margin-bottom: 20px} .hospital-lft .map ul:after{content: '';width: 30%} .hospital-rgt:before,.hospital-rgt:after{display: none} .hospital-rgt{position: fixed;left: 0;top: 0;width: 100%;height: 100%;display: none;align-items: center;justify-content: center;animation: none!important;z-index: 9999999;} .hospital-city{width: 92%;margin: 0 auto;z-index: 9999999;position: relative} .hospital .container{position: relative} .hospital-bg{content: '';width: 100%;height: 100%;position: fixed;left: 0;top: 0;z-index: 9999;background: rgba(0,0,0,.5);display: none} .hospital-close{display: block} } /* ------------------------手机端-------------------------- */ @media all and (max-width:1000px) { /* 平板设备 720 适配 */ .intro,.hospital,.news,.agency,.team,.index-platform{padding: 60px 0} .banner{height: 400px;position: relative} .banner .bannerBg-pc{display: none} .banner .bannerBg-mb{display: block} .intro-lft p{margin: 30px 0} .intro-lft h4{font-size: 28px} .intro-lft .view-btn{margin-top: 30px} .product{padding: 60px 0 20px} .product h2,.team-top h2,.agency h2,.hospital h2,.intro h2{font-size: 32px} .product .tip,.intro .top-tip{max-width: 100%;width: 90%} .product-cont{margin-top: 30px} .product-lft, .product-rgt{height: 500px} .news-picture{height: 200px} .news-top h3{font-size: 16px} .news-top .time span{font-size: 28px} .news-text p{margin-top: 10px} .team-top h2,.team-list{opacity: 1} .index-tip{margin: 10px auto 0} .platform-rgt h2{font-size: 38px} .platform-lft img{max-width: 90%} .platform-rgt p{font-size: 18px} .platform-list li{font-size: 16px} .hospital-lft .map ul{margin: calc(-100% + 120px) auto 0} } @media all and (max-width:640px) { /* 移动终端以上 360 适配 */ .intro, .hospital, .news,.index-platform{padding: 40px 0} .intro-lft p{margin: 10px 0 20px;font-size: 14px;height: 84px;overflow: hidden;-webkit-line-clamp: 3;display: -webkit-box;text-overflow: ellipsis;-webkit-box-orient: vertical;} .intro-lft h4{font-size: 22px;display: none} .intro-lft .view-btn{display: none} .intro-lft h3,.team-list i,.team-nav,.news-nav{display: none} .intro-lft{margin-top: 40px} .intro-lft img{display: none} .intro-lft .tip{font-size: 14px;display: none} .product{padding: 40px 0 20px} .product h2, .team-top h2, .agency h2, .hospital h2,.intro h2{font-size: 26px} .product h2,.intro h2{margin-bottom: 10px} .product-cont{margin-top: 20px} .product .tip,.intro .top-tip{font-size: 14px;line-height: 26px} .intro .top-tip{margin: 0;width: 100%} .product-lft{height: 300px} .product-rgt{margin-top: 10px;height: auto;display: none} .product-cell{width: 100%!important;height: 250px;margin-bottom: 10px!important;} .team img{margin: 0 auto 20px;display: block} .team h4,.team .tip{text-align: center} .team{padding: 40px 0 0} .team .swiper-wrapper{padding-bottom: 30px} .agency img{max-width: 80%;max-height: 80%} .hospital-lft a{padding: 10px} .cont-out{padding: 20px 0;margin-top: 30px;height: 350px} .hospital-item{padding: 0 20px} .platform-lft{width: 150px;margin: 0 auto;display: none} .hospital{min-height: 480px} .platform-rgt{width: 100%;margin-top: 0} .index-platform .container{flex-wrap: wrap} .index-tip{font-size:14px} .hospital .tip{font-size:14px} .hospital h2{margin-bottom:10px} .platform-list li{font-size: 14px;padding: 2px 6px} .platform-rgt p{line-height: 24px;font-size: 14px} .platform-qr-code{margin: 0 auto 10px} .team-top{flex-direction: column} .view-btn{margin-top: 10px} .hospital-lft .map ul{margin: calc(-100% + 60px) auto 0} .hospital-lft .map{width: 100%;height: auto} .platform-rgt h2{font-size: 26px;margin-bottom: 10px} .platform-list{margin-top: 10px} .platform-rgt br{display: block;content: '';height: .5em} .scan-btn{width: 180px;height: 50px;font-size: 18px} .scan-btn i{width: 20px;height: 20px} .agency .swiper-wrapper{padding:30px 0 45px} .agency{padding: 30px 0 15px} .agency .swiper-slide{height: 80px} .banner .video-btn{display: flex;padding-left:2px} .banner .video-btn i{width: 10px} .view-btn.mb{display: flex;justify-content:center} }