@import url("https://fonts.googleapis.com/css?family=Noto+Sans+TC:500&display=swap");
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td, figure {
  margin: 0;
  padding: 0;
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img {
  border: 0;
  display: block;
}

legend, hr {
  display: none;
}

th {
  font-style: inherit;
  font-weight: inherit;
}

li {
  list-style: none;
}

caption, th {
  text-align: left;
}

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal;
}

a {
  outline: none;
  hlbr: expression(this.onFocus=this.blur());
  text-decoration: none;
  cursor: pointer;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  display: block;
}

* {
  box-sizing: border-box;
}

/* main.css ==============================================*/
@font-face {
  font-family: "SweiGothicCJKsc-Black";
  src: url(../font/SweiGothicCJKsc-Black.woff2) format("woff2");
}
@font-face {
  font-family: "toyota_type";
  src: url("../font/toyotatype-semibold-webfont.woff2") format("woff2"), url("../font/toyotatype-semibold-webfont.woff") format("woff");
  font-weight: normal;
}
/*Variable*/
/*Mixin*/
/*Reset*/
.clearfix:before, .clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  zoom: 1;
  display: block;
}

.hide {
  display: none;
}

::selection {
  background: #000;
  color: #fff;
  text-decoration: none;
}

::-webkit-input-placeholder {
  color: #999;
}

::-moz-placeholder {
  color: #999;
}

*:focus {
  outline: none;
}

a {
  color: #fff;
  text-decoration: none;
  transition: color 0.4s;
}

a:hover {
  color: #fef001;
}

*::-webkit-media-controls-overlay-play-button {
  display: none !important;
  -webkit-appearance: none;
}

/*Body*/
#g-loader {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: radial-gradient(ellipse at center, white 36%, #c6c6c6 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 1s;
  z-index: 101;
  text-align: center;
}
#g-loader .center {
  width: 100%;
  height: 150px;
  color: #000;
}
#g-loader .center p {
  font-size: 12px;
  letter-spacing: 5px;
  margin: 15px 0;
}
#g-loader .center .bar {
  width: 100%;
  height: 5px;
  background-color: #ccc;
  position: relative;
}
#g-loader .center .bar .move {
  width: 20%;
  height: 5px;
  background-color: #e7211b;
  position: absolute;
  animation: bar-move 0.5s ease infinite;
}
@keyframes bar-move {
  0% {
    left: 0%;
    width: 0%;
  }
  50% {
    left: 40%;
    width: 20%;
  }
  100% {
    left: 100%;
    width: 0%;
  }
}
#g-loader.is-loaded {
  opacity: 0;
  visibility: hidden;
}

.color-blue {
  color: #0084cf;
}

.color-red {
  color: #e95f52;
}

.color-pink {
  color: #cc3a32;
}

.color-green {
  color: #8bc34a;
}

.color-yellow {
  color: #fef001;
}

.color-brown-300 {
  color: #a9824c;
}

.underline-yellow {
  text-decoration: none;
  background: linear-gradient(to bottom, transparent 80%, #fef001 80.1%);
}

[class*=g-bt-] {
  display: inline-block;
  position: relative;
  overflow: hidden;
  text-align: center;
  color: #fff;
  transition: 0.5s;
  background: #0084cf;
  font-size: 1.1rem;
  line-height: 2.5;
  letter-spacing: 0.2rem;
  cursor: pointer;
}
[class*=g-bt-]:before {
  content: "";
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 8%, white 49%, rgba(255, 255, 255, 0) 93%, rgba(255, 255, 255, 0) 100%);
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  transition: 1s;
  animation: bt_shine 2s ease infinite;
  z-index: 1;
}
@keyframes bt_shine {
  0% {
    left: -100%;
  }
  50%, 100% {
    left: 100%;
  }
}
[class*=g-bt-] span {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}
[class*=g-bt-] i {
  width: 1rem;
  height: 2rem;
  background: url(../img/icon-next-fff.svg) no-repeat center;
  background-size: 100%;
  display: block;
  transition: 0.2s;
}
[class*=g-bt-]:hover i {
  transform: translateX(20%);
}

.g-bt-1 {
  outline: 1px solid red;
  background: linear-gradient(135deg, #fff, #e1d5a6, #fff);
  line-height: 2.1;
  letter-spacing: 0.1rem;
  font-size: 1.6rem;
  border-radius: 50rem;
  padding: 0 5.5rem 0 2rem;
  color: #000;
}
.g-bt-1 span {
  display: flex;
  justify-content: center;
  align-items: center;
}
.g-bt-1:hover {
  color: #cc3a32;
}
.g-bt-1:hover:after {
  filter: brightness(140%);
}

.g-bt-2 {
  background: #fef001;
  border-radius: 50rem;
  box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.2);
  line-height: 1.8;
  border: 0.15rem solid #cc3a32;
  color: #cc3a32;
  font-size: 1rem;
  letter-spacing: 0.05rem;
  padding: 0 1.2rem;
  transition: 0.2s;
}
.g-bt-2 i {
  width: 1rem;
  height: 1rem;
  background: url(../img/icon-next-red.svg) no-repeat center;
  background-size: auto 90%;
}
.g-bt-2:hover {
  background: #cc3a32;
  color: #fff;
}
.g-bt-2:hover i {
  filter: brightness(2000%);
}

.msg-box {
  background: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: 0.2s;
  z-index: 0;
  transform: scale(1);
  perspective: 700px;
  pointer-events: none;
}
.msg-box.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 102;
  pointer-events: auto;
}
.msg-box > .close {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.msg-box .msg-wrap {
  background: #fff;
  max-width: 550px;
  width: 90%;
  height: 60%;
  max-width: 600px;
  max-height: 90%;
  position: relative;
  margin: 0 auto;
  top: 50%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  padding: 30px;
  transform: scale(1) translate3d(0, -50%, 0);
  transform-style: preserve-3d;
  transition-delay: 0.5s;
  transition: 0.5s;
  opacity: 0;
  visibility: hidden;
}
.msg-box .msg-wrap > .close {
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  width: 5%;
  height: 0;
  padding-bottom: 5%;
  transition: 0.2s;
  background: url(../img/icon-close.svg) #0084cf no-repeat center;
  background-size: 45%;
  border-radius: 50%;
  opacity: 0;
  transform: scale(0);
  transition: 0.5s;
  transition-delay: 0.5s;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 5;
}
.msg-box.is-active .msg-wrap {
  transform: scale(1) translate3d(0, -50%, 0);
  opacity: 1;
  visibility: visible;
}
.msg-box.is-active .msg-wrap > .close {
  transform: scale(1);
  opacity: 1;
}
.msg-box.is-active .msg-wrap > .close:hover {
  transform: rotate(90deg);
}
.msg-box .msg-content {
  overflow-y: auto;
  overflow-x: hidden;
  height: 95%;
  text-align: left;
  font-size: 20px;
  -webkit-overflow-scrolling: touch;
  color: #000;
}
.msg-box .msg-content header {
  font-size: 40px;
  font-weight: bold;
}
.msg-box .msg-content img {
  max-width: 100%;
}
.msg-box .msg-content .bt {
  background-color: #000;
  border-radius: 10px;
  width: auto;
  display: block;
  margin: 20px auto 0;
  padding: 10px 20px;
  cursor: pointer;
  color: #fff;
  font-weight: bold;
  transition: 0.5s;
  position: relative;
}
.msg-box .msg-content .bt:hover {
  background: #fef001;
  color: #000;
  transition: 0.2s;
}

#msg-alert .msg-wrap {
  height: auto;
  min-height: 100px;
  max-width: 500px;
}
#msg-alert .msg-content {
  text-align: center;
}
#msg-alert .msg-content header {
  font-size: 30px;
  margin-bottom: 20px;
}

.splitEffect {
  overflow: hidden;
  white-space: nowrap;
}
.splitEffect span {
  display: inline-block;
  transform: translateY(100%);
}
.splitEffect span:nth-of-type(1) {
  animation-delay: 0.03s !important;
}
.splitEffect span:nth-of-type(2) {
  animation-delay: 0.06s !important;
}
.splitEffect span:nth-of-type(3) {
  animation-delay: 0.09s !important;
}
.splitEffect span:nth-of-type(4) {
  animation-delay: 0.12s !important;
}
.splitEffect span:nth-of-type(5) {
  animation-delay: 0.15s !important;
}
.splitEffect span:nth-of-type(6) {
  animation-delay: 0.18s !important;
}
.splitEffect span:nth-of-type(7) {
  animation-delay: 0.21s !important;
}
.splitEffect span:nth-of-type(8) {
  animation-delay: 0.24s !important;
}
.splitEffect span:nth-of-type(9) {
  animation-delay: 0.27s !important;
}
.splitEffect span:nth-of-type(10) {
  animation-delay: 0.3s !important;
}
.splitEffect span:nth-of-type(11) {
  animation-delay: 0.33s !important;
}
.splitEffect span:nth-of-type(12) {
  animation-delay: 0.36s !important;
}
.splitEffect span:nth-of-type(13) {
  animation-delay: 0.39s !important;
}
.splitEffect span:nth-of-type(14) {
  animation-delay: 0.42s !important;
}
.splitEffect span:nth-of-type(15) {
  animation-delay: 0.45s !important;
}
.splitEffect span:nth-of-type(16) {
  animation-delay: 0.48s !important;
}
.splitEffect span:nth-of-type(17) {
  animation-delay: 0.51s !important;
}
.splitEffect span:nth-of-type(18) {
  animation-delay: 0.54s !important;
}
.splitEffect span:nth-of-type(19) {
  animation-delay: 0.57s !important;
}
.splitEffect span:nth-of-type(20) {
  animation-delay: 0.6s !important;
}
.splitEffect span:nth-of-type(21) {
  animation-delay: 0.63s !important;
}
.splitEffect span:nth-of-type(22) {
  animation-delay: 0.66s !important;
}
.splitEffect span:nth-of-type(23) {
  animation-delay: 0.69s !important;
}
.splitEffect span:nth-of-type(24) {
  animation-delay: 0.72s !important;
}
.splitEffect span:nth-of-type(25) {
  animation-delay: 0.75s !important;
}
.splitEffect span:nth-of-type(26) {
  animation-delay: 0.78s !important;
}
.splitEffect span:nth-of-type(27) {
  animation-delay: 0.81s !important;
}
.splitEffect span:nth-of-type(28) {
  animation-delay: 0.84s !important;
}
.splitEffect span:nth-of-type(29) {
  animation-delay: 0.87s !important;
}
.splitEffect span:nth-of-type(30) {
  animation-delay: 0.9s !important;
}
.splitEffect.is-animate span {
  animation: se1 0.5s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
@keyframes se1 {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0%);
  }
}
.splitEffect.is-animate.delay200 span:nth-of-type(1) {
  animation-delay: 0.23s !important;
}
.splitEffect.is-animate.delay200 span:nth-of-type(2) {
  animation-delay: 0.26s !important;
}
.splitEffect.is-animate.delay200 span:nth-of-type(3) {
  animation-delay: 0.29s !important;
}
.splitEffect.is-animate.delay200 span:nth-of-type(4) {
  animation-delay: 0.32s !important;
}
.splitEffect.is-animate.delay200 span:nth-of-type(5) {
  animation-delay: 0.35s !important;
}
.splitEffect.is-animate.delay200 span:nth-of-type(6) {
  animation-delay: 0.38s !important;
}
.splitEffect.is-animate.delay200 span:nth-of-type(7) {
  animation-delay: 0.41s !important;
}
.splitEffect.is-animate.delay200 span:nth-of-type(8) {
  animation-delay: 0.44s !important;
}
.splitEffect.is-animate.delay200 span:nth-of-type(9) {
  animation-delay: 0.47s !important;
}
.splitEffect.is-animate.delay200 span:nth-of-type(10) {
  animation-delay: 0.5s !important;
}
.splitEffect.is-animate.delay200 span:nth-of-type(11) {
  animation-delay: 0.53s !important;
}
.splitEffect.is-animate.delay200 span:nth-of-type(12) {
  animation-delay: 0.56s !important;
}
.splitEffect.is-animate.delay200 span:nth-of-type(13) {
  animation-delay: 0.59s !important;
}
.splitEffect.is-animate.delay200 span:nth-of-type(14) {
  animation-delay: 0.62s !important;
}
.splitEffect.is-animate.delay200 span:nth-of-type(15) {
  animation-delay: 0.65s !important;
}
.splitEffect.is-animate.delay200 span:nth-of-type(16) {
  animation-delay: 0.68s !important;
}
.splitEffect.is-animate.delay200 span:nth-of-type(17) {
  animation-delay: 0.71s !important;
}
.splitEffect.is-animate.delay200 span:nth-of-type(18) {
  animation-delay: 0.74s !important;
}
.splitEffect.is-animate.delay200 span:nth-of-type(19) {
  animation-delay: 0.77s !important;
}
.splitEffect.is-animate.delay200 span:nth-of-type(20) {
  animation-delay: 0.8s !important;
}
.splitEffect.is-animate.delay200 span:nth-of-type(21) {
  animation-delay: 0.83s !important;
}
.splitEffect.is-animate.delay200 span:nth-of-type(22) {
  animation-delay: 0.86s !important;
}
.splitEffect.is-animate.delay200 span:nth-of-type(23) {
  animation-delay: 0.89s !important;
}
.splitEffect.is-animate.delay200 span:nth-of-type(24) {
  animation-delay: 0.92s !important;
}
.splitEffect.is-animate.delay200 span:nth-of-type(25) {
  animation-delay: 0.95s !important;
}
.splitEffect.is-animate.delay200 span:nth-of-type(26) {
  animation-delay: 0.98s !important;
}
.splitEffect.is-animate.delay200 span:nth-of-type(27) {
  animation-delay: 1.01s !important;
}
.splitEffect.is-animate.delay200 span:nth-of-type(28) {
  animation-delay: 1.04s !important;
}
.splitEffect.is-animate.delay200 span:nth-of-type(29) {
  animation-delay: 1.07s !important;
}
.splitEffect.is-animate.delay200 span:nth-of-type(30) {
  animation-delay: 1.1s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(1) {
  animation-delay: 0.43s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(2) {
  animation-delay: 0.46s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(3) {
  animation-delay: 0.49s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(4) {
  animation-delay: 0.52s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(5) {
  animation-delay: 0.55s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(6) {
  animation-delay: 0.58s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(7) {
  animation-delay: 0.61s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(8) {
  animation-delay: 0.64s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(9) {
  animation-delay: 0.67s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(10) {
  animation-delay: 0.7s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(11) {
  animation-delay: 0.73s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(12) {
  animation-delay: 0.76s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(13) {
  animation-delay: 0.79s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(14) {
  animation-delay: 0.82s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(15) {
  animation-delay: 0.85s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(16) {
  animation-delay: 0.88s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(17) {
  animation-delay: 0.91s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(18) {
  animation-delay: 0.94s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(19) {
  animation-delay: 0.97s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(20) {
  animation-delay: 1s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(21) {
  animation-delay: 1.03s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(22) {
  animation-delay: 1.06s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(23) {
  animation-delay: 1.09s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(24) {
  animation-delay: 1.12s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(25) {
  animation-delay: 1.15s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(26) {
  animation-delay: 1.18s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(27) {
  animation-delay: 1.21s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(28) {
  animation-delay: 1.24s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(29) {
  animation-delay: 1.27s !important;
}
.splitEffect.is-animate.delay400 span:nth-of-type(30) {
  animation-delay: 1.3s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(1) {
  animation-delay: 0.63s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(2) {
  animation-delay: 0.66s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(3) {
  animation-delay: 0.69s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(4) {
  animation-delay: 0.72s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(5) {
  animation-delay: 0.75s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(6) {
  animation-delay: 0.78s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(7) {
  animation-delay: 0.81s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(8) {
  animation-delay: 0.84s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(9) {
  animation-delay: 0.87s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(10) {
  animation-delay: 0.9s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(11) {
  animation-delay: 0.93s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(12) {
  animation-delay: 0.96s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(13) {
  animation-delay: 0.99s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(14) {
  animation-delay: 1.02s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(15) {
  animation-delay: 1.05s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(16) {
  animation-delay: 1.08s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(17) {
  animation-delay: 1.11s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(18) {
  animation-delay: 1.14s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(19) {
  animation-delay: 1.17s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(20) {
  animation-delay: 1.2s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(21) {
  animation-delay: 1.23s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(22) {
  animation-delay: 1.26s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(23) {
  animation-delay: 1.29s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(24) {
  animation-delay: 1.32s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(25) {
  animation-delay: 1.35s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(26) {
  animation-delay: 1.38s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(27) {
  animation-delay: 1.41s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(28) {
  animation-delay: 1.44s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(29) {
  animation-delay: 1.47s !important;
}
.splitEffect.is-animate.delay600 span:nth-of-type(30) {
  animation-delay: 1.5s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(1) {
  animation-delay: 0.83s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(2) {
  animation-delay: 0.86s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(3) {
  animation-delay: 0.89s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(4) {
  animation-delay: 0.92s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(5) {
  animation-delay: 0.95s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(6) {
  animation-delay: 0.98s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(7) {
  animation-delay: 1.01s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(8) {
  animation-delay: 1.04s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(9) {
  animation-delay: 1.07s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(10) {
  animation-delay: 1.1s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(11) {
  animation-delay: 1.13s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(12) {
  animation-delay: 1.16s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(13) {
  animation-delay: 1.19s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(14) {
  animation-delay: 1.22s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(15) {
  animation-delay: 1.25s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(16) {
  animation-delay: 1.28s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(17) {
  animation-delay: 1.31s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(18) {
  animation-delay: 1.34s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(19) {
  animation-delay: 1.37s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(20) {
  animation-delay: 1.4s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(21) {
  animation-delay: 1.43s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(22) {
  animation-delay: 1.46s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(23) {
  animation-delay: 1.49s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(24) {
  animation-delay: 1.52s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(25) {
  animation-delay: 1.55s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(26) {
  animation-delay: 1.58s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(27) {
  animation-delay: 1.61s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(28) {
  animation-delay: 1.64s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(29) {
  animation-delay: 1.67s !important;
}
.splitEffect.is-animate.delay800 span:nth-of-type(30) {
  animation-delay: 1.7s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(1) {
  animation-delay: 1.03s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(2) {
  animation-delay: 1.06s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(3) {
  animation-delay: 1.09s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(4) {
  animation-delay: 1.12s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(5) {
  animation-delay: 1.15s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(6) {
  animation-delay: 1.18s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(7) {
  animation-delay: 1.21s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(8) {
  animation-delay: 1.24s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(9) {
  animation-delay: 1.27s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(10) {
  animation-delay: 1.3s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(11) {
  animation-delay: 1.33s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(12) {
  animation-delay: 1.36s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(13) {
  animation-delay: 1.39s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(14) {
  animation-delay: 1.42s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(15) {
  animation-delay: 1.45s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(16) {
  animation-delay: 1.48s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(17) {
  animation-delay: 1.51s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(18) {
  animation-delay: 1.54s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(19) {
  animation-delay: 1.57s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(20) {
  animation-delay: 1.6s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(21) {
  animation-delay: 1.63s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(22) {
  animation-delay: 1.66s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(23) {
  animation-delay: 1.69s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(24) {
  animation-delay: 1.72s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(25) {
  animation-delay: 1.75s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(26) {
  animation-delay: 1.78s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(27) {
  animation-delay: 1.81s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(28) {
  animation-delay: 1.84s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(29) {
  animation-delay: 1.87s !important;
}
.splitEffect.is-animate.delay1000 span:nth-of-type(30) {
  animation-delay: 1.9s !important;
}

html {
  font-size: 1.5vw;
}

html.is-lock, body.is-lock {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  line-height: 1.7;
  color: #333;
  font-family: "toyota_type", "SweiGothicCJKsc-Black", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  overflow-x: hidden;
  background: url(../img/bg-4.webp), url(../img/bg-4.webp), url(../img/bg-4.webp), url(../img/bg-4.webp), url(../img/bg-4.webp), url(../img/bg-4.webp), radial-gradient(circle, #ca1420, transparent 70%), radial-gradient(circle, #ca1420, transparent 70%), radial-gradient(circle, #ca1420, transparent 70%), radial-gradient(circle, rgba(245, 239, 192, 0.5), transparent 70%), radial-gradient(circle, rgba(245, 239, 192, 0.5), transparent 70%), radial-gradient(circle, rgba(245, 239, 192, 0.5), transparent 70%), radial-gradient(circle, rgba(245, 239, 192, 0.5), transparent 70%), url(../img/bg-3.png);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  background-size: 60%, 60%, 60%, 60%, 60%, 60%, 50rem 50rem, 50rem 50rem, 50rem 50rem, 40rem 40rem, 40rem 40rem, 40rem 40rem, 40rem 40rem, auto;
  background-position: 140% 60%, -20% 28%, 110% 40%, -20% 50%, -20% 85%, 110% 100%, -20% 75%, -90% 50%, -50% 120%, -50% -20%, 140% 20%, -50% 45%, 160% 55%, 0 0;
  text-align: left;
}
body.lock {
  overflow: hidden;
}

* {
  -webkit-text-size-adjust: none;
          text-size-adjust: none;
}

.g-wrap {
  width: 100%;
  position: relative;
  margin: 0 auto;
  position: relative;
}
.g-wrap img {
  max-width: 100%;
}
.g-wrap .frames {
  position: relative;
  top: 0;
  left: 0;
}
.g-wrap .frames:before {
  content: "";
  border: 0.2rem solid #ded6a6;
  position: absolute;
  top: 1rem;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
}
.g-wrap .frames [class^=frame-] {
  width: 3rem;
  height: 4rem;
  background: url(../img/deco-corner.svg) no-repeat;
  background-size: 100%;
  position: absolute;
}
.g-wrap .frames .frame-1 {
  top: 1.5rem;
  left: 1.6rem;
  transform: scale(-1, -1);
}
.g-wrap .frames .frame-2 {
  top: 1.5rem;
  right: 1.6rem;
  transform: scale(1, -1);
}
.g-wrap .frames .frame-3 {
  bottom: 1.5rem;
  left: 1.6rem;
  transform: scale(-1, 1);
}
.g-wrap .frames .frame-4 {
  bottom: 1.5rem;
  right: 1.6rem;
}

.g-section {
  position: relative;
}
#g-kv {
  height: 31.7rem;
}
#g-kv #g-logo {
  position: absolute;
  width: 8rem;
  top: 8%;
  left: 5%;
  z-index: 1;
  background: #f48378;
  border-radius: 50rem;
  padding: 0.5rem;
}
#g-kv #g-logo img {
  width: 100%;
}
#g-kv .chars {
  width: 31rem;
  height: 27.9rem;
  position: absolute;
  bottom: 0;
  left: 0.2%;
}
#g-kv .chars .deco-road {
  width: 100%;
  height: 100%;
}
#g-kv .chars .deco-car-1 {
  width: 5rem;
  height: 3.4rem;
  top: 21%;
  left: 26.3%;
}
#g-kv .chars .deco-ballon {
  width: 3rem;
  height: 4.2rem;
  top: 60.8%;
  left: 9%;
}
#g-kv .chars .deco-bear {
  width: 3.5rem;
  height: 2.9rem;
  top: 49.5%;
  left: 27.7%;
}
#g-kv .chars .deco-building {
  width: 11rem;
  height: 5.3rem;
  top: 41.4%;
  left: 45.3%;
}
#g-kv .chars .deco-lake {
  width: 8.6rem;
  height: 6rem;
  top: 65.2%;
  left: 23.3%;
}
#g-kv .chars .deco-mango {
  width: 2.6rem;
  height: 2.3rem;
  top: 59.7%;
  left: 92.6%;
}
#g-kv .chars .deco-mountain {
  width: 5rem;
  height: 4.8rem;
  top: 73%;
  left: 72%;
}
#g-kv .chars .deco-queen {
  width: 2.6rem;
  height: 4.8rem;
  top: 74.4%;
  left: 55.3%;
}
#g-kv header {
  position: absolute;
  top: 12.5%;
  left: 26%;
  width: 32rem;
  height: 10.7rem;
  opacity: 0;
}
#g-kv header h1 {
  background: url(../img/text-h1.svg) no-repeat;
  background-size: 100%;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0.2rem 0.2rem #cc3a32);
  text-indent: -9999rem;
}
#g-kv header .deco-sakura-1 {
  width: 2.4rem;
  height: 2.4rem;
  top: 0;
  left: 54%;
  transform: rotate(109deg);
  filter: drop-shadow(0.2rem 0rem 0.4rem #cc3a32);
}
#g-kv header .deco-sakura-2 {
  width: 2.3rem;
  height: 2.3rem;
  top: 29.8%;
  left: 98%;
  transform: rotate(48deg);
  filter: drop-shadow(0 0.2rem 0.4rem #cc3a32);
}
#g-kv .benefit {
  width: 33.5%;
  position: absolute;
  top: 53.2%;
  left: 52.2%;
  text-align: center;
  font-size: 1.5rem;
  padding-bottom: 0.8rem;
  background: #d94032;
  border-radius: 3rem;
}
#g-kv .benefit time {
  background: #f5efc0;
  color: #cc3a32;
  border-radius: 2rem;
  display: block;
  width: 61%;
  margin: -1rem auto 0;
}
#g-kv .benefit p {
  background: url(../img/deco-brush.webp) no-repeat 50% 100%;
  background-size: 100%;
  display: inline-block;
  padding: 0 1.3rem;
  color: #fff;
}
#g-kv .btns {
  margin-top: 0.8rem;
}
#g-kv .btns a {
  box-shadow: 0 0 1rem #ca1420;
}
#g-kv .deco-envelope {
  width: 5.8rem;
  height: 6.7rem;
  top: 6.3rem;
  left: 12.9rem;
  background: url(../img/gift.webp) no-repeat;
  background-size: 100%;
  position: absolute;
  z-index: 1;
  filter: drop-shadow(0.05rem 0 0 #ded6a6) drop-shadow(0 0.05rem 0 #ded6a6) drop-shadow(-0.05rem 0 0 #ded6a6) drop-shadow(0 -0.05rem 0 #ded6a6);
  outline: 0;
  pointer-events: none;
}
#g-kv .deco-sakuras-1 {
  width: 5.6rem;
  height: 6rem;
  top: -7.4%;
  left: -12%;
}
#g-kv .deco-sakuras-2 {
  width: 7.2rem;
  height: 8rem;
  top: 31.8%;
  left: 83.4%;
  transform: rotate(-41deg);
}
#g-kv .deco-blur-spot-1 {
  width: 30%;
  height: 30%;
  top: 54%;
  left: 56%;
  background: #f5efc0;
  border-radius: 50%;
  position: absolute;
  filter: blur(3rem);
}
#g-kv.is-animate header {
  animation: kv_header_in 0.5s forwards;
}
@keyframes kv_header_in {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(-10%);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

[class^=deco-] {
  position: absolute;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100%;
  width: 3rem;
  height: 3rem;
}

.deco-road {
  background-image: url(../img/deco-road.svg?v3);
}

.deco-car-1 {
  background-image: url(../img/deco-car-1.svg);
}

.deco-car-2 {
  background-image: url(../img/deco-car-2.svg);
}

.deco-ballon {
  background-image: url(../img/deco-ballon.svg);
}

.deco-bear {
  background-image: url(../img/deco-bear.svg);
}

.deco-building {
  background-image: url(../img/deco-building.svg);
}

.deco-lake {
  background-image: url(../img/deco-lake.svg);
}

.deco-mango {
  background-image: url(../img/deco-mango.svg);
}

.deco-mountain {
  background-image: url(../img/deco-mountain.svg);
}

.deco-queen {
  background-image: url(../img/deco-queen.svg);
}

.deco-bubble {
  background-image: url(../img/deco-bubble.svg);
}

.deco-lantern {
  background-image: url(../img/deco-lantern.svg);
}

.deco-sakura-1 {
  background-image: url(../img/deco-sakura-1.svg);
}

.deco-sakura-2 {
  background-image: url(../img/deco-sakura-1.svg);
}

[class^=deco-sakuras-] {
  background-image: url(../img/deco-sakuras.svg);
}

.text-border-1 {
  color: #fff;
  background: #fff;
  background-size: 100% 100%;
  -webkit-background-clip: text;
  -webkit-text-stroke: 0.4rem transparent;
  padding: 0 0.5rem;
}

.text-gradient-1 {
  position: relative;
  display: inline-block;
  color: transparent;
}
.text-gradient-1:before, .text-gradient-1:after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: -0.2rem;
  white-space: nowrap;
  text-indent: 0;
  width: 100%;
  padding: 0 0.2rem;
}
.text-gradient-1:after {
  background: linear-gradient(to bottom, #ffad34, #9a6e2c);
  font-weight: bold;
  background-size: 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: 1s;
  text-align: center;
  color: #fff;
}
.text-gradient-1:before {
  color: #fff;
  background: #fff;
  background-size: 100% 100%;
  -webkit-background-clip: text;
  -webkit-text-stroke: 0.4rem transparent;
}

#g-nav {
  background: url(../img/bg-1.png) no-repeat;
  background-size: 100% 100%;
  outline: 1px solid red;
  position: relative;
  top: 0;
  left: 12.5%;
  z-index: 5;
  width: 75%;
  border: 0.2rem solid #f5efc0;
  box-shadow: 0 0.5rem 2rem #cc3a32;
  border-radius: 5rem;
}
#g-nav #nav-car {
  position: absolute;
  top: -1.2rem;
  left: -1.5rem;
  filter: drop-shadow(0 0 1rem #f5efc0) drop-shadow(0 0 1rem #f5efc0);
  transform: translateX(80%);
}
#g-nav ol {
  display: flex;
  justify-content: center;
  align-items: center;
}
#g-nav li {
  padding: 0 0.5rem;
  position: relative;
}
#g-nav li:after {
  content: "";
  width: 0.8rem;
  height: 0.8rem;
  background: url(../img/deco-knot.svg) no-repeat center;
  background-size: 100%;
  position: absolute;
  left: 100%;
  top: 50%;
  margin-top: -0.4rem;
  filter: brightness(2000%);
}
#g-nav li:last-child:after {
  display: none;
}
#g-nav li:hover a, #g-nav li.active a {
  color: #ca1420;
}
#g-nav a {
  font-size: 1.1rem;
  color: #533100;
  display: block;
  padding: 0.6rem 0.9rem;
  text-align: center;
  line-height: 1.2;
  position: relative;
  text-shadow: 0 0 0.2rem #fff, 0 0 0.2rem #fff, 0 0 0.2rem #fff;
  transition: 0.2s;
}
#g-nav a small {
  font-size: 0.9rem;
}

#g-maintain, #g-tire, #g-altis-tss, #g-car-parts, #g-beauty {
  width: 75%;
  margin: 6.2rem auto -0.4rem;
  position: relative;
  padding: 0.4rem;
  background: #fff;
  border-radius: 0.7rem;
  box-shadow: 0 0.5rem 2rem rgba(83, 49, 0, 0.2);
}
#g-maintain header, #g-tire header, #g-altis-tss header, #g-car-parts header, #g-beauty header {
  background: url(../img/bg-2.png);
  background-size: auto 100%;
  border-radius: 0.6rem;
  width: 80%;
  margin: -2.5rem auto 0;
  border-bottom: 0.1rem solid #533100;
  position: relative;
}
#g-maintain header:after, #g-tire header:after, #g-altis-tss header:after, #g-car-parts header:after, #g-beauty header:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 1.8rem 0.6rem 0 0;
  border-color: rgba(83, 49, 0, 0.5) transparent transparent transparent;
  position: absolute;
  bottom: 0.4rem;
  left: 100%;
  border-top-right-radius: 0.3rem;
}
#g-maintain header h2, #g-tire header h2, #g-altis-tss header h2, #g-car-parts header h2, #g-beauty header h2 {
  font-size: 2rem;
  font-style: italic;
  color: #6a4511;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  filter: drop-shadow(0 0 0.1rem #fff) drop-shadow(0 0 0.1rem #fff) drop-shadow(0 0 0.1rem #fff);
}
#g-maintain header h2:before, #g-maintain header h2:after, #g-tire header h2:before, #g-tire header h2:after, #g-altis-tss header h2:before, #g-altis-tss header h2:after, #g-car-parts header h2:before, #g-car-parts header h2:after, #g-beauty header h2:before, #g-beauty header h2:after {
  content: "";
  width: 1.3rem;
  height: 1.3rem;
  background: url(../img/deco-knot.svg) no-repeat;
  background-size: 100%;
  display: inline-block;
  margin: 0 0.5rem;
}
#g-maintain [class^=deco-], #g-tire [class^=deco-], #g-altis-tss [class^=deco-], #g-car-parts [class^=deco-], #g-beauty [class^=deco-] {
  filter: drop-shadow(0 0.4rem 0.5rem rgba(83, 49, 0, 0.5));
}

.borders {
  border-style: solid;
  border-width: 1.6rem;
  border-image: url(../img/frame.svg);
  border-image-slice: 12% 3.3% fill;
  border-image-repeat: stretch;
  background-color: transparent;
  margin-top: -0.9rem;
}

#g-maintain .five-maintain {
  width: 66%;
  margin: -1rem 0 0.2rem 5.5%;
}
#g-maintain .five-maintain h3 {
  font-size: 1.8rem;
  font-weight: bold;
  width: 100%;
  color: #a9824c;
}
#g-maintain .five-maintain h3 b {
  font-size: 180%;
}
#g-maintain .five-maintain h3:before, #g-maintain .five-maintain h3:after {
  content: "";
  width: 3rem;
  height: 0.1rem;
  background: rgba(169, 130, 76, 0.3);
  display: inline-block;
  vertical-align: middle;
  margin: 0 0.4rem;
}
#g-maintain .five-maintain ol {
  width: 100%;
  display: flex;
  margin-top: 0.2rem;
}
#g-maintain .five-maintain li {
  width: 20%;
  text-align: center;
  opacity: 0;
  transition: 1s;
}
#g-maintain .five-maintain p {
  font-size: 0.9rem;
  color: #474646;
  margin-top: 0.2rem;
}
#g-maintain .five-maintain [class^=icon-maintain-] {
  background: url(../img/icon-maintain.svg) no-repeat;
  background-size: 500%;
  width: 4.1rem;
  height: 3.6rem;
  display: block;
  margin: 0 auto;
}
#g-maintain .five-maintain .icon-maintain-2 {
  background-position: 25% 0;
}
#g-maintain .five-maintain .icon-maintain-3 {
  background-position: 50% 0;
}
#g-maintain .five-maintain .icon-maintain-4 {
  background-position: 75% 0;
}
#g-maintain .five-maintain .icon-maintain-5 {
  background-position: 100% 0;
}
#g-maintain .gift {
  position: absolute;
  width: 12rem;
  top: -1.3rem;
  left: 70.3%;
  opacity: 0;
}
#g-maintain .gift img {
  width: 100%;
}
#g-maintain .gift p {
  background: linear-gradient(145deg, #fff, #e1d5a6 70%);
  line-height: 2;
  letter-spacing: 0.1rem;
  font-size: 1.2rem;
  border-radius: 50rem;
  padding: 0 1.2rem;
  color: #cc3a32;
  position: absolute;
  top: 95%;
  left: -4%;
}
#g-maintain .deco-building {
  width: 11.1rem;
  height: 5.4rem;
  top: 67%;
  left: -11.3%;
}
#g-maintain.is-animate .five-maintain li {
  animation: five_maintain 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes five_maintain {
  0% {
    transform: translateY(10%) scale(2);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}
#g-maintain.is-animate .five-maintain li:nth-of-type(1) {
  animation-delay: 0.2s;
}
#g-maintain.is-animate .five-maintain li:nth-of-type(2) {
  animation-delay: 0.4s;
}
#g-maintain.is-animate .five-maintain li:nth-of-type(3) {
  animation-delay: 0.6s;
}
#g-maintain.is-animate .five-maintain li:nth-of-type(4) {
  animation-delay: 0.8s;
}
#g-maintain.is-animate .five-maintain li:nth-of-type(5) {
  animation-delay: 1s;
}
#g-maintain.is-animate .gift {
  animation: gift_show 1s 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  transform-origin: 50% 110%;
}
@keyframes gift_show {
  0% {
    transform: rotate(20deg) scale(0.5);
    opacity: 0;
  }
  100% {
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }
}

[class^=icon-star-] {
  width: 3rem;
  height: 3rem;
  background: url(../img/icon-star.svg) no-repeat;
  background-size: 400%;
  position: absolute;
  animation: icon_star_yellow 0.9s infinite;
}
@keyframes icon_star_yellow {
  0%, 20% {
    background-position: -100% 0;
  }
  20.1%, 40% {
    background-position: 0 0;
  }
  40.1%, 60% {
    background-position: 33.3% 0;
  }
  60.1%, 80% {
    background-position: 66.6% 0;
  }
  80.1%, 100% {
    background-position: 100% 0;
  }
}

#g-tire .txt h3, #g-altis-ss .txt h3, #g-beauty .txt h3 {
  color: #a9824c;
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: 0.05rem;
}
#g-tire .txt h3 b, #g-altis-ss .txt h3 b, #g-beauty .txt h3 b {
  font-size: 150%;
}
#g-tire .txt p, #g-altis-ss .txt p, #g-beauty .txt p {
  line-height: 1.6;
  letter-spacing: 0.05rem;
}
#g-tire .txt .note, #g-altis-ss .txt .note, #g-beauty .txt .note {
  font-size: 0.5rem;
  display: block;
}
#g-tire .txt .price, #g-altis-ss .txt .price, #g-beauty .txt .price {
  margin-bottom: -1rem;
}
#g-tire .txt .price b, #g-altis-ss .txt .price b, #g-beauty .txt .price b {
  font-size: 2.2rem;
  font-weight: normal;
  transform: skew(-10deg);
  display: inline-block;
  line-height: 1;
}
#g-tire .txt .price small, #g-altis-ss .txt .price small, #g-beauty .txt .price small {
  display: inline-block;
}

#g-tire .txt {
  margin-left: 21%;
  margin-right: 2.5%;
  padding-bottom: 2.2rem;
  text-align: justify;
}
#g-tire .img {
  position: absolute;
  top: -17.3%;
  left: 5%;
  width: 8.9rem;
  height: 19.4rem;
}
#g-tire .img img {
  width: 100%;
  opacity: 0;
}
#g-tire .g-bt-2 {
  position: absolute;
  top: 70%;
  right: 6%;
}
#g-tire .deco-mountain {
  width: 8rem;
  height: 8.4rem;
  top: 54%;
  right: -13.3%;
}
#g-tire .deco-ballon {
  width: 3.5rem;
  height: 5rem;
  top: -50%;
  left: 80%;
}
#g-tire.is-animate .img img {
  animation: tire_kv_in 0.5s forwards;
}
@keyframes tire_kv_in {
  0% {
    opacity: 0;
    transform: translateY(20%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

#g-beauty .borders, #g-altis-tss .borders {
  height: 13.3rem;
}
#g-beauty header, #g-altis-tss header {
  z-index: 1;
}
#g-beauty header h2 i, #g-altis-tss header h2 i {
  width: 1rem;
  position: relative;
  top: -0.5rem;
}
#g-beauty header h2 i:nth-of-type(1), #g-altis-tss header h2 i:nth-of-type(1) {
  left: 0.2rem;
}
#g-beauty .txt, #g-altis-tss .txt {
  width: 58%;
  text-align: center;
  padding-top: 1.4rem;
  letter-spacing: 0.05rem;
}
#g-beauty .img, #g-altis-tss .img {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 47.5%;
}
#g-beauty .img img, #g-altis-tss .img img {
  width: 100%;
}

#g-beauty .txt {
  text-align: left;
}
#g-beauty .g-bt-2 {
  margin-top: 0.9rem;
  margin-left: 31%;
}
#g-beauty .deco-mango {
  width: 3.8rem;
  height: 3.4rem;
  top: -15%;
  right: 5.4%;
  transform: rotate(-28deg);
  z-index: 1;
}
#g-beauty .deco-lake {
  width: 11.1rem;
  height: 7.4rem;
  top: 64%;
  left: -13%;
}
#g-beauty .deco-bubble {
  width: 3.6rem;
  height: 8.4rem;
  top: 59%;
  right: -10.7%;
  transform: rotate(9deg);
}
#g-beauty .note {
  margin-left: 16%;
  margin-top: 0.5rem;
  opacity: 0.5;
}

#g-altis-tss .txt {
  margin-top: -0.2rem;
}
#g-altis-tss .txt p b {
  font-size: 170%;
  line-height: 1;
}
#g-altis-tss h3 {
  background: #e95f52;
  color: #fff;
  position: relative;
  font-size: 1.2rem;
  line-height: 1.8;
  width: 68%;
  margin: 0 auto 0.5rem;
}
#g-altis-tss h3:before, #g-altis-tss h3:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 1.05rem 0 1.05rem 0.6rem;
  border-color: transparent transparent transparent #fff;
  top: 0;
  position: absolute;
}
#g-altis-tss h3:before {
  left: 0;
}
#g-altis-tss h3:after {
  right: 0;
  transform: scale(-1, 1);
}
#g-altis-tss .g-bt-2 {
  margin-top: 0.5rem;
}
#g-altis-tss .deco-bear {
  width: 6.2rem;
  height: 5.1rem;
  top: 98.3%;
  left: -16.7%;
}
#g-altis-tss .deco-lantern {
  width: 4.5rem;
  height: 5.7rem;
  top: -23.7%;
  left: 10.7%;
  z-index: 1;
}
#g-altis-tss .note {
  color: #fff;
  font-size: 0.5rem;
  display: block;
  position: absolute;
  bottom: 0.3rem;
  left: 0%;
  width: 100%;
  text-align: center;
}

#g-car-parts h2 b {
  font-size: 160%;
  line-height: 1;
  margin-right: 0.2rem;
}
#g-car-parts .borders > .note {
  text-align: center;
  display: block;
  font-size: 0.6rem;
  color: #858484;
  font-family: "toyota_type", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  margin-bottom: -1.3rem;
}
#g-car-parts .parts-li {
  width: 106%;
  margin-left: -3%;
  display: flex;
  flex-wrap: wrap;
  perspective: 50rem;
}
#g-car-parts .parts-li:before, #g-car-parts .parts-li:after {
  content: "";
  position: absolute;
}
#g-car-parts .parts-li:before {
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, transparent 3%, rgba(169, 130, 76, 0.5) 3.1%, rgba(169, 130, 76, 0.5) 97%, transparent 97.1%);
  top: 50%;
  left: 0;
}
#g-car-parts .parts-li:after {
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, transparent 3%, rgba(169, 130, 76, 0.5) 3.1%, rgba(169, 130, 76, 0.5) 97%, transparent 97.1%);
  top: 0;
  left: 50%;
}
#g-car-parts .parts-li > li {
  width: 50%;
  height: 7rem;
  opacity: 0;
  position: relative;
  padding-left: 3.1%;
  padding-top: 0.5rem;
}
#g-car-parts .parts-li > li:first-child h4 {
  margin-bottom: 1rem;
}
#g-car-parts .parts-li p {
  font-family: "toyota_type", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}
#g-car-parts .parts-li .note {
  font-size: 0.5rem;
  color: #8a8a8a;
  display: block;
  font-family: "toyota_type", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}
#g-car-parts .txt {
  width: 57%;
}
#g-car-parts .txt h4 {
  color: #a9824c;
  font-size: 1rem;
  letter-spacing: 0.05rem;
  position: relative;
  display: inline-block;
  margin-bottom: 0.2rem;
}
#g-car-parts .txt h4 small {
  font-size: 0.6rem;
  letter-spacing: 0;
  position: absolute;
  top: 80%;
  left: 0;
}
#g-car-parts .txt p {
  font-size: 0.7rem;
  line-height: 1.4;
}
#g-car-parts .list-label li {
  font-size: 0.7rem;
  line-height: 1.4;
  font-family: "toyota_type", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}
#g-car-parts img {
  width: 9.4rem;
  position: absolute;
  top: 0.5rem;
  right: 4%;
}
#g-car-parts .deco-sakuras-1 {
  width: 6.7rem;
  height: 6.6rem;
  top: -25.1%;
  right: -10.5%;
}
#g-car-parts.is-animate .parts-li li {
  animation: parts_show 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes parts_show {
  0% {
    transform: rotateX(90deg);
    opacity: 0;
  }
  100% {
    transform: rotateX(0);
    opacity: 1;
  }
}
#g-car-parts.is-animate .parts-li li:nth-of-type(1) {
  animation-delay: 0.2s;
}
#g-car-parts.is-animate .parts-li li:nth-of-type(2) {
  animation-delay: 0.4s;
}
#g-car-parts.is-animate .parts-li li:nth-of-type(3) {
  animation-delay: 0.6s;
}
#g-car-parts.is-animate .parts-li li:nth-of-type(4) {
  animation-delay: 0.8s;
}

.g-note {
  width: 75%;
  margin: 0 auto;
  padding-left: 13%;
  padding-top: 2.8rem;
  padding-bottom: 4rem;
  font-size: 0.85rem;
  font-family: "toyota_type", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  color: #fff;
  position: relative;
}
.g-note .list-dot li {
  padding-left: 1.2rem;
}
.g-note .list-dot li:before {
  top: 0.6rem;
  left: 0.4rem;
  background: #fff;
}
.g-note .deco-sakuras-1 {
  width: 6.4rem;
  height: 6.6rem;
  top: 23.3%;
  left: 0.3%;
  transform: rotate(22deg);
}

.g-hr {
  display: block;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 4% 0;
}

.list-label > li {
  position: relative;
  padding-left: 1rem;
}
.list-label > li .label {
  position: absolute;
  top: 0;
  left: 0;
}

.list-dot > li {
  padding-left: 1.6rem;
  position: relative;
}
.list-dot > li:before {
  content: "";
  position: absolute;
  top: 1.2rem;
  left: 0.4rem;
  width: 0.2rem;
  height: 0.2rem;
  background-color: #000;
  border-radius: 50%;
}

#g-gotop {
  background: rgba(245, 239, 192, 0.82);
  border-radius: 200px;
  width: 5vw;
  height: 5vw;
  padding: 1vw 0;
  cursor: pointer;
  transition: 0.2s;
  position: fixed;
  bottom: -10vw;
  right: 2%;
  z-index: 7;
  transition: 0.4s;
  box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.2);
}
#g-gotop i {
  width: 1.5vw;
  height: 1vw;
  background: url(../img/icon-up-fff.svg) no-repeat center;
  background-size: 100%;
  margin: 0 auto;
  display: block;
}
#g-gotop p {
  font-size: 1.5vw;
  color: #fff;
  font-weight: bold;
  text-align: center;
}
#g-gotop:hover {
  background: #fef001;
}
#g-gotop:hover i {
  background-image: url(../img/icon-up-000.svg);
}
#g-gotop:hover p {
  color: #333;
}
#g-gotop.active {
  bottom: 2vw;
}

#g-footer {
  padding: 1rem 0 3rem;
  color: #fff;
  font-family: "toyota_type", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}
#g-footer .group {
  margin: 0 auto;
  width: 90%;
}
#g-footer .top {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.8rem;
}
#g-footer .bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0.5rem;
}
#g-footer .company {
  margin-right: 1rem;
  color: #f5efc0;
  font-size: 0.6rem;
}
#g-footer ol {
  text-align: left;
}
#g-footer ol li {
  display: inline-block;
}
#g-footer ol li:after {
  content: "|";
  display: inline-block;
  margin: 0 5px;
}
#g-footer ol li:last-child:after {
  display: none;
}
#g-footer .tel {
  color: #f5efc0;
  font-size: 0.6rem;
}
#g-footer .tel a {
  color: #f5efc0;
}
#g-footer .logo-toyota-fff {
  width: 80px;
  height: 15px;
  background: url(../img/logo-toyota-fff.svg) no-repeat center;
  background-size: 100%;
  display: inline-block;
  vertical-align: middle;
  text-indent: -9999px;
  text-align: left;
}

@media screen and (min-width: 901px) {
  .is-m {
    display: none !important;
  }
}
@media screen and (max-width: 900px) {
  .is-pc {
    display: none !important;
  }

  html {
    font-size: 3vw;
  }

  .g-wrap .frames:before {
    top: 0.5rem;
    right: 0.5rem;
    bottom: 0.5rem;
    left: 0.5rem;
  }
  .g-wrap .frames .frame-1 {
    top: 1rem;
    left: 1.1rem;
  }
  .g-wrap .frames .frame-2 {
    top: 1rem;
    right: 1.1rem;
  }
  .g-wrap .frames .frame-3 {
    bottom: 1rem;
    left: 1.1rem;
  }
  .g-wrap .frames .frame-4 {
    bottom: 1rem;
    right: 1.1rem;
  }

  #g-gotop {
    width: 5rem;
    height: 5rem;
    bottom: -10rem;
  }
  #g-gotop i {
    width: 2rem;
    height: 1.5rem;
  }
  #g-gotop p {
    font-size: 1.9rem;
    line-height: 1.2;
  }

  #g-footer {
    padding-top: 3rem;
  }
  #g-footer .logo-toyota-fff {
    display: block;
    margin: 0 auto;
    width: 100px;
    height: 21px;
  }
  #g-footer .company {
    margin-right: 0;
    font-size: 1rem;
  }
  #g-footer .top {
    font-size: 1.2rem;
  }
  #g-footer .top ol {
    text-align: center;
  }
  #g-footer .bottom {
    display: block;
    text-align: center;
    margin-top: 1rem;
  }
  #g-footer .tel {
    text-align: center;
    font-size: 1rem;
  }

  #msg-alert .msg-content header {
    font-size: 5vw;
  }

  .msg-box .msg-content {
    font-size: 3.5vw;
  }

  #g-kv {
    height: 57rem;
  }
  #g-kv #g-logo {
    width: 10rem;
    top: 5.5%;
    left: 34%;
  }
  #g-kv header {
    top: 13.5%;
    left: 8.7%;
    width: 28rem;
  }
  #g-kv .chars {
    bottom: 0;
    left: 7.2%;
    transform: scale(0.93);
    transform-origin: 0 100%;
  }
  #g-kv .chars:before {
    content: "";
    width: 100%;
    height: 5rem;
    position: absolute;
    bottom: 133%;
    left: 0;
    background: url(../img/deco-road.svg) no-repeat;
    background-size: 100%;
  }
  #g-kv .benefit {
    width: 67.5%;
    top: 39%;
    left: 17%;
  }
  #g-kv .btns {
    margin-top: 1.5rem;
  }
  #g-kv .deco-envelope {
    top: 6.7rem;
  }
  #g-kv .deco-blur-spot-1 {
    width: 70%;
    height: 24%;
    top: 40%;
    left: 17%;
  }
  #g-kv .deco-sakuras-2 {
    display: none;
  }

  .g-bt-2 {
    font-size: 1.2rem;
  }

  #nav-car {
    display: none;
  }

  #g-nav {
    width: 100%;
    left: 0;
    border-radius: 1rem;
    position: sticky;
    overflow: hidden;
  }
  #g-nav ol {
    flex-wrap: wrap;
  }
  #g-nav li {
    width: 28.5%;
    border-bottom: 1px solid #fff;
  }
  #g-nav li:nth-child(1) {
    order: 1;
  }
  #g-nav li:nth-child(1):after {
    left: 97%;
  }
  #g-nav li:nth-child(2) {
    order: 2;
    width: 40%;
  }
  #g-nav li:nth-child(2):after {
    left: 95%;
  }
  #g-nav li:nth-child(3) {
    order: 4;
    width: 50%;
  }
  #g-nav li:nth-child(4) {
    order: 5;
    width: 50%;
  }
  #g-nav li:nth-child(5) {
    order: 3;
  }
  #g-nav a {
    font-size: 1.4rem;
    height: 4rem;
    padding: 0.5rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
  }
  #g-nav a small {
    font-size: 1.1rem;
  }

  .borders {
    margin-top: -1.9rem;
    padding-top: 2rem;
  }

  #g-maintain, #g-tire, #g-altis-tss, #g-car-parts, #g-beauty {
    width: 90%;
    margin-bottom: 7rem;
  }
  #g-maintain header, #g-tire header, #g-altis-tss header, #g-car-parts header, #g-beauty header {
    margin-top: -2.5rem;
  }
  #g-maintain header h2, #g-tire header h2, #g-altis-tss header h2, #g-car-parts header h2, #g-beauty header h2 {
    font-size: 2rem;
    padding: 0.5rem 0;
  }

  #g-maintain .five-maintain {
    width: 100%;
    margin-left: 0;
  }
  #g-maintain .five-maintain ol {
    flex-wrap: wrap;
    width: 90%;
    margin: 0 auto;
  }
  #g-maintain .five-maintain ol li {
    width: 33.3%;
    margin-bottom: 2rem;
  }
  #g-maintain .five-maintain ol p {
    font-size: 1.2rem;
  }
  #g-maintain .five-maintain [class^=icon-maintain-] {
    width: 6.1rem;
    height: 5.6rem;
  }
  #g-maintain .five-maintain h3 {
    text-align: center;
    letter-spacing: 0.2rem;
    white-space: nowrap;
  }
  #g-maintain .five-maintain h3:before, #g-maintain .five-maintain h3:after {
    width: 1rem;
  }
  #g-maintain .gift {
    top: 16rem;
    left: 63.6%;
    width: 9.5rem;
  }
  #g-maintain .gift p {
    white-space: nowrap;
    margin-left: -1rem;
  }
  #g-maintain .deco-building {
    display: none;
  }

  #g-tire .img {
    top: 30%;
  }
  #g-tire .txt {
    margin-left: 30%;
    font-size: 1.2rem;
  }
  #g-tire .txt h3 {
    text-align: center;
    margin-bottom: 1rem;
    width: 140%;
    margin-left: -40%;
  }
  #g-tire .txt .g-bt-2 {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    margin-top: 1rem;
  }
  #g-tire .deco-mountain {
    width: 6rem;
    height: 8.4rem;
    top: 84%;
    right: 3.7%;
  }
  #g-tire .deco-ballon {
    display: none;
  }

  #g-beauty header {
    width: 100%;
  }
  #g-beauty header h2 {
    display: block;
    text-align: center;
    line-height: 1.2;
    padding: 1rem 0;
  }
  #g-beauty header h2:before {
    position: absolute;
    top: 40%;
    left: 3%;
  }
  #g-beauty header h2:after {
    position: absolute;
    top: 40%;
    right: 3%;
  }
  #g-beauty .g-bt-2 {
    margin-left: auto;
  }
  #g-beauty .deco-lake {
    display: none;
  }
  #g-beauty .deco-bubble {
    top: 41%;
    right: 91.3%;
  }
  #g-beauty .deco-mango {
    display: none;
  }
  #g-beauty .txt .note {
    margin-left: 0;
    font-size: 0.9rem;
  }

  #g-altis-tss header {
    width: 98%;
  }
  #g-altis-tss .deco-bear {
    top: 103.3%;
    left: 16.3%;
  }
  #g-altis-tss .deco-lantern {
    display: none;
  }
  #g-altis-tss .note {
    font-size: 0.9rem;
    position: static;
    color: #333;
    opacity: 0.5;
    margin: 1rem 0;
  }

  #g-beauty .borders, #g-altis-tss .borders {
    height: auto;
  }
  #g-beauty .img, #g-altis-tss .img {
    width: 108%;
    position: relative;
    top: 1rem;
    right: 4%;
  }
  #g-beauty .txt, #g-altis-tss .txt {
    width: 100%;
    text-align: center;
    font-size: 1.2rem;
    padding-top: 0;
  }

  #g-car-parts .borders {
    margin-top: -3.8rem;
    padding-top: 3rem;
  }
  #g-car-parts .borders > .note {
    font-size: 1rem;
    margin-bottom: 0;
  }
  #g-car-parts header h2 {
    display: block;
    line-height: 1;
    padding: 1rem 0;
    text-align: center;
  }
  #g-car-parts header h2 b {
    line-height: 0.5;
    position: relative;
    top: 0.4rem;
  }
  #g-car-parts header h2:before {
    position: absolute;
    top: 40%;
    left: 3%;
  }
  #g-car-parts header h2:after {
    position: absolute;
    top: 40%;
    right: 3%;
  }
  #g-car-parts .parts-li:before, #g-car-parts .parts-li:after {
    display: none;
  }
  #g-car-parts .parts-li > li {
    border-bottom: 1px solid rgba(169, 130, 76, 0.2);
    width: 100%;
    height: auto;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
  }
  #g-car-parts .parts-li .txt h4 {
    font-size: 1.4rem;
    letter-spacing: 0;
    white-space: nowrap;
  }
  #g-car-parts .parts-li .txt h4 small {
    font-size: 0.8rem;
  }
  #g-car-parts .parts-li .txt p {
    font-size: 1.2rem;
  }
  #g-car-parts .parts-li .list-label li {
    font-size: 1.2rem;
    padding-left: 2rem;
  }
  #g-car-parts .parts-li .note {
    font-size: 1rem;
  }
  #g-car-parts img {
    right: 2%;
  }
  #g-car-parts .deco-sakuras-1 {
    top: -55.1%;
    right: -4.5%;
  }

  .g-note {
    width: 85%;
    padding-left: 0;
    margin-top: -5rem;
    padding-bottom: 7rem;
  }
  .g-note li {
    font-size: 0.9rem;
  }
  .g-note .deco-sakuras-1 {
    top: 60%;
    left: 76%;
  }
}