

/*********** List *************/
.news_list{display: flex; flex-wrap:wrap; gap:30px;}
.news_list .list{position: relative; width:calc((100% - 90px)/4);}
.news_list .list::before{content:''; display: block; width: 100%; height: 100%; box-sizing:border-box; border:1px solid var(--border); position: absolute; left: 0; top:0; z-index: -1;}
.news_list .list .checkbox{display: inline-block; position:absolute; left:5px; top:5px; z-index: 2;}
.news_list .list a{display: block;}
.news_list .list dl{}
.news_list .list dl dt{aspect-ratio:3/2; overflow: hidden;}
.news_list .list dl dt img{display: block; width: 100%; height: 100%; object-fit:cover;}
.news_list .list dl dd{padding: 30px; box-sizing:border-box; display: flex; flex-direction: column; gap:16px;}
.news_list .list dl dd h4{line-height: 1.6em; height: 3.2em; font-weight: 400; color:var(--black); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.news_list .list dl dd .date{font-size: 0.889rem; font-weight: 300; letter-spacing: 0; color:var(--light); opacity: 0.8;}
.news_list .list dl dd .date::before{content:'\ebcc'; display: inline-block; vertical-align: middle; margin: -2px 5px 0 0; font-size:20px; font-weight: 400; font-family:var(--icon); color:inherit;}

/* 1. 기본 상태 설정 (부드러운 전환을 위해) */
.news_list .list {
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.news_list .list dl dt img {
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), filter 0.4s ease;
}

.news_list .list::before {
    transition: all 0.4s ease;
}

.news_list .list dl dd h4 {
    transition: color 0.3s ease;
}

/* 2. 호버 효과 시작 */

/* [카드 전체] 살짝 떠오르며 그림자 강조 */
.news_list .list:hover {
    transform: translateY(-8px);
}

.news_list .list:hover::before {
    border-color: transparent; /* 테두리 대신 그림자로 시선 분산 */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    background: var(--white); /* 배경색이 명확해지도록 설정 */
}

/* [이미지] 확대되면서 살짝 밝아짐 (흑백이라면 컬러로 전환 가능) */
.news_list .list:hover dl dt img {
    transform: scale(1.08);
    filter: brightness(1.05);
}

/* [제목] 포인트 컬러로 변경 및 텍스트 강조 */
.news_list .list:hover dl dd h4 {
    color: var(--main); /* 혹은 브랜드 컬러 */
    font-weight: 600;
}

/* [날짜 아이콘] 시계 아이콘만 살짝 회전하거나 통통 튀는 효과 */
.news_list .list:hover dl dd .date::before {
    animation: icon-bounce 0.5s ease;
}

@keyframes icon-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}


/*********** View *************/
.bbs_view_wrap{padding: 140px 0 0; position: relative; max-width:1050px; margin: 0 auto;}
.bbs_view{}
.bbsView_tit{text-align:center; padding: 0 0 30px;}
.bbsView_tit .cate_tit{color:var(--main); font-weight: 600; padding-bottom: 10px;}
.bbsView_tit .subject{color:var(--black);}
.bbsView_tit .view_detail{display: flex; align-items:center; justify-content: center; gap:10px 37px; flex-wrap:wrap; padding: 20px 0 0;}
.bbsView_tit .view_detail li{font-size:0.889rem; color:var(--basic); line-height: 150%; letter-spacing: var(--letter-spacing-body); box-sizing:border-box; position: relative;}
.bbsView_tit .view_detail li::after{content:''; display: block; width: 1px; height: 16px; background:var(--border); position: absolute; right: -18px; top:50%; margin-top: -8px;}
.bbsView_tit .view_detail li:last-child::after{display: none;}
.bbsView_tit .view_detail li.count::before{content:'\e8f4'; display: inline-block; vertical-align: middle; margin: -2px 7px 0 0; font-size:22px; width: 22px; height: 22px; line-height: 22px; font-family: var(--icon);}


.view_content{padding: 30px 0; box-sizing:border-box; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);}
.view_content::after{content:''; display: block; clear: both;}
.view_content img{max-width:100% !important; height: auto !important;}


.view_file{margin:30px 0 0; padding: 25px 20px; box-sizing:border-box; background:var(--grayBg); display:flex;}	
.view_file .btit{width:150px; font-size:1rem; font-weight: 500; letter-spacing:var(--letter-spacing-body); line-height: 100%; color:var(--black); box-sizing:border-box; position: relative;}	
.view_file .bstxt{width:calc(100% - 150px); line-height: 100%; box-sizing:border-box;}	
.view_file .bstxt a{display:inline-block; font-size:1rem; letter-spacing:var(--letter-spacing-body); line-height:110%; color:var(--black); border-bottom:1px solid var(--basic);}
.view_file .bstxt a::before{content:'\e226'; display: inline-block; vertical-align: middle; margin:-2px 0 0 0; font-size:20px; font-family:var(--icon); font-weight: 400;}
.view_file .bstxt a ~ a{margin-top: 15px;}


.bbs_bottom{border-bottom:1px solid var(--border); display:flex;}
.bbs_bottom dt{width:170px; padding:20px; font-size:1rem; letter-spacing:var(--letter-spacing-body); line-height: 100%; color:var(--black); box-sizing:border-box; position: relative;}
.bbs_bottom dt::after{content:'\e313'; display: inline-block; font-size:23px; width: 23px; height: 23px; line-height: 23px; font-family: var(--icon); color:var(--black); opacity: 0.4; position: absolute; right: 20px; top:50%; margin-top: -11px;}
.bbs_bottom.prev dt::after{transform:rotate(180deg);}
.bbs_bottom dd{width:calc(100% - 170px); padding:20px; font-size:1rem; letter-spacing:var(--letter-spacing-body); line-height: 100%; box-sizing:border-box;}
.bbs_bottom dd a{line-height: 100%; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display:block; width: 100%;}


/*******************************************************************************
    @media  1300px              
*******************************************************************************/
@media all and (max-width:1300px){

/*********** List *************/
.news_list .list{width:calc((100% - 60px)/3);}


}
/*******************************************************************************
    @media  ~980px              
*******************************************************************************/
@media all and (max-width:980px){


/*********** List *************/
.news_list{gap:20px;}
.news_list .list{width:calc((100% - 20px)/2);}
.news_list .list dl dd{padding: 20px;}


/*********** View *************/
.bbs_view_wrap{padding: 120px 0 0;}
.bbs_view{}
.bbsView_tit{padding: 0 0 20px;}

.view_content{padding: 20px 0;}

.view_file{margin:20px 0 0;}	


}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){


/*********** List *************/
.news_list{gap:15px;}
.news_list .list{width:100%;}
.news_list .list dl dd{padding: 15px; gap:10px;}
.news_list .list dl dd .date::before{font-size:16px;}


/*********** View *************/
.bbs_view_wrap{padding: 100px 0 0;}
.bbs_view{}
.bbsView_tit{padding: 0 0 15px;}
.bbsView_tit .cate_tit{padding-bottom: 6px;}
.bbsView_tit .view_detail{gap:6px 20px; padding: 15px 0 0;}
.bbsView_tit .view_detail li::after{height: 10px; right: -10px; margin-top: -5px;}
.bbsView_tit .view_detail li.count::before{margin: -2px 5px 0 0; font-size:16px; width: 16px; height: 16px; line-height: 16px;}

.view_content{padding: 15px 0;}

.view_file{margin:15px 0 0; padding: 20px 15px; flex-wrap:wrap; gap:15px;}	
.view_file .btit{width:100%;}	
.view_file .bstxt{width:100%;}
.view_file .bstxt a ~ a{margin-top: 10px;}
.view_file .bstxt a::before{font-size:16px;}

.bbs_bottom dt{width:110px; padding:15px;}
.bbs_bottom dt::after{font-size:18px; width: 18px; height: 18px; line-height: 18px; right: 15px; margin-top: -9px;}
.bbs_bottom dd{width:calc(100% - 110px); padding:15px;}


}