@charset "utf-8";

/*** font ***/
@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Noto+Sans+KR&family=Orbitron:wght@700&display=swap');


html {
    scroll-behavior: smooth;
    height: 100vh;
    margin: 0;
    padding: 0;
}



body {
    font-family: 'Noto Sans CJK KR', sans-serif;
    margin: 0;
    padding: 0;
    height: 100%;
    background: linear-gradient(to right, var(--color1), var(--color2));
    transition: background 0.8s ease-in-out;

}

main {
    scroll-snap-type: y mandatory;
    /* 세로 방향 스냅 활성화 */
    overflow-y: scroll;
    /* 수직 스크롤 활성화 */
    height: 100vh;
    /* 화면 높이를 100%로 설정 */
}

.container {
    text-align: left;
    color: var(--color);
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-image: url(./bg001.png);
    background-size: cover;
    background-position: center;
    /*  this is where the magic happens:  */
    background-attachment: fixed;
}



section {
    scroll-snap-align: start;
    /* 각 섹션이 스크롤될 때 시작 위치로 스냅 */
    height: 100vh;
    /* 각 섹션을 화면 높이로 설정 */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
}


h1 {
    color: #ffb300;
    font-weight: 900;
    font-size: 3rem;
    animation: slideInFromUp 3.0s ease-in-out infinite;
    /* infinite로 무한 반복 설정 */
}

.selffont1 {
    color: #ffffff !important;
    padding-top: 0px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 0px;
    margin-top: 10px;
    margin-bottom: 0;
    font-weight: 900;
    font-size: 3.0rem !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
    /* 그림자 설정 */
}


h2 {
    color: #ffffff;
    font-weight: 900;
    font-size: 3.0rem;
    -webkit-animation: text-shadow-pop-bottom 0.6s infinite both;
    animation: text-shadow-pop-bottom 0.6s infinite both;
}

@-webkit-keyframes text-shadow-pop-bottom {
    0% {
        text-shadow: 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        text-shadow: 0 1px #555555, 0 2px #555555, 0 3px #555555, 0 4px #555555, 0 5px #555555, 0 6px #555555, 0 7px #555555, 0 8px #555555;
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
    }
}

@keyframes text-shadow-pop-bottom {
    0% {
        text-shadow: 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555, 0 0 #555555;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        text-shadow: 0 1px #555555, 0 2px #555555, 0 3px #555555, 0 4px #555555, 0 5px #555555, 0 6px #555555, 0 7px #555555, 0 8px #555555;
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
    }
}



p {
    color: #4ed5b5;
    font-size: 1.0rem;
    line-height: 1.8rem;
    font-weight: 400;
    max-width: 100ch;
    line-height: 1.1;
    padding: 1em;
}





a {
    display: inline-block;
    padding: 1em 2.5em;
    background-color: rgb(0, 0, 0);
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    border-radius: 0.3em;
    font-weight: 700;
    letter-spacing: .5px;
    font-size: .7rem;
}

.line {
    display: flex;
    width: 70px;
    /* 선의 너비 조정 */
    height: 2px;
    /* 선의 높이 조정 */
    background: #ffffff;
    /* 선의 배경색 지정 */
    margin: 20px auto;
    /* 선의 위치 조정 */
    -webkit-animation: vibrate-2 0.3s linear infinite both;
    animation: vibrate-2 0.3s linear infinite both;
}

@-webkit-keyframes vibrate-2 {
    0% {
        -webkit-transform: translate(0);
        transform: translate(0);
    }

    20% {
        -webkit-transform: translate(2px, -2px);
        transform: translate(2px, -2px);
    }

    40% {
        -webkit-transform: translate(2px, 2px);
        transform: translate(2px, 2px);
    }

    60% {
        -webkit-transform: translate(-2px, 2px);
        transform: translate(-2px, 2px);
    }

    80% {
        -webkit-transform: translate(-2px, -2px);
        transform: translate(-2px, -2px);
    }

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

@keyframes vibrate-2 {
    0% {
        -webkit-transform: translate(0);
        transform: translate(0);
    }

    20% {
        -webkit-transform: translate(2px, -2px);
        transform: translate(2px, -2px);
    }

    40% {
        -webkit-transform: translate(2px, 2px);
        transform: translate(2px, 2px);
    }

    60% {
        -webkit-transform: translate(-2px, 2px);
        transform: translate(-2px, 2px);
    }

    80% {
        -webkit-transform: translate(-2px, -2px);
        transform: translate(-2px, -2px);
    }

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


.line2 {
    display: ruby;
    width: 2px;
    /* 선의 너비를 0으로 조절 */
    height: 40px;
    /* 선의 높이를 원하는 길이로 조절 */
    background: #ffffff;
    /* 선의 배경색 지정 */
    margin: auto;
    /* 선의 위치 조정 */
    flex-direction: column;
    /* 수직 방향으로 배치하도록 설정 */
}


/******************************************************************************/

.container2 {
    text-align: left;
    color: var(--color);
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-image: url(#);
    background-size: cover;
    background-position: center;
    /*  this is where the magic happens:  */
    background-attachment: fixed;
    scroll-snap-type: y mandatory;
    /* 수직 방향 스냅 스크롤 활성화 */
    overflow-y: scroll;
    /* 세로 스크롤 활성화 */
    height: 100vh;
    /* 컨테이너 높이를 화면 전체로 설정 */
}


.blank {
    display: flex;
    flex-direction: column;
    /* 수직 정렬 */
    justify-content: center;
    /* 수직 중앙 정렬 */
    align-items: center;
    /* 수평 중앙 정렬 */
    height: 100vh;
    width: 100%;
    background-color: rgb(255, 255, 255);
    color: aliceblue;
    text-align: center;
    background-size: cover;
    background-position: center;

}

.blank4 {
    display: flex;
    flex-direction: column;
    /* 수직 정렬 */
    justify-content: center;
    /* 수직 중앙 정렬 */
    align-items: center;
    /* 수평 중앙 정렬 */
    height: 100vh;
    width: 100%;
    background-color: transparent;
    text-align: center;
    background-size: cover;
    background-position: center;
    position: relative;
    /* 부모 요소의 position 설정 */
    overflow: visible;
    /* 자식 요소가 부모 요소를 벗어나지 않게 설정 */

}

.blank4 h5 {
    color: #cccccc;
    font-size: 2.0rem !important;
    font-weight: 600 !important;
    z-index: 50;
    margin-top: 25px;
    margin-bottom: 0px;

}

.amazingslider-wrapper {
    position: relative;
    z-index: 10;
    /* 다른 요소들 위로 올리기 */
    width: 100%;
    height: 1000px;
    /* 원하는 높이로 설정 */
}

@-webkit-keyframes bg-pan-right {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 100% 50%;
    }
}

@keyframes bg-pan-right {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 100% 50%;
    }
}



.blank p {
    max-width: 100%;
    color: rgb(255, 255, 255);
    font-weight: 700;
    font-size: 3rem;
    text-align: center;
    margin: 0;
    z-index: 10;
    -webkit-animation: text-pop-up-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: text-pop-up-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;

}

@-webkit-keyframes text-pop-up-bottom {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        text-shadow: none;
    }

    100% {
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
    }
}

@keyframes text-pop-up-bottom {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        text-shadow: none;
    }

    100% {
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
    }
}


/*************************************************************************************************************/
/*************************************************************************************************************/
/*************************************************************************************************************/

@media screen and (max-width:900px) {
    .container {
        background-image: url(./bg001_2.png);
    }

    p {
        width: 50ch;
        padding: 0.6em;
    }

    .container {
        text-align: left;
    }

    .blank {
        background-color: blanchedalmond;
    }

    .blank p {
        animation: none;
        color: darkgoldenrod;
        font-size: 2.6rem;
    }

    .image-gallery img {
        width: 85% !important;
        max-width: 150px !important;
        height: 80%;
        opacity: 1 !important;
        transform: none;
        transition: none;
    }

    .image-gallery img:hover {
        transform: none;
        /* 호버 시 이미지 확대 + 위로 이동 */
        z-index: 2;
        /* 호버한 이미지를 위로 올려줌 */


    }

    .image-gallery {

        display: flex;
        justify-content: center;
        /* 이미지들을 가로로 중앙 정렬 */
        align-items: center;
        /* 이미지들을 세로로 중앙 정렬 */
        margin-top: 20px;
        /* 상단 여백 */
        padding: 20px;
        /* 내부 여백 */
        gap: 20px;
        /* 이미지 간 간격 */
        flex-wrap: wrap;
        /* 화면 크기에 맞춰 이미지가 줄 바꿈 */
        width: 90%;
        /* 부모 컨테이너 너비에 맞게 확장 */
        max-width: 1000px;
        /* 최대 너비 제한 */

    }

    .selffont1 {
        color: #ffffff !important;
        padding-top: 50px;
        padding-left: 20px;
        padding-right: 20px;
        margin: 20px;
        font-weight: 900;
        font-size: 2.2rem !important;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
        /* 그림자 설정 */
    }

    .second {
        background-image: url(./bg002_2.png) !important;
        background-attachment: fixed;
        height: 100vh;
    }

    .blank4 h5 {
        color: #cccccc;
        font-size: 1.8rem !important;
        font-weight: 600 !important;
        z-index: 50;
        margin-top: 100px;

    }



}

/*********************************************************************************************************/
/*********************************************************************************************************/
/*********************************************************************************************************/

@media screen and (min-width: 900px) {
    .image-gallery img:hover {
        transform: scale(1.35) translateY(-5px);
        /* 호버 시 이미지 확대 + 위로 이동 */
        z-index: 2;
        /* 호버한 이미지를 위로 올려줌 */
    }

    /* 호버된 이미지 외 다른 이미지들은 흐리게 처리 */
    .image-gallery:hover>img:not(:hover) {
        opacity: 0.3;
        filter: blur(7px) brightness(75%);
    }
}

/*********************************************************************************************************/
/*********************************************************************************************************/
/*********************************************************************************************************/


@media screen and (min-width:1440px) {
    .blank p {
        font-size: 5rem;
        -webkit-animation: tracking-in-contract 2s cubic-bezier(0.215, 0.610, 0.355, 1.000) infinite alternate both;
        animation: tracking-in-contract 2s cubic-bezier(0.215, 0.610, 0.355, 1.000) infinite alternate both;
    }

    @-webkit-keyframes tracking-in-contract {
        0% {
            letter-spacing: 1em;
            opacity: 0;
        }

        40% {
            opacity: 0.6;
        }

        100% {
            letter-spacing: normal;
            opacity: 1;
        }
    }

    @keyframes tracking-in-contract {
        0% {
            letter-spacing: 1em;
            opacity: 0;
        }

        40% {
            opacity: 0.6;
        }

        100% {
            letter-spacing: normal;
            opacity: 1;
        }
    }


    .blank {
        background-color: var(--color);
        /*background-color: var(--color); */
        -webkit-animation: bg-pan-right 8s both;
        animation: bg-pan-right 8s both;
    }

    .selffont1 {
        color: #ffffff !important;
        padding-top: 50px;
        padding-left: 20px;
        padding-right: 20px;
        margin: 20px;
        font-weight: 900;
        font-size: 4.0rem !important;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
        /* 그림자 설정 */
    }

    .blank4 h5 {
        color: #cccccc;
        font-size: 3.2rem !important;
        font-weight: 600 !important;
        z-index: 50;
        margin-top: 50px;

    }
}

/*********************************************************************************************************/
/*********************************************************************************************************/
/*********************************************************************************************************/

.blank h3 {
    color: rgb(0, 0, 0);
    width: 80%;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    /* 텍스트를 가운데 정렬 */
    margin-top: 2rem;
    /* p 요소와 간격 추가 */
}

/*******************************************************************************************************/

/* 배경 도형 컨테이너 */
/* 섹션 ID가 2인 곳에만 적용 */
section[id="2"] {
    position: relative;
    overflow: hidden;
    /* 배경 도형이 영역을 벗어나지 않도록 설정 */

}

/* ID가 2인 섹션의 배경 도형 컨테이너 */
section[id="2"] .background-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    /* 콘텐츠 뒤로 배치 */
    pointer-events: none;
    /* 클릭 이벤트 비활성화 */
    overflow: hidden;
    z-index: 3;
}

/* 개별 도형 스타일 */
section[id="2"] .background-shapes::before {
    content: '';
    position: absolute;
    background: transparent;
    /* 반투명 검정색 */
    border-color: #ffffff;
    border-style: dotted;
    border-radius: 50%;
    /* 원 형태 */
    animation: sliderShape 4.5s linear infinite;
}


section[id="2"] .background-shapes::after {
    content: 'BSTECHNICS SINCE 2012';
    position: absolute;
    background: rgba(0, 0, 0, 0.1);
    /* 반투명 검정색 */
    border-radius: 50%;
    /* 원 형태 */
    animation: sliderShape 4.5s linear infinite;

    /* 텍스트 스타일 */
    font-size: 24px;
    /* 글씨 크기 */
    font-weight: 600;
    /* 글씨 굵기 */
    color: rgb(255, 0, 111);
    /* 반투명 검정색 */
    text-align: end;
    /* 텍스트 정렬 */
    line-height: 200px;
    /* 요소 크기와 정렬 맞추기 */
}

/* 첫 번째 도형 */

/* 두 번째 도형 */
section[id="2"] .background-shapes::after {
    width: 1000px;
    height: 1000px;
    top: 10%;
    right: 10%;
}

/* 도형 변형 애니메이션 */
@keyframes sliderShape {

    0%,
    100% {
        border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
        transform: translate3d(0, 0, 0) rotateZ(0.01deg);
    }

    34% {
        border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%;
        transform: translate3d(0, 50px, 0) rotateZ(0.01deg);
    }

    50% {
        transform: translate3d(0, -50px, 0) rotateZ(0.01deg);
    }

    67% {
        border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%;
        transform: translate3d(0, 80px, 0) rotateZ(0.01deg);
    }
}


/*******************************************************************************************************/

.second {
    background-image: url(./bg002.png);
    background-attachment: fixed;
    height: 100vh;
}

/************************************************************/
.icon-box {

    display: flex;
    justify-content: center;
    /* 이미지들을 가로로 중앙 정렬 */
    align-items: center;
    /* 이미지들을 세로로 중앙 정렬 */
    margin-top: 20px;
    /* 상단 여백 */
    padding: 20px;
    /* 내부 여백 */
    gap: 40px;
    /* 이미지 간 간격 */
    flex-wrap: wrap;
    /* 화면 크기에 맞춰 이미지가 줄 바꿈 */
    width: 100%;
    /* 부모 컨테이너 너비에 맞게 확장 */
    max-width: 1200px;
    /* 최대 너비 제한 */

}


.second2 {
    background-image: url(./bg003.png);
    background-attachment: scroll;
    min-height: 100vh;
    /* 화면 전체 높이 */
    display: flex;
    flex-direction: column;
    /* 세로 방향으로 배치 */
    align-items: center;
    /* 가로 중앙 정렬 */
    justify-content: center;
    /* 세로 중앙 정렬 */
    position: relative;
    /* 중앙 정렬을 위한 위치 설정 */
    padding: 20px;
    /* padding을 추가하여 갤러리와 다른 요소들 사이에 공간을 설정 */
}

/************************************************************/

.image-gallery {

    display: flex;
    justify-content: center;
    /* 이미지들을 가로로 중앙 정렬 */
    align-items: center;
    /* 이미지들을 세로로 중앙 정렬 */
    margin-top: 10px;
    /* 상단 여백 */
    padding: 20px;
    /* 내부 여백 */
    gap: 60px;
    /* 이미지 간 간격 */
    flex-wrap: wrap;
    /* 화면 크기에 맞춰 이미지가 줄 바꿈 */
    width: 100%;
    /* 부모 컨테이너 너비에 맞게 확장 */
    max-width: 1200px;
    /* 최대 너비 제한 */
    background: none;

}

.image-gallery img {
    width: 100%;
    max-width: 200px;
    height: auto;
    opacity: 1 !important;
    transform: translateY(1px);
    transition: transform 0.5s ease-in-out, filter 0.3s ease, opacity 0.3s ease;
}

.image-gallery img {
    background: none;
    background-color: transparent;
}

.image-gallery a {
    background: none;
    background-color: transparent;
}

/* 애니메이션 활성화 시 */
.image-gallery img.animate-active {
    opacity: 1;
    transform: translateY(0);
    animation: slide-in-top 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    background: none;
}

.image-gallery a.animate-active {
    opacity: 1;
    transform: translateY(0);
    animation: slide-in-top 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    background: none;
}

/* 호버된 이미지에 확대 효과 */
.image-gallery img:hover {
    transform: scale(1.35) translateY(-5px);
    /* 호버 시 이미지 확대 + 위로 이동 */
    z-index: 2;
    /* 호버한 이미지를 위로 올려줌 */
    background: none;
}

.image-gallery a:hover {
    transform: scale(1.35) translateY(-5px);
    /* 호버 시 이미지 확대 + 위로 이동 */
    z-index: 2;
    /* 호버한 이미지를 위로 올려줌 */
    background: none;
}

/* 호버된 이미지 외 다른 이미지들은 흐리게 처리 */
.image-gallery:hover>img:not(:hover) {
    opacity: 1;
    filter: blur(0px) brightness(75%);

}

.image-gallery:hover>a:not(:hover) {
    opacity: 1;
    filter: blur(0px) brightness(75%);

}





.image-gallery a:focus {
    outline: none;
    /* 포커스 시 outline 제거 (필요에 따라 조정) */
}



@-webkit-keyframes slide-in-top {
    0% {
        -webkit-transform: translateY(-500px);
        transform: translateY(-500px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slide-in-top {
    0% {
        -webkit-transform: translateY(-500px);
        transform: translateY(-500px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}








/***********************************************************/


.second3 {
    background-image: url(./bg001.png);
    background-attachment: fixed;
    height: 100vh;
}

.second4 {
    background: linear-gradient(45deg, #ffe664 25%, #026e7a);
    background-attachment: fixed;
    height: 100vh;
}

.second2 p {
    font-size: 2.0rem;
    color: whitesmoke;
}






.card>a {
    margin-bottom: 1em;
    pointer-events: none;
}

.card2>a {
    margin-bottom: 2em;
}

.card3>a {
    margin-bottom: 2em;
}

.card p {
    font-size: 0.7em;
    font-weight: 300;
    color: rgb(87, 87, 87);
}

.item {
    display: flex;
    max-width: 200px;
    background-color: white;
    ;
    flex-direction: column;
    align-items: center;
    border-radius: .2em;
    -webkit-box-shadow: 0px 29px 38px -15px rgba(0, 0, 0, 0.43);
    -moz-box-shadow: 0px 29px 38px -15px rgba(0, 0, 0, 0.43);
    box-shadow: 0px 29px 38px -15px rgba(0, 0, 0, 0.43);
}

.item2 {
    display: flex;
    max-width: 200px;
    background-color: white;
    ;
    flex-direction: column;
    align-items: center;
    border-radius: .5em;
    -webkit-box-shadow: 0px 29px 38px -15px rgba(0, 0, 0, 0.43);
    -moz-box-shadow: 0px 29px 38px -15px rgba(0, 0, 0, 0.43);
    box-shadow: 0px 29px 38px -15px rgba(0, 0, 0, 0.43);
}

.item3 {
    display: flex;
    max-width: 260px;
    background-color: white;
    ;
    flex-direction: column;
    align-items: center;
    border-radius: .5em;
    -webkit-box-shadow: 0px 29px 38px -15px rgba(0, 0, 0, 0.43);
    -moz-box-shadow: 0px 29px 38px -15px rgba(0, 0, 0, 0.43);
    box-shadow: 0px 29px 38px -15px rgba(0, 0, 0, 0.43);
}

.img {
    width: 90%;
    height: 200px;
    background-color: lightgrey;
    background-size: cover;
    background-position: center;
    margin-top: 20px;
    border-radius: .3em;
    ;
}

.img-1 {
    background-image: url(./c001.png);
}

.img-2 {
    background-image: url(./c002.png);
}

.img-3 {
    background-image: url(./c003.png);
}

.img-4 {
    background-image: url(./c001.png);
}

.img-5 {
    background-image: url(./c002.png);
}

.img-6 {
    background-image: url(./c003.png);
}



.second {
    flex-direction: row;
    gap: 1.6em;
}

.second2 {
    flex-direction: row;
    gap: 1.2em;
}

.second3 {
    flex-direction: row;
    gap: 0.8em;
}

/** 우측 토글메뉴 ******************************************************************************/
/** toggle menu *******************************************************************************/

#toggle {
    display: none;
}

/** Hamburger**/
.hamburger {
    position: fixed;
    top: 0px;
    right: 30px;
    margin-top: 30px;
    height: 50px;
    z-index: 200;
    cursor: pointer;
}

.hamburger div {
    position: relative;
    width: 30px;
    height: 4px;
    border-radius: 3px;
    background-color: orange;
    margin-top: 6px;
    transition: all 0.3s ease-in-out;
}

.hamburger:hover div {
    background-color: rgb(0, 204, 255);
    /* 원하는 마우스 오버 시의 색상으로 변경 */
}


/** Nav Styles ********************************************************/
.nav {
    position: fixed;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #4ff1cb 15%, #014154);
    top: -100%;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    transform: scale(0);
    animation: fadeInFromTopRight 0.5s ease-in-out;
    z-index: 199;
}

@keyframes fadeInFromTopRight {
    from {
        opacity: 0;
        transform: scale(0) translate(100%, -100%);
    }

    to {
        opacity: 1;
        transform: scale(1) translate(0, 0);
    }
}

.nav::before {
    content: "";
    /* 가상 요소를 내용으로 설정 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 화면 중앙으로 이동 */
    width: 100%;
    /* 이미지의 최대 폭을 100%로 설정 */
    height: 100%;
    /* 이미지의 최대 높이를 100%로 설정 */
    max-width: 600px;
    /* 이미지의 최대 폭을 설정 (예시 값) */
    max-height: 300px;
    /* 이미지의 최대 높이를 설정 (예시 값) */
    background: url('./logo_home.svg') center/cover no-repeat;
    /* 이미지 설정 */
    z-index: -1;
    /* 배경보다 뒤에 위치하도록 설정 */
}


.nav-wrapper {
    position: relative;
    overflow: hidden;
    overflow-y: auto;
    height: 100%;
    background-color: transparent;
}

nav {
    text-align: right;
    margin-right: 30px;
    margin-top: 80px;
    background-color: transparent;
}

nav a {
    position: relative;
    text-decoration: none;
    color: #6ecddd;
    font-size: 1.0em;
    display: inline-block;
    margin-top: 1.25em;
    transition: color 0.2s ease-in-out;
    transition: letter-spacing 0.5s ease-in-out;
    /* margin-right에 대한 0.3초의 ease 트랜지션 효과 추가 */
    letter-spacing: 1px;
}

nav a:before {
    content: '';
    height: 0;
    position: absolute;
    width: 0.20em;
    left: -0.3em;
    transition: all 0.2s ease-in-out;
}

nav a:hover {
    color: white;
    letter-spacing: 0.3rem;
    font-weight: 600;
}

nav a:hover:before {
    height: 110%;
}

/* Initially hide submenu */
nav .submenu {
    display: none;
    text-align: right;
    margin-right: 0px;
    margin-top: 5px;
    content: none;
    /* content 속성을 none으로 설정하여 점을 제거 */

}

/* Style for submenu items */
nav .submenu a {
    position: relative;
    text-decoration: none;
    color: darkorange;
    font-size: 0.8em;
    display: inline-block;
    line-height: 0.05em;
    margin-top: 1.2em;
    transition: color 0.2s ease-in-out;
    transition: letter-spacing 0.5s ease-in-out;
    /* margin-right에 대한 0.3초의 ease 트랜지션 효과 추가 */
    letter-spacing: 1px;
}

/* Change color on hover */
nav .submenu a:hover {
    color: rgb(255, 255, 255);
    font-weight: 500;
    letter-spacing: 0.2rem;

}

/* Display submenu when the parent menu item is hovered */
nav li:hover .submenu {
    display: block;
    font-weight: 400;
}

/* 서브메뉴에 점이 나타나지 않도록 스타일 수정 */
nav .submenu a:before {
    content: none;
    /* content 속성을 none으로 설정하여 점을 제거 */
}


/** Animations **/
#toggle:checked+.hamburger .top-bun {
    transform: rotate(-45deg);
    margin-top: 10px;
}

#toggle:checked+.hamburger .bottom-bun {
    opacity: 0;
    transform: rotate(45deg);
}

#toggle:checked+.hamburger .meat {
    transform: rotate(45deg);
    margin-top: -4px;
}

#toggle:checked+.hamburger+.nav {
    top: 0;
    transform: scale(1);
}


/*********************************************************************************************************/
/*********************************************************************************************************/
/*********************************************************************************************************/
/** 인디케이터 적용 ***********************************************/
.indicator {
    position: fixed;
    top: 50%;
    right: 0;
    margin-right: 15px;
    transform: translateY(-50%);
    background-color: transparent;
    display: flex;
    flex-direction: column;
    gap: 0px;
    z-index: 150;
}

.indicator a {
    font-size: 10px;
    text-decoration: none;
    background-color: transparent;
    color: #d4d4d4;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.indicator a.active {
    color: #ff0062;
    /* 활성화된 인디케이터 색상 */
}

.indicator a:hover {
    color: #ffbb00;
    cursor: pointer;
}

.indicator i {
    font-size: 15px;
    margin-right: 5px;
}

/*********************************************************************************************************/
/*********************************************************************************************************/
/*********************************************************************************************************/


/**** section 타이틀 애니메이션 *****************************/
/* 애니메이션 키프레임 정의 */
@keyframes slideInFromUp {
    0% {
        opacity: 0;
        transform: translateY(-200%);
    }

    50% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-50%);
    }
}




/* 애니메이션 키프레임 정의 */
@keyframes stretchAndBlur {
    0% {
        letter-spacing: 0;
        text-shadow: 0 0 0 transparent;
    }

    50% {
        letter-spacing: 8px;
        /* 좌우로 넓어지는 정도 조절 */
        text-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
        /* 흐려지는 정도와 색상 조절 */
    }

    100% {
        letter-spacing: 0;
        text-shadow: 0 0 0 transparent;
    }
}

/* 인사말 배경 slider-thumb */
.slider-thumb::before {
    position: absolute;

    left: 0%;
    top: 20%;
    width: 800px;
    height: 800px;
    background: #000000;
    border-radius: 62% 47% 82% 35% / 45% 45% 80% 66%;
    will-change: border-radius, transform, opacity;
    animation: sliderShape 4s linear infinite;
    display: block;
    z-index: -1;
    -webkit-animation: sliderShape 4s linear infinite;
}

@keyframes sliderShape {

    0%,
    100% {
        border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
        transform: translate3d(0, 0, 0) rotateZ(0.01deg);
    }

    34% {
        border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%;
        transform: translate3d(0, 5px, 0) rotateZ(0.01deg);
    }

    50% {
        transform: translate3d(0, 0, 0) rotateZ(0.01deg);
    }

    67% {
        border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%;
        transform: translate3d(0, -3px, 0) rotateZ(0.01deg);
    }
}

/* 인사말 배경 slider2-thumb */
.slider2-thumb::before {
    position: absolute;
    content: "";
    right: 50%;
    top: -50%;
    width: 600px;
    height: 800px;
    background: none;
    border-color: #ffffff;
    border-style: solid;
    /* 외곽선을 만들기 위해 solid 스타일을 사용 */
    border-width: 1px;
    /* 외곽선의 두께를 조절 (원하는 두께로 조절) */
    border-radius: 72% 42% 82% 25% / 35% 45% 64% 66%;
    will-change: border-radius, transform, opacity;
    animation: sliderShape 4s linear infinite;
    display: block;
    z-index: -1;
    -webkit-animation: sliderShape2 3s linear infinite;
}

@keyframes sliderShape2 {

    0%,
    100% {
        border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
        transform: translate3d(0, 0, 0) rotateZ(0.01deg);
    }

    30% {
        border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%;
        transform: translate3d(0, 5px, 0) rotateZ(0.01deg);
    }

    50% {
        transform: translate3d(0, 0, 0) rotateZ(0.01deg);
    }

    67% {
        border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%;
        transform: translate3d(0, -3px, 0) rotateZ(0.01deg);
    }
}

/* 인사말 배경 slider3-thumb */
.slider3-thumb::before {
    position: absolute;
    content: "";
    right: 55%;
    top: -47%;
    width: 600px;
    height: 800px;
    background: none;
    border-color: #ffffff;
    border-style: solid;
    /* 외곽선을 만들기 위해 solid 스타일을 사용 */
    border-width: 1px;
    /* 외곽선의 두께를 조절 (원하는 두께로 조절) */
    border-radius: 52% 22% 72% 25% / 25% 45% 54% 66%;
    will-change: border-radius, transform, opacity;
    animation: sliderShape 4s linear infinite;
    display: block;
    z-index: -1;
    -webkit-animation: sliderShape3 3s linear infinite;
}

@keyframes sliderShape3 {

    0%,
    100% {
        border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
        transform: translate3d(0, 0, 0) rotateZ(0.01deg);
    }

    20% {
        border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%;
        transform: translate3d(0, 5px, 0) rotateZ(0.01deg);
    }

    50% {
        transform: translate3d(0, 0, 0) rotateZ(0.01deg);
    }

    77% {
        border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%;
        transform: translate3d(0, -3px, 0) rotateZ(0.01deg);
    }
}

/*******************************************************************/

/* 기본 스타일 */
.section1 {
    position: relative;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #f4f4f4;
    z-index: 3;
}

.scroll-down-indicator {
    position: absolute;
    bottom: 20px;
    width: 30px;
    height: 50px;
    border: 2px solid #b1b1b1;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    animation: fadeIn 1s ease-in-out;
    z-index: 3;
}

.scroll-down-indicator span {
    display: block;
    width: 8px;
    height: 8px;
    background-color: #ffe606;
    border-radius: 50%;
    animation: scrollAnimation 1.5s infinite;
}

@keyframes scrollAnimation {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    50% {
        transform: translateY(15px);
        opacity: 0.5;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* 텍스트 스타일 */
.scroll-down-indicator::after {
    content: "권장해상도 - 가로 1,440px";
    position: absolute;
    top: -40px;
    /* 아이콘 위에 텍스트 배치 */
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.6rem;
    color: #333;
    background-color: #fff;
    padding: 3px 6px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    white-space: nowrap;
    /* 텍스트 줄바꿈 방지 */
}

/* hover 시 텍스트 표시 */
.scroll-down-indicator:hover::after {
    opacity: 1;
    visibility: visible;
}

/***********************************************************************/

/* 직사각형 컨테이너 */
.top-left-box {
    position: absolute;
    top: 30px;
    /* 위쪽 마진 */
    left: 40px;
    /* 왼쪽 마진 */
    width: 230px;
    /* 가로 크기 */
    height: 55px;
    /* 높이는 내용에 따라 자동 */
    border-radius: 8px;
    /* 모서리 둥글게 */
    overflow: hidden;
    /* 내용 넘침 방지 */
    display: flex;
    justify-content: center;
    /* 중앙 정렬 */
    align-items: center;
    z-index: 5;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
    /* 그림자 효과 */
    border: 1px solid rgba(255, 255, 255, 0.2);
    /* 테두리 */
}

@media screen and (max-width: 900px) {
    .top-left-box {
        display: none;
    }
}

/* 글라스 효과 레이어 */
.glass-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2.2);
    /* 반투명 배경 */
    backdrop-filter: blur(4px);
    /* 글라스 효과 블러 */
    z-index: 1;
    /* 이미지 아래로 배치 */
    pointer-events: none;
    /* 클릭 이벤트 무시 */
}

/* 이미지 스타일 */
.top-left-box img {
    position: relative;
    z-index: 2;
    /* 글라스 효과 위로 배치 */
    max-width: 70%;
    /* 컨테이너 너비에 맞게 조정 */
    height: auto;
    /* 높이 비율 유지 */
    object-fit: contain;
    /* 비율 유지하며 맞춤 */
}

/*************************************************************************/

/* 기본적으로 .bottom-left-box는 숨김 */


/* 화면 너비가 1440px 이하일 때 숨기기 */
@media screen and (max-width: 1440px) {
    .bottom-left-box {
      display: none; /* 화면에서 숨기기 */
    }
  }
  
  /* 화면 높이가 1200px 이하일 때 숨기기 */
  @media screen and (max-height: 1200px) {
    .bottom-left-box {
      display: none; /* 화면에서 숨기기 */
    }
  }
  

/* 화면 너비가 1440px 이상이고 화면 높이가 1200px 이상일 때만 보이도록 설정 */
@media screen and (min-width: 1440px) and (min-height: 1200px) {
    .bottom-left-box {
        display: flex;
        /* 조건이 맞으면 보이도록 설정 */
    }
}



/* 직사각형 컨테이너 (왼쪽 하단) */
.bottom-left-box2 {
    position: absolute;
    bottom: 30px;
    /* 하단 마진 */
    
    /* 왼쪽 마진 */
    width: 420px;
    /* 가로 크기 */
    height: auto;
    /* 높이는 내용에 따라 자동 */
    border-radius: 8px;
    /* 모서리 둥글게 */
    overflow: hidden;
    /* 내용 넘침 방지 */
    display: flex;
    flex-direction: column;
    /* 세로로 문장을 나열 */
    justify-content: center;
    /* 세로 중앙 정렬 */
    align-items: center;
    z-index: 100;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    /* 그림자 효과 */
    border: 1px solid rgba(255, 255, 255, 0.2);
    /* 테두리 */
}

.bottom-left-box {
    position: absolute;
    bottom: 200px;
    left: 50%;
    transform: translate(-50%, 50%);
    width: 600px;
    height: auto;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 100;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
 
}


/* 글라스 효과 레이어 */
.glass-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.15);
    /* 반투명 배경 */
    backdrop-filter: blur(4px);
    /* 글라스 효과 블러 */
    z-index: 1;
    /* 텍스트 내용 아래로 배치 */
    pointer-events: none;
    /* 클릭 이벤트 무시 */
}

/* 문장 내용 스타일 */
.text-content7 {
    position: relative;
    z-index: 101;
    /* 글라스 효과 위로 배치 */
    text-align: left;
    /* 문장 중앙 정렬 */
    color:  #5c5c5c !important;
    /* 텍스트 색상 */
    font-size: 1.8rem;
    /* 기본 폰트 크기 */
}

.text-content7 p {
    margin: 5px 0;
    /* 각 문장 간의 간격 */
    line-height: 1.5;
    /* 문장 간의 줄 간격 */
    font-size: 0.8rem;
    color: #2f2f2f;
    /* 텍스트 색상 */
}

@media screen and (max-width: 768px) {
    .text-content7 p {
      color: #fff; /* 어두운 배경에서도 잘 보이도록 */
      background: rgba(0, 0, 0, 0.5); /* 어두운 배경 박스 */
      border-radius: 5px;
      padding: 10px;
    }
  }