.TOTAL_Article {width: 100%; height: 100%; float: left;}

.TOTAL_Article .list_box{width: 100%; height: 100%; float: left; background-color: #fff;
  padding: clamp(14px, 1.042vw, 20px) clamp(21px, 1.563vw, 30px);
  display: flex; flex-direction: column; grid-gap: 20px;
  border-radius: 20px; box-shadow: 3px 3px 30px rgba(0,0,0,0.01);
}

.TOTAL_Article .list_box ul.list_li{width: 100%; float: left; display: flex; flex-direction: column; grid-gap: 0;}
.TOTAL_Article .list_box ul.list_li li{width: 100%; float: left; border-bottom: 1px solid #eee;}
.TOTAL_Article .list_box ul.list_li li:last-child{border-bottom: none;}

/* 아이템 레이아웃: 좌측 콘텐츠 + 우측 버튼 */
.TOTAL_Article .list_box ul.list_li li a.art_item{
  width: 100%; float: left; display: flex; align-items: center; justify-content: space-between;
  padding: clamp(14px, 1.042vw, 20px) 0;
  text-decoration: none; transition: background-color 0.2s;
}

/* 좌측 콘텐츠 영역 */
.TOTAL_Article .art_cont{flex: 1; min-width: 0; padding-right: 20px;}

/* 제목 - 2줄 말줄임 */
.TOTAL_Article .art_subject{
  font-size: calc(var(--tx-sm-size) * 1);
  color: #222; font-weight: 600; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 10px;
}

/* 메타 정보 (발행처, 발행일자) */
.TOTAL_Article .art_meta{
  display: flex; flex-direction: column; gap: 4px;
}
.TOTAL_Article .art_publisher,
.TOTAL_Article .art_date{
  font-size: calc(var(--tx-sm-size) * 0.85);
  color: #888; line-height: 1.4;
}

/* 기사보기 버튼 */
.TOTAL_Article .art_btn{
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 20px;
  background-color: #333; color: #fff;
  font-size: calc(var(--tx-sm-size) * 0.85);
  border-radius: 30px; white-space: nowrap;
  transition: all 0.3s;
}
.TOTAL_Article li a.art_item:hover .art_btn{
  background-color: var(--primary, #555);
}
.TOTAL_Article li a.art_item:hover .art_subject{
  color: #000;
}

/* 타이틀 박스 */
.TOTAL_Article .tit_box{width: 100%; float: left; position: relative; padding-right: 40px}
.TOTAL_Article .tit_box .tx1{width: 100%; float: left; font-size: calc(var(--tit-md-size) * 1.1); letter-spacing: -2px; color: #000; font-weight: 700; margin-bottom: 15px}
.TOTAL_Article .tit_box .tx2{width: 100%; float: left; font-size: calc(var(--tx-sm-size) * 1); color: #333}
.TOTAL_Article .tit_box .more{width: 36px; height: 36px; border-radius: 4px; background-color: var(--primary); display: flex; justify-content: center; align-items: center; color: #fff; font-size: 20px; position: absolute; right: 0px; bottom: 0px; transition: all 0.5s;}
.TOTAL_Article .tit_box .more:hover{background-color: var(--primary-hover);}

/* 구분 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
  .TOTAL_Article .art_subject{font-size: calc(var(--tx-sm-size) * 1);}
  .TOTAL_Article .art_btn{padding: 10px 24px; font-size: calc(var(--tx-sm-size) * 0.85);}
}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
  .TOTAL_Article .art_subject{font-size: calc(var(--tx-sm-size) * 1); -webkit-line-clamp: 2;}
  .TOTAL_Article .art_meta{gap: 3px;}
  .TOTAL_Article .art_publisher,
  .TOTAL_Article .art_date{font-size: calc(var(--tx-sm-size) * 0.9);}
  .TOTAL_Article .art_btn{padding: 7px 16px; font-size: calc(var(--tx-sm-size) * 0.85);}
  .TOTAL_Article .art_cont{padding-right: 12px;}
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/
