/*new*/
.ContentsImgIssuePhoto {
  height: 70%;
}

#couplenamecontainer {
  width: 100%;
  margin: 1% 0 1% 0;
}

#MainTextContainer {
  margin: 10% 0;
}

#weddingDesc {
  /* padding: 60px 20px 0px 20px; */
}

.couple {
  text-align: center;
}

#titleInfo {
  font-size: 17px;
  /* line-height: 1.7rem; */
  font-weight: 400;
  text-align: center;
  margin: 0 0 10% 0;
}

#dash {
  width: 55px;
  height: 1px;
  background-color: black;
  margin: 10px auto;
}

#coverdisc {
  margin: 10% 0 5% 0;
  line-height: 3rem;
  text-align: center;
}

#coverdiscInfo {
  font-size: 13px;
}

#parentInfo {
  margin: 2% 0 2% 0;
  text-align: center;
}

#gallerySection {
  background-color: #fcf3e9;
}

#gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 5px;
  background-color: #fcf3e9;
  /* (A2) OPTIONAL WIDTH RESTRICT */
  max-width: 1000px;
  margin: 0 auto;
  overflow: hidden;
  /* padding-bottom: 50px; */
}

/* (B) GALLERY IMAGES */
#gallery img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

/* (E) FULLSCREEN MODE */
#gallery img.full {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100vw;
  height: 100vh;
  object-fit: contain;
  background: rgba(0, 0, 0, 0.7);
}

#gallery img.full:hover {
  z-index: 999;
  transform: none;
}

#showMoreBtn {
  background-color: #ffe08c;
  width: 70px;
  text-align: center;
  margin: 7% auto;
  /* 좌우 중앙 정렬을 위해 auto 값을 사용합니다. */
  display: block;
  /* 버튼을 블록 요소로 만들어야 좌우 중앙 정렬이 적용됩니다. */
  border-radius: 15px;
}

#collapseBtn {
  background-color: #ffe08c;
  width: 70px;
  text-align: center;
  margin: 7% auto;
  /* 좌우 중앙 정렬을 위해 auto 값을 사용합니다. */
  display: block;
  /* 버튼을 블록 요소로 만들어야 좌우 중앙 정렬이 적용됩니다. */
  border-radius: 15px;
}

#calendarSection {
  background-color: dodgerblue;
}

#countdown {
  height: 140px;
  text-align: center;
  background-color: #eddfd3;

  table {
    width: 65%;
    font-size: 1rem;

    th {
      font-weight: normal;
    }

    tr {
      height: 30px;
    }
  }
}

#countdownInfo {
  margin-top: 30px;
  font-size: 16px;
  font-weight: 400;
}

.countdownTimeUnit {
  font-size: 16px;
  text-align: center;
  margin-top: 5%;
  margin: 0 20px;
  font-weight: 200;
}

.countdownTimeSub {
  font-size: 16px;
  margin: 0 27px;
  /* 간격 조정 */
  font-weight: 300;
}

.countdownTimeInfo {
  color: #6799ff;
}

#weddingHallCallInfo {
  margin: 20% 0 2% 0;
  text-align: center;
}

#weddingHallCallButton img {
  margin-right: 10px;
  /* 이미지와 전화번호 사이의 간격을 조정할 수 있습니다. */
}

#weddingHallCallButton {
  padding: 5px 15px 5px 15px;
  /* 버튼 내부의 여백을 조정합니다. */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 150px;
  border-radius: 15px;
  border: 0.5px solid black;
  /* 테두리 스타일을 설정합니다. */
  background-color: transparent;
  /* 배경을 투명하게 설정합니다. */
}

#mapContainer {
  background-color: #eaeaea;
  height: 300px;
  position: relative;
  /* 상대 위치 지정 */
}

#locationSection {
  background-color: #eaeaea;
  height: 260px;
}

#map {
  width: 100%;
  height: 100%;
  /* 부모 요소에 대해 100%의 높이를 가지도록 설정합니다. */
}

main {
  /* padding-bottom: 2rem; */
  width: 100%;
  height: 100%;
}

#locationMoveSection {
  background-color: #eaeaea;
  /* height: 450px; */
  display: flex;
  flex-direction: column;
  /* 요소들을 수직으로 정렬합니다. */
  align-items: center;
  /* 요소들을 수평으로 정렬합니다. */
}

#locationMoveBox {
  padding: 15px;
  margin-top: 3%;
  width: 300px;
  height: 100px;
  text-align: center;
  background-color: white;
  justify-content: center;
  align-items: center;
}

#locationMoveTitleInfo {
  font-weight: 500;
  font-size: 13px;
  line-height: 2rem;
}

#locationMoveInfo {
  font-size: 10px;
}

#accountNumberSection {
  background-color: white;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.accordion {
  background-color: #eddfd3;
  color: black;
  cursor: pointer;
  padding: 0.8rem;
  width: 100%;
  transition: 0.4s;
  margin: 1rem 0 0 0;
  display: flex;
  justify-content: space-between;
  /* 내용을 좌우로 분산 정렬 */
  align-items: center;
}

#centerText {
  margin-left: auto;
  /* 왼쪽 여백을 auto로 설정하여 가운데 정렬 */
  margin-right: auto;
  /* 오른쪽 여백을 auto로 설정하여 가운데 정렬 */
}

#accountNumberTitleInfo {
  text-align: center;
  font-size: 20px;
  font-weight: 500;
}

.total-button-container {
  margin-top: 5%;
}

.button-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* 2열로 그리드를 설정합니다. */
  grid-gap: 10px;
  /* 그리드 간격을 조절합니다. */
}

#snsButton {
  background-color: #ffffff;
  /* border: 1px solid #cccccc; */
  padding: 10px;
  text-align: center;
  width: 100%;
}

/* 그리드 아이템의 스타일을 설정합니다. */
.shareKt,
.shareKs,
.shareFb,
.shareTwoG {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.panel {
  padding: 8px 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

.maplink {
  display: inline-block;
}

#MapIconDiv {
  text-align: center;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 가로 가운데 정렬을 위한 align-items 속성 추가 */
  margin: 0 auto;
}

#kakaoMapButton {
  padding: 10px;
  text-align: center;
  width: auto;
  /* 이미지와 텍스트 크기에 따라 너비 조정 */
  display: flex;
  /* 이미지와 텍스트를 한 줄로 나란히 정렬하기 위해 flex로 설정 */
  align-items: center;
  /* 세로 가운데 정렬을 위한 align-items 속성 추가 */
  justify-content: center;
  /* 가로 가운데 정렬을 위한 justify-content 속성 추가 */
}

/*old*/
/* html {
  font-size: 16px;
  font-weight: 400;
  color: #222222;
}
body {
  margin: 0;
} */
/* h2 {
  font-size: 1.9rem;
  letter-spacing: 0.1rem;
  text-align: center;
  margin: 0;
  padding: 0px 0px 12px 0px;
  font-weight: 500;
}
h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #528b37;
}

h6 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 8px 0;
} */
/* p {
  font-size: 1rem;
  margin: 5px 0;
  word-break: keep-all;
  color: #333333;
}
.couplename {
  font-size: 1.2rem;
  letter-spacing: 0.1rem;
} */
/* .family {
  font-size: 1.2rem;
  font-weight: 500;
}
.familyname {
  text-align: center;
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 5px; */
/* } */
/* span {
  font-size: 0.85rem;
  font-weight: 500;
} */
/* a:link,
a:visited {
  color: #444444;
}
a:hover {
  font-weight: 700;
}
a {
  text-decoration: none;
}
* {
  box-sizing: border-box;
}
ul {
  padding: 0 0 0 1rem;
  list-style-type: disc; */
/* list-style: red; */
/* } */

/* li {
  margin-bottom: 0.4rem;
}
li::marker {
  color: #528b37;
}
#closing {
  margin: 1.5rem 0;
  font-size: 1.2rem;
  font-weight: 500;
  text-align: center;
}
#closingname {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
} */

/* style */

/* .artboard {
  width: 900px;
  margin: 0 auto;
  font-family: "Noto Serif KR", serif;
}

.ContentsImgLandscape {
  position: absolute;
  top: 0;
  left: 0;
  max-height: 100%;
  height: auto;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.ContentsImgCentered {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-transform: translate(50%, 50%);
  -ms-transform: translate(50%, 50%);
  transform: translate(50%, 50%);
} */

/* .familynamecontainer {
  width: 100%;
}
#familysection {
  background-color: #f4f4f3;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

section {
  padding: 2rem 8rem;
} */

/* .couple {
  width: max-content;
  margin: 0 auto;
}


.mapicon {
  width: 100%;
  margin: 0 1rem 0 0;
}
.maplink {
  display: inline-block;
} */

/* .active,
.accordion:hover {
} */
/* .MapIconContainer {
  width: 200px;
  background-color: #eaeaea;
  height: 50px;
  padding: 0;
  margin: 0 1rem 0 0;
  border-radius: 50px;
} */

@media (max-width: 960px) {
  .artboard {
    width: 100%;
    /* font-size: 16px; */
  }

  #issueTextBox {
    margin: 0px 10% 18px 0px;
  }
}

@media (max-width: 500px) {
  html {
    font-size: 15px;
    /* padding: 0 15px; */
  }

  h2 {
    font-size: 1.7rem;
  }

  section {
    padding: 2rem 2rem;
    text-align: center;
  }

  #gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 375px) {
  html {
    font-size: 14px;
    /* padding: 0 15px; */
  }
}