@charset "utf-8";
/*************/
/* Generic */
/*************/
* {
    box-sizing: border-box;
}
body,
table,
input,
textarea,
select,
button {
    font-family: var(--font-regular);
    font-size: var(--font-medium);
    line-height: 1.4;
    color: var(--color-black);
}
h1 {
    font-family: var(--font-heavy);
    font-size: var(--font-biggest);
}
h2 {
    font-family: var(--font-heavy);
    font-size: var(--font-big);
}
h3 {
    font-family: var(--font-bolder);
    font-size: var(--font-largest);
}
h4 {
    font-size: var(--font-larger);
}
h5 {
    font-size: var(--font-large);
}
h6 {
    font-size: var(--font-small);
}
b,
strong {
    font-family: var(--font-bolder);
}
em {
    font-style: italic;
}
u {
    text-decoration: underline;
}
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[type=submit],
button {
    cursor: pointer;
}
a {
    -webkit-tap-highlight-color: transparent;
}
/*************/
/* Style */
/*************/
/* font */
.font-bold {
    font-family: var(--font-bold) !important;
}
.font-bolder {
    font-family: var(--font-bolder) !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-blue {
    color: var(--color-blue) !important;
}
.color-red {
    color: var(--color-red) !important;
}
.color-yellow {
    color: var(--color-yellow) !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-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;
}
/* width */
.min-width-smaller {
    min-width: var(--size-large) !important;
}
.min-width-small {
    min-width: var(--size-largest) !important;
}
.min-width-medium {
    min-width: calc(1.1 * var(--size-calc)) !important;
}
.min-width-large {
    min-width: calc(1.5 * var(--size-calc)) !important;
}
.width-smaller {
    min-width: var(--size-large) !important;
    width: var(--size-large) !important;
}
.width-small {
    min-width: calc(1.2 * var(--size-largest)) !important;
    width: calc(1.2 *var(--size-largest)) !important;
}
.width-medium {
    min-width: calc(0.9 * var(--size-calc)) !important;
    width: calc(0.9 * var(--size-calc)) !important;
}
.width-large {
    min-width: calc(1.5 * var(--size-calc)) !important;
    width: calc(1.5 * var(--size-calc)) !important;
}
/* align */
.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}
/*************/
/* Common */
/*************/
/* common */
.hidden {
    display: none;
}
.separate {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px;
    padding: 0px;
    width: var(--size-medium);
}
.separate.small {
    width: var(--size-small);
}
.separate.smaller {
    width: var(--size-smaller);
}
.separate.smallest {
    width: var(--size-smallest);
}
.separate.largest {
    width: var(--size-largest);
}
.separate .line {
    width: 1px;
    height: 1.3vh;
    font-size: 0px;
    background-color: var(--color-gray);
}
.help {
    margin-top: var(--size-smallest);
    color: var(--color-red);
}
.help.nomargin {
    margin-top: 0px;
}
.help::before {
    content: '※';
}
.help.alert {
    display: none;
}
/* 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);
}
/* center zone */
.center-zone {
    margin: 0px auto;
    width: var(--size-center-max);
    height: 100%;
}
.center-zone.min {
    width: var(--size-center-min);
}
/* space between */
.space-between {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}
.space-between.auto {
    height: auto;
}
.space-between > li {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    align-self: stretch;
    position: relative;
}
.space-between > li:last-child:nth-last-child(2) {
    justify-content: flex-end;
}
.space-between.column > li {
    flex-flow: column;
    align-items: flex-start;
}
/* lang */
.lang-toggle-button {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
}
.lang-toggle-button .active {
    font-family: var(--font-bold);
}
/* tab menu */
.tab-menu {
    display: flex;
    flex-flow: row wrap;
    margin: calc(-1 * var(--size-smallest));
}
.tab-menu.box {
    margin: 0px;
    padding: var(--size-smallest);
    border-radius: var(--size-tiny);
    background-color: var(--color-background);
}
.tab-menu > li {
    margin: var(--size-smallest);
}
.tab-menu.box > li {
    align-self: stretch;
    margin: 0px;
}
.tab-menu.box > li:first-child:nth-last-child(1) {
    width: 50%;
}
.tab-menu.box > li:first-child:nth-last-child(2),
.tab-menu.box > li:first-child:nth-last-child(2) ~ li {
    width: 50%;
}
.tab-menu.box > li:first-child:nth-last-child(3),
.tab-menu.box > li:first-child:nth-last-child(3) ~ li {
    width: 33.3333%;
}
.tab-menu.box > li:first-child:nth-last-child(4),
.tab-menu.box > li:first-child:nth-last-child(4) ~ li {
    width: 25%;
}
.tab-menu.box > li:first-child:nth-last-child(5),
.tab-menu.box > li:first-child:nth-last-child(5) ~ li {
    width: 20%;
}
.tab-menu.box > li:first-child:nth-last-child(6),
.tab-menu.box > li:first-child:nth-last-child(6) ~ li {
    width: 16.6%;
}
.tab-menu > li > a {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    position: relative;
    font-family: var(--font-bold);
    font-size: var(--font-larger);
    color: var(--color-gray);
}
.tab-menu.box > li > a {
    padding: var(--size-smallest) var(--size-small);
    height: 100%;
    text-align: center;
    word-break: keep-all;
    border-radius: var(--size-tiny);
    background-color: var(--color-background);
}
.tab-menu > li > a .underline {
    display: none;
    position: absolute;
    bottom: calc(-1 * var(--size-micro));
    left: 0px;
    width: 100%;
    height: 1px;
    font-size: 0px;
    background-color: var(--color-red);
}
.tab-menu > li.active > a {
    color: var(--color-red);
}
.tab-menu > li.active > a .underline {
    display: block;
}
.tab-menu.box > li.active > a {
    color: var(--color-black);
    background-color: var(--color-white);
}
/* tag menu */
.tag-menu {
    display: flex;
    flex-flow: row wrap;
    margin: calc(-1 * var(--size-tiny) / 2);
}
.tag-menu.large {
    margin: calc(-1 * var(--size-smallest) / 2);
}
.tag-menu > li {
    margin: calc(var(--size-tiny) / 2);
}
.tag-menu.large > li {
    margin: calc(var(--size-smallest) / 2);
}
.tag-menu > li > a {
    padding: var(--size-tiny) var(--size-smallest);
    color: var(--color-deep-gray);
    border: var(--border-default);
    background-color: var(--color-background);
}
.tag-menu > li.active > a {
    color: var(--color-white);
    background-color: var(--color-black);
}
.tag-menu.large > li > a {
    padding: var(--size-smallest) var(--size-smaller);
}
/* date range picker */
.daterangepicker {
    padding: var(--size-smallest);
    box-shadow: 0px 0px var(--size-small) var(--size-tiny) var(--color-shadow);
}
.daterangepicker .calendar-table th {
    height: var(--size-large);
    line-height: var(--size-large);
}
.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
    width: 40%;
    font-size: var(--font-medium);
    border: var(--border-default);
    appearance: auto;
	-moz-appearance: auto;
	-webkit-appearance: auto;
}
.daterangepicker select.hourselect,
.daterangepicker select.minuteselect,
.daterangepicker select.secondselect,
.daterangepicker select.ampmselect {
    border: var(--border-default);
    appearance: auto;
	-moz-appearance: auto;
	-webkit-appearance: auto;
}
/* 설명을 위한 컨텐트 박스 */
.content-box {
    padding: var(--size-smaller) var(--size-small);
    background-color: var(--color-background);
}
.content-box.line {
    padding-top: var(--size-tiny);
    padding-bottom: var(--size-tiny);
    font-size: 0px;
}
.content-box > div {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    margin: 0px calc(-1 * var(--size-tiny));
}
.content-box > div > * {
    margin: 0px var(--size-tiny);
}
/*************/
/* Button */
/*************/
.button {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    position: relative;
    padding-top: var(--size-smaller);
    padding-bottom: var(--size-smaller);
    line-height: 1;
    width: 100%;
    font-size: var(--font-large);
    text-align: center;
    color: var(--color-white);
    border-radius: var(--size-tiny);
    background-color: var(--color-black);
}
.button.inline {
    display: inline-flex;
    padding-left: var(--size-medium);
    padding-right: var(--size-medium);
    width: auto;
}
.button.small {
    padding-top: var(--size-tiny);
    padding-bottom: var(--size-tiny);
    font-size: var(--font-small);
}
.button.smaller {
    padding-top: var(--size-tiny);
    padding-bottom: var(--size-tiny);
    font-size: var(--font-smaller);
    border-radius: calc(2 * var(--size-micro));
}
.button.inline.small {
    padding-left: calc(1.3 * var(--size-tiny));
    padding-right: calc(1.3 * var(--size-tiny));
}
.button.inline.smaller {
    padding-left: calc(var(--size-tiny));
    padding-right: calc(var(--size-tiny));
}
.button.medium {
    padding-top: var(--size-smallest);
    padding-bottom: var(--size-smallest);
}
.button.inline.medium {
    padding-left: calc(1.2 * var(--size-small));
    padding-right: calc(1.2 * var(--size-small));
}
.button.larger {
    padding-top: var(--size-smaller);
    padding-bottom: var(--size-smaller);
    font-size: var(--font-larger);
}
.button.largest {
    padding-top: var(--size-smaller);
    padding-bottom: var(--size-smaller);
    font-size: var(--font-largest);
}
.button.inline.larger {
    padding-left: var(--size-medium);
    padding-right: var(--size-medium);
}
.button.border {
    color: var(--color-black);
    border: var(--border-black);
    background: none;
}
.button.red {
    color: var(--color-white);
    background-color: var(--color-red);
}
.button.gold {
    color: var(--color-white);
    background-color: var(--color-gold);
}
.button.yellow {
    color: var(--color-black);
    background-color: var(--color-yellow);
}
.button.light-green {
    color: var(--color-white);
    background-color: var(--color-light-green);
}
.button.green {
    color: var(--color-white);
    background-color: var(--color-green);
}
.button.blue {
    color: var(--color-white);
    background-color: var(--color-blue);
}
.button.gray {
    color: var(--color-white);
    background-color: var(--color-gray);
}
.button.border.gray {
    color: var(--color-deep-gray);
    border: var(--border-deep-gray);
    background: none;
}
.button.border.red {
    color: var(--color-red);
    border: var(--border-red);
    background: none;
}
.button.disabled {
    color: var(--color-white-opacity);
    background-color: var(--color-light-gray);
}
.button.inline.right-icon {
    padding-right: calc(1.3 * var(--size-small));
}
.button.inline.small.right-icon {
    padding-right: calc(1 * var(--size-smaller));
}
.button .icon {
    position: absolute;
    top: 50%;
    font-size: var(--font-large);
    transform: translateY(-50%);
}
.button.inline.right-icon .icon {
    right: calc(1.3 * var(--size-tiny));
}
.button.inline.small.right-icon .icon {
    right: calc(1 * var(--size-micro));
}
.button .desc {
    margin-top: var(--size-micro);
    font-size: var(--font-small);
    color: var(--color-gray);
}
/* button zone */
.button-zone {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    margin-top: var(--size-large);
    padding-top: var(--size-small);
    border-top: var(--border-default);
}
.button-zone.noborder {
    margin-top: var(--size-largest);
    padding-top: 0px;
    border-top: 0px;
}
.button-zone > div {
    align-self: stretch;
}
/*************/
/* Form */
/*************/
.select-box select,
.input-box input,
.textarea-box textarea  {
    border-radius: var(--size-tiny);
	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: var(--size-smallest) var(--size-medium) var(--size-smallest) var(--size-smaller);
    font-size: var(--font-large);
}
.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 {
	flex: 1;
	margin: 0px;
	padding: var(--size-smallest) var(--size-smaller) var(--size-smallest);
	max-width: 100%;
    font-size: var(--font-large);
}
.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 input::placeholder,
.input-box input::-webkit-input-placeholder {
    color: var(--color-light-gray);
}
.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);
	height: 130px;
	line-height: 1.5;
}
/* 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);
    font-size: var(--font-large);
    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-light-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;
    top: 0.01rem;
    margin-right: var(--size-micro);
    font-size: var(--font-larger);
    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);
}
/* phone box */
.phone-box {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}
.phone-box .select-box {
    margin-right: var(--size-smallest);
}
.phone-box .input-box {
    flex: 1;
}
/* 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 .key .link-button {
    margin-left: var(--size-tiny);
    padding: var(--size-micro) var(--size-tiny);
    font-size: var(--font-small);
    color: var(--color-white);
    background-color: var(--color-black);
}
.form-zone > ul > li .key .link-button:first-child {
    margin-left: 0px;
}
.form-zone > ul > li .key .link-button.red {
    background-color: var(--color-red);
}
.form-zone > ul > li .key .link-button.gray {
    background-color: var(--color-gray);
}
.form-zone > ul > li .box {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    padding: var(--size-smallest) var(--size-smaller) var(--size-smallest);
    font-size: var(--font-large);
    border-radius: var(--size-tiny);
    border: var(--border-default);
    background-color: var(--color-background);
}
.form-zone > ul > li .box.column {
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding-top: var(--size-smaller);
    padding-bottom: var(--size-smaller);
}
.form-zone > ul > li .box.column .article {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    margin-top: var(--size-tiny);
}
.form-zone > ul > li .box.column .article:first-child {
    margin-top: 0px;
}
.form-zone > ul > li .box.column .article .key {
    margin: 0px;
    width: calc(1.3 * var(--size-medium));
    font-size: var(--font-small);
}
.form-zone > ul > li .box.column .article .value {
    font-family: var(--font-bolder);
}
.form-zone > ul > li .box.column .space-between {
    width: 100%;
}
.form-zone > ul > li .box.red {
    color: var(--color-red);
    border: var(--border-red);
}
.form-zone > ul > li .box.white {
    background-color: var(--color-white);
}
.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-smallest) / 2);
}
.list-zone.small {
    margin: calc(-1 * var(--size-tiny) / 2);
}
.list-zone.large {
    margin: calc(-1 * var(--size-smaller)) calc(-1 * var(--size-medium) / 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-smallest) / 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-medium) / 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-smallest);
}
.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-smallest));
}
.list-zone.small.two > li {
    width: calc(50% - var(--size-tiny));
}
.list-zone.large.two > li {
    width: calc(50% - var(--size-medium));
}
.list-zone.three > li {
    width: calc(33.333% - var(--size-smallest));
}
.list-zone.large.three > li {
    width: calc(33.333% - var(--size-medium));
}
.list-zone.four > li {
    width: calc(25% - var(--size-smallest));
}
.list-zone.five > li {
    width: calc(20% - var(--size-smallest));
}
.list-zone.large.five > li {
    width: calc(20% - var(--size-medium));
}
.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(--size-smallest);
    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-normal);
    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 {
    font-size: var(--font-large);
    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.form-inner tr:first-child th,
.table-zone.form-inner tr:first-child td {
    border-top: var(--border-default);
}
.table-zone.form-inner th:first-child,
.table-zone.form-inner td:first-child {
    border-left: var(--border-default);
}
.table-zone.form-inner th:last-child,
.table-zone.form-inner td:last-child {
    border-right: var(--border-default);
}
.table-zone.form-inner th,
.table-zone.form-inner td {
    padding: var(--size-smaller) var(--size-smaller);
}
.table-zone.box-inner tr:first-child th,
.table-zone.box-inner tr:first-child td {
    border-top: var(--border-black);
}
.table-zone.box-inner th.key,
.table-zone.box-inner td.key {
    text-align: left;
}
.table-zone.box-inner th.value,
.table-zone.box-inner td.value {
    text-align: right;
}
.table-zone.box-inner th.value .list-zone,
.table-zone.box-inner td.value .list-zone {
    justify-content: flex-end;
}
.table-zone.box-inner th,
.table-zone.box-inner td {
    padding-left: var(--size-smallest);
    padding-right: var(--size-smallest);
}
.table-zone th.left,
.table-zone td.left {
    text-align: left;
}
.table-zone th.right,
.table-zone td.right {
    text-align: right;
}
.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.header th,
.table-zone tr.header td {
    padding-top: var(--size-tiny);
    padding-bottom: var(--size-tiny);
    font-size: var(--font-small);
    color: var(--color-gray);
}
.table-zone tr.expand th,
.table-zone tr.expand td {
    padding: 0px;
    font-family: var(--font-bold);
    font-size: var(--font-large);
    border-top: var(--border-black);
    background-color: var(--color-background);
}
.table-zone tr.expand .title {
    display: flex;
    position: relative;
    padding: var(--size-smallest);
}
.table-zone tr.expand .title .icon {
    position: absolute;
    top: 50%;
    right: var(--size-smallest);
    transform: translateY(-50%);
}
.table-zone:not(.form-inner, .box-inner) tr:hover td {
    border-color: var(--color-black);
}
.table-zone .box {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    height: var(--size-medium);
    background-color: var(--color-gray-opacity);
}
.table-zone .desc {
    margin-top: var(--size-micro);
    font-size: var(--font-small);
    color: var(--color-gray);
}
/*************/
/* Title */
/*************/
.title-zone {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: calc(1.4 * var(--size-small));
    padding: 0px calc(1.1 * var(--size-micro));
}
.title-zone.center {
    justify-content: center;
}
.title-zone .title {
    font-family: var(--font-heavy);
    font-size: var(--font-big);
}
.title-zone .subject {
    font-family: var(--font-bolder);
    font-size: var(--font-largest);
}
.title-zone .bigtitle {
    font-family: var(--font-bolder);
    font-size: var(--font-greatest);
}
.title-zone .tab-menu {
    margin-top: 0px;
}
.title-zone .select-box {
    min-width: var(--size-bigger);
}
.subtitle-zone {
    margin-top: calc(-1 * var(--size-smallest));
    margin-bottom: calc(1.4 * var(--size-small));
}
.subtitle-zone .title {
    font-family: var(--font-bolder);
    font-size: var(--font-largest);
}
/*************/
/* Pagination */
/*************/
.pagination {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    margin: var(--size-smallest) calc(-1 * var(--size-tiny)) calc(-1 * var(--size-tiny)) calc(-1 * var(--size-tiny));
}
.pagination > li {
    margin: var(--size-micro);
}
.pagination > li > a {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: calc(var(--size-small) + var(--size-smaller));
    height: calc(var(--size-small) + var(--size-smaller));
    border-radius: calc(2 * var(--size-micro));
    border: var(--border-default);
    background-color: var(--color-white);
}
.pagination > li.active > a {
    color: var(--color-white);
    background-color: var(--color-black);
}
/*******************/
/* 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);
}