@charset "utf-8";
/*! 아웃바운드 콜 */
/* animation */
@-webkit-keyframes eye {
    0%, 10% { -webkit-transform: translate(0, 0); transform: translate(0, 0); }
    20%, 25% { -webkit-transform: translate(45%, 0); transform: translate(45%, 0); }
    35%, 40% { -webkit-transform: translate(45%, -25%); transform: translate(45%, -25%); }
    50%, 60% { -webkit-transform: translate(0, -25%); transform: translate(0, -25%); }
    70%, 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); }
}
@keyframes eye {
    0%, 10% { -webkit-transform: translate(0, 0); transform: translate(0, 0); }
    20%, 25% { -webkit-transform: translate(45%, 0); transform: translate(45%, 0); }
    35%, 40% { -webkit-transform: translate(45%, -25%); transform: translate(45%, -25%); }
    50%, 60% { -webkit-transform: translate(0, -25%); transform: translate(0, -25%); }
    70%, 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); }
}



/** ────────────────── 퀵 버튼 ────────────────── **/
.qnb_wrap { position: fixed; bottom: 0; width: 100%; max-width: 480px; min-width: 360px; z-index: 4000; }
#qnb { position: absolute; right: 20px; bottom: 64px; width: 48px; } 
#qnb.up { bottom: 122px; }
#qnb .qnb_bg { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); }
#qnb .btn_qnb,
#qnb a { position: relative; display: block; width: 48px; height: 48px; border-radius: 50%; -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15); }
#qnb .menu { display: none; position: relative; z-index: 1; }
#qnb .menu a { margin-bottom: 12px; }
#qnb .menu a.btn_cs { background: url(../../dist/res/img/landing/main/icon_qnb_headset.svg) no-repeat center center, #fff; }
#qnb .menu a.btn_call { background: url(../../dist/res/img/landing/main/icon_qnb_phone.svg) no-repeat center center, #fff; }
#qnb .menu a.btn_kakao { background: url(../../dist/res/img/landing/main/icon_qnb_kakao.svg) no-repeat center center, #fff; }
#qnb .menu a.btn_channeltalk { background: url(../../dist/res/img/landing/main/icon_qnb_channeltalk.svg) no-repeat center center, #fff; }
#qnb .menu a span { position: absolute; right: 56px; top: 15px; width: 200%; font-size: 14px; font-weight: 500; color: #fff; line-height: 18px; text-align: right; } 

/*  btn_qub  */
#qnb .btn_qnb { background: #0A0B30; z-index: 1; } 
#qnb .btn_qnb .chatbot_text { position: absolute; right: 56px; bottom: 0; width: fit-content; height: fit-content; padding: 8px 16px; background: #222; border-radius: 8px 0 8px 8px; display: flex; justify-content: center; align-items: center; transition: all 0.5s; }
#qnb .btn_qnb .chatbot_text .text { width: fit-content; max-width: 220px; font-size: 14px; font-weight: 500; color: #fff; line-height: 20px; letter-spacing: -0.28px; overflow: hidden; display: -webkit-box; white-space: nowrap; -webkit-line-clamp: 1;  -webkit-box-orient: vertical; }
#qnb .btn_qnb .chatbot_icon { position: absolute; top: 0; right: 0; width: 48px; height: 48px; cursor: pointer; }
/* emoji */
#qnb .btn_qnb .chatbot_icon .chatbot_emoji { 
    position: absolute; top: 14px; left: 14px; width: 20px; height: 20px; background: #fff; border-radius: 50%; 
    -webkit-transform-origin: left bottom; 
            transform-origin: left bottom; 
    -webkit-transition: -webkit-transform 300ms ease 400ms; 
            transition: -webkit-transform 300ms ease 400ms; 
            transition: transform 300ms ease 400ms; 
            transition: transform 300ms ease 400ms, -webkit-transform 300ms ease 400ms; 
    -webkit-transform: scale(1); 
            transform: scale(1);
}
#qnb .btn_qnb .chatbot_icon .chatbot_emoji::after { 
    display: inline-block; content: ""; position: absolute; bottom: -2px; left: 50%; width: 0px; height: 0px;
    border-left: 4px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #fff; 
    z-index: -1; opacity: .6;
    -webkit-transform: translate(-50%, 0) rotate(-90deg); 
            transform: translate(-50%, 0) rotate(-90deg);
}
#qnb .btn_qnb .chatbot_icon .chatbot_emoji .eye_wrap { 
    position: absolute; width: 100%; height: 100%; top: 0; left: 0; 
    -webkit-animation: eye 6000ms infinite alternate; 
            animation: eye 6000ms infinite alternate; 
    -webkit-transform-origin: center center; 
            transform-origin: center center; 
}
#qnb .btn_qnb .chatbot_icon .chatbot_emoji .eye_wrap .eyes { 
    position: absolute; display: inline-block; top: 8px; left: 4px; width: 2px; height: 4px; background: #3a5554; border-radius: 1px;
}
#qnb .btn_qnb .chatbot_icon .chatbot_emoji .eye_wrap .eyes:nth-of-type(2) { left: 9px; }
/*? .chatbot_icon.active */
#qnb .btn_qnb .chatbot_icon.active .chatbot_emoji {
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-transition: -webkit-transform 300ms ease 0ms;
    transition: -webkit-transform 300ms ease 0ms;
    transition: transform 300ms ease 0ms;
    transition: transform 300ms ease 0ms, -webkit-transform 300ms ease 0ms;
}
/* close */
#qnb .btn_qnb .chatbot_icon .chatbot_close {
    position: absolute; top: 0; left: 0; width: 48px; height: 48px; opacity: 0;
    -webkit-transform: rotate(-135deg);
            transform: rotate(-135deg);
    -webkit-transition: opacity 0ms ease 500ms, -webkit-transform 500ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
    transition: opacity 0ms ease 500ms, -webkit-transform 500ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
    transition: transform 500ms cubic-bezier(0.55, 0.055, 0.675, 0.19), opacity 0ms ease 500ms;
    transition: transform 500ms cubic-bezier(0.55, 0.055, 0.675, 0.19), opacity 0ms ease 500ms, -webkit-transform 500ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

#qnb .btn_qnb .chatbot_icon .chatbot_close span { position: absolute; display: inline-block; top: 50%; left: 50%; width: 14px; height: 2px; background-color: #fff; }
#qnb .btn_qnb .chatbot_icon .chatbot_close span:nth-of-type(1) {
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
            transform: translate(-50%, -50%) rotate(45deg); 
}
#qnb .btn_qnb .chatbot_icon .chatbot_close span:nth-of-type(2) {
    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
            transform: translate(-50%, -50%) rotate(-45deg); 
}
/*? .chatbot_icon.active */
#qnb .btn_qnb .chatbot_icon.active .chatbot_close {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transition: -webkit-transform 330ms cubic-bezier(0.215, 0.61, 0.355, 1) 150ms;
            transition: -webkit-transform 330ms cubic-bezier(0.215, 0.61, 0.355, 1) 150ms;
            transition: transform 330ms cubic-bezier(0.215, 0.61, 0.355, 1) 150ms;
            transition: transform 330ms cubic-bezier(0.215, 0.61, 0.355, 1) 150ms, -webkit-transform 330ms cubic-bezier(0.215, 0.61, 0.355, 1) 150ms;
    opacity: 1;
}



/** ────────────────── 아웃바운드콜 - 팝업 ────────────────── */
.qnb_popup { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; z-index: 9000; } 
.qnb_popup .qnb_popup_wrap { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: 480px; background: var(--white); border-radius: 12px; z-index: 3000; overflow: hidden; } 
.qnb_popup .qnb_popup_wrap.type_full { top: 0; width: 100%; height: 100vh; border-radius: 0; } 
.qnb_popup .qnb_popup_wrap.type_center { top: 50%; transform: translateX(-50%) translateY(-50%); width: 90%; max-width: 432px; height: fit-content; } 
.qnb_popup .qnb_popup_wrap.type_toast { bottom: -100%; height: fit-content; border-bottom-left-radius: 0; border-bottom-right-radius: 0; transition: bottom 0.5s; } 
.qnb_popup.on .qnb_popup_wrap.type_toast { bottom: 0; } 
.qnb_popup .qnb_popup_head { position: relative; height: 56px; padding: 4px; border-bottom: 1px solid #efefef; } 
.qnb_popup .qnb_popup_head .title { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 256px; font-size: 16px; font-weight: 700; color: #222; line-height: 140%; letter-spacing: -0.32px; text-align: center; }
.qnb_popup .qnb_popup_head .btn_back { display: inline-block; position: absolute; left: 4px; width: 48px; height: 48px; background: url(../../dist/res/img/landing/main/btn_back.svg) no-repeat center center; background-size: 24px; text-indent: -9999px; overflow: hidden; }
.qnb_popup .qnb_popup_head .btn_exit { display: inline-block; position: absolute; right: 4px; width: 48px; height: 48px; background: url(../../dist/res/img/landing/main/btn_close_black.svg) no-repeat center center; background-size: 24px; text-indent: -9999px; overflow: hidden; }
.qnb_popup .qnb_popup_inner { padding: 24px 20px; max-height: 300px; overflow-y: scroll; -ms-overflow-style: none; scrollbar-width: none; }
.qnb_popup .qnb_popup_inner::-webkit-scrollbar { display: none; } 
.qnb_popup .qnb_popup_btn { display: flex; width: 100%; text-align: center; }
.qnb_popup .qnb_popup_btn.type_sticky { position: sticky; bottom: 0; padding: 36px 20px 40px; }
.qnb_popup .qnb_popup_btn .btn { width: 100%; font-size: 16px; font-weight: 700; line-height: 140%; letter-spacing: -0.32px; padding: 16px 20px; border: 1px solid transparent; border-radius: 8px; position: unset; text-indent: unset; height: unset; transform: unset;}
.qnb_popup .qnb_popup_btn .btn:disabled,
.qnb_popup .qnb_popup_btn .btn.disabled { color: #aaa; background: #efefef; border: 1px solid #efefef; pointer-events: none; }
.qnb_popup .qnb_popup_btn .btn_submit { color: #fff; background: #2AAD5C; border: 1px solid #2AAD5C; }
.qnb_popup .qnb_popup_bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); }

/* popup - 서비스 이용문의 1 */
.popup_cs_check .title { font-size: 16px; font-weight: 700; line-height: 140%; letter-spacing: -0.32px; }
.popup_cs_check .check_list_box { margin-top: 16px; }
.popup_cs_check .check_list_box li { margin-bottom: 8px; }
.popup_cs_check .check_list_box li:last-of-type { margin-bottom: 0; }
.popup_cs_check .check_list_box li input {display: none;}
.popup_cs_check .check_list_box li input + label { display: block; position: relative; width: 100%; padding: 16px 16px 16px 48px; background: #f8f9fa; border: 1px solid #f8f9fa; border-radius: 8px; }
.popup_cs_check .check_list_box li input + label .icon_chkbox { display: block; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; background: url(../../dist/res/img/landing/main/icon_chkbox_square_off.svg) no-repeat center center; background-size: contain; z-index: 1; }
.popup_cs_check .check_list_box li input + label p { font-size: 16px; font-weight: 500; color: #757575; line-height: 140%; letter-spacing: -0.32px; }
.popup_cs_check .check_list_box li input:checked + label { background: #F1FBF5; border: 1px solid #2AAD5C; }
.popup_cs_check .check_list_box li input:checked + label .icon_chkbox { background: url(../../dist/res/img/landing/main/icon_chkbox_square_on.svg) no-repeat center center; background-size: contain; }
.popup_cs_check .check_list_box li input:checked + label p { color: #222; } 
/* popup - 서비스 이용문의 2 */
.popup_cs_inquire .title { font-size: 16px; font-weight: 700; line-height: 140%; letter-spacing: -0.32px; }
.popup_cs_inquire .inquire_input_box { position: relative; width: 100%; margin-top: 20px; }
.popup_cs_inquire .inquire_input_box input { position: relative; width: 100%; height: 56px; font-size: 16px; font-weight: 400; color: transparent; line-height: 22px; padding: 24px 48px 8px 20px; background: var(--white); border: 1px solid #ddd; border-radius: 8px; transition: all .1s ease-in-out; box-sizing: border-box;} 
.popup_cs_inquire .inquire_input_box input::placeholder { color: #aaa; }
.popup_cs_inquire .inquire_input_box label { position: absolute; left: 20px; top: 20px; font-size: 16px; font-weight: 400; color: #aaa; line-height: 16px; display: inline-block; transition: all .1s ease-in-out; } 
.popup_cs_inquire .inquire_input_box input:focus,
.popup_cs_inquire .inquire_input_box input.focus { color: #222; border: 1px solid #2AAD5C; } 
.popup_cs_inquire .inquire_input_box input:focus + label,
.popup_cs_inquire .inquire_input_box input.focus + label { top: 8px; font-size: 13px; } 
.popup_cs_inquire .inquire_input_box input.valid { color: #222; } 
.popup_cs_inquire .inquire_input_box input.valid + label { top: 8px; font-size: 13px; } 
.popup_cs_inquire .terms_list_box { margin-top: 40px; }
.popup_cs_inquire .terms_list_box li { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 20px; }
.popup_cs_inquire .terms_list_box li:last-of-type { margin-bottom: 0; }
.popup_cs_inquire .terms_list_box li input {display: none;}
.popup_cs_inquire .terms_list_box li input + label { display: block; position: relative; width: calc(100% - 30px); padding-left: 26px; }
.popup_cs_inquire .terms_list_box li input + label .icon_chkbox { display: block; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; background: url(../../dist/res/img/landing/main/icon_chkbox_square_off.svg) no-repeat center center; background-size: contain; z-index: 1; }
.popup_cs_inquire .terms_list_box li input + label p { font-size: 14px; font-weight: 400; color: #222; line-height: 140%; letter-spacing: -0.28px; }
.popup_cs_inquire .terms_list_box li input:checked + label .icon_chkbox { background: url(../../dist/res/img/landing/main/icon_chkbox_square_on.svg) no-repeat center center; background-size: contain; }
.popup_cs_inquire .terms_list_box li .btn { display: inline-block; font-size: 14px; font-weight: 500; color: #aaa; line-height: 120%; letter-spacing: -0.28px; border-bottom: 1px solid #aaa; position: unset; text-indent: unset; transform: unset; width: unset; height: unset;}
/* popup - 약관 */
.qnb_popup .terms_title { font-size: 18px; font-weight: 700; line-height: 130%; letter-spacing: -0.36px; margin-bottom: 24px; }
.qnb_popup .terms_text { font-size: 14px; font-weight: 400; color: #222; line-height: 140%; letter-spacing: -0.32px; margin: 16px 0; }
/* popup - 접수 완료 */
.popup_cs_confirm .qnb_popup_inner { text-align: center; } 
.popup_cs_confirm .title { font-size: 18px; font-weight: 700; line-height: 130%; letter-spacing: -0.36px; }
.popup_cs_confirm .text { font-size: 14px; font-weight: 400; color: #757575; line-height: 140%; letter-spacing: -0.32px; margin-top: 8px; }
.popup_cs_confirm .btn_submit { margin-top: 24px; }

@media (max-width: 480px) {
    #qnb { bottom: 20px; }
}