main {
    height: calc(100% - 60px);
}

.login main > section{
	display: block;
	position: relative;
	margin: 0;
	align-items: center;
	justify-content: center;
	max-width: 340px;
	width: 100%;
	min-height: 700px;
	margin-top: 10px;
}

@media screen and (min-width: 800px){
	.login main > section{
		margin-top: 150px;
	}
}

.email {
    margin-bottom: 40px;
}



.tttt {
    margin-bottom: 53 px;
    align-self: flex-start;
}


.login .find--password {
    color: var(--red-up);
}

.login .find--password a{
    color: inherit;
}



.login header .btn--login {
	display: none;
}
.login .find--password {
	color: var(--basic-gray) !important;
	letter-spacing: 0.15px;
}
.login .find--password::after {
	display: inline-block;
	content: "";
	width: 24px;
	height: 24px;
	vertical-align: middle;
	background: url('../img/icon/icon-next.svg') no-repeat 50%;
	background-size: 7.42px 14.02px;
}


.sub.create-account main{
	padding:0
}

.create-account section form{
	height: auto;
	/* max-width: 340px;
	width: 100%; */
	width: auto;
}

.create-account .grid--code {
	margin-top: 75px;
	margin-bottom: 75px
}

.create-account div.grid--code {
	align-self: center;
}

.create-account main .dropdown{
	border: 0.35px solid #DFDFDF;
	padding: 0 25px 0 10px;
	border-radius: 3px;
}

.create-account main .dropdown::after{
	right: 10px;
}

.create-account .guide .guide--step .guide--desc {
    font-family: Inter;
    font-weight: 400;
}

.create-account main .dropdown--item input[name=search]{
	height: 40px;
	line-height: 40px;
	margin-bottom: 0;
}

.create-account main .dropdown--item ul{
	padding: 0;
	
}
.create-account main .dropdown--item ul li:not(:last-child){
	margin-bottom: 0; 
}

.create-account main .dropdown--item ul > li{
	padding: 4px 0 4px 15px;
	height: 26px;
	line-height: 24px;
	
}

.dropdown+.dropdown--item ul li button{
	text-align: left;
}

.create-account .step--list{top: inherit;}
.create-account section .step--list{top: 0;}

.create-account .form--controls .checkbox input[type=checkbox]+label{
	font-weight: 500;
}

.create-account .form--controls .checkbox label span{
	vertical-align: top;
	margin-left: 7px;
	color: #8e8e8e;
	font-weight: normal;
}
.create-account .form--controls .checkbox label span.red{
	color: var(--red-up);
}

.create-account .guide--step .size--16{
	width: 100%;
}
.create-account form .form--header + p{
	word-break: break-all;
}

.create-account #create-account-info .form--controls > label{
	margin-bottom: 8px;
}

.create-account input[inputmode="numeric"] {
    -webkit-text-security: disc;
}

.create-account #create-account-pin-number-confirm .form--btns{
	display: flex;
	flex-direction: row;
	column-gap: 15px;
	row-gap: 15px;
}

@media screen and (min-width: 1071px) and (max-width: 1300px) {
	.create-account .step--list{
		left: 0;
	}
}

@media screen and (max-width: 1070px) {
	.create-account .rounded{
		width: 20px;
		height: 20px;
		line-height: 20px;
		font-size: 12px;
		margin-top: 5px;
	}
	
	.create-account section .step--list{
		position: absolute;
		top: 0px;
		
	}
	.create-account .step--list .step--header {
		display: none;
    }
	
	.create-account .step--list ol{
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.create-account .step--list ol li{
		font-size: 0px;
	}
	.create-account .step--list ol li::before{
		width: 10px;
		height: 10px;
		line-height: 10px;
		font-size: 0px;
	}

	.sub.login.create-account .step--list{
		width: initial;
		position: absolute;
		top: -50px;
		left: 50%;
		transform: translateX(-50%);
	}
}


@media screen and (max-width: 800px) {
	.create-account main{
		height: 100vh;
	}
	.create-account > header,
	.login > header{
		display: none;
	}

	.create-account .box-mobile-menu{
		display: none;
	}
	.login main{
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: 72px!important;
		height: initial;
	}

	.login form{
		height: auto;
	}

	.login_page form{
		height: 550px!important;
	}

	.create-account main{
		align-items: center;
		justify-content: center;
		padding: 15px 16px 56px 16px!important;
	}
	
	form .form--header h1 {
        color: var(--basic-black);
    }

	.create-account .guide .guide--step .guide--desc {
		font-size: 12px;
		color: #777777;
	}

	.create-account .grid--code {
		align-self: center;
	}

	.create-account div.form--controls:nth-child(1){
		margin-top: 30px!important;
	}
	.login main > section > form{padding-top: 50px;}
	.sub.login.create-account .step--list{
		top: 0px;
	}
}

@media screen and (max-width: 600px) {
	.login main{display: flex;}
	
	.email {margin-bottom: 8px;}

    .create-account .tttt {
        align-self: center;
    }

	.login header .btn--login {
        display: none;
    }
    .login .find--password {
		margin-top: 56px;
		align-self: center !important;
		justify-content: center !important;
        color: var(--basic-gray) !important;
        letter-spacing: 0.15px;
    }
    .login .find--password::after {
        display: inline-block;
        content: "";
        width: 24px;
        height: 24px;
        vertical-align: middle;
        background: url('../img/icon/icon-next.svg') no-repeat 50%;
        background-size: 7.42px 14.02px;
    }
	.create-account form .form--header h1{
		font-size: 18px;
	}
	.create-account form .form--header + p.size--18{
		font-size: 16px;
	}
	.create-account form .form--header + p.size--18 + p.size--16{
		font-weight: normal;
	}

	.create-account #create-account-pin-number-confirm .form--btns{
		flex-direction: column;
	}
}


/* forget 비밀번호 찾기 */
.login.forget form .grid--code{
	margin-top: 75px; 
	margin-bottom: 88px;
	align-self: center;
}

.login.forget #forget .form--controls.email .form--label{
	margin-bottom: 8px;
}

.login.forget .mt-52{
	margin-top: 52px;
}

.login.forget input[type=number] {
    -webkit-text-security: disc;
}

@media screen and (max-width: 800px) {
	.login.forget .mobile-only{
		display: block;
	}
	.login.forget > header{
		display: none;
	}

	.login.forget main{
		box-sizing: border-box;
		overflow: hidden;
		justify-self: flex-start;
		padding-bottom: 72px!important;
	}
	.forget .content_wrap{
		height: initial;
	}
	
	.login.forget form{
		width: 100%;
		height: 500px;
		position: relative;
	}

	.login.forget .form--btns{
		margin-top: 0!important;
	}
	.login.forget form .btn{
		position: absolute; 
		left: 50%; 
		transform: translateX(-50%); 
		bottom: 40px;
	}

	.forget form .form--header{
		display: flex!important;
		line-height: 60px; 
		padding-left: 0;
		margin-bottom: 20px;
	}
	

	.forget form .form--header h1{
		background: none;
		margin-left: 10px;
		font-size: 20px;
	}

	.forget .navigation--back{height: 60px;}

	.forget form .grid--code{
		margin-top: 48px; 
		margin-bottom: 64px;
	}
	.forget form div.flex-self-left{
		align-self: center;
	}

	.forget form .form--controls input{
		margin-bottom: 20px;
	}

	.login.forget .mt-52{
		margin-top: 0;
	}

	.login.forget form .grid--code{
		margin-top: 50px;
		margin-bottom: 50px;
	}

	.login.forget form .boxed--transparent{
		padding: 0!important;
	}

	.login.forget form .btn,
	.login.forget .password-complete .btn{
		position: static;
		transform: initial;
	}

}

@media screen and (max-width: 600px) {
	.login.forget .validation--message{
		background: transparent url(../img/icon/ico-warn-pink.svg) no-repeat 2px 5px;
	}

	.create-account form .form--header + p{
		word-break: keep-all;
		font-size: 14px;
	}
}

@media screen and (max-width: 380px) {
	.login.forget form .btn,
	.login.forget .password-complete .btn{
		width: 90%!important;
	}
}