.elementor-838 .elementor-element.elementor-element-bcf3056{--display:flex;--min-height:0px;--overlay-opacity:0.5;border-style:none;--border-style:none;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:20px;--padding-left:0px;--padding-right:0px;}.elementor-838 .elementor-element.elementor-element-bcf3056::before, .elementor-838 .elementor-element.elementor-element-bcf3056 > .elementor-background-video-container::before, .elementor-838 .elementor-element.elementor-element-bcf3056 > .e-con-inner > .elementor-background-video-container::before, .elementor-838 .elementor-element.elementor-element-bcf3056 > .elementor-background-slideshow::before, .elementor-838 .elementor-element.elementor-element-bcf3056 > .e-con-inner > .elementor-background-slideshow::before, .elementor-838 .elementor-element.elementor-element-bcf3056 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-838 .elementor-element.elementor-element-786670d{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-838 .elementor-element.elementor-element-84927fd{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--overlay-opacity:1;--border-radius:50px 0px 0px 0px;--padding-top:15px;--padding-bottom:200px;--padding-left:0px;--padding-right:0px;}.elementor-838 .elementor-element.elementor-element-84927fd::before, .elementor-838 .elementor-element.elementor-element-84927fd > .elementor-background-video-container::before, .elementor-838 .elementor-element.elementor-element-84927fd > .e-con-inner > .elementor-background-video-container::before, .elementor-838 .elementor-element.elementor-element-84927fd > .elementor-background-slideshow::before, .elementor-838 .elementor-element.elementor-element-84927fd > .e-con-inner > .elementor-background-slideshow::before, .elementor-838 .elementor-element.elementor-element-84927fd > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#868585;--background-overlay:'';}.elementor-838 .elementor-element.elementor-element-84927fd.e-con{--align-self:center;}.elementor-838 .elementor-element.elementor-element-d25d16c{width:var( --container-widget-width, 8% );max-width:8%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:30px 0px 0px 0px;--container-widget-width:8%;--container-widget-flex-grow:0;border-style:solid;border-width:0px 1px 0px 0px;}.elementor-838 .elementor-element.elementor-element-ca6b09b{width:var( --container-widget-width, 28% );max-width:28%;padding:34px 34px 34px 34px;--container-widget-width:28%;--container-widget-flex-grow:0;text-align:right;}.elementor-838 .elementor-element.elementor-element-ca6b09b .elementor-heading-title{color:#EAE8DD;}.elementor-838 .elementor-element.elementor-element-a2565ca{width:var( --container-widget-width, 28% );max-width:28%;margin:14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;--container-widget-width:28%;--container-widget-flex-grow:0;}.elementor-838 .elementor-element.elementor-element-a2565ca.elementor-element{--align-self:center;}.elementor-838 .elementor-element.elementor-element-a2565ca img{opacity:0.45;}@media(max-width:767px){.elementor-838 .elementor-element.elementor-element-bcf3056{--width:100%;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-838 .elementor-element.elementor-element-786670d{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-838 .elementor-element.elementor-element-84927fd{--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--flex-wrap:wrap;}.elementor-838 .elementor-element.elementor-element-d25d16c{padding:0px 0px 0px 0px;--container-widget-width:32%;--container-widget-flex-grow:0;width:var( --container-widget-width, 32% );max-width:32%;}.elementor-838 .elementor-element.elementor-element-ca6b09b{text-align:right;}.elementor-838 .elementor-element.elementor-element-a2565ca{--container-widget-width:50%;--container-widget-flex-grow:0;width:var( --container-widget-width, 50% );max-width:50%;}.elementor-838 .elementor-element.elementor-element-a2565ca.elementor-element{--align-self:center;}.elementor-838 .elementor-element.elementor-element-a2565ca img{width:100%;max-width:100%;}}/* Start custom CSS for heading, class: .elementor-element-d25d16c */.ccz-side {
  /* 文字直排（由上到下）*/
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;

  /* 讓拉丁字母以側向（旋轉）顯示 */
  text-orientation: sideways;
  -webkit-text-orientation: sideways;

  /* 保留你在 HTML 內輸入的空格（可用   增加空格）*/
  white-space: pre;       /* 或用 pre-wrap 若需要自動換行 */

  /* 視覺微調（選用）*/
  letter-spacing: 0.12em; /* 控制字母間距（縱向） */
  word-spacing: 0.2em;    /* 控制單字間距（縱向，配合空格） */

  /* 不改位置/外觀其他樣式（若需要定位請保留原來的 .ccz-side 規則） */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-84927fd *//* 只需把區塊類名設為 whatwe-do-marquee（不要改 HTML） */
/* 文字更大、頭尾緊貼、無縫連續滾動 */

.whatwe-do-marquee{
  position: relative;
  overflow: hidden;

  /* ---------- 可改參數 ---------- */
  /* 文字請不要在開頭或結尾放空格，才能做到頭尾緊貼 */
  --marquee-text: "ウェブデザイン•웹디자인•";
  --marquee-duration: 18s;                     /* 一輪時間（秒） */
  --marquee-font-size: clamp(2.4rem, 8vw, 7rem);/* 可再調：更大則改上限 */
  --marquee-rgb: 230,224,214;                  /* #E6E0D6 的 RGB */
  --marquee-alpha: 0.5;                        /* 透明度 50% */
  /* ---------- end 可改參數 ---------- */
}

/* 區塊內容（heading 等）在最上層 */
.whatwe-do-marquee > * {
  position: relative;
  z-index: 4;
}

/* 靜態 overlay（若需要保留灰色覆蓋） - 如不需要改成 background: inherit; */
.whatwe-do-marquee::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(128,128,128,0.6); /* 或改為 background: inherit; */
}

/* 跑馬燈文字（只顯示文字、不要任何背景塊） */
.whatwe-do-marquee::before{
  /* 直接把文字連寫兩次（無空格）以達無縫連續 */
  content: var(--marquee-text) var(--marquee-text);
  position: absolute;
  left: 50%;
  top: 90%;
  transform: translate(-50%, -50%);

  white-space: nowrap;
  z-index: 2;
  pointer-events: none;
  background: transparent !important;
  font-family: "Inter","Poppins","Noto Sans JP","Noto Sans KR",sans-serif;
  font-weight: 800;
  font-size: var(--marquee-font-size);
  letter-spacing: .02em;
  color: rgba(var(--marquee-rgb), var(--marquee-alpha));
  line-height: 1;
  will-change: transform;
  padding: 0;          /* 移除任何左右 padding，確保頭尾緊貼 */
  margin: 0;
  box-sizing: content-box;
  min-width: 0;
  animation: css-only-marquee var(--marquee-duration) linear infinite;
}

/* 無縫動畫（內容複製兩次，移動 -50% 即完成一輪） */
@keyframes css-only-marquee{
  0%   { transform: translate(-50%,-50%) translateX(0); }
  100% { transform: translate(-50%,-50%) translateX(-50%); }
}

/* 小螢幕微調（可按需調速或縮小） */
@media (max-width: 768px){
  .whatwe-do-marquee{
    --marquee-duration: 12s;
    --marquee-font-size: clamp(1.2rem, 10vw, 3.2rem);
  }
}

/* 無障礙：停用動畫但保留置中文字 */
@media (prefers-reduced-motion: reduce){
  .whatwe-do-marquee::before{
    animation: none;
    transform: translate(-50%,-50%) translateX(0);
    opacity: 0.85;
  }
}/* End custom CSS */