:root {
  --main-color: #0F9B8E;         /* 간병보험 — 부드러운 청록. 이 값 하나로 전체 색이 바뀐다 */
  --main-dark: #0B7F74;          /* 메인 hover / 눌림 */
  --point-color: var(--main-color);
  --main-soft: color-mix(in srgb, var(--main-color) 9%, #fff);    /* 태그 · 선택된 칸 바탕 */
  --main-tint: color-mix(in srgb, var(--main-color) 18%, #fff);   /* 제목 강조 칩 */

  --ink: #191F28;                /* 제목 */
  --body: #4E5968;               /* 본문 */
  --muted: #8B95A1;              /* 보조 글씨 */
  --line: #E5E8EB;               /* 구분선 */
  --bg: #F2F4F6;                 /* 회색 바탕 · 입력칸 */
  --error: #F04452;

  --r-lg: 28px;                  /* 큰 카드 */
  --r-md: 20px;                  /* 보통 카드 */
  --r-sm: 14px;                  /* 입력칸 · 버튼 */

  --wrap: 1140px;
  --aside-w: 440px;
  --sec-pad: 120px;              /* 섹션 위아래 여백 */

  /* 체크 아이콘 (흰 선) */
  --ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6l4.5-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.highlight {font-weight: 700; color: var(--point-color);}


#section1 > .inner,
#section2 > .inner,
#section3 > .inner, #section_point > .inner, #section_simple > .inner,
#section_company > .inner,
#section4 > .inner,
#section_process > .inner,
#section_qna > .inner, #section_guide > .inner {width: min(var(--wrap), calc(100% - 48px)); max-width: none; margin: 0 auto;}

/* 흰 섹션과 회색 섹션을 번갈아 둔다 — 흰 섹션의 카드는 회색, 회색 섹션의 카드는 흰색 */
/* 순서: section2(흰) → section3(회) → point(흰) → section4(회) → simple(연한 메인) → process(흰) → qna(회) → guide(흰) */
#section2, #section3, #section_point, #section_simple, #section_company, #section4, #section_process, #section_qna, #section_guide {padding: var(--sec-pad) 0;}
#section2, #section_point, #section_company, #section_process, #section_guide {background: #fff;}
#section3, #section4, #section_qna {background: var(--bg);}
#section_simple {background: var(--main-soft);}


/* ══════ #section1 ══════ */
#section1 {background: var(--bg);}

#section1 .content_wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--aside-w);
  align-items: center;
  gap: 48px 64px;
  padding: 80px 0 72px;
}


/* ── 히어로 ── */
#section1 .hero_main {min-width: 0;}

/* 슬라이드는 같은 칸에 겹쳐 두고 active 만 보인다 — 가장 긴 슬라이드 높이가 기준 */
#section1 .hero_slides {display: grid;}
#section1 .hero_slide {
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}
#section1 .hero_slide.active {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 0.45s ease 0.3s, transform 0.45s ease 0.3s, visibility 0s linear 0.3s;
}

#section1 .hero_label {display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #fff; color: var(--main-color); font-size: 14px; font-weight: 700; line-height: 1.3;}
#section1 .hero_label::before {content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor;}

/* 제목 — <b> 메인컬러 / <em> 연한 메인컬러 칩 */
#section1 .hero_title {margin-top: 22px; font-size: 52px; font-weight: 800; line-height: 1.28; letter-spacing: -2px; color: var(--ink); word-break: keep-all;}
#section1 .hero_title b {font-weight: 800; color: var(--main-color);}
#section1 .hero_title em {padding: 0 8px; border-radius: 12px; background: var(--main-tint); font-style: normal; -webkit-box-decoration-break: clone; box-decoration-break: clone;}

#section1 .hero_note {margin-top: 20px; font-size: 18px; line-height: 1.65; color: var(--body); word-break: keep-all;}

/* 혜택 — 체크 칩 */
#section1 .hero_benefit {display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px;}
#section1 .hero_benefit li {display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px 12px 12px; border-radius: 999px; background: #fff; font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--ink); word-break: keep-all;}
#section1 .hero_benefit li::before {content: ''; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--main-color) var(--ico-check) no-repeat center / 12px;}
#section1 .hero_benefit li small {font-size: 0.8em; color: var(--body);}

/* 슬라이드 표시 — 둥근 점 + 멈춤 */
#section1 .hero_ctrl {display: flex; align-items: center; gap: 6px; margin-top: 40px;}
#section1 .hero_dot {width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: #CDD3DA; cursor: pointer; transition: width 0.3s ease, background 0.3s ease;}
#section1 .hero_dot.active {width: 28px; background: var(--main-color);}
#section1 .hero_pause {position: relative; width: 28px; height: 28px; margin-left: 8px; padding: 0; border: 0; border-radius: 50%; background: #fff; cursor: pointer;}
#section1 .hero_pause::before,
#section1 .hero_pause::after {content: ''; position: absolute; top: 9px; width: 3px; height: 10px; border-radius: 2px; background: var(--ink);}
#section1 .hero_pause::before {left: 10px;}
#section1 .hero_pause::after {right: 10px;}
#section1 .hero_pause.paused::before {left: 11px; width: 0; height: 0; border-radius: 0; background: none; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent var(--ink);}
#section1 .hero_pause.paused::after {display: none;}
#section1 .hero_dot:focus-visible, #section1 .hero_pause:focus-visible {outline: 2px solid var(--main-color); outline-offset: 3px;}


/* ── 신청 폼 카드 ── */
#section1 .form_wrap {
  position: relative;
  min-width: 0;
  padding: 36px 32px 26px;
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: 0 24px 60px rgba(25, 31, 40, 0.08);
}
#section1 .form_wrap form {width: 100%;}

.form_wrap h2 {font-size: 26px; font-weight: 800; line-height: 1.35; letter-spacing: -0.8px; color: var(--ink); word-break: keep-all;}
.form_wrap .form_desc {margin-top: 6px; font-size: 15px; color: var(--muted); word-break: keep-all;}

.form_wrap .form_list {display: flex; flex-direction: column; gap: 18px; margin-top: 26px;}

/* 이름 · 생년월일 한 줄 두 칸 */
.form_wrap .field_row {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;}
.form_wrap .field_row > div {min-width: 0;}

.form_wrap li > label,
.form_wrap .field_row label,
.form_wrap .field_label {display: block; margin-bottom: 8px; font-size: 14px; font-weight: 700; color: var(--body);}

.form_wrap input[type='text'],
.form_wrap .phone_select {
  width: 100%; height: 58px; padding: 0 18px;
  border: 0; border-radius: var(--r-sm); background: var(--bg);
  box-shadow: inset 0 0 0 2px transparent;
  font-size: 17px; font-weight: 600; color: var(--ink);
  transition: background 0.15s, box-shadow 0.15s;
}
.form_wrap input[type='text']::placeholder {font-weight: 500; color: #B0B8C1;}
.form_wrap input[type='text']:focus,
.form_wrap .phone_select:focus {outline: none; background: #fff; box-shadow: inset 0 0 0 2px var(--main-color);}

/* 성별 — 큰 두 칸, 고른 쪽은 메인컬러 테두리 */
.form_wrap .gender_wrap {display: grid; grid-template-columns: 1fr 1fr; gap: 8px;}
.form_wrap .gender_wrap input[type='radio'] {position: absolute; opacity: 0; pointer-events: none;}
.form_wrap .gender_wrap label {display: flex; align-items: center; justify-content: center; height: 58px; margin: 0; border-radius: var(--r-sm); background: var(--bg); box-shadow: inset 0 0 0 2px transparent; font-size: 17px; font-weight: 600; color: var(--muted); cursor: pointer; user-select: none; transition: background 0.15s, color 0.15s, box-shadow 0.15s;}
.form_wrap .gender_wrap input[type='radio']:checked + label {background: var(--main-soft); box-shadow: inset 0 0 0 2px var(--main-color); color: var(--main-color); font-weight: 700;}
.form_wrap .gender_wrap input[type='radio']:focus-visible + label {outline: 2px solid var(--main-color); outline-offset: 2px;}

/* 연락처 — 국번 + 번호 */
.form_wrap .phone_input_wrap {position: relative; display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 8px;}
.form_wrap .phone_input_wrap::after {content: ""; position: absolute; top: 50%; left: 78px; width: 20px; height: 20px; background: url("../img/arrow_down.svg") no-repeat center / 20px; transform: translateY(-50%); transition: transform .2s; pointer-events: none;}
.form_wrap .phone_input_wrap:has(.phone_select:focus)::after {transform: translateY(-50%) rotate(180deg);}

/* 신청 버튼 */
.form_wrap .submit_btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 62px; margin-top: 26px;
  border: 0; border-radius: 16px; background: var(--main-color); color: #fff;
  font-size: 18px; font-weight: 700; letter-spacing: -0.3px; cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.form_wrap .submit_btn:hover {background: var(--main-dark);}
.form_wrap .submit_btn:active {transform: scale(0.98);}

.form_wrap .form_privacy {margin-top: 14px; font-size: 13px; color: var(--muted); text-align: center; word-break: keep-all;}


/* ── 지표 카드 ── */
#section1 .hero_stats {grid-column: 1 / -1; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 12px;}
#section1 .hero_stats li {display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 26px 30px; border-radius: var(--r-md); background: #fff;}
#section1 .hero_stats strong {order: 2; font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -1px; color: var(--main-color);}
#section1 .hero_stats strong small {margin-left: 2px; font-size: 17px; font-weight: 700; letter-spacing: 0;}
#section1 .hero_stats span {font-size: 16px; font-weight: 600; color: var(--body);}


/* ══════ 섹션 머리 (가운데 정렬) ══════ */
.title_wrap {max-width: 760px; margin: 0 auto 56px; text-align: center;}
.title_wrap .section_label {display: inline-flex; padding: 7px 14px; border-radius: 999px; background: var(--main-soft); font-size: 13px; font-weight: 700; letter-spacing: 1px; color: var(--main-color);}
#section3 .title_wrap .section_label,
#section_simple .title_wrap .section_label,
#section4 .title_wrap .section_label,
#section_qna .title_wrap .section_label {background: #fff;}
.title_wrap h2 {margin-top: 18px; font-size: 40px; font-weight: 800; line-height: 1.32; letter-spacing: -1.5px; color: var(--ink); word-break: keep-all;}
.title_wrap h2 b {color: var(--main-color);}
.title_wrap p {margin-top: 16px; font-size: 17px; line-height: 1.7; color: var(--body); word-break: keep-all;}

/* 섹션 하단 ※ 안내 */
#section3 .notice {margin-top: 24px; font-size: 14px; line-height: 1.6; color: var(--muted); text-align: center; word-break: keep-all;}


/* ── section2: 비교가 필요한 이유 ── */
#section2 .why_list {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
#section2 .why_list li {padding: 36px 32px 40px; border-radius: var(--r-lg); background: var(--bg);}
#section2 .icon {display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 28px; border-radius: var(--r-md); background: #fff; font-size: 32px; line-height: 1;}
#section2 .icon img {width: 80%; object-fit: contain;}
#section2 h3 {margin-bottom: 10px; font-size: 21px; font-weight: 800; letter-spacing: -0.6px; color: var(--ink); word-break: keep-all;}
#section2 p {font-size: 16px; line-height: 1.7; color: var(--body); word-break: keep-all;}
#section2 p b {font-weight: 700; color: var(--ink);}
#section2 p small {display: block; margin-top: 6px; font-size: 13px; color: var(--muted);}   /* 통계 출처 */


/* ── section3: 보장 구성 (첫 카드는 크게) ── */
#section3 .coverage_list {display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;}
#section3 .coverage_list li {padding: 32px 30px 36px; border-radius: var(--r-lg); background: #fff; transition: transform 0.2s ease, box-shadow 0.2s ease;}
#section3 .coverage_list li:hover {transform: translateY(-4px); box-shadow: 0 16px 40px rgba(25, 31, 40, 0.07);}
#section3 .coverage_list li:first-child {grid-column: span 2; display: flex; flex-direction: column; justify-content: flex-end; min-height: 240px; background: var(--main-color);}
#section3 .tag {display: inline-block; margin-bottom: 18px; padding: 5px 11px; border-radius: 999px; background: var(--main-soft); font-size: 12px; font-weight: 700; color: var(--main-color);}
#section3 .tag.option {background: var(--bg); color: var(--body);}
#section3 h3 {margin-bottom: 10px; font-size: 21px; font-weight: 800; letter-spacing: -0.5px; color: var(--ink); word-break: keep-all;}
#section3 p {font-size: 15px; line-height: 1.7; color: var(--body); word-break: keep-all;}
#section3 .coverage_list li:first-child .tag {align-self: flex-start; background: rgba(255, 255, 255, 0.2); color: #fff;}
#section3 .coverage_list li:first-child h3 {font-size: 30px; color: #fff;}
#section3 .coverage_list li:first-child p {max-width: 520px; font-size: 16px; color: rgba(255, 255, 255, 0.85);}


/* ── section_point: 핵심 포인트 — 카드 오른쪽 아래에 큰 번호가 옅게 깔린다 ── */
#section_point .point_list {display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;}
#section_point .point_list li {position: relative; overflow: hidden; padding: 36px 34px 40px; border-radius: var(--r-lg); background: var(--bg);}
#section_point .point_list li::after {content: attr(data-num); position: absolute; right: 22px; bottom: -22px; font-size: 128px; font-weight: 800; line-height: 1; letter-spacing: -4px; color: var(--main-color); opacity: 0.07; pointer-events: none;}
#section_point .point_list li > * {position: relative; z-index: 1;}
#section_point .point_num {display: inline-block; padding: 6px 12px; border-radius: 999px; background: #fff; font-size: 12px; font-weight: 800; letter-spacing: 1px; color: var(--main-color);}
#section_point .point_list h3 {margin: 18px 0 10px; font-size: 25px; font-weight: 800; line-height: 1.35; letter-spacing: -0.8px; color: var(--ink); word-break: keep-all;}
#section_point .point_list h3 b {color: var(--main-color);}
#section_point .point_list p {max-width: 420px; font-size: 16px; line-height: 1.7; color: var(--body); word-break: keep-all;}


/* ── section_simple: 유병자 간편심사 ── */
#section_simple .simple_box {max-width: 880px; margin: 0 auto; padding: 40px 44px; border-radius: var(--r-lg); background: #fff; box-shadow: 0 20px 50px color-mix(in srgb, var(--main-color) 12%, transparent);}
#section_simple .simple_list {display: flex; flex-direction: column; gap: 12px;}
#section_simple .simple_list li {display: flex; align-items: center; gap: 18px; padding: 22px 24px; border-radius: var(--r-md); background: var(--bg);}
#section_simple .q_num {display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--main-color); font-size: 15px; font-weight: 800; color: #fff;}
#section_simple .simple_list p {font-size: 17px; font-weight: 600; line-height: 1.55; color: var(--ink); word-break: keep-all;}
#section_simple .simple_list p small {display: block; margin-top: 4px; font-size: 14px; font-weight: 500; color: var(--muted);}
#section_simple .simple_result {display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 28px; padding-top: 28px; border-top: 1px dashed #D1D6DB;}
#section_simple .simple_result p {font-size: 19px; font-weight: 700; line-height: 1.5; letter-spacing: -0.4px; color: var(--ink); word-break: keep-all;}
#section_simple .simple_result p b {color: var(--main-color);}
#section_simple .simple_result button {flex-shrink: 0; height: 58px; padding: 0 32px; border: 0; border-radius: 999px; background: var(--main-color); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; transition: background 0.15s, transform 0.1s;}
#section_simple .simple_result button:hover {background: var(--main-dark);}
#section_simple .simple_result button:active {transform: scale(0.98);}


#section_simple .notice {margin-top: 24px; font-size: 14px; line-height: 1.6; color: var(--muted); text-align: center; word-break: keep-all;}


/* 새로 넣은 섹션들 반응형 */
@media (max-width: 768px) {
  #section_point .point_list {grid-template-columns: minmax(0, 1fr); gap: 12px;}
  #section_simple .simple_result {flex-direction: column; align-items: stretch; text-align: center;}
}
@media (max-width: 550px) {
  #section_point .point_list li {padding: 24px 20px 28px; border-radius: var(--r-md);}
  #section_point .point_list li::after {right: 14px; bottom: -14px; font-size: 88px;}
  #section_point .point_list h3 {margin-top: 14px; font-size: 21px;}
  #section_point .point_list p {font-size: 15px;}

  #section_simple .simple_box {padding: 22px 16px; border-radius: 24px;}
  #section_simple .simple_list li {align-items: flex-start; gap: 12px; padding: 16px;}
  #section_simple .q_num {width: 34px; height: 34px; font-size: 13px;}
  #section_simple .simple_list p {font-size: 15px;}
  #section_simple .simple_list p small {font-size: 13px;}
  #section_simple .simple_result {gap: 16px; margin-top: 22px; padding-top: 22px;}
  #section_simple .simple_result p {font-size: 17px;}
  #section_simple .simple_result button {height: 54px;}

  #section_simple .notice {font-size: 13px;}
}
@media (hover: none) {
  #section_simple .simple_result button:hover {background: var(--main-color);}
}


/* ── section_company: 보험사 로고 — 두 줄이 반대로 흐른다 ── */
#section_company .company_marquee {display: flex; flex-direction: column; gap: 12px;}
#section_company .marquee_row {overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);}
#section_company .marquee_track {display: flex; width: max-content; animation: marquee 36s linear infinite;}
#section_company .marquee_row.reverse .marquee_track {animation-direction: reverse;}
/* hover시 멈춤 */
/* #section_company .company_marquee:hover .marquee_track {animation-play-state: paused;} */
@keyframes marquee {from {transform: translateX(0);} to {transform: translateX(-50%);}}

/* 같은 목록을 두 번 이어 붙여 끊김 없이 돈다 — 목록 오른쪽 여백 = 칸 사이 간격 */
#section_company .company_list {display: flex; gap: 12px; padding-right: 12px;}
#section_company .company_list li {display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 200px; height: 88px; padding: 0 24px; border-radius: var(--r-md); background: var(--bg);}
#section_company .company_list img {display: block; max-width: 140px; max-height: 40px; width: auto; height: auto; object-fit: contain;}

/* 안내 + 상담 버튼 */
#section_company .company_foot {display: flex; flex-direction: column; align-items: center; gap: 20px; margin-top: 40px; text-align: center;}
#section_company .company_foot p {font-size: 14px; line-height: 1.6; color: var(--muted); word-break: keep-all;}
#section_company .company_foot button {display: flex; align-items: center; gap: 8px; height: 60px; padding: 0 36px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font-size: 17px; font-weight: 700; cursor: pointer; transition: background 0.15s, transform 0.1s;}
#section_company .company_foot button:hover {background: var(--main-color);}
#section_company .company_foot button:active {transform: scale(0.98);}


/* ── section4: 가입 전 확인사항 ── */
#section4 .checklist {display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;}
#section4 .checklist li {display: flex; gap: 18px; padding: 30px 30px 32px; border-radius: var(--r-lg); background: #fff;}
#section4 .num {display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--main-soft); font-size: 15px; font-weight: 800; color: var(--main-color);}
#section4 h3 {margin: 9px 0 8px; font-size: 20px; font-weight: 800; letter-spacing: -0.5px; color: var(--ink); word-break: keep-all;}
#section4 .txt p {font-size: 15.5px; line-height: 1.7; color: var(--body); word-break: keep-all;}

/* 중간 CTA — 메인컬러 둥근 띠 */
#section4 .cta_box {display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: 48px; padding: 44px 52px; border-radius: var(--r-lg); background: var(--main-color);}
#section4 .cta_box p {font-size: 27px; font-weight: 800; line-height: 1.4; letter-spacing: -1px; color: #fff; word-break: keep-all;}
#section4 .cta_box button {flex-shrink: 0; height: 62px; padding: 0 40px; border: 0; border-radius: 999px; background: #fff; color: var(--main-color); font-size: 17px; font-weight: 800; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s;}
#section4 .cta_box button:hover {transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);}


/* ── section_process: 가로 타임라인 — 화면에 들어오면 선이 차오른다 ── */
#section_process .process_list {position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;}
#section_process .process_list::before,
#section_process .process_list::after {content: ''; position: absolute; top: 30px; left: 12.5%; right: 12.5%; height: 4px; border-radius: 999px;}
#section_process .process_list::before {background: var(--line);}
#section_process .process_list::after {background: var(--main-color); transform: scaleX(0); transform-origin: left; transition: transform 1.4s ease 0.3s;}
#section_process .process_list.is_in::after {transform: scaleX(1);}

#section_process .process_list li {position: relative; z-index: 1; text-align: center;}
#section_process .step {display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: 0 auto; border: 4px solid var(--line); border-radius: 50%; background: #fff; font-size: 22px; font-weight: 800; color: var(--muted); transition: border-color 0.3s, color 0.3s, background 0.3s;}
#section_process .process_list.is_in li .step {border-color: var(--main-color); color: var(--main-color);}
#section_process .process_list.is_in li:nth-child(1) .step {transition-delay: 0.3s;}
#section_process .process_list.is_in li:nth-child(2) .step {transition-delay: 0.75s;}
#section_process .process_list.is_in li:nth-child(3) .step {transition-delay: 1.2s;}
#section_process .process_list.is_in li:nth-child(4) .step {transition-delay: 1.65s;}
#section_process .process_list.is_in li:last-child .step {background: var(--main-color); color: #fff;}

#section_process .txt {margin-top: 24px; padding: 26px 22px 28px; border-radius: var(--r-md); background: var(--bg);}
#section_process h3 {margin-bottom: 8px; font-size: 20px; font-weight: 800; letter-spacing: -0.5px; color: var(--ink); word-break: keep-all;}
#section_process p {font-size: 15px; line-height: 1.65; color: var(--body); word-break: keep-all;}


/* ── 자주 묻는 질문 — 답변은 상담원 말풍선 ── */
#section_qna .qna_list {display: flex; flex-direction: column; gap: 12px; max-width: 880px; margin: 0 auto;}
#section_qna .qna_item {border-radius: var(--r-md); background: #fff;}
#section_qna .qna_question {display: flex; align-items: center; gap: 16px; width: 100%; padding: 24px 28px; border: 0; background: none; text-align: left; cursor: pointer;}
#section_qna .qna_num {display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--bg); font-size: 15px; font-weight: 800; color: var(--muted); transition: background 0.15s, color 0.15s;}
#section_qna .qna_text {flex: 1; font-size: 18px; font-weight: 700; line-height: 1.45; letter-spacing: -0.4px; color: var(--ink); word-break: keep-all;}
#section_qna .qna_arrow {position: relative; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--bg); transition: background 0.15s, transform 0.25s;}
#section_qna .qna_arrow::before {content: ''; position: absolute; top: 10px; left: 11px; width: 8px; height: 8px; border-right: 2px solid var(--body); border-bottom: 2px solid var(--body); transform: rotate(45deg);}
#section_qna .qna_question:hover .qna_num {background: var(--main-soft); color: var(--main-color);}

#section_qna .qna_answer {display: none; gap: 12px; padding: 0 28px 28px;}
#section_qna .qna_a {display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--main-color); font-size: 15px; font-weight: 800; color: #fff;}
#section_qna .qna_bubble {flex: 1; min-width: 0; padding: 18px 22px; border-radius: 4px 20px 20px 20px; background: var(--main-soft);}
#section_qna .qna_bubble p {font-size: 16px; line-height: 1.75; color: var(--ink); word-break: keep-all;}

#section_qna .qna_item.active .qna_num {background: var(--ink); color: #fff;}
#section_qna .qna_item.active .qna_arrow {background: var(--ink); transform: rotate(180deg);}
#section_qna .qna_item.active .qna_arrow::before {border-color: #fff;}
#section_qna .qna_item.active .qna_answer {display: flex; animation: qna_open 0.3s ease;}
@keyframes qna_open {from {opacity: 0; transform: translateY(-6px);} to {opacity: 1; transform: translateY(0);}}


/* ── 서브페이지로 가는 '자세히 보기' 링크 ── */
.more_link {display: inline-flex; align-items: center; gap: 6px; margin-top: 20px; font-size: 16px; font-weight: 700; color: var(--main-color); word-break: keep-all;}
.more_link::after,
#section4 .check_link::after,
#section_qna .qna_more::after {content: '›'; font-size: 1.3em; line-height: 1; transition: transform 0.15s;}
.more_link:hover::after,
#section4 .check_link:hover::after,
#section_qna .qna_more:hover::after {transform: translateX(3px);}
#section4 .check_link {display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; padding: 7px 14px; border-radius: 999px; background: var(--bg); font-size: 14px; font-weight: 700; color: var(--body); word-break: keep-all;}
#section_qna .qna_more {display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; font-size: 15px; font-weight: 700; color: var(--main-color);}


/* 섹션 아래 가운데 '자세히 보기' 링크 */
.sec_more {margin-top: 28px; text-align: center;}
.sec_more .more_link {margin-top: 0;}


/* ── section_guide: 간병보험 가이드 — 서브페이지로 가는 카드 링크 ── */
#section_guide .guide_list {display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;}
#section_guide .guide_card {display: flex; color: inherit; text-decoration: none; flex-direction: column; height: 100%; padding: 28px 26px 26px; border-radius: var(--r-lg); background: var(--bg); box-shadow: inset 0 0 0 2px transparent; transition: background 0.15s, box-shadow 0.15s, transform 0.2s;}
#section_guide .guide_card:hover {background: #fff; box-shadow: inset 0 0 0 2px var(--main-color); transform: translateY(-4px);}
#section_guide .guide_card:focus-visible {outline: 2px solid var(--main-color); outline-offset: 3px;}
#section_guide .guide_tag {align-self: flex-start; padding: 5px 11px; border-radius: 999px; background: #fff; font-size: 12px; font-weight: 700; color: var(--main-color);}
#section_guide .guide_card strong {display: block; margin: 16px 0 8px; font-size: 19px; font-weight: 800; line-height: 1.4; letter-spacing: -0.5px; color: var(--ink); word-break: keep-all;}
#section_guide .guide_card p {flex: 1; font-size: 15px; line-height: 1.65; color: var(--body); word-break: keep-all;}
#section_guide .guide_go {display: inline-flex; align-items: center; gap: 6px; margin-top: 20px; font-size: 15px; font-weight: 700; color: var(--main-color);}
#section_guide .guide_go::after {content: '→'; transition: transform 0.15s;}
#section_guide .guide_card:hover .guide_go::after {transform: translateX(4px);}

@media (max-width: 1150px) {
  #section_guide .guide_list {grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 550px) {
  #section_guide .guide_list {grid-template-columns: minmax(0, 1fr); gap: 10px;}
  #section_guide .guide_card {padding: 22px 20px; border-radius: var(--r-md);}
  #section_guide .guide_card strong {margin-top: 12px; font-size: 17px;}
  #section_guide .guide_card p {font-size: 14.5px;}
  #section_guide .guide_go {margin-top: 14px; font-size: 14px;}
}
@media (hover: none) {
  #section_guide .guide_card:hover {background: var(--bg); box-shadow: inset 0 0 0 2px transparent; transform: none;}
  #section_guide .guide_card:hover .guide_go::after {transform: none;}
}
@media (prefers-reduced-motion: reduce) {
  #section_guide .guide_card {transition: none;}
}


/* ── 스크롤 등장 효과 — index.php 스크립트가 .reveal 을 붙이고, 화면에 들어오면 .is_in ── */
.reveal {opacity: 0; transform: translateY(28px); transition: opacity 0.6s ease, transform 0.6s ease;}
.reveal.is_in {opacity: 1; transform: none;}


/* ══════════════════════════════════════════════════
   반응형
   ══════════════════════════════════════════════════ */

@media (max-width: 1300px) {
  .inner {width: 93%;}
}

@media (max-width: 1200px) {
  :root {--sec-pad: 104px; --aside-w: 400px;}
  #section1 .content_wrap {gap: 40px;}
  #section1 .hero_title {font-size: 44px;}
  #section1 .form_wrap {padding: 32px 28px 24px;}
}

/* 한 줄로 세운다 — 히어로 → 폼 → 지표 → 본문 */
@media (max-width: 1150px) {
  :root {--sec-pad: 92px;}
  #section1 > .inner,
  #section2 > .inner,
  #section3 > .inner, #section_point > .inner, #section_simple > .inner,
  #section_company > .inner,
  #section4 > .inner,
  #section_process > .inner,
  #section_qna > .inner, #section_guide > .inner {width: min(720px, calc(100% - 32px));}

  #section1 .content_wrap {grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 48px 0 56px;}
  /* 버튼으로 폼에 올 때 모바일 고정 헤더에 가리지 않게 */
  #section1 .form_wrap {scroll-margin-top: 84px;}

  #section2 .why_list {grid-template-columns: minmax(0, 1fr); gap: 12px;}
  #section2 .why_list li {display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 20px; padding: 28px;}
  #section2 .icon {grid-row: span 2; margin: 0;}

  #section3 .coverage_list {grid-template-columns: repeat(2, 1fr);}

  #section4 .checklist {grid-template-columns: minmax(0, 1fr);}
}

@media (max-width: 768px) {
  :root {--sec-pad: 80px;}
  #section1 .hero_title {font-size: 36px; letter-spacing: -1.4px;}
  #section1 .hero_note {font-size: 16px;}
  #section1 .hero_benefit {margin-top: 28px;}
  #section1 .hero_benefit li {font-size: 15px;}
  #section1 .hero_ctrl {margin-top: 28px;}
  #section1 .hero_stats li {flex-direction: column-reverse; align-items: flex-start; gap: 8px; padding: 20px;}
  #section1 .hero_stats strong {font-size: 28px;}
  #section1 .hero_stats span {font-size: 14px;}

  .title_wrap {margin-bottom: 40px;}
  .title_wrap h2 {font-size: 30px; letter-spacing: -1px;}
  .title_wrap p {font-size: 16px;}

  #section4 .cta_box {flex-direction: column; align-items: stretch; padding: 36px 28px;}
  #section4 .cta_box p {font-size: 23px; text-align: center;}

  /* 진행 순서 — 세로 타임라인 */
  #section_process .process_list {grid-template-columns: minmax(0, 1fr); gap: 16px;}
  #section_process .process_list::before,
  #section_process .process_list::after {top: 32px; bottom: 32px; left: 30px; right: auto; width: 4px; height: auto;}
  #section_process .process_list::after {transform: scaleY(0); transform-origin: top;}
  #section_process .process_list.is_in::after {transform: scaleY(1);}
  #section_process .process_list li {display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; column-gap: 16px; text-align: left;}
  #section_process .step {margin: 0;}
  #section_process .txt {margin-top: 0; padding: 20px 22px;}
  #section_process h3 {font-size: 18px;}

  #section_company .company_list li {width: 160px; height: 76px; padding: 0 18px;}
  #section_company .company_list img {max-width: 116px; max-height: 34px;}
}

@media (max-width: 550px) {
  :root {--sec-pad: 64px;}
  #section1 > .inner,
  #section2 > .inner,
  #section3 > .inner, #section_point > .inner, #section_simple > .inner,
  #section_company > .inner,
  #section4 > .inner,
  #section_process > .inner,
  #section_qna > .inner, #section_guide > .inner {width: calc(100% - 32px);}

  #section1 .content_wrap {gap: 24px; padding: 32px 0 40px;}
  #section1 .hero_label {font-size: 13px;}
  #section1 .hero_title {margin-top: 16px; font-size: 30px; letter-spacing: -1px;}
  #section1 .hero_title em {padding: 0 5px; border-radius: 8px;}
  #section1 .hero_note {font-size: 15px;}
  #section1 .hero_benefit {gap: 8px;}
  #section1 .hero_benefit li {padding: 10px 14px 10px 10px; font-size: 14px;}
  #section1 .hero_benefit li::before {width: 20px; height: 20px; background-size: 11px;}

  #section1 .form_wrap {padding: 26px 20px 20px; border-radius: 24px;}
  .form_wrap h2 {font-size: 22px;}
  .form_wrap .form_list {gap: 16px; margin-top: 22px;}
  .form_wrap input[type='text'], .form_wrap .phone_select, .form_wrap .gender_wrap label {height: 54px; font-size: 16px;}
  .form_wrap .phone_input_wrap {grid-template-columns: 96px minmax(0, 1fr);}
  .form_wrap .submit_btn {height: 56px; margin-top: 22px; font-size: 17px;}

  #section1 .hero_stats {gap: 8px;}
  #section1 .hero_stats li {align-items: center; padding: 16px 8px; border-radius: 16px; text-align: center;}
  #section1 .hero_stats strong {font-size: 22px;}
  #section1 .hero_stats strong small {font-size: 14px;}
  #section1 .hero_stats span {font-size: 12.5px; word-break: keep-all;}

  .title_wrap {margin-bottom: 32px;}
  .title_wrap .section_label {font-size: 12px;}
  .title_wrap h2 {margin-top: 14px; font-size: 26px; letter-spacing: -0.8px;}
  .title_wrap p {margin-top: 12px; font-size: 15px;}
  .title_wrap h2 br {display: none;}

  #section2 .why_list li {grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; padding: 22px 20px; border-radius: var(--r-md);}
  #section2 .icon {width: 52px; height: 52px; border-radius: 16px; font-size: 26px;}
  #section2 h3 {font-size: 18px;}
  #section2 p {font-size: 15px;}

  #section3 .coverage_list {grid-template-columns: minmax(0, 1fr); gap: 10px;}
  #section3 .coverage_list li {padding: 24px 22px; border-radius: var(--r-md);}
  #section3 .coverage_list li:first-child {grid-column: auto; min-height: 0;}
  #section3 .coverage_list li:first-child h3 {font-size: 24px;}
  #section3 .tag {margin-bottom: 12px;}
  #section3 h3 {font-size: 18px;}

  #section_company .company_list {gap: 8px; padding-right: 8px;}
  #section_company .company_marquee {gap: 8px;}
  #section_company .company_list li {width: 132px; height: 64px; padding: 0 14px; border-radius: 16px;}
  #section_company .company_list img {max-width: 100px; max-height: 28px;}
  #section_company .company_foot {margin-top: 28px;}
  #section_company .company_foot p {font-size: 13px;}
  #section_company .company_foot button {width: 100%; justify-content: center; height: 56px; font-size: 16px;}

  #section4 .checklist {gap: 10px;}
  #section4 .checklist li {gap: 14px; padding: 22px 20px; border-radius: var(--r-md);}
  #section4 .num {width: 36px; height: 36px; font-size: 13px;}
  #section4 h3 {margin-top: 6px; font-size: 18px;}
  #section4 .txt p {font-size: 14.5px;}
  #section4 .cta_box {margin-top: 32px; padding: 30px 20px; border-radius: 24px;}
  #section4 .cta_box p {font-size: 20px;}
  #section4 .cta_box button {height: 56px;}

  #section_process .process_list::before,
  #section_process .process_list::after {left: 24px;}
  #section_process .process_list li {grid-template-columns: 52px minmax(0, 1fr); column-gap: 12px;}
  #section_process .step {width: 52px; height: 52px; border-width: 3px; font-size: 18px;}
  #section_process .txt {padding: 18px;}
  #section_process p {font-size: 14.5px;}

  #section_qna .qna_question {gap: 12px; padding: 20px 18px;}
  #section_qna .qna_num, #section_qna .qna_a {width: 30px; height: 30px; font-size: 13px;}
  #section_qna .qna_text {font-size: 16px;}
  #section_qna .qna_arrow {width: 28px; height: 28px;}
  #section_qna .qna_arrow::before {top: 8px; left: 9px; width: 7px; height: 7px;}
  #section_qna .qna_answer {gap: 10px; padding: 0 18px 20px;}
  #section_qna .qna_bubble {padding: 14px 16px;}
  #section_qna .qna_bubble p {font-size: 15px;}
  .more_link {font-size: 15px;}
}

@media (max-width: 360px) {
  .form_wrap .field_row {grid-template-columns: minmax(0, 1fr); gap: 16px;}
}

@media (hover: none) {
  .form_wrap .submit_btn:hover {background: var(--main-color);}
  #section3 .coverage_list li:hover {transform: none; box-shadow: none;}
  #section_company .company_foot button:hover {background: var(--ink);}
  #section4 .cta_box button:hover {transform: none; box-shadow: none;}
  #section_qna .qna_question:hover .qna_num {background: var(--bg); color: var(--muted);}
  #section_qna .qna_item.active .qna_question:hover .qna_num {background: var(--ink); color: #fff;}
  .more_link:hover::after, #section4 .check_link:hover::after, #section_qna .qna_more:hover::after {transform: none;}
}

@media (prefers-reduced-motion: reduce) {
  #section1 .hero_slide, #section1 .hero_slide.active, #section1 .hero_dot {transition: none; transform: none;}
  #section_qna .qna_item.active .qna_answer {animation: none;}
  .form_wrap .submit_btn {transition: none;}
  #section3 .coverage_list li {transition: none;}

  /* 로고는 흐르지 않고 한 번만 나란히 보인다 */
  #section_company .marquee_track {width: auto; animation: none;}
  #section_company .marquee_row {-webkit-mask-image: none; mask-image: none;}
  #section_company .marquee_row.reverse,
  #section_company .company_list[aria-hidden="true"] {display: none;}
  #section_company .company_list {flex-wrap: wrap; justify-content: center; padding-right: 0;}

  /* 진행 순서는 처음부터 채워진 상태로 */
  #section_process .process_list::after {transform: none; transition: none;}
  #section_process .step {border-color: var(--main-color); color: var(--main-color); transition: none;}
  #section_process .process_list li:last-child .step {background: var(--main-color); color: #fff;}

  .reveal {opacity: 1; transform: none; transition: none;}
}


/* ══════════════════════════════════════════════════
   아래는 기존과 같은 공용 영역 — 하단 고지, 푸터, 모바일 헤더, 신청 유도 버튼, 약관 페이지
   ══════════════════════════════════════════════════ */

.bottom_wrap { padding:40px 0; background:#f7f7f7; border-top:1px solid #e5e5e5; }
.bottom_wrap .inner { max-width:1200px; margin:0 auto; }
.bottom_wrap .inner h3 { margin:0 0 20px; font-size:20px; font-weight:700; color:#333; }
.bottom_wrap .inner ul { margin:0; padding:0; list-style:none; }
.bottom_wrap .inner ul li {font-size:15px; line-height:1.8; color:#555; word-break:keep-all; }
.bottom_wrap .inner ul li:last-child { margin-bottom:0; }
.bottom_wrap .inner .compliance_info { margin-top:25px; padding-top:20px; border-top:1px solid #ddd; }
.bottom_wrap .inner .compliance_info p { margin:6px 0; font-size:14px; line-height:1.7; color:#666; }
.bottom_wrap .inner .compliance_info p strong { font-weight:700; color:#444; }

/* ── 푸터 ── */
.footer {padding: 54px 0 120px; background: #252525; color: rgba(255, 255, 255, 0.68);}
.footer_main {display: flex; align-items: flex-start; justify-content: space-between; gap: 40px;}
.footer_info {display: flex; flex-wrap: wrap; align-items: center; gap: 7px 18px; max-width: 760px; font-style: normal; font-size: 14px; line-height: 1.7;}
.footer_info strong {width: 100%; margin-bottom: 2px; color: #fff; font-size: 17px; font-weight: 700; letter-spacing: -0.3px;}
.footer_info span {position: relative;}
.footer_info span + span::before {content: ''; position: absolute; left: -10px; top: 50%; width: 3px; height: 3px; transform: translateY(-50%); border-radius: 50%; background: rgba(255, 255, 255, 0.35);}
.footer_info .addr {flex-basis: 100%;}
.footer_info .addr::before {display: none;}
.footer_links {display: flex; align-items: center; gap: 22px; flex-shrink: 0;}
.footer_links a {position: relative; font-size: 14px; font-weight: 600; color: #fff; transition: opacity 0.15s ease;}
.footer_links a:hover {opacity: 0.65;}
.footer_links a + a::before {content: ''; position: absolute; left: -11px; top: 50%; width: 1px; height: 12px; transform: translateY(-50%); background: rgba(255, 255, 255, 0.28);}
.footer .copyright {margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 13px; color: rgba(255, 255, 255, 0.45);}


/* ── 신청 유도 플로팅 버튼 (PC·모바일 공통) ── */
.to_top {
  position: fixed; left: 50%; bottom: 24px; z-index: 40;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  height: 60px; padding: 0 30px;
  border: 0; border-radius: 999px;
  background: var(--main-color); color: #fff;
  font-size: 17px; font-weight: 700; letter-spacing: -0.3px; white-space: nowrap;
  box-shadow: 0 12px 32px color-mix(in srgb, var(--main-color) 35%, transparent);
  cursor: pointer;
  opacity: 0; visibility: hidden;
  transform: translate(-50%, 24px);
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.3s ease, background 0.15s;
}
.to_top.show {opacity: 1; visibility: visible; transform: translate(-50%, 0);}
.to_top:hover {background: var(--main-dark);}
.to_top svg {width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;}

/* 어두운 푸터 위에 올라오면 색을 뒤집는다 */
.to_top.on_dark {background: #fff; color: var(--main-color); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);}

@media (max-width: 550px) {
  .to_top {left: 16px; right: 16px; bottom: 12px; height: 56px; transform: translateY(24px);}
  .to_top.show {transform: translateY(0);}
}
@media (hover: none) {
  .to_top:hover {background: var(--main-color);}
  .to_top.on_dark:hover {background: #fff;}
}
@media (prefers-reduced-motion: reduce) {
  .to_top {transition: none;}
}

@media (max-width: 768px) {
  .m_header_bar .logo {width: 120px;}
  .m_header_bar .m_header_date {font-size: 14px;}

  .footer {padding: 38px 0 100px;}
  .footer_main {flex-direction: column; gap: 22px;}
  .footer_info {gap: 5px 16px; margin-top: 20px; font-size: 13.5px;}
  .footer .copyright {margin-top: 18px; font-size: 12.5px;}

  .bottom_wrap {padding: 32px 0;}
  .bottom_wrap .inner h3 {margin-bottom: 14px; font-size: 17px;}
  .bottom_wrap .inner ul li {font-size: 13.5px; line-height: 1.75;}
  .bottom_wrap .inner .compliance_info p {font-size: 13px;}
}


/* ══════ 약관 문서 페이지 (개인정보처리방침 · 이용약관) ══════ */
.doc_page {padding: 70px 0 90px;}
.doc_page .inner {max-width: 860px;}

.doc_back {display: inline-block; margin-bottom: 20px; color: #888; font-size: 14px; transition: color 0.15s ease;}
.doc_back:hover {color: var(--main-color);}

.doc_page h1 {padding-bottom: 24px; border-bottom: 2px solid #222; font-size: 32px; font-weight: 800; letter-spacing: -0.5px;}

.doc_body {padding-top: 34px; color: #555; font-size: 16px; line-height: 1.8; word-break: keep-all;}
.doc_body h3 {margin: 40px 0 14px; color: #222; font-size: 19px; font-weight: 700;}
.doc_body h3:first-child {margin-top: 0;}
.doc_body p {margin-bottom: 14px;}
.doc_body a {color: var(--main-color); font-weight: 600; text-decoration: underline;}

.doc_body ul {margin: 0 0 14px; padding-left: 4px; list-style: none;}
.doc_body ul li {position: relative; padding-left: 15px; margin-bottom: 7px;}
.doc_body ul li::before {content: ''; position: absolute; left: 0; top: 12px; width: 4px; height: 4px; border-radius: 50%; background: #bbb;}

.doc_body table {width: 100%; margin: 0 0 18px; border-top: 2px solid var(--main-color); border-collapse: collapse;}
.doc_body table th,
.doc_body table td {padding: 14px 16px; border-bottom: 1px solid #e8ecf1; font-size: 15px; line-height: 1.7; text-align: left; vertical-align: top;}
.doc_body table th {width: 150px; background: #f7f9fc; color: #333; font-weight: 700;}

.doc_body .note {padding: 16px 18px; border-radius: 12px; background: #f5f7fa; color: #666; font-size: 14.5px; line-height: 1.75;}

@media (max-width: 768px) {
  .doc_page {padding: 40px 0 70px;}
  .doc_page h1 {padding-bottom: 18px; font-size: 24px;}
  .doc_body {padding-top: 26px; font-size: 15px;}
  .doc_body h3 {margin: 32px 0 12px; font-size: 17px;}

  .doc_body table,
  .doc_body table tbody,
  .doc_body table tr,
  .doc_body table th,
  .doc_body table td {display: block; width: 100%;}
  .doc_body table tr:first-child {display: none;}
  .doc_body table tr {padding: 13px 0; border-bottom: 1px solid #e8ecf1;}
  .doc_body table tr:last-child {border-bottom: 0;}
  .doc_body table th,
  .doc_body table td {padding: 0; border: 0;}
  .doc_body table th {margin-bottom: 4px; background: none; color: #888; font-size: 13.5px; font-weight: 600;}
  .doc_body table td {font-size: 14.5px; color: #555;}
  .doc_body .note {font-size: 13.5px;}
}