.video {
  background-color: transparent;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100vw;
  height: 100vh;
}

.video .div-2 {
  width: clamp(320px, 100vw, 393px); /* 393px → 화면 폭의 100% */
  height: calc(var(--vh, 1vh) * 100); /* 뷰포트 높이 동적 설정 */
  position: relative;
}

.video .overlap-group-2 {
  position: absolute;
  width: clamp(300px, 96.7vw, 380px); /* 380px → 화면 폭의 96.7% */
  height: clamp(200px, 70.5vw, 277px); /* 277px → 화면 대비 비례 */
}

@media (min-height: 400px) {

.video .overlap-group-2 {
  position: absolute;
  width: clamp(300px, 96.7vw, 380px); /* 380px → 화면 폭의 96.7% */
  height: clamp(200px, 70.5vw, 277px); /* 277px → 화면 대비 비례 */
  bottom: 5%;
}
}

@media (min-height: 700px) {

.video .overlap-group-2 {
  position: absolute;
  width: clamp(300px, 96.7vw, 380px); /* 380px → 화면 폭의 96.7% */
  height: clamp(200px, 70.5vw, 277px); /* 277px → 화면 대비 비례 */
  bottom: 5%;
}
}

@media (min-height: 800px) {

.video .overlap-group-2 {
  position: absolute;
  width: clamp(300px, 96.7vw, 380px); /* 380px → 화면 폭의 96.7% */
  height: clamp(200px, 70.5vw, 277px); /* 277px → 화면 대비 비례 */
  bottom: 5%;
}
}

.video .camera-product-name {
  position: absolute;
  width: clamp(300px, 96.7vw, 380px); /* 380px → 화면 폭의 96.7% */
  height: clamp(160px, 56vw, 220px); /* 220px → 화면 대비 비례 */
  top: 0;
  left: 0;
}

.video .product-description {
  position: absolute;
  width: clamp(150px, 56.5vw, 222px); /* 222px → 화면 폭의 56.5% */
  height: clamp(30px, 12.7vw, 50px); /* 50px → 화면 대비 비례 */
  top: clamp(70px, 24.4vw, 96px); /* 96px → 화면 대비 비례 */
  left: clamp(50px, 18.6vw, 73px); /* 73px → 화면 대비 비례 */
  text-shadow: 1px 2px 4px #9a000040;
  font-family: "Gotham Medium-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: clamp(16px, 6.1vw, 24px); /* 24px → 화면 대비 비례 */
  text-align: center;
  letter-spacing: clamp(-0.9px, -0.31vw, -1.20px); /* -1.20px → 화면 대비 비례 */
  line-height: clamp(18px, 6.6vw, 26px); /* 26.0px → 화면 대비 비례 */
}

.video .record-button {
  position: absolute;
  width: clamp(80px, 27vw, 106px); /* 106px → 화면 폭의 27% */
  height: clamp(80px, 27vw, 106px); /* 106px → 화면 대비 비례 */
  top: clamp(130px, 43.5vw, 171px); /* 171px → 화면 대비 비례 */
  left: clamp(100px, 33.3vw, 131px); /* 131px → 화면 대비 비례 */
  background-color: #f4f4f4;
  border-radius: clamp(40px, 13.5vw, 52.96px); /* 52.96px → 화면 대비 비례 */
}

.video .ellipse {
  position: relative;
  width: clamp(30px, 11.5vw, 45px); /* 45px → 화면 폭의 11.5% */
  height: clamp(30px, 11.5vw, 45px); /* 45px → 화면 대비 비례 */
  top: clamp(25px, 7.9vw, 31px); /* 31px → 화면 대비 비례 */
  left: clamp(25px, 7.9vw, 31px); /* 31px → 화면 대비 비례 */
  background-color: #d93636;
  border-radius: clamp(15px, 5.7vw, 22.3px); /* 22.3px → 화면 대비 비례 */
}

.video .vertical-logo {
  position: absolute;
  width: clamp(180px, 58.3vw, 229px); /* 229px → 화면 폭의 58.3% */
  height: clamp(25px, 7.9vw, 31px); /* 31px → 화면 대비 비례 */
  top: clamp(50px, 16vw, 63px); /* 63px → 화면 대비 비례 */
  left: clamp(60px, 20.9vw, 82px); /* 82px → 화면 대비 비례 */
  background-image: url(./img/logo.png);
  background-size: cover;
  background-position: 50% 50%;
}