:root {
	--sl-background-color: #1e1e21;
	--sl-border-dashed: 1px dashed #333;
	--sl-color-gray: #aaa;
	--sl-color-gray-333: #333;
	--sl-color-gray-666: #666;
	--sl-color-white: #fff;
	--sl-color-red: #ff4500;
	--sl-color-red-hover: #ce3d31;
	--sl-color-blue: #248fd1;
	--sl-color-blue-hover: #2171a3;
	--sl-color-yellow: #ffae00;
	--sl-transition: all 0.2s ease-in-out;
}

.sl-flex-item {
	display: flex;
	align-items: center;
}
.sl-split {
	display: block;
	border-right: 1px solid var(--sl-color-gray-666);
	margin: 0 10px;
	height: 10px;
}

.sl-number {
	font-size: 10px;
	font-family: Arial, Helvetica, sans-serif;
	color: var(--sl-color-gray);
}

.sl-type-icon {
	width: 24px;
	height: 24px;
}

.sl-type-icon-20 {
	width: 20px;
	height: 20px;
}

.sl-type-icon.comment {
	width: 18px;
	height: 18px;
}

.sl-user-info {
	display: flex;
	align-items: center;
	color: var(--sl-color-gray);
	transition: var(--sl-transition);
	letter-spacing: -1px;
}

.sl-user-info:hover {
	color: var(--sl-color-white);
}

.sl-user-info .sl-profile {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	margin-right: 3px;
}

.sl-user-info .sl-level-icon {
	width: 20px;
	height: 20px;
	margin-right: 3px;
}

.sl-new {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 13px;
	height: 13px;
	font-size: 10px;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	border-radius: 3px;
	background-color: var(--sl-color-red);
	color: var(--sl-color-white);
	font-style: normal;
	padding: 0 2px;
}

.sl-category {
	font-style: normal;
	display: block;
	padding: 3px 8px;
	color: var(--sl-color-white);
	font-size: 12px;
	border-radius: 3px;
	margin-right: 5px;
}

.sl-category.sl-notice {
	background-color: var(--sl-color-red);
}

/* sl-list */

.sl-list {
	background-color: var(--sl-background-color);
	padding: 0 15px;
}

.sl-list .sl-total {
	display: flex;
	align-items: center;
	height: 50px;
	padding: 0 10px;
	border-bottom: var(--sl-border-dashed);
	color: var(--sl-color-gray);
}

.sl-list .sl-list-type {
	display: flex;
	flex-direction: column;
	padding: 0;
	margin: 0;
	list-style-type: none;
}

.sl-list .sl-list-type li {
	display: flex;
	align-items: center;
	border-bottom: var(--sl-border-dashed);
	transition: var(--sl-transition);
}

.sl-list .sl-list-type li:hover,
.sl-list .sl-list-type li.active {
	background-color: rgb(0 0 0 / 30%);
}

.sl-list .sl-list-type li > span,
.sl-list .sl-list-type li > a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 45px;
	width: 60px;
}

.sl-list .sl-list-type li > .subject .sl-type-icon.type {
	margin-right: 5px;
}

.sl-list .sl-list-type li > .subject {
	display: flex;
	flex: 1;
	justify-content: flex-start;
}

.sl-list .sl-list-type li > .subject em {
	display: flex;
	font-style: normal;
}

.sl-list .sl-list-type li > .subject em.em-title {
	display: block;
	padding: 0;
	margin: 0;
	min-width: 0;
	max-width: 300px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 14px;
	transition: var(--sl-transition);
}

.sl-list .sl-list-type li > .subject em.em-title.post {
	max-width: 210px;
}

.sl-list .sl-list-type li > .subject em.em-title.bcomment {
	max-width: 250px;
}

.sl-list .sl-list-type li > .subject em.em-title.bcomment.bpost {
	padding-top: 2px;
	font-size: 12px;
	color: var(--sl-color-gray);
}

.sl-list .sl-list-type li > .subject.sl-gray em.em-title {
	color: var(--sl-color-gray-666);
}

.sl-list .sl-list-type li > .subject em.em-commemt {
	color: var(--sl-color-yellow);
	font-size: 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
}

.sl-list .sl-list-type li > .subject .sl-type-icon.comment {
	margin-left: 5px;
}

.sl-list .sl-list-type li > .subject .sl-new {
	margin-left: 5px;
}

.sl-list .sl-list-type li > .bbsname {
	width: 120px;
}

.sl-list .sl-list-type li .user {
	width: 140px;
	justify-content: flex-start;
}

.sl-list .sl-list-type li .sl-date {
	display: flex;
	width: 120px;
	justify-content: center;
}

.sl-list .sl-list-type li > .sl-null {
	flex: 1;
	justify-content: center;
	color: var(--sl-color-gray);
}

@media screen and (max-width: 600px) {
	.sl-user-info .sl-profile {
		width: 20px;
		height: 20px;
		margin-right: 5px;
		margin-left: 3px;
	}

	.sl-user-info .sl-level-icon {
		width: 18px;
		height: 18px;
		margin-right: 5px;
	}

	.sl-list {
		margin: 0;
		padding: 0;
	}

	.sl-list .sl-total {
		display: flex;
		align-items: center;
		height: 60px;
		padding: 0 15px;
		border-bottom: 2px solid #18181b;
		color: var(--sl-color-gray);
		font-size: 16px;
	}

	.sl-list .sl-list-type li {
		border-bottom: none;
		transition: var(--sl-transition);
		padding: 10px 15px;
		background-color: #24242b;
		border-top: 2px solid #18181b;
		display: block;
	}

	.sl-list .sl-list-type li:first-child {
		border-top: none;
	}

	.sl-list .sl-list-type li > span,
	.sl-list .sl-list-type li > a {
		height: auto;
	}

	.sl-list .sl-list-type li > .counter {
		display: none;
	}

	.sl-list .sl-list-type li > .subject {
		display: flex;
		justify-content: flex-start;
		width: 100%;
		padding-bottom: 5px;
	}

	.sl-list .sl-list-type li > .subject em {
		display: flex;
		font-style: normal;
	}

	.sl-list .sl-list-type li > .subject em.em-title {
		display: block;
		padding: 0;
		margin: 0;
		min-width: 0;
		max-width: 280px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 16px;
		transition: var(--sl-transition);
	}

	.sl-list .sl-list-type li > .bbsname {
		width: 120px;
	}

	.sl-list .sl-list-type li .user {
		display: inline-flex;
		align-items: center;
		justify-content: unset;
		width: auto;
	}

	.sl-list .sl-list-type li .sl-date {
		display: inline-flex;
		align-items: center;
		justify-content: unset;
		width: auto;
		margin-left: 10px;
		padding-left: 10px;
		border-left: 1px solid var(--sl-color-gray-666);
	}

	.sl-list .sl-list-type.sl-notice li {
		border-bottom: 2px solid #18181b;
	}

	.sl-list .sl-list-type.sl-notice li .sl-date {
		border-left: none;
		margin-left: 0;
		padding-left: 0;
		height: 20px;
	}

	.sl-list .sl-list-type li > .sl-null {
		flex: 1;
		justify-content: center;
		color: var(--sl-color-gray);
	}
}
/* sl-search-box */

.sl-search-box {
	margin-top: 10px;
	background-color: var(--sl-background-color);
	padding: 15px;
	display: flex;
	align-items: center;
}

.sl-search-box form {
	margin-right: auto;
	display: flex;
	align-items: center;
}

.sl-search-box form select,
.sl-search-box form input {
	height: 40px;
	background-color: rgb(0 0 0 / 40%);
	border: 1px solid rgb(0 0 0 / 40%);
	color: var(--sl-color-white);
	padding: 0 15px;
	border-radius: 3px;
}

.sl-search-box form select,
.sl-search-box form input {
	margin-right: 5px;
}

.sl-search-box form input[type='submit'] {
	cursor: pointer;
}

.sl-search-box .sl-btn-write {
	display: flex;
	align-items: center;
	height: 40px;
	background-color: var(--sl-color-red);
	border: 1px solid rgb(0 0 0 / 40%);
	color: var(--sl-color-white);
	padding: 0 20px;
	border-radius: 3px;
	font-size: 14px;
	transition: var(--sl-transition);
}

.sl-search-box .sl-btn-write:hover {
	background-color: var(--sl-color-red-hover);
}

/* pagination */

.pagination {
	display: flex;
	background-color: var(--sl-background-color);
	padding: 15px;
	height: 80px;
	margin: 0;
	list-style-type: none;
	align-items: center;
	justify-content: center;
}

.pagination a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	font-size: 12px;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	background-color: rgb(0 0 0 / 40%);
	border: 1px solid rgb(0 0 0 / 40%);
	margin: 0 3px;
	color: var(--sl-color-gray);
	border-radius: 3px;
	transition: var(--sl-transition);
}
.pagination a:hover {
	color: var(--sl-color-red);
	border: 1px solid var(--sl-color-red);
}

.pagination a.active {
	background-color: var(--sl-color-red);
	border: 1px solid var(--sl-color-red);
	color: var(--sl-color-white);
}

@media screen and (max-width: 600px) {
	.sl-search-box {
		margin: 2px 0;
		background-color: transparent !important;
		padding: 0;
		flex-direction: column;
	}

	.sl-search-box form {
		display: flex;
		align-items: center;
		width: 100%;
	}

	.sl-search-box form select,
	.sl-search-box form input {
		height: 55px;
		background-color: #24242b;
		border: none;
		color: var(--sl-color-white);
		padding: 0 5px;
		border-radius: 0;
	}

	.sl-search-box form select {
		width: 70px;
	}

	.sl-search-box form input[type='text'] {
		flex: 1;
		border-left: 1px solid #18181b;
		border-right: 1px solid #18181b;
		background-color: #24242b;
	}

	.sl-search-box form select,
	.sl-search-box form input {
		margin-right: 0;
	}

	.sl-search-box form input[type='submit'] {
		cursor: pointer;
		width: 70px;
	}

	.sl-search-box .sl-btn-write {
		display: flex;
		align-items: center;
		height: 40px;
		background-color: var(--sl-color-red);
		border: 1px solid rgb(0 0 0 / 40%);
		color: var(--sl-color-white);
		padding: 0 20px;
		border-radius: 3px;
		font-size: 14px;
		transition: var(--sl-transition);

		font-size: 16px;
		width: 100%;
		margin: 0 10px;
		border-radius: 0;
		height: 55px;
		margin-top: 2px;
		border: none;
		justify-content: center;
	}

	.sl-search-box .sl-btn-write:hover {
		background-color: var(--sl-color-red-hover);
	}

	.pagination {
		height: auto;
		margin: 2px 0 0 0;
	}

	.pagination a {
		width: 35px;
		height: 35px;
		margin: 0 1px;
	}
}

/* sl-write */

.sl-write {
	background-color: var(--sl-background-color);
	padding: 0 15px;
}

.sl-write input[type='url'],
.sl-write input[type='text'],
.sl-write input[type='number'] {
	height: 49px;
	color: var(--sl-color-white);
	font-size: 14px;
	background-color: transparent !important;
	border: none;
	width: 100%;
	padding: 0 15px;
}

.sl-write input[type='file'] {
	color: var(--sl-color-gray);
	width: 100%;
	cursor: pointer;
}

.sl-write input[type='file']:hover {
	color: var(--sl-color-white);
}

.sl-write .sl-write-subject,
.sl-write .sl-write-youtube,
.sl-write .sl-write-link,
.sl-write .sl-write-point {
	display: flex;
	align-items: center;
	border-top: var(--sl-border-dashed);
}

.sl-write .sl-write-subject {
	border: none;
}

.sl-write .sl-write-subject .sl-input-subject {
	flex: 1;
}

.sl-write .sl-write-subject input[type='text'] {
	padding-right: 15px;
}

.sl-write .sl-write-subject label {
	display: flex;
	align-items: center;
	height: 49px;
	color: var(--sl-color-gray);
	margin-right: 15px;
}

.sl-write .sl-write-subject label input {
	margin-right: 3px;
}

.sl-write .sl-write-point select {
	height: 49px;
	color: var(--sl-color-gray);
	background-color: transparent !important;
	border: none;
	width: 100%;
	padding: 0 10px;
}

.sl-write .sl-write-point span {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 0 15px;
	height: 49px;
	color: var(--sl-color-gray);
	border-left: var(--sl-border-dashed);
}

.sl-write .sl-write-files {
	display: flex;
	align-items: center;
	height: 49px;
	padding: 0 15px;
}

.sl-write .sl-write-files label {
	width: 100%;
	border-left: var(--sl-border-dashed);
	display: flex;
	align-items: center;
	height: 49px;
	padding: 0 15px;
}

.sl-write .sl-write-files label input {
	margin-left: 15px;
	margin-right: 5px;
}

.sl-editor {
	margin-top: 10px;
}

.sl-write-button {
	margin-top: 10px;
	background-color: var(--sl-background-color);
	padding: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sl-write-button input,
.sl-write-button a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	width: 120px;
	background-color: rgb(0 0 0 / 40%);
	border: 1px solid rgb(0 0 0 / 40%);
	color: var(--sl-color-white);
	padding: 0 15px;
	border-radius: 3px;
	cursor: pointer;
}

.sl-write-button input {
	margin-right: 10px;
	background-color: var(--sl-color-red);
	transition: var(--sl-transition);
}

.sl-write-button input:hover {
	background-color: var(--sl-color-red-hover);
}

@media screen and (max-width: 600px) {
	.sl-write {
		margin: 0 10px;
		padding: 0;
	}
	.sl-editor {
		margin: 10px 10px 0 10px;
	}

	.sl-write-button {
		margin: 10px 10px 0 10px;
	}

	.sl-write .sl-write-subject,
	.sl-write .sl-write-youtube,
	.sl-write .sl-write-link,
	.sl-write .sl-write-point,
	.sl-write .sl-write-files {
		border-top: 2px solid #18181b;
	}

	.sl-write .sl-write-files label {
		border-left: 2px solid #18181b;
	}
}
/* sl-view */

.sl-view {
	background-color: var(--sl-background-color);
	padding: 0 15px;
	margin-bottom: 10px;
}

.sl-view .sl-view-title {
	display: flex;
	align-items: center;
	padding: 0;
	margin: 0;
	height: 50px;
	border-bottom: var(--sl-border-dashed);
}

.sl-view .sl-view-title .sl-type-icon {
	margin-right: 5px;
}

.sl-view .sl-view-title .sl-title {
	display: block;
	padding: 0;
	margin: 0;
	min-width: 0;
	max-width: 500px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 14px;
}

.sl-view .sl-view-title .sl-new {
	margin-left: 5px;
}

.sl-view .sl-view-title .sl-number {
	display: flex;
	margin-left: auto;
	font-weight: normal;
	align-items: center;
	justify-content: flex-end;
	font-size: 12px;
}

.sl-view .sl-view-point {
	display: flex;
	align-items: center;
	padding: 15px 0;
	border-bottom: var(--sl-border-dashed);
}

.sl-view .sl-point-status {
	display: flex;
	align-items: center;
}

.sl-view .sl-view-point .sl-status-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 28px;
	background-color: rgb(0 0 0 / 40%);
	color: var(--sl-color-white);
	border-radius: 3px 0 0 3px;
}

.sl-view .sl-view-point .sl-status-done {
	background-color: var(--sl-color-red);
}

.sl-view .sl-view-point .sl-status-cancel {
	background-color: var(--sl-color-blue);
}

.sl-view .sl-view-point .sl-point-admin {
	margin-left: auto;
}

.sl-view .sl-view-point .sl-point-box {
	display: flex;
	align-items: center;
	height: 28px;
	background-color: var(--sl-color-gray-333);
	padding: 0 10px;
	border-radius: 0 3px 3px 0;
}

.sl-view .sl-view-point select,
.sl-view .sl-view-point input {
	height: 28px;
	background-color: rgb(0 0 0 / 40%);
	border: 1px solid rgb(0 0 0 / 40%);
	color: var(--sl-color-white);
	padding: 0 15px;
	border-radius: 3px;
}

.sl-view .sl-view-point form input[type='submit'] {
	cursor: pointer;
	background-color: var(--sl-color-red);
	border: 1px solid rgb(0 0 0 / 40%);
	color: var(--sl-color-white);
	border-radius: 3px;
	transition: var(--sl-transition);
}

.sl-view .sl-view-point form input[type='submit']:hover {
	background-color: var(--sl-color-red-hover);
}

.sl-view .sl-view-report {
	padding: 10px 0;
	margin: 0;
}

.sl-view .sl-view-report .report-header {
	display: flex;
	align-items: center;
	padding: 0;
	margin: 0;
}

.sl-view .sl-view-report .report-header a {
	display: flex;
	align-items: center;
	font-size: 12px;
	color: var(--sl-color-gray);
	transition: var(--sl-transition);
}

.sl-view .sl-view-report .report-header a:hover {
	color: var(--sl-color-red);
}

.sl-view .sl-view-report .report-header a .sl-type-icon-20 {
	margin-right: 3px;
}

.sl-view .sl-view-report .report-header a.js-report-btn {
	margin-left: auto;
}

.sl-view .sl-view-report .report-header a.js-report-btn img {
	position: relative;
	top: -1px;
	margin-right: 2px;
}

.sl-view .sl-view-report .report-header a.js-report-btn strong {
	margin-left: 3px;
}

.sl-view .js-report-box {
	margin-top: 15px;
	border-top: var(--sl-border-dashed);
	padding: 0 20px;
}

.sl-view .js-report-box .label-box {
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.sl-view .js-report-box .label-box label {
	height: 40px;
	display: flex;
	align-items: center;
	margin-left: 5px;
	color: #eee;
	transition: all 0.2s ease-in-out;
}

.sl-view .js-report-box .label-box label:hover {
	color: var(--sl-color-red);
}

.sl-view .js-report-box .label-box label input {
	width: 14px;
	height: 14px;
	position: relative;
	top: -1px;
	margin-right: 3px;
}

.sl-view .js-report-box .report-content {
	display: flex;
	align-items: center;
}

.sl-view .js-report-box .report-content textarea,
.sl-view .js-report-box .report-content input {
	height: 40px;
}

.sl-view .js-report-box .report-content textarea {
	flex: 1;
	background-color: rgb(0 0 0 / 40%);
	border: 1px solid rgb(0 0 0 / 40%);
	padding: 10px;
	color: var(--sl-color-white);
	resize: none;
	border-radius: 3px 0 0 3px;
}

.sl-view .js-report-box .report-content input {
	width: 80px;
	background-color: var(--sl-color-red);
	border: 1px solid var(--sl-color-red);
	color: var(--sl-color-white);
	transition: all 0.2s ease-in-out;
	cursor: pointer;
	border-radius: 0 3px 3px 0;
}

.sl-view .js-report-box .report-content input:hover {
	background-color: var(--sl-color-red-hover);
}

.sl-view-content {
	background-color: var(--sl-background-color);
	padding: 20px 20px 20px 20px;
	margin: 0;
	line-height: 1.5;
	text-align: justify;
}

.sl-view-content .youtube {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	margin-bottom: 20px;
}

.sl-view-content .youtube iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.sl-view-content figure {
	padding: 0;
	margin: 0;
}

.sl-view-content img {
	max-width: 100%;
}

.sl-view-content figure.image {
	cursor: pointer;
}

.sl-view-content a {
	color: #98ee80;
}

.sl-view-content a:hover {
	color: #ff4c4c;
}

.sl-view-good {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px 0 40px 0;
	background-color: var(--sl-background-color);
	margin-bottom: 10px;
}

.sl-view-good a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100px;
	height: 50px;
	background-color: var(--sl-color-red);
	border: 1px solid rgb(0 0 0 / 40%);
	color: var(--sl-color-white);
	border-radius: 5px;
	transition: var(--sl-transition);
	font-size: 16px;
}

.sl-view-good a.nogood {
	background-color: var(--sl-color-blue);
	margin-left: 10px;
}

.sl-view-good a strong {
	margin-left: 5px;
}

.sl-view-admin-menu {
	display: flex;
	align-items: center;
	padding: 20px;
	background-color: var(--sl-background-color);
	margin-bottom: 10px;
}

.sl-view-admin-menu .bbs-move {
	margin-right: auto;
}

.sl-view-admin-menu .bbs-blind {
	display: flex;
	align-items: center;
}

.sl-view-admin-menu .bbs-blind span {
	margin-right: 10px;
}

.sl-view-admin-menu select,
.sl-view-admin-menu input {
	height: 28px;
	background-color: rgb(0 0 0 / 40%);
	border: 1px solid rgb(0 0 0 / 40%);
	color: var(--sl-color-white);
	padding: 0 15px;
	border-radius: 3px;
}

.sl-view-admin-menu a,
.sl-view-admin-menu form input[type='submit'] {
	cursor: pointer;
	background-color: rgb(0 0 0 / 40%);
	border: 1px solid rgb(0 0 0 / 40%);
	color: var(--sl-color-white);
	border-radius: 3px;
	transition: var(--sl-transition);
}

.sl-view-admin-menu a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100px;
	height: 28px;
}

.sl-view-admin-menu a:hover,
.sl-view-admin-menu form input[type='submit']:hover {
	background-color: var(--sl-color-red-hover);
}

.sl-view-user {
	margin-bottom: 10px;
	padding: 0 15px;
	background-color: var(--sl-background-color);
}

.sl-view-user > div {
	display: flex;
	align-items: center;
	padding-top: 15px;
}

.sl-view-user > div .sl-user-info {
	margin-right: 5px;
}

.sl-view-user .sl-view-user-post {
	list-style-type: none;
	padding: 0;
	margin: 0;
	margin-top: 10px;
}

.sl-view-user .sl-view-user-post {
	list-style-type: none;
	padding: 0;
	margin: 0;
	margin-top: 10px;
}

.sl-view-user .sl-view-user-post li {
	border-top: var(--sl-border-dashed);
}

.sl-view-user .sl-view-user-post li a {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	height: 45px;
	padding: 0 10px;
}

.sl-view-user .sl-view-user-post li a em {
	display: flex;
	font-style: normal;
}

.sl-view-user .sl-view-user-post li a .sl-type-icon.type {
	margin-right: 5px;
}

.sl-view-user .sl-view-user-post li a em.em-title {
	display: block;
	min-width: 0;
	max-width: 480px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 14px;
	transition: all 0.2s ease-in-out;
}

.sl-view-user .sl-view-user-post li a em.em-commemt {
	color: var(--sl-color-yellow);
	font-size: 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
}

.sl-view-user .sl-view-user-post li a .sl-type-icon.comment {
	margin-left: 5px;
}

.sl-view-user .sl-view-user-post li a .sl-new {
	margin-left: 5px;
}

.sl-view-user .sl-view-user-post li a .sl-number {
	margin-left: auto;
}

.sl-view-button {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 10px;
	padding: 15px;
	background-color: var(--sl-background-color);
}

.sl-view-button a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 20px;
	background-color: rgb(0 0 0 / 40%);
	border: 1px solid rgb(0 0 0 / 40%);
	color: var(--sl-color-white);
	margin: 0 2px;
	border-radius: 3px;
	transition: var(--sl-transition);
	font-size: 15px;
}

.sl-view-button a:hover {
	background-color: var(--sl-color-red-hover);
}

@media screen and (max-width: 600px) {
	.sl-view {
		padding: 0;
		margin: 0;
	}

	.sl-view .sl-view-title .sl-type-icon {
		display: inline;
		width: 20px;
		height: 20px;
		margin-right: 0;
		vertical-align: middle;
		margin-left: -2px;
	}

	.sl-view .sl-view-title {
		flex-direction: column;
		justify-content: flex-start;
		height: auto;
		padding: 15px;
		border-bottom: 2px solid #18181b;
	}
	.sl-view .sl-view-title .sl-flex-item {
		display: block;
		width: 100%;
	}

	.sl-view .sl-view-title .sl-title {
		display: inline;
		min-width: unset;
		max-width: unset;
		white-space: normal;
		word-break: keep-all;
		overflow: unset;
		text-overflow: unset;
		font-size: 15px;
		font-weight: normal;
	}

	.sl-view .sl-view-title .sl-new {
		display: inline;
		vertical-align: middle;
		padding: 1px 3px;
		margin-left: 5px;
	}

	.sl-view .sl-view-title .sl-number {
		padding-top: 5px;
		margin: 0;
		width: 100%;
		justify-content: flex-start;
		font-size: 12px;
	}

	.sl-view .sl-view-report {
		padding: 0;
		margin: 0;
		border-bottom: 2px solid #18181b;
	}

	.sl-view .sl-view-report .report-header {
		padding: 15px 10px;
	}

	.sl-view .js-report-box {
		margin-top: 0;
		border-top: 2px solid #18181b;
		padding: 5px 10px 15px 10px;
	}

	.sl-view .js-report-box .label-box {
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.sl-view .js-report-box .report-content textarea,
	.sl-view .js-report-box .report-content input {
		height: 80px;
	}

	.sl-view-content {
		background-color: var(--sl-background-color);
		padding: 20px 10px 20px 10px;
		margin: 0;
		line-height: 1.5;
		text-align: justify;
	}

	.sl-view-good {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20px 0 40px 0;
		background-color: var(--sl-background-color);
		margin: 0;
	}

	.sl-view-admin-menu {
		display: flex;
		align-items: center;
		flex-direction: column;
		padding: 20px 0;
		background-color: var(--sl-background-color);
		margin: 0;
		border-top: 2px solid #18181b;
	}

	.sl-view-admin-menu .bbs-move {
		margin: 0;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.sl-view-admin-menu .bbs-move form {
		display: flex;
		align-items: center;
		flex-direction: column;
		width: 80%;
	}

	.sl-view-admin-menu .bbs-blind {
		width: 80%;
	}

	.sl-view-admin-menu .bbs-blind span {
		margin-right: 10px;
	}

	.sl-view-admin-menu select,
	.sl-view-admin-menu input {
		height: 45px;
		margin-bottom: 10px;
		width: 100%;
	}

	.sl-view-admin-menu a,
	.sl-view-admin-menu form input[type='submit'] {
		cursor: pointer;
		background-color: rgb(0 0 0 / 40%);
		border: 1px solid rgb(0 0 0 / 40%);
		color: var(--sl-color-white);
		border-radius: 3px;
		transition: var(--sl-transition);
	}

	.sl-view-admin-menu a {
		display: flex;
		width: 100%;
		height: 45px;
	}

	.sl-view-admin-menu a:hover,
	.sl-view-admin-menu form input[type='submit']:hover {
		background-color: var(--sl-color-red-hover);
	}

	.sl-view-user {
		margin: 10px 0 0 0;
		padding: 0;
		background-color: var(--sl-background-color);
	}

	.sl-view-user > div {
		display: flex;
		align-items: center;
		padding: 15px 10px;
	}

	.sl-view-user > div .sl-user-info {
		margin-right: 5px;
	}

	.sl-view-user .sl-view-user-post {
		list-style-type: none;
		padding: 0;
		margin: 0;
		margin-top: 10px;
	}

	.sl-view-user .sl-view-user-post {
		list-style-type: none;
		padding: 0;
		margin: 0;
	}

	.sl-view-user .sl-view-user-post li {
		border-top: 2px solid #18181b;
	}

	.sl-view-button {
		margin: 10px 0 10px 0;
	}
}

.sl-comment-write {
	margin-bottom: 10px;
	padding: 15px;
	background-color: var(--sl-background-color);
}

.sl-comment-write .sl-comment-write-box {
	display: flex;
	align-items: center;
}

.sl-comment-write .sl-comment-write-box textarea {
	flex: 1;
	background-color: rgb(0 0 0 / 40%);
	border: 1px solid rgb(0 0 0 / 40%);
	padding: 10px;
	color: var(--sl-color-white);
	resize: none;
	border-radius: 3px 0 0 3px;
	height: 80px;
}

.sl-comment-write .sl-comment-write-box input {
	width: 80px;
	background-color: var(--sl-color-red);
	border: 1px solid rgb(0 0 0 / 40%);
	color: var(--sl-color-white);
	cursor: pointer;
	border-radius: 0 3px 3px 0;
	height: 80px;
	transition: var(--sl-transition);
}

.sl-comment-write .sl-comment-write-box input:hover {
	background-color: var(--sl-color-red-hover);
}

.sl-comment-list-sort {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
	padding: 15px;
	background-color: var(--sl-background-color);
}

.sl-comment-list-sort .total-box {
	display: flex;
	align-items: center;
}

.sl-comment-list-sort .total-box em {
	margin-right: 5px;
	color: var(--sl-color-gray);
	font-style: normal;
}

.sl-comment-list-sort .sort-button {
	margin-left: auto;
	display: flex;
	align-items: center;
}
.sl-comment-list-sort .sort-button {
	color: var(--sl-color-gray);
}

.sl-comment-list-sort .sort-button input {
	position: relative;
	top: -1px;
	margin-left: 10px;
	margin-right: 3px;
}

.sl-comment-list-sort .sort-button input[type='radio']:checked + label {
	color: var(--sl-color-white);
}

.sl-comment-list-sort .sort-button label,
.sl-comment-list-sort .sort-button input[type='radio'] {
	cursor: pointer;
}

.sl-comment-item {
	margin-bottom: 10px;
	background-color: var(--sl-background-color);
}

.sl-comment-user-box {
	display: flex;
	align-items: center;
	padding: 0 15px;
	height: 60px;
	border-bottom: var(--sl-border-dashed);
}

.sl-comment-user-box .right-btn {
	margin-left: auto;
}

.sl-comment-user-box em {
	font-style: normal;
}

.sl-comment-user-box em.sl-number {
	font-size: 12px;
}

.sl-comment-user-box em.sl-new {
	margin-left: 5px;
}

.sl-comment-user-box a {
	color: var(--sl-color-gray);
	letter-spacing: -1px;
}

.sl-comment-user-box a span {
	margin-left: 5px;
}

.sl-comment-user-box a:hover {
	color: var(--sl-color-white);
}

.sl-comment-content-box {
	padding: 15px;
}

.sl-comment-content-box .comment-content {
	line-height: 1.5;
	text-align: justify;
	font-size: 14px;
	padding: 15px;
}

.sl-comment-content-box .comment-button-box {
	display: flex;
	align-items: center;
	color: var(--sl-color-gray);
	letter-spacing: -1px;
	padding: 0 15px;
	font-size: 12px;
}

.sl-comment-content-box .comment-button-box .count {
	margin-left: 5px;
}

.sl-comment-content-box .comment-button-box a {
	color: var(--sl-color-gray);
}

.sl-comment-content-box .comment-button-box a:hover {
	color: var(--sl-color-red);
}

.sl-comment-content-box .cbox {
	display: flex;
	align-items: center;
	width: 100%;
}

.sl-comment-content-box .cbox textarea {
	flex: 1;
	background-color: rgb(0 0 0 / 40%);
	border: 1px solid rgb(0 0 0 / 40%);
	padding: 10px;
	color: var(--sl-color-white);
	resize: none;
	border-radius: 3px 0 0 3px;
	height: 80px;
}

.sl-comment-content-box .cbox > div {
	width: 80px;
	display: flex;
	flex-direction: column;
}

.sl-comment-content-box .cbox > div input,
.sl-comment-content-box .cbox > div a {
	width: 80px;
	background-color: var(--sl-color-red);
	border: none;
	color: var(--sl-color-white);
	transition: var(--sl-transition);
	cursor: pointer;
	border-radius: 0 3px 0 0;
	height: 40px;
}

.sl-comment-content-box .cbox > div input:hover {
	background-color: var(--sl-color-red-hover);
}

.sl-comment-content-box .cbox > div a {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--sl-color-blue);
	border-radius: 0 0 3px 0;
}

.sl-comment-content-box .cbox > div a:hover {
	background-color: var(--sl-color-blue-hover);
}

.sl-comment-reply-box {
	display: flex;
	align-items: center;
	padding: 0 30px 15px 30px;
}

.sl-comment-reply-box form {
	display: block;
	width: 100%;
}

.sl-comment-reply-box form div.cwrite-box {
	display: flex;
	align-items: center;
	width: 100%;
}

.sl-comment-reply-box textarea {
	flex: 1;
	background-color: rgb(0 0 0 / 40%);
	border: 1px solid rgb(0 0 0 / 40%);
	padding: 10px;
	color: var(--sl-color-white);
	resize: none;
	border-radius: 3px 0 0 3px;
	height: 60px;
}

.sl-comment-reply-box input[type='submit'] {
	width: 80px;
	background-color: var(--sl-color-red);
	border: 1px solid rgb(0 0 0 / 40%);
	color: var(--sl-color-white);
	cursor: pointer;
	border-radius: 0 3px 3px 0;
	height: 60px;
	transition: var(--sl-transition);
}

.sl-comment-reply-box input[type='submit']:hover {
	background-color: var(--sl-color-red-hover);
}

.sl-reply-content-box {
	padding: 20px 30px;
}

.sl-reply-content-box .sl-reply-item {
	background-color: rgb(0 0 0 / 20%);
	margin-bottom: 10px;
	border-radius: 10px;
}

.sl-reply-content-box .reply-content {
	padding: 25px 15px;
}

.comment-hidden-box {
	margin-top: 5px;
}

.comment-hidden-box label {
	display: flex;
	align-items: center;
	cursor: pointer;
}

.comment-hidden-box label input {
	margin-right: 8px;
}

.comment-hidden-box label:hover {
	color: var(--sl-color-red);
}

.comment-icon-hidden {
	width: 24px;
	vertical-align: middle;
}

.sl-comment-more {
	margin-bottom: 10px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgb(0 0 0 / 40%);
	border: 1px solid rgb(0 0 0 / 40%);
	padding: 10px;
	color: var(--sl-color-white);
	height: 50px;
	transition: var(--sl-transition);
	cursor: pointer;
}

.sl-comment-more:hover {
	background-color: var(--sl-color-red);
}

#sure h1 {
	display: flex;
	align-items: center;
	height: 50px;
	margin: 0;
	padding: 0 20px;
	border-bottom: 1px dashed #333;
	background-color: #1e1e21;
	font-size: 16px;
	font-weight: 300;
}

#sure h1 ion-icon {
	font-size: 20px;
	margin-right: 5px;
}

#sure h1 .stitle {
	margin-right: 5px;
}

#sure .sure-info {
	width: 100%;
	padding: 20px 15px;
	margin: 0 !important;
	background-color: #1e1e21;
	color: #aaa;
	line-height: 1.6;
	font-size: 14px;
}

#sure .sure-step {
	padding: 20px 15px;
	margin: 10px 0 0 0;
	background-color: #1e1e21;
}

#sure h2 {
	padding: 0;
	margin: 0 0 20px 0;
	font-weight: normal;
	font-size: 18px;
}

#sure p {
	margin: 10px 0 0 0;
	color: #aaa;
	line-height: 1.6;
	font-size: 14px;
}
#sure ul {
	margin: 10px 0 0 20px;
	padding: 0;
	list-style-type: disc;
	color: #aaa;
}
#sure li {
	line-height: 1.6;
	font-size: 14px;
}

#level h1 {
	display: flex;
	align-items: center;
	height: 50px;
	margin: 0;
	padding: 0 20px;
	border-bottom: 1px dashed #333;
	background-color: #1e1e21;
	font-size: 16px;
	font-weight: 300;
}

#level h1 ion-icon {
	font-size: 20px;
	margin-right: 5px;
}

#level h1 .stitle {
	margin-right: 5px;
}

#level .level-info {
	width: 100%;
	padding: 20px 15px;
	margin: 0 !important;
	background-color: #1e1e21;
	color: #aaa;
}

#level > div.flex {
	margin-top: 10px;
	width: 100%;
}

#level > div.flex .level-level,
#level > div.flex .level-exp {
	width: 50%;
}

#level > div.flex .level-level {
	margin-right: 5px;
	padding: 15px;
	background-color: #1e1e21;
}

#level > div.flex .level-exp {
	margin-left: 5px;
}

#level > div.flex .level-exp > div {
	padding: 15px;
	background-color: #1e1e21;
	margin-top: 10px;
}

#level > div.flex .level-exp > div:first-child {
	margin-top: 0;
}

#level > div table {
	width: 100%;
	border: none;
	border-collapse: collapse;
}

#level > div table caption div {
	display: flex;
	align-items: center;
	color: #aaa;
	font-size: 14px;
	padding-bottom: 10px;
}

#level > div table caption div ion-icon {
	font-size: 20px;
	margin-right: 3px;
}

#level > div table thead th {
	height: 40px;
	text-align: left;
	padding: 0 10px;
	font-weight: normal;
	color: #aaa;
	background-color: rgb(0 0 0 / 40%);
}

#level > div table tbody td {
	height: 40px;
	text-align: left;
	padding: 0 10px;
	color: #eee;
}

#level > div table tbody tr:nth-child(even) {
	background-color: rgb(0 0 0 / 20%);
}

#level > div table .none {
	text-align: center;
}

@media screen and (max-width: 600px) {
	#level > div.flex {
		margin-top: 10px;
		width: 100%;
		display: block !important;
	}

	#level > div.flex .level-level,
	#level > div.flex .level-exp {
		width: 100%;
	}

	#level > div.flex .level-level {
		margin-right: 0;
		padding: 15px;
		margin-bottom: 10px;
	}

	#level > div.flex .level-exp {
		margin-left: 0;
	}
}

#guilt h1 {
	display: flex;
	align-items: center;
	height: 50px;
	margin: 0;
	padding: 0 20px;
	border-bottom: 1px dashed #333;
	background-color: #1e1e21;
	font-size: 16px;
	font-weight: 300;
}

#guilt h1 ion-icon {
	font-size: 20px;
	margin-right: 5px;
}

#guilt h1 .stitle {
	margin-right: 5px;
}

#guilt .sl-search-box {
	width: 100%;
	padding: 20px 15px;
	margin: 0 !important;
	background-color: #1e1e21;
}

#guilt .sl-search-box a.reset {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	background-color: #333;
	border: 1px solid rgb(0 0 0 / 40%);
	color: var(--sl-color-white);
	padding: 0 15px;
	border-radius: 3px;
	font-size: 14px;
}

#guilt .sl-search-box form {
	width: 100%;
}

#guilt .sl-search-box .right {
	margin-left: auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

#guilt .sl-search-box label {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	cursor: pointer;
	margin-left: 15px;
	color: #ccc;
}

#guilt .guiltList {
	margin-top: 10px;
	width: 100%;
	background-color: #1e1e21;
}

#guilt .guiltList ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
}

#guilt .guiltList ul li {
	display: flex;
	border-top: var(--sl-border-dashed);
	align-items: center;
}

#guilt .guiltList ul li.null {
	height: 80px;
	align-items: center;
	justify-content: center;
	color: #888;
}

#guilt .guiltList ul li:first-child {
	border-top: none;
}

#guilt .guiltList ul li > div {
	margin: 0;
	padding: 0;
	height: 50px;
	display: flex;
	align-items: center;
}

#guilt .guiltList ul li div.no {
	width: 50px;
	justify-content: center;
	font-size: 12px;
}

#guilt .guiltList ul li div.user {
	width: 165px;
}

#guilt .guiltList ul li div.user span.user {
	color: #fff;
}

#guilt .guiltList ul li div.comment {
	display: flex;
	flex: 1;
	color: #fff;
	font-size: 12px;
}

#guilt .guiltList ul li div.rank img {
	width: 24px;
}

#guilt .guiltList ul li div.etc {
	display: flex;
	justify-content: center;
	flex-direction: column;
	width: 120px;
	color: #fff;
}

#guilt .guiltList ul li div.etc div {
	margin: 3px 0;
}

#guilt .guiltList ul li div.bail {
	display: flex;
	width: 80px;
	justify-content: center;
}

#guilt .pagination {
	margin-top: 10px;
}

#guilt span.aicon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 13px;
	height: 13px;
	color: #333 !important;
	border-radius: 3px;
	font-size: 11px !important;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-weight: bold;
	margin-right: 5px;
}

#guilt span.start {
	background-color: #0077ff;
}

#guilt span.end {
	background-color: #d64e18;
}

@media screen and (max-width: 600px) {
	#guilt h1 {
		padding: 0 10px;
	}
	#guilt .info {
		width: 100vw;
		overflow-x: auto;
		display: block;
		white-space: nowrap;
		padding: 10px 0;
	}

	#guilt .sl-search-box {
		padding: 0;
		background-color: #24242b !important;
	}

	#guilt .sl-search-box form input[type='text'] {
		border-left: none;
	}
	#guilt .sl-search-box form .right {
		display: none;
	}

	#guilt .guiltList ul li div.no {
		width: 40px;
		font-size: 11px !important;
	}

	#guilt .guiltList ul li div.cycle {
		width: 45px;
		font-size: 12px !important;
	}

	#guilt .guiltList ul li div.cycle.end {
		color: #888;
	}

	#guilt .guiltList ul li div.user {
		padding-left: 0;
		width: 155px;
	}

	#guilt .guiltList ul li div.bail,
	#guilt .guiltList ul li div.etc {
		display: none;
	}
}

#lottery h1 {
	display: flex;
	align-items: center;
	height: 50px;
	margin: 0;
	padding: 0 20px;
	border-bottom: 1px dashed #333;
	background-color: #1e1e21;
	font-size: 16px;
	font-weight: 300;
}

#lottery h1 ion-icon {
	font-size: 20px;
	margin-right: 5px;
}

#lottery h1 .stitle,
#lottery h1 .round {
	margin-right: 5px;
}

#lottery h1 .timer {
	font-size: 14px;
}

#lottery h1 .timer span.timett {
	color: #888;
}

#lottery h1 .timer span.js-lottery-timer {
	color: var(--sl-color-red);
	font-weight: bold;
}

#lottery h1 .allRound {
	font-size: 14px;
	margin-left: auto;
}

#lottery .info {
	width: 100%;
	padding: 20px 15px;
	background-color: #1e1e21;
}

#lottery .info table {
	width: 100%;
	border-collapse: collapse;
}

#lottery .info table:nth-child(2) {
	margin-top: -5px;
}

#lottery .info th,
#lottery .info td {
	text-align: center;
	border: 5px solid #1e1e21;
	height: 35px;
	font-size: 12px;
}

#lottery .info th {
	color: rgba(0, 0, 0, 0.5);
}

#lottery .info th > div {
	display: flex;
	align-items: center;
	justify-content: center;
}

#lottery .info td {
	background-color: #292929;
}

#lottery .info th {
	background-color: #cb4d1f;
	color: rgba(0, 0, 0, 0.7);
	font-weight: normal;
}

#lottery .info .caption {
	padding: 10px 5px 0 5px;
	display: flex;
	color: #888;
}

#lottery .lottoPurchase {
	margin-top: 10px;
	background-color: #1e1e21;
	padding: 20px 15px;
	display: flex;
	align-items: center;
	justify-content: center;
}

#lottery .lottoPurchase a {
	display: flex;
	width: 300px;
	height: 50px;
	align-items: center;
	justify-content: center;
	background-color: var(--sl-color-red);
	color: #fff;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 300;
	letter-spacing: -1px;
}

#lottery .lottoList {
	margin-top: 10px;
	width: 100%;
	background-color: #1e1e21;
}

#lottery .lottoList ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
}

#lottery .lottoList ul li {
	display: flex;
	border-top: var(--sl-border-dashed);
	align-items: center;
}

#lottery .lottoList ul li.null {
	height: 80px;
	align-items: center;
	justify-content: center;
	color: #888;
}

#lottery .lottoList ul li:first-child {
	border-top: none;
}

#lottery .lottoList ul li > div {
	margin: 0;
	padding: 0;
	height: 50px;
	display: flex;
	align-items: center;
}

#lottery .lottoList ul li div.no {
	width: 60px;
	justify-content: center;
	font-size: 12px;
}

#lottery .lottoList ul li div.cycle {
	width: 60px;
	justify-content: center;
	font-size: 13px;
}

#lottery .lottoList ul li div.cycle.end {
	color: #888;
}

#lottery .lottoList ul li div.user {
	flex: 1;
	padding-left: 15px;
}

#lottery .lottoList ul li div.user span.user {
	color: #fff;
}

#lottery .lottoList ul li div.rank {
	display: flex;
	align-items: center;
	width: 100px;
	color: #fff;
}

#lottery .lottoList ul li div.rank img {
	width: 24px;
}

#lottery .lottoList ul li div.etc {
	display: flex;
	align-items: center;
	width: 90px;
	color: #fff;
	font-size: 13px !important;
}

#lottery .lottoList ul li div.date {
	display: flex;
	width: 90px;
	justify-content: center;
}

#lottery span.aicon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 13px;
	height: 13px;
	color: #333 !important;
	border-radius: 3px;
	font-size: 11px;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-weight: bold;
	margin-right: 5px;
}

#lottery span.point {
	background-color: #ffcc00;
}

#lottery span.exp {
	background-color: #18d67d;
}

#lottery span.day {
	background-color: #ab55e4;
}

@media screen and (max-width: 600px) {
	#lottery h1 {
		padding: 0 10px;
	}
	#lottery .info {
		width: 100vw;
		overflow-x: auto;
		display: block;
		white-space: nowrap;
		padding: 10px 0;
	}

	#lottery .info table {
		min-width: 600px;
	}

	#lottery .lottoList ul li div.no {
		width: 30px;
		font-size: 11px !important;
	}

	#lottery .lottoList ul li div.cycle {
		width: 45px;
		font-size: 12px !important;
	}

	#lottery .lottoList ul li div.cycle.end {
		color: #888;
	}

	#lottery .lottoList ul li div.user {
		padding-left: 0;
	}

	#lottery .lottoList ul li div.rank {
		width: 50px;
		font-size: 12px !important;
	}

	#lottery .lottoList ul li div.rank img {
		width: 22px;
	}

	#lottery .lottoList ul li div.etc {
		width: 60px;
		font-size: 11px !important;
	}

	#lottery .lottoList ul li div.date {
		width: 50px;
	}
}

#attendance h1 {
	display: flex;
	align-items: center;
	height: 50px;
	margin: 0;
	padding: 0 20px;
	border-bottom: 1px dashed #333;
	background-color: #1e1e21;
	font-size: 16px;
	font-weight: 300;
}

#attendance h1 ion-icon {
	font-size: 20px;
	margin-right: 5px;
}

#attendance h1 .stitle {
	margin-right: auto;
}

#attendance h1 a {
	width: 20px;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	height: 50px;
}

#attendance h1 a ion-icon {
	margin: 0px;
}
#attendance h1 .sdate {
	display: flex;
	align-items: center;
	height: 50px;
	margin: 0 5px;
}

#attendance .calendar {
	width: 100%;
	padding: 20px 15px;
	background-color: #1e1e21;
}
#attendance .calendar h2 {
	margin: 0;
}
#attendance .calendar .nav {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
}
#attendance .calendar table {
	width: 100%;
	border-collapse: collapse;
}
#attendance .calendar th,
#attendance .calendar td {
	width: 14.2%;
	text-align: center;
	border: 5px solid #1e1e21;
}

#attendance .calendar td {
	background-color: #292929;
}

#attendance .calendar th {
	background-color: #1e1e21;
}

#attendance .calendar th > div {
	display: flex;
	height: 30px;
	align-items: center;
	justify-content: left;
	color: #eee;
	border-bottom: 2px solid #ccc;
	font-size: 11px;
	font-weight: 400;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
}

#attendance .calendar th:nth-child(1) > div {
	color: #cb4d1f;
	border-bottom: 2px solid #cb4d1f;
}

#attendance .calendar td > a,
#attendance .calendar td > div {
	display: block;
	width: 100%;
	height: 90px;
	position: relative;
	background-color: #333;
}

#attendance .calendar td > a span.dayi,
#attendance .calendar td > div span.dayi {
	position: absolute;
	top: 8px;
	right: 8px;
	color: #fff;
	font-size: 11px;
	font-weight: bold;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
}

#attendance .calendar td > a span.checki,
#attendance .calendar td > div span.checki {
	position: absolute;
	bottom: 8px;
	left: 8px;
	color: #888;
	font-size: 10px;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
}

#attendance .calendar td > a span.todayi {
	position: absolute;
	bottom: 8px;
	right: 8px;
	color: #eee;
	font-size: 9px;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	display: flex;
	padding: 1px 3px;
	background-color: #cb4d1f;
	border: 1px solid rgba(255, 255, 255, 0.5);
}

#attendance .calendar td > a .check_attendance,
#attendance .calendar td > a .check_attendance_no {
	width: 45px;
	position: absolute;
	top: 15px;
	left: 12px;
	/* transform: translate(-50%, -50%); */
}

#attendance .calendar td > a .check_attendance_no {
	opacity: 0.3;
}

#attendance .calendar td.today > a {
	background-color: #cb4d1f;
}

#attendance .calendar .caption {
	padding: 10px 5px 0 5px;
	display: flex;
	color: #888;
}

#attendance .calendar .caption div {
	display: flex;
	align-items: center;
}

#attendance .calendar .caption div:nth-child(1) {
	margin-right: auto;
}

#attendance .calendar .caption span.tt {
	margin-right: 5px;
}

#attendance .calendar .caption span.split {
	margin: 0 5px;
}

#attendance .calendar .caption strong {
	color: #fff;
}

#attendance .sinfo {
	margin-top: 10px;
	background-color: #1e1e21;
	padding: 20px 15px;
}

#attendance .sinfo h2 {
	display: flex;
	margin: 0 0 20px 0;
	background-color: #1e1e21;
	font-size: 16px;
	font-weight: 300;
}

#attendance .sinfo table {
	width: 100%;
	border-collapse: collapse;
}

#attendance .sinfo table:nth-child(2) {
	margin-top: -5px;
}

#attendance .sinfo th,
#attendance .sinfo td {
	text-align: center;
	border: 5px solid #1e1e21;
	height: 35px;
	font-size: 12px;
}

#attendance .sinfo th {
	color: rgba(0, 0, 0, 0.5);
}

#attendance .sinfo th > div {
	display: flex;
	align-items: center;
	justify-content: center;
}

#attendance .sinfo td {
	background-color: #292929;
}

#attendance .sinfo th {
	background-color: #cb4d1f;
	color: rgba(0, 0, 0, 0.7);
	font-weight: normal;
}

#attendance .sinfo table.att_bonus th {
	background-color: #5fd385;
}

#attendance .sinfo table.att_bonus tr:first-child th {
	background-color: #f6ce40;
}

#attendance .sinfo td ul {
	padding: 10px 0 10px 20px;
	margin: 0;
}

#attendance .sinfo td ul li {
	text-align: left;
	font-size: 12px;
	line-height: 1.5;
}

#attendance .sinfo td .att_bonus span.days,
#attendance .sinfo td ul li span.days {
	margin-right: 5px;
}

#attendance .sinfo table.att_bonus td div {
	display: flex;
	padding-left: 20px;
}

#attendance .attendance_btn {
	margin-top: 10px;
	background-color: #1e1e21;
	padding: 20px 15px;
}

#attendance .attendance_btn form {
	display: flex;
}

#attendance .attendance_btn input {
	height: 50px;
	border: none;
}
#attendance .attendance_btn input[type='text'] {
	flex: 1;
	padding: 0 15px;
	border-radius: 10px 0 0 10px;
	font-weight: normal;
	background-color: #fff;
	color: #333;
}

#attendance .attendance_btn input[type='text']:disabled {
	background-color: #fff;
	color: #666;
	font-weight: normal;
}

#attendance .attendance_btn input[type='submit'] {
	width: 20%;
	background-color: var(--sl-color-red);
	color: #fff;
	border-radius: 0 10px 10px 0;
	font-size: 14px;
	font-weight: 300;
	letter-spacing: -1px;
}

#attendance .attendance_btn input[type='submit']:disabled {
	background-color: #999999;
}

#attendance .attendance_btn .caption {
	padding: 10px 5px 0 5px;
	display: flex;
	color: #888;
}

#attendance .attendance_list {
	margin-top: 10px;
}

#attendance .attendance_list ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
}

#attendance .attendance_list ul li {
	display: flex;
	border-top: var(--sl-border-dashed);
	align-items: center;
}

#attendance .attendance_list ul li.null {
	height: 80px;
	align-items: center;
	justify-content: center;
	color: #888;
}

#attendance .attendance_list ul li:first-child {
	border-top: none;
}

#attendance .attendance_list ul li > div {
	margin: 0;
	padding: 0;
	height: 50px;
	display: flex;
	align-items: center;
}

#attendance .attendance_list ul li div.no {
	width: 40px;
	justify-content: center;
	font-size: 12px;
}

#attendance .attendance_list ul li div.box {
	flex: 1;
}

#attendance .attendance_list ul li div.box > .date {
	display: flex;
	width: 60px;
	justify-content: center;
}

#attendance .attendance_list ul li div.box > .user {
	margin-right: 15px;
	color: #fff;
}

#attendance .attendance_list ul li div.box > .ment {
	flex: 1;
	display: block; /* 블록 요소로 설정 */
	white-space: nowrap; /* 줄바꿈 방지 */
	overflow: hidden; /* 넘치는 부분 숨김 */
	text-overflow: ellipsis; /* 말줄임표 (...) 적용 */
	max-width: 100%; /* 부모 요소의 최대 크기만큼 설정 */
	color: #999;
}

#attendance .attendance_list ul li div.box > .etc {
	margin-left: 5px;
	display: flex;
	align-items: center;
	width: 45px;
	color: #fff;
}

#attendance .attendance_list ul li div.box > .add {
	width: 45px;
}

#attendance span.aicon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 13px;
	height: 13px;
	color: #333 !important;
	border-radius: 3px;
	font-size: 11px;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-weight: bold;
	margin-right: 5px;
}

#attendance span.point {
	background-color: #ffcc00;
}

#attendance span.exp {
	background-color: #18d67d;
}

#attendance span.day {
	background-color: #ab55e4;
}

#attendance .attendance_list ul li div.admin {
	width: 30px;
	justify-content: center;
}

#attendance .attendance_list ul li div.admin a {
	color: #999;
	font-size: 12px;
}

@media screen and (max-width: 600px) {
	#attendance h1 {
		padding: 0 10px;
	}

	#attendance .calendar {
		padding: 10px 0;
	}
	#attendance .calendar td > a,
	#attendance .calendar td > div {
		display: block;
		width: 100%;
		height: 75px;
		position: relative;
		background-color: #333;
	}

	#attendance .calendar td > a span.dayi,
	#attendance .calendar td > div span.dayi {
		position: absolute;
		top: 3px;
		right: 3px;
		color: #fff;
		font-size: 11px;
		font-weight: bold;
		font-family: Verdana, Geneva, Tahoma, sans-serif;
	}

	#attendance .calendar td > a span.checki,
	#attendance .calendar td > div span.checki {
		position: absolute;
		bottom: 3px;
		left: 3px;
		color: #888;
		font-size: 10px;
		font-family: Verdana, Geneva, Tahoma, sans-serif;
	}

	#attendance .calendar td > a .check_attendance,
	#attendance .calendar td > a .check_attendance_no {
		width: 35px;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	#attendance .calendar td > a span.todayi {
		display: none;
	}

	#attendance .calendar .caption {
		flex-direction: column;
	}

	#attendance .calendar .caption div:nth-child(2) {
		margin-top: 7px;
	}

	#attendance .sinfo {
		width: 100vw;
		overflow-x: auto;
		display: block;
		white-space: nowrap;
		padding: 10px 0;
	}

	#attendance .sinfo table {
		min-width: 700px;
	}

	#attendance .attendance_list ul li div.box > .user {
		flex: 1;
	}

	#attendance .attendance_list ul li div.box > .ment,
	#attendance .attendance_list ul li div.admin {
		display: none;
	}
}

@media screen and (max-width: 600px) {
	.sl-comment-write {
		margin: 0 0 10px 0;
		padding: 0;
	}

	.sl-comment-write .sl-comment-write-box input,
	.sl-comment-write .sl-comment-write-box textarea {
		height: 80px;
	}

	.sl-comment-list-sort {
		margin: 0 0 10px 0;
		padding: 15px 10px;
	}

	.sl-comment-item {
		margin: 0 0 10px 0;
	}

	.sl-comment-user-box {
		display: block;
		align-items: center;
		padding: 15px 10px;
		height: auto;
		border-bottom: 2px solid #18181b;
		position: relative;
	}

	.sl-comment-user-box .sl-split {
		display: none;
	}

	.sl-comment-user-box em {
		display: inline-flex;
	}

	.sl-comment-user-box em.sl-number {
		margin-top: 10px;
		font-size: 12px;
	}

	.sl-comment-user-box em.sl-new {
		margin-left: 5px;
	}

	.sl-comment-user-box a {
		position: absolute;
		top: 15px;
		right: 10px;
	}

	.sl-comment-user-box .right-btn {
		right: 65px;
	}

	.sl-comment-content-box {
		padding: 15px 10px;
	}

	.sl-comment-content-box .comment-content {
		padding: 10px 0;
	}

	.sl-comment-content-box .comment-button-box {
		padding: 0;
	}

	.sl-comment-reply-box {
		padding: 0 10px 15px 10px;
	}

	.sl-comment-reply-box input,
	.sl-comment-reply-box textarea {
		height: 70px;
	}

	.sl-reply-content-box {
		padding: 15px 10px;
	}

	.sl-reply-content-box .right-btn {
		right: 10px;
	}
	.sl-reply-content-box .sl-comment-user-box {
		padding: 15px;
	}

	.sl-reply-content-box .reply-content {
		padding: 0px 15px 25px 15px;
		line-height: 1.5;
	}

	.sl-comment-more {
		margin: 0 10px 10px 10px;
	}
}

.image-layer {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.9);
	display: block;
	z-index: 99999;
	padding: 0;
	justify-content: center;
	align-items: center;
}

.layer-content {
	position: relative;
	display: flex;
	overflow: auto;
	width: 100%;
	height: 100%;
	overscroll-behavior: none;
	box-sizing: border-box; /* 패딩이 포함된 박스 크기 설정 */
	flex-shrink: 0;
	padding: 50px;
}

.layer-content img {
	display: block;
	width: auto;
	height: auto;
	flex-shrink: 0;
	margin: auto;
	user-select: none; /* 이미지 선택 방지 */
	-webkit-user-drag: none; /* 이미지 드래그 방지 (웹킷 브라우저용) */
}

.close-layer {
	position: fixed;
	top: 20px;
	right: 30px;
	width: 30px;
	height: 30px;
	cursor: pointer;
	transition: transform 0.3s ease-in-out;
}

.close-layer:hover {
	transform: rotate(360deg);
}