@charset "UTF-8";

/****solution*****/
.solutions{
  box-shadow: 0px 2px 3px 1px #d8d8d8;
}
.solutions-header{
  border-bottom:1px solid #e4eaee
}
.solutions .solutions-header img{
  display: block;
  width: 100%;
}
.solutions-list{
  list-style: none;
  margin:0px 20px;
  margin-top:10px;
  padding-bottom: 15px;
}
.solutions-list::after{
  display: block;
  content: "";
  clear: both;
  height:0px;
  visibility:hidden;
}
.solution-item {
  float: left;
  display: block;
  list-style: none;
  width: 33.33333333%;
  margin: 0px 0px;
  cursor: pointer;
}
.solution-item-inner{
  position: relative;
  margin:20px 20px;
  border-radius: 2px 2px 2px 2px;
  box-shadow: 0px 0px 2px .66px #d8d8d8;
}

.solution-item:hover  .solution-item-inner{
  box-shadow: 0px 0px 4px 2px #d8d8d8;
}

.solution-item-inner::after{
  position:absolute;
  right: 6.666px;
  bottom:6.666px;
  z-index: 100;
  display: block;
  content: "";
  width: 0px;
  height: 0px;
  border-width:10px;
  border-style: solid;
}
.one-effect .solution-item-inner::after{
  border-color: transparent  #206cca #206cca transparent;
}
.two-effect .solution-item-inner::after{
  border-color: transparent  #009e55 #009e55 transparent;
}
.three-effect .solution-item-inner::after{
  border-color: transparent  #f57725 #f57725 transparent;
}

.solution-title {
  display: flex;
  height: 53.333px;
  font-size: 20px;
  padding:6.666px 13.3333px;
  line-height: 20px;
  align-items: center;
}
.one-effect .solution-title a{
  color: #206cca;
}
.two-effect .solution-title a{
  color:#009e55;
}
.three-effect .solution-title a{
  color:#f57725;
}
.solution-img{
  height: 180px;
  overflow: hidden;
}
.solution-img a{
  display: inline-block;
}
.solution-img img{
  width: 100%;
  transform: scale(1.0);
  transition: all .3s;
}
.solution-item:hover .solution-img img{
  transform: scale(1.2);
  transition: all .3s;
}
.solution-summary{
  display: inline-block;
  font-size: 14px;
  height:120px;
  margin:13.333px 13.333px;
  margin-bottom: 26.666px;
  overflow: hidden;
}

.solution-summary p{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:6;
  overflow:hidden;
  margin-bottom: 0px;
}

.solution-about {
border: 1px solid #f8f8f8;
border-top: 0px;
box-shadow: 0px 2px 3px 1px #d8d8d8;
padding: 20px;
}
.solution-about .content-header{
  margin-left:-21px;
  margin-right: -21px;
}
.solution-about .solution-content {
box-sizing: border-box;
background-color: #fff;
margin-right: 0px;
}
.solution-about .solution-content .tit {
font-weight: normal;
font-size: 24px;
color: #333;
margin-bottom: 16px;
margin-top:16px;
}

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

.content-video{
display:flex;
align-items: center;
justify-content: center;
}
.content-video .videoPlayer{
position: relative;
background:#000000;
}
.content-video .videoPlayer .video-play{
position:absolute;
display:block;
width:66px;
height: 66px;
overflow: hidden;
z-index: 100;
}

.content-video .videoPlayer .loading-panel{
  position: absolute;
  z-index: 1000;
  left: 0px;
  top: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: rgba(110,110,110,.1);
}

.content-video .videoPlayer .loading-panel .loading-animated {
  width:48px;
  height:48px;
  margin:0px 0px;
  animation: loadingRotate 1s infinite linear;
}
.content-video .videoPlayer .loading-panel .loading-animated img{
  width: 100%;
}
@keyframes loadingRotate{
  from{transform: rotate(0deg)}to{transform: rotate(360deg)}
}

.content-header{
display: block;
}
.content-header img{
width: 100%;
}

.solution-products{
margin-top:48px;
}
.solution-products .split_tit{
height:48px;
line-height:48px;
border-bottom:1px solid #d8d8d8
}
.solution-products .prod-items{}
.solution-products .prod-items dl{
display:block;
margin:0px 0px;
padding:0px 0px;
height:auto;
}
.solution-products .prod-items .prod-item{
float:left;
display:block;
width:25%;
margin-left:0px;
margin-top:15px;
overflow: hidden;
}
.solution-products .prod-items .prod-item:hover{
box-sizing: border-box;
box-shadow: 0px 2px 5px #ddd;
}
.solution-products .prod-items .prod-item .prod-item-inner{
margin:5px;
}
.solution-products .prod-items .prod-item .prod-img{
height:162px;
}
.solution-products .prod-items .prod-item .prod-img a{
display:inline-block;
width:100%;
}
.solution-products .prod-items .prod-item .prod-img img{
width:100%;
}
.solution-products .prod-items .prod-item a.prod-tit{
display:inline-block;
width:100%;
height:48px;
font-size:18px;
line-height:24px;
text-align: center;
color: #333;
overflow: hidden;
}

.solution-cases{
margin-top:48px;
}
.solution-cases .split_tit{
height:48px;
line-height:48px;
border-bottom:1px solid #d8d8d8
}
.solution-cases .case-items{}
.solution-cases .case-items dl{
display:block;
margin:0px 0px;
padding:0px 0px;
height:auto;
}
.solution-cases .case-items .case-item{
float:left;
display:block;
width:33.333333333%;
margin-left:0px;
margin-top:15px;
overflow: hidden;
}
.solution-cases .case-items .case-item:hover{
box-sizing: border-box;
box-shadow: 0px 2px 5px #ddd;
}
.solution-cases .case-items .case-item .case-item-inner{
margin:5px;
}
.solution-cases .case-items .case-item .case-img{
height:262px;
overflow: hidden;
}
.solution-cases .case-items .case-item .case-img a{
display:inline-block;
width:100%;
}
.solution-cases .case-items .case-item .case-img img{
width:100%;
}
.solution-cases .case-items .case-item a.case-tit{
display:inline-block;
width:100%;
height:48px;
font-size:18px;
line-height:24px;
text-align: center;
color: #333;
margin-top:10px;
overflow: hidden;
}

.solution-about .product-listbox {
float: left;
width: 192px;
margin-top:80px;
}
.solution-about .product-listbox .tit {
font-weight: normal;
font-size: 19.2px;
padding-left: 12px;
position: relative;
height: 32px;
line-height: 32px;
}
.solution-about .product-listbox .tit:before {
display: block;
position: absolute;
left: 0;
top: 8px;
content: "";
width: 2.4px;
height: 16px;
background-color: #DA251D;
}
.solution-about .product-listbox .product-list{
padding: 20px 0px;
background-color: #f9f9f9;
border-radius: 3px;
}
.solution-about .product-listbox .product-list .list-li {
height: 32px;
line-height: 32px;
padding: 0px 16px;
overflow: hidden;
}
.solution-about .product-listbox .product-list .list-li .link {
font-size: 12.8px;
color: #333;
}
.solution-about .product-listbox .product-list .list-li .link:hover {
color: #DA251D;
}
/****solution case****/
.solution-case-about {
border: 1px solid #f8f8f8;
border-top: 0px;
box-shadow: 0px 2px 3px 1px #d8d8d8;
padding: 20px;
}
.solution-case-about .case-content {
float: left;
width: 898px;
box-sizing: border-box;
background-color: #fff;
margin-right: 0px;
}
.solution-case-about .case-content .tit {
font-weight: normal;
font-size: 24px;
color: #333;
text-align: center;
margin-bottom: 16px;
margin-top:30px;
}
.solution-case-about .case-content .split_tit {
font-size: 14px;
color: #666;
margin-bottom: 32px;
border-bottom:1px solid #d8d8d8;
height:30px;
line-height: 30px;
}
.solution-case-about .case-content .con img {
max-width: 100%;
}
.solution-case-about .product-listbox {
float: right;
width: 192px;
margin-top:80px;
}
.solution-case-about .product-listbox .tit {
font-weight: normal;
font-size: 19.2px;
padding-left: 12px;
position: relative;
height: 32px;
line-height: 32px;
}
.solution-case-about .product-listbox .tit:before {
display: block;
position: absolute;
left: 0;
top: 8px;
content: "";
width: 2.4px;
height: 16px;
background-color: #DA251D;
}
.solution-case-about .product-listbox .product-list{
  padding: 20px 0px;
  background-color: #f9f9f9;
  border-radius: 3px;
}
.solution-case-about .product-listbox .product-list .list-li {
height: 32px;
line-height: 32px;
padding: 0px 16px;
overflow: hidden;
}
.solution-case-about .product-listbox .product-list .list-li .link {
font-size: 12.8px;
color: #333;
}
.solution-case-about .product-listbox .product-list .list-li .link:hover {
color: #DA251D;
}


@media screen and (min-width: 1600px){
  .solutions{}
  .solutions-header{
    border-bottom:1px solid #e4eaee
  }
  .solutions .solutions-header img{
    display: block;
    width: 100%;
  }
  .solutions-list{
    list-style: none;
    margin:0px 0px;
    margin-top:15px;
  }
  .solutions-list::after{
    display: block;
    content: "";
    clear: both;
    height:0px;
    visibility:hidden;
  }
  .solution-item {
    float: left;
    display: block;
    list-style: none;
    width: 33.33333333%;
    margin: 0px 0px;
    cursor: pointer;
  }
  .solution-item-inner{
    position: relative;
    margin:20px 20px;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0px 0px 3px 1px #d8d8d8;
  }

  .solution-item:hover  .solution-item-inner{
    box-shadow: 0px 0px 6px 3px #d8d8d8;
  }

  .solution-item-inner::after{
    position:absolute;
    right: 10px;
    bottom:10px;
    z-index: 100;
    display: block;
    content: "";
    width: 0px;
    height: 0px;
    border-width:15px;
    border-style: solid;
  }
  .one-effect .solution-item-inner::after{
    border-color: transparent  #206cca #206cca transparent;
  }
  .two-effect .solution-item-inner::after{
    border-color: transparent  #009e55 #009e55 transparent;
  }
  .three-effect .solution-item-inner::after{
    border-color: transparent  #f57725 #f57725 transparent;
  }

  .solution-title {
    display: flex;
    height: 80px;
    font-size: 30px;
    padding:10px 20px;
    line-height: 30px;
    align-items: center;
  }
  .one-effect .solution-title a{
    color: #206cca;
  }
  .two-effect .solution-title a{
    color:#009e55;
  }
  .three-effect .solution-title a{
    color:#f57725;
  }
  .solution-img{
    height: 268px;
    overflow: hidden;
  }
  .solution-img a{
    display: inline-block;
  }
  .solution-img img{
    width: 100%;
    transform: scale(1.0);
    transition: all .3s;
  }
  .solution-item:hover .solution-img img{
    transform: scale(1.2);
    transition: all .3s;
  }
  .solution-summary{
    display: block;
    font-size:16px;
    height:160px;
    padding:20px 20px;
    padding-bottom: 40px;
    overflow: hidden;
  }

  .solution-about .solution-content {
  box-sizing: border-box;
  background-color: #fff;
  margin-right: 0px;
  }

  .solution-products .prod-items .prod-item .prod-img{
    height:210px;
  }

  .solution-cases .case-items .case-item .case-img{
    height:300px;
    overflow: hidden;
  }

  .solution-case-about .case-content {
    width: 1082px;
    }
  
    .solution-case-about .product-listbox{
      width: 240px;
    }

}

/**solution optical sensing theme**/
.solution-theme{
  box-shadow: 0px 0px 6px 2px #d8d8d8;
}
.solution-theme-box{}
.solution-theme-tit{
    height: 48px;
    border-bottom: 2px solid #e3e3e3;
    margin:15px 20px;
}
.solution-theme-tit h3{
    display: inline-block;
    height: 48px;
    line-height: 48px;
    border-bottom: 2px solid #001381;
    margin:0px;
}
.solution-theme-content{
    position: relative;
    margin-bottom: 48px;
}
.solution-theme-content::after{
    display:block;
    content: "";
    clear: both;
    height:0px;
    visibility: hidden;
}
.solution-theme-content .content-txt{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60%;
    margin:10px 0px;
    background-color: #f3f3f3;
}
.solution-theme-content .content-txt .content-txt-inner{
    width: 80%;
    padding:100px 0px;

}
.solution-theme-content .content-img{
    width: 40%;
    border:1px solid #c6c6c6;
    background-color: #fff;
    overflow: hidden;
}
.solution-theme-content .content-img img{
    display: inline-block;
    width:100%;
    transform: scale(1.0);
    transition: all .3s ease-in;
}
.solution-theme-content .content-img:hover img{
    transform: scale(1.2);
    transition: all .3s ease-in;
}
.solution-theme-content.theme-left-style .content-txt{
    position:absolute;
    float: left;
}
.solution-theme-content.theme-left-style .content-img{
    position: relative;
    float: right;
    margin-top:100px;
    z-index: 100
}
.solution-theme-content.theme-right-style .content-img{
    position:absolute;
    float: left;
    z-index: 100;
    margin:10px 0px;
}
.solution-theme-content.theme-right-style .content-txt{
    position: relative;
    float: right;
    margin-top:188px;
}

.solution-theme-products{
  margin:48px 0px;
}
.solution-theme-products .split_tit{
  height:48px;
  line-height:48px;
  border-bottom:1px solid #d8d8d8;
  margin:15px 20px;
}
.solution-theme-products .prod-items{}
.solution-theme-products .prod-items dl{
  display:block;
  margin:0px 0px;
  padding:0px 0px;
  height:auto;
}
.solution-theme-products .prod-items dl:after{
    display:block;
    content:"";
    clear:both;
    height:0px;
    visibility: hidden;
}
.solution-theme-products .prod-items .prod-item{
  float:left;
  display:block;
  width:25%;
  margin-left:0px;
  margin-top:15px;
  overflow: hidden;
}
.solution-theme-products .prod-items .prod-item:hover{
  box-sizing: border-box;
  box-shadow: 0px 2px 5px #ddd;
}
.solution-theme-products .prod-items .prod-item .prod-item-inner{
  margin:5px;
}
.solution-theme-products .prod-items .prod-item .prod-img{
  height:162px;
}
.solution-theme-products .prod-items .prod-item .prod-img a{
  display:inline-block;
  width:100%;
  text-decoration:none;
}
.solution-theme-products .prod-items .prod-item .prod-img img{
  width:100%;
}
.solution-theme-products .prod-items .prod-item a.prod-tit{
  display:inline-block;
  width:100%;
  height:48px;
  font-size:16px;
  line-height:24px;
  text-align: center;
  color: #333;
  overflow: hidden;
}