html {background-color: var(--color-main);}
body {background-color: var(--color-main); min-height: 100dvh; display: flex; flex-direction: column; width: 100%; overflow-y: scroll;}

.wrap {padding: var(--pd-cnt); display: flex; justify-content: center; flex-direction: column; gap: 1em; flex-grow: 1;}
.wrap > div {width: 100%;}


.login .btn_float {justify-content: center;}

.login .wrap{background-color: #fff; border-radius: 5em 0 0 0; z-index: 10; position: relative; padding: 10vw var(--pd-lr); height: auto; flex-grow: 1; justify-content: flex-start; gap: 2em; margin-top: -1px;}



/* login header */
.login header {background-color: #fff; padding: unset; position: relative; border-radius: 0 0 0 4e;}
.login header .text_area {display: block; padding: 5em var(--pd-lr); position: relative; border-radius: 0 0 5em 0; background-color: var(--color-main);}
.login header .btn-close {position: absolute; right: 1em; top: 1em; background: url(../img/close_btn_wh.svg) no-repeat 50% 50%;}


/* logo_area */
.logo_area {width: 100%;}
.logo_area h2 {font-family: var(--font-point); color:#fff; font-size: 7em; line-height: 1; position: relative; width: fit-content}
/* .logo_area h2 img {position: absolute; bottom: 20px; right: -70px; width: 50%;} */
.logo_area h2 img {height: 0.75em;}


.login_area {display: flex; flex-direction: column; gap: 1.5em;}

.login .tit_area {flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0.5em;}
.login .tit_area p {color: var(--black-light);}

.login_area .text_area {display: flex; flex-direction: column; gap: 0.5em;}
.login_area .text_area dd {color: #fff; font-size: 1.25em;}
.login_area .text_area p {color: #fff;}
.login_area .btn_area {display: flex; gap: 1.5em;}
.login_area .btn_area .btn {flex: 1; padding: 1em 2em; justify-content: center; font-size: 1.25em; font-weight: 600;}
.login_area .btn_area .btn.join_so {background-color: var(--color-sub); color:#fff;}
.login_area .btn_area .btn.join_se {background-color: #fff; color:var(--black-base);}


/* login_agree */
.login .wrap .text_area {display: flex; flex-direction: column; gap: 0.5em;}
.login .wrap .box {background-color: var(--color-bgg1); flex-direction: column; gap: 1em; padding: 2em var(--pd-lr);}
.login .wrap .box .check_all_area {padding-bottom: 1em; border-bottom: 1px solid var(--color-border);}
.login .wrap .box .checkbox_area {flex-direction: column;}
.login .wrap .box .checkbox_area label {justify-content: space-between; align-items: flex-end;}
.login .wrap .box .checkbox_area label a {font-size: 0.75em; color: var(--black-mid);}

/* login_intro */
.login_intro .wrap {background-color: transparent; justify-content: center;}

.login_intro .wrap .tit_area > * {color:#fff;}
.login_intro .wrap .btn_area {gap: 1em;}
.login_intro .wrap .btn_area > a {flex: 1; padding: 1em; font-size: 1.25em; text-align: center; font-weight: 600; justify-content: center;}
.login_intro .wrap .btn_area .btn-secondary {border-color: #fff;}

/* login_agree */
.login_agree .wrap {padding-bottom: 6em;}
.login_agree .logo_area h2 {font-size: 4em;}
.login_agree .contents {display: flex; flex-direction: column; gap: 1.5em;}
.login_agree .contents .text_area p {font-weight: 300; line-height: 1.3;}

.login .contents .flex {justify-content: space-between; align-items: center;}
.login .contents .flex .btn_fpw {font-size: 0.875em;}


/* join */
.join .wrap,
.store .wrap {padding-bottom: 8em;}
.join .wrap .contents,
.store .wrap .contents {gap: 1.75em; display: flex; flex-direction: column;}
.join .wrap .contents .input-group,
.store .wrap .contents .input-group {align-items: center; gap: 0.5em;}

.add_store,
.add_em_info {display: flex; flex-direction: column; gap: 1.75em;}


.add_em_info .checkbox_area,
.add_em_info .radio_area {justify-content: space-between; gap: 1em; flex-wrap: wrap;}