
.map-container {
  width: 84%;
  padding-left: 8%;
  padding-right: 8%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: rgb(254, 254, 254);
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.map-box {
  width: 47%;
  padding: 0px;
  box-shadow:
    0px 0px .1563rem rgba(0, 0, 0, 0.044),
    0px 0px .5313rem rgba(0, 0, 0, 0.066),
    0px 0px 2.375rem rgba(0, 0, 0, 0.11)
  ;
  padding: .75rem !important;
}

.map {
  width: 100%;
  height: 28rem;
}

.map-info {
  width: 47%;
}

.map-info-title {
  font-size: 1.625rem;
  color: rgb(51, 51, 51);
  line-height: 1.2;
  font-weight: bold;
  padding-bottom: .25rem;
}

.map-info-title-en {
  font-size: 1.125rem;
  color: rgba(236, 56, 1, 0.4);
  line-height: 1.2;
  border-bottom: .0625rem solid rgb(216, 216, 216);
  padding-bottom: .75rem;
  margin-bottom: 3rem;
}

.map-info-item {
  margin-bottom: .5rem;
}

.map-info-item-icon {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.map-info-item-icon > i {
  font-size: 1.5rem;
  margin-right: .75rem;
  color: rgb(111, 111, 111);
}

.contact-info-item-title {
  font-size: 1rem;
}

.contact-info-item-title > span {
  color: rgb(51, 51, 51);
  cursor: pointer;
  font-weight: bold;
}

.contact-info-item-title > span:hover {
  font-weight: bold;
}

.amap-info {
  width: 35rem;
}

.amap-info-content {
  color: white;
  background-color: rgb(254, 108, 34);
}

.amap-info-sharp {
  border-top: .5rem solid rgb(254, 108, 34) !important;
}

@media screen and (max-width: 1920px) { 
  .map-container {
    padding-top: 100px;
    padding-bottom: 100px;
  }
  
  .map-box {
    box-shadow:
      0px 0px 2.5px rgba(0, 0, 0, 0.044),
      0px 0px 8.5px rgba(0, 0, 0, 0.066),
      0px 0px 38px rgba(0, 0, 0, 0.11)
    ;
    padding: 15px !important;
  }
  
  .map {
    height: 500px;
  }
  
  .map-info-title {
    font-size: 32px;
    padding-bottom: 4px;
  }
  
  .map-info-title-en {
    font-size: 20px;
    border-bottom: 1px solid rgb(216, 216, 216);
    padding-bottom: 16px;
    margin-bottom: 50px;
  }
  
  .map-info-item {
    margin-bottom: 10px;
  }

  .map-info-item-icon > i {
    font-size: 28px;
    margin-right: 16px;
  }
  
  .contact-info-item-title {
    font-size: 18px;
  }
}

@media screen and (max-width: 1200px) { 
  .map-container {
    flex-wrap: wrap;
  }
  
  .map-box {
    width: 100%;
    margin-bottom: 30px;
  }

  .map-info {
    width: 100%;
  }
  
}
.contactus-container {
  width: 80%;
  padding-left: 10%;
  padding-right: 10%;
  padding-top: 5rem;
  padding-bottom: 6.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgb(249, 251, 254);
}

.contactus-title {
  font-size: 2.5rem;
  font-family: "SourceHanSansSC";
  color: rgb(51, 51, 51);
  font-weight: bold;
  margin-bottom: 5rem;
}

.contactus-title > span {
  color: rgb(253, 115, 32);
}

.contactus-box {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 80%;
}

.contactus-input-box {
  width: 45%;
  display: flex;
  flex-direction: column;
  margin-bottom: 3.5rem;
}

.contactus-textarea-container {
  width: 100%;
}

.contactus-submit-btn {
  display: inline-block;
  width: 11.5rem;
  height: 3.5rem;
  background-color: rgb(253, 115, 32);
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  cursor: pointer;
  user-select: none;
  font-size: 1rem;
}

.contactus-label {
  font-size: .875rem;
  font-family: "SourceHanSansSC";
  color: rgb(102, 102, 102);
  margin-bottom: 1rem;
}

.contactus-editbox-box {
  height: 3.5rem;
  width: 100%;
  position: relative;
}

.contactus-editbox {
  height: 3.5rem;
  width: 100%;
  padding-left: 4%;
  border: 1px solid rgb(230, 230, 230);
  background-color: rgb(255, 255, 255);
  font-size: 1rem;
}

.contactus-textarea-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 3.5rem;
}

.contactus-textarea-box {
  height: 15.625rem;
  width: 100%;
  position: relative;
}

.contactus-textarea {
  height: 15.625rem;
  width: 100%;
  padding: 1.3%;
  padding-left: 2%;
  border: 1px solid rgb(230, 230, 230);
  background-color: rgb(255, 255, 255);
  font-size: 1rem;
}

@media screen and (max-width: 1200px) {
  .contactus-title {
    font-size: 4rem;
  }

  .contactus-input-box {
    width: 100%;
  }

  .contactus-label {
    font-size: 1.5rem;
  }

  .contactus-editbox-box {
    height: 5rem;
  }

  .contactus-editbox {
    height: 5rem;
    font-size: 1.5rem;
  }

  .contactus-textarea {
    width: 100%;
    font-size: 1.5rem;
    padding: 2%;
    padding-left: 4%;
  }

  .contactus-submit-btn {
    width: 18rem;
    height: 6rem;
    font-size: 1.5rem;
  }  
}

@media screen and (max-width: 888px) {
  .contactus-editbox-box {
    height: 6.5rem;
  }

  .contactus-editbox {
    height: 6.5rem;
    font-size: 2rem;
  }

  .contactus-textarea {
    font-size: 2rem;
    padding: 2%;
    padding-left: 4%;
  }
}
