@charset "UTF-8";
body {height:100%; background-color:#111;   }
html {height:100%;  }

.wrap {min-height:100%; height:100%;  width:100%;  position:relative;   box-sizing:border-box; top:0;   }

img.logo {top:40px; position:absolute; z-index:9999999; margin-left:-75px} 

ul.side_nav {position:fixed; left:3%; top:250px; width:180px; z-index:999; }
ul.side_nav li {color:#fff; font-size:1.6rem; font-weight:700; height:50px; list-style:none;  transition: all 0.3s ease-out;   display:inline-block; width:100%; letter-spacing:0 }
ul.side_nav li a {color:#fff; text-decoration:none; transition: all 0.3s ease-out;
    top: 0;  display:inline-block; height:50px; position: relative;  }
ul.side_nav li a:hover {top:-5px; color:#B12121}
ul.side_nav li.over a {  color:#B12121 !important}

ul.side_nav li.s  {height:35px;  }
ul.side_nav li.s a {color:rgba(255,255,255,.5); font-size:1.2rem; font-weight:400; padding-left:20px; height:35px;   }
ul.side_nav li.ov a {color:#fff  }

ul.side_nav li.on a {color:#fff;   }

ul.side_nav li.current a {color:#fff  }
ul.side_nav li.current a {color:#fff;   }



ul.side_nav *   {font-family: 'Montserrat', sans-serif;}

@media all and (max-width:1240px) {
ul.side_nav {display:none  }
 
}



 
.link {position:fixed; right:3%; bottom:70px;  z-index:99999999; text-align:right}
.link a {color:#fff; font-size:1.3rem; font-weight:500;  line-height:40px; transition: all 0.3s ease-out; letter-spacing:0; font-family: 'Montserrat', sans-serif;}
.link a:hover {color:rgba(255,255,255,.7);  }

/* .main_t { animation: animate2 1s linear; }
 */  
 
 @keyframes animate2 {
  0% {opacity:0}
   50% {opacity:30% }
   80% {opacity:50% }
   100% {opacity:100%}
}


@keyframes animate3 {
  0% {opacity:0}
  5% {opacity:0%;}
  10% {opacity:0%;}
  15% {opacity:100%;}
  35% {opacity:100%;}
  40% {opacity:0% }
 100% {opacity:0%}
}
 @keyframes animate4 {
  0% {opacity:0 }
  45% {opacity:0;}
  50% {opacity:100%; }
  65% {opacity:100%; }
  70% {opacity:0%; }
  100% {opacity:0%; }
  }

@keyframes animate5 {
  0% {opacity:0%}
  75% { opacity:0%; }
  80% {opacity:100%; }
  95% {opacity:100%; }
  100% {opacity:0%; }
 
   }
 
.img {
  width:100%;   text-align:center;  position:absolute; top:0;
} 
 
.img.-clip {
  -webkit-clip-path: url(#clip-path);
          clip-path: url(#clip-path);
  pointer-events: none;
  transition: opacity 0.2s;
  opacity: 0; position:absolute; top:0;
}
 
aside {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
     background-color:rgba(0,0,0,.8);
	opacity: 0;
	visibility: hidden;
	transition: all .5s ease;
	z-index: 9999999999; 
}
aside *   {font-family: 'Montserrat', sans-serif;}

.open {
	opacity: 1;
	visibility: visible;
}
aside nav {
	 height: 100vh;  
	 background:url('/common/img/nav_bg.png') no-repeat; background-size:cover;
 }
aside nav div.nav_wrap {width:100%; height:100%; position:relative; display:flex; padding:8%; box-sizing:border-box; }
aside nav div.nav_wrap div {margin-left:10%; margin-top:3%; display:inline-block; padding:0}
aside nav div.nav_wrap h3 {color:#fff; font-size:3rem;  width:100%;   }
aside nav div.nav_wrap ul {width:100%; margin-bottom:40px; margin-top:1%}
aside nav div.nav_wrap ul li {  font-size:1.4rem; display:inline-block; padding-top:10px; padding-right:30px; }
aside nav div.nav_wrap ul li a {color:rgba(255,255,255,.5) !important; }
aside nav div.nav_wrap ul li a:hover {color:#fff !important}

.close {
	position: fixed;
	top: 40px; 
	right: 60px;
	z-index: 3;
	cursor: pointer;
	font-family: sans-serif;
}

.close span, .close span:before,
  .close span:after {
    position: absolute;
    display: block;
    content: '';
  }

.outer-close {
    position: absolute;
    right: 0;
    top: 0;
    width: 65px;
    height: 65px;
    cursor: pointer;
}

.toggle-overlay{
   position: fixed;
   right: 4%;
    top: 120px; 
    width: 50px;
    height: 50px;
    cursor: pointer;
   border:none;  
  color:#fff;  
  z-index:9999999999999999999999999999999999999;
}
 
.bar {
content: "";
position: absolute;
left: 0;
bottom:0; width:50px; height:50px;
background:url('/common/img/hammenu.png') no-repeat; 
 
}

  

.bar.animate {
content: "";
position: absolute;
left: 0;
bottom:0; width:50px; height:50px;
background:url('/common/img/close.png') no-repeat;  

}
 
 
/*
.bar, .bar:after, .bar:before{
  width:50px;
  height:5px;
  margin-bottom:5px;
   margin-top:5px;
  color:#fff;
}
.bar:before {
content: "";
position: absolute;
left: 0;
bottom: 10px;
background: rgba(255, 255, 255, 1);
transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.bar:after {
content: "";
position: absolute;
left: 0;
top: 10px;
background: rgba(255, 255, 255, 1);
transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.bar {
position: relative;
transform: translateY(20px);
background: rgba(255, 255, 255, 1);
transition: all 0ms 300ms;
}

.bar.animate:after {
top: 0;
transform: rotate(45deg);
transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.bar.animate:before {
bottom: -10px;
transform: rotate(-45deg);
transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);;
}

.bar.animate{
 background: rgba(255, 255, 255, 0);  
}
*/

/*svg*/

svg {
      
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin:0 auto;
}
svg path, svg polygon {
      fill-opacity: 0;
      stroke: #fff;
      stroke-width: 0.5;
      stroke-dasharray: 1;
      stroke-dashoffset:1;
       animation-name: draw;
      animation-duration: 4s;
      animation-delay: 0s;
      animation-iteration-count: 1;
      animation-fill-mode: forwards;
      animation-timing-function: linear;
	  animation-iteration-count:infinite;
}
svg #Shadows__x28_positive_x29_ path, svg #Shadows__x28_positive_x29_ polygon {
      animation-delay: 5s;
}

@keyframes draw {
   
  10% {
    stroke-dashoffset: 0;
    stroke-width: 2;
    fill-opacity: 0;
  }
 40% {
    stroke-width: 0;
    fill-opacity: 1;
  }

  60% {
    stroke-width: 0;
    fill-opacity: 1;
  }

  100% {
    stroke-width: 0;
    fill-opacity: 0;
  }
}

 




footer {font-size:0.95rem; line-height:1.3em;color:rgba(255,255,255,.8);  box-sizing:border-box; width:100%; padding:0 3% 50px 3%; background-color:#1E1F23 ; margin-top:250px}
footer * { font-family: 'Noto Sans KR',  "나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif; }
footer b {font-size:2.2rem; line-height:1.3em; font-weight:800; color:#fff;   width:100%; display:inline-block; margin:60px 0 30px 0;  letter-spacing:0; font-family: 'Montserrat', sans-serif;}
footer b a {color:#fff !important; font-size:0.9em; font-weight:500; font-family: 'Montserrat', sans-serif; }
footer b a img {transition: all 0.3s ease-out;}
footer b a:hover img {margin-left:20px}
footer dl {width:100%; display:flex; margin:13px 0;  }
footer dl dt {width:18%}
 
 .board footer {margin-top:0}