* {
    font-family: "Noto Sans KR", serif !important;
    box-sizing: border-box;
}

header.cover {
    height: calc(100vh);
    display: flex;
    align-items: center;
}

.cover_scroll {
    position: absolute;
    bottom: 60px;
    width: 200px;
    margin: auto;
    display: block;
    cursor: pointer;
    padding-bottom: 40px;
    left: 0;
    right: 0;
    text-transform: uppercase;
}

.cover_scroll .chevron {
    margin-top: 20px;
    display: block;
    -webkit-animation: pulse 1s infinite;
    animation: pulse 1s infinite;
    color: orange;
}


@-webkit-keyframes pulse {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    50% {
        -webkit-transform: translate(0, 10px);
        transform: translate(0, 10px);
    }

    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

@keyframes pulse {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    50% {
        -webkit-transform: translate(0, 10px);
        transform: translate(0, 10px);
    }

    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

.chevron::before {
    border-style: solid;
    border-width: 0.25em 0.25em 0 0;
    content: '';
    display: inline-block;
    height: 20px;
    position: relative;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    vertical-align: top;
    width: 20px;
}


.chevron.bottom:before {
    top: 0;
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
}

.nav-item {
    font-weight: bold;
}

/* 글자두께 */
.fw-600 {
    font-weight: 600 !important;
}

/* 진동 밑줄 */
.underline-wave {
    text-decoration-line: underline;
    text-decoration-color: red;
    text-underline-position: under;
    text-decoration-thickness: 3px;

    color: red;
}


/* 크립 방진 패드 밑줄 */
.underline-pad {
    text-decoration-line: underline;
    text-underline-position: under;
    text-decoration-thickness: 2px;
}

/* 밑줄 - 블랙 */
.underline-black {
    text-decoration-line: underline;
    text-underline-position: under;
    text-decoration-thickness: 1px;

    color: red;
}

/* 밑줄 - 레드 */
.underline-red {
    text-decoration-line: underline;
    text-decoration-color: red;
    text-underline-position: under;
    text-decoration-thickness: 2px;
}

/* 글자색 */

.text-orange {
    color: orange !important;
}

.text-green {
    color: limegreen !important;
}

.text-red {
    color: red !important;
}

.text-gray {
    color: gray !important;
}

/* 배경색 */


.bg-dark {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important;
}

/* 섹션 */

section {
/*    min-height: 100vh;*/
    padding-top: 56px;
}

.default-page {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.new-content {
    padding-top: 6rem;
}

/* 테이블 */

td,
th {
    font-size: 1.25rem;
    font-weight: 350;
}

th {
    font-weight: 600;
}

.lead {
    font-size: 1.25rem;
    font-weight: 350 !important;
}

/* 로고 슬라이드 */
:root {
    --size: clamp(10rem, 1rem + 40vmin, 30rem);
    --gap: calc(var(--size) / 14);
    --duration: 30s;
    --scroll-start: 0;
    --scroll-end: calc(-100% - var(--gap));
}

.marquee {
    display: flex;
    overflow: hidden;
    user-select: none;
    gap: var(--gap);
    mask-image: linear-gradient(var(--mask-direction, to right),
            hsl(0 0% 0% / 0),
            hsl(0 0% 0% / 1) 20%,
            hsl(0 0% 0% / 1) 80%,
            hsl(0 0% 0% / 0));
}

.marquee__group {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: var(--gap);
    min-width: 100%;
    animation: scroll-x var(--duration) linear infinite;
}

.marquee--reverse .marquee__group {
    animation-direction: reverse;
    animation-delay: -3s;
}

@keyframes scroll-x {
    from {
        transform: translateX(var(--scroll-start));
    }

    to {
        transform: translateX(var(--scroll-end));
    }
}

@keyframes scroll-y {
    from {
        transform: translateY(var(--scroll-start));
    }

    to {
        transform: translateY(var(--scroll-end));
    }
}

/* Element styles */
.marquee .card {
    display: grid;
    place-items: center;
    width: var(--size);
    min-width: 200px;
    height: auto;
    background: white;
    aspect-ratio: 16/9;
    border: 1px solid #dee2e6;
}

.marquee .card img {
    width: 180px;
    height: auto;
}

/* Parent wrapper */
.wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    margin: auto;
    max-width: 100vw;
}

@keyframes fade {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

/* 버튼 */
:root {
    --color-dark: #110d1a;
    --color-primary: orange;
    accent-color: var(--color-primary);
}

a {
    color: var(--color-primary);
    text-decoration: none;
}

.c-btn {
    position: relative;
    overflow: hidden;
    padding: 0.85rem 2rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: var(--color-primary);
    text-decoration: none;

    border-radius: 8px;
    background-color: transparent;
    backface-visibility: hidden;
    box-shadow: inset 0 0 0 1px var(--color-primary);

    transform: translateZ(0);

    &::after {
        content: "";
        pointer-events: none;
        position: absolute;

        top: 0;
        left: 0;
        z-index: 1;
        height: 120%;
        width: 120%;

        border-radius: 20%;
        background-color: var(--color-primary);
        scale: 0 0;
        translate: 0 140%;
        transition: scale 0.6s cubic-bezier(0.215, 0.61, 0.355, 1),
            translate 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
    }
}

.c-btn__label {
    display: inline-flex;
    align-items: center;
    gap: 1rem;

    z-index: 2;
    font-size: 1.2rem;
    letter-spacing: 0.025em;

    transition: color 0.32s ease-in-out;
}

.c-btn:hover {
    span {
        color: var(--color-dark);
    }

    &:after {
        scale: 1.5 1.5;
        translate: 0 0;

        border-radius: 50%;
    }
}

/* 다크모드 차단 */
:root {
    color-scheme: light only;
}