.t-template-12 {
  padding: calc(200 / 1920 * 100vw) calc(255 / 1920 * 100vw) calc(120 / 1920 * 100vw);

  background-color: #14120f;
  color: #ededed;
}

.t-template-12 a,
.t-template-12 img {
  display: block;
}

.t-template-12__row-1 {
  display: flex;
  margin: 0 calc(-15 / 1920 * 100vw);
}

.t-template-12__row-1 .col {
  width: 25%;
  padding: 0 calc(15 / 1920 * 100vw);
}

.t-template-12__row-1 .info__title,
.t-template-12__row-1 .social-media-wrapper .title,
.t-template-12__row-1 .subscribe-wrapper .title {
  font-size: calc(18 / 1920 * 100vw);
  font-weight: 700;
  margin: initial;
}

.t-template-12__row-1 .info-1,
.t-template-12__row-1 .social-media-wrapper {
  min-height: calc(130 / 1920 * 100vw);
}

.t-template-12__row-1 .info__content {
  font-size: calc(16 / 1920 * 100vw);
  color: #a4a4a4;
  margin: calc(22 / 1920 * 100vw) auto auto;
}

.t-template-12__row-1 .social-media-group {
  display: flex;
  flex-wrap: wrap;
}

.t-template-12__row-1 .subscribe-group {
  display: flex;
}

.t-template-12__row-1 .subscribe-group {
  display: flex;
  background-color: #f9f9f9;

  height: calc(74 / 1920 * 100vw);
  margin-top: calc(18 / 1920 * 100vw);
  border-radius: calc(6 / 1920 * 100vw);
}

.t-template-12__row-1 input {
  appearance: none;
  border: initial;
  background-color: initial;
  font-family: 'PingFang TC', 'Microsoft JhengHei', sans-serif;

  width: 100%;
  padding: 0 calc(20 / 1920 * 100vw);

  font-size: calc(16 / 1920 * 100vw);
  color: #191f23;
}

.t-template-12__row-1 .btn-subscribe {
  flex-shrink: 0;
  display: flex;
  align-items: center;

  padding: 0 calc(28 / 1920 * 100vw);

  font-size: calc(18 / 1920 * 100vw);
  font-weight: 700;
  color: #191f23;
  cursor: pointer;
}



.t-template-12__row-2 {
  display: flex;
  justify-content: space-between;

  padding-top: calc(30 / 1920 * 100vw);
  margin-top: calc(86 / 1920 * 100vw);

  border-top: 1px solid #6a6a6a;
}

.t-template-12__row-2 .copyright {
  font-size: calc(16 / 1920 * 100vw);
  color: #606060;
  margin: initial;
}

.t-template-12__row-2 .title {
  position: absolute;
  top: calc(30 / 1920 * 100vw);
  left: 56%;
  transform: translateX(-50%);

  font-size: calc(16 / 1920 * 100vw);
  color: #606060;
  margin: initial;
}

.t-template-12__row-2 .t-template-12__btn-go-top {
  padding: calc(26 / 1920 * 100vw);
  margin-top: calc(-18 / 1920 * 100vw);
  cursor: pointer;
}

.t-template-12__row-2 .t-template-12__btn-go-top img {
  width: calc(15 / 1920 * 100vw);
}

.t-template-12__row .t-template-12__btn-go-top .fas {
  font-size: 30px;
  color: #D85312;
  font-weight: 700;
}

@media (min-width: 1101px) {
  .subscribe-wrapper--tablet {
    display: none;
  }
}

/* tablet */
@media (max-width: 1100px) {
  .t-template-12 {
    padding: 70px calc(55 / 768 * 100vw) 50px;
  }

  .subscribe-wrapper--desktop {
    display: none;
  }

  .t-template-12__row-1 {
    flex-wrap: wrap;
    margin: 0 -15px;
  }

  .t-template-12__row-1 .col {
    width: 50%;
    padding: 0 15px;
  }

  .t-template-12__row-1 .col-1,
  .t-template-12__row-1 .info-1,
  .t-template-12__row-1 .social-media-wrapper {
    min-height: 130px;
  }


  .t-template-12__row-1 .col-2,
  .t-template-12__row-1 .col-3,
  .subscribe-wrapper--tablet {
    order: 1;
  }

  .t-template-12__row-1 .info__title,
  .t-template-12__row-1 .social-media-wrapper .title,
  .t-template-12__row-1 .subscribe-wrapper .title {
    font-size: 16px;
  }

  .t-template-12__row-1 .info__content {
    margin-top: 20px;
    font-size: 14px;
  }

  .t-template-12__row-2 {
    padding-top: 34px;
    margin-top: 70px;
  }

  .t-template-12__row-2 .title {
    top: 34px;
  }

  .subscribe-wrapper {
    width: 100%;
    padding: 0 15px;
    margin-top: 56px;
  }

  .t-template-12__row-1 .subscribe-group {
    height: 74px;
    margin-top: 16px;
    border-radius: 6px;
  }

  .t-template-12__row-1 input {
    font-size: 16px;
    padding: 0 20px;
  }

  .t-template-12__row-1 .btn-subscribe {
    font-size: 18px;
    padding: 0 28px;
  }

  .t-template-12__row-2 .t-template-12__btn-go-top img {
    width: 15px;
  }

  .t-template-12__row-2 .t-template-12__btn-go-top {
    padding: 20px;
    margin-top: -16px;
    margin-right: -20px;
  }

  .t-template-12__row-2 .copyright,
  .t-template-12__row-2 .title {
    font-size: 12px;
  }
}

/* mobile */
@media (max-width: 700px) {
  .t-template-12 {
    padding: 46px calc(36 / 320 * 100vw) 40px;
  }

  .t-template-12__row-1 .col {
    width: 100%;
  }

  .t-template-12__row-1 .col-1 {
    display: none;
  }

  .t-template-12__row-1 .info__content {
    margin-top: 10px;
  }

  .t-template-12__row-1 .info__title,
  .t-template-12__row-1 .social-media-wrapper .title,
  .t-template-12__row-1 .subscribe-wrapper .title {
    font-size: 14px;
  }

  .t-template-12__row-1 input {
    font-size: 14px;
    padding: 0 15px;
  }

  .t-template-12__row-1 .btn-subscribe {
    font-size: 14px;
  }

  .t-template-12__row-1 .info-1,
  .t-template-12__row-1 .social-media-wrapper {
    min-height: initial;
  }

  .subscribe-wrapper {
    margin-top: 50px;
  }

  .t-template-12__row-1 .info+.info,
  .t-template-12__row-1 .col-2,
  .t-template-12__row-1 .col-3 {
    margin-top: 40px;
  }

  .t-template-12__row-1 .subscribe-group {
    height: 58px;
  }

  .t-template-12__row-2 {
    flex-direction: column;
    padding-top: 26px;
    margin-top: 40px;
  }

  .t-template-12__row-2 .t-template-12__btn-go-top {
    position: absolute;
    right: 0;
    top: 26px;
  }

  .t-template-12__row-2 .title {
    position: relative;
    top: initial;
    left: initial;
    transform: initial;
  }

  .t-template-12__row-2 .copyright,
  .t-template-12__row-2 .title {
    padding-right: 55px;
  }
}

sup{
  transform: translateY(-0.4em);
  display: inline-block;
}