@charset "utf-8"; 

#visual_slide , .VS_box { width:100% ; height:100vh ; min-height:42.5rem } 
#visual_slide { background-color:#eee ; position:relative  } 

.VS_box , .VS_li , .VS_li_box , .VS_inner , .VS_inBox_link { display:block } 
.VS_box , .VS_li { overflow: hidden;}
.VS_ul  , .VS_li , .VS_li_box , .VS_inner , .VS_inBox_link   {  width:100% ; height:100% }
.VS_ul { position:relative ; z-index:50 }
.VS_li { position:absolute ; background-position:no-repeat ; background-position:center center ; background-size:cover }
.VS_li:nth-child(1) { left:-100% }
.VS_li:nth-child(2) { left:0 }
.VS_li:nth-child(3) { left:100% }
.VS_li:nth-child(4) { left:200% }
.VS_li:nth-child(5) { left:300% }
.VS_li:nth-child(6) { left:400% }
.VS_li:nth-child(7) { left:500% } 
.VS_li:nth-child(8) { left:600% }
.VS_li:nth-child(9) { left:700% } 

.VS_li.VS_li1 { background-image: url(../TE2_img/TE2_slide1.jpg) }
.VS_li.VS_li2 { background-image: url(../TE2_img/TE2_slide2.jpg) }
.VS_li.VS_li3 { background-image: url(../TE2_img/TE2_slide3.jpg) }
.VS_li.VS_li4 { background-image: url(../TE2_img/TE2_slide4.png) }
.VS_li.VS_li5 { background-image: url(../TE2_img/TE2_slide5.jpg) }
.VS_li.VS_li6 { background-image: url(../TE2_img/TE2_slide6.jpg) }
.VS_li.VS_li7 { background-image: url(../TE2_img/TE2_slide7.jpg) }

.VS_li_box { background-color:rgba(0,0,0,0.5) ; position:relative }
.VS_inner  { width:90% ; margin:auto ; position:absolute ; left:50% ; top:35% ; transform: translateX(-50%) }

.VS_inBox_title , .VS_inBox_txt { display:block ; text-align:center ; color:#ffffff  ; word-break:keep-all }
.VS_inBox_title { font-size:2.8rem ; line-height:3rem ; font-weight:200 ; margin-bottom:1.5rem ; letter-spacing:-0.2rem }
.VS_inBox_title > b { font-size: inherit ; color:inherit ; font-weight:500 ; letter-spacing:inherit }
.VS_inBox_txt  { font-size:0.9rem ; line-height:1.5rem ; font-weight:200 ; opacity:0.8 ; }
.VS_inBox_link { position:absolute ; left:0 ; top:0 ; font-size:0 ; color:transparent }

.VS_inBox_title::before { 
    content: ""; display:block ; width:6rem ; height:3.5rem ; 
    background: url(../TE2_img/slide_eye.png) no-repeat center center ;
    position: absolute ; left:50% ; transform: translateX(-50%) ; top:-4rem ; opacity:0.2 ;
}

.VS_li_box { transition:0.3s all }
/* .VS_li:hover .VS_li_box  {background-color:rgba(0,0,0,0.7) } */


/* ARROW LEFT+RIGHT */
.VS_btn { 
    display:block ; overflow:hidden ; width: 5rem ; height: 1.5rem ;
    background:url(../TE2_img/slide_arrow.png) no-repeat 0 0 ; opacity:0.1 ;  transition:0.3s all ;
    font-size:0 ; color:transparent ;
    position: absolute ; top:50% ; z-index:51 ; transform: translateY(-50%);
}
.VS_btn.left { background-position:left top ; left:1.5rem } 
.VS_btn.right{ background-position:right top ; right:1.5rem } 
.VS_btn:hover { opacity:0.4 }
.VS_btn.left:hover  { left:1rem } 
.VS_btn.right:hover { right:1rem  } 


/* SLIDE PAGE */
.VS_page , .VS_page li , .VS_page button, #VS_SP { height:1rem }
.VS_page , #VS_SP { bottom:16.5rem ; z-index:55 }
.VS_page {  
    text-align: center ; 
    position: absolute ; left:50% ; transform: translateX(-50%); } 

.VS_page li , .VS_page button , #VS_SP { width:1rem } 
.VS_page button , .VS_page span , #VS_SP { font-size:0 ; color:transparent ; display:block ; overflow:hidden }
.VS_page li { display: inline-block ; margin:0 1rem }
.VS_page button { position:relative  }
.VS_page span , #VS_SP { transition:0.3s all }
.VS_page span {
    border:0 ;   position: absolute ; left:50% ; top:50% ; transform: translate(-50%,-50%);
    width:0.3rem ; height:0.3rem ; background-color:#ffffff ; opacity:0.5 ; border-radius:2rem  ;
}
.VS_page button:hover span { opacity:0.8 ; width:0.5rem ; height:0.5rem }
.VS_page button.active span ,  .VS_page button.active:hover span { width:0.6rem ; height:0.6rem ; background:none ; border:solid 0.1rem #ffffff }
.VS_page button.active:hover span { opacity:0.8 }
#VS_SP { 
    position:absolute ; left:50% ; margin-left:15% ; opacity:0.5 ;
    background: url(../TE2_img/slide_PS.png) no-repeat left top;
 }
 #VS_SP.play { background-position:right top ;}
 #VS_SP:hover { opacity:0.8 ;}
 




/* MOBILE ****/
@media all and (max-width:1100px){
    #visual_slide , .VS_box { height:18rem ; min-height:18rem ; background:none }     
    #visual_slide { margin-top:3rem ; margin-bottom:2rem  ; padding-bottom:1.5rem }
    .VS_inner  { height:auto ; left:50% ; top:50% ; transform:translate(-50%,-50%) }

    .VS_inBox_title , .VS_inBox_title > b , .VS_inBox_txt { word-break:keep-all }
    .VS_inBox_title { font-size:2rem ; line-height:2.4rem ; margin-bottom:1rem  }
    .VS_inBox_txt { font-size:0.8rem ; line-height:1.1rem ; font-weight:300 ; }

    .VS_inBox_title::before { display:none }

    /* ARROW LEFT+RIGHT */
    .VS_btn { 
         width:2rem ; height:2rem ;  
         background-image:url(../TE2_img/slide_arrow_MB.png) ; background-color:rgba(0,0,0,0) ;
         top:18rem ;  transform: translateY(-100%) }  
    .VS_btn:hover { background-color:rgba(0,0,0,0.5) ; opacity:0.7 }
    .VS_btn.left , .VS_btn.left:hover  {  left:0 } 
    .VS_btn.right , .VS_btn.right:hover { right:0 } 



    /* SLIDE PAGE */
    .VS_page , #VS_SP  { bottom:0rem}
    .VS_page span { background-color:#000000 }
    .VS_page button.active span ,  .VS_page button.active:hover span { border-color:#000000 }
    .VS_page li { display: inline-block ; margin:0 0.5rem }
    #VS_SP { background-position: left bottom; left:60%; }
    #VS_SP.play { background-position:right bottom }

 
 }