.wrap { background: #F3F4F5; } 
.login-area { padding: 96px 0 126px; display: flex; flex-direction: column; text-align: center; } 
.login-area .login-hd { display: flex; flex-direction: column; gap: 18px; } 
.login-area .login-hd p { color: #5D5D6A; font-size: 22px; font-weight: 500; line-height: 1.3; } 
.login-area .login-choice-list { display: flex; gap: 20px; margin: 62px 0 120px; justify-content: center; flex-wrap: wrap;} 
.login-area .login-choice-list li { border-radius: 20px; background: #FFF; max-width: 504px; height: 408px; width: 100%; padding: 40px 60px 28px; display: flex; flex-direction: column; align-items: center; } 
.login-area .login-choice-list h3 { color: #111224; font-size: 24px; font-weight: 700; line-height: 1.3; } 
.login-area .login-choice-list p { color: #777B86; font-size: 15px; font-weight: 500; line-height: 1.4;margin-top: 8px; } 

.login-area .login-choice-list .btn-box { position: relative; display: flex; gap: 8px; margin-top: 160px;; width: 100%; } 
.login-area .login-choice-list li:nth-child(1) .btn-box::before { content: ''; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, -10%); display: block; width: 122px; height: 157px; background: url(../img/login/choice_ch_01.png)no-repeat center; background-size: contain; } 
.login-area .login-choice-list li:nth-child(1) .btn-box::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; width: 100%; height: calc(100% + 16px); background: #fff; } 
.login-area .login-choice-list li:nth-child(2) .btn-box::before { content: ''; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, -10%); display: block; width: 114px; height: 157px; background: url(../img/login/choice_ch_02.png)no-repeat center; background-size: contain; } 
.login-area .login-choice-list .btn-box a { position: relative; z-index: 1; flex: 1; height: 48px; display: flex; justify-content: center; align-items: center; gap: 4px; border-radius: 12px; font-size: 16px; font-weight: 600; line-height: 1.5; } 
.login-area .login-general { background: var(--highlight); color: #fff; } 
.login-area .login-kakao { background: #FEE500; color: #371C1D; } 
.login-area .login-public { border-radius: 12px; background: #404252; color: #fff; } 
.login-area .login-choice-list p.join-wrap { margin-top: 24px; font-size: 16px; line-height: 1.5; } 
.login-area .login-choice-list p.join-wrap a { color: var(--highlight); text-decoration-line: underline; } 
.login-area .info { display: flex; justify-content: center; gap: 4px; color: #5D5D6A;flex-wrap: wrap; } 
.login-area .info a { color: #5D5D6A;font-size: 16px; font-weight: 500; line-height: 150%; } 
@media screen and  (max-height: 1000px) {
    .login-area{padding: 40px 0 ;}
    .login-area .login-choice-list{margin-bottom: 40px;}
}
@media screen and  (max-width: 768px) {
    .login-area .login-choice-list li{padding: 40px;height: auto;}
    .login-area{padding: 40px 20px;}
}
@media screen and  (max-width: 500px) {
    .login-area .login-choice-list li{padding: 40px 24px;}
    .login-area .login-choice-list .btn-box{flex-direction: column;}
    .login-area .login-choice-list .btn-box a{width: 100%;flex: auto;}
    .login-area .login-choice-list li:nth-child(1) .btn-box::before{transform: translate(-50%, -45%);}
    .logo svg{width: 80%;}
}