@charset "utf-8";

.functions {
  position: relative;
  overflow: hidden;
  width: 100vw;
  height: 100vw;
  background-image: url(../IMAGES/SP_function_bg.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 50% 50%;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}
.functions._fade {
  opacity: 1;
}
.animetion-container {
  width: 72.54vw;
  height: 38.4vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.detail-container {
  display: none;
}
.slide_functions {
  margin: 0 auto;
  padding-top: 8.54vw;
  padding-bottom: 8.54vw;
  position: relative;
  transition: opacity 0.8s ease-in-out;
  opacity: 0;
}
.slide_functions._open {
  opacity: 1;
}
.slide_functions .label {
  margin-top: 4.8vw;
  font-size: 4.8vw;
  line-height: 1.3;
  letter-spacing: 0.2vw;
  text-align: center;
  color: #333;
}
.slide_functions .info {
  position: relative;
  margin-top: 3.74vw;
  padding-top: 5.34vw;
  font-size: 3.74vw;
  line-height: 1.71;
  letter-spacing: 0.15vw;
  text-align: left;
  color: #333;
}
.slide_functions .info::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #333;
}
.slide_functions .swiper-slide {
  padding: 0 13.34vw;
}
.slide_functions .swiper-button-next,
.slide_functions .swiper-button-prev {
  background-size: 40%;
}
.slide_functions .swiper-button-prev {
  left: 0.27vw;
  background-image: url(/SP/LEAF/VLP/360SAFETYASSIST/IMAGES/swiper_prev_red.png);
}
.slide_functions .swiper-button-next {
  right: 0.27vw;
  background-image: url(/SP/LEAF/VLP/360SAFETYASSIST/IMAGES/swiper_next_red.png);
}
.slide_functions .detail-link {
  margin-top: 9.34vw;
}
.seek-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #21c6e6;
  z-index: 2;
  transform: scaleX(0);
  transform-origin: center left;
}
.function-icon {
  position: relative;
  margin: 0 auto;
}
.function-icon._animetion {
  position: absolute;
  width: 1.6vw;
  height: 1.6vw;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}
.function-icon._animetion._open {
  opacity: 1;
}
.function-icon._animetion._icon1 {
  top: -5.5vw;
  left: 35vw;
}
.function-icon._animetion._icon2 {
  top: -2.1vw;
  left: 47.2vw;
}
.function-icon._animetion._icon3 {
  top: 5.5vw;
  left: 56vw;
}
.function-icon._animetion._icon4 {
  top: 18vw;
  left: 59.34vw;
}
.function-icon._animetion._icon5 {
  top: 31vw;
  left: 55vw;
}
.function-icon._animetion._icon6 {
  top: 39vw;
  left: 47vw;
}
.function-icon._animetion._icon7 {
  top: 42vw;
  left: 35vw;
}
.function-icon._animetion._icon8 {
  top: 39vw;
  left: 23vw;
}
.function-icon._animetion._icon9 {
  top: 31vw;
  left: 13vw;
}
.function-icon._animetion._icon10 {
  top: 18vw;
  left: 9vw;
}
.function-icon._animetion._icon11 {
  top: 5.5vw;
  left: 13vw;
}
.function-icon._animetion._icon12 {
  top: -2.1vw;
  left: 22.5vw;
}
.function-icon._slide {
  width: 24vw;
  height: 24vw;
}
.icon {
  position: absolute;
  transform: translate(0, 0);
  border-radius: 50%;
}
.icon_text {
  display: none;
}
.icon_image {
  display: block;
  position: absolute;
  transition: transform 0.3s;
}
.icon_image img {
  width: 100%;
  height: auto;
}
.icon._function {
  border-radius: 0;
}
.icon._function .icon_image {
  position: relative;
  width: 3.2vw;
  height: 3.2vw;
}
.icon._function .icon_image::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-image: url(../IMAGES/grow_hover.png);
  background-size: 100% 100%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.4s;
}
.icon._function .icon_image img {
  position: relative;
  /* opacity: 0; */
  width: 100%;
  height: auto;
  vertical-align: top;
  animation-delay: 0s;
  animation-fill-mode: both;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.icon._function .icon_image img._animation {
  -webkit-animation-name: loopIconDot;
  animation-name: loopIconDot;
}
.icon._slide {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border: 3px solid #41bee2;
}
.icon._slide .icon_image {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.icon._active .icon_image::before {
  transform: translate(-50%, -50%) scale(1);
}
@-webkit-keyframes loopIconDot {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes loopIconDot {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.sec-link {
  display: flex;
  align-items: center;
  position: relative;
  width: 61.34vw;
  height: 11.2vw;
  margin: 0 auto;
  padding: 0 12.8vw 0 6.4vw;
  border: 1px solid #999;
  border-radius: 2.14vw;
  color: #333;
  font-family: 'Nissan Brand Light', sans-serif;
  font-weight: 300;
  font-size: 3.2vw;
  line-height: 1;
}
.sec-link._auto {
  height: 15.74vw;
  line-height: 1.3;
}
.sec-link_icon {
  display: block;
  position: absolute;
  top: 50%;
  right: 6.4vw;
  width: 1.87vw;
  height: 1.87vw;
  border-top: 1px solid #333;
  border-right: 1px solid #333;
  transform: rotate(45deg) translateY(-50%);
}