@charset "UTF-8";

/* 위로가기 버튼 스타일 */
.persimmon-loader {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  cursor: pointer;
  z-index: 1000;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform: translateY(100px);
  opacity: 0;
  background: var(--black-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.persimmon-loader:hover {
  transform: translateY(0) scale(1.1);
  background: var(--main-color);
}

.persimmon-loader.show {
  transform: translateY(0);
  opacity: 1;
  animation: button-bounce 1.5s ease-in-out infinite;
}

.arrow-img {
  width: 22px;
  height: 22px;
  filter: brightness(0) invert(1); /* 확실히 흰색으로 변경 */
}

@keyframes button-bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

.loader {
  margin: 0 0 2em;
  height: 100px;
  width: 20%;
  text-align: center;
  padding: 1em;
  margin: 0 auto 1em;
  display: inline-block;
  vertical-align: top;
}
/*
  Set the color of the icon
*/
.loader loader--style5 > svg path,
svg circle {
  fill: var(--main-color);
}

/* path-animation-css */
.shake-bottom {
  animation: shake-bottom 9s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
}

@keyframes shake-bottom {
  0%,
  100% {
    transform: rotate(0deg);
    transform-origin: 50% 100%;
  }
  10% {
    transform: rotate(5deg); /* 2deg → 5deg */
  }
  20%,
  40%,
  60% {
    transform: rotate(-10deg); /* -4deg → -10deg */
  }
  30%,
  50%,
  70% {
    transform: rotate(10deg); /* 4deg → 10deg */
  }
  80% {
    transform: rotate(-5deg); /* -2deg → -5deg */
  }
  90% {
    transform: rotate(5deg); /* 2deg → 5deg */
  }
}
/* section-head */
.section-head {
  display: flex;
  flex-direction: column;
  gap: 100px;

  color: var(--main-color);
}

/* head-info */
.head-info {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* work-info */
.work-info {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 20px;
}

/* +++++++++++++++++++++++++++++++ */

.plus {
  font-weight: 500;
  color: var(--black-color);

  background: #fff;
  border: 2.5px solid var(--black-color);
  border-radius: 50px;
  padding: 10px 22px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  transition: 0.5s;
}

.plus::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url(../img/plus-b.png);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  flex: 0 0 auto;
  transition: 0.5s;
}

.plus:hover {
  background: var(--black-color);
}
.plus:hover::after {
  content: "";
  background-image: url(../img/plus.png);
}
/* =====================================nav */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 10px 120px;
  backdrop-filter: blur(2px);
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 90%,
    rgba(0, 0, 0, 0) 100%
  );

  z-index: 1000;
  transform: translateY(-100%);
  transform: translateY(-100%);
  transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s;
}

.nav .inner {
  display: flex;
  justify-content: end;
  align-items: center;

  gap: 50px;
}

.nav ul {
  display: flex;
  gap: 45px;
}

.nav ul a {
  background: var(--black-color);
  padding: 10px 22px;
  border-radius: 50px;
  border: 3px solid var(--black-color);
  color: var(--ivory-color);

  transition: 0.5s;
}

.nav ul a:hover {
  background: var(--ivory-color);
  padding: 10px 22px;
  border: 3px solid var(--main-color);
  border-radius: 50px;

  color: var(--main-color);
}

.nav a {
  height: 63px;
  width: 100px;
}

.nav a img {
  height: 100%;
  transition: 0.6s;
}

.nav a:hover img {
  content: url(../img/logo-m.png);
  object-fit: cover;
}

/* ======================================main */
.main {
  position: relative;
}

/* ===========================================hero */
#hero {
  height: 100vh;
  background: linear-gradient(
    to top,
    #ffffff 0%,
    var(--ivory-color) 30%,
    var(--ivory-color) 100%
  );
  display: flex;
  align-items: center;
}

#hero .inner {
  display: flex;
  justify-content: center;
  flex-direction: column;

  color: var(--main-color);
}

#hero .visual-title {
  display: flex;
  align-items: center;
  flex-direction: column;

  gap: 40px;
}

#hero .visual-title h2 {
  font-size: 150px;
  font-weight: 500;

  line-height: 1.2;
}

#hero .visual-title h4 {
  font-family: var(--main-font);
  font-size: 24px;
  font-weight: 200;
}

#hero .visual-img {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  margin-top: 80px;
}

#hero figure svg {
  overflow: visible;
  width: 100%;
}

#hero figure {
  width: 600px;
  display: flex;
  align-items: center;
  justify-content: center;

  flex-direction: column;

  gap: 30px;
}

#hero figure::after {
  content: "";
  background: var(--main-color);

  width: 200px;
  height: 20px;

  border-radius: 50%;

  opacity: 50%;
}

#hero .plus {
  border: none;
  background: var(--ivory-color);
  border: 3px solid var(--main-color);
  color: var(--main-color);
}

#hero .plus::after {
  content: "";
  background-image: url(../img/plus.png);
}

#hero .plus:hover {
  background: var(--black-color);
  border: 3px solid var(--black-color);
}

#hero .plus:hover::after {
  content: "";
}
/* ============================================about */
#about {
  height: 100vh;

  display: flex;
  align-items: center;
}

#about .inner {
  display: flex;
  justify-content: space-between;

  color: var(--black-color);
}

#about .leeyujin {
  display: flex;
  align-items: start;
  flex-direction: column;
  gap: 61px;
}

#about .leeyujin dl {
  display: flex;
  align-items: start;
  flex-direction: column;
  gap: 20px;

  color: var(--main-color);
}

#about .leeyujin dl dt {
  font-family: var(--main-font);
  font-size: 30px;
}

#about .leeyujin dl dd {
  font-size: 25px;
}

#about .leeyujin address {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

#about .leeyujin figure {
  width: 250px;
  height: 350px;
}
#about .leeyujin img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#about .career::before {
  content: "";
  position: absolute;

  background: url(../img/persimmon+i.png) 50% 50% no-repeat;
  background-size: contain;
  left: -40%;
  bottom: 0%;
  width: 250px;
  height: 250px;
}

#about .career::after {
  content: "";
  position: absolute;
  background: url(../img/persimmon+seed.png) 50% 50% no-repeat;
  background-size: cover;
  width: 80px;
  aspect-ratio: 231/201;
  left: -45%;
  bottom: 3%;
  animation: tick-seed 2s ease-in-out infinite;
  transform-origin: 50% 100%;
}

/* 새싹 똑딱 흔들리는 애니메이션 (11시 ↔ 1시) */
@keyframes tick-seed {
  0%,
  100% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(7deg);
  }
}

#about .career {
  position: relative;

  width: 969px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#about .career h4 {
  color: var(--main-color);
}

#about .education {
  display: flex;
  justify-content: space-between;
}

#about .education dl {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

#about .education .education-item {
  width: 686px;
  display: flex;
  justify-content: space-between;
}

#about .experience {
  display: flex;
  justify-content: space-between;
}

#about .experience dl {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

#about .experience .experience-item {
  width: 686px;
  display: flex;
  justify-content: space-between;
}

#about .skills {
  display: flex;
  justify-content: space-between;
}

#about .skills ul {
  width: 686px;
  display: flex;
  justify-content: space-between;
}

/* ===========================================uiux */

#uiux {
  padding: 120px 0;
}

#uiux .inner {
  /* border: 5px solid #f00; */
  height: 100%;
}

#uiux .inner h3::before {
  content: "";
  position: absolute;
  background: url(../img/persimmon+pc.png) 50% 50% no-repeat;
  background-size: contain;
  width: 260px;
  aspect-ratio: 573/418;

  left: 50%;
  top: -180%;
  transform: translateX(-50%);
}

#uiux .inner h3::after {
  content: "";
  position: absolute;
  background: url(../img/persimmon+pcp.png) 50% 50% no-repeat;
  background-size: contain;
  width: 200px;
  aspect-ratio: 405/258;

  left: 50%;
  top: -147%;
  transform: translateX(-50%);
  animation: swing-left-right 2.5s ease-in-out infinite;
}

/* 좌우로 흔들리는 애니메이션 */
@keyframes swing-left-right {
  0% {
    transform: translateX(-30%) translateX(-63px);
  }
  50% {
    transform: translateX(-32%) translateX(-15px);
  }
  100% {
    transform: translateX(-30%) translateX(-63px);
  }
}
#uiux .inner h3 {
  text-align: center;

  position: relative;
}

#uiux .uiux-wrap {
  /* border: 5px solid #101cc4; */
  height: 100vh;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#uiux .head-info {
  margin-top: 20px;
  text-align: center;
}

#uiux ul {
  margin-top: 20px;

  position: relative;
  perspective: 1000px;

  width: 100%;
  height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#uiux ul li {
  display: flex;
  flex-direction: column;
  gap: 20px;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;

  /* 뒤집혔을 때 숨김 */
  backface-visibility: hidden;
  transform-origin: 50% 50%;
  /* border: 1px solid #000; */
}

#uiux ul li .card-body {
  border-radius: 70px;

  position: relative;
  overflow: hidden;
  height: 600px;
  background: #f5f5f5;

  box-shadow: 0px 1px 20px #56565686;
}

#uiux ul li .project-info {
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;

  /* padding: 0 0 0 100px; */

  position: absolute;
  top: 50%;
  left: 180px;
  transform: translateY(-50%);
  /* background: pink; */

  z-index: 10;
}

#uiux ul li .project-info > figure {
  width: 250px;

  display: flex;
  flex-direction: column;
  gap: 20px;
}

#uiux ul li .mockup {
  width: 100%;
  height: 100%;
}

#uiux ul li .mockup img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 70px;
}

#uiux p {
  color: #fff;
}

#uiux .plus {
  border: none;
  background: #ffffff;
  border: 3px solid var(--ivory-color);
}

#uiux .plus:hover {
  background: var(--black-color);
  border: 3px solid var(--main-color);
}

#uiux .plus:hover::after {
  content: "";
  background-image: url(../img/plus.png);
}

/* 떠다니는 스크롤 안내 문구 */
.floating-scroll-text {
  position: fixed !important;
  bottom: 50px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 9000 !important;
  animation: float-bounce 2s ease-in-out infinite !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.floating-scroll-text p {
  color: var(--main-color) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 15px 30px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border-radius: 30px !important;
  box-shadow: 0 8px 25px rgba(234, 111, 56, 0.3) !important;
  backdrop-filter: blur(10px) !important;
  border: 3px solid var(--main-color) !important;
  white-space: nowrap !important;
  display: block !important;
}

/* 둥둥 떠다니는 애니메이션 */
@keyframes float-bounce {
  0%,
  100% {
    transform: translateX(-50%) translateY(0px) scale(1);
  }
  25% {
    transform: translateX(-50%) translateY(-10px) scale(1.02);
  }
  50% {
    transform: translateX(-50%) translateY(-20px) scale(1.05);
  }
  75% {
    transform: translateX(-50%) translateY(-10px) scale(1.02);
  }
}

/* 전역 떠다니는 텍스트 */
.global-floating-text {
  position: fixed;
  bottom: 3%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  animation: global-float 2.5s ease-in-out infinite;
  pointer-events: none;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.global-floating-text p {
  color: var(--main-color);
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  margin: 0;
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.99);
  border-radius: 25px;
  box-shadow: 0 6px 20px rgba(234, 111, 56, 0.25);
  white-space: nowrap;
  backdrop-filter: blur(8px);
}

@keyframes global-float {
  0%,
  100% {
    transform: translateX(-50%) translateY(0px);
    opacity: 0.8;
  }
  50% {
    transform: translateX(-50%) translateY(-12px);
    opacity: 1;
  }
}

/* ===============================================craft  */

#craft {
  text-align: center;
  background: linear-gradient(
    to bottom,
    #ffffff 0%,
    var(--ivory-color) 20%,
    var(--ivory-color) 90%,
    #ffffff 100%
  );
  /* border: 15px solid #03e461; */
}

#craft h3 {
  padding-bottom: 80px;

  text-align: center;
  position: relative;
}

#craft h3::after {
  content: "";
  position: absolute;
  background: url(../img/persimmon+i+w.png) 50% 50% no-repeat;
  background-size: contain;
  width: 250px;
  aspect-ratio: 778/861;

  left: 53%;
  top: -145%;
  transform: translateX(-50%);
  animation: sway-left-right 2.5s ease-in-out infinite;
}

/* 양옆으로 왔다갔다하는 애니메이션 */
@keyframes sway-left-right {
  0% {
    transform: translateX(-30%) translateX(-75px);
  }
  50% {
    transform: translateX(-40%) translateX(-10px);
  }
  100% {
    transform: translateX(-30%) translateX(-75px);
  }
}

#craft h3::before {
  content: "";
  position: absolute;
  background: url(../img/persimmon+tree.png) 50% 50% no-repeat;
  background-size: contain;
  width: 240px;
  aspect-ratio: 778/861;

  left: 38%;
  top: -190%;
  animation: grow-shrink 2.5s ease-in-out infinite;
}

/* 점점 커졌다 작아지는 애니메이션 */
@keyframes grow-shrink {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.81);
  }
}

#craft .living {
  height: 100vh;

  color: var(--black-color);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  gap: 20px;

  /* border: 1px solid #e9dcdc; */
}

#craft .craft-wrap {
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-direction: column;

  gap: 20px;
  /* border: 3px solid #a9be2f; */
}

#craft .craft-wrap ul {
  /* position: absolute; */
  top: 0;
  left: 0;
  /* border: 3px solid #3bf789; */
  display: flex;
  flex-shrink: 0;
  gap: 120px;

  padding-left: 500px;
}

#craft .craft-wrap figure {
  flex-shrink: 0; /* 크기고정 */
  width: 400px;
  aspect-ratio: 4.1/5; /* 비율 */
  position: relative;
}

#craft .craft-wrap figure img {
  border-radius: 50px;
  width: 100%;
  height: 100%;
  object-fit: cover;

  box-shadow: 8px 8px 20px rgba(100, 100, 100, 0.5);
}

#craft .content-foot {
  display: flex;
  align-items: center;
  justify-content: center;

  flex-direction: column;

  gap: 20px;
}

#craft .plus {
  background: var(--ivory-color);
}

#craft .plus:hover {
  background: var(--black-color);
}
#craft .plus:hover::after {
  content: "";
  background-image: url(../img/plus.png);
}
/* ==================================textile */
#textile {
  background: #fff;
}

#textile .inner {
  /* border: 1px solid #000; */
}

#textile .pattern {
  display: flex;
  justify-content: space-between;
}

#textile .section-head {
  position: relative;

  /* border: 5px solid #e20000; */
}

#textile .head-info {
  color: var(--black-color);
  position: relative;
}
#textile .head-info::before {
  content: "";
  position: absolute;
  background: url(../img/persimmon+branch.png) 50% 50% no-repeat;
  transform: rotate(15deg);
  background-size: contain;
  width: 400px;
  aspect-ratio: 891/504;
  top: 191%;
  left: -31%;
}

#textile .section-head::after {
  content: "";
  position: absolute;
  background: url(../img/persimmon-main.png) 50% 50% no-repeat;
  background-size: contain;
  width: 220px;
  aspect-ratio: 488/459;
  top: 34%;
  left: 58%;
  animation: persimmon-fall 7s ease-in-out infinite;
}

@keyframes persimmon-fall {
  /* 0~20%: 흔들리기 */
  0%,
  10% {
    transform: translateY(0) rotate(-3deg);
  }
  5% {
    transform: translateY(0) rotate(3deg);
  }
  15% {
    transform: translateY(0) rotate(-2deg);
  }
  20% {
    transform: translateY(0) rotate(0deg);
  }

  /* 20~40%: 떨어지기 */
  20% {
    transform: translateY(0) rotate(0deg);
  }
  40% {
    transform: translateY(820px) rotate(360deg); /* 떨어지면서 한 바퀴 돌기 */
  }

  /* 40~100%: 안착 후 3초간 멈춤 (60% 시간이 멈춤) */
  40%,
  100% {
    transform: translateY(820px) rotate(360deg);
  }
}

#textile .work-info::before {
  content: "";
  position: absolute;
  background: url(../img/persimmon+hand.png) 50% 50% no-repeat;
  background-size: contain;
  width: 400px;
  aspect-ratio: 811/366;
  bottom: 290%;
  left: 0%;
}

#textile .work-info {
  position: relative;
  display: flex;
  justify-content: flex-start;
}

#textile ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex: 3;

  gap: 24px;

  /* border: 5px solid #0ca807; */
}

#textile ul li {
  width: 357px;
  height: 566px;
  position: relative;
  overflow: hidden;
}

#textile ul li img {
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;
}

/* 호버 효과 - 기본 상태에서 검은 오버레이와 텍스트 표시 */
#textile ul li::after {
  content: attr(data-name);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  color: var(--ivory-color);
  display: flex;
  align-items: top;
  justify-content: top;
  font-size: 20px;
  opacity: 1;
  transition: opacity 0.6s;
  pointer-events: none;

  padding: 40px;
}

#textile ul li:hover::after {
  opacity: 0;
}

#textile ul li:hover img {
  transform: scale(1.05);
}

/* ==========================================character */

#character {
  background: linear-gradient(
    to bottom,
    #ffffff 0%,
    var(--ivory-color) 20%,
    var(--ivory-color) 90%,
    #ffffff 100%
  );
}

#character .inner {
  text-align: center;

  padding: 100px 0;
}

#character .project-wrap {
  margin-top: 100px;

  /* border: 1px solid #921b1b; */
  display: flex;
  flex-direction: column;
  gap: 100px; /* 원하는 간격으로 조정 */

  height: 100%;
}

#character .project {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  gap: 30px;

  /* border: 5px solid #00b7ff; */

  height: 105vh;
}

#character .head-info {
  color: var(--black-colorr);

  text-align: center;
}

#character .work-info {
  margin-top: 20px;
}
/* ======character 영역!! */
#character .ai .ai-about {
  /* border: 55px solid #4c00ff; */
  position: relative;

  height: 675px;
  width: 100%;
}

#character .ai .ai-about > li {
  position: absolute;
  top: 0;
  left: 50%;

  transform: translateX(-50%);
}

#character .ai .ai-about .intro {
}
#character .ai .ai-about .type {
  top: 25px;
}
#character .ai .ai-about .mockup {
  top: 50px;
}

/* ==========mafra 영역!! */
#character .mafra .mafra-about {
  position: relative;

  /* border: 55px solid #4c00ff; */

  height: 675px;
  width: 100%;
}

#character .mafra .mafra-about > li {
  position: absolute;
  top: 0;
  left: 50%;

  transform: translateX(-50%);
}

#character .mafra .mafra-about .intro {
}
#character .mafra .mafra-about .type {
  top: 25px;
}
#character .mafra .mafra-about .mockup {
  top: 50px;
}

#character .project > ol {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  gap: 20px;
}

#character .project > ol > li {
  background: #fff;
  width: 1680px;
  height: 600px;

  border-radius: 70px;

  padding: 120px 120px;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  box-shadow: 0px 1px 20px #7a716c29;
  /* border: 9px solid #a7e46e; */
}

#character .project > ol > li:first-child {
  background: #fff;
  width: 1680px;
  height: 600px;

  border-radius: 70px;

  padding: 120px 120px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;

  box-shadow: 0px 1px 20px #7a716c29;
  /* border: 9px solid #a7e46e; */
}

/* 카드 이너 */

#character .intro > figure {
  height: 70%;
}

#character .intro > figure img {
  width: 100%;
  height: 100%;
}

#character .intro-flex {
  width: 822px;

  display: flex;
  align-items: center;
  gap: 80px;
}

#character .intro-flex figure {
  height: 100%;
}

#character .intro-flex figure img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

#character .ai-about h4 {
  color: var(--main-color);
}

#character .intro-about dl {
  display: flex;
  flex-direction: column;
  text-align: left;
  gap: 15px;

  margin-top: 20px;
}

#character .intro-about dl dt {
  font-size: 30px;
  font-weight: 700;
}

#character .characters {
  margin-top: 74px;

  display: flex;
  align-items: center;
}

#character .intro > figure {
}

#character .type img {
  width: 90%;
  margin-top: 70px;
}
#character .mafra-about .type img {
  width: 100%;
  margin-top: 40px;
}

#character .mockup img {
  width: 100%;
  margin-top: 40px;
}

#character .mafra-about h4 {
  color: #0c8b50;
  text-align: left;
}

#character img {
  width: 100px;

  background-size: contain;
}

#character .mafra-about .intro-about {
  min-width: 380px;
}

#character .mafra-about figure {
  height: 100%;
}

#character .mafra-about .intro > figure {
  height: 100%;
}

#character .mafra-about .intro > figure img {
  width: 100%;
  height: 100%;
}

/* =======================================banner */
#banner {
  background: #fff;
}

#banner .promotion {
  text-align: center;

  display: flex;
  align-items: center;
  justify-content: center;

  flex-direction: column;
  margin-top: 5vh;
}

#banner h3 {
  text-align: center;

  position: relative;
}

#banner h3::after {
  content: "";
  position: absolute;
  background: url(../img/persimmon+i+w.png) 50% 50% no-repeat;
  background-size: contain;
  width: 250px;
  aspect-ratio: 778/861;

  left: 65%;
  top: -240%;
  transform: translateX(-50%);
  animation: sway-left-right 2.5s ease-in-out infinite;
}

#banner h3::before {
  content: "";
  position: absolute;
  background: url(../img/persimmon+tree+b.png) 50% 50% no-repeat;
  background-size: contain;
  width: 240px;
  aspect-ratio: 778/861;

  left: -28%;
  top: -310%;
  animation: grow-shrink 2.5s ease-in-out infinite;
}

#banner .head-info {
  color: var(--black-color);
  /* border: 5px solid #b61919; */

  margin-top: 50px;
}

#banner .banner-slider {
  position: relative;
  width: 100%;
  overflow: visible;
  padding: 20px 0;

  /* border: 5px solid #19b648; */
}

#banner .banner-list {
  overflow: visible;
}

#banner ul {
  display: flex;
  align-items: center;
  padding: 60px 0;

  /* border: 1px solid #ffd900; */

  transition-timing-function: linear; /* 마키효과!!!! */
}

#banner ul li {
  position: relative;
  width: 300px;
  max-width: 90vw;
  aspect-ratio: 3/4;
  flex-shrink: 0;
  /* border: 1px solid #db2525; */
  overflow: hidden;
  border-radius: 30px;
  box-shadow: 0 8px 15px rgba(100, 100, 100, 0.3);
}

/* 반응형 크기 조정 */
@media (max-width: 1440px) {
  #banner ul li {
    width: 280px;
  }
}

@media (max-width: 1024px) {
  #banner ul li {
    width: 240px;
  }
}

@media (max-width: 640px) {
  #banner ul li {
    width: 200px;
  }
}

@media (max-width: 480px) {
  #banner ul li {
    width: 150px;
  }
}

#banner ul li figure {
  width: 100%;
  height: 100%;
  border-radius: 30px;
  overflow: hidden;
}

#banner ul li figure img {
  width: 100%;
  height: 100%;
  /* border: 1px solid #064d2f; */
  object-fit: cover;
  border-radius: 30px;
}

#banner ul li .fig-info {
  position: absolute;
  left: 0;
  bottom: 0;

  color: #fff;
  display: flex; /* 미리 설정 */
  align-items: start;
  justify-content: space-between;
  flex-direction: column;

  width: 100%;
  min-height: 140px;
  background: rgba(0, 0, 0, 0.753);
  padding: 20px 24px;

  transform: translateY(100%); /* 아래로 숨김 */
  opacity: 0;

  transition: 0.4s;
}

#banner ul li:hover .fig-info {
  transform: translateY(0); /* 위로 올라옴 */
  opacity: 1;
}

#banner ul li .fig-info strong {
  font-size: 25px;
  font-weight: 700;
}

/* 배너 페이지네이션 스타일 */
#banner .swiper-pagination {
  position: static;
  width: auto;
  display: inline-flex;
}

#banner .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: #ddd;
  opacity: 1;
  margin: 0 5px;
  transition: all 0.3s ease;
}

#banner .swiper-pagination-bullet-active {
  background: var(--main-color);
  transform: scale(1.2);
}

#banner .swiper-pagination-bullet:hover {
  background: var(--main-color);
  opacity: 0.7;
}

/* 배너 컨트롤 영역 */
#banner .banner-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 30px;
}

/* 맨 처음/맨 끝 버튼 */
#banner .banner-btn {
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.3s ease;
}

#banner .banner-btn:hover {
  transform: scale(1.2);
}

#banner .banner-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* end */

#end {
  background: linear-gradient(
    to bottom,
    #ffffff 0%,
    var(--ivory-color) 40%,
    var(--ivory-color) 100%
  );
}

#end .inner {
  height: 80vh;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: end;
  flex-direction: column;

  padding: 0 0 90px 0;
}

#end .end-text::after {
  content: "";
  position: absolute;
  background: url(../img/persimmon+i+h.png) 50% 50% no-repeat;
  background-size: contain;
  width: 141px;
  aspect-ratio: 282/270;
  left: 26%;
  top: -289%;
  transform-origin: bottom center;
  animation: pendulum 1.2s ease-in-out infinite;
}

@keyframes pendulum {
  0% {
    transform: rotate(3deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(3deg);
  }
}

#end .end-text::before {
  content: "";
  position: absolute;
  background: url(../img/persimmon+i+b.png) 50% 50% no-repeat;
  background-size: contain;
  width: 180px;
  aspect-ratio: 360/328;
  left: 50%;
  top: -180%;
  transform: translateX(-50%);
}

#end .end-text {
  color: var(--main-color);
  margin-top: 70px;

  position: relative;
}

#end .end-text h4 {
  font-family: var(--main-font);
}

#end .end-text p {
  margin-top: 20px;
}

#end .end-text p strong {
  font-weight: 700;
}

.space.one {
  height: 300px;
}

.space.two {
  height: 327px;
}

.space.three {
  height: 200px;
}

/* =====================================*** 배너 모달창 스타일 *** */
.banner-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9100;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.banner-modal.active {
  opacity: 1;
  visibility: visible;
}

/* 모달이 열렸을 때 body 스크롤 완전 차단 */
body.modal-open {
  overflow: hidden !important;
}

/* html도 함께 스크롤 차단 */
html.modal-open {
  overflow: hidden !important;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(5px);
  touch-action: none; /* 터치 동작 방지 */
  overscroll-behavior: none; /* 스크롤 전파 완전 방지 */
  overflow: hidden; /* 오버플로우 차단 */
}

.modal-content {
  position: relative;
  border-radius: 20px;
  max-width: 90vw;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
  from {
    transform: translateY(50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background: var(--black-color);
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  transition: 0.3s;

  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close img {
  width: 14px;
  background-size: contain;
}

.modal-close:hover {
  background: var(--main-color);
  transform: scale(1.1);
}

/* 모달 이미지 스타일 */
.modal-content #modalImg {
  max-width: 80vw;
  max-height: 80vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease;
}