@charset "UTF-8";

/* Page Title */



html  { width:100%; height:100%; padding:0px; margin:0px; background:url('/common/img/common/top_bg.png') repeat-x top center; }

#wrap                {width:100%; float:left; min-width:1100px; padding-bottom:50px;    }


/**/


 #content  {width:1100px; margin:0 auto; }
 




#footer        {width:100%; min-width:1100px;  background-color:#fff; border-top:1px solid #ddd; float:left;    padding:30px 0; }
  
 #footer   .copy     {font-size:0.95em; font-weight:600; color:#777; line-height:1.4em;   width:100%; text-align:center;  }
 #footer   .copy   span    {color:#999; font-size:0.9em; line-height:2.2em; letter-spacing:0px;  }
 
 

 /*퀵*/

 .grid {
  width: 62px;
  height: 100%;
  position: absolute;
}
.grid a {
  padding: 0;
  margin: 0;
  position: relative;
   width: 92px;
 height:72px; 
  float: left;
  overflow: hidden;
  background: #2c3e50;
}
 
.grid a span {
  position: absolute;
   left: 50%;
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  -moz-transition: all 0.5s ease 0.1s;
  -o-transition: all 0.5s ease 0.1s;
  -webkit-transition: all 0.5s ease;
  -webkit-transition-delay: 0.1s;
  transition: all 0.5s ease 0.1s;
  font-size: 1.5em;
  color: #fff;
}
.grid a i {
  position: absolute;
   -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  -moz-transition: all 0.5s ease 0.1s;
  -o-transition: all 0.5s ease 0.1s;
  -webkit-transition: all 0.5s ease;
  -webkit-transition-delay: 0.1s;
  transition: all 0.5s ease 0.1s;
  font-size: 6.8em;
}
.grid a .info {
   text-decoration: none;
  position: absolute;
  width: 100%;
   top: 55%;
  left: 30%;
   -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
.grid a .info li {
   list-style-type: none;
  -moz-transform: translateX(150%);
  -ms-transform: translateX(150%);
  -webkit-transform: translateX(150%);
  transform: translateX(150%);
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  padding: .1em 0;
}

 
 
 
.grid a {
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.grid a:hover {
  z-index: 15;
  background: #4f4f4f;
}

.grid a:hover .info li {
  -moz-transform: translateX(0%);
  -ms-transform: translateX(0%);
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}

.grid a:hover span {
  -moz-transform: translateX(-500%);
  -ms-transform: translateX(-500%);
  -webkit-transform: translateX(-500%);
  transform: translateX(-500%);
}

.grid a:hover i {
  -moz-transform: translateX(-450%) translateY(-50%);
  -ms-transform: translateX(-450%) translateY(-50%);
  -webkit-transform: translateX(-450%) translateY(-50%);
  transform: translateX(-450%) translateY(-50%);
}