.slider-note { text-align: center; font-size: 1rem; }
.slider-note.posBL { position: absolute; bottom: 10px; left: 10px; }
.slider-note.posBR { position: absolute; bottom: 10px; right: 10px; }
.slider-note.txtW { color: #FFF; }

.splide { margin: 0 auto; }
.splide .splide__track .splide__list .splide__slide .splide__cell { position: relative; }
.splide .splide__track .splide__list .splide__slide .splide__cell img { width: 100%; height: auto; display: block; }
.splide .splide-wrapper { position: relative; }
.splide .splide__arrows .splide__arrow { width: 80px; height: 80px; border: none; border-radius: 50%; background-color: transparent; background-size: cover; background-position: center center; background-repeat: no-repeat; position: absolute; top: 50%; transform: translateY(-50%); overflow: hidden; cursor: pointer; filter: drop-shadow(0 0 4px #000) drop-shadow(0 0 10px #000); z-index: 1000; }
.splide .splide__arrows .splide__arrow.splide__arrow--prev { left: 20px; background-image: url("../images/view/arrow_left.png"); }
.splide .splide__arrows .splide__arrow.splide__arrow--next { right: 20px; background-image: url("../images/view/arrow_right.png"); }
.splide .splide__pagination li { margin: 5px; }
.splide .splide__pagination li button { width: 25px; height: 5px; border: none; background-color: #c8c8c8; border-radius: 5px; transition: 0.3s linear 0s background; }
.splide .splide__pagination li button.is-active, .splide .splide__pagination li button:focus { background-color: #323232; }
@media screen and (max-width: 600px) { .splide .splide__arrows .splide__arrow { width: 40px; height: 40px; }
  .splide .splide__track .splide__list .splide__slide .splide__cell .slider-note.posBL { bottom: 5px; left: 5px; }
  .splide .splide__track .splide__list .splide__slide .splide__cell .slider-note.posBR { bottom: 5px; right: 5px; } }

.view-wrap { margin-bottom: 5rem; position: relative; }
.view-wrap .cap.view-note { padding-top: 1rem; text-align: right; margin-right: 0; padding-right: 1em; }
.view-wrap .view-icon { pointer-events: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 30%; max-width: 180px; transition: 1s ease 0s opacity; }
.view-wrap .view-icon img { width: 100%; height: auto; font-size: 0; }
.view-wrap .view-icon .view-icon-img { width: 28%; position: absolute; top: 20%; left: 47.5%; transform: translateX(-50%); }
.view-wrap .view-icon .view-icon-img img { animation: viewIconMotion 1.2s ease-out 0s infinite; }
@keyframes viewIconMotion { 0% { opacity: 0; transform: translateX(-70%); }
  20% { opacity: 1; }
  60% { opacity: 1; }
  100% { opacity: 0; transform: translateX(70%); } }
.view-wrap.aos-animate .view-icon { opacity: 0; transition-delay: 1.5s; }

#view { background-color: #1C1D2C; }
#view .splide__track .splide__slide { width: 60%; cursor: grab; }
@media screen and (max-width: 1600px) { #view .splide__track .splide__slide { width: 70%; } }
@media screen and (max-width: 1200px) { #view .splide__track .splide__slide { width: 80%; } }
@media screen and (max-width: 960px) { #view .splide__track .splide__slide { width: 90%; } }
@media screen and (max-width: 600px) { #view .splide__track .splide__slide { width: 100%; } }