@charset "utf-8";


.sub-templet-wrap {display: flex; flex-direction: column; gap: 100px; padding: 0px 0 300px 0;}
.sub-templet-wrap:last-child {padding-bottom: 0;}

@media screen and (max-width: 1200px){
    .sub-templet-wrap {padding: 0px 20px 300px 20px;}
}


/**************************************************
 스킵내비
***************************************************/
#skipNav a {position: absolute; top: -50px; left: 0; width: 100%; background: #004FA9;   color: #fff; padding: 10px 20px; z-index: 10000; font-size: 16px; text-decoration: none; transition: top 0.3s; text-align: center    ;}
#skipNav a:focus {top: 0;}


/**************************************************
 공통 타이틀
***************************************************/
.com-title-01 {font-size: 38px; font-weight: bold; text-align: center; animation: fadeUp 0.7s ease-out forwards; animation-delay: .1s; opacity: 0;}
.com-title-02 {width: fit-content; font-size: 30px; font-weight: bold; position: relative; }
.com-title-02::after {content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50px; background: #056FB8; position: absolute; top: 0px; right: -20px;}
.com-title-box {display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; justify-content: center; gap: 70px;}
.com-title-03 {font-size: 26px; font-weight: 600; width: fit-content;}
.com-title-03::before {content: ''; width:23px; height: 3px; background: url(/jnapc/resources/user/jnapc/images/icon/icon_com_tit_h3.svg); display: inline-block; vertical-align: middle; margin-right: 10px;}

@media screen and (max-width: 1080px){
    .com-title-01 {font-size: 32px;}
    .com-title-02 {font-size: 28px;}
    .com-title-03 {font-size: 24px;}
    .com-title-04 {font-size: 18px;}
}
@media screen and (max-width: 768px){
    .com-title-01 {font-size: 30px;}
    .com-title-02 {font-size: 25px;}
    .com-title-03 {font-size: 20px;}
}




/**************************************************
 공통 탭 리스트
***************************************************/
.com-tab-list-01 {width: 100%; display: flex; align-items: center;}
.com-tab-list-01 li {min-width: calc(100%/4); text-align: center;}
.com-tab-list-01 li a {display: flex; align-items: center; justify-content: space-between; font-size: 18px; font-weight: 600; word-break: keep-all; border: 1px solid #ccc; padding: 20px 25px; margin-left: -1px;}
.com-tab-list-01:not(.mb-50) li a::after {content: ''; width:9px; height: 3px; background: url(/jnapc/resources/user/jnapc/images/sub/icon_sub_tab_basic.svg) no-repeat;  display: block;}
.com-tab-list-01 li a.active {color: #fff;background: #2D4276; border-color: #2D4276; font-weight: bold;}
.com-tab-list-01:not(.mb-50) li a.active::after {content: ''; width:10px; height: 6px; background: url(/jnapc/resources/user/jnapc/images/sub/icon_sub_tab_arrw.svg) no-repeat;  display: block;}
.com-tab-list-01 li a:where(:hover, :focus) {color: #000; font-weight: 600;}

.com-tab-list-02 {width: 100%; padding: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px 60px; border: 1px solid #ddd;}
.com-tab-list-02:not(.category) {animation: fadeUp 0.7s ease-out forwards; animation-delay: .5s; opacity: 0;}
.com-tab-list-02 li a {font-size: 18px; color: #555; font-weight: 500;}
.com-tab-list-02 li a.active {color: #000; text-decoration: underline; text-underline-offset: 3px;}

#srchWrap .con-txt-wrap {display: flex; flex-direction: column; gap: 50px; font-weight: 500;}

@media screen and (max-width: 1080px){
    .com-tab-list-01 {flex-wrap: wrap;}
    .com-tab-list-01 li {min-width: auto; }
    .com-tab-list-01 li a {font-size: 18px; padding: 10px 14px; gap: 15px;}
}
@media screen and (max-width: 1080px){
    .com-tab-list-01 li a {font-size: 16px;}
}
@media screen and (max-width: 480px){
    .com-tab-list-01 li a {padding:10px; font-size: 16px;}
}



/**************************************************
 공통 컨텐츠 텍스트
***************************************************/
.com-txt-list {}
.com-txt-list > li {position: relative; font-size: 20px; line-height: 32px; padding-left: 26px;}
.com-txt-list > li::before {content: ''; background: #111; width: 4px; height: 4px; display: block; position: absolute; top: 11px; left: 11px; border-radius: 100%;}

.com-txt-list2 {margin-bottom: 10px;}
.com-txt-list2 > li {position: relative; font-size: 18px; line-height: 28px; padding-left: 15px;}
.com-txt-list2 > li::before {content: '-'; position: absolute; top: 0px; left: 0px; border-radius: 100%;} 


.com-num-list >  {}
.com-num-list >  li {position: relative; font-size: 20px; line-height: 32px; padding-left: 20px;}
.com-num-list >  li::before {content: '①'; display: block; position: absolute; top: 0px; left: 0px; border-radius: 100%;}
.com-num-list >  li:nth-child(2):before {content: '②';}
.com-num-list >  li:nth-child(3):before {content: '③';}
.com-num-list >  li:nth-child(4):before {content: '④';}
.com-num-list >  li:nth-child(5):before {content: '⑤';}
.com-num-list >  li:nth-child(6):before {content: '⑥';}
.com-num-list >  li:nth-child(7):before {content: '⑦';}
.com-num-list >  li:nth-child(8):before {content: '⑧';}
.com-num-list >  li:nth-child(9):before {content: '⑨';}
.com-num-list >  li:nth-child(10):before {content: '⑩';}

.com-txt {font-size: 20px; line-height: 32px;}

@media screen and (max-width: 1080px){
    .com-txt-list li {font-size: 18px; line-height: 28px;}
    .com-txt-list2 > li {font-size: 16px; line-height: 24px;}
    .com-num-list >  li {font-size: 18px; line-height: 28px;}
    .com-txt {font-size: 18px; line-height: 28px;}
}



/**************************************************
 공통 테이블
***************************************************/
.com-tbl-wrap.type-01 {font-size: 16px; width: 100%; overflow: hidden;}
.com-tbl-wrap.type-01 table {width: 100%; border-top: 2px solid #056FB8; border-bottom: 1px solid #ddd; position: relative;}
.com-tbl-wrap.type-01 table::after {content: ""; width: 1px; height: 100%; position: absolute; top: 0; right: 0%; background-color: #fff;}
.com-tbl-wrap.type-01 :where(th,td) {border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; padding: 12px 20px;}
.com-tbl-wrap.type-01 :where(th,td):last-child {border-right: none}
.com-tbl-wrap.type-01 th {font-weight: 600; background-color: #FBFBFB; color: #000; font-weight: 600; text-align: center; font-size: 18px;}
.com-tbl-wrap.type-01 td {color: #333; text-align: center; font-size: 20px;}
.com-tbl-wrap.type-01 td.left{text-align: left;}
.com-tbl-wrap.type-01 td ul{text-align: left;}
.com-tbl-wrap.type-01 td ul.txt-list1 > li{position: relative; padding-left: 10px;}
.com-tbl-wrap.type-01 td ul.txt-list1 > li::before{content: ''; background: #333; width: 3px; height: 3px; display: block; border-radius: 100%; position: absolute; top: 11px; left: 0;}
.com-tbl-wrap.type-01 td ul.txt-list2 {margin: 5px 0 10px;}
.com-tbl-wrap.type-01 td ul.txt-list2 > li {position: relative; font-size: 16px; color: #555; padding-left: 12px; line-height: 24px;}
.com-tbl-wrap.type-01 td ul.txt-list2 > li::before{content: '-'; position: absolute; top: 0px; left: 0;}
.com-tbl-wrap.type-01 span.sm{display: block; font-size: 15px;}
.com-tbl-wrap.type-01 .refer{position:relative; margin-top: 5px; padding-left: 15px;}
.com-tbl-wrap.type-01 .refer::before{content: '※'; position: absolute; top: 0; left: 0;}
.com-tbl-wrap.type-01 ul.refer-list{margin-top: 10px;}
.com-tbl-wrap.type-01 ul.refer-list li{font-size: 16px; position:relative; padding-left: 20px; color: #333; }
.com-tbl-wrap.type-01 ul.refer-list li::before{content: '-'; position: absolute; top:0px; left: 0;}
.com-tbl-wrap.type-01 ul.refer-list li a{text-decoration: underline;}



@media screen and (max-width: 1080px){
        .com-tbl-wrap.type-01 th {font-size: 18px;}
    .com-tbl-wrap.type-01 td {font-size: 16px;}
    .com-tbl-wrap.type-01 {overflow-x: auto;}
    .com-tbl-wrap.type-01 table {min-width: 900px;}
    .com-tbl-wrap.type-01 :where(th,td) {padding: 20px 30px;}
    .com-tbl-wrap.type-01 ul.refer-list li{font-size: 14px;}
}
@media screen and (max-width: 768px){
    .com-tbl-wrap.type-01 td ul.txt-list2 > li {font-size: 14px; line-height: 20px;}
    .com-tbl-wrap.type-01 span.sm{display: block; font-size: 14px;}
}
@media screen and (max-width: 480px){
    .com-tbl-wrap.type-01 :where(th,td) {padding: 15px 20px;}
}



/**************************************************
 공통 게시판 요소
***************************************************/
/* 게시판 헤더 */
.com-brd-hd-01 {display: flex; align-items: flex-end; justify-content: space-between;}
.com-brd-hd-01 .count-box {display: flex; align-items: center; gap: 12px; font-size: 20px; flex-shrink: 0;}
.com-brd-hd-01 .count-box b {color: #056FB8;}
.com-brd-hd-01 .count-box .page-cnt {font-size: 17px;}
.com-brd-hd-01 .count-box .page-cnt b {color: #000;}
.com-brd-hd-01 .srch-box {width: 100%; display: flex; justify-content: flex-end; gap: 10px; color: #555;}
.com-brd-hd-01 .srch-box .sel-01 {appearance: none; -webkit-appearance: none; -moz-appearance: none;  background-color: #fff;  cursor: pointer;  background-image: url('/jnapc/resources/user/jnapc/images/icon/icon_select_arrow_down_blue.svg');  background-repeat: no-repeat;  background-position: right 10px center;  background-size: 11px 8px; padding: 8px 40px 8px 20px; border: 1px solid #D0EADE;}
.com-brd-hd-01 .srch-box .sel-01::-ms-expand {display: none;}
.com-brd-hd-01 .srch-box .sel-01 > li {position: relative; width: 135px; height: 52px; display: flex; align-items: center; justify-content: space-between; border: 1px solid #056FB847;}
.com-brd-hd-01 .srch-box .sel-01::after {content: ''; width: 11px; height: 7px; background: url(/jnapc/resources/user/jnapc/images/icon/icon_select_arrow_down_blue.svg) no-repeat center; transition: all .3s ease; transform: rotate(180deg);}
.com-brd-hd-01 .srch-box .sel-01 > li > a.active::after {transform: rotate(360deg);}
.com-brd-hd-01 .srch-box .sel-01 > li > a {display: flex; align-items: center; justify-content: space-between; font-size: 17px; width: 100%; height: 100%; padding: 0 15px 0 20px;}
.com-brd-hd-01 .srch-box .sel-01 ul {position: absolute; z-index: 100; left: 0; top: 100%; width: 100%; border: 1px solid #056FB847; display: none; background: #fff;}
.com-brd-hd-01 .srch-box .sel-01 ul li a {display: block; padding: 10px 20px; font-size: 17px;}
.com-brd-hd-01 .srch-box .sel-01 ul li a:hover {background: #056FB8; color: #fff;}
.com-brd-hd-01 .srch-box .input-box {width: 100%; max-width: 260px; height: 52px; border: 1px solid #D0EADE; position: relative; padding-right: 35px;}
.com-brd-hd-01 .srch-box .input-box input {font-family: 'Pretendard'; width: 100%; height: 100%; border: none; padding: 8px 40px 8px 20px;}
.com-brd-hd-01 .srch-box .input-box input::placeholder {color: #666;}
.com-brd-hd-01 .srch-box .btn-srch {position: absolute; top: 50%; right: 12px; transform: translateY(-50%); padding: 8px; background: url(/jnapc/resources/user/jnapc/images/icon/icon_srch_blue.svg) center no-repeat; width: 20px; height: 21px;}

@media screen and (max-width: 768px) {
    .com-brd-hd-01 {flex-wrap: wrap;}
    .com-brd-hd-01 .srch-box {justify-content: center; margin-top: 20px;}
    .com-brd-hd-01 .srch-box .sel-01 > li {height: 45px;}
    .com-brd-hd-01 .srch-box .input-box {height: 45px;}
}
@media screen and (max-width: 480px) {
    .com-brd-hd-01 .count-box {font-size: 18px;}
    .com-brd-hd-01 .count-box .page-cnt {font-size: 15px;}

    .com-brd-hd-01 .srch-box {flex-direction: column;}
    .com-brd-hd-01 .srch-box .sel-01 > li {width: 100%;}
    .com-brd-hd-01 .srch-box .sel-01 > li > a {font-size: 16px;}
    .com-brd-hd-01 .srch-box .sel-01 ul li a {font-size: 16px;}
    .com-brd-hd-01 .srch-box .input-box {max-width: 100%;}
}


/* 게시판 썸네일 호버시 미리보기 */

.com-thumbnail-preview {position: fixed; display: none;pointer-events: none;z-index: 9999; transition: opacity 0.2s ease;;}
.com-thumbnail-preview img { width: 210px; height: 130px; object-fit: fill; display: block;}


/* 페이지네이션 */
.com-pagination {width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px;}
.com-pagination li button{flex-shrink: 0; width: 40px; height: 40px; border: 1px solid #ccc; font-size: 15px; color: #444;}
.com-pagination li button.active {background: #056FB8; color: #fff; border: 1px solid #056FB8;}
.com-pagination .page-navi {width: 40px; height: 40px; background: url(/jnapc/resources/user/jnapc/images/icon/icon_page_navi.svg) no-repeat center;}
.com-pagination .page-navi2 {width: 40px; height: 40px;background: url(/jnapc/resources/user/jnapc/images/icon/icon_page_navi2.svg) no-repeat center;}
.com-pagination .page-navi.btn-prev {margin-right: 10px;}
.com-pagination .page-navi.btn-next {transform: rotate(180deg);margin-left: 10px;}
.com-pagination .page-navi2.btn-end {transform: rotate(180deg);}


@media screen and (max-width: 480px) {
    .com-pagination {gap: 3px;}
    .com-pagination li button {width: 26px; height: 26px; font-size: 14px;}
    .com-pagination .page-navi {width: 26px; height: 26px;}
    .com-pagination .page-navi2 {width: 26px; height: 26px;}

    .com-pagination .page-navi.btn-prev {margin-right: 3px;}
    .com-pagination .page-navi.btn-next {margin-left: 3px;}
}



/* 게시판 목록 */

/* 일반게시판 */
.com-brd-list-01 {font-size: 20px; width: 100%; overflow: hidden;}
.com-brd-list-01 table {width: 100%; border-top: 3px solid #056FB8; border-bottom: 1px solid #111; position: relative;}
.com-brd-list-01 table::after {content: ""; width: 1px; height: 100%; position: absolute; top: 0; right: -1px;}
.com-brd-list-01 :where(th,td) {border-bottom: 1px solid #ddd;}
.com-brd-list-01 th {font-weight: 600; color: #000; font-weight: 600; font-size: 18px;  padding: 25px 20px;}
.com-brd-list-01 td {color: #333; text-align: center; font-size: 17px; padding: 15px 20px;}
.com-brd-list-01 td.td-txt-left {text-align: left;}
.com-brd-list-01 td a {display: flex; gap: 4px; font-weight: 500;}
.com-brd-list-01 td a p {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.com-brd-list-01 td .lock {width: 22px; height: 22px; background: url(/jnapc/resources/user/jnapc/images/icon/icon_lock.svg) no-repeat center;}
.com-brd-list-01 td .file {width: 22px; height: 22px; background: url(/jnapc/resources/user/jnapc/images/icon/icon_file.svg) no-repeat center;}
.com-brd-list-01 td .new::before {content: 'NEW'; font-size: 11px; background: #FF6A00; border-radius: 3px; color: #fff; padding: 2px 4px;}

/* 갤러리 게시판 */
.com-brd-list-02 {width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0,1fr));}
.com-brd-list-02 .list a {display: block; padding: 20px 10px;}
.com-brd-list-02 .list:hover .img-box img {transform: scale(1.1);}
.com-brd-list-02 .list:hover .title-box p {color: #1158B4;}
.com-brd-list-02 .list .img-box {width: 100%; aspect-ratio: 350 / 200; overflow: hidden; border: 1px solid #ddd;}
.com-brd-list-02 .list .img-box img {width: 100%; height: 100%; transition: all .3s;}
.com-brd-list-02 .list .title-box {text-align: center; margin-top: 20px;}
.com-brd-list-02 .list .title-box p {font-size: 17px; color: #222; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 10px; transition: all .3s;}
.com-brd-list-02 .list .title-box span {font-size: 15px; color: #888; font-weight: 300;}
.com-brd-list-02.newsletter .list .img-box {aspect-ratio: 267 / 267;} /* 뉴스레터 게시판 */

.com-brd-list-03 {width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 40px;}
.com-brd-list-03 .list:hover .title-box p {color: #1158B4;}
.com-brd-list-03 .list .title {font-size: 20px; color: #222; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 10px; transition: all .3s;}
.com-brd-list-03 .video-box {aspect-ratio: 690 / 350; object-fit: fill;}
.com-brd-list-03 .video-box video {width: 100%; height: 100%;}

/* 가로형 갤러리 게시판 */
/* .com-brd-list-04 {}
.com-brd-list-04 .list:first-child a {padding-top: 20px;}
.com-brd-list-04 .list a {width: 100%; display: flex; align-items: center; gap: 45px; padding: 30px 0px; border-bottom: 1px solid #ddd;}
.com-brd-list-04 .list .img-box {width: 30%; height: 200px; overflow: hidden; border: 1px solid #ddd;}
.com-brd-list-04 .list:hover .img-box img {transform: scale(1.1);}
.com-brd-list-04 .list:hover .title-box p {color: #1158B4;}
.com-brd-list-04 .list .img-box img {width: 100%; height: 100%; transition: all .3s;}
.com-brd-list-04 .list .title-box {width: 60%; display: flex; flex-direction: column; gap: 50px;}
.com-brd-list-04 .list .title-box .tit {font-size: 20px; color: #222; font-weight: 600; transition: all .3s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.com-brd-list-04 .list .title-box .exp {font-size: 18px; color: #666;    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}
.com-brd-list-04 .list .title-box .brd-info {display: flex;}
.com-brd-list-04 .list .title-box .brd-info li {display: block; font-size: 17px; color: #666; font-weight: 300; display: flex; align-items: center;}
.com-brd-list-04 .list .title-box .brd-info li:first-child::after {content: ''; width: 1px; height: 15px; display: block; background: #ccc; margin: 0 14px;}
.com-brd-list-04 .list .title-box .brd-info li span {display: block; margin-left: 4px;} */

.com-brd-list-04 {}
.com-brd-list-04 .list {}
.com-brd-list-04 .list a {display: flex; align-items: center; gap: 40px; padding: 30px 0; border-bottom: 1px solid #ddd;}
.com-brd-list-04 .list:first-child a {padding-top: 20px;}
.com-brd-list-04 .list .img-box {width: 100%; max-width: 300px; border: 1px solid #ddd; overflow: hidden;}
.com-brd-list-04 .list .img-box img {max-width: none; width: 100%; height: 200px; object-fit: cover; object-position: top;transition: all .3s;}
.com-brd-list-04 .list:hover .img-box img {transform: scale(1.1);}
.com-brd-list-04 .list .title-box {width: 100%;}
.com-brd-list-04 .list .title-box .tit {font-size: 20px; color: #222; font-weight: 600; transition: all .3s; margin-bottom: 40px; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.com-brd-list-04 .list:hover .title-box p {color: #1158B4;}
.com-brd-list-04 .list .title-box .brd-info {display: flex;}
.com-brd-list-04 .list .title-box .brd-info li {display: block; font-size: 17px; color: #666; font-weight: 300; display: flex; align-items: center;}
.com-brd-list-04 .list .title-box .brd-info li:first-child::after {content: ''; width: 1px; height: 15px; display: block; background: #ccc; margin: 0 14px;}
.com-brd-list-04 .list .title-box .brd-info li span {display: block; margin-left: 4px;}



/* qna 게시판 */
.com-brd-list-qna {border-top: 2px solid #000; border-bottom: 1px solid #ddd;}
.com-brd-list-qna .faq-item {font-size: 20px;}
.com-brd-list-qna .faq-question {border-bottom: 1px solid #ddd;}
.com-brd-list-qna .faq-question .question-btn {width: 100%; display: flex; align-items: center; padding: 25px 20px;}
.com-brd-list-qna .faq-question .question-btn span {display: block;}
.com-brd-list-qna .faq-question .left {display: flex; align-items: center;}
.com-brd-list-qna .faq-question .q-label {width: 36px; line-height: 36px;  background: #F5F5F5; border-radius: 50%; margin-right: 15px; font-weight: 600; }
.com-brd-list-qna .faq-question.on .q-label {background: #056FB8; color: #fff;}
.com-brd-list-qna .faq-question .cate {font-size: 15px; font-weight: 500; border: 1px solid #000; padding: 3px 10px; border-radius: 50px; margin-right: 20px;}
.com-brd-list-qna .faq-question .txt {flex: 1; white-space: normal;word-break: break-word; text-align: left; font-weight: 500; display: block;}
.com-brd-list-qna .faq-question .arrow {margin-left: 50px; transition: .3s;}
.com-brd-list-qna .faq-question.on .arrow {transform: rotate(180deg);}
.com-brd-list-qna .faq-answer {display: none; background: #F6F6F6; border-bottom: 1px solid #ddd; padding: 35px 20px;}
.com-brd-list-qna .faq-answer .con {display: flex; align-items: center; gap: 20px; }
.com-brd-list-qna .faq-answer .a-label {display: block; font-weight: 600; display: flex; align-items: center; gap:20px;}
.com-brd-list-qna .faq-answer .a-label::before {content: ''; background: url(/jnapc/resources/user/jnapc/images/sub/qna_arrw_icon.svg) center no-repeat; width: 36px; height: 36px; display: block;}
.com-brd-list-qna .faq-answer .txt {display: flex; gap: 10px; align-items: center; flex-wrap: wrap;}
.com-brd-list-qna .edit-box {display: flex; align-items: center;}
.com-brd-list-qna .edit-box button {color: #555; font-size: 16px; padding: 0 5px; position:relative; padding: 0 8px;}
.com-brd-list-qna .edit-box button::after {content: ''; background: #aaa; width: 1px; height: 14px; display: block; position: absolute; top: 50%; right: 0; transform: translateY(-50%);}
.com-brd-list-qna .edit-box button:last-child:after {display: none;}
.com-brd-list-qna .edit-box button:hover {text-decoration: underline;}


/* 전남자치경찰 퀴즈이벤트 게시판 */
.com-brd-list-event {display: flex; flex-direction: column; gap: 30px;}
.com-brd-list-event .list {}
.com-brd-list-event .list a {display: flex; gap: 60px; border: 1px solid #ddd; border-radius: 10px; padding: 40px 50px;}
.com-brd-list-event .list .thumb-box {max-width: 484px; aspect-ratio: 2; object-fit: fill; border-radius: 10px; overflow: hidden; background: #d9d9d9;}
.com-brd-list-event .list .thumb-box img {max-width: none; width: 100%; height: 100%;}
.com-brd-list-event .list .txt-box  {width: 50%;}
.com-brd-list-event .list .txt-box span {display: block;}
.com-brd-list-event .list .txt-box .status {padding: 6px 10px; max-width: 86px; border-radius: 50px; font-weight: 500; margin-bottom: 24px; display: block; text-align: center;}
.com-brd-list-event .list.ing .txt-box .status {background: #1158B4; color: #fff;}
.com-brd-list-event .list.end .txt-box .status {background: #f1f1f1; color: #666;}
.com-brd-list-event .list .txt-box .tit {font-size: 24px; font-weight: bold; margin-bottom: 24px;}
.com-brd-list-event .list .txt-box .date {color: #555;}


/* 갤러리게시판 상단 홍보동영상 */
.com-video-top {position: relative; display: flex; align-items: center; justify-content: center; padding-bottom: 60px;}
/*.com-video-top::after {content: ''; width: 100%; height: 230px; background: #F3F3F3; position: absolute; left: 0; bottom: 0; z-index: 0}*/
.com-video-top iframe {position: relative; z-index: 1; width: 100%; border-radius: 10px; box-shadow: 0px 0px 10px rgba(0 0 0,.8); aspect-ratio: 16/9;}

@media screen and (max-width: 1400px){
    .com-brd-list-event .list a {gap: 30px; padding: 30px;}
}

@media screen and (max-width: 1080px){
    .com-brd-list-01 {overflow-x: auto;}
    .com-brd-list-01 table {min-width: 820px;}
    .com-brd-list-01 table td {padding: 15px;}
    .com-brd-list-01 table th {padding: 20px 15px;}

    .com-brd-list-03 {gap: 30px;}
    .com-brd-list-03 .list .title {font-size: 17px;}

    /* .com-brd-list-04 .list a {gap: 30px;}
    .com-brd-list-04 .list .title-box .tit {font-size: 18px;}
    .com-brd-list-04 .list .title-box .exp {font-size: 16px;}
    .com-brd-list-04 .list .title-box .brd-info li {font-size: 15px;} */

    .com-brd-list-qna .faq-item {font-size: 18px;}
    .com-brd-list-qna .edit-box button {font-size: 15px;}

    .com-brd-list-event .list .txt-box .status {font-size: 16px;}
    .com-brd-list-event .list .txt-box .tit {font-size: 20px;}
    .com-brd-list-event .list .txt-box .date {font-size: 16px;}
}
@media screen and (max-width: 768px){
    .com-brd-list-01 th {font-size: 16px;}
    .com-brd-list-01 td {font-size: 15px;}
    .com-brd-list-02 {grid-template-columns: repeat(2, minmax(0,1fr));}
    .com-brd-list-03 {grid-template-columns: repeat(1, minmax(0,1fr));}
    .com-brd-list-qna .faq-item {font-size: 17px;}
    .com-brd-list-qna .faq-question .question-btn {flex-direction: column; align-items: flex-start; width: 90%;}
    .com-brd-list-qna .faq-question {position: relative;}
    .com-brd-list-qna .faq-question .left {margin-bottom: 10px;}
    .com-brd-list-qna .faq-question .arrow {position: absolute; top: 50%; right: 20px; transform:translateY(-50%);}
    .com-brd-list-qna .faq-answer .con {gap:0px; flex-direction: column; align-items: flex-start}
    .com-brd-list-qna .faq-answer .a-label {gap: 5px;}
    /* .com-brd-list-qna .faq-answer .txt {padding-left: 40px;} */

    /* .com-brd-list-04 .list a {flex-direction: column;}
    .com-brd-list-04 .list .title-box {width: 100%; gap: 10px;} */

    .com-brd-list-04 .list a {flex-direction: column; gap: 10px;}
    .com-brd-list-04 .list .title-box .tit {font-size: 18px; margin-bottom: 10px;}

    .com-video-top {padding-bottom: 30px;}
    .com-video-top iframe {margin: 0 10px;}

    .com-brd-list-event .list a {flex-direction: column;}
    .com-brd-list-event .list .thumb-box {max-width: 100%;}
    .com-brd-list-event .list .txt-box {width: 100%;}
    .com-brd-list-event .list .txt-box .tit {font-size: 18px;}

}
@media screen and (max-width: 480px){
    .com-brd-list-02 {grid-template-columns: repeat(1, minmax(0,1fr));}
    .com-brd-list-02 .list .title-box {margin-top: 10px;}
    .com-brd-list-02 .list .title-box p {font-size: 15px;}
    .com-brd-list-02 .list .title-box span {font-size: 14px;}

    .com-brd-list-03 .list .title {font-size: 15px;}
    .com-brd-list-03 .video-box {aspect-ratio: 690 / 450;}

    .com-brd-list-04 .list .img-box {width: 100%; }
    .com-brd-list-04 .list .title-box .brd-info {flex-direction: column; gap: 0px;}
    .com-brd-list-04 .list .title-box .brd-info li {font-size: 16px;}
    .com-brd-list-04 .list .title-box .brd-info li:first-child::after {display: none;}
/*
    .com-brd-list-04 .list a {gap: 20px;}

    .com-brd-list-04 .list .title-box .brd-info li {font-size: 14px;}
    .com-brd-list-04 .list .title-box .brd-info li:first-child::after {display: none;} */

    .com-brd-list-event .list a {padding: 25px 20px;}
    .com-brd-list-event .list .txt-box .status {margin-bottom: 15px;}
    .com-brd-list-event .list .txt-box .tit {margin-bottom: 15px;}
}




/**************************************************
 게시글
***************************************************/
.com-post-hd-01 {border-top: 3px solid #111; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 40px 20px;}
.com-post-hd-01 .title {font-size: 22px; font-weight: 600;}
.com-post-hd-01 .ect-box {display: flex; gap: 25px; margin-top: 20px;}
.com-post-hd-01 .ect-box div {display: flex; gap: 10px;}
.com-post-hd-01 .ect-box div.date {margin-right: auto;}
.com-post-hd-01 .ect-box div dt {color: #000; font-weight: 500;}
.com-post-hd-01 .ect-box div dd {color: #666;}

.com-post-files-01 {width: 100%; background: #fbfbfb; padding: 25px 20px; display: flex; gap: 15px; border-top: 1px solid #ddd;}
.com-post-files-01 .title p {display: flex; align-items: center; gap: 10px; line-height: 1.8; color: #035388; font-weight: 500; padding: 0 10px;}
.com-post-files-01 .title p::before {content: ''; width: 13px; height: 13px; background: url(/jnapc/resources/user/jnapc/images/icon/icon_link.svg) no-repeat center;}
.com-post-files-01 .file-list li button {padding: 5px 10px; font-family: 'Pretendard'; text-align: left;}
.com-post-files-01 .file-list li button:hover {text-decoration: underline; text-underline-offset: 3px;}
.com-post-files-01 .file-list li button .file-exp {color: #888; font-size: 16px; line-height: 24px;display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}

.com-post-content-01 {min-height: 300px; padding: 40px 20px; font-size: 17px; line-height: 1.6;}

/* 게시글 이동 박스 */
.com-post-move-box {border-top: 1px solid #aaa; border-bottom: 1px solid #aaa;}
.com-post-move-box > div {display: flex; align-items: center; padding: 20px 0;}
.com-post-move-box > div:not(:last-of-type) {border-bottom: 1px solid #ddd;}
.com-post-move-box dt {flex-shrink: 0; font-size: 16px; color: #035388; display: flex; align-items: center; gap: 20px; font-weight: 600; padding: 0 30px;}
.com-post-move-box dt::before {content: ''; width: 30px; height: 26px; background: url(/jnapc/resources/user/jnapc/images/icon/icon_select_arrow_down_green.svg) no-repeat center;}
.com-post-move-box .prev-box dt::before {transform: rotate(180deg);}
.com-post-move-box dd {padding-right: 30px; color: #333;}
.com-post-move-box dd a {font-size: 16px;}
.com-post-move-box dd a:where(:hover,:focus) {text-decoration: underline; text-underline-position: under;}

@media screen and (max-width: 1080px) {
    .com-post-hd-01 .title {text-align: center;}
    .com-post-hd-01 .ect-box {justify-content: center; flex-wrap: wrap; gap: 10px 15px;}
    .com-post-hd-01 .ect-box div.date {margin-right: 0;}
}
@media screen and (max-width: 768px) {
    .com-post-files-01 {flex-wrap: wrap; gap: 5px; padding: 20px 10px;}
    .com-post-hd-01 .title {font-size: 20px;}
    .com-post-move-box dt, .com-post-move-box dd {font-size: 15px;}
    .com-post-files-01 .title p {font-size: 15px;}
    .com-post-files-01 .file-list li button {font-size: 15px;}
    .com-post-content-01 {font-size: 15px;}
    .com-post-move-box dt {padding: 0 15px; gap: 0;}
    .com-post-move-box dd a {font-size: 15px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
}




/**************************************************
 게시글 작성 서식
***************************************************/
.com-post-write {border-top: 3px solid #111;}
.com-post-write table {border-bottom: 1px solid #aaa; text-align: left;}
.com-post-write tr:not(:last-of-type) {border-bottom: 1px solid #ddd;}
.com-post-write th {padding: 15px 20px; background-color: #fbfbfb; font-weight: 500;}
.com-post-write th.required::before {content: '*'; color: #FF0000; margin-right: 8px; display: inline-block; transform: translateY(2px);}
.com-post-write td {padding: 15px 20px;}
.com-post-write td.no-pda {padding: 0;}
.com-post-write td input::placeholder {color: #888;}
.com-post-write :where(input:where([type="text"],[type="password"],[type="tel"], [type="date"]), select) {height: 50px; padding: 0 12px;}
.com-post-write :where(input:where([type="text"],[type="password"], [type="date"]), select.type-select) {width: 40%;}
.com-post-write input.title {width: 100%;}
.com-post-write textarea {height: 246px; padding: 10px 15px; border: 1px solid #ccc;}
.com-post-write .phone {display: flex; align-items: center; gap: 7px;}
.com-post-write .phone select {width: 160px; appearance: none; padding: 5px 20px 5px 15px; background: #fff url(/jnapc/resources/user/jnapc/images/icon/icon_select_arrow_down_full.svg) calc(100% - 10px) center no-repeat; border: 1px solid #ccc;}
.com-post-write input[type="tel"] {width: 160px;}
.com-post-write .com-post-tag-list {padding: 25px 20px;}
.com-post-write .com-post-tag-list .add-box {height: auto;}
.com-post-write .robot-block {display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; width: 100%; font-size: 16px; color: #555;}
.com-post-write .robot-img-box {display: flex; align-items: center;}
.com-post-write .robot-img-box .captcha-btn {margin-left: 5px;}
.com-post-write .robot-img-box .captcha-btn button {width: 22px; margin-right: 5px;}
.com-post-write .td-radio {display: flex; flex-wrap: wrap; align-items: center;}
.com-post-write input[type="radio"] {display: none;}
.com-post-write input[type="radio"] + label {color: #333; display: inline-flex; align-items: center; justify-content: flex-start; margin-right: 20px;}
.com-post-write input[type="radio"] + label::before {content: ''; display: inline-block; width: 20px; height: 20px; border: 1px solid #aaa; border-radius: 50%; margin-right: 10px;}
.com-post-write input[type="radio"]:checked + label::before {border: 4px solid #1158B4; background: #E6FFE0;}
.com-post-write input[type="date"] {font-size: 16px; font-family: 'Pretendard';}
.com-post-write input[type="date"]::-webkit-clear-button, input[type="date"]::-webkit-inner-spin-button {display: none;}
.com-post-write input[type="date"]::-webkit-calendar-picker-indicator {background: transparent;}
.com-post-write input[type="date"] {background: #fff url(/jnapc/resources/user/jnapc/images/icon/icon_calendar.svg) calc(100% - 10px) center no-repeat;}
.com-post-write select.type-select {appearance: none; padding: 5px 20px 5px 15px; background: #fff url(/jnapc/resources/user/jnapc/images/icon/icon_select_arrow_down_full.svg) calc(100% - 10px) center no-repeat;}

#uploadFile_box {background: #fff; border: 1px solid #555; margin: 0; padding: 15px;}
.fileUpload {position: relative; overflow: hidden; cursor: pointer; display: inline-block; background: #fff; font-size: 15px; width: 65px; height: 30px; text-align: center; display: flex; align-items: center; justify-content: center; color: #fff; background: #004386; flex-shrink: 0;}
.upload_dragdrop {display: flex; border:2px dotted #ddd; width: 400px; align-items: center; justify-content: flex-start; padding: 10px 10px 15px 10px; gap: 15px;}
.upload_dragdrop span b {font-size: 15px; color: #888; font-weight: 200;}
.com-post-write td div.file_box button {display: flex; align-items: center; justify-content: center; gap: 10px; background: #524F4C; padding: 7px 20px; font-size: 15px; color: #fff;}
.com-post-write input#uploadFile {position: absolute; cursor: pointer; width: 65px; height: 30px; top: 0; left: -10px; z-index: 100; opacity: 0;}
.com-post-write .thumb-delete-btn {display: block; padding: 11px 20px; background: #818181; color: #fff; font-size: 15px; border-radius: 3px; width: fit-content;}
.com-post-write .td-thumbnail span {font-size: 14px; color: #777;}
.com-post-write .file-wrap {display: flex; gap: 10px;}
.com-post-write .thumb-select {padding: 8px 10px ;}

@media screen and (max-width: 1080px) {
    .com-post-write.admin textarea {height: 130px;}
    .com-post-write :where(input:where([type="text"],[type="password"],[type="tel"], [type="date"]), select) {height: 45px;}
    .com-post-write textarea {height: 190px; padding: 10px;}
}
@media screen and (max-width: 768px) {
    .com-post-write th {padding: 10px 15px; text-align: center; border-bottom: 1px solid #ddd; font-size: 15px;}
    .com-post-write td {padding: 10px 15px; font-size: 15px;}
    .com-post-write :where(input:where([type="text"],[type="password"], [type="date"]), select.type-select) {width: 100%;}
    .com-post-write :where(table,tbody,tr,th,td) {display: block; width: 100%;}
    .com-post-write .phone {gap: 4px; justify-content: center;}
    .com-post-write .phone select {width: 30%;}
    .com-post-write input[type="tel"] {width: 30%;}
    .upload_dragdrop {width: 100%;}
    .com-post-write .td-radio {justify-content: center;}
    .com-post-write .robot-block {font-size: 15px;}
    .com-post-write .file-wrap {flex-direction: column; align-items: flex-end;}
    .com-post-write .thumb-select {width: 100%;}
    .com-post-write .thumb-delete-btn {font-size: 14px; padding: 6px 10px; margin-bottom: 10px;}
}
@media screen and (max-width: 480px) {
    .com-post-write :where(input:where([type="text"],[type="password"],[type="tel"], [type="date"]), select)  {height: 40px;}

}




/**************************************************
 공통 버튼
***************************************************/
.com-btn {display: flex; align-items: center; justify-content: center; padding: 20px 36px; font-size: 17px;}
.com-btn.btn-left {margin-left: auto;}
.com-btn.btn-right {margin-right: auto;}
.com-btn.type-01 {background: #fff; border: 1px solid #aaa;}
.com-btn.type-02 {background: #F3F3F3; border: 1px solid #ddd;}
.com-btn.type-01:hover {border: 1px solid #056FB8; background: #ebf3f8;}
.com-btn.type-02:hover {background: #aaa; color: #fff;}
.com-btn-box.type-01 {display: flex; align-items: center; justify-content: center; gap: 10px;}
.com-btn-box.type-01 button {width: 170px;}

@media screen and (max-width: 768px) {
    .com-btn {padding: 15px 25px; font-size: 15px;}
    .com-btn-box.type-01 button {width: 140px;}
}




/**************************************************
 checkbox
***************************************************/
.com-checkbox {}
.com-checkbox label {display: flex; align-items: center; gap: 6px; font-size:15px;}
.com-checkbox .square {flex-shrink: 0; width: 16px; height: 16px; border: 1px solid #aaa; background-color: #fff; display: flex; justify-content: center; align-items: center;}
html[data-mode="dark"] .com-checkbox .square {background-color: var(--bg--bg-primary);}
.com-checkbox .square img {display: none; width: 90%;}
.com-checkbox input[type="checkbox"] {position: absolute; opacity: 0; z-index: -1;}
.com-checkbox input[type="checkbox"]:checked + label .square {background-color: #1158B4; border-color: #1158B4;}
.com-checkbox input[type="checkbox"]:checked + label .square img {display: block;}
.com-checkbox input[type="checkbox"]:focus + label .square {}
html[data-mode="dark"] .com-checkbox input[type="checkbox"]:focus + label .square {border: 2px solid #1158B4;}




/**************************************************
 공통 input
***************************************************/

.com-input-01 {height: 50px; border-radius: 5px !important; padding: 0 15px; border: 1px solid #ddd; font-size: 15px;}
.com-input-01::placeholder {color: #9BA0AE;}

@media screen and (max-width: 768px) {
    .com-input-01 {height: 45px; font-size: 14px;}
}




/**************************************************
 공통 라디오 radio
***************************************************/
.com-rad-wrap {display: flex; flex-wrap: wrap; align-items: center; gap: 20px;}
.com-rad-01 {position: relative; display: inline-flex; align-items: center; gap: 10px; font-size: 16px;}
.com-rad-01 input {position: absolute; top: 0; left: 0; z-index: -1; opacity: 0;}
.com-rad-01 input + .shape {aspect-ratio: 1 / 1; width: 20px; border: 1px solid #ddd;}
.com-rad-01 input[type="radio"] + .shape {border-radius: 50%;}
.com-rad-01 input:checked + .shape {border: 6px solid #1158B4;}

@media screen and (max-width: 1080px) {
    .com-rad-01 {font-size: 14px; gap: 8px;}
    .com-rad-01 input + .shape {width: 17px;}
    .com-rad-01 input:checked + .shape {border-width: 5px;}
}
@media screen and (max-width: 480px) {
    .com-rad-01 {font-size: 13px; gap: 6px;}
    .com-rad-01 input + .shape {width: 15px;}
    .com-rad-01 input:checked + .shape {border-width: 4px;}
}





/**************************************************
 콘텐츠 준비중
***************************************************/
.com-prepare-box {font-family: 'NEXON-Lv2-Gothic'; width: 100%; padding: 120px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 60px; text-align: center;}
.com-prepare-box .con-box h4 {font-size: 32px; font-weight: bold; color: #004FA9; margin-bottom: 24px;}
.com-prepare-box .con-box p {font-size: 22px; color: #666;}

@media screen and (max-width: 768px) {
    .com-prepare-box .con-box h4 {font-size: 25px;}
    .com-prepare-box .con-box p {font-size: 18px;}
}





/**************************************************
 갤러리 게시판 썸네일
***************************************************/
.com-post-write .photo-list {padding: 10px 0;}
.com-post-write .photo-list .list {display: flex; justify-content: space-between; gap: 10px; padding-bottom: 10px;}
.com-post-write .photo-list .list li {width: 190px; height: 150px; position: relative; border: 5px solid #ddd;}
.com-post-write .photo-list .list li.li-add-photo {border: 1px solid #A3A8B4;}
.com-post-write .photo-list .list li.li-add-photo a {width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 15px; font-weight: 600; color: #fff; background-color: #A3A8B4; padding: 10px;}
.com-post-write .photo-list .list li.li-add-photo a:where(:hover,:focus) {filter: brightness(0.8);}
.com-post-write .photo-list .list .img-box {display: block; width: 100%; height: 100%;}
.com-post-write .photo-list .list .img-box img {width: 100%; height: 100%; object-fit: cover;}
.com-post-write .photo-list .list .txt {position: absolute; top: -5px; left: -5px; color: #fff; background-color: rgba(0, 0, 0, 0.8); padding: 7px 8px; font-size: 13px;}
.com-post-write .photo-list .list .btn-cls {width: 25px; height: 25px; background-color: #000;  position: absolute; top: -5px; right: -5px; display: flex; justify-content: center; align-items: center; color: #fff;}

@media screen and (max-width: 1080px) {
	.com-post-write .photo-list .list li {width: 170px; height: 135px;}
	.com-post-write .photo-list .list li.li-add-photo a {gap: 12px;}
	.com-post-write .photo-list .list li.li-add-photo img {width: 33px;}
	.com-post-write .photo-list .list .txt {font-size: 12px;}
	.com-post-write .photo-list .list .btn-cls {width: 20px; height: 20px; font-size: 12px;}
}
@media screen and (max-width: 768px) {
	.com-post-write .photo-list .list {flex-wrap: wrap; justify-content: center;}
	.com-post-write .photo-list .list li {width: 150px; height: 120px;}
}




/**************************************************
 공통 파일 다운로드 버튼
***************************************************/
.com-file-download-box ul {display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px;}
.com-file-download-box ul li a{display: flex;}
.com-file-download-box ul li a span{font-size: 20px; width:200px; background: #018E51; padding:20px; color: #fff;}
.com-file-download-box ul li:nth-child(2) a span{background: #0167B6;}
.com-file-download-box ul li a img{padding: 25px; border: 1px solid #d9d9d9;}

@media screen and (max-width: 1080px){
    .com-file-download-box ul li a span {font-size: 17px;}
}









/* 애니메이션 */









@media screen and (max-width: 1560px) {

}
@media screen and (max-width: 1400px) {

}
@media screen and (max-width: 1240px) {

}
@media screen and (max-width: 1080px) {

}
@media screen and (max-width: 768px) {

}
@media screen and (max-width: 480px) {

}