body{
  -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
    
}
img{-webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;}
header.h_intro.h_on .h_inner::before, header.h_intro.h_on .h_inner::after{opacity: 0;}
.scroll_pos{}
.h_bottom{display: none;}
.work_wrap{height: calc(var(--vh) * 100); position: relative; padding: 74px 0 64px; overflow: hidden; display: flex; flex-direction: column;}
.w_info_w{display: flex; padding: 100px 0 48px 25vw; height: calc(100% - 123px); gap: 80px; align-items: flex-end; width: max-content; position: relative; transform: translateX(0); transition: cubic-bezier(0, 0, 1, 1) transform 300ms;/*transform: translateX(calc(-50vw - 80px));*/}

.w_info{display: flex; flex-direction: column; gap: 20px; color: #fff; width: 50vw; height: 100%; align-items: center; justify-content: center;}
.w_info_txt{display: flex; align-items: center; color: #fff; justify-content: space-between; width: 100%; flex-direction: column-reverse; gap: 8px;}
.w_info_txt h1{font-family: 'Futura'; font-size: 24px; font-weight: 500; line-height: 130%}
.w_info_txt span{text-align: right; font-size: 16px; font-weight: 400; line-height: 140%; height: 100%; display: flex; align-items: flex-end;}
  .w_info_txt h1, .w_info_txt span{transform: translateY(20px); opacity: 0; transition: ease 0.5s all;}
.active .w_info_txt h1{transform: translateY(0); opacity: 1;}
.active .w_info_txt span{transform: translateY(0); opacity: 1;}

.w_info_inner{display: flex; height: 100%; flex-direction: column; gap:10px; max-width: 100%; width: 100%; justify-content: center;}

@media (min-aspect-ratio: 16 / 9) {
    .w_info_video iframe{width: 120%; height: 200%;}
  }
  @media (max-aspect-ratio: 16 / 9) {
    /*.w_info_video iframe{width: 200%; height: 120%;}*/
    
  }
.w_info_video iframe{width: 100%; height: 100%;}
.w_s_section{/*position: absolute;*/ bottom: 64px; left: 0; width: 100%; padding: 32px 32px 0; border-top: 1px solid #1E1E1E;}
.w_s_el_w{display: flex; gap: 16px;  white-space: nowrap; width: max-content; transition: ease 0.5s transform;/*overflow-x: auto;*/ }
.w_s_el{flex: 0 0 auto; width: 160px; border-radius: 8px;  overflow: hidden; position: relative; cursor: pointer; aspect-ratio: 16 / 9;}
.w_s_el::after{content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; box-shadow: inset 0 0 0 2px #fff; transition: ease 0.3s opacity; border-radius: 8px; opacity: 0; background: rgba(0, 0, 0, 0.51);}
.w_s_el.selected::after{opacity: 1;}
.w_s_el img{width: 100%; height: 100%; object-fit: cover;}

.w_s_el span{position: absolute; width: 100%; height: 100%; left: 0; top: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 400; color: #fff; opacity: 0; z-index: 1; transform: translateY(10px); transition: all 0.2s ease;}
.w_s_el.selected span{opacity: 1; transform: translateY(00px);}


.w_info_video{position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; /*height: calc(100% - 62px);*/ width: 100%; overflow: hidden; aspect-ratio: 16 / 9; max-width: 100%;}
.w_info_video img{width: 100%; height: 100%; object-fit: cover; object-position: center; position: absolute; left: 0; top: 0;}
.w_info_video iframe{z-index: 1; position: absolute; top: 50%; left: 50%; min-width: 100%;min-height: 100%; transform: translate(-50%, -50%); pointer-events: none;}
.w_info_video::after, .w_info_video::before{content: ''; color: #fff; display: block; position: absolute; z-index: 3; transition: ease 0.5s opacity, ease 0.5s transform;}
.w_info_video::after{opacity: 0;}
.active .w_info_video::after{content: '[ PAUSE ]'; font-size: 0; right: 20px; bottom: 16px; background-image: url(../asset/img/icon_pause.png); width: 20px; height: 20px; background-position: center; background-repeat: no-repeat; background-size: contain; opacity: 1;}
.active.pause .w_info_video::after{content: '[ PLAY ]'; font-size: 0; background-image: url(../asset/img/icon_play.png);}
.w_info_w.pause_start .w_info .w_info_video::after{content: '[ PLAY ]'; font-size: 0; background-image: url(../asset/img/icon_play.png);}
.active .w_info_video::after{opacity: 0;}
.w_info.active:hover .w_info_video::after{opacity: 1;}
.w_info_video::after{}
.prev .w_info_video::before{content: '[ PREV ]'; right: 100px;}
.next .w_info_video::before{content: '[ NEXT ]'; left: 100px;}
.w_info_video::before{opacity: 0; transform: translateY(20px);}
.w_info:hover .w_info_video::before{opacity: 1; transform: translateY(00px);}
.w_info_video img{opacity: 1; transition: opacity 0.5s ease;}
.prev .w_info_video img, .next .w_info_video img{opacity: 0.2;}



.w_list li:hover, .w_list li.active{color: #fff;}
.w_list li:hover{color: #fff;}
.w_list li::before, .w_list li::after{content: ''; width: 0; display: block; transition: 0.5s all ease;  overflow: hidden; opacity: 0;}
.w_list li:hover::before, .w_list li:hover::after, .w_list li.active::before, .w_list li.active::after{width: 12px; display: block; opacity: 1; color: #fff;}
.w_list li::before{content: '[';}
.w_list li::after{content: ']'; text-align: right;}

.h_top .work_a .w_list{pointer-events: unset;}
.h_top .work_a .w_list li{opacity: 1; transform: translateY(-00px); }
.h_top .work_a.active .w_list li{opacity: 1; transform: translateY(0); }

.ctr_btn_w{display: none;}
@media(min-width:1025px){
  .w_info{position: relative;}
  .w_info::after{content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; cursor: pointer; z-index: 1;}
  .w_info_video iframe{filter: brightness(1); transition: ease 0.5s filter, ease 0.5s transform; transition-delay: 0.3s; transform: scale(0.8); position: unset;}
  .next .w_info_video iframe, .prev .w_info_video iframe{filter: brightness(0.2);}

  .w_info.active iframe{transform: scale(1.0);}

  .w_info_inner{align-items: center;}
  .w_info_video{width: max-content; height: 100%;}
}
@media(max-width:1024px){
  .work_wrap{justify-content: space-between; padding: 50px 0 140px;}
  
  .w_info_w{padding: 0; gap: 0; height: 100%; align-items: center;}
  .w_info{gap: 0; width: 100dvw; height: unset; justify-content: center;}

  .w_info_txt { justify-content: unset; flex-direction: column-reverse; align-items: center; gap: 2.222vw; margin-bottom: 3.333vw; }
  .w_info_txt h1 { font-size: 4.167vw; }
  .w_info_txt span { font-size: 3.056vw; }

  
  .scroll_pos { display: flex; }

  .w_info_video { height: unset; aspect-ratio: 16 / 9; overflow: unset; width: 100%;}
  .w_info_video iframe { width: 100%; position: relative; height: 100%; position: unset; transform: unset;}
  .w_info_video::after, .w_info_video::before { transition: opacity ease 0.5s; }
  .next .w_info_video::before { left: -5.556vw; top: calc(100% + 5.556vw); opacity: 1; transform: translateX(-100%); }
  .prev .w_info_video::before { right: -5.556vw; top: calc(100% + 5.556vw); opacity: 1; transform: translateX(100%); }
  .prev .w_info_video::before, .next .w_info_video::before { color: #555; font-size: 3.056vw; }
  .active .w_info_video::after { font-size: 3.056vw; opacity: 1;}

  .active .w_info_video::after{content: ''; }
  .active.pause .w_info_video::after{content: ''; }
  /*.w_s_el_w { gap: 1.111vw; }
  .w_s_el { width: 22.222vw; border-radius: 0.556vw; }*/
  .w_s_section { padding: 0; position: absolute; }
  .w_s_el_w { /*overflow-x: scroll; transform: unset!important;*/ width: 100%; padding: 32px 1.111vw 0;  gap: 4px;}
  .w_s_el{width: 80px; border-radius: 2px;}
  .w_s_el span{display: none;}
  .w_s_el::after{border-radius: 2px;}
  .w_info_inner{width: 100%; gap: 0;}

  .ctr_btn_w{width: 100%; z-index: 10; display: flex; justify-content: space-between; position: fixed; left: 0; transform: translateY(20px); padding: 0 20px;}
  .ctr_btn_w span{color: #555; font-size: 3.056vw;}


  .next .w_info_video::before,.prev .w_info_video::before{display: none;}
}