.noto-sans-regular {
  font-family: "Noto Sans TC", sans-serif;
  font-weight: 400;
}

.noto-sans-medium {
  font-family: "Noto Sans TC", sans-serif;
  font-weight: 500;
}

.noto-sans-bold, .modal-title, .title h3, .title .small-slogan, .safety-item .label {
  font-family: "Noto Sans TC", sans-serif;
  font-weight: 700;
}

.noto-sans-black {
  font-family: "Noto Sans TC", sans-serif;
  font-weight: 900;
}

.noto-serif-regular {
  font-family: "Noto Serif TC", sans-serif;
  font-weight: 300;
}

.noto-serif-medium {
  font-family: "Noto Serif TC", sans-serif;
  font-weight: 500;
}

.noto-serif-semibold {
  font-family: "Noto Serif TC", sans-serif;
  font-weight: 600;
}

.noto-serif-bold {
  font-family: "Noto Serif TC", sans-serif;
  font-weight: 700;
}

.crimson {
  font-family: "Crimson Text", serif;
}

.poppins-regular, .title .en {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.poppins-medium {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.libre-franklin-900 {
  font-family: "Libre Franklin", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
}

.league-spartan-400 {
  font-family: "League Spartan", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.fade {
  -webkit-transition: all linear .2s;
  transition: all linear .2s;
}

.fade:hover {
  -webkit-transition: all linear .2s;
  transition: all linear .2s;
}

@-webkit-keyframes fadeInAnimation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeInAnimation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fadeOutAnimation {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fadeOutAnimation {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
  }
}

@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
}

@keyframes fadeOutUp {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
}

@-webkit-keyframes animatebottom {
  from {
    bottom: -100px;
    opacity: 0;
  }
  to {
    bottom: 0;
    opacity: 1;
  }
}

@keyframes animatebottom {
  from {
    bottom: -100px;
    opacity: 0;
  }
  to {
    bottom: 0;
    opacity: 1;
  }
}

@-webkit-keyframes shine {
  100% {
    left: 125%;
  }
}

@keyframes shine {
  100% {
    left: 125%;
  }
}

.noto-sans-regular {
  font-family: "Noto Sans TC", sans-serif;
  font-weight: 400;
}

.noto-sans-medium {
  font-family: "Noto Sans TC", sans-serif;
  font-weight: 500;
}

.noto-sans-bold, .modal-title, .title h3, .title .small-slogan, .safety-item .label {
  font-family: "Noto Sans TC", sans-serif;
  font-weight: 700;
}

.noto-sans-black {
  font-family: "Noto Sans TC", sans-serif;
  font-weight: 900;
}

.noto-serif-regular {
  font-family: "Noto Serif TC", sans-serif;
  font-weight: 300;
}

.noto-serif-medium {
  font-family: "Noto Serif TC", sans-serif;
  font-weight: 500;
}

.noto-serif-semibold {
  font-family: "Noto Serif TC", sans-serif;
  font-weight: 600;
}

.noto-serif-bold {
  font-family: "Noto Serif TC", sans-serif;
  font-weight: 700;
}

.crimson {
  font-family: "Crimson Text", serif;
}

.poppins-regular, .title .en {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.poppins-medium {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.libre-franklin-900 {
  font-family: "Libre Franklin", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
}

.league-spartan-400 {
  font-family: "League Spartan", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.fade {
  -webkit-transition: all linear .2s;
  transition: all linear .2s;
}

.fade:hover {
  -webkit-transition: all linear .2s;
  transition: all linear .2s;
}

@keyframes fadeInAnimation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeOutAnimation {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
  }
}

@keyframes fadeOutUp {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
}

@keyframes animatebottom {
  from {
    bottom: -100px;
    opacity: 0;
  }
  to {
    bottom: 0;
    opacity: 1;
  }
}

@keyframes shine {
  100% {
    left: 125%;
  }
}

body.modal-open {
  overflow: hidden;
}

.fullpage-modal {
  opacity: 0;
  z-index: -1;
  position: fixed;
  top: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.75);
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.fullpage-modal.show {
  opacity: 1;
  z-index: 20;
}

.modal-container {
  max-width: 1366px;
  height: auto;
  background: -webkit-gradient(linear, left top, left bottom, from(white), to(#f0f1f4));
  background: linear-gradient(to bottom, white 0%, #f0f1f4 100%);
}

.modal-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
  padding: 30px 45px 20px 45px;
}

.btn-close {
  padding: 0;
  width: 30px;
  height: 30px;
  background-image: url(../images/car/icon-close.svg);
  background-size: 100% auto;
  background-position: center center;
  background-repeat: no-repeat;
}

.modal-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
}

.left-content {
  padding-left: 4vw;
  padding-right: 2vw;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.left-content .info {
  margin: 3vmin 0;
  font-size: 2vmin;
  color: #4d4d4d;
}

.modal-container {
  position: relative;
  -webkit-animation-name: animatebottom;
          animation-name: animatebottom;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
}

.modal-container::before, .modal-container::after {
  content: "";
  position: absolute;
  background-size: 100% 100%;
}

.modal-container::before {
  left: 0;
  top: 0;
  background-image: url(../images/car/modal-bg-top.webp);
  width: 8.8vmin;
  height: 8.4vmin;
}

.modal-container::after {
  right: 0;
  bottom: 0;
  background-image: url(../images/car/modal-bg-bottom.webp);
  width: calc(71.3vh * 815/770);
  height: 71.3vh;
}

.modal-content {
  position: relative;
  z-index: 2;
}

.modal-title {
  font-size: 3.7vmin;
  color: #343b53;
}

.modal-swiper-outer {
  width: calc(64.8vh * (906 / 700));
}

.modal-swiper-outer .swiper-slide {
  text-align: center;
  font-size: 18px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-size: cover;
  background-position: center;
}

.modal-swiper-outer .swiper-slide img {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: left center;
     object-position: left center;
  display: block;
}

.modal-swiper-outer .swiper-slide img.align-top {
  -o-object-position: top;
     object-position: top;
}

.modal-swiper-outer .main-swiper {
  position: relative;
  width: 100%;
  height: 56vh;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  overflow: hidden;
}

.service-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: calc(100px * 3 + 15px * 2);
  gap: 15px;
}

.service-row > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  color: #fff;
  text-align: center;
  background: -webkit-gradient(linear, left top, left bottom, from(#8f97ab), to(#505973));
  background: linear-gradient(to bottom, #8f97ab 0%, #505973 100%);
}

.service-row .service-item > div {
  height: 50px;
}

.service-row .service-item img {
  height: 100%;
}

.service-row .service-item span {
  margin-top: 5px;
  font-size: 1.7vmin;
  line-height: 1.2;
}

.modal-footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
  padding: 15px 40px 20px 40px;
}

.swiper-control-bar {
  color: #fff;
}

.swiper-control-bar .swiper-button-prev,
.swiper-control-bar .swiper-button-next,
.swiper-control-bar .swiper-pagination {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.swiper-control-bar .swiper-button-prev,
.swiper-control-bar .swiper-button-next {
  margin-top: 0;
  width: 4.2vmin;
  height: 4.2vmin;
  background-image: url(../images/common/btn-circle-arrow.svg);
  background-size: 100% 100%;
  top: initial;
  left: initial;
  right: initial;
  bottom: initial;
}

.swiper-control-bar .swiper-button-prev::after,
.swiper-control-bar .swiper-button-next::after {
  display: none;
}

.swiper-control-bar .swiper-button-next {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.swiper-control-bar .swiper-pagination {
  top: initial;
  left: initial;
  right: initial;
  bottom: initial;
  margin: 0 20px;
  width: auto;
}

@media (max-width: 1600px) {
  .left-content .info {
    font-size: 15px;
    letter-spacing: 0;
  }
}

@media (max-width: 1024px) {
  .modal-title {
    font-size: 22px;
  }
  .modal-header,
  .modal-footer {
    padding: 2% 3%;
  }
  .service-row {
    width: calc(70px * 2 + 1.5vw);
    gap: 1.5vw;
  }
  .service-row > div {
    width: 70px;
    height: 70px;
  }
  .service-row .service-item > div {
    height: 50%;
  }
}

@media (orientation: portrait), (max-width: 767px), (max-height: 550px) {
  .modal-container {
    width: 80%;
  }
  .modal-container::after {
    width: 75vw;
    height: calc(75vw * 773 / 817);
    max-height: calc(100vh - 35px);
  }
  .modal-content {
    max-height: 100vh;
    overflow-y: auto;
  }
  .modal-content::-webkit-scrollbar {
    display: none;
  }
  .btn-close {
    width: 15px;
    height: 15px;
  }
  .modal-body {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .modal-swiper-outer {
    width: 100%;
  }
  .modal-swiper-outer .main-swiper {
    border-radius: 0;
    height: calc(80vw * 7 / 9);
  }
  .left-content {
    padding: 0 6vw 15px 6vw;
  }
  .left-content .info {
    margin: 10px 0;
  }
  .service-row {
    width: calc(40px * 3 + 10px * 2);
    gap: 10px;
  }
  .service-row > div {
    width: 40px;
    height: 40px;
  }
  .modal-header {
    padding: 12px 5% 0 0;
  }
  .modal-footer {
    padding: 15px 5%;
  }
  .swiper-control-bar .swiper-button-prev,
  .swiper-control-bar .swiper-button-next {
    width: 25px;
    height: 25px;
  }
}

@media (max-width: 480px) {
  .modal-container {
    width: 90%;
  }
  .modal-container::after {
    width: 75vw;
    height: calc(75vw * 773 / 817);
  }
  .modal-container::before {
    width: 10.6vw;
    height: calc(10.6vw * 90 / 96);
  }
  .modal-swiper-outer .main-swiper {
    height: calc(90vw * 7 / 9);
  }
  .modal-title {
    font-size: 20px;
  }
  .title h3 {
    font-size: 16px;
  }
}

.title {
  margin-bottom: 2.5vmin;
}

.title h3 {
  font-size: 3.3vmin;
  letter-spacing: .2vmin;
}

.title h3.large {
  font-size: 3.9vmin;
}

.title .en {
  font-size: 1.5vmin;
  letter-spacing: 0;
}

.title .small-slogan {
  margin-top: .5vmin;
  font-size: 2.2vmin;
  letter-spacing: .1vmin;
}

.title .slogan {
  font-size: 3.3vmin;
  letter-spacing: .2vmin;
  font-family: "Microsoft JhengHei", Helvetica, Arial, Verdana, sans-serif;
}

.title:not(.dark-bg) h3 {
  color: #343b53;
}

.title:not(.dark-bg) .en,
.title:not(.dark-bg) .small-slogan {
  color: #d8293a;
}

.title.dark-bg h3 {
  color: #fff;
}

.title.dark-bg .en,
.title.dark-bg .small-slogan {
  color: #fbe8cc;
}

.title.style3 h3 {
  color: #697390;
}

.title.style3 .en {
  color: #b3b3b3;
}

.block {
  padding-top: 4vmin;
}

.block .title {
  text-align: center;
}

.container {
  width: 90%;
}

.block-safety {
  position: relative;
  padding-top: 7vmin;
  padding-bottom: 13vw;
  background-image: url(../images/car/safety-bg01.webp);
  background-size: cover;
  background-position: center;
}

.block-safety:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, left top, right top, from(black), to(rgba(0, 0, 0, 0.5)));
  background: linear-gradient(to right, black 0%, rgba(0, 0, 0, 0.5) 100%);
}

.block-safety .container {
  max-width: 1670px;
}

.block-safety-bottom {
  margin-top: -12vw;
}

.safety-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  margin-top: 4vmin;
}

.safety-row.mt-0 {
  margin-top: 0;
}

.safety-item {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #fff;
  width: 24vw;
}

.safety-item .label {
  padding-top: 3vw;
  width: 100%;
  height: 12vw;
  background-image: url(../images/car/safety-bg02.webp);
  background-size: 100% 100%;
  text-align: center;
  font-size: 3.9vmin;
}

.safety-item .desc {
  margin-top: -5vw;
  padding: 3vmin 2vw 3vmin 3vw;
  width: 100%;
  background: -webkit-gradient(linear, left top, left bottom, from(#697390), to(#4a5370));
  background: linear-gradient(to bottom, #697390 0%, #4a5370 100%);
  border-radius: 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.safety-item .desc li {
  font-size: 20px;
}

.block-list .title {
  margin-bottom: 4.5vmin;
}

.block-list .car-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.block-list .car-item {
  padding: 0 2vw;
  margin-bottom: 7vmin;
  width: calc(100% / 3);
}

.block-list .car-item .modal-info {
  display: none;
}

.block-list .car-item .pic {
  position: relative;
  height: calc((90vw / 3 - 4vw) * 310 / 508);
  background-color: rgba(105, 115, 144, 0.15);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  overflow: hidden;
}

.block-list .car-item .pic img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.block-list .car-item .pic a {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.block-list .car-item .desc {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1vmin 3vmin;
  border-top: 6px solid #d8293a;
  background: -webkit-gradient(linear, left top, left bottom, from(#343b53), to(#1b2030));
  background: linear-gradient(to bottom, #343b53 0%, #1b2030 100%);
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  color: #fff;
}

.block-list .car-item .desc h3 {
  font-size: 2.2vmin;
}

.block-list .car-item .desc span {
  padding: 2px 5px 2px 28px;
  font-size: 18px;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  min-width: 55px;
  background-image: url(../images/car/icon-seat.svg);
  background-repeat: no-repeat;
  background-size: auto 20px;
  background-position: 10px center;
}

.bg-blue {
  background-color: #343b53;
  color: #fff;
}

.intro-content {
  padding: 7vmin 5vw 7vmin 4vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}

.intro-content .btn-red-outer {
  margin-top: 2.5vmin;
}

.intro-content .intro-item {
  margin-bottom: 1.5vmin;
}

.intro-content .intro-item-label {
  position: relative;
  color: #fbe8cc;
}

.intro-content .intro-item-label:not(.border)::before {
  content: "";
  position: absolute;
  top: calc(50% - 4px);
  left: -19px;
  width: 9px;
  height: 9px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  background-color: #fbe8cc;
}

.intro-content .intro-item-label.border {
  padding: 3px 12px;
  border: 1px solid #fbe8cc;
  border-radius: 4px;
}

.service {
  margin-top: 7vmin;
}

.service .intro-content {
  position: relative;
  padding-left: 6vw;
}

.service .service-pic {
  margin-top: 3.5vmin;
}

@media (max-width: 1600px) {
  .safety-item .label {
    font-size: 24px;
  }
  .safety-item .desc li {
    letter-spacing: 0;
    padding: 0 5px;
  }
  .safety-item .desc li,
  .block-list .car-item .desc h3 {
    font-size: 16px;
  }
  .block-list .car-item .desc span {
    font-size: 15px;
  }
}

@media (max-width: 1266px) {
  .intro-content .intro-item-label:not(.border)::before {
    top: calc(50% - 5px);
    left: -14px;
    width: 7px;
    height: 7px;
  }
}

@media (max-width: 1024px) {
  .title h3, .title .slogan {
    font-size: 20px;
    letter-spacing: 1px;
    line-height: 1.2;
  }
  .title .en {
    font-size: 13px;
    letter-spacing: 1px;
  }
  .title .small-slogan {
    font-size: 15px;
  }
  .title.dark-bg h3 {
    font-size: 20px;
  }
  .block-list .car-item {
    width: calc(100% / 2);
  }
  .block-list .car-item .pic {
    position: relative;
    height: calc((90vw / 2 - 4vw) * 310 / 508);
  }
  .safety-item {
    width: calc((90vw / 3) - 2vw);
  }
  .safety-item .safety-item .label {
    font-size: 20px;
  }
  .safety-item .safety-item .safety-item .desc {
    padding: 12px;
  }
}

@media (orientation: portrait), (max-width: 767px), (max-height: 550px) {
  .title {
    margin-bottom: 20px;
  }
  .block-first {
    position: relative;
    padding: 10vmin 0;
    background-image: url(../images/car/safety-bg01.webp);
    background-size: cover;
    background-position: center;
  }
  .block-first:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: -webkit-gradient(linear, left top, right top, from(black), to(rgba(0, 0, 0, 0.5)));
    background: linear-gradient(to right, black 0%, rgba(0, 0, 0, 0.5) 100%);
  }
  .block-safety {
    padding: 0;
    background-image: none;
  }
  .block-safety::before {
    display: none;
  }
  .block-safety-bottom {
    margin-top: 0;
  }
  .block-list .title {
    margin-bottom: 25px;
    text-align: left;
  }
  .block-list .car-item .pic {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
  }
  .block-list .car-item .desc {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
  }
  .safety-row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .safety-item {
    display: block;
    margin-bottom: 20px;
    -webkit-box-orient: initial;
    -webkit-box-direction: initial;
        -ms-flex-direction: initial;
            flex-direction: initial;
    max-width: 320px;
    width: 100%;
  }
  .safety-item .label {
    position: absolute;
    padding-top: 0;
    top: calc(50% - 45px);
    left: -45px;
    background-size: 100% 100%;
    width: 90px;
    height: 90px;
    line-height: 90px;
    font-size: 20px;
    background-image: url(../images/car/safety-bg02-s.webp);
  }
  .safety-item .desc {
    margin-top: 0;
  }
  .intro-content {
    padding: 30px 6%;
  }
  .intro-content .btn-red-outer {
    margin-top: 25px;
  }
  .intro-content .intro-item {
    margin-bottom: 15px;
  }
  .service {
    -ms-flex-wrap: wrap-reverse;
        flex-wrap: wrap-reverse;
  }
  .service .service-pic {
    margin-top: 0;
  }
  .service .intro-content {
    padding-left: 6%;
  }
  .service .intro-item:not(.border) {
    padding: 0 10px 0 20px;
  }
  .triangle {
    display: none;
  }
}

@media (max-width: 480px) {
  .title .en {
    font-size: 12px;
    letter-spacing: 0;
  }
  .block-list .car-item {
    padding: 0;
    margin-bottom: 12px;
  }
  .block-list .car-item .pic {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }
  .block-list .car-item .desc {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
  }
  .block-list .car-item .desc span {
    padding: 1px 4px 1px 15px;
    font-size: 12px;
    min-width: 30px;
    background-size: auto 12px;
    background-position: 2px center;
  }
  .block-list .car-item:nth-of-type(2n) {
    padding-left: 10px;
  }
  .safety-item {
    margin-left: 35px;
    max-width: calc(100% - 50px);
  }
  .safety-item .label {
    top: calc(50% - 35px);
    left: -35px;
    width: 70px;
    height: 70px;
    font-size: 16px;
    line-height: 70px;
    letter-spacing: 2px;
  }
  .safety-item .desc {
    padding-left: 70px;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: start;
  }
  .safety-item .desc li {
    font-size: 15px;
  }
  .service-pic {
    height: 100vw;
  }
  .safety-item .desc li,
  .block-list .car-item .desc h3 {
    font-size: 15px;
  }
  .block-list .car-item .desc span {
    font-size: 12px;
  }
}

@media (max-height: 550px) {
  .service-pic {
    min-height: 500px;
  }
}

body.not-touchable .block-list .car-item .pic::before {
  position: absolute;
  top: 0;
  left: -75%;
  z-index: 2;
  display: block;
  content: '';
  width: 50%;
  height: 100%;
  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.3)));
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
  -webkit-transform: skewX(-25deg);
          transform: skewX(-25deg);
}

body.not-touchable .block-list .car-item .pic:hover::before {
  -webkit-animation: shine 1s;
          animation: shine 1s;
}