@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;
}
.press-start-2p-regular {
  font-family: "Press Start 2P", system-ui;
  font-weight: 400;
  font-style: normal;
}

/* 공통 */
html, body {
  height: 100%;
  overflow: auto;              /* 스크롤 가능 */
  -ms-overflow-style: none;    /* IE/Edge */
  scrollbar-width: none;       /* Firefox */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;               /* Chrome/Safari */
}

/* 인트로 비디오 */
#intro{
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    background: #090909;
}
#intro video{
    width: 80%;
    height: 80%;
}


/* 배경화면 */
.wrap{
    width: 100vw;
    height: 100vh;
    background: none;
    text-align: center;
    position: relative;
/*     overflow: hidden; */
}
.background{
    position: fixed;
    inset: 0;
    z-index: -1;
/*     overflow: hidden; */

}
.background video{
    position: absolute;
    inset: 0;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
}
/* 배경화면 - 떨어지는 별 */
/* .wrap .stars span{
    position: absolute;
    width: 140px; height: 2px;
    background: 
    radial-gradient(circle, #fff 0 40%, transparent 41% 100%) 0 0/2px 2px,
    linear-gradient(45deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0)) 2px 0 /120px 2px;
    animation: fall linear forwards;
    opacity: 0;
}
@keyframes fall{
    from{transform: rotate(-45deg) translate(100%,0); opacity: 1;}
    to{transform: rotate(-45deg) translate(0, 100%); opacity: 0;}
}
 */

/* 텍스트 */
.text{
    position: relative;
    z-index: 1;
}
.title{
    color: white;
    font-size: 100px;
    font-family: "Press Start 2P";
    text-shadow: 3px 3px 0 #000000;
    -webkit-text-stroke: 2px black;/* 텍스트 stroke */
    padding-top: 12vh;
}
.txt{
    font-size: 25px;
    line-height: 1.5;
    color: white;
    font-family: 'DungGeunMo';/* 그림자 추가 필요 */
    text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25), 2px 2px 0 rgba(0, 0, 0, 1);
    margin-top:  3%;
}


/* 아이콘 */
.icon{
    width: 70%;
    min-height: 45vh;
    margin: 3% auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.icon li{
    width: 18%;
    height: auto;
    animation: float 3s ease-in-out infinite;
}
.icon li figure{
    width: 100%;
    height: 30vh;
    background: no-repeat center/cover;
    margin-bottom: 20px;
    box-shadow: 3px 3px 3px 0 rgba(0,0,0,1);
    border-radius: 10px;
}
.icon .place a > figure{
    background-image: url(../img/img_place.png);
}
.icon .media a > figure{
    background-image: url(../img/img_media.png);
}
.icon .music a > figure{
    background-image: url(../img/img_music.png);
}
.icon .fashion a > figure{
    background-image: url(../img/img_fashion.png);
}

/* 아이콘 위 아래로 나누기 */
.place, .fashion{
    align-self: flex-start;
}
.media, .music{
    align-self: flex-end;
}
/* 버튼 */
ul li a button{
    width: 70%; height: 5vh;
    background: linear-gradient(to bottom, #f1ffed 18%, #8ddd35 99%);
    box-shadow: inset 0 0 0 1px #000802, 2px 2px 2px 0 #000;
    border-radius: 40px;
    color: #fff;
    font-size: 20px;
    font-family: "Press Start 2P";
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 1);
    -webkit-text-stroke: 1px black; /* 텍스트 stroke */
}

/* li가 떠있는듯한 느낌의 애니메이션 */
@keyframes float{
    0% {transform: translateY(0);}
    50% {transform: translateY(-10px);}
    100% {transform: translateY(0);}
}

/* 스크롤 다운 아이콘 */
.down{
    width: 10%;
    height: 5%;
    margin: 0 auto;
}
.down figure{
    width: 100%;
    height: 100%;
    display: flex;
    background: url(../img/icon/ico_pix_arrow.gif) no-repeat center/contain;
}

/* footer */
footer {
    width: 100%; height: 300px;
    padding: 0 100px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

footer .f_left .f_logo {
    font-family: "Press Start 2P", system-ui;
    font-size: 30px;
    color: #fff;
    -webkit-text-stroke: 1px #090909;
    text-shadow: 3px 3px 0 #090909;
    margin-bottom: 10px;
}

footer .f_left .f_tagline {
    font-size: 17px;
    margin-bottom: 30px;
}

footer .f_left .copyright {
    font-size: 15px;
    color: #bbb;
}

footer .f_right {
    display: flex;
    gap: 25px;
    align-items: center;
}

footer .f_right .teamName {
    font-family: "Press Start 2P", system-ui;
    font-size: 20px;
    color: #fff;
    -webkit-text-stroke: 1px #090909;
    text-shadow: 2px 2px 0 #090909;
}

footer .f_right .members {
    display: flex;
    gap: 40px;
    border-left: 1px solid #bbb;
    padding-left: 25px;
}

footer .f_right .members ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

footer .f_right .members .name {
    font-size: 24px;
}

footer .f_right .members .link img {
    width: 22px; height: 22px;
    display: inline-block;
    margin-right: 7px;

}