/* Login Page Styles - scope: #container.login_page */
#container.login_page .d-login-area { display: flex; justify-content: center; align-items: center; padding: 40px; background: white; }
#container.login_page .d-login-area_sub { position: relative; display: flex; flex-direction: row; align-items: stretch; justify-content: center; background: white; padding: 100px; max-width: 1200px; width: 100%; gap: 80px; box-shadow: none; border: none; }
#container.login_page .d-login-area_sub.has-social::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 1px; height: 180px; background: #D9D9D9; }
#container.login_page .login_left_wrap { flex: 1; max-width: 400px; display: flex; flex-direction: column; justify-content: center; }
#container.login_page .login_right_wrap { flex: 1; max-width: 400px; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; padding-left: 80px; padding-top: 60px; padding-bottom: 20px; }
#container.login_page .login_header_text { margin-bottom: 20px; text-align: left; }
#container.login_page .login_header_text .tit { font-size: 32px; font-weight: 800; color: #503729; }
#container.login_page .login_header_text .sub_tit { font-size: 16px; color: #654D3F; font-weight: 400; margin-bottom: 10px; }
#container.login_page .login_form { display: flex; flex-direction: column; width: 100%; max-width: 322px; margin: 0; padding: 0; }
#container.login_page .field { width: 100%; display: flex; flex-direction: column; margin: 0 !important; padding: 0 !important; border: none !important; }
#container.login_page .input_wrap { width: 100%; margin: 0 0 8px 0 !important; padding: 0 !important; }
#container.login_page .login_id,
#container.login_page .login_pw { width: 100% !important; max-width: 322px !important; height: 45px !important; padding: 0 12px 0 40px !important; font-size: 14px !important; border-radius: 20px !important; border: 1px solid #f2f2f2 !important; background: linear-gradient(to bottom, #f8f8f8, #fefefe) !important; color: #333 !important; box-sizing: border-box !important; margin: 0 !important; }
#container.login_page .login_id { background: url('/z_images/common/ico_login_id.png') no-repeat 16px center, linear-gradient(to bottom, #f8f8f8, #fefefe) !important; }
#container.login_page .login_pw { background: url('/z_images/common/ico_login_pw.png') no-repeat 16px center, linear-gradient(to bottom, #f8f8f8, #fefefe) !important; }
#container.login_page .login_id::placeholder,
#container.login_page .login_pw::placeholder { color: #D9CFC9 !important; font-size: 14px !important; }
#container.login_page .login_id:-webkit-autofill,
#container.login_page .login_id:-webkit-autofill:hover,
#container.login_page .login_id:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0px 1000px #f8f8f8 inset !important; -webkit-text-fill-color: #333 !important; background: url('/z_images/common/ico_login_id.png') no-repeat 16px center !important; }
#container.login_page .login_pw:-webkit-autofill,
#container.login_page .login_pw:-webkit-autofill:hover,
#container.login_page .login_pw:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0px 1000px #f8f8f8 inset !important; -webkit-text-fill-color: #333 !important; background: url('/z_images/common/ico_login_pw.png') no-repeat 16px center !important; }
#container.login_page .login_er { display: block; color: red; font-size: 12px; margin-top: 4px; }
#container.login_page .btn_login { border-radius: 20px !important; background-color: #FF7C33 !important; border: 1px solid #FFDECC !important; width: 100% !important; max-width: 322px !important; height: 51px !important; font-size: 16px !important; font-weight: 800 !important; color: white !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 12px 0 0 0 !important; padding: 0 !important; cursor: pointer !important; box-sizing: border-box !important; transition: all 0.3s ease !important; }
#container.login_page .btn_login:hover { box-shadow: 0 6px 16px rgba(255, 124, 51, 0.4) !important; transform: translateY(-2px) !important; }
#container.login_page .btn_login:active { box-shadow: 0 2px 4px rgba(255, 124, 51, 0.4) !important; transform: translateY(0) !important; }
#container.login_page .regist_sub { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 24px; width: 322px; }
#container.login_page .regist_sub a { font-size: 14px; text-decoration: none; }
#container.login_page .regist_sub a:first-child { color: #FF7C33; }
#container.login_page .regist_sub a:last-child { color: #A38E82; }
#container.login_page .regist_sub .bar { color: #A38E82; font-size: 12px; }
#container.login_page .social_login_box { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; }
#container.login_page .social_login { color: #A38E82; font-size: 16px; font-weight: 600 !important; }
#container.login_page .social_btn_group { display: flex; flex-direction: row; gap: 20px; }
#container.login_page .social_login_btn { border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; width: 56px; height: 56px; }
#container.login_page .social_login_btn img { width: 24px; height: 24px; }
#container.login_page .social_login_btn.kakao { background: #F9E000; }
#container.login_page .social_login_btn.naver { background: #07B804; }
#container.login_page .social_login_btn.google { border: 1px solid #CCC; background: #FFF; box-sizing: border-box; }
#container.login_page .social_login_btn.apple { background: black; }
@media screen and (max-width: 769px) { #container.login_page .d-login-area_sub { flex-direction: column !important; gap: 40px !important; padding: 40px 0px !important; }
    #container.login_page .d-login-area_sub::after { display: none !important; }
    #container.login_page .login_left_wrap { width: 100% !important; max-width: 100% !important; }
    #container.login_page .login_right_wrap { padding-left: 0 !important; width: 100% !important; max-width: 100% !important; border-top: 1px solid #D9D9D9; position: relative; padding-top: 40px !important; }
    #container.login_page .login_right_wrap::before { content: '\00b610\00b294'; position: absolute; top: -10px; background: white; padding: 0 16px; color: #A38E82; font-size: 14px; }
    #container.login_page .login_header_text .tit { font-size: 30px !important; }
    #container.login_page .login_header_text .sub_tit { font-size: 14px !important; }
    #container.login_page .social_login_box { gap: 16px !important; }
    #container.login_page .social_login { display: none !important; }
    #container.login_page>a:has(img.image_one) { display: flex !important; position: fixed !important; top: 20px !important; right: 0 !important; padding: 16px !important; z-index: 9999 !important; }
    #container.login_page>a:has(img.image_one) img.image_one { width: 24px !important; height: 24px !important; display: block !important; }
}
@media screen and (min-width: 770px) { #container.login_page>a:has(img.image_one) { display: none !important; }
}