/* ARRIZO 5 – scoped vendor styles */
.arrizo5-int-page {
  --a5r: calc(100vw / 19.2);
  color: #fff;
}

.arrizo5-int-page .pc-pad { display: block !important; }
.arrizo5-int-page .mb-only { display: none !important; }

.arrizo5-int-page section {
  position: relative;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
}

.arrizo5-int-page img,
.arrizo5-int-page video { display: block; }

/* ───── Section 1 – Hero ───── */
.arrizo5-int-page .section1 { width: 100%; height: 100vh; }
.arrizo5-int-page .section1 .video-box { width: 100%; height: 100%; }
.arrizo5-int-page .section1 .video-box video { width: 100%; height: 100%; object-fit: cover; }
.arrizo5-int-page .section1 .a5_banner { width: 100%; height: 100%; }
.arrizo5-int-page .section1 .a5_banner img { width: 100%; height: 100%; object-fit: cover; }
.arrizo5-int-page .section1 .logo-box {
  position: absolute; left: 50%; transform: translateX(-50%); top: 20vh;
  display: flex; flex-direction: column; align-items: center; z-index: 2;
}
.arrizo5-int-page .section1 .logo-box img { width: calc(5 * var(--a5r)); }
.arrizo5-int-page .section1 .logo-box .t {
  color: #fff; font-size: calc(0.24 * var(--a5r));
  margin-top: calc(0.2 * var(--a5r)); letter-spacing: calc(0.03 * var(--a5r));
}
.arrizo5-int-page .section1 .sec-btn {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(0.64 * var(--a5r)); display: flex; align-items: center; z-index: 2;
}
.arrizo5-int-page .section1 .sec-btn .btn {
  width: calc(2.1 * var(--a5r)); height: calc(0.5 * var(--a5r));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: calc(0.13 * var(--a5r)); cursor: pointer;
  border: 1px solid #fff; transition: all 0.5s;
}
.arrizo5-int-page .section1 .sec-btn .btn:hover { background-color: #bca995; border-color: #bca995; }
.arrizo5-int-page .section1 .sec-btn .btn2 { margin-left: calc(0.33 * var(--a5r)); }
.arrizo5-int-page .section1::after {
  position: absolute; left: 0; top: 0; background-color: rgba(0,0,0,0.3);
  content: ""; width: 100%; height: 100%;
}

/* ───── Section 2 – Color picker ───── */
.arrizo5-int-page .section2 {
  background: #cec5b9; height: 100vh;
  padding: calc(0.55 * var(--a5r)) calc(0.52 * var(--a5r));
}
.arrizo5-int-page .section2 .bg-box {
  width: 100%; border-radius: 12px; height: 100%; display: flex; background-color: #d7cfc5;
}
.arrizo5-int-page .section2 .bg-box .left-box {
  width: 48%; padding: calc(0.46 * var(--a5r)) calc(0.39 * var(--a5r)) calc(0.9 * var(--a5r)) calc(0.45 * var(--a5r));
}
.arrizo5-int-page .section2 .bg-box .left-box .car-box {
  width: 100%; height: 68%; position: relative;
}
.arrizo5-int-page .section2 .bg-box .left-box .car-box .img-box {
  position: absolute; width: 100%; top: 0; height: 100%; left: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: all 0.3s ease; border-radius: 12px;
}
.arrizo5-int-page .section2 .bg-box .left-box .car-box img {
  width: 100%; margin-top: calc(0.8 * var(--a5r));
}
.arrizo5-int-page .section2 .bg-box .left-box .car-box .yin { background: #919096; }
.arrizo5-int-page .section2 .bg-box .left-box .car-box .lan { background: #bbced9; }
.arrizo5-int-page .section2 .bg-box .left-box .car-box .bai { background: #eaeaea; }
.arrizo5-int-page .section2 .bg-box .left-box .car-box .hong { background: #9f6b73; }
.arrizo5-int-page .section2 .bg-box .left-box .car-box .lv { background: #72807a; }
.arrizo5-int-page .section2 .bg-box .left-box .car-box .hei { background: #898989; }
.arrizo5-int-page .section2 .bg-box .left-box .car-box .grey { background: #8a8a8a; }
.arrizo5-int-page .section2 .bg-box .left-box .car-box .img-box.active { opacity: 1; }
.arrizo5-int-page .section2 .bg-box .left-box .tit {
  font-size: calc(0.24 * var(--a5r)); color: #fff; margin-top: calc(0.42 * var(--a5r));
}
.arrizo5-int-page .section2 .bg-box .left-box .color-box {
  display: flex; margin-top: calc(0.65 * var(--a5r)); align-items: center;
}
.arrizo5-int-page .section2 .bg-box .left-box .color-box .c-box {
  display: flex; flex-direction: column; align-items: center; cursor: pointer;
  margin-right: calc(0.3 * var(--a5r));
}
.arrizo5-int-page .section2 .bg-box .left-box .color-box .c-box .c {
  width: calc(0.48 * var(--a5r)); height: calc(0.48 * var(--a5r)); border-radius: 50%;
}
.arrizo5-int-page .section2 .bg-box .left-box .color-box .c-box .yin { background: linear-gradient(180deg, #acabb1 0%, #ffffff 50%, #afaeb4 100%); }
.arrizo5-int-page .section2 .bg-box .left-box .color-box .c-box .lan { background: linear-gradient(180deg, #4d749d 0%, #97c0d7 50%, #4d749d 100%); }
.arrizo5-int-page .section2 .bg-box .left-box .color-box .c-box .bai { background: linear-gradient(180deg, #dedede 0%, #ffffff 50%, #eaeaea 100%); }
.arrizo5-int-page .section2 .bg-box .left-box .color-box .c-box .hong { background: linear-gradient(180deg, #731c28 0%, #c25163 50%, #771f2b 100%); }
.arrizo5-int-page .section2 .bg-box .left-box .color-box .c-box .lv { background: linear-gradient(180deg, #25634a 0%, #609780 50%, #25634a 100%); }
.arrizo5-int-page .section2 .bg-box .left-box .color-box .c-box .hei { background: linear-gradient(180deg, #282e3a 0%, #61636f 50%, #19202e 100%); }
.arrizo5-int-page .section2 .bg-box .left-box .color-box .c-box .grey { background: linear-gradient(180deg, #6a6a6a 0%, #aaaaaa 50%, #6a6a6a 100%); }
.arrizo5-int-page .section2 .bg-box .left-box .color-box .c-box .t {
  color: #fff; font-size: calc(0.14 * var(--a5r)); font-weight: 500;
  margin-top: calc(0.25 * var(--a5r)); text-align: center;
}
.arrizo5-int-page .section2 .bg-box .left-box .color-box .c-box:nth-last-of-type(1) { margin-right: 0; }
.arrizo5-int-page .section2 .bg-box .left-box .color-box .c-box.active .c { position: relative; }
.arrizo5-int-page .section2 .bg-box .left-box .color-box .c-box.active .c::after {
  width: calc(0.64 * var(--a5r)); height: calc(0.64 * var(--a5r));
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  border: 1px solid #fff; content: ""; border-radius: 50%;
}
.arrizo5-int-page .section2 .bg-box .right-box { width: 52%; position: relative; }
.arrizo5-int-page .section2 .bg-box .right-box .picList img {
  border-radius: 12px; position: absolute; width: 100%; height: 100%;
  object-fit: cover; left: 0; top: 0; opacity: 0; transition: all 0.3s ease;
}
.arrizo5-int-page .section2 .bg-box .right-box .picList img.active { opacity: 1; }
.arrizo5-int-page .section2 .bg-box .right-box img {
  border-radius: 12px; position: absolute; width: 100%; height: 100%;
  object-fit: contain; left: 0; top: 0; opacity: 0; transition: all 0.3s ease;
}
.arrizo5-int-page .section2 .bg-box .right-box img.active { opacity: 1; }
.arrizo5-int-page .section2 .bg-box .right-box .wordList p {
  position: absolute; width: 100%; left: 0; top: 0; opacity: 0;
  padding: calc(0.6 * var(--a5r)) calc(0.4 * var(--a5r));
  font-size: calc(0.16 * var(--a5r)); transition: all 0.3s ease; color: #cec6ba;
}
.arrizo5-int-page .section2 .bg-box .right-box .wordList p.active { opacity: 1; }

/* ───── bg-section (3, 5, 7) ───── */
.arrizo5-int-page .bg-section {
  background-color: #a59c91;
  padding: calc(0.7 * var(--a5r)) calc(1.05 * var(--a5r)) calc(1 * var(--a5r));
  display: flex; flex-direction: column; align-items: center;
}
.arrizo5-int-page .bg-section .car-logo { width: calc(3.33 * var(--a5r)); }
.arrizo5-int-page .bg-section .car-logo img { width: 100%; }
.arrizo5-int-page .bg-section .car-tit {
  text-transform: uppercase; color: rgba(225,225,225,0.7);
  font-size: calc(0.26 * var(--a5r)); margin-top: calc(0.3 * var(--a5r));
}
.arrizo5-int-page .bg-section .bg {
  width: 100%; position: relative; margin-top: calc(0.4 * var(--a5r));
  -webkit-clip-path: inset(10% 20%); clip-path: inset(10% 20%);
}
.arrizo5-int-page .bg-section .bg img {
  border-radius: 20px; width: 100%; height: 100%; object-fit: cover;
}
.arrizo5-int-page .bg-section .bg .bg-detail {
  position: absolute; bottom: calc(1.06 * var(--a5r));
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 0 calc(1.2 * var(--a5r));
}
.arrizo5-int-page .bg-section .bg .bg-detail .detail-box { flex: 1; }
.arrizo5-int-page .bg-section .bg .bg-detail .detail-box .top {
  display: flex; align-items: flex-end;
  border-bottom: 1px solid #fff; padding-bottom: calc(0.16 * var(--a5r));
}
.arrizo5-int-page .bg-section .bg .bg-detail .detail-box .top .num {
  font-size: calc(0.52 * var(--a5r)); color: #fff;
  font-family: 'Poppins', sans-serif; font-weight: 700; display: flex;
}
.arrizo5-int-page .bg-section .bg .bg-detail .detail-box .top .unit {
  color: #fff; font-size: calc(0.22 * var(--a5r)); margin-left: calc(0.1 * var(--a5r));
}
.arrizo5-int-page .bg-section .bg .bg-detail .detail-box .bottom {
  font-size: calc(0.22 * var(--a5r)); color: #fff;
  text-align: right; padding-top: calc(0.16 * var(--a5r));
}
.arrizo5-int-page .bg-section .bg .bg-detail .detail-box:nth-of-type(2) {
  margin: 0 calc(1 * var(--a5r));
}

/* ───── swiper-section (4, 6) ───── */
.arrizo5-int-page .swiper-section {
  background-color: #a59c91; height: 90vh; width: 100%; display: flex;
  padding: calc(1.1 * var(--a5r)) calc(1.05 * var(--a5r));
}
.arrizo5-int-page .swiper-section .left-box {
  width: 40%; display: flex; flex-direction: column; justify-content: space-between;
}
.arrizo5-int-page .swiper-section .left-box .top { position: relative; }
.arrizo5-int-page .swiper-section .left-box .top .title-box {
  position: absolute; left: 0; top: 0; opacity: 0; transition: all 0.3s ease;
}
.arrizo5-int-page .swiper-section .left-box .top .title-box .t {
  color: #fff; font-size: calc(0.36 * var(--a5r)); width: 80%;
}
.arrizo5-int-page .swiper-section .left-box .top .title-box .d {
  color: rgba(225,225,225,0.7); font-size: calc(0.16 * var(--a5r));
  margin-top: calc(0.5 * var(--a5r)); width: 90%;
}
.arrizo5-int-page .swiper-section .left-box .top .title-box.active { opacity: 1; }
.arrizo5-int-page .swiper-section .left-box .bottom { display: flex; align-items: center; }
.arrizo5-int-page .swiper-section .left-box .bottom .nav-ar {
  font-size: calc(0.24 * var(--a5r)); margin-right: calc(0.5 * var(--a5r));
  cursor: pointer; transition: all 0.3s ease; color: rgba(255,255,255,0.3);
  padding-bottom: calc(0.1 * var(--a5r));
  border-bottom: calc(0.04 * var(--a5r)) solid rgba(255,255,255,0.3);
}
.arrizo5-int-page .swiper-section .left-box .bottom .nav-ar.active {
  color: #fff; border-color: #fff;
}
.arrizo5-int-page .swiper-section .right-box { width: 60%; position: relative; }
.arrizo5-int-page .swiper-section .right-box .img-box {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  opacity: 0; transition: all 0.3s ease;
}
.arrizo5-int-page .swiper-section .right-box .img-box img {
  border-radius: 10px; width: 100%; height: 100%; object-fit: cover;
}
.arrizo5-int-page .swiper-section .right-box .img-box.active { opacity: 1; }

/* ───── Section 7 content cards ───── */
.arrizo5-int-page .section7-content {
  display: flex; align-items: center; background-color: #a59c91;
  padding: calc(1.1 * var(--a5r)) calc(1.05 * var(--a5r)); justify-content: space-between;
}
.arrizo5-int-page .section7-content .box { flex: 1; }
.arrizo5-int-page .section7-content .box .img-box { width: 100%; }
.arrizo5-int-page .section7-content .box .img-box img { width: 100%; border-radius: 8px; }
.arrizo5-int-page .section7-content .box .t {
  background-color: rgba(255,255,255,0.5); margin-top: calc(0.05 * var(--a5r));
  height: calc(1.29 * var(--a5r)); padding: 0 calc(0.2 * var(--a5r));
  display: flex; flex-wrap: wrap; align-content: center;
  color: #333; font-size: calc(0.26 * var(--a5r)); border-radius: 6px;
}
.arrizo5-int-page .section7-content .box .t .suTitle {
  font-size: calc(0.16 * var(--a5r)); color: #61636f; width: 100%; line-height: 1.2;
}
.arrizo5-int-page .section7-content .box:nth-of-type(2) { margin: 0 calc(0.15 * var(--a5r)); }

/* ───── Gallery section ───── */
.arrizo5-int-page .section-pic {
  background-color: #a59c91; display: flex; flex-direction: column; align-items: center;
  padding: calc(0.88 * var(--a5r)) 0; position: relative;
}
.arrizo5-int-page .section-pic .t-box { display: flex; flex-direction: column; align-items: center; }
.arrizo5-int-page .section-pic .t-box .car-logo { width: calc(3.33 * var(--a5r)); }
.arrizo5-int-page .section-pic .t-box .car-logo img { width: 100%; }
.arrizo5-int-page .section-pic .t-box .car-tit {
  text-transform: uppercase; color: rgba(225,225,225,0.7);
  font-size: calc(0.26 * var(--a5r)); margin-top: calc(0.3 * var(--a5r)); text-align: center;
}
.arrizo5-int-page .section-pic .pic-box {
  display: flex; align-items: center; width: 100vw;
  height: calc(7 * var(--a5r)); padding: 0 calc(0.7 * var(--a5r));
  overflow-x: auto; margin-top: calc(0.8 * var(--a5r)); flex: 1;
}
.arrizo5-int-page .section-pic .pic-box .img-box {
  flex: none; width: calc(7 * var(--a5r)); height: 100%;
  margin-right: calc(0.24 * var(--a5r)); scale: 0;
}
.arrizo5-int-page .section-pic .pic-box .img-box img {
  width: 100%; height: 100%; border-radius: calc(0.2 * var(--a5r)); object-fit: cover;
}
.arrizo5-int-page .section-pic .pic-box .img-box-group {
  flex: none; width: calc(7 * var(--a5r)); height: calc(7 * var(--a5r));
  margin-right: calc(0.24 * var(--a5r)); display: flex; flex-direction: column;
}
.arrizo5-int-page .section-pic .pic-box .img-box-group .top { height: 50%; width: 100%; }
.arrizo5-int-page .section-pic .pic-box .img-box-group .bottom {
  display: flex; align-items: center; margin-top: calc(0.24 * var(--a5r));
  height: auto; flex: 1; width: 100%;
}
.arrizo5-int-page .section-pic .pic-box .img-box-group .bottom .img-box { width: auto; flex: 1; }
.arrizo5-int-page .section-pic .pic-box .img-box-group .bottom .img-box:nth-last-of-type(1) { margin-right: 0; }
.arrizo5-int-page .section-pic .pic-box::-webkit-scrollbar { display: none; }
.arrizo5-int-page .section-pic .move {
  cursor: move; height: 100%; position: absolute; top: 0; width: 2%; z-index: 5;
}
.arrizo5-int-page .section-pic .arrow-left { left: 0; }
.arrizo5-int-page .section-pic .arrow-right { right: 0; }

/* ───── CTA Banner ───── */
.arrizo5-int-page .content_us_jump { width: 100%; position: relative; }
.arrizo5-int-page .content_us_jump a {
  display: block; width: 20%; height: 7%; position: absolute; top: 30%; left: 6%;
}
.arrizo5-int-page .content_us_jump img { width: 100%; }

/* ───── Mobile ───── */
@media (max-width: 768px) {
  .arrizo5-int-page .pc-pad { display: none !important; }
  .arrizo5-int-page .mb-only { display: block !important; }

  .arrizo5-int-page .section1 .logo-box img { width: calc(4.35 * var(--a5r)); }
  .arrizo5-int-page .section1 .logo-box .t { font-size: calc(0.24 * var(--a5r)); }
  .arrizo5-int-page .section1 .sec-btn { width: 100%; padding: 0 calc(0.5 * var(--a5r)); }
  .arrizo5-int-page .section1 .sec-btn .btn { flex: 1; height: calc(0.8 * var(--a5r)); font-size: calc(0.18 * var(--a5r)); }
  .arrizo5-int-page .section1 .sec-btn .btn2 { margin-left: calc(0.2 * var(--a5r)); }

  .arrizo5-int-page .section2 {
    padding: calc(1.75 * var(--a5r)) calc(0.36 * var(--a5r)) calc(0.37 * var(--a5r)); height: auto;
  }
  .arrizo5-int-page .section2 .bg-box { flex-direction: column-reverse; border-radius: 10px; }
  .arrizo5-int-page .section2 .bg-box .left-box { width: 100%; padding: calc(0.5 * var(--a5r)) calc(0.27 * var(--a5r)) calc(0.96 * var(--a5r)); }
  .arrizo5-int-page .section2 .bg-box .left-box .tit {
    position: absolute; top: calc(0.65 * var(--a5r)); margin-top: 0;
    font-size: calc(0.3 * var(--a5r)); left: calc(0.36 * var(--a5r));
  }
  .arrizo5-int-page .section2 .bg-box .left-box .car-box { height: calc(4.2 * var(--a5r)); }
  .arrizo5-int-page .section2 .bg-box .left-box .car-box .img-box { border-radius: 10px; }
  .arrizo5-int-page .section2 .bg-box .left-box .color-box { margin-top: calc(1.46 * var(--a5r)); justify-content: space-between; }
  .arrizo5-int-page .section2 .bg-box .left-box .color-box .c-box { margin-right: 0; }
  .arrizo5-int-page .section2 .bg-box .left-box .color-box .c-box .c { width: calc(0.54 * var(--a5r)); height: calc(0.54 * var(--a5r)); }
  .arrizo5-int-page .section2 .bg-box .left-box .color-box .c-box .c::after { width: calc(0.69 * var(--a5r)); height: calc(0.69 * var(--a5r)); }
  .arrizo5-int-page .section2 .bg-box .left-box .color-box .c-box .t { font-size: calc(0.18 * var(--a5r)); }
  .arrizo5-int-page .section2 .bg-box .right-box { width: 100%; height: calc(5.8 * var(--a5r)); }
  .arrizo5-int-page .section2 .bg-box .right-box .picList img { border-radius: 10px; }
  .arrizo5-int-page .section2 .bg-box .right-box .wordList p { font-size: calc(0.22 * var(--a5r)); padding: calc(0.2 * var(--a5r)); }

  .arrizo5-int-page .bg-section { padding: calc(0.98 * var(--a5r)) calc(0.36 * var(--a5r)); }
  .arrizo5-int-page .bg-section .car-logo { width: calc(3.77 * var(--a5r)); }
  .arrizo5-int-page .bg-section .car-tit { font-size: calc(0.35 * var(--a5r)); }
  .arrizo5-int-page .bg-section .bg .bg-detail { width: 100%; padding: 0 calc(0.3 * var(--a5r)); bottom: calc(1.06 * var(--a5r)); flex-wrap: wrap; }
  .arrizo5-int-page .bg-section .bg img { border-radius: 10px; }
  .arrizo5-int-page .bg-section .bg .bg-detail .detail-box { flex: none; width: 48%; }
  .arrizo5-int-page .bg-section .bg .bg-detail .detail-box:nth-of-type(2) { margin: 0; }
  .arrizo5-int-page .bg-section .bg .bg-detail .detail-box:nth-of-type(3) { width: 100%; margin-top: calc(0.3 * var(--a5r)); }
  .arrizo5-int-page .bg-section .bg .bg-detail .detail-box .top .unit { font-size: calc(0.23 * var(--a5r)); padding-left: calc(0.19 * var(--a5r)); padding-top: calc(0.15 * var(--a5r)); }
  .arrizo5-int-page .bg-section .bg .bg-detail .detail-box .bottom { font-size: calc(0.23 * var(--a5r)); }

  .arrizo5-int-page .swiper-section {
    flex-direction: column-reverse;
    padding: calc(1 * var(--a5r)) calc(0.36 * var(--a5r)) calc(1.5 * var(--a5r));
  }
  .arrizo5-int-page .swiper-section .left-box { width: 100%; flex: 1; padding: calc(0.96 * var(--a5r)) 0 0; }
  .arrizo5-int-page .swiper-section .left-box .top .title-box .t { font-size: calc(0.42 * var(--a5r)); }
  .arrizo5-int-page .swiper-section .left-box .top .title-box .d { font-size: calc(0.27 * var(--a5r)); }
  .arrizo5-int-page .swiper-section .left-box .bottom .nav-ar { font-size: calc(0.3 * var(--a5r)); margin-right: calc(0.54 * var(--a5r)); }
  .arrizo5-int-page .swiper-section .right-box { width: 100%; height: calc(5.75 * var(--a5r)); }
  .arrizo5-int-page .swiper-section .right-box .img-box img { border-radius: 10px; }

  .arrizo5-int-page .section7-content {
    padding: calc(1 * var(--a5r)) calc(0.36 * var(--a5r)) calc(1.3 * var(--a5r)); flex-direction: column;
  }
  .arrizo5-int-page .section7-content .box { margin-bottom: calc(0.38 * var(--a5r)); }
  .arrizo5-int-page .section7-content .box:nth-of-type(2) { margin: 0 0 calc(0.38 * var(--a5r)) 0; }
  .arrizo5-int-page .section7-content .box:nth-last-of-type(1) { margin-bottom: 0; }
  .arrizo5-int-page .section7-content .box .t { font-size: calc(0.27 * var(--a5r)); padding: 0 calc(0.33 * var(--a5r)); height: calc(1.4 * var(--a5r)); }
  .arrizo5-int-page .section7-content .box .t .suTitle { font-size: calc(0.22 * var(--a5r)); line-height: 1.2; }

  .arrizo5-int-page .content_us_jump a { width: 54%; height: 7%; top: 30.5%; left: 10.5%; }
}