@charset "utf-8";
@import url('font.css');

/* intro */
.wrap.intro{
    width: 100%;
    height: 100%;
    min-height: 100dvh;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-image: url('../image/intro/bg_intro.jpg');
    background-size: cover;
    font-family: 'Paperlogy', sans-serif;
}
.wrap.intro,
.wrap.intro *{
    font-family: 'Paperlogy', sans-serif;
    box-sizing: border-box;
}
.intro-contents{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 100dvh;
    padding: 90px 5%;
    position: relative;
}
.intro-contop{
    position: relative;
}
.intro-tit img{
    max-width: 100%;
}
.dday-box{
    display: inline-flex;
    align-items: center;
    gap: 20px;
    position: absolute;
    top: 0;
    right: 0;
    padding: 27px 45px;
    border-radius: 50px;
    border-right: 1px solid rgba(255, 255, 255, 0.29);
    border-bottom: 1px solid rgba(255, 255, 255, 0.29);
    border-left: 1px solid rgba(255, 255, 255, 0.29);
    background: linear-gradient(98deg, #E94326 6.9%, #FFA600 99.74%);
    line-height: 1;
    font-size: 48px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
}
.intro-contents .btn-wrap{
    margin-top: auto;
}
.intro-contents .btn-wrap{
    padding: 0;
    text-align: left;
}
.btn.btn-intro{
    display: inline-flex;
    align-items: center;
    width: 500px;
    max-width: 100%;
    padding: 25px 40px;
    height: 86px;
    padding-right: 30px;
    border-radius: 50px;
    border: 3px solid transparent;
    background: linear-gradient(white, white) padding-box, linear-gradient(to right, #E000AF, #372880) border-box;
    box-shadow: 0 4px 12px 0 rgba(154, 137, 179, 0.80);
    font-size: 24px;
    font-weight: 800;
    text-align: left;
    transition: 0.3s ease;
}
.btn.btn-intro .text{
    display: inline-block;
    background: linear-gradient(90deg, #DE00AE 0%, #372780 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
}
.btn.btn-intro .icon{
    margin-left: auto;
    transition: 0.3s ease;
}

.intro-tit,
.intro-contop .dday-box,
.btn.btn-intro{
    opacity: 0;
}
.intro-tit{
    animation: fadeUp 1s ease forwards;
}
.intro-contop .dday-box{
    animation: fadeUp 1s 0.2s ease forwards;
}
.btn.btn-intro{
    animation: fadeUp 1s 0.5s ease forwards;
}
@keyframes fadeUp{
    0%{
        opacity: 0;
        transform: translateY(30px);
    }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}
.btn.btn-intro:hover{
    transform: translateY(-5px);
}
.btn.btn-intro:hover .icon{
    transform: translateX(3px);
}

@media screen and (max-width: 1200px){
    .intro-tit{
        max-width: 60%;
    }
}
@media screen and (max-width: 1024px){
    .dday-box{
        padding: 15px 30px;
        font-size: 32px;
    }
}
@media screen and (max-width: 768px){
    .wrap.intro{
        background-image: url('../image/intro/bg_intro_m.jpg');
        background-position: center bottom;
    }
    .intro-contents{
        padding: 70px 20px;
    }
    .intro-tit{
        max-width: 100%;
    }
    .dday-box{
        gap: 10px;
        position: static;
        margin-top: 25px;
        padding: 15px 25px;
        font-size: 26px;
    }
    .dday-box img{
        width: 25px;
    }
    .btn.btn-intro{
        width: 242px;
        height: 55px;
        padding: 17px 25px;
        font-size: 16px;
    }
    .btn.btn-intro .icon img{
        width: 16px;
    }
}