@charset "UTF-8";
/* CSS Document */
ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

.overlay{
  content: "";
  display: block;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, .5);
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  opacity: 0;
  transition: opacity .5s;
}

.overlay.open{
  width: 100%;
  height: 200%;
  opacity: 1;
}

.menu-trigger{
  display: inline-block;
  width: 30px;
  height: 25px;
  vertical-align: middle;
  cursor: pointer;
  position: fixed;
  top: 48px;
  left: 30px;
  z-index: 100;
}

.menu-trigger.active{
  transform: translateX(-0px);
}

.menu-trigger span{
  display: inline-block;
  box-sizing: border-box;
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #1f263a;
  transition: all .8s;
}

.menu-trigger.active span{
  background-color: rgba(255, 255, 255, 1);
}

.menu-trigger span:nth-of-type(1){
  top: 0;
}

.menu-trigger.active span:nth-of-type(1){
  transform: translateY(14px) rotate(-45deg);
}

.menu-trigger span:nth-of-type(2){
  top: 12px;
}

.menu-trigger.active span:nth-of-type(2){
  opacity: 0;
}

.menu-trigger span:nth-of-type(3){
  bottom: 0;
}

.menu-trigger.active span:nth-of-type(3){
  transform: translateY(-10px) rotate(45deg);
}

.d_nav{
  width: 200px;
  height: 100%;
  padding-top: 100px;
  background-color: rgba(33, 52, 92, 0.8);
  position: fixed;
  top: 0;
  left: 0px;
  z-index: 20;
  transform: translate(-200px);
  transition: all .8s;
  font-size: 1em;
}

.d_nav.open{
  transform: translateZ(0);
}

.d_nav li{
  color: #FFFFFF;
  text-align: center;
  padding: 1.5vw 0;
}

.d_nav li a{
  color: #FFFFFF;
  text-decoration: none;
}

.d_nav li:hover{
  color: #FFFFFF;
  background-color: rgba(255, 255, 255, 0.5);
  transition: all .8s;
}

/*@media (max-width: 767px) {
  .menu-trigger {
    display: inline-block;
    width: 30px;
    height: 25px;
    vertical-align: middle;
    cursor: pointer;
    position: fixed;
    top: 25px;
    right: 30px;
    z-index: 100;
  }
}*/

/*-------------------smartphon Type CSS-------------------*/
/*@media screen and (min-width: 767px){
.menu-trigger{
	display: none;
}}*/