@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

*{ font-family: 'GmarketSansMedium'; }

header.masthead{background-color:#FFF;background: white;}

.display-4{color:#000; text-align:left;}


/* 로고 이미지 크기 조정 */
.navbar-brand img {
  max-width: 120px; /* 원하는 너비로 조정 */
  height: auto; /* 비율을 유지하면서 높이 자동 조정 */
  display: block; /* 이미지를 중앙에 맞추기 위해 block 설정 */
}

/* 반응형 디자인 */
@media (max-width: 768px) {
  .navbar-brand img {
    max-width: 90px; /* 작은 화면에서는 로고 크기를 더 줄임 */
  }
}


h2{color:#000;}
p{color:#888;}
.section01 .display-4{text-align:left;font-weight:bold;text-shadow: 5px 5px 1px #bbbbbb;}

.section01{margin: 120px auto;}
section{margin-bottom:100px;}

.display-6{font-weight:bold;}


.image-container {
  width: 100%; /* 부모 요소의 너비에 맞춤 */
  height: 800px; /* 원하는 높이를 설정 */
  overflow: hidden; /* 컨테이너 밖으로 넘치는 부분 숨김 */
  /* position: relative; */
}

.section01 .image-container img {
  width: 100%; /* 너비를 100%로 설정 */
  height: 100%; /* 높이도 100%로 설정 */
  object-fit: cover; /* 가로/세로 비율을 유지하면서 양쪽을 자름 */
  object-position: center; /* 이미지를 수평/수직으로 중앙 정렬 */
}


.section03 .image-container img {
  width: 100%; /* 너비를 100%로 설정 */
  height: 100%; /* 높이도 100%로 설정 */
  object-fit: cover; /* 가로/세로 비율을 유지하면서 양쪽을 자름 */ 
  object-position: 80% center;
}


.section07 .image-container img {
  width: 100%; /* 너비를 100%로 설정 */
  height: 100%; /* 높이도 100%로 설정 */
  object-fit: cover; /* 가로/세로 비율을 유지하면서 양쪽을 자름 */
  object-position: 27% center;
}



.hero-section {
  position: relative;
  width: 100%;
  height: 500px; /* 섹션 높이 설정 */
  background-image: url('../img/06.jpeg'); /* 배경 이미지 경로 */
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 회색 반투명 오버레이 */
  z-index: 1;
}

.hero-text {
  position: relative;
  z-index: 2;
  color: #fff;
  text-align: center;
}

.hero-text h2 {
  font-size: 3rem;
  margin: 0;
  color:#FFF;
}

.hero-text p {
  font-size: 1.2rem;
  margin-top: 10px;
}

.diagonal-container {
  position: relative;
  width: 100%;
  height: 200px; /* 컨테이너 높이 */
  overflow: hidden; /* 텍스트가 벗어나도 보이지 않도록 설정 */
}

.diagonal {
  /* position: absolute; */
  width: 120%; /* 띠의 너비 */
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 2rem;
  color: white;
  text-transform: uppercase;
}

.diagonal.tiktok {
  background: #000;
  /* top: 30%; */ /* 첫 번째 띠 위치 */
  transform: rotate(0deg);
  left: -10%;
  background: url('../img/ttbg.png') center center no-repeat;
}
.diagonal.tiktok span{
  animation: slide-left 100s linear infinite; /* 슬라이드 애니메이션 */
}

.diagonal.bigolive {
  background: #00d8ff;
  /* bottom: 30%; */ /* 두 번째 띠 위치 */
  transform: rotate(0deg);
  left: -10%;
}
.diagonal.bigolive span{
  animation: slide 100s linear infinite; /* 슬라이드 애니메이션 */
}

/* 슬라이드되는 텍스트 */
.diagonal span {
  display: inline-block;
  white-space: nowrap; /* 텍스트가 줄 바뀌지 않게 설정 */ 
}

@keyframes slide {
  0% {
    transform: translateX(100%); /* 오른쪽에서 시작 */
  }
  100% {
    transform: translateX(-100%); /* 왼쪽으로 끝까지 이동 */
  }
}
@keyframes slide-left {
  0% {
    transform: translateX(-100%); /* 오른쪽에서 시작 */
  }
  100% {
    transform: translateX(100%); /* 왼쪽으로 끝까지 이동 */
  }
}








        .form-container {
            max-width: 500px;
            margin: auto;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
            background: #fff;
        }

        .form-container h2 {
            text-align: center;
            margin-bottom: 20px;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            /* font-weight: bold; */
            margin-bottom: 5px;
        }

        .form-group input[type="text"],
        .form-group input[type="tel"],
        .form-group input[type="date"],
        .form-group input[type="url"],
        .form-group input[type="file"],
        .form-group textarea,
        .form-group select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        .form-group input[type="radio"],
        .form-group input[type="checkbox"] {
            margin-right: 10px;
        }

        .form-group .radio-group,
        .form-group .checkbox-group {
            display: flex;
            gap: 20px;
            align-items: center;
        }

        .file-upload {
            border: 2px dashed #ccc;
            padding: 10px;
            text-align: center;
            border-radius: 5px;
        }

        .file-upload input[type="file"] {
            display: none;
        }

        .file-upload label {
            cursor: pointer;
            color: #555;
        }

        .form-group button {
            display: block;
            width: 100%;
            padding: 10px;
            background: #007bff;
            color: #fff;
            border: none;
            border-radius: 5px;
            font-size: 16px;
        }

        .form-group button:hover {
            background: #0056b3;
        }

        .consent {
            font-size: 0.9rem;
        }

        .consent a {
            color: #007bff;
            text-decoration: none;
        }

        .consent a:hover {
            text-decoration: underline;
        }


    .section {
      position: relative;
      width: 100%;
      height: 100vh; /* Full-screen height */
      background-image: url('../img/bg1.jpg'); /* Replace with your image path */
      background-size: cover;
      background-position: center;
    }

    .section .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    }

    .section .container {
      position: relative;
      max-width: 1280px; /* Fixed width */
      margin: 0 auto; /* Center align */
      height: 100%; /* Optional: To stretch container full height */
      display: flex; /* Optional: Flexbox for alignment */
      flex-direction: column;
      justify-content: flex-end; /* Align content to the bottom */
      color: #fff; /* White text */
	  z-index:2;
    }

    .section .content {
      margin-bottom: 20px; /* Add spacing from the bottom */
    }

    .section .content h1 {
      font-size: 36px;
      margin-bottom: 10px;
	  color: #fff; /* White text */
    }

    .section .content h2 {
      font-size: 24px;
      margin-bottom: 20px;
	  color: #fff; /* White text */
    }

    .section .content p {
      font-size: 16px;
      line-height: 1.5;
	  color: #fff; /* White text */
    } 



@media screen and (max-width: 425px) {
    /* 여기서 CSS 스타일을 정의 */
	.p-5{ padding: 1rem !important; }
	.image-container{height:400px;}
    .mobile-hide {
        display: none;
    }
}

.button-container {
  position: fixed;
  right: 20px; /* 오른쪽 가장자리로부터 10px */
  bottom: 10px; /* 하단으로부터 10px */
  z-index: 1000; /* 높은 z-index 값으로 설정 */
}

.fixed-button {
  background-color: #007BFF;
  background-image: url('../img/kakao_concat.png');
  background-size: cover;
  background-position: center;
  top: 50%; /* 상단으로부터 50% 위치에 배치 */
  /* transform: translateY(-50%); */ /* 버튼의 중앙이 컨테이너의 중앙에 위치하도록 조정 */
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  width: 160px;
  height: 280px;
  position: relative; /* Relative positioning within the container */
}

.close-button {
  background-color: #ff0000;
  color: white;
  border: none;
  border-radius: 50%; /* 원형 버튼 */
  cursor: pointer;
  width: 25px;
  height: 25px;
  line-height: 25px;
  position: absolute; /* Absolute positioning relative to the container */
  top: 0px; /* Position at the top-right of the fixed-button */
  right: 0px; /* Align to the right side */
  transform: translate(50%, -50%); /* Adjust position to slightly overlap over the fixed-button */
  z-index: 1001; /* Ensure it appears above the fixed-button */
}