.container.pad {
  padding: 0 3.1vw;
}
.d-flex-bottom {
  display: flex !important;
  flex-direction: column;
  justify-content: flex-end !important;
}

.branch-list .title {
  font-size: 2.45vw;

  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16% 0 8% 0;
  line-height: 160%;
}
.branch-list .title span {
  font-size: 1.57vw;
  color: white;
}

.card .card-img-top {
  width: 100%;
  border-radius: 9px 9px 0 0;
}
.card .card-body .title {
  font-size: 1.05vw;
  font-weight: 600;
  display: unset;
  padding: 2% 0;
}
.card .card-body th,
.card .card-body td {
  font-size: 0.94vw;
  line-height: 200%;
}
.card .card-body th {
  width: 6.5vw;
  display: flex;
  align-items: flex-start;
  font-weight: 400;
}
.card .card-body td {
  color: #585858;
  font-weight: 300;
}
.card .card-body .map {
  display: flex;
  justify-content: space-between;
}
.card .card-body .map .map-icon {
  border: #d2d2d2 1px solid;
  width: 4vw;
  height: 4vw;
  display: flex;
  border-radius: 100px;
  box-shadow: 0px 0px 6px -1px #0000002b;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: #7d7d7d;
}
.card .card-body .map .map-icon:hover {
  transform: scale(1.1);
  transition: 0.3s ease-in-out;
}
.card .card-body .map .map-icon .text {
  font-size: 0.73vw;
  color: #7d7d7d;
}

.contactbox-padding {
  padding: 7% 0;
}
.contactbox {
  display: flex;
  /* align-items: center; */
  text-decoration: none;
  color: black;
}
.contactbox:hover {
  transform: scale(1.1);
  transition: 0.3s ease-in-out;
}
.contactbox .img {
  width: 2.7vw;
  margin-top: 6px;
}
.contactbox .img img {
  width: 100%;
}
.borderright {
  border-right: 1px black solid;
}
.borderright-white {
  border-right: 1px rgb(255, 255, 255) solid;
}
.contactbox .text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 3%;
  font-size: 0.94vw;
  font-weight: 300;
  width: 100%;
}
.contactbox .text:hover {
  color: #000000;
}
.contactbox .text span {
  font-weight: 500;
}

.branch-list .allcard {
  padding: 2% 0 0 0;
}
.branch-list .card {
  margin: 9% 0 0 0;
  border-radius: 9px;
}
.branch-list .card-body .title {
  color: black;
}

.appointment-form {
  padding: 3% 0 6% 0;
}
.appointment-form .form-header {
  text-align: center;
  font-size: 1.57vw;
  font-weight: 500;
  padding: 0 0 2% 0;
  line-height: 165%;
}
.appointment-form .form-header span {
  color: #edc006;
  font-size: 1.57vw;
  font-weight: 500;
}
.appointment-form .form-header .greytext {
  color: #585858;
  font-size: 1.05vw;
  font-weight: 300;
}
.appointment-form .form-center {
  display: flex;
  justify-content: center;
}
.appointment-form form {
  width: 70%;
  padding: 4% 4% 3% 3%;
  border: 1px #e6e6e6 solid;
  border-radius: 15px;
  box-shadow: 0px 0px 4px 2px #e6e6e6;
}
.appointment-form label,
.form-title {
  font-size: 0.94vw;
  padding-top: 1.3vw;
  padding-bottom: 0.4vw;
}
.appointment-form label span,
.appointment-form .form-title span {
  font-size: 0.94vw;
  color: red;
}
.appointment-form .form-check label {
  padding: 0;
}
.appointment-form .form-check.accept {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 3% 0;
}
.appointment-form .form-check-label.accept {
  color: #585858;
  /* display: flex; */
}
.appointment-form .form-check-label.accept a {
  text-decoration: none;
  color: black;
}
.appointment-form .form-check-label.accept a:hover {
  text-decoration: none;
  color: #edc006;
  cursor: pointer;
  transition: 0.3s ease-in-out;
}
.appointment-form .acceptable {
  display: flex;
  justify-content: center;
  margin: 3% 0;
}
.appointment-form select option,
.appointment-form select,
.appointment-form .form-select option {
  font-size: 0.94vw;
}
.appointment-form .form-input input::placeholder {
  font-size: 0.94vw;
}
.appointment-form .form-input input {
  width: 100%;
  border: 1px #d4d4d4 solid;
  border-radius: 4px;
  padding: 0.3vw 0.6vw;
  font-size: 0.94vw;
}
.appointment-form .form-input.date input {
  width: 50%;
  border: 1px #d4d4d4 solid;
  border-radius: 4px;
  padding: 0.3vw 0.6vw;
  font-size: 0.94vw;
}
.recaptcha {
  display: flex;
  padding: 3% 0 0 0;
  justify-content: center;
}
.appointment-form .button {
  text-align: center;
}
.appointment-form .button .btn {
  font-size: 0.94vw;
  padding: 0.5% 4%;
}

.show-pc {
  display: block;
}
.show-mobile {
  display: none;
}

@media (max-width: 991px) {
  .show-pc {
    display: none;
  }
  .show-mobile {
    display: block;
  }

  .branch-list .title {
    font-size: 36px;
    padding: 85px 0 30px 0;
  }
  .branch-list .title span {
    font-size: 30px;
  }
  .allcard {
    padding: 9% 0 0 0;
  }
  .card {
    margin: 0 0 9% 0;
  }
  .card .card-body .title {
    font-size: 20px;
    font-weight: 600;
  }
  .card .card-body th {
    width: 26vw;
    font-size: 18px;
  }
  .card .card-body td {
    font-size: 18px;
  }
  .card .card-body .map {
    display: flex;
    justify-content: space-around;
  }
  .card .card-body .map .map-icon {
    width: 18vw;
    height: 18vw;
  }
  .card .card-body .map .map-icon .text {
    font-size: 14px;
  }

  .appointment-form .form-header,
  .appointment-form .form-header span {
    font-size: 25px;
  }
  .appointment-form .form-header .greytext {
    font-size: 17px;
  }
  .appointment-form form {
    width: 100%;
    padding: 5% 7%;
  }
  .appointment-form label,
  .appointment-form .form-title,
  .appointment-form label span,
  .appointment-form .form-title span,
  .appointment-form option,
  .appointment-form select,
  .appointment-form .form-input input,
  .appointment-form .form-input input::placeholder,
  .appointment-form .form-input.date input,
  .appointment-form .button .btn {
    font-size: 18px;
    padding: 2vw;
  }
  .appointment-form .form-check label {
    padding: 0 !important;
  }

  .appointment-form .form-input.date input {
    width: 100%;
  }
  .appointment-form .acceptable{
    display: block;
  }
}