/* 发展历程 */ .history-title{justify-content: space-between; align-items: center;} .history-title-tabs span{ color: #fff; border: 1px solid rgba(255,255,255,0.6); padding: 0.19rem 0.24rem; margin-right: 0.4rem;font-weight: 600; transition: all .3s; cursor: pointer; display: inline-block;} .history-title-tabs span.on,.history-title-tabs span:hover{background: #FFFFFF;color: #0E59D1;} .history{background: url(../images/about/img2.jpg) no-repeat; background-position: left top;background-size: 100% 100%; padding-top: .98rem; } .history-tabs{ margin-top: .6rem; } .history-tabs .history-tab{display: none;} .history-tabs .history-tab.on{ display: block;} .history-bar{ height:.8rem; position: relative; background: rgba(0,0,0,0.3);} .history-thumbs{position: relative; top: 0; left: 0; z-index: 10; overflow: hidden; } .swiper-slide { background-size: cover; background-position: center; } .gallery-thumbs { box-sizing: border-box; z-index: 5; } .gallery-thumbs .swiper-slide { width: 14.2857143%; height: 100%; } .swiper-slide-thumbs-item{ text-align: center; cursor: pointer;} .swiper-slide-thumbs-item-top{ height: .8rem; position: relative; top: 0; z-index: 10; } .swiper-slide-thumbs-item p{font-size: 0.24rem; font-family: "DIN-Medium"; color: rgba(255,255,255,0.6); transition: all .3s ease; line-height: .8rem;} .gallery-thumbs .swiper-slide-thumb-active .swiper-slide-thumbs-item p{ font-size: 0.24rem; color: rgba(255,255,255,1); } .history .gallery-top { height: 80%; width: 100%; } .history .history-content{ position: relative; z-index: 30; color: #fff; text-align: center; } .history .swiper-button-next,.history .swiper-button-prev{ top: 0.5rem; width: 0.32rem; height: 0.32rem; background-size:100%; background-repeat: no-repeat; margin-top: -0.16rem; } .pre-next-btn .swiper-button-prev,.pre-next-btn .swiper-button-next{ width: 0.02rem;height: 0.16rem; background-image: none; } .pre-next-btn .swiper-button-prev.swiper-button-disabled,.pre-next-btn .swiper-button-next.swiper-button-disabled{ background-color: transparent;opacity: 1;} .pre-next-btn .swiper-button-prev{left: 0.2rem;} .pre-next-btn .swiper-button-next{right: 0.2rem;} .pre-next-btn .swiper-button-prev::after{content: ''; width: 0.1rem; height: 0.1rem; border-top: 1px solid rgba(255,255,255,0.67);border-right: 1px solid rgba(255,255,255,0.67); transform: rotate(-135deg); left: 50%; top: 50%; margin-left: -0.07rem; margin-top: -0.05rem;position: absolute;} .pre-next-btn .swiper-button-next::after{content: ''; width: 0.1rem; height: 0.1rem; border-top: 1px solid rgba(255,255,255,0.67);border-right: 1px solid rgba(255,255,255,0.67); transform: rotate(45deg); left: 50%; top: 50%; margin-left: -0.06rem; margin-top: -0.05rem;position: absolute;} .pre-next-btn .swiper-button-disabled.swiper-button-prev::after{ border-top: 1px solid rgba(255,255,255,0.67);border-right: 1px solid rgba(255,255,255,0.67);} .pre-next-btn .swiper-button-disabled.swiper-button-next::after{ border-top: 1px solid rgba(255,255,255,0.67);border-right: 1px solid rgba(255,255,255,0.67);} .gallery-top .history-txt{margin-bottom: 1.67rem;} .gallery-top .history-txt h2{ display: inline-block; font-size: 1rem;color: #ffffff;font-family: "DIN-blod";font-weight: normal; margin-bottom: 0.7rem; line-height: 1.23rem; text-align: center;} .gallery-top .history-txt p{ font-size: .2rem; line-height: .35rem; color: #fff; text-align: center;width: 90%;margin: auto; margin-bottom: .1rem;} @keyframes myrotate { 0%{-webkit-transform:rotate(0deg);} 25%{-webkit-transform:rotate(90deg);} 50%{-webkit-transform:rotate(180deg);} 75%{-webkit-transform:rotate(270deg);} 100%{-webkit-transform:rotate(360deg);} } .bg-f9f9f9{background: #F9F9F9;} .pabout-jounal{padding-top: .8rem; padding-bottom: .6rem;} .pabout-jounal-swiper{ margin-top: .35rem; position: relative;} .jounal-item{transform: translateY(0); transition: all .3s; cursor: pointer;} .jounal-item img{height: 6.38rem; margin: auto;} .jounal-item p{font-size: .2rem;color: #222222;line-height: 28px; margin-top: 4px; text-align: center;} .pabout-jounal .swiper-container{padding-bottom: 1rem;} .pabout-jounal .swiper-pagination-bullet{border-radius: 50%; background: #DCDCDC; width: 12px; height: 12px;} .pabout-jounal .swiper-pagination-bullet.swiper-pagination-bullet-active{background: #0E59D1;} .pabout-honor{background: url(../images/) no-repeat ,url(../images/img3.jpg) no-repeat ; background-size: auto auto ,100% 100%; background-position:80% bottom , left top; padding-top: .82rem; padding-bottom: .94rem;} .pabout-biaoshi{background: url(../images/honnor.png) no-repeat ,url(../images/img3.jpg) no-repeat ; background-size: auto auto ,100% 100%; background-position:80% bottom , left top; padding-top: .82rem; padding-bottom: .94rem;} .pabout-biaoshi-txt{ margin-top: .57rem; max-width: 50%;} .pabout-biaoshi-txt p{font-size: 16px;color: #222222;line-height: 35px;} .pabout-honor-txt{ margin-top: .57rem; width: 100%;} .pabout-honor-txt p{font-size: 16px;color: #222222;line-height: 35px;} .pabout-honor2{padding-top: 1rem; padding-bottom: .91rem;} .pabout-honor2-swiper{ border-top: 1px solid #EAEAEA; padding-top: .81rem;} .pabout-honor2-item{transform: translateY(0); transition: all .3s;} .pabout-honor2-item img{height: 2.64rem; margin: auto;} .pabout-honor2-swiper p{font-size: 20px;color: #222222;font-weight: 600;line-height: 28px; max-width: 85%; margin:.28rem auto; text-align: center;} .pabout-honor2 .swiper-pagination-bullet{border-radius: 50%; background: #DCDCDC; width: 12px; height: 12px;} .pabout-honor2 .swiper-pagination-bullet.swiper-pagination-bullet-active{background: #0E59D1;} .pabout-honor2 .swiper-container{padding-bottom: 1rem;} .pabout-honor2-item:hover,.jounal-item:hover {transform: translateY(-10px);} .partners{padding-top: 1.08rem; padding-bottom: .68rem;} .partners-left{width: 45%; padding-top: .5rem;} .partners-left .partners-txt{font-size: 20px;color: #333333;line-height: 31px; margin-top: .37rem; max-width: 50%;} .partners-right{width: 55%; display: flex; flex-wrap: wrap; justify-content: space-between;} .partners-right .img{ width: 30.5%; margin-bottom: .4rem; height: 1.2rem; overflow: hidden ; cursor: pointer; } .partners-right .img img{ width: 100%; height: 100%; object-fit: contain; filter: grayscale(100%); transition: all .5s; } .partners-right .img:last-child:nth-child(3n + 2) { margin-right: calc((100% - 30.5%) / 2); } .partners-right .img:hover img{filter: grayscale(0);} @media screen and (max-width: 1500px) { .header-nav ul li:nth-child(3) .sub-nav ,.header-nav ul li:nth-child(4) .sub-nav {width: 230%;} } @media screen and (max-width: 1400px) { .pc-box video{height:auto;width: 100%} .ind-title h5{font-size: .38rem;} #section3 .section3-list .section3-list-item{padding: .3rem .6rem;} #section4 .ind-news-right .news-content .news-content-item{padding: .35rem .6rem;} #section4 .ind-news-left .news-more{margin-top: .9rem;} #section4 .container-fluid{margin-top: 1.2rem;} #section3 .container-fluid{margin-top: .85rem;} } @media (max-width:1200px){ .news-contents{max-width: 41vw;} } @media (max-width: 780px){ #section2 .section2-item-left#section2 .section2-item-left{padding-top:0 } .item-a{box-shadow: 0 4px 5px rgb(0 0 0 / 10%);} .nav-title{padding-bottom: 1rem;} .martop-60{margin-top: -.9rem;} #section0{height: 100vh; overflow: hidden; } #section0 .swiper-container .swiper-slide img{height: 100%; width: 100%; object-fit: cover;} #section4 .ind-news-left .news-more{display: none} .other-banner-txt div p{font-size: 16px;} .weui-flex-warp{ flex-wrap: wrap;} .weui-flex-warp-item{ width: 100% !important;} .kefu-info .kefu-right{background: #fff} #section2 .section2-item-left{padding-top: 0} .pad30-m{padding: 30px !important;} .pad30-15-m{padding: 30px 15px !important;} .more-box::after{width: .3rem; left: -.185rem; margin-top: 0;} .pabout-biaoshi-txt{max-width: 100%} .pabout-biaoshi{padding-bottom: 450px} .ind-title h5{font-size: .4rem;} .ind-title span,.pservicede-item-txt h3{font-size: 18px;} .ind-title p,.case-del-section1-right p,.case-sec2 .case-sec2-item p,.case-sec3 p{font-size: 16px; line-height: .45rem;} header{height: 60px;padding: 0 .3rem;box-shadow: 0 4px 5px rgb(0 0 0 / 10%);} .logo{width: 148px; height: 60px;} .header-nav{position: fixed; top: 60px;left: 0;right: 0; bottom: 0; background: #fff;box-sizing: border-box; display: none; height: auto;margin-left: 0;} .header-nav ul{flex-wrap: wrap; width: 100%; height: unset;} .header-nav ul li{border-bottom: 1px solid rgba(226, 226, 226, 1);width: 100%;height: unset; flex-wrap: wrap;} .header-nav ul li >a{width: 100%;text-align: center; line-height: 60px;} .sub-nav{position: relative; top: 0; height: 0;} .sub-nav.on{height: 100%;} .sub-nav .nav-item a{justify-content: center;} .sub-nav .nav-item .more-box{display: none;} .banner-txt{left: 30px; right: 30px;} #section3 {background: url(../images/bg3.jpg) no-repeat; background-size: 100% 100%; background-position: left top;} #section3 .section3-list .section3-list-item{margin-top: .3rem; margin-bottom: 0;} #section3 .section3-list .section3-list-item:last-child{margin-bottom: .3rem;} .news-content .news-content-item .news-right-txt h5{font-size: 16px; line-height: .45rem;} footer .footer-list ul li >p,.pservice .pservice-p,.jounal-item p{font-size: 16px;} footer .footer-list ul li .footer-sub{ display: none;} footer .footer-list ul li .footer-sub{margin-right: 0;} footer .footer-list ul li >p{padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.3); position: relative;} footer .footer-list ul li >p::after{position: absolute; content: ''; top: 50%; right: 10px; width: 10px; height: 10px; border-top: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(45deg); margin-top: -5px; transition: all .5s ;} footer .footer-list ul li >p.on::after{ transform: rotate(135deg);right: 10px;} footer .footer .footer-content-top .footer-left,.footer-right{padding-top: 30px;} footer .footer-logo{width: 1.6rem;} footer .copyright p,.prodel-title .prodel-title-left a{font-size: 12px;} #section2 .section2-item-right{min-height: 7.2rem;} #section4 .ind-news-left .news-tabs-title p span,.news-sec5-right h6{ font-size: 18px;} #section4 .ind-news-left .news-more,#section4 .ind-news-left .news-tabs-title{margin-top: 30px;} #section4 .ind-news-left .news-tabs-title p{display: inline-block;margin-right: 20px;} #section4 .ind-news-left .news-tabs-title{display: none} #fp-nav{display: none;} .common-more{margin-bottom: .5rem; height: 40px; line-height: 40px;} #section2 .section2-item-left .section2-more{margin-top: 20px} /* .common-more .more-box::after{margin-top: -1px;} */ #section0 .swiper-button-next, #section0 .swiper-button-prev{top: 95vh;} .banner-info{top: 92vh;} .news-sec5-right-a{width: 160px; height: 40px; } .news-sec5-right-a .common-more{height: 40px; line-height: 40px; margin-bottom: 0; border: 1px solid #DDDDDD;} .news-sec5-right-a .common-more .more-box::after{margin-top: -1px;} .pservice .pservice-item .pservice-item-right{height: unset;} .j2c-p{font-size: 16px !important;max-width: 100%; line-height: .5rem !important;} .j1-content .j1-item{margin-bottom: 30px;} .j2-inner-box .j2-inner-item:not(:last-child){border-bottom: 1px solid #DDDDDD; } .j2-inner-box .j2-inner-item:not(:last-child)::after{background: none;} .j5-list-item div{ width: .5rem; height: .5rem; } .j5-list-item div img{ width: .24rem; margin:.13rem auto;} .j5-list-item .j5-p1{font-size: 12px;} .talentsWanted .table>tbody>tr>td:nth-child(1),.talentsWanted .table>thead>tr>th:nth-child(1){padding-left: 15px;} .talentsWanted-2{ padding: 0.5rem 0.35rem; } .talentsWanted-2 p{max-width: 100%; line-height: .4rem;} .talentsWanted-2{margin-bottom: 0.5rem;} .add::after{left: 0.08rem;} .precruitment .precruitment-p1{max-width: 100% !important; font-size: 16px !important;} .precruitment-list .precruitment-list-item{width: 50%;} .precruitment-list .precruitment-list-item:nth-child(even)::after{background: none; } .news-sec4-lists{margin-top: -0.35rem;} .j3-content .j3-right{margin: 0;} .j3-right-list ul li{width: 50%;} .j3-right-list ul li .j3-list-p{max-width: 86%;} .j3-content{padding-top: 30px;} .j3-content .pjoin-title{margin-left: 0; text-align: center; margin-bottom: 30px;} .kefu-info .kefu-mid div{display: block; float: left; width: 50%;} .kefu-info .kefu-mid .kf-line{display: block;} .kefu-info .kefu-mid{padding: .6rem .6rem;} .kf-message-left{padding-right: 0;} .kf-message-txt div p,.message-form .form-group{width: 100%;} .message-form .form-group{margin-bottom: .3rem;} .kf-message{margin-top: .5rem; margin-bottom: .3rem;padding: 20px} .pcase-item .pcase-txt h3{font-size: 18px;} .pcase .pcase-item:last-child:nth-child(3n + 2){margin-right: 0;} .case-sec1 .case-sec1-item{width: 48%;} .case-del-section1 .case-del-section1-right{padding-left: 0;} .case-del-section1-right h4{font-size: .35rem; margin-top: .5rem;} .product-one{margin-top: -80%;} .product-two,.pservicede2{padding: .3rem .15rem;} .case-sec1 .case-sec1-item p{font-size: 14px;} .pabout-list1 .pabout-list1-item{width: 40%;} .audio-box{height: 3.5rem;} .history-title-tabs{margin-top: .8rem;} .pabout-jounal .swiper-container{padding-bottom: .8rem;} .back-btn{padding: 0.2rem 0.25rem;background-position: 0.15rem center;} .partners-left .partners-txt{max-width: 100%; font-size: 16px; margin-bottom: .3rem;} .pabout-honor2-swiper p{font-size: 16px;} .pabout-honor2-item img{height: 4rem;} .pabout-honor-txt{max-width: 100%;} .pabout-honor{background-position: right bottom , left top;background-size: 100% auto,100% 100%;padding-bottom: 5rem;} .jobs-content{margin-left: 0; margin-right: 0} .news-contents{max-width: 100vw;} } @media (max-width:780px){ .pos1{left: 5%; top: -7%;} .pos3{left: 33%; top: -19%;} .pos5{left: 62%; top: -67%;} .pos7{left: 89%; top: -69%;} } @media (max-width:700px){ .pos1{left: 3%; top: -50%;} .pos2{left: 16%; top: 80%;} .pos3{left: 30%; top: -63%;} .pos4{left: 45%; top: 58%;} .pos5{left: 60%; top: -105%;} .pos6{left: 72%; top: 23%;} .pos7{left: 87%; top: -110%;} } @media (max-width:380px){ .pos1{left: 2%; top: -67%;} .pos2{left: 16%; top: 70%;} .pos3{left: 30%; top: -75%;} .pos4{left: 45%; top: 48%;} .pos5{left: 60%; top: -119%;} .pos6{left: 72%; top: 17%;} .pos7{left: 86%; top: -122%;} } @media (max-width:370px){ .pos7{left: 84%; top: -134%;} } @media (max-width:350px){ .pos1{left: 0%; top: -99%;} .pos2{left: 13%; top: 61%;} .pos3{left: 28%; top: -98%;} .pos4{left: 43%; top: 44%;} .pos5{left: 59%; top: -142%;} .pos6{left: 70%; top: 11%;} .pos7{left: 82%; top: -154%;} } #section1 .ind-title,#section1 .solution,#section2 .ind-title,#section2 .section2-item-right,#section3 .ind-title,#section3 .section3-list,#section4 .ind-news-right{transform: translateY(40%); transition: all 1s ease; transition-delay: 0.5s; opacity: 0;} #section2 .section2-item-mid{transform: translateY(0) scale(0);transition: all 1s ease;transition-delay: 0.8s; opacity: 0;} #section2.active .section2-item-mid{transform: translateY(0) scale(1); opacity: 1;} #section1.active .ind-title ,#section1.active .solution,#section2.active .ind-title,#section2.active .section2-item-right,#section3.active .ind-title,#section3.active .section3-list,#section4.active .ind-news-right{ transform: translateY(0); opacity: 1;} #section0 .swiper-slide .banner-txt{transform: translateY(40%); transition: all 1s ease; transition-delay: 0.3s; opacity: 0;} #section0 .swiper-slide-active .banner-txt{transform: translateY(0); opacity: 1;} @keyframes updown { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(-3px); -moz-transform: translateY(-3px); -ms-transform: translateY(-3px); -o-transform: translateY(-3px); transform: translateY(-3px); } } .delay600{ -webkit-animation-delay: .6s; animation-delay: .6s; -ms-animation-delay: .6s; -moz-animation-delay: .6s; -o-animation-delay: .6s; } .delay900{ -webkit-animation-delay: .9s; animation-delay: .9s; -ms-animation-delay: .9s; -moz-animation-delay: .9s; -o-animation-delay: .9s; } .solution{ width: 100%; height: 5.6rem; margin-top: .34rem; } .solution > .posr { height: 100%; width: 100%; margin: 0 auto; position: relative; } .solution .contain { width: 33.3333%; height: 100%; position: relative; transition: all .5s ease-out; -webkit-transition: all .5s ease-out; -o-transition: all .5s ease-out; -moz-transition: all .5s ease-out; z-index: 1; position: absolute; top: 0; overflow: hidden; overflow: hidden; } @media screen and (min-width: 800px) { .solution > .posr:hover .contain { width:33.333%; z-index: 1; } .solution > .posr:hover .anjie {right:20%} .solution > .posr .contain:hover { width: 60%; z-index: 2; } .solution > .posr .anjie:hover {left: 20%} } .solution .contain > * { z-index: 2; position: relative; } .solution .contain .bg { z-index: 0; width: 100%; height: 100%; position: absolute; } .solution .contain .bg > div { position: absolute; left: -10px; right: -10px; bottom: -10px; top: -10px; background-size: cover; background-position: center; /* filter: url(blur.svg#blur); -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=5, MakeShadow=false); */ } .solution .contain .bg:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0); z-index: 2; } .solution .contain .videobg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; transition: all .5s ease-out; -webkit-transition: all .5s ease-out; -o-transition: all .5s ease-out; -moz-transition: all .5s ease-out; } .solution .contain .videobg:before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; top: 0; background: rgba(0, 0, 0, 0.4); transition: all .5s ease-out; -webkit-transition: all .5s ease-out; -o-transition: all .5s ease-out; -moz-transition: all .5s ease-out; } /* .solution .contain .videobg video { object-fit: cover; width: 100%; height: 100%; } */ .solution .audio { left: 0; background: #333; } .solution .video { right: 33.333%; /*background: #666;*/ } .solution .anjie{left: 33.333%} .solution .baiying{right:0} .solution .text { position: absolute; top: 50px; left: 8%; color: #fff; } .solution .text h1 { font-size: 30px; letter-spacing: 5px; font-weight: bold; margin-bottom: .24rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .solution .text h2 { font-size: 30px; letter-spacing: 5px; font-weight: normal; margin-bottom: 10px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .solution .text small { font-size: .18rem; line-height: .3rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .solution .btns { position: absolute; top: 65%; right: 50px; width: 90%; transition: all .5s ease-out; -webkit-transition: all .5s ease-out; -o-transition: all .5s ease-out; -moz-transition: all .5s ease-out; height: 130px; } .solution .contain:hover .btns { border-color: rgba(255, 255, 255, 0); } .solution .btns ul { position: relative; height: 100%; display: flex; justify-content: center; list-style: none; padding-left: 0; margin-bottom: 0; } .solution .btns ul:before { content: ''; display: block; left: 0; right: 0; top: 0; background: #fff; position: absolute; z-index: 0; height: 0; border-radius: 5px; overflow: hidden; } .solution .btns ul li { float: left; width: 20%; flex-grow: 1; position: relative; z-index: 1; text-align: center; display: none; height: 100%; } .solution .boinbox ul li {width: 12.5%} .solution .video .btns ul li { width: 25%; } .solution .btns ul li:before { content: ''; left: 0; top: 9px; bottom: 0; width: 1px; background: #e0e0e0; position: absolute; } .solution .btns ul li:first-of-type:before { display: none; } .solution .btns ul li a { padding: 25px 10px; display: block; } /* .solution .btns ul li a:before { content: 'MORE'; font-size: 12px; line-height: 60px; padding-left: 40px; color: #fff; position: absolute; top: 100%; left: 0; right: 0; text-align: left; -webkit-animation: flipIn .5s ease-out; -o-animation: flipIn .5s ease-out; -moz-animation: flipIn .5s ease-out; animation: flipIn .5s ease-out; display: none; transform-origin: top center; } .solution .btns ul li a:after { content: '\e64e'; font-family: 'iconfont'; position: absolute; line-height: 60px; top: 100%; right: 0; padding-right: 40px; font-size: 30px; color: #fff; display: none; transform-origin: top center; -webkit-animation: flipIn .5s ease-out; -o-animation: flipIn .5s ease-out; -moz-animation: flipIn .5s ease-out; animation: flipIn .5s ease-out; display: none; transform-origin: top center; } */ /* .solution .btns ul li .iconfont { font-size: 40px; color: #444; display: block; line-height: 50px; margin-bottom: 10px; transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; } */ .solution .btns ul li img { width: 40px; height: 40px; margin: auto; margin-bottom: .18rem; transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; } .solution .btns ul li p { font-size: 16px; color: #454545; letter-spacing: 1px; text-overflow: ellipsis; overflow: hidden; } .solution .boinbox ul li p { font-size: 14px; } /* .solution .btns:before { content: '\e61a'; display: none; font-family: 'iconfont'; line-height: 55px; width: 55px; text-align: center; border-radius: 100%; color: #fff; font-size: 20px; position: absolute; left: -60px; top: -22px; transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; opacity: 1; } */ /* .solution .btns > p { position: absolute; left: -158px; top: 130px; font-size: 12px; line-height: 24px; color: #fff; text-transform: uppercase; width: 450px; border-top: 1px solid #fff; } .solution.on .btns > p { left: 10%; width: 100%; } */ .solution.on .contain { position: relative; } .solution:hover .contain .btns { opacity: 0; } .solution:hover .contain:hover .btns { opacity: 1; } .solution .contain:hover .videobg { opacity: 1; } .solution .contain:hover .videobg:before { opacity: 0.5; } .solution .contain:hover .btns { width: 90%; } .solution .contain:hover .btns:before { opacity: 0; } /* .solution .contain:hover .btns > p { opacity: 0; } */ .solution .contain:hover .btns ul li { display: block; } .solution .contain:hover .btns ul:before { height: 100%; transition: all .5s ease-out .5s; -webkit-transition: all .5s ease-out .5s; -o-transition: all .5s ease-out .5s; -moz-transition: all .5s ease-out .5s; } /*.solution .btns ul li:hover a:after , .solution .btns ul li:hover a:before { display: block; }*/ .solution .btns ul li:hover img { filter: none; } .solution .btns ul li:hover a p{ color: #0E59D1; } @media screen and (max-width: 1600px) { .solution { height: 550px; padding: 0 75px; } } @media screen and (max-width: 1400px) { .solution { height: 460px; } .solution { padding: 0; } .solution .contain .btns { height: 100px; } .solution .contain:hover .btns { width: 660px; height: 120px; } .solution .btns ul li a { padding: 15px 0; } .solution .btns ul li p { letter-spacing: 0; font-size: 13px; } .solution .btns ul li:hover a:after, .solution .btns ul li:hover a:before { line-height: 50px; padding: 0 20px; } .solution .text { top: 60px; } } @media screen and (max-width: 1200px) { .solution { padding: 0; } .solution { height: 500px; } } @media screen and (max-width: 1024px) { .solution { height: 480px; padding: 0; } .solution .btns { width: 250px; } .solution .contain:hover .btns, .solution .contain .btns { height: 90px; } .solution .contain:hover .btns { width: 500px; } .solution .btns ul li a { padding: 10px 0; } .solution .btns ul li p { letter-spacing: 0; font-size: 12px; } .solution .text h1 { font-size: 35px; margin-bottom: 5px; letter-spacing: 0; } .solution .text h2 { font-size: 35px; margin-bottom: 5px; letter-spacing: 0; } .solution .btns { top: 60%; overflow: hidden; } .solution .btns ul li:hover a:after, .solution .btns ul li:hover a:before { line-height: 40px; padding: 0 10px; } .solution .btns:before { font-size: 15px; line-height: 40px; width: 40px; left: -45px; } } @media screen and (max-width: 800px) { .solution .text h1 { font-size: 25px; margin-bottom: 10px; } .solution .text h2 { font-size: 25px; margin-bottom: 0; } .solution .text small { font-size: 12px; white-space: normal; } .solution .text { top: 30px; left: 30px; max-width: 80%; } .solution { height: auto; } .solution .contain { position: relative; top: auto; left: auto; bottom: auto; right: auto; float: none; width: auto; height: 480px; } .solution .contain:hover { width: auto; } .solution:hover .contain { width: auto; } .solution .contain .videobg { display: none !important; } .solution .btns:before { display: none !important; } .solution .btns ul:before { display: none; } .solution .btns ul { background: #fff; flex-wrap: wrap; } .solution .btns ul li { display: block !important; width: 33.333%; flex-grow: unset; } .solution .btns ul li p { white-space: normal; line-height: 1.5; max-width: 80%; margin: auto; } .solution .btns { left: 0; right: 0; bottom: 0; top: auto; width: auto; } .solution .contain:hover .btns:before { display: none; } .solution .contain .btns, .solution .contain:hover .btns, .solution:hover .contain .btns { width: auto; display: block !important; opacity: 1; height: auto; } .solution .contain .bg:before { background: rgba(0, 0, 0, 0.01); } .solution .btns ul li:before{ top: 0; } .solution .mid.contain .btns ul{ justify-content: left; } .solution .mid.contain .btns ul li:nth-child(1),.solution .mid.contain .btns ul li:nth-child(2),.solution .mid.contain .btns ul li:nth-child(3){ border-bottom: 1px solid #e0e0e0; } .solution .mid.contain .btns ul li:nth-child(1), .solution .mid.contain .btns ul li:nth-child(4){ border-left: 1px solid #e0e0e0; } .solution .mid.contain .btns ul li:nth-child(3), .solution .mid.contain .btns ul li:nth-child(5){ border-right: 1px solid #e0e0e0; } .solution .mid.contain .btns ul li:nth-child(4),.solution .mid.contain .btns ul li:nth-child(5){ width: 50%;} .solution .btns ul li:nth-child(4):before{ background: transparent; } /* .solution .btns ul li:nth-child(5)::after { content: ''; right: -1px; top: 0; bottom: 0; width: 1px; background: #e0e0e0; position: absolute; } */ .solution .video.contain{margin-bottom: .3rem;} .solution .video.contain .btns ul{ display: none !important; } .solution .video.contain .btns .common-more{margin-left: .5rem;} /* .solution .contain .bg > div { filter: url(blur.svg#blur); -webkit-filter: blur(0px); -moz-filter: blur(0px); -o-filter: blur(0px); -ms-filter: blur(0px); filter: blur(0px); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=0, MakeShadow=false); } */ } @media screen and (max-width: 480px) { .solution .btns ul li .iconfont { font-size: 25px; line-height: 30px; } .solution .contain { /* height: 300px; */ } .solution .video.contain{ height: 300px; } } @keyframes myfadeup{ 0%{ opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px);} 100%{ opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .myfadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes point1 { 0% { transform:scale(.8); } 50% { transform: scale(1.2); } 100% { transform: scale(.8); } } .point1 { -webkit-animation-name: point1; animation-name: point1; } @keyframes bigtosmall { 0% { opacity: 1; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } 100% { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } .bigtosmall{ -webkit-animation-name: bigtosmall; animation-name: bigtosmall; transform-origin: 50% 50%; } .post-slide{ margin: 0 15px; position: relative } .post-slide .post-img{ position:relative; overflow: hidden; } .post-slide .post-img img{ width: 100%; height: auto; transform: scale(1); transition: all 1s ease-in-out 0s; } .post-slide:hover .post-img img{ transform: scale(1.08); } .post-slide .post-content{ position: absolute; text-align: center; color: #fff; transition: .7s all ease; width: 100%; bottom: 10%; } .post-slide .post-content a{display: block} .post-slide .post-title{ font-size: 17px; font-weight: 600; margin-top: 0; margin-bottom: 20px; text-transform: capitalize; } .post-slide .post-title a{ display: inline-block; color: #fff; transition: all 0.3s ease 0s; } .post-slide .post-title a:hover{ color: #3d3030; text-decoration: none; } .post-slide .post-description{ font-size: 15px; color: #676767; line-height: 24px; margin-bottom: 14px; } .post-slide .post-bar{ padding: 0; margin-bottom: 15px; list-style: none; } .post-slide .post-bar li{ color: #676767; padding: 2px 0; } .post-slide .post-bar li i{ margin-right: 5px; } .post-slide .post-bar li a{ display: inline-block; font-size: 12px; color: #808080; transition: all 0.3s ease 0s; } .post-slide .post-bar li a:after{ content: ","; } .post-slide .post-bar li a:last-child:after{ content: ""; } .post-slide .post-bar li a:hover{ color: #3d3030; text-decoration: none; } .post-slide ._slide{ width: 171px; line-height: 42px; border: 1px solid rgba(255,255,255,0.4); height: 46px; border-radius: 25px; color: #fff; font-size: 14px; position: relative; text-indent: 35px; margin: auto;} .post-slide ._slide span{ position: absolute; z-index: 5; transition: ease 1s; width: 100%; height: 100%; left: 0; text-align: left} .post-slide ._slide ._templateIcon{ position: absolute; right: 2px; height: 32px; width: 32px; border-radius: 50%; background: #fff; color: #3e3e3e; line-height: 32px; font-size: 16px; top: 5px; right: 4px; text-align: center; transition: ease 1s; z-index: 8;} .post-slide .read-more:hover{ background: #333; text-decoration: none; } /*波音技术*/ #section3 ul{height: 100%;overflow: hidden;padding: 0} #section3 ul li{position: relative;float: left;width: 25%;height: 100%;background-repeat: no-repeat;background-position: center;background-size: cover;} #section3 ul li:before{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, .6);} #section3 ul li .box{top: 37.47%;position: relative} #section3 ul li h3{line-height: 120px;font-weight: bold;font-size: 28px;color: #fff;text-align: center;} #section3 ul li h3:before{content: "";display: block;width: 60px;height: 60px;margin: 0 auto;} #section3 ul li:nth-child(1) h3:before{background-position: -20px -170px;} #section3 ul li:nth-child(2) h3:before{background-position: -120px -170px;} #section3 ul li:nth-child(3) h3:before{background-position: -220px -170px;} #section3 ul li:nth-child(4) h3:before{background-position: -320px -170px;} #section3 ul li h3:after{content: "";display: block;width: 48px;margin: 6px auto 0;border-bottom: 3px solid #fec026;} #section3 ul li a{display: block;width: 134px;line-height: 38px;margin: 66px auto 0;background: #fec026;opacity: 0;font-size: 14px;color: #fff;text-align: center;border-radius: 20px;} #section3 ul li a:after{content: "";display: inline-block;width: 18px;height: 18px;margin-left: 10px;vertical-align: middle;background-position: -66px -66px;} #section3 ul li p{ width: 80%; margin: 40px auto; font-size: 14px; color: #fff; text-align: center; line-height: 1.8; opacity: 0;} #section3 ul li:hover:before{background: rgba(0, 0, 0, .2)} #section3 ul li:hover .box{margin-top: -60px;} #section3 ul li:hover a{opacity: 1;} #section3 ul li:hover p{opacity: 1;} #section3 ul li h3:before {background:none;background-image: url(../images/icon.png);background-repeat: no-repeat;} #section3 ul li a:after{background:none;background-image: url(../images/moreee.png);background-repeat: no-repeat;} #section3 ul li:before, #section3 ul li .box, #section3 ul li a, #section3 ul li p{-webkit-transition: all .3s;transition: all .3s;} /*新闻*/ .case-example-item { text-align: center; background: #fff; } .case-example-item a .case-pad { width: 286px; height: 180px; } .case-item-info { height:85px; overflow: hidden; position: absolute; left: 0; right: 0; bottom: 0; background: #fff; transition: all .2s; } .case-info-logo { margin-top: 0; margin-bottom: 8px; height: 80px; transition: all .2s; } .case-info-title { font-size: .18rem; font-weight: 600; color: #222222; padding-top: 20px } .case-info-time{ font-size: 14px; line-height: 15px; color: #ababab; padding: 10px} .case-info-text { font-size: 14px; color: #666; padding: 0 30px; text-align: left; line-height: 1.8; } .case-index-content .case-example-item:hover .case-item-info { height: 325px; } /*发展历史*/ .h_main .section1{padding-bottom: 8%;} .h_main .section1 .time-box{position: relative; margin-bottom: 1rem;margin-top:1rem;background: #fff;padding: 100px 0; } .h_main .section1 .time-box .time-line{position: absolute; left: 0; right: 0; margin: auto; width: 100px; height: 100%; z-index: 6; border-left: 1px solid #eee; border-right: 1px solid #eee;} .h_main .section1 .time-box .time-line .time-go{position: absolute; left: 0; right: 0; margin: auto; height: 0px; width: 1px; max-height: calc(100% - 90px); border-right: 1px #23527c dashed; z-index: 10;} .h_main .section1 .time-box .time-line .qiche{position: absolute; left: 0; right: 0; margin: auto;max-height: calc(100% - 90px);} .h_main .section1 .time-box .time-line img{position: absolute; top: calc(100% + 20px); left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); z-index: 10; width: 41px; height: 37px; display: block; max-width: initial;} .h_main .section1 .time-box .time-line:after{content: ""; position: absolute; border-right: 1px dashed rgba(238, 238, 238, 0.39); height: 100%; width: 0; top: 0; left: 0; right: 0; margin: auto; z-index: 3;} .h_main .section1 .time-box .time-line:before{content: attr(data-note); position: absolute; top: calc(100% + 20px); left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); width: 120px; font-size: 24px; text-align: center;color: #142864;} .h_main .section1 .time-box .time-item{overflow: hidden; position: relative; z-index: 3;} .h_main .section1 .time-box .time-item .time-list{position: relative; width: 50%; box-sizing: border-box; text-align: right; padding-right: 130px;float: left;margin-bottom: 10vw;} .h_main .section1 .time-box .time-item .time-list h3{font-size: 32px;color: #142864;font-weight: normal;font-weight: bold; font-family: "DIN-Medium";line-height: 1;} .h_main .section1 .time-box .time-item .time-list p{font-size: 16px;line-height: 26px;color: #333;margin-top: 10px;} .h_main .section1 .time-box .time-item .time-list > img{max-width: 100%;display: inline-block;margin-top: 20px;} .h_main .section1 .time-box .time-item .time-list p:after {content: "";position: absolute;width: 14px;height: 14px;border-radius: 50%;line-height: 14px;text-align: center;background-color: #eee;top: 10px;right:-7px;transition: all 0.3s ease-in-out;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;} .h_main .section1 .time-box .time-item .time-list.on p:after {background: -webkit-linear-gradient(-90deg, #23527c 0%, #23527c 100%);background: -o-linear-gradient(-90deg, #23527c 0%, #23527c 100%);background: -moz-linear-gradient(-90deg, #23527c 0%, #23527c 100%);background: linear-gradient(-90deg, #23527c 0%, #23527c 100%);} .h_main .section1 .time-box .time-item .time-list:nth-child(even){float: right;padding-left: 130px;padding-right: 0;text-align: left;} .h_main .section1 .time-box .time-item .time-list:nth-child(2){margin-top: 15vw;} .h_main .section1 .time-box .time-item .time-list:nth-child(even) p:after{left: -7px;right: initial;} .h_main .btm{position: fixed; right: 0; top: 55%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%);} .h_main .btm .item-node{text-align: right; opacity: 0; transform: translateX(8px); -webkit-transform: translateX(8px); -moz-transform: translateX(8px); -o-transform: translateX(8px); -ms-transform: translateX(8px); transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out;} .h_main .btm .item-node.on{opacity: 1; transform: none; -webkit-transform: none; -moz-transform: none; -o-transform: none; -ms-transform: none;} .h_main .btm .item-node li{height: 30px; line-height: 30px; cursor: pointer; position: relative; opacity: 0.5; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; font-size: 14px; padding-right: 42px;} @media screen and (-webkit-min-device-pixel-ratio:0) { .h_main .btm .item-node li { background: -webkit-linear-gradient(#142864, #972929); background: -o-linear-gradient(#142864, #972929); background: -moz-linear-gradient(#142864, #972929); background: linear-gradient(#142864, #972929); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } } .h_main .btm .item-node li:after{content: ""; position: absolute; right: 0; height: 1px; width: 32px; background-color: #eeeff2; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; top: 0; bottom: 0; margin: auto;} .h_main .btm .item-node li.on{opacity: 1; padding-right: 56px; font-size: 18px; font-weight: bold;} .h_main .btm .item-node li.on:after{background: #142864; width: 50px;} .pcimg{display: block} .sjimg{display: none} @media (max-width: 780px){ .pcimg{display: none} .sjimg{display: block} .h_main .section1{padding-bottom: 60px;} .h_main .section1 .time-box .time-line{width: 50px;} .h_main .section1 .time-box .time-item .time-list{padding-right: 46px;} .h_main .section1 .time-box .time-item .time-list:nth-child(even){padding-left: 44px;} .h_main .section1 .time-box .time-item .time-list h3{font-size: 26px;} .h_main .section1 .time-box .time-item .time-list p{font-size: 12px;line-height: 20px;} .h_main .section1 .time-box .time-item .time-list p br{display: none;} .h_main .section1 .time-box .time-item .time-list:nth-child(2){margin-top: 26vw;} .h_main .section1 .time-box .time-line:before{font-size: 16px;} .h_main .btm { display: none; } #section3 ul{margin-top: 25px} #section3 ul li{width: 48%;height: 420px;margin: 1% 1% 5px 1%;} #section3 ul li .box{top:30%} #section3 ul li h3{font-size: 18px} .pronav ul{padding: 0;margin-bottom: 10px} .pronav ul li{width: 100px} .pronav ul .cur{width: 100px} .case-item-info{height: 65px} .news-content .news-content-item .news-right-txt h5{font-size: 14px; line-height: 30px;} .ind-news-left .ind-title{text-align: center} #section6{background:url(../images/sjlcbg.jpg)} }