@charset "UTF-8";
/* CSS Document */
.cd_wrapper { position: relative; width: 100%; display:block; }
.cd_wrapper .btn_play { display: flex; align-items: center; justify-content: center; position: absolute; background-color: rgba(255, 255, 255, 0.451); width: 55px; height: 55px; aspect-ratio: 1/1; border-radius: 50px; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); z-index: 20; font-size: 30px; transition: all 300ms; }
.cd_wrapper .tag { font-size: 14px; background-color: white; border-radius: 5px 5px 0 0; padding: 1px 10px 15px; position: absolute; transform: rotate(-45deg); bottom: 78%; left: 0%; }
.cd { background-color: #191919; border: 10px solid black; display: flex; align-items: center; justify-content: center; aspect-ratio: 1/1; border-radius: 100%;  position: relative; z-index: 10;}
.mv_cover { aspect-ratio: 1/1; overflow: hidden; border-radius: 100%; background-size: cover; width: 65%; border: 2px solid #6C757D;display: flex; justify-content: center; }
.mv_cover img { height: 100%; width: 100%; aspect-ratio: 1/1; }
.mv_title { background-color: rgba(255, 255, 255, 0.579); text-align: center; display: inline-block; padding: 15px 30px; border-radius: 5px; position: relative; margin-top: -10px; z-index: 20; backdrop-filter: blur(3px);}
.mv_title::before {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 25px 10px 25px 10px;
    border-color: transparent  transparent rgba(255, 255, 255, 0.52) transparent ; 
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    backdrop-filter: blur(3px);
    content: '';
  }

.cd_wrapper:hover .btn_play { color: #b29435; background-color: rgba(255, 255, 255, 0.862); }
.cd_wrapper .mv_cover {
    -webkit-transform:none;
    -webkit-transition-duration: 2s;
    -webkit-transition-delay: now;
    -webkit-transition-property: transform;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}
.cd_wrapper:hover .mv_cover {  
    -webkit-transform: rotate(360deg);
    -webkit-transition-duration: 30s;
}

@media screen and (max-width: 767px) {/* Essential */
  .mv_title { font-size: 15px; padding: 8px 12px;}
  .mv_cover { width: 68%; }
}

@media screen and (max-width: 479px) {/* Essential */	
  .mv_cover { width: 78%; }
  .mv_block { padding: 15px 10px; }
}
@media screen and (max-width: 349px) {
    
}