@charset "utf-8"; /* ===================首页样式========================== */ .banner{width: 100%;overflow: hidden;position: relative;} .banner a{display: block;width: 100%;} .banner-img{width: 100%;} .banner-imgpc,.banner-imgmb{width: 100%;object-fit: cover;} .banner-imgpc{min-height: 360px;} .banner-imgmb{min-height: 320px;display: none;} .banner .swiper-pagination{bottom: 48px;} .banner .swiper-pagination-bullet {width: 70px;height: 4px;border-radius: 0;background: rgba(255, 255, 255, .5);opacity: 1;position: relative;margin: 0 5px !important;} .banner .swiper-pagination-bullet:before{content: "";position: absolute;top: 0;left: 0;background: #fff;width: 0;height: 4px;z-index: 1;transition: 0s;} .banner .swiper-pagination-bullet:nth-child(4n+1):before{background: #d81d56;} .banner .swiper-pagination-bullet:nth-child(4n+2):before{background: #e9a121;} .banner .swiper-pagination-bullet:nth-child(4n+3):before{background: #57bbe1;} .banner .swiper-pagination-bullet:nth-child(4n+4):before{background: #00a64f;} .banner .slideontrue.swiper-pagination-bullet:before{width: 100%;transition: all 4s ease;} .banner-scroll{position: absolute;z-index: 2;bottom: 48px;right: 60px;width: 16px;user-select: none;cursor: pointer;} .banner-scroll p{width: 100%;font-size: 12px;color: #fff;letter-spacing: .3em;writing-mode: vertical-lr;writing-mode: tb-lr;white-space: nowrap;} .banner-scroll i{display: block;width: 100%;height: 28px;border: 2px solid #fff;position: relative;margin-top: 12px;border-radius: 10px;} .banner-scroll i:before{content: "";width: 4px;height: 4px;border-radius: 50%;background: #fff;position: absolute;left: 50%;margin-left: -2px;top: 4px;animation: banSr 2.4s ease infinite;} @keyframes banSr{0%{top: 4px;}50%{top: 16px;}100%{top: 4px;}} .indspace{padding-top: 100px;position: relative;overflow: hidden;} .case-menu{width: 100%;font-size: 0;margin-top: 32px;user-select: none;text-align: center;} .case-menu li{display: inline-block;vertical-align: middle;margin: 0 54px;cursor: pointer;text-align: center;} .case-menuimg{width: 100%;height: 84px;line-height: 84px;display: flex;align-items: center;} .case-menuimg img{max-width: 100%;max-height: 100%;transition: all .4s ease;margin: 0 auto;} .case-yimg{display: block;} .case-himg{display: none;} .case-menu li p{font-size: 18px;color: #666;margin-top: 16px;transition: all .4s ease;} .case-menu li:hover .case-yimg{display: none;} .case-menu li:hover .case-himg{display: block;} .case-menu li:hover p{color: #2d67d6;} .case-menu li.ontrue .case-yimg{display: none;} .case-menu li.ontrue .case-himg{display: block;} .case-menu li.ontrue p{color: #2d67d6;} .case-loop{width: 100%;position: relative;margin-top: 52px;} .case-imgwd{width: 100%;position: relative;} .case-img{width: 100%;height: 606px;object-fit: cover;} .case-wd{position: absolute;top: 0;right: -160px;width: 400px;height: 500px;padding: 162px 36px 0;background: linear-gradient(135deg, #05ab8d, #2258b8);box-shadow: 0 6px 16px 6px rgba(0, 0, 0, .3);} .case-wd img{position: absolute;top: 48px;right: 36px;} .case-wdft{width: 100%;color: #fff;} .case-wdft h6{font-size: 32px;} .case-wdft i{display: block;width: 40px;height: 3px;margin: 26px 0 32px;background: rgba(255, 255, 255, .2);} .case-wdft p{font-size: 16px;line-height: 26px;height: 78px;overflow: hidden;display: -webkit-box;text-overflow: ellipsis;-webkit-box-orient: vertical;-webkit-line-clamp: 3;} .case-wdft a{display: inline-block;margin-top: 44px;} .case-wdft a span, .case-wdft a b{display: inline-block;vertical-align: middle;} .case-wdft a span{font-size: 16px;margin-right: 14px;} .case-wdft a b{width: 30px;height: 30px;border-radius: 50%;overflow: hidden;background: #fff url('../images/index/casearr.png') no-repeat center;} .case-wdft a:hover b{animation: casearr .6s linear both;} @keyframes casearr{0%{background-position: center center;}60%{background-position: 30px center;}60.0001%{background-position: -30px center;}100%{background-position: center center;}} .case-wdft h6, .case-wdft i, .case-wdft p, .case-wdft a{opacity: 0;} .swiper-slide-active .case-wdft h6{animation: casewdDh 1s ease both .7s;} .swiper-slide-active .case-wdft i{animation: casewdDh 1s ease both .9s;} .swiper-slide-active .case-wdft p{animation: casewdDh 1s ease both 1.1s;} .swiper-slide-active .case-wdft a{animation: casewdDh 1s ease both 1.3s;} @keyframes casewdDh {0%{transform: translateY(28px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .product{width: 100%;overflow: hidden;} .product-imgwd{width: 100%;margin-top: 58px;position: relative;} .product-img, .product-wd{width: 50%;float: left;} .product-img .swiper-wrapper, .product-wd, .product-pic img{height: 720px;} .product-wd{background: #2d67d6;display: flex;align-items: center;} .product-pic{width: 100%;} .product-pic img{width: 100%;object-fit: cover;} .product-numbtn{position: absolute;z-index: 4;width: 342px;left: 50%;margin-left: -171px;bottom: 0;height: 118px;user-select: none;} .product-num{width: 68px;height: 68px;line-height: 74px;text-align: center;position: absolute;z-index: 2;top: 0;left: 50%;margin-left: -34px;background: #2d67d6;border-radius: 50%;overflow: hidden;} .product-num:after {content: "";width: 68px;height: 68px;position: absolute;top: 0;left: 0;border: 3px solid #fff;border-radius: 50%;z-index: 1;box-sizing: border-box;} .product-svg{transform: rotate(-90deg);width: 68px;height: 68px;position: absolute;top: 0;left: 0;z-index: 2;} .product-svgcir{stroke-dasharray: 0 428;} .product-num.ontrue .product-svgcir{animation: productsvg 3.8s ease-in infinite;} @keyframes productsvg {0%{stroke-dasharray: 0 428;}100%{stroke-dasharray: 428 428;}} .product-num span{font-size: 24px;color: #fff;font-family: 'GOTHAMHTF';} .product-btn{position: absolute;width: 171px;height: 86px;background: url('../images/index/probtn.png') no-repeat;bottom: 0;cursor: pointer;transition: all .4s ease;} .product-btn:after{content: "";position: absolute;transform: rotateY(180deg);right: 50px;z-index: 2;width: 22px;height: 12px;background: url('../images/index/newsarrH.png') no-repeat;top: 66%;margin-top: -6px;transition: all .4s ease;} .product-prev{left: 0;} .product-next{right: 0;transform: rotateY(180deg);} .product-btn:hover:after{right: 60px;} .product-icimg{position: absolute;z-index: 3;width: 514px;overflow: hidden;top: 84px;left: 50%;margin-left: -257px;text-align: center;} .product-icimg li{display: none;width: 100%;} .product-icimg li.ontrue{display: block;} .product-icimg li img{max-width: 100%;transform: scale(.6);opacity: 0;} .product-icimg li.ontrue img{animation: proimgDh 1.4s ease both;} @keyframes proimgDh {0%{transform: scale(.6);opacity: 0;}50%{opacity: 1;}100%{transform: scale(1);opacity: 1;}} .product-wd ul{display: block;width: 100%;} .product-wd li{display: none;width: 100%;width: 600px;float: right;} .product-wd ul li.ontrue{display: block;} .product-wdtit{width: 100%;color: #fff;} .product-wdtit p{font-size: 18px;} .product-wdtit h6{font-size: 50px;margin-top: 18px;} .product-wddes{width: 100%;color: #fff;margin-top: 26px;} .product-wddes p{font-size: 16px;line-height: 36px;} .product-link{display: block;font-size: 16px;color: #fff;margin-top: 38px;} .product-link i, .product-link span{display: inline-block;vertical-align: middle;} .product-link i{width: 60px;height: 60px;border-radius: 50%;border: 1px dashed #fff;margin-right: 16px;position: relative;transition: all .4s ease;} .product-link i:before,.product-link i:after{content: "";position: absolute;} .product-link i:before{width: 50px;height: 50px;border-radius: 50%;background: rgba(255, 255, 255, .5);top: 50%;left: 50%;margin-left: -25px;margin-top: -25px;} .product-link i:after{width: 18px;height: 18px;background: url('../images/index/proic2.png') no-repeat;top: 50%;left: 50%;margin-top: -9px;margin-left: -9px;transition: all .4s ease;} .product-link:hover i:after{transform: rotate(135deg);} .product-wd ul li.ontrue .product-wdtit p, .product-wd ul li.ontrue .product-wdtit h6, .product-wd ul li.ontrue .product-wddes, .product-wd ul li.ontrue .product-link{animation: prowdDh 1s ease both;opacity: 0;} .product-wd ul li.ontrue .product-wdtit p{animation-delay: 0ms;} .product-wd ul li.ontrue .product-wdtit h6{animation-delay: 200ms;} .product-wd ul li.ontrue .product-wddes{animation-delay: 400ms;} .product-wd ul li.ontrue .product-link{animation-delay: 600ms;} @keyframes prowdDh {0%{transform: translateY(-32px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .about{width: 100%;overflow: hidden;} .about-desc{width: 100%;margin-top: 36px;} .about-desc p{font-size: 18px;color: #888;line-height: 28px;width: 1014px;margin: 0 auto;position: relative;text-align: center;} .about-desc p span{position: relative;z-index: 3;} .about-desc p:before, .about-desc p:after{content: "";position: absolute;z-index: 1;top: -12px;width: 99px;height: 57px;background: url('../images/index/aboic1.png') no-repeat center /100% auto;} .about-desc p:before{left: -32px;} .about-desc p:after{right: -32px;} .about-desc i{display: block;width: 118px;height: 118px;margin: 24px auto 0;position: relative;cursor: pointer;} .about-desc i:before{content: "";position: absolute;top: 0;width: 118px;height: 118px;left: 0;background: url('../images/index/aboic2.png') no-repeat center /100%;animation: aboQq 1.5s linear infinite;} @keyframes aboQq {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}} .about-desc i:after{content: "";position: absolute;width: 100%;height: 100%;background: url('../images/index/aboic3.png') no-repeat center;transition: all .4s ease;} .about-desc i:hover:after{animation: aboVd .8s linear both;} @keyframes aboVd{0%{transform: scale(1);}30%{transform: scale(.8);}50%{transform: scale(1);}70%{transform: scale(.9);}100%{transform: scale(1);}} .about-list{width: 100%;margin-top: 82px;} .about-list li{width: 50%;border-right: 1px solid #fff;height: 700px;float: left;display: flex;align-items: center;overflow: hidden;position: relative;transition: all .4s ease;background-repeat: no-repeat !important;background-size: cover !important;background-position: center center !important;} .about-list li:last-child{border-right: none;} .about-list ul.lihover:hover li{width: 50%;} .about-list ul.lihover li:hover {width:50%;} .about-list li:after{content: "";z-index: 1;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, .3);opacity: 0;transition: all .4s ease;} .about-list li:before{content: "";z-index: 2;position: absolute;top: 0;height: 8px;width: 50%;transition: all .4s ease;left: 0;right: 0;margin: 0 auto;opacity: 0;} .about-list li:nth-child(1):before{background: #4276da;} .about-list li:nth-child(2):before{background: #d81d56;} .about-list li:nth-child(3):before{background: #e9a121;} .about-wd{width: 100%;text-align: center;color: #fff;position: relative;z-index: 4;} .about-wd h5{font-size: 32px;} .about-wd h6{font-size: 18px;margin: 16px 0 28px;} .about-wdft{display: block;width: 100%;opacity: 0;transform: translateY(28px);transition: all .4s ease;} .about-wd i{display: block;width: 1px;height: 60px;margin: 0 auto;background: #fff;} .about-wd p{font-size: 16px;line-height: 26px;width: 362px;margin: 18px auto 32px;height: 52px;overflow: hidden;display: -webkit-box;text-overflow: ellipsis;-webkit-box-orient: vertical;-webkit-line-clamp: 2;} .about-wd span{display: block;width: 46px;height: 46px;border-radius: 50%;margin: 0 auto;background: #1850bc url('../images/index/newsarrH.png') no-repeat center;overflow: hidden;} .about-wd span:hover{animation: aboarr .6s linear both;} @keyframes aboarr{0%{background-position: center center;}60%{background-position: 48px center;}60.0001%{background-position: -48px center;}100%{background-position: center center;}} .about-list li:hover:after{opacity: 1;} .about-list li:hover:before{opacity: 1;width: 100%;} .about-list li:hover .about-wdft{opacity: 1;transform: translateY(0);} /* 视频 */ .popVideo{display: none;position: fixed;z-index: 999999;width: 100%;height: 100%;background: rgba(0,0,0,.5);top: 0;left: 0;} .popVideo-content{display: flex;justify-content: center;align-items: center;position: relative;width: 66%;height: 100%;margin: 0 auto;} .popVideo-core{position: relative;display: inline-block;vertical-align: middle;width: 100%;position: relative;} .popVideo-core video{width: 100%;} .popVideo-close {width: 28px;height: 28px;position: absolute;right: -28px;top: -28px;z-index: 3;background: url('../images/public/close.png') no-repeat center;cursor: pointer;opacity: .7;transition: all .6s ease;} .popVideo-close:hover{opacity: 1;} /* ---- */ .news{padding-bottom: 100px;overflow: hidden;width: 100%;} .news-list{width: 100%;} .news-list ul{margin-left: -3%;} .news-list li{width: 30.3333%;float: left;margin-top: 48px;position: relative;float: left;margin-left: 3%;box-shadow: 0 4px 10px 2px #ebebeb;} .news-list li a{display: block;width: 100%;position: relative;} .news-img{width: 100%;overflow: hidden;} .news-img img{width: 100%;object-fit: cover;transition: all 1s ease;height: 330px;} .news-wd{width: 100%;padding: 34px 30px 36px;position: relative;z-index: 2;} .news-wdtit{width: 100%;height: 56px;position: relative;} .news-wdtit h6{font-size: 20px;color: #333;line-height: 28px;transition: all .4s ease;height: 56px;position: relative;overflow: hidden;display: -webkit-box;text-overflow: ellipsis;-webkit-box-orient: vertical;-webkit-line-clamp: 2;} .news-wdtit i{width: 0;height: 6px;position: absolute;top: -38px;left: -30px;background: #fff;transition: all .4s ease;opacity: 0;} .news-wddes{width: 100%;border-top: 2px solid #eaf0fb;padding-top: 30px;margin-top: 28px;transition: all .4s ease;} .news-wddes p{width: 100%;position: relative;font-size: 15px;color: #888;transition: all .4s ease;} .news-wddes p i{margin-right: 8px;} .news-wddes p:after{content: "";position: absolute;right: 0;width: 22px;height: 100%;background: url("../images/index/newsarr.png") no-repeat center;transition: all .4s ease;} .news-sd{position: absolute;z-index: 1;width: 100%;height: 100%;left: 0;bottom: 0;background: url('../images/index/newssd.png') repeat-x left bottom;opacity: 0;transition: all .3s ease;} .news-list li a:hover .news-sd{opacity: 1;} .news-list li a:hover .news-wdtit h6{transform: translateY(-12px);color: #fff;} .news-list li a:hover .news-wddes{border-top-color: #4276da;} .news-list li a:hover .news-wddes p{color: #fff;} .news-list li a:hover .news-wddes p:after{background-image: url('../images/index/newsarrH.png');} .news-list li a:hover .news-wdtit i{width: 68px;opacity: 1;transform: translateY(-12px);} .news-list li a:hover .news-img img{transform: scale(1.04);} /* -------------------------PC端--------------------------- */ @media all and (max-width:1700px) { /* 1600 × (900/1024/1200) */ .banner .swiper-pagination, .banner-scroll{bottom: 36px;} .indspace {padding-top: 88px;} .case-wd{right: -120px;} .product-wd li{width: 460px;} .product-wdtit h6{font-size: 42px;} .news {padding-bottom: 88px;} } @media all and (max-width:1599px) { /* 1440 × (900/1050) */ .banner .swiper-pagination, .banner-scroll{bottom: 30px;} .indspace {padding-top: 80px;} .case-wd{right: -80px;height: 468px;padding: 150px 36px 0;width: 368px;} .case-wdft h6 {font-size: 30px;} .case-wd img{top: 36px;} .case-img {height: 568px;} .case-loop, .product-imgwd{margin-top: 48px;} .product-img .swiper-wrapper, .product-wd, .product-pic img {height: 660px;} .product-icimg {width: 420px;top: 76px;margin-left: -210px;} .product-wdtit h6 {font-size: 38px;} .product-wd li {width: 440px;} .about-list {margin-top: 64px;} .about-wd h5 {font-size: 30px;} .about-list li{height: 640px;} .news {padding-bottom: 80px;} .news-img img{height: 280px;} } @media all and (max-width:1439px) { /* 1360 × (768) */ .case-wd img{max-width: 100px;} .case-wd {height: 436px;padding: 118px 36px 0;} .case-img {height: 524px;} .product-icimg {width: 380px;top: 68px;margin-left: -190px;} .product-wdtit h6 {font-size: 34px;} .product-wddes{margin-top: 20px;} .product-link{margin-top: 30px;} .product-img .swiper-wrapper, .product-wd, .product-pic img{height: 600px;} .indspace {padding-top: 74px;} .about-wd h5 {font-size: 28px;} .about-list li {height: 588px;} .news-wd {padding: 28px 30px 32px;} .news-wdtit{height: 52px;} .news-wdtit h6 {font-size: 18px;line-height: 26px;height: 52px;} .news-wddes {padding-top: 24px;margin-top: 20px;} .news {padding-bottom: 74px;} } @media all and (max-width:1359px) { /* 1280 × (800/854/1024) */ .case-wd{width: 346px;right: -60px;} .product-wd li {width: 380px;} .case-wdft h6 {font-size: 28px;} .product-img .swiper-wrapper, .product-wd, .product-pic img {height: 580px;} .product-wdtit h6 {font-size: 30px;} .product-wddes p{line-height: 30px;} .about-desc i, .about-desc i:before{width: 88px;height: 88px;} .about-desc i:after{background-size: 18px;} .news-img img{height: 240px;} } @media all and (max-width:1279px) { /* 1152 × (864) */ .indspace {padding-top: 68px;} .case-menu li {margin: 0 48px;} .case-wd img {max-width: 88px;top: 28px;right: 28px;} .case-wd {height: 368px;padding: 98px 28px 0;width: 320px;} .case-wdft i {width: 40px;margin: 22px 0 24px;} .case-wdft a {margin-top: 34px;} .case-img {height: 448px;} .product-icimg {width: 320px;top: 60px;margin-left: -160px;} .product-wdtit p{font-size: 16px;} .product-wdtit h6 {font-size: 26px;margin-top: 12px;} .product-wddes p {line-height: 26px;font-size: 14px;} .product-wddes {margin-top: 18px;} .product-link {margin-top: 24px;} .product-link i {width: 48px;height: 48px;margin-right: 12px;} .product-link i:before {width: 40px;height: 40px;margin-left: -20px;margin-top: -20px;} .product-wd li {width: 354px;} .product-img .swiper-wrapper, .product-wd, .product-pic img {height: 520px;} .about-desc p{width: 92%;padding: 0 24px;font-size: 16px;line-height: 26px;} .about-desc p:before{left: 0;} .about-desc p:after{right: 0;} .about-desc {margin-top: 28px;} .about-wd h5 {font-size: 24px;} .about-wd h6 {font-size: 16px;margin: 12px 0 24px;} .about-wd p{width: 300px;margin: 16px auto 26px;} .about-list li {height: 520px;} .news-list ul {margin-left: -1.5%;} .news-list li{width: 31.8333%;margin-left: 1.5%;} .news-sd{background-position-y: -18px;} .news-wdtit i{height: 4px;width: 54px;} } @media all and (max-width:1151px) { /* 1024 × (600/768) */ .case-menu li {margin: 0 38px;} .case-menuimg{height: 68px;line-height: 68px;} .case-wd{right: -20px;} .case-wdft h6 {font-size: 24px;} .product-icimg {width: 280px;top: 40px;margin-left: -140px;} .product-wdtit h6{font-size: 24px;} .product-link {margin-top: 20px;} .product-wd li {width: 310px;} .product-img .swiper-wrapper, .product-wd, .product-pic img {height: 440px;} .about-list {margin-top: 52px;} .about-wd i{height: 42px;} .about-list li {height: 428px;} .news-wd {padding: 24px 24px 26px;} .news-wddes {padding-top: 20px;margin-top: 16px;} .news-wdtit{height: 48px;} .news-wdtit h6 {font-size: 16px;line-height: 24px;height: 48px;} .banner-imgpc{height: auto !important;} .banner-scroll{display: none;} .news-img img{height: 214px;} } /* ------------------------手机端-------------------------- */ @media all and (max-width:1000px) { /* 平板设备 720 适配 */ .case-menu li {margin: 0 28px;} .case-menuimg {height: 58px;line-height: 58px;} .banner .swiper-pagination, .banner-scroll {bottom: 24px;} .case-wd img {max-width: 68px;top: 24px;right: 20px;} .case-wdft h6 {font-size: 20px;} .case-wdft i {width: 38px;margin: 18px 0;} .case-wdft a {margin-top: 28px;} .case-wd {height: 340px;padding: 78px 20px 0;width: 300px;} .case-img {height: 400px;} .case-loop, .product-imgwd {margin-top: 40px;} .product-img, .product-wd{width: 100%;} .product-img .swiper-wrapper, .product-wd, .product-pic img{height: auto;} .product-icimg {width: 400px;top: 40px;margin-left: -200px;} .product-wd{height: 280px;padding: 0 4%;} .product-wd li{width: 100%;float: left;} .product-numbtn{bottom: 280px;} .product-prev:before{content: "";position: absolute;width: 1px;height: 100%;right: 0;background: #fff;opacity: .2;top: 0;} .popVideo-content{width: 92%;} .popVideo-close{right: 0;} .about-wd p{width: 92%;} .news-list li{margin-top: 40px;} .news-wddes p{font-size: 14px;} .news-wd {padding: 24px 18px 26px;} .banner .swiper-pagination-bullet{width: 50px;} } @media all and (max-width:640px) { /* 移动终端以上 360 适配 */ .banner-imgpc{display: none;} .banner-imgmb{display: block;} .banner .swiper-pagination-bullet{width: 36px;} .banner .swiper-pagination, .banner-scroll {bottom: 18px;} .indspace {padding-top: 40px;} .case-menuimg {height: 40px;line-height: 40px;} .case-menu li p {font-size: 14px;margin-top: 10px;} .case-menu{margin-top: 10px;} .case-menu li {margin: 0 20px;margin-top: 20px;} .case-img {height: auto;} .case-wd {position: relative;right: auto;left: 0;top: 0;height: auto;padding: 58px 4% 32px;width: 100%;box-shadow: none;} .case-wdft a {margin-top: 24px;} .case-loop, .product-imgwd {margin-top: 32px;} .product-icimg {width: 240px;margin-left: -120px;top: 32px;} .product-btn {width: 150px;height: 75px;} .product-pic img{min-height: 372px;} .product-wdtit h6 {font-size: 20px;} .product-icimg li img{max-height: 224px;} .product-wd{height: 260px;} .product-numbtn {bottom: 260px;height: 100px;width: 300px;margin-left: -150px;} .product-num span{font-size: 20px;} .about-desc p{padding: 0;} .about-list {margin-top: 20px;} .about-list li {height: 420px;margin-top: 16px;width: 100% !important;border-right: none;} .about-list li .about-wdft {opacity: 1;transform: translateY(0);} .about-list li:before {opacity: 1;width: 100%;height: 5px;} .about-list li:after{opacity: 1;} .news-list ul {margin-left: 0;} .news-list{margin-top: 10px;} .news-list li {width: 100%;margin-left: 0;margin-top: 20px;} .news {padding-bottom: 40px;} .about-desc i, .about-desc i:before{width: 68px;height: 68px;} .about-desc i:after{background-size: 14px;} }