/* BASIC css start */
.comm_tab_wrap { width: 1200px; margin: 50px auto 0; text-align:left; position:relative; }
.comm_title { display:inline-block; font-family:'prata', serif; font-size:23px; font-weight:normal; text-transform:uppercase; cursor:pointer; }
.comm_tab_list_box { padding: 20px 0; display:flex; justify-content:flex-start; }
.comm_tab_list { display:inline-block; margin-right:30px; }
.comm_tab_btn { display:inline-block; padding-bottom:5px; font-size:16px; font-weight:300; position:relative; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
.comm_tab_btn::after { content:''; display:inline-block; width:0; height:1px; background-color:#8ecdce; position:absolute; right:0; bottom:0; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
.comm_tab_btn.select { color:#000 !important; }
.comm_tab_btn.select::after { left:0 !important; width:100% !important; background-color:#000 !important; }
.comm_tab_btn:hover { color:#8ecdce; }
.comm_tab_btn:hover::after { width:100%; right:auto; left:0; }

.user_info_box { display:flex; align-items:center; }
.user_info_box .user_info { margin-right:10px; }
.user_info_box .user_info span { font-size:17px; font-weight:300; }
.user_info_box .user_info .edit_btn { display:inline-block; padding:5px 7px; border:1px solid #8ecdce; color:#8ecdce; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; }
.user_info_box .user_info .edit_btn:hover { color:#fff; background-color:#8ecdce; }
.user_info_box .mileage_box { padding-bottom:3px; }
.user_info_box .mileage_box a { padding-left:20px; font-size:17px; background:url(/design/twinkring/m/m_img/icons/reserve.png) left top 3px no-repeat; background-size:20px 20px; position:relative; }
.user_info_box .mileage_box a::after { display:inline-block; content:''; width:0; height:1px; background-color:#000; position:absolute; bottom:0; right:0; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; }
.user_info_box .mileage_box a:hover::after { width:100%; right:auto; left:0; }
.user_info_box .mileage_box a img { width:20px; }

/*µî±ÞÇýÅÃ*/
.user_level_box {
    width: max-content;
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}
.user_level_box .userName {
    font-size: 15px;
    font-weight: 500;
}
.user_level_box .userLevelInfo {
    padding: 12px;
    background-color: #f5f5f5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5rem;
}
.user_level_box .userLevelInfo .levelBox {
    display: flex;
    align-items: center;
    gap: 12px;
}
.user_level_box .userLevelInfo .levelBox .levelThumb {
    max-width: 70px;
    max-height: 70px;
    border-radius: 50%;
    overflow: hidden;
}
.user_level_box .userLevelInfo .levelBox .levelThumb .leverThumbImg {
    width: 100%;
}
.user_level_box .userLevelInfo .levelBox .level_info {
    font-size: 12px;
    display: flex;
    flex-direction: column;
    gap: 0.3em;
}
.user_level_box .userLevelInfo .levelBox .level_info .infoText {
    color: #989898;
}
.user_level_box .userLevelInfo .levelBox .level_info .levelGroup {
    font-weight: 600;
}
.user_level_box .userLevelInfo .groupBenefits .infoBtn {
    font-size: 13px; 
    font-weight: 500;
    padding: 7px 12px;
    border-radius: 5px;
    border: 1px solid #ddd;
    background-color: #fff;
    box-shadow: 0 0 3px rgba(0,0,0,0.15);
    cursor: pointer;
}
.user_level_box .userLevelInfo #dimmedWrap {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5em;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: rgba(0,0,0,0.5);
}
.user_level_box .userLevelInfo #dimmedWrap.on {
    display: flex;
}
.user_level_box .userLevelInfo #dimmedWrap .closeBtn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #fff;
    background: url(/design/twinkring/pc/pc_img/icons/w_close.png) center no-repeat;
    background-size: 20px;
}
.user_level_box .userLevelInfo #dimmedWrap .contInfoBox {
    width: 450px;
    height: 600px;
    border-radius: 7px;
    overflow-y: scroll;
}
.user_level_box .userLevelInfo #dimmedWrap .contInfoBox .contInfoImg {
    width: 100%;
}
/* BASIC css end */