@charset "UTF-8";

/*검색창*/
.srh{width: 100%; margin: 30px 0 20px 0; display: inline-block;}
.srh > div{display: flex; align-items: center; justify-content: flex-end;}
.srh input{padding-left: 10px; height: 37px; width: 300px; border: 1px solid #bbb; border-right: none;}
.srh button{cursor: pointer; background: #f6f8fd; height: 37px; border: 1px solid #bbb; padding: 0 10px; border-radius: 0;}

 /* 공지글 행 스타일 */
.notice-row {background-color: #f6f8fd; font-weight: bold;}
table.list_table{border-collapse: collapse; font-size: 16px;  border-spacing: 0 10px; width: 100%;}
table.list_table td{ border-bottom: 1px solid #dfdfdf}
.list_table a{padding: 20px 0; display: block;}
.list_table thead th{padding: 20px 0; background: #000; color: #fff;}

/*페이징*/
#page ul li {display: inline;}
#pagination{margin-top: 20px;}
.paginationjs ul{display: flex; justify-content: center; gap: 10px; margin-top: 30px;}
.paginationjs-page a{display: flex;  align-items: center; justify-content: center; border: 1px solid #b3b3b3; height: 35px; width: 35px; cursor: pointer; text-align: center; border-radius: 100%;}
.paginationjs-page a:hover{border: 1px solid #ccc;}
.paginationjs-pages .active a{border: 1px solid var(--color); background: var(--color); color: #fff;}
.paginationjs-next,
.paginationjs-prev{font-size: 20px; cursor: pointer; padding: 5px;}
.paginationjs .paginationjs-pages li.active > a {background-color: var(--color); color: white; border-color: var(--color);}
.paginationjs .paginationjs-pages li.disabled > a {color: #ccc; cursor: not-allowed;}

/*글쓰기 버튼*/
#addBtn button{border: 1px solid #bbb; background :#fff; padding: 10px 15px; cursor: pointer; transition: 0.3s;}
#addBtn button:hover{border: 1px solid var(--color); background :var(--color); color: #fff;}

/*페이지 평가*/
.satisfaction-survey {padding: 20px; background-color: #f9f9f9; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); margin: 50px auto 0px auto;}
.satisfaction-survey label {font-size: 16px; font-weight: bold; color: #333;}
.rating-options {display: flex; flex-wrap: wrap;}
.rating-options label {display: flex; font-size: 14px; color: #555; margin-right: 10px; align-items: center;}
.rating-options input[type="radio"] {all: revert; margin: 0 5px 0 0;}
.satisf_btn {all: revert; padding: 5px 10px; background-color: #555555; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; transition: background-color 0.3s ease; width: auto; display: inline-block;}
.satisf_btn:hover {background-color: #0056b3;}
.rating-options i{color: #ffca00;}
.rating-options i.color_g{color: #e3e3e3;} 
.satisf_btn{width: 60px; height: 100%; border-radius: 0;}
#message{font-family: 'Pretendard', sans-serif; background: #fff; width: 100%; padding: 10px; border: 1px solid #ccc; border-right: 0; border-radius: 0; font-size: 11px; height: 100%; box-sizing: border-box; resize: none;}


/*갤러리*/

#gallery {display: flex; flex-direction: column; align-items: flex-start; width: 100%;}

#gallery .gallery-row {
    display: flex; gap: 15px;
    flex-wrap: nowrap;
    justify-content: flex-start; /* 왼쪽 정렬로 변경 */
    width: 100%;
    margin-bottom: 20px;
}
#gallery .frame_txt{padding: 15px;}
#gallery .frame {background: #fff;
    flex: 0 0 calc((100% / var(--columns)) - 15px);
    max-width: calc((100% / var(--columns)));
    aspect-ratio: 1 / 1; /* 정사각형 프레임 */
    cursor: pointer;
    box-sizing: border-box;
    transition: 0.3s;
    overflow: hidden;
    display: flex !important;
    flex-direction: column; border: 1px solid #ccc;
}
#gallery .frame:last-child {margin-right: 0;}
#gallery .frame:hover {box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); border: 1px solid #324b95; transform: scale(1.03);}
#gallery .frame img {width: 100%; height: 70%; object-fit: cover; background: #ccc;}
#gallery .title {font-size: 16px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#gallery .writer {font-size: 12px; color: #939393; margin-top: 15px;}

.detail_title{display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; border-bottom: 1px solid #ccc;}
.detail_top .detail_top_info{font-size: 15px;}
.detail_top .detail_top_info ul{font-size: 13px; display: flex; gap: 15px; justify-content: flex-end; flex-wrap: wrap;} 
.detail_top h2{font-size: 25px; margin-bottom: 10px;}
#reply_yn_div textarea{font-family: 'Pretendard', sans-serif; width: 100%; resize: none; border: 1px solid #ccc; border-right: none; padding: 10px; height: 100px;}
.comments{position: relative; display: flex;}
#comment_size{position: absolute; top: 78px; right: 56px; font-size: 12px; color: #ccc; font-weight: 300;}
#reply_yn_div h4{font-size: 18px; margin-bottom: 5px;}
.comments button{cursor: pointer; transition: 0.3s; border-radius: 0 5px 5px 0; color: #ffffff; height: 100%; min-height: 60px; width: 50px; background: var(--color); border: 1px solid #ccc; font-size: 14px;}
.comments button:hover{ background: var(--color); color: #fff;  border: 1px solid var(--color); opacity: 0.8;}

/*첨부파일*/
#all_file a{display: flex;color: #636363; font-size: 12px; display: flex; align-items: center; margin-top: 10px;}
#atc_file a{color: #4d4d4d; padding: 10px;}
#atc_file{display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-right: 10px;}

/*게시판 하단 버튼*/
.list_btn button{transition: 0.3s; background: #fff; color: #656565; border: 1px solid #cbcbcb; font-size: 16px; cursor: pointer; border-radius: 100%; height: 50px; width: 50px;}
.list_btn button:hover{background: #324b95; border: 1px solid #324b95; color: #fff;}
.tooltip {position: relative; display: inline-block;
}
.tooltip-text { visibility: hidden; width: 50px; background-color: #333; color: #fff; text-align: center; border-radius: 5px; padding: 5px; position: absolute; bottom: 115%; left: 50%; transform: translateX(-50%); z-index: 1; opacity: 0; transition: opacity 0.3s; font-size: 12px;}
.tooltip:hover .tooltip-text { visibility: visible; opacity: 1; }
.toastui-editor-contents p{margin: 30px 0; font-size: 18px; font-family: 'HancomMalangMalang-Regular', 'yg-jalnan', 'Pretendard', sans-serif;}

/*댓글*/
#reply_div .add-btn{font-size: 12px; background: #fff; border: 1px solid #ccc; padding: 5px 10px; border-radius: 5px; display: inline-block; margin-top: 10px;}



/*게시판*/
.list_top{display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 20px;}
.newsList {margin-bottom:100px; border-top: 3px solid #000; } 
.newsList li {position: relative; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } 
.newsList li dl dd { font-weight: 600; } 
.newsList li dl dt i{color: #ff5722;} 
.newsList li dl dt { margin-bottom: 12px; font-size: 20px; font-weight: 600; line-height:140%; } 
.newsList li dl dd.date { font-size: 18px; font-weight: 400; } 
.newsList li a{transition: 0.1s; color: #222; padding: 25px 0px; display: block;} 
.newsList li a:hover{color: var(--primary-color);} 
.newsListetc{display: flex; position: absolute; top: 20px; right: 20px;}
.newsListetc a{ top: 0; right: 0; padding: 10px !important;}

/* 글쓰기 버튼 */
.btm_item{position: relative;}
.writing_bt {background: #fff; white-space: nowrap; transition: 0.5s; position: absolute; right: 0; top: 0; letter-spacing: 2px; border: 1px solid #939393; width: 50px; height: 50px; border-radius: 30px; display: flex; align-items: center; justify-content: center; }
.writing_bt:hover { width: 100px; font-weight: 300; }
.writing_bt:after { content: '\f044'; font-family: "Font Awesome 6 Free"; transform: translateX(2px); font-size: 20px; color: #444; }
.writing_bt:hover:after {content: '글쓰기'; transform: translateX(0px); font-size: 20px; color: #fff; font-weight: 400; }
 
/*write*/
.write_section{width: 100%; display: flex; align-items: stretch; border-bottom: 1px solid #ccc;}
.write_section:first-child{border-top: 3px solid #000;}
.write_th{min-width: 200px; text-align: right; font-size: 22px; font-weight: 500; padding: 20px; background: #eee;} 
.write_section input[type="text"]{height: auto; border: none; width: calc(100% - 230px); padding: 20px; font-size: 20px; font-weight: 300;}
.write_section .cke_chrome{border: nonㄴe; width: calc(100% - 200px);}
.notice_box{cursor: pointer; display: flex; align-items: center; width: 30px; justify-content: center;}
.notice_box .icon {color: #dfdfdf; transition: color 0.3s; font-size: 25px;}
.notice_box input[type="checkbox"]:checked + .icon{color:#ff5722;}
.file-upload { position: relative; overflow: hidden; display: inline-block; padding: 20px;}
.file-upload label {display: inline-block; background-color: #000000; color: #fff; padding: 5px 20px; border-radius: 5px; cursor: pointer; font-weight: 500;}
.file-upload label:hover {opacity: 0.8;}
.file-upload input[type="file"] { position: absolute;  opacity: 0; right: 0; top: 0; cursor: pointer; }
.file-upload .file-name { margin-left: 10px; font-weight: 500; color: #595959; font-size: 14px;}
#fileList{line-height: 27px;}
#fileList li{display: flex; gap: 5px; align-items: center;}
#fileList a {padding-right: 15px;}
.write_bt{display: flex; justify-content: flex-end; margin-top: 30px; margin-bottom: 100px; gap: 10px;}
.write_bt a{white-space: nowrap; transition: 0.5s; letter-spacing: 2px; border: 1px solid #939393; width: 50px; height: 50px; border-radius: 30px; display: flex; align-items: center; justify-content: center;}
.write_bt a:hover { width: 100px; background: #ff5722; border: 1px solid #ff5722;}
.write_bt a:after {font-family: "Font Awesome 6 Free"; font-weight: 600; transform: translateX(1px); font-size: 20px; color: #444; }
.write_bt a:hover:after { transform: translateY(0) translateX(0); font-size: 20px; color: #fff; font-weight: 400; }
.write_bt1::after{content: '\f00c';}
.write_bt1:hover::after{content: '작성';}
.write_bt2::after{content: '\f00d';}
.write_bt2:hover::after{content: '취소';}


/*detail*/
.list_container{position: relative;}
.list_title{width: 500px; height: auto; margin-bottom: 40px;}
.list_title p{font-size: 35px;font-weight: 500;margin-bottom: 20px;line-height: 45px;}
.list_title span{display: flex; gap: 10px; color: #6f6f6f; font-size: 20px; font-weight: 300;}
.list_title {display:flex; flex-direction: column; justify-content: space-between; word-break: break-all; overflow-wrap: break-word; margin-bottom: 100px;}
.list_title .list_downloat{display: inline-block; font-size: 14px; font-weight: 500; color: #000; border: 1px solid #ccc; padding: 15px 20px;}
.list_title ul{display: flex; gap: 10px; margin-top: 50px;}
.list_title ul li a{cursor: pointer; white-space: nowrap; transition: 0.5s; letter-spacing: 2px; border: 1px solid #939393; width: 50px; height: 50px; border-radius: 30px; display: flex; align-items: center; justify-content: center;}
.list_title ul li a:hover { width: 100px; background: var(--primary-color); border: 1px solid var(--primary-color); font-weight: 300; }
.list_title ul li a::after {font-family: "Font Awesome 6 Free"; font-weight: 600; transform: translateX(2px); font-size: 20px; color: #444; }
.list_title ul li a:hover:after { transform: translateY(0) translateX(0); font-size: 20px; color: #fff; font-weight: 400; }
.list_title ul li a.list_btn::after{content: '\f03a';}
.list_title ul li a.re_btn::after{content: '\f12d';}
.list_title ul li a.del_btn::after{content: '\f2ed';}
.list_title ul li a.list_btn:hover::after{content: '목록';}
.list_title ul li a.re_btn:hover::after{content: '수정';}
.list_title ul li a.del_btn:hover::after{content: '삭제';}
.list_con img, .list_con iframe, .list_con video, .list_con table {max-width: 890px !important;}
.list_con {width: 100%;}
.brd_info{margin-bottom: 30px;}

@media screen and (max-width: 1000px) {    
	.subsection {flex-direction: column;  margin-top: 0px !important;}
    .list_con img, .list_con iframe, .list_con video, .list_con table {   max-width: 100% !important;   }
	.list_title {width: 100%; margin-bottom: 50px;}
	.list_title span{margin-bottom: 5px; font-size: 13px;}
	.list_title p{font-size: 23px; line-height: 35px;}
	.newsList li a {padding: 15px 0px;}
	.newsList li dl dt {font-size: 16px;}
	.newsList li dl dd.date {font-size: 14px;}
	.paging_number {font-size: 16px;}
	#atc_file a {padding: 2px 0px;}
}


/*갤러리*/
.gallery_list{ display: flex; flex-wrap: wrap; gap: 2.4%;}
.gallery_list li{flex: 0 31.7%; margin-bottom: 2.5%;}
.gallery_img{position: absolute; top: 0; transition: 0.3s; display: block; width: 100%; height: 17vw; border: 1px solid #ccc; overflow: hidden;}
.gallery_img img{width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.gallery_title{margin: 0 0 20px 0; margin-top: 18vw; font-size: 20px; display: block;}
.gallery_data span:nth-child(1){background: url('/resources/view/phcf/imagesuser_id_icon.png')no-repeat center left; padding-left: 20px; background-size: 15px;}
.gallery_data span:nth-child(2){background: url('/resources/view/phcf/imagesuser_date_icon.png')no-repeat center left; padding-left: 20px; background-size: 15px;}
.gallery_list a{position: relative;}
.gallery_list a:hover .gallery_img{box-shadow: 5px 5px 0 #ccc; margin-left: -5px; margin-top: -5px;}
.gallery_img_on{opacity: 0; transition: 0.3s;background: #0000008a; width: 100%; display: flex; height: 100%; position: absolute; top: 0; z-index: 1; color: #fff; justify-content: center; align-items: center;}
.gallery_list a:hover .gallery_img_on{opacity: 1;}
.gallery_img_on > span{display: flex; margin: 0 15px; gap: 5px; flex-direction: column; align-items: center;}
.delete-btn{transition: 0.3s;position: absolute; top: 10px; right: 10px; border-radius: 30px; cursor: pointer; font-size: 15px; padding: 5px 10px; background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(1px); border: none;}
.delete-btn:hover{color: #fff; background: #000;}

.grid {margin: 0 auto; min-height: 500px; margin-bottom: 100px;display: flex; flex-wrap: wrap; justify-content: space-between;}
.grid-sizer, .grid-item { width: 31.5%;}
.grid-item a{position: relative; transition: 0.3s; display: block; box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.2); border-radius: 20px; overflow: hidden; margin-bottom: 15px;}
.grid-item a:hover img{filter: brightness(0.5);}
.grid-item a p{position: absolute; top: 0; padding: 10%; font-size: 22px; height: 100%; width: 100%; color: #fff; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0;}
.grid-item a p span{font-size: 13px; font-weight: 300; margin-top: 10px;}
.grid-item a:hover p{opacity: 1;}
.grid-item img {transition: 0.3s; display: block; min-width: 100%; max-width: 100%; height: 100%;}    

@media (max-width: 1700px) {
	.grid-sizer, .grid-item { width: 23%;}
}
@media (max-width: 900px) {
	.grid-sizer, .grid-item { width: 48%;}
	.grid-item a p {font-size: 16px;}
}
@media (max-width: 550px) {
	.grid-sizer, .grid-item { width: 45%;}
}

.paging_number{display: flex; font-size:18px; align-items: center; gap: 3px;} 
.paging_number span{font-size: 12px;} 


.search{position: relative;}
.search input { padding:12px 18px 11px; background-color:#fff; border:1px solid #ccc; line-height: 24px; height: 51px; min-width: 100px;} 
.search .search_btn { position:absolute; cursor: pointer; border: none; background: none; font-size: 20px; right:5px; top:0; width:46px; height:50px;}

.view-content * {font-size: 18px;}


@media (max-width: 450px) {
	.list_top { flex-direction: column; align-items: flex-start;}
	.search {width: 100%; margin-top: 10px;}
	.search input { height: 40px; font-size: 14px; width: 100%;}
}

/* 게시판 테이블 */
.boardTbl {clear:both;width:100%;border-top:2px solid #333;table-layout:fixed;margin: 0 0 0.5rem 0;    border-collapse: collapse;}
.boardTbl th,
.boardTbl td {padding: 8px;text-align:center;box-sizing:border-box;}
.boardTbl th {font-weight: 400;letter-spacing:-0.08em;border-bottom:1px solid #ccc;color:#000;background:#fafafa;}
.boardTbl td {border-bottom:1px solid #ccc;}
.boardTbl td a.past {color:#bbb;}
.boardTbl td a.past:hover,
.boardTbl td a.past:focus {color:#333;}
.boardTbl img{vertical-align:middle; cursor: pointer;}
.boardTbl td.b_file i {color:#929292;}
.boardTbl .list_file{text-align: left;}
.boardTbl .list_file th,.boardTbl .list_file td{text-align: left;}
.boardTbl .list_file li a:hover{text-decoration: underline;font-weight: inherit}
.boardTbl .list_file strong{float: left;width: 90px;margin:5px 10px;}
.boardTbl .list_file button.btn{height: 28px;}
.boardTbl .list_file button.btn i{margin-right: 0;}
.boardTbl .list_file .update_file{float: left; margin-left: 5px;}
.boardTbl .list_file .update_file ul{margin: 0;}
.boardTbl .list_file .update_file li{line-height: 20px}
.boardTbl .list_file .update_file li:first-child{margin-top: 5px;}
.boardTbl .list_file .update_file li:last-child{margin-bottom: 5px;}
.boardTbl .list_file .update_file .file_dle {margin:0 0 0 5px;}
.boardTbl .list_file .file_txt {color: #676767;margin: 0 0 0 5px;display: inline-block;}
.boardTbl .list_file .update_file > a {padding: 5px 18px 5px 13px !important;}
.boardTbl.slim th,.boardTbl.slim td { padding:5px 3px}
.boardTbl .bold td { font-weight: bold;}