@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); 
.pro_nt {
  width: 100%;
  height: 80px;
  line-height: 80px;
  margin-bottom: 80px;
  border-bottom: 1px solid #cccccc;
}

.pro_nt h1 {
  font-size: 16px;
  color: #333333;
  text-indent: 20px;
  font-weight: normal;
}

.pro_recom {
  margin: 5vw auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.pro_recom div {
  width: 32%;
  background: #efefef;
  position: relative;
  padding: 20px 10px;
  box-sizing: border-box;
  transition: all .2s;
  z-index: 0;
  margin-bottom: 2rem;
}

.pro_recom div * {
  transition: all .2s;
}

.pro_recom div img {
  width: 50%;
  height: auto;
  position: absolute;
  bottom: -30px;
  right: 10px;
  transition: all .5s ease-in;
  z-index: -1;
}

.pro_recom div:hover {
  border-radius: 5px;
  background: #f5f5f5;
}

.pro_recom div:hover span, .pro_recom div:hover em, .pro_recom div:hover i {
  color: #77b917;
}

.pro_recom div:hover img {
  transform: scale(1.05);
  bottom: -15px;
}

.pro_recom h5 {
  color: #77b917;
  text-transform: capitalize;
  font-size: 1rem;
  line-height: 2rem;
  font-weight: normal;
}

.pro_recom span, .pro_recom em, .pro_recom a, .pro_recom i {
  display: block;
  color: #676664;
}

.pro_recom span {
  font-size: 3rem;
  font-family: "Poppins";
}

.pro_recom em, .pro_recom i {
  display: block;
  font-style: normal;
  font-size: 1rem;
  line-height: 2rem;
}

.pro_recom i {
  margin-top: 40px;
}

.pro_recom dl:last-child span {
  font-size: 40px;
}

.pro_search {
  width: 100%;
  padding: 9rem 0;
  background: url("/static/old/img/product/bg_search.jpg") center;
}

.pro_search h6 {
  text-align: center;
  color: white;
  text-transform: uppercase;
}

.case_tab, .pro_case {
  width: 100%;
  color: white;
  padding: 5vw 0;
  box-sizing: border-box;
  background: url("/static/old/img/index/bg_2.jpg") no-repeat center;
  margin-bottom: 5vw;
}

.pro_case .container{overflow: hidden;}

.case_tab dl, .pro_case dl {
  width: 100%;
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.case_tab dl dt, .pro_case dl dt {
  color: white;
  font-size: 1.8rem;
  width: 35%;
  line-height: 2.8rem;
}

.case_tab dl dd, .pro_case dl dd {
  line-height: 2rem;
  padding-top: 2rem;
  font-size: 1rem;
  color: #b2b2b2;
  vertical-align: middle;
}

.case_tab dl dd span, .pro_case dl dd span {
  margin-right: 20px;
}

.case_tab dl dd a, .pro_case dl dd a {
  font-size: 1.5rem;
  color: #b2b2b2;
  vertical-align: middle;
  transition: all .2s;
}

.case_tab dl dd a:hover, .pro_case dl dd a:hover {
  color: white;
}

.pro_case .desc{color:#fff; font-size:1rem; line-height:1.5rem; margin-bottom:30px}

.case_tab ul, .pro_case ul {
  width: 100%;
}

.case_tab ul li, .pro_case ul li {
  width: 32%;
  min-width:300px;
  float: left;
  color: white;
  margin-right: 20px;
}

.case_tab ul *, .pro_case ul * {
  color: white;
}

.case_tab ul img, .pro_case ul img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
  border-radius: 5px;
  border: 1px solid white;
}

.case_tab ul h6, .pro_case ul h6 {
  width: 100%;
  overflow: hidden;
  font-size: 1rem;
  line-height: 2rem;
  text-transform: capitalize;
}
.case_tab ul a:hover h6, .pro_case ul a:hover h6 {color:#77b917}


.pro_navdesc{margin-bottom:50px}
.pro_navdesc .img{width:48%; margin-bottom:10px}
.pro_navdesc .img img{width:100%; height:auto}
.pro_navdesc .txt{width:48%}
.pro_navdesc .txt p{margin-bottom:10px}

.pro_list dl{padding:0 10px 50px 10px; border-radius:5px}
.pro_list dl:hover{box-shadow:0 0 10px #01448b}
.pro_list dl dd{display:unset}
.pro_list dl p{display:unset;}
.pro_list dl dd{height:auto}
.pro_list dl a.butt{display:block; width:170px; padding:10px 15px; color:#fff; background-color:#01448b; box-shadow:0 0 5px #01448b; border-radius:50px; box-sizing:border-box; position:absolute; bottom:10px; left:50%; margin-left:-85px}
.pro_list dl a.butt:hover{background-color:#77b917}

.pro_solution {
  margin-bottom: 80px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.container.pro_solution{margin-bottom:80px}
.pro_solution span {
  font-size: 1.8rem;
  margin-bottom: 10px;
}

.pro_solution div {
  width: 58%;
  min-width:300px;
  background: url("/static/old/img/product/pro_solution.jpg") no-repeat;
  background-size: cover;
  box-sizing: border-box;
  position: relative;
  min-height: 500px;
}

.pro_solution div dl {
  width: 100%;
  position: absolute;
  padding: 1rem;
  bottom: 20px;
  box-sizing: border-box;
}

.pro_solution div dl dt, .pro_solution div dl dd {
  color: white;
  transition: all .2s;
}

.pro_solution div dl dt {
  font-size: 1.8rem;
  margin-bottom: 10px;
}

.pro_solution div dl dd {
  font-size: 1rem;
  line-height: 2rem;
}

.pro_solution div a, .pro_solution > dl a {
  display: block;
  width: 100%;
  height: 100%;
  transition: all .2s;
}

.pro_solution div a:hover dt, .pro_solution div a:hover dd span, .pro_solution > dl a:hover dt, .pro_solution > dl a:hover dd span {
  color: #77b917;
}

.pro_solution > dl {
  width: 40%;
  min-width:300px;
  background: #f6f6f6;
  position: relative;
  border-bottom: 2px solid #77b917;
  box-sizing: border-box;
}

.pro_solution > dl dd {
  width: 100%;
  box-sizing: border-box;
  padding: 1rem;
  margin: 0;
}

.pro_solution > dl dd span {
  color: #333333;
  transition: all .2s;
}

.pro_solution > dl dd p {
  color: #808080;
}

.pro_solution img {
  width: 100%;
}

.pro_list{display: flex;flex-wrap: wrap; justify-content: space-around;}
.pro_list dl span{border-bottom:none; color:#77b917}
.pro_list dl p{display:block}
.pro_list dl p.desc{border-bottom:1px solid #ddd; text-align:left}
.pro_list dl dd>p{color:#77b917}


@media screen and (max-width:1030px) {
  .pro_help{background:none}
}
@media screen and (max-width:900px) {
  .pro_solution div{margin-bottom:2rem}
}
@media screen and (max-width:768px){
    .pro_navdesc .img,.pro_navdesc .txt{width:100%}
    .pro_recom div,.case_tab dl dt, .pro_case dl dt{width:98%}
    .pro_solution div,.pro_solution>dl{width:100%}
}
@media screen and (max-width:500px){
    .case_tab, .pro_case{background-size:cover}
    .case_tab dl dd a, .pro_case dl dd a{display:none}
    .case_tab ul li, .pro_case ul li{width:100%;margin-right:0}
}