/* -----------------------
  difference
----------------------- */
.difference {
  background: url(../img/difference_bg.png) no-repeat center top / cover;
  overflow: hidden;
}

.difference .slider-area {
  position: relative;
  height: min(147.81vw, 1419px);
}
.difference .slider-area .icon-box {
  padding-left: min(4.17vw, 40px);
  position: relative;
  z-index: 6;
  pointer-events: none;
}
.difference .slider-area .icon-box .icon {
  width: min(45.52vw, 437px);
}

.difference .slider-area .slider-box {
  display: grid;
  width: min(70vw, 693px);
  height: 100%;
  margin: 0 0 0 auto;
  position: absolute;
  top: 0;
  right: max(-3.65vw, -35px);
  border-radius: min(16.67vw, 160px);
}
.difference .slider-area .slider-box::before {
  content: '';
  width: 100%;
  height: 100%;
  background: url(../img/difference_slider_phone.png) no-repeat left top / auto 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  pointer-events: none;
}

.difference .slider-area .slider-box .slick-list {
  border-radius: min(15.67vw, 150px);
  transform: translateX(min(1.67vw, 10px));
}

.difference .slider-area .slider-box .slide-item {
  background-color: #fff;
  grid-area: 1 / 1;
  overflow-y: scroll;
  border-radius: min(15.67vw, 150px);
}
.difference .slider-area .slider-box .slide-item img {
  width: 100%;
  height: auto;
}
.difference .slider-area .slider-box .slick-slide {
  opacity: 1 !important;
}
.difference .slider-area .slider-box .slide-01 {
  z-index: 4;
}
.difference .slider-area .slider-box .slide-02 {
  z-index: 3;
}
.difference .slider-area .slider-box .slide-03 {
  z-index: 2;
}

.difference .slider-area .slider-box .slide-01 img {
  opacity: 0 !important;
}

.difference .slider-area .slider-box .slide-01.slick-active img {
  animation: slide01 1.2s forwards;
  animation-delay: 0.5s;
  transition: 0.5s;
  opacity: 1!important; 
}

@keyframes slide01 {
  0% {
    transform: translateY(0);
  }

  99.9%,
  to {
    transform: translateY(max(-17%, -317px));
  }
}

.difference .slider-area .slider-box .slide-02 img {
  opacity: 0 !important;
}

.difference .slider-area .slider-box .slide-02.slick-active img {
  animation: slide02 1.2s forwards;
  transition: 0.6s;
  animation-delay: 0.8s;
  opacity: 1!important; 
}

@keyframes slide02 {
  0% {
    transform: translateY(0);
  }

  99.9%,
  to {
    transform: translateY(max(-38.8%, -910px));
  }
}

.difference .slider-area .slider-box .slide-03 img {
  opacity: 0 !important;
}

.difference .slider-area .slider-box .slide-03.slick-active img {
  animation: slide03 1.2s forwards;
  transition: 0.6s;
  animation-delay: 0.8s;
  opacity: 1!important;  
}

@keyframes slide03 {
  0% {
    transform: translateY(0);
  }

  99.9%,
  to {
    transform: translateY(max(-7.45%, -154px));
  }
}


.difference .medal-box {
  grid-auto-flow: column;
  margin-top: max(-15.94vw, -153px);
  position: relative;
  z-index: 6;
}
.difference .medal-01 {
  transition: all 0.4s 0s ease;
  transition-delay: 0s;
}