.con{background:#fff;margin: -2px 0;overflow: hidden;}
.con ul li{/*width:297px;height:198px;float:left;margin-right:15px;margin-bottom:15px;*/position:relative;overflow:hidden;cursor:pointer;}
.con ul li img{
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: scale(1.14);
  transform: scale(1.14);
  
}

.con ul li:hover img{
  -webkit-transform: scale(1);
  transform: scale(1);
}
.con ul li .border{
  border:1px solid transparent;
  float: none;
  margin: 0% auto;
  height: 86%;
  transition: opacity 0.35s linear, transform 0.35s linear;
  -o-transition:border .35s linear;
  -webkit-transition:border .35s linear;
  -moz-transition:border .35s linear;
  transition:border .35s linear;
}
.con ul li:hover .border{
  border:1px solid #fff;
  margin: 5% auto;
  padding: 0 5%;
    transition: border 0.35s linear, transform 0.35s linear;
  -o-transition:border .5s linear;
  -webkit-transition:border .5s linear;
  -moz-transition:border .5s linear;
  transition:border .5s linear;

}
.txt{height:60px;background:rgba(0,0,0,0.7);/*透明背景色，不透明其文字内容*/position:absolute;left:0;bottom:0;color:#fff;font-family:"微软雅黑";}
.txt h3{font-weight:100;height:60px;text-align:center;line-height:60px;font-size: 1em;transition: width .5s ease;width: 100%;float: left;white-space: nowrap;
    clear: both;}
.txt p{text-align:left;line-height: 28px;}
.con ul li:hover .txt h3{
  transform: translate3d(-28%,0,0);
  transition: transform 0.5s;
}

.en-us ul li:hover .txt h3{
  transform: translate3d(0%,0,0);
  transition: transform 0.5s;
  width: 100%;
  float: left;
  text-align: left;
}

#product-example .txt h3{
text-align:center;
}
#product-example .con ul li{
  border:5px solid #fff;
}
#product-example .con ul li:hover .txt h3{
  transform: translate3d(0,0,0);
  text-align:center;
  padding: 20px 0 50px 0!important;
  
}
#product-example .con ul li .border{
  height: 83%;
}
#product-example .txt p{text-align:center;margin:3px 0 0 0;font-size: 16px;line-height: 28px;}


#product-example .con ul .enterprise:hover .txt h3{
  padding-top:30%!important; 
  align-items: center;

}
#product-example .con ul .bottom:hover .txt h3{
  padding-top:15%!important; 
  align-items: center;

}
@media (min-width: 300px) and  (max-width: 500px){
  #product-example .con ul .bottom:hover .txt h3{
    padding-top:20px!important; 
    align-items: center;
  }
}
@media (min-width: 1000px) and  (max-width: 1199px){
  .con ul li:hover .txt h3{
    transform: translate3d(0%,0,0);
    transition: transform 0.5s;
    padding-top: 20px!important;
    line-height: 24px;
  }
  .txt h3{font-size: 0.8em;}
  .txt p {
    line-height: 24px;
    font-size: 14px;
  }
  .whiteline{
    margin: 2.8% 0;
    clear: both;
  }

  #product-example .txt p {
    font-size: 14px;
    line-height: 20px;
  }
}
@media (min-width: 1200px) and  (max-width: 1500px){
  .con ul li:hover .txt h3{
    transform: translate3d(0%,-8%,0);
    transition: transform 0.5s;
    line-height: 24px;
     padding: 50px 0px 30px 0!important;
  }


  .con .zh-tw:hover .txt h3{
    transform: translate3d(0%,0%,0);
    transition: transform 0.5s;
    line-height: 24px;
    padding: 50px 0px 30px 0!important;
    width: 0px;
    transition: width .5s ease;
    white-space: nowrap;
    clear: both;
  }

  .txt p {
    line-height: 26px;
  }

  .txt h3{font-size: 1em;}

  .whiteline{
    margin: 5% 0;
    clear: both;
  }
}
@media (min-width: 1600px){
  .txt h3{font-size: 1.2em;}
}