@charset "utf-8";


.menu {
    width: 100%;
    max-width: 1060px;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 80px;
}

.menu ul li {
    display: inline-block;
    margin-right: 15px;

    font-family: 'Pretendard';
    font-size: 22px;
    font-weight: 600;

    border: 2px solid black;

 
    border-radius: 50px;
}

.menu ul li a {
  padding: 15px 40px;
  display: block;
}

.menu ul li.active {
    background-color: #eb5794;
    color: #fff;
    border: 2px solid #eb5794;
}

.menu ul li:hover {
    background-color: #eb5794;
    color: #fff;
    border: 2px solid #eb5794;
}




.subtitle {
    /* margin-top: 150px; */
    text-align: left;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;

    margin-bottom: 150px;
}

.subtitle .top ul {
    display: flex;
    /* 자식 요소들을 flex 아이템으로 만듦 */
    align-items: center;
    /* 수직 중앙 정렬 */
}

.subtitle .top div {
    height: 36px;
    width: 10px;
    background-color: #ccc;

}

.subtitle .top ul li h2 {
    font-family: 'Pretendard';
    font-size: 36px;
    margin-left: 20px;

}

.subtitle .info {
    margin-top: 30px;
    width: 300px;
    padding: 15px;
    color: #000;
    margin-bottom: 25px;
}

.subtitle .info ul li {
    display: inline-block;
    line-height: 30px;
}



.subtitle .info ul li h2 {
    font-family: 'Pretendard';
    font-size: 20px;
    font-weight: 600;
    margin-right: 15px;
}

.subtitle .info ul li p {
    font-family: 'Pretendard';
    font-size: 19px;
    font-weight: 400;
}

.subtitle .info .join h2 {
    letter-spacing: 9px;
    margin-right: 3px;
}


.subtitle .info ul li p span {
    background-color: #ffbbff;
    padding: 3px;
    margin-left: 2px;
    color: #fff;
}

.subtitle {
    position: relative;
}

.subtitle .tool {
    position: absolute;
    left: 5px;
    top: 245px;
}

.subtitle .tool ul li {
    display: inline-block;
}

.subtitle .tool img {
    width: 60px;
}




.subtitle .tool ul li {
    display: inline-block;
}

.subtitle .tool img {
    width: 60px;
}

.subtitle .info .join h2 {
    letter-spacing: 9px;
    margin-right: 3px;
}







.con {
    width: 100%;
    max-width: 1400px;

    margin: 0 auto;
}

.con .contitle {
    text-align: center;
    margin-bottom: 100px;
}

.con .contitle img {
    width: 250px;
}

.con .contitle h2 {
    font-family: 'KccEunyeong';
    font-size: 65px;

    color: rgb(49, 49, 49);
}

.con .contitle h2 span {
    font-size: 90px;

    color: rgb(129, 81, 173);
}


.con .over {
    text-align: center;
    margin-bottom: 60px;
}

.con .over h2 {
    font-family: 'Pretendard';
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
}

.con .over p {
    font-family: 'Pretendard';
    font-size: 18px;
    font-weight: 500;
    line-height: 35px;
    color: rgb(78, 78, 78);
}

.con .over p span {
    color: #eb5794;
    font-weight: bold;
}





.con .gallery {
    margin: 0 auto;
    width: 1000px;

    text-align: center;
    margin-bottom: 150px;
}

.con .gallery img {
    width: 1000px;
}




/* Top 버튼 스타일 */
.scroll-top {
    position: fixed;
    bottom: 50px;
    right: 50px;
    z-index: 999;
    cursor: pointer;
    
    /* 기본적으로 숨김 처리 */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.scroll-top.show {
    opacity: 1;
    visibility: visible;
}

.scroll-top img {
    width: 50px; /* 이미지 크기 조절 */
}

.scroll-top:hover {
    transform: translateY(-5px); /* 호버 시 살짝 위로 이동 */
}









/* 반응형 디자인 */

/* 태블릿 (768px ~ 1024px) */

@media (max-width: 900px) {
html, body {
    width: 100%;
    overflow-x: hidden; /* 가로축으로 넘치는 내용은 숨김 */
}

.menu {
 margin-bottom: 60px;

}

.menu ul {
      display: flex;        /* flex 레이아웃 활성화 */
        flex-wrap: wrap;      /* 자리가 부족하면 다음 줄로 넘김 */
        justify-content: center; /* 가로 중앙 정렬 */
        gap:10px;            /* 버튼 사이 간격 (상하좌우 동일) */
        padding: 0;           /* 기본 패딩 제거 */
    }

.menu ul li {
  /* 2개씩 배치하기 위해 너비 조정 (gap을 고려하여 50%보다 약간 작게) */
       width: calc(40% - 30px); 
        margin-right: 0;      /* 기존 마진 제거 */
        box-sizing: border-box;
        display: block;       /* 너비 적용을 위해 블록화 */
}

.menu ul li a {
    padding: 10px 15px;
    text-align: center;
        font-size: 16px;      /* 모바일에 적합한 폰트 크기 */
    
        display: block;
}

.subtitle {
    margin: 0 auto;

    margin-bottom: 150px;
}

.subtitle .top ul li div {
display: none;
}

.subtitle .top ul li h2 {
text-align: center;
        font-size: 26px;
        margin-bottom: -20px;
        margin-left: 0; /* PC에서 준 좌측 여백 20px 제거 */
}

.subtitle .info {
display: block;      /* 블록 요소로 확실히 지정 */
        width: 250px;        /* 고정 너비 유지 */
        margin: 30px auto;   /* 상하 30px, 좌우 auto로 중앙 배치 */
        padding: 15px;       /* 내부 여백 유지 */
        text-align: left;    /* 내부 텍스트는 다시 왼쪽으로 정렬 */
    }
    
.subtitle .info ul {
display: block;      /* 한 줄씩 정렬되도록 변경 */
        padding: 0;          /* 브라우저 기본 패딩 제거 */
        margin: 0;
        text-align: left;    /* 부모 영향 방지 */
    }

    .subtitle .info ul li {
        display: inline-block; /* 항목명과 내용을 한 줄에 배치 */
    }

    /* 추가 팁: 상단의 타이틀과 도구 아이콘들도 중앙 정렬하면 더 자연스럽습니다 */
    .subtitle .top ul {
        justify-content: center;
    }

    .subtitle .info ul li h2 {
     margin-left: 0;      /* PC의 20px 여백 제거 */
        text-align: center;
        font-size: 18px;
    }

     .subtitle .info ul li h2 p {
        font-size: 18px;
     }


.subtitle .tool {
position: absolute;
    left: 0;
    right: 0;
    top: 210px; /* 원하는 위치로 수치 조절 */
    text-align: center;
}
.con .over {
    text-align: center;
}

.con .over h2 {
    font-size: 18px;
    margin-bottom: 15px;
}

.con .over p {
 font-size: 16px;
        line-height: 28px;
        text-align: center;
        width: 70%;           /* 고정 width: 460px 대신 유연한 % 사용 */
        max-width: 460px;     /* 최대 너비는 유지 */
        margin: 0 auto;       /* 박스 자체를 중앙으로 이동 */
        word-break: keep-all;
}

.con .gallery {
        width: 100%;          /* 고정 너비 1000px 해제 */
        max-width: 1000px;    /* 최대 너비 제한 */
        margin: 0 auto;       /* 가로 중앙 정렬 */
        padding: 0 20px;      /* 양옆 여백을 주어 이미지가 화면 끝에 붙지 않게 함 */
        box-sizing: border-box; 
        text-align: center;
    }

.con .gallery img {
  width: 100%;          /* 부모 너비에 맞게 자동으로 조절 */
        max-width: 360px;     /* 모바일에서 설정하고 싶으신 최대 너비 */
        height: auto;         /* 비율 유지 */
        display: block;
        margin: 0 auto;       /* 이미지 자체를 중앙으로 */
}

.con .gallery .first {
    margin-bottom: 40px;
}

.con .gallery .gif {
    margin-bottom: 150px;
}


/* Top 버튼 스타일 */
.scroll-top {
    bottom: 150px;
}

}