@charset "utf-8";



.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: 260px;
    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: #9943ca;
    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: 200px;
}

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

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

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

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


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

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

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

.con .explain {
 
    /* 1. Flexbox 활성화 및 중앙 정렬 설정 */
    display: flex;
    justify-content: space-between;
    /* 자식 div들을 양 끝으로 배치 */
    align-items: flex-start;
    /* 상단 기준 정렬 (필요 시 center로 변경 가능) */

    /* 전체 컨테이너 폭은 이미 부모(.con)에서 잡혀있지만 명시적으로 확인 */
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;
}

.con .explain>div {
    /* 2. 기존 inline-block 제거 (flex가 제어하므로 불필요) */
    /* display: inline-block; */

    /* 3. 각 요소의 너비를 지정하여 균형을 맞춤 */
    width: 45%;
    text-align: center;
    /* 내부 텍스트 및 이미지 중앙 정렬 */
}

.con .explain h2 {
    font-family: 'Pretendard';
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 40px;
}

.con .explain img {
    height: 160px;
    margin-bottom: 40px;
    display: block;
    /* 마진 적용을 위해 블록화 */
    margin-left: auto;
    /* 이미지 자체를 div 내에서 중앙 정렬 */
    margin-right: auto;
}

.con .explain p {
    font-family: 'Pretendard';
    font-size: 18px;
    font-weight: 500;
    color: rgb(97, 97, 97);
}

.con span {
    color: #9943ca;
    font-weight: bold;
}




.pam {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;

    margin-top: 200px;
    margin-bottom: 150px;
}

.pam h2 {
    font-family: 'Pretendard';
    font-size: 27px;
    font-weight: 600;
    margin-bottom: 60px;
    text-align: center;
}

.pam div ul {
    display: flex;
    justify-content: space-between;
    /* 자식 div들을 양 끝으로 배치 */
    align-items: flex-start;
}

.pam img {
    width: 680px;
    display: block;
    margin-left: auto;
    /* 이미지 자체를 div 내에서 중앙 정렬 */
    margin-right: auto;
}







/* 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); /* 호버 시 살짝 위로 이동 */
}















@media (max-width: 900px) {

.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 .contitle {
    text-align: center;
    margin-bottom: 70px;
}

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

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

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

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


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

.con .over h3 {
    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 .explain {
display: flex;        /* block 대신 flex 유지 */
        flex-direction: column; /* 세로로 쌓기 */
        align-items: center;  /* 자식 요소들을 가로축 기준 중앙 정렬 */
        text-align: center;
        width: 100%;
        margin: 0 auto;
        margin-bottom: -80px;
}

.con .explain div {
  width: 100%;          /* 부모 너비를 꽉 채워서 중앙 정렬 보장 */
        margin-bottom: 70px
}

.con .explain h2 {
    font-size: 20px;
    text-align: center;
}

.con .explain img {
height: 110px;
        margin: 0 auto 40px;  /* 상 좌우 하 마진 설정 */
        display: block;       /* inline-block보다 block이 중앙 정렬에 유리 */

}

.con .explain p {
width: 80%;           /* 텍스트가 너무 퍼지지 않게 너비 제한 */
        margin: 0 auto;       /* 텍스트 박스 중앙 정렬 */
        font-size: 16px;
}

.con span {
    color: #9943ca;
    font-weight: bold;
}





.pam h2 {
    font-size: 22px;
    margin-bottom: 40px;
}

.pam div ul {
    display: block;
}

.pam img {
    width: 360px;
margin-bottom: 30px;
}


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


}