﻿.service-page{clear:both; padding-top:0px; }


/* Search */
.searchInfo{width:500px; margin-left:-250px; float:left; position:absolute; left:50%; bottom:-5px; z-index:5; background:#fff; padding:5px; border-radius:12px 12px 0 0;  }
.searchInfo:before{position: absolute;  content: ""; bottom:5px ; left: -20px; background: 0 0; width: 20px; height: 20px; border-bottom-right-radius: 15px; box-shadow: .313rem .313rem 0 .313rem #fff; transform: rotate(0deg);}
.searchInfo:after{position: absolute;  content: ""; bottom:5px ; right: -20px; background: 0 0; width: 20px; height: 20px; border-bottom-right-radius: 15px; box-shadow: .313rem .313rem 0 .313rem #fff; transform: rotate(90deg)}
.searchInfo label{display:none;}
.searchInfo .wrap-search{float:right; position:relative; width:100%; z-index:2;}
.searchInfo .wrap-search input[type="text"]{width:100%; border:none; height:46px; border-radius:7px; padding: 0 60px 0 20px; outline:none; background:var(--colorBg); font-size:16px; }
.searchInfo .wrap-search .navSearch{font-weight: 400;width:50px; line-height:46px; font-size:16px; color:var(--color1); opacity:.75; text-align:center; position:absolute; right:0; top:0;}

.searchInfo.result{}
.searchInfo.result .wrap-search{display:flex;}
.searchInfo.result .wrap-search .total{display:flex; white-space:nowrap; line-height:46px; padding:0 20px 0 20px; background:var(--colorBg); border-radius:7px 0 0 7px; position:relative;}
.searchInfo.result .wrap-search .total:after{content:''; width:1px; height:16px; margin-top:-8px; background:#000; position:absolute; top:50%; right:0; opacity:.2}
.searchInfo.result .wrap-search .total b{padding: 0 5px; font-weight:900; color:var(--color1)}
.searchInfo.result .wrap-search input[type="text"]{border-radius: 0 7px 7px 0}

@media (max-width:767px){
    .searchInfo{width:calc(100% - 30px); left:0; margin-left:15px;}
}

.itemThumb{width:100%; float:left; position:relative; padding:0px;}
.itemThumb .wrap-img{width:100%; float:left; position:relative; margin-bottom:25px;}
.itemThumb .wrap-img a.nav-img{width:100%; float:left; position:relative;}
.itemThumb .wrap-img a.nav-img:before{content:''; padding-top:70%; display:block;}
.itemThumb .wrap-img a.nav-img .inner{position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; overflow:hidden; border-radius:12px;}
.itemThumb .wrap-img a.nav-img .inner img{width:inherit; height:inherit; object-fit:cover}
.itemThumb .wrap-img .wrap-attr{position:absolute; left:0; bottom:-3px; z-index:2; background:#fff; display:flex; font-size:14px; padding-top:13px; padding-right:20px; border-radius: 0 10px 0 0; }
.itemThumb .wrap-img .wrap-attr:before{position: absolute; content: "";  top: -20px;  left: 0;  background: 0 0; width: 20px; height: 20px; border-bottom-right-radius: 15px; box-shadow: .313rem .313rem 0 .313rem #fff; transform: rotate(90deg);}
.itemThumb .wrap-img .wrap-attr:after{position: absolute;  content: ""; top: 11px; right: -20px; background: 0 0; width: 20px; height: 20px; border-bottom-right-radius: 10px; box-shadow: .313rem .313rem 0 .313rem #fff; transform: rotate(90deg);}
.itemThumb .wrap-img .wrap-attr .ele{position:relative; padding-left:22px; margin-right:20px; z-index:5;}
.itemThumb .wrap-img .wrap-attr .ele b{font-weight:normal;}
.itemThumb .wrap-img .wrap-attr .ele:before{font-family: "Font Awesome 5"; font-weight:300; content: "\f073"; font-size:16px; position:absolute; left:0; top:-4px; color:var(--color1)}
.itemThumb .wrap-img .wrap-attr .ele:last-of-type{margin-right:0; padding-left:26px;}
.itemThumb .wrap-img .wrap-attr .ele:last-of-type b{padding-right:5px;}
.itemThumb .wrap-img .wrap-attr .ele:last-of-type:before{content:"\f06e"; top:-2px;}
.itemThumb .wrap-info{width:100%; float:left; position:relative;}
.itemThumb .wrap-info a.name{width:100%; float:left; position:relative; color:#000; transition:.3s;}
.itemThumb .wrap-info a.name:hover{color:var(--color1)}
.itemThumb .wrap-info a.name h3{margin:0; padding:0;font-family: "Signika", sans-serif; font-size:19px; font-weight:500; line-height:25px; }
.itemThumb .wrap-info .detail{width:100%; float:left; color:rgba(0,0,0,.75); font-size:16px; line-height:25px; padding-top:10px; -webkit-line-clamp: 3; -webkit-box-orient: vertical; white-space: normal; overflow: hidden; text-overflow: ellipsis;display: -webkit-box;}

@media (max-width:767px){
    .service-page{padding-bottom:0;}
} 

ul.listInfo{width:calc(100% + 30px); margin:30px 0 0 -15px; padding:0; list-style:none; float:left; position:relative; z-index:5;}
ul.listInfo li{float:left; margin-top:30px; padding: 0 15px; position:relative;float:left; }

@media (max-width: 767px){
    ul.listInfo{margin-top:0px;}
}

@media (min-width: 768px) and (max-width: 991px){
     ul.listInfo li{width:50%;}
}

@media (min-width: 992px) and (max-width: 1199px){
     ul.listInfo li{width:33.3333333333333%;}
}
@media (min-width: 1200px) and (max-width: 1439px) {
    ul.listInfo li{width:33.3333333333333%;}
}
@media (min-width: 1440px){
    ul.listInfo li{width:25%;}
}

