@charset "utf-8";

/*
 *
 * Usage: Top layout
 *
 * Name: top.css
 *
 */



/*---------------------------------------------------------------------
Top layout
---------------------------------------------------------------------*/
#mainContents {position:relative;}

#workList {text-align:center;}
    #workList li {float:left; width:170px; height:170px; margin:0 25px 25px 0; position:relative;}
    /* #workList li:nth-child(4n) {margin-right:0;} */

    #workList li a {display:block; width:100%; height:100%;}
    /* #workList li a:before,
    #workList li a:after {-webkit-transition: all 0.2s ease-in-out;
                          -moz-transition:    all 0.2s ease-in-out;
                          transition:         all 0.2s ease-in-out;
                          content:''; width:1px; height:0; position:absolute; top:50%; margin-top:-78px; background-color:#d2d2d2;}
    #workList li:before,
    #workList li:after {-webkit-transition: all 0.2s ease-in-out;
                        -moz-transition:    all 0.2s ease-in-out;
                        transition:         all 0.2s ease-in-out;
                        content:''; height:1px; width:0; position:absolute; left:50%; margin-left:-78px; background-color:#d2d2d2;}

    #workList li a:before {left:0;}
    #workList li a:after  {right:0;}
    #workList li:before {top:0;}
    #workList li:after  {bottom:0;}

    #workList li:hover a:before,
    #workList li:hover a:after  {height:155px;}
    #workList li:hover:before,
    #workList li:hover:after  {width:155px;} */




/* overlay */
#overlay {background-color:#fff; position:fixed; top:0; width:100%; height:100%; z-index:99; display:none;}
#overlayBody {
  -webkit-transform: translate(0,-50%);
  -moz-transform:    translate(0,-50%);
  transform:         translate(0,-50%);
  position:fixed; top:50%; width:100%; text-align:center; z-index:100; display:none;
}

  #overlayBody #ovTitle {font-size:14px;}
  #overlayBody #ovImg   {margin-bottom:85px; padding:0 50px;}
    #overlayBody #ovImg img {max-width:100%;}

  #btnClose {position:absolute; top:65px; right:15px; z-index:999; display:none;}
    #btnClose a {padding:15px;}

  .btn a {display:block; width:50px; height:0; padding-top:50px; overflow:hidden;}
  #btnPrev  {position:absolute; top:50%; margin-top:-14px; z-index:999; left:0;}
  #btnNext  {position:absolute; top:50%; margin-top:-14px; z-index:999; right:15px;}
  #btnPrev a {background:url(../images/btn_prev.gif) no-repeat 50% 50%;}
  #btnNext a {background:url(../images/btn_next.gif) no-repeat 50% 50%;}
  #btnPrev a:hover {background-position:30% 50%;}
  #btnNext a:hover {background-position:70% 50%;}

  #overlay.active {display:block;}
  #overlayBody.active {display:block;}
  #btnClose.active {display:block;}


/* animation */
/* list fade in */
#workList li {
  -moz-transition:    all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition:         all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  -webkit-transform: translate(0,15px);
  -moz-transform:    translate(0,15px);
  transform:         translate(0,15px);
  opacity:0;
}
#workList li.action {
  -webkit-transform: translate(0,0);
  -moz-transform:    translate(0,0);
  transform:         translate(0,0);
  opacity:1;
}


/* mouse over */
#workList li a .name  {
  -webkit-transition: all 0.2s ease-in-out;
  transition:         all 0.2s ease-in-out;
  -webkit-transform: translate(0,7px);
  transform:         translate(0,7px);
  opacity:0;
  position:absolute; bottom:20px; left:0; width:100%; font-size:10px; z-index:9;
}
#workList li a .thumb {
  -webkit-transform: translate(-50%,-40%) scale(1.1);
  transform:         translate(-50%,-40%) scale(1.1);
  position:absolute; top:40%; left:50%;
}

#workList li a:before {
  -webkit-transition: all 0.2s ease-in-out;
  transition:         all 0.2s ease-in-out;
  -webkit-transform: scale(1.05);
  transform:         scale(1.05);
  opacity:0;
  content:''; width:170px; height:170px; position:absolute; top:50%; left:0;
  margin-top:-78px; border:1px solid #000; display:block;
}

#workList li:hover a:before {
  -webkit-transform: scale(1);
  transform:         scale(1);
  opacity:1;
}

#workList li:hover a .name {
  -webkit-transform: translate(0,0);
  transform:         translate(0,0);
  opacity:1;
}

#workList li:hover a .thumb {
  -webkit-transform: translate(-50%,-40%) scale(1);
  transform:         translate(-50%,-40%) scale(1);
  opacity:1;
}


/* overlay */
#overlayBody #ovImg {
  -moz-transition:    all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition:         all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  -webkit-transform: translate(0,15px);
  -moz-transform:    translate(0,15px);
  transform:         translate(0,15px);
  opacity:0;
}
#overlayBody #ovTitle {
  -moz-transition:    all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition:         all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  -webkit-transform: translate(0,15px);
  -moz-transform:    translate(0,15px);
  transform:         translate(0,15px);
  opacity:0;
}

#overlayBody.active #ovImg {
  -webkit-transform: translate(0,0);
  transform:         translate(0,0);
  opacity:1;
}
#overlayBody.active #ovTitle {
  -webkit-transform: translate(0,0);
  transform:         translate(0,0);
  opacity:1;
}