@charset "UTF-8";
/**
 *
 * @authors Eric Hsiao, JWT TAIPEI (eric.hsiao@jwt.com)
 * @date    2013-12-10 20:43:44
 * @version $Id$
 */

/* ==========================================================================
   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Content class
   ========================================================================== */

html,
body {
  margin:0;
  padding:0;
  height:100%;
  overflow: hidden;
}

#wrapper {

}

/****************************************/

#position-frame{
  position:relative;
  width: 1920px;
  height:953px;
  background-image: url(../images/index_dummy.jpg);
  /*background: #ccc;*/
}

.position-point{
  position: absolute;
/*  width: 10px;
  height: 10px;
  border-radius: 5px;*/
  top:0;
  left: 0;
  /*background: red;*/
}

.position-point canvas{
  position: absolute;
  left:0px;
  top:0px;
  pointer-events: none;
}

.position-point .hitArea{
  position: absolute;
  width: 100px;
  height: 100px;
  left:-50px;
  top:-50px;
  /*background-color: rgba(100,200,255,.3);*/
  cursor: none;
}

/***************/

#hand-ani{
  position: absolute;
  left:0px;
  top:0px;
  display: none;
  pointer-events: none;
  z-index: 9999;
}

#hand-ani canvas{
  position: absolute;
  left:-20px;
  top:-15px;
  pointer-events: none;
}

#knock-it{
  position: absolute;
  left:0px;
  top:0px;
  pointer-events: none;
  /*display: none;*/
  z-index: 5000;
}

#knock-it canvas{
  position: absolute;
  left:-43px;
  top:-98px;
}

#knock-it .knock-it-img{
  position: absolute;
  left:-40px;
  top:-80px;
}

#knock-it .knock-it-img img{
  width: 79px;
  height: 84px;
}


/**************/

#title-0 .title-img{
  position: absolute;
  left:-300px;
  top:-70px;
}

#title-1 .title-img{
  position: absolute;
  left:-200px;
  top:-11px;
}

#title-2 .title-img{
  position: absolute;
  left:-400px;
  top:-30px;
}

#title-2 .title-img-s{
  display: none;
  position: absolute;
  left:-300px;
  top:-35px;
}

/************************/

#btn-service{
  position: absolute;
  width: 71px;
  height: 71px;
  top:8px;
  right: 8px;
  background-image: url(../images/btn-services-bg.png);
  cursor: pointer;
}

.btn-service-arr{
  position: absolute;
  width: 20px;
  height: 20px;
  top:13px;
  left: 39px;
  background-image: url(../images/btn-services-arr.png);
}

#panel-service{
  position: fixed;
  width: 100%;
  height: 100%;
  top:0;
  right: 0;
  background-color: #fff;

  display: none;
}

.panel-service-inner{
  position: absolute;
  top:10px;
  left:10px;
  right: 10px;
  bottom: 10px;
  border: 1px #949494 solid;
  overflow: hidden;
}

.panel-service-content{
  position: absolute;
  top:5px;
  left:5px;
  right: 5px;
  bottom: 5px;
  background-color: #000;
  overflow: hidden;
}

.service-content{
  position: absolute;
  width: 960px;
  height: 700px;
  left:50%;
  top:50%;
  margin-left: -480px;
  margin-top: -350px;
  background-image: url(../images/service-dummu.jpg);
}

.btn-mailTo{
  position: absolute;
  width: 182px;
  height: 16px;
  left: 477px;
  top: 666px;
  /*background-color: rgba(255,255,255,.2);*/

  cursor: pointer;
}

.btn-mailTo .textline{
  position: relative;
  width: 0%;
  height: 100%;
  border-bottom: 1px #fff solid;
  /*margin: 0 auto;*/
}

/********************/

#loading{
  position: fixed;
  width: 100%;
  height: 100%;
  top:0;
  left: 0;
  background: #fff;
}


/* ==========================================================================
   Responsive class
   ========================================================================== */
@media only screen and (max-width: 1440px) {

  #title-2 .title-img{
    display: none;
  }

  #title-2 .title-img-s{
    display: block;
  }
}

@media only screen and (max-width: 640px) {


}


/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}