/* common */
* {
    padding: 0;
    margin: 0;
    letter-spacing: 0;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.app {
    overflow-y: hidden;
    height: 100vh;
    position: relative;
    color: #000;
    background: url(../img/bg-content.jpg) no-repeat;
    background-size: 100%;
    width: 100%;
    height: 100%;
    animation: slideshow 10s linear infinite normal;
    max-width: 750px;
}

.mask {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background: rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
}

.top-section {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bottom-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

@keyframes scaleDrew {
    0%   { transform: scale(1); }
    25%  { transform: scale(1.08); }
    50%  { transform: scale(1); }
    75%  { transform: scale(1.08); }
}

@keyframes slideshow {
    0%    { background-position: 0 0; }
    100%  { background-position: 0 100%; }
}

/* ===== PC ===== */
@media screen and (min-width: 750px) {
    .app {
        margin: 0 auto;
    }
    .mask {
        padding: 50px 0;
    }
    .logo {
        width: 80px;
        height: 80px;
        margin: 0 auto;
        background: url(../img/photo_2026-07-06_13-50-19.jpg) no-repeat;
        background-size: 100% 100%;
        border-radius: 16px;
    }
    .main-title {
        width: 380px;
        height: 254px;
        background: url(../img/title.png) no-repeat;
        background-size: 100% 100%;
        margin: 0 auto;
    }
    .btn {
        margin-top: 25px;
        background-image: linear-gradient(to right, #595296, #323761);
        width: 570px;
        height: 70px;
        border-radius: 10vw;
        display: flex;
        justify-content: center;
        align-items: center;
        animation: scaleDrew 2.5s ease-in-out infinite;
        cursor: pointer;
        text-decoration: none;
    }
    .down i {
        display: block;
        width: 180px;
        height: 36px;
        background: url(../img/btn.png) no-repeat;
        background-size: 100% 100%;
    }
}

/* ===== Mobile (H5) ===== */
@media screen and (max-width: 750px) {
    .mask {
        padding: 8vw 0;
    }
    .logo {
        width: 50vw;
        height: 50vw;
        margin: 2vw auto;
        background: url(../img/photo_2026-07-06_13-50-19.jpg) no-repeat;
        background-size: 100% 100%;
        border-radius: 16px;
    }
    .main-title {
        width: 60vw;
        height: 36vw;
        background: url(../img/title.png) no-repeat;
        background-size: 100% 100%;
        margin: 0 auto;
    }
    .btn {
        margin-top: 4vw;
        background-image: linear-gradient(to right, #7464ff, #b40ce4);
        width: 85vw;
        height: 14vw;
        border-radius: 10vw;
        display: flex;
        justify-content: center;
        align-items: center;
        animation: scaleDrew 2.5s ease-in-out infinite;
        cursor: pointer;
        text-decoration: none;
    }
    .down i {
        display: block;
        width: 24vw;
        height: 6vw;
        background: url(../img/btn.png) no-repeat;
        background-size: 100% 100%;
    }
}