/*********** List *************/
.newsList{border-top: 2px solid var(--main); box-sizing: border-box;}
.newsList .list{position: relative; border-bottom: 1px solid var(--border); box-sizing: border-box;}
.newsList .list .checkbox{position: absolute; left: 0; top: 30px; z-index: 5;}
.newsList .list > a{display: flex; gap: 30px; width: 100%; padding: 30px 0; box-sizing: border-box; text-decoration: none; color: inherit; transition: background-color 0.35s ease;}
.newsList .list > a:hover{background: rgba(0,40,120,0.02);}
.newsList .list_thumb{flex: 0 0 375px; width: 375px; aspect-ratio: 375/250; border-radius: var(--borderR20); overflow: hidden; background: var(--grayBg); position: relative;}
.newsList .list_thumb::after{content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,40,120,0); transition: background 0.35s ease; pointer-events: none; z-index: 1;}
.newsList .list > a:hover .list_thumb::after{background: rgba(0,40,120,0.08);}
.newsList .list_thumb img{display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;}
.newsList .list > a:hover .list_thumb img{transform: scale(1.05);}
.newsList .list_txt{flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 0 30px; box-sizing: border-box; justify-content: center;}
.newsList .list_meta{display: flex; gap: 15px; align-items: center; flex-wrap: wrap; margin-bottom: 15px;}
.newsList .list_cate{display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; height: 30px; line-height: 28px; box-sizing: border-box; background: var(--white); border: 1px solid var(--main); border-radius: var(--borderR5); font-weight: 600; color: var(--main); white-space: nowrap; transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;}
.newsList .list > a:hover .list_cate{background: var(--main); color: var(--white);}
.newsList .list_meta .date-txt{transition: opacity 0.35s ease;}
.newsList .list > a:hover .list_meta .date-txt{opacity: 1;}
.newsList .list_meta .date-txt::before{transition: color 0.35s ease;}
.newsList .list > a:hover .list_meta .date-txt::before{color: var(--main);}
.newsList .list_subject{font-weight: 600; color: var(--black); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 10px; transition: color 0.35s ease;}
.newsList .list .text-box{font-size: 1rem; line-height: 177.78%; letter-spacing: -0.54px; color: var(--basic); word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color 0.35s ease;}
.newsList .list > a:hover .list_subject{color: var(--main);}
.newsList .list > a:hover .text-box{color: var(--black);}


/*********** View *************/
.bbs_view {display:flex; flex-direction:column; gap:50px; align-items:stretch; max-width: 1320px; margin: 0 auto;}
.bbs_view .bbsView_tit {display:flex; flex-direction:column; gap:14px; align-items:center; padding-bottom:40px; border-bottom:1px solid var(--border); text-align:center;}
.bbs_view .bbsView_tit .star {display:block; margin:0 0 10px;}
.bbs_view .bbsView_tit .bbsname {color:var(--main); font-weight:600;}
.bbs_view .bbsView_tit .subject {color:var(--black); word-break:break-word;}
.bbs_view .bbsView_tit .view_detail {display:flex; align-items:center; justify-content:center; gap:37px;}
.bbs_view .bbsView_tit .view_detail li {display:flex; align-items:center; gap:2px; font-size:1rem; line-height:178%; color:var(--basic);}
.bbs_view .bbsView_tit .view_detail li.date {letter-spacing:0;}
.bbs_view .bbsView_tit .view_detail li.count {gap:7px; letter-spacing:var(--letter-spacing-body);}
.bbs_view .bbsView_tit .view_detail li.date::before {content:'\ebcc'; display:block; width:20px; height:20px; line-height:20px; font-size:20px; font-family:var(--icon); font-weight:400; color:var(--basic);}
.bbs_view .bbsView_tit .view_detail li.count::before {content:'\e8f4'; display:block; width:22px; height:22px; line-height:22px; font-size:22px; font-family:var(--icon); font-weight:400; color:var(--basic);}
.bbs_view .bbsView_tit .view_detail li.date + li.count {position:relative;}
.bbs_view .bbsView_tit .view_detail li.date + li.count::after {content:''; display:block; width:1px; height:16px; background:var(--border); position:absolute; left:-18px; top:50%; margin-top:-8px;}
.bbs_view .view_content {width:100%;}
.bbs_view .view_content_in {font-size:1rem; line-height:178%; letter-spacing:var(--letter-spacing-body); color:var(--basic); word-break:break-word; text-align:center;}
.bbs_view .view_content img {max-width:100%; height:auto !important;}
.bbs_view .view_content_in::after {content:''; display:block; clear:both;}
.bbs_view .bbs_view_btm {display:flex; flex-direction:column; gap:30px; width:100%;}
.bbs_view .view_file {display:flex; gap:25px; align-items:flex-start; padding:20px 23px; background:var(--grayBg);}
.bbs_view .view_file .btit {flex:0 0 140px; width:140px; font-size:1rem; line-height:178%; font-weight:600; letter-spacing:var(--letter-spacing-body); color:var(--black);}
.bbs_view .view_file .bstxt {flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:10px; justify-content:center;}
.bbs_view .view_file .bstxt a {display:inline-flex; align-items:center; gap:0; width:fit-content; max-width:100%; border-bottom:1px solid var(--black); padding-bottom:2px; box-sizing:border-box; font-size:0.889rem; line-height:162%; letter-spacing:var(--letter-spacing-body); color:var(--black); text-decoration:none; word-break:break-all;}
.bbs_view .view_file .bstxt a::before {content:'\e226'; display:block; width:23px; height:20px; line-height:20px; font-size:20px; font-family:var(--icon); font-weight:400; color:var(--black); flex:0 0 23px;}
.bbs_view .bbs_nav {display:flex; flex-direction:column; gap:1px; width:100%; border-bottom:1px solid var(--border);}
.bbs_view .bbs_bottom {display:flex; align-items:center; gap:25px; margin:0; padding:19px 20px; border-top:1px solid var(--border);}
.bbs_view .bbs_bottom dt {flex:0 0 140px; width:140px; display:flex; align-items:center; justify-content:space-between; font-size:1rem; line-height:178%; font-weight:600; letter-spacing:var(--letter-spacing-body); color:var(--black);}
.bbs_view .bbs_nav .bbs_bottom:first-child dt::after {content:'\e5ce'; display:block; width:23px; height:23px; line-height:23px; font-size:23px; font-family:var(--icon); font-weight:400; color:var(--black); opacity: 0.4;}
.bbs_view .bbs_bottom.last dt::after {content:'\e5cf'; display:block; width:23px; height:23px; line-height:23px; font-size:23px; font-family:var(--icon); font-weight:400; color:var(--black); opacity: 0.4;}
.bbs_view .bbs_bottom dd {flex:1; min-width:0; font-size:1rem; line-height:178%; letter-spacing:var(--letter-spacing-body); color:var(--basic); word-break:break-all;}
.bbs_view .bbs_bottom dd a {color:var(--basic); text-decoration:none;}
.bbs_view .bbs_bottom dd a:hover {color:var(--main);}
.bbs_view_btn {display:flex; justify-content:center; width:100%;}
.bbs_view .bbs_list_btn {color:var(--basic);}
.bbs_view .bbs_list_btn::before {background:var(--black);}
.bbs_view .bbs_list_btn::after {border-color:var(--border);}
.bbs_view .bbs_list_btn:hover{color: var(--white);}
.bbs_view .bbs_list_btn:hover::after {border-color:var(--black);}
.bbs_view .bbs_list_btn i::after {content:'\e241';}

.view_btn{display: flex; justify-content: center; margin: 30px 0 0;}
.view_btn a{width: 220px; background: var(--main); color: var(--white);}
.view_btn a:hover{color: var(--main);}
.view_btn a::before{background: var(--white);}
.view_btn a span{font-size: 0.889rem;}
.view_btn a i::after{content: '\e89e';}

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




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

/*********** List *************/
.newsList .list > a{gap: 20px; padding: 25px 0;}
.newsList .list_thumb{flex: 0 0 300px;}
.newsList .list_txt{padding: 0 10px;}


/*********** View *************/
.bbs_view {gap:40px;}
.bbs_view .bbsView_tit {padding-bottom:30px;}
.bbs_view .bbs_view_btm {gap:20px;}



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

/*********** List *************/
.newsList .list > a{flex-direction: column; gap: 15px; padding: 15px 0;}
.newsList .list .checkbox{top: 20px;}
.newsList .list_thumb{flex: none; width: 100%; height: auto; border-radius: var(--borderR10);}
.newsList .list_txt{padding: 0;}
.newsList .list_meta{gap: 10px; margin-bottom: 8px;}
.newsList .list_subject{margin-bottom: 6px;}
.newsList .list_cate{height: 26px; line-height: 24px;}


/*********** View *************/
.bbs_view {gap:30px;}
.bbs_view .bbsView_tit {gap:10px; padding-bottom:20px;}
.bbs_view .bbsView_tit .star {margin:0 0 6px;}
.bbs_view .bbsView_tit .view_detail {gap:22px;}
.bbs_view .bbsView_tit .view_detail li {}
.bbs_view .bbsView_tit .view_detail li.count {gap:3px;}
.bbs_view .bbsView_tit .view_detail li.date::before {width:18px; height:18px; line-height:18px; font-size:18px;}
.bbs_view .bbsView_tit .view_detail li.count::before {width:20px; height:20px; line-height:20px; font-size:20px;}
.bbs_view .bbsView_tit .view_detail li.date + li.count::after {height:12px; left:-11px; margin-top:-6px;}

.bbs_view .bbs_view_btm {gap:10px;}
.bbs_view .view_file {gap:6px; padding:12px 15px; flex-wrap: wrap;}
.bbs_view .view_file .btit {flex:auto; width:100%;}
.bbs_view .view_file .bstxt {gap:5px;}
.bbs_view .view_file .bstxt a::before {width:16px; height:16px; line-height:16px; font-size:16px; flex:0 0 16px;}
.bbs_view .bbs_bottom {gap:10px; padding:12px 10px;}
.bbs_view .bbs_bottom dt {flex:0 0 80px; width:80px;}
.bbs_view .bbs_bottom dd a{text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block;}
.bbs_view .bbs_nav .bbs_bottom:first-child dt::after {width:16px; height:16px; line-height:16px; font-size:16px;}
.bbs_view .bbs_bottom.last dt::after {width:16px; height:16px; line-height:16px; font-size:16px;}
.bbs_view .bbs_list_btn i{width: 18px; height: 18px;}
.bbs_view .bbs_list_btn i::after{line-height: 18px; font-size:18px;}


.view_btn{margin: 20px 0 0;}
.view_btn a{width: 180px;}
.view_btn a i::after{font-size: 18px;}

}