html, body {
    width : 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    min-width: 750px;
    scroll-behavior: smooth;
}
*::-webkit-scrollbar {
    width: 10px;
    height: 0px;
}
*::-webkit-scrollbar-thumb {
    background-color: #2f354273;
    border-radius: 10px;
}
*::-webkit-scrollbar-track {
    background-color: rgb(0,0,0,0);
    border-radius: 10px;
    box-shadow: inset 0px 0px 5px white;
}
* {
    transition: all 500ms, z-index 100ms;
}
.text-block {
    display: inline-block;
    white-space: nowrap;
}
a { 
    text-decoration: none ;
    color: unset;
} 

.page-width {
    width : 1466px;
    padding: 0px 50px 0px 50px;
}
@media screen and (max-width: 1466px) {
    .page-width {
        width: calc(750px - 100px);
        padding : 0px 50px 0px 50px;
    }
}
.header {
    width: 100%;
    height: 100px;
    position: fixed;
    display: flex;
    justify-content: center;
    font-family: 'Nunito';
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 29px;
    letter-spacing: 0.02em;
    z-index: 100;
    background-image: linear-gradient(to right, #FFED4E, #FFD320);
}
.header .mobile-header {
    display: none;
}

.header .page-width {
    display: flex;
    height: 100%;
    align-items: center;
    position: relative;
    justify-content: center;
}
.header .left {
    position: absolute;
    left: 50px;
}
.header .mid a {
    color: #110000;
    margin: 0px 40px 0px 40px;
}
.header .dl-bt {
    width: 174px;
    height: 43px;
    border: 2px solid #653b0a;
    color: #130000;
    display: flex;
    align-items: center;
    justify-content: center;    border-radius: 50px;
}
.header .right {
    position: absolute;
    right: 50px;
    display: flex;
    align-items: center;
}
.header .right a {
    color: #ffffff;
    margin: 0px 15px 0px 15px;
}
.header .main-icon {
    background-image: url(./img/main-title-icon.png);
    background-size: 100%;
    width: 244px;
    height: 50px;
}
.header .mobile-menu-bt {
    position: absolute;
    width: 50px;
    height: 50px;
    background-image: url(./img/mobile-menu-bt.png);
    background-repeat: no-repeat;
    background-position: center;
    right: 50px;
    display: none;
    transition: all 0ms;
}
.header-activity .mobile-menu-bt {
    background-image: url(./img/mobile-close-menu-bt.png);
}
#join-bt,
#mypage-bt,
#logout-bt,
#login-bt {
    cursor: pointer;
}
@media screen and (max-width: 1466px) {
    .header .main-icon {
        width: 260px;
        height: 54px;
    }
    .header .mid,
    #join-bt,
    #logout-bt,
    #mypage-bt,
    #login-bt {
        display: none;
    }
    .header .mobile-menu-bt { 
        display: unset;
    }
    .header .right a {
        margin-right: 70px;
    }

    .header .mobile-header {
        display: block;
        background: rgba(0, 0, 0, 0.767);
        width: 100%;
        height: 100%;
        position: absolute;
        opacity: 0;
        z-index: -1;
    }
    .header-activity .mobile-header { 
        position: fixed;
        opacity: 1;
        z-index: 0;
    }
    .header .mobile-header .inner {
        width: 100%;
        height: 500px;
        position: fixed;
        top: -500px;
        left: 0px;
        background: rgba(255, 212, 33, 0.9);
        text-align: right;
        font-family: Avenir;
        font-size: 28px;
        font-style: normal;
        font-weight: 800;
        line-height: 45px;
        letter-spacing: 0.02em;
        text-align: right;
        border-radius: 0px 0px 50px 50px;
    }
    .header-activity .mobile-header .inner {
        top: 0px;
    }
    .header .mobile-header .inner div {
        margin: 10px 50px 10px 0px;
        margin-right: 50px;
        
    }
    .header .mobile-header .inner div:first-child {
        margin-top: 140px;
    }
    .header .mobile-header #login-bt,
    .header .mobile-header #join-bt {
        display: inline-block;
        color: #FFFFFF;
    }
    
}


.main-page {
    width: 100%;
    height: 907px;
    background-image: linear-gradient(to right,  #FFED4E, #FFD320);
}

.main-page .page-width {
    position: relative;
    z-index: 1;
}
.main-page .left-star {
    width: 187px;
    height: 147px;
    background-image: url(./img/main/left-star.png);
    position: absolute;
    top: 432px;
    left: 0px;
}
.main-page .right-star {
    width: 271px;
    height: 262px;
    background-image: url(./img/main/right-star.png);
    position: absolute;
    top: 155px;
    right: 0px;
    background-size: 100%;
    background-repeat: no-repeat;
}
.main-page .float-saly {
    width: 230px;
    height: 178px;
    background-image: url(./img/main/float-saly.png);
    position: absolute;
    top: 464px;
    right: 71px;
    background-size: 100%;
}
.main-page .circle-dl-bt {
    width: 214px;
    height: 214px;
    position: absolute;
    top: 730px;
    right: -150px;
    background-size: 100%;
    z-index: 99;
    background-color: #ffd625;
    border-radius: 100%;
}
.dl-bt {
    cursor: pointer;
}
@media screen and (max-width: 1920px) {
    .main-page .circle-dl-bt {
        right: 60px
    }
  }
.main-page .circle-dl-bt .back {
    width: 214px;
    height: 214px;
    background-image: url(./img/main/info-circle-back.png);
    background-size: 90%;
    position: absolute;
    top: 0px;
    right: 0px;
    background-position: center;
    background-repeat: no-repeat;
}
.main-page .circle-dl-bt .icon {
    width: 214px;
    height: 214px;
    background-image: url(./img/main/info-circle-icon.png);
    background-size: 100%;
    position: absolute;
    top: 0px;
    right: 0px;
}
.main-page .pc {
    width: 739px;
    height: 535px;
    background-image: url(./img/main/pc.png);
    position: absolute;
    top: 170px;
    right: 0px;
    background-size: 100%;
    background-repeat: no-repeat;
}
.main-page .front {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.main-page .front .big-text {
    font-family: Black Han Sans;
    font-size: 75px;
    font-style: normal;
    font-weight: 400;
    line-height: 94px;
    letter-spacing: 0em;
    text-align: left;
    margin-top: 193px;
    color: #481f05;
}
.main-page .front .description {
    font-family: Noto Sans KR;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 33px;
    letter-spacing: -0.02em;
    text-align: left;
    margin-top: 17px;
}
.main-page .front .mobile-description {
    display: none;
    font-family: Noto Sans KR;
    font-size: 26px;
    font-style: normal;
    font-weight: 500;
    line-height: 43px;
    letter-spacing: -0.03em;
    text-align: left;
}
.main-page .front .dl-bt {
    width: 263px;
    height: 60px;
    background-image: url(./img/main/dl-bt.png);
    margin-top: 60px;
}


@media screen and (max-width: 1466px) { 
    .main-page {
       height: 1330px;
    }
    .main-page .front .big-text {
        font-family: Black Han Sans;
        font-size: 85px;
        font-style: normal;
        font-weight: 400;
        line-height: 106px;
        letter-spacing: 0em;
        text-align: left;
        margin-top: 130px;
    }
    .main-page .front .description {
        display: none;
    }  
    .main-page .front .mobile-description {
        display: unset;

    }
    .main-page .front .dl-bt {
        margin-top: 30px;
    }
    .main-page .pc {
        top: 725px;
        width: 639px;
        right: unset;
        left: 50px;
    }
    .main-page .right-star {
        top: 578px;
        width: 201px;
    }
    .main-page .circle-dl-bt {
        width: 172px;
        height: 172px;
        display: flex;
        align-items: center;
        justify-content: center;
        top: 1210px;
    }
    .main-page .circle-dl-bt .back {
        width: 133px;
        height: 133px;
        background-image: url(./img/main/mobile-info-circle-back.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100%;
        position: absolute;
        top: unset;
        right: unset;
    }
    .main-page .left-star {
        width: 187px;
        height: 147px;
        background-image: url(./img/main/mobile-left-star.png);
        position: absolute;
        top: 138px;
        left: unset;
        right: 0px;
    }
    .main-page .float-saly {
        top: 814px;
        right: 19px;
    }
}

.universe-page {
    position: relative;
    overflow: hidden;
    height: 1060px;
    background-image: url(./img/background-space.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    -webkit-mask-image: url(./img/mask-wave1.png), linear-gradient(to bottom, rgb(0 0 0), rgb(0 0 0));
    -webkit-mask-position: right 0px, 0px 100px;
    -webkit-mask-size: 1920px 100px,100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-image: url(./img/mask-wave1.png), linear-gradient(to bottom, rgb(0 0 0), rgb(0 0 0));
    mask-position: right 0px, 0px 100px;
    mask-size: 1920px 100px,100% 100%;
    mask-repeat: no-repeat;
    margin-top: -100px;

    display: flex;
    flex-direction: column;
    align-items: center;
}


@media screen and (min-width: 1920px) {
    .universe-page { 
        -webkit-mask-size: 100% 100px,100% 100%;
        mask-size: 100% 100px,100% 100%;
    }
}
.universe-page .description1 {
    width: 1546px;
    height: 630px;
    background-image: url(./img/universe-page/description1.png?ver=2021-11-26-2);
    cursor: grab;

}
.universe-page .small-text {
    font-family: 'Black Han Sans';
    font-size: 36px;
    font-style: normal;
    font-weight: 400;
    line-height: 36px;
    letter-spacing: 0em;
    text-align: center;
    color: #FFFFFF;
    margin-top: 40px;
}
.universe-page .big-text {
    font-family: 'Black Han Sans';
    font-size: 65px;
    font-style: normal;
    font-weight: 400;
    line-height: 65px;
    letter-spacing: 0em;
    text-align: center;
    color: #FFED4E;
    margin-top: 15px;
}
.universe-page .scroll-box {
    margin-top: 140px;
    width: 100%;
    height: 630px;
    overflow: hidden;
    overflow-x: auto;
    display: flex;
    justify-content: center;
}
@media screen and (max-width: 1466px) {
    .universe-page .scroll-box { 
        max-width: 1238px;
        display: block;
        overflow-x: auto;
        margin-top: 200px;
        height: 550px;
    }
    .universe-page .description1 {
        width: 1238px;
        background-repeat: no-repeat;
        height: 619px;
        background-size: 100%;
    }

}



.cultrue-page {
    position: relative;
    overflow: hidden;
    height: 1080px;
    background-image: url(./img/background-white.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    -webkit-mask-image: url(./img/mask-wave2.png), linear-gradient(to bottom, rgb(0 0 0), rgb(0 0 0));
    -webkit-mask-position: center 0px, 0px 100px;
    -webkit-mask-size: 1920px 100px, 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-image: url(./img/mask-wave1.png), linear-gradient(to bottom, rgb(0 0 0), rgb(0 0 0));
    mask-position: center 0px, 0px 100px;
    mask-size: 1920px 100px, 100% 100%;
    mask-repeat: no-repeat;
    margin-top: -100px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
@media screen and (min-width: 1920px) {
    .cultrue-page { 
        -webkit-mask-size: 100% 100px,100% 100%;
        mask-size: 100% 100px,100% 100%;
    }
}
.cultrue-page .text1 {
    font-family: Noto Sans KR;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 64px;
    letter-spacing: -0.03em;
    text-align: left;
    margin-top: 200px;
    color: #481F05;
}
.cultrue-page .text1 span {
    color: #FFD320;
}
.cultrue-page .text2 {
    font-family: Noto Sans KR;
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-top: 20px;
    color: #787878;
    text-align: center;
}
.cultrue-page .text2 span {
    color: #FFD320;
}
.cultrue-page .scroll {
    position: relative;
    width: 100%;
    margin-top: 40px;
    overflow-x: scroll;
    height: 590px;
    white-space: nowrap;
    text-align: center;
    z-index: 99;
    cursor: grab;
}
.cultrue-page .scroll .inner {
    width: unset;
    text-align: center;
    display: inline-flex;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
}
.cultrue-page .scroll .item {
    width: 477px;
    height: 543px;
    display: inline-block;
    margin: 0px 10px 0px 10px;
}
.cultrue-page .scroll .item::nth-child(1) {
    scroll-snap-align: start;
}
.cultrue-page .scroll .item .pic {
    width: 100%;
    height: 334px;
}
.cultrue-page .scroll .item .title {
    font-family: 'Nunito';
    font-size: 34px;
    font-style: normal;
    font-weight: 600;
    margin-top: 30px;
    margin-bottom: 12px;
    text-align: left;
}
.cultrue-page .scroll .item .description {
    font-family: 'Noto Sans KR';
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    letter-spacing: -0.03em;
    text-align: left;
}
@media screen and (max-width: 1466px) {
    .cultrue-page .text1 {
        font-family: Noto Sans KR;
        font-size: 40px;
        font-style: normal;
        font-weight: 700;
        line-height: 64px;
        letter-spacing: -0.03em;
        text-align: left;
        margin-top: 200px;
        color: #481F05;
        width: 610px;
        text-align: center;
    }



}


.main-page .float-rocket {
    width: 448px;
    height: 577px;
    background-image: url(./img/cultrue-page/rocket.png);
    position: absolute;
    top: 1722px;
    right: 0px;
    z-index: 1;
    background-size: 100%;
}
@media screen and (max-width: 1466px) {
    .main-page .float-rocket {
        width: 215px;
        height: 351px;
        background-image: url(./img/cultrue-page/mobile-rocket.png);
        top: 2152px;
    }

}


.butterland-page {
    position: relative;
    overflow: hidden;
    height: 850px;
    background-image: url(./img/background-star.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    -webkit-mask-image: url(./img/mask-wave3.png), linear-gradient(to bottom, rgb(0 0 0), rgb(0 0 0));
    -webkit-mask-position: center 0px, 0px 100px;
    -webkit-mask-size: 1920px 100px,100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-image: url(./img/mask-wave1.png), linear-gradient(to bottom, rgb(0 0 0), rgb(0 0 0));
    mask-position: center 0px, 0px 100px;
    mask-size: 1920px 100px,100% 100%;
    mask-repeat: no-repeat;
    margin-top: -100px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
@media screen and (min-width: 1920px) {
    .butterland-page { 
        -webkit-mask-size: 100% 100px,100% 100%;
        mask-size: 100% 100px,100% 100%;
    }
}

.butterland-page .small-text {
    font-family: 'Nunito';
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 29px;
    letter-spacing: 5px;
    margin-top: 260px;
    color: #FCE83B;
}
.butterland-page .title {
    font-family: Black Han Sans;
    font-size: 75px;
    font-style: normal;
    font-weight: 400;
    line-height: 94px;
    letter-spacing: 0em;
    text-align: center;
    color: #FCE83B;
    margin-top: 15px;
}
.butterland-page .mobile-description,
.butterland-page .description {
    font-family: Noto Sans KR;
    font-size: 23px;
    font-style: normal;
    font-weight: 500;
    line-height: 44px;
    letter-spacing: -0.02em;
    text-align: center;
    color: #FCE83B;
    margin-top: 100px;
}
.butterland-page .mobile-description {
    display: none;
}
@media screen and (max-width: 1466px) {
    .butterland-page .mobile-description {
        display: unset;
    }
    .butterland-page .description { 
        display: none;
    }
    .butterland-page .small-text {
        margin-top: 200px;
    }
}


.platform-page {
    position: relative;
    width: 100%;
    height: 525px;
    background-image: linear-gradient(to right,  #FFED4E, #FFD320);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.platform-page .page-width {
    height: 100%;
    position: relative;
}
.platform-page .homie {
    width: 805px;
    height: 655px;
    background-image: url(./img/platform-page/homie.png);
    position: absolute;
    top: 40px;
    left: -70px;
}
.platform-page .browser {
    width: 386px;
    height: 386px;
    background-image: url(./img/platform-page/browser.png);
    position: absolute;
    top: 0px;
    left: 430px;
}
.platform-page .textbox {
    width: 630px;
    position: absolute;
    right: 50px;
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: center;
}
.platform-page .title {
    font-family: Noto Sans KR;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 51px;
    letter-spacing: -0.02em;
    text-align: left;
    color: #481F05;
}
.platform-page .small-text {
    font-family: Noto Sans KR;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 29px;
    letter-spacing: -0.03em;
    text-align: left;
    color: #1F1F1F;
    margin-top: 10px;
}
.platform-page .preview-bt {
    width: 194px;
    height: 60px;
    background-image: url(./img/platform-page/preview-bt.png);
    background-size: 100%;
    margin-top: 45px;
}
.platform-page .light {
    width: 750px;
    height: 920px;
    background-size: 100%;
    background: url(./img/cultrue-page/light.png);
    position: absolute;
}
@media screen and (max-width: 1466px) {
    .platform-page {
        height: 940px;
    }
    .platform-page .homie {
        top: unset;
        bottom: -210px;
        background-size: 100%;
        background-repeat: no-repeat;
        width: 727px;
    }
    .platform-page .browser {
        top: unset;
        bottom: 100px;
        right: -11px;
        left: unset;
        background-size: 100%;
        width: 320px;
        background-repeat: no-repeat;
    }
    .platform-page .textbox {
        width: 100%;
        position: absolute;
        left: 50px;
        display: flex;
        height: 50%;
        flex-direction: column;
        justify-content: center;
    }
    .platform-page .title {
        font-size: 40px;
        width: 550px;
        margin-bottom: 30px;
    }
    .platform-page .small-text {
        font-size: 25px;
    }
    .platform-page .light {
        top: 260px;
    }
}




.contact-page { 
    position: relative;
    width: 100%;
    height: 697px;
    background-color: #fff053;
    background-image: url(./img/contact-page/background.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.contact-page .inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.contact-page .title {
    font-family: Black Han Sans;
    font-size: 75px;
    font-style: normal;
    font-weight: 400;
    line-height: 94px;
    letter-spacing: 0em;
    text-align: center;
    color: #481F05;
}
.contact-page .mid {
    font-family: Noto Sans KR;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 53px;
    letter-spacing: -0.02em;
    text-align: center;
    color: #481F05;
}
.contact-page .small {
    font-family: Noto Sans KR;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    letter-spacing: -0.02em;
    text-align: center;
    color: #481F05;
}
.contact-page .apply-bt {
    width: 175px;
    height: 70px;
    display: inline-flex;
    font-family: 'Nunito';
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 7px;
    justify-content: center;
    align-items: center;
    background: #481F05;
    color: white;
    border-radius: 60px;
    margin: 0px 44px 0px 44px;
    margin-top: 60px;
}
.contact-page .mobile-img {
    display: none;
} 
@media screen and (max-width: 1466px) {
    .contact-page {
        height: 1110px;
        background-image: unset;
    }
    .contact-page .inner {
        height: 50%;
    }
    .contact-page .mobile-img {
        width: 100%;
        height: 50%;
        position: absolute;
        top: 43%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .contact-page .img {
        width: 840px;
        height: 637px;
        background-image: url(./img/contact-page/mobile-background.png);
        background-size: 100%;
    }
}




.location-page {
    position: relative;
    width: 100%;
    height : 888px;


}
.location-page .left {
    position: absolute;
    width: calc(40%);
    height: 100%;
    left: 0px;
    top: 0px;
    background: linear-gradient(to left, rgb(0 0 0 / 70%), rgb(0 0 0 / 70%)), url(./img/location-page/background.png);
    background-position: center left;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}
.location-page .left .inner {
    text-align: right;
    font-family: 'Noto Sans KR';
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 34px;
    letter-spacing: 0.02em;
    text-align: right;
    color: white;
}
.location-page .left .phone {
    background-image: url(./img/location-page/phone.png);
    width: 20px;
    height: 19px;
    background-position: center;
    display: inline-block;
    background-repeat: no-repeat;
    margin-right: 10px;
}
.location-page .left .fax {
    background-image: url(./img/location-page/fax.png);
    width: 20px;
    height: 19px;
    background-position: center;
    display: inline-block;
    background-repeat: no-repeat;
    margin-right: 10px;
}
.location-page .left .email {
    background-image: url(./img/location-page/sms.png);
    width: 20px;
    height: 19px;
    background-position: center;
    display: inline-block;
    background-repeat: no-repeat;
    margin-right: 10px;
}

.location-page .left .inner .title {
    font-family: 'Black Han Sans';
    font-size: 75px;
    font-style: normal;
    font-weight: 400;
    line-height: 94px;
    letter-spacing: 0em;
    text-align: left;
    color: white;
}
.location-page .map {
    position: absolute;
    width: calc(60%);
    height: 100%;
    right: 0px;
    top: 0px;
    background: #6b6b6b;
    transition: all 0ms;
}
#map * {
    transition: all 0ms;
}
@media screen and (max-width: 1466px) {
    .location-page {
        height: calc(747px + 617px);
    }
    .location-page .left { 
        width: 100%;
        height: 747px;
    }
    .location-page .map {
        width: 100%;
        height: 617px;
        top: 747px;
    }
    .location-page .left .inner .title {
        font-size: 85px;
    }
    .location-page .left .inner {
        font-size: 25px;
    }
    .location-page .left .inner div {
        margin: 40px 10px 0px 0px;
    }
}



.footer {
    
    width: 100%;
    height: 192px;
    background-color: #FFD320;
    font-family: Noto Sans KR;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;
    letter-spacing: -0.02em;
    text-align: left;
    display: flex;
    justify-content: center;
}
.footer .page-width {
    position: relative;
    height: 100%;
}
.footer .icon {
    background-image: url(./img/main-icon.png);
    width: 158px;
    height: 22px;
    background-size: 100%;
    display: inline-block;
    margin-top: 33px;
    margin-bottom: 17px;
}
.footer .space {
    display: inline-block;
    width: 43px;
}
.footer .bold {
    font-weight: 700;
}
.footer .copyright {
    position: absolute;
    bottom: 23px;
}
.footer .right-box {
    position: absolute;
    right: 80px;
    top: 30px;
}
.footer .top-bt {
    width: 50px;
    height: 50px;
    background-image: url(./img/go-to-top-bt.png);
    position: absolute;
    right: 50px;
    top: 20px;
}
.footer br {
    display: none;
}
@media screen and (max-width: 1466px) {
    .footer {
        height: 426px;
        font-size: 22px;
    }
    .footer br {
        display: unset;
    }
    .footer .space {
        display: none;
    }
    .footer .mobile-space {
        display: inline-block;
    }
    .footer span {
        margin: 10px 0px 10px 0px;
        display: inline-block;
    }
    .footer .right-box {
        position: absolute;
        left: 50px;
        top: 300px;
    }
    .footer .right-box .space {
        display: inline-block;
    }
}
.popup-page {
    width: 100%;
    top: 0px;
    left: 0px;
    height: 100%;
    position: fixed;
    background-color: rgb(0 0 0 / 60%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: -1;
    opacity: 0;
}
.popup-page pre {
    white-space: pre-wrap;
}
.popup-page.active {
    z-index: 100;
    opacity: 1;
}
.popup-page .inner {
    border-radius: 30px;
    background-color: #FFED4E;

}
.popup-page select,
.popup-page input {
    width: calc(100% - 1.5px - 1.5px - 20px);
    padding: 0px 10px 0px 10px;
    height: 45px;
    background: #FFEF64;
    border: 2px solid #481F05;
    border-radius: 8px;
    font-family: Noto Sans KR;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.02em;
    text-align: left;
    margin-top: 6px;

}

.popup-page .title {
    width: 400px;
    height: 65px;
    left: 761px;
    background: linear-gradient(180deg, #FFED4E -7.01%, #F8CA0F 112.2%);
    border: 6px solid #FFFB9B;
    box-sizing: border-box;
    border-radius: 50px;
    display: inline-block;
    font-family: Avenir;
    font-style: normal;
    font-weight: 900;
    font-size: 30px;
    line-height: 41px;
    display: inline-flex;
    align-items: center;
    text-align: center;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: #FFFFFF;
    text-shadow: 0px 4px 4px rgb(247 194 73 / 50%);
    justify-content: center;
    margin-top: 49px;
}
.popup-page .sub-title {
    font-family: Noto Sans KR;
    font-style: normal;
    font-weight: 500;
    font-size: 17px;
    line-height: 160%;
    /* or 27px */
    letter-spacing: -0.02em;
    
    /* Brown */
    
    color: #481F05;
    text-align: center;
    margin-top: 13px;
}
.popup-page .popup-page-header {
    text-align: center;
}
.popup-page hr {
    width: calc(100% - 50px - 50px);
    margin-right: 50px;
    height: 0px;
    border: 0px;
    border-top: 2px dashed #FFD320;
}
.popup-page .row.name {
    font-family: Noto Sans KR;
    font-style: normal;
    font-weight: bold;
    font-size: 17px;
    line-height: 160%;
    /* or 27px */

    letter-spacing: 0.02em;
    text-transform: uppercase;

    color: #481F05;
    margin-top: 20px;
}
.popup-page .row.name span {
    color: #FF7822;
}
.popup-page  .close-bt,
.popup-page  .submit-bt {
    width: 263px;
    height: 60px;
    background: #481F05;
    border-radius: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Noto Sans KR;
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 160%;
    /* or 32px */

    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: 0.2em;
    text-transform: uppercase;

    /* white */

    color: #FFFFFF;
    margin: 15px;
    cursor: pointer;
}
.popup-page  .close-bt {
    background: #F6D941;
}
.popup-page .bt-line {
    display: flex;
    justify-content: center;
    align-items: center;
}
.popup-page input::placeholder {
    color: rgba(0, 0, 0, 0.493);
}
.popup-page .check-box {
    width: 25px;
    height: 25px;
    background: #FFEF64;
    border: 2px solid #481F05;
    border-radius: 4px;
    display: inline-block;
    cursor: pointer;
    margin-right: 10px;
    transition: background-image 0ms;
}
.popup-page .check-box.checked {
    background: url(./img/check-icon.png), linear-gradient(0deg, #FF7822, #FF7822);
    background-position: center;
    background-repeat: no-repeat;
}
.popup-page .agree-item {
    width: calc(100% - 26px - 26px);
    height: 25px;
    margin: 8px 26px 8px 26px;
    display: flex;
    font-family: Noto Sans KR;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.02em;
    text-align: left;

}
.popup-page .agree-item span {
    color: #FF7822;
}

.my-page .inner {
    height: 676px;
    max-width: 1151px;
    width: 90%;
    overflow: auto;
}
.my-page .box {
    position: relative;
    height: 383px;
    text-align: left;
}
.my-page .section:nth-child(1) {
    width: 50%;
    height: 100%;
    display: flex;
    position: absolute;
    top: 0px;
    left: 0px;
    flex-direction: column;
    align-items: center;
}
.my-page .section:nth-child(2) {
    width: 50%;
    height: 100%;
    display: flex;
    position: absolute;
    top: 0px;
    right: 0px;
    flex-direction: column;
    align-items: center;
}
.popup-page .box .row {
    max-width: 404px;
    width: 100%;
}
.my-page .email-input input {
    width: calc(180px - 20px);
}
.my-page .email-input {
    display: flex;
    align-items: center;
}
.my-page .email-input .mid {
    width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.my-page .onchange {
    border: 2px solid #33589f;
}

.join-page .inner {
    max-width: 1151px;
    width: 90%;
    max-height: 856px;
    height: 90%;
    overflow: auto;
}
.join-page .box {
    position: relative;
    height: 383px;
    text-align: left;
}
.join-page .section:nth-child(1) {
    width: 50%;
    height: 100%;
    display: flex;
    position: absolute;
    top: 0px;
    left: 0px;
    flex-direction: column;
    align-items: center;
}
.join-page .section:nth-child(2) {
    width: 50%;
    height: 100%;
    display: flex;
    position: absolute;
    top: 0px;
    right: 0px;
    flex-direction: column;
    align-items: center;
}
.join-page .box .row {
    width: 404px;
    position: relative;
}


.join-page .email-input input {
    width: 106px;
}
.join-page .email-input select {
    width: 150px;
    height: 49px;
    margin-right: 11px;
}

.my-page .email-input input {
    width: 106px;
}
.my-page .email-input select {
    width: 150px;
    height: 49px;
    margin-right: 11px;
}


.join-page .email-input {
    display: flex;
    align-items: center;
}
.join-page .email-input .mid {
    width: 23px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.join-page .all-agree-box {
    font-weight: 700; 
    margin-left: 52px;
}
.join-page .agree-box {
    font-weight: 700; 
    width: calc(100% - 100px - 4px);
    height: 138px;
    border: 2px solid #FFD320;
    box-sizing: border-box;
    border-radius: 10px;
    margin-left: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 10px;
    position: relative;
}
.join-page .detail-info {
    width: 88px;
    height: 31px;
    background: #FFED4E;
    border: 2px solid #481F05;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: absolute;
    right: 26px;
}
@media screen and (max-width: 1200px) {
    .join-page .section:nth-child(2),
    .join-page .section:nth-child(1),
    .my-page .section:nth-child(2),
    .my-page .section:nth-child(1)
    {
        width: 100%;
        height:initial;
        position: relative;
    }
    .my-page .box,
    .join-page .box {
        height: unset;
    }
    
    .my-page .row.name,
    .popup-page .row.name {
        font-size: 24px;
    }
}
@media screen and (max-width: 800px) {
    .popup-page .title {
        width: 500px;
        height: 81px;
        font-size: 36px;

    }
    .popup-page .sub-title {
        font-size: 25px;
    }
}

.register-page .inner {
    max-height: 906px;
}
.register-page .box {
    height: 433px;
}
@media screen and (max-width: 1200px) {
    .register-page .box {
        height: unset;
    }

}
.popup-page .check select, .popup-page .check input {
    width: 282px;
}
.popup-page .email-input button, 
.popup-page .check button {
    width: 88px;
    height: 48px;
    background: #481F05;
    border: 1.5px solid #481F05;
    border-radius: 8px;
    font-family: Noto Sans KR;
    font-style: normal;
    font-weight: 500;
    font-size: 15px;
    line-height: 160%;
    text-align: center;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #FFFFFF;
    cursor: pointer;
}


.privacy-page .inner {
    max-width: 650px;
    width: 90%;
    max-height: 618px;
    height: 90%;
    overflow: auto;
}
.privacy-page .box {
    width: 581px;
    height: 292px;
    overflow: auto;
    margin-left: calc((100% - 581px )/ 2);
}
.privacy-page .box  pre {
    font-family: Noto Sans KR;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 21px;
    letter-spacing: -0.02em;
    text-align: left;

}
.login-page .inner {
    max-width: 650px;
    width: 90%;
    max-height: 575px;
    height: 90%;
    overflow: auto;
}
.login-page .box {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 50px;
}
.login-page .find-id {
    font-family: Noto Sans KR;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.02em;
    text-align: center;
    cursor: pointer;
    padding-bottom: 20px;
}

.butter-land-app-join-page .box {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 50px;
    font-family: Noto Sans KR;
    font-style: normal;
    font-weight: bold;
    font-size: 27px;
    line-height: 160%;
    letter-spacing: -0.02em;
    color: #481F05;
    text-align: center;
    margin-top: 54px;
}
.butter-land-app-join-page .box {
    height: 180px;
    display: flex;
    justify-content: center;
}
.popup-page .file-upload-label {
    position: absolute;
    width: 130px;
    height: 45px;
    top: 6px;
    right: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #481F05;
    border: 1.5px solid #481F05;
    border-radius: 8px;
    font-family: Noto Sans KR;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.02em;
    text-align: left;
    color: #FFFFFF;
}


.popup-page select.err,
.popup-page input.err {
    border: 2px solid #FF7822;
}

.find-id-page .email-input {
    display: flex;
    align-items: center;  
}
.find-id-page .email-input .mid {
    width: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.find-id-page .inner {
    max-height: 658px;
}
.alert-img {
    width: 150px;
    height: 150px;
    display: inline-block;
    background-image: url(./img/alert.png);
}
.find-id-alert-page .box {
    font-family: Noto Sans KR;
    font-size: 19px;
    font-style: normal;
    font-weight: 500;
    line-height: 34px;
    letter-spacing: -0.02em;
    text-align: center;
}
.find-id-alert-page .inner {
    max-height: 620px;
}
#send-pw-alert-page .box {
    display: flex;
    height: 320px;
    justify-content: center;
}

input.disable-edit {
    background: #e2e2e280;
    color: black;
}
.popup-page .email-input input {
    width: 112px;
    margin-right: 10px;
}

#new-password-page .check {
    position: relative;
    height: 50px;
}
#new-password-page .personal-auth-bt {
    position: absolute;
    right: 0px;
    top: 20px;
}