/* 공통 ----------------------------------------------------------------------*/
/* 헤더 */
.header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: transparent;
}

.header-inner {
  max-width: 1840px;
  padding: 20px;
  margin: 0 auto;
  height: 112px;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
  margin: 0;
}

.logo a {
  display: flex;
  align-items: center;
}

.logo img {
  height: 40px;
}

.nav ul {
  gap: 50px;
}

.nav a {
  color: #FFF;
  text-align: center;
  font-family: Pretendard;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  text-decoration: none;
  white-space: nowrap;
}

.gnb {
  display: flex;
}

.gnb > li {
  position: relative;
}

.sub-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);

  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(16px);

  border-radius: 12px;
  padding: 12px 0;
  min-width: 200px;

  display: block;

  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.sub-menu li {
  display: block;
  width: 100%;
  padding: 8px 20px;
  text-align: center;
}

.sub-menu a {
  position: relative;
  display: inline-block;
  padding: 0;

  color: #fff;
  text-align: center;
  font-family: Pretendard;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  opacity: 0.8;

  text-decoration: none;
}

.gnb > li:hover .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.sub-menu a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;

  width: 100%;
  height: 1px;
  background: #fff;

  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}

.sub-menu a:hover::after {
  transform: translateX(-50%) scaleX(1);
}

.util {
  display: flex;
  align-items: center;
  gap: 30px;
}

.auth {
  color: #FFF;
  text-align: center;
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 40px;
  opacity: 0.8;
}

.auth a {
  color: #fff;
  text-decoration: none;
}

.auth span {
  margin: 0 8px;
  opacity: 0.5;
}

.menu-btn {
  width: 30px;
  height: 12px;
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
}

.menu-btn span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: #fff;
}

.menu-btn span:first-child {
  top: 0;
}

.menu-btn span:last-child {
  bottom: 0;
}

@media (max-width: 1200px) {

  .nav {
    display: none;
  }

  .header-inner {
    height: 72px;
    padding: 0 20px;
  }

  .logo img {
    height: 28px;
  }

  .menu-btn {
    width: 32px;
    height: 12px;
  }

  .menu-btn span {
    height: 2px;
  }

  .util{
    gap:16px;
  }

  .auth{
    display:flex;
    align-items:center;

    font-size:13px;
    line-height:20px;

    opacity:1;
  }

  .auth span{
    margin:0 6px;
  }

  .sub-menu {
    display: none !important;
  }

}

@media (max-width:768px){

  .util{
    gap:24px;
  }

  .auth{
    font-size:12px;
    line-height:16px;
  }

  .auth span{
    margin:0 8px;
  }

}

/* 화이트 헤더 */
.header.header-light {
  background: #fff;
}

.header.header-light .nav a {
  color: #000;
}

.header.header-light .auth,
.header.header-light .auth a {
  color: #000;
}

.header.header-light .menu-btn span {
  background: #000;
}

.header.header-light .logo img {
  content: url('/images/layout/logo_gsem_dark.svg');
}

.header.header-light .sub-menu {
  background: rgba(245, 245, 245);
}

.header.header-light .sub-menu a {
  color: #000;
}

.header.header-light .sub-menu a::after {
  background: #000;
}


/* 햄버거 전체 메뉴 페이지 */
.allmenu {
  position: fixed;
  inset: 0;
  z-index: 99999;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: .3s ease;

  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);

  background: rgba(0, 0, 0, 0.7);
}

.allmenu.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.allmenu__close {
  position: absolute;
  top: 40px;
  right: 40px;

  border: 0;
  background: none;

  color: #FFF;
  font-size: 24px;
  font-weight: 200;

  cursor: pointer;

  transition: opacity .2s;
}

.allmenu__close {
  transition: transform .6s ease;
}

.allmenu__close:hover {
  transform: rotate(180deg);
}

.allmenu__inner {
  max-width: 1480px;
  margin: 0 auto;

  padding: 360px 40px 120px;

  display: flex;
  justify-content: space-between;
  gap: 40px;
}

.allmenu__title {
  margin-bottom: 72px;

  color: #FFF;
  font-family: Pretendard;
  font-size: 28px;
  font-style: normal;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: -0.03em;
}

.allmenu__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.allmenu__list a {
  position: relative;
  color: rgba(255,255,255,.65);

  font-size: 18px;
  font-family: Pretendard;
  font-weight: 400;
  line-height: 28px;

  text-decoration: none;

  transition:
    color .2s ease,
    transform .2s ease;
}

.allmenu__list a::after {
  content: "";

  position: absolute;
  left: 0;
  bottom: -4px;

  width: 0;
  height: 1px;

  background: #FFF;

  transition: width .3s ease;
}

.allmenu__list a:hover {
  color: #FFF;
  transform: translateX(6px);
}

.allmenu__list a:hover::after {
  width: 100%;
}

@media (max-width: 1200px) {

  .allmenu__inner {
    max-width: 100%;
    padding: 120px 24px 80px;

    display: flex;
    flex-wrap: wrap;
    gap: 40px;
  }

  .allmenu__group {
    width: calc(50% - 20px);
    position: relative;
    padding-bottom: 24px;
  }

  .allmenu__group::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;

    width: 100%;
    height: 1px;

    background: rgba(255,255,255,0.15);
  }

  .allmenu__group:last-child::after {
    display: none;
  }

  .allmenu__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .allmenu__list a {
    position: relative;
    padding: 4px 0;

    color: rgba(255,255,255,.65);
    text-decoration: none;
    transition: color .2s ease;
  }

  .allmenu__list a:hover {
    color: #fff;
  }

  .allmenu__title {
    font-size: 22px;
    line-height: 28px;
    margin-bottom: 28px;
    letter-spacing: 0;
  }

  .allmenu__close {
    top: 20px;
    right: 20px;
  }

}

@media (max-width: 768px) {

      .allmenu{
    height:100vh;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
      }

  .allmenu__inner {
    padding: 100px 20px 60px;
    gap: 32px;
  }

  .allmenu__group {
    width: 100%;
  }

  .allmenu__list {
    grid-template-columns: 1fr 1fr;
  }
}

/* 푸터 */
.footer {
  position: relative;
  bottom: 0;
  left: 0;
  width: 100%;
  color: #fff;
  overflow: hidden;
  background: linear-gradient(180deg, #000 0%, #072846 100%);

}

.footer-bg {
  position: absolute;
  inset: 0;
  opacity: 0.2;
  background-image: url(/images/layout/footer-bg.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* .footer-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
} */

.footer-inner {
  position: relative;
  z-index: 2;
  max-width: 1680px;
  width: calc(100% - 80px);
  margin: 0 auto;
  padding: 120px 0 60px;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.footer-sub {
  color: #2a9fe3;
  margin-bottom: 32px;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.footer-title {
  color: #FFF;
  font-family: Pretendard;
  font-size: 44px;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
}

.footer-title-wrap {
  display: flex;
  align-items: center;
  gap: 40px;
}

.footer-arrow {
  width: 72px;
  height: 72px;
  border: 1px solid #fff;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 24px;
  font-family: Pretendard;
  transition: all 0.3s ease;
}

.footer-arrow:hover {
  background: #2a9fe3;
  border: none;
  transform: translateX(6px);
}

.footer-sns {
  display: flex;
  gap: 16px;
  opacity: 0.8;
}

.footer-sns a {
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-sns img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.footer-line {
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
  margin: 60px 0 40px;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

.footer-left img {
  margin-bottom: 32px;
}

.footer-left p {
  margin-bottom: 6px;

  color: #FFF;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 300;
  line-height: 24px;
  opacity: 0.8;
}

.footer-right {
  margin-top: 64px;
  text-align: right;
}

.footer-contact {
  display: flex;
  justify-content: flex-end;
  gap: 24px;
  margin-bottom: 8px;
}

.footer-contact span {
  color: #FFF;
  font-family: "Wanted Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 200;
  line-height: 28px;
}

.footer-contact strong {
  color: #FFF;
  font-family: "Wanted Sans";
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 32px;
}

.footer-links {
  margin-bottom: 8px;

  color: #FFF;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  opacity: 0.8;
  
}

.footer-links a {
  position: relative;
  margin-right: 12px;
}

.footer-links a:last-child {
    margin-right: 0;
}

.footer-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;

  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.6);
}

.copyright {
  color: #FFF;
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 300;
  line-height: 20px;
  opacity: 0.6;
}

.company_info{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
}

.company_info span{
    color:rgba(255,255,255,.25);
}

.company_info a{
    display:flex;
    align-items:center;
    gap:6px;

    position:relative;

    color:#fff;
    font-family:"Wanted Sans";
    font-size:15px;
    font-weight:500;
    text-decoration:none;

    transition:.3s;
}

.company_info a svg{
    width:14px;
    height:14px;

    transition:.3s;
}

.company_info a:hover{
    color:#2FB4FF;
}

.company_info a:hover::after{
    background:#2FB4FF;
}

.company_info a:hover svg{
    transform:translateY(1px);
}

@media (max-width: 1200px) {
  .footer-inner {
    padding: 80px 0 40px;
  }

  .footer-top {
    flex-direction: column;
    gap: 40px;
    align-items: flex-start;
  }

  .footer-title {
    font-size: 24px;
    line-height: 1.4;
  }

  .footer-title-wrap {
    gap: 24px;
    flex-wrap: wrap;
  }

  .footer-sns {
    justify-content: flex-start;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 32px;
  }

  .footer-left p {
    margin-bottom: 0;
    font-size: 12px;
    line-height: 16px;
  }

  .footer-right {
    text-align: left;
    margin-top: 0;
  }

  .footer-contact {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .footer-line {
    margin: 32px 0 ;
  }
}

@media (max-width: 768px) {
  .footer-title {
    font-size: 26px;
    line-height: 1.4;
  }

  .footer-sub {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 20px;
  }

  .footer-arrow {
    width: 48px;
    height: 48px;
    font-size: 18px;
  }

  .footer-contact {
    flex-direction: column;
    gap: 8px;
  }

  .footer-contact span {
    font-size: 14px;
    line-height: 24px;
  }

  .footer-contact strong {
    font-size: 16px;
    line-height: 24px;
  }

  .footer-left p {
    font-size: 12px;
    line-height: 16px;
    margin-bottom: 0;
  }

  .copyright {
    font-size: 11px;
    line-height: 14px;
  }

  .footer-sns img {
    width: 24px;
    height: 24px;
  }

  .footer-left img {
    width: 120px;
  }

  .footer-links a {
    font-size: 12px;
    line-height: 16px;
  }

    .company_info{
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:4px;

        font-size:12px;
        line-height:16px;
    }

    .company_info span{
        display:none;
    }

    .company_info a{
        display:inline-flex;
        align-items:center;
        gap:4px;

        font-size:12px;
        line-height:16px;
        font-weight:500;
    }

    .company_info a svg{
        width:12px;
        height:12px;
    }

}

/* 플로팅 버튼 */
.floating {
  position: fixed;
  right: 16px;
  bottom: 16px;

  display: flex;
  flex-direction: column;
  gap: 8px;

  z-index: 999;

  opacity: 0;
  transform: translateY(0);
  pointer-events: none;

}

.floating.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.btn-reserve {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #2594D3;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #FFF;
  text-align: center;
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 110%;

  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}

.btn-reserve img {
  width: 28px;
  height: 28px;
}

.btn-top {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #111;

  border: none;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}

.btn-top img {
  width: 24px;
  height: 24px;
}

.btn-reserve:hover,
.btn-top:hover {
  color: #FFF !important;
  transform: translateY(-2px);
}

@media (max-width: 1200px) {

  .floating {
    right: 20px;
    bottom: 20px;
    gap: 6px;
  }

  .btn-reserve {
    width: 48px;
    height: 48px;
    font-size: 12px;
  }

  .btn-top {
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255,255,255,0.1);
  }

  .btn-top img {
    width: 20px;
    height: 20px;
  }

}

/* 데이트 피커 */
.req-date-picker {
  position:relative;
  width:100%;
  margin-bottom:0;
}

.req-date-picker__layer {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;

  width: 350px;
  z-index: 9999;

  padding: 24px;

  border-radius: 14px;
  background: #FFF;

  box-shadow:
    0 12px 32px rgba(0,0,0,.26);
}

.req-date-picker.is-open .req-date-picker__layer {
  display: block;
}

/* 트리거 버튼과 나란히 배치되는 경우(예약일시 콤보) flex 폭 경쟁 방지 */
.etc-select-group .req-date-picker {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.etc-select-group .req-date-picker .req-date-picker__layer {
  pointer-events: auto;
}

.req-date-picker__header {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 16px;
  margin-bottom: 32px;
}

.req-date-picker__month {
  color: #000;
  font-family: "Wanted Sans";
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 28px;
}

.req-date-picker__month-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;

  width: 24px;
  height: 24px;
}

.req-date-picker__month-btn img {
  display: block;
}

.req-date-picker__calendar {
  width: 100%;

  border-collapse: separate;
  border-spacing: 0;

  margin-bottom: 8px;
}

.req-date-picker__calendar th {
  height: 44px;

  color: #8D97A7;
  font-family: Pretendard;
  font-size: 13px;
  font-weight: 500;

  text-align: center;
}

.req-date-picker__calendar th.sun {
  color: #FF5A67;
}

.req-date-picker__calendar td {
  width: 14.285%;
  height: 42px;

  text-align: center;
  vertical-align: middle;

  color: #222;
  font-family: Pretendard;
  font-size: 14px;
  font-weight: 500;
}

.req-date-picker__calendar td.is-disabled {
  color: #C8CED8;
}

.req-date-picker__calendar td button {
  width: 32px;
  height: 32px;

  border: 0;
  border-radius: 50%;

  background: transparent;

  color: inherit;
  font: inherit;

  cursor: pointer;

  transition: .2s;
}

.req-date-picker__calendar td button:hover {
  background: #EEF3F8;
}

/* 오늘 */
.req-date-picker__calendar td button.is-today {
  border: 2px solid #39465E;
}

.req-date-picker__calendar td {
  position: relative;
}

/* 시작일 */
.req-date-picker__calendar td.is-start {
  background: #E8EDF5;
  border-radius: 999px 0 0 999px;
}

/* 종료일 */
.req-date-picker__calendar td.is-end {
  background: #E8EDF5;
  border-radius: 0 999px 999px 0;
}

/* 선택구간 */
.req-date-picker__calendar td.is-range {
  background: #E8EDF5;
}

.req-date-picker__calendar td.is-start button,
.req-date-picker__calendar td.is-end button {
  background: #39465E;
  color: #FFF;

  position: relative;
  z-index: 2;
}

.req-date-picker__calendar td.is-start:not(.is-end) button {
  background: #39465E;
}

.req-date-picker__selected {
  display: flex;
  justify-content: space-between;

  padding-top: 16px;
  margin-bottom: 16px;

  border-top: 1px solid #ECECEC;
}

.req-date-picker__selected-col {
  text-align: center;
  flex: 1;
}

.req-date-picker__label {
  display: block;

font-family: Pretendard;
  color: #555;
  font-size: 14px;
  line-height: 20px;

  font-weight: 500;
}

.req-date-picker__date {
  display: block;

  font-family: Pretendard;
  color: #111;
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
}

.req-date-picker__select {
  position: relative;
}

.req-date-picker__select::after {
  content: "";

  position: absolute;
  right: 14px;
  top: 50%;

  transform: translateY(-50%);

  width: 0;
  height: 0;

  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #898989;

  pointer-events: none;
}

.req-date-picker__select select {
  width: 100%;
  height: 44px;

  padding: 0 36px 0 14px;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.req-date-picker__select select:focus {
  outline: none;
  box-shadow: none;
}

.req-date-picker__time {
  display: flex;
  gap: 8px;

  margin-bottom: 20px;
}

.req-date-picker__time-item {
  flex: 1;
}

.req-date-picker__time-item select {
  width: 100%;
  height: 44px;

  border: 1px solid #E3E7ED;
  border-radius: 8px;

  padding: 0 14px;

  background: #FFF;

  color: #111;
  font-family: Pretendard;
  font-size: 14px;
  font-weight: 500;

  appearance: none;

  cursor: pointer;
}

.req-date-picker__submit {
  width: 100%;
  height: 48px;

  border: 0;
  border-radius: 8px;

  background: #2594D3;

  color: #FFF;
  font-family: Pretendard;
  font-size: 15px;
  font-weight: 600;

  cursor: pointer;

  transition: .2s;
}

.req-date-picker__submit:hover {
  background: #1D86C2;
}

.req-date-picker__trigger {
  width: 100%;
  height: 50px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 16px;

  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.1);

  background: rgba(255,255,255,0.15);

  color: #fff;
  font-family: Pretendard;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;

  cursor: pointer;

  transition: all .2s ease;
}

.req-date-picker__trigger:hover {
  border: 1.5px solid rgba(255,255,255,0.3);
}

.req-date-picker.is-open .req-date-picker__trigger,
.req-date-picker__trigger:focus {
  outline: none;
  border: 1px solid #2f8ecb;
  box-shadow: 0 0 0 2px rgba(47,142,203,0.2);
}

.req-date-picker__value {
  color: #fff;
}

.req-date-picker__trigger img {
  width: 12px;
  height: auto;

  transition: transform .2s ease;
}

.req-date-picker.is-open .req-date-picker__trigger img {
  transform: rotate(180deg);
}

.req-date-picker__trigger::after {
  content: "";

  width: 0;
  height: 0;

  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #fff;

  transition: transform .2s ease;
}

.req-date-picker.is-open .req-date-picker__trigger::after {
  transform: rotate(180deg);
}

@media (max-width:768px){

  .req-date-picker__layer{
    width:100%;
    left:0;
    right:0;

    padding:16px;
  }

  .req-date-picker__month{
    font-size:18px;
  }

  .req-date-picker__calendar td{
    height:36px;
    font-size:13px;
  }

  .req-date-picker__calendar td button{
    width:28px;
    height:28px;
  }

  .req-date-picker__selected{
    gap:12px;
  }

  .req-date-picker__date{
    font-size:15px;
    line-height:22px;
  }

  .req-date-picker__time{
    flex-direction:column;
  }

    .req-date-picker__trigger{
    height:46px;

    padding:0 12px;

    font-size:14px;
    line-height:20px;
  }

  .req-date-picker__value{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .req-date-picker__trigger::after{
    border-left-width:5px;
    border-right-width:5px;
    border-top-width:5px;
  }
}

/* 메인 ----------------------------------------------------------------------------------*/
/* 메인 - 섹션 1: 슬라이드 */
/* 메인 - 섹션 1: 슬라이드 */

.hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background-color: #000;
  z-index: 1;
}

.video-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  background: #000 url('/images/layout/first-frame.jpg') center / cover no-repeat;
}

.hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100vh;
  min-width: 177.78vh;
  min-height: 100vh;
  transform: translate(-50%, -50%) scale(1.35);
  object-fit: cover;
  pointer-events: none !important;
  display: block;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s ease;
}

.slide.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

.slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1;
  pointer-events: none;
}

.slide-content {
  position: absolute;
  left: 120px;
  top: 50%;
  transform: translateY(-40%) translateY(20px);
  z-index: 3;
  opacity: 0;
  transition: all 0.8s ease;
}

.slide.active .slide-content {
  opacity: 1;
  transform: translateY(-50%) translateY(0);
}

.slide-content h2 {
  color: #FFF;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  font-family: Pretendard;
  font-size: 64px;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
  letter-spacing: -0.02em;
}

.hero-control {
  position: absolute;
  left: 120px;
  bottom: 60px;
  display: flex;
  align-items: center;
  gap: 20px;
  z-index: 5;
  color: #fff;
}

.control-btns {
  display: flex;
  gap: 10px;
}

.control-btns button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.5);
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-size: 24px;
  font-family: Pretendard;
  line-height: 100%;
  transition: all 0.2s ease;
}

.control-btns button:hover {
  background: rgba(255,255,255,0.1);
}

.progress {
  width: 120px;
  height: 2px;
  background: rgba(255,255,255,0.3);
  overflow: hidden;
}

.progress .bar {
  width: 0%;
  height: 100%;
  background: #fff;
  transition: width 0.1s linear;
}

.count {
  font-size: 14px;
  font-family: Pretendard;
  opacity: 0.8;
}

/* 메인 - 섹션 1: 바로가기&문의 (신규 가이드 카드 + 우측 벽 네비게이션) */
.hero-side {
  position: absolute;
  right: 0;
  top: calc(50% + 40px);
  transform: translateY(-50%);
  display: flex;
  align-items: stretch;
  gap: 24px;
  z-index: 100 !important;
  opacity: 1;
  transition: opacity 0.8s ease;
}

.hero.show-side .hero-side {
  opacity: 1;
}

/* 좌측 카드 영역 */
.hero-cards-col {
  width: 491px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* 2단 가이드 카드 (시안 수치 정확 반영: width 491px, height 325px, border-radius 16px, blur 16px) */
.hero-guide-card {
  width: 491px;
  height: 325px;
  box-sizing: border-box;
  position: relative;
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 0.5px solid #ffffff;
  border-radius: 16px;
  padding: 26px 24px 24px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.2);
  overflow: visible;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hero-guide-card.guide-consult {
  background: rgba(255, 255, 255, 0.40);
}

.hero-guide-card.guide-apply {
  background: rgba(255, 255, 255, 0.10);
}

.guide-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  background: #459DEF;
  color: #ffffff;
  font-family: 'Pretendard', sans-serif;
  font-size: 14px;
  font-weight: 700;
  padding: 5px 16px;
  border-radius: 100px;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
  box-shadow: 0 2px 8px rgba(0, 132, 244, 0.35);
  position: relative;
  z-index: 2;
}

/* 타이틀: pretendard 32px #fff 지정값 반영 */
.hero-card-title {
  font-family: 'Pretendard', sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.3;
  margin: 0 0 8px 0;
  letter-spacing: -0.02em;
  word-break: keep-all;
  position: relative;
  z-index: 2;
}

.guide-desc {
  font-family: 'Pretendard', sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.48;
  margin: 0;
  letter-spacing: -0.02em;
  word-break: keep-all;
  position: relative;
  z-index: 2;
}

/* 3D 부동 아이콘: size width 180px 지정값 반영 */
.card-3d-icon {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.25));
}

.card-3d-icon.icon-consult {
  right: 12px;
  top: 30px;
  width: 180px;
  height: auto;
}

.card-3d-icon.icon-apply {
  right: 12px;
  top: 30px;
  width: 150px;
  height: auto;
}

/* 버튼: 간편상담문의 */
.btn-consult-open {
  width: 100%;
  height: 60px;
  background: #459DEF;
  border: none;
  border-radius: 10px;
  color: #ffffff;
  font-family: 'Pretendard', sans-serif;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  position: relative;
  z-index: 2;
  margin-top: auto;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 14px rgba(0, 132, 244, 0.4);
}

.btn-consult-open:hover {
  background: #0072d6;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 132, 244, 0.5);
}

.btn-consult-open .btn-icon {
  width: 28px;
  height: 28px;
  object-fit: cover;
  margin-left: 0px;
}

/* 2단 버튼 그룹 (시안 수치 반영: width 443px, height 96px) */
.guide-btn-group {
  width: 100%;
  height: 96px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  position: relative;
  z-index: 2;
  margin-top: auto;
}

.btn-guide-action {
  height: 96px;
  border-radius: 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 22px 18px 16px 24px;
  text-decoration: none;
  box-sizing: border-box;
  transition: transform 0.2s ease, background 0.2s ease;
}

.btn-guide-action span {
  font-family: 'Pretendard', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.btn-guide-action .btn-action-icon {
  height: 64px;
  width: auto;
  max-width: 64px;
  object-fit: contain;
  flex-shrink: 0;
  align-self: center;
  margin-top: 4px;
}

.btn-guide-action.btn-apply {
  background: #459DEF;
  vertical-align: top;
}

.btn-guide-action.btn-apply:hover {
  background: #368ee2;
  transform: translateY(-1px);
}

.btn-guide-action.btn-search {
  background: #003870;
}

.btn-guide-action.btn-search:hover {
  background: #002d5a;
  transform: translateY(-1px);
}

/* 고객문의 바 (시안 수치 반영: width 491px, height 100px, border-radius 16px) */
.hero-contact-bar {
  width: 491px;
  height: 100px;
  background: #ffffff;
  border-radius: 16px;
  padding: 0 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  text-decoration: none;
}

.hero-contact-bar .contact-label {
  font-family: 'Pretendard', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #111111;
  letter-spacing: -0.02em;
}

.hero-contact-bar .contact-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.hero-contact-bar .contact-tel {
  font-size: 30px;
  font-weight: 900;
  color: #111111;
  line-height: 1.1;
  letter-spacing: -0.5px;
  font-family: 'Pretendard', sans-serif;
}

.hero-contact-bar .contact-time {
  font-size: 13px;
  color: #767676;
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 4px;
  letter-spacing: -0.02em;
}

/* ==========================================================================
   우측 벽에 붙은 네비게이션 아이콘 (flex 영역, 배경 #14487B, 수수료안내 디폴트 그라데이션)
   디테일: 라운드 인덱스처럼 튀어나오게(margin-left -16px), 너비 가운데로 아이콘 영역 배치
   ========================================================================== */
.hero-quick-nav {
  width: 140px;
  display: flex;
  flex-direction: column;
  background-color: #14487B;
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  overflow: visible;
  box-shadow: -6px 8px 24px rgba(0, 0, 0, 0.25);
  position: relative;
}

.hero-quick-nav .nav-item {
  flex: 1 1 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 8px;
  text-decoration: none;
  background-color: #14487B;
  position: relative;
  transition: all 0.25s ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-sizing: border-box;
}

.hero-quick-nav .nav-item:first-child {
  border-top-left-radius: 16px;
}

.hero-quick-nav .nav-item:last-child {
  border-bottom-left-radius: 16px;
  border-bottom: none;
}

/* hover 시 라운드 인덱스처럼 튀어나오게 처리 */
.hero-quick-nav .nav-item:hover {
  margin-left: -16px;
  width: calc(100% + 16px);
  background: linear-gradient(137deg, #44B1EF 0.39%, #486AF1 100%);
  border-radius: 16px 0 0 16px;
  border-bottom-color: transparent;
  box-shadow: -4px 6px 20px rgba(0, 0, 0, 0.3);
  z-index: 5;
}

/* 디폴트 상태: 수수료안내 라운드 인덱스 돌출 및 그라데이션 */
.hero-quick-nav .nav-item.active {
  margin-left: -16px;
  width: calc(100% + 16px);
  background: linear-gradient(137deg, #44B1EF 0.39%, #486AF1 100%);
  border-radius: 16px 0 0 16px;
  border-bottom-color: transparent;
  box-shadow: -4px 6px 20px rgba(0, 0, 0, 0.3);
  z-index: 5;
}

/* 다른 아이템 호버 시 디폴트 active 복귀 */
.hero-quick-nav:hover .nav-item.active:not(:hover) {
  margin-left: 0;
  width: 100%;
  background: #14487B;
  border-radius: 0;
  border-bottom-color: rgba(255, 255, 255, 0.12);
  box-shadow: none;
  z-index: 1;
}

/* 아이콘 영역: 너비 가운데로 배치 */
.hero-quick-nav .nav-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 58px;
  margin-bottom: 8px;
}

.hero-quick-nav .nav-icon-wrap img {
  max-width: 54px;
  max-height: 54px;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 0.25s ease;
}

.hero-quick-nav .nav-item:hover .nav-icon-wrap img,
.hero-quick-nav .nav-item.active .nav-icon-wrap img {
  transform: scale(1.08);
}

.hero-quick-nav .nav-text {
  font-family: 'Pretendard', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.02em;
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
}

/* 간편상담문의 팝업 모달 */
.consult-modal-wrap {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.consult-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.consult-modal-dialog {
  position: relative;
  z-index: 10;
  width: 90%;
  max-width: 440px;
  background: rgba(25, 34, 46, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  animation: modalFadeIn 0.25s ease-out;
}

@keyframes modalFadeIn {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.consult-modal-header {
  height: 60px;
  background: linear-gradient(137deg, #44B1EF 0.39%, #486AF1 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.consult-modal-header h3 {
  font-family: 'Pretendard', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.02em;
}

.consult-modal-header .header-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.consult-modal-form {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
}

.consult-modal-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.consult-modal-form .form-group {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.consult-modal-form input,
.consult-modal-form textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 0 14px;
  height: 44px;
  font-size: 14px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.18);
  font-family: 'Pretendard', sans-serif;
  transition: border-color 0.2s ease, background 0.2s ease;
  box-sizing: border-box;
}

.consult-modal-form input::placeholder,
.consult-modal-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.65);
  font-family: 'Pretendard', sans-serif;
  font-size: 13.5px;
}

.consult-modal-form input:focus,
.consult-modal-form textarea:focus {
  outline: none;
  border-color: #459DEF;
  background: rgba(255, 255, 255, 0.24);
  box-shadow: 0 0 0 2px rgba(69, 157, 239, 0.25);
}

.consult-modal-form textarea {
  height: 60px;
  min-height: 60px;
  max-height: 120px;
  padding: 12px 14px;
  resize: none;
  line-height: 1.4;
}

.consult-btn-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 4px;
}

.consult-submit-btn {
  width: 100%;
  height: 44px;
  background: #003870;
  border: none;
  border-radius: 6px;
  color: #ffffff;
  font-family: 'Pretendard', sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}

.consult-submit-btn:hover {
  background: #002b57;
  transform: translateY(-1px);
}

.consult-close-btn {
  width: 100%;
  height: 44px;
  background: rgba(255, 255, 255, 0.18);
  border: none;
  border-radius: 6px;
  color: #ffffff;
  font-family: 'Pretendard', sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}

.consult-close-btn:hover {
  background: rgba(255, 255, 255, 0.28);
  transform: translateY(-1px);
}

.hero-side-mobile {
  display: none;
}

/* ==========================================================================
   반응형 미디어 쿼리
   ========================================================================== */

/* 1440px 이하 */
@media (max-width: 1440px) {
  .hero-cards-col {
    width: 440px;
  }

  .hero-guide-card {
    width: 440px;
    height: 300px;
    padding: 22px 20px 20px;
  }

  .hero-card-title {
    font-size: 28px;
  }

  .card-3d-icon.icon-consult,
  .card-3d-icon.icon-apply {
    width: 150px;
  }

  .btn-consult-open {
    height: 54px;
    font-size: 16px;
  }

  .guide-btn-group {
    height: 84px;
    gap: 14px;
  }

  .btn-guide-action {
    height: 84px;
    border-radius: 14px;
    padding: 18px 16px 14px 20px;
    align-items: flex-start;
  }

  .btn-guide-action span {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
  }

  .btn-guide-action .btn-action-icon {
    height: 56px;
    max-width: 56px;
    align-self: center;
    margin-top: 3px;
  }

  .hero-contact-bar {
    width: 440px;
    height: 90px;
    padding: 0 22px;
  }

  .hero-contact-bar .contact-tel {
    font-size: 26px;
  }

  .hero-contact-bar .contact-label {
    font-size: 18px;
  }

  .hero-quick-nav {
    width: 125px;
  }

  .hero-quick-nav .nav-icon-wrap {
    height: 48px;
  }

  .hero-quick-nav .nav-icon-wrap img {
    max-width: 46px;
    max-height: 46px;
  }
}

/* 1200px 이하 */
@media (max-width: 1200px) {
  .hero {
    height: 100vh;
    overflow: hidden;
  }

  .slide-content {
    left: 40px;
    right: 520px;
  }

  .slide-content h2 {
    font-size: 40px;
    line-height: 1.3;
  }

  .hero-control {
    left: 40px;
    bottom: 30px;
    gap: 12px;
  }

  .progress {
    width: 80px;
  }

  .hero-side {
    gap: 16px;
  }

  .hero-cards-col {
    width: 380px;
    gap: 10px;
  }

  .hero-guide-card {
    width: 380px;
    height: 270px;
    padding: 18px 16px 16px;
  }

  .hero-card-title {
    font-size: 24px;
  }

  .guide-desc {
    font-size: 13px;
  }

  .card-3d-icon.icon-consult,
  .card-3d-icon.icon-apply {
    width: 120px;
  }

  .btn-consult-open {
    height: 48px;
    font-size: 15px;
  }

  .guide-btn-group {
    height: 74px;
    gap: 10px;
  }

  .btn-guide-action {
    height: 74px;
    border-radius: 12px;
    padding: 15px 12px 10px 16px;
    align-items: flex-start;
  }

  .btn-guide-action span {
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.2;
  }

  .btn-guide-action .btn-action-icon {
    height: 48px;
    max-width: 48px;
    align-self: center;
    margin-top: 2px;
  }

  .hero-contact-bar {
    width: 380px;
    height: 78px;
    padding: 0 16px;
  }

  .hero-contact-bar .contact-label {
    font-size: 16px;
  }

  .hero-contact-bar .contact-tel {
    font-size: 22px;
  }

  .hero-quick-nav {
    width: 110px;
  }

  .hero-quick-nav .nav-icon-wrap {
    height: 42px;
  }

  .hero-quick-nav .nav-icon-wrap img {
    max-width: 40px;
    max-height: 40px;
  }

  .hero-quick-nav .nav-text {
    font-size: 12.5px;
  }
}

/* 1024px 이하 (태블릿 / 모바일) */
@media (max-width: 1024px) {
  .hero {
    height: auto;
    min-height: 520px;
  }

  .slide-content {
    left: 30px;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
  }

  .slide-content h2 {
    font-size: 34px;
    line-height: 1.35;
  }

  .hero-control {
    left: 30px;
    bottom: 24px;
  }

  .hero-side {
    display: none !important;
  }

  .hero-side-mobile {
    display: block;
    background: #08172c;
    padding: 30px 20px 40px;
  }

  .mobile-guide-cards {
    max-width: 491px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .hero-side-mobile .hero-guide-card {
    width: 100%;
    height: auto;
    min-height: 280px;
    padding: 24px 20px;
    background: rgba(255, 255, 255, 0.12);
    border: 0.5px solid rgba(255, 255, 255, 0.35);
  }

  .hero-side-mobile .card-3d-icon.icon-consult,
  .hero-side-mobile .card-3d-icon.icon-apply {
    width: 130px;
  }

  .hero-side-mobile .guide-btn-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 84px;
    gap: 12px;
  }

  .hero-side-mobile .btn-guide-action {
    height: 84px;
    border-radius: 14px;
    padding: 16px 12px 12px 16px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    box-sizing: border-box;
  }

  .hero-side-mobile .btn-guide-action span {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    letter-spacing: -0.02em;
  }

  .hero-side-mobile .btn-guide-action .btn-action-icon {
    height: 48px;
    width: auto;
    max-width: 48px;
    object-fit: contain;
    align-self: flex-end;
    margin-top: auto;
    flex-shrink: 0;
  }

  .hero-side-mobile .hero-contact-bar {
    width: 100%;
    height: 90px;
  }

  .mobile-quick-nav {
    display: flex;
    background-color: #14487B;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  }

  .mobile-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 6px;
    text-decoration: none;
    color: #ffffff;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    transition: background 0.2s ease;
  }

  .mobile-nav-item:last-child {
    border-right: none;
  }

  .mobile-nav-item.active,
  .mobile-nav-item:hover {
    background: linear-gradient(137deg, #44B1EF 0.39%, #486AF1 100%);
  }

  .mobile-nav-item img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    margin-bottom: 6px;
  }

  .mobile-nav-item span {
    font-size: 11.5px;
    font-weight: 600;
    color: #ffffff;
    white-space: nowrap;
    letter-spacing: -0.02em;
  }
}

/* 768px 이하 (스마트폰 모바일) */
@media (max-width: 768px) {
  .hero {
    height: 60vh;
    min-height: 460px;
  }

  .slide-content {
    left: 20px;
    right: 20px;
  }

  .slide-content h2 {
    font-size: 26px;
    line-height: 1.35;
  }

  .hero-control {
    left: 20px;
    bottom: 20px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .progress {
    width: 60px;
  }

  .hero-side-mobile {
    padding: 20px 14px 30px;
  }

  .hero-side-mobile .hero-guide-card {
    padding: 20px 18px 18px;
    border-radius: 16px;
  }

  .hero-side-mobile .hero-card-title {
    font-size: 22px;
  }

  .hero-side-mobile .card-3d-icon.icon-consult,
  .hero-side-mobile .card-3d-icon.icon-apply {
    width: 100px;
    right: 12px;
    top: 12px;
  }

  .hero-side-mobile .btn-consult-open {
    height: 50px;
    font-size: 16px;
  }

  .hero-side-mobile .guide-btn-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: auto;
    gap: 10px;
  }

  .hero-side-mobile .btn-guide-action {
    height: 76px;
    border-radius: 12px;
    padding: 14px 10px 10px 14px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    box-sizing: border-box;
  }

  .hero-side-mobile .btn-guide-action span {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    letter-spacing: -0.03em;
  }

  .hero-side-mobile .btn-guide-action .btn-action-icon {
    height: 42px;
    width: auto;
    max-width: 42px;
    object-fit: contain;
    align-self: flex-end;
    margin-top: auto;
    flex-shrink: 0;
  }

  .hero-side-mobile .hero-contact-bar {
    height: auto;
    min-height: 80px;
    padding: 14px 18px;
  }

  .hero-side-mobile .hero-contact-bar .contact-tel {
    font-size: 22px;
  }

  .mobile-quick-nav {
    border-radius: 12px;
  }

  .mobile-nav-item {
    padding: 10px 4px;
  }

  .mobile-nav-item img {
    width: 26px;
    height: 26px;
  }

  .mobile-nav-item span {
    font-size: 10px;
  }
}

@media (max-width: 380px) {
  .hero-side-mobile .btn-guide-action {
    height: 70px;
    padding: 10px 8px 8px 10px;
  }

  .hero-side-mobile .btn-guide-action span {
    font-size: 12.5px;
    letter-spacing: -0.04em;
  }

  .hero-side-mobile .btn-guide-action .btn-action-icon {
    height: 36px;
    max-width: 36px;
  }

  .hero-side-mobile .hero-contact-bar {
    padding: 12px 14px;
  }

  .hero-side-mobile .hero-contact-bar .contact-label {
    font-size: 16px;
  }

  .hero-side-mobile .hero-contact-bar .contact-tel {
    font-size: 19px;
  }
}

/* 메인 - 섹션 2 */
.intro {
  min-height: 100vh;
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;

  justify-content: flex-start;
  padding-top: 0;

  background: #ffffff;

  z-index: 1;
}

.intro-bg {
  position: absolute;
  inset: 0;

  background: linear-gradient(
    180deg,
    #020406 41.89%,
    #24486C 100%
  );

  opacity: 0;
  z-index: 0; 
}

.intro-inner,
.intro-visual {
  position: relative;
  z-index: 2;
}

.intro-inner {
  text-align: center;
  margin-top: clamp(180px, 15vw, 320px);
  margin-bottom: 80px;

  transform: translateY(120px);
  opacity: 0;
}

.intro-title span {
  color: #000;
  text-align: center;
  font-family: Pretendard;
  font-size: 64px;
  font-style: normal;
  font-weight: 700;
  line-height: 125%;
  letter-spacing: -0.02em;

  display: block;
  background: linear-gradient(
    to right,
  #000 0%,
  #000 50%,
  #bbb 50%,
  #bbb 100%
);

  background-size: 200% 100%;
  background-position: right;

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.intro-sub {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  color: #2a9fe3;
  font-family: Pretendard;
  font-size: 20px;
  font-weight: 700;
  line-height: 130%;

  margin-bottom: 32px;
}

.intro-sub::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #2a9fe3;

  flex-shrink: 0;
}

.intro-visual {
  position: relative;
  opacity: 0;
  transform: translateY(100px);
  width: 100%;
  max-width: 1600px;
  margin-top: 40px;
  margin-bottom: 240px;

  padding-bottom: 80px;
}

.circle-wrap {
  position: relative;
  width: 520px;
  height: 520px;
  margin: 0 auto;

  z-index: 2;

  opacity: 0;
  transform: translateY(80px);
}

.circle-bg {
  position: absolute;
  inset: 0;
  border-radius: 50%;

  background: radial-gradient(circle, rgba(60,130,200,0.2), transparent 70%);
}

.circle-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}

.circle-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.circle-img img.active {
  opacity: 1;
}

.circle-line {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 670px;
  height: 670px;
  pointer-events: none;
}

.circle-solid circle {
  fill: none;
  stroke: rgba(80,180,255,0.3);
  stroke-width: 24;
}

.circle-dash circle {
  fill: none;
  stroke: rgba(80,180,255,0.8);
  stroke-width: 1.5;

  stroke-dasharray: 3 3;
}

.circle-wrap {
  position: relative;
}

.dot {
  position: absolute;
  top: 50%;
  left: 50%;

  width: 40px;
  height: 40px;

  transform-origin: center;
}

.dot1 { transform: rotate(36deg) translateX(312px) translate(-50%, -50%); }
.dot2 { transform: rotate(150deg) translateX(344px) translate(-50%, -50%); }
.dot3 { transform: rotate(225deg) translateX(368px) translate(-50%, -50%); }
.dot4 { transform: rotate(315deg) translateX(340px) translate(-50%, -50%); }

.dot::before {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.dot.active::after {
  content: "";
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 50%;

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  border: 2px solid #2a9fe3;
  box-sizing: border-box;

  animation: dotTimer 5s linear forwards;
}

@keyframes dotTimer {
  from {
    clip-path: circle(0% at 50% 50%);
  }
  to {
    clip-path: circle(50% at 50% 50%);
  }
}

.timer-bg {
  fill: none;
  stroke: rgba(255,255,255,0.2);
  stroke-width: 2;
}

.timer-bar {
  fill: none;
  stroke: #2a9fe3;
  stroke-width: 2;

  stroke-dasharray: 113;
  stroke-dashoffset: 113;
}

.info {
  margin-bottom: 40px;
}

.info img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  margin-bottom: 8px;
}

.info-group {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 320px;
  margin-bottom: 8px;

  display: flex;
  flex-direction: column;
  gap: 200px;
}

.info-group.left {
  left: calc(50% - 700px);
  text-align: right;
}

.info-group.right {
  left: calc(50% + 380px);
  text-align: left;
}

.info h3 {
  color: rgba(255,255,255,0.4);
  transition: all 0.4s ease;

  font-family: Pretendard;
  font-size: 28px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: -0.28px;

  margin-bottom: 12px;

  transform: scale(1);
  transition: transform 0.4s ease, color 0.3s ease;
}

.info-group.left .info h3 {
  transform-origin: right center;
}

.info-group.right .info h3 {
  transform-origin: left center;
}

.info p {
  color: rgba(255,255,255,0.4);
  font-family: Pretendard;
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;

  transform: scale(1);
  transition: transform 0.4s ease, color 0.3s ease;
}

.info.active h3 {
  color: #2a9fe3;
  transform: scale(1.08);
}

.info.active p {
  color: #fff;
  font-weight: 400;
}

.info-btn {
  position: absolute;
  left: 50%;
  bottom: -80px; 

  transform: translateX(-50%);
}

.info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  width: 180px;
  height: 56px;

  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.4);

  color: #fff;
  font-family: "Wanted Sans";
  font-size: 14px;
  font-weight: 500;

  text-decoration: none;
  transition: background 0.25s ease, transform 0.2s ease;
}

.info-btn img {
  width: 24px;
  height: 24px;
  object-fit: contain;

  transition: transform 0.25s ease;
}

.info-btn:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

.info-btn:hover img {
  transform: translateX(6px); 
}

@media (max-width: 1440px) and (min-width: 1201px) {

  .intro-inner {
    margin-top: 180px;
    margin-bottom: 60px;
  }

  .intro-title span {
    font-size: 56px;
  }

  .intro-sub {
    font-size: 18px;
    margin-bottom: 28px;
  }

  .intro-visual {
    margin-top: 20px;
    margin-bottom: 160px;
  }

  .circle-wrap {
    width: 460px;
    height: 460px;
  }

  .circle-line {
    width: 600px;
    height: 600px;
  }

  .dot {
    width: 36px;
    height: 36px;
  }

  .info-group {
    width: 280px;
    gap: 150px;
  }

  .info-group.left {
    left: calc(50% - 620px);
  }

  .info-group.right {
    left: calc(50% + 340px);
  }

  .info h3 {
    font-size: 24px;
  }

  .info p {
    font-size: 15px;
    line-height: 22px;
  }

  .info img {
    width: 48px;
    height: 48px;
  }

  .info-btn {
    width: 170px;
    height: 52px;
  }
}

@media (max-width: 1200px) and (min-width: 769px) {

  .intro {
    min-height: auto;
    padding-bottom: 100px;
  }

  .intro-inner {
    margin-top: 140px;
    margin-bottom: 40px;
    padding: 0 20px;
  }

  .intro-title span {
    font-size: 42px;
    line-height: 1.3;
  }

  .intro-sub {
    font-size: 18px;
    margin-bottom: 24px;
  }

  .intro-visual {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 80px;
    padding-bottom: 0;
  }

  /* 원형 */
  .circle-wrap {
    width: 400px;
    height: 400px;
  }

  .circle-line {
    width: 520px;
    height: 520px;
  }

  /* 점 */
  .dot1 {
    transform: rotate(36deg) translateX(250px) translate(-50%, -50%);
  }

  .dot2 {
    transform: rotate(150deg) translateX(275px) translate(-50%, -50%);
  }

  .dot3 {
    transform: rotate(225deg) translateX(295px) translate(-50%, -50%);
  }

  .dot4 {
    transform: rotate(315deg) translateX(270px) translate(-50%, -50%);
  }

  /* 정보 영역 */
  .info-group.left,
  .info-group.right {
    position: relative;
    top: auto;
    left: auto;
    transform: none;

    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;

    padding: 0 24px;

    display: flex;
    flex-direction: column;
    gap: 24px;

    text-align: center;
  }

  .info-group.left {
    margin-top: 60px;
  }

  .info-group.right {
    margin-top: 20px;
  }

  .info {
    margin-bottom: 20px;
    text-align: center;
  }

  .info img {
    width: 48px;
    height: 48px;
    display: block;
    margin: 0 auto 10px;
  }

  .info h3 {
    font-size: 22px;
    line-height: 30px;
    text-align: center;
  }

  .info p {
    font-size: 14px;
    line-height: 22px;
    text-align: center;
  }

  .info-btn {
    position: relative;
    left: auto;
    bottom: auto;

    display: flex;
    margin: 30px auto 0;

    width: 160px;
    height: 48px;

    transform: none;
  }
}
@media (max-width: 1024px) and (min-width: 769px) {

  .intro-inner {
    margin-top: 120px;
  }

  .intro-title span {
    font-size: 36px;
  }

  .intro-sub {
    font-size: 16px;
  }

  .circle-wrap {
    width: 340px;
    height: 340px;
  }

  .circle-line {
    width: 440px;
    height: 440px;
  }

  .dot {
    width: 32px;
    height: 32px;
  }

  .dot1 {
    transform: rotate(36deg) translateX(215px) translate(-50%, -50%);
  }

  .dot2 {
    transform: rotate(150deg) translateX(230px) translate(-50%, -50%);
  }

  .dot3 {
    transform: rotate(225deg) translateX(245px) translate(-50%, -50%);
  }

  .dot4 {
    transform: rotate(315deg) translateX(225px) translate(-50%, -50%);
  }

  .info-group.left {
    margin-top: 50px;
  }

  .info h3 {
    font-size: 20px;
  }

  .info p {
    font-size: 14px;
  }
}

@media (max-width: 768px) {

  .intro {
    min-height: auto;
    padding-bottom: 80px;
  }

  .intro-inner {
    margin-top: 100px;
    margin-bottom: 30px;
    padding: 0 20px;
  }

  .intro-title span {
    font-size: 24px;
    line-height: 1.4;
  }

  .intro-sub {
    font-size: 14px;
    margin-bottom: 16px;
  }

  .intro-visual {
    margin-top: 20px;
    margin-bottom: 60px;
    padding-bottom: 0;
  }

  .circle-wrap {
    width: 260px;
    height: 260px;
  }

  .circle-line {
    width: 320px;
    height: 320px;
  }

  .dot {
    display: none;
  }

  .info-group {
    position: relative;
    top: auto;
    left: auto !important;
    transform: none;

    width: 100%;
    padding: 0 20px;

    display: flex;
    flex-direction: column;
    gap: 20px;

    text-align: center;
  }

  .info-group.left,
  .info-group.right {
    margin-top: 30px;
  }

  .info {
    margin-bottom: 16px;
    text-align: center;
  }

  .info img {
    width: 40px;
    height: 40px;
    margin: 0 auto 8px;
  }

  .info h3 {
    font-size: 18px;
    line-height: 26px;
  }

  .info p {
    font-size: 13px;
    line-height: 20px;
  }

  .info-btn {
    position: relative;

    left: auto;
    right: auto;
    bottom: auto;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 132px;
    height: 40px;

    margin: 24px auto 0;

    transform: none;

    font-size: 10px;
    line-height: 14px;
  }

  .info-btn img {
    width: 14px;
    height: 14px;
  }
}

/* 메인 - 섹션 3 */
.solution {
  position: relative;
  background: #000;
  z-index: 1;
}

.solution-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.solution-item {
  position: absolute;
  inset: 0;
}

.solution-item:first-child {
  transform: translateY(0);
}

.solution-item:nth-child(1) { z-index: 1; }
.solution-item:nth-child(2) { z-index: 2; }
.solution-item:nth-child(3) { z-index: 3; }
.solution-item:nth-child(4) { z-index: 4; }

.solution-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
}

.solution-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.solution-content {
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
  height: 100%;

  background: linear-gradient(180deg, #191C23 0%, #22364F 100%);

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding-left: clamp(60px, 6vw, 120px);
  padding-top: clamp(120px, 12vw, 320px);

  z-index: 10;
}

.solution-label {
  color: #40BAFF;
  font-family: Pretendard;
  font-size: 20px;
  font-weight: 600;
  line-height: 130%;

  position: relative;
  padding-left: 20px;
  margin-bottom: 24px;
}

.solution-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);

  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #40BAFF;
}

.solution-content h2 {
  color: #fff;
  font-family: Pretendard;
  font-size: 64px;
  font-weight: 700;
  line-height: 125%;
  letter-spacing: -0.02em;

  margin-bottom: 24px;
}

.solution-content p {
  color: #fff;
  font-family: Pretendard;
  font-size: 18px;
  font-weight: 400;
  line-height: 160%;

  opacity: 0.9;
  margin-bottom: 48px;
}

.solution-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  width: 180px;
  height: 56px;

  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.4);

  color: #fff;
  font-family: "Wanted Sans";
  font-size: 14px;
  font-weight: 500;

  text-decoration: none;
  transition: background 0.25s ease, transform 0.2s ease;
}

.solution-btn img {
  width: 24px;
  height: 24px;
  object-fit: contain;

  transition: transform 0.25s ease;
}

.solution-btn:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
  transform: translateY(-2px);
}

.solution-btn:hover img {
  transform: translateX(6px); 
}

.solution-content > * {
  opacity: 1;
  transform: translateX(0);
}

.solution-item.active .solution-content > * {
  transform: translateX(0);
  opacity: 1;
}

/* 1440px 이하, 낮은 높이의 노트북 */
@media (max-width: 1440px) and (max-height: 800px) {

  .solution-content {
    padding-left: 70px;
    padding-top: 60px;
    padding-right: 50px;
  }

  .solution-label {
    font-size: 18px;
    margin-bottom: 18px;
  }

  .solution-content h2 {
    font-size: 52px;
    line-height: 1.25;
    margin-bottom: 18px;
  }

  .solution-content p {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 32px;
  }

  .solution-btn {
    width: 170px;
    height: 52px;
  }
}

@media (max-width: 1200px) and (min-width: 769px) {

  .solution-sticky {
    height: 100vh;
  }

  .solution-bg {
    width: 50%;
  }

  .solution-content {
    width: 50%;

    padding-left: 50px;
    padding-right: 40px;
    padding-top: 40px;
  }

  .solution-label {
    font-size: 17px;
    padding-left: 18px;
    margin-bottom: 18px;
  }

  .solution-label::before {
    width: 10px;
    height: 10px;
  }

  .solution-content h2 {
    font-size: 46px;
    line-height: 1.25;
    margin-bottom: 20px;
  }

  .solution-content p {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 32px;
  }

  .solution-btn {
    width: 160px;
    height: 50px;
  }

  .solution-btn img {
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 1024px) and (min-width: 769px) {

  .solution-content {
    padding-left: 36px;
    padding-right: 30px;
    padding-top: 30px;
  }

  .solution-label {
    font-size: 15px;
    padding-left: 16px;
    margin-bottom: 14px;
  }

  .solution-label::before {
    width: 8px;
    height: 8px;
  }

  .solution-content h2 {
    font-size: 38px;
    line-height: 1.3;
    margin-bottom: 16px;
  }

  .solution-content p {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 26px;
  }

  .solution-btn {
    width: 150px;
    height: 46px;
    font-size: 13px;
  }

  .solution-btn img {
    width: 18px;
    height: 18px;
  }
}

@media (max-width: 1200px) and (max-height: 800px) and (min-width: 769px) {

  .solution-content {
    padding-top: 20px;
  }

  .solution-label {
    margin-bottom: 12px;
  }

  .solution-content h2 {
    font-size: 36px;
    margin-bottom: 14px;
  }

  .solution-content p {
    font-size: 14px;
    line-height: 1.45;
    margin-bottom: 22px;
  }

  .solution-btn {
    width: 145px;
    height: 44px;
  }
}
@media (max-width: 768px) {

  .solution {
    background: #000;
  }

  .solution-sticky {
    position: relative;
    height: auto;
    overflow: hidden;
  }

  .solution-item {
    position: relative;
    inset: auto;
    display: none;
  }

  .solution-item.active {
    display: block;
  }

  /* 이미지 */
  .solution-bg {
    position: relative;
    width: 100%;
    height: 280px;
    overflow: hidden;
  }

  .solution-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* 콘텐츠 */
  .solution-content {
    position: relative;
    width: 100%;
    min-height: 400px;

    padding: 40px 24px 80px;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .solution-label {
    font-size: 14px;
    padding-left: 16px;
    margin-bottom: 16px;
  }

  .solution-label::before {
    width: 8px;
    height: 8px;
  }

  .solution-content h2 {
    font-size: 28px;
    line-height: 1.4;
    margin-bottom: 16px;
  }

  .solution-content p {
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 28px;
  }

  .solution-btn {
    width: 132px;
    height: 40px;
    font-size: 10px;
    line-height: 14px;
  }

  .solution-btn img {
    width: 14px;
    height: 14px;
  }

  /* 모바일 좌우 버튼 */
  .solution-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 140px;

    transform: translateY(-50%);

    display: flex;
    justify-content: space-between;

    padding: 0 20px;

    z-index: 10;
  }

  .solution-prev,
  .solution-next {
    width: 44px;
    height: 44px;

    border: none;
    border-radius: 50%;

    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(6px);

    color: #fff;
    font-size: 24px;
    line-height: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
  }

  .solution-page {
    color: #fff;
    font-family: "Wanted Sans";
    font-size: 14px;
  }
}

/* 메인 - 섹션 4 */
.tech-intro {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: clamp(180px, 15vw, 320px);
  background: #fff;

  position: relative;
  z-index: 1;
}

.tech-inner {
  transform: translateY(120px);
  opacity: 0;
  text-align: center;
}

.tech-sub {
  display: inline-flex;
  align-items: center;

  gap: 8px;

  color: #2a9fe3;
  font-family: Pretendard;
  font-size: 20px;
  font-weight: 700;
  line-height: 130%;

  margin-bottom: 32px;
}

.tech-sub::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #2a9fe3;

  flex-shrink: 0;
}

.tech-title {
  text-align: center;
}

.tech-title span {
  display: block;
  text-align: center;

  font-family: Pretendard;
  font-size: 64px;
  font-weight: 700;
  line-height: 125%;
  letter-spacing: -0.02em;

background: linear-gradient(
  to right,
  #000 0%,
  #000 50%,
  #bbb 50%,
  #bbb 100%
);
  background-size: 200% 100%;
  background-position: right;

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (max-width: 1440px) and (min-width: 1201px) {

  .tech-intro {
    padding-top: 180px;
  }

  .tech-sub {
    font-size: 18px;
    margin-bottom: 28px;
  }

  .tech-sub::before {
    width: 11px;
    height: 11px;
  }

  .tech-title span {
    font-size: 56px;
    line-height: 1.3;
  }
}

@media (max-width: 1200px) and (min-width: 1025px) {

  .tech-intro {
    min-height: 100vh;
    padding-top: 150px;
    padding-left: 24px;
    padding-right: 24px;
  }

  .tech-sub {
    font-size: 18px;
    margin-bottom: 24px;
  }

  .tech-sub::before {
    width: 10px;
    height: 10px;
  }

  .tech-title span {
    font-size: 44px;
    line-height: 1.3;
  }
}

@media (max-width: 1024px) and (min-width: 769px) {

  .tech-intro {
    min-height: 100vh;
    padding-top: 120px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .tech-sub {
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 20px;
  }

  .tech-sub::before {
    width: 9px;
    height: 9px;
  }

  .tech-title span {
    font-size: 36px;
    line-height: 1.35;
  }
}

@media (max-width: 1200px) and (max-height: 800px) and (min-width: 769px) {

  .tech-intro {
    padding-top: 100px;
  }

  .tech-sub {
    margin-bottom: 18px;
  }

  .tech-title span {
    font-size: 34px;
  }
}

@media (max-width: 768px) {

  .tech-intro {
    min-height: auto;
    padding: 100px 20px;
  }

  .tech-inner {
    opacity: 1 !important;
    transform: none !important;
  }

  .tech-sub {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 16px;
  }

  .tech-sub::before {
    width: 10px;
    height: 10px;
  }

  .tech-title span {
    font-size: 24px;
    line-height: 1.4;

    background: none;
    -webkit-text-fill-color: #000;
  }
}

/* 메인 - 섹션 5 */
.equip {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #000;
  z-index: 2;

  margin-top: -100vh;
}

.equip-track {
  display: flex;
}

.equip-item {
  text-decoration: none;
  color: inherit;
  width: clamp(720px, 70vw, 960px);
  height: 100vh;

  flex-shrink: 0; 

  position: relative;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  padding: clamp(60px, 6vw, 120px)
           clamp(40px, 4vw, 80px);

  background: radial-gradient(
    circle at bottom,
    rgba(60, 100, 160, 0.4),
    #000 70%
  );
}

.equip-text {
  position: relative;
  z-index: 2;
}

.equip-label {
color: #40BAFF;
font-family: "Wanted Sans";
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 28px;

  margin-bottom: 4px;
  display: block;
}

.equip-text h3 {
color: #FFF;

font-family: "Wanted Sans";
font-size: 64px;
font-style: normal;
font-weight: 600;
line-height: 130%;
letter-spacing: -0.64px;

margin-bottom: 10px;
}

.equip-text p {
color: #FFF;
font-family: Pretendard;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 28px; 
}

.equip-img {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);

  width: clamp(600px, 55vw, 960px);
  height: clamp(600px, 55vw, 980px);

  display: flex;
  align-items: flex-end;
  justify-content: center;

  z-index: 1;
}

.equip-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;

  transition: transform 0.4s ease; 
}

.equip-item:hover .equip-img img {
  transform: scale(1.05) translateY(-10px);
}

.equip-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.equip-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.equip,
.equip * {
  cursor: none !important;
}

.cursor {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
}
.cursor-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 1px solid #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  position: relative;
}

.cursor-circle svg {
  width: 95%;
  height: 95%;

  animation: rotateText 8s linear infinite;
}

@keyframes rotateText {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.cursor-arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  font-family: Pretendard;
  color: #fff;
}

.equip-mobile-nav {
display: none;
}

@media (max-width: 1440px) and (min-width: 1201px) {

  .equip-item {
    width: 860px;
    height: 100vh;

    padding: 70px 60px;
  }

  .equip-label {
    font-size: 18px;
    line-height: 26px;
  }

  .equip-text h3 {
    font-size: 56px;
    line-height: 1.3;
  }

  .equip-text p {
    font-size: 18px;
    line-height: 26px;
  }

  .equip-img {
    width: 780px;
    height: 780px;
  }
}

@media (max-width: 1200px) and (min-width: 1025px) {

  .equip-item {
    width: 760px;
    height: 100vh;

    padding: 60px 50px;
  }

  .equip-label {
    font-size: 17px;
    line-height: 24px;
  }

  .equip-text h3 {
    font-size: 46px;
    line-height: 1.3;
    margin-bottom: 8px;
  }

  .equip-text p {
    font-size: 16px;
    line-height: 24px;
  }

  .equip-img {
    width: 680px;
    height: 680px;
  }
}

@media (max-width: 1024px) and (min-width: 769px) {

  .equip-item {
    width: 700px;
    height: 100vh;

    padding: 50px 40px;
  }

  .equip-label {
    font-size: 15px;
    line-height: 22px;
  }

  .equip-text h3 {
    font-size: 40px;
    line-height: 1.3;
  }

  .equip-text p {
    font-size: 14px;
    line-height: 22px;
  }

  .equip-img {
    width: 600px;
    height: 600px;
  }
}

@media (max-width: 1440px) and (max-height: 800px) and (min-width: 769px) {

  .equip-item {
    padding-top: 40px;
  }

  .equip-text h3 {
    font-size: 44px;
  }

  .equip-text p {
    font-size: 15px;
  }

  .equip-img {
    width: 560px;
    height: 560px;
  }
}

@media (max-width: 768px) {

  .equip {
    position: relative;
    margin-top: 0;
    overflow: hidden;
  }

  .equip-track {
    display: block;
  }

  .equip-item {
    width: 100%;
    height: 560px;

    display: none;
    position: relative;

    padding: 32px 24px;

    border-radius: 20px;
    overflow: hidden;
  }

  .equip-item.active {
    display: flex;
  }

  /* 텍스트 */
  .equip-text {
    position: relative;
    z-index: 10;
  }

  .equip-label {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 4px;
  }

  .equip-text h3 {
    font-size: 32px;
    line-height: 40px;
    margin-bottom: 8px;
  }

  .equip-text p {
    font-size: 13px;
    line-height: 20px;
  }

  /* 장비 이미지 */
  .equip-img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    left: auto;
    bottom: auto;

    display: flex;
    align-items: center;
    justify-content: center;

    transform: none;
  }

  .equip-img img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    transform: scale(1.15) translateY(20px);
  }

  /* 모바일 좌우 버튼 */
  .equip-mobile-nav {
    position: absolute;

    top: 50%;
    left: 20px;
    right: 20px;

    transform: translateY(-50%);

    display: flex;
    justify-content: space-between;

    z-index: 30;

    margin: 0;
    pointer-events: none;
  }

  .equip-prev,
  .equip-next {
    pointer-events: auto;

    width: 44px;
    height: 44px;

    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.2);

    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(8px);

    color: #fff;
    font-size: 24px;

    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* 페이지 번호 */
  .equip-page {
    position: absolute;

    left: 50%;
    bottom: 24px;

    transform: translateX(-50%);

    color: #fff;
  }

  /* 커스텀 커서 제거 */
  .cursor {
    display: none !important;
  }

  .equip,
  .equip * {
    cursor: auto !important;
  }
}

/* 메인 - 섹션 6 */
.news {
  position: relative;
  padding: 160px 0;
  background: #fff;
  border-radius: 0 0 32px 32px;

  z-index: 2;
}

.news-inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 40px;

  transform: translateY(80px);
  opacity: 0;
}

.news-header {
  margin-bottom: 80px;
}

.news-sub {
  position: relative;
  padding-left: 20px;

  color: #2594D3;
  font-family: Pretendard;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;

  margin-bottom: 40px;
}

.news-sub::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);

  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #2a9fe3;
}

.news-title {
  color: #000;
  font-family: Pretendard;
  font-size: 56px;
  font-style: normal;
  font-weight: 800;
  line-height: 120%;

  margin-bottom: 40px;
}

.news-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.news-tabs {
  display: flex;
  gap: 8px;
}

.news-tabs button {
  padding: 8px 20px;
  border-radius: 999px;
  border: 1px solid #ddd;
  background: #fff;

  color: #5A5A5A;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;

  cursor: pointer;
}

.news-tabs button {
  transition: 
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    transform 0.15s ease;
}

.news-tabs button.active {
  background: #222;
  color: #FFF;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  border-color: #222;
}

.news-tabs button:not(.active):hover {
  background: #f1f5f9;
  border-color: #ccc;
  color: #222;

  transform: translateY(-1px);
}

.news-arrows {
  display: flex;
  gap: 8px;
}

.news-arrows button {
  width: 40px;
  height: 40px;
  border-radius: 50%;

  border: 1px solid #ddd;
  background: #fff;

  color: #000;
  font-family: Pretendard;
  font-size: 20px;
  line-height: 32px;
  font-weight: 500;
  line-height: 1;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;

  transition: 
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    transform 0.15s ease;
}

.news-arrows button:hover {
  background: #f1f5f9;
  border-color: #ccc;
  transform: translateY(-1px);
}

.news-list {
  display: flex;
  gap: 24px;

  overflow: hidden; 
}

.news-track {
  display: flex;
  gap: 24px;

  transition: transform 0.5s ease;
}

.news-item {
  width: 360px;
  text-decoration: none;
  background: #fff;
  color: inherit;
}

.news-thumb {
  width: 100%;
  height: 220px;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
}

.news-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  transition: transform 0.5s ease;
}

.news-item:hover .news-thumb img {
  transform: scale(1.05) translateY(-4px);
}

.news-info {
  margin-top: 32px;
}

.news-info h3 {
  color: #000;
  font-family: Pretendard;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 32px;

  margin-top: 16px;
}

.news-meta-group {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.news-meta {
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;

  display: flex;
  gap: 6px;
}

.meta-label {
  color: #999;
  min-width: 40px;
}

.meta-date {
  color: #333;
  font-weight: 500;
}

.news-badge {
  display: inline-block;

  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;

  padding: 4px 8px;
  border-radius: 6px;
}

.news-badge.blue {
  background: #E5ECFE;;
  color: #336AF6;
}

.news-badge.red {
  background: #FEE5E5;
  color: #CC1417;
}

.news-badge.green {
  background: #D4FBD4;
  color: #00841D;
}

@media (max-width: 1440px) and (min-width: 1201px) {

  .news {
    padding: 140px 0;
  }

  .news-inner {
    padding: 0 40px;
  }

  .news-header {
    margin-bottom: 64px;
  }

  .news-sub {
    font-size: 18px;
    margin-bottom: 32px;
  }

  .news-title {
    font-size: 52px;
    margin-bottom: 32px;
  }

  .news-item {
    width: 320px;
  }

  .news-thumb {
    height: 200px;
    border-radius: 14px;
  }

  .news-info {
    margin-top: 26px;
  }

  .news-info h3 {
    font-size: 22px;
    line-height: 30px;
  }
}

@media (max-width: 1200px) and (min-width: 1025px) {

  .news {
    padding: 120px 0;
  }

  .news-inner {
    padding: 0 30px;
  }

  .news-header {
    margin-bottom: 56px;
  }

  .news-sub {
    font-size: 17px;
    padding-left: 18px;
    margin-bottom: 28px;
  }

  .news-sub::before {
    width: 10px;
    height: 10px;
  }

  .news-title {
    font-size: 44px;
    line-height: 1.3;
    margin-bottom: 28px;
  }

  .news-tabs {
    gap: 6px;
  }

  .news-tabs button {
    padding: 7px 16px;
    font-size: 14px;
  }

  .news-tabs button.active {
    padding: 7px 16px;
    font-size: 14px;
  }

  .news-arrows {
    gap: 6px;
  }

  .news-arrows button {
    width: 38px;
    height: 38px;
    font-size: 18px;
  }

  .news-list {
    gap: 20px;
  }

  .news-track {
    gap: 20px;
  }

  .news-item {
    width: 300px;
  }

  .news-thumb {
    height: 185px;
    border-radius: 14px;
  }

  .news-info {
    margin-top: 24px;
  }

  .news-info h3 {
    font-size: 20px;
    line-height: 28px;
  }

  .news-meta-group {
    margin-top: 12px;
  }

  .news-meta {
    font-size: 13px;
    line-height: 19px;
  }

  .news-badge {
    font-size: 13px;
  }
}

@media (max-width: 1024px) and (min-width: 769px) {

  .news {
    padding: 100px 0;
    border-radius: 0 0 24px 24px;
  }

  .news-inner {
    padding: 0 24px;
  }

  .news-header {
    margin-bottom: 48px;
  }

  .news-sub {
    font-size: 16px;
    padding-left: 16px;
    margin-bottom: 24px;
  }

  .news-sub::before {
    width: 9px;
    height: 9px;
  }

  .news-title {
    font-size: 38px;
    line-height: 1.3;
    margin-bottom: 24px;
  }

  .news-tabs {
    gap: 6px;
  }

  .news-tabs button,
  .news-tabs button.active {
    padding: 6px 14px;
    font-size: 13px;
    line-height: 20px;
  }

  .news-arrows {
    gap: 6px;
  }

  .news-arrows button {
    width: 36px;
    height: 36px;
    font-size: 17px;
  }

  .news-list {
    gap: 16px;
  }

  .news-track {
    gap: 16px;
  }

  .news-item {
    width: 280px;
  }

  .news-thumb {
    height: 170px;
    border-radius: 12px;
  }

  .news-info {
    margin-top: 20px;
  }

  .news-info h3 {
    font-size: 19px;
    line-height: 27px;
  }

  .news-meta-group {
    margin-top: 10px;
  }

  .news-meta {
    font-size: 12px;
    line-height: 18px;
  }

  .news-badge {
    font-size: 12px;
    padding: 3px 7px;
  }
}

@media (max-width: 1440px) and (max-height: 800px) and (min-width: 769px) {

  .news {
    padding-top: 100px;
    padding-bottom: 100px;
  }

  .news-header {
    margin-bottom: 48px;
  }

  .news-sub {
    margin-bottom: 24px;
  }

  .news-title {
    margin-bottom: 24px;
  }
}

@media (max-width: 768px) {

  .news {
    padding: 100px 0;
    border-radius: 0 0 20px 20px;
  }

  .news-inner {
    padding: 0;
    transform: none !important;
    opacity: 1 !important;
  }

  /* 헤더 */
  .news-header {
    margin-bottom: 40px;
    padding: 0 20px;
  }

  .news-sub {
    font-size: 14px;
    line-height: 20px;
    padding-left: 16px;
    margin-bottom: 20px;
  }

  .news-sub::before {
    width: 10px;
    height: 10px;
  }

  .news-title {
    font-size: 24px;
    line-height: 1.4;
    margin-bottom: 24px;
  }

  /* 탭 + 화살표 */
  .news-controls {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .news-tabs {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 4px;
    gap: 6px;

    scrollbar-width: none;
  }

  .news-tabs::-webkit-scrollbar {
    display: none;
  }

  .news-tabs button,
  .news-tabs button.active {
    flex-shrink: 0;

    padding: 6px 10px;

    font-size: 13px;
    line-height: 18px;
  }

  /* 뉴스 리스트 */
  .news-list {
    width: 100%;
    overflow: hidden;
  }

  .news-track {
    display: flex;
    gap: 0;

    transition: transform 0.4s ease;
  }

  .news-item {
    width: 100vw;
    min-width: 100vw;

    padding: 0 20px;
    box-sizing: border-box;
  }

  /* 썸네일 */
  .news-thumb {
    width: 100%;
    height: 220px;
    border-radius: 12px;
  }

  .news-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* 뉴스 정보 */
  .news-info {
    margin-top: 20px;
  }

  .news-info h3 {
    font-size: 22px;
    line-height: 30px;
    margin-top: 12px;
  }

  .news-meta-group {
    margin-top: 12px;
  }

  .news-meta {
    font-size: 13px;
    line-height: 20px;
  }

  .news-badge {
    font-size: 12px;
    line-height: 18px;
    padding: 4px 8px;
  }

  /* 모바일에서는 hover 확대 제거 */
  .news-item:hover .news-thumb img {
    transform: none;
  }
}

/* 서브페이지 공통---------------------------------------------------------------------*/
/* 서브비주얼 */
.sub-visual {
  position: relative;
  height: 680px;
  color: #fff;
  overflow: hidden;

  opacity: 0;
  transform: translateY(0);

  transition:
    opacity .8s ease,
    transform .8s ease;
}

.sub-visual.show {
  opacity: 1;
  transform: translateY(0);
}

.sub-visual-bg {
  position: absolute;
  inset: 0;
}

.sub-visual-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  transform: scale(1.08);
  transition: transform 1.4s ease;
}

.sub-visual.show .sub-visual-bg img {
  transform: scale(1);
}

.sub-visual-inner {
  position: relative;
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.sub-title {
  color: #FFF;
  font-family: Pretendard;
  font-size: 72px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -0.02em;

  margin-bottom: 28px;
}

.breadcrumb {
  display: flex;
  gap: 12px;

  color: #FFF;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.64px;
}

.breadcrumb .home img {
  width: 24px;
  height: 24px;
}

.breadcrumb span::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 10px;

  background: url('/images/layout/icon-breadcrumb-arrow.svg') no-repeat center/contain;
}

.breadcrumb span:last-child::after {
  display: none;
}

.sub-title,
.breadcrumb {
  opacity: 0;
  transform: translateY(20px);

  transition:
    opacity .8s ease,
    transform .8s ease;
}

.sub-visual.show .sub-title {
  opacity: 1;
  transform: translateY(0);

  transition-delay: .15s;
}

.sub-visual.show .breadcrumb {
  opacity: 1;
  transform: translateY(0);

  transition-delay: .3s;
}


.page-title.show {
  opacity: 1;
  transform: translateY(0);
}

.page-desc.show {
  opacity: 1;
  transform: translateY(0);
}

.sub-tab {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;

  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(6px);

  opacity: 0;
  transform: translateY(20px);

  transition:
    opacity .8s ease,
    transform .8s ease;
}

.sub-tab-inner {
  max-width: 1400px;
  margin: 0 auto;

  display: flex;
}

.sub-tab a {
  flex: 1;
  text-align: center;

  height: 64px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #FFF;
  font-family: Pretendard;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;

  transition:
    background 0.35s ease,
    color 0.35s ease,
    opacity 0.35s ease;
}

.sub-tab a:hover {
  background: rgba(255,255,255,0.1);
  opacity: 0.9;
}

.sub-tab a.active {
  background: #fff;
  color: #000;

  font-family: Pretendard;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
}

.sub-visual.show .sub-tab {
  opacity: 1;
  transform: translateY(0);

  transition-delay: .45s;
}

.page-title {
  position: relative;

  padding: 150px 0 80px;
  text-align: center;

  opacity: 0;
  transform: translateY(24px);

  transition:
    opacity .8s ease,
    transform .8s ease;
}

.page-title h2 {
  color: #000;

  font-size: 64px;
  text-align: center;
  font-family: Pretendard;
  font-weight: 800;
  line-height: 72px;
  letter-spacing: -0.02em;
}

.page-desc {
  color: #484848;
  font-family: Pretendard;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -0.02em;

  margin-top: 32px;

  opacity: 0;
  transform: translateY(24px);

  transition:
    opacity .8s ease,
    transform .8s ease;
}

@media (max-width: 1440px) and (min-width: 1201px) {

  .sub-visual {
    height: 620px;
  }

  .sub-title {
    font-size: 64px;
    margin-bottom: 24px;
  }

  .breadcrumb {
    font-size: 15px;
    gap: 10px;
  }

  .sub-tab-inner {
    max-width: 1200px;
  }

  .sub-tab a {
    height: 60px;
    font-size: 17px;
  }

  .sub-tab a.active {
    font-size: 17px;
  }

  .page-title {
    padding: 130px 40px 70px;
  }

  .page-title h2 {
    font-size: 56px;
    line-height: 1.3;
  }

  .page-desc {
    margin-top: 28px;
    font-size: 17px;
    line-height: 27px;
  }
}

@media (max-width: 1440px) and (max-height: 800px) and (min-width: 769px) {

  .sub-visual {
    height: 540px;
  }

  .sub-title {
    font-size: 56px;
    margin-bottom: 20px;
  }

  .sub-tab a {
    height: 56px;
  }

  .page-title {
    padding-top: 100px;
    padding-bottom: 60px;
  }
}
@media (max-width: 1200px) and (min-width: 1025px) {

  .sub-visual {
    height: 540px;
  }

  .sub-title {
    font-size: 52px;
    line-height: 1.3;
    margin-bottom: 20px;
  }

  .breadcrumb {
    font-size: 14px;
    gap: 8px;
  }

  .breadcrumb .home img {
    width: 22px;
    height: 22px;
  }

  .sub-tab-inner {
    max-width: 100%;
    padding: 0 20px;
  }

  .sub-tab a {
    height: 56px;
    font-size: 15px;
  }

  .sub-tab a.active {
    font-size: 15px;
  }

  .page-title {
    padding: 110px 30px 60px;
  }

  .page-title h2 {
    font-size: 48px;
    line-height: 1.3;
  }

  .page-desc {
    margin-top: 24px;
    font-size: 16px;
    line-height: 25px;
  }
}

@media (max-width: 1024px) and (min-width: 769px) {

  .sub-visual {
    height: 500px;
  }

  .sub-visual-inner {
    padding: 0 30px;
  }

  .sub-title {
    font-size: 44px;
    line-height: 1.3;
    margin-bottom: 18px;
    text-align: center;
  }

  .breadcrumb {
    justify-content: center;
    flex-wrap: wrap;

    gap: 6px;

    font-size: 13px;
    line-height: 20px;
  }

  .breadcrumb .home img {
    width: 20px;
    height: 20px;
  }

  .breadcrumb span::after {
    width: 8px;
    height: 8px;
    margin-left: 7px;
  }

  /* 하단 메뉴 */
  .sub-tab {
    overflow: hidden;
  }

  .sub-tab-inner {
    width: 100%;
    max-width: none;
    padding: 0;
  }

  .sub-tab a {
    height: 54px;

    font-size: 14px;
    line-height: 20px;
  }

  .sub-tab a.active {
    font-size: 14px;
  }

  /* 페이지 타이틀 */
  .page-title {
    padding: 90px 24px 50px;
  }

  .page-title h2 {
    font-size: 40px;
    line-height: 1.3;
    word-break: keep-all;
  }

  .page-desc {
    margin-top: 20px;

    font-size: 15px;
    line-height: 24px;

    word-break: keep-all;
  }
}

@media (max-width: 768px) {

  .sub-visual {
    height: 420px;
  }

  .sub-visual-inner {
    padding: 0 20px;
  }

  .sub-title {
    font-size: 36px;
    line-height: 44px;
    text-align: center;

    margin-bottom: 16px;

    word-break: keep-all;
  }

  .breadcrumb {
    justify-content: center;
    flex-wrap: wrap;

    gap: 6px;

    font-size: 12px;
    line-height: 18px;
  }

  .breadcrumb .home img {
    width: 18px;
    height: 18px;
  }

  .breadcrumb span::after {
    width: 8px;
    height: 8px;
    margin-left: 6px;
  }

  /* 하단 탭 */
  .sub-tab {
    overflow-x: auto;
    overflow-y: hidden;

    backdrop-filter: blur(10px);

    scrollbar-width: none;
  }

  .sub-tab::-webkit-scrollbar {
    display: none;
  }

  .sub-tab-inner {
    width: max-content;
    min-width: 100%;

    display: flex;
  }

  .sub-tab a {
    flex: none;

    min-width: 132px;
    height: 54px;

    padding: 0 20px;

    font-size: 14px;
    line-height: 20px;

    white-space: nowrap;
  }

  .sub-tab a.active {
    font-size: 14px;
  }

  /* 페이지 타이틀 */
  .page-title {
    padding: 80px 20px 50px;
  }

  .page-title h2 {
    font-size: 36px;
    line-height: 44px;

    word-break: keep-all;
  }

  .page-desc {
    margin-top: 20px;

    font-size: 15px;
    line-height: 24px;

    word-break: keep-all;
  }
}

/* 인풋, 셀렉트 */
.ui-board-nav {
  margin-top: 80px;
  display: flex;
  align-items: center;
}

.ui-board-nav-list {
  width: 240px;
  border: 1px solid #1A2A4C;
  padding: 18px;
  border-radius: 4px;

  text-decoration: none;
  color: var(--Style, #1A2A4C);
  font-family: Pretendard;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  text-align: center;
  line-height: 28px;

  transition: all 0.2s;
}

.ui-board-nav-list:hover {
  transform: translateY(-2px);
}

.ui-board-nav-group {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.ui-board-nav-btn {
  width: 240px;
  border: 1px solid #1A2A4C;
  padding: 18px;
  border-radius: 4px;
  
  text-decoration: none;
  color: var(--Style, #1A2A4C);
  font-family: Pretendard;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  text-align: center;
  line-height: 28px;

  transition: all 0.2s;
}

.ui-board-nav-btn.next {
  background: #1A2A4C;
  color: #fff;
  border-color: #1A2A4C;
}

.ui-board-nav-btn:hover {
  transform: translateY(-2px);
}

.ui-form {
  display: flex;
  flex-direction: column;
  gap: 80px;
  align-items: flex-start;

  padding: 48px;
  background: #fff;
  border: 6px solid #eee;
  border-radius: 20px;
  
}

.ui-form-side {
  width: 260px;
  flex-shrink: 0;
}

.ui-form-title {
  color: #000;
  font-family: Pretendard;
  font-size: 40px;
  font-weight: 800;
  line-height: 56px;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.ui-form-desc {
  color: #242424;
  font-family: Pretendard;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.ui-form-desc strong {
  color: #2594D3;
}

.ui-form-main {
  flex: 1;
  max-width: 914px;
  margin-left: auto;
}

.ui-form-grid {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  width: 100%;
}

.ui-form-grid label {
  color: #242424;
  font-family: Pretendard;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;

  display: flex;
  align-items: center;
}

.ui-form-required {
  color: #2594D3;
  margin-left: 4px;
}

.ui-form-field {
  display: flex;
  flex-direction: column;
}

.ui-input,
.ui-select,
.ui-textarea{
    border:none !important;
}

.ui-form input,
.ui-form select {
  width: 100%;
  height: 56px;
  border-radius: 4px;
  padding: 0 12px;

  font-family: Pretendard;
  font-size: 16px;
  font-weight: 500;
  line-height: 28px;

  color: #242424;
  background: #F5F5F5;
  transition: all 0.2s ease;
}

.ui-form select {
  border: 1px solid #E3E3E3;
  outline: none;
  appearance: none;
  background: #F5F5F5 url('/images/layout/select-arrow.svg') no-repeat right 12px center / 10px;
  padding-right: 36px;
  cursor: pointer;
}

.ui-form input:focus,
.ui-form select:focus {
  outline: none;
  border-color: #2594D3;
}

.ui-textarea {
  width: 100%;
  height: 200px;
  padding: 16px;
  background: #F5F5F5;
  border: none;
  resize: none;

  font-family: Pretendard;
  font-size: 16px;
  line-height: 24px;

  border-radius: 4px;
}

.ui-textarea:focus {
  outline: none;
  border-color: #2594D3;
}

.email-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.email-group input {
  flex: 1;
}

.email-group select {
  width: 140px;
}

.email-group span {
  font-family: Pretendard;
  font-size: 16px;
  font-weight: 500;
  line-height: 28px;
}

.phone-group {
  display: flex;
  gap: 8px;
}

.phone-group select {
  width: 100px;
}

.phone-group input {
  flex: 1;
}

.etc-select-group {
  display: flex;
  gap: 8px;
  position: relative;
}

.ui-form-error-msg {
  font-size: 13px;
  color: #D02A2A;
  margin-top: 6px;
  display: none;
}

.ui-form-field.error input,
.ui-form-field.error select {
  border-color: #D02A2A;
}

.ui-form-field.error .ui-form-error-msg {
  display: block;
}

.req-select-group {
  display: flex;
  gap: 24px;
}

.req-select-item {
  display: flex;
  align-items: center;
  gap: 12px;

  flex: 1;
}

.req-select-label {
  flex-shrink: 0;
  color: #242424;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
}

.req-select-item select {
  flex: 1;
}

/**/
.reserve-date-trigger {
  width: 100%;
  height: 56px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 12px;

  border: 1px solid #E3E3E3;
  border-radius: 4px;

  background: #F5F5F5;

  color: #242424;
  font-family: Pretendard;
  font-size: 16px;
  font-weight: 500;
  line-height: 28px;

  cursor: pointer;

  transition: all .2s ease;
}

.reserve-date-trigger:hover {
  border-color: #2594D3;
}

.reserve-date-trigger::after {
  content: "";

  width: 10px;
  height: 10px;

  background:
    url('/images/layout/select-arrow.svg')
    no-repeat center / contain;

  transition: transform .2s ease;
}

.reserve-date-trigger.is-open {
  border-color: #2594D3;
}

.reserve-date-trigger.is-open::after {
  transform: rotate(180deg);
}


/* 버튼 */
#submitBtn.disabled {
  background: #ccc;
  border-color: #ccc;
  color: #fff;
  pointer-events: none;
}

#submitBtn.active {
  background: #1A2A4C;
  color: #fff;
}


.ui-form.ui-form-clean {
  padding: 0;
  border: none;
  background: transparent;
}

.ui-form {
  display: flex;
  gap: 80px;
  align-items: flex-start;
  
}

.ui-form-main {
  max-width: none;
  width: 100%;
}

.join-terms {
  width: 100%;
}

.ui-flex {
  display: flex;
  gap: 8px;
}

.ui-form-side {
  width: 260px;
  flex-shrink: 0;
}

.ui-form-main {
  flex: 1;
  max-width: none;
  margin-left: 0;
}

.ui-flex input {
  flex: 1;
}

.ui-btn-sm {
  height: 56px;
  padding: 0 16px;
  border: 1px solid #E8E8E8 !important; 
  border-radius: 4px;
  background: #fff;
  cursor: pointer;

  color: #686868;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px; 
}

.ui-form-grid .ui-form-field > p.ui-form-desc-sm{
    font-size:13px;
    font-family:Pretendard;
    line-height:16px;
    color:#888;
    padding:0;
    margin-top:6px;
}

.ui-divider {
  grid-column: 1 / -1;
  height: 1px;
  background: #E5E5E5;
  margin: 32px 0;
}

.email-group span {
  display: flex;
  align-items: center;
  padding: 0 4px;
}

/* 체크박스 */
.ui-check {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.ui-check input {
  display: none;
}

.ui-check-box {
  width: 24px;
  height: 24px;

  background: url('/images/layout/check-off.png') no-repeat center / contain;
  transition: all 0.2s;
}

.ui-check input:checked + .ui-check-box {
  background: url('/images/layout/check-on.png') no-repeat center / contain;
}

.ui-check:hover .ui-check-box {
  background: url('/images/layout/check-hover.png') no-repeat center / contain;
}

.ui-check input:checked + .ui-check-box:hover {
  background: url('/images/layout/check-on-hover.png') no-repeat center / contain;
}

.ui-check input:disabled + .ui-check-box {
  background: url('/images/layout/check-disabled.png') no-repeat center / contain;
  cursor: not-allowed;
}

.ui-check input:disabled ~ .ui-check-label {
  color: #aaa;
}

/* 라디오 */
.ui-radio {
  display: flex;
  align-items: center;
  gap: 20px;
}

.ui-radio label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;

  color: #000;
  font-family: Pretendard;
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
}

.ui-radio {
  display: flex;
  gap: 24px;
  height: 56px;
}

.ui-radio label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.ui-radio input {
  display: none;
}

.ui-radio-icon {
  width: 20px;
  height: 20px;
  margin-left: 4px;
  background: url('/images/layout/radio-off.svg') no-repeat center / contain;
}


.ui-radio input:checked + .ui-radio-icon {
  background: url('/images/layout/radio-on.svg') no-repeat center / contain;
}


.ui-radio input:disabled + .ui-radio-icon {
  background: url('/images/layout/radio-disabled.svg') no-repeat center / contain;
  cursor: not-allowed;
}

.ui-radio input:disabled ~ .ui-radio-label {
  color: #aaa;
}

.ui-radio-label {
  font-size: 16px;
  color: #242424;
}

.analysis-notice{
    display:flex;
    align-items:flex-start;
    gap:16px;

    padding:24px 28px;

    background:#F5F5F5;
    border-radius:12px;

    margin-bottom: 16px;
}

.ui-form-main > .analysis-notice:last-child {
    margin-bottom: 0;
}

.analysis-notice-icon{
    flex-shrink:0;

    width:24px;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.analysis-notice-icon img,
.analysis-notice-icon svg{
    width:100%;
    height:100%;

    display:block;
}

.analysis-notice-list{
    flex:1;

    margin:0;
    padding:0;

    list-style:none;
}

.analysis-notice-list li{
    position:relative;

    padding-left:14px;

    color:#444;
    font-family: Pretendard;
    font-size:15px;
    font-style:normal;
    font-weight:400;
    line-height:22px;
    letter-spacing:-0.32px;
}


.analysis-notice-list li::before{
    content:"•";

    position:absolute;
    left:0;
    top:0;

    color:#222;
    font-size:16px;
    font-weight:600;
}

.analysis-notice-list li span{
    color:#111;
    font-weight:600;
}

@media (max-width:1440px) and (min-width:1201px){

  .ui-board-nav{
    margin-top:64px;
  }

  .ui-board-nav-list,
  .ui-board-nav-btn{
    width:210px;
    padding:16px;
    font-size:17px;
    line-height:26px;
  }

  .ui-form{
    padding:40px;
    gap:56px;
  }

  .ui-form-title{
    font-size:36px;
    line-height:48px;
  }

  .ui-form-main{
    max-width:none;
  }

  .ui-form-grid{
    grid-template-columns:120px 1fr;
    gap:10px;
  }

  .ui-form-grid label{
    font-size:15px;
    line-height:22px;
  }

  .ui-form input,
  .ui-form select,
  .reserve-date-trigger{
    height:52px;
    font-size:15px;
  }

  .ui-textarea{
    height:180px;
    font-size:15px;
  }

  .ui-btn-sm{
    height:52px;
    font-size:15px;
  }

  .req-select-group{
    gap:16px;
  }

  .req-select-label{
    font-size:15px;
  }

  .ui-radio{
    gap:20px;
  }

}

@media (max-width:1200px) and (min-width:1025px){

  .ui-board-nav{
    margin-top:56px;
  }

  .ui-board-nav-list,
  .ui-board-nav-btn{
    width:190px;
    padding:15px;
    font-size:16px;
    line-height:24px;
  }

  .ui-form{
    padding:36px 28px;
    gap:44px;
  }

  .ui-form-title{
    font-size:32px;
    line-height:42px;
  }

  .ui-form-desc{
    font-size:15px;
    line-height:22px;
  }

  .ui-form-grid{
    grid-template-columns:110px 1fr;
    gap:10px;
  }

  .ui-form-grid label{
    font-size:15px;
    line-height:22px;
  }

  .ui-form input,
  .ui-form select,
  .reserve-date-trigger{
    height:52px;
    font-size:15px;
  }

  .ui-textarea{
    height:180px;
    padding:14px;
    font-size:15px;
    line-height:22px;
  }

  .email-group{
    gap:6px;
  }

  .email-group select{
    width:120px;
  }

  .phone-group{
    gap:6px;
  }

  .phone-group select{
    width:90px;
  }

  .etc-select-group{
    gap:6px;
  }

  .req-select-group{
    gap:16px;
  }

  .req-select-label{
    font-size:15px;
  }

  .ui-btn-sm{
    height:52px !important;
    padding:0 14px;
    font-size:14px !important;
  }

  .ui-radio{
    gap:18px;
  }

  .ui-radio-label{
    font-size:15px;
  }

  .analysis-notice{
    gap:12px;
    padding:18px 20px;
  }

}

@media (max-width:1200px){

  .ui-form{
    padding:40px 32px;
    gap:48px;
  }

  .ui-form-side{
    width:100%;
  }

  .ui-form-title{
    font-size:32px;
    line-height:44px;
  }

  .ui-form-main{
    max-width:none;
    width:100%;
  }

      .analysis-notice{
        gap:14px;
        padding:20px 22px;
        margin-bottom:14px;
    }

    .analysis-notice-icon{
        width:22px;
        height:22px;
    }

    .analysis-notice-list li{
        font-size:14px;
        line-height:22px;
    }

}

@media (max-width:1200px) and (min-width:1025px){

  .ui-board-nav{
    margin-top:56px;
  }

  .ui-board-nav-list,
  .ui-board-nav-btn{
    width:190px;
    padding:15px;
    font-size:16px;
    line-height:24px;
  }

  .ui-form{
    padding:36px 28px;
    gap:44px;
  }

  .ui-form-title{
    font-size:32px;
    line-height:42px;
  }

  .ui-form-desc{
    font-size:15px;
    line-height:22px;
  }

  .ui-form-grid{
    grid-template-columns:110px 1fr;
    gap:10px;
  }

  .ui-form-grid label{
    font-size:15px;
    line-height:22px;
  }

  .ui-form input,
  .ui-form select,
  .reserve-date-trigger{
    height:52px;
    font-size:15px;
  }

  .ui-textarea{
    height:180px;
    padding:14px;
    font-size:15px;
    line-height:22px;
  }

  .email-group{
    gap:6px;
  }

  .email-group select{
    width:120px;
  }

  .phone-group{
    gap:6px;
  }

  .phone-group select{
    width:90px;
  }

  .etc-select-group{
    gap:6px;
  }

  .req-select-group{
    gap:16px;
  }

  .req-select-label{
    font-size:15px;
  }

  .ui-btn-sm{
    height:52px !important;
    padding:0 14px;
    font-size:14px !important;
  }

  .ui-radio{
    gap:18px;
  }

  .ui-radio-label{
    font-size:15px;
  }

  .analysis-notice{
    gap:12px;
    padding:18px 20px;
  }

}

@media (max-width:1024px) and (min-width:769px){

  .ui-board-nav{
    margin-top:48px;
  }

  .ui-board-nav-list,
  .ui-board-nav-btn{
    width:170px;
    padding:14px 12px;
    font-size:15px;
    line-height:22px;
  }

  .ui-board-nav-group{
    gap:6px;
  }

  .ui-form{
    padding:32px 24px;
    gap:36px;
    border-width:4px;
    border-radius:16px;
  }

  .ui-form-title{
    font-size:28px;
    line-height:36px;
  }

  .ui-form-desc{
    font-size:14px;
    line-height:21px;
  }

  .ui-form-grid{
    grid-template-columns:100px 1fr;
    gap:8px;
  }

  .ui-form-grid label{
    font-size:14px;
    line-height:20px;
  }

  .ui-form input,
  .ui-form select,
  .reserve-date-trigger{
    height:50px;
    font-size:14px;
  }

  .ui-form input,
  .ui-form select{
    padding-left:10px;
    padding-right:10px;
  }

  .ui-form select{
    padding-right:30px;
    background-position:right 10px center;
    background-size:9px;
  }

  .ui-textarea{
    height:170px;
    padding:12px;
    font-size:14px;
    line-height:21px;
  }

  .email-group{
    gap:6px;
  }

  .email-group select{
    width:110px;
  }

  .email-group span{
    padding:0 2px;
    font-size:14px;
  }

  .phone-group{
    gap:6px;
  }

  .phone-group select{
    width:82px;
  }

  .etc-select-group{
    gap:6px;
  }

  .req-select-group{
    gap:12px;
  }

  .req-select-item{
    gap:8px;
  }

  .req-select-label{
    font-size:14px;
    line-height:20px;
  }

  .ui-btn-sm{
    height:50px !important;
    padding:0 12px;
    font-size:13px !important;
  }

  .ui-radio{
    gap:16px;
    height:50px;
  }

  .ui-radio label{
    font-size:14px;
  }

  .ui-radio-label{
    font-size:14px;
  }

  .ui-radio-icon{
    width:18px;
    height:18px;
  }

  .reserve-date-trigger{
    padding:0 10px;
  }

  .analysis-notice{
    gap:10px;
    padding:16px 18px;
    border-radius:10px;
  }

  .analysis-notice-icon{
    width:20px;
    height:20px;
  }

  .analysis-notice-list li{
    font-size:13px;
    line-height:20px;
  }

}

@media (max-width:768px){

  .email-group{
    display:grid;
    grid-template-columns:minmax(0, 1fr) 28px minmax(0, 1fr);
    gap:6px;
    align-items:center;
  }

  .email-group input{
    width:100%;
    min-width:0;
    flex:none;
  }

  .email-group span{
    display:flex;
    justify-content:center;
    align-items:center;
    padding:0;
    font-size:14px;
  }

  .email-group select{
    grid-column:1 / -1;
    width:100%;
  }

}

@media (max-width:480px){

  .ui-board-nav{
    margin-top:40px;
    gap:8px;
  }

  .ui-board-nav-list,
  .ui-board-nav-btn{
    font-size:14px;
    line-height:20px;
    padding:12px 10px;
  }

  .ui-form{
    padding:20px 16px;
    gap:28px;
    border-width:3px;
    border-radius:14px;
  }

  .ui-form-title{
    font-size:24px;
    line-height:32px;
  }

  .ui-form-desc{
    font-size:13px;
    line-height:20px;
  }

  .ui-form-grid{
    gap:6px;
  }

  .ui-form-grid label{
    font-size:13px;
    line-height:20px;
  }

  .ui-form input,
  .ui-form select{
    height:46px;
    font-size:13px;
  }

  .ui-textarea{
    height:160px;
    padding:12px;
    font-size:13px;
    line-height:20px;
  }

  .phone-group select{
    width:76px;
  }

  .ui-btn-sm{
    height:46px !important;
    padding:0 9px;
    font-size:12px !important;
  }

  .ui-check-box{
    width:18px;
    height:18px;
  }

  .ui-check-label{
    font-size:11px;
    line-height:15px;
  }

  .ui-radio{
    gap:10px;
    padding:8px !important;
  }

  .ui-radio-label{
    font-size:13px;
  }

  .reserve-date-trigger{
    height:46px;
    font-size:13px;
  }

  .analysis-notice{
    gap:8px;
    padding:14px;
  }

  .analysis-notice-list li{
    font-size:12px;
    line-height:19px;
  }

}

/* 캘린더 */
.req-calendar {
  margin-top: 60px;
  padding: 40px;
  border-radius: 16px;
  background: #F5F5F5;
}

.eq-req-calendar {
  margin-top: 0;
  padding: 0;
}

.req-calendar__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.req-calendar__month {
  display: flex;
  align-items: center;
  gap: 12px;
}

.req-calendar__month strong {
  color: #000;
  font-family: "Wanted Sans";
  font-size: 26px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px; 
  letter-spacing: -0.02em;
}

.req-calendar__arrow {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 22px;
  height: 22px;

  border: none;
  background: none;
  cursor: pointer;
}

.req-calendar__arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

/* 범례 */
.req-calendar__legend {
  display: flex;
  align-items: center;
  gap: 8px;
}

.req-calendar__legend-box {
  display: flex;
  align-items: center;
  gap: 12px;

  height: 28px;
  padding: 0 14px;

  border-radius: 4px;
  background: #FFF;

  white-space: nowrap;
}

/* dot 타입 */
.req-calendar__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;

  color: #111;
  font-family: Pretendard;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.req-calendar__legend-item i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.req-calendar__legend-item.type-analysis i {
  background: #5B7FFF;
}

.req-calendar__legend-item.type-autonomy i {
  background: #FF4B4B;
}

/* badge 타입 */
.req-calendar__legend-badge {
  display: inline-flex;
  align-items: center;

  position: relative;

  padding-left: 16px;

  color: #111;
  font-family: Pretendard;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.req-calendar__legend-badge::before {
  content: "";

  position: absolute;
  left: 0;
  top: 50%;

  width: 12px;
  height: 12px;

  border-radius: 3px;

  transform: translateY(-50%);
}

/* badge color */
.req-calendar__legend-badge.type-complete::before {
  background: #FBE6D7;
}

.req-calendar__legend-badge.type-approve::before {
  background: #D2EDDA;
}

.req-calendar__legend-badge.type-finish::before {
  background: #DADBDE;
}

.req-calendar__legend-badge.type-etc::before {
  border: 2px solid #CFCFCF;
  box-sizing: border-box;
  background: transparent;
}

.req-calendar__body {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.req-calendar__table-wrap {
  flex: 1;
}

.req-calendar__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;

  table-layout: fixed;

  overflow: hidden;

  border-radius: 12px;
  background: #FFF;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.req-calendar__table thead th {
  height: 42px;

  border-bottom: 1px solid #EAEAEA;

  color: #9A9A9A;
  text-align: center;
  font-family: Pretendard;
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
}

.req-calendar__table thead th.sun {
  color: #FF6B6B;
}

.req-calendar__table tbody td {
  position: relative;
  vertical-align: top;

  height: 110px;

  padding: 8px 6px;

  border-right: 1px solid #eee;
  border-bottom: 1px solid #eee;

  background: #FFF;
  overflow: hidden;
}

.req-calendar__table tbody tr td:last-child {
  border-right: none;
}

.req-calendar__table .day {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 22px;
  height: 22px;

  margin-bottom: 8px;

  border-radius: 50%;

  color: #333;
  font-family: Pretendard;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  line-height: 1;
}

.req-calendar__table .day.sun {
  color: #FF6B6B;
}

/* 오늘 */
.req-calendar__table td.is-today {
  background: #EDF5FB;
}

/* 선택 */
.req-calendar__table .day {
  transition: all .2s ease;
}

.req-calendar__table td:hover .day {
  background: #AFC3D8;
  color: #FFF;
}

.req-calendar__table td.is-selected .day {
  background: #39465E;
  color: #FFF;
}

.req-calendar__table td {
  cursor: pointer;
}

/* 비활성 */
.req-calendar__table td.is-disabled {
  background: #FAFAFA;
}

.req-calendar__table td.is-disabled .day {
  color: #B8B8B8;
}

/* 이벤트 영역 */
.req-calendar__events {
  display: flex;
  flex-direction: column;

  gap: 2px;

  max-height: 72px;
  overflow-y: auto;

  padding-right: 2px;
}

/* 이벤트 */
.req-calendar__event {
  position: relative;

  display: flex;
  align-items: center;

  width: 100%;

  min-height: 18px;
  padding: 2px 6px 2px 16px;

  border-radius: 4px;

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

  color: #444;
  font-family: Pretendard;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

/* 이벤트 타입 */
/* 신청완료 */
.req-calendar__event.type-complete {
  background: #FCE7D8;
}

/* 신청승인 */
.req-calendar__event.type-approve {
  background: #DDF1E2;
}

/* 분석완료 */
.req-calendar__event.type-finish {
  background: #E9E9E9;
  color: #8F8F8F;
}

/* 기타 */
.req-calendar__event.type-etc {
  border: 1px solid #E3E3E3;
  background: #FFF;
}

/* 이벤트 타입 dot */
.req-calendar__event::before {
  content: "";

  position: absolute;

  left: 4px;
  top: 50%;

  width: 8px;
  height: 8px;

  border-radius: 50%;

  transform: translateY(-50%);
}

.req-calendar__event.mode-analysis::before {
  background: #5F8DFF;
} 

.req-calendar__event.mode-autonomy::before {
  background: #FF5A5A;
}

/* 캘린더 좌측 영역 (테이블 + 예약 안내사항) */
.req-calendar__left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.req-calendar__left .req-calendar__notice {
  margin-top: 20px;
}

/* 예약현황 및 스티키 사이드바 */
.req-calendar-side {
  position: sticky;
  top: 120px;

  width: 360px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 20;
}

/* 사이드바 하단 선택 폼 영역 */
.req-calendar-side__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.req-side-form-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.req-side-label {
  width: 92px;
  flex-shrink: 0;
  color: #222;
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  display: flex;
  align-items: center;
}

.req-side-label .ui-form-required {
  color: #2594D3;
  margin-left: 3px;
}

.req-side-field {
  flex: 1;
  min-width: 0;
}

.req-side-field select {
  width: 100%;
  height: 44px;
  border-radius: 6px;
  padding: 0 12px;
  padding-right: 32px;
  border: 1px solid #E5E7EB;
  background: #FFF url('/images/layout/select-arrow.svg') no-repeat right 12px center / 10px;
  color: #222;
  font-family: Pretendard, sans-serif;
  font-size: 13px;
  font-weight: 400;
  outline: none;
  appearance: none;
  box-sizing: border-box;
  transition: border-color .2s;
}

.req-side-field select:focus {
  border-color: #2594D3;
}

.req-side-field .reserve-date-trigger {
  width: 100%;
  height: 44px;
  border-radius: 6px;
  padding: 0 12px;
  border: 1px solid #E5E7EB;
  background: #FFF;
  color: #222;
  font-family: Pretendard, sans-serif;
  font-size: 13px;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color .2s;
}

.req-side-field .reserve-date-trigger:hover,
.req-side-field .reserve-date-trigger.is-open {
  border-color: #2594D3;
}

.req-side-field .reserve-date-trigger__text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.req-side-field .ui-radio {
  height: 44px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 !important;
}

.req-side-field .ui-radio label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: #222;
  font-family: Pretendard, sans-serif;
  font-size: 13px;
  font-weight: 500;
}

.req-side-field .ui-radio-icon {
  width: 18px;
  height: 18px;
  margin-left: 0;
}

.req-side-field #s2-fib-notice {
  margin-top: 6px;
  font-size: 12px;
  line-height: 16px;
  color: #E53935;
}

.req-side-field.error select,
.req-side-field.error .reserve-date-trigger {
  border: 1px solid #D02A2A !important;
}

/* 데이트피커 팝업 레이어 */
.req-side-field .req-date-picker {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  z-index: 100;
  width: 350px;
  max-width: 90vw;
  background: #FFF;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
}

.req-side-field .req-date-picker__layer {
  padding: 20px;
}

.req-side-field .req-date-picker__hint {
  padding: 0 0 12px;
  margin-bottom: 8px;
  color: #666;
  font-family: Pretendard, sans-serif;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}

.req-side-field .req-date-picker__selected {
  display: flex;
  gap: 12px;
  padding: 10px 12px;
  background: #F7F8FA;
  border-radius: 8px;
  margin-bottom: 12px;
  border-top: 0;
}

.req-side-field .req-date-picker__selected-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.req-side-field .req-date-picker__label {
  font-size: 11px;
  color: #888;
  font-weight: 500;
}

.req-side-field .req-date-picker__date {
  font-size: 13px;
  color: #111;
  font-weight: 700;
}

.req-side-field .req-date-picker__time {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.req-side-field .req-date-picker__time-item {
  flex: 1;
}

.req-side-field .req-date-picker__submit {
  width: 100%;
  height: 42px;
  background: #1A2A4C;
  color: #FFF;
  border: none;
  border-radius: 6px;
  font-family: Pretendard, sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s;
}

.req-side-field .req-date-picker__submit:hover {
  background: #2594D3;
}

.eq-side {
  padding-bottom: 0;
}

.req-calendar-side__inner {
  position: static;
  display: flex;
  flex-direction: column;
  height: 256px;

  padding: 18px 16px;

  border-radius: 12px;
  background: #FFF;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.req-calendar-side__title {
  display: block;
  margin-bottom: 16px;

  color: #000;
  font-family: Pretendard;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 28px;
}

/* 리스트 */
.req-calendar-side__list {
  display: flex;
  flex-direction: column;
  gap: 4px;

  flex: 1;
  min-height: 0;
  overflow-y: auto;

  scrollbar-width: thin;
  scrollbar-color: rgba(37, 148, 211, 0.18) transparent;
}

.req-calendar-side__list::-webkit-scrollbar {
  width: 4px;
}

.req-calendar-side__list::-webkit-scrollbar-track {
  background: transparent;
}

.req-calendar-side__list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
  border-radius: 999px;

  transition:
    background .2s ease,
    width .2s ease;
}

.req-calendar-side__list::-webkit-scrollbar-thumb:hover {
  background: rgba(37, 148, 211, 0.3);
}

.req-calendar-side__list li {
  display: flex;
  align-items: center;
  gap: 8px;

  min-height: 32px;
  padding: 0 10px;

  border-radius: 6px;

  color: #000;
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  line-height: 20px;
}

.req-calendar-side__list li span {
  position: relative;

  padding-left: 16px;

  color: #333;
  font-weight: 600;
}

.req-calendar-side__list li span::before {
  content: "";

  position: absolute;
  left: 0;
  top: 50%;

  width: 8px;
  height: 8px;

  border-radius: 50%;

  transform: translateY(-50%);
}

.req-calendar-side__list li strong {
  color: #111;
  font-weight: 700;
}

.req-calendar-side__list li em {
  color: #666;
  font-style: normal;
}

/* 타입 */
.req-calendar-side__list li.type-analysis {
  background: #DDF1E2;
}

.req-calendar-side__list li.type-analysis span::before {
  background: #5F8DFF;
}

.req-calendar-side__list li.type-complete {
  background: #DDF1E2;
}

.req-calendar-side__list li.type-complete span::before {
  background: #5F8DFF;
}

.req-calendar-side__list li.type-autonomy {
  background: #FCE7D8;
}

.req-calendar-side__list li.type-autonomy span::before {
  background: #FF5A5A;
}

/* 안내 */
.req-calendar__notice {
  margin-top: 16px;
}

.req-calendar__notice ul {
  display: flex;
  flex-direction: column;
  margin-top: 4px;
}

.req-calendar__notice li {
  position: relative;

  padding-left: 10px;

  color: #333;
  font-family: Pretendard;
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
}

.req-calendar__notice li::before {
  content: "•";

  position: absolute;
  left: 0;
  top: 0;
}

@media (max-width:1440px) and (min-width:1201px){

  .req-calendar{
    margin-top:52px;
    padding:32px;
  }

  .req-calendar__body{
    gap:14px;
  }

  .req-calendar-side{
    width: 350px;
  }

  .req-calendar-side__inner{
    height:240px;
    padding:16px 14px;
  }

  .req-calendar__month strong{
    font-size:24px;
  }

  .req-calendar__legend-box{
    padding:0 12px;
    gap:10px;
  }

  .req-calendar__legend-item,
  .req-calendar__legend-badge{
    font-size:13px;
  }

  .req-calendar__table thead th{
    height:40px;
    font-size:14px;
  }

  .req-calendar__table tbody td{
    height:100px;
    padding:7px 5px;
  }

  .req-calendar__table .day{
    width:21px;
    height:21px;
    font-size:13px;
    margin-bottom:6px;
  }

  .req-calendar__events{
    max-height:64px;
  }

  .req-calendar__event{
    min-height:17px;
    padding:2px 5px 2px 15px;
    font-size:11px;
    line-height:15px;
  }

  .req-calendar__event::before{
    width:7px;
    height:7px;
  }

}

@media (max-width:1200px) and (min-width:1025px){

  .req-calendar{
    margin-top:48px;
    padding:28px;
    border-radius:14px;
  }

  .req-calendar__body{
    gap:12px;
  }

  .req-calendar-side{
    width: 330px;
  }

  .req-side-label{
    width: 86px;
    font-size: 13px;
  }

  .req-side-field .ui-radio{
    gap: 10px;
  }

  .req-side-field .ui-radio label{
    font-size: 12px;
  }

  .req-calendar-side__inner{
    height:230px;
    padding:14px 12px;
  }

  .req-calendar-side__title{
    margin-bottom:12px;
    font-size:16px;
    line-height:24px;
  }

  .req-calendar-side__list li{
    min-height:30px;
    padding:0 8px;
    gap:6px;
    font-size:13px;
  }

  .req-calendar-side__list li span{
    padding-left:13px;
  }

  .req-calendar-side__list li span::before{
    width:7px;
    height:7px;
  }

  .req-calendar__top{
    margin-bottom:14px;
  }

  .req-calendar__month{
    gap:10px;
  }

  .req-calendar__month strong{
    font-size:22px;
    line-height:26px;
  }

  .req-calendar__legend{
    gap:6px;
  }

  .req-calendar__legend-box{
    height:auto;
    min-height:28px;
    padding:6px 10px;
    gap:8px;
  }

  .req-calendar__legend-item,
  .req-calendar__legend-badge{
    font-size:12px;
    line-height:18px;
  }

  .req-calendar__legend-item i{
    width:8px;
    height:8px;
  }

  .req-calendar__legend-badge{
    padding-left:14px;
  }

  .req-calendar__legend-badge::before{
    width:10px;
    height:10px;
  }

  .req-calendar__table thead th{
    height:38px;
    font-size:13px;
  }

  .req-calendar__table tbody td{
    height:92px;
    padding:6px 4px;
  }

  .req-calendar__table .day{
    width:20px;
    height:20px;
    margin-bottom:5px;
    font-size:12px;
  }

  .req-calendar__events{
    max-height:58px;
    gap:2px;
  }

  .req-calendar__event{
    min-height:16px;
    padding:1px 4px 1px 13px;
    font-size:10px;
    line-height:14px;
  }

  .req-calendar__event::before{
    left:4px;
    width:6px;
    height:6px;
  }

  .req-calendar__notice{
    margin-top:12px;
  }

  .req-calendar__notice li{
    font-size:12px;
    line-height:17px;
  }

}

/* =========================================
   1024 ~ 769px
========================================= */
@media (max-width:1024px) and (min-width:769px){

  .req-calendar{
    margin-top:44px;
    padding:24px;
    border-radius:14px;
  }

  .req-calendar__body{
    flex-direction:column;
    gap:20px;
  }

  .req-calendar__table-wrap{
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }

  .req-calendar__table{
    min-width:760px;
  }

  .req-calendar-side{
    position:static;
    width:100%;
    padding-bottom:0;
  }

  .req-side-form-row{
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 12px;
  }

  .req-calendar-side__inner{
    height:auto;
    min-height:200px;
    padding:16px;
  }

  .req-calendar-side__title{
    margin-bottom:12px;
    font-size:16px;
    line-height:24px;
  }

  .req-calendar-side__list{
    max-height:180px;
  }

  .req-calendar-side__list li{
    min-height:30px;
    padding:6px 10px;
    font-size:13px;
  }

  .req-calendar__top{
    align-items:center;
    margin-bottom:14px;
  }

  .req-calendar__month strong{
    font-size:22px;
    line-height:26px;
  }

  .req-calendar__legend{
    gap:6px;
  }

  .req-calendar__legend-box{
    min-height:28px;
    height:auto;
    padding:6px 10px;
    gap:8px;
  }

  .req-calendar__legend-item,
  .req-calendar__legend-badge{
    font-size:12px;
    line-height:18px;
  }

  .req-calendar__table thead th{
    height:38px;
    font-size:13px;
  }

  .req-calendar__table tbody td{
    height:96px;
    padding:6px 5px;
  }

  .req-calendar__table .day{
    width:20px;
    height:20px;
    margin-bottom:5px;
    font-size:12px;
  }

  .req-calendar__events{
    max-height:62px;
  }

  .req-calendar__event{
    min-height:17px;
    padding:1px 5px 1px 14px;
    font-size:11px;
    line-height:15px;
  }

  .req-calendar__event::before{
    width:6px;
    height:6px;
  }

  .req-calendar__notice{
    margin-top:12px;
  }

  .req-calendar__notice li{
    font-size:12px;
    line-height:17px;
  }

}

@media (max-width:768px){

  .req-calendar{
    margin-top:32px;
    padding:20px;
  }

  .eq-req-calendar {
    width: 100%;
  }

  .req-calendar__body{
    flex-direction:column;
  }

  .req-calendar__table-wrap{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  .req-calendar__table{
    min-width:700px;
  }

  .req-calendar-side{
    width:100%;
    position:static;
    padding-bottom:0;
  }

  .req-side-form-row{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .req-side-label{
    width: 100%;
    font-size: 13px;
  }

  .req-side-field{
    width: 100%;
  }

  .req-side-field .req-date-picker{
    right: 0;
    left: 0;
    width: 100%;
  }

  .req-calendar-side__inner{
    height:auto;
    min-height:220px;
  }

  .req-calendar__top{
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
  }

  .req-calendar__legend-item,
  .req-calendar__legend-badge {
    font-size: 12px;
    line-height: 16px;
  }

  .req-calendar__month strong{
    font-size:20px;
    line-height:24px;
  }

  .req-calendar__legend{
    flex-wrap:wrap;
    gap:8px;
  }

  .req-calendar__legend-box{
    flex-wrap:wrap;
    height:auto;
    padding:10px 14px;
    gap: 8px;
  }

  .req-calendar-side__title{
    font-size:16px;
    line-height:24px;
  }

  .req-calendar-side__list li{
    min-height:auto;
    padding:10px;
    flex-wrap:wrap;
  }

}

/* sub01 : 인사말 ----------------------------------------------------------------------*/
.greeting {
  position: relative;
  height: 720px;
  overflow: hidden;
  color: #fff;
  padding: 120px 0;
}

.greeting-bg {
  position: absolute;
  inset: 0;

  background: url('/images/layout/greeting-bg.png') no-repeat right center;
  background-size: cover;

  will-change: transform; 
}

.greeting-text {
  position: relative;
  margin-left: 260px;
}

.greeting-text h2 {
  font-family: Pretendard;
  font-size: 48px;
  font-style: normal;
  font-weight: 700;
  line-height: 62px;
  text-transform: uppercase;

  margin-bottom: 32px;
}

.greeting-text span {
  color: #43BBFF;
}

.greeting-text p {
  color: #FFF;
  font-family: Pretendard;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px;

  opacity: 0.7;
  margin-bottom: 16px;
}

.overview-media {
  position: relative;
  background: #fff;
  padding: 120px 0 120px 0;
  text-align: center;

}

.overview-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.overview-sub {
  color: var(--Style, #2594D3);
  text-align: center;
  font-family: Pretendard;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 32px;

  margin-bottom: 20px;
}

.overview-title {
  color: #000;
  text-align: center;
  font-family: Pretendard;
  font-size: 48px;
  font-style: normal;
  font-weight: 800;
  line-height: 64px;
  text-transform: uppercase;

  margin-bottom: 48px;
}

.overview-btns {
  display: flex;
  justify-content: center;
  gap: 8px;

  margin-bottom: 48px;
}

.overview-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 16px 20px;

  border: 1px solid #ccc;
  border-radius: 4px;

  color: #333;
  font-family: Pretendard;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;

  text-decoration: none;

  transition: all 0.25s ease;
}

.overview-btn img {
  width: 24px;
  height: 24px;

  object-fit: cover;
}

.overview-btn:hover {
  background: #f1f4f7;
  transform: translateY(-2px); 
}

.overview-video {
  position: relative;
  max-width: 1370px;
  margin: 0 auto;

  height: 700px;      
  border-radius: 16px;
  overflow: hidden;
}

.overview-video::after {
  content: "";
  position: absolute;
  inset: 0;

  background: rgba(0,0,0,0.35); 
}

.video-thumb {
  position: absolute;   
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;   
}

.overview-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;

  transform: translate(-50%, -50%);

  width: 120px;
  height: 120px;

  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  border: 2px solid #fff;
  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 32px;
  text-decoration: none;

  transition: all 0.25s ease;
}

.overview-play-btn:hover {
  color: #fff;
  background: rgba(0,0,0,0.7);
  transform: translate(-50%, -50%) scale(1.02);
}

/* =========================================
   1440 ~ 1201px
========================================= */
@media (max-width:1440px) and (min-width:1201px){

  .greeting{
    height:680px;
    padding:110px 40px;
  }

  .greeting-text{
    margin-left:120px;
  }

  .greeting-text h2{
    font-size:44px;
    line-height:58px;
    margin-bottom:28px;
  }

  .greeting-text p{
    font-size:17px;
    line-height:29px;
  }

  .overview-media{
    padding:110px 40px;
  }

  .overview-inner{
    max-width:1200px;
  }

  .overview-sub{
    font-size:18px;
    line-height:28px;
    margin-bottom:16px;
  }

  .overview-title{
    font-size:44px;
    line-height:58px;
    margin-bottom:40px;
  }

  .overview-btns{
    margin-bottom:40px;
  }

  .overview-btn{
    padding:14px 18px;
    font-size:15px;
  }

  .overview-video{
    height:620px;
    border-radius:14px;
  }

  .overview-play-btn{
    width:100px;
    height:100px;
    font-size:28px;
  }

}

/* =========================================
   1200 ~ 1025px
========================================= */
@media (max-width:1200px) and (min-width:1025px){

  .greeting{
    height:600px;
    padding:90px 40px;
  }

  .greeting-text{
    margin-left:40px;
    max-width:720px;
  }

  .greeting-text h2{
    font-size:38px;
    line-height:52px;
    margin-bottom:24px;
  }

  .greeting-text p{
    font-size:15px;
    line-height:26px;
  }

  .overview-media{
    padding:90px 40px;
  }

  .overview-sub{
    font-size:17px;
    line-height:26px;
    margin-bottom:14px;
  }

  .overview-title{
    font-size:38px;
    line-height:52px;
    margin-bottom:36px;
  }

  .overview-btns{
    margin-bottom:36px;
  }

  .overview-btn{
    padding:14px 16px;
    font-size:15px;
    line-height:22px;
  }

  .overview-btn img{
    width:22px;
    height:22px;
  }

  .overview-video{
    height:500px;
    border-radius:14px;
  }

  .overview-play-btn{
    width:90px;
    height:90px;
    font-size:26px;
  }

}

/* =========================================
   1024 ~ 769px
========================================= */
@media (max-width:1024px) and (min-width:769px){

  .greeting{
    height:540px;
    padding:80px 30px;
  }

  .greeting-bg{
    background-position:center right;
  }

  .greeting-text{
    margin-left:0;
    max-width:620px;
  }

  .greeting-text h2{
    font-size:34px;
    line-height:46px;
    margin-bottom:22px;
  }

  .greeting-text p{
    font-size:14px;
    line-height:24px;
    word-break:keep-all;
  }

  .overview-media{
    padding:80px 30px;
  }

  .overview-sub{
    font-size:16px;
    line-height:24px;
    margin-bottom:12px;
  }

  .overview-title{
    font-size:34px;
    line-height:46px;
    margin-bottom:32px;
    word-break:keep-all;
  }

  .overview-btns{
    gap:6px;
    margin-bottom:32px;
  }

  .overview-btn{
    padding:12px 14px;
    font-size:14px;
    line-height:20px;
  }

  .overview-btn img{
    width:20px;
    height:20px;
  }

  .overview-video{
    height:420px;
    border-radius:12px;
  }

  .overview-play-btn{
    width:80px;
    height:80px;
    font-size:24px;
  }

}

@media (max-width:768px){

  .greeting{
    height:auto;
    min-height:520px;
    padding:80px 20px;

    background:#111;
  }

  .greeting-bg{
    opacity:.25;
    background-position:center right;
  }

  .greeting-text{
    margin-left:0;
    position:relative;
    z-index:2;
  }

  .greeting-text h2{
    font-size:30px;
    line-height:42px;
    margin-bottom:24px;

    word-break:keep-all;
  }

  .greeting-text p{
    font-size:15px;
    line-height:26px;

    word-break:keep-all;

    margin-bottom:20px;
  }

  .greeting-text br{
    display:none;
  }


  .overview-media{
    padding:80px 20px;
  }

  .overview-inner{
    width:100%;
  }

  .overview-sub{
    font-size:16px;
    line-height:24px;
    margin-bottom:12px;
  }

  .overview-title{
    font-size:28px;
    line-height:40px;
    margin-bottom:32px;

    word-break:keep-all;
  }

  .overview-title br{
    display:none;
  }

  .overview-btns{
    flex-direction:column;
    gap:12px;

    margin-bottom:32px;
  }

  .overview-btn{
    width:100%;
    min-height:48px;

    font-size:14px;
    line-height:20px;

    padding:14px 16px;
  }

  .overview-btn img{
    width:20px;
    height:20px;
  }

  .overview-video{
    width:100%;
    height:260px;
    border-radius:12px;
  }

  .overview-play-btn{
    width:72px;
    height:72px;

    font-size:22px;
  }

}

/* sub02 : 연혁 ----------------------------------------------------------------------*/
.history {
  padding-bottom: 80px;
  
}

.history-hero {
  width: calc(100% - 80px);
  max-width: 1700px;
  margin: 0 auto;
  background: #fff;
}

.hero-inner {
  height: 480px;
  border-radius: 24px;
  overflow: hidden;
  background: url('/images/layout/history-bg.jpg') center top / cover no-repeat;
}

.history-hero p {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 100%;      
  max-width: 1200px;  

  color: #fff;
  text-align: center;

  font-family: Pretendard;
  font-size: 32px;
  font-weight: 600;
  line-height: 52px;
}

.history-group {
   background: #fff;
}

.history-group.is-gray {
  background: #f5f5f5;
}

.history-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  gap: 190px;
  padding: 80px 0;
  
}

.history-intro {
  width: 320px;
}

.history-intro h3 {
  color: #1F1F1F;
  font-family: Pretendard;
  font-size: 52px;
  font-weight: 900;
  line-height: 100%;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}

.history-intro p {
  color: #606060;
  font-family: Pretendard;
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -0.02em;
}

.history-timeline {
  flex: 1;
}

.history-item {
  position: relative;
  padding-left: 240px; 
  display: flex;
  align-items: flex-start;
  gap: 32px;
  margin-bottom: 8px;
}

.history-left {
  position: absolute; 
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 32px;
}

.history-right {
  display: flex;
  align-items: flex-start; 
  gap: 20px;
  margin-left: 32px;
}

.year {
  width: 118px;
  color: #383838;
  font-family: "Wanted Sans";
  font-size: 44px;
  font-weight: 800;
  line-height: 44px;
  letter-spacing: -0.02em;
}

.history-year {
  transform: translateY(8px);
  transition: all 0.5s ease;
}

.history-year.active {
  transform: translateY(0);
}

.history-year.active .year {
  color: #2594D3;
}

.year.empty {
  visibility: hidden;
}

.line {
  width: 90px;
  height: 1px;
  background: #ccc;
}

.history-year.active .line {
  background: #2594D3;
}

.line.empty {
  visibility: hidden;
}

.month {
  color: #3C3C3C;
  font-family: "Wanted Sans";
  font-size: 18px;
  font-weight: 800;
  line-height: 32px;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}


.history-year.active .month {
  color: #2594D3;
}

.history-year.active .history-right span {
  color: #2594D3; 
}

.history-right p {
  margin: 0;
  color: #3C3C3C;
  font-family: Pretendard;
  font-size: 18px;
  font-weight: 400;
  line-height: 32px;
}

.history-year {
  margin-bottom: 48px;
  transition: all 0.3s ease;
}

.history-year:last-child {
  margin-bottom: 0;
}

.history-year.active {
  opacity: 1;
}

@media (max-width:1440px) and (min-width:1201px){

  .history{
    padding-bottom:70px;
  }

  .history-hero{
    width:calc(100% - 60px);
  }

  .hero-inner{
    height:440px;
    border-radius:22px;
  }

  .history-hero p{
    max-width:1100px;
    padding:0 40px;
    font-size:30px;
    line-height:48px;
  }

  .history-inner{
    padding:70px 40px;
    gap:120px;
  }

  .history-intro{
    width:280px;
  }

  .history-intro h3{
    font-size:48px;
  }

  .history-intro p{
    font-size:17px;
    line-height:27px;
  }

  .history-item{
    padding-left:210px;
    gap:24px;
  }

  .history-left{
    gap:24px;
  }

  .year{
    width:105px;
    font-size:40px;
    line-height:42px;
  }

  .line{
    width:70px;
  }

  .history-right{
    gap:16px;
    margin-left:24px;
  }

  .month{
    font-size:17px;
    line-height:30px;
  }

  .history-right p{
    font-size:17px;
    line-height:30px;
  }

  .history-year{
    margin-bottom:40px;
  }

}

@media (max-width:1200px) and (min-width:1025px){

  .history{
    padding-bottom:60px;
  }

  .history-hero{
    width:100%;
  }

  .hero-inner{
    height:360px;
    border-radius:20px;
  }

  .history-hero p{
    padding:0 40px;
    font-size:26px;
    line-height:42px;
  }

  .history-inner{
    padding:60px 30px;
    gap:60px;
  }

  .history-intro{
    width:210px;
  }

  .history-intro h3{
    font-size:38px;
    line-height:100%;
  }

  .history-intro p{
    font-size:15px;
    line-height:24px;
  }

  .history-item{
    padding-left:150px;
    gap:20px;
  }

  .history-left{
    gap:20px;
  }

  .year{
    width:80px;
    font-size:30px;
    line-height:36px;
  }

  .line{
    width:40px;
  }

  .history-right{
    gap:12px;
    margin-left:20px;
  }

  .month{
    font-size:15px;
    line-height:26px;
    min-width:38px;
  }

  .history-right p{
    font-size:15px;
    line-height:26px;
    word-break:keep-all;
  }

  .history-year{
    margin-bottom:36px;
  }

}

@media (max-width:1024px) and (min-width:769px){

  .history{
    padding-bottom:50px;
  }

  .history-hero{
    width:100%;
  }

  .hero-inner{
    height:320px;
    border-radius:18px;
  }

  .history-hero p{
    padding:0 30px;
    font-size:22px;
    line-height:36px;
    word-break:keep-all;
  }

  .history-inner{
    padding:50px 24px;
    gap:40px;
  }

  .history-intro{
    width:180px;
  }

  .history-intro h3{
    font-size:32px;
    line-height:1;
    margin-bottom:18px;
  }

  .history-intro p{
    font-size:14px;
    line-height:22px;
    word-break:keep-all;
  }

  .history-item{
    padding-left:125px;
    gap:16px;
  }

  .history-left{
    gap:14px;
  }

  .year{
    width:68px;
    font-size:26px;
    line-height:32px;
  }

  .line{
    width:30px;
  }

  .history-right{
    gap:10px;
    margin-left:16px;
  }

  .month{
    min-width:34px;
    font-size:14px;
    line-height:24px;
  }

  .history-right p{
    font-size:14px;
    line-height:24px;
    word-break:keep-all;
  }

  .history-year{
    margin-bottom:30px;
  }

}

@media (max-width:768px){

  .history{
    padding-bottom:40px;
  }

  .history-hero{
    padding:0 20px;
  }

  .hero-inner{
    height:240px;
    border-radius:16px;
  }

  .history-hero p{
    padding:0 24px;

    font-size:18px;
    line-height:30px;

    word-break:keep-all;
  }

  .history-hero p br{
    display:none;
  }

  .history-inner{
    display:block;

    padding:60px 20px;
  }

  .history-intro{
    width:100%;
    margin-bottom:40px;
  }

  .history-intro h3{
    font-size:34px;
    margin-bottom:12px;
  }

  .history-intro p{
    font-size:15px;
    line-height:24px;
  }

  .history-item{
    padding-left:0;
    display:block;
  }

  .history-left{
    position:static;

    display:flex;
    align-items:center;

    gap:16px;

    margin-bottom:8px;
  }

  .history-right{
    margin-left:0;
    gap:12px;
  }

  .year{
    width:auto;

    font-size:28px;
    line-height:32px;
  }

  .line{
    flex:1;
    width:auto;
  }

  .month{
    font-size:15px;
    line-height:24px;
    min-width:42px;
  }

  .history-right p{
    font-size:15px;
    line-height:24px;

    word-break:keep-all;
  }

  .history-year{
    margin-bottom:32px;
  }

}

/* sub03 : 오시는 길 ----------------------------------------------------------------------*/
.location {
  padding-bottom: 120px;
}

.location-wrap {
  width: calc(100% - 80px);
  max-width: 1700px;
  margin: 0 auto;

  display: flex;
  gap: 0;

  border-radius: 32px;
  overflow: hidden;
  background: #f2f2f2;
}

.location-map {
  position: relative;
  height: 832px;
  flex: 1;
}

.map {
  position: absolute;
  inset: 0;
  display: none;
}

.map.active {
  display: block;
}

.map iframe {
  width: 100%;
  height: 100%;

  border: 0;
  display: block;
}

.location-info {
  width: 560px;
  display: flex;
  flex-direction: column;
}

.location-item {
  padding: 76px 60px;
  background: #f5f5f5;
  cursor: pointer;

  transition: all 0.35s ease;
  position: relative;
  box-shadow: -12px 12px 30px rgba(0,0,0,0.12);
}

.location-item + .location-item {
  border-top: 1px solid #e5e5e5;
}

.location-item.active {
  background: #1f355e;
  color: #fff;
}

.location-item:not(.active):hover {
  background: #e7e7e7;
}

.location-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.location-head h3 {
  color: #000;
  font-family: Pretendard;
  font-size: 48px;
  font-style: normal;
  font-weight: 600;
  line-height: 56px;
  letter-spacing: -0.02em;
}

.location-item.active .location-head h3 {
  color: #fff;
}

.head-line {
  width: 100%;
  height: 1px;

  background: #000;
  opacity: 0.1;

  margin-top: 26px;
}

.location-item.active .head-line {
  background: #fff;
}

.map-links a {
  display: inline-block;
}

.map-links img {
  width: 40px;
  height: 40px;
}

.location-detail {
  list-style: none;
  padding: 0;
  margin-top: 26px;
}

.location-detail li {
  display: flex;
  align-items: flex-start;
  gap: 8px; 

  margin-bottom: 10px;
}

.location-detail img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 2px; 
}

.location-detail span {
  color: #000;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}

.location-item.active .location-detail span {
  color: #fff;
}

@media (max-width:1440px) and (min-width:1201px){

  .location{
    padding-bottom:100px;
  }

  .location-wrap{
    width:calc(100% - 60px);
    border-radius:28px;
  }

  .location-map{
    height:720px;
  }

  .location-info{
    width:480px;
  }

  .location-item{
    padding:60px 48px;
  }

  .location-head h3{
    font-size:42px;
    line-height:52px;
  }

  .head-line{
    margin-top:22px;
  }

  .map-links img{
    width:36px;
    height:36px;
  }

  .location-detail{
    margin-top:22px;
  }

  .location-detail li{
    gap:7px;
    margin-bottom:8px;
  }

  .location-detail img{
    width:22px;
    height:22px;
  }

  .location-detail span{
    font-size:15px;
    line-height:23px;
  }

}

@media (max-width:1200px) and (min-width:1025px){

  .location{
    padding:0 30px 70px;
  }

  .location-wrap{
    width:100%;
    border-radius:24px;
  }

  .location-map{
    height:400px !important;
    min-height:400px;
  }

  .location-info{
    width:100%;
  }

  .location-item{
    padding:44px 36px;
  }

  .location-head h3{
    font-size:34px;
    line-height:42px;
  }

  .head-line{
    margin-top:20px;
  }

  .map-links{
    display:flex;
    gap:8px;
  }

  .map-links img{
    width:36px;
    height:36px;
  }

  .location-detail{
    margin-top:20px;
  }

  .location-detail li{
    gap:8px;
    margin-bottom:9px;
  }

  .location-detail img{
    width:22px;
    height:22px;
  }

  .location-detail span{
    font-size:15px;
    line-height:23px;
    word-break:keep-all;
  }

}

@media (max-width:1024px) and (min-width:769px){

  .location{
    padding:0 24px 60px;
  }

  .location-wrap{
    width:100%;
    border-radius:20px;
  }

  .location-map{
    height:360px !important;
    min-height:360px;
  }

  .location-item{
    padding:36px 28px;
    box-shadow:none;
  }

  .location-head{
    gap:10px;
  }

  .location-head h3{
    font-size:30px;
    line-height:38px;
  }

  .head-line{
    margin-top:18px;
  }

  .map-links{
    display:flex;
    gap:6px;
  }

  .map-links img{
    width:34px;
    height:34px;
  }

  .location-detail{
    margin-top:18px;
  }

  .location-detail li{
    gap:8px;
    margin-bottom:8px;
  }

  .location-detail img{
    width:20px;
    height:20px;
  }

  .location-detail span{
    font-size:14px;
    line-height:22px;
    word-break:keep-all;
  }

}

@media (max-width:768px){

  .location{
    padding:0 20px 60px;
  }

  .location-wrap{
    border-radius:20px;
    overflow:hidden;
  }

  /* 지도 */
  .location-map{
    height:clamp(260px, 65vw, 320px);
    min-height:260px;
    order:1;
  }

  /* 지점정보 */
  .location-info{
    width:100%;
    order:2;
  }

  .location-item{
    padding:28px 20px;
    box-shadow:none;
  }

  .location-head{
    gap:12px;
  }

  .location-head h3{
    font-size:28px;
    line-height:34px;
    word-break:keep-all;
  }

  .head-line{
    margin-top:16px;
  }

  .map-links{
    display:flex;
    gap:8px;
    flex-shrink:0;
  }

  .map-links img{
    width:32px;
    height:32px;
  }

  .location-detail{
    margin-top:18px;
  }

  .location-detail li{
    gap:10px;
    margin-bottom:12px;
  }

  .location-detail img{
    width:20px;
    height:20px;
    margin-top:2px;
  }

  .location-detail span{
    font-size:14px;
    line-height:22px;
    word-break:keep-all;
    overflow-wrap:anywhere;
  }

}

/* sub04 sub05 : 사업영역 / 분석 솔루션 -----------------------------------------------------------------*/
.business {
  padding-bottom: 80px;
}

.b-container {
  width: calc(100% - 80px);
  max-width: 1840px;
  margin: 0 auto;
}

.biz-section {
  margin-bottom: 120px;
}

.biz-visual {
  border-radius: 40px;
  overflow: hidden;
}

.biz-visual img {
  width: 100%;
  height: 630px;
  object-fit: cover;
  display: block;
}

.biz-visual,
.biz-content {
  opacity: 0;
  transform: translateY(80px);
}

.biz-visual.show {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.8s ease;
}

.biz-content.show {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.8s ease;
}

.biz-content {
  position: relative;
  margin: -520px auto 0;
  padding: 0 56px;
  max-width: 1200px;
}

.biz-header {
  color: #fff;
  margin-bottom: 100px;
}

.biz-header h3 {
  font-family: Pretendard;
  font-size: 48px;
  font-style: normal;
  font-weight: 600;
  line-height: 64px;
  letter-spacing: -0.02em;

  margin-bottom: 16px;
}

.biz-header p {
  color: #FFF;
  font-family: Pretendard;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

.biz-card {
  position: relative;
  z-index: 2;
  margin-bottom: 40px;
}

.biz-card img {
  width: 100%;
  max-width: 1200px;
  border-radius: 24px;
  display: block;
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.biz-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.biz-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
}

.tag {
  display: inline-block;
  flex-shrink: 0;

  padding: 6px 10px;

  background: #2594D3;
  border-radius: 999px;

  color: #FFF;
  font-family: "Wanted Sans";
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
}

.biz-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
}

.biz-text p {
  display: block;
  margin: 0;
}

.biz-text .tit {
  color: #000;
  font-family: Pretendard;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 32px;

  margin-bottom: 8px;
}

.biz-text .desc {
  color: #727272;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

/* =========================================
   1440 ~ 1201px
========================================= */
@media (max-width:1440px) and (min-width:1201px){

  .business{
    padding-bottom:70px;
  }

  .b-container{
    width:calc(100% - 60px);
  }

  .biz-section{
    margin-bottom:100px;
  }

  .biz-visual{
    border-radius:32px;
  }

  .biz-visual img{
    height:580px;
  }

  .biz-content{
    max-width:1100px;
    padding:0 40px;
    margin:-470px auto 0;
  }

  .biz-header{
    margin-bottom:80px;
  }

  .biz-header h3{
    font-size:44px;
    line-height:58px;
  }

  .biz-header p{
    font-size:17px;
    line-height:27px;
  }

  .biz-card img{
    border-radius:20px;
  }

  .biz-list{
    gap:24px;
  }

  .biz-item{
    gap:16px;
  }

  .tag{
    font-size:12px;
    line-height:18px;
    padding:5px 9px;
  }

  .biz-text .tit{
    font-size:22px;
    line-height:30px;
  }

  .biz-text .desc{
    font-size:15px;
    line-height:23px;
  }

}

/* =========================================
   1200 ~ 1025px
========================================= */
@media (max-width:1200px) and (min-width:1025px){

  .business{
    padding:0 30px 60px;
  }

  .b-container{
    width:100%;
    max-width:100%;
  }

  .biz-section{
    margin-bottom:90px;
  }

  .biz-visual{
    border-radius:26px;
  }

  .biz-visual img{
    height:500px;
  }

  .biz-content{
    max-width:100%;
    padding:0 32px;
    margin:-390px auto 0;
  }

  .biz-header{
    margin-bottom:70px;
  }

  .biz-header h3{
    font-size:38px;
    line-height:50px;
  }

  .biz-header p{
    font-size:15px;
    line-height:24px;
    word-break:keep-all;
  }

  .biz-card{
    margin-bottom:32px;
  }

  .biz-card img{
    border-radius:18px;
  }

  .biz-list{
    gap:20px;
  }

  .biz-item{
    gap:12px;
  }

  .tag{
    font-size:12px;
    line-height:18px;
    padding:5px 8px;
  }

  .biz-text .tit{
    font-size:20px;
    line-height:28px;
  }

  .biz-text .desc{
    font-size:14px;
    line-height:22px;
    word-break:keep-all;
  }

}

/* =========================================
   1024 ~ 769px
========================================= */
@media (max-width:1024px) and (min-width:769px){

  .business{
    padding:0 24px 50px;
  }

  .b-container{
    width:100%;
    max-width:100%;
  }

  .biz-section{
    margin-bottom:80px;
  }

  .biz-visual{
    border-radius:22px;
  }

  .biz-visual img{
    height:420px;
  }

  .biz-content{
    max-width:100%;
    padding:0 24px;
    margin:-320px auto 0;
  }

  .biz-header{
    margin-bottom:56px;
  }

  .biz-header h3{
    font-size:32px;
    line-height:44px;
    margin-bottom:12px;
  }

  .biz-header p{
    font-size:14px;
    line-height:23px;
    word-break:keep-all;
  }

  .biz-header br{
    display:none;
  }

  .biz-card{
    margin-bottom:28px;
  }

  .biz-card img{
    border-radius:16px;
  }

  .biz-list{
    gap:18px;
  }

  .biz-item{
    gap:10px;
  }

  .tag{
    font-size:11px;
    line-height:16px;
    padding:4px 8px;
  }

  .biz-text{
    gap:2px;
  }

  .biz-text .tit{
    font-size:18px;
    line-height:26px;
    margin-bottom:4px;
  }

  .biz-text .desc{
    font-size:13px;
    line-height:20px;
    word-break:keep-all;
  }

}

@media (max-width:768px){

  .business{
    padding:0 20px 40px;
  }

  .b-container{
    max-width:100%;
  }

  .biz-section{
    margin-bottom:80px;
  }

  .biz-visual{
    border-radius:20px;
  }

  .biz-visual img{
    height:280px;
  }

  .biz-content{
    position:relative;
    z-index:2;

    max-width:100%;
    padding:0 12px;

    margin:-240px auto 0;
  }

  .biz-header{
    margin-bottom:32px;
    margin-left: 8px;
  }

  .biz-header h3{
    font-size:24px;
    line-height:1.4;
    margin-bottom:12px;

    word-break:keep-all;
  }

  .biz-header p{
    font-size:14px;
    line-height:20px;

    word-break:keep-all;
  }

  .biz-header br{
    display:none;
  }

  .biz-card{
    margin-bottom:24px;
  }

  .biz-card img{
    border-radius:16px;
    box-shadow:0 12px 30px rgba(0,0,0,.15);
  }

  .biz-list{
    grid-template-columns:1fr;
    gap:20px;
  }

  .biz-item{
    gap:12px;
  }

  .tag{
    font-size:11px;
    line-height:16px;
    padding:5px 8px;
  }

  .biz-text .tit{
    font-size:16px;
    line-height:24px;
    margin-bottom:4px;
  }

  .biz-text .desc{
    font-size:13px;
    line-height:20px;

    word-break:keep-all;
  }
}

/* sub06 : 분석장비소개----------------------------------------------------------------------*/
.eq-intro {
    padding-bottom: 80px;
}

.eq-intro__inner {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.eq-intro__section + .eq-intro__section {
  margin-top: 140px;
}

.eq-intro .notice-top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 54px;
}

.eq-intro .notice-total {
  color: #111;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 1;
}

.eq-intro .notice-total-num {
  color: #2594D3;
  font-weight: 700;
}

.eq-intro__category {
  margin-bottom: 32px;
  text-align: center;
}

.eq-intro__category h3 {
  color: #000;
  font-family: Pretendard;
  font-size: 40px;
  font-style: normal;
  font-weight: 800;
  line-height: 56px; 
  letter-spacing: -0.02em;
}

.eq-intro__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 64px;
}

.eq-intro__card {
  display: block;
}

.eq-intro__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  border: 1px solid #E9E9E9;
  background: #FFF;
  overflow: hidden;

  transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}

.eq-intro__thumb img {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: contain;
}

.eq-intro__card:hover .eq-intro__thumb {
  border-color: #111;
  transform: translateY(-6px);

  box-shadow:
    0 18px 40px rgba(0,0,0,0.08);
}

.eq-intro__info {
  margin-top: 16px;
  text-align: center;
}

.eq-intro__type {
  color: var(--Style, #2594D3);
  text-align: center;
  font-family: "Wanted Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
}

.eq-intro__name {
  color: #000;
  text-align: center;
  font-family: "Wanted Sans";
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: 40px;
  letter-spacing: -0.02em;
}

@media (max-width:1440px) and (min-width:1201px){

  .eq-intro{
    padding-bottom:70px;
  }

  .eq-intro__inner{
    max-width:1200px;
  }

  .eq-intro__section + .eq-intro__section{
    margin-top:120px;
  }

  .eq-intro .notice-top{
    margin-bottom:46px;
  }

  .eq-intro__category{
    margin-bottom:28px;
  }

  .eq-intro__category h3{
    font-size:36px;
    line-height:50px;
  }

  .eq-intro__grid{
    column-gap:20px;
    row-gap:52px;
  }

  .eq-intro__thumb{
    border-radius:14px;
  }

  .eq-intro__info{
    margin-top:14px;
  }

  .eq-intro__type{
    font-size:17px;
    line-height:26px;
  }

  .eq-intro__name{
    font-size:26px;
    line-height:36px;
  }

}

@media (max-width:1200px) and (min-width:1025px){

  .eq-intro{
    padding:0 30px 60px;
  }

  .eq-intro__inner{
    max-width:100%;
  }

  .eq-intro__section + .eq-intro__section{
    margin-top:90px;
  }

  .eq-intro .notice-top{
    margin-bottom:40px;
  }

  .eq-intro__category{
    margin-bottom:24px;
  }

  .eq-intro__category h3{
    font-size:32px;
    line-height:44px;
  }

  .eq-intro__grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    column-gap:20px;
    row-gap:40px;
  }

  .eq-intro__thumb{
    border-radius:14px;
  }

  .eq-intro__info{
    margin-top:12px;
  }

  .eq-intro__type{
    font-size:15px;
    line-height:22px;
  }

  .eq-intro__name{
    font-size:22px;
    line-height:32px;
  }

}

@media (max-width:1024px) and (min-width:769px){

  .eq-intro{
    padding:0 24px 50px;
  }

  .eq-intro__section + .eq-intro__section{
    margin-top:80px;
  }

  .eq-intro .notice-top{
    margin-bottom:32px;
  }

  .eq-intro .notice-total{
    font-size:14px;
  }

  .eq-intro__category{
    margin-bottom:20px;
  }

  .eq-intro__category h3{
    font-size:30px;
    line-height:40px;
  }

  .eq-intro__grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    column-gap:16px;
    row-gap:32px;
  }

  .eq-intro__thumb{
    border-radius:12px;
  }

  .eq-intro__info{
    margin-top:10px;
  }

  .eq-intro__type{
    font-size:14px;
    line-height:20px;
  }

  .eq-intro__name{
    font-size:20px;
    line-height:28px;
    word-break:keep-all;
  }

}

@media (max-width:768px){

  .eq-intro{
    padding:0 20px 40px;
  }

  .eq-intro__section + .eq-intro__section{
    margin-top:80px;
  }

  .eq-intro .notice-top{
    margin-bottom:28px;
  }

  .eq-intro .notice-total{
    font-size:14px;
  }

  .eq-intro__category{
    margin-bottom:20px;
  }

  .eq-intro__category h3{
    font-size:28px;
    line-height:38px;
  }

  .eq-intro__grid{
    grid-template-columns:1fr;
    row-gap:32px;
    column-gap:0;
  }

  .eq-intro__thumb{
    border-radius:12px;
  }

  .eq-intro__info{
    margin-top:12px;
  }

  .eq-intro__type{
    font-size:14px;
    line-height:20px;
  }

  .eq-intro__name{
    font-size:22px;
    line-height:30px;
  }

  .eq-intro__card:hover .eq-intro__thumb{
    transform:none;
    box-shadow:none;
  }

}

/* sub07 : 분석 절차 안내 ----------------------------------------------------------------------*/
.process-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.process-hero .hero-inner {
  text-align: center;
  color: #fff;
}

.process-hero .hero-inner {
  background: url('/images/layout/process-bg.jpg') center top / cover no-repeat;
}

.process-section {
  padding: 80px 0;
}

.process-section--gray {
  background: #EFEFEF;
}

.process-row {
  display: flex;
  gap: 260px;
  align-items: flex-start;
}

.process-side {
  width: 240px;
  flex-shrink: 0;
}

.process-section-title {
  color: #000;
  font-family: Pretendard;
  font-size: 48px;
  font-style: normal;
  font-weight: 800;
  line-height: 56px;
  letter-spacing: -0.02em;
}

.process-main {
  flex: 1;
}

.process-step-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.process-step-item {
  display: flex;
  border-radius: 12px;
  background: #fff;
  border: 4px solid #E5E5E5;
  transition: all 0.3s;
}

.process-step-item.is-active {
  background: #fff;
  border: 4px solid #2594D3;
}

.process-step-left {
  width: 154px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;

  background: #F3F3F3;
  border-radius: 10px 0 0 10px;
}

.process-step-item.is-active .process-step-left {
  background: #D3EAF6;
}

.process-step-num {
  display: block;

  margin-top: 4px;

  color: #333;
  text-align: center;
  font-family: "Wanted Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
}

.process-step-content {
  flex: 1;
  padding: 40px;
}

.process-step-item {
  position: relative;
}

.process-step-item::after {
  content: "";
  position: absolute;
  z-index: 2;

  left: 57px;  
  bottom: -25px;

  width: 40px;
  height: 40px;

  background: url('/images/layout/step-arrow.svg') no-repeat center / contain;

   filter: drop-shadow(0 4px 4px rgba(0,0,0,0.15));
}

.process-step-item:last-child::after {
  display: none;
}

.process-step-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.process-step-title,
.process-step-content h4 {
  color: #000;
  font-family: Pretendard;
  font-size: 26px;
  font-style: normal;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: -0.02em;
}

.process-step-phone {
  color: var(--Style, #2594D3);
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 32px;

  margin-left: 16px;
}

.process-step-desc {
  color: #5B5B5B;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;

  margin-top: 10px;
}

.process-step-meta {
  width: 460px;
  padding: 2px 16px;
  color: #5B5B5B;
  text-align: center;
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;

  background: #F3F3F3;
  border-radius: 4px;

  margin-top: 14px;
}

.process-step-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;

  margin-top: 14px;

  color: #D02A2A;
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}

.process-step-warning img {
  width: 20px; 
  height: 20px;
  flex-shrink: 0;
}

.process-step-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto;
  z-index: 2;
}

.process-step-item:nth-child(1) .process-step-icon {
  background: url('/images/layout/process-step1.svg') no-repeat center / contain;
}
.process-step-item:nth-child(2) .process-step-icon {
  background: url('/images/layout/process-step2.svg') no-repeat center / contain;
}
.process-step-item:nth-child(3) .process-step-icon {
  background: url('/images/layout/process-step3.svg') no-repeat center / contain;
}
.process-step-item:nth-child(4) .process-step-icon {
  background: url('/images/layout/process-step4.svg') no-repeat center / contain;
}
.process-step-item:nth-child(5) .process-step-icon {
  background: url('/images/layout/process-step5.svg') no-repeat center / contain;
}
.process-step-item:nth-child(6) .process-step-icon {
  background: url('/images/layout/process-step6.svg') no-repeat center / contain;
}
.process-step-item:nth-child(7) .process-step-icon {
  background: url('/images/layout/process-step7.svg') no-repeat center / contain;
}

.process-step-btn {
  border: 1px solid #ccc;
  width: 120px;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 13px;
  color: #333;
  font-family: Pretendard;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; 
  text-align: center;

  text-decoration: none;
  transition: all 0.25s ease; /* 중요 */
}

.process-step-btn:hover {
  border-color: #2594D3;
  color: #2594D3;
  background: #fff;

  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.08);
}

.process-step-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

@media (max-width:1440px) and (min-width:1201px){

  .process-container{
    padding:0 40px;
  }

  .process-section{
    padding:70px 0;
  }

  .process-row{
    gap:140px;
  }

  .process-side{
    width:220px;
  }

  .process-section-title{
    font-size:44px;
    line-height:52px;
  }

  .process-step-left{
    width:140px;
  }

  .process-step-content{
    padding:32px;
  }

  .process-step-title,
  .process-step-content h4{
    font-size:24px;
    line-height:30px;
  }

  .process-step-phone{
    font-size:15px;
  }

  .process-step-desc{
    font-size:15px;
    line-height:23px;
  }

  .process-step-meta{
    width:100%;
    font-size:13px;
  }

}

@media (max-width:1200px) and (min-width:1025px){

  .process-container{
    padding:0 30px;
  }

  .process-section{
    padding:70px 0;
  }

  .process-row{
    gap:60px;
  }

  .process-side{
    width:170px;
  }

  .process-section-title{
    font-size:34px;
    line-height:44px;
  }

  .process-step-item{
    border-width:3px;
  }

  .process-step-left{
    width:130px;
  }

  .process-step-content{
    padding:26px;
  }

  .process-step-icon{
    width:56px;
    height:56px;
  }

  .process-step-num{
    font-size:15px;
    line-height:22px;
  }

  .process-step-title,
  .process-step-content h4{
    font-size:20px;
    line-height:28px;
  }

  .process-step-phone{
    font-size:14px;
    line-height:26px;
    margin-left:10px;
  }

  .process-step-desc{
    font-size:14px;
    line-height:22px;
    word-break:keep-all;
  }

  .process-step-meta{
    width:100%;
    font-size:12px;
    line-height:22px;
  }

  .process-step-warning{
    font-size:13px;
    line-height:19px;
  }

  .process-step-btn{
    width:110px;
    font-size:12px;
  }

}

@media (max-width:1200px){

  .process-container{
    padding:0 20px;
  }

  .process-row{
    gap:80px;
  }

  .process-side{
    width:180px;
  }

  .process-section-title{
    font-size:38px;
    line-height:46px;
  }

  .process-step-content{
    padding:30px;
  }

  .process-step-title,
  .process-step-content h4{
    font-size:22px;
    line-height:30px;
  }

  .process-step-meta{
    width:100%;
  }

}

@media (max-width:1024px) and (min-width:769px){

  .process-container{
    padding:0 24px;
  }

  .process-section{
    padding:60px 0;
  }

  .process-row{
    gap:36px;
  }

  .process-side{
    width:150px;
  }

  .process-section-title{
    font-size:30px;
    line-height:40px;
    word-break:keep-all;
  }

  .process-step-list{
    gap:8px;
  }

  .process-step-item{
    border-width:3px;
    border-radius:10px;
  }

  .process-step-left{
    width:110px;
    border-radius:7px 0 0 7px;
  }

  .process-step-content{
    padding:22px;
    min-width:0;
  }

  .process-step-icon{
    width:50px;
    height:50px;
  }

  .process-step-num{
    font-size:14px;
    line-height:20px;
  }

  .process-step-title,
  .process-step-content h4{
    font-size:18px;
    line-height:26px;
    word-break:keep-all;
  }

  .process-step-header{
    gap:8px;
  }

  .process-step-phone{
    font-size:13px;
    line-height:22px;
    margin-left:8px;
    white-space:nowrap;
  }

  .process-step-desc{
    font-size:13px;
    line-height:20px;
    word-break:keep-all;
  }

  .process-step-meta{
    width:100%;
    margin-top:10px;
    padding:4px 10px;
    font-size:11px;
    line-height:20px;
    word-break:keep-all;
  }

  .process-step-warning{
    gap:6px;
    margin-top:10px;
    font-size:12px;
    line-height:18px;
  }

  .process-step-warning img{
    width:18px;
    height:18px;
  }

  .process-step-btn{
    width:100px;
    padding:6px 8px;
    font-size:11px;
    line-height:18px;
  }

  .process-step-item::after{
    left:40px;
    bottom:-22px;
    width:34px;
    height:34px;
  }

}

@media (max-width:768px){

  .process-container{
    padding:0 20px;
  }

  .process-section{
    padding:60px 0;
  }

  .process-row{
    display:block;
  }

  .process-side{
    width:100%;
    margin-bottom:24px;
  }

  .process-section-title{
    font-size:28px;
    line-height:38px;
  }

  .process-step-item{
    flex-direction:column;
    overflow:visible;
  }

  .process-step-left{
    width:100%;
    padding:20px;

    border-radius:8px 8px 0 0;
  }

  .process-step-content{
    padding:20px;
  }

  .process-step-icon{
    width:48px;
    height:48px;
  }

  .process-step-num{
    font-size:14px;
    line-height:20px;
  }

  .process-step-header{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }

  .process-step-title,
  .process-step-content h4{
    font-size:20px;
    line-height:28px;

    word-break:keep-all;
  }

  .process-step-phone{
    margin-left:0;

    font-size:14px;
    line-height:20px;
  }

  .process-step-desc{
    font-size:14px;
    line-height:22px;

    word-break:keep-all;
  }

  .process-step-desc br{
    display:none;
  }

  .process-step-meta{
    width:100%;

    font-size:13px;
    line-height:20px;

    padding:10px 12px;

    text-align:left;
  }

  .process-step-warning{
    font-size:13px;
    line-height:18px;
  }

  .process-step-warning img{
    width:18px;
    height:18px;
  }

  .process-step-btn{
    width:100%;
    margin-top:12px;
  }

  .process-step-item::after{

    left:50%;
    bottom:-22px;

    width:32px;
    height:32px;

    transform:translateX(-50%);
  }

}

/* sub08 : 시료발송 안내----------------------------------------------------------------------*/
.guide-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.guide-hero .hero-inner {
  background: url('/images/layout/guide-bg.jpg') center top / cover no-repeat;
}

.guide-section {
  padding: 80px 0;
}

.guide-section--gray {
  background: #f5f5f5;
}

.guide-row {
  display: flex;
  gap: 260px;
  align-items: flex-start;
}

.guide-side {
  width: 240px;
  flex-shrink: 0;
}

.guide-title {
  color: #000;
  font-family: Pretendard;
  font-size: 40px;
  font-style: normal;
  font-weight: 800;
  line-height: 52px; 
  letter-spacing: -0.02em;
}

.guide-main {
  flex: 1;
}

.guide-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.guide-item {
  display: flex;
  align-items: center;
  gap: 30px;

  background: #F5F5F5;
  border-radius: 12px;
  padding: 16px;

  position: relative;
}

.guide-section--gray .guide-item {
  background: #fff;
  border: 2px solid #e4e4e4;
}

.guide-item-icon {
  width: 122px;
  height: 122px;
  flex-shrink: 0;
  border-radius: 6px;
}

.guide-item-content {
  flex: 1;
}

.guide-item-text {
  color: #000;
  font-family: Pretendard;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px; 
  letter-spacing: -0.02em;
}

.guide-item-btn {
  margin-right: 12px;
  border: 1px solid #ccc;
  background: #fff;
  padding: 8px 14px;
  border-radius: 6px;

  font-size: 13px;
  color: #333;
  font-family: Pretendard;
  font-weight: 500;
  line-height: 20px;

  text-align: center;
  text-decoration: none;

  flex-shrink: 0;

  transition: all 0.25s ease;
}

.guide-item-btn:hover {
  border-color: #2594D3;
  color: #2594D3;
  background: #fff;

  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.08);
}

.guide-item-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.guide-icon--doc {
  background: url('/images/layout/guide-doc.svg') no-repeat center / contain;
}

.guide-icon--box {
  background: url('/images/layout/guide-box.svg') no-repeat center / contain;
}

.guide-icon--location {
  background: url('/images/layout/guide-location.svg') no-repeat center / contain;
}

.guide-icon--paper {
  background: url('/images/layout/guide-paper.svg') no-repeat center / contain;
}

.guide-icon--tax {
  background: url('/images/layout/guide-tax.svg') no-repeat center / contain;
}

.guide-bank,
.guide-address {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.guide-bank img,
.guide-address img {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.guide-bank-text,
.guide-address-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.guide-bank-title,
.guide-address-main {
  color: #000;
  font-family: Pretendard;
  font-size: 20px;
  font-weight: 700;
  line-height: 32px;
}

.guide-bank-list {
  color: #000;
  font-family: Pretendard;
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  margin-bottom: 24px;
}

.guide-address-sub {
  color: #000;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px; 
}

.guide-example {
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid #2594D3;
  max-width: 900px;
  margin-top: 24px;
  background: #2594D3;
}

.guide-example-head {
  background: #2594D3;
  color: #fff;
  text-align: center;
  font-family: Pretendard;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 32px;
  padding: 8px 0;
}

.guide-example-body {
  background: #f5f5f5;
  padding: 24px;
}

.guide-example img {
  max-width: 700px;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto; 
}

@media (max-width:1440px) and (min-width:1201px){

  .guide-container{
    max-width: 1320px;
  }

  .guide-section{
    padding: 70px 0;
  }

  .guide-row{
    gap: 120px;
  }

  .guide-side{
    width: 220px;
  }

  .guide-title{
    font-size: 36px;
    line-height: 48px;
  }

  .guide-item{
    gap: 24px;
    padding: 14px;
  }

  .guide-item-icon{
    width: 110px;
    height: 110px;
  }

  .guide-item-text{
    font-size: 17px;
    line-height: 26px;
  }

  .guide-bank-title,
  .guide-address-main{
    font-size: 18px;
    line-height: 28px;
  }

  .guide-bank-list{
    font-size: 16px;
    line-height: 26px;
  }

  .guide-address-sub{
    font-size: 15px;
    line-height: 22px;
  }

  .guide-example{
    max-width: 820px;
  }

}

@media (max-width:1200px) and (min-width:1025px){

  .guide-container{
    padding: 0 30px;
  }

  .guide-section{
    padding: 65px 0;
  }

  .guide-row{
    gap: 60px;
  }

  .guide-side{
    width: 180px;
  }

  .guide-title{
    font-size: 34px;
    line-height: 44px;
  }

  .guide-item{
    gap: 20px;
    padding: 14px;
  }

  .guide-item-icon{
    width: 96px;
    height: 96px;
  }

  .guide-item-text{
    font-size: 16px;
    line-height: 25px;
  }

  .guide-item-btn{
    margin-right: 4px;
    padding: 7px 12px;
    font-size: 12px;
    line-height: 18px;
  }

  .guide-bank img,
  .guide-address img{
    width: 28px;
    height: 28px;
  }

  .guide-bank-title,
  .guide-address-main{
    font-size: 18px;
    line-height: 28px;
  }

  .guide-bank-list{
    font-size: 16px;
    line-height: 25px;
    margin-bottom: 20px;
  }

  .guide-address-sub{
    font-size: 14px;
    line-height: 22px;
  }

  .guide-example{
    max-width: 100%;
    margin-top: 20px;
  }

  .guide-example-head{
    font-size: 16px;
    line-height: 28px;
  }

  .guide-example-body{
    padding: 20px;
  }

}

@media (max-width:1024px) and (min-width:769px){

  .guide-container{
    padding: 0 24px;
  }

  .guide-section{
    padding: 60px 0;
  }

  .guide-row{
    gap: 36px;
  }

  .guide-side{
    width: 150px;
  }

  .guide-title{
    font-size: 30px;
    line-height: 40px;
  }

  .guide-list{
    gap: 8px;
  }

  .guide-item{
    gap: 16px;
    padding: 12px;
    border-radius: 10px;
  }

  .guide-item-icon{
    width: 80px;
    height: 80px;
  }

  .guide-item-text{
    font-size: 14px;
    line-height: 22px;
    word-break: keep-all;
  }

  .guide-item-btn{
    margin-right: 0;
    padding: 6px 10px;
    font-size: 11px;
    line-height: 17px;
  }

  .guide-bank,
  .guide-address{
    gap: 6px;
  }

  .guide-bank img,
  .guide-address img{
    width: 26px;
    height: 26px;
  }

  .guide-bank-text,
  .guide-address-text{
    gap: 6px;
  }

  .guide-bank-title,
  .guide-address-main{
    font-size: 16px;
    line-height: 24px;
  }

  .guide-bank-list{
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 16px;
  }

  .guide-address-sub{
    font-size: 13px;
    line-height: 20px;
  }

  .guide-example{
    max-width: 100%;
    margin-top: 18px;
  }

  .guide-example-head{
    font-size: 14px;
    line-height: 22px;
    padding: 6px 8px;
  }

  .guide-example-body{
    padding: 14px;
  }

}

@media (max-width:768px){

  .guide-container{
    padding: 0 20px;
  }

  .guide-section{
    padding: 60px 0;
  }

  .guide-row{
    display: block;
  }

  .guide-side{
    width: 100%;
    margin-bottom: 24px;
  }

  .guide-title{
    font-size: 28px;
    line-height: 38px;
  }

  .guide-item{
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
  }

  .guide-item-icon{
    width: 56px;
    height: 56px;
  }

  .guide-item-content{
    width: 100%;
    min-width: 0;
  }

  .guide-item-text{
    font-size: 15px;
    line-height: 24px;
    word-break: keep-all;
  }

  .guide-item-text br{
    display: none;
  }

  .guide-item-btn{
    width: 100%;
    margin: 8px 0 0;
  }

  .guide-bank,
  .guide-address{
    align-items: flex-start;
  }

  .guide-bank img,
  .guide-address img{
    width: 24px;
    height: 24px;
  }

  .guide-bank-title,
  .guide-address-main{
    font-size: 16px;
    line-height: 24px;
  }

  .guide-bank-list{
    font-size: 15px;
    line-height: 24px;
    margin-bottom: 16px;
  }

  .guide-address-sub{
    font-size: 13px;
    line-height: 20px;
    font-weight: 400;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }

  .guide-example{
    width: 100%;
    margin-top: 20px;
  }

  .guide-example-head{
    font-size: 15px;
    line-height: 24px;
    padding: 4px 8px;
  }

  .guide-example-body{
    padding: 8px;
  }

  .guide-example img{
    width: 100%;
    max-width: none;
  }

}

@media (max-width:480px){

  .guide-container{
    padding: 0 16px;
  }

  .guide-section{
    padding: 50px 0;
  }

  .guide-side{
    margin-bottom: 20px;
  }

  .guide-title{
    font-size: 26px;
    line-height: 34px;
  }

  .guide-item{
    padding: 16px;
    gap: 14px;
  }

  .guide-item-icon{
    width: 52px;
    height: 52px;
  }

  .guide-item-text{
    font-size: 14px;
    line-height: 22px;
  }

  .guide-item-btn{
    font-size: 12px;
    line-height: 18px;
    padding: 7px 10px;
  }

  .guide-bank-title,
  .guide-address-main{
    font-size: 15px;
    line-height: 22px;
  }

  .guide-bank-list{
    font-size: 14px;
    line-height: 22px;
  }

  .guide-address-sub{
    font-size: 12px;
    line-height: 18px;
  }

}

/* sub09 : 수수료 안내----------------------------------------------------------------------*/
.fee-hero .hero-inner {
  background: url('/images/layout/fee-bg.jpg') center top / cover no-repeat;
}

.fee-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 80px 0;
}

.fee-section--gray {
  background: #EFEFEF;
}

.fee-row {
  display: flex;
  gap: 50px;
  align-items: flex-start;
}

.fee-side {
  width: 350px;
  flex-shrink: 0;
}

.fee-title {
  color: #000;
  font-family: Pretendard;
  font-size: 40px;
  font-style: normal;
  font-weight: 800;
  line-height: 48px;
  letter-spacing: -0.02em;
}

.fee-title span {
  color: var(--Style, #2594D3);
  font-family: "Wanted Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
}

.fee-table-wrap {
  overflow-x: auto;
}

.fee-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 2px solid #333;
}

.fee-table {
  table-layout: fixed;
}

.fee-table .num {
  background: #f5f5f5;
  text-align: center;
  font-weight: 600;
}

.fee-table .item {
  background: #f5f5f5;
  font-weight: 600;
}

.fee-table thead th {
  background: #f5f5f5;

  padding: 12px 10px;
  border-bottom: 1px solid #ddd;

  color: #000;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px; 
}

.fee-table td {
  color: #000;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; 

  padding: 16px;
  border-bottom: 1px solid #eee;
  vertical-align: middle;
  background: #fff;
}

.fee-table .num {
  text-align: center;
  color: #000;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px; 
}

.fee-table td,
.fee-table th {
  border-bottom: 1px solid #eee;
  border-left: 1px solid #eee; 
}
.fee-table td:first-child,
.fee-table th:first-child {
  border-left: none;
}

.fee-table tr.group-end td {
  border-bottom: 2px solid #ccc;
}

.fee-table td.group-num {
  border-bottom: 1px solid #ccc;
}

.fee-table td.num {
  border-right: 1px solid #eee; 
}

.fee-table tbody tr:hover {
  background: #f5f5f5;
}

.fee-table td {
  border-bottom: 1px solid #eee;
}

.fee-table tr.group-end td {
  border-bottom: 1px solid #bbb;
}


/* sub09 : 수수료 안내
--------------------------------------------------*/


/* 1440 ~ 1201 */
@media (max-width:1440px) and (min-width:1201px){

  .fee-container{
    max-width: 1320px;
    padding: 70px 0;
  }

  .fee-row{
    gap: 100px;
  }

  .fee-side{
    width: 300px;
  }

  .fee-title{
    font-size: 36px;
    line-height: 46px;
  }

  .fee-title span{
    font-size: 15px;
    line-height: 22px;
  }

  .fee-table thead th{
    padding: 11px 9px;
    font-size: 15px;
    line-height: 22px;
  }

  .fee-table td{
    padding: 14px;
    font-size: 15px;
    line-height: 23px;
  }

  .fee-table .num{
    font-size: 15px;
    line-height: 23px;
  }

}


/* 1200 ~ 1025 */
@media (max-width:1200px) and (min-width:1025px){

  .fee-container{
    padding: 60px 30px;
  }

  .fee-row{
    gap: 60px;
  }

  .fee-side{
    width: 220px;
  }

  .fee-title{
    font-size: 34px;
    line-height: 42px;
  }

  .fee-title span{
    font-size: 14px;
    line-height: 20px;
  }

  .fee-table-wrap{
    overflow-x: auto;
  }

  .fee-table{
    min-width: 760px;
  }

  .fee-table thead th{
    padding: 10px 8px;
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
  }

  .fee-table td{
    padding: 12px 10px;
    font-size: 14px;
    line-height: 21px;
  }

  .fee-table .num{
    font-size: 14px;
    line-height: 21px;
  }

}

@media (max-width:1024px) and (min-width:769px){

  .fee-container{
    padding: 55px 24px;
  }

  .fee-row{
    gap: 36px;
  }

  .fee-side{
    width: 150px;
  }

  .fee-title{
    font-size: 30px;
    line-height: 40px;
  }

  .fee-title span{
    display: block;
    font-size: 13px;
    line-height: 19px;
    margin-bottom: 8px;
  }

  .fee-table-wrap{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .fee-table{
    min-width: 760px;
  }

  .fee-table thead th{
    padding: 9px 7px;
    font-size: 13px;
    line-height: 19px;
    white-space: nowrap;
  }

  .fee-table td{
    padding: 11px 8px;
    font-size: 13px;
    line-height: 20px;
  }

  .fee-table .num{
    font-size: 13px;
    line-height: 20px;
  }

}

@media (max-width:768px){

  .fee-container{
    padding: 40px 20px;
  }

  .fee-row{
    display: block;
  }

  .fee-side{
    width: 100%;
    margin-bottom: 24px;
  }

  .fee-title{
    font-size: 28px;
    line-height: 36px;
  }

  .fee-title span{
    display: block;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 8px;
  }

  .fee-table-wrap{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
  }

  .fee-table{
    min-width: 800px;
  }

  .fee-table thead th{
    padding: 10px 8px;
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
  }

  .fee-table td{
    padding: 12px 10px;
    font-size: 14px;
    line-height: 20px;
  }

  .fee-table .num{
    font-size: 14px;
    line-height: 20px;
  }

  .fee-table-wrap::before{
    content: "← 좌우로 스크롤 →";
    display: block;
    text-align: center;
    margin-bottom: 10px;
    color: #999;
    font-size: 12px;
  }

}

@media (max-width:480px){

  .fee-container{
    padding: 50px 16px;
  }

  .fee-side{
    margin-bottom: 20px;
  }

  .fee-title{
    font-size: 26px;
    line-height: 34px;
  }

  .fee-title span{
    font-size: 13px;
    line-height: 19px;
  }

  .fee-table{
    min-width: 760px;
  }

  .fee-table thead th{
    padding: 9px 7px;
    font-size: 13px;
    line-height: 19px;
  }

  .fee-table td{
    padding: 10px 8px;
    font-size: 13px;
    line-height: 19px;
  }

  .fee-table .num{
    font-size: 13px;
    line-height: 19px;
  }

}

/* sub10 : 분석의뢰신청---------------------------------------------------------------------*/
.req-page {
  padding-bottom: 80px;
}

.req-inner {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.req-form-side {
  flex-shrink: 0;
  width: 360px;
}

.req-form-step {
  margin-bottom: 24px;

  color: #2594D3;
  font-family: "Wanted Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
}

.req-form-title {
  color: #000;
  font-family: Pretendard;
  font-size: 48px;
  font-style: normal;
  font-weight: 800;
  line-height: 60px;
  letter-spacing: -0.02em;

  margin-bottom: 32px;
}

.req-form-dec {
  color: #555;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: -0.02em;
}

.terms-check--req {
  margin: 40px 0 0 0;
}

.req-form-info {
  display: flex;
  align-items: center;
  gap: 2px;

  margin-top: 8px;

  font-family: Pretendard;
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}

.req-form-info::before {
  content: "";

  width: 20px;
  height: 20px;

  flex-shrink: 0;

  background:
    url('/images/layout/icon-info-caution.svg')
    no-repeat center / contain;
}

.ui-form-main .ui-form-grid .ui-form-field > .req-form-info.caution {
  color: #E53935;
  font-family: Pretendard;
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
  padding: 0;

}

.ui-form-main .ui-form-grid .ui-form-field > .req-file-desc {
    margin-top: 8px;

    color: #a9b0bf;
    font-family: Pretendard;
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    padding: 0;
}

.req-form-divider {
  grid-column: 1 / -1;

  height: 1px;
  background: #E5E5E5;

  margin: 4px 0 8px;
}

/**/
.req-complete-flow {
  position: relative;

  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 56px;

  width: fit-content;

  margin: 0 auto;
  padding-bottom: 56px;
}

.req-complete-flow__line {
  position: absolute;

  top: 14px;
  left: 42px;
  right: 42px;

  height: 2px;

  background: #D9D9D9;
}

.req-complete-flow__item {
  position: relative;
  z-index: 1;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.req-complete-flow__circle {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 30px;
  height: 30px;

  border-radius: 50%;
  background: #D9D9D9;

  color: #FFF;
  text-align: center;
  font-family: Pretendard;
  font-size: 15px;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
}

.req-complete-flow__circle img {
  width: 12px;
  height: 12px;
}

.req-complete-flow__text {
  margin-top: 8px;

  color: #555;
  text-align: center;
  font-family: Pretendard;
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}

.req-complete-flow__item.done .req-complete-flow__circle {
  background: #24A148;
}

.req-complete-flow__item.current .req-complete-flow__circle {
  background: #FFF;
  border: 6px solid #24A148;
}

.req-complete-flow__line {
  position: absolute;
  top: 14px;
  left: 42px;
  right: 42px;
  height: 2px;
  background: #D9D9D9;
}

.req-complete-flow__line.active {
  right: calc(75% - 16px);
  background: #24A148;
  z-index: 0;
}


@media (max-width:1440px) and (min-width:1201px){

  .req-inner{
    max-width: 1320px;
  }

  .req-page{
    padding-bottom: 70px;
  }

  .req-form-side{
    width: 320px;
  }

  .req-form-step{
    margin-bottom: 20px;
    font-size: 15px;
    line-height: 22px;
  }

  .req-form-title{
    font-size: 44px;
    line-height: 56px;
    margin-bottom: 28px;
  }

  .req-form-dec{
    font-size: 15px;
    line-height: 25px;
  }

  .terms-check--req{
    margin-top: 36px;
  }

  .req-form-info{
    font-size: 12px;
    line-height: 19px;
  }

  .req-complete-flow{
    gap: 48px;
    padding-bottom: 50px;
  }

  .req-complete-flow__text{
    font-size: 14px;
    line-height: 22px;
  }

}


@media (max-width:1200px) and (min-width:1025px){

  .req-inner{
    padding: 0 30px;
  }

  .req-page{
    padding-bottom: 65px;
  }

  .req-form-side{
    width: 220px;
  }

  .req-form-step{
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 16px;
  }

  .req-form-title{
    font-size: 36px;
    line-height: 48px;
    margin-bottom: 22px;
  }

  .req-form-dec{
    font-size: 14px;
    line-height: 23px;
  }

  .terms-check--req{
    margin-top: 32px;
  }

  .req-form-info{
    font-size: 12px;
    line-height: 18px;
  }

  .req-form-info::before{
    width: 18px;
    height: 18px;
  }

  .req-form-divider{
    margin: 4px 0 8px;
  }

  .req-complete-flow{
    gap: 40px;
    padding-bottom: 48px;
  }

  .req-complete-flow__circle{
    width: 28px;
    height: 28px;
    font-size: 14px;
  }

  .req-complete-flow__text{
    font-size: 14px;
    line-height: 21px;
  }

}

@media (max-width:1024px) and (min-width:769px){

  .req-inner{
    padding: 0 24px;
  }

  .req-page{
    padding-bottom: 60px;
  }

  .req-form-side{
    width: 150px;
  }

  .req-form-step{
    font-size: 13px;
    line-height: 19px;
    margin-bottom: 14px;
  }

  .req-form-title{
    font-size: 30px;
    line-height: 40px;
    margin-bottom: 20px;
  }

  .req-form-dec{
    font-size: 13px;
    line-height: 21px;
    word-break: keep-all;
  }

  .terms-check--req{
    margin-top: 28px;
  }

  .req-form-info{
    align-items: flex-start;
    font-size: 11px;
    line-height: 17px;
  }

  .req-form-info::before{
    width: 17px;
    height: 17px;
    margin-top: 1px;
  }

  .req-form-divider{
    margin: 2px 0 6px;
  }

  .req-complete-flow{
    gap: 32px;
    padding-bottom: 44px;
  }

  .req-complete-flow__line{
    left: 38px;
    right: 38px;
    top: 13px;
  }

  .req-complete-flow__circle{
    width: 27px;
    height: 27px;
    font-size: 13px;
  }

  .req-complete-flow__circle img{
    width: 11px;
    height: 11px;
  }

  .req-complete-flow__item.current .req-complete-flow__circle{
    border-width: 5px;
  }

  .req-complete-flow__text{
    margin-top: 7px;
    font-size: 13px;
    line-height: 20px;
    word-break: keep-all;
  }

}

@media (max-width:768px){

  .req-page{
    padding-bottom:60px;
  }

  .req-inner{
    padding:0 20px;
  }

  .req-form-side{
    width:100%;
  }

  .req-form-step{
    font-size:14px;
    line-height:20px;
    margin-bottom:12px;
  }

  .req-form-title{
    font-size:30px;
    line-height:40px;
    margin-bottom:16px;
    word-break:keep-all;
  }

  .req-form-dec{
    font-size:14px;
    line-height:22px;
    word-break:keep-all;
  }

  .terms-check--req{
    margin-top:24px;
  }

  .req-form-info{
    align-items:flex-start;
    font-size:12px;
    line-height:18px;
  }

  .req-form-info::before{
    width:18px;
    height:18px;
    margin-top:1px;
  }

  .req-form-divider{
    margin:0;
  }

  .req-complete-flow{
    width:100%;
    gap:20px;
    justify-content:space-between;
    padding-bottom:40px;
  }

  .req-complete-flow__line{
    left:40px;
    right:40px;
    top:13px;
  }

  .req-complete-flow__circle{
    width:26px;
    height:26px;
    font-size:13px;
  }

  .req-complete-flow__item.current .req-complete-flow__circle{
    border-width:4px;
  }

  .req-complete-flow__text{
    margin-top:6px;
    font-size:12px;
    line-height:18px;
    word-break:keep-all;
  }

}

@media (max-width:480px){

  .req-page{
    padding-bottom:50px;
  }

  .req-inner{
    padding:0 16px;
  }

  .req-form-step{
    font-size:13px;
    line-height:19px;
  }

  .req-form-title{
    font-size:27px;
    line-height:36px;
  }

  .req-form-dec{
    font-size:13px;
    line-height:21px;
  }

  .req-form-info{
    font-size:11px;
    line-height:17px;
  }

  .req-form-info::before{
    width:16px;
    height:16px;
  }

  .req-complete-flow{
    gap:12px;
  }

  .req-complete-flow__line{
    left:32px;
    right:32px;
  }

  .req-complete-flow__circle{
    width:24px;
    height:24px;
    font-size:12px;
  }

  .req-complete-flow__item.current .req-complete-flow__circle{
    border-width:3px;
  }

  .req-complete-flow__text{
    font-size:11px;
    line-height:16px;
  }

}

/* sub11 : 분석장비현황---------------------------------------------------------------------*/
.eq-status-inner {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

.eq-top {
  margin-left: 120px;
}

.eq-status-layout {
  display: grid;
  grid-template-columns: 320px 320px 1fr;
  gap: 16px;
  background: #f4f4f4;
  padding: 32px 120px 80px ;

  align-items: start;
}

.eq-status-list {
  height: 756px;

  overflow-y: auto;

  border-radius: 16px;
  background: #FFF;

  box-shadow: 0 4px 20px rgba(0,0,0,.04);

  scrollbar-width: thin;
  scrollbar-color: #CFCFCF transparent;
}

.eq-status-list::-webkit-scrollbar {
  width: 4px;
}

.eq-status-list::-webkit-scrollbar-track {
  background: transparent;
}

.eq-status-list::-webkit-scrollbar-thumb {
  background: rgba(37, 148, 211, 0.18);
  border-radius: 999px;

  transition:
    background .2s ease,
    width .2s ease;
}

.eq-status-list::-webkit-scrollbar-thumb:hover {
  background: rgba(37, 148, 211, 0.35);
}

.eq-status-item {
  display: flex;
  gap: 14px;

  padding: 16px 12px;

  border-bottom: 1px solid #eee;

  transition: .2s;
}

.eq-status-item:hover {
  box-shadow: inset 0 0 0 1.5px #2594D3;
  border-radius: 16px;
}

.eq-status-item.active {
  background: #E9F4FB;
  box-shadow: inset 0 0 0 2px #2594D3;
  border-radius: 16px;
}

.eq-status-item__thumb {
  width: 102px;
  height: 102px;

  padding: 6px;

  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
}

.eq-status-item__thumb img {
  width: 100%;
  height: 100%;

  object-fit: contain;

  display: block;
}

.eq-status-item__type {
  display: block;

  color: var(--Style, #2594D3);
  font-family: "Wanted Sans";
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: -0.02em;

  margin-bottom: 2px;
}

.eq-status-item__title {
  display: block;

  color: #000;
  font-family: "Wanted Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: -0.02em;

  margin-bottom: 4px;
}

.eq-status-item__brand {
  display: block;

  color: #838385;
  font-family: "Wanted Sans";
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;

  margin-bottom: 12px;
}

.eq-status-item__more {
  display: inline-flex;
  align-items: center;
  gap: 4px;

  color: #777;
  font-family: Pretendard;
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;

  text-decoration: none;

  transition: color .2s ease;
}

.eq-status-item__more img {
  display: block;
  width: 20px;
  height: auto;

  transition: transform .2s ease;
}

.eq-status-item__more:hover {
  color: #2594D3;
}

.eq-status-item__more:hover img {
  transform: translateX(3px);
}

.eq-status-detail {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.eq-status-detail-card {
  padding: 32px;

  border-radius: 16px;
  background: #FFF;

  box-shadow: 0 4px 20px rgba(0,0,0,.04);
}

.eq-status-detail-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  margin-bottom: 16px;
}

.eq-status-detail-card__type {
  display: block;

  color: var(--Style, #2594D3);
  font-family: "Wanted Sans";
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;

  margin-bottom: 6px;
}

.eq-status-detail-card__title {
  color: #000;
  font-family: "Wanted Sans";
  font-size: 26px;
  font-style: normal;
  font-weight: 700;
  line-height: 28px;

  margin-bottom: 6px;
}

.eq-status-detail-card__brand {
  color: #555;
  font-family: "Wanted Sans";
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
}

.eq-status-detail-card__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;

  color: #777;
  font-family: Pretendard;
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;

  text-decoration: none;

  transition: color .2s ease;
}

.eq-status-detail-card__link img {
  display: block;
  width: 20px;
  height: auto;

  transition: transform .2s ease;
}

.eq-status-detail-card__link:hover {
  color: #2594D3;
}

.eq-status-detail-card__link:hover img {
  transform: translateX(3px);
}

.eq-status-detail-card__image {
  height: 256px;

  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 2px solid #E7E7E7;
  border-radius: 8px;

  margin-bottom: 16px;
  padding: 16px;
}

.eq-status-detail-card__image img {
  width: 100%;
  height: 100%;

  object-fit: contain;

  display: block;
}

.eq-status-detail-card__btns {
  display: flex;
  gap: 8px;
}

.eq-status-detail-card__btn {
  flex: 1;

  height: 48px;

  display: flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;

  font-size: 14px;
  font-family: Pretendard;
  line-height: 20px;
  font-weight: 600;
}

.eq-status-detail-card__btn.line {
  border: 1px solid #1A2A4C;
  background: #fff;
  color: #1A2A4C;
  border-radius: 4px;
}

.eq-status-detail-card__btn.fill {
  border-radius: 4px;
  background: #1A2A4C;
  color: #FFF;
}


.eq-status-reserve {
  padding: 20px;

  border-radius: 16px;
  background: #FFF;

  box-shadow: 0 4px 20px rgba(0,0,0,.04);
}

.eq-status-reserve__title {
  color: #111;
  font-size: 20px;
  font-weight: 700;

  margin-bottom: 16px;
}

.eq-status-reserve__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.eq-status-reserve__list li {
  min-height: 38px;

  display: flex;
  align-items: center;
  gap: 8px;

  padding: 0 12px;

  border-radius: 6px;

  font-size: 12px;
}

.eq-status-reserve__list li span {
  position: relative;
  padding-left: 10px;
}

.eq-status-reserve__list li span::before {
  content: "";

  position: absolute;
  left: 0;
  top: 50%;

  width: 6px;
  height: 6px;

  border-radius: 50%;

  transform: translateY(-50%);
}

.eq-status-reserve__list li.approve {
  background: #DDF1E2;
}

.eq-status-reserve__list li.approve span::before {
  background: #5F8DFF;
}

.eq-status-reserve__list li.complete {
  background: #FCE7D8;
}

.eq-status-reserve__list li.complete span::before {
  background: #FF5A5A;
}

.eq-status-guide {
  margin-top: 20px;
}

.eq-status-guide__title {
  color: #E53935;
  font-size: 14px;
  font-weight: 700;

  margin-bottom: 10px;
}

.eq-status-guide__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.eq-status-guide__list li {
  color: #444;
  font-size: 13px;
  line-height: 1.7;
}

/* sub11 : 분석장비현황
--------------------------------------------------*/


/* 1440 ~ 1201 */
@media (max-width:1440px) and (min-width:1201px){

  .eq-top{
    margin-left: 60px;
  }

  .eq-status-layout{
    grid-template-columns: 300px 300px 1fr;
    gap: 14px;
    padding: 30px 60px 70px;
  }

  .eq-status-list{
    height: 700px;
  }

  .eq-status-item{
    gap: 12px;
    padding: 14px 10px;
  }

  .eq-status-item__thumb{
    width: 90px;
    height: 90px;
  }

  .eq-status-item__title{
    font-size: 18px;
    line-height: 27px;
  }

  .eq-status-detail-card{
    padding: 28px;
  }

  .eq-status-detail-card__title{
    font-size: 24px;
    line-height: 28px;
  }

  .eq-status-detail-card__image{
    height: 240px;
  }

}


/* 1200 ~ 1025 */
@media (max-width:1200px) and (min-width:1025px){

  .eq-top{
    margin-left: 30px;
  }

  .eq-status-layout{
    grid-template-columns: 240px 260px 1fr;
    gap: 12px;
    padding: 28px 30px 60px;
  }

  .eq-status-list{
    height: 650px;
    border-radius: 14px;
  }

  .eq-status-item{
    gap: 10px;
    padding: 12px 8px;
  }

  .eq-status-item__thumb{
    width: 76px;
    height: 76px;
  }

  .eq-status-item__type{
    font-size: 12px;
    line-height: 18px;
  }

  .eq-status-item__title{
    font-size: 16px;
    line-height: 24px;
  }

  .eq-status-item__brand{
    font-size: 12px;
    line-height: 15px;
    margin-bottom: 8px;
  }

  .eq-status-item__more{
    font-size: 12px;
    line-height: 18px;
  }

  .eq-status-item__more img{
    width: 18px;
  }

  .eq-status-detail{
    gap: 12px;
  }

  .eq-status-detail-card{
    padding: 22px;
    border-radius: 14px;
  }

  .eq-status-detail-card__type{
    font-size: 12px;
    line-height: 18px;
  }

  .eq-status-detail-card__title{
    font-size: 21px;
    line-height: 26px;
  }

  .eq-status-detail-card__brand{
    font-size: 12px;
  }

  .eq-status-detail-card__image{
    height: 220px;
    padding: 12px;
  }

  .eq-status-detail-card__btn{
    height: 44px;
    font-size: 13px;
  }

  .eq-status-reserve{
    padding: 16px;
  }

  .eq-status-reserve__title{
    font-size: 18px;
    margin-bottom: 12px;
  }

}


/* 1024 ~ 769 */
@media (max-width:1024px) and (min-width:769px){

  .eq-top{
    margin-left: 24px;
  }

  .eq-status-layout{
    /*
      장비 목록 1개 + 상세 영역
      3단 → 2단으로 정리
    */
    grid-template-columns: 240px 1fr;
    gap: 16px;
    padding: 24px;
  }

  .eq-status-list{
    height: 600px;
    border-radius: 14px;
  }

  .eq-status-item{
    gap: 10px;
    padding: 12px 8px;
  }

  .eq-status-item__thumb{
    width: 72px;
    height: 72px;
  }

  .eq-status-item__type{
    font-size: 11px;
    line-height: 17px;
  }

  .eq-status-item__title{
    font-size: 15px;
    line-height: 22px;
    word-break: keep-all;
  }

  .eq-status-item__brand{
    font-size: 11px;
    line-height: 15px;
    margin-bottom: 7px;
  }

  .eq-status-item__more{
    font-size: 11px;
    line-height: 17px;
  }

  .eq-status-item__more img{
    width: 17px;
  }

  .eq-status-detail{
    gap: 12px;
  }

  .eq-status-detail-card{
    padding: 20px;
    border-radius: 14px;
  }

  .eq-status-detail-card__head{
    margin-bottom: 12px;
  }

  .eq-status-detail-card__type{
    font-size: 11px;
    line-height: 17px;
    margin-bottom: 4px;
  }

  .eq-status-detail-card__title{
    font-size: 20px;
    line-height: 26px;
    word-break: keep-all;
  }

  .eq-status-detail-card__brand{
    font-size: 11px;
    line-height: 15px;
  }

  .eq-status-detail-card__image{
    height: 210px;
    padding: 12px;
    margin-bottom: 12px;
  }

  .eq-status-detail-card__btns{
    gap: 6px;
  }

  .eq-status-detail-card__btn{
    height: 42px;
    font-size: 12px;
  }

  .eq-status-reserve{
    padding: 14px;
  }

  .eq-status-reserve__title{
    font-size: 17px;
    margin-bottom: 10px;
  }

  .eq-status-reserve__list li{
    min-height: 36px;
    padding: 0 10px;
    font-size: 11px;
  }

  .eq-status-guide{
    margin-top: 14px;
  }

  .eq-status-guide__title{
    font-size: 13px;
    margin-bottom: 8px;
  }

  .eq-status-guide__list li{
    font-size: 12px;
  }

}


/* 768 이하 */
@media (max-width:768px){

  .eq-top{
    margin-left:0;
    padding:0 20px;
  }

  .eq-status-layout{
    display:flex;
    flex-direction:column;
    gap:20px;
    padding:20px;
  }

  .eq-status-list{
    width:100%;
    height:420px;
  }

  .eq-status-detail{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:20px;
  }

  .eq-status-detail-card{
    width:100%;
  }

  .eq-side{
    width:100%;
  }

  .eq-status-item{
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:12px;
    padding:12px;
  }

  .eq-status-item__thumb{
    width:80px;
    height:80px;
    flex-shrink:0;
  }

  .eq-status-item__content{
    flex:1;
    min-width:0;
  }

  .eq-status-item__title{
    font-size:16px;
    line-height:24px;
    word-break:keep-all;
  }

  .eq-status-item__brand{
    margin-bottom:8px;
  }

  .eq-status-detail-card{
    padding:20px;
  }

  .eq-status-detail-card__head{
    flex-direction:column;
    gap:12px;
  }

  .eq-status-detail-card__title{
    font-size:22px;
    line-height:30px;
    word-break:keep-all;
  }

  .eq-status-detail-card__image{
    height:220px;
    padding:12px;
  }

  .eq-status-detail-card__btns{
    flex-direction:column;
  }

  .eq-status-detail-card__btn{
    height:44px;
    font-size:14px;
    padding:12px;
  }

  .eq-status-reserve{
    padding:16px;
  }

  .eq-status-reserve__title{
    font-size:18px;
    margin-bottom:12px;
  }

  .eq-status-reserve__list li{
    min-height:44px;
    padding:10px 12px;
    flex-wrap:wrap;
    gap:4px;
  }

  .eq-status-guide{
    margin-top:16px;
  }

  .eq-status-guide__title{
    font-size:13px;
  }

  .eq-status-guide__list li{
    font-size:12px;
    line-height:1.6;
  }

  /* 분석 일정 */
  .eq-status-calendar{
    margin-top:24px;
  }

  .eq-status-calendar .req-calendar__top{
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
  }

  .eq-status-calendar .req-calendar__month{
    width:100%;
    justify-content:center;
  }

  .eq-status-calendar .req-calendar__legend{
    width:100%;
    flex-wrap:wrap;
    gap:8px;
  }

  .eq-status-calendar .req-calendar__legend-box{
    width:100%;
    height:auto;
    flex-wrap:wrap;
    gap:8px;
    padding:12px;
  }

  .eq-status-calendar .req-calendar__table-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  .eq-status-calendar .req-calendar__table{
    min-width:900px !important;
  }

}


/* 480 이하 */
@media (max-width:480px){

  .eq-status-layout{
    padding:16px;
    gap:16px;
  }

  .eq-status-list{
    height:360px;
  }

  .eq-status-item{
    gap:10px;
    padding:10px;
  }

  .eq-status-item__thumb{
    width:72px;
    height:72px;
  }

  .eq-status-item__title{
    font-size:15px;
    line-height:22px;
  }

  .eq-status-item__type{
    font-size:11px;
    line-height:17px;
  }

  .eq-status-item__brand{
    font-size:11px;
    line-height:15px;
    margin-bottom:6px;
  }

  .eq-status-detail-card{
    padding:16px;
  }

  .eq-status-detail-card__title{
    font-size:20px;
    line-height:26px;
  }

  .eq-status-detail-card__image{
    height:180px;
  }

  .eq-status-detail-card__btn{
    height:42px;
  }

}

/* sub12 : 분석결제내역---------------------------------------------------------------------*/
.filter-content {
  display: flex;
  gap: 16px;
  align-items: center;
}

.analysis-status {
  font-weight: 500;
}

/* 링크버튼 */
.analysis-status.request,
.analysis-status.download {
  text-decoration: underline;
  cursor: pointer;
}

/* 발행요청 */
.analysis-status.request {
  color: #E39A6A;
}

/* 다운로드 */
.analysis-status.download {
  color: #2594D3;
}

/* 발행대기 */
.analysis-status.pending {
  color: #8A8A8A;
}

/* 발행완료 */
.analysis-status.complete {
  color: #34A853;
}

.analysis-status.empty {
  color: transparent;
  cursor: default;
  text-decoration: none;
}

.btn-pay {
  padding: 4px 10px;
  border-radius: 4px;
  background: #1A2A4C;
  color: #FFF;
  font-family: Pretendard;
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; 
  border: none;
}

.btn-pay.disabled,
.btn-pay:disabled {
  background: #B8BDC7;
  color: rgba(255,255,255,0.8);
  cursor: default;
  pointer-events: none;
}


.analysis-table table {
  border-top: 2px solid #111;
  border-collapse: separate;
  border-spacing: 0;
}

.analysis-table tbody tr td {
  border-bottom: 1px solid #e5e5e5;
}

.analysis-table thead th[rowspan] {
  position: relative;
}

.analysis-table thead th[rowspan]::before {
  content: "";
  position: absolute;

  right: -1px;
  bottom: 0;

  width: 1px;
  height: 50%;

  background: #eee;
}

.analysis-table tbody tr:nth-child(2n) td {
  border-bottom: 1px solid #9d9d9d;
}

.analysis-table tbody td[rowspan] {
  position: relative;
  vertical-align: middle;

  border-right: 1px solid #eee;
  border-bottom: 1px solid #9d9d9d; 
}

.analysis-table tbody td[rowspan]::before {
  content: "";
  position: absolute;

  top: 50%;
  right: -1px;

  width: 1px;
  height: 50%;

  background: #eee;
}

/* 뱃지 */
/* 신청완료 */
.analysis-table .badge.apply {
  background: #FBE6D7;
  color: #ED8438;
}

/* 신청승인 */
.analysis-table .badge.approve {
  background: #D2EDDA;
  color: #1DA446;
}

/* 반려(취소) */
.analysis-table .badge.cancel {
  background: #FFBABA;
  color: #B00000;
}

/* 분석완료 */
.analysis-table .badge.waiting {
  background: #DADBDE;
  color: #838385;
}

/* 결제완료 */
.analysis-table .badge.complete {
  background: #C3CBFF;
  color: #0020F0;
}

.analysis-table-top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 12px;
}

.analysis-legend {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* sub12 : 분석결제내역---------------------------------------------------------------------*/

.filter-content {
  display: flex;
  gap: 16px;
  align-items: center;
}

.analysis-status {
  font-weight: 500;
}

/* 링크버튼 */
.analysis-status.request,
.analysis-status.download {
  text-decoration: underline;
  cursor: pointer;
}

/* 발행요청 */
.analysis-status.request {
  color: #E39A6A;
}

/* 다운로드 */
.analysis-status.download {
  color: #2594D3;
}

/* 발행대기 */
.analysis-status.pending {
  color: #8A8A8A;
}

/* 발행완료 */
.analysis-status.complete {
  color: #34A853;
}

.analysis-status.empty {
  color: transparent;
  cursor: default;
  text-decoration: none;
}

.btn-pay {
  padding: 4px 10px;
  border-radius: 4px;
  background: #1A2A4C;
  color: #FFF;
  font-family: Pretendard;
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  border: none;
}

.btn-pay.disabled,
.btn-pay:disabled {
  background: #B8BDC7;
  color: rgba(255,255,255,0.8);
  cursor: default;
  pointer-events: none;
}


/* 테이블 */
.analysis-table table {
  width: 100%;
  border-top: 2px solid #111;
  border-collapse: separate;
  border-spacing: 0;
}

.analysis-table tbody tr td {
  border-bottom: 1px solid #e5e5e5;
}

.analysis-table thead th[rowspan] {
  position: relative;
}

.analysis-table thead th[rowspan]::before {
  content: "";
  position: absolute;

  right: -1px;
  bottom: 0;

  width: 1px;
  height: 50%;

  background: #eee;
}

.analysis-table tbody tr:nth-child(2n) td {
  border-bottom: 1px solid #9d9d9d;
}

.analysis-table tbody td[rowspan] {
  position: relative;
  vertical-align: middle;

  border-right: 1px solid #eee;
  border-bottom: 1px solid #9d9d9d;
}

.analysis-table tbody td[rowspan]::before {
  content: "";
  position: absolute;

  top: 50%;
  right: -1px;

  width: 1px;
  height: 50%;

  background: #eee;
}


/* 뱃지 */
/* 신청완료 */
.analysis-table .badge.apply {
  background: #FBE6D7;
  color: #ED8438;
}

/* 신청승인 */
.analysis-table .badge.approve {
  background: #D2EDDA;
  color: #1DA446;
}

/* 반려(취소) */
.analysis-table .badge.cancel {
  background: #FFBABA;
  color: #B00000;
}

/* 분석완료 */
.analysis-table .badge.waiting {
  background: #DADBDE;
  color: #838385;
}

/* 결제완료 */
.analysis-table .badge.complete {
  background: #C3CBFF;
  color: #0020F0;
}


/* 상단 */
.analysis-table-top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 12px;
}

.analysis-legend {
  display: flex;
  align-items: center;
  gap: 4px;
}

.service-policy {
    margin-top: 32px;
}

.service-policy-item + .service-policy-item {
    margin-top: 28px;
}

.service-policy h3 {
    margin: 0 0 10px;
    color: #222;
    font-family: Pretendard;
    font-size: 17px;
    font-weight: 700;
    line-height: 26px;
}

.service-policy p,
.service-policy li {
    color: #555;
    font-family: Pretendard;
    font-size: 15px;
    font-weight: 400;
    line-height: 26px;
}

.service-policy p {
    margin: 0;
}

.service-policy ul {
    margin: 0;
}

.service-policy strong {
    color: #222;
    font-weight: 600;
}


@media (max-width:1440px) and (min-width:1201px){

  .req-inner{
    width: 100%;
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .filter-content{
    gap: 14px;
  }

  .analysis-status{
    font-size: 14px;
    line-height: 21px;
  }

  .btn-pay{
    font-size: 12px;
    line-height: 18px;
    padding: 4px 9px;
  }

  .analysis-table-top{
    margin-bottom: 12px;
  }

  .analysis-legend{
    gap: 6px;
  }

}

@media (max-width:1200px) and (min-width:1025px){

  .req-inner{
    width: 100%;
    max-width: 100%;
    padding: 0 30px;
    box-sizing: border-box;
  }

  .filter-content{
    flex-wrap: wrap;
    gap: 8px;
  }

  .analysis-status{
    font-size: 13px;
    line-height: 20px;
  }

  .btn-pay{
    font-size: 12px;
    line-height: 18px;
    padding: 4px 8px;
    white-space: nowrap;
  }

  /* 테이블 */
  .analysis-table{
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .analysis-table table{
    min-width: 1100px;
  }

  .analysis-table th,
  .analysis-table td{
    padding: 10px 8px;
    font-size: 13px;
    line-height: 18px;
    white-space: nowrap;
  }

  .analysis-table .badge{
    font-size: 12px;
    line-height: 18px;
    padding: 3px 8px;
    white-space: nowrap;
  }

}

@media (max-width:1024px) and (min-width:769px){

  .req-inner{
    width: 100%;
    max-width: 100%;
    padding: 0 24px;
    box-sizing: border-box;
  }

  .analysis-table-top{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .analysis-legend{
    flex-wrap: wrap;
    gap: 6px;
  }

  .filter-content{
    flex-wrap: wrap;
    gap: 6px;
  }

  .analysis-status{
    font-size: 12px;
    line-height: 18px;
  }

  .btn-pay{
    font-size: 11px;
    line-height: 17px;
    padding: 4px 7px;
    white-space: nowrap;
  }

  /* 테이블 */
  .analysis-table{
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .analysis-table table{
    min-width: 1000px;
  }

  .analysis-table th,
  .analysis-table td{
    padding: 9px 7px;
    font-size: 12px;
    line-height: 17px;
    white-space: nowrap;
  }

  .analysis-table .badge{
    font-size: 11px;
    line-height: 17px;
    padding: 3px 7px;
    white-space: nowrap;
  }

}

@media (max-width:768px){

  .req-inner{
    width: 100%;
    max-width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .analysis-table-top{
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .analysis-legend{
    flex-wrap: wrap;
    gap: 6px;
  }

  .filter-content{
    flex-wrap: wrap;
    gap: 8px;
  }

  .analysis-status{
    font-size: 13px;
    line-height: 20px;
  }

  .btn-pay{
    font-size: 12px;
    line-height: 18px;
    padding: 4px 8px;
    white-space: nowrap;
  }

  /* 테이블 */
  .analysis-table{
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .analysis-table table{
    min-width: 1200px;
  }

  .analysis-table th,
  .analysis-table td{
    padding: 10px 8px;
    font-size: 13px;
    line-height: 18px;
    white-space: nowrap;
  }

  .analysis-table .badge{
    font-size: 12px;
    line-height: 18px;
    padding: 3px 8px;
    white-space: nowrap;
  }

}

@media (max-width:480px){

  .req-inner{
    padding: 0 16px;
  }

  .analysis-table-top{
    gap: 10px;
  }

  .analysis-legend{
    gap: 4px;
  }

  .filter-content{
    gap: 6px;
  }

  .analysis-status{
    font-size: 12px;
    line-height: 18px;
  }

  .btn-pay{
    font-size: 11px;
    line-height: 17px;
    padding: 4px 7px;
  }

  .analysis-table table{
    min-width: 1050px;
  }

  .analysis-table th,
  .analysis-table td{
    padding: 9px 7px;
    font-size: 12px;
    line-height: 17px;
  }

  .analysis-table .badge{
    font-size: 11px;
    line-height: 17px;
    padding: 3px 7px;
  }

}

/* sub13 : 공지사항----------------------------------------------------------------------*/
.notice-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding-bottom: 80px;
}

.notice-top {
  display: flex;
  justify-content: space-between; 
  align-items: center;       
  margin-bottom: 32px;    
}

.notice-search {
  display: flex;
  align-items: center;
  gap: 8px;
}

.notice-list {
  border-top: 2px solid #333;
}

.notice-item {
  border-bottom: 1px solid #eee;
  padding-left: 64px;
  padding-right: 64px;
  transition: background 0.2s ease;
}

.notice-item:hover {
  background: #f5f5f5;
}

.notice-link {
  display: flex;
  align-items: center;
  padding: 24px 0;
}

.notice-total {
color: #333;
font-family: "Wanted Sans";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px; 
}

.notice-total-num {
  color: var(--Style, #2594D3);
font-family: "Wanted Sans";
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 24px;
}

.notice-num {
  width: 80px;

  color: #898989;
  font-family: "Wanted Sans";
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}

.notice-subject {
  flex: 1;

  color: #333;
  font-family: Pretendard;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 32px;
}

.notice-date {
  width: 120px;

  color: #898989;
  text-align: right;
  font-family: "Wanted Sans";
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}

.notice-arrow {
  width: 20px;
  height: 18px;
  margin-left: 32px;
  background: url('/images/layout/notice-arrow-right.svg') no-repeat center / contain;
}

.notice-search-inner {
  display: flex;
  align-items: center;

  width: 420px;
  height: 48px;

  background: #f3f3f3;
  border-radius: 999px;

  padding: 0 20px;
  gap: 12px;
}

.notice-search-select {
  padding-right: 40px;

  border: none;
  background: transparent;
  background: url('/images/layout/select-arrow.svg') no-repeat right center / 10px;

  appearance: none;
  cursor: pointer;

  color: #333;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
}

.notice-search-input {
  flex: 1;

  border: none;
  background: transparent;
  outline: none;

  color: #333;
  font-family: Pretendard;
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.3px;
  text-transform: uppercase;
}

.notice-search-input::placeholder {
  color: #aaa;
  font-weight: 400;
}

.notice-search-input:focus {
  outline: none;
  box-shadow: none;
  border: none;
}

.notice-search-btn {
  width: 16px;
  height: 16px;

  background: url('/images/layout/search-icon.svg') no-repeat center / contain;
  border: none;
  cursor: pointer;
}

.notice-search-select:focus {
  outline: none;
  box-shadow: none;
}

.notice-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;

  margin-top: 80px;
}

.notice-page {
  position: relative;

  color: #868686;
  text-align: center;
  font-family: "Wanted Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;

  text-decoration: none;

  transition: all 0.2s ease;
}

.notice-page:hover {
  color: #000;
}

.notice-page.active {
  color: #000;
  font-weight: 600;
}

.notice-page.active::after {
  content: "";
  position: absolute;

  left: 50%;
  transform: translateX(-50%);
  bottom: -4px;

  width: 16px;
  height: 2px;

  background: #000;
  border-radius: 2px;
}

.notice-page::after {
  transition: all 0.2s ease;
}

.notice-page-arrow {
  width: 28px;
  height: 28px;

  display: inline-block;

  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  transition: 0.2s;
}

.notice-page-arrow.prev {
  margin-right: 20px;
  background-image: url('/images/layout/page-arrow-left.svg');
}

.notice-page-arrow.next {
  margin-left: 20px;
  background-image: url('/images/layout/page-arrow-right.svg');
}

.notice-page-arrow.disabled {
  opacity: 0.4;
  pointer-events: none;
}



/* notice - 공지 배지 / 빈 상태 */
.notice-pin-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 10px;
  background: #2594D3;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  border-radius: 4px;
  white-space: nowrap;
}

.notice-item--pin .notice-subject {
  color: #111;
}

.notice-none p {
  padding: 48px 0;
  text-align: center;
  color: #aaa;
  font-size: 16px;
}

/* sub13 : 공지사항
--------------------------------------------------*/

.notice-inner {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding-bottom: 80px;
  box-sizing: border-box;
}

.notice-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}

.notice-search {
  display: flex;
  align-items: center;
  gap: 8px;
}

.notice-list {
  border-top: 2px solid #333;
}

.notice-item {
  border-bottom: 1px solid #eee;
  padding-left: 64px;
  padding-right: 64px;
  transition: background 0.2s ease;
}

.notice-item:hover {
  background: #f5f5f5;
}

.notice-link {
  display: flex;
  align-items: center;
  padding: 24px 0;
}

.notice-total {
  color: #333;
  font-family: "Wanted Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}

.notice-total-num {
  color: var(--Style, #2594D3);
  font-family: "Wanted Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
}

.notice-num {
  width: 80px;

  color: #898989;
  font-family: "Wanted Sans";
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;

  flex-shrink: 0;
}

.notice-subject {
  flex: 1;
  min-width: 0;

  color: #333;
  font-family: Pretendard;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 32px;

  word-break: keep-all;
}

.notice-date {
  width: 120px;

  color: #898989;
  text-align: right;
  font-family: "Wanted Sans";
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;

  flex-shrink: 0;
}

.notice-arrow {
  width: 20px;
  height: 18px;
  margin-left: 32px;

  background: url('/images/layout/notice-arrow-right.svg')
    no-repeat center / contain;

  flex-shrink: 0;
}


/* 검색 */
.notice-search-inner {
  display: flex;
  align-items: center;

  width: 420px;
  height: 48px;

  background: #f3f3f3;
  border-radius: 999px;

  padding: 0 20px;
  gap: 12px;

  box-sizing: border-box;
}

.notice-search-select {
  padding-right: 40px;

  border: none;
  background: transparent;
  background: url('/images/layout/select-arrow.svg')
    no-repeat right center / 10px;

  appearance: none;
  cursor: pointer;

  color: #333;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;

  flex-shrink: 0;
}

.notice-search-input {
  flex: 1;
  min-width: 0;

  border: none;
  background: transparent;
  outline: none;

  color: #333;
  font-family: Pretendard;
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.3px;
  text-transform: uppercase;
}

.notice-search-input::placeholder {
  color: #aaa;
  font-weight: 400;
}

.notice-search-input:focus {
  outline: none;
  box-shadow: none;
  border: none;
}

.notice-search-btn {
  width: 16px;
  height: 16px;

  background: url('/images/layout/search-icon.svg')
    no-repeat center / contain;

  border: none;
  cursor: pointer;

  flex-shrink: 0;
}

.notice-search-select:focus {
  outline: none;
  box-shadow: none;
}


/* 페이지네이션 */
.notice-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;

  margin-top: 80px;
}

.notice-page {
  position: relative;

  color: #868686;
  text-align: center;
  font-family: "Wanted Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;

  text-decoration: none;

  transition: all 0.2s ease;
}

.notice-page:hover {
  color: #000;
}

.notice-page.active {
  color: #000;
  font-weight: 600;
}

.notice-page.active::after {
  content: "";
  position: absolute;

  left: 50%;
  transform: translateX(-50%);
  bottom: -4px;

  width: 16px;
  height: 2px;

  background: #000;
  border-radius: 2px;
}

.notice-page::after {
  transition: all 0.2s ease;
}

.notice-page-arrow {
  width: 28px;
  height: 28px;

  display: inline-block;

  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  transition: 0.2s;
}

.notice-page-arrow.prev {
  margin-right: 20px;
  background-image: url('/images/layout/page-arrow-left.svg');
}

.notice-page-arrow.next {
  margin-left: 20px;
  background-image: url('/images/layout/page-arrow-right.svg');
}

.notice-page-arrow.disabled {
  opacity: 0.4;
  pointer-events: none;
}


/* 공지 배지 */
.notice-pin-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 2px 10px;

  background: #2594D3;
  color: #fff;

  font-family: Pretendard;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;

  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.notice-item--pin .notice-subject {
  color: #111;
}


/* 빈 상태 */
.notice-none p {
  padding: 48px 0;

  text-align: center;

  color: #aaa;
  font-family: Pretendard;
  font-size: 16px;
  line-height: 24px;
}


@media (max-width:1440px) and (min-width:1201px) {

  .notice-inner {
    max-width: 1360px;
    padding: 0 20px 70px;
  }

  .notice-top {
    margin-bottom: 28px;
  }

  .notice-item {
    padding-left: 48px;
    padding-right: 48px;
  }

  .notice-link {
    padding: 22px 0;
  }

  .notice-num {
    width: 70px;
    font-size: 14px;
    line-height: 22px;
  }

  .notice-subject {
    font-size: 19px;
    line-height: 30px;
  }

  .notice-date {
    width: 110px;
    font-size: 14px;
    line-height: 22px;
  }

  .notice-arrow {
    width: 18px;
    height: 17px;
    margin-left: 24px;
  }

  .notice-search-inner {
    width: 380px;
    height: 46px;
  }

  .notice-search-select {
    font-size: 15px;
    line-height: 22px;
  }

  .notice-search-input {
    font-size: 14px;
    line-height: 22px;
  }

  .notice-pin-badge {
    font-size: 11px;
    line-height: 17px;
    padding: 2px 9px;
  }

  .notice-pagination {
    gap: 18px;
    margin-top: 70px;
  }

  .notice-page {
    font-size: 15px;
  }

}

@media (max-width:1200px) and (min-width:1025px) {

  .notice-inner {
    max-width: 100%;
    padding: 0 30px 60px;
  }

  .notice-top {
    margin-bottom: 26px;
  }

  .notice-item {
    padding-left: 32px;
    padding-right: 32px;
  }

  .notice-link {
    padding: 20px 0;
  }

  .notice-num {
    width: 64px;
    font-size: 14px;
    line-height: 22px;
  }

  .notice-subject {
    font-size: 18px;
    line-height: 28px;
  }

  .notice-date {
    width: 100px;
    font-size: 13px;
    line-height: 20px;
  }

  .notice-arrow {
    width: 18px;
    height: 17px;
    margin-left: 20px;
  }

  .notice-search-inner {
    width: 340px;
    height: 44px;
    padding: 0 16px;
    gap: 10px;
  }

  .notice-search-select {
    font-size: 14px;
    line-height: 20px;
    padding-right: 32px;
  }

  .notice-search-input {
    font-size: 14px;
    line-height: 20px;
  }

  .notice-search-btn {
    width: 15px;
    height: 15px;
  }

  .notice-total,
  .notice-total-num {
    font-size: 14px;
    line-height: 20px;
  }

  .notice-pin-badge {
    font-size: 11px;
    line-height: 17px;
    padding: 2px 8px;
  }

  .notice-none p {
    padding: 42px 0;
    font-size: 15px;
    line-height: 22px;
  }

  .notice-pagination {
    gap: 16px;
    margin-top: 60px;
  }

  .notice-page {
    font-size: 14px;
  }

}

@media (max-width:1024px) and (min-width:769px) {

  .notice-inner {
    max-width: 100%;
    padding: 0 24px 55px;
  }

  .notice-top {
    margin-bottom: 24px;
  }

  .notice-item {
    padding-left: 20px;
    padding-right: 20px;
  }

  .notice-link {
    padding: 18px 0;
  }

  .notice-num {
    width: 54px;
    font-size: 13px;
    line-height: 20px;
  }

  .notice-subject {
    font-size: 16px;
    line-height: 25px;
  }

  .notice-date {
    width: 90px;
    font-size: 12px;
    line-height: 18px;
  }

  .notice-arrow {
    width: 17px;
    height: 16px;
    margin-left: 16px;
  }

  .notice-search-inner {
    width: 300px;
    height: 42px;
    padding: 0 14px;
    gap: 8px;
  }

  .notice-search-select {
    font-size: 13px;
    line-height: 19px;
    padding-right: 28px;
    background-size: 9px;
  }

  .notice-search-input {
    font-size: 13px;
    line-height: 19px;
  }

  .notice-search-btn {
    width: 15px;
    height: 15px;
  }

  .notice-total,
  .notice-total-num {
    font-size: 13px;
    line-height: 19px;
  }

  .notice-pin-badge {
    font-size: 10px;
    line-height: 16px;
    padding: 2px 7px;
  }

  .notice-none p {
    padding: 36px 0;
    font-size: 14px;
    line-height: 21px;
  }

  .notice-pagination {
    gap: 14px;
    margin-top: 50px;
  }

  .notice-page {
    font-size: 13px;
  }

  .notice-page-arrow {
    width: 24px;
    height: 24px;
  }

  .notice-page-arrow.prev {
    margin-right: 10px;
  }

  .notice-page-arrow.next {
    margin-left: 10px;
  }

}

@media (max-width:768px) {

  .notice-inner {
    max-width: 100%;
    padding: 0 20px 40px;
  }

  .notice-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
  }

  .notice-total {
    font-size: 14px;
    line-height: 20px;
  }

  .notice-total-num {
    font-size: 14px;
    line-height: 20px;
  }

  .notice-search {
    width: 100%;
  }

  .notice-search-inner {
    width: 100%;
    height: 44px;
    padding: 0 16px;
    gap: 10px;
    box-sizing: border-box;
  }

  .notice-search-select {
    font-size: 14px;
    line-height: 20px;
    padding-right: 24px;
  }

  .notice-search-input {
    font-size: 14px;
    line-height: 20px;
  }

  .notice-search-btn {
    width: 16px;
    height: 16px;
  }

  .notice-item {
    padding: 0;
  }

  .notice-link {
    display: block;
    padding: 18px 0;
  }

  .notice-num {
    display: none;
  }

  .notice-subject {
    display: block;

    font-size: 16px;
    line-height: 24px;

    margin-bottom: 8px;

    word-break: keep-all;
  }

  .notice-date {
    width: auto;

    text-align: left;

    font-size: 13px;
    line-height: 20px;
  }

  .notice-arrow {
    display: none;
  }

  .notice-pin-badge {
    font-size: 11px;
    line-height: 17px;
    padding: 2px 8px;
    margin-bottom: 6px;
  }

  .notice-item--pin .notice-subject {
    color: #111;
  }

  .notice-none p {
    padding: 40px 0;
    font-size: 14px;
    line-height: 22px;
  }

  .notice-pagination {
    gap: 12px;
    margin-top: 40px;
    flex-wrap: wrap;
  }

  .notice-page {
    font-size: 14px;
  }

  .notice-page-arrow {
    width: 24px;
    height: 24px;
  }

  .notice-page-arrow.prev {
    margin-right: 8px;
  }

  .notice-page-arrow.next {
    margin-left: 8px;
  }

}

@media (max-width:480px) {

  .notice-inner {
    padding: 0 16px 36px;
  }

  .notice-top {
    gap: 14px;
    margin-bottom: 20px;
  }

  .notice-total,
  .notice-total-num {
    font-size: 13px;
    line-height: 19px;
  }

  .notice-search-inner {
    height: 42px;
    padding: 0 14px;
    gap: 8px;
  }

  .notice-search-select {
    font-size: 13px;
    line-height: 19px;
    padding-right: 20px;
    background-size: 9px;
  }

  .notice-search-input {
    font-size: 13px;
    line-height: 19px;
  }

  .notice-search-btn {
    width: 15px;
    height: 15px;
  }

  .notice-link {
    padding: 16px 0;
  }

  .notice-subject {
    font-size: 15px;
    line-height: 22px;
    margin-bottom: 6px;
  }

  .notice-date {
    font-size: 12px;
    line-height: 18px;
  }

  .notice-pin-badge {
    font-size: 10px;
    line-height: 16px;
    padding: 2px 7px;
    margin-bottom: 5px;
  }

  .notice-none p {
    padding: 36px 0;
    font-size: 13px;
    line-height: 20px;
  }

  .notice-pagination {
    gap: 10px;
    margin-top: 36px;
  }

  .notice-page {
    font-size: 13px;
  }

  .notice-page-arrow {
    width: 22px;
    height: 22px;
  }

  .notice-page-arrow.prev {
    margin-right: 6px;
  }

  .notice-page-arrow.next {
    margin-left: 6px;
  }

}

/* sub14 : 고객센터 ----------------------------------------------------------------------*/
.cs-page {
  padding-top: 60px;
}

.cs-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding-bottom: 80px;
}

/* 문의 상세보기 - 읽기 전용 필드값 */
.ui-form-grid .ui-form-field > span,
.ui-form-grid .ui-form-field > p {
  font-family: Pretendard;
  font-size: 16px;
  color: #242424;
  line-height: 24px;
  padding: 16px 0;
}

/* 문의내용 / 답변 뷰 영역 */
.ui-view-content {
  width: 100%;
  min-height: 120px;
  padding: 16px;
  background: #F5F5F5;
  border-radius: 4px;
  font-family: Pretendard;
  font-size: 16px;
  line-height: 26px;
  color: #242424;
  white-space: pre-wrap;
  word-break: break-all;
}

.ui-view-answer {
  background: #EEF4FF;
  border-left: 4px solid #2594D3;
  padding-left: 20px;
}

@media (max-width: 768px) {
  .cs-page {
    padding-top: 40px;
  }
  .ui-view-content {
    font-size: 14px;
    line-height: 22px;
    min-height: 80px;
  }
}

.file-group {
  display: flex;
  gap: 10px;
}

.file-group input {
  flex: 1;
}

.cs-agree {
  margin-top: 24px;
  padding: 24px 32px;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

.agree-box summary {
  list-style: none;
  cursor: pointer;
}

.agree-box summary::-webkit-details-marker {
  display: none;
}

.cs-agree-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.agree-toggle {
  width: 16px;
  height: 16px;
  background: url('/images/layout/select-arrow.svg') no-repeat center / contain;
  transition: transform 0.3s ease;
}

.agree-box[open] .agree-toggle {
  transform: rotate(180deg);
}

.agree-content {
  margin-top: 16px;
  font-size: 14px;
  font-family: Pretendard;
  color: #777;
  line-height: 20px;
}

.ui-board-nav {
  margin-top: 40px;
}

@media (max-width:768px){

  .cs-inner{
    padding:0 20px 60px;
  }

  .file-group{
    display:flex;
    align-items:center;
    gap:8px;
  }

  .file-group input{
    flex:1;
    min-width:0;
  }

  .file-group .ui-btn-sm,
  .file-group button{
    flex-shrink:0;
    width:100px;
    height:48px;

    padding:0 12px;

    font-size:13px;
    line-height:20px;
  }

  .cs-agree{
    margin-top:20px;
    padding:20px 16px;
  }

  .cs-agree-top{
    gap:12px;
    align-items:flex-start;
  }

  .cs-agree-top .ui-check{
    flex:1;
  }

  .agree-toggle{
    flex-shrink:0;
    margin-top:4px;
  }

  .agree-content{
    margin-top:12px;

    font-size:13px;
    line-height:20px;
  }

  .ui-board-nav{
    margin-top:32px;
  }

}

/* sub14 : 고객센터
--------------------------------------------------*/

.cs-page {
  padding-top: 60px;
}

.cs-inner {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding-bottom: 80px;
  box-sizing: border-box;
}


/* 문의 상세보기 - 읽기 전용 필드값 */
.ui-form-grid .ui-form-field > span,
.ui-form-grid .ui-form-field > p {
  font-family: Pretendard;
  font-size: 16px;
  color: #242424;
  line-height: 24px;
  padding: 16px 0;
}


/* 문의내용 / 답변 뷰 영역 */
.ui-view-content {
  width: 100%;
  min-height: 120px;
  padding: 16px;

  background: #F5F5F5;
  border-radius: 4px;

  font-family: Pretendard;
  font-size: 16px;
  line-height: 26px;
  color: #242424;

  white-space: pre-wrap;
  word-break: break-all;

  box-sizing: border-box;
}

.ui-view-answer {
  background: #EEF4FF;
  border-left: 4px solid #2594D3;
  padding-left: 20px;
}


/* 첨부파일 */
.file-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.file-group input {
  flex: 1;
  min-width: 0;
}


/* 동의 영역 */
.cs-agree {
  margin-top: 24px;
  padding: 24px 32px;

  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  box-sizing: border-box;
}

.agree-box summary {
  list-style: none;
  cursor: pointer;
}

.agree-box summary::-webkit-details-marker {
  display: none;
}

.cs-agree-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.agree-toggle {
  width: 16px;
  height: 16px;

  background: url('/images/layout/select-arrow.svg')
    no-repeat center / contain;

  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.agree-box[open] .agree-toggle {
  transform: rotate(180deg);
}

.agree-content {
  margin-top: 16px;

  font-size: 14px;
  font-family: Pretendard;
  color: #777;
  line-height: 20px;

  word-break: keep-all;
}

.ui-board-nav {
  margin-top: 40px;
}


/* =========================================================
   sub28 : 고객센터 - 문의리스트
=========================================================*/

.notice-category {
  display: inline-block;

  width: 80px;
  padding: 4px 16px;

  border-radius: 999px;
  margin-right: 8px;

  color: inherit;
  text-align: center;

  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;

  box-sizing: border-box;
  white-space: nowrap;
}

.notice-writer {
  color: #898989;
  font-family: Pretendard;
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}


/* 문의 상태 */
.notice-category.red {
  color: #E53935;
  border: 1px solid #E53935;
}

.notice-category.blue {
  color: #1E6BFF;
  border: 1px solid #1E6BFF;
}

.notice-category.green {
  color: #00A86B;
  border: 1px solid #00A86B;
}

.notice-category.gray {
  color: #888;
  border: 1px solid #ccc;
}


@media (max-width:1440px) and (min-width:1201px) {

  .cs-page {
    padding-top: 55px;
  }

  .cs-inner {
    max-width: 1360px;
    padding: 0 20px 70px;
  }

  .ui-form-grid .ui-form-field > span,
  .ui-form-grid .ui-form-field > p {
    font-size: 15px;
    line-height: 23px;
    padding: 15px 0;
  }

  .ui-view-content {
    min-height: 110px;
    padding: 15px;

    font-size: 15px;
    line-height: 25px;
  }

  .ui-view-answer {
    padding-left: 18px;
  }

  .file-group {
    gap: 8px;
  }

  .cs-agree {
    margin-top: 22px;
    padding: 22px 28px;
  }

  .agree-content {
    font-size: 13px;
    line-height: 20px;
  }

  .ui-board-nav {
    margin-top: 36px;
  }

  .notice-category {
    width: 76px;
    padding: 3px 12px;

    font-size: 13px;
    line-height: 22px;
  }

  .notice-writer {
    font-size: 14px;
    line-height: 22px;
  }

}



@media (max-width:1200px) and (min-width:1025px) {

  .cs-page {
    padding-top: 50px;
  }

  .cs-inner {
    max-width: 100%;
    padding: 0 30px 60px;
  }

  .ui-form-grid .ui-form-field > span,
  .ui-form-grid .ui-form-field > p {
    font-size: 14px;
    line-height: 22px;
    padding: 14px 0;
  }

  .ui-view-content {
    min-height: 100px;
    padding: 14px;

    font-size: 14px;
    line-height: 23px;
  }

  .ui-view-answer {
    padding-left: 16px;
  }

  .file-group {
    gap: 8px;
  }

  .cs-agree {
    margin-top: 20px;
    padding: 20px 24px;
  }

  .agree-content {
    margin-top: 14px;

    font-size: 13px;
    line-height: 19px;
  }

  .ui-board-nav {
    margin-top: 34px;
  }

  .notice-category {
    width: 72px;
    padding: 3px 10px;

    font-size: 13px;
    line-height: 21px;
  }

  .notice-writer {
    font-size: 14px;
    line-height: 21px;
  }

}


@media (max-width:1024px) and (min-width:769px) {

  .cs-page {
    padding-top: 45px;
  }

  .cs-inner {
    max-width: 100%;
    padding: 0 24px 55px;
  }

  .ui-form-grid .ui-form-field > span,
  .ui-form-grid .ui-form-field > p {
    font-size: 13px;
    line-height: 21px;
    padding: 13px 0;
  }

  .ui-view-content {
    min-height: 90px;
    padding: 13px;

    font-size: 13px;
    line-height: 21px;
  }

  .ui-view-answer {
    padding-left: 14px;
  }

  .file-group {
    gap: 8px;
  }

  .file-group input {
    min-width: 0;
  }

  .file-group .ui-btn-sm,
  .file-group button {
    flex-shrink: 0;

    width: 90px;
    height: 46px;

    padding: 0 10px;

    font-size: 12px;
    line-height: 18px;
  }

  .cs-agree {
    margin-top: 18px;
    padding: 18px 20px;
  }

  .cs-agree-top {
    gap: 12px;
  }

  .agree-toggle {
    width: 15px;
    height: 15px;
  }

  .agree-content {
    margin-top: 12px;

    font-size: 12px;
    line-height: 19px;
  }

  .ui-board-nav {
    margin-top: 30px;
  }

  .notice-category {
    width: 68px;
    padding: 2px 8px;

    font-size: 12px;
    line-height: 20px;
  }

  .notice-writer {
    font-size: 13px;
    line-height: 20px;
  }

}

@media (max-width:768px) {

  .cs-page {
    padding-top: 40px;
  }

  .cs-inner {
    max-width: 100%;
    padding: 0 20px 60px;
  }

  .ui-form-grid .ui-form-field > span,
  .ui-form-grid .ui-form-field > p {
    font-size: 14px;
    line-height: 22px;
    padding: 12px 0;

    word-break: keep-all;
  }

  .ui-view-content {
    min-height: 80px;
    padding: 14px;

    font-size: 14px;
    line-height: 22px;

    overflow-wrap: anywhere;
  }

  .ui-view-answer {
    padding-left: 14px;
  }

  .file-group {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .file-group input {
    flex: 1;
    min-width: 0;
  }

  .file-group .ui-btn-sm,
  .file-group button {
    flex-shrink: 0;

    width: 100px;
    height: 48px;

    padding: 0 12px;

    font-size: 13px;
    line-height: 20px;
  }

  .cs-agree {
    margin-top: 20px;
    padding: 20px 16px;
  }

  .cs-agree-top {
    gap: 12px;
    align-items: flex-start;
  }

  .cs-agree-top .ui-check {
    flex: 1;
    min-width: 0;
  }

  .agree-toggle {
    flex-shrink: 0;
    margin-top: 4px;
  }

  .agree-content {
    margin-top: 12px;

    font-size: 13px;
    line-height: 20px;

    word-break: keep-all;
  }

  .ui-board-nav {
    margin-top: 32px;
  }

  .notice-category {
    width: auto;
    min-width: 64px;

    padding: 2px 10px;
    margin-right: 6px;
    margin-bottom: 4px;

    font-size: 12px;
    line-height: 20px;

    vertical-align: middle;
  }

  .notice-writer {
    display: block;

    font-size: 13px;
    line-height: 20px;
  }

}


@media (max-width:480px) {

  .cs-page {
    padding-top: 35px;
  }

  .cs-inner {
    padding: 0 16px 50px;
  }

  .ui-form-grid .ui-form-field > span,
  .ui-form-grid .ui-form-field > p {
    font-size: 13px;
    line-height: 20px;
    padding: 11px 0;
  }

  .ui-view-content {
    min-height: 70px;
    padding: 12px;

    font-size: 13px;
    line-height: 21px;
  }

  .ui-view-answer {
    padding-left: 12px;
  }

  .file-group {
    gap: 6px;
  }

  .file-group .ui-btn-sm,
  .file-group button {
    width: 88px;
    height: 44px;

    padding: 0 8px;

    font-size: 12px;
    line-height: 18px;
  }

  .cs-agree {
    margin-top: 18px;
    padding: 16px 14px;
  }

  .cs-agree-top {
    gap: 8px;
  }

  .agree-toggle {
    width: 14px;
    height: 14px;
    margin-top: 3px;
  }

  .agree-content {
    margin-top: 10px;

    font-size: 12px;
    line-height: 18px;
  }

  .ui-board-nav {
    margin-top: 28px;
  }


  .notice-category {
    min-width: 58px;

    padding: 2px 8px;
    margin-right: 5px;
    margin-bottom: 3px;

    font-size: 11px;
    line-height: 18px;
  }

  .notice-writer {
    font-size: 12px;
    line-height: 18px;
  }

}

/* sub28 : 고객센터 - 문의리스트 ----------------------------------------------------------------------*/
.notice-category {
  display: inline-block;

  width: 80px;
  padding: 4px 16px;
  border-radius: 999px;
  margin-right: 8px;

  color: inherit;
  text-align: center;
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
}

.notice-writer {
  color: #898989;
  font-family: Pretendard;
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}

.notice-category.red {
  color: #E53935;
  border: 1px solid #E53935;
}

.notice-category.blue {
  color: #1E6BFF;
  border: 1px solid #1E6BFF;
}

.notice-category.green {
  color: #00A86B;
  border: 1px solid #00A86B;
}

.notice-category.gray {
  color: #888;
  border: 1px solid #ccc;
}

/* sub28 : 고객센터 - 문의리스트
--------------------------------------------------*/

.notice-category {
  display: inline-block;

  width: 80px;
  padding: 4px 16px;
  margin-right: 8px;

  border-radius: 999px;

  color: inherit;
  text-align: center;

  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;

  box-sizing: border-box;
  white-space: nowrap;
}

.notice-writer {
  color: #898989;
  font-family: Pretendard;
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}


/* 문의 상태 */
.notice-category.red {
  color: #E53935;
  border: 1px solid #E53935;
}

.notice-category.blue {
  color: #1E6BFF;
  border: 1px solid #1E6BFF;
}

.notice-category.green {
  color: #00A86B;
  border: 1px solid #00A86B;
}

.notice-category.gray {
  color: #888;
  border: 1px solid #ccc;
}

@media (max-width:1440px) and (min-width:1201px) {

  .notice-category {
    width: 76px;
    padding: 3px 12px;

    margin-right: 7px;

    font-size: 13px;
    line-height: 22px;
  }

  .notice-writer {
    font-size: 14px;
    line-height: 22px;
  }

}

@media (max-width:1200px) and (min-width:1025px) {

  .notice-category {
    width: 72px;
    padding: 3px 10px;

    margin-right: 6px;

    font-size: 13px;
    line-height: 21px;
  }

  .notice-writer {
    font-size: 14px;
    line-height: 21px;
  }

}

@media (max-width:1024px) and (min-width:769px) {

  .notice-category {
    width: 68px;
    padding: 2px 8px;

    margin-right: 6px;

    font-size: 12px;
    line-height: 20px;
  }

  .notice-writer {
    font-size: 13px;
    line-height: 20px;
  }

}

@media (max-width:768px) {

  .notice-category {
    width: auto;
    min-width: 64px;

    padding: 2px 10px;
    margin-right: 6px;
    margin-bottom: 4px;

    font-size: 12px;
    line-height: 20px;

    vertical-align: middle;
  }

  .notice-writer {
    display: block;

    font-size: 13px;
    line-height: 20px;
  }

}

@media (max-width:480px) {

  .notice-category {
    min-width: 58px;

    padding: 2px 8px;
    margin-right: 5px;
    margin-bottom: 3px;

    font-size: 11px;
    line-height: 18px;
  }

  .notice-writer {
    font-size: 12px;
    line-height: 18px;
  }

}

/* sub28 : 고객센터 - 패스워드 입력 ----------------------------------------------------------------------*/
.page-desc {
  margin-top: 8px;
  font-size: 15px;
  color: #888;
  line-height: 24px;
}

.cs-password-page {
  position: relative;
  padding-bottom: 160px;
  background: #fff;

  overflow: hidden;
}

.cs-password-inner {
  width: 450px;
  margin: 0 auto;
  padding-bottom: 80px;
}

.login-box {
  margin-top: 40px;
}

.login-box form{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.login-field {
  display: flex;
  align-items: center;
  border: 1px solid #D9D9D9;
  border-radius: 6px;
  background: #F5F5F5;
  overflow: hidden;
}

.login-field-icon {
  flex-shrink: 0;
  width: 52px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-btn-group {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}

.login-btn {
    width:100%;
    height:56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-family: Pretendard;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  border: none;
  box-sizing: border-box;
}

.login-btn.outline {
  background: #fff;
  border: 1px solid #D9D9D9;
  color: #555;
}

.login-btn.primary {
  background: #2594D3;
  color: #fff;
}

.login-btn.primary:hover {
  background: #1a7bb5;
}

/* sub28 : 고객센터 - 패스워드 입력 ----------------------------------------------------------------------*/
.page-desc {
  margin-top: 8px;
  font-size: 15px;
  color: #888;
  line-height: 24px;
}

.cs-password-page {
  position: relative;
  padding-bottom: 160px;
  background: #fff;
  overflow: hidden;
}

.cs-password-inner {
  width: 450px;
  margin: 0 auto;
  padding-bottom: 80px;
}

.login-box {
  margin-top: 40px;
}

.login-box form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.login-field {
  display: flex;
  align-items: center;
  border: 1px solid #D9D9D9;
  border-radius: 6px;
  background: #F5F5F5;
  overflow: hidden;
}

.login-field-icon {
  flex-shrink: 0;
  width: 52px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-btn-group {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}

.login-btn {
  width: 100%;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-family: Pretendard;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  border: none;
  box-sizing: border-box;
}

.login-btn.outline {
  background: #fff;
  border: 1px solid #D9D9D9;
  color: #555;
}

.login-btn.primary {
  background: #2594D3;
  color: #fff;
}

.login-btn.primary:hover {
  background: #1a7bb5;
}

@media (max-width:1440px) and (min-width:1201px) {

  .cs-password-page {
    padding-bottom: 140px;
  }

  .cs-password-inner {
    width: 420px;
    padding-bottom: 70px;
  }

  .login-box {
    margin-top: 36px;
  }

  .login-field-icon {
    width: 50px;
    height: 54px;
  }

  .login-btn {
    height: 54px;
    font-size: 15px;
  }

}

@media (max-width:1200px) and (min-width:1025px) {

  .cs-password-page {
    padding-bottom: 120px;
  }

  .cs-password-inner {
    width: 400px;
    padding-bottom: 60px;
  }

  .page-desc {
    font-size: 14px;
    line-height: 22px;
  }

  .login-box {
    margin-top: 32px;
  }

  .login-field-icon {
    width: 48px;
    height: 52px;
  }

  .login-btn-group {
    gap: 10px;
    margin-top: 10px;
  }

  .login-btn {
    height: 52px;
    font-size: 14px;
  }

}

@media (max-width:1024px) and (min-width:769px) {

  .cs-password-page {
    padding-bottom: 100px;
  }

  .cs-password-inner {
    width: 380px;
    padding-bottom: 50px;
  }

  .page-desc {
    font-size: 14px;
    line-height: 21px;
  }

  .login-box {
    margin-top: 28px;
  }

  .login-field {
    border-radius: 5px;
  }

  .login-field-icon {
    width: 46px;
    height: 50px;
  }

  .login-btn-group {
    gap: 8px;
    margin-top: 10px;
  }

  .login-btn {
    height: 50px;
    border-radius: 5px;
    font-size: 14px;
  }

}

@media (max-width:768px) {

  .cs-password-page {
    padding-bottom: 80px;
  }

  .cs-password-inner {
    width: 100%;
    max-width: none;
    padding: 0 20px 60px;
    box-sizing: border-box;
  }

  .page-desc {
    font-size: 14px;
    line-height: 21px;
  }

  .login-box {
    margin-top: 24px;
  }

  .login-field-icon {
    width: 46px;
    height: 52px;
  }

  .login-btn-group {
    gap: 8px;
    margin-top: 10px;
  }

  .login-btn {
    height: 52px;
    font-size: 14px;
    border-radius: 5px;
  }

}

@media (max-width:480px) {

  .cs-password-page {
    padding-bottom: 60px;
  }

  .cs-password-inner {
    padding: 0 16px 50px;
  }

  .page-desc {
    margin-top: 6px;
    font-size: 13px;
    line-height: 20px;
  }

  .login-box {
    margin-top: 20px;
  }

  .login-box form {
    gap: 6px;
  }

  .login-field-icon {
    width: 42px;
    height: 48px;
  }

  .login-btn-group {
    gap: 6px;
    margin-top: 8px;
  }

  .login-btn {
    height: 48px;
    font-size: 13px;
  }

}

/* sub15 sub16 : 홍보뉴스, 갤러리----------------------------------------------------------------------*/
.promo-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding-bottom: 80px;
}

.promo-title {
  text-align: center;
  font-size: 40px;
  font-weight: 800;
  margin-bottom: 40px;
}

.promo-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}

.promo-total strong {
  color: #2594D3;
}

.promo-feature-link {
  display: flex;
  gap: 80px;
  background: #f3f3f3;
  padding: 30px 80px 30px 30px;
  border-radius: 18px;
  align-items: center;

  transition: all 0.25s ease;
}

.promo-feature-img {
  width: 660px;
  height: 378px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
}

.promo-feature-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.promo-feature-content h3 {
  color: #000;
  font-family: Pretendard;
  font-size: 30px;
  font-weight: 700;
  line-height: 40px;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}

.promo-feature-content p {
  color: #333;
  font-family: Pretendard;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  margin-bottom: 100px;
}

.promo-date {
  color: #898989;
  font-family: "Wanted Sans";
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
}

.promo-feature-link:hover {
  background: #1A2A4C;
  transform: translateY(-6px);
  box-shadow: 0 4px 4px rgba(0,0,0,0.25);
}

.promo-feature-link:hover h3,
.promo-feature-link:hover p,
.promo-feature-link:hover .promo-date {
  color: #fff;
}

.promo-list {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.promo-card {
  text-decoration: none;

  display: block;
  transition: all 0.25s ease;
}

.promo-thumb {
  width: 332px;
  height: 212px;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
}

.promo-thumb img {
  width: 100%;
  object-fit: cover;

  transition: transform 0.4s ease;
}

.promo-card-text {
  padding: 32px;
  height: 176px;
  border-radius: 0 0 12px 12px;
  background: #f3f3f3;

  transition: all 0.25s ease;
}

.promo-card-title {
  color: #000;
  font-family: Pretendard;
  font-size: 18px;
  font-weight: 600;
  line-height: 30px;
  margin-bottom: 24px;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


.promo-card:hover {
  transform: translateY(-6px);
}

.promo-card:hover .promo-card-text {
  background: #1A2A4C;
}

.promo-card:hover .promo-card-title,
.promo-card:hover .promo-date {
  color: #fff;
}

.promo-card:hover .promo-thumb img {
  transform: scale(1.05);
}

/* sub15 sub16 : 홍보뉴스, 갤러리----------------------------------------------------------------------*/
.promo-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding-bottom: 80px;
}

.promo-title {
  text-align: center;
  font-size: 40px;
  font-weight: 800;
  margin-bottom: 40px;
}

.promo-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}

.promo-total strong {
  color: #2594D3;
}

.promo-feature-link {
  display: flex;
  gap: 80px;
  background: #f3f3f3;
  padding: 30px 80px 30px 30px;
  border-radius: 18px;
  align-items: center;
  transition: all 0.25s ease;
}

.promo-feature-img {
  width: 660px;
  height: 378px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
}

.promo-feature-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.promo-feature-content h3 {
  color: #000;
  font-family: Pretendard;
  font-size: 30px;
  font-weight: 700;
  line-height: 40px;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}

.promo-feature-content p {
  color: #333;
  font-family: Pretendard;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  margin-bottom: 100px;
}

.promo-date {
  color: #898989;
  font-family: "Wanted Sans";
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
}

.promo-feature-link:hover {
  background: #1A2A4C;
  transform: translateY(-6px);
  box-shadow: 0 4px 4px rgba(0,0,0,0.25);
}

.promo-feature-link:hover h3,
.promo-feature-link:hover p,
.promo-feature-link:hover .promo-date {
  color: #fff;
}

.promo-list {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.promo-card {
  text-decoration: none;
  display: block;
  transition: all 0.25s ease;
}

.promo-thumb {
  width: 100%;
  height: 212px;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
}

.promo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.promo-card-text {
  padding: 32px;
  height: 176px;
  border-radius: 0 0 12px 12px;
  background: #f3f3f3;
  transition: all 0.25s ease;
  box-sizing: border-box;
}

.promo-card-title {
  color: #000;
  font-family: Pretendard;
  font-size: 18px;
  font-weight: 600;
  line-height: 30px;
  margin-bottom: 24px;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.promo-card:hover {
  transform: translateY(-6px);
}

.promo-card:hover .promo-card-text {
  background: #1A2A4C;
}

.promo-card:hover .promo-card-title,
.promo-card:hover .promo-date {
  color: #fff;
}

.promo-card:hover .promo-thumb img {
  transform: scale(1.05);
}


/* 1440 ~ 1201px */
@media (max-width:1440px) and (min-width:1201px) {

  .promo-inner {
    max-width: 1360px;
    padding-bottom: 70px;
  }

  .promo-title {
    font-size: 38px;
    margin-bottom: 36px;
  }

  .promo-top {
    margin-bottom: 36px;
  }

  .promo-feature-link {
    gap: 50px;
    padding: 26px 50px 26px 26px;
  }

  .promo-feature-img {
    width: 580px;
    height: 330px;
  }

  .promo-feature-content h3 {
    font-size: 28px;
    line-height: 38px;
  }

  .promo-feature-content p {
    font-size: 15px;
    line-height: 23px;
    margin-bottom: 70px;
  }

  .promo-list {
    gap: 20px;
  }

  .promo-thumb {
    height: 200px;
  }

  .promo-card-text {
    padding: 28px;
    height: 165px;
  }

  .promo-card-title {
    font-size: 17px;
    line-height: 28px;
    margin-bottom: 20px;
  }

}


/* 1200 ~ 1025px */
@media (max-width:1200px) and (min-width:1025px) {

  .promo-inner {
    padding: 0 30px 60px;
    box-sizing: border-box;
  }

  .promo-title {
    font-size: 34px;
    margin-bottom: 32px;
  }

  .promo-top {
    margin-bottom: 32px;
  }

  .promo-feature-link {
    gap: 32px;
    padding: 24px;
  }

  .promo-feature-img {
    width: 420px;
    height: 260px;
  }

  .promo-feature-content {
    min-width: 0;
  }

  .promo-feature-content h3 {
    font-size: 26px;
    line-height: 36px;
  }

  .promo-feature-content p {
    font-size: 15px;
    line-height: 23px;
    margin-bottom: 40px;
  }

  .promo-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .promo-thumb {
    height: 200px;
  }

  .promo-card-text {
    padding: 24px;
    height: 155px;
  }

  .promo-card-title {
    font-size: 17px;
    line-height: 27px;
    margin-bottom: 18px;
  }

}


/* 1024 ~ 769px */
@media (max-width:1024px) and (min-width:769px) {

  .promo-inner {
    padding: 0 24px 50px;
    box-sizing: border-box;
  }

  .promo-title {
    font-size: 30px;
    margin-bottom: 28px;
  }

  .promo-top {
    margin-bottom: 28px;
  }

  .promo-feature-link {
    gap: 24px;
    padding: 20px;
    border-radius: 14px;
  }

  .promo-feature-img {
    width: 320px;
    height: 210px;
  }

  .promo-feature-content {
    min-width: 0;
  }

  .promo-feature-content h3 {
    font-size: 22px;
    line-height: 30px;
    margin-bottom: 12px;
  }

  .promo-feature-content p {
    font-size: 14px;
    line-height: 21px;
    margin-bottom: 30px;

    word-break: keep-all;
  }

  .promo-date {
    font-size: 13px;
    line-height: 20px;
  }

  .promo-list {
    margin-top: 32px;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .promo-thumb {
    height: 170px;
  }

  .promo-card-text {
    padding: 20px;
    height: 140px;
  }

  .promo-card-title {
    font-size: 16px;
    line-height: 25px;
    margin-bottom: 14px;
  }

}


/* 768px 이하 */
@media (max-width:768px) {

  .promo-inner {
    padding: 0 20px 40px;
  }

  .promo-title {
    font-size: 28px;
    margin-bottom: 24px;
  }

  .promo-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 24px;
  }

  .promo-feature-link {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 16px;
    border-radius: 16px;
  }

  .promo-feature-img {
    width: 100%;
    height: 200px;
  }

  .promo-feature-content {
    width: 100%;
    min-width: 0;
  }

  .promo-feature-content h3 {
    font-size: 18px;
    line-height: 28px;
    margin-bottom: 12px;
  }

  .promo-feature-content p {
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 20px;
    word-break: keep-all;
  }

  .promo-feature-content p br {
    display: none;
  }

  .promo-date {
    font-size: 13px;
  }

  .promo-list {
    margin-top: 24px;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .promo-card {
    display: flex;
    gap: 12px;
  }

  .promo-thumb {
    width: 120px;
    height: 90px;
    flex-shrink: 0;
    border-radius: 12px;
  }

  .promo-card-text {
    flex: 1;
    height: auto;
    min-width: 0;
    padding: 0;
    background: none;
  }

  .promo-card-title {
    font-size: 15px;
    line-height: 22px;
    margin-bottom: 8px;
    -webkit-line-clamp: 2;
  }

  .promo-card:hover {
    transform: none;
  }

  .promo-card:hover .promo-card-text {
    background: none;
  }

  .promo-card:hover .promo-card-title {
    color: #000;
  }

  .promo-card:hover .promo-date {
    color: #898989;
  }

  .promo-card:hover .promo-thumb img {
    transform: none;
  }

}


/* 480px 이하 */
@media (max-width:480px) {

  .promo-inner {
    padding: 0 16px 36px;
  }

  .promo-title {
    font-size: 26px;
    margin-bottom: 20px;
  }

  .promo-top {
    gap: 8px;
    margin-bottom: 20px;
  }

  .promo-feature-link {
    gap: 16px;
    padding: 14px;
    border-radius: 14px;
  }

  .promo-feature-img {
    height: 170px;
    border-radius: 8px;
  }

  .promo-feature-content h3 {
    font-size: 17px;
    line-height: 25px;
  }

  .promo-feature-content p {
    font-size: 13px;
    line-height: 20px;
    margin-bottom: 16px;
  }

  .promo-date {
    font-size: 12px;
    line-height: 18px;
  }

  .promo-list {
    margin-top: 20px;
    gap: 14px;
  }

  .promo-card {
    gap: 10px;
  }

  .promo-thumb {
    width: 104px;
    height: 78px;
    border-radius: 10px;
  }

  .promo-card-title {
    font-size: 14px;
    line-height: 21px;
    margin-bottom: 6px;
  }

}

/* sub17 : 교욱/세미나----------------------------------------------------------------------*/
.edu-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding-bottom: 80px;
}

.edu-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.edu-filter {
  border: none;
  outline: none;

  height: 48px;
  padding: 0 40px 0 20px;

  border-radius: 999px;
  background: #f3f3f3 url('/images/layout/select-arrow.svg') no-repeat right 16px center / 10px;

  font-family: Pretendard;
  font-size: 16px;
  font-weight: 600;
  color: #333;

  cursor: pointer;
  appearance: none;
}

.edu-head {
  display: grid;
  grid-template-columns: 160px 1fr 280px 280px 160px;
  padding: 16px 0;
  border-top: 2px solid #333;
  border-bottom: 1px solid #ddd;
  background: #F4F4F4;
  
  color: #000;
  font-family: Pretendard;
  text-align: center;
  font-size: 15px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px; 
}

.edu-row {
  display: grid;
  grid-template-columns: 160px 1fr 280px 280px 160px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #eee;

  text-decoration: none;
  color: #000;

  transition: all 0.2s;
}

.edu-row:hover {
  background: #F5F5F5;
}

.edu-status {
  display: inline-block;
  margin: 0 auto;
  width: 80px;
  padding: 4px 16px;
  border-radius: 999px;

  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px; 
  text-align: center;
}

.edu-status.ing {
  background: #26B988;
  color: #fff;
}

.edu-status.end {
  background: #CE4242;
  color: #fff;
}

.edu-status.finish {
  background: #616161;
  color: #fff;
}

.edu-name {
  color: #000;
  font-family: Pretendard;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: -0.02em;
}

.edu-date {
  color: #000;
  text-align: center;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.edu-count {
  color: #000;
  text-align: center;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}


/* sub17 : 교육/세미나----------------------------------------------------------------------*/
.edu-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding-bottom: 80px;
}

.edu-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.edu-filter {
  border: none;
  outline: none;

  height: 48px;
  padding: 0 40px 0 20px;

  border-radius: 999px;
  background: #f3f3f3 url('/images/layout/select-arrow.svg') no-repeat right 16px center / 10px;

  font-family: Pretendard;
  font-size: 16px;
  font-weight: 600;
  color: #333;

  cursor: pointer;
  appearance: none;
}

.edu-head {
  display: grid;
  grid-template-columns: 160px 1fr 280px 280px 160px;
  padding: 16px 0;
  border-top: 2px solid #333;
  border-bottom: 1px solid #ddd;
  background: #F4F4F4;

  color: #000;
  font-family: Pretendard;
  text-align: center;
  font-size: 15px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
}

.edu-row {
  display: grid;
  grid-template-columns: 160px 1fr 280px 280px 160px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #eee;

  text-decoration: none;
  color: #000;

  transition: all 0.2s;
}

.edu-row:hover {
  background: #F5F5F5;
}

.edu-status {
  display: inline-block;
  margin: 0 auto;
  width: 80px;
  padding: 4px 16px;
  border-radius: 999px;

  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
  box-sizing: border-box;
}

.edu-status.ing {
  background: #26B988;
  color: #fff;
}

.edu-status.end {
  background: #CE4242;
  color: #fff;
}

.edu-status.finish {
  background: #616161;
  color: #fff;
}

.edu-name {
  min-width: 0;
  color: #000;
  font-family: Pretendard;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: -0.02em;
}

.edu-date {
  color: #000;
  text-align: center;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.edu-count {
  color: #000;
  text-align: center;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

@media (max-width:1440px) and (min-width:1201px) {

  .edu-inner {
    max-width: 1360px;
    padding-bottom: 70px;
  }

  .edu-top {
    margin-bottom: 28px;
  }

  .edu-filter {
    height: 46px;
    font-size: 15px;
  }

  .edu-head,
  .edu-row {
    grid-template-columns: 140px 1fr 240px 240px 140px;
  }

  .edu-head {
    padding: 15px 0;
    font-size: 14px;
  }

  .edu-row {
    padding: 18px 0;
  }

  .edu-status {
    width: 76px;
    padding: 3px 10px;
    font-size: 13px;
    line-height: 22px;
  }

  .edu-name {
    font-size: 19px;
    line-height: 30px;
  }

  .edu-date,
  .edu-count {
    font-size: 15px;
    line-height: 23px;
  }

}

@media (max-width:1200px) and (min-width:1025px) {

  .edu-inner {
    padding: 0 30px 60px;
    box-sizing: border-box;
  }

  .edu-top {
    margin-bottom: 26px;
  }

  .edu-filter {
    height: 46px;
    padding-left: 18px;
    padding-right: 36px;
    font-size: 15px;
    background-position: right 14px center;
  }

  .edu-head,
  .edu-row {
    grid-template-columns: 110px 1fr 170px 170px 110px;
  }

  .edu-head {
    padding: 14px 0;
    font-size: 14px;
  }

  .edu-row {
    padding: 18px 0;
  }

  .edu-status {
    width: 70px;
    padding: 3px 8px;
    font-size: 13px;
    line-height: 21px;
  }

  .edu-name {
    font-size: 18px;
    line-height: 28px;
  }

  .edu-date,
  .edu-count {
    font-size: 14px;
    line-height: 22px;
  }

}

@media (max-width:1024px) and (min-width:769px) {

  .edu-inner {
    padding: 0 24px 50px;
    box-sizing: border-box;
  }

  .edu-top {
    margin-bottom: 24px;
  }

  .edu-filter {
    height: 44px;
    padding-left: 16px;
    padding-right: 34px;

    font-size: 14px;
    background-position: right 13px center;
  }

  .edu-head,
  .edu-row {
    grid-template-columns: 90px 1fr 130px 130px 90px;
  }

  .edu-head {
    padding: 13px 0;
    font-size: 13px;
    line-height: 18px;
  }

  .edu-row {
    padding: 16px 0;
  }

  .edu-status {
    width: 64px;
    padding: 3px 6px;

    font-size: 12px;
    line-height: 20px;
  }

  .edu-name {
    font-size: 16px;
    line-height: 25px;
    padding-right: 12px;

    word-break: keep-all;
  }

  .edu-date,
  .edu-count {
    font-size: 13px;
    line-height: 20px;
  }

}

@media (max-width:768px) {

  .edu-inner {
    padding: 0 20px 40px;
  }

  .edu-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
  }

  .edu-filter {
    width: 100%;
    height: 44px;
    font-size: 14px;
  }

  .edu-head {
    display: none;
  }

  .edu-row {
    display: block;

    padding: 20px 16px;

    border: 1px solid #e5e5e5;
    border-radius: 12px;

    margin-bottom: 12px;

    background: #fff;
  }

  .edu-row:hover {
    background: #fff;
  }

  .edu-status {
    margin: 0 0 12px;
    padding: 6px 2px;

    width: 64px;
    font-size: 12px;
    line-height: 16px;
  }

  .edu-name {
    display: block;

    font-size: 18px;
    line-height: 26px;

    margin-bottom: 12px;
    padding-right: 0;

    word-break: keep-all;
  }

  .edu-date,
  .edu-count {
    display: block;

    text-align: left;

    font-size: 14px;
    line-height: 20px;

    color: #666;
  }

  .edu-date {
    margin-bottom: 4px;
  }

}

@media (max-width:480px) {

  .edu-inner {
    padding: 0 16px 36px;
  }

  .edu-top {
    gap: 8px;
    margin-bottom: 16px;
  }

  .edu-filter {
    height: 42px;
    padding-left: 14px;
    padding-right: 32px;
    font-size: 13px;
    background-position: right 12px center;
  }

  .edu-row {
    padding: 16px 14px;
    margin-bottom: 10px;
    border-radius: 10px;
  }

  .edu-status {
    width: 60px;
    margin-bottom: 10px;
    padding: 5px 2px;
    font-size: 11px;
    line-height: 15px;
  }

  .edu-name {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 10px;
  }

  .edu-date,
  .edu-count {
    font-size: 13px;
    line-height: 19px;
  }

}

/* sub18 : 게시판 상세----------------------------------------------------------------------*/
.promo-detail-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding-bottom: 80px;
}

.promo-detail-page-title {
  color: #333;
  text-align: center;
  font-family: Pretendard;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 48px;

  margin-bottom: 60px;
}

.promo-detail-head {
  padding: 24px 40px;

  border-top: 2px solid #222;
  border-bottom: 1px solid #eee;

  margin-bottom: 40px;
}

.promo-detail-title {
  color: #000;
  font-family: Pretendard;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 48px;

  margin-bottom: 12px;
}

.promo-detail-meta {
  display: flex;
  gap: 20px;
}

.promo-detail-meta span {
  color: #888;
  font-family: Pretendard;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.promo-detail-meta span strong {
  color: #555555;
  font-weight: 500;
}

.promo-detail-img {
  margin: 40px 0;
  text-align: center;
}

.promo-detail-img img {
  max-width: 800px;
  width: 100%;
}

.promo-detail-content {
  color: #000;
  font-family: Pretendard;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px; 

  padding: 40px;
  border-bottom: 1px solid #eee;
}

.promo-detail-content p {
  margin-bottom: 20px;
}

.promo-detail-content p img {
  display: block;
}

/* sub18 : 게시판 상세----------------------------------------------------------------------*/
.promo-detail-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding-bottom: 80px;
}

.promo-detail-page-title {
  color: #333;
  text-align: center;
  font-family: Pretendard;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 48px;
  margin-bottom: 60px;
}

.promo-detail-head {
  padding: 24px 40px;
  border-top: 2px solid #222;
  border-bottom: 1px solid #eee;
  margin-bottom: 40px;
  box-sizing: border-box;
}

.promo-detail-title {
  color: #000;
  font-family: Pretendard;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 48px;
  margin-bottom: 12px;
  word-break: keep-all;
}

.promo-detail-meta {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.promo-detail-meta span {
  color: #888;
  font-family: Pretendard;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.promo-detail-meta span strong {
  color: #555555;
  font-weight: 500;
}

.promo-detail-img {
  margin: 40px 0;
  text-align: center;
}

.promo-detail-img img {
  max-width: 800px;
  width: 100%;
  height: auto;
}

.promo-detail-content {
  color: #000;
  font-family: Pretendard;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;

  padding: 40px;
  border-bottom: 1px solid #eee;
  box-sizing: border-box;
}

.promo-detail-content p {
  margin-bottom: 20px;
}

.promo-detail-content p img {
  display: block;
  max-width: 100%;
  height: auto;
}


/* 1440 ~ 1201px */
@media (max-width:1440px) and (min-width:1201px) {

  .promo-detail-inner {
    max-width: 1360px;
    padding-bottom: 70px;
  }

  .promo-detail-page-title {
    font-size: 30px;
    line-height: 44px;
    margin-bottom: 50px;
  }

  .promo-detail-head {
    padding: 22px 32px;
    margin-bottom: 36px;
  }

  .promo-detail-title {
    font-size: 30px;
    line-height: 44px;
  }

  .promo-detail-meta span {
    font-size: 14px;
    line-height: 22px;
  }

  .promo-detail-img {
    margin: 36px 0;
  }

  .promo-detail-content {
    padding: 36px;
    font-size: 17px;
    line-height: 27px;
  }

}


/* 1200 ~ 1025px */
@media (max-width:1200px) and (min-width:1025px) {

  .promo-detail-inner {
    padding: 0 30px 60px;
    box-sizing: border-box;
  }

  .promo-detail-page-title {
    font-size: 28px;
    line-height: 42px;
    margin-bottom: 40px;
  }

  .promo-detail-head {
    padding: 22px 28px;
    margin-bottom: 32px;
  }

  .promo-detail-title {
    font-size: 27px;
    line-height: 38px;
  }

  .promo-detail-meta {
    gap: 16px;
  }

  .promo-detail-meta span {
    font-size: 14px;
    line-height: 22px;
  }

  .promo-detail-img {
    margin: 32px 0;
  }

  .promo-detail-img img {
    max-width: 760px;
  }

  .promo-detail-content {
    padding: 32px 28px;
    font-size: 16px;
    line-height: 26px;
  }

}


/* 1024 ~ 769px */
@media (max-width:1024px) and (min-width:769px) {

  .promo-detail-inner {
    padding: 0 24px 50px;
    box-sizing: border-box;
  }

  .promo-detail-page-title {
    font-size: 26px;
    line-height: 38px;
    margin-bottom: 32px;
  }

  .promo-detail-head {
    padding: 20px 22px;
    margin-bottom: 28px;
  }

  .promo-detail-title {
    font-size: 24px;
    line-height: 34px;
  }

  .promo-detail-meta {
    gap: 12px 16px;
  }

  .promo-detail-meta span {
    font-size: 13px;
    line-height: 20px;
  }

  .promo-detail-img {
    margin: 28px 0;
  }

  .promo-detail-img img {
    max-width: 700px;
  }

  .promo-detail-content {
    padding: 28px 22px;
    font-size: 15px;
    line-height: 24px;
  }

  .promo-detail-content p {
    margin-bottom: 18px;
  }

}


/* 768px 이하 */
@media (max-width:768px) {

  .promo-detail-inner {
    padding: 0 20px 40px;
  }

  .promo-detail-page-title {
    font-size: 24px;
    line-height: 34px;
    margin-bottom: 28px;
    word-break: keep-all;
  }

  .promo-detail-head {
    padding: 20px 0;
    margin-bottom: 24px;
  }

  .promo-detail-title {
    font-size: 22px;
    line-height: 32px;
    margin-bottom: 12px;
    word-break: keep-all;
  }

  .promo-detail-meta {
    flex-wrap: wrap;
    gap: 8px 16px;
  }

  .promo-detail-meta span {
    font-size: 13px;
    line-height: 20px;
  }

  .promo-detail-img {
    margin: 24px 0;
  }

  .promo-detail-img img {
    width: 100%;
    max-width: 100%;
    border-radius: 12px;
  }

  .promo-detail-content {
    padding: 24px 0;
    font-size: 15px;
    line-height: 24px;
    word-break: keep-all;
  }

  .promo-detail-content p {
    margin-bottom: 16px;
  }

}


/* 480px 이하 */
@media (max-width:480px) {

  .promo-detail-inner {
    padding: 0 16px 36px;
  }

  .promo-detail-page-title {
    font-size: 22px;
    line-height: 32px;
    margin-bottom: 24px;
  }

  .promo-detail-head {
    padding: 16px 0;
    margin-bottom: 20px;
  }

  .promo-detail-title {
    font-size: 19px;
    line-height: 28px;
    margin-bottom: 10px;
  }

  .promo-detail-meta {
    gap: 6px 12px;
  }

  .promo-detail-meta span {
    font-size: 12px;
    line-height: 18px;
  }

  .promo-detail-img {
    margin: 20px 0;
  }

  .promo-detail-img img {
    border-radius: 8px;
  }

  .promo-detail-content {
    padding: 20px 0;
    font-size: 14px;
    line-height: 22px;
  }

  .promo-detail-content p {
    margin-bottom: 14px;
  }

}

/* sub19 : 교육 세미나 상세----------------------------------------------------------------------*/
.edu-badge {
  display: inline-block;

  width: 80px;
  padding: 4px 16px;

  border-radius: 999px;

  text-align: center;
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
}

.edu-badge.ing {
  background: #26B988;
  color: #fff;
}

.edu-detail {
  position: relative;

  padding-bottom: 80px;

  background: #fff;
}

.edu-detail-inner {
  max-width: 1400px;
  margin: 0 auto;

  padding-bottom: 80px;
}

.edu-detail-page-title {
  color: #333;
  text-align: center;
  font-family: Pretendard;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 48px;

  margin-bottom: 60px;
}

.edu-detail-head {
  padding: 24px 40px;

  border-top: 2px solid #222;
  border-bottom: 1px solid #eee;
}

.edu-detail-title {
  color: #000;
  font-family: Pretendard;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 48px;
}

.edu-detail-meta {
  display: flex;
  gap: 20px;
  margin-top: 12px;
}

.edu-detail-meta span {
  color: #888;
  font-family: Pretendard;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.edu-detail-meta span strong {
  color: #555555;
  font-weight: 500;
}

.edu-detail-title-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
}

.edu-info {
  margin-bottom: 40px;
  border-bottom: 1px solid #eee;
}

.edu-info-row {
  display: grid;
  grid-template-columns: 140px 1fr 140px 1fr;
  border-top: 1px solid #eee;
}

.edu-info-label {
  padding: 16px;

  background: #f5f5f5;

  color: #000;
  text-align: center;
  font-family: Pretendard;
  font-size: 15px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
}

.edu-info-value {
  display: flex;
  gap: 8px;

  padding: 16px;

  color: #000;
  font-family: Pretendard;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

.edu-info-value a {
  color: #2594D3;
  text-decoration: none;
  font-weight: 500;
}

.edu-info-value a:hover {
  text-decoration: underline;
}

.edu-info-value img{
  width: 20px;
  height: 20px;
}

/* sub19 : 교육 세미나 상세----------------------------------------------------------------------*/
.edu-badge {
  display: inline-block;

  width: 80px;
  padding: 4px 16px;

  border-radius: 999px;

  text-align: center;
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;

  box-sizing: border-box;
  white-space: nowrap;
}

.edu-badge.ing {
  background: #26B988;
  color: #fff;
}

.edu-detail {
  position: relative;
  padding-bottom: 80px;
  background: #fff;
}

.edu-detail-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding-bottom: 80px;
}

.edu-detail-page-title {
  color: #333;
  text-align: center;
  font-family: Pretendard;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 48px;
  margin-bottom: 60px;
}

.edu-detail-head {
  padding: 24px 40px;
  border-top: 2px solid #222;
  border-bottom: 1px solid #eee;
  box-sizing: border-box;
}

.edu-detail-title {
  min-width: 0;

  color: #000;
  font-family: Pretendard;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 48px;

  word-break: keep-all;
}

.edu-detail-meta {
  display: flex;
  gap: 20px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.edu-detail-meta span {
  color: #888;
  font-family: Pretendard;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.edu-detail-meta span strong {
  color: #555555;
  font-weight: 500;
}

.edu-detail-title-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}

.edu-info {
  margin-bottom: 40px;
  border-bottom: 1px solid #eee;
}

.edu-info-row {
  display: grid;
  grid-template-columns: 140px 1fr 140px 1fr;
  border-top: 1px solid #eee;
}

.edu-info-label {
  padding: 16px;
  background: #f5f5f5;

  color: #000;
  text-align: center;
  font-family: Pretendard;
  font-size: 15px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
  box-sizing: border-box;
}

.edu-info-value {
  display: flex;
  align-items: center;
  gap: 8px;

  padding: 16px;

  color: #000;
  font-family: Pretendard;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;

  min-width: 0;
  box-sizing: border-box;
  word-break: keep-all;
}

.edu-info-value a {
  color: #2594D3;
  text-decoration: none;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.edu-info-value a:hover {
  text-decoration: underline;
}

.edu-info-value img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}


/* 1440 ~ 1201px */
@media (max-width:1440px) and (min-width:1201px) {

  .edu-detail-inner {
    max-width: 1360px;
    padding-bottom: 70px;
  }

  .edu-detail-page-title {
    font-size: 30px;
    line-height: 44px;
    margin-bottom: 50px;
  }

  .edu-detail-head {
    padding: 22px 32px;
  }

  .edu-detail-title {
    font-size: 30px;
    line-height: 44px;
  }

  .edu-detail-meta {
    gap: 16px;
  }

  .edu-detail-meta span {
    font-size: 14px;
    line-height: 22px;
  }

  .edu-info {
    margin-bottom: 36px;
  }

  .edu-info-row {
    grid-template-columns: 120px 1fr 120px 1fr;
  }

  .edu-info-label,
  .edu-info-value {
    padding: 14px;
    font-size: 14px;
    line-height: 20px;
  }

  .edu-badge {
    width: 76px;
    padding: 3px 10px;
    font-size: 13px;
    line-height: 22px;
  }

}


/* 1200 ~ 1025px */
@media (max-width:1200px) and (min-width:1025px) {

  .edu-detail-inner {
    padding: 0 30px 60px;
    box-sizing: border-box;
  }

  .edu-detail-page-title {
    font-size: 28px;
    line-height: 42px;
    margin-bottom: 40px;
  }

  .edu-detail-head {
    padding: 22px 28px;
  }

  .edu-detail-title-wrap {
    gap: 16px;
  }

  .edu-detail-title {
    font-size: 27px;
    line-height: 38px;
  }

  .edu-detail-meta {
    gap: 14px 18px;
  }

  .edu-detail-meta span {
    font-size: 14px;
    line-height: 22px;
  }

  .edu-info {
    margin-bottom: 32px;
  }

  .edu-info-row {
    grid-template-columns: 110px 1fr 110px 1fr;
  }

  .edu-info-label,
  .edu-info-value {
    padding: 14px 12px;
    font-size: 14px;
    line-height: 20px;
  }

  .edu-badge {
    width: 72px;
    padding: 3px 8px;
    font-size: 13px;
    line-height: 21px;
  }

}


/* 1024 ~ 769px */
@media (max-width:1024px) and (min-width:769px) {

  .edu-detail {
    padding-bottom: 60px;
  }

  .edu-detail-inner {
    padding: 0 24px 50px;
    box-sizing: border-box;
  }

  .edu-detail-page-title {
    font-size: 26px;
    line-height: 38px;
    margin-bottom: 32px;
  }

  .edu-detail-head {
    padding: 20px 22px;
  }

  .edu-detail-title-wrap {
    gap: 14px;
  }

  .edu-detail-title {
    font-size: 24px;
    line-height: 34px;
  }

  .edu-detail-meta {
    gap: 10px 16px;
    margin-top: 10px;
  }

  .edu-detail-meta span {
    font-size: 13px;
    line-height: 20px;
  }

  .edu-info {
    margin-bottom: 28px;
  }

  .edu-info-row {
    grid-template-columns: 90px 1fr 90px 1fr;
  }

  .edu-info-label,
  .edu-info-value {
    padding: 12px 10px;
    font-size: 13px;
    line-height: 19px;
  }

  .edu-info-value {
    gap: 6px;
  }

  .edu-info-value img {
    width: 18px;
    height: 18px;
  }

  .edu-badge {
    width: 66px;
    padding: 2px 6px;
    font-size: 12px;
    line-height: 20px;
  }

}


/* 768px 이하 */
@media (max-width:768px) {

  .edu-detail {
    padding-bottom: 40px;
  }

  .edu-detail-inner {
    padding: 0 20px 40px;
  }

  .edu-detail-page-title {
    font-size: 24px;
    line-height: 34px;
    margin-bottom: 28px;
    word-break: keep-all;
  }

  .edu-detail-head {
    padding: 24px 0;
  }

  .edu-detail-title-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .edu-badge {
    width: auto;
    min-width: 70px;
    padding: 2px 12px;
    font-size: 12px;
    line-height: 20px;
  }

  .edu-detail-title {
    font-size: 22px;
    line-height: 32px;
  }

  .edu-detail-meta {
    gap: 8px 14px;
    margin-top: 10px;
  }

  .edu-detail-meta span {
    font-size: 13px;
    line-height: 20px;
  }

  .edu-info {
    margin-bottom: 24px;
  }

  .edu-info-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .edu-info-label {
    padding: 8px 16px;
    text-align: left;
    font-size: 14px;
    line-height: 20px;
  }

  .edu-info-value {
    padding: 14px 16px;
    font-size: 14px;
    line-height: 22px;

    word-break: keep-all;
    border-bottom: 1px solid #eee;
  }

  .edu-info-row:last-child .edu-info-value:last-child {
    border-bottom: none;
  }

  .edu-info-value a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
  }

  .edu-info-value img {
    width: 16px;
    height: 16px;
  }

}


/* 480px 이하 */
@media (max-width:480px) {

  .edu-detail {
    padding-bottom: 30px;
  }

  .edu-detail-inner {
    padding: 0 16px 36px;
  }

  .edu-detail-page-title {
    font-size: 22px;
    line-height: 32px;
    margin-bottom: 24px;
  }

  .edu-detail-head {
    padding: 18px 0;
  }

  .edu-detail-title-wrap {
    gap: 8px;
  }

  .edu-badge {
    min-width: 62px;
    padding: 2px 10px;
    font-size: 11px;
    line-height: 18px;
  }

  .edu-detail-title {
    font-size: 19px;
    line-height: 28px;
  }

  .edu-detail-meta {
    gap: 6px 12px;
    margin-top: 8px;
  }

  .edu-detail-meta span {
    font-size: 12px;
    line-height: 18px;
  }

  .edu-info {
    margin-bottom: 20px;
  }

  .edu-info-label {
    padding: 7px 14px;
    font-size: 13px;
    line-height: 19px;
  }

  .edu-info-value {
    padding: 12px 14px;
    font-size: 13px;
    line-height: 20px;
  }

  .edu-info-value img {
    width: 15px;
    height: 15px;
  }

}
/* sub20 : 로그인----------------------------------------------------------------------*/
.sub-visual.empty {
  height: 120px;
  background: transparent;
}

.login-page {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;

  background: #fff;
}

.login-inner {
  width: 450px;
  margin: 0 auto;
  text-align: center;
  padding-bottom: 80px;
}

.login-title {
  color: #000;
  text-align: center;
  font-family: Pretendard;
  font-size: 64px;
  font-style: normal;
  font-weight: 800;
  line-height: 72px;

  margin-top: 120px;
  margin-bottom: 56px;
}

.login-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.login-select-wrap {
  position: relative;
}

.login-select-wrap img {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
}

.login-select {
  width: 100%;
  height: 56px;

  padding: 0 16px 0 48px;

  border: 1px solid #ddd;
  border-radius: 6px;

  appearance: none;
  background: #fff url('/images/layout/select-arrow.svg') no-repeat right 16px center / 10px;

  color: #000;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;

  box-sizing: border-box;
}

.login-select:focus {
  outline: none;
}

.login-field {
  position: relative;
}

.login-field input {
  all: unset;
  box-sizing: border-box;

  display: block;
  width: 100%;
  height: 56px;

  padding: 0 16px 0 48px;

  background: #f3f3f3;
  border-radius: 6px;

  text-align: left;

  line-height: 24px;

  color: #000;
  font-family: Pretendard;
  font-size: 16px;
  font-weight: 400;
}

.login-field input::placeholder {
  color: #aaa;
  font-family: Pretendard;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.login-field-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);

  width: 24px;
  height: 24px;

  background-size: contain;
  pointer-events: none;
}

.login-field-icon.user {
  background: url('/images/layout/icon-user.svg') no-repeat center / contain;
}

.login-field-icon.lock {
  background: url('/images/layout/icon-lock.svg') no-repeat center / contain;
}

.login-option {
  margin-top: 24px;
  margin-bottom: 32px;

  display: flex;
  justify-content: space-between;
  align-items: center;

  color: #000;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.32px;
}

.login-links a {
  font-weight: 400;
  color: #8d8d8d;
  text-decoration: none;
}

.login-links span {
  margin: 0 6px;
  color: #EEEEEE;
}

.login-btn.primary {
  background: #1A2A4C;
  color: #fff;
  border: none;
}

.login-btn.outline {
  background: #fff;
  border: 1px solid #1A2A4C;
  color: #1A2A4C;
}

.login-btn-group {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.login-btn-group .login-btn {
  flex: 1;
}

.login-btn-group.type-3 .login-btn {
  flex: 1;
}

.login-sns {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}

.login-sns .sns {
  width: 48px;
  height: 48px;
}

.login-sns .kakao {
  background: url('/images/layout/icon-login-kakao.svg') no-repeat center / contain;
}

.login-sns .naver {
  background: url('/images/layout/icon-login-naver.svg') no-repeat center / contain;
}


/* 1440 ~ 1201px */
@media (max-width:1440px) and (min-width:1201px) {

  .login-inner {
    width: 430px;
    padding-bottom: 70px;
  }

  .login-title {
    font-size: 58px;
    line-height: 68px;
    margin-top: 100px;
    margin-bottom: 48px;
  }

  .login-select,
  .login-field input {
    height: 54px;
  }

  .login-field-icon,
  .login-select-wrap img {
    width: 22px;
    height: 22px;
  }

  .login-option {
    font-size: 15px;
    line-height: 22px;
  }

  .login-sns .sns {
    width: 46px;
    height: 46px;
  }

}


/* 1200 ~ 1025px */
@media (max-width:1200px) and (min-width:1025px) {

  .login-page {
    min-height: calc(100vh - 72px);
  }

  .login-inner {
    width: 400px;
    padding: 0 20px 60px;
    box-sizing: border-box;
  }

  .login-title {
    font-size: 52px;
    line-height: 60px;
    margin-top: 80px;
    margin-bottom: 40px;
  }

  .login-select,
  .login-field input {
    height: 52px;
    font-size: 15px;
  }

  .login-field input::placeholder {
    font-size: 15px;
  }

  .login-select {
    padding-left: 44px;
  }

  .login-field input {
    padding-left: 44px;
  }

  .login-select-wrap img,
  .login-field-icon {
    left: 14px;
    width: 20px;
    height: 20px;
  }

  .login-option {
    margin-top: 20px;
    margin-bottom: 28px;
    font-size: 14px;
    line-height: 22px;
  }

  .login-btn-group {
    gap: 10px;
    margin-top: 20px;
  }

  .login-btn {
    height: 54px;
    font-size: 15px;
  }

  .login-sns {
    gap: 14px;
    margin-top: 20px;
  }

  .login-sns .sns {
    width: 44px;
    height: 44px;
  }

}


/* 1024 ~ 769px */
@media (max-width:1024px) and (min-width:769px) {

  .login-page {
    min-height: calc(100vh - 60px);
    padding: 40px 24px 60px;
    box-sizing: border-box;
  }

  .login-inner {
    width: 380px;
    max-width: 100%;
    padding-bottom: 30px;
  }

  .login-title {
    font-size: 44px;
    line-height: 54px;
    margin-top: 40px;
    margin-bottom: 32px;
  }

  .login-select,
  .login-field input {
    height: 50px;
    font-size: 14px;
  }

  .login-field input::placeholder {
    font-size: 14px;
  }

  .login-select {
    padding-left: 42px;
    background-position: right 14px center;
  }

  .login-field input {
    padding-left: 42px;
  }

  .login-select-wrap img,
  .login-field-icon {
    left: 14px;
    width: 19px;
    height: 19px;
  }

  .login-option {
    margin-top: 18px;
    margin-bottom: 24px;

    font-size: 13px;
    line-height: 20px;
  }

  .login-links span {
    margin: 0 4px;
  }

  .login-btn-group {
    gap: 8px;
    margin-top: 16px;
  }

  .login-btn {
    height: 52px;
    font-size: 14px;
  }

  .login-sns {
    gap: 12px;
    margin-top: 18px;
  }

  .login-sns .sns {
    width: 42px;
    height: 42px;
  }

}


/* 768px 이하 */
@media (max-width:768px) {

  .sub-visual.empty {
    height: 72px;
  }

  .login-page {
    min-height: auto;
    padding: 40px 20px 60px;
  }

  .login-inner {
    width: 100%;
    max-width: 420px;
    padding-bottom: 0;
  }

  .login-title {
    font-size: 36px;
    line-height: 44px;

    margin-top: 0;
    margin-bottom: 32px;
  }

  .login-select,
  .login-field input {
    height: 52px;
    font-size: 15px;
  }

  .login-field input::placeholder {
    font-size: 15px;
  }

  .login-select-wrap img,
  .login-field-icon {
    width: 20px;
    height: 20px;
  }

  .login-select {
    padding-left: 44px;
  }

  .login-field input {
    padding-left: 44px;
  }

  .login-option {
    margin-top: 16px;
    margin-bottom: 24px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 8px;

    font-size: 13px;
    line-height: 20px;
  }

  .login-links {
    width: 60%;
  }

  .login-btn {
    height: 56px;
    font-size: 16px;
  }

  .login-btn-group {
    gap: 8px;
    margin-top: 16px;
  }

  .login-btn-group.type-3 {
    flex-direction: column;
  }

  .login-sns {
    gap: 12px;
    margin-top: 20px;
  }

  .login-sns .sns {
    width: 44px;
    height: 44px;
  }

}


/* 480px 이하 */
@media (max-width:480px) {

  .login-page {
    padding: 32px 16px 50px;
  }

  .login-title {
    font-size: 32px;
    line-height: 40px;
    margin-bottom: 28px;
  }

  .login-select,
  .login-field input {
    height: 50px;
    font-size: 14px;
  }

  .login-field input::placeholder {
    font-size: 14px;
  }

  .login-select {
    padding-left: 42px;
  }

  .login-field input {
    padding-left: 42px;
  }

  .login-select-wrap img,
  .login-field-icon {
    left: 13px;
    width: 18px;
    height: 18px;
  }

  .login-option {
    margin-top: 14px;
    margin-bottom: 20px;
    font-size: 12px;
    line-height: 18px;
  }

  .login-links {
    width: auto;
  }

  .login-links span {
    margin: 0 3px;
  }

  .login-btn-group {
    gap: 6px;
    margin-top: 14px;
  }

  .login-btn {
    height: 52px;
    font-size: 14px;
  }

  .login-sns {
    gap: 10px;
    margin-top: 16px;
  }

  .login-sns .sns {
    width: 40px;
    height: 40px;
  }

}

/* sub21 sub22 : 아이디/비밀번호찾기----------------------------------------------------------------------*/
.login-title-id {
  color: #000;
  text-align: center;
  font-family: Pretendard;
  font-size: 64px;
  font-style: normal;
  font-weight: 800;
  line-height: 72px;

  margin-bottom: 32px;
  word-break: keep-all;
}

.login-desc {
  color: #000;
  opacity: 0.6;
  text-align: center;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;

  margin-bottom: 56px;
  word-break: keep-all;
}

.login-field-icon.name {
  background: url('/images/layout/icon-login-name.svg') no-repeat center / contain;
}

.login-field-icon.mail {
  background: url('/images/layout/icon-login-mail.svg') no-repeat center / contain;
}

@media (max-width:1440px) and (min-width:1201px) {

  .login-title-id {
    font-size: 58px;
    line-height: 68px;
    margin-bottom: 28px;
  }

  .login-desc {
    font-size: 15px;
    line-height: 23px;
    margin-bottom: 48px;
  }

}

@media (max-width:1200px) and (min-width:1025px) {

  .login-title-id {
    font-size: 52px;
    line-height: 60px;
    margin-bottom: 24px;
  }

  .login-desc {
    font-size: 15px;
    line-height: 22px;
    margin-bottom: 40px;
  }

}

@media (max-width:1024px) and (min-width:769px) {

  .login-title-id {
    font-size: 44px;
    line-height: 54px;
    margin-bottom: 20px;
  }

  .login-desc {
    font-size: 14px;
    line-height: 21px;
    margin-bottom: 32px;
  }

  .login-field-icon.name,
  .login-field-icon.mail {
    width: 19px;
    height: 19px;
  }

}

@media (max-width:768px) {

  .login-title-id {
    font-size: 36px;
    line-height: 44px;
    margin-bottom: 20px;
    word-break: keep-all;
  }

  .login-desc {
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 32px;
    word-break: keep-all;
  }

  .login-desc br {
    display: none;
  }

  .login-field-icon.name,
  .login-field-icon.mail {
    width: 20px;
    height: 20px;
  }

}

@media (max-width:480px) {

  .login-title-id {
    font-size: 32px;
    line-height: 40px;
    margin-bottom: 16px;
  }

  .login-desc {
    font-size: 13px;
    line-height: 20px;
    margin-bottom: 24px;
  }

  .login-field-icon.name,
  .login-field-icon.mail {
    width: 18px;
    height: 18px;
  }

}

/* sub23 sub24 sub25 : 회원가입----------------------------------------------------------------------*/
.join-page {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;

  background: #fff;
}

.join-inner {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding-bottom: 80px;
  box-sizing: border-box;
}

.join-step {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 56px;

  gap: 24px;
  min-height: 160px;

  background: #F5F5F5;
  border-radius: 16px;
}

.step {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 auto;
  min-width: 0;
}

.step-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  flex-shrink: 0;
}

.step-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.step-num {
  color: #2594D3;
  font-family: "Wanted Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
  margin-bottom: 4px;
}

.step-title {
  color: #000;
  font-family: Pretendard;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 28px;
  white-space: nowrap;
}

.step-1 .step-icon {
  background: #fff url('/images/layout/icon-join-step1-blue.svg') no-repeat center / 20px;
}

.step.active.step-1 .step-icon {
  background: #2594D3 url('/images/layout/icon-join-step1-white.svg') no-repeat center / 20px;
}

.step-2 .step-icon {
  background: #fff url('/images/layout/icon-join-step2-blue.svg') no-repeat center / 20px;
}

.step.active.step-2 .step-icon {
  background: #2594D3 url('/images/layout/icon-join-step2-white.svg') no-repeat center / 20px;
}

.step-3 .step-icon {
  background: #fff url('/images/layout/icon-join-step3-blue.svg') no-repeat center / 24px;
}

.step.active.step-3 .step-icon {
  background: #2594D3 url('/images/layout/icon-join-step3-white.svg') no-repeat center / 24px;
}

.step-4 .step-icon {
  background: #fff url('/images/layout/icon-req-step4-blue.svg') no-repeat center / 24px;
}

.step.active.step-4 .step-icon {
  background: #2594D3 url('/images/layout/icon-req-step4-white.svg') no-repeat center / 24px;
}

.join-terms {
  display: flex;
  gap: 130px;

  border-top: 2px solid #000;

  margin-top: 40px;
  padding-top: 32px;
}

.terms-left {
  width: 320px;
  flex-shrink: 0;
}

.terms-title {
  color: #000;
  font-family: Pretendard;
  font-size: 40px;
  font-style: normal;
  font-weight: 800;
  line-height: 48px;
}

.terms-right {
  flex: 1;
  min-width: 0;
}

.terms-check {
  padding-bottom: 16px;

  border-bottom: 1px solid #E5E5E5;

  color: #000;
  font-family: Pretendard;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px;
}

.terms-check strong {
  font-weight: 500;
  color: #2594D3;
}

.terms-box {
  margin-top: 20px;
  padding: 20px;

  height: 160px;
  overflow-y: auto;

  background: #fff;
  box-sizing: border-box;
}

.terms-box::-webkit-scrollbar {
  width: 4px;
}

.terms-box::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}

.terms-box p {
  margin-bottom: 12px;

  color: #888;
  font-family: Pretendard;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}


/* 가입완료 */
.join-complete {
  text-align: center;
  padding: 80px 0 100px;
}

.join-complete-icon {
  margin-bottom: 16px;
}

.join-complete-icon img {
  width: 72px;
}

.join-complete-title {
  color: #1B1C21;
  text-align: center;
  font-family: Pretendard;
  font-size: 32px;
  font-style: normal;
  font-weight: 800;
  line-height: 48px;
  margin-bottom: 24px;
}

.join-complete-desc {
  color: #8F9093;
  text-align: center;
  font-family: Pretendard;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
  margin-bottom: 56px;
}

.join-complete-btns {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.join-complete-btns .login-btn {
  width: 240px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  text-align: center;
  font-family: Pretendard;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
}


/* 1440 ~ 1201px */
@media (max-width:1440px) and (min-width:1201px) {

  .join-inner {
    max-width: 1360px;
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .join-step {
    min-height: 145px;
    padding: 0 40px;
    gap: 18px;
    border-radius: 14px;
  }

  .step {
    gap: 12px;
  }

  .step-icon {
    width: 72px;
    height: 72px;
  }

  .step-num {
    font-size: 13px;
    line-height: 19px;
  }

  .step-title {
    font-size: 17px;
    line-height: 26px;
  }

  .join-terms {
    gap: 100px;
    margin-top: 36px;
    padding-top: 28px;
  }

  .terms-left {
    width: 280px;
  }

  .terms-title {
    font-size: 36px;
    line-height: 44px;
  }

  .terms-check {
    font-size: 17px;
    line-height: 27px;
  }

  .terms-box {
    height: 155px;
    padding: 18px;
  }

  .terms-box p {
    font-size: 14px;
    line-height: 23px;
  }

  .join-complete {
    padding: 70px 0 90px;
  }

  .join-complete-title {
    font-size: 30px;
    line-height: 44px;
  }

  .join-complete-desc {
    font-size: 17px;
    line-height: 27px;
    margin-bottom: 48px;
  }

  .join-complete-btns .login-btn {
    width: 220px;
    font-size: 17px;
  }

}


/* 1200 ~ 1025px */
@media (max-width:1200px) and (min-width:1025px) {

  .join-page {
    min-height: auto;
  }

  .join-inner {
    padding: 0 30px 60px;
  }

  .join-step {
    min-height: 130px;
    padding: 0 24px;
    gap: 12px;
    border-radius: 14px;
  }

  .step {
    gap: 10px;
  }

  .step-icon {
    width: 64px;
    height: 64px;
  }

  .step-num {
    font-size: 12px;
    line-height: 18px;
  }

  .step-title {
    font-size: 15px;
    line-height: 23px;
  }

  .join-terms {
    gap: 60px;
    margin-top: 32px;
    padding-top: 28px;
  }

  .terms-left {
    width: 240px;
  }

  .terms-title {
    font-size: 32px;
    line-height: 40px;
  }

  .terms-check {
    font-size: 16px;
    line-height: 25px;
    padding-bottom: 14px;
  }

  .terms-box {
    height: 150px;
    padding: 16px;
  }

  .terms-box p {
    font-size: 14px;
    line-height: 22px;
  }

  .join-complete {
    padding: 60px 0 80px;
  }

  .join-complete-icon img {
    width: 64px;
  }

  .join-complete-title {
    font-size: 28px;
    line-height: 40px;
  }

  .join-complete-desc {
    font-size: 16px;
    line-height: 25px;
    margin-bottom: 40px;
  }

  .join-complete-btns .login-btn {
    width: 200px;
    font-size: 16px;
  }

}


/* 1024 ~ 769px */
@media (max-width:1024px) and (min-width:769px) {

  .join-page {
    min-height: auto;
    padding: 40px 0 60px;
    box-sizing: border-box;
  }

  .join-inner {
    padding: 0 24px 50px;
  }

  .join-step {
    min-height: 115px;
    padding: 0 16px;
    gap: 8px;
    border-radius: 12px;
  }

  .step {
    gap: 8px;
  }

  .step-icon {
    width: 56px;
    height: 56px;
  }

  .step-1 .step-icon,
  .step-2 .step-icon {
    background-size: 18px;
  }

  .step-3 .step-icon,
  .step-4 .step-icon {
    background-size: 20px;
  }

  .step-num {
    font-size: 11px;
    line-height: 16px;
    margin-bottom: 2px;
  }

  .step-title {
    font-size: 13px;
    line-height: 20px;
  }

  .join-terms {
    gap: 36px;
    margin-top: 28px;
    padding-top: 24px;
  }

  .terms-left {
    width: 170px;
  }

  .terms-title {
    font-size: 28px;
    line-height: 36px;
  }

  .terms-check {
    font-size: 14px;
    line-height: 22px;
    padding-bottom: 12px;
  }

  .terms-box {
    height: 145px;
    padding: 14px;
  }

  .terms-box p {
    font-size: 13px;
    line-height: 21px;
  }

  .join-complete {
    padding: 50px 0 70px;
  }

  .join-complete-icon img {
    width: 60px;
  }

  .join-complete-title {
    font-size: 26px;
    line-height: 38px;
    margin-bottom: 18px;
  }

  .join-complete-desc {
    font-size: 15px;
    line-height: 24px;
    margin-bottom: 32px;
  }

  .join-complete-btns .login-btn {
    width: 180px;
    font-size: 15px;
  }

}


/* 768px 이하 */
@media (max-width:768px) {

  .join-page {
    min-height: auto;
  }

  .join-inner {
    padding: 0 20px 60px;
  }

  /* STEP */

  .join-step {
    min-height: auto;

    padding: 24px 16px;

    gap: 4px;
  }

  .step {
    flex-direction: column;
    text-align: center;
    gap: 10px;

    flex: 1;
  }

  .step-icon {
    width: 56px;
    height: 56px;
  }

  .step-arrow {
    width: 18px;
    flex-shrink: 0;
  }

  .step-arrow img {
    width: 100%;
  }

  .step-num {
    font-size: 10px;
    line-height: 14px;
  }

  .step-title {
    font-size: 12px;
    line-height: 16px;
    white-space: normal;
    word-break: keep-all;
  }

  /* 약관 */

  .join-terms {
    flex-direction: column;
    gap: 24px;

    margin-top: 32px;
    padding-top: 24px;
  }

  .terms-left {
    width: 100%;
  }

  .terms-title {
    font-size: 28px;
    line-height: 36px;
  }

  .terms-check {
    font-size: 15px;
    line-height: 24px;
  }

  .terms-box {
    height: 220px;
    padding: 16px;
  }

  .terms-box p {
    font-size: 14px;
    line-height: 22px;
  }

  /* 가입완료 */

  .join-complete {
    padding: 40px 0 60px;
  }

  .join-complete-icon img {
    width: 56px;
  }

  .join-complete-title {
    font-size: 24px;
    line-height: 34px;

    margin-bottom: 16px;
  }

  .join-complete-desc {
    font-size: 15px;
    line-height: 24px;

    margin-bottom: 32px;
    word-break: keep-all;
  }

  .join-complete-btns {
    flex-direction: column;
    gap: 10px;
  }

  .join-complete-btns .login-btn {
    width: 100%;
  }

}


/* 480px 이하 */
@media (max-width:480px) {

  .join-page {
    padding: 30px 0 40px;
  }

  .join-inner {
    padding: 0 16px 40px;
  }

  .join-step {
    padding: 20px 10px;
    gap: 2px;
    border-radius: 10px;
  }

  .step {
    gap: 7px;
  }

  .step-icon {
    width: 48px;
    height: 48px;
  }

  .step-1 .step-icon,
  .step-2 .step-icon {
    background-size: 16px;
  }

  .step-3 .step-icon,
  .step-4 .step-icon {
    background-size: 18px;
  }

  .step-arrow {
    width: 14px;
  }

  .step-num {
    font-size: 9px;
    line-height: 13px;
  }

  .step-title {
    font-size: 11px;
    line-height: 15px;
  }

  .join-terms {
    gap: 20px;
    margin-top: 24px;
    padding-top: 20px;
  }

  .terms-title {
    font-size: 25px;
    line-height: 32px;
  }

  .terms-check {
    font-size: 14px;
    line-height: 22px;
  }

  .terms-box {
    height: 200px;
    padding: 14px;
  }

  .terms-box p {
    font-size: 13px;
    line-height: 20px;
  }

  .join-complete {
    padding: 30px 0 50px;
  }

  .join-complete-icon {
    margin-bottom: 12px;
  }

  .join-complete-icon img {
    width: 50px;
  }

  .join-complete-title {
    font-size: 22px;
    line-height: 32px;
    margin-bottom: 14px;
  }

  .join-complete-desc {
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 28px;
  }

  .join-complete-btns {
    gap: 8px;
  }

  .join-complete-btns .login-btn {
    width: 100%;
    height: 50px;
    font-size: 14px;
  }

}

/* sub26 : 마이페이지 - 회원정보 수정----------------------------------------------------------------------*/
.mypage-inner {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding-bottom: 80px;
  box-sizing: border-box;
}

@media (max-width:1440px) and (min-width:1201px) {

  .mypage-inner {
    max-width: 1360px;
    padding-bottom: 70px;
  }

}

@media (max-width:1200px) and (min-width:1025px) {

  .mypage-inner {
    padding: 0 30px 60px;
  }

}

@media (max-width:1024px) and (min-width:769px) {

  .mypage-inner {
    padding: 0 24px 50px;
  }

}

@media (max-width:768px) {

  .mypage-inner {
    padding: 0 20px 40px;
  }

}

@media (max-width:480px) {

  .mypage-inner {
    padding: 0 16px 36px;
  }

}

/* sub27 : 마이페이지 - 선결제 잔액조회---------------------------------------------------------------------*/
/* sub27 : 마이페이지 - 선결제 잔액조회---------------------------------------------------------------------*/
.section-title {
  color: #000;
  font-family: Pretendard;
  font-size: 40px;
  font-style: normal;
  font-weight: 800;
  line-height: 56px;
  letter-spacing: -0.02em;
}

.balance-header {
  width: 50%;

  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 16px;
}

.balance-table {
  width: 50%;

  border-top: 2px solid #000;
  border-collapse: collapse;
}

.balance-table th,
.balance-table td {
  padding: 16px 20px;
  border-bottom: 1px solid #ddd;
  box-sizing: border-box;
}

.balance-table th {
  width: 160px;

  background: #f5f5f5;

  text-align: center;
  color: #000;
  font-family: Pretendard;
  font-size: 15px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
}

.balance-table td {
  color: #000;
  text-align: right;
  font-family: Pretendard;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

.balance-table td.strong {
  font-weight: 700;
}

.btn-sub {
  width: 160px;
  height: 52px;

  padding: 8px;

  border-radius: 4px;
  background: var(--Style, #1A2A4C);

  color: #FFF;
  text-align: center;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;

  box-sizing: border-box;
}

.analysis {
  margin-top: 80px;
}

.analysis-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.btn-group {
  display: flex;
  gap: 8px;
}

.btn-reset {
  width: 160px;
  height: 52px;
  padding: 8px;

  border-radius: 4px;
  border: 1px solid #E5E8EF;
  background: #F5F8FB;

  color: #777E8C;
  text-align: center;
  font-family: Pretendard;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;

  box-sizing: border-box;
}

.btn-reset img {
  width: 24px;
  height: 24px;
}

.analysis-filter {
  display: grid;
  grid-template-columns: 1fr 1fr;

  border-top: 2px solid #000;
  border-bottom: 1px solid #ddd;
}

.filter-col {
  border-right: 1px solid #eee;
  min-width: 0;
}

.filter-col:last-child {
  border-right: none;
}

.filter-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  align-items: center;

  min-height: 56px;
  border-bottom: 1px solid #eee;
}

.filter-row:last-child {
  border-bottom: none;
}

.filter-title {
  height: 100%;

  display: flex;
  justify-content: center;
  align-items: center;

  padding: 0;

  background: #f5f5f5;

  color: #000;
  font-family: Pretendard;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;

  box-sizing: border-box;
}

.filter-row > *:not(.filter-title) {
  padding: 0 20px;
  min-width: 0;
}

.filter-row input[type="text"] {
  width: calc(100% - 24px);
  height: 40px;

  border: none;
  background: #fff;

  margin: 0 12px;
  padding: 0 12px;

  color: #000;
  font-family: Pretendard;
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;

  box-sizing: border-box;
}

.filter-row input::placeholder {
  color: #aaa;
  font-family: Pretendard;
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
}

.analysis-table {
  margin-top: 48px;
}

.result-count {
  margin-bottom: 8px;

  font-family: Pretendard;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

.result-count strong {
  color: #2594D3;
  font-weight: 600;
}

.analysis-table table {
  width: 100%;

  border-top: 2px solid #000;
  border-collapse: collapse;

  color: #000;
  font-family: Pretendard;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.analysis-table th,
.analysis-table td {
  padding: 12px 10px;

  border-bottom: 1px solid #eee;
  border-left: 1px solid #eee;

  text-align: center;
  height: 52px;

  box-sizing: border-box;
}

.analysis-table th:first-child,
.analysis-table td:first-child {
  border-left: none;
}

.analysis-table thead th {
  background: #f5f5f5;
  font-weight: 600;
}

/* 상태 뱃지 */
.badge {
  display: inline-block;

  padding: 4px 10px;
  border-radius: 4px;

  color: #FFF;
  font-family: Pretendard;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.badge.plus {
  background: #56B7B3;
}

.badge.minus {
  background: #E48D53;
}

.badge.refund {
  background: #949494;
}


/* 1440 ~ 1201px */
@media (max-width:1440px) and (min-width:1201px) {

  .section-title {
    font-size: 36px;
    line-height: 48px;
  }

  .balance-header,
  .balance-table {
    width: 55%;
  }

  .balance-table th {
    width: 140px;
    padding: 14px 16px;
    font-size: 14px;
  }

  .balance-table td {
    padding: 14px 16px;
    font-size: 14px;
  }

  .btn-sub,
  .btn-reset {
    width: 150px;
    height: 50px;
    font-size: 15px;
  }

  .analysis {
    margin-top: 70px;
  }

  .filter-row {
    grid-template-columns: 140px 1fr;
    min-height: 54px;
  }

  .filter-title {
    font-size: 14px;
  }

  .filter-row > *:not(.filter-title) {
    padding: 0 16px;
  }

  .filter-row input[type="text"] {
    font-size: 14px;
  }

  .analysis-table {
    margin-top: 42px;
  }

  .result-count {
    font-size: 15px;
  }

  .analysis-table table {
    font-size: 13px;
  }

  .analysis-table th,
  .analysis-table td {
    height: 50px;
    padding: 10px 8px;
  }

  .badge {
    font-size: 13px;
    padding: 3px 8px;
  }

}


/* 1200 ~ 1025px */
@media (max-width:1200px) and (min-width:1025px) {

  .section-title {
    font-size: 32px;
    line-height: 40px;
  }

  .balance-header,
  .balance-table {
    width: 100%;
  }

  .balance-header {
    margin-bottom: 14px;
  }

  .balance-table th {
    width: 140px;
    padding: 14px 16px;
    font-size: 14px;
  }

  .balance-table td {
    padding: 14px 16px;
    font-size: 14px;
  }

  .btn-sub,
  .btn-reset {
    width: 150px;
    height: 50px;
    font-size: 15px;
  }

  .analysis {
    margin-top: 64px;
  }

  .analysis-header {
    margin-bottom: 14px;
  }

  .filter-row {
    grid-template-columns: 130px 1fr;
    min-height: 54px;
  }

  .filter-title {
    font-size: 14px;
  }

  .filter-row > *:not(.filter-title) {
    padding: 0 14px;
  }

  .filter-row input[type="text"] {
    width: calc(100% - 20px);
    margin: 0 10px;
    padding: 0 10px;
    font-size: 14px;
  }

  .analysis-table {
    margin-top: 40px;
  }

  .result-count {
    font-size: 15px;
  }

  .analysis-table table {
    font-size: 13px;
  }

  .analysis-table th,
  .analysis-table td {
    height: 50px;
    padding: 10px 8px;
  }

  .badge {
    font-size: 13px;
    padding: 3px 8px;
  }

}


/* 1024 ~ 769px */
@media (max-width:1024px) and (min-width:769px) {

  .section-title {
    font-size: 30px;
    line-height: 40px;
  }

  .balance-header,
  .balance-table {
    width: 100%;
  }

  .balance-header {
    margin-bottom: 12px;
  }

  .balance-table th {
    width: 120px;
    padding: 12px 14px;
    font-size: 13px;
    line-height: 19px;
  }

  .balance-table td {
    padding: 12px 14px;
    font-size: 13px;
    line-height: 19px;
  }

  .btn-sub,
  .btn-reset {
    width: 140px;
    height: 48px;
    font-size: 14px;
  }

  .analysis {
    margin-top: 56px;
  }

  .analysis-header {
    margin-bottom: 12px;
  }

  .btn-group {
    gap: 6px;
  }

  .analysis-filter {
    grid-template-columns: 1fr 1fr;
  }

  .filter-row {
    grid-template-columns: 100px 1fr;
    min-height: 50px;
  }

  .filter-title {
    font-size: 13px;
    line-height: 18px;
  }

  .filter-row > *:not(.filter-title) {
    padding: 0 10px;
  }

  .filter-row input[type="text"] {
    width: calc(100% - 16px);
    height: 38px;

    margin: 0 8px;
    padding: 0 8px;

    font-size: 13px;
  }

  .filter-row input::placeholder {
    font-size: 13px;
  }

  .analysis-table {
    margin-top: 36px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .result-count {
    font-size: 14px;
    line-height: 22px;
  }

  .analysis-table table {
    min-width: 900px;
    font-size: 12px;
  }

  .analysis-table th,
  .analysis-table td {
    height: 48px;
    padding: 9px 7px;
    white-space: nowrap;
  }

  .badge {
    font-size: 12px;
    padding: 3px 7px;
  }

}


/* 768px 이하 */
@media (max-width:768px) {

  .section-title {
    font-size: 28px;
    line-height: 36px;
  }

  .balance-header {
    width: 100%;

    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .balance-table {
    width: 100%;
  }

  .balance-table th {
    width: 120px;
    padding: 12px;
    font-size: 14px;
  }

  .balance-table td {
    padding: 12px;
    font-size: 14px;
  }

  .btn-sub {
    width: 100%;
    height: 48px;
    font-size: 15px;
  }

  .analysis {
    margin-top: 48px;
  }

  .analysis-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .btn-group {
    width: 100%;
    flex-direction: row;
    gap: 8px;
  }

  .btn-group .btn-reset,
  .btn-group .btn-sub {
    flex: 1;
    width: auto;
  }

  .btn-reset,
  .btn-sub {
    width: 100%;
  }

  .analysis-filter {
    display: block;
  }

  .filter-col {
    border-right: none;
  }

  .filter-row {
    grid-template-columns: 100px 1fr;
    min-height: 52px;
  }

  .filter-title {
    font-size: 13px;
  }

  .filter-row > *:not(.filter-title) {
    padding: 0 12px;
  }

  .filter-row input[type="text"] {
    width: calc(100% - 24px);
    height: 38px;

    margin: 0 12px;
    padding: 0;

    font-size: 14px;
  }

  .analysis-table {
    margin-top: 32px;

    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .result-count {
    font-size: 14px;
  }

  .analysis-table table {
    min-width: 900px;
  }

  .analysis-table th,
  .analysis-table td {
    font-size: 13px;
    padding: 10px 8px;
    height: 48px;
    white-space: nowrap;
  }

  .badge {
    font-size: 12px;
    padding: 3px 8px;
  }

}


/* 480px 이하 */
@media (max-width:480px) {

  .section-title {
    font-size: 25px;
    line-height: 32px;
  }

  .balance-header {
    gap: 10px;
    margin-bottom: 12px;
  }

  .balance-table th {
    width: 100px;
    padding: 10px;
    font-size: 13px;
    line-height: 19px;
  }

  .balance-table td {
    padding: 10px;
    font-size: 13px;
    line-height: 19px;
  }

  .btn-sub,
  .btn-reset {
    height: 46px;
    font-size: 14px;
  }

  .analysis {
    margin-top: 40px;
  }

  .analysis-header {
    gap: 10px;
  }

  .filter-row {
    grid-template-columns: 88px 1fr;
    min-height: 48px;
  }

  .filter-title {
    font-size: 12px;
    line-height: 18px;
  }

  .filter-row > *:not(.filter-title) {
    padding: 0 8px;
  }

  .filter-row input[type="text"] {
    width: calc(100% - 16px);
    height: 36px;

    margin: 0 8px;
    padding: 0 6px;

    font-size: 13px;
  }

  .filter-row input::placeholder {
    font-size: 13px;
  }

  .analysis-table {
    margin-top: 28px;
  }

  .result-count {
    font-size: 13px;
    line-height: 20px;
  }

  .analysis-table table {
    min-width: 850px;
  }

  .analysis-table th,
  .analysis-table td {
    font-size: 12px;
    padding: 8px 6px;
    height: 44px;
  }

  .badge {
    font-size: 11px;
    padding: 3px 7px;
  }

}

/* 충전하기 팝업 ------------------------------------------------- */
/* 충전하기 팝업 ------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 999;
}

.modal.active {
  display: block;
}

.modal-dim {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
}

.modal-content {
  position: relative;
  width: 900px;
  max-height: 80vh;

  margin: 100px auto;
  background: #fff;
  border-radius: 24px;

  overflow: hidden;
  box-sizing: border-box;
}

.modal-close {
  position: absolute;
  top: 40px;
  right: 40px;

  width: 40px;
  height: 40px;

  background: url('/images/layout/icon-modal-close.svg') no-repeat center / contain;
  border: none;
  font-size: 0;
  cursor: pointer;
}

.modal-scroll {
  max-height: 80vh;
  overflow-y: auto;
  padding: 80px;
  box-sizing: border-box;
}

.modal-scroll::-webkit-scrollbar {
  width: 8px;
}

.modal-scroll::-webkit-scrollbar-track {
  background: transparent;
  margin: 8px 0;
}

.modal-scroll::-webkit-scrollbar-thumb {
  background: #bdbdbd;
  border-radius: 10px;
  border: 2px solid #fff;
}

.modal-title {
  color: #000;
  text-align: center;
  font-family: Pretendard;
  font-size: 36px;
  font-style: normal;
  font-weight: 800;
  line-height: 56px;

  margin-bottom: 64px;
}

.modal-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  align-items: center;

  margin-bottom: 16px;
}

.modal .ui-form {
  display: block;
}

.modal .ui-form-grid {
  max-width: 720px;
  margin: 0 auto;
}

.ui-flex {
  display: flex;
  align-items: center;
}

.unit {
  color: #000;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}

.modal-bottom {
  margin-top: 56px;
  text-align: center;
}

.modal-desc {
  color: #888;
  text-align: center;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;

  margin-bottom: 16px;
}

.modal-agree {
  display: flex;
  justify-content: center;

  padding: 16px;
  margin-bottom: 32px;

  border: 1px solid #e5e5e5;
  border-radius: 8px;
}

.ui-check-label {
  color: #000;
  font-family: Pretendard;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px;
}

.ui-check-label strong {
  color: var(--Style, #2594D3);
  font-weight: 500;
}

.pay-card {
  margin-top: 24px;
}

.card-guide {
  padding: 24px;

  background: #f5f5f5;
  border: 1px solid #eee;
  border-radius: 8px;

  text-align: left;
}

.card-title {
  color: #000;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;

  margin-bottom: 8px;
}

.card-list {
  display: flex;
  flex-direction: column;
}

.card-list li {
  position: relative;

  padding-left: 13px;

  color: #888;
  font-family: Pretendard;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

.card-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;

  color: #888;
  font-size: 16px;
  font-family: Pretendard;
}

.modal-btn {
  display: flex;
  justify-content: center;
}

.modal-btn .login-btn {
  width: 240px;
  height: 56px;
}


/* 1440 ~ 1201px */
@media (max-width:1440px) and (min-width:1201px) {

  .modal-content {
    width: 860px;
    max-height: 78vh;
    margin: 80px auto;
    border-radius: 22px;
  }

  .modal-scroll {
    max-height: 78vh;
    padding: 70px;
  }

  .modal-close {
    top: 32px;
    right: 32px;
    width: 36px;
    height: 36px;
  }

  .modal-title {
    font-size: 34px;
    line-height: 50px;
    margin-bottom: 52px;
  }

  .modal-row {
    grid-template-columns: 150px 1fr;
  }

  .unit {
    font-size: 15px;
  }

  .modal-bottom {
    margin-top: 48px;
  }

  .modal-desc {
    font-size: 15px;
    line-height: 23px;
  }

  .modal-agree {
    padding: 14px;
    margin-bottom: 28px;
  }

  .ui-check-label {
    font-size: 16px;
    line-height: 26px;
  }

  .card-guide {
    padding: 20px;
  }

  .modal-btn .login-btn {
    width: 220px;
    height: 54px;
  }

}


/* 1200 ~ 1025px */
@media (max-width:1200px) and (min-width:1025px) {

  .modal-content {
    width: 760px;
    max-height: 78vh;
    margin: 60px auto;
    border-radius: 20px;
  }

  .modal-scroll {
    max-height: 78vh;
    padding: 60px;
  }

  .modal-close {
    top: 24px;
    right: 24px;
    width: 32px;
    height: 32px;
  }

  .modal-title {
    font-size: 30px;
    line-height: 44px;
    margin-bottom: 44px;
  }

  .modal-row {
    grid-template-columns: 130px 1fr;
    margin-bottom: 14px;
  }

  .unit {
    font-size: 14px;
    line-height: 22px;
  }

  .modal-bottom {
    margin-top: 40px;
  }

  .modal-desc {
    font-size: 14px;
    line-height: 22px;
  }

  .modal-agree {
    padding: 13px;
    margin-bottom: 24px;
  }

  .ui-check-label {
    font-size: 15px;
    line-height: 24px;
  }

  .pay-card {
    margin-top: 20px;
  }

  .card-guide {
    padding: 18px;
  }

  .card-title {
    font-size: 15px;
    line-height: 22px;
  }

  .card-list li {
    font-size: 12px;
    line-height: 19px;
  }

  .modal-btn .login-btn {
    width: 210px;
    height: 52px;
    font-size: 15px;
  }

}


/* 1024 ~ 769px */
@media (max-width:1024px) and (min-width:769px) {

  .modal-content {
    width: calc(100% - 48px);
    max-width: 700px;
    max-height: 82vh;

    margin: 40px auto;
    border-radius: 18px;
  }

  .modal-scroll {
    max-height: 82vh;
    padding: 50px 40px;
  }

  .modal-close {
    top: 20px;
    right: 20px;

    width: 30px;
    height: 30px;
  }

  .modal-title {
    font-size: 28px;
    line-height: 40px;
    margin-bottom: 36px;
  }

  .modal-row {
    grid-template-columns: 110px 1fr;
    gap: 8px;
    margin-bottom: 12px;
  }

  .unit {
    font-size: 13px;
    line-height: 20px;
  }

  .modal-bottom {
    margin-top: 32px;
  }

  .modal-desc {
    font-size: 13px;
    line-height: 20px;
  }

  .modal-agree {
    padding: 12px;
    margin-bottom: 20px;
  }

  .ui-check-label {
    font-size: 14px;
    line-height: 22px;
  }

  .pay-card {
    margin-top: 16px;
  }

  .card-guide {
    padding: 16px;
  }

  .card-title {
    font-size: 14px;
    line-height: 21px;
  }

  .card-list li {
    font-size: 12px;
    line-height: 18px;
  }

  .modal-btn .login-btn {
    width: 200px;
    height: 50px;
    font-size: 14px;
  }

}


/* 768px 이하 */
@media (max-width:768px) {

  .modal-content {
    width: calc(100% - 24px);

    margin: 12px auto;

    max-height: calc(100vh - 24px);

    border-radius: 16px;
  }

  .modal-scroll {
    max-height: calc(100vh - 24px);

    padding: 60px 20px 24px;
  }

  .modal-close {
    top: 16px;
    right: 16px;

    width: 28px;
    height: 28px;
  }

  .modal-title {
    font-size: 28px;
    line-height: 36px;
    margin-bottom: 32px;
    word-break: keep-all;
  }

  .modal-row {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 16px;
  }

  .modal .ui-form-grid {
    max-width: none;
  }

  .unit {
    font-size: 14px;
  }

  .modal-bottom {
    margin-top: 32px;
  }

  .modal-desc {
    font-size: 14px;
    line-height: 22px;
    word-break: keep-all;
  }

  .modal-agree {
    padding: 12px;
    margin-bottom: 24px;
  }

  .ui-check-label {
    font-size: 13px;
    line-height: 20px;
  }

  .pay-card {
    margin-top: 16px;
  }

  .card-guide {
    padding: 16px;
  }

  .card-title {
    font-size: 15px;
    line-height: 22px;
  }

  .card-list li {
    font-size: 12px;
    line-height: 18px;
  }

  .modal-btn .login-btn {
    width: 100%;
    height: 52px;
  }

}


/* 480px 이하 */
@media (max-width:480px) {

  .modal-content {
    width: calc(100% - 20px);
    max-height: calc(100vh - 20px);

    margin: 10px auto;
    border-radius: 14px;
  }

  .modal-scroll {
    max-height: calc(100vh - 20px);
    padding: 52px 16px 20px;
  }

  .modal-close {
    top: 13px;
    right: 13px;

    width: 24px;
    height: 24px;
  }

  .modal-title {
    font-size: 24px;
    line-height: 32px;
    margin-bottom: 24px;
  }

  .modal-row {
    gap: 6px;
    margin-bottom: 12px;
  }

  .unit {
    font-size: 13px;
    line-height: 19px;
  }

  .modal-bottom {
    margin-top: 24px;
  }

  .modal-desc {
    font-size: 13px;
    line-height: 20px;
    margin-bottom: 12px;
  }

  .modal-agree {
    padding: 10px;
    margin-bottom: 18px;
  }

  .ui-check-label {
    font-size: 12px;
    line-height: 19px;
  }

  .card-guide {
    padding: 14px;
  }

  .card-title {
    font-size: 14px;
    line-height: 20px;
  }

  .card-list li {
    font-size: 11px;
    line-height: 17px;
  }

  .modal-btn .login-btn {
    height: 50px;
    font-size: 14px;
  }

}

/* sub31 : 분석장비소개 상세페이지 ----------------------------------------------------------------------*/

.eq-detail {
  padding: 120px 0 180px;
  background: #fff;
}

.eq-detail__inner {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  box-sizing: border-box;
}

.eq-detail__title {
  margin-bottom: 80px;
  text-align: center;
}

.eq-detail__title h2 {
  color: #000;
  text-align: center;
  font-family: Pretendard;
  font-size: 64px;
  font-style: normal;
  font-weight: 800;
  line-height: 72px;
  word-break: keep-all;
}

.eq-detail__top {
  display: flex;
  gap: 64px;

  padding: 72px;

  border-radius: 27px;
  background: #F3F3F3;
  box-sizing: border-box;
}

.eq-detail__gallery {
  display: flex;
  gap: 12px;

  width: 48%;
  min-width: 0;
}

.eq-detail__thumbs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

.eq-detail__thumb {
  width: 52px;
  height: 52px;

  border-radius: 8px;
  border: 1px solid #E2E2E2;
  background: #FFF;

  overflow: hidden;
  cursor: pointer;

  transition:
    border-color .3s ease,
    transform .3s ease;

  box-sizing: border-box;
}

.eq-detail__thumb.active {
  border: 2px solid #2594D3;
}

.eq-detail__thumb:hover {
  border: 2px solid #A8D4ED;
}

.eq-detail__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.eq-detail__visual {
  position: relative;

  flex: 1;
  min-width: 0;
  aspect-ratio: 1 / 1;

  border-radius: 12px;
  border: 1px solid #E5E5E5;
  background: #FFF;

  overflow: hidden;
  box-sizing: border-box;
}

.eq-detail__visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.eq-detail__content {
  flex: 1;
  min-width: 0;
}

.eq-detail__category {
  margin-bottom: 16px;

  color: var(--Style, #2594D3);
  font-family: "Wanted Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: -0.02em;
}

.eq-detail__name {
  color: #000;
  font-family: Pretendard;
  font-size: 40px;
  font-style: normal;
  font-weight: 800;
  line-height: 48px;
  letter-spacing: -0.02em;
  word-break: keep-all;
}

.eq-detail__brand {
  margin-top: 12px;

  color: #999;
  font-family: "Wanted Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
}

.eq-detail__spec {
  margin-top: 48px;
  padding-top: 32px;

  border-top: 2px solid #222;
}

.eq-detail__spec-row {
  display: flex;
  align-items: flex-start;
}

.eq-detail__spec-title {
  width: 180px;
  flex-shrink: 0;

  color: #111;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
}

.eq-detail__spec-desc {
  flex: 1;
  min-width: 0;

  color: #222;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;

  word-break: keep-all;
}

.eq-detail__btns {
  display: flex;
  gap: 16px;

  margin-top: 32px;
  padding-top: 48px;

  border-top: 1px solid #E5E5E5;
}

.eq-detail__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 180px;
  height: 52px;

  padding: 0 24px;

  border-radius: 4px;
  border: 1px solid #BDBDBD;
  background: #FFF;

  color: #111;
  font-family: Pretendard;
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 1;

  transition:
    border-color .3s ease,
    background .3s ease,
    transform .3s ease;

  box-sizing: border-box;
}

.eq-detail__btn:hover {
  border-color: #111;
  transform: translateY(-2px);
}

.eq-detail__btn img,
.eq-detail__btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.eq-detail__feature-wrap {
  margin-top: 80px;
}

.eq-detail__feature-title {
  margin-bottom: 32px;
  text-align: center;
}

.eq-detail__feature-title h3 {
  color: #111;
  font-family: Pretendard;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 52px;
  letter-spacing: -0.02em;
  word-break: keep-all;
}

.eq-detail__feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.eq-detail__feature-card {
  min-height: 248px;
  padding: 32px;

  border-radius: 12px;
  border: 4px solid #DCDCDC;
  background: #FFF;

  box-sizing: border-box;
}

.eq-detail__feature-name {
  color: #111;
  font-family: Pretendard;
  font-size: 22px;
  font-style: normal;
  font-weight: 700;
  line-height: 34px;
  letter-spacing: -0.6px;
}

.eq-detail__feature-text {
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  color: #777;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.eq-detail__feature-text h2 {
  margin: 0 0 20px;

  color: #111;
  font-family: Pretendard;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.72px;
}

.eq-detail__feature-text h2 strong {
  font-weight: 700;
}

.eq-detail__feature-text p {
  margin: 0;

  color: #555;
  font-family: Pretendard;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.32px;

  word-break: keep-all;
}

@media (max-width:1440px) and (min-width:1201px) {

  .eq-detail {
    padding: 100px 30px 150px;
  }

  .eq-detail__inner {
    max-width: 1360px;
  }

  .eq-detail__title {
    margin-bottom: 64px;
  }

  .eq-detail__title h2 {
    font-size: 56px;
    line-height: 64px;
  }

  .eq-detail__top {
    gap: 48px;
    padding: 56px;
    border-radius: 24px;
  }

  .eq-detail__gallery {
    width: 50%;
  }

  .eq-detail__category {
    font-size: 18px;
    line-height: 26px;
  }

  .eq-detail__name {
    font-size: 36px;
    line-height: 44px;
  }

  .eq-detail__brand {
    font-size: 16px;
    line-height: 24px;
  }

  .eq-detail__spec {
    margin-top: 40px;
    padding-top: 28px;
  }

  .eq-detail__spec-title {
    width: 150px;
    font-size: 15px;
  }

  .eq-detail__spec-desc {
    font-size: 15px;
    line-height: 26px;
  }

  .eq-detail__btns {
    gap: 12px;
    margin-top: 28px;
    padding-top: 40px;
  }

  .eq-detail__btn {
    width: 170px;
    height: 50px;
    padding: 0 20px;
  }

  .eq-detail__feature-wrap {
    margin-top: 64px;
  }

  .eq-detail__feature-title {
    margin-bottom: 28px;
  }

  .eq-detail__feature-title h3 {
    font-size: 36px;
    line-height: 46px;
  }

  .eq-detail__feature-card {
    min-height: 230px;
    padding: 28px;
  }

  .eq-detail__feature-name,
  .eq-detail__feature-text h2 {
    font-size: 20px;
    line-height: 30px;
  }

  .eq-detail__feature-text p {
    font-size: 15px;
    line-height: 23px;
  }

}

@media (max-width:1200px) and (min-width:1025px) {

  .eq-detail {
    padding: 80px 30px 120px;
  }

  .eq-detail__title {
    margin-bottom: 48px;
  }

  .eq-detail__title h2 {
    font-size: 48px;
    line-height: 56px;
  }

  .eq-detail__top {
    gap: 32px;
    padding: 40px;
    border-radius: 20px;
  }

  .eq-detail__gallery {
    width: 48%;
  }

  .eq-detail__thumb {
    width: 46px;
    height: 46px;
  }

  .eq-detail__category {
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 24px;
  }

  .eq-detail__name {
    font-size: 30px;
    line-height: 38px;
  }

  .eq-detail__brand {
    margin-top: 8px;
    font-size: 15px;
    line-height: 22px;
  }

  .eq-detail__spec {
    margin-top: 32px;
    padding-top: 24px;
  }

  .eq-detail__spec-title {
    width: 120px;
    font-size: 14px;
    line-height: 22px;
  }

  .eq-detail__spec-desc {
    font-size: 14px;
    line-height: 23px;
  }

  .eq-detail__btns {
    gap: 10px;
    margin-top: 24px;
    padding-top: 32px;
  }

  .eq-detail__btn {
    width: 150px;
    height: 48px;
    padding: 0 16px;
    font-size: 14px;
  }

  .eq-detail__btn img,
  .eq-detail__btn svg {
    width: 18px;
    height: 18px;
  }

  .eq-detail__feature-wrap {
    margin-top: 56px;
  }

  .eq-detail__feature-title {
    margin-bottom: 24px;
  }

  .eq-detail__feature-title h3 {
    font-size: 32px;
    line-height: 42px;
  }

  .eq-detail__feature-card {
    min-height: 210px;
    padding: 24px;
  }

  .eq-detail__feature-name,
  .eq-detail__feature-text h2 {
    font-size: 19px;
    line-height: 28px;
  }

  .eq-detail__feature-text p {
    font-size: 14px;
    line-height: 22px;
  }

}

@media (max-width:1024px) and (min-width:769px) {

  .eq-detail {
    padding: 60px 24px 90px;
  }

  .eq-detail__title {
    margin-bottom: 36px;
  }

  .eq-detail__title h2 {
    font-size: 40px;
    line-height: 50px;
  }

  .eq-detail__top {
    gap: 24px;
    padding: 28px;
    border-radius: 18px;
  }

  .eq-detail__gallery {
    width: 48%;
    gap: 8px;
  }

  .eq-detail__thumbs {
    gap: 6px;
  }

  .eq-detail__thumb {
    width: 40px;
    height: 40px;
    border-radius: 6px;
  }

  .eq-detail__visual {
    border-radius: 10px;
  }

  .eq-detail__category {
    margin-bottom: 8px;
    font-size: 15px;
    line-height: 22px;
  }

  .eq-detail__name {
    font-size: 26px;
    line-height: 34px;
  }

  .eq-detail__brand {
    margin-top: 6px;
    font-size: 14px;
    line-height: 20px;
  }

  .eq-detail__spec {
    margin-top: 24px;
    padding-top: 20px;
  }

  .eq-detail__spec-row {
    margin-bottom: 8px;
  }

  .eq-detail__spec-title {
    width: 90px;
    font-size: 13px;
    line-height: 20px;
  }

  .eq-detail__spec-desc {
    font-size: 13px;
    line-height: 21px;
  }

  .eq-detail__btns {
    gap: 8px;
    margin-top: 20px;
    padding-top: 24px;
  }

  .eq-detail__btn {
    width: 135px;
    height: 46px;
    padding: 0 14px;
    font-size: 13px;
  }

  .eq-detail__btn img,
  .eq-detail__btn svg {
    width: 17px;
    height: 17px;
  }

  .eq-detail__feature-wrap {
    margin-top: 44px;
  }

  .eq-detail__feature-title {
    margin-bottom: 20px;
  }

  .eq-detail__feature-title h3 {
    font-size: 30px;
    line-height: 40px;
  }

  .eq-detail__feature-grid {
    gap: 12px;
  }

  .eq-detail__feature-card {
    min-height: 190px;
    padding: 20px;
    border-width: 3px;
  }

  .eq-detail__feature-name,
  .eq-detail__feature-text h2 {
    font-size: 17px;
    line-height: 26px;
  }

  .eq-detail__feature-text p {
    font-size: 13px;
    line-height: 21px;
  }

}

@media (max-width:768px) {

  .eq-detail {
    padding: 40px 20px 80px;
  }

  .eq-detail__title {
    margin-bottom: 32px;
  }

  .eq-detail__title h2 {
    font-size: 32px;
    line-height: 40px;
  }

  .eq-detail__top {
    display: block;

    padding: 20px;
    border-radius: 16px;
  }

  .eq-detail__gallery {
    width: 100%;
    flex-direction: column-reverse;
    gap: 12px;

    margin-bottom: 24px;
  }

  .eq-detail__thumbs {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
  }

  .eq-detail__thumb {
    width: 48px;
    height: 48px;
  }

  .eq-detail__visual {
    width: 100%;
  }

  .eq-detail__category {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 8px;
  }

  .eq-detail__name {
    font-size: 28px;
    line-height: 36px;
  }

  .eq-detail__brand {
    font-size: 14px;
    line-height: 22px;
  }

  .eq-detail__spec {
    margin-top: 24px;
    padding-top: 20px;
  }

  .eq-detail__spec-row {
    display: block;
    padding: 10px 0;
    margin-bottom: 0;
  }

  .eq-detail__spec-title {
    width: 100%;
    margin-bottom: 4px;

    font-size: 14px;
    line-height: 20px;
  }

  .eq-detail__spec-desc {
    font-size: 14px;
    line-height: 22px;
  }

  .eq-detail__btns {
    flex-direction: column;
    gap: 8px;

    margin-top: 24px;
    padding-top: 24px;
  }

  .eq-detail__btn {
    width: 100%;
  }

  .eq-detail__feature-wrap {
    margin-top: 48px;
  }

  .eq-detail__feature-title {
    margin-bottom: 20px;
  }

  .eq-detail__feature-title h3 {
    font-size: 28px;
    line-height: 36px;
  }

  .eq-detail__feature-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .eq-detail__feature-card {
    min-height: auto;
    padding: 20px;
  }

  .eq-detail__feature-name {
    font-size: 18px;
    line-height: 28px;
  }

  .eq-detail__feature-text {
    margin-top: 10px;

    font-size: 14px;
    line-height: 22px;
  }

  .eq-detail__feature-text h2 {
    margin-bottom: 16px;

    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.54px;
  }

  .eq-detail__feature-text p {
    font-size: 14px;
    line-height: 22px;
    letter-spacing: -0.28px;
  }

}

@media (max-width:480px) {

  .eq-detail {
    padding: 32px 16px 60px;
  }

  .eq-detail__title {
    margin-bottom: 24px;
  }

  .eq-detail__title h2 {
    font-size: 28px;
    line-height: 36px;
  }

  .eq-detail__top {
    padding: 16px;
    border-radius: 14px;
  }

  .eq-detail__gallery {
    gap: 8px;
    margin-bottom: 20px;
  }

  .eq-detail__thumbs {
    gap: 5px;
  }

  .eq-detail__thumb {
    width: 42px;
    height: 42px;
    border-radius: 6px;
  }

  .eq-detail__category {
    font-size: 14px;
    line-height: 20px;
  }

  .eq-detail__name {
    font-size: 24px;
    line-height: 32px;
  }

  .eq-detail__brand {
    font-size: 13px;
    line-height: 20px;
  }

  .eq-detail__spec {
    margin-top: 20px;
    padding-top: 16px;
  }

  .eq-detail__spec-row {
    padding: 8px 0;
  }

  .eq-detail__spec-title {
    font-size: 13px;
    line-height: 19px;
  }

  .eq-detail__spec-desc {
    font-size: 13px;
    line-height: 21px;
  }

  .eq-detail__btns {
    margin-top: 20px;
    padding-top: 20px;
  }

  .eq-detail__btn {
    height: 48px;
    padding: 0 16px;
    font-size: 14px;
  }

  .eq-detail__feature-wrap {
    margin-top: 40px;
  }

  .eq-detail__feature-title {
    margin-bottom: 16px;
  }

  .eq-detail__feature-title h3 {
    font-size: 24px;
    line-height: 32px;
  }

  .eq-detail__feature-card {
    padding: 16px;
    border-width: 3px;
    border-radius: 10px;
  }

  .eq-detail__feature-name,
  .eq-detail__feature-text h2 {
    font-size: 16px;
    line-height: 24px;
  }

  .eq-detail__feature-text {
    margin-top: 8px;
  }

  .eq-detail__feature-text p {
    font-size: 13px;
    line-height: 20px;
  }

}


/* =============================================
   개인정보처리방침 팝업 (바텀시트)
   ============================================= */
.privacy-popup {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}
.privacy-popup.is-open {
    opacity: 1;
    pointer-events: auto;
}
.privacy-popup-inner {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 16px 16px 0 0;
    padding: 32px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.35s ease;
}
.privacy-popup.is-open .privacy-popup-inner {
    transform: translateY(0);
}
.privacy-popup-inner h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #1a1a1a;
}
.privacy-popup-close {
    position: absolute;
    top: 16px;
    right: 20px;
    font-size: 24px;
    background: none;
    border: none;
    cursor: pointer;
    color: #666;
    line-height: 1;
}
.privacy-popup-content {
    overflow-y: auto;
    font-size: 14px;
    line-height: 1.8;
    color: #555;
}



@media (max-width: 768px) {

    .privacy-popup-inner {
        max-height: 75vh;

        padding: 28px;
    }

    .privacy-popup-inner h3 {
        padding-right: 40px;

        font-size: 17px;
        margin-bottom: 14px;
    }

    .privacy-popup-close {
        top: 18px;
        right: 20px;

        width: 32px;
        height: 32px;

        padding: 0;

        font-size: 24px;
    }

    .privacy-popup-content {
        font-size: 13px;
        line-height: 1.75;
    }
}

@media (max-width: 480px) {

    .privacy-popup-inner {
        max-height: 80vh;

        padding: 24px 20px;

        border-radius: 14px 14px 0 0;
    }

    .privacy-popup-inner h3 {
        padding-right: 36px;

        margin-bottom: 14px;

        font-size: 16px;
        line-height: 1.4;
    }

    .privacy-popup-close {
        top: 16px;
        right: 16px;

        width: 30px;
        height: 30px;

        padding: 0;

        font-size: 22px;
    }

    .privacy-popup-content {
        font-size: 13px;
        line-height: 1.7;

        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 360px) {

    .privacy-popup-inner {
        max-height: 82vh;

        padding: 22px 16px 20px;
    }

    .privacy-popup-inner h3 {
        font-size: 15px;
    }

    .privacy-popup-content {
        font-size: 12px;
        line-height: 1.65;
    }

    .privacy-popup-close {
        top: 14px;
        right: 14px;

        font-size: 20px;
    }
}

/* ===== 추가: 분석·결제 내역(mypage) 표 정렬 - 원본 시안 기준 좌/우 정렬 및 결제방법 한 줄 배치 ===== */
/* 접수번호/진행상태, 의뢰기관/의뢰자, 장비/옵션, 시료명/분석담당자 열: 좌측 정렬 */
.analysis-table tbody tr:nth-of-type(odd) td:nth-child(2),
.analysis-table tbody tr:nth-of-type(odd) td:nth-child(3),
.analysis-table tbody tr:nth-of-type(odd) td:nth-child(4),
.analysis-table tbody tr:nth-of-type(odd) td:nth-child(5),
.analysis-table tbody tr:nth-of-type(even) td:nth-child(1),
.analysis-table tbody tr:nth-of-type(even) td:nth-child(2),
.analysis-table tbody tr:nth-of-type(even) td:nth-child(3),
.analysis-table tbody tr:nth-of-type(even) td:nth-child(4) {
  text-align: left;
}

/* 의뢰일/완료일, 분석료/결제방법, 견적서/분석결과확인서, 거래명세서/세금계산서 열: 우측 정렬 */
.analysis-table tbody tr:nth-of-type(odd) td:nth-child(n+6),
.analysis-table tbody tr:nth-of-type(even) td:nth-child(n+5) {
  text-align: right;
}

/* 결제방법 + 결제하기 버튼 한 줄 배치 */
.analysis-table tbody tr:nth-of-type(even) td:nth-child(6) {
  white-space: nowrap;
}
.analysis-table tbody tr:nth-of-type(even) td:nth-child(6) .btn-pay {
  margin-left: 6px;
  vertical-align: middle;
}

/* 발행요청 버튼: 버튼처럼 보이지 않게 텍스트 링크(주황/밑줄)로 표시 */
.btn-doc-req {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: #E39A6A;
  text-decoration: underline;
  cursor: pointer;
}
.btn-doc-req:disabled {
  cursor: default;
  opacity: 0.6;
}

/* ===== 추가: 위 홀/짝수 행 좌우정렬 규칙은 mypage(rowspan 2행 1레코드) 표 전용이었으나
   .analysis-table 선택자가 전체를 대상으로 하여 member/prepaid 등 일반(1행 1레코드) 표에도
   적용되어 같은 열인데 행 번호(홀/짝)에 따라 정렬이 달라지는 문제가 있었음.
   analysis-table__body(rowspan 표)가 아닌 일반 표는 기본 가운데 정렬로 되돌림 ===== */
.analysis-table tbody:not(.analysis-table__body) tr:nth-of-type(odd) td,
.analysis-table tbody:not(.analysis-table__body) tr:nth-of-type(even) td {
  text-align: center;
}

/* ===== 추가: 메인화면 간편 분석의뢰 신청 폼 select-box 옵션 목록이
   흰색 배경에 흰 글씨(select 자체의 color:#fff 상속)로 렌더링되어
   마우스 오버 전까지 텍스트가 안 보이던 문제 수정 ===== */
.select-box select option {
  color: #333;
  background: #fff;
}

/* ===== 추가: 분석의뢰신청 Step1~4 필수입력 미입력 시 빨간 테두리 표시
   (.ui-form-field.error input/select는 기존 규칙 재사용, textarea와
   예약일시 트리거 버튼은 해당 규칙에 없어 여기서 보강) ===== */
.ui-form-field.error textarea {
  border-color: #D02A2A;
}
.ui-form-field.error .reserve-date-trigger {
  border-color: #D02A2A;
}

/* ===== 추가: .ui-input/.ui-select/.ui-textarea에 걸린 border:none !important
   규칙(4381행 부근) 때문에 위 에러 테두리가 실제로는 표시되지 않던 문제 수정 ===== */
.ui-form-field.error .ui-input,
.ui-form-field.error .ui-select,
.ui-form-field.error .ui-textarea {
  border: 1px solid #D02A2A !important;
}

/* ===== 추가: 분석장비소개 상세(/equipment/view) 주요장점 하단 장비 설명(에디터 등록) 영역 ===== */
.eq-detail__desc-wrap {
  width: 100%;
  margin-top: 80px;
  color: #333;
  font-family: Pretendard;
  font-size: 16px;
  line-height: 1.6;
  word-break: keep-all;
}
.eq-detail__desc-wrap img {
  max-width: 100%;
  height: auto;
}

/* ===== 추가: 분석의뢰 Step4 - 예치금 사용 결제방법 선택 시 선결제 잔액 표시
   (/member/prepaid 의 .balance-table 스타일 재사용, 폼 그리드 전체 폭 사용) ===== */
.req-form-deposit {
  grid-column: 1 / -1;
}
.req-form-deposit .balance-table {
  width: 100%;
  margin-top: 4px;
}
.req-form-deposit-warn {
  margin-top: 10px;
  color: #D02A2A;
  font-family: Pretendard;
  font-size: 14px;
  line-height: 1.5;
  word-break: keep-all;
}

/* ===== 추가: 분석·결제 내역(/analysis/mypage) 문의하기 버튼 (.btn-doc-req와 동일 스타일,
   클래스 분리 이유: .btn-doc-req는 document 위임 클릭 핸들러가 발행요청 로직으로 처리하므로
   같은 클래스를 쓰면 문의하기 클릭 시 발행요청 핸들러도 함께 실행되는 문제가 있어 별도 클래스 사용) ===== */
.btn-inquiry {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: #E39A6A;
  text-decoration: underline;
  cursor: pointer;
}
.btn-inquiry:disabled {
  cursor: default;
  opacity: 0.6;
}

/* ===== 추가: 문의하기 팝업 - 취소하기/문의하기 버튼 (기존 상세검색 영역의
   .btn-reset + .btn-sub 조합을 그대로 재사용, 팝업 안에서는 가운데 정렬 + 문의하기만 초록(틸) 계열로) ===== */
.modal-bottom .btn-group {
  justify-content: center;
}
.btn-inquiry-submit {
  background: #2E7D32;
}
.btn-inquiry-submit:hover {
  background: #256428;
}


/* 마이페이지 > 교육/세미나 신청내역 */

.mypage-edu-inner {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding-bottom: 80px;
  box-sizing: border-box;
}

.mypage-edu-head,
.mypage-edu-row {
  display: grid;
  grid-template-columns: 120px 640px 280px 180px 180px;
  align-items: center;
}

.mypage-edu-head {
  padding: 16px 0;
  border-top: 2px solid #333;
  border-bottom: 1px solid #ddd;
  background: #F4F4F4;

  color: #000;
  font-family: Pretendard;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
}


.mypage-edu-row {
  padding: 20px 0;
  border-bottom: 1px solid #eee;
  color: #000;
  box-sizing: border-box;
}

.mypage-edu-status {
  display: inline-block;
  margin: 0 auto;
  width: 80px;
  padding: 4px;
  box-sizing: border-box;
  border-radius: 999px;

  font-family: Pretendard;
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.mypage-edu-status.ing {
  background: #26B988;
  color: #fff;
}

.mypage-edu-status.end {
  background: #CE4242;
  color: #fff;
}

.mypage-edu-status.finish {
  background: #616161;
  color: #fff;
}

.mypage-edu-name {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  color: #000;
  font-family: Pretendard;
  font-size: 20px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.mypage-edu-date {
  color: #000;
  text-align: center;
  font-family: Pretendard;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-decoration: none;
  white-space: nowrap;
}

.mypage-edu-result {
  border: 0;
  padding: 0;
  background: none;
  color: #26B988;
  text-align: center;
  font-family: Pretendard;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}


.mypage-edu-result.cancel {
  color: #CE4242;
}

.mypage-edu-empty {
  padding: 40px 0;
  color: #888;
  text-align: center;
  font-size: 16px;
}

.mypage-edu-result-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  white-space: nowrap;
}

.mypage-edu-cancel-btn {
  padding: 4px 10px;
  border: 0;
  border-radius: 999px;
  background: #2594D3;
  color: #fff;

  font-family: Pretendard;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;

  white-space: nowrap;
  cursor: pointer;
}

/* 반응형 */
@media (max-width:1200px) {

  .mypage-edu-inner {
    padding: 0 20px 60px;
  }

  .mypage-edu-head,
  .mypage-edu-row {
    grid-template-columns: 120px 1fr 180px 180px 120px;
  }

  .mypage-edu-name {
    font-size: 18px;
    line-height: 28px;
  }

}


@media (max-width:768px) {

  .mypage-edu-inner {
    padding: 0 20px 40px;
  }

  .mypage-edu-head {
    display: none;
  }

  .mypage-edu-row {
    display: block;
    padding: 20px 16px;

    border: 1px solid #e5e5e5;
    border-radius: 12px;
    margin-bottom: 12px;

    background: #fff;
  }

  .mypage-edu-status {
    display: block;
    margin: 0 0 12px;

    width: 64px;
    padding: 6px 2px;

    font-size: 12px;
    line-height: 16px;
  }

  .mypage-edu-name {
    display: block;
    margin-bottom: 12px;

    font-size: 18px;
    line-height: 26px;
    word-break: keep-all;
  }

  .mypage-edu-date {
    display: block;
    margin-bottom: 4px;

    text-align: left;
    font-size: 14px;
    line-height: 20px;
    color: #666;
  }

  .mypage-edu-result {
    display: block;
    margin-top: 8px;

    text-align: left;
    font-size: 14px;
    line-height: 20px;
  }

}

/* ===== 추가: 마이페이지 교육/세미나 취소하기 버튼 - 종료 배지(.mypage-edu-status.finish)와
   동일한 pill 형태로 통일하고, 색상만 기존 버튼 블루(#2594D3, .login-btn.primary와 동일)로 지정 ===== */
.mypage-edu-cancel-btn {
  display: inline-block;
  width: 80px;
  padding: 4px;
  border: 0;
  border-radius: 999px;

  background: #2594D3;
  color: #fff;

  font-family: Pretendard;
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
}

.mypage-edu-cancel-btn:hover {
  background: #1a7bb5;
}

/* ===== 추가: 분석의뢰 Step2 예약일시 - 날짜 선택을 하단 예약 현황 캘린더로 통합 ===== */
.req-date-picker__hint {
  padding: 16px 0;
  margin-bottom: 8px;

  color: #666;
  font-family: Pretendard;
  font-size: 13px;
  line-height: 20px;
  text-align: center;
}

/* step2 예약일시 팝업은 미니 캘린더가 없어 구분선이 필요 없으므로 숨김 (다른 페이지의
   .req-date-picker__selected 는 그대로 유지) */
#s2-datepicker .req-date-picker__selected {
  border-top: 0;
}

/* 예약일시로 선택된 시작일/종료일/구간 (하단 예약 현황 캘린더) */
.req-calendar__table td.is-reserve-start,
.req-calendar__table td.is-reserve-end,
.req-calendar__table td.is-reserve-range {
  background: #E8EDF5;
}

.req-calendar__table td.is-reserve-start .day,
.req-calendar__table td.is-reserve-end .day {
  background: #39465E;
  color: #FFF;
}

/* ==========================================================================
   서브페이지 (00003.php) - 파트너사 및 주요고객사 로고 섹션
   ========================================================================== */
.partner-section {
  position: relative;
  background: #ffffff;
  padding: 60px 0 160px;
  box-sizing: border-box;
}

.partner-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* 상단 소개 헤더 */
.partner-intro-head {
  text-align: center;
  margin-bottom: 80px;
}

.partner-intro-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--Style, #2594D3);
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 16px;
}

.partner-intro-title {
  color: #111111;
  text-align: center;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 38px;
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: -0.02em;
  word-break: keep-all;
}

/* 그룹 섹션 (파트너사 / 주요고객사) */
.partner-group {
  margin-bottom: 90px;
}

.partner-group:last-child {
  margin-bottom: 0;
}

.partner-group-title {
  color: var(--Style, #2594D3);
  text-align: center;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  margin-bottom: 32px;
  word-break: keep-all;
}

.partner-clients .partner-group-title {
  margin-bottom: 40px;
}

/* 하위 카테고리 (주요의뢰기업 / 대학교 / 관공서) */
.partner-subgroup {
  margin-bottom: 50px;
}

.partner-subgroup:last-child {
  margin-bottom: 0;
}

.partner-subgroup-title {
  color: #222222;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
  padding-left: 2px;
}

/* 4열 그리드 */
.partner-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* 파트너 & 고객사 카드 */
.partner-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #e5e8ec;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
  height: 140px;
  box-sizing: border-box;
  transition: all 0.25s ease;
  overflow: hidden;
}

.partner-card:hover {
  border-color: #2594D3;
  box-shadow: 0 8px 24px rgba(37, 148, 211, 0.12);
  transform: translateY(-3px);
}

.partner-card-logo {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 20px 12px;
  box-sizing: border-box;
}

.partner-card-logo img {
  max-width: 100%;
  max-height: 70px;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 0.25s ease;
}

.partner-card:hover .partner-card-logo img {
  transform: scale(1.04);
}

.partner-card-divider {
  height: 1px;
  background: #eef1f4;
  margin: 0 20px;
  flex-shrink: 0;
}

.partner-card-name {
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  color: #4b525d;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

/* 반응형 미디어 쿼리 */
@media (max-width: 1200px) {
  .partner-grid {
    gap: 16px;
  }
}

@media (max-width: 1024px) {
  .partner-intro-head {
    margin-bottom: 60px;
  }

  .partner-intro-title {
    font-size: 32px;
  }

  .partner-group {
    margin-bottom: 70px;
  }

  .partner-group-title {
    font-size: 22px;
    margin-bottom: 28px;
  }

  .partner-subgroup {
    margin-bottom: 40px;
  }

  .partner-subgroup-title {
    font-size: 17px;
    margin-bottom: 16px;
  }

  .partner-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }

  .partner-card {
    height: 130px;
  }

  .partner-card-logo {
    padding: 14px 16px 10px;
  }

  .partner-card-logo img {
    max-height: 42px;
  }

  .partner-card-divider {
    margin: 0 16px;
  }

  .partner-card-name {
    height: 36px;
    font-size: 13px;
  }
}

@media (max-width: 768px) {
  .partner-section {
    padding: 40px 0 100px;
  }

  .partner-intro-head {
    margin-bottom: 45px;
  }

  .partner-intro-badge {
    font-size: 17px;
    margin-bottom: 10px;
  }

  .partner-intro-title {
    font-size: 24px;
    line-height: 1.4;
  }

  .partner-group {
    margin-bottom: 55px;
  }

  .partner-group-title {
    font-size: 18px;
    margin-bottom: 22px;
  }

  .partner-subgroup {
    margin-bottom: 35px;
  }

  .partner-subgroup-title {
    font-size: 16px;
    margin-bottom: 14px;
  }

  .partner-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .partner-card {
    height: 120px;
    border-radius: 6px;
  }

  .partner-card-logo {
    padding: 12px 14px 8px;
  }

  .partner-card-logo img {
    max-height: 38px;
  }

  .partner-card-divider {
    margin: 0 12px;
  }

  .partner-card-name {
    height: 34px;
    font-size: 12px;
    padding: 0 8px;
  }
}

@media (max-width: 480px) {
  .partner-intro-title {
    font-size: 20px;
  }

  .partner-grid {
    gap: 8px;
  }

  .partner-card {
    height: 110px;
  }

  .partner-card-logo {
    padding: 10px 10px 6px;
  }

  .partner-card-logo img {
    max-height: 32px;
  }

  .partner-card-divider {
    margin: 0 8px;
  }

  .partner-card-name {
    height: 30px;
    font-size: 11px;
    padding: 0 4px;
  }
}

/* ==========================================================================
   서브페이지 (00048.php) - 오픈랩 (자율사용) 안내
   ========================================================================== */
.openlab-hero .hero-inner,
.guide-hero.openlab-hero .hero-inner {
  background: url('/images/layout/openlab-bg.jpg') center center / cover no-repeat;
}

.openlab-section {
  position: relative;
  background: #ffffff;
}

.openlab-section--gray {
  background: #f5f5f5;
}

.openlab-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 80px 0;
  box-sizing: border-box;
}

/* 섹션 행 (좌측 타이틀 + 우측 컨텐츠) */
.openlab-row {
  display: flex;
  gap: 80px;
  align-items: flex-start;
}

.openlab-side {
  width: 280px;
  flex-shrink: 0;
}

.openlab-title {
  color: #111111;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.openlab-main {
  flex: 1;
  min-width: 0;
}

.openlab-divider {
  height: 80px;
}

/* 테이블 스타일 */
.openlab-table-tit {
  color: #111111;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.openlab-table-wrap {
  width: 100%;
}

.openlab-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 2px solid #555555;
  border-bottom: 1px solid #cccccc;
  table-layout: fixed;
}

.openlab-table thead th {
  background: #f8f9fa;
  padding: 13px 16px;
  border-bottom: 1px solid #dddddd;
  color: #222222;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}

.openlab-table tbody td,
.openlab-table tbody th {
  padding: 14px 20px;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14.5px;
  line-height: 1.5;
  border-bottom: 1px solid #eeeeee;
  vertical-align: middle;
  box-sizing: border-box;
}

.openlab-table tbody th.row-label {
  background: #f8f9fa;
  font-weight: 600;
  color: #222222;
  text-align: center;
  border-right: 1px solid #eeeeee;
}

.openlab-table tbody td {
  background: #ffffff;
  color: #444444;
  text-align: left;
}

.openlab-table tbody tr:last-child th,
.openlab-table tbody tr:last-child td {
  border-bottom: none;
}

/* 장비 교육 */
.openlab-edu-area {
  margin-top: 36px;
}

.openlab-sub-title {
  color: #111111;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.openlab-edu-desc {
  color: #555555;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: -0.02em;
  word-break: keep-all;
  margin-bottom: 20px;
}

.openlab-edu-box {
  border: 1.5px solid #64b5f6;
  border-radius: 8px;
  padding: 22px 28px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
}

.openlab-edu-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.openlab-badge {
  background: #e3f2fd;
  color: #1976d2;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  display: inline-block;
  line-height: 1.4;
}

.openlab-arrow {
  color: #999999;
  font-size: 13px;
}

.openlab-val {
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #222222;
}

.openlab-edu-note {
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  color: var(--Style, #2594D3);
  font-weight: 500;
  line-height: 1.4;
  margin-top: 4px;
}

.openlab-bottom-notice {
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #222222;
  margin-top: 24px;
  line-height: 1.5;
  letter-spacing: -0.02em;
  word-break: keep-all;
}

/* 오픈랩 반응형 미디어 쿼리 */
@media (max-width: 1440px) and (min-width: 1201px) {
  .openlab-container {
    max-width: 1320px;
    padding: 70px 0;
  }
}

@media (max-width: 1200px) and (min-width: 1025px) {
  .openlab-container {
    padding: 60px 30px;
  }

  .openlab-row {
    gap: 60px;
  }

  .openlab-side {
    width: 220px;
  }

  .openlab-title {
    font-size: 28px;
  }
}

@media (max-width: 1024px) and (min-width: 769px) {
  .openlab-container {
    padding: 55px 24px;
  }

  .openlab-row {
    gap: 40px;
  }

  .openlab-side {
    width: 180px;
  }

  .openlab-title {
    font-size: 24px;
  }
}

@media (max-width: 768px) {
  .openlab-container {
    padding: 40px 20px;
  }

  .openlab-row {
    display: block;
  }

  .openlab-side {
    width: 100%;
    margin-bottom: 20px;
  }

  .openlab-title {
    font-size: 22px;
  }

  .openlab-divider {
    height: 50px;
  }

  .openlab-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .openlab-table {
    min-width: 480px;
  }

  .openlab-table thead th {
    font-size: 13.5px;
    padding: 10px 12px;
  }

  .openlab-table tbody td,
  .openlab-table tbody th {
    font-size: 13px;
    padding: 11px 14px;
  }

  .openlab-edu-box {
    padding: 16px 18px;
  }

  .openlab-bottom-notice {
    font-size: 12.5px;
  }
}

@media (max-width: 480px) {
  .openlab-container {
    padding: 40px 16px;
  }
}

/* 분석장비 상세 - 예약 불가 장비(시편전처리) 예약 버튼 비활성화 */
.eq-detail__btn--disabled,
.eq-detail__btn--disabled:hover {
  border-color: #E0E0E0;
  background: #F5F5F5;
  color: #AAA;
  cursor: not-allowed;
  transform: none;
}

.eq-detail__btn--disabled img {
  opacity: .4;
}

/* 분석장비 상세 - 시편전처리 장비 안내 문구 (버튼 하단) */
.eq-detail__notice {
  margin-top: 24px;
}

/* 분석장비 목록(/equipment, /analysis/equipment_status) - 자율사용 가능 장비 표시 (장비명 하단) */
.eq-autonomous-badge {
  display: block;
  margin-top: 6px;
  color: #2563EB;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}

/* 분석의뢰 step2 - FIB 장비 선택 시 안내 문구 (선택 전 숨김) */
.ui-form-main .ui-form-grid .ui-form-field > .req-form-info[hidden] {
  display: none;
}

/* 분석의뢰 step3 - 시료 처리 테이블 (시료수 아래, 라벨 없이 전체 폭) */
.ui-form-main .ui-form-grid .req-sample-handling {
  grid-column: 1 / -1;
}
.req-sample-handling__table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.req-sample-handling__table th,
.req-sample-handling__table td {
  border: 1px solid #E5E5E5;
  padding: 10px;
  text-align: center;
  vertical-align: middle;
}
.req-sample-handling__table th {
  background: #F7F8FA;
  color: #242424;
  font-family: Pretendard;
  font-size: 15px;
  font-weight: 600;
}
.req-sample-handling__table .ui-input {
  width: 100%;
}
@media (max-width: 768px) {
  .req-sample-handling__table th,
  .req-sample-handling__table td {
    padding: 6px;
    font-size: 13px;
  }
}

/* 마이페이지(/analysis/mypage) 환불 규정 하단 - 입금 계좌 정보 및 통장 사본·사업자등록증 다운로드 */
.service-policy__docs {
  margin-top: 20px;
  padding: 20px 24px;
  border: 1px solid #E5E5E5;
  border-radius: 8px;
  background: #F7F8FA;
}
.service-policy .service-policy__docs-title {
  margin: 0 0 8px;
  color: #222;
  font-weight: 700;
}
.service-policy .service-policy__docs-desc {
  margin: 12px 0 0;
}
.service-policy__docs-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.service-policy__docs-btn {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 18px;
  border: 1px solid #0066CC;
  border-radius: 6px;
  background: #fff;
  color: #0066CC;
  font-family: Pretendard;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.service-policy__docs-btn:hover {
  background: #0066CC;
  color: #fff;
}
@media (max-width: 768px) {
  .service-policy__docs {
    padding: 16px;
  }
  .service-policy__docs-btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}