/*********** List *************/
.photo_list{display:flex; flex-wrap:wrap; gap:30px;}
.photo_list .list{width:calc((100% - 90px)/4); box-sizing:border-box; border:1px solid var(--border); position:relative; transition:border-color .3s linear;}
.photo_list .list .checkbox{display:inline-block; position:absolute; left:5px; top:5px; z-index:2;}
.photo_list .list a{display:block;}
.photo_list .list .thumb{position:relative; width:100%; aspect-ratio:375/281; overflow:hidden;}
.photo_list .list .thumb img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s cubic-bezier(0.215,0.61,0.355,1);}
.photo_list .list .desc{display:flex; flex-direction:column; gap:8px; align-items:center; padding:25px; box-sizing:border-box; text-align:center;}
.photo_list .list .desc .date{display:flex; align-items:center; justify-content:center; gap:4px; font-family:var(--eng); font-size:0.889rem; line-height:1; color:var(--light);}
.photo_list .list .desc .date::before{content:'\ebcc'; font-family:var(--icon); width: 20px; height: 20px; line-height: 20px; font-size:20px; color:var(--light); font-weight:400;}
.photo_list .list .desc h4{width:100%; font-weight: 400; word-break:break-all; text-align:center; color:var(--black); overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; transition:color .3s linear;}
.photo_list .list:hover{border-color:var(--main);}
.photo_list .list:hover .thumb img{transform:scale(1.06);}
.photo_list .list:hover .desc h4{color:var(--main);}

.photo_list .list{transition:transform .3s linear, box-shadow .3s linear, border-color .3s linear;}
.photo_list .list:hover{transform:translateY(-6px); box-shadow:0 12px 24px rgba(17,17,17,0.08); border-color:var(--border);}

/*********** View *************/
.bbs_view_wrap{max-width:1050px; width: 90%; margin: 0 auto; padding: 200px 0;}
.bbsView_tit{text-align:center; padding: 0 0 30px;}
.bbsView_tit .cate_tit{color:var(--main); font-weight: 700; padding-bottom: 10px;}
.bbsView_tit .subject{color:var(--black); font-weight: 700;}
.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:165px; font-size:1rem; font-weight: 700; letter-spacing:var(--letter-spacing-body); line-height: 100%; color:var(--black); box-sizing:border-box; position: relative;}	
.view_file .bstxt{width:calc(100% - 165px); 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(--black);}
.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; font-weight: 700; 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; font-weight: 400;}
.bbs_bottom.prev dt::after{transform:rotate(180deg);}
.bbs_bottom dd{width:calc(100% - 170px); padding:20px; font-size:1rem; font-weight: 400; 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 1500px
*******************************************************************************/
@media all and (max-width:1500px){



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

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




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


/*********** List *************/
.photo_list{gap:20px;}
.photo_list .list{width:calc((100% - 20px)/2);}
.photo_list .list .desc{padding:20px;}
.photo_list .list .desc .date::before{width: 16px; height: 16px; line-height: 16px; font-size:16px;}

/*********** View *************/
.bbs_view_wrap{padding: 140px 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 *************/
.photo_list{gap:15px;}
.photo_list .list{width:100%;}
.photo_list .list .desc{gap:5px; padding:15px;}


/*********** View *************/
.bbs_view_wrap{padding: 100px 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;}


}