@import url('reset.css');
@import url('main.css');
@import url('../fonts/font.css');
@import url('swiper-bundle.min.css');
/* @import url('locomotive-scroll.css'); */




@keyframes modal-video{from{opacity:0}to{opacity:1}}@keyframes modal-video-inner{from{transform:translate(0, 100px)}to{transform:translate(0, 0)}}.modal-video{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);z-index:1000000;cursor:pointer;opacity:1;animation-timing-function:ease-out;animation-duration:.3s;animation-name:modal-video;-webkit-transition:opacity .3s ease-out;-moz-transition:opacity .3s ease-out;-ms-transition:opacity .3s ease-out;-o-transition:opacity .3s ease-out;transition:opacity .3s ease-out}.modal-video-close{opacity:0}.modal-video-close .modal-video-movie-wrap{-webkit-transform:translate(0, 100px);-moz-transform:translate(0, 100px);-ms-transform:translate(0, 100px);-o-transform:translate(0, 100px);transform:translate(0, 100px)}.modal-video-body{max-width:960px;width:100%;height:100%;margin:0 auto;padding:0 10px;display:flex;justify-content:center;box-sizing:border-box}.modal-video-inner{display:flex;justify-content:center;align-items:center;width:100%;height:100%}@media (orientation: landscape){.modal-video-inner{padding:10px 60px;box-sizing:border-box}}.modal-video-movie-wrap{width:100%;height:0;position:relative;padding-bottom:56.25%;background-color:#333;animation-timing-function:ease-out;animation-duration:.3s;animation-name:modal-video-inner;-webkit-transform:translate(0, 0);-moz-transform:translate(0, 0);-ms-transform:translate(0, 0);-o-transform:translate(0, 0);transform:translate(0, 0);-webkit-transition:-webkit-transform .3s ease-out;-moz-transition:-moz-transform .3s ease-out;-ms-transition:-ms-transform .3s ease-out;-o-transition:-o-transform .3s ease-out;transition:transform .3s ease-out}.modal-video-movie-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%}.modal-video-close-btn{position:absolute;z-index:2;top:-45px;right:0;display:inline-block;width:35px;height:35px;overflow:hidden;border:none;background:transparent}@media (orientation: landscape){.modal-video-close-btn{top:0;right:-45px}}.modal-video-close-btn:before{transform:rotate(45deg)}.modal-video-close-btn:after{transform:rotate(-45deg)}.modal-video-close-btn:before,.modal-video-close-btn:after{content:'';position:absolute;height:2px;width:100%;top:50%;left:0;margin-top:-1px;background:#fff;border-radius:5px;margin-top:-6px}

/* common */
*{font-family:'circular','Pretendard', sans-serif;  box-sizing: border-box; font-weight:400; -webkit-font-smoothing: antialiased; -webkit-overflow-scrolling: touch; word-break: keep-all; }
html, body {color: #FFE587;  background-color: #000; height: 100%; overflow: hidden;} 
/* page zoom */
body,html {font-size: 0.5208333333333334vw;}
@media screen and (min-width: 1920px) {
    body,html {font-size: 62.5%;}
}
@media (max-width:1000px) {
  body,html {font-size: 62.5%; background-color: #FFE587; height: auto; overflow: auto;}
  
}

body{font-size: 1.8rem; font-weight:400; overflow-x: hidden; transition: all 0.4s ease; opacity: 0;}
body.load{opacity: 1;}
html.fixed{overflow: hidden;}
body.fixed{overflow: hidden;}
.scroller {
  height: 100vh;
}

#wrapper{width: 100%; min-height: 100vh; }
.mob-view {display:none;}
.pc-view{display: block;}
.row{max-width: 192rem; margin: auto;}
.image{display: flex;}
.image img{width: 100%; object-fit:cover;}
.video-block{}
.videoPlayer{position: relative; padding-bottom: 56.25%; padding-top: 3rem; height: 0; overflow: hidden;}
.videoPlayer video{object-fit:cover; object-position: center; width: 100%;  width: 100%    !important; height: auto   !important;}
.videoPlayer iframe{ object-fit:cover; object-position: center; width: 100%;}
video[poster]{object-fit:cover;}

/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: auto;
    scrollbar-color:transparent;
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 0px;
    color: transparent;
    background-color: transparent;
  }

  *::-webkit-scrollbar-track {
    background:transparent;
  }

  *::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 10px;
    
  }



/* form */
* { -webkit-overflow-scrolling: touch;  word-break: keep-all; box-sizing: border-box;}
input[type=text].datepicker{display: inline-flex; position: relative; background: url(../img/calendar.svg) no-repeat right 0.8rem center;}
input[type=text],input[type=email],input[type=password],textarea, select {-webkit-appearance: none; border: .1rem solid #d6d6d7; background-color: #fff; height: 4.8rem; padding: 0 1rem; font-size: 1.6rem; box-sizing: border-box; font-family:'circular','Pretendard', sans-serif; width: 100%;  vertical-align: middle; color:#333;}
input[type=text]:disabled,input[type=password]:disabled{background-color: #f8f8f8;color:#0b0b1b}
select:disabled{background-color: #fff;color:#0b0b1b}
textarea{width: 100%; padding-top: 1.3rem;  padding-bottom: 1.3rem; height:30rem; font-size: 1.4rem; background: none; border: none; border: 1px solid #ddd;}
select::-ms-expand {display: none;}
button{outline: none; box-shadow: none; border: none; background: none; font-family:'circular','Pretendard', sans-serif;  cursor: pointer; transition: all 0.2s ease;}
.clearfix:after{content: ""; display: block; clear: both;}
em{font-style: normal;}
input:focus,textarea:focus, select:focus{outline: none !important; box-shadow: none; border-color: #888;}
input:read-only,textarea:read-only{pointer-events: none;}
input.error{border: 1px solid #E60021;}
select{background:#fff url(../img/ico-arrow-bottom.svg) no-repeat right 1rem center; padding-right: 3rem; color: rgba(11, 11, 27, 0.5); background-size: 5rem 5rem}
input[type=radio]{width: 1.8rem; height: 1.8rem; position: absolute; opacity: 0;}
input[type=radio]+label:before{content: ""; display: inline-block; width: 1.8rem; height: 1.8rem; border-radius: 50%; border: .1rem solid #ddd; background-color: #fff; cursor: pointer; position: relative; z-index: 1; margin-right: 0.4rem;  vertical-align: top; flex: none;}
input[type=radio]+label:after{content: ""; display: block; position: absolute; width: 0.8rem; height: 0.8rem; border-radius: 50%; background-color: #ddd; left: .6rem; top: .6rem; z-index: 1; transition: all 0.2s ease; }
input[type=radio]+label{line-height: 2rem; display: inline-flex; vertical-align: top; position: relative; cursor: pointer; vertical-align: middle; white-space: nowrap; font-size: 1.6rem; align-items:center;}
input[type=radio]:checked+label::before{background-color: #4560d3;}
input[type=radio]:checked+label:after{opacity: 1; background-color: #fff;}
input[type=radio]:disabled+label:before{border: solid .1rem #dcdfe2; background-color: #f2f3f5; cursor:default;}
input[type=radio]:disabled+label{cursor:default;}
input[type=checkbox]{width: 1.1rem; height: 1.1rem; position: absolute; opacity: 0;}
input[type=checkbox]+label{display: inline-flex; position: relative; cursor: pointer; align-items: center; vertical-align: middle; font-size: 1.6rem; color: #333333; position: relative}
input[type=checkbox]+label:before{content: ""; display: inline-block; width: 2rem; height: 2rem; border-radius: 4px;  border: solid 1px #ccc; background-color: #fff; cursor: pointer; position: relative; z-index: 1; margin-right: .4rem;  vertical-align: top; box-sizing: border-box; flex: none;}
input[type=checkbox]:checked+label:after{content: "";display: inline-block;width: 1.4rem;height: 1.4rem;border-radius: 2px;cursor: pointer;position: absolute;z-index: 2;box-sizing: border-box;flex: none;background-color: #4560d3;left: 0.4rem}




/* font */
@media (max-width: 850px) {

}

/* 레이어 팝업 */
.overlay{display: none; position: fixed; top: 0; left: 0; z-index:100; width: 100%; height: 100%; min-height: inherit; background: #000; opacity: 0.5;}
.overlay span{display: none;}


/* btn */
.btn{display: inline-flex; box-sizing: border-box; transition: all 0.2s ease; align-items: center; justify-content: center; font-size: 1.6rem; flex: none;}
.btn img{margin-left: 0.5rem; margin-top: 0.2rem;}
.btn:disabled{background: #ADADAD; color: #333333;}
.btn.disabled{background: #ADADAD; color: #333333;}
.btn:focus{box-shadow: none;}
.btn-s{ height: 4rem; min-width: 13.5rem; border-radius: .6rem; font-weight: 300; padding: 0 1.6rem; font-size: 1.4rem;}
.btn-xs{ height: 2.4rem; min-width: 8rem; min-width: 6.2rem; font-size: 1.2rem; font-weight: 300; border-radius: .2rem;}
.btn-m{height:4.8rem; min-width: 8rem; font-weight: 400; padding-left: 1.5rem; padding-right: 1.5rem; line-height: 100%;}
.btn-m i,.btn-l i{margin-left: 1rem; font-size: 1.2rem; line-height: 100%; position: relative; margin-top: 0.2rem;}
.btn-m img,.btn-l img{margin-left: 1rem;}
.btn-w-18{width: 18rem;}
.btn-l{height: 5.6rem; font-size: 1.8rem; min-width: 16rem;}
.btn-wide{width: 40rem !important; margin-left: 0 !important; margin-right: 0 !important;}

.btn-blue{color: #fff !important; background-color: #003994;}
.btn-blue:hover{background-color: #2F436B}
.btn-white{background-color: #fff; border: 1px solid #ddd;}
.btn-white:hover{border: 1px solid #333333;}
.btn-black{color: #fff !important; background-color: #3EA9D6;}
.btn-orange{color: #fff !important; background-color: #ED8000;}
.btn-orange:hover{background: #FF5C00;}

.btn-list a{margin-right: 0.5rem; margin-top: 1.6rem;}
.btn:disabled{background-color: #f5f5f5; color: #888888 !important; border: .1rem solid #dddddd; cursor: default;}
@media (max-width: 600px) {

}



/* link */
a{color:#FFE587;text-decoration:none; transition: all 0.2s ease;}
a:link, a:visited, a:active{text-decoration: none;}
a:hover{color:inherit;}

/* SKIP */
.accessbility{left:0;top:0;text-align:center;width:100%;z-index:100;background:#292929;font-size:1.6rem;position: absolute;}
.accessbility a{overflow:hidden;display:block;height:0;width:0;margin-bottom:-0.1rem;text-align:center;white-space:nowrap;color:#fff}
.accessbility a:focus,.accessbility a:active{height:auto;width:auto;padding:1.8rem 0;color:#fff}

/* nav */
.navTrigger {
  transform: scale(1);
  cursor: pointer;
  width: 3.8rem;
  z-index: 60;
  display: flex; flex-direction: column; align-items: center;
}

.navTrigger i {
  background-color: #000;
  display: flex;
  width: 100%;
  height: 0.4rem;
  
}

.navTrigger i:nth-child(1) {
  -webkit-animation: outT 0.4s backwards;
  animation: outT 0.4s backwards;
  -webkit-animation-direction: reverse;
  animation-direction: reverse;
}

.navTrigger i:nth-child(2) {
  margin: 0.8rem 0;
  -webkit-animation: outM 0.4s backwards;
  animation: outM 0.4s backwards;
  -webkit-animation-direction: reverse;
  animation-direction: reverse;
}

.navTrigger i:nth-child(3) {
  -webkit-animation: outBtm 0.4s backwards;
  animation: outBtm 0.4s backwards;
  -webkit-animation-direction: reverse;
  animation-direction: reverse;
}

.navTrigger.active {}

.navTrigger.active i {background-color: #fff; position: relative;}

.navTrigger.active i:nth-child(1) {
  -webkit-animation: inT 0.4s forwards;
  animation: inT 0.4s forwards;
  top: 0.5rem;
}

.navTrigger.active i:nth-child(2) {
  -webkit-animation: inM 0.4s forwards;
  animation: inM 0.4s forwards;
}

.navTrigger.active i:nth-child(3) {
  -webkit-animation: inBtm 0.4s forwards;
  animation: inBtm 0.4s forwards;
  bottom: 0.5rem;
}

@-webkit-keyframes inM {
  50% {
      -webkit-transform: rotate(0deg);
  }

  100% {
      -webkit-transform: rotate(45deg);
  }
}

@-webkit-keyframes outM {
  50% {
      -webkit-transform: rotate(0deg);
  }

  100% {
      -webkit-transform: rotate(45deg);
  }
}


@-webkit-keyframes inT {
  0% {
      -webkit-transform: translateY(0px) rotate(0deg);
  }

  50% {
      -webkit-transform: translateY(7px) rotate(0deg);
  }

  100% {
      -webkit-transform: translateY(7px) rotate(135deg);
  }
}


@-webkit-keyframes outT {
  0% {
      -webkit-transform: translateY(0px) rotate(0deg);
  }

  50% {
      -webkit-transform: translateY(7px) rotate(0deg);
  }

  100% {
      -webkit-transform: translateY(7px) rotate(135deg);
  }
}


@-webkit-keyframes inBtm {
  0% {
      -webkit-transform: translateY(0px) rotate(0deg);
  }

  50% {
      -webkit-transform: translateY(-7px) rotate(0deg);
  }

  100% {
      -webkit-transform: translateY(-7px) rotate(135deg);
  }
}


@-webkit-keyframes outBtm {
  0% {
      -webkit-transform: translateY(0px) rotate(0deg);
  }

  50% {
      -webkit-transform: translateY(-7px) rotate(0deg);
  }

  100% {
      -webkit-transform: translateY(-7px) rotate(135deg);
  }
}



/* layout */
.modal.modal-inside{transform: none; display: none;}

/* modal */
.modal-dialog-centered{display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    min-height: calc(100% - (0.5rem * 2));}
.modal{ transition: all 0.4s ease; transform: translateY(5rem); z-index: 99999; position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    outline: 0;} 
.modal.show{opacity: 1; transform: translateY(0);}
.modal-dialog{max-width: none; margin-left: auto; margin-right: auto; z-index: 101; align-items: center; position: relative; display: flex; height: 100%; pointer-events: none; width: 169.4rem;}
.modal-content{box-shadow: 0 .3rem 1rem 0 rgba(0, 0, 0, 0.3); border: none; position: relative; display: flex; background-color: #fff; flex-direction: row; width: 100%; pointer-events: auto;}
.modal-header{display: flex; align-items: center; justify-content:center; flex-direction: column;}
.modal-content .close{position: absolute; right: 3rem; top: 3rem;}
.modal-content .close img{width: 4rem;}
.modal-header h1{ text-align: center; font-size: 3rem; font-weight: bold; display: flex; align-items: center; justify-content: center; line-height: 100%; margin-bottom: 5rem;}
.modal-header h1 img{width: 4rem; margin-right: 0.5rem;}
.modal-body{border: none; outline: none; font-size: 1.4rem; line-height: 1.5;}
.modal-body textarea{width: 100%; border: .1rem solid #ddd; border-radius: .4rem; padding: 1rem; height: 12rem;}
.modal-footer{border-top: none; padding:0rem; justify-content:center; padding: 1.2rem; background: #ECECEC;}
.modal-scroll-con{overflow-y: auto; max-height: 54rem; padding-right: 6rem; margin-right: -6rem; }
.modal-scroll-con::-webkit-scrollbar {width: 0.5rem;}
.modal-scroll-con::-webkit-scrollbar-thumb {background-color: #4560d3;}
.modal-scroll-con::-webkit-scrollbar-track {background-color: #fff;}

@media (max-width: 1200px) {
    .modal-scroll-con{overflow-y: auto; max-height: 40rem;} 
}
@media (max-width:1000px) {
    .modal.show{opacity: 1; transform: translateY(0);}
    .modal-dialog{max-width: none; margin-left: auto; margin-right: auto; z-index: 101; align-items: center; position: relative; display: flex; height: 100%; pointer-events: none; width: 100%;}
    .modal-content{border-radius:0; box-shadow: 0 .3rem 1rem 0 rgba(0, 0, 0, 0.3); border: none; position: relative; display: flex; background-color: #fff; flex-direction: column-reverse; width: 100%; pointer-events: auto; max-height: 100%; padding:0rem; height: 100%;}
    .modal-content .close{position: absolute; right: 2rem; top: 2rem;}
    .modal-content .close img{width: 2.4rem;}
    .modal-header h1{font-size: 1.8rem;margin-bottom:2rem;}
    .modal-header h1 img{width: 3rem; margin-right: 0rem;}
    .modal-body{border: none; padding-right: 0; outline: none; border-radius: 0; font-size: 1.2rem; display: flex; flex-direction: column; flex: 1; overflow-y: auto;}
    .modal-body textarea{width: 100%; border: .1rem solid #ddd; border-radius: .4rem; padding: 1rem; height: 12rem;}
    .modal-footer{border-top: none; justify-content:center; padding: 0.8rem;}
    .modal-scroll-con{overflow-y: auto; height: auto; padding-right: 2rem;  flex: 1 ; margin-right:0rem; }
}


/* layout */
.hexa *{font-family:'Hexaframe' !important;}
@media (max-width:1000px) {
    .coming {justify-content: flex-start; padding-top: 50px; padding-bottom: 20px; width: 100%;}
    .coming h1{width: 188px; margin-bottom: 60px;}
    .coming  .viewer {width: 100%;}
    .coming .com-msg{font-size: 20px; line-height: 30px; color: #fff; text-transform: uppercase; text-align: center; margin-top: 60px;}
    .coming .com-foot{color: #666666; font-size: 11px; text-transform: uppercase; position:static; bottom: 20px; left: 0; width: 100%; text-align: center; margin-top: auto;}    
}
#header{position: absolute; z-index: 110; width: 100%;    top: 0px;    transform: translateY(0);     opacity: 1; }
#header.nav-down {}
#header.nav-up{}
#header.nav-default{}

#header nav.main-navigation{display: flex; justify-content: space-between; font-size: 4.8rem; align-items: flex-start; padding:2rem; box-sizing: content-box; overflow: hidden; }
#header nav.main-navigation a{font-family:'Hexaframe';font-weight: 700; line-height: 100%; letter-spacing: -0.32rem; line-height:60%; display: flex; align-items: flex-start; height: 4.4rem;}
#header nav.main-navigation a.active{}
#header nav.main-navigation .menu{height: 7.4rem; width: 7.8rem; display: flex; align-items: center; justify-content: center; transition: all 0.1s linear; overflow: hidden; margin-left: -7.8rem; opacity: 0; position: relative;}
#header nav.main-navigation .menu svg {width: 3.8rem;}
#header nav.main-navigation .menu svg rect{fill:#000;}
#header nav.main-navigation ul{display: flex; padding-left: 2rem; transition: all 0.1s linear; gap: 2rem; align-items: center;}
#header nav.main-navigation ul li{display: flex;}
#header nav.main-navigation ul li a{position: relative;  font-family:'Hexaframe';  line-height: 100%; font-weight: 700; color: transparent; -webkit-text-stroke:1px #FFE587; display: flex;  height: 4.8rem; align-items: flex-start; line-height:40%; letter-spacing:-0.2rem ;}
#header nav.main-navigation ul li a.active{color: #FFE587; -webkit-text-stroke:0 #FFE587;}
#header nav.main-navigation ul li a:hover{color: #FFE587; -webkit-text-stroke:0 #FFE587;}
#header nav.main-navigation ul li a span{ }
#header nav.main-navigation ul li:first-child a{}
#header nav.main-navigation ul li:last-child a{}
#header nav.main-navigation li.active a{}
#header nav.main-navigation li.active a span{color: #FFE587; -webkit-text-stroke: 0.1rem #FFE587 !important;}
#header nav.main-navigation li.default a span{color: #fff;}
#header nav.main-navigation h1 {transform:  translateY(0%); transition: all 0.1s linear; margin-right: auto; display: flex; align-items: flex-start;}
#header nav.main-navigation h1 a{opacity: 1;}
#header nav.main-navigation.nav-hide h1{transform: translateY(100%);}
#header nav.main-navigation.nav-hide .menu{width: 7.8rem; opacity: 1; margin-left: 0;}
#header nav.main-navigation.nav-hide ul{opacity: 0;}
#header.nav-default nav.main-navigation{transform: translateY(0) !important;}

#wrapper.work-secton #header{}
#wrapper.work-secton #header.normal{mix-blend-mode:normal;}
#wrapper.work-secton .main-navigation h1 a{ color: #FFE587;}
#wrapper.work-secton .main-navigation ul li:first-child a{ color: #FFE587; -webkit-text-stroke:0;}
#wrapper.work-secton .main-navigation ul li a{ -webkit-text-stroke:1px #FFE587; color: transparent;}

#wrapper.contact-secton #header{}
#wrapper.contact-secton #header.normal{mix-blend-mode:normal;}
#wrapper.contact-secton .main-navigation h1 a{color:#FFE587;}
/* #wrapper.contact-secton .main-navigation ul li:first-child a{color:transparent;} */
/* #wrapper.contact-secton .main-navigation ul li:last-child a{color:#FFE587; -webkit-text-stroke:0;} */
#wrapper.contact-secton .main-navigation ul li a{ -webkit-text-stroke:1px #FFE587}

@media (max-width:1000px) {
  
}

.loading-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 101;
  pointer-events: none;
}
.loading-screen {
    position:fixed;
    background-color: #000;
    width: 100vw;
    height:100vh;
    left: 0; top: 0;
    padding: 2rem;
    display: flex; align-items:center; justify-content: center;
    opacity:0;
    box-sizing: border-box;
  }
  .loading-screen img{width:7.4rem;}
  .loading-screen.index{}
  .loading-screen.work{}
  .loading-screen.about{}
  .loading-screen.contact{}
  @media (max-width:1000px) {
    .loading-screen.work{}
    .loading-screen.about{}
    .loading-screen.contact{}
  }
  #wrapper{}
  .contents-wrap{display: flex; flex-direction: column; min-height: 100vh;}
  .bottom-text{display: flex; justify-content: space-between; padding: 2rem 2rem 2rem 2rem; font-size: 2.4rem; margin-top: auto; position: absolute; z-index: 10; bottom: 0; left: 0;  text-transform: uppercase; flex-direction: column;}
  .bottom-text span{display: flex; font-family:'Hexaframe'; font-weight: 700; font-size: 4.8rem; line-height:4.8rem; letter-spacing: -0.192rem; transition: all 0.4s ease;}
.footer-s{position: absolute; left: 0; bottom: 0; z-index: 10; color: #FFE587; display: flex; text-transform: uppercase; font-size: 1.6rem; opacity: 0; align-items: flex-end;}
.footer-s h1{ padding: 2rem; font-weight: 700; width: 54rem;}
.footer-s h1 span{display: block; letter-spacing: 0;}
.footer-s p{padding: 2rem;  font-weight: 700; font-size: 1.6rem;}

 .footer{display: flex; justify-content: space-between; padding: 2rem 2rem 2rem 2rem; font-size: 2.4rem; margin-top: auto; align-items: flex-end;}
 .footer p{font-family:'Hexaframe'; font-weight: 700; font-size: 8rem; line-height: 8rem; text-transform: uppercase;}
 .footer h1{font-size: 2.4rem; font-weight: 700;}
  
  .contents{padding-left: 2rem; padding-right: 2rem; }
.sound{position: absolute; right: 2rem; bottom: 2rem; z-index: 80; transition: all 0.4s ease;}
.sound button{ font-size: 1.6rem; color: #FFE587; text-transform: uppercase; display:flex;}
.sound button:last-of-type{display: none;}
.sound.active button.on{display: none;}
.sound.active button.off{display:flex;}
  @media (max-width:1000px) {
    .sound{display: none;}
    body{height: auto;}
    #wrapper{background-color: #FFE587;}
    .contents{padding:4.4rem 1rem 0 1rem;}
    #header {padding-bottom: 0rem;}
    .navTrigger{transform: scale(0.7);}

    #header nav.main-navigation{display: flex; justify-content: space-between; padding:1.4rem 1rem; box-sizing: content-box; height: auto;}
    #header nav.main-navigation h1 a{opacity: 1; letter-spacing: -0.1rem; font-size:2.3rem;  display: flex; align-items: flex-end; color: #000; line-height:100%; height: 1.6rem;}
    #header nav.main-navigation ul{gap: 1.4rem; padding: 0;}
    #header nav.main-navigation ul li{height:auto;}
    #header nav.main-navigation ul li a{position: relative; letter-spacing: -0.1rem;  font-size: 2.3rem; font-weight: 400; -webkit-text-stroke: 1px #000; height: 1.6rem; display: flex; line-height: 100%; align-items: flex-end;}
    #header nav.main-navigation ul li a:after{display: none;}
    #header nav.main-navigation ul li a span{ }
    #header nav.main-navigation ul li:first-child a{color: #000;}
    #header nav.main-navigation ul li:first-child a:hover{color: #000;}
    #header nav.main-navigation ul li a:hover{-webkit-text-stroke:1px #000;}
    #header nav.main-navigation ul li:first-of-type a:hover{-webkit-text-stroke:0 #000;}


    #wrapper.work-secton .main-navigation h1 a{ color: #000;}
    #wrapper.work-secton .main-navigation ul li:first-child a{ color: #000; -webkit-text-stroke: 1px #000;}
    #wrapper.work-secton .main-navigation ul li a{ -webkit-text-stroke: 0.05rem #000; color: transparent;}

    .footer{display: flex; justify-content: space-between; padding: 1.2rem; padding-top: 0; padding-top: 8rem; font-size: 2.4rem; margin-top: auto; align-items: flex-end;}
    .footer p{font-size: 2.3rem; line-height: normal; letter-spacing:-0.1rem}
    .footer h1{display: none;}

    
  }
  .video-con{pointer-events: none;}
  .video-list-wrap{display: flex; position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 10; opacity: 0; pointer-events: none;}
  .video-list-wrap .video-dim{position: fixed; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.6); z-index: 1; opacity: 0; pointer-events: none;  transition: all 0.2s ease;} 
  .video-list-wrap .video-dim.active{opacity:1;}
  .video-list{display: flex; position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; top: 0; color: #FFE587; font-size: 1.6rem; text-transform: uppercase;  pointer-events:all;}
  .video-list *{}
  .video-list .swiper{width:100%; height: 100%; pointer-events: none;}
  #wrapper.work-secton .swiper{ pointer-events: all;}
  .video-list .swiper-wrapper{transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) !important;}
  .video-list .swiper-slide{width: 41.6rem;pointer-events: none; transform: translateX(100vw); display: flex; align-items: center; pointer-events: none;}
  .video-list .swiper .swiper-wrapper .swiper-slide:first-child{margin-left: 0rem !important;}
  .video-list dl dt{line-height: 100%;}
  .video-list dl dd{height: 1.5rem;}
  .video-list dl dd:last-of-type{margin-top: 0.6rem;}
  .video-list .thumbnail{ height: 23.4rem; width: 100%; margin-top: 1.8rem; position: relative;} 
  .video-list .thumbnail:after{content: ""; display: block; width: 100%; height: 100%; border:1px solid rgba(255, 229, 135, 1); position: absolute; left: 0; top: 0; z-index: 10; box-sizing: border-box; opacity: 0; pointer-events: none;}
  .video-list .swiper-slide.active:hover .thumbnail{ border:0px solid rgba(255, 229, 135, 1); }
  .video-list .swiper.detail .swiper-slide.active .thumbnail{ border:1px solid rgba(255, 229, 135, 1); }
  .video-list .swiper.detail .swiper-slide .thumbnail{ border:1px solid rgba(255, 229, 135, 0.6); }
  .video-list .swiper.detail .swiper-slide:hover .thumbnail{ border:1px solid rgba(255, 229, 135, 1); }
  .video-list .swiper.detail .swiper-slide .thumbnail:after{opacity: 0;}
  .video-list .swiper-slide:hover .thumbnail{}
  .video-list .swiper-slide:hover .thumbnail::after{opacity: 1;}
  .video-list .playtime{display: flex; gap: 0.4rem; line-height: 100%; margin-top: 1.5rem; font-size: 1.6rem; opacity:1; transition: all 0.4s ease;}
  .video-list .playtime span{line-height: 100%; width: 3.5rem; display: flex;}
  .video-list .playtime em{margin: 0 0.02rem;}
  .video-list .swiper-slide .thumbnail .image{position: relative; z-index: 10;display: flex; width: 100%; height: 100%; overflow: hidden;}
  .video-list .swiper-slide .thumbnail .image a{display: flex; width: 100%; height: 100%; overflow: hidden;}
  .video-list .swiper-slide .thumbnail .timeline{position: absolute; left: 0; top: 0; height: 100%; width: 100%; transition: all 0.4s ease; opacity: 0;}
  .video-list .swiper-slide .thumbnail .timeline span{position: absolute; left: 0; top: 0; height: 100%; background-color:rgba(255, 229, 135, 0.4) ; border-right: 0.4rem solid #FFE587; width: 30%;}
  .video-list .thumbnail .bg{position: absolute; display: flex; background-color: #FFE587; width: 0%; height:100%; left: 0%; top: 0%; z-index: 30;}
  .video-list .thumbnail .control{position:absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; transition-delay: 0.6s;z-index: 99;opacity: 0; }
  .video-list .thumbnail .control.active{opacity: 1;}
  .video-list .thumbnail .control button{width:4.2rem; height: 5.4rem;}
  .video-list .thumbnail .control button img{width: 100%;}
  .video-list .thumbnail .control button:nth-of-type(1){display: none;}
  .video-list .thumbnail .control button:nth-of-type(2){display: none;}
  .video-list .thumbnail .control.playing button:nth-of-type(1){display: flex;}
  .video-list .thumbnail .control.paused button:nth-of-type(2){display:flex;}
  .video-list .ct-panel{display: flex; opacity: 0; pointer-events: all; }
  .video-list .ct-panel .control{ margin-top: 1.5rem;display: flex; margin-left: 4rem; overflow: hidden;}
  .video-list .ct-panel .control .panel{transition: all 0.4s ease-in-out; transform: translateX(110%); display: flex;}

  .video-list .swiper.detail .swiper-slide .ct-panel .control .panel{transform: translateX(0%);}

  .video-list .swiper-slide.active .block dl{opacity: 1;}
  .video-list .swiper-slide.active .block .ct-panel{opacity: 1;}



  /* .video-list .swiper        .swiper-slide .ct-panel .control .panel{transition: all 0.4s ease-in-out; transform: translateX(0%); display: flex; opacity: 0;}
  .video-list .swiper        .swiper-slide.acitve .ct-panel .control .panel{transition: all 0.4s ease-in-out; transform: translateX(110%); display: flex; }

  .video-list .swiper.detail .swiper-slide.acitve .ct-panel .control .panel{transform: translateX(0%);opacity: 1;} */



  .video-list .ct-panel .control.active{opacity: 1;}
  .video-list .ct-panel .control button{color:#FFE587; font-size: 1.6rem; display: flex; align-items: flex-start; line-height: 100%; transition:all 0.4s ease;}
  .video-list .ct-panel .control button img{width: 0.9rem; height: auto; margin-right: 0.8rem; top: 0.1rem; position: relative;}
  .video-list .ct-panel .control button:nth-of-type(1){display: none;}
  .video-list .ct-panel .control button:nth-of-type(2){display: none;}
  .video-list .ct-panel .control.playing button:nth-of-type(1){display: flex;}
  .video-list .ct-panel .control.paused button:nth-of-type(2){display:flex;}


  
  .video-list .swiper-slide .block dl{opacity: 0;}
  .video-list .swiper-slide.swiper-slide-active .block dl{opacity: 0;}
  .video-list .swiper-slide.swiper-slide-active .block .ct-panel{}
  .video-list .swiper.detail .swiper-slide.swiper-slide-active .block .ct-panel{opacity: 1;}
  .video-list .swiper-slide.active .block dl{opacity:1; transition: padding 0.4s ease;}
  .video-list .swiper-slide .block:hover dl{opacity: 1; visibility: visible;}
  .video-list .swiper-slide .block:hover .ct-panel{opacity: 1;}
  
  .video-list .swiper-slide .block .playtimeg{opacity: 1;}
  .video-list .swiper-slide .block .playtime span{}
  .video-list .swiper-slide .block .playtime em{display:none;}

  .video-list .swiper.detail .swiper-slide .ct-panel .control{opacity: 1; transition:opacity 0.4s ease;}

  .video-list .swiper.detail .swiper-slide.swiper-slide-prev .ct-panel .control .panel{transform: translateX(110%);}
  .video-list .swiper.detail .swiper-slide.swiper-slide-prev .ct-panel{opacity: 0;transition: all 0.4s ease;}
  .video-list .swiper.detail .swiper-slide.swiper-slide-next .ct-panel{opacity: 0; transition: all 0.4s ease;}
  /* .video-list .swiper.detail .swiper-slide.swiper-slide-next dl{transition: all 0.4s ease; visibility: visible;} */
  .video-list .swiper.detail .swiper-slide .block dl{opacity: 0; transition: all 0.4s ease;}
  .video-list .swiper .swiper-slide.active .block dl{opacity: 1;}
  .video-list .swiper .swiper-slide .block:hover dl{opacity: 1;}
  .video-list .swiper.detail .swiper-slide .block:hover dl{opacity: 0;}
  .video-list .swiper.detail .swiper-slide.swiper-slide-active .block:hover dl{opacity: 1;}
  .video-list .swiper.detail .swiper .swiper-slide .block:hover dl{opacity: 0;}
  .video-list .swiper.detail .swiper .swiper-slide.swiper-slide-active .block:hover dl{opacity: 1;}
  .video-list .swiper .swiper-slide.swiper-slide-active .ct-panel{}
  .video-list .swiper.detail .swiper-slide.swiper-slide-active .ct-panel{transition: all 0.4s ease;}
  .video-list .swiper.detail .swiper-slide.swiper-slide-next .block .playtime{display:flex;}
  .video-list .swiper.detail .swiper-slide.swiper-slide-active .block .playtime{ opacity: 1;}
  .video-list .swiper.detail .swiper-slide.swiper-slide-next .block .playtime span{display:flex; opacity: 1; transition: none;}
  .video-list .swiper.detail .swiper-slide.swiper-slide-next .block .playtime em{display:flex; opacity: 1;}
  .video-list .swiper.detail .swiper-slide.swiper-slide-next .block .control{display:flex; opacity: 1;}
  /* .video-list .swiper.detail .swiper-slide .block:hover .playtime{display:none;} */
  .video-list .swiper.detail .swiper-slide.active .block:hover .playtime{display: flex;}
  .video-list .swiper.detail .swiper-slide.swiper-slide-next .block:hover .playtime span:last-of-type{display:flex; opacity: 1;}

  .video-list .swiper-slide .block:hover .playtime{display: flex;}
  .video-list .swiper-slide .block .playtime span:last-of-type{display:flex; opacity: 1;}
  .video-list .swiper-slide .block:hover .playtime span:last-of-type{display:flex; opacity: 1;}
  .video-list .swiper-slide .block .playtime em,.video-list .swiper-slide .block .playtime span:first-of-type{display:none;}

  .video-list .swiper-slide .block:hover .playtime{display:flex; opacity: 1;}
  .video-list .swiper-slide.active .block .playtime{display:flex; opacity: 1;}
  .video-list .swiper-slide.active .block .playtime em{display:flex; opacity: 1;}
  .video-list .swiper-slide.active .block .playtime span:first-of-type{display:flex; opacity: 1;}
  .video-list .swiper-slide.active .block .playtime span:last-of-type{display:flex; opacity: 1;}

  .video-list .swiper-slide.active .block:hover .playtime em{display:flex;}
  .video-list .swiper-slide.active .block:hover .playtime span:first-of-type{display:flex;}
  .video-list .swiper-slide.active .block:hover .playtime span:last-of-type{display:flex;}
   

  .video-list .swiper.detail .swiper-slide .block:hover .playtime span:last-of-type{visibility: hidden;}
  .video-list .swiper.detail .swiper-slide.active .block:hover .playtime span:last-of-type{display:flex; visibility: visible;}
  

  .video-list .swiper-slide.active dl dt{display: flex;}
  .video-list .swiper-slide.active .thumbnail{border: 1px solid rgba(255, 229, 135, 0.4)}
  /* .video-list .swiper-slide.active .thumbnail:after{display: none;} */
  .video-list .swiper-slide.active .thumbnail .image{opacity: 0;}
  .video-list .swiper-slide.active .thumbnail .timeline{opacity: 1;}
  .video-list .swiper-slide.active .thumbnail .timeline span{}
  .video-list .swiper-slide.active .playtime{display:flex;}
  .video-list .swiper-slide .wrap { height: 100%; display: flex; align-items: center; flex-direction: column; justify-content: center; width: 41.6rem; width: 100%; pointer-events: all;}
  .video-list .swiper-slide .block {pointer-events: all; width: 100%; position: relative;}
  .video-list .swiper-slide .block dl{pointer-events: all; padding-left: 4rem; position: relative; pointer-events: none;}
  .video-list .swiper-slide .block dl dt{position: absolute; left: 0; top: 0.2rem;}
  .video-list .swiper-slide .block dl dd{}
  .video-list .swiper-slide.active .block dl dt{opacity: 1; display: flex;}
  .video-list .swiper-slide.active .block dl dd{opacity: 1;}
  .video-list .detail .thumbnail .image img {display: none;}

  .swiper.detail .block dt{opacity: 0;}
  .swiper.detail .block dl{padding-left: 0;}
  .swiper.detail .swiper-slide.active .block dl{ transition: all 0.4s ease;}
  .swiper.detail .swiper-slide.active .block dl dt{opacity: 0; }
  .swiper.detail .swiper-slide.active .block dl dd{opacity: 1;}
  
  .video-list .detail .thumbnail {border: 1px solid rgba(255, 229, 135, 0.6)}
  .video-list .detail dl{visibility: hidden;}
  .video-list .detail .swiper-slide.active dl{visibility: visible;}
  .video-list .num {position: absolute;left:0;top: 0; top: 13rem;left: -9rem; overflow: hidden;}
  .video-list .num span {font-size: 8rem;font-family:'Hexaframe'; font-weight: 900; line-height: 60%; transition:transform 0.4s ease-in-out; transition:color 0.1s linear; display: inline-flex; transform: translateX(100%);}
  
  .video-list .detail .swiper-slide .num span{transform: translateX(0);}
  .video-list .swiper-slide .num {opacity: 0;}
  .video-list .swiper-slide.active .num {opacity: 1;}
  .video-list .detail .swiper-slide .num {opacity: 1;}

  .video-list .swiper-slide .control {opacity: 0;}
  .video-list .swiper-slide.swiper-slide-active .control {opacity: 1;}

  .video-list .detail .swiper-slide.swiper-slide-next .num {opacity: 1;}
  .video-list .detail .swiper-slide.swiper-slide-prev .num {opacity: 1;}

  .video-list .swiper-slide .num {left: 38rem; transition: left 0.3s ease;   transition-delay: 0.2s;}
  .video-list .swiper-slide-prev .num {left: 38rem; transition: left 0.3s ease;   transition-delay: 0.2s;}
  .video-list .swiper-slide-active .num {left: -9rem;  transition: left 0.3s ease;  transition-delay: 0.2s;}
  .video-list .detail .num {display: block;}

  .video-list .swiper-slide-prev .num{transition-property: left; transition-duration: 0.25s; transition-delay: 0.2s;  color:transparent;  -webkit-text-stroke:1px #FFE587;}
  .video-list .swiper-slide-next .num{transition-property: left; transition-duration: 0.25s; transition-delay: 0.2s; left: -9rem; color:transparent;  -webkit-text-stroke:1px #FFE587;}
  .video-list .swiper-slide:hover .num{color:#FFE587; -webkit-text-stroke:0px }
  .video-list .swiper-slide:hover .num{color:#FFE587; -webkit-text-stroke:0px}
  .video-list .detail .swiper-slide.active:hover .thumbnail:after{display:none;}
  /* .video-list .detail .swiper-slide-prev:hover .thumbnail:after{display:none;}
  .video-list .detail .swiper-slide-next:hover .thumbnail:after{display:none;} */

  .work-contents{position: fixed;display: flex; position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 10; pointer-events: none;}
  .work-contents.active{pointer-events: all;}
  .work-block{position: fixed; display: flex; width: 100%; height: 100%; left: 0; top: 0; pointer-events: none; z-index: 30}
  .work-block .block-box{position: absolute; display: flex; background-color: #FFE587; width: 100%; height: 100%; left: 0; top: 0;opacity: 0;}
  
  .work-contents .work-detail{position: absolute; display: flex; left: 0; top: 0; bottom: 0; right:0; display: none;}
  .work-contents.active .work-detail{display: flex;}
  .work-contents .work-video{position: absolute; display: flex; left: 0; top: 0; bottom: 0; right:0;}
  .close{ position: absolute; right:2rem; top: 2rem; display: none; transition: all 0.4s ease;}
  .close button{font-family:'Hexaframe';  line-height: 100%; font-weight: 700; color: transparent; -webkit-text-stroke: 1px #FFE587; display: flex;  height: 4.8rem; align-items: flex-start; font-size: 4.8rem; line-height: 40%;}
  .close button:hover{color:#FFE587 ; -webkit-text-stroke:0;}
  .work-contents .work-detail .sound button{}
  .detail .swiper-wrapper {
    transition-timing-function:cubic-bezier(0.65, 0, 0.35, 1) !important;
    pointer-events: none;
  }
  
  @media (max-width:1000px) {
    #wrapper #header{mix-blend-mode: normal; position: fixed; z-index: 99; padding-bottom: 1rem; background-color: #FFE587;}
    .main-content{position: static;}
    .video-list-wrap{opacity: 1; pointer-events: all; position:static; flex-direction: column;}
    .video-con{display: none;}
    .video-dim{display: none;}
    .video-list{transform:none !important; position: static; color: #000; padding-top: 6.6rem; padding-left: 1rem; padding-right: 1rem;}
    .video-list .ct-panel{display: none;}
    .swiper-wrapper{display: flex; flex-direction: column; row-gap: 3.6rem;}
    .video-list .swiper-slide{width: 100%; height: auto; transform: translateX(0);}
    .video-list .swiper-slide .block{display: flex; flex-direction: column-reverse; }
    .video-list .swiper-slide .block dl{position: relative; display: flex; flex-direction: column; padding-left: 3.5rem; font-size: 1.4rem; font-weight: 900; line-height: normal; margin-top: 1rem; opacity: 1;}
    .video-list .swiper-slide .block dl dt{ line-height: normal; margin: 0; position: absolute; left: 0; top: 0; opacity: 1; line-height: 1.8rem; font-weight: 900; display: flex;}
    .video-list .swiper-slide .block dl dd{line-height: normal; margin: 0; font-family:'circular'; font-weight: 700; letter-spacing: 0; opacity: 1; line-height: 1.8rem;}
    .video-list .swiper-slide .thumbnail .timeline{display: none;}
    .video-list .thumbnail .bg{display: none;}
    .video-list .thumbnail .control{display: none;}
    .video-list .thumbnail:after{display: none;}
    .video-list .thumbnail{height: auto; margin: 0; aspect-ratio: 5 / 3; min-height: 0;}
    .video-list .thumbnail .image{width: 100%;}
    .video-list .thumbnail .image a{width: 100%;}
    .video-list .swiper-slide.active .playtime{display:none}
    .video-list .swiper-slide.active .thumbnail .image{opacity: 1;}
  }

/* contact */
#wrapper.contact-secton {background: url(../img/bg-info.png) no-repeat; background-size: cover;}
#wrapper.contact-secton .contents{display: flex; flex-grow:1; align-items: center;}
#wrapper.contact-secton .footer-s{opacity: 1;}
.contact-contents{display: flex; flex-direction: column; width: 100%; font-size: 1.8rem; row-gap: 4rem; height: 53rem; width: 80rem; margin: auto; flex-wrap: wrap; }
.contact-contents dl{display: flex; gap: 2.4rem; flex: none; flex-direction: column;}
.contact-contents dt{font-weight: 700; width: 18rem; text-transform: uppercase; font-family:'Hexaframe'; height: 2.2rem;}
.contact-contents dd{ font-weight: 300;  line-height: 2.27rem; min-height: 2.27rem;}
.contact-contents dd p{ font-weight: 300; line-height: 2.27rem; height:2.27rem;}
.contact-contents dd p span{display: block;  line-height: 2.27rem;  font-weight: 300;}
.contact-contents dd a{color: #FFE587; display: inline; border-bottom: 1px solid #FFE587; font-weight: 300; height: 2.27rem; overflow: hidden; white-space: nowrap;}
.contact-contents dl.office dd p:last-of-type{margin-top: 2.4rem;}
.contact-contents dl:nth-of-type(3){margin-left: auto; width: 19.5rem;}
.contact-contents dl:nth-of-type(4){margin-left: auto; width: 19.5rem;}
.pc-view{display:block;}
.mob-view{display: none;}
@media (max-width:1000px) {
  #wrapper.contact-secton {background:#000 url(../img/bg-info-m.png) no-repeat 50% 50%; background-size:cover; background-attachment: fixed;}
  #wrapper .contents{display: flex; flex-grow:1; align-items:flex-start;}
  #wrapper.contact-secton #header{background-color: #0D0E0F;}
  #wrapper.contact-secton #header .main-navigation li a{-webkit-text-stroke: 1px #FFE587;}
  #wrapper.contact-secton #header .main-navigation li a.active{-webkit-text-stroke: 1px transparent;}
  #wrapper.contact-secton .contents{align-items: flex-start; flex-direction: column;}
  
.contact-contents{display: flex; flex-direction: column; width: 100%; font-size: 1.7rem; row-gap: 6rem; height:auto; margin: auto; flex-wrap: wrap; padding-top: 9rem; }
.contact-contents dl{display: flex; gap: 2rem; flex: none; flex-direction: column;}
.contact-contents dt{font-weight: 700; width: 18rem; text-transform: uppercase; font-family:'Hexaframe'; height: 2.2rem; }
.contact-contents dd{ font-weight: 300;  line-height: 2.27rem; min-height: 2.27rem;}
.contact-contents dd p{ font-weight: 300; line-height: 2.27rem; min-height:2.27rem;}
.contact-contents dd p span{display: block;  line-height: 2.27rem;  font-weight: 300;}
.contact-contents dd a{color: #FFE587; display: inline; border-bottom: 1px solid #FFE587; font-weight: 300;}
.contact-contents dl.office dd p:last-of-type{margin-top: 2.4rem;}
.contact-contents dl:nth-of-type(3){margin-left:0; width: 19.5rem;}
.contact-contents dl:nth-of-type(4){margin-left:0; width: 19.5rem;}

.work-secton .footer-s{display: none;}


.footer-s{position: static;  padding-bottom: 1.4rem; display: flex; align-items: flex-end;}
.footer-s.work-footer{margin-top: 8rem; padding-left:1rem; padding-right: 1rem;  color: #000;}
.footer-s{justify-content: space-between; width: 100%; opacity: 1;}
.footer-s h1{padding: 0; font-size: 1.4rem; letter-spacing: -0.092rem; width: auto; font-weight: 900;}
.footer-s.contact {margin-top: 18rem;}
.footer-s p{font-size: 1.4rem; padding: 0;}
.pc-view{display: none;}
.mob-view{display:block;}
.bottom-text{display: none;}
.video-list .swiper-slide .block:hover .playtime{display: none;}
}

.layer-player{position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index:999; background-color: #000; display: flex; flex-direction: column; justify-content: center;}
.layer-player *{color: #FFE587;}
.layer-player h1{position: absolute; left: 1.2rem; top: 1.4rem; display:flex;}
.layer-player .close-layer{position: absolute; right: 1.2rem; top: 1.4rem; display:flex;}
.layer-player .close-layer button{display:flex; font-family: "Hexaframe"; color: #FFE587; font-size: 2.3rem; letter-spacing: -0.1rem; height:1.6rem; align-items: flex-end; line-height:100%; box-sizing: content-box; padding-top: 0.1rem;}
.layer-player .copy{position: absolute; right: 1.2rem; bottom: 1.4rem; display:flex; font-size: 1.4rem; font-weight: 700;}
.layer-player .popup-video{display: flex; width: 100%; position: relative;}
.layer-player .popup-video video{width: 100%;}
.layer-player dl{padding: 0 1.2rem;  text-transform: uppercase; font-size: 1.4rem; letter-spacing:0; padding-left: 4.5rem; position: relative; margin-bottom: 1.4rem; height: 3.1rem; line-height: 100%;}
.layer-player dl dt{position: absolute; left: 1rem; display: flex; align-items: flex-end; font-weight: 700; top: 0.1rem;}
.layer-player dl dd{line-height: 100%; display: flex; align-items: flex-end; line-height: normal; font-weight: 700;}
.layer-player .control{padding: 0 1rem; display: flex; justify-content: space-between; height: 3.8rem; align-items: center;}
.layer-player .control li{display: flex;  font-size: 1.4rem; font-weight: 700; gap: 0.4rem;}
.layer-player .control button{font-size: 1.4rem; display: flex; text-transform: uppercase; font-weight: 700; align-items:flex-start; line-height: 100%;}
.layer-player .control button.play-btn::before{content: ""; display: flex; width: 0.8rem; height: 1rem; margin-right: 0.8rem; background: url(../img/ico-play.svg) no-repeat; background-size: cover; position: relative; top: 0.1rem;}
.layer-player .control button.play-btn.active::before{background: url(../img/ico-stop.svg) no-repeat; background-size: cover;}
.layer-player .bar{position: absolute; left: 1.2rem; right: 1.2rem; height: 0.7rem; bottom: 1.2rem; display: flex; align-items: center;}
.layer-player .bar:after{content: ""; display: flex; width: 100%; height: 1px; background-color: #FFE587;}
.layer-player .bar .bar-track{display: flex; height: 100%; background-color: #FFE587; width: 0%; position: absolute; left: 0px; top: 0; border-radius: 1rem;}
.layer-player .playtime{font-size: 1.4rem; position: absolute; left: 1rem; bottom: 1rem; display: flex; align-items: center; gap: 0.4rem;}
/* .layer-player .bar .bar-track::before{display: flex; content: ""; width: 0.25rem; height: 0.7rem; background: url(../img/bg-bar.svg) no-repeat; margin-left: -0.5rem; background-size: 0.25rem 0.7rem;} */


#wrapper.disable #header h1 a{color: transparent; -webkit-text-stroke: 0.1rem #FFE587;}
#wrapper.disable #header ul li a{color: transparent; -webkit-text-stroke: 0.1rem #FFE587;}
#wrapper.disable .bottom-text span{color: transparent; -webkit-text-stroke: 0.1rem #FFE587;}


#wrapper.dimmed #header a{}
#wrapper.dimmed .bottom-text span{}
#wrapper.dimmed .close{opacity: 0;}

#wrapper.dimmed .contents-wrap.detail .video-dim{opacity: 0 !important;}
#wrapper.dimmed .video-list{transition: all 0.4s ease;}
#wrapper.dimmed .contents-wrap.detail .video-list{opacity: 0 !important;}
#wrapper.dimmed .contents-wrap.detail .video-list .block{pointer-events: none;}
#wrapper.dimmed .contents-wrap.detail .sound{opacity: 0 !important;}
#wrapper.dimmed .contents-wrap.detail .footer-s {opacity: 0 !important;}