@charset "utf-8";

/* 현재접속자 */
#current_connect ul {margin:0;padding:0;list-style:none;zoom:1}
#current_connect ul:after {display:block;visibility:hidden;clear:both;content:""}
#current_connect li:after {display:block;visibility:hidden;clear:both;content:""}
#current_connect li {position:relative;padding:25px 0 30px 0;border-bottom:1px solid #ececec;min-height:1px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin-left:0}
#current_connect li:first-child {border-top:1px solid #ececec}
#current_connect .crt_num {float:left;line-height:45px;margin-right:20px;color:#777;font-weight:normal}
#current_connect .crt_profile {float:left;margin-right:20px;line-height:45px}
#current_connect .crt_profile > img {width:45px;height:45px;border-radius:10px}
#current_connect .crt_info {float:left;margin-top:5px}
#current_connect .crt_name {display:block; font-size: 16px !important;}
#current_connect .sv_member {font-weight:normal;line-height:20px;font-size:1.2em; color:#000;}
#current_connect .profile_img {display:none}
#current_connect .crt_lct {display:block; margin-top: 3px;}
#current_connect .crt_lct a {color:#999; font-size: 12px;}
#current_connect li.empty_li {width:100%;padding:200px 0;border:0;color:#666;text-align:center}

#current_connect .cc_flex {position: relative;}
#current_connect .cc_flex1 {position: absolute; left: 0px; top:25px;}
#current_connect .cc_flex2 {width: 100%; padding-left: 65px; padding-right: 125px;}
#current_connect .cc_flex3 {position: absolute; right: 0px; top:25px;}
#current_connect .cc_flex3 a {display: inline-block; vertical-align: top;}

#current_connect .cc_flex .fl_btns {width: 50px; height:50px; border:1px solid #ddd; background-color: #fff; border-radius: 6px; text-align: center; margin-bottom: 0px; position: relative; line-height: 45px;}
#current_connect .cc_flex .fl_btns:hover {border-color:#AA20FF;}

.cc_total_cnt {background-color: #AA20FF; color:#fff; padding: 0px 7px 0px 7px; border-radius: 4px; margin-left: 7px; font-size: 11px; margin-top: -2px; display: inline-block; line-height: 20px; vertical-align: middle;}


/* 툴팁 { */
#current_connect .cc_flex .tooltips {
    opacity: 0;
    transition: all 350ms cubic-bezier(0.645, 0.045, 0.355, 1);
    cursor: default;
    position: absolute;
    left:50px;
    width: max-content;
    color: #fff;
    background-color: #212121;
    border-radius: 4px;
    padding: 4px 6px;
    font-size: 11px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 100%;
    top:50%;
    transform: translateY(-50%);
}
#current_connect .cc_flex .tooltips:after {
    border-top: 4px solid rgba(0, 0, 0, 0);
    border-left: 4px solid #212121;
    border-right: 4px solid rgba(0, 0, 0, 0);
    border-bottom: 4px solid rgba(0, 0, 0, 0);
    content: "";
    position: absolute;
    left: -7px;
    top: 50%;
    transform: translateY(-50%) rotate(180deg);
}



#current_connect .cc_flex .fl_btns .tooltips {left: 50%; transform: translateX(-50%); bottom:-20px; top:auto;}
#current_connect .cc_flex .fl_btns .tooltips:after {
    top:-7px; left: 50%; transform: translateX(-50%);
    border-top: 4px solid rgba(0, 0, 0, 0);
    border-left: 4px solid rgba(0, 0, 0, 0);
    border-left: 4px solid rgba(0, 0, 0, 0);
    border-bottom: 4px solid #212121;
}
#current_connect .cc_flex .fl_btns:hover .tooltips {opacity: 1; bottom:-30px;}

/* } */

@media all and (max-width:1024px) { 
    #current_connect {padding-left: 20px; padding-right: 20px;}
}



/* 접속자 IP정보 */
#ip_info_wrap {display: none;width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 10000;background: rgba(0, 0, 0, 0.5);backdrop-filter: blur(2px);animation: fadeIn 0.3s ease-in-out;}
#ip_info_wrap .ip_info {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background: #ffffff;border-radius: 12px;box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);width: 90%;max-width: 600px;max-height: 85vh;overflow-y: auto;padding: 0;}
#ip_info_wrap .ip_info h3 {margin: 0;padding: 20px 24px;font-size: 1.5rem;font-weight: 600;color: #1a1a1a;border-bottom: 1px solid #e8ecef;}
#ip_info_wrap .ip_info_cls {position: absolute;right: 16px;top: 16px;background: none;border: none;cursor: pointer;width: 32px;height: 32px;display: flex;align-items: center;justify-content: center;transition: transform 0.2s ease;}
#ip_info_wrap .ip_info_cls:hover {transform: scale(1.1);}
#ip_info_wrap .ip_info_cls img {width: 20px;height: 20px;filter: invert(40%);}
#ip_info_wrap .cont_info_wrap {padding: 16px 24px;border-bottom: 1px solid #f1f3f5;font-size: 0.95rem;line-height: 1.6;}
#ip_info_wrap .cont_info_wrap:last-child {border-bottom: none;}
#ip_info_wrap .cont_info_wrap dl {display: flex;flex-wrap: wrap;align-items: flex-start;gap: 12px; margin:0px;}
#ip_info_wrap .cont_info_wrap dt {width: 100px;font-weight: 600;color: #495057;}
#ip_info_wrap .cont_info_wrap dd {flex: 1;margin: 0;color: #212529;word-break: break-word;}
#ip_info_wrap .block-ip {display: inline-block;padding: 6px 12px;border-radius: 6px;background: #ff4d4f;color: #fff;text-decoration: none;font-size: 0.85rem;transition: background 0.2s ease;}
#ip_info_wrap .block-ip:hover {background: #e63946;}
#ip_info_wrap #flag {vertical-align: middle;width: 24px;height: 16px;margin-left: 8px;border: 1px solid #dee2e6;border-radius: 2px;}
@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}
@media (max-width: 600px) {
    #ip_info_wrap .ip_info {width: 95%;max-height: 90vh;}
    #ip_info_wrap .ip_info h3 {font-size: 1.25rem;padding: 16px;}
    #ip_info_wrap .cont_info_wrap {padding: 12px 16px;font-size: 0.9rem;}
    #ip_info_wrap .cont_info_wrap dt {width: 80px;font-size: 0.9rem;}
    #ip_info_wrap .block-ip {padding: 5px 10px;font-size: 0.8rem;}
}
@media (max-width: 400px) {
    #ip_info_wrap .cont_info_wrap dt {width: 100%;margin-bottom: 4px;}
    #ip_info_wrap .cont_info_wrap dd {width: 100%;}
}