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


/* page zoom */
body,html {font-size: 0.5208333333333334vw;}
/* @media screen and (min-width: 1920px) {
    body,html {font-size: 62.5%;}
} */
@media (max-width: 768px) {
  body,html {font-size: 62.5%;}
    /*body,html {font-size: 2.66666666666667vw;}*/
  
}

/* common */
*{font-family:'mmpx','Pretendard', sans-serif;  box-sizing: border-box; font-weight:500; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color :transparent;}
html{}
html, body {color: #000; background-color: #fff;} /*  scroll-behavior: smooth; */

/* body{font-size: 1.8rem; font-weight:500; overflow-x: hidden; transition: all 0.4s ease; opacity:1;} */
body{font-size: 1.8rem; font-weight:500;}
body.load{opacity: 1;}
html.fixed{}
body.fixed{}
#wrapper{width: 100%; min-height: 100vh; overflow: hidden; background-color: #fff; display: flex; flex-direction: column;}
.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%; 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%; position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
video[poster]{object-fit:cover;}
@media (max-width: 768px) {
  .mob-view{display:block;}
  .pc-view{display: none;}
  html{background-color: #000000;}
  html, body{background-color: #ffffff;} /*  height: -webkit-fill-available  */
  body{}
  body.active{}
  #wrapper{overflow: auto; height: auto; min-height: 100dvh;}
}

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

  *::-webkit-scrollbar {
    width: 0px;
  }

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

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



/* form */
* { 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:'mmpx','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:'mmpx','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:#000;text-decoration:none; transition: all 0.15s 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: 5.8rem; height: 5.2rem; padding: 1rem 1rem; flex: none;
  z-index: 60;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
}

.navTrigger i {
  background-color: #fff;
  display: flex;
  width: 100%;
  height: 0.4rem; mix-blend-mode: difference;
}

.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(12px) 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(-12px) 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:768px) {
    .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 */

@media (max-width: 768px) {
    .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: fixed; z-index: 1100; width: 100%; top: 0px; transform: translateY(0);  opacity: 1; pointer-events: none; mix-blend-mode: difference;}
.contents-wrap > h1{position: absolute; right: 1.3rem; z-index: 130; display: none;}
.contents-wrap > h1 a{opacity: 1; letter-spacing: -0.18rem; font-size: 3rem; height: 5.4rem; display: flex; align-items: center;}
#header .bg{display: flex; position: absolute; background-color: #fff; width: 100%; height:0%; left: 0; top: 0; z-index: 0;}  
#header.active .bg{border-bottom: 0.2rem solid #000; box-sizing: border-box;}
/* #header.over{}
#header.over a{color: #000 !important;} */

#header.disabled a{pointer-events: none !important;}
#header.nav-down {}
#header.nav-up{}
#header.nav-default{}
#header .close{font-size: 2.3rem; position: absolute; left: 1rem; bottom: 1rem; color: #000;}

#header nav.main-navigation {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 11.4rem;
  font-size: 2.4rem;
  padding: 0 1rem;
  padding-top: 1.2rem;
  overflow: hidden;
  position: relative;
  z-index: 1120;
  pointer-events: all;
  
}
#header.active nav.main-navigation{pointer-events:all;}

#header nav.main-navigation.active a{pointer-events: none;}
#header nav.main-navigation.nav-hide{pointer-events: none;}

.menu{height: 5.2rem; display: flex; align-items: center; justify-content: center; transition: all 0.1s linear; overflow: hidden; opacity:1; position: relative; position: fixed; z-index:1110; mix-blend-mode: difference; left: 0rem; pointer-events: none;}
.menu.active{opacity: 1; margin-left:0rem; pointer-events: all;}
.menu .navTrigger { }
.menu .navTrigger i{transition: all 0.15s ease;}
.menu .navTrigger i:nth-child(1){width: 0%; transition-delay: 0s;}
.menu .navTrigger i:nth-child(2){width: 0%; transition-delay: 0.03s;}
.menu .navTrigger i:nth-child(3){width: 0%; transition-delay: 0.06s;}
.menu.active .navTrigger {}
.menu.active .navTrigger i{width: 100%;}
.menu.active .navTrigger i:nth-child(1){transition-delay: 0.06s;}
.menu.active .navTrigger i:nth-child(2){transition-delay: 0.03s;}
.menu.active .navTrigger i:nth-child(3){transition-delay: 0.0s;}

#header nav.main-navigation a{opacity: 0.4;}

#header nav.main-navigation h1 {transform: translateY(0%); transition: all 0.1s linear;   }

#header nav.main-navigation h1 a{opacity: 1; color: #000; position: relative; overflow: hidden; display:grid; grid-template-columns: 2fr 2fr 1fr 1fr; gap: 1rem;}
#header nav.main-navigation h1 a p{display:flex;  overflow: hidden; position: relative; transform: translateY(0%);}
#header nav.main-navigation h1 a span{position: relative; height: 100%;  transition: all 0.15s linear; overflow: hidden; display: flex; }
#header nav.main-navigation h1 a span em{display: flex; justify-content: flex-start;}
#header nav.main-navigation h1 a span em img{height:7.2rem;}
#header nav.main-navigation h1 a span em svg{height:7.2rem;}

#header nav.main-navigation h1 a p:nth-of-type(1){}
#header nav.main-navigation h1 a p:nth-of-type(2){align-items: flex-end;}
#header nav.main-navigation h1 a p:nth-of-type(3){justify-content: flex-end; }
#header nav.main-navigation h1 a p:nth-of-type(4){align-items: flex-end; justify-content: flex-end;}

#header nav.main-navigation h1 a p:nth-of-type(1) span{width:8rem; }
#header nav.main-navigation h1 a p:nth-of-type(1) span em{width:8rem; }
#header nav.main-navigation h1 a p:nth-of-type(2) span{width:8rem;   align-items: flex-end;}
#header nav.main-navigation h1 a p:nth-of-type(2) span em{width:8rem;}
#header nav.main-navigation h1 a p:nth-of-type(3) span{width: 5.5rem; justify-content: flex-end;}
#header nav.main-navigation h1 a p:nth-of-type(3) span em{width: 5.5rem; }
#header nav.main-navigation h1 a p:nth-of-type(4) span{width: 5.2rem; align-items: flex-end;}
#header nav.main-navigation h1 a p:nth-of-type(4) span em{width: 5.2rem;}

#header nav.main-navigation.nav-hide h1 a p:nth-of-type(1) span{width: 0;}
#header nav.main-navigation.nav-hide h1 a p:nth-of-type(2) span{height: 0;}
#header nav.main-navigation.nav-hide h1 a p:nth-of-type(3) span{width: 0;}
#header nav.main-navigation.nav-hide h1 a p:nth-of-type(4) span{height: 0;}


#header nav.main-navigation ul{display: flex; margin-right: auto;transition: all 0.1s linear; position: relative; z-index: 10; }
#header nav.main-navigation ul li{margin-right: 0.4rem; height: 3rem; }
#header nav.main-navigation ul li a{position: relative; display: flex; height:100%; overflow: hidden; transition: none;}
#header nav.main-navigation ul li a span{display:flex; transition: all 0.15s linear; overflow: hidden; position: absolute; height:100%;  line-height: 3rem;}
#header nav.main-navigation ul li a:hover{opacity: 1;}
#header nav.main-navigation li.active{pointer-events: none; touch-action: none;}
#header nav.main-navigation li.active *{pointer-events: none; touch-action: none;}
#header nav.main-navigation li.active a{opacity:1 !important;}
#header nav.main-navigation li.work a{pointer-events: all; touch-action:auto}
#header nav.main-navigation li.work a *{pointer-events: all; touch-action:auto}
#header nav.main-navigation ul li{ }
#header nav.main-navigation ul li:nth-of-type(1) a { width: 6.5rem;}
#header nav.main-navigation ul li:nth-of-type(1) a span{transform: translateY(0%);}
#header nav.main-navigation ul li:nth-of-type(2) a {width: 7.5rem;  align-items: flex-end;}
#header nav.main-navigation ul li:nth-of-type(2) a span{transform: translateY(0%);align-items: flex-end;}
#header nav.main-navigation ul li:nth-of-type(3) a {width: 9.2rem;}
#header nav.main-navigation ul li:nth-of-type(3) a span{transform: translateX(0%); width: 100%; right: 0; justify-content: flex-end;}

#header nav.main-navigation.nav-hide .menu{opacity: 1; margin-left:0rem;}
#header nav.main-navigation.nav-hide ul{}
#header nav.main-navigation.nav-hide ul li:nth-of-type(1) a span{height: 0;}
#header nav.main-navigation.nav-hide ul li:nth-of-type(2) a span{height: 0px; bottom: 0; }
#header nav.main-navigation.nav-hide ul li:nth-of-type(3) a span{width: 0; right: 0; }
#header nav.main-navigation.nav-hide a{pointer-events: none;}



#header.nav-default nav.main-navigation{transform: translateY(0) !important;}
.loading-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 99;
  pointer-events: none;
}
.loading-screen {
    
    position:fixed;
    background-color: #fff;
    width: 100%;
    height:100vh;
    top: 100vh;
    transform: scaleY(1) skewX(0) translateY(0%) ;
    transform-origin: top left;
    font-size: 60rem;
    line-height: 80%;
    padding: 2rem;
    padding-top: calc(2rem);
    display: flex; align-items: flex-start;
    opacity:1;
    box-sizing: border-box;
  }
  .loading-screen img{width: 100%; transform: translateY(50vh);}
  .loading-screen.index{padding-right: 45rem;}
  .loading-screen.work{ }
  .loading-screen.about{background-color: #081EC9; padding-right: 15rem;}
  .loading-screen.contact{padding-right: 5rem; background-color: #000;}
  @media (max-width: 768px) {
    .loading-screen.index{padding-right: 1.2rem;}
    .loading-screen.work{ padding-right:2rem;}
    .loading-screen.about{background-color: #081EC9; padding-right:2rem;}
    .loading-screen.contact{padding-right:2rem;}
    
  }
  .contents-wrap{display: flex; flex-direction: column;  overflow: hidden; position: relative; min-height: 100vh; padding-bottom: 4.4rem; }
  .footer{display: flex; justify-content: space-between; padding: 4rem 0 2rem 0; font-size: 1.8rem; margin-top: auto;}
  .footer ul{display: flex; gap: 2rem;}
  .contents{padding-left: 1rem; padding-right: 1rem; padding-top: 10rem; display: flex; flex-direction: column; min-height: 100%; flex-grow: 1;}

  .contents.index-contents{height:calc(100vh - 4.4rem); padding:0; position: relative;}

  @media (max-width: 768px) {
    .contents-wrap{min-height: 100dvh;}
    /* .contents-wrap{height: 100%; min-height: 0;} */
    .contents{padding:12rem 0.8rem 0 0.8rem;  min-height: 0;}
    /* .contents.index-contents{height: 100%; position: relative;}   */
    #header {}
    #header.m-menu{ }
    .menu{width:4.6rem; height: 4.6rem; display: flex; align-items: center; justify-content: center; transition: all 0.2s linear; overflow: hidden; margin-left: 0; opacity:1; position: relative; position: fixed; z-index:110; mix-blend-mode: difference; left:0rem; z-index: 1111;}
    .menu .navTrigger.active i{mix-blend-mode: normal;}
    .navTrigger{transform: scale(0.8);}


    #header nav.main-navigation{height: auto; align-items: flex-start; padding: 1rem 0.8rem 0 0.8rem; font-size: 3rem;}
    #header nav.main-navigation h1{margin-bottom: 0.4rem; width: 100%;}
    #header nav.main-navigation h1 a{opacity: 1; color: #000; position: relative; overflow: hidden; display:grid; grid-template-columns: 2fr 2fr 1fr 1fr; gap: 0.5rem;}
    #header nav.main-navigation h1 a p{display:flex;  overflow: hidden; position: relative; transform: translateY(0%);}
    #header nav.main-navigation h1 a span{position: relative; height: 100%;  transition: all 0.15s linear; overflow: hidden; display: flex;}
    #header nav.main-navigation h1 a span em{display: flex; justify-content: flex-start;}
    #header nav.main-navigation h1 a span em img{height:3.6rem;}
    #header nav.main-navigation h1 a span em svg{height:3.6rem; }
    
    #header nav.main-navigation h1 a p:nth-of-type(1){}
    #header nav.main-navigation h1 a p:nth-of-type(2){align-items: flex-end;}
    #header nav.main-navigation h1 a p:nth-of-type(3){justify-content: flex-end; }
    #header nav.main-navigation h1 a p:nth-of-type(4){align-items: flex-end; justify-content: flex-end;}
    
    #header nav.main-navigation h1 a p:nth-of-type(1) span{width:4rem; }
    #header nav.main-navigation h1 a p:nth-of-type(1) span em{width:4rem; }
    #header nav.main-navigation h1 a p:nth-of-type(2) span{width:4rem;   align-items: flex-end;}
    #header nav.main-navigation h1 a p:nth-of-type(2) span em{width:4rem;}
    #header nav.main-navigation h1 a p:nth-of-type(3) span{width: 2.7rem; justify-content: flex-end;}
    #header nav.main-navigation h1 a p:nth-of-type(3) span em{width: 2.7rem; }
    #header nav.main-navigation h1 a p:nth-of-type(4) span{width: 2.6rem; align-items: flex-end;}
    #header nav.main-navigation h1 a p:nth-of-type(4) span em{width: 2.6rem;}
    
    #header nav.main-navigation.nav-hide h1 a p:nth-of-type(1) span{width: 0;}
    #header nav.main-navigation.nav-hide h1 a p:nth-of-type(2) span{height: 0;}
    #header nav.main-navigation.nav-hide h1 a p:nth-of-type(3) span{width: 0;}
    #header nav.main-navigation.nav-hide h1 a p:nth-of-type(4) span{height: 0;}


    #header nav.main-navigation ul li a{height: 2.6rem; font-size: 2rem;}
    #header nav.main-navigation ul li a span{height: 2.6rem; line-height: 2.6rem;}
    #header nav.main-navigation ul li:nth-of-type(1) a { width: 5.4rem;}
    #header nav.main-navigation ul li:nth-of-type(1) a span{transform: translateY(0%);}
    #header nav.main-navigation ul li:nth-of-type(2) a {width: 6.3rem;  align-items: flex-end;}
    #header nav.main-navigation ul li:nth-of-type(2) a span{transform: translateY(0%); align-items: flex-end;}
    #header nav.main-navigation ul li:nth-of-type(3) a {width: 7.6rem;}
    #header nav.main-navigation ul li:nth-of-type(3) a span{transform: translateX(0%); width: 100%; right: 0; justify-content: flex-end;}


    .footer{display: flex; flex-direction: column-reverse; justify-content: space-between; padding: 4.8rem 0 1.6rem 0; font-size: 1.6rem; margin-top: auto; row-gap:1rem;}
    .footer ul{display: flex; gap: 1.4rem; justify-content: flex-end;}
  }
  #wrapper.index-secton{background-color: #fff;}
  #wrapper.index-secton nav.main-navigation .menu i{background-color: #fff;}
  #wrapper.index-secton nav.main-navigation a{color: #fff;}
  #wrapper.index-secton nav.main-navigation a::after{background-color: #fff;}
  /* #wrapper.index-secton .footer *{color: #fff;} */

  
  #wrapper.work-secton{background-color: #fff;}
  #wrapper.work-secton #header nav.main-navigation h1 a{color: #fff;}
    #wrapper.about-secton{background-color: #081EC9; color: #fff;}
    #wrapper.about-secton #header{mix-blend-mode: normal;}
  #wrapper.about-secton nav.main-navigation .menu i{background-color: #fff;}
  #wrapper.about-secton nav.main-navigation a{color: #fff;}
  #wrapper.about-secton nav.main-navigation a::after{background-color: #fff;}
  #wrapper.about-secton .footer *{color: #fff;}
  #wrapper.contact-secton{background-color: #000;}
  #wrapper.contact-secton nav.main-navigation .menu i{}
  #wrapper.contact-secton nav.main-navigation a{}
  #wrapper.contact-secton nav.main-navigation a::after{}
  #wrapper.contact-secton .footer *{color: #fff;}
  #wrapper.contact-secton .contents{color:#fff;}

  .project-type{display: flex; justify-content: flex-end; margin-bottom: 1rem; padding-top: 5.6rem;}
  .project-type.bottom{padding-top: 10.8rem;}
  .project-type ul{font-size: 2.3rem; display: flex; justify-self: flex-end;}
  .project-type ul li{position: relative; margin-left:1rem;}
  .project-type ul li a{ opacity: 0.5; display: flex;}
  .project-type ul li a:hover{ opacity:1;}
  .project-type ul li p{white-space:nowrap;}
  .project-type ul li span{font-size: 1.4rem; vertical-align: top; display:inline-flex; justify-content: flex-end; margin-left: 0.2rem; margin-top: 0.2rem;}
  .project-type ul li:first-of-type p{width: 19.6rem;}
  .project-type ul li:last-of-type p{width: 6.2rem;}
  .project-type ul li.active a{opacity: 1;}

  .filter-block {display: flex; flex-direction: column;}
  .filter-block  button{color: #000;}
  .filter-block .title{}
  .filter-block .title p{display: flex; flex-direction: column; overflow: hidden; transition: all 0.4s ease; margin-top: 3.3rem;}
  .filter-block .title p span{display: flex; height: 2.8rem; align-items: center;}
  .filter-block .title button{font-size: 2.3rem; display: flex; align-items: center; height: 2.8rem;  overflow: hidden; }
  .filter-block .title button img{margin-right: 1rem; transition: all 0.4s ease; width: 1.8rem; margin-top: 0.2rem;}
  .filter-block .title button.active img{transform: rotateZ(135deg);}
  .filter-block .title button.active p{margin-top: -2.3rem;}
  .filter-list{margin-top: 2rem; transition: all 0.4s ease; transform: translateY(0px); overflow: hidden; height: 0; }
  .filter-list ul{display:grid; flex-wrap: wrap; flex-direction: column; transition: all 0.4s ease; transform: translateY(100%); width: 75%; row-gap: 0.2rem; grid-auto-flow:column; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: repeat(8, 1fr)}
  .filter-list ul li{}
  .filter-list ul li button{font-size: 2rem; display: flex; align-items: center; position: relative; height: 2.8rem; text-align: left; width: fit-content;}
  .filter-list ul li button:before{content: ""; width: 0rem; height: 0rem; background-size: cover;  transition: all 0.15s ease; border-radius: 50%; background-color: #000;}
  .filter-list ul li button:after{content: ""; width: 0rem; height: 0rem; background-size: cover;transition: all 0.15s ease; background-color: #fff; position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 10;}
  .filter-list ul li button.is-checked::before{display: flex; width: 1.8rem; height: 1.8rem; margin-right: 0.6rem;}
  .filter-list ul li button:hover::before{display: flex; width: 1.8rem; height: 1.8rem; margin-right: 0.6rem;}
  .filter-list ul li button.is-checked::after{width: 1.8rem; height: 0.2rem;}
  .filter-list.active{transform: translateY(0); opacity: 1; height:auto; padding-top: 0.8rem; padding-bottom: 8rem; box-sizing: content-box;}
  .filter-list.active ul{transform: translateY(0);}

  .filter-list ul li:nth-of-type(15){grid-column: 3/4; grid-row: 1/2;}
  .filter-list ul li:nth-of-type(16){grid-column: 3/4; grid-row: 2/3;}
  .filter-list ul li:nth-of-type(17){grid-column: 3/4; grid-row: 3/4;}
  
  .work-wrap{display: flex; flex-wrap: nowrap; justify-content: space-between; background-color: #fff;}
  .work-wrap .work-block{width:calc(200vw); display: flex; justify-content: space-between; flex-grow: 0; flex-shrink: 0; flex: none; flex-wrap: nowrap;}
  .work-list {display: grid !important; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 1rem; row-gap: 15rem; align-items: flex-end; height: auto !important; width:calc(100vw - 4rem); transition: none; flex: none; width: 100%;
  }
  /* .work-list.selected {padding-bottom: 8.5rem;} */
  .work-list.hide{height: 0 !important ; overflow: hidden;}
  .work-list dl.thumb dt{margin-bottom: 1rem;  overflow: hidden; position: relative;  display: flex;  align-items:center; justify-content: center; aspect-ratio: 1;}
  .work-list dl.thumb dd{font-size: 1.6rem; line-height: 2.0rem; height: 2.0rem;}
  .work-list dl.thumb dt a{display: flex; transform-origin: center bottom; align-items: flex-end; position: relative; overflow:visible; width: 100%; transition:all 0.1s linear; } /*  transform: translateY(-12%); */
  .work-list dl.thumb dt a{}
  .work-list dl.thumb dt a > *{width: 100%; object-fit: cover; pointer-events: none;}
  .work-list dl.thumb dt span{display: flex; width: 100%; height: 100%; background-color: #fff; position: absolute; z-index: 1; transform: translateY(100%); top: 0;}
  /* .work-list dl.thumb dt a img{transition: all 3s ease;} */
  /* .work-list dl.thumb dt a video{transition: all 3s ease;} */
  .work-list img{width: 100%;}
  .grid-item { width: 100% !important; position: relative !important; left: 0 !important; top: 0 !important; transform: translate3d(0,0,0) !important;}
  .grid-item .block{display: flex; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; background-color: #fff;  transform: translateY(100%);}
  .grid-item.large {grid-column: 1 / 3;}
  .grid-item.sort{ width: 49.9%;}
  /*.grid-item:nth-child(1) {grid-column: 1 / 3;}
  .grid-item:nth-child(1) dl.thumb dt a{margin-bottom: 0;}
  .grid-item:nth-child(2) {grid-column: 3 / 5;}
  .grid-item:nth-child(2) dl.thumb dt a{margin-bottom: 0;}
  .grid-item:nth-child(3) {grid-column: 1 / 3;}
  .grid-item:nth-child(4) {grid-column: 3 / 5;}
  .grid-item:nth-child(5) {grid-column: 1 / 3;}*/
  .grid-item:nth-child(1) dl.thumb dt{width: 100%; aspect-ratio:1 !important;}
  .grid-item:nth-child(2) dl.thumb dt{width: 100%; aspect-ratio:1 !important;}
  .grid-item:nth-child(3) dl.thumb dt{width: 100%; aspect-ratio:1 !important;}
  .grid-item:nth-child(4) dl.thumb dt{width: 100%; aspect-ratio:1 !important;}
  .grid-item:nth-child(5) dl.thumb dt{width: 100%; aspect-ratio:1 !important;}
  .work-list.sort{ grid-template-columns: 1fr 1fr;} 
  .work-list.sort .grid-item:nth-child(1) {grid-column: 1 / 2;}
  .work-list.all-item{display: flex !important; flex-direction: column; row-gap: 0; position: relative; margin-bottom: 10rem; border-top: 0.2rem solid #000;}
  .work-list.all-item .block{display: flex; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; background-color: #fff; transform: translateY(100%); }
  .work-list.all-item .grid-item{ height: auto;}
  .work-list.all-item .grid-item span.block{display: none;}
  .work-list.all-item .grid-item .thumb{display: none;}
  .work-list.all-item .grid-item .line{display:block; transition: all 0.3s cubic-bezier(0.6, 0, 0.2, 1);}
  .work-list.all-item .grid-item.disabled .title{color: #AAAAAA; cursor: auto; pointer-events: none;}
  .work-list .grid-item .line{display: none;}
  .work-list.all-item .line{border-bottom: 0.2rem solid #000; position: relative;margin-bottom: 1px;}
  .work-list.all-item .grid-item:first-of-type .line{}
  
  .work-list.all-item .line .slider{overflow: hidden; transition: all 0.3s cubic-bezier(0.6, 0, 0.2, 1); max-height: 0; margin-right: -2rem;}
  .work-list.all-item .line.active{padding-bottom: 1rem;}
  .work-list.all-item .line.active dl dd{white-space: wrap;}
  .work-list.all-item .line.active .slider{overflow: hidden;  max-height:100rem;}
  .work-list.all-item .line.active .open img{transform: rotateZ(0);}
  .work-list.all-item .line .title .select{}
  .work-list.all-item .title{display: flex; padding: 2rem 0 1.8rem 0; align-items:flex-start; font-size:1.6rem; justify-content: space-between; cursor: pointer; position: relative; overflow: hidden;}
  .work-list.all-item .title dl{display: flex; align-items: flex-start; gap: 8rem; pointer-events: none;}
  .work-list.all-item .title dl dt{width: 76.5rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align:middle; flex: 0 1 auto; word-break: break-all; transition: all 0.2s cubic-bezier(0.6, 0, 0.2, 1); min-height: 2.4rem; max-height: 2.4rem; overflow: hidden;}
  .work-list.all-item .title dl dd{flex-grow: 1; white-space:nowrap; overflow:hidden; word-break:break-all; text-overflow:ellipsis; -o-text-overflow: ellipsis; vertical-align:middle;  display: block; max-width: 78.5rem;}
  .work-list.all-item .title .select{width: 16.6rem; margin-left: auto; display: flex; flex: none;  pointer-events: none;}
  .work-list.all-item .title .select span{display: none;}
  .work-list.all-item .title .open{width: 2rem; height: 1.1rem; display: flex; overflow: hidden; flex: none; margin-top: 0.6rem;  pointer-events: none;}
  .work-list.all-item .title .open button{width: 2rem; display: flex; flex-direction: column; row-gap: 1rem; justify-content: flex-end;  transition: all 0.6s cubic-bezier(0.6, 0, 0.2, 1);}
  .work-list.all-item .line.active .open button{transform: translateY(2.1rem);}
  /*.work-list.all-item .line.active .slider{padding-top: 2rem;}*/
  .work-list.all-item .line.active .slider .work-slider{ }
  .work-list.all-item .line.active .title dl dt{white-space: wrap; min-height: 4.8rem;}
  /* .work-list.all-item .line.active .title dl dd{max-height: 5.2rem;} */
  .work-list.all-item .title .open img{width: 2rem; height: auto;}
  .work-list.all-item .more{ display: flex; justify-content: flex-end; padding-right: 2rem; min-height: 2.2rem;}
  .work-list.all-item .more a{display: flex; align-items: center; font-size: 1.6rem; height: 3.6rem;  border-radius: 2.3rem; color: #000;}
  .work-list.all-item .more img{width: 2.2rem; height: auto; margin-left: 0.8rem; transition: all 0.2s cubic-bezier(0.6, 0, 0.2, 1);}
  .work-list.all-item .title .select img{width: 2.2rem; height: auto; margin-left: 0.8rem; transition: all 0.2s cubic-bezier(0.6, 0, 0.2, 1);}
  .work-list.all-item .grid-item.active .title .select img{transform: rotateZ(180deg);}
  .slider .work-slider .swiper-wrapper{display: flex;}
  .slider .work-slider .swiper-slide{max-width: 80rem; margin-right: 56rem; aspect-ratio: 3/2 !important; display: flex;}
  .slider .work-slider .swiper-slide > * {object-fit: cover; height: 100%; width: auto;}
  .slider .work-slider .swiper-slide span{}
  .slider .work-slider .work-type{font-size: 1.6rem; display: flex; height: 2.2rem; align-items: center; margin-top: 1rem;}
  .slider .work-slider .work-type .type{width: 40rem;}
  .slider .work-slider .swiper-pagination{position: static; width: auto; text-align: left;  display: flex; align-items: center; font-size: 1.6rem; height: 2.0rem; margin-top: -2.6rem; background-color: #fff; margin-top: auto; width: 40rem;}
  .slider .work-slider .control{ display: flex; align-items: center; justify-content: center;  margin-left: 56rem;}
  .slider .work-slider .control .dash{width: 2rem; background-color: #000; height: 0.1rem; display: flex; margin: 0 1rem;}
  .slider .work-slider .swiper-button-next {color: #000; position: static; display: flex; margin-top: auto; height: auto; width: auto;}
  .slider .work-slider .swiper-button-prev {color: #000; position: static; display: flex; margin-top: auto; height: auto; width: auto;}
  .slider .work-slider .swiper-button-next::after,
  .slider .work-slider .swiper-button-prev::after {display: none;}
  .work-thumb{margin-top: 24rem; display:none;}
  @media (max-width: 768px) {
    .project-type{display: flex;  justify-content: flex-end; margin-top: 2.4rem;  padding-bottom:0rem; margin-right: 0; margin-bottom: 1rem;}
    .project-type.bottom{padding-top:2rem; margin-top: 0;}
    .project-type ul{font-size: 2.2rem; display: flex; flex-direction: column; justify-self: flex-end; row-gap: 0.2rem;}
    .project-type ul li{position: relative; margin-left:1rem; display: flex; justify-content: flex-end;}
    .project-type ul li em{display: none;}
    .project-type ul li a{ opacity: 0.4; display: flex;}
    .project-type ul li a:hover{ opacity:1;}
    .project-type ul li span{font-size: 1.4rem; vertical-align: top; display:inline-flex; min-width:1rem;}
    .project-type ul li:first-of-type span{margin-left: 0.2rem;}
    .project-type ul li.active a{opacity: 1;}
    .project-type ul li:first-of-type p{width:auto;}
    .project-type ul li:last-of-type p{width:auto;}

    .filter-block {display: flex; flex-direction: column;}
    .filter-block .title{padding-top: 1.6rem; padding-bottom: 1.6rem;}
    .filter-block .title p{display: flex; flex-direction: column; overflow: hidden; transition: all 0.4s ease; margin-top: 2rem;}
    .filter-block .title p span{display: flex; height: 2rem; align-items: center;}
    .filter-block .title button{font-size: 2rem; display: flex; align-items: center; height: 2rem;  overflow: hidden;}
    .filter-block .title button img{margin-right: 0.5rem; transition: all 0.4s ease; width: 1.5rem; margin-top: -0.2rem;}
    .filter-block .title button.active img{transform: rotateZ(135deg);}
    .filter-block .title button.active p{margin-top: -2rem;}
    .filter-list{margin-top:0rem; transition: all 0.4s ease; transform: translateY(0px); overflow: hidden; height: 0; }
    /* .filter-list ul{display: flex; flex-wrap: wrap; transition: all 0.4s ease; transform: translateY(10%); justify-content:flex-start; row-gap: 0.2rem; width: 100%;  height: auto; } */
    .filter-list ul{display:grid; width: 100%;  height: auto; grid-auto-flow: column;  grid-template-columns: 1fr 1fr; grid-template-rows: repeat(12, 1fr); row-gap: 0.4rem; column-gap: 3.2rem;}
    .filter-list ul li{width:100%; margin-right: 0rem; height: auto;}
    .filter-list ul li.blink{display: none;}
    .filter-list ul li button{font-size: 1.5rem; display: flex; align-items: center; position: relative; height: 1.8rem; width: fit-content; white-space:nowrap; overflow:hidden; word-break:break-all; text-overflow:ellipsis; -o-text-overflow: ellipsis; vertical-align:middle;}
    .filter-list ul li button:before{content: ""; width: 0rem; height: 0rem; background-size: cover; border-radius: 50%; background-color: #000;}
    .filter-list ul li button:after{content: ""; width: 0rem; height: 0rem; background-size: cover;background-color: #fff; position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 10;}
    .filter-list ul li button.is-checked::before{display: flex; width: 1.2rem; height: 1.2rem; margin-right: 0.3rem;}
    .filter-list ul li button:hover::before{display: flex; width: 0rem; height: 0rem; margin-right: 0rem;}
    .filter-list ul li button.is-checked::before{display: flex; width: 1.2rem; height: 1.2rem; margin-right: 0.3rem;}
    .filter-list ul li button.is-checked::after{width: 1.2rem; height: 0.2rem;}
    
    .filter-list ul li:nth-of-type(9){grid-column: 2/3; grid-row: 1/2;}
    .filter-list ul li:nth-of-type(10){grid-column: 2/3; grid-row: 2/3;}
    .filter-list ul li:nth-of-type(11){grid-column: 2/3; grid-row: 3/4;}
    .filter-list ul li:nth-of-type(12){grid-column: 2/3; grid-row: 4/5;}
    .filter-list ul li:nth-of-type(13){grid-column: 2/3; grid-row: 5/6;}
    .filter-list ul li:nth-of-type(14){grid-column: 2/3; grid-row: 6/7;}
    .filter-list ul li:nth-of-type(15){grid-column: 2/3; grid-row: 7/8;}
    
    .filter-list ul li:nth-of-type(16){grid-column: 1/2; grid-row: 10/11;}
    .filter-list ul li:nth-of-type(17){grid-column: 1/2; grid-row: 11/12;}
    .filter-list ul li:nth-of-type(18){grid-column: 1/2; grid-row: 12/13;}

    .filter-list ul li:nth-of-type(){width: 100%; grid-column:; grid-row:;}

    .filter-list.active{transform: translateY(0); opacity: 1;  padding-bottom:6.4rem; box-sizing: content-box; height:auto;}
    .filter-list.active ul{transform: translateY(0);}

    .work-wrap {flex-direction: column; padding-bottom: 10rem; position: relative; z-index: 1;}
    .work-wrap .work-block{width:calc(200vw);}
    .work-list {display: flex !important; flex-direction: column; gap: 0rem; row-gap: 6rem; align-items: flex-end; height: auto !important;  width:calc(100vw - 1.6rem);}
    .work-list dl.thumb dt{margin-bottom: 0.8rem; aspect-ratio:1 !important; height: auto !important; width: 100%;}
    .work-list dl.thumb dd{font-size: 1.6rem; height: 2rem; line-height: normal;}
    .work-list dl.thumb dt a{display: flex; width: 100%;}
    .work-list dl.thumb dt a:hover img{transform: scale(1);}
    .work-list dl.thumb dt a:hover video{transform: scale(1);}
    
    .work-list img{width: 100%;}
    .grid-item { width: 100% !important; position: relative !important; left: 0 !important; top: 0 !important; transform: translate3d(0,0,0) !important;  }
    .grid-item.large {grid-column: 1 / 3;}
    .grid-item.sort{ width: 49.9%;}
    .grid-item:nth-child(1) {grid-column: 1 / 3;}

    /* .grid-item dl.thumb dt a{margin-bottom: 0rem !important;} */

    .work-list.sort{ grid-template-columns: 1fr 1fr;} 
    .work-list.sort .grid-item:nth-child(1) {grid-column: 1 / 2;}
    .work-list.all-item{display: flex !important; flex-direction: column; row-gap: 0; border-top: 0.2rem solid #000;}
    .work-list.all-item .grid-item{ height: auto;}
    .work-list .grid-item.blank{display: none;}
    .work-list.all-item .grid-item .thumb{display: none;}
    .work-list.all-item .grid-item .line{display:block; background-color: #fff;}
    .work-list.all-item .grid-item .line.active{padding-bottom: 0;}
    .work-list .grid-item .line{display: none;}
    .work-list.all-item .line{border-bottom: 0.2rem solid #000; }
    .work-list.all-item .line .slider{overflow: hidden; max-height: 0; width:calc(100vw - 1.2rem);}
    .work-list.all-item .line.active .slider{overflow: hidden;  max-height:100rem; padding-top: 0rem;}
    .work-list.all-item .line.active .open img{transform: rotateZ(0);}
    .work-list.all-item .line .title .select{width: 7.6rem; display: flex;}

    

    .work-list.all-item .title{display: flex; align-items: flex-start; font-size: 1.6rem; justify-content: space-between; cursor: pointer; padding: 1.6rem 0 1.4rem 0;}
    .work-list.all-item .title dl{display: flex; align-items: center; gap: 8rem; white-space: nowrap; overflow: hidden;}
    .work-list.all-item .title dl dt{width: 100%; padding-right:3rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align:middle; flex: 0 1 auto;  max-height: 2rem; }
    .work-list.all-item .title dl dd{display: none;}
    .work-list.all-item .title .select{width: auto; margin-left: auto; flex: none; margin-right: 0rem;}
    .work-list.all-item .title .select span{display: none;}

    .work-list.all-item .title .open{width: 1.6rem; height: 0.8rem; display: flex; overflow: hidden; margin-top: 0.6rem;}
    .work-list.all-item .title .open button{width: 1.6rem; display: flex; flex-direction: column; row-gap: 1rem; justify-content: flex-end; }
    .work-list.all-item .line.active .open button{transform: translateY(1.8rem);}
    .work-list.all-item .title .open img{width: 1.6rem;  height: 0.8rem;}
    
    .work-list.all-item .line.active .title{}
    .work-list.all-item .line.active .title dl dt{white-space:normal; max-height: 10rem;}

    .work-list.all-item .more{padding-bottom: 1.2rem; display: flex; justify-content: flex-end; padding-top: 0rem; min-height: 0; position: relative; z-index: 10; padding-right: 0.4rem; padding-top: 1.2rem;}
    .work-list.all-item .more a{display: flex; align-items: center; font-size: 1.6rem; height:3.6rem; border: none;}
    .work-list.all-item .more img{width: 1.6rem; height: auto; margin-left: 0.8rem; transition: all 0.2s ease;}
    .work-list.all-item .title .select img{width: 2.2rem; height: auto; margin-left: 0.8rem; transition: all 0.2s ease;}
    .work-list.all-item .grid-item.active .title .select img{transform: rotateZ(180deg);}
    .slider .work-slider .swiper-wrapper{display: flex; white-space: nowrap;}
    .slider .work-slider .swiper-slide{max-width: 90rem; margin-right: 1.2rem; width:32.5rem; height: auto; overflow: hidden;}
    .slider .work-slider .swiper-slide img{width: 100%;}
    .slider .work-slider .swiper-slide span{}
    .slider .work-slider .work-type{font-size: 1.4rem; display: flex; height: 2rem; align-items: center; margin-top: 0.8rem; padding-bottom: 0rem; padding-right: 0.4rem;}
    .slider .work-slider .work-type .type{width:auto; font-size: 1.4rem;}
    .slider .work-slider .swiper-pagination{position: static; text-align: left;  display: flex; align-items: center; font-size: 1.4rem; height: 2rem; margin-left: auto; margin-top: -2.6rem; background-color: #fff; margin-top: auto; width:auto; margin-right: 0;}
    .slider .work-slider .swiper-button-next {
      display: none;
    }
    .slider .work-slider .control{display: none;}
    .slider .work-slider .swiper-button-next::after,
    .slider .work-slider .swiper-button-prev::after {display: none;}
    .work-thumb{display: none;}
  }

/* work detail */
.work-contents{display: flex; flex-direction: column; flex-wrap: wrap;}
.work-header{display: flex; flex-direction: column; flex-wrap: wrap; width: 100%;}

.work-header h2{font-size: 2.2rem; line-height: 2.82rem; width: 85rem; align-self: flex-end;}
.work-header h2 a{display: inline-flex; flex-direction: column;}
.work-header p{font-size: 2.2rem; line-height: 2.82rem; width: 85rem; align-self: flex-end;}
.work-preview{padding:6rem 0 24rem 0;}
.preview-img{margin-top: 1rem; overflow: hidden;}
.preview-img img{transform-origin: center top;}
.work-preview h3{font-size: 3.6rem; line-height:normal; width: 140rem;}
.work-preview h4{margin-top: 2rem;font-size: 1.9rem; line-height: 2.7rem; font-weight: 500; width: 85rem; padding-bottom: 8rem;}
.work-info{padding-right: 4rem; display: flex; justify-content: space-between; position: relative;}
.work-info dl{width: 85rem;font-size: 2rem;}
.work-info dl.title dt{ margin-bottom: 2rem;}
.work-info dl.title dd{ line-height: 2.8rem;}
.work-info .award {margin-top: 8rem;}
.work-info .award .image{width: 10rem; height: 10rem;}
.work-info .award dl dt{padding-top: 2rem; font-size: 2rem; padding-bottom: 2rem;}
.work-info .award dl dd{font-size: 1.6rem; line-height: 2rem; font-weight: 400;}
.work-info ul{width: 82rem; font-size: 2rem; display: flex; flex-direction: column; row-gap: 4.8rem;}
.work-info ul li{line-height: 2.6rem; display: flex; flex-direction: column; row-gap: 4rem;}
.work-info ul li:nth-of-type(1){width: 85rem;}
.work-info ul li:nth-of-type(2){width: 85rem; font-size: 1.9rem; line-height: 2.7rem; font-weight: 500;}
.work-info .more{position: absolute; bottom: 12rem; left: 0; z-index: 10; display: none;}
.work-info .more button{display: flex;}
.work-info .more button span{font-size: 1.6rem; display: flex; align-items: center; color: #000 !important;}
.work-info .more button span:first-of-type{display:flex;}
.work-info .more button span:last-of-type{display: none;}
.work-info .more button img{margin-right: 0.6rem; margin-top: 0.2rem;}

.work-image {display: flex; flex-direction: column; row-gap: 1rem; }
.work-image img{width: 100%;}
.work-image .colum{display: flex;  justify-content: space-between; align-items: flex-start; gap: 1rem;}
.work-image .colum p{display: flex; width: 100%; object-position: 50% 50%; overflow: hidden;}
.work-image .colum p img{object-fit:cover;}
.work-image .colum .text{display: flex; font-size: 6rem; line-height: 7.6rem; letter-spacing: -0.06rem; padding: 8rem 6.5rem;}
.work-image .large-text{padding-top: 20rem; font-size: 3.6rem; line-height:normal; padding-bottom: 0.4rem;}
.work-image .video{display: flex; position: relative;}
.work-image .video button{position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); display: none;}
.work-image .video.full-screen-video button{display: flex;}
.work-image .video video{object-fit: cover;}
.work-image .video .full-screen{position: absolute;}
.work-image .video .full-screen img{width: 8rem;}

.next-page{display: flex; flex-direction: column; padding-top:44rem; padding-bottom: 2rem;  padding-left: 105rem; }
.next-page .block{display: inline-flex; flex-direction: column; width: fit-content;}
.next-page .title{font-size:1.6rem;margin-bottom: 2rem; height: 2.0rem; white-space: nowrap;}
.next-page img{width: 100%;}
.next-page .preview-img{height: 54rem; align-items: flex-start; overflow: hidden; cursor: pointer;}
.next-page .work-header {width: fit-content;}
.next-page .work-header p{width: fit-content; white-space:nowrap; height: 2.6rem; overflow: hidden;}

@media (max-width: 768px) {
  .work-contents{display: flex; flex-direction: column; flex-wrap: wrap; }
  .work-header h2{font-size: 2rem; line-height:normal; width:auto; align-self: flex-start;}
  .work-header p{font-size: 2rem; line-height:normal; width:auto; align-self: flex-start; margin-bottom:0.8rem;}
  .preview-img{margin-top: 0rem; width: 100%; overflow: hidden; margin-left: -1.2rem !important; width: calc(100% + 2.4rem) !important;}
  .preview-img img{transform-origin: center bottom;}
  .work-preview{padding-top: 2.4rem; width: 100%;}
  .work-preview h3{font-size:2.4rem; line-height:normal; width:auto; margin-right: 2.4rem;}
  .work-preview h4{margin-top:1.6rem;font-size: 1.6rem; line-height: 2.2rem; padding-bottom:0rem; width: auto; margin-right: 2.4rem;}
  .work-info{display: flex; flex-direction: column; justify-content: space-between;  overflow: hidden; padding-bottom: 12rem; padding-top: 4.8rem; padding-right: 0;}
  .work-info.active{padding-bottom: 24rem;}
  .work-info dl.title{width:auto;font-size: 1.6rem;}
  .work-info dl.title dt{ margin-bottom: 1.6rem;}
  .work-info dl.title dd{line-height: 2.2rem;}

  .work-info .award {margin-top: 4.8rem;}
  .work-info .award .image{width: 8rem; height: 8rem;}
  .work-info .award dl dt{padding-top: 1.6rem; font-size: 2rem; padding-bottom: 0.8rem;}
  .work-info .award dl dd{font-size: 1.6rem; line-height:normal; font-weight: 400;}

  .work-info ul{margin-top: 4.8rem; width: auto; font-size: 1.8rem; display: flex; flex-direction: column; row-gap: 2.8rem; max-height: 24rem;  position: relative;}
  .work-info ul li p{line-height: 2.3rem;}
  .work-info.active ul{max-height: none;}
  .work-info:after{content: ""; display: flex; width: 100%; height:38.5rem; position: absolute; bottom: 0; left: 0; right:0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 50%);}
  .work-info.active::after{display: none;}
  .work-info ul li{line-height: normal;}
  .work-info ul li:nth-of-type(1){width:auto;}
  .work-info ul li:nth-of-type(2){width:auto; font-size: 1.7rem; font-weight: 500; }
  .work-info ul li:nth-of-type(2) p{word-break: keep-all;}
  .work-info .more{display: block;}
  .work-info.active .more button span:first-of-type{display:none;}
  .work-info.active .more button span:last-of-type{display:flex;}
  .work-image {display: flex; flex-direction: column; row-gap: 0.8rem;  width:100%;  overflow: hidden;}
  .work-image  > *:not(.large-text){width: 100%;}
  .work-image img{width: 100%;}
  .work-image .colum{display: flex;  flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 0; row-gap: 0.8rem;}
  .work-image .colum p{height:auto; display: flex; width: 100%; object-position: 50% 50%;}
  .work-image .colum p img{object-fit:cover;}
  .work-image .colum .text{display: flex; font-size: 6rem; line-height: 7.6rem; letter-spacing: -0.06rem; padding: 8rem 6.5rem;}
  .work-image .large-text{padding-top:10rem; font-size: 2rem; line-height:normal; padding-bottom:0rem; margin-right: 2.4rem; }

  .work-image .video .full-screen img{width: 4rem;}

  .next-page{display: flex; flex-direction: column; padding-top:28.4rem; padding-bottom: 4rem; padding-left: 0;}
  .next-page .title{font-size:1.6rem; width: auto; margin-left:0; margin-bottom: 1.6rem; height:2rem;}
  .next-page img{width: 100%;}
  .next-page .preview-img{height:auto; align-items: flex-start; overflow: hidden; aspect-ratio:1; width: 100% !important; margin: 0 !important; }
  .next-page .work-header p {
    margin-bottom: 0;
  }
}

/* contact */


#wrapper.contact-secton .contents-wrap{min-height: 100vh;}
#wrapper.contact-secton .contents{display: flex; flex-grow:1; align-items: center;}
.contact-contents{display: flex; justify-content:flex-end; width: 100%; flex-wrap: wrap; padding: 6rem 0;}
.contact-contents .office {display: flex; flex-direction: column; row-gap: 4.8rem; width: 85rem;}
.contact-contents .office dl{display: flex; flex-direction: column; width: 82rem; row-gap: 1rem;}
.contact-contents .office dl:nth-of-type(1) dd{font-size: 1.9rem;}
.contact-contents .office dl:nth-of-type(1) dd em{font-size: 1.8rem;}
.contact-contents .office dl:nth-of-type(2) dd,
.contact-contents .office dl:nth-of-type(3) dd{height: 3rem;}
.contact-contents .office dt{font-size: 1.8rem; line-height: 2.4rem;}
.contact-contents .office dd{font-size: 2.3rem;}
.contact-contents .contact{display: flex; flex-direction: column; width: 82rem;}
.contact-contents .footer{margin-top: auto;}

.contact-contents .slider{margin-top:8rem; width: 100%; position: relative; overflow: hidden;}
.contact-contents .slider .swiper-slide{}
.contact-contents .slider .swiper-slide img{width: 100%;}
.contact-contents .slider .swiper-pagination.swiper-pagination-fraction{ bottom: 0; left: auto; right: 0; background: rgba(0, 0, 0, 0.10); height: 4.3rem; padding: 0 1.5rem; font-size: 1.8rem; display: inline-flex; align-items: center; justify-content: center; width: auto; font-weight:100; justify-content: center; width:7.5rem;}
.contact-contents .slider .swiper-pagination.swiper-pagination-fraction span{text-align: right; padding: 0 0.5rem;}
.contact-contents .slider .swiper-button-next:after,.contact-contents .slider .swiper-button-prev:after{display: none;}
.contact-contents .slider .swiper-button-prev{left: 0; width: 50%; top: 0; height: 100%; margin: 0;}
.contact-contents .slider .swiper-button-next{right: 0;  width: 50%; top: 0; height: 100%; margin: 0;}

@media (max-width: 768px) {
  #wrapper.contact-secton .contents{display: flex; flex-grow:1; align-items:flex-start;}
  .contact-contents{display: flex; flex-direction: column; justify-content:flex-start; width: 100%; font-weight: 400; margin-top: 0rem;   padding:0rem;  height: -webkit-fill-available;}
  .contact-contents .office {width: 100%; row-gap: 4.8rem;}
  .contact-contents .office dl{display: flex; flex-direction: column; width:100%; row-gap: 0.8rem;}
  .contact-contents .office dt{font-size: 1.6rem; line-height:100%;}
  .contact-contents .office dd{font-size: 2.2rem;}
  .contact-contents .office dl:nth-of-type(1) dd{font-size: 2rem;}
  .contact-contents .office dl:nth-of-type(1) dd em{font-size: 1.9rem;}
  .contact-contents .office dl:nth-of-type(2) dd,
  .contact-contents .office dl:nth-of-type(3) dd{height:2.8rem; text-decoration: none !important;}
  
  .contact-contents .contact{display: flex; flex-direction: column; width: 82rem;}
  .contact-contents .footer{margin-top: auto;}
  
}
/* about */
.about-con > *{opacity: 0;}
.about-slogan{padding: 12rem 0 12rem 0; width:142.5rem }
.about-slogan .en{display: flex; font-size: 6.0rem; line-height:normal; align-items: flex-end;}
.about-slogan .kor{margin-top: 4rem; font-size: 2.0rem; line-height: 3rem;}
.about-introduce{display: flex; justify-content: space-between; padding-bottom: 12rem;}
.about-introduce h2{width: 85rem; font-size: 2.2rem; line-height: 2.82rem;}
.about-introduce dl{width: 85rem; display: flex; flex-direction: column; row-gap: 4rem;}
.about-introduce dl dt{font-size: 2.2rem; line-height: 2.82rem;}
.about-introduce dl dd{font-size: 2.0rem; line-height: 3rem; overflow-wrap: break-word}
.about-image{display: flex; flex-wrap: wrap; width: 100%; flex-direction: column; padding-bottom: 24rem; }
.about-image img{width: 100%;}
.about-image p{padding-bottom: 24rem;}
.about-image .download{display: flex; justify-content: space-between;}
.about-image .download a{font-size: 1.8rem; margin-top: 2rem; display:inline-flex; align-items: center; height: 2.3rem; width: auto;}
.about-image .download a::before{content: ""; display: flex; background: url(../img/ico-link.svg) no-repeat 0 center; background-size: 2.6rem auto; width: 2.6rem; height:1.3rem ; margin-right: 0.8rem;}
.about-image .download li:nth-of-type(1){width:45.6rem;}
.about-image .download li:nth-of-type(2){width:85rem;}
.about-scope{padding-bottom: 24rem;}
.about-scope h3{font-size: 3.6rem; padding-bottom: 8rem;}
.about-scope .scope-list{display: flex; justify-content: space-between;}
.about-scope .scope-list dl{width: 85rem; font-weight: 400;}
.about-scope .scope-list dl dt{font-size: 2.2rem; margin-left: 0.1rem; margin-bottom: 4rem;}
.about-scope .scope-list dl dd{font-size: 4.8rem; line-height: 6.4rem; }
.about-winner h3{font-size: 3.6rem; padding-bottom: 8rem;}
.winner-block { font-size: 2.2rem; display: flex; justify-content: space-between; padding-bottom: 36rem;}
.winner-block dl{width: 45.5rem; display: flex; flex-direction: column; row-gap: 2rem;}
.winner-block img{width: 10rem;}
.winner-block dt{display: flex; flex-direction: column; row-gap: 2rem; margin-bottom: 1rem; font-size: 2.2rem;}
.winner-block dd{font-size: 1.8rem; line-height: 2.5rem;}
.winner-block .cate{display: flex; flex-direction: column; row-gap: 12rem;}
.about-slider {padding-top: 24rem; display: none;}
.about-slider .work-type .swiper-pagination{background: none;}
.about-slider .slider .work-slider .swiper-slide{max-width: 81.2rem; margin-right: 56.8rem;}
.about-slider .slider .work-slider .swiper-button-next {
  margin-left: 48rem;
}

@media (max-width: 768px) {
  .about-slogan {display: flex; flex-direction: column; justify-content:center; padding-top: 0rem; padding-bottom: 12rem; width: 100%;}
  .about-slogan .en{display: flex; height:auto; font-size: 4.4rem; line-height: 5.4rem; padding-top: 9.2rem; align-items: flex-end; font-weight: 400; letter-spacing: -0.1rem;}
  .about-slogan .en br{display: none;}
  .about-slogan .kor{margin-top: 3.2rem; margin-right: 2.4rem; padding: 0rem 0 0rem 0; font-size: 1.8rem; line-height: 2.6rem; word-break: keep-all;}
  .about-introduce{display: flex; flex-direction: column; justify-content: space-between; padding: 0rem 0 6rem 0;}
  .about-introduce h2{width:100%; font-size: 2.2rem; line-height:normal;}
  .about-introduce dl{width:100%; display: flex; flex-direction: column; row-gap: 2.4rem; margin-top: 4rem;}
  .about-introduce dl dt{font-size:2.2rem; line-height: normal;}
  .about-introduce dl dd{font-size: 1.8rem; line-height: 2.6rem; word-break: keep-all;}
  .about-image{display: flex; flex-wrap: wrap; width: 100%; flex-direction: column; padding-bottom: 12rem;}
  .about-image img{width: 100%;}
  .about-image p{display: none;}
  .about-image .download{display: flex; justify-content: space-between; row-gap: 0.8rem; flex-direction: column;}
  .about-image .download a{font-size: 1.6rem; margin-top: 1.2rem; display: flex; align-items: center ;}
  .about-image .download a::before{content: ""; display: flex; background: url(../img/ico-link.svg) no-repeat 0 center; background-size: 2.6rem auto; width: 2.6rem; height:1.3rem ; margin-right: 0.8rem;}
  .about-image .download li:nth-of-type(1){width:100%;}
  .about-image .download li:nth-of-type(2){width:100%;}
  .about-scope{padding-bottom: 12rem;}
  .about-scope h3{font-size: 2.2rem; padding: 0; margin-bottom: 4rem;}
  .about-scope .scope-list{display: flex; flex-direction: column; justify-content: space-between; padding-top: 0rem; row-gap: 4rem;}
  .about-scope .scope-list dl{width:100%;}
  .about-scope .scope-list dl dt{font-size: 1.6rem; margin-bottom:2.4rem;}
  .about-scope .scope-list dl dd{font-size: 2.8rem; line-height:3.8rem;}
  .about-winner h3{font-size: 2.2rem; padding-bottom: 4rem; padding-top: 0rem;}
  .winner-block { font-size: 2.4rem; display: flex; justify-content: space-between; padding-bottom: 12rem; flex-direction:row; flex-wrap: wrap;}

  .winner-block dl{width: 15.4rem; display: flex; flex-direction: column; row-gap: 1.6rem;}
  .winner-block img{width: 8rem;}
  .winner-block dt{display: flex; flex-direction: column; row-gap: 1.6rem; font-size:1.8rem; line-height: 2.2rem; margin-bottom: 0.8rem;}
  .winner-block dd{font-size: 1.6rem; line-height: 2.2rem;}
  .winner-block .cate{display: flex; flex-direction: column; row-gap: 12rem;}
  .winner-block .cate:last-of-type{display: flex; flex-direction:row; justify-content: space-between; width: 100%;}
  .winner-block .cate:last-of-type dl:last-of-type{margin-top: 12rem;}
  .about-slider {padding-top: 24rem; display: none;}
  .about-slider .work-type .swiper-pagination{background: none;}
  .about-slider .slider .work-slider .swiper-slide{max-width: 81.2rem; margin-right: 56.8rem;}
  .about-slider .slider .work-slider .swiper-button-next {
    background: url(../img/ico-arrow-w.svg) no-repeat; background-size: 2.2rem auto; margin-left: 48rem;
  }
}

.modal-video-body{max-width: none; padding: 0 1.2rem;}
.modal-video-movie-wrap{}
.modal-video-movie-wrap iframe{}



#header nav.main-navigation.index ul li a{opacity: 1;}

.indexSwiper{ width: 100%; height: 100%; display: flex; overflow: hidden;}
.indexSwiper .swiper-wrapper{ width: 100%; height: 100%; display: flex;}
.indexSwiper .swiper-slide{ width: 100%; height: 100%; display: flex;  align-items: center; justify-content: center; overflow: hidden; position: relative;}
.indexSwiper .swiper-slide video,.indexSwiper .swiper-slide img{object-fit: cover; position: relative; z-index: 1; height: 100%;}
.indexSwiper .swiper-slide img{width: 100%;}
.indexSwiper .swiper-slide a{position: absolute;  bottom:1.2rem; left: 50%; z-index: 10; margin-left: 9rem; font-size: 1.6rem;}
.indexSwiper .swiper-slide a dt{width: fit-content; height: 2.2rem; line-height: 2.2rem;}
.indexSwiper .swiper-slide a dd{width: fit-content;height: 2.2rem; line-height: 2.2rem;}
/* .indexSwiper .swiper-slide dl{position: absolute; z-index: 0; opacity: 0; pointer-events: none;} */
.index-contents .swiper-pagination {position: static; width: auto; bottom: auto; font-size: 1.6rem;}
.index-contents .swiper-pagination-fraction, .swiper-pagination-total {}

.index-contents .bottom-ui{position: absolute; bottom: 0rem; width: 100%; left: 0; padding: 1.2rem 1rem; z-index: 10; font-size: 1.6rem; display: flex; justify-content: space-between; pointer-events: none; gap: 20rem; align-items: flex-end; }
.index-contents .bottom-ui > div{width: 85rem; display: flex; align-items: flex-end;}
.index-contents .bottom-ui > div.bottom{gap: 2.4rem;}
.index-contents .bottom-ui > div.bottom a{display: flex;}
.index-contents .bottom-ui h2{width: 42rem; display: flex;}
.index-contents .bottom-ui dl{display: flex; flex-direction: column; flex-grow: 1;}
.index-contents .bottom-ui dl dt{height: 2.0rem; line-height: 2.0rem; width: fit-content;}
.index-contents .bottom-ui dl dd{height: 2.0rem; line-height: 2.0rem; width: fit-content;}
.index-contents .bottom-ui p.navigation{display: flex; margin-left: auto; align-items: center; gap: 0.8rem;}
.index-contents .bottom-ui p.navigation span{display: flex; width: 1.6rem; height: 1px; background-color: #000;}
.index-contents .bottom-ui p.navigation button{display: flex; font-size: 1.6rem; height: 2.0rem; color: #000;  pointer-events: all;}
.index-contents .bottom-ui p.navigation button:nth-of-type(1){width: 6.7rem;}
.index-contents .bottom-ui p.navigation button:nth-of-type(2){width: 3.7rem;}

#wrapper .main-navigation h1 path{fill:#fff !important;}
#wrapper.white-ui .main-navigation h1 path{fill:#fff;}
#wrapper.white-ui .main-navigation ul a{color: #fff;}
#wrapper.white-ui .index-contents .bottom-ui *{color: #fff;}
#wrapper.white-ui .index-contents .bottom-ui .navigation span{background-color: #fff;}
.swiper-slide.white-ui > a{color: #fff;}

#header nav.main-navigation.index ul li a{}
#header nav.main-navigation.index ul li a span{transition: none;}

@media (max-width: 768px) {
  .index-contents .bottom-ui{padding: 0.8rem 0.8rem 1.2rem 0.8rem; font-size: 1.5rem; display: flex; justify-content: space-between; flex-direction: column; row-gap: 0.8rem; bottom: 0; position: absolute;}
  .index-contents .bottom-ui > div{width:auto; display: flex; align-items: flex-end;}
  .index-contents .bottom-ui > div.top{justify-content: flex-end;}
  .index-contents .bottom-ui > div.bottom{gap: 0.8rem; margin-top: 0rem; position: relative; height: 4.4rem; display: flex; align-items: flex-end;}
  .index-contents .bottom-ui > div.bottom a{flex-grow: 1; position: absolute; left: 0; bottom:-1rem}
  .index-contents .bottom-ui h2{display: none;}
  .index-contents .bottom-ui dl{display: flex; flex-direction: column; flex-grow: 1;}
  .index-contents .bottom-ui dl dt{line-height:normal; display: flex;}
  .index-contents .bottom-ui dl dd{line-height:normal; display: flex;}
  .index-contents .bottom-ui p.navigation{gap: 0.4rem; line-height: 100%;}
  .index-contents .swiper-pagination{font-size: 1.6rem;}
  .index-contents .bottom-ui p.navigation button{font-size: 1.5rem; height: 2rem; line-height: 2rem;}
  .indexSwiper .swiper-slide a{position: absolute;  bottom:1.2rem; left: 0; z-index: 10; margin-left:0.8rem; font-size: 1.6rem; }
  .index-contents .bottom-ui p.navigation button:nth-of-type(1){width: 6.2rem;}
  .index-contents .bottom-ui p.navigation button:nth-of-type(2){width: 3.5rem;}
}

/* body.main #wrapper{height: 100vh; min-height: 0; overflow: hidden; display: flex; flex-direction: column;} */

/* body.contact{height: 100vh; min-height: 0; overflow: hidden; display: flex;} */



.nav-navigation{position: fixed; left: 0; bottom: 0; z-index: 101; background-color: #fff; width: 100%; display: flex; padding: 0.8rem 1rem 1.6rem 1rem ; gap: 1rem; align-items:center; height: 4.4rem; }
.nav-navigation li{font-size: 1.8rem; width: 33.333%; display: flex; gap: 0.6rem;}
/* .nav-navigation li:first-of-type a{opacity: 1 !important;} */
.nav-navigation li a{line-height: 2.4rem; opacity: 0.4; display: flex; align-items: center;}
.nav-navigation li a span{display: flex;}
.nav-navigation li a em{display: inline-flex;  width: fit-content; height: fit-content; white-space: nowrap; overflow: hidden;}
.nav-navigation li a.active{opacity: 1;}
.nav-navigation li:last-of-type{text-align: right; justify-content: flex-end;}
.nav-navigation.disabled li a{pointer-events: none;}
@media (max-width: 768px) {
  
  body.main #wrapper{max-height: 100dvh;}
  body.contact #wrapper{max-height: 100dvh;}
  .nav-navigation{padding:0.8rem 0.8rem 1.6rem 0.8rem; gap: 0.8rem; height: 4.4rem;}
  .nav-navigation li{font-size: 1.6rem; width: 25%; display: flex;}
  .nav-navigation li:last-of-type{margin-left: auto; justify-content: flex-end;}
  /* .work-list dl.thumb dt a{transition:all 0.01s linear;} */
}

body.fixed{overflow: hidden;}