/* 진료시간 --------------------------------------------------------------------- */
#section1 .inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
  align-items: center;
}

#section1 .title {
  font-family: 'pretendardBold';
}

#section1 .top_content {
  display: flex;
  gap: 20px;
}

#section1 .top_content .box {
  width: 450px;
  height: 180px;
  border: 1px solid #e5e5e5;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 15px;
  text-align: left;
  padding-left: 45px;
  letter-spacing: -1px;
}

#section1 .top_content .box .item {
  display: flex;
  gap: 15px;
  font-size: 24px;
  justify-content: center;
}

#section1 .top_content .box .item p {
  width: 250px;
}

#section1 .top_content .box .item .title {
  width: 140px;
}

#section1 .top_content .box.right {
  font-size: 22px;
  font-family: 'pretendardLight';
  line-height: 1.4;
}

#section1 .top_content .box.right .title {
  font-size: 24px;
}

#section1 .bottom_content {
  width: 920px;
  height: 180px;
  background-color: #f6f7f8;
  border-radius: 16px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: 50px auto;
}

#section1 .bottom_content .item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

#section1 .bottom_content .item:nth-child(-n + 7) {
  border-bottom: 1px solid #e5e5e5;
  font-size: 20px;
  color: #707070;
}

#section1 .bottom_content .item:nth-child(-n + 6) {
  border-right: 1px solid #e5e5e5;
}

#section1 .bottom_content .item:nth-child(n + 8):nth-child(-n + 13) {
  border-right: 1px solid #e5e5e5;
}

#section1 .bottom_content .item:nth-child(n + 8):nth-child(-n + 14) {
  color: #d99c61;
  font-family: 'pretendardBold';
  font-size: 28px;
  flex-direction: column;
}

#section1 .bottom_content .item:nth-child(n + 8):nth-child(-n + 14) span {
  font-size: 18px;
  font-family: 'pretendard';
}

#section1 .bottom_content .item .dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #d99c61;
}

#section1 .bottom_content .item.sat {
  gap: 8px;
}

#section1 .bottom_content .item.off {
  color: #c7c7c7 !important;
}

#section1 .bottom_content .item.off .dot {
  background-color: #c7c7c7;
}

/* 오시는길 (지도) ----------------------------------------------------------------- */

#section2 .inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-align: left;
  gap: 40px;
}

#section2 .contentArea .title {
  font-family: 'pretendardBold';
  font-size: 42px;
  margin-bottom: 30px;
}

#section2 .contentArea .desc {
  font-family: 'PretendardMedium';
  font-size: 24px;
}

#section2 .contentArea .desc span {
  font-family: 'PretendardLight';
}

#section2 .contentArea .travel_time_box {
  width: 700px;
  background-color: #f6f7f8;
  display: flex;
  gap: 40px;
  padding: 20px 30px;
  border-radius: 16px;
  font-size: 20px;
  font-family: 'PretendardLight';
  margin: 50px 0;
}

#section2 .contentArea .travel_time_box .item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#section2 .contentArea .tell {
  display: flex;
  align-items: center;
  gap: 15px;
}

#section2 .contentArea .tell span:first-child {
  font-size: 22px;
  font-family: 'PretendardMedium';
}

#section2 .contentArea .tell span:last-child {
  font-size: 36px;
  font-family: 'pretendardBold';
}

/* 지도 애니메이션 */

#mapArea {
  position: relative;
}

#location {
  position: absolute;
  top: 38%;
  left: 31%;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0); /* 처음과 끝은 원래 위치 */
  }
  50% {
    transform: translateY(5px); /* 중간에 위로 뛰기 */
  }
}

#mapArea.aos-animate .location_tag {
  animation: bounce 2s ease-in-out infinite;
}

#location svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes draw {
  from {
    stroke-dasharray: 0, 1000;
    stroke-dashoffset: 0;
  }
  to {
    stroke-dasharray: 1000, 0;
    stroke-dashoffset: 0;
  }
}

#location path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}

#location circle {
  display: none;
}

#mapArea.aos-animate path {
  animation: draw 2.5s ease-in-out forwards;
}

#mapArea.aos-animate circle {
  display: block;
}

#mapArea .nameTag {
  position: absolute;
  opacity: 0;
  transition: opacity .3s ease-in-out .8s;
}

#mapArea .nameTag.tag1 {
  top: 95px;
  left: 25px;
}

#mapArea .nameTag.tag2 {
  top: 200px;
  right: 50px;
}

#mapArea .nameTag.tag3 {
  bottom: 240px;
  right: 90px;
}

#mapArea .nameTag.tag4 {
  bottom: 350px;
  left: -60px;
}

#mapArea .nameTag.tag5 {
  bottom: 150px;
  left: 45px;
}

#mapArea.aos-animate .nameTag {
  opacity: 1;
}

/* 모바일 */

@media screen and (max-width:768px) {
  #mainBanner {
    margin-top: 100px;
  }

  #section1 .top_content {
    width: 100%;
    flex-direction: column;
  }

  #section1 .top_content .box {
    width: 100%;
    height: 160px;
    padding-left: 20px;
  }

  #section1 .top_content .box .item {
    font-size: 18px;
    justify-content: flex-start;
  }

  #section1 .top_content .box.right {
    font-size: 18px;
  }

  #section1 .top_content .box.right .title {
    font-size: 20px;
  }

  #section1 .top_content .box .item .title {
    width: 120px;
  }

  #section1 .bottom_content {
    width: 100%;
    height: 110px;
    grid-template-rows: 35px auto;
    border-radius: 6px;
  }

  #section1 .bottom_content .item:nth-child(-n + 7) {
    font-size: 12px;
  }

  #section1 .bottom_content .item:nth-child(n + 8):nth-child(-n + 14) {
    font-size: 14px;
  }

  #section1 .bottom_content .item:nth-child(n + 8):nth-child(-n + 14) span {
    font-size: 10px;
  }

  #section1 .bottom_content .item .dot {
    width: 8px;
    height: 8px;
  }

  #section2 .inner {
    flex-direction: column-reverse;
  }

  .contentArea {
    width: 100%;
  }

  #section2 {
    overflow: hidden;
    margin-top: 50px;
  }

  #section2 .contentArea .title {
    text-align: center;
    font-size: 28px;
    max-block-size: 20px;
  }

  #section2 .contentArea .desc {
    text-align: center;
    font-size: 16px;
    line-height: 1.5;
  }

  #section2 .contentArea .travel_time_box {
    width: 100%;
    flex-direction: column;
    gap: 10px;
    justify-content: space-between;
    font-size: 16px;
    border-radius: 6px;
  }

  #section2 .contentArea .tell {
    justify-content: center;
  }

  #section2 .contentArea .tell span:first-child {
    font-size: 16px;
  }

  #section2 .contentArea .tell span:last-child {
    font-size: 24px;
  }

  #mapArea {
    padding: 0 50px;
  }

  #mapArea .mapImg {
    width: 300px;
    transform: translateX(20px);
  }

  #mapArea.aos-animate .nameTag {
    height: 25px;
  }

  #mapArea.aos-animate .nameTag img {
    width: auto;
    height: 100%;
  }

  #mapArea.aos-animate .location_tag {
    height: 40px;
  }

  #mapArea .nameTag.tag1 {
    top: 45px;
    left: 85px;
  }

  #mapArea .nameTag.tag2 {
    top: 155px;
    right: 95px;
  }

  #mapArea .nameTag.tag3 {
    bottom: 140px;
    right: 80px;
  }

  #mapArea .nameTag.tag4 {
    left: 40px;
    bottom: 215px;
  }

  #mapArea .nameTag.tag5 {
    bottom: 95px;
    left: 70px;
  }

  #location {
    left: 40%;
  } 
}