.home-key {
  --gap-swiper: 0.8rem;
  --line-color: #444444;
  padding: 1rem;
  border-radius: 1rem;
  position: sticky;
  top: 0;
  left: 0;
  height: 100vh;
}
@media (max-width: 1025px) {
  .home-key {
    height: auto;
    position: static;
    overflow: hidden;
  }
}
.home-key-wrap {
  --itemsLength: 1;
  display: block;
  position: relative;
  height: calc(100vh * var(--itemsLength));
  display: block;
}
@media (max-width: 1025px) {
  .home-key-wrap {
    height: auto;
  }
}
@media (max-width: 767px) {
  .home-key-wrap {
    overflow: hidden;
  }
}
@media (max-width: 767px) {
  .home-key .container {
    padding-inline: 3.2rem;
  }
}
.home-key-inner {
  background-color: var(--bg-dark-gray);
  border-radius: 2rem;
  height: 100%;
  overflow: hidden;
}
@media (max-width: 1025px) {
  .home-key-inner {
    padding-top: 12rem;
    padding-bottom: 2.5rem;
    border-radius: 1rem;
  }
}
@media (max-width: 767px) {
  .home-key-inner {
    background-color: var(--bg-black);
    padding-block: 0;
    overflow: visible;
  }
}
@media (max-width: 767px) {
  .home-key-ic-wrap img {
    --ic-size: 6rem !important;
  }
}
.home-key .container {
  height: 100%;
  grid-template-rows: 1fr auto;
}
.home-key-title-wrap {
  grid-column: 1/-1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
@media (min-width: 768px) and (max-width: 1025px) {
  .home-key-title-wrap {
    grid-column: 2/12;
    margin-inline: -1.6rem;
    margin-bottom: 8rem;
    margin-top: 0;
  }
}
@media (max-width: 767px) {
  .home-key-title-wrap {
    grid-column: 1/-1;
    margin-top: 6.4rem;
    margin-bottom: 3.2rem;
    padding-inline: 0;
  }
}
.home-key-title {
  color: var(--cl-white);
  max-width: 120.6rem;
}
@media (min-width: 1025px) {
  .home-key-title .txt-64 {
    font-size: clamp(4rem, 5.8vh, 6.4rem);
  }
}
@media (max-width: 1025px) {
  .home-key-title {
    max-width: none;
  }
}
@media (max-width: 767px) {
  .home-key-title {
    width: 100%;
    min-width: auto;
  }
  .home-key-title > .txt-64 {
    font-size: 3.2rem;
    line-height: 1.1em;
  }
}
.home-key-pagi {
  display: none;
}
@media (max-width: 767px) {
  .home-key-pagi {
    grid-column: 1/-1;
    padding-bottom: 3.2rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: static;
    column-gap: 0.6rem;
  }
}
.home-key-pagi-item {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background-color: var(--cl-white-40);
  transition: all 0.4s ease-out;
}
.home-key-pagi-item.is-active {
  background-color: var(--cl-primary);
}
.home-key-main {
  grid-column: 1/-1;
  height: max(49rem, 66.2488809311svh);
  padding-bottom: 8.236347359svh;
}
@media (max-width: 1025px) {
  .home-key-main {
    height: auto;
    padding-bottom: 4.4rem;
  }
}
@media (max-width: 767px) {
  .home-key-main {
    padding-bottom: 3.2rem;
  }
}
.home-key-main-inner {
  display: grid;
  height: 100%;
  margin-inline: auto;
  aspect-ratio: 1/1;
  border-radius: 50%;
  border: solid max(0.1rem, 1px) var(--line-color);
}
@media (max-width: 1025px) {
  .home-key-main-inner {
    border: none;
    border-radius: unset;
    aspect-ratio: unset;
    display: block;
  }
}
.home-key-main-circle {
  grid-area: 1/1/2/2;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  pointer-events: none;
}
@media (max-width: 1025px) {
  .home-key-main-circle {
    display: none;
  }
}
.home-key-main-circle-line {
  position: absolute;
  width: 100%;
  height: 100%;
}
.home-key-main-circle-line-item {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: -1px;
  opacity: 0;
  transition: opacity 0.3s;
  --itemIndex: 1;
  transform: rotate(calc(360deg / (var(--itemsLength)) * (var(--itemIndex) - 1)));
}
.home-key-main-circle-line-item.active {
  opacity: 1;
}
.home-key-main-circle-line-item svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.home-key-main-circle-line-item svg circle {
  stroke-dashoffset: 314.159265359%;
  stroke-dasharray: 314.159265359%;
}
.home-key-main-circle-list {
  width: 100%;
  height: 100%;
  display: grid;
}
.home-key-main-circle-item {
  grid-area: 1/1/2/2;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: var(--line-color);
  transition: all var(--t);
  --itemIndex: 1;
  transform: rotate(calc(360deg / (var(--itemsLength)) * (var(--itemIndex) - 1)));
}
.home-key-main-circle-item .lottie-player,
.home-key-main-circle-item canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.24;
  filter: grayscale(1);
  transition: all var(--t);
}
.home-key-main-circle-item.active {
  opacity: 1;
  color: var(--cl-primary);
}
.home-key-main-circle-item.active .lottie-player,
.home-key-main-circle-item.active canvas {
  opacity: 1;
  filter: grayscale(0);
}
.home-key-main-circle-item-ic {
  position: absolute;
  top: 0;
}
@media (min-width: 1025px) {
  .home-key-main-circle-item-ic .ic {
    --ic-size: clamp(6rem, 9vh, 8rem) !important;
  }
}
.home-key-main-circle-item-ic-inner {
  margin-top: -50%;
  background-color: var(--bg-dark-gray);
  transform: rotate(calc(-360deg / (var(--itemsLength)) * (var(--itemIndex) - 1)));
}
.home-key-main-circle-item-ic svg path, .home-key-main-circle-item-ic svg circle {
  stroke: currentColor;
}
.home-key-main-list {
  grid-area: 1/1/2/2;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
@media (max-width: 1025px) {
  .home-key-main-list {
    display: block;
    overflow: visible;
    width: calc(100% + 1.6rem);
    margin-inline: -0.8rem;
  }
}
@media (max-width: 767px) {
  .home-key-main-list {
    margin-inline: 0;
    width: 100%;
  }
}
.home-key-main-list-line {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 100%;
  height: 100%;
  transition: all 0.4s linear;
}
.home-key-main-list-line.inactive {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.5);
}
@media (max-width: 1025px) {
  .home-key-main-list-line {
    display: none;
  }
}
.home-key-main-list-line-inner {
  transform-origin: 50% 100%;
  position: absolute;
  bottom: 50%;
  height: 50%;
  width: max(0.1rem, 1px);
  background-color: var(--line-color);
}
.home-key-main-list-inner {
  position: relative;
  z-index: 2;
  width: calc(100% - 25.067144136svh);
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: var(--bg-dark-gray);
  border: solid max(0.1rem, 1px) var(--line-color);
  display: grid;
}
@media (max-width: 1025px) {
  .home-key-main-list-inner {
    width: 100%;
    height: auto;
    aspect-ratio: unset;
    border: unset;
    display: flex;
    flex-direction: row;
    border-radius: unset;
  }
}
@media (max-width: 767px) {
  .home-key-main-list-inner {
    background-color: transparent;
  }
}
.home-key-main-list-inner-total {
  opacity: 0;
  position: absolute;
  inset: -1px;
  transform: rotate(-90deg);
  transition: opacity 0.3s;
}
@media (max-width: 1025px) {
  .home-key-main-list-inner-total {
    display: none;
  }
}
.home-key-main-list-inner-total.active {
  opacity: 1;
}
.home-key-main-list-inner-total.inactive {
  opacity: 0 !important;
}
.home-key-main-list-inner-total > svg circle {
  stroke-dashoffset: 314.159265359%;
  stroke-dasharray: 314.159265359%;
}
.home-key-main-list-item {
  grid-area: 1/1/2/2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(2rem, 4vh, 4.8rem);
  pointer-events: none;
}
@media (max-width: 1025px) {
  .home-key-main-list-item {
    background-color: rgba(56, 56, 56, 0.4);
    border: max(1px, 0.1rem) solid var(--cl-white-05);
    pointer-events: auto;
    border-radius: 1rem;
    padding: 3.2rem;
    width: calc(32rem + var(--gap-swiper) * 2);
    height: 32rem;
    margin-inline: var(--gap-swiper);
    flex-shrink: 0;
    text-align: left;
    align-items: flex-start;
    justify-content: space-between;
  }
}
@media (max-width: 767px) {
  .home-key-main-list-item {
    padding: 3.2rem 2.4rem;
    margin-inline: 0;
    height: auto;
    border: none;
    border-radius: 0.5rem;
    background-color: var(--bg-dark-gray);
    justify-content: start;
  }
}
.home-key-main-list-item-ic {
  display: none;
}
@media (max-width: 1025px) {
  .home-key-main-list-item-ic {
    display: block;
    color: var(--cl-primary);
  }
  .home-key-main-list-item-ic .lottie-player,
  .home-key-main-list-item-ic canvas {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0.24;
    filter: grayscale(1);
    transition: all var(--t);
  }
}
@media (max-width: 767px) {
  .home-key-main-list-item-ic {
    margin-bottom: 6.6rem;
  }
}
.home-key-main-list-item.swiper-slide-visible {
  opacity: 1;
  color: var(--cl-primary);
}
.home-key-main-list-item.swiper-slide-visible .lottie-player,
.home-key-main-list-item.swiper-slide-visible canvas {
  opacity: 1;
  filter: grayscale(0);
}
.home-key-main-list-item-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 27.4rem;
}
@media (max-width: 1025px) {
  .home-key-main-list-item-content {
    align-items: start;
  }
}
.home-key-main-list-item-title {
  margin-bottom: 1.2rem;
  max-width: 24.4rem;
}
@media (min-width: 1025px) {
  .home-key-main-list-item-title .txt-24 {
    font-size: clamp(2rem, 2.4vh, 2.4rem);
  }
}
@media (max-width: 1025px) {
  .home-key-main-list-item-title {
    max-width: 25.6rem;
    color: var(--cl-white);
    min-height: 5.2rem;
  }
}
@media (max-width: 767px) {
  .home-key-main-list-item-title {
    min-height: 0;
  }
}
.home-key-main-list-item-title .word {
  color: rgba(255, 255, 255, 0);
  transition: all 0.4s ease-out;
  transition-delay: 0s;
  transform: translateY(10%);
}
.home-key-main-list-item-sub {
  transition: color var(--t);
}
@media (min-width: 1025px) {
  .home-key-main-list-item-sub .txt-16 {
    font-size: clamp(1.2rem, 2.4vh, 1.6rem);
  }
}
@media (max-width: 1025px) {
  .home-key-main-list-item-sub {
    color: var(--cl-white-50);
  }
}
.home-key-main-list-item-sub .word {
  color: rgba(255, 255, 255, 0);
  transition: all 0.3s ease-out;
  transition-delay: 0s;
  transform: translateY(10%);
}
.home-key-main-list-item.active {
  opacity: 1;
  pointer-events: auto;
}
.home-key-main-list-item.active .home-key-main-list-item-title .word {
  color: rgb(255, 255, 255);
  transition-delay: var(--trans-delay);
  transform: translateY(0);
}
.home-key-main-list-item.active .home-key-main-list-item-sub .word {
  color: rgba(255, 255, 255, 0.5);
  transition-delay: var(--trans-delay);
  transform: translateY(0);
}
.home-key-main-list-last-item {
  grid-area: 1/1/2/2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4.2rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}
.home-key-main-list-last-item.active {
  opacity: 1;
  pointer-events: auto;
}
.home-key-main-list-last-item-title {
  color: rgba(255, 255, 255, 0.5);
}
@media (min-width: 768px) and (max-width: 1025px) {
  .home-key-main-list-last-item {
    display: none;
  }
}
.home-key-main-list-scroller {
  width: calc(100% - var(--gap-swiper) * 2);
  margin-inline: auto;
  margin-top: 6rem;
  overflow: hidden;
  display: none;
}
@media (min-width: 768px) and (max-width: 1025px) {
  .home-key-main-list-scroller {
    display: block;
  }
}
.home-key-main-list-scroller-inner {
  height: 1.6rem;
  background: repeating-linear-gradient(90deg, var(--cl-white-20), var(--cl-white-20) max(0.1rem, 1px), transparent max(0.1rem, 1px), transparent 0.4rem);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: start;
}
.home-key-main-list-scroller-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 20.6rem;
  position: absolute;
  padding-inline: 0.3rem;
  background-color: var(--bg-dark-gray);
  border-image-source: var(--scroller-bg);
  border-image-slice: 0 10.6796116505% fill;
  border-image-width: 0 2.2rem;
}
@media (max-width: 1025px) {
  .home-key-main-list-scroller-thumb {
    width: 10.3rem;
    border-image-slice: 0 11.6504854369% fill;
    border-image-width: 0 1.2rem;
  }
}

/*# sourceMappingURL=data:application/json;charset=utf-8,%7B%22version%22:3,%22sourceRoot%22:%22%22,%22sources%22:%5B%22../src/scss/sections/sc-home-key.scss%22,%22../src/scss/global/tool.scss%22%5D,%22names%22:%5B%5D,%22mappings%22:%22AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ACGF;EDXF;IAWQ;IACA;IACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;ACVN;EDKE;IAQQ;;;ACzBV;EDiBE;IAYQ;;;AC7BV;EDkCM;IACI;;;AAIR;EACI;EACA;EACA;EACA;;AC/BN;ED2BE;IAOQ;IACA;IACA;;;AChDV;EDuCE;IAaQ;IACA;IACA;;;ACtDV;ED4DU;IACI;;;AAKZ;EACI;EACA;;AAIJ;EACI;EACA;EACA;EACA;EACA;EACA;;ACxEN;EDkEE;IASQ;IACA;IACA;IACA;;;ACpFV;EDwEE;IAgBQ;IACA;IACA;IACA;;;AAIR;EACI;EACA;;ACzEN;ED4EU;IACI;;;ACzFd;EDmFE;IAWQ;;;AC1GV;ED+FE;IAeQ;IACA;;EAEA;IACI;IACA;;;AAKZ;EACI;;ACzHN;EDwHE;IAIQ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAKZ;EACI;EACA;EACA;;AC1IN;EDuIE;IAMQ;IACA;;;AC1JV;EDmJE;IAWQ;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AC3JV;EDqJM;IASQ;IACA;IACA;IACA;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AC9KV;EDqKM;IAYQ;;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAKZ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EAwBA;EACA;;AAvBA;AAAA;EAEI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EAQI;EACA;;AAPA;AAAA;EAEI;EACA;;AAUR;EACI;EACA;;ACnPlB;EDsPsB;IACI;;;AAIR;EACI;EAEA;EACA;;AAGJ;EAEI;;AAMhB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AC9RV;EDsRM;IAWQ;IACA;IACA;IACA;;;AChTd;EDkSM;IAkBQ;IACA;;;AAIJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;ACzTlB;ED6SU;IAgBQ;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AClVd;ED0UU;IAWQ;IACA;IACA;IACA;IACA;IACA;IACA;;;ACvWlB;EDsVU;IAqBQ;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;ACvWlB;EDkWc;IAQQ;;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ACpYd;ED4XU;IAWQ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AC9ZlB;EDwYU;IA0BQ;IACA;IACA;IACA;IACA;IACA;IACA;;;AAGJ;EACI;;AChalB;ED+Zc;IAIQ;IACA;;EAEA;AAAA;IAEI;IACA;IACA;IACA;IACA;IACA;;;ACzb1B;ED2ac;IAqBQ;;;AAIR;EAQI;EACA;;AAPA;AAAA;EAEI;EACA;;AAOR;EACI;EACA;EACA;EACA;;ACxclB;EDocc;IAOQ;;;AAIR;EACI;EACA;;ACrclB;EDwcsB;IACI;;;ACrd1B;ED+cc;IAWQ;IACA;IACA;;;ACxetB;ED2dc;IAiBQ;;;AAGJ;EACI;EACA;EACA;EACA;;AAIR;EACI;;AChelB;EDmesB;IACI;;;AChf1B;ED2ec;IAUQ;;;AAGJ;EACI;EACA;EACA;EACA;;AAIR;EACI;EACA;;AAIQ;EACI;EACA;EACA;;AAKJ;EACI;EACA;EACA;;AAOpB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;;AChjBlB;ED8hBU;IAsBQ;;;AAIR;EACI;EACA;EACA;EACA;EACA;;AC7jBd;EDwjBU;IAQQ;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ACjlBlB;EDskBc;IAcQ;IACA;IACA%22,%22file%22:%22sc-home-key.css%22%7D */