@charset "utf-8";

* {
   box-sizing: border-box;
}

html {
   -webkit-text-size-adjust: none;
   max-height: 100%;
   scroll-behavior: smooth;
}

body {
   transition: all 0.4s ease;
   color: #000;
}

body,
button,
input,
select,
textarea {
   font-family: pingfang SC,
      helvetica neue,
      arial,
      hiragino sans gb,
      microsoft yahei ui,
      microsoft yahei,
      simsun,
      sans-serif !important;
}

body,
p,
h1,
ul,
li,
input,
img,
figure,
h3,
h1,
h2,
h4,
h5,
h6,
dl,
dd,
dt {
   margin: 0;
   padding: 0;
}

input[type="text"],
input[type="password"],
input[type="submit"],
input[type="reset"],
input[type="button"],
textarea {
   -webkit-appearance: none;
}


address,
cite,
dfn,
em,
var,
i {
   font-style: normal;
}

code,
kbd,
pre,
samp {
   font-family: "Poppins", Sans-serif
}

small {
   font-size: 10px;
}

ul,
ol {
   list-style: none;
}

sub {
   bottom: 0
}

a {
   text-decoration: none;
   color: #000
}

a:hover {
   text-decoration: none;
   color: #069fb1
}

sup {
   vertical-align: text-top;
}

sub {
   vertical-align: text-bottom;
}

abbr[title] {
   border-bottom: 1px dotted;
   cursor: footer-help;
}

legend {
   color: #000;
}

fieldset,
img {
   border: 0;
}

img {
   max-width: 100%;
   display: block;
}

a img {
   vertical-align: text-bottom;
}

:focus {
   outline: 0;
}

textarea {
   overflow: auto;
   vertical-align: top;
   resize: vertical;
}

button,
input,
select,
textarea {
   font-size: 100%;
}

button,
input,
select {
   vertical-align: middle;
}

/* 更改输入框的 placeholder 文本颜色 */
input::placeholder,
textarea::placeholder {
   color: #bababa
      /* 或者你想要的任何颜色值 */
}

button {
   cursor: pointer;
}

table {
   border-collapse: collapse;
   border-spacing: 0;
}

caption,
th {
   text-align: left;
}

.clear {
   clear: both;
   display: block;
   overflow: hidden;
   visibility: hidden;
   width: 0;
   height: 0;
}

.text-blue {
   color: #069fb1
}

.text-white {
   color: #fff
}

.bg-blue {
   background: #069fb1
}

.text-capital {
   text-transform: uppercase
}

.arial {
   font-family: Arial, Helvetica, sans-serif;
}


/**************滚动条样式**********/

::-webkit-scrollbar {
   width: .625rem;
   height: .0625rem;
}

::-webkit-scrollbar-thumb {
   background: rgba(0, 0, 0, .3);
}

::-webkit-scrollbar-track {
   -webkit-box-shadow: 0 0 .3125rem rgba(0, 0, 0, 0.2);
   background: rgba(0, 0, 0, .1);
}

/**************框架公用样式**********/
.container-fluid {
   max-width: 1230px;
   padding-left: 15px;
   padding-right: 15px;
}

.photo img {
   -webkit-transition: 0.5s;
   transition: 0.5s;
}

.photo:hover img {
   -webkit-transform: scale(1.1);
   -moz-transform: scale(1.1);
   -ms-transform: scale(1.1);
   transform: scale(1.1);
   -webkit-transition: 0.5s;
   transition: 0.5s;
}

.iconfont {
   font-size: inherit;
}

/**************头部**********/
header {
   position: fixed;
   z-index: 10;
   top: 0;
   left: 0;
   right: 0;
   width: 100%;
   padding: 8px 0;
   z-index: 9;
   box-shadow: 0 0 3px rgba(0, 0, 0, .08);
   background: #fff
}

header .logo {
   height: 50px
}

nav ul li {
   position: relative;
   font-size: 22px;
   margin-left: 60px;
}

nav ul li a {
   display: block;
   height: 50px;
   line-height: 50px;
}


nav ul li:hover a,
nav li.current a {
   color: #069fb1;
   font-weight: bolder
}

/**************手机导航**********/

.sp_nav,
.sjj_nav {
   display: none;
}

.sp_nav {
   width: 32px;
   position: absolute;
   top: 16px;
   right: 15px;
   cursor: pointer;
   color: #fff;
   z-index: 999
}


.sp_nav span {
   display: block;
   background: #069fb1;
   width: 32px;
   height: 2px;
   position: absolute;
   transition: all ease 0.35s
}

.sp_nav_se span {
   background: #fff;
   width: 24px;
}

.sp_nav span:nth-of-type(1) {
   top: 0px
}

.sp_nav span:nth-of-type(2) {
   top: 10px
}

.sp_nav span:nth-of-type(3) {
   top: 20px
}

.sp_nav_se span:nth-of-type(1) {
   top: 20px;
   transform: rotate(45deg)
}

.sp_nav_se span:nth-of-type(2) {
   width: 0
}

.sp_nav_se span:nth-of-type(3) {
   top: 20px;
   transform: rotate(-45deg)
}

.sjj_nav {
   position: fixed;
   z-index: 9;
   background: #eee;
   width: 100%;
   height: calc(100% - 104px);
   height: 100vh;
   line-height: 40px;
   top: -100vh;
   left: 0;
   right: 0;
   overflow: auto;
   overflow-x: hidden;
   transition: top ease 0.35s;
   margin: 0 auto
}

.nav_show {
   top: 0;
   padding: 60px 30px;
   background: #333
}


.sjj_nav ul li {
   position: relative;
   line-height: 50px;
   border-bottom: 1px solid rgba(255, 255, 255, .2);
}

.sjj_nav ul li a {
   color: #ccc;
   display: block;
}




/**************banner**********/
.banner {
   margin-top: 66px
}

.banner .swiper-slide {
   width: 60%;
   height: 500px;
}

.banner .swiper-pagination-bullet {
   background-color: #fff;
   width: 15px;
   height: 15px;
   opacity: .6;
   border-radius: 50%;
}

.banner .swiper-pagination-bullet-active {
   opacity: 1;
   width: 46px;
   border-radius: 30px;
}


.project-name h2 {
   font-size: 35px;
   font-weight: 900;
   margin-bottom: 0;
}

.project-name span {
   font-size: 25px;
}

.project-name h2::before {
   content: '';
   width: 8px;
   height: 8px;
   display: inline-block;
   background: #069fb1;
   border-radius: 50%;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   -ms-border-radius: 50%;
   -o-border-radius: 50%;
   vertical-align: middle;
   margin-right: 10px;
}

.products-list {
   background: url(../images/bg1.jpg) bottom no-repeat #f6feff;
   padding-bottom: 80px;
}

.products-list ul {
   gap: 3%;
}

.products-list li {
   background: #fff;
   box-shadow: 0 0 10px rgba(0, 0, 0, .05);
   border-radius: 10px;
   padding: 20px;
   width: 31.33%;
   margin-top: 30px;
}

.products-list li h5 {
   margin-bottom: 10px;
   display: inline-block;
   max-width: 100%;
}

.products-list li h5 span {
   max-width: 100%;
}

.products-list li h5::after {
   content: '';
   height: 4px;
   border-radius: 5px;
   background: #addfe5;
   display: block;
   margin-top: 5px;
}

.products-list li.pro-more {
   font-size: 30px;
   background: none !important;
   box-shadow: none;
}

.products-list li.pro-more i {
   font-size: 60px;
}

.products-list li.pro-more span {
   display: block;
   margin-top: -25px;
}

.click-more {
   font-size: 20px;
   border: 2px solid #069fb1;
   color: #069fb1;
   padding: 5px 15px;
   border-radius: 5px;
   transition: .3s;
}

.click-more:hover {
   background: #069fb1;
   color: #fff;
}


.news-list li {
   width: 48.5%;
   background: #fff;
   padding: 20px;
   display: flex;
   justify-content: space-between;
   background: #fff;
   box-shadow: 0 0 10px rgba(0, 0, 0, .1);
   border-radius: 5px;
   margin-bottom: 30px;
}

.news-list li h3 {
   font-size: 20px;
   overflow: hidden;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   line-height: 32px;
}

.news-list li span {
   width: 205px;
   height: 205px;
   position: relative;
   display: block;
   overflow: hidden;
}

.news-list li span img {
   object-fit: cover;
   height: 100%;
}

.news-list li section {
   width: calc(100% - 225px);
   display: flex;
   flex-direction: column;
   justify-content: space-around;
}

.news-list li section em {
   color: #999;
   font-size: 18px;
}

.process-list {
   background: url(../images/bg2.jpg) bottom no-repeat;
   background-size: 100%;
}

.process-list ul {
   width: calc(100% - 620px);
}

.process-list ul li {
   display: flex;
   justify-content: space-between;
   line-height: 1.6;
   margin-bottom: 15px;
}

.process-list ul li span {
   display: block;
   width: 85px;
   height: 85px;
   border-radius: 50%;
   background: #069fb1;
   overflow: hidden;
}

.process-list ul li span img {
   height: 100%;
}

.process-list ul li section {
   width: calc(100% - 95px);
}

.process-list ul li section p {
   font-size: 15px;
}

footer {
   background: rgb(6, 159, 177, .08);
   padding: 120px 0 40px;
   font-size: 22px;
}

footer>div {
   z-index: 5;
}

footer::before,
footer::after {
   content: '';
   background: rgb(6, 159, 177, .08);
   position: absolute;
   width: 100%;
}

footer::before {
   bottom: 0;
   height: calc(100% - 35px);
}

footer::after {
   bottom: 0;
   height: calc(100% - 70px);
}

footer .footer-logo {
   line-height: 45px;
}

footer .footer-logo img {
   height: 50px;
}

footer .footer-logo span {
   color: #8b8b8b;
}

footer .footer-ewm p+p {
   margin-left: 25px;
}

footer .footer-ewm img {
   width: 160px;
   border-radius: 10px;
   margin-bottom: 15px;
}

.min-banner {
   height: 500px;
   margin-top: 66px;
   padding: 100px 100px 0 0;
}

.min-banner h1 {
   font-size: 50px;
   font-weight: 900;
}

.min-banner h1 span {
   font-size: 30px;
   display: block;
}


.main-content {
   line-height: 220%;
   font-size: 16px;
}

.about-border {
   height: 2px;
   background-image: linear-gradient(to right,
         #fff 0%,
         #069fb1 50%,
         #fff 100%)
}

.project-name1 {
   font-size: 30px;
   font-weight: 900;
}

.project-name1::before,
.project-name1::after {
   content: '';
   width: 6px;
   height: 6px;
   display: block;
   border-radius: 50%;
   background: #069fb1;
   margin: 0 15px;
}

.case-list {
   gap: 1.5%;
}

.case-list li {
   width: 15.4%;
   box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
   border: 1px solid #f5f5f5;
   margin-bottom: 20px;
}

.case-list li a {
   display: block;
   overflow: hidden;
}

.case-list li:hover {
   box-shadow: 0 5px 10px rgb(6, 159, 177, .1);
}

.crumbs-list {
   font-size: 20px;
}

.pro-des-content {
   margin: 50px auto 30px;
   padding-bottom: 60px;
}

.pro-des-content .pro-des {
   width: 46%
}

.pro-des-content .pro-des section,
.pro-content .pro-content-show {
   font-size: 16px;
   padding: 15px 0 0;
   line-height: 200%;
}

.pro-des-content .pro-des h5 {
   border-bottom: 1px solid #ccc;
   font-size: 30px;
   padding-bottom: 20px;
   font-weight: 900;
}


.pro-des-content .pro-des p {
   font-size: 20px;
}

.pc-slide {
   width: 46%;
}

.view .swiper-container {
   width: 100%;
}

.view .swiper-slide img {
   width: 100%;
}

.preview {
   width: 100%;
   margin-top: 10px;
   position: relative;
}

.preview .swiper-container {
   width: calc(100% - 70px);
}

.preview .swiper-slide {
   cursor: pointer;
   width: 20%;
   padding: 0 2px;
}

.preview .swiper-slide img {
   border: 2px solid #ddd;
}

.preview .active-nav img {
   border: 2px solid #F00;
}

.preview .arrow-left,
.preview .arrow-right {
   position: absolute;
   top: 50%;
   z-index: 10;
   font-size: 30px;
   color: #999;
   transform: translateY(-45%);
}

.preview .arrow-left {
   left: 0;
}

.preview .arrow-right {
   right: 0;
}

.pro-links {
   background: #069fb1;
   color: #fff;
   padding: 12px 20px;
   font-size: 25px;
   border-radius: 5px;
}

.pro-links:hover {
   background: #0791a0;
   color: #fff;
}

.project-name2 {
   font-size: 24px;
   font-weight: 900;
   padding: 12px 35px;
   border-radius: 6px;
}

.pro-subtitle {
   font-size: 18px;
   color: #999;
}


@media screen and (max-width:767px) {

   .sp_nav,
   .sjj_nav {
      display: block
   }

   nav,
   .project-name span em {
      display: none;
   }

   header .logo {
      height: 40px;
   }

   .banner {
      margin-top: 56px
   }

   .banner .swiper-slide {
      height: 150px;
      background-size: cover !important;
   }

   .project-name h2 {
      font-size: 26px;
      margin-bottom: 10px;
   }


   .products-list li.pro-more,
   .news-list li,
   .process-list ul,
   .pc-slide,
   .pro-des-content .pro-des {
      width: 100%;
   }

   .products-list li.pro-more {
      text-align: center;
      font-size: 20px;
      margin-top: 0;
   }

   .products-list li.pro-more i {
      font-size: 40px;
   }

   .products-list li.pro-more span {
      margin-top: -15px;
   }

   .products-list li {
      width: 48%;
   }

   .products-list ul {
      justify-content: space-between;
   }

   .products-list li h5 {
      font-size: 18px;
   }

   .products-list {
      padding-bottom: 0;
   }

   .click-more {
      font-size: 16px;
   }

   .pro-des-content .pro-des section,
   .news-list li h3,
   .crumbs-list,
   .main-content {
      font-size: 16px;
   }

   .pro-des-content .pro-des p,
   .pro-subtitle,
   .pro-links,
   footer,
   .project-name span {
      font-size: 18px;
   }

   .news-list li span {
      width: 120px;
      height: 120px;
   }

   .news-list li section {
      width: calc(100% - 140px);
   }

   .news-list li h3 {
      line-height: 28px;
   }

   .process-list .process-img {
      margin: 30px 0 50px;
   }

   .footer-ewm {
      justify-content: center;
      width: 100%;
      margin-top: 50px;
   }

   footer .footer-ewm img {
      width: 120px;
   }

   footer .footer-logo>a {
      margin-bottom: 30px !important;
      text-align: center;
   }

   footer .footer-logo img {
      height: 45px;
      margin: 0 auto;
   }

   .min-banner {
      height: 150px;
      margin-top: 56px;
      padding: 0;
   }

   .min-banner h1 {
      font-size: 22px;
      line-height: 1;
   }

   .min-banner h1 span {
      font-size: 20px;
   }

   .min-banner>div {
      justify-content: center !important;
      align-items: center;
      height: 100%;
   }

   .project-name1 {
      font-size: 22px;
   }

   .case-list {
      gap: 2%;
   }

   .case-list li {
      width: 32%;
   }

   .pro-des-content .pro-des {
      margin-top: 30px;
   }

   .pro-des-content .pro-des h5 {
      font-size: 25px;
   }

   .project-name2 {
      font-size: 18px;
      padding: 8px 20px;
   }

   .preview .swiper-slide {
      width: 33.3%;
   }

   .news-tittle {
      font-size: 20px;
   }

   .news_description {
      line-height: 1.5
   }
}