.main-area{ background: url("../images/index/bg-line.jpg") no-repeat left top; background-size: 100% auto;   }  
 /*font-size*/
.title { font-size: 1.125rem; font-weight: 700;width:100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: break-word; transition: 375ms cubic-bezier(0.7, 0, 0.3, 1); }
@media (min-width: 740px) {
.title {font-size: 1.5rem; }
}
@media (min-width: 1100px) {
.title {font-size: 1.75rem; }
}
@media (min-width: 1300px) {
.title {font-size: 1.875rem; }
}
@media (min-width: 1600px) {
.title {font-size: 2rem; }
}
 
/*----------*/
/***** product  *****/
/*---------*/
.produt-wrap{width:100%; padding:50px 0px;margin:0px auto; }
.slider-for{ width: 100%; margin: auto;  list-style: none;}
.slider-for li{ width: auto; margin: auto; display: block; list-style: none;}
.slider-for li img{ width: auto;  margin: auto; display: block; list-style: none;}

.cms-slider-nav { width: 100%;  height: auto; margin:20px auto auto auto; padding:0px 0px 60px 0px;  position: relative;  }
/*.slider-nav li.slick-current.slick-active figure{  box-shadow:0px 0px 15px 2px #f39700; overflow: hidden;}
.slider-nav li.slick-current.slick-active figure img{ transform: scale(2.5);  }
*/
.slider-nav {  width: 100%;   margin: 0 auto; padding:10px 30px 0px 30px;display: flex; flex-wrap: wrap; position: relative; font-size: 0; list-style: none; order:3!important; }
.slider-nav li { position: relative; vertical-align: top; margin: 0 10px; padding:10px 5px 5px 5px;  border-radius:15px; }
.slider-nav li a{ color: #000;  }

.slider-nav li figure  {  overflow: hidden; display: block; vertical-align: top;  width:100%; height:auto;margin:20px auto auto auto; padding-top:66.25%; white-space: normal; word-break: break-word; position: relative;z-index: 3;  border-radius:15px;}
.slider-nav li figure img { position: relative;  transition: all 0.3s ease;z-index: 3;  border-radius:15px;}
.slider-nav li span{ line-height: 1.5rem;  display: block; padding: 15px 0px; text-align: center;}
.slider-nav li:hover figure img { transform: scale(1.5); border-radius:15px; } 

.slider-nav .slick-prev, .slider-nav .slick-next {top:calc(50% - 36px); width: 36px; height: 36px;}
.slider-nav .slick-prev{ left:-20px;}
.slider-nav .slick-next {right:-20px;}
@media (max-width: 320px) {
 .slider-nav {  padding:10px 10px 0px 10px;  }
   
}