/* =========================================================
   K-오션 채용 박람회 스타일
   - 1200px 이하에서는 모바일 레이아웃으로 바뀝니다.
   - 주요 색상은 아래 :root 에서 한 번에 바꿀 수 있습니다.
   ========================================================= */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard-dynamic-subset.css");

@font-face {
  font-family: "GmarketSansMedium";
  src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

:root {
  --point: #00a0da;       /* 하늘색 포인트 */
  --point-dark: #0e3586;  /* 남색 포인트 */
  --gray-21: #212121;
  --gray-2a: #2a2a2a;
  --gray-3e: #3e3e3e;
  --gray-42: #424242;
  --gray-5: #555555;
  --gray-6a: #6a6a6a;
  --gray-b9: #b9b9b9;
  --gray-e0: #e0e0e0;
  --gray-fa: #fafafa;
  --radius: 10px;
}

/* ---------- 기본 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  font-family: pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}
body { margin: 0; color: #000; background: #fff; }
h1, h2, p, ul, dl, dd { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; background: none; border: 0; padding: 0; color: inherit; }

h1 {
  font-family: "GmarketSansMedium", sans-serif;
  font-weight: 700;
  text-align: center;
  font-size: 48px;
  line-height: 48px;
}

section { scroll-margin-top: 100px; }

.mo-only { display: none !important; }
.bg-gray { background: var(--gray-fa); }
.inner { max-width: 1440px; margin: 0 auto; padding: 100px 20px; }

/* ---------- 헤더 ---------- */
.header {
  position: sticky; top: 0; z-index: 10;
  background: #fff;
  border-bottom: 1px solid var(--gray-e0);
}
.header__inner {
  max-width: 1440px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 20px;
}
.header__logo img.pc-only { width: 111px; }
.gnb { overflow-x: auto; white-space: nowrap; }
.gnb a { font-size: 20px; line-height: 24px; font-weight: 500; }
.gnb a:not(:last-child) { padding-right: 68px; }
.gnb a:hover { color: var(--point); }

/* ---------- 메인 이미지 ---------- */
.main-visual { width: 100%; }

/* ---------- 채용박람회 안내 ---------- */
.guide { max-width: 1440px; margin: 0 auto; padding: 176px 20px; }
.guide > h1 { padding-bottom: 46px; }
.guide__wrap { display: flex; align-items: flex-start; }
.guide__poster { width: 466px; height: 660px; object-fit: contain; margin-right: 50px; flex-shrink: 0; }
.guide__table {
  flex: 1;
  border-top: 2px solid var(--gray-6a);
  border-bottom: 2px solid var(--gray-6a);
}
.guide__table dl {
  display: flex; align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--gray-e0);
}
.guide__table dt {
  color: var(--gray-21); font-size: 22px; line-height: 26px; font-weight: 700;
  width: 200px; margin-right: 20px; flex-shrink: 0;
}
.guide__table dd { color: var(--gray-42); font-size: 22px; line-height: 36px; }
.guide__table dl.guide__program { display: block; border-bottom: 0; }
.guide__program li { display: flex; align-items: flex-start; margin-top: 20px; }
.badge {
  flex-shrink: 0;
  width: 160px; padding: 4px 0; margin-right: 60px;
  background: var(--point-dark); color: #fff; text-align: center;
  border-radius: var(--radius);
  font-size: 22px; line-height: 26px;
}
.guide__program p { font-size: 22px; line-height: 32px; color: var(--gray-42); }

/* ---------- 배치도 ---------- */
.event__title { padding-bottom: 8px; }
.event__img { padding-top: 40px; }
.event__img img { width: 100%; cursor: zoom-in; }

/* ---------- 채용 기업 소개 ---------- */
.introduce { max-width: 1440px; margin: 0 auto; padding: 100px 20px; }
.introduce h1 { padding-bottom: 46px; }
.company-list { display: flex; flex-wrap: wrap; gap: 12px; }
.company-list li {
  width: calc(25% - 10px); height: 233px; margin-bottom: 20px;
  border: 1px solid var(--gray-e0); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
}
.company-list li img { max-height: 80px; width: auto; }
.company-list li.more { display: none; }
.company-list.is-open li.more { display: flex; }
.btn-more {
  display: flex; margin: 48px auto 0;
  padding: 20px 80px;
  border: 1px solid var(--gray-e0); border-radius: var(--radius);
  font-size: 22px; line-height: 26px; font-weight: 500; color: var(--gray-5);
}
.btn-more:hover { border-color: var(--gray-5); }

/* ---------- 주관 기관 소개 ---------- */
.agency h1 { padding-bottom: 90px; }
.agency__slider { position: relative; }
.agency-card {
  position: relative;
  min-height: 555px; height: auto;
  background: #fff;
  border: 1px solid var(--gray-e0); border-radius: var(--radius);
}
.agency-card__logo { padding: 32px 60px 10px; border-bottom: 1px solid var(--gray-e0); }
.agency-card__logo img { width: 221px; margin: 0 auto; }
.agency-card__body { padding: 24px; }
.agency-card__body h2 { font-size: 22px; line-height: 26px; color: var(--gray-21); font-weight: 700; }
.agency-card__tag { font-size: 15px; line-height: 18px; color: var(--point-dark); font-weight: 700; padding: 16px 0 12px; }
.agency-card__desc { font-size: 18px; line-height: 24px; color: var(--gray-5); }
.agency-card__btns { position: absolute; left: 0; bottom: 20px; width: 100%; padding: 0 15px; }
.agency-card__btns a {
  display: block; width: 100%; padding: 13px 0;
  font-size: 18px; line-height: 24px; font-weight: 700; text-align: center;
  border-radius: var(--radius);
}
.btn-primary { background: var(--point); color: #fff; margin-bottom: 10px; }
.btn-primary:hover { background: var(--point-dark); }
.btn-line { background: #fff; color: var(--gray-3e); border: 1px solid var(--gray-3e); }
.btn-line:hover { background: var(--gray-3e); color: #fff; }

.slide-btn {
  position: absolute; top: -75px; z-index: 5;
  width: 50px; height: 50px;
  background: #fff; border: 1px solid var(--gray-e0); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.slide-btn::after {
  content: ""; width: 12px; height: 12px;
  border-top: 3px solid #616161; border-right: 3px solid #616161;
}
.slide-btn--prev { right: 70px; }
.slide-btn--prev::after { transform: translateX(2px) rotate(-135deg); }
.slide-btn--next { right: 10px; }
.slide-btn--next::after { transform: translateX(-2px) rotate(45deg); }

/* ---------- 직무소개 ---------- */
.job { max-width: 1440px; margin: 0 auto; padding: 100px 0; }
.job h1 { margin-bottom: 48px; }
.job__wrap { display: flex; justify-content: space-between; align-items: flex-start; padding: 0 20px; }
.job__tabs { border-top: 1px solid var(--gray-5); margin-right: 45px; flex-shrink: 0; }
.job__tabs li {
  display: flex; align-items: center; justify-content: space-between;
  width: 400px; padding: 21px 32px;
  border-bottom: 1px solid var(--gray-e0);
  background: #fff; cursor: pointer;
}
.job__tabs li p { font-size: 22px; line-height: 26px; color: #000; font-weight: 400; }
.job__tabs li img { width: 8px; height: 18px; visibility: hidden; }
.job__tabs li.active p { color: var(--point); font-weight: 700; }
.job__tabs li.active img { visibility: visible; }

.job__panels { flex: 1; padding: 40px; border: 1px solid var(--gray-e0); border-radius: var(--radius); }
.job__panel { display: none; }
.job__panel.active { display: flex; }
.job__text { margin-right: 10px; flex: 1; }
.job__panel > img { width: 50%; object-fit: cover; }
.job__text h2 { font-size: 34px; line-height: 40px; font-weight: 700; color: var(--gray-21); margin-bottom: 16px; }
.job__desc { font-size: 22px; line-height: 26px; color: var(--gray-5); margin-bottom: 40px; }
.job__tip { color: var(--gray-5); font-size: 16px; line-height: 24px; }
.job__tip p { margin: 4px 0; }
.job__tip-title { color: var(--point-dark); font-weight: 700; margin-bottom: 20px !important; }

/* ---------- 오시는 길 ---------- */
.road h1 { padding-bottom: 48px; }
.road__map { position: relative; height: 500px; }
.road__map img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.road__map-m { width: 100%; }
.road__info { margin-top: 48px; text-align: center; }
.road__addr, .road__note { display: flex; justify-content: center; align-items: center; }
.road__addr { font-size: 28px; line-height: 34px; }
.road__note { font-size: 20px; line-height: 24px; }
.road__info .label { color: var(--point); font-weight: 700; margin-right: 12px; flex-shrink: 0; }
.road__addr .value { font-weight: 500; color: var(--gray-21); }
.road__note .value { font-weight: 500; color: var(--gray-42); }
.road__btns { padding: 68px 0 32px; display: flex; justify-content: center; }
.road__btns a {
  display: block; width: 310px; margin: 0 15px; padding: 13px 0;
  background: var(--point); color: #fff; font-size: 20px; line-height: 24px; font-weight: 700;
  border-radius: var(--radius);
}
.road__btns a:hover { background: var(--point-dark); }

/* ---------- 문의처 ---------- */
.inquiry { max-width: 1440px; margin: 0 auto; padding: 100px 20px; }
.inquiry h1 { padding-bottom: 32px; }
.inquiry__lead { color: var(--point-dark); font-size: 30px; line-height: 36px; font-weight: 600; text-align: center; margin-bottom: 48px; }
.inquiry__box {
  display: flex; align-items: center; justify-content: space-between;
  border: 1px solid var(--gray-e0); border-radius: var(--radius);
  padding: 10px 20px 10px 40px;
}
.inquiry__box ul { display: flex; flex-wrap: wrap; flex: 1; }
.inquiry__box li {
  display: flex; align-items: center; width: 50%;
  font-size: 22px; line-height: 26px; font-weight: 500; color: var(--gray-42);
  margin-bottom: 20px;
}
.inquiry__box .name { color: var(--point); font-weight: 700; width: 45%; }
.inquiry__box .name--wide { width: 58%; }
.inquiry__box .bar { display: block; width: 2px; height: 22px; background: var(--gray-e0); margin: 0 12px; flex-shrink: 0; }
.inquiry__box > img { width: 358px; }

/* ---------- 푸터 ---------- */
.footer { background: var(--gray-2a); }
.footer__inner {
  max-width: 1440px; margin: 0 auto; padding: 100px 20px;
  display: flex; justify-content: space-between; align-items: center;
}
.footer__logo { width: 145px; }
.footer__title { font-size: 22px; line-height: 26px; color: #fff; opacity: .8; margin-bottom: 16px; font-weight: 600; }
.footer ul { display: flex; }
.footer li { font-size: 18px; line-height: 24px; color: #fff; opacity: .5; }
.footer li:not(:last-child) { margin-right: 60px; }

/* ---------- 맨 위로 버튼 ---------- */
.btn-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 20;
  display: none;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--point); color: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,.15);
  align-items: center; justify-content: center;
}
.btn-top.show { display: flex; }
.btn-top svg { width: 16px; height: 16px; }

/* =========================================================
   모바일 (1200px 이하)
   ========================================================= */
@media (max-width: 1200px) {
  .pc-only { display: none !important; }
  .mo-only { display: block !important; }
  br.mo-only { display: inline !important; }

  h1 { font-size: 28px; line-height: 28px; }
  section { scroll-margin-top: 110px; }
  .inner { padding: 60px 20px; }

  /* 헤더 */
  .header__inner { display: block; padding: 0 20px; }
  .header__logo img.mo-only { width: 160px; padding: 12px 0; box-sizing: content-box; }
  .gnb { display: flex; flex-wrap: nowrap; padding: 12px 0 20px; margin-right: -16px; }
  .gnb a { font-size: 15px; line-height: 18px; flex: 0 0 auto; }
  .gnb a:not(:last-child) { padding-right: 16px; }

  /* 안내 */
  .guide { padding: 0 0 10px; }
  .guide__wrap { display: block; }
  .guide__poster-m { width: 100%; }
  .guide__title-m { margin: 80px 0 26px; }
  .guide__table { margin: 0 20px; border: 0; }
  .guide__table dl { padding: 16px 0; }
  .guide__table dt { font-size: 14px; line-height: 17px; width: 80px; }
  .guide__table dd { font-size: 14px; line-height: 22px; }
  .guide__program li { display: block; }
  .badge { display: inline-block; width: auto; padding: 6px 20px; margin-right: 0; font-size: 14px; line-height: 17px; }
  .guide__program p { font-size: 14px; line-height: 22px; margin-top: 8px; }

  /* 배치도 */
  .event__title { padding-bottom: 0; }
  .event__img { padding-top: 20px; }

  /* 채용기업 */
  .introduce { padding: 60px 20px; }
  .introduce h1 { padding-bottom: 30px; }
  .company-list { justify-content: space-between; }
  .company-list li { width: calc(50% - 6px); height: 165px; }
  .company-list li img { max-height: 50px; }
  .btn-more { width: 100%; justify-content: center; padding: 14px 0; margin-top: 30px; font-size: 14px; line-height: 17px; }

  /* 주관기관 */
  .agency { padding-bottom: 130px; }
  .agency h1 { padding-bottom: 20px; }
  .agency-card { min-height: 520px; }
  .agency-card__body h2 { font-size: 24px; line-height: 29px; }
  .agency-card__tag { font-size: 14px; line-height: 17px; }
  .agency-card__desc { font-size: 16px; line-height: 24px; }
  .agency-card__btns a { font-size: 16px; line-height: 19px; padding: 15px 0; }
  .slide-btn { top: auto; bottom: -70px; }
  .slide-btn--prev { right: auto; left: calc(50% - 60px); }
  .slide-btn--next { right: calc(50% - 60px); }

  /* 직무소개 */
  .job { padding: 60px 0; }
  .job h1 { margin-bottom: 40px; }
  .job__wrap { display: block; padding: 0; }
  .job__tabs { display: flex; border: 0; margin: 0 20px 20px; gap: 4px; }
  .job__tabs li { width: 33.333%; padding: 8px 0; border: 0; border-radius: 4px; justify-content: center; }
  .job__tabs li p { font-size: 16px; line-height: 19px; color: var(--gray-b9); }
  .job__tabs li img { display: none; }
  .job__tabs li.active { background: var(--point-dark); }
  .job__tabs li.active p { color: #fff; }
  .job__panels { padding: 0; border: 0; border-radius: 0; }
  .job__panel.active { flex-direction: column-reverse; }
  .job__panel > img { width: 100%; margin-bottom: 40px; }
  .job__text { margin: 0 20px; }
  .job__text h2 { font-size: 24px; line-height: 29px; margin-bottom: 12px; }
  .job__desc { font-size: 16px; line-height: 24px; }
  .job__tip { font-size: 16px; }

  /* 오시는 길 */
  .road h1 { padding-bottom: 0; margin-bottom: 20px; }
  .road__info { margin-top: 20px; }
  .road__addr, .road__note { align-items: baseline; justify-content: flex-start; font-size: 16px; line-height: 22px; }
  .road__info .label { width: 40px; font-size: 16px; }
  .road__addr .value, .road__note .value { text-align: left; color: var(--gray-42); }
  .road__btns { padding: 20px 0; }
  .road__btns a { width: 50%; margin: 0; padding: 15px 0; font-size: 16px; line-height: 19px; }
  .road__btns a:first-child { margin-right: 12px; }

  /* 문의처 */
  .inquiry { padding: 60px 20px; }
  .inquiry h1 { padding-bottom: 20px; }
  .inquiry__lead { font-size: 16px; line-height: 24px; margin-bottom: 20px; }
  .inquiry__box { flex-direction: column-reverse; padding: 10px 20px; }
  .inquiry__box ul { display: block; width: 100%; }
  .inquiry__box li { position: relative; display: block; width: 100%; padding-left: 32px; font-size: 16px; line-height: 19px; }
  .inquiry__box .name, .inquiry__box .name--wide { display: block; width: 100%; font-size: 16px; line-height: 26px; }
  .inquiry__box .bar { position: absolute; left: 0; top: 0; height: 100%; margin: 0; }
  .inquiry__box > img { width: 100%; margin-bottom: 40px; }

  /* 푸터 */
  .footer__inner { flex-direction: column; align-items: flex-start; padding: 80px 20px 115px; }
  .footer__logo { width: 112px; margin-bottom: 32px; }
  .footer__title { font-size: 18px; line-height: 24px; font-weight: 700; }
  .footer ul { flex-direction: column; }
  .footer li { font-size: 14px; line-height: 17px; margin-bottom: 8px; }
  .footer li:not(:last-child) { margin-right: 0; }
  .btn-top { bottom: 16px; }
}