@charset "UTF-8";

@font-face {
    font-family: 'Paperlogy';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-9Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
}
@font-face {
    font-family: 'Paperlogy';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: 'Paperlogy';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Paperlogy';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Paperlogy';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Paperlogy';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Paperlogy';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-3Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Paperlogy';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-2ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family: 'Paperlogy';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-1Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
}

.button,
::file-selector-button {
    inline-size: fit-content;
    touch-action: manipulation;
    user-select: none;
}
p,li,dt,dd,blockquote,.no-orphan {
    text-wrap: pretty;
}
img {
    max-width: 100%;
    object-fit: cover;
}
a:not([class]) {
    text-decoration-thickness: max(0.08em, 1px);
    text-underline-offset: 0.15em;
}
:focus-visible {
    --outline-size: max(2px, 0.15em);
    outline: var(--outline-size) solid #4A4C4E;
    outline-offset: var(--outline-size);
}
:target {
    scroll-padding-block-start: 2rem;
}
:focus {
    scroll-padding-block-end: 8vh;
}
:root {
    --black: #222;
    --white: #fff;
    --lightGray: #767676;
    --textGray: #5C667E;
}
html,body{
    font-family: Paperlogy, 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;
    font-size: 16px; color: #222;
    scroll-behavior: smooth;
}
@media (max-width: 1024px) {
    html,body{font-size: 15px;}
}
@media (max-width: 768px) {
    html,body{font-size: 14px;}
}

.intro{
    background-color: #FCF9E0;
    width: 100dvw; height: 100dvh;
    position: relative;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    cursor: pointer;
}
.bg{
    position: absolute; left: 0;
    width: 100dvw;
}
.bg-top{
    top: 0; 
    display: flex; justify-content: space-between; align-items: flex-start;
}
.bg-top.summary{
   width: 100%;
}
.bg-top img{
    max-width: 30%;
}
.bg-bottom{
    bottom: 0;
    background: url('image/bg_bottom.svg') no-repeat center bottom -6rem / 100% auto;
    height: 100%;
}
.bg-bottom.summary{
   background: none;     position: static;
}
.bg-bottom img{
    position: absolute;
}
.bg-bottom.summary img{
    position: fixed;
}
.intro .man{
    left: 15%; bottom: 10rem;
    max-width: 300px; width: 40%;
}
.intro .woman{
    right: 15%; bottom: 9rem;
    max-width: 300px; width: 40%;
}
.intro .frog{
    left: 27.5%; bottom: 6rem; 
    max-width: 170px; width: 25%;
}
.intro .otter{
    right: 27.5%; bottom: 6rem;
    max-width: 210px; width: 30%;
}

.summary .man{
    left: 50%; bottom: 12rem;
    max-width: 250px; width: 40%;
    margin-left: -55rem;
}
.summary .woman{
    right: 50%; bottom: 10rem;
    max-width: 250px; width: 40%;
    margin-right: -54rem;
}
.summary .frog{
    left: 6%; bottom: 3.5rem; 
    max-width: 150px; width: 25%;
}
.summary .otter{
    right: 3%; bottom: 3.5rem;
    max-width: 190px; width: 30%;
}

@media (max-width: 1440px) {
    .intro-con__tit img{
        width: 40rem;
    }
    .bg-bottom{
        background-position: center bottom 0;
    }
    .intro .bg-bottom img,
    .summary.bg-bottom img{
        scale: 0.8;
    }
    .intro .man{
        left: 11%; bottom: 5rem;
    }
    .intro .woman{
        right: 11%; bottom: 3rem;
    }
    .intro .frog{
        left: 25%; bottom: 3rem; 
    }
    .intro .otter{
        right: 25%; bottom: 3rem;
    }
    .summary .man{
        left: 0; margin-left: 0;
        bottom: 5rem;
    }
    .summary .woman{
        right: 0; margin-right: 0;
        bottom: 4rem;
    }
    .summary .frog{
        bottom: 1rem; 
    }
    .summary .otter{
        bottom: 1rem;
    }
}
@media (max-width: 1024px) {
    .intro .bg-bottom img{
        scale: 0.7;
    }
    .intro .man{
        left: 5%; bottom: 2rem;
    }
    .intro .woman{
        right: 5%; bottom: 0rem;
    }
    .intro .frog{
        left: 20%; bottom: 2.5rem; 
    }
    .intro .otter{
        right: 20%; bottom: 2.5rem;
    }
}
@media (max-width: 768px) {
    .intro .man{
        left: 0; 
    }
    .intro .woman{
        right: 0; 
    }
}
@media (max-width: 425px){
    .intro .bg-bottom img{
        scale: 0.9;
    }
    .intro .man{
        bottom: 6rem;
    }
    .intro .woman{
        bottom: 4.5rem;
    }
    .intro .frog{
        bottom: 2rem; 
    }
    .intro .otter{
        bottom: 2rem; 
    }
}

.host{
    position: absolute; bottom: 1.5rem; width: 100%;
    display: flex; gap: 2rem; align-items: center; justify-content: center;
}
.host img{
    max-width: calc(40% - 1rem);
}
@media (max-width: 768px){
    .host{
        bottom: auto; top: 1.5rem;
    }
}

.intro-con{
    position: relative; z-index: 1;
    display: flex; flex-direction: column; gap: 2rem; align-items: center;
    margin-top: -12rem;
}
.intro-con__info{
    padding: 0 3rem;
}
@media (max-width: 1440px){
    .intro-con{
        margin-top: -10rem;
    }
}
@media (max-width: 768px){
    .intro-con{
        margin-top: -6rem;
    }
}

.intro__go{
    width: 9rem;
    aspect-ratio: 1;
    outline: 1.7rem solid hsla(50, 93%, 72%, 0.4);
    background-color: var(--white);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center; 
    position: relative;
    transition: 0.3s cubic-bezier(0.46,0.03,0.52,0.96);
    color: #66724F;
    margin-top: 2.5rem;
}
.intro__go:hover{
    outline-color: hsla(50, 93%, 72%, 0.8);
}
.intro__go::after{
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    background-color: hsla(50, 93%, 72%, 0.5);
    animation: bigger 1.5s cubic-bezier(0.65,0.05,0.36,1) infinite;
    border-radius: 50%;
    aspect-ratio: 1;
}
@keyframes bigger {
    0%{
        scale: 0;
        opacity: 1;
    }
    100%{
        scale: 2.5;
        opacity: 0;
    }
}
.intro__go span{
    line-height: 1;
    font-size: 1.6rem;
    font-weight: 800;
}
@media (max-width: 425px){
    .intro__go{
        width: 7rem; outline-width: 1.4rem; margin-top: 1.5rem;
    }
    .intro__go span{
        font-size: 1.4rem;
    }
}

.summary-container{
    background: url('image/bg_bottom_summary.svg') #FCF9E0 no-repeat center bottom / 100% auto;
    background-attachment: fixed;
}
main.container{
    z-index: 1; position: relative;
}
main.container .nav li{
    background-color: var(--white); padding: 0.5rem 0;
}
main.container .nav li:first-child{
    border-top-left-radius: 0.8rem; border-bottom-left-radius: 1rem; padding: 0.5rem;
}
main.container .nav li:last-child{
    border-top-right-radius: 0.8rem; border-bottom-right-radius: 1rem; padding: 0.5rem;
}
.section-title__sub{
    font-weight: 400; color: hsla(0, 0%, 0%, 0.6); font-size: 0.75em; margin-left: 0.4rem;
}
.sticky{
    position: sticky;
    top: 1.5rem;
}
.btn{
    height: 3.5rem; font-size: 1.2rem; font-weight: 600!important;
}
.cap-badge strong{
    font-weight: 700; display: block;     font-size: 0.95em; text-align: center; color: #89937b;
}
.residue{
    background-color: #82AA5B;
    color: var(--white);
    padding: 0.2rem 0.35rem;
    border-radius: 0.25rem;
    font-weight: 600;
    line-height: 1;
    font-size: 0.8em;
    display: inline-block;
    vertical-align: text-top;
}
@media (max-width: 1024px){
    .hero .text-end{
        text-align: left !important;
    }
}
@media (max-width: 425px){
    .hero-title{
        font-size: 2.2rem; text-align: center;
    }
    .m-break{
        display: block;
    }
    .hero-sub{
        text-align: center; text-wrap: balance;
    }
    .hero .text-end{
        text-align: center !important; width: 100%;
    }
    .section-title__sub{
        display: block; margin: 0.4rem 0 0;
    }
}


input:not([type="checkbox"],[type="radio"],[type="button"]),
select,
textarea{
    border-radius: .25rem;
    border: 1px solid #ddd;
    height: 3rem; 
    padding: 0 1rem;
    transition: 0.2s cubic-bezier(0.46,0.03,0.52,0.96);
}
input.form-control:focus,
select.form-select:focus,
textarea.form-control:focus{
    border-color: #82AA5B;
    box-shadow: 0 0 0 .25rem hsla(84, 40%, 74%, 0.5);
}
input::placeholder,
textarea::placeholder{
    color: var(--lightGray);
}


.agree-area{
    font-size: .9375rem;
    display: flex;
    align-items: center;
    gap: 0 0.4rem;
    flex-wrap: wrap;
}
.agree-area input{
    width: 1.25rem;
    height: 1.25rem;
    outline: 0;
    accent-color: #557a3d;
    cursor: pointer;
}
.agree-area button{
    -webkit-appearance: none;
    border-radius: 0;
    text-align: inherit;
    background: none;
    box-shadow: none;
    padding: 0;
    cursor: pointer;
    border: none;
    color: inherit;
    font: inherit;

    border-bottom: 1px solid #888;
    font-weight: 700;
}
#privacy{
    min-width: 300px;
    width: 50%;
    height: 60dvh;
    overflow-y: scroll;
    background-color: #fff;
    border-radius: 6px;
    padding: 2rem;
    margin: auto; border: 0;
}
#privacy::backdrop{
    background-color: hsla(0, 0%, 0%, 0.5);
}
.privacy-con .article-title{
    color: var(--green1);
    font-weight: 700;
    padding-top: 1.875rem;
    padding-bottom: .625rem;
}
.privacy-con ol{
    list-style: decimal;
    padding-left: 2rem;
}
.privacy-con ol > li > ol{
    list-style: disc;
}

/* 끝 */