@charset "utf-8";

html{font-size: 10px;}
html,body,main{width:100%;height: 100%;overflow-y: hidden;overflow-x: auto;min-width: 1024px;}

/*공통영역*/
.wrap {display: flex;width: 100%;height: 100%;}
.container{width: 100%;padding:0 6rem;max-width: 60rem;}
.marginTop8{margin-top: .8rem;}
.marginTop14{margin-top: 1.4rem;}
.marginTop20{margin-top: 2rem;}
.marginTop32{margin-top: 3.2rem;}
.marginTop100{margin-top: 10rem;}
.paddingTop100{padding-top: 10rem;}
.p-text{font-family: var(--NanumSquare);font-size: 1.5rem;line-height: 1.66;text-align: center;}


.wrap .section-item{width: calc(100%  / 3);height:100%;position: relative;}
.wrap .section-item.welcome{background-image: url("../images/bg-login-welcome.svg");background-repeat: no-repeat;background-size: cover;background-position: right;display: flex;justify-content: flex-end;align-items: center;}
.wrap .section-item.welcome .welcome-text{font-size: 5rem;line-height: 1.6em;font-family: var(--NanumSquareBold);padding:2rem;}
.wrap .section-item.welcome .welcome-text .brand-name{font-family: var(--NanumSquareExtraBold);letter-spacing: 0.1em;}

/*회원가입 스타일*/
.wrap .section-item.join{background-image: url("../images/bg-login-join.svg");background-repeat: no-repeat;background-size: cover;background-position: left;display: flex;flex-direction:column;justify-content: center;align-items: center;}
.wrap .section-item.join .logo-item{width: 15.2rem;height: 9.9rem;overflow: hidden;}
.wrap .section-item.join .logo-item > img {width: 100%;height: 100%;object-fit: cover;}

/*로그인 스타일*/

.wrap .section-item.login .brand-name{font-size: 3.5rem;line-height: 1em;font-family: var(--NanumSquareExtraBold);letter-spacing: 0.1em;}
.wrap .section-item.login .title-box{font-size: 1.8rem;line-height: 1em;font-family: var(--NanumSquareBold);}
.wrap .section-item.login .form-box{display: flex;flex-direction: column;row-gap: 3rem;}
.wrap .section-item.login .form-box .input-item{display: flex;justify-content: flex-end;position: relative;}
.wrap .section-item.login .form-box .input-item .icon-lock{background-image: url("../images/icons/icon-lock.svg");background-position: center;background-repeat: no-repeat;background-size: 1.4rem 1.6rem;width: var(--input-height);height: var(--input-height);position: absolute;right: 0;top: 0;}
.wrap .section-item.login .form-box .link-box{display: flex;justify-content: flex-end;}
.wrap .section-item.login .form-box .link-box a {font-size: 1.5rem;line-height: 1.66em;font-family: var(--NanumSquareBold);color:var(--default-color);}
.wrap .section-item.login .form-box .link-box a:nth-of-type( n + 2)::before{content:'ㅣ';margin: 0 0.4rem;}
.wrap .section-item.login .login-button{margin: 5.5rem 0 0 auto;}

/*input 스타일*/

.input-item input:is([type='text'],[type='password']){width: 100%;height: var(--input-height);padding:0 1.2rem;border:1px solid var(--gray-color);border-radius: 0.5rem;}
.input-item input:is([type='text'],[type='password'])::placeholder{color:var(--gray-color);}
.input-item input:is([type='checkbox'],[type='radio']){display: none;}
.input-item input:is([type='checkbox'],[type='radio']) + label{display: flex;align-content: center;column-gap: .8rem;font-family:var(--NanumSquare);font-size: 1.5rem;}
.input-item input:is([type='checkbox'],[type='radio']) + label::before{content:'';background-image: url("../images/icons/icon-checkbox_off.svg");display: inline-block;background-size: cover;background-repeat: no-repeat;width:1.8rem;height: 1.8rem;}
.input-item input[type='checkbox'] + label::before{background-image: url("../images/icons/icon-checkbox_off.svg");}
.input-item input[type='checkbox']:checked + label::before{background-image: url("../images/icons/icon-checkbox_on.svg");}
.input-item input[type='radio'] + label::before{background-image: url("../images/icons/icon-radio_off.svg");}
.input-item input[type='radio']:checked + label::before{background-image: url("../images/icons/icon-radio_on.svg");}
.input-item input:is([type='checkbox'],[type='radio']):disabled + label,
.input-item input:is([type='checkbox'],[type='radio']):disabled + label::before{opacity: 0.7;}

/*버튼 스타일*/
.button{display: flex;justify-content: center;align-items: center;max-width:15rem;width:100%;height: var(--input-height);background-color: var(--button-bg);color:var(--white-op-100);font-family: var(--NanumSquareExtraBold);font-size: 1.5rem;border-radius: 0.5rem;transition-duration: 0.6s;transition-property: background-color;}
.button:hover{background-color: var(--button-active-bg);}

/*footer*/

footer {position: absolute;bottom:0;width: 100%;text-align: center;padding:3rem 0;}
footer .footer-link{}
footer .footer-link a {font-size: 1.1rem;line-height: 2.272em;font-family: var(--NanumSquareBold);color:var(--default-color);}
footer .footer-link a:nth-of-type( n + 2)::before{content:'ㅣ';margin: 0 0.4rem;}
footer .copyright {font-size: 1.1rem;line-height: 2.272em;font-family: var(--NanumSquare);color:var(--default-color);}

.alert_login {
    font-size: 13px;
    color: #a6200c;
    display: block;
    width: 160px;
    letter-spacing: -0.5px;
    padding-left: 2px;
}

.alert_login_fail {
    font-size: 13px;
    color: #a6200c;
    display: block;
    letter-spacing: -0.5px;
}