/* 히스토리 PC 영역 */
.history .history_mo {display: none;}
.history .history_pc {display: grid;}

.history .title-section {
  display: flex;
  justify-content: flex-end;
}

.history .section-title {
  font-size: 20px;
  font-weight: bold;
  letter-spacing: -0.5px;
  color: #dedede;
  margin-bottom: 62px;
  margin-top: 106px;
}
.history .content-section {
  position: relative;
  display: flex;
}
.history .swiper {
  width: 100%;
  height: 100%;
}

.history .swiper-slide {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.history .swiper-slide img {
  display: block;
  object-fit: cover;
  filter: grayscale(100%);
}
.history-swiper .swiper-slide-active {
  z-index: 2;
  margin-left: 102px !important;
  margin-right: 114px !important;
}

.history-swiper .swiper-slide-active .thumb {
  transform: scale(1.54) !important;
  filter: grayscale(0) !important;
}
.history-swiper .active-title {
  position: absolute;
  top: 104px;
  left: -36px;
  height: 48px;
  object-fit: cover;
}
.history-swiper .swiper-slide-active .active-title img {
  display: block !important;
  width: auto;
  height: 100%;
}

.history .swiper-pagination-bullet-active,
.history .swiper-pagination-bullet {
  width: auto;
  height: 36px;
  display: block;
}

.history-swiper-pagination .bullet-container {
  display: grid;
  gap: 70px;
}

.history-swiper .swiper-slide a {
  display: none;
}
.history-swiper .swiper-slide-active a {
  display: block !important;
  position: absolute;
  width: 230px;
  height: 295px;
  transform: scale(1.56);
}

.history .history_pc{background:transparent linear-gradient(180deg,#414141 0%,#000000 100%) 0% 0% no-repeat padding-box;position: relative;}
.history_pc .title{position:absolute;top:8%;left:15.2%;color:#fff;font-weight:700;font-size:20px;}
.history_pc .container{height:70%;display:grid;grid-template-columns:40% 60%;top:50%;transform:translateY(-50%);}

.history_pc .title-section{
  height: 100vh;
  position: relative;
}
.history_pc .title-section::after{content:'';display:block;width:1px;height:100%;background-color:#fff;position:absolute;top:0;left: 40%;}
.history_pc .swiper-vertical .select-swiper {align-items: flex-end;}
.history_pc .swiper-pagination {width: 100%; min-height: 940px; position: absolute;display: flex;align-items: center;right: 0;left: unset; overflow: hidden; bottom: 50%;transform: translate(40%, 50%);}
.history_pc .swiper-pagination .bullet-container {display: flex; align-items: center;justify-items: center;}
.history_pc .swiper-pagination-bullet {width: 260px; height: auto; background: none; text-align: left; position: relative; margin: 0 20px;filter: grayscale(100%);}
.history_pc .swiper-pagination-bullet a {display: none; cursor: default;}

.history_pc .swiper-pagination-bullet.swiper-pagination-bullet-active{width: 380px;filter: grayscale(0);}
.history_pc .swiper-pagination-bullet.swiper-pagination-bullet-active a{cursor: pointer;display:block;position:absolute;width:230px;height:295px;top: 50%;left: 50%; transform:translate(-50%, -50%) scale(1.66);}
.history_pc .swiper-slide {width: 62%; color: #fff;text-align: left;justify-content: flex-start; margin: 0 !important; cursor: pointer}
.history_pc .swiper-slide.swiper-slide-active p {color: #fff;-webkit-text-stroke: 1px #fff;}
.history_pc .swiper-slide.swiper-slide-active p span{color: #fff;-webkit-text-stroke: 1px #fff;}
/* 슬라이드 1칸 높이(컨테이너 70vh / slidesPerView 7 = 10vh)와 슬라이드 폭(40vw의 62% = 24.8vw)을
   넘지 않도록 상한을 둔다. 상한이 없으면 화면이 작을 때 DECEMBER/FEBRUARY 같은 긴 월이
   줄바꿈되어 위아래 슬라이드와 겹친다. */
.history_pc .swiper-slide p{font-size:min(61px, 7vh, 3.3vw);line-height:1.1;white-space:nowrap;font-weight:700;color:transparent;-webkit-text-stroke:1px #666;-webkit-font-smoothing:antialiased;}
.history_pc .swiper-slide p span{font-size:0.46em;font-weight:700;color:transparent;-webkit-text-stroke:1px #666;}
.history_pc .activetxt{position: absolute; top: -29%;font-size: 34px;font-weight: 700;text-align: left;color: #fff;display: inline-block;white-space: nowrap;display: none;}
.history_pc .activetxt .month {font-size:74px;font-weight:700;}
.history_pc .activetxt .year {font-size:28px;font-weight:600;}
.history_pc .activetxt p{font-size: inherit;color: inherit;}
.history_pc .activetxt p span{color: inherit;}

.history_pc .thumbs-swiper {overflow: hidden; padding-top: 12%;}
.history_pc .thumbs-swiper .swiper-wrapper {width: auto; height: auto;align-items: center;}
.history_pc .thumbs-swiper .swiper-slide {width: 25% !important; margin-left:30px !important; margin-right:30px !important;}
.history_pc .thumbs-swiper .swiper-slide.swiper-slide-active{width: 32% !important;}
.history_pc .thumbs-swiper .swiper-slide.swiper-slide-active img{filter:grayscale(0)!important;}
.history_pc .thumbs-swiper .swiper-slide.swiper-slide-active .activetxt{display: block;}

/* 히스토리 모바일 영역 */
@media (max-width: 1080px) {
  .history .history_mo {display: grid;}
  .history .history_pc {display: none;}
  .history {
    height: 100vh;
    grid-template-columns: 100%;
    grid-template-rows: 60% 280px;
  }

  .history .history_mo {
    width: 100%;
    height: 100%;
    background: transparent linear-gradient(180deg, #414141 0%, #000000 100%) 0%
      0% no-repeat padding-box;
    position: relative;
  
    grid-template-columns: 100%;
    grid-template-rows: 60% 280px;
  }

  .history .title-section {
	  order: 2;
    overflow: hidden;
    margin-top: 6%;
  }
  .history .content-section {
    order: 1;
  }

  .history-swiper .active-title {display: none;}
  .history-swiper .swiper-slide-active {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .history-swiper .swiper-slide {
    padding-top: 50px;
  }  
  .history-swiper .thumb {
    width: 230px;
    height: 295px;
  }
  .history-swiper .swiper-slide-active .thumb {
    transform: scale(1.25) !important;
  }
  .history .title-section .container {
    width: 100%;
  }
  .history-swiper-pagination .bullet-container {
    gap: 10px;
  }
  .history .swiper-pagination-bullet-active,
  .history .swiper-pagination-bullet {
    background-position: center;
    height: 88px;
    color: #fff;
    text-align: center;
    font-size: 36px;
    font-weight: 500;
    background-color: transparent;
  }
  .history .swiper-pagination-bullet .year{font-size:14px;color:transparent;-webkit-text-stroke:1px #fff;}
  .history .swiper-pagination-bullet .month {font-size: 38px;color:transparent;-webkit-text-stroke:1px #fff;}
  .history .swiper-pagination-bullet.swiper-pagination-bullet-active p{color:#fff;font-weight: 600;-webkit-text-stroke:1px transparent;}

  .history .section-title {
    font-size: 14px;
    font-weight: bold;
    letter-spacing: -0.35px;
    color: #dedede;
    position: absolute;
    top: 9%;
    left: 50%;
    transform: translate(-250%, 0%);
    margin-top: 0;
    margin-bottom: 0;
  }
}