@charset "utf-8";

.wrapper_webzine .play-btn {
  width: 80px;
  height: 80px;
  background: radial-gradient(#40413F 50%, rgba(64, 64, 64, 0.4) 52%);
  border-radius: 50%;
  display: block;
  position: absolute;
  left: calc(50% - 47px);
  top: calc(50% - 47px);
  overflow: hidden;
}

.wrapper_webzine .play-btn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 100;
  transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.wrapper_webzine .play-btn::before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  animation-delay: 0s;
  animation: pulsate-btn 2s;
  animation-direction: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: steps;
  opacity: 1;
  border-radius: 50%;
  border: 5px solid rgba(255, 74, 23, 0.7);
  top: -15%;
  left: -15%;
  background: rgba(198, 16, 0, 0);
}

.wrapper_webzine .play-btn:hover::after {
  border-left: 15px solid #FF0000;
  transform: scale(20);
}

.wrapper_webzine .play-btn:hover::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border: none;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 200;
  animation: none;
  border-radius: 0;
}



#myAudio { width:100%; border-radius: 10px;  border:1px solid #C8A4FD;  background-color: #fff;}
#myAudio::-webkit-media-controls-panel {  background-color: #fff;  border-radius: 4px;}
#myAudio::-webkit-media-controls-play-button {  background-color:#802FF9;  border: none;  border-radius: 50%;  color: #fff;  padding: 8px;  margin-right: 10px;}
#myAudio::-webkit-media-controls-volume-slider {  width: 60px;}
.mir_icon { width:50px; height:50px; border-radius: 50%; background-color:#40413F; text-align:center; color:#FFFFFF; padding-top:10px; cursor: pointer }
.mir_icon:hover { background-color:#ff0000; color:#FFFFFF; transform: scale(1.1); transition: all ease 0.2s 0s; }




/* 모바일기기 */
@media only screen and (max-width: 320px) {
.img-card_webzine {  width: 100%;  display:block;    overflow: hidden;border-radius: 5px 5px 0px 0px;}
.img-card_webzine img {  width: 100%;  object-fit:cover;   transition: all .25s ease;  border-radius: 5px 0px 0px 5px;} 
}


/* 모바일기기 + 태블릿 */
@media only screen and (min-width: 321px) and (max-width: 768px){
.img-card_webzine {  width: 100%;  display:block;    overflow: hidden;border-radius: 5px 5px 0px 0px;}
.img-card_webzine img {  width: 100%;  object-fit:cover;   transition: all .25s ease;  border-radius: 5px 0px 0px 5px;} 
}


/* 태블릿 */
@media only screen and (min-width: 769px) and (max-width: 1200px){
.img-card_webzine {  width: 100%;  display:block;    overflow: hidden;border-radius: 5px 0px 0px 5px;}
.img-card_webzine img {  width: 100%;  object-fit:cover;   transition: all .25s ease;  border-radius: 5px 0px 0px 5px;} 
}


/* 데스크탑 */
@media only screen and (min-width: 1201px) {
.img-card_webzine {  width: 100%;  display:block;    overflow: hidden;border-radius: 5px 0px 0px 5px;}
.img-card_webzine img {  width: 100%;  object-fit:cover;   transition: all .25s ease;  border-radius: 5px 0px 0px 5px;} 	
}