@charset "utf-8";
fieldset {border: none;}
legend,
caption {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: polygon(0 0, 0 0, 0 0); border: 0;}
.essential {color: #CD4454; position: relative; top: -5px;left: 3px; font-size: 1.4rem;}
.radio-wrap,
.check-wrap,
.check-wrap02 {display: flex;}
.radio-wrap li:not(:last-child),
.check-wrap li:not(:last-child),
.check-wrap02 li:not(:last-child) {margin-right: 5px;}
.check-wrap02 {margin-top: 10px;}
.check-wrap02 li {width: calc(33.33% - 5px); margin-bottom: 5px;}
.fileIcon {width: 14px; height: 15px; display: inline-block; vertical-align: middle; background: url("../images/sub/fileIcon.png") no-repeat; margin: 0 3px 3px 0;}
.b-line {border-right: 1px solid #e0e0e0;}
.table .table-txt {display: flex; justify-content: space-between; color: #222; margin-bottom: 10px; font-weight: 700; font-size: 1.7rem;}
.pay-txt {font-size: 2rem; color: #d41212; font-weight: 700;}
.frm-tx {display: inline-block; margin: 0 5px;}
.pw-comment {font-size: 1.5rem;}
.pw-comment.red {color: #d41212;}
.pw-comment.blue {color: #0038FF;}
.ing {background: #F17046; display: inline-block; margin-right: 4px; width: 54px; font-size: 13px; color: #fff; text-align: center; border-radius: 60px; vertical-align: text-bottom; padding: 2px 0;}
.end {background: #959595; display: inline-block; margin-right: 4px; width: 54px; font-size: 13px; color: #fff; text-align: center; border-radius: 60px; vertical-align: text-bottom; padding: 2px 0;}
.cnt503 table td a:hover {text-decoration: underline;}
.table input[type="text"],
.table input[type="password"],
.table input[type="tel"],
.table select {height: 34px; line-height: 34px;}
.table table {width: 100%; border-collapse: collapse; table-layout: fixed; border-top: 2px solid #0B7B65;}
.table table tr {border-bottom: 1px solid #E0E0E0;}
.table table tr th {background: #F9F9F9; font-weight: 700; color: #222;}
.table.bbs-list table tr td.board-ti {white-space: nowrap; text-overflow: ellipsis; overflow: hidden;} 
.table table tr th,
.table table tr td {padding: 12px 10px; text-align: center;}
.table table tr td:not(:last-child) {border-right: 1px solid #e0e0e0;}
.table table tr td.board-ti {text-align: left;}
.table.bbs-view table td,
.table.bbs-write table td {text-align: left;}
.table.bbs-view table td img {width: 100%;}
.table.bbs-view table td .file:hover {text-decoration: underline;}
.search-area {width: 100%; background: #EEF5F4; border: 1px solid #e0e0e0; padding: 30px; border-radius: 0 20px 0 20px; margin-bottom: 30px;}
.search-area .search-wrap {display:flex; margin:0 auto; width: 100%; max-width: 560px; height: 40px;}
.search-area .search-wrap .sub-srh {width: calc(100% - 100px); margin-right: 5px;}
.table.bbs-write table th .btn-box {display: inline-block; margin-left: 5px; vertical-align: middle;}
.bbs-add-wrap .table.bbs-add:not(:last-of-type) {margin-bottom: 30px;}
.bbs-add-wrap .bbs-add-btn {display: block; width: 100%; text-align: center; background: #535353; height: 44px; line-height: 44px; color:  #fff; margin-top: 20px; font-size: 1.6rem;}
input[type="text"].date-frm {padding-right: 35px; background:#fff url("../images/sub/calendar.png") no-repeat 94% center !important;}


@media all and (max-width: 900px) {
    .table.scroll-table {overflow-x: auto;}
    .table.scroll-table table {width: 999px !important;}
}
@media all and (max-width: 900px) {
    .table table,
    .table table colgroup,
    .table table thead,
    .table table tbody,
    .table table tr,
    .table table tr th,
    .table table tr td {display: block;width: 100%;}
    .table.board-table table thead {display: none;}
    .table.scroll-table table,
    .table.scroll-table table colgroup,
    .table.scroll-table table thead,
    .table.scroll-table table tbody,
    .table.scroll-table table tr,
    .table.scroll-table table tr th,
    .table.scroll-table table tr td {display: revert; width: auto;}
    .table table tr th {border-right: none; text-align: left;}
    .table.scroll-table table tr th {border-right: 1px solid #e0e0e0; text-align: center;}
    .table table tr th[scope="rowgroup"] {border-bottom: 1px solid #e0e0e0;}
    .table table tr td:not(:last-child) {border-right: none;}
    .table.board-table table tr {padding: 12px;}
    .table.board-table table tr td {text-align: left; padding: 3px;}
    .table.board-table table tr td[data-board-header]::before {content: attr(data-board-header); width: 65px; display: inline-block; font-weight: 700; padding-right: 15px; text-align: right;}
    .table.scroll-table table tr td:not(:last-child) {border-right: 1px solid #e0e0e0;}
    .table.bbs-write table tr td input[type="text"],
    .table.bbs-write table tr td input[type="password"],
    .table.bbs-write table tr td input[type="tel"]{width: 100%;}
    input[type="text"].mail-frm,
    input[type="text"].date-frm {width: calc((100% - 25px) / 2) !important;}
    input[type="text"].mail-frm ~ select {width: 100%; margin-top: 5px;}
}
@media all and (max-width: 768px) {
    .search-area {padding: 20px;}
}
@media all and (max-width: 640px) {
	.check-wrap02 li {width: calc(50% - 5px);}
}

/*********************************************** gallery01 ***********************************************/
.gallery-box {display: flex; flex-wrap: wrap; margin: 0 -30px -30px 0;}
.gallery-box li {width: calc(100% / 3 - 30px); margin: 0 30px 30px 0;}
.gallery-box li a {display: block; padding: 15px; border: 1px solid #e0e0e0; border-radius: 20px;}
.gallery-box li a .img-wrap {height: 180px; margin-bottom: 10px; overflow: hidden;}
.gallery-box li a .img-wrap img {width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;}
.gallery-box li a .img-wrap img:hover {transform: scale(1.1);}
.txt-box .gallery-tit {font-size: 1.8rem; color: #222; font-weight: 700; margin-bottom: 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.gallery-box li a .txt-box .gallery-date {color: #999;}

@media all and (max-width:999px) {
    .gallery-box li {width: calc(100% / 2 - 30px);}
    
}
@media all and (max-width:768px) {
    .gallery-box {margin: 0 -20px -20px 0;}
    .gallery-box li {width: calc(100% / 2 - 20px); margin: 0 20px 20px 0;}
    .txt-box .gallery-tit {font-size: 1.7rem;}
}
@media all and (max-width:640px) {
    .gallery-box { margin: 0;}
    .gallery-box li {width: 100%; margin: 0 0 20px 0;}
    .gallery-box li a .img-wrap {height: 220px;}
}
/*********************************************** gallery02 ***********************************************/
.gallery-box02 {display: flex; flex-wrap: wrap; margin: 0 -30px -30px 0;}
.gallery-box02 > li {width: calc(100% / 2 - 30px); margin: 0 30px 30px 0; }
.gallery-box02 > li a {display: flex; border: 1px solid #e0e0e0;  border-radius: 20px;}
.gallery-box02 > li a .txt-box {width: calc(100% - 160px); display: flex; flex-direction: column; justify-content: space-between; padding: 20px;}
.gallery-box02 > li a .img-wrap {width: 160px; height: 216px;}
.gallery-box02 > li a .img-wrap img {width:160px; height: 100%; border-radius: 20px 0 0 20px;}
.gallery-box02 > li a .txt-box .gallery-tit {line-height: 1.2; word-break: break-all; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.gallery-box02 > li a .txt-box .book-info dl {display: flex;}
.gallery-box02 > li a .txt-box .book-info dl dt {font-weight: 700; margin-right: 12px; position: relative;} 
.gallery-box02 > li a .txt-box .book-info dl dt::after {content: ":"; position: absolute; right: -8px;}
@media all and (max-width:999px) {
    .gallery-box02 {display: flex; flex-wrap: wrap; margin:0;}
    .gallery-box02 > li {width: 100%; margin: 0 0 30px 0;}
    
}
@media all and (max-width:768px) {
    .gallery-box02 > li {margin: 0 0 20px 0;}
    
}
@media all and (max-width:640px) {
    .gallery-box02 > li a .txt-box .book-info > li:not(:last-child) {padding-bottom: 5px;}
    .gallery-box02 > li a .txt-box {width: calc(100% - 145px);}
    .gallery-box02 > li a .img-wrap {width: 145px; height: 200px;}
    
}
@media all and (max-width:420px) {
    .gallery-box02 > li a {flex-direction: column;}
    .gallery-box02 > li a .img-wrap {width: 100%; height: 116vw;}
    .gallery-box02 > li a .img-wrap img {width:100%; border-radius: 20px 20px 0 0;}
    .gallery-box02 > li a .txt-box {width: 100%;}
    .gallery-box02 > li a .txt-box .gallery-tit {margin-bottom: 10px;}
}


/****** button style ******/
.btn-wrap {text-align: right; margin-top: 50px;}
.btn-default {display:inline-block; width: 110px; height: 40px; line-height: 40px; text-align: center; font-size: 1.5rem; border-radius: 4px;}
.btn-auto {width:auto; padding: 0 10px;}
.btn-primary {background-color: #0B7B65; color: #fff;}
.btn-dgray {background-color: #535353; color: #fff;}
.btn-gray {background-color: #7C7C7C; color: #fff;}
.btn-white {background-color: #fff; color: #0B7B65; border: 1px solid #0B7B65; font-weight: 700;}
.btn-teal {background-color: #008F98; color: #fff;}
.btn-dark {background-color: #333; color: #fff;}
.table-btn-s {display: inline-block; font-size: 1.3rem; border-radius: 4px; padding: 4px 10px; font-weight: 700;}
.table-btn-m {display: inline-block; font-size: 1.5rem; padding: 12px 20px;}
.table-btn-white {background: #fff; border: 1px solid #eaeaea; color: #7e7e7e;}
.table-btn-color {background: #fff; border: 1px solid #eaeaea; color: #009BAF;}
.table-btn-blue {background: #fff; border: 1px solid #197AD3; color: #197AD3; transition: background 0.2s;}
.table-btn-blue:hover {background-color: #E5F3FF;}
.frm-btn {min-width: 60px; height: 34px; padding: 0 10px; border-radius: 4px; font-size: 1.4rem;}
.state-box {display: inline-block; text-align:center; width: 100%; max-width: 70px; font-size: 1.4rem; padding: 4px 6px; font-weight: 700;}
.state-red { color: #D30707; background: #FDF2F2;}
.state-teal {color: #008F98; background: #F5FBF9;}
.state-gray {color: #999999; background: #EFEFEF;}
.state-blue {color: #3A8BC3; background: #EBF0F9;}
.state-orange {color: #d97310; background: #fcf5ed;}

.paging-wrap {display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 30px;}
.paging-wrap li.paging-btn a {width: 20px; height: 20px; display: block;}
.paging-wrap li.paging-btn.btn-prev2 a {background: url("../images/sub/prev2.jpg") no-repeat center;}
.paging-wrap li.paging-btn.btn-prev a {background: url("../images/sub/prev.jpg") no-repeat center;}
.paging-wrap li.paging-btn.btn-next a {background: url("../images/sub/next.jpg") no-repeat center;}
.paging-wrap li.paging-btn.btn-next2 a {background: url("../images/sub/next2.jpg") no-repeat center;}
.paging-wrap li.num a {display:block; width: 30px; height: 30px; line-height: 30px; color: #6B6B6B; border-radius: 50%; text-align: center; font-size: 1.5rem;}
.paging-wrap li.num a.on {color: #fff; background: #0B7B65;}


@media all and (max-width: 640px) {
    .paging-wrap {gap: 4px;}
    .paging-wrap li.num a {width: 20px; height: 20px; line-height: 20px;}

}