@charset "utf-8";

:root {
    --logo-font-size: var(--font-21);
    /* 로고 사이즈 */
    --logo-font-color: var(--color-08);
    /* 로고 색상 */

    /* 셀렉트박스 시작 */
    --select-pop-btn-color: var(--font-color);
    --select-pop-bg: var(--article-bg-color);
    --select-pop-width: calc(var(--padding-100) * 2);
    --select-pop-radius: var(--input-radius);
    --select-pop-shadow-color: var(--color-01);
    --select-option-border-color: var(--color-02);
    --select-option-size: var(--padding-40);
    --select-option-padding: var(--padding-10);
    --select-option-spacing: var(--padding-15);
    /* 셀렉트박스 끝 */

    --ico-border-color: currentColor;
    /* 아이콘 보더 색상 */
    --ico-size: var(--padding-9);
    --list-colo-size: var(--padding-14);
    --checkbox-size: var(--padding-18);
    --checkbox-spacing: var(--padding-10);
}

.fadeChange {
    position: relative;
    white-space: nowrap;
}

@keyframes logoFade1 {

    0%,
    46%,
    100% {
        opacity: 1;
    }

    54%,
    86% {
        opacity: 0;
    }
}

@keyframes logoFade2 {

    0%,
    44%,
    99% {
        opacity: 0;
    }

    58%,
    85% {
        opacity: 1;
    }
}

.fadeChange>* {
    animation-name: logoFade1;
}

.fadeChange>* {
    max-width: none;
    animation-duration: 15s;
    animation-fill-mode: both;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.fadeChange> :nth-child(2) {
    opacity: 0;
    animation-name: logoFade2;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.fadeChange.left> :nth-child(2) {
    left: 0;
    transform: translateY(-50%);
}

.select {
    position: relative;
    left: 0;
    top: 0;
}

.select.button {
    display: flex;
    align-items: center;
    border: var(--border);
    height: var(--button-size-normal);
    /* border-radius: var(--button-size-normal); */
    border-radius: var(--padding-5);
    width: var(--padding-100);
    padding: 0 var(--content-padding);
}

.select.button.small {
    height: var(--button-size-small);
    /* border-radius: var(--button-size-small); */
    border-radius: calc(var(--border-width)* 2);
}

.select.button>.selectBtn {
    font-size: var(--caption-desc);
    width: 100%;
}

.selectDesign.select {
    overflow: hidden;
    padding: 0 var(--content-padding) 0 0;
}

.select>select,
.select>.selectBtn input {
    width: 100%;
}

.select>.selectBtn input {
    height: 100%;
    pointer-events: none;
}

.select>select {
    border: none;
    appearance: none;
    height: 100%;
    padding: 0 var(--content-padding);
}

.select>select,
.select>.selectBtn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    overflow: hidden;
}

.selectDesign.select::after,
.select:not(.custom)>.selectBtn::after {
    content: '';
    display: block;
    border: var(--padding-3) solid transparent;
    border-top: var(--padding-4) solid var(--select-pop-btn-color);
    border-bottom: none;
}

.select.on>.selectBtn::after {
    border-bottom: var(--padding-4) solid var(--select-pop-btn-color);
    border-top: none;
}

.select:not(.on)>.selectPop {
    display: none;
}

.select>.selectPop {
    position: absolute;
    top: 100%;
    margin-top: -0.5em;
    left: calc(0px - var(--border-width));
    /*셀렉트 박스 옵션 기본 좌측 정렬*/
    background-color: var(--select-pop-bg);
    border: var(--border);
    width: var(--select-pop-width);
    display: flex;
    flex-wrap: wrap;
    box-shadow: var(--button-shadow);
    border-radius: var(--select-pop-radius);
    overflow: hidden;
    z-index: 97;
    max-height: 100vh;
}

.select>.selectPop.right {
    /*셀렉트 박스 옵션 우측 정렬*/
    left: auto;
    right: calc(0px - var(--border-width));
}

.select>.selectPop.full {
    width: 100%;
    left: 0;
}

.select>.selectPop .selectList {
    /*셀렉트 박스 옵션 기본 column 2 */
    width: 50%;
    /* display: flex; */
}

.select>.selectPop .selectList.columnSelf-3 {
    width: 33.333%;
}

.select>.selectPop .selectList.columnSelf-4 {
    width: 25%;
}

.select>.selectPop .selectList.full {
    /*셀렉트 박스 옵션 column 1*/
    width: 100%;
}

.select>.selectPop .selectList .selectOption {
    position: relative;
    width: 100%;
    left: 0;
    top: 0;
    flex: 1;
    display: flex;
    min-height: var(--select-option-size);
    align-items: center;
    padding: var(--select-option-padding);
    height: 100%;
}

.select>.selectPop .selectList .selectOption:hover {
    background-color: var(--color-005);
}

.select>.selectPop .selectList .selectOption::after {
    display: block;
    content: '';
    pointer-events: none;
    position: absolute;
    top: calc(0px - var(--border-width));
    right: calc(0px - var(--border-width));
    bottom: calc(0px - var(--border-width));
    left: calc(0px - var(--border-width));
    border: var(--border-width) solid var(--select-option-border-color);
    border-width: var(--border-width) 0 0 var(--border-width);
}

.arrowBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--button-size-middle);
    height: var(--button-size-middle);
    border: var(--border);
    border-radius: 50%;
}

.prevIco,
.nextIco,
.downIco,
.upIco {
    display: block;
    width: var(--ico-size);
    height: var(--ico-size);
    border: var(--border-width) solid var(--ico-border-color);
    transform: rotate(-45deg);
}

.upIco {
    border-width: var(--border-width) var(--border-width) 0 0;
    margin-top: calc(var(--border-width) * 3);
}

.downIco {
    border-width: 0 0 var(--border-width) var(--border-width);
    margin-top: calc(0px - var(--border-width) * 3);
}

.prevIco {
    border-width: var(--border-width) 0 0 var(--border-width);
    margin-left: calc(var(--border-width) * 3);
}

.nextIco {
    border-width: 0 var(--border-width) var(--border-width) 0;
    margin-left: calc(0px - var(--border-width) * 3);
}

.on>.onUpDownParent .downIco,
:not(.on)>.onUpDownParent .upIco,
.onUpDown.on>.downIco,
.onUpDown:not(.on)>.upIco {
    display: none;
}

.exitIco,
.fullIco,
.plusIco,
.closeIco {
    display: block;
    width: var(--ico-size);
    height: var(--ico-size);
    position: relative;
    left: 0;
    top: 0;
    color: currentColor;
}

.exitIco {
    color: currentColor;
}

.fullIco::after,
.fullIco::before,
.exitIco::before,
.exitIco::after,
.plusIco::before,
.plusIco::after,
.closeIco::before {
    content: "";
    display: block;
    background-color: currentColor;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.exitIco::before,
.closeIco::before,
.plusIco::before {
    width: 100%;
    height: var(--border-width);
}

.exitIco::after,
.plusIco::after {
    height: 100%;
    width: var(--border-width);
}

.fullIco {
    overflow: hidden;
}

.fullIco::after,
.fullIco::before {
    width: 100%;
    height: 100%;
}

.widget.full .fullIco,
.fullIco.cut {
    transform: rotate(45deg);
}

.fullIco:after,
.fullIco:before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.widget.full .fullIco::after,
.widget.full .fullIco::before,
.fullIco.cut:after,
.fullIco.cut:before {
    top: 50%;
}

.widget.full .fullIco::after,
.fullIco.cut:after {
    left: -25%;
}

.widget.full .fullIco::before,
.fullIco.cut:before {
    left: 125%;
}

.fullIco::after {
    left: 0;
    top: 0;
}

.fullIco::before {
    left: 100%;
    top: 100%;
}

.exitIco {
    transform: rotate(-45deg);
}

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

.changeIco::before {
    content: '';
    display: block;
    margin-top: calc(var(--border-width) * 2);
}

.changeIco.normal::before {
    width: calc(var(--border-width) * 4);
    height: var(--border-width);
    background-color: currentColor;
}

.changeIco.normal::after {
    display: block;
    content: '0';
    opacity: 0;
}

.changeIco.normal {
    color: var(--disabled-font-color);
}

.changeIco.up {
    color: var(--color-point);
}

.changeIco.down {
    color: var(--color-primary);
}

.changeIco.up::before,
.changeIco.down::before {
    border: calc(var(--border-width) * 3) solid transparent;
}

.changeIco.up::before {
    border-bottom: calc(var(--border-width) * 4) solid currentColor;
    border-top: none;
}

.changeIco.down::before {
    border-top: calc(var(--border-width) * 4) solid currentColor;
    border-bottom: none;
}

.copyIco {
    width: calc(var(--padding-8) - var(--border-width));
    height: calc(var(--padding-8) - var(--border-width));
    position: relative;
    left: 0;
    top: 0;
}

.copyIco::before,
.copyIco::after {
    content: '';
    display: block;
    border: var(--border);
    border-color: currentColor;
    position: absolute;
    width: calc(100% - var(--border-width) * 2);
    height: calc(100% - var(--border-width) * 2);
}

.copyIco::before {
    left: 0;
    bottom: 0;
}

.copyIco::after {
    right: 0;
    top: 0;
    border-width: var(--border-width) var(--border-width) 0 0;
}


.listIco {
    width: var(--list-colo-size);
    height: var(--list-colo-size);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--border-width);
    align-items: inherit;
}

.listIco i::before,
.listIco i::after,
.listIco i {
    content: '';
    display: flex;
    width: calc(var(--list-colo-size) / 3 - var(--border-width));
    height: calc(var(--list-colo-size) / 3 - var(--border-width));
    gap: var(--border-width);
}

.listIco i::before,
.listIco i::after {
    background-color: var(--color-04);
}

.on>.listIco i::before,
.on>.listIco i::after {
    background-color: var(--color-085);
}

.listIco i::before {
    flex: none;
}

.listIco.card i,
.listIco.list i {
    width: 100%;
}

.listIco.album i::before,
.listIco.list i::before {
    width: 100%;
    height: 100%;
}

.on>.listIco.album i {
    animation-duration: 0.45s;
    animation-fill-mode: both;
    animation-iteration-count: 1;
}

@keyframes album1 {
    50% {
        transform: translate(100%, 100%);
    }
}

@keyframes album2 {
    50% {
        transform: translate(0%, 100%);
    }
}

@keyframes album3 {
    50% {
        transform: translate(-100%, 100%);
    }
}

@keyframes album4 {
    50% {
        transform: translate(100%, 0%);
    }
}

/* @keyframes album5 {50% {transform: translate(0%, 0%);}} */
@keyframes album6 {
    50% {
        transform: translate(-100%, 0%);
    }
}

@keyframes album7 {
    50% {
        transform: translate(100%, -100%);
    }
}

@keyframes album8 {
    50% {
        transform: translate(0%, -100%);
    }
}

@keyframes album9 {
    50% {
        transform: translate(-100%, -100%);
    }
}

.on>.listIco.album.many i:nth-of-type(1),
.on>.listIco.album.normal i:nth-of-type(1) {
    animation-name: album1;
}

.on>.listIco.album.many i:nth-of-type(2) {
    animation-name: album2;
}

.on>.listIco.album.many i:nth-of-type(3),
.on>.listIco.album.normal i:nth-of-type(2) {
    animation-name: album3;
}

.on>.listIco.album.many i:nth-of-type(4) {
    animation-name: album4;
}

.on>.listIco.album.many i:nth-of-type(5) {
    animation-name: album5;
}

.on>.listIco.album.many i:nth-of-type(6) {
    animation-name: album6;
}

.on>.listIco.album.many i:nth-of-type(7),
.on>.listIco.album.normal i:nth-of-type(3) {
    animation-name: album7;
}

.on>.listIco.album.many i:nth-of-type(8) {
    animation-name: album8;
}

.on>.listIco.album.many i:nth-of-type(9),
.on>.listIco.album.normal i:nth-of-type(4) {
    animation-name: album9;
}

.on>.listIco.list i,
.on>.listIco.card i {
    animation-name: rangkingListRotate;
    animation-duration: 5s;
}

.listIco.list i:nth-of-type(1),
.listIco.card i:nth-of-type(1) {
    animation-delay: 0.1s;
}

.listIco.list i:nth-of-type(2),
.listIco.card i:nth-of-type(2) {
    animation-delay: 0.2s;
}

.listIco.list i:nth-of-type(3),
.listIco.card i:nth-of-type(3) {
    animation-delay: 0.3s;
}

.listIco.album.normal i {
    width: calc(var(--list-colo-size) / 2 - var(--border-width));
    height: calc(var(--list-colo-size) / 2 - var(--border-width));
}

.listIco.card i::after {
    width: 100%;
}

.listIco:not(.card) i::after {
    display: none;
}



input.checkboxDesign~label,
input.checkboxDesign~.label {
    padding-left: calc(var(--checkbox-size) + var(--checkbox-spacing));
    position: relative;
    left: 0;
    top: 0;
    max-width: 100%;
    width: fit-content;
    font-size: var(--input-font-size);
}

input.checkboxDesign~label:empty,
input.checkboxDesign~.label:empty {
    padding-left: 0;
    width: var(--checkbox-size);
    height: var(--checkbox-size);
}

input.checkboxDesign~label::before,
input.checkboxDesign~label::after,
input.checkboxDesign~.label::before,
input.checkboxDesign~.label::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
}

input.checkboxDesign~label::before,
input.checkboxDesign~.label::before {
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    border: var(--border);
    border-radius: calc(var(--input-radius) / 2);
    margin-top: calc(0px - var(--checkbox-size) / 2);
    background-color: var(--article-bg-color);
    border-color: var(--color-07);
}

input.checkboxDesign:checked~label::before,
input.checkboxDesign:checked~.label::before {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
}

input.checkboxDesign.disabled:checked~label::before,
input.checkboxDesign.disabled:checked~.label::before {
    border-color: var(--disabled-font-color);
    background-color: var(--disabled-font-color);
}

@keyframes checked {
    0% {
        height: var(--padding-6);
        width: 0;
    }

    100% {
        width: var(--padding-10);
    }
}

input.checkboxDesign:checked~label::after,
input.checkboxDesign:checked~.label::after {
    border: var(--border);
    border-color: var(--article-bg-color);
    border-width: 0 0 calc(var(--border-width) * 2) calc(var(--border-width) * 2);
    transform: rotate(-45deg);
    margin: 0;
}

input.checkboxDesign:checked~label::after,
input.checkboxDesign:checked~.label::after {
    width: var(--padding-10);
    height: var(--padding-6);
    margin: calc(0px - var(--padding-4)) 0 0 var(--padding-4);
    animation-name: checked;
    animation-duration: 0.25s;
    animation-fill-mode: both;
    animation-iteration-count: 1;
}

.showInput+label~*,
.showInput+.label~* {
    gap: var(--input-spacing);
}

.showInput:not(:checked)+label~*,
.showInput:not(:checked)+.label~* {
    display: none;
}

label .checkboxDesign~.buttonDesign {
    padding: 0;
}

label .checkboxDesign:checked~.buttonDesign {
    border: var(--border-width) var(--border-style) var(--color-primary);
}

label .checkboxDesign~.buttonDesign.figure {
    width: auto;
    height: auto;
    overflow: hidden;
}

label .checkboxDesign:checked~.buttonDesign.figure .img {
    background-color: var(--color-07);
}

label .checkboxDesign:checked~.buttonDesign.figure img {
    opacity: 0.45;
}

label .checkboxDesign:checked~.buttonDesign.figure::before {
    content: '';
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 9;
    margin: calc(0px - var(--padding-18)) 0 0 calc(0px - var(--padding-10));
    width: var(--padding-20);
    height: var(--padding-36);
    border-right: var(--padding-5) var(--border-style) var(--color-primary);
    border-bottom: var(--padding-5) var(--border-style) var(--color-primary);
    transform: rotate(45deg);
}

label .checkedOnShow:not(:checked)~.checkedShow,
label .checkedOnShow:not(:checked)~* .checkedShow {
    display: none;
}

input.checkboxDesign~.tag::before,
input.checkboxDesign~.tag::after {
    display: none;
}


.tag {
    /* font-family: monospace; */
    background-color: var(--color-01);
    font-size: var(--font-12);
    padding: var(--padding-2) var(--padding-5);
    border-radius: var(--content-radius);
    vertical-align: text-top;
}

.tag.secondary {
    background-color: var(--color-secondary-005);
    color: var(--color-secondary-06);
}

.tag.point {
    background-color: var(--color-point-005);
    color: var(--color-point-06);
}

.tag.warning {
    background-color: var(--color-warning-005);
    color: var(--color-warning-06);
}

.tag.disabled {
    background-color: var(--color-005);
}

.tag.border {
    background-color: transparent;
    border: var(--border);
    border-color: var(--color-primary);
    color: var(--color-primary);
    height: calc(var(--button-size-small) + var(--border-width) * 2);
}

.tag .remove,
.exitButton {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--article-bg-color);
    width: var(--padding-14);
    height: var(--padding-14);
    border-radius: var(--padding-14);
    color: var(--color-111);
    box-shadow: var(--button-shadow);
}

.tag .exitIco {
    color: var(--font-color);
}

.tag .remove {
    position: absolute;
    right: calc(0px - var(--padding-14) / 2);
    top: calc(0px - var(--border-width));
}

.buttonDesign,
.selectDesign,
.textareaDesign,
.inputDesign {
    display: flex;
    /* align-items: baseline; */
    align-items: center;
    border: var(--border);
    height: var(--button-size-normal);
    padding: var(--padding-10) var(--content-padding);
    gap: var(--content-spacing);
    border-radius: var(--padding-5);
    font-size: var(--input-font-size);
    position: relative;
}

.selectDesign,
.textareaDesign,
.inputDesign {
    background: var(--white-color-08);
}

.inputDesign {
    overflow: hidden;
}

.buttonDesign {
    align-items: center;
    padding: var(--content-padding) var(--article-padding);
    text-align: center;
    justify-content: center;
}

.buttonDesign:hover {
    background-color: var(--color-005);
    transition: all .3s;
}

.buttonDesign.full {
    width: 100%;
    flex: 1;
}

.buttonDesign.onPrimary.on,
.buttonDesign.primary {
    background-color: var(--color-primary-095);
    color: var(--color-fff);
    border-color: transparent;
}

.buttonDesign.primary:hover {
    background-color: var(--color-primary);
}

.buttonDesign.noBorder {
    border-color: transparent;
}

.buttonDesign.secondary {
    border-color: var(--color-primary-06);
    color: var(--color-primary-06);
}

.buttonDesign.secondary:hover {
    background-color: var(--color-primary-005);
}

.buttonDesign.point {
    border-color: var(--color-point-06);
    color: var(--color-point-06);
}

.buttonDesign.point:hover {
    background-color: var(--color-point-005);
}

.buttonDesign.tertiary {
    /* border-color: var(--color-04);
    color: var(--color-06); */
}

.buttonDesign.small,
.selectDesign.small,
.inputDesign.small {
    height: var(--button-size-small);
    gap: var(--padding-5);
    padding: var(--padding-5) var(--content-padding);
    border-radius: calc(var(--border-width)* 2);
}

.selectDesign.low,
.inputDesign.low {
    height: var(--button-size-middle);
}

.selectDesign.small,
.inputDesign.small {
    height: var(--button-size-small);
}

.buttonDesign.small {
    font-size: var(--font-12);
}

.buttonDesign.low {
    height: var(--button-size-middle);
    gap: var(--padding-8);
    padding: var(--padding-8) var(--content-padding);
    border-radius: var(--padding-4);
    font-size: var(--font-15);
}

.selectDesign.big,
.inputDesign.big,
.buttonDesign.big {
    height: var(--button-size-big);
}



.selectDesign.huge,
.inputDesign.huge,
.buttonDesign.huge {
    height: var(--padding-100);
    font-size: var(--font-30);
}

.buttonDesign.round {
    border-radius: var(--button-size-normal);
}

.textareaDesign {
    height: calc(var(--padding-100) * 2);
    overflow: auto;
}

.textareaDesign textarea,
.selectDesign .selectBtn,
.inputDesign input {
    border: none;
    height: 100%;
    flex: 1;
    width: 100%;
}

.inputDesign.noBorder {
    border-color: transparent;
}

.textareaDesign textarea:focus,
.inputDesign input:focus {
    border: none !important;
    box-shadow: none !important;
}

.inputDesign.right input {
    text-align: right;
}

.inputDesign .unit,
.inputDesign .button {
    flex: none;
}

.inputTitle {
    /* line-height: 1; */
}

.inputGroup {
    display: flex;
    flex-direction: column;
    gap: var(--content-spacing)
}

.inputAlert {
    font-size: var(--input-font-size);
    color: var(--disabled-font-color);
}

.inputAlert.right {
    text-align: right;
}

.img.profileImg {
    background-color: var(--color-111);
    border-radius: 50%;
    border: var(--border);
    flex: none;
}


label .buttonDesign {
    padding-top: 0;
    padding-bottom: 0;
    /* width: var(--button-size-normal); */
    height: var(--button-size-normal);
    line-height: 0;
}

.refreshButton {
    display: flex;
    align-items: center;
    gap: var(--checkbox-spacing);
    white-space: nowrap;
}

.refreshIco {
    display: block;
    width: var(--ico-size);
    height: var(--ico-size);
    position: relative;
    left: 0;
    top: 0;
}

.refreshIco::before {
    display: block;
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    padding: 50%;
    border: var(--border);
    border-color: currentColor;
    border-right-color: transparent;
    border-radius: 50%;
}

.refreshIco::after {
    display: block;
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 33.333%;
    height: 33.333%;
    transform: translate(100%, -133.333%);
    border-right: var(--border);
    border-bottom: var(--border);
    border-color: currentColor;
}

.refreshButton:hover .refreshIco {
    transform: rotate(360deg);
}

.likeIco {
    fill: none;
    stroke: var(--color-point);
    stroke-width: 6px;
    stroke-linejoin: round;
    opacity: 0.6;
}

label:hover .likeIco,
button:hover .likeIco,
a:hover .likeIco,
.likeIco:hover {
    opacity: 1;
}

:checked+.likeIco {
    fill: var(--color-point);
}


[class*='Ico'],
[class*='Ico']::before,
[class*='Ico']::after {
    transition: all .15s;
}

button:hover [class*='Ico'],
a:hover [class*='Ico'],
button:hover [class*='Ico']::before,
a:hover [class*='Ico']::before,
button:hover [class*='Ico']::after,
a:hover [class*='Ico']::after {
    transition: all .45s;
}





.logo {
    display: flex;
    font-size: var(--logo-font-size);
    align-items: center;
    color: var(--logo-font-color);
    font-weight: 600;
}