@charset "utf-8";

:root {
    --main-notice-roll-circle-border-size: .0938rem;
    --main-notice-roll-circle-size: clamp(20px, 2.5391vw, 6.0625rem);
    --main-notice-roll-circle-gap: var(--main-notice-roll-circle-border-size);
    --main-notice-new-mark-size: clamp(5px, .3125vw, .75rem);
    --main-notice-text-box-size: clamp(15rem, 12.1094vw, 29.0625rem);
    --main-notice-icon-size: clamp(20px, 1.0938vw, 2.625rem);
    --main-notice-title-font-size: clamp(14px, .7031vw, 1.6875rem);
    --main-notice-title-font-weight: 300;
    --main-notice-date-font-color: #616161;
    --main-notice-date-font-weight: 500;
    --main-notice-date-margin-top: clamp(5px, .3906vw, .9375rem);
    --main-notice-effect-pos-right: calc((var(--main-notice-roll-circle-size) / 1.5) - var(--main-notice-roll-circle-size));
    --main-notice-effect-wrap-size: clamp(20px, 2.5391vw, 6.0625rem);
    --main-notice-effect-arrow-size: calc(20px, 1.6797vw, 4rem);
    --main-notice-empty-text-color: #fff;
    --aside-quick-right-border-radius: 300px;
    --aside-quick-right-border-color: 1px solid #2e2e2e;
    --aside-quick-right-padding: clamp(20px, 1.5625vw, 3.75rem) clamp(20px, 2.5781vw, 6.1875rem);
    --aside-quick-right-notice-gap: clamp(20px, 1.0938vw, 2.625rem);
    --aside-quick-right-notice-roll-bg-color: #131313;
}

.aside-quick-menu-notice {
    position: relative;
    border-radius: var(--aside-quick-right-border-radius);
    border: var(--aside-quick-right-border-color);
    padding: var(--aside-quick-right-padding);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: var(--aside-quick-right-notice-gap);
}

.aside-quick-menu-notice::before {
    display: block;
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 0;
    height: 100%;
    background: var(--aside-quick-right-notice-roll-bg-color);
    border-radius: var(--aside-quick-right-border-radius);
    z-index: -1;
    opacity: 0;
}

.noti-icon {
    position: relative;
}

.noti-icon i {
    font-size: var(--main-notice-icon-size);
}

.noti-icon span {
    position: absolute;
    right: 0;
    top: 0;
    width: var(--main-notice-new-mark-size);
    height: var(--main-notice-new-mark-size);
    border-radius: 100px;
    background: var(--signature-color);
}

.noti-text {
    width: var(--main-notice-text-box-size);
    height: auto;
}

.noti-text p:nth-child(1) {
    font-size: var(--main-notice-title-font-size);
    font-weight: var(--main-notice-title-font-weight);
}

.noti-text p:nth-child(2) {
    color: var(--main-notice-date-font-color);
    font-weight: var(--main-notice-date-font-weight);
    margin-top: var(--main-notice-date-margin-top);
}

.noti-effect {
    position: absolute;
    right: var(--main-notice-effect-pos-right);
    top: auto;
    bottom: auto;
    left: auto;
    width: var(--main-notice-effect-wrap-size);
    height: var(--main-notice-effect-wrap-size);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

.noti-effect-circle {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.noti-effect-circle svg {
    width: 100%;
    height: 100%;
}

.noti-effect-circle circle {
    fill: none;
    stroke: url(#gradient_intro);
    stroke-width: var(--main-notice-roll-circle-border-size);
    r: calc((var(--main-notice-roll-circle-size) / 2) - (var(--main-notice-roll-circle-border-size) / 2) - var(--main-notice-roll-circle-border-size));
}

.noti-effect-arrow {
    position: relative;
    left: 0;
    width: var(--main-notice-effect-arrow-size);
    height: auto;
}

.noti-effect-arrow img {
    width: 100%;
    height: auto;
}

.noti-empty {
    color: var(--main-notice-empty-text-color);
}

/* **************************************************************
    0) Responsive Area
************************************************************** */
@media all and (max-width: 700px) {
}