.blog{width:100%;float:left;background:#f2f2f2}
.blogContainer{width:1500px; margin:100px auto 70px;}
.search-result{width:100%;padding: 0 1.5%; float:left;margin:0 0 10px 0;font-size: 16px;font-weight: 600;}
.blog-left{width:66.8%; float:left;margin-right: 1.7%}
  .blog-left ul{list-style-type:none; padding: 0;margin: 0;font-size: 0}
  .blog-left li{width:50%;padding: 0 16px; margin:16px 0; display: inline-block;vertical-align:top; overflow:hidden;}
.blogitem{width:100%; float:left;color: #333;}
.blogitem img{max-width:100%;height: auto; display:block;object-fit: cover} 
 .blogitem:hover {color: #b05f10;text-decoration: none;transition: 0.3s;-moz-transition: 0.3s;-webkit-transition: 0.3s;-o-transition: 0.3s; }
.blogpic{width:100%;float:left; overflow: hidden;}
.blogpic img{-webkit-transition: all 0.8s ease;-moz-transition: all 0.8s ease;-o-transition: all 0.8s ease;transition: all 0.8s ease;display: block;margin: 0 auto}
.blog-name{width:100%; max-height: 3em; float:left;margin-bottom: 15px; font-size:20px; color: #111;letter-spacing: 0.02em; line-height: 1.5em;position: relative;text-align: justify;font-weight: 500;overflow: hidden;} 
.blogbox{width: 100%;height: 250px; float: left;padding:25px;background-color: #fff;position: relative}
.blog-genre{width:100%; float:left;margin:0 0 15px 0;font-size: 16px; color: #555;}
.blog-txt{width:100%;max-height: 5em;overflow: hidden; float:left;line-height: 1.7em;font-size: 15px;text-align: justify}
.blog-date{width:90%; position: absolute;left: 25px;bottom: 20px; font-weight: 400;font-size: 14px}
.blog-right{width:30%; float:left;box-shadow:-0.5px -0.5px 10px #ccc;padding: 50px 35px;margin: 20px 0;}
.blog-left li:hover .blogpic img{transform: scale(1.1);}

@media screen and (max-width: 1600px) {
.blogContainer{width:88%;margin:80px auto 50px;}
}
@media screen and (max-width: 1280px) {
.blogContainer{width:90%;margin:60px auto 50px;}
.blogbox{height: 280px; }
.blog-name{max-height:4.7em;font-size:20px; } 
}
@media screen and (max-width: 980px) {
.blogContainer{width:94%;margin:35px auto 50px;}
.search-result{padding: 0 1.5%;}
.blog-left{width:100%;margin: 0 0 30px}
.blog-right{width:96%;margin: 0 2%; padding: 40px 35px}	
}  
@media screen and (max-width: 767px) {
.blogitem{width: 100%; }
.blog-left{width:100%;margin-right: 0}
.blog-right{width:100%;padding: 25px 20px;margin: 0 0 10px}
.blogContainer{width: 90%; margin:30px auto;}
.blog-left li{width: 100%; margin:12px 0;padding: 0}
.blog-name{max-height: 100%; } 
.blogbox{height: auto; padding:25px 25px 70px;}
.blog-txt{max-height: 100%;}	
.blog-date{position: absolute;left: 25px;bottom: 15px;}
}

.madp{float:left;width:52%;margin:0 24% 25px; border-radius: 50%;overflow: hidden;}
.madp img{max-width:100%;height: auto;display: block;object-fit: cover} 
.hottx{float:left;width:100%; text-align: center}
  .hottx h2{margin:0 0 15px 0; font-size:22px;font-weight: 600;letter-spacing: 0.05em;}
  .hottx p{margin:0; font-size:15px;line-height: 1.7em;text-align:justify;font-weight: 400;}
.article-title{width:100%;float: left;margin:35px 0 10px;font-size:16px;font-weight: 500; padding:8px 0; border-bottom:1px solid #ccc; border-top:1px solid #111;}
.article-title span{font-size:14px; color: #777;margin-left: 5px;}
.blogall{float:left;width:100%;margin-bottom: 40px; display:block;}
.blogall ul { margin:0; padding:0; list-style:none;} 
.blogall li {font-size:14px;color: #777;border-bottom: 1px solid #ddd;padding-bottom: 5px;margin-bottom: 5px} 
.blogall a {ext-decoration:none;transition: 0.5s;font-weight: 400;}
.blogall a:hover{text-decoration: none;transition: 0.5s;color: #b05f10}
.inpage a {text-decoration:none; font-weight: 700;transition: 0.5s;color: #000}
.inpage a:hover {text-decoration: none;transition: 0.5s;color: #777} 
.search{width: 100%;border: 1px solid #ddd;padding: 10px;}
.forms-table{width:100%;float:left; margin:0;position: relative;border:1px solid #ccc;}
.tableinfo{width:89%; height:42px; float:left;padding:10px 12px; font-size: 15px; box-sizing:border-box;border-radius:0; background-color:transparent;color:#000 !important; border:0;}
.forms-table input::placeholder {font-size: 14px;color: #777;}
.search-icon{width:11%; height:42px; float:left;line-height: 42px; font-size: 13px;color: #000;text-align: center;color: #666}
.tag-list{width:100%; float:left;margin: 25px 0 0 0}
.blog-btn{width:auto; float: left; text-align:center;font-size: 13px;letter-spacing:0.03em;margin-right: 12px;margin-bottom: 12px}
  .blog-btn a {display:block; padding:2px 13px;background-color: #e6e6e6; border-radius:5px;transition: 0.3s;-moz-transition: 0.3s;-webkit-transition: 0.3s;-o-transition: 0.3s; }
  .blog-btn a:hover {color: #fff; background-color:#b05f10;}

@media screen and (max-width: 980px) {
.article-title{margin:25px 0 10px;}
.blogall{margin-bottom: 30px;}
}
.forms-table .search-icon{
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.forms-table{
  position:relative;
  display:flex;
  align-items:center;
}

.forms-table .tableinfo{
  width:100%;
  padding-right:96px;
}

.forms-table .search-clear{
  position:absolute;
  right:52px;
  top:50%;
  transform:translateY(-50%);
  width:28px;
  height:28px;
  border:0;
  border-radius:50%;
  background:#f3f4f6;
  box-shadow:none;
  outline:none;
  cursor:pointer;
  font-size:18px;
  line-height:28px;
  color:#666;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

.forms-table .search-clear:hover{
  background:#e5e7eb;
  color:#222;
}

.forms-table .search-icon{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  border:0;
  background:transparent;
  box-shadow:none;
  outline:none;
  padding:0;
  margin:0;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
}
.search-icon[disabled],
.search-icon.is-disabled{
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}




@media (min-width: 992px) {
  .blog-right {
    position: sticky !important;
    top: 60px;
    align-self: flex-start;
    height: fit-content;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .blog-right .theiaStickySidebar {
    position: static !important;
    transform: none !important;
    width: auto !important;
    min-height: 0 !important;
  }
}

@media (max-width: 991px) {
  .blog-right {
    position: static !important;
    top: auto !important;
    min-height: 0 !important;
  }
}