/* -----------------------------------------
   1. 모바일용 (800px 이하)
   ----------------------------------------- */
@media screen and (max-width: 800px) {
  .pc { display: none !important; }
  .wrap { width: 100%; }
  .w94 { width: 94%; }

main { margin: 0 auto; width: 94%; }

#room { background: url(../images/m_bg.png) center/cover no-repeat; border-bottom: 1px solid #000;}

.r1 > a { transition: none; }
.r1 > a:hover { transform: none; }

.r1 > a:nth-of-type(1) { top: 27%; left: 9%; }
.r1 > a:nth-of-type(2) { top: 32%; left: 25%; }
.r1 > a:nth-of-type(3) { top: 54%; left: 34%; }
.r1 > a:nth-of-type(4) { top: 65%; left: 17%; }

.r1 article { flex-direction: column; gap: 2rem; top: 0; left: 0; align-items: center;}

.tab-bandcamp {width: 100%; height: 42px; border: none !important;}

.r1 article ul {display: flex; flex-direction: column; justify-content: space-between;}
.r1 article ul li {margin-bottom: 10px;}
.r1 article ul li a {display: flex; align-items: center;}
.r1 article ul li a span {padding-left: 0; font-size: 16px;}
.r1 article ul li img { display: none;}

footer {display: flex; justify-content: center; align-items: center;}
} 

/* 아이콘이 눈에 안 들어올 시
@keyframes pulse {
    0% { color: #000; } 50% { color: #fff; }  100% { color: #000; } } */


/* -----------------------------------------
   2. PC용 (1025px 이상)
   ----------------------------------------- */
@media screen and (min-width: 1025px) {
  .mob { display: none !important; }
}

/* -----------------------------------------
   3. 태블릿용 (801px ~ 1024px)
   ----------------------------------------- */
@media screen and (width > 800px) and (width < 1025px) {
  .bk1 { display: none !important; }
  
 main { grid-template-rows: 1fr; height: 100vh; font-size: 1.4rem;}

#room { background: url(../images/1024bg.png) center/cover no-repeat; border-bottom: 1px solid #000;}

.r1 > a {  color: #fff; transition: none; }
.r1 > a:hover { transform: none; }

.r1 > a:nth-of-type(1) { top: 54%; left: 4%; }
.r1 > a:nth-of-type(2) { top: 62%; left: 18%; }
.r1 > a:nth-of-type(3) { top: 74%; left: 7%; }
.r1 > a:nth-of-type(4) { top: 81%; left: 21%; }

.r1 article { display: flex; flex-direction: column; justify-content: space-between; top: 0; left: 0; gap: 0; }

.tab-bandcamp {width: 100%; height: 42px; border: none;}

.r1 article ul {display: flex; flex-direction: row; justify-content: space-between;}
.r1 article ul li a {display: flex; align-items: center;}
.r1 article ul li a span {display: none;}

.r1 article ul li img { width: 4rem; aspect-ratio: 1/1;}

footer {display: flex; justify-content: center; align-items: center;}
}