/* all */
.container1600{width:1600px; margin:0 auto;}
.container1280{width:1280px; margin:0 auto;}
.container900{width:900px; margin:0 auto;}


@media only screen and (max-width: 1660px) {
    .container1600{width:auto; padding:0 4%;}
}

@media only screen and (max-width: 1280px) {
    .container1280{width:auto; padding:0 4%;}
}

@media only screen and (max-width: 960px) {
    .container900{width:auto; padding:0 4%;}
}

@media only screen and (max-width: 750px) {
    .container1600, .container1280, .container900{padding:0 6%;}
}

/* header */
.logo{position:fixed; top:3.5rem; left:50%; z-index:10; width:1600px; transform: translate(-50%, 0);}
.logo a{display:inline-block; padding:0.6rem 2rem 0; border-radius:100px; background-color:var(--color-white); box-shadow:0px 0px 12px rgba(0, 0, 0, 0.1);}

#hero{position:relative; padding:12px 4rem 0; background-color:var(--color-gray300);}
.hero-top-wrapper{position:relative; width:50%; height:94px; margin-left:auto; border-radius:0 25px 0 0; background-color:#1d2d10;}
.hero-top-wrapper::before{content:''; position:absolute; top:0; left:-145px; display:block; width:146px; height:94px; background:url('../images/hero-bg.svg') center/cover no-repeat;}

.hero-wrapper{width:100%; padding:0 0 50px; border-radius:25px 0 25px 25px; background-color:#1d2d10;}
.hero-wrapper div.container1280{display:flex; align-items:center; justify-content:space-between;}

.hero-title, .hero-img{position:relative; z-index:2;}
.hero-title h3{display:inline-block; padding:0.6rem 1rem 0.3rem; font-weight:500; line-height:1; border-radius:4px; background-color:#c6e2b0;}
.hero-title h1{margin-top:3.6rem; font-weight:400; line-height:1.4; letter-spacing:-2px; color:var(--color-white);}

.hero-img{width:422px;}
.hero-img img{width:100%;}

.hero-bg{position:absolute; top:12px; right:4rem; z-index:1; width:40%; height:calc(100% - 12px); border-radius:0 25px 25px 0; background:url('../images/hero-bg.png') left center/cover no-repeat; box-sizing:border-box; opacity: 0.4;}

#intro{padding:var(--space-60) 0; text-align:center; background-color:var(--color-gray300);}
.intro-wrapper h2 strong{display:inline-block; padding:0.4rem 0.4rem 0.2rem; line-height:1; color:#fff; font-weight:700; border-radius:4px; background-color:#33c34e;}
.intro-wrapper p{ margin-top:3rem; font-size:var(--body-size-16); opacity:0.5;}



@media only screen and (max-width: 1600px) {
    .logo{left:4%; width:92%; transform: translate(0, 0);}

    #hero{padding:12px 4% 0;}
    .hero-bg{right:4%;}
}

@media only screen and (max-width: 1440px) {
    .hero-wrapper div.container1280{width:auto; padding:0 4%;}
}

@media only screen and (max-width: 1024px) {
    .hero-wrapper{padding:6rem 0;}
    .hero-wrapper div.container1280{display:flex; align-items:center; justify-content:normal; flex-direction:column;}
    .hero-title{text-align:center;}
    .hero-img{margin-top:3rem;}
    .hero-bg{width:40%;}
}

@media only screen and (max-width: 750px) {
    .logo{left:6%; width:88%;}

    .hero-wrapper div.container1280{padding:0 6%;}
    .hero-img{width:100%;}
}

@media only screen and (max-width: 520px) {
    .hero-top-wrapper{width:40%;}
}


/* register */
#register{padding:var(--space-60) 0 var(--space-120) 0;}
.register-title{display:flex; align-items:flex-end; width:100%;}
.register-title h2{line-height:1;}
.register-title span{display:inline-block; margin-left:8px; margin-top:0.2rem; font-size:var(--body-size-16); opacity:0.5;}

.register-list{display:flex; flex-wrap:wrap; gap:2.4rem; margin-top:3rem;}
.register-list li{width:calc(50% - 1.2rem);}
.register-list li input[type="text"]{font-family:'remote sans', 'Noto Sans KR', sans-serif; width:100%; padding:1.6rem 2rem; font-size:var(--body-size-16); color:#9ba1ac; line-height:1; border:0px; border-radius:100px; background-color:#f3f3f3; box-sizing:border-box;}
.register-list li input[type="text"]::placeholder{color:#9ba1ac;}
.register-list li input[type="text"]:focus{border-color:dodgerblue; outline:none;}
.register-list li input[type="text"]:valid{background-color:#e8f0fe; color:var(--color-black);}

.privacy-wrapper{margin-top:var(--space-60);}
.privacy-title p{margin-top:1rem; font-size:var(--body-size-16); opacity:0.5;}

.privacy-item{display:flex; justify-content:space-between; align-items:center; padding:1.5rem 3rem; border-radius:12px 12px 12px 12px; background-color:var(--color-primary); box-sizing:border-box; transition: border-radius 0.2s ease-out; cursor:pointer;}
.privacy-contents{margin-bottom:4rem;}
.privacy-contents dl{margin-top:3rem;}
.privacy-item strong{display:inline-block; font-size:2rem; font-weight:700; line-height:1; color:#fff;}
.privacy-detail-list{overflow:auto; max-height:0; transition: max-height 0.2s ease-out, padding 0.2s ease-out; padding:0 3rem; font-size:var(--body-size-14); color:#9aa4b1; border-radius:0 0 12px 12px; background-color:var(--color-gray100); box-sizing:border-box;}

.privacy-icon{width:24px; height:24px;}

.agree-wrapper{margin-top:1rem; font-size:var(--body-size-16); color:#58667b;}
.agree-wrapper label{display:flex;}
.agree-wrapper label input[type="checkbox"]{margin-right:0.6rem;}

.privacy-detail-list h6{margin-bottom:1.5rem; font-size:var(--body-size-16);}
.privacy-num-list{margin-left:2rem; margin-bottom:2rem;}
.privacy-num-list > li{margin-bottom:1rem; list-style:lower-roman;}
.privacy-num-list > li:last-child{margin-bottom:0;}

.privacy-dot-list{margin-left:2rem; margin-top:0.6rem;}
.privacy-dot-list > li{margin-bottom:0.4rem; list-style:circle;}
.privacy-dot-list > li:last-child{margin-bottom:0;}

.register-information{margin-top:6rem; padding:3rem; border-radius:12px; background-color:var(--color-gray100);}
.register-information h6{margin-bottom:1rem; font-size:var(--body-size-16);}
.register-information p{font-size:var(--body-size-14); color:#9aa4b1;}


@media only screen and (max-width: 750px) {
    .register-title{flex-direction:column; align-items:normal;}
    .register-title span{display:block; margin-left:0; margin-top:0.5rem;}

    .register-list{flex-wrap:nowrap; flex-direction:column;}
    .register-list li{width:100%;}
}

/* 2025.04.07 */
.register-help{display:flex; flex-direction:column; width:100%; margin-top:1rem;}
.register-help li{display:flex; align-items:flex-start; gap:0.6rem; width:100%; margin-bottom:0.6rem; font-size:var(--body-size-16); color:#58667b;}
.register-help li input[type="checkbox"]{margin-top:0.5rem;}


/* footer */
footer{padding:3rem 0; background-color:var(--color-black);}
.footer-copy{padding-bottom:1rem; font-size:10px; color:var(--color-white); border-bottom:1px solid rgba(255, 255, 255, 0.15);}
.footer-wrapper{display:flex; justify-content:flex-end; align-items:center; gap:5rem; margin-top:1.6rem;}
.footer-link{display:flex; gap:1.4rem;}
.footer-link li a{display:inline-block; padding:4px 6px 2px; font-size:12px; line-height:1; color:var(--color-white);}
.footer-link li a:hover{color:var(--color-black); border-radius:10px; background-color:var(--color-white);}

.footer-sns{display:flex; gap:1.2rem;}
.footer-sns li a{position:relative; display:inline-block; width:32px; height:32px; border-radius:32px; background-color:var(--color-white);}
.footer-sns li a:hover{opacity: 0.85;}

.footer-sns li a svg{position:absolute; top:50%; left:50%; transform: translate(-50%, -50%);}
.icon-youtube svg{width:17px; height:12px;}
.icon-linkedin svg{width:18px; height:18px;}
.icon-twitter svg{width:18px; height:16px;}
.icon-instargram svg{width:18px; height:18px;}


@media only screen and (max-width: 750px) {
    .footer-copy{text-align:center;}
    .footer-wrapper{flex-direction:column; gap:4rem;}
    .footer-link{flex-wrap:wrap; justify-content:center; gap:1rem;}
}

/* confirm */
.confirm-btn{display:flex; justify-content:center; gap:1rem; margin-top:3rem;}

@media only screen and (max-width: 750px) {
    .confirm-btn{flex-direction:column; gap:1.6rem;}
}


/* 2025.05.22 Update */
@media only screen and (max-width: 750px) {
    .mobileNone{display:none;}
}