@font-face {
    font-family: 'din1451alt';
	src: url('../font/din1451alt.G.ttf');
	src: url('../font/din1451alt.ttf');
}
body{
    margin: 0;
    padding: 0;
    background-color: #000;
    font-family: 'din1451alt';
}
body.fixed {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
}
p{
    margin: 0;
    color: #fff;
}
h1{
    font-size: 40px;
    color: #fff;
}
img{
    width: 100%;
    height: auto;
}
.nise{
    color: #fff;
}
/* Pop up
================================================== */
.modal{
    /* display: none; */
    /* height: 100vh;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 5; */
}
.modal__bg{
    background: rgba(0,0,0,0.8);
    height: 100vh;
    position: absolute;
    width: 100%;
}
.modal__content{
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100vh;
    background-color: #000;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}
.popup-matter{
    width: 295px;
    margin: 100px auto 0 auto;
}
.popup-sam{
    width: 295px;
    height: 165px;
    margin: 7px auto 0 auto;
}
.credit{
    width: 32px;
    height: 26px;
}
.modal-back{
    text-align: center;
    margin-top: 72px;
    /* margin-bottom: 92px; */
    margin-bottom: 140px;
}
.demo {
    width: 295px;
    margin: 20px auto 0 auto;
  }
  .demo__body{
      text-align: center;
  }
  .role0,.role1{
    font-size: 18px;
    font-weight: 600;
  }
  .role0{
      padding-top: 20px;
  }
  .role1{
      margin-top: 24px;
  }
  .name,.name1{
    margin-top: 8px;
    font-size: 16px;
    font-weight: 200;
  }
  .name1{
      margin-bottom: 35px;
  }
  .demo__link {
    position: relative;
  }
  .demo__text {
    text-align: center;
    border-bottom: 1px solid #fff;
    text-decoration: none;
    transition: all .2s ease 0s;
    font-size: 18px;
    padding-bottom: 21px;
  }
/* Photo_SP
================================================== */
.photo-works,.photo-works1,.photo-works2{
    width: 315px;
    height: 315px;
    margin-left: auto;
    margin-right: auto;
}
.popup-photo{
    width: 315px;
    height: 315px;
    margin: 7px auto 0 auto;
}

/* Movie_SP
================================================== */
.title{
    margin: 28px 0 0 28px;
}
.bg-video-wrap,.bg-video-wrap1,.bg-video-wrap2 {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 423px;
  }
.bg-video-wrap,.photo-works,.web-works {
    margin-top: 64px;
}
.bg-video-wrap1,.photo-works1,.web-works1 {
    margin-top: 250px;
}
.bg-video-wrap2,.photo-works2,.web-works2 {
    margin-top: 250px;
    margin-bottom: 170px;
}
  video {
    position: absolute;
    width: auto;
    height: 100%;
    top: 0%;
    left: 50%;
    -webkit-transform: translate3d(-50%, 0, 1px);
    transform: translate3d(-50%, 0, 1px);

  }
  .overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-image: linear-gradient(45deg, rgba(0,0,0,.3) 50%, rgba(0,0,0,.7) 50%);
    background-size: 4px 4px;
    -webkit-transform: translate3d(0, 0, 1px);
	transform: translate3d(0, 0, 1px);
  }
  .sam{
    width: 295px;
    height: 165px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
  }
  .matter{
    position: absolute;
    top: 75%;
    margin-left: 40px;
  }
  .font-day{
      font-size: 18px;
  }
  .font-client{
      font-size: 16px;
  }
  .font-title{
      font-size: 40px;
  }
/* Web_SP
================================================== */



/* Photo_PC
================================================== */



/* Movie_PC
================================================== */



/* Web_PC
================================================== */