@import "./reset.css";

/* 기본 스타일 */
body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  text-align: center;
  background-color: #ffffff;
  font-size: 1.6rem;
}

/* 네비게이션 바 */
header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 10000;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 140rem;
  margin: 0 auto;
  height: 8rem;
  width: 90%;
}

.logo {
  width: 8.7rem;
  height: 7rem;
}
.logo svg {
  width: 100%;
  height: 100%;
}

.dropbtn {
  background-color: transparent;
  color: #000;
  border: none;
  width: 15rem;
  font-size: 1.6rem;
  text-align: right;
  line-height: 1.5;
  height: 4rem;
  display: flex;
  align-items: center;
  gap: 5px; /* 텍스트와 화살표 간격 */
  cursor: pointer;
}

/* 기본 화살표 스타일 */
.arrow {
  width: 1.2rem;
  transform-origin: center;
  transition: transform 0.3s ease-in-out; /* 화살표 회전 애니메이션 */
}

/* 드롭다운이 활성화되었을 때 (▼ → ▲) */
.dropdown:hover .arrow {
  transform: rotate(180deg); /* 위쪽 방향 화살표 */
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  max-width: 15rem;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 1.5rem;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
  padding: 0.4rem;
}

.dropdown-content a {
  color: #000;
  padding: 0.4rem 1rem;
  text-align: left;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  color: #888888;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  color: #888888;
}

/* 햄버거 아이콘 */
.menu-toggle {
  cursor: pointer;
  width: 3.2rem;
  height: 3.2rem;
  display: none;
  position: relative;
  border: none;
  background-color: transparent;
}

.menu-toggle span {
  width: 100%;
  height: 3px;
  right: 0;
  border-radius: 1.5px;
  background-color: black;
  position: absolute;
  transition: 0.4s ease-in-out;
}

/* 햄버거 닫혔을 때 */
.menu-toggle span:nth-child(1) {
  top: 9px;
}
.menu-toggle span:nth-child(2) {
  top: 19px;
}

/* 애니메이션 - X 모양으로 변경 */
.menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle.active span:nth-child(2) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* 전체 화면 메뉴 스타일 */
.fullscreen-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #ffffff, #fffde7, #fff8dc);
  transform: none;
  transform-origin: 50% 50% 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 메뉴 리스트 스타일 */
.fullscreen-wrap {
  padding-top: 8rem;
  height: 100%;
}
.fullscreen-menu ul {
  list-style: none;
  padding: 0;
  text-align: center;
}

.fullscreen-menu ul li {
  margin-bottom: 4rem;
}

/* 메뉴 호버 효과 */
.fullscreen-menu ul li a {
  font-size: 2.4rem;
  color: rgb(0, 0, 0);
  text-decoration: none;
  font-weight: bold;
  display: inline-block; /* transform 적용 가능하도록 변경 */
  transition: transform 0.3s ease-in-out;
}

.fullscreen-menu ul li a:hover {
  transform: scale(0.9);
}

/* 메뉴 활성화 시 보이도록 */
.fullscreen-menu.active {
  opacity: 1;
  visibility: visible;
}

/* 애니메이션 - X 모양으로 변경 */
.menu-toggle.active span:nth-child(1) {
  top: 0;
  bottom: 0;
  margin: auto;
  transform: rotate(45deg) translate(0, 0);
}

.menu-toggle.active span:nth-child(2) {
  bottom: 0;
  top: 0;
  margin: auto;
  transform: rotate(-45deg) translate(1px, 0);
}
.fullscreen-menu .btns {
  display: flex;
  margin-top: 10rem;
}
.fullscreen-menu .btns a {
  display: block;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 50%;
  margin: 0 1.2rem;
  border-radius: 50%;
  border: 1px solid rgb(235, 235, 235);
  background-size: cover;
}
.fullscreen-menu .btn1 {
  background-image: url(../img/btn_img_1.png);
}
.fullscreen-menu .btn2 {
  background-image: url(../img/btn_img_2.png);
}
.fullscreen-menu .btn3 {
  background-image: url(../img/btn_img_3.png);
}
.fullscreen-menu .btn4 {
  background-image: url(../img/btn_img_4.png);
}

/* 레이아웃 */
.bg-col {
  background: radial-gradient(
    58.199999999999996% 46.7% at 50% 43%,
    rgba(255, 212, 0, 0.25) 0%,
    rgba(241, 205, 247, 0) 100%
  );
}
.bg-col2 {
  background: radial-gradient(
    64% 78% at 50% 68%,
    rgba(255, 212, 0, 0.23) 0%,
    rgba(241, 205, 247, 0) 95%
  );
}
main {
  padding-top: 10rem;
  padding-bottom: 10rem;
  display: flex;
  justify-content: center;
}
section {
  margin-top: 4rem;
  display: flex;
  justify-content: center;
  overflow: hidden;
}
.container {
  width: 90%;
  max-width: 140rem;
}
article {
  padding: 4rem 0;
}

/* 공통컨텐츠 */
.title span {
  padding: 1rem 2.4rem;
  background-color: #1a1a1a;
  color: #fff;
  display: inline-block;
  font-size: 1.4rem;
  font-weight: bold;
  border-radius: 1.7rem;
}
.title h3 {
  margin-top: 2.4rem;
  font-size: 4.2rem;
  line-height: 1.5;
  font-weight: 700;
}

.content {
  margin-top: 6rem;
}

/* 메인 컨텐츠 */
.main .btns button {
  backdrop-filter: blur(7px);
  background-color: rgb(255 245 226);
  border-radius: 0.8rem;
  opacity: 1;
  border: none;
  padding: 0.8rem 2.4rem;
  margin: 0 0.2rem;
  font-weight: 600;
}
.main .title {
  padding: 2.8rem 2rem;
}
.main h1 {
  font-family: "Manrope";
  font-size: 6.2rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 2.4rem 0;
}

.main p {
  font-family: "Manrope";
  font-size: 1.8rem;

  color: #1a1a1a;
}
.main .download-btn {
  margin-top: 3rem;
  width: 14rem;
  height: 5rem;
  background-color: #1a1a1a;
  border-radius: 2.5rem;
  color: rgb(255, 212, 0);
  font-size: 1.6rem;
  font-weight: bold;
}
.main .download-btn:hover {
  transform: scale(0.95);
  transition-duration: 0.2s;
  transition-timing-function: linear;
}
.main .download-btn a {
  text-decoration: none;
  color: rgb(255, 212, 0);
}
.main-swiper-div {
  margin-top: 4rem;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.main .swiper-slide {
  width: 27rem;
  height: 40rem;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: self-start;
}

.swiper-slide-active {
  filter: blur(0px);
}

.swiper-slide--one {
  background: url(../img/main_img_4.png) no-repeat 50% 50% / cover;
}

.swiper-slide--two {
  background: url(../img/main_img_5.png) no-repeat 50% 50% / cover;
}

.swiper-slide--three {
  background: url(../img/main_img_1.png) no-repeat 50% 50% / cover;
}

.swiper-slide--four {
  background: url(../img/main_img_2.png) no-repeat 50% 50% / cover;
}

.swiper-slide--five {
  background: url(../img/main_img_3.png) no-repeat 50% 50% / cover;
}

.main .slider-container {
  position: relative;
  width: 100%;
  height: 55rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main .slider {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  transition: transform 0.5s ease-in-out;
}

.main .slide {
  position: absolute;
  width: 25rem;
  height: 55rem;
  opacity: 0.5;
  transition: transform 0.5s, opacity 0.5s;
  border-radius: 4.4rem;
}

.main .slide img {
  width: 100%;
  height: auto;
  border-radius: 1rem;
}

.active {
  opacity: 1;
  z-index: 2;
}
.slider-container::after {
  content: "";
  width: 27rem;
  height: 55rem;
  position: absolute;
  z-index: 999;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url(../img/phone.avif);
  background-size: 100%;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* 좌우 버튼 */
/* 좌우 버튼 */
.prev-btn,
.next-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  backdrop-filter: blur(10px);
  background-color: rgba(255, 244, 224, 0.8);
  color: #010b1b;
  border: none;
  cursor: pointer;
  width: 4.2rem;
  height: 4.2rem;
  font-size: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* 넘치는 부분 숨김 */
  transition: background-color 0.3s ease-in-out;
}

/* 버튼 위치 */
.prev-btn {
  left: calc(50% - 18rem);
  z-index: 1000;
}
.next-btn {
  right: calc(50% - 18rem);
  z-index: 1000;
}

/* 기본 상태의 화살표 */
.prev-btn span,
.next-btn span {
  display: inline-block;
  position: absolute;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
  font-size: 2rem;
}

/* 기본 상태에서 보이는 화살표 */
.prev-btn .default-arrow,
.next-btn .default-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* hover 시 나타나는 새로운 화살표 */
.prev-btn .hover-arrow {
  opacity: 0;
  transform: translateX(20px); /* 숨겨진 상태 */
}
.next-btn .hover-arrow {
  opacity: 0;
  transform: translateX(-20px);
}

/* hover 시 기존 화살표는 사라지고 새로운 화살표가 나타남 */
.prev-btn:hover .default-arrow {
  opacity: 0;
  transform: translateX(-20px); /* 기존 화살표 오른쪽으로 이동하며 사라짐 */
}

.next-btn:hover .default-arrow {
  opacity: 0;
  transform: translateX(20px); /* 기존 화살표 왼쪽으로 이동하며 사라짐 */
}

.prev-btn:hover .hover-arrow {
  opacity: 1;
  transform: translateX(0); /* 새 화살표 왼쪽에서 날아옴 */
}

.next-btn:hover .hover-arrow {
  opacity: 1;
  transform: translateX(0); /* 새 화살표 오른쪽에서 날아옴 */
}

/* 버튼 hover 시 부드러운 효과 */
.prev-btn:hover,
.next-btn:hover {
  background-color: rgba(255, 244, 224, 1);
}

/* commend  */

.commend .container {
  background-color: #fff;
  border-radius: 4rem;
}

.auto-swiper {
  width: 100%;
  position: relative;
  max-width: 110rem;
  overflow: hidden;
  margin: 0 auto;
  padding: 0 4rem;
  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 5%,
    rgb(0, 0, 0) 7.5%,
    rgb(0, 0, 0) 92.5%,
    rgba(0, 0, 0, 0) 95%
  );
}
.auto-swiper .swiper-slide {
  padding: 2rem;
  background-color: #fff;
}
.swiper_btns {
  position: absolute;
  top: 50%; /* 슬라이드 중앙 */
  left: 0;
  padding: 0 3rem;
  height: 4rem;
  z-index: 999;
  width: 100%; /* 부모 요소가 슬라이드 전체를 차지하게 설정 */
  transform: translateY(-50%); /* 중앙 정렬 */
  display: flex;
  justify-content: space-between; /* 양쪽 정렬 */
  align-items: center;
  pointer-events: none; /* 클릭이 슬라이드에도 전달되도록 설정 */
  display: none;
}

/* 버튼 기본 스타일 */
.swiper_btn {
  width: 4.2rem;
  height: 4.2rem;
  background-color: rgb(0 0 0 / 25%);
  color: #ffffff;
  border: none;
  cursor: pointer;
  font-size: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease-in-out;
  pointer-events: auto; /* 버튼이 클릭 가능하도록 설정 */
  display: none;
}
.swiper_btn img {
  width: 50%;
  height: 50%;
}
/* 이전 버튼 (왼쪽 배치) */
.commend-prev,
.second-prev {
}

/* 다음 버튼 (오른쪽 배치) */
.commend-next,
.second-next {
}

.auto-swiper .card {
  height: 30rem;
  padding: 3.2rem;
  border: 1px solid rgb(255, 248, 214);
  border-radius: 3.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
  background-image: linear-gradient(
    to top,
    rgba(255, 248, 214, 0.6),
    rgba(255, 244, 228, 0.3),
    rgba(255, 255, 255, 0.3),
    rgba(255, 255, 255, 0.3),
    rgba(255, 255, 255, 0.5)
  );
  backdrop-filter: blur(10px); /* 흐림 효과 추가 */
}
.card .speaker {
  display: flex;
  align-items: center;
}
.second-swiper .speaker {
  flex-direction: row-reverse;
}

.card .imgWrap {
  width: 3.8rem;
  height: 3.8rem;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 1rem;
}
.card .imgWrap img {
  width: 100%;
  height: 100%;
}

/* about */
.myHalfSwiper {
  width: 100%;
  max-width: 110rem;
  overflow: hidden;
  margin: 0 auto;
}
.about .swiper-slide {
  background-color: rgb(255, 248, 214);
  border-radius: 4rem;
  padding: 3.2rem;
}
.slide-title h5 {
  font-size: 2.4rem;
  font-weight: 600;
}
.slide-title p {
  margin-top: 2rem;
}

.about .swiper-slide .imgWrap {
  margin-top: 6rem;
  width: 60%;
  position: relative;
  min-width: 32rem;
  margin: 6rem auto 3rem auto;
}
.about .swiper-slide img {
  margin-top: 1rem;
  width: calc(100% - 3rem);
  border-radius: 5rem;
}
.about .swiper-slide .imgWrap::after {
  content: "";
  width: 100%;
  height: calc(100% + 1rem);
  position: absolute;
  z-index: 9999;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url(../img/phone.avif);
  background-size: 100%;
  background-repeat: no-repeat;
}
.swiper-pagination-half {
  margin: 2rem auto 0 auto;
  width: fit-content !important;
  background-color: rgb(26, 26, 26);
  height: 2.8rem;
  padding: 0 0.5rem;
  display: flex;
  align-items: center;
  border-radius: 1.4rem;
}

/* 페이지네이션 점(기본 스타일) */
.swiper-pagination-half .swiper-pagination-bullet {
  background-color: rgb(255, 255, 255) !important; /* 비활성화된 점 색상 */
}

/* 포커스된(활성화된) 점 스타일 */
.swiper-pagination-half .swiper-pagination-bullet-active {
  background-color: rgb(255, 244, 224) !important; /* 활성화된 점 색상 */
}
.about .swiper-button-next,
.about .swiper-button-prev {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background-color: rgb(26, 26, 26);
  color: #fff;
}
.about .swiper-button-next img,
.about .swiper-button-prev img {
  width: 50%;
  height: 50%;
}

.about .swiper-button-next::after,
.about .swiper-button-prev::after {
  display: none;
}

/* introduce */
.introduce article {
  padding-bottom: 17rem;
}

/* promotion */
.promotion {
}

.promotion .container {
  background: radial-gradient(
    circle,
    rgba(255, 245, 210, 1) 20%,
    rgba(255, 250, 235, 0.9) 50%,
    rgba(255, 255, 255, 1) 100%
  );
  /* background: linear-gradient(
    17deg,
    rgba(255, 245, 210, 1) 20%,
    rgba(255, 250, 235, 0.9) 50%,
    rgba(255, 255, 255, 0.7) 90%,
    rgba(255, 255, 255, 1) 100%
  ); */

  border-radius: 4rem;
}
.promotion article {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4rem;
}
.promotion .title {
  text-align: start;
  margin-right: 4rem;
}
.promotion .title span {
  color: rgb(26, 26, 26);
  background-color: transparent;
  padding: 0;
}
.promotion .btns {
  margin-top: 4rem;
  display: flex;
}
.promotion button {
  width: 13rem;
  min-width: 13rem;
  height: 5.6rem;
  margin-right: 1.2rem;
  border-radius: 2.8rem;
  font-size: 1.5rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}
.promotion button:hover {
  transform: scale(0.95);
  transition-duration: 0.2s;
  transition-timing-function: linear;
}

.promotion button img {
  width: 2rem;
  height: 2rem;
  margin-right: 0.5rem;
}
.btn1,
.btn2 {
  background-color: #000;
  color: #fff;
}
.btn3 {
  border: 1px solid rgb(235, 235, 235);
  background-color: #fff;
}

.promotion .imgWrap {
  margin-top: 6rem;

  position: relative;
  width: 32rem;
  margin: 6rem auto 3rem auto;
}
.promotion .content img {
  margin-top: 1rem;
  width: calc(100% - 3rem);
  border-radius: 5rem;
}
.promotion .imgWrap::after {
  content: "";
  width: 100%;
  height: calc(100% + 1rem);
  position: absolute;
  z-index: 9999;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url(../img/phone.avif);
  background-size: 100%;
  background-repeat: no-repeat;
}

/* contact */
.link {
  display: flex;
  justify-content: center;
}
.link li {
  margin: 0.6rem;
}
.contact .btns {
  display: flex;
  justify-content: center;
  margin-top: 3rem;
}
.contact .btns a {
  display: block;
  margin: 0 0.6rem;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 50%;
  border: 1px solid rgb(235, 235, 235);
  background-size: cover;
}
.contact .btn1 {
  background-image: url(../img/btn_img_1.png);
}
.contact .btn2 {
  background-image: url(../img/btn_img_2.png);
}
.contact .btn3 {
  background-image: url(../img/btn_img_3.png);
}
.contact .btn4 {
  background-image: url(../img/btn_img_4.png);
}

/* 푸터 */
.footerWrap .container {
  /* background-image: linear-gradient(
    to bottom,
    rgba(255, 248, 214, 0.1),
    rgba(255, 248, 214, 0.2),
    rgba(255, 244, 228, 0.3),
    rgba(255, 248, 214, 0.2),
    rgba(255, 244, 228, 0.1)
  ); */
}
.footerWrap a {
  text-decoration: none;
  color: #000;
}
footer {
  padding: 2rem;
  color: white;
}
footer ul {
  display: flex;
  justify-content: center;
}
footer li {
  margin: 0 1rem;
  font-size: 1.4rem;
}
.info {
  margin-top: 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 1.2rem;
  color: rgb(11, 11, 11);
  line-height: 1.5;
}

.info span {
  font-weight: 700;
}
footer .ceo {
  display: none;
}
/* 반응형  */
/* 노트북 & 태블릿 (768px ~ 1023px) */
@media (max-width: 1023px) and (min-width: 768px) {
  body {
    font-size: 1.6rem;
  }
  nav {
    width: 90%;
  }
  .feature-list {
    flex-direction: column; /* 가로 배열을 세로 배열로 변경 */
  }
  .container {
    max-width: 120rem;
  }

  .promotion .btns {
    display: flex;
    flex-direction: column;
  }
  .promotion .btns button {
    width: 100%;
    margin-bottom: 1.2rem;
  }
}

/* 모바일 (767px 이하) */
@media (max-width: 767px) {
  body {
    font-size: 1.4rem;
  }

  .dropdown {
    display: none;
  }
  .logo {
    z-index: 9;
  }
  .menu-toggle {
    display: block;
    z-index: 9;
  }
  .commend .content {
    margin-top: 0;
  }
  .auto-swiper .swiper-slide {
    padding: 2rem 1rem;
  }
  .swiper_btns {
    display: flex;
  }

  /* 버튼 기본 스타일 */
  .swiper_btn {
    border-radius: 50%;
    display: flex;
  }

  .promotion article {
    flex-direction: column-reverse;
    padding: 0;
  }
  .promotion article .title {
    margin-right: 0;
    margin-top: -10rem;
    background-color: #fff8dc;
    position: relative;
    z-index: 9999999;
    padding-top: 2rem;
    width: 100%;
    padding: 2rem 3rem 3rem 3rem;
  }
  .promotion article .content {
    margin-top: 0;
  }
  .promotion .container {
    background: linear-gradient(
      17deg,
      rgba(255, 245, 210, 1) 20%,
      rgba(255, 250, 235, 0.9) 50%,
      rgba(255, 255, 255, 0.7) 90%,
      rgba(255, 255, 255, 1) 100%
    );

    border-radius: 4rem;
  }
  .promotion .btns {
    display: flex;
    flex-direction: column;
  }
  .promotion .btns button {
    width: 100%;
    margin-bottom: 1.2rem;
  }
  footer .ceo {
    display: block;
    margin-bottom: 2rem;
  }
  .footer-link li:nth-of-type(1) {
    display: none;
  }
}