body, div, h1, h2, h3, h4, h5, p { margin:0; padding:0; }

body { font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; overflow:hidden; }

@font-face {
    font-family: 'KCC-Sonkeechung';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2212@1.0/KCC-Sonkeechung.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ChosunGs';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@1.0/ChosunGs.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}



/* paper */
.paper { position:fixed; top:0; left:0; width:100%; height:100vh; background:#A7D2DC; z-index:10; }
.paper .__area { position:absolute; top:200px; left:50%; transform:translateX(-50%); width:1200px; height:1500px; background:#F4F3F1; box-shadow:0 0 50px 0 rgba(0, 0, 0, 0.1); }

.paper .__area .bg_stripe { display:flex; flex-wrap:wrap; position:absolute; top:0; left:0; width:100%; height:100%; }
.paper .__area .bg_stripe .__stripe { margin-top:80px; width:100%; height:3px; background: #BFD2D6; }
.paper .__area .bg_stripe .__stripe:nth-child(1) { margin-top:150px; }

.paper .__area .type_1 { position:absolute; top:160px; left:50%; transform:translateX(-50%); width:1000px; }
.paper h1 { opacity:0; font-family: 'KCC-Sonkeechung'; color:#555;font-size:45px; line-height:80px; letter-spacing:-2px; font-weight:400; }

.paper .__area .type_2 { position:absolute; top:412px; left:50%; transform:translateX(-50%); width:1000px; }

.paper .travel { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); color:#fff; }


/* choice */
.choice { display:none; opacity:0; position:fixed; top:0; left:0; width:100%; height:100vh; background: linear-gradient(-45deg, #A6BCE4, #368DE4, #7AD6C0, #18ADCE ); background-size: 400% 400%; animation: gradient 15s ease infinite; z-index:1; }

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


.choice .__inner { display:flex; justify-content:center; align-items:center; width:100%; height:100%; }
.choice .__inner .box { width:fit-content; height:fit-content; color:#fff; }
.choice .__inner .box h1 { font-size:4vw; line-height:60px; letter-spacing:-1.2px; text-align:center;}

.choice .__inner .box .btn_wrap { display:flex; gap:20px; justify-content:center; margin-top:3vw; width:100%; height:70px; }
.choice .__inner .box .btn_wrap a { display:block; width:180px; height:60px; color:#fff; font-size:20px; line-height:60px; letter-spacing:-.5px; font-weight:600; text-align:center; text-decoration:none; border-radius:60px; background:transparent; border:1px solid #fff; transition:all .3s ease; }
.choice .__inner .box .btn_wrap a:hover { border:1px solid #fff; background:#fff; color:#000; mix-blend-mode: lighten; }


.choice .__credit { color:#fff; position:absolute; bottom:30px; left:50%; transform:translateX(-50%); text-decoration:none; transition:all .3s ease; }
.choice .__credit:hover { text-decoration:underline; }


.__popup { display:none; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:800px; height:330px; background:#fff; border-radius:10px; z-index:20; }
.__popup > div { display:flex; justify-content:center; align-items:center; width:inherit; height:inherit; }

.__popup .btn_close { display:block; position:absolute; top:10px; right:10px; width:50px; height:50px; background:url(../img/btn_close.svg) no-repeat center center; background-size:100% auto; text-indent:-9999em; transition:all .3s ease; cursor:pointer; }
.__popup .btn_close:hover { transform:rotate(90deg); }

.pop_yes > div { flex-wrap:wrap; text-align:center; }
.pop_yes .txt_wrap > * { width:100%; text-align:center; }
.pop_yes h5.date { color:#368DE4; font-size:20px; line-height:100%; letter-spacing:2px; }

.pop_yes h1 { margin-top:40px; width:100%; font-size:55px; line-height:36px; letter-spacing:-1px; font-weight:800; }

.pop_yes .title { display:flex; justify-content:center; flex-wrap:wrap; gap:5px; margin-top:25px; }
.pop_yes .title h2 { font-size:30px; line-height:30px; letter-spacing:-1px; font-weight:500; }
.pop_yes .title h3 { padding:0 10px; font-size:18px; line-height:30px;  font-weight:400; border:1px solid #000; border-radius:30px; }
.pop_yes .title i { font-style:normal; font-size:24px; line-height:30px; }

.pop_yes p { margin-top:30px; color:#368DE4 }
.pop_yes p + p { margin-top:5px; }

.pop_no p { margin-bottom:80px; font-size:36px; line-height:50px; letter-spacing:-.7px; text-align:center; transition:all 1s ease; transform:translateY(40px); }
.pop_no .btn_escape { display:none; position:absolute; bottom:80px; left:50%; transform:translateX(-50%); width:200px; height:45px; color:#fff; font-size:20px; line-height:45px; letter-spacing:-.5px; text-decoration:none; background:#000; border-radius:45px; text-align:center; transition:background .3s ease; }
.pop_no .btn_escape:hover { background:#368DE4; }


.title_wrap { margin-top:50px; }
.__title { font-size:50px; text-align:center; }
.__title + span { display:block; margin-top:15px; color:#737160; text-align:center; }

#sp { background:#e5e7a2; }
#sp span { display:block; width:80px; font-family: 'ChosunGs'; font-size:24px; }


#confettiWrapper { display:none; background-color:transparent; position:absolute; width:100%; height:100%; z-index:15; }

.confetti { position:absolute; background-color: #A2E5F3; width:15px; height:6px; }

.confetti.red { background-color: #fff; }
.confetti.blue { background-color: #18ADCE; }
.confetti.yellow { background-color: #e5e7a2; }
.confetti.green { background-color: #3CFBCF; }
.confetti.pink { background-color: #3179C1; }



@media (max-width: 600px){

    /* paper */
    .paper .__area { position:absolute; top:200px; left:50%; transform:translateX(-50%); width:90vw; height:1200px; background:#F4F3F1; box-shadow:0 0 50px 0 rgba(0, 0, 0, 0.1); }
    .paper .__area .bg_stripe { display:flex; flex-wrap:wrap; position:absolute; top:0; left:0; width:100%; height:100%; }
    .paper .__area .bg_stripe .__stripe { margin-top:30px; width:100%; height:1px; background: #BFD2D6; }
    .paper .__area .bg_stripe .__stripe:nth-child(1) { margin-top:100px; }
    
    .paper .__area .type_1 { position:absolute; top:155px; left:50%; transform:translateX(-50%); width:80vw; }
    .paper h1 { opacity:0; font-family: 'KCC-Sonkeechung'; color:#555;font-size:23px; line-height:50px; letter-spacing:-2px; font-weight:400; }
    
    .paper .__area .type_2 { position:absolute; top:312px; left:50%; transform:translateX(-50%); width:80vw; }
    
    .paper .travel { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100vw; color:#fff; font-size:30px; text-align:center; }
    



    /* choice */
    .choice .__inner .box { width:90vw; }
    .choice .__inner .box h1 { font-size:8vw; }

    .choice .__inner .box .btn_wrap { gap:15px; }
    .choice .__inner .box .btn_wrap a { width:35vw; }


    .__popup { width:84vw; }
    .__popup .btn_close { width:45px; height:45px; }


    .pop_yes h5.date { color:#368DE4; font-size:18px; line-height:100%; letter-spacing:2px; }

    .pop_yes h1 { margin-top:24px; width:100%; font-size:45px; line-height:36px; letter-spacing:-1px; font-weight:800; }

    .pop_yes .title { display:flex; justify-content:center; flex-wrap:wrap; gap:5px; margin-top:15px; }
    .pop_yes .title h2 { font-size:24px; line-height:24px; letter-spacing:-1px; font-weight:500; }
    .pop_yes .title h3 { padding:0 10px; font-size:14px; line-height:24px;  font-weight:400; border:1px solid #000; border-radius:30px; }
    .pop_yes .title i { font-style:normal; font-size:24px; line-height:30px; }

    .pop_yes p { margin-top:24px; color:#368DE4 }
    .pop_yes p + p { margin-top:5px; }

    .pop_no p { margin-bottom:60px; font-size:30px; line-height:42px; letter-spacing:-.7px; text-align:center; transition:all 1s ease; transform:translateY(40px); }
    .pop_no .btn_escape { display:none; position:absolute; bottom:90px; left:50%; transform:translateX(-50%); width:200px; height:45px; color:#fff; font-size:20px; line-height:45px; letter-spacing:-.5px; text-decoration:none; background:#000; border-radius:45px; text-align:center; transition:background .3s ease; }
    .pop_no .btn_escape:hover { background:#368DE4; }





}