.el-button {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid #dcdfe6;
    color: #606266;
    -webkit-appearance: none;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: 0;
    margin: 0;
    -webkit-transition: .1s;
    transition: .1s;
    font-weight: 500;
    padding: 10px 36px;
    font-size: 14px;
    border-radius: 4px;
}
.el-button--primary {
    color: #fff;
    background-color: #0E79C4;
    border-color: #0E79C4;
}
.el-button--empty {
    padding: 10px 20px;
    border-color: #606266;
}
.softBanner{ background:url(../images/banner/softBanner.png) no-repeat top center; height:458px; text-indent:-9999px;background-size: cover;}
.softBannerTube{ background:url(../images/WiseCam/tube/banner.jpg) no-repeat top center; height:458px; text-indent:-9999px;background-size: cover;}

.softDocument{ width:1100px;height:60px;background-color: #eaeaea;margin-top: 48px;}
.softDocument img{width:24px;height:30px;background-color: #ffffff;
    background:url(../images/softdoc.png) no-repeat top center;
    background-size: cover;
    position: relative;
    top: 14px;
    left: 20px;}
    .softDocument .docname{
        position: relative;
        top: 6px;
        left: 24px;
    }
    .softDocument button{
        position: relative;
        float:right;
        top: 16px;
        right: 12px;
    }
.softIntroduce{ width:1300px;height:280px;background-color: #eaeaea;margin-top: 48px;}
.softIntroduce .img{ width:360px;height:180px;
     background:url(../images/WiseCam/SheetMetal/softIntroduce.png) no-repeat top center;
     background-size: cover;margin-top: 50px;
     position: relative;
     left: 80px;
     top: 50px;
    }
    .softIntroduce .imgTube{ width:360px;height:180px;
        background:url(../images/WiseCam/tube/softIntroduce.jpg) no-repeat top center;
        background-size: cover;margin-top: 50px;
        position: relative;
        left: 80px;
        top: 50px;
       }

    .softIntroduce .introduce{ width:720px;
        font-size: 13pt;
        position: relative;
         left: 500px;
         top: -120px;
         line-height: 1.5;

       }

       .softIntroduce .introducebutton{ width:720px;
        font-size: 13pt;
        position: relative;
         left: 500px;
         top: -120px;
         margin-top: 30px;
       }
       .softIntroduce .introducetel{ width:720px;
        width: 720px;
        font-size: 16pt;
        font-weight:bold;
        color: #0E79C4;
        position: relative;
        left: 800px;
        top: -175px;
        margin-top: 30px;
       }
       .softIntroduce .introducetel img{ 
        width:24px;height:24px;object-fit: cover;
       }
  
.updatelogtr{
    display:none;line-height: 15px;padding-top: 5px;border-bottom: 1px solid #eaeaea

}     
.updatelogtd{

    font-size: 11pt;font-family: 'Courier New', Courier, monospace;padding-top: 8px;
    padding-bottom: 3px;line-height: 1.5;
}  
.softNav{ background-color:#ffffff; height:60px;}
.softNav li,.softNav li a{ float:left; width:500px; height:60px; line-height:60px; color:#000; font-size:20px; text-align:center;}
.softNav li{ color:#eaeaea;  border-bottom:1px solid #eaeaea;}
.softNav li:hover{ color:#0E79C4;  border-bottom:2px solid #0E79C4;}

.softNav li a:hover{ color:#0E79C4; text-decoration:none;}
.softNav li.current,.softNav li.current a{ color:#0E79C4; background:url(../images/arrowBg.png) no-repeat bottom center;}
.softBox{ padding-bottom:1px; overflow:hidden;}
.softBox dl{ float:left; width:240px; padding:15px 0px; margin:50px 56px;height:280px}
.softBox dl:hover{ box-shadow:0px 0px 10px #0E79C4;}
.softBox dl dt img{ display:block; margin:0 auto 15px auto;}
.softBox dl dd{ text-align:center; font-size:16px; line-height:26px;}

.search-video-input{
float:right;
background: none;
outline: none;
border: 1px solid #adadad;
width: 200px;
height: 32px;
color: #adadad;
padding-left: 5px;
border-radius: 3px;
}
.search-video-button{
    float:right;
    width: 36px;
    height: 36px;
    outline: none;
    border: 1px solid #adadad;
    position: relative;
    top: -1px;
    right: 36px;
    background: url(../images/searchBtn.png) no-repeat center;
    background-size: 20px;
    cursor: pointer;
    border: none;
}

.morespan{
    float: right;
    margin-top: 20px;
    cursor:pointer;
}
.closemore{
    cursor:pointer;
}
.tabs {
    display: block;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    flex-wrap: wrap;
    cursor: pointer;
    margin: 0;
    height: 80%;
    overflow: hidden;
    padding-bottom:900px;
    }
    .tabs [class^="tab"] .tablabel,
    .tabs [class*=" tab"] .tablabel {
      display: block;
      font-size:1.6em;
      font-weight: 300;
      line-height: 1em;
      padding: 0.5rem 0;
      text-align: center; }
    .tabs [class^="tab"] [type="radio"],
    .tabs [class*=" tab"] [type="radio"] {
      cursor: pointer;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      display: block;
      width: 100%;
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out; }
      .tabs [class^="tab"] [type="radio"]:hover, .tabs [class^="tab"] [type="radio"]:focus,    .tabs [class*=" tab"] [type="radio"]:hover,    .tabs [class*=" tab"] [type="radio"]:focus {      border-bottom: 1px solid #40a9ff;}
      .tabs [class^="tab"] [type="radio"]:checked,
      .tabs [class*=" tab"] [type="radio"]:checked {     border-bottom: 2px solid #40a9ff; }
      .tabs [class^="tab"] [type="radio"]:checked + div,
      .tabs [class*=" tab"] [type="radio"]:checked + div {      opacity: 1; }
      .tabs [class^="tab"] [type="radio"] + div,    .tabs [class*=" tab"] [type="radio"] + div {      display: block;      opacity: 0;	  padding-top:1rem;      padding-bottom: 540px;      width: 90%;      -webkit-transition: all 0.3s ease-in-out;      -moz-transition: all 0.3s ease-in-out;      -o-transition: all 0.3s ease-in-out;      transition: all 0.3s ease-in-out; }
    .tabs .tab-2 {    width: 24%; 	}
       .tabs .tab-2  [type="radio"]:checked + div {      display:block;      width: 98%;	  }
      .tabs .tab-2 [type="radio"] + div {      display:none; 	  }
          .tabs .tab-2 [type="radio"]:checked + div.tab1 { position: absolute;    margin-left: 1%;	  }  
      .tabs .tab-2 [type="radio"]:checked + div.tab2 { position: absolute;    margin-left: -23%;	  }
      .tabs .tab-2 [type="radio"]:checked + div.tab3 {    position: absolute;    margin-left: -47%;	  }
       .tabs .tab-2  [type="radio"]:checked + div.tab4 { position: absolute;    margin-left: -71%;}
  .fl{float:left;}
  .pageinput{margin-left: 12px;height: 24px;width: 280px;}
  .ml100{margin-left:100px;}
  h4{padding-bottom:30px;}
      .video-play {
          height: 300px;
      }
      
      
  .pro-cards {
      display: flex;
      width: 100%;
      flex-wrap: wrap;
      justify-content: flex-start;
  }
  
  .pro-card {
      width: 354px;
      height: 340px;
      position: relative;
     /* box-shadow: 3px 3px 10px 1px #ddd;*/
      margin-top: 20px;
      display: block;
  }
  .pro-card-img {
    max-width: 90%;
    display: block;
    cursor: pointer;
    margin-left: 5%;


}
  .pro-card-out {
      width: 25%;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  
  .pro-card::after {
      flex: auto;
      content: '';
  }
  
  .pro-card-t {
      position: absolute;
      top: 10px;
      left: 5px;
  }
  
  .pro-card-t1 {
      font-size: 20px;
      line-height: 30px;
      display: block;
      text-align: center;
      color: #000;
  }
  
  .pro-card-t2 {
      font-size: 12px;
      line-height: 14px;
      background: #1e3d76;
      color: #fff;
      display: block;
      text-align: center;
      width: 141px;
      padding: 5px 0;
  }
  
  .video-icon {
      position: absolute;
      top: 25%;
      left: 41%;
      cursor: pointer;
  }
  .video-start {

    height: 45px;
}
  .video-des {
     /* line-height: 60px;*/

      height: 60px;
    width: 88%;
    padding-top: 5px;
    padding-left: 15px;
    font-size: 13pt;
    text-align: center;
  }
  
  .video-cards {
      height: 175px;
  }
  
  .video-out {
      position: fixed;
      top:0;
      left:0;
      width: 100%;
      height: 100%;
      z-index: 10000;
      display: none;
      justify-content: space-around;
      align-items: center;
      background-color: rgba(238, 238, 238, .6);
  }
  
  .video-in {
      width: 800px;
      background: #000;
      border-radius: 6px;
      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
      -ms-border-radius: 6px;
      -o-border-radius: 6px;
      margin:auto;
      margin-top:10%;
  }
  
  .video-header {
      padding: 0 15px;
      border-bottom: 1px solid #333;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 20px;
      color: #fff;
  }
  
  .video-close {
      font-size: 30px;
      font-weight: 900;
      cursor: pointer;
  }
  
  .video-play {
      height: 500px;
      width: 100%;
      outline: none;
  }
  .img-responsive{
  width:auto;height:auto;max-width: 100%;max-height: 100%; 
}
@media screen and (max-width: 1800px){
    .pro-card-out {
        width: 25%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .video-out {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 10000;
        display: none;
        justify-content: space-around;
        align-items: center;
        background-color: rgba(238, 238, 238, .6);
    }
    .video-play {
        height: 500px;
        width: 100%;
        outline: none;
    }
    .video-in {
        width: 800px;
        background: #000;
        border-radius: 6px;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        -ms-border-radius: 6px;
        -o-border-radius: 6px;
        margin:auto;
        margin-top:10%;
    }
    .img-responsive{
      width:auto;height:auto;max-width: 100%;max-height: 100%; 
    }
    }

    @media screen and (max-width: 1500px){
        .pro-card-out {
            width: 33%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .video-out {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 10000;
            display: none;
            justify-content: space-around;
            align-items: center;
            background-color: rgba(238, 238, 238, .6);
        }
        .video-play {
            height: 500px;
            width: 100%;
            outline: none;
        }
        .video-in {
            width: 800px;
            background: #000;
            border-radius: 6px;
            -webkit-border-radius: 6px;
            -moz-border-radius: 6px;
            -ms-border-radius: 6px;
            -o-border-radius: 6px;
            margin:auto;
            margin-top:10%;
        }
        .img-responsive{
          width:auto;height:auto;max-width: 100%;max-height: 100%; 
        }
        }


  @media screen and (max-width: 1200px){
  .pro-card-out {
      width: 49%;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  .video-out {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 10000;
      display: none;
      justify-content: space-around;
      align-items: center;
      background-color: rgba(238, 238, 238, .6);
  }
  .video-play {
      height: 400px;
      width: 100%;
      outline: none;
  }
  .video-in {
      width: 90%;
      background: #000;
      border-radius: 6px;
      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
      -ms-border-radius: 6px;
      -o-border-radius: 6px;
      margin:auto;
      margin-top:15%;
      margin-left:5%;
  }
  .img-responsive{
    width:auto;height:auto;max-width: 100%;max-height: 100%; margin-top: 60px; 
  }
  }
  @media screen and (max-width: 700px){
  .pro-card-out {
      width: 49%;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  .video-out {
      position: fixed;
      top: 0;
      left: 0;
      width: 96%;
      height: 100%;
      z-index: 10000;
      display: none;
      justify-content: space-around;
      align-items: center;
      background-color: rgba(238, 238, 238, .6);
  }
  .video-play {
  height:360px;
      width: 100%;
      outline: none;
  }
  .video-in {
      width: 90%;
      background: #000;
      border-radius: 6px;
      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
      -ms-border-radius: 6px;
      -o-border-radius: 6px;
      margin:auto;
      margin-top:20%;
      margin-left:2%;
  }
  .img-responsive{
    width:auto;height:auto;max-width: 100%;max-height: 100%; margin-top: 60px; 
  }
  }
  @media screen and (max-width: 500px){
  .pro-card-out {
      width: 98%;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  .video-out {
      position: fixed;
      top: 0;
      left: 0;
      width: 96%;
      height: 100%;
      z-index: 10000;
      display: none;
      justify-content: space-around;
      align-items: center;
      background-color: rgba(238, 238, 238, .6);
  }
  .video-play { 
      height:200px;
      width: 100%;
      outline: none;
  }
  .video-in {
      width: 100%;
      background: #000;
      border-radius: 6px;
      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
      -ms-border-radius: 6px;
      -o-border-radius: 6px;
      margin:auto;
      margin-top:25%;
      margin-left:2%;
  }
  .img-responsive{
    width:auto;height:auto;max-width: 100%;max-height: 100%; margin-top: 60px; 
  }
  }