@charset "utf-8";
/** POPUP - loading */
#popup_loading { position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 9999; } 
#popup_loading::after { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); content: ''; display: block; } 
#popup_loading::before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #ffffff; content: ''; display: block; } 
#popup_loading .popup_wrap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(100% - 48px); min-width: 312px; max-width: 432px; padding: 24px; text-align: center; background: #ffffff; border-radius: 16px; z-index: 9999; } 
#popup_loading .icon_box { width: 100%; margin-bottom: 12px; } 
#popup_loading .text { font-size: 18px; font-weight: 400; color: #222222; line-height: 24px; word-break: keep-all; } 
#popup_loading .icon_box .icon_survey { display: inline-block; width: 42px; height: 57px; background: url(../image/icon/icon_loading_survey.svg) no-repeat center center; background-size: 42px; animation: down 1.5s infinite; -webkit-animation: down 1.5s infinite; } 
#popup_loading .icon_box .icon_loading { position: relative; display: inline-block; width: 50px; height: 50px; border-radius: 50%; overflow: hidden; } 
#popup_loading .icon_box .icon_loading::before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #ffffff; border-right: 3px solid #222222; border-left: 3px solid #222222; border-top: 3px solid #ffffff; border-bottom: 3px solid #ffffff; border-radius: 25px; box-sizing: border-box; animation: rotation 1s ease-in-out infinite; -webkit-animation: rotation 1s ease-in-out infinite; transition: all 0.5s ease-in-out; content: ''; display: block; } 
#popup_loading .icon_box .icon_loading::after { position: absolute; left: 50%; top: 45%; width: 0; height: 0; transform: translate(-50%, -50%) rotate(45deg); transition: all 0.35s ease-in-out 0.2s; content: ''; display: block; } 
#popup_loading .icon_box.finished .icon_loading::before { border: 3px solid #222222; background: #222222; } 
#popup_loading .icon_box.finished .icon_loading::after { opacity: 1; width: calc(50px / 6); height: calc(50px / 2.5); border-color: #ffffff; border-width: 0 3px 3px 0; border-style: solid; } 

/* icon_survey 애니메이션 */
@keyframes down { 
    0% { transform: translate(0); } 
    20% { transform: translateY(5px); } 
    40% { transform: translate(0); } 
}
@-webkit-keyframes down { 
    0% { transform: translate(0); } 
    20% { transform: translateY(5px); } 
    40% { transform: translate(0); } 
}