@import url('https://fonts.googleapis.com/css?family=Frank+Ruhl+Libre:400,500');

/*************************************************************
                            STICKY 매뉴바 (메인매뉴)
*************************************************************/
[class*=uk-position-bottom],[class*=uk-position-center],[class*=uk-position-left],[class*=uk-position-right],[class*=uk-position-top] {
    position: absolute!important
}

.uk-position-top {
    top: 0;
    left: 0;
    right: 0
}

.uk-sticky-fixed {
    z-index: 980;
    box-sizing: border-box;
    margin: 0!important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.uk-sticky[class*=uk-animation-] {
    -webkit-animation-duration: .2s;
    animation-duration: .2s
}

.uk-sticky.uk-animation-reverse {
    -webkit-animation-duration: .2s;
    animation-duration: .2s
}


.uk-navbar {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    position: relative
}



.uk-navbar-center,.uk-navbar-center-left>*,.uk-navbar-center-right>*,.uk-navbar-left,.uk-navbar-right {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center
}


[class*=uk-navbar-center-] .uk-navbar-item,[class*=uk-navbar-center-] .uk-navbar-nav>li>a,[class*=uk-navbar-center-] .uk-navbar-toggle {
    white-space: nowrap
}

.uk-navbar-nav {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none
}


.uk-navbar-item,.uk-navbar-nav>li>a,.uk-navbar-toggle {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    box-sizing: border-box;
    height: 80px;
    padding: 0 15px;
    font-size: .875rem;
    text-decoration: none
}

.uk-navbar-nav>li>a {
    color: #000000;
    font-size:13px;
  font-weight:400;
  letter-spacing:1px;
    text-transform: uppercase;
    -webkit-transition: .1s ease-in-out;
    transition: .1s ease-in-out;
    -webkit-transition-property: color,background-color;
    transition-property: color,background-color
}


nav .logo {
	display:none;
}

nav.uk-active .logo {
	display:block;
}

nav .logo2 {
	display:block;
}

nav.uk-active .logo2 {
	display:none;
}



nav {
  background-color:rgba(255, 87, 34, 0);
  transition: background-color ease 250ms;
}

nav .uk-navbar-item,
nav .uk-navbar-nav > li > a,
nav .uk-navbar-toggle {
  transition: height ease 500ms;
}
nav.uk-active {
  background-color: rgb(255, 87, 34);
  color:rgb(0, 0, 0);
}

nav.uk-active .uk-navbar-item,
nav.uk-active .uk-navbar-nav > li > a,
nav.uk-active .uk-navbar-toggle {
  height: 60px;
  color:rgb(255, 255, 255);
  font-weight:400;
}


nav {
	transition: background-color ease 250ms;
	.uk-navbar-item,
	.uk-navbar-nav > li > a,
	.uk-navbar-toggle {
		transition: height ease 500ms;
	}
	&.uk-active {
		background-color: #FF5722;
		.uk-navbar-item,
		.uk-navbar-nav > li > a,
		.uk-navbar-toggle {
			color: rgb(0, 0, 0);
			height: 60px;
		}
	}		
}


nav .uk-navbar-nav > li > a:hover {
  color: rgb(230, 246, 69);
  transition: color ease 500ms;
}


/*************************************************************
                            STICKY 매뉴바 (드롭매뉴)
*************************************************************/

.menu {
   
}
.menu:after {
  content: " ";
  display: block;
  clear: both;
}
.menu .menu-item {
  position: relative;
  float: left;
}
.menu .menu-item:hover > .sub-menu {
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}
.menu .menu-item:hover > a {
  background-color: rgba(255, 87, 34, 0.5);
}
.menu .menu-item a {
  transition: .3s ease;
}

.sub-menu {
  overflow:hidden;
  list-style: none;
  position: absolute;
  padding:20px 20px 20px 0px;
  margin-top:0px;
  margin-left:-10px;
  margin-right:0px;
  margin-bottom:0px;
  top: 100%;
  left:10px;
  width:150px;
  font-size:13px;
  font-weight:300;
  line-height:26px;
  background-color: rgba(255, 87, 34, 0.7);
  transition: .5s ease;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-transform: scale(0);
          transform: scale(0);
  opacity: 0;
}
.sub-menu .menu-item {
  float: none;
  transition: .3s ease;
  -webkit-transform: translateY(-20px);
          transform: translateY(-20px);
  opacity: 0;
}
.sub-menu .menu-item a {
  text-decoration:none;
  white-space: nowrap;
  color: rgb(255, 255, 255);
  padding: 5px 20px;
  background-color: rgba(205, 220, 57, 0);
}

.sub-menu .menu-item:hover a {
  position: relative;
  padding-right:120px;
  background-color: rgb(205, 220, 57);
  transition: 1s ease;
}


.sub-menu .sub-menu {
    overflow:none;
  left: 100%;
  top: 0;
}


/* Static Delay with CSS */
.css-transform .menu-item:hover > .sub-menu > .menu-item {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}
.css-transform .sub-menu .menu-item:nth-child(1) {
  transition-delay: 100ms;
}
.css-transform .sub-menu .menu-item:nth-child(2) {
  transition-delay: 150ms;
}
.css-transform .sub-menu .menu-item:nth-child(3) {
  transition-delay: 200ms;
}
.css-transform .sub-menu .menu-item:nth-child(4) {
  transition-delay: 250ms;
}
.css-transform .sub-menu .menu-item:nth-child(5) {
  transition-delay: 300ms;
}
.css-transform .sub-menu .menu-item:nth-child(6) {
  transition-delay: 350ms;
}
.css-transform .sub-menu .menu-item:nth-child(7) {
  transition-delay: 400ms;
}
.css-transform .sub-menu .menu-item:nth-child(8) {
  transition-delay: 450ms;
}
.css-transform .sub-menu .menu-item:nth-child(9) {
  transition-delay: 500ms;
}
.css-transform .sub-menu .menu-item:nth-child(10) {
  transition-delay: 550ms;
}


/*************************************************************
                            STICKY 매뉴바 (모바일)
*************************************************************/



#navigator{

	width: 250px;
	height:100%;
	position: fixed;
	top: 0;
	left: -250px;
	background: rgba(255, 87, 34, 0.8);
	float: left;
	z-index: 9000;
}

p.menu-text {
	font-size:14px;
	font-weight:500;
	margin-left: 20px;
	margin-top:20px;
}


#nav{
	width: 250px;
	height: auto;
	display: block;
	margin: 0 ;
	padding: 0;
}
.nav_tab{
	width: 250px;
	height: 50px;
	display: block;
}

.nav_tab a {
	text-decoration:none;
}

.nav_tab a p{
	color: rgba(255,255,255,0.8);
	font-size: 13px;
	padding: 15px 0;
	text-align: center;
	transition:0.35s ease;
	-webkit-transition:0.35s ease;
	-moz-transition:0.35s ease;
}
.nav_tab a p:hover{
	background: rgba(255,255,255,0.9);
	color: rgba(0,0,0,1);	
	letter-spacing: 2px;
	transition:0.35s ease;
	-webkit-transition:0.35s ease;
	-moz-transition:0.35s ease;
	}
.menu-icon{
	background-color:rgb(255, 87, 34);
	width: 50px;
	height: 45px;
	position: fixed;
	padding-top:5px;
	top: 0;
	left: 0px;
	margin: 10px 10px 10px 10px;
	z-index: 9990;
	cursor:pointer;
}
.menu-text {
	width: 50px;
	height: 35px;
	font-size: 30px; 
	color:#FF9800;
	display: block;
	position: fixed;
	top: 0;
	left: 50px;
	margin: 10px;
	z-index: 9;
}

.menu-icon div {
  cursor:pointer;
  width: 30px;
  height: 3px;
  background: #ffffff;
  margin: 7px 7px 7px 9px ;
  transition: all 0.35s;
  border-radius: 2px;
}
.on .line_one {transform: rotate(45deg) translate(7px, 7px);}
.on .line_two {opacity: 0;}
.on .line_three {transform: rotate(-45deg) translate(7px, -7px);}






/*************************************************************
                            STICKY 매뉴바 끝
*************************************************************/
@media only screen and (min-width:992px) {
   div.menu-icon,
   p.menu-text {
    display:none;
  }


}



@media only screen and (max-width:991.99px) {
   .uk-navbar {
    display:none;
  }

  .mnav-9  {
      height:45px;
    }

    .mnav-3 .logo img {
		max-width: inherit;
		max-height: 90px;
		width: 100px;
	}

}

@media (max-width: 575.99px) {
}

@media (max-width: 767.99px) and (min-width: 576px) {
}

@media (max-width: 991.99px) and (min-width: 768px) {

  .mnav-9  {
      position: relative;
      -ms-flex: 0 0 750%;
      flex: 0 0 75%;
      max-width: 75%;
    }

    .uk-navbar-right {
    margin-left: auto;
    justify-content: flex-end;
    }

    .mnav-3  {
      position: relative;
      -ms-flex: 0 0 250%;
      flex: 0 0 25%;
      max-width: 25%;
    }

    .mnav-3 .logo {
		position: relative;
		padding: 0;
		top: 22%;
		-webkit-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	.mnav-3 .logo img {
		max-width: inherit;
		max-height: 90px;
		width: 100px;
	}

	.mnav-3 .logo2 {
		position: relative;
		padding: 0;
		top: 12%;
		-webkit-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);
	}

	.mnav-3 .logo2 img {
		max-width: inherit;
		max-height: 90px;
		width: 100px;
	}


    .uk-navbar-nav a {
    width:150px;
    }

}

@media (max-width: 1199.99px) and (min-width: 992px) {
  .mnav-9  {
      position: relative;
      -ms-flex: 0 0 750%;
      flex: 0 0 75%;
      max-width: 75%;
    }

    .uk-navbar-right {
    margin-left: auto;
    justify-content: flex-end;
    }

    .mnav-3  {
      position: relative;
      -ms-flex: 0 0 250%;
      flex: 0 0 25%;
      max-width: 25%;
    }

    .mnav-3 .logo {
		position: relative;
		padding: 0;
		top: 12%;
		-webkit-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);
	}

	.mnav-3 .logo img {
		max-width: inherit;
		max-height: 90px;
		width: 100px;
	}
    
    .mnav-3 .logo2 {
		position: relative;
		padding: 0;
		top: 12%;
		-webkit-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);
	}

	.mnav-3 .logo2 img {
		max-width: inherit;
		max-height: 90px;
		width: 100px;
	}

    .uk-navbar-nav a {
    width:150px;
    }

}

@media (min-width: 1200px) {
    .mnav-9  {
      position: relative;
      -ms-flex: 0 0 750%;
      flex: 0 0 75%;
      max-width: 75%;
    }

    .uk-navbar-right {
    margin-left: auto;
    justify-content: flex-end;
    }

    .mnav-3  {
      position: relative;
      -ms-flex: 0 0 250%;
      flex: 0 0 25%;
      max-width: 25%;
    }

    .mnav-3 .logo {
		position: relative;
		padding: 0;
		top: 12%;
		-webkit-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);
	}


	.mnav-3 .logo img {
		max-width: inherit;
		max-height: 90px;
		width: 100px;
	}

    .mnav-3 .logo2 {
		position: relative;
		padding: 0;
		top: 12%;
		-webkit-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);
	}

	.mnav-3 .logo2 img {
		max-width: inherit;
		max-height: 90px;
		width: 100px;
	}

    .uk-navbar-nav a {
    width:150px;
    }


}