@charset "utf-8";
@import url('font.css');

:root {
  --engFont: 'Pretendard', 'Noto Sans KR', sans-serif;
  --koFont: 'Pretendard', 'Noto Sans KR', sans-serif;
  --color-red-100: #fdf2f2;
  --color-red-200: #fce9ea;
  --color-red-300: #f8d3d4;
  --color-red-400: #fda1a4;
  --color-red-500: #ff6c71;
  --color-red-600: #f64f55;
  --color-red-700: #da2128;
  --color-red-800: #c71e24;
  --color-red-900: #ac2619;
  --color-green-100: #f4faf2;
  --color-green-200: #edf7e9;
  --color-green-300: #dbeed3;
  --color-green-400: #b7dea8;
  --color-green-500: #94cd7d;
  --color-green-600: #70bc52;
  --color-green-700: #4dac27;
  --color-green-800: #3c9a17;
  --color-green-900: #338711;
  --color-blue-100: #f5f5fb;
  --color-blue-200: #ededf7;
  --color-blue-300: #dcddef;
  --color-blue-400: #b9bbe0;
  --color-blue-500: #9699d0;
  --color-blue-600: #7377c0;
  --color-blue-700: #5055b1;
  --color-blue-800: #474c98;
  --color-blue-900: #2c307c;
  --color-gray-100: #f7f7f7;
  --color-gray-200: #f2f2f2;
  --color-gray-300: #eaeaea;
  --color-gray-400: #d5d5d5;
  --color-gray-500: #ccc;
  --color-gray-600: #999;
  --color-gray-700: #767676;
  --color-gray-800: #595959;
  --color-gray-900: #292929;
  --mainColor: #2c307c;
  --subColor: #4dac27;
  --grayBg: #f6f6f6;
  --gradient: linear-gradient(45deg, #6ce067, #0a9afa, #262fd4);
  --borderR: 25px;
}

/* ======== 초기화 ======== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
  color: #333;
}
img {
  display: block;
}
button, input {
  font: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  letter-spacing: inherit;
  color: inherit;
  opacity: 1;
  background-color: rgba(0, 0, 0, 0);
  border: none;
  outline: none;
}
button {
  cursor: pointer;
}
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

body {
  overflow-x: hidden;
}

/* ======== 공통클래스 ======== */
.container {
  max-width: 1260px;
  margin: 0 auto;
  width: 100%;
}
.section {
  padding: 70px 0;
}

.icon-wish img {
 transition: 0.25s ease;
}
.icon-wish.is-active img {
  content: url('../images/icon-wish-active.png');
}

/* typoGraphy */

html, body {
  font-size: 16px;
  font-family: 'Pretendard', 'Noto Sans KR', 'sans-serif';
}

/* ======== header 영역 ======== */
.header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;

  background-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(20px);

  border: 1px solid rgba(246, 246, 246, 0.2);

  transition: top 0.6s ease;
  z-index: 999;
}
.header.fixed {
  top: -89px;
}
.header.nofixed {
  top: -181px;
}
.header .container {}

/* ==== headerbanner ==== */
.header .headerBanner {
  background-color: #f4f4f4;
  height: 50px;
  overflow: hidden;
}
.header .headerBanner a {
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
}
.header .headerBanner a img {
  display: inline-block;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  color: transparent;
}

/* ==== headerBrand ==== */
.header .headerBrand {
  background-image: var(--gradient);
}
.header .headerBrand ul {
  display: flex;
  align-items: center;
  justify-content: center;
}
.header .headerBrand ul li {}
.header .headerBrand ul li a {
  display: block;
  width: 90px;
  height: 38px;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  position: relative;
}

.header .headerBrand ul li:nth-child(6) a {
  color: var(--color-gray-500);
  margin-left: 35px;
}
.header .headerBrand ul li:nth-child(6) a::before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: -15px;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background-color: var(--color-gray-500);
}

/* -- on일때 흰 배경 -- */
.header .headerBrand ul li a.on::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 0;
  width: 90px;
  height: 30px;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(246, 246, 246, 0.6);
  border-top-left-radius: 17px;
  border-top-right-radius: 17px;
  z-index: -1;
}
.header .headerBrand ul li:nth-child(1) a.on {
  color: var(--color-green-700);
  z-index: 1;
}

/* -- hover 했을 때 -- */
.header .headerBrand ul li:nth-child(1) a:hover {
  color: var(--color-green-700);
}
.header .headerBrand ul li:nth-child(2) a:hover {
  color: #1970e1;
}
.header .headerBrand ul li:nth-child(3) a:hover {
  color: #06bbc0;
}
.header .headerBrand ul li:nth-child(4) a:hover {
  color: var(--color-red-700);
}
.header .headerBrand ul li:nth-child(5) a:hover {
  color: #9e2bbf;
}
.header .headerBrand ul li:nth-child(6) a:hover {
  background: none;
}

/* ==== headerMenu ==== */
.header .headerMenu {}
.header .headerMenu .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
}

.headerMenu-left, 
.headerMenu-right {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.5vw, 20px);
}

.headerMenu-center {
  flex: 2 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
}

.headerMenu-right {
  justify-content: flex-end;
}


/* menuBtn */
.header .headerMenu .menuBtnWrap {}
.header .headerMenu .menuBtnWrap .menuBtn {
  position: relative;
  width: clamp(38px, 4.5vw, 50px);
  height: clamp(38px, 4.5vw, 50px);

  border: 2px solid var(--color-blue-900);
  border-radius: 50%;

  transition: all 0.3s ease;
  cursor: pointer;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(3px, 0.5vw, 5px)
}
.header .headerMenu .menuBtnWrap .menuBtn:hover {
  background-color: var(--mainColor);
}
.header .headerMenu .menuBtnWrap .menuBtn span {
  width: 45%;
  height: 2px;
  background-color: var(--color-blue-900);
}
.header .headerMenu .menuBtnWrap .menuBtn:hover span {
  background-color: #fff;
}


/* logo */
.header .headerMenu h1.logo {}
.header .headerMenu h1.logo a {}
.header .headerMenu h1.logo a img {
  width: clamp(120px, 18vw, 180px);
  height: 58px;
}

/* nav */
.header .headerMenu nav {
  transition: height 0.3s ease, opacity 0.3s visibility 0.3s ease;
  pointer-events: auto;
}
.header.fixed nav {
  /* opacity: 0;
  visibility: hidden;
  pointer-events: none;
  flex: 0;
  width: 0; */
  display: none;
}

.header .headerMenu nav ul {
  display: flex;
  justify-content: center;
}
.header .headerMenu nav ul li {}
.header .headerMenu nav ul li a {
  font-size: 18px;
  font-weight: 600;
  padding: 0 20px;
  white-space: nowrap;
}

/* 검색바 */
.header-searchArea {
  display: none;
}
.header.fixed .headerMenu .header-searchArea {
  display: block;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  flex: 0.5 1 auto;
  width: auto;
  height: clamp(52px, 6vw, 55px);
}

.header-searchArea form {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding: 15px 25px;

  width: 100%;
  height: 100%;

  border-radius: 35px;
  border: 2px solid rgba(44, 48, 124, 1);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(16px);
}

/* searchBox */
.header-searchArea form .searchBox {
  flex: 1;
  border-radius: 35px;
  position: relative;
  transition: 0.2s ease;
}
/* -- click 했을 때 발광 효과 -- */
.header-searchArea form::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 35px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.6);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: -1;
}
.header-searchArea form:focus-within::before {
  opacity: 1;
}

.header-searchArea form .searchBox input {
  width: 100%;
  background-color: rgba(0, 0, 0, 0);
  font-size: 1.15rem;
  color: #333;
}
/* -- placeholder 글씨 색 변경 -- */
.header-searchArea form .searchBox input::placeholder {
  color: rgba(44, 48, 124, 0.35);
}

/* clearBtn */
/* .header-searchArea form .clearBtn {
  position: absolute;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
} */

/* searchBtn */
.header-searchArea form .searchBtn {
  background-color: rgba(0,0,0,0);

  display: flex;
  align-items: center;
  justify-content: center;
}
.header-searchArea form .searchBtn img {
  width: clamp(24px, 4vw, 30px);
  height: clamp(24px, 4vw, 30px);
}
.header-searchArea form .searchBtn span {
  font-size: 0;
}

/* userBtns */
.header .headerMenu .userBtns {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  position: relative;
  cursor: pointer;
}
.header .headerMenu .userBtns .cartBtn {
  width: 50px;
  height: 50px;
  border: 2px solid var(--mainColor);
  border-radius: 50%;
  background: url(../images/icon-shop.svg) no-repeat;
  background-position: center;
  background-size: 40px 40px;
  transition: all 0.3s ease;
  cursor: pointer;
}
.header .headerMenu .userBtns .cartBtn:hover {
   background-color: var(--mainColor);
  background-image: url(../images/icon-shop-fill.svg);
  transform: translateY(-2px);
}
.header .headerMenu .userBtns .deliveryBtn {
  width: 50px;
  height: 50px;
  border: 2px solid var(--mainColor);
  border-radius: 50%;
  background: url(../images/icon-delivery.svg) no-repeat;
  background-position: center;
  background-size: 30px 30px;
  transition: all 0.3s ease;
  cursor: pointer;
}
.header .headerMenu .userBtns .deliveryBtn:hover {
  background-color: var(--mainColor);
  background-image: url(../images/icon-delivery-fill.svg);
  transform: translateY(-2px);
}
.header .headerMenu .userBtns .deliveryBtn span{
  font-size: 0;
}
.header .headerMenu .userBtns .cartBtn span {
  font-size: 0;
}

.header .headerMenu .userBtns .accountWrap {
  position: relative;
}
.header .headerMenu .userBtns .accountWrap .userBtn {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: url(../images/hAccount.svg) no-repeat;
  background-position: center;
  background-size: 30px 30px;
  transition: all 0.3s ease;
  background-color: var(--subColor);
}
.header .headerMenu .userBtns .accountWrap:hover .userBtn {
  background-image: url(../images/hAccount-fill.svg);
}
.header .headerMenu .userBtns .accountWrap .userBtn span {
  font-size: 0;
}

/* -- ▼ 버튼 -- */
.header .headerMenu .userBtns .accountWrap .userBtn img {
  position: absolute;
  top: 50%;
  right: -40%;
  transform: translateY(-45%);
  width: 9px;
  height: 7px;
  transition: 0.25s ease;
}
.header .headerMenu .userBtns .accountWrap:hover .userBtn img {
  transform: translateY(-45%) rotate(180deg);
}

/* userMenu */
.header .headerMenu .userBtns .accountWrap .userMenu {
  position: absolute;
  top: calc(100% + 24px);
  right: -20px;

  min-width: 120px;
  padding: 8px 0;

  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);

  border-radius: 12px;
  border: 1px solid rgba(246, 246, 246, 0.2);
  box-shadow: 0 15px 40px rgba(0,0,0,0.1);

  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);

  transition:
    opacity .25s ease,
    transform .25s ease,
    visibility .25s ease;

  z-index: 999;
}
/* hover 끊김 방지용 투명 브릿지 */
.header .headerMenu .userBtns .accountWrap .userMenu::before {
  content: '';
  position: absolute;
  left: 50px;
  right: -10px;
  top: -24%;
  height: 80px;
}
.header .headerMenu .userBtns .accountWrap:hover .userMenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.header .headerMenu .userBtns .accountWrap .userMenu li {}
.header .headerMenu .userBtns .accountWrap .userMenu li a {
  display: block;
  padding: 8px 0;

  text-align: center;
  font-size: 14px;
  font-weight: 400;
  color: #333;

  transition: all .25s ease;
}
.header .headerMenu .userBtns .accountWrap .userMenu li:last-child a {
  color: var(--color-gray-600);
}
.header .headerMenu .userBtns .accountWrap .userMenu li a:hover {
  color: var(--subColor);
  transform: translateX(2px);
}
.header .headerMenu .userBtns .accountWrap .userMenu li:last-child a:hover {
  color: var(--subColor);
  text-decoration: underline;
  transform: translateX(0px);
}

/* 구분선 (로그아웃 위 라인) */
.header .headerMenu .userBtns .userMenu li.logout {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(132, 132, 132, 0.25);
}

/* ======== main 영역 ======== */
/* ==== visual 영역 ==== */
.visual {
  position: relative;
  margin-top: 170px;
  padding-top: 30px;
}

/* == 검색바 == */
.visual .searchArea {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translate(-50%, 0);
  margin: 35px auto;

  width: min(580px, 60%);
  height: clamp(52px, 6vw, 65px);

  transition: opacity 0.6s ease, transform 1.2s ease;
  z-index: 2;
}

/* -- 아래로 스크롤하면 검색바 위로 올라감 -- */
.header.fixed ~ main .visual .searchArea {
  opacity: 0;
  transform: translate(-50%, -50px);
  pointer-events: none;
}

.visual .searchArea form {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding: 15px 35px;

  width: 100%;
  height: 100%;

  border-radius: 35px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  background: rgba(22, 33, 97, 0.2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* searchBox */
.visual .searchArea form .searchBox {
  flex: 1;
  border-radius: 35px;
  position: relative;
  transition: 0.2s ease;
}

/* -- click 했을 때 발광 효과 -- */
.visual .searchArea form::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 35px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.6);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: -1;
}
.visual .searchArea form:focus-within::before {
  opacity: 1;
}

.visual .searchArea form .searchBox input {
  width: 100%;
  background-color: rgba(0, 0, 0, 0);
  font-size: 1.3rem;
  color: #f8f8f8f3;
}
/* -- placeholder 글씨 색 변경 -- */
.visual .searchArea form .searchBox input::placeholder {
  color: #f8f8f8f3;
}

/* clearBtn */
/* .visual .searchArea form .clearBtn {
  position: absolute;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
} */

/* searchBtn */
.visual .searchArea form .searchBtn {
  background-color: rgba(0,0,0,0);

  display: flex;
  align-items: center;
  justify-content: center;
}
.visual .searchArea form .searchBtn img {
  width: clamp(24px, 4vw, 36px);
  height: clamp(24px, 4vw, 36px);
}
.visual .searchArea form .searchBtn span {
  font-size: 0;
}


/* == 배너 == */
.visual .bannerArea {
  position: relative;
  width: min(77vw, 1920px);
  max-width: 2300px;
  margin: 0 auto;
}
.visual .bannerArea .sw-visual-banner {
  width: 100%;
  overflow: hidden;
}
.visual .bannerArea .sw-visual-banner .swiper-slide {
  width: 100%;
  transition: transform 0.35s cubic-bezier(0, 0.5, 0.5, 1), opacity 0.35s;
}

.visual .bannerArea .sw-visual-banner .swiper-slide a.bannerBox {
  display: block;
  position: relative;
  aspect-ratio: 2.84 / 1;
  border-radius: 35px;
  overflow: hidden;
}
.visual .bannerArea .sw-visual-banner .swiper-slide a.bannerBox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* pagination */
.visual .bannerArea .sw-visual-banner .visual-pagination {
  bottom: 12px;
}
.visual .bannerArea .sw-visual-banner .visual-pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.3);
  opacity: 1;

  border: 1px solid rgba(255, 255, 255, 0.3);

  transition: .25s ease;
}
.visual .bannerArea .sw-visual-banner .visual-pagination .swiper-pagination-bullet-active {
  width: 28px;

  background: rgba(255, 255, 255, 0.65);
  border-color: rgba(255, 255, 255, 0.5);
}


/* == 최근 본 도서 == */
.visual .recentBooksArea {
  position: relative;
  width: 100%;
  height: 340px;
  padding-top: 45px;
  overflow: hidden;
  transition: 0.4s ease;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* -- 접힘 -- */
.visual .recentBooksArea.is-collapsed {
  height: 0;
}

/* toggleBtn(최근 본 도서 접기/펼치기) */
.recentBooks-toggleBtn {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);

  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;

  padding: 7px 16px;
  font-size: 12px;
  border: 1px solid var(--mainColor);
  border-radius: var(--borderR);
  color: var(--mainColor);
  background-color: #ffffffcc;

  transition: 0.25s ease;
  cursor: pointer;
}
.recentBooks-toggleBtn:hover {
  background-color: var(--mainColor);
  color: #fff;
}

/* ▽ 아이콘 */
.recentBooks-toggleBtn .arrow-icon {
  width: 16px;
  height: 16px;
  transition: transform .25s ease;
}
.recentBooks-toggleBtn:hover .arrow-icon {
  content: url('../images/arrow-down2-white.svg');
}

/* -- 접힌 상태 -- */
.recentBooks-toggleBtn.is-collapsed .arrow-icon {
  transform: rotate(180deg);
}

/* recentBooks */
.visual .recentBooksArea .sw-visual-recentBooks {
  /* padding-top: 13px; */
  padding: 13px 15px 0 15px;
  overflow: hidden;
}

.visual .recentBooksArea .sw-visual-recentBooks .swiper-wrapper {
  padding-left: calc(50% - 725px);
}
.visual .recentBooksArea .sw-visual-recentBooks .swiper-slide {
  position: relative;
  transition: transform 0.6s ease;
  aspect-ratio: 1/1.45;
}

/* -- hover하면 hoverBook 올라옴 -- */
.visual .recentBooksArea .sw-visual-recentBooks .swiper-slide:hover {
  transform: translateY(-5%);
}

.visual .recentBooksArea .sw-visual-recentBooks .swiper-slide > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0 auto;
  box-shadow: 7px 2px 10px rgba(209, 209, 209, 0.3);
  border: 1px solid #ededed;
}

/* hoverBook */
.visual .recentBooksArea .sw-visual-recentBooks .swiper-slide .hoverBook {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity ease-in-out .3s;
  padding: 20px 15px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  transition: opacity 0.3s ease;
}
.visual .recentBooksArea .sw-visual-recentBooks .swiper-slide:hover .hoverBook {
  opacity: 1;
}

/* icons */
.visual .recentBooksArea .sw-visual-recentBooks .swiper-slide .hoverBook .icons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}
.visual .recentBooksArea .sw-visual-recentBooks .swiper-slide .hoverBook .icons span {
  cursor: pointer;
}
.visual .recentBooksArea .sw-visual-recentBooks .swiper-slide .hoverBook .icons span img {
  width: 17px;
  height: 17px;
}

.visual .recentBooksArea .sw-visual-recentBooks .swiper-slide .hoverBook .icons span.icon-wish {}
.visual .recentBooksArea .sw-visual-recentBooks .swiper-slide .hoverBook .icons span.icon-close {}

/* book-info */
.visual .recentBooksArea .sw-visual-recentBooks .swiper-slide .hoverBook .book-info {
  color: #fff;
  padding: 13px 0;
}
.visual .recentBooksArea .sw-visual-recentBooks .swiper-slide .hoverBook .book-info .name {
  font-size: 1rem;
  font-weight: 700;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.2;
  max-height: calc(1.2em * 2);
  margin-bottom: 8px;
}
.visual .recentBooksArea .sw-visual-recentBooks .swiper-slide .hoverBook .book-info .author {
  font-size: 12px;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  max-height: 1;
}

/* morebtn */
.visual .recentBooksArea .sw-visual-recentBooks .swiper-slide .hoverBook .moreBtn {
  display: block;
  position: absolute;
  bottom: 30%;
  left: 50%;
  transform: translateX(-50%);
  width: 35px;
  height: 35px;
  margin: 0 auto;
  border: 1px solid #fff;
}
.visual .recentBooksArea .sw-visual-recentBooks .swiper-slide .hoverBook .moreBtn span:nth-child(1) {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 15px;
  background-color: #fff;
}
.visual .recentBooksArea .sw-visual-recentBooks .swiper-slide .hoverBook .moreBtn span:nth-child(2) {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 15px;
  height: 2px;
  background-color: #fff;
}

/* ==== eventList 영역 ==== */
.eventList {
  position: relative;
  padding-top: 15px;
}
.eventList .container {}

.eventList ul {
  display: flex;
  justify-content: center;
  gap: 40px;
}
.eventList ul li {
  flex: 0 1 auto;
}
.eventList ul li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.eventList ul li a img {
  width: clamp(56px, 8vw, 90px);
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  border-radius: 50%;
  transition: .25s ease;
}
.eventList ul li a img:hover{
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.1),
    0 2px 6px rgba(0, 0, 0, 0.04);
  transform: translateY(-3px);
}

.eventList ul li a span {
  font-size: clamp(12px, 1.6vw, 14px);
  white-space: nowrap;
}

/* ==== picks 영역 ==== */
.picks {
  position: relative;
}
.picks .container {
  width: 100%;
  background-color: var(--grayBg);
  opacity: 1;
  border-radius: 25px;

  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s ease;

  display: flex;
  align-items: flex-start;
}

/* == myArea == */
.picks .myArea {
  position: sticky;
  top: 70px;
  left: 0px;
  padding: 70px 30px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.picks .myArea span.for {
  font-size: 20px;
  color: var(--subColor);
}
.picks .myArea h2 {
  font-size: 55px;
  font-weight: 600;
  color: var(--color-gray-900);
}
.picks .myArea > p {
  font-size: 18px;
  color: var(--color-gray-900);
  padding: 10px 0 20px;
}

.picks .myArea .charLevel {
  border-radius: var(--borderR);
  width: 225px;
  height: 225px;
  background: url(../images/picks-char.png) no-repeat;
  background-position: center 180%;
  background-size: 191px 185px;
  background-color: #ff77ac;

  display: flex;
  flex-direction: column;
  padding: 15px 20px;
}
.picks .myArea .charLevel span.level {
  font-size: 35px;
  font-weight: 700;
  color: #fff;
}
.picks .myArea .charLevel span.name {
  font-size: 20px;
  color: #fff;
}

.picks .myArea .desc {
  width: 225px;
  height: 225px;
  border: 2px solid transparent;
  border-radius: var(--borderR);
  margin: 10px 0 22px 0;
  background-image:
    linear-gradient(#ffffff, #ffffff),
    linear-gradient(
      45deg,
      #6ce067,
      #0aa6fa,
      #262fd4,
      #0aa6fa,
      #6ce067
    );
  background-origin: border-box;
  background-clip: content-box, border-box;
  background-size: 200% 100%;
  background-position: 0% 50%;
  animation: descSmoothFlow 20s ease-in-out infinite;
}

@keyframes descSmoothFlow {
  0%   { background-position: 0% 50%; }
  25%  { background-position: 50% 50%; }
  50%  { background-position: 100% 50%; }
  75%  { background-position: 50% 50%; }
  100% { background-position: 0% 50%; }
}

.picks .myArea .desc .desc-wrap {
  padding: 20px 25px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.picks .myArea .desc p {}

.picks .myArea .desc .reading-cycle {
  display: flex;
  gap: 20px;
  margin: 25px 0 35px;
}
.picks .myArea .desc .reading-cycle > span {
  white-space: nowrap;
}
.picks .myArea .desc .reading-cycle .how-many {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.picks .myArea .desc .reading-cycle .how-many span:nth-child(1) {
  color: var(--subColor);
}
.picks .myArea .desc .reading-cycle .how-many span:nth-child(2) {
  color: var(--mainColor);
}
.picks .myArea .desc .compare {}
.picks .myArea .desc .compare span:nth-child(1) {
  color: var(--subColor);
}
.picks .myArea .desc .compare span:nth-child(2) {
  padding-left: 15px;
  color: var(--mainColor);
}

/* go-moreBtn */
.picks .myArea .go-moreBtn {
  position: relative;
  margin-left: 12.5px;
  width: 200px;
  height: 50px;
  border: 2px solid transparent;
  border-radius: var(--borderR);
  background: linear-gradient(#fff, #ffffff) padding-box, linear-gradient(
      315deg,
      #6ce067,
      #0aa6fa,
      #262fd4,
      #0aa6fa,
      #6ce067
    ) border-box;
  background-size: 200% 100%;
  background-position: 0% 50%;
  transition: 
    box-shadow 0.35s ease,
    background-position 0.45s ease;
  animation: descSmoothFlow 15s ease-in-out infinite;
  cursor: pointer;
}
.picks .myArea .go-moreBtn:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  background-position: 100% 50%;
}

@keyframes descSmoothFlow {
  0%   { background-position: 0% 50%; }
  25%  { background-position: 50% 50%; }
  50%  { background-position: 100% 50%; }
  75%  { background-position: 50% 50%; }
  100% { background-position: 0% 50%; }
}
.picks .myArea .go-moreBtn span {
  font-size: 20px;
  line-height: 45px;
  color: var(--mainColor);
  padding-left: 27px;
}
.picks .myArea .go-moreBtn span::after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  width: 27px;
  height: 27px;
  background: url(../images/arrow-right.svg)no-repeat;
  background-size: 27px 27px;
}

/* == recommendArea == */
.picks .recommendArea {
  width: calc(100% - 285px);
  padding: 100px 0 100px 30px;
  background: linear-gradient(45deg,
    #f7fff4,
    #f9fffa,
    rgb(237, 243, 255)
  );
  background-size: 200% 200%;
  animation: pastelFlow 6s ease infinite;

  display: flex;
  flex-direction: column;
  row-gap: 100px;
  border-radius: 0 25px 25px 0;
}

@keyframes pastelFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* = 종합 Pick = */
.picks .recommendArea .comprehensiveArea {
  position: relative;
  width: 100%;
}
.picks .recommendArea .comprehensiveArea .recommend-desc {
  width: 100%;
}
.picks .recommendArea .comprehensiveArea .recommend-desc h3 {
  font-size: 36px;
  font-weight: 700;
  color: var(--mainColor);
  margin-bottom: 12px;
}
.picks .recommendArea .comprehensiveArea .recommend-desc p {
  font-size: 20px;
  color: var(--color-gray-900);
}

/* 책 슬라이드 */
.picks .recommendArea .comprehensiveArea .sw-picks-books {
  width: 100%;
  overflow: hidden;
  padding-top: 85px;
}
.sw-picks-books .swiper-slide {
  position: relative;
  aspect-ratio: 1/1.4;
  transition: transform 0.4s ease;
}

/* -- hover 했을 때 -- */
.sw-picks-books .swiper-slide:hover {
  transform: scale(1.14) translateY(-13px);
}
.sw-picks-books .swiper-slide > img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  margin: 0 auto;
  box-shadow: 8px 8px 13px rgba(99, 99, 99, 0.234);
}
.sw-picks-books .swiper-slide:hover > img {
  box-shadow: 12px 18px 25px rgba(0, 0, 0, 0.35);
}

/* hoverBook */
.sw-picks-books .swiper-slide .hoverBook {
  position: absolute;
  inset: 0;
  opacity: 0;
  padding: 20px 15px;
  background-color: rgba(0, 0, 0, 0.8);
  transition: opacity 0.3s ease;
}
.sw-picks-books .swiper-slide:hover .hoverBook {
  opacity: 1;
}

.sw-picks-books .swiper-slide .hoverBook span.icon-close {
  cursor: pointer;
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 10;
}
.sw-picks-books .swiper-slide .hoverBook span.icon-close img {
  width: 17px;
  height: 17px;
}

/* book-info */
.sw-picks-books .swiper-slide .hoverBook .book-info {
  color: #fff;
  padding: 30px 0;
}
.sw-picks-books .swiper-slide .hoverBook .book-info span.name {
  font-size: 20px;
  font-weight: 700;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.3;
  max-height: calc(1.3em * 2);
  margin-bottom: 10px;
}
.sw-picks-books .swiper-slide .hoverBook .book-info span.author {
  font-size: 14px;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.3;
  max-height: calc(1.3em * 2);
}

/* moreBtn */
.sw-picks-books .swiper-slide .hoverBook .moreBtn {
  display: block;
  position: absolute;
  bottom: 25%;
  left: 50%;
  transform: translateX(-50%);
  width: 33px;
  height: 33px;
  border: 1px solid #fff;
}
.sw-picks-books .swiper-slide .hoverBook .moreBtn span:nth-child(1) {
  position: absolute;
  top: 49%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 15px;
  background-color: #fff;
}
.sw-picks-books .swiper-slide .hoverBook .moreBtn span:nth-child(2) {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 15px;
  height: 2px;
  background-color: #fff;
}

/* book-shelf */
.sw-picks-books .book-shelf {
  position: relative;
  bottom: 17px;
  left: -25px;
}
.sw-picks-books .book-shelf img {}


/* = 키워드 Pick = */
.picks .recommendArea .keywordsArea {
  position: relative;
  width: 100%;
}
.picks .recommendArea .keywordsArea .recommend-desc {
  width: 100%;
}
.picks .recommendArea .keywordsArea .recommend-desc h3 {
  font-size: 36px;
  font-weight: 700;
  color: var(--mainColor);
  margin-bottom: 12px;
}
.picks .recommendArea .keywordsArea .recommend-desc p {
  font-size: 20px;
  color: var(--color-gray-900);
  margin-bottom: 20px;
}
.picks .recommendArea .keywordsArea .recommend-desc ul.keywords {
  display: flex;
  align-items: center;
  gap: 8px;
}
.picks .recommendArea .keywordsArea ul.keywords li {
  color: var(--mainColor);
  border: 1px solid var(--mainColor);
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 20px;
  padding: 7px 20px;
}

/* 책 슬라이드 */
.picks .recommendArea .keywordsArea .sw-picks-books {
  width: 100%;
  overflow: hidden;
  padding-top: 90px;
}

/* ==== adBanner 영역 ==== */
.adBanner {
  position: relative;
  border-radius: 15px;
}
.adBanner a {
  width: 100%;
  height: 100%;
}
.adBanner a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==== best 영역 ==== */
.best {
  position: relative;
}
.best .container {}

.best h2.title {
  font-size: 40px;
  font-weight: 600;
  color: var(--mainColor);
  text-align: center;
  margin-bottom: 25px;
}

.best .best-tabBtn {
  margin-bottom: 35px;
}
.best .best-tabBtn ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.best .best-tabBtn ul li {}
.best .best-tabBtn ul li a {
  display: block;
  text-align: center;
  line-height: 45px;
  width: 130px;
  height: 45px;
  color: #6b6b6b;
  background-color: #f0f0f0;
  border-radius: var(--borderR);
}
.best .best-tabBtn ul li a.focus {
  background-color: #474c98;
  color: #fff;
  font-weight: 700;
}

/* == bestBookArea == */
.best .bestBooksArea {
  position: relative;
  padding: 50px 0;
  background-color: var(--grayBg);
}

.best .bestBooksArea .container {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  position: relative;
}

/* bestBookLarge */
.best .bestBooksArea .bestBookLarge {
  position: relative;
  width: 36%;
  height: 100%;
}
.best .bestBooksArea .bestBookLarge .best-large-inner {
  height: 100%;
  padding: 24px 28px;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
  
  display: flex;
  align-items: flex-end;
  gap: 25px;
}
.best .bestBooksArea .bestBookLarge .best-large-inner .best-large-thumb {
  display: block;
  position: relative;
  width: 50%; 
  flex: 0 0 50%;
  aspect-ratio: 1 / 1.37;
  box-shadow: 2px 2px 14px 0 rgba(0, 0, 0, 0.12);
  border-radius: 5px;
  overflow: hidden;
}
.best .bestBooksArea .bestBookLarge .best-large-inner .best-large-thumb img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.best .bestBooksArea .bestBookLarge .best-large-inner .best-large-info {}
.best .bestBooksArea .bestBookLarge .best-large-inner .best-large-info .best-large-rank {
  font-size: 30px;
  font-weight: 700;
  color: var(--subColor);
}
.best .bestBooksArea .bestBookLarge .best-large-inner .best-large-info .best-large-title {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.6px;
  color: #333;
  margin-top: 10px;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: keep-all;

  line-height: 1.2;
  height: 2.4em;
}
.best .bestBooksArea .bestBookLarge .best-large-inner .best-large-info .best-large-desc {
  font-size: 16px;
  margin-top: 10px;
  color: var(--color-gray-600);

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: keep-all;
  
  line-height: 1.4;
  height: 2.8em;
}

/* bestBookSlide */
.best .bestBooksArea .best-tabContents {
  width: 60%;
}
.best .bestBooksArea .best-tabContents > div {}
.best .bestBooksArea .best-tabContents > div .sw-best {
  visibility: hidden;
}
/* -- swiper 초기화 전 fouc 해결 -- */
.best .bestBooksArea .best-tabContents > div .sw-best.swiper-initialized {
  visibility: visible;
}
.best .bestBooksArea .best-tabContents > div .sw-best .swiper-slide {}
.best .bestBooksArea .best-tabContents > div .sw-best .swiper-slide a {
  display: block;
}
.best .bestBooksArea .best-tabContents > div .sw-best .swiper-slide a .book-thumb {
  display: block;
  position: relative;
  padding-bottom: 137%;
  margin: 0 auto;
  box-shadow: 2px 2px 14px 0 rgba(0, 0, 0, 0.12);
}
.best .bestBooksArea .best-tabContents > div .sw-best .swiper-slide a .book-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: 4px;
  background: var(--gradient);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: 0.25s ease;
}
.best .bestBooksArea .best-tabContents > div .sw-best .swiper-slide a:hover .book-thumb::after {
  opacity: 1;
}

/* -- on 이 붙어있는 슬라이드 -- */
.best .bestBooksArea .best-tabContents > div .sw-best .swiper-slide.on a .book-thumb::after {
  border-image: var(--gradient);
  border-image-slice: 1;
}

.best .bestBooksArea .best-tabContents > div .sw-best .swiper-slide a .book-thumb img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  object-fit: fill;
}
/* 순위 */
.best .bestBooksArea .best-tabContents > div .sw-best .swiper-slide a .book-thumb span {
  position: absolute;
  top: 0%;
  left: 9%;
  width: 28px;
  height: 28px;

  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.1px;
  text-align: center;
  line-height: 28px;
  color: #fff;
  background-color: var(--color-green-400);
}
.best .bestBooksArea .best-tabContents > div .sw-best .swiper-slide a:hover .book-thumb span {
  background-image: var(--gradient);
}

/* navigation */
.best .bestBooksArea .best-btn-prev {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  right: calc(100% + 25px);
  background-color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s ease;
  cursor: pointer;
}
.best .bestBooksArea .best-btn-prev:hover,
.best .bestBooksArea .best-btn-next:hover {
  background-color: rgba(224, 238, 221, 0.7);
}
.best .bestBooksArea .best-btn-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  left: calc(100% + 25px);
  background-color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s ease;
  cursor: pointer;
}
.best .bestBooksArea .best-btn-prev img, 
.best .bestBooksArea .best-btn-next img {
  width: 35px;
}

/* ==== casting 영역 ==== */
.casting {
  position: relative;
}
.casting .container {}


.casting h2 {
  font-size: 40px;
  font-weight: 600;
  color: var(--mainColor);
  text-align: center;
  margin-bottom: 25px;
}

/* == castingArea == */
.casting .castingArea {
  position: relative;
  background-color: var(--grayBg);
  border-radius: var(--borderR);
  width: 100%;
  min-height: 485px;
}

/* sw-casting-main */
.sw-casting-main {}
.sw-casting-main .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 55px 35px;
}

/* casting 메인 슬라이드 fade 겹침 방지 */
.sw-casting-main.swiper-fade .swiper-slide {
  opacity: 0;
  transition-property: opacity;
  pointer-events: none;
}
.sw-casting-main.swiper-fade .swiper-slide-active {
  opacity: 1;
  pointer-events: auto;
}

/* castLiveArea */
.sw-casting-main .swiper-slide .castLiveArea {
  width: 45%;
  min-width: 300px;
}
.sw-casting-main .swiper-slide .castLiveArea .castWrap {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}
.sw-casting-main .swiper-slide .castLiveArea iframe {
  border-radius: 15px;
  border: none;
  width: 100%;
  height: 100%;
}
.sw-casting-main .swiper-slide .castLiveArea span {
  padding: 15px 12px;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* castProductArea */
.castProductArea {
  width: 46%;
  align-self: flex-start;
  margin-top: 15px;
}
.castProductArea > span {}
.castProductArea .castProductBox {
  position: relative;
  display: flex;
  gap: 20px;
}
.castProductArea > .castProductBox {
  margin-top: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}

.castProductArea .castProductBox .castProductImg {
  width: 95px;
  height: 95px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
}
.castProductArea .castProductBox .castProductImg img {
  width: 100%;
  height: 100%;
}

.castProductArea .castProductBox .castProductText {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.castProductArea .castProductBox .castProductText .castProductInfo {}
.castProductArea .castProductBox .castProductText .castProductInfo .publisher {
  font-weight: 200;
  color: #999;
}
.castProductArea .castProductBox .castProductText .castProductInfo .book-name {
  padding-left: 10px;
  font-weight: 200;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  word-break: keep-all;
  text-overflow: ellipsis;
  overflow-wrap: break-word;
}

.castProductArea .castProductBox .castProductText .castProductPrice {
  font-weight: 200;
}
.castProductArea .castProductBox .castProductText .castProductPrice .cost-price {
  display: block;
  font-size: 14px;
  color: #999;
  text-decoration: line-through;
}
.castProductArea .castProductBox .castProductText .castProductPrice .sale {
  color: #ff3d33;
  font-weight: 500;
}
.castProductArea .castProductBox .castProductText .castProductPrice .sale-price {}
.castProductArea .castProductBox .castProductText .castProductPrice .sold-out {
  font-size: 20px;
  font-weight: 500;
}

.castProductArea .castProductBox .castProductBtns {
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  gap: 20px;
  align-items: flex-end;
  margin-bottom: 10px;
}
.castProductArea .castProductBox .castProductBtns .buy-btn {
  border: 1px solid #000;
  border-radius: 9px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 300;
  cursor: pointer;
  transition: 0.25s ease;
}
.castProductArea .castProductBox .castProductBtns .buy-btn:hover {
  background-color: rgba(255, 255, 255, 1);
}
.castProductArea .castProductBox .castProductBtns img {
  cursor: pointer;
}

/* sw-casting-thumb */
.sw-casting-thumb {
  position: absolute;
  bottom: 35px;
  right: 35px;
  max-width: 550px;
}
.sw-casting-thumb .swiper-slide {
  position: relative;
  border-radius: 5px;
  overflow: hidden;
}
.sw-casting-thumb .swiper-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 5px;
  padding: 3px;
  background: var(--gradient);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.sw-casting-thumb .swiper-slide:hover::after {
  opacity: 1;
}

.sw-casting-thumb .swiper-slide .castWrap {
  cursor: pointer;
}
.sw-casting-thumb .swiper-slide img {
  width: 100%;
  height: 100%;
}

/* navigation */
.casting .castingArea .casting-btn-prev {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  right: calc(100% + 25px);
  background-color: var(--color-gray-100);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s ease;
  cursor: pointer;
}
.casting .castingArea .casting-btn-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  left: calc(100% + 25px);
  background-color: var(--color-gray-100);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center; 
  transition: all .3s ease;
  cursor: pointer;
}
.casting .castingArea .casting-btn-prev:hover,
.casting .castingArea .casting-btn-next:hover {
  background-color: rgba(224, 238, 221, 0.7);
}
.casting .castingArea .casting-btn-prev img,
.casting .castingArea .casting-btn-next img {
  width: 35px;
}


/* ==== events 영역 ==== */
.events {
  position: relative;
  background-color: var(--grayBg);
}
.events .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* == eventsSlideArea == */
.events .eventsSlideArea {
  width: 42%;
  position: relative;
}
.events .eventsSlideArea h2.title {
  font-size: 40px;
  font-weight: 600;
  color: var(--mainColor);
  text-align: center;
  margin-bottom: 25px;
}

/* events-tabBtn */
.events .eventsSlideArea .events-tabBtn {
  margin-bottom: 35px;
}
.events .eventsSlideArea .events-tabBtn ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.events .eventsSlideArea .events-tabBtn ul li {}
.events .eventsSlideArea .events-tabBtn ul li a {
  display: block;
  text-align: center;
  line-height: 45px;
  width: 130px;
  height: 45px;
  color: #6b6b6b;
  background-color: #f0f0f0;
  border-radius: var(--borderR);
}
.events .events-tabBtn ul li a.focus {
  background-color: #474c98;
  color: #fff;
  font-weight: 700;
}

/* events-tabContents */
.events .eventsSlideArea .events-tabContents {
  position: relative;
}
.events .eventsSlideArea .events-tabContents > div {}
.events .eventsSlideArea .events-tabContents > div .sw-events {
  min-height: 360px;
}
.events .eventsSlideArea .events-tabContents > div .sw-events .swiper-slide {}
.events .eventsSlideArea .events-tabContents > div .sw-events .swiper-slide a {
  display: block;
  width: 100%;
  border-radius: var(--borderR);
  overflow: hidden;
}
.events .eventsSlideArea .events-tabContents > div .sw-events .swiper-slide a img {
  width: 100%;
}

/* navigation */
.events .eventsSlideArea .events-btn-prev {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  right: calc(100% + 25px);
  background-color: #fff;
  border-radius: 50%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: all .3s ease;
  cursor: pointer;
}
.events .eventsSlideArea .events-btn-prev:hover,
.events .eventsSlideArea .events-btn-next:hover {
  background-color: rgba(224, 238, 221, 0.7);
}
.events .eventsSlideArea .events-btn-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  left: calc(100% + 25px);
  background-color: #fff;
  border-radius: 50%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: all .3s ease;
  cursor: pointer;
}
.events .eventsSlideArea .events-btn-prev img,
.events .eventsSlideArea .events-btn-next img {
  width: 35px;
}


/* == eventsTodayArea == */
.events .eventsTodayArea {
  width: 42%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.events .eventsTodayArea .today-title {
  text-align: center;
}
.events .eventsTodayArea .today-title p.sub-title {
  font-size: 20px;
  color: var(--subColor);
}
.events .eventsTodayArea .today-title h2.title {
  font-size: 40px;
  font-weight: 600;
  color: var(--mainColor);
}

.events .eventsTodayArea .today-week {
  margin-top: 30px;
  margin-bottom: 30px;
  padding: 20px 100px;
  font-size: 25px;
  line-height: 25px;
  color: #fff;

  background: linear-gradient(
    165deg,
    #6ce067,
    #46c5db,
    #066af8
  );
  border-radius: 40px;
}

.events .eventsTodayArea .today-desc {
  text-align: center;
}
.events .eventsTodayArea .today-desc strong {
  font-size: 22px;
}
.events .eventsTodayArea .today-desc p {
  font-size: 20px;
  margin-bottom: 30px;
}

.events .eventsTodayArea .today-goBtns {
  position: relative;
  padding: 85px 80px;
  border-radius: 45px;
  background: linear-gradient(
    155deg,
    #6ce067,
    #46c5db,
    #066af8
  );
  font-size: 18px;
  font-weight: 500;
  color: var(--mainColor);
  display: flex;
  flex-direction: column;
  gap: 15px;
  overflow: hidden;
}
.events .eventsTodayArea .today-goBtns::before {
  content: '';
  display: block;
  position: absolute;
  bottom: -2px;
  left: 24px;
  width: 120px;
  height: 86px;
  background: url(../images/event-calendar.png) no-repeat center/cover;
}
.events .eventsTodayArea .today-goBtns::after {
  content: '';
  display: block;
  position: absolute;
  top: -3px;
  right: 4px;
  width: 100px;
  height: 95px;
  background: url(../images/event-stamp.png) no-repeat center/cover;
}
.events .eventsTodayArea .today-goBtns .attend {
  padding: 20px 32px;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 35px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  transition: 0.4s ease;
  cursor: pointer;
}
.events .eventsTodayArea .today-goBtns .attend:hover {
  background-color: rgba(255, 255, 255, 0.9);
}
.events .eventsTodayArea .today-goBtns .attend span {}
.events .eventsTodayArea .today-goBtns .attend img {
  width: 30px;
  height: 30px;
}

.events .eventsTodayArea .today-goBtns .benefit {
  padding: 20px 35px;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 35px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: 0.4s ease;
  gap: 40px;
}
.events .eventsTodayArea .today-goBtns .benefit:hover {
  background-color: rgba(255, 255, 255, 0.9);
}
.events .eventsTodayArea .today-goBtns .benefit span {
  color: var(--mainColor);
}
.events .eventsTodayArea .today-goBtns .benefit img {
  width: 30px;
  height: 30px;
}


/* ======== footer 영역 ======== */
.footer {
  position: relative;
}
.footer::before {
  content: '';
  display: block;
  position: absolute;
  top: 56px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-gray-400);
}
.footer::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-gray-400);
}
.footer .container {}

/* ==== footer-top ==== */
.footer .footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding: 20px 0;
}
.footer .footer-top .noticeArea {
  display: flex;
  align-items: center;
  gap: 55px;
}
.footer .footer-top .noticeArea > a {
  color: var(--mainColor);
  position: relative;
  white-space: nowrap;
}
.footer .footer-top .noticeArea > a::after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -20px;
  width: 2px;
  height: 10px;
  background-color: var(--mainColor);
}

/* notice, winner 슬라이드 공통 css */
.footer .footer-top .sw-footerNotice,
.footer .footer-top .sw-footerWinner {
  flex: 1;
  height: 20px;
  overflow: hidden;
}
.footer .footer-top .sw-footerNotice .swiper-slide,
.footer .footer-top .sw-footerWinner .swiper-slide {
  height: 20px;
}
.footer .footer-top .sw-footerNotice .swiper-slide a,
.footer .footer-top .sw-footerWinner .swiper-slide a {
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  line-height: 20px;
}
.footer .footer-top .winnerArea {
  display: flex;
  align-items: center;
  gap: 55px;
}
.footer .footer-top .winnerArea > a {
  color: var(--subColor);
  position: relative;
  white-space: nowrap;
}
.footer .footer-top .winnerArea > a::after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -20px;
  width: 2px;
  height: 10px;
  background-color: var(--subColor);
}

/* ==== footer-bottom ==== */
.footer .footer-bottom {
  padding: 30px 0 55px 0;
}

/* == logo-policy == */
.footer .footer-bottom .logo-policy-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* logo */
.footer .footer-bottom .logo-policy-wrap .footer-bottom-logo {
  display: flex;
  gap: 25px;
}
.footer .footer-bottom .logo-policy-wrap .footer-bottom-logo img {
  width: 165px;
}

/* policy */
.footer .footer-bottom .logo-policy-wrap .footer-bottom-policy {}
.footer .footer-bottom .logo-policy-wrap .footer-bottom-policy ul {
  display: flex;
  gap: 15px;
  white-space: nowrap;
}
.footer .footer-bottom .logo-policy-wrap .footer-bottom-policy ul li {}
.footer .footer-bottom .logo-policy-wrap .footer-bottom-policy ul li a {}

/* ==== footer-bottom-last ==== */
.footer .footer-bottom .footer-bottom-last {
  margin-top: 45px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* == info-copyright == */
.footer .footer-bottom .info-copyright-wrap {
  width: 560px;
  font-size: 12px;
  font-weight: 200;
}

/* info */
.footer .footer-bottom .info-copyright-wrap .footer-bottom-info {
  width: 100%;
}
.footer .footer-bottom .info-copyright-wrap .footer-bottom-info ul {
  display: flex;
  flex-wrap: wrap;
  row-gap: 2px;
  column-gap: 12px;
}
.footer .footer-bottom .info-copyright-wrap .footer-bottom-info ul li {
  white-space: nowrap;
  line-height: 1.5;
  position: relative;
}

/* copyright */
.footer .footer-bottom .info-copyright-wrap > span {
  display: block;
  margin-top: 20px;
}


/* == links-cert == */
.footer .footer-bottom .links-cert-wrap {}

/* links */
.footer .footer-bottom .links-cert-wrap .links {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
  white-space: nowrap;
}
.footer .footer-bottom .links-cert-wrap .links .family-site {
  padding: 12px 20px;
  background-color: var(--grayBg);
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 130px;
  transition: 0.25s ease;
  cursor: pointer;
}
.footer .footer-bottom .links-cert-wrap .links .family-site:hover {
  background-color: rgba(150, 150, 150, 0.2);
}
.footer .footer-bottom .links-cert-wrap .links .family-site span {}
.footer .footer-bottom .links-cert-wrap .links .family-site img {}
.footer .footer-bottom .links-cert-wrap .links .go-sns {
  padding: 12px 20px;
  background-color: var(--grayBg);
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 130px;
  transition: 0.25s ease;
  cursor: pointer;
}
.footer .footer-bottom .links-cert-wrap .links .go-sns:hover {
  background-color: rgba(150, 150, 150, 0.2);
}
.footer .footer-bottom .links-cert-wrap .links .go-sns span {}
.footer .footer-bottom .links-cert-wrap .links .go-sns img {}

/* cert */
.footer .footer-bottom .links-cert-wrap .cert {
  display: flex;
  gap: 10px;
}
.footer .footer-bottom .links-cert-wrap .cert img {
  width: 27px;
  height: 25px;
}
.footer .footer-bottom .links-cert-wrap .cert span {
  font-size: 10px;
  font-weight: 100;
  color: var(--color-gray-700);
}
.footer .footer-bottom .links-cert-wrap .cert p {
  font-size: 10px;
  font-weight: 100;
  color: var(--color-gray-700);
  padding-left: 15px;
}