/* 글로벌 css */

@font-face {
  font-family: 'KimjungchulGothic-Light';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/KimjungchulGothic-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'KimjungchulGothic-Regular';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/KimjungchulGothic-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'KimjungchulGothic-Bold';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/KimjungchulGothic-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}




* {
  margin: 0;
  padding: 0;
  font-family: "KimjungchulGothic-Regular", "Noto Sans KR", sans-serif;
  color: #332E09;
  --color: #154a6d;
  box-sizing: border-box;
}

html {
  /* 반응형 폰트 (rem)세팅 */
  --font-size: 62.5%;
  /* 스크롤바 숨김_internet exploer */
  -ms-overflow-style: none;
}

/* 스크롤바 숨김_webkit: safari,chrome */
::-webkit-scrollbar {
  display: none;
}

body {
  /* 연회색 배경 */
  background-color: #F9FAFB;
}

.hiddencard {
  display: none;
}

.hidden {
  display: none;
}


/* 스크롤잠금 토글 css */
.scroll-lock {
  height: 100vh;
  overflow: hidden;
  touch-action: none;
}

a {
  text-decoration: none;
  color: black;
}


.boxs-wrapper {

  width: 100%;
  position: relative;

}




/* <<메뉴 버튼 */
.menu-button {
  --visibility: hidden;
  position: fixed;
  right: 0%;
  background-color: white;

  width: 10vmin;
  height: 10vmin;
  z-index: 4;
  bottom: 5%;

  border: 1px solid #d9d9d9;
  border-radius: 100%;
  padding: 2%;
  margin: 5%;

  /* 안에 있는 햄버거 아이콘 중앙 정렬 */
  display: flex;
  justify-content: center;
  align-items: center;

  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}


#menu-icon {
  font-size: 7vmin;
  color: #154a6d;
}

#home-icon {
  color: #f1ce5f;
}

/* 메뉴 버튼>> */


/* 모아보기 버튼*/
/* >>compition-button */
.compilation {

  position: fixed;
  right: 13%;
  background-color: white;

  width: 10vmin;
  height: 10vmin;
  z-index: 3;
  bottom: 5%;

  border: 1px solid #d9d9d9;
  border-radius: 20%;
  padding: 2%;
  margin: 5%;

  /* 안에 있는 햄버거 아이콘 중앙 정렬 */
  display: flex;
  justify-content: center;
  align-items: center;

  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}

.language-button {
  --visibility: hidden;
  position: fixed;
  right: 0%;
  background-color: white;

  width: 10vmin;
  height: 10vmin;
  z-index: 3;
  bottom: 13%;

  --border: 2px solid #f1ce5f;
  border-radius: 20%;
  padding: 2%;
  margin: 5%;


  /* 안에 있는 햄버거 아이콘 중앙 정렬 */
  display: flex;
  justify-content: center;
  align-items: center;

  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}

.compilation-button {
  --visibility: hidden;
  position: fixed;
  right: 0%;
  background-color: #154a6d;

  width: 10vmin;
  height: 10vmin;
  z-index: 3;
  bottom: 13%;

  border: 2px solid #f1ce5f;
  border-radius: 20%;
  padding: 2%;
  margin: 5%;


  /* 안에 있는 햄버거 아이콘 중앙 정렬 */
  display: flex;
  justify-content: center;
  align-items: center;

  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}

#language-icon {
  width: 7vmin;
  font-size: 6vmin;
  color: #154a6d;
  font-weight: bold;
}

/* 딤화면 */
.black-dimmed {
  padding: 3%;
  background-color: rgba(0, 0, 0, 0);
  backdrop-filter: blur(8px);
  /* 블러 효과를 적용합니다. */
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 3;

  transform: translateX(100vw);

  display: hidden;
  opacity: 0;

  transition: all 0.6s;


}

/* 딤화면 토글 */
.black-dimmed-toggle {
  transform: translateX(0px);
  background-color: rgba(0, 0, 0, 0.3);

  opacity: 1;

  display: flex;
  flex-direction: column;

  transition: all 0.3s;
}


/* <<사이드 바 */

.nav-bar {
  background-color: white;
  border-radius: 10px;
  /* 상,우,하,좌 */

  padding: 6%;
  padding-bottom: 5%;
  margin-bottom: 2%;

  overflow: scroll;

  transition: all 0.1s;
}


.menu-box {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  gap: 10px;

}

.menu-box.none-grid {
  display: block;

}

/* .menu-box> :last-child {
  grid-column: 1 / -1;
 
} */

.menu-card {
  box-sizing: border-box;
  --width: calc(100% / 2);
  aspect-ratio: 1 / 1;

  float: left;
  padding: 0;
  margin: 0;
  position: relative;

  border-radius: 10px;

  overflow: hidden;
}



@keyframes slidy {
  0% {
    left: 0%;
  }

  30% {
    left: 0%;
  }

  40% {
    left: -100%;
  }

  70% {
    left: -100%;
  }

  80% {
    left: -200%;
  }

  100% {
    left: -200%;
  }
}

.menu-card .img-box {
  width: 200%;
  margin: 0;
  display: flex;
  flex-direction: row;


  animation: 10s slidy infinite;

}




.menu-card .img-box .card-img {

  position: relative;
  top: 0;
  left: 0;
  width: 50%;

  border-radius: 0;
  border: 0px solid #d9d9d9;

}

.menu-card .img-box-nomove .test-img {

  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  border-radius: 0;
  border: 0px solid #d9d9d9;
  height: 100%;
  object-fit: cover;

}



.dim {
  z-index: 2;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.2);

  font-size: 6vw;
  color: white;
  font-weight: 600;

  display: flex;
  justify-content: end;
  align-items: end;

  padding-right: 2%;
}

.dim.darker {
  background-color: rgba(0, 0, 0, 0.5);
}

.qr-box img {
  border-radius: 10px;
  width: 96%;
  margin: 2%;
  max-height: 50vh;
  object-fit: cover;
}

.copyright p {
  margin: 0;
  margin-bottom: 5vh;
  font-size: 5vw;
}

/* 사이드 바>> */

/* 스크롤잠금 토글 css */
.scroll-lock {
  height: 100vh;
  overflow: hidden;
  touch-action: none;
}

.hidden-title {
  width: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}

.title-box {
  transition: all 1s ease;
  padding-bottom: 3%;
}


/* <<타이틀 바 */
.title-card-wrapper {
  /* 타이틀 바에 자체적으로 마진 적용 */
  padding: 3%;

  background-color: rgba(249, 250, 251, 0.8);
  backdrop-filter: blur(10px);

  position: sticky;
  top: 0;
  z-index: 2;

  transition: all 0.5s;
}

.title-card {
  background-color: white;
  border-radius: 10px;
  /* 카드 너비는 320px */

  /* 값이 두개일땐 상하,좌우 */
  padding: 1% 0;
  --margin-bottom: 2%;
  /* 전체 패딩값은 20인데 둘째 카드도 마진값20이여서 아래는 0으로 만듬*/

  /* 안에 들어가는 요소들 정렬*/
  display: flex;
  justify-content: center;
  align-items: center;

  --position: sticky;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, .08);
}

.kit-logo-img {
  width: 15%;
  padding-right: 10px;
}

.kit-logo-img.newlogo {
  width: 25%;
  padding-right: 2%;
}

.kit-logo-title {
  color: #154a6d;
  font-size: 7vw;
  --white-space: nowrap;
  font-weight: 700;
}

.kit-logo-img.text-logo {
  transform: translateY(-1px);
  width: 20%;
  margin-right: 2%;
  padding-right: 0;
}

/* 타이틀바>> */

/* << 검색바 */

/* #search-box로 변경됨 */

.short-cut {
  --border: 1px solid #154a6d;
  --border: 1px solid #597AB4;
  background-color: #e7f2ff;
  border-radius: 10px;
  text-align: center;
  font-size: 4vw;
  font-weight: bold;
  padding: 1% 0;
  margin-bottom: 2%;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.05);
}

.short-cut-img {

  border-radius: 10px;

  width: 8%;
  --margin-right: 1%;
  margin-left: 1%;
}

.short-cut p {
  display: flex;
  --padding: 0 6%;
  justify-content: center;
  align-items: center;
}

.remove-cache {
  border: 1px solid #154a6d;
  --border: 1px solid #597AB4;
  background-color: white;
  border-radius: 10px;
  text-align: center;
  font-size: 4vw;
  font-weight: bold;
  padding: 1% 0;
  --margin-bottom: 2%;
  margin-top: 2%;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.05);
}

.remove-cache p {
  display: flex;
  --padding: 0 6%;
  justify-content: center;
  align-items: center;
}

.material-symbols-outlined.short-cut-icon {
  font-size: 5vw;
}

#app {
  background-color: white;
  border-radius: 10px;

  padding: 0 6%;

  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: center;

  box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.05);

}

#search-box {
  background-color: white;
  border-radius: 10px;

  padding: 0 6%;

  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: center;

  margin-top: 3%;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, .08);

}



.selectbox {
  background-color: white;
  font-size: 4vw;
  height: 80%;
  width: 100%;

  --margin-bottom: 2%;
  border: none;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}

.inputbox {
  margin-left: 5%;
  display: flex;
  align-items: center;
  margin-bottom: 2%;
}

.input {
  width: 100%;
  flex-grow: 1;
  font-size: 5vw;
  font-weight: 500;
  border: 0;
  border-bottom: 1px solid #d9d9d9;
  --margin-bottom: 2%;
  --border-radius: 15px;
  outline: none;

  --background-color: rgb(233, 233, 233);
}

.input::placeholder {
  color: #d9d9d9;
}

#search-icon {
  font-size: 7vw;
}

/* 검색바 >> */

/* <<카드 */
.card-box {
  padding: 3%;
  padding-top: 0;
  position: relative;

  /* 맨 아래 부분 공백처리 위해 띄워준것 */
  margin-bottom: 10%;

  overflow-x: hidden;


}

.top-bar {
  background-color: white;
  border-radius: 10px;
  position: relative;
  transition: all 0.3s;

  margin-top: 2%;
  margin-bottom: 2%;
  padding: 2% 6%;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, .08);


}

.top-bar ul {
  list-style: none;
  margin: 0;
  padding: 0;

  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.top-bar ul li a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.top-bar ul li a span {
  font-size: 8vmin;
  height: 8vmin;
  --margin-bottom: 2%;
}

.top-bar ul li a img {
  width: 8vmin;
  height: 8vmin;

  /* filter: grayscale(50%); */
  /* filter: hue-rotate(30deg), grayscale(50%); */
}

.top-bar p {
  font-family: 'KimjungchulGothic-Regular';
  font-weight: 700;
  font-size: 4vw;
  margin: 0;
}

.strong-sub {
  font-size: 5vw;
}

.card {
  background-color: white;
  border-radius: 10px;
  padding: 6%;
  margin-bottom: 10%;
  position: relative;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, .08);
  transition: all 0.5s;


}

.card.main-card {
  border: 2px solid #f1ce5f;
}

/* 이미지 박스 */
.img-box {
  position: relative;
  margin-bottom: 3%;
}



.img-box-nomove {
  position: relative;
  margin-bottom: 3%;
}


.img-box::after {
  display: block;
  content: "";
  padding-bottom: 100%;
}

.img-box-nomove::after {
  display: block;
  content: "";
  padding-bottom: 100%;
}

.card-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #d9d9d9;
}

.card-img.border-line {
  object-fit: cover;
  border: 3px solid #f1ce5f;
}

.card-img.table-img {
  object-fit: contain;
}

.image-contain {
  object-fit: contain;
}

.label {
  /* 숨김처리 */
  display: none !important;

  margin: 0;
  margin-bottom: 2%;
  padding: 0;
  list-style-type: none;

  display: flex;
}

.label li {
  border-radius: 20px;
  border: 1px solid #f1ce5f;
  background-color: #fff0bd;
  font-size: 4vw;
  margin-right: 3%;
  padding: 1% 2%;
}

.hr-line {

  border: none;
  /* 기본 테두리를 없앱니다. */
  height: 0.1px;
  /* HR 태그의 두께를 지정합니다. */
  background-color: #b7ac5e;
  /* HR 태그의 배경색을 지정합니다. */


  margin-top: 3%;
}

.hr-line-toggle {


  height: 0px;



  margin-top: 3%;
}

.card-title {
  font-size: 5.5vw;
  font-weight: 600;
  word-break: keep-all;
  margin: 0;
  --margin-bottom: 3%;
}

.sub {
  font-size: 5vw;
  word-break: keep-all;
  margin: 0;
  margin-bottom: 3%;
}

/* 카드>> */
.grids {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  --grid-gap: 1%;

  transition: all 1s;
}

.item img {
  aspect-ratio: 1/1;
  --border: 1px solid #d9d9d9;
  --border-radius: 20px;
  width: 80%;
  max-height: 20vmax;
  /* 수정된 부분 */

  object-fit: contain;
}

.item {
  position: relative;

  border-bottom: 1px solid #d9d9d9;
  border-right: 1px solid #d9d9d9;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;

  flex-shrink: 0;
  /* 추가된 부분 */

  justify-content: center;
}

.item p {
  backdrop-filter: blur(5px);
  --position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.3);
  font-size: 4vw;
}

/* 모아보기 이식중 */

.box-hidden {

  width: 0 !important;
  height: 0 !important;
  overflow: hidden;
  position: absolute;
}


.toggle-on {

  transition: all 0.3s;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;

  width: 100%;
  height: auto;
}

.card-toggle {
  background-color: white;
  border-radius: 10px;
  padding: 6%;
  margin-right: 5%;
  margin-bottom: 5%;
  position: relative;
  transition: all 0.3s;
}

/*  label li */
.li-toggle {

  visibility: hidden;
  border-radius: 20px;
  border: 1px solid #f1ce5f;
  background-color: #fff0bd;
  font-size: 0 !important;
  margin-right: 3%;
  padding: 1% 1%;


}

/*card-title */
.card-title-toggle {
  font-size: 4vw;
  font-weight: 600;
  word-break: keep-all;
  margin: 0;
  --margin-bottom: 3%;
}

/* sub */
.sub-toggle {
  display: none;
}

/* ---------------------- */
/* 스플레쉬 */


.splash-box {
  background-color: #fff;

  opacity: 1;
  /* 초기에는 보이도록 설정 */
  display: flex;

  /* 트랜지션 효과 추가 (옵션) */
  transition: all 0.5s ease-in-out;




  position: fixed;
  overflow: hidden;

  width: 100%;
  height: 100vh;

  flex-direction: column;
  justify-content: center;
  align-items: center;

  z-index: 99;
}



.splash-logo {
  width: 60%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
}



.splash-logo img {
  width: 50%;
  object-fit: contain;
}

#rotate {
  width: 16%;
  animation-duration: 2s;
  animation-name: moveAnimation;

  animation-iteration-count: infinite;

  /* 3초마다 1회 애니메이션 적용 */
}

/* >>splash-title */
.logo-title {
  margin-top: 2%;
}

.splash-title {
  margin-top: 2%;
}

/* >>splash-title span*/
.logo-title span {
  font-size: 6vw;
  font-weight: 600;
}

.splash-title span {
  font-size: 6vw;
  font-weight: 600;
}


/* 오른쪽으로 움직임 */
@keyframes moveAnimation {

  0%,
  20% {
    transform: translateX(0) translateY(0) rotate(0deg);


    /* 0% 위치 */
  }

  40%,
  50% {

    transform: translateX(20%) translateY(-20%) rotate(45deg);
    /* 위로 10% 이동 */
  }

  60% {

    transform: translateX(20%) translateY(-20%) rotate(45deg) scale(1.15);
  }

  70% {
    transform: translateX(20%) translateY(-20%) rotate(45deg) scale(1.0);
  }



  100% {
    /* transform: translateX(20%) translateY(-20%) rotate(45deg); */
    transform: translateX(0) translateY(0) rotate(0deg);
    /* 0% 위치 */
  }
}



/* ---------------------- */
/* 상세페이지 */
#doggie {
  width: 80vw;
}

.notice {
  width: 90%;
}

.notice p {
  text-align: center;
  font-size: 5vw;
  font-weight: 500;
}

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

/* situation09 테이블 */
table {
  border-collapse: collapse;
  width: 100%;
  --margin: 20px auto;
  font-size: 3vw;
}

table,
th,
td {
  border: 1px solid black;
}

th,
td {
  padding: 2vw;
  text-align: center;
}

th {
  background-color: #f2f2f2;
}

td:first-child,
th:first-child {
  background-color: #f2f2f2
    /* 첫 번째 열 배경색 */
}

@media screen and (min-width: 500px) {



  .boxs-wrapper {
    position: relative;
    max-width: 500px;
    margin: 0 auto;
    /* 이걸 히든 처리하면 sticky가 작동안됨 */
    --overflow: hidden;
  }

  .dim {



    font-size: 1.8rem;
    color: white;

  }

  .kit-logo-title {
    font-size: 2.2rem;
  }

  .selectbox {
    font-size: 1.3rem;
  }

  .input {
    font-size: 1.5rem;
  }

  #search-icon {
    font-size: 2rem;
  }

  .top-bar ul li a span {
    font-size: 2.3rem;
    height: auto;
  }

  .top-bar p {
    font-size: 1.2rem;
  }

  .label li {
    font-size: 1rem;
  }

  .li-toggle {
    visibility: visible;
    font-size: 0.5rem !important;
  }

  .card-title {
    font-size: 1.5rem;
  }

  .card-title-toggle {
    font-size: 1.2 rem;
  }

  .sub {
    font-size: 1.5rem;
  }

  .buttons {
    position: fixed;
    display: flex;
    right: 10%;
    bottom: 10%;
    z-index: 5;
  }

  .menu-button {
    position: relative;
    width: 1.5rem;
    height: 1.5rem;

    padding: 1.5rem;



  }

  #menu-icon {
    font-size: 1.5rem;
  }

  .language-button {
    position: relative;
    width: 1.5rem;
    height: 1.5rem;

    padding: 1.5rem;



  }


  .compilation-button {
    position: relative;
    width: 1.5rem;
    height: 1.5rem;

    padding: 1.5rem;



  }


  #language-icon {
    font-size: 1.9rem;
    max-width: 35px;
  }

  /* 사이드바 */
  .black-dimmed {
    width: 100%;
    max-width: 500px;
    padding: 1rem;

    transform: translateX(250px);
    z-index: 3;
    pointer-events: none;
  }

  .black-dimmed-toggle {
    transform: translateX(0px);
    pointer-events: auto;

  }



  .copyright p {
    font-size: 1.1rem;
  }

  .splash-box {
    max-width: 500px;

  }

  .splash-logo img {
    width: 8rem;

  }

  #rotate {
    width: 2.5rem;

  }

  .splash-title span {
    font-size: 1.6rem;
  }

  #doggie {
    width: 100%;
  }

  .notice p {
    margin: 10% 0;
    font-size: 1.4rem;

  }

  /* 상세페이지 css 수정 */
  .strong-sub {
    font-size: 1.5rem;
  }

  .item p {
    font-size: 1.5rem;
  }


  th {
    font-size: 1.0rem;
    padding: 10px;
  }

  td {
    font-size: 1.0rem;
    padding: 10px;
  }

  .short-cut {

    font-size: 1.2rem;
  }

  .remove-cache {

    font-size: 1.2rem;
  }
}