/*** font ***/
@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Noto+Sans+KR&family=Orbitron:wght@700&display=swap');



* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Noto Sans CJK KR', sans-serif;
  font-size: 1em;

}

#myVideo {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover; /* 화면 채우되 비율 유지 */
  z-index: -1; /* 필요 시 다른 요소 뒤로 */
}

.content7 {
  position: fixed;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
  z-index: 100;
}

@media (max-width: 768px) {
  .content7 {
    font-size: 12px;
    /* 작아질 텍스트 크기를 지정합니다. */
  }
}

#myBtn {
  width: 200px;
  font-size: 18px;
  padding: 10px;
  border: none;
  background: #000;
  color: #fff;
  cursor: pointer;
}

#myBtn:hover {
  background: #ddd;
  color: black;
}

#header {
  text-align: center;
  background: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0);
  /* 글자 색상을 변경합니다. */
  padding: 10px;
  font-size: 16px;
  display: flex;
  /* 로고와 텍스트를 가로로 나란히 배치하기 위해 flex를 사용합니다. */
  font-size: 16px;
  position: fixed;
  /* 고정 위치 요소로 설정합니다. */
  top: 0;
  /* 화면 상단에 배치합니다. */
  left: 0;
  /* 화면 좌측에 배치합니다. */
  right: 0;
  z-index: 20;
  /* 다른 요소 위에 표시합니다. */
  backdrop-filter: blur(10px); /* 글라스 효과 핵심 */
  -webkit-backdrop-filter: blur(10px); /* 사파리 호환 */
  border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* 테두리 느낌 */
}

#header img {
  margin-left: 20px;
  width: clamp(150px, 20vw, 250px); /* 최소 120px, 최대 250px */
  /* 로고 이미지의 너비 조정 */
  margin-right: 15px;
  /* 로고와 텍스트 사이의 간격을 설정합니다. */
  z-index: 3;
  /* 다른 요소 위에 표시합니다. */
}


.menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 20;
}

.menu img {
  width: 10px;
  /* 로고 이미지의 너비 조정 */
  margin-right: 0px;
  /* 로고와 텍스트 사이의 간격을 설정합니다. */
}

.navbar {
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0);
  z-index: 20;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;

}

.sidebar {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.9);
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidebar a {
  padding: 30px 8px 8px 30px;
  text-decoration: none;
  font-size: 1.2em;
  color: #818181;
  display: block;
  transition: 0.3s;
  line-height: 130%;
  z-index: 20;
}

.sidebar a:hover {
  color: #f1f1f1;
  z-index: 20;
}

.sidebar .closebtn {
  position: absolute;
  top: 45px;
  right: 20px;
  font-size: 40px;
  margin-left: 40px;
}

.openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0);
  color: white;
  padding: 10px 15px;
  border: none;
  z-index: 20;
}

.openbtn:hover {
  background-color: #000000;
  color: yellow;
}

#main {
  transition: margin-left .5s;
  padding: 16px;
  z-index: 3;
  /* 다른 요소 위에 표시합니다. */
}

.container {
  display: contents;
  position: relative;
  min-width: 100%;
  max-width: 100%;
  justify-content: flex-start;
  margin: 4 auto;
  text-align: left;
  /* 내부 컨텐츠를 가운데 정렬 */
  border-radius: 14px;
  /* 이미지의 모서리를 10px로 라운드 처리 */
  padding: 4px;
  gap: 10px;

  opacity: 0;
  transform: translateY(50px);
  animation: fadeUp 1s ease-out forwards;
}

/* 화면에 나타나면 자연스럽게 올라오도록 설정 */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }

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

/* 화면에서 요소가 노출되도록 강제 트리거 (스크롤 없이) */
.container-wrapper:has(.container) .container {
  animation-delay: 0.3s;
  /* 애니메이션 지연시간 추가 */
}

.container-wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4개의 열 생성 */
  margin-top: 150px;
  margin-left: 40px;
  margin-right: 40px;
  display: flex;
  flex-wrap: wrap;
  /* 요소들이 가로로 나열되도록 설정 */
  justify-content: space-evenly;
  align-content: center;
  z-index: 1;
  gap: 20px;
  margin-bottom: 300px;
}

.border {
  height: 369px;
  width: 290px;
  background: transparent;
  border-radius: 10px;
  transition: border 1s;
  position: relative;
}

.border h2 {
  line-height: 0.4em;
}

.border h4 {
  line-height: 0.1em;
  position: relative;
  bottom: 20px;
  /* 하단에서 20px 간격을 둡니다. */
}

.border:hover {
  border: 0px solid white;
}

.card {
  height: 379px;
  width: 300px;
  background: #808080;
  border-radius: 10px;
  border-width: 2px;
  border-color: rgb(255, 255, 255);
  border-style: solid;
  transition: background 0.8s;
  overflow: hidden;
  background: #000;
  box-shadow: 0 70px 63px -60px #000;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 10;
  /* 다른 요소 위에 표시합니다. */
  text-decoration: none;
  /* 링크의 밑줄 제거 */
}

.card0 {
  background: url("./spopack1.jpg") center center no-repeat;
  background-size: 300px;
}

.card0:hover {
  background: url("./spopack2.jpg") left center no-repeat;
  background-size: 600px;
}

.card0:hover h2 {
  opacity: 1;
}

.card0:hover h4 {
  opacity: 1;
}

.card0:hover .fa {
  opacity: 1;
}

.card1 {
  background: url("./coskin1.jpg") center center no-repeat;
  background-size: 300px;
}

.card1:hover {
  background: url("./coskin2.jpg") left center no-repeat;
  background-size: 600px;
}

.card1:hover h2 {
  opacity: 1;
}

.card1:hover h4 {
  opacity: 1;
}

.card1:hover .fa {
  opacity: 1;
}

.card2 {
  background: url("./hygge1.jpg") center center no-repeat;
  background-size: 300px;
}

.card2:hover {
  background: url("./hygge2.jpg") left center no-repeat;
  background-size: 600px;
}

.card2:hover h2 {
  opacity: 1;
}

.card2:hover h4 {
  opacity: 1;
}

.card2:hover .fa {
  opacity: 1;
}

.card3 {
  background: url("./coptis1.jpg") center center no-repeat;
  background-size: 300px;
}

.card3:hover {
  background: url("./coptis2.jpg") left center no-repeat;
  background-size: 600px;
}

.card3:hover h2 {
  opacity: 1;
}

.card3:hover h4 {
  opacity: 1;
}

.card3:hover .fa {
  opacity: 1;
}

.card4 {
  background: url("./spicule1.jpg") center center no-repeat;
  background-size: 300px;
}

.card4:hover {
  background: url("./spicule2.jpg") left center no-repeat;
  background-size: 600px;
}

.card4:hover h2 {
  opacity: 1;
}

.card4:hover h4 {
  opacity: 1;
}

.card4:hover .fa {
  opacity: 1;
}

.card5 {
  background: url("./sani1.jpg") center center no-repeat;
  background-size: 300px;
}

.card5:hover {
  background: url("./sani2.jpg") left center no-repeat;
  background-size: 600px;
}

.card5:hover h2 {
  opacity: 1;
}

.card5:hover h4 {
  opacity: 1;
}

.card5:hover .fa {
  opacity: 1;
}

.card6 {
  background: url("./spopatch.jpg") center center no-repeat;
  background-size: 300px;
}

.card6:hover {
  background: url("./spopatch.jpg") left center no-repeat;
  background-size: 600px;
}

.card6:hover h2 {
  opacity: 1;
}

.card6:hover h4 {
  opacity: 1;
}

.card6:hover .fa {
  opacity: 1;
}

.card8 {
  background: url("./reyoung.jpg") center center no-repeat;
  background-size: 300px;
}

.card8:hover {
  background: url("./reyoung2.jpg") left center no-repeat;
  background-size: 600px;
}

.card8:hover h2 {
  opacity: 1;
}

.card8:hover h4 {
  opacity: 1;
}

.card8:hover .fa {
  opacity: 1;
}

h2 {
  font-family: 'Notos', Helvetica, Arial, sans-serif;
  color: #fff;
  margin: 20px;
  opacity: 0;
  transition: opacity 1s;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  /* 그림자 효과 추가 */
}

h4 {
  font-family: 'Notos', Helvetica, Arial, sans-serif;
  color: #fff;
  position: relative;
  top: 10px;
  /* 하단에서 10px 간격을 둡니다. */
  left: 20px;
  opacity: 0;
  font-weight: 400;
  line-height: 0.4em;
  transition: opacity 1s;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  /* 그림자 효과 추가 */
}


.fa {
  opacity: 0;
  transition: opacity 1s;
}

.icons {
  position: absolute;
  fill: #fff;
  color: #fff;
  height: 130px;
  top: 226px;
  width: 160px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-around;

}


/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 768px) {
  .card {
    height: 400px;
    width: 300px;
    overflow: hidden;
    box-shadow: 0 70px 63px -60px #000;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 19;
    /* 다른 요소 위에 표시합니다. */
  }
}



/* 미디어 쿼리 - 화면 너비가 768px 이하일 때 */
@media (max-width: 768px) {
  .slider-container {
    max-width: 400px;
    /* 원하는 최대 가로 너비를 줄임 */
    max-height: auto;
    /* 세로 높이는 자동 조정됨 */
  }

  .openbtn {
    font-size: 16px;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0);
    color: white;
    padding: 10px 15px;
    border: none;
  }
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 1280px) {

  .sidebar a {
    padding: 30px 8px 8px 30px;
    text-decoration: none;
    font-size: 0.9em;
    color: #818181;
    display: block;
    transition: 0.3s;
    line-height: 1px;
  }

  .content7 {
    position: fixed;
    font-size: 60%;
    font-weight: 200;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    color: #f1f1f1;
    width: 100%;
    padding: 20px;

  }
}

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