/* ======================================
  cssname Fullscreen Menu 
========================================*/

.fullscreen-menu {width:100%; margin:0 auto; text-align: center;  position:relative; }
.fullscreen-menu h1 {font-weight:300!important; font-family:'S-Core';}

.fullscreen-menu__logo {width:100%; display:block; padding:100px 0 0 0; margin: 0 auto; position:relative;}
.fullscreen-menu__logo img {width:90px;  margin-top:2rem;} 
.fullscreen-menu__title {width: 100%; font-weight:300; color:#eee; font-size:36px; padding:20px 0 50px 0; margin: 0 auto; font-family:'S-Core'; }

/* Social icons */
.social-icons {width:100%; display:flex; justify-content:center; align-items:center; padding:5rem 0; clear:both;}
.social-icons .sicons {display:block; padding:10px ; width:60px; height:60px; line-height:40px; border-radius:100%; background:#333; border:0; color:#fff; margin:.5rem; cursor:pointer}
.social-icons .sicons a {color:#fff;}
.social-icons .sicons:hover {background:#225bee; color:#fff;}
.social-icons .sicons:a {color:#fff;}

/* NAVIGATION */
full-depth {width: 100%; margin: 0 auto; padding: 50px 0; }

/* By Dominik Biedebach @domobch */
full-depth ul {list-style: none; display:block; width: 80%; margin:0 auto; text-align: center;}
full-depth ul li {float:left; display:inline-block;  margin:0 auto; width:16.66%; }
full-depth ul li a {
  display:block; 
  padding:10px 60px; 
  text-align:center; 
  text-decoration:none;  
  font-size:1rem; 
  font-family:'S-Core';
  color:#00a1fd;
  font-weight:700; 
  text-transform: uppercase;
  margin: 0 auto;
}
full-depth ul li a,
full-depth ul li a:after,
full-depth ul li a:before {transition: all .5s;}
full-depth ul li a:hover {color: #fff;}

full-depth ul li ul {width:100%; margin:0 auto; list-style: none; text-align: center; padding-top:1rem; }
full-depth ul li ul li {float:none; width:100%; margin:0 auto; text-align:center; display:inline-block; }
full-depth ul li ul li a {display: block; padding:10px 10px; line-height:1.2; font-size:0.825rem; text-decoration: none; color:#fff; font-weight: 400; font-family:'Noto Sans KR'; text-transform: uppercase; margin: 0 10px;}
full-depth ul li ul li a,
full-depth ul li ul li a:after,
full-depth ul li ul li a:before {transition: all .5s;}
full-depth ul li ul li a:hover {color: #bbcffb;}


@media (max-width: 1680px){
 .fullscreen-menu__title {font-size:30px; }
 full-depth {width:80%; }
 full-depth ul {width: 90%;}
 full-depth ul li a{font-size:1.1rem!important; padding:10px 30px;}
 full-depth ul li ul li a {font-size:.925rem!important;}
}


@media (max-width: 1100px){
.fullscreen-menu__logo {width:100%; display:block; padding:80px 0 0 0; margin: 0 auto; position:relative;}
.fullscreen-menu__logo img {width:90px;  margin-top:2rem;} 
.fullscreen-menu__title {font-size:26px; }

 full-depth {width:100%; }
 full-depth ul {width: 90%;}
 full-depth ul li a{font-size:.965rem!important; padding:10px 20px;}
 full-depth ul li ul li a {font-size:.86rem!important;}
}

@media (max-width:992px) {
.fullscreen-menu {display:none}

}


/* stroke */
full-depth.stroke ul li a,
full-depth.fill ul li a {position: relative;}
full-depth.stroke ul li a:after,
full-depth.fill ul li a:after {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 0%;
  content: '.';
  color: transparent;
  background: #7596e1;
  height: 1px;
}
full-depth.stroke ul li a:hover:after {width: 100%;}
full-depth.fill ul li a {transition: all 2s;}


full-depth.fill ul li a:after {text-align: left; content: '.'; margin: 0; opacity: 0;}
full-depth.fill ul li a:hover {color: #fff; z-index: 1;}
full-depth.fill ul li a:hover:after {
  z-index: -10;
  animation: fill 1s forwards;
  -webkit-animation: fill 1s forwards;
  -moz-animation: fill 1s forwards;
  opacity: 1;
}

/* Circle */
full-depth.circle ul li a {position: relative; overflow: hidden; z-index: 1;}
full-depth.circle ul li a:after {
  display: block;
  position: absolute;
  margin: 0;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: '.';
  color: transparent;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  background: transparent;
}
full-depth.circle ul li a:hover:after { -webkit-animation: circle 1.5s ease-in forwards;}

/* SHIFT */
full-depth.shift ul li a {position:relative; z-index: 1;}
full-depth.shift ul li a:hover {color: #91640F;}
full-depth.shift ul li a:after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 1px;
  content: '.';
  color: transparent;
  background: #F1C40F;
  visibility: none;
  opacity: 0;
  z-index: -1;
}
full-depth.shift ul li a:hover:after {opacity: 1; visibility: visible; height: 100%;}


/* Blend */
full-depth.blend ul li a {position: relative; border-radius: 5px; overflow: hidden; z-index: 1;}
full-depth.blend ul li a:hover {color: #fff;}
full-depth.blend ul li a:before,
full-depth.blend ul li a:after {
  position: absolute;
  width: 0px;
  height: 100%;
  top: 0;
  bottom: 0;
  background: #D35400;
  transition: all .5s;
  margin: auto;
  content: '.';
  color: transparent;
  z-index: -1;
  opacity: 0.75;
}
full-depth.blend ul li a:before {left: 0;}
full-depth.blend ul li a:after {right: 0;}

full-depth.blend ul li a:hover:after,
full-depth.blend ul li a:hover:before {width: 100%;}

/* DROWN */
full-depth.drown ul li a { position: relative; overflow: hidden; z-index: 1;}
full-depth.drown ul li a:hover {color: #fff;}
full-depth.drown ul li a:before {
  background: #fff;
  content: '.';
  color: transparent;
  position: absolute;
  width: 500%;
  top: 100px;
  right: 300px;
  height: 300px;
  z-index: -1;
}
full-depth.drown ul li a:hover:before {left: auto; bottom: auto; right: -50%; top: 0; background: #89C52B;}



/* Keyframes */
@-webkit-keyframes fill {
  0% {
    width: 0%;
    height: 1px;
  }
  50% {
    width: 100%;
    height: 1px;
  }
  100% {
    width: 100%;
    height: 100%;
    background: #2ECC71;
  }
}

/* Keyframes */
@-webkit-keyframes circle {
  0% {
    width: 1px;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    height: 1px;
    z-index: -1;
    background: #eee;
    border-radius: 100%;
  }
  100% {
    background: #aaa;
    height: 5000%;
    width: 5000%;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 0;
  }
}

