.findpro { width: 100%; text-align: center; margin:2rem 0 4rem; }
.findpro em { font-size: 1.87rem; color: #666666; }
.findpro dl { width: 100%; margin: 20px auto; }
.findpro dl dt { width: 40px; height: 40px; border-radius: 50%; background: #77b917; margin: 0 auto 15px; line-height: 40px; color: #FFFFFF; font-size: 2.5rem; background: url("../img/index/morepro.gif"); }
.findpro dl dd { font-size: 1.12rem; font-style: italic; color: #548210; }

@keyframes circles { 0% { transform: rotateY(0deg); margin-top: 0px; }
  50% { transform: rotateY(360deg); margin-top: 0px; }
  100% { transform: rotateY(0deg); margin-top: 0px; } }

/*------------------SERVICES-----------------------*/
.service_index { width: 100%; padding-top: 80px; background: #f5f5f5; height: 450px; margin-bottom: 80px; }
.service_index .left { width: 475px; height: 355px; float: left; background: url("../img/index/service.jpg") no-repeat; }
.service_index .right { width: 650px; float: right; }
.service_index .right p { margin: 40px 0 30px; }
.service_index .right .lis { width: 49%; float: left; }
.service_index .right .lis a { display: block; width: 100%; height: 50px; line-height: 50px; color: #4f7b0f; }
.service_index .right .lis a:before { display: block; width: 50px; height: 50px; float: left; content: " "; margin-right: 10px; background: url("../img/icons.png") -130px -43px; }
.service_index .right .lis p { margin-top: 10px; text-align: left; }
.service_index .right .fl { float: right; }
.service_index .right .fl a:before { background-position-x: -190px; }

/*----------------------CLIENTS SAY-------------------------------*/
.clients_say p.center { text-align: left; margin: 40px 0 50px; font-size: 1.12rem; color: #666666;  }

.engineers { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between;}
.engineers dl { width: 32.5%;}
.engineers dl dt { width: 100%; height: 180px; background: #f5f5f5; padding-top: 20px; border-radius: 4px; margin-bottom: 40px; }
.engineers dl dt p { padding: 0 30px; }
.engineers dl dt p:before { display: block; width: 36px; height: 34px; content: " "; background: url("../img/icons.png") 0 -213px; }
.engineers dl dd { width: 100%; height: 80px; }
.engineers dl dd p { font-size: 1.5rem; color: #333333; text-align: right; font-weight: normal; float: left; width: 280px; padding-top: 18px; }
.engineers dl dd p span { font-size: 1rem; color: #666666; display: block; }
.engineers dl dd:after { display: table-cell; content: " "; float: right; width: 80px; height: 80px; background: url("../img/index/engineer_1.jpg"); }
.engineers dl dd.eng2:after { background: url("../img/index/engineer_2.jpg"); }
.engineers dl dd.eng3:after { background: url("../img/index/engineer_3.jpg"); }

/*-------------contacts---------------*/

.cont_way { width: 100%;margin: 50px 0 80px;  display: flex; flex-wrap: wrap; justify-content: space-between;}
.cont_way .left { width: 49%; margin-top: -8px; }
.cont_way .left p { line-height: 32px;width: 100%; margin-bottom: 10px; }
.cont_way .left p span { color: #548210; }
.cont_way .left > span { display: block; width: 100%; height: 32px; line-height: 32px; font-size: 1.12rem; color: #333333;  margin: 50px 0 10px; }
.cont_way .left > span:before { display: block; width: 25px; height: 32px; float: left; margin-right: 10px; background: url("../img/icons.png") -424px -145px; content: " "; }
.cont_way .cws { width: 49%; display: flex; flex-wrap: wrap; justify-content: space-between;}
.cont_way .cws dl { width: 49%; height: 148px;border: 1px solid #77b917;  border-radius: 4px; font-size: 1.12rem;  text-align: center; margin-bottom: 20px; }
.cont_way .cws dl dt { width: 100%; margin-top: 40px; height: 40px; line-height: 40px; display: table; margin-bottom: 8px; }
.cont_way .cws dl dt:before { display: inline-block; width: 40px; height: 39px; background: url("../img/icons.png") -290px -178px; content: " "; vertical-align: middle; margin-right: 10px; transition: all .2s; }
.cont_way .cws dl dt.telp:before { background-position-x: -342px; }
.cont_way .cws dl dt.skype:before { background-position-x: -391px; }
.cont_way .cws dl dt.whats:before { background-position-x: -439px; }
.cont_way .cws dl:hover { color: #77b917; }
.cont_way .cws dl:hover a { color: #77b917; }
.cont_way .cws dl:hover dt:before { background-position-y: -218px; }

.sns_info { width: 100%; padding: 100px 0; margin-bottom: 80px; position:relative; overflow:hidden}
.sns_info .bg_img{position:absolute;left:50%;top:0;transform:translate(-50%)}
.sns_info .bg_img img{display:block;width:auto;height:100%}
.sns_info .container{position:relative; z-index:1}
.sns_info .ltit { color: #FFFFFF; }
.sns_info .snses { height: 200px; margin-top: 55px; display: flex; flex-wrap:wrap; width: 100%; justify-content: space-between; }
.sns_info .snses dl { width: 24%; height: 178px; border: 1px solid #ffffff; border-radius: 4px; background: rgba(255, 255, 255, 0.2); transition: all .2s; }
.sns_info .snses dl * { transition: all .2s; }
.sns_info .snses dl a { display: block; }
.sns_info .snses dl dt { width: 40px; height: 40px; background: url("../img/icons.png") -253px -255px; margin: 45px auto 30px; }
.sns_info .snses dl dt.tw { background-position-x: -298px; }
.sns_info .snses dl dt.ins { background-position-x: -348px; }
.sns_info .snses dl dt.youtu { background-position-x: -395px; }
.sns_info .snses dl dt.pin { background-position-x: -439px; width: 58px; }
.sns_info .snses dl dd { font-size: 1rem; color: #CCCCCC;  text-align: center; }
.sns_info .snses dl span { display: block; width: 100px; height: 28px; line-height: 28px; text-align: center; color: #FFFFFF; background: #77b917; font-size: 1rem;  margin: 15px auto 0; border-radius: 4px; opacity: 0; }
.sns_info .snses dl:hover { background: rgba(255, 255, 255, 0.5); border-color: rgba(255, 255, 255, 0.5); box-shadow: 0px 0px 10px 0px #FFFFFF; }
.sns_info .snses dl:hover dt { background-position-y: -299px; margin: 35px auto 15px; }
.sns_info .snses dl:hover dd { color: #fff; }
.sns_info .snses dl:hover span { opacity: 1; }

@media (max-width:1179px) {
  img{width: 100%; height: auto;}
  .service_index .left{width: 40%;background-size: contain;}
  .service_index .right{width: 58%;}
}
@media (max-width:768px) {
    .sb_contacts,.small_banner{background:none;position:relative;margin-top:5rem; height:auto}
    .small_banner img{display:block}
    .small_banner .container{position:absolute;top:0;left:2%}
    .small_banner dl{margin-top:15vw}
  .service_index{height: auto;padding: 3rem 0;}
  .service_index .left,.service_index .right{width: 100%; float: unset;margin-bottom: 1rem;}
  .service_index .right{display: flex; flex-wrap: wrap; justify-content: space-between;}
  .service_index .right .lis{width: 49%; float: unset;}
  .engineers dl{width: 100%;display: flex; flex-wrap: wrap; justify-content: space-between;}
  .engineers dl dt{width: 70%; height: auto;padding: 1rem 0;}
  .engineers dl dd{width: 28%;}
  .engineers dl dd p{width: 100%;text-align: left; float: unset;padding: 0;}
  .engineers dl dd:after{float: unset;}
  
  
  .cont_way .left,.cont_way .cws{width:100%}
    .sns_info{padding-bottom:2rem;}
  .sns_info,.sns_info .snses{height:auto}
  .sns_info .snses dl{width:49%;margin-bottom:1rem}

}
@media (max-width:425px) {
  .solution_index .bd{height: auto;}
  .solution_index .bd dl{width: 49%; height: auto;}
  .solution_index .bd dl dd{padding-top: 1.8rem;}
  .solution_index .bd dl dd span{font-size: 1.2rem;}
  .service_index .right .lis{width: 100%;}
  .sns_info{background:#342f2b}
}
@media (max-width:375px){
    .service_index .left{height:250px}
}