@charset "utf-8";

/* 모바일기기 */
@media only screen and (max-width: 320px) {
.wrapper_webzine .play-btn {width: 50px; height: 50px; background: radial-gradient(#40413F 50%, rgba(64, 64, 64, 0.4) 52%); border-radius: 50%; display: block; position: absolute; left: calc(50% - 25px); top: calc(50% - 25px); 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: 70px; height: 70px; 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;}
}

/* 모바일기기 + 태블릿 */
@media only screen and (min-width: 321px) and (max-width: 768px){
.wrapper_webzine .play-btn {width: 50px; height: 50px; background: radial-gradient(#40413F 50%, rgba(64, 64, 64, 0.4) 52%); border-radius: 50%; display: block; position: absolute; left: calc(50% - 25px); top: calc(50% - 25px); 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: 70px; height: 70px; 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;}
}

/* 태블릿 */
@media only screen and (min-width: 769px) and (max-width: 1200px){
.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;}
}

/* 데스크탑 */
@media only screen and (min-width: 1201px) {
.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;}
}