@charset "UTF-8";

/* 메인 상단 */
.content .content_head {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  background: #160e47 url("../images/event/main_bg_pc.png") no-repeat center top / cover;
  overflow: hidden;
  z-index: 0;
}
/* 공통 CSS의 content_head 상·하단 padding 제거 (여백은 head_inner에서만 관리) */
.content.event .content_head {
  padding-top: 0;
  padding-bottom: 0;
}

.content .content_head .head_inner {
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
  padding: 90px 20px 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  z-index: 2;
}

.content .content_head .title_wrap {
  gap: 0;
}
.content .content_head .main_title {
  position: relative;
  width: fit-content;
  margin: 0 auto;
  text-align: center;
}
.content .content_head .main_title img {
  max-width: 100%;
}

/* 혜택 신청하기 버튼 */
.content .content_head .btn_wrap {
  margin-top: 0;
}
.content .content_head .btn_wrap .btn_hero {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 50px 18px 60px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.6px;
  color: #fff;
  background-color: #8869fb;
  border-radius: 76px;
  filter: drop-shadow(0 4px 2px rgba(60, 62, 68, 0.15));
  cursor: pointer;
  transition: background-color 0.2s;
}
.content .content_head .btn_wrap .btn_hero:hover {
  background-color: #7452f0;
}
.content .ic_arrow_hero {
  width: 36px;
  height: 36px;
  background: url("../images/event/ic_arrow_hero.svg") no-repeat center / contain;
  display: inline-block;
  flex-shrink: 0;
}

/* 선물 일러스트 */
.content .content_head .visual_wrap {
  position: relative;
  z-index: 2;
  margin-top: 51px;
  display: flex;
  justify-content: center;
}
.content .content_head .visual_wrap img {
  width: 600px;
  max-width: 100%;
  border-radius: 0;
}

/* 대상 / 기간 / 혜택 */
.content .content_head .event_info {
  position: relative;
  z-index: 1;
  margin-top: -16px;
  width: 880px;
  max-width: 100%;
  padding: 42px 54px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background-color: #393496;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  box-sizing: border-box;
}
.content .content_head .event_info dl {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin: 0;
}
.content .content_head .event_info dt {
  flex-shrink: 0;
  padding: 4px 16px;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.4px;
  color: #fff;
  background-color: #826ded;
  border-radius: 24px;
}
.content .content_head .event_info dd {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding-top: 4px;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.4px;
  color: #fff;
  text-align: left;
}
.content .content_head .event_info dd p {
  margin: 0;
  font-size: inherit;
  color: inherit;
}
.content .content_head .event_info dd strong {
  font-weight: 700;
}

/* 히어로 모션 */
/* 1) 진입: 타이틀 → 버튼 → 선물 → 정보 박스 순서로 등장 */
.content .content_head .title_wrap {
  animation: heroFadeUp 0.8s ease-out both;
}
.content .content_head .btn_wrap {
  animation: heroFadeUp 0.8s ease-out 0.2s both;
}
.content .content_head .visual_wrap img {
  animation: heroPopIn 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s both;
}
.content .content_head .event_info {
  animation: heroFadeUp 0.8s ease-out 0.7s both;
}

/* 2) 선물 뒤 빛 번짐 */
.content .content_head .visual_wrap::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  max-width: 460px;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(170, 140, 255, 0.45) 0%, rgba(170, 140, 255, 0) 70%);
  transform: translate(-50%, -50%);
  animation: heroGlow 3s ease-in-out 1.3s infinite alternate both;
  z-index: -1;
  pointer-events: none;
}

/* 3) 버튼 빛 스윕 + 화살표 */
.content .content_head .btn_wrap .btn_hero {
  position: relative;
  overflow: hidden;
}
.content .content_head .btn_wrap .btn_hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-20deg);
  animation: heroShine 3.5s ease-in-out 1.5s infinite;
  pointer-events: none;
}
.content .content_head .btn_wrap .btn_hero .ic_arrow_hero {
  animation: heroArrow 1.2s ease-in-out infinite;
}

@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes heroPopIn {
  from { opacity: 0; transform: scale(0.85) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes heroGlow {
  from { opacity: 0.5; transform: translate(-50%, -50%) scale(0.92); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
}
@keyframes heroShine {
  0% { left: -60%; }
  40%, 100% { left: 130%; }
}
@keyframes heroArrow {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(5px); }
}

/* 4) 타이틀·선물 주변 별 반짝임 (타이틀은 이미지 기준 %) */
.content .content_head .sparkle {
  position: absolute;
  width: 32px;
  height: 32px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12.8 7.6 16.4 11.2 24 12C16.4 12.8 12.8 16.4 12 24C11.2 16.4 7.6 12.8 0 12C7.6 11.2 11.2 7.6 12 0Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center / contain;
  filter: drop-shadow(0 0 6px rgba(200, 180, 255, 0.9));
  transform: translate(-50%, -50%) scale(0);
  animation: heroTwinkle 2.4s ease-in-out infinite;
  pointer-events: none;
}
.content .content_head .main_title .sp1 { left: -3%; top: 34%; animation-delay: 1s; }
.content .content_head .main_title .sp2 { left: 51%; top: 39%; width: 18px; height: 18px; animation-delay: 1.8s; }
.content .content_head .main_title .sp3 { left: 103%; top: 32%; width: 26px; height: 26px; animation-delay: 1.4s; }
.content .content_head .main_title .sp4 { left: 101%; top: 79%; width: 16px; height: 16px; animation-delay: 2.2s; }
.content .content_head .main_title .sp5 { left: -1%; top: 79%; width: 14px; height: 14px; animation-delay: 2.6s; }
/* 5) 히어로 전체 눈 내림: 세로 줄(span)을 히어로 높이만큼 내려 보내고, 눈송이(::before)는 좌우로 살랑임 */
.content .content_head .snow_wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.6;
  pointer-events: none;
}
.content .content_head .snow_wrap .snow {
  position: absolute;
  top: 0;
  height: 100%;
  opacity: 0;
  animation: heroSnowFall 14s linear infinite;
  will-change: transform;
}
.content .content_head .snow_wrap .snow::before {
  content: '';
  position: absolute;
  top: -16px;
  left: 0;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0) 80%);
  filter: drop-shadow(0 0 3px rgba(150, 130, 255, 0.6));
  animation: heroSnowSway var(--sway-dur, 3s) ease-in-out infinite alternate;
  animation-delay: var(--sway-delay, 0s);
}
.content .content_head .snow_wrap .sn1 { left: 1.5%; width: 7px; --snow-op: 0.59; --drift: 80px; --sway: 29px; --sway-dur: 4.3s; --sway-delay: -2.7s; animation-duration: 10.4s; animation-delay: -8.5s; }
.content .content_head .snow_wrap .sn2 { left: 5.2%; width: 5px; --snow-op: 0.9; --drift: 80px; --sway: 26px; --sway-dur: 3.4s; --sway-delay: -2.5s; animation-duration: 11.7s; animation-delay: -1.0s; }
.content .content_head .snow_wrap .sn3 { left: 7.8%; width: 6px; --snow-op: 0.68; --drift: 40px; --sway: 17px; --sway-dur: 4.1s; --sway-delay: -3.3s; animation-duration: 10.5s; animation-delay: -5.9s; }
.content .content_head .snow_wrap .sn4 { left: 13.1%; width: 5px; --snow-op: 0.7; --drift: 80px; --sway: 32px; --sway-dur: 3.7s; --sway-delay: -3.5s; animation-duration: 13.2s; animation-delay: -12.9s; }
.content .content_head .snow_wrap .sn5 { left: 16.4%; width: 7px; --snow-op: 0.52; --drift: 30px; --sway: 15px; --sway-dur: 3.3s; --sway-delay: -2.4s; animation-duration: 11.2s; animation-delay: -1.3s; }
.content .content_head .snow_wrap .sn6 { left: 20.0%; width: 7px; --snow-op: 0.41; --drift: 30px; --sway: 14px; --sway-dur: 3.5s; --sway-delay: -3.2s; animation-duration: 14.6s; animation-delay: -2.7s; }
.content .content_head .snow_wrap .sn7 { left: 23.5%; width: 6px; --snow-op: 0.69; --drift: -20px; --sway: 31px; --sway-dur: 4.6s; --sway-delay: -0.1s; animation-duration: 15.0s; animation-delay: -7.4s; }
.content .content_head .snow_wrap .sn8 { left: 26.7%; width: 10px; --snow-op: 0.63; --drift: 80px; --sway: 32px; --sway-dur: 4.0s; --sway-delay: -1.9s; animation-duration: 17.4s; animation-delay: -6.3s; }
.content .content_head .snow_wrap .sn9 { left: 31.3%; width: 8px; --snow-op: 0.4; --drift: 30px; --sway: 31px; --sway-dur: 2.2s; --sway-delay: -2.1s; animation-duration: 12.4s; animation-delay: -6.1s; }
.content .content_head .snow_wrap .sn10 { left: 34.7%; width: 9px; --snow-op: 0.72; --drift: 10px; --sway: 13px; --sway-dur: 2.3s; --sway-delay: -1.5s; animation-duration: 10.6s; animation-delay: -5.4s; }
.content .content_head .snow_wrap .sn11 { left: 38.3%; width: 7px; --snow-op: 0.91; --drift: 40px; --sway: 31px; --sway-dur: 2.3s; --sway-delay: -2.1s; animation-duration: 13.4s; animation-delay: -12.9s; }
.content .content_head .snow_wrap .sn12 { left: 41.9%; width: 10px; --snow-op: 0.55; --drift: 80px; --sway: 22px; --sway-dur: 3.3s; --sway-delay: -0.4s; animation-duration: 12.8s; animation-delay: -6.4s; }
.content .content_head .snow_wrap .sn13 { left: 43.4%; width: 6px; --snow-op: 0.92; --drift: 40px; --sway: 28px; --sway-dur: 2.8s; --sway-delay: -1.3s; animation-duration: 13.8s; animation-delay: -9.2s; }
.content .content_head .snow_wrap .sn14 { left: 48.9%; width: 9px; --snow-op: 0.74; --drift: 50px; --sway: 27px; --sway-dur: 2.2s; --sway-delay: -0.5s; animation-duration: 17.9s; animation-delay: -14.7s; }
.content .content_head .snow_wrap .sn15 { left: 52.4%; width: 10px; --snow-op: 0.36; --drift: 10px; --sway: 26px; --sway-dur: 3.8s; --sway-delay: -2.1s; animation-duration: 13.7s; animation-delay: -2.3s; }
.content .content_head .snow_wrap .sn16 { left: 55.3%; width: 8px; --snow-op: 0.81; --drift: 70px; --sway: 29px; --sway-dur: 4.6s; --sway-delay: -2.6s; animation-duration: 11.0s; animation-delay: -2.7s; }
.content .content_head .snow_wrap .sn17 { left: 60.1%; width: 14px; --snow-op: 0.4; --drift: 10px; --sway: 34px; --sway-dur: 2.8s; --sway-delay: -0.0s; animation-duration: 13.6s; animation-delay: -7.5s; }
.content .content_head .snow_wrap .sn18 { left: 63.4%; width: 9px; --snow-op: 0.77; --drift: 40px; --sway: 28px; --sway-dur: 2.9s; --sway-delay: -0.6s; animation-duration: 17.9s; animation-delay: -12.2s; }
.content .content_head .snow_wrap .sn19 { left: 67.4%; width: 7px; --snow-op: 0.4; --drift: 10px; --sway: 30px; --sway-dur: 4.0s; --sway-delay: -1.1s; animation-duration: 11.2s; animation-delay: -7.4s; }
.content .content_head .snow_wrap .sn20 { left: 69.5%; width: 7px; --snow-op: 0.51; --drift: 70px; --sway: 15px; --sway-dur: 4.2s; --sway-delay: -3.8s; animation-duration: 10.0s; animation-delay: -4.2s; }
.content .content_head .snow_wrap .sn21 { left: 73.4%; width: 10px; --snow-op: 0.92; --drift: 70px; --sway: 14px; --sway-dur: 4.5s; --sway-delay: -3.4s; animation-duration: 15.5s; animation-delay: -8.0s; }
.content .content_head .snow_wrap .sn22 { left: 77.1%; width: 5px; --snow-op: 0.62; --drift: -20px; --sway: 18px; --sway-dur: 2.7s; --sway-delay: -0.4s; animation-duration: 17.0s; animation-delay: -16.2s; }
.content .content_head .snow_wrap .sn23 { left: 81.1%; width: 12px; --snow-op: 0.59; --drift: -20px; --sway: 27px; --sway-dur: 3.1s; --sway-delay: -2.5s; animation-duration: 13.2s; animation-delay: -6.4s; }
.content .content_head .snow_wrap .sn24 { left: 82.5%; width: 6px; --snow-op: 0.94; --drift: 70px; --sway: 25px; --sway-dur: 2.4s; --sway-delay: -0.3s; animation-duration: 13.5s; animation-delay: -1.5s; }
.content .content_head .snow_wrap .sn25 { left: 86.0%; width: 5px; --snow-op: 0.69; --drift: 40px; --sway: 33px; --sway-dur: 2.8s; --sway-delay: -1.7s; animation-duration: 14.3s; animation-delay: -13.6s; }
.content .content_head .snow_wrap .sn26 { left: 89.5%; width: 8px; --snow-op: 0.72; --drift: 10px; --sway: 21px; --sway-dur: 3.0s; --sway-delay: -0.4s; animation-duration: 11.2s; animation-delay: -2.8s; }
.content .content_head .snow_wrap .sn27 { left: 94.8%; width: 14px; --snow-op: 0.42; --drift: 70px; --sway: 15px; --sway-dur: 2.5s; --sway-delay: -0.0s; animation-duration: 16.8s; animation-delay: -16.7s; }
.content .content_head .snow_wrap .sn28 { left: 97.9%; width: 9px; --snow-op: 0.4; --drift: 10px; --sway: 12px; --sway-dur: 2.3s; --sway-delay: -2.0s; animation-duration: 10.8s; animation-delay: -3.7s; }

@keyframes heroTwinkle {
  0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0) rotate(0deg); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(90deg); }
}
/* 낙하(줄): 일정 속도로 내려가며 바람(--drift)에 비스듬히 흐름 */
@keyframes heroSnowFall {
  0% { opacity: 0; transform: translate3d(0, 0, 0); }
  5% { opacity: var(--snow-op, 1); }
  90% { opacity: var(--snow-op, 1); }
  100% { opacity: 0; transform: translate3d(var(--drift), 100%, 0); }
}
/* 살랑임(눈송이): 좌우로 흔들리며 살짝 앞뒤로 기울어지는 느낌 */
@keyframes heroSnowSway {
  0% { transform: translate3d(calc(var(--sway) * -1), 0, 0) scale(0.92); }
  50% { transform: translate3d(calc(var(--sway) * 0.3), 6px, 0) scale(1); }
  100% { transform: translate3d(var(--sway), 0, 0) scale(0.96); }
}

/* 모션 최소화 설정 사용자 */
@media (prefers-reduced-motion: reduce) {
  .content .content_head .title_wrap,
  .content .content_head .btn_wrap,
  .content .content_head .visual_wrap img,
  .content .content_head .event_info,
  .content .content_head .visual_wrap::before,
  .content .content_head .btn_wrap .btn_hero::after,
  .content .content_head .btn_wrap .btn_hero .ic_arrow_hero {
    animation: none;
  }
  .content .content_head .snow_wrap {
    display: none;
  }
  .content .content_head .sparkle {
    animation: none;
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.8);
  }
}

/* 비교할수록 다우오피스가 확실한 이유 */
.content .area_why {
  width: 100%;
  padding: 123px 0 100px;
  background-color: #0f1117;
}
.content .area_why .inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}
.content .area_why .title_wrap {
  margin-bottom: 63px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.content .area_why h4 {
  margin: 0;
  font-size: 48px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: normal;
  color: #fff;
}
.content .area_why h4 .purple {
  color: #b5a3ff;
}
.content .area_why .title_wrap .sub {
  margin: 0;
  font-size: 20px;
  line-height: normal;
  color: #9aa0ae;
}

/* 비교표 */
.content .area_why .why_table_wrap {
  padding-top: 17px;
}
.content .area_why .why_table {
  display: flex;
  align-items: flex-start;
}
.content .area_why .row {
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.content .area_why .row.r1,
.content .area_why .row.r3 { height: 68px; }
.content .area_why .row.r2,
.content .area_why .row.r4,
.content .area_why .row.r5 { height: 84px; }
.content .area_why .row.r6 { height: 76px; }

/* 비교표 - 타 서비스 */
.content .area_why .why_other {
  flex: 1;
  min-width: 0;
  margin-top: 20px;
  padding-right: 20px;
  background-color: #1a1d26;
  border-radius: 16px 0 0 16px;
}
.content .area_why .why_other .row {
  border-top: 1px solid #2c303c;
}
.content .area_why .why_other .row.head {
  height: 64px;
  margin-right: -20px;
  padding-right: 20px;
  background-color: #232733;
  border-top: 0;
  border-radius: 16px 0 0 0;
}
.content .area_why .why_other .c_item {
  flex: 0 0 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  text-align: center;
}
.content .area_why .why_other .c_item .note {
  font-size: 14px;
  font-weight: 400;
  color: #9aa0ae;
}
.content .area_why .why_other .c_val {
  flex: 1;
  font-size: 18px;
  color: #b4b9c4;
  text-align: center;
}
.content .area_why .why_other .c_merge {
  flex: 2;
}
.content .area_why .why_other .row.head .c_item,
.content .area_why .why_other .row.head .c_val {
  font-size: 18px;
  font-weight: 400;
  color: #9aa0ae;
}

/* 비교표 - 다우오피스 */
.content .area_why .why_daou {
  position: relative;
  flex: 0 0 420px;
  padding-bottom: 18px;
  background: linear-gradient(180deg, #2e2660 0%, #241e4c 100%);
  border: 2px solid #6656b9;
  border-radius: 18px;
  box-sizing: border-box;
}
.content .area_why .why_daou .badge {
  position: absolute;
  top: -17px;
  left: 50%;
  transform: translateX(-50%);
  height: 34px;
  padding: 0 28px;
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background-color: #6c4cf0;
  border-radius: 32px;
  z-index: 1;
}
.content .area_why .why_daou .row {
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  border-top: 1px solid #3e3578;
  text-align: center;
  color: #fff;
}
.content .area_why .why_daou .row.head {
  height: 82px;
  border-top: 0;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(180deg, #dcd2ff 0%, #b3a1fd 100%);
  font-size: 26px;
  font-weight: 700;
  color: #2c255c;
}
.content .area_why .why_daou strong {
  font-size: 20px;
  font-weight: 700;
}
.content .area_why .why_daou .big {
  font-size: 26px;
}
.content .area_why .why_daou .mid {
  font-size: 24px;
}
.content .area_why .why_daou .rate {
  font-size: 32px;
  color: #c9bbff;
}
.content .area_why .why_daou .tip {
  font-size: 15px;
  color: #b9a9ff;
}
.content .area_why .why_daou .benefit strong {
  font-size: 17px;
}
.content .area_why .why_daou .benefit .light {
  color: #d6ccff;
}

/* CHECK POINT */
.content .area_why .why_check {
  margin-top: 40px;
  padding: 38px 38px 36px;
  background: linear-gradient(165deg, #231d4a 0%, #181a28 100%);
  border: 2px solid #4c38a6;
  border-radius: 20px;
}
.content .area_why .check_head {
  display: flex;
  align-items: center;
  gap: 20px;
}
.content .area_why .check_badge {
  flex-shrink: 0;
  height: 34px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background-color: #6c4cf0;
  border-radius: 17px;
}
.content .area_why .check_q {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: normal;
  color: #fff;
}
.content .area_why .check_cards {
  margin-top: 30px;
  display: flex;
  gap: 19px;
}
.content .area_why .check_card {
  flex: 1;
  padding: 16px 27px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 13px;
  border-radius: 14px;
  box-sizing: border-box;
}
.content .area_why .check_card.other {
  background-color: #36305e;
  border: 1px solid #343846;
}
.content .area_why .check_card.daou {
  background-color: #2e2660;
  border: 1.5px solid #8b73ff;
}
.content .area_why .check_card .tag {
  height: 28px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  font-size: 15px;
  font-weight: 700;
  border-radius: 6px;
}
.content .area_why .check_card.other .tag {
  color: #ff8a8a;
  background-color: #583542;
}
.content .area_why .check_card.daou .tag {
  color: #fff;
  background-color: #6c4cf0;
}
.content .area_why .check_card p {
  margin: 0;
  font-size: 19px;
  line-height: 1.55;
  text-align: left;
}
.content .area_why .check_card.other p {
  color: #b4b9c4;
}
.content .area_why .check_card.other strong {
  color: #ff8a8a;
}
.content .area_why .check_card.daou p {
  color: #fff;
}
.content .area_why .check_card.daou strong {
  color: #c9bbff;
}
.content .area_why .check_foot {
  margin: 27px 0 0;
  font-size: 20px;
  line-height: normal;
  color: #d0d3db;
  text-align: center;
}
.content .area_why .check_foot strong {
  color: #fff;
}

@media (max-width: 1240px) {
  .content .area_why .why_other .c_item {
    flex-basis: 180px;
  }
  .content .area_why .why_daou {
    flex-basis: 36%;
  }
}

@media (max-width: 768px) {
  .content .area_why {
    padding: 60px 0;
  }
  .content .area_why .title_wrap {
    margin-bottom: 36px;
    gap: 12px;
  }
  .content .area_why h4 {
    font-size: 26px;
    line-height: 1.35;
  }
  .content .area_why .title_wrap .sub {
    font-size: 15px;
    line-height: 1.5;
  }
  /* 표: 모바일 한 화면에 4열 모두 노출 */
  .content .area_why .why_table_wrap {
    padding-top: 14px;
  }
  .content .area_why .row.r1,
  .content .area_why .row.r3 { height: 52px; }
  .content .area_why .row.r2,
  .content .area_why .row.r5 { height: 72px; }
  .content .area_why .row.r4 { height: 100px; }
  .content .area_why .row.r6 { height: 60px; }
  .content .area_why .why_other {
    margin-top: 12px;
    padding-right: 0;
    border-radius: 12px 0 0 12px;
  }
  .content .area_why .why_other .row.head {
    height: 48px;
    margin-right: 0;
    padding-right: 0;
    border-radius: 12px 0 0 0;
  }
  .content .area_why .why_other .c_item {
    flex-basis: clamp(64px, 15vw, 120px);
    padding: 0 4px;
    font-size: 12px;
    word-break: keep-all;
  }
  .content .area_why .why_other .c_item .note {
    font-size: 11px;
  }
  .content .area_why .why_other .c_val,
  .content .area_why .why_other .row.head .c_item,
  .content .area_why .why_other .row.head .c_val {
    padding: 0 2px;
    font-size: 12px;
    word-break: keep-all;
  }
  .content .area_why .why_daou {
    flex-basis: 36%;
    padding-bottom: 10px;
    border-radius: 12px;
  }
  .content .area_why .why_daou .badge {
    top: -13px;
    height: 26px;
    padding: 0 14px;
    font-size: 13px;
  }
  .content .area_why .why_daou .row {
    padding: 0 6px;
    gap: 2px;
    word-break: keep-all;
  }
  .content .area_why .why_daou .row.head {
    height: 58px;
    border-radius: 10px 10px 0 0;
    font-size: 17px;
  }
  .content .area_why .why_daou strong {
    font-size: 13px;
  }
  .content .area_why .why_daou .big,
  .content .area_why .why_daou .mid {
    font-size: 16px;
  }
  .content .area_why .why_daou .rate {
    font-size: 22px;
  }
  .content .area_why .why_daou .tip {
    font-size: 11px;
  }
  .content .area_why .why_daou .benefit strong {
    font-size: 12px;
  }
  /* CHECK POINT 세로 배치 */
  .content .area_why .why_check {
    margin-top: 32px;
    padding: 24px 20px;
  }
  .content .area_why .check_head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .content .area_why .check_badge {
    height: 30px;
    padding: 0 16px;
    font-size: 14px;
  }
  .content .area_why .check_q {
    font-size: 20px;
  }
  .content .area_why .check_cards {
    margin-top: 20px;
    flex-direction: column;
    gap: 12px;
  }
  .content .area_why .check_card {
    padding: 16px 18px 18px;
    gap: 10px;
  }
  .content .area_why .check_card p {
    font-size: 15px;
  }
  .content .area_why .check_foot {
    margin-top: 20px;
    font-size: 15px;
    line-height: 1.5;
  }
}

/* 비교 섹션 반복 효과: 다우오피스 열 테두리 빛, 추천 배지 위아래 */
.content .area_why .why_daou {
  animation: whyGlow 2.4s ease-in-out infinite alternate;
}
.content .area_why .why_daou .badge {
  animation: whyBadgeBounce 1.6s ease-in-out infinite;
}
@keyframes whyGlow {
  from { box-shadow: 0 0 0 rgba(139, 115, 255, 0); }
  to { box-shadow: 0 0 32px rgba(139, 115, 255, 0.45); }
}
@keyframes whyBadgeBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .content .area_why .why_daou,
  .content .area_why .why_daou .badge {
    animation: none;
  }
}

/* 스크롤 등장 (섹션 공통, JS가 .rv / .rv_item / .rv_on 부여) */
.content .rv .rv_item {
  opacity: 0;
}
.content .rv .rv_item.rv_on {
  opacity: 1;
  /* backwards: 끝난 뒤엔 원래 스타일(hover 등)로 돌아가도록 */
  animation: revealUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
@keyframes revealUp {
  from { opacity: 0; transform: translateY(32px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .content .rv .rv_item {
    opacity: 1;
  }
  .content .rv .rv_item.rv_on {
    animation: none;
  }
}

/* 바디영역 공통 */
.content h3 {
  margin-bottom: 52px;
  color: #fff;
  font-size: 48px;
}
.content .point {
  color: #4caeff;
}
.content .sub {
  color: #2debff;
  font-size: 18px;
}
.content h4 {
  margin-bottom: 8px;
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -1.8px;
  line-height: 160%;
  color: #333;
}
.content h5 {
  margin-bottom: 8px;
  font-size: 28px;
  font-weight: 300;
  letter-spacing: -1.8px;
  line-height: 160%;
  color: #fff;
}
.content h5 b {
  font-weight: 700;
}
.content .link {
  font-size: 18px;
  color: #888;
  cursor: pointer;
}

/* 혜택 */
.content .area_benefit {
  width: 100%;
  max-width: none; /* 공통 2025_content.css .function .area_benefit(max-width:1200px) 무효화 */
  padding: 128px 20px 80px;
  position: relative;
  z-index: 0;
  background: linear-gradient(180deg, #161233 0%, #3a2c8a 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}
.content .area_benefit .sub {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 13px;
  letter-spacing: -0.26px;
  color: #b5a3ff;
}
.content .area_benefit h4 {
  margin: 12px 0 0;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -1.92px;
  color: #fff;
}
.content .area_benefit .card_vertical {
  margin-top: 56px;
  z-index: 1;
  position: relative;
  width: 100%;
  max-width: 1200px;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  gap: 21px;
}
.content .area_benefit .card_vertical .card {
  flex: 1;
  min-height: 420px;
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 24px;
  /* 공통 2025_content.css .function .area_benefit .card 무효화 (라벨 잘림 방지) */
  overflow: visible;
  box-shadow: 0 4px 24px rgba(108, 76, 240, 0.3);
  transition: none;
  box-sizing: border-box;
}
.content .area_benefit .card_vertical .card:hover {
  box-shadow: 0 4px 24px rgba(108, 76, 240, 0.3);
  transform: none;
}
.content .area_benefit .card_vertical .card .text_wrap {
  padding: 72px 40px 40px 51px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
/* 혜택 라벨 (리본) */
.content .area_benefit .benefit_label {
  position: absolute;
  top: -11px;
  right: 24px;
  width: 77px;
  height: 62px;
  padding-bottom: 8px; /* 하단 V자 홈을 제외한 영역의 세로 가운데 */
  display: flex;
  align-items: center;
  justify-content: center;
  /* 리본 모양을 CSS에 직접 포함 (색 변경 시 fill='%23xxxxxx' 값만 수정) */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 77 61.8821'%3E%3Cpath d='M0 8C0 3.58172 3.58172 0 8 0H69C73.4183 0 77 3.58172 77 8L77 56.8778C77 60.3431 73.5606 62.7577 70.3014 61.5804L40.1986 50.7072C39.1009 50.3107 37.8991 50.3107 36.8014 50.7072L6.69861 61.5804C3.43943 62.7577 0 60.3431 0 56.8778V8Z' fill='%238B73FF'/%3E%3C/svg%3E") no-repeat center top / 77px 62px;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.9px;
  color: #fff;
  text-align: center;
  box-sizing: border-box;
  z-index: 1;
}
/* 아이콘: 시안 위치 기준 (카드 상단 72px부터 140px 영역) */
.content .area_benefit .benefit_ic {
  position: relative;
  width: 100%;
  height: 140px;
}
.content .area_benefit .benefit_ic img {
  position: absolute;
  max-width: none;
  margin: 0;
  border-radius: 0;
}
.content .area_benefit .benefit_ic .ic_service {
  top: 10px;
  left: -5.8px;
  width: 85.86px;
  height: 85.86px;
}
.content .area_benefit .benefit_ic .ic_storage {
  top: -0.5px;
  left: -5.5px;
  width: 85px;
  height: 85px;
}
.content .area_benefit .benefit_ic .ic_ai {
  top: 10.5px;
  left: 0;
  width: 70px;
  height: 70px;
}
.content .area_benefit h5 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.84px;
  color: #353535;
  word-break: keep-all;
}
.content .area_benefit h5 small {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.84px;
  white-space: nowrap;
}
.content .area_benefit .text_wrap p {
  margin: 17px 0 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.6px;
  color: #888;
}
.content .area_benefit .text_wrap .more {
  margin-top: 7px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.64px;
  color: #8d949e;
}
.content .area_benefit .ic_more {
  width: 7px;
  height: 13px;
  background: url("../images/event/ic_more_arrow.svg") no-repeat center / contain;
  display: inline-block;
}
.content .area_benefit .notice {
  margin-top: 29px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -1px;
  color: #c8c8c8;
  text-align: center;
}
.content .area_benefit .notice .mint {
  color: #b5a3ff;
}
/* 혜택 신청하기 버튼 */
.content .area_benefit .btn_wrap {
  margin-top: 64px;
}
.content .area_benefit .btn_wrap .btn_benefit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 18px 48px;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: -0.84px;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.14);
  border-radius: 42px;
  cursor: pointer;
  transition: background-color 0.2s;
}
.content .area_benefit .btn_wrap .btn_benefit:hover {
  background-color: rgba(255, 255, 255, 0.24);
}
.content .area_benefit .ic_arrow_benefit {
  width: 15px;
  height: 12.7px;
  background: url("../images/event/ic_arrow_benefit.svg") no-repeat center / contain;
  transform: rotate(180deg);
  display: inline-block;
}
.content .area_benefit .bg01 {
  position: absolute;
  max-width: 110%;
  top: 140px;
  z-index: -2;
}

@media (max-width: 1240px) {
  .content .area_benefit {
    padding: 80px 20px 60px;
  }
  .content .area_benefit h4 {
    font-size: 32px;
    letter-spacing: -1.2px;
  }
  .content .area_benefit .card_vertical {
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
    gap: 20px;
  }
  .content .area_benefit .card_vertical .card {
    width: 100%;
    max-width: 560px;
    min-height: 0;
  }
  .content .area_benefit .card_vertical .card .text_wrap {
    padding: 32px 32px 32px;
  }
  .content .area_benefit .benefit_ic {
    height: 96px;
  }
  .content .area_benefit h5 {
    font-size: 22px;
  }
  .content .area_benefit h5 small {
    font-size: 15px;
  }
  .content .area_benefit .text_wrap p {
    margin-top: 10px;
    font-size: 16px;
  }
  .content .area_benefit .text_wrap .more {
    font-size: 15px;
  }
  .content .area_benefit .notice {
    font-size: 15px;
    letter-spacing: -0.5px;
  }
  .content .area_benefit .btn_wrap {
    margin-top: 40px;
  }
}

@media (max-width: 768px) {
  .content .area_benefit {
    padding: 60px 20px;
  }
  .content .area_benefit .sub {
    font-size: 16px;
  }
  .content .area_benefit h4 {
    margin-top: 10px;
    font-size: 26px;
  }
  .content .area_benefit .card_vertical {
    margin-top: 32px;
    gap: 16px;
  }
  .content .area_benefit .card_vertical .card {
    border-radius: 20px;
  }
  .content .area_benefit .card_vertical .card .text_wrap {
    padding: 24px 24px 26px;
  }
  .content .area_benefit .benefit_label {
    right: 16px;
    transform: scale(0.75);
    transform-origin: top right;
  }
  .content .area_benefit .benefit_ic {
    height: 72px;
  }
  .content .area_benefit .benefit_ic .ic_service {
    top: 0;
    left: -4px;
    width: 60px;
    height: 60px;
  }
  .content .area_benefit .benefit_ic .ic_storage {
    top: -4px;
    left: -4px;
    width: 60px;
    height: 60px;
  }
  .content .area_benefit .benefit_ic .ic_ai {
    top: 4px;
    left: 0;
    width: 48px;
    height: 48px;
  }
  .content .area_benefit h5 {
    font-size: 20px;
    letter-spacing: -0.6px;
  }
  .content .area_benefit h5 small {
    font-size: 14px;
  }
  .content .area_benefit .text_wrap p {
    margin-top: 8px;
    font-size: 15px;
    letter-spacing: -0.4px;
  }
  .content .area_benefit .notice {
    margin-top: 20px;
    font-size: 14px;
    line-height: 1.5;
  }
  .content .area_benefit .btn_wrap {
    margin-top: 32px;
  }
  .content .area_benefit .btn_wrap .btn_benefit {
    padding: 14px 36px;
    font-size: 17px;
  }
}

/* 추가혜택 (타 서비스 전환 시) */
.content .area_add {
  width: 100%;
  padding: 140px 0 100px;
  position: relative;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.content .area_add h4 {
  margin: 0 0 60px;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -1.92px;
  color: #212529;
  text-align: center;
}
.content .area_add .card_vertical {
  width: 100%;
  max-width: 1200px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 24px;
}
.content .area_add .card_vertical .card {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 482px;
  background-color: #f6f4ff;
  border: 1px solid #ece8ff;
  border-radius: 24px;
  overflow: hidden;
  box-sizing: border-box;
}
.content .area_add .card_head {
  padding-top: 38px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.content .area_add .card_tag {
  padding: 8px 16px;
  font-size: 18px;
  font-weight: 700;
  line-height: normal;
  color: #fff;
  background-color: #8b73ff;
  border-radius: 30px;
}
.content .area_add .card_tit {
  margin: 0;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -1.5px;
  color: #333;
  text-align: center;
  word-break: keep-all;
}
.content .area_add .card_tit .point {
  color: #6c4cf0;
}

/* 일러스트 영역: 시안(588x351) 좌표 그대로 배치, 카드 하단에 붙임 */
.content .area_add .add_visual {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 351px;
  overflow: hidden;
}
.content .area_add .add_inner {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 588px;
  height: 351px;
  margin-left: -294px;
  transform-origin: center bottom;
}
.content .area_add .add_inner img {
  max-width: none;
  border-radius: 0;
}

/* 혜택 01: 사용자 행 */
.content .area_add .user_row {
  position: absolute;
  left: 57px;
  width: 475px;
  height: 107px;
  background-color: #fff;
  border: 1.5px solid #b9a9ff;
  border-radius: 20px;
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}
.content .area_add .user_row.r1 { top: 24px; }
.content .area_add .user_row.r2 { top: 149px; }
.content .area_add .user_row.r3 { top: 274px; }
.content .area_add .row_shadow {
  position: absolute;
  left: 47px;
  width: 483px;
  height: 127px;
}
.content .area_add .row_shadow.s1 { top: 20px; }
.content .area_add .row_shadow.s2 { top: 145px; }
.content .area_add .row_shadow.s3 { top: 270px; }
.content .area_add .user_row .avatar {
  position: absolute;
  top: 20.5px;
  left: 30.5px;
  width: 64px;
  height: 64px;
}
.content .area_add .user_row .name {
  position: absolute;
  top: 32.5px;
  left: 110.5px;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -1.04px;
  color: #616161;
  white-space: nowrap;
}
.content .area_add .user_row .pill {
  position: absolute;
  top: 30.5px;
  left: 334.5px;
  width: 105px;
  height: 47px;
  padding: 0 0 0 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 18px;
  font-weight: 400;
  line-height: 14px;
  letter-spacing: -0.28px;
  color: #1c1c1c;
  white-space: nowrap;
  background-color: #f1edff;
  border: 1.5px solid #d9cfff;
  border-radius: 38px;
  box-sizing: border-box;
}
.content .area_add .user_row .pill img {
  width: 20px;
  height: 20px;
}

/* 혜택 02: 조직 설계 화면 */
.content .area_add .panel_shadow {
  position: absolute;
  top: 32px;
  left: 26px;
  width: 116px;
  height: 361px;
}
.content .area_add .org_panel {
  position: absolute;
  top: 24px;
  left: 55px;
  width: 570px;
  height: 359px;
  background-color: #fff;
  border: 1.5px solid #b9a9ff;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}
.content .area_add .org_screen,
.content .area_add .org_icons {
  position: absolute;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
}
.content .area_add .org_screen {
  top: 97px;
  left: 72px;
  width: 622px;
  height: 337px;
}
.content .area_add .org_screen img {
  position: absolute;
  top: -70.25%;
  left: -40.66%;
  width: 287.96%;
  height: 339.95%;
}
.content .area_add .org_icons {
  top: 58px;
  left: 202px;
  width: 461px;
  height: 39px;
  opacity: 0.6;
}
.content .area_add .org_icons img {
  position: absolute;
  top: -342.59%;
  left: -89.79%;
  width: 388.53%;
  height: 2937.53%;
}
.content .area_add .org_tit {
  position: absolute;
  top: 55px;
  left: 98px;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -1.04px;
  color: #616161;
  white-space: nowrap;
}
.content .area_add .cursor {
  position: absolute;
  top: 81.45px;
  left: 300.72px;
  width: 49.061px;
  height: 79.354px;
  transform: rotate(-30deg);
}

@media (max-width: 1240px) {
  .content .area_add {
    padding: 100px 0 80px;
  }
  .content .area_add h4 {
    margin-bottom: 40px;
    font-size: 32px;
    letter-spacing: -1.2px;
  }
  .content .area_add .card_vertical {
    flex-direction: column;
    align-items: center;
  }
  .content .area_add .card_vertical .card {
    flex: none;
    width: 100%;
    max-width: 588px;
  }
}

@media (max-width: 640px) {
  .content .area_add {
    padding: 80px 0;
  }
  .content .area_add h4 {
    margin-bottom: 32px;
    font-size: 26px;
  }
  .content .area_add .card_vertical {
    gap: 16px;
  }
  .content .area_add .card_vertical .card {
    height: 330px;
    border-radius: 20px;
  }
  .content .area_add .card_head {
    padding-top: 28px;
    gap: 10px;
  }
  .content .area_add .card_tag {
    padding: 6px 14px;
    font-size: 14px;
  }
  .content .area_add .card_tit {
    font-size: 21px;
    letter-spacing: -0.8px;
  }
  /* 일러스트는 비율 그대로 축소 */
  .content .area_add .add_visual {
    height: 218px;
  }
  .content .area_add .add_inner {
    transform: scale(0.62);
  }
}

/* 타 서비스와 비교해 보세요 */
.content .area_compare {
  width: 100%;
  padding: 100px 0;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.content .area_compare h4 {
  margin: 0 0 60px;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -1.92px;
  color: #212529;
}
.content .area_compare .compare_wrap {
  position: relative;
  max-width: 1200px;
  width: 100%;
}
.content .area_compare .highlight {
  position: absolute;
  top: 0;
  right: 0;
  width: calc((100% - 300px) / 2);
  height: 100%;
  border: 2px solid #b9a9ff;
  border-radius: 16px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  pointer-events: none;
  animation: glowPulse 2.5s ease-in-out infinite;
  z-index: 2;
}
@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.06);
    border-color: #b9a9ff;
  }
  50% {
    box-shadow: 0 0 12px rgba(139, 115, 255, 0.35), 0 0 24px rgba(139, 115, 255, 0.12);
    border-color: #8b73ff;
  }
}
.content .area_compare .compare_table {
  width: 100%;
  border: 1px solid #e7e7e7;
  border-radius: 16px;
  overflow: hidden;
}
.content .area_compare .compare_head,
.content .area_compare .compare_row {
  display: flex;
  align-items: stretch;
}
.content .area_compare .compare_head {
  height: 72px;
  border-bottom: 1px solid #e7e7e7;
}
.content .area_compare .compare_row {
  height: 66px;
}
.content .area_compare .compare_row:last-child {
  border-bottom: none;
}
.content .area_compare .col_item {
  width: 300px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 50px;
  font-size: 20px;
  color: #1e1e1e;
  letter-spacing: -0.8px;
}
.content .area_compare .compare_head .col_item {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.96px;
}
.content .area_compare .col_other {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8f8f8;
  font-size: 20px;
  font-weight: 500;
  color: #808080;
  letter-spacing: -0.8px;
  text-align: center;
}
.content .area_compare .compare_head .col_other {
  font-size: 24px;
  font-weight: 600;
  color: #1e1e1e;
  letter-spacing: -0.96px;
}
.content .area_compare .col_daou {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f6f4ff;
  font-size: 20px;
  color: #333;
  letter-spacing: -0.8px;
  text-align: center;
}
.content .area_compare .col_daou p {
  font-size: 20px;
  font-weight: 500;
  color: #333;
  letter-spacing: -0.8px;
}
.content .area_compare .compare_head .col_daou {
  font-size: 24px;
  font-weight: 600;
}
.content .area_compare .compare_head .col_daou .grad_text {
  background: linear-gradient(144deg, #b5a3ff 0%, #6c4cf0 56%, #3b24da 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.content .area_compare .col_daou strong {
  font-weight: 700;
}

/* 우리 회사에 맞는 상품은? */
.content .area_price {
  width: 100%;
  margin: 0;
  padding: 100px 0 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(180deg, #fff 18%, #e4dcff 100%);
}
.content .area_price .title_wrap {
  margin-bottom: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.content .area_price h4 {
  margin: 0;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -1.92px;
  color: #333;
}
.content .area_price .title_wrap .sub {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.8px;
  color: #888;
}
.content .area_price .plan_wrap {
  width: 100%;
  max-width: 1200px;
}
.content .area_price .plan_cards {
  display: flex;
  align-items: stretch;
  gap: 24px;
}
/* 상품 카드 */
.content .area_price .plan_card {
  flex: 1;
  min-width: 0;
  padding: 56px 48px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  background-color: #fff;
  border: 2px solid #e2dbff;
  border-radius: 24px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}
/* 프리미엄형: 그라데이션 테두리가 카드 둘레를 따라 천천히 회전 */
@property --plan-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.content .area_price .plan_card.premium {
  border: 2px solid transparent;
  /* @property 미지원 브라우저는 고정 그라데이션 테두리로 표시 */
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #b5a3ff 0%, #6c4cf0 100%) border-box;
  background:
    linear-gradient(#fff, #fff) padding-box,
    conic-gradient(from var(--plan-angle), #e2dbff 0%, #b5a3ff 25%, #6c4cf0 50%, #b5a3ff 75%, #e2dbff 100%) border-box;
  animation: planBorderSpin 6s linear infinite;
}
/* 스크롤 등장 애니메이션과 함께 재생 */
.content .rv .plan_card.premium.rv_item.rv_on {
  animation:
    revealUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards,
    planBorderSpin 6s linear infinite;
}
@keyframes planBorderSpin {
  to { --plan-angle: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
  .content .area_price .plan_card.premium,
  .content .rv .plan_card.premium.rv_item.rv_on {
    animation: none;
  }
}
.content .area_price .plan_head {
  padding-bottom: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-bottom: 1px solid #e9e7e7;
}
.content .area_price .plan_name {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -1.2px;
}
.content .area_price .plan_name .grad {
  background: linear-gradient(70deg, #b5a3ff 2%, #6c4cf0 58%, #3b24da 98%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.content .area_price .plan_badge {
  padding: 4px 6px;
  font-size: 18px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0;
  color: #fff;
  background: linear-gradient(108deg, #b5a3ff 0%, #6c4cf0 100%);
  border-radius: 6px;
}
/* 프리미엄형 강조: 추천 말풍선 두둥실, 카드 hover 시 살짝 떠오름 */
.content .area_price .plan_badge {
  position: relative;
  display: inline-block;
  margin-left: 6px;
  border-radius: 8px;
  will-change: transform;
  backface-visibility: hidden;
  animation: planBadgeFloat 1.4s ease-in-out infinite alternate;
}
/* 말풍선 꼬리 (왼쪽, '프리미엄형'을 가리킴) */
.content .area_price .plan_badge::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -6px;
  margin-top: -5px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 7px solid #b5a3ff;
}
.content .area_price .plan_card.premium {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.content .area_price .plan_card.premium:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(108, 76, 240, 0.2);
}
/* 아래 ↔ 위 한 구간을 alternate로 왕복 → 멈칫 없이 이어짐 */
@keyframes planBadgeFloat {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -5px, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .content .area_price .plan_badge {
    animation: none;
  }
  .content .area_price .plan_card.premium:hover {
    transform: none;
  }
}
.content .area_price .plan_desc {
  margin: 0;
  word-break: keep-all;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.8px;
  color: #6b7072;
}
.content .area_price .plan_price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.content .area_price .plan_price .regular {
  margin: 0;
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: -0.88px;
  color: #6b7072;
  text-decoration: line-through;
}
.content .area_price .plan_price .offer {
  margin: 0;
  font-size: 36px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -1.44px;
  color: #333;
}
.content .area_price .plan_price .offer small {
  font-size: 24px;
  font-weight: 500;
}
.content .area_price .plan_tag {
  padding: 8px 16px;
  font-size: 18px;
  font-weight: 700;
  line-height: normal;
  color: #6c4cf0;
  background-color: #efeaff;
  border-radius: 30px;
}
.content .area_price .plan_list {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  list-style: none;
}
.content .area_price .plan_list li {
  position: relative;
  word-break: keep-all;
  padding-left: 30px;
  font-size: 20px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.8px;
  color: #666;
}
.content.event .area_price .plan_list li {
  /* 공통 CSS의 li 색·굵기 덮어쓰기 방지용 (이 페이지 전용, 우선순위 높임) */
  color: #666;
  font-weight: 400;
}
.content .area_price .plan_list li::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  background: url("../images/event/price_check.svg") no-repeat center / contain;
}
.content .area_price .plan_info {
  margin: 20px 0 0;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: -0.72px;
  color: #888;
  text-align: center;
}
.content .area_price .btn_wrap {
  margin-top: 60px;
}
.content .area_price .btn_plan {
  display: inline-flex;
  padding: 16px 60px;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.56px;
  color: #fff;
  background-color: #333;
  border-radius: 100px;
  transition: background-color 0.2s;
}
.content .area_price .btn_plan:hover {
  background-color: #494949;
}

@media (max-width: 1240px) {
  .content .area_price {
    padding: 80px 0;
  }
  .content .area_price .title_wrap {
    margin-bottom: 40px;
  }
  .content .area_price h4 {
    font-size: 32px;
    letter-spacing: -1.2px;
  }
  .content .area_price .plan_card {
    padding: 40px 32px;
  }
  .content .area_price .plan_price .offer {
    font-size: 28px;
  }
  .content .area_price .plan_price .offer small {
    font-size: 18px;
  }
  .content .area_price .plan_list li {
    font-size: 17px;
  }
}

@media (max-width: 768px) {
  .content .area_price {
    padding: 60px 0;
  }
  .content .area_price .title_wrap {
    margin-bottom: 32px;
    gap: 8px;
  }
  .content .area_price h4 {
    font-size: 26px;
  }
  .content .area_price .title_wrap .sub {
    font-size: 15px;
  }
  .content .area_price .plan_cards {
    flex-direction: column;
    gap: 16px;
  }
  .content .area_price .plan_card {
    padding: 32px 24px;
    gap: 18px;
    border-radius: 20px;
  }
  .content .area_price .plan_head {
    padding-bottom: 18px;
    gap: 6px;
  }
  .content .area_price .plan_name {
    font-size: 22px;
  }
  .content .area_price .plan_badge {
    font-size: 13px;
  }
  .content .area_price .plan_desc {
    font-size: 15px;
  }
  .content .area_price .plan_price .regular {
    font-size: 16px;
  }
  .content .area_price .plan_price .offer {
    font-size: 22px;
    letter-spacing: -0.8px;
  }
  .content .area_price .plan_price .offer small {
    font-size: 15px;
  }
  .content .area_price .plan_tag {
    padding: 6px 12px;
    font-size: 14px;
  }
  .content .area_price .plan_list {
    gap: 12px;
  }
  .content .area_price .plan_list li {
    padding-left: 26px;
    font-size: 15px;
  }
  .content .area_price .plan_list li::before {
    width: 18px;
    height: 18px;
    margin-top: -9px;
  }
  .content .area_price .plan_info {
    font-size: 13px;
    word-break: keep-all;
  }
  .content .area_price .btn_wrap {
    margin-top: 32px;
  }
  .content .area_price .btn_plan {
    padding: 13px 40px;
    font-size: 18px;
  }
}

/* 배너 */
.content .area_banner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 80px 0 100px 0;
}
.content .area_banner a {
  cursor: pointer;
}

/* 추가혜택 */
.content .area_feature {
  width: 100%;
  padding: 100px 0;
  position: relative;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.content .area_feature h4 {
  margin: 0;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -1.44px;
  color: #333;
  text-align: center;
}
.content .area_feature p {
  margin-top: 12px;
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: -0.88px;
  color: #888;
  text-align: center;
}
.content .area_feature ul {
  max-width: 1000px;
  margin-top: 60px;
  padding: 50px 106px;
  border-radius: 18px;
  background-color: #f6f4ff;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.content .area_feature ul li {
  display: flex;
  align-items: center;
  gap: 44px;
  border-bottom: 1px solid #e2dbff;
  padding: 36px 0;
}
.content .area_feature ul li:first-child {
  padding-top: 0;
}
.content .area_feature ul li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
.content .area_feature ul li .text_wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.content .area_feature ul li .tit {
  font-size: 24px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -0.8px;
  color: #6c4cf0;
}
.content .area_feature ul li .txt {
  word-break: keep-all;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.6px;
  color: #747474;
}

.content .area_feature .card_vertical {
  width: 100%;
  max-width: 1000px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
}
.content .area_feature .card_vertical .card {
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f5f6f8;
  border-radius: 24px;
}

.content .btn_wrap .btn_round_sub {
  cursor: pointer;
  color: #fff;
  width: 100%;
  padding: 20px 50px;
  background-color: #3469b8;
  border-radius: 60px;
  z-index: 1;
}
.content .btn_wrap .btn_round_sub:hover {
  background-color: #295aa3;
}

.content .ic_service01 {
  width: 80px;
  height: 80px;
  background: url("./images/ic_service01.png");
  display: inline-block;
}
.content .ic_service02 {
  width: 80px;
  height: 82px;
  background: url("./images/ic_service02.png");
  display: inline-block;
}
.content .ic_service03 {
  width: 63px;
  height: 78px;
  background: url("./images/ic_service03.png");
  display: inline-block;
}
.content .ic_benefit01 {
  width: 64px;
  height: 44px;
  background: url("./images/ic_benefit01.png");
  display: inline-block;
}
.content .ic_benefit02 {
  width: 44px;
  height: 44px;
  background: url("./images/ic_benefit02.png");
  display: inline-block;
}
.content .ic_feature01 {
  width: 94px;
  height: 94px;
  flex-shrink: 0;
  background: url("../images/event/feature_ic01.svg") no-repeat center / contain;
  display: inline-block;
}
.content .ic_feature02 {
  width: 94px;
  height: 94px;
  flex-shrink: 0;
  background: url("../images/event/feature_ic02.svg") no-repeat center / contain;
  display: inline-block;
}
.content .ic_feature03 {
  width: 94px;
  height: 94px;
  flex-shrink: 0;
  background: url("../images/event/feature_ic03.svg") no-repeat center / contain;
  display: inline-block;
}
.content .ic_arrow_wt {
  width: 15px;
  height: 13px;
  margin-left: 12px;
  background: url("./images/ic_arrow_1.png");
  display: inline-block;
}
.content .ic_arrow_mt {
  width: 15px;
  height: 13px;
  margin-left: 12px;
  background: url("./images/ic_arrow_1.png");
  display: inline-block;
}
.content .ic_arrow {
  width: 7px;
  height: 13px;
  margin-left: 12px;
  background: url("./images/ic_arrow_2.png");
  display: inline-block;
}
.content .ic_label {
  width: 77px;
  height: 63px;
  display: inline-block;
  position: absolute;
  top: -15px;
  left: 250px;
}
.content .ic_label.n01 {
  background: url("./images/ic_label01.png");
}
.content .ic_label.n02 {
  background: url("./images/ic_label02.png");
}
.content .ic_label.n03 {
  background: url("./images/ic_label03.png");
}

/* 유의사항 */
.content .area_notice {
  width: 100%;
  margin: 0;
  gap: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #3e3297;
  color: #fff;
}
.content .area_notice .info_cont {
  max-width: 1200px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 80px 0;
}
.content .area_notice .info_cont .title {
  margin: 0 0 21px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: -1.12px;
  color: #fff;
}
.content .area_notice .info_cont ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.content .area_notice .info_cont li {
  margin: 0;
  padding-left: 0.7em;
  text-indent: -0.7em;
  font-size: 20px;
  line-height: 1.8;
  letter-spacing: -0.6px;
  color: #d4d4d4;
  word-break: keep-all;
}

/* 하단 (첫 도입 특별 혜택) */
.content .content_foot {
  min-height: 420px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  background: #1b1452 url("../images/event/img_footer.png") no-repeat center / cover;
  box-sizing: border-box;
}
.content .content_foot .title_wrap {
  margin: 0;
}
.content .content_foot h2 {
  margin: 0;
  font-size: 48px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -1.92px;
  color: #fff;
  text-align: center;
}
.content .content_foot .btn_wrap {
  margin: 0;
}
.content .content_foot .btn_foot {
  display: inline-flex;
  padding: 16px 80px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.6px;
  color: #fff;
  background-color: #8869fb;
  border-radius: 40px;
  filter: drop-shadow(0 4px 4px rgba(12, 70, 58, 0.8));
  transition: background-color 0.2s;
}
.content .content_foot .btn_foot:hover {
  background-color: #7452f0;
}
@media (max-width: 1240px) {
  .content .content_foot h2 {
    font-size: 36px;
    letter-spacing: -1.2px;
  }
}
@media (max-width: 768px) {
  .content .content_foot {
    min-height: 0;
    padding: 44px 20px;
    gap: 22px;
  }
  .content .content_foot h2 {
    font-size: 26px;
    letter-spacing: -0.8px;
  }
  .content .content_foot .btn_foot {
    padding: 13px 48px;
    font-size: 20px;
  }
}

/* 서비스 소개 (올인원 업무플랫폼) */
.content .area_service {
  width: 100%;
  padding: 100px 0;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.content .area_service .title_wrap {
  margin-bottom: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.content .area_service h4 {
  margin: 0;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -1.92px;
  color: #333;
}
.content .area_service .sub {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.72px;
  color: #888;
}
.content .area_service .svc_wrap {
  width: 100%;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.content .area_service img {
  max-width: none;
  border-radius: 0;
}
/* 다우오피스 바 */
.content .area_service .svc_bar {
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(94deg, #b5a3ff 1.4%, #6c4cf0 100%);
  border-radius: 18px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}
.content .area_service .svc_logo {
  display: inline-flex;
  align-items: center;
  gap: 11.7px;
}
.content .area_service .svc_logo .logo {
  width: 35.5px;
  height: 35.5px;
}
.content .area_service .svc_logo .logo_text {
  width: 109.458px;
  height: 23.666px;
  margin-top: 2.9px;
}
/* 업무/인사/경리관리 */
.content .area_service .svc_cate {
  margin: 0;
  padding: 0;
  display: flex;
  gap: 18px;
  list-style: none;
}
.content .area_service .svc_cate li {
  flex: 1;
  padding: 20px 0;
  font-size: 24px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -0.96px;
  color: #6c4cf0;
  text-align: center;
  background-color: #fff;
  border: 2px solid #b9a9ff;
  border-radius: 18px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}
/* 기능 아이콘 */
.content .area_service .svc_apps {
  margin: 0;
  padding: 0;
  display: flex;
  gap: 12px;
  list-style: none;
}
.content .area_service .svc_apps li {
  flex: 1;
  min-width: 0;
  height: 132px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background-color: #fff;
  border-radius: 18px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.12);
}
.content .area_service .svc_apps .ic {
  width: 37px;
  height: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.content .area_service .svc_apps .ic img {
  display: block;
  max-width: 100%;
  max-height: 100%;
}
.content .area_service .svc_apps .more .ic img {
  width: 30.67px;
  height: auto;
}
.content .area_service .svc_apps .txt {
  font-size: 17px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -0.51px;
  color: #757575;
  white-space: nowrap;
}

@media (max-width: 1240px) {
  .content .area_service {
    padding: 100px 0 80px;
  }
  .content .area_service .title_wrap {
    margin-bottom: 40px;
  }
  .content .area_service h4 {
    font-size: 32px;
    letter-spacing: -1.2px;
  }
  /* 아이콘 5개씩 2줄 */
  .content .area_service .svc_apps {
    flex-wrap: wrap;
  }
  .content .area_service .svc_apps li {
    flex: 0 0 calc((100% - 48px) / 5);
  }
}

@media (max-width: 768px) {
  .content .area_service {
    padding: 80px 0;
  }
  .content .area_service .title_wrap {
    margin-bottom: 32px;
  }
  .content .area_service h4 {
    font-size: 26px;
  }
  .content .area_service .sub {
    font-size: 15px;
  }
  .content .area_service .svc_wrap {
    gap: 12px;
  }
  .content .area_service .svc_bar {
    height: 56px;
    border-radius: 14px;
  }
  .content .area_service .svc_logo {
    gap: 8px;
  }
  .content .area_service .svc_logo .logo {
    width: 27px;
    height: 27px;
  }
  .content .area_service .svc_logo .logo_text {
    width: 83px;
    height: 18px;
    margin-top: 2px;
  }
  .content .area_service .svc_cate {
    gap: 8px;
  }
  .content .area_service .svc_cate li {
    padding: 13px 0;
    font-size: 16px;
    letter-spacing: -0.5px;
    border-width: 1.5px;
    border-radius: 14px;
  }
  /* 아이콘 3개씩, '더보기' 타일은 숨김 */
  .content .area_service .svc_apps {
    gap: 8px;
  }
  .content .area_service .svc_apps li {
    flex: 0 0 calc((100% - 16px) / 3);
    height: 96px;
    gap: 8px;
    border-radius: 14px;
  }
  .content .area_service .svc_apps li.more {
    display: none;
  }
  .content .area_service .svc_apps .ic {
    width: 30px;
    height: 30px;
  }
  .content .area_service .svc_apps .txt {
    font-size: 14px;
  }
}


@media (max-width: 1240px) {
  .content .area_feature h4 {
    font-size: 28px;
    margin-bottom: 20px;
    color: #333;
    text-align: center;
  }
  .content .area_feature p {
    font-size: 16px;
    text-align: center;
    margin-top: 0;
  }
  .content .link {
    font-size: 15px;
  }
  .content .area_feature ul {
    margin-top: 30px;
  }
  .content .area_benefit .bg01 {
    display: none;
  }
  .content .content_head .event_info {
    padding: 36px 40px;
  }
  .content .content_head .event_info dt,
  .content .content_head .event_info dd {
    font-size: 18px;
  }
  .content .ic_label {
    top: -12px;
    left: auto;
    right: 20px;
    transform: scale(0.75);
    transform-origin: top right;
  }
  .content {
    padding-top: 0px;
  }

  .content .ic_service01 {
    width: 40px;
    height: 40px;
    background: url("./images/ic_service01_mo.png");
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
  }
  .content .ic_service02 {
    width: 40px;
    height: 40px;
    background: url("./images/ic_service02_mo.png");
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
  }
  .content .ic_service03 {
    width: 34px;
    height: 40px;
    background: url("./images/ic_service03_mo.png");
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
  }
  .content .ic_benefit01 {
    width: 32px;
    height: 24px;
    background: url("./images/ic_benefit01_mo.png");
    display: inline-block;
  }
  .content .ic_benefit02 {
    width: 24px;
    height: 24px;
    background: url("./images/ic_benefit02_mo.png");
    display: inline-block;
  }
  .content .ic_feature01 {
    width: 51px;
    height: 51px;
    background: url("../images/event/feature_ic01.svg") no-repeat center / contain;
    display: inline-block;
  }
  .content .ic_feature02 {
    width: 51px;
    height: 51px;
    background: url("../images/event/feature_ic02.svg") no-repeat center / contain;
    display: inline-block;
  }
  .content .ic_feature03 {
    width: 51px;
    height: 51px;
    background: url("../images/event/feature_ic03.svg") no-repeat center / contain;
    display: inline-block;
  }

  .content .area_feature ul {
    padding: 30px 12%;
  }
  .content .area_feature ul li {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 24px 0;
  }
  .content .area_feature ul li .text_wrap {
    gap: 6px;
  }
  .content .area_feature ul li .tit {
    font-size: 20px;
  }
  .content .area_feature ul li .txt {
    font-size: 16px;
  }
  .content .area_notice .info_cont {
    margin: 48px 0;
  }
  .content .area_notice .info_cont .title {
    margin-bottom: 10px;
    font-size: 17px;
  }
  .content .area_notice .info_cont li {
    font-size: 13px;
    line-height: 1.7;
  }
  .content .area_compare h4 {
    font-size: 28px;
    margin-bottom: 40px;
  }
  .content .area_compare .compare_head {
    height: 60px;
  }
  .content .area_compare .compare_head .col_item,
  .content .area_compare .compare_head .col_other,
  .content .area_compare .compare_head .col_daou {
    font-size: 20px;
  }
  .content .area_compare .col_item {
    width: 200px;
    padding: 0 24px;
    font-size: 16px;
  }
  .content .area_compare .col_other,
  .content .area_compare .col_daou p {
    font-size: 16px;
  }
  .content .area_compare .highlight {
    width: calc((100% - 200px) / 2);
  }
}

@media (max-width: 768px) {
  .content .content_head .main_title .sparkle {
    width: 18px;
    height: 18px;
  }
  .content .content_head .main_title .sp1 { left: 5%; top: 32%; }
  .content .content_head .main_title .sp2 { display: none; }
  .content .content_head .main_title .sp3 { left: 95%; top: 32%; width: 14px; height: 14px; }
  .content .content_head .main_title .sp4 { left: 91%; top: 76%; width: 10px; height: 10px; }
  .content .content_head .main_title .sp5 { left: 9%; top: 74%; width: 10px; height: 10px; }
  /* 모바일: 눈송이 절반만, 크기 축소 */
  .content .content_head .snow_wrap .snow:nth-child(even) {
    display: none;
  }
  .content .content_head .snow_wrap .snow {
    max-width: 8px;
  }
  .content .area_banner .wrap {
    background-color: #4c8bff;
    border-radius: 30px;
    display: flex;
    justify-content: center;
  }
  .content .content_head {
    background-image: url("../images/event/main_bg_mo.png");
  }
  .content .content_head .head_inner {
    padding: 60px 20px;
  }
  .content .content_head .btn_wrap {
    margin-top: 0;
  }
  .content .content_head .btn_wrap .btn_hero {
    gap: 8px;
    padding: 12px 28px 12px 34px;
    font-size: 20px;
  }
  .content .ic_arrow_hero {
    width: 24px;
    height: 24px;
  }
  .content .content_head .visual_wrap {
    margin-top: 32px;
  }
  .content .content_head .visual_wrap img {
    width: 243px;
  }
  .content .content_head .event_info {
    margin-top: -10px;
    width: 100%;
    padding: 24px 20px;
    gap: 16px;
  }
  .content .content_head .event_info dl {
    flex-direction: column;
    gap: 8px;
  }
  .content .content_head .event_info dt {
    padding: 3px 12px;
    font-size: 14px;
  }
  .content .content_head .event_info dd {
    align-self: stretch;
    gap: 6px;
    padding-top: 0;
    font-size: 15px;
    line-height: 1.5;
    word-break: keep-all;
  }
  .content .area_compare {
    padding: 80px 0;
  }
  .content .area_compare h4 {
    font-size: 22px;
    margin-bottom: 28px;
    padding: 0 20px;
  }
  .content .area_compare .compare_wrap {
    min-width: 0;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 20px;
    box-sizing: border-box;
  }
  .content .area_compare .compare_table {
    min-width: 480px;
  }
  .content .area_compare .compare_head {
    height: auto;
    min-height: 52px;
  }
  .content .area_compare .compare_row {
    height: auto;
    min-height: 52px;
  }
  .content .area_compare .col_item {
    width: 120px;
    flex-shrink: 0;
    padding: 12px 16px;
    font-size: 17px;
  }
  .content .area_compare .compare_head .col_item,
  .content .area_compare .compare_head .col_other,
  .content .area_compare .compare_head .col_daou {
    font-size: 19px;
  }
  .content .area_compare .col_other {
    padding: 12px 16px;
    font-size: 17px;
  }
  .content .area_compare .col_daou {
    padding: 12px 16px;
    font-size: 17px;
  }
  .content .area_compare .col_daou p {
    font-size: 17px;
    white-space: normal;
    text-align: center;
    line-height: 1.4;
  }
  .content .area_compare .highlight {
    right: 0;
    width: calc((100% - 120px) / 2);
  }
}

@media (max-width: 480px) {
  .content .area_feature {
    display: none;
  }
  .content .area_compare .compare_wrap {
    padding: 0;
  }
  .content .area_compare .compare_table {
    min-width: 0;
    width: 100%;
  }
  .content .area_compare .compare_head {
    min-height: 46px;
  }
  .content .area_compare .compare_row {
    min-height: 46px;
  }
  .content .area_compare .col_item {
    width: 80px;
    padding: 10px;
    font-size: 15px;
  }
  .content .area_compare .compare_head .col_item,
  .content .area_compare .compare_head .col_other,
  .content .area_compare .compare_head .col_daou {
    font-size: 16px;
  }
  .content .area_compare .col_other {
    padding: 10px 12px;
    font-size: 15px;
    word-break: keep-all;
  }
  .content .area_compare .col_daou {
    padding: 10px 12px;
    font-size: 15px;
  }
  .content .area_compare .col_daou p {
    font-size: 15px;
    word-break: keep-all;
  }
  .content .area_compare .highlight {
    right: 0;
    width: calc((100% - 80px) / 2);
  }
}

/* =========================================================
   공통 좌우 여백: 모든 섹션 콘텐츠 최대 1200px + 좌우 20px
   (파일 마지막에 두어 위의 섹션별·반응형 값보다 우선 적용)
   ========================================================= */
.content .content_head .head_inner {
  max-width: 1240px;
  padding-left: 20px;
  padding-right: 20px;
}
.content .area_why .inner {
  max-width: 1240px;
  padding-left: 20px;
  padding-right: 20px;
}
.content .area_benefit,
.content .area_add,
.content .area_compare,
.content .area_service,
.content .area_price,
.content .area_feature,
.content .area_notice,
.content .content_foot {
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}
.content .area_banner {
  max-width: 1240px;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}
.content .area_benefit .card_vertical,
.content .area_add .card_vertical,
.content .area_compare .compare_wrap,
.content .area_price .plan_wrap,
.content .area_service .svc_wrap,
.content .area_notice .info_cont {
  max-width: 1200px;
}
.content .area_feature ul {
  width: 100%;
  max-width: 1200px;
  box-sizing: border-box;
}
/* 섹션에서 좌우 여백을 주므로 내부 요소의 중복 여백 제거 */
.content .area_compare h4,
.content .area_compare .compare_wrap {
  padding-left: 0;
  padding-right: 0;
}

/* 모바일에서는 배너 미노출 */
@media (max-width: 768px) {
  .content .area_banner {
    display: none;
  }
}

/* 모바일 상단 영역 보정 (공통 CSS 여백 덮어쓰기 위해 .content.event 사용) */
@media (max-width: 768px) {
  /* 타이틀 ↔ 혜택 신청하기 버튼 간격 */
  .content.event .content_head .title_wrap,
  .content.event .content_head .main_title {
    margin-bottom: 0;
    padding-bottom: 0;
  }
  .content.event .content_head .btn_wrap {
    margin-top: 16px;
    padding-top: 0;
  }
  /* 선물 상자: 고해상도 PC 이미지를 모바일에서도 사용해 크게 표시 */
  .content.event .content_head .visual_wrap img.pc {
    display: block;
    width: 300px;
    max-width: 85%;
  }
  .content.event .content_head .visual_wrap img.mo {
    display: none;
  }
  /* 대상/기간/혜택: 태그와 내용 가운데 정렬 */
  .content.event .content_head .event_info dl {
    align-items: center;
  }
  .content.event .content_head .event_info dd {
    align-self: auto;
    align-items: center;
    text-align: center;
  }
}

/* 공통 CSS 정렬·자간 덮어쓰기 (이 페이지 전용) */
/* 섹션 제목은 모두 가운데 정렬 */
.content.event .content_body h4,
.content.event .content_body .title_wrap .sub,
.content.event .content_body .area_benefit > .sub {
  text-align: center;
}
/* 비교 섹션 표·CHECK POINT: 공통 자간(과하게 좁음) 대신 기본 자간 */
.content.event .area_why .why_table,
.content.event .area_why .why_table *,
.content.event .area_why .why_check,
.content.event .area_why .why_check * {
  letter-spacing: -0.3px;
}

/* 모바일 상단: 위 여백 축소, 타이틀 이미지 확대, 타이틀↔버튼 간격 축소
   (공통 CSS 여백이 남아 있어 !important로 확실히 덮어씀) */
@media (max-width: 768px) {
  .content.event .content_head .head_inner {
    padding-top: 32px !important;
  }
  .content.event .content_head .title_wrap,
  .content.event .content_head .main_title,
  .content.event .content_head .main_title img {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .content.event .content_head .main_title img.mo {
    width: 335px;
    max-width: 90vw;
    height: auto;
  }
  .content.event .content_head .btn_wrap {
    margin-top: 12px !important;
    padding-top: 0 !important;
  }
  .content.event .content_head .btn_wrap .btn_hero {
    margin-top: 0 !important;
  }
}