.main__section {
  position: relative;
}

.main__section + .main__section {
  margin-top: -50px;
  padding-bottom: 50px;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
}

.main__section:last-child {
  padding-bottom: 0;
}

/* ≤1600 */
@media (max-width: 1600px) {
  .main__section + .main__section {
    margin-top: -40px;
    padding-bottom: 48px;
    border-top-left-radius: 44px;
    border-top-right-radius: 44px;
  }
}

/* ≤1440 */
@media (max-width: 1440px) {
  .main__section + .main__section {
    margin-top: -36px;
    padding-bottom: 44px;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
  }
}

/* ≤1280 */
@media (max-width: 1280px) {
  .main__section + .main__section {
    margin-top: -32px;
    padding-bottom: 40px;
    border-top-left-radius: 36px;
    border-top-right-radius: 36px;
  }
}

/* ≤1024 */
@media (max-width: 1024px) {
  .main__section + .main__section {
    margin-top: -28px;
    padding-bottom: 36px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
  }
}

/* ≤768 */
@media (max-width: 768px) {
  .main__section + .main__section {
    margin-top: -20px;
    padding-bottom: 28px;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
  }
}

/* ≤390 */
@media (max-width: 390px) {
  .main__section + .main__section {
    margin-top: -16px;
    padding-bottom: 24px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
  }
}

/* ==================================================
      main__visual (메인 비주얼 섹션)
      설명: 메인 비주얼
================================================== */

.main__visual {
  height: 100vh;
  position: sticky;
  top: 0;
  z-index: -1;
  overflow: hidden;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.main__visual .bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.7);
  /* 꽉 차게 */
  z-index: -1;
}

.main__visual.released {
  position: relative;
  top: auto;
}

.main__visual h2 {
  font-size: 4rem;
  font-weight: 400;
  letter-spacing: 2px;
  margin-bottom: 1rem;
}

.main__visual h2 span {
  font-weight: 900;
}

.main__visual p {
  font-size: 1.5rem;
}

.main__slogan {
  background: #fff;
  text-align: center;
  position: relative;
}

.main__slogan h2 {
  padding: 100px 0;
  font-size: 3.675rem;
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: italic;
}

.scroll__box {
  position: absolute;
  left: 50%;
  top: -70px;
  transform: translateX(-50%);
  width: 300px;
  height: 150px;
  background: #fff;
  border-radius: 150px 150px 0 0;
  display: flex;
  align-items: start;
  justify-content: center;
}

/* 안쪽 정렬 */
.scroll__circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 12px;
}

/* 마우스 아이콘 */
.mouse {
  width: 20px;
  height: 32px;
  border: 2px solid #afafaf;
  border-radius: 12px;
  position: relative;
  margin-bottom: 10px;
}

.mouse .wheel {
  width: 4px;
  height: 4px;
  background: #001f87;
  /* 파란색 점 */
  border-radius: 50%;
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  animation: wheelMove 1.1s infinite;
}

@keyframes wheelMove {
  0% {
    top: 6px;
    opacity: 1;
  }

  100% {
    top: 18px;
    /* 아래로 내려감 */
    opacity: 0;
    /* 사라지듯 */
  }
}

/* 텍스트 */
.scroll__circle p {
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  color: #001f87;
  /* 네이비 블루 */
  margin: 0;
}

/* ≤1600 */
@media (max-width: 1600px) {
  .main__visual h2 {
    font-size: 3.5rem;
    letter-spacing: 1.8px;
  }

  .main__visual p {
    font-size: 1.375rem;
  }

  .main__slogan h2 {
    padding: 90px 0;
    font-size: 3.25rem;
  }

  .main__slogan h2 img {
    height: 48px;
  }

  .scroll__box {
    top: -64px;
    width: 280px;
    height: 140px;
  }
}

/* ≤1440 */
@media (max-width: 1440px) {
  .main__visual h2 {
    font-size: 3.125rem;
    letter-spacing: 1.6px;
  }

  .main__visual p {
    font-size: 1.25rem;
  }

  .main__slogan h2 {
    padding: 80px 0;
    font-size: 2.875rem;
  }

  .main__slogan h2 img {
    height: 44px;
  }

  .scroll__box {
    top: -58px;
    width: 260px;
    height: 130px;
  }

  .mouse {
    width: 18px;
    height: 30px;
  }

  .mouse .wheel {
    width: 4px;
    height: 4px;
  }

  .scroll__circle p {
    font-size: 0.9375rem;
  }
}

/* ≤1280 */
@media (max-width: 1280px) {
  .main__visual h2 {
    font-size: 2.75rem;
    letter-spacing: 1.4px;
  }

  .main__visual p {
    font-size: 1.125rem;
  }

  .main__slogan h2 {
    padding: 72px 0;
    font-size: 2.5rem;
  }

  .main__slogan h2 img {
    height: 40px;
  }

  .scroll__box {
    top: -52px;
    width: 240px;
    height: 120px;
  }

  .mouse {
    width: 16px;
    height: 28px;
  }
}

/* ≤1024 (태블릿 가로) */
@media (max-width: 1024px) {

  /* 화면작아질 때 고정 높이 살짝 줄임 */
  .main__visual h2 {
    font-size: 2.375rem;
    letter-spacing: 1.2px;
  }

  .main__visual p {
    font-size: 1rem;
  }

  .main__slogan h2 {
    padding: 64px 24px;
    font-size: 2.25rem;
  }

  .main__slogan h2 img {
    height: 36px;
  }

  .scroll__box {
    top: -46px;
    width: 220px;
    height: 110px;
  }

  .mouse {
    width: 16px;
    height: 26px;
  }

  .mouse .wheel {
    width: 3px;
    height: 3px;
  }

  .scroll__circle {
    padding-top: 10px;
  }

  .scroll__circle p {
    font-size: 0.875rem;
  }
}

/* ≤768 (태블릿 세로/모바일) */
@media (max-width: 768px) {
  .main__visual {
    padding: 0 20px;
  }

  .main__visual h2 {
    font-size: 2rem;
    letter-spacing: 1px;
    margin-bottom: 0.75rem;
  }

  .main__visual p {
    font-size: 0.9375rem;
  }

  .main__slogan h2 {
    padding: 52px 24px;
    font-size: 2rem;
  }

  .scroll__box {
    top: -40px;
    width: 200px;
    height: 100px;
    border-radius: 120px 120px 0 0;
  }

  .mouse {
    width: 14px;
    height: 24px;
  }

  .mouse .wheel {
    width: 3px;
    height: 3px;
    top: 5px;
  }
}

/* ≤390 (소형 모바일) */
@media (max-width: 390px) {
  .main__visual {
    padding: 0 16px;
  }

  .main__visual h2 {
    font-size: 1.75rem;
    letter-spacing: 0.8px;
  }

  .main__visual p {
    font-size: 0.875rem;
  }

  .main__slogan h2 {
    padding: 44px 12px;
    font-size: 1.75rem;
  }

  .scroll__box {
    top: -36px;
    width: 180px;
    height: 92px;
  }

  .mouse {
    width: 12px;
    height: 22px;
  }

  .mouse .wheel {
    width: 2.5px;
    height: 2.5px;
  }

  .scroll__circle p {
    font-size: 0.8125rem;
  }
}

/* ==================================================
      main__count (카운트 섹션)
      설명: 숫자 카운트
================================================== */

.main__count {
  background-color: #10258e;
  background-image: url('../resource/main/count__bg.png');
  background-repeat: no-repeat;
  background-position: left 50px bottom 100px;
  background-size: auto;
  color: #fff;
}

.main__count .layout__basic {
  display: flex;
  justify-content: space-between;
  padding-top: 200px;
  padding-bottom: 200px;
}

.main__count__title {
  width: 45%;
  display: flex;
  flex-direction: column;
}

.main__count__title h2 {
  font-family: "Roboto", sans-serif;
  font-style: italic;
  font-size: 3.675rem;
  line-height: 1.1;
  margin-bottom: 1.5rem;
}

.main__count__title p {
  font-size: 1.375rem;
  line-height: 1.6;
}

.main__count__title .btn__more {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  margin-top: auto;
}

.main__count__title .btn__circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
  transition: transform 0.3s ease;
  color: #10258e;
  /* 아이콘 색상 */
}

.main__count__title .btn__circle .ico {
  width: 26px;
  height: auto;
  display: block;
}

.main__count__title .btn__more:hover .btn__circle {
  transform: translateX(4px);
}

.main__count__title .btn__text {
  letter-spacing: .05em;
}

/* 그리드 */
.main__count__counting {
  width: 55%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 100px 72px;
  /* 행/열 간격 */
  color: #fff;
}

/* 카드 */
.count-card {
  border-top: 1px solid rgba(255, 255, 255, .35);
  padding-top: 16px;
}

/* 상단 라벨 */
.count-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.25rem;
  opacity: .9;
  margin-bottom: 3rem;
}

.count-head svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: #e6ecff;
}

/* 숫자 + 단위 */
.count-num {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.count-num strong {
  font-family: "Exo 2", sans-serif;
  font-weight: 700;
  font-size: 4rem;
  /* 필요시 56~72 사이 조절 */
  line-height: 1;
  letter-spacing: .5px;
}

.count-num .unit {
  font-size: 18px;
  opacity: .9;
}

/* ≤1600 */
@media (max-width: 1600px) {
  .main__count .layout__basic {
    padding-top: 160px;
    padding-bottom: 160px;
    gap: 48px;
  }

  .main__count__title h2 {
    font-size: 3.25rem;
  }

  .main__count__title p {
    font-size: 1.25rem;
  }

  .main__count__counting {
    gap: 80px 64px;
  }

  .count-num strong {
    font-size: 3.5rem;
  }
}

/* ≤1440 */
@media (max-width: 1440px) {
  .main__count .layout__basic {
    padding-top: 140px;
    padding-bottom: 140px;
  }

  .main__count__title h2 {
    font-size: 3rem;
  }

  .main__count__title p {
    font-size: 1.1875rem;
  }

  .main__count__counting {
    gap: 72px 56px;
  }

  .count-num strong {
    font-size: 3.25rem;
  }
}

/* ≤1280 */
@media (max-width: 1280px) {
  .main__count .layout__basic {
    padding-top: 120px;
    padding-bottom: 120px;
    flex-direction: column;
  }

  .main__count__title,
  .main__count__counting {
    width: 100%;
  }

  .main__count__title {
    margin-bottom: 48px;
  }

  .main__count__title h2 {
    font-size: 2.75rem;
  }

  .main__count__title p {
    font-size: 1.125rem;
  }

  .main__count__counting {
    gap: 60px 48px;
  }

  .count-num strong {
    font-size: 3rem;
  }
}

/* ≤1024 */
@media (max-width: 1024px) {
  .main__count .layout__basic {
    padding-top: 100px;
    padding-bottom: 100px;
  }

  .main__count__title h2 {
    font-size: 2.5rem;
  }

  .main__count__title p {
    font-size: 1rem;
    line-height: 1.5;
  }

  .main__count__counting {
    gap: 48px 36px;
  }

  .count-head {
    font-size: 1.125rem;
    margin-bottom: 2rem;
  }

  .count-num strong {
    font-size: 2.5rem;
  }

  .count-num .unit {
    font-size: 16px;
  }
}

/* ≤768 */
@media (max-width: 768px) {
  .main__count .layout__basic {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .main__count__title h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
  }

  .main__count__title p {
    font-size: 0.9375rem;
  }

  .main__count__title .btn__circle {
    width: 52px;
    height: 52px;
  }

  .main__count__title .btn__circle .ico {
    width: 22px;
  }

  .main__count__counting {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .count-head {
    font-size: 1rem;
    margin-bottom: 1.5rem;
  }

  .count-num strong {
    font-size: 2.25rem;
  }

  .count-num .unit {
    font-size: 15px;
  }
}

/* ≤390 */
@media (max-width: 390px) {
  .main__count .layout__basic {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .main__count__title h2 {
    font-size: 1.75rem;
  }

  .main__count__title p {
    font-size: 0.875rem;
  }

  .main__count__title .btn__circle {
    width: 48px;
    height: 48px;
  }

  .main__count__title .btn__circle .ico {
    width: 20px;
  }

  .main__count__counting {
    gap: 28px;
  }

  .count-num strong {
    font-size: 2rem;
  }

  .count-num .unit {
    font-size: 14px;
  }
}

/* ==================================================
      main__about (어바웃 섹션)
      설명: 영상 재생
================================================== */

.main__about {
  overflow: hidden;
  color: #fff;
}

.main__about .bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.main__about::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom,
      rgba(0, 24, 74, 0.60) 63.68%,
      rgba(3, 28, 77, 0.5093) 68.39%,
      rgba(11, 38, 85, 0.4290) 72.56%,
      rgba(26, 56, 99, 0.3525) 76.53%,
      rgba(46, 82, 119, 0.2784) 80.37%,
      rgba(72, 115, 145, 0.2060) 84.13%,
      rgba(105, 155, 177, 0.1349) 87.82%,
      rgba(142, 202, 214, 0.0662) 91.38%,
      rgba(184, 255, 255, 0.00) 94.82%);
  mix-blend-mode: multiply;
}

.main__about .layout__basic {
  position: relative;
  z-index: 1;
  padding-top: 300px;
  padding-bottom: 300px;
  text-align: center;
}

.main__about__title div {
  font-family: "Roboto", sans-serif;
  margin-bottom: 1rem;
}

.main__about__title h2 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.main__about__title p {
  font-size: 1.375rem;
  margin-bottom: 3rem;
}

.btn__play {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  z-index: 2;
  background: rgba(255, 255, 255, .5);
}

.btn__play::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin: 0 auto;
  border-left: 16px solid #fff;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  transform: translateX(3px);
}

.btn__play.is-playing::before {
  content: "";
  width: 18px;
  height: 18px;
  background:
    linear-gradient(to right, #fff 0 40%, transparent 40% 60%, #fff 60% 100%);
  border: none;
  transform: none;
}

/* ==== Responsive for .main__about ==== */

/* ≤1600px */
@media (max-width: 1600px) {
  .main__about .layout__basic {
    padding-top: 240px;
    padding-bottom: 240px;
  }

  .main__about__title h2 {
    font-size: 2.75rem;
  }

  .main__about__title p {
    font-size: 1.25rem;
  }
}

/* ≤1440px */
@media (max-width: 1440px) {
  .main__about .layout__basic {
    padding-top: 220px;
    padding-bottom: 220px;
  }

  .main__about__title h2 {
    font-size: 2.5rem;
  }

  .main__about__title p {
    font-size: 1.15rem;
  }

  .btn__play {
    width: 72px;
    height: 72px;
  }
}

/* ≤1280px */
@media (max-width: 1280px) {
  .main__about .layout__basic {
    padding-top: 200px;
    padding-bottom: 200px;
  }

  .main__about__title h2 {
    font-size: 2.25rem;
  }

  .main__about__title p {
    font-size: 1.1rem;
  }

  .btn__play {
    width: 68px;
    height: 68px;
  }
}

/* ≤1024px */
@media (max-width: 1024px) {
  .main__about .layout__basic {
    padding-top: 160px;
    padding-bottom: 160px;
  }

  .main__about__title h2 {
    font-size: 2rem;
  }

  .main__about__title p {
    font-size: 1rem;
    margin-bottom: 2rem;
  }

  .btn__play {
    width: 64px;
    height: 64px;
  }
}

/* ≤768px (태블릿) */
@media (max-width: 768px) {
  .main__about .layout__basic {
    padding-top: 120px;
    padding-bottom: 120px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .main__about__title h2 {
    font-size: 1.75rem;
    line-height: 1.3;
  }

  .main__about__title p {
    font-size: .95rem;
    margin-bottom: 1.5rem;
  }

  .btn__play {
    width: 56px;
    height: 56px;
  }
}

/* ≤390px (모바일) */
@media (max-width: 390px) {
  .main__about .layout__basic {
    padding-top: 90px;
    padding-bottom: 90px;
  }

  .main__about__title h2 {
    font-size: 1.5rem;
  }

  .main__about__title p {
    font-size: .875rem;
    margin-bottom: 1rem;
  }

  .btn__play {
    width: 48px;
    height: 48px;
  }
}

/* ==================================================
      main__case (케이스 섹션)
      설명: 영상
================================================== */

.main__case {
  background: url(../resource/main/case__bg.png);
  color: #fff;
}

.main__case .layout__basic {
  padding-top: 100px;
  padding-bottom: 100px;
}

.main__case__title {
  text-align: center;
}

.main__case__title h2 {
  font-family: "Roboto", sans-serif;
  font-style: italic;
  font-size: 3rem;
  margin-bottom: 1rem;
}

.main__case__title p {
  font-size: 1.375rem;
}

.case__tabs {
  display: flex;
  justify-content: center;
  gap: 28px;
  padding: 50px 0;
}

.case__tabs .tab {
  position: relative;
  padding: 8px 6px;
  color: rgba(255, 255, 255, 0.5);
  background: none;
  border: 0;
  font-size: 1rem;
  letter-spacing: .04em;
  cursor: pointer;
  white-space: nowrap;
}

.case__tabs .tab.is-active {
  color: #fff;
  font-weight: 600;
}

.case__tabs .tab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: #fff;
}

/* 비디오 박스 */
.main__case__video .case__video-wrap {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 16/9;
  /* 16:9 */
  box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}

.case__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  transition: opacity .35s;
}

.case__video.is-fade {
  opacity: 0;
}

/* 오버레이 */
.case__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .15) 55%, rgba(0, 0, 0, 0) 70%),
    linear-gradient(to bottom, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, .12) 100%);
}

/* 캡션 */
.case__caption {
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 2;
  color: #fff;
}

.case__caption small {
  display: block;
  opacity: .85;
  margin-bottom: 6px;
}

.case__caption h3 {
  margin: 0 0 8px;
  font-size: 24px;
}

.case__caption p {
  margin: 0;
  font-size: 14px;
  opacity: .95;
}

/* 중앙 플레이 버튼 */
.case__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  z-index: 2;
  background: rgba(255, 255, 255, .5);
}

.case__play::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin: 0 auto;
  border-left: 16px solid #fff;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  transform: translateX(3px);
}

.case__play.is-playing::before {
  content: "";
  width: 18px;
  height: 18px;
  background:
    linear-gradient(to right, #fff 0 40%, transparent 40% 60%, #fff 60% 100%);
  border: none;
  transform: none;
}

/* ≤1600px */
@media (max-width: 1600px) {
  .main__case .layout__basic {
    padding-top: 90px;
    padding-bottom: 90px;
  }

  .main__case__title h2 {
    font-size: 2.75rem;
  }

  .main__case__title p {
    font-size: 1.25rem;
  }
}

/* ≤1440px */
@media (max-width: 1440px) {
  .main__case .layout__basic {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .main__case__title h2 {
    font-size: 2.5rem;
  }

  .main__case__title p {
    font-size: 1.15rem;
  }

  .case__caption h3 {
    font-size: 22px;
  }
}

/* ≤1280px */
@media (max-width: 1280px) {
  .main__case .layout__basic {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .main__case__title h2 {
    font-size: 2.25rem;
  }

  .main__case__title p {
    font-size: 1.1rem;
  }

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

  .case__caption p {
    font-size: 13px;
  }
}

/* ≤1024px */
@media (max-width: 1024px) {
  .main__case .layout__basic {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .main__case__title h2 {
    font-size: 2rem;
  }

  .main__case__title p {
    font-size: 1rem;
  }

  .case__tabs {
    gap: 20px;
    padding: 30px 0;
  }

  .case__caption h3 {
    font-size: 18px;
  }

  .case__caption p {
    font-size: 12px;
  }

  .case__play {
    width: 64px;
    height: 64px;
  }
}

/* ≤768px (태블릿) */
@media (max-width: 768px) {
  .main__case .layout__basic {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .main__case__title h2 {
    font-size: 1.75rem;
  }

  .main__case__title p {
    font-size: .95rem;
  }

  .case__tabs {
    gap: 16px;
    font-size: .9rem;
  }

  .case__caption h3 {
    font-size: 16px;
  }

  .case__caption p {
    font-size: 11px;
  }

  .case__play {
    width: 56px;
    height: 56px;
  }
}

/* ≤390px (모바일) */
@media (max-width: 390px) {
  .main__case .layout__basic {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .main__case__title h2 {
    font-size: 1.5rem;
  }

  .main__case__title p {
    font-size: .875rem;
  }

  .case__tabs {
    gap: 12px;
    padding: 20px 0;
    font-size: .85rem;
  }

  .case__caption h3 {
    font-size: 15px;
  }

  .case__caption p {
    font-size: 10px;
  }

  .case__play {
    width: 48px;
    height: 48px;
  }
}

/* ≤1600 */
@media (max-width: 1600px) {

  /* 데스크톱 유지: 필요시 간격만 살짝 조절 */
  .case__tabs {
    gap: 24px;
  }
}

/* ≤1440 */
@media (max-width: 1440px) {
  .case__tabs {
    gap: 22px;
  }
}

/* ≤1280 */
@media (max-width: 1280px) {
  .case__tabs {
    gap: 20px;
  }
}

/* ≤1024 : 여기서부터 2×2 카드형 */
@media (max-width: 1024px) {
  .case__tabs {
    display: grid;
    /* flex → grid 전환 */
    grid-template-columns: repeat(2, 1fr);
    /* 2열 고정 */
    gap: 16px;
    padding: 32px 0;
    max-width: 600px;
    /* 가운데 정렬용 */
    margin: 0 auto;
  }

  .case__tabs .tab {
    padding: 14px 12px;
    /* 버튼처럼 */
    white-space: normal;
    /* 줄바꿈 허용 */
    text-align: center;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .8);
  }

  .case__tabs .tab.is-active {
    background: #163cc7;
    border-color: transparent;
    color: #fff;
    font-weight: 600;
  }

  /* 언더라인은 카드형에선 숨김 */
  .case__tabs .tab.is-active::after {
    display: none;
  }
}

/* ≤768 */
@media (max-width: 768px) {
  .case__tabs {
    gap: 12px;
    padding: 28px 0;
    max-width: 520px;
  }

  .case__tabs .tab {
    padding: 12px 10px;
    font-size: 0.9375rem;
  }
}

/* ≤390 (소형 모바일도 2열 유지, 간격만 축소) */
@media (max-width: 390px) {
  .case__tabs {
    gap: 10px;
    max-width: 100%;
    padding: 24px 0;
  }

  .case__tabs .tab {
    padding: 10px 8px;
    font-size: 0.875rem;
    border-radius: 10px;
  }
}

/* ==================================================
      main__pf (포트폴리오 섹션)
      설명: 슬라이드
================================================== */

.main__pf {
  background: #fff;
  padding-top: 100px;
}

.main__pf__title div {
  display: flex;
  justify-content: space-between;
}

.main__pf__title p {
  font-family: "Roboto", sans-serif;
  margin-bottom: 1rem;
  color: #10258e;
}

.main__pf__title h2 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.main__pf__title .btn__more {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  color: #10258e;
}

.main__pf__title .btn__circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.main__pf__title .btn__circle .ico {
  width: 18px;
  height: auto;
  display: block;
  color: #10258e;
}

.main__pf__title .btn__more:hover .btn__circle {
  border-color: #10258e;
  transform: translateX(4px);
}

.main__pf__title .btn__text {
  letter-spacing: .05em;
}

.main__pf__slide {
  padding: 50px 0 100px;
}

/* 카드 */
.pf-card {
  display: block;
}

.pf-thumb {
  position: relative;
  border-radius: 34px;
  /* 이미지 라운드 처리 */
  overflow: hidden;
}

.pf-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform .45s ease;
  will-change: transform;
}

/* 오버레이(기본 숨김) */
.pf-overlay {
  padding: 2rem 1.5rem;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f2f2f2;
  background-image: url('/resource/main/pf__bg__logo.png');
  background-repeat: no-repeat;
  background-position: right 1rem bottom 1rem;
  background-size: 80px auto;
  transform: translateY(16px);
  opacity: 0;
  transition: transform .35s ease, opacity .35s ease, background .35s ease;
}

.pf-cat {
  display: inline-block;
  font-size: 1.125rem;
  font-weight: 800;
  color: #10258e;
  margin-bottom: 1rem;
}

.pf-title {
  display: block;
  font-size: 1.375rem;
  font-weight: 800;
  word-break: keep-all;
}

/* 호버 효과: 확대 + 오버레이 등장 */
.pf-card:hover .pf-thumb img,
.pf-card:focus-visible .pf-thumb img {
  transform: scale(1.06);
}

.pf-card:hover .pf-overlay,
.pf-card:focus-visible .pf-overlay {
  transform: translateY(0);
  opacity: 1;
}

.pfSwiper .swiper-slide-active .pf-overlay {
  transform: translateY(0);
  opacity: 1;
}

/* 페이지네이션 */
.pfSwiper .swiper-pagination {
  position: static !important;
  /* ← 핵심 */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 100px;
  padding-top: 50px;
}

/* 각 칸(불릿) — 동그라미 기본값 덮어쓰기 */
.pfSwiper .swiper-pagination-bullet {
  display: block;
  /* inline-block → block */
  flex: 1 1 0;
  /* 균등 분할 */
  /* 너무 길어지지 않게 제한(선택) */
  height: 4px;
  /* 두께 */
  margin: 0 !important;
  /* Swiper 기본 margin 제거 */
  border-radius: 0;
  background: #cfd4e6;
  opacity: 1;
  transition: background .25s ease;
}

/* 활성 칸 */
.pfSwiper .swiper-pagination-bullet-active {
  background: #2351ff;
}

/* ≤1600 */
@media (max-width:1600px) {
  .main__pf {
    padding-top: 90px;
  }

  .main__pf__title h2 {
    font-size: 2.75rem;
  }

  .main__pf__slide {
    padding: 44px 0 90px;
  }

  .pf-thumb {
    border-radius: 30px;
  }

  .pf-overlay {
    padding: 1.75rem 1.5rem;
    background-size: 72px auto;
  }

  .pf-title {
    font-size: 1.325rem;
  }

  .pfSwiper .swiper-pagination {
    padding: 0 80px;
    padding-top: 46px;
  }
}

/* ≤1440 */
@media (max-width:1440px) {
  .main__pf__title div {
    gap: 24px;
  }

  .main__pf__title h2 {
    font-size: 2.5rem;
  }

  .main__pf__title .btn__circle {
    width: 44px;
    height: 44px;
  }

  .main__pf__slide {
    padding: 40px 0 84px;
  }

  .pf-overlay {
    transform: translateY(12px);
    background-position: right .9rem bottom .9rem;
    background-size: 68px auto;
  }

  .pf-cat {
    font-size: 1.05rem;
    margin-bottom: .85rem;
  }

  .pf-title {
    font-size: 1.3rem;
  }

  .pfSwiper .swiper-pagination {
    padding: 0 64px;
    padding-top: 42px;
  }

  .pfSwiper .swiper-pagination-bullet {
    height: 3.5px;
  }
}

/* ≤1280 */
@media (max-width:1280px) {
  .main__pf {
    padding-top: 80px;
  }

  .main__pf__title h2 {
    font-size: 2.25rem;
  }

  .main__pf__title .btn__text {
    font-size: 13px;
  }

  .pf-thumb {
    border-radius: 26px;
  }

  .pf-overlay {
    padding: 1.5rem 1.25rem;
    background-size: 60px auto;
  }

  .pf-cat {
    font-size: 1rem;
  }

  .pf-title {
    font-size: 1.2rem;
  }

  .pfSwiper .swiper-pagination {
    padding: 0 48px;
    padding-top: 38px;
  }
}

/* ≤1024 (태블릿) */
@media (max-width:1024px) {
  .main__pf__title div {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .main__pf__title h2 {
    font-size: 2rem;
    margin-bottom: .75rem;
  }

  .main__pf__title .btn__more {
    font-size: 13px;
  }

  .main__pf__title .btn__circle {
    width: 42px;
    height: 42px;
  }

  .main__pf__slide {
    padding: 36px 0 72px;
  }

  .pf-thumb {
    border-radius: 22px;
  }

  .pf-overlay {
    padding: 1.25rem 1rem;
    background-size: 52px auto;
  }

  .pf-cat {
    font-size: .95rem;
    margin-bottom: .75rem;
  }

  .pf-title {
    font-size: 1.15rem;
  }

  .pfSwiper .swiper-pagination {
    padding: 0 32px;
    padding-top: 32px;
  }
}

/* ≤768 (모바일) */
@media (max-width:768px) {
  .main__pf {
    padding-top: 64px;
  }

  .main__pf__title p {
    margin-bottom: .5rem;
  }

  .main__pf__title h2 {
    font-size: 1.75rem;
    line-height: 1.3;
  }

  .main__pf__slide {
    padding: 28px 0 60px;
  }

  .pf-thumb {
    border-radius: 18px;
  }

  .pf-overlay {
    padding: 1rem .9rem;
    transform: translateY(8px);
    background-size: 46px auto;
    background-position: right .75rem bottom .75rem;
  }

  .pf-cat {
    font-size: .9rem;
    margin-bottom: .6rem;
  }

  .pf-title {
    font-size: 1.05rem;
  }

  .pfSwiper .swiper-pagination {
    padding: 0 20px;
    padding-top: 26px;
  }

  .pfSwiper .swiper-pagination-bullet {
    height: 3px;
  }
}

/* ≤390 (소형 모바일) */
@media (max-width:390px) {
  .main__pf {
    padding-top: 56px;
  }

  .main__pf__title h2 {
    font-size: 1.6rem;
  }

  .main__pf__title .btn__circle {
    width: 40px;
    height: 40px;
  }

  .main__pf__slide {
    padding: 24px 0 52px;
  }

  .pf-thumb {
    border-radius: 16px;
  }

  .pf-overlay {
    padding: .85rem .75rem;
    transform: translateY(6px);
    background-size: 40px auto;
  }

  .pf-cat {
    font-size: .875rem;
    margin-bottom: .5rem;
  }

  .pf-title {
    font-size: 1rem;
  }

  .pfSwiper .swiper-pagination {
    padding: 0 14px;
    padding-top: 22px;
  }
}

/* ==================================================
      main__notice (공지 섹션)
      설명: 푸터 위쪽 공지/링크 블록 스타일
================================================== */

.main__notice {
  background: #10258e;
  color: #ffffff;
}

.main__notice .layout__basic {
  padding-top: 100px;
  padding-bottom: 100px;
  display: flex;
  justify-content: space-between;
}

.main__notice .layout__basic > div {
  width: 50%;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

.main__notice__left {
  padding: 2rem;
  border-right: 1px solid #fff;
  position: relative;
}

.main__notice__left::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../resource/main/notice__bg.png) no-repeat right bottom / auto;
  opacity: .5;
  pointer-events: none;
  z-index: 0;
}

.main__notice__left h2 {
  font-family: "Roboto", sans-serif;
  font-size: 4.5rem;
}

.main__notice__left .btn__view {
  font-size: 1rem;
}

.main__notice__left div {
  margin-top: 100px;
  font-size: 1.5rem;
  font-weight: 800;
}

.main__notice__left p {
  margin-top: 2rem;
  font-size: 1.125rem;
}

.main__notice__left .btn__more {
  position: absolute;
  right: 32px;
  bottom: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #fff;
  color: #10258e;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
  transition: transform .3s ease;
}

.main__notice__left .btn__more .ico {
  width: 28px;
  height: auto;
  transform: rotate(-45deg);
  /* ↗ 방향으로 */
}

.main__notice__left .btn__more:hover {
  transform: scale(1.05);
}

.main__notice__right {
  padding: 0 2rem;
  display: flex;
  flex-direction: column;
}

.notice__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 50px 10px;
}

.notice__link + .notice__link {
  border-top: 1px solid #fff;
}

.notice__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--soft);
}

.main__notice__right .notice__link:last-child::after {
  display: none;
}

.notice__link .txt strong {
  font-family: "Roboto", sans-serif;
  font-size: 3rem;
  line-height: 1;
  letter-spacing: .02em;
}

.notice__link .txt span {
  margin-left: 1rem;
}

.notice__link .ico {
  width: 44px;
  height: 44px;
  color: #fff;
  opacity: .9;
}

/* ≤1600 */
@media (max-width:1600px) {
  .main__notice .layout__basic {
    padding-top: 90px;
    padding-bottom: 90px;
  }

  .main__notice__left h2 {
    font-size: 4rem;
  }

  .main__notice__left div {
    margin-top: 84px;
    font-size: 1.4rem;
  }

  .main__notice__left p {
    font-size: 1.05rem;
  }

  .main__notice__left .btn__more {
    width: 72px;
    height: 72px;
    right: 28px;
    bottom: 28px;
  }

  .main__notice__left .btn__more .ico {
    width: 26px;
  }

  .notice__link {
    padding: 44px 10px;
  }

  .notice__link .txt strong {
    font-size: 2.6rem;
  }

  .notice__link .ico {
    width: 40px;
    height: 40px;
  }

  .main__notice__left::after {
    background-size: 42%;
  }
}

/* ≤1440 */
@media (max-width:1440px) {
  .main__notice .layout__basic {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .main__notice__left {
    padding: 1.75rem;
  }

  .main__notice__left h2 {
    font-size: 3.5rem;
  }

  .main__notice__left div {
    margin-top: 72px;
    font-size: 1.3rem;
  }

  .main__notice__left p {
    margin-top: 1.5rem;
    font-size: 1rem;
  }

  .main__notice__left .btn__more {
    width: 68px;
    height: 68px;
  }

  .main__notice__left .btn__more .ico {
    width: 24px;
  }

  .main__notice__right {
    padding: 0 1.75rem;
  }

  .notice__link {
    padding: 40px 8px;
  }

  .notice__link .txt strong {
    font-size: 2.3rem;
  }

  .notice__link .txt span {
    margin-left: .8rem;
  }

  .main__notice__left::after {
    background-size: 38%;
  }
}

/* ≤1280 */
@media (max-width:1280px) {
  .main__notice .layout__basic {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .main__notice__left h2 {
    font-size: 3.1rem;
  }

  .main__notice__left div {
    margin-top: 60px;
    font-size: 1.2rem;
  }

  .main__notice__left p {
    font-size: .975rem;
  }

  .main__notice__left .btn__more {
    width: 62px;
    height: 62px;
    right: 24px;
    bottom: 24px;
  }

  .main__notice__left .btn__more .ico {
    width: 22px;
  }

  .notice__link {
    padding: 34px 6px;
  }

  .notice__link .txt strong {
    font-size: 2.05rem;
  }

  .notice__link .ico {
    width: 36px;
    height: 36px;
  }

  .main__notice__left::after {
    background-size: 34%;
  }
}

/* ≤1024 (태블릿) */
@media (max-width:1024px) {
  .main__notice .layout__basic {
    flex-direction: column;
    gap: 28px;
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .main__notice .layout__basic > div {
    width: 100%;
  }

  .main__notice__left {
    border-right: 0;
    border-bottom: 1px solid #fff;
    padding: 1.5rem;
  }

  .main__notice__left h2 {
    font-size: 2.6rem;
  }

  .main__notice__left div {
    margin-top: 44px;
    font-size: 1.15rem;
  }

  .main__notice__left p {
    margin-top: 1.25rem;
    font-size: .95rem;
  }

  /* 버튼이 너무 겹치지 않도록 살짝 축소 */
  .main__notice__left .btn__more {
    width: 58px;
    height: 58px;
    right: 20px;
    bottom: 20px;
  }

  .main__notice__left .btn__more .ico {
    width: 20px;
  }

  .main__notice__right {
    padding: 0 1.5rem;
  }

  .notice__link {
    padding: 28px 4px;
  }

  .notice__link .txt strong {
    font-size: 1.85rem;
  }

  .notice__link .txt span {
    margin-left: .6rem;
  }

  .notice__link .ico {
    width: 32px;
    height: 32px;
  }

  .main__notice__left::after {
    background-size: 42%;
    opacity: .45;
  }
}

/* ≤768 (모바일) */
@media (max-width:768px) {
  .main__notice .layout__basic {
    padding-top: 52px;
    padding-bottom: 52px;
    gap: 24px;
  }

  .main__notice__left {
    padding: 1.25rem;
  }

  .main__notice__left h2 {
    font-size: 2.2rem;
  }

  .main__notice__left div {
    margin-top: 32px;
    font-size: 1.05rem;
  }

  .main__notice__left p {
    margin-top: 1rem;
    font-size: .9rem;
  }

  .main__notice__left .btn__more {
    width: 54px;
    height: 54px;
    right: 16px;
    bottom: 16px;
  }

  .main__notice__left .btn__more .ico {
    width: 18px;
  }

  .main__notice__right {
    padding: 0 1.25rem;
  }

  .notice__link {
    padding: 22px 0;
  }

  .notice__link .txt strong {
    font-size: 1.6rem;
  }

  .notice__link .ico {
    width: 28px;
    height: 28px;
  }

  .main__notice__left::after {
    background-size: 46%;
    opacity: .4;
  }
}

/* ≤390 (소형 모바일) */
@media (max-width:390px) {
  .main__notice .layout__basic {
    padding-top: 44px;
    padding-bottom: 44px;
    gap: 20px;
  }

  .main__notice__left {
    padding: 1rem;
  }

  .main__notice__left h2 {
    font-size: 1.9rem;
  }

  .main__notice__left div {
    margin-top: 24px;
    font-size: .95rem;
  }

  .main__notice__left p {
    margin-top: .9rem;
    font-size: .85rem;
  }

  .main__notice__left .btn__more {
    width: 50px;
    height: 50px;
    right: 12px;
    bottom: 12px;
  }

  .main__notice__left .btn__more .ico {
    width: 16px;
  }

  .main__notice__right {
    padding: 0 1rem;
  }

  .notice__link {
    padding: 18px 0;
  }

  .notice__link .txt strong {
    font-size: 1.4rem;
  }

  .notice__link .txt span {
    margin-left: .5rem;
  }

  .notice__link .ico {
    width: 24px;
    height: 24px;
  }

  .main__notice__left::after {
    background-size: 54%;
    opacity: .35;
  }
}