@import url(./inner_sidebar.css);

/* ==========================================================================
   全局
   ========================================================================== */
.content {
  min-height: 300px;
  padding: .4rem 0;
}
footer{box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.12);}

.content img {
  max-width: 100%;
}

.sub-banner { position: relative;
  --bannerH:580px;
  height: var(--bannerH);
}

.bgtitle2 {
  color: rgb(255, 255, 255); position: absolute;
  font-size: .64rem; top: calc(50% - .1rem);text-align: center; width: 100%;
  font-weight: 700;  text-transform:Uppercase;
}




@media only screen and (max-width:1536px) {
  .sub-banner {
    height: calc(var(--bannerH) / 1.25);
  }
}

@media only screen and (max-width:1440px) {
  .sub-banner {
    height: calc(var(--bannerH) * 0.75);
  }
}

@media only screen and (max-width:1280px) {
  .sub-banner {
    height: calc(var(--bannerH) / 1.5);
  }
}

@media only screen and (max-width:1024px) {
  .sub-banner {
    height: calc(var(--bannerH) / 1.875);
  }
}

@media only screen and (max-width:960px) {
  .sub-banner {
    height: calc(var(--bannerH) / 2);
  }
}

@media only screen and (max-width:768px) {
  .sub-banner {
    height: calc(var(--bannerH) / 2.5);
  }
}



.breadcrumb {
  height: .8rem; line-height:.8rem ;
  align-items: center;
  font-size: 14px;
  font-weight: 400;
  color: rgb(80, 80, 80); 
}
.breadcrumb-con{margin-top: -.8rem;z-index: 66;width: 5rem;position: relative;z-index: 99; }

.breadcrumb img {
  margin-right: 10px;
}

.breadcrumb a {
  color: rgb(80, 80, 80);
}

.breadcrumb a:hover {
  color: var(--primary);
}

@media only screen and (max-width:1440px) {
  .breadcrumb-con{margin-top:0;}
}

@media only screen and (max-width:768px) {
  .breadcrumb {
    display: none;
  }
}

.inner_area {
  padding: .35rem 0;
}

.inner_title {
  color: rgb(0, 0, 0);
  font-size: .48rem;
  font-weight: 700;
}

.inner-nav {margin-bottom:.6rem;}
.inner-nav li{display: inline-block; line-height: 80px;margin-right: .2rem; font-size: .18rem;}
.inner-nav li.active a{
  color: var(--primary);
  font-weight: bold;
}

.inner-nav li.active {
  border-bottom: 3px solid var(--primary);
}

/* ==========================================================================
   Production Base
   ========================================================================== */
   .probase_main{
    padding:.6rem; background: #fff;    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);margin-bottom: .6rem;
    box-shadow: 0px 0px 19px 0px rgba(0, 0, 0, 0.05);
    transition: all .3s; background: linear-gradient(180.00deg, rgb(255,255, 255), rgb(231,234, 240) 100%);
  }  
  
  .probase_left {
    width: calc(48% - .18rem); padding:.6rem 0 0 .6rem; 
  }
  
  .probase_right {
    width: 50%;
    padding: .6rem 0 0 .6rem; /*0409修改*/
  }
  
  .probase_intro {
    color: rgb(51, 51, 51);
    font-size: .16rem;
    font-weight: 300;
    line-height: 200%;
  }

  .probase_intro .tit{font-size: .24rem; color: #0D357F; font-weight:700;}

  .probase_intro .location{font-size: .20rem; margin:.2rem 0;font-weight:400;}
  .probase_intro .txt{margin-bottom: .2rem;}
  
  .probase_right .pic {
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  }
  
  .num_list02 {
    margin-top: -0.2rem;
  }
  
  .num_list02 li {
    width: 50%;
    box-sizing: border-box;
    margin-top: .2rem;
  }
  
  .num_list02  .number {
    color: rgb(28, 69, 152);
    font-family: "roboto";
    font-size: .46rem;
    font-weight: 700;
    line-height: 1.7;
    align-items: baseline;
  }
  
  .num_list02 .num_unit {
    color: rgb(28, 69, 152);
    font-size: 13px;
    font-weight: 400;
    margin-left: 5px;
  }
  
  .num_list02 .num_info {
    color: rgb(51, 51, 51);
    font-size: .14rem;
    font-weight: 400;
  }
  
  .about_swiper {
    position: relative;
  }
  
  .about_swiper .swiper-button-next::after,
  .about_swiper .swiper-button-prev::after {
    display: none;
  }
  
  .about_swiper .swiper-button-next {
    background: url(../images/about_right.png) no-repeat center;
    background-size: contain;
    width: .68rem;
    height: .68rem;
    right: 0;
    margin-top:-.34rem;
  }
  
  .about_swiper .swiper-button-prev {
    background: url(../images/about_left.png) no-repeat center;
    background-size: contain;
    width: .68rem;
    height: .68rem;
    left: 0;
    margin-top:-.34rem;
  }


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

  }
  
  @media only screen and (max-width:1440px) {
    .probase_left{padding:0;}
  }
  
  @media only screen and (max-width:1200px) {

    

  }
  
  @media only screen and (max-width:920px) {

   
    .probase_right,.probase_left{width: 100%;padding:0;}
    .probase_left{margin-bottom:.3rem;}
  
  }
  
  @media only screen and (max-width:768px) {


  }
  
  
  @media only screen and (max-width:500px) {

    
  }



  /* ==========================================================================
  Bestory  Honors
   ========================================================================== */
  .honor{padding:1rem;background: url(../images/honorbg.jpeg) no-repeat center; background-size: cover;margin-bottom: .6rem;}

   
   .honor_left {
    width:33%;
  }
  
  .honor_right {
    width: 60%;
  }

  .honor_left .txt{
    color: rgb(255, 255, 255);
    font-size: .16rem;
    font-weight: 300;
    line-height: 180%;
  }

   .honor_swiper {
    position: relative;
  }

  .honor_swiper::before {
    content: "";
    position: absolute;
    right:2rem;
    bottom:-.6rem;
    width:3rem;
    height:1px;
    background:rgb(255, 255, 255);
}
  
  .honor_swiper .swiper-button-next::after,
  .honor_swiper .swiper-button-prev::after {
    display: none;
  }
  .honor_swiper .swiper-button-next, .honor_swiper .swiper-button-prev {top: auto;bottom:-.9rem;}
  .honor_swiper .swiper-button-next {
    background: url(../images/about_right02.png) no-repeat center;
    background-size: contain;
    width: .68rem;
    height: .68rem;
    left:auto; right: 0;
  }
  
  .honor_swiper .swiper-button-prev {
    background: url(../images/about_left02.png) no-repeat center;
    background-size: contain;
    width: .68rem;
    height: .68rem;
    left:auto; right:.8rem;
  }


  @media only screen and (max-width:1600px) {
    .honor{padding:1rem .6rem;}
    
  }
  
  @media only screen and (max-width:1440px) {
    .honor_swiper .swiper-button-next { left:50%;  margin-left:.3rem;   }
    
    .honor_swiper .swiper-button-prev { left:50%;  margin-left:-.9rem;   }
    .honor_swiper::before{display: none;}
  }
  
  @media only screen and (max-width:1200px) {

    

  }
  
  @media only screen and (max-width:920px) {

  .honor_left ,.honor_right{width: 100%;float: none;}
  .honor_right{margin-top: .2rem;}

  }
  
  @media only screen and (max-width:768px) {


  }
  
  
  @media only screen and (max-width:500px) {

    
  }


/* ==========================================================================
   historyfirst
   ========================================================================== */
  .History{padding:.5rem 0 1rem 0;}
  .History_area{position: relative;}
  .History_area::before {
    content: "";
    position: absolute;
    left:30%;
    top:0; margin-left:.52rem;
    width:1px;
    height:91%;
    background:rgb(199, 206, 219);
}

  .historyfirst{ background: #F5F7F9;padding:.5rem 1.5rem;}
  .hisroryrow{margin:.3rem 0;}
  .hisroryrow .year{ width:30%;color: rgb(51, 51, 51);height:1.5rem; line-height: 1.5rem; position: relative; font-size: .9rem; font-weight: 700;}
  .hisroryrow .year::before {border-radius:50%; 
    content: "";
    position: absolute;
    right:0;
    top:50%; margin-top: -8px;
    width:15px;
    height:15px;
    background:rgb(13, 53, 187);
}
  .hisroryrow .event{ width:60%; height:1.5rem;display: flex; align-items: center;}
  .hisroryrow .event .txt{color: rgb(51, 51, 51);line-height: 150%; font-size: .2rem; font-weight: 300;}

  .historysecond{ padding:.5rem 1.5rem;background: url(../images/historybg.jpeg) no-repeat center;background-size: cover;}

    .historysecond.thirdbg{background: url(../images/historybg02.jpeg) no-repeat center;background-size: cover;}
  

    .historysecond .year::before { background:rgb(255, 255, 255);  }
    .historysecond .year,.historysecond .event .txt{color:rgb(255, 255, 255); }



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

      
      
    }
    
    @media only screen and (max-width:1440px) {

      .hisroryrow .year{ font-size: .6rem;}

    }
    
    @media only screen and (max-width:1200px) {
  
      
  
    }
    
    @media only screen and (max-width:920px) {
 


    }
    
    @media only screen and (max-width:768px) {
      .historyfirst,.historysecond {padding: .5rem;}
      .History_area::before{ margin-left: .1rem;}
  
    }
    
    
    @media only screen and (max-width:500px) {
      .hisroryrow .year {font-size: .48rem; float: none;height:auto; line-height:2;}
      .hisroryrow .event{width: 100%;float: left; height: auto;}
      .hisroryrow .year::before,.History_area::before{display: none;}
      
      
    }
  
  
/* ==========================================================================
   news
   ========================================================================== */

.newsfirst{padding:.4rem;background: url(../images/newsbg.jpeg) no-repeat;  background-size: cover;}

.newssecond{margin:.4rem 0;}



   .news_list {
    margin-bottom: .5rem;
  }
  
  .news_list li{margin-bottom: .7rem;}
  .news_box {
    cursor: pointer;    
    transition: all .3s;background:rgb(245, 247, 249); 
  }
  
  .news_box:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  }
  
  .news_left {
    width: 2.4rem;
  }
  
  .news_right {
    width: calc(100% - 3.36rem);
  }
  

  .news_left .date {
    width: 2.4rem;height: 2.4rem; background: url(../images/newsdate.jpeg) no-repeat;  background-size: cover; text-align: center;color: rgb(255, 255, 255);
    padding: .6rem 0;
  }
  .news_left .date .year{ font-size: .58rem; font-weight: 400; line-height: .58rem; }
  .news_left .date .month {font-size: .50rem; font-weight: 400;line-height: .50rem; }
  
  .news_box .more a {
    position: relative;
    color: rgb(4, 36,94);
    font-size: .16rem;
    width: 1.25rem; transition: all .3s;
}

.news_box .more .icon { margin-left: .2rem; transition: all .3s;}

.news_box:hover .more a{ margin-left: .1rem;}
.news_box:hover .more .icon { margin-left: .3rem;}  
.news_info {padding-top: .7rem;}
.news_box .date02{display: none;}

.news_box .newstit{color: rgb(51, 51,51);  font-size: .24rem;margin-bottom: .2rem;}
  
  

.loadmore-row {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.12rem;
}

.loadmore {
  color:#193279;
  font-size: 0.18rem;
  background-image: url("../images/icons/MouseSimple.png");
  background-repeat: no-repeat;
  background-position: 0 50%;
  background-size: 0.255rem auto;
  padding-left: 0.4rem;
}

.load-more-row {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.12rem;
}

.load-more {
  color:#193279;text-transform:Uppercase;
  font-size: 0.18rem;
  background-image: url("../images/MouseSimple.png");
  background-repeat: no-repeat;
  background-position: 0 50%;
  background-size: 0.195rem auto;
  padding-left: 0.4rem;
}


@media only screen and (max-width:1600px) {      
      
}

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

}

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


}

@media only screen and (max-width:920px) {
  .news_left .date .year { font-size: .48rem;}
  .news_left .date .month{font-size: .42rem;}
}




@media only screen and (max-width: 768px) {
  
  .loadmore-row {
    padding: 0 0 8px;
  }

  .loadmore {
    font-size: 14px;
    background-size: 16px;
    padding-left: 32px;
  }

  .load-more-row {
    padding: 32px 12px 12px;
  }

  .load-more {
    font-size: 16px;
    background-size: 16px auto;
    padding-left: 32px;
  }
}

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

  .news_right{width: 100%; float: none;}
  .news_box{padding:.4rem;}
  .news_left{display: none;}
  .news_box .date02{display: block;}
  .news_info{padding-top:0;}
}
  
  
  /* ==========================================================================
     新闻详情
     ========================================================================== */
  .news_details {
    padding: .2rem 0;
  }
  
  .nd_left {
    width: calc(100% - 5.5rem);
    float: left;
  }
  
  .nd_right {
    float: right;
    width: 4.5rem;
    box-sizing: border-box;
  }
  
  .nd_area { padding-bottom: .3rem; border-bottom: 1px solid #e5e8ef; box-sizing: border-box;  }  
  .nd_title { color: rgb(0, 0, 0); font-size: .3rem; font-weight: 400;  }
  
  .nd_date {
    font-size: .16rem;
    color:#999;
    margin: .1rem 0;
  }
  
  .nd_main {
    font-size: .16rem;
    font-weight: 400;
    color: rgb(85, 85, 85);
    line-height: 2;
    padding: .5rem 0;
    box-sizing: border-box;
  }
  
  .nd_main img {
    margin: .4rem 0;
  }
  
  .nd_toolbar {

    padding: .4rem 0;
    align-items: center;
    justify-content: space-between;
  }

  
  
  .tool_left {
    width: calc(50% - .2rem);  height:1rem; line-height: 1rem;
    background: linear-gradient(-45.00deg, rgb(41,102, 203), rgb(17,47, 116) 100%);
  }
  .tool_left a{display: block;padding-left:.8rem; color: #fff;font-size: .24rem;    font-weight: 400;transition: all .3s;}
  .tool_left img{margin-right: .1rem;}
  .tool_left a:hover{padding-left:.6rem;}
  
  .tool_right {
    width: calc(50% - .2rem);  text-align: right;height:1rem; line-height: 1rem;
    background: linear-gradient(45.00deg, rgb(41,102, 203), rgb(17,47, 116) 100%);
  }

  .tool_right a{display: block;padding-right:.8rem; color: #fff;font-size: .24rem;    font-weight: 400;transition: all .3s;}
  .tool_right img{margin-left: .1rem;}
  .tool_right a:hover{padding-right:.6rem;}
  
  .tool_toggle {
    font-size: .16rem;
    font-weight: 400;
    line-height: 2;
    align-items: center;
  }
  
  .tool_toggle span {
    flex-shrink: 0;
  }
  
  .tool_toggle a {
    color: rgb(51, 51, 51);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  
  .tool_toggle a:hover {
    color: var(--primary);
  }
  
  .back_btn {
    width: 1.58rem;
    height: .54rem;
    font-size: .18rem;
    color: #fff;
    border-radius: .05rem;
    background: linear-gradient(90.00deg, rgb(6, 41, 73), rgba(6, 41, 73, 0.6) 100%);
  }
  
  .back_btn:hover {
    color: #fff;
  }
  
  .top_btn {
    margin-left: .2rem;
  }
  
  
  
  /* ———————————————— 右边列表 ———————————————— */
  .gdtj {
    border-radius: .08rem;
    background: linear-gradient(90.00deg, rgb(6, 41, 73), rgba(6, 41, 73, 0.8) 100%);
    height: .7rem;
    width: 100%;
    overflow: hidden;
    color: rgb(255, 255, 255);
    font-size: .24rem;
    font-weight: 400;
    align-items: center;
    justify-content: center;
  }
  
  .gdtj img {
    margin: 0 .25rem 0 .4rem;
  }
  
  .gdtj_list {
   
    
  }
  
  .gdtj_list li {
    margin-bottom: .2rem;
  }
  
  .gdtj_box{padding:.4rem; background: #F5F7F9;}
  .gdtj_box .more a {
    position: relative;
    color: rgb(4, 36,94);
    font-size: .16rem;
    width: 1.25rem; transition: all .3s;
}

.gdtj_box .more .icon { margin-left: .2rem; transition: all .3s;}

.gdtj_box:hover .more a{ margin-left: .1rem;}
.gdtj_box:hover .more .icon { margin-left: .3rem;}  


  .gdtj_date {
    color: rgb(85, 85, 85);
    font-size: .16rem;
    line-height: .32rem;
    position: relative;
  }
  
 
  
  .gdtj_title {
    color:#323232;
    font-size: .18rem; margin:.1rem 0;
    overflow: hidden;
    
  }
  
  .gdtj_box:hover .gdtj_title {
    color: var(--primary);
  }
  
  
  @media only screen and (max-width: 920px) {
    .nd_right {
      display: none;
    }
  
    .nd_left {
      width: 100%;
    }
  }
  
  @media only screen and (max-width: 768px) {
  
    .tool_toggle,
    .nd_main,
    .nd_date {
      font-size: 12px;
    }
  
  
  }
  
  @media only screen and (max-width: 500px) {
    .nd_main {
      padding: 20px 0;
      line-height: 1.5;
    }
  
    
  
    .tool_toggle {
      line-height: 2;
    }
  
    .nd_title {
      font-size: 14px;
    }
  }
  
  


/* ==========================================================================
   人才招聘
   ========================================================================== */
   .careersfirst { background: url(../images/jobbg.jpeg) no-repeat;  background-size: cover;padding:1rem 0;}

.careersarea .pic{}


.careersarea .talent-box-left {  box-sizing: border-box;  width: 50%;  padding-right: 0.92rem;}

.careersarea .talent-box-right {  box-sizing: border-box;  width: 50%;  display: flex;  align-items: center;}


.talent-info {  font-size: 0.18rem; color: #666;  line-height: 2;  padding: 0 0.8rem;}
.careersarea {margin-top: .4rem;}
.quote:before,
.quote::after {

  font-family: Arial, Helvetica, sans-serif;
  font-weight: 900;
  color: #ddd;
  font-size: .8rem;
  display: block;
  line-height:.8rem;
}

.quote:before {
  /* content: "\f10d"; */
  content: "\201c";
}

.quote::after {
  /* content: "\f10e"; */
  content: "\201d";
  text-align: right;
}

@media only screen and (max-width: 767px) {
  .talent-box {
    padding: 0;
  }

  .talent-box .talent-box-left {
    width: 100%;
    padding-right: 0;
    margin-bottom: 12px;
  }

  .talent-box .talent-box-right {
    width: 100%;
    padding-left: 0;
  }

  .r1 .mod-bd {
    padding-top: 8px;
  }

  .talent-info {
    font-size: 14px;
    padding: 0 20px;
  }

  .quote:before,
  .quote::after {
    font-size: 48px;
  }
}

.career_first {
  padding: .75rem 0 .7rem;
}

.welfare {
  border-radius: .08rem;
  margin: .5rem 0 0;
  background: url(../images/welfare.png) no-repeat center;
  background-size: cover;
  padding: .7rem 1.35rem;
}

.wel_title {
  color: rgb(255, 255, 255);
  font-size: .24rem;
  font-weight: 700;
  margin-right: .85rem;
}

.wel_list li {
  color: rgb(255, 255, 255);
  font-size: .18rem;
  line-height: 2;
  font-weight: 400;
}


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

}

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

}

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

}

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


}

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

  .careersarea .talent-box-left,.careersarea .talent-box-right{width: 100%; float: none; padding-right:0;}
  .careersarea .talent-box-right{margin-top: .2rem;}
  .careersfirst{padding: .5rem 0;}
  .careersarea{margin-top:0;}

}


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

}



/* ———————————————————— 招聘岗位 ———————————————————— */
.job_main {
  padding: .4rem 0 .9rem;
}

.job_list {
  width: 100%;
  height: .9rem;
  align-items: center;
  padding: 0 .45rem;
  background: linear-gradient(-45.00deg, rgb(41, 102, 203), rgb(17, 47, 116) 100%);
  box-sizing: border-box;
  justify-content: space-between;
}

.job_list li {
  color: rgb(255, 255, 255);
  font-size: .18rem;
  font-weight: 700;
}

.job_list li:nth-child(1) {
  width: 30%;
}

.job_list li:nth-child(2) {
  width: 15%;
  text-align: center;
}

.job_list li:nth-child(3) {
  width: 15%;
  text-align: center;
}

.job_list li:nth-child(4) {
  width: 15%;
  text-align: center;
}

.job_list li:nth-child(5) {
  width: 15%;
  text-align: center;
}


.caree_box {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: .9rem;
  cursor: pointer;
  padding: 0 .45rem;
  border-bottom: 1px solid rgb(220, 220, 220);
  background: linear-gradient( rgb(255, 255, 255), rgb(218, 231, 255) 100%);
  box-sizing: border-box;
}

.caree_box.on {
  border-color: transparent;
}

.size {
  color: rgb(51, 51, 51);
  font-size: .16rem;
  
  text-align: center;
}
.sizebold{font-weight: 700;}

.job_name {
  width: 30%;
  text-align: left;
  align-items: center
}

.job_place,
.job_date,
.fsjl_box,
.fsjl_box,
.job_num {
  width: 15%;
}

.job_fsjl {
  margin: 0 auto;
  width: 1.2rem;
  height: .32rem;
  border-radius: .08rem;
  background: rgb(28, 69, 152);
  color: rgb(255, 255, 255);
  font-size: .14rem;
  font-weight: 400;
}

.job_fsjl:hover {
  color: #fff;
}

.careerMenu .nwms {
  display: none;
  border-bottom: 1px solid rgb(220, 220, 220);
  box-sizing: border-box;
}

.careerMenu .nwms .warp {

  padding: .4rem .45rem;
  box-sizing: border-box;
  border-radius: .08rem;
  background: rgb(246, 246, 247);
}

.careerMenu .nwms .warp {
  font-size: .16rem;
  font-weight: 400;
  color: rgb(51, 51, 51);
  line-height: 2;
}

.demand {
  font-size: .16rem;
  font-weight: bold;
  color: rgb(28, 69, 152);
  line-height: 2;
}

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

  .job_list li {
    font-size: 12px;
  }

  .job_list {
    padding: 0 10px;
  }

  .job_list li:nth-child(2),
  .job_list li:nth-child(3),
  .job_list li:nth-child(4) {
    display: none;
  }

  .job_list li:nth-child(1) {
    width: 70%;
  }

  .job_list li:nth-child(5) {
    width: 30%;
  }

  .caree_box {
    padding: 0 10px;
  }

  .job_place,
  .job_date,
  .job_num {
    display: none;
  }

  .fsjl_box {
    width: 30%;
  }

  .job_name {
    width: 70%;
    font-size: 12px;
  }

  .job_fsjl {
    font-size: 10px;
    height: 24px;
    width: 90%;
  }

  .careerMenu .nwms .warp {
    font-size: 12px;
    padding: 10px;
    margin: 0 10px;
  }

  .demand {
    font-size: 12px;
  }

  .welfare {
    padding: .7rem 20px;
  }

  .wel_list li {
    font-size: 12px;
  }

  .wel_title {
    font-size: 14px;
  }
}





/* ==========================================================================
   联系我们
   ========================================================================== */
   .contactarea{
    padding: .8rem 1.2rem;
  background: url(../images/contactbg.jpeg) no-repeat;
  background-size: cover;
  }
  .contactarea li{margin: .2rem 0; justify-content: space-between;
    align-items: center;}

  .contactarea li .pic,.contactarea li .pic img{width: .8rem;}
  .contactarea li .txt {color: #fff;margin-left: .3rem;}
  .contactarea li .txt h3{ font-size: .24rem; font-weight: 400; }
  .contactarea li .txt p{ font-size: .16rem; font-weight: 400; }
  .contactarea .left{width: 35%; border-right: 1px solid rgba(255, 255, 255, 0.2);}
  .contactarea .right{width: 58%; }
  

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

    .contactarea li .txt{width: calc(100% - 130px);}


  }
  
  @media only screen and (max-width:1440px) {
  
  }
  
  @media only screen and (max-width:1200px) {
  
  }
  
  @media only screen and (max-width:920px) {
  
  
  }
  
  @media only screen and (max-width:768px) {
  
    .contactarea .left,.contactarea .right{width: 100%;float: none;}
    .contactarea .left{border-right: none;}
    .contactarea {padding: .8rem .6rem;}

  }
  
  
  @media only screen and (max-width:500px) {
  
  }

/* ==========================================================================
  在线留言
   ========================================================================== */


.ch_left {
  width: 57%;
  background: #F1F2F7;
}

.ch_right {
  width: calc(43% - .15rem);
  background: #F1F2F7;
}

.ch_box {
  padding: .65rem 0 .65rem .7rem;
}

.ch_company {
  font-size: .26rem;
  font-weight: bold;
  color: #333333;
}

.ch_item {
  font-size: .22rem;
  font-weight: 400;
  color: #333333;
  align-items: center;
  margin-top: .5rem;
  flex-wrap: nowrap;
}

.ch_img {
  width: .25rem;
  height: .25rem;
  align-items: center;
  justify-content: center;
  margin-right: .25rem;
}

.feedback {
  margin-top: .85rem;
  background: url(../images/feedbackbg.jpeg) no-repeat center;
  background-size: cover;
  padding: 1.2rem 0;
}

.feedback .inner_area {
  padding:0 0 .5rem 0;
}

.feedback_tips {
  font-size: .16rem;
  font-weight: 400;
  color: #979DAC;
  text-align: center;
  margin-bottom: .5rem;
}

.feedback_list {
  margin-left: -.15rem;
}

.feedback_list li {
  margin-left: .15rem;
  width: calc(33.33% - .15rem);
}

.feedback_list02 li{width: calc(50% - .15rem);margin-top: .5rem;}


.input_box {
  height: 70px;
  box-sizing: border-box;
  font-size: 16px;
  font-weight: 400;
  color: #767C8B;
  align-items: center;
  border: 1px solid #fff; background: #fff;
  padding-left: .16rem;
  flex-wrap: nowrap;
}

.input_box span {
  flex-shrink: 0;
}

.input_img {
  height: 50px;
  width: 50px;
  flex-shrink: 0;
}

.input_item {
  flex: 1;
  min-width: 0;
  background: none;
  outline: none;
  border: none;
  color: #767C8B;
  padding: .1rem;
}

.text_area {
  border: 1px solid #fff;padding-top:15px;
  padding-left: .16rem;
  font-size: 16px;
  font-weight: 400;
  color: #767C8B;background: #fff;
  margin: .32rem 0 .55rem;
  box-sizing: border-box;
}

.text_area span {
  margin-top: 15px;
}

.text_item {
  margin-top: 15px;
  min-height: 170px;
  flex: 1;
  background: none;
  outline: none;
  border: none;
  color: #767C8B;
	padding-left: .1rem;
    font-size: 16px;
    line-height: 1.5;
}

.btn_box {
  justify-content: center;
}

.feedback_btn {
  width: 2.02rem;
  height: .54rem;
  background: #5B5B5B;
  font-size: .16rem;
  font-weight: bold;
  color: #FFFFFF;
  border: none;
  margin-left: .18rem;
}

.green {
  background: #0D6AB8;
  margin-left: 0;
}


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

  .ch_left,  .ch_right { width: 100%; }

  .ch_right { margin-top: 20px; }

  .feedback_list li { width: 100%;margin:0; margin-bottom: 10px;}
  .feedback_list{margin:0;display: inline-block; width: 100%;}
  .text_area{margin: 0 0 .55rem 0;}
}

/* ==========================================================================
   development
   ========================================================================== */
.development{
  padding: .5rem 0 1.2rem 0;
  background: url(../images/development.jpeg) no-repeat;
  background-size: cover;
}


.development_swiper {
  position: relative; margin-top: .2rem;
}

.development_swiper .swiper-button-next::after,
.development_swiper .swiper-button-prev::after {
  display: none;
}

.development_swiper .swiper-button-next {
  background: url(../images/about_right04.png) no-repeat center;
  background-size: contain;
  width: .68rem;
  height: .68rem; 
  right: 0; 
  margin-top:-.68rem;top: 90%;
}

.development_swiper .swiper-button-prev {
  background: url(../images/about_left04.png) no-repeat center;
  background-size: contain;
  width: .68rem;
  height: .68rem;top: 90%;
  right: .7rem;left: auto;margin-top:-.68rem;
  
}

.developmentbox{position: relative;}
.developmentbox .pic{width: 60%;}
.developmentbox .right{width:50% ; position: absolute; right: 0; top: 10%; height: 80%;
  background: url(../images/development02.jpeg) no-repeat;
  background-size: cover;    z-index: 10;
}
.developmentbox .txtinfo{padding:.8rem;color: #fff; font-size: .16rem;  font-weight: 400; line-height: 200%;}


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

}

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

}

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

}

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

}

@media only screen and (max-width: 768px) {
  .developmentbox .pic { width:100%;}
  .developmentbox .right {    width:100%;    position: relative;    top:auto;    height:auto;}
  .development_swiper .swiper-button-prev{top:auto;}
  .development_swiper .swiper-button-next{top:auto;}
}

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

}



/* ==========================================================================
   prolist
   ========================================================================== */
   .pro{
    padding: .5rem 0 1.2rem 0;
    background: linear-gradient(180.00deg, rgb(255, 255, 255), rgb(216, 229, 254) 100%);
  }
  
   .prolist  { margin-left: -.5rem;  }
  
  .prolist li { margin-left: .5rem; width: calc(33.33% - .5rem); overflow: hidden; float: left;margin-bottom: .5rem; }
  .probox{position: relative;}
  .probox .protitle{
    height: 120px;
    box-sizing: border-box;
    font-size: .24rem;
    font-weight: 400;
    color: #fff;
    align-items: center;
    padding:0  .4rem;
    flex-wrap: nowrap;
    background: url(../images/protitbg.jpeg) no-repeat;
  background-size: cover;
  }
  .protitle .txt{width: calc(100% - .2rem); }

  .probox .procover{width: 100%; height: 100%;position: absolute;top:100%; left: 0;transition: all .4s;display: flex; align-items: center;
    background: url(../images/procoverbg.jpeg) no-repeat;  background-size: cover;color: #fff;  text-align: center; }

  .probox .procover p{font-size: .24rem; font-weight: 400;margin:.1rem 0;}
  .probox .procover h3{font-size: .34rem; font-weight: 400;}
  .probox .procover a{color: #fff;}
  .probox .procover .more{color: #fff;text-decoration: underline;font-size: .18rem; font-weight:300;}
  .procoverrow{width: 100%;}

  .prolist li:hover .probox .procover{top: 0;}


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

}

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

}

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

}

@media only screen and (max-width: 920px) {
  .prolist li { margin-left: .5rem; width: calc(50% - .5rem);}
}

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

}

@media only screen and (max-width: 500px) {
  .prolist li { margin-left:0; width:100%;}
  .prolist{margin-left: 0;}
}



/* ==========================================================================
   产品详情
   ========================================================================== */
.pro_details {
  border: 1px solid rgb(231, 231, 231);
  border-radius: .08rem;
  overflow: hidden;
  margin: .3rem 0;
}

.prodetailrow02{padding:1rem 0; background: url(../images/prodetailsbg01.jpeg) no-repeat;  background-size: cover;}
.prodetailrow02 .proleft{width: calc(52% - 1rem); color: #fff;}
.prodetailrow02 .proright{width: 48%; }
.prodetailrow02 .proleft .tit{font-size: .48rem;  font-weight: 700;margin-top: .2rem;}
.prodetailrow02 .proleft .txtinfo{font-size: .16rem;  font-weight: 300; line-height: 180%; margin:.6rem 0;}
.prodetailrow02 .proleft .zxtel{font-size: .16rem;  font-weight: 300;}
.prodetailrow02 .proleft .zxtel h3{font-size: .36rem;  font-weight: 700;}

.proHot_link {
  width: 2rem;
  height: .75rem;
  background: rgb(255, 255, 255, 0.2);
  color: rgb(255,255, 255);
  font-size: .18rem;
  margin-right: .4rem;border-radius:8px;
  position: relative;
  z-index: 1;
}
.proHot_link img{margin-right: 10px;}

.proHot_link:hover {
  color: #fff;
}

.proHot_link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  background: rgb(209, 12, 35);border-radius:8px;
  z-index: -1;
  transition: all .4s;
}

.proHot_link:hover::before {
  width: 100%;
}

.pro_swiper{position: relative;}
.pro_swiper .swiper-button-next::after,
.pro_swiper .swiper-button-prev::after {
  display: none;
}

.pro_swiper .swiper-button-next {
  background: url(../images/about_right04.png) no-repeat center;
  background-size: contain;
  width: .68rem;
  height: .68rem; 
  right: 0; top: auto; bottom:0;}

.pro_swiper .swiper-button-prev {
  background: url(../images/about_left04.png) no-repeat center;
  background-size: contain;
  width: .68rem;
  height: .68rem;bottom:0;
  right: .7rem;left: auto;top: auto;}

.prodetailrow03{padding:.3rem 0; background: url(../images/prodetailsbg02.jpeg) no-repeat;  background-size: cover;}

.pro-characteristics { margin-left: -1rem;}

.pro-characteristics li {  width: calc(25% - 1rem); float: left; margin-left: 1rem;}


.characteristics_box {
  flex-direction: column;
   background-size: cover;
  padding:.6rem .3rem ;
 text-align: center;
}

.characteristics_box h4 {
  margin-top: .4rem; color: #001753;  
  font-size: .18rem;
  font-weight:500;
}

.characteristics_box .icon {
  width:50px;height:50px;margin:0 auto; text-align: center;  
  /*width:100%; text-align: center;  */
}

.characteristics_box .icon img{transition: all .8s;max-width: 100%;
    max-height: 100%;}

.characteristics_box:hover .icon img{
  transform: rotateY(360deg);
}


.prodetailrow04{padding:.6rem 0;}
.promstit{font-size: .16rem;  font-weight:500; color: #333;margin-top: .2rem;}
.pro_swiper02 {
  width: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
}
.pro_swiper02 .txt{text-align: center;font-size: .16rem;  font-weight:500; color: #333;margin-top: .2rem;}

.pro_swiper02 .swiper-slide {
  background-position: center;
  background-size: cover;
  width: 500px;
}

.pro_swiper02 .swiper-slide img {
  display: block;
  width: 100%;
}

.pro_swiper02{position: relative;}
.pro_swiper02 .swiper-button-next::after,
.pro_swiper02 .swiper-button-prev::after {
  display: none;
}

.pro_swiper02 .swiper-button-next {
  background: url(../images/about_right04.png) no-repeat center;
  background-size: contain;
  width: .68rem;
  height: .68rem; 
  right: 0; }

.pro_swiper02 .swiper-button-prev {
  background: url(../images/about_left04.png) no-repeat center;
  background-size: contain;
  width: .68rem;
  height: .68rem;
 left: 0;}

 .prodetailrow05{padding:.4rem 0; background: url(../images/prodetailsbg03.jpeg) no-repeat;  background-size: cover;}
 .prodetailrow05 a{color: #fff;}
 .prodetailrow05 .button-prev img{margin-right: 10px;}
 .prodetailrow05 .button-next img{margin-left: 10px;}
 .prodetailrow05 .button-prev p, .prodetailrow05 .button-next p{font-size: .48rem;  font-weight: 500;}
 .prodetailrow05 .icon {padding-top:.3rem;}
 .prodetailrow05 .button-next{text-align: right;}
 .prodetailrow05 .button-prev h6, .prodetailrow05 .button-next h6{font-size: .18rem;  font-weight: 500;}

 .applicationbox{margin:.5rem;transition: all .5s;}
 .applicationbox:hover{margin:0;}

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

 }
 
 @media only screen and (max-width:1400px) {
 
 }
 
 @media only screen and (max-width:1200px) {
 
 }
 
 @media only screen and (max-width: 920px) {

 }
 
 @media only screen and (max-width: 768px) {
  .prodetailrow02 .proleft,.prodetailrow02 .proright{width: 100%; float: none;}
  .prodetailrow02 .proright{width: 100%; float: none;}
  .pro-characteristics li {    width: calc(50% - 1rem);}
  .characteristics_box { padding: .4rem .2rem;}
 }
 
 @media only screen and (max-width: 500px) {
  .prodetailrow02 .proleft .tit{font-size:.36rem;}
  .prodetailrow02 .proleft .zxtel h3{font-size:.30rem;}
  .prodetailrow05 .button-prev p, .prodetailrow05 .button-next p{font-size: .36rem;}
  
 }
 



/* ==========================================================================
   关于我们
   ========================================================================== */

   .sub-banner-about{height: 960px;}
   .sub-banner-about .bgtitle2{text-align: left; width:40%;top: calc(50% - 1.2rem);font-size: .64rem;}


.company {
  padding: .9rem 0;
  background: url(../images/aboutbg01.jpeg) no-repeat center;
  background-size: cover;
  justify-content: space-between;
  align-items: center;
}

.company_left {
  width: calc(44% - .85rem);
}

.company_right {
  width: 54%;
}

.company_left .tit {
  color:#111;
  font-size: .48rem;
  font-weight: 700;
  margin-bottom: .3rem;
}

.company_left .txt {
  color: rgb(51, 51, 51);
  font-size: .18rem;
  font-weight: 400;
  line-height: 150%;
}

.num_list03 {
  margin-top: -0.2rem;
}

.num_list03 li {
  width: 33.33%;
  box-sizing: border-box;
  margin-top: .2rem;
}

.num_list03  .number {
  color: rgb(13,53, 127);
  font-family: "roboto";
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.7;
  align-items: baseline;
}


.num_list03 .num_info {
  color: rgb(102, 102, 102);
  font-size: .14rem;
  font-weight: 400;
}


.Network {
  padding: 1.2rem 0;
  background: url(../images/aboutbg02.jpeg) no-repeat center;
  background-size: cover;
  justify-content: space-between;
  align-items: center;
}

.Network .wrapper,.company .wrapper{max-width: 1800px;}

.Network_left { width:30%; color: #fff;}
.Network_left .num_list03 li{width: 50%;}
.Network_left .num_list03{margin-top: .3rem;}
.Network_left .num_list03 li .number {  color: rgb(255,255, 255); font-size: .36rem;font-weight: 500;}
.Network_left .num_list03 li .num_unit{font-size: .14rem; font-weight: 300;margin-left: 10px;}
.Network_left .num_list03 .num_info {color:#fff;}
.Network_left .tit {
  font-size: .48rem;
  font-weight: 700;
  margin-bottom: .3rem;
}

.Network_left .txt { 
  font-size: .18rem;
  font-weight: 300;
  line-height: 150%;
}



.Network_right {  width: 70%;}
.Network_right img{max-width: 100%;}


.Network_link {
  width: 3rem;
  height: .60rem;  
  color: rgb(255,255, 255);
  font-size: .18rem;
  margin-right: .4rem;
  position: relative; margin-top: .5rem; border:1px solid #fff;
  z-index: 1;
}
.Network_link img{margin-right: 10px;}

.Network_link:hover {
  color: #fff;
}

.Network_link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  background: rgb(209, 12, 35);
  z-index: -1;
  transition: all .4s;
}

.Network_link:hover::before {
  width: 100%;
}



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

}

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

}

@media only screen and (max-width:1200px) {
  .sub-banner-about{ height: 600px;}
}

@media only screen and (max-width:920px) {
.company_left ,.company_right {width:100%;float: none;}
.company_right{margin-top: .2rem;}
.Network_left,.Network_right{width:100%;float: none;}
.sub-banner-about{ height:400px;}
.sub-banner-about .bgtitle2{font-size: .36rem;top: calc(50% - .5rem);}

}

@media only screen and (max-width:768px) {
}


@media only screen and (max-width:500px) {
  .sub-banner-about{ height:300px;}
.sub-banner-about .bgtitle2{top: calc(50% - .5rem);width:60%;}
}