@charset "utf-8";

/*
 * 추모기부 캠페인 스타일 (PC)
 *
 * 작성자  김현호 (에젤,데브현)
 * 작성일  2026.08.09
 */

/*= FONTS =*/
:root {
  --fallback:
    -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI',
    'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol', sans-serif;

  --pretendard: 'Pretendard', var(--fallback);
  --maruburi: 'MaruBuri', var(--fallback);
}

@font-face {
  font-family: 'MaruBuri';
  font-weight: 200;
  font-style: normal;
  font-display: swap;
  src: url(../fonts/MaruBuri/MaruBuri-ExtraLight.woff2) format('woff2');
}

@font-face {
  font-family: 'MaruBuri';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url(../fonts/MaruBuri/MaruBuri-Light.woff2) format('woff2');
}

@font-face {
  font-family: 'MaruBuri';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url(../fonts/MaruBuri/MaruBuri-Regular.woff2) format('woff2');
}

@font-face {
  font-family: 'MaruBuri';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url(../fonts/MaruBuri/MaruBuri-SemiBold.woff2) format('woff2');
}

@font-face {
  font-family: 'MaruBuri';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url(../fonts/MaruBuri/MaruBuri-Bold.woff2) format('woff2');
}

@font-face {
  font-family: 'Pretendard';
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: url(../fonts/Pretendard/PretendardVariable.woff2) format('woff2-variations');
}

@font-face {
  font-family: 'SpoqaHanSansNeo';
  font-weight: 300;
  font-style: normal;
  src: url(/assets/common/fonts/spoqahan-sans-neo/SpoqaHanSansNeoL.woff2) format('woff2');
}

@font-face {
  font-family: 'SpoqaHanSansNeo';
  font-weight: 400;
  font-style: normal;
  src: url(/assets/common/fonts/spoqahan-sans-neo/SpoqaHanSansNeoR.woff2) format('woff2');
}

@font-face {
  font-family: 'SpoqaHanSansNeo';
  font-weight: 500;
  font-style: normal;
  src: url(/assets/common/fonts/spoqahan-sans-neo/SpoqaHanSansNeoM.woff2) format('woff2');
}

@font-face {
  font-family: 'SpoqaHanSansNeo';
  font-weight: 700;
  font-style: normal;
  src: url(/assets/common/fonts/spoqahan-sans-neo/SpoqaHanSansNeoB.woff2) format('woff2');
}

@font-face {
  font-family: 'Nanum Barun Gothic';
  font-weight: 400;
  font-style: normal;
  src: url(/assets/common/fonts/nanum-barun-gothic/NanumBarunGothic.woff2) format('woff2');
}

@font-face {
  font-family: 'Nanum Barun Gothic';
  font-weight: 700;
  font-style: normal;
  src: url(/assets/common/fonts/nanum-barun-gothic/NanumBarunGothicBold.woff2) format('woff2');
}

@font-face {
  font-family: 'NanumSquare';
  font-weight: 400;
  font-style: normal;
  src: url(/assets/common/fonts/nanum-square/NanumSquareR.woff) format('woff');
}

/*= RESET =*/
* {
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}

body {
  overflow-x: hidden;
  zoom: 1;
}

ul,
ol {
  list-style-type: none;
}

img,
fieldset {
  border: none;
}

body,
input,
textarea,
select,
button,
table {
  font-size: 13px;
  color: #666;
  font-family: 'SpoqaHanSansNeo', 'Apple SD Gothic Neo', Helvetica, sans-serif, Arial;
}

a {
  text-decoration: none;
  color: #666;
}

a:link,
a:visited {
  text-decoration: none;
  color: #666;
  /*outline: none!important;*/
}

a:hover,
a:active {
  text-decoration: none;
  color: #666;
  /*outline: none!important;*/
}

input {
  border: 0;
}

select {
  vertical-align: top;
  height: 24px;
  border: 1px solid #c5c5c5;
}

iframe {
  border: 0;
  margin: 0;
  padding: 0;
}

button {
  overflow: visible;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
}

/*////////////header////////////*/
.emergency_relief_cnts_top {
  background: #fff;
  border-bottom: 1px solid #dadada;
  height: 30px;
  margin: 0 auto;
  position: relative;
  width: 100%;
  z-index: 9999;
  font-size: 13px;
  line-height: normal;
  color: #666;
}

.emergency_relief_cnts_top a {
  display: inline;
}

.emergency_relief_cnts_top img {
  display: inline;
  vertical-align: baseline;
}

.emergency_relief_cnts_top ul.util_left {
  width: 420px;
  height: 30px;
  position: absolute;
  left: 47.75%;
  margin-left: -470px;
  top: 0px;
}

.emergency_relief_cnts_top ul.util_left li {
  float: left;
}

.emergency_relief_cnts_top ul.util_right {
  height: 18px;
  position: absolute;
  right: 50%;
  margin-right: -500px;
  top: 6px;
  text-align: right;
}

.emergency_relief_cnts_top ul.util_right li {
  float: left;
  margin: 0 5px;
  font-family: 'NanumGothic', dotum;
  font-size: 11px;
  letter-spacing: -1px;
  padding-top: 3px;
  line-height: 14px;
  color: #ccc;
}
.emergency_relief_cnts_top ul.util_right li a {
  color: #7f7f7f;
  font-size: 11px;
  line-height: 14px;
}

.emergency_relief_cnts_top ul.util_right li a img {
  margin-top: -1px;
}

.emergency_relief_cnts_top ul.util_right .btn {
  padding: 0;
}

.emergency_relief_cnts_top ul.util_right .line {
  background: url(../images/common/util_line.gif) no-repeat 0 4px;
  width: 1px;
  height: 14px;
}

.emergency_relief_cnts_top ul.util_right a.mypage {
  color: #bb8283;
  line-height: 14px;
}

.emergency_relief_cnts_top ul.util_right .save_user {
  color: #000;
  font-size: 12px;
  line-height: 19px;
}

.emergency_relief_cnts_top .CampaignList {
  width: 240px;
  background: #fff;
  border: 2px solid #666;
  position: absolute;
  top: 30px;
  left: 47.75%;
  margin-left: -274px;
  z-index: 9999;
}

.emergency_relief_cnts_top .CampaignList ul {
  padding: 6px 14px;
}

.emergency_relief_cnts_top .CampaignList ul li {
  height: 39px;
  padding-top: 7px;
  margin-bottom: 7px;
  border-top: 1px dashed #ddd;
  font-size: 13px;
}

.emergency_relief_cnts_top .CampaignList ul li:first-child {
  border: none;
}

.emergency_relief_cnts_top .CampaignList ul li a {
  color: #666;
}

/*sns_area*/
.sns_area {
  padding: 47px 0 62px;
  border-top: 3px solid #f8f6f3;
  font-size: 13px;
  line-height: normal;
}

.sns_area h3 {
  display: inline-block;
  font-size: 16px;
  color: #4e4e4e;
  vertical-align: middle;
  margin-right: 8px;
  margin-top: -1px;
}

.sns_area .div_inner {
  margin: 0 auto;
  height: 100%;
  text-align: center;
}

.sns_area > .div_inner > a {
  margin-left: 14px;
  vertical-align: middle;
  display: inline-block;
}

.sns_area > .div_inner > a > img {
  width: 54px;
}

/*footer*/
#footer {
  background: #f1f1f1;
  border-top: 1px solid #e5e5e5;
  height: auto;
  line-height: normal;
}
#footer .inner {
  margin: auto;
  width: 1050px;
  position: relative;
  min-height: 72px;
  padding-top: 22px;
}
#footer a,
#footer span {
  font-family: 'Nanum Barun Gothic';
  letter-spacing: -0.05em;
}
.footer-top {
  padding-top: 20px;
}
.footer-top:after {
  content: '';
  display: block;
  clear: both;
}
.sns-link-wrap {
  float: left;
  margin-top: 2px;
}
.sns-link-wrap:after {
  content: '';
  display: block;
  clear: both;
}
.sns-link-wrap a {
  float: left;
  margin-right: 20px;
  display: flex;
}
.sns-link-wrap a:last-child {
  margin-right: 0;
}
.bi-wrap {
  float: right;
  display: flex;
}
.footer-menu-list {
  margin-top: 22px;
}
.footer-menu-list ul li {
  float: left;
  position: relative;
  margin-right: 15px;
  padding-right: 17px;
}
.footer-menu-list ul:after {
  content: '';
  display: block;
  clear: both;
}
.footer-menu-list ul li:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 1px;
  height: 13px;
  background: #e5e5e5;
}
.footer-menu-list ul li:last-child {
  margin-right: 0;
  padding-right: 0;
}
.footer-menu-list ul li:last-child:after {
  content: none;
}
.footer-menu-list ul li a {
  font-size: 15px;
  color: #555555;
  font-weight: 700;
}
.footer-info-list {
  margin-top: 14px;
}
.footer-info-list ul:after {
  content: '';
  display: block;
  clear: both;
}
.footer-info-list ul li {
  float: left;
  position: relative;
  margin-right: 8px;
  padding-right: 8px;
}
.footer-info-list ul li:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 1px;
  height: 13px;
  background: #e5e5e5;
}
.footer-info-list ul li:last-child {
  margin-right: 0;
  padding-right: 0;
}
.footer-info-list ul li:last-child:after {
  content: none;
}
.footer-info-list ul li a {
  font-size: 13px;
  color: #777777;
  letter-spacing: -0.05em;
}
.copyright {
  margin-top: 6px;
  padding-bottom: 22px;
  font-family: 'Nanum Barun Gothic';
}
.copyright span {
  font-size: 13px;
  color: #999999;
  letter-spacing: -0.03em;
}

/* 이메일 집단수집거부 */
.email-popup-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100000;
  font-size: 13px;
  line-height: normal;
  color: #666;
}
.popup-bg {
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.65);
  z-index: 999999;
}
.email-popup {
  width: 590px;
  height: 529px;
  background-color: #fff;
  margin: auto;
  position: absolute;
  z-index: 9999999;
  text-align: center;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.email-popup div:nth-child(1) {
  text-align: left;
  position: relative;
  height: 74px;
  background: url(../images/common/b-copy.png);
  background-position: center top;
  background-repeat: no-repeat;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.email-popup div:nth-child(1) img {
  margin-top: 17px;
  margin-left: 15px;
  position: relative;
  display: inline-block;
  left: 15px;
}
.email-popup div:nth-child(1) button {
  margin-top: 12px;
  float: right;
  margin-right: 35px;
  cursor: pointer;
}
.email-popup div:nth-child(1) button > img {
  right: 35px;
  margin-top: 14px;
  margin-right: 15px;
}
.email-popup div:nth-child(2) {
  position: relative;
  margin-bottom: 0px;
}
.email-popup div:nth-child(2) h2 {
  margin-top: 73px;
  margin-bottom: 19px;
  font-size: 29px;
  font-family: 'NanumSquare', 'Apple SD Gothic Neo', Helvetica, sans-serif, Arial;
  color: #000000;
}
.email-popup div:nth-child(2) h3 {
  font-size: 16px;
  color: #333333;
  font-family: 'Nanum Barun Gothic', sans-serif;
  padding-bottom: 19px;
  line-height: 1.5;
}
.email-popup div:nth-child(2) p {
  margin-top: 0px;
  margin-bottom: 0px;
  line-height: 1.5;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  padding-bottom: 77px;
  font-family: 'Nanum Barun Gothic', sans-serif;
  font-size: 15px;
  color: #555555;
}
.email-popup div:nth-child(2) p strong {
  font-weight: bold;
}
.email-popup div:nth-child(3) {
  position: relative;
  height: 115px;
}
.email-popup .close-btn {
  overflow: auto;
  margin: auto;
  width: 146px;
  height: 55px;
  background-color: #555555;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  color: white;
  font-family: 'Nanum Barun Gothic', sans-serif;
  font-size: 16px;
  cursor: pointer;
}

:is(img, svg, video, canvas, audio, iframe, embed, object):not(
    :where(#Header, #Footer, #footer, .left-menu, .right-menu) *
  ) {
  vertical-align: middle;
  display: block;
}

:is(img, video):not(:where(#Header, #Footer, #footer, .left-menu, .right-menu) *) {
  max-width: 100%;
  height: auto;
}

:is(h1, h2, h3, h4, h5, h6):not(
    :where(#Header, #Footer, #footer, .left-menu, .right-menu) *
  ) {
  font-size: inherit;
  font-weight: inherit;
}

:is(button, input, select, optgroup, textarea):not(
    :where(#Header, #Footer, #footer, .left-menu, .right-menu) *
  ) {
  color: inherit;
  opacity: 1;
  background-color: transparent;
  border-radius: 0;
}


/*= CONTENT =*/
#wrap {
  min-width: 1250px;
  width: 100%;
  margin: 0 auto;
}

#memorial {
  max-width: 1920px;
  margin: 0 auto;
  background: #c7ad8a url(../images/main/main-bg.png) repeat;
}

#memorial,
.modal {
  font-family: var(--pretendard);
}

.container {
  width: 1250px;
  margin: 0 auto;
}

.main-visual {
  background: url(../images/main/visual-bg.png) no-repeat center top;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.main-visual .container {
  position: relative;
}

.main-visual .intro {
  --reveal: 0.75s; /* 문구·버튼 페이드 시간 */
  --cta-delay: 0.26s; /* 버튼이 문구를 뒤따르는 간격 */
  --arrow-lag: 0.3s; /* 버튼이 뜨기 시작한 뒤 화살표가 그어지기까지 */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* 페이드 가속 곡선 */
  padding-top: 300px;
  padding-bottom: 218px;
}

.main-visual .intro .desc,
.main-visual .intro .action {
  animation: intro_reveal var(--reveal) var(--ease) both paused;
}

.main-visual .intro .action {
  animation-delay: var(--cta-delay);
}

.main-visual .intro .action .button .line::before,
.main-visual .intro .action .button .line::after {
  animation-delay: calc(var(--cta-delay) + var(--arrow-lag));
  animation-play-state: paused;
}

.main-visual .intro.animation .desc,
.main-visual .intro.animation .action,
.main-visual .intro.animation .action .button .line::before,
.main-visual .intro.animation .action .button .line::after {
  animation-play-state: running;
}

.main-visual .intro .texture {
  --play: paused; /* 붓글씨·나비의 재생 여부 */
  --cycle: 3s; /* 텍스트 속도 조정 */
  --ink-end: 0.748; /* 마지막 획이 완성되는 시점 — --cycle 대비 비율 */
  --seq-gap: -0.15s; /* 획 완성 대비 문구 등장 시점 — 음수면 앞당김 */
  --bf-gap: -0.26s; /* 획 완성 대비 나비 등장 시점 */
  --bf-fly: 1.35s; /* 나비가 내려앉기까지 */
  --bf-wing: 1.95s; /* 날갯짓이 잦아들기까지 */
  --bf-shade: 0.3; /* 벽에 지는 나비 그림자의 짙기 */
  --bf-blur: 8px; /* 나비 그림자의 번짐 */
  --bf-start: calc(var(--cycle) * var(--ink-end) + var(--bf-gap)); /* 나비 등장 시각 */
  --bf-route: 10s; /* 스크롤 진행도에 감기는 비행 전체 길이 */
  --bf-loop: 1.1s; /* 비행 중 날갯짓 한 번 */
  --bf-rest: 0.8s; /* 내려앉은 자리에서 날갯짓이 잦아들기까지 */
  --bf-idle: 6s; /* 내려앉은 뒤 저절로 날갯짓하는 주기 */
  width: 100%;
  max-width: 942px;
  margin: 0 auto;
  aspect-ratio: 942/213;
  position: relative;
}

.main-visual .intro.ready .texture {
  --play: running;
}

.main-visual .intro .texture .calli {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.main-visual .intro .texture .mult {
  mix-blend-mode: multiply;
}

.main-visual .intro .texture .scr {
  mix-blend-mode: screen;
}

.main-visual .intro .texture .path {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100 300;
  stroke-dashoffset: 100.6;
  animation-duration: var(--cycle);
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  animation-play-state: var(--play);
}

.main-visual .intro .texture .butterfly {
  position: absolute;
  left: 91.7%;
  top: -37.4%;
  width: 21%;
  aspect-ratio: 207/220;
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: bf_in 0.5s ease-out var(--bf-start) forwards;
  animation-play-state: var(--play);
}

.main-visual .intro .texture .butterfly .route-x,
.main-visual .intro .texture .butterfly .route-y,
.main-visual .intro .texture .butterfly .route-z,
.main-visual .intro .texture .butterfly .route-tilt,
.main-visual .intro .texture .butterfly .fly-x,
.main-visual .intro .texture .butterfly .fly-y,
.main-visual .intro .texture .butterfly .tilt,
.main-visual .intro .texture .butterfly .lean {
  width: 100%;
  height: 100%;
  will-change: transform;
}

.main-visual .intro .texture .butterfly .route-x {
  animation: bf_route_x var(--bf-route) linear both paused;
}

.main-visual .intro .texture .butterfly .route-y {
  animation: bf_route_y var(--bf-route) linear both paused;
}

.main-visual .intro .texture .butterfly .route-z {
  animation: bf_route_z var(--bf-route) linear both paused;
}

.main-visual .intro .texture .butterfly .route-tilt {
  animation: bf_route_tilt var(--bf-route) linear both paused;
}

.main-visual .intro .texture .butterfly .fly-x {
  animation: bf_x var(--bf-fly) cubic-bezier(0.45, 0, 0.2, 1) var(--bf-start) both;
  animation-play-state: var(--play);
}

.main-visual .intro .texture .butterfly .fly-y {
  animation: bf_y var(--bf-fly) cubic-bezier(0.15, 0.6, 0.3, 1) var(--bf-start) both;
  animation-play-state: var(--play);
}

.main-visual .intro .texture .butterfly .tilt {
  perspective: 600px;
  perspective-origin: 61.8% 39.9%;
  animation: bf_tilt var(--bf-fly) cubic-bezier(0.25, 0.7, 0.3, 1) var(--bf-start) both;
  animation-play-state: var(--play);
}

.main-visual .intro .texture .butterfly .lean {
  transform-style: preserve-3d;
  animation: bf_route_lean var(--bf-route) linear both paused;
}

.main-visual .intro .texture .butterfly .shade {
  position: absolute;
  inset: 0;
  filter: brightness(0) blur(var(--bf-blur));
  opacity: var(--bf-shade);
  transform: translate(9%, 13%) scale(0.94);
  animation: bf_shade var(--bf-fly) cubic-bezier(0.25, 0.7, 0.3, 1) var(--bf-start) both;
  animation-play-state: var(--play);
}

.main-visual .intro .texture .butterfly .frame {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.main-visual .intro .texture .butterfly .wing {
  position: absolute;
  inset: 0;
  background: url(../images/main/butterfly.png) no-repeat center / 100% 100%;
  transform-origin: 61.8% 39.9%;
  will-change: transform;
}

.main-visual .intro .texture .butterfly .wing.left {
  clip-path: polygon(-20% 76.4%, 120% 15.6%, 120% -20%, -20% -20%);
  animation: bf_flap_left var(--bf-wing) ease-in-out var(--bf-start) both;
  animation-play-state: var(--play);
}

.main-visual .intro .texture .butterfly .wing.right {
  clip-path: polygon(-20% 74.4%, 120% 13.6%, 120% 120%, -20% 120%);
  animation: bf_flap_right var(--bf-wing) ease-in-out var(--bf-start) both;
  animation-play-state: var(--play);
}

.main-visual .intro .texture .butterfly.flying .wing.left {
  animation: bf_wing_left var(--bf-loop) ease-in-out infinite;
}

.main-visual .intro .texture .butterfly.flying .wing.right {
  animation: bf_wing_right var(--bf-loop) ease-in-out infinite;
}

.main-visual .intro .texture .butterfly.perched .wing.left {
  animation:
    bf_rest_left var(--bf-rest) ease-out both,
    bf_idle_left var(--bf-idle) ease-in-out var(--bf-rest) infinite;
}

.main-visual .intro .texture .butterfly.perched .wing.right {
  animation:
    bf_rest_right var(--bf-rest) ease-out both,
    bf_idle_right var(--bf-idle) ease-in-out var(--bf-rest) infinite;
}

.main-visual .intro .desc {
  font-family: var(--maruburi);
  text-align: center;
  font-size: 34px;
  margin-top: 40px;
  line-height: 60px;
  color: #412e21;
  opacity: 0.8;
  transform: rotate(0.03deg);
}

.main-visual .intro .action {
  margin-top: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-visual .intro .action .button {
  font-family: var(--maruburi);
  border-radius: 40px 10px 40px 10px;
  width: 406px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0;
  background: #412e21;
  color: #ffffff;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(65, 46, 33, 0.18);
  transition:
    transform 0.35s var(--ease),
    box-shadow 0.35s var(--ease);
  transform: rotate(0.03deg);
}

.main-visual .intro .action .button:hover {
  transform: rotate(0.03deg) translate(-1px, -1px);
  box-shadow: 0 7px 18px rgba(65, 46, 33, 0.26);
}

.main-visual .intro .action .button .line {
  --draw: 0.9s; /* 화살표가 한 획으로 그어지는 시간 */
  position: relative;
  width: 39px;
  height: 13px;
  opacity: 0.8;
}

.main-visual .intro .action .button .line::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: currentColor;
  animation: line_body var(--draw) ease-in-out both;
}

.main-visual .intro .action .button .line::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 16px;
  height: 2px;
  background-color: currentColor;
  transform-origin: 100% 100%;
  transform: rotate(45deg) scaleX(0);
  animation: line_head var(--draw) ease-in-out both;
}

.main-visual .story {
  position: relative;
  z-index: 1;
  padding: 220px 0 180px;
}

.main-visual .story::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: url(../images/main/story-bg.png) no-repeat center 0 / 1920px 100%;
  pointer-events: none;
}

.main-visual .story .story-item {
  display: flex;
  align-items: center;
}

.main-visual .story .story-item.item-02 {
  margin-top: 120px;
}

.main-visual .story .story-item .flower {
  position: relative;
  filter: drop-shadow(0 7px 11px rgba(65, 46, 33, 0.2));
  transform: translateX(-16px);
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.main-visual .story .story-item.item-01 .flower {
  transform: translateX(24px);
}

.main-visual .story .story-item .flower .leaf {
  --leaf-open: 0.45s; /* 잎이 떠오르는 시간 */
  --leaf-wait: 0.3s; /* 꽃이 벌어지기 시작하고 잎이 뒤따르기까지 */
  position: absolute;
  left: 50%;
  top: 50%;
  width: 97px;
  aspect-ratio: 139 / 101;
  background: url(../images/main/story-leaf1.png) no-repeat center / contain;
  opacity: 0;
  transform: translate(calc(-50% + 73px), calc(-50% + 62px));
  transition: opacity var(--leaf-open) ease var(--leaf-wait);
  pointer-events: none;
}

.main-visual .story .story-item .flower.bloomed .leaf {
  opacity: 1;
}

.main-visual .story .story-item.item-02 .flower .leaf {
  --leaf-wait: 0.55s;
  width: 206px;
  aspect-ratio: 207 / 83;
  background-image: url(../images/main/story-leaf2.png);
  transform: translate(calc(-50% - 72px), calc(-50% + 42px));
}

.main-visual .story .story-item .flower .bloom,
.main-visual .story .story-item .flower .sprout,
.main-visual .story .story-item .flower .bud {
  mix-blend-mode: normal;
  filter: drop-shadow(0 16px 12px rgba(0, 0, 0, 0.4));
}

.main-visual .story .story-item .flower .bloom {
  position: relative;
  width: 320px;
  height: 320px;
  pointer-events: none;
}

.main-visual .story .story-item .flower .sprout {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 110px;
  height: 110px;
  transform: translate(calc(-50% - 197px), calc(-50% + 114px));
  pointer-events: none;
}

.main-visual .story .story-item .flower .bud {
  position: relative;
  width: 430px;
  aspect-ratio: 832 / 624;
  transform: translate(23px, 12px);
  pointer-events: none;
}

.main-visual .story .story-item .content {
  position: relative;
  padding: 64px 96px 80px;
  width: 676px;
  background: url(../images/main/story-content.png) no-repeat center;
}

.main-visual .story .story-item.item-02 .content {
  padding: 64px 96px 60px;
}

.main-visual .story .story-item .content::before,
.main-visual .story .story-item .content::after {
  content: '';
  position: absolute;
  background-repeat: no-repeat;
  pointer-events: none;
}

.main-visual .story .story-item .box:not(.left) .content::before {
  left: -65px;
  bottom: -24px;
  width: 705px;
  height: 426px;
  background-image: url(../images/main/story-bottom-left.png);
}

.main-visual .story .story-item .box:not(.left) .content::after {
  right: -29px;
  top: -45px;
  width: 408px;
  height: 426px;
  background-image: url(../images/main/story-top_right.png);
}

.main-visual .story .story-item .box.left .content::before {
  right: -73px;
  bottom: -67px;
  width: 757px;
  height: 497px;
  background-image: url(../images/main/story-bottom-right.png);
}

.main-visual .story .story-item .box.left .content::after {
  left: -72px;
  top: -53px;
  width: 757px;
  height: 497px;
  background-image: url(../images/main/story-top_left.png);
}

.main-visual .story .story-item .content p {
  position: relative;
  z-index: 1;
  font-family: var(--maruburi);
  font-size: 24px;
  letter-spacing: -0.03em;
  color: #222222;
  transform: rotate(0.03deg);
}

.main-visual .story .story-item .content p + p {
  margin-top: 40px;
}

.main-visual .story .story-item .content .ink {
  animation: ink_focus 0.45s ease-out calc(0.9s * var(--d)) both paused;
}

.main-visual .story .story-item .content.animation .ink {
  animation-play-state: running;
}

.main-visual .message {
  position: relative;
  padding: 120px 0;
}

.main-visual .message .deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.main-visual .message .deco .wreath {
  position: absolute;
  transform: translateY(-50%);
}

.main-visual .message .deco .wreath.left {
  top: 47%;
  right: calc(50% + 334px);
  width: 682px;
}

.main-visual .message .deco .wreath.right {
  top: calc(47% - 36px);
  left: calc(50% + 332px);
  width: 671px;
}

@media (max-width: 1439px) {
  .main-visual .message .deco .wreath.left {
    right: calc(50% + 154px);
  }

  .main-visual .message .deco .wreath.right {
    left: calc(50% + 152px);
  }
}

.main-visual .message .head .title {
  font-family: var(--maruburi);
  font-size: 50px;
  letter-spacing: -0.03em;
  line-height: 70px;
  color: #412e21;
  text-align: center;
  transform: rotate(0.03deg);
}

.main-visual .message .head .desc {
  margin-top: 24px;
  font-family: var(--maruburi);
  font-size: 24px;
  letter-spacing: -0.03em;
  line-height: 40px;
  color: #412e21;
  text-align: center;
  transform: rotate(0.03deg);
}

.main-visual .message .card {
  position: relative;
  margin-top: 68px;
}

.main-visual .message .card::before,
.main-visual .message .card::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 30px;
  width: 299px;
  height: 476px;
  border-radius: 40px;
  box-shadow:
    3.5px 6.062px 30px rgba(65, 46, 33, 0.16),
    2.5px 4.33px 15px rgba(65, 46, 33, 0.1);
}

.main-visual .message .card::before {
  left: 0;
  clip-path: inset(-40px 100% -40px -40px);
}

.main-visual .message .card::after {
  right: 0;
  clip-path: inset(-40px -40px -40px 100%);
}

.main-visual .message .card .swiper-container {
  padding: 30px 0 42px;
  margin: -30px 0 -42px;
  clip-path: path(
    'M0 0H1250V24H0Z M0 512H1250V548H0Z M40 24H1210A40 40 0 0 1 1250 64V472A40 40 0 0 1 1210 512H40A40 40 0 0 1 0 472V64A40 40 0 0 1 40 24Z'
  );
}

.main-visual .message .card .paper {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 476px;
  padding: 10px 30px 34px;
  border-radius: 40px;
  background: url(../images/main/message-card-bg.png) no-repeat;
  box-shadow:
    3.5px 6.062px 30px rgba(65, 46, 33, 0.16),
    2.5px 4.33px 15px rgba(65, 46, 33, 0.1);
}

.main-visual .message .card .paper.trigger {
  width: 100%;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.main-visual .message .card .paper.trigger:hover {
  transform: translateY(-3px);
  box-shadow:
    3.5px 9px 34px rgba(65, 46, 33, 0.2),
    2.5px 6px 17px rgba(65, 46, 33, 0.13);
}

.main-visual .message .card .paper .flower {
  display: block;
  width: 150px;
  margin: 0 auto;
}

.main-visual .message .card .paper .to,
.main-visual .message .card .paper .from {
  font-family: var(--maruburi);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 24px;
  color: #5b524d;
  transform: rotate(0.03deg);
}

.main-visual .message .card .paper .from {
  margin-top: auto;
  text-align: right;
}

.main-visual .message .card .paper .text {
  margin-top: 24px;
  padding: 28px 0;
  background-image:
    url(../images/main/message-quotes_top.png), url(../images/main/message-quotes_bottom.png);
  background-position:
    left top,
    right bottom;
  background-repeat: no-repeat;
  font-family: var(--maruburi);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 40px;
  color: #222222;
  text-align: center;
  word-break: auto-phrase;
  transform: rotate(0.03deg);
}

.main-visual .message .card .paper .text .inner {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.message-modal::backdrop {
  background: rgba(36, 27, 21, 0.52);
}

html.message-modal-open,
html.message-modal-open body {
  overflow: hidden;
}

html.message-modal-open {
  scrollbar-gutter: stable;
}

.message-modal > .panel {
  width: 650px;
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 36px;
  background: url(../images/main/message-modal-bg.png) no-repeat center / 100% 100%;
  filter: drop-shadow(0 10px 14px rgba(65, 46, 33, 0.28));
  font-family: var(--maruburi);
  color: #5b524d;
  border-radius: 40px;
  gap: 0;
  transform: rotate(0.03deg);
}

.message-modal .to,
.message-modal .from {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 24px;
  transform: rotate(0.03deg);
}

.message-modal .to {
  margin-top: 6px;
}

.message-modal .message-modal-flower {
  display: flex;
  justify-content: center;
  margin-top: -30px;
}

.message-modal .flower {
  width: 150px;
}

.message-modal .text {
  display: flex;
  align-items: safe center;
  justify-content: center;
  flex: none;
  height: 160px;
  overflow-y: auto;
  overscroll-behavior: contain;
  outline: none;
  scrollbar-gutter: stable both-edges;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 40px;
  color: #222222;
  text-align: center;
  white-space: pre-line;
}

.message-modal .text::-webkit-scrollbar {
  width: 6px;
}

.message-modal .text::-webkit-scrollbar-track {
  margin: 4px 0;
  background: rgba(65, 46, 33, 0.08);
  border-radius: 3px;
}

.message-modal .text::-webkit-scrollbar-thumb {
  background: rgba(65, 46, 33, 0.32);
  border-radius: 3px;
}

.message-modal .text::-webkit-scrollbar-thumb:hover {
  background: rgba(65, 46, 33, 0.48);
}

.message-modal .from {
  align-self: flex-end;
  margin-top: 38px;
}

.message-modal > .panel > .close {
  position: absolute;
  inset-inline-end: 32px;
  top: 32px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(65, 46, 33, 0.4);
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.message-modal .close .size-message-close {
  width: 30px;
  height: 30px;
  fill: currentColor;
}

.main-visual .message .card .nav {
  position: absolute;
  z-index: 1;
  top: 50%;
  width: 48px;
  height: 48px;
  margin-top: -24px;
  border-radius: 50%;
  background: #39281f;
  cursor: pointer;
}

.main-visual .message .card .nav svg {
  display: block;
  width: 30px;
  height: 30px;
  margin: 0 auto;
  fill: #ffffff;
}

.main-visual .message .card .nav.prev {
  right: calc(100% + clamp(-48px, (100vw - 1250px) / 2 - 68px, 50px));
}

.main-visual .message .card .nav.prev svg {
  transform: scaleX(-1);
}

.main-visual .message .card .nav.next {
  left: calc(100% + clamp(-48px, (100vw - 1250px) / 2 - 68px, 50px));
}

.main-visual .message .card.fixed .nav {
  display: none;
}

.main-visual .message .card-empty {
  height: 548px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #222;
  font-weight: 500;
}

.main-visual .message .action {
  --seat: 1.2s; /* 나비가 버튼 위로 내려앉기까지 */
  --wave: 2.4s; /* 호버를 물고 있는 동안 날갯짓이 되돌아오는 주기 */
  --idle: 6s; /* 앉은 뒤 저절로 날갯짓하는 주기 */
  margin-top: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.main-visual .message .action .butterfly {
  position: absolute;
  left: 50%;
  bottom: 44px;
  margin-left: 247px;
  width: 84px;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(13px 17px 7px rgba(48, 33, 23, 0.5));
}

.main-visual .message .action .butterfly img {
  display: block;
  width: 100%;
  transform-origin: 39% 59%;
}

.main-visual .message .action.settled .butterfly {
  animation: bf_seat var(--seat) linear both;
}

.main-visual .message .action.settled .butterfly img {
  animation:
    bf_seat_wing var(--seat) ease-in-out both,
    bf_seat_idle var(--idle) ease-in-out var(--seat) infinite;
}

.main-visual .message .action.settled .button:hover ~ .butterfly img {
  animation:
    bf_seat_wing var(--seat) ease-in-out both,
    bf_seat_wave var(--wave) ease-in-out infinite;
}

.main-visual .message .action .button {
  width: 650px;
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;

  font-family: var(--maruburi);
  border-radius: 40px 10px 40px 10px;
  gap: 8px;
  padding: 0;
  background: #412e21;
  color: #ffffff;
  font-size: 30px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(65, 46, 33, 0.18);
  transition:
    transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
  transform: rotate(0.03deg);
}

.main-visual .message .action .button:hover {
  transform: rotate(0.03deg) translate(-1px, -1px);
  box-shadow: 0 7px 18px rgba(65, 46, 33, 0.26);
}

.main-visual .message .desc {
  margin-top: 20px;
  text-align: center;
  opacity: 0.8;
}

.main-visual .message .desc small {
  display: block;
  font-family: var(--maruburi);
  font-size: 20px;
  letter-spacing: -0.03em;
  line-height: 30px;
  color: #222222;
  transform: rotate(0.03deg);
}

.main-visual .message .desc p {
  margin-top: 32px;
  color: #222222;
  font-family: var(--maruburi);
  font-size: 24px;
  letter-spacing: -0.03em;
  line-height: 40px;
  transform: rotate(0.03deg);
}

.main-contents {
  isolation: isolate;
  background: #d8c3a8 url(../images/main/contents-tile.png) repeat;
}

.main-contents .reward {
  position: relative;
  padding: 340px 0 120px;
  margin-top: -150px;
}

.main-contents .reward::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -180px;
  height: 589px;
  background: url(../images/main/reward-top.png) no-repeat center top;
  pointer-events: none;
}

.main-contents .reward .deco {
  position: absolute;
  inset: 0;
  max-width: 1920px;
  margin: 100px auto 0;
  overflow: hidden;
  pointer-events: none;
}

.main-contents .reward .deco span {
  position: absolute;
  background-repeat: no-repeat;
}

.main-contents .reward .deco .branch {
  width: 432px;
  height: 768px;
}

.main-contents .reward .deco .branch.left {
  left: calc(50% - 956px);
  top: 527px;
  background-image: url(../images/main/reward-leaf_left.png);
}

.main-contents .reward .deco .branch.right {
  left: calc(50% + 619px);
  top: 210px;
  width: 354px;
  height: 402px;
  background-image: url(../images/main/reward-leaf_right.png);
}

@media (max-width: 1439px) {
  .main-contents .reward .deco .branch.left {
    left: calc(50% - 830px);
  }

  .main-contents .reward .deco .branch.right {
    left: calc(50% + 480px);
  }
}

.main-contents .reward .deco .b01 {
  left: calc(50% - 846px);
  top: 411px;
  width: 42px;
  height: 42px;
  background-image: url(../images/main/reward-leaf01.png);
}

.main-contents .reward .deco .b02 {
  left: calc(50% - 713px);
  top: 551px;
  width: 81px;
  height: 46px;
  background-image: url(../images/main/reward-leaf02.png);
}

.main-contents .reward .deco .b03 {
  left: calc(50% - 593px);
  top: 1043px;
  width: 42px;
  height: 45px;
  background-image: url(../images/main/reward-leaf03.png);
}

.main-contents .reward .deco .b04 {
  left: calc(50% - 540px);
  top: 498px;
  width: 85px;
  height: 44px;
  background-image: url(../images/main/reward-leaf04.png);
}

.main-contents .reward .deco .b05 {
  left: calc(50% - 44px);
  top: 642px;
  width: 45px;
  height: 43px;
  background-image: url(../images/main/reward-leaf05.png);
}

.main-contents .reward .deco .b06 {
  left: calc(50% - 36px);
  top: 1001px;
  width: 78px;
  height: 52px;
  background-image: url(../images/main/reward-leaf06.png);
}

.main-contents .reward .deco .b07 {
  left: calc(50% + 2px);
  top: 529px;
  width: 40px;
  height: 41px;
  background-image: url(../images/main/reward-leaf07.png);
}

.main-contents .reward .deco .b08 {
  left: calc(50% + 601px);
  top: 564px;
  width: 66px;
  height: 47px;
  background-image: url(../images/main/reward-leaf08.png);
}

.main-contents .reward .deco .b09 {
  left: calc(50% + 619px);
  top: 972px;
  width: 40px;
  height: 41px;
  background-image: url(../images/main/reward-leaf09.png);
}

.main-contents .reward .deco .b10 {
  left: calc(50% + 756px);
  top: 675px;
  width: 92px;
  height: 95px;
  background-image: url(../images/main/reward-leaf10.png);
}

.main-contents .reward .deco .b11 {
  left: calc(50% + 789px);
  top: 909px;
  width: 83px;
  height: 49px;
  background-image: url(../images/main/reward-leaf11.png);
}

.main-contents .reward .deco .bit {
  opacity: 0;
  animation-duration: 1.2s;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  animation-fill-mode: both;
  animation-play-state: paused;
}

.main-contents .reward .deco .b01,
.main-contents .reward .deco .b07,
.main-contents .reward .deco .b10 {
  animation-name: reward_bit_a;
}

.main-contents .reward .deco .b04,
.main-contents .reward .deco .b05,
.main-contents .reward .deco .b11 {
  animation-name: reward_bit_b;
  animation-delay: 0.12s;
}

.main-contents .reward .deco .b02,
.main-contents .reward .deco .b06,
.main-contents .reward .deco .b09 {
  animation-name: reward_bit_c;
  animation-delay: 0.24s;
}

.main-contents .reward .deco .b03,
.main-contents .reward .deco .b08 {
  animation-name: reward_bit_d;
  animation-delay: 0.36s;
}

.main-contents .reward.animation .deco .bit {
  animation-play-state: running;
}

.main-contents .reward .head {
  position: relative;
}

.main-contents .reward .head .title {
  font-family: var(--maruburi);
  font-size: 46px;
  letter-spacing: -0.03em;
  line-height: 70px;
  color: #412e21;
  text-align: center;
  transform: rotate(0.03deg);
}

.main-contents .reward .head .desc {
  margin-top: 24px;
  font-family: var(--maruburi);
  font-size: 22px;
  letter-spacing: -0.03em;
  line-height: 40px;
  color: #412e21;
  text-align: center;
  transform: rotate(0.03deg);
}

.main-contents .reward .showcase {
  position: relative;
}

.main-contents .reward .showcase .log-list {
  margin-top: 104px;
  display: flex;
  justify-content: center;
  gap: 41px;
}

.main-contents .reward .showcase .log-list .log-item {
  position: relative;
}

.main-contents .reward .showcase .log-list .log-item .disc {
  display: block;
}

.main-contents .reward .showcase .log-list .log-item .sprig {
  position: absolute;
  z-index: 2;
  left: 78px;
  top: 224px;
  width: 180px;
  height: 287px;
  background: url(../images/main/reward-leaf_log.png) no-repeat;
  opacity: 0;
  animation: reward_in_left 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) 0.6s both paused;
}

.main-contents .reward .showcase .log-list .log-item:nth-child(2) .sprig {
  left: 282px;
  top: 154px;
  width: 302px;
  height: 392px;
  background: url(../images/main/reward-leaf_log2.png) no-repeat;
  animation-name: reward_in_right;
  animation-delay: 0.95s;
  z-index: 1;
}

.main-contents .reward .showcase .log-list .log-item .doc {
  position: absolute;
  left: 50%;
  top: 12px;
  margin-left: -155px;
  opacity: 0;
  animation: reward_in_right 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) 0.6s both paused;
}

.main-contents .reward .showcase .log-list .log-item .flower {
  position: absolute;
  left: 52%;
  top: 10px;
  margin-left: -235px;
  opacity: 0;
  animation: reward_in_left 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) 0.95s both paused;
  z-index: 2;
}

.main-contents .reward.animation .showcase .log-list .log-item .sprig,
.main-contents .reward.animation .showcase .log-list .log-item .doc,
.main-contents .reward.animation .showcase .log-list .log-item .flower {
  animation-play-state: running;
}

.main-contents .reward .showcase .explain {
  margin-top: 20px;
  text-align: center;
}

.main-contents .reward .showcase .explain p {
  font-family: var(--maruburi);
  font-size: 24px;
  letter-spacing: -0.03em;
  line-height: 40px;
  color: #412e21;
  transform: rotate(0.03deg);
}

.main-contents .reward .showcase .explain small {
  display: block;
  margin-top: 10px;
  font-family: var(--maruburi);
  font-size: 18px;
  letter-spacing: -0.03em;
  line-height: 24px;
  color: #412e21;
  opacity: 0.9;
  transform: rotate(0.03deg);
}

.main-contents .reward .showcase .display {
  position: relative;
  max-width: 1440px;
  margin: 80px auto 0;
  overflow: hidden;
}

.main-contents .reward .showcase .display .swiper-container {
  --dur: 0ms; /* 카드가 모양을 바꾸는 시간 — 스크립트가 슬라이드 이동 시간에 맞춘다 */
  position: relative;
  left: 50%;
  width: 1400px;
  margin-left: -700px;
  padding: 80px 0;
  clip-path: path(
    'M60 0H1340V484H60Z M12 56H1388A12 12 0 0 1 1400 68V420A12 12 0 0 1 1388 432H12A12 12 0 0 1 0 420V68A12 12 0 0 1 12 56Z'
  );
}

.main-contents .reward .showcase .display .swiper-slide {
  --shift: 0px; /* 중앙에서 떨어진 카드가 안쪽으로 비키는 거리 */
  --scale: 1; /* 중앙에 가까울수록 커지는 배율 */
  --lit: 0.7; /* 중앙에서 멀수록 흐려지는 정도 — 불투명도·밝기 겸 흐림 */
  --veil: 0; /* 중앙에 가까울수록 짙어지는 하단 그림자의 짙기 */
  position: relative;
  width: 264px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 10px;
  outline: 1px solid rgba(65, 46, 33, 0.11);
  outline-offset: -1px;
  box-shadow:
    3.5px 6.062px 30px rgba(0, 0, 0, 0.2),
    2.5px 4.33px 15px rgba(0, 0, 0, 0.2);
  transform: scale(var(--scale)) translateX(var(--shift));
  transition: transform var(--dur) cubic-bezier(0.22, 0.61, 0.36, 1);
}

.main-contents .reward .showcase .display .swiper-slide:not(.swiper-slide-visible) {
  box-shadow: none;
}

.main-contents .reward .showcase .display .swiper-slide img {
  display: block;
  width: 264px;
  height: 324px;
  object-fit: cover;
  opacity: var(--lit);
  filter: brightness(var(--lit)) blur(calc((1 - var(--lit)) * 7px));
  transform: scale(calc(1 + (1 - var(--lit)) * 0.6));
  transition:
    transform var(--dur) cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity var(--dur) cubic-bezier(0.22, 0.61, 0.36, 1),
    filter var(--dur) cubic-bezier(0.22, 0.61, 0.36, 1);
}

.main-contents .reward .showcase .display .swiper-slide::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.65),
    rgba(0, 0, 0, 0.35) 45%,
    rgba(0, 0, 0, 0)
  );
  opacity: var(--veil);
  pointer-events: none;
  transition: opacity var(--dur) cubic-bezier(0.22, 0.61, 0.36, 1);
}

.main-contents .reward .showcase .display .swiper-slide-active {
  z-index: 2;
  border-radius: 33px;
}

.main-contents .reward .showcase .display .control {
  position: absolute;
  z-index: 2;
  right: calc(50% - 121px);
  bottom: 80px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.main-contents .reward .showcase .display .control .nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: #412e21;
  cursor: pointer;
}

.main-contents .reward .showcase .display .control .nav svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: #ffffff;
  opacity: 0.85;
}

.main-contents .reward .showcase .display .control .nav.prev svg {
  transform: scaleX(-1);
}

.main-contents .reward .showcase .display .control .count {
  position: static;
  font-family: var(--maruburi);
  font-size: 16px;
  letter-spacing: 0.02em;
  color: #ffffff;
  opacity: 0.85;
  width: 38px;
  line-height: 1;
  transform: rotate(0.03deg);
}

.main-contents .memory {
  position: relative;
  padding: 64px 0 379px;
}

.main-contents .memory::after {
  content: '';
  position: absolute;
  z-index: -2;
  left: 0;
  right: 0;
  bottom: 0;
  height: 294px;
  background: url(../images/main/qna-bg.png) no-repeat center top;
}

.main-contents .memory .deco {
  position: absolute;
  z-index: -1;
  inset: -719px 0 0;
  max-width: 1920px;
  margin: 0 auto;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  animation: memory_deco_in 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) both paused;
}

.main-contents .memory.animation .deco {
  animation-play-state: running;
}

.main-contents .memory .deco span {
  position: absolute;
  background-repeat: no-repeat;
  animation-duration: 1.4s;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  animation-fill-mode: both;
  animation-play-state: paused;
}

.main-contents .memory .deco .shadow {
  opacity: 0.75;
  scale: 1.22 1;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1), ease-in-out;
  animation-direction: normal, alternate;
  animation-iteration-count: 1, infinite;
}

.main-contents .memory .deco .shadow.left {
  left: calc(50% - 960px);
  top: 0;
  width: 889px;
  height: 1538px;
  background-image: url(../images/main/memory-shadow_left.png);
  transform-origin: 100% 50%;
  animation-name: memory_shade_left, memory_shade_left_drift;
  animation-duration: 1.4s, 20s;
}

.main-contents .memory .deco .shadow.right {
  left: calc(50% + 2px);
  top: 737px;
  width: 958px;
  height: 1790px;
  background-image: url(../images/main/memory-shadow_right.png);
  transform-origin: 0 50%;
  animation-name: memory_shade_right, memory_shade_right_drift;
  animation-duration: 1.4s, 20s;
  animation-delay: 0.12s, 0s;
}

.main-contents .memory.animation .deco .shadow {
  animation-play-state: running;
}

.main-contents .memory .deco .flower {
  left: calc(50% - 960px);
  bottom: 0;
  width: 1920px;
  height: 1067px;
  background-image: url(../images/main/memory-bg.png);
  transform-origin: 50% 100%;
  scale: 1.02 1;
  animation-name: memory_flower_rise, memory_flower_drift;
  animation-duration: 1.1s, 10s;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1), ease-in-out;
  animation-direction: normal, alternate;
  animation-iteration-count: 1, infinite;
}

.main-contents .memory.bloom .deco .flower {
  animation-play-state: running;
}

.main-contents .memory .deco .butterfly {
  perspective: 440px;
}

.main-contents .memory .deco .butterfly .shade,
.main-contents .memory .deco .butterfly .frame {
  inset: 0;
}

.main-contents .memory .deco .butterfly .frame {
  transform-style: preserve-3d;
  animation-name: memory_bf_drift;
  animation-duration: var(--bf-drift);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}

.main-contents .memory .deco .butterfly .shade {
  filter: brightness(0) blur(7px);
  opacity: 0.24;
  translate: 8% 12%;
  scale: 0.94;
  animation-name: memory_bf_cast;
  animation-duration: var(--bf-flap);
  animation-delay: var(--bf-phase);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}

.main-contents .memory .deco .butterfly .wing {
  inset: 0;
  background-size: 100% 100%;
  will-change: transform;
  animation-duration: var(--bf-flap);
  animation-delay: var(--bf-phase);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}

.main-contents .memory .deco .butterfly .wing.left {
  animation-name: memory_bf_left, memory_bf_dim;
}

.main-contents .memory .deco .butterfly .wing.right {
  animation-name: memory_bf_right, memory_bf_lit;
}

.main-contents .memory.animation .deco .butterfly .shade,
.main-contents .memory.animation .deco .butterfly .frame,
.main-contents .memory.animation .deco .butterfly .wing {
  animation-play-state: running;
}

.main-contents .memory .deco .butterfly.title {
  --bf-flap: 3.4s; /* 날갯짓 한 번 */
  --bf-phase: -1.1s; /* 세 나비가 서로 다른 박자로 접히게 하는 위상 차 */
  --bf-drift: 7.2s; /* 몸이 한 번 오르내리기까지 */
  left: calc(50% + 328px);
  top: 717px;
  width: 159px;
  height: 171px;
  perspective-origin: 28% 69%;
}

.main-contents .memory .deco .butterfly.title .wing {
  background-image: url(../images/main/memory-butterfly01.png);
  transform-origin: 28% 69%;
}

.main-contents .memory .deco .butterfly.title .wing.left {
  clip-path: polygon(21.9% -20%, 33.9% 120%, -20% 120%, -20% -20%);
  animation-name: memory_bf_soft_left, memory_bf_dim;
}

.main-contents .memory .deco .butterfly.title .wing.right {
  clip-path: polygon(20.4% -20%, 32.4% 120%, 120% 120%, 120% -20%);
  animation-name: memory_bf_soft_right, memory_bf_lit;
}

.main-contents .memory .deco .butterfly.left {
  --bf-flap: 4.2s; /* 날갯짓 한 번 */
  --bf-phase: -2.4s; /* 세 나비가 서로 다른 박자로 접히게 하는 위상 차 */
  --bf-drift: 8.6s; /* 몸이 한 번 오르내리기까지 */
  left: calc(50% - 911px);
  top: 1009px;
  width: 235px;
  height: 203px;
  perspective-origin: 55% 67%;
}

.main-contents .memory .deco .butterfly.left .wing {
  background-image: url(../images/main/memory-butterfly02.png);
  transform-origin: 55% 67%;
}

.main-contents .memory .deco .butterfly.left .wing.left {
  clip-path: polygon(47.1% -20%, 59.8% 120%, -20% 120%, -20% -20%);
  animation-name: memory_bf_left, memory_bf_lit;
}

.main-contents .memory .deco .butterfly.left .wing.right {
  clip-path: polygon(45.6% -20%, 58.3% 120%, 120% 120%, 120% -20%);
  animation-name: memory_bf_right, memory_bf_dim;
}

.main-contents .memory .deco .butterfly.right {
  --bf-flap: 3.7s; /* 날갯짓 한 번 */
  --bf-phase: -0.6s; /* 세 나비가 서로 다른 박자로 접히게 하는 위상 차 */
  --bf-drift: 6.4s; /* 몸이 한 번 오르내리기까지 */
  left: calc(50% + 687px);
  top: 1061px;
  width: 182px;
  height: 197px;
  perspective-origin: 42.5% 60%;
}

.main-contents .memory .deco .butterfly.right .wing {
  background-image: url(../images/main/memory-butterfly03.png);
  transform-origin: 42.5% 60%;
}

.main-contents .memory .deco .butterfly.right .wing.left {
  clip-path: polygon(21.6% -20%, 58.2% 120%, -20% 120%, -20% -20%);
  animation-name: memory_bf_fold_left, memory_bf_dim;
}

.main-contents .memory .deco .butterfly.right .wing.right {
  clip-path: polygon(20.1% -20%, 56.7% 120%, 120% 120%, 120% -20%);
  animation-name: memory_bf_fold_right, memory_bf_lit;
}

.main-contents .memory .head {
  position: relative;
}

.main-contents .memory .head .title {
  font-family: var(--maruburi);
  font-size: 46px;
  letter-spacing: -0.03em;
  line-height: 70px;
  color: #412e21;
  text-align: center;
  transform: rotate(0.03deg);
}

.main-contents .memory .voice {
  position: relative;
  margin-top: 136px;
}

.main-contents .memory .voice::before,
.main-contents .memory .voice::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 30px;
  width: 616px;
  height: 399px;
  border-radius: 40px;
  box-shadow:
    3.5px 6.062px 40px rgba(65, 46, 33, 0.16),
    2.5px 4.33px 15px rgba(65, 46, 33, 0.1);
}

.main-contents .memory .voice::before {
  left: 0;
  clip-path: inset(-40px 100% -40px -40px);
}

.main-contents .memory .voice::after {
  right: 0;
  clip-path: inset(-40px -40px -40px 100%);
}

.main-contents .memory .voice .swiper-container {
  padding: 30px 0 42px;
  margin: -30px 0 -42px;
  clip-path: path(
    'M0 0H1250V24H0Z M0 435H1250V471H0Z M40 24H1210A40 40 0 0 1 1250 64V395A40 40 0 0 1 1210 435H40A40 40 0 0 1 0 395V64A40 40 0 0 1 40 24Z'
  );
}

.main-contents .memory .voice .item {
  position: relative;
  height: 399px;
  padding: 74px 83px 0;
  border-radius: 40px;
  background: url(../images/main/memory-card-bg.png) no-repeat;
  box-shadow:
    3.5px 6.062px 40px rgba(65, 46, 33, 0.16),
    2.5px 4.33px 15px rgba(65, 46, 33, 0.1);
}

.main-contents .memory .voice .item::before,
.main-contents .memory .voice .item::after {
  content: '';
  position: absolute;
  width: 43px;
  height: 26px;
  background-repeat: no-repeat;
}

.main-contents .memory .voice .item::before {
  left: 48px;
  top: 37px;
  background-image: url(../images/main/memory-quotes_top.png);
}

.main-contents .memory .voice .item::after {
  left: 524px;
  top: 245px;
  background-image: url(../images/main/memory-quotes_bottom.png);
}

.main-contents .memory .voice .item .text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  height: 192px;
  font-family: var(--maruburi);
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 40px;
  color: #222222;
  transform: rotate(0.03deg);
}

.main-contents .memory .voice .item .name {
  margin-top: 40px;
  font-family: var(--maruburi);
  font-size: 16px;
  line-height: 24px;
  color: #232323;
  transform: rotate(0.03deg);
}

.main-contents .memory .voice .nav {
  position: absolute;
  z-index: 1;
  top: 50%;
  width: 48px;
  height: 48px;
  margin-top: -24px;
  border-radius: 50%;
  background: #39281f;
  cursor: pointer;
}

.main-contents .memory .voice .nav svg {
  display: block;
  width: 30px;
  height: 30px;
  margin: 0 auto;
  fill: #ffffff;
}

.main-contents .memory .voice .nav.prev {
  right: calc(100% + clamp(-48px, (100vw - 1250px) / 2 - 68px, 50px));
}

.main-contents .memory .voice .nav.prev svg {
  transform: scaleX(-1);
}

.main-contents .memory .voice .nav.next {
  left: calc(100% + clamp(-48px, (100vw - 1250px) / 2 - 68px, 50px));
}

.main-contents .memory .action {
  position: relative;
  margin-top: 80px;
  display: flex;
  justify-content: center;
}

.main-contents .memory .action .button {
  font-family: var(--maruburi);
  border-radius: 40px 10px 40px 10px;
  width: 650px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: #412e21;
  color: #ffffff;
  font-size: 28px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(65, 46, 33, 0.18);
  transition:
    transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
  transform: rotate(0.03deg);
}

.main-contents .memory .action .button:hover {
  transform: rotate(0.03deg) translate(-1px, -1px);
  box-shadow: 0 7px 18px rgba(65, 46, 33, 0.26);
}

.main-qna {
  margin-top: -294px;
  padding: 291px 0 132px;
  background: #877257 url(../images/main/qna-bg-tile.png) repeat center top;
}

.main-qna .qna-list .qna-item + .qna-item {
  margin-top: 10px;
}

.main-qna .qna-list .qna-item .question {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  width: 100%;
  height: 70px;
  padding-left: 130px;
  border-radius: 35px;
  background: #3e2f22;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.32);
  text-align: left;
  cursor: pointer;
}

.main-qna .qna-list .qna-item .question::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 50%;
  width: 54px;
  height: 54px;
  margin-top: -27px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.28) url(../images/main/qna-title-icon.png) no-repeat center;
}

.main-qna .qna-list .qna-item .question .num,
.main-qna .qna-list .qna-item .question .text {
  font-family: var(--maruburi);
  font-size: 28px;
  letter-spacing: -0.02em;
  line-height: 40px;
  color: #ffffff;
  transform: rotate(0.03deg);
}

.main-qna .qna-list .qna-item .question .num {
  margin-right: 12px;
}

.main-qna .qna-list .qna-item .question .arrow {
  position: absolute;
  right: 40px;
  top: 50%;
  width: 32px;
  height: 16px;
  margin-top: -8px;
  background: url(../images/main/qna-arrow.png) no-repeat;
  transform: rotate(180deg);
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.main-qna .qna-list .qna-item.active .question .arrow {
  transform: rotate(0);
}

.main-qna .qna-list .qna-item .fold {
  display: none;
}

.main-qna .qna-list .qna-item.active .fold {
  display: block;
}

.main-qna .qna-list .qna-item .answer {
  position: relative;
  margin-top: -35px;
  padding: 63px 112px 31px;
  background: url(../images/main/qna-item-bg.png) no-repeat center / 100% 100%;
}

.main-qna .qna-list .qna-item .answer::before {
  content: '';
  position: absolute;
  left: 70px;
  top: 48px;
  width: 77px;
  height: 88px;
  background: url(../images/main/qna-content-icon.png) no-repeat;
}

.main-qna .qna-list .qna-item .answer p {
  position: relative;
  font-family: var(--maruburi);
  font-size: 22px;
  line-height: 40px;
  color: #000000;
  transform: rotate(0.03deg);
}

.main-qna .qna-list .qna-item .answer .reward {
  position: relative;
  width: 100%;
  margin-top: 26px;
  border-top: 2px solid #3e2f22;
  border-collapse: collapse;
  table-layout: fixed;
}

.main-qna .qna-list .qna-item .answer .reward th,
.main-qna .qna-list .qna-item .answer .reward td {
  height: 58px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(62, 47, 34, 0.24);
  font-family: var(--maruburi);
  font-size: 20px;
  line-height: 30px;
  color: #3e2f22;
  text-align: center;
  vertical-align: middle;
  transform: rotate(0.03deg);
}

.main-qna .qna-list .qna-item .answer .reward tr > *:not(:first-child) {
  border-left: 1px solid rgba(62, 47, 34, 0.24);
}

.main-qna .qna-list .qna-item .answer .reward th:first-child {
  width: 33%;
}

.main-qna .qna-list .qna-item .answer .reward thead th {
  background: rgba(62, 47, 34, 0.06);
  font-weight: 600;
  color: #000000;
}

.main-qna .qna-list .qna-item .answer .reward tbody th {
  font-weight: 400;
}

@keyframes float_rise {
  from {
    opacity: 0;
    translate: 0 46px;
  }
  to {
    opacity: 1;
    translate: none;
  }
}

@keyframes float_bloom {
  0% {
    opacity: 0;
    transform: scale(0.55, 0.12);
  }
  45% {
    opacity: 1;
  }
  72% {
    transform: scale(1.05, 1.04);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes float_fly {
  0% {
    opacity: 0;
    transform: translate(-13px, -16px) rotate(-4deg);
    filter: drop-shadow(2px 18px 12px rgba(48, 33, 23, 0.06));
  }
  30% {
    opacity: 1;
  }
  40% {
    transform: translate(-9px, -11px) rotate(-3deg);
    filter: drop-shadow(3px 14px 10px rgba(48, 33, 23, 0.11));
  }
  62% {
    transform: translate(-6px, -11px) rotate(-2deg);
    filter: drop-shadow(4px 12px 8px rgba(48, 33, 23, 0.15));
  }
  82% {
    transform: translate(-2px, -5px) rotate(-1deg);
    filter: drop-shadow(4px 9px 6px rgba(48, 33, 23, 0.19));
  }
  100% {
    opacity: 1;
    transform: none;
    filter: drop-shadow(5px 7px 5px rgba(48, 33, 23, 0.22));
  }
}

@keyframes float_wing {
  0% {
    transform: rotate(-32deg) scaleY(1) rotate(32deg);
  }
  9% {
    transform: rotate(-32deg) scaleY(0.62) rotate(32deg);
  }
  20% {
    transform: rotate(-32deg) scaleY(1) rotate(32deg);
  }
  32% {
    transform: rotate(-32deg) scaleY(0.71) rotate(32deg);
  }
  44% {
    transform: rotate(-32deg) scaleY(1) rotate(32deg);
  }
  56% {
    transform: rotate(-32deg) scaleY(0.8) rotate(32deg);
  }
  68% {
    transform: rotate(-32deg) scaleY(1) rotate(32deg);
  }
  80% {
    transform: rotate(-32deg) scaleY(0.88) rotate(32deg);
  }
  90% {
    transform: rotate(-32deg) scaleY(1) rotate(32deg);
  }
  97% {
    transform: rotate(-32deg) scaleY(0.95) rotate(32deg);
  }
  100% {
    transform: none;
  }
}

@keyframes float_wave {
  0% {
    transform: rotate(-32deg) scaleY(1) rotate(32deg);
  }
  7% {
    transform: rotate(-32deg) scaleY(0.78) rotate(32deg);
  }
  15% {
    transform: rotate(-32deg) scaleY(1) rotate(32deg);
  }
  22% {
    transform: rotate(-32deg) scaleY(0.89) rotate(32deg);
  }
  29%,
  100% {
    transform: rotate(-32deg) scaleY(1) rotate(32deg);
  }
}

.float-area {
  --rise: 0.55s; /* 버튼이 아래에서 올라오는 시간 */
  --bloom: 0.85s; /* 꽃이 아래에서 자라 오르는 시간 */
  --flight: 1.2s; /* 나비가 날아들어 꽃에 앉기까지 */
  --bloom-at: 0.32s; /* 버튼이 오르기 시작한 뒤 꽃이 자라기까지 */
  --flight-at: 0.42s; /* 버튼이 오르기 시작한 뒤 나비가 날아들기까지 */
  --fade: 0.45s; /* 되감길 때 전체가 사라지는 시간 */
  --wave: 2.4s; /* 호버를 물고 있는 동안 날갯짓이 되돌아오는 주기 */
  --reach: 186px; /* 버튼 클릭 영역이 꽃과 나비 위까지 올라가는 높이 */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* 등장 가속 곡선 */
  position: fixed;
  right: 40px;
  bottom: 40px;
  width: 176px;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--fade) var(--ease),
    visibility 0s linear var(--fade);
  cursor: pointer;
}

.float-area.shown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: none;
}

.float-area .deco {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 78px;
}

.float-area .deco .flower {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 124px;
  margin-left: -62px;
  transform-origin: 50% 100%;
}

.float-area .deco .butterfly {
  position: absolute;
  left: -8px;
  bottom: 138px;
  width: 56px;
  filter: drop-shadow(5px 7px 5px rgba(48, 33, 23, 0.22));
}

.float-area .deco img {
  width: 100%;
}

.float-area .deco .butterfly img {
  display: block;
  transform-origin: 66% 72%;
}

.float-area .button {
  position: relative;
  font-family: var(--maruburi);
  width: 100%;
  height: 88px;
  border-radius: 20px;
  background: #412e21;
  color: #ffffff;
  font-size: 20px;
  line-height: 1.5;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(65, 46, 33, 0.24);
  transform: rotate(0.03deg);
}

.float-area .button::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--reach));
  bottom: 0;
}

.float-area.shown .button {
  animation: float_rise var(--rise) var(--ease) both;
}

.float-area.shown .deco .flower {
  animation: float_bloom var(--bloom) var(--ease) var(--bloom-at) both;
}

.float-area.shown .deco .butterfly {
  animation: float_fly var(--flight) linear var(--flight-at) both;
}

.float-area.shown .deco .butterfly img {
  animation: float_wing var(--flight) ease-in-out var(--flight-at) both;
}

.float-area.shown:hover .deco .butterfly img {
  animation:
    float_wing var(--flight) ease-in-out var(--flight-at) both,
    float_wave var(--wave) ease-in-out infinite;
}

/* -- 인트로 문구 등장 -- */
@keyframes intro_reveal {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}
/* -- // 인트로 문구 등장 -- */

/* -- 나비 첫 등장 (페이드 · 진입 이동 · 기울기 · 그림자) -- */
@keyframes bf_in {
  to {
    opacity: 1;
  }
}

@keyframes bf_x {
  0% {
    transform: translateX(11%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes bf_y {
  0% {
    transform: translateY(-15%) scale(0.96);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes bf_tilt {
  0% {
    transform: rotate(-4deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes bf_shade {
  from {
    opacity: 0.08;
    transform: translate(24%, 32%) scale(1.18);
  }
}
/* -- // 나비 첫 등장 (페이드 · 진입 이동 · 기울기 · 그림자) -- */

/* -- 스크롤에 감기는 나비 비행 경로 -- */
@keyframes bf_route_x {
  0% {
    transform: translateX(0);
  }
  1.7% {
    transform: translateX(-62%);
  }
  4.1% {
    transform: translateX(-152%);
  }
  6.4% {
    transform: translateX(-314%);
  }
  7.5% {
    transform: translateX(-402%);
  }
  11.5% {
    transform: translateX(-480%);
  }
  14.7% {
    transform: translateX(-486%);
  }
  18.6% {
    transform: translateX(-452%);
  }
  23.4% {
    transform: translateX(-279%);
  }
  28.2% {
    transform: translateX(-127%);
  }
  34.7% {
    transform: translateX(-82%);
  }
  39.1% {
    transform: translateX(-78%);
  }
  43.8% {
    transform: translateX(-122%);
  }
  50.4% {
    transform: translateX(-289%);
  }
  54.5% {
    transform: translateX(-380%);
  }
  58% {
    transform: translateX(-409%);
  }
  70% {
    transform: translateX(-446%);
  }
  80% {
    transform: translateX(-472%);
  }
  90% {
    transform: translateX(-488%);
  }
  100% {
    transform: translateX(-496%);
  }
}

@keyframes bf_route_y {
  0% {
    transform: translateY(0);
  }
  1.7% {
    transform: translateY(54%);
  }
  4.1% {
    transform: translateY(102%);
  }
  6.4% {
    transform: translateY(116%);
  }
  7.5% {
    transform: translateY(116%);
  }
  11.5% {
    transform: translateY(186%);
  }
  14.7% {
    transform: translateY(244%);
  }
  18.6% {
    transform: translateY(310%);
  }
  23.4% {
    transform: translateY(355%);
  }
  28.2% {
    transform: translateY(402%);
  }
  34.7% {
    transform: translateY(498%);
  }
  39.1% {
    transform: translateY(562%);
  }
  43.8% {
    transform: translateY(656%);
  }
  50.4% {
    transform: translateY(745%);
  }
  54.5% {
    transform: translateY(787%);
  }
  58% {
    transform: translateY(851%);
  }
  70% {
    transform: translateY(920%);
  }
  80% {
    transform: translateY(977%);
  }
  90% {
    transform: translateY(1030%);
  }
  100% {
    transform: translateY(1067%);
  }
}

@keyframes bf_route_z {
  0% {
    transform: scale(1);
  }
  1.7% {
    transform: scale(1.03);
  }
  4.1% {
    transform: scale(1.08);
  }
  6.4% {
    transform: scale(1.12);
  }
  7.5% {
    transform: scale(1.1);
  }
  11.5% {
    transform: scale(1);
  }
  14.7% {
    transform: scale(0.93);
  }
  18.6% {
    transform: scale(0.88);
  }
  23.4% {
    transform: scale(0.92);
  }
  28.2% {
    transform: scale(1);
  }
  34.7% {
    transform: scale(1.06);
  }
  39.1% {
    transform: scale(1.09);
  }
  43.8% {
    transform: scale(1.05);
  }
  50.4% {
    transform: scale(0.96);
  }
  54.5% {
    transform: scale(0.92);
  }
  58% {
    transform: scale(0.9);
  }
  70% {
    transform: scale(0.93);
  }
  80% {
    transform: scale(0.96);
  }
  90% {
    transform: scale(0.99);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes bf_route_tilt {
  0% {
    transform: rotate(0deg);
  }
  1.7% {
    transform: rotate(-8deg);
  }
  4.1% {
    transform: rotate(11deg);
  }
  6.4% {
    transform: rotate(29deg);
  }
  7.5% {
    transform: rotate(18deg);
  }
  11.5% {
    transform: rotate(-27deg);
  }
  14.7% {
    transform: rotate(-69deg);
  }
  18.6% {
    transform: rotate(-120deg);
  }
  23.4% {
    transform: rotate(-133deg);
  }
  28.2% {
    transform: rotate(-112deg);
  }
  34.7% {
    transform: rotate(-76deg);
  }
  39.1% {
    transform: rotate(-44deg);
  }
  43.8% {
    transform: rotate(-11deg);
  }
  50.4% {
    transform: rotate(6deg);
  }
  54.5% {
    transform: rotate(12deg);
  }
  58% {
    transform: rotate(4deg);
  }
  70% {
    transform: rotate(-6deg);
  }
  80% {
    transform: rotate(-14deg);
  }
  90% {
    transform: rotate(-21deg);
  }
  100% {
    transform: rotate(-26deg);
  }
}

@keyframes bf_route_lean {
  0% {
    transform: rotate3d(0.032, -0.999, 0, 0deg);
  }
  1.7% {
    transform: rotate3d(0.032, -0.999, 0, 14deg);
  }
  4.1% {
    transform: rotate3d(0.032, -0.999, 0, 26deg);
  }
  6.4% {
    transform: rotate3d(0.032, -0.999, 0, 34deg);
  }
  7.5% {
    transform: rotate3d(0.032, -0.999, 0, 36deg);
  }
  11.5% {
    transform: rotate3d(0.032, -0.999, 0, 40deg);
  }
  14.7% {
    transform: rotate3d(0.032, -0.999, 0, 44deg);
  }
  18.6% {
    transform: rotate3d(0.032, -0.999, 0, 46deg);
  }
  23.4% {
    transform: rotate3d(0.032, -0.999, 0, 42deg);
  }
  28.2% {
    transform: rotate3d(0.032, -0.999, 0, 38deg);
  }
  34.7% {
    transform: rotate3d(0.032, -0.999, 0, 40deg);
  }
  39.1% {
    transform: rotate3d(0.032, -0.999, 0, 44deg);
  }
  43.8% {
    transform: rotate3d(0.032, -0.999, 0, 40deg);
  }
  50.4% {
    transform: rotate3d(0.032, -0.999, 0, 36deg);
  }
  54.5% {
    transform: rotate3d(0.032, -0.999, 0, 34deg);
  }
  58% {
    transform: rotate3d(0.032, -0.999, 0, 32deg);
  }
  70% {
    transform: rotate3d(0.032, -0.999, 0, 26deg);
  }
  80% {
    transform: rotate3d(0.032, -0.999, 0, 20deg);
  }
  90% {
    transform: rotate3d(0.032, -0.999, 0, 12deg);
  }
  100% {
    transform: rotate3d(0.032, -0.999, 0, 0deg);
  }
}
/* -- // 스크롤에 감기는 나비 비행 경로 -- */

/* -- 나비 날갯짓 (등장 직후 잦아듦 · 비행 중 반복) -- */
@keyframes bf_flap_left {
  0% {
    transform: rotate3d(0.908, -0.419, 0, 0deg);
  }
  8% {
    transform: rotate3d(0.908, -0.419, 0, 58deg);
  }
  17% {
    transform: rotate3d(0.908, -0.419, 0, 0deg);
  }
  26% {
    transform: rotate3d(0.908, -0.419, 0, 45deg);
  }
  35% {
    transform: rotate3d(0.908, -0.419, 0, 1deg);
  }
  45% {
    transform: rotate3d(0.908, -0.419, 0, 32deg);
  }
  55% {
    transform: rotate3d(0.908, -0.419, 0, 2deg);
  }
  65% {
    transform: rotate3d(0.908, -0.419, 0, 21deg);
  }
  75% {
    transform: rotate3d(0.908, -0.419, 0, 3deg);
  }
  85% {
    transform: rotate3d(0.908, -0.419, 0, 11deg);
  }
  93% {
    transform: rotate3d(0.908, -0.419, 0, 3deg);
  }
  100% {
    transform: rotate3d(0.908, -0.419, 0, 0deg);
  }
}

@keyframes bf_flap_right {
  0% {
    transform: rotate3d(0.908, -0.419, 0, 0deg);
  }
  8% {
    transform: rotate3d(0.908, -0.419, 0, -58deg);
  }
  17% {
    transform: rotate3d(0.908, -0.419, 0, 0deg);
  }
  26% {
    transform: rotate3d(0.908, -0.419, 0, -45deg);
  }
  35% {
    transform: rotate3d(0.908, -0.419, 0, -1deg);
  }
  45% {
    transform: rotate3d(0.908, -0.419, 0, -32deg);
  }
  55% {
    transform: rotate3d(0.908, -0.419, 0, -2deg);
  }
  65% {
    transform: rotate3d(0.908, -0.419, 0, -21deg);
  }
  75% {
    transform: rotate3d(0.908, -0.419, 0, -3deg);
  }
  85% {
    transform: rotate3d(0.908, -0.419, 0, -11deg);
  }
  93% {
    transform: rotate3d(0.908, -0.419, 0, -3deg);
  }
  100% {
    transform: rotate3d(0.908, -0.419, 0, 0deg);
  }
}

@keyframes bf_wing_left {
  0%,
  100% {
    transform: rotate3d(0.908, -0.419, 0, -8deg);
  }
  50% {
    transform: rotate3d(0.908, -0.419, 0, 52deg);
  }
}

@keyframes bf_wing_right {
  0%,
  100% {
    transform: rotate3d(0.908, -0.419, 0, 8deg);
  }
  50% {
    transform: rotate3d(0.908, -0.419, 0, -52deg);
  }
}
/* -- // 나비 날갯짓 (등장 직후 잦아듦 · 비행 중 반복) -- */

/* -- 내려앉은 나비 (날개 접기 · 주기적 날갯짓) -- */
@keyframes bf_rest_left {
  0% {
    transform: rotate3d(0.908, -0.419, 0, -8deg);
  }
  45% {
    transform: rotate3d(0.908, -0.419, 0, 18deg);
  }
  100% {
    transform: rotate3d(0.908, -0.419, 0, 0deg);
  }
}

@keyframes bf_rest_right {
  0% {
    transform: rotate3d(0.908, -0.419, 0, 8deg);
  }
  45% {
    transform: rotate3d(0.908, -0.419, 0, -18deg);
  }
  100% {
    transform: rotate3d(0.908, -0.419, 0, 0deg);
  }
}

@keyframes bf_idle_left {
  0% {
    transform: rotate3d(0.908, -0.419, 0, 0deg);
  }
  3% {
    transform: rotate3d(0.908, -0.419, 0, 34deg);
  }
  6.5% {
    transform: rotate3d(0.908, -0.419, 0, 3deg);
  }
  10% {
    transform: rotate3d(0.908, -0.419, 0, 22deg);
  }
  13.5%,
  100% {
    transform: rotate3d(0.908, -0.419, 0, 0deg);
  }
}

@keyframes bf_idle_right {
  0% {
    transform: rotate3d(0.908, -0.419, 0, 0deg);
  }
  3% {
    transform: rotate3d(0.908, -0.419, 0, -34deg);
  }
  6.5% {
    transform: rotate3d(0.908, -0.419, 0, -3deg);
  }
  10% {
    transform: rotate3d(0.908, -0.419, 0, -22deg);
  }
  13.5%,
  100% {
    transform: rotate3d(0.908, -0.419, 0, 0deg);
  }
}
/* -- // 내려앉은 나비 (날개 접기 · 주기적 날갯짓) -- */

/* -- 기부 버튼 위 나비 (착석 · 날갯짓 · 호버 · 주기적 날갯짓) -- */
@keyframes bf_seat {
  0% {
    opacity: 0;
    transform: translate(28px, -20px) rotate(4deg);
    filter: drop-shadow(42px 54px 20px rgba(48, 33, 23, 0.14));
  }
  30% {
    opacity: 1;
  }
  36% {
    transform: translate(15px, -11px) rotate(3deg);
    filter: drop-shadow(28px 36px 14px rgba(48, 33, 23, 0.28));
  }
  60% {
    transform: translate(8px, -6px) rotate(2deg);
    filter: drop-shadow(20px 26px 10px rgba(48, 33, 23, 0.38));
  }
  80% {
    transform: translate(3px, -2px) rotate(1deg);
    filter: drop-shadow(15px 20px 8px rgba(48, 33, 23, 0.46));
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg);
    filter: drop-shadow(13px 17px 7px rgba(48, 33, 23, 0.5));
  }
}

@keyframes bf_seat_wing {
  0% {
    transform: rotate(32deg) scaleY(1) rotate(-32deg);
  }
  9% {
    transform: rotate(32deg) scaleY(0.62) rotate(-32deg);
  }
  20% {
    transform: rotate(32deg) scaleY(1) rotate(-32deg);
  }
  32% {
    transform: rotate(32deg) scaleY(0.71) rotate(-32deg);
  }
  44% {
    transform: rotate(32deg) scaleY(1) rotate(-32deg);
  }
  56% {
    transform: rotate(32deg) scaleY(0.8) rotate(-32deg);
  }
  68% {
    transform: rotate(32deg) scaleY(1) rotate(-32deg);
  }
  80% {
    transform: rotate(32deg) scaleY(0.88) rotate(-32deg);
  }
  90% {
    transform: rotate(32deg) scaleY(1) rotate(-32deg);
  }
  97% {
    transform: rotate(32deg) scaleY(0.95) rotate(-32deg);
  }
  100% {
    transform: rotate(32deg) scaleY(1) rotate(-32deg);
  }
}

@keyframes bf_seat_wave {
  0% {
    transform: rotate(32deg) scaleY(1) rotate(-32deg);
  }
  7% {
    transform: rotate(32deg) scaleY(0.78) rotate(-32deg);
  }
  15% {
    transform: rotate(32deg) scaleY(1) rotate(-32deg);
  }
  22% {
    transform: rotate(32deg) scaleY(0.89) rotate(-32deg);
  }
  29%,
  100% {
    transform: rotate(32deg) scaleY(1) rotate(-32deg);
  }
}

@keyframes bf_seat_idle {
  0% {
    transform: rotate(32deg) scaleY(1) rotate(-32deg);
  }
  3% {
    transform: rotate(32deg) scaleY(0.72) rotate(-32deg);
  }
  6.5% {
    transform: rotate(32deg) scaleY(1) rotate(-32deg);
  }
  10% {
    transform: rotate(32deg) scaleY(0.84) rotate(-32deg);
  }
  13.5%,
  100% {
    transform: rotate(32deg) scaleY(1) rotate(-32deg);
  }
}
/* -- // 기부 버튼 위 나비 (착석 · 날갯짓 · 호버 · 주기적 날갯짓) -- */

/* -- 스토리 본문 글자 또렷해짐 -- */
@keyframes ink_focus {
  from {
    opacity: 0.15;
    filter: blur(7px);
  }
}
/* -- // 스토리 본문 글자 또렷해짐 -- */

/* -- 보상 안내 등장 (장식 조각 · 좌우 진입) -- */
@keyframes reward_bit_a {
  from {
    opacity: 0;
    transform: translate(-17px, -14px) rotate(-7deg);
  }
  66% {
    opacity: 1;
    transform: translate(2px, 2px) rotate(1deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes reward_bit_b {
  from {
    opacity: 0;
    transform: translate(15px, -12px) rotate(6deg);
  }
  66% {
    opacity: 1;
    transform: translate(-2px, 2px) rotate(-1deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes reward_bit_c {
  from {
    opacity: 0;
    transform: translate(-13px, 15px) rotate(5deg);
  }
  66% {
    opacity: 1;
    transform: translate(2px, -2px) rotate(-1deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes reward_bit_d {
  from {
    opacity: 0;
    transform: translate(16px, 13px) rotate(-5deg);
  }
  66% {
    opacity: 1;
    transform: translate(-2px, -2px) rotate(1deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes reward_in_left {
  from {
    opacity: 0;
    transform: translateX(-18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes reward_in_right {
  from {
    opacity: 0;
    transform: translateX(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes reward_in_right_flip {
  from {
    opacity: 0;
    transform: translateX(18px) scaleX(-1);
  }
  to {
    opacity: 1;
    transform: scaleX(-1);
  }
}
/* -- // 보상 안내 등장 (장식 조각 · 좌우 진입) -- */

/* -- 추모 공간 장식 등장과 그림자 흔들림 -- */
@keyframes memory_deco_in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes memory_shade_left {
  from {
    transform: translate(-22px, -12px);
  }
  to {
    transform: none;
  }
}

@keyframes memory_shade_right {
  from {
    transform: translate(22px, -14px);
  }
  to {
    transform: none;
  }
}

@keyframes memory_shade_left_drift {
  from {
    translate: 156px 0;
    opacity: 0.62;
  }
  to {
    translate: -156px 0;
    opacity: 0.84;
  }
}

@keyframes memory_shade_right_drift {
  from {
    translate: -184px 0;
    opacity: 0.62;
  }
  to {
    translate: 184px 0;
    opacity: 0.84;
  }
}
/* -- // 추모 공간 장식 등장과 그림자 흔들림 -- */

/* -- 추모 공간 꽃 (솟아오름 · 좌우 흔들림) -- */
@keyframes memory_flower_rise {
  from {
    transform: scaleY(0.98);
  }
  to {
    transform: none;
  }
}

@keyframes memory_flower_drift {
  from {
    translate: -7px 0;
  }
  to {
    translate: 7px 0;
  }
}
/* -- // 추모 공간 꽃 (솟아오름 · 좌우 흔들림) -- */

/* -- 추모 공간 나비 (날개 접기 · 명암 · 그림자 · 부유) -- */
@keyframes memory_bf_left {
  0%,
  100% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(32deg);
  }
}

@keyframes memory_bf_right {
  0%,
  100% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(-32deg);
  }
}

@keyframes memory_bf_soft_left {
  0%,
  100% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(20deg);
  }
}

@keyframes memory_bf_soft_right {
  0%,
  100% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(-20deg);
  }
}

@keyframes memory_bf_fold_left {
  0%,
  100% {
    transform: rotate3d(0.811, 0.585, 0, 0deg);
  }
  50% {
    transform: rotate3d(0.811, 0.585, 0, 32deg);
  }
}

@keyframes memory_bf_fold_right {
  0%,
  100% {
    transform: rotate3d(0.811, 0.585, 0, 0deg);
  }
  50% {
    transform: rotate3d(0.811, 0.585, 0, -32deg);
  }
}

@keyframes memory_bf_lit {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.05);
  }
}

@keyframes memory_bf_dim {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(0.87);
  }
}

@keyframes memory_bf_cast {
  0%,
  100% {
    translate: 8% 12%;
    opacity: 0.24;
  }
  50% {
    translate: 12% 17%;
    opacity: 0.17;
  }
}

@keyframes memory_bf_drift {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -5px;
  }
}
/* -- // 추모 공간 나비 (날개 접기 · 명암 · 그림자 · 부유) -- */

/* -- 모션 최소화 설정에서 애니메이션 정지 -- */
@media (prefers-reduced-motion: reduce) {
  .path {
    animation: none;
    stroke-dashoffset: 0;
  }
  .main-visual .intro .desc,
  .main-visual .intro .action {
    animation: none;
  }
  .main-visual .intro .action .button .line::before {
    animation: none;
    width: 100%;
  }
  .main-visual .intro .action .button .line::after {
    animation: none;
    transform: rotate(45deg) scaleX(1);
  }
  .main-visual .intro .texture .butterfly {
    animation: none;
    opacity: 1;
  }
  .main-visual .intro .texture .butterfly .route-x,
  .main-visual .intro .texture .butterfly .route-y,
  .main-visual .intro .texture .butterfly .route-z,
  .main-visual .intro .texture .butterfly .route-tilt,
  .main-visual .intro .texture .butterfly .fly-x,
  .main-visual .intro .texture .butterfly .fly-y,
  .main-visual .intro .texture .butterfly .tilt,
  .main-visual .intro .texture .butterfly .lean,
  .main-visual .intro .texture .butterfly .wing {
    animation: none;
    transform: none;
    filter: none;
  }
  .main-visual .intro .texture .butterfly .shade {
    animation: none;
  }
  .main-visual .story .story-item .content .ink {
    animation: none;
  }
  .main-visual .story .story-item .flower .leaf {
    transition: none;
  }
  .main-visual .message .action .butterfly,
  .main-visual .message .action .butterfly img,
  .main-visual .message .action.settled .butterfly,
  .main-visual .message .action.settled .butterfly img,
  .main-visual .message .action.settled .button:hover ~ .butterfly img {
    animation: none;
    transform: none;
  }
  .main-visual .message .action.settled .butterfly {
    opacity: 1;
  }
  .main-contents .reward .deco .bit,
  .main-contents .reward .showcase .log-list .log-item .sprig,
  .main-contents .reward .showcase .log-list .log-item .doc,
  .main-contents .reward .showcase .log-list .log-item .flower {
    animation: none;
    opacity: 1;
  }
  .main-contents .memory .deco {
    animation: none;
    opacity: 1;
  }
  .main-contents .memory .deco span {
    animation: none;
    transform: none;
  }
  .float-area.shown .button,
  .float-area.shown .deco .flower,
  .float-area.shown .deco .butterfly,
  .float-area.shown .deco .butterfly img,
  .float-area.shown:hover .deco .butterfly img {
    animation: none;
  }
}
/* -- // 모션 최소화 설정에서 애니메이션 정지 -- */

/* -- 붓글씨 획 순차 드로잉 (k0~k164) -- */
@keyframes k0 {
  0% {
    stroke-dashoffset: 100.6;
  }
  0.264%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k1 {
  0%,
  0.264% {
    stroke-dashoffset: 100.6;
  }
  0.563%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k2 {
  0%,
  0.551% {
    stroke-dashoffset: 100.6;
  }
  0.85%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k3 {
  0%,
  0.85% {
    stroke-dashoffset: 100.6;
  }
  1.149%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k4 {
  0%,
  1.137% {
    stroke-dashoffset: 100.6;
  }
  1.436%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k5 {
  0%,
  1.436% {
    stroke-dashoffset: 100.6;
  }
  1.723%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k6 {
  0%,
  1.723% {
    stroke-dashoffset: 100.6;
  }
  2.01%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k7 {
  0%,
  2.021% {
    stroke-dashoffset: 100.6;
  }
  2.308%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k8 {
  0%,
  2.308% {
    stroke-dashoffset: 100.6;
  }
  2.607%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k9 {
  0%,
  2.607% {
    stroke-dashoffset: 100.6;
  }
  2.906%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k10 {
  0%,
  2.894% {
    stroke-dashoffset: 100.6;
  }
  3.193%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k11 {
  0%,
  3.204% {
    stroke-dashoffset: 100.6;
  }
  3.503%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k12 {
  0%,
  3.491% {
    stroke-dashoffset: 100.6;
  }
  3.652%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k13 {
  0%,
  4.801% {
    stroke-dashoffset: 100.6;
  }
  5.065%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k14 {
  0%,
  5.053% {
    stroke-dashoffset: 100.6;
  }
  5.352%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k15 {
  0%,
  5.364% {
    stroke-dashoffset: 100.6;
  }
  5.651%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k16 {
  0%,
  5.639% {
    stroke-dashoffset: 100.6;
  }
  5.915%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k17 {
  0%,
  5.915% {
    stroke-dashoffset: 100.6;
  }
  6.202%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k18 {
  0%,
  6.202% {
    stroke-dashoffset: 100.6;
  }
  6.489%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k19 {
  0%,
  6.501% {
    stroke-dashoffset: 100.6;
  }
  6.788%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k20 {
  0%,
  6.788% {
    stroke-dashoffset: 100.6;
  }
  7.075%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k21 {
  0%,
  7.075% {
    stroke-dashoffset: 100.6;
  }
  7.373%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k22 {
  0%,
  7.373% {
    stroke-dashoffset: 100.6;
  }
  7.661%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k23 {
  0%,
  7.661% {
    stroke-dashoffset: 100.6;
  }
  7.948%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k24 {
  0%,
  7.959% {
    stroke-dashoffset: 100.6;
  }
  8.235%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k25 {
  0%,
  8.223% {
    stroke-dashoffset: 100.6;
  }
  8.464%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k26 {
  0%,
  8.464% {
    stroke-dashoffset: 100.6;
  }
  8.763%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k27 {
  0%,
  8.775% {
    stroke-dashoffset: 100.6;
  }
  9.073%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k28 {
  0%,
  9.073% {
    stroke-dashoffset: 100.6;
  }
  9.372%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k29 {
  0%,
  9.36% {
    stroke-dashoffset: 100.6;
  }
  9.67%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k30 {
  0%,
  9.67% {
    stroke-dashoffset: 100.6;
  }
  9.854%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k31 {
  0%,
  12.611% {
    stroke-dashoffset: 100.6;
  }
  12.875%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k32 {
  0%,
  12.875% {
    stroke-dashoffset: 100.6;
  }
  13.15%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k33 {
  0%,
  13.162% {
    stroke-dashoffset: 100.6;
  }
  13.449%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k34 {
  0%,
  13.449% {
    stroke-dashoffset: 100.6;
  }
  13.736%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k35 {
  0%,
  13.748% {
    stroke-dashoffset: 100.6;
  }
  14.0%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k36 {
  0%,
  13.989% {
    stroke-dashoffset: 100.6;
  }
  14.23%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k37 {
  0%,
  14.23% {
    stroke-dashoffset: 100.6;
  }
  14.483%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k38 {
  0%,
  14.483% {
    stroke-dashoffset: 100.6;
  }
  14.781%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k39 {
  0%,
  14.781% {
    stroke-dashoffset: 100.6;
  }
  15.057%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k40 {
  0%,
  15.057% {
    stroke-dashoffset: 100.6;
  }
  15.31%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k41 {
  0%,
  15.298% {
    stroke-dashoffset: 100.6;
  }
  15.585%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k42 {
  0%,
  15.597% {
    stroke-dashoffset: 100.6;
  }
  15.884%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k43 {
  0%,
  15.884% {
    stroke-dashoffset: 100.6;
  }
  16.148%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k44 {
  0%,
  17.296% {
    stroke-dashoffset: 100.6;
  }
  17.572%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k45 {
  0%,
  17.572% {
    stroke-dashoffset: 100.6;
  }
  17.882%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k46 {
  0%,
  17.882% {
    stroke-dashoffset: 100.6;
  }
  18.192%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k47 {
  0%,
  18.192% {
    stroke-dashoffset: 100.6;
  }
  18.422%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k48 {
  0%,
  18.422% {
    stroke-dashoffset: 100.6;
  }
  18.721%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k49 {
  0%,
  18.732% {
    stroke-dashoffset: 100.6;
  }
  19.031%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k50 {
  0%,
  19.031% {
    stroke-dashoffset: 100.6;
  }
  19.168%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k51 {
  0%,
  21.81% {
    stroke-dashoffset: 100.6;
  }
  22.086%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k52 {
  0%,
  22.086% {
    stroke-dashoffset: 100.6;
  }
  22.384%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k53 {
  0%,
  22.384% {
    stroke-dashoffset: 100.6;
  }
  22.648%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k54 {
  0%,
  22.648% {
    stroke-dashoffset: 100.6;
  }
  22.947%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k55 {
  0%,
  22.947% {
    stroke-dashoffset: 100.6;
  }
  23.085%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k56 {
  0%,
  24.233% {
    stroke-dashoffset: 100.6;
  }
  24.509%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k57 {
  0%,
  24.498% {
    stroke-dashoffset: 100.6;
  }
  24.808%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k58 {
  0%,
  24.808% {
    stroke-dashoffset: 100.6;
  }
  25.106%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k59 {
  0%,
  25.106% {
    stroke-dashoffset: 100.6;
  }
  25.382%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k60 {
  0%,
  25.393% {
    stroke-dashoffset: 100.6;
  }
  25.703%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k61 {
  0%,
  25.703% {
    stroke-dashoffset: 100.6;
  }
  25.899%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k62 {
  0%,
  27.036% {
    stroke-dashoffset: 100.6;
  }
  27.311%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k63 {
  0%,
  27.323% {
    stroke-dashoffset: 100.6;
  }
  27.598%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k64 {
  0%,
  27.587% {
    stroke-dashoffset: 100.6;
  }
  27.886%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k65 {
  0%,
  27.897% {
    stroke-dashoffset: 100.6;
  }
  28.196%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k66 {
  0%,
  28.184% {
    stroke-dashoffset: 100.6;
  }
  28.483%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k67 {
  0%,
  28.483% {
    stroke-dashoffset: 100.6;
  }
  28.667%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k68 {
  0%,
  29.815% {
    stroke-dashoffset: 100.6;
  }
  30.079%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k69 {
  0%,
  30.079% {
    stroke-dashoffset: 100.6;
  }
  30.378%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k70 {
  0%,
  30.378% {
    stroke-dashoffset: 100.6;
  }
  30.688%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k71 {
  0%,
  30.699% {
    stroke-dashoffset: 100.6;
  }
  30.975%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k72 {
  0%,
  30.964% {
    stroke-dashoffset: 100.6;
  }
  31.262%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k73 {
  0%,
  31.262% {
    stroke-dashoffset: 100.6;
  }
  31.515%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k74 {
  0%,
  31.515% {
    stroke-dashoffset: 100.6;
  }
  31.791%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k75 {
  0%,
  31.802% {
    stroke-dashoffset: 100.6;
  }
  32.112%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k76 {
  0%,
  32.101% {
    stroke-dashoffset: 100.6;
  }
  32.273%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k77 {
  0%,
  35.029% {
    stroke-dashoffset: 100.6;
  }
  35.316%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k78 {
  0%,
  35.328% {
    stroke-dashoffset: 100.6;
  }
  35.695%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k79 {
  0%,
  35.695% {
    stroke-dashoffset: 100.6;
  }
  36.006%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k80 {
  0%,
  35.994% {
    stroke-dashoffset: 100.6;
  }
  36.155%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k81 {
  0%,
  37.303% {
    stroke-dashoffset: 100.6;
  }
  37.567%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k82 {
  0%,
  37.567% {
    stroke-dashoffset: 100.6;
  }
  37.866%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k83 {
  0%,
  37.866% {
    stroke-dashoffset: 100.6;
  }
  38.165%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k84 {
  0%,
  38.153% {
    stroke-dashoffset: 100.6;
  }
  38.452%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k85 {
  0%,
  38.463% {
    stroke-dashoffset: 100.6;
  }
  38.75%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k86 {
  0%,
  38.75% {
    stroke-dashoffset: 100.6;
  }
  39.038%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k87 {
  0%,
  39.038% {
    stroke-dashoffset: 100.6;
  }
  39.336%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k88 {
  0%,
  39.336% {
    stroke-dashoffset: 100.6;
  }
  39.612%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k89 {
  0%,
  39.612% {
    stroke-dashoffset: 100.6;
  }
  39.899%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k90 {
  0%,
  39.899% {
    stroke-dashoffset: 100.6;
  }
  40.198%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k91 {
  0%,
  40.198% {
    stroke-dashoffset: 100.6;
  }
  40.485%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k92 {
  0%,
  40.496% {
    stroke-dashoffset: 100.6;
  }
  40.795%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k93 {
  0%,
  40.783% {
    stroke-dashoffset: 100.6;
  }
  41.001%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k94 {
  0%,
  43.758% {
    stroke-dashoffset: 100.6;
  }
  44.022%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k95 {
  0%,
  44.022% {
    stroke-dashoffset: 100.6;
  }
  44.298%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k96 {
  0%,
  44.298% {
    stroke-dashoffset: 100.6;
  }
  44.573%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k97 {
  0%,
  44.573% {
    stroke-dashoffset: 100.6;
  }
  44.86%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k98 {
  0%,
  44.872% {
    stroke-dashoffset: 100.6;
  }
  45.079%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k99 {
  0%,
  45.079% {
    stroke-dashoffset: 100.6;
  }
  45.366%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k100 {
  0%,
  45.354% {
    stroke-dashoffset: 100.6;
  }
  45.618%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k101 {
  0%,
  45.618% {
    stroke-dashoffset: 100.6;
  }
  45.906%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k102 {
  0%,
  45.906% {
    stroke-dashoffset: 100.6;
  }
  46.17%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k103 {
  0%,
  46.17% {
    stroke-dashoffset: 100.6;
  }
  46.491%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k104 {
  0%,
  46.491% {
    stroke-dashoffset: 100.6;
  }
  46.721%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k105 {
  0%,
  46.721% {
    stroke-dashoffset: 100.6;
  }
  47.02%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k106 {
  0%,
  47.02% {
    stroke-dashoffset: 100.6;
  }
  47.203%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k107 {
  0%,
  48.352% {
    stroke-dashoffset: 100.6;
  }
  48.639%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k108 {
  0%,
  48.639% {
    stroke-dashoffset: 100.6;
  }
  48.926%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k109 {
  0%,
  48.926% {
    stroke-dashoffset: 100.6;
  }
  49.179%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k110 {
  0%,
  49.179% {
    stroke-dashoffset: 100.6;
  }
  49.489%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k111 {
  0%,
  49.489% {
    stroke-dashoffset: 100.6;
  }
  49.788%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k112 {
  0%,
  49.788% {
    stroke-dashoffset: 100.6;
  }
  50.017%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k113 {
  0%,
  50.017% {
    stroke-dashoffset: 100.6;
  }
  50.327%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k114 {
  0%,
  50.339% {
    stroke-dashoffset: 100.6;
  }
  50.523%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k115 {
  0%,
  51.671% {
    stroke-dashoffset: 100.6;
  }
  51.947%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k116 {
  0%,
  51.947% {
    stroke-dashoffset: 100.6;
  }
  52.268%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k117 {
  0%,
  52.268% {
    stroke-dashoffset: 100.6;
  }
  52.544%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k118 {
  0%,
  52.544% {
    stroke-dashoffset: 100.6;
  }
  52.682%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k119 {
  0%,
  53.704% {
    stroke-dashoffset: 100.6;
  }
  53.968%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k120 {
  0%,
  53.968% {
    stroke-dashoffset: 100.6;
  }
  54.244%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k121 {
  0%,
  54.255% {
    stroke-dashoffset: 100.6;
  }
  54.519%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k122 {
  0%,
  54.519% {
    stroke-dashoffset: 100.6;
  }
  54.806%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k123 {
  0%,
  54.806% {
    stroke-dashoffset: 100.6;
  }
  55.071%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k124 {
  0%,
  55.071% {
    stroke-dashoffset: 100.6;
  }
  55.358%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k125 {
  0%,
  55.369% {
    stroke-dashoffset: 100.6;
  }
  55.656%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k126 {
  0%,
  55.656% {
    stroke-dashoffset: 100.6;
  }
  55.909%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k127 {
  0%,
  55.898% {
    stroke-dashoffset: 100.6;
  }
  56.185%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k128 {
  0%,
  56.196% {
    stroke-dashoffset: 100.6;
  }
  56.334%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k129 {
  0%,
  59.079% {
    stroke-dashoffset: 100.6;
  }
  59.446%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k130 {
  0%,
  59.458% {
    stroke-dashoffset: 100.6;
  }
  59.596%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k131 {
  0%,
  60.71% {
    stroke-dashoffset: 100.6;
  }
  60.974%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k132 {
  0%,
  60.974% {
    stroke-dashoffset: 100.6;
  }
  61.261%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k133 {
  0%,
  61.273% {
    stroke-dashoffset: 100.6;
  }
  61.56%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k134 {
  0%,
  61.56% {
    stroke-dashoffset: 100.6;
  }
  61.847%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k135 {
  0%,
  61.858% {
    stroke-dashoffset: 100.6;
  }
  62.157%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k136 {
  0%,
  62.145% {
    stroke-dashoffset: 100.6;
  }
  62.444%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k137 {
  0%,
  62.444% {
    stroke-dashoffset: 100.6;
  }
  62.616%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k138 {
  0%,
  65.384% {
    stroke-dashoffset: 100.6;
  }
  65.568%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k139 {
  0%,
  65.568% {
    stroke-dashoffset: 100.6;
  }
  65.855%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k140 {
  0%,
  65.855% {
    stroke-dashoffset: 100.6;
  }
  66.131%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k141 {
  0%,
  66.131% {
    stroke-dashoffset: 100.6;
  }
  66.269%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k142 {
  0%,
  67.406% {
    stroke-dashoffset: 100.6;
  }
  67.658%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k143 {
  0%,
  67.67% {
    stroke-dashoffset: 100.6;
  }
  67.957%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k144 {
  0%,
  67.957% {
    stroke-dashoffset: 100.6;
  }
  68.209%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k145 {
  0%,
  68.209% {
    stroke-dashoffset: 100.6;
  }
  68.508%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k146 {
  0%,
  68.508% {
    stroke-dashoffset: 100.6;
  }
  68.772%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k147 {
  0%,
  68.772% {
    stroke-dashoffset: 100.6;
  }
  69.025%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k148 {
  0%,
  69.036% {
    stroke-dashoffset: 100.6;
  }
  69.335%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k149 {
  0%,
  69.335% {
    stroke-dashoffset: 100.6;
  }
  69.588%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k150 {
  0%,
  69.576% {
    stroke-dashoffset: 100.6;
  }
  69.714%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k151 {
  0%,
  70.771% {
    stroke-dashoffset: 100.6;
  }
  71.046%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k152 {
  0%,
  71.046% {
    stroke-dashoffset: 100.6;
  }
  71.356%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k153 {
  0%,
  71.356% {
    stroke-dashoffset: 100.6;
  }
  71.644%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k154 {
  0%,
  71.644% {
    stroke-dashoffset: 100.6;
  }
  71.954%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k155 {
  0%,
  71.954% {
    stroke-dashoffset: 100.6;
  }
  72.252%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k156 {
  0%,
  72.252% {
    stroke-dashoffset: 100.6;
  }
  72.539%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k157 {
  0%,
  72.539% {
    stroke-dashoffset: 100.6;
  }
  72.826%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k158 {
  0%,
  72.838% {
    stroke-dashoffset: 100.6;
  }
  73.137%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k159 {
  0%,
  73.125% {
    stroke-dashoffset: 100.6;
  }
  73.366%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k160 {
  0%,
  73.378% {
    stroke-dashoffset: 100.6;
  }
  73.642%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k161 {
  0%,
  73.642% {
    stroke-dashoffset: 100.6;
  }
  73.918%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k162 {
  0%,
  73.918% {
    stroke-dashoffset: 100.6;
  }
  74.193%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k163 {
  0%,
  74.193% {
    stroke-dashoffset: 100.6;
  }
  74.48%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k164 {
  0%,
  74.48% {
    stroke-dashoffset: 100.6;
  }
  74.733%,
  100% {
    stroke-dashoffset: 0;
  }
}
/* -- // 붓글씨 획 순차 드로잉 (k0~k164) -- */

/* -- CTA 버튼 밑줄과 화살촉 -- */
@keyframes line_body {
  0% {
    width: 0;
  }
  60%,
  100% {
    width: 100%;
  }
}

@keyframes line_head {
  0%,
  60% {
    transform: rotate(45deg) scaleX(0);
  }
  100% {
    transform: rotate(45deg) scaleX(1);
  }
}
/* -- // CTA 버튼 밑줄과 화살촉 -- */