@import url(./common.css);

.inner_page {
  max-width: 1030px;
  margin: 0 auto;
}
.inner_page .section {
  border-bottom: 1px solid #707070;
  padding-top: 100px;
  padding-left: 40px;
  padding-right: 40px;
}
.inner_page .section:first-child {
  padding-top: 0;
}
.inner_page .section:last-child {
  border-bottom: none;
}
.inner_page .section .title {
  font-size: 1.75rem;
  font-weight: 600;
  text-align: center;
  color: #b28146;
  margin-bottom: 60px;
}
.inner_page .section .sub_title {
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: 30px;
}

@media (max-width: 1200px) {
  .inner_page .section {
    padding-top: 30px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .inner_page .section .title {
    font-size: 1.5rem;
    margin-bottom: 30px;
  }
  .inner_page .section .sub_title {
    font-size: 1.25rem;
  }
}

/*聯絡我們 表單*/
.page .form {
  padding: 50px 40px;
  background-color: #fff;
  border-radius: 10px;
  max-width: 784px;
  margin: 0 auto;
}
.page .form .name {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 60px;
  text-align: center;
}
.page .form .list {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -35px;
  margin-bottom: 80px;
}
.page .form .list .input {
  flex: 0 0 100%;
  padding: 0 35px;
  margin-bottom: 30px;
}
.page .form .list .input.half {
  flex: 0 0 50%;
}
.page .form .list .input > label {
  display: block;
  font-size: 1.25rem;
  margin-bottom: 10px;
  padding-left: 5px;
}
.page .form .list .input > label span {
  color: #f90b0b;
}
.page .form .list .input input[type='text'],
.page .form .list .input select,
.page .form .list .input textarea {
  width: 100%;
  padding: 5px 10px;
  border: 1px solid #cccccc;
  border-radius: 5px;
  outline: none;
  color: #bbb;
}
.page .form .list .input textarea {
  min-height: 200px;
}
.page .form .list .input input[type='text']::placeholder,
.page .form .list .input textarea::placeholder {
  color: #bbb;
}
.page .form .list .input .opt_list{
  display: flex;
  align-items: center;
  padding-left: 5px;
}
.page .form .list .input .opt_list input[type='radio'],
.page .form .list .input .opt_list input[type='checkbox']{
  margin-right: 10px;
}
.page .form .list .input .opt_list label{
  margin-bottom: 0;
  margin-right: 10px;
  font-size: 1.25rem;
}
.page .form .list .input .verify {
  display: flex;
  align-items: center;
}
.page .form .list .input .verify input {
  flex: 0 0 205px;
  margin-right: 10px;
}
.page .form .list .input .verify img {
  margin-right: 10px;
}
.page .form .list .input .verify button {
  background-color: #fff;
  border: 1px solid #bbb;
  border-radius: 10px;
  width: 30px;
  height: 30px;
  color: #aaa;
}
.page .form .list .input .verify button:hover {
  opacity: 0.8;
}
.page .form .btns {
  display: flex;
  justify-content: center;
}
.page .form .btns button {
  border: 1px solid #848484;
  background-color: #fff;
  width: 160px;
  height: 40px;
  margin-right: 50px;
  border-radius: 50px;
  color: #848484;
}
.page .form .btns button:hover {
  opacity: 0.8;
}
.page .form .btns button:last-child {
  margin-right: 0;
}
.page .form .btns button.send {
  background-color: #848484;
  color: #fff;
}
@media (max-width: 1200px) {
  .page .form {
    padding: 30px 20px;
  }
  .page .form .name {
    margin-bottom: 30px;
  }
  .page .form .list {
    margin-bottom: 40px;
  }
  .page .form .list .input.half {
    flex: 0 0 100%;
  }
}