﻿
.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:40px 0px; display: flex; flex-wrap: wrap;align-content: flex-start; position: relative; z-index: 0; }

.blog-list li {  width: calc(100%/2 - 30px);  list-style: none;position: relative;  margin-bottom: 32px; flex-grow: 1;}
.blog-list li::after { content: ""; flex: 0 0 auto; height: 1px; display: block; background-color: #d0d0d0;margin-right: 50px; margin-top: 24px;}
.blog-list .item {  display: flex;  flex-wrap: wrap;  width: 100%;transition: all 0.3s linear 0s;}
.blog-list .blog-pic { width: 132px; height: 132px; min-height: auto;  border-radius: 16px;overflow: hidden;  z-index: 0;  position: relative; }
.blog-list .blog-box {  width:calc(100% - 132px);     display: flex; flex-direction: column;  justify-content: center; padding: 0px 50px 0px 24px; }
.blog-list figure  {width: 100%; padding-bottom: 100%; height: 0; overflow: hidden; position: relative;  z-index: 1;  background-size: cover; transition: all 0.5s ease-in-out;}
.blog-list figure img { max-width:100%; height: auto; object-fit: cover; margin: auto; display: block; border-radius:0px;   transition: all 0.5s ease-in-out;}
.blog-list .blog-box .blog-date { width: 100%; margin:0px 0px 10px 0px;  display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center;  -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;}
.blog-list .blog-box .blog-date .date { font-size: 12px; font-weight: 400;}
.blog-list .blog-box .blog-date .date .top {  }
.blog-list .blog-box .blog-date .date .bom {margin-left: 10px;}
.blog-list .blog-box .blog-date .new-tag  {padding: 2px 8px;border-radius: 25px;color: #e50113;display: block;	font-size: 13px;border: 1px solid #e50113; }
.blog-list .blog-box .blog-inner {width: 100%;}
.blog-list .blog-box h3 {   margin-bottom: 12px; }
.blog-list .blog-box h3 a {  font-weight: 500; font-size: 1.125rem; font-size: min(max(3.5vw, 1rem), 1.125rem); color: #000; white-space: wrap;overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break:normal; overflow-wrap: break-word;  }
.blog-list .blog-box  p {min-height:70px;font-size: 0.875rem; color: #333333; line-height: 1.375rem; letter-spacing: 0.75px;   margin:5px 0px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow-wrap: break-word; word-break:normal;}
.blog-list li:hover .item  h3 a ,.blog-list li:hover .item  p ,.blog-list li:hover .item .blog-date {color: #b64400;}
.blog-list li:hover:hover figure img { transform: scale(1.05);  opacity: 0.6; }
@media (max-width: 640px) {
.blog-wrap{display: none }  
.blog-list li { margin:10px auto;  }    
.blog-list .blog-pic { width: 100%;  }
.blog-list .blog-box { width: 100%;padding: 0px;  }
.blog-list .slick-dots{ margin: 0;left: 0!important;  }
}
.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;   }
}
