
.top{
  z-index: 999;
  position: fixed;
  margin-top:0px;
  left: 0px;
  top: 0px;
  z-index: 998;
  
      transition: all 0.35s ease 0ms;
  -webkit-transition: all 0.35s ease 0ms;
    -moz-transition: all 0.35s ease 0ms;
    -ms-transition: all 0.35s ease 0ms;
    -o-transition: all 0.35s ease 0ms;
background: rgba(244,244,244,0.0);

  width: 100%;
  height: 54px;
    box-sizing: border-box;
}

.top img{
  margin-left:60px;
  margin-top:16px;
  cursor: pointer;
  opacity: 0;
    transition: all 1s ease 1000ms;
  -webkit-transition: all 1s ease 1000ms;
    -moz-transition: all 1s ease 1000ms;
    -ms-transition: all 1s ease 1000ms;
    -o-transition: all 1s ease 1000ms;
}

.on_load .top img{
  opacity:1;
}

/*메뉴버튼*/

.btn-menu {
  position: fixed;
  margin-top:0px;
  right: 0;
  top: 0;
  z-index: 999;
  cursor: pointer;
    transition: all 1s ease 1000ms;
  -webkit-transition: all 1s ease 1000ms;
    -moz-transition: all 1s ease 1000ms;
    -ms-transition: all 1s ease 1000ms;
    -o-transition: all 1s ease 1000ms;

  opacity:0.0;
  
  /*
  -moz-transform: translate(0, -160px);
  -ms-transform: translate(0, -160px);
  -webkit-transform: translate(0, -160px);
  transform: translate(0, -160px);
  */
}

.on_load .btn-menu {
  opacity:1.0;
}


.btn-menu_i{
  position: relative;
  width: 70px;
  height: 70px;
  opacity:0.9;

  
  box-sizing: border-box;
  -moz-transition-property: all;
  -o-transition-property: all;
  -webkit-transition-property: all;
  transition-property: all;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  -webkit-transition-duration: 1s;
  transition-duration: 1s;
  -moz-transition-timing-function: ease;
  -o-transition-timing-function: ease;
  -webkit-transition-timing-function: ease;
  transition-timing-function: ease;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: 0 50%;
  -moz-transform-origin: 0 50%;
  -o-transform-origin: 0 50%;
  -ms-transform-origin: 0 50%;
  transform-origin: 0 50%;
}

.btn-menu_ii {
  position: relative;
  height: 70px;
  line-height: 70px;
  overflow: hidden;
  box-sizing: border-box;
  -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.btn-menu__line-1{
  position: absolute;
  left: 20px;
  top: 26px;
  height: 2px;
  width: 26px;
  background: #ff5b45;
  z-index: 10;
  -moz-transition-property: background,-moz-transform,opacity;
  -o-transition-property: background,-o-transform,opacity;
  -webkit-transition-property: background,-webkit-transform,opacity;
  transition-property: background,transform,opacity;
  
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  
  -moz-transition-timing-function: ease;
  -o-transition-timing-function: ease;
  -webkit-transition-timing-function: ease;
  transition-timing-function: ease;
  
  -webkit-transform-origin: 0 100%;
  -moz-transform-origin: 0 100%;
  -o-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  transform-origin: 0 100%;
}

.btn-menu__line-2{
  position: absolute;
  left: 20px;
  top: 30px;
  height: 2px;
  width: 26px;
  background: #ff5b45;
  z-index: 10;
  -moz-transition-property: background,-moz-transform,opacity;
  -o-transition-property: background,-o-transform,opacity;
  -webkit-transition-property: background,-webkit-transform,opacity;
  transition-property: background,transform,opacity;
  
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  
  -moz-transition-timing-function: ease;
  -o-transition-timing-function: ease;
  -webkit-transition-timing-function: ease;
  transition-timing-function: ease;
  
}

.btn-menu__line-3{
  position: absolute;
  left: 20px;
  top: 34px;
  height: 2px;
  width: 26px;
  background: #ff5b45;
  z-index: 10;
  -moz-transition-property: background,-moz-transform,opacity;
  -o-transition-property: background,-o-transform,opacity;
  -webkit-transition-property: background,-webkit-transform,opacity;
  transition-property: background,transform,opacity;
  
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;

  
  
  -moz-transition-timing-function: ease;
  -o-transition-timing-function: ease;
  -webkit-transition-timing-function: ease;
  transition-timing-function: ease;
  
  -webkit-transform-origin: 0 100%;
  -moz-transform-origin: 0 100%;
  -o-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  transform-origin: 0 100%;
}

.menu-open .btn-menu__line-1, .menu-open .btn-menu__line-2, .menu-open .btn-menu__line-3 {
	background: #fff;
}


/* menu_open */

.menu-open .btn-menu .btn-menu__line-1 {
  -moz-transform: rotate(45deg) translate(0, -6px);
  -ms-transform: rotate(45deg) translate(0, -6px);
  -webkit-transform: rotate(45deg) translate(0, -6px);
  transform: rotate(45deg) translate(0, -6px);
}

.menu-open .btn-menu .btn-menu__line-2 {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
}

.menu-open .btn-menu .btn-menu__line-3 {
  -moz-transform: rotate(-45deg) translate(0, 8px);
  -ms-transform: rotate(-45deg) translate(0, 8px);
  -webkit-transform: rotate(-45deg) translate(0, 8px);
  transform: rotate(-45deg) translate(0, 8px);
}

/* menu_hover */
.no-touch .btn-menu_ii:hover .btn-menu__line-1,.no-touch  .btn-menu_ii:hover .btn-menu__line-2,.no-touch  .btn-menu_ii:hover .btn-menu__line-3 {
  background: #4d4d4d;

}


/* menu-open menu_hover */
.no-touch .menu-open .btn-menu_ii:hover ,.no-touch .menu-open .btn-menu_ii:hover ,.no-touch .menu-open .btn-menu_ii:hover{
 
}


.white_menu{
z-index: 998;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;

  -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    
    background-color: rgba(255, 91, 69, 0.95);
    text-align: center;
    
   -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;


      -webkit-transition: all 400ms cubic-bezier(0.7, 0, 0.3, 1) 0ms;
    -moz-transition: all 400ms cubic-bezier(0.7, 0, 0.3, 1) 0ms;
    transition: all 400ms cubic-bezier(0.7, 0, 0.3, 1) 0ms;
    width:100%;

    -webkit-transform: translateX(130%);
    -moz-transform: translateX(130%);
    -ms-transform: translateX(130%);
    -o-transform: translateX(130%);
    transform: translateX(130%);



}

.menu-open .white_menu{
  -webkit-transform: translateX(0%) !important;
    -moz-transform: translateX(0%) !important;
    -ms-transform: translateX(0%) !important;
    -o-transform: translateX(0%) !important;
    transform: translateX(0%) !important;

} 

@-webkit-keyframes width_cut{
  0%{
    width:100%;
  }
  100%{
    width:0%;
  }
}

@keyframes width_cut{
  0%{
    width:100%;
  }
  100%{
    width:0%;
  }
}

/* menu */

.menu{
z-index: 998;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;

	overflow: auto;
    overflow-x: hidden;
    overflow-y: hidden;

	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    
    background-color: rgba(90,198,166,0.0);
    text-align: center;
    

	 -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;


    -webkit-transition-property: transform, visibility, opacity;
    -webkit-transition-duration: 500ms;
    -moz-transition-property: transform, visibility, opacity;
    -moz-transition-duration: 500ms;
    -ms-transition-property: transform, visibility, opacity;
    -ms-transition-duration: 500ms;
    -o-transition-property: transform, visibility, opacity;
    -o-transition-duration: 500ms;
    transition-property: transform, visibility, opacity;
    transition-duration: 500ms;
	 -moz-transition-timing-function: cubic-bezier(.49, .43, 0, 1);
    -o-transition-timing-function: cubic-bezier(.49, .43, 0, 1);
	-ms-transition-timing-function: cubic-bezier(.49, .43, 0, 1);
    -webkit-transition-timing-function: cubic-bezier(.49, .43, 0, 1);
    transition-timing-function: cubic-bezier(.49, .43, 0, 1);

        -webkit-transition-delay: 50ms;
    -moz-transition-delay: 50ms;
    -ms-transition-delay: 50ms;
    -o-transition-delay: 50ms;
    transition-delay: 50ms;





    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;



    visibility: hidden;
}

.menu-open .menu {
	overflow:auto;
	overflow-x:hidden;
	overflow-y:auto;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
    visibility: visible;
}


.menu .menu_content .block {
    display: block;
    max-width: 100%;
    margin: 0 auto;

    text-align: left;
    padding-left:10vw;

    -webkit-transform: translateX(10%);
    -moz-transform: translateX(10%);
    -ms-transform: translateX(10%);
    -o-transform: translateX(10%);
    transform: translateX(10%);

    
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
    -webkit-transition-property: transform, opacity;
    -webkit-transition-duration: 500ms;
    -moz-transition-property: transform, opacity;
    -moz-transition-duration: 500ms;
    -ms-transition-property: transform, opacity;
    -ms-transition-duration: 500ms;
    -o-transition-property: transform, opacity;
    -o-transition-duration: 500ms;
    transition-property: transform, opacity;
    transition-duration: 500ms;
	 -moz-transition-timing-function: cubic-bezier(.49, .43, 0, 1);
    -o-transition-timing-function: cubic-bezier(.49, .43, 0, 1);
	-ms-transition-timing-function: cubic-bezier(.49, .43, 0, 1);
    -webkit-transition-timing-function: cubic-bezier(.49, .43, 0, 1);
    transition-timing-function: cubic-bezier(.49, .43, 0, 1);
    -webkit-transition-delay: 800ms;
    -moz-transition-delay: 800ms;
    -ms-transition-delay: 800ms;
    -o-transition-delay: 800ms;
    transition-delay: 800ms;
}

.menu_content{
  padding-top: 3rem;
  padding-bottom:100px;
}

.row .block {
    width: 100%;
	padding: 20px 0px;
    display: inline-block;
    vertical-align: top;
    margin-bottom: -.26em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
.menu .menu_content .block h1{
  display:inline-block;
  margin: 0px !important;
}

.menu .menu_content .block h1 span{
  font-family: "Nanum Gothic", sans-serif;
  color: white;
  display:inline-block;
   font-weight: 800;
    font-size: 68px;
  cursor:pointer;
}

.menu .menu_content .block h1 span:after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    margin:0 auto;
  background-color: #fff;
    -webkit-transform: scale(0,1);
    -moz-transform: scale(0,1);
    -o-transform: scale(0,1);
    transform: scale(0,1);
    transform-origin: left center;
    -webkit-transform-origin: left center;
    -webkit-transition: all .15s ease-out;
    -moz-transition: all .15s ease-out;
    -ms-transition: all .15s ease-out;
    -o-transition: all .15s ease-out;
    transition: all .15s ease-out;
}

.menu .menu_content .block h1 span.active:after {
    -webkit-transform: scale(1,1);
    -moz-transform: scale(1,1);
    -o-transform: scale(1,1);
    transform: scale(1,1);
}

.no-touch .menu .menu_content .block h1:hover span::after{
    -webkit-transform: scale(1,1);
    -moz-transform: scale(1,1);
    -o-transform: scale(1,1);
    transform: scale(1,1);
}

/*브라우저 크기가 1600px 이하일때 */
@media only screen and (max-width: 1600px){
  .top img{
    margin-left:50px;
    margin-top:10px;
  }

  .btn-menu__line-1{
    left: 22px;
    top: 22px;
  }

  .btn-menu__line-2{
    left: 22px;
    top: 26px;
  }

  .btn-menu__line-3{
    left: 22px;
    top: 30px;
  }

}


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

  .scroll .top{
   
    width: 100%;
    height: 54px;
    background: rgba(244,244,244,1.0);
    border-bottom: 1px solid #d2d6d5;
  }

  .top img{
    margin-left:22px;
    margin-top:12px;
  }

  .btn-menu_i{
   height: 54px;
  }

  .btn-menu_ii {
    height:54px;
  }

  .btn-menu__line-1{
    background: #ff5b45;
    left: 20px;
    top: 22px;
  }
  .btn-menu__line-2{
    background: #ff5b45;
    left: 20px;
    top: 26px;
  }
  .btn-menu__line-3{
    background: #ff5b45;
    left: 20px;
    top: 30px;
  }

  .white_menu{
    background: rgba(255, 91, 69, 0.95);
  }


}

@media only screen and (max-width: 640px){
	.menu .menu_content .block h1 span{
		font-size: 50px;
	}

 

}

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

  .menu .menu_content .block h1 span{

      font-size: 38px;
  }
}

.menu-open .menu .menu_content .block {
    -webkit-transition-property: transform, opacity;
    -webkit-transition-duration: 500ms;
    -moz-transition-property: transform, opacity;
    -moz-transition-duration: 500ms;
    -ms-transition-property: transform, opacity;
    -ms-transition-duration: 500ms;
    -o-transition-property: transform, opacity;
    -o-transition-duration: 500ms;
    transition-property: transform, opacity;
    transition-duration: 500ms;
	 -moz-transition-timing-function: cubic-bezier(.49, .43, 0, 1);
    -o-transition-timing-function: cubic-bezier(.49, .43, 0, 1);
	-ms-transition-timing-function: cubic-bezier(.49, .43, 0, 1);
    -webkit-transition-timing-function: cubic-bezier(.49, .43, 0, 1);
    transition-timing-function: cubic-bezier(.49, .43, 0, 1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
}






.menu-open.bd{
	overflow:hidden !important;
}