/*-----------------------------------------------------------------------------------

    CSS INDEX
    ===================

    1. - FONTS

    2. - CUSTOMIZE THE CAROUSEL

    3. - RESPONSIVE

-----------------------------------------------------------------------------------*/


/* 1. - FONTS
-------------------------------------------------- */
@font-face {
    font-family: 'Dita Sweet';
    src: url('../font/DitaSweet/DitaSweet.eot');
    src: url('../font/DitaSweet/DitaSweet.eot?#iefix') format('embedded-opentype'),
        url('../font/DitaSweet/DitaSweet.woff2') format('woff2'),
        url('../font/DitaSweet/DitaSweet.woff') format('woff'),
        url('../font/DitaSweet/DitaSweet.ttf') format('truetype'),
        url('../font/DitaSweet/DitaSweet.svg#DitaSweet') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'DidotItalic';
    src: url('../font/DidotItalic/DidotItalic.eot');
    src: url('../font/DidotItalic/DidotItalic.eot?#iefix') format('embedded-opentype'),
        url('../font/DidotItalic/DidotItalic.woff2') format('woff2'),
        url('../font/DidotItalic/DidotItalic.woff') format('woff'),
        url('../font/DidotItalic/DidotItalic.ttf') format('truetype'),
        url('../font/DidotItalic/DidotItalic.svg#DidotItalic') format('svg');
    font-weight: normal;
    font-style: italic;
}

/* 2. - CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
    height: 98vh;
	
	
}
/* Carousel control position */
.carousel-control-next,
.carousel-control-prev {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    width: auto;
    transition: all .3s ease-in-out;
    opacity: 1;
    color: #fff;
}
.carousel-control-prev {
    left: 2rem;
}
.carousel-control-next {
    right: 2rem;
}
.carousel-control-next-icon,
.carousel-control-prev-icon {
    width: 1.5rem;
    height: 1.5rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
    padding: 0;
    bottom: 0;
    top: 0;
    display: flex;
    align-items: center;
    z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel-inner,
.carousel-item {
    height: 100%;
}
.carousel-item {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}
/* Carousel custom class */
.carousel-caption > .row {
    width: 100%;
}
.carousel-item-next .carousel-desc-ttl,
.carousel-item-prev .carousel-desc-ttl {
    transform: translateY(15px);
    opacity: 0;
    transition: transform .4s ease-in-out, opacity .4s ease-in-out;
}
.carousel-item-next .carousel-desc-txt,
.carousel-item-prev .carousel-desc-txt {
    transform: translateY(25px);
    opacity: 0;
    transition: transform .6s ease-in-out, opacity .6s ease-in-out;
}
.carousel-indicators [data-bs-target] {
    width: 12px !important;  /* 크기 고정 */
    height: 12px !important; /* 크기 고정 */
	margin-left: 5px;
    margin-right: 5px;
    background-color: transparent;
    border: 2px solid #666;
    border-radius: 50%;
}
.carousel-indicators {
    margin-bottom: 0;
    bottom: 4%;
}
.carousel-indicators .active {
    background-color: #fff;
	border-color: #666666 ;
}
.carousel-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    color: #dcdac1;
}
.carousel-desc-ttl {
    font-family: 'Dita Sweet';
    font-size: 3.8rem;
    line-height: 3.8rem;
    margin-bottom: 2.4rem;
    text-transform: uppercase;
    font-weight: 500;
}
.carousel-desc-txt {
    font-family: 'DidotItalic';
    font-size: 1.75rem;
    line-height: 1.75rem;
    font-weight: 500;
    padding-right: 4rem;
}
.carousel-desc-ttl,
.carousel-desc-txt {
    transform: translateY(0);
    opacity: 1;
    transition: transform .4s ease-in-out, opacity .2s ease-in-out;
}


/* 3. - RESPONSIVE
-------------------------------------------------- */

@media only screen and (max-width: 1500px) {
   


	.carousel {
    height: 60vh;
	
	
	}


}


@media only screen and (max-width: 1160px) {
    .carousel-caption {
        left: 10%;
        right: 10%;
    }


	.carousel {
    height: 60vh;
	
	
	}


}

@media only screen and (max-width: 992px) {
    .carousel-desc-ttl {
        font-size: 3rem;
    }
}

@media only screen and (max-width: 768px) {
    .carousel {
height: 30vh;
	transition: all 0.5s ease;
	
	}
	.carousel-caption {
        left: 0;
        right: 0;
        padding: 0 1rem;
    }
    .carousel-caption > .row {
        flex-direction: column-reverse;
    }
    .carousel-content {
        padding: 1rem 10%;
        max-width: 90%;
    }
    .carousel-desc-ttl {
        font-size: 2.5rem;
        line-height: 3rem;
        margin-bottom: 1.6rem;
    }
    .carousel-desc-txt {
        font-size: 1.5rem;
        padding-right: 0;
    }
}

@media only screen and (max-width: 600px) {
    .carousel-content {
        max-width: 100%;
    }
}

<!----------추가----------------->
 /* 기본 설정 */
    body, html {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      overflow-x: hidden;
    }

    .container {
      max-width: 100%;
      margin: 0 auto;
      position: relative;
    }

  

    /* 로고 이미지 스타일 */
    .logo {
      position: absolute;
      top: 4vw;
      left: 4vw;
      z-index: 10; /* 슬라이드보다 앞쪽에 위치 */
      transition: all 0.5s ease;
    }

    .logo img {
      width: clamp(80px, 200px, 200px;)
    }







    /* 반응형 설정 */

/*@media (max-width: 1920px) {
      .logo {
        top: 80px;
        left: 150px;
        transform: translateX(-50%);
      }

      .logo img {
        width: 180px;
      }
    }

	@media (max-width: 1160px) {
      .logo {
        top: 60px;
        left: 140px;
        transform: translateX(-50%);
      }

      .logo img {
        width: 140px;
      }
    }
*/
	
	@media (max-width: 768px) {
      .logo {
        top: 2vw;
      left: 15vw;
        transform: translateX(-50%);
      }

      .logo img {
        width: 80px;
      }
    }

    /* 본문 내용을 위한 여백 */
    .content {
      margin-top: 100vh; /* 슬라이드 높이만큼 본문 내용을 밑으로 밀기 */
      padding: 20px;
    }

	.copyright {font-size:clamp(0.65rem, 1.2vw, 1.2rem);text-align:center;line-height:160%;}


	/* 큰 해상도에서의 메뉴 스타일 */
    .menu {
      position: absolute;
      top: 128px;
      right: 4vw;
      z-index: 10;
      color: #666666; /* 큰 해상도에서 폰트 색상 */
      padding: 10px;
    }

    .menu ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
	  font-weight:700;
    }

    .menu ul li {
      margin-bottom: 10px;
    }

    .menu ul li a {
      color: #666666;
      text-decoration: none;
    }


/* 중간 해상도에서의 메뉴 스타일 */
    @media (max-width: 1160px) {
	.menu {
      position: absolute;
      top: 128px;
      right: 50px;
      z-index: 10;
      color: #666666; /* 큰 해상도에서 폰트 색상 */
      padding: 10px;
		}
	
	
	.product-button {
		  position: absolute;
		  bottom: 10px; /* 슬라이드 화면 기준 아래 여백 */
		  right: 10px; /* 슬라이드 화면 기준 오른쪽 여백 */
		  z-index: 10;
		  width:50px;
	 
		}
		.product-button img {100%}

	
	
	}

    /* 작은 해상도에서의 메뉴 스타일 */
    @media (max-width: 768px) {
      .menu {
        position: fixed;
        top: 0;
        right: -250px; /* 메뉴가 처음에는 숨겨진 상태 */
        width: 250px;
        height: 100%;
        background-color: rgba(68, 68, 68, 0.8); /* 배경색 #444444, 투명도 20% */
        color: white;
        transition: right 0.3s ease;
        z-index: 100;
        padding: 20px;
      }

      .menu ul li a {
        color: white; /* 작은 해상도에서 폰트 색상 */
		font-weight:700;
      }

      .menu.active {
        right: 0; /* 메뉴 버튼을 클릭하면 메뉴가 확장됨 */
      }


	

	  	



      /* 닫기 버튼 스타일 */
      .close-button {
        display: block;
        font-size: 20px;
        color: white;
        text-align: left;
        cursor: pointer;
        margin-bottom: 20px;
      }

      /* 3줄 메뉴 아이콘 (햄버거 메뉴) */
      .menu-button {
        display: block;
        position: fixed;
        top: 0px;
        right: 20px;
        z-index: 101; /* 메뉴보다 앞에 위치 */
        font-size: 30px;
        color: #666666;
        cursor: pointer;
      }
    }

    /* 큰 해상도에서는 메뉴 버튼 숨기기 */
    @media (min-width: 769px) {
      .menu-button {
        display: none;
      }
    
		 .close-button {
		display: none;}
	
	
	
	
	
	}


  

 /* button_product1 이미지 스타일 */
    .product-button {
      position: absolute;
	  bottom: 120px; /* 슬라이드 화면 기준 아래 여백 */
      right: 30px; /* 슬라이드 화면 기준 오른쪽 여백 */
      z-index: 10;
      width:20vw;
	  max-width:321px;
	 
 
    }
	.product-button2 {
      position: absolute;
	  bottom: 120px; /* 슬라이드 화면 기준 아래 여백 */
      right: 80px; /* 슬라이드 화면 기준 오른쪽 여백 */
      z-index: 10;
      width:20vw;
	  max-width:80px;
	 
 
    }

	.detail-button {
      position: absolute;
	  bottom: 120px; /* 슬라이드 화면 기준 아래 여백 */
      left: 80px; /* 슬라이드 화면 기준 오른쪽 여백 */
      z-index: 10;
      width:20vw;
	  max-width:162px;
 
    }

	
	   /* 해상도가 768px 이하일 때 여백 조정 */
    @media (max-width: 768px) {
      .product-button {
        bottom: 20px; /* 슬라이드 화면 기준 아래 여백 */
        right: 5px;  /* 슬라이드 화면 기준 오른쪽 여백 */
        width: 20vw;  /* 작은 해상도에서는 적절한 크기 조정 */
		 min-width:60px;
      }

	.product-button2 {
        bottom: 20px; /* 슬라이드 화면 기준 아래 여백 */
        right: 5px;  /* 슬라이드 화면 기준 오른쪽 여백 */
        width: 8vw;  /* 작은 해상도에서는 적절한 크기 조정 */
		 min-width:20px;
      }

		.detail-button {
        bottom: 30px; /* 슬라이드 화면 기준 아래 여백 */
        left: 10px;  /* 슬라이드 화면 기준 오른쪽 여백 */
        width: 20vw;  /* 작은 해상도에서는 적절한 크기 조정 */
		 min-width:80px;
      }

    }

/*사운드버튼*/
	#muteButton {
            font-size: 20px;
            cursor: pointer;
              background: none;
            border: none;
        }