/*ÄÜÅÙÃ÷ ½ºÅ¸ÀÏ 18-1 À¯Æ©ºê¿ë*/
.visual-6 {
width:100%;
overflow:hidden;
position:relative;
  background:rgba(0,0,0,0.84);
}

/*°øÅë*/
.visual-6 .swiper-container.loading {
  opacity: 0;
  visibility: hidden;
}

.visual-6 .swiper-slide {
  overflow: hidden;
}



/*MAIN SLIDER*/
.visual-6 .v-main-slider {
  width: 80%;
  /*height: 100vh;*/
  height:538.875px;
  float: left;
  transition: opacity 0.6s ease, transform 0.3s ease;
}

/* navi*/
.visual-6 .v-main-slider div[class^=swiper-button-] {
  transition: all 0.3s ease;
}

.visual-6 .v-main-slider div[class^=swiper-button-] {
  width: 44px;
  opacity: 0;
  visibility: hidden;
}

.visual-6 .v-main-slider .swiper-button-prev {
  transform: translateX(50px);
}

.visual-6 .v-main-slider .swiper-button-next {
  transform: translateX(-50px);
}

.visual-6 .v-main-slider:hover .swiper-button-prev,
.visual-6 .v-main-slider:hover .swiper-button-next {
  transform: translateX(0);
  /*
  opacity: 1;
  visibility: visible;
  */
}
/* navi*/


.visual-6 .v-main-slider .swiper-slide {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.visual-6 .v-main-slider .swiper-slide .video-container {
  position: relative;
  width:100%;
  padding-bottom: 56.25%;
}

.visual-6 .v-main-slider .swiper-slide .video-container .spinner {position:absolute;z-index:3;top:40%;left:46%;}

.visual-6 .v-main-slider .swiper-slide .video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


.visual-6 .v-main-slider .swiper-slide .slide-bgimg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  /*z-index:1;*/
}

.visual-6 .v-main-slider .swiper-slide .entity-img {
  display: none;
}

.visual-6 .v-main-slider .swiper-slide .youtube-play-btn {
  position: absolute;
  top: 46%;
  left: 46%;

  z-index:3;
 opacity: 0;
  transition: opacity 0.3s ease;
}

@media (max-width: 550px) {

   .visual-6 .v-main-slider .swiper-slide .youtube-play-btn {
     top: 38%;
     left: 38%;
   }

}

@media (max-width: 480px) {

   .visual-6 .v-main-slider .swiper-slide .youtube-play-btn {
     top: 38%;
     left: 38%;
   }

}

/*
.visual-6 .v-main-slider .swiper-slide .youtube-play-btn:hover {
 opacity: 1;
  transition: opacity 0.3s ease;
}
*/

.visual-6 .v-main-slider .swiper-slide.swiper-slide-active .youtube-play-btn {
 opacity: 0.6;
transition: 1s;
}

.visual-6 .v-main-slider .swiper-slide.swiper-slide-active .youtube-play-btn:hover {
 opacity: 1;
  transition: opacity 0.3s ease;
}


.visual-6 .v-main-slider .swiper-slide .content {
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100%;
  height:100px;
  padding-top:20px;
  padding-left: 5%;
  padding-right: 5%;  
  color: #fff;
  background:rgba(0,0,0,.5);
  border:#ffffff 0px solid;
}
.visual-6 .v-main-slider .swiper-slide .content .swipe-title {
  font-size: 2rem;
  font-weight: bold;
  line-height:28px;
}


.visual-6 .v-main-slider .swiper-slide .content .caption {
  display: block;
  font-size: 1rem;
  line-height: 1.4rem;
  transform: translateX(50px);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.7s ease;
}
.visual-6 .v-main-slider .swiper-slide .content .caption.show {
  transform: translateX(0);
  opacity: 1;
}

/*NAV SLIDER*/
.visual-6 .v-nav-slider {
  width: 20%;
  padding-left: 5px;
  padding-right: 5px;
  height:538.875px;
  float: left;
  transition: opacity 0.6s ease, transform 0.3s ease;
  background:rgba(0,0,0,0.94);
}

/* navi*/
.visual-6 .v-nav-slider div[class^=swiper-button-] {
position:absolute;
  width: 44px;
  opacity: 0;
  visibility: hidden;
  transform:rotate(90deg);
  top: initial;
  left: initial;
  right: 38%;
  margin: 0;

}

.visual-6 .v-nav-slider:hover .swiper-button-prev {
 
 /*
  opacity: 1;
  visibility: visible;
  */

   top:0;
}
.visual-6 .v-nav-slider:hover .swiper-button-next {
 
 /*
  opacity: 1;
  visibility: visible;
  */

    bottom:0;
}

.visual-6 .v-nav-slider .swiper-slide {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-sizing: border-box;
  margin:0;
}

.visual-6 .v-nav-slider.nav-off {
    width:20%;
}

.visual-6 .v-nav-slider.nav-on {
    width:20%;
}


.visual-6 .v-nav-slider.video-on.nav-off {
    width:20%;
}

.visual-6 .v-nav-slider.video-on.nav-on {
    width:20%;
}


.visual-6 .v-nav-slider .swiper-slide {
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.3s ease;
}

.visual-6 .v-nav-slider .swiper-slide .slide-bgimg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  /*z-index:2;*/
}

.visual-6 .v-nav-slider .swiper-slide .entity-img {
  display: none;
}

.visual-6 .v-nav-slider .swiper-slide.swiper-slide-active {
  opacity: 1;
}
.visual-6 .v-nav-slider .swiper-slide .content {
  width: 100%;
}
.visual-6 .v-nav-slider .swiper-slide .content .title {
  font-size: 20px;
}

.visual-6 .v-nav-slider .swiper-slide .navi-content {
  position: absolute;
  top: 50%;
  left: 0;
  width: 90%;
  padding-left: 5%;
  color: #fff;
}

.visual-6 .v-nav-slider .swiper-slide .navi-content .navi-title {
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 30px;
}


@media (max-width: 1024px) {

   .visual-6 .v-main-slider {
	 height:438.75px;
   }

   .visual-6 .v-nav-slider {
	 height:438.75px;
   }
     
   .visual-6 .v-main-slider .swiper-slide .content .swipe-title {
   font-size: 1.5rem;
   font-weight: bold;
   }   


}

@media (max-width: 767px) {

   .visual-6 .v-main-slider {
     width: 100%;
	 height:403.875px;
   }

   .visual-6 .v-nav-slider {
     width: 20%;
	 height:403.875px;
	 position:absolute;
	 top:0;
	 right:0;
	 z-index:2;
   }
   
   .visual-6 .v-main-slider .swiper-slide .content .swipe-title {
   font-size: 1.25rem;
   font-weight: bold;
   }    


/*on off*/
.visual-6 .v-nav-slider.nav-off {
    width:20%;
}

.visual-6 .v-nav-slider.nav-on {
    width:20%;
}


.visual-6 .v-nav-slider.video-on.nav-off {
    transition: 1s;
    right:-20%;
    width:20%;
}

.visual-6 .v-nav-slider.video-on.nav-on {
    transition: 1s;
    right: 0;
    width:20%;
}
/*on off*/



}

@media (max-width: 500px) {

.visual-6 .v-main-slider .swiper-slide .play-btn {
  top: 30%;
  left: 40%;
  }
   
   .visual-6 .v-main-slider .swiper-slide .content .swipe-title {
   font-size: 1.5rem;
   font-weight: bold;
   }   

  .visual-6 .v-main-slider .swiper-slide .video-container .spinner {position:absolute;z-index:3;top:30%;left:40%;}

   .visual-6 .v-main-slider {
	 height:253.688px;
   }

   .visual-6 .v-nav-slider {
	 height:253.688px;
   }

}

@media (max-width: 480px) {


  .visual-6 .v-main-slider .swiper-slide .content{  
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100%;
  height:80px;
  padding-top:20px;
  padding-left: 5%;
  padding-right: 5%;  
  color: #fff;
  background:rgba(0,0,0,.5);
  border:#ffffff 0px solid;
  }

   .visual-6 .v-main-slider .swiper-slide .content .swipe-title {
   font-size: 1.25rem;
   font-weight: bold;
   line-height:24px;
   } 

   .visual-6 .v-main-slider {
	 height:242.438px;
   }

   .visual-6 .v-nav-slider {
	 height:242.438px;
   }


.visual-6 .v-main-slider .swiper-slide .play-btn {
  top: 40%;
  left: 40%;
  }

  .visual-6 .v-main-slider .swiper-slide .video-container .spinner {position:absolute;z-index:3;top:20%;left:40%;}


}


/*°ø¿ë ½ºÇdzÊ*/
.spinner {
  margin: 50px auto 0;
  width: 70px;
  text-align: center;
}

.spinner > div {
  width: 18px;
  height: 18px;
  background-color: rgba(223, 32, 95, 0.95);

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% { 
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}