@charset "utf-8";

.customview_mask{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:#000;
  opacity:0;
  z-index:5000;
}
.customview_wrap{
  position:fixed;
  top:50%;
  left:50%;
  padding:5px;
  opacity:0;
  z-index:5010;
}
.customview_wrap .customview_outer{
  padding:40px 0;
  background:transparent;
/*  box-shadow:0 0 4px #000;
  border-radius:5px;*/
}

.customview_wrap .customview_caption{
  position:fixed;
  top:15px;
  left:0;
  width:100%;
  text-align:center;
  font-size:16px;
  font-weight:bold;
  line-height:1.2;
  color:#fff;
  z-index:5020;
}
.customview_wrap .customview_close{
  position:fixed;
  top:15px;
  right:15px;
  text-indent:-9999px;
  cursor:pointer;
  width:40px;
  height:40px;
  background:url(../images/custom_close.png) no-repeat;
  background-size:contain;
  z-index:5030;
}
.customview_wrap .customview_frame{
  position:relative;
  text-align:center;
}
.customview_wrap .customview_frame .customview_prev{
  position:fixed;
  top:50%;
  left:20px;
  width:35px;
  height:62px;
  margin-top:-31px;
  text-indent:-9999px;
  cursor:pointer;
  background:url(../images/custombox_arrow_left.png) no-repeat 50% 50%;
  background-size:contain;
  z-index:5040;
}
.customview_wrap .customview_frame .customview_next{
  position:fixed;
  top:50%;
  right:20px;
  width:35px;
  height:62px;
  margin-top:-31px;
  text-indent:-9999px;
  cursor:pointer;
  background:url(../images/custombox_arrow_right.png) no-repeat 50% 50%;
  background-size:contain;
  z-index:5040;
}
.customview_wrap .customview_frame img{
  max-width:100%;
  height:auto;
}

@media screen and (max-width:570px){
  .customview_wrap{padding:0}
  .customview_wrap .customview_outer{
    padding:40px 0;
    background:none;
    box-shadow:none;
    border-radius:0;
  }
  .customview_wrap .customview_caption{
    position:fixed;
    bottom:inherit;
    top:0;
    left:0;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:38px;
    padding:2px 0;
    text-align:center;
    font-size:14px;
    line-height:1.2;
    color:#fff;
    background:#333;
  }
  .customview_wrap .customview_close{
    position:fixed;
    top:inherit;
    right:inherit;
    bottom:0px;
    left:0;
    box-sizing:border-box;
    width:100%;
    height:40px;
    padding:0 calc(100% / 3 * 2) 0 0;
    font-size:12px;
    line-height:1.2;
    color:#fff;
    background-color:#333;
    background-size:18px 18px;
    background-position:15% 50%;
  }
  .customview_wrap .customview_frame .customview_prev{
    position:fixed;
    top:inherit;
    bottom:0;
    left:calc(100% / 3);
    width:calc(100% / 3);
    height:40px;
    padding:0;
    margin-top:0;
    font-size:12px;
    line-height:1.2;
    color:#fff;
    background-size:10px 18px;
  }
  .customview_wrap .customview_frame .customview_next{
    position:fixed;
    top:inherit;
    left:inherit;
    bottom:0;
    right:0;
    width:calc(100% / 3);
    height:40px;
    padding:0;
    margin-top:0;
    font-size:12px;
    line-height:1.2;
    color:#fff;
    background-size:10px 18px;
  }
}