﻿.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:#004098;  }


/*--分類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: #004098; 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:#004098; }
.download li:hover .news-box .news-date .date {color:#004098; }
.download li:hover figure img{transform: scale(1.1)}
.download li:hover .right-icon { background-color:#312d35; }
 
/*----------------------------------------/
filter-section
----------------------------------------*/
 .filter-section { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;  justify-content:flex-end;margin-bottom: 48px; padding-top: 22px;padding-bottom: 22px; border-bottom: 1px solid #e5ebee; color: #1d1d1f;}
.filter-section .compare-title{width: auto;color:#000; font-weight: 700; letter-spacing: 2px;}
.filter-section .select-type{width: 25%; padding: 0px 10px;}
.filter-section .compare-btn{width: auto; padding: 0px 10px;}
.filter-section .compare-btn .button { margin:auto 0px; padding: 15px;border-radius:5px; border:none; color: #fff; background-color: #000; font-size: 14px; line-height: 1.2857742857; font-weight: 700; letter-spacing:2px; }

.select-type{display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between}
.select-type .compare-row { width:100%; }  
.select-type input { width: 100%;height: 50px; margin-bottom: 0px; padding: 0 30px 0 10px;  background: url(../images/icon/search-1.svg)  no-repeat 100% 0px #fff; background-size: auto;  -webkit-appearance: none; -moz-appearance: none; appearance: none; font-size:0.9rem; color: #555555;letter-spacing: 0.05rem; border-radius:5px; border:solid 1px #e5ebee;}
.select-type input:focus{ border:solid 1px #004198;}

@media (max-width: 1120px) {
.filter-section .compare-title{width:8%; }
.filter-section .compare-btn{width: 12%;  }	
}
@media (max-width:840px) {
.filter-section .compare-title{width:10%; }
.filter-section .select-type{width: 74%}
.filter-section .compare-btn{width: 16%;}	
}

@media (max-width:767.98px) {
.filter-section .compare-title{width:100%;margin-bottom: 10px; text-align: center;}
.filter-section .select-type{width: 100%;margin-bottom: 10px;}
.filter-section .compare-btn{width: 100%;padding: 0px; }	
.filter-section .compare-btn .button { width: 100%; }
.select-type .compare-row { width: calc(100%/2 - 15px );margin: 5px auto;}  
.select-type .compare-row:first-child{width: calc(100% - 15px );}	
}
