/* color */
/* font */
/* transition */
.contactFormBox .item .refresh {
  transition: all 0.5s ease-in-out; }

@keyframes rotate {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

.recruitTitle {
  font-size: 24px;
  letter-spacing: 2.88px;
  font-weight: 700;
  color: #036eb8;
  margin-bottom: 30px; }
  [data-theme="dark"] .recruitTitle {
    color: #fff; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .recruitTitle {
      color: #fff; } }
  @media (max-width: 640px) {
    .recruitTitle {
      font-size: 20px;
      margin-bottom: 10px;
      letter-spacing: 2.4px; } }
  .recruitTitle + ul {
    margin-bottom: 30px;
    font-weight: 500; }

.processList {
  margin-top: 40px;
  margin-bottom: 80px; }
  @media (max-width: 640px) {
    .processList {
      margin-bottom: 40px; } }
  .processList .processItem:not(:first-child) {
    margin-top: 50px; }
    @media (max-width: 640px) {
      .processList .processItem:not(:first-child) {
        margin-top: 30px; } }
  .processList .processTitle {
    font-size: 38px;
    color: #036eb8;
    font-weight: 700;
    font-family: 'Goldman', serif;
    border-bottom: 2px solid #036eb8;
    margin-bottom: 10px;
    letter-spacing: 3.8px; }
    [data-theme="dark"] .processList .processTitle {
      color: #fff;
      border-bottom: 2px solid #fff; }
    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) .processList .processTitle {
        color: #fff;
        border-bottom: 2px solid #fff; } }
    @media (max-width: 640px) {
      .processList .processTitle {
        font-size: 28px;
        letter-spacing: 2.8px; } }
  .processList .processText {
    font-size: 18px;
    font-weight: 500;
    color: #525252;
    letter-spacing: 1.8px; }
    [data-theme="dark"] .processList .processText {
      color: #fff; }
    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) .processList .processText {
        color: #fff; } }
    @media (max-width: 640px) {
      .processList .processText {
        font-size: 16px;
        letter-spacing: 1.6px; } }

.qaList {
  margin-top: 40px; }
  .qaList .qaQuestion,
  .qaList .qaAnswer {
    position: relative;
    padding-left: 60px; }
  .qaList .qaItem {
    padding-bottom: 40px;
    margin-bottom: 40px;
    border-bottom: 1px solid #525252; }
    [data-theme="dark"] .qaList .qaItem {
      border-bottom: 1px solid #fff; }
    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) .qaList .qaItem {
        border-bottom: 1px solid #fff; } }
  .qaList .qaQuestion {
    color: #036eb8;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 2.4px;
    margin-bottom: 20px; }
    [data-theme="dark"] .qaList .qaQuestion {
      color: #fff; }
    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) .qaList .qaQuestion {
        color: #fff; } }
    @media (max-width: 640px) {
      .qaList .qaQuestion {
        font-size: 20px;
        letter-spacing: 2px; } }
    .qaList .qaQuestion:before {
      content: "";
      position: absolute;
      content: "Q.";
      color: #036eb8;
      font-family: 'Goldman', serif;
      font-size: 35px;
      font-weight: 500;
      letter-spacing: 2.5px;
      left: 0;
      top: 50%;
      transform: translateY(-50%); }
      [data-theme="dark"] .qaList .qaQuestion:before {
        color: #fff; }
      @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) .qaList .qaQuestion:before {
          color: #fff; } }
      @media (max-width: 640px) {
        .qaList .qaQuestion:before {
          font-size: 30px; } }
  .qaList .qaAnswer {
    font-family: "Noto Sans TC", sans-serif;
    color: #525252;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 1.8px;
    line-height: calc(33/18); }
    [data-theme="dark"] .qaList .qaAnswer {
      color: #fff; }
    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) .qaList .qaAnswer {
        color: #fff; } }
    @media (max-width: 640px) {
      .qaList .qaAnswer {
        font-size: 16px;
        letter-spacing: 1.6px;
        line-height: calc(30/16); } }
    .qaList .qaAnswer:before {
      content: "";
      position: absolute;
      content: "A.";
      color: #525252;
      font-size: 35px;
      font-family: 'Goldman', serif;
      font-weight: 500;
      letter-spacing: 2.5px;
      left: 0;
      top: 50%;
      transform: translateY(-50%); }
      [data-theme="dark"] .qaList .qaAnswer:before {
        color: #fff; }
      @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) .qaList .qaAnswer:before {
          color: #fff; } }
      @media (max-width: 640px) {
        .qaList .qaAnswer:before {
          font-size: 30px; } }

.uploadBox {
  margin: 60px 0; }
  @media (max-width: 640px) {
    .uploadBox {
      margin: 30px 0; } }
  .uploadBox .uploadArea {
    border: 2px dashed #036eb8;
    border-radius: 8px;
    padding: 60px 30px;
    text-align: center;
    background-color: rgba(3, 110, 184, 0.02);
    cursor: pointer;
    transition: all 0.3s ease; }
    [data-theme="dark"] .uploadBox .uploadArea {
      border: 2px dashed #fff; }
    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) .uploadBox .uploadArea {
        border: 2px dashed #fff; } }
    @media (max-width: 640px) {
      .uploadBox .uploadArea {
        padding: 40px 20px; } }
    .uploadBox .uploadArea:hover {
      background-color: rgba(3, 110, 184, 0.05);
      border-color: #025086; }
      [data-theme="dark"] .uploadBox .uploadArea:hover {
        border-color: #fff;
        background-color: rgba(255, 255, 255, 0.1); }
      @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) .uploadBox .uploadArea:hover {
          border-color: #fff;
          background-color: rgba(255, 255, 255, 0.1); } }
    .uploadBox .uploadArea.dragover {
      background-color: rgba(3, 110, 184, 0.1);
      border-color: #036eb8;
      border-style: solid; }
  .uploadBox .uploadIcon {
    color: #036eb8;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center; }
    [data-theme="dark"] .uploadBox .uploadIcon {
      color: #fff; }
    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) .uploadBox .uploadIcon {
        color: #fff; } }
    .uploadBox .uploadIcon svg {
      width: 60px;
      height: 60px; }
      [data-theme="dark"] .uploadBox .uploadIcon svg {
        color: #fff; }
      @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) .uploadBox .uploadIcon svg {
          color: #fff; } }
      @media (max-width: 640px) {
        .uploadBox .uploadIcon svg {
          width: 50px;
          height: 50px; } }
  .uploadBox .uploadText {
    margin-bottom: 50px; }
    .uploadBox .uploadText .uploadTitle {
      font-size: 18px;
      font-weight: 700;
      color: #525252;
      letter-spacing: 2px; }
      [data-theme="dark"] .uploadBox .uploadText .uploadTitle {
        color: #fff; }
      @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) .uploadBox .uploadText .uploadTitle {
          color: #fff; } }
      @media (max-width: 640px) {
        .uploadBox .uploadText .uploadTitle {
          font-size: 18px;
          letter-spacing: 1.8px; } }
  .uploadBox .btn4 {
    margin-top: 30px;
    font-size: 18px;
    padding: 3.5px 30px; }

.linkBox {
  position: relative; }
  .linkBox .btn {
    position: absolute;
    bottom: 40px;
    right: 80px;
    z-index: 2;
    width: 245px;
    height: 55px;
    padding: 0 30px; }
    [data-theme="dark"] .linkBox .btn {
      background-color: #303f50;
      color: #fff; }
    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) .linkBox .btn {
        background-color: #303f50;
        color: #fff; } }
    .linkBox .btn svg {
      left: 85%; }
    .linkBox .btn span {
      opacity: 1; }
    @media (min-width: 1181px) {
      .linkBox .btn:hover {
        transform: translateX(-15px); } }
    @media (max-width: 1180px) {
      .linkBox .btn {
        position: relative;
        bottom: auto;
        right: auto;
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto; } }

.contactFormBox {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 40px;
  gap: 40px;
  row-gap: 30px;
  grid-template-areas: "email captcha" "btnBox btnBox"; }
  @media (max-width: 1180px) {
    .contactFormBox {
      grid-template-columns: 1fr;
      grid-template-areas: "email" "captcha" "btnBox"; } }
  .contactFormBox .item {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center; }
    @media (max-width: 640px) {
      .contactFormBox .item {
        grid-template-columns: 1fr; } }
    .contactFormBox .item.name {
      grid-area: name; }
    .contactFormBox .item.tel {
      grid-area: tel; }
    .contactFormBox .item.email {
      grid-area: email; }
    .contactFormBox .item.note {
      grid-area: note;
      align-items: flex-start; }
    .contactFormBox .item.captcha {
      grid-area: captcha; }
    .contactFormBox .item.topic {
      grid-area: topic;
      grid-template-columns: auto 1fr;
      gap: 20px; }
      @media (max-width: 640px) {
        .contactFormBox .item.topic {
          grid-template-columns: 1fr; } }
    .contactFormBox .item .refresh {
      position: absolute;
      top: 50%;
      width: 24px;
      height: 24px;
      transform: translateY(-50%);
      right: 20px;
      border: none;
      cursor: pointer; }
      @media (min-width: 1181px) {
        .contactFormBox .item .refresh:hover {
          scale: 1.1;
          transform-origin: center; } }
  .contactFormBox .label {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1.6px;
    color: #036eb8; }
    [data-theme="dark"] .contactFormBox .label {
      color: #fff; }
    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) .contactFormBox .label {
        color: #fff; } }
    @media (max-width: 640px) {
      .contactFormBox .label {
        margin-bottom: 10px; } }
    .contactFormBox .label span {
      font-size: 14px;
      margin-left: 15px;
      color: #036eb8;
      font-weight: 700; }
      [data-theme="dark"] .contactFormBox .label span {
        color: #fff; }
      @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) .contactFormBox .label span {
          color: #fff; } }
      @media (max-width: 640px) {
        .contactFormBox .label span {
          font-size: 14px; } }
  .contactFormBox select {
    width: 100%;
    padding: 10px 20px;
    background-color: rgba(219, 219, 219, 0.28);
    border: none;
    font-size: 18px;
    color: #212122;
    letter-spacing: 2.4px; }
  .contactFormBox input,
  .contactFormBox textarea {
    width: 100%;
    padding: 10px 20px;
    background-color: rgba(219, 219, 219, 0.28);
    border: none;
    font-size: 18px;
    color: #212122;
    letter-spacing: 2.4px; }
    [data-theme="dark"] .contactFormBox input, [data-theme="dark"]
    .contactFormBox textarea {
      color: #fff; }
    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) .contactFormBox input, :root:not([data-theme="light"])
      .contactFormBox textarea {
        color: #fff; } }
    .contactFormBox input::-webkit-input-placeholder,
    .contactFormBox textarea::-webkit-input-placeholder {
      color: rgba(33, 33, 34, 0.85); }
    .contactFormBox input:-moz-placeholder,
    .contactFormBox textarea:-moz-placeholder {
      color: rgba(33, 33, 34, 0.85); }
    .contactFormBox input::-moz-placeholder,
    .contactFormBox textarea::-moz-placeholder {
      color: rgba(33, 33, 34, 0.85); }
    .contactFormBox input:-ms-input-placeholder,
    .contactFormBox textarea:-ms-input-placeholder {
      color: rgba(33, 33, 34, 0.85); }

.send {
  background-color: transparent;
  margin-left: auto;
  margin-right: auto;
  border: none;
  display: flex;
  justify-content: center;
  margin-top: 100px;
  cursor: pointer; }

.btnBox {
  grid-area: btnBox; }
  .btnBox .btn {
    margin-left: auto;
    width: 156px;
    padding: 0 30px; }
    .btnBox .btn svg {
      left: 85%; }
    .btnBox .btn span {
      opacity: 1; }
      [data-theme="dark"] .btnBox .btn span {
        color: #000; }
      @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) .btnBox .btn span {
          color: #000; } }