@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: 50px;}
.paging__btn {font-size: 22px;}
.paging .paging__num {background: #f9f8f7; border-radius: 5px; 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;}
}

/* Form */
input, input:focus {outline: none; box-shadow: none;}
.search-bar {--size: 46px; --r: 10px; justify-content: flex-start;}
.search-bar form {display: flex; gap: 10px; 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;}

.ql-form {--inp-height: 48px; --inp-gray-dark: #bfbfbf; --inp-gray2: #dcdcdc; --inp-gray3: #fcfcfc; --invalid1: #df1717; --invalid2: #fef6f6;}
.ql-form .req {color: var(--primary);}

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

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

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

.ql-inp {width: 100%;}
.ql-inp :where(input, textarea) {all: unset; font: inherit;}
.ql-inp input::placeholder, .ql-inp textarea::placeholder {opacity: .5;}
.ql-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;}
.ql-inp .inp-box textarea,
.ql-inp .inp-box .inp {display: block; width: 100%; height: 100%; font-size: 18px; padding: 0 1em; color: var(--gray-dark);}
.ql-inp .inp-box .inp--date {all: initial; display: flex; align-items: center; height: 100%; padding: 0 1em; font-size: 18px; color: var(--gray-dark);}
.ql-inp .inp-box:has(textarea) {height: 300px;}
.ql-inp .inp-box textarea {padding-block: 1em;}
.ql-inp .inp-error {display: block; padding-top: 1em; padding-left: 1em; color: var(--invalid1); font-size: 16px;}
.ql-inp .inp-error {padding-left: 0;}
.ql-inp .inp-error:empty {display: none;}
.ql-inp .inp-notice {display: block; text-align: right; color: var(--inp-gray-dark);}

.ql-inp .radio-group {display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 5px 30px;}
.ql-inp .radio-group .radio {position: relative; height: var(--inp-height);}
.ql-inp .radio-group .radio label {display: flex; align-items: center; gap: .8em; height: 100%; cursor: pointer;}
.ql-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;}
.ql-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%;}
.ql-inp .radio-group .radio label .chck::before {content: ''; display: block; width: 100%; height: 100%; border-radius: 5px; background: var(--primary); opacity: 0;}
.ql-inp .radio-group .radio label input[type="radio"]:checked ~ .chck {border-color: var(--primary); background: #fff;}
.ql-inp .radio-group .radio label input[type="radio"]:checked ~ .chck::before {opacity: 1;}
.ql-inp .radio-group .radio label .inp-box {width: 273px; margin-left: .5em; opacity: .5; pointer-events: none; cursor: initial;}
.ql-inp .radio-group .radio label input[type="radio"]:checked ~ .inp-box {opacity: 1; pointer-events: initial;}
.ql-inp .radio-group .radio label .label {color: var(--gray-dark); flex-shrink: 0;}

.ql-inp .checkbox-group {display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 30px;}
.ql-inp .checkbox-group .checkbox {position: relative; height: var(--inp-height); }
.ql-inp .checkbox-group .checkbox label {display: flex; align-items: center; gap: .8em; height: 100%; cursor: pointer;}
.ql-inp .checkbox-group .checkbox label input {position: absolute; top: 50%; left: 10px; z-index: -1; transform: translate(0, -50%); width: 0; height: 0;}
.ql-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;}
.ql-inp .checkbox-group .checkbox label .chck.radio {border-radius: 50%;}
.ql-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;}
.ql-inp .checkbox-group .checkbox label input:checked ~ .chck {border-color: var(--primary); background: #fff;}
.ql-inp .checkbox-group .checkbox label input:checked ~ .chck::before {opacity: 1;}
.ql-inp .checkbox-group .checkbox label .inp-box {width: 300px; margin-left: .5em; opacity: .5; pointer-events: none; cursor: initial;}
.ql-inp .checkbox-group .checkbox label input[type="radio"]:checked ~ .inp-box {opacity: 1; pointer-events: initial;}
.ql-inp .checkbox-group .checkbox label .label {color: var(--gray-dark); flex-shrink: 0;}
.ql-inp .checkbox-group .checkbox label .chck.radio {border-radius: 50%; display: flex; align-items: center; justify-content: center;}
.ql-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;}

.ql-inp .checkbox-with-textbox {display: flex; align-items: center; gap: 1em; width: 100%;}
.ql-inp .checkbox-with-textbox .inp-box {width: 100%; position: relative;}
.ql-inp .checkbox-with-textbox .inp-box input {width: 100%; scroll-margin-block: 200px;}
.ql-inp .checkbox-with-textbox .inp-box:has(input:disabled)::after {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; content: ''; display: block;}

.ql-file {--gap: 10px; display: flex; flex-direction: column; gap: var(--gap); width: 100%;}
.ql-file .file-row {width: 100%;}
.ql-file .inp-error {padding-top: var(--gap);}
.ql-file .file-box {position: relative; display: flex; gap: var(--gap); align-items: center; height: var(--inp-height); width: 100%;}
.ql-file .file-box input[type="file"] {position: absolute; top: 50%; left: 0%; z-index: -1; width: 0; height: 0; transform: translate(0, -50%);}
.ql-file .file-box label {display: flex; gap: var(--gap); width: 100%; height: 100%;}
.ql-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;}
.ql-file .file-box label .label:empty::before {content: attr(data-placeholder); opacity: .4;}
.ql-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: #fff; border-radius: 5px; border: 1px solid var(--inp-gray2); flex-shrink: 0;}
.ql-file .file-box label .btn-find {width: 150px;}
.ql-file .file-box label .btn-cancel {width: auto; aspect-ratio: 1 / 1;}

.ql-form-indiv-policy {padding: 100px 0 0 0;}
.ql-form-indiv-policy .title {font-size: 20px; color: var(--navy); margin-bottom: 0.8em;}
.ql-form-indiv-policy .content {overflow: hidden auto; height: 250px; padding: 30px; background:  var(--inp-gray3); border: 1px solid  var(--inp-gray2); border-radius: 10px;}
.ql-form-indiv-policy .content::-webkit-scrollbar {background: transparent;}
.ql-form-indiv-policy .content::-webkit-scrollbar-thumb {background: var(--gray3);}
.ql-form-indiv-policy .checks {padding-top: 30px;}
.ql-form-indiv-policy .ql-inp {display: flex; justify-content: flex-end;}
.ql-form-indiv-policy .ql-inp .checkbox-group {font-size: 18px;}
.ql-inp .checkbox-group .checkbox label {width: 100%;}
.ql-form-indiv-policy .ql-inp .checkbox-group .checkbox label .label {color:  var(--inp-gray-dark); font-weight: 500;}
.ql-form-indiv-policy .ql-inp .checkbox-group .checkbox label input:checked ~ .label {color: var(--navy);}

.ql-inp--invalid .inp-box {border-color: var(--invalid1); background: var(--invalid2);}
.ql-inp--invalid .checkbox-group .checkbox label input:not(:checked) ~ .chck {border-color: var(--invalid1); background: var(--invalid2);}
.ql-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);}
  .ql-file .file-box button:hover {background: var(--primary);}
}
@media screen and (max-width: 1399px) {
  .search-bar {--size: 40px;}

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

  .ql-form-table {font-size: 17px;}
  .ql-form-table colgroup .col--space {width: 10px;}
  .ql-form-table tbody tr th .label {font-size: 17px;}
  .ql-inp .inp-box textarea, .ql-inp .inp-box .inp {font-size: 16px;}
  .ql-inp .inp-error {font-size: 14px;}
  .ql-file .file-box label .btn-find {width: 100px;}
  .ql-inp .inp-notice {font-size: 15px;}
  .ql-form-indiv-policy .title {font-size: 22px;}
  .ql-form-indiv-policy .checks {padding-top: 20px;}
  .ql-form-indiv-policy {padding-top: 60px;}
}
@media screen and (max-width: 767px) {
  .ql-form-notice {padding: 20px;}
  .ql-form-table {font-size: 15px;}
  .ql-form-table colgroup {display: none;}
  .ql-form-table {display: block;}
  .ql-form-table :where(tbody, tr, th, td) {display: block;}
  .ql-form-table tbody tr {padding-block: 10px;}
  .ql-form-table tbody tr th {padding: 0 0 10px;}
  .ql-form-table tbody tr th .label {min-height: 0; font-size: 17px;}
  .ql-form-table tbody tr td {padding: 10px 0; padding-top: 0;}

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

  .ql-inp .checkbox-with-textbox {flex-direction: column; align-items: flex-start; gap: 0px;}

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

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


/* Board list nav bar */
.board-ls-navbar {display: flex; justify-content: space-between; gap: 20px; padding-block: 20px;}
.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 {flex-direction: column; gap: 10px;}
  .board-ls-navbar .search-bar .sch-inp {width: 100%;}
  .board-ls-navbar .btn {height: 40px;}
}




/* View */
.board-view {--border: 2px solid #DDDDDD; word-break: normal;}
.board-view-row {padding-block: 60px; border-bottom: var(--border);}
.board-view-head {border-bottom: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding-bottom: 30px;}
.board-view-head .title {font-size: 32px; font-weight: 700; color: #000; margin-bottom: 0;}
.board-view-head .info {display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 500; color: var(--gray); gap: 1em; flex-shrink: 0;}
.board-view-head .info i {height: .7em; width: 1px; background: #ddd; flex-shrink: 0;}
.board-view-head .info .ca {color: var(--primary);}
.board-view-head .info .hash::before {content: '# ';}
.board-view-body .content {border-bottom: none; background: #fff; padding: 20px 0; font-size: 20px; min-height: 500px;}
.board-view-body .content .divider {width: 100%; height: 1px; margin: 50px auto; background: var(--gray-light);}
.board-view-body .content .newsletter-iframe {display: block; margin: 0 auto; width: 720px; border-radius: 20px; border: 1px solid #ebebeb; max-width: 100%; height: 80svh;}
.board-view-subscribe {word-break: keep-all;}
.board-view-paging {display: flex; justify-content: space-between; align-items: center; gap: 20px 50px; padding-block: 30px;}
.board-view-paging .btn--list {flex-shrink: 0; width: 200px; justify-content: center; font-size: 18px;}
.board-view-paging .btn--list::after {display: none;}
.board-view-paging .btn--paging {width: 250px; padding: 20px 30px; border-radius: 15px; background: #f8f7f6;}
.board-view-paging .btn--paging .label {display: flex; align-items: center; color: var(--primary); gap: .7em; font-size: 18px; font-weight: 500; margin-bottom: 0.3em;}
.board-view-paging .btn--paging .label .arrow {border-color: var(--primary); width: .5em; height: .5em; margin-top: -0.15em;}
.board-view-paging .btn--paging .sbj {font-size: 16px; font-weight: 500; color: #000;}
.board-view-paging .btn--paging.disabled {pointer-events: none;}
.board-view-paging .btn--paging.disabled .sbj {color: var(--gray);}
.board-view-paging .btn--paging.next {text-align: right;}
.board-view-paging .btn--paging.next .label {justify-content: flex-end;}
.board-view-paging .btn--paging.next .label .arrow {order: 2;}
.board-view-paging .btn--paging.next .label span {order: 1;}
@media (hover: hover) {
  .board-view-paging .btn--paging:hover {opacity: .6;}
}
@media screen and (max-width: 1399px) {
  .board-view-row {padding-block: 40px;}
  .board-view-head {padding-bottom: 25px;}
  .board-view-head .title {font-size: 22px;}
  .board-view-head .info {font-size: 16px;}
  .board-view-body .content {padding: 0; font-size: 16px; min-height: 400px;}
  .board-view-body .content .divider {margin: 40px auto;}
  .board-view-paging .btn--list {height: 50px; font-size: 16px; width: 150px;}
  .board-view-paging .btn--paging {width: 150px; padding: 15px;}
  .board-view-paging .btn--paging .label {font-size: 15px;}
  .board-view-paging .btn--paging .sbj {font-size: 15px;}
}
@media screen and (max-width: 767px) {
  .board-view-row {padding-block: 30px;}
  .board-view-head {text-align: left; border-bottom: var(--border); padding-bottom: 15px; display: block;}
  .board-view-head .title {font-size: 18px; margin-bottom: 0.3em;}
  .board-view-head .info {justify-content: flex-start; font-size: 14px; gap: .5em;}
  .board-view-body .content {background: none; border: none; padding-inline: 0; border-bottom: var(--border); font-size: 15px; min-height: 300px;}
  .board-view-body .content .divider {margin: 40px auto 30px auto;}
  .board-view-subscribe {background: #f4f3f2; width: calc(100% + 30px); margin-left: -15px; padding-inline: 15px;}
  .board-view-paging {flex-direction: column; gap: 5px; padding-top: 10px;}
  .board-view-paging .btn--paging {width: 100%; max-width: 100%; display: flex; align-items: center; gap: 1em; padding-block: 15px; text-align: left!important;}
  .board-view-paging .btn--paging.prev {border-bottom: 1px solid var(--gray-light);}
  .board-view-paging .btn--paging .label {flex-shrink: 0; margin-bottom: 0; font-size: 14px;}
  .board-view-paging .btn--paging .label span {order: 1!important;}
  .board-view-paging .btn--paging .label .arrow {order: 0!important;}
  .board-view-paging .btn--paging .label .arrow.left {transform: translate(0, 25%) rotate(-45deg)!important;}
  .board-view-paging .btn--paging .label .arrow.right {transform: translate(0, -12.5%) rotate(135deg)!important;}
  .board-view-paging .btn--paging .sbj {font-size: 14px;}
  .board-view-paging .btn--list {order: 3; margin-top: 25px; width: 100%;}
}




/* Certificates */
.cert-list {display: grid; grid-template-columns: repeat(4, 1fr); gap: 100px 50px;}
.cert-list:has(.list-empty) {grid-template-columns: repeat(1, 1fr);}
.cert-item {border-radius: 15px; overflow: hidden; box-shadow: 5px 5px 15px rgb(0,0,0,.05);}
.cert-item .thumb {border-radius: 10px; width: 100%;}
.cert-item .cont {padding: 20px; }
.cert-item .cont .tag {display: block; font-weight: 700; font-size: 16px; color: var(--secondary); line-height: 1.2; margin-bottom: 0.3em;}
.cert-item .cont .tit {display: block; color: #000; font-size: 18px; line-height: 1.4; font-weight: 700; margin-bottom: 0.3em;}
.cert-item .cont .no {display: block; color: var(--gray-dark);}

@media (hover: hover) {}
@media screen and (max-width: 1399px) {
  .cert-list {grid-template-columns: repeat(3, 1fr); gap: 70px 20px;}
  .cert-item .cont {padding: 15px 10px;}
  .cert-item .cont .tag {font-size: 16px;}
  .cert-item .cont .tit {font-size: 18px;}
  .cert-item .cont .no {font-size: 14px;}
}
@media screen and (max-width: 767px) {
  .cert-list {grid-template-columns: repeat(2, 1fr); gap: 60px 10px;}
  .cert-item {box-shadow: none; border-radius: 0;}
  .cert-item .thumb {border: 1px solid var(--gray-light);}
  .cert-item .cont {padding-inline: 0; padding-block: 10px 0;}
  .cert-item .cont .tag {font-size: 14px;}
  .cert-item .cont .tit {font-size: 16px;}
  .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: 10px; 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: 25px;}
.video-ls > li > a .content .title {font-size: 22px; 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: 18px;}
  .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(4, 1fr); gap: 150px 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: 15px; 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 .title {font-size: 19px; text-align: center; display: block; font-weight: 700;}

.gall-ls--h > li {border-bottom: 1px solid #dfdfdf;}
.gall-ls--h > li > a {display: flex; align-items: center; gap: 40px; padding-block: 45px;}
.gall-ls--h > li > a .thumb {width: 385px; aspect-ratio: 16 / 9; border-radius: 10px; 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: 24px; font-weight: 700; line-height: 1; color: var(--primary); margin-bottom: 0.5em;}
.gall-ls--h > li > a .content .wrap .title {font-size: 32px; line-height: 1.3; font-weight: 700; margin-bottom: 2em; color: #000;}
.gall-ls--h > li > a .content .wrap .date {font-size: 19px; font-weight: 500; line-height: 1; color: #878787;}
.gall-ls--h > li > a .content .ql-button {--base: #878787; --hover: #878787; flex-shrink: 0;}
@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 .ql-button {background: var(--primary);}
}
@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 .ql-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 {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: 70px 1fr 200px; padding: 25px 0;}
.board-ls > li.board-ls-head {background: #f8f7f6; padding-block: 15px;}
.board-ls > li .num {text-align: center; padding-inline: 5px; color: #878787;}
.board-ls > li .title {padding-inline: 5px 100px; font-weight: 600;}
.board-ls > li .date {text-align: right; padding-right: 10px;}

@media (hover: hover) {
  .board-ls > li > a:hover {background: #fafcfd;}
}
@media screen and (max-width: 1399px) {
  .board-ls > li > a {font-size: 16px; grid-template-columns: 70px 1fr 150px;}
}
@media screen and (max-width: 767px) {
  .board-ls > li > a {font-size: 15px; grid-template-columns: 40px 1fr 90px;}
  .board-ls > li > a .title {padding-right: 30px;}
  .board-ls > li > a .date {font-size: 13px;}
}

/* Bid notice */
.bid-notice-ls .m-show {display: none;}
.bid-notice-ls > li.board-ls-head,
.bid-notice-ls > li > a {grid-template-columns: 70px 200px 1fr 180px 150px 150px;}
.bid-notice-ls > li > a {padding-block: 25px;}
.bid-notice-ls > li .num {}
.bid-notice-ls > li .notice-id {text-align: center;}
.bid-notice-ls > li .title {padding-inline: 0;}
.bid-notice-ls > li .date {text-align: center; padding-inline: 0; color: inherit; font-size: inherit!important;}
.bid-notice-ls > li .ca {text-align: center;}
.bid-notice-ls > li .writer {text-align: center;}
.bid-notice-ls > li.board-ls-head span {font-weight: 700; color: #333;}

.bid-notice-view .board-view-head {flex-direction: column; align-items: flex-start; gap: 10px;}
.bid-notice-view-info {display: grid; grid-template-columns: repeat(4, 1fr); gap: 1em; font-size: 16px; padding-block: 20px; padding-inline: 20px; width: 100%; background: #f5f4f3; border-radius: 10px;  color: #505050;}
.bid-notice-view-info > li {display: flex; gap: 0.5em;}
.bid-notice-view-info > li .ca {font-weight: 600; flex-shrink: 0;}
.bid-notice-view-info > li .val {}

@media screen and (max-width: 1399px) {
  .bid-notice-ls > li.board-ls-head,
  .bid-notice-ls > li > a {grid-template-columns: 40px 120px 1fr 100px 80px 80px;}
  .bid-notice-ls > li.board-ls-head {font-size: 15px;}
  .bid-notice-ls > li > a {padding-block: 20px; font-size: 14px;}

  .bid-notice-view-info {font-size: 14px;}
}
@media screen and (max-width: 767px) {
  .bid-notice-ls .m-show {display: block;}
  .bid-notice-ls .m-hide {display: none!important;}
  .bid-notice-ls > li > a {grid-template-columns: repeat(1, 1fr);}
  .bid-notice-ls .m-info {font-size: 13px; margin-top: 10px; display: grid; grid-template-columns: 160px 1fr; opacity: .8; gap: 0 0.5em;}
  .bid-notice-ls .m-info > span {text-align: left; display: grid; grid-template-columns: 55px 1fr;}
  .bid-notice-ls .m-info > span b {font-weight: 600;}

  .bid-notice-view-info {grid-template-columns: repeat(2, 1fr); gap: 0 1em; font-size: 13px; padding: 10px 10px;}
}


/* 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) {}