﻿.new-tag { display: flex; flex-wrap: wrap; flex-direction: row;   width: 100%; transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s; overflow: hidden; text-transform: capitalize;  word-break: keep-all;   z-index: 9;  position: relative; }
a.new-tag-tcategory{ color:#fff;  }
.new-tag-tcategory{ width: auto;max-width: 100%; height: 40px; font-size: 14px; font-weight: 400; line-height: 1.57; letter-spacing: normal; position: relative; padding:10px; margin: 0px;   color: #fff; background:#c19963; -webkit-transition: background-color .2s,color .2s,border-color .2s; transition: background-color .2s,color .2s,border-color .2s;}
.new-tag-tcategory:hover{ color: #fff; background:#000;  }
a.new-tag-tcategory:hover{ color: #fff;  }
.blog-list {width: 100%;  margin:40px auto;  padding:0px; display: flex; flex-wrap: wrap;align-content: flex-start; position: relative; z-index: 1; }
.blog-list li{ width: calc(100%/3 - 30px);  height: auto; padding:10px;  margin:30px 15px; display: flex; flex-wrap: wrap;align-content: flex-start; box-sizing: border-box;  list-style: none;  transition: all 0.5s ease 0s; background: #fff;border: solid 1px #ebebeb;}
.blog-list li:hover{border: solid 1px #c30e24;}
.blog-list li:hover figcaption a h3{color:#c30e24;;}
.blog-list li:hover figure img{transform: scale(1.05);transition: all 0.5s ease-in-out;}
.blog-list figure  {width: 100%; padding-bottom:62.55%; height: 0; overflow: hidden; position: relative;  z-index: 1;   transition: all 0.5s ease-in-out; }
.blog-list figure img { max-height:100%; width: 100%; object-fit: contain; margin: auto; display: block; border-radius:0px;   transition: all 0.5s ease-in-out;}
.blog-list figcaption { box-sizing: border-box; color: #4c4c4c; font-size: 14px; font-weight: 400; line-height: 1.8rem; letter-spacing: 0.5px; padding: 20px 10px 10px 10px;  position: relative;  }
.blog-list figcaption .wrap { display: -ms-flexbox; display: flex; flex-wrap: wrap;   width: 100%; margin: 0;}
.blog-list figcaption h3 { position: relative; min-height: 66px;  font-size: 1.5rem; font-size: min(max(3.5vw, 1rem), 1.5rem);  margin-bottom: 10px; line-height: 2rem; font-weight:500; color:#2c2c2c; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: break-word;}
.blog-list figcaption a p { width: 100%; margin: 0px;  padding: 0px; font-size: 0.9375rem; line-height: 1.5rem; color:#777; overflow: hidden; word-break:break-all;  word-wrap: break-word; text-overflow: ellipsis; display: -webkit-box;  -webkit-line-clamp: 3; -webkit-box-orient: vertical;  }
.blog-list .date{  width: 40%; margin-top: -12%;  right: 0px;  padding: 0px;  height: 40px; color:#cacaca; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack:flex-start;  -ms-flex-pack: flex-start;justify-content: flex-start; -webkit-box-align:flex-start; -ms-flex-align: flex-start; align-items: flex-start; opacity: 1; z-index: 9; position: relative;}
.blog-list .slick-next {right: 5px;}
.blog-list .slick-prev {left: 5px; z-index: 99;}
@media (max-width: 1199.98px) {
.blog-list li{ width: calc(100%/3 - 20px); margin:30px 10px; }
}
@media (max-width: 768px) {
.blog-list li{ width: calc(100%/2 - 10px); margin:10px 5px; padding: 5px; font-size: 100%; }
.blog-list figcaption {font-size: 100%;  padding: 5px;   }  
.blog-list figcaption a h3 {  font-size:100%; padding: 0px; line-height: 1.5rem; }
}
@media (max-width: 320px) {
.blog-list li{ width: calc(100% - 10px); margin:10px auto;   }
}

 