* { box-sizing: border-box; } 

html, body { 
    margin: 0;
    background-color: black; /* 배경색 */
    overflow-x: hidden; /* 가로숨김 */
}

.Top-line {
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* 3칸배치 */
    align-items: center; /* 세로중앙 */
    min-height: 60px; /* 최소높이 */
    margin-top: -10px; /* 위이동 */
}

.left {
    display: flex; 
    align-items: center; /* 세로중앙 */
    justify-content: flex-start; /* 왼쪽정렬 */
}

.center {
    text-align: center; /* 글자중앙 */
}

.right {
    display: flex;
    justify-content: flex-end; /* 오른쪽 */
    align-items: center; /* 세로중앙 */
    gap: 20px; /* 간격 */
    margin-right: 35px; /* 오른쪽여백 */
    height: 60px; /* 높이 */
}

#Logo {
    max-width: 130px; /* 최대크기 */
    transition: 0.3s ease; /* 부드럽게 */
    cursor: pointer; /* 클릭표시 */
}

#Logo:hover { 
    transform: scale(1.05); /* 확대 */
    opacity: 0.85; /* 투명도 */
}

.Top-line h1 {
    color: white; /* 글자색 */
    font-family: "Gravitas One", serif;
    font-size: 45px; /* 글자크기 */
    letter-spacing: 5px; /* 자간 */
    line-height: 60px; /* 줄높이 */
    margin: 0 0 0 1px; /* 여백 */
    font-weight: 400; /* 두께 */
}

@media (max-width: 1300px) { 
    .center { display: none; } 

    .Top-line {
        grid-template-columns: 1fr 1fr;
        padding: 0 22px 0 0;
    }
}

.nav-link {
    color: rgba(255,255,255,0.85); /* 글자색 */
    text-decoration: none; /* 밑줄제거 */
    font-family: "Oswald", sans-serif;
    font-size: 20px; /* 글자크기 */
    letter-spacing: 2px; /* 자간 */
}

.nav-link:hover { opacity: 0.6; } 

.menu-group { display: flex; gap: 30px; } 

.sns-group {
    display: flex; 
    gap: 20px; /* 간격 */
    margin-left: 10px; /* 왼쪽여백 */
    height: 60px; /* 높이 */
    align-items: center; 
    margin-top: 7px; /* 아래이동 */
}

.right img { width: 32px; } /* 아이콘크기 */

#Youtube { transform: scale(1.1); } /* 확대 */
#instagram { transform: scale(0.95); } /* 축소 */

.About {
    max-width: 900px; /* 최대너비 */
    width: 90%; /* 너비 */
    margin: 0 auto 130px auto; /* 가운데 */
}

.About img {
    width: 100%; /* 꽉채움 */
    display: block; 
    margin: 50px auto 100px auto; /* 위아래 */
    opacity: 0; /* 투명 */
    transform: translateY(60px); 
    animation: riseUp 0.8s ease-out forwards; 
    animation-delay: 0.2s;
}

.About-Content {
    opacity: 0; /* 투명 */
    transform: translateY(60px); 
    animation: riseUp 0.8s ease-out forwards; 
    animation-delay: 0.4s; 
}

.Main-Content {
    font-family: "Titillium Web", sans-serif;
    font-size: 16px; /* 글자크기 */
    line-height: 1.9; /* 줄간격 */
    color: rgba(255,255,255,0.85); /* 글자색 */
    margin-bottom: 1.5em; /* 아래여백 */
    word-break: keep-all; /* 줄유지 */
}

.Content1 {
    margin-bottom: 80px; /* 아래여백 */
}

.About p { text-align: left
    ; } /* 글자중앙 */


.Cinematic-Footer {
    display: flex; 
    align-items: center; /* 세로중앙 */
    padding: 20px 40px; /* 안쪽여백 */
    background: #000; /* 배경색 */
    border-top: 1px solid rgba(188,191,194,0.2); /* 위선 */
    font-family: "Oswald", sans-serif;
    color: rgba(188,191,194,0.7); /* 글자색 */
    letter-spacing: 2px; /* 자간 */
}

.footer-left,
.footer-center,
.footer-right { flex: 1; }

.footer-left { font-size: 14px; } /* 글자크기 */

.footer-center {
    display: flex; 
    align-items: center; /* 세로중앙 */
    justify-content: center; 
    gap: 12px; /* 간격 */
}

.footer-right { font-size: 13px; text-align: right; } 

.footer-center img { width: 18px; } /* 아이콘 */

.footer-center a {
    text-decoration: none; /* 밑줄제거 */
    color: rgb(188,191,194); /* 글자색 */
    font-size: 16px; /* 글자크기 */
}

.footer-center a:hover { opacity: 0.6; } /* 흐려짐 */

@media (max-width: 768px) { 

    .Top-line {
        display: flex; 
        align-items: center; /* 세로중앙 */
        padding: 0 22px 0 0; /* 안쪽여백 */
        margin-top: 0; /* 위치복구 */
        min-height: 55px; /* 높이 */
    }

    .left {
        flex: 1;
        display: flex; 
        justify-content: flex-start; 
    }

    .right {
        flex: 1; 
        display: flex; 
        justify-content: flex-end; 
        margin-right: 0; /* 여백삭제 */
        gap: 12px; /* 간격 */
    }

    .menu-group {
        gap: 18px; /* 간격 */
    }

    .nav-link {
        font-size: 15px; /* 글자작게 */
        letter-spacing: 1px; /* 자간 */
    }

    #Logo {
        max-width: 80px; /* 작게 */
    }

    .right img {
        width: 20px; /* 작게 */
    }

    .Cinematic-Footer {
        flex-direction: column; 
        align-items: center;
        padding: 9px 15px; /* 여백 */
        gap: 6px; /* 간격 */
    }

    .footer-left,
    .footer-center { 
        flex: none; 
        font-size: 12px; /* 작게 */
        text-align: center; /* 가운데 */
    }

    .footer-right { display: none; } 

    .footer-center img { width: 16px; } 
    .footer-center a { font-size: 12px; } 

    .Main-Content br { display: none; } 

    .Main-Content {
        font-size: 16px; /* 글자크기 */
        line-height: 1.9; /* 줄간격 */
        margin-bottom: 1.5em; /* 여백 */
    }

    .Main-Content p {
        margin-bottom: 1.5em; /* 아래여백 */
    }
}

@keyframes riseUp { 
    to {
        opacity: 1; 
        transform: translateY(0); 
    }
}