@charset "UTF-8";

._fnctWrap {line-height:1.5;}

.wrap-popup{position: relative; z-index: 1;}
.webzine-header::after{content:""; display: table; clear: both;}
.webzine-header{position: relative; top: 26px;}
.webzine-title::before{content:""; display: block; width: 95%; height: 1px; background-color: black; margin-bottom: 8px;} 
.webzine-title{position: relative; font-size: 14px; display: inline-block; transform: rotate(270deg); letter-spacing: 3px; margin-top: 25px; left: -20px;}
.webzine-more-btn{float: right; width: 40px; height: 40px; border: 1px solid black; position: relative; z-index: 3;}
.webzine-more-logo{width: 24px; height: 24px; background: url(../images/more_btn.png) no-repeat center; margin: 8px 0 0 8px;}
.wrap-popup .slider li .webzine-background{width: 210px; height: 290px; position: relative; background-size: cover;}
.wrap-popup .slider{width: 210px; float: left;position: relative; left: 70px; top: -30px;}
.wrap-popup .control{top: 210px; left: 0; width: 100%;}
.wrap-popup .prevnext{top: 0; left: 0; position: static;}
.wrap-popup .prevnext button, .wrap-popup .playstop button{width: 70px; height: 82px; background-color: #ffc045; float: left; position: relative; cursor: pointer; border-radius: 0; border: 0; top: -2px;}
.wrap-popup .prevnext button{float: left; left: -70px;}
.wrap-popup .prevnext .next{left: auto; right: -140px;}
.wrap-popup .prevnext .prev::after{width: 35px; height: 10px; background-image: url(../images/webzine_arrow_left.png); margin: -20px 0 0 17.5px;}
.wrap-popup .prevnext .next::after{width: 35px; height: 10px; background-image: url(../images/webzine_arrow_right.png); margin: -20px 0 0 17.5px;}
.webzine-subtitle{position: absolute; padding: 27px 0; background-color: rgba(0,0,0,0.55); color: white; width: 100%; bottom: 0; z-index: 5;}
.webzine-subtitle p{margin-left: 36px; font-weight: 200; font-size: 18px;}
.webzine-background a{display: block; width: 100%; height: 100%;}
.wrap-popup .slider-wrap{box-shadow: 5px 5px 15px rgba(0,0,0,0.21); z-index: 4;}

@media all and (max-width:1250px){
.wrap-popup::after{content: ""; display: table;clear: both;}
 .wrap-popup .slider{width: 80%;}
 .wrap-popup .slider li .webzine-background{width: 100%; height: 350px;}
 .webzine-subtitle{padding: 21.5px 0;}
 .wrap-popup .prevnext button{width: 60px; height: 70px; top: 0;}
 .wrap-popup .prevnext .prev::after,.wrap-popup .prevnext .next::after{width: 20px; height: 6px; background-size: cover;}
 .wrap-popup .prevnext{top: 300px; width: 100%; left: 20px;}
 .wrap-popup .prevnext .prev{margin-right: 0; left: -60px;}
 .wrap-popup .prevnext .next{right: 0; right: -60px; float: right;}
 .webzine-more-btn{right: -30px;}
 .wrap-popup .control{top: 280px;}
}

@media all and (max-width:1023px){
  .webzine-more-btn{right: -55px;}
}

@media all and (max-width:767px){
  .wrap-popup .control{margin-left: 0;}
  .wrap-popup .slider{float: none; margin: 0 auto; left: 0; width: 66%;}
  .wrap-popup .prevnext button{width: 34px; height: 40px;}
  .wrap-popup .prevnext{width: calc(70% + 68px); left: 50%; top: 316px;}
  .wrap-popup .prevnext .prev::after,.wrap-popup .prevnext .next::after{margin: -20px 0 0 9px;}
  .webzine-subtitle{padding: 8px 0;}
  .webzine-more-btn{right: 0;}
  .wrap-popup .prevnext{width: 100%; bottom: 0; left: 0;}
  .wrap-popup .control{top: 260px;}
  .wrap-popup .prevnext .prev{left: -34px;}
  .wrap-popup .prevnext .next{right: -34px;}
  .wrap-popup .slider li .webzine-background{height: 300px;}
}