@charset "utf-8";
body{font-family: Microsoft YaHei;}
.head {font-size: 1.1rem;  position:fixed; top:0; z-index:9; padding:0;}
.head a {rgba(0,0,0,0.9) !important;}
.space{ height:5rem }
a:link, a:visited {color: #000; text-decoration: none;}
.btn-primary > a { color:#FFF !important; }
.color-theme{ color:#128e88; }
.color-bg { background: #128e88 }
.color-bg a, .color-bg a:visited{color: #FFF;}
.list-group-flush li{border-bottom: none !important;}
.head nav li:hover a, .head nav li .active {background:#128e88;  border-radius:0.3rem;color: #FFF !important;  }
.dropdown-menu{border: none;}

ul[aria-labelledby="navbarDropdown"] {background: #128e88; min-width: 5rem !important;animation:zoomIn 0.3s;}
ul[aria-labelledby="navbarDropdown"] li a {color: #FaFaFa;}
ul[aria-labelledby="navbarDropdown"] li a:hover {background: #117d77;  }


.bg-overlay {position: absolute; left:0; top:0; right:0; bottom:0; width:100%; height: 100%; background:rgba(0, 0, 0, 0.45);}
.carousel-caption {top:18rem !important;}
.carousel-caption h2 {font-size: 3rem;}
.carousel-caption p {font-size: 2rem;margin-top: 2rem;}

.banner .carousel-caption {top:14rem;}
.banner .carousel-caption h2 {font-size: 3rem;}
.banner .carousel-caption p {font-size: 2rem;margin-top: 2rem;}


.about { padding: 8rem 0.75rem; background:url(/static/5d.jpg);background-size:100% 100%; }
.about h2{ padding:2rem 0 0 0!important; font-weight:600;text-shadow: 2px 2px 5px #CCC; }
.service li {float: left !important; margin: 0; list-style: none;  }
.service li h3 {font-size:1.2rem; text-align:center; padding-top:0.5rem; }
.service-box {margin: 1rem; padding:1rem;background-color:#FFF;border-radius:2rem;text-align: center;}
.service-box:hover {background-color:rgba(107,189,185, 1); color: #FFF; }
.service-box img{width: 40%;color: #128e88; margin: 0 auto;}

.products, .factory { padding:8rem 0 4rem 0; }
.parameter {padding-bottom: 8rem; background: rgba(200, 200, 200, 0.25);}

.news h2,.products  h2, .factory h2 { padding-bottom:0.5rem;text-align:center; font-weight:600; text-shadow: 5px 5px 5px #CCC; }
.s-title {color: #ccc; text-align: center; padding-bottom: 3rem;}
.factory h2.title2{ padding-bottom:2rem; }



.productlist figcaption { text-align:center; font-size:1.1rem; }
.productlist > figure {margin-right: 0 !important; text-align:center; font-size:1.1rem; }
.product-more { text-align:center; padding:4rem 0; }
.product-more span{color:#FFF; padding:0.75rem 1.5rem; border-radius:0.25rem;background:#029388;}


.title-2{font-size: 2rem; padding: 2rem 0 1rem 0 !important;text-shadow: 5px 5px 5px #CCC; text-align: center; font-weight: 600;}

.news{ padding:4rem 0; background:url(/static/5d.jpg);background-size:100% 100%;}
.news h2, .about h2{ padding:2rem 0 0 0!important; text-align: center;}

.about .title h2{font-size:2rem; padding: 2rem 0 1rem 0; text-align: left;} text-align: center; font-weight: 600;
.slogan { padding-bottom: 2rem;}
.about .s-title{ text-align:left; padding-bottom:2rem}

.news-title{line-height: 3rem; font-size: 1.1rem; font-weight: 500; padding: 0.2rem 0.5rem;}

.i-newslist .figure { padding:0.75rem 2rem; }
.i-newslist .figure:hover { background:#128e88 !important;color:#FFF; }
.i-newslist .figure:hover .figure-caption a, .i-newslist .figure:hover .news-adddate, .i-newslist .figure:hover .news-desc{ color:#FFF; }
.i-newslist li { border: none; margin: 0.5rem; padding: 0.5rem 0.75rem !important; background: rgba(255, 255, 255, 0.4) !important;}
.i-newslist li a {color: #333; font-weight:500; line-height:2rem; padding-bottom: 0.25rem}
.i-newslist li a span {color: #ccc;}
.i-newslist li a p {color: #999; line-height: 1.5rem;}
.i-newslist li:hover{ background:#128e88 !important;  }
.i-newslist li:hover a, .i-newslist li:hover a span, .i-newslist li:hover a p { color:#FFF; }

.i-newslist .figure-caption { padding: 0.75rem 0; font-size:1.1rem !important; font-weight:500; color:#333 } 
.figure .news-adddate, .figure .news-desc {color: #CCC;}
.figure .news-desc {color: #999;}

.friend-link, .friend-link a:link, .friend-link a:visited { color:#999; }
.friend-link  li.list-group-item{border-top: none !important;}
.footer{ background:rgba(39, 50, 63, 1); padding:2rem 0; color:#FFF; }
.footer a{text-decoration: none; color: #fff;}
.contact{ padding:1rem; }
.contact p{font-size: 0.9rem; margin-bottom:0.5rem; }
.ewm { max-width:6rem; padding-bottom:2rem; }
.copyright {font-size: 0.8rem}
.phone { position:fixed; bottom:0; z-index: 99; line-height:3; box-sizing: border-box;padding:0; margin:0; }
.phone li{ width:33%; padding:0; text-align:center; color:red; }
.phone li:not(last-child){ border-right:2px solid red; }



.banner{padding: 0; position: relative;}
.bannerbg{ background:url(../images/bannerbg.png) no-repeat center; background-size:cover; padding:0; }
.banner-color{ background:rgba(107, 189, 185, 0.5); }
.banner-color h1 { padding:3rem 0; text-align:center; color:#FFF; }




/*about 页面*/
.about-d{clear: both; background: url(/static/3.png) no-repeat; position: relative;}
.about-d .bg{ background: url(/static/factory.jpg) no-repeat; background-size: contain; background-position: left;  }
.about-l { padding: 8rem 0.75rem 4rem 0.75rem; }
.about-r { padding-top: 8rem; padding-bottom:4rem; }
.data {padding:4rem 0 4rem 0;}
.number { font-size: 3rem; font-weight: 600; }
.factory h2{ padding-bottom: 4rem; }
.factory li, .data li {float: left; margin-right: 0 !important; padding:1rem;text-align: center;}
.data-c{ display: block; padding: 0.8rem; border:  1px solid #CCC; !important; border-radius: 1rem;background:rgba();  }
.factory  h4 { font-size:1.15rem; line-height:2rem; }





.category-list{margin-bottom: 2rem; }

#proimg{position: relative !important;}
#proimg [data-bs-target] , .carousel-indicators img {width: 80px; height: 80px; }
.carousel-indicators  img {z-index: 5;}
.imgthumb,.description { margin-top:2rem; }
.imgthumb .carousel-inner {width: auto !important; max-width: 85%;}

.description .list-group-item{margin-bottom: 0 !important; border: 0 !important;};
.protitle{ margin:2rem auto; text-align: center;}

.productdes { margin-top:8rem; padding:0.75rem; }
.productdes > div{ padding-bottom:2rem; margin-top: 1rem;}
.productdes h3{ font-size:1.2rem; }
.productdes h4{ font-size:1.125rem; }
#myTab, ul.myTab {border-bottom:1px solid rgba(18, 142, 136, 0.4); }
#myTab .nav-link{ border-radius:0.2rem 0.2rem 0 0; color:#333333; }
.nav-pills .nav-link.active { background-color: #128e88 !important; color: #FFFFFF !important}


.fad:not(.show){display: none;}
.tab-pane { padding-top:2rem; margin-top:1rem; }
.tab-pane h4 { margin-bottom:2rem; }
ul.application li {text-align: center; display: block; padding:1rem 1rem; margin: 1rem; border-radius:0.8rem;background: rgba(18, 142, 136, 0.2);}
ul.application li h3{font-size: 1.5rem; line-height: 2rem;}
ul.application li p{text-align: left;}

/*面包屑导航*/
nav[aria-label="breadcrumb"]{line-height: 2rem; height: 2rem; overflow-y: hidden;}


.articlebody { margin:2rem auto; }
.articlebody .content .card{ border-left: none !important;border-right: none !important;border-top: none !important;}
.articlebody .content .card:hover { background:#128e88 !important; }
.articlebody .content .card:hover h6{color: #FFF;}
.articlebody .content .card:hover span, .articlebody .content .card:hover p{color: #ddd !important;} 

.sidebar { border:1px solid rgba(69, 147, 248, 0.2); padding: 0rem 0.5rem 2rem 0.5rem;}
.sidebar .widget{ margin-bottom:1rem; }
.sidebar .widget h4, .article-product .title h4{ text-align:center; background: rgba(18, 142, 136, 1); color: #FFF; border-radius:0.1rem; line-height: 3rem}
.tag-cloud{padding: 0.2rem 0.8rem; line-height: 2rem;}
.tag-cloud a {background: rgba(18, 142, 136, 0.2);border-radius: 0.2rem; padding: 0.2rem;word-wrap: normal}
.content h1{ text-align:center; }
.article-meta .list-group-item{border:none !important;}
.article-content { padding:2rem; }
.article-content img{ max-width:90%; margin:5%;  }
.article-content p img{ margin-left:-2rem;  }

.article-content p , #myTabContent p{ text-indent:2em; }
.subcategory { padding-bottom:0.8rem; }
.article-product{ margin-bottom:2rem; }
.article-product .title{ margin:2rem 0; }


ul.pagination{ padding-top:2rem !important; }


.contact-banner{background: lightblue url("/static/images/contact-banner.jpg") no-repeat fixed center; }


/*contact*/
.contact li { width:24%; text-align:center; border:none !important; margin-bottom:3rem; }
.contact li svg {font-size: 4rem; color:#009b93; margin-bottom: 1rem;}

.fadeIn {
  animation: fadein 3s; 
}
@keyframes fadein {
  from { opacity: 0; } 
  to { opacity: 1; } 
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.fadeInRight {
  animation: fadeInRight 2s;
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.fadeInLeft {
  animation: fadeInLeft 2s;
}

@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

.bounceIn {
  animation-duration: calc(var(--animate-duration) * 0.75);
  animation: bounceIn 2s;
}
@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}

.zoomIn {
  animation: zoomIn 2s;
}