@import url('font.css');

.noise{
    z-index: 100;
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 100vh;

    pointer-events: none;
    opacity: 0.1;
}

body{
  margin: 0;
  padding:0;
  font-family: 'Matter', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: white;
}

p{
  letter-spacing: -0.02rem;
}

a{color: black;}
a:link {text-decoration: none; color: black;}
a:visited {text-decoration: none;color: black;}
a:hover {text-decoration: none; color: black;}
a:active {text-decoration: none;color: black;}


.nav a{color: white;}
.nav a:link {text-decoration: none; color: white;}
.nav a:visited {text-decoration: none;color: white;}
.nav a:hover {text-decoration: none; color: white;}
.nav a:active {text-decoration: none;color: white;}

::selection {
  background: white;
}


.box{
  width: 95%;
  margin-left: auto;
  margin-right: auto;
}

.nav{
  font-size: 15px;
  line-height: 18px;
  letter-spacing: -0.02rem;
  top: 15px;
  position: fixed;
  z-index: 100 !important;
  mix-blend-mode: difference;
  color: white;
}

.nav2{
  font-size: 15px;
  line-height: 18px;
  letter-spacing: -0.02rem;
  top: 15px;
  position: fixed;
  z-index: 100 !important;
}

.nav-info{
  text-align: right;
  float: right;
  position: fixed;
  right: 2.5%;
}


.nav-info:hover{
  text-decoration: underline;
  cursor: pointer;
}

.info{
  index: 100 !important;
  box-sizing: border-box;
  position: fixed;
  width: 30.78%;
  right: 2.5%;
  top: 60px;
  background: #FFFFFF;
  border: 1px solid #000000;
  display: none;
}

.info-bio{
  index: 100 !important;
  padding:30px;
}

.name-d{
  width: 100%;
  padding-top: 120px;
  padding-bottom: 0px;
  display: block;
}

.name-d img{
  width: 100%;
  display: block;
}

.name-underline{
  margin-top: 50px;
  border-bottom: solid rgba(0, 0, 0) 1px;
}

.title{
  float: left;
  font-size: 15px;
  line-height: 18px;
  letter-spacing: -0.02rem;
  margin-bottom: 3px;
}

.category{
  font-size: 12px;
  color: #979797;
  letter-spacing: -0.02rem;
}

.year{
  float: right;
  font-size: 15px;
  line-height: 18px;
  letter-spacing: -0.02rem;
  text-align: right;
}

.grid-m{
  display: none;
}

.grid{
  margin-left: auto;
  margin-right: auto;
  display: grid;
  width: 100%;
  grid-column-gap: 0em;
  grid-row-gap: 0px;
  grid-template-columns: [col] 1fr [col] 0.5fr [col] 1fr [col] 0.5fr [col] 1fr [col] 0.5fr [col] 1fr [col] 0.5fr [col] 1fr [col] 0.5fr [col] 1fr;
  grid-template-rows: [row] auto [row] auto [row] ;
}

.grid img{
  width: 100%;
}

.grid video{
  width: 100%;
  clip-path: inset(1px 1px);
}

.grid-m{
  display: none;
}

.work1{
  padding-top: 50px;
  position: inherit;
  width: 100%;
  margin-top: 0px;
  grid-column: col 1 / span 5  ;
  grid-row: row;
  padding-bottom: 50px;
}


.rule_vertical1{
  position: inherit;
  height: 100%;
  margin-top: 0px;
  grid-column: col 6 / span 1  ;
  grid-row: row;
  background: linear-gradient(#000, #000) no-repeat center/1px 100%;
}

.work2{
  padding-top: 50px;
  position: inherit;
  width: 100%;
  margin-top: 0px;
  grid-column: col 7 / span 5  ;
  grid-row: row;
}

.rule_horizontal1{
  grid-column: col 1 / span 12  ;
  grid-row: row 2;
  border-bottom: solid rgba(0, 0, 0) 1px;
}


.work3{
  padding-top: 50px;
  position: inherit;
  width: 100%;
  margin-top: 0px;
  grid-column: col 1 / span 3  ;
  grid-row: row 3;
  padding-bottom: 50px;
}

.rule_vertical2{
  position: inherit;
  height: 100%;
  margin-top: 0px;
  grid-column: col 4 / span 1  ;
  grid-row: row 3;
  background: linear-gradient(#000, #000) no-repeat center/1px 100%;
}

.work4{
  padding-top: 50px;
  position: inherit;
  width: 100%;
  margin-top: 0px;
  grid-column: col 5 / span 3  ;
  grid-row: row 3;
}


.rule_vertical3{
  position: inherit;
  height: 100%;
  margin-top: 0px;
  grid-column: col 8 / span 1  ;
  grid-row: row 3;
  background: linear-gradient(#000, #000) no-repeat center/1px 100%;
}


.work5{
  padding-top: 50px;
  position: inherit;
  width: 100%;
  margin-top: 0px;
  grid-column: col 9 / span 3  ;
  grid-row: row 3;
  padding-bottom: 50px;
}




.rule_horizontal2{
  grid-column: col 1 / span 12  ;
  grid-row: row 4;
  border-bottom: solid rgba(0, 0, 0) 1px;
}


.work6{
  padding-top: 50px;
  position: inherit;
  width: 100%;
  margin-top: 0px;
  grid-column: col 1 / span 5  ;
  grid-row: row 5;
  padding-bottom: 50px;
}

.rule_vertical4{
  position: inherit;
  height: 100%;
  margin-top: 0px;
  grid-column: col 6 / span 1  ;
  grid-row: row 5;
  background: linear-gradient(#000, #000) no-repeat center/1px 100%;
}


.work7{
  padding-top: 50px;
  position: inherit;
  width: 100%;
  margin-top: 0px;
  grid-column: col 7 / span 5  ;
  grid-row: row 5;
  padding-bottom: 50px;
}

.rule_horizontal3{
  grid-column: col 1 / span 12  ;
  grid-row: row 6;
  border-bottom: solid rgba(0, 0, 0) 1px;
}


.work8{
  padding-top: 50px;
  position: inherit;
  width: 100%;
  margin-top: 0px;
  grid-column: col 1 / span 3  ;
  grid-row: row 7;
  padding-bottom: 50px;
}

.rule_vertical5{
  position: inherit;
  height: 100%;
  margin-top: 0px;
  grid-column: col 4 / span 1  ;
  grid-row: row 7;
  background: linear-gradient(#000, #000) no-repeat center/1px 100%;
}

.work9{
  padding-top: 50px;
  position: inherit;
  width: 100%;
  margin-top: 0px;
  grid-column: col 5 / span 3  ;
  grid-row: row 7;
  padding-bottom: 50px;
}

.rule_vertical6{
  display: block;
  position: inherit;
  height: 100%;
  margin-top: 0px;
  grid-column: col 8 / span 1  ;
  grid-row: row 7;
  background: linear-gradient(#000, #000) no-repeat center/1px 100%;
}

.work10{
  padding-top: 50px;
  position: inherit;
  width: 100%;
  margin-top: 0px;
  grid-column: col 9 / span 3  ;
  grid-row: row 7;
  padding-bottom: 50px;
}


.rule_horizontal4{
  grid-column: col 1 / span 12  ;
  grid-row: row 8;
  border-bottom: solid rgba(0, 0, 0) 1px;
}

.work11{
  padding-top: 50px;
  position: inherit;
  width: 100%;
  margin-top: 0px;
  grid-column: col 1 / span 3  ;
  grid-row: row 9;
  padding-bottom: 50px;
}

.rule_vertical7{
  display: block;
  position: inherit;
  height: 100%;
  margin-top: 0px;
  grid-column: col 4 / span 1  ;
  grid-row: row 9;
  background: linear-gradient(#000, #000) no-repeat center/1px 100%;
}


.work12{
  padding-top: 50px;
  position: inherit;
  width: 100%;
  margin-top: 0px;
  grid-column: col 5 / span 3  ;
  grid-row: row 9;
  padding-bottom: 50px;
}

.rule_vertical8{
  display: block;
  position: inherit;
  height: 100%;
  margin-top: 0px;
  grid-column: col 8 / span 1  ;
  grid-row: row 9;
  background: linear-gradient(#000, #000) no-repeat center/1px 100%;
}

.work13{
  padding-top: 50px;
  position: inherit;
  width: 100%;
  margin-top: 0px;
  grid-column: col 9 / span 3  ;
  grid-row: row 9;
  padding-bottom: 50px;
}

.rule_horizontal5{
  grid-column: col 1 / span 12  ;
  grid-row: row 10;
  border-bottom: solid rgba(0, 0, 0) 1px;
}


.work14{
  padding-top: 50px;
  position: inherit;
  width: 100%;
  margin-top: 0px;
  grid-column: col 1 / span 3  ;
  grid-row: row 11;
  padding-bottom: 50px;
}

.rule_vertical9{
  display: block;
  position: inherit;
  height: 100%;
  margin-top: 0px;
  grid-column: col 4 / span 1  ;
  grid-row: row 11;
  background: linear-gradient(#000, #000) no-repeat center/1px 100%;
}


.work15{
  padding-top: 50px;
  position: inherit;
  width: 100%;
  margin-top: 0px;
  grid-column: col 5 / span 3  ;
  grid-row: row 11;
  padding-bottom: 50px;
}

.rule_vertical10{
  display: block;
  position: inherit;
  height: 100%;
  margin-top: 0px;
  grid-column: col 8 / span 1  ;
  grid-row: row 11;
  background: linear-gradient(#000, #000) no-repeat center/1px 100%;
}

.work16{
  margin-left: -15px;
  position: inherit;
  width: 100%;
  margin-top: 0px;
  grid-column: col 9 / span 3  ;
  grid-row: row 11;
  text-align: center;
  align-items: center;
  display: grid;
  align-items: center;
}


.emoji{
  margin-top: -20px;
  font-size: 25px;
}

.big{
  margin-top: -20px;
}

.small{
  font-size: 15px;
  margin-top: -10px;
}


.rule_horizontal6{
  grid-column: col 1 / span 12  ;
  grid-row: row 12;
  border-bottom: solid rgba(0, 0, 0) 1px;
}


.rule_horizontal7{ display: none;}
.rule_horizontal8{ display: none;}
.rule_horizontal9{ display: none;}
.rule_horizontal10{ display: none;}
.rule_horizontal11{ display: none;}
.rule_horizontal12{ display: none;}
.rule_horizontal13{ display: none;}
.rule_horizontal14{ display: none;}
.rule_horizontal15{ display: none;}
.rule_horizontal16{ display: none;}



.footer{
  margin-top: 15px;
  font-size: 15px;
  line-height: 18px;
  letter-spacing: -0.02rem;
  margin-bottom: 50px;
}


@media screen and (max-width: 1120px){

  .grid-m{
    display: none;
  }

  .info{
    index: 100 !important;
    box-sizing: border-box;
    position: fixed;
    width: 47.54%;
    right: 2.5%;
    top: 60px;
    background: #FFFFFF;
    border: 1px solid #000000;
    display: none;
  }

  .info-bio{
    index: 100 !important;
    padding:30px;
  }



  .work1{
  padding-top: 50px;
  position: inherit;
  width: 100%;
  margin-top: 0px;
  grid-column: col 1 / span 5  ;
  grid-row: row;
  padding-bottom: 50px;
}


.rule_vertical1{
  position: inherit;
  height: 100%;
  margin-top: 0px;
  grid-column: col 6 / span 1  ;
  grid-row: row;
  background: linear-gradient(#000, #000) no-repeat center/1px 100%;
}

.work2{
  padding-top: 50px;
  position: inherit;
  width: 100%;
  margin-top: 0px;
  grid-column: col 7 / span 5  ;
  grid-row: row;
}

.rule_horizontal1{
  grid-column: col 1 / span 12  ;
  grid-row: row 2;
  border-bottom: solid rgba(0, 0, 0) 1px;
}


.work3{
  padding-top: 50px;
  position: inherit;
  width: 100%;
  margin-top: 0px;
  grid-column: col 1 / span 5  ;
  grid-row: row 3;
  padding-bottom: 50px;
}

.rule_vertical2{
  position: inherit;
  height: 100%;
  margin-top: 0px;
  grid-column: col 6 / span 1  ;
  grid-row: row 3;
  background: linear-gradient(#000, #000) no-repeat center/1px 100%;
}

.work4{
  padding-top: 50px;
  position: inherit;
  width: 100%;
  margin-top: 0px;
  grid-column: col 7 / span 5  ;
  grid-row: row 3;
}

.rule_horizontal2{
  grid-column: col 1 / span 12  ;
  grid-row: row 4;
  border-bottom: solid rgba(0, 0, 0) 1px;
}



.work5{
  padding-top: 50px;
  position: inherit;
  width: 100%;
  margin-top: 0px;
  grid-column: col 1 / span 5  ;
  grid-row: row 5;
  padding-bottom: 50px;
}

.rule_vertical3{
  position: inherit;
  height: 100%;
  margin-top: 0px;
  grid-column: col 6 / span 1  ;
  grid-row: row 5;
  background: linear-gradient(#000, #000) no-repeat center/1px 100%;
}

.work6{
  padding-top: 50px;
  position: inherit;
  width: 100%;
  margin-top: 0px;
  grid-column: col 7 / span 5  ;
  grid-row: row 5;
}

.rule_horizontal3{
  grid-column: col 1 / span 12  ;
  grid-row: row 6;
  border-bottom: solid rgba(0, 0, 0) 1px;
}


.work7{
  padding-top: 50px;
  position: inherit;
  width: 100%;
  margin-top: 0px;
  grid-column: col 1 / span 5  ;
  grid-row: row 7;
  padding-bottom: 50px;
}

.rule_vertical4{
  position: inherit;
  height: 100%;
  margin-top: 0px;
  grid-column: col 6 / span 1  ;
  grid-row: row 7;
  background: linear-gradient(#000, #000) no-repeat center/1px 100%;
}

.work8{
  padding-top: 50px;
  position: inherit;
  width: 100%;
  margin-top: 0px;
  grid-column: col 7 / span 5  ;
  grid-row: row 7;
}

.rule_horizontal4{
  grid-column: col 1 / span 12  ;
  grid-row: row 8;
  border-bottom: solid rgba(0, 0, 0) 1px;
}

.work9{
  padding-top: 50px;
  position: inherit;
  width: 100%;
  margin-top: 0px;
  grid-column: col 1 / span 5  ;
  grid-row: row 9;
  padding-bottom: 50px;
}

.rule_vertical5{
  position: inherit;
  height: 100%;
  margin-top: 0px;
  grid-column: col 6 / span 1  ;
  grid-row: row 9;
  background: linear-gradient(#000, #000) no-repeat center/1px 100%;
}

.work10{
  padding-top: 50px;
  position: inherit;
  width: 100%;
  margin-top: 0px;
  grid-column: col 7 / span 5  ;
  grid-row: row 9;
}

.rule_horizontal5{
  grid-column: col 1 / span 12  ;
  grid-row: row 10;
  border-bottom: solid rgba(0, 0, 0) 1px;
}


.work11{
  padding-top: 50px;
  position: inherit;
  width: 100%;
  margin-top: 0px;
  grid-column: col 1 / span 5  ;
  grid-row: row 11;
  padding-bottom: 50px;
}

.rule_vertical6{
  position: inherit;
  height: 100%;
  margin-top: 0px;
  grid-column: col 6 / span 1  ;
  grid-row: row 11;
  background: linear-gradient(#000, #000) no-repeat center/1px 100%;
}

.work12{
  padding-top: 50px;
  position: inherit;
  width: 100%;
  margin-top: 0px;
  grid-column: col 7 / span 5  ;
  grid-row: row 11;
}

.rule_horizontal6{
  grid-column: col 1 / span 12  ;
  grid-row: row 12;
  border-bottom: solid rgba(0, 0, 0) 1px;
}

.work13{
  padding-top: 50px;
  position: inherit;
  width: 100%;
  margin-top: 0px;
  grid-column: col 1 / span 5  ;
  grid-row: row 13;
  padding-bottom: 50px;
}

.rule_vertical7{
  position: inherit;
  height: 100%;
  margin-top: 0px;
  grid-column: col 6 / span 1  ;
  grid-row: row 13;
  background: linear-gradient(#000, #000) no-repeat center/1px 100%;
}

.work14{
  padding-top: 50px;
  position: inherit;
  width: 100%;
  margin-top: 0px;
  grid-column: col 7 / span 5  ;
  grid-row: row 13;
}

.rule_horizontal7{
  display: block;
  grid-column: col 1 / span 12  ;
  grid-row: row 14;
  border-bottom: solid rgba(0, 0, 0) 1px;
}

.work15{
  padding-top: 50px;
  position: inherit;
  width: 100%;
  margin-top: 0px;
  grid-column: col 1 / span 5  ;
  grid-row: row 15;
  padding-bottom: 50px;
}

.rule_vertical8{
  position: inherit;
  height: 100%;
  margin-top: 0px;
  grid-column: col 6 / span 1  ;
  grid-row: row 15;
  background: linear-gradient(#000, #000) no-repeat center/1px 100%;
}

.work16{
  padding-top: 50px;
  position: inherit;
  width: 100%;
  margin-top: 0px;
  grid-column: col 7 / span 5  ;
  grid-row: row 15;
  margin-left: -10px;
}

.rule_horizontal8{
  display: block;
  grid-column: col 1 / span 12  ;
  grid-row: row 16;
  border-bottom: solid rgba(0, 0, 0) 1px;
}

.emoji{
  margin-top: -70px;
  font-size: 25px;
}

.big{
  margin-top: -20px;
}

.small{
  font-size: 15px;
  margin-top: -10px;
}



.rule_horizontal9{ display: none;}
.rule_horizontal10{ display: none;}
.rule_horizontal11{ display: none;}
.rule_horizontal12{ display: none;}
.rule_horizontal13{ display: none;}
.rule_horizontal14{ display: none;}
.rule_horizontal15{ display: none;}
.rule_horizontal16{ display: none;}

.rule_vertical9{ display: none;}
.rule_vertical10{ display: none;}


}

@media screen and (max-width: 830px){

  .info{
    index: 100 !important;
    box-sizing: border-box;
    position: fixed;
    width: 95%;
    right: 2.5%;
    top: 60px;
    background: #FFFFFF;
    border: 1px solid #000000;
    display: none;
  }

  .info-bio{
    index: 100 !important;
    padding:30px;
  }

  .grid-m{
    display: none;
  }

  .work1{
    padding-top: 20px;
    position: inherit;
    width: 100%;
    margin-top: 0px;
    grid-column: col 1 / span 12  ;
    grid-row: row;
    padding-bottom: 20px;
  }

  .rule_horizontal2{
    display: block;
    grid-column: col 1 / span 12 ;
    grid-row: row 2;
    border-bottom: solid red) 1px;
  }

  .work2{
    padding-top: 20px;
    position: inherit;
    width: 100%;
    margin-top: 0px;
    grid-column: col 1 / span 12  ;
    grid-row: row 3;
  }

  .rule_horizontal3{

    padding-top: 20px;
    grid-column: col 1 / span 12 ;
    grid-row: row 4;
    border-bottom: solid rgba(0, 0, 0) 1px;
  }

  .work3{
    padding-top: 20px;
    position: inherit;
    width: 100%;
    margin-top: 0px;
    grid-column: col 1 / span 12  ;
    grid-row: row 5;
    padding-bottom: 20px;
  }

  .rule_horizontal4{
    display: block;
    grid-column: col 1 / span 12 ;
    grid-row: row 6;
    border-bottom: solid rgba(0, 0, 0) 1px;
  }

  .work4{
    padding-top: 20px;
    position: inherit;
    width: 100%;
    margin-top: 0px;
    grid-column: col 1 / span 12  ;
    grid-row: row 7;
    padding-bottom: 20px;
  }

  .rule_horizontal5{
    display: block;
    grid-column: col 1 / span 12 ;
    grid-row: row 8;
    border-bottom: solid rgba(0, 0, 0) 1px;
  }

  .work5{
    padding-top: 20px;
    position: inherit;
    width: 100%;
    margin-top: 0px;
    grid-column: col 1 / span 12  ;
    grid-row: row 9;
    padding-bottom: 20px;
  }

  .rule_horizontal6{
    display: block;
    grid-column: col 1 / span 12 ;
    grid-row: row 10;
    border-bottom: solid rgba(0, 0, 0) 1px;
  }

  .work6{
    padding-top: 20px;
    position: inherit;
    width: 100%;
    margin-top: 0px;
    grid-column: col 1 / span 12  ;
    grid-row: row 11;
    padding-bottom: 20px;
  }

  .rule_horizontal7{
    display: block;
    grid-column: col 1 / span 12 ;
    grid-row: row 12;
    border-bottom: solid rgba(0, 0, 0) 1px;
  }

  .work7{
    padding-top: 20px;
    position: inherit;
    width: 100%;
    margin-top: 0px;
    grid-column: col 1 / span 12  ;
    grid-row: row 13;
    padding-bottom: 20px;
  }

  .rule_horizontal8{
    display: block;
    grid-column: col 1 / span 12 ;
    grid-row: row 14;
    border-bottom: solid rgba(0, 0, 0) 1px;
  }


  .work8{
    padding-top: 20px;
    position: inherit;
    width: 100%;
    margin-top: 0px;
    grid-column: col 1 / span 12  ;
    grid-row: row 15;
    padding-bottom: 50px;
    }

    .rule_horizontal9{
      display: block;
      grid-column: col 1 / span 12 ;
      grid-row: row 16;
      border-bottom: solid rgba(0, 0, 0) 1px;
    }

  .work9{
    padding-top: 20px;
    position: inherit;
    width: 100%;
    margin-top: 0px;
    grid-column: col 1 / span 12  ;
    grid-row: row 17;
    padding-bottom: 50px;
    }

    .rule_horizontal10{
      display: block;
      grid-column: col 1 / span 12 ;
      grid-row: row 18;
      border-bottom: solid rgba(0, 0, 0) 1px;
    }

  .work10{
    padding-top: 20px;
    position: inherit;
    width: 100%;
    margin-top: 0px;
    grid-column: col 1 / span 12  ;
    grid-row: row 19;
    padding-bottom: 50px;
    }

  .rule_horizontal11{
    display: block;
    grid-column: col 1 / span 12 ;
    grid-row: row 20;
    border-bottom: solid rgba(0, 0, 0) 1px;
    }


  .work11{
  padding-top: 20px;
  position: inherit;
  width: 100%;
  margin-top: 0px;
  grid-column: col 1 / span 12  ;
  grid-row: row 21;
  padding-bottom: 50px;
  }

  .rule_horizontal12{
  display: block;
  grid-column: col 1 / span 12 ;
  grid-row: row 22;
  border-bottom: solid rgba(0, 0, 0) 1px;
  }

  .work12{
  padding-top: 20px;
  position: inherit;
  width: 100%;
  margin-top: 0px;
  grid-column: col 1 / span 12  ;
  grid-row: row 23;
  padding-bottom: 50px;
  }

  .rule_horizontal13{
  display: block;
  grid-column: col 1 / span 12 ;
  grid-row: row 24;
  border-bottom: solid rgba(0, 0, 0) 1px;
  }

.work13{
  padding-top: 20px;
  position: inherit;
  width: 100%;
  margin-top: 0px;
  grid-column: col 1 / span 12  ;
  grid-row: row 25;
  padding-bottom: 50px;
  }

  .rule_horizontal14{
  display: block;
  grid-column: col 1 / span 12 ;
  grid-row: row 26;
  border-bottom: solid rgba(0, 0, 0) 1px;
  }


.work14{
  padding-top: 20px;
  position: inherit;
  width: 100%;
  margin-top: 0px;
  grid-column: col 1 / span 12  ;
  grid-row: row 27;
  padding-bottom: 50px;
  }

  .rule_horizontal15{
  display: block;
  grid-column: col 1 / span 12 ;
  grid-row: row 28;
  border-bottom: solid rgba(0, 0, 0) 1px;
  }


.work15{
  padding-top: 20px;
  position: inherit;
  width: 100%;
  margin-top: 0px;
  grid-column: col 1 / span 12  ;
  grid-row: row 29;
  padding-bottom: 50px;
  }

  .rule_horizontal16{
  display: block;
  grid-column: col 1 / span 12 ;
  grid-row: row 30;
  border-bottom: solid rgba(0, 0, 0) 1px;
  }


.work16{
  display: none;

  }

  


  .rule_vertical1{display: none;}
  .rule_vertical2{display: none;}
  .rule_vertical3{display: none;}
  .rule_vertical4{display: none;}
  .rule_vertical5{display: none;}
  .rule_vertical6{display: none;}
  .rule_vertical7{display: none;}
  .rule_vertical8{display: none;}
  .rule_vertical9{display: none;}
  .rule_vertical10{display: none;}

  .name-d{
    width: 100%;
    padding-top: 90px;
    padding-bottom: 0px;
    display: block;
  }

  .name-underline {
    margin-top: 40px;
  }


}

@media screen and (max-width: 400px){

  .info{
    index: 100 !important;
    box-sizing: border-box;
    position: fixed;
    width: 95%;
    right: 2.5%;
    top: 60px;
    background: #FFFFFF;
    border: 1px solid #000000;
    display: none;
  }

  .info-bio{
    index: 100 !important;
    padding: 30px;
  }

  .grid{
    display: none;
  }

  .grid-m{
    display: grid;
  }

  .grid-m{
    margin-left: auto;
    margin-right: auto;
    display: grid;
    width: 100%;
    grid-column-gap: 0em;
    grid-row-gap: 0px;
    grid-template-columns: [col] 1fr [col] 0.5fr [col] 1fr [col] 0.5fr [col] 1fr [col] 0.5fr [col] 1fr [col] 0.5fr [col] 1fr [col] 0.5fr [col] 1fr;
    grid-template-rows: [row] auto [row] auto [row] ;
  }

  .grid-m img{
    width: 100%;
  }

  .grid-m video{
    width: 100%;
    clip-path: inset(1px 1px);
  }



  .rule_vertical1{display: none;}
  .rule_vertical2{display: none;}
  .rule_vertical3{display: none;}
  .rule_vertical4{display: none;}
  .rule_vertical5{display: none;}

  .name-d{
    width: 100%;
    padding-top: 90px;
    padding-bottom: 0px;
    display: block;
  }

  .name-underline {
    margin-top: 40px;
  }


}