/*Intro*/

body.home #main {
    background: white;

    h1, h2, h3, h4, h5, h6, p, span, div {
        font-family: "Noto Serif KR", serif;
    }
}

#introBox #introLogo h1 {
    color: white;
    font-size: 6vw;
    text-align: center;
    font-weight: 300;
    font-family: "Noto Serif KR", serif;
}

/* ✅ 메인 콘텐츠 (처음엔 가려짐) */
#mainContent {
    min-height: 100vh;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    clip-path: circle(calc(0% + 90px) at center);
    max-height: 100vh; /* ✅ 처음엔 전체 화면 고정 */
    position: relative;
    overflow: hidden;
    background: white;

    /*animation: ani_circle 3s 3.3s;*/
    /*animation-fill-mode: both;*/
}

#introBox {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#introVideo {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.videoOverlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

#introLogo {
    z-index: 10;

    h1 {
        /*filter: drop-shadow(0 0 20px #00f0ff);*/
        opacity: 0;
        transform: scale(0.8);
        transition: all 0.5s ease;
    }
}

#revealMask {
    position: fixed;
    inset: 0;
    background: #000;
    clip-path: circle(0% at center);
    z-index: 4;
    pointer-events: none;
}

#introSection {
    width: 100%;
    position: relative;
    height: 100vh;
    overflow: hidden;
    padding: 0;
    border-radius: 0;
    transition: all 0.3s ease;
    color: white;
    margin-bottom: 200px;
    z-index: 10;

    .video-pin {
        position: relative;
        height: 100%;
        width: 100%;
    }

    .video-wrapper {
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        border-radius: 0;
        overflow: hidden;
        margin: auto;
    }

    .intro-content {
        padding: 30px;
        position: relative;
        z-index: 2;
        color: #fff;
        text-align: center;
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .content-wrapper {
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;

            h1, h3, h6, p {
                word-break: keep-all;
                color: white;
            }
            h6 {
                line-height: 2;
            }
        }
    }
}

#neurofeedbackSection {
    background: white;
    padding-top: 30vh;
    padding-bottom: 30vh;
    min-height: 100vh;
    text-align: center;
    overflow: hidden;
    position: relative;
    background-image: url(/wp-content/themes/blocksy-child/assets/images/front-page/221126-h.s.w-c1-0001.jpg);
    background-size: cover;
    background-position: center;

    .bg-filter {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: white;
    }

    .title-wrapper {
        position: relative;
        text-align: center;
        z-index: 10;

        .big-title {
            font-size: 9vw;
            font-weight: 900;
            text-transform: uppercase;
            margin-bottom: 0;
        }

        .normal-title {
            margin-bottom: 30px;
        }
    }

    .info-wrapper {
        position: relative;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
        padding: 0 15px;
        z-index: 10;

        p {
            word-break: keep-all;
            color: #383838;
        }
    }

    .products-wrapper {
        position: absolute;
        left: 0;
        bottom: -90px;
        width: 100%;
        z-index: 5;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        gap: 15px;

        .img-wrapper {
            opacity: 0;
            position: relative;
            width: 14vw;
        }

        .prod1 {
            transform: translateY(24vw);
        }

        .prod2 {
            transform: translateY(calc(24vw - 120px));
        }

        .prod3 {
            transform: translateY(calc(24vw - 60px));
        }

        .prod4 {
            transform: translateY(calc(24vw + 90px));
        }

        .prod5 {
            transform: translateY(calc(24vw - 60px));
        }

        .prod6 {
            transform: translateY(calc(24vw - 60px));
        }
    }
}

#dataProveSection {
    background: white;
    padding-top: 30vh;
    padding-bottom: 30vh;

    .diffrence-pin {
        padding-top: 90px;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        gap: 30px;

        .data-img-wrapper {
            .caption {
                margin-top: 10px;
                font-size: 14px;
                color: #eaeaea;
            }
        }
    }
}

.intro-page {
    width: 100%;
    position: relative;
    background: white;
}

#aboutSection {
    position: relative;
    z-index: 1;
    min-height: 50vh;
    background: white;

    .content-wrapper {
        max-width: 600px;
        padding: 30px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        color: var(--theme-palette-color-4);

        h1, h4 {
            word-break: keep-all;
            color: var(--theme-palette-color-4);
        }
    }

    .pin-gallery {
        width: 100vw;
        height: 100vh;
        position: relative;
        margin-top: 150px;
        overflow: hidden;
        background: white;
        padding-bottom: 90px;

        .lab-img {
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            position: absolute;
            will-change: transform;
            transform-origin: 50% 0%;
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            background-image: url(/wp-content/themes/blocksy-child/assets/images/front-page/images-1.png);
        }
    }
}

#subServiceSection {
    min-height: 50vh;
    background: white;
    color: white;
    padding-top: 30vh;
    padding-bottom: 360px;
    text-align: center;

    .service-title-wrapper {
        opacity: 1;

        h1 {
            color: #333;
        }
    }
}

#serviceSection {
    position: relative;
    z-index: 1;
    min-height: 50vh;
    background: white;
    color: white;
    overflow: visible;
    padding-bottom: 20vh;

    .content-wrapper {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;

        .ct-container {
            height: 100%;
            position: relative;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 45px;

            .service-box {
                width: 30vw;
                height: 30vw;
                /*background: linear-gradient(270deg, #00667Caa 20%, #041B2D 60%);*/
                /*clip-path: circle();*/
                text-align: center;
                position: relative;
                display: flex;
                flex-direction: column;
                justify-content: center;
                color: white;
                overflow: hidden;
                border-radius: 30px;
                box-shadow: 0 10px 30px rgba(0,0,0, 0.15);

                transform: translateY(-120px);

                img{
                    width: 100%;
                    height: 100%;
                    object-fit: cover;     /* 핵심: cover 효과 */
                    object-position: center; /* 중앙 정렬 */
                    display: block;        /* 이미지 하단 공백 제거 */
                }

                h3, p {
                    color: white;
                    word-break: keep-all;
                }

                p {
                    margin-bottom: 0;
                }
            }
        }
    }

    .bg-wrapper {
        position: relative;
        /*left: 50%;*/
        /*top: 50%;*/
        /*transform: translate(-50%, -50%);*/
        opacity: 1;
        width: 100%;
        text-align: center;

        img {
            display: block;
            margin: auto;
        }
    }
}

#lastSection {
    min-height: 50vh;
    padding-top: 10vh;
    padding-bottom: 10vh;
    .action-wrapper {
        background: linear-gradient(270deg, #00667Caa 20%, #041B2D 60%);
        padding: 15vh 5vw;
        border-radius: 30px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 30px;
    }
}

#bgVideo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.bg-filter {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

@media (max-width: 767px) {

    #introLogo {
        img {
            width: 70vw;
        }
    }

    #introSection {
        .intro-content {
            .content-wrapper {
                h1 {
                    font-size: 30px;
                }
            }
        }
    }

    #aboutSection {
        .content-wrapper {
            h1 {
                font-size: 30px;
            }

            h4 {
                font-size: 16px;
                font-weight: 500;
            }
        }

        .pin-gallery {
            .lab-img {
                background-image: url(/wp-content/themes/blocksy-child/assets/images/front-page/images-1.png);
            }
        }
    }

    #serviceSection {
        .content-wrapper {

            .ct-container {
                gap: 15px;

                .service-box {
                    width: 40vw;
                    height: 40vw;

                    h3 {
                        font-size: 18px;
                        margin-bottom: 5px;
                    }

                    p {
                        font-size: 12px;
                    }
                }
            }
        }
    }

    #neurofeedbackSection {
        .title-wrapper {
            .normal-title {
                font-size: 16px;
            }
        }
        .products-wrapper {
            flex-wrap: wrap;
            bottom: -60vw;

            .img-wrapper {
                width: 30vw;
            }
            .prod2 {
                transform: translateY(calc(24vw));
            }

            .prod3 {
                transform: translateY(calc(14vw));
            }
        }
    }


    #lastSection {
        .action-wrapper {
            flex-direction: column;
            justify-content: space-between;
            h1 {
                text-align: center;
            }
            p {
                text-align: center;
            }
        }
    }
}