/*----------------- 共用 -----------------*/
:root {
  --text-color: #fff;
  --font-weight: 400;
  --max-width: 1440px;
}

body {
  box-sizing: border-box;
}

.container {
  width: 100%;
}

.header-content,
.main-content,
.about-content,
.contact-content {
  max-width: var(--max-width);
  width: 100%;
  margin: 0 auto;
}

/*----------------- Header -----------------*/
.header-bg {
  width: 100%;
  background: #fff;
}

.hearder-spacing {
  max-width: var(--max-width);
  width: 100%;
  margin: 0 auto;
  padding: 15px 0;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-content > img {
  margin-left: 76px;
}

.header-nav {
  display: flex;
  gap: 50px;
  margin-right: 141px;
}

.header-nav a {
  text-decoration: none;
  color: #000;
}

.header-nav-about,
.header-nav-contact {
  font-size: 16px;
  line-height: 20px;
  white-space: nowrap;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-nav-about:hover .nav-about-img,
.header-nav-contact:hover .nav-contact-img {
  background: url("../img/navicn.png") no-repeat right center;
  background-size: contain;
}

.nav-about-img,
.nav-contact-img {
  width: 25px;
  height: 36px;
  background: url("../img/menuItem.png") no-repeat right center;
  background-size: contain;
}

/*----------------- 主要 -----------------*/
.main-bg {
  width: 100%;
  height: 880px;
  background: linear-gradient(
    to bottom,
    #c7c7c766 82%,
    #bdbdbd 82% 88%,
    #0e102180 88% 94%,
    #00052f 94% 100%
  );
}

.main-content > div {
  padding: 217px 143px;
  position: relative;
  z-index: 1;
}

.main-content h1 {
  color: var(--text-color);
  font-size: 38px;
  font-weight: var(--font-weight);
  line-height: 65px;
  text-shadow: #aaa 0px 2px 3px;
}

.main-content-img {
  position: absolute;
  top: 105px;
  left: 250px;
  z-index: -1;
}

.main-content-imgText {
  position: absolute;
  bottom: 268px;
  right: 140px;
  z-index: -1;
  animation: rotate 10s linear infinite;
}

.main-content-font {
  max-width: 540px;
  width: 100%;
  border-top: 1px solid #fff;
}

.main-content-font p:nth-child(1) {
  color: var(--text-color);
  font-size: 28px;
  font-weight: var(--font-weight);
  margin: 17px 0;
  line-height: 35px;
  text-shadow: #aaa 0px 2px 3px;
}

.main-content-font p:nth-child(2) {
  color: var(--text-color);
  font-size: 20px;
  font-weight: var(--font-weight);
  line-height: 35px;
  text-shadow: #aaa 0px 2px 3px;
}

.main-content-btn {
  position: absolute;
  right: 150px;
  bottom: 30px;
  width: 209px;
  height: 59px;
  border-radius: 40px;
  border: 3px solid #fff;
  background: transparent;
  color: var(--text-color);
  font-size: 20px;
  font-weight: var(--font-weight);
  line-height: normal;
  cursor: pointer;
}

.main-content-btn:hover,
.submit:hover {
  background: #f1d145;
}

.main-content-btn:active,
.submit:active {
  background: #ee8133;
}

.main-arrow {
  text-align: center;
  margin-top: 15px;
}

/*----------------- 關於 -----------------*/
.about-bg,
.contact-bg,
.footer-bg {
  background: #00052f;
}

.about-content {
  padding-bottom: 80px;
}

/*----------------- 聯絡 -----------------*/
.contact-spacing {
  width: 100%;
  height: 53px;
  background-image: url(../img/transitionZone2.png);
}

.contact-content {
  width: 100%;
  color: var(--text-color);
  display: flex;
}

.contact-content > div:nth-child(1) {
  width: 75%;
  padding: 75px 0 65px 140px;
}

.contact-content h3 {
  font-size: 26px;
  font-weight: var(--font-weight);
}

.contact-content-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 30px;
}

.contact-content-notify {
  display: flex;
  gap: 20px;
}

.contact-content-email,
.contact-content-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.contact-form-title h3 {
  margin-top: 40px;
}

.contact-form-title p {
  max-width: 525px;
  width: 100%;
  margin: 20px 0 30px;
  font-size: 20px;
  font-weight: var(--font-weight);
  line-height: 30px;
}

.contact-form-content {
  display: flex;
  gap: 60px;
}

.contact-form-content label {
  font-size: 20px;
  font-weight: var(--font-weight);
  line-height: normal;
}

.contact-form-content span {
  margin-right: 5px;
}

.contact-form-content input[type="text"],
.contact-form-content input[type="tel"],
.contact-form-content input[type="email"] {
  width: 485px;
  height: 38px;
  color: var(--text-color);
  border-radius: 11px;
  border: 1px solid var(--text-color);
  background: #00052f;
  margin: 15px 0 30px;
  padding-left: 17px;
  font-size: 18px;
  font-weight: 400;
  line-height: normal;
}

.contact-form-content input[type="radio"] {
  width: 28px;
  height: 28px;
  accent-color: #fff;
  background: #00052f;
  position: relative;
}

.contact-form-content input[type="radio"]::after {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  content: "";
  background-color: #00052f;
  position: absolute;
  top: 2px;
  left: 2px;
}

input[type="radio"]:checked:before {
  content: "";
  display: block;
  position: relative;
  top: 6px;
  left: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #fff;
  z-index: 1;
}

.contact-form-gender {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gender {
  margin: 15px 30px 30px 0;
}

textarea {
  resize: none;
  width: 485px;
  height: 239px;
  color: var(--text-color);
  font-size: 18px;
  font-weight: 400;
  line-height: normal;
  border-radius: 11px;
  border: 1px solid var(--text-color);
  background: #00052f;
  margin: 5px 0 15px;
  padding: 10px 0px 10px 18px;
  overflow: auto;
}

/*滚动条高宽度*/
textarea::-webkit-scrollbar {
  width: 32px;
  -webkit-padding-start: 10px;
}
/*滚动条滑块*/
textarea::-webkit-scrollbar-thumb {
  border-radius: 20px;
  background-color: #fff;
  border: 11px solid #00052f;
}
/*滚动条里面轨道*/
textarea ::-webkit-scrollbar-track-piece {
  background: transparent;
}
/*滚动条的小边角*/
textarea::-webkit-scrollbar-corner {
  background: transparent;
}

.contact-form-submit {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 25px;
}

.contact-form-verify {
  display: flex;
  align-items: center;
  gap: 18px;
}

.contact-form-verify input[type="text"] {
  color: var(--text-color);
  max-width: 118px;
  width: 100%;
  height: 38px;
  border-radius: 11px;
  border: 1px solid #fff;
  margin: 10px 0;
}

.contact-form-verify #replace {
  cursor: pointer;
}

.submit {
  width: 184px;
  height: 54px;
  color: var(--text-color);
  font-size: 22px;
  font-weight: 400;
  line-height: normal;
  background: #00052f;
  border-radius: 40px;
  border: 3px solid var(--text-color);
  cursor: pointer;
}

.contact-us {
  width: 25%;
  height: 253px;
  border-left: 1px solid var(--text-color);
  padding-left: 25px;
  margin: 75px 0 0 20px;
}

.contact-us p {
  font-size: 30px;
  font-weight: 400;
  margin-bottom: 10px;
}

/*----------------- Footer -----------------*/
.footer-bg {
  color: var(--text-color);
  font-size: 18px;
  font-weight: var(--font-weight);
  line-height: normal;
}

.footer-conten {
  display: flex;
  justify-content: center;
  padding-bottom: 50px;
}

.footer-conten span {
  margin: 0 15px;
}

.footer-conten a:link,
.footer-conten a:visited {
  color: var(--text-color);
  text-underline-offset: 3px;
}

/*----------------- animation -----------------*/
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}