@charset "utf-8";

#archive-system h1 {
    width: 70%;
    max-width: 500px;
    margin: 0 auto 50px;
}

#archive-system .wrapper {
    opacity: 0;
    transition: opacity 0.8s ease;
}

.prev.slick-arrow,
.next.slick-arrow {
    width: 110px;
    height: 50px;
}

#archive-system h2 {
    font-weight: bold;
    line-height: 1.4;
    letter-spacing: 0.05em;
    background: linear-gradient(0deg, #774709 0%, #2A2A2A 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    width: 100%;
    text-align: center;
    padding-bottom: 20px;
    margin: 0 auto 25px;
    border-bottom: #005FBE solid 2px;
    border-image: linear-gradient(to right, #97979700 0%, #979797 10%, #979797 90%, #97979700 100%) 2;
    position: relative;
    font-size: clamp(1.125rem, 0.949rem + 0.751vw, 1.625rem);
}

#archive-system h2::after {
    position: absolute;
    content: "";
    background: url(../img/add/system/system_title_dec.png);
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-size: contain;
    bottom: -15px;
    left: 0;
    right: 0;
    margin: auto;
}

section {
    padding: 0;
}

#archive-system {
    padding-top: 100px;
    padding-bottom: 100px;
    background-image: url(../img/add/system/system_bg.webp), url(../img/add/bg3.png), linear-gradient(to bottom, #6A6967, #444037);
    background-repeat: no-repeat, repeat;
    background-size: 100%, 20%, 100%;
    background-position: top;
}

.system_card {
    width: 100%;
    background-image: url(../img/add/bg4-2.jpg);
    background-repeat: repeat;
    background-position-x: 0%;
    color: #333333;
    border-radius: 5px;
    max-width: 1300px;
    margin: auto;
    background-size: 100%;
}

.system_card:nth-child(2n) .system_card {
    background-image: url(../img/add/bg4.jpg);
    background-repeat: repeat;
    background-size: 100%;
}

.system_card:nth-child(2n) .system_card_flex {
    flex-direction: row-reverse;
}

.system_card_flex {
    align-items: center;
}

.system_card_inner {
    padding: 30px;
    margin-bottom: 50px;
}

.system_card:last-child .system_card_inner {
    margin-bottom: 0;
}

.system_card_inner_bg {
    background-color: #ffffff6e;
}

.system_card:nth-child(2n) .system_card_inner_bg {
    background-color: #d0cabd5a;
}

.slick_system {
    position: relative;
    width: 100%;
}

.slick_system_inner {
    position: relative;
    width: 60%;
}

.slick_system::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-top: 0px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 15px solid #acacac;
    border-right: 0;
    left: 0;
    z-index: 1;
    top: 0;
}

.slick_system::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-top: 0px solid transparent;
    border-bottom: 15px solid transparent;
    border-right: 15px solid #acacac;
    border-left: 0;
    right: 0;
    z-index: 1;
    top: 0;
}

.slick_system_inner::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-top: 15px solid transparent;
    border-bottom: 0px solid transparent;
    border-left: 15px solid #acacac;
    border-right: 0;
    left: 0;
    z-index: 1;
    bottom: 0;
}

.slick_system_inner::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-top: 15px solid transparent;
    border-bottom: 0px solid transparent;
    border-left: 0;
    border-right: 15px solid #acacac;
    right: 0;
    z-index: 1;
    bottom: 0;
}

.next.slick-arrow {
    right: -50px;
}

.prev.slick-arrow {
    left: -50px;
}

.slick-slide img {
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.slick-slide iframe {
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.slider-dots {
    bottom: -15px;
}

.single .slider-dots {
    opacity: 0;
    visibility: hidden;
}

.slick_system {
    background-color: #333333;
    border: 2px solid #acacac;
}

.system_info {
    width: 37%;
    font-weight: 600;
    font-size: clamp(0.813rem, 0.746rem + 0.282vw, 1rem);
}

@media screen and (max-width: 1000px) {
    #archive-system h1 {
        margin: 0px auto 30px;
    }

    #archive-system {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .slick_system_inner {
        width: 100%;
    }

    .system_info {
        width: 100%;
    }

    .system_card_flex {
        gap: 35px;
        flex-direction: column-reverse;
    }

    .system_card:nth-child(2n) .system_card_flex {
        flex-direction: column-reverse;
    }

    .system_card_inner {
        padding: 20px;
        margin-bottom: 30px;
    }
}

@media screen and (max-width: 480px) {

    .system_card_inner {
        padding: 10px;
        margin-bottom: 30px;
    }

    .bg_border1 {
        padding: 5px 5px 25px 5px;
    }

    #archive-system {
        background-size: 220%, 50%, 100%;
    }

    .system_card_flex {
        gap: 15px;
    }

    #archive-system h2 {
        padding-bottom: 15px;
        border-bottom: #005FBE solid 1.5px;
        border-image: linear-gradient(to right, #97979700 0%, #979797 10%, #979797 90%, #97979700 100%) 1.5;
    }

    .system_info {
        font-size: 13px;
    }

    .prev.slick-arrow,
    .next.slick-arrow {
        width: 70px;
        height: 35px;
    }

    .next.slick-arrow {
        right: -35px;
    }

    .prev.slick-arrow {
        left: -35px;
    }
}

.yt, .bilibili {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
}

.yt iframe,
.bilibili iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}