@charset "utf-8";
@font-face {
     font-family: 'DungGeunMo';
     src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/DungGeunMo.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}

/* 공통 */
*{box-sizing : border-box;}
html, body{
    height: 100%;
}
body{
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: linear-gradient(to bottom,#6A94FF 19%, #CDE1FF 67%, #FFFFFF 92%) fixed;
    font-family: 'DungGeunMo';
    word-break: keep-all;
}
section {
    position: relative;
}
button{
    width: 30px;
    height: 30px;
}
section .btn .up{
    background: url(../img/icon/ico_up.png) no-repeat center/cover;
    position: absolute;
    right: 7.5%;
    bottom: 5.2%;
}
section .btn .down{
    background: url(../img/icon/ico_down.png) no-repeat center/cover;
    position: absolute;
    right: 4%;
    bottom: 5.2%;
}
iframe{
    width: 43%;
    height: 36.5%;
}

/* 고정 뷰포트(섹션이 넘어가는 무대) */
.viewport{
  height: calc(100vh - 90px);
  position: fixed;
  top: 90px;    /* 헤더 높이만큼 아래에서 시작 */
  left: 0; right: 0; bottom: 0;
  overflow: hidden;
}

/* 트랙: 섹션들을 세로로 쌓고, Y축 이동 */
.track{
  position: absolute;
  inset: 0;
  display: block;
 /*  will-change: transform; */
  transform: translateY(0);
}

/* 한 화면 = 한 섹션 */
.viewport .track section{
  width: 100%;
  height: 100%;   /* 뷰포트 높이 꽉 채움 */
  display: grid;
  place-items: center;
}
.section-inner{
    width: 1190px;
    aspect-ratio: 1300/854;
    max-width: 1300px;
    max-height: 780px;
    margin: 0 auto;
  position: relative;
/*   overflow: hidden; */
}

/* 배경 이미지 */
.sub01 {
    background: url(../img/img_music_sub_bg01.png) no-repeat center/contain;
}

.sub02 {
    background: url(../img/img_music_sub_bg02.png) no-repeat center/contain;
}

.sub03 {
    background: url(../img/img_music_sub_bg03.png) no-repeat center/contain;
}

.sub04 {
    background: url(../img/img_music_sub_bg04.png) no-repeat center/contain;
}

/* 텍스트 */
section div:not(.sub04) .title{
    position: absolute;
    top: 16%;
    left: 10%;
    text-align: center;
}
.title h3{
    font-size: 24px;
    color: #A0E857;
    margin-bottom: 30px;
}
.title h4{
    font-size: 20px;
    color: #fff;
}
section div:not(.sub04) .text{
    color: white;
    font-size: 16px;
    line-height: 30px;
    display: block;
    width: 40%;
    position: absolute;
    top: 15.5%;
    right: 6%;
}
section div:not(.sub04) .info{
    width: 48%;
    height: 6%;
    position: absolute;
    right: 2%;
    top: 39%;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
    border-bottom: 1px solid #000;
}
section div:not(.sub04) .info li{
    position: relative;
    /* flex: 1; */
    text-align: center;
}
section div:not(.sub04) .info li::after{
    content: '';
    width: 1px;
    height: 50px;
    display: block;
    background: #000;
    position: absolute;
    top: -16px;
    left: -30px;
}
section div:not(.sub04) .info li:first-child::after{
    display: none;
}
/* 동영상 */
section iframe{
    position: absolute;
    bottom: 15%;
    right: 4%;
    border-radius: 10px;
}

/* 마지막 페이지 */
.sub04 .lie{
    left: 3.5%;
    top: 18%;
}
.sub04 p{
    color: white;
    font-size: 16px;
    line-height: 30px;
    display: block;
    width: 40%;
    position: absolute;
}
.sub04 #txt01{
    left: 6%;
    bottom: 16%;
}
.sub04 .nobody{
    right: 4.5%;
    top: 18%;
}
.sub04 #txt02{
    right: 6%;
    bottom: 16%;
}

/* footer */
/* footer{
   width: 80%;
} */
/* footer .f_left .f_logo {
    font-size: 35px;
}

footer .f_left .f_tagline {
    font-size: 22px;
}

footer .f_left .copyright {
    font-size: 20px;
}

footer .f_right .teamName {
    font-size: 25px;
}
footer .f_right .members .name {
    font-size: 29px;
}
 */
 
/* footer .f_right {
    gap: 40px;
}
footer .f_right .members {
    padding-left: 40px;
} */