@charset "utf-8";

.list-empty {padding: 30px;} 
.list-empty .inner {display: flex; align-items: center; justify-content: center; font-size: 20px; color: #dadada; font-weight: 500; text-align: center; min-height: 300px; border: 1px solid #dfdfdf;} 
@media screen and (max-width: 1399px) {
  .list-empty {padding: 20px;} 
  .list-empty .inner {font-size: 18px;}  
}
@media screen and (max-width: 767px) {
  .list-empty {padding: 15px;} 
  .list-empty .inner {font-size: 16px;}  
}


/* Paginations */
.paging {padding-top: 100px;}
.paging__btn {font-size: 18px; width: 40px; height: 40px;}
.paging .paging__num {background: #f9f8f7; border-radius: 50%; color: #707070;}
.paging .paging__num.active {background: var(--primary); color: #fff;}
@media (hover: hover) {}
@media screen and (max-width: 1399px) {
  .paging__btn {font-size: 16px;}
}
@media screen and (max-width: 767px) {
  .paging__btn {font-size: 15px; width: 30px;height: 30px;}
}

/* Form */
input, input:focus {outline: none; box-shadow: none;}
.search-bar {--size: 40px; --r: 0px; justify-content: flex-start;}
.search-bar form {display: flex; gap: 5px; justify-content: inherit;}
.search-bar form .sch-select {height: var(--size); width: 100px; border-radius: var(--r); border: #ccc; background: #F6F6F6; font-size: 16px; color: var(--gray); padding: 0; position: relative; flex-shrink: 0;}
.search-bar form .sch-select select {all: unset; width: 100%; height: 100%; display: flex; align-items: center; padding-inline: 1em; box-sizing: border-box;}
.search-bar form .sch-select .icon {position: absolute; top: 50%; right: 1em; transform: translate(0, -75%); pointer-events: none;}
.search-bar form .sch-inp {height: var(--size); width: 554px; border-radius: var(--r); border: #ccc; background: #F6F6F6; padding: 0 1em; font-size: 16px; color: var(--gray);}
.search-bar form .sch-inp::placeholder {opacity: .5;}
.search-bar form .sch-btn {height: var(--size); width: var(--size); border-radius: var(--r); display: flex; align-items: center; justify-content: center; padding: 0; background: var(--primary); color: #fff; font-size: 20px; flex-shrink: 0;}

.dd-form {--inp-height: 42px; --inp-gray-dark: #bfbfbf; --inp-gray2: #dcdcdc; --inp-gray3: #fff; --invalid1: #df1717; --invalid2: #fef6f6; font-size: inherit;}

.dd-form-notice {padding: 30px; background: var(--inp-gray3); border: 1px solid var(--inp-gray2); border-radius: 15px; margin-bottom: 40px; color: var(--gray);}

.dd-form-foot {padding-top: 50px;}

.dd-form-table {width: 100%; font-size: 16px; table-layout: fixed;}
.dd-form-table colgroup {}
.dd-form-table colgroup .col--th {width: 200px;}
.dd-form-table colgroup .col--td {width: calc(100% - 200px);}
.dd-form-table tbody {}
.dd-form-table tbody tr {}
.dd-form-table tbody tr :where(th, td) {padding-block: 10px; vertical-align: top;}
.dd-form-table tbody tr th {padding-right: 10px;}
.dd-form-table tbody tr th .label {font-size: 1.2em; font-weight: 500; min-height: var(--inp-height); line-height: 1.5; display: flex; align-items: center; gap: .3em;}
.dd-form-table tbody tr th span.req {color: var(--primary);}
.dd-form-table tbody tr td {}

.dd-inp {width: 100%;}
.dd-inp :where(input, textarea) {all: unset; font: inherit; box-sizing: border-box;}
.dd-inp input::placeholder, .dd-inp textarea::placeholder {opacity: .5;}
.dd-inp .inp-box {display: block; width: 100%; height: var(--inp-height); border: 1px solid var(--inp-gray2); background: var(--inp-gray3); border-radius: 5px; overflow: hidden;}
.dd-inp .inp-box textarea,
.dd-inp .inp-box .inp {display: block; width: 100%; height: 100%; padding: 0 1em; color: var(--gray-dark);}
.dd-inp .inp-box .inp--date {all: initial; display: flex; align-items: center; height: 100%; padding: 0 1em; font-size: 18px; color: var(--gray-dark);}
.dd-inp .inp-box:has(textarea) {height: 300px;}
.dd-inp .inp-box textarea {padding-block: 1em;}
.dd-inp .inp-error {display: block; padding-top: 0.6em; padding-left: 0em; color: var(--invalid1); font-size: 0.8em;}
.dd-inp .inp-error:empty {display: none;}
.dd-inp .inp-notice {display: block; text-align: left; color: var(--inp-gray-dark); margin-top: 0.5em;}

.dd-inp .radio-group {display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 5px 30px;}
.dd-inp .radio-group .radio {position: relative; height: var(--inp-height);}
.dd-inp .radio-group .radio label {display: flex; align-items: center; gap: .8em; height: 100%; cursor: pointer;}
.dd-inp .radio-group .radio label input[type="radio"] {all: unset; position: absolute; top: 50%; left: 0; z-index: -1; transform: translate(0, -50%); width: 0; height: 0; outline: none;}
.dd-inp .radio-group .radio label .chck {width: 1.2em; aspect-ratio: 1 / 1; border-radius: 5px; border: 1px solid var(--inp-gray2); padding: 4px; background: var(--inp-gray3); flex-shrink: 0; border-radius: 50%;}
.dd-inp .radio-group .radio label .chck::before {content: ''; display: block; width: 100%; height: 100%; border-radius: 5px; background: var(--primary); opacity: 0;}
.dd-inp .radio-group .radio label input[type="radio"]:checked ~ .chck {border-color: var(--primary); background: #fff;}
.dd-inp .radio-group .radio label input[type="radio"]:checked ~ .chck::before {opacity: 1;}
.dd-inp .radio-group .radio label .inp-box {width: 273px; margin-left: .5em; opacity: .5; pointer-events: none; cursor: initial;}
.dd-inp .radio-group .radio label input[type="radio"]:checked ~ .inp-box {opacity: 1; pointer-events: initial;}
.dd-inp .radio-group .radio label .label {color: var(--gray-dark); flex-shrink: 0;}

.dd-inp .checkbox-group {display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 30px;}
.dd-inp .checkbox-group .checkbox {position: relative; height: var(--inp-height); }
.dd-inp .checkbox-group .checkbox label {display: flex; align-items: center; gap: .8em; height: 100%; cursor: pointer;}
.dd-inp .checkbox-group .checkbox label input {position: absolute; top: 50%; left: 10px; z-index: -1; transform: translate(0, -50%); width: 0; height: 0;}
.dd-inp .checkbox-group .checkbox label .chck {width: 1.78em; aspect-ratio: 1 / 1; border-radius: 5px; border: 1px solid var(--inp-gray2); padding: 5px; background: var(--inp-gray3); flex-shrink: 0;}
.dd-inp .checkbox-group .checkbox label .chck.radio {border-radius: 50%;}
.dd-inp .checkbox-group .checkbox label .chck::before {content: ''; display: block; opacity: 0; width: 100%; height: 60%; border-left: 3px solid var(--primary); border-bottom: 3px solid var(--primary); transform: translate(0, 15%) rotate(-45deg); box-sizing: border-box;}
.dd-inp .checkbox-group .checkbox label input:checked ~ .chck {border-color: var(--primary); background: #fff;}
.dd-inp .checkbox-group .checkbox label input:checked ~ .chck::before {opacity: 1;}
.dd-inp .checkbox-group .checkbox label .inp-box {width: 300px; margin-left: .5em; opacity: .5; pointer-events: none; cursor: initial;}
.dd-inp .checkbox-group .checkbox label input[type="radio"]:checked ~ .inp-box {opacity: 1; pointer-events: initial;}
.dd-inp .checkbox-group .checkbox label .label {color: var(--gray-dark); flex-shrink: 0;}
.dd-inp .checkbox-group .checkbox label .chck.radio {border-radius: 50%; display: flex; align-items: center; justify-content: center;}
.dd-inp .checkbox-group .checkbox label .chck.radio::before {all: unset; box-sizing: border-box; content: ''; display: block; width: 80%; height: 80%; transform: none; background: var(--primary); border-radius: 50%; opacity: 0;}
.dd-inp .checkbox-group .checkbox.type-button label {padding: 0 1em 0 0.5em; background: var(--inp-gray3); border: 1px solid var(--inp-gray2);}
.dd-inp .checkbox-group .checkbox.type-button label .chck {background: #fff;}

.dd-file {--gap: 10px 5px; display: flex; flex-direction: column; gap: var(--gap); width: 100%;}
.dd-file .file-row {width: 100%;}
.dd-file .inp-error {padding-top: var(--gap);}
.dd-file .file-box {position: relative; display: flex; gap: var(--gap); align-items: center; height: var(--inp-height); width: 100%;}
.dd-file .file-box input[type="file"] {position: absolute; top: 50%; left: 0%; z-index: -1; width: 0; height: 0; transform: translate(0, -50%);}
.dd-file .file-box label {display: flex; gap: var(--gap); width: 100%; height: 100%;}
.dd-file .file-box label .label {display: block; width: 100%; height: 100%; border: 1px solid var(--inp-gray2); background: var(--inp-gray3); border-radius: 5px; padding: 0 1em; line-height: var(--inp-height); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; word-break: break-all;}
.dd-file .file-box label .label:empty::before {content: attr(data-placeholder); opacity: .4;}
.dd-file .file-box button {display: flex; align-items: center; justify-content: center; text-align: center; height: 100%; font-family: inherit; padding: 5px 15px; background: #ccc; color: #7E808B; border-radius: 5px; border: 1px solid var(--inp-gray2); flex-shrink: 0;}
.dd-file .file-box label .btn-find {width: 120px; border: 1px solid #adadad; background: transparent; color: #909090;}
.dd-file .file-box label .btn-cancel {width: auto; aspect-ratio: 1 / 1;}
.dd-file .inp-notice {margin-top: 0; text-align: right;}

.dd-form-indiv-policy {padding: 100px 0 0 0; display: grid; grid-template-columns: 200px 1fr;}
.dd-form-indiv-policy .title {font-size: 20px; color: var(--primary); margin-bottom: 0.8em; font-weight: 700;}
.dd-form-indiv-policy .content {overflow: hidden auto; height: 250px; padding: 30px; background: #fcfcfc; border: 1px solid  var(--inp-gray2); border-radius: 5px;}
.dd-form-indiv-policy .content::-webkit-scrollbar {background: transparent;}
.dd-form-indiv-policy .content::-webkit-scrollbar-thumb {background: var(--gray3);}
.dd-form-indiv-policy .policy-doc {border: none; padding: 0; border-radius: 0;}
.dd-form-indiv-policy .checks {padding-top: 30px; grid-column: span 2;}
.dd-form-indiv-policy .dd-inp {display: flex; justify-content: flex-end;}
.dd-form-indiv-policy .dd-inp .checkbox-group {font-size: 18px;}
.dd-form-indiv-policy .dd-inp .checkbox-group .checkbox label .label {color:  var(--inp-gray-dark); font-weight: 500;}
.dd-form-indiv-policy .dd-inp .checkbox-group .checkbox label input:checked ~ .label {color: var(--navy);}

.dd-form .submit-button {width: 336px; height: 60px; display: flex; align-items: center; justify-content: center; text-align: center; background: var(--primary); color: white; font-size: 20px; font-weight: 600; border-radius: 5px;}

.dd-inp--invalid .inp-box {border-color: var(--invalid1); background: var(--invalid2);}
.dd-inp--invalid .checkbox-group .checkbox label input:not(:checked) ~ .chck {border-color: var(--invalid1); background: var(--invalid2);}
.dd-inp--invalid .checkbox-group .checkbox label input:not(:checked) ~ .label {color: var(--invalid1);}

.switch-fields {display: none!important;}
.switch-fields.active {display: table-row-group!important;}

@media (hover: hover) {
  .search-bar form .sch-btn:hover {background: var(--secondary);}
  .dd-file .file-box button:hover {background: var(--primary); border-color: var(--primary); color: white;}
  .dd-file .file-box button:hover path {stroke: white;}
}
@media screen and (max-width: 1399px) {
  .search-bar {--size: 40px;}

  .dd-form-notice {padding: 25px;}

  .dd-form-table {font-size: 15px;}
  .dd-form-table colgroup .col--th {width: 150px;}
  .dd-form-table colgroup .col--td {width: calc(100% - 150px);}
  .dd-inp .inp-error {font-size: 14px;}
  .dd-file .file-box label .btn-find {width: 100px;}
  .dd-form-indiv-policy {padding-top: 60px; grid-template-columns: repeat(1, 1fr);}
  .dd-form-indiv-policy .title {font-size: 18px;}
  .dd-form-indiv-policy .checks {padding-top: 20px;}
  .dd-form-indiv-policy .checks {grid-column: span 1;}

  .dd-form .submit-button {width: 300px; height: 50px; font-size: 18px;}
}
@media screen and (max-width: 767px) {
  .dd-form-notice {padding: 20px;}
  .dd-form-table colgroup {display: none;}
  .dd-form-table {display: block;}
  .dd-form-table :where(tbody, tr, th, td) {display: block;}
  .dd-form-table tbody tr {padding-block: 10px;}
  .dd-form-table tbody tr th {padding: 0 0 10px;}
  .dd-form-table tbody tr th .label {min-height: 0;}
  .dd-form-table tbody tr td {padding: 10px 0; padding-top: 0;}

  .dd-inp .radio-group {flex-direction: column;}
  .dd-inp .radio-group .radio {--inp-height: 30px;}
  .dd-inp .radio-group .radio label .chck {width: 1.4em; height: 1.4em; padding: 3px;}
  .dd-inp .checkbox-group .checkbox label .chck {width: 1.4em; height: 1.4em; padding: 3px;}

  .dd-file {--gap: 5px;}
  .dd-file .file-box label .btn-find {width: 80px;}

  .dd-form-indiv-policy .title {font-size: 18px;}
  .dd-form-indiv-policy .content {padding: 30px 20px;}
  .dd-form-indiv-policy .dd-inp .checkbox-group {flex-direction: column; gap: 0; align-items: flex-end; --inp-height: 40px; font-size: 15px;}

  .switch-fields.active {display: block!important;}

  .dd-form .submit-button {width: 100%; height: 50px; font-size: 16px;}
}


/* Board list nav bar */
.board-ls-navbar {display: flex; justify-content: space-between; gap: 20px; padding-block: 20px; margin-bottom: 100px;}
.board-ls-navbar .btn {display: flex; align-items: center; justify-content: center; padding: 0 1.5em; border-radius: 10px; border: 1px solid var(--primary); color: var(--primary); font-weight: 600; flex-shrink: 0;}

@media (hover: hover) {
  .board-ls-navbar .btn:hover {background: var(--primary); color: #fff;}
}
@media screen and (max-width: 1399px) {
  .board-ls-navbar { gap: 10px; margin-bottom: 50px;}
  .board-ls-navbar .search-bar .sch-inp {width: 100%;}
  .board-ls-navbar .btn {height: 40px;}
}
@media screen and (max-width: 767px) {
  .board-categories {display: flex; flex-wrap: wrap; gap: 5px;}
}



/* View */
.board-view {--border-color: #dfdfdf; padding-top: 20px; border-top: 4px solid var(--border-color);}
.board-view-head {display: flex; flex-direction: column; gap: 30px; padding-bottom: 20px; border-bottom: 1px solid var(--border-color);}
.board-view-head .title {font-size: 20px; font-weight: 600; line-height: 1.3; word-break: normal;}
.board-view-head .title .tag {color: var(--primary); display: block; font-size: 0.8em; font-weight: 700; margin-bottom: 0.5em;}
.board-view-head .info {display: flex; gap: 1em; justify-content: flex-end;}
.board-view-head .info-item {display: flex; gap: 0.5em;}
.board-view-head .info-item b {color: var(--primary);}
.board-view.type--aside {display: flex; gap: 40px; flex-shrink: 0;}
.board-view.type--aside .board-view-content {width: 100%; border-bottom: 1px solid var(--border-color);}

.board-view-body {padding-block: 50px;}

.board-view-etc ul > li .tag {border-radius: 0;}

.board-view-files {border-top: 1px solid var(--border-color); padding-block: 20px;}
.board-view-files > li > a {display: flex; align-items: center; gap: 15px; align-items: center; padding-block: 10px;}
.board-view-files > li > a .icon {padding: .3em 1em; font-size: 15px; background: var(--primary); color: #fff; font-weight: 600; flex-shrink: 0; border-radius: 100px;}
.board-view-files > li > a .file-name {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;}
.board-view-files > li > a .file-size {color: #adadad; font-weight: 500;}

.board-view-aside {width: 350px;}
.board-view-aside aside {position: sticky; top: 120px; display: flex; flex-direction: column;}
.board-view-aside aside .hr {height: 1px; background: var(--border-color);}
.board-view-aside aside .btn {width: 100%; height: 100%; display: flex; align-items: center; gap: .8em; background: var(--light-gray5); padding: 20px 10px; border-radius: 5px;}
.board-view-aside aside .btn.disabled {opacity: .5; cursor: pointer; pointer-events: none;}
.board-view-aside aside .board-view-paging {display: flex; flex-direction: column; gap: 5px;}
.board-view-aside aside .board-view-paging .btn {color: #a0a0a0;}
.board-view-aside aside .board-view-paging .btn .tag {font-weight: 700;}
.board-view-aside aside .board-view-paging .btn .arw {width: 0; height: 0; flex-shrink: 0; border-inline: 8px solid transparent; margin-left: auto;}
.board-view-aside aside .board-view-paging .btn--prev .arw {border-bottom: 10px solid #aaa;}
.board-view-aside aside .board-view-paging .btn--next .arw {border-top: 10px solid #aaa;}
.board-view-aside aside .btn-list {justify-content: space-between; margin-top: 20px;}

@media (hover: hover) {
  .board-view-paging .btn--paging:hover { background: #f8f7f6;}
  .board-view-files > li > a:hover {opacity: 0.5;}
}
@media screen and (max-width: 1399px) {
  .board-view-head {gap: 25px;}
  .board-view-head .title {font-size: 18px;}
  .board-view.type--aside {gap: 20px; flex-direction: column;}
  .board-view-files {padding-block: 10px;}
  .board-view-aside {width: 100%;}
  .board-view-aside aside .btn {font-size: 14px; padding: 10px;}
  .board-view-aside aside .board-view-paging .btn .arw {border-inline-width: 6px;}
  .board-view-aside aside .board-view-paging .btn--prev .arw {border-bottom-width: 8px;}
  .board-view-aside aside .board-view-paging .btn--next .arw {border-top-width: 8px;}
}
@media screen and (max-width: 767px) {
  .board-view.type--aside {flex-direction: column;}
  .board-view-aside {width: 100%;}
  .board-view-files > li > a {gap: 10px; font-size: 15px;}
  .board-view-files > li > a .icon {font-size: 14px;}
}




/* Certificates */
.cert-list { --gray-dark: #909090;  display: grid; grid-template-columns: repeat(4, 1fr); gap: 50px 30px;}
.cert-list:has(.list-empty) {grid-template-columns: repeat(1, 1fr);}
.cert-item {overflow: hidden;  border-radius: 8px; display: flex; align-items: center;  flex-direction: column;}
.cert-item .thumb { background: #ebebeb; border-radius: 8px; display: flex; align-items: center; justify-content: center;padding: 25px; width: 100%;aspect-ratio: 58 / 85;}
.cert-item .thumb img {}
.cert-item .cont {padding: 20px 0;width: 100%;}
.cert-item .cont .tag {display: block; font-weight: 700; font-size: 14px; color: var(--secondary); line-height: 1.2; margin-bottom: 0.3em;}
.cert-item .cont .tit {display: block; color: #000; font-size: 16px; line-height: 1.4; font-weight: 700; margin-bottom: 0.3em;}
.cert-item .cont .no {display: block; color: var(--gray-dark); font-size: 14px;}




@media (hover: hover) {}
@media screen and (max-width: 1399px) {
  .cert-list {grid-template-columns: repeat(3, 1fr); gap: 50px 20px;}
  .cert-item .cont {padding: 15px 0;}
}
@media screen and (max-width: 767px) {
  .cert-list {grid-template-columns: repeat(2, 1fr); gap: 40px 10px;}
  .cert-item .cont {padding-block: 10px 0;}
  .cert-item .cont .tag {font-size: 12px;}
  .cert-item .cont .tit {font-size: 14px;}
  .cert-item .cont .no {font-size: 12px;}
}
@media screen and (max-width: 499px) {}




/* Video list */
.video-ls {display: grid; grid-template-columns: repeat(3, 1fr); gap: 70px 20px;}
.video-ls:has(.list-empty) {grid-template-columns: repeat(1, 1fr);}
.video-ls > li {}
.video-ls > li > a {display: flex; flex-direction: column; height: 100%;}
.video-ls > li > a .thumb {width: 100%; aspect-ratio: 16 / 9; border: 1px solid #dfdfdf; border-radius: 0px; box-shadow: 5px 5px 15px rgb(0,0,0,.05); position: relative; overflow: hidden;}
.video-ls > li > a .thumb .overlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgb(0,0,0,.6); display: flex; align-items: center; justify-content: center; opacity: 0;}
.video-ls > li > a .thumb .overlay .icon {display: flex; align-items: center; justify-content: center; width: 54px; aspect-ratio: 1; -webkit-aspect-ratio: 1; border-radius: 50%; background: #fff;}
.video-ls > li > a .thumb .overlay .icon::before {content: ''; display: block; width: 0; height: 0; border-left: 16px solid var(--primary); border-block: 10px solid transparent; transform: translate(12.5%);}
.video-ls > li > a .content {padding-top: 15px;}
.video-ls > li > a .content .title {font-size: 16px; font-weight: 600; line-height: 1.3; color: #000;}
.video-ls > li > a .content .date {display: block; margin-top: 0.5em; color: #878787; font-size: 18px;}
@media (hover: hover) {
  .video-ls > li > a:not(:has(.overlay)):hover .thumb {opacity: .7;}
  .video-ls > li > a:not(:has(.overlay)):hover .title {color: var(--primary);}
  .video-ls > li > a:hover .thumb .overlay {opacity: 1;}
}
@media screen and (max-width: 1399px) {
  .video-ls {grid-template-columns: repeat(2, 1fr); gap: 40px 15px;}
  .video-ls > li > a .content {padding-top: 15px;}
  .video-ls > li > a .content .title {font-size: 15px;}
  .video-ls > li > a .content .date {font-size: 15px;}

  .video-ls > li > a .thumb .overlay {background: none; opacity: 1;}
  .video-ls > li > a .thumb .overlay .icon {box-shadow: 0 0 10px rgb(0,0,0,.15); width: 44px;}
}
@media screen and (max-width: 767px) {
  .video-ls {grid-template-columns: repeat(1, 1fr); gap: 40px 5px;}
  .video-ls > li > a .content .title {font-size: 15px;}
  .video-ls > li > a .content .date {font-size: 13px;}
}
@media screen and (max-width: 499px) {}




/* Gallery */
.gall-ls {display: grid; grid-template-columns: repeat(3, 1fr); gap: 70px 20px;}
.gall-ls:has(.list-empty) {grid-template-columns: repeat(1, 1fr);}
.gall-ls > li {}
.gall-ls > li > a {display: flex; flex-direction: column; height: 100%;}
.gall-ls > li.not-hover > a {cursor: default;}
.gall-ls > li > a .thumb {width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--gray-light); border-radius: 10px; box-shadow: 5px 5px 15px rgb(0,0,0,.05);}
.gall-ls > li > a .content {padding-top: 25px;}
.gall-ls > li > a .content .tag {display: block; font-weight: 700; color: var(--primary); line-height: 1.4;}
.gall-ls > li > a .content .title {display: block; font-size: 22px; font-weight: 600; line-height: 1.3;}
.gall-ls > li > a .content .date {display: block; margin-top: 0.5em; color: #878787; font-size: 18px;}

.gall-ls--v {display: grid; grid-template-columns: repeat(5, 1fr); gap: 80px 20px;}
.gall-ls--v:has(.list-empty) {grid-template-columns: repeat(1, 1fr);}
.gall-ls--v > li > a .thumb {width: 100%; aspect-ratio: 1 / 1.47; border: 1px solid var(--gray-light); border-radius: 0; box-shadow: 5px 5px 15px rgb(0,0,0,.05); margin-bottom: 25px; display: flex; align-items: center; justify-content: center; overflow: hidden;}
.gall-ls--v > li > a .thumb .overlay {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: rgb(0,0,0,.7); opacity: 0; transition: opacity .5s;}
.gall-ls--v > li > a .thumb .overlay .icon {width: 54px; aspect-ratio: 1; -webkit-aspect-ratio: 1; background: #fff; display: flex; align-items: center; justify-content: center; border-radius: 10px; color: var(--primary); font-size: 22px; transform: scale(1.5); opacity: 0; transition: transform .5s, opacity .5s;}
.gall-ls--v > li > a .thumb .overlay .icon svg {height: auto; width: 60%;}
.gall-ls--v > li > a .title {font-size: 14px; text-align: center; display: block; font-weight: 700;}

.gall-ls--h > li {border-bottom: 1px solid #dfdfdf;}
.gall-ls--h > li:first-child {border-top: 1px solid #dfdfdf;}
.gall-ls--h > li > a {display: flex; align-items: center; gap: 40px; padding-block: 25px;}
.gall-ls--h > li > a .thumb {width: 285px; aspect-ratio: 16 / 9; border-radius: 0px; overflow: hidden; background-color: #f8f7f7; border: 1px solid var(--gray-light); flex-shrink: 0;}
.gall-ls--h > li > a .content {display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 50px;}
.gall-ls--h > li > a .content .wrap {display: flex; flex-direction: column;}
.gall-ls--h > li > a .content .wrap .tag {font-size: 18px; font-weight: 700; line-height: 1; color: var(--primary); margin-bottom: 0.5em;}
.gall-ls--h > li > a .content .wrap .title {font-size: 24px; line-height: 1.3; font-weight: 700; margin-bottom: 2em; color: #000;}
.gall-ls--h > li > a .content .wrap .date {font-size: 16px; font-weight: 500; line-height: 1; color: #878787;}
.gall-ls--h > li > a .content .dd-button {--base: #878787; --hover: #878787; flex-shrink: 0; font-size: 16px;}
@media (hover: hover) {
  .gall-ls > li:not(.not-hover) > a:hover .thumb {opacity: .7;}
  .gall-ls > li:not(.not-hover) > a:hover .title {color: var(--primary);}

  .gall-ls--v > li > a:hover .thumb .overlay {opacity: 1;}
  .gall-ls--v > li > a:hover .thumb .overlay .icon {opacity: 1; transform: scale(1);}
  .gall-ls--v > li > a:hover .title {color: var(--primary);}

  .gall-ls--h > li > a:hover .thumb,
  .gall-ls--h > li > a:hover .content .wrap {opacity: .7;}
  .gall-ls--h > li > a:hover .content .dd-button {background: var(--primary); color: white;}
}
@media screen and (max-width: 1399px) {
  .gall-ls {grid-template-columns: repeat(3, 1fr); gap: 40px 15px;}
  .gall-ls > li > a .content {padding-top: 15px;}
  .gall-ls > li > a .content .tag {font-size: 15px;}
  .gall-ls > li > a .content .title {font-size: 18px;}
  .gall-ls > li > a .content .date {font-size: 15px;}

  .gall-ls--v {grid-template-columns: repeat(3, 1fr); gap: 70px 20px;}
  .gall-ls--v > li > a {display: flex; flex-direction: column; height: 100%;}
  .gall-ls--v > li > a .thumb {margin-bottom: 15px;}
  .gall-ls--v > li > a .title {font-size: 17px;}

  .gall-ls--h > li > a {gap: 25px; padding-block: 35px;}
  .gall-ls--h > li > a .thumb {width: 215px;}
  .gall-ls--h > li > a .content .wrap .tag {font-size: 17px;}
  .gall-ls--h > li > a .content .wrap .title {font-size: 22px;}
  .gall-ls--h > li > a .content .wrap .date {font-size: 16px;}
}
@media screen and (max-width: 767px) {
  .gall-ls {grid-template-columns: repeat(2, 1fr); gap: 40px 5px;}
  .gall-ls > li > a .content .tag {font-size: 12px;}
  .gall-ls > li > a .content .title {font-size: 15px;}
  .gall-ls > li > a .content .date {font-size: 13px;}

  .gall-ls--v {grid-template-columns: repeat(2, 1fr); gap: 50px 10px;}
  .gall-ls--v > li > a .thumb { margin-bottom: 15px;}
  .gall-ls--v > li > a .title {font-size: 14px; padding-inline: 10px;}

  .gall-ls--h {display: grid; grid-template-columns: repeat(1, 1fr); gap: 50px 15px;}
  .gall-ls--h > li > a {flex-direction: column; align-items: stretch;}
  .gall-ls--h > li > a .thumb {width: 100%;}
  .gall-ls--h > li > a .content {flex-direction: column; gap: 30px;}
  .gall-ls--h > li > a .content .wrap {width: 100%; padding-inline: 15px;}
  .gall-ls--h > li > a .content .wrap .tag {font-size: 14px;}
  .gall-ls--h > li > a .content .wrap .title {font-size: 16px;}
  .gall-ls--h > li > a .content .wrap .date {font-size: 13px;}
  .gall-ls--h > li > a .content .dd-button {padding: .8em 1.4em; border-radius: 10px; display: none;}
}
@media screen and (max-width: 499px) {}




/* FAQ */
.faq-ls {border-top: 2px solid var(--primary); --col-1: 100px; --col-2: calc(100% - 200px); --col-3: 100px; width: 100%;}
.faq-ls .list-empty {padding: 0;}
.faq-ls .list-empty .inner {border-top: none; border-inline: none;}
.faq-ls--item {width: 100%; border-bottom: 1px solid #E8E8E8;}
.faq-ls--item .question {display: grid; align-items: center; grid-template-columns: var(--col-1) var(--col-2) var(--col-3); width: 100%; padding: 20px 0; font-size: 19px;}
.faq-ls--item .question .tag {color: #878787; font-weight: 700;}
.faq-ls--item .question .cont {display: flex; align-items: flex-start; gap: 1em; text-align: left; line-height: 1.5; width: 100%;}
.faq-ls--item .question .cont .ca {flex-shrink: 0; border: 1px solid var(--primary); border-radius: 100px; font-size: 1em; display: flex; align-items: center; justify-content: center; color: var(--primary); padding: 0 1em; height: 1.5em;}
.faq-ls--item .question .cont .tit {display: block; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all;}
.faq-ls--item .question .ico-box {display: flex; justify-content: flex-end;}
.faq-ls--item .question .ico-box .ico {width: 32px; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; border-radius: 5px; border: 1px solid #ccc;}
.faq-ls--item .question .ico-box .ico .arrow {border-color: #ccc; border-width: 2px; width: 30%; height: 30%; margin-bottom: 0.2em;}
.faq-ls--item .answer {display: grid; grid-template-columns: var(--col-1) 1fr; width: 100%; background: #F6F6F6; padding: 30px 0; display: none;}
.faq-ls--item .answer .content {grid-column: 2 / 3; padding-right: 30px;}
.faq-ls--item .answer .content * {font-size: inherit!important;}
.faq-ls--item.active .question .cont .tit {white-space: initial; text-overflow: none;}
.faq-ls--item.active .question .ico-box .ico {transform: rotate(180deg);}
.faq-ls--item.active .answer {display: grid;}
@media (hover: hover) {}
@media screen and (max-width: 1399px) {
  .faq-ls {--col-1: 70px; --col-2: calc(100% - 140px); --col-3: 70px;}
  .faq-ls--item .question {font-size: 16px;}
  .faq-ls--item .answer {font-size: 15px;}
}
@media screen and (max-width: 767px) {
  .faq-ls {--col-1: 0; --col-2: 100%; --col-3: 0;}
  .faq-ls--item .question {font-size: 16px; grid-template-columns: 100%;}
  .faq-ls--item .question .tag {display: none;}
  .faq-ls--item .question .ico-box {display: none;}
  .faq-ls--item .answer {font-size: 15px; grid-template-columns: 100%; padding: 20px 20px;}
  .faq-ls--item .answer .content {grid-column: 1 / 2; padding-right: 0;}
}




/* Board list */
.board-ls .m-show {display: none;}
.board-ls {border-top: 2px solid var(--primary);}
.board-ls > li {border-bottom: 1px solid #dadada;}
.board-ls > li.board-ls-head,
.board-ls > li > a {display: grid; grid-template-columns: 100px 1fr 120px 100px; padding: 25px 0;}
.board-ls > li.board-ls-head {background: #f8f7f6; padding-block: 15px;}
.board-ls > li.board-ls-head span {font-weight: 700; color: #000;}
.board-ls > li .num {text-align: center; padding-inline: 0px; color: #878787;}
.board-ls > li .num:has(.notice-tag) {display: block!important; max-height: none!important; padding-inline: 10px 20px;}
.board-ls > li .num .notice-tag {display: block; width: 100%; padding: 3px 5px; background: var(--primary); color: #fff; font-weight: 700; font-size: 15px;}
.board-ls > li .title {padding-inline: 0 100px; font-weight: 600;}

@media (hover: hover) {
  .board-ls > li > a:hover {background: #fafcfd;}
}
@media screen and (max-width: 1399px) {
  .board-ls > li > a {font-size: 16px;}
}
@media screen and (max-width: 767px) {
  .board-ls > li > a {font-size: 15px; grid-template-columns: 70px 1fr 120px 100px;}
  .board-ls > li > a .title {padding-right: 30px;}
  .board-ls > li .num:not(:has(.notice-tag)) {display: none;}
  .board-ls > li .num:has(.notice-tag) {text-align: left!important; margin-bottom: 0.5em; padding-inline: 0;}
  .board-ls > li .num .notice-tag {display: inline-block!important; width: auto; padding: 3px 15px; font-size: 12px;}

  .board-ls .m-show {display: block;}
  .board-ls .m-hide {display: none!important;}
  .board-ls > li > a {grid-template-columns: repeat(1, 1fr);}
  .board-ls .m-info {font-size: 13px; margin-top: 10px; display: grid; grid-template-columns: 120px 1fr; opacity: .8; gap: 0 0.5em;}
  .board-ls .m-info > span {text-align: left; display: grid; grid-template-columns: 45px 1fr;}
  .board-ls .m-info > span b {font-weight: 600;}
}

/* Recruit Board */
.recruit-board-ls {border-block: 2px solid #707070; color: #000;}
.recruit-board-ls table {width: 100%; table-layout: fixed;}
.recruit-board-ls table .m-info {display: none;}
.recruit-board-ls table .m-hide {}
.recruit-board-ls table .col-d-day {width: 120px;}
.recruit-board-ls table .col-period {width: 320px;}
.recruit-board-ls table tr {border-bottom: 2px solid #DCDCDC;}
.recruit-board-ls table tbody tr:last-child {border-bottom: none;}
.recruit-board-ls table :where(th, td) {padding: 30px 10px;}
.recruit-board-ls table :where(th:not(:last-child), td:not(:last-child)) {border-right: 15px solid transparent;}
.recruit-board-ls table thead {}
.recruit-board-ls table thead th {padding: 10px; text-align: center;}
.recruit-board-ls table .d-day {text-align: center; color: #7E808B;}
.recruit-board-ls table .d-day-date {display: block; font-size: 35px; line-height: 1; font-weight: 600;}
.recruit-board-ls table .d-day-txt {display: block; font-size: 0.8em;}
.recruit-board-ls table .td-title {}
.recruit-board-ls table .td-title a {display: block; width: 100%;}
.recruit-board-ls table .td-title .tit {margin-bottom: 0.2em; font-weight: 700;}
.recruit-board-ls table .td-title .desc {font-size: 0.8em;}
.recruit-board-ls table .period {font-size: 0.8em; text-align: center;}
.recruit-board-ls table .period span {display: inline-block;}

@media (hover: hover) {
  .recruit-board-ls table .td-title a:hover {opacity: .6; text-decoration: underline;}
}
@media screen and (max-width: 1399px) {
  .recruit-board-ls table .m-info {display: block;}
  .recruit-board-ls table .m-hide {display: none;}
  .recruit-board-ls table .col-d-day {width: 80px;}
  .recruit-board-ls table :where(th, td) {padding: 15px 10px;}
  .recruit-board-ls table :where(th:not(:last-child), td:not(:last-child)) {border-right: none;}
  .recruit-board-ls table :where(th:first-child, td:first-child) {border-right: 10px solid transparent;}
  .recruit-board-ls table .d-day-date {font-size: 24px;}
  .recruit-board-ls table .m-info {margin-top: 0.7em;}
  .recruit-board-ls table .period {text-align: left; color: #707070; font-weight: 500; font-size: 0.7em;}
}
@media screen and (max-width: 767px) {
  .recruit-board-ls table .col-d-day {width: 60px;}
  .recruit-board-ls table .d-day-date {font-size: 20px;}
  .recruit-board-ls table :where(th, td) {padding: 10px 5px!important;}
}
@media screen and (max-width: 499px) {}




/* Format */
@media (hover: hover) {}
@media screen and (max-width: 1399px) {}
@media screen and (max-width: 767px) {}
@media screen and (max-width: 499px) {}