.alert-popup{display:none;position:fixed;left:0;top:0;width:100%;height:100%;z-index:99999999;}
.alert-popup .dim{position:absolute;top:0;left:0;width:100%;height:100%;background:#2a2a2a;opacity: 0.7;}
.alert-popup .popup{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);-webkit-transform:translate(-50%, -50%);width:350px;max-width:90vw;padding:20px 22px;border-radius:8px;background:#fff;}
.alert-popup .popup .btn-close{position:absolute;top:10px;right:10px;width:34px;height:34px;background:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.2998 3.7998L3.7998 16.2998' stroke='%23AAAAAA' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round'/%3E%3Cpath d='M3.7998 3.7998L16.2998 16.2998' stroke='%23AAAAAA' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round'/%3E%3C/svg%3E%0A") no-repeat 50% 50%;background-size:auto 20px;}
.alert-popup .popup .pop-header{position:relative;height:50px;display:flex;flex-direction:row;align-items:center;border-bottom: 1px solid #E4E8F1;}
.alert-popup .popup .pop-header .tit{font-size:15px;font-weight:500; color:#000;text-align:center;display:block;flex:1;}
.alert-popup .popup .pop-img{border-radius:10px 10px 0 0;overflow:hidden;}
.alert-popup .popup .btn-wrap{display:flex;align-items:center;padding:0 0;}
.alert-popup .popup .pop-body{padding-bottom:35px;padding-top:36px;}
.alert-popup .popup .pop-footer .btn-wrap{margin-top:0;flex-wrap: nowrap;}
.alert-popup .popup .pop-footer .btn-wrap{display:flex;flex-direction: row;}
.alert-popup .popup .pop-footer .btn-wrap [class*=btn-type]{flex:1;height:50px;display:flex;justify-content:center;align-items:center;font-size:15px;font-weight: 500;min-width: 0;}
.alert-popup .popup .pop-footer .btn-wrap .btn ~ .btn{border-left:1px solid #E4E8F1;}
.alert-popup .popup .alert-txt{font-size:15px; color:#383838;}


.btn-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
;margin-top: 25px;
    gap: 10px
}

.btn-wrap.center {
    justify-content: center;
}

.btn-wrap.mg-lg {
    margin-top: 60px;
}

.btn-wrap.mg-sm {
    margin-top: 10px;
}

.btn-wrap.col {
    flex-direction: column;
}

.btn-wrap .left {
    margin-right: auto;
}

.btn-wrap .right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-wrap.line-t {
    padding-top: 30px;
    border-top: 1px solid #f0f0f0;
}

[class*=btn-type] {
    display: inline-flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

[class*=btn-type]:disabled {
    background-color: #DDD !important;
    color: #aaaaac !important;
    border-color: #DDD !important;
}

[class*=btn-type].full {
    width: 100%;
}

[class*=btn-type].st1 {
    border: 1px solid #404040;
    color: #fff;
    background: #404040;
}

[class*=btn-type].st2 {
    border: 1px solid #d6d6d6;
    color: #333333;
    background: #fff;
}

[class*=btn-type].st3 {
    border: 1px solid #979797;
    color: #fff;
    background: #979797;
}

[class*=btn-type].st4 {
    border: 1px solid #6b6b6b;
    color: #fff;
    background: #6b6b6b;
}

[class*=btn-type].st5 {
    border: 1px solid #d6d6d6;
    color: #8b8c86;
    background: #fff;
}

[class*=btn-type].st6 {
    border: 1px solid #ff5452;
    color: #fff;
    background: #ff5452;
}

[class*=btn-type].st7 {
    border: 1px solid #404040;
    color: #404040;
    background: #fff;
}

[class*=btn-type] b {
    font-weight: 700;
}

[class*=btn-type] [class*=ico-]:first-child {
    margin-right: 5px;
}

[class*=btn-type].min-size1 {
    min-width: 310px;
}

[class*=btn-type].min-size2 {
    min-width: 120px;
}

[class*=btn-type].st-arr {
    padding-right: 25px;
    position: relative;
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='20' viewBox='0 0 30 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 20L0 3.04L2.6875 0L15 14L27.3125 0.0775003L30 3.11L15 20Z' fill='%239B9B9B'/%3E%3C/svg%3E%0A") ;
    background-size: auto 5px;
    background-repeat: no-repeat;
    background-position: right 9px top 52%;
}

[class*=btn-type].st-arr:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
}

.btn-type-full {
    height: 60px;
    width: 100%;
    line-height: 58px;
    padding: 0 40px;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
}

.btn-type1 {
    height: 60px;
    line-height: 58px;
    padding: 0 40px;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    min-width: 150px;
    border-radius: 3px;
}

.btn-type2 {
    height: 55px;
    line-height: 53px;
    padding: 0 40px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    min-width: 200px;
    border-radius: 3px;
}

.btn-type3 {
    height: 45px;
    line-height: 43px;
    padding: 0 40px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    min-width: 150px;
    border-radius: 3px;
}

.btn-type4 {
    height: 36px;
    line-height: 34px;
    padding: 0 20px;
    text-align: center;
    font-size: 13px;
    border-radius: 3px;
}

.btn-type5 {
    height: 32px;
    line-height: 30px;
    padding: 0 10px;
    text-align: center;
    font-size: 13px;
    border-radius: 3px;
}

.btn-type6 {
    height: 28px;
    line-height: 26px;
    padding: 0 10px;
    text-align: center;
    font-size: 12px;
    border-radius: 3px;
}

.btn-type7 {
    height: 25px;
    line-height: 22px;
    padding: 0 10px;
    text-align: center;
    font-size: 12px;
    border-radius: 3px;
    padding-bottom: 1px;
}

/* loading */
@keyframes bouncedelay {
    0%, 80%, 100% {
        transform: scale(0);
    }
    40% {
        transform: scale(1);
    }
}

@-webkit-keyframes bouncedelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
    }
    40% {
        -webkit-transform: scale(1);
    }
}




.loading-bar {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100010;   /* 모달(.kkami_modal 9999 등) 위에 표시되도록 최상단 */
}

.three-bounce {
    display: flex;
    gap: 10px;
}

.three-bounce div {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-image: url('/img/volleyball_3.png'); /* ← 경로 확인 */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    animation: bouncedelay 1.4s infinite ease-in-out;
}

.three-bounce .bounce1 { animation-delay: -0.32s; }
.three-bounce .bounce2 { animation-delay: -0.16s; }
.three-bounce .bounce3 { }