@charset "utf-8";


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

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

.mt-50 {margin-top:50px;}


/************************************************** 
 공통 타이틀
***************************************************/
.com-title-01 {font-family: 'NEXON-Lv2-Gothic'; font-size: 36px; font-weight: bold; text-align: center; animation: fadeUp 0.7s ease-out forwards; animation-delay: .1s; opacity: 0;}
.com-title-02 {font-family: 'NEXON-Lv2-Gothic'; width: fit-content; font-size: 28px; font-weight: bold; position: relative; }
.com-title-02::after {content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50px; background: #00BA8F; 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-family: 'NEXON-Lv2-Gothic';  font-size: 24px; font-weight: bold; width: fit-content; color: #00BA8F;}
.com-title-04 {font-family: 'NEXON-Lv2-Gothic';  font-size: 20px; font-weight: bold; width: fit-content; font-weight: 500;}
.com-title-04::before {content: ''; width:3px; height: 20px; background: #00BA8F; display: inline-block; vertical-align: middle; margin-right: 8px;}

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






/************************************************** 
 공통 탭 리스트
***************************************************/
.com-tab-list-01 {display: flex; align-items: center; background: #F2F2F2; padding: 20px; border-radius: 100px; animation: fadeUp 0.7s ease-out forwards; animation-delay: .1s; opacity: 0;}
.com-tab-list-01 li a {display: block; padding: 0 20px; color: #888; font-size: 20px; font-weight: 500; text-align: center;word-break: keep-all;}
.com-tab-list-01 li a.active {color: #fff;background: linear-gradient(94.32deg, #00BA8F 5.46%, #18A3A3 92.91%); border-radius: 100px; padding: 12px 20px;}
.com-tab-list-01 li a:where(:hover, :focus) {color: #000;}

.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;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;}

@media screen and (max-width: 1200px){
    .com-tab-list-01 {padding: 15px;}
    .com-tab-list-01 li a {font-size: 17px;}
}
@media screen and (max-width: 480px){
    .com-tab-list-01 li a {padding:10px; font-size: 15px;}

}


/************************************************** 
 공통 필터 탭
***************************************************/

.com-filter-box {background: #F2F9F7; padding: 50px; border-radius: 20px; display: flex; flex-direction: column; gap: 30px;}
.com-filter-box.hide {display: none;}
.com-filter-box .row {display: flex; align-items: flex-start; width: 100%;}
.com-filter-box .row label {width: 8%; font-weight: bold; height: 40px; margin-right: 20px;}
.com-filter-box .row .filter-option {width:calc(92% - 20px);}
.com-filter-box .date-range {display: flex; gap: 10px; align-items: center; width: 100%;}
.com-filter-box .date-btn {width: 100%; max-width: 260px; height: 40px; font-size: 16px; font-family: 'pretendard'; background: url('../../../user/web/images/icon/icon_map_date.svg') center right 15px no-repeat #fff; padding-left: 15px; padding-right: 48px; box-sizing: border-box; border-radius: 5px !important;}
.com-filter-box .date {position: relative; padding-right: 30px; width: 100%; box-sizing: border-box;}
.com-filter-box .date::-webkit-calendar-picker-indicator {opacity: 0;cursor: pointer;position: absolute;right: 8px;top: 50%;transform: translateY(-50%);width: 24px;height: 24px;}
.com-filter-box .date::-moz-calendar-picker-indicator {opacity: 0;}
.com-filter-box .com-btn-list {width: 100%; display: flex; flex-wrap: wrap; gap: 8px;}
.com-filter-box .com-ft-btn {border: 1px solid #ddd; padding: 8px 14px; color: #333; border-radius: 5px; font-size: 16px; background: #fff;}
.com-filter-box .com-ft-btn.on {background: #00A37D; color: #fff;}
.com-filter-box input[type="text"]:not(.date) {height: 40px !important; border-radius: 5px !important; width: 100%; max-width: 550px; font-size: 16px;}
.com-filter-box .btn-wrap {display: flex; justify-content: center; gap: 10px; margin-top: 10px;}
.com-filter-box .btn-wrap button {width: 100%; max-width: 100px; border: 1px solid #ddd; padding: 12px; border-radius: 5px; background: #fff; font-weight: 500;}
.com-filter-box .btn-wrap .btn-submit {background: #00A37D; color: #fff; border-color: #00A37D;}

@media screen and (max-width: 1080px){
    .com-filter-box .row {flex-direction: column;}
    .com-filter-box .row .filter-option {width: 100%;}
    .com-filter-box .row label {width: 100%; font-size: 17px;}
    .com-filter-box .date {font-size: 15px;}
    .com-filter-box .com-ft-btn {font-size: 15px;}
    .com-filter-box input[type="text"]:not(.date) {font-size: 15px;}
    .com-filter-box .btn-wrap button {font-size: 16px;}
}

@media screen and (max-width: 768px){
    .com-filter-box {padding: 30px; gap: 20px;}
}

@media screen and (max-width: 480px){
    .com-filter-box {padding: 20px;}
    .com-filter-box .date {width: 45%;}
}



/************************************************** 
 공통 컨텐츠 텍스트
***************************************************/
.com-txt-list {}
.com-txt-list > li {position: relative; font-size: 18px; line-height: 28px; padding-left: 26px;}
.com-txt-list > li::before {content: ''; background: #111; width: 4px; height: 4px; display: block; position: absolute; top: 12px; 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: 18px; line-height: 28px; 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: '⑩';}

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



/************************************************** 
 공통 테이블
***************************************************/
.com-tbl-wrap.type-01 {font-size: 16px; width: 100%; overflow: hidden;} 
.com-tbl-wrap.type-01 table {width: 100%; border-top: 2px solid #00BA8F; 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: 30px 20px;}
.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: 17px;}
.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;}

.com-tbl-wrap .unit {display: block; font-size: 16px; color: #555; text-align: right; margin-bottom: 4px;}
.com-tbl-wrap .refer {display: block; font-size: 16px; color: #555; margin-top: 10px;}


@media screen and (max-width: 1080px){
    .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 th {font-size: 16px;}
    .com-tbl-wrap.type-01 td {font-size: 15px;}
    .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;}

    .com-tbl-wrap .unit {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: 18px; flex-shrink: 0;}
.com-brd-hd-01 .count-box b {color: #00BA8F;}
.com-brd-hd-01 .count-box .page-cnt {font-size: 16px;}
.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;}
.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 #D0EADE;}
.com-brd-hd-01 .srch-box .sel-01 > li > a::after {content: ''; width: 11px; height: 7px; background: url('../../../user/web/images/icon/icon_select_arrow_down_green.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 #D0EADE; 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: #00BA8F; 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: 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('../../../user/web/images/icon/icon_search.svg') center no-repeat; width: 20px; height: 21px;}


.com-top-srch {background: #F0F0F0; padding: 34px 20px; display: flex; justify-content: center; gap: 20px;}
.com-top-srch .input-box {width: 100%; max-width: 480px; height: 52px; border: 1px solid #D0EADE; position: relative; padding-right: 35px; background: #fff;} 
.com-top-srch .input-box input {font-family: 'Pretendard'; width: 100%; height: 100%; border: none; padding: 20px;}
.com-top-srch .input-box input::placeholder {color: #666;}
.com-top-srch .btn-srch {position: absolute; top: 50%; right: 12px; transform: translateY(-50%); padding: 8px; background: url('../../../user/web/images/icon/icon_search.svg') center no-repeat; width: 20px; height: 21px;}
.com-top-srch .btn-detail-srch {background: #fff; color: #00A37D; border: 1px solid #00A37D; padding: 10px 20px; border-radius: 10px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 10px; transition: .3s;}
.com-top-srch .btn-detail-srch.active img {transform: rotate(-180deg);}


@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;}

    .com-top-srch .input-box {font-size: 16px;}
    .com-top-srch .btn-detail-srch {font-size: 16px;}
}

@media screen and (max-width: 480px) {
    .com-brd-hd-01 .count-box {font-size: 16px;}
    .com-brd-hd-01 .count-box .page-cnt {font-size: 14px;}
    
    .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-top-srch {flex-direction: column;}

}


/* 페이지네이션 */
.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: #00BA8F; color: #fff; border: 1px solid #00BA8F;}
.com-pagination .page-navi {width: 40px; height: 40px; background: url('../../../user/web/images/icon/icon_page_navi.svg') no-repeat center;}
.com-pagination .page-navi2 {width: 40px; height: 40px;background: url('../../../user/web/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-pagination {width: 100%; display: flex; align-items: center; justify-content: center;}
.com-pagination .page-links {display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 0 20px;}
.com-pagination .page-links a {display: block; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid #ccc; font-size: 15px; color: #444;}
.com-pagination .page-links a.active {background: #333; color: #fff; border: 1px solid #333;}
.com-pagination .page-links a:not(.page-navi):where(:focus, :hover) {background: #333; border: 1px solid #333; color: #fff;}

.com-pagination .page-btns {display: flex; gap: 4px;}
.com-pagination .page-navi {flex-shrink: 0; width: 40px; height: 40px; border: 1px solid #ccc; background: url(/resources/user/web/images/icon/icon_page_navi.svg) no-repeat center;}
.com-pagination .page-navi2 {flex-shrink: 0; width: 40px; height: 40px; border: 1px solid #ccc; background: url(/resources/user/web/images/icon/icon_page_navi2.svg) no-repeat center;}
.com-pagination .page-navi.prev {margin-left: 4px;}
.com-pagination .page-navi.next {transform: rotate(180deg);}
.com-pagination .page-navi2.end {transform: rotate(180deg); margin-left: 4px;}

@media screen and (max-width: 480px) {
    .com-pagination .page-links a {width: 30px; height: 30px; font-size: 14px;}
    .com-pagination .page-navi {width: 30px; height: 30px;}
    .com-pagination .page-navi2 {width: 30px; height: 30px;}
    .com-pagination .page-links {margin: 0 10px}
} */


/* 게시판 목록 */
.com-brd-list-01 {font-size: 16px; width: 100%; overflow: hidden;} 
.com-brd-list-01 table {width: 100%; border-top: 3px solid #111; 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('../../../user/web/images/icon/icon_lock.svg') no-repeat center;}
.com-brd-list-01 td .file {width: 22px; height: 22px; background: url('../../../user/web/images/icon/icon_file.svg') no-repeat center;}
.com-brd-list-01 td .link {width: 22px; height: 22px; background: url('../../../user/web/images/icon/icon_link.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: #209860;}
.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: #209860;}
.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-qna {border-top: 2px solid #000; border-bottom: 1px solid #ddd;}
.com-brd-list-qna  .faq-item {}
.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: #00BA8F; 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('../../../user/web/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-04 {display: flex; flex-wrap: wrap; gap: 30px;}
.com-brd-list-04 .item {width: calc(33.33% - 23.33px); border-radius: 20px; transition: .3s;}
.com-brd-list-04 .item:hover {box-shadow: 0px 0px 25px rgba(0,0,0,.1);}
.com-brd-list-04 .item a {display: block;}
.com-brd-list-04 .item-con {padding: 30px 30px 30px; border: 1px solid #ddd; border-radius: 20px 20px 0 0; border-bottom: 0; min-height: 306px;}
.com-brd-list-04 .item-con .cate-box {margin-bottom: 15px;}
.com-brd-list-04 .item-con .cate-box span {font-size: 16px; padding: 5px 10px; display: inline-block; margin-right: 4px; border-radius: 5px; height: 30px;}
.com-brd-list-04 .item-con .cate-box .region {border: 1px solid #ddd; box-sizing: border-box;}
.com-brd-list-04 .item-con .cate-box .type {color: #fff;}
.com-brd-list-04 .item-con .tit {font-size: 20px; font-weight: bold;display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 50px;}
.com-brd-list-04 .item-con .info {margin-top: 25px; background: #F4F4F4; padding: 15px; border-radius: 10px; min-height: 146px; display: flex; flex-direction: column; justify-content: center;}
.com-brd-list-04 .item-con .info li {font-size: 17px; display: flex; align-items: flex-start; margin-bottom: 10px; letter-spacing: -.3px;}
.com-brd-list-04 .item-con .info li:last-child {margin-bottom: 0;}
.com-brd-list-04 .item-con .info li span {display: block; line-height: 24px;}
.com-brd-list-04 .item-con .info li .tt {font-weight: bold; width: 70px;}
.com-brd-list-04 .item-con .info li .tx {width: calc(100% - 70px);}
.com-brd-list-04 .item-bar {text-align: center; padding: 16px; background: #00A37D; color: #fff; border: 1px solid #ddd; border-radius: 0 0 20px 20px;}
.com-brd-list-04 .item.end .item-bar {background: #AFAFAF;}

.com-brd-list-04 .cate1 {background: #12A442;}
.com-brd-list-04 .cate2 {background: #2573FF;}
.com-brd-list-04 .cate3 {background: #27B8E0;}
.com-brd-list-04 .cate4 {background: #50BA9C;}
.com-brd-list-04 .cate5 {background: #FFBB28;}
.com-brd-list-04 .cate6 {background: #FF7621;}
.com-brd-list-04 .cate7 {background: #865DBE;}
.com-brd-list-04 .cate8 {background: #FF7A97;}
.com-brd-list-04 .cate9 {background: #76D54A;}
.com-brd-list-04 .cate10 {background: #37557D;}
.com-brd-list-04 .cate11 {background: #A76700;}

.com-brd-list-04 .item-con .info li.li-refrnc{display: block;}
.com-brd-list-04 .item-con .info li .tt.refrnc {width:auto;}

.com-brd-list-05 {border-top: 1px solid #ddd;}
.com-brd-list-05 .item .list {display: flex; align-items: center; justify-content: space-between; padding: 30px 0; border-bottom: 1px dashed #ddd;}
.com-brd-list-05 .item:last-child .list {border-bottom: 1px solid #ddd;}
.com-brd-list-05 .item .item-l {}
.com-brd-list-05 .item .tit {font-size: 24px; font-weight: bold; color: #00A37D; margin-bottom: 10px;}
.com-brd-list-05 .item .txt {font-size: 16px;}
.com-brd-list-05 .com-btn.toggle-btn {max-width: none; background: #00BA8F;}
.com-brd-list-05 .toggle-btn img {margin-right: 10px;}
.com-brd-list-05 .toggle-btn.active img {transform: rotate(180deg);} 
.com-brd-list-05 .li-content{ font-family: 'Pretendard'; }
.com-brd-list-05 pre { white-space: pre-wrap;   word-wrap: break-word;}

.com-brd-list-05 .item .detail {display: none; background: #F3F3F3; 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-qna .faq-question .q-label {font-size: 16px;}
    .com-brd-list-qna .faq-question .cate {font-size: 14px;}
    .com-brd-list-qna .faq-question .txt {font-size: 16px;}
    .com-brd-list-qna .faq-answer .a-label {font-size: 16px;}
    .com-brd-list-qna .faq-answer .txt {font-size: 16px;}
    .com-brd-list-qna .edit-box button {font-size: 15px;}
  
    .com-brd-list-04 .item {width: calc(50% - 23.33px);}
    .com-brd-list-04 .item-con .cate-box span {font-size: 15px;}
    .com-brd-list-04 .item-con .tit {font-size: 18px;}
    .com-brd-list-04 .item-con .info li {font-size: 16px;}
    .com-brd-list-04 .item-bar {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-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-04 .item {width: 100%;}
    .com-brd-list-04 .item-con {min-height: auto;}
    .com-brd-list-04 .item-con .info {min-height: auto;}
}
@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 .item-con {padding: 25px 20px;}
    .com-brd-list-04 .item-con .info {margin-top: 18px;}
    .com-brd-list-04 .item-con .info li {flex-direction: column; margin-bottom: 5px;}
    .com-brd-list-04 .item-con .info li .tx {width: 100%;}
    .com-brd-list-04 .item-bar {padding: 12px;}
  
}




/************************************************** 
 게시글
***************************************************/
.com-post-hd-01 {border-top: 3px solid #111; 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-hd-02 {border-bottom: 1px solid #ddd;padding: 10px 20px;}
.com-post-hd-02 .title {font-size: 15px;font-weight: 600;}
.com-post-hd-02 .type {font-size: 18px; font-weight: 600;}

.com-post-files-01 {width: 100%; background: #fbfbfb; padding: 25px 20px; display: flex; gap: 15px; border-bottom: 1px solid #ddd;}
.com-post-files-01 .title p {display: flex; align-items: center; gap: 10px; line-height: 1.8; color: #089070; font-weight: 500; padding: 0 10px;}
.com-post-files-01 .title p::before {content: ''; width: 13px; height: 13px; background: url('../../../user/web/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-link-01 {width: 100%; background: #fbfbfb; padding: 25px 20px; display: flex; gap: 15px; border-top: 1px solid #ddd;}
.com-post-link-01 .title p {display: flex; align-items: center; gap: 10px; line-height: 1.8; color: #089070; font-weight: 500; padding: 0 10px;}
.com-post-link-01 .title p::before {content: ''; width: 13px; height: 13px; background: url('../../../user/web/images/icon/icon_link.svg') no-repeat center;}
.com-post-link-01 .link-list {padding: 5px 10px;}
.com-post-link-01 .link-list li {font-size: 17px;}
.com-post-link-01 .link-list li a {display: block; color: #004FA9; text-decoration: underline; word-break: break-all;}

.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: #089070; 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('../../../user/web/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-link-01 {flex-direction: column; gap: 5px;}
    .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-link-01 .link-list li {font-size: 15px;}
}




/************************************************** 
 게시글 작성 서식
***************************************************/
.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('../../../user/web/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 #03ac84; 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('../../../user/web/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('../../../user/web/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 {margin-top: 10px; margin-left: auto; display: block; padding: 5px; background: #818181; color: #fff; font-size: 15px; border-radius: 3px;}
.com-post-write .td-thumbnail span {font-size: 14px; color: #777;}



@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;}
}
@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 #089070; background: #eef7f2;}
.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;}
.com-btn.type-03 {width: 100%; max-width: 100px; background: #00A37D; border: 1px solid #00A37D; color: #fff; padding: 12px;border-radius: 5px; font-weight: 500;}
.com-btn.type-04 {width: 100%; max-width: 100px; border: 1px solid #ddd; padding: 12px; border-radius: 5px; background: #fff; font-weight: 500;}

@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: #209860; border-color: #209860;}
.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 #209860;} 




/************************************************** 
 공통 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-01 {position: relative; display: inline-flex; align-items: center; font-weight: 500; gap: 10px; font-size: 15px;}
.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 #209860;}

@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: 18px; width:200px; background: #0EA88D; padding:20px; color: #fff;}
.com-file-download-box ul li:nth-child(2) a span{background: #F59D07;}
.com-file-download-box ul li a img{padding: 20px; border: 1px solid #d9d9d9;}

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





/************************************************** 
 팝업창
***************************************************/
.com-popup {display: none; position: fixed; top: 0; left: 0; background: rgba(0,0,0,.5); width: 100%; height: 100%;z-index: 100}
.com-popup .pop-contents {padding: 40px; border-radius: 10px; background: #fff; min-width: 974px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); overflow: hidden;}
.com-popup .pop-close-btn {background: #999; position: absolute; top: 0; right: 0; padding: 15px;}
.com-popup .cate-box {margin-bottom: 20px;}
.com-popup .cate-box span {font-size: 16px; padding: 5px 10px; display: inline-block; margin-right: 4px; border-radius: 5px; height: 30px;}
.com-popup .cate-box .region {border: 1px solid #ddd; font-weight: 500;}
.com-popup .cate-box .local-cate {background: #D9EFEA; color: #00BA8F;}
.com-popup .pop-tit {font-size: 20px; font-weight: bold;}
.com-popup .info-list {margin-top: 25px; background: #F4F4F4; padding: 20px; border-radius: 10px;display: flex; flex-direction: column; justify-content: center;}
.com-popup .info-list li {font-size: 17px; display: flex; align-items: flex-start; margin-bottom: 10px; letter-spacing: -.3px;}
.com-popup .info-list li:last-child {margin-bottom: 0;}
.com-popup .info-list li span {display: block; line-height: 24px;}
.com-popup .info-list li .tt {font-weight: bold; width: 90px;}
.com-popup .info-list li .tx {width: calc(100% - 90px);}

@media screen and (max-width: 1080px) {
    .com-popup .pop-contents {min-width: calc(100% - 40px);}
    .com-popup .cate-box {margin-bottom: 10px;}
    .com-popup .cate-box span {font-size: 15px;}
    .com-popup .pop-tit {font-size: 18px;}
    .com-popup .info-list {margin-top: 20px;}
    .com-popup .info-list li {font-size: 15px; margin-bottom: 10px;}
}

@media screen and (max-width: 480px) {
    .com-popup .pop-contents {padding: 30px;}
    .com-popup .info-list {height: 340px; overflow: auto;}
    .com-popup .info-list li .tt {width: 75px; }
    .com-popup .info-list li .tx {width: calc(100% - 90px);}
}


@media screen and (max-width: 480px) {
    .com-popup .pop-contents {padding: 25px 20px;}
}




/* 애니메이션 */









@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) {

}