html, body { height:100%; }
body {
  margin:0;
  overflow:hidden;
  background-color:#0e051a;
  background-image: url('../images/introBg.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center; 
  -moz-background-size:cover;        /*for Firefox*/
  -webkit-background-size:cover;        /*for Google Chrome、Safari*/
  -o-background-size:cover;        /*for Opera*/
  background-size:cover;        /*for IE*/

  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
}
#drawCanvas, #webglOutput {
  position :absolute;
}


#logo {
  position:absolute;
  width: 150px;
  height: 40px;
  top:37px;
  left:25px;
  cursor:pointer;
}

#fbIcon {
  position:absolute;
  width: 45px;
  height: 45px;
  top:24px;
  right:14px;
  cursor:pointer;
  background-image: url(../images/fbIcon.png);
  background-size: 45px 90px;
  background-position: 0 0;
}

#fbIcon:hover {
  background-position: 0 45px;
}


#nav {
  position :absolute;
  left:50%;
  top:43px;
  margin-left: -190px;  /*-150px*/
}


#menuAbout {
  position :absolute;
  width:75px;
  height:15px;
  left:0;
  top:0;
  background-image: url(../images/menu_about.png);
}
#menuWorks {
  position :absolute;
  width:75px;
  height:15px;
  left:102px; /*75px*/
  top:0;
  background-image: url(../images/menu_work.png);
}
#menuService {
  position :absolute;
  width:75px;
  height:15px;
  left:204px; /*150px + 27*2 */
  top:0;
  background-image: url(../images/menu_service.png);
}
#menuContact {
  position :absolute;
  width:75px;
  height:15px;
  left:305px; /*225px + 27*2 + 26*/
  top:0;
  background-image: url(../images/menu_contact.png);
}



.enableMenuClick{
  background-position: 0 0;
  cursor: pointer;
}
.enableMenuClick:hover{
  background-position: 0 -15px;
}






#mainBox{
  position:absolute;
  top:60.5%;
  left:50%;
  margin:0 0 0 -121px;
}


#mainTxt1, #mainTxt2, #mainTxt3, #indexArrows, #indexOr{
  position:absolute;
  /*margin:0 0 10px 0;*/
}

#indexArrows, #indexOr{
  left:50%;
  width: 88px;
  height: 20px;
  margin:0 0 0 85px;
}

#viewWorkBtn {
  position:absolute;
  top:132px; /* 50% */
  left:50%;
  width: 88px;
  height: 20px;
  margin:0 0 0 79px; /*-121px -44px*/
  background-image: url(../images/viewWork.png);
  background-position: 0 0;
  cursor:pointer;
}

#viewWorkBtn:hover {
  background-position: 0 -20px;
}


/*/////////////////////////////////////////////////////////////////////*/
#about .container {
  position: absolute;
  width: 900px;
  height: 460px;
  top:50%;
  left:50%;
  margin-left: 230px;
  margin-top: -100px;

  perspective: 400px;
  /*background-color: rgba(255, 0, 255, 0.2);*/
}

#about .container .aboutContent {
  position: absolute;
  left:24px;
  /*transform: rotateX( 45deg );*/
}


/*/////////////////////////////////////////////////////////////////////*/
#service .container {
  position: absolute;
  width: 600px;
  height: 460px;
  top:50%;
  left:50%;
  margin-left: 230px;
  margin-top: -145px;

  perspective: 400px;
}

#service .container .serviceContent {
  position: absolute;
  left:-15px;
  /*transform: rotateX( 45deg );*/
}

/*/////////////////////////////////////////////////////////////////////*/
#contact .container {
  position: absolute;
  width: 600px;
  height: 460px;
  top:50%;
  left:50%;
  margin-left: 290px;
  margin-top: -145px;

  perspective: 400px;
}

#contact .container .contactContent {
  position: absolute;
  left:-70px;
}

#contact .mailTo {
  position:absolute;
  display:block;
  /*background-color: #ff0000;
  opacity: 0.3;*/
  cursor:pointer;
}

#contact #mailToService {
  left:0; top:131px;
  width: 307px; height: 16px;
  background-image: url(../images/contact_content_mail1.png);
  background-position: 307px 0;
}
#contact #mailToService:hover {
  background-position: 307px 16px;
}
#contact #mailToKate {
  left:0; top:206px;
  width: 307px; height: 16px;
  background-image: url(../images/contact_content_mail2.png);
  background-position: 307px 0;
}
#contact #mailToKate:hover {
  background-position: 307px 16px;
}
#contact #mailToGabi {
  left:0; top:291px;
  width: 307px; height: 16px;
  background-image: url(../images/contact_content_mail3.png);
  background-position: 307px 0;
}
#contact #mailToGabi:hover {
  background-position: 307px 16px;
}
#contact #mailToMelinda {
  left:0; top:381px;
  width: 307px; height: 16px;
  background-image: url(../images/contact_content_mail4.png);
  background-position: 307px 0;
}
#contact #mailToMelinda:hover {
  background-position: 307px 16px;
}


/*/////////////////////////////////////////////////////////////////////*/
#workList{
  position: absolute;
  top:129px;
  bottom: 30px;
  left:2%;
  right:2%;
  overflow:hidden;
  text-align: center;
  font-size: 0;
}

#workListContent{
  position: absolute;
  width: 100%;
  height: 100%;
  overflow-x:auto;
  overflow-y:scroll;
  padding-left: 10px;
  padding-right: 20px;
}

#workList .work{
  display:inline-block;
  position: relative;
  width: 375px;
  height: 267px;
  cursor: pointer;
  margin: 1px 1px 2px 2px;
  word-spacing: -1;
}

#workList .work img{
  position: absolute;
  top:0;
  left:0;
}

#workList .work .hideBd{
  position: absolute;
  top:0;
  left:0;
  width: 375px;
  height: 267px;
  background: rgba(0,0,0,.6);
}




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


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

#work {
  position: absolute;
  width: 100%;
  height: 100%;

}

#work .container {
  /*
  position: absolute;
  top:225px;
  bottom: 15px;
  left:30px;
  right:30px;
  */
  position: relative;
  margin: 225px auto 15px;
  width: 80%;
  height: 100%;
  max-width: 1500px;
  min-width: 940px;
}

/* http://www.google.com/fonts#UsePlace:use/Collection:Open+Sans */

#work .workListItem {
  position: absolute;
  width: 100%;
  left:35px;
  /*background-color: rgba(255, 255, 255, 0.6);*/
  margin: 10px;
  /*font-family: 'Open Sans', sans-serif;*/
  font-family: "微軟正黑體", "Microsoft JhengHei", hei, Verdana;
  font-size: 13px;
  line-height: 15px;
}



.enableWorkNav{
  color: #ece4ff;
  cursor: pointer;
}
.enableWorkNav:hover{
  color: #e88fff;
  /*background-color: rgba(255, 255, 255, 0.1);*/
  text-decoration: underline;
}
.disableMenuClick{
  color: #e88fff;
  cursor:pointer;
}


#work .container .workPicContent {
  position: absolute;
  width: 100%;
  height: 100%;
}

#work .container .workPicContent .workPicContainerCrop {
  position: absolute;
  left:0;
  right: 400px;
  height: 100%;
  overflow:hidden;
}


#work .container .workPicContent .workPicContainer {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow-x:auto;
  overflow-y:scroll;
}


#work .workPicItem {
  width: 100%;
  color: #ece4ff;
  position: relative;
  /*background-color: rgba(255, 255, 255, 0.6);*/
  margin-bottom: 25px;
}


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

#work .container .workDescription {
  position: absolute;
  width: 385px;
  height: 460px;
  right: 0;
  letter-spacing: 1px;
  line-height:22px;
  /*background-color: rgba(255, 225, 255, 0.6);*/
}

#work .workDescription .title .super{
  vertical-align: super;
  font-size: 17px;
}

  

#work .workDescription .title {
  position: absolute;
  left:35px;
  top:0;
  font-family: "微軟正黑體", "Microsoft JhengHei", hei, Verdana;
  font-size: 25px;
  color: #ece4ff;
  line-height: 30px;
}

#work .workDescription .content {
  position: absolute;
  left:35px;
  top:0;
  width: 350px;
  font-size: 13px;
  color: #fdebff;
}

#work .workDescription .content .super{
  vertical-align: super;
  font-size: 10px;
}

#work .workDescription .subtitle {
  font-family: "微軟正黑體", "Microsoft JhengHei", hei, Verdana;
}

#work .workDescription .contentText {
  font-family: "微軟正黑體", "Microsoft JhengHei", hei, Verdana;
  margin-bottom: 15px;
  line-height: 19px;
}

#work .workDescription .goBtn {
  position: absolute;
  left:35px;
  top:0;
  width: 195px;
  height: 37px;
  cursor: pointer;
  background-image: url(../images/workVisitBtn.png);
}

#work .workDescription .goBtn:hover {
  background-image: url(../images/workVisitBtnHover.png);
}


/*/////////////////////////////////////////////////////////////////////*/
#work .workArrows{
  position: absolute;
  right:-5px;
  top:-80px;
  width: 190px;
  height: 55px;
}

#work .workArrows .prev{
  position: absolute;
  left:0;
  top:0;
}

#work .workArrows .close{
  position: absolute;
  left:70px;
  top:0;
  cursor: pointer;
}

#work .workArrows .next{
  position: absolute;
  left:163px;
  top:0;
}


.buttonModeFalse{
  cursor: auto;
}
.buttonModeTrue{
  cursor: pointer;
}