@charset "utf-8";

/* 모바일기기 */
@media only screen and (max-width: 320px) {
.wrapper_list .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_list .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_list .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_list .play-btn:hover::after { border-left: 15px solid #FF0000; transform: scale(20);}
.wrapper_list .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_list .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_list .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_list .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_list .play-btn:hover::after { border-left: 15px solid #FF0000; transform: scale(20);}
.wrapper_list .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_list .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_list .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_list .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_list .play-btn:hover::after { border-left: 15px solid #FF0000; transform: scale(20);}
.wrapper_list .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_list .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_list .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_list .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_list .play-btn:hover::after { border-left: 15px solid #FF0000; transform: scale(20);}
.wrapper_list .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_list {  width: 100%;  display:block;    overflow: hidden;border-radius: 10px 10px 0px 0px;}
.img-card_list img {  width: 100%;  object-fit:cover;   transition: all .25s ease;  border-radius: 10px 10px 0px 0px;} 
.wr_cut {display:none;  }
}


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


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


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