@import url('https://fonts.googleapis.com/css2?family=Mrs+Saint+Delafield&display=swap');

@font-face {
    font-family: 'NanumSquareNeo';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.eot);
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.ttf) format("truetype");
}
       
    .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.4); /* 어두운 반투명 오버레이 */
      z-index: 1;
    }

    .banner {
      position: relative;
      height: 600px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: white;
      z-index: 2;
    }

    .banner-text h1 {
      font-size: 120px;
      color: white;
      margin-bottom: 10px;	  
	  font-family: "Mrs Saint Delafield", cursive;
	  letter-spacing: 0.1em;
    }

    .banner-text p {
      font-size: 20px;
      color: white;
	  font-family:'NanumSquareNeoBold', sans-serif;
    }

#typing {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInUp 1.8s ease-out forwards;
  animation-delay: 0.3s;
  white-space: nowrap;
}

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

    @media (max-width: 1024px) {
      .banner {
        height: 400px;
        padding: 20px;
      }

      .banner-text h1 {
        font-size: 40px;
      }

      .banner-text p {
        font-size: 15px;
      }
    } 


        /* [PC 설정] 가로 100% wrapper4 */
        .wrapper4 {
            width: 100%;
            background-color: #fff;
        }

        /* [PC 설정] 가로 1200px container4 */
        .container4 {
            max-width: 1200px;
            margin: 0 auto;
            background-color: #fff;
            padding: 50px 0px 0px 0px;
            text-align: center;
        }

        /* 텍스트 스타일 - PC 기준 */
        .highlight-text {
            font-weight: 700;
            font-size: 36px; /* PC 크기 */
            line-height: 1.4;
            margin-bottom: 50px;
        }

        .content-text {
            font-size: 18px; /* PC 크기 */
            color: #555;
            margin-bottom: 40px;
        }

        .bold-point {
            font-weight: 700;
            color: #000;
        }

        /* 로고 스타일 */
        .logo-area {
            margin: 60px 0;
        }

        .logo-img {
            width: 150px;
            height: 150px;
            object-fit: contain;
            transition: transform 0.3s ease, opacity 0.3s ease;
            cursor: pointer;
        }

        .logo-img:hover {
            transform: scale(1.1); /* 살짝 커짐 */
        }

        /* -------------------------------------------
           [태블릿 반응형] - 가로 1199px 이하
        ------------------------------------------- */
        @media (max-width: 1199px) {
            .container4 {
                width: 100%;
                padding-left: 10px;  /* 좌우 여백 10px */
                padding-right: 10px;
                padding-top: 50px;
                padding-bottom: 0px;
            }

            .highlight-text {
                font-size: 28px; /* 태블릿 맞춤 크기 */
            }

            .content-text {
                font-size: 17px; /* 태블릿 맞춤 크기 */
            }
        }

        /* -------------------------------------------
           [모바일 반응형] - 가로 767px 이하
        ------------------------------------------- */
        @media (max-width: 767px) {
            .container4 {
                padding-top: 50px;
                padding-bottom: 0px;
            }

            .highlight-text {
                font-size: 22px; /* 모바일 맞춤 크기 */
                margin-bottom: 30px;
            }

            .content-text {
                font-size: 15px; /* 모바일 맞춤 크기 */
                line-height: 1.7; /* 좁은 화면에서 줄간격 미세 조정 */
            }

            .logo-area {
                margin: 40px 0;
            }
        }
        }