@media screen and (max-width: 1300px) {
  .crumbs-1{ padding-left: 30px;}
  }
  
  @media screen and (max-width: 1201px) {
      .f-content{ width: 95%; margin: auto;}
      
      .box-1{ width: 32%;  margin-right: 2%;}
  }
  
  @media screen and (max-width: 1150px) {
      
      .page-content{ padding-left: 0px; }
      .navigation-1,.navigation-2{  display: none;}
  
  
      .ul-2 h2{ font-size: 20px; padding:12px 0;}
      .ul-2 .li{  border: none;padding-top: 0;}
      .ul-2 .li .left{ width: 33%; max-width:180px;}
      .ul-2 .li .right{ width: 63%; float: left;  margin-left: 2%}
      .ul-2 .li img{ width: 100%; height: auto; min-height: 74px; }
      .ul-2 .li h3{ padding:0; font-size: 18px; line-height: 25px;}
      .ul-2 .li h4{ font-size: 14px;  font-weight: 100; }
  
      
  }
  
  @media screen and (max-width: 1201px)  and (min-width: 769px)  {
      .box-1:nth-child(3n+1){ margin-right:0;}
  }

  @media screen and (min-width: 769px) and (max-width: 1130px) {
    .service { width: 100%;}
    .service .right { width: 35%;}
    .service .right .tabs .tab a { width: 48%; font-size: 14px;}
  }

  @media screen and (min-width: 769px) and (max-width: 900px) {
    .con .selfhelp li div { width: 60px; height: 60px; line-height: 50px;}
    .con .selfhelp li img { width: 40px; height: 40px;}
  }
      
  @media screen and (max-width: 769px) {
      .button-1{ display: block;}
      .share{ display: none;}
      .f-content{width: 94%; margin: auto; float: none;} 
      .page-content{ padding-left: 0px; width: auto; float: none; padding-top:30px;  padding-bottom: 30px;}
      .crumbs-1{ display: none;}
      
      .title-1{ padding: 0px}
      .title-1 .right{ padding-top:8px;}
      .title-1 .top{ margin: 0px}
      .title-1 .left{ font-size: 24px; line-height: 43px; padding: 0px;}
  
      .title-3 .main{ line-height:36px; font-size: 24px}
      .title-3 .date{ font-size: 12px; line-height: 18px; padding-bottom: 5px;}
  
      .title-2{ line-height: 29px; font-size:16px; padding-left: 12px;  border-left:2px  solid #0052D9;}
  
      .title-4 .right{ display: none;} 
  
      .ul-2 h2{ font-size: 20px; padding:12px 0;}
      .ul-2 .li{  border: none;}
      .ul-2 .li .left{ width: 33%; max-width:180px;}
      .ul-2 .li .right{ width: 63%; float: left;  margin-left: 2%}
      .ul-2 .li img{ width: 100%; height: auto; min-height: 74px; }
      .ul-2 .li h3{ padding:0; font-size: 14px; line-height: 25px;}
      .ul-2 .li h4{ font-size: 14px;  font-weight: 100; }
  
      .ul-3 .txt{ width: 90%;}
  
      .f > .banner{ width: 100%; height: 284px;  height: 126px;}
      .banner h1{ font-size: 28px; line-height: 30px; padding-top: 48px; font-style: normal;}
  
      .box-1{ width: 47%; margin-right:5%;}
      .box-1:nth-child(2n+1){ margin-right: 0;}
      .box-1 .main{ height: auto;}
      .box-1 .img{ height: auto;}
      .box-1 .title{ font-size: 14px;}
  
      .ul-1 .li{margin-bottom: 10px;}
      body .ul-1 .li .img{ width: 35%; max-width: 200px;}
      .ul-1 .li h3{ font-size: 14px; line-height: 25px;}
      .ul-1 .li .left p{ font-size: 12px; overflow: hidden; text-overflow: ellipsis; display:box; display:-webkit-box; -webkit-box-orient:vertical;  box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; }
      .ul-1 .li h4{ font-size: 14px;}
  
      
      .service {width: 100%;height: 100vh;margin: 0;}
      .service .top{border-radius: 0;}
      .service .content{height: calc(100vh - 50px); border-radius: 0;}
      .service .content .left{width: 100%; height: 100%;}
      .service .content .left .chat{height: calc(100vh - 282px);}
      .service .content .left .chat .serinfo{padding: 0 10px;}
      /* .service .content .left .center{height: 60px;} */
      .service .content .right{display: none;}

      .join_item_container{margin-left: 0;}
      .join_item_container .infoContainer{width: 100% !important; margin: 10px 0 !important;}
      .join_item_container .infoContainer .info{width: 100% !important;}
      .join_item_container .infoContainer .info .info_detail{margin: 20px 0 !important;}
      .join_item_container .infoContainer .info .info_detail .fillInfo .oneLine{width: 100% !important;}
      .join_item_container .infoContainer .info .info_detail .fillInfo .locationInput .layui-inline{width: calc(100% - 112px) !important;display: inline-block;margin-left: 112px;}
      .join_item_container .infoContainer .info .info_detail .fillInfo .layui-form-item .layui-transfer-box {width: auto !important;}
      .join_item_container .infoContainer .info .info_detail .fillInfo .layui-form-item .demo_transfer_language .layui-transfer-active,
      .join_item_container .infoContainer .info .info_detail .fillInfo .layui-form-item .demo_transfer_scope .layui-transfer-active {width: 82px !important;}
      

      .business-user .mod-tab-wrap .mod-tab-content.active-show .tranlates{padding: 0 10px 0px 15px;width: 90%;}
      .business-ent .mod-tab-content .cases_container .mod-con .back{top: 65px;left: 10px;}

      .articleContent .articleImg{text-indent: 0 !important;}
      .articleContent .articleImg img{width: 100%;height: auto;}
      .send {padding-top: 50px;}
  }
  
  @media screen and (max-width: 469px) {
      .ul-1 .li .left p{ display: none;}
  }

  @media screen and (max-width: 400px) {
    .left .chat .serinfo>div:nth-child(2),
    .left .chat .myinfo>div:nth-child(1) {
        max-width: 70%;
    }
  }