@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%;
   
}

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

.center-left-text {
  position: absolute;
  top: 50%;
  left: 15%; /* 화면 왼쪽에서 15% 위치 */
  transform: translateY(-50%); /* 세로 중앙정렬 */
  color: #fff; /* 흰색 글씨 */
  z-index: 2; /* 영상 위로 */
  text-align: left;
}

.center-left-text h1 {
  font-size: 64px; /* 큰 제목 */
  font-weight: 900;
  margin: 0;
  line-height: 1.1;
}

.center-left-text h2 {
  font-size: 24px; /* 소제목 */
  font-weight: 500;
  margin-top: 12px;
  line-height: 1.2;
  opacity: 1.0; /* 살짝 투명감 */
}

.center-left-text h3 {
  font-size: 18px; /* 소제목 */
  font-weight: 400;
  margin-top: 12px;
  line-height: 1.2;
  opacity: 1.0; /* 살짝 투명감 */
}

.center-left-text h4 {
  font-size: 16px; /* 소제목 */
  font-weight: 300;
  margin-top: 12px;
  line-height: 1.2;
  opacity: 1.0; /* 살짝 투명감 */
}

.video-overlay {
  position: absolute;
  bottom: 0;          /* 🔹 아래쪽 기준으로 위치 고정 */
  left: 0;
  width: 100%;
  height: 70%;        /* 🔹 아래쪽에서부터 70%만 덮음 */
  background: rgba(0, 0, 0, 0.50); /* 🔹 30% 어두운 반투명 레이어 */
  z-index: 1;         /* 영상 위, 텍스트 아래 */
  animation: overlayHeight1 5s ease-in-out infinite; /* 🔹 6초 주기로 반복 */
}

/* 🔸 높이가 60% → 80% → 60%로 반복되는 애니메이션 */
@keyframes overlayHeight1 {
  0% {
    height: 60%;
  }
  50% {
    height: 80%;
  }
  100% {
    height: 60%;
  }
}

.video-overlay2 {
  position: absolute;
  bottom: 0;          /* 🔹 아래쪽 기준으로 위치 고정 */
  left: 0;
  width: 100%;
  height: 75%;
  background: rgba(0, 0, 0, 0.60); /* 🔹 45% 어둡게 (값은 0.3~0.6 사이로 조정 가능) */
  z-index: 1; /* 영상 위, 텍스트 아래 */
  animation: overlayHeight2 5s ease-in-out infinite; /* 🔹 6초 주기로 반복 */
}

/* 🔸 높이가 60% → 80% → 60%로 반복되는 애니메이션 */
@keyframes overlayHeight2 {
  0% {
    height: 50%;
  }
  50% {
    height: 95%;
  }
  100% {
    height: 50%;
  }
}

.video-overlay3 {
  position: absolute;
  bottom: 0;          /* 🔹 아래쪽 기준으로 위치 고정 */
  left: 0;
  width: 100%;
  height: 55%;
  background: rgba(0, 0, 0, 0.60); /* 🔹 45% 어둡게 (값은 0.3~0.6 사이로 조정 가능) */
  z-index: 1; /* 영상 위, 텍스트 아래 */
animation: overlayHeight3 5s ease-in-out infinite; /* 🔹 6초 주기로 반복 */
}

/* 🔸 높이가 60% → 80% → 60%로 반복되는 애니메이션 */
@keyframes overlayHeight3 {
  0% {
    height: 45%;
  }
  50% {
    height: 75%;
  }
  100% {
    height: 45%;
  }
}



.video-overlay4 {
  position: absolute;
  bottom: 0;          /* 🔹 아래쪽 기준으로 위치 고정 */
  left: 0;
  width: 100%;
  height: 35%;
  background: rgba(1, 74, 91, 0.8); /* 🔹 45% 어둡게 (값은 0.3~0.6 사이로 조정 가능) */
  z-index: 1; /* 영상 위, 텍스트 아래 */
  animation: overlayHeight4 4s ease-in-out infinite; /* 🔹 6초 주기로 반복 */
}

/* 🔸 높이가 60% → 80% → 60%로 반복되는 애니메이션 */
@keyframes overlayHeight4 {
  0% {
    height: 30%;
  }
  50% {
    height: 45%;
  }
  100% {
    height: 30%;
  }
}

.video-overlay5 {
  position: absolute;
  bottom: 0;          /* 🔹 아래쪽 기준으로 위치 고정 */
  left: 0;
  width: 100%;
  height: 40%;
  background: rgba(3, 66, 30, 0.75); /* 🔹 45% 어둡게 (값은 0.3~0.6 사이로 조정 가능) */
  mix-blend-mode: multiply;
  z-index: 1; /* 영상 위, 텍스트 아래 */
 animation: overlayHeight5 6s ease-in-out infinite; /* 🔹 6초 주기로 반복 */
}

/* 🔸 높이가 60% → 80% → 60%로 반복되는 애니메이션 */
@keyframes overlayHeight5 {
  0% {
    height: 70%;
  }
  50% {
    height: 40%;
  }
  100% {
    height: 70%;
  }
}

.video-overlay7 {
  position: absolute;
  bottom: 0;          /* 🔹 아래쪽 기준으로 위치 고정 */
  left: 0;
  width: 100%;
  height: 40%;
  background: rgba(3, 66, 30, 0.75); /* 🔹 45% 어둡게 (값은 0.3~0.6 사이로 조정 가능) */
  mix-blend-mode: multiply;
  z-index: 1; /* 영상 위, 텍스트 아래 */
 animation: overlayHeight5 6s ease-in-out infinite; /* 🔹 6초 주기로 반복 */
}

/* 🔸 높이가 60% → 80% → 60%로 반복되는 애니메이션 */
@keyframes overlayHeight5 {
  0% {
    height: 35%;
  }
  50% {
    height: 80%;
  }
  100% {
    height: 35%;
  }
}

.center-left-text h1,
.center-left-text h2,
.center-left-text h3,
.center-left-text h4 {
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); /* 글씨 가독성 향상 */
}

.green-title {
  background-color: #036603a6; /* 진한 녹색 */
  color: #ffffff; /* 글씨를 흰색으로 */
  padding: 12px 24px; /* 내부 여백 */
  border-radius: 12px; /* 모서리 라운드 */
  display: inline-block; /* 글씨 길이에 맞게 배경이 적용 */
  font-weight: 800;
  font-size: 1.4rem;
  
}

.green-title2 {
  background-color: #c7ea03a6; /* 진한 녹색 */
  color: #ffffff; /* 글씨를 흰색으로 */
  padding: 12px 24px; /* 내부 여백 */
  border-radius: 12px; /* 모서리 라운드 */
  display: inline-block; /* 글씨 길이에 맞게 배경이 적용 */
  font-weight: 800;
  font-size: 1.4rem;
  
}

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

/* 이미지 행 스타일 (가로 정렬, 중앙 정렬, 간격 등) */
.image-row {
  display: flex;
  gap: 12px;                /* 이미지 사이 간격 */
  align-items: center;      /* 수직 중앙 정렬 */
  justify-content: flex-start; /* 왼쪽 정렬; 중앙에 두려면 center로 변경 */
  margin-top: 12px;         /* 텍스트 블록과의 간격 */
  z-index: 200;
}

/* 각 썸네일 크기 조절 */
.image-row .thumb {
  width: 200px;             /* 원하는 너비 */
  height: 120px;             /* 원하는 높이 */
  margin: 0;
  overflow: hidden;
  border-radius: 6px;       /* 모서리 둥글게 */
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  background: #fff;
  flex: 0 0 auto;           /* 고정 크기 유지 */
  
}

/* 이미지가 썸네일 영역을 깔끔히 채우게 */
.image-row .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* 비율 유지하며 영역 채우기 */
  display: block;
}

/* 모바일: 화면이 좁으면 세로로 쌓이게 */
@media (max-width: 1024px) {
  .image-row {
    flex-wrap: wrap;              /* 줄바꿈 허용 */
    justify-content: left;      /* 가운데 정렬 (원하시면 flex-start로 변경 가능) */
    gap: 10px;                    /* 이미지 간격 */
  }

  .image-row .thumb {
    width: calc(50% - 10px);      /* 한 줄에 2개씩 (gap 보정 포함) */
    height: auto;                 /* 세로 비율 자동 조정 */
    max-width: 250px;             /* 너무 커지지 않도록 제한 */
  }
}

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



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

.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(../img/bg001_2.png);
    background-size: cover;
    background-position: center;
    /*  this is where the magic happens:  */
    background-attachment: fixed;
}

.container22 {
    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(../img/222222.png);
    background-size: cover;
    background-position: center;
    /*  this is where the magic happens:  */
    background-attachment: fixed;
    padding: 20px;
    
}



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

.container p {
   font-size: 24px;
}


h1 {
    color: #ffd900;
    font-weight: 900;
    font-size: 2.7rem;
   
}

.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: 2.4rem !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
    /* 그림자 설정 */
}

.selffont2 {
    color: #ffffff !important;
    font-weight: 700;
    font-size: 1.0rem !important;
   }


h2 {
    color: #ffffff;
    font-weight: 900;
    font-size: 3.0rem;
   
}

@-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;
    font-weight: 400;
    max-width: 100ch;
    line-height: 1.3; /* 행간을 늘림 */
    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-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%;
   
    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;
    /* 자식 요소가 부모 요소를 벗어나지 않게 설정 */

    /* 배경 이미지 추가 */
    background-image: url('../img/pink_concept.png'); 
}

.blank5 {
    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;
    /* 자식 요소가 부모 요소를 벗어나지 않게 설정 */
    /* 배경 이미지 추가 */
    background-image: url('../img/222222.png'); 
    /* ✅ 어둡게 처리 (반투명 검정색 덮기) */
    background-color: rgba(0, 0, 0, 0.0);
    background-blend-mode: darken;
}

.blank6 {
    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;
    /* 자식 요소가 부모 요소를 벗어나지 않게 설정 */
    /* 배경 이미지 추가 */
    background-image: url('../img/color.png'); 
}

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

.greetings-section {
    background-image: url('../img/222222.png'); /* 배경 이미지 설정 */
    background-size: cover; /* 배경 이미지를 섹션 크기에 맞게 확대 */
    background-position: center center; /* 배경 이미지 중앙 정렬 */
    background-attachment: fixed; /* 스크롤 시 배경 이미지 고정 */
    width: 100%; /* 가로 크기 100% */
    height: 100vh; /* 화면 전체 높이 */
    position: relative; /* 내용이 배경 위에 올 수 있도록 설정 */
    z-index: 1; /* 내용이 배경 이미지 위에 위치하도록 설정 */
}

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

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

.blank7 h6 {
    position: absolute;
    top: 24vh;
    left: 5%;
    color: #ffffff;
    font-size: clamp(1.2rem, 4vw, 4rem);
    font-weight: 400;
    text-align: left;
    z-index: 10;    
    display: inline-block;
    white-space: nowrap; /* 줄 바꿈 방지 */
    overflow: hidden;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
}



/**********************************************************************************************/
.blank4 h6, .blank5 h6, .blank6 h6 {
    position: absolute;
    top: 24vh;
    left: 5%;
    color: #ffffff;
    font-size: clamp(2rem, 5vw, 5rem) !important;
    font-weight: 600;
    text-align: left;
    z-index: 10;    
    display: inline-block;
    white-space: nowrap; /* 줄 바꿈 방지 */
    overflow: hidden;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
}



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

/* .highlight-box 스타일을 <h7> 요소에 적용 */
.h7-highlight-box {
    border: 2px solid rgba(255, 255, 255, 0.6); /* 흰색 1px 테두리 */
    padding: 2vw; /* 화면 가로 크기의 5%에 해당하는 패딩 */
    background: rgba(255, 255, 255, 0.2); /* 반투명 배경 */
    border-radius: 20px; /* 모서리 둥글게 */
    text-align: center; /* 텍스트 중앙 정렬 */
    max-width: 80%; /* 가로 폭 제한 */
    margin: 60px auto; /* 중앙 정렬 */
    backdrop-filter: blur(3px); /* 글라스 효과 (배경 블러) */
    -webkit-backdrop-filter: blur(3px); /* 사파리 지원 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* 은은한 그림자 효과 */
    color: white; /* 글씨 색상 (흰색) */
    line-height: 0.8; /* 행간을 1.2로 설정 (값을 조절하여 원하는 행간으로 설정) */
}

.h7-highlight-box2 {
    border: 2px solid rgba(255, 255, 255, 0.6); /* 흰색 1px 테두리 */
    padding: 2vw; /* 화면 가로 크기의 5%에 해당하는 패딩 */
    background: rgba(0, 191, 249, 0.141); /* 반투명 배경 */
    border-radius: 10px; /* 모서리 둥글게 */
    text-align: center; /* 텍스트 중앙 정렬 */
    max-width: 80%; /* 가로 폭 제한 */
    margin: 60px auto; /* 중앙 정렬 */
    
    color: white; /* 글씨 색상 (흰색) */
    line-height: 1.2; /* 행간을 1.2로 설정 (값을 조절하여 원하는 행간으로 설정) */
}

.h8-highlight-box {
    border: 2px solid rgba(255, 255, 255, 0.6); /* 흰색 1px 테두리 */
    padding: 2vw; /* 화면 가로 크기의 5%에 해당하는 패딩 */
    background: rgba(255, 255, 255, 0.3); /* 반투명 배경 */
    border-radius: 20px; /* 모서리 둥글게 */
    text-align: left; /* 텍스트 중앙 정렬 */
    max-width: 90%; /* 가로 폭 제한 */
    margin: 30px auto; /* 중앙 정렬 */
    backdrop-filter: blur(6px); /* 글라스 효과 (배경 블러) */
    -webkit-backdrop-filter: blur(6px); /* 사파리 지원 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* 은은한 그림자 효과 */
    color: white; /* 글씨 색상 (흰색) */
    font-size: clamp(0.6rem, 1.4vw, 0.8rem);
    line-height: 1.2; /* 행간을 1.2로 설정 (값을 조절하여 원하는 행간으로 설정) */
}

@media screen and (max-width:1440px) {
    .h8-highlight-box {
        
        background: rgba(0, 0, 0, 0.5); /* 반투명 배경 */
        font-size: clamp(0.6rem, 1.4vw, 1.0rem);
       
    }
}


.small-text {
    font-size: 65%; /* 서체 크기를 65%로 설정 */
    line-height: 0.6; /* 행간을 서체 크기의 60%로 설정 */
}

.small-image{
    scale: 70%;
}


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

/* 반응형 */
@media (max-width: 600px) {
    .blank4 h6 {
        font-size: 3.0rem;
    }
}

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

.blank4 h7 {
    position: absolute;
    top: 36vh;
    left: 5%;
    color: #000000;
    font-size: clamp(0.8rem, 1.4vw, 1.2rem);
    font-weight: 500;
    text-align: left;
    z-index: 10;
    /* 행간 조절 */
    line-height: 1.4; /* 기본 값은 1.2~1.4 정도, 더 넓게 조정 가능 */
}

@media (max-width: 600px) {
    .blank4 h7 {
        font-size: 0.8rem; /* 최소 글씨 크기 제한 */
    }
}

.blank5 h6 {
    position: absolute;
    top: 24vh;
    left: 5%;
    color: #ffffff;
    font-size: clamp(2rem, 6vw, 6rem);
    font-weight: 600;
    text-align: left;
    z-index: 10;
}

.blank5 h7 {
    position: absolute;
    top: 36vh;
    left: 5%;
    color: #ffffff;
    font-size: clamp(0.8rem, 1.4vw, 1.2rem);
    font-weight: 500;
    text-align: left;
    z-index: 10;
    /* 행간 조절 */
    line-height: 1.4; /* 기본 값은 1.2~1.4 정도, 더 넓게 조정 가능 */
}

@media (max-width: 600px) {
    .blank5 h6{
        font-size: 3.0rem;
    }
}

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

.blank6 h6 {
    position: absolute;
    top: 24vh;
    left: 5%;
    color: #ffffff;
    font-size: clamp(2rem, 6vw, 6rem);
    font-weight: 600;
    text-align: left;
    z-index: 10;

}


.blank6 h7 {
    position: absolute;
    top: 36vh;
    left: 5%;
    color: #ffffff;
    font-size: clamp(0.8rem, 1.4vw, 1.2rem);
    font-weight: 500;
    text-align: left;
    z-index: 10;
    /* 행간 조절 */
    line-height: 1.4; /* 기본 값은 1.2~1.4 정도, 더 넓게 조정 가능 */
}

@media (max-width: 600px) {
    .blank6 h6{
        font-size: 3.0rem;
        left: 5%;
    }
}

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

.blank7 h5 {
    color: #cccccc;
    font-size: 5.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-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(../img/bg001_3.png);
    }

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

    .container {
        text-align: left;
    }

    .blank {
        background-color: rgb(116, 114, 124);
    }

    .blank p {
        animation: none;
        color: rgb(255, 255, 255);
        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: 0px;
        /* 상단 여백 */
        padding: 10px;
        /* 내부 여백 */
        gap: 10px;
        /* 이미지 간 간격 */
        flex-wrap: wrap;
        /* 화면 크기에 맞춰 이미지가 줄 바꿈 */
        width: 90%;
        /* 부모 컨테이너 너비에 맞게 확장 */
        max-width: 900px;
        /* 최대 너비 제한 */

    }

    .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-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); */
       
    }

    .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;
}

/* 개별 도형 스타일 */
section[id="2"] .background-shapes::before {
    content: '';
    position: absolute;
    background: rgba(255, 255, 255, 0.2); /* 기존 transparent 대신 반투명 흰색 */
    border: 2px dotted #ffffff;
    border-radius: 50%;
    animation: sliderShape 4.5s linear infinite;
}

/* 두 번째 도형 */
section[id="2"] .background-shapes::after {
    content: '';
    position: absolute;
    width: 1000px;
    height: 1000px;
    top: 10%;
    right: 10%;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    animation: sliderShape 4.5s linear infinite;
}

/* 도형 변형 애니메이션 */
@keyframes sliderShape {
    0%, 100% {
        border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
        transform: translateY(0);
    }
    34% {
        border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%;
        transform: translateY(50px);
    }
    50% {
        transform: translateY(-50px);
    }
    67% {
        border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%;
        transform: translateY(80px);
    }
}



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

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

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

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

}


.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: 10px;
    /* 내부 여백 */
    gap: 10px;
    /* 이미지 간 간격 */
    flex-wrap: wrap;
    /* 화면 크기에 맞춰 이미지가 줄 바꿈 */
    width: 90%;
    /* 부모 컨테이너 너비에 맞게 확장 */
    max-width: 1200px;
    /* 최대 너비 제한 */
    background: none;

}

.image-gallery img {
    width: 90%;
    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(3px) brightness(80%);

}





.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: radial-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 ************* linear-gradient(45deg, #4ff1cb 15%, #014154),  *******************************************/
.nav {
    position: fixed;
    width: 100%;
    height: 100%;
    background: 
                url('../img/nav_bg2.png'); /* 이미지 추가 */
    background-size: cover; /* 이미지가 요소를 가득 채우도록 설정 */
    background-position: center; /* 중앙 정렬 */
    background-repeat: no-repeat; /* 반복 방지 */
    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: 180px;
    height: 180px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
    background-color: transparent; /* ✅ 배경 완전 제거 */
    box-shadow: none; /* 그림자 제거 */
    border: none; /* 테두리 제거 */
}

@media screen and (max-width: 900px) {
    .top-left-box {
        width: 100px;
      
    /* 컨테이너 너비에 맞게 조정 */
    }
}

/* 글라스 효과 레이어 */
.glass-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent !important;
    z-index: 1;
    pointer-events: none;
    backdrop-filter: none; /* ✅ 완전히 제거 */
}

/* 이미지 스타일 */
.top-left-box img {
    position: relative;
    z-index: 2;
    /* 글라스 효과 위로 배치 */
    max-width: 80%;
    /* 컨테이너 너비에 맞게 조정 */
    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.5);
    /* 반투명 배경 */
    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: #000000;
    /* 텍스트 색상 */
}

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

  .animated-bar {
    position: absolute;
    top: calc(24% - 30px); /* h6 태그 기준 위쪽에 위치 */
    left: 10%;
    transform: translateX(-50%);
    width: 60%;
    height: 2px;
    background-color: rgb(255, 255, 255);
    
}

@keyframes barAnimation {
    0% {
        width: 5%;
        animation-timing-function: ease-out; /* 빠르게 확장 */
    }
    30% {
        width: 100%;
        animation-timing-function: ease-in; /* 천천히 줄어듦 */
    }
    100% {
        width: 5%;
    }
}


.animated-bar2 {
    position: absolute;
    top: calc(24% - 30px); /* h6 태그 기준 위쪽에 위치 */
    left: 10%;
    transform: translateX(-50%);
    width: 60%;
    height: 2px;
    background-color: cyan;
    
}

@keyframes barAnimation {
    0%, 100% {
        width: 20%;
    }
    50% {
        width: 60%;
    }
}

.animated-bar3 {
    position: absolute;
    top: calc(24% - 30px); /* h6 태그 기준 위쪽에 위치 */
    left: 10%;
    transform: translateX(-50%);
    width: 60%;
    height: 2px;
    background-color: rgb(255, 0, 166);
    
}

@keyframes barAnimation {
    0%, 100% {
        width: 20%;
    }
    50% {
        width: 80%;
    }
}

.blank7 {
    position: relative;
    overflow: hidden;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.content-container10 {
    width: 90%;
    height: 50%;
    max-width: 1200px;
    text-align: center;
}

.section-title {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 20px;
    animation: none;
    margin-top: 0px;
}

.content-wrapper10 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px; /* 이미지와 텍스트 사이 간격 */
    z-index: 2; /* 텍스트나 이미지가 배경 위에 올 수 있도록 설정 */
}

.image-container {
    flex-basis: 20%;
    display: flex;
    justify-content: center;
}

.image-container img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

.text-container {
    flex-basis: 80%;
    text-align: left;
    font-size: clamp(0.6rem, 1.4vw, 1.0rem);
    line-height: 1.6;
}

/* 반응형 스타일 */
@media (max-width: 1024px) {
    .content-wrapper {
        flex-direction: column;
        text-align: left;
    }

   

    .image-container {
        display: none;
    }


    .text-container {
        flex-basis: 60%;
        text-align: left;
        font-size: clamp(0.5rem, 1.2vw, 0.8rem);
    }
}

.tab-icon {
    position: absolute;
    right: 40px;
    bottom: 40px;
    width: 300px;
    height: auto;
    z-index: 1000;
    transition: transform 0.3s ease;
     transform-origin: right bottom; /* 확대 기준을 오른쪽 아래로 설정 */
  }

  .tab-icon:hover {
  transform: scale(1.5); /* 150% 확대 */
}
  section {
    position: relative; /* 부모 요소 기준으로 배치 */
  }

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



  .h8-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 3열 고정 */
    gap: 10px; /* 박스 사이 간격 */
    justify-items: center; /* 개별 박스를 중앙 정렬 */
    align-items: start; /* 상단 정렬 */
    width: 100%;
    max-width: 1000px; /* 최대 너비 */
    margin: 10 auto; /* 중앙 정렬 */
}


.h8-box {
    display: flex;
    flex-direction: column; /* 요소들을 세로로 정렬 */
    justify-content: center; /* 세로 방향에서 중앙 정렬 */
    align-items: center; /* 가로 방향에서 중앙 정렬 */
    text-align: left; /* 내부 텍스트 중앙 정렬 */
    background: rgba(255, 255, 255, 0.7);
    padding: 10px;
    border-radius: 12px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    width: 100%; /* 부모 grid 크기에 맞게 자동 조정 */
    min-width: 100px; /* 최소 너비 */
    max-width: 450px; /* 최대 너비 제한 해제 */
    gap: 10px;
    margin: 5px;
    opacity: 0; /* 초기 상태에서 숨김 */
    transform: translateX(50px); /* 우측에서 시작 */
    animation: springIn 1s ease-out forwards; /* 스프링 효과 애니메이션 적용 */
}

.h8-box.visible {
    opacity: 1; /* 화면에 보일 때 */
    transform: translateX(0); /* 제자리로 돌아옴 */
}

/* 순차적으로 나타나는 애니메이션 (delay 적용) */
.h8-box:nth-child(1) {
    animation-delay: 1.6s;
}
.h8-box:nth-child(2) {
    animation-delay: 2.2s;
}


/* 스프링 효과 키프레임 */
@keyframes springIn {
    0% {
        transform: translateX(50px); /* 우측에서 시작 */
        opacity: 0; /* 처음에는 투명 */
    }
    40% {
        transform: translateX(-20px); /* 스프링 효과로 왔다가 */
    }
    60% {
        transform: translateX(15px); /* 다시 오른쪽으로 약간 움직임 */
    }
    100% {
        transform: translateX(0); /* 제자리로 돌아오기 */
        opacity: 1; /* 완전히 보이도록 설정 */
    }
}



.h8-box h3 {
    font-size: 1.4rem;
    color: #77077b;
    font-weight: 700;
    margin-bottom: 5px;
    margin-top: 15px;
    text-align: center;
}

.h8-box p {
    font-size: 1.0rem;
    font-weight: 500;
    color: #000000;
    line-height: 1.6;
    text-align: left;
}

.h8-footer {
    text-align: center;
    margin-top: 24px;
    font-size: 1.0rem;
    font-weight: 600;
    line-height: 1.2rem;
    color: #ffffff;
}

@media (max-width: 1024px) {
    .h8-container {
        grid-template-columns: repeat(1, 1fr); /* 한 줄에 하나씩 표시 */
    }

    .h8-box {
        max-width: 90%; /* 화면 크기에 맞게 자동 조정 */
        padding: 8px; /* 패딩 줄이기 */
    }

    .h8-box h3 {
        font-size: 1.2rem; /* 제목 크기 조정 */
    }

    .h8-box p {
        font-size: 0.8rem; /* 본문 크기 조정 */
        line-height: 1.5; /* 줄 간격 줄이기 */
        text-align: center;
    }
    .h8-footer {
        text-align: center;
        margin-top: 20px;
        font-size: 0.8rem;
        font-weight: 300;
        line-height: 1.2rem;
        color: #ffffff;
    }
    .small-image {
        display: none;
    }
}

@media (max-width: 768px) {
    .h8-box {
        max-width: 100%; /* 최대 너비를 더 줄이기 */
        padding: 4px; /* 패딩 더 줄이기 */
    }

    .h8-box h3 {
        font-size: 0.7rem; /* 제목 크기 더 작게 */
    }

    .h8-box p {
        font-size: 0.6rem; /* 본문 크기 더 작게 */
        line-height: 1.0; /* 줄 간격 조정 */
    }
    
}

.phone-number {
  font-size: 1.3em;       /* 글씨 크기 키움 */
  font-weight: 900;       /* 매우 굵게 */
  color: #ffffff; /* 예: 미나리의 녹색 계열 */
  letter-spacing: 0.5px;  /* 살짝 간격 줌 */
  display: inline-block;  /* 줄바꿈 시 여백 자연스럽게 */
  margin-top: 5px;
}
.muted a {
  text-decoration: none;
  color: inherit;
}

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

.image-container {
  overflow: hidden; /* 이미지가 밖으로 넘치지 않게 */
}

/* 처음에는 왼쪽으로 약간 이동 + 투명 상태 */
.slide-in {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 1s ease, transform 1.5s ease;
}

/* 화면에 나타날 때 활성화될 클래스 */
.slide-in.active {
  opacity: 1;
  transform: translateX(0);
}

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

/* 초기 상태 */
.slide-up {
  opacity: 0;
  transform: translateY(120px);
  transition: opacity 1s ease, transform 2.5s ease;
}

/* 화면에 보일 때 활성화 */
.slide-up.active {
  opacity: 1;
  transform: translateY(0);
}

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