@charset "utf-8";
/* CSS Document */
.iconfont {font-family: "iconfont" !important; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
html,body{background:#ffffff; -webkit-user-select: none; user-select: none;}
.m_center{width:1200px; height: auto; margin: 0 auto; padding: 0; transition: all .5s ease 0s;}
img{width:auto; max-width: 100%; border: 0; transition: all .5s ease 0s;}

/**/
.top{width: 100%; height: 40px; line-height: 40px; background: #fafafa; overflow: hidden; font-size: 14px; color: #777777;}
.top .m_center div:first-child{float: left;}
.top .m_center div:last-child{float: right;}

.logonav-box{width: 1200px; height: 110px; margin: 0 auto; position: relative;}
.logo{width: 245px; height: 110px; float: left; display: flex; justify-content: flex-start; align-items: center;}
.logo img{width: auto; height: 55px;}

.nav-box{width: 620px; height: 110px; line-height:1; display: flex; justify-content: center; align-items: center; float: left; margin-left:60px;}
.nav-box a{display: block; margin: 0 18px; font-size: 18px; color: #222222;}
.nav-box a::after{content: ''; display: block; width: 0%; height: 3px; background: #3c90ef; margin-top: 10px; transition: all .6s ease 0s;}
.nav-box a.nuw,.nav-box a:hover{color: #3c90ef;}
.nav-box a.nuw::after,.nav-box a:hover::after{width: 100%;}
.tel{float: right; width: auto; height: 110px; display: flex; justify-content: flex-end; align-items: center; align-content: center; flex-wrap: wrap; font-size: 15px; color: #888888; line-height: 1;}
.tel i{margin-right: 5px; color: #999;}
.tel p{display: block; text-align: right; width: 100%; line-height: 1; font-size: 20px; color: #555555; margin-top: 5px;}


/* mobile nav 触发样式 */
.c_nav{width:40px; height:40px; background: none; border-radius: 5px; overflow: hidden; background: #2086ee; position: absolute; bottom: calc(50% - 20px); right:5vw; z-index: 99999; cursor: pointer; display:none; flex-direction:column; flex-wrap:wrap; justify-content:center; align-items:center; align-content:center; transition: all .4s ease 0s;}
.c_nav span{display: block; width:20px; height: 2px; background: #fff; margin:2px auto; overflow: hidden; transform:rotate(0deg); transition: all .4s ease 0s;}
.c_nuw{border-radius: 100%; border: 1px solid #2086ee; transform:rotate(360deg);}
.c_nuw span:nth-child(1){transform:rotateZ(45deg)translate(1px,0px); transform-origin: center; width:20px; margin: 0;}
.c_nuw span:nth-child(2){transform:rotateY(180deg); opacity: 0; display: none;}
.c_nuw span:nth-child(3){transform:rotateZ(-45deg)translate(1px,-1px); transform-origin: center; width:21px; margin: 0;}
body::after{content:' '; display: block; width: 100%; height: 100%; background: rgba(0,0,0,.6); overflow: hidden; position: fixed; top: 0; right:-100%; z-index: 55; transition: all .4s ease 0s;}
.body_bg{position: relative; overflow: hidden;}
.body_bg::after{ display: block; top: 0; right:0%;}


/**/
.baner_ng{width: 100%; height:500px; background: url(../images/bg.png) center bottom no-repeat; position: relative;}
.baner_ng::after{content: ''; display: block; width: 100%; height: 286px; background: #f2f2f2; position: absolute; bottom: 17px; left: 0; z-index: 1;}
.banner{width:1200px; height:500px; position: relative; z-index: 5; line-height: 1; text-transform: uppercase; margin:0 auto 35px; overflow: hidden;}
.banner .swiper-slide{position: relative; width: 100%; height: 100%; background-position:center; background-repeat: no-repeat; background-size: cover; line-height: 1;}
.banner .banner-a{width:100%; height:1px; position: absolute; left:0; bottom:24px; text-align: center; z-index: 10;}
.banner .banner-a .swiper-pagination-bullet{ width:55px; height:3px; border-radius:0; vertical-align: top; background:#fff; opacity: 1; margin:0 12px 0 0; position: relative; transition: all .4s ease 0s; }
.banner .banner-a .swiper-pagination-bullet:after{content: ""; width:0%; height: 3px; background: #2086ee; position: absolute; top: 0; left: 0; z-index: 2; transition: all .6s ease 0s;}
.banner .banner-a .swiper-pagination-bullet-active{ opacity: 1; background:none;}
.banner .banner-a .swiper-pagination-bullet-active:after{-webkit-animation:banner_w 4s linear 0s 1 normal ; animation:banner_w 4s linear 0s 1 normal ; width: 100%}
.banner-l,.banner-r{width: 40px; height: 40px; line-height: 40px; color: #fff; text-align: center; position: absolute; top: calc(50% - 20px); z-index: 99; border-radius: 5px; overflow: hidden; background: rgba(0,0,0,.3); cursor: pointer; display: none; }
.banner:hover .banner-l,.banner:hover .banner-r{display: block;}
.banner-l{left: 20px;}
.banner-r{right: 20px;}
/**/
.title{width:100%; height:auto; line-height: 1; color: #3c90ef; overflow: hidden; position: relative; margin: 50px auto 30px;}
.title span{  font-family:webfonta; font-size: 32px; color: #3c90ef; text-transform: uppercase;}
.title p{font-size: 18px; color: #3c90ef; margin-top:7px;}
.title p::before{content:''; display: inline-block; vertical-align: middle; width: 15px; height: 5px; background: #3c90ef; margin-right: 5px;}
.more{display: block; width:110px; height: 34px; line-height: 32px; border: 1px solid #cccccc; text-align: center; font-size: 12px; color: #888888; position: absolute; top: calc(50% - 17px); right: 20px; text-transform: uppercase; transition: all .5s ease 0s;}
.more::after{content: ''; display: block; width: 25px; height: 15px; background: url(../images/pg4.png) center center no-repeat; position: absolute; right:-20px; top: calc(50% - 7.5px); transition: all .5s ease 0s;}
.more:hover{color:#3c90ef;}
.more:hover::after{ -webkit-animation:more_r 1s linear 0s infinite alternate; nimation: more_r 1s linear 0s infinite alternate;}

.pro-tjbox{width: 1200px; height: auto; position: relative;}
.in_probox{width: 100%; height: auto; overflow: hidden;}
.in_probox-li{display: block; width: calc((100% - 60px) / 4); height: auto; background: #fff; border: 2px solid #f2f2f2; margin-right: 20px; border-radius: 15px; overflow: hidden; transition: all .7s;}
.in_probox-li-img{width: 100%; height: 215px; line-height: 1; overflow: hidden;}
.in_probox-li-img img{width: 100%; height: 100%; object-fit: contain;}
.in_probox-li-txt{width: 100%; height: auto; border-top: 1px solid #f2f2f2; padding: 15px; line-height: 1; overflow: hidden;}
.in_probox-li-txt div,.in_probox-li-txt p{width: 100%; height: 28px; line-height: 28px; overflow: hidden; white-space: nowrap; text-overflow:ellipsis; font-size: 18px; color: #222222;}
.in_probox-li-txt p{font-size: 15px; color: #777777;}
.in_probox-li:hover{border-color: #2086ee;}
.in_probox-l,.in_probox-r{width: 40px; height: 40px; line-height: 36px; color: #999; text-align: center; position: absolute; top: calc(50% - 20px); z-index: 99; border-radius: 100%; border: 2px solid #f2f2f2; overflow: hidden; background:#fff; cursor: pointer; transition: all 1s;}
.in_probox-l:hover,.in_probox-r:hover{color: #fff; border-color: #3c90ef; background: #3c90ef;}
.in_probox-l{left: -70px;}
.in_probox-r{right: -70px;}

.in-bg{width: 100%; height: auto; background: #f2f2f2; overflow: hidden; margin-top: 65px; padding-bottom: 40px;}
.tmcx-box{width: 1200px; height: auto; margin: 0 auto;}
.tmcx-li{width: calc((100% - 40px) / 3); height: 290px; float: left; margin: 0 20px 20px 0; position: relative; overflow: hidden;}
.tmcx-img,.tmcx-img img{width: 100%; height: 100%; object-fit: cover; overflow: hidden;}
.tmcx-txt{width: 100%; height: 50px; line-height: 50px; padding: 0 15px; background: rgba(0,0,0,.5); font-size: 16px; color: #fff; overflow: hidden; position: absolute; bottom: 0; left: 0; z-index: 5;}
.tmcx-txt i{width: 18px; height: 18px; line-height: 18px; color: #777; font-size: 14px; background: #fff; border-radius: 100%; float: right; margin-top:16px;}
.tmcx-li:nth-child(3),.tmcx-li:last-child{margin-right: 0;}
.tmcx-li:nth-child(4),.tmcx-li:nth-child(5),.tmcx-li:nth-child(6),.tmcx-li:nth-child(7){width: calc((100% - 60px) / 4); height: auto;}
.tmcx-li:nth-child(4) .tmcx-img,.tmcx-li:nth-child(5) .tmcx-img,.tmcx-li:nth-child(6) .tmcx-img,.tmcx-li:nth-child(7) .tmcx-img{width: 100%; height: 215px;}
.tmcx-li:nth-child(4) .tmcx-txt,.tmcx-li:nth-child(5) .tmcx-txt,.tmcx-li:nth-child(6) .tmcx-txt,.tmcx-li:nth-child(7) .tmcx-txt{position: inherit; background: #fff; color: #333;}
.tmcx-li:hover .tmcx-txt{ background: #3c90ef; color: #fff;}

.in-about{width: 550px; height: auto; float: left; overflow: hidden;}
.in-about-box{}
.in-about-img{width: 100%; height: 250px; line-height: 1; border-radius: 15px; overflow: hidden;}
.in-about-txt{width: 100%; height: calc(28px * 6); line-height: 28px; color: #555555; font-size: 16px; display: -webkit-box;  -webkit-box-orient: vertical; -webkit-line-clamp:6; overflow: hidden; margin-top: 18px;}

.in-news{float: right; width: 600px; height: auto; overflow: hidden;}
.in-news-li{display: flex; width: 100%; height: 125px; line-height: 1; overflow: hidden; margin-bottom: 25px; overflow: hidden;}
.in-news-li .in-news-img{width: 125px; min-width: 125px; max-width: 125px; height: 125px; overflow: hidden; border-radius: 10px;}
.in-news-img img{width: 100%; height: 100%; object-fit: cover;}
.in-news-txt{flex: 1; padding-left: 25px; line-height: 1; width:calc(100% - 125px)}
.in-news-txt p{line-height: 24px; font-size: 16px; color: #888888;}
.in-news-txt p i{margin-right: 5px;}
.in-news-txt h2{width: 100%; height: 40px; line-height: 40px; font-size: 22px; color: #222222; overflow: hidden; white-space: nowrap; text-overflow:ellipsis; margin: 7px 0;}
.in-news-txt div{width: 100%; height: calc(24px * 2); line-height: 24px; color: #777777; font-size: 16px; display: -webkit-box;  -webkit-box-orient: vertical; -webkit-line-clamp:2; overflow: hidden;}
.in-news-li:hover .in-news-txt h2{ color: #3c90ef;}

.foot{width: 100%; height:auto; background: #333333; overflow: hidden; margin-top: 75px; padding-top: 30px; overflow: hidden;}
.foot-copy{width: 100%; height: auto; background: #222222; padding: 12px 5%; margin-top: 35px; text-align:center; font-size: 14px; color: rgba(255, 255, 255, .6);}
.foot-nav,.foot-tel{float: left; width: 340px; height: auto; border-left: 1px solid #666666; position: relative; line-height: 1; font-size: 16px; color: #fff; padding-left: 18px;}
.foot-nav::before,.foot-tel::before{content: ''; width: 3px; height: 10px; background: #666; position: absolute; top: 0; left: -2px;}
.foot-nav p{margin-bottom: 10px;}
.foot-nav p a{color: #fff;}
.foot-tel h2{line-height: 1; margin-bottom: 10px; font-size: 16px;}
.foot-tel p{line-height: 1; margin-bottom: 10px;  color: rgba(255, 255, 255, .8);}
.foot-copy a{ color: rgba(255, 255, 255, .6)}
.foot-ewm{min-width: 291px; height: auto; padding: 15px; background: #3a3a3a; float: right; display: flex; justify-content: flex-start; align-items: center;}
.foot-ewm-img,.foot-ewm-img img{width: 100px; height: 100px; object-fit: cover; overflow: hidden;}
.foot-ewm-txt{text-align: center; color: #fff; line-height: 28px; font-size: 16px; padding-left: 15px;}

.pg_center{width:1200px; height: auto; margin: 40px auto 0; padding: 0; transition: all .5s ease 0s;}
.pg-left{width: 280px; height: auto; float: left;}
.pg_leftnav{width: 100%; height: auto; margin-bottom:30px;}
.pg_title_a{width: 100%; height: 90px; background: url(../images/bga.png) left center no-repeat; line-height: 1; font-size: 28px; color: #fff; font-weight: 400; text-align: center; display: flex; align-items: center; justify-content: center; align-content: center; flex-wrap: wrap; flex-flow: column;}
.pg_title_a p{font-size: 0; color:rgba(255, 255, 255, .6); line-height: 1; margin-top: 8px; text-transform: uppercase; display: flex; align-items: center; justify-content: center;}
.pg_title_a p span{font-size: 16px; margin: 0 25px;}
.pg_title_a p::after,.pg_title_a p::before{content: ''; display:inline-block; vertical-align: middle; width: 20px; height: 1px; background: rgba(255, 255, 255, .5);}
.pg_leftnavul{padding: 0 10px; border: 1px solid #e4e4e4; border-top: none;}
.pg_leftnavul div{border-bottom: 1px solid #e4e4e4; padding: 10px 0;}
.pg_leftnavul div a{display: block; width: 100%; height:42px; line-height: 42px; background: url(../images/icon3.png) 20px center no-repeat; padding-left: 35px; font-size: 16px; color: #525252; transition: all .5s; text-align: left;}
.pg_leftnavul div a:hover,.pg_leftnavul .pg_nuw a{background: url(../images/icon2.png) 20px center no-repeat #3c90ef; color: #fff; border-radius: 5px;}
.pg_leftnavul div:last-child{border-bottom: none;}

.pg_leftcontact{width: 100%; height: auto; border: 1px solid #e4e4e4; padding: 0 10px;}
.pg_leftcontact_a{width: 100%; height: 70px; line-height: 70px; border-bottom: 1px solid #e4e4e4; font-size: 22px; font-weight: bold; color: #3c90ef;}
.pg_leftcontact_a span{font-size:16px; color: #999; margin-left: 5px; font-weight: 400; text-transform: uppercase; vertical-align:baseline;}
.pg_leftcontact_b{margin-top: 15px;}
.pg_leftcontact_ba{font-size: 18px; color: #666666; font-weight: bold; margin: 2px 0 15px; line-height: 1;}
.pg_leftcontact_bb{width: 100%; height: auto; background: url(../images/icon1.png) 10px center no-repeat #f8f8f8; line-height: 1; font-size: 14px; color: #3c90ef; padding: 15px 0 15px 60px;}
.pg_leftcontact_bb p{font-size: 22px; font-weight: bold; margin-top: 6px;}
.pg_leftcontact_bc{font-size: 14px; line-height: 30px; color: #666666; padding: 15px 0;}
.pg_leftcontact_bc span{font-weight: bold;}
.pc_leftcontact{display: block;}
.mb_leftcontact{display: none;}

.pg_right{width: 897px; height: auto; overflow: hidden; float: right;}
.pg_right_title{width: 100%; height:50px; line-height: 50px; border-left: 4px solid #3c90ef; background: #f1f1f1; padding:0 15px; font-size: 18px; color: #333; margin-bottom: 15px;}
.pg_right_title p{float: right; font-size: 14px; color: #818181;}
.pg_right_title p i{margin: 0 5px; font-size: 12px;}
.pg_right_title p a{color: #818181;}
.pg_right_title p a:nth-last-child(1),.pg_right_title p i:nth-last-child(2){color: #3c90ef;}
.pg_right_bk{width: 100%; height: auto; min-height: 500px; border: 1px solid #e4e4e4; padding: 25px;}
.pg-cen{width: 100%; height: auto; min-height: 500px;}


.pg_probox-li{display: block; width: calc((100% - 64px) / 3); height: auto; background: #fff; border: 2px solid #f2f2f2; margin-right: 20px; border-radius: 15px; overflow: hidden; transition: all .7s; float: left; margin-bottom: 23px;}
.pg_probox-li-img{width: 100%; height: 215px; line-height: 1; overflow: hidden;}
.pg_probox-li-img img{width: 100%; height: 100%; object-fit: contain;}
.pg_probox-li-txt{width: 100%; height: auto; border-top: 1px solid #f2f2f2; padding: 15px; line-height: 1; overflow: hidden;}
.pg_probox-li-txt div,.pg_probox-li-txt p{width: 100%; height: 28px; line-height: 28px; overflow: hidden; white-space: nowrap; text-overflow:ellipsis; font-size: 18px; color: #222222;}
.pg_probox-li-txt p{font-size: 15px; color: #777777;}
.pg_probox-li:hover{border-color: #2086ee;}
.pg_probox-li:nth-child(3n){margin-right: 0;}

.show-pro-title{width: 100%; height: auto; line-height: 1.6; padding:0 0 25px; border-bottom: 1px solid #e2e2e2; font-size: 18px; color: #555; text-align: left;}
.show-pro-img{width: 100%; height: 490px; line-height: 1; position: relative; overflow: hidden; margin: 25px 0;}
.show-pro-img .swiper-slide{width: 10%; height: 100%; background: #f2f2f2; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center;}
.show-pro-img .swiper-slide img{max-width: 100%; max-height: 100%; object-fit: contain;}
.show-title-t{width: 100%; height: 50px; background: #e4f0f6; margin-bottom:25px; overflow: hidden;}
.show-title-t span{display: block; width: 145px; height: 50px; line-height: 50px; background: #3c90ef; font-size: 16px; color:#fff; overflow: hidden; text-align: center;}
.show-txt{font-size: 14px; line-height: 1.6; color: #555;}
.show-txt img{max-width: 100% !important; height: auto !important;}

.p20{padding: 20px;}
.pg_zryli{width: 198px; height: auto; float: left; margin: 0 21px 15px 0;}
.pg_zryli div{width: 100%; height:264px; padding: 20px; border: 1px solid #e4e4e4; display:flex; flex-direction:column; flex-wrap:wrap; justify-content:center; align-items:center; align-content:center; transition: all .5s;}
.pg_zryli div img{width: auto; max-width: 100%; max-height: 100%; object-fit: contain;}
.pg_zryli p{width: 100%; height: 40px; line-height: 40px; text-align: center; font-size: 16px; transition: all .5s;}
.pg_zryli:hover div{border-color: #3c90ef;}
.pg_zryli:hover p{background: #3c90ef; color: #fff;}
.pg_zryli:nth-child(4n){margin-right: 0;}

.map{margin-top: 25px;}
.show-news-title{font-size: 20px; line-height: 1.75; color: #525252; text-align: center;}
.s_title{width: 100%; height: auto; line-height:30px; padding:10px 15px; background: #f2f2f2; margin:25px 0; font-size: 14px; color: #888; text-align: center; overflow: hidden;}
.s_title span{margin: 0 15px;}


.pg_newsli{width: 100%; height: auto; padding-bottom: 25px; border-bottom: 1px solid #e4e4e4; margin-bottom: 25px; display: flex;}
.pg_newsliimg{width: 330px; min-width: 286px; height: 180px; overflow: hidden;}
.pg_newsliimg img{width: 100%; height: 100%; object-fit: cover;}
.pg_newslitxt{flex: 1; height: auto; line-height: 1; padding-left: 25px;}
.pg_newslitxt h2{font-size: 16px; font-weight: bold; height: 42px; line-height: 42px; color: #525252; transition: all .5s;}
.pg_newslitxt div{font-size: 14px; line-height: 24px; color: #7d7d7d; height: calc(24px * 4); overflow: hidden; margin-bottom: 20px; display: -webkit-box;  -webkit-box-orient: vertical; -webkit-line-clamp:4;}
.pg_newslitxt p{font-size: 14px; color: #3c90ef;}
.pg_newslitxt p span{color: #7d7d7d;}
.pg_newslitxt p em{display: block; font-style: normal; width: 80px; height: 27px; line-height: 27px; text-align: center; border-radius: 15.5px; background: #3c90ef; font-size: 12px; color: #fff; transition: all .5s; text-transform: uppercase; float: right;}
.pg_newsli:hover h2{color: #3c90ef;}
.pg_newsli:hover .pg_newslitxt p em{background: #3c90ef; color: #fff;}


/***/
@keyframes more_r {
  from {
      right:-10px;
  }
  to {
      right:-20x;
  }
}
.banner_w {
  animation-name: more_r;
}