.elementor-8078 .elementor-element.elementor-element-a1836b5{--display:flex;--margin-top:-20px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-8078 .elementor-element.elementor-element-107da10 > .elementor-widget-container{margin:-10px 0px 0px 0px;}.elementor-8078 .elementor-element.elementor-element-dda4b39{--display:flex;--margin-top:-20px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-8078 .elementor-element.elementor-element-132e770{--display:flex;--margin-top:-20px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-8078 .elementor-element.elementor-element-b2492d4{--display:flex;--margin-top:-20px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-8078 .elementor-element.elementor-element-a7158b4{--display:flex;--margin-top:-20px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-0504ff4 *//* Paste into the Custom CSS of the full-width Container that holds 11-footer.html. */
#hhuhu-footer {
  --ink: #0A0A0A;
  --muted: #666666;
  --max: 1240px;
  width: 100%;
  padding: 68px 0 30px;
  background: #090909;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

#hhuhu-footer,
#hhuhu-footer * { box-sizing: border-box; }
#hhuhu-footer a { color: inherit; text-decoration: none; }
#hhuhu-footer .container { width: min(var(--max), calc(100% - 40px)); margin: auto; }
#hhuhu-footer .footer-grid {
  display: grid;
  grid-template-columns: 1.25fr .75fr .75fr;
  gap: 60px;
  padding-bottom: 50px;
}
#hhuhu-footer .logo { display: flex; align-items: center; gap: 11px; font-weight: 900; letter-spacing: -.03em; }
#hhuhu-footer .logo-mark {
  width: 39px;
  height: 39px;
  border-radius: 13px;
  background: var(--ink);
  color: #fff;
  display: grid;
  place-items: center;
}
#hhuhu-footer .logo small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .08em;
}
#hhuhu-footer .footer-col h4 { margin: 0 0 12px; }
#hhuhu-footer .footer-col a,
#hhuhu-footer .footer-desc { color: #B8B8B8; font-size: 13px; }
#hhuhu-footer .footer-col a { display: block; margin: 7px 0; }
#hhuhu-footer .footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding-top: 20px;
  color: #8A8A8A;
  font-size: 11px;
}
#hhuhu-footer a:focus-visible { outline: 3px solid #087B9B; outline-offset: 5px; }

@media (max-width: 1050px) {
  #hhuhu-footer .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  #hhuhu-footer { padding-bottom: 92px; }
  #hhuhu-footer .container { width: calc(100% - 28px); }
  #hhuhu-footer .footer-grid { grid-template-columns: 1fr; gap: 30px; }
}/* End custom CSS */
/* Start custom CSS *//* 使用教學 | 500 PLUS standard | shared CSS v0.1.0 unchanged.
 * HTML edits: add hhuhu-site only. Horizontal host gutters: 10px.
 */
.hhuhu-site.hhuhu-tutorial { --ice:#EAFBFF }
.hhuhu-site.hhuhu-tutorial[id] { scroll-margin-top:90px }
.hhuhu-site.hhuhu-tutorial .tutorial-eyebrow { padding:8px 13px;border:1px solid #BCEFFF;border-radius:999px;background:rgba(255,255,255,.58) }
.hhuhu-site.hhuhu-tutorial.tutorial-hero h1 { max-width:700px }
.hhuhu-site.hhuhu-tutorial.tutorial-hero h1 span { display:block;color:var(--accent);font-size:inherit;font-weight:inherit }
.hhuhu-site.hhuhu-tutorial .tutorial-lead { margin-bottom:0 }
.hhuhu-site.hhuhu-tutorial .tutorial-btn { text-align:center }
.hhuhu-site.hhuhu-tutorial .tutorial-hero-visual { padding:25px 18px 25px 0 }
.hhuhu-site.hhuhu-tutorial .tutorial-visual-grid { display:grid;grid-template-columns:1fr 1fr;gap:14px;transform:rotate(-3deg) }
.hhuhu-site.hhuhu-tutorial .tutorial-visual-tile { overflow:hidden;aspect-ratio:1.32;border:5px solid rgba(255,255,255,.95);border-radius:22px;background:#fff;box-shadow:0 15px 45px rgba(0,55,80,.12) }
.hhuhu-site.hhuhu-tutorial .tutorial-visual-tile:nth-child(2) { transform:translateY(24px) }
.hhuhu-site.hhuhu-tutorial .tutorial-visual-tile:nth-child(4) { transform:translateY(24px) }
.hhuhu-site.hhuhu-tutorial .tutorial-visual-tile img { width:100%;height:100%;object-fit:cover }
.hhuhu-site.hhuhu-tutorial .tutorial-visual-note { position:absolute;right:0;bottom:-4px;display:flex;align-items:center;gap:10px;padding:13px 17px;border-radius:16px;background:var(--ink);color:#fff;box-shadow:0 14px 30px rgba(0,0,0,.16) }
.hhuhu-site.hhuhu-tutorial .tutorial-visual-number { font-size:28px;font-weight:400;line-height:1 }
.hhuhu-site.hhuhu-tutorial .tutorial-visual-caption { font-size:12px;font-weight:700;line-height:1.4 }
.hhuhu-site.hhuhu-tutorial.tutorial-section { background:var(--paper) }
.hhuhu-site.hhuhu-tutorial .tutorial-section-label { margin-bottom:12px;color:var(--accent);font-size:12px;font-weight:700;letter-spacing:.14em }
.hhuhu-site.hhuhu-tutorial .tutorial-section-head p { color:var(--muted) }
.hhuhu-site.hhuhu-tutorial .tutorial-video-grid { display:grid;grid-template-columns:1fr 1fr;gap:22px }
.hhuhu-site.hhuhu-tutorial .tutorial-video-card { overflow:hidden;border:1px solid var(--line);border-radius:26px;background:#fff;box-shadow:0 8px 30px rgba(0,0,0,.035);transition:transform .2s,box-shadow .2s }
.hhuhu-site.hhuhu-tutorial .tutorial-video-card:hover { transform:translateY(-4px);box-shadow:0 16px 36px rgba(0,0,0,.09) }
.hhuhu-site.hhuhu-tutorial .tutorial-video-media { position:relative;aspect-ratio:16/9;background:var(--ice) }
.hhuhu-site.hhuhu-tutorial .tutorial-video-image { position:relative;display:block;overflow:hidden;width:100%;height:100%;min-height:0;padding:0;border:0;border-radius:0;box-shadow:none;background:var(--ice);cursor:pointer;appearance:none }
.hhuhu-site.hhuhu-tutorial .tutorial-video-trigger[hidden] { display:none }
.hhuhu-site.hhuhu-tutorial .tutorial-video-image img { width:100%;height:100%;object-fit:cover }
.hhuhu-site.hhuhu-tutorial .tutorial-video-frame { display:block;width:100%;height:100%;border:0 }
.hhuhu-site.hhuhu-tutorial .tutorial-preview-notice { position:absolute;inset:0;display:grid;place-items:center;padding:28px;background:rgba(10,10,10,.88);color:#fff;font-size:16px;font-weight:700;line-height:1.6;text-align:center }
.hhuhu-site.hhuhu-tutorial .tutorial-play { position:absolute;top:50%;left:50%;display:grid;width:58px;height:58px;place-items:center;padding-left:3px;border-radius:50%;background:var(--ink);color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.2);transform:translate(-50%,-50%);font-size:19px }
.hhuhu-site.hhuhu-tutorial .tutorial-video-info { display:flex;align-items:center;gap:18px;padding:22px 25px }
.hhuhu-site.hhuhu-tutorial .tutorial-machine-name { display:block }
.hhuhu-site.hhuhu-tutorial .tutorial-video-info small { display:block }
.hhuhu-site.hhuhu-tutorial .tutorial-machine-name { font-size:22px;font-weight:400;line-height:1.3 }
.hhuhu-site.hhuhu-tutorial .tutorial-video-info small { margin-top:5px;color:var(--muted);font-size:14px }
.hhuhu-site.hhuhu-tutorial.tutorial-help { padding:110px 0;background:var(--ice) }
.hhuhu-site.hhuhu-tutorial .tutorial-help-inner { display:flex;align-items:end;justify-content:space-between;gap:40px }
.hhuhu-site.hhuhu-tutorial.tutorial-help p { max-width:660px;margin:18px 0 0;color:var(--muted);font-size:17px }
.hhuhu-site.hhuhu-tutorial.tutorial-help .tutorial-actions { flex:none }
@media(max-width:820px) {
.hhuhu-site.hhuhu-tutorial.tutorial-help { padding:78px 0 }
}
@media(max-width:820px) {
.hhuhu-site.hhuhu-tutorial .tutorial-help-inner { display:block }
}
@media(max-width:560px) {
.hhuhu-site.hhuhu-tutorial .tutorial-hero-visual { padding:4px 8px 22px 0 }
}
@media(max-width:560px) {
.hhuhu-site.hhuhu-tutorial .tutorial-visual-grid { gap:8px }
}
@media(max-width:560px) {
.hhuhu-site.hhuhu-tutorial .tutorial-visual-tile { border-width:3px;border-radius:13px }
}
@media(max-width:560px) {
.hhuhu-site.hhuhu-tutorial .tutorial-visual-tile:nth-child(2) { transform:translateY(12px) }
}
@media(max-width:560px) {
.hhuhu-site.hhuhu-tutorial .tutorial-visual-tile:nth-child(4) { transform:translateY(12px) }
}
@media(max-width:560px) {
.hhuhu-site.hhuhu-tutorial .tutorial-visual-note { right:0;bottom:-7px;padding:9px 12px;border-radius:12px }
}
@media(max-width:560px) {
.hhuhu-site.hhuhu-tutorial .tutorial-visual-number { font-size:21px }
}
@media(max-width:560px) {
.hhuhu-site.hhuhu-tutorial .tutorial-visual-caption { font-size:10px }
}
@media(max-width:560px) {
.hhuhu-site.hhuhu-tutorial.tutorial-help { padding:66px 0;scroll-margin-top:98px }
}
@media(max-width:560px) {
.hhuhu-site.hhuhu-tutorial .tutorial-video-grid { grid-template-columns:1fr;gap:16px }
}
@media(max-width:560px) {
.hhuhu-site.hhuhu-tutorial .tutorial-video-info { padding:18px }
}
@media(max-width:560px) {
.hhuhu-site.hhuhu-tutorial .tutorial-machine-name { font-size:19px }
}
@media(max-width:560px) {
.hhuhu-site.hhuhu-tutorial.tutorial-help p { font-size:16px }
}
@media(prefers-reduced-motion:reduce) {
.hhuhu-site.hhuhu-tutorial .tutorial-video-card { transition:none }
}
@media(prefers-reduced-motion:reduce) {
.hhuhu-site.hhuhu-tutorial .tutorial-video-card:hover { transform:none }
}
/* Existing class-name adapters to the frozen common design. */
.hhuhu-site.hhuhu-tutorial :is(.wrap,.tutorial-wrap) { width:min(var(--max),calc(100% - 64px));
  margin:auto; }
:is(.hhuhu-site.hhuhu-tutorial:is(.section,.tutorial-section),.hhuhu-site.hhuhu-tutorial :is(.section,.tutorial-section)) { padding:110px 0;
  scroll-margin-top:90px; }
.hhuhu-site.hhuhu-tutorial :is(.eyebrow,.tutorial-eyebrow) { display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  letter-spacing:.14em;
  font-weight:700;
  color:#32606b;
  margin-bottom:22px; }
.hhuhu-site.hhuhu-tutorial :is(.eyebrow,.tutorial-eyebrow):before { content:"";
  height:1px;
  width:26px;
  background:currentColor; }
.hhuhu-site.hhuhu-tutorial .dark :is(.eyebrow,.tutorial-eyebrow) { color:var(--blue); }
.hhuhu-site.hhuhu-tutorial :is(.lead,.tutorial-lead) { color:var(--muted);
  font-size:18px;
  max-width:650px; }
.hhuhu-site.hhuhu-tutorial .dark :is(.lead,.tutorial-lead) { color:#bdbdbd; }
.hhuhu-site.hhuhu-tutorial :is(.btn,.tutorial-btn,.tutorial-btn-secondary) { color:var(--ink);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  min-height:50px;
  padding:12px 23px;
  border-radius:999px;
  border:1px solid var(--line);
  background:white;
  font-size:14px;
  font-weight:700;
  line-height:1.4;
  transition:transform .2s,box-shadow .2s; }
.hhuhu-site.hhuhu-tutorial :is(.btn,.tutorial-btn,.tutorial-btn-secondary):hover { transform:translateY(-2px);
  box-shadow:0 8px 24px #00000012; }
.hhuhu-site.hhuhu-tutorial :is(.btn-dark,.tutorial-btn-primary) { background:var(--ink);
  border-color:var(--ink);
  color:white; }
.hhuhu-site.hhuhu-tutorial :is(.actions,.tutorial-actions) { display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:30px; }
:is(.hhuhu-site.hhuhu-tutorial:is(.hero,.tutorial-hero),.hhuhu-site.hhuhu-tutorial :is(.hero,.tutorial-hero)) { overflow:hidden;
  background:radial-gradient(ellipse at 85% 48%,#e6faff 0%,#f7fcfd 38%,white 70%); }
.hhuhu-site.hhuhu-tutorial :is(.hero-grid,.tutorial-hero-grid) { display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:32px;
  align-items:center;
  min-height:640px;
  padding:80px 0; }
.hhuhu-site.hhuhu-tutorial :is(.hero-copy,.tutorial-hero-copy) { position:relative;
  z-index:1; }
:is(.hhuhu-site.hhuhu-tutorial:is(.hero,.tutorial-hero),.hhuhu-site.hhuhu-tutorial :is(.hero,.tutorial-hero)) :is(.eyebrow,.tutorial-eyebrow) { font-size:11px;
  color:var(--blue); }
:is(.hhuhu-site.hhuhu-tutorial:is(.hero,.tutorial-hero),.hhuhu-site.hhuhu-tutorial :is(.hero,.tutorial-hero)) :is(.hero-copy,.tutorial-hero-copy) > :is(.eyebrow,.tutorial-eyebrow) { display:inline-flex;
  gap:0;
  padding:8px 13px;
  font-size:12px;
  border:1px solid var(--blue);
  border-radius:999px; }
:is(.hhuhu-site.hhuhu-tutorial:is(.hero,.tutorial-hero),.hhuhu-site.hhuhu-tutorial :is(.hero,.tutorial-hero)) :is(.hero-copy,.tutorial-hero-copy) > :is(.eyebrow,.tutorial-eyebrow):before { content:none; }
:is(.hhuhu-site.hhuhu-tutorial:is(.hero,.tutorial-hero),.hhuhu-site.hhuhu-tutorial :is(.hero,.tutorial-hero)) :is(.lead,.tutorial-lead) { max-width:530px; }
.hhuhu-site.hhuhu-tutorial :is(.hero-art,.tutorial-hero-visual) { position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0; }
:is(.hhuhu-site.hhuhu-tutorial:is(.hero,.tutorial-hero),.hhuhu-site.hhuhu-tutorial :is(.hero,.tutorial-hero)) .text-link { margin-top:22px; }
.hhuhu-site.hhuhu-tutorial :is(.hero-points,.tutorial-hero-points) { display:flex;
  gap:9px 17px;
  flex-wrap:wrap;
  margin-top:27px;
  font-size:12px;
  color:#555; }
.hhuhu-site.hhuhu-tutorial :is(.hero-points,.tutorial-hero-points) span:before { content:"✓";
  color:var(--blue);
  margin-right:5px; }
.hhuhu-site.hhuhu-tutorial :is(.section-head,.tutorial-section-head) { display:flex;
  justify-content:space-between;
  align-items:end;
  gap:50px;
  margin-bottom:42px; }
.hhuhu-site.hhuhu-tutorial :is(.section-head,.tutorial-section-head) h2 { margin-bottom:0; }
.hhuhu-site.hhuhu-tutorial :is(.section-head,.tutorial-section-head) p { max-width:470px;
  margin:0; }
.hhuhu-site.hhuhu-tutorial .faq-intro :is(.lead,.tutorial-lead) { margin-bottom:30px; }
:is(.hhuhu-site.hhuhu-tutorial:is(.next,.tutorial-help),.hhuhu-site.hhuhu-tutorial :is(.next,.tutorial-help)) :is(.lead,.tutorial-lead) { max-width:650px; }
@media(max-width:1050px) {
.hhuhu-site.hhuhu-tutorial :is(.hero-grid,.tutorial-hero-grid) { min-height:570px; }
}
@media(max-width:1050px) {
.hhuhu-site.hhuhu-tutorial :is(.hero-points,.tutorial-hero-points) { gap:9px 12px; }
}
@media(max-width:820px) {
.hhuhu-site.hhuhu-tutorial :is(.wrap,.tutorial-wrap) { width:calc(100% - 40px); }
}
@media(max-width:820px) {
.hhuhu-site.hhuhu-tutorial :is(.hero-grid,.tutorial-hero-grid) { grid-template-columns:1fr;
    padding:55px 0 45px;
    gap:25px; }
}
@media(max-width:820px) {
.hhuhu-site.hhuhu-tutorial :is(.hero-art,.tutorial-hero-visual) { max-width:480px;
    width:100%;
    margin:auto; }
}
@media(max-width:820px) {
.hhuhu-site.hhuhu-tutorial :is(.hero-copy,.tutorial-hero-copy) { max-width:650px; }
}
@media(max-width:820px) {
:is(.hhuhu-site.hhuhu-tutorial:is(.section,.tutorial-section),.hhuhu-site.hhuhu-tutorial :is(.section,.tutorial-section)) { padding:78px 0; }
}
@media(max-width:820px) {
.hhuhu-site.hhuhu-tutorial :is(.section-head,.tutorial-section-head) { display:block; }
}
@media(max-width:820px) {
.hhuhu-site.hhuhu-tutorial :is(.section-head,.tutorial-section-head) p { margin-top:20px; }
}
@media(max-width:560px) {
.hhuhu-site.hhuhu-tutorial :is(.wrap,.tutorial-wrap) { width:calc(100% - 32px); }
}
@media(max-width:560px) {
:is(.hhuhu-site.hhuhu-tutorial:is(.section,.tutorial-section),.hhuhu-site.hhuhu-tutorial :is(.section,.tutorial-section)) { padding:66px 0;
    scroll-margin-top:98px; }
}
@media(max-width:560px) {
.hhuhu-site.hhuhu-tutorial :is(.lead,.tutorial-lead) { font-size:16px; }
}
@media(max-width:560px) {
.hhuhu-site.hhuhu-tutorial :is(.hero-grid,.tutorial-hero-grid) { padding:43px 0 36px; }
}
@media(max-width:560px) {
:is(.hhuhu-site.hhuhu-tutorial:is(.hero,.tutorial-hero),.hhuhu-site.hhuhu-tutorial :is(.hero,.tutorial-hero)) :is(.eyebrow,.tutorial-eyebrow) { font-size:9px;
    letter-spacing:.09em; }
}
@media(max-width:560px) {
.hhuhu-site.hhuhu-tutorial :is(.hero-art,.tutorial-hero-visual) { max-width:350px; }
}
@media(max-width:560px) {
:is(.hhuhu-site.hhuhu-tutorial:is(.hero,.tutorial-hero),.hhuhu-site.hhuhu-tutorial :is(.hero,.tutorial-hero)) :is(.actions,.tutorial-actions) { gap:9px; }
}
@media(max-width:560px) {
:is(.hhuhu-site.hhuhu-tutorial:is(.hero,.tutorial-hero),.hhuhu-site.hhuhu-tutorial :is(.hero,.tutorial-hero)) :is(.btn,.tutorial-btn,.tutorial-btn-secondary) { padding:12px 16px;
    font-size:13px; }
}
@media(max-width:560px) {
.hhuhu-site.hhuhu-tutorial :is(.hero-points,.tutorial-hero-points) { font-size:11px; }
}
.hhuhu-site.hhuhu-tutorial button:is(.btn,.tutorial-btn,.tutorial-btn-secondary) { cursor:pointer; }
:is(.hhuhu-site.hhuhu-tutorial:is(.hero,.tutorial-hero),.hhuhu-site.hhuhu-tutorial :is(.hero,.tutorial-hero)):is(.section,.tutorial-section) { padding:0; }
.hhuhu-site.hhuhu-tutorial :is(.eyebrow,.tutorial-eyebrow).is-blue { color: var(--blue); }
.hhuhu-site.hhuhu-tutorial.tutorial-help { background:var(--ink);color:white;text-align:left }
.hhuhu-site.hhuhu-tutorial.tutorial-help :is(.lead,.hr-lead,p) { color:#bdbdbd }
.hhuhu-site.hhuhu-tutorial.tutorial-help :is(.eyebrow,.hr-eyebrow,.tutorial-eyebrow) { color:var(--blue);justify-content:flex-start }
.hhuhu-site.hhuhu-tutorial.tutorial-help :is(.actions,.hero-actions,.hr-actions,.tutorial-actions) { justify-content:flex-start }
.hhuhu-site.hhuhu-tutorial.tutorial-help :is(.lead,.hr-lead) { margin-left:0;margin-right:0 }
.hhuhu-site.hhuhu-tutorial.tutorial-help { padding:110px 0 }
@media(max-width:820px) {
.hhuhu-site.hhuhu-tutorial.tutorial-help { padding:78px 0 }
}
@media(max-width:560px) {
.hhuhu-site.hhuhu-tutorial.tutorial-help { padding:66px 0 }
}
.hhuhu-site.hhuhu-tutorial.tutorial-hero { padding:0 }
/* Brand-blue section eyebrows; keep all existing Hero eyebrow styles. */
.hhuhu-site.hhuhu-tutorial :is(.eyebrow,.hr-eyebrow,.tutorial-eyebrow,.tutorial-section-label):not(:where(.hero,.hr-hero,.tutorial-hero) *) { color:#4DD9FF !important; }
/* Exactly 10px on each side, including hosts already padded by Elementor. */
.elementor .e-con:has(> .elementor-widget-html > .elementor-widget-container > .hhuhu-site.hhuhu-tutorial),
body:has(.hhuhu-site.hhuhu-tutorial) .elementor .e-con:has(> .elementor-widget-html > .elementor-widget-container > #hhuhu-footer) {
 --padding-left:10px!important;--padding-right:10px!important;
 --padding-inline-start:10px!important;--padding-inline-end:10px!important;
 padding-left:10px!important;padding-right:10px!important;padding-inline:10px!important;
}/* End custom CSS */