.servicesArea *{transition: unset;
-webkit-transition: unset;
}
.servicesArea .titleItem .decoTitle{
    left: -50px;
}
.servicesArea {position: relative;overflow: hidden;color:#fff;padding: 0;}

.servicesArea .Txt *,.servicesArea .titleItem .Txt .textEditor{color:#fff;}
.servicesArea .Txt{
    margin-top: 70px;
}
.servicesArea .Txt .more_btn img{-webkit-filter: contrast(0) brightness(200%);
    filter: contrast(0) brightness(200%);
}

/* 標題與箭頭 */
.servicesArea .wrap { position: relative; z-index: 5; display:flex; height:100%; }
.servicesArea .wrap .left {
  flex: 0 0 40%;
  /* display:flex; */
  padding: 40px 0;
  padding-top: 190px;
  width: 60%;
}
.servicesArea .titleBox em { font-size:28px; font-weight:bold; display:block; }
.servicesArea .titleBox h2 { font-size:22px; margin-top:10px; }
.servicesArea .arrowBox { margin-top:30px; }
.servicesArea .arrowBox div {display:inline-block;cursor:pointer;}

/* 右側品牌清單 */
.servicesArea .wrap .right { flex:1; display:flex; align-items:center; }
.servicesArea .servicesList { list-style:none; margin:0; padding:0; }
.servicesArea .servicesItem { padding:20px; }
.servicesArea .servicesItemContent {
  padding: 20px 50px;
  border-radius:10px;
}
.servicesArea .servicesLogo img {max-width: 100px;margin-bottom:10px;}

/* ================= 背景控制 ================= */
.servicesArea .bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.servicesArea .bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .8s ease;
}
.servicesArea .bg img.show { opacity: 1; }

/* 切片遮罩 */
.servicesArea .uncoverSlice {
  position: absolute;
  top:0; bottom:0;
  background:#000;
  transform-origin: top;
  width:10%;
  opacity:1;
  z-index:2;
}
.servicesArea .uncoverSlice:nth-child(even){ transform-origin:bottom; }

/* Tabs */
.tabsbox{display: block;width: 200px;}
.tabsbox .tabs {position:absolute;top: 30%;left: 7%;transform: translate(-50%, -50%);z-index: 60;display: flex;align-items: flex-start;flex-direction: column;gap: 10px;}

.tabsbox .tabs li {display:inline-block;position: relative;}
.tabsbox .tabs li::before{content:"";height: 1px;left: -44px;position:absolute;top: 50%;transform: translate(0%, -50%);width: 20px;background: rgb(255 255 255 / 40%);z-index:10;-webkit-transition: all 0.5s;transition: all 0.5s;}
.tabsbox .tabs li::after{content:"";height: 0;left: -44px;position:absolute;top: 50%;transform: translate(0%, -50%);width: 1px;background: rgb(255 255 255 / 40%);z-index:10;opacity: 0;-webkit-transition: all 0.5s;transition: all 0.5s;}
.tabsbox .tabs li.active::after{
    opacity: 1;
    background: rgb(255 255 255 / 100%);
    height: 80%;
}
.tabsbox .tabs li.active::before{
    opacity: 1;
    width: 40px;
    background: rgb(255 255 255 / 100%);
}
.tabsbox .tabs li.active a {
    opacity: 1;
    font-size: 1.3rem;
    padding-left: 10px;
}
.tabsbox .tabs a {color:#fff;text-decoration:none;font-weight: 400;opacity: .8;font-family: "Noto Serif SC", serif;font-size: 1rem;letter-spacing: 1px;-webkit-transition: all 0.5s;transition: all 0.5s;}
.tabsbox::after{background-color: rgb(255 255 255 / 20%);content:"";height: 100%;width: 1px;position:absolute;bottom:0;z-index:10;left: 4.6%;}



.titleBox{color:#000;text-align:left}
@media (max-width:768px){.titleBox{text-align:center}
}.titleBox em{font-family:"Inter",sans-serif;font-size:50px;font-weight:800;line-height:1.1;text-transform:uppercase}
@media (max-width:1536px){.titleBox em{font-size:46px}
}@media (max-width:1366px){.titleBox em{font-size:42px}
}@media (max-width:640px){.titleBox em{font-size:28px}
}.titleBox h1,.titleBox h2{font-size:28px;font-weight:700;line-height:1.25;margin-top:70px}
@media (max-width:1536px){.titleBox h1,.titleBox h2{font-size:26px}
}@media (max-width:1366px){.titleBox h1,.titleBox h2{font-size:24px}
}@media (max-width:640px){.titleBox h1,.titleBox h2{font-size:20px}
}
@media (max-width:640px){.servicesArea{padding-bottom:40px}
}.servicesArea .bg{position:absolute;height:100%;left:0;overflow:hidden;top:0;width:100%}
@media (max-width:640px){.servicesArea .bg{/* display:none; */}
}.servicesArea .bg img{animation:photo-scale 50s linear infinite alternate-reverse;height:100%;left:0;opacity:0;object-fit:cover;position:absolute;top:0;width:100%}
.servicesArea .bg img.show{opacity:1}

@keyframes photo-scale {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}
.servicesArea .bgMask{background-color:rgba(0,0,0,0.35);left:0;height:100%;position:absolute;top:0;width:100%;z-index:1}
@media (max-width:768px){.servicesArea .bgMask{background-color:rgba(0,0,0,0.5)}
}@media (max-width:640px){.servicesArea .bgMask{}
}.servicesArea .wrap{margin-right:100px;}
@media (max-width:1680px){.servicesArea .wrap{max-width: 70vw;margin-right: 40px;}
}@media (max-width:1536px){.servicesArea .wrap{max-width: 70vw;}
}@media (max-width:768px){.servicesArea .wrap{align-items:center;flex-direction:column;margin:auto;max-width:90vw;padding-left:10px;padding-right:10px}
}
@media (max-width:1366px){.servicesArea .wrap .left{padding-top:140px}
}@media (max-width:1280px){.servicesArea .wrap .left{padding-top:120px}
}@media (max-width:768px){.servicesArea .wrap .left{text-align:center;width:100%;padding-top: 70px;}
}@media (max-width:640px){.servicesArea .wrap .left{padding-top: 40px;padding-bottom: 0px;}
}.servicesArea .wrap .left .titleBox{color:#fff}
@media (max-width:640px){.servicesArea .wrap .left .titleBox{color:#000}
}.servicesArea .wrap .left .titleBox h2{margin-top:20px}
.servicesArea .wrap .left .arrowBox{align-items:center;display:flex;margin-top:135px;gap: 20px;}
.servicesArea .wrap .left .arrowBox .box{background:white;width: 65px;aspect-ratio: 1/1;border-radius: 50px;display: inline-flex;align-items: center;justify-content: center;}
.servicesArea .wrap .left .arrowBox span{display:block;width: 1px;height: 20px;background: white;opacity: .5;}
@media (max-width:768px){.servicesArea .wrap .left .arrowBox{justify-content:center;margin-top:40px;margin-bottom:20px}
}@media (max-width:640px){.servicesArea .wrap .left .arrowBox{/* display:none; */}
}.servicesArea .wrap .left .arrowPrev,.servicesArea .wrap .left .arrowNext{border-top: 2px solid var(--info);border-left: 2px solid var(--info);cursor:pointer;height: 13px;width: 13px;}
.servicesArea .wrap .left .arrowBox .box:hover .arrowPrev,.servicesArea .wrap .left .arrowBox .box:hover .arrowNext{border-color: #ffffff;}
.servicesArea .wrap .left .arrowBox .box:hover{background: var(--secondary);}
.servicesArea .wrap .left .arrowPrev{position:relative;rotate:-45deg;margin: 0 0 0 5px;}
.servicesArea .wrap .left .arrowNext{rotate:135deg;margin: 0 5px 0 0;}
.servicesArea .wrap .left .servicesBtn{border:2px solid #fff;color:#fff;display:inline-block;letter-spacing:1.2px;margin-top:78px;padding:20px 120px 20px 20px;position:relative;overflow:hidden;position:relative}
.servicesArea .wrap .left .servicesBtn::before{content:"";position:absolute;top:0;right:-50px;bottom:0;left:0;border-right:50px solid transparent;border-bottom:80px solid #000;transform:translateX(-100%);transition:0.5s ease-in-out;z-index:1}
.servicesArea .wrap .left .servicesBtn:hover::before{transform:translateX(0)}
.servicesArea .wrap .left .servicesBtn span,.servicesArea .wrap .left .servicesBtn img,.servicesArea .wrap .left .servicesBtn i{position:relative}
.servicesArea .wrap .left .servicesBtn i,.servicesArea .wrap .left .servicesBtn img,.servicesArea .wrap .left .servicesBtn span,.servicesArea .wrap .left .servicesBtn svg{z-index:2}
@media (max-width:768px){.servicesArea .wrap .left .servicesBtn{display:none;margin-top:10px}
}@media (max-width:640px){.servicesArea .wrap .left .servicesBtn{display:none}
}.servicesArea .wrap .left .servicesBtn img{margin-right:10px}
.servicesArea .wrap .left .servicesBtn svg{fill:#fff;right:20px}
.servicesArea .wrap .right{width: 40%;max-width:100%;}
@media (max-width:768px){.servicesArea .wrap .right{width:100%}
}.servicesArea .wrap .servicesList{max-width:100%;transition:all 0.5s ease}
@media (max-width:768px){.servicesArea .wrap .servicesList{margin-top: 0;}
}.servicesArea .wrap .servicesList .slick-slide{position:relative}
.servicesArea .wrap .servicesList .slick-slide::after{background-color:rgba(0,0,0,0.5);content:"";height:100%;left:0;top:0;opacity:0;position:absolute;transition:opacity 0.5s ease;width:100%;z-index:-1}
@media (max-width:768px){.servicesArea .wrap .servicesList .slick-slide::after{display:none}
}.servicesArea .wrap .servicesList .slick-slide.slick-current::after,.servicesArea .wrap .servicesList .slick-slide.isHover::after{opacity:1}
.servicesArea .wrap .servicesList .servicesItem{color:#fff;padding: 140px 0px 50px;position:relative;transform-origin:left}
@media (max-width:1366px){.servicesArea .wrap .servicesList .servicesItem{padding-top:140px;padding-bottom:120px}
}@media (max-width:1280px){.servicesArea .wrap .servicesList .servicesItem{padding-top:120px;padding-bottom: 10px;}
}@media (max-width:1030px){.servicesArea .wrap .servicesList .servicesItem{/* padding-left:50px; *//* padding-right:35px; */}
}@media (max-width:768px){.servicesArea .wrap .servicesList .servicesItem{display:flex;padding:40px 0}
}@media (max-width:640px){.servicesArea .wrap .servicesList .servicesItem{padding:0}
}.servicesArea .wrap .servicesList .servicesItem a{color:#fff;width: 100%;}
.servicesArea .wrap .servicesList .servicesItemContent{display:flex;flex-direction:column;width: -webkit-fill-available;}
.servicesArea .wrap .servicesList .servicesItemContent *{ color:#fff;}
@media (max-width:768px){.servicesArea .wrap .servicesList .servicesItemContent{align-items:center}
}@media (max-width:640px){.servicesArea .wrap .servicesList .servicesItemContent{flex-direction:row;flex-wrap:wrap;justify-content:center;padding: 0px 10px;}
}.servicesArea .wrap .servicesList .servicesItem .mobile{position:relative;margin-bottom:20px;width:100%}
@media (min-width:641px){.servicesArea .wrap .servicesList .servicesItem .mobile{display:none}
}.servicesArea .wrap .servicesList .servicesItem .mobile .servicesBg{filter:brightness(0.65);display:block;position:relative;width:100%}
.servicesArea .wrap .servicesList .servicesItem .mobile .servicesBg img{height:200px;max-width:100%;object-fit:cover;width:100%}
.servicesArea .wrap .servicesList .servicesItem .mobile .servicesLogo{display:block;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.servicesArea .wrap .servicesList .servicesItem .servicesBg{display:none;max-width:100%;flex-basis:100%}
@media (min-width:641px){.servicesArea .wrap .servicesList .servicesItem .servicesBg{display:none}
}.servicesArea .wrap .servicesList .servicesItem .servicesBg img{aspect-ratio:4/3;height:250px;max-width:100%;object-fit:cover}
.servicesArea .wrap .servicesList .servicesItem .servicesLogo{height: 55px;margin-bottom: 80px;position: relative;}
.servicesArea .wrap .servicesList .servicesItem .servicesLogo:before{content:'';position:absolute;background: url(/images/01/icon-bg.png);background-size:cover;background-repeat:no-repeat;width: 130px;height: 130px;opacity:.6;top: 50%;left: 50%;transform: translate(-50%, -50%);}


@media (max-width:640px){.servicesArea .wrap .servicesList .servicesItem .servicesLogo{display:none}
}.servicesArea .wrap .servicesList .servicesItem .servicesLogo img{height:100%;margin:auto;object-fit:contain;width:auto}
.servicesArea .wrap .servicesList .servicesItem .servicesName{font-family: "Gilda Display", serif;font-size: 16px;font-weight:500;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-transform: uppercase;letter-spacing: 1px;opacity: .8;}
@media (max-width:768px){.servicesArea .wrap .servicesList .servicesItem .servicesName{display:none}
}.servicesArea .wrap .servicesList .servicesItem .servicesTitle{font-size: 2rem;font-weight: 400;letter-spacing: 4px;margin-bottom:16px;font-family: "Noto Serif SC", serif;position: relative;}
@media (max-width:1030px){.servicesArea .wrap .servicesList .servicesItem .servicesTitle{font-size:18px}
}@media (max-width:640px){.servicesArea .wrap .servicesList .servicesItem .servicesTitle{/* color:#000; */margin-bottom:0}
}.servicesArea .wrap .servicesList .servicesItem .servicesSubtitle{letter-spacing: 7px;position: absolute;right: 0;top: 5px;font-size: 2.8rem;font-family: "Gilda Display", serif;opacity: .5;line-height: initial;}
@media (max-width:768px){.servicesArea .wrap .servicesList .servicesItem .servicesSubtitle{font-size:18px}
}@media (max-width:640px){.servicesArea .wrap .servicesList .servicesItem .servicesSubtitle{color:#000;font-weight:500}
}.servicesArea .wrap .servicesList .servicesItem .servicesIntro{font-size: 1.1rem;line-height: 250%;letter-spacing: 1px;margin-top: 140px;display:-webkit-box;height:150px;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;font-family: "Noto Serif SC", serif;}
@media (max-width:768px){.servicesArea .wrap .servicesList .servicesItem .servicesIntro{margin-top:20px}
}@media (max-width:640px){.servicesArea .wrap .servicesList .servicesItem .servicesIntro{border-top:1px solid #dcdcdc;/* color:#000; */display:flex;flex-wrap:wrap;padding-top:12px;width:100%}
}@media (max-width:640px){.servicesArea .wrap .servicesList .servicesItem .servicesIntro span{width:50%}
}.servicesArea .wrap .servicesList .mobileArrowBox{display:flex;justify-content:space-between;top:30%;transform:translateY(-50%);left:0;position:absolute;width:100%}
@media (min-width:769px){.servicesArea .wrap .servicesList .mobileArrowBox{display:none}
}.servicesArea .wrap .servicesList .mobileArrowBox .arrowPrev,.servicesArea .wrap .servicesList .mobileArrowBox .arrowNext{align-items:center;background-color:#000;color:#fff;cursor:pointer;font-size:20px;font-family:"Inter",sans-serif;display:flex;height:65px;justify-content:center;width:65px}
@media (max-width:640px){.servicesArea .wrap .servicesList .mobileArrowBox .arrowPrev,.servicesArea .wrap .servicesList .mobileArrowBox .arrowNext{height:45px;width:45px}
}.servicesArea .wrap .servicesList .mobileArrowBox .arrowPrev:hover,.servicesArea .wrap .servicesList .mobileArrowBox .arrowNext:hover{background-color:#5c5c5c}
.servicesArea .wrap .servicesList .mobileArrowBox .arrowPrev,.servicesArea .wrap .servicesList .mobileArrowBox .arrowNext{rotate:90deg}
@media (max-width:640px){.servicesArea .wrap .servicesList .mobileArrowBox .arrowPrev,.servicesArea .wrap .servicesList .mobileArrowBox .arrowNext{rotate:0deg}
}
@media (max-width:1680px){.servicesArea::before{width:var(--sideW)}
}@media (max-width:640px){.servicesArea::before{display:none}
}
@media (max-width:1680px){.servicesArea::after{width:var(--sideW)}
}@media (max-width:640px){.servicesArea::after{display:none}
}



@media (max-width:1770px){
    .servicesArea .wrap{    max-width: 70vw;}
    .tabsbox::after{
    left: 4%;
}
}

@media (max-width:1280px){
     .tabsbox::after{
    left: 3.5%;
}
    .servicesArea .wrap .servicesList .servicesItem .servicesTitle{
    font-size: 1.4rem;
}
    .servicesArea .wrap .servicesList .servicesItem .servicesSubtitle{
    display: none;
}
    .servicesArea .wrap .servicesList .servicesItem .servicesIntro{
    height: auto;
    line-height: 220%;
}
        .servicesArea .wrap{max-width: 80vw;margin-right: 0;}

}

@media (max-width:960px){
    .tabsbox{
    display: none;
}
    .servicesArea .wrap{
    max-width: 100vw;
    width: -webkit-fill-available;
    padding-left: 30px;
    padding-right: 30px;
}
}