.elementor-461 .elementor-element.elementor-element-47a3906{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--border-radius:0px 0px 0px 0px;--margin-top:100px;--margin-bottom:100px;--margin-left:0px;--margin-right:0px;}.elementor-461 .elementor-element.elementor-element-9503f8a{--display:flex;--border-radius:0px 0px 0px 0px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-461 .elementor-element.elementor-element-9503f8a:not(.elementor-motion-effects-element-type-background), .elementor-461 .elementor-element.elementor-element-9503f8a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F5EBEB59;}.elementor-461 .elementor-element.elementor-element-34a4ca4{--display:flex;}.elementor-461 .elementor-element.elementor-element-ec8c427 .elementor-heading-title{color:var( --e-global-color-blocksy_palette_7 );}body.elementor-page-461:not(.elementor-motion-effects-element-type-background), body.elementor-page-461 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-text );}@media(min-width:768px){.elementor-461 .elementor-element.elementor-element-47a3906{--content-width:600px;}}/* Start custom CSS for container, class: .elementor-element-9503f8a */@property --border-angle-1 {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}
@property --border-angle-2 {
  syntax: "<angle>";
  inherits: true;
  initial-value: 90deg;
}
@property --border-angle-3 {
  syntax: "<angle>";
  inherits: true;
  initial-value: 180deg;
}

@keyframes rotateBackground {
  to {
    --border-angle-1: 360deg;
  }
}
@keyframes rotateBackground2 {
  to {
    --border-angle-2: -270deg;
  }
}
@keyframes rotateBackground3 {
  to {
    --border-angle-3: 540deg;
  }
}

:root {
  --bright-blue: rgb(0, 100, 255);
  --bright-green: rgb(0, 255, 0);
  --bright-red: rgb(255, 0, 0);
  --border-size: 2px;
  --border-radius: 0.75em;
}

@supports (color: color(display-p3 1 1 1)) {
  :root {
    --bright-blue: color(display-p3 0 0.2 1);
    --bright-green: color(display-p3 0.4 1 0);
    --bright-red: color(display-p3 1 0 0);
  }
}

.yao {
  position: relative;
  border-radius: var(--border-radius);
  z-index: 0;
 
  background: transparent; /* 內部背景，可改為 transparent */
  overflow: hidden;
}

/* 🔥 彩色邊框動畫層 */
.yao::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: var(--border-size);
  border-radius: inherit;
  background-image:
    conic-gradient(from var(--border-angle-1) at 10% 15%, transparent, var(--bright-blue) 10%, transparent 30%, transparent),
    conic-gradient(from var(--border-angle-2) at 70% 60%, transparent, var(--bright-green) 10%, transparent 60%, transparent),
    conic-gradient(from var(--border-angle-3) at 50% 20%, transparent, var(--bright-red) 10%, transparent 50%, transparent);
  z-index: -1;
  mask: 
    linear-gradient(#000 0 0) content-box, 
    linear-gradient(#000 0 0);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box, 
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  animation: 
    rotateBackground 3s linear infinite,
    rotateBackground2 8s linear infinite,
    rotateBackground3 13s linear infinite;
  box-sizing: border-box;
}/* End custom CSS */