@charset "utf-8";

/* ===== _reset.css ===== */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */

body {
  margin: 0;
  line-height: 1;
}

/* HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */

audio,
canvas,
progress,
video {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */

[hidden],
template {
  display: none;
}

/* Links
   ========================================================================== */

/**
 * Remove the gray background color from active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
  outline: 0;
}

/* Text-level semantics
   ========================================================================== */

/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */

abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */

b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */

dfn {
  font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */

h1 {
  font-size: 2em;
}

/**
 * Address styling not present in IE 8/9.
 */

mark {
  background: #ff0;
  color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove border when inside `a` element in IE 8/9/10.
 */

img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */

/**
 * Address differences between Firefox and other browsers.
 */

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

/**
 * Contain overflow in all browsers.
 */

pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Forms
   ========================================================================== */

/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */

/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */

button,
input,
optgroup,
select,
textarea {
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  margin: 0; /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */

button {
  overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */

button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

input {
  line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box; /* 2 */
  box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
  border: 0; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */

textarea {
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */

optgroup {
  font-weight: bold;
}


/* List
   ========================================================================== */

/**
 * Remove list-style
 */
ol, ul {
	list-style: none;
}


/* ===== _editor.css ===== */
@namespace url(http://www.w3.org/1999/xhtml);
/* set default namespace to HTML */

@namespace xul url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

.editor [dir="rtl"] {
    direction: rtl;
    unicode-bidi: embed;
}

.editor [dir="ltr"] {
    direction: ltr;
    unicode-bidi: embed;
}

.editor bdo[dir] {
    unicode-bidi: bidi-override;
}

.editor address,
.editor blockquote,
.editor body,
.editor caption,
.editor center,
.editor col,
.editor colgroup,
.editor dd,
.editor dir,
.editor div,
.editor dl,
.editor dt,
.editor fieldset,
.editor form,
.editor h1,
.editor h2,
.editor h3,
.editor h4,
.editor h5,
.editor h6,
.editor hr,
.editor html,
.editor isindex,
.editor li,
.editor listing,
.editor map,
.editor marquee,
.editor menu,
.editor noframes,
.editor ol,
.editor p,
.editor plaintext,
.editor pre,
.editor table,
.editor tbody,
.editor td,
.editor tfoot,
.editor th,
.editor thead,
.editor tr,
.editor ul,
.editor xmp {
    unicode-bidi: embed;
}

.editor html,
.editor div,
.editor map,
.editor dt,
.editor isindex,
.editor form {
    display: block;
}

.editor body {
    display: block;
    margin: 8px;
}

.editor p,
.editor dl,
.editor multicol {
    display: block;
    margin: 1em 0;
}

.editor dd {
    display: block;
    -moz-margin-start: 40px;
}

.editor blockquote {
    display: block;
    margin: 1em 40px;
}

.editor address {
    display: block;
    font-style: italic;
}

.editor center {
    display: block;
    text-align: -moz-center;
}

.editor blockquote[type=cite] {
    display: block;
    margin: 1em 0px;
    -moz-padding-start: 1em;
    -moz-border-start: solid;
    border-color: blue;
    border-width: thin;
}

.editor span[_moz_quote=true] {
    color: blue;
}

.editor pre[_moz_quote=true] {
    color: blue;
}

.editor h1 {
    display: block;
    font-size: 2em;
    font-weight: bold;
    margin: .67em 0;
}

.editor h2 {
    display: block;
    font-size: 1.5em;
    font-weight: bold;
    margin: .83em 0;
}

.editor h3 {
    display: block;
    font-size: 1.17em;
    font-weight: bold;
    margin: 1em 0;
}

.editor h4 {
    display: block;
    font-weight: bold;
    margin: 1.33em 0;
}

.editor h5 {
    display: block;
    font-size: 0.83em;
    font-weight: bold;
    margin: 1.67em 0;
}

.editor h6 {
    display: block;
    font-size: 0.67em;
    font-weight: bold;
    margin: 2.33em 0;
}

.editor listing {
    display: block;
    font-family: -moz-fixed;
    font-size: medium;
    white-space: pre;
    margin: 1em 0;
}

.editor xmp,
.editor pre,
.editor plaintext {
    display: block;
    font-family: -moz-fixed;
    white-space: pre;
    margin: 1em 0;
}

.editor table {
    display: table;
    border-spacing: 2px;
    border-collapse: separate;
    margin-top: 0;
    margin-bottom: 0;
    /* XXXldb do we want this if we're border-collapse:collapse ? */
    
    -moz-box-sizing: border-box;
    text-indent: 0;
}

.editor table[align="left"] {
    float: left;
}

.editor table[align="right"] {
    float: right;
    text-align: start;
}

.editor table[rules]:not([rules="none"]) {
    border-collapse: collapse;
}

.editor caption {
    display: table-caption;
    text-align: center;
    -moz-box-sizing: border-box;
}

.editor table[align="center"] > caption {
    margin-left: auto;
    margin-right: auto;
}

.editor table[align="center"] > caption[align="left"] {
    margin-right: 0;
}

.editor table[align="center"] > caption[align="right"] {
    margin-left: 0;
}

.editor tr {
    display: table-row;
    vertical-align: inherit;
}

.editor col {
    display: table-column;
}

.editor colgroup {
    display: table-column-group;
}

.editor tbody {
    display: table-row-group;
    vertical-align: middle;
}

.editor thead {
    display: table-header-group;
    vertical-align: middle;
}

.editor tfoot {
    display: table-footer-group;
    vertical-align: middle;
}

.editor table > tr {
    vertical-align: middle;
}

.editor td {
    display: table-cell;
    vertical-align: inherit;
    text-align: inherit;
}

.editor th {
    display: table-cell;
    vertical-align: inherit;
    font-weight: bold;
}

.editor tr > form:-moz-is-html,
.editor tbody > form:-moz-is-html,
.editor thead > form:-moz-is-html,
.editor tfoot > form:-moz-is-html,
.editor table > form:-moz-is-html {
    /* Important: don't show these forms in HTML */
    
    display: none !important;
}

.editor q:before {
    content: open-quote;
}

.editor q:after {
    content: close-quote;
}

.editor b,
.editor strong {
    font-weight: bolder;
}

.editor i,
.editor cite,
.editor em,
.editor var,
.editor dfn {
    font-style: italic;
}

.editor tt,
.editor code,
.editor kbd,
.editor samp {
    font-family: -moz-fixed;
}

.editor u,
.editor ins {
    text-decoration: underline;
}

.editor s,
.editor strike,
.editor del {
    text-decoration: line-through;
}

.editor blink {
    text-decoration: blink;
}

.editor big {
    font-size: larger;
}

.editor small {
    font-size: smaller;
}

.editor sub {
    vertical-align: sub;
    font-size: smaller;
    line-height: normal;
}

.editor sup {
    vertical-align: super;
    font-size: smaller;
    line-height: normal;
}

.editor nobr {
    white-space: nowrap;
}

.editor abbr[title],
.editor acronym[title] {
    border-bottom: dotted 1px;
}

.editor ul,
.editor menu,
.editor dir {
    display: block;
    list-style-type: disc;
    margin: 1em 0;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;
    -moz-padding-start: 40px;
}

.editor ol {
    display: block;
    list-style-type: decimal;
    margin: 1em 0;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;
    -moz-padding-start: 40px;
}

.editor li {
    display: list-item;
}

.editor ul ul,
.editor ul ol,
.editor ul dir,
.editor ul menu,
.editor ul dl,
.editor ol ul,
.editor ol ol,
.editor ol dir,
.editor ol menu,
.editor ol dl,
.editor dir ul,
.editor dir ol,
.editor dir dir,
.editor dir menu,
.editor dir dl,
.editor menu ul,
.editor menu ol,
.editor menu dir,
.editor menu menu,
.editor menu dl,
.editor dl ul,
.editor dl ol,
.editor dl dir,
.editor dl menu,
.editor dl dl {
    margin-top: 0;
    margin-bottom: 0;
}

.editor ol ul,
.editor ul ul,
.editor menu ul,
.editor dir ul,
.editor ol menu,
.editor ul menu,
.editor menu menu,
.editor dir menu,
.editor ol dir,
.editor ul dir,
.editor menu dir,
.editor dir dir {
    list-style-type: circle;
}

.editor ol ol ul,
.editor ol ul ul,
.editor ol menu ul,
.editor ol dir ul,
.editor ol ol menu,
.editor ol ul menu,
.editor ol menu menu,
.editor ol dir menu,
.editor ol ol dir,
.editor ol ul dir,
.editor ol menu dir,
.editor ol dir dir,
.editor ul ol ul,
.editor ul ul ul,
.editor ul menu ul,
.editor ul dir ul,
.editor ul ol menu,
.editor ul ul menu,
.editor ul menu menu,
.editor ul dir menu,
.editor ul ol dir,
.editor ul ul dir,
.editor ul menu dir,
.editor ul dir dir,
.editor menu ol ul,
.editor menu ul ul,
.editor menu menu ul,
.editor menu dir ul,
.editor menu ol menu,
.editor menu ul menu,
.editor menu menu menu,
.editor menu dir menu,
.editor menu ol dir,
.editor menu ul dir,
.editor menu menu dir,
.editor menu dir dir,
.editor dir ol ul,
.editor dir ul ul,
.editor dir menu ul,
.editor dir dir ul,
.editor dir ol menu,
.editor dir ul menu,
.editor dir menu menu,
.editor dir dir menu,
.editor dir ol dir,
.editor dir ul dir,
.editor dir menu dir,
.editor dir dir dir {
    list-style-type: square;
}

.editor hr {
    display: block;
    border: 1px inset;
    margin: 0.5em auto 0.5em auto;
    color: gray;
    -moz-float-edge: margin-box;
    -moz-box-sizing: border-box;
}

.editor hr[size="1"] {
    border-style: solid none none none;
}

.editor *|*:-moz-any-link img,
.editor img[usemap],
.editor object[usemap] {
    border: 2px solid;
}

.editor img:-moz-broken::before,
.editor input:-moz-broken::before,
.editor img:-moz-user-disabled::before,
.editor input:-moz-user-disabled::before,
.editor img:-moz-loading::before,
.editor input:-moz-loading::before,
.editor applet:-moz-empty-except-children-with-localname(param):-moz-broken::before,
.editor applet:-moz-empty-except-children-with-localname(param):-moz-user-disabled::before {
    content: -moz-alt-content !important;
    unicode-bidi: embed;
}

.editor object:-moz-broken > *|*,
.editor applet:-moz-broken > *|* object:-moz-user-disabled > *|*,
.editor applet:-moz-user-disabled > *|* {
    /*
      Inherit in the object's alignment so that if we aren't aligned explicitly
      we'll end up in the right place vertically.  See bug 36997.  Note that this
      is not !important because we _might_ be aligned explicitly.
    */
    
    vertical-align: inherit;
}

.editor img:-moz-suppressed,
.editor input:-moz-suppressed,
.editor object:-moz-suppressed,
.editor embed:-moz-suppressed,
.editor applet:-moz-suppressed {
    /*
      Set visibility too in case the page changes display.  Note that we _may_
      want to just set visibility and not display, in general, if we find that
      display:none breaks too many layouts.  And if we decide we really do want
      people to be able to right-click blocked images, etc, we need to set
      neither one, and hack the painting code.... :(
     */
    
    display: none !important;
    visibility: hidden !important;
}

.editor img[usemap],
.editor object[usemap] {
    color: blue;
}

.editor frameset {
    display: block !important;
    overflow: -moz-hidden-unscrollable;
    position: static !important;
    float: none !important;
    border: none !important;
}

.editor frame {
    border: none !important;
}

.editor iframe {
    border: 2px inset;
}

.editor noframes {
    display: none;
}

.editor spacer {
    position: static !important;
    float: none !important;
}

.editor canvas {
    -moz-user-select: none;
}

.editor abbr:focus,
.editor acronym:focus,
.editor address:focus,
.editor b:focus,
.editor base:focus,
.editor big:focus,
.editor blockquote:focus,
.editor br:focus,
.editor canvas:focus,
.editor caption:focus,
.editor center:focus,
.editor cite:focus,
.editor code:focus,
.editor col:focus,
.editor colgroup:focus,
.editor dd:focus,
.editor del:focus,
.editor dfn:focus,
.editor dir:focus,
.editor div:focus,
.editor dl:focus,
.editor dt:focus,
.editor em:focus,
.editor fieldset:focus,
.editor font:focus,
.editor form:focus,
.editor h1:focus,
.editor h2:focus,
.editor h3:focus,
.editor h4:focus,
.editor h5:focus,
.editor h6:focus,
.editor hr:focus,
.editor i:focus,
.editor img:focus,
.editor ins:focus,
.editor kbd:focus,
.editor label:focus,
.editor legend:focus,
.editor li:focus,
.editor link:focus,
.editor menu:focus,
.editor ol:focus,
.editor p:focus,
.editor pre:focus,
.editor q:focus,
.editor s:focus,
.editor samp:focus,
.editor small:focus,
.editor span:focus,
.editor strike:focus,
.editor strong:focus,
.editor sub:focus,
.editor sup:focus,
.editor table:focus,
.editor tbody:focus,
.editor td:focus,
.editor tfoot:focus,
.editor th:focus,
.editor thead:focus,
.editor tr:focus,
.editor tt:focus,
.editor u:focus,
.editor ul:focus,
.editor var:focus {
    /* Don't specify the outline-color, we should always use initial value. */
    
    outline: 1px dotted;
}

.editor area,
.editor base,
.editor basefont,
.editor head,
.editor meta,
.editor script,
.editor style,
.editor title,
.editor noembed,
.editor param {
    display: none;
}

.editor video > xul|videocontrols,
.editor audio > xul|videocontrols {
    display: -moz-box;
    -moz-box-orient: vertical;
    -moz-binding: url("chrome://global/content/bindings/videocontrols.xml#videoControls");
}

.editor video:not([controls]) > xul|videocontrols,
.editor audio:not([controls]) > xul|videocontrols {
    visibility: hidden;
}

.editor audio:not([controls]) {
    display: none;
}

.editor marquee {
    width: -moz-available;
    display: inline-block;
    vertical-align: text-bottom;
    text-align: start;
    -moz-binding: url("chrome://xbl-marquee/content/xbl-marquee.xml#marquee-horizontal");
}

.editor marquee[direction="up"],
.editor marquee[direction="down"] {
    -moz-binding: url("chrome://xbl-marquee/content/xbl-marquee.xml#marquee-vertical");
    height: 200px;
}

@media print {
    .editor marquee {
        -moz-binding: none;
    }
}

/* =========================================================
   後台編輯器內容用的清單工具 class（2026-08-21）

   上面的 .editor ol / .editor ul 是把瀏覽器預設樣式補回來用的
   —— _reset.css 第 429 行先把全站 ol, ul 的 list-style 清成 none，
   這裡再加回 decimal / disc，讓編輯器打的清單在前台正常顯示。

   但文章內容常自己帶編號（Q1、Q2、步驟一…），這時 <ol> 的自動
   編號就會變成「1. Q1」「2. Q2」的重複編號。改用 <div> 排版會
   失去語意（AEO 的問答結構要靠 ol/li 才讀得出來），所以保留
   <ol>，只把視覺上的編號與縮排關掉：

       <ol class="no-num"> … </ol>

   縮排要一起歸零，否則關掉編號後左邊會留下 40px 的空白。
   ========================================================= */

.editor ol.no-num,
.editor ul.no-num {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
    -webkit-padding-start: 0;
    -moz-padding-start: 0;
    padding-inline-start: 0;
}

/* 只想關編號、想保留原本縮排時用這一支 */
.editor ol.no-num.keep-indent,
.editor ul.no-num.keep-indent {
    padding-left: 40px;
    -webkit-padding-start: 40px;
    -moz-padding-start: 40px;
    padding-inline-start: 40px;
}


/* ===== _editor_grid.css ===== */
.editor .row,
.editor .col .row {
    margin: 0 -15px;
}
.editor .col .row {
    margin-bottom: -15px;
}
.editor .col,
.editor .col .row > .col {
    float: left;
    padding: 0 15px 30px;
}
.editor .s-gap,
.editor .col .s-gap {
    margin: 0 -3px;
}
.editor .s-gap > .col,
.editor .col .s-gap > .col {
    padding: 0 3px 6px;
}
.editor .m-gap,
.editor .col .m-gap {
    margin: 0 -7px;
}
.editor .m-gap > .col,
.editor .col .m-gap > .col {
    padding: 0 7px 14px;
}
.editor .no-gap,
.editor .col .no-gap {
    margin: 0;
}
.editor .no-gap > .col,
.editor .col .no-gap > .col {
    padding: 0;
}

.editor .grid1 > .col,
.editor .col .grid1 > .col {
    float: none;
}
.editor .grid2 > .col,
.editor .col .grid2 > .col {
    width: 50%;
}
.editor .grid3 > .col,
.editor .col .grid3 > .col {
    width: 33.33%;
}
.editor .grid4 > .col,
.editor .col .grid4 > .col {
    width: 25%;
}
.editor .grid5 > .col,
.editor .col .grid5 > .col {
    width: 20%;
}
.editor .grid6 > .col,
.editor .col .grid6 > .col {
    width: 16.66%;
}

.editor .grid2.w62-38 > .col:nth-child(1),
.editor .col .grid2.w62-38 > .col:nth-child(1) {
    width: 62%;
}
.editor .grid2.w62-38 > .col:nth-child(2),
.editor .col .grid2.w62-38 > .col:nth-child(2) {
    width: 38%;
}
.editor .grid2.w78-22 > .col:nth-child(1),
.editor .col .grid2.w78-22 > .col:nth-child(1) {
    width: 78%;
}
.editor .grid2.w78-22 > .col:nth-child(2),
.editor .col .grid2.w78-22 > .col:nth-child(2) {
    width: 22%;
}
.editor .col .grid2.w62-38 > .col:nth-child(1),
.editor .col .grid2.w62-38 > .col:nth-child(2),
.editor .col .grid2.w78-22 > .col:nth-child(1),
.editor .col .grid2.w78-22 > .col:nth-child(2) {
    float: left;
}

@media screen and (max-width: 1024px) {
    .editor .grid2.w78-22 > .col:nth-child(2) .col {
        float: left;
        width: 50%;
    }
    .editor .grid2 > .col,
    .editor .grid2.w62-38 > .col:nth-child(1),
    .editor .grid2.w62-38 > .col:nth-child(2),
    .editor .grid2.w78-22 > .col:nth-child(1),
    .editor .grid2.w78-22 > .col:nth-child(2),
    .editor .col .grid2.w78-22 > .col:nth-child(2) .col {
        float: none;
        width: auto;
    }
    .editor .grid4 > .col {
        width: 50%;
    }
    .editor .grid5 > .col,
    .editor .grid6 > .col {
        width: 33.33%;
    }
}
@media screen and (max-width: 900px) {
    .editor .grid3 > .col {
        float: none;
        width: auto;
    }
}
@media screen and (max-width: 767px) {
    .editor .col .grid2.w78-22 > .col:nth-child(2) .col {
        float: left;
        width: 50%;
    }
    .editor .col .grid2.w78-22 > .col:nth-child(1),
    .editor .col .grid2.w78-22 > .col:nth-child(2) {
        float: none;
        width: auto;
    }
    .editor .grid5 > .col,
    .editor .grid6 > .col {
        width: 50%;
    }
    .editor .col .grid5 > .col,
    .editor .col .grid6 > .col {
        width: 33.33%;
    }
}
@media screen and (max-width: 640px) {
    .editor .grid4 > .col {
        float: none;
        width: auto;
    }
    .editor .col .grid3 > .col,
    .editor .col .grid4 > .col,
    .editor .col .grid5 > .col,
    .editor .col .grid6 > .col {
        width: 50%;
    }
}
@media screen and (max-width: 480px) {
    .editor .grid5 > .col,
    .editor .grid6 > .col,
    .editor .col .grid2 > .col,
    .editor .col .grid3 > .col,
    .editor .col .grid4 > .col,
    .editor .col .grid5 > .col,
    .editor .col .grid6 > .col,
    .editor .col .grid2.w62-38 > .col:nth-child(1),
    .editor .col .grid2.w62-38 > .col:nth-child(2),
    .editor .grid2.w78-22 > .col:nth-child(2) .col,
    .editor .col .grid2.w78-22 > .col:nth-child(2) .col {
        float: none;
        width: auto;
    }
}

/* ===== _basic.css ===== */
body {
    font-family: Arial, "Noto Sans TC", "微軟正黑體", "Microsoft JhengHei", "微软雅黑", "メイリオ", "맑은 고딕", sans-serif;
    color: #666;
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: 0.35px;
    word-wrap: break-word;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
a {
    color: #666;
    text-decoration: none;
}
.wrapper {
	margin-top: 101px;
    overflow: hidden;
}
.container {
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 0 15px;
    max-width: 1470px;
}
.container:after,
.editor:after,
.clearfix:after,
.list-h:after,
.row:after {
    content: "";
    display: block;
    height: 0;
    font-size: 0;
    visibility: hidden;
    clear: both;
}
.clearfix {
    display: inline-block;
    clear: both;
}
/* start commented backslash hack \*/
* html .clearfix {
    height: 1%;
}
.clearfix {
    display: block;
}
/* 螢幕看不到、但螢幕閱讀器、搜尋引擎與 AI 代理讀得到的文字。
   用途：只放圖片的連結（例如首頁作品輪播）必須要有可辨識的文字，
   否則無障礙與 AI 代理稽核會判定「連結沒有名稱」。
   刻意不用 display:none / visibility:hidden —— 那兩種輔助技術也讀不到。 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
img {
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
    max-height: 100%;
    height: auto !important;
    line-height: 1;
}
.list-inline .item,
.list-inline > li {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: top;
}
.list-inline .item a,
.list-inline > li a {
    display: inline-block;
    position: relative;
}
.list-h .item,
.list-h > li {
    float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.list-h .item a,
.list-h > li a {
    position: relative;
    display: block;
}
.pic {
    text-align: center;
}
.pic.full img {
    width: 100%;
}
.col,
.form-control {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
button:focus,
input:focus {
    outline: none;
}
.editor .list-inline,
.editor .list-h {
    list-style-type: none;
    padding: 0;
}
/*------------ line btn ------------*/
#smartsupp-widget-container > div[data-testid=widgetButtonFrame]{
	bottom: 91px !important;
}
#smartsupp-widget-container > div[data-testid=widgetPopupFrame]{
	bottom: 158px !important;
}
@media(min-width:760px){
	#smartsupp-widget-container > div[data-testid=widgetMessengerFrame]{
		bottom: 91px !important;
	}
}
@media(max-width:760px){
	#smartsupp-widget-container > div[data-testid=widgetMessengerFrame]{
		bottom: 0px !important;
	}
}
.add-line-friend-btn{
    position: fixed;
    right: 12px;
    bottom: 24px;
    box-sizing: border-box;
    text-align: left;
    padding-left: 11px;
	width: 125px;
    height: 56px;
    line-height: 56px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0;
    color: #FFF;
    background: #06C755;
    border-radius: 30px;
    transition: all .3s ease;
	z-index: 501;
}
.add-line-friend-btn:hover{
	color: #FFF !important;
    background: #12d763;
}
.add-line-friend-btn .line-icon{
    position: absolute;
    right: 9px;
    top: 15px;
    width: 26px;
    height: 25px;
	background: url("../../images/line-icon.svg") no-repeat;
    background-size: contain;
}
.fixed-inquiry-btn{
	position: fixed;
	right: 12px;
	bottom: 93px;
	box-sizing: border-box;
	text-align: left;
	padding-left: 11px;
	width: 125px;
	height: 56px;
	line-height: 56px;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0;
    color: #FFF;
	background: #1246e0;
	border-radius: 30px;
	transition: all .3s ease;
	z-index: 501;
}
.fixed-inquiry-btn:hover{
	color: #FFF !important;
    background: #2357F1;
}
.fixed-inquiry-btn .inquiry-icon{
    position: absolute;
    right: 9px;
    top: 15px;
    width: 26px;
    height: 25px;
	background: url("../../images/inquiry-icon.svg") no-repeat;
    background-size: contain;
}
.fixed-inquiry-form{
	position: fixed;
	right: 12px;
	bottom: 146px;
	width: 256px;
	height: 366px;
	background: #f1f1f1;
	border: 1px solid #d1d1d1;
	border-radius: 10px;
	box-shadow: 1px 4px 20px #00000040;
	transition: all .3s ease;
	pointer-events: none;
	z-index: 901;
	opacity: 0;
}
.fixed-inquiry-form.active{
	bottom: 166px;
    pointer-events: auto;
	opacity: 1;
}
.fixed-inquiry-form .in-top{
	box-sizing: border-box;
	text-align: center;
	padding: 20px;
	background: #1246e0;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
.fixed-inquiry-form .in-mid{
	box-sizing: border-box;
	padding: 20px 20px 5px;
}
.fixed-inquiry-form .in-bottom{
	box-sizing: border-box;
	padding: 0 20px 14px;
}
.fixed-inquiry-form .in-text{
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
    color: #FFF;
}
.fixed-inquiry-form .in-title{
	margin: 0;
	margin-bottom: 10px;
	font-size: 25px;
	font-weight: bold;
	line-height: 1.5;
	color: #fff;
}
.fixed-inquiry-form .in-mid .form-control{
	box-sizing: border-box;
	margin: 0;
	padding: 0 10px;
	width: 100%;
	height: 40px;
	font-size: 15px;
	color: #333;
	border: 1px solid #ddd;
	border-radius: 7px;
	transition: all .3s ease;
}
.fixed-inquiry-form .in-mid .form-control:hover,
.fixed-inquiry-form .in-mid .form-control:focus{
	border: 1px solid #afafaf;
	outline: none;
}
.fixed-inquiry-form .in-mid .control-label{
	position: relative;
	display: block;
	text-align: left;
	margin-bottom: 9px;
	padding-left: 17px;
	font-size: 14px;
    line-height: 1;
	color: #333;
}
.fixed-inquiry-form .in-mid .control-label.required:before{
    content: "";
    position: absolute;
    top: 50%;
    left: 5px;
	margin: -3px 0 0 0;
    display: block;
    width: 5px;
    height: 5px;
    background: #F45C5C;
    border-radius: 50%;
}
.fixed-inquiry-form .in-mid .control-label.required:after{
    display: none;
}
.fixed-inquiry-form .in-mid .form-box{
    padding: 0;
	line-height: 1;
    background: transparent;
}
.fixed-inquiry-form .in-mid .form-group{
	padding: 0;
	margin-bottom: 20px;
	line-height: 1;
	border: 0;
}
.fixed-inquiry-form .in-mid .form-group .input-box{
	padding: 0;
	border: 0;
}
.fixed-inquiry-form .in-mid .form-group > div{
	padding-left: 0;
	margin-left: 0;
	width: 100%;
}
.fixed-inquiry-form .in-send-btn{
	width: 100%;
	height: 40px;
	font-size: 15px;
    color: #FFF;
    background: linear-gradient(to right, #db3a3a, #F45C5C, #db3a3a, #F45C5C, #db3a3a);
	background-size: 400%;
	border: 0;
	border-radius: 7px;
	animation: grahover 4s linear infinite;
	transition: all .3s ease;
}
.fixed-inquiry-form .in-send-btn:hover{
	opacity: 0.8;
}
@keyframes grahover{
    0%{
		background-position: 0% 50%;
	}
    50%{
		background-position: 100% 50%;
	}
    100%{
		background-position: 0% 50%;
	}
} 
.fixed-inquiry-form .in-close-btn{
	position: absolute;
	right: 6px;
	top: 4px;
	width: 30px;
	height: 30px;
	font-size: 0;
	font-weight: bold;
	background: transparent;
	border: 0;
	border-radius: 50%;
}
.fixed-inquiry-form .in-close-btn:before{
	content: "";
	position: absolute;
	right: 7px;
	top: 13px;
	width: 16px;
	height: 2px;
	background: #FFF;
	transform: rotate(45deg);
}
.fixed-inquiry-form .in-close-btn:after{
	content: "";
	position: absolute;
	right: 7px;
	top: 13px;
	width: 16px;
	height: 2px;
	background: #FFF;
	transform: rotate(-45deg);
}
.fixed-tel-btn{
	position: fixed;
	display: none;
}
@media screen and (max-width: 1060px){
	.wrapper{
		margin-top: 60px;
	}
	.add-line-friend-btn{
		right: 12px;
		bottom: 24px;
		padding-left: 0;
		width: 56px;
		height: 56px;
		font-size: 0;
		border-radius: 50%;
	}
	.add-line-friend-btn .line-icon{
		right: 15px;
		top: 16px;
	}
	.fixed-inquiry-btn{
		right: 12px;
		bottom: 88px;
		padding-left: 0;
		width: 56px;
		height: 56px;
		font-size: 0;
		border-radius: 50%;
		z-index: 999;
	}
	.fixed-inquiry-btn .inquiry-icon{
		right: 15px;
		top: 16px;
	}
	.fixed-tel-btn{
		right: 12px;
        bottom: 155px;
		box-sizing: border-box;
		display: block;
		width: 56px;
		height: 56px;
		line-height: 56px;
		font-size: 30px;
		font-weight: 600;
		color: #fff;
		background: linear-gradient(135deg, #C30E22 0%, #e74c3c 100%);
		border-radius: 100%;
		box-shadow: 0 4px 14px rgba(195, 14, 34, 0.4), 0 1px 3px rgba(195, 14, 34, 0.25),inset 0 1px 0 rgba(255, 255, 255, 0.25);
		animation: phone-shake 1.4s infinite;
		transition: all .3s ease;
		z-index: 900;
	}
	.fixed-tel-btn:hover{
        opacity: 0.7;
	}
	.fixed-tel-btn i{
		position: relative;
		display: block;
		text-align: center;
		width: 56px;
		height: 56px;
		line-height: 56px;
	}
	.fixed-tel-btn i.ic-phone::before{
		content: "";
		position: absolute;
        top: 50%;
        left: 50%;
		transform: translate(-50%, -50%);
        width: 24px;
        height: 25px;
		background: url("../../../images/index/tel_icon.svg") no-repeat;
	}
	.fixed-tel-btn .ring{
        position: absolute;
        border: 2px solid rgba(195, 14, 34, 0.75);
        border-radius: 50%;
        inset: -8px;
        opacity: 0;
        animation: phone-ring 1.6s infinite;
    }
    .fixed-tel-btn .ring-2{
        animation-delay: 0.45s;
    }
	@keyframes phone-shake{
        0%, 100% {
            transform: rotate(0deg);
        }
        8% {
            transform: rotate(12deg);
        }
        16% {
            transform: rotate(-12deg);
        }
        24% {
            transform: rotate(10deg);
        }
        32% {
            transform: rotate(-10deg);
        }
        40% {
            transform: rotate(6deg);
        }
        48% {
            transform: rotate(0deg);
        }
    }
    @keyframes phone-ring{
        0% {
            transform: scale(0.85);
            opacity: 0.75;
        }
        70% {
            transform: scale(1.45);
            opacity: 0;
        }
        100% {
            transform: scale(1.45);
            opacity: 0;
        }
    }
}

/* ===== _icon.css ===== */
.icon {
    display: inline-block;
    text-align: left;
    text-indent: -9999px;
    vertical-align: text-bottom;
    background-repeat: no-repeat;
}
.site-footer .icon {
    background-image: url("../../images/contact_icon.png");
    width: 30px;
    height: 30px;
    vertical-align: middle;
    margin: -3px 0 0;
}
.site-footer .icon.phone {
    background-position: 0 0;
}
.site-footer .icon.mail {
    background-position: 0 -30px;
}
.site-footer .icon.mail::before {
    
}
.site-footer .icon.fax {
    background-position: 0 -60px;
}


/* ===== _btn.css ===== */
.btn, .ibtn {/* Structure */
    display: inline-block;zoom:1;
    line-height: normal;
    white-space: nowrap;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    border: none;
    padding: 0;
    background: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
/* Firefox: Get rid of the inner focus border */
.btn::-moz-focus-inner,
.ibtn::-moz-focus-inner {
    padding: 0;
    border: 0;
}
.btn:focus, .ibtn:focus {
    outline: none;
}

.ibtn {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-align: left;
    padding: 0 !important;
    -webkit-transition: none;
       -moz-transition: none;
        -ms-transition: none;
         -o-transition: none;
            transition: none;
}
.ibtn:hover {
    background-position: 0 100%;
}

/*.share .btn {
    width:  30px;
    height: 30px;
    line-height: 30px;
    color: #fff;
    font-size: 15px;
    -webkit-border-radius: 4px;
            border-radius: 4px;
}
.share .btn:hover {
    background: #C78B67;
}*/
.share li{
    margin-right: 13px;
}
.ibtn.facebook{
    width: 30px;
    height: 29px;
    background: url("../../images/share.png")left top no-repeat;
    display: inline-block;
}
.ibtn.facebook:hover{
    background: url("../../images/share.png")left bottom no-repeat;
}
.ibtn.google-plus{
    width: 30px;
    height: 29px;
    background: url("../../images/share.png")-30px top no-repeat;
    display: inline-block;
}
.ibtn.google-plus:hover{
    background: url("../../images/share.png")-30px bottom no-repeat;
}
.ibtn.twitter{
    width: 30px;
    height: 29px;
    background: url("../../images/share.png")-60px top no-repeat;
    display: inline-block;
}
.ibtn.twitter:hover{
    background: url("../../images/share.png")-60px bottom no-repeat;
}
.ibtn.fb-fans-page {
    background: url("../../images/fb_page.png");
    width: 147px;
    height: 48px;
}
.ibtn.fb-fans-page:hover {
    opacity: 0.7;
}
.btn.back {
    color: #fff;
    background: #D6B19E;
    border: 1px solid #fff;
    outline: 1px solid #DDC0B0;
    width: 60px;
    height: 24px;
    line-height: 24px;
    float: left;
}
.btn.back:hover {
    background: #BC8161;
    outline-color: #BC8161;
}

.btn.normal {
    background: #8E483E;
    color: #EBD8D4;
    font-size: 18px;
    font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
    width: 100%;
    max-width: 280px;
    line-height: 30px;
    margin-bottom: 10px;
}
.btn.normal:hover {
    color: #fff;
    -webkit-box-shadow:inset 0 2px 6px 0 rgba(0,0,0,0.25);
            box-shadow:inset 0 2px 6px 0 rgba(0,0,0,0.25);
}
.btn.arrowL,
.btn.arrowR {
    line-height: 40px;
    color: #000;
    font-size: 15px;
}
.btn.arrowL:hover,
.btn.arrowR:hover {
    color: #777;
}
.btn.arrowL {
    color:#666;
    background: url("../../images/arrowL.png") no-repeat 0 100%,#fff;
    padding: 0 30px 0 75px;
	border: 1px #DBDBDB solid;
}
.btn.arrowR {
    color: #666;
    background: url("../../images/arrowR.png") no-repeat 100% 100%,#fff;
    padding: 0 45px 0 10px;
	border: 1px #DBDBDB solid;
}
.btn.arrowL:hover {
    background-position: 0 100%;
	border: 1px #666 solid;
}
.btn.arrowR:hover {
    background-position: 100% 100%;
	border: 1px #666 solid;
}
.btn.arrowR2 {
    line-height: 40px;
    color: #666;
    font-size: 15px;
    background: #222222;
    background: url("../../images/arrowR2.png") no-repeat 93% center,#ffd390;
    border: 1px #DBDBDB solid;
    padding: 5px 110px 5px 110px;
}

.btn.arrowR2:hover {
    background: url("../../images/arrowR2.png") no-repeat 93% center,#666;
    -webkit-transition: all 200ms linear;
   -moz-transition: all 200ms linear;
     -o-transition: all 200ms linear;
	transition: all 200ms linear;
	color: #fff;
}
@media screen and (max-width: 360px) {
.btn.arrowR {
    width: 100%;
    padding: 5px 0 5px 0;
    text-align: center;
}
}

/* ===== _site_header.css ===== */
.site-header{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
	background:#FFF;
    border-bottom: 1px solid #DDDDDD;
    z-index: 500;
}
.site-title {
    float: left;
    padding: 17px 0;
}
.site-title .logo{
    background: url("../../images/logo.svg") no-repeat 50% 50%;
    background-size: contain;
    width: 220px;
    height: 66px;
    -webkit-transition: opacity .3s ease;
    -moz-transition: opacity .3s ease;
    -ms-transition: opacity .3s ease;
    -o-transition: opacity .3s ease;
    transition: opacity .3s ease;
}
.site-title .logo:hover{
    opacity: .7;
}
.site-nav .share{
	display: none;
}
.site-nav .share li{
	margin: 0 6px;
}
@media screen and (max-width: 1060px) {
    .site-title{
        padding: 9.5px 0;
    }
    .site-title .logo{
        width: 133px;
        height: 40px;
    }
	.site-nav .share{
		display: block;
		text-align: center;
		margin-top: 15px;
	}
}

/* ===== _site_nav.css ===== */
.site-nav{
	float: right;
	padding-top: 35px;
}
.menu{
	text-align: right;
	margin: 0 -20px;
	font-size: 18px;
	letter-spacing: 0;
}
.menu li{
	position: relative;
}
.menu li a{
	display: block;
}
.menu > li{
    padding: 0 20px;
    margin: 0;
    padding-bottom: 18.42px;
}
.menu > li > a{
	padding: 8px 0 5px;
	color: #333;
	border-bottom: 3px solid transparent;
}
.menu > li > a .green, .menu > li > a .orange{
	font-size: 18px;
	font-weight: bolder;
}
.menu > li > a .green{
	color: #8CC01F;
}
.menu > li > a .orange{
	color: #F29600;
}
.menu > li > a:hover, .menu > li.active > a{
    color: #26629D;
}
.menu > li > ul{
	display: none;
	position: absolute;
    top: 100%;
    left: 50%;
    margin: 0 0 0 -110px;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 5px;
	width: 220px;
    background: #26629D;
    box-shadow: 0 3px 5px rgba(0 0 0 / 30%);
}
.menu > li > ul:before{
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -14px;
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 14px 0 14px;
    border-color: #FFF transparent transparent transparent;
}
.menu > li > ul li+li{
    border-top: 1px solid rgba(255,255,255,0.5);
}
.menu > li > ul a{
	display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    white-space: inherit;
    padding: 3px 10px;
    height: 32px;
    font-size: 16px;
    line-height: 2;
    color: #FFF;
    overflow: hidden;
}
.menu > li > ul > li.active > a{
    color: #26629D;
}
/* 「文章分享」的下拉選單（include_header.php 的 ul.article-menu）

   上面那組通用規則是固定寬 220px + -webkit-line-clamp:1 + height:32px，
   文章標題只要長一點就會被截成「做好這七個重點，才敢說…」。
   文章標題長度本來就參差不齊，這一組改成寬一點、允許換行、高度自動，
   標題一律完整顯示。只掛在 .article-menu 上，方案說明那組維持原樣。 */
.menu > li > ul.article-menu{
    width: 320px;
    margin-left: -160px;
}
.menu > li > ul.article-menu a{
    display: block;
    height: auto;
    padding: 9px 14px;
    line-height: 1.5;
    white-space: normal;
    word-break: break-word;
    -webkit-line-clamp: none;
    overflow: visible;
}
.menu li ul li{
    position: relative;
}
.menu li ul li:before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 100%;
    background: #FFF;
    z-index: 0;
}
.menu li ul li:hover:before{
    top: 0;
    bottom: 0;
    -webkit-transition: all 150ms linear;
    -moz-transition: all 150ms linear;
    -o-transition: all 150ms linear;
	transition: all 150ms linear;
}
.menu li ul a:hover{
    color: #26629D;
    -webkit-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
	transition: all 200ms linear;
}
.menu ul ul {
	display: none;
    position: absolute;
    top: 0;
    left: calc(100% - 2px);
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 5px;
    margin: 0 0 0 2px;
    width: 100%;
	background: #26629D;
    box-shadow: 0 3px 5px rgb(0 0 0 / 30%);
}
.toggle-menu{
	display: none;
}
.menu > li:nth-child(9), .menu > li:nth-child(10){
	display: none;
}
#dropdown1 ul{
	float: right;
	padding-right: 110px;
}
#dropdown2 ul{
	float: right;
}
.dropdown-menu{
	display: none;
	background: #26629D;
}
.dropdown-menu .container{
	max-width: 1440px;
}
.dropdown-menu li{
	float: left;
	display: inline-block;
	padding: 5px 2px;
}
.dropdown-menu li a{
	display: inline-block;
	padding: 0 15px;
	font-size: 17px;
	color: #FFF;
	border: 1px solid rgba(255 255 255 / 40%);
	background: url("../../images/dropdown-menu.jpg")bottom repeat-x;
}
.dropdown-menu li a:hover{
	background: url("../../images/dropdown-menu_.jpg")top repeat-x;
	-webkit-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
	-o-transition: all 200ms linear;
	transition: all 200ms linear;
}
.dropdown-menu ul{
	position: relative;
}
#dropdown1 .container, #dropdown2 .container{
	position: relative;
}
#dropdown1 .transparent, #dropdown2 .transparent{
	position: absolute;
	left: 52%;
	top: -10px;
	margin-left: 264px;
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-color: #C30E22 transparent transparent transparent;
	border-width: 10px 10px 0 10px;
	transform: rotate(-180deg);
}
#dropdown2 .transparent {
	margin-left: 480px;
}
#dropdown1 .transparent-none, #dropdown2 .transparent-none{
	position: absolute;
	left: 50%;
	top: -10px;
	margin-left: 480px;
	display: block;
	width: 30px;
	height: 10px;
	background: #FFF;
}
#dropdown2 .transparent-none{
	margin-left: 264px;
}
.not-show-1{
    display: none!important;
}
.not-show-2{
    display: none!important;
}
.all_case_number{
    position: relative;
    top: -2px;
    padding: 2px 6px;
    margin-left: 3px;
    font-size: 14px;
    color: #FFF;
	background: #ff5b8d;
    border-radius: 5px;
}
.menu > li.menu-btn-2 > a{
    padding: 11.5px 40px;
    margin: 0;
    line-height: 1;
    color: #FFF;
    background: linear-gradient(to right, #26629D, #2CB872);
    border: 0;
    border-radius: 40px;
	transition: all .3s ease;
    overflow: hidden;
    z-index: 1; 
}
.menu > li.menu-btn-2 > a:hover{
    color: #fff;
}
.menu > li.menu-btn-2 > a:before{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #26629D, #2CB872, #26629D, #2CB872, #26629D, #2CB872);
    background-size: 400%;
    -webkit-animation: grahover 4s linear infinite;
    animation: grahover 4s linear infinite;
    z-index: -1;
    opacity: 0;
    transition: all .3s ease;
}
.menu > li.menu-btn-2 > a:hover:before{
    opacity: 1;
}
@media screen and (max-width: 1500px) {
	.menu > li {
		padding: 0 10px;
	}
}
@media screen and (max-width: 1018px) {
	.site-nav{
		float: right;
		padding-top: 35px;
	}
}
@media screen and (max-width: 1060px) {
	body.menu-open{
		overflow: hidden;
	}
	.toggle-menu{
		position: absolute;
		right: 20px;
		top: 10px;
		display: block;
		width: 40px;
		height: 40px;
        background-image: url("../../images/menu_toggle.png");
	}
	.toggle-menu:hover{
		background-position: 0 100%;
	}
	.menu-open .toggle-menu{
		background-position: 100% 0;
	}
	.menu-open .toggle-menu:hover{
		background-position: 100% 100%;
	}
	.site-nav{
		float: none;
        display: none;
        position: fixed;
        top: 61px;
		left: 0;
		right: 0;
		bottom: 0;
        margin: 0;
		padding: 0;
        max-width: none;
		background: rgba(255,255,255,1);
		border: 0;
		overflow: auto;
        z-index: 910;
	}
	.menu{
		float: none;
		display: block;
		text-align: center;
		margin: 0;
		padding: 0;
		clear: both;
	}
	.menu li{
		float: none;
		display: block;
		padding: 0;
		width: auto;
	}
	.menu > li:nth-child(9), .menu > li:nth-child(10) {
		display: block;
	}
	.menu li a{
		position: relative;
	}
	.menu > li{
		margin: 0;
		border-bottom: 1px solid #ddd;
	}
	.menu > li > a{
		margin: 0;
		padding: 12px 10px 8px;
	}
	.menu > li.menu-btn-2 > a{
		display: inline-block;
        margin-top: 10px;
	}
	.menu li > .toggle-submenu{
		content: "";
		position: absolute;
		top: 0;
		right: 5px;
        display: block;
		width: 45px;
		height: 45px;
        background: url("../../images/menu_accordion.png") no-repeat;
		cursor: pointer;
		z-index: 10;
	}
	.menu li:hover > .toggle-submenu{
		background-position: 0 100%;
	}
	.menu li.active > .toggle-submenu{
		background-position: 100% 0;
	}
	.menu li.active:hover > .toggle-submenu{
		background-position: 100% 100%;
	}
	.menu > li > ul:before{
		display: none;
	}
	.menu > li > ul{
		padding-bottom: 0;
	}
	.menu > li > ul li+li{
		border-top: 1px solid rgba(255, 255, 255, 1);
	}
	.menu > li > ul a{
		font-size: 16px;
		color: #000;
	}
	.menu > li ul{
		position: static;
		margin-left: 0 !important;
		margin-top: 0;
		padding-top: 0;
		width: auto;
		background: #F0F0F0;
		border: 0;
		-webkit-box-shadow: none;
		box-shadow: none;
	}
	/* 手機版選單是攤開的清單，不需要桌機那組固定寬度。
	   .article-menu 的選擇器權重比 .menu > li ul 高，不覆蓋回來的話
	   手機上會硬生生變成 320px 寬。 */
	.menu > li > ul.article-menu{
		width: auto;
		margin-left: 0 !important;
	}
	.menu ul li+li{
		background: none;
	}
	.menu ul ul{
		background: #fff;
	}
	.menu ul ul li{
		background: none;
		border: 0;
	}
	.menu ul li a{
		text-align: left;
		padding: 10px 20px;
		border-width: 1px 0 0;
	}
	.menu ul li a:hover, .menu ul li.active > a{
		color: #FF722E;
		background: #F0F0F0;
	}
	.menu ul ul li a {
		padding-left: 30px;
	}
	.menu ul ul li a:hover, .menu ul ul li.active > a{
		background: #fff;
	}
}
@media screen and (max-width: 1000px){
	.menu ul li a {
		text-align: center;
	}
}

/* ===== _site_footer.css ===== */
.footer-top{
    padding: 50px 0 30px;
    font-size: 16px;
    color: #666666;
    border-top: 1px solid #e3e3e3;;
}
.footer-top a{
    color: #666666;
    transition: all 0.3s ease;
}
.footer-top a:hover{
    color: #26629D;
}
.footer-top .row{
    margin: 0 -36px;
}
.footer-top .col{
    float: left;
    padding: 0 36px;
    margin-right: -1px;
    min-height: 220px;
    border: 1px solid #aaa;
    border-width: 0 1px;
}
.footer-top .col:nth-last-child(1){
    border: 0 solid #aaa;
}
.footer-top .col1{
    width: 25%;
    border-left-width: 0;
}
.footer-top .col2{
    width: 37.5%;
}
.footer-top .col3{
    width: 37.5%;
}
.footer-top .col4{
    width: 28%;
    border-right-width: 0;
}
.footer-top .title{
    color: #222222;
    font-size: 18px;
    margin-bottom: 5px;
    font-weight: bold;
}
.footer-top .col3 .title{
    position: relative;
    color: #26629D;
}
.footer-top .col3 .title:before{
    content: "";
    position: absolute;
    top: -8px;
    left: 117px;
    width: 39px;
    height: 34px;
    transition: all 0.3s ease;
    background: url("../../images/hi-icon.svg");
    animation: jump .8s infinite; 
}
@keyframes jump{
    0%{
        top: -8px;
    }
    50%{
        top: -3px; 
    }
    100%{
        top: -8px;
    }
}
.footer-top a.contact{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 14px;
    width: 136px;
    height: 38px;
    line-height: 38px;
    color: #FFF;
    background: linear-gradient(to right, #3D83B6, #2CB872, #3D83B6, #2CB872, #3D83B6, #2CB872);
    background-size: 400%;
    border-radius: 38px;
    transition: all 0.3s ease;
    overflow: hidden;
    z-index: 1;
}
.footer-top a.contact span {
    display: block;
    text-align: center;
    margin: -4px 5px 0;
    width: 10px;
    height: 10px;
    background-color: #fff;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    transition: transform 0.3s;
    opacity: 0.5;
}
.footer-top a.contact:hover {
    -webkit-animation: grahover 4s linear infinite;
    animation: grahover 4s linear infinite;
}
.footer-top .logo{
    margin-bottom: 23px;
}
.footer-top .logo li{
    margin-bottom: 10px;
}
.footer-top .map-box{
    margin-top: 40px;
    height: 150px;
    border: 1px solid #aaa;
}
.site-map{
    font-size: 13px;
}
.site-map ul{
    display: inline-block;
    vertical-align: top;
    width: 48%;
}
.site-map ul li{
    margin: 8px 0;
}
.site-map ul li a{
    position: relative;
    display: inline-block;
    padding: 3px 6px 3px 15px;
}
.site-map ul li a:before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    display: inline-block;
    width: 5px;
    height: 5px;
    background: #2CB872;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.qrcode{
    margin-top: 40px;
}
.site-info{
    margin-left: 35px;
    line-height: 1.8;
    letter-spacing: 0.5px;
}
.footer-bottom{
    text-align: center;
    padding: 10px 0;
    font-size: 12px;
    color: #4a4d54;
    background: #dedede;
}
.footer-bottom a{
    color: #26629D;
}
.footer-bottom a:hover{
    text-decoration: underline;
}
.qr-box{
    display: flex;
    margin-left: 35px;
    margin-top: 20px;
}
.qr-box .qr-col{
    margin-right: 8px;
    width: 118px;
}
.qr-box a{
    transition: all .3s ease;
}
.qr-box a:hover{
    opacity: 0.7;
}
.qr-box .qr-col .qr-title{
    width: 118px;
    height: 118px;
    background: #06C052;
    color: #FFF;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}
.qr-box .qr-col .qr-title span{
    letter-spacing: 6px;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}
@media screen and (max-width: 1370px) {
    .footer-top .row{
        margin: 0 -18px;
    }
    .footer-top .col{
        padding: 0 18px;
    }
}
@media screen and (max-width: 1200px) {
    .footer-top .logo{
        float: left;
        margin-bottom: 0;
    }
    .footer-top .share{
        float: right;
        margin-top: 15px;
    }
    .logo li+li{
        height: 50px;
        width: auto !important;
    }
    .footer-top{
        padding: 0;
    }
    .footer-top .col{
        min-height: 0;
        padding-top: 10px;
        border-bottom: none;
    }
    .footer-top .col1:after{
        content: "";
        display: block;
        padding-bottom: 5px;
        border-bottom: 1px solid #DDD;
        clear: both;
    }
    .footer-top .col1,
    .footer-top .col4{
        width: auto;
        float: none;
        clear: both;
    }
    .footer-top .col4{
        padding-top: 0;
        border-top: 1px solid #DDD;
    }
    .footer-top .col2,
    .footer-top .col3{
        width: 50%;
        padding-top: 20px;
        padding-bottom: 30px;
    }
    .footer-top .map-box {
        margin: 0 100px 20px 0;
        height: 100px;
    }
    .qrcode{
        position: absolute;
        top: 10px;
        right: 15px;
    }
    .site-map{
        text-align: center;
        padding-top: 30px;
    }
    .site-map ul{
        display: inline;
    }
    .site-map ul li{
        display: inline-block;
    }
    .footer-top .logo li{
        float: left;
        margin-right: 30px;
    }
}
@media screen and (max-width: 1060px) {
    .footer-top .col1,
    .footer-top .col4{
        display: none;
    }
}
@media screen and (max-width: 767px) {
    .footer-bottom{
        padding-bottom: 35px;
    }
}
@media screen and (max-width: 600px) {
    .footer-top .container{
        padding-bottom: 0;
        text-align: center;
    }
    .footer-top .logo{
        float: none;
        margin-bottom: 0;
    }
    .footer-top .logo li{
        float: none;
        margin-right: 0;
    }
    .footer-top .share{
        float: none;
        margin-top: 20px;
        margin-bottom: 10px;
    }
    .footer-top .col{
        float: none;
        width: auto;
        padding-bottom: 20px;
        clear: both;
    }
    .footer-top .col3 .title:before{
        left: calc(50% + 64px);
    }
    .footer-top .map-box{
        margin: 0;
    }
    .qr-box{
        justify-content: center;
        margin-left: 0;
    }
    .qrcode{
        top: 100%;
        right: 50%;
        margin: -80px -40px 0 0;
    }
    .site-info{
        margin-left: 0;
    }
    .site-map{
        padding-top: 0;
    }
    .footer-top a.contact{
        margin: 5px auto 0;
    }
}


/* ===== _site_main.css ===== */
.main-top {
/*    background: url("../../images/banner_itemL.jpg") no-repeat, url("../../images/banner_itemR.jpg") no-repeat 100% 0;*/
    background: url(https://newscanpic.tw/d/banner.jpg) no-repeat 50% 0;
    background-size: cover;
    height: 200px;
    text-align: center;
}
.main-title {
    font-family: 'Nova Flat','Text Me One', "微軟正黑體", "Microsoft JhengHei", "微软雅黑", "メイリオ", "맑은 고딕", sans-serif;
    font-size: 52px;
    color: #000;
    padding: 50px 0 0;
    text-align: center;
    padding-bottom:30px;
    border-bottom: 1px solid #000;
}
.main-title span{
    display: block;
    font-size: 22px;
    color: #333333;
    margin-bottom: 20px;
}
.main-title:after {
    content: "";
    display: block;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 6px 0 6px;
    border-color: #000000 transparent transparent transparent;
}
.content {
    max-width: 1440px;
    margin: 0 auto;
    min-height: 360px;
    margin: 50px 0 50px;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

.btn-box {
    clear: both;
    padding-top: 50px;
    position: relative;
    text-align: center;
}
.corner {
    position: relative;
   /* overflow: hidden;*/
}
.corner:before {
    content: "";
    display: block;
    border: 1px solid #ccc;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    pointer-events: none;
}
.corner:hover:before,
a:hover .corner:before {
    border-color: #454545;
}
.corner .cor {
    display: block;
    position: absolute;
    border: solid #454545;
    width: 10px;
    height: 10px;
    z-index: 2;
    pointer-events: none;
}
.corner .cor.lt { border-width: 1px 0px 0px 1px; top:    0;  left: 0; }
.corner .cor.rt { border-width: 1px 1px 0px 0px; top:    0; right: 0; }
.corner .cor.lb { border-width: 0px 0px 1px 1px; bottom: 0;  left: 0; }
.corner .cor.rb { border-width: 0px 1px 1px 0px; bottom: 0; right: 0; }

/*
@media screen and (max-width: 1440px) {
    .main-top {
        background-position: -100px 0, 120% 0;
    }
}
@media screen and (max-width: 1140px) {
    .main-top {
        background-position: -200px 0, 120% 0;
    }
}
@media screen and (max-width: 970px) {
    .main-top {
        background-position: -300px 0, 150% 0;
    }
}
*/
@media screen and (max-width: 767px) {
    .main-content {
        padding-top: 30px;
}
    .main-top {
        background: none;
        height: 200px;
        display: none;
    }
    .main-title {
        padding-top: 0px !important;
    }
.main-title {
    font-family: 'Nova Flat','Text Me One', "微軟正黑體", "Microsoft JhengHei", "微软雅黑", "メイリオ", "맑은 고딕", sans-serif;
    font-size: 35px;
    color: #000;
    padding: 130px 0 0;
    text-align: center;
    padding-bottom:30px;
    border-bottom: 1px solid #000;
}
.main-title span{
    display: block;
    font-size: 16px;
    color: #333333;
    margin-bottom: 20px;
}
    .content {
    max-width: 1440px;
    margin: 0 auto;
    min-height: 360px;
    margin: 30px 0 50px;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
}

/* ===== _banner.css ===== */
.banner .item {
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-size: cover;
    height: 400px;
}
/*
.banner .slick-prev,
.banner .slick-next {
    text-align: left;
    white-space: normal;
    text-indent: -99999px;
    overflow: hidden;
    border: 0;
    background: url("../../images/index/banner_arrow.png") no-repeat;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    margin-top: -20px;
    z-index: 20;
}
.banner .slick-prev { background-position:    0 0; left: -55px; }
.banner .slick-next { background-position: 100% 0; right: -55px; }
.banner .slick-prev:hover { background-position:    0 100%; }
.banner .slick-next:hover { background-position: 100% 100%; }

.banner .slick-dots {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    text-align: center;
    padding-top: 68px;
}
.banner .slick-dots li {
    display: inline-block;
    padding: 0 5px;
}
.banner .slick-dots li button {
    text-align: left;
    white-space: normal;
    text-indent: -99999px;
    overflow: hidden;
    border: 0;
    background: #E0D9DA;
    width: 40px;
    height: 5px;
}
.banner .slick-dots li.slick-active button {
    background: #E0AC72;
}
*/


@media screen and (max-width: 1280px) {
    .banner .item {
        height: auto;
        padding-top: 26%;
    }
}
@media screen and (max-width: 767px) {
    .banner .container {
        padding: 0;
    }
}


/* ===== _editor_style.css ===== */
.editor img {
    max-width: 100%;
    height: auto !important;
}

.editor:after {
    content: '';
    display: block;
    clear: both;
}

table {
    border-collapse: collapse !important;
}/*************************** about ***********************************/

.about-page {
    max-width: 1130px;
    margin: 0 auto;
}

.about-page .col {
    max-width: 530px;
}

.about-page .col2 {
    float: right;
}

.about-page .page3 {
    text-align: center;
}

.about-page .title {
    font-size: 20px;
    color: #212121;
    margin: 18px 0 10px;
    text-align: center;
    line-height: 30px;
}

@media screen and (max-width: 1080px) {
    .about-page .col {
        max-width: 100%;
        width: 100%;
        float: none;
    }
}

@media screen and (max-width: 767px) {
    .about-page .pic-group .col {
        float: none;
        width: auto;
    }
}/*************************** about ***********************************/


/*************************** price ***********************************/

.price-page {
    max-width: 1140px;
    margin: 0 auto;
}/*.price-page .title,
.service-page .title{
    color: #1F1F1F;
    font-size: 24px;
    text-align: center;
    margin-bottom: 30px;
}*/

.price-page .title,
.service-page .title {
    width: 100%;
    font-size: 28px;
    color: #202020;
    text-align: center;
    margin-bottom: 30px;
}

.price-page .info,
.service-page .info {
    font-size: 14px;
    color: #797979;
    margin-top: 10px;
}

.price-page .info span {
    color: #C30C20;
}

.price-page .page1 {
    width: 1042px;
    margin: 0 auto;
}

.service-page .page2 .features_big {
    margin-bottom: 70px;
    padding: 0 15px;
}

.features_big .pic .corner {
    padding: 10px;
}

.plan_list {
    margin: 0 auto;
    padding-bottom: 20px;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.plan_animation {
    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;
    -webkit-animation-name: slidein;
    -moz-animation-name: slidein;
}

@-webkit-keyframes slidein {
    from {
        padding-left: 100%;
        width: 300%;
        opacity: 0;
    }

    to {
        padding-left: 0%;
        width: 100%;
    }
}

@-moz-keyframes slidein {
    from {
        padding-left: 100%;
        width: 300%;
    }

    to {
        padding-left: 0%;
        width: 100%;
    }
}


.plan_list:after {
    content: '';
    display: block;
    clear: both;
}

.plan_list li {
    list-style: none;
    width: 25%;
    float: left;
    padding: 12px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /*  -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
        border-radius: 5px;*/
}
.plan_list a:hover{
    color:#000;
}
.plan_list .top {
    border: 1px solid #DDDDDD;
}

.plan_list .top:after,
.people_list:after,
.price-page .page3:after,
.features_list:after,
.process_list:after {
    content: '';
    display: block;
    clear: both;
}

.plan_list .price:before {
    content: 'NT$';
    font-size: 21px;
    margin-right: 5px;
}

.plan_list .no {
    width: 100%;
    height: 70px;
    background: # #E0E0E0;
    color: #474747;
    font-size: 30px;
    font-weight: bolder;
    padding: 10px 0px 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    text-align: center;
}

.plan_list .price {
    width: 100%;
    height: 160px;
    background: #F29600;
    color: #FFF;
    font-size: 30px;
    font-weight: bolder;
    padding: 60px 0px 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    line-height: 32px !important;
    text-align: center;
}

.plan_list li:nth-child(2) .price {
    background: #8DC21F;
}

.plan_list li:nth-child(3) .price {
    background: #00A0E8;
}

.plan_list li:nth-child(4) .price {
    background: #C30E22;
}

.plan_list .price span {
    font-size: 13px;
    color: #000000;
    float: right;
    line-height: 15px !important;
}

.plan_list .plan {
    width: 100%;
    color: #444444;
    float: right;
    text-align: center;
    font-size: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 30px 0px 30px 0px;
    position: relative;
}

.plan_list .plan:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: #F29600 transparent transparent transparent;
    border-width: 6px 6px 0 6px;
    transform: rotate(-90deg);
    position: absolute;
    left: -3px;
    top: 45%;
}

.plan_list li:nth-child(2) .plan:before {
    border-color: #8DC21F transparent transparent transparent;
}

.plan_list li:nth-child(3) .plan:before {
    border-color: #00A0E8 transparent transparent transparent;
}

.plan_list li:nth-child(4) .plan:before {
    border-color: #C30E22 transparent transparent transparent;
}

.plan_list .bottom {
    font-size: 14px;
    color: #797979;
    text-align: center;
    padding: 10px 0;
    background: url("../../images/price/price_list_bg.jpg")top repeat-x, #E6E6E6;
}

.plan_list .bottom b {
    font-size: 21px;
    color: #1F1F1F;
    display: block;
    font-weight: normal;
}


.price-page .page2 .title {
    width: 100%;
    font-size: 28px;
    color: #202020;
    background: url("../../images/about/list.jpg")center top no-repeat;
    padding-top: 108px;
    text-align: center;
    margin: 0px 0 40px;
}

.people_list {
    padding-bottom: 70px;
    border-bottom: 1px solid #CFCFCF;
    padding-left: 0 !important;
}

.people_list li {
    width: calc(100% / 6);
    float: left;
    padding: 0 15px;
    list-style: none;
    text-align: center;
    margin-bottom: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.people_list .pic {
    width: 160px;
    height: 160px;
    margin: 0 auto;
    border: 1px solid #DDDDDD;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
}

.people_list .pic img {
    max-width: 100%;
    max-height: 100%;
    height: auto !important;
}

.people_list .name {
    font-size: 15px;
    color: #797979;
    margin: 8px 0;
}

.price-page .page3 {
    width: 100%;
    margin: 0 auto;
}

.price-page .page3 .title {
    margin: 60px 0 80px;
}

.plan_box {
    width: 100%;
    overflow: auto;
}

.price-page .page3 td {
    text-align: center;
    width: 25%;
    padding: 5px 15px;
    font-size: 14px;
    color: #000;
}

.td_top {
    border-bottom: 1px solid #777777;
    border-right: 1px solid #777777;
}

.td_right {
    border-right: 1px solid #777777;
}

.td_bottom {
    border-bottom: 1px solid #777777;
}

.left {
    text-align: left !important;
}

.price-page .page3 td:nth-child(2) {
    background: #F5FEDA;
}

.price-page .page3 .price:nth-child(2) {
    color: #FFF;
    font-weight: bold;
    background: #C30E22 !important;
}

.price-page .page3 .name {
    font-size: 18px;
    color: #212121;
    padding: 15px 15px;
}

.price-page .page3 .price {
    font-size: 16px;
    color: #CCCCCC;
    background: #444444 !important;
    padding: 10px 15px;
    border-top: 2px solid #000;
}

.price-page .page3 .ok {
    width: 17px;
    height: 22px;
    display: inline-block;
    background: url("../../images/price/icon_ok.png")bottom no-repeat;
}

.price-page .page3 .ex {
    text-align: left;
    padding: 10px 15px;
    border-top: 2px solid #000;
    vertical-align: top;
}

.price-page .page3 .contact {
    border: 1px solid #8DC21F;
    color: #8DC21F;
    font-size: 16px;
    text-align: center;
    padding: 15px 0;
    display: block;
    max-width: 288px;
    margin: 50px auto 50px;
}

.price-page .page3 .contact:hover {
    color: #FFF;
    background: #8DC21F;
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    transition: all 200ms linear;
}


@media screen and (max-width: 1067px) {
    .price-page .page1 {
        max-width: 80%;
    }
    .plan_list li {
        width: 50%;
    }
    .people_list li {
        width: calc(100% / 4);
    }
}

@media screen and (max-width: 767px) {
    .price-page .page1 {
        max-width: 100%;
    }
    .people_list li {
        width: calc(100% / 3);
    }
}

@media screen and (max-width: 570px) {
    .price-page .page1 {
        max-width: 80%;
    }
    .people_list li {
        width: calc(100% / 2);
    }
    .plan_list li {
        width: 100%;
    }
}

@media screen and (max-width: 415px) {
    .people_list li {
        width: calc(100% / 1);
    }
    .price-page .page1 {
        max-width: 80%;
    }
    .plan_list .price {
       /* width: 100%;
        float: none;*/
    }
    .plan_list .plan {
        width: 100%;
        padding: 10px 5px 10px 15px;
    }
    .plan_list .plan:before {
        display: none;
    }
}/*************************** price_rwd ***********************************/

.price_rwd_but a:hover {
    color: #9E4000;
}/*************************** service *********************************/

.service-page .title {
    margin-bottom: 90px;
}

.process {
    max-width: 860px;
    margin: 0 auto;
    background: url("../../images/service/bg.jpg")center bottom no-repeat;
    min-height: 837px;
    margin-bottom: 75px;
    position: relative;
}

.process_list {
    padding: 0 !important;
}

.process_list li {
    width: 20%;
    height: 240px;
    list-style: none;
    float: left;
    padding: 0 5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.process_list li:hover .pic {
    margin-top: -10px;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.process_list .pic {
    max-width: 150px;
    max-height: 150px;
    padding: 5px;
    border: 1px solid #DDDDDD;
    border-radius: 200px;
    box-shadow: 0px 0px 5px rgba(20%, 20%, 40%, 0.2);
    margin: 0 auto;
}

.process_list li:nth-child(1):hover .pic {
    background-color: #FCCC00;
}

.process_list li:nth-child(2):hover .pic {
    background-color: #00A79D;
}

.process_list li:nth-child(3):hover .pic {
    background-color: #F36523;
}

.process_list li:nth-child(4):hover .pic {
    background-color: #00A0E8;
}

.process_list li:nth-child(5):hover .pic {
    background-color: #8EC21F;
}

.process_list li:nth-child(6):hover .pic {
    background-color: #B44ABF;
}

.process_list .pic img {
    max-width: 100%;
    max-height: 100%;
    height: auto !important;
    -webkit-border-radius: 200px;
    border-radius: 200px;
}

.process .big {
    width: 394px;
    height: 221px;
    position: absolute;
    bottom: 123px;
    left: 222px;
}

.process_list li:nth-child(6) {
    display: none;
}

.process_list .name {
    text-align: center;
    font-size: 18px;
    margin: 10px 0;
    color: #202020;
}

.process_list .part {
    display: none;
}

.service-page .page2 {
    max-width: 1140px;
    margin: 0 auto;
    padding-top: 60px;
    border-top: 1px solid #CFCFCF;
}

.features_list {
    padding-left: 0 !important;
    margin: 0;
}

.page2 .features_list.line {
    border-top: 2px dotted #CCC;
    padding-top: 50px;
}

.features_list li {
    width: 25%;
    float: left;
    padding: 0 15px;
    list-style: none;
    margin-bottom: 30px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.features_list .features_col {
    max-width: 248px;
    margin: 0 auto;
    position: relative;
}

.features_col.Pay:after,
.features_col.free:after {
    color: #FFF;
    position: absolute;
    font-size: 14px;
    line-height: 20px;
    display: inline-block;
    left: 0;
    bottom: -20px;
    padding: 0 8px;
}

.features_col.Pay:after {
    content: '加購';
    background: #F26522;
}

.features_col.free:after {
    content: '免費';
    background: #8DC21F;
}

.features_list .pic .corner {
    padding: 10px;
}

.features_list .pic {
    max-width: 248px;
    height: 96px;
    margin: 0 auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.features_list .pic img {
    max-width: 100%;
    max-height: 100%;
    height: auto !important;
}

.features_list .name {
    font-size: 15px;
    color: #646464;
    margin: 8px 0;
}

@media screen and (max-width: 1100px) {
    .features_list li {
        width: 33.33%;
    }
}

@media screen and (max-width: 950px) {
    .process {
        min-height: inherit !important;
    }
    .process_list li {
        width: 33.33%;
    }
    .process_list li:nth-child(6) {
        display: inline-block;
    }
    .process_list .name {
        margin: 0px 0 10px;
    }
    .process_list .part {
        /* 原本是 'Nova Flat'，但站上從來沒有對得上這個家族名的 @font-face，
           一直都在吃瀏覽器預設字型。改寫成明確的系統堆疊。 */
        font-family: Arial, "微軟正黑體", "Microsoft JhengHei", "微软雅黑", "メイリオ", "맑은 고딕", sans-serif;
        text-align: center;
        font-size: 22px;
        font-weight: bold;
        display: block;
        line-height: 20px;
        margin: 10px 0 2px;
    }
    .process_list li:nth-child(1) .part {
        color: #FCCC00;
    }
    .process_list li:nth-child(2) .part {
        color: #00A79D;
    }
    .process_list li:nth-child(3) .part {
        color: #F36523;
    }
    .process_list li:nth-child(4) .part {
        color: #00A0E8;
    }
    .process_list li:nth-child(5) .part {
        color: #8EC21F;
    }
    .process_list li:nth-child(6) .part {
        color: #B44ABF;
    }
    .process .big {
        display: none;
    }
    .process {
        background: none;
        min-height: 837px;
        margin-bottom: 75px;
        position: relative;
    }
}

@media screen and (max-width: 850px) {
    .features_list li {
        width: 50%;
    }
}

@media screen and (max-width: 600px) {
    .process_list li {
        width: 50%;
    }
}

@media screen and (max-width: 580px) {
    .features_list li,
    .process_list li {
        width: 100%;
    }
}/*************************** service *********************************/


/*************************** contact *********************************/

.contact-page .list li {
    padding: 0;
}

.contact-page .pic {
    max-width: 928px;
    margin: 0 auto;
    position: relative;
}

.contact-page .pic .print {
    width: 130px;
    height: 40px;
    display: block;
    background: url("../../images/contact/print.png")no-repeat;
    position: absolute;
    left: 0;
    bottom: 0;
}

.contact-page .from_box:after {
    content: '';
    display: block;
    clear: both;
}

.contact-page .from_box .col {
    max-width: 450px;
    float: left;
}

.contact-page .from_box .col2 {
    margin-left: 40px;
}

.contact-page .from_box .from_title {
    background: #9264A5;
    color: #FFF;
    text-align: center;
    font-size: 16px;
}

.contact-page .from_box li {
    list-style: none;
    text-align: center;
    background: #EEEEEE;
    line-height: 31px;
    font-weight: bold;
    height: 31px;
    overflow: auto;
}

.contact-page .from_box li:nth-child(even) {
    background: #FFF;
}

.contact-page .from_box ul {
    width: 49.5%;
    float: left;
    padding: 0;
    margin: 0;
}

.contact-page .from_box ul+ul {
    border-left: 1px solid #FFF;
}

.contact-page .from_box .add {
    background: #EBE3EE;
    color: #9264A5;
    text-align: center;
    font-size: 16px;
}

@media screen and (max-width: 1100px) {
    .contact-page .from_box .col,
    .contact-page .from_box .col2 {
        width: 100% !important;
        float: left !important;
        margin: 0;
    }
}/*************************** contact *********************************/


/*************************** notice ********************************/

.notice-page {
    max-width: 1100px;
    margin: 0 auto;
}

.notice-page .col {
    max-width: 500px;
}

.notice-page .col.col2 {
    float: right;
}

.notice-page .title {
    background: #8E5FA3;
    color: #FFF;
    font-weight: bold;
    display: inline-block !important;
    padding: 2px 10px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin-bottom: 10px;
}

@media screen and (max-width: 1060px) {
    .notice-page .col {
        width: 100%;
        float: none;
    }
    .notice-page .col.col2 {
        float: none;
    }
}/*************************** notice ********************************/


/*************************** restaurant *****************************/

.restaurant-page .row {
    max-width: 1100px;
    margin: 0 auto;
}

.restaurant-page .col.col1 {
    width: calc(100% - 680px);
}

.restaurant-page .col.col2 {
    width: 680px;
}

@media screen and (max-width: 1110px) {
    .restaurant-page .col.col {
        float: left;
        width: 100%;
        margin-bottom: 10px;
    }
}

@media screen and (max-width: 767px) {
    .restaurant-page .pic-group .col {
        float: none;
        width: auto;
    }
}/*************************** restaurant ******************************/


/*************************** terms ***********************************/

.terms-page {
    max-width: 1000px;
    margin: 0 auto;
	text-align: justify;
	text-justify:inter-ideograph;
}

.terms-page .page-title {
    text-align: center;
    color: #444;
    font-size: 25px;
    margin-bottom: 36px;
    line-height: 1.4;
}

.terms-page .title {
    color: #8CC01F;
    font-size: 16px;
    display: inline-block;
    margin-bottom: 6px;
}/*************************** terms ***********************************/


/*************************** isclaimer ***********************************/

.disclaimer-page {
    max-width: 1000px;
    margin: 0 auto;
}/*------------------------------------------*/

/* 全站不再載入任何自訂字型（2026-08-15）。
   這裡原本 @import 了 Lato / Open Sans / Roboto Condensed。
   順帶一提它本來就沒生效過：CSS 規定 @import 必須排在所有規則之前，
   而這一行寫在整份檔案的中段，瀏覽器一直是直接忽略的 —— 底下那些
   font-family 寫 'Lato' / 'Roboto Condensed' 的地方從來都在吃系統字型。 */

.cart-price-page {
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
    line-height: 1.5;
}

.cart-price-page .list-h:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: ' ';
    clear: both;
    height: 0;
}

.cart-price-page .list-inline,
.cart-price-page .list-inline ul,
.cart-price-page .list-h,
.cart-price-page .list-h ul,
.cart-price-page .list-v,
.cart-price-page .list-v ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.cart-price-page .list-inline>li,
.cart-price-page .list-inline .item {
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
}

.cart-price-page .list-inline>li a,
.cart-price-page .list-inline .item a {
    display: inline-block;
    position: relative;
}

.cart-price-page .list-h>li,
.cart-price-page .list-h .item {
    float: left;
    box-sizing: border-box;
}

.cart-price-page .list-h>li a,
.cart-price-page .list-h .item a,
.cart-price-page .list-v li a {
    display: block;
    position: relative;
}

.cart-title01 {
    margin: 25px 0 15px 0;
    font-size: 26px;
    color: #1F1F1F;
    text-align: center;
}

.cart-title01 small {
    display: block;
    color: #8A8A7B;
    font-size: 15px;
    font-family: 'Open Sans', sans-serif;
}

.cart-title02 {
    position: relative;
    font-size: 25px;
    color: #535353;
    text-align: center;
    background: rgba(234, 237, 242, 0.6);
    border: 1px solid rgba(171, 182, 200, 0.6);
    border-radius: 45px;
    padding: 3px 10px;
    margin: 0 0 45px 0;
}

.cart-title02 b {
    color: #D80000;
    margin: 0 0 0 15px;
    display: inline-block;
    font-size: 23px;
    font-family: 'Lato', sans-serif;
}

.cart-title02 b strong {
    font-size: 34px;
}

.cart-title02 .text_s_01 {
    width: 173px;
    height: 73px !important;
    top: -56px;
    right: 10%;
    position: absolute;
    max-height: none;
}

.cart-price-page .cart-ul01 {
    margin: 0 0 55px 0;
}

.cart-ul01 li {
    background: url("../../images/_2017_rwd_cart/bg01.png") no-repeat bottom, url("../../images/_2017_rwd_cart/ic01.png") no-repeat center right;
    padding: 25px 40px 20px 0;
    text-align: left;
    color: #545454;
    font-size: 25px;
    font-weight: bold;
}

.cart-ul01 b {
    font-family: 'Roboto Condensed', sans-serif;
    color: #84849F;
    font-size: 35px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 15px 7px 0;
    border-bottom: 4px solid #84849F;
    line-height: 1.2;
}

.cart-ul01 span {
    color: #D80000;
}

.cart-price-page .cart-ul02 {
    margin: 0 -10px 55px;
}

.cart-ul02 li {
    width: 25%;
    padding: 0 10px;
}

.cart-ul02 li .box {
    border: 1px solid #DDDDDD;
    border-radius: 15px;
    overflow: hidden;
}

.cart-ul02 li span {
    padding: 10px 10px 10px 0;
    display: block;
    font-size: 18px;
    color: #545454;
    margin: 0 0 3px;
    background: url("../../images/_2017_rwd_cart/shadow02.png") no-repeat center bottom;
}

.cart-ul02 li span b {
    font-size: 25px;
    margin: 0 5px 0 0;
}

.cart-ul02 li p {
    background: #8DC21F;
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    color: #fff;
    font-size: 17px;
    padding: 38px 0;
    font-weight: bold;
}

.cart-ul02 li:nth-child(2) p {
    background: #00A0E8;
}

.cart-ul02 li:nth-child(3) p {
    background: #C30E22;
}

.cart-ul02 li:nth-child(4) p {
    background: #F29600;
}

.cart-ul02 li p b {
    font-size: 30px;
    font-weight: 600;
    margin: 0 0 0 5px;
}

.cart-ul02 li strong {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,f1f1f1+100 */
    background: rgb(255, 255, 255);
    /* Old browsers */
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(241, 241, 241, 1) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(241, 241, 241, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(241, 241, 241, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f1f1f1', GradientType=0);
    /* IE6-9 */
    display: block;
    font-size: 18px;
    padding: 10px 10px 5px;
}

.cart-price-page .cart-ul03 {
    max-width: 370px;
    margin: 0 auto 35px;
}

.cart-ul03 li {
    margin: 0 0 15px;
    color: #525252;
    font-size: 22px;
    font-weight: bold;
    text-align: left;
}

.cart-ul03 li a {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fafafa+0,e5e5e5+100 */
    background: rgb(250, 250, 250);
    /* Old browsers */
    background: -moz-linear-gradient(top, rgba(250, 250, 250, 1) 0%, rgba(229, 229, 229, 1) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(250, 250, 250, 1) 0%, rgba(229, 229, 229, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(250, 250, 250, 1) 0%, rgba(229, 229, 229, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#e5e5e5', GradientType=0);
    /* IE6-9 */
    border: 1px solid #D9D9D9;
    padding: 9px 9px 9px 80px;
    border-radius: 30px;
}

.cart-ul03 li b {
    font-weight: normal;
    color: #D90000;
    font-size: 15px;
    margin: 0 10px 0 0;
}

.cart-ul01-2 li {
    background: url("../../images/_2017_rwd_cart/bg01.png") no-repeat bottom;
    padding: 25px 0 20px 0;
}

.cart-ul01-2 span {
    display: inline-block;
    width: calc(100% - 65px);
    vertical-align: top;
    margin: 0 0 0 10px;
    color: #000000;
    font-weight: normal;
    font-size: 20px;
}

.cart-ul01-2 b {
    color: #D80000;
    border-color: #D80000;
}

.cart-ul01-2 strong {
    display: block;
    color: #D80000;
    font-size: 23px;
}

.cart-ul01-2 li:nth-child(2) b {
    color: #F29600;
    border-color: #F29600;
}

.cart-ul01-2 li:nth-child(2) strong {
    color: #F29600;
}

.cart-ul01-2 li:nth-child(3) b {
    color: #8CC11F;
    border-color: #8CC11F;
}

.cart-ul01-2 li:nth-child(3) strong {
    color: #8CC11F;
}

.cart-ul01-2 li:nth-child(4) b {
    color: #009FE7;
    border-color: #009FE7;
}

.cart-ul01-2 li:nth-child(4) strong {
    color: #009FE7;
}

.cart-title01.ic01 {
    background: url("../../images/_2017_rwd_cart/ic02.png") no-repeat bottom center;
    padding: 0 0 30px 0;
}

.cart-title03 {
    position: relative;
    font-size: 23px;
    color: #7D92B0;
    text-align: center;
    background: rgba(234, 237, 242, 0.6);
    border: 1px solid rgba(171, 182, 200, 0.6);
    border-radius: 45px;
    padding: 3px 10px;
    margin: 0 0 20px 0;
    font-weight: bold;
}


.cart-title03 .text_s_02 {
    width: 87px;
    height: 90px !important;
    top: -60px;
    right: 23%;
    position: absolute;
    max-height: none;
}

.cart-price-page .cart-ul04 {
    margin: 0 0 55px;
}

.cart-ul04 li {
    text-align: left;
    background: url("../../images/_2017_rwd_cart/bg01.png") no-repeat bottom, url("../../images/_2017_rwd_cart/ic01.png") no-repeat center left;
    padding: 25px 0 20px 50px;
    color: #444444;
    font-size: 18px;
}

.cart-ul04 li b {
    font-size: 23px;
    color: #2F6FB3;
}

.cart-ul04 li b span {
    float: right;
}

.cart-ul04 li p {
    margin: 10px 0 0 0;
}

.cart-title01.ic02 {
    background: url("../../images/_2017_rwd_cart/ic03.png") no-repeat top center;
    padding: 50px 0 0 0;
}

.cart-price-page .cart-ul05 {}

.cart-ul05 li {
    text-align: left;
    color: #444444;
    font-size: 18px;
    padding: 15px 0;
}

.cart-ul05 li+li {
    border-top: 1px solid #DDDDDD;
}

.cart-ul05 li b {
    display: inline-block;
    background: #111111;
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    text-align: center;
    line-height: 24px;
    border: 3px solid #FFBF00;
    vertical-align: top;
}

.cart-ul05 li p {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 50px);
    margin: 0 0 0 10px;
}

.cart-ul05 li span {
    display: block;
    color: #D90000;
    font-size: 23px;
    font-weight: bold;
    margin: -2px 0 5px 0;
}

.cart-price-box {
    text-align: left;
    color: #222;
    font-size: 20px;
    margin: 0 0 120px;
}

.cart-price-box img {
    display: block;
    margin: 0 auto;
}

.cart-price-box .title {
    color: #333333;
    font-size: 21px;
    border-bottom: 1px solid #DDDDDD;
    padding: 0 0 20px 0;
    max-width: 475px;
    margin: 40px auto 25px;
}

.cart-price-box .title b {
    color: #333333;
    font-size: 23px;
    margin: 0 0 0 10px;
}

.cart-price-box .cart-ul06 {
    margin: 10px 0;
}

.cart-ul06 li {
    border: 1px solid rgba(171, 182, 200, 0.6);
    border-radius: 45px;
    padding: 5px 135px 5px 50px;
    background: rgba(234, 237, 242, 0.6) url("../../images/_2017_rwd_cart/ic06.png") no-repeat 98% 50%;
    margin: 0 0 15px;
    position: relative;
}

.cart-ul06 li:before {
    content: "";
    width: 10px;
    height: 10px;
    background: #555555;
    border-radius: 50%;
    display: block;
    position: absolute;
    border: 4px solid #fff;
    top: 9px;
    left: 13px;
    z-index: 2;
}

.cart-ul06 li:after {
    content: "";
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #AAAAAA;
    position: absolute;
    top: 8px;
    left: 12px;
    z-index: 1;
}

.cart-ul06 .cost {
    padding: 5px 135px 5px 170px;
}

.cart-ul06 .cost b {
    width: 125px;
    height: 41px;
    position: absolute;
    top: -1px;
    left: 24px;
    background: rgba(234, 237, 242, 0.6) url("../../images/_2017_rwd_cart/text_s_03.png") no-repeat;
}

.cart-title04 {
    font-size: 24px;
    color: #1F1F1F;
    padding: 25px 0 0 0;
    margin: 25px 0;
    background: url("../../images/_2017_rwd_cart/ic04.jpg") no-repeat center top;
}

.cart-ul07-tit {
    text-align: left;
    color: #000000;
    font-size: 17px;
    border-bottom: 1px solid #999999;
}

.cart-ul07-tit li,
.cart-ul07 li {
    padding: 15px;
    text-align: left;
}

.cart-ul07-tit .c01,
.cart-ul07 .c01 {
    width: 20%;
}

.cart-ul07-tit .c02,
.cart-ul07 .c02 {
    width: 60%;
}

.cart-ul07-tit .c03,
.cart-ul07 .c03 {
    width: 20%;
}

.cart-ul07-tit i {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 0 10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 4px 4px 4px;
    border-color: #000 transparent transparent transparent;
}

.cart-price-page .cart-ul07 {
    display: table;
    width: 100%;
}

.cart-price-page .cart-ul07 li {
    border-bottom: 1px dotted #AAAAAA;
    display: table-cell;
    float: none;
    vertical-align: top;
}

.cart-price-page .cart-ul07 .c01 {
    color: #333333;
    font-size: 18px;
    font-weight: bold;
    padding: 15px 40px 15px 10px;
}

.cart-ul07 .c02 {
    background: #F5F8F7;
    color: #333333;
    font-size: 16px;
    padding: 20px 25px;
}

.cart-ul07 .c03 {
    color: #E50000;
    font-size: 16px;
    font-weight: bold;
}

.cart-ul07 .c03 span {
    display: block;
    font-size: 22px;
}

.cart-ul07 .c03 span small {
    font-size: 16px;
}

.cart-title05 {
    background: #7E8FAB;
    border-radius: 30px;
    color: #fff;
    font-size: 22px;
    font-weight: bold;
    padding: 5px 15px;
    margin: 80px 0 60px;
    position: relative;
}

.cart-title05:after {
    content: "";
    display: block;
    width: 16px;
    height: 18px;
    background: url("../../images/_2017_rwd_cart/ic02.png");
    position: absolute;
    top: 100%;
    left: 50%;
    margin: 15px 0 0 -8px;
}

.cart-price-page .cart-ul07-2 li {
    vertical-align: middle;
}

.cart-ul07-tit-2 .c01 {
    width: 20%;
}

.cart-ul07-tit-2 .c02 {
    width: 50%;
}

.cart-ul07-tit-2 .c03 {
    width: 30%;
}

.cart-ul07-2 .c01 {
    width: 20%;
    text-align: right;
    padding: 15px 40px 15px;
}

.cart-ul07-2 .c02 {
    width: 50%;
    color: #fff;
    font-size: 18px;
    position: relative;
    font-weight: bold;
    padding: 25px 15px 25px 20px;
    background: #F03D00 ;
    line-height: 1.5;
}

.cart-ul07-2 .c02 img{
    margin: 0 10px 5px 0;
}

.cart-ul07-2 .c02 img + p{
    margin: 0;
    width: calc(100% - 30px);
    display: inline-block;
    vertical-align: top;
}

.cart-ul07-2 .fz_b img{
    margin: 0 10px -9px 0;
}

.cart-ul07-2 .fz_b img + p{
    vertical-align: middle;
}


.cart-ul07-2 .c03 {
    width: 30%;
    color: #333333;
    font-size: 18px;
    font-weight: normal;
    padding: 15px 30px;
}

.cart-ul07-2 .color01 {
    color: #FFFF00;
    font-size: 16px;
    font-weight: normal;
}

.cart-ul07-2 .color01 span {
    font-size: 20px;
    font-weight: bold;
    margin: 0 0 0 10px;
    font-family: 'Roboto Condensed', sans-serif;
}

.cart-ul07-2 .color01 span b{
    font-size: 37px;
}

.cart-ul07-2 .color02 {
    color: #FFFF00;
    font-size: 18px;
}

.cart-ul07-2 .color03 span{
    font-size: 23px;
    color: #D80000;
    font-weight: bold;
}

.cart-ul07-2 .fz_c{
    color: #fff;
}

.cart-ul07-2 .fz_c img{
    margin: 0 10px -36px 0;
}

.cart-ul07-2 .fz_c span {
    display: block;
    color: #FFFF00;
    font-family: 'Roboto Condensed', "微軟正黑體", "Microsoft JhengHei", "微软雅黑", "メイリオ", "맑은 고딕", sans-serif;}


.cart-ul07-2 .fz_c span > b {
    font-size: 37px;
}

.cart-ul07-2 .fz_c b{
    color: #FFFF00;
    font-family: 'Roboto Condensed', sans-serif;
}

/*------------------------------------------*/

@media screen and (max-width: 1024px) {
    .cart-title03 .text_s_02 {
        right: 0;
    }
}

@media screen and (max-width: 767px) {
    .cart-title02 .text_s_01 {
        right: 0;
    }
    .cart-ul02 li {
        width: 50%;
        margin: 0 0 25px;
    }
    .cart-ul06 li {
        border-radius: 10px;
        background: rgba(234, 237, 242, 0.6) url("../../images/_2017_rwd_cart/ic06.png") no-repeat 50px 89%;
        padding: 5px 15px 25px 50px;
    }
    .cart-ul06 .cost {
        padding: 45px 15px 35px 50px;
    }
    .cart-price-page .cart-ul07-tit{
        display: none;
    }
    .cart-price-page .cart-ul07,
    .cart-price-page .cart-ul07 li{
        display: block;
        width: auto;
    }
    .cart-price-page .cart-ul07 li{
        padding: 10px 15px;
    }
    .cart-price-page .cart-ul07{
        border: 2px solid #ddd;
        margin: 0 0 15px;
    }
    .cart-ul07 .c03 span{
        display: inline-block;
    }
    .cart-price-page .cart-ul07 .c01{
        text-align: left;
        padding: 5px 20px 5px 10px;
        background: #eee;
    }
    .cart-ul07-2 .c02:before,
    .cart-ul07-2 .c03:before{
        content: attr(title);
        display: inline-block;
        color: #fff;
    }
    .cart-ul07-2 .c03:before{
        color: #999;
        font-weight: bold;
        display: block;
    }
    .cart-ul07-2 .fz_b img,
    .cart-ul07-2 .fz_c img{
    margin: 0 10px 5px 0;}
}


@media screen and (max-width: 600px) {
    .cart-ul04 li b span {
        float: none;
        display: block;
    }
    .cart-title02 {
        margin: 100px 0 0 0;
    }
    .cart-title02 .text_s_01 {
        top: -88px;
        right: 50%;
        margin: 0 -85px 0 0;
    }
    .cart-title02 .text_s_01 {}
    .cart-title03 .text_s_02 {
        right: -10px;
        top: -100px;
    }
}

@media screen and (max-width: 400px) {
    .cart-price-page .cart-ul02 {
        margin: 0 0 55px;
    }
    .cart-ul02 li {
        width: 100%;
        padding: 0;
        margin: 0 0 25px;
    }
    .cart-ul03 li a {
        padding: 9px 25px;
    }
}

/* ===== _floating.css ===== */
.floating {
    position: fixed;
    right: 0;
    bottom: 20%;
    z-index: 400;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
.floating .ibtn.gotop {
    background: #7F7F7F url("../../images/gotop.png") no-repeat;
    width:  54px;
    height: 54px;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    -webkit-border-radius: 30px 0 0 30px;
    border-radius: 30px 0 0 30px;
}
.floating .ibtn.gotop:hover {
    width: 88px;
    background-color: #404040;
}
@media screen and (max-width: 1000px) {
    .floating .ibtn.gotop{
        color: transparent;
        display: block;
        width: 30px;
        height: 30px;
        border: 0;
        top: auto;
        margin: 0;
        transform-origin: 0;
        transform: rotate(0deg);
        position: fixed;
        bottom: 0;
        left: 50%;
        margin-left: -15px;;
        background: url("../../images/mobile_gotop.svg") 50% 50% no-repeat;
    }
    .floating .gotop:before,
    .floating .gotop:after{
        display: none;
    }
    .floating .ibtn.gotop:hover {
        width: 30px;
        background: url("../../images/mobile_gotop.svg") 50% 50% no-repeat;
        opacity: 0.7;
    }
}

/* ===== _breadcrumb.css ===== */
.breadcrumb {
    padding: 15px 15px;
    font-size: 13px;
    text-align: center;
    margin:-27px auto 0;
    display: block;
    background: #FFF;
    max-width: 150px;
}
.breadcrumb li {
    margin: 0;
}
.breadcrumb li,
.breadcrumb li a {
    color: #929292;
    display: inline;
}
.breadcrumb li+li:before {
    content: "/";
    margin: 0 4px;
}
/*.breadcrumb li a.home {
    background: url("../../images/home.png") no-repeat 0 2px;
    padding-left: 20px;
}*/
.breadcrumb li:last-child a {
    color: #000;
}
.breadcrumb li a:hover {
    text-decoration: underline;
}.breadcrumb li a.home
.products-breadcrumb {
    font-size: 15px;
    padding-top: 0;
}
.products-breadcrumb li+li:before {
    content: "//";
}
.products-breadcrumb li,
.products-breadcrumb li a,
.products-breadcrumb li:last-child a {
    color: #666;
}
.products-breadcrumb li:last-child a {
    font-weight: bold;
}

@media screen and (max-width: 640px) {
}

/* ===== _pagination.css ===== */
.pagination {
    text-align: center;
    font-size: 15px;
    padding-bottom: 100px;
}
.pagination li {
    display: inline-block;
    vertical-align: middle;
}
.pagination li a {
    display: block;
    min-width: 40px;
    height: 40px;
    line-height: 40px;
    padding: 0 3px;
    text-align: center;
    color: #000;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
.pagination li a:hover,
.pagination li.active a {
    color: #900;
    text-decoration: underline;
}
.pagination li a.controls {
    background: url("../../images/pager_arrow.png") no-repeat;
    width: 40px;
    height: 40px;
}
.pagination li a.prev {
    background-position: 0 0;
    margin-right: 20px;
}
.pagination li a.next {
    background-position: 100% 0;
    margin-left: 20px;
}
.pagination li a.prev:hover {
    background-position: 0 100%;
}
.pagination li a.next:hover {
    background-position: 100% 100%;
}
.pagination li a.first {
    background-image: url("../../images/arrowL.png");
}
.pagination li a.last {
    background-image: url("../../images/arrowR.png");
}
.pagination li a.first:hover,
.pagination li a.last:hover {
    background-position: 0 100%;
}

.page-info {
    display: none;
}
.page-info .form-control {
    display: block;
    width: 100%;
    height: 40px;
    font-size: 15px;
    padding: 4px 40px 4px 10px;
    border: 1px solid #999;
    background: url("../../images/select_caret.png") no-repeat 100% 50%;
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
}
.page-info .form-control:focus {
    outline: none;
    border-color: #000;
}
.btn-box2{
	padding-top:24px;
}
.btn-box2 .pagination{
	padding-bottom: 0px;
}

@media screen and (max-width: 767px) {
    .page-info {
        display: block;
        padding: 0 85px;
		margin-bottom:80px;
    }
    .pagination {
        position: relative;
        height: 0;
    }
    .pagination li a {
        display: none;
    }
    .pagination li a.controls {
        display: block;
        position: absolute;
        bottom: -40px;
        margin: 0;
    }
    .pagination li a.first {
        left: 0;
    }
    .pagination li a.prev {
        left: 40px;
    }
    .pagination li a.next {
        right: 40px;
    }
    .pagination li a.last {
        right: 0;
    }
}

/* ===== _mobile_footer.css ===== */
#mobile-footer,
#member-box {
    display: none;
}

@media screen and (max-width: 767px) {
    #mobile-footer {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 500;
    }
    #mobile-footer li {
        border: 1px solid #EEE;
        border-width: 1px 1px 0;
        background: #FFF;
        width: 33.3%;
    }
    #mobile-footer li:nth-child(4) {
        background: #221616;
        border-color: #221616;
    }
    #mobile-footer a {
        text-align: center;
        line-height: 45px;
        position: relative;
    }
    #mobile-footer li .icon {
        background-image: url("../../images/mobile_footer.png");
        width: 32px;
        height: 32px;
        vertical-align: middle;
    }
    #mobile-footer li a:hover .icon {
        opacity: 0.7;
    }
    #mobile-footer li:nth-child(1) .icon { background-position:     0 0; }
    #mobile-footer li:nth-child(2) .icon { background-position: -32px 0; }
    #mobile-footer li:nth-child(3) .icon { background-position: -64px 0; }
    #mobile-footer li:nth-child(4) .icon { background-position: -96px 0; }
    
    #mobile-footer .qty {
        position: absolute;
        top: 5px;
        left: 50%;
        display: inline-block;
        color: #fff;
        font-size: 12px;
        background: #BC9848;
        line-height: 14px;
        padding: 0 4px;
        margin-left: 6px;
        -webkit-border-radius: 5px;
                border-radius: 5px;
    }
    
    #member-box {
        display: block;
        position: fixed;
        z-index: 400;
        bottom: 45px;
        left: 0;
        right: 0;
        color: #fff;
        max-height: 0;
        overflow: hidden;
        text-align: center;
        -webkit-transition: all .3s ease;
           -moz-transition: all .3s ease;
            -ms-transition: all .3s ease;
             -o-transition: all .3s ease;
                transition: all .3s ease;
    }
    #member-box.active {
        max-height: 500px;
    }
    #member-box li {
        border-bottom: 1px solid #fff;
    }
    #member-box li a {
        display: block;
        padding: 10px;
        background: #BC9848;
        font-size: 16px;
    }
    #member-box li a:hover {
        color: #fff;
        background: #9E7249;
        opacity: 1;
    }
    #member-box .qty {
        display: inline-block;
        background: #fff;
        font-size: 12px;
        color: #333;
        font-weight: bold;
        padding: 0 6px;
        -webkit-border-radius: 5px;
                border-radius: 5px;
    }
    .animated {
      -webkit-animation-duration: 1s;
      animation-duration: 1s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
    }
    @-webkit-keyframes bounceInUp {
      from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
      }

      from {
        opacity: 0;
        -webkit-transform: translate3d(0, 3000px, 0);
        transform: translate3d(0, 3000px, 0);
      }

      60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
      }

      75% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
      }

      90% {
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0);
      }

      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    }

    @keyframes bounceInUp {
      from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
      }

      from {
        opacity: 0;
        -webkit-transform: translate3d(0, 3000px, 0);
        transform: translate3d(0, 3000px, 0);
      }

      60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
      }

      75% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
      }

      90% {
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0);
      }

      to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    }

    .bounceInUp {
      -webkit-animation-name: bounceInUp;
      animation-name: bounceInUp;
    }

}

/* ===== style.css ===== */


/* ===== _site_nav_hover1.css ===== */
.dropdown-menu-nohover1{
	display:block !important;
}
.dropdown-menu-nohover2{
	position:absolute;
	z-index:5;
	right:0;
	top:101px;
	width:100%;
}
.dropdown-menu-nohover1,
.dropdown-menu-nohover2{
    display: none;
    background: #C30E22;
}
.dropdown-menu-nohover1 .container,
.dropdown-menu-nohover2 .container{
    max-width: 1440px;
    
}
.dropdown-menu-nohover1 li,
.dropdown-menu-nohover2 li{
    float: left;
    display: inline-block;
    padding: 5px 2px;
}
.dropdown-menu-nohover1 li a,
.dropdown-menu-nohover2 li a{
    font-size: 17px;
    color: #FFF;
    border: 1px solid rgba(255,255,255,0.4);
    display: inline-block;
    padding: 0 15px;
    background: url("../../images/dropdown-menu.jpg")bottom repeat-x;
}
.dropdown-menu-nohover1 li a:hover,
.dropdown-menu-nohover2 li a:hover{
    background: url("../../images/dropdown-menu_.jpg")top repeat-x;
    -webkit-transition: all 200ms linear;
   -moz-transition: all 200ms linear;
     -o-transition: all 200ms linear;
	transition: all 200ms linear;
}
.dropdown-menu-nohover1 ul,
.dropdown-menu-nohover2 ul{
	position: relative;
}
.menu > .dropdown-menu-nohover1 li,
.menu > .dropdown-menu-nohover2 li{
	display: none;
}
@media screen and (max-width: 1060px) {
	.menu > .dropdown-menu-nohover1 li,
	.menu > .dropdown-menu-nohover2 li{
	display: block ;
	}
	.dropdown-menu-nohover1{
		display:none !important;
	}
}
/***** 電腦版一直顯示選單用此樣式 *****/


/* ===== aeo_marketing.css ===== */
body {
    color: #444;
    letter-spacing: 0.6px;
    line-height: 1.5;
}
.main-content > .container {
    max-width: 1260px;
    /* 原本是 'Noto Sans TC', serif。拿掉自訂字型後如果只留 serif，
       整頁中文會變成明體，落差太大 —— 改成系統黑體的堆疊。 */
    font-family: "微軟正黑體", "Microsoft JhengHei", "微软雅黑", "メイリオ", "맑은 고딕", sans-serif;
}
.main-top {
    display: none;
}
.content {
    margin-top: 0;
    margin-bottom: 0;
}
.main-content {
    background: #EEEEEE;
    padding-bottom: 0;
    padding-top: 0;
}
.breadcrumb {
    background: #EEEEEE;
    display: none;
}
.main-title {
    border-bottom: 1px solid #D6D6D6;
}
section.content .row {
    display: flex;
}
section.content .col {
    box-sizing: border-box;
}
@keyframes grahover {
    0% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0% 50%
    }
}
.main-box {
    padding-top: 22px;
    background: #EEEEEE;
}
.main-box .main-container {
    max-width: 1020px;
    margin-left: auto;
    margin-right: auto;
}
.wow {
    visibility: hidden;
}
/*------------ 首屏進場動畫（不經 WOW.js） ------------
   WOW.js 靠上面那條 .wow{visibility:hidden} 先把元素藏起來，等 JS 跑起來
   才放出來。實測 375×812 行動裝置視窗、捲動位置 0：首屏裡除了 header 與
   banner，H1、底下兩段內文、還有整張 sect_story_pic2.webp 全都包在 .wow
   裡面 —— 而 wow.min.js 掛在 103KB HTML 的最尾端，等於整個首屏要等文件
   解析完、那支 JS 又執行完，才算「已繪製」。

   PageSpeed 行動版量到 FCP 9.6 秒、Speed Index 也是 9.6 秒 —— 兩個數字
   一模一樣就是「一直什麼都沒畫，然後一次全部冒出來」的典型徵狀。

   首屏這一組改成純 CSS 動畫：一進場就播，不依賴任何 JS。折線以下的 .wow
   完全不動，照樣交給 WOW.js。作法與 css/index.css 的 .hero-in 一致。

   .hero-pic（LCP 那張圖）刻意只動 transform、不動 opacity —— opacity:0
   的元素瀏覽器不計入 LCP，會白白多等一個動畫時間。                      */
.hero-in {
    animation: heroFadeInLeft 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.hero-pic {
    animation-name: heroSlideInRight;
}
.hero-d2 {
    animation-delay: 0.2s;
}
@keyframes heroFadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-40px, 0, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@keyframes heroSlideInRight {
    from {
        transform: translate3d(40px, 0, 0);
    }
    to {
        transform: none;
    }
}
/*------------ banner ------------*/
.banner{
    position: relative;
    text-align: center;
    background: #E2EFF3;
}
/*------------ /banner ------------*/
/*------------ menu ------------*/
.menu-box {
    display: flex;
    transition: all .0s ease;
    padding: 0 0 15px;
    justify-content: space-between;
    max-width: 1260px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
.menu-box .tablinks {
    appearance: none;
    -webkit-appearance: none;
    width: 25%;
    font-size: 28px;
    font-weight: 400;
    position: relative;
    transition: border-color .3s ease , color .3s ease;
    text-align: center;
    height: 70px;
    color: #9F9A94;
    z-index: 0;
    border-top: 0 solid #E6E6E6;
    border-bottom: 5px solid #E6E6E6;
    cursor: pointer;
    border-left: 0;
    border-right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    white-space: nowrap;
    letter-spacing: 2px;
    padding: 5.5px 0;
}
.menu-box .tablinks+.tablinks:before {
    content: "";
    width: 2px;
    height: 20px;
    position: absolute;
    left: -1px;
    top: calc(50% - 10px);
    background: #E6E6E6;
}
.menu-box .tablinks:hover,
.menu-box .tablinks.active {
    color: #554942;
}
.menu-box .menu-line {
    position: absolute;
    bottom: 15px;
    height: 5px;
    background: linear-gradient(to right,#5AC995 0%,#3D83B6 50%,#AC83C9 100%);
    left: 0;
    width: 0;
    pointer-events: none;
    transition: none;
    transform: scaleX(0);
    transform-origin: center; 
    transition: none;
}
.menu-box.is-reveal .menu-line{
    transition: transform .35s ease-out;
    transform: scaleX(1);
}
.menu-box.is-ready .menu-line{
    transition: left 0.5s ease-in-out, width 0.5s 0.10s;
    transform: scaleX(1);
}
.menu-box.icon-drop .menu-line:before{
    animation: iconDrop 0.3s ease-out forwards;
}
@keyframes iconDrop{
    to{
        opacity: 1;
        transform: translateY(0);
    }
}
.site-main.top-fixed .menu-box.is-ready .menu-line{
    display: none;
}
/*------------ /menu ------------*/
/*------------ 網站不只要給人類看 ------------*/
.sect-story {
    position: relative;
    padding: 0 0 95px;
}
.story_list {
    display: flex;
    align-items: flex-end;
}
.story_list .item_left {
    width: 100%;
    max-width: 585px;
    z-index: 1;
}
.story_list .box .txt {
    padding: 0 57px 53px 0;
}
.story_list .box .col+.col {
    margin: 30px 0 0;
}
.story_list .box h1,
.story_list .box h2 {
    position: relative;
    margin: 0 0 30px;
    padding: 0;
    font-size: 36px;
    font-weight: bold;
    line-height: 1.5;
    color: #1E7D8C;
}
.story_list .box p {
    font-size: 18px;
    letter-spacing: 0.5px;
    color: #666666;
}
.story_list .col_bottom h2 {
    margin: 0 0 15px;
}
.story_list .btn {
    margin: 40px 0 0;
}
.story_list .btn a {
    display: block;
    text-align: center;
    width: 256px;
    height: 67px;
    line-height: 67px;
    border-radius: 67px;
    font-size: 26px;
    color: #fff;
    transition: all 0.3s ease;
    background: linear-gradient(to right, #3D83B6, #8B5BBF, #3D83B6, #8B5BBF, #3D83B6, #8B5BBF);
    background-size: 400%;
}
.story_list .btn a:hover {
    -webkit-animation: grahover 4s linear infinite;
    animation: grahover 4s linear infinite;
}
.story_list .item_right {
    width: 100%;
    max-width: 808px;
    margin-left: -122px;
    margin-right: -11px;
    z-index: 2;
}
.story_list .item_right .pic {
    position: relative;
}
.story_list .item_right .pic_txt {
    position: absolute;
    top: 40px;
    left: 0;
    display: inline-block;
    animation: dialogBox2 3s 1s ease-in-out infinite forwards alternate;
}
.story_list .item_right .pic_txt span {
    display: block;
    color: #FFFF73;
    font-weight: 600;
    font-size: 32px;
    padding: 18px 29.5px;
    border-radius: 93px;
    background: linear-gradient(45deg, #1E818F 0%, #253B6F 50%);
}
.story_list .item_right .pic_txt span em {
    font-style: unset;
}
.story_list .item_right .pic_txt .chattri {
    position: absolute;
    right: 90px;
    bottom: -25px;
    width: 55px;
    height: auto;
    transform: scaleX(-1);
}
.story_list .item_right .pic_txt .chattri path {
    fill:#253B6F;
}
@keyframes dialogBox {
    0%,
    5% {
        opacity: 0;
        -webkit-transform: translateX(-20px);
        transform: translateX(-20px);
    }
    25%, 
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes dialogBox2 {
    0%,
    5% {
        opacity: 0;
        -webkit-transform: translateX(20px);
        transform: translateX(20px);
    }
    25%, 
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
/*------------ /網站不只要給人類看 ------------*/
/*------------ AEO答案引擎優化 ------------*/
.sect-aeo {
    position: relative;
    padding: 0 0 55px;
    z-index: 1;
}
.aeo_title {
    text-align: center;
    margin: 0 0 50px;
}
.aeo_title h2 {
    position: relative;
    margin: 0 auto 5px;
    padding: 0;
    width: fit-content;
    font-size: 36px;
    font-weight: bold;
}
.aeo_list .item {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    max-width: 921px;
}
.aeo_list .box {
    width: calc(100% / 3);
    padding: 0 13px;
}
.aeo_list .txt{
    text-align: center;
}
.aeo_list .txt .title {
    display: inline-block;
    text-align: center;
    margin: 0 auto -1px;
    font-size: 20px;
    padding: 6px 16px;
    line-height: 1.5;
    color: #F0F0F0;
    background: #444444;
    border-radius: 10px 10px 0 0;
}
/*星球動畫*/
.planet_animation {
    width: 1600px;
    height: 600px;
    border: 1px solid #ccc;
    border-radius: 50%;
    transform: translate(-50%, -50%) rotate(15deg);
    position: absolute;
    top: 90%;
    left: 50%;
    z-index: -1;
}
.planet_animation .circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    border-radius: 20px;
}
.planet_animation .circle:nth-of-type(1),
.planet_animation .circle:nth-of-type(7) {
    background: url("../../images/aeo/sect_aeo_ic1.webp");
}
.planet_animation .circle:nth-of-type(2),
.planet_animation .circle:nth-of-type(8) {
    background: url("../../images/aeo/sect_aeo_ic2.webp");
}
.planet_animation .circle:nth-of-type(3),
.planet_animation .circle:nth-of-type(9) {
    background: url("../../images/aeo/sect_aeo_ic3.webp");
}
.planet_animation .circle:nth-of-type(4),
.planet_animation .circle:nth-of-type(10) {
    background: url("../../images/aeo/sect_aeo_ic4.webp");
}
.ellipplanet_animationse .circle:nth-of-type(5),
.planet_animation .circle:nth-of-type(11) {
    background: url("../../images/aeo/sect_aeo_ic5.webp");
}
.planet_animation .circle:nth-of-type(6),
.planet_animation .circle:nth-of-type(12) {
    background: url("../../images/aeo/sect_aeo_ic6.webp");
}
/*/星球動畫*/
/*------------ /AEO答案引擎優化 ------------*/
/*------------ AI_Overview ------------*/
.sect-aio {
    position: relative;
    padding: 0 0 80px;
    z-index: 2;
}
.aio_list {
    display: flex;
    align-items: flex-end;
}
.aio_list .item_left {
    width: calc(100% - 641px);
    padding-right: 55px;
    padding-bottom: 30px;
}
.aio_list .txt h2 {
    margin: 0;
    color: #5E6166;
    font-size: 65px;
    font-weight: 400;
    font-family: 'Roboto', sans-serif;
}
.aio_list .txt p {
    font-size: 24px;
    color: #777777;
}
.aio_list .txt p span {
    color: #4EACA9;
}
.aio_list .item_right {
    width: 100%;
    max-width: 641px;
    margin-right: -33px;
}
.aio_list .item_right .pic {
    box-shadow: 0 0 20px rgb(0 0 0 / 10%);
    border-radius: 45px;
}
/*------------ /AI_Overview ------------*/
/*------------ FAQ_vs_Q&A ------------*/
.sect-faqqa {
    position: relative;
    padding: 0 0 83px;
    z-index: 2;
}
.faqqa_list {
    display: flex;
    align-items: flex-start;
}
.faqqa_list .item_left {
    width: 100%;
    max-width: 730px;
    z-index: 1;
}
.faqqa_list .item_left .pic,
.faqqa_list .item_left .pic img{
    border-radius: 40px;
    margin: 0;
    padding: 0;
}
.faqqa_list .item_right {
    width: calc(100% - 730px);
    padding-left: 57px;
    z-index: 2;
}
.faqqa_list .txt h2 {
    margin: 0;
    color: #5E6166;
    font-size: 65px;
    font-weight: 400;
    font-family: 'Roboto', sans-serif;
}
.faqqa_list .txt p {
    font-size: 24px;
    color: #777777;
}
.faqqa_list .txt p span {
    color: #4DACA9;
}
.faqqa_list .pic {
    padding: 30px 0 0;
    margin: 0 0 0 -15px;
}
.faqqa_list .btn {
    margin: 52px 0 0;
}
.faqqa_list .btn a {
    display: block;
    text-align: center;
    width: 256px;
    height: 67px;
    line-height: 67px;
    border-radius: 67px;
    font-size: 26px;
    color: #fff;
    transition: all 0.3s ease;
    background: linear-gradient(to right, #5AC995, #438BC0, #5AC995, #438BC0, #5AC995, #438BC0);
    background-size: 400%;
}
.faqqa_list .btn a:hover {
    -webkit-animation: grahover 4s linear infinite;
    animation: grahover 4s linear infinite;
}
/*------------ /FAQ_vs_Q&A ------------*/
/*------------ 網頁人+AI機器人+GOOGLE人 ------------*/
.sect-webaigoo {
    position: relative;
    padding: 0 0 70px;
    z-index: 2;
}
.webai_list {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1;
}
.webai_list .item_left {
    width: 100%;
    max-width: 798px;
    margin: 0 0 0 -33px;
}
.webai_list .item_left .pic {
    position: relative;
}
.webai_list .item_left .pic img {
    position: relative;
    z-index: 2;
}
.webai_list .item_left .pic_txt_all {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
}
.webai_list .item_left .pic_txt.pic_txt_1 {
    position: absolute;
    top: 0;
    left: 75px;
    display: inline-block;
    animation: dialogBox 3s 0.5s ease-in-out infinite forwards alternate;
}
.webai_list .item_left .pic_txt.pic_txt_2 {
    position: absolute;
    top: 110px;
    right: 75px;
    display: inline-block;
    animation: dialogBox 3s 1s ease-in-out infinite forwards alternate;
}
.webai_list .item_left .pic_txt.pic_txt_3 {
    position: absolute;
    top: 220px;
    right: 0;
    display: inline-block;
    animation: dialogBox 3s 1.5s ease-in-out infinite forwards alternate;
}
.webai_list .item_left .pic_txt span {
    display: block;
    color: #444;
    font-weight: 600;
    font-size: 30px;
    padding: 25.5px 29.5px;
    border-radius: 50vw;
    background: #fff;
}
.webai_list .item_left .pic_txt .chattri {
    position: absolute;
    left: 90px;
    bottom: -35px;
    width: 70px;
    height: auto;
}
.webai_list .item_left .pic_txt .chattri path {
    fill:#fff;
}
.webai_list .item_right {
    padding-left: 16px;
    margin-right: -20px;
    width: 100%;
    max-width: 518px;
}
.webai_list .item_right .pic {
    position: relative;
}
.webai_list .item_right .pic img {
    position: relative;
    z-index: 2;
}
.webai_list .item_right .pic_txt_all {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
}
.webai_list .item_right .pic_txt_w_1{
    animation: dialogBox 3s 1.5s ease-in-out infinite forwards alternate;
}
.webai_list .item_right .pic_txt.pic_txt_1 {
    position: absolute;
    top: 0;
    left: 65px;
    display: inline-block;
    transform: rotate(-15deg);
}
.webai_list .item_right .pic_txt_w_2{
    animation: dialogBox 3s 2s ease-in-out infinite forwards alternate;
}
.webai_list .item_right .pic_txt.pic_txt_2 {
    position: absolute;
    top: 92px;
    left: 0;
    display: inline-block;
    transform: rotate(-15deg);
}
.webai_list .item_right .pic_txt span {
    display: inline-block;
    color: #83D1B8;
    font-weight: 600;
    font-size: 50px;
    padding: 15px 30px;
    border-radius: 50vw;
    background: linear-gradient(45deg, #1E818F 0%, #253B6F 40%);
    /* 原本是 'Poppins', serif —— 但 Poppins 那行 @import 位置不合規，
       瀏覽器一直忽略它，所以這裡從上線第一天就是在吃 serif。
       既然本來就沒有 Poppins，直接寫成系統堆疊，不再假裝有。 */
    font-family: Arial, "微軟正黑體", "Microsoft JhengHei", "微软雅黑", "メイリオ", "맑은 고딕", sans-serif;
}
.webai_list .item_right .pic_txt .chattri {
    position: absolute;
    right: 40px;
    bottom: -32px;
    width: 70px;
    height: auto;
    transform: scaleX(-1);
}
.webai_list .item_right .pic_txt .chattri path {
    fill:#253B6F;
}
.goo_list {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0 -63px;
    z-index: 2;
}
.goo_list .item_left {
    width: 100%;
    background: #fff;
    padding: 63px 63px 55px;
    border-radius: 40px;
    box-shadow: 0 0 20px rgb(0 0 0 / 10%);
}
.goo_list .txt .title {
    font-size: 30px;
    font-weight: bold;
    margin: 0 0 20px;
}
.goo_list .txt .box {
    display: inline-flex;
    border: 1px solid #eee;
    border-radius: 10px;
}
.goo_list .txt .box+.box {
    margin: 15px 0 0;
}
.goo_list .txt .box h3 {
    box-sizing: border-box;
    text-align: center;
    padding: 10.5px 0;
    width: 225px;
    height: 100%;
    font-size: 22px;
    font-weight: bold;
    background: #eee;
    border-radius: 10px;
}
.goo_list .txt .box span {
    color: #4EACA9;
}
.goo_list .txt .box p {
    box-sizing: border-box;
    padding: 10.5px 15px;
    width: calc(100% - 225px);
    font-size: 22px;
}
.goo_list .txt .box p strong {
    color: #1F778A;
    font-weight: 400;
}
.goo_list .item_right {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    max-width: 830px;
    z-index: 1;
}
.goo_list .item_right .pic{
    position: relative;
}
.goo_list .item_right .pic_txt {
    position: absolute;
    top: 44px;
    left: 0;
    display: inline-block;
    z-index: -1;
}
.goo_list .item_right .pic_txt span {
    display: block;
    text-align: left;
    color: #E4E4E6;
    font-weight: 600;
    font-size: 30px;
    padding: 40px 205.5px 40px 57px;
    border-radius: 50vw;
    background: linear-gradient(45deg, #1E818F 0%, #253B6F 50%);
}
.goo_list .item_right .pic_txt .chattri {
    position: absolute;
    right: 180px;
    bottom: -40px;
    width: 85px;
    height: auto;
    transform: scaleX(-1);
}
.goo_list .item_right .pic_txt .chattri path {
    fill:#253B6F;
}
/*------------ /網頁人+AI機器人+GOOGLE人 ------------*/
/*------------ 多米諾怎麼做，你和AI都看得到 ------------*/
.sect-dosee {
    position: relative;
    padding: 0 0 45px;
    z-index: 2;
}
.dosee_title {
    text-align: center;
    margin: 0 0 50px;
}
.dosee_title h2 {
    position: relative;
    margin: 0 auto 5px;
    padding: 0;
    width: fit-content;
    font-size: 60px;
    font-weight: bold;
}
.dosee_title h2 .title_1 {
    color: #448CBF;
}
.dosee_title h2 .title_2 {
    color: #8B59BF;
}
.dosee_title p {
    font-size: 30px;
    font-weight: 500;
}
.dosee_title p span{
    color: #59C994;
}
.dosee_list {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    margin: 0 -60px;
}
.dosee_list::before {
    content: '';
    position: absolute;
    top: calc(50% - 10px);
    left: 50%;
    transform: translate(-50%, -50%);
    width: 54px;
    height: 54px;
    background: url("../../images/aeo/sect_dosee_start.webp") no-repeat;
    background-size: contain;
}
.dosee_list .box {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex-direction: row;
    border: 1px solid #DADADD;
    background: #fff;
    border-radius: 20px;
    padding: 20px;
    width: calc(100% / 2 - 20px);
    margin: 0 10px 20px;
}
.dosee_list .box .pic,
.dosee_list .box .pic img {
    border-radius: 20px;
    /* width: 294px; */
}
.dosee_list .box .txt {
    box-sizing: border-box;
    width: calc(100% - 294px);
    padding-left: 20px;
}
.dosee_list .box .txt h3 {
    font-size: 30px;
    font-weight: 600;
}
.dosee_list .box .txt p {
    font-size: 16px;
    color: #999999;
}
.dosee_list .box .txt .price {
    padding: 15px 0 0;
    font-size: 40px;
    font-weight: 400;
    color: #BD3733;
    font-family: 'Lora', sans-serif;
}
.dosee_list .box .txt span {
    display: block;
    text-align: left;
    padding: 0;
    margin: 0;
    font-size: 18px;
    color: #D9D9DD;
}
.dosee_list .box .txt span i {
    font-style: unset;
    text-decoration: line-through;
}
.dosee_list .box .btn {
    display: block;
    margin: 30px 0 0;
}
.dosee_list .box .btn a {
    display: block;
    text-align: center;
    width: 100%;
    height: 48px;
    line-height: 48px;
    font-size: 24px;
    color: #fff;
    border-radius: 48px;
    transition: all 0.3s ease;
    background: linear-gradient(to right, #5AC995, #438BC0, #5AC995, #438BC0, #5AC995, #438BC0);
    background-size: 400%;
}
.dosee_list .btn a:hover {
    -webkit-animation: grahover 4s linear infinite;
    animation: grahover 4s linear infinite;
}
/*------------ /多米諾怎麼做，你和AI都看得到 ------------*/
/*------------ 方案介紹_方案內容比較表 ------------*/
.sect-feature {
    padding: 0 0 88px;
    width: 100%;
    /* overflow-x: auto; */
    z-index: 2;
}
.feature_list {
    width: 100%;
    -webkit-overflow-scrolling: touch;
}
.feature_list .feature_item {
    display: grid;
    grid-template-columns: 26% repeat(4, 18.5%);
    border: 0;
    font-size: 20px;
    color: #777;
}
.feature_list .cell {
    border-bottom: 1px solid #ddd;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}
.feature_list .head_left {
    position: relative;
    justify-content: flex-start;
    padding: 10px 0;
    border-bottom: 0;
    border-right: 0;
    background: #EEEEEE;
    z-index: 1;
}
.feature_list .head_left::before {
    content: '';
    position: absolute;
    top: 0;
    left: -83px;
    width: 146px;
    height: 139px;
    background: url("../../images/aeo/sect_feature_start.webp") no-repeat;
    background-size: contain;
    z-index: -1;
}
.feature_list .head_left h2 {
    font-size: 30px;
    color: #444;
}
.feature_list .head_left h2 span:not(.circle) {
    margin: 0 10px 0 0;
}
.feature_list .head_left .circle {
    position: relative;
    text-align: center;
    color: #fff;
    letter-spacing: 5px;
}
.feature_list .head_left .circle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 61px;
    height: 61px;
    border-radius: 100%;
    z-index: -1;
}
.feature_list .head_left .circle:nth-of-type(2)::before {
    background: linear-gradient(to right, #5AC995 0%, #438BC0 80%);
}
.feature_list .head_left .circle:nth-of-type(3):before {
    background: linear-gradient(to right, #438BC0 0%, #8060BE 80%);
}
.feature_list .head_left .circle:nth-of-type(4):before {
    background: linear-gradient(to right, #8060BE 0%, #8060BE 100%);
}
.feature_list .plan {
    flex-direction: column;
    padding: 20px 15px;
    margin: 0 0 0 -1px;
    border: 1px solid #ddd;
    border-radius: 15px 15px 0 0;
    justify-content: space-between;
}
.feature_list .highlight {
    position: relative;
    background: #F3FCF9;
    z-index: 1;
}
.feature_list .plan.noradius{
    border-radius: 0;
}
.feature_list .plan.noradius2{
    border-radius: 15px 0 0 0;
    border-left-width: 2px;
}
.feature_list .plan.noradius3{
    border-radius: 0 15px 0 0;
}
.feature_list .plan h3 {
    text-align: center;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.3px;
    color: #444;
}
.feature_list .plan .price {
    margin: 0;
    font-size: 20px;
    font-weight: 400;
    color: #BD3734;
    font-family: 'Lora', sans-serif;
}
.feature_list .plan .btn {
    margin: 0;
}
.feature_list .plan .btn a {
    display: block;
    text-align: center;
    width: 104px;
    height: 32px;
    line-height: 30px;
    font-size: 15px;
    color: #777;
    background: #fff;
    border-radius: 32px;
    border: 1px solid #DFDFE1;
    transition: all 0.3s ease;
}
.feature_list .plan.highlight .btn a {
    color: #fff;
    background: linear-gradient(to right, #3D83B6, #8B5BBF, #3D83B6, #8B5BBF, #3D83B6, #8B5BBF);
    background-size: 400%;
}
.feature_list .plan .btn a:hover,
.feature_list .plan.highlight .btn a:hover {
    color: #fff;
    background: linear-gradient(to right, #3D83B6, #8B5BBF, #3D83B6, #8B5BBF, #3D83B6, #8B5BBF);
    background-size: 400%;
    -webkit-animation: grahover 4s linear infinite;
    animation: grahover 4s linear infinite;
}
.feature_list .feature {
    border-right: 1px solid #ddd;
    padding: 10px 15px 10px 25px;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    background: #EEEEEE;
}
.feature_list .feature h4 {
    position: relative;
    font-size: 16px;
    font-weight: 500;
    color: #444;
}
.feature_list .feature h4::before {
    content: '';
    position: absolute;
    top: 7px;
    left: -25px;
    width: 17px;
    height: 16px;
    background: url("../../images/aeo/sect_feature_ic.webp") no-repeat;
    background-size: contain;
}
.feature_list .feature span {
    font-size: 13px;
    letter-spacing: 0;
}
.feature_list .merge {
    align-items: center;
    justify-content: center;
    font-weight: 500;
}
/*------------ /方案內容比較表 ------------*/
/*------------ 新視野行銷專案團隊 ------------*/
.sect-team {
    position: relative;
    padding: 0;
    z-index: unset;
}
.sect-team::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 1920px;
    height: 218px;
    background: url("../../images/aeo/sect_team_circle.webp") no-repeat 50% 50%;
    background-size: contain;
}
.team_title {
    text-align: center;
}
.team_title .title {
    margin: 0 0 30px;
    font-size: 60px;
    font-weight: bold;
    line-height: 1.2;
}
.team_title .title span {
    display: inline-block;
    background: linear-gradient(to right, #5AC995 0%, #438BC0 50%, #8B5BBF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.team_list {
    position: relative;
    z-index: 3;
}
.team_list .item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 -12px;
}
.team_list .box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: calc(100% / 4 - 43px);
    margin: 0 21.5px;
    padding: 67.75px 0;
    border-radius: 100%;
    background: linear-gradient(to bottom, #fff 0%, #F0F0F0 100%);
}
.team_list .box:nth-of-type(2),
.team_list .box:nth-of-type(3) {
    margin-top: 47px;
}
.team_list .box .num {
    font-weight: bold;
    font-size: 60px;
    color: #5AC995;
}
.team_list .box i {
    font-style: unset;
    font-weight: bold;
    font-size: 60px;
    color: #5AC995;
}
.team_list .box h3 {
    font-size: 30px;
    font-weight: 500;
}
/*------------ /新視野行銷專案團隊 ------------*/
/*------------ 帶來哪些AEO價值 ------------*/
.sect-value {
    position: relative;
    padding: 128px 0 60px;
    z-index: 2;
}
.sect-value::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    background: #fff;
    z-index: -1;
}
.value_list {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.value_list .item_left {
    width: calc(100% - 672px);
}
.value_list .item_left .title {
    position: relative;
    margin: 0 0 30px;
    font-size: 60px;
    font-weight: bold;
    line-height: 1.2;
    width: fit-content;
    z-index: 1;
}
.value_list .item_left .title::before {
    content: '';
    position: absolute;
    top: -65px;
    left: -75px;
    width: 167px;
    height: 141px;
    background: url("../../images/aeo/sect_value_start.webp") no-repeat;
    background-size: contain;
    z-index: -1;
}
.value_list .item_left .title span.title_1 {
    display: inline-block;
    background: linear-gradient(to right, #5AC995 0%, #438BC0 50%, #8B5BBF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.value_list .item_left .title span.title_2 {
    color: #59C994;
}
.value_list li {
    padding-left: 35px;
}
.value_list li+li {
    padding-top: 20px;
}
.value_list li h3 {
    position: relative;
    font-size: 24px;
    font-weight: 500;
    margin: 0;
}
.value_list li h3::before {
    content: '';
    position: absolute;
    top: 7px;
    left: -30px;
    width: 24px;
    height: 23px;
    background: url("../../images/aeo/sect_feature_ic.webp") no-repeat;
    background-size: contain;
}
.value_list li span {
    font-size: 16px;
    letter-spacing: 0;
    color: #999999;
}
.value_list .item_right {
    width: 100%;
    max-width: 672px;
    padding-left: 79px;
    margin-right: -103px;
}
.value_list .item_right .pic {
    position: relative;
}
.value_list .item_right .pic .pic_box_all {
    position: relative;
    animation: planetFloat 5s ease-in-out infinite;
}
.value_list .pic_box_all .pic_box{
    position: absolute;
    opacity: 1;
    z-index: 1;
}
.value_list .pic_box_all .pic_box_1{
    bottom: 90px;
    right: 150px;
}
.value_list .pic_box_all .pic_box_2{
    bottom: 240px;
    left: 15px;
}
.value_list .pic_box_all .pic_box_3{
    bottom: 15px;
    right: 270px;
}
.value_list .item_right .pic_txt_all {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
}
.value_list .item_right .pic_txt.pic_txt_1 {
    position: absolute;
    top: 0;
    left: 75px;
    display: inline-block;
    animation: dialogBox 3s 0.5s ease-in-out infinite forwards alternate;
}
.value_list .item_right .pic_txt.pic_txt_1 .txt {
    display: block;
    color: #999999;
    padding: 60px 29.5px 70px;
    border-radius: 50vw;
    background: #F0F0F0;
}
.value_list .pic_txt.pic_txt_1 .txt span {
    font-size: 20px;
    letter-spacing: 0.8px;
}
.value_list .pic_txt.pic_txt_1 .txt h3 {
    font-size: 30px;
    letter-spacing: 0.8px;
}
.value_list .pic_txt.pic_txt_1 .txt h3 span {
    font-size: 30px;
    color: #448CBF;
}
.value_list .pic_txt.pic_txt_1 .chattri {
    position: absolute;
    left: 85px;
    bottom: -38px;
    width: 80px;
    height: auto;
}
.value_list .pic_txt.pic_txt_1 .chattri path {
    fill:#F0F0F0;
}
.value_list .item_right .pic_txt.pic_txt_2 {
    position: absolute;
    top: 265px;
    left: 10px;
    width: 178px;
    height: 125px;
    animation: dialogBox 3s 1s ease-in-out infinite forwards alternate;
}
.value_list .item_right .pic_txt.pic_txt_3 {
    position: absolute;
    top: 350px;
    right: -100px;
    width: 189px;
    height: 133px;
    animation: dialogBox 3s 1.5s ease-in-out infinite forwards alternate;
}
.value_list .pic_box_all_m {
    display: none;
}
/*------------ /帶來哪些AEO價值 ------------*/
/*------------ 四大承諾 ------------*/
.sect-promise {
    position: relative;
    padding: 0 0 80px;
    z-index: 2;
}
.sect-promise::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    background: #fff; 
    z-index: -1;
}
.promise_title {
    text-align: center;
    margin: 0 0 40px;
}
.promise_title .title {
    font-size: 30px;
    font-weight: 600;
}
.promise_title .title span {
    font-weight: 500;
    color: #BD3733;
    padding-right: 10px;
}
.promise_list .item {
    display: flex;
    align-items: stretch;
    margin: 0 -48px;
}
.promise_list .box {
    box-sizing: border-box;
    width: calc(100% / 4 - 24px);
    background: #F4F4F4;
    border-radius: 20px;
    padding: 10px;
    margin: 0 12px;
}
.promise_list .box h3 {
    position: relative;
    padding: 0 0 0 30px;
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 600;
    color: #666;
}
.promise_list .box h3::before {
    content: '';
    position: absolute;
    top: -7px;
    left: -3px;
    width: 26px;
    height: 30px;
    background: url("../../images/aeo/sect_promise_ic.webp") no-repeat;
    background-size: contain;
}
.promise_list .box p {
    margin: 0;
    font-size: 13px;
    letter-spacing: 0;
    line-height: 1.3;
    color: #999;
}
.promise_list .box p span {
    color: #666;
}
/*------------ /四大承諾 ------------*/
/*------------ 搜尋時代與習慣正在發生改變 ------------*/
.sect-recommend {
    position: relative;
    padding: 0 0 47px;
    z-index: 2;
}
.sect-recommend::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    background: #fff;
    z-index: -1;
}
.recommend_title {
    text-align: center;
}
.recommend_title .title {
    margin: 0 0 40px;
    font-size: 60px;
    font-weight: bold;
    line-height: 1.2;
}
.recommend_title .title span.title_1 {
    color: #8B59BF;
}
.recommend_title .title span.title_2 {
    color: #3D83B6;
}
.recommend_title p {
    font-size: 30px;
    font-weight: 500;
}
.recommend_title p span {
    color: #3FBF85;
}
.sect-recommend .btn {
    margin: 40px 0 0;
}
.sect-recommend .btn a {
    display: block;
    text-align: center;
    width: 256px;
    height: 67px;
    line-height: 67px;
    border-radius: 67px;
    font-size: 26px;
    color: #fff;
    transition: all 0.3s ease;
    background: linear-gradient(to right, #3D83B6, #8B5BBF, #3D83B6, #8B5BBF, #3D83B6, #8B5BBF);
    background-size: 400%;
}
.sect-recommend .btn a:hover {
    -webkit-animation: grahover 4s linear infinite;
    animation: grahover 4s linear infinite;
}
/*------------ /搜尋時代與習慣正在發生改變 ------------*/
/*------------ AEO行銷方案 ------------*/
.sect-plan {
    position: relative;
    padding: 0 0 60px;
    z-index: 2;
}
.sect-plan::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    background: #fff;
    z-index: -1;
}
.plan_list {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0 0 64px;
}
.plan_list .item_left {
    position: relative;
    width: 100%;
    max-width: 831px;
    padding-left: 100px;
    margin-right: -62px;
    z-index: 2;
}
.plan_list .item_right {
    position: relative;
    width: 100%;
    max-width: 396px;
    padding-right: 36px;
    padding-bottom: 30px;
    z-index: 1;
}
.plan_list .item_right .pic_txt {
    position: absolute;
    left: -25px;
    top: 188px;
}
.plan_list .item_right .pic_txt .circle {
    width: 245px;
    height: 100px;
}
.plan_list .item_right .pic_txt .circle path {
    fill: none;
    stroke: rgb(255, 153, 153, 0.8);
    stroke-width: 3;
    stroke-linecap: round;
}
.plan_title {
    text-align: center;
}
.plan_title p {
    font-size: 28px;
    font-weight: 500;
}
.plan_title p span {
    color: #40BF85;
}
/*------------ /AEO行銷方案 ------------*/
/*------------ 企業品牌 ------------*/
.sect-brand {
    position: relative;
    padding: 0 0 68px;
    z-index: 2;
}
.sect-brand::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 32%;
    background: #fff;
    z-index: -1;
}
.brand_list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 68px;
    margin: 0 -20px;
}
.brand_list .item {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: calc(100% / 3);
    padding: 0 20px;
    border-radius: 15px;
}
.brand_list .box {
    position: relative;
    box-sizing: border-box;
    padding: 40% 40px 45px;
    color: #fff;
    overflow: hidden;
    border-radius: 15px;
}
.brand_list .box a {
    font-size: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 30;
}
.brand_list .box .pic {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    border-radius: 15px;
    z-index: -1;
}
.brand_list .box .pic img{
    display: block;
    width: 100%;
    object-fit: cover;
    height: 100% !important;
    max-width: inherit;
    transition: all .5s ease;
}
.brand_list .box:hover .pic img{
    transform: scale(1.2);
}
.brand_list .box h2 {
    position: relative;
    text-align: center;
    font-size: 24px;
    font-weight: 500;
}
.brand_list .box h2::after {
    content: '';
    position: relative;
    display: block;
    width: 52px;
    height: 5px;
    background: #fff;
    margin: 20px auto;
}
.brand_list .box p {
    font-size: 16px;
    letter-spacing: 0;
    height: 100px;
}
.brand_title {
    text-align: center;
}
.brand_title p {
    font-size: 28px;
    font-weight: 400;
}
.brand_title p span {
    color: #40BF85;
}
/*------------ /企業品牌 ------------*/
/*------------ 台北台中網頁最高評價就是新視野 ------------*/
.sect-photo {
    position: relative;
    padding: 0 0 100px;
    margin: 0 -266.5px;
    z-index: 2;
}
.sect-photo .container {
    max-width: 1763px;
}
/*------------ /台北台中網頁最高評價就是新視野 ------------*/
/*------------ 方案介紹_AEO方案相關 ------------*/
.sect-faq{
    position: relative;
    padding: 0 0 80px;
    z-index: 2;
}
.faq-title {
    text-align: center;
    margin: 0 0 40px;
}
.faq-title .title {
    margin: 0 0 40px;
    font-size: 60px;
    font-weight: bold;
    line-height: 1.2;
}
.faq-title .title span {
    color: #59C994;
}
.faq-title p {
    margin: 40px 0 0;
    font-size: 30px;
    font-weight: 500;
}
.faq-title .btn {
    display: flex;
    justify-content: center;
    margin: 56px auto 0;
}
.faq-title .btn a {
    display: block;
    text-align: center;
    width: 256px;
    height: 67px;
    line-height: 67px;
    border-radius: 67px;
    font-size: 26px;
    color: #fff;
    background: #BD3733;
    transition: all 0.3s ease;
}
.faq-title .btn a:hover {
    color: #fff;
    background: #8a3330;
}
.faq-sort-all {
    margin: 0 -10px;
    padding: 0 0 40px;
}
.faq-sort-all li {
    width: calc(100% / 4 - 20px);
    margin: 0 10px;
    text-align: center;
    font-size: 20px;
    background: #FFFFFF;
    border: 1px solid #EFEFF0;
    border-radius: 20px;
}
.faq-sort-all li a{
    display: block;
    padding: 20px;
    background: linear-gradient(to right, #5AC995 0%, #438BC0 50%, #8B5BBF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.sect-faq .faq-sort+.faq-sort {
    margin: 40px 0 0;
}
.faq-sort .title {
    position: relative;
    font-size: 24px;
    font-weight: bold;
    color: #262C31;
    padding: 0 0 0 45px;
    margin: 0 0 15px;
}
.faq-sort .title::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 7px;
    width: 26px;
    height: 30px;
    background: url("../../images/aeo/sect_promise_ic.webp") no-repeat;
    background-size: contain;
}
.sect-faq .faq-item {
    margin-bottom: 0;
    position: relative;
    background: #fff;
    border-radius: 20px;
    border: 1px solid #EFEFF0;
}
.sect-faq .faq-item+.faq-item {
    margin: 15px 0 0;
}
.sect-faq .faq-question {
    position: relative;
    cursor: pointer;
    padding: 20px 42px 20px 58px;
}
.sect-faq .name{
    position: relative;
    color: #262C31;
    font-size: 18px;
    font-weight: normal;
    letter-spacing: 1px;
}
.sect-faq .name:before{
    content: "Q";
    position: absolute;
    left: -35px;
    top: 0;
    font-size: 30px;
    font-weight: normal;
    line-height: 1;
    color: #999;
    font-family: 'Roboto', sans-serif;
}
.sect-faq .faq-question:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 8px 7px 8px;
    border-color: transparent transparent #999 transparent;
    position: absolute;
    top: 30px;
    right: 42px;
    transform: rotate(180deg);
    transition: all 0.3s ease;
}
.sect-faq .faq-item.active .faq-question:before {
    transform: rotate(0deg);
}
.sect-faq .faq-answer {
    display: none;
    position: relative;
    border-radius: 18px;
}
.sect-faq .faq-answer .editor {
    font-size: 16px;
    padding: 0 40px 30px 58px;
    min-height: 40px;
}
.sect-faq .faq-answer .answer-strong {
    font-weight: bold;
}
.sect-faq .faq-answer .answer-list {
    margin-top: 10px;
    margin-bottom: 10px;
    padding-left: 10px;
    list-style: none;
}
.sect-faq .faq-answer .answer-list li{
    padding-left: 30px;
    position: relative;
}
.sect-faq .faq-answer .answer-list li:before{
    content: "";
    width: 5px;
    height: 5px;
    position: absolute;
    border-radius: 50%;
    background: #787878;
    left: 14px;
    top: 8px;
}
.sect-faq .faq-answer .answer-color-1{
    position: relative;
    font-weight: bold;
    margin: 20px 0 0;
    padding: 0 0 0 15px;
    display: inline-block;
    background: linear-gradient(to right, #5AC995 0%, #438BC0 50%, #8B5BBF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.sect-faq .faq-answer .answer-color-1::before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 6px 10px 6px;
    border-color: transparent transparent #5AC995 transparent;
    position: absolute;
    top: 7px;
    left: 0;
    transform: rotate(90deg);
    transition: all 0.3s ease;
}
/*------------ /AEO方案相關 ------------*/
/*------------ 新視野能為您打造AEO優勢 ------------*/
.sect-advantages {
    position: relative;
    padding: 0 0 40px;
    z-index: 2;
}
.advantages_title {
    text-align: center;
}
.advantages_title .title {
    margin: 0 0 40px;
    font-size: 60px;
    font-weight: bold;
    line-height: 1.2;
}
.advantages_title .title span.title_1 {
    display: inline-block;
    background: linear-gradient(to right, #5AC995 0%, #438BC0 50%, #8B5BBF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.advantages_title .title span.title_2 {
    color: #59C993;
}
.advantages_list .item {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 -15px;
}
.advantages_list .box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: calc(100% / 3 - 102px);
    margin: 0 15px 40px;
    border: 1px solid #DADADA;
    border-radius: 15px;
    background: #fff;
    padding: 74.8px 35px;
}
.advantages_list .box .pic {
    margin: 0 auto 10px;
}
.advantages_list .box h3 {
    font-size: 24px;
    font-weight: 500;
    margin: 0 0 10px;
}
.advantages_list .box p {
    font-size: 16px;
    letter-spacing: 0;
    line-height: 1.8;
    color: #999;
}
/*------------ /新視野能為您打造AEO優勢 ------------*/
/*------------ 立刻開始用AEO佈局未來 ------------*/
.sect-start {
    position: relative;
    padding: 0 0 90px;
    z-index: 2;
}
.start_title {
    text-align: center;
}
.start_title .title {
    margin: 0 0 30px;
    font-size: 60px;
    font-weight: bold;
    line-height: 1.2;
}
.start_title .title span {
    color: #805FBE;
}
.start_title p {
    font-size: 30px;
    font-weight: 500;
}
.start_title p span {
    color: #41C085;
}
.sect-start .btn {
    display: flex;
    justify-content: center;
    margin: 56px auto 0;
}
.sect-start .btn a {
    display: block;
    text-align: center;
    width: 256px;
    height: 67px;
    line-height: 67px;
    border-radius: 67px;
    font-size: 26px;
    color: #fff;
    background: linear-gradient(to right, #3D83B6 0%, #8B5BBF 100%);
    transition: all 0.3s ease;
    background: linear-gradient(to right, #3D83B6, #8B5BBF, #3D83B6, #8B5BBF, #3D83B6, #8B5BBF);
    background-size: 400%;
}
.sect-start .btn a:hover {
    -webkit-animation: grahover 4s linear infinite;
    animation: grahover 4s linear infinite;
}
/*------------ /立刻開始用AEO佈局未來 ------------*/
/*------------ rwd ------------*/
@media screen and (min-width: 1061px) {
    .site-main.top-fixed .menu-box {
        position: fixed;
        z-index: 5;
        right: 150px;
        display: flex;
        flex-direction: column;
        width: 40px;
        left: unset;
        box-shadow: unset;
        background: transparent;
        top: 12%;
    }
    .site-main.top-fixed .menu-box .tablinks {
        width: 100%;
        height: unset;
        line-height: 40px;
        font-size: 18px;
        -webkit-writing-mode: vertical-lr;
        writing-mode: vertical-lr;
        margin-bottom: 20px;
        color: #000;
        font-weight: normal;
        letter-spacing: 2px;
        border: 1px solid #000;
        padding-top: 10px;
        padding-bottom: 8px;
        border-radius: 5px;
        background: #FFF;
        line-height: 2;
        text-shadow: unset;
    }
    .site-main.top-fixed .menu-box .tablinks.active,
    .site-main.top-fixed .menu-box .tablinks:hover {
        color: #26629D;
        border: 1px solid #26629D;
    }
    .site-main.top-fixed .menu-box .tablinks+.tablinks:before {
        display: none; 
    }
}
@media screen and (max-width: 1700px) {
    .site-main.top-fixed .menu-box {
        right: 23px;
        top: 120px;
    }
}
@media screen and (max-width: 1500px) {
    .main-box {
        overflow: hidden;
    }
}
@media screen and (max-width: 1440px) {
    .tab {
        padding-left: 15px;
        padding-right: 15px;
    }
}
@media screen and (max-width: 1300px) {
    .story_list {
        align-items: flex-start;
    }
    .planet_animation {
        width: 1200px;
        height: 600px;
        top: 70%;
    }
    .sect-faqqa .container {
        padding-right: 15px;
        max-width: 1300px;
        margin-left: auto;
    }
    .webai_list .item_left .pic_txt.pic_txt_1 {
        left: 33px;
    }
    .webai_list .item_left .pic_txt.pic_txt_2 {
        top: 110px;
        left: unset;
        right: 70px;
    }
    .webai_list .item_left .pic_txt.pic_txt_3 {
        left: unset;
        right: 0;
    }
    .dosee_list {
        margin: 0;
    }
    .dosee_list .box .txt p,
    .dosee_list .box .txt span {
        font-size: 14px;
    }
    .feature_list .head_left::before {
        top: 50%;
        transform: translateY(-50%);
        left: 0;
        width: 100px;
        height: 84px;
        z-index: -1;
    }
    .faq-sort-all {
        margin: 0 -5px;
    }
    .faq-sort-all li {
        width: calc(100% / 4 - 10px);
        margin: 0 5px;
        font-size: 18px;
        border-radius: 10px;
    }
    .plan_list .item_left {
        padding-left: 36px;
    }
    .sect-photo {
        padding: 0 0 40px;
        margin: 0;
    }
}
@media screen and (max-width: 1200px) {
    .aio_list .txt p {
        font-size: 20px;
    }
    .faqqa_list .txt p {
        font-size: 20px;
    }
    .dosee_list .box {
        flex-direction: column;
        padding: 10px;
        width: calc(100% / 2 - 10px);
        margin: 0 5px 10px;
    }
    .dosee_list::before {
        top: calc(50% - 5px);
        left: 50%;
        width: 34px;
        height: 34px;
    }
    .dosee_list .box .txt {
        width: 100%;
        padding: 15px 0 0;
    }
    .webai_list .item_left .pic_txt span {
        font-size: 25px;
    }
    .webai_list .item_right .pic_txt span {
        font-size: 35px;
    }
    .webai_list .item_left .pic_txt.pic_txt_2 {
        top: 100px;
        right: 80px;
    }
    .webai_list .item_left .pic_txt.pic_txt_3 {
        top: 200px;
    }
    .webai_list .item_left {
        width: 60%;
        max-width: unset;
    }
    .webai_list .item_right {
        padding: 0;
        width: 40%;
        max-width: unset;
    }
    .goo_list .item_right {
        width: 55%;
        max-width: unset;
        display: none;
    }
    .goo_list .item_right .pic_txt {
        top: -25px;
        left: 0;
    }
    .goo_list .item_right .pic_txt span {
        font-size: 25px;
        padding: 40px 120px 40px 57px;
    }
    .feature_list .head_left h2 {
        font-size: 25px;
    }
}
@media screen and (max-width: 1100px) {
    .tabcontent {
        padding-left: 15px;
        padding-right: 15px;
    }
    .webai_list .item_left .pic_txt.pic_txt_2 {
        top: 100px;
        right: 20px;
    }
    .goo_list .item_left {
        padding: 63px 25% 55px 63px;
    }
    .goo_list .item_right .pic_txt {
        top: -80px;
        left: 0;
    }
    .promise_list .box {
        width: calc(100% / 4 - 10px);
        margin: 0 5px;
    }
    .brand_list {
        margin: 0 -10px;
    }
    .brand_list .item {
        padding: 0 10px;
    }
}
@media screen and (max-width: 1060px) {
    .site-main.top-fixed .sect-tab-content {
        margin-top: 140px;
    }
    .menu-box {
        margin-left: -5px;
        margin-right: -5px;
        margin-bottom: 20px;
        flex-wrap: wrap;
        background: unset;
        border-radius: 0;
        justify-content: center;
        padding: 10px 0;
    }
    .menu-box .tablinks {
        height: 40px;
        line-height: 40px;
        font-size: 18px;
        margin-bottom: 10px;
        margin-left: 5px;
        margin-right: 5px;
        padding-bottom: 0;
        border-bottom: 2px solid #E6E6E6;
        padding-top: 0;
    }
    .menu-box .tablinks:nth-child(1),
    .menu-box .tablinks:nth-child(2),
    .menu-box .tablinks:nth-child(3) {
        width: calc(100% / 3 - 10px);
    }
    .menu-box .tablinks:nth-child(4),
    .menu-box .tablinks:nth-child(5) {
        width: calc(100% / 2 - 10px);
    }
    .menu-box .tablinks+.tablinks:before {
        left: -5px;
    }
    .menu-box .tablinks:after{
        content: "";
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 0;
        height: 2px;
        background: linear-gradient(to right, #438BC0, #E86060);
        transition: all 0.5s ease;
    }
    .menu-box .tablinks.active:after {
        width: 100%;
    }
    .menu-box .tablinks:nth-child(4):before {
        display: none;
    }
    .menu-box .menu-line{
        display: none;
    }
    .site-main.top-fixed .menu-box {
        position: fixed;
        left: 0;
        right: 0;
        box-shadow: 0px 5px 9px 0px #00000030;
        width: 100vw;
        background: #FFF;
        top: 61px;
        padding-top: 5px;
        padding-left: 5px;
        padding-right: 5px;
        box-sizing: border-box;
        z-index: 499;
        padding-bottom: 0;
        margin-left: 0;
        margin-right: 0;
    }
    .site-main.top-fixed .menu-box .tablinks {
        margin-bottom: 5px;
        margin-left: 5px;
        margin-right: 5px;
        height: 36px;
        line-height: 36px;
        padding-top: 0;
    }
}
@media screen and (max-width: 1000px) {
    .main-content {
        padding-bottom: 0;
        padding-top: 0;
    }
    .main-box {
        padding-top: 0;
        overflow: visible;
    }
    .menu-box {
        background: #fff;
        padding: 10px 15px;
        margin-left: -15px;
        margin-right: -15px;
    }
    .tab {
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 30px;
    }
    .tab .tablinks {
        height: 150px;
        padding-top: 54px;
        font-size: 16px;
    }
    .tabcontent {
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 30px;
    }
    section.content .row {
        flex-direction: column;
    }
    .sect-story {
        padding: 0 0 50px;
    }
    .story_list {
        flex-direction: column;
    }
    .story_list .item_left {
        padding-top: 0;
        margin: 0 auto;
    }
    .story_list .item_left .box {
        display: flex;
        flex-direction: column-reverse;
    }
    .story_list .box .txt {
        text-align: center;
        padding: 0 0 30px;
    }
    .story_list .box h1,
    .story_list .box h2 {
        width: fit-content;
        margin: 0 auto 5px;
    }
    .story_list .box p {
        font-size: 15px;
    }
    .story_list .item_right {
        margin: 0 auto 0;
    }
    .story_list .item_left .pic_txt,
    .story_list .item_right .pic_txt {
        animation: none;
    }
    .aeo_title {
        margin: 0 0 30px;
    }
    .aeo_list .item {
        flex-direction: column;
        max-width: unset;
    }
    .aeo_list .box {
        width: 100%;
        padding: 0;
    }
    .aeo_list .box+.box {
        padding: 30px 0 0;
    }
    .aeo_list .txt .title {
        font-size: 17px;
    }
    .planet_animation {
        display: none;
    }
    .sect-aio {
        padding: 0 0 50px;
    }
    .aio_list {
        flex-direction: column;
    }
    .aio_list .txt h2 {
        font-size: 35px;
    }
    .aio_list .item_left {
        text-align: center;
        width: 100%;
        padding: 0 0 30px;
    }
    .aio_list .item_right {
        width: 100%;
        margin: 0 auto;
    }
    .sect-faqqa {
        padding: 0 0 50px;
    }
    .faqqa_list {
        flex-direction: column;
    }
    .faqqa_list .txt h2 {
        font-size: 35px;
    }
    .faqqa_list .item_left {
        text-align: center;
        width: 100%;
        max-width: unset;
        padding: 0 0 30px;
        margin: 0 auto;
    }
    .faqqa_list .item_right {
        width: 100%;
        padding: 0;
    }
    .faqqa_list .item_right .txt {
        text-align: center;
    }
    .faqqa_list .pic {
        padding: 20px 0 0;
        margin: 0;
    }
    .faqqa_list .item_right .pic,
    .faqqa_list .item_right .pic img {
        border-radius: 0;
    }
    .faqqa_list .btn {
        margin: 20px auto 0;
        display: flex;
        justify-content: center;
    }
    .sect-webaigoo {
        padding: 0 0 50px;
    }
    .sect-webaigoo::before {
        height: 100%;
    }
    .webai_list {
        flex-direction: column;
    }
    .webai_list .item_left {
        margin: 0;
        width: 100%;
        max-width: 798px;
    }
    .webai_list .item_left .pic_txt.pic_txt_1 {
        left: unset;
        right: 200px;
        animation: none;
    }
    .webai_list .item_left .pic_txt.pic_txt_2 {
        right: 100px;
        animation: none;
    }
    .webai_list .item_left .pic_txt.pic_txt_3 {
        animation: none;
    }
    .webai_list .item_right {
        padding: 0;
        margin: -150px 0 0 auto;
        width: 100%;
        max-width: 518px;
        z-index: 2;
    }
    .webai_list .item_right .pic_txt_w_1,
    .webai_list .item_right .pic_txt_w_2 {
        animation: none;
    }
    .goo_list {
        box-sizing: border-box;
        margin: -100px 0 0;
        flex-direction: column;
        width: 100%;
        background: #fff;
        padding: 30px 30px 0;
        border-radius: 15px;
        box-shadow: 0 0 20px rgb(0 0 0 / 10%);
    }
    .goo_list .item_left {
        padding: 0 0 30px;
        background: transparent;
        border-radius: 0;
        box-shadow: unset;
    }
    .goo_list .txt .title {
        text-align: center;
    }
    .goo_list .txt .box {
        display: flex;
        align-items: center;
    }
    .goo_list .txt .box {
        display: flex;
        align-items: center;
        flex-direction: column;
    }
    .goo_list .txt .box h3 {
        width: 100%;
    }
    .goo_list .txt .box p {
        width: 100%;
    }
    .goo_list .item_right {
        position: relative;
        width: 100%;
        max-width: 830px;
    }
    .goo_list .item_right .pic_txt {
        top: 0;
        width: 100%;
    }
    .dosee_title {
        margin: 0 0 20px;
    }
    .sect-feature {
        padding: 0 0 50px;
    }
    .sect-promise {
        padding: 0 0 30px;
    }
    .promise_title {
        margin: 0 0 30px;
    }
    .promise_list .item {
        flex-wrap: wrap;
        margin: 0;
    }
    .promise_list .box {
        width: calc(100% / 2 - 10px);
        margin: 0 5px 30px;
    }
    .feature_list {
        overflow-x: auto;
        position: relative;
    }
    .feature_list .feature_item {
        grid-template-columns: 24% repeat(4, 19%);
        min-width: 1000px;
    }
    .feature_list .cell {
        padding: 5px 10px;
        font-size: 15px;
    }
    .feature_list .head_left .circle {
        letter-spacing: 0.6px;
    }
    .feature_list .head_left .circle::before {
        width: 45px;
        height: 45px;
    }
    .feature_list .plan {
        padding: 15px 10px;
    }
    .feature_list .plan .price {
        margin: 0;
        font-size: 18px;
    }
    .feature_list .plan .btn a {
        width: 94px;
        height: 27px;
        line-height: 27px;
        font-size: 13px;
    }
    .feature_list .feature{
        position: sticky;
        left: 0;
        padding: 5px 10px 5px 15px;
        z-index: 2;
    }
    .feature_list .feature h4::before {
        left: -15px;
        width: 12px;
        height: 11px;
    }
    .feature_list .head_left {
        position: sticky;
        left: 0;
        z-index: 2;
    }
    .feature_list .feature::after {
        content: "";
        position: absolute;
        top: 0;
        right: -6px;
        width: 6px;
        height: 100%;
        background: linear-gradient(to right, rgba(0,0,0,0.08), transparent);
    }
    .sect-faq {
        padding: 0 0 50px;
    }
    .faq-title {
        margin: 0 0 20px;
    }
    .sect-faq .name {
        font-size: 16px;
    }
    .sect-faq .name:before {
        font-size: 22px;
    }
    .sect-faq .faq-question {
        padding: 15px 30px 15px 35px;
    }
    .sect-faq .faq-answer .editor {
        padding: 0 30px 30px 35px;
    }
    .sect-faq .name:before {
        left: -25px;
        top: 0;
    }
    .sect-faq .faq-item{
        border-radius: 10px;
    }
    .sect-faq .faq-question:before {
        top: 19px;
        right: 15px;
        font-size: 18px;
        line-height: 18px;
    }
    .sect-faq .faq-item+.faq-item {
        margin: 15px 0 0;
    }
    .faq-sort-all {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        padding: 0 0 50px;
    }
    .sect-faq .faq-sort+.faq-sort {
        margin: 50px 0 0;
    }
    .faq-sort-all li a {
        padding: 10px;
    }
    .sect-team {
        padding: 0;
    }
    .sect-team::before {
        width: 1000px;
        height: 114px;
    }
    .team_list .item {
        justify-content: center;
        margin: 0;
    }
    .team_list .box {
        width: 150px;
        height: 150px;
        margin: 0 10px;
        padding: unset;
    }
    .team_list .box:nth-of-type(2),
    .team_list .box:nth-of-type(3) {
        margin-top: 20px;
    }
    .sect-value {
        padding: 50px 0;
    }
    .value_list {
        flex-direction: column;
    }
    .value_list .item_left {
        width: 100%;
        padding: 0 0 30px;
    }
    .value_list li {
        padding-left: 15px;
    }
    .value_list .item_right {
        width: 100%;
        max-width: unset;
        padding-left: 0;
        margin-right: unset;
    }
    .value_list .item_right .pic .pic_box_all {
        animation: none;
        display: none;
    }
    .value_list .pic_box_all_m {
        display: block;
    }
    .value_list .item_right .pic_txt.pic_txt_1 {
        animation: none;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
    }
    .value_list .item_right .pic_txt.pic_txt_1 .txt {
        padding: 10px 20px;
    }
    .value_list .pic_txt.pic_txt_1 .chattri {
        left: calc(100% - 60%);
        width: 55px;
        bottom: -25px;
    }
    .sect-advantages {
        padding: 0 0 30px;
    }
    .advantages_list .item {
        margin: 0 -10px;
    }
    .advantages_list .box {
        width: calc(100% / 2 - 92px);
        margin: 0 10px 20px;
        padding: 35px;
    }
    .advantages_list .box .pic {
        width: 80px;
    }
    .sect-recommend .btn{
        margin: 20px auto 0;
    }
    .sect-recommend .btn a {
        width: 200px;
        height: 50px;
        line-height: 50px;
        border-radius: 50px;
        font-size: 18px;
    }
    .sect-plan {
        padding: 0 0 50px;
    }
    .plan_list {
        padding: 0 0 30px;
        flex-direction: column;
    }
    .plan_list .item_left {
        padding: 0;
        margin: 0 auto;
    }
    .plan_list .item_right {
        text-align: center;
        padding: 100px 0 15px;
        margin: -80px auto 0;
        background: #fff;
        border-radius: 20px;
        max-width: 396px;
    }
    .plan_list .item_right .pic_txt {
        left: 25%;
        top: 63%;
        transform: translate(-50%, -50%);
    }
    .plan_list .item_right .pic_txt .circle {
        width: 170px;
        height: 80px;
    }
    .sect-brand {
        padding: 0 0 50px;
    }
    .brand_list {
        padding: 0 0 30px;
    }
    .brand_list .box {
        padding: 40% 20px 30px;
    }
    .sect-photo {
        padding: 0 0 40px;
    }
    .sect-start {
        padding: 0 0 50px;
    }
    /*文字優化*/
    .story_list .item_left .pic_txt span {
        font-size: 15px;
        padding: 10px 15px;
        border-radius: 10px;
    }
    .story_list .item_right .pic_txt span {
        font-size: 18px;
        padding: 10px 15px;
    }
    .story_list .box h1,
    .story_list .box h2{
        font-size: 22px;
        padding: 0;  
    }
    .story_list .btn {
        margin: 20px 0 0;
    }
    .story_list .btn a {
        width: 200px;
        height: 50px;
        line-height: 50px;
        border-radius: 50px;
        font-size: 18px;
    }
    .aeo_title h2 {
        font-size: 22px;
        padding: 0;
    }
    .aeo_title h2::before {
        width: 30px;
        height: 30px;
    }
    .aeo_title p{
        font-size: 15px;
    }
    .aio_list .txt p{
        font-size: 15px;
    }
    .aio_list .txt h2{
        font-size: 30px;
    }
    .faqqa_list .btn a {
        width: 200px;
        height: 50px;
        line-height: 50px;
        border-radius: 50px;
        font-size: 18px;
    }
    .faqqa_list .txt h2 {
        font-size: 30px;
    }
    .faqqa_list .txt p {
        font-size: 15px;
    }
    .dosee_list .box .txt h3 {
        font-size: 18px;
    }
    .dosee_list .box .txt .price {
        font-size: 25px;
    }
    .dosee_list .box .btn {
        margin: 15px 0 0;
    }
    .dosee_list .box .btn a {
        width: 100%;
        height: 35px;
        line-height: 35px;
        font-size: 15px;
    }
    .webai_list .item_left .pic_txt span {
        font-size: 20px;
        padding: 10px 15px;
    }
    .webai_list .item_left .pic_txt .chattri {
        left: 40px;
        bottom: -18px;
        width: 40px;
    }
    .webai_list .item_left .pic_txt.pic_txt_1 {
        left: unset;
        right: 100px;
        top: 0;
    }
    .webai_list .item_left .pic_txt.pic_txt_2 {
        left: unset;
        right: 50px;
        top: 70px;
    }
    .webai_list .item_left .pic_txt.pic_txt_3 {
        left: unset;
        right: 0;
        top: 140px;
    }
    .webai_list .item_left .pic_txt span {
        font-size: 15px;
    }
    .webai_list .item_right .pic_txt span {
        font-size: 18px;
        padding: 10px 20px;
    }
    .webai_list .item_right .pic_txt .chattri {
        right: 20px;
        bottom: -17px;
        width: 40px;
    }
    .goo_list .txt .title {
        font-size: 20px;
    }
    .goo_list .txt .box h3,
    .goo_list .txt .box p {
        font-size: 16px;
    }
    .goo_list .item_right .pic_txt span {
        font-size: 18px;
        padding: 10px 20px;
        border-radius: 15px;
    }
    .goo_list .item_right .pic_txt .chattri {
        right: calc(100% - 60%);
        width: 55px;
        bottom: -25px;
    }
    .dosee_title h2 {
        font-size: 22px;
    }
    .dosee_title p {
        font-size: 20px;
    }
    .feature_list .head_left h2 {
        font-size: 20px;
    }
    .feature_list .plan h3 {
        font-size: 18px;
    }
    .feature_list .feature h4 {
        font-size: 15px;
    }
    .feature_list .feature span {
        font-size: 12px;
    }
    .promise_title .title {
        font-size: 20px;
    }
    .promise_list .box h3 {
        font-size: 16px;
    }
    .faq-title .title {
        font-size: 24px;
        margin: 0 0 20px;
    }
    .faq-title p {
        font-size: 16px;
    }
    .faq-title .btn {
        margin: 30px auto 0;
    }
    .faq-title .btn a {
        width: 200px;
        height: 50px;
        line-height: 50px;
        border-radius: 50px;
        font-size: 18px;
    }
    .faq-sort .title {
        font-size: 18px;
        padding: 0 0 0 30px;
    }
    .faq-sort .title::before {
        top: -2px;
        left: -3px;
    }
    .faq-sort-all li {
        width: calc(100% / 2 - 10px);
        margin: 0 5px 10px;
    }
    .faq-sort-all li a {
        font-size: 16px;
        height: calc(100% - 20px);
    }
    .sect-faq .faq-answer .editor {
        font-size: 15px;
    }
    .sect-faq .faq-answer .answer-color-1::before {
        font-size: 20px;
        line-height: 20px;
    }
    .team_title .title {
        font-size: 24px;
        margin: 0 0 20px;
    }
    .team_list .box .num,
    .team_list .box i {
        font-size: 24px;
    }
    .team_list .box h3 {
        font-size: 18px;
    }
    .value_list .item_left .title {
        margin: 0 auto 20px;
        font-size: 24px;
        width: auto;
    }
    .value_list .item_left .title::before {
        top: 50%;
        transform: translateY(-50%);
        left: -50px;
        width: 100px;
        height: 84px;
        z-index: -1;
    }
    .value_list li h3 {
        font-size: 20px;
    }
    .value_list li span {
        font-size: 14px;
    }
    .value_list li h3::before {
        left: -15px;
        width: 12px;
        height: 11px;
        top: 10px;
    }
    .value_list .pic_txt.pic_txt_1 .txt span {
        font-size: 15px;
        letter-spacing: 0.8px;
    }
    .value_list .pic_txt.pic_txt_1 .txt h3,
    .value_list .pic_txt.pic_txt_1 .txt h3 span {
        font-size: 18px;
    }
    .value_list .item_right .pic_txt.pic_txt_2 {
        animation: none;
        top: 90px;
        width: 125px;
        height: 88px;
    }
    .value_list .item_right .pic_txt.pic_txt_2 img{
        width: 125px;
        height: 88px;
    }
    .value_list .item_right .pic_txt.pic_txt_3 {
        animation: none;
        top: 100px;
        right: 0;
        width: 100px;
        height: 70px;
    }
    .value_list .item_right .pic_txt.pic_txt_3 img {
        width: 100px;
        height: 70px;
    }
    .advantages_title .title {
        font-size: 24px;
        margin: 0 0 20px;
    }
    .advantages_list .box h3 {
        font-size: 16px;
    }
    .advantages_list .box p {
        font-size: 14px;
    }
    .recommend_title .title,
    .start_title .title {
        margin: 0 0 20px;
        font-size: 24px;
    }
    .recommend_title p,
    .plan_title p,
    .brand_title p,
    .start_title p {
        font-size: 16px;
    }
    .brand_list .box h2 {
        font-size: 18px;
    }
    .brand_list .box p {
        font-size: 14px;
        height: 120px;
    }
    .sect-start .btn{
        margin: 20px auto 0;
    }
    .sect-start .btn a {
        width: 200px;
        height: 50px;
        line-height: 50px;
        border-radius: 50px;
        font-size: 18px;
    }
    /*/文字優化*/
}
@media screen and (max-width: 767px) {
    .webai_list .item_left {
        margin: 0 auto 0 0;
        max-width: 585px;
    }
    .webai_list .item_right {
        margin: -100px 0 0 auto;
        max-width: 400px;
    }
    .goo_list .item_right {
        max-width: 585px;
    }
    .goo_list {
        padding: 30px 15px 0;
    }
    .webai_list .item_left .pic_txt.pic_txt_1 {
        right: 40px;
    }
    .webai_list .item_left .pic_txt.pic_txt_2 {
        right: 20px;
    }
    .dosee_list .box {
        flex-direction: row;
        width: calc(100% - 10px);
        margin: 0 0 10px;
    }
    .dosee_list .box .txt {
        padding: 0 0 0 15px;
    }
    .sect-promise {
        padding: 0 0 50px;
    }
    .promise_list .box {
        width: 100%;
        margin: 0 auto;
    }
    .promise_list .box+.box {
        margin: 30px auto 0;
    }
    .team_list .item {
        flex-wrap: wrap;
    }
    .team_list .box:nth-of-type(2),
    .team_list .box:nth-of-type(3) {
        margin-top: unset;
    }
    .advantages_list .box {
        width: 100%;
    }
    .brand_list {
        flex-wrap: wrap;
        justify-content: center;
    }
    .brand_list .item {
        width: calc(100% / 2);
        padding: 0 10px 20px;
    }
}
@media screen and (max-width: 760px) {
    .tab {
        flex-wrap: wrap;
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }
    .tab .tablinks {
        width: 110px;
        height: 100px;
        font-size: 15px;
        white-space: nowrap;
        margin-bottom: 8px;
        margin-left: 4px;
        margin-right: 4px;
    }
    .tab .tablinks:before,
    .tab .tablinks:after {
        margin-top: 10px;
    }
}
@media screen and (max-width: 667px) {
    .webai_list .item_right {
        margin: -80px 0 0 auto;
        max-width: 320px;
    }
    .webai_list .item_right .pic_txt.pic_txt_1 {
        top: 5px;
        left: 40px;
    }
    .webai_list .item_right .pic_txt.pic_txt_2 {
        top: 55px;
        left: 0;
    }
}
@media screen and (max-width: 500px) {
    .site-main.top-fixed .sect-tab-content {
        margin-top: 90px;
    }
    .menu-box .tablinks,
    .site-main.top-fixed .menu-box .tablinks {
        font-size: 15px;
        height: 30px;
        line-height: 30px;
        margin-left: 2px;
        margin-right: 2px;
        margin-bottom: 4px;
        letter-spacing: 1px;
    }
    .menu-box .tablinks:nth-child(1),
    .site-main.top-fixed .menu-box .tablinks:nth-child(1),
    .menu-box .tablinks:nth-child(2),
    .site-main.top-fixed .menu-box .tablinks:nth-child(2),
    .menu-box .tablinks:nth-child(3),
    .site-main.top-fixed .menu-box .tablinks:nth-child(3) {
        width: calc(100% / 3 - 4px);
    }
    .menu-box .tablinks:nth-child(4),
    .site-main.top-fixed .menu-box .tablinks:nth-child(4),
    .menu-box .tablinks:nth-child(5),
    .site-main.top-fixed .menu-box .tablinks:nth-child(5) {
        width: calc(100% / 2 - 4px);
    }
    .menu-box .tablinks+.tablinks:before {
        left: -3px;
    }
    .menu-box,
    .site-main.top-fixed .menu-box {
        padding-left: 5px;
        padding-right: 5px;
        padding-bottom: 0px;
        padding-top: 4px;
    }
    .dosee_list .box {
        flex-direction: column;
        width: 100%;
        margin: 0 0 10px;
        padding: 25px;
    }
    .dosee_list .box .txt {
        padding: 15px 0 0;
    }
    .dosee_list::before {
        display: none;
    }
}
@media screen and (max-width: 480px) {
    .story_list .item_left .pic_txt{
        top: 10px;
        right: 0;
    }
    .story_list .item_right .pic_txt {
        top: 100px;
    }
    .story_list .item_right .pic_txt span em {
        display: block;
    }
    .story_list .item_right .pic_txt .chattri {
        right: 25px;
        bottom: -18px;
        width: 40px;
    }
    .webai_list .item_right {
        margin: 0 0 0 auto;
        max-width: 275px;
    }
    .webai_list .item_right .pic_txt.pic_txt_1 {
        top: 5px;
        left: 55px;
    }
    .webai_list .item_right .pic_txt.pic_txt_2 {
        top: 92px;
        left: 0;
    }
    .webai_list .item_right .pic_txt_all {
        top: -30px;
        left: -35px;
    }
    .webai_list .item_left .pic_txt.pic_txt_1 {
        right: 10px;
    }
    .webai_list .item_left .pic_txt.pic_txt_2 {
        right: 5px;
    }
    .webai_list .item_right .pic_txt.pic_txt_1 {
        top: 50px;
    }
    .goo_list .item_right .pic_txt {
        position: relative;
        top: unset;
        left: unset;
    }
    .goo_list .item_right .pic_txt span {
        padding: 10px 15px;
    }
    .feature_list .feature_item {
        grid-template-columns: 18% repeat(4, 20.5%);
        min-width: 1000px;
    }
    .feature_list .head_left h2 span:not(.circle) {
        margin: 0 0 10px 10px;
        display: block;
    }
    .feature_list .head_left .circle {
        margin: 0 0 0 10px;
    }
    .brand_list .item {
        width: 100%;
        padding: 0 10px;
    }
    .brand_list .item+.item {
        padding-top: 20px;
    }
}
@media screen and (max-width: 389px) {
    .tab .tablinks:hover,
    .tab .tablinks.active {
        border: 2px solid #ED9B52;
        color: #ED9B52;
    }
    .tab .tablinks {
        margin-left: 2px;
        margin-right: 2px;
    }
    .tab .tablinks {
        width: 105px;
        font-size: 14px;
    }
    .tab {
        flex-wrap: nowrap;
    }
}