/* Reset */
html, body {width: 100%; height: 100%; margin: 0; padding: 0; font-size: 100%;}
div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, figure{margin: 0; padding: 0;}
header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption {display: block;}
button, input[type=submit], input[type=reset], input[type=button] {overflow: visible; cursor: pointer;}
input[type=text], input[type=email], input[type=password], input[type=submit], textarea {-webkit-appearance:none;}
input, select, textarea, button {font-size::100%; border-radius:0; outline:0; color:var(--text);}
button, input {overflow:visible; margin: 0; padding: 0; border: 0; background: transparent;}
ul li {list-style:none;}
img, video, fieldset{border:none; vertical-align:top; max-width:100%;}
figure{vertical-align:top;}

body{
	position:fixed;
	font-family:'Pretendard';
	font-size:12pt; line-height:1.8em;
	-webkit-text-size-adjust:100%;
	-webkit-font-smoothing:antialiased;
}
div, pre, li, a{box-sizing:border-box;}
pre{
	white-space:pre-wrap; box-sizing:border-box;
	font-family:'Pretendard';
}
.container::after, div::after, ul::after{content:''; display:block; clear:both;}


/* 유튜브 비디오 반응형으로 수정 */
.youtubevid-wrapper{width:500px; max-width:100%; margin:0 auto;}
.resvid{position:relative; width:100%; padding-bottom:56.25%;}
.resvid iframe{position:absolute; top:0; left:0; width:100%; height:100%;}

/*글씨체*/
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Cafe24SurroundAir';
    src: url('https://gcore.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/Cafe24SsurroundAir.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Cafe24Surround';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/Cafe24Ssurround.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

/* 배경 전환 */
.bg-img{
  width:120%; height:120%; transform:translate(-50%,-50%);
  position:fixed; top:50%; left:50%;
  z-index: -997 !important;
  transition:0.4s all ease;
  animation:bgload 1.3s;
  -moz-animation:bgload 1.3s;
  -webkit-animation:bgload 1.3s;
  -o-animation:bgload 1.3s;
  opacity:1; /*불투명도 취향껏 변경(0.1 ~ 1)*/
  pointer-events:none; /*선택 무시*/
}

@keyframes bgload {
    from {
        opacity:0;
    }
    to {
        opacity:1; /*상단 불투명도 수정 시 같은 값으로 수정*/
    }
}

@-webkit-keyframes bgload {
    from {
        opacity:0;
    }
    to {
        opacity:1; /*상단 불투명도 수정 시 같은 값으로 수정*/
    }
}

/* 배경 전환 끝 */
body{
    animation: fadein 2000ms ease-out;
    -moz-animation: fadein 2000ms ease-out; /* Firefox */
    -webkit-animation: fadein 2000ms ease-out; /* Safari and  Chrome */
    -o-animation: fadein 2000ms ease-out; /* Opera */
}
@keyframes fadein {
    from {opacity:0;}
    to {opacity:1;}
}
@-moz-keyframes fadein { /* Firefox */
    from {opacity:0;}
    to {opacity:1;}
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {opacity:0;}
    to {opacity:1;}
}
@-o-keyframes fadein { /* Opera */
    from {opacity:0;}
    to {opacity: 1;}
}

/* - - - BGM 플레이어 관련 - - - */
.mm-bgm{
  position: fixed;
  bottom: 15px; /* 우측상단 원하면 bottom을 top 으로 변경 */
  right: 15px;
  z-index: 9999; /* 맨위로 */
  border: none;
}
/* - - - BGM 플레이어 끝 - - -*/