@charset "utf-8";
#poster{
  position: fixed;
  width:100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  left:0;
  top:0;
  z-index: 800;
}
.poster_data{
  position:relative;
  left:0;
  top:0;
  width:100%;
}
#poster_wrap{
  position: relative;
  width:560px;
  height: 792px;
  margin: 0 auto;
  background: #000;
}
#poster_inner{
  position:absolute;
  width:100%;
  height: 100%;
  left:0;
  top:0;
}
#poster_cursor{
  position: relative;
  display: flex;
  justify-content: center;
  margin: 20px auto 0;
}
.poster_dotted{
  width:10px;
  height: 10px;
  border-radius: 100%;
  background: #FFF;
  margin: 0 12px;
  cursor: pointer;
}
.poster_target{
  background: #ff0012;
  cursor: default;
}
#poster_img{
  position: absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}
#poster_close{
  position: absolute;
  right:-80px;
  top:0;
  background: url(../img/poster/close.gif) no-repeat center top;
  background-size:100% auto;
  width:60px;
  height:60px;
  cursor: pointer;
  transition:0.3s;
}
#poster_prev{
  position: absolute;
  top:50%;
  left:0;
  background: url("../img/poster/back.gif") no-repeat center top;
  background-size:100% auto;
  width:60px;
  height:60px;
  margin-top:-30px;
  cursor: pointer;
  transition:0.3s;
}
#poster_next{
  position: absolute;
  top:50%;
  right:0;
  background: url("../img/poster/next.gif") no-repeat center top;
  background-size:100% auto;
  width:60px;
  height:60px;
  margin-top:-30px;
  cursor: pointer;
  transition:0.3s;
}


#poster_close:hover,
#poster_prev:hover,
#poster_next:hover{
  opacity: 0.8;
}

@media screen and (min-width: 0px) and (max-width: 800px) {

  #poster{
    position: fixed;
    width:100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    left:0;
    top:0;
    z-index: 999;
    overflow: auto;
  }
  .poster_data{
    position:relative;
    left:0;
    top:0;
    width:87.5%;
    margin: 0 auto;
    margin-top:23%;
  }
  #poster_wrap{
    position: relative;
    width:100% !important;
    height: auto !important;
    margin: 0 auto;
    background: none;
  }
  #poster_inner{
    position:absolute;
    width:100%;
    height: 100%;
    left:0;
    top:0;
  }
  #poster_cursor{
    position: relative;
    display: flex;
    justify-content: center;
    margin: 20px auto 0;
    padding-bottom:4%;
  }
  .poster_dotted{
    width:10px;
    height: 10px;
    border-radius: 100%;
    background: #FFF;
    margin: 0 12px;
    cursor: pointer;
  }
  .poster_target{
    background: #ff0012;
    cursor: default;
  }
  #poster_img{
    position: absolute;
    width:100%;
    left: 50%;
    top: 0;
    transform: translate(-50%,0);
  }
  #poster_close{
    position: fixed;
    background: #ff0012;
    background-size:100% auto;
    width:14%;
    height:0;
    padding-top:14%;
    cursor: pointer;
    right: 3%;
    top:2%;
  }
  #poster_close:before {
    position: absolute;
    width: 40%;
    left: 30%;
    height: 3px;
    background: #FFF;
    transform-origin: center center;
    content:"";
    top: 50% !important;
    transform: rotate(45deg);
  }
  #poster_close:after {
    position: absolute;
    width: 40%;
    left: 30%;
    height: 3px;
    background: #FFF;
    transform-origin: center center;
    content:"";
    top: 50% !important;
    transform: rotate(-45deg);
  }  
  
  #poster_prev {
      position: absolute;
      top: 0;
      left: 0;
      background: url(../img/poster/back.gif) no-repeat center top;
      background-size: 100% auto;
      width: 14%;
      height: 0;
      padding-top: 14%;
      transform: translateY(0);
      cursor: pointer;
      margin-top: 75%;
  }
  #poster_next{
    position: absolute;
    top:0;
    right:0;
    background: url("../img/poster/next.gif") no-repeat center top;
    background-size:100% auto;
    width:14%;
    height:0;
    padding-top:14%;
    transform:translateY(0);
    cursor: pointer;
    margin-top: 75%;
  }


  #poster_close:hover,
  #poster_prev:hover,
  #poster_next:hover{
    opacity: 0.8;
  }

  
  	
}/*@media*/