@charset "utf-8";

/* ===== editor.css ===== */
.editor-row{ margin-bottom:5px; float:none;}
.editor-row img{ max-width:100%; margin-bottom:3px;}
.clear{ clear:both;}
.clear:after,.editor-row:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

.two-column h2,.img-full h2{ margin:3px 0;}
.img-left h2,
.img-right h2,
.three-column h3,
.four-column h4,
.five-column h5,
.six-column h6
{ 	
	margin:0 0 3px 0;
}

/*文繞圖-圖靠左、右*/
.img-left img{ float:left; margin-right:5px; margin-bottom:5px;}
.img-right img{ float:right; margin-left:5px; margin-bottom:5px;}

.img-full img,
.two-column div img:first-child,
.three-column div img:first-child,
.fore-column div img:first-child,
.five-column div img:first-child,
.six-column div img:first-child
{
	max-width:100%;
        heigh:auto !important;
}

/*兩欄*/
.two-column-left,.two-column-right{
	float:left;
	width:49%;
	display:inline-block;
}
.two-column-left{ margin-right:2%;}

/*三欄*/
.three-column-left,.three-column-middle,.three-column-right{
	float:left;
	width:33%;
	display:inline-block;
}
.three-column-left,.three-column-middle{ margin-right:.5%;}

/*四欄*/
.four-column-1,.four-column-2,.four-column-3,.four-column-4{
	float:left;
	width:24.25%;
	display:inline-block;
}
.four-column-1,.four-column-2,.four-column-3{ margin-right:1%;}

/*五欄*/
.five-column-1,.five-column-2,.five-column-3,.five-column-4,.five-column-5{
	float:left;
	width:19.6%;
	display:inline-block;
}
.five-column-1,.five-column-2,.five-column-3,.five-column-4{ margin-right:.5%;}

/*六欄*/
.six-column-1,.six-column-2,.six-column-3,.six-column-4,.six-column-5,.six-column-6{
	float:left;
	width:16%;
	display:inline-block;
}
.six-column-1,.six-column-2,.six-column-3,.six-column-4,.six-column-5{ margin-right:.8%;}

/*表格*/
.table-area{
	overflow:auto;
}

.table-area table,.table-area table td{ border-collapse:collapse; border:1px solid #ccc}
.table-area table thead td{ background-color:#ccc; border:1px solid #bbb; white-space: nowrap;}
.table-area table td{ padding:3px;}

@media screen and (max-width: 1024px) {
	
	.four-column-1,.four-column-2,.four-column-3,.four-column-4
	{
		width:49%;
		display:inline-block;
	}
	.four-column-1,.four-column-3
	{
		margin-right:2%;
	}
	.four-column-2,.four-column-4{
		margin:0;
	}
	
	.five-column-1,.five-column-2,.five-column-3,.five-column-4,.five-column-5,
	.six-column-1,.six-column-2,.six-column-3,.six-column-4,.six-column-5,.six-column-6
	{
		width:33%;
	}
	.five-column-1,.five-column-2,.five-column-4,
	.six-column-1,.six-column-2,.six-column-4,.six-column-5
	{
		margin-right:.5%;
	}
	.five-column-3,
	.six-column-3,.six-column-6
	{ 
		margin:0;
	}
	.five-column-1,.five-column-2,.five-column-3,.five-column-4,.five-column-5,
	.six-column-1,.six-column-2,.six-column-3,.six-column-4,.six-column-5,.six-column-6
	{
		margin-bottom:5px;
	}
}

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

    .two-column-left,.two-column-right{
		float:none;
		width:100%;
		display:block;
		margin-bottom:.5em;
	}
	
	.six-column-1,.six-column-2,.six-column-3,.six-column-4,.six-column-5,.six-column-6
	{
		width:49%;
		display:inline-block;
	}
	.six-column-1,.six-column-3,.six-column-5
	{
		margin-right:2%;
	}
	.six-column-2,.six-column-4,.six-column-6{
		margin:0;
	}
}

@media screen and (max-width: 640px)
{
	.three-column-left,.three-column-middle,.three-column-right,
	.four-column-1,.four-column-2,.four-column-3,.four-column-4,
	.five-column-1,.five-column-2,.five-column-3,.five-column-4,.five-column-5,
	.six-column-1,.six-column-2,.six-column-3,.six-column-4,.six-column-5,.six-column-6
	{
		float:none;
		width:100%;
		display:block;
		margin-bottom:.5em;
	}
}


/* ===== _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;
    }
}


/* ===== _side.css ===== */
.side {
    width: 300px;
    float: left;
}
.has-side .content {
    width: calc(100% - 370px);
    float: right;
}
.side-nav {
    position: relative;
}
.side-nav li a {
    display: block;
}
.side-nav > li > a {
    color: #969696;
    position: relative;
    padding: 11px 28px;
    line-height: 24px;
    font-size: 16px;
    margin-bottom: 14px;
}
.side-nav > li > a:hover,
.side-nav > li.active > a {
    color: #535353;
    font-weight: bold;
}
.side-nav > li.active > a:before {
    border-color: #454545;
}
.side-nav > li.has-child {
    position: relative;
}
.side-nav > li.has-child a {
    padding-right: 45px;
}
.side-nav > li .toggle-sidesub {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    background: url("../../images/side_accordion.png") no-repeat;
    width: 45px;
    height: 45px;
    cursor: pointer;
}
.side-nav li.active .toggle-sidesub {
    background-position: 0 100%;
}
.side-nav ul {
    display: none;
    padding-bottom: 8px;
}
.side-nav ul li a {
    color: #666;
    font-size: 15px;
    background: #FAEFE7;
    padding: 8px 10px 8px 36px;
    margin-bottom: 6px;
}
.side-nav ul li a:hover,
.side-nav ul li.active > a {
    background: #F4DCCA;
    font-weight: bold;
}

.toggle-side {
    display: none;
}
@media screen and (max-width: 1200px) {
    .side {
        width: 250px;
    }
    .has-side .content {
        width: calc(100% - 300px);
    }
}
@media screen and (max-width: 900px) {
    .toggle-side {
        display: block;
        padding: 8px 20px;
        font-family: 'Trykker', "微軟正黑體", "Microsoft JhengHei", "微软雅黑", "メイリオ", "맑은 고딕", sans-serif;
        font-size: 18px;
        border: 1px solid #666;
        color: #333;
        width: 100%;
        margin-bottom: 20px;
    }
    .toggle-side:hover,
    .side-open .toggle-side {
        background: #C78B67;
        border-color: #C78B67;
        color: #fff;
    }
    .side,
    .has-side .content {
        float: none;
        width: auto;
    }
    .side {
        max-height: 0;
        overflow: hidden;
        -webkit-transition: all .3s ease;
           -moz-transition: all .3s ease;
            -ms-transition: all .3s ease;
             -o-transition: all .3s ease;
                transition: all .3s ease;
    }
    .side-open .side {
        max-height: 1000px;
        padding-bottom: 20px;
        overflow-x: visible;
        overflow-y: auto;
    }
    .has-side .content {
    }
    .side-open .content {
    }
}

/* ===== _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;
    }
}

/* ===== _lightbox.css ===== */
body .fancybox-skin {
    margin-top: 30px;
    background: none;
    -webkit-border-radius: 0;
       -moz-border-radius: 0;
            border-radius: 0;
}
body .fancybox-skin.corner {
    overflow: visible;
}
body .fancybox-skin.corner:before {
    border-color: #6D6D6D;
}
body .fancybox-skin.corner .cor {
    border-color: #eee;
}
body .fancybox-close {
    background: url("../../images/lightbox_close.png") no-repeat;
    width: 60px;
    height: 20px;
    right: 0;
    top: -30px;
}
body .fancybox-nav span {
    visibility: visible;
    background: url("../../images/lightbox_arrow.png") no-repeat;
    width: 66px;
    height: 60px;
}
body .fancybox-prev span {
    background-position: 0 0;
    left: 0;
}
body .fancybox-next span {
    background-position: 100% 0;
    right: 0;
}
body .fancybox-prev:hover span {
    background-position: 0 100%;
}
body .fancybox-next:hover span {
    background-position: 100% 100%;
}
body .fancybox-title {
    margin-top: 15px;
    padding: 20px 25px;
    background: rgba(85,85,85,0.80);
}
body .fancybox-title .photo-pager {
    color: #BF8B6C;
    font-size: 14px;
    margin-bottom: 10px;
}
body .fancybox-title .photo-title {
    color: #BABABA;
    font-size: 13px;
}

@media screen and (max-width: 600px) {
    body .fancybox-prev span {
        left: -20px;
    }
    body .fancybox-next span {
        right: -20px;
    }
}

/* ===== _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 ===== */