.PC{display:block;}
.SP{display:none;}

@media screen and (max-width: 768px){
.PC{display:none;}
.SP{display:block;}
}

#kotak-modal {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin:auto;
  z-index:1000;
  display:none;}
#kotak-modal *:focus {outline:none;}
#kotak-modal h3.title {
  padding:10px 0 10px 10px;
  margin:0;
  color:#fff;
  position:relative;
  z-index:2100;
}
#kotak-modal h3.title a.close {
  background: url('../img/closebtn.png') no-repeat left top;
  background-size:contain;
  width:60px;
  height:60px;
  position:absolute;
  top:10px;
  right:10px;
  text-decoration:none;
  cursor:pointer;
  }
#modal-overlay {
  position:fixed !important;
  position:absolute;
  z-index:999;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background:rgba(0, 27, 58, 1.0);
  display:none;
}
#iframeContainer{
  width:100%;
  height:100%;
  overflow:hidden;
}



#container{position: relative;color:#cfcfcf;}
#container h3.text{padding:0 0 0 10px;margin:0;font-weight:100;}
#container p.text{margin:0.5em 0 1em 0;padding:0 0 0 10px;font-size:90%;}
.worksarea{margin:0;padding:0;}
.worksarea img{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  margin:0 auto;
  padding:0;}
#swipe{display: none;}
@media screen and (max-width:768px){
  #container{width:100%;margin:20px 0 0 0;}
  #container p.text{width:auto;font-size:80%;margin:0.5em 0.8em 1em 0.3em;}
  #swipe{
      width:45px;
      opacity:0.6;
      height:auto;
      position: absolute;
      right:10%;
      bottom:20%;
      z-index:2200;}
  #swipe img{width:100%;height:auto;}
  .worksarea{width:100%;z-index: 1200;}
}