﻿.download{width: 100%;  margin: 0px auto; padding:50px 0px; display: flex; flex-wrap: wrap; position: relative;z-index: 1;}
.download li{ width:calc(100%/2 - 40px); margin: 20px; box-sizing: border-box; list-style: none; transition: all 0.5s ease 0s;  }
.download figure  {width: 100%; padding-bottom: 140%; height: 0; background-color: #fff; overflow: hidden; position: relative;  z-index: 1; transition: all 0.5s ease 0s; transition: all 0.5s ease-in-out;}
.download figure img { max-width:100%; height: auto; object-fit: cover; margin: auto; display: block; transition: all 0.5s ease-in-out;}
.download .item  {width:100%; height: auto; padding: 20px ; display: flex; flex-wrap: wrap; position: relative;z-index: 1;background-color: #f1f1f1; clip-path: polygon(100% 0, 100% 80%, 95% 100%, 0 100%, 0 0);  }
.download .news-pic  {width:30%; height: auto; padding: 0px; position: relative; }
.download .news-box {width: 70%; margin:0px;padding:10px 20px 30px 20px;  box-sizing: border-box; }
.download .inner-txt{ width:100%;margin-bottom: 15px;  padding:0px;word-break:normal;word-wrap: normal;position: relative }
.download .news-box .inner-txt h3 {position: relative;width: 100%;padding: 0px;  margin: 30px 0px;  font-size: 1.125rem; font-size: min(max(3.5vw, 1rem), 1.125rem); font-weight:700;   overflow-wrap: break-word; overflow: hidden; white-space:pre-wrap;word-break:normal; word-wrap:break-word; text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 3;  -webkit-box-orient: vertical; }
.download h3 a { color:#000; }
.download .news-box .inner-txt p { padding:0px;  margin:0px 0px 15px 0px; font-size:1rem; line-height:1.5rem; font-weight:400;color: #555; overflow: hidden; white-space:pre-wrap;word-break:normal; word-wrap:break-word; text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 3;  -webkit-box-orient: vertical;}
 
.download .news-box .news-date { width: 100%; margin: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;}
.download .news-box .news-date .date { font-size: 0.9rem; font-weight: 400;}
.download .news-box .news-date .date .bom { margin-left: 5px;}
.download .news-box .news-date .new-tag  {padding: 2px  10px;border-radius: 15px;color:#fff;display: block;	font-size: 12px; background-color:#4a5a68;  }


/*--分類new-tg --*/
.tag-wrap { width: 100%;  height: auto;padding: 0px 40px 0px 0px;  display: flex; align-items: flex-end; justify-content: space-between;  flex-wrap: wrap;}
.right-icon {width: 60px;height: 60px;display: flex; justify-content: center; align-items: center; background-color: #4a5a68; border-radius:15px;  }
.right-icon i img{width: 40px;height: 40px; }   

@media (max-width: 1024px) {
.download{ width:calc(100% + 40px); margin-left: -20px; margin-right: -20px; padding: 0px;   }
}
@media (max-width: 840px) {
.download .news-box{ padding:0px; }  
.download .news-box .inner-txt h3 {  margin:0px 0px 10px 0px;   }	
}
@media (max-width: 767.98px) {
.download li{ width:calc(100% - 20px); margin:50px 10px 10px 10px;  }	
.download .item  { border-radius:15px; clip-path:none;}
.download .list-box{ height: 100px; margin:20px auto auto auto; padding:0px;  box-sizing: border-box;   cursor: pointer }  
 }
 
 @media (max-width:440px) {
.download .news-pic  {width:100%;   }
.download .news-box {width: 100%; margin:0px;padding:10px 0px; }
.download .inner-txt{ padding:0px;}
}
/*  hover*/
.download li:hover{ border-color:rgba(230,0,18,.3);  }
.download li:hover h3 a,.download li:hover p{ color:#4a5a68; }
.download li:hover .news-box .news-date .date {color:#4a5a68; }
.download li:hover figure img{transform: scale(1.1)}
.download li:hover .right-icon { background-color:#312d35; }
 
 
.new-tag { width:auto;; font-size: 0.875rem; font-weight: 400;position: relative; }
@media (max-width: 768px) {
.new-tag {  font-size: 0.75rem; }    
}
.new-tag a{color:#fff; padding:2px 10px;  border: solid 1px #4b5a67; background-color: #4b5a67;   }
.new-tag a:hover {color:#fff; background:#1e88c9;}
.news-list{width: 100%; margin: 0px auto; padding:50px 0px 0px 0px; display: flex; flex-wrap: wrap;}
.news-list li{ width:calc(100%/4 - 30px);margin:30px 15px; box-sizing: border-box; list-style: none; transition: all 0.5s ease 0s; border: solid 1px #d9dcde;}
.news-list figure  {width: 100%; padding-bottom:72.5%; height: 0; overflow: hidden; position: relative;  z-index: 1; transition: all 0.5s ease 0s; transition: all 0.5s ease-in-out;}
.news-list figure img { max-width:100%; height: auto; object-fit: cover; margin: auto; display: block; transition: all 0.5s ease-in-out;}
.news-list .item  {width:100%; height: auto; padding:10px; position: relative;z-index: 1;   }
.news-list .news-pic  {width:100%; height: auto; padding: 0px; position: relative;   }
.news-list .news-box {position: relative;width: 100%; margin:0px;padding: 10px;  box-sizing: border-box;  }
.news-list .news-box .inner-txt h3 {position: relative;width: 100%;padding: 0px 0px 0px 6px;  margin:0px 0px 15px 0px; font-size:1.188rem; line-height:1.5rem; font-weight:400; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:3; -webkit-box-orient: vertical; overflow-wrap: break-word; }
.news-list .inner-box{ text-align: right}
 
 

.news-list a h3 { color:#4a5a68; }
.news-list a:hover h3,.news-list a:hover p{ color:#fff; }
.news-list p{ height: 72px;  font-size:1rem; line-height: 1.375rem; color:#919191; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow-wrap: break-word; }

.view { width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-end;  }
.view span { display:flex; margin: 2px;  width:6px; height:6px; background-color:#0b1f8f;}

/*  hover*/
.news-list li:hover{ background:#F6F6F4; }
.news-list li:hover h3,.news-list li:hover p{ color:#2eb14c; }
.news-list li:hover .new-tag a{ color:#fff; border: solid 1px #2eb14c; background-color:#2eb14c  }
.news-list li:hover .view span {background-color:#fff;}
.news-list li:hover .news-box .inner-txt h3:after {  background-color:#2eb14c }
 


.time { width: 100%;text-align: right; color: #ff6633;}
.time .day{ margin-bottom: 5px; font-size: 1.75rem;line-height: 1.275rem; font-weight: 900;}
.time .mon{  font-size: 1rem;line-height: 1rem; font-weight: 500;}



@media (max-width: 844px) {
.news-list h3 {min-height:38px;font-size:1rem; line-height: 1.15rem; }  
.news-list p { font-size:0.875rem; line-height: 1.15rem; }
}
@media (max-width: 798px) {
.news-list li{ width: calc(100%/2 - 20px); margin:50px 10px;  }
 .listDateBox {font-size: 11px;}
}

@media (max-width:767.98px) {
.news-list{ width: calc(100% + 20px); margin-left: -10px;margin-right: -10px; }
.news-list li{ width: calc(100%/2 - 10px); margin:40px 5px;  }
.news-list .item {  border-radius:15px;  }
.news-list figure img { border-radius:15px; }
.news-list .news-box { padding: 10px 0px;  }	
.news-list .news-box .inner-txt h3 {font-size:1.125rem;}
}

@media (max-width:320px) {
.news-list li{width:100%; }   
}



@-webkit-keyframes sx {
from {  -webkit-transform: translateX(0);  transform: translateX(0); }
50% { -webkit-transform: translateX(-10px); transform: translateX(-10px); }
to {  -webkit-transform: translateX(0);  transform: translateX(0); }
}

@keyframes run {
from { -webkit-transform: translateX(0);  transform: translateX(0); }
50% { -webkit-transform: translateX(-10px); transform: translateX(-10px); }
to {  -webkit-transform: translateX(0); transform: translateX(0); }
}


