:root {
  --container: 1050px;
  --space: clamp(16px, 2vw, 24px);
  --gap: clamp(16px, 4vw, 28px);
  --text: #fff;
  --accent: #03C75A;
  --text-black: #000;
  --card-bg: #fff;
  --panel-review-bg: #F2FFF7;
  --panel-payment-bg: #E8F3FF;
  --payment-accent: #3283FD;
  --panel-marketing-bg: #FFF9E7;
  --marketing-accent: #FFB900;
  --updates-bg: #1e1f21;
  --updates-card-bg: #323232;
}

.hero {
  position: relative;
  background: #000 url("/img/connect_hero_bg.png") center/100% 100% no-repeat;
  color: #fff;
  text-align: center;
  /* clamp를 쓰면 반응형으로 크기를 조정합니다. (최소값, 중간값, 최대값)*/
  /*padding: clamp(120px, 20vw, 180px) 16px;*/
  width: 100%;
  height: 1800px;
}

.hero__inner {
  max-width: 920px;
  margin: 150px auto;
}

.hero__brand {
  display: block;
  margin: 0 auto 90px;
  height: 40px;
  width: auto;
}

.hero__device {
  display: block;
  margin: 0 auto 24px;
  width: 700px;
  height: auto;
}

.hero__caption {
  margin: 100px 0;
  font-size: 40px;
  background: linear-gradient(90deg, #727272 0.01%, #8C8C8C 23.54%, #FFF 73.06%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero__title {
  margin: 0 0 100px;
  font-weight: 700;
  line-height: 1.35;
  font-size: 70px;
}

/* 4) 스크롤 화살표 */
.hero__scroll {
  appearance: none;
  border: 0;
  background: transparent;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 106px;
  height: 38px;
  border-radius: 999px;
  opacity: .9;
  cursor: pointer;
  animation: bounce 2s infinite;
}

.hero__scroll:hover {
  opacity: 1;
}

.section {
  padding: 0;
}

.section--dark {
  background: #000;
}

.section--dark--custom {
  background: linear-gradient(270deg, #001A07 0%, #000900 100%);
}

.section .container {
  max-width: var(--container);
  margin: 0 auto;
}

.feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 6vw, 48px);
  text-align: center;
  align-items: center;
  margin-bottom: clamp(80px, 12vw, 140px);
}

.feature__media img {
  width: 90%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.feature__desc {
  color: var(--text);
  font-size: 40px;
  font-weight: 500;
  margin: 0;
  line-height: 1.5;
}

strong {
  color: var(--accent);
  font-weight: 700;
}

.fake-bg {
  background: linear-gradient(180deg, rgba(0, 8, 0, 0) 0%, #000000 100%);
  height: 300px;
}

.section__lead {
  margin: 0 0 150px;
  text-align: center;
  color: #fff;
  line-height: 1.5;
  font-size: 48px;
  font-weight: 500;
}

.panel-tabs {
  display: flex;
  justify-content: center;
  width: 100%;
}

#panel-tab-payment {
  background: var(--panel-review-bg);
}

#panel-tab-marketing {
  background: var(--panel-payment-bg);
}

.tab {
  flex: 1;
  color: #fff;
  font-size: 40px;
  text-align: center;
  text-decoration: none;
  background: #5D635F;
  padding: 2rem 0;
  border-radius: 20px 20px 0 0;
  font-weight: 700;
}

.tab.is-active-review {
  background: var(--panel-review-bg);
  color: var(--accent);
}

.tab.is-active-payment {
  background: var(--panel-payment-bg);
  color: var(--payment-accent);
}


.panel__review {
  background: var(--panel-review-bg);
  padding: 20px 0 100px;
}

.panel__head {
  text-align: center;
  margin: 100px 0 50px;
}

.badge__review {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 30px;
  font-size: 30px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  margin: 40px 0;
}

.panel__title {
  margin: 20px 0;
  color: var(--accent);
  font-size: 50px;
  font-weight: 600;
}

.eyebrow {
  margin: 0 0 60px;
  color: #000;
  line-height: 1.5;
  font-weight: 600;
  font-size: 55px;
}

.panel--payment {
  background: var(--panel-payment-bg);
  padding: 20px 50px 100px;
}

.badge--payment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 30px;
  font-size: 30px;
  border-radius: 999px;
  background: var(--payment-accent);
  color: #fff;
  font-weight: 800;
  margin: 40px 0;
}

.panel__title--payment {
  margin: 20px 0;
  color: var(--payment-accent);
  font-size: 50px;
  font-weight: 600;
}

/* 카드 리스트 (재사용) */
/* 리뷰 자동화 시작 카드들 시작 */
.cards {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80%;
  margin: auto;
  gap: 40px;
}

.card {
  background: var(--card-bg);
  border-radius: 1em;
  width: 100%;
  margin: 0 auto;
  box-shadow: 0px 0px 0.2222em 0px #03C75A33;
  overflow: hidden;
}

.card .connect-review-1 {
  margin: 40px 0 0 auto;
  width: 87.1429%;
}

.card .connect-review-1-img {
  width: 100%;
}

.card .connect-review-2 {
  margin: 0 0 0 auto;
  width: 89.7619%;
}

.card .connect-review-2-img {
  width: 100%;
}

.card .connect-review-3 {
  margin: 50px 0 0 auto;
  width: 87.6190%;
}

.card .connect-review-3-img {
  width: 100%;
}

.card .written-review-data {
  margin: 50px auto 100px;
  width: 85.3571%;
}

.card .written-review-data-img {
  width: 100%;
}

/* 리뷰 자동화 시작 카드들 시작 */

.pay-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}


/* 공통 카드 */
.pay-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0px 0px 10.19px 0px #3283FD33;
  overflow: hidden;
}

/* ───── 타일 카드 3개 ───── */
.pay-card--tile {
  text-align: center;
  padding: 14px 10px 12px;
  border: 1px solid rgba(0, 0, 0, .06);
}

.pay-card__thumb {
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 10px;
}

.pay-card__thumb img {
  width: 100%;
  height: auto;
  display: block;
}

.pay-card__caption {
  margin: 10% 0;
  font-size: 30px;
  font-weight: 600;
  color: #000;
  line-height: 1;
}

.pay-card__caption .sub {
  display: inline-block;
  font-weight: 500;
  color: #000;
  font-size: 25px;
}

/* 그리드 스팬(전체 폭 차지) */
.pay-span-3 {
  grid-column: 1 / -1;
}

.pay-card--feature {
  text-align: center;
  border: 1px solid rgba(0, 0, 0, .06);
  background: #fff;
}

.pay-feature__title {
  margin: 5% 0;
  font-size: 45px;
  font-weight: 600;
  color: #000;
  line-height: 1.6;
}

.pay-feature__title strong {
  font-size: 55px;
  color: #000;
  font-weight: 600;
}

.pay-feature__media img {
  display: block;
  width: 80%;
  height: auto;
  border-radius: 12px;
  margin: 0 auto;
}

/* ───── 얇은 배너 카드 ───── */
.pay-card--banner {
  margin-top: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #1a1a1a;
  color: #fff;
  border-radius: 12px;
  padding: 5%;
  box-shadow: none;
}

.pay-banner__text {
  margin: 0;
  font-size: 40px;
  line-height: 1.45;
  color: #fff;
  font-weight: 500;
}

.pay-banner__text .title {
  font-size: 45px;
  font-weight: 800;
}

.pay-banner__text .strong {
  color: #FFFFFF;
  font-weight: 700;
}

.pay-banner__icon {
  width: 25%;
  display: block;
}

.tab.is-active-marketing {
  background: var(--panel-marketing-bg);
  color: var(--marketing-accent);
}

.panel--marketing {
  background: var(--panel-marketing-bg);
  padding: 24px 0 80px;
}


.badge--marketing {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 30px;
  font-size: 30px;
  border-radius: 999px;
  background: var(--marketing-accent);
  color: #fff;
  font-weight: 800;
  margin: 40px 0;
}

.panel__title--marketing {
  margin: 20px 0;
  color: var(--marketing-accent);
  font-size: 50px;
  font-weight: 600;
}

.mkt-cards {
  display: flex;
  flex-direction: column;
}

.mkt-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0px 0px 10.19px 0px #FFB90033;
  border: 1px solid rgba(0, 0, 0, .06);
  width: 80%;
  margin: 30px auto;
}

.mkt-card__media img {
  display: block;
  width: 90%;
  margin: 0 auto;
  height: auto;
  border-radius: 12px;
}

.mkt-card__text {
  margin: 8%;
  color: #000;
  font-size: 45px;
  line-height: 1.5;
  font-weight: 600;
}

.mkt-card__caption {
  margin: 7%;
  text-align: center;
  color: #9FA8AA;
  font-size: 30px;
  line-height: 1.5;
  font-weight: 500;
}

/* 업데이트 예정 시작 */
.updates__container {
  background: var(--updates-bg);
  color: #fff;
  padding: 150px 5%;
}

.updates__head {
  text-align: center;
  margin-bottom: 24px;
}

.updates__title {
  margin-bottom: 10%;
  font-weight: 500;
  line-height: 1.35;
  font-size: 50px;
  text-wrap: balance;
}

.updates-card-container {
  display: grid;
  /* flex-direction: row; */
  /* justify-content: center; */
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.updates-card-wrapper {
  /* display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: space-between; */
  display: grid;
  grid-template-columns: 1fr;
  justify-items: end;
  /* align-content: space-between; */
  width: 100%;
  row-gap: 12px;
}

.updates-card {
  width: 100%;
  border-radius: 24px;
  background: #323232;
  box-shadow: 0 0 6px 0 rgba(255, 185, 0, 0.20);
  padding: 40px 0 0 0;
}

.updates-card dt {
  color: #FFFFFF;
  font-size: 51px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.04em;
  padding: 0 30px 0 30px;
  margin: auto auto 12px auto;
}

.updates-card dt span {
  font-size: 35px;
}

.updates-card dd:nth-of-type(1) {
  color: #FFFFFF;
  font-size: 35px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.04em;
  padding: 0 30px 0 30px;
}

.updates-card dd:nth-of-type(2) {
  margin: auto;
}

.updates-card-img img {
  display: block;
  max-width: 100%;
  margin: auto;
  object-fit: contain;
}

.schedule-place-coupon img {
  width: 358px;
  margin: 17px auto 27px auto;
}

.schedule-reservation img {
  width: 324px;
  margin: 110px 0 60px auto;
}

.schedule-waiting img {
  width: 233px;
  margin: 90px 20px 60px auto;
}

.schedule-minikiosk img {
  width: 363px;
  margin: 28px auto 35px auto;
}

.schedule-membership_benefit img {
  width: 240px;
  margin: 78px 41px 54px auto;
}

.schedule-update_stamp img {
  width: 241px;
  margin: 30px 0px 0 auto;
}

.schedule-check_idcard img {
  width: 222px;
  margin: 32px 34px 50px auto;
}

/* 업데이트 예정 끝 */

.voices {
  background: #F3F4F6;
  padding: 150px 50px;
}

.voices__title {
  text-align: center;
  font-size: 60px;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 100px;
  color: #000;
}

.voices__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.voice {
  display: flex;
  align-items: flex-start;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 14px;
  padding: 30px;
  box-shadow: 0px 0px 5.26px 0px #BDBDBD;
  gap: 30px;
}

.voice__img {
  width: 25%;
  margin: auto 0;
}

.voice__img img {
  width: 100%;
  object-fit: cover;
  display: block;
  margin: auto 0;
}

.voice__text {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-top: 20px;
  line-height: 1.55;
  color: #000;
  font-size: 35px;
}

.voice__text strong {
  color: var(--accent);
  font-weight: 700;
}

.voice__meta {
  margin-top: 30px;
  font-size: 25px;
  color: #848484;
  text-align: right;
}

/* 진행중인 이벤트 시작 */
.event-container {
  background-color: #FFFFFF;
  padding: 130px 0 100px 0;
}

.event-title {
  margin: auto auto 72px auto;
}

.event-title h2 {
  text-align: center;
  font-size: 60px;
  font-weight: 500;
  line-height: 1.4;
}

.hanabank-box {
  width: 890px;
  margin: auto;
  margin-bottom: 126px;
  border-radius: 20px;
  overflow: hidden;
}

/* .event-content {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: center;
column-gap: 40px;
padding: 70px 0 90px 0;
background: linear-gradient(100deg, #E4FFF4 0%, #EEF6FF 100%);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.50);
}

.event-content-left {}

.event-content-left img {
width: 342px;
object-fit: contain;
}

.event-content-left div {
margin-top: 34px;
}

.event-content-left h2 {
color: #313C4F;
font-size: 63px;
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.02em;
}

.event-content-left p {
color: #647286;
font-size: 40px;
font-weight: 500;
line-height: 1.4;
letter-spacing: -0.02em;
}

.event-content-left p span {
font-weight: 700;
}

.event-content-right {}

.event-content-right img {
width: 392px;
object-fit: contain;
} */

/* 진행중인 이벤트 끝 */

.only-pc {
  display: block;
}

.only-mobile {
  display: none;
}

@keyframes bounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(15px);
  }
}

@media (max-width: 768px) {
  :root {
    letter-spacing: -0.5px;
  }

  .hero {
    padding: 15% 16px;
    height: 100vh;
  }

  .hero__brand {
    width: 50%;
    height: auto;
    margin: 10% auto;
  }

  .hero__title {
    font-size: 1.8rem;
    margin: 5% 0 5%;
    font-weight: 600;
  }

  .hero__device {
    width: 80%;
  }

  .hero__inner {
    margin: 0;
  }

  .hero__caption {
    font-size: 20px;
    margin: 5% 0;
  }

  .hero__scroll {
    width: 56px;
  }

  .feature__desc {
    font-size: 25px;
  }

  .feature__media {
    margin: 15px;
  }

  .feature__media img {
    width: 100%;
  }

  .fake-bg {
    height: 100px;
  }

  .section__lead {
    margin: 10% auto;
    font-size: 25px;
  }

  .tab {
    font-size: 20px;
    padding: 15px 0;
  }

  .badge__review {
    font-size: 20px;
    margin: 5% 0;
    padding: 5px 15px;
  }

  .panel__title {
    font-size: 25px;
  }

  .panel__head {
    margin: 50px 0 25px;
  }

  .eyebrow {
    font-size: 25px;
    margin: 0
  }

  /* 리뷰 자동화 시작 카드들 시작 */
  .cards {
    gap: min(3.75vw, 15px);
  }

  .card {
  }

  .card .connect-review-1 {
    margin: min(3.75vw, 15px) 0 0 auto;
  }

  .card .connect-review-1-img {}

  .card .connect-review-2 {
    margin: 0 0 0 auto;
  }

  .card .connect-review-2-img {}

  .card .connect-review-3 {
    margin: min(5vw, 20px) 0 0 auto;
  }

  .card .connect-review-3-img {}

  .card .written-review-data {
    margin: min(5vw, 20px) auto min(10vw, 40px);
  }

  .card .written-review-data-img {}

  /* 리뷰 자동화 시작 카드들 시작 */

  .panel--payment {
    /* padding: 20px 5% 100px; */
    padding: 20px 5% 70px;
  }

  .badge--payment {
    font-size: 20px;
    margin: 5% 0;
    padding: 5px 15px;
  }

  .pay-cards {
    gap: 5px;
  }

  .pay-card--tile {
    padding: 0;
  }

  .pay-card__thumb {
    padding: 0;
  }

  .pay-card__caption {
    font-size: 15px;
    font-weight: 600;
  }

  .pay-card__caption .sub {
    font-size: 10px;
  }

  .pay-feature__title {
    font-size: 20px;
  }

  .pay-feature__title strong {
    font-size: 30px;
  }

  .pay-card--banner {
    margin-top: 20px;
  }

  .pay-banner__text {
    font-size: 15px;
  }

  .pay-banner__text .title {
    font-size: 17px;
  }

  .badge--marketing {
    font-size: 20px;
    margin: 5% 0;
    padding: 5px 15px;
  }

  .mkt-card {
    margin: 10px auto;
  }

  .mkt-card__text {
    font-size: 20px;
  }

  .mkt-card__caption {
    font-size: 12px;
  }

  /* 업데이트 예정 시작 */
  .updates__container {
    padding: min(23.75vw, 95px) 5%;
  }

  .updates__head {
    margin-bottom: min(6vw, 24px);
  }

  .updates__title {
    line-height: 1.35;
    font-size: min(6.25vw, 25px);
  }

  .updates-card-container {
    gap: min(1.75vw, 7px);
  }

  .updates-card-wrapper {
    /* display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: space-between; */
    row-gap: min(1.5vw, 6px);
  }

  .updates-card {
    border-radius: min(2.25vw, 9px);
    box-shadow: 0 0 2min(0.5vw, 2px)px 0 rgba(255, 185, 0, 0.20);
    padding: min(5vw, 20px) 0 0 0;
  }

  .updates-card dt {
    font-size: min(5vw, 20px);
    padding: 0 min(3.75vw, 15px) 0 min(3.75vw, 15px);
    margin: auto auto min(1.25vw, 5px) auto;
  }

  .updates-card dt span {
    font-size: min(3.25vw, 13px);
  }

  .updates-card dd:nth-of-type(1) {
    font-size: min(3.5vw, 14px);
    padding: 0 min(3.75vw, 15px) 0 min(3.75vw, 15px);
  }

  .schedule-place-coupon img {
    width: min(34vw, 136px);
    margin: min(3vw, 12px) auto min(3vw, 12px) auto;
  }

  .schedule-reservation img {
    width: min(30.5vw, 122px);
    margin: min(11vw, 44px) 0 min(5.5vw, 22px) auto;
  }

  .schedule-waiting img {
    width: min(22vw, 88px);
    margin: min(8.75vw, 35px) min(5.75vw, 23px) min(2.25vw, 9px) auto;
  }

  .schedule-minikiosk img {
    width: min(34.5vw, 138px);
    margin: min(4.5vw, 18px) auto min(2.25vw, 9px) auto;
  }

  .schedule-membership_benefit img {
    width: min(22.5vw, 90px);
    margin: min(6.75vw, 27px) min(3.75vw, 15px) min(5vw, 20px) auto;
  }

  .schedule-update_stamp img {
    width: min(22.75vw, 91px);
    margin: min(3.25vw, 13px) 0px min(1.75vw, 7px) auto;
  }

  .schedule-check_idcard img {
    width: min(21vw, 84px);
    margin: min(2.75vw, 11px) min(3.25vw, 13px) min(4.5vw, 18px) auto;
  }

  /* 업데이트 예정 끝 */


  .voices {
    padding: 20% 5%;
  }

  .voices__title {
    font-size: 25px;
    margin-bottom: 20%;
  }

  .voice {
    gap: 10px;
    padding: 15px;
  }

  .voice__text {
    font-size: 13px;
  }

  .voice__meta {
    font-size: 10px;
    margin-top: 10px;
  }

  .voices__list {
    gap: 20px;
  }

  /* 진행중인 이벤트 시작 */
  .event-container {
    background-color: #FFFFFF;
    padding: min(15vw, 60px) 0 min(19vw, 76px) 0;
  }

  .event-title {
    margin: auto auto min(6.25vw, 25px) auto;
  }

  .event-title h2 {
    font-size: min(6.25vw, 25px);
  }

  .event-content {
    column-gap: min(3.75vw, 15px);
    padding: min(6.75vw, 27px) 0 min(9.25vw, 37px) 0;
  }

  .event-content-left {}

  .event-content-left img {
    width: min(32.5vw, 130px);
  }

  .event-content-left div {
    margin-top: min(3.25vw, 13px);
  }

  .event-content-left h2 {
    color: #313C4F;
    font-size: min(6vw, 24px);
  }

  .event-content-left p {
    color: #647286;
    font-size: min(4vw, 16px);
  }

  .event-content-left p span {}

  .event-content-right {}

  .event-content-right img {
    width: min(37.25vw, 149px);
    object-fit: contain;
  }

  /* 진행중인 이벤트 끝 */
  .only-pc {
    display: none;
  }

  .only-mobile {
    display: block;
  }

  .hanabank-box {
    position: relative;
    width: min(91vw, 364px);
    margin-bottom: 0px;
    border-radius: 8px;
  }

}

.shortterm_main p {
  position: relative;
  width: 100%;
  max-width: 1230px;
  margin: 23% auto 0 auto;
  z-index: 2;
  color: #FFF;
  font-size: 27px;
  font-weight: 400;
  line-height: normal;
}

.shortterm_main p b {
  font-size: 47px;
  font-weight: 700;
  line-height: 130%;
  /* 61.385px */
  letter-spacing: -1.889px;
  display: inline-block;
  margin-top: 20px;
}

.shortterm_mid .box-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 1230px;
  width: 100%;
  margin: 0 auto;
  gap: 25px;
}

.shortterm_mid .box-container .top,
.shortterm_mid .box-container .bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 25px;
}

.shortterm_mid .box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  border-radius: 25px;
  background: #F7FBFF;
  padding: 50px 60px;
  gap: 10px;
}

.shortterm_mid .box p {
  color: #7A7A7A;
  font-size: 20px;
  font-weight: 400;
  line-height: 163%;
  /* 33.556px */
  letter-spacing: -0.412px;
  text-align: left;
}

.shortterm_mid .box p b {
  color: #293448;
  font-size: 30px;
  font-weight: 600;
  line-height: 163%;
  /* 48.9px */
  letter-spacing: -0.3px;
}

.shortterm_mid .box img {
  width: 53px;
}

.shortterm_mid img {
  width: 100%;
}

.shortterm_mid p {
  margin: 0 auto;
  width: 100%;
  max-width: 1230px;
  text-align: center;
}

.shortterm_mid p b {
  position: relative;
  z-index: 2;
  color: #293448;
  font-size: 60px;
  font-weight: 700;
  line-height: 142.111%;
  /* 85.267px */
  letter-spacing: -1.8px;
}

.shortterm_mid.mid_1 p img {
  margin-top: -200px;
}

.shortterm_mid h2 {
  color: #293448;
  text-align: center;
  font-size: 60px;
  font-weight: 700;
  line-height: 142.111%;
  /* 85.267px */
  letter-spacing: -1.8px;
  margin-bottom: 75px;
}

.shortterm_mid h2 .blue {
  color: #008CFF;
  font-weight: 700;
  line-height: 142.111%;
  letter-spacing: -1.8px;
}

#product_container h2 {
  margin: 165px 0 75px 0;
}

.shortterm_bottom .btn_area .bottom_btn {
  padding: 0;
  width: 257px;
  height: 257px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#product_container.shortterm_bottom ul {
  flex-direction: column;
  gap: 10px;
}

.shortterm_bottom .btn_area {
  margin-bottom: 100px;
}

/*.shortterm_bottom img{*/
/*    width: 100%;*/
/*}*/
.shortterm_type {
  background: #F7FBFF;
  display: none;
  flex-direction: column;
  align-items: center;
  padding-bottom: 50px;
}

.shortterm_type.active {
  display: flex;
}

.shortterm_type .text-container {
  max-width: 1230px;
  width: 100%;
}

.shortterm_type b {
  margin: 165px 0 75px 7%;
  color: #293448;
  font-size: 60px;
  font-weight: 700;
  line-height: 142.111%;
  /* 85.267px */
  letter-spacing: -1.8px;
  text-align: left;
  max-width: 843px;
  display: inline-block;
}

.shortterm_type p {
  margin: 0 auto;
  text-align: center;
  position: relative;
  width: 100%;
  max-width: 1230px;
  z-index: 2;
  color: #FFF;
  font-size: 27px;
  font-weight: 400;
  line-height: normal;
}

.shortterm_type p img {
  width: 100%;
}

.shortterm_type p span {
  color: #293448;
  font-size: 30px;
  font-weight: 400;
  line-height: 142.111%;
  /* 42.633px */
  letter-spacing: -0.9px;
  margin: 20px 0 30px 0;
  display: inline-block;
}

.btn_code .btn_contact_new {
  color: #FFF;
  text-align: center;
  font-size: 45px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  width: 712px;
  height: 143px;
  padding: 0;
  border-radius: 85px;
  background: linear-gradient(90deg, #008CFF 0%, #00B8FF 100%);
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25) inset;
  border: none;
}

.shortterm_bottom {
  text-align: center;
  padding-bottom: 200px;
}

.shortterm_bottom p {
  margin: 0 auto;
  width: 100%;
  max-width: 1230px;
  text-align: center;
}

.shortterm_bottom p img {
  width: 100%;
}

.shortterm_bottom p b {
  position: relative;
  z-index: 2;
  color: #293448;
  font-size: 60px;
  font-weight: 700;
  line-height: 142.111%;
  /* 85.267px */
  letter-spacing: -1.8px;
  margin: 165px 0 75px 0;
  display: inline-block;
}

.shortterm_bottom p b.bottom {
  margin-bottom: 100px;
}

.shortterm_contact {
  background: #F7FBFF;
  padding: 100px 0;
}

#section_counsel {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 90%;
  max-width: 825px;
  height: 1031px;
  border-radius: 31px;
  background: #FFF;
  margin: 0 auto;
}

#section_counsel .counsel_text {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #293448;
  text-align: center;
  font-size: 25px;
  font-style: normal;
  font-weight: 500;
  line-height: 142.111%;
  /* 35.528px */
  letter-spacing: -0.75px;
}

#section_counsel .counsel_text h4 {
  text-align: center;
  color: #008CFF;
  font-size: 50px;
  font-style: normal;
  font-weight: 600;
  line-height: 142.111%;
  /* 71.055px */
  letter-spacing: -1.5px;
}

#section_counsel .counsel_form {
  width: 80%;
}

.inquiry-section-div {
  width: 1050px;
  margin: auto;
}


/* 반응형 */
@media screen and (max-width: 768px) {
  #container {
    margin-top: 25px;
  }

  .shortterm_main {
    background-image: url("/img/main_shortterm_mobile.png");
    height: calc(100vh - 106px);
  }

  .shortterm_main p {
    padding: 0 10%;
    font-size: 22px;
    margin-top: 35%;
  }

  .shortterm_main p b {
    font-size: 32px;
  }

  .shortterm_mid {
    padding-top: 60px;
  }

  .shortterm_mid p b {
    font-size: 24px;
  }

  .shortterm_mid.mid_1 p img {
    margin-top: -40px;
  }

  .shortterm_mid h2 {
    font-size: 24px;
    margin-bottom: 35px;
  }

  .shortterm_mid img {
    width: 95%;
  }

  .shortterm_bottom .btn_area {
    flex-direction: row;
    width: 92%;
    gap: 12px;
  }

  .shortterm_bottom .btn_area .bottom_btn {
    min-width: 100px;
    min-height: 100px;
    height: 110px;
  }

  #product_container h4,
  #product_container h2 {
    font-size: 24px;
  }

  #product_container.shortterm_bottom h2 {
    margin-top: 90px;
  }

  .shortterm_bottom .btn_area .bottom_btn li:nth-child(2) {
    padding: 0;
    font-size: 16px;
    text-align: center;
  }

  #product_container.shortterm_bottom ul {
    flex-direction: column;
    gap: 5px;
  }

  #product_container ul li img {
    height: 60px;
  }

  .shortterm_bottom .btn_area {
    margin: 35px auto 30px auto;
  }

  .shortterm_type b {
    margin: 60px 0 22px 0;
    font-size: 24px;
    display: inline-block;
    min-width: 297px;
    width: 100%;
    padding: 0 12%;
  }

  .shortterm_type p img {
    width: 88%;
  }

  .shortterm_type p span {
    font-size: 14px;
  }

  .btn_code .btn_contact_new {
    font-size: 18px;
    width: 75%;
    height: 60px;
  }

  .btn_code {
    margin: 10px auto 25px auto;
  }

  .shortterm_bottom {
    padding-bottom: 65px;
  }

  .shortterm_bottom p b {
    font-size: 24px;
    margin: 65px 0 35px 0;
  }

  .shortterm_bottom p b.bottom {
    margin-bottom: 35px;
  }

  .shortterm_bottom p img {
    width: 92%;
  }

  .shortterm_bottom p img.bottom {
    width: 80%;
  }

  #section_counsel {
    width: 95%;
    height: 750px;
  }

  #section_counsel .counsel_text h4 {
    font-size: 26px;
    font-weight: 700;
  }

  #section_counsel .counsel_text p {
    color: #293448;
    font-style: normal;
    font-weight: 500;
    line-height: 142.111%;
    /* 35.528px */
    letter-spacing: -0.75px;
    font-size: 16px;
    padding: 15px 0 35px 0;
  }

  #section_counsel .counsel_form {
    width: 90%;
  }

  #section_counsel .counsel_form li {
    font-size: 15px;
  }

  #section_counsel .counsel_form li:first-child {
    font-size: 16px;
    padding: 0 0 0 5px;
  }

  #section_counsel .counsel_form .btn_submit {
    height: 50px;
    font-size: 20px;
    font-weight: 500;
  }

  .shortterm_mid .box-container {
    width: 95%;
    gap: 10px;
  }

  .shortterm_mid .box-container .top,
  .shortterm_mid .box-container .bottom {
    gap: 10px;
  }

  .shortterm_mid .box {
    padding: 15px 20px;
    border-radius: 10px;
  }

  .shortterm_mid .box img {
    width: 30px;
  }

  .shortterm_mid .box p {
    font-size: 14px;
  }

  .shortterm_mid .box p b {
    font-size: 16px;
  }

  .shortterm_contact {
    padding: 15% 0;
  }

  .inquiry-section-div {
    width: 100%;
    margin: auto;
  }
}