@charset "utf-8";

/********************************************************
■ SideBar :사이드바(모바일 메뉴)
********************************************************/

/* sidebar Box */
#nt_sidebar { top:0; width:360px; height:100%; position:fixed; z-index:500; box-shadow:0 0 5px 5px rgba(50, 60, 70, 0.15); -webkit-box-shadow:0 0 5px 5px rgba(50, 60, 70, 0.15); -moz-box-shadow:0 0 5px 5px rgba(50, 60, 70, 0.15); }
#nt_sidebar .sidebar-content { height:100%; overflow-y:auto; overflow-x:hidden; background-color:#f8f8f8; -webkit-overflow-scrolling:touch; }

/* Icon */
.sidebar-icon i { font-size:40px; line-height:40px; }

/* Menu */
.sidebar-list h5 { padding:0.55rem 1.0rem; margin:0; font-weight:bold !important; border-top:1px solid #dee2e6; margin-top:-1px; }
.sidebar-list ul.off { display:none; }
.sidebar-list li { position:relative; }
.sidebar-list li a { display:block; padding:0.45rem 1.0rem; border-bottom:1px solid #eee; overflow:hidden; }
.sidebar-list li .me-a { padding-right:2.5rem; }
.sidebar-list .tree-toggle { position:absolute; z-index:1; top:0rem; right:0; width:2.5rem; padding:0.75rem 0; margin-top:0.15rem;	text-align:center; cursor:pointer; color:#aaa; }

.sidebar-list .me-ul { background:#fff; }
.sidebar-list .me-ul1 { background:#fafafa; }
.sidebar-list .me-ul2 { }
.sidebar-list .me-li1 .me-a1,
.sidebar-list .me-li2 .me-a2 { padding-left:2.0rem; }
.sidebar-list .me-li.active .me-a,
.sidebar-list .me-li1.active .me-a1,
.sidebar-list .me-li2.active .me-a2 { font-weight:bold; }
.sidebar-list .me-line1 .me-a1 { background:#eee; font-weight:bold; }
.sidebar-list .me-line2 .me-a2 { background:#eee; font-weight:bold; }
@media (min-width:768px) {
	#nt_sidebar { right:-380px; }
}
@media (max-width:767px) {
	#nt_sidebar { left:-100%; width:100%; }
}

/* Mask */
#nt_sidebar_mask { display:none; position:fixed; z-index:499; background:rgba(0,0,0,0.75); left:0; top:0; width:100%; height:100%; }

/* Noti Tack */
#nt_sidebar_noti { position:fixed; z-index:100; }
@media (min-width:768px) {
	#nt_sidebar_noti { top:40%; right:0; border-top-left-radius:50rem !important; border-bottom-left-radius:50rem !important; }
}
@media (max-width:767px) {
	#nt_sidebar_noti { left:0; bottom:25px; border-top-right-radius:50rem !important; border-bottom-right-radius:50rem !important; }
}

/* Go to Top */
#nt_sidebar_move { display:none; position:fixed; width:40px; bottom:50px; right:25px; z-index:2; }
#nt_sidebar_move span { display:block; color:#fff; background:rgba(0,0,0,0.5); margin:5px 0; text-align:center; border-radius:50%; width:42px; height:42px; line-height:42px !important; font-size:19px; }
#nt_sidebar_move .sidebar-move-bottom { display:none; }

/* side header */ 
.nt_sidebar_header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    background-color:#2e3033;
    padding:12px 16px;
    border-bottom:1px solid #444;
    color:#fff;
    font-size:16px;
    font-weight:bold;
}

.nt_sidebar_header .title {
    flex-grow:1;
}

.sidebar-close {
    display:flex;
    align-items:center;
    text-decoration:none;
}
.close-x-icon img {
    width:15px;
    height:15px;
    cursor:pointer;
    filter:brightness(0) invert(1);
    transition:transform 0.2s ease;
}
.close-x-icon img:hover {
    transform:scale(1.2);
}
/* side banner */
.nt_sidebar_banner {
    width:100%;
    box-sizing:border-box;
    padding:0 10px;
}

.nt_sidebar_banner img {
    display:block;
    width:100%;
    height:auto;
    border-radius:6px;
    box-shadow:3px 3px 8px rgba(0, 0, 0, 0.05);
}

/* side menu */
#nt_sidebar_menu_body {
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	padding:5px 10px;
}
.nt_sidebar_bg_box_shadow {
	display:flex;
	align-items:center;
	justify-content:center;
	text-decoration:none;
	border:0px solid #ccc;
	border-radius:6px;
	padding:6px;
	background-color:#fff;
	box-shadow:5px 5px 8px rgb(50 60 70 / 10%);
	transition:background-color 0.2s ease;
	box-sizing:border-box;
}
.nt_sidebar_bg_box_shadow span {
	font-size:1rem;
	font-weight:500;	
}
.nt_sidebar_section_title {
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    font-size:1.2rem;
    font-weight:500;
    color:#222;
    margin:5px;
    text-align:center;
    gap:10px;
}
.nt_sidebar_section_title::before,
.nt_sidebar_section_title::after {
    content:"";
    flex:1;
    height:1px;
    background-color:#ccc;
}
.nt_sidebar_menu_a { flex:0 0 100%; }
.nt_sidebar_menu_b { flex:0 0 calc(50% - 5px); }
.nt_sidebar_menu_c { flex:0 0 calc(33.333% - 6.7px); }

/* member */
.nt_side_member {
    width: 100%;
    padding:12px;
    background-color: #f9f9f9;
    border-radius: 6px;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.05);
    margin-bottom: 5px;
    box-sizing: border-box;
    font-size: 14px;
}

.nt_side_member_inner {
    display: flex;
    align-items: center;
}

.nt_side_member_img {
    width: 50px;
    height: 50px;
    margin-right: 16px;
    border-radius: 50%;
    object-fit: cover;
}

.nt_side_member_text {
    flex-grow: 1;
}

.nt_side_member_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    font-weight: 500;
    color: #222;
}

.nt_sidebar_m_noti_cnt {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.nt_sidebar_m_noti_cnt img {
    width: 20px;
    height: 20px;
}

.nt-noti-cnt {
    position: absolute;
    top: -6px;
    right: -10px;
    background-color: #ff3d3d;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 5px;
    border-radius: 20px;
    line-height: 1;
}

.nt_side_member_level {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #666;
    margin-top: 4px;
}

.nt_side_member_level img {
    width: 16px;
    height: 16px;
}

/* prograss bar */
.nt_exp_wrap {
	display: flex;
	align-items: center;
	gap: 10px;
	padding:3px 0;
}

.nt_exp_level {
	font-weight: bold;
	color: #333;
	font-size: 14px;
	white-space: nowrap;
}

.nt_exp_bar_box {
	flex: 1;
	background-color: #e0e0e0;
	border-radius: 4px;
	overflow: hidden;
	height: 16px;
	position: relative;
}

.nt_exp_bar {
	background-color: #00a69c;
	height: 100%;
	font-size: 12px;
	font-weight: bold;
	color: #fff;
	text-align: right;
	padding-right: 5px;
	line-height: 16px;
	min-width: 24px; /* 작을 때 숫자 표시 강제 */
	transition: width 0.3s ease;
	white-space: nowrap;
}

/* point history */
.nt_point_row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 0 5px 0;
}
.nt_point_label {
	font-size: 13px;
	white-space: nowrap;
}
.nt_point_info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex: 1;
	margin-left:5px;
}
.nt_point_amount {
	font-size: 13px;
	font-weight: bold;
	color: #000;
}
.nt_point_amount b {
	color:#00a69c;
}
.nt_point_buttons {
	display: flex;
	gap: 6px;
}
.nt_btn_point {
	background-color: #00b5ad;
	color: #fff !important;
	font-size: 12px;
	padding: 4px 8px;
	border-radius: 4px;
	text-decoration: none;
	transition: background-color 0.2s ease;
}
.nt_btn_point:hover {
	background-color: #019a93;
}
.nt_btn_point + .nt_btn_point {
	margin-left: 6px;
}
/* user menu */
.nt_sidebar_user_menu {
    padding: 10px 0;
    background-color: #f9f9f9;
    border-top: 1px solid #eee;
}

.nt_sidebar_user_menu_item ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 0;
    margin: 0;
    list-style: none;
}

.nt_sidebar_user_menu_item ul li {
    text-align: center;
    width: 25%;
    box-sizing: border-box;
}

.nt_sidebar_user_menu_item a {
    text-decoration: none;
    color: #333;
}

.bg_circle {
    width: 48px;
    height: 48px;
    margin: 0 auto 6px;
    background-color: #e0f7f7;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s ease;
}

.bg_circle i {
    font-size: 20px;
    color: #00a69c;
}

.bg_circle:hover {
    background-color: #00a69c;
}

.bg_circle:hover i {
    color: #fff;
}

.nt_sidebar_user_menu_item .text {
    font-size: 13px;
    color: #444;
    font-weight: 500;
}
.nt_sidebar_date {
	padding: 10px 0;
	font-size: 13px;
	color: #333;
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
}