/* WebFont MAIN  */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;800&family=Varela+Round&display=swap'); /*임시 폰트*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap'); /*임시 폰트*/
@import url('https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo.css'); /* 메인 폰트 */



/* reset */
* { margin: 0; padding:0; }
li { list-style:none; }
a { text-decoration: none; /*!important;*/ color:inherit; }
img { vertical-align: top; object-fit: cover;}

/* common */
body { font-family: 'Apple SD Gothic Neo'; color: #000;}
html { overflow-x: hidden; font-size: 62.5%; width: 100%; }
html { box-sizing: border-box;}
*, *::before, *::after {box-sizing: inherit;}
html.fix { overflow: hidden; }
.wrap { width: 100%; margin:0 auto; position: relative; }
.wrap * { word-break: keep-all; }
.cl:after { content:""; clear:both; display: block; }
.blind { position:absolute; width:0; height:0; font-size:0; overflow: hidden; }
.fl { display: flex; align-items: center; justify-content: center; }
.fl:after { display:none; }
.fld { flex-direction: column; }
.spb { justify-content: space-between; }
.tac { text-align: center; }
.dn { display:none !important; }
.aic { align-items: center;}
.shd { box-shadow: 2px 2px 8px rgba(0,0,0,0.2); border-radius: 16px; overflow: hidden; }
.swiper-container { width: 100%; height: 100%; }
.swiper-slide { width: 100%; height: 100%; background-position: center;  background-size: cover; display: flex; justify-content: center; align-items: center; }
.swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.site-container { max-width: ;}

.wh { color:#fff; }
.cc { color: #ccc;}
.cp { color:#942525; }
.cb { background: #942525; color:#fff; }

.ptt { font-family: ptt; }
.ptel { font-family: ptel; }
.ptl { font-family: ptl; }
.ptr { font-family: ptr; }
.ptm { font-family: ptm; }
.ptsb { font-family: ptsb; }
.ptb { font-family: ptb; }
.pteb { font-family: pteb; }
.ptbl { font-family: ptbl; }

.coloron {color: #000; background: #fff;}

main { margin: 0 2rem 0; display: grid; grid-template-columns: 1fr; grid-template-rows: 4.4fr 1fr; height: 100vh;  border-left: 1px solid #000; border-right: 1px solid #000; font-size: 1.6rem;}
#room { background: url(../images/mainbg.png) center/cover no-repeat; border-bottom: 1px solid #000;}
.r1 {position: relative; height: 100%;}

.r1 > a { position: absolute; color: #000; transition: .3s; }
.r1 > a i { font-size: 2.8rem; }
.r1 > a:hover { transform: matrix(1, 0.5, -0.5, 1, 5, 5); }

.r1 > a:nth-of-type(1) { top: 14%; left: 7%; }
.r1 > a:nth-of-type(2) { top: 32%; left: 5%; }
.r1 > a:nth-of-type(3) { top: 49%; left: 8%; }
.r1 > a:nth-of-type(4) { top: 65%; left: 9%; }

.r1 article { display: flex; flex-direction: row; gap: 6rem; position: absolute; top: 50%; left: 18%; z-index: 1000;}

.bandcamp {border: 0; width: 20vw; max-width: 200px; min-width: 100px;  aspect-ratio: 1 / 1; height: auto;
}

.r1 article ul {display: flex; flex-direction: column; justify-content: space-between;}
.r1 article ul li a {display: flex; align-items: center;}
.r1 article ul li a span {padding-left: 2rem; font-size: 1.6rem;}

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

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