@charset "utf-8";
/*************/
/* Generic */
/*************/
* {
    box-sizing: border-box;
}
body {
    overflow-x: hidden;
    overflow-y: auto;
}
body,
table,
input,
textarea,
select,
button {
    font-family: var(--font-regular);
    font-size: var(--font-medium);
    line-height: 1;
    color: var(--color-black);
}
b,
strong {
    font-family: var(--font-bolder);
}
input:focus {
    outline: var(--border-black);
}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    box-shadow: 0px 0px 0px var(--size-large) var(--color-white) inset !important;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    margin: 0px;
    -webkit-appearance: none;
}
input[type=number] {
    -moz-appearance: textfield;
}
input[type=submit],
button {
    cursor: pointer;
}
a {
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-tap-highlight-color: transparent;
}
/*************/
/* Style */
/*************/
/* font */
.font-bold {
    font-family: var(--font-bold) !important;
}
.font-bolder {
    font-family: var(--font-bolder) !important;
}
.font-heavy {
    font-family: var(--font-heavy) !important;
}
.font-small {
    font-size: var(--font-small) !important;
}
.font-medium {
    font-size: var(--font-medium) !important;
}
.font-large {
    font-size: var(--font-large) !important;
}
.font-larger {
    font-size: var(--font-larger) !important;
}
.font-largest {
    font-size: var(--font-largest) !important;
}
.font-big {
    font-size: var(--font-big) !important;
}
/* color */
.color-green {
    color: var(--color-green) !important;
}
.color-blue {
    color: var(--color-blue) !important;
}
.color-red {
    color: var(--color-red) !important;
}
.color-yellow {
    color: var(--color-yellow) !important;
}
.color-gold {
    color: var(--color-gold) !important;
}
.color-white {
    color: var(--color-white) !important;
}
.color-black {
    color: var(--color-black) !important;
}
.color-deep-gray {
    color: var(--color-deep-gray) !important;
}
.color-gray {
    color: var(--color-gray) !important;
}
/* margin */
.margin-top-micro {
    margin-top: var(--size-micro) !important;
}
.margin-top-tiny {
    margin-top: var(--size-tiny) !important;
}
.margin-top-smallest {
    margin-top: var(--size-smallest) !important;
}
.margin-top-smaller {
    margin-top: var(--size-smaller) !important;
}
.margin-top-small {
    margin-top: var(--size-small) !important;
}
.margin-top {
    margin-top: var(--size-medium) !important;
}
.margin-top-large {
    margin-top: var(--size-large) !important;
}
.margin-top-larger {
    margin-top: var(--size-larger) !important;
}
.margin-top-largest {
    margin-top: var(--size-largest) !important;
}
.margin-top-big {
    margin-top: var(--size-big) !important;
}
.margin-bottom-smallest {
    margin-bottom: var(--size-smallest) !important;
}
.margin-bottom-smaller {
    margin-bottom: var(--size-smaller) !important;
}
.margin-bottom-small {
    margin-bottom: var(--size-small) !important;
}
.margin-bottom {
    margin-bottom: var(--size-medium) !important;
}
.margin-bottom-large {
    margin-bottom: var(--size-large) !important;
}
.margin-bottom-larger {
    margin-bottom: var(--size-larger) !important;
}
.margin-bottom-largest {
    margin-bottom: var(--size-largest) !important;
}
.margin-left-smallest {
    margin-left: var(--size-smallest) !important;
}
.margin-left-tiny {
    margin-left: var(--size-tiny) !important;
}
/* align */
.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}
/* board, editor */
.xe_content,
.rhymix_content {
    font-size: initial;
}
p.xefu-dropzone-message {
    line-height: var(--line-large);
    font-size: var(--font-small);
}
p.editor_autosaved_message.autosave_message {
    font-size: var(--font-small);
    background: var(--color-light-gray);
}
/*************/
/* Common */
/*************/
/* center */
.center-median {
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--size-smallest);
    padding-right: var(--size-smallest);
    width: 100%;
    max-width: var(--size-center);
}
.center-max {
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--size-smallest);
    padding-right: var(--size-smallest);
    width: 100%;
    max-width: var(--size-center-max);
}
.center-min {
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--size-smallest);
    padding-right: var(--size-smallest);
    width: 100%;
    max-width: var(--size-center-min);
}
/* background wrap */
.background-wrap {
    display: none;
    position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
    background-color: var(--color-black-opacity);
	z-index: 10;
}
/* loading */
.loading-wrap {
    display: none;
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 1000;
}
.loading-wrap .background {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
    background-color: var(--color-black-opacity);
}
.loading-wrap .loading-icon {
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	height: 100%;
    color: var(--color-yellow);
}
.loading-wrap .loading-icon > i {
	font-size: calc(var(--font-biggest) * 2);
}
/*************/
/* Button */
/*************/
.button {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    height: var(--size-small);
    text-align: center;
    color: var(--color-white);
    border-radius: var(--border-radius-small);
    border: var(--border-black);
    background-color: var(--color-black);
}
.button.large {
    height: var(--size-large);
    font-family: var(--font-bold);
    font-size: var(--font-large);
}
.button.inline {
    display: inline-flex;
    padding-left: var(--size-smallest);
    padding-right: var(--size-smallest);
    width: auto;
}
.button.white {
    color: var(--color-black);
    border-color: var(--color-black);
    background-color: var(--color-white);
}
.button.gray {
    color: var(--color-black);
    border-color: var(--color-light-gray);
    background-color: var(--color-light-gray);
}
.button.green {
    color: var(--color-white);
    border-color: var(--color-green);
    background-color: var(--color-green);
}
.button.border {
    color: var(--color-black);
    border-color: var(--color-black);
    background: none;
}
.button .icon-image {
    position: relative;
    right: -5%;
    margin-left: var(--size-smallest);
    height: var(--size-tiny);
}
.button .icon-link,
.button.large .icon-image {
    height: calc(var(--size-smallest) - var(--size-tiny));
}
.button .icon-link {
    margin-left: var(--size-micro);
}
.button.large .icon-link {
    margin-left: var(--size-tiny);
    height: calc(var(--size-smallest) - var(--size-micro));
}
/*************/
/* Form */
/*************/
.select-box select,
.input-box input,
.textarea-box textarea  {
    border-radius: var(--border-radius-small);
	border: var(--border-default);
    background-color: var(--color-white);
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
}
.radio-box label,
.radio-box input,
.check-box label,
.check-box input {
	border: 0px;
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
}
/* select box */
.select-box {
	display: flex;
	flex-flow: row nowrap;
	position: relative;
}
.select-box select {
	flex: 1;
	padding: 0px var(--size-medium) 0px var(--size-smaller);
}
.select-box .icon {
	position: absolute;
	top: 50%;
	right: var(--size-tiny);
	font-size: var(--font-largest);
    transform: translateY(-50%);
	pointer-events: none;
}
.select-box .icon > i {
    position: relative;
    top: 0.1rem;
}
/* input box */
.input-box {
	display: flex;
	flex-flow: row nowrap;
	position: relative;
}
.input-box.margin {
	margin-top: var(--size-smallest)
}
.input-box input {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
	flex-grow: 1;
	margin: 0;
	padding: 0 calc(var(--size-tiny) + var(--size-micro));
	max-width: 100%;
    height: var(--size-small);
}
.input-box.icon-box input {
    padding-right: calc(1.3 * var(--size-medium));
    z-index: 20;
}
.input-box.small input {
    font-size: var(--font-medium);
}
.input-box.inner-box input {
    padding: var(--size-tiny) var(--size-smallest);
    font-size: var(--font-larger);
}
.input-box input::placeholder,
.input-box input::-webkit-input-placeholder,
.textarea-box textarea::placeholder,
.textarea-box textarea::-webkit-input-placeholder,
.radio-box label,
.check-box label {
	color: var(--color-gray);
}
.input-box input:disabled {
	color: var(--color-gray);
	background-color: var(--color-light-gray);
}
.input-box input:read-only {
    cursor: pointer;
    background-color: var(--color-background);
}
.input-box.center input {
	text-align: center;
}
.input-box a {
	color: var(--color-black);
}
.input-box .icon-right {
    display: inline-flex;
    position: absolute;
    top: 50%;
    right: var(--size-smaller);
    transform: translateY(-50%);
    font-size: var(--font-largest);
    text-align: right;
    z-index: 20;
}
.input-box .icon-right.small {
    font-size: var(--font-large);
}
/* textarea box */
.textarea-box {
	display: flex;
	flex-flow: row nowrap;
	position: relative;
}
.textarea-box textarea {
	flex: 1;
	margin: 0px;
	padding: var(--size-smallest) var(--size-smaller) var(--size-smallest);
	height: 130px;
}
/* radio, check box */
.radio-box,
.check-box {
	display: flex;
	flex-flow: row wrap;
	margin: calc(-1 * var(--size-tiny));
}
.radio-box > li,
.check-box > li {
	margin: var(--size-tiny);
}
.radio-box.full > li,
.check-box.full > li {
    flex: 1;
}
.radio-box.two > li,
.check-box.two > li {
    width: calc(50% - (2 * var(--size-tiny)));
}
.radio-box.four > li,
.check-box.four > li {
    width: calc(25% - (2 * var(--size-tiny)));
}
.radio-box input,
.check-box input {
	display: none;
}
.radio-box.default > li,
.check-box.default > li {
    display: flex;
    flex-flow: row nowrap;
}
.radio-box label,
.check-box label {
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	padding: var(--size-smaller) var(--size-small) var(--size-smaller);
    text-align: center;
	cursor: pointer;
    box-sizing: border-box;
    color: var(--color-black);
    border-radius: var(--size-tiny);
	border: var(--border-default);
	background-color: #fff;
}
.radio-box label.gray,
.check-box label.gray {
    background-color: var(--color-light-gray);
}
.radio-box label.blue,
.check-box label.blue {
    background-color: var(--color-blue);
}
.radio-box label.yellow,
.check-box label.yellow {
    background-color: var(--color-yellow);
}
.radio-box label.green,
.check-box label.green {
    color: var(--color-white);
    background-color: var(--color-green);
}
.radio-box.default label,
.check-box.default label {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    padding: 0px;
    height: auto;
    text-align: left;
    border: 0px;
    color: var(--color-black);
    background: none;
}
.radio-box li.active label,
.check-box li.active label {
	color: var(--color-red);
	border-color: var(--color-red);
}
.radio-box li.active label.gray,
.check-box li.active label.gray,
.radio-box li.active label.blue,
.check-box li.active label.blue,
.radio-box li.active label.yellow,
.check-box li.active label.yellow {
    color: var(--color-black);
    border-width: var(--size-micro);
	border-color: var(--color-black);
}
.radio-box li.active label.green,
.check-box li.active label.green {
    color: var(--color-white);
    border-width: var(--size-micro);
	border-color: var(--color-black);
}
.radio-box li.disabled label,
.check-box li.disabled label {
	color: var(--color-gray);
	border-color: var(--color-light-gray);
    background-color: var(--color-light-gray);
}
.radio-box.default li.active label,
.check-box.default li.active label {
	color: var(--color-red);
}
.radio-box.default .icon,
.check-box.default .icon {
    position: relative;
    margin-right: calc(2 * var(--size-micro));
    font-size: var(--font-large);
    color: var(--color-black);
}
.radio-box.default .xi-radiobox-blank,
.check-box.default .xi-checkbox-blank,
.check-box.default .xi-check-circle-o {
    display: block;
}
.radio-box.default .xi-radiobox-checked,
.check-box.default .xi-check-square,
.check-box.default .xi-check-circle {
    display: none;
}
.radio-box.default li.active .xi-radiobox-blank,
.check-box.default li.active .xi-checkbox-blank,
.check-box.default li.active .xi-check-circle-o {
    display: none;
}
.radio-box.default li.active .xi-radiobox-checked,
.check-box.default li.active .xi-check-square,
.check-box.default li.active .xi-check-circle {
    display: block;
    color: var(--color-red);
}
/* file box */
.file-box {
    padding: var(--size-smaller);
    border-radius: var(--size-tiny);
    border: var(--border-default);
}
.file-box .disp-image {
    display: flex;
    flex-flow: column;
    margin-bottom: var(--size-smaller);
    text-decoration: underline;
    text-underline-offset: calc(1.5 * var(--size-micro));
    color: var(--color-gold);
}
.file-box .file-image {
    margin-bottom: var(--size-smallest);
}
.file-box .button-image {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}
.file-box .button-image .reset-image {
    margin-left: var(--size-tiny);
}
.file-box input[type=button] {
    cursor: pointer;
}
/* form zone */
.form-zone > ul {
    display: flex;
    flex-flow: column;
}
.form-zone > ul > li {
    position: relative;
    margin-top: calc(1.1 * var(--size-smallest));
}
.form-zone.short > ul > li {
    margin-top: var(--size-smallest);
}
.form-zone > ul > li.title {
    margin-top: var(--size-medium);
    margin-bottom: var(--size-smallest);
    font-family: var(--font-bolder);
    font-size: var(--font-larger);
}
.form-zone > ul > li.title.desc {
    margin-bottom: var(--size-smallest);
}
.form-zone > ul > li.title + li,
.form-zone > ul > li:first-child {
    margin-top: 0px;
}
.form-zone > ul > li .key {
    position: relative;
    margin-bottom: var(--size-tiny);
    line-height: var(--line-smaller);
}
.form-zone > ul > li .key.desc {
    line-height: var(--line-default);
    font-size: var(--font-small);
}
.form-zone > ul > li .key .require {
    position: absolute;
    top: 50%;
    right: 0px;
    font-size: var(--font-small);
    color: var(--color-red);
    transform: translateY(-50%);
}
.form-zone > ul > li .key .buttons {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    position: absolute;
    top: 50%;
    right: 0px;
    transform: translateY(-50%);
}
.form-zone > ul > li .box {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 0 calc(var(--size-tiny) + var(--size-micro));
    height: var(--size-small);
    font-size: var(--font-medium);
    border-radius: var(--border-radius-small);
    border: var(--border-default);
    background-color: var(--color-background);
}
.form-zone > ul > li .button-box,
.form-zone > ul > li .input-select {
    display: flex;
    flex-flow: row nowrap;
}
.form-zone > ul > li .button-box .box,
.form-zone > ul > li .button-box .input-box,
.form-zone > ul > li .input-select .input-box {
    flex: 1;
    word-break: break-all;
}
.form-zone > ul > li .button-box .button,
.form-zone > ul > li .input-select .select-box {
    margin-left: var(--size-tiny);
    height: auto;
    font-size: var(--font-large);
}
.form-zone > ul > li .input-select .select-box select {
    padding-right: var(--size-large);
}
/*************/
/* List */
/*************/
.list-zone {
    display: flex;
    flex-flow: row wrap;
    margin: calc(-1 * var(--size-smaller) / 2);
}
.list-zone.small {
    margin: calc(-1 * var(--size-tiny) / 2);
}
.list-zone.large {
    margin: calc(-1 * var(--size-smaller)) calc(-1 * var(--size-small) / 2);
}
.list-zone.column {
    flex-flow: column;
    margin: 0px;
}
.list-zone.numbering {
    list-style: decimal;
}
.list-zone.numbering .text {
    top: 0px;
}
.list-zone.disc {
    list-style: disc;
}
.list-zone.disc .text {
    top: 0px;
}
.list-zone.circle {
    list-style: circle;
}
.list-zone.circle .text {
    top: 0px;
}
.list-zone > li {
    align-self: stretch;
    margin: calc(var(--size-smaller) / 2);
}
.list-zone > li.row {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}
.list-zone.small > li {
    margin: calc(var(--size-tiny) / 2);
}
.list-zone.large > li {
    margin: calc(var(--size-smaller)) calc(var(--size-small) / 2);
}
.list-zone.column > li {
    margin: var(--size-small) 0px 0px;
}
.list-zone.column.large > li {
    margin: var(--size-medium) 0px 0px;
}
.list-zone.column.small > li {
    margin-top: var(--size-smaller);
}
.list-zone.column.tiny > li {
    margin-top: var(--size-tiny);
}
.list-zone.column.micro > li {
    margin-top: var(--size-micro);
}
.list-zone.column > li:first-child {
    margin-top: 0px;
}
.list-zone.two > li {
    width: calc(50% - var(--size-smaller));
}
.list-zone.small.two > li {
    width: calc(50% - var(--size-tiny));
}
.list-zone.large.two > li {
    width: calc(50% - var(--size-small));
}
.list-zone.three > li {
    width: calc(33.333% - var(--size-smaller));
}
.list-zone.four > li {
    width: calc(25% - var(--size-smaller));
}
.list-zone.numbering > li {
    margin-left: calc(var(--size-tiny) * 2.2);
}
.list-zone.disc > li {
    margin-left: calc(var(--size-tiny) * 2.2);
}
.list-zone.circle > li {
    margin-left: calc(var(--size-tiny) * 2.2);
}
.list-zone > li.nodata {
    padding-top: var(--size-small);
    padding-bottom: var(--size-small);
    width: 100%;
    font-size: var(--font-large);
    text-align: center;
    border-radius: var(--border-radius-small);
    border: var(--border-default);
}
.list-zone .list-zone {
    padding-top: var(--size-tiny);
    padding-bottom: var(--size-tiny);
}
/*************/
/* Table */
/*************/
.table-header {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--size-smallest);
}
.table-header strong {
    font-family: var(--font-heavy);
}
.table-wrap {
    overflow-x: auto;
    overflow-y: hidden;
}
.table-zone {
    width: 100%;
}
.table-zone thead th {
    border-top: var(--border-black);
    background-color: var(--color-white);
}
.table-zone th,
.table-zone td {
    padding: var(--size-smallest);
    text-align: center;
    vertical-align: middle;
    border-bottom: var(--border-default);
}
.table-zone td {
    line-height: var(--line-small);
    word-break: keep-all;
}
.table-zone th.user {
    width: var(--size-big);
}
.table-zone th.count {
    width: calc(var(--size-large) * 2);
}
.table-zone th.date {
    width: calc(var(--size-larger) * 2);
}
.table-zone th.check {
    width: var(--size-small);
}
.table-zone th.left,
.table-zone td.left {
    text-align: left;
}
.table-zone th.left > a,
.table-zone td.left > a {
    justify-content: flex-start;
}
.table-zone th.right,
.table-zone td.right {
    text-align: right;
}
.table-zone th.right > a,
.table-zone td.right > a {
    justify-content: flex-end;
}
.table-zone tr.nodata th,
.table-zone tr.nodata td {
    padding-top: var(--size-small);
    padding-bottom: var(--size-small);
    border-top: var(--border-black);
}
.table-zone tr:hover td {
    border-color: var(--color-black);
}
/*************/
/* Pagination */
/*************/
.pagination-zone {
    margin-top: var(--size-smallest);
}
.pagination {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    margin: calc(-1 * var(--size-micro));
}
.pagination > li {
    margin: var(--size-micro);
}
.pagination > li > a {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: var(--size-small);
    height: var(--size-small);
    color: var(--color-black);
    border-radius: var(--border-radius-micro);
    border: var(--border-default);
    background-color: var(--color-white);
}
.pagination > li.active > a {
    font-family: var(--font-bold);
    color: var(--color-white);
    background-color: var(--color-black);
}
.pagination .prev,
.pagination .next {
    height: calc(var(--size-tiny) + var(--size-mini));
}
.pagination .prev > img {
    transform: rotate(180deg);
}
/*******************/
/* Message Wrap */
/*******************/
.message-wrap {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: var(--size-big) auto;
    padding: var(--size-large) var(--size-medium);
    width: var(--size-huge);
    text-align: center;
    border: var(--border-default);
}
.message-wrap .title {
    position: relative;
    margin-top: var(--size-smaller);
    font-size: var(--font-larger);
    color: var(--color-red);
}
.message-wrap .title .underline {
    display: flex;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 1px;
    font-size: 0px;
    background-color: var(--color-red);
}
.message-wrap .desc {
    margin-top: var(--size-small);
    word-break: keep-all;
    color: var(--color-gray);
}
.message-wrap .link-zone {
    display: flex;
    flex-flow: column;
    align-items: center;
    margin-top: var(--size-medium);
    width: 100%;
}
.message-wrap .link-zone > li {
    margin-top: var(--size-tiny);
    width: 100%;
}
.message-wrap .link-zone > li:first-child {
    margin-top: 0px;
}
/*******************/
/* Popup Wrap */
/*******************/
.popup-wrap {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 300;
}
.popup-wrap .background {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: var(--color-black-opacity);
}
.popup-wrap .popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.popup-wrap .popup .contents {
    position: relative;
    width: calc(var(--size-biggest) * 2);
    background-color: var(--color-white);
}
.popup-wrap .popup .contents .payment-method {
    padding-top: var(--size-tiny);
}
.popup-wrap .popup .contents .payment-button {
    padding: 0px calc(1.3 * var(--size-small)) var(--size-medium);
}
.popup-wrap .popup .body {
    padding: var(--size-large) var(--size-small) var(--size-large);
}
.popup-wrap .popup .body .title {
    position: relative;
    top: calc(-1 * var(--size-smaller));
    margin-bottom: var(--size-smallest);
    padding-bottom: var(--size-small);
    font-family: var(--font-heavy);
    font-size: var(--font-big);
    border-bottom: var(--border-default);
}
.popup-wrap .popup .body .subject {
    line-height: var(--line-default);
    font-family: var(--font-bold);
    font-size: var(--font-larger);
    word-break: keep-all;
}
.popup-wrap .popup .body .desc {
    line-height: var(--line-small);
    font-size: var(--font-large);
    word-break: keep-all;
}
.popup-wrap .popup .body .info {
    display: flex;
    flex-flow: column;
}
.popup-wrap .popup .body .info > li {
    display: flex;
    flex-flow: column;
    margin-top: var(--size-smallest);
    font-size: var(--font-large);
}
.popup-wrap .popup .body .info > li:first-child {
    margin-top: 0px;
}
.popup-wrap .popup .body .info .key {
    flex-shrink: 0;
    margin-bottom: var(--size-micro);
}
.popup-wrap .popup .body .info .value {
    font-family: var(--font-bolder);
}
.popup-wrap .popup .popup-close {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: var(--size-small);
    right: var(--size-medium);
    width: var(--size-large);
    height: var(--size-large);
    font-size: var(--font-big);
    color: var(--color-white);
    border-radius: var(--size-tiny);
    background-color: var(--color-black);
    z-index: 1;
}
.popup-wrap .popup .today-close .icon {
    position: relative;
    top: 0.07rem;
    font-size: var(--font-big);
}
.popup-wrap .popup .bottom {
    padding: 0px var(--size-small);
    height: var(--size-larger);
    background-color: var(--color-background);
}
.popup-wrap .popup .bottom.padding {
    padding-top: var(--size-smallest);
    padding-bottom: var(--size-smallest);
    height: auto;
    background-color: var(--color-white);
}
.popup-wrap .popup .bottom > li {
    position: relative;
}
.popup-wrap .popup .swiper-pagination {
    position: relative;
    top: auto;
    bottom: auto;
    height: var(--size-smaller);
    text-align: right;
}
.popup-wrap .popup .swiper-pagination-bullet {
    width: var(--size-smaller);
    height: var(--size-smaller);
    border-radius: 0px;
    background-color: var(--color-black);
}
.popup-wrap .popup .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.popup-wrap .popup .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin-right: 0px;
    margin-left: var(--size-tiny);
}