/*-------------popover menu-------------*/



#menu{
visibility: hidden;
position: fixed;
top: 0; left: 0; bottom: 0; right: 0;
background-color: rgba(0, 11, 35, 0);
-webkit-transition: visibility 0s linear 0.8s, background-color 0.2s 0.8s;
transition: visibility 0s linear 0.8s, background-color 0.2s 0.8s;

}
#menu.fadeIn{
  z-index: 1000;
  visibility: visible;
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
  background-color: rgba(27, 28, 33, 0.9);
}

#h2c_logo{
position: absolute;
top: 93px;
left: 141px;
width: 35px;
height: 38.888px;
opacity: 0;
-webkit-transition: 0.5s 0.6s;
transition: 0.5s 0.6s
}
#h2c_logo.fadeIn{
  -webkit-transition: opacity 0.5s 0.2s;
  transition: opacity 0.5s 0.2s;
  opacity: 1;
}

#removeButton{
position: absolute;
top: 93px;
right: 95px;
width: 20px;
height: 19.898px;
}
#removeButton:hover{
  opacity: 0.4;
  cursor: pointer;
}

.menu_icon{
  width: 25px;
  height: 21px;
  position: fixed;
  top:93px;
  right:95px;
  z-index: 1;
}
.menu_icon:hover{
  opacity: 0.4;
}



.menu_list{

font-family: 'Champagne-Limousines';

list-style: none;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-60%, -50%);
        -ms-transform: translate(-60%, -50%);
        transform: translate(-60%, -50%);
text-align: center;
opacity: 0;
-webkit-transition: 0.6s 0.5s;
transition: 0.6s 0.5s;
}
.menu_list.fadeIn{
  -webkit-transition: opacity 0.5s 0.4s;
  transition: opacity 0.5s 0.4s;
  opacity: 1;
}
.menu_list li{
margin-top: 50px;
}
.menu_list a:hover{
  color: #A38814;
}
.menu_list li:first-child{
margin-top: 0;
-webkit-transition: opacity 0.1s ;
transition: opacity 0.1s ;
}
.menu_list a{
/*font-size: 24px;*/
font-size: 16pt;
text-decoration: none;
color: #BABABA;
}

.menu_icon .fadeOut{
  opacity: 0;
  visibility: hidden;
}
.menu_icon{
  visibility: hidden;

}
.menu_icon .fadeIn {
  visibility: visible;
  opacity: 1
}

.menu_icon:hover{
  cursor: pointer;
}

.snsLink{
position: absolute;
bottom: 62.43px;
left: 141px;
margin: 0;
padding: 0;
opacity: 0;
-webkit-transition: 0.6s;
transition: 0.6s;
}
.snsLink.fadeIn{
  opacity: 1;
  -webkit-transition: opacity 0.5s 0.6s;
  transition: opacity 0.5s 0.6s;
}
.snsLink li{
display: inline-block;
margin-right: 23px;
}

.copyright{
position: absolute;
right: 137.55px;
bottom: 62.43px;
opacity: 0;
-webkit-transition: 0.6s;
transition: 0.6s;
}
.copyright.fadeIn{
  opacity: 1;
  -webkit-transition: opacity 0.5s 0.6s;
  transition: opacity 0.5s 0.6s;
}

@media screen and (max-width: 768px) {
  #menu{
  -webkit-transition: visibility 0s linear , background-color 0.2s ;
  transition: visibility 0s linear , background-color 0.2s ;
  }
  #menu.fadeIn{
    -webkit-transition: background-color 0.2s;
    transition: background-color 0.2s;
  }

  #h2c_logo{
  position: absolute;
  top: 30px;
  left: 20px;

  }

  #removeButton{
    width: 20px;
    height: auto;
    top:30px;
    right:20px;
  }

  .menu_icon{
    width: 20px;
    top:30px;
    right:20px;
  }


  .menu_list{


  list-style: none;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-60%, -50%);
          -ms-transform: translate(-60%, -50%);
          transform: translate(-60%, -50%);
  text-align: center;
  opacity: 0;
  -webkit-transition: 0.2s ;
  transition: 0.2s ;
  }
  .menu_list.fadeIn{
    -webkit-transition: opacity 0.2s ;
    transition: opacity 0.2s;
    opacity: 1;
  }





  .menu_list{
    top: 45%;
  }
  .menu_list a{
  font-size: 18px;
  }
  .menu_list li{
  margin-top: 40px;
  }

  .copyright{
    bottom: 5%;
    right:50%;
    width:60%;
    -webkit-transform: translate(50%, 0);
            -ms-transform: translate(50%, 0);
            transform: translate(50%, 0);
            -webkit-transition: 0.2s;
            transition: 0.2s;
  }
  .copyright.fadeIn{
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
  }

  .snsLink li:last-child{
    margin-right: 0;
  }
  .snsLink li{

    margin-right: 7vw;
  }
  .snsLink{
    text-align: center;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
            -ms-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
    width: 100%;
    bottom: 10%;
    -webkit-transition: 0.2s;
    transition: 0.2s;
  }
  .snsLink.fadeIn{
    opacity: 1;
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
  }
}