@charset "utf-8";

/* sidebar Box */
#sidebar-box { top: 0px; width: 280px; height: 100%; position: fixed; z-index:99998; background: #fcf8f1; }
#sidebar-box .sidebar-content { position:relative; padding:0px 12px; overflow:auto; overflow-x:hidden; height:100%; -webkit-overflow-scrolling:touch; }
#sidebar-box .sidebar-head { position:absolute; top:0; left:-1px; width:281px; height:6px; z-index:10; background: #e53935 !important; }
#sidebar-box .div-title-underline-thin { margin-bottom:8px; }
#sidebar-box .sidebar-sns-login img { margin:5px 0px 0px; width:20%; float:left; }
#sidebar-box-mask { display:none; position:fixed; z-index:99997; background:rgba(38,35,31,0.45); left:0; top:0; width:100%; height:100%; }

#sidebar-box .hm-sb-card {
	background: #fff;
	border: 1px solid #ece3d6;
	border-radius: 14px;
	overflow: hidden;
	margin-bottom: 12px;
}
#sidebar-box .hm-sb-card__head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	background: #fff;
	border-bottom: 1px solid #ece3d6;
}
#sidebar-box .hm-sb-card__ico {
	width: 30px;
	height: 30px;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 13px;
	color: #fff;
}
#sidebar-box .hm-sb-card__ico--menu { background: #e53935; }
#sidebar-box .hm-sb-card__ico--cate { background: #8a7460; }
#sidebar-box .hm-sb-card__ico--stats { background: #e85a6b; }
#sidebar-box .hm-sb-card__ico--user { background: #e53935; }
#sidebar-box .hm-sb-card__ico--login { background: #e53935; }
#sidebar-box .hm-sb-card__head h3 {
	margin: 0;
	font-size: 14px;
	font-weight: 800;
	color: #3a342e;
	letter-spacing: -0.02em;
}
#sidebar-box .hm-sb-quick {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	padding: 12px;
	background: #fcf8f1;
}
#sidebar-box .hm-sb-quick__item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 8px;
	background: #fff;
	border: 1px solid #ece3d6;
	border-radius: 10px;
	color: #3a342e;
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
}
#sidebar-box .hm-sb-quick__item:hover,
#sidebar-box .hm-sb-quick__item:active {
	border-color: #e53935;
	color: #3a342e;
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(229,57,53,.12);
}
#sidebar-box .hm-sb-quick__ico {
	width: 26px;
	height: 26px;
	border-radius: 7px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 12px;
}
#sidebar-box .hm-sb-quick__ico--home { background: #fff0d6; color: #e89a00; }
#sidebar-box .hm-sb-quick__ico--event { background: #ffe4e8; color: #e85a6b; }
#sidebar-box .hm-sb-quick__ico--check { background: #ebe4da; color: #8a7460; }
#sidebar-box .hm-sb-quick__ico--cs { background: #fff3d6; color: #d4a017; }

#sidebar-box .sidebar-menu { margin: 0; border: 0; }
#sidebar-box .sidebar-menu a { display: block; color: #3a342e; }
#sidebar-box .sidebar-menu .panel { background: none; margin: 0; line-height: 1.4; border: 0; box-shadow: none; border-radius: 0; }
#sidebar-box .sidebar-menu .ca-head { padding: 0; border-bottom: 1px solid #f3eee6; }
#sidebar-box .sidebar-menu .ca-head > a { padding: 11px 14px; font-size: 13px; font-weight: 600; }
#sidebar-box .sidebar-menu .ca-head > a:hover { background: #fcf8f1; text-decoration: none; color: #e53935; }
#sidebar-box .sidebar-menu .ca-head.active > a { font-weight: 800 !important; color: #e53935 !important; background: #fff5f5; }
#sidebar-box .sidebar-menu .ca-head > a.no-sub::after { top: 0px; font-family: "FontAwesome"; float: right; position: relative; content: "\f105"; color: #c4b8aa; }
#sidebar-box .sidebar-menu .ca-head > a > .ca-href { display: inline-block; width: 30px; cursor: pointer; }
#sidebar-box .sidebar-menu .ca-head > a > .ca-href::after { top: 0px; float: right; position: relative; content: "+"; color: #c4b8aa; font-weight: 700; }
#sidebar-box .sidebar-menu .ca-head.active > a > .ca-href::after { top: 0px; font-family: "FontAwesome"; float: right; position: relative; content: "\f107"; color: #e53935; }
#sidebar-box .sidebar-menu .ca-sub { padding: 0; margin: 0; list-style: none; background: #fcf8f1; border-bottom: 1px solid #ece3d6; }
#sidebar-box .sidebar-menu .ca-sub li { padding: 8px 16px 8px 28px; border-bottom: 1px solid #f0e9df; }
#sidebar-box .sidebar-menu .ca-sub li:last-child { border-bottom: 0; }
#sidebar-box .sidebar-menu .ca-sub li a { font-size: 13px; color: #6b6560; }
#sidebar-box .sidebar-menu .ca-sub li a:hover { color: #e53935; text-decoration: none; }
#sidebar-box .sidebar-menu .ca-sub li.on a { font-weight: 800 !important; color: #e53935 !important; }
#sidebar-box .sidebar-menu .ca-line { border: 0; background: #fff; font-weight: 700; color: #9a9084; font-size: 12px; }
#sidebar-box .sidebar-menu .fa-bolt { color: #e53935 !important; }

#sidebar-box .hm-sb-stats {
	list-style: none;
	margin: 0;
	padding: 6px 0;
}
#sidebar-box .hm-sb-stats li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 9px 14px;
	border-bottom: 1px solid #f3eee6;
	font-size: 13px;
	color: #6b6560;
}
#sidebar-box .hm-sb-stats li:last-child { border-bottom: 0; }
#sidebar-box .hm-sb-stats li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	color: #6b6560;
	text-decoration: none;
}
#sidebar-box .hm-sb-stats li a:hover { color: #e53935; }
#sidebar-box .hm-sb-stats strong,
#sidebar-box .hm-sb-stats li a span,
#sidebar-box .hm-sb-stats li > span + strong {
	color: #3a342e;
	font-weight: 700;
}
#sidebar-box .hm-sb-stats b { color: #c1272d; }

#sidebar-box .sidebar-search { border:1px solid #eee; background:#fafafa; padding:8px; margin-bottom:10px; }
#sidebar-box .sidebar-search .row { margin-left:-3px; margin-right:-3px; }
#sidebar-box .sidebar-search .row > div { padding-left:3px; padding-right:3px; }

#sidebar-box .sidebar-media { border-bottom:1px solid #eee; margin:0px 0px 8px; padding:0px 0px 8px; line-height:20px; }
#sidebar-box .sidebar-media .media-photo i { background:#eee; border-radius: 50%; padding: 8px; width: 40px; height: 40px; text-align: center; font-size: 22px; display: inline-block; }
#sidebar-box .sidebar-media .media-photo img { border-radius: 50%; width: 40px !important; height: 40px !important; display:inline-block; }
#sidebar-box .sidebar-media .media-info { font-size:12px; color:#888; }
#sidebar-box .sidebar-media .media-info i { margin-left:10px; }

#sidebar-box .hm-sb-user__head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px;
	background: linear-gradient(90deg, rgba(229,57,53,.07), transparent 70%);
	border-bottom: 1px solid #ece3d6;
}
#sidebar-box .hm-sb-user__photo {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	overflow: hidden;
	background: #fff0d6;
	color: #e89a00;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 18px;
}
#sidebar-box .hm-sb-user__photo img { width: 44px; height: 44px; object-fit: cover; display: block; }
#sidebar-box .hm-sb-user__meta { min-width: 0; flex: 1; }
#sidebar-box .hm-sb-user__meta strong {
	display: block;
	font-size: 14px;
	font-weight: 800;
	color: #3a342e;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#sidebar-box .hm-sb-user__meta span { font-size: 12px; color: #9a9084; }
#sidebar-box .hm-sb-user__logout {
	flex-shrink: 0;
	padding: 6px 10px;
	border: 1px solid #ece3d6;
	border-radius: 8px;
	background: #fcf8f1;
	color: #3a342e;
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
}
#sidebar-box .hm-sb-user__logout:hover { border-color: #e53935; color: #e53935; text-decoration: none; }
#sidebar-box .hm-sb-user__exp { padding: 12px 14px 4px; }
#sidebar-box .hm-sb-user__bar {
	height: 8px;
	border-radius: 999px;
	background: #f3ebe0;
	overflow: hidden;
}
#sidebar-box .hm-sb-user__bar span {
	display: block;
	height: 100%;
	background: #e53935;
	border-radius: 999px;
}
#sidebar-box .hm-sb-user__exp-txt {
	display: flex;
	justify-content: space-between;
	margin-top: 6px;
	font-size: 11px;
	color: #9a9084;
}
#sidebar-box .hm-sb-user__stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	padding: 10px 14px 12px;
}
#sidebar-box .hm-sb-user__stats a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 8px;
	border: 1px solid #ece3d6;
	border-radius: 10px;
	background: #fcf8f1;
	color: #3a342e;
	text-decoration: none;
}
#sidebar-box .hm-sb-user__stats a:hover { border-color: #e53935; text-decoration: none; }
#sidebar-box .hm-sb-user__stats em {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #e53935;
	color: #fff;
	font-style: normal;
	font-size: 11px;
	font-weight: 800;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
#sidebar-box .hm-sb-user__stats a:first-child em { background: #3b82f6; }
#sidebar-box .hm-sb-user__stats strong { font-size: 13px; font-weight: 800; }
#sidebar-box .hm-sb-user__stats span { display: none; }
#sidebar-box .hm-sb-user__actions {
	display: flex;
	border-top: 1px solid #ece3d6;
}
#sidebar-box .hm-sb-user__actions a {
	flex: 1;
	position: relative;
	padding: 12px 4px 10px;
	text-align: center;
	border-right: 1px solid #ece3d6;
	color: #3a342e;
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
}
#sidebar-box .hm-sb-user__actions a:last-child { border-right: 0; }
#sidebar-box .hm-sb-user__actions a:hover { background: #fcf8f1; color: #e53935; text-decoration: none; }
#sidebar-box .hm-sb-user__actions i { display: block; font-size: 16px; margin-bottom: 4px; color: #8a8074; }
#sidebar-box .hm-sb-user__actions a:hover i { color: #e53935; }
#sidebar-box .hm-sb-user__actions b {
	position: absolute;
	top: 6px;
	right: 18%;
	min-width: 16px;
	padding: 1px 5px;
	border-radius: 10px;
	background: #d9534f;
	color: #fff;
	font-size: 10px;
	font-weight: 800;
}

#sidebar-box .hm-sb-links {
	list-style: none;
	margin: 0;
	padding: 4px 0;
}
#sidebar-box .hm-sb-links li { border-bottom: 1px solid #f3eee6; }
#sidebar-box .hm-sb-links li:last-child { border-bottom: 0; }
#sidebar-box .hm-sb-links a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 11px 14px;
	color: #3a342e;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}
#sidebar-box .hm-sb-links a:hover { background: #fcf8f1; color: #e53935; text-decoration: none; }
#sidebar-box .hm-sb-links a span { color: #9a9084; font-weight: 700; font-size: 12px; }
#sidebar-box .hm-sb-links a:hover span { color: #e53935; }
#sidebar-box .hm-sb-links__leave { color: #c1272d !important; }

#sidebar-box .hm-sb-login__form { padding: 14px 14px 8px; margin: 0; }
#sidebar-box .hm-sb-login__field {
	position: relative;
	display: flex;
	align-items: center;
	margin-bottom: 8px;
	background: #fcf8f1;
	border: 1px solid #ece3d6;
	border-radius: 8px;
	min-height: 44px;
	font-weight: normal;
	cursor: text;
}
#sidebar-box .hm-sb-login__field > i {
	position: absolute;
	left: 12px;
	color: #9a9084;
	width: 16px;
	text-align: center;
}
#sidebar-box .hm-sb-login__field input {
	width: 100%;
	height: 44px;
	border: 0;
	background: transparent;
	padding: 0 38px 0 36px;
	font-size: 13px;
	color: #3a342e;
	outline: none;
	box-shadow: none !important;
}
#sidebar-box .hm-sb-login__eye {
	position: absolute;
	right: 8px;
	border: 0;
	background: transparent;
	color: #9a9084;
	padding: 6px;
	cursor: pointer;
}
#sidebar-box .hm-sb-login__submit {
	width: 100%;
	height: 44px;
	margin: 2px 0 12px;
	border: 0;
	border-radius: 8px;
	background: #e53935;
	color: #fff;
	font-size: 14px;
	font-weight: 800;
	cursor: pointer;
}
#sidebar-box .hm-sb-login__submit:hover { background: #c62828; }
#sidebar-box .hm-sb-login__keep {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
	color: #9a9084;
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	line-height: 1.3 !important;
}
#sidebar-box .hm-sb-login__keep input { display: none; }
#sidebar-box .hm-sb-login__keep span {
	width: 36px;
	height: 20px;
	border-radius: 999px;
	background: #ddd5c8;
	position: relative;
	flex-shrink: 0;
	transition: background .2s;
}
#sidebar-box .hm-sb-login__keep span:before {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0,0,0,.15);
	transition: transform .2s;
}
#sidebar-box .hm-sb-login__keep input:checked + span { background: #e53935; }
#sidebar-box .hm-sb-login__keep input:checked + span:before { transform: translateX(16px); }
#sidebar-box .hm-sb-login__sns { padding: 0 14px 8px; }
#sidebar-box .hm-sb-login__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 12px 14px;
	border-top: 1px solid #ece3d6;
}
#sidebar-box .hm-sb-login__footer a {
	font-size: 12px;
	font-weight: 700;
	color: #9a9084;
	text-decoration: none;
}
#sidebar-box .hm-sb-login__footer a:first-child {
	padding: 6px 10px;
	border-radius: 8px;
	background: #fff3dd;
	color: #e53935;
}
#sidebar-box .hm-sb-login__footer a:hover { color: #e53935; text-decoration: none; }
#sidebar-box .sidebar-common .btn-navy {
	background: #e53935;
	border-color: #e53935;
	color: #fff;
}
#sidebar-box .sidebar-common .btn-navy:hover,
#sidebar-box .sidebar-common .btn-navy:focus {
	background: #c62828;
	border-color: #c62828;
	color: #fff;
}

#sidebar-box .sidebar-list { padding:0px; margin:0px; list-style:none; }
#sidebar-box .sidebar-list a { display:block; padding:4px 15px; border-bottom:1px solid #eee; }
#sidebar-box .sidebar-list.list-links a::after { top: 0px; font-family: "FontAwesome"; float: right; position: relative; content: "\f105"; }
#sidebar-box .sidebar-list.list-links a.no-fa::after { content: ""; }

#sidebar-box .progress { position:relative; border-radius: 0px; height: 28px; overflow: hidden; margin-bottom: 15px; box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1); background-color: rgb(245, 245, 245); -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); }
#sidebar-box .progress .sr-only { margin: 0px 15px; left: 0px; width: auto; height: 28px; line-height: 28px; font-size: 12px; clip: auto; }
#sidebar-box .sr-score { height: 28px; line-height: 28px; font-size: 12px; padding-right:8px; }
#sidebar-box .sr-secret { display:inline-block; padding:0px; margin:0px; line-height:12px; vertical-align:middle; background-repeat: no-repeat; background-position: 0px 0px; width:12px; height:12px; background-image: url('./img/icon_secret.gif'); }

#sidebar-box .sidebar-wing { position:absolute; width:36px; z-index:1; text-align:center; }
#sidebar-box .sidebar-wing-close { background:#fff; color:#8a7460; font-size: 18px; font-weight: 300 !important; width:36px; height:50px; line-height:50px !important; border:1px solid #ece3d6; cursor:pointer; }

@media (min-width: 481px) {
	#sidebar-box { right: -320px; border-left:1px solid #ddd; margin-left:40px; }
	#sidebar-box .sidebar-wing { left:0; margin-left:-35px; }
	#sidebar-box .sidebar-wing-close { border-right:0px; }
}
@media (max-width: 480px) {
	#sidebar-box { left: -320px; border-right:1px solid #ddd; margin-right:40px; }
	#sidebar-box .sidebar-wing { right:0; margin-right:-35px; }
	#sidebar-box .sidebar-wing-close { border-left:0px; }
}

@media (min-width: 768px) {
	#sidebar-box { padding-bottom:0px; }
	#sidebar-box .sidebar-wing { top:20%; }
	#sidebar-box .sidebar-wing-icon { border-right:0px; display:block; }
}
@media (max-width: 767px) {
	#sidebar-box { padding-bottom:0px; }
	#sidebar-box .sidebar-wing { top:35%; }
	#sidebar-box .sidebar-wing-icon { display:none; }
}