@charset "utf-8";

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #000;
    overflow-x: hidden;
}

.section {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

.section2 {
    width: 100%;
}

.section2 img {
    width: 75%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.red-section {
    padding: 40px;
    margin-top: 30px;
    overflow: hidden;
}

.red-banner {
    width: 100%;
    opacity: 0;
    transform: translateY(120px);
    animation: redUp 1.2s ease forwards;
}

.red-banner img {
    width: 100%;
    display: block;
}

@keyframes redUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.yellow-section {
    margin-top: 50px;
    padding: 40px;
}

.yellow-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.card {
    position: relative;
    overflow: hidden;
    border-radius: 18px;

    opacity: 0;
    transform: translateY(100px);
    animation: cardUp .8s ease forwards;
}

.card:nth-child(1) {
    animation-delay: .1s;
}

.card:nth-child(2) {
    animation-delay: .3s;
}

.card:nth-child(3) {
    animation-delay: .5s;
}

.card:nth-child(4) {
    animation-delay: .7s;
}

@keyframes cardUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card img {
    width: 100%;
    display: block;
    transition: .4s;
}

.card::before{
    content:"";
    position:absolute;
    inset:0;
    border:2px solid transparent;
    border-radius:18px;
    transition:.4s;
    z-index:2;
}

.card::after {
    content: "";
    position: absolute;
    top: -120%;
    left: -50%;
    width: 60%;
    height: 300%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, .6),
            transparent);
    transform: rotate(25deg);
    transition: .7s;
    opacity: 0;
}

.card-yellow:hover::before{
    border-color:#ffd622;

    box-shadow:
        0 0 10px #ffce2b,
        0 0 25px #ffd000,
        0 0 50px rgba(255, 176, 6, 0.7);
}


.card-red:hover::before{
    border-color:#ff2b2b;

    box-shadow:
        0 0 10px #ff2b2b,
        0 0 25px #ff0000,
        0 0 50px rgba(255,0,0,.7);
}

.card-white:hover::before{
    border-color:#ffffff;

    box-shadow:
        0 0 10px #d4d4d4,
        0 0 25px #b6b6b6,
        0 0 50px rgba(170, 170, 170, 0.7);
}


.card-blue:hover::before{
    border-color:#00c3ff;

    box-shadow:
        0 0 10px #00c3ff,
        0 0 25px #0084ff,
        0 0 50px rgba(0,140,255,.7);
}

.card:hover::after {
    left: 130%;
    opacity: 1;
}

.card:hover img {
    transform: scale(1.04);
}

.yellow-line-section {
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.line-card{
    position:relative;
    overflow:hidden;
    border-radius:14px;
}

.line-card:nth-child(1) {
    animation-delay: .1s;
}

.line-card:nth-child(2) {
    animation-delay: .3s;
}

.line-card:nth-child(3) {
    animation-delay: .5s;
}

.line-card:nth-child(4) {
    animation-delay: .7s;
}

@keyframes lineUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.line-card img {
    width: 100%;
    display: block;
    transition: .4s;
}

.line-card::before{
    content:"";
    position:absolute;
    inset:0;
    border:2px solid transparent;
    border-radius:14px;
    transition:.4s;
    z-index:2;
}

/* 빛 지나가는 효과 */
.line-card::after {
    content: "";
    position: absolute;
    top: -100%;
    left: -40%;
    width: 40%;
    height: 300%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, .7),
            transparent);
    transform: rotate(25deg);
    opacity: 0;
}
.line-yellow:hover::before{
    border-color:#ffc400;

    box-shadow:
        0 0 12px #ffe600,
        0 0 30px rgba(255, 230, 0, 0.8);
}
.line-red:hover::before{
    border-color:#ff0000;

    box-shadow:
        0 0 12px #ff0800,
        0 0 30px rgba(255, 0, 0, 0.8);
}

.line-white:hover::before{
    border-color:#ffffff;

    box-shadow:
        0 0 12px #fcfcfc,
        0 0 30px rgba(255, 255, 255, 0.8);
}
.line-blue:hover::before{
    border-color:#00cfff;

    box-shadow:
        0 0 12px #00cfff,
        0 0 30px rgba(0,180,255,.8);
}

.line-card:hover::after {
    left: 140%;
    opacity: 1;
    transition: .8s;
}

.line-card:hover img {
    transform: scale(1.02);
}

.blue-section {
    margin: 80px auto;
    height: 700px;
    position: relative;
    perspective: 1400px;
    overflow: hidden;
}

.slider3d {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    animation: rotateSlider 20s linear infinite;
}

.slide {
    position: absolute;
    width: 500px;
    height: 280px;
    left: 50%;
    top: 50%;
    margin-left: -250px;
    margin-top: -140px;

    border-radius: 20px;
    overflow: hidden;

    transition: .5s;
    box-shadow:
        0 20px 40px rgba(0, 0, 0, .6);
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slide:nth-child(1) {
    transform: rotateY(0deg) translateZ(550px);
}

.slide:nth-child(2) {
    transform: rotateY(90deg) translateZ(550px);
}

.slide:nth-child(3) {
    transform: rotateY(180deg) translateZ(550px);
}

.slide:nth-child(4) {
    transform: rotateY(270deg) translateZ(550px);
}

@keyframes rotateSlider {
    from {
        transform: rotateY(0deg);
    }

    to {
        transform: rotateY(360deg);
    }
}

@media (max-width:768px) {

    body {
        overflow-x: hidden;
    }

    .section {
        width: 95%;
        padding-left: 15px;
        padding-right: 15px;
    }

    .red-section {
        padding: 20px 0;
        margin-top: 10px;
    }

    .red-banner img {
        width: 100%;
        border-radius: 12px;
    }

    .yellow-section {
        margin-top: 25px;
        padding: 0;
    }

    .yellow-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .card {
        border-radius: 12px;
    }

    .card img {
        width: 100%;
        display: block;
    }

    .yellow-line-section {
        padding: 0;
        gap: 12px;
        margin-top: 25px;
    }

    .line-card {
        border-radius: 10px;
    }

    .line-card img {
        width: 100%;
        display: block;
    }

    .hex-section {
        margin-top: 30px;
    }

    .hex-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

    .hex-item img {
        width: 100%;
        display: block;
    }

    .blue-section {
        margin-top: 40px;
        height: 300px;
        perspective: 900px;
    }

    .slider3d {
        transform-style: preserve-3d;
        animation: rotateSlider 14s linear infinite;
    }

    .slide {
        width: 240px;
        height: 140px;

        margin-left: -120px;
        margin-top: -70px;

        border-radius: 12px;
    }

    .slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .section2 img {
        width: 100%;
    }

    .slide:nth-child(1) {
        transform: rotateY(0deg) translateZ(220px);
    }

    .slide:nth-child(2) {
        transform: rotateY(90deg) translateZ(220px);
    }

    .slide:nth-child(3) {
        transform: rotateY(180deg) translateZ(220px);
    }

    .slide:nth-child(4) {
        transform: rotateY(270deg) translateZ(220px);
    }
}

@media (max-width:480px) {

    .yellow-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .blue-section {
        height: 240px;
    }

    .slide {
        width: 180px;
        height: 110px;

        margin-left: -90px;
        margin-top: -55px;
    }

    .slide:nth-child(1) {
        transform: rotateY(0deg) translateZ(170px);
    }

    .slide:nth-child(2) {
        transform: rotateY(90deg) translateZ(170px);
    }

    .slide:nth-child(3) {
        transform: rotateY(180deg) translateZ(170px);
    }

    .slide:nth-child(4) {
        transform: rotateY(270deg) translateZ(170px);
    }

}