#news {position: relative; overflow: hidden; padding: 90px 0 100px;}
#news .tit {margin-bottom: 50px;}

/* ul.news-lists { max-width: 1200px; margin:0 auto; }  */
ul.news-lists .news-con {display: flex; align-items: center; width: 100%; filter:drop-shadow(0px 2px 10px rgba(0,0,0,0.10)); border-radius: 20px; margin-bottom: 24px; background-color: rgba(255, 255, 255, 0.3);  border: 3px solid #fff; padding: 25px 30px; position: relative; transition: all .2s;}
ul.news-lists .news-con:last-child {margin-bottom: 0;}
 ul.news-lists .news-con a {position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; z-index: 1;} 
ul.news-lists .news-con .news-img {border-radius: 10px; overflow: hidden; width: 200px; height: 130px; position: relative; margin-right: 25px; text-align: center; background: #fff; transition: all .2s;}
/*ul.news-lists .news-con .news-img img {max-width: 100%; height: 100%; transform: scale(1); transition: all 0.5s;}*/
ul.news-lists .news-con .news-img img {max-width: 100%; height: 100%; transition: all 0.5s;}
ul.news-lists .news-con .news-txt {flex: 1 1 75%;}
ul.news-lists .news-con .news-txt h3 {font-size: 18px; word-break: keep-all; color: #333; width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3em; font-weight: bold;}
ul.news-lists .news-con .news-txt p{ font-size: 14px; color: #7d7d7d; line-height: 22px; margin: 24px 0 20px;     overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} 
ul.news-lists .news-con .news-txt .date{font-size: 13px; color: #bbb;} 

/* more-btn 설정 */
#news .more-btn {display: flex; align-items: center; justify-content: center; width: 149px; margin: 0 auto; position: relative; padding: 14px 32px; background: #fff; color: #333; border-radius: 30px; box-shadow: 0px 2px 4px rgba(0,0,0,0.2); margin-top: 64px; overflow: hidden; transition: all 0.1s;}
#news .more-btn a{position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1;}
#news .more-btn i {width: 3px; height: 15px; background: linear-gradient(117deg, #0f5097 -43%, #10539c -43%, #8de4ff 214%); transform:rotate(17deg); transition: all 0.4s;}
#news .more-btn span {font-size: 14px; font-weight: 500; margin: 0 10px;}
#news .more-btn svg {fill: #003876; transition: all 0.4s;}


/* hover */
ul.news-lists .news-con:hover {background-color: #003876; transform: scale(1.05); border: 3px solid #003876;}
ul.news-lists .news-con:hover .news-txt h3 {color: #fff;}
ul.news-lists .news-con:hover .news-txt p {color: #f9f9f9;}
ul.news-lists .news-con:hover .news-txt .span {color: #ddd;}
#news .more-btn:hover {background: #003876; color: #fff;}
#news .more-btn:hover i {transform: rotate(17deg) translateX(-4px);}
#news .more-btn:hover svg {fill: #ffffffd8; transform: translateX(4px);}

@media (max-width: 1280px) { 
    #news {padding: 80px 0 90px;}
    #news .bg img {height: 1200px;}
    #news .tit {margin-bottom: 36px;}
    ul.news-lists {margin:0 20px; } 
    ul.news-lists .news-con:hover {transform: scale(1.02);}
    ul.news-lists .news-con .news-txt p {margin: 18px 0 14px;}
    ul.news-lists .news-con {padding: 25px 20px;}
 } 

@media (max-width:480px){
    #news {padding: 65px 0 80px;}
    #news .tit {margin-bottom: 30px;}
    #news .bg img {height: 1500px;}    
    ul.news-lists .news-con {flex-direction: column;}
    ul.news-lists .news-con .news-img {margin-right: 0;}
    ul.news-lists .news-con .news-txt {margin-top: 20px;}
    ul.news-lists .news-con .news-txt h3 {font-size: 17px;}
    ul.news-lists .news-con .news-txt p {margin: 12px 0 10px;}
    #news .more-btn {margin-top: 53px;}
}