@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap");
#SP_2022may .header.new {
  background-color: white;
}
#SP_2022may .bg-group {
  margin-top: 2.5rem;
  font-size: 0;
}
#SP_2022may .bg-group img {
  font-size: 1rem;
}
#SP_2022may .bg-group.bg-PC {
  display: none;
}
@media (min-width: 768px) {
  #SP_2022may .bg-group.bg-PC {
    display: block;
  }
}
#SP_2022may .bg-group.bg-M {
  display: block;
}
@media (min-width: 768px) {
  #SP_2022may .bg-group.bg-M {
    display: none;
  }
}
#SP_2022may .block-park,
#SP_2022may .block-buy,
#SP_2022may .block-testdrive,
#SP_2022may .block-play {
  position: relative;
  overflow: hidden;
}
#SP_2022may .container-fluid {
  position: absolute;
  top: 80px;
  text-align: right;
}
@media (min-width: 768px) {
  #SP_2022may .container-fluid {
    top: 100px;
    margin-top: 1.5rem;
  }
}
#SP_2022may .btn-activity {
  position: absolute;
  position: absolute;
  bottom: 5%;
  left: 33.6%;
  font-size: 10px;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid black;
  padding-bottom: 0.25px;
}
@media (min-width: 768px) {
  #SP_2022may .btn-activity {
    font-size: 1rem;
    bottom: 6%;
    left: 39.3%;
  }
}
#SP_2022may footer {
  padding: 15px 5px;
  text-align: center;
  color: #808080;
  background-color: #d7d2c7;
}
@media (min-width: 768px) {
  #SP_2022may footer {
    padding: 5px;
    position: relative;
    margin-top: -30px;
    background-color: transparent;
  }
}

.btn {
  display: inline-block;
  width: unset;
  background-color: white;
  border-color: transparent;
  text-decoration: none;
  color: black;
}
.container-fluid .btn {
  line-height: 1.25em;
  padding: 0.1rem 0.5rem 0.25rem 0.5rem;
}
.container-fluid .btn img {
  vertical-align: middle;
  height: 13px;
}
@media (min-width: 500px) {
  .container-fluid .btn {
    padding: 0.5rem 1.5rem 0.65rem 1.5rem;
  }
  .container-fluid .btn img {
    height: 16px;
  }
}
@media (min-width: 768px) {
  .container-fluid .btn {
    padding: 0.85rem 1.5rem;
  }
  .container-fluid .btn img {
    height: auto;
  }
}
.container-fluid .btn:hover {
  background-color: #d7d2c7;
  -webkit-filter: sepia(1);
          filter: sepia(1);
}
.container-fluid .btn:nth-child(1) {
  margin-right: 0.5rem;
}
.bg-group .btn {
  position: absolute;
  display: block;
  padding: 0;
  font-size: 0;
  -webkit-transition: 1s;
  transition: 1s;
  border-radius: 1px;
  border: solid 1.5px #595757;
  -webkit-animation-name: btn-animation;
          animation-name: btn-animation;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-duration: 0.75s;
          animation-duration: 0.75s;
}
@media (min-width: 768px) {
  .bg-group .btn {
    border-width: 3px;
  }
}
.bg-group .btn img {
  font: 1rem;
}
.bg-group .btn:hover {
  -webkit-animation-duration: 0.25s;
          animation-duration: 0.25s;
}
.bg-group .btn::before, .bg-group .btn::after {
  position: absolute;
  display: inline-block;
  top: 50%;
  --scale: 0.65;
  -webkit-transform: translateY(-50%) scale(var(--scale));
          transform: translateY(-50%) scale(var(--scale));
  -webkit-animation-name: arrow-animation;
          animation-name: arrow-animation;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
}
@media (min-width: 576px) {
  .bg-group .btn::before, .bg-group .btn::after {
    --scale: 0.9;
  }
}
@media (min-width: 768px) {
  .bg-group .btn::before, .bg-group .btn::after {
    --scale: 1;
  }
}
@media (min-width: 1600px) {
  .bg-group .btn::before, .bg-group .btn::after {
    --scale: 1.9;
  }
}
.bg-group .btn::after {
  -webkit-animation-delay: 0.25s;
          animation-delay: 0.25s;
}
@-webkit-keyframes arrow-animation {
  0% {
    -webkit-transform: translateY(-50%) translateX(2px) scale(var(--scale)) rotateX(0);
            transform: translateY(-50%) translateX(2px) scale(var(--scale)) rotateX(0);
  }
  100% {
    -webkit-transform: translateY(-50%) translateX(5px) scale(var(--scale)) rotateX(180deg);
            transform: translateY(-50%) translateX(5px) scale(var(--scale)) rotateX(180deg);
  }
}
@keyframes arrow-animation {
  0% {
    -webkit-transform: translateY(-50%) translateX(2px) scale(var(--scale)) rotateX(0);
            transform: translateY(-50%) translateX(2px) scale(var(--scale)) rotateX(0);
  }
  100% {
    -webkit-transform: translateY(-50%) translateX(5px) scale(var(--scale)) rotateX(180deg);
            transform: translateY(-50%) translateX(5px) scale(var(--scale)) rotateX(180deg);
  }
}
@-webkit-keyframes btn-animation {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
}
@keyframes btn-animation {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
}
.block-testdrive .btn::before, .block-testdrive .btn::after {
  content: url("../img/index/btn/polygonL.svg");
}
.block-testdrive .btn::before {
  right: 15%;
}
@media (min-width: 768px) {
  .block-testdrive .btn::before {
    right: 15%;
  }
}
.block-testdrive .btn::after {
  right: 21%;
}
@media (min-width: 768px) {
  .block-testdrive .btn::after {
    right: 21%;
  }
}
.bg-PC .block-testdrive .btn {
  bottom: 29.7%;
  right: 18.75%;
  width: 14.6%;
}
.bg-M .block-testdrive .btn {
  bottom: 30.8%;
  right: 16.7%;
  width: 23.3%;
}
.block-play .btn {
  -webkit-animation-delay: 0.25s;
          animation-delay: 0.25s;
}
.block-play .btn::before, .block-play .btn::after {
  content: url("../img/index/btn/polygonR.svg");
}
.block-play .btn::before {
  left: 9.8%;
}
@media (min-width: 768px) {
  .block-play .btn::before {
    left: 7.8%;
  }
}
.block-play .btn::after {
  left: 16%;
}
@media (min-width: 768px) {
  .block-play .btn::after {
    left: 12%;
  }
}
.bg-PC .block-play .btn {
  bottom: 11.5%;
  left: 39.3%;
  width: 25.3%;
}
.bg-M .block-play .btn {
  bottom: 12.1%;
  left: 33.6%;
  width: 27%;
}

img[src*=bg_02-text] {
  position: absolute;
  top: 0;
  right: 0;
}
img.active {
  -webkit-animation-name: car-animation;
          animation-name: car-animation;
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
  top: var(--topEnd);
  right: var(--rightEnd);
  -webkit-transform: var(--transformEnd);
          transform: var(--transformEnd);
}
@-webkit-keyframes car-animation {
  0% {
    opacity: 0;
    top: var(--topStart);
    right: var(--rightStart);
    -webkit-transform: var(--transformStart);
            transform: var(--transformStart);
  }
  100% {
    opacity: 1;
    top: var(--topEnd);
    right: var(--rightEnd);
    -webkit-transform: var(--transformEnd);
            transform: var(--transformEnd);
  }
}
@keyframes car-animation {
  0% {
    opacity: 0;
    top: var(--topStart);
    right: var(--rightStart);
    -webkit-transform: var(--transformStart);
            transform: var(--transformStart);
  }
  100% {
    opacity: 1;
    top: var(--topEnd);
    right: var(--rightEnd);
    -webkit-transform: var(--transformEnd);
            transform: var(--transformEnd);
  }
}
.bg-M img.car-1 {
  position: absolute;
}
.bg-M img.car-1.active {
  --topStart: -3.8%;
  --topEnd: 14%;
  --rightStart: -10.3%;
  --rightEnd: 16.5%;
  --transformStart: scale(0.2) rotate(-5deg);
  --transformEnd: scale(0.43) rotate(-5deg);
}
.bg-M img.car-2 {
  position: absolute;
}
.bg-M img.car-2.active {
  --topStart: -17.2%;
  --topEnd: 14%;
  --rightStart: -19.5%;
  --rightEnd: -0.5%;
  --transformStart: scale(0.25);
  --transformEnd: scale(0.34);
}
.bg-M img.car-3 {
  position: absolute;
}
.bg-M img.car-3.active {
  --topStart: 3.5%;
  --topEnd: 3.5%;
  --rightStart: -80%;
  --rightEnd: -0.65%;
  --transformStart: scale(0.6);
  --transformEnd: scale(0.6);
}
.bg-M img.car-4 {
  position: absolute;
}
.bg-M img.car-4.active {
  --topStart: -1%;
  --topEnd: 3.5%;
  --rightStart: 45%;
  --rightEnd: 22%;
  --transformStart: scale(0.5);
  --transformEnd: scale(0.54);
}
.bg-PC img.car-1 {
  position: absolute;
}
.bg-PC img.car-1.active {
  --topStart: -19.8%;
  --topEnd: -2.1%;
  --rightStart: -9.3%;
  --rightEnd: 14.5%;
  --transformStart: scale(0.33) rotate(-5deg);
  --transformEnd: scale(0.495) rotate(-5deg);
}
.bg-PC img.car-2 {
  position: absolute;
}
.bg-PC img.car-2.active {
  --topStart: -27%;
  --topEnd: -0.49%;
  --rightStart: -25%;
  --rightEnd: -4.7%;
  --transformStart: scale(0.28);
  --transformEnd: scale(0.39);
}
.bg-PC img.car-3 {
  position: absolute;
}
.bg-PC img.car-3.active {
  --topStart: 2.7%;
  --topEnd: 2.7%;
  --rightStart: -77.5%;
  --rightEnd: -2.5%;
  --transformStart: scale(0.55);
  --transformEnd: scale(0.55);
}
.bg-PC img.car-4 {
  position: absolute;
}
.bg-PC img.car-4.active {
  --topStart: 0.5%;
  --topEnd: 7%;
  --rightStart: 41.3%;
  --rightEnd: 12.3%;
  --transformStart: scale(0.55);
  --transformEnd: scale(0.565);
}