.elementor-8702 .elementor-element.elementor-element-aeffa6b{--display:flex;}.elementor-8702 .elementor-element.elementor-element-ee11ed2{--spacer-size:0.1rem;}.elementor-8702 .elementor-element.elementor-element-9927630{--display:flex;--min-height:0px;--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;--justify-content:center;}.elementor-8702 .elementor-element.elementor-element-15dd3af{column-gap:0px;text-align:center;}.elementor-8702 .elementor-element.elementor-element-8887795{--display:flex;}.elementor-8702 .elementor-element.elementor-element-605361b{--spacer-size:0.1rem;}.elementor-8702 .elementor-element.elementor-element-727d30a{--display:flex;}.elementor-8702 .elementor-element.elementor-element-7d357a6:hover .elementor-widget-container{box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);}.elementor-8702 .elementor-element.elementor-element-5d25bd7{--display:flex;}@media(max-width:1024px){.elementor-8702 .elementor-element.elementor-element-7d357a6 > .elementor-widget-container{margin:0rem 0rem 0rem 0rem;padding:0rem 0rem 0rem 0rem;}.elementor-8702 .elementor-element.elementor-element-7d357a6.elementor-element{--align-self:center;}.elementor-8702 .elementor-element.elementor-element-7d357a6{text-align:center;font-size:0.1rem;word-spacing:0em;}}@media(min-width:768px){.elementor-8702 .elementor-element.elementor-element-9927630{--content-width:1600px;}}@media(max-width:1024px) and (min-width:768px){.elementor-8702 .elementor-element.elementor-element-8887795{--content-width:500px;}}@media(max-width:767px){.elementor-8702 .elementor-element.elementor-element-aeffa6b{--min-height:0.1rem;}.elementor-8702 .elementor-element.elementor-element-ee11ed2{--spacer-size:0.1rem;}.elementor-8702 .elementor-element.elementor-element-605361b{--spacer-size:0.1rem;}.elementor-8702 .elementor-element.elementor-element-7d357a6 > .elementor-widget-container{margin:-1rem -1rem -1rem -1rem;padding:0rem 0rem 0rem 0rem;border-radius:0rem 0rem 0rem 0rem;}.elementor-8702 .elementor-element.elementor-element-7d357a6.elementor-element{--flex-grow:0;--flex-shrink:1;}.elementor-8702 .elementor-element.elementor-element-7d357a6{text-align:left;letter-spacing:0rem;word-spacing:0em;}.elementor-8702 .elementor-element.elementor-element-7d357a6 p{margin-bottom:0.1rem;}}/* Start custom CSS for text-editor, class: .elementor-element-7d357a6 */.colorful-btn {
  display: inline-block;
  padding: 8px 20px;
  border-radius: 8px;
  text-decoration: none;
  background: linear-gradient(90deg, 
    #FFD1D1, /* 淺紅 */
    #FFE4B2, /* 淺橙 */
    #FFFFCC, /* 淺黃 */
    #D1F2A5, /* 淺綠 */
    #B2E0FF, /* 淺藍 */
    #C1B3E6, /* 淺靛 */
    #E6CCFF  /* 淺紫 */
  );
  color: #333;
  font-weight: bold;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: background 0.3s, color 0.3s;
  text-shadow:
    1px 1px 1px rgba(255, 255, 255, 0.8), /* 外亮光 */
    0 0 5px rgba(0, 0, 0, 0.2);            /* 內陰影 */
}

.colorful-btn:hover {
  background: linear-gradient(90deg,
    #FFE5B4,
    #FFF9C4,
    #D0F0C0,
    #B3E5FC,
    #C5CAE9,
    #E1BEE7,
    #F8BBD0
  );
  color: #222;
  text-shadow:
    1px 1px 2px rgba(255, 255, 255, 0.9),
    0 0 7px rgba(0, 0, 0, 0.3);
}

li a {
  display: inline-block;
  padding: 8px 20px;
  border-radius: 8px;
  background: #fff; /* 預設白底 */
  color: #333;
  font-weight: bold;
  text-decoration: none;
  transition: background 0.3s, color 0.3s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

li a:hover {
  background: linear-gradient(90deg, #00C853, #B2FF59); /* 漸變綠 */
  color: #fff;
  box-shadow: 0 2px 12px rgba(0, 200, 83, 0.6);
}

a.active {
    background-color: #4a90e2;
    color: white;
    padding: 8px 16px;
    border-radius: 12px;
    font-weight: 600;
    box-shadow: 0 4px 8px rgba(74, 144, 226, 0.4);
    transform: scale(1.1);
    transition: all 0.3s ease;
    position: relative;
}

a.active::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 6px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 10px solid #4a90e2;
    border-radius: 2px;
}

a.active::after {
    content: "";
    position: absolute;
    top: -8px;
    right: 6px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 10px solid #4a90e2;
    border-radius: 2px;
}

a.active:hover {
    background-color: #357abd;
    box-shadow: 0 6px 12px rgba(53, 122, 189, 0.6);
    transform: scale(1.15);
}

a.active:hover::before,
a.active:hover::after {
    border-bottom-color: #4caf50;
}/* End custom CSS */