/*********** List *************/
.news_list{display: flex; flex-wrap:wrap; gap:30px; max-width:100%;}
.news_list .list{position:relative; width: calc((100% - 60px)/3); overflow: hidden; border-radius:var(--borderR20);}
.news_list .list::before{content:''; display: block; width: 100%; height: 100%; box-sizing:border-box; border:1px solid var(--border); border-radius:var(--borderR20); position: absolute; left:0; top:0; z-index: -1;}
.news_list .list .checkbox{display:inline-block; position: absolute; left:5px; top:5px; z-index:3;}
.news_list .list a{display: block; position: relative; z-index: 2; width: 100%; height: 100%;}
.news_list .list a::after{content:''; display: block; width: 100%; height: 100%;  box-sizing:border-box; border:5px solid var(--main); position: absolute; left:0; top:0; border-radius:var(--borderR20); transition:all .3s; opacity: 0;}
.news_list .list a:hover::after{opacity: 1; transition:all .3s linear;}
.news_list .list a .thumb{aspect-ratio:3/1.8; overflow: hidden;}
.news_list .list a .thumb img{display: block; width: 100%; height: 100%; object-fit:cover; transition:all .3s;}
.news_list .list a .desc{padding: 40px; box-sizing:border-box; transition:all .3s;}
.news_list .list a .desc h4{color:var(--black); font-weight: 600; line-height: 120%; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block; transition:all .3s;}
.news_list .list a .desc .text_box{margin: 10px 0 0; line-height: 1.6em; height: 3.2em; font-weight: 400; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; transition:all .3s;}
.news_list .list a .desc ul{padding: 20px 0 0; display: flex; gap:10px 15px; flex-wrap:wrap;}
.news_list .list a .desc ul li{font-size:0.789rem; line-height: 130%; font-weight: 600; color:var(--basic);}
.news_list .list a .desc ul li::before{display: inline-block; vertical-align: middle; margin: -1px 6px 0 0; font-size:20px; color:inherit; font-weight: 400; font-family:var(--icon);}


.news_list .list a .desc ul li.place::before{content:'\f35d';}
.news_list .list a .desc ul li.date::before{content:'\e8b5';}

.news_list .list a:hover .thumb img{transform:scale(1.1); transition:all .3s linear;}




/*********** View *************/
.bbs_view{border-top:3px solid var(--main);}
	.bbsView_tit{display: flex; align-items:center; gap:15px; border-bottom:1px solid var(--border); box-sizing:border-box; padding: 30px 150px 30px 20px; position: relative;}
	.bbsView_tit .national{max-width: 50px; height: 50px; border-radius:50%; overflow: hidden; aspect-ratio:1/1; position: relative;}
	.bbsView_tit .national::before{content:''; display: block; width: 100%; height: 100%; position: absolute; left:0; top:0; box-sizing:border-box; border:1px solid var(--border); border-radius:50%;}
	.bbsView_tit .national img{width: 100%; height: 100%; object-fit:contain; display: block;}
	.bbsView_tit .subject{flex:1; font-size:1.667rem; font-weight: 700; line-height: 150%; color:var(--black);}
	.bbsView_tit .count{position: absolute; right: 20px; top:50%; transform:translateY(-50%); font-size:0.889rem; line-height: 130%; color:var(--basic);}
	.bbsView_tit .count::before{content:'\e8f4'; display: inline-block; vertical-align: middle; margin:-2px 6px 0 0; font-size:24px; font-family:var(--icon); color:var(--black); font-weight: 400;}
	
	.bbsView_info{padding: 30px 20px; box-sizing:border-box; background:var(--grayBg); border-bottom: 1px solid var(--border); display: flex; align-items:center; gap:10px 30px; flex-wrap:wrap;}
	.bbsView_info dl{display: flex; align-items:center; gap:15px;}
	.bbsView_info dl dt{font-size:0.778rem; font-weight: 700; color:var(--main); width: 72px; height: 30px; line-height: 28px; box-sizing:border-box; border-radius:30px; text-align:center; background:var(--white); border:1px solid var(--main); flex-shrink: 0;}
	.bbsView_info dl dd{font-size:0.889rem; line-height: 150%;}
	
	
	

	.view_content{padding:30px 0; box-sizing:border-box;}
	.view_content::after{content:''; display: block; clear: both;}
	.view_content img{max-width:100%; height:auto !important;}
	.view_content p {vertical-align:top;}


	.view_file{margin:30px 0 0; box-sizing:border-box; background:var(--grayBg); display:flex;}	
	.view_file .btit{width:180px; padding:20px 25px; box-sizing:border-box; position: relative;}
	.view_file .btit p{padding-top: 5px; font-size:0.889rem; font-weight: 600; line-height: 120%; color:var(--black);}
	.view_file .btit p img{display: inline-block; vertical-align: middle; width: 20px; height: auto; margin: -2px 5px 0 0;}
	.view_file .bstxt{width:calc(100% - 180px); padding:20px 20px 20px 0; box-sizing:border-box;}	
	.view_file .bstxt a{display:inline-block; font-size:0.889rem; line-height:120%; color:var(--basic); margin: 5px 0 0; transition:all .3s;}
	.view_file .bstxt a:hover{color:var(--black);}
	.view_file .bstxt a:first-child{margin: 0;}

	.bbs_bottom{border-top:1px solid var(--border); display:flex;}
	.bbs_bottom.last{border-bottom:1px solid var(--border);}
	.bbs_bottom dt{width:170px; padding:20px; font-size:1rem; font-weight: 600; line-height: 120%; color:var(--black); box-sizing:border-box; position: relative;}
	.bbs_bottom dt .arrow{color:var(--black); opacity:0.5; position:absolute; right:0; top:50%; transform:translateY(-50%);}
	.bbs_bottom dd{width:calc(100% - 170px); padding:20px; font-size:1rem; line-height: 120%; box-sizing:border-box;}
	.bbs_bottom dd a{line-height: 120%; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block;}





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


/*********** List *************/
.news_list .list a .desc{padding: 30px;}



}

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


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



/*********** View *************/
	.bbsView_tit{padding: 20px 120px 20px 10px;}
	.bbsView_tit .subject{font-size:1.444rem;}
	.bbsView_tit .count{right: 10px;}
	
	.bbsView_info{padding: 20px 10px; gap:10px 20px;}
	
	
	
	
	
	.view_content{padding:25px 0;}

	.view_file{margin:25px 0 0;}	
	.view_file .btit{width:120px; padding:15px;}	
	.view_file .bstxt{width:calc(100% - 120px); padding:15px;}	

	.bbs_bottom{}
	.bbs_bottom.last{}
	.bbs_bottom dt{width:120px; padding:15px;}
	.bbs_bottom dd{width:calc(100% - 120px); padding:15px;}




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

/*********** List *************/
.news_list{gap:10px;}
.news_list .list{width: 100%; border-radius:var(--borderR10);}
.news_list .list::before{border-radius:var(--borderR10);}
.news_list .list a::after{border-radius:var(--borderR10);}
.news_list .list a .desc{padding: 20px;}
.news_list .list a .desc .text_box{margin: 6px 0 0;}

.news_list .list a .desc ul{padding: 15px 0 0; gap:10px;}
.news_list .list a .desc ul li::before{margin: -1px 4px 0 0; font-size:16px;}


/*********** View *************/
	.bbs_view{border-width:2px;}
	.bbsView_tit{gap:10px; padding: 15px 10px;}
	.bbsView_tit .national{max-width: 40px; height: 40px;}
	.bbsView_tit .subject{font-size:1.222rem; line-height: 135%;}
	.bbsView_tit .count{position: static; transform:translateY(0);}
	.bbsView_tit .count::before{margin:-2px 6px 0 0; font-size:20px;}
	
	.bbsView_info{padding: 15px 10px; gap:8px 15px;}
	.bbsView_info dl{gap:10px;}
	.bbsView_info dl dt{width: 60px; height: 25px; line-height: 23px;}
	
	
	
	.view_content{padding:25px 0;}

	.view_file{margin:20px 0 0;}	
	.view_file .btit{width:90px; padding:12px;}	
	.view_file .btit p{padding-top: 4px;}
	.view_file .btit p img{width: 16px; height: auto;}
	.view_file .bstxt{width:calc(100% - 90px); padding:12px;}	

	.bbs_bottom{}
	.bbs_bottom.last{}
	.bbs_bottom dt{width:100px; padding:12px;}
	.bbs_bottom dd{width:calc(100% - 100px); padding:12px;}
	.bbs_bottom dt .arrow{font-size:20px;}
	
	
	
	
	
	.view_btns{gap:5px; padding: 20px 0 0;}
	.view_btns a{width: 130px; height: 50px; line-height: 48px; padding: 0 22px;} 
	.view_btns a::after{width: 16px; height: 16px; font-size:16px; line-height: 16px; right: 16px; margin-top: -8px;}
	
	
	
	
	
}