html,body {scroll-behavior: smooth;}
html {background-color: #131417;}
html::-webkit-scrollbar {display: none;}

#floatBtn {display: none; position: fixed; bottom: 43px; right: 36px; width: 46px; height: 46px; border-radius: 50%; background: url(/images/scroll_off.png) no-repeat center center / 100% auto; transition: .3s; z-index: 1;}
#floatBtn.on {background-image: url(/images/scroll_on.png);}
html:has(.content) #floatBtn {display: block;}

header {position: fixed; top: 0; left: 0; padding:0 45px ; width: 100%; height: 110px; display: flex; align-items: center; justify-content: space-between; z-index: 3; pointer-events: none; transition: background .3s;}
header .logo { width: 64px; aspect-ratio: auto 1/1; background: url(/images/logo.png) no-repeat center center / 64px auto; pointer-events: all;}
header .ham {position: relative; width: 25px; height: 19px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; z-index: 2; pointer-events: all;}
header .ham span { width: 100%; height: 3px; border-radius: 3px; background-color: white; transition: .3s;}
header .ham.on span:nth-of-type(1) {position: absolute; top:50%; left: 0; transform:translateY(-50%) rotate(45deg); }
header .ham.on span:nth-of-type(2) {display: none;}
header .ham.on span:nth-of-type(3) {position: absolute;top: 50%; left: 0; transform:translateY(-50%) rotate(-45deg); }
header .gnb {display: none; position: fixed; top: 0; left: 0; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100dvh; background-color: #131417;z-index: 1; pointer-events: all; }
header .gnb .nav {text-align: center;}
header .gnb .nav li {position: relative; width: fit-content; margin: auto;}
header .gnb .nav li::after {opacity: 0; transition:opacity .3s; content: ""; position: absolute; top: -10px; right: -80px; width: 58px; height: 58px; background: url(/images/ico_flower.png) no-repeat center / cover;}
header .gnb .nav li a {font-size: 72px; color: white;font-family: 'GmarketSans'; font-weight: 700; transition: color .3s;}
header .gnb .nav li + li {margin-top: 50px;}
header .gnb .nav li:hover::after {opacity: 1;}
header .gnb .nav li:hover a {color: #47D37F;}
header .bottom {position: absolute; bottom: 17px; width: 100%; text-align: center; line-height: 1.5; font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, 0.5);  pointer-events: all;}
header .gnb.on {display: flex;}

html:has(.gnb.on) {overflow: hidden;}

header .progressBox {position: fixed; top: 0; left: 0; width: 100%; height: 10px; transition: width .3s; z-index: 3;}
header .progressBar {width: 0; height: 100%; background-color: #47D37F;}

.topScrollNav {position: absolute; top: 38px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; z-index: 2;}
.topScrollNav a {position: relative; font-size: 20px; font-weight: 700; line-height: 28px; white-space: nowrap; letter-spacing: -0.05em; color: white; }
.topScrollNav a + a {padding-left: 60px; margin-left: 60px;}
.topScrollNav a + a::after {content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 1px; height: 24px; background-color: #D9D9D9;}

main {position: relative;}
main .intro {position: fixed; top: 0; left: 0; width: 100%; height: 100dvh; background-color: #131417; z-index: 30; opacity: 0; pointer-events: none;} 
main .intro .inner { position: absolute; top: 44%; left: 50%; transform: translate(-50%,-50%); width: 100%; max-width: 1040px; height: 100%; max-height: 795px;}
main .intro img {position: absolute;}
main .intro .intro-img01 {width: 582px; top: 50%; left: 50%; transform: translate(-50%,-50%); animation: introAni01 3s infinite linear; }
main .intro .intro-img02 {width: 236px; top: 20%; left: 0; animation: introAni02 3s infinite linear;}
main .intro .intro-img03 {width: 236px; top: 0; right: 8%; animation: introAni03 3s .2s infinite linear;}
main .intro .intro-img04 {width: 236px; bottom: 3%; right: 3%; animation: introAni02 3s .3s infinite linear;}
main .intro .loading {position: absolute; width: 100%; text-align: center; bottom: 74px;}
main .intro .loading .bar {position: relative; width: 238px; margin:0 auto 18px; height: 16px; overflow: hidden; border-radius: 10px; background-color: #47d37f30;}
main .intro .loading .bar::after {content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 0%;background-color: #47d37f; animation: loading 1s ease-out; animation-fill-mode: forwards;}
main .intro .loading p {font-size: 21px; font-weight: 700; color: #47D37F;font-family: 'Rajdhani';}

main .intro.on {opacity: 1; pointer-events: all;}


/*step1 모델 선택*/
main .step1 { position: fixed; top: 0; left: 0; width: 100%; height: 100dvh; display: flex; align-items: center; justify-content: center; background-color: white; z-index: 9;opacity: 0; pointer-events: none;} 
main .step1 .logo {position: absolute; top: 22px; left: 45px; width: 64px;}
main .step1 .inner {width: 100%; max-width: 1470px; margin: auto; padding: 0 20px;}
main .step1 .inner .top {display: flex; align-items: center; justify-content: center;}
main .step1 .inner .top img {width: 109px;}
main .step1 .inner .top strong {display: inline-block; margin-left: 28px; font-family: 'GmarketSans'; font-size: 80px; font-weight: 700;color: #231F20; }
main .step1 .inner .middle { margin: 63px 0 77px;}
main .step1 .inner .middle .swiper {width: 100%;}
main .step1 .inner .middle .swiper-slide label {display: block; transform: scale(0.95); transition: .3s linear; opacity: 0;}
main .step1 .inner .middle input {position: absolute; top: 5%; left: 5%; width: 48px; height: 48px; background: url(/images/chkBox.png) no-repeat center center / 100% auto; cursor: pointer; }
main .step1 .inner .middle input:checked { background-image: url(/images/chkBox-chk.png);}
main .step1 .inner .middle img {width: 100%;}
main .step1 .inner .bottom { display: flex; align-items: center; justify-content: center; margin: auto; padding: 5px 35px 0; height: 92px; border-radius: 50px; border: 3px solid #00c24e; font-family: 'GmarketSans'; font-size: 30px; font-weight: 700; color: #00C24E;}

main .step1 .inner .middle.ani .swiper-slide.slide1 label {animation: slide 0.5s linear; animation-fill-mode: forwards;}
main .step1 .inner .middle.ani .swiper-slide.slide2 label {animation: slide 0.5s 0.2s linear; animation-fill-mode: forwards;}
main .step1 .inner .middle.ani .swiper-slide.slide3 label {animation: slide 0.5s 0.5s linear; animation-fill-mode: forwards;}

main .step1.on {opacity: 1; pointer-events: all;}

/*step2*/
main .step2 {position: fixed; top: 0; left: 0; width: 100%; height: 100dvh; display: flex; align-items: center; justify-content: center; background-color: #131417; z-index: 8;} 
main .step2 img.model {position: absolute; bottom: 0; height: 100%; width: 95%; object-fit: contain; object-position: bottom; transform: scale(0.95); opacity: 0; }
main .step2 .marquee { opacity: 0; transition: .3s; position: absolute; top: 50%; left: 0; transform: translateY(-50%) rotate(-7deg);  width: 100%; color: #47D37F;}
main .step2 .marquee .flexBox {animation: marquee 60s linear;transform: translateX(-100%); display: flex; align-items: center;}
main .step2 .marquee .flexBox + .flexBox {margin-top: 35px;} 
main .step2 .marquee .flexBox:nth-of-type(odd) {padding-left: 500px;}
main .step2 .marquee .flexBox img { display: block; height: 126px; margin-right: 20px;}
main .step2 .bg {opacity: 0; transition: .3s; position: absolute; top: 0; left: 0; width: 100%; height: 100dvh; background-color: rgba(34, 34, 34, 0.4);}

main .step2 .marquee .flexBox img.model01 {height: 90%;}
main .step2 .marquee .flexBox img.model02 {height: 95%;}
main .step2 .marquee .flexBox img.model03 {height: 95%;}

main .step2.ani .bg {opacity: 1;}
main .step2.ani .marquee {opacity: 1;}
main .step2.ani img.model {animation: slide 0.5s linear; animation-fill-mode: forwards;}

main .step3 { height: 100dvh; overflow: hidden; background-color: #131417;}
main .step3 .inner {position: relative; height: 100%; width: 100%; max-width: 1920px; margin: auto; }
main .step3 .inner::after {animation: scale 2s linear infinite; content: ""; position: absolute; top: 15%; left: 42%; width: 58px; height: 58px; transform: scale(0.8); background: url(/images/ico_flower.png) no-repeat center / 100% auto;}
main .step3 .inner::before {animation: scale 2s 1s linear infinite; content: ""; position: absolute; top: 48%; left: 10%; width: 66px; height: 66px; transform: scale(0.8);  background: url(/images/ico_02.png) no-repeat center / 100% auto;}
main .step3 .imgBox {position: absolute; bottom: 0; height: 85%; left: 6%; z-index: 1;}
main .step3 .imgBox img {height: 100%;}
main .step3 .imgBox .link {position: absolute; top: 5%; left: 5%; width: 8vh; max-width: 76px; aspect-ratio: auto 1/1; border-radius: 50%;display: block; transform: scale(0.6); background-color: white; z-index: 1; opacity: 0; transition: opacity .3s; }
main .step3 .imgBox .link::after { position: absolute; content: ""; width: 21px; height: 3px; top: 50%; left: 50%; transform: translate(-50%,-50%); background-color: black;}
main .step3 .imgBox .link::before { position: absolute; content: ""; width: 21px; height: 3px; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(90deg); background-color: black;}

main .step3.ani .imgBox .link01 {animation: scaleOpac .5s linear; animation-fill-mode: forwards;}
main .step3.ani .imgBox .link02 {animation: scaleOpac .5s .2s linear; animation-fill-mode: forwards;}
main .step3.ani .imgBox .link03 {animation: scaleOpac .5s .3s linear; animation-fill-mode: forwards;}
main .step3.ani .imgBox .link04 {animation: scaleOpac .5s .4s linear; animation-fill-mode: forwards;}
main .step3.ani .imgBox .link05 {animation: scaleOpac .5s .5s linear; animation-fill-mode: forwards;}

main .step3 .imgBox .link.on {opacity: 1 !important;}

main .step3 .imgBox:has(img.model01) {max-height: 85%; left: 6%;}
main .step3 .imgBox:has(img.model01) .link01 {top: 5%; left: 62%;}
main .step3 .imgBox:has(img.model01) .link02 {top: 24%; left: 36%;}
main .step3 .imgBox:has(img.model01) .link03 {top: 30%; left: 63%;}
main .step3 .imgBox:has(img.model01) .link04 {top: 56%; left: 10%;}
main .step3 .imgBox:has(img.model01) .link05 {top: 64%; left: 90%;}
main .step3 .imgBox:has(img.model02) {max-height: 88%; left: 0;} 
main .step3 .imgBox:has(img.model02) .link01 {top:10%; left: 56%; } 
main .step3 .imgBox:has(img.model02) .link02 {top:35%; left: 35%; } 
main .step3 .imgBox:has(img.model02) .link03 {top:40%; left: 57%; } 
main .step3 .imgBox:has(img.model02) .link04 {top:46%; left: 7%; } 
main .step3 .imgBox:has(img.model02) .link05 {top:66%; left: 73%; } 
main .step3 .imgBox:has(img.model03) {max-height: 87%; left: 11%;}
main .step3 .imgBox:has(img.model03) .link01 { top: 6%; left: 63%;}
main .step3 .imgBox:has(img.model03) .link02 { top: 25%; left: 31%;}
main .step3 .imgBox:has(img.model03) .link03 { top: 33%; left: 61%;}
main .step3 .imgBox:has(img.model03) .link04 { top: 65%; left: 2%;}
main .step3 .imgBox:has(img.model03) .link05 { top: 61%; left: 90%;}

main .step3 .nav {position: absolute; top: 20%; right: 12%; width: 490px; z-index: 1;}
main .step3 .nav::after {animation: scale 2s 1s linear infinite; content: ""; position: absolute; top: 13%; right: -12%; width: 42px; height: 46px; transform: scale(0.8);  background: url(/images/ico_03.png) no-repeat center / 100% auto;}
main .step3 .nav a {transform: scale(0.95); opacity: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 92px; border-radius: 50px; border: 2px solid white; font-size: 32px; font-family:'GmarketSans'; font-weight: 700; color: white; transition: .3s;}
main .step3 .nav a.on,
main .step3 .nav a:hover {background-color: white; color: black;}
main .step3 .nav a + a {margin-top: 35px;}

main .step3.ani .nav a:nth-of-type(1) {animation: slide .5s .3s linear; animation-fill-mode: forwards; }
main .step3.ani .nav a:nth-of-type(2) {animation: slide .5s .4s linear; animation-fill-mode: forwards; }
main .step3.ani .nav a:nth-of-type(3) {animation: slide .5s .5s linear; animation-fill-mode: forwards; }
main .step3.ani .nav a:nth-of-type(4) {animation: slide .5s .6s linear; animation-fill-mode: forwards; }
main .step3.ani .nav a:nth-of-type(5) {animation: slide .5s .7s linear; animation-fill-mode: forwards; }

main .step3 .middle {position: absolute; bottom: 15%; left: 0; width: 100%; height: 72px; background-color: #47D37F; z-index: 0;}
main .step3 .middle .swiper {height: 100%;}
main .step3 .middle .swiper-wrapper {transition-timing-function: linear;}
main .step3 .middle .swiper-slide {display: flex; align-items: center;}
main .step3 .middle img { display: block; margin-right: 17px; width: 49px;}
main .step3 .middle p {font-size: 45px; font-weight: 900; color: white;}

main .step3 .bottom {position: absolute; bottom: 17px; width: 100%; text-align: center; line-height: 1.5; font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, 0.5); z-index: 1;}

/*animation*/
@keyframes loading {
    0% {width: 0%;}
    100% {width: 100%;}
}

@keyframes introAni01 {
    0% {transform: translate(-50%,-50%) scale(0.95);}
    50% {transform: translate(-50%,-50%) scale(1);}
    100% {transform: translate(-50%,-50%) scale(0.95);}
}
@keyframes introAni02 {
    0% {transform: rotate(0);}
    50% {transform: rotate(45deg);}
    100% {transform: rotate(0);}
}
@keyframes introAni03 {
    0% {transform: rotate(0);}
    50% {transform: rotate(-45deg);}
    100% {transform: rotate(0);}
}

@keyframes slide {
    0% {transform: scale(0.95); opacity: 0;}
    100% {transform: scale(1); opacity: 1;}
}

@keyframes scaleOpac {
    0% {transform: scale(0.6); opacity: 0;}
    100% {transform: scale(1); opacity: 0.3;}
}

@keyframes scale {
    0% {transform: scale(0.8);}
    50% {transform: scale(1);}
    100% {transform: scale(0.8);}
}

@keyframes marquee {
    0% {transform: translateX(-100%);}
    100% {transform: translateX(-400%);}
}

/*media*/
@media (max-height: 950px) {
    main .step1 .inner {max-width: 1390px;}
    main .step1 .inner .top img {width: 80px;}
    main .step1 .inner .top strong {font-size: 60px;}
    main .step1 .inner .middle {margin: 40px auto 55px;}
    main .step1 .inner .bottom {height: 85px; font-size: 28px;}
    main .step3 .nav {top: 8%;}
}
@media (max-width: 1900px) {
    main .step3 .nav {right: 7%;}
    main .step3 .imgBox:has(img.model01) {left: 3%;}
} 
@media (max-width: 1500px) {
    main .step3 .nav {top: 10%; right: 7%; width: 450px;}
    main .step3 .nav a { height: 85px; font-size: 25px;}
    main .step3 .nav a + a {margin-top: 20px;}
    main .step3 .imgBox:has(img.model01) {left: 0%; height: 75%;}
    main .step3 .imgBox:has(img.model02) {height: 70%;}
    main .step3 .imgBox:has(img.model03) {left: 1%; height: 80%;}
} 
@media (max-width: 1200px) {
    main .step3 .nav {right: 3%;}
    main .step3 .imgBox:has(img.model01) {bottom: -10%; left: -10%; height: 75%;}
    main .step3 .imgBox:has(img.model02) {height: 65%;}
    
    header .gnb .nav li a {font-size: 40px;}
    header .gnb .nav li::after {right: -50px; width: 40px; height: 40px;}
    header .gnb .nav li + li {margin-top: 25px;}

    .topScrollNav a {font-size: 16px;}
    .topScrollNav a + a {padding-left: 35px; margin-left: 35px;}
    .topScrollNav a + a::after {height: 16px;}
} 
@media (max-width: 1000px) {
    main .intro .inner {max-width: 650px; max-height: 500px;}
    main .intro .intro-img01 {width: 60%; max-width: 380px;}
    main .intro .intro-img02 {width: 22%; max-width:150px;}
    main .intro .intro-img03 {width: 22%; max-width:150px;}
    main .intro .intro-img04 {width: 22%; max-width:150px; bottom: 2%; right: 1%;}
    
    main .step1 .inner .top img {width: 70px;}
    main .step1 .inner .top strong {font-size: 45px;}
    
    main .step3 .inner {max-width: 450px;}
    main .step3 .inner::after { top: 59%; left: 77%; width: 26px; height: 26px;}
    main .step3 .inner::before { top: 75%; left: 7%; width: 34px; height: 34px;}
    main .step3 .nav {left: 50%; transform: translateX(-50%); z-index: 0;}
    main .step3 .nav::after { top: 69vh; width: 28px; height: 32px;}
    main .step3 .nav a {height: 60px; font-size: 20px;}
    main .step3 .middle {display: none;}
    main .step3 .imgBox:has(img.model01) {left: 50%; transform: translate(-50%); bottom: -9%; height: 50%;}
    main .step3 .imgBox:has(img.model02) {left: 50%; transform: translate(-50%); bottom: -9%; height: 50%;}
    main .step3 .imgBox:has(img.model03) {left: 50%; transform: translate(-50%); bottom: -9%; height: 50%;}
    
    main .step3 .imgBox .link {width: 4vh;}
    main .step3 .imgBox .link::after,
    main .step3 .imgBox .link::before {width: 15px; height: 2px;}
    main .step3 .bottom {display: none;}
} 

@media (max-width: 900px) {

    .content {padding-top: 220px;}

    .topScrollNav {top: 120px; flex-wrap: wrap; justify-content: center; width: 100%; }
    .topScrollNav a {font-size: 18px;}

    .topScrollNav:has(+ .content.healthChk) { max-width: 400px;}
    .topScrollNav:has(+ .content.healthChk) a:nth-of-type(3) {margin-left: 0; padding-left: 0;}
    .topScrollNav:has(+ .content.healthChk) a:nth-of-type(3)::after {display: none;}
}

@media (max-width: 800px) {
    header.on {background-color: rgba(0, 0, 0, 0.5);}

    main .step2 .marquee {top: 30%;}
    main .step2 .marquee .flexBox {transform: translateX(-100%); height: 70px;}
    main .step2 .marquee .flexBox img {height: 70px;}
    main .step2 .marquee .flexBox + .flexBox {margin-top: 20px;}
    main .step2 img.model {width: 100%; height: 73%; object-fit: cover;}
    main .step2 .marquee .flexBox:nth-of-type(odd) {padding-left: 290px;}
    
    header .gnb .nav li a { font-size: clamp(15px, 6vw,25px);}
    header .gnb .nav li::after {top: 0; right: -25px; width: 18px; height: 18px;}

}

@media (max-width: 600px) {
    header { padding: 0 15px; height: 70px;}
    header .logo {width: 40px; background-size: 40px auto;}
    header .bottom {font-weight: 300; font-size: 12px;}
    header .progressBox {height: 5px;}
    
    #floatBtn { right: 15px; width: 35px; height: 35px;}
    
    .content {padding-top: 150px;} 

    .topScrollNav {top: 82px; }
    .topScrollNav a {font-size: 14px;}
    .topScrollNav a + a {margin-left: 15px; padding-left: 15px;}
    .topScrollNav a + a::after {height: 12px;}

    .topScrollNav:has(+ .content.healthChk) {max-width: 270px;}
    
    main .intro .inner {top: 50%; max-width: 600px; height: 74vw; max-height: 500px;}
    main .intro .loading {bottom: 50px;}
    
    main .step1 .logo {display: none;}
    main .step1 .inner {padding: 0;}
    main .step1 .inner .top img {width: 48px;}
    main .step1 .inner .top strong {margin-left: 15px; font-size: clamp(24px, 8vw, 28px);}
    main .step1 .inner .middle {margin: 10% 0;}
    main .step1 .inner .middle input {width: 46px;}
    main .step1 .inner .bottom {height: 50px; font-size: 20px; border-width: 2px;}
    
    main .step3 .inner::after {top: 63%; left: 74%;}
    main .step3 .inner::before {top: 79%; left: 7%;}
    main .step3 .nav { top: 80px; width:90%;}
    main .step3 .nav::after {right: 0;}
    main .step3 .nav a {height: 48px;}
    main .step3 .nav a + a {margin-top: 10px;}
    main .step3 .imgBox .link::after,
    main .step3 .imgBox .link::before {width: 10px; height: 1px;}
    main .step3 .imgBox:has(img.model01) {left: 46%; bottom: -15%; height: 54%;}
    main .step3 .imgBox:has(img.model01) .link02 {top: 16%;}
    main .step3 .imgBox:has(img.model01) .link04 {top: 41%; left: 25%;}
    main .step3 .imgBox:has(img.model01) .link05 {top: 44%; left: 74%;}
    main .step3 .imgBox:has(img.model02) .link04 {top: 69%; left: 21%;}
    main .step3 .imgBox:has(img.model03) {bottom: -14%;}
    main .step3 .imgBox:has(img.model03) .link04 {top: 56%;}
}

@media (max-width: 400px) {
    main .step1 .inner .bottom {padding: 3px 20px 0; font-size: 16px;}
}



/*팝업*/
main .mainPopup_wrap {opacity: 0; position: fixed; top:0; left:0; width:100%; height:100%; z-index:10;}
main .mainPopup { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 95%; height: 95dvh; max-width: 1760px; max-height: 960px; display: flex; flex-wrap:wrap; align-items: center; justify-content: center; padding: 60px 20px 10px; border-radius: 20px; background-color: white; } 
main .mainPopup .top .closeBtn {position: absolute; top: 30px; right: 25px; width: 72px; height: 72px; background: url(/images/close_b.png) no-repeat center center / 100%;}
main .mainPopup .middle .agreeBox {text-align: center;}
main .mainPopup .middle .agreeBox p { display: block; margin-bottom: 26px; font-family: 'GmarketSans'; font-size: 26px; letter-spacing: -0.02em; }
main .mainPopup .middle .agreeBox button { padding: 25px 50px; border-radius: 50px;font-family: 'GmarketSans'; word-break: keep-all; font-size: 28px; font-weight: 500; letter-spacing: -0.04em; color: white; background-color: #E8334A; text-align: center; vertical-align: middle;}
main .mainPopup .middle .agreeBox label {display: flex; align-items: center; justify-content: center; margin-top: 20px;}
main .mainPopup .middle .agreeBox label input {width: 24px; height: 24px; border-radius: 3px; border: 1px solid #666666;}
main .mainPopup .middle .agreeBox label input:checked {border: none; background: url(/images/ico_checked.png) no-repeat center center / cover;}
main .mainPopup .middle .agreeBox label span {display: inline-block; margin-left: 8px; font-size: 16px; font-weight: 500; letter-spacing: -0.02em; color: #666666; }
main .mainPopup .bottom {text-align: center; padding:0 0px 30px;}
main .mainPopup .bottom p { font-size: 12px; letter-spacing: -0.02em; line-height: 1.7; text-align: center; word-break: keep-all; color: #AAAAAA;  }
main .mainPopup .color {font-family: 'GmarketSans'; font-size: inherit;font-weight:inherit;}
main .mainPopup .color.r {color: #E8334A;}
main .mainPopup .color.o {color: #F36633;}
main .mainPopup .color.g {color: #00C24E;}

main .mainPopup_wrap .bg {width:100%; height:100%; background:rgba(0,0,0,.5);}

main #popup1 { flex-direction: column; z-index: 12;}
main #popup1 .top .logo {position: absolute; top: 30px; left: 40px; width: 155px;}
main .mainPopup .middle {flex-grow: 1; display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%;}

main .mainPopup_wrap.on {opacity:1;}

main #popup1 .middle .titBox {text-align: center;}
main #popup1 .middle .titBox strong {position: relative; top: 20px; font-family: 'GmarketSans'; font-size: 152px; font-weight: 500; letter-spacing: -0.02em; color: #333; }
main #popup1 .middle .titBox strong small {position: relative; top: -31%; right: -2px; font-size: 26px; font-weight: 700; color: #AAAAAA; }
main #popup1 .middle .titBox p {font-size: 30px; font-weight: 700; line-height: 1.4; letter-spacing: -0.02em; }
main #popup1 .middle .titBox p small {position: relative; font-size: inherit; top: -2px; font-family:inherit;font-weight: inherit;color: #AAAAAA;}
main #popup1 .middle .titBox p + p {font-family: 'GmarketSans'; font-weight: 500; margin-top: 5px;}
main #popup1 .middle .banner {display: flex; align-items: center; justify-content: center; width: 95%; max-width: 1586px; height: 168px; margin: 63px auto 71px; border-radius:110px; background-color: #FDEAED;}
main #popup1 .middle .banner p {font-family: 'GmarketSans'; font-size: 52px; font-weight: 500; letter-spacing: -0.06em; }
main #popup1 .middle .banner p br {display: none;}
main #popup1 .middle .agreeBox {margin-bottom: 60px;}

main #popup2 { flex-direction: column; z-index: 11;}
main #popup2 .tit {margin: 80px auto; font-family: 'GmarketSans'; font-size: 52px; font-weight: 500; word-break: keep-all; letter-spacing: -0.06em; text-align: center; color: #E8334A; }
main #popup2 .flexBox {display: flex; margin-top:30px; }
main #popup2 .flexBox .item {padding: 50px 20px 35px; text-align: center; background-color: #FAFAFA; border-radius: 30px;}
main #popup2 .flexBox .item img {display: inline-block; margin:0 auto 30px; width: 83px;}
main #popup2 .flexBox .item p {font-family: 'GmarketSans'; font-size: 30px;font-weight: 500; text-align: center; color: #333; line-height: 1.5; letter-spacing: -0.02em;  }
main #popup2 .flexBox .item small {position: relative; font-size: inherit; font-family: inherit; font-weight: inherit; color: #AAAAAA;}
main #popup2 .flexBox .item + .item {margin-left: 40px;}


@media (max-width:1500px), (max-height:1000px) {
    main .mainPopup .top .closeBtn { top: 30px; right: 30px; width: 50px; height: 50px;}
    main .mainPopup .middle .agreeBox p {font-size: 24px;}
    main .mainPopup .middle .agreeBox button {font-size: 22px;}
    
    main #popup1 .top .logo { top: 30px; left: 40px; width: 115px;}
    main #popup1 .middle .titBox strong {font-size: 135px;}
    main #popup1 .middle .titBox p {font-size: 26px;}
    main #popup1 .middle .banner {height: 125px; max-width: 1100px; margin: 50px auto 60px;}
    main #popup1 .middle .banner p {font-size: 32px;}
    main #popup1 .middle .agreeBox {margin-bottom: 50px;}
  
    main #popup2 .tit { margin: 60px auto; font-size: 35px;}
    main #popup2 .flexBox .item p {font-size: 22px;}
    main #popup2 .flexBox .item + .item {margin-left: 25px;}
}

@media (max-width:950px), (max-height:850px) {
    main .mainPopup .top .closeBtn { top: 30px; right: 30px; width: 50px; height: 50px;}
    main .mainPopup .middle .agreeBox p {font-size: 22px;}
    main .mainPopup .middle .agreeBox button { padding: 11px 50px; font-size: 22px;}
    
    main #popup1 .top .logo { top: 30px; left: 40px; width: 115px;}
    main #popup1 .middle .titBox strong {font-size: 120px;}
    main #popup1 .middle .titBox p {font-size: 24px;}
    main #popup1 .middle .banner {height: 90px; max-width: 930px; margin: 3% auto;}
    main #popup1 .middle .banner p {font-size: 24px;}
    main #popup1 .middle .agreeBox {margin-bottom: 30px;}
  
    main #popup2 .tit {font-size: 24px;}
    main #popup2 .flexBox {flex-direction: column; width: 100%; max-width: 700px;}
    main #popup2 .flexBox .item {display: flex; align-items: center;justify-content: flex-start; width: 100%; padding: 20px; border-radius: 20px;}
    main #popup2 .flexBox .item img { width: 70px; margin: 0 15px 0 0;}
    main #popup2 .flexBox .item p {font-size: 20px; text-align: left;}
    main #popup2 .flexBox .item p br {display: none;}
    main #popup2 .flexBox .item + .item {margin: 20px 0 0;}
}

@media (max-width:700px) {
    main .mainPopup { height: 96dvh; justify-content: flex-start; padding: 30px 15px 0; overflow-y: auto;}
    main .mainPopup .top .closeBtn { top: 15px; right: 15px; width: 32px; height: 32px;}
    main .mainPopup .middle {justify-content: flex-start; margin-top: 20px;}
    main .mainPopup .middle .agreeBox p { margin-bottom: 15px; max-width: 215px; word-break: keep-all; font-size: 16px;}
    main .mainPopup .middle .agreeBox label input {width: 18px; height: 18px; border-radius: 2px;}
    main .mainPopup .middle .agreeBox label span {font-size: 13px;}
    main .mainPopup .bottom p {font-size: 10px;}
   
    
    main #popup1 .top .logo {position: relative; top: 0px; left: 50%; transform: translateX(-50%); width: 152px; }
    main #popup1 .middle .titBox strong { top: 10px; font-size: 60px;}
    main #popup1 .middle .titBox strong small { top: -24%; font-size: 18px;}
    main #popup1 .middle .titBox p {font-size: 18px;}
    main #popup1 .middle .titBox p small {top: -1px;}
    main #popup1 .middle .titBox p + p {margin-top: 3px;}
    main #popup1 .middle .banner {padding: 23px 20px; height: auto; max-width: 335px; margin: 30px auto; text-align: center; border-radius: 20px;}
    main #popup1 .middle .banner p {font-size: 22px; line-height: 1.4;}
    main #popup1 .middle .banner p br {display: block;}
    main #popup1 .middle .agreeBox {margin-bottom: 70px;}
    
    main #popup2 .tit { margin: 30px auto; font-size: 22px; max-width: 320px;}
	main #popup2 .flexBox {margin-top:0;}
    main #popup2 .flexBox .item p {font-size: 16px;}
    main #popup2 .flexBox .item img {width: 55px;}
    main #popup2 .flexBox .item + .item {margin-top: 15px;}
    main #popup2 .middle {margin: 30px 0 80px;}
    main #popup2 .middle .agreeBox button {max-width: 282px; font-size: 20px;}

}