@media screen and (min-width:768px){    html{ font-size: 14.5px;} }
@media screen and (min-width:376px) and (max-width:767px){    html{ font-size: 14px;}  }
@media screen and (min-width:320px) and (max-width:375px){    html{ font-size: 13px;}  }
@media screen and (max-width:319px){    html{font-size: 12px; }    }

.wapper{ width:  4.44531rem; margin: 0 auto; padding: 0; box-sizing: border-box; }
@media screen and (max-width:1450px){    .wapper{ width: 100%; padding: 0 20px; }   }
@media screen and (max-width:1000px){    .wapper{ width: 100%; padding: 0 10px;}   }
.Hometitle{ padding: 30px 5px; margin: 0 auto; text-align: center; }
.Hometitle dt{ font-size: 24px; color: #000; line-height: 2;}
.Hometitle dd{ font-size: 16px ; color: #000; line-height: 1.6;margin-bottom: 0rem;}
/* 首页产品 */
.homeProduct{  width: 100%; margin: 0 auto; }
ul.productList2{ width: 4.44531rem;  display: flex; display:-webkit-flex; flex-direction:row; flex-wrap: wrap; justify-content:space-between;align-items:flex-start; align-content: flex-start; }
ul.productList2 li{ width: 32%; overflow: hidden; margin-bottom: 30px;}
ul.productList2 li.fake{ height: 1px; line-height: 0; padding: 0; margin: 0; overflow: hidden;}
ul.productList2 li figure{    margin-inline-end: 0px; margin-inline-start: 0px;    margin-block-end: 0em;margin-block-start: 0em; width: 100%; height: 0; padding-bottom: 62.2%; overflow: hidden; position: relative;}
ul.productList2 li figure img{ display: block; position: absolute; left: 50%; top: 50%;  width: 100%; transform: scale(1) translate(-50%,-50%); transition: all .5s ease-out 0s; -webkit-transition: all .5s ease-out 0s; -moz-transition: all .5s ease-out 0s;}
ul.productList2 li:hover figure img{transform: scale(1.1) translate(-50%,-50%); transition: all .5s ease-out 0s; -webkit-transition: all .5s ease-out 0s; -moz-transition: all .5s ease-out 0s; }
ul.productList2 li div{ background-color:#525252; padding:12px 6px; box-sizing: border-box; width: 100%;  position: relative; text-align: center;}
ul.productList2 li div::before{ content: ""; width: 0; height: 100%; background-color: #336899; position: absolute; top: 0; left: 0; z-index: -1;  transition: all .4s ease-out 0s; -webkit-transition: all .4s ease-out 0s; -moz-transition: all .4s ease-out 0s;}
ul.productList2 li:hover div::before{ width: 100%; z-index: 2;  transition: all .4s ease-out 0s; -webkit-transition: all .4s ease-out 0s; -moz-transition: all .4s ease-out 0s;}
ul.productList2 li div h5{ font-size: 14px; color: #fff; line-height: 1.5;overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; z-index: 3; }
ul.productList2 li div p{ font-size: 12px; color: #f0f0f0; line-height: 1.6;overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; z-index: 3;}
.moreCheck{ margin: 40px auto 40px; }
.moreCheck a{ margin: 0px auto; width: 240px; height: 40px; line-height: 40px; color: #336899; text-align: center; font-size: 15px; border: 1px solid #336899;transition: all .4s ease-out 0s; -webkit-transition: all .4s ease-out 0s; -moz-transition: all .4s ease-out 0s;}
.moreCheck a:hover{ color: #fff; background-color: #336899; transition: all .4s ease-out 0s; -webkit-transition: all .4s ease-out 0s; -moz-transition: all .4s ease-out 0s;}
.block{display: block;}
@media screen and (max-width:900px){
    .homeProduct{ padding: 10px 0 30px;}
    ul.productList2 li{ width: 49%; margin-bottom: 25px;}
}

/* 首页关于我们 */
.homeAbout{ width: 100%; height: 600px;  background-size: 100%; background-attachment: fixed;  background-position: center center ; background-repeat: no-repeat; position: relative;}
.homeAbout .wapper{padding-left: 40px; padding-right: 40px; }
.homeAbout .wapper .aboutIntro{ width: 45%; color: #444; box-sizing: border-box; padding: 20px 45px; background: #f7f7f7; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 10;}
.homeAbout .wapper .aboutIntro h5{ font-size: 20px; line-height: 2; text-align: center;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;  }
.homeAbout .wapper .aboutIntro h5 span{ margin-left: 10px; color: #666; font-size: 14px; display: block; line-height: 1; text-align: center; }
.homeAbout .wapper .aboutIntro p{  margin-top:20px;line-height: 28px; font-size: 14px; max-height: 140px; overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 5;-webkit-box-orient: vertical;  }
.homeAbout .wapper .aboutIntro a{ margin: 10px auto; width: 190px; height: 36px; line-height: 36px; color: #336899; text-align: center; font-size: 15px; border: 1px solid #336899;transition: all .4s ease-out 0s; -webkit-transition: all .4s ease-out 0s; -moz-transition: all .4s ease-out 0s; }
.homeAbout .wapper .aboutIntro a:hover{color: #fff; border: 1px solid #336899; background-color: #336899; transition: all .4s ease-out 0s; -webkit-transition: all .4s ease-out 0s; -moz-transition: all .4s ease-out 0s; }


@media screen and (max-width:1200px){
    .homeAbout{ height: 500px; }
    .homeAbout .wapper{ padding-left: 10px; padding-right: 10px;}
    .homeAbout .wapper .aboutIntro{ width: 58%; }
}

@media screen and (max-width:414px){
    .homeAbout{ height: 310px; padding: 40px 0;}
    .homeAbout .wapper .aboutIntro{ width: 90%; order: 2;}
}


/* 视频 */
.homeVideo{ padding: 70px 0; display: flex; display:-webkit-flex; flex-direction:row; flex-wrap: wrap; justify-content:center;align-items:center; align-content: flex-start; }
.homeVideo .videoIntro{ width: 420px; height: 300px; background-color: #525252; box-sizing: border-box; padding: 30px; color: #fff; position: relative;}
.homeVideo .videoIntro::before{ content: ""; width: 94%; height: 94%; position:absolute; top: 3%; left: 3%; border: 2px solid #353535; box-sizing: border-box; }
.homeVideo .videoIntro h5{ font-size: 16px; line-height: 2; text-align: center;overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; z-index: 3; }
.homeVideo .videoIntro h5 span{ font-size: 14px; margin-left: 4px; line-height: 1;}
.homeVideo .videoIntro p{position: relative; z-index: 3;   margin-top: 20px; line-height: 32px; max-height: 64px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; }
.homeVideo .videoIntro a{width: 120px; margin: 30px auto; text-align:center; position: relative; z-index: 3;  padding: 6px 30px; border: 1px solid rgba(255,255,255,.4); transition: all .4s ease-out 0s; -webkit-transition: all .4s ease-out 0s; -moz-transition: all .4s ease-out 0s; } 
.homeVideo .videoIntro a:hover{ background-color: #336899; transition: all .4s ease-out 0s; -webkit-transition: all .4s ease-out 0s; -moz-transition: all .4s ease-out 0s;  }
.homeVideo .videoIntro a i.iconfont{ font-size: 20px; color: #fff;}
.homeVideo .videoImg{ width: 700px; }
.homeVideo .videoImg a{ position: relative; display: block; width: 100%; height: 100%; }
.homeVideo .videoImg a img{ width: 100%; }
.homeVideo .videoImg a i.iconfont{ font-size: 48px; color: #555; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); transition: all .4s ease-out 0s; -webkit-transition: all .4s ease-out 0s; -moz-transition: all .4s ease-out 0s; }
.homeVideo .videoImg a:hover i.iconfont{ color:  #336899; transition: all .4s ease-out 0s; -webkit-transition: all .4s ease-out 0s; -moz-transition: all .4s ease-out 0s; }

@media screen and (max-width:1300px){
    .homeVideo{ padding: 40px 10px;}
    .homeVideo .videoIntro{ width: 40%; height: auto; }
    .homeVideo .videoIntro a{ margin: 20px auto;}
    .homeVideo .videoImg{ width: 58%;}
    .homeVideo .videoIntro p{ line-height: 28px; max-height: 56px;}
}
@media screen and (max-width:414px){
    .homeVideo .videoIntro{ width: 100%; }
    .homeVideo .videoImg{ width: 100%;}
    .homeVideo .videoImg a i.iconfont{ font-size: 36px;}
    .homeVideo .videoImg a i.iconfont{color:  #336899;  }
}


/* 首页案例 */
.homeCase{ padding: 50px 0;}
#caseSwiper{ width: 80%; padding: 10px 0; }
#caseSwiper .swiper-slide figure{ width: 250px; margin: 10px auto;}
#caseSwiper .swiper-slide figure img{ display: block; width: 100%; margin: 0 auto; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%;}
#caseSwiper .swiper-slide h5{ font-size: 16px; color: #888; line-height: 2; text-align: center; overflow: hidden;text-overflow: ellipsis; white-space: nowrap; }
#caseSwiper .swiper-slide .intro{ width: 60%; margin: 20px auto 10px;  padding: 20px 3%;   background-color: rgba(0,0,0, 0.6); border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px;  }
#caseSwiper .swiper-slide .intro p{line-height: 28px; max-height: 56px; font-size: 14px; color: #909090; overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;  }
#caseSwiper .swiper-button-next,#caseSwiper .swiper-button-prev{ background: none; width: auto; height: auto; outline: none;}
#caseSwiper .swiper-button-next .iconfont,#caseSwiper .swiper-button-prev .iconfont{ color: #fff; font-size: 30px; display: inline-block; padding: 6px 10px; transition: all .2s ease-out; -webkit-transition: all .2s ease-out; }
#caseSwiper .swiper-button-next:hover .iconfont,#caseSwiper .swiper-button-prev:hover .iconfont{ background-color: #336899; color: #333; transition: all .2s ease-out; -webkit-transition: all .2s ease-out;}
#caseSwiper .swiper-pagination-bullet{ width: 24px;height: 3px; opacity: 1; border: 1px solid #999; border-radius: 0; -webkit-border-raiuds:0; -moz-border-radius:0; -o-border-radius:0; }
#caseSwiper .swiper-pagination-bullet-active{ background-color: #336899;border: 1px solid #336899;}
#caseSwiper .swiper-pagination-bullets,#caseSwiper .swiper-pagination-custom,#caseSwiper .swiper-pagination-fraction{ bottom: 0px;}

@media screen and (max-width:900px){
    .homeCase{ padding: 35px 0;}
    #caseSwiper{ width: 100%; }
    #caseSwiper .swiper-slide .intro{ width: 100%; padding: 16px; box-sizing: border-box;}
    #caseSwiper .swiper-slide .intro p{ line-height: 26px; max-height: 52px; font-size: 13px;}
    #caseSwiper .swiper-button-next .iconfont,#caseSwiper .swiper-button-prev .iconfont{ padding: 4px 6px; font-size: 24px;}
}

/* 首页新闻 */
.homeNews{ padding: 50px 0;}
.homeNews .wapper{display: flex; display:-webkit-flex; flex-direction:row; flex-wrap: wrap; justify-content:center;align-items:flex-start; align-content: flex-start; }

.homeNews h2{ font-size: 18px; color: #000; line-height: 2; position: relative;}
.homeNews h2::after{ content: ""; width: 50px; height: 4px; position: absolute; bottom: -10px; left: 1em; background-color: #336899;}
.homeNews .newsLeft{ width: 400px; box-sizing: border-box; padding: 0 50px;}
.homeNews .newsLeft h4{ font-size: 14px; color: #000; line-height: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.homeNews .newsLeft:hover h4{ color: #336899; }
.homeNews .newsLeft .time{ font-size: 13px; color: #757575; line-height: 2;}
.homeNews .newsLeft .intro{ margin-top: 10px; color: #d8d8d8; font-size: 13px; line-height: 26px; max-height: 52px; overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.homeNews .newsLeft span{width: 80px; margin: 20px 0; color: #7a7a7a; text-align:center;  padding: 4px 30px; border: 1px solid rgba(255,255,255,.4); transition: all .4s ease-out 0s; -webkit-transition: all .4s ease-out 0s; -moz-transition: all .4s ease-out 0s;  }
.homeNews .newsLeft span:hover{background-color: #336899; transition: all .4s ease-out 0s; -webkit-transition: all .4s ease-out 0s; -moz-transition: all .4s ease-out 0s; }
.homeNews .newsRight{ width: 420px; }
.homeNews .newsRight div{ position: relative;padding: 0 30px;box-sizing: border-box; line-height: 38px; vertical-align: middle;}
.homeNews .newsRight div::before{content: ""; width: 0; height: 100%; position: absolute; top: 0;left: 0; z-index: 2;  transition: all .4s ease-out 0s; -webkit-transition: all .4s ease-out 0s; -moz-transition: all .4s ease-out 0s;  }
.homeNews .newsRight div a{ position: relative; z-index:3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #ccc;}
.homeNews .newsRight div:hover::before{width: 100%;  background-color: #336899; transition: all .4s ease-out 0s; -webkit-transition: all .4s ease-out 0s; -moz-transition: all .4s ease-out 0s; }
.homeNews .newsRight div span.time{ font-size: 13px; color: #757575; margin-right: 10px; }
.homeNews .newsRight div span.title{  font-size: 14px; color: #000; }
.homeNews .newsRight div:hover span.title{ color: #222;}