.top_bar {
    box-shadow: 1px 13px 10px 0px #3b3b3b14;
    border-radius: 32px;
    position: relative;

}

.quest_center_text {
    background-color: #FBB449;
    color: #fff;
    padding: 4px;
    border-radius: 10px;
    width: 80px;
    text-align: center;
    margin-right: 30px;
    height: 31px;
}

.cursor_pointer {
    cursor: pointer;
}

.line-hr {
    color: #b7b7b7;
}

.q_step {
    height: 60px;
    cursor: pointer;
}




/*.q_step:hover {
    height: 60px;
    width: 103%;
    background-color: #46b98b;
    float: right;
    border-radius: 30px 0px 0px 30px;
    color: #fff;
    cursor: pointer;
}
*/

.q_check_step {
    height: 60px;
    width: 103%;
    float: right;
    border-radius: 30px 0px 0px 30px;
    color: #fff;
    cursor: pointer;
}

.q_check_step_s {
    background-color: #DB4543;
}

.q_check_step_p {
    background-color: #F2980D;
}

.q_check_step_a {
    background-color: #E6B319;
}

.q_check_step_b {
    background-color: #74BF40;
}

.q_check_step_c {
    background-color: #1E9486;
}

.q_check_step_d {
    background-color: #5378C6;
}



.step_list_s {
    border: 1px solid #FFDBDB;
    border-radius: 35px;
    background-color: #FFF0F0;
}

.step_list_p {
    border: 1px solid #FFE1B2;
    border-radius: 35px;
    background-color: #FFF5E5;
}

.step_list_a {
    border: 1px solid #FFEDB2;
    border-radius: 35px;
    background-color: #FBF7E9;
}

.step_list_b {
    border: 1px solid #D4EDC5;
    border-radius: 35px;
    background-color: #ECF6E4;
}

.step_list_c {
    border: 1px solid #D6EBE9;
    border-radius: 35px;
    background-color: #E3F1F1;
}

.step_list_d {
    border: 1px solid #D6E0F5;
    border-radius: 35px;
    background-color: #EBF0FA;
}


.step_list_lock {
    border: 1px solid #fff;
    border-radius: 35px;
    background-color: #fff;
}

.Level_text_step_s {
    color: #BF4340;
}

.Level_text_step_p {
    color: #995D00;
}

.Level_text_step_a {
    color: #8A6B0F;
}


.Level_text_step_b {
    color: #2E4C1A;
}

.Level_text_step_c {
    color: #265950;
}

.Level_text_step_d {
    color: #1F3C7A;
}


.Level_text_lock {
    color: #D9D9D9;
}

.Q_text_gs {
    color: #428A6F;
    background-color: #fff;
    border-radius: 12px;
    height: 22px;
    padding: 4px;
    width: 35px;
    text-align: center;
    margin-right: 10px;
}

.Q_text_s {
    color: #DB4543;
    background-color: #fff;
    border-radius: 12px;
    height: 22px;
    padding: 4px;
    width: 35px;
    text-align: center;
    margin-right: 10px;
}

.Q_text_p {
    color: #FF9B00;
    background-color: #fff;
    border-radius: 12px;
    height: 22px;
    padding: 4px;
    width: 35px;
    text-align: center;
    margin-right: 10px;
}

.Q_text_a {
    color: #E6B319;
    background-color: #fff;
    border-radius: 12px;
    height: 22px;
    padding: 4px;
    width: 35px;
    text-align: center;
    margin-right: 10px;
}

.Q_text_b {
    color: #74BF40;
    background-color: #fff;
    border-radius: 12px;
    height: 22px;
    padding: 4px;
    width: 35px;
    text-align: center;
    margin-right: 10px;
}

.Q_text_c {
    color: #1E9486;
    background-color: #fff;
    border-radius: 12px;
    height: 22px;
    padding: 4px;
    width: 35px;
    text-align: center;
    margin-right: 10px;
}

.Q_text_d {
    color: #7193DB;
    background-color: #fff;
    border-radius: 12px;
    height: 22px;
    padding: 4px;
    width: 35px;
    text-align: center;
    margin-right: 10px;
}





.Q_text_gs_lock {
    color: #428A6F;
    background-color: #eef6f6;
    border-radius: 12px;
    height: 22px;
    padding: 4px;
    width: 35px;
    text-align: center;
    margin-right: 10px;
}

.status_g {
    /*width: 194px;*/
}

.status_g_1 {
    width: 152px;
    height: 28px;
    background-color: #11111126;
    border-radius: 20px;
}

.status_text {
    padding-right: 5px;
}

.beacon_group {
    width: 58px;
    background-color: #333333B2;
    border-radius: 15px;
    height: 22px;
    padding-left: 4px;
    padding-right: 4px;
}

.beacon_ing_group {
    width: 58px;
    background-color: #FFFFFF66;
    border-radius: 15px;
    height: 22px;
    padding-left: 4px;
    padding-right: 4px;
}

.beacon_green {
    height: 13px;
    width: 13px;
    border-radius: 10px;
    background-color: #36c38b;
    margin-left: auto;
    margin-right: auto;
}

.beacon_yellow {
    height: 13px;
    width: 13px;
    border-radius: 10px;
    background-color: #fbb449;
    margin-left: auto;
    margin-right: auto;
}

.beacon_red {
    height: 13px;
    width: 13px;
    border-radius: 10px;
    background-color: #ff5760;
    margin-left: auto;
    margin-right: auto;
}

.beacon_gray {
    height: 13px;
    width: 13px;
    border-radius: 10px;
    background-color: #D9D9D9;
    margin-left: auto;
    margin-right: auto;
}

.beacon_w {
    height: 13px;
    width: 13px;
    border-radius: 10px;
    background-color: #FFFFFF;
    margin-left: auto;
    margin-right: auto;
}

.L_color_green_soft_2 {
    color: #46B98B;
}



.L_color_green_soft_4 {
    color: #CBE6DC;
}


.left_box_beacon1 {
    width: 12px;
    height: 12px;
    border-radius: 6px;
    background-color: #00c177;
    margin-right: 7px;
}

.left_box_beacon2 {
    width: 12px;
    height: 12px;
    border-radius: 6px;
    background-color: #fbb449;
    margin-right: 7px;
}

.left_box_beacon3 {
    width: 12px;
    height: 12px;
    border-radius: 6px;
    background-color: #ff5760;
    margin-right: 7px;
}

.left_box_div {
    background-color: #f9f9fb;
    padding: 15px;
    border-radius: 16px;
}

.level_test_div {
    background-color: #fff;
    width: 100%;
    height: 100%;
    border-radius: 22px;
    cursor: pointer;
}

.level_test_div_Lock {
    background-color: #F7F7FB;
    width: 100%;
    height: 100%;
    border-radius: 22px;
    cursor: pointer;
}

.level_test_text {
    color: #1F3C7A;
    margin-left: 7px;
    margin-right: 10px;
    padding-top: 4px;
}

.l_step {
    height: 45px;

}

.right_scroll {
    overflow-y: scroll;
    height: inherit;
    padding-bottom: 15%;
}

.right_scroll::-webkit-scrollbar {
    width: 10px;
}

.right_scroll::-webkit-scrollbar-track {
    background-color: #f9f9fb;
}

.right_scroll::-webkit-scrollbar-thumb {
    background-color: #D9D9D9;
    border-radius: 20px;
}

.right_scroll::-webkit-scrollbar-button {
    display: none;
}

.r_popup {
    position: absolute;
    background-color: #00000033;
}

.r_popup_panel {
    width: 750px;
    height: 600px;
    background-color: #fff;
    border-radius: 40px;
}

.right_scroll2 {
    overflow-y: scroll;
    height: inherit;
    padding-bottom: 15%;
}

.right_scroll2::-webkit-scrollbar {
    display: none;
}

.r_popup_panel_end {
    height: 60px;
    width: 100%;
    border-radius: 0px 0px 40px 40px;
    background-color: #4874D1;
}

.popup_Q_text_gs {
    color: #316853;
    background-color: #EAF5F1;
    border-radius: 12px;
    height: 22px;
    padding: 4px;
    width: 35px;
    text-align: center;
    margin-right: 10px;
}

.popup_c_list {
    height: 60px;
}

.popup_c_t_list {
    height: 80px;
}

.close_img {
    width: 25px;
    height: 25px;

}

.popup_top_T_1 {
    width: 90px;
    text-align: center;
}

.popup_top_T_2 {
    width: 70px;
    text-align: center;
}

.popup_top_T_3 {
    width: 480px;
}

.popup_top_T_4 {
    width: 60px;
    text-align: center;
}

.popup_content_div {
    height: 100%;
    margin-bottom: -60px;
}

.popup_table_div {
    width: 100%;
    height: 380px;
    background-color: #F9F9FB;
    border-radius: 40px;
}

.table_group {
    height: 460px;
    overflow-y: scroll;
}

.table_group::-webkit-scrollbar {
    display: none;
}

.popup_table_sum {
    width: 100%;
    height: 70px;
    background-color: #F1F1F5;
    border-radius: 40px;
}

.height60 {
    height: 60px;
}

.height40 {
    height: 40px;
}


.popup_table_T_1 {
    width: 70px;
    text-align: center;
    color: #505050;
}

.popup_table_T_2 {
    width: 295px;
    text-align: left;
    color: #505050;
}

.popup_table_T_3 {
    width: 70px;
    text-align: center;
    color: #505050;
}

.filter_btn {
    border: solid 1px #E5E5EC;
    border-radius: 22px;
    margin-left: 5px;
    margin-right: 5px;
    padding: 10px;
}

.filter_btn_check {
    border-radius: 22px;
    margin-left: 5px;
    margin-right: 5px;
    padding: 10px;
    background-color: #000000;
    color: #fff;
}



/* 모바일 전용 */
@media (max-width: 767px) {

    /* 필터 버튼 영역 반응형 */
    .row .col-12.d-flex {
        flex-wrap: wrap;
        /* 모바일에서 줄바꿈 허용 */
        gap: 6px;
        /* 버튼 사이 간격 */
    }

    .filter_btn,
    .filter_btn_check {
        flex: 1 1 auto;
        /* 공간에 맞게 자동 줄어듦 */
        min-width: 70px;
        /* 너무 작아지지 않게 최소 폭 */
        text-align: center;
        padding: 8px 12px;
        /* 모바일에서 패딩 줄이기 */
        font-size: 14px;
        /* 글씨 조금 작게 */
        border-radius: 18px;
        /* 모바일은 라운드 더 작게 */
    }
}

.step_circle {
    width: 8px;
    height: 8px;
    border-radius: 5px;
    margin-right: 10px;
}

.level_info_text {
    text-align: left;
}



.level_label_s {
    width: 50px;
    background-color: #DB454333;
    border-radius: 15px;
    padding-top: 3px;
    color: #DB4543;
}

.level_label_p {
    width: 50px;
    background-color: #F2980D33;
    border-radius: 15px;
    padding-top: 3px;
    color: #DB4543;
}

.level_label_a {
    width: 50px;
    background-color: #E6B31933;
    border-radius: 15px;
    padding-top: 3px;
    color: #DB4543;
}

.level_label_b {
    width: 50px;
    background-color: #74BF4033;
    border-radius: 15px;
    padding-top: 3px;
    color: #DB4543;
}

.level_label_c {
    width: 50px;
    background-color: #1E948633;
    border-radius: 15px;
    padding-top: 3px;
    color: #DB4543;
}

.level_label_d {
    width: 50px;
    background-color: #5378C633;
    border-radius: 15px;
    padding-top: 3px;
    color: #DB4543;
}


.info_box {
    border-bottom: solid 1.5px #F1F1F5;
}

.info_box:hover {
    background-color: #F9F9FB;
}

.q_step_title {
    padding-right: 30px;
}




/* 태블릿 (예: 가로 폭이 768px ~ 1024px) */
@media (max-width: 1024px) {}

/* 모바일 (예: 가로 폭이 767px 이하) */
@media (max-width: 767px) {
    .q_step {
        height: 52px;
        cursor: pointer;
    }
}