@import url(https://fonts.googleapis.com/css?family=Poiret+One);
@media all and (max-width:1199px) {
.button {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10000;
  color: white;
  padding: 10px;
  font-size: 30px;
  cursor: pointer;
}
.button .fa {
  transition: color 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition-delay: .75s;
}
body {
background-color:#fffbf1;
  position: relative;
  -webkit-transform: translateX(0);
          transform: translateX(0);
  transition: -webkit-transform 800ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: transform 800ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: transform 800ms cubic-bezier(0.68, -0.55, 0.265, 1.55), -webkit-transform 800ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.menu {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width:65%;
  padding-left: 0;
  -webkit-transform: translateX(-150%);
          transform: translateX(-150%);
  transition: -webkit-transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55), -webkit-transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition-delay: .2s;
}

.menu .mlogo {
    width: 130px;
    height: 40px;
    float: right;
    position: relative;
    display: inline-block;
    text-align: center;
    overflow: hidden;
	    background: url(/_public/images/common/btn.svg) right top / contain no-repeat;}
.menu .mlogo a
{
    font-weight: 600;
    font-size: 1.059rem;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 35%;
    transition: .3s ease-in-out;
    -webkit-transition: .3s ease-in-out;
    -moz-transition: .3s ease-in-out;
	}
.content {
  position: absolute;
  margin: 0 auto;
  padding: 30px 20%;
  font-size: 18px;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  transition: color 1s ease 1s, background 0.5s ease 1s, -webkit-transform 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.5s;
  transition: color 1s ease 1s, background 0.5s ease 1s, transform 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.5s;
  transition: color 1s ease 1s, background 0.5s ease 1s, transform 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.5s, -webkit-transform 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.5s;
}
.menu nav {width:88%;margin:0 auto;padding:2rem 0}
.menu .nav .depth1 {width:100%;display:block;clear:both;font-size:1.471rem;font-style:normal;color:#333;}

.menu nav .navsub {width:100%;margin:1rem auto 2rem;display:inline-block;}
.menu nav .navsub li {width:50%;float:left;font-size:0.882rem;margin-bottom:0.7rem}
.menu nav .navsub li a {color:#333;}
.menu > a {width:100%;}
.home_is_visible .home, .aboutus_is_visible .aboutus, .clients_is_visible .clients, .contactus_is_visible .contactus {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
.home_is_visible .home, .aboutus_is_visible .aboutus, .clients_is_visible .clients, .contactus_is_visible .contactus {
  z-index: 5000;
}
.home_is_visible .home {
  color: white;
}

/* 버튼 스타일 */ 

.hamburgler {
  width: 30px;
  height: 30px;
  display: block;
  transition: .3s ease all;
}
.hamburgler.no-hamburgler {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.bun,
.meat {
  display: block;
  width: 100%;
  background: #fff;
  height: 10%;
  transition: .3s ease all;
  border-radius: 50px;
}

.no-hamburgler .top {
  height: 42%;
    width: 10%;
    margin-left: 44%;
  border-radius: 50px 50px 0 0;
}

.no-hamburgler .bottom {
     height: 42%;
    width: 10%;
    margin-left: 44%;
  border-radius: 0 0 50px 50px;
}

.meat {
  margin: 20% 0;
}
.no-hamburgler .meat {
  margin: 2% 0;
}

.home_is_visible .button .fa {
  color: white;
}

/*
.home_is_visible a {
  color: #333;
}
*/
.aboutus_is_visible .aboutus {
  color: black;
  background: salmon;
}
.aboutus_is_visible .button .fa {
  color: black;
}
.aboutus_is_visible a {
  color: black;
}

.clients_is_visible .clients {
  color: white;
  background: darkgoldenrod;
}
.clients_is_visible .button .fa {
  color: white;
}
.clients_is_visible a {
  color: white;
}

.contactus_is_visible .contactus {
  color: black;
  background: sandybrown;
}
.contactus_is_visible .button .fa {
  color: black;
}
.contactus_is_visible a {
  color: black;
}

body.nav_is_visible {
  -webkit-transform: translateX(65%);
          transform: translateX(65%);
}
body.nav_is_visible .menu {
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}
}