@charset "UTF-8";
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,
table, caption, tbody, tfoot, thead, tr, th, td,
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: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

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

html, body {
  margin: 0;
  height: 100%;
  width: 100%;
  -webkit-text-size-adjust: 100%;
}

a {
  text-decoration: none;
  color: inherit;
}
a img {
  border: 0;
}

:focus {
  outline: 0;
}

button {
  background-color: transparent;
  border: 0;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

img {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  height: auto;
}

/*

  base.scss end~~~◢◤◢◤
	　　　　　◢████◤
	　　　⊙███████◤
	　●████████◤
	　　▼　　～◥███◤
	　　▲▃▃◢███　●　　●　　●　　●　　●　　●　
	　　　　　　███／█　／█　／█　／█　／█　／█　　　◢◤
	　　　　　　█████████████████████████████████████◤

*/
.css_mover {
  cursor: pointer;
}
.css_mover img:nth-child(1) {
  display: inline;
}
.css_mover img:nth-child(2) {
  display: none;
}
.css_mover.current img:nth-child(1) {
  display: none;
}
.css_mover.current img:nth-child(2) {
  display: inline;
}

.css_active img:nth-child(1), .css_mover:hover img:nth-child(1) {
  display: none;
}
.css_active img:nth-child(2), .css_mover:hover img:nth-child(2) {
  display: inline;
}
.css_active.current img:nth-child(1), .css_mover:hover.current img:nth-child(1) {
  display: none;
}
.css_active.current img:nth-child(2), .css_mover:hover.current img:nth-child(2) {
  display: inline;
}

.image-2x img:nth-child(1) {
  display: inline;
}
.image-2x img:nth-child(2) {
  display: none;
}
@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  .image-2x img:nth-child(1) {
    display: none;
  }
  .image-2x img:nth-child(2) {
    display: inline;
  }
}

/*

        　　　  %%%%%%%%,
    　　　　　,%%/\%%%%/\%%
    　　　　,%%%\c　""　J/%%%
    %.　　　%%%%/　o　o　\%%%
    `%%.　　%%%%　　 　　|%%%
    　`%%　　`%%%%(__Y__)%%'
    　//　　　;%%%%`\-/%%%'
    ((　　　　/ `%%%%%%%'
    　\　　.'　　　　|
    　\　　/　　　\　|　|
    　　\/　　　　)　|　|
    　　　\　　　　/　|　|__
    　　　(___________)))))))         public.scss end

*/
/*/ Enables flexbox by adding `display: flex` to the element.*/
/*/ Horizontally or vertically aligns the items within a flex container.*/
/*/*/
/*/ @param {Keyword} $x [null] - Horizontal alignment to use. Can be `left`, `right`, `center`, `justify`, or `spaced`. Or, set it to `null` (the default) to not set horizontal alignment.*/
/*/ @param {Keyword} $y [null] - Vertical alignment to use. Can be `top`, `bottom`, `middle`, or `stretch`. Or, set it to `null` (the default) to not set vertical alignment.*/
/*/ Vertically align a single column within a flex row. Apply this mixin to a flex column.*/
/*/*/
/*/ @param {Keyword} $y [null] - Vertical alignment to use. Can be `top`, `bottom`, `middle`, or `stretch`. Or, set it to `null` (the default) to not set vertical alignment.*/
/*/ Changes the source order of a flex child. Children with lower numbers appear first in the layout.*/
/*/ @param {Number} $order [0] - Order number to apply.*/
/*/ Change flex-direction*/
/*/ @param {Keyword} $direction [row] - Flex direction to use. Can be*/
/*/   - row (default): same as text direction*/
/*/   - row-reverse: opposite to text direction*/
/*/   - column: same as row but top to bottom*/
/*/   - column-reverse: same as row-reverse top to bottom*/
/**
 * Foundation for Sites by ZURB
 * Version 6.3.0
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
/* Foundation for Sites by ZURB*/
/* foundation.zurb.com*/
/* Licensed under MIT Open Source*/
/*//*/
/*/ @group flex-grid*/
/*//*/
/*/ Creates a container for a flex grid row.*/
/*/*/
/*/ @param {Keyword|List} $behavior [null]*/
/*/   Modifications to the default grid styles. `nest` indicates the row will be placed inside another row. `collapse` indicates that the columns inside this row will not have padding. `nest collapse` combines both behaviors.*/
/*/ @param {Keyword|Number} $size [$grid-row-width] Maximum size of the row. Set to `expand` to make the row taking the full width.*/
/*/ @param {Number} $columns [null] - Number of columns to use for this row. If set to `null` (the default), the global column count will be used.*/
/*/ @param {Boolean} $base [true] - Set to `false` to prevent basic styles from being output. Useful if you're calling this mixin on the same element twice, as it prevents duplicate CSS output.*/
/*/ @param {Number|Map} $gutters [$grid-column-gutter] - Gutter map or single value to use when inverting margins, in case the row is nested. Responsive gutter settings by default.*/
/*/ Calculates the `flex` property for a flex grid column. It accepts all of the same values as the basic `grid-column()` function, along with two extras:*/
/*/   - `expand` (the default) will make the column expand to fill space.*/
/*/   - `shrink` will make the column contract, so it only takes up the horizontal space it needs.*/
/*/*/
/*/ @param {Mixed} $columns [expand] - Width of the column.*/
/*/ Creates a column for a flex grid. By default, the column will stretch to the full width of its container, but this can be overridden with sizing classes, or by using the `unstack` class on the parent flex row.*/
/*/*/
/*/ @param {Mixed} $columns [expand] - Width of the column. Refer to the `flex-grid-column()` function to see possible values.*/
/*/ @param {Number} $gutter [$grid-column-gutter] - Space between columns, added as a left and right padding.*/
/*/ Creates a block grid for a flex grid row.*/
/*/*/
/*/ @param {Number} $n - Number of columns to display on each row.*/
/*/ @param {String} $selector - Selector to use to target columns within the row.*/
/*/ Changes the width flex grid column.*/
/*/ @param {Mixed} $columns [expand] - Width of the column. Refer to the `flex-grid-column()` function to see possible values.*/
/* custom faoundation settings here*/
/* Row*/
.row {
  max-width: 1280px;
  margin-right: auto;
  margin-left: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  /* Nesting behavior*/
  /* Expanded row*/
  /* Undo negative margins*/
  /* From collapsed child*/
}
.row .row {
  margin-right: -1.25rem;
  margin-left: -1.25rem;
}
@media print, screen and (min-width: 40em) {
  .row .row {
    margin-right: -1.25rem;
    margin-left: -1.25rem;
  }
}
@media print, screen and (min-width: 64em) {
  .row .row {
    margin-right: -3.5625rem;
    margin-left: -3.5625rem;
  }
}
@media screen and (min-width: 75em) {
  .row .row {
    margin-right: -3.5625rem;
    margin-left: -3.5625rem;
  }
}
@media screen and (min-width: 90em) {
  .row .row {
    margin-right: -3.5625rem;
    margin-left: -3.5625rem;
  }
}
.row.expanded {
  max-width: none;
}
.row.collapse > .column, .row.collapse > .columns {
  padding-right: 0;
  padding-left: 0;
}
.row.is-collapse-child, .row.collapse > .column > .row, .row.collapse > .columns > .row {
  margin-right: 0;
  margin-left: 0;
}

/* Column*/
.column, .columns {
  /* Base properties*/
  -webkit-box-flex: 1 1 0px;
  -ms-flex: 1 1 0px;
  flex: 1 1 0px;
  /* max-width fixes IE 10/11 not respecting the flex-basis property*/
  /* Gutters*/
  padding-right: 1.25rem;
  padding-left: 1.25rem;
  /* fixes recent Chrome version not limiting child width*/
  /* https://stackoverflow.com/questions/34934586/white-space-nowrap-and-flexbox-did-not-work-in-chrome*/
  min-width: initial;
  /* max-width fixes IE 10/11 not respecting the flex-basis property*/
}
@media print, screen and (min-width: 64em) {
  .column, .columns {
    padding-right: 3.5625rem;
    padding-left: 3.5625rem;
  }
}

/* Column row*/
/* The double .row class is needed to bump up the specificity*/
.column.row.row, .row.row.columns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

/* To properly nest a column row, padding and margin is removed*/
.row .column.row.row, .row .row.row.columns {
  margin-right: 0;
  margin-left: 0;
  padding-right: 0;
  padding-left: 0;
}

.flex-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.flex-child-auto {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}

.flex-child-grow {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
}

.flex-child-shrink {
  -webkit-box-flex: 0;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
}

.flex-dir-row {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}

.flex-dir-row-reverse {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

.flex-dir-column {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.flex-dir-column-reverse {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
}

/* Sizing (percentage)*/
.small-1 {
  -webkit-box-flex: 0 0 8.33333%;
  -ms-flex: 0 0 8.33333%;
  flex: 0 0 8.33333%;
  max-width: 8.33333%;
}

/* Offsets*/
.small-offset-0 {
  margin-left: 0%;
}

/* Sizing (percentage)*/
.small-2 {
  -webkit-box-flex: 0 0 16.66667%;
  -ms-flex: 0 0 16.66667%;
  flex: 0 0 16.66667%;
  max-width: 16.66667%;
}

/* Offsets*/
.small-offset-1 {
  margin-left: 8.33333%;
}

/* Sizing (percentage)*/
.small-3 {
  -webkit-box-flex: 0 0 25%;
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}

/* Offsets*/
.small-offset-2 {
  margin-left: 16.66667%;
}

/* Sizing (percentage)*/
.small-4 {
  -webkit-box-flex: 0 0 33.33333%;
  -ms-flex: 0 0 33.33333%;
  flex: 0 0 33.33333%;
  max-width: 33.33333%;
}

/* Offsets*/
.small-offset-3 {
  margin-left: 25%;
}

/* Sizing (percentage)*/
.small-5 {
  -webkit-box-flex: 0 0 41.66667%;
  -ms-flex: 0 0 41.66667%;
  flex: 0 0 41.66667%;
  max-width: 41.66667%;
}

/* Offsets*/
.small-offset-4 {
  margin-left: 33.33333%;
}

/* Sizing (percentage)*/
.small-6 {
  -webkit-box-flex: 0 0 50%;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

/* Offsets*/
.small-offset-5 {
  margin-left: 41.66667%;
}

/* Sizing (percentage)*/
.small-7 {
  -webkit-box-flex: 0 0 58.33333%;
  -ms-flex: 0 0 58.33333%;
  flex: 0 0 58.33333%;
  max-width: 58.33333%;
}

/* Offsets*/
.small-offset-6 {
  margin-left: 50%;
}

/* Sizing (percentage)*/
.small-8 {
  -webkit-box-flex: 0 0 66.66667%;
  -ms-flex: 0 0 66.66667%;
  flex: 0 0 66.66667%;
  max-width: 66.66667%;
}

/* Offsets*/
.small-offset-7 {
  margin-left: 58.33333%;
}

/* Sizing (percentage)*/
.small-9 {
  -webkit-box-flex: 0 0 75%;
  -ms-flex: 0 0 75%;
  flex: 0 0 75%;
  max-width: 75%;
}

/* Offsets*/
.small-offset-8 {
  margin-left: 66.66667%;
}

/* Sizing (percentage)*/
.small-10 {
  -webkit-box-flex: 0 0 83.33333%;
  -ms-flex: 0 0 83.33333%;
  flex: 0 0 83.33333%;
  max-width: 83.33333%;
}

/* Offsets*/
.small-offset-9 {
  margin-left: 75%;
}

/* Sizing (percentage)*/
.small-11 {
  -webkit-box-flex: 0 0 91.66667%;
  -ms-flex: 0 0 91.66667%;
  flex: 0 0 91.66667%;
  max-width: 91.66667%;
}

/* Offsets*/
.small-offset-10 {
  margin-left: 83.33333%;
}

/* Sizing (percentage)*/
.small-12 {
  -webkit-box-flex: 0 0 100%;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

/* Offsets*/
.small-offset-11 {
  margin-left: 91.66667%;
}

/* Source ordering*/
.small-order-1 {
  -webkit-box-ordinal-group: 1;
  -ms-flex-order: 1;
  order: 1;
}

.small-order-2 {
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 2;
  order: 2;
}

.small-order-3 {
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 3;
  order: 3;
}

.small-order-4 {
  -webkit-box-ordinal-group: 4;
  -ms-flex-order: 4;
  order: 4;
}

.small-order-5 {
  -webkit-box-ordinal-group: 5;
  -ms-flex-order: 5;
  order: 5;
}

.small-order-6 {
  -webkit-box-ordinal-group: 6;
  -ms-flex-order: 6;
  order: 6;
}

/* Block grid*/
.small-up-1 {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.small-up-1 > .column, .small-up-1 > .columns {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

.small-up-2 {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.small-up-2 > .column, .small-up-2 > .columns {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

.small-up-3 {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.small-up-3 > .column, .small-up-3 > .columns {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 33.33333%;
  flex: 0 0 33.33333%;
  max-width: 33.33333%;
}

.small-up-4 {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.small-up-4 > .column, .small-up-4 > .columns {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}

.small-up-5 {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.small-up-5 > .column, .small-up-5 > .columns {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 20%;
  flex: 0 0 20%;
  max-width: 20%;
}

.small-up-6 {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.small-up-6 > .column, .small-up-6 > .columns {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 16.66667%;
  flex: 0 0 16.66667%;
  max-width: 16.66667%;
}

.small-up-7 {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.small-up-7 > .column, .small-up-7 > .columns {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 14.28571%;
  flex: 0 0 14.28571%;
  max-width: 14.28571%;
}

.small-up-8 {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.small-up-8 > .column, .small-up-8 > .columns {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 12.5%;
  flex: 0 0 12.5%;
  max-width: 12.5%;
}

/* Responsive collapsing*/
.small-collapse > .column, .small-collapse > .columns {
  padding-right: 0;
  padding-left: 0;
}

.small-uncollapse > .column, .small-uncollapse > .columns {
  padding-right: 1.25rem;
  padding-left: 1.25rem;
}

@media print, screen and (min-width: 40em) {
  /* Sizing (percentage)*/
  .medium-1 {
    -webkit-box-flex: 0 0 8.33333%;
    -ms-flex: 0 0 8.33333%;
    flex: 0 0 8.33333%;
    max-width: 8.33333%;
  }

  /* Offsets*/
  .medium-offset-0 {
    margin-left: 0%;
  }

  /* Sizing (percentage)*/
  .medium-2 {
    -webkit-box-flex: 0 0 16.66667%;
    -ms-flex: 0 0 16.66667%;
    flex: 0 0 16.66667%;
    max-width: 16.66667%;
  }

  /* Offsets*/
  .medium-offset-1 {
    margin-left: 8.33333%;
  }

  /* Sizing (percentage)*/
  .medium-3 {
    -webkit-box-flex: 0 0 25%;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }

  /* Offsets*/
  .medium-offset-2 {
    margin-left: 16.66667%;
  }

  /* Sizing (percentage)*/
  .medium-4 {
    -webkit-box-flex: 0 0 33.33333%;
    -ms-flex: 0 0 33.33333%;
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }

  /* Offsets*/
  .medium-offset-3 {
    margin-left: 25%;
  }

  /* Sizing (percentage)*/
  .medium-5 {
    -webkit-box-flex: 0 0 41.66667%;
    -ms-flex: 0 0 41.66667%;
    flex: 0 0 41.66667%;
    max-width: 41.66667%;
  }

  /* Offsets*/
  .medium-offset-4 {
    margin-left: 33.33333%;
  }

  /* Sizing (percentage)*/
  .medium-6 {
    -webkit-box-flex: 0 0 50%;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }

  /* Offsets*/
  .medium-offset-5 {
    margin-left: 41.66667%;
  }

  /* Sizing (percentage)*/
  .medium-7 {
    -webkit-box-flex: 0 0 58.33333%;
    -ms-flex: 0 0 58.33333%;
    flex: 0 0 58.33333%;
    max-width: 58.33333%;
  }

  /* Offsets*/
  .medium-offset-6 {
    margin-left: 50%;
  }

  /* Sizing (percentage)*/
  .medium-8 {
    -webkit-box-flex: 0 0 66.66667%;
    -ms-flex: 0 0 66.66667%;
    flex: 0 0 66.66667%;
    max-width: 66.66667%;
  }

  /* Offsets*/
  .medium-offset-7 {
    margin-left: 58.33333%;
  }

  /* Sizing (percentage)*/
  .medium-9 {
    -webkit-box-flex: 0 0 75%;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }

  /* Offsets*/
  .medium-offset-8 {
    margin-left: 66.66667%;
  }

  /* Sizing (percentage)*/
  .medium-10 {
    -webkit-box-flex: 0 0 83.33333%;
    -ms-flex: 0 0 83.33333%;
    flex: 0 0 83.33333%;
    max-width: 83.33333%;
  }

  /* Offsets*/
  .medium-offset-9 {
    margin-left: 75%;
  }

  /* Sizing (percentage)*/
  .medium-11 {
    -webkit-box-flex: 0 0 91.66667%;
    -ms-flex: 0 0 91.66667%;
    flex: 0 0 91.66667%;
    max-width: 91.66667%;
  }

  /* Offsets*/
  .medium-offset-10 {
    margin-left: 83.33333%;
  }

  /* Sizing (percentage)*/
  .medium-12 {
    -webkit-box-flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Offsets*/
  .medium-offset-11 {
    margin-left: 91.66667%;
  }

  /* Source ordering*/
  .medium-order-1 {
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 1;
    order: 1;
  }

  .medium-order-2 {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 2;
    order: 2;
  }

  .medium-order-3 {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 3;
    order: 3;
  }

  .medium-order-4 {
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 4;
    order: 4;
  }

  .medium-order-5 {
    -webkit-box-ordinal-group: 5;
    -ms-flex-order: 5;
    order: 5;
  }

  .medium-order-6 {
    -webkit-box-ordinal-group: 6;
    -ms-flex-order: 6;
    order: 6;
  }

  /* Block grid*/
  .medium-up-1 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .medium-up-1 > .column, .medium-up-1 > .columns {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

  .medium-up-2 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .medium-up-2 > .column, .medium-up-2 > .columns {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }

  .medium-up-3 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .medium-up-3 > .column, .medium-up-3 > .columns {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.33333%;
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }

  .medium-up-4 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .medium-up-4 > .column, .medium-up-4 > .columns {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }

  .medium-up-5 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .medium-up-5 > .column, .medium-up-5 > .columns {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
  }

  .medium-up-6 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .medium-up-6 > .column, .medium-up-6 > .columns {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16.66667%;
    flex: 0 0 16.66667%;
    max-width: 16.66667%;
  }

  .medium-up-7 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .medium-up-7 > .column, .medium-up-7 > .columns {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 14.28571%;
    flex: 0 0 14.28571%;
    max-width: 14.28571%;
  }

  .medium-up-8 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .medium-up-8 > .column, .medium-up-8 > .columns {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 12.5%;
    flex: 0 0 12.5%;
    max-width: 12.5%;
  }

  /* Sizing (expand)*/
}
@media print, screen and (min-width: 40em) and (min-width: 40em) {
  .medium-expand {
    -webkit-box-flex: 1 1 0px;
    -ms-flex: 1 1 0px;
    flex: 1 1 0px;
  }
}
@media print, screen and (min-width: 40em) {
  /* direction helper classes*/
  .medium-flex-dir-row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }

  .medium-flex-dir-row-reverse {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
  }

  .medium-flex-dir-column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .medium-flex-dir-column-reverse {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }

  /* child helper classes*/
  .medium-flex-child-auto {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
  }

  .medium-flex-child-grow {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
  }

  .medium-flex-child-shrink {
    -webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
  }

  /* Auto-stacking/unstacking*/
}
.row.medium-unstack > .column, .row.medium-unstack > .columns {
  -webkit-box-flex: 0 0 100%;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
}
@media print, screen and (min-width: 40em) {
  .row.medium-unstack > .column, .row.medium-unstack > .columns {
    -webkit-box-flex: 1 1 0px;
    -ms-flex: 1 1 0px;
    flex: 1 1 0px;
  }
}
@media print, screen and (min-width: 40em) {
  /* Responsive collapsing*/
  .medium-collapse > .column, .medium-collapse > .columns {
    padding-right: 0;
    padding-left: 0;
  }

  .medium-uncollapse > .column, .medium-uncollapse > .columns {
    padding-right: 1.25rem;
    padding-left: 1.25rem;
  }
}
@media print, screen and (min-width: 64em) {
  /* Sizing (percentage)*/
  .large-1 {
    -webkit-box-flex: 0 0 8.33333%;
    -ms-flex: 0 0 8.33333%;
    flex: 0 0 8.33333%;
    max-width: 8.33333%;
  }

  /* Offsets*/
  .large-offset-0 {
    margin-left: 0%;
  }

  /* Sizing (percentage)*/
  .large-2 {
    -webkit-box-flex: 0 0 16.66667%;
    -ms-flex: 0 0 16.66667%;
    flex: 0 0 16.66667%;
    max-width: 16.66667%;
  }

  /* Offsets*/
  .large-offset-1 {
    margin-left: 8.33333%;
  }

  /* Sizing (percentage)*/
  .large-3 {
    -webkit-box-flex: 0 0 25%;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }

  /* Offsets*/
  .large-offset-2 {
    margin-left: 16.66667%;
  }

  /* Sizing (percentage)*/
  .large-4 {
    -webkit-box-flex: 0 0 33.33333%;
    -ms-flex: 0 0 33.33333%;
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }

  /* Offsets*/
  .large-offset-3 {
    margin-left: 25%;
  }

  /* Sizing (percentage)*/
  .large-5 {
    -webkit-box-flex: 0 0 41.66667%;
    -ms-flex: 0 0 41.66667%;
    flex: 0 0 41.66667%;
    max-width: 41.66667%;
  }

  /* Offsets*/
  .large-offset-4 {
    margin-left: 33.33333%;
  }

  /* Sizing (percentage)*/
  .large-6 {
    -webkit-box-flex: 0 0 50%;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }

  /* Offsets*/
  .large-offset-5 {
    margin-left: 41.66667%;
  }

  /* Sizing (percentage)*/
  .large-7 {
    -webkit-box-flex: 0 0 58.33333%;
    -ms-flex: 0 0 58.33333%;
    flex: 0 0 58.33333%;
    max-width: 58.33333%;
  }

  /* Offsets*/
  .large-offset-6 {
    margin-left: 50%;
  }

  /* Sizing (percentage)*/
  .large-8 {
    -webkit-box-flex: 0 0 66.66667%;
    -ms-flex: 0 0 66.66667%;
    flex: 0 0 66.66667%;
    max-width: 66.66667%;
  }

  /* Offsets*/
  .large-offset-7 {
    margin-left: 58.33333%;
  }

  /* Sizing (percentage)*/
  .large-9 {
    -webkit-box-flex: 0 0 75%;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }

  /* Offsets*/
  .large-offset-8 {
    margin-left: 66.66667%;
  }

  /* Sizing (percentage)*/
  .large-10 {
    -webkit-box-flex: 0 0 83.33333%;
    -ms-flex: 0 0 83.33333%;
    flex: 0 0 83.33333%;
    max-width: 83.33333%;
  }

  /* Offsets*/
  .large-offset-9 {
    margin-left: 75%;
  }

  /* Sizing (percentage)*/
  .large-11 {
    -webkit-box-flex: 0 0 91.66667%;
    -ms-flex: 0 0 91.66667%;
    flex: 0 0 91.66667%;
    max-width: 91.66667%;
  }

  /* Offsets*/
  .large-offset-10 {
    margin-left: 83.33333%;
  }

  /* Sizing (percentage)*/
  .large-12 {
    -webkit-box-flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Offsets*/
  .large-offset-11 {
    margin-left: 91.66667%;
  }

  /* Source ordering*/
  .large-order-1 {
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 1;
    order: 1;
  }

  .large-order-2 {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 2;
    order: 2;
  }

  .large-order-3 {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 3;
    order: 3;
  }

  .large-order-4 {
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 4;
    order: 4;
  }

  .large-order-5 {
    -webkit-box-ordinal-group: 5;
    -ms-flex-order: 5;
    order: 5;
  }

  .large-order-6 {
    -webkit-box-ordinal-group: 6;
    -ms-flex-order: 6;
    order: 6;
  }

  /* Block grid*/
  .large-up-1 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .large-up-1 > .column, .large-up-1 > .columns {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

  .large-up-2 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .large-up-2 > .column, .large-up-2 > .columns {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }

  .large-up-3 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .large-up-3 > .column, .large-up-3 > .columns {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.33333%;
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }

  .large-up-4 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .large-up-4 > .column, .large-up-4 > .columns {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }

  .large-up-5 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .large-up-5 > .column, .large-up-5 > .columns {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
  }

  .large-up-6 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .large-up-6 > .column, .large-up-6 > .columns {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16.66667%;
    flex: 0 0 16.66667%;
    max-width: 16.66667%;
  }

  .large-up-7 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .large-up-7 > .column, .large-up-7 > .columns {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 14.28571%;
    flex: 0 0 14.28571%;
    max-width: 14.28571%;
  }

  .large-up-8 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .large-up-8 > .column, .large-up-8 > .columns {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 12.5%;
    flex: 0 0 12.5%;
    max-width: 12.5%;
  }

  /* Sizing (expand)*/
}
@media print, screen and (min-width: 64em) and (min-width: 64em) {
  .large-expand {
    -webkit-box-flex: 1 1 0px;
    -ms-flex: 1 1 0px;
    flex: 1 1 0px;
  }
}
@media print, screen and (min-width: 64em) {
  /* direction helper classes*/
  .large-flex-dir-row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }

  .large-flex-dir-row-reverse {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
  }

  .large-flex-dir-column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .large-flex-dir-column-reverse {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }

  /* child helper classes*/
  .large-flex-child-auto {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
  }

  .large-flex-child-grow {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
  }

  .large-flex-child-shrink {
    -webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
  }

  /* Auto-stacking/unstacking*/
}
.row.large-unstack > .column, .row.large-unstack > .columns {
  -webkit-box-flex: 0 0 100%;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
}
@media print, screen and (min-width: 64em) {
  .row.large-unstack > .column, .row.large-unstack > .columns {
    -webkit-box-flex: 1 1 0px;
    -ms-flex: 1 1 0px;
    flex: 1 1 0px;
  }
}
@media print, screen and (min-width: 64em) {
  /* Responsive collapsing*/
  .large-collapse > .column, .large-collapse > .columns {
    padding-right: 0;
    padding-left: 0;
  }

  .large-uncollapse > .column, .large-uncollapse > .columns {
    padding-right: 3.5625rem;
    padding-left: 3.5625rem;
  }
}
@media screen and (min-width: 75em) {
  /* Sizing (percentage)*/
  .xlarge-1 {
    -webkit-box-flex: 0 0 8.33333%;
    -ms-flex: 0 0 8.33333%;
    flex: 0 0 8.33333%;
    max-width: 8.33333%;
  }

  /* Offsets*/
  .xlarge-offset-0 {
    margin-left: 0%;
  }

  /* Sizing (percentage)*/
  .xlarge-2 {
    -webkit-box-flex: 0 0 16.66667%;
    -ms-flex: 0 0 16.66667%;
    flex: 0 0 16.66667%;
    max-width: 16.66667%;
  }

  /* Offsets*/
  .xlarge-offset-1 {
    margin-left: 8.33333%;
  }

  /* Sizing (percentage)*/
  .xlarge-3 {
    -webkit-box-flex: 0 0 25%;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }

  /* Offsets*/
  .xlarge-offset-2 {
    margin-left: 16.66667%;
  }

  /* Sizing (percentage)*/
  .xlarge-4 {
    -webkit-box-flex: 0 0 33.33333%;
    -ms-flex: 0 0 33.33333%;
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }

  /* Offsets*/
  .xlarge-offset-3 {
    margin-left: 25%;
  }

  /* Sizing (percentage)*/
  .xlarge-5 {
    -webkit-box-flex: 0 0 41.66667%;
    -ms-flex: 0 0 41.66667%;
    flex: 0 0 41.66667%;
    max-width: 41.66667%;
  }

  /* Offsets*/
  .xlarge-offset-4 {
    margin-left: 33.33333%;
  }

  /* Sizing (percentage)*/
  .xlarge-6 {
    -webkit-box-flex: 0 0 50%;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }

  /* Offsets*/
  .xlarge-offset-5 {
    margin-left: 41.66667%;
  }

  /* Sizing (percentage)*/
  .xlarge-7 {
    -webkit-box-flex: 0 0 58.33333%;
    -ms-flex: 0 0 58.33333%;
    flex: 0 0 58.33333%;
    max-width: 58.33333%;
  }

  /* Offsets*/
  .xlarge-offset-6 {
    margin-left: 50%;
  }

  /* Sizing (percentage)*/
  .xlarge-8 {
    -webkit-box-flex: 0 0 66.66667%;
    -ms-flex: 0 0 66.66667%;
    flex: 0 0 66.66667%;
    max-width: 66.66667%;
  }

  /* Offsets*/
  .xlarge-offset-7 {
    margin-left: 58.33333%;
  }

  /* Sizing (percentage)*/
  .xlarge-9 {
    -webkit-box-flex: 0 0 75%;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }

  /* Offsets*/
  .xlarge-offset-8 {
    margin-left: 66.66667%;
  }

  /* Sizing (percentage)*/
  .xlarge-10 {
    -webkit-box-flex: 0 0 83.33333%;
    -ms-flex: 0 0 83.33333%;
    flex: 0 0 83.33333%;
    max-width: 83.33333%;
  }

  /* Offsets*/
  .xlarge-offset-9 {
    margin-left: 75%;
  }

  /* Sizing (percentage)*/
  .xlarge-11 {
    -webkit-box-flex: 0 0 91.66667%;
    -ms-flex: 0 0 91.66667%;
    flex: 0 0 91.66667%;
    max-width: 91.66667%;
  }

  /* Offsets*/
  .xlarge-offset-10 {
    margin-left: 83.33333%;
  }

  /* Sizing (percentage)*/
  .xlarge-12 {
    -webkit-box-flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Offsets*/
  .xlarge-offset-11 {
    margin-left: 91.66667%;
  }

  /* Source ordering*/
  .xlarge-order-1 {
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 1;
    order: 1;
  }

  .xlarge-order-2 {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 2;
    order: 2;
  }

  .xlarge-order-3 {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 3;
    order: 3;
  }

  .xlarge-order-4 {
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 4;
    order: 4;
  }

  .xlarge-order-5 {
    -webkit-box-ordinal-group: 5;
    -ms-flex-order: 5;
    order: 5;
  }

  .xlarge-order-6 {
    -webkit-box-ordinal-group: 6;
    -ms-flex-order: 6;
    order: 6;
  }

  /* Block grid*/
  .xlarge-up-1 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .xlarge-up-1 > .column, .xlarge-up-1 > .columns {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

  .xlarge-up-2 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .xlarge-up-2 > .column, .xlarge-up-2 > .columns {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }

  .xlarge-up-3 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .xlarge-up-3 > .column, .xlarge-up-3 > .columns {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.33333%;
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }

  .xlarge-up-4 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .xlarge-up-4 > .column, .xlarge-up-4 > .columns {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }

  .xlarge-up-5 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .xlarge-up-5 > .column, .xlarge-up-5 > .columns {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
  }

  .xlarge-up-6 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .xlarge-up-6 > .column, .xlarge-up-6 > .columns {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16.66667%;
    flex: 0 0 16.66667%;
    max-width: 16.66667%;
  }

  .xlarge-up-7 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .xlarge-up-7 > .column, .xlarge-up-7 > .columns {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 14.28571%;
    flex: 0 0 14.28571%;
    max-width: 14.28571%;
  }

  .xlarge-up-8 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .xlarge-up-8 > .column, .xlarge-up-8 > .columns {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 12.5%;
    flex: 0 0 12.5%;
    max-width: 12.5%;
  }

  /* Sizing (expand)*/
}
@media screen and (min-width: 75em) and (min-width: 75em) {
  .xlarge-expand {
    -webkit-box-flex: 1 1 0px;
    -ms-flex: 1 1 0px;
    flex: 1 1 0px;
  }
}
@media screen and (min-width: 75em) {
  /* direction helper classes*/
  .xlarge-flex-dir-row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }

  .xlarge-flex-dir-row-reverse {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
  }

  .xlarge-flex-dir-column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .xlarge-flex-dir-column-reverse {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }

  /* child helper classes*/
  .xlarge-flex-child-auto {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
  }

  .xlarge-flex-child-grow {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
  }

  .xlarge-flex-child-shrink {
    -webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
  }

  /* Auto-stacking/unstacking*/
}
.row.xlarge-unstack > .column, .row.xlarge-unstack > .columns {
  -webkit-box-flex: 0 0 100%;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
}
@media screen and (min-width: 75em) {
  .row.xlarge-unstack > .column, .row.xlarge-unstack > .columns {
    -webkit-box-flex: 1 1 0px;
    -ms-flex: 1 1 0px;
    flex: 1 1 0px;
  }
}
@media screen and (min-width: 75em) {
  /* Responsive collapsing*/
  .xlarge-collapse > .column, .xlarge-collapse > .columns {
    padding-right: 0;
    padding-left: 0;
  }

  .xlarge-uncollapse > .column, .xlarge-uncollapse > .columns {
    padding-right: 3.5625rem;
    padding-left: 3.5625rem;
  }
}
@media screen and (min-width: 90em) {
  /* Sizing (percentage)*/
  .xxlarge-1 {
    -webkit-box-flex: 0 0 8.33333%;
    -ms-flex: 0 0 8.33333%;
    flex: 0 0 8.33333%;
    max-width: 8.33333%;
  }

  /* Offsets*/
  .xxlarge-offset-0 {
    margin-left: 0%;
  }

  /* Sizing (percentage)*/
  .xxlarge-2 {
    -webkit-box-flex: 0 0 16.66667%;
    -ms-flex: 0 0 16.66667%;
    flex: 0 0 16.66667%;
    max-width: 16.66667%;
  }

  /* Offsets*/
  .xxlarge-offset-1 {
    margin-left: 8.33333%;
  }

  /* Sizing (percentage)*/
  .xxlarge-3 {
    -webkit-box-flex: 0 0 25%;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }

  /* Offsets*/
  .xxlarge-offset-2 {
    margin-left: 16.66667%;
  }

  /* Sizing (percentage)*/
  .xxlarge-4 {
    -webkit-box-flex: 0 0 33.33333%;
    -ms-flex: 0 0 33.33333%;
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }

  /* Offsets*/
  .xxlarge-offset-3 {
    margin-left: 25%;
  }

  /* Sizing (percentage)*/
  .xxlarge-5 {
    -webkit-box-flex: 0 0 41.66667%;
    -ms-flex: 0 0 41.66667%;
    flex: 0 0 41.66667%;
    max-width: 41.66667%;
  }

  /* Offsets*/
  .xxlarge-offset-4 {
    margin-left: 33.33333%;
  }

  /* Sizing (percentage)*/
  .xxlarge-6 {
    -webkit-box-flex: 0 0 50%;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }

  /* Offsets*/
  .xxlarge-offset-5 {
    margin-left: 41.66667%;
  }

  /* Sizing (percentage)*/
  .xxlarge-7 {
    -webkit-box-flex: 0 0 58.33333%;
    -ms-flex: 0 0 58.33333%;
    flex: 0 0 58.33333%;
    max-width: 58.33333%;
  }

  /* Offsets*/
  .xxlarge-offset-6 {
    margin-left: 50%;
  }

  /* Sizing (percentage)*/
  .xxlarge-8 {
    -webkit-box-flex: 0 0 66.66667%;
    -ms-flex: 0 0 66.66667%;
    flex: 0 0 66.66667%;
    max-width: 66.66667%;
  }

  /* Offsets*/
  .xxlarge-offset-7 {
    margin-left: 58.33333%;
  }

  /* Sizing (percentage)*/
  .xxlarge-9 {
    -webkit-box-flex: 0 0 75%;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }

  /* Offsets*/
  .xxlarge-offset-8 {
    margin-left: 66.66667%;
  }

  /* Sizing (percentage)*/
  .xxlarge-10 {
    -webkit-box-flex: 0 0 83.33333%;
    -ms-flex: 0 0 83.33333%;
    flex: 0 0 83.33333%;
    max-width: 83.33333%;
  }

  /* Offsets*/
  .xxlarge-offset-9 {
    margin-left: 75%;
  }

  /* Sizing (percentage)*/
  .xxlarge-11 {
    -webkit-box-flex: 0 0 91.66667%;
    -ms-flex: 0 0 91.66667%;
    flex: 0 0 91.66667%;
    max-width: 91.66667%;
  }

  /* Offsets*/
  .xxlarge-offset-10 {
    margin-left: 83.33333%;
  }

  /* Sizing (percentage)*/
  .xxlarge-12 {
    -webkit-box-flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Offsets*/
  .xxlarge-offset-11 {
    margin-left: 91.66667%;
  }

  /* Source ordering*/
  .xxlarge-order-1 {
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 1;
    order: 1;
  }

  .xxlarge-order-2 {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 2;
    order: 2;
  }

  .xxlarge-order-3 {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 3;
    order: 3;
  }

  .xxlarge-order-4 {
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 4;
    order: 4;
  }

  .xxlarge-order-5 {
    -webkit-box-ordinal-group: 5;
    -ms-flex-order: 5;
    order: 5;
  }

  .xxlarge-order-6 {
    -webkit-box-ordinal-group: 6;
    -ms-flex-order: 6;
    order: 6;
  }

  /* Block grid*/
  .xxlarge-up-1 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .xxlarge-up-1 > .column, .xxlarge-up-1 > .columns {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

  .xxlarge-up-2 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .xxlarge-up-2 > .column, .xxlarge-up-2 > .columns {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }

  .xxlarge-up-3 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .xxlarge-up-3 > .column, .xxlarge-up-3 > .columns {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.33333%;
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }

  .xxlarge-up-4 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .xxlarge-up-4 > .column, .xxlarge-up-4 > .columns {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }

  .xxlarge-up-5 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .xxlarge-up-5 > .column, .xxlarge-up-5 > .columns {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
  }

  .xxlarge-up-6 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .xxlarge-up-6 > .column, .xxlarge-up-6 > .columns {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16.66667%;
    flex: 0 0 16.66667%;
    max-width: 16.66667%;
  }

  .xxlarge-up-7 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .xxlarge-up-7 > .column, .xxlarge-up-7 > .columns {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 14.28571%;
    flex: 0 0 14.28571%;
    max-width: 14.28571%;
  }

  .xxlarge-up-8 {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .xxlarge-up-8 > .column, .xxlarge-up-8 > .columns {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 12.5%;
    flex: 0 0 12.5%;
    max-width: 12.5%;
  }

  /* Sizing (expand)*/
}
@media screen and (min-width: 90em) and (min-width: 90em) {
  .xxlarge-expand {
    -webkit-box-flex: 1 1 0px;
    -ms-flex: 1 1 0px;
    flex: 1 1 0px;
  }
}
@media screen and (min-width: 90em) {
  /* direction helper classes*/
  .xxlarge-flex-dir-row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }

  .xxlarge-flex-dir-row-reverse {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
  }

  .xxlarge-flex-dir-column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .xxlarge-flex-dir-column-reverse {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }

  /* child helper classes*/
  .xxlarge-flex-child-auto {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
  }

  .xxlarge-flex-child-grow {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
  }

  .xxlarge-flex-child-shrink {
    -webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
  }

  /* Auto-stacking/unstacking*/
}
.row.xxlarge-unstack > .column, .row.xxlarge-unstack > .columns {
  -webkit-box-flex: 0 0 100%;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
}
@media screen and (min-width: 90em) {
  .row.xxlarge-unstack > .column, .row.xxlarge-unstack > .columns {
    -webkit-box-flex: 1 1 0px;
    -ms-flex: 1 1 0px;
    flex: 1 1 0px;
  }
}
@media screen and (min-width: 90em) {
  /* Responsive collapsing*/
  .xxlarge-collapse > .column, .xxlarge-collapse > .columns {
    padding-right: 0;
    padding-left: 0;
  }

  .xxlarge-uncollapse > .column, .xxlarge-uncollapse > .columns {
    padding-right: 3.5625rem;
    padding-left: 3.5625rem;
  }
}
/* Sizing (shrink)*/
.shrink {
  -webkit-box-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  max-width: 100%;
}

.columns {
  /* sass-lint:disable-line placeholder-in-extend*/
}

.align-right {
  -webkit-box-pack: flex-end;
  -ms-flex-pack: flex-end;
  justify-content: flex-end;
}

.align-center {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.align-justify {
  -webkit-box-pack: space-between;
  -ms-flex-pack: space-between;
  justify-content: space-between;
}

.align-spaced {
  -webkit-box-pack: space-around;
  -ms-flex-pack: space-around;
  justify-content: space-around;
}

.align-top {
  -webkit-box-align: flex-start;
  -ms-flex-align: flex-start;
  align-items: flex-start;
}

.align-self-top {
  -ms-flex-item-align: flex-start;
  -ms-grid-row-align: flex-start;
  align-self: flex-start;
}

.align-bottom {
  -webkit-box-align: flex-end;
  -ms-flex-align: flex-end;
  align-items: flex-end;
}

.align-self-bottom {
  -ms-flex-item-align: flex-end;
  -ms-grid-row-align: flex-end;
  align-self: flex-end;
}

.align-middle {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.align-self-middle {
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
}

.align-stretch {
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}

.align-self-stretch {
  -ms-flex-item-align: stretch;
  -ms-grid-row-align: stretch;
  align-self: stretch;
}

.small-order-1 {
  -webkit-box-ordinal-group: 1;
  -ms-flex-order: 1;
  order: 1;
}

.small-order-2 {
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 2;
  order: 2;
}

.small-order-3 {
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 3;
  order: 3;
}

.small-order-4 {
  -webkit-box-ordinal-group: 4;
  -ms-flex-order: 4;
  order: 4;
}

.small-order-5 {
  -webkit-box-ordinal-group: 5;
  -ms-flex-order: 5;
  order: 5;
}

.small-order-6 {
  -webkit-box-ordinal-group: 6;
  -ms-flex-order: 6;
  order: 6;
}

@media print, screen and (min-width: 40em) {
  .medium-order-1 {
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 1;
    order: 1;
  }

  .medium-order-2 {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 2;
    order: 2;
  }

  .medium-order-3 {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 3;
    order: 3;
  }

  .medium-order-4 {
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 4;
    order: 4;
  }

  .medium-order-5 {
    -webkit-box-ordinal-group: 5;
    -ms-flex-order: 5;
    order: 5;
  }

  .medium-order-6 {
    -webkit-box-ordinal-group: 6;
    -ms-flex-order: 6;
    order: 6;
  }
}
@media print, screen and (min-width: 64em) {
  .large-order-1 {
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 1;
    order: 1;
  }

  .large-order-2 {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 2;
    order: 2;
  }

  .large-order-3 {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 3;
    order: 3;
  }

  .large-order-4 {
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 4;
    order: 4;
  }

  .large-order-5 {
    -webkit-box-ordinal-group: 5;
    -ms-flex-order: 5;
    order: 5;
  }

  .large-order-6 {
    -webkit-box-ordinal-group: 6;
    -ms-flex-order: 6;
    order: 6;
  }
}
@media screen and (min-width: 75em) {
  .xlarge-order-1 {
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 1;
    order: 1;
  }

  .xlarge-order-2 {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 2;
    order: 2;
  }

  .xlarge-order-3 {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 3;
    order: 3;
  }

  .xlarge-order-4 {
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 4;
    order: 4;
  }

  .xlarge-order-5 {
    -webkit-box-ordinal-group: 5;
    -ms-flex-order: 5;
    order: 5;
  }

  .xlarge-order-6 {
    -webkit-box-ordinal-group: 6;
    -ms-flex-order: 6;
    order: 6;
  }
}
@media screen and (min-width: 90em) {
  .xxlarge-order-1 {
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 1;
    order: 1;
  }

  .xxlarge-order-2 {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 2;
    order: 2;
  }

  .xxlarge-order-3 {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 3;
    order: 3;
  }

  .xxlarge-order-4 {
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 4;
    order: 4;
  }

  .xxlarge-order-5 {
    -webkit-box-ordinal-group: 5;
    -ms-flex-order: 5;
    order: 5;
  }

  .xxlarge-order-6 {
    -webkit-box-ordinal-group: 6;
    -ms-flex-order: 6;
    order: 6;
  }
}
/* @include foundation-grid;*/
table {
  width: 100%;
  margin-bottom: 1rem;
  border-radius: 0;
}
thead,
tbody,
tfoot {
  border: 1px solid #f1f1f1;
  background-color: #fefefe;
}

caption {
  padding: 0.5rem 0.625rem 0.625rem;
  font-weight: bold;
}

thead {
  background: #f8f8f8;
  color: #0a0a0a;
}

tfoot {
  background: #f1f1f1;
  color: #0a0a0a;
}

thead tr,
tfoot tr {
  background: transparent;
}
thead th,
thead td,
tfoot th,
tfoot td {
  padding: 0.5rem 0.625rem 0.625rem;
  font-weight: bold;
  text-align: left;
}

tbody th,
tbody td {
  padding: 0.5rem 0.625rem 0.625rem;
}

tbody tr:nth-child(even) {
  border-bottom: 0;
  background-color: #f1f1f1;
}

table.unstriped tbody {
  background-color: #fefefe;
}
table.unstriped tbody tr {
  border-bottom: 0;
  border-bottom: 1px solid #f1f1f1;
  background-color: #fefefe;
}

@media screen and (max-width: 63.9375em) {
  table.stack thead {
    display: none;
  }
  table.stack tfoot {
    display: none;
  }
  table.stack tr,
  table.stack th,
  table.stack td {
    display: block;
  }
  table.stack td {
    border-top: 0;
  }
}

table.scroll {
  display: block;
  width: 100%;
  overflow-x: auto;
}

table.hover thead tr:hover {
  background-color: #f3f3f3;
}
table.hover tfoot tr:hover {
  background-color: #ececec;
}
table.hover tbody tr:hover {
  background-color: #f9f9f9;
}
table.hover:not(.unstriped) tr:nth-of-type(even):hover {
  background-color: #ececec;
}

.table-scroll {
  overflow-x: auto;
}
.table-scroll table {
  width: auto;
}

.responsive-embed, .flex-video {
  position: relative;
  height: 0;
  margin-bottom: 0;
  padding-bottom: 75%;
  overflow: hidden;
}
.responsive-embed iframe,
.responsive-embed object,
.responsive-embed embed,
.responsive-embed video, .flex-video iframe,
.flex-video object,
.flex-video embed,
.flex-video video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.responsive-embed.widescreen, .flex-video.widescreen {
  padding-bottom: 56.25%;
}

.hide {
  display: none !important;
}

.invisible {
  visibility: hidden;
}

@media screen and (max-width: 39.9375em) {
  .hide-for-small-only {
    display: none !important;
  }
}

@media screen and (max-width: 0em), screen and (min-width: 40em) {
  .show-for-small-only {
    display: none !important;
  }
}

@media print, screen and (min-width: 40em) {
  .hide-for-medium {
    display: none !important;
  }
}

@media screen and (max-width: 39.9375em) {
  .show-for-medium {
    display: none !important;
  }
}

@media screen and (min-width: 40em) and (max-width: 63.9375em) {
  .hide-for-medium-only {
    display: none !important;
  }
}

@media screen and (max-width: 39.9375em), screen and (min-width: 64em) {
  .show-for-medium-only {
    display: none !important;
  }
}

@media print, screen and (min-width: 64em) {
  .hide-for-large {
    display: none !important;
  }
}

@media screen and (max-width: 63.9375em) {
  .show-for-large {
    display: none !important;
  }
}

@media screen and (min-width: 64em) and (max-width: 74.9375em) {
  .hide-for-large-only {
    display: none !important;
  }
}

@media screen and (max-width: 63.9375em), screen and (min-width: 75em) {
  .show-for-large-only {
    display: none !important;
  }
}

@media screen and (min-width: 75em) {
  .hide-for-xlarge {
    display: none !important;
  }
}

@media screen and (max-width: 74.9375em) {
  .show-for-xlarge {
    display: none !important;
  }
}

@media screen and (min-width: 75em) and (max-width: 89.9375em) {
  .hide-for-xlarge-only {
    display: none !important;
  }
}

@media screen and (max-width: 74.9375em), screen and (min-width: 90em) {
  .show-for-xlarge-only {
    display: none !important;
  }
}

@media screen and (min-width: 90em) {
  .hide-for-xxlarge {
    display: none !important;
  }
}

@media screen and (max-width: 89.9375em) {
  .show-for-xxlarge {
    display: none !important;
  }
}

@media screen and (min-width: 90em) {
  .hide-for-xxlarge-only {
    display: none !important;
  }
}

@media screen and (max-width: 89.9375em) {
  .show-for-xxlarge-only {
    display: none !important;
  }
}

.show-for-sr,
.show-on-focus {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.show-on-focus:active, .show-on-focus:focus {
  position: static !important;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
}

.show-for-landscape,
.hide-for-portrait {
  display: block !important;
}
@media screen and (orientation: landscape) {
  .show-for-landscape,
  .hide-for-portrait {
    display: block !important;
  }
}
@media screen and (orientation: portrait) {
  .show-for-landscape,
  .hide-for-portrait {
    display: none !important;
  }
}

.hide-for-landscape,
.show-for-portrait {
  display: none !important;
}
@media screen and (orientation: landscape) {
  .hide-for-landscape,
  .show-for-portrait {
    display: none !important;
  }
}
@media screen and (orientation: portrait) {
  .hide-for-landscape,
  .show-for-portrait {
    display: block !important;
  }
}

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

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

.text-justify {
  text-align: justify;
}

@media print, screen and (min-width: 40em) {
  .medium-text-left {
    text-align: left;
  }

  .medium-text-right {
    text-align: right;
  }

  .medium-text-center {
    text-align: center;
  }

  .medium-text-justify {
    text-align: justify;
  }
}
@media print, screen and (min-width: 64em) {
  .large-text-left {
    text-align: left;
  }

  .large-text-right {
    text-align: right;
  }

  .large-text-center {
    text-align: center;
  }

  .large-text-justify {
    text-align: justify;
  }
}
@media screen and (min-width: 75em) {
  .xlarge-text-left {
    text-align: left;
  }

  .xlarge-text-right {
    text-align: right;
  }

  .xlarge-text-center {
    text-align: center;
  }

  .xlarge-text-justify {
    text-align: justify;
  }
}
@media screen and (min-width: 90em) {
  .xxlarge-text-left {
    text-align: left;
  }

  .xxlarge-text-right {
    text-align: right;
  }

  .xxlarge-text-center {
    text-align: center;
  }

  .xxlarge-text-justify {
    text-align: justify;
  }
}
.m-head {
  font: 23px/1 "STXihei", HEITI TC, "HEITI TC", "黑體-繁", "微軟正黑體", "黑體", sans-serif;
  letter-spacing: 9px;
  color: #fff;
  padding-top: 25px;
  padding-bottom: 25px;
  position: relative;
}
@media screen and (max-width: 63.9375em) {
  .m-head {
    font-size: 16px;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 15px;
  }
}

.bg-is-brown {
  background-color: #b18046;
}

.bg-is-pink {
  background-color: #fffcf3;
}

.bg-is-yellow {
  background-color: #f5f0dd;
}

body {
  background-color: #c6b287;
}

@media screen and (max-width: 63.9375em) {
  .topmenuWrap {
    display: none;
    z-index: 49;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background-color: #b18046;
    padding-bottom: 70px;
  }
}

.topmenuList {
  font: 18px/1 "STXihei", HEITI TC, "HEITI TC", "黑體-繁", "微軟正黑體", "黑體", sans-serif;
  letter-spacing: 8px;
  color: #fffcf3;
  background-color: #fff;
}
.topmenuList span {
  font-size: 12px;
  letter-spacing: 1px;
}
.topmenuList li {
  padding-top: 35px;
  padding-bottom: 35px;
  border-right: 1px solid #fff;
  -webkit-transition: all .6s;
  transition: all .6s;
  position: relative;
}
@media screen and (max-width: 63.9375em) {
  .topmenuList li {
    border-right: none;
    padding-top: 22px;
    padding-bottom: 22px;
  }
}
.topmenuList li:last-child {
  border-right: none;
}
.topmenuList li:hover {
  background-color: #956432;
}
.topmenuList li a:after {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  height: 100%;
  width: 100%;
}
.topmenuList .current {
  background-color: #956432;
}

@-webkit-keyframes down {
  0% {
    bottom: 15px;
  }
  100% {
    bottom: 25px;
  }
}
@keyframes down {
  0% {
    bottom: 15px;
  }
  100% {
    bottom: 25px;
  }
}
.bannerWrap {
  height: 590px;
  position: relative;
  overflow: hidden;
}
@media screen and (max-width: 63.9375em) {
  .bannerWrap {
    height: 60vh;
  }
}
.bannerWrap .down {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  bottom: 15px;
  cursor: pointer;
  -webkit-transition: all .3s;
  transition: all .3s;
  -webkit-animation: down 0.6s infinite alternate cubic-bezier(0, 0, 0.2, 1);
  animation: down 0.6s infinite alternate cubic-bezier(0, 0, 0.2, 1);
}
.bannerWrap .down:hover {
  opacity: .6;
}

.boxWrap {
  position: absolute;
  right: 80px;
  bottom: -181px;
  opacity: 0;
  -webkit-transition: all 1s;
  transition: all 1s;
  -webkit-perspective: 500px;
  perspective: 500px;
  -webkit-perspective-origin: bottom;
  perspective-origin: bottom;
  width: 482px;
  height: 706px;
}
@media screen and (max-width: 63.9375em) {
  .boxWrap {
    transform: scale(0.5);
    transform-origin: right 470px;
    right: 10px;
  }
}
.boxWrap.is-open {
  bottom: -151px;
  opacity: 1;
}
@media screen and (max-width: 25.625em) {
  .boxWrap.is-open {
    right: -4px;
    bottom: -171px;
  }
}
.boxWrap.is-open .box-top {
  -webkit-transform: skewX(0) translate3d(0, 0, 0);
  transform: skewX(0) translate3d(0, 0, 0);
}
.boxWrap.is-open .box-words {
  bottom: 227px;
  opacity: 1;
}

.box-top {
  position: relative;
  top: 199px;
  left: 122px;
  -webkit-transform: skewX(30deg) translate3d(-32px, -32px, -60px);
  transform: skewX(30deg) translate3d(-32px, -32px, -60px);
  -webkit-transition: all 1s;
  transition: all 1s;
}

.box-bottom {
  position: relative;
}

.box-words {
  position: absolute;
  left: 63px;
  bottom: 167px;
  opacity: 0;
  -webkit-transition: all 1s 2s;
  transition: all 1s 2s;
}

.slogan {
  position: absolute;
  top: 300px;
  left: 314px;
  opacity: 0;
  -webkit-transform: scale(0.7);
  transform: scale(0.7);
  -webkit-transition: all 1.5s .5s;
  transition: all 1.5s .5s;
}
@media screen and (max-width: 63.9375em) {
  .slogan {
    top: 250px;
    left: 84px;
  }
}
@media screen and (max-width: 25.625em) {
  .slogan > img {
    width: 170px;
  }
}
@media screen and (max-width: 21.875em) {
  .slogan {
    display: none;
  }
}
.slogan.is-show {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
  top: 210px;
  left: 84px;
}
@media screen and (max-width: 63.9375em) {
  .slogan.is-show {
    top: 146px;
    left: 14px;
  }
}

.shit {
  position: absolute;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  top: 290px;
  left: 460px;
  opacity: 0;
  -webkit-transition: all 1.5s .5s;
  transition: all 1.5s .5s;
}
@media screen and (max-width: 63.9375em) {
  .shit {
    top: 230px;
    left: 140px;
  }
}
.shit.is-show {
  opacity: 1;
  top: -44px;
  left: 0;
  -webkit-transform: scale(1);
  transform: scale(1);
}

.aboutWrap {
  font: 14px/1.8 "STXihei", HEITI TC, "HEITI TC", "黑體-繁", "微軟正黑體", "黑體", sans-serif;
  letter-spacing: 1px;
  color: #b18046;
  padding: 97px 104px;
}
@media screen and (max-width: 63.9375em) {
  .aboutWrap {
    padding: 30px 20px 35px;
  }
}
.aboutWrap .title {
  font-family: "STXihei", HEITI TC, "HEITI TC", "黑體-繁", "微軟正黑體", "黑體", sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 3px;
  line-height: 1.8;
  color: #804f21;
  padding-bottom: 35px;
  margin-bottom: 35px;
  border-bottom: 1px solid #ad7e45;
}
.aboutWrap .title span {
  font-size: 18px;
}

.eventsWrap {
  padding: 70px 0;
}
@media screen and (max-width: 63.9375em) {
  .eventsWrap {
    padding: 30px 0;
  }
}

.eventsSliderWrap {
  position: relative;
}

.eventsSliderList li {
  margin: 10px 8px;
  cursor: pointer;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.eventsSliderList li:focus {
  outline: none;
}
@media print, screen and (min-width: 64em) {
  .eventsSliderList li:hover {
    -webkit-box-shadow: 5px 5px 16px 0px #b5b5b5;
    box-shadow: 5px 5px 16px 0px #b5b5b5;
    -webkit-transform: translate(-1px, -5px);
    transform: translate(-1px, -5px);
  }
  .eventsSliderList li:hover .pic:after {
    opacity: 1;
  }
  .eventsSliderList li:hover .apply {
    background-color: #fff;
    color: #000;
  }
}
@media screen and (max-width: 63.9375em) {
  .eventsSliderList li {
    margin: 0 20px;
  }
}
.eventsSliderList .cat {
  font: 13px/1 "STXihei", HEITI TC, "HEITI TC", "黑體-繁", "微軟正黑體", "黑體", sans-serif;
  letter-spacing: 6px;
  color: #fff;
  text-align: center;
  padding: 7px 0;
}
.eventsSliderList .pic {
  position: relative;
}
.eventsSliderList .pic:after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.2);
  opacity: 0;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.eventsSliderList .apply {
  z-index: 1;
  position: absolute;
  right: 15px;
  bottom: 15px;
  font: 12px/1 "STXihei", HEITI TC, "HEITI TC", "黑體-繁", "微軟正黑體", "黑體", sans-serif;
  letter-spacing: 2px;
  color: #fff;
  border: 1px solid #fff;
  padding: 3px 5px;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.eventsSliderList .articleWrap {
  padding: 15px;
  min-height: 177px;
}
.eventsSliderList .title {
  font: 14px/1.5 "STXihei", HEITI TC, "HEITI TC", "黑體-繁", "微軟正黑體", "黑體", sans-serif;
  letter-spacing: 1px;
  color: #804f21;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #b18046;
}
.eventsSliderList .content {
  font: 12px/1.8 "STXihei", HEITI TC, "HEITI TC", "黑體-繁", "微軟正黑體", "黑體", sans-serif;
  letter-spacing: 1px;
  color: #b18046;
}

.eventsPrev, .eventsNext {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 13px;
  cursor: pointer;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.eventsPrev:hover, .eventsNext:hover {
  opacity: .6;
}
@media screen and (max-width: 63.9375em) {
  .eventsPrev img, .eventsNext img {
    width: 11px;
    height: auto;
  }
}

.eventsNext {
  left: auto;
  right: 13px;
}

.footerContainer {
  padding: 26px 0;
  border-top: 9px solid #956432;
}

@media screen and (max-width: 63.9375em) {
  .unitWrap {
    margin-bottom: 25px;
  }
}

.unit {
  margin-right: 35px;
}
@media screen and (max-width: 63.9375em) {
  .unit {
    margin-right: 0;
    margin-bottom: 25px;
  }
}
.unit .title {
  font: 12px/1 "STXihei", HEITI TC, "HEITI TC", "黑體-繁", "微軟正黑體", "黑體", sans-serif;
  letter-spacing: 1px;
  color: #fffcf3;
  margin-right: 15px;
  white-space: nowrap;
}

.webcount {
  margin-bottom: 5px;
}
.webcount .title {
  font: 12px/1 "STXihei", HEITI TC, "HEITI TC", "黑體-繁", "微軟正黑體", "黑體", sans-serif;
  color: #fffcf3;
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
}
.webcount .total {
  font: 13px/1 "STXihei", HEITI TC, "HEITI TC", "黑體-繁", "微軟正黑體", "黑體", sans-serif;
  letter-spacing: 4px;
  color: #fff;
  padding: 2px 3px 2px 7px;
  display: inline-block;
  vertical-align: middle;
  background-color: #825d31;
}

.copyright {
  font: 12px/1.8 "STXihei", HEITI TC, "HEITI TC", "黑體-繁", "微軟正黑體", "黑體", sans-serif;
  color: #fffcf3;
}

.shareWrap {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 57px;
  white-space: nowrap;
  cursor: pointer;
}
.shareWrap:hover .shareList .item {
  top: 0;
  opacity: 1;
}
.shareWrap:hover .shareToggle {
  fill: #666;
}

.shareList {
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
}
.shareList .jssocials-share {
  margin-right: 7px;
}
.shareList .item {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: 40px;
  opacity: 0;
  -webkit-transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.shareList .item:nth-child(3) {
  -webkit-transition-delay: .1s;
  transition-delay: .1s;
}
.shareList .item:nth-child(2) {
  -webkit-transition-delay: .2s;
  transition-delay: .2s;
}
.shareList .item:nth-child(1) {
  -webkit-transition-delay: .3s;
  transition-delay: .3s;
}

.shareToggle {
  display: inline-block;
  vertical-align: middle;
  fill: #fffcf3;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.teamList li {
  padding: 65px 0;
}
@media screen and (max-width: 63.9375em) {
  .teamList li {
    padding: 30px 0;
  }
}
.teamList li:nth-child(odd) {
  background: url(../images/team-bg-1.png) repeat;
}
.teamList li:nth-child(odd) .note {
  text-align: right;
}
.teamList li:nth-child(even) {
  background: url(../images/team-bg-2.png) repeat;
}
.teamList .articleWrap {
  margin-left: 50px;
}
@media screen and (max-width: 63.9375em) {
  .teamList .articleWrap {
    margin-left: 0;
  }
}
.teamList .title {
  font: 21px/1.5 "STXihei", HEITI TC, "HEITI TC", "黑體-繁", "微軟正黑體", "黑體", sans-serif;
  text-align: justify;
  text-align-last: justify;
  color: #804f21;
  margin-bottom: 35px;
  position: relative;
}
@media screen and (max-width: 63.9375em) {
  .teamList .title {
    font-size: 14px;
    margin-bottom: 20px;
  }
}
.teamList .title span {
  position: absolute;
  top: -2px;
  left: -39px;
}
.teamList .note {
  font: 17px/1.8 "STXihei", HEITI TC, "HEITI TC", "黑體-繁", "微軟正黑體", "黑體", sans-serif;
  letter-spacing: 3px;
  color: #b18046;
  margin-bottom: 35px;
}
@media screen and (max-width: 63.9375em) {
  .teamList .note {
    font-size: 13px;
    margin-bottom: 0;
  }
}
.teamList .content {
  font: 15px/1.8 "STXihei", HEITI TC, "HEITI TC", "黑體-繁", "微軟正黑體", "黑體", sans-serif;
  letter-spacing: 1px;
  color: #b18046;
}
@media screen and (max-width: 63.9375em) {
  .teamList .content {
    font-size: 12px;
  }
}

.selectionLogo {
  padding-top: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid #b18046;
}
@media screen and (max-width: 63.9375em) {
  .selectionLogo {
    padding-top: 26px;
    padding-bottom: 26px;
  }
}

.productsList {
  padding: 50px 37px 80px;
}
@media screen and (max-width: 63.9375em) {
  .productsList {
    padding: 30px 14px 40px;
  }
}
.productsList > .column, .productsList > .columns {
  padding: 0 20px;
}
@media screen and (max-width: 63.9375em) {
  .productsList > .column, .productsList > .columns {
    padding: 0 6px;
  }
}
.productsList li {
  overflow: hidden;
}
@media screen and (max-width: 63.9375em) {
  .productsList li {
    margin-bottom: 10px;
  }
}
@media print, screen and (min-width: 64em) {
  .productsList li:hover .pic > img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  .productsList li:hover .hoverBlock {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
.productsList .pic {
  position: relative;
  overflow: hidden;
}
.productsList .pic:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 8px solid #f5f0dd;
}
.productsList .pic > img {
  -webkit-transition: all 3s;
  transition: all 3s;
}
.productsList .hoverBlock {
  font: 13px/1 "STXihei", HEITI TC, "HEITI TC", "黑體-繁", "微軟正黑體", "黑體", sans-serif;
  letter-spacing: 3px;
  color: #b1a08b;
  text-align: center;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 16px 0;
  background-color: rgba(255, 255, 255, 0.75);
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  -webkit-transition: all .3s;
  transition: all .3s;
}
.productsList .articleWrap {
  padding: 14px;
  text-align: center;
}
.productsList .title {
  padding: 10px 0;
  border-top: 1px solid #b28146;
  border-bottom: 1px solid #b28146;
  margin-bottom: 7px;
  font-family: "STXihei", HEITI TC, "HEITI TC", "黑體-繁", "微軟正黑體", "黑體", sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 1px;
  line-height: 1.5;
  color: #ac7e45;
}
.productsList .title .xx {
  margin: 0px auto;
}
.productsList .note {
  font: 13px/1.8 "STXihei", HEITI TC, "HEITI TC", "黑體-繁", "微軟正黑體", "黑體", sans-serif;
  letter-spacing: 1px;
  color: #b18046;
}

.videoWrap {
  padding: 20px 0;
}

.youtubeWrap {
  width: 100%;
}

.storeOutWrap {
  padding: 60px 0 0;
}

.storeWrap {
  margin-bottom: 95px;
}
.storeWrap .head {
  font: 18px/1 "STXihei", HEITI TC, "HEITI TC", "黑體-繁", "微軟正黑體", "黑體", sans-serif;
  letter-spacing: 5px;
  color: #804f21;
  padding-bottom: 25px;
  border-bottom: 2px solid #804f21;
}

.storeList li {
  padding: 25px 0;
  border-bottom: 1px solid #b18046;
}
.storeList .title {
  font: 14px/1.5 "STXihei", HEITI TC, "HEITI TC", "黑體-繁", "微軟正黑體", "黑體", sans-serif;
  letter-spacing: 3px;
  color: #b18046;
  margin-bottom: 5px;
}
.storeList .content {
  font: 12px/1.8 "STXihei", HEITI TC, "HEITI TC", "黑體-繁", "微軟正黑體", "黑體", sans-serif;
  letter-spacing: 1px;
  color: #b1a08b;
}

.detailSliderPager {
  padding: 20px 51px;
}
@media screen and (max-width: 63.9375em) {
  .detailSliderPager {
    padding: 10px 14px;
  }
}
.detailSliderPager > .column, .detailSliderPager > .columns {
  padding: 0 6px;
}
.detailSliderPager a {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}

@media screen and (max-width: 63.9375em) {
  .productsDetailWrap {
    padding-bottom: 0;
  }
}

.detailSliderWrap {
  background-color: #fff;
  padding: 100px 30px;
  position: relative;
}
@media screen and (max-width: 63.9375em) {
  .detailSliderWrap {
    padding: 30px 20px;
  }
}
.detailSliderWrap .logo {
  margin-bottom: 35px;
}

.detailSliderList {
  text-align: center;
}
.detailSliderList li:focus {
  outline: none;
}
.detailSliderList img {
  margin: 0 auto;
}

.detailArticleWrap {
  position: relative;
  padding-top: 57px;
  padding-bottom: 57px;
}
@media screen and (max-width: 63.9375em) {
  .detailArticleWrap {
    padding-top: 30px;
    padding-bottom: 30px;
  }
}
.detailArticleWrap .logo {
  position: absolute;
  top: 57px;
  right: 57px;
}
.detailArticleWrap .cat {
  font: 16px/1.5 "STXihei", HEITI TC, "HEITI TC", "黑體-繁", "微軟正黑體", "黑體", sans-serif;
  letter-spacing: 2px;
  color: #804f21;
  margin-bottom: 12px;
}
.detailArticleWrap .title {
  font: 28px/1.5 "STXihei", HEITI TC, "HEITI TC", "黑體-繁", "微軟正黑體", "黑體", sans-serif;
  letter-spacing: 4px;
  color: #804f21;
  margin-bottom: 5px;
}
.detailArticleWrap .price {
  font: 600 14px/1.8 Arial, Helvetica, sans-serif;
  letter-spacing: 3px;
  color: #804f21;
  text-align: right;
  padding-bottom: 14px;
  border-bottom: 1px solid #b18046;
  margin-bottom: 20px;
}
.detailArticleWrap .price span {
  font-size: 12px;
}
.detailArticleWrap .content {
  font: 13px/2.2 "STXihei", HEITI TC, "HEITI TC", "黑體-繁", "微軟正黑體", "黑體", sans-serif;
  letter-spacing: 1px;
  color: #b1a08b;
}
.detailArticleWrap .content span {
  font-size: 14px;
  color: #b18046;
  font-weight: 600;
}
.detailArticleWrap .content b {
  font-weight: 600;
}

.mobile-banner {
  padding-bottom: 20px;
  border-bottom: 9px solid #956432;
}

.footer-shareList, .mobile-topmenu-shareList {
  margin: 0 auto 30px;
  width: 150px;
}
.footer-shareList img.jssocials-share-logo, .mobile-topmenu-shareList img.jssocials-share-logo {
  width: 35px;
  height: auto;
}

@media screen and (max-width: 63.9375em) {
  .mobile-footer-custom {
    width: 240px;
    margin: 0 auto;
    padding: 0;
  }
}

.hamburger {
  width: 20px;
  height: 14px;
  position: relative;
}
.hamburger:after {
  content: '';
  width: 200%;
  height: 200%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.hamburger.is-show .item1 {
  top: 50%;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transition: top 0.4s ,transform 0.4s 0.4s;
  -webkit-transition: top 0.4s ,transform 0.4s 0.4s;
}
.hamburger.is-show .item2 {
  opacity: 0;
}
.hamburger.is-show .item3 {
  top: 50%;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transition: top 0.4s ,transform 0.4s 0.4s;
  -webkit-transition: top 0.4s ,transform 0.4s 0.4s;
}
.hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #fff;
}
.hamburger .item1 {
  position: absolute;
  top: 0;
  transition: transform 0.4s ,top 0.4s 0.4s;
  -webkit-transition: transform 0.4s ,top 0.4s 0.4s;
}
.hamburger .item2 {
  position: absolute;
  top: 50%;
  transition: all 0.8s;
  -webkit-transition: all 0.8s;
}
.hamburger .item3 {
  position: absolute;
  top: 100%;
  transition: transform 0.4s ,top 0.4s 0.4s;
  -webkit-transition: transform 0.4s ,top 0.4s 0.4s;
}

.mobile-topmenuWrap-space {
  height: 54px;
}

.mobile-topmenuWrap {
  z-index: 39;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  padding: 20px 0;
}

.mobile-topmenu-close {
  width: 20px;
  height: 20px;
  position: relative;
  padding: 30px 0;
}
.mobile-topmenu-close:after {
  content: '';
  width: 200%;
  height: 200%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.mobile-topmenu-close span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #fff;
}
.mobile-topmenu-close .item1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}
.mobile-topmenu-close .item2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.mobile-topmenu-shareList {
  margin-left: 21px;
  margin-top: 30px;
}

.mobile-team-info {
  margin-bottom: 26px;
}

.mti-pic {
  width: 25%;
}

.mti-article {
  width: 58.33333%;
  margin-left: 40px;
}
@media print, screen and (min-width: 64em) {
  .mti-article {
    width: 100%;
    margin-left: 0;
  }
}

.onlineshop {
  margin-top: 25px;
  text-align: right;
  font-family: "STXihei", HEITI TC, "HEITI TC", "黑體-繁", "微軟正黑體", "黑體", sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 1px;
  color: #b18046;
}
.onlineshop svg {
  margin-right: 6px;
  transition: all .5s;
}
.onlineshop a {
  display: inline-block;
  vertical-align: middle;
  border-bottom: 1px solid #804f21;
  padding-bottom: 4px;
}
.onlineshop .one {
  margin-bottom: 12px;
  transition: all .5s;
}
.onlineshop .one:hover {
  color: #804f21;
}
.onlineshop .one:hover svg {
  margin-right: 13px;
}
.onlineshop .two {
  transition: all .5s;
}
.onlineshop .two:hover {
  color: #804f21;
}
.onlineshop .two:hover svg {
  margin-right: 13px;
}

/*# sourceMappingURL=style.css.map */