/* line 1, ../sass/index/index-top.scss */
.i-top {
  position: relative;
  min-height: 100vh;
}

/* line 6, ../sass/index/index-top.scss */
.i-top-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* line 14, ../sass/index/index-top.scss */
.i-top-bg img, .i-top-bg video {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* line 22, ../sass/index/index-top.scss */
.i-top-bg:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: .4;
}

/* line 36, ../sass/index/index-top.scss */
.i-top-thumb {
  height: 100vh;
  position: relative;
  overflow: hidden;
}

/* line 42, ../sass/index/index-top.scss */
.i-top-thumb-slider,
.i-top-thumb-slider .swiper-slide {
  height: 100%;
}

/* line 47, ../sass/index/index-top.scss */
.i-top-thumb-slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* line 54, ../sass/index/index-top.scss */
.i-top-thumb-slider {
  position: relative;
}
/* line 58, ../sass/index/index-top.scss */
.i-top-thumb-slider .swiper-slide:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: .4;
}
/* line 70, ../sass/index/index-top.scss */
.i-top-thumb-slider img, .i-top-thumb-slider video {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* line 81, ../sass/index/index-top.scss */
.i-top-thumb-ui {
  position: absolute;
  top: 58px;
  right: 5px;
  z-index: 10;
  color: white;
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  border-radius: 4px;
  overflow: hidden;
  padding: 3px;
  background: #00000021;
  backdrop-filter: blur(10px);
}

/* line 97, ../sass/index/index-top.scss */
.i-top-thumb-channel {
  font-size: 14px;
  letter-spacing: 0px;
  padding: 2px 12px;
  display: flex;
  flex-direction: column;
  font-weight: 600;
}

/* line 106, ../sass/index/index-top.scss */
.i-top-thumb-arrows {
  display: flex;
  gap: 2px;
  margin-left: auto;
}

/* line 112, ../sass/index/index-top.scss */
.i-top-thumb-prev,
.i-top-thumb-next {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
  transition: .3s ease-in-out;
}
/* line 125, ../sass/index/index-top.scss */
.i-top-thumb-prev:hover,
.i-top-thumb-next:hover {
  background: rgba(255, 255, 255, 0.6);
}

/* line 130, ../sass/index/index-top.scss */
.i-top-thumb-thumbs {
  display: flex;
  gap: 2px;
  width: 100%;
  margin-top: 40px;
}

/* line 137, ../sass/index/index-top.scss */
.i-top-thumb-thumb {
  width: 80px;
  height: 42px;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
}

/* line 146, ../sass/index/index-top.scss */
.i-top-thumb-thumb.active {
  border-color: #fff;
}

/* line 152, ../sass/index/index-top.scss */
.i-top-thumb-thumb img, .i-top-thumb-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* line 161, ../sass/index/index-top.scss */
.i-top-thumb-desc {
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 50px;
  z-index: 2;
  color: #fff;
}
/* line 169, ../sass/index/index-top.scss */
.i-top-thumb-desc h3 {
  font-size: 84px;
  margin-bottom: 29vh;
}
/* line 175, ../sass/index/index-top.scss */
.i-top-thumb-desc p {
  max-width: 410px;
  font-size: 18px;
}

/* line 1, ../sass/index/index-category.scss */
.i-category {
  position: relative;
}

/* line 5, ../sass/index/index-category.scss */
.i-category-wr {
  position: relative;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
/* line 12, ../sass/index/index-category.scss */
.i-category-wr.grid2 {
  grid-template-columns: repeat(2, 1fr);
}

/* line 17, ../sass/index/index-category.scss */
.i-category-box {
  position: relative;
  aspect-ratio: 4 / 5;
  display: flex;
  flex-direction: column;
}
/* line 23, ../sass/index/index-category.scss */
.i-category-box img, .i-category-box video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* line 33, ../sass/index/index-category.scss */
.i-category-box p {
  position: sticky;
  left: 0;
  padding: 16px;
  font-size: 40px;
  z-index: 2;
  color: #fff;
  bottom: 0;
  margin-top: auto;
}
/* line 44, ../sass/index/index-category.scss */
.i-category-box:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: .4;
}

/* line 1, ../sass/index/index-road.scss */
.in-road {
  position: relative;
  overflow: hidden;
  padding: calc(9vw * 9 / 16) 0;
}

/* line 7, ../sass/index/index-road.scss */
.in-road-wr {
  position: relative;
}
/* line 13, ../sass/index/index-road.scss */
.in-road-wr .img {
  position: relative;
  display: inline-block;
  margin: 0 4px;
}
/* line 18, ../sass/index/index-road.scss */
.in-road-wr .img picture {
  position: relative;
  display: block;
}
/* line 24, ../sass/index/index-road.scss */
.in-road-wr .img img, .in-road-wr .img video {
  width: 100%;
  width: calc(53vw * 9 / 16);
  height: calc(67vw * 9 / 16);
  object-fit: cover;
  display: block;
}
/* line 33, ../sass/index/index-road.scss */
.in-road-wr .imgtxt {
  font-size: 13px;
  display: block;
  font-weight: 600;
  padding-top: 8px;
  text-transform: uppercase;
}

/* line 1, ../sass/index/index-config.scss */
.i-config {
  position: relative;
}

/* line 5, ../sass/index/index-config.scss */
.i-config-wr {
  position: relative;
}
/* line 8, ../sass/index/index-config.scss */
.i-config-wr .bg {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  padding: 0 8px;
}
/* line 15, ../sass/index/index-config.scss */
.i-config-wr .bg img, .i-config-wr .bg video {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* line 25, ../sass/index/index-config.scss */
.i-config-desc {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50%;
  padding: 20px 15px;
  z-index: 2;
}
/* line 33, ../sass/index/index-config.scss */
.i-config-desc h4 {
  font-size: 39px;
  display: block;
  margin-bottom: 16px;
  color: #fff;
}
/* line 39, ../sass/index/index-config.scss */
.i-config-desc h4 b {
  display: block;
  opacity: .7;
}