@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&family=Noto+Serif+TC:wght@200..900&family=Roboto+Slab:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

.feature__page p.hidden::before, .feature__page section .slideshow--column .slider__item::after, .feature__page section .slideshow .slider__thumbnail .thumbnail__img::before, .feature__page section .embed:before, .feature__page section .card__img::before, .board::before, button.btn::before, button.btn::after,
a.btn::before,
a.btn::after, nav.menubar--sub2 ul.menubar__user::before, nav.menubar--sub ul.menubar__user::before {
  content: "";
  display: block;
}

.feature__page .sns__group, .feature__page section .sponsor__group, nav.menubar--belt ul, nav.menubar--sub2 > .container ul, nav.menubar--sub > .container ul, .list-reset {
  list-style: none;
  padding: 0;
  margin: 0;
}

/*! normalize.css v3.0.0 | HTML5 Display Definitions | MIT License | git.io/normalize */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}

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

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

[hidden],
template {
  display: none;
}

/*! normalize.css v3.0.0 | Base | MIT License | git.io/normalize */
html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  margin: 0;
}

/*! normalize.css v3.0.0 | Links | MIT License | git.io/normalize */
a {
  background: transparent;
}

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

/*! normalize.css v3.0.0 | Embedded Content | MIT License | git.io/normalize */
img {
  border: 0;
}

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

/*! normalize.css v3.0.0 | Figures | MIT License | git.io/normalize */
figure {
  margin: 1em 40px;
}

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

pre {
  overflow: auto;
}

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

/*! normalize.css v3.0.0 | Forms | MIT License | git.io/normalize */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}

button {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
html input[type=button],
input[type=reset],
input[type=submit] {
  -webkit-appearance: button;
  cursor: pointer;
}

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

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

input {
  line-height: normal;
}

input[type=checkbox],
input[type=radio] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0;
}

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

input[type=search] {
  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

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

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

legend {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
}

optgroup {
  font-weight: bold;
}

/*! normalize.css v3.0.0 | Tables | MIT License | git.io/normalize */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

ul,
ol {
  padding-left: 1.15em;
}

.upper-latin {
  list-style-type: upper-alpha;
}

.decimal {
  list-style-type: decimal;
}

.disc {
  list-style-type: disc;
}

.number__brackets li {
  position: relative;
  padding-left: 2em;
  line-height: 1.5;
}
.number__brackets li span {
  position: absolute;
  left: 0;
}

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

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

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

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

.font-weight-400 {
  font-weight: 400;
}

.font-weight-500 {
  font-weight: 500;
}

.font-weight-600 {
  font-weight: 600;
}

@media screen and (min-width: 768px) {
  .flex-md {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
@media screen and (min-width: 1024px) {
  .flex-lg {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
@media screen and (min-width: 1280px) {
  .flex-xl {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

html {
  min-height: 100%;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, San Francisco, Roboto, Segoe UI, Helvetica Neue, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
          text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
}

.sr-only {
  position: absolute !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 0 !important;
  height: 0 !important;
  font-size: 0 !important;
}

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  position: relative;
  min-height: 100%;
  padding-bottom: 0 !important;
}
@media screen and (min-width: 1024px) {
  body {
    font-family: "Roboto", "Noto Sans TC", "思源黑體 TC", "思源黑體 TW", "思源黑體", "微軟正黑體", "繁黑體", "Microsoft JhengHei", "Lato", "Arial", "Segoe UI Emoji", "Segoe UI Symbol", "新細明體", sans-serif;
    font-display: swap;
  }
}
body.opened {
  overflow: hidden;
}

.serif {
  font-family: "Noto Serif TC", "思源宋體 TC", "思源宋體 TW", "思源宋體", serif;
}

a, button.btn {
  text-decoration: none;
}
@media screen and (min-width: 1024px) {
  a, button.btn {
    -webkit-transition: color 0.2s, border 0.2s, background 0.2s;
    transition: color 0.2s, border 0.2s, background 0.2s;
  }
}

img {
  display: block;
}

.clearfix,
.clearfix::before,
.clearfix::after {
  display: table;
  clear: both;
}

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

@media screen and (max-width: 1023px) {
  .desktop {
    display: none;
  }
}

@media screen and (min-width: 1024px) {
  .mobile {
    display: none;
  }
}

h5,
.h5, h4,
.h4, h3,
.h3, h2,
.h2, h1,
.h1 {
  margin-top: 1em;
  margin-bottom: 1em;
}

h5, h4, h3, h2, h1 {
  font-weight: 600;
}
@media screen and (min-width: 1024px) {
  h5, h4, h3, h2, h1 {
    font-weight: 500;
  }
}

h5 .heading__icon,
.h5 .heading__icon, h4 .heading__icon,
.h4 .heading__icon, h3 .heading__icon,
.h3 .heading__icon, h2 .heading__icon,
.h2 .heading__icon, h1 .heading__icon,
.h1 .heading__icon {
  display: inline-block;
  margin-right: 10px;
  font-size: 0.9em;
  vertical-align: middle;
}
h5 .heading__icon--correct,
.h5 .heading__icon--correct, h4 .heading__icon--correct,
.h4 .heading__icon--correct, h3 .heading__icon--correct,
.h3 .heading__icon--correct, h2 .heading__icon--correct,
.h2 .heading__icon--correct, h1 .heading__icon--correct,
.h1 .heading__icon--correct {
  color: #d1b156;
}
h5 .heading__icon--notice,
.h5 .heading__icon--notice, h4 .heading__icon--notice,
.h4 .heading__icon--notice, h3 .heading__icon--notice,
.h3 .heading__icon--notice, h2 .heading__icon--notice,
.h2 .heading__icon--notice, h1 .heading__icon--notice,
.h1 .heading__icon--notice {
  color: #D60C18;
}
h5 .heading__icon--error,
.h5 .heading__icon--error, h4 .heading__icon--error,
.h4 .heading__icon--error, h3 .heading__icon--error,
.h3 .heading__icon--error, h2 .heading__icon--error,
.h2 .heading__icon--error, h1 .heading__icon--error,
.h1 .heading__icon--error {
  color: #D60C18;
}
h5 .heading__text,
.h5 .heading__text, h4 .heading__text,
.h4 .heading__text, h3 .heading__text,
.h3 .heading__text, h2 .heading__text,
.h2 .heading__text, h1 .heading__text,
.h1 .heading__text {
  display: inline-block;
  vertical-align: middle;
  line-height: 1.25;
}

.fontsize--1 {
  font-size: 1.625rem;
}
@media screen and (min-width: 1024px) {
  .fontsize--1 {
    font-size: 2rem;
  }
}

.fontsize--2 {
  font-size: 1.25rem;
}
@media screen and (min-width: 1024px) {
  .fontsize--2 {
    font-size: 1.375rem;
  }
}

.fontsize--3 {
  font-size: 1.125rem;
}
@media screen and (min-width: 1024px) {
  .fontsize--3 {
    font-size: 1.125rem;
  }
}

.fontsize--4 {
  font-size: 1rem;
}
@media screen and (min-width: 1024px) {
  .fontsize--4 {
    font-size: 1rem;
  }
}

.fontsize--5 {
  font-size: 0.875rem;
}
@media screen and (min-width: 1024px) {
  .fontsize--5 {
    font-size: 0.875rem;
  }
}

h1,
.h1 {
  font-size: 1.625rem;
}
@media screen and (min-width: 1024px) {
  h1,
  .h1 {
    font-size: 2rem;
  }
}

h2,
.h2 {
  font-size: 1.25rem;
}
@media screen and (min-width: 1024px) {
  h2,
  .h2 {
    font-size: 1.375rem;
  }
}

h3,
.h3 {
  color: #171717;
  font-size: 1.125rem;
  line-height: 2;
  word-break: break-word;
}

h4,
.h4 {
  color: #D60C18;
  font-size: 1rem;
  line-height: 1.2;
  word-break: break-word;
}

h5,
.h5 {
  color: #939EA7;
  font-size: 0.875rem;
  line-height: 1.2;
  word-break: break-word;
}

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

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

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

@media screen and (min-width: 1024px) {
  .text-d-left {
    text-align: left;
  }
  .text-d-center {
    text-align: center;
  }
  .text-d-right {
    text-align: right;
  }
}
@media screen and (max-width: 1023px) {
  .text-m-left {
    text-align: left;
  }
  .text-m-center {
    text-align: center;
  }
  .text-m-right {
    text-align: right;
  }
}
p {
  color: #171717;
  word-break: break-word;
}
p .heading__icon {
  display: inline-block;
  margin-right: 10px;
  font-size: 0.9em;
  vertical-align: sub;
}
p a.link-btn {
  color: #d1b156;
  text-decoration: underline;
}
p a.link-btn:hover {
  color: #D60C18;
}

.summary {
  color: #d1b156;
}

blockquote {
  color: #171717;
  font-weight: 500;
}

ul.keyword {
  margin: 1.125em 0;
  padding: 0;
  font-size: 0;
  list-style: none;
}
ul.keyword li {
  display: inline-block;
  font-size: 1.125em;
}
ul.keyword li::after {
  content: "、";
}
ul.keyword li:last-child::after {
  content: "";
}
ul.keyword li a {
  display: inline-block;
  color: #D60C18;
}
ul.keyword li a:hover {
  color: #9D0505;
}

body main p {
  font-size: 1rem;
  line-height: 1.6;
}
body.feature__page h1,
body.feature__page .h1 {
  color: #171717;
  font-size: 28px;
  line-height: 1.3;
}
@media screen and (min-width: 768px) {
  body.feature__page h1,
  body.feature__page .h1 {
    font-size: 40px;
  }
}
body.feature__page h2,
body.feature__page .h2 {
  color: #171717;
  font-size: 22px;
  line-height: 1.3;
}
@media screen and (min-width: 768px) {
  body.feature__page h2,
  body.feature__page .h2 {
    font-size: 24px;
  }
}
body.feature__page main p {
  font-size: 1.125rem;
  line-height: 1.8;
}

strong, b {
  font-weight: 600;
}
@media screen and (min-width: 1024px) {
  strong, b {
    font-weight: 500;
  }
}

@font-face {
  font-family: "icomoon";
  src: url("../../../../fonts/icomoon.eot?d0n253");
  src: url("../../../../fonts/icomoon.eot?d0n253#iefix") format("embedded-opentype"), url("../../../../fonts/icomoon.ttf?d0n253") format("truetype"), url("../../../../fonts/icomoon.woff?d0n253") format("woff"), url("../../../../fonts/icomoon.svg?d0n253#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
[class^=icon-],
[class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "icomoon" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-search:before {
  content: "\e917";
}

.icon-check-circle:before {
  content: "\e90d";
}

.icon-exclamation-circle:before {
  content: "\e90f";
}

.icon-question-circle:before {
  content: "\e90e";
}

.icon-check-solid:before {
  content: "\e92a";
}

.icon-exclamation-solid:before {
  content: "\e93a";
}

.icon-error-solid:before {
  content: "\e935";
}

.icon-eyeoff:before {
  content: "\e90b";
}

.icon-eyeon:before {
  content: "\e90c";
}

.icon-sort:before {
  content: "\e910";
}

.icon-caret-down:before {
  content: "\e911";
}

.icon-caret-up:before {
  content: "\e912";
}

.icon-caret-right:before {
  content: "\e927";
}

.icon-caret-left:before {
  content: "\e928";
}

.icon-left:before {
  content: "\e91e";
}

.icon-right:before {
  content: "\e91f";
}

.icon-down:before {
  content: "\e920";
}

.icon-up:before {
  content: "\e922";
}

.icon-arrow-right:before {
  content: "\e933";
}

.icon-arrow-left:before {
  content: "\e934";
}

.icon-check:before {
  content: "\e929";
}

.icon-cancel:before {
  content: "\e92e";
}

.icon-minus:before {
  content: "\e938";
}

.icon-plus:before {
  content: "\e939";
}

.icon-facebook:before {
  content: "\e91a";
}

.icon-fb:before {
  content: "\e91a";
}

.icon-instagram:before {
  content: "\e91b";
}

.icon-line:before {
  content: "\e91c";
}

.icon-twitter:before {
  content: "\e900";
}

.icon-rss:before {
  content: "\e921";
}

.icon-apple:before {
  content: "\e901";
}

.icon-security:before {
  content: "\e944";
}

.icon-pushpin:before {
  content: "\e945";
}

.icon-pen:before {
  content: "\e904";
}

.icon-mailing:before {
  content: "\e903";
}

.icon-link:before {
  content: "\e902";
}

.icon-bookmark-filled:before {
  content: "\e932";
}

.icon-bookmark-outlined:before {
  content: "\e923";
}

.icon-mail-filled:before {
  content: "\e947";
}

.icon-mail:before {
  content: "\e925";
}

.icon-coin:before {
  content: "\e92f";
}

.icon-fontsize:before {
  content: "\e930";
}

.icon-download-pdf:before {
  content: "\e949";
}

.icon-zoom:before {
  content: "\e94a";
}

.icon-note:before {
  content: "\e94b";
}

.icon-volume:before {
  content: "\e94c";
}

.icon-play-solid:before {
  content: "\e94d";
}

.icon-headphones:before {
  content: "\e94e";
}

.icon-pause-solid:before {
  content: "\e94f";
}

.icon-user-filled:before {
  content: "\e918";
}

.icon-user-outlined:before {
  content: "\e919";
}

.icon-play:before {
  content: "\e91d";
}

.icon-lock:before {
  content: "\e936";
}

.icon-download:before {
  content: "\e937";
}

.icon-internet:before {
  content: "\e93b";
}

.icon-member-notification:before {
  content: "\e93c";
}

.icon-member-download:before {
  content: "\e93d";
}

.icon-member-invite:before {
  content: "\e93e";
}

.icon-member-lecture:before {
  content: "\e93f";
}

.icon-benefits:before {
  content: "\e940";
}

.icon-coupon:before {
  content: "\e941";
}

.icon-gift:before {
  content: "\e942";
}

.icon-member-only:before {
  content: "\e943";
}

.hamburger {
  position: relative;
  width: 20px;
  padding: 0;
  border: 0;
  background-color: transparent;
  cursor: pointer;
}
.hamburger span {
  display: block;
  width: 100%;
  height: 3px;
  background-color: #171717;
  opacity: 1;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-transition: background 0.4s;
  transition: background 0.4s;
}
.hamburger span + span {
  margin-top: 4px;
}
.hamburger:hover span, .hamburger.active span {
  background-color: #171717;
}

.icon-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 40px;
  height: 40px;
  font-size: 1.125rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  cursor: pointer;
}
.icon-btn-center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media screen and (min-width: 768px) {
  .icon-btn {
    width: 44px;
    height: 44px;
  }
}
@media screen and (min-width: 1024px) {
  .icon-btn {
    -webkit-transition: color 0.3s, background-color 0.3s;
    transition: color 0.3s, background-color 0.3s;
  }
}

button.icon-btn {
  width: 44px;
  height: 44px;
  border: 0;
}

.normal-status:hover, .normal-status.active {
  color: #D60C18;
}

.navi-btn {
  width: 34px;
  height: 44px;
  color: #fff;
  background-color: #939EA7;
}
.navi-btn:hover, .navi-btn.active {
  background-color: #171717;
}

button.share-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 80px;
  padding: 0;
  color: #fff;
  line-height: 40px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border: 0;
}
@media screen and (min-width: 768px) {
  button.share-btn {
    width: 100px;
    padding-top: 2px;
    line-height: 42px;
  }
}
button.share-btn > * {
  font-size: 1rem !important;
}
@media screen and (min-width: 768px) {
  button.share-btn > * {
    font-size: 1.125rem !important;
  }
}
button.share-btn span {
  margin-left: 5px;
}
button.share-btn-copy {
  background-color: #6B7780;
}
button.share-btn-copy:hover, button.share-btn-copy.active {
  background-color: #48545D;
}

a.sns {
  display: block;
  color: #939EA7;
}
a.sns-facebook:hover, a.sns-facebook.active {
  color: #1877F2;
}
a.sns-instagram:hover, a.sns-instagram.active {
  color: #7024C4;
}
a.sns-line:hover, a.sns-line.active {
  color: #00C200;
}
a.sns-rss:hover, a.sns-rss.active {
  color: #FF5700;
}
a.share-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 80px;
  color: #fff;
  line-height: 40px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (min-width: 768px) {
  a.share-btn {
    width: 100px;
    padding-top: 2px;
    line-height: 42px;
  }
}
a.share-btn > * {
  font-size: 1rem !important;
}
@media screen and (min-width: 768px) {
  a.share-btn > * {
    font-size: 1.125rem !important;
  }
}
a.share-btn i:hover, a.share-btn i.active {
  color: #fff;
}
a.share-btn span {
  margin-left: 5px;
}
a.share-btn-facebook {
  background-color: #1877F2;
}
a.share-btn-facebook:hover, a.share-btn-facebook.active {
  background-color: #0d6ae4;
}
a.share-btn-line {
  background-color: #00C200;
}
a.share-btn-line:hover, a.share-btn-line.active {
  background-color: #00a900;
}
a.share-btn-mail {
  background-color: #d1b156;
}
a.share-btn-mail:hover, a.share-btn-mail.active {
  background-color: #cca842;
}
a.bookmark-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 40px;
  height: 40px;
  color: #fff;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: #D60C18;
}
a.bookmark-btn > i {
  font-size: 1.125rem !important;
}
a.bookmark-btn i:hover, a.bookmark-btn i.active {
  color: #fff;
}

.social_login {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 50px;
  color: #171717;
  font-size: 1rem;
  border: 1px solid #939EA7;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.social_login + .social_login {
  margin-top: 20px;
}
.social_login i.icon, .social_login img.icon, .social_login img.icon-cwlc {
  margin-right: 0.375em;
}
.social_login i.icon {
  font-size: 1.5em;
}
.social_login img.icon {
  height: 1.5em;
}
.social_login img.icon-cwlc {
  height: 1em;
}
.social_login:hover {
  border-color: #171717;
}
.social_login--facebook i.icon {
  color: #1877F2;
}
.social_login--line i.icon {
  color: #00C200;
}
.social_login--google i.icon {
  color: #EA4335;
}
.social_login--apple i.icon {
  color: #171717;
}

.circle__btn {
  display: block;
  color: #6B7780;
  border: solid #EEEEEE;
  background-color: #fff;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  cursor: pointer;
  width: 2.5rem;
  height: 2.5rem;
  border-width: 1px;
  border-radius: 50%;
}
@media screen and (min-width: 1024px) {
  .circle__btn {
    width: 3rem;
    height: 3rem;
  }
}
.circle__btn i.icon {
  display: block;
  font-size: 1.125rem;
  line-height: calc(2.5rem - 2px);
  text-align: center;
}
@media screen and (min-width: 1024px) {
  .circle__btn i.icon {
    line-height: calc(3rem - 2px);
  }
}
.circle__btn:hover {
  color: #D60C18;
  border-color: #D60C18;
}

nav a {
  display: block;
}
nav.menubar--left {
  position: fixed;
  top: 0;
  left: -300px;
  width: 300px;
  max-height: 100vh;
  font-size: 1rem;
  border: 1px solid #D3D5D7;
  background-color: #fff;
  overflow: scroll;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  z-index: 12;
}
@media screen and (min-width: 1024px) {
  nav.menubar--left {
    overflow: hidden scroll;
  }
}
nav.menubar--left ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
nav.menubar--left ul li {
  line-height: 1;
}
nav.menubar--left ul li .li__group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
nav.menubar--left ul li .li__group a {
  color: #171717;
}
nav.menubar--left ul li .li__group:hover a,
nav.menubar--left ul li .li__group:hover i {
  color: #D60C18;
}
nav.menubar--left ul li .li__group a.sns-facebook:hover > i,
nav.menubar--left ul li .li__group a.sns-facebook:hover > span {
  color: #1877F2;
}
nav.menubar--left ul li .li__group a.sns-line:hover > i,
nav.menubar--left ul li .li__group a.sns-line:hover > span {
  color: #00C200;
}
nav.menubar--left ul li.now {
  background-color: #D60C18;
}
nav.menubar--left ul li.now > .li__group > a,
nav.menubar--left ul li.now > .li__group > i {
  color: #fff;
}
nav.menubar--left > ul + ul {
  border-top: 1px solid #D3D5D7;
}
nav.menubar--left > ul > li .li__group {
  position: relative;
}
nav.menubar--left > ul > li .li__group > a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  padding: 17px 25px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
nav.menubar--left > ul > li .li__group > a.sns i + span {
  margin-left: 5px;
}
nav.menubar--left > ul > li .li__group > i.more {
  position: absolute;
  top: 0;
  right: 0;
  padding: 17px 25px;
  font-weight: bold;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
nav.menubar--left > ul > li .li__group > i.more.active {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
nav.menubar--left > ul > li > ul {
  display: none;
  background-color: #EEEEEE;
}
nav.menubar--left > ul > li > ul > li .li__group > a {
  padding: 17px 50px;
}
nav.menubar--left.opened {
  left: 0;
}
nav.menubar--sub {
  position: relative;
  font-size: 14px;
  z-index: 10;
}
@media screen and (min-width: 1024px) {
  nav.menubar--sub {
    background-color: #6B7780;
    -webkit-transition: background-color, 0.3s;
    transition: background-color, 0.3s;
  }
  nav.menubar--sub:hover {
    background-color: #939EA7;
  }
}
@media screen and (max-width: 1023px) {
  nav.menubar--sub {
    position: absolute;
    top: 50%;
    right: 10px;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
}
nav.menubar--sub > .container {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
nav.menubar--sub > .container ul {
  position: relative;
}
nav.menubar--sub > .container > ul {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
@media screen and (max-width: 1023px) {
  nav.menubar--sub > .container > ul:first-child {
    display: none;
  }
}
nav.menubar--sub > .container > ul > li {
  margin-left: 16px;
}
nav.menubar--sub > .container > ul > li > a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-top: 10px;
  padding-bottom: 10px;
  color: #171717;
  line-height: 1rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (min-width: 1024px) {
  nav.menubar--sub > .container > ul > li > a {
    color: #fff;
  }
}
nav.menubar--sub > .container > ul > li > a i {
  margin-left: 7px;
  height: 0.875em;
  font-weight: bold;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
nav.menubar--sub > .container > ul > li > a i.deg {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
nav.menubar--sub > .container > ul > li > a:hover {
  color: #171717;
}
nav.menubar--sub ul.menubar__user {
  margin-left: 16px;
}
nav.menubar--sub ul.menubar__user::before {
  position: absolute;
  top: 10px;
  left: 0px;
  background-color: #fff;
}
@media screen and (min-width: 1024px) {
  nav.menubar--sub ul.menubar__user::before {
    width: 1px;
    height: 1rem;
  }
}
nav.menubar--sub ul.menubar__user > li {
  position: relative;
}
nav.menubar--sub ul.menubar__user > li .menubar__user__slide {
  display: none;
  position: absolute;
  left: -10px;
  min-width: calc(100% + 20px);
  width: 100%;
}
nav.menubar--sub ul.menubar__user > li .menubar__user__slide ul {
  background-color: #fff;
  border: 1px solid #D3D5D7;
}
nav.menubar--sub ul.menubar__user > li .menubar__user__slide ul li a {
  padding: 15px 20px;
  color: #171717;
}
nav.menubar--sub ul.menubar__user > li .menubar__user__slide ul li a:hover {
  color: #D60C18;
}
nav.menubar--sub ul.menubar__user > li .menubar__user__slide ul li.hr {
  height: 1px;
  background-color: #D3D5D7;
}
nav.menubar--sub2 {
  position: absolute;
  top: 50%;
  right: 10px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 10;
}
nav.menubar--sub2 > .container {
  width: auto;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
nav.menubar--sub2 > .container ul {
  position: relative;
}
nav.menubar--sub2 > .container > ul:not(.sns__group) {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
@media screen and (max-width: 1023px) {
  nav.menubar--sub2 > .container > ul:not(.sns__group):first-child {
    display: none;
  }
}
nav.menubar--sub2 > .container > ul:not(.sns__group) > li {
  margin-left: 16px;
}
nav.menubar--sub2 > .container > ul:not(.sns__group) > li > .menubar__user--login {
  padding-top: 10px;
  padding-bottom: 10px;
  color: #171717;
  line-height: 1rem;
  cursor: pointer;
}
nav.menubar--sub2 > .container > ul:not(.sns__group) > li > .menubar__user--login i {
  margin-left: 7px;
  height: 0.875em;
  font-weight: bold;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
nav.menubar--sub2 > .container > ul:not(.sns__group) > li > .menubar__user--login i.deg {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
@media screen and (max-width: 767px) {
  nav.menubar--sub2 > .container > ul:not(.sns__group) > li > .menubar__user--login .desktop {
    display: none;
  }
  nav.menubar--sub2 > .container > ul:not(.sns__group) > li > .menubar__user--login .mobile {
    font-size: 1.5em;
  }
}
@media screen and (min-width: 768px) {
  nav.menubar--sub2 > .container > ul:not(.sns__group) > li > .menubar__user--login .desktop {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  nav.menubar--sub2 > .container > ul:not(.sns__group) > li > .menubar__user--login .mobile {
    display: none;
  }
  nav.menubar--sub2 > .container > ul:not(.sns__group) > li > .menubar__user--login:hover {
    color: #D60C18;
  }
}
nav.menubar--sub2 ul.menubar__user {
  margin-left: 16px;
}
nav.menubar--sub2 ul.menubar__user::before {
  position: absolute;
  top: 10px;
  left: 0px;
  background-color: #171717;
}
@media screen and (min-width: 1024px) {
  nav.menubar--sub2 ul.menubar__user::before {
    width: 1px;
    height: 1rem;
  }
}
nav.menubar--sub2 ul.menubar__user > li {
  position: relative;
}
nav.menubar--sub2 ul.menubar__user > li .menubar__user__slide {
  display: none;
  position: absolute;
  min-width: 130px;
  width: 100%;
}
@media screen and (min-width: 768px) {
  nav.menubar--sub2 ul.menubar__user > li .menubar__user__slide {
    right: 0;
  }
}
@media screen and (max-width: 767px) {
  nav.menubar--sub2 ul.menubar__user > li .menubar__user__slide {
    right: -10px;
  }
}
nav.menubar--sub2 ul.menubar__user > li .menubar__user__slide ul {
  background-color: #fff;
  border: 1px solid #D3D5D7;
}
nav.menubar--sub2 ul.menubar__user > li .menubar__user__slide ul li a {
  padding: 15px 20px;
  color: #171717;
}
nav.menubar--sub2 ul.menubar__user > li .menubar__user__slide ul li a:hover {
  color: #D60C18;
}
nav.menubar--sub2 ul.menubar__user > li .menubar__user__slide ul li.hr {
  height: 1px;
  background-color: #D3D5D7;
}
nav.menubar--belt ul {
  display: none;
}
nav.menubar--belt ul li {
  position: relative;
  height: 54px;
  text-align: center;
}
nav.menubar--belt ul li a {
  display: block;
  padding: 18px 10px;
  line-height: 1rem;
  -webkit-transition: all 0.15s;
  transition: all 0.15s;
}
nav.menubar--belt > ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
nav.menubar--belt > ul > li {
  min-width: 120px;
}
nav.menubar--belt > ul > li > a {
  color: #171717;
}
nav.menubar--belt > ul > li:hover > a, nav.menubar--belt > ul > li.active > a {
  color: #D60C18;
}
nav.menubar--belt > ul > li:hover > ul, nav.menubar--belt > ul > li.active > ul {
  display: block;
}
nav.menubar--belt > ul > li > ul {
  position: absolute;
  top: 100%;
  left: -15px;
  width: calc(100% + 30px);
  background-color: #fff;
  z-index: 9;
}
nav.menubar--belt > ul > li > ul > li a {
  color: #171717;
  border: solid #D3D5D7;
}
nav.menubar--belt > ul > li > ul > li a:hover, nav.menubar--belt > ul > li > ul > li a.active {
  color: #fff;
  background-color: #D60C18;
  border-color: #D60C18;
}
nav.menubar--belt > ul > li > ul > li > a {
  border-width: 0 1px;
}
nav.menubar--belt > ul > li > ul > li:first-child > a {
  border-width: 1px 1px 0;
}
nav.menubar--belt > ul > li > ul > li:last-child > a {
  border-width: 0 1px 1px;
}
nav.menubar--belt > ul > li > ul > li > ul {
  position: absolute;
  top: 0;
  left: calc(100% - 1px);
  width: 100%;
  background-color: #fff;
}
nav.menubar--belt > ul > li > ul > li > ul > li > a {
  border-width: 0 1px;
}
nav.menubar--belt > ul > li > ul > li > ul > li:first-child > a {
  border-width: 1px 1px 0;
}
nav.menubar--belt > ul > li > ul > li > ul > li:last-child > a {
  border-width: 0 1px 1px;
}
nav.menubar--belt > ul > li > ul > li:hover > ul, nav.menubar--belt > ul > li > ul > li.active > ul {
  display: block;
}
nav.menubar--belt--third ul li {
  text-align: left;
}
nav.menubar--belt--third ul li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
nav.menubar--belt--third > ul > li > ul {
  left: 0;
}

.menubar__user--member,
aside.menubar--left {
  font-size: 1rem;
  border: 1px solid #D3D5D7;
  background-color: #fff;
}
.menubar__user--member ul,
aside.menubar--left ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.menubar__user--member ul li,
aside.menubar--left ul li {
  line-height: 1;
}
.menubar__user--member ul li .li__group,
aside.menubar--left ul li .li__group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.menubar__user--member ul li .li__group a,
aside.menubar--left ul li .li__group a {
  color: #171717;
}
.menubar__user--member ul li .li__group:hover a,
.menubar__user--member ul li .li__group:hover i,
aside.menubar--left ul li .li__group:hover a,
aside.menubar--left ul li .li__group:hover i {
  color: #D60C18;
}
.menubar__user--member ul li .li__group a.sns-facebook:hover > i,
.menubar__user--member ul li .li__group a.sns-facebook:hover > span,
aside.menubar--left ul li .li__group a.sns-facebook:hover > i,
aside.menubar--left ul li .li__group a.sns-facebook:hover > span {
  color: #1877F2;
}
.menubar__user--member ul li .li__group a.sns-line:hover > i,
.menubar__user--member ul li .li__group a.sns-line:hover > span,
aside.menubar--left ul li .li__group a.sns-line:hover > i,
aside.menubar--left ul li .li__group a.sns-line:hover > span {
  color: #00C200;
}
.menubar__user--member > ul + ul,
aside.menubar--left > ul + ul {
  border-top: 1px solid #D3D5D7;
}
.menubar__user--member > ul > li .li__group,
aside.menubar--left > ul > li .li__group {
  position: relative;
}
.menubar__user--member > ul > li .li__group > a,
aside.menubar--left > ul > li .li__group > a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  padding: 15px 25px;
  line-height: 1.25;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.menubar__user--member > ul > li .li__group > a.sns i + span,
aside.menubar--left > ul > li .li__group > a.sns i + span {
  margin-left: 5px;
}
.menubar__user--member > ul > li .li__group > i.more,
aside.menubar--left > ul > li .li__group > i.more {
  position: absolute;
  top: 0;
  right: 0;
  padding: 15px 25px;
  font-weight: bold;
  cursor: pointer;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
.menubar__user--member > ul > li .li__group > i.more.active,
aside.menubar--left > ul > li .li__group > i.more.active {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.menubar__user--member > ul > li.now > .li__group,
aside.menubar--left > ul > li.now > .li__group {
  background-color: #D60C18;
}
.menubar__user--member > ul > li.now > .li__group > a,
.menubar__user--member > ul > li.now > .li__group > i,
aside.menubar--left > ul > li.now > .li__group > a,
aside.menubar--left > ul > li.now > .li__group > i {
  color: #fff;
}
.menubar__user--member > ul > li > ul,
aside.menubar--left > ul > li > ul {
  display: none;
}
.menubar__user--member > ul > li > ul > li .li__group > a,
aside.menubar--left > ul > li > ul > li .li__group > a {
  padding: 15px 20px 15px 50px;
}
.menubar__user--member > ul > li > ul > li.now a,
aside.menubar--left > ul > li > ul > li.now a {
  color: #D60C18;
}
.menubar__user--member.opened,
aside.menubar--left.opened {
  left: 0;
}

.opacity,
.black {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  z-index: 11;
}
.opacity.opened,
.black.opened {
  width: 100%;
  height: 100%;
}

.black {
  background-color: rgba(23, 23, 23, 0.4);
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
.black.opened {
  opacity: 1;
}

button,
a {
  background-color: transparent;
  -ms-flex-item-align: baseline;
      align-self: baseline;
  border-radius: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
button:focus,
a:focus {
  outline: 0;
}
button.btn,
a.btn {
  position: relative;
  display: inline-block;
  min-width: 120px;
  padding: 0.6875em 1em;
  font-size: 1rem;
  line-height: 1.25;
  text-align: center;
  word-break: keep-all;
  overflow: hidden;
}
@media screen and (min-width: 375px) {
  button.btn,
  a.btn {
    min-width: 135px;
  }
}
@media screen and (min-width: 768px) {
  button.btn,
  a.btn {
    min-width: 144px;
    padding: 0.8125em 1em;
  }
}
button.btn + button.btn,
button.btn + a.btn,
a.btn + button.btn,
a.btn + a.btn {
  margin-left: 0.5rem;
}
@media screen and (min-width: 768px) {
  button.btn + button.btn,
  button.btn + a.btn,
  a.btn + button.btn,
  a.btn + a.btn {
    margin-left: 1rem;
  }
}
button.btn::before, button.btn::after,
a.btn::before,
a.btn::after {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
button.btn::before,
a.btn::before {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}
button.btn::after,
a.btn::after {
  left: 50%;
  top: 50%;
  padding: 55%;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  -webkit-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
  -webkit-transition: opacity 2s, -webkit-transform 0.5s;
  transition: opacity 2s, -webkit-transform 0.5s;
  transition: opacity 2s, transform 0.5s;
  transition: opacity 2s, transform 0.5s, -webkit-transform 0.5s;
}
button.btn:hover::before,
a.btn:hover::before {
  opacity: 0.04;
}
button.btn:hover:focus::before,
a.btn:hover:focus::before {
  opacity: 0.16;
}
button.btn:focus::before,
a.btn:focus::before {
  opacity: 0.12;
}
button.btn:active::after,
a.btn:active::after {
  opacity: 1;
  -webkit-transform: translate(-50%, -50%) scale(0);
          transform: translate(-50%, -50%) scale(0);
  -webkit-transition: -webkit-transform 0s;
  transition: -webkit-transform 0s;
  transition: transform 0s;
  transition: transform 0s, -webkit-transform 0s;
}
button.btn--text,
a.btn--text {
  display: inline-block;
  color: #d1b156;
  text-decoration: underline;
}
button.btn--text:hover,
a.btn--text:hover {
  color: #D60C18;
}
button.btn--outlined,
a.btn--outlined {
  color: #d1b156;
  background-color: #fff;
  border: 1px solid #d1b156;
  z-index: 1;
}
button.btn--outlined::-moz-focus-inner,
a.btn--outlined::-moz-focus-inner {
  border: none;
}
button.btn--outlined:hover,
a.btn--outlined:hover {
  color: #c09b34;
  border-color: #c09b34;
}
button.btn--outlined::before,
a.btn--outlined::before {
  background-color: #f2e9ce;
}
button.btn--outlined::after,
a.btn--outlined::after {
  background-color: #f2e9ce;
}
button.btn--contained,
a.btn--contained {
  color: #fff;
  background-color: #d1b156;
  border: 1px solid #d1b156;
  z-index: 1;
}
button.btn--contained::-moz-focus-inner,
a.btn--contained::-moz-focus-inner {
  border: none;
}
button.btn--contained:hover,
a.btn--contained:hover {
  background-color: #9D0505;
  border-color: #9D0505;
}
button.btn--contained::before,
a.btn--contained::before {
  background-color: #D60C18;
}
button.btn--contained::after,
a.btn--contained::after {
  background-color: #D60C18;
}
button.btn--100,
a.btn--100 {
  width: 100%;
}
button.btn[disabled],
a.btn[disabled] {
  color: #D3D5D7;
  background: #EEEEEE;
  border: 1px solid #EEEEEE;
  cursor: not-allowed;
}
button.btn[disabled]::before,
a.btn[disabled]::before {
  opacity: 0;
}
button.btn[disabled]::after,
a.btn[disabled]::after {
  opacity: 0;
}
button.btn[disabled]:hover,
a.btn[disabled]:hover {
  color: #D3D5D7;
  background: #EEEEEE;
  border: 1px solid #EEEEEE;
}
button.btn[disabled].btn--animate,
a.btn[disabled].btn--animate {
  color: #48545D;
}

body.message__open {
  overflow: hidden;
}

.message p {
  margin-top: 0;
  margin-bottom: 20px;
  line-height: 1.5;
}
.message p:not(.fontsize--1):not(.fontsize--2):not(.fontsize--3):not(.fontsize--5) {
  font-size: 1rem;
}
.message p + p {
  margin-top: 1em;
}
.message__btn {
  font-size: 0;
}
.message--center {
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.message--remark {
  width: 100%;
  background-color: #EEEEEE;
}
.message--remark .message__container {
  position: relative;
  padding: 20px;
}
.message--remark .message__txt p a {
  color: #d1b156;
  text-decoration: underline;
}
@media screen and (min-width: 1024px) {
  .message--remark .message__txt p a:hover {
    color: #9D0505;
  }
}
.message--remark .message__txt ul li + li,
.message--remark .message__txt ol li + li {
  margin-top: 10px;
}
.message--banner {
  width: 100%;
  background-color: #EEEEEE;
}
.message--banner p {
  font-size: 0.75rem;
  line-height: 1.25;
}
@media screen and (min-width: 1024px) {
  .message--banner p {
    font-size: 0.875rem;
  }
}
.message--banner button.btn,
.message--banner a.btn {
  min-width: 100px;
  font-size: 0.75rem;
}
@media screen and (min-width: 1024px) {
  .message--banner button.btn,
  .message--banner a.btn {
    font-size: 0.875rem;
  }
}
.message--banner .message__container {
  position: relative;
  max-width: 940px;
  margin: auto;
  padding: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
@media screen and (min-width: 375px) {
  .message--banner .message__container {
    padding: 30px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}
.message--banner .message__txt {
  padding: 0 0 10px;
}
@media screen and (min-width: 375px) {
  .message--banner .message__txt {
    padding: 0 50px 0 0;
  }
}
.message--banner .message__txt p a {
  color: #d1b156;
  text-decoration: underline;
}
@media screen and (min-width: 1024px) {
  .message--banner .message__txt p a:hover {
    color: #9D0505;
  }
}
.message--banner .message__btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.message--notification {
  display: table;
  max-width: calc(100% - 30px);
  padding: 25px 35px;
  color: #fff;
  font-size: 1.125rem;
  line-height: 1.25;
  word-break: keep-all;
  white-space: nowrap;
  background-color: #48545D;
  z-index: 10;
}
.message--notification .message__container {
  position: relative;
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.message--notification .message__txt {
  padding-bottom: 0;
}
.message--notification p {
  color: #fff;
}
.message--alert {
  position: fixed;
  top: 50%;
  left: 50%;
  max-width: 560px;
  width: calc(100% - 30px);
  padding: 30px 24px 24px;
  background-color: #fff;
  z-index: 12;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.message--alert .message__txt {
  padding-bottom: 30px;
}
.message--alert .message__btn {
  text-align: right;
}
.message--dialogs {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  max-width: 560px;
  width: calc(100% - 30px);
  padding: 30px 24px 24px;
  background-color: #fff;
  z-index: 12;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.message--dialogs .message__close, .message--dialogs .touch__close {
  top: -5px;
  right: -10px;
}
.message--dialogs .message__container {
  position: relative;
}
.message--dialogs .message__txt {
  padding-bottom: 30px;
}
.message--dialogs .message__txt h2 {
  padding-right: 50px;
  margin-top: 0;
  margin-bottom: 24px;
}
.message--dialogs .message__btn {
  text-align: right;
}
.message--check {
  position: fixed;
  top: 50%;
  left: 50%;
  max-width: 560px;
  width: calc(100% - 30px);
  padding: 30px 24px 24px;
  background-color: #fff;
  z-index: 12;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.message--check .message__container {
  position: relative;
}
.message--check .message__txt {
  padding-bottom: 30px;
}
.message--check .message__txt h3 {
  line-height: 1.5;
}
.message--download {
  max-width: 560px;
  width: calc(100% - 30px);
  padding: 48px 24px 24px;
  background-color: #fff;
  z-index: 12;
}
@media screen and (min-width: 1024px) {
  .message--download {
    padding: 50px;
  }
}
.message--download .message__container {
  position: relative;
}
.message--download .message__btn {
  padding-top: 20px;
  text-align: center;
}
@media screen and (max-width: 374px) {
  .message .select__group select {
    min-width: 110px;
  }
}

.message__close, .touch__close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 1rem;
  padding: 10px;
  cursor: pointer;
}
@media screen and (max-width: 1023px) {
  .message__close, .touch__close {
    font-weight: bold;
  }
}
@media screen and (min-width: 1024px) {
  .message__close, .touch__close {
    top: 10px;
    right: 10px;
    font-size: 1.5rem;
  }
}

.black.dialogs {
  cursor: pointer;
}

.board {
  position: relative;
  padding: 25px;
  z-index: 1;
}
.board::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(23, 23, 23, 0.4);
  z-index: -1;
}

.tooltips {
  position: relative;
}
.tooltips::before {
  content: attr(data-tooltips);
  position: absolute;
  padding: 6px 8px;
  max-width: 200px;
  color: #fff;
  font-size: 0.875rem;
  line-height: 1.45;
  background: #48545D;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), -webkit-transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
  transition: opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), -webkit-transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
  transition: opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
  transition: opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), -webkit-transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .tooltips::before {
    display: none;
  }
}
.tooltips:hover:before, .tooltips.active:before {
  display: block;
  visibility: visible;
  opacity: 1;
}
@media screen and (max-width: 767px) {
  .tooltips:hover:before, .tooltips.active:before {
    display: none;
  }
}
.tooltips--top:before {
  bottom: 100%;
  left: 50%;
  margin-bottom: 10px;
  -webkit-transform: translateX(-50%) translateY(2px);
          transform: translateX(-50%) translateY(2px);
}
@media screen and (min-width: 768px) {
  .tooltips--top:hover:before, .tooltips--top.active:before {
    -webkit-transform: translateX(-50%) translateY(0);
            transform: translateX(-50%) translateY(0);
  }
}
.tooltips--bottom:before {
  top: 100%;
  left: 50%;
  margin-top: 10px;
  -webkit-transform: translateX(-50%) translateY(-2px);
          transform: translateX(-50%) translateY(-2px);
}
@media screen and (min-width: 768px) {
  .tooltips--bottom:hover:before, .tooltips--bottom.active:before {
    -webkit-transform: translateX(-50%) translateY(0);
            transform: translateX(-50%) translateY(0);
  }
}
.tooltips--left:before {
  top: 50%;
  right: 100%;
  margin-right: 10px;
  -webkit-transform: translateX(2px) translateY(-50%);
          transform: translateX(2px) translateY(-50%);
}
@media screen and (min-width: 768px) {
  .tooltips--left:hover:before, .tooltips--left.active:before {
    -webkit-transform: translateX(0) translateY(-50%);
            transform: translateX(0) translateY(-50%);
  }
}
.tooltips--right:before {
  top: 50%;
  left: 100%;
  margin-left: 10px;
  -webkit-transform: translateX(-2px) translateY(-50%);
          transform: translateX(-2px) translateY(-50%);
}
@media screen and (min-width: 768px) {
  .tooltips--right:hover:before, .tooltips--right.active:before {
    -webkit-transform: translateX(0) translateY(-50%);
            transform: translateX(0) translateY(-50%);
  }
}
.tooltips-wrap:before {
  width: 200px;
  white-space: normal;
}

header {
  position: relative;
  width: 100%;
  padding-top: 12px;
  padding-bottom: 12px;
  background-color: #fff;
  border-bottom: 1px solid #EEEEEE;
  z-index: 5;
}
header.opened {
  z-index: 10;
}
header.fixed {
  position: fixed;
  top: 0;
  left: 0;
}
header .container {
  position: relative;
  font-size: 0;
}
header .container::after {
  content: "";
  display: block;
  clear: both;
}
header .container > .item {
  display: inline-block;
  vertical-align: middle;
  font-size: 0;
}
header .container > .item.item--right {
  position: absolute;
  top: 50%;
  right: 20px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 1;
}
header .container > .item.item--right > * {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}
header .container > .item.item--right .btn {
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
header .container > .item.item--center {
  width: 100%;
  height: 40px;
  padding-left: 40px;
  padding-right: 40px;
  overflow: hidden;
}
@media screen and (min-width: 1024px) {
  header .container > .item.item--center {
    padding-left: 180px;
    padding-right: 215px;
  }
}
header .container > .item.item--center .item__scroll {
  position: relative;
  top: 0;
  padding-top: 40px;
  -webkit-transition: top 0.3s;
  transition: top 0.3s;
}
@media screen and (max-width: 1023px) {
  header .container > .item.item--center .title__share {
    text-align: center;
  }
}
header .container > .item.item--center .title__share .h3 {
  line-height: 40px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
header .container > .item.item--center a.logo {
  position: absolute;
  top: 50%;
  left: 50px;
  -webkit-transition: top 0.3s;
  transition: top 0.3s;
  z-index: 1;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
@media screen and (min-width: 375px) {
  header .container > .item.item--center a.logo {
    left: 55px;
  }
}
@media screen and (min-width: 1024px) {
  header .container > .item.item--center a.logo {
    left: 60px;
  }
}
header .hamburger {
  position: absolute;
  top: 50%;
  left: 20px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
header a.logo {
  display: inline-block;
  vertical-align: middle;
}
header a.logo img {
  height: auto;
  max-width: 108px;
  width: 108px;
}
header a.logo.logo--main {
  margin-right: 20px;
}
header a.logo.logo--sub {
  color: #D60C18;
  font-size: 1rem;
  font-weight: 500;
}
header .search__icon {
  margin-left: 1rem;
  position: relative;
  cursor: pointer;
}
header .search__icon .circle,
header .search__icon .handle {
  font-family: "icomoon";
  font-size: 1.3125rem;
}
header .search__icon .circle::before {
  content: "\e917";
  display: block;
}
header .search__icon .handle {
  display: none;
  font-weight: bold;
}
header .search__icon .handle::before {
  content: "\e92e";
  display: block;
}
header .search__icon.opened .circle {
  display: none;
}
header .search__icon.opened .handle {
  display: block;
}
@media screen and (max-width: 1023px) {
  header .search__icon {
    display: none !important;
  }
}
header .menubar__user {
  position: relative;
  margin-left: 10px;
}
@media screen and (min-width: 375px) {
  header .menubar__user {
    margin-left: 15px;
  }
}
@media screen and (min-width: 1024px) {
  header .menubar__user {
    margin-left: 30px;
  }
}
header .menubar__user i {
  display: block;
  font-size: 1.3125rem;
}
header .menubar__user i.icon-close::before {
  content: "\e92e";
  font-weight: bold;
}
header .message {
  position: absolute;
  top: 50px;
  right: 0;
  padding: 20px;
  background-color: #EEEEEE;
  border: 1px solid #D3D5D7;
}
header .message.message--tos {
  width: 260px;
  cursor: inherit !important;
}
header .message.message--tos .h3 {
  line-height: 1.5;
}
header .message.message--tos p {
  font-size: 0.875rem;
}
@media screen and (min-width: 1024px) {
  header .message.message--tos p {
    font-weight: 300;
  }
}
header .message.message--tos .btn.btn--small {
  z-index: 0;
}
header.scroll .container > .item.item--center .item__scroll {
  top: -40px;
}
@media screen and (max-width: 1023px) {
  header.scroll .container > .item.item--center a.logo {
    top: -55px;
  }
}
@media screen and (max-width: 1023px) {
  header.scroll .container > .item--right .btn {
    -webkit-transform: translateY(-55px);
            transform: translateY(-55px);
  }
}

.search__block {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  margin-top: 1px;
  background-color: #fff;
  border-bottom: 1px solid #EEEEEE;
}
.search__block .search__item--left {
  float: left;
  width: calc(100% - 400px);
  padding-right: 30px;
}
.search__block .search__item--right {
  float: right;
  width: 400px;
  padding-left: 30px;
  border-left: 1px solid #EEEEEE;
}

.container {
  padding-left: 20px;
  padding-right: 20px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (min-width: 1024px) {
  .container {
    width: 1010px;
  }
}

footer {
  width: 100%;
  padding-top: 30px;
  padding-bottom: 30px;
  background-color: #EEEEEE;
}
footer a {
  color: #171717;
}
footer a:hover {
  color: #D60C18;
}
footer .channel__group {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media screen and (min-width: 1024px) {
  footer .channel__group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
@media screen and (max-width: 1023px) {
  footer .channel__item {
    border-bottom: 1px solid #D3D5D7;
  }
}
footer .channel__item .channel__title {
  position: relative;
}
footer .channel__item .channel__title i.icon {
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: 5px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-transition: -webkit-transform 0.2s;
  transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
  transition: transform 0.2s, -webkit-transform 0.2s;
}
@media screen and (min-width: 1024px) {
  footer .channel__item .channel__title i.icon {
    display: none;
  }
}
footer .channel__item .channel__title i.icon.active {
  -webkit-transform: translateY(-50%) rotate(180deg);
          transform: translateY(-50%) rotate(180deg);
}
@media screen and (min-width: 1024px) {
  footer .channel__item .channel__option {
    display: block !important;
  }
}
@media screen and (max-width: 1023px) {
  footer .channel__item .channel__option {
    display: none;
  }
}
footer .channel__item .channel__option ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
}
footer .channel__item .channel__option ul a {
  display: block;
  padding-top: 5px;
  padding-bottom: 5px;
}
@media screen and (min-width: 1024px) {
  footer .channel__item:first-child .channel__option ul {
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;
    -webkit-column-gap: 1em;
       -moz-column-gap: 1em;
            column-gap: 1em;
  }
}
footer .cwgroup__copyright {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media screen and (min-width: 1024px) {
  footer .cwgroup__copyright {
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}
@media screen and (max-width: 1023px) {
  footer .cwgroup__copyright {
    -ms-flex-wrap: wrap-reverse;
        flex-wrap: wrap-reverse;
    text-align: center;
  }
  footer .cwgroup__copyright > div {
    width: 100%;
  }
}
footer .cwgroup__copyright ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0;
}
footer .cwgroup__copyright ul.sns li {
  display: inline-block;
  font-size: 1.5rem;
  vertical-align: middle;
}
footer .cwgroup__copyright ul.sns li + li {
  margin-left: 20px;
}
footer .cwgroup__copyright ul.sns li a {
  display: block;
}
footer .cwgroup__copyright ul.sns li a i.icon {
  display: block;
}
footer .cwgroup__copyright ul.sns li a.facebook:hover {
  color: #1877F2;
}
footer .cwgroup__copyright ul.sns li a.line:hover {
  color: #00C200;
}
footer .cwgroup__copyright ul.sns li a.instagram:hover {
  color: #7024C4;
}
footer .cwgroup__copyright ul.sns li a.rss:hover {
  color: #FF5700;
}
footer .cwgroup__copyright ul.app__img li {
  display: inline-block;
}
footer .cwgroup__copyright ul.app__img li + li {
  margin-left: 10px;
}
footer .cwgroup__copyright ul.app__img li a {
  display: block;
}
footer .cwgroup__copyright ul.app__img li a img {
  width: auto;
  height: 40px;
}
footer .cwgroup__copyright .contact > span,
footer .cwgroup__copyright .copyright > span {
  display: block;
  font-size: 0.75rem;
}
@media screen and (min-width: 1024px) {
  footer .cwgroup__copyright .contact > span,
  footer .cwgroup__copyright .copyright > span {
    display: inline-block;
  }
  footer .cwgroup__copyright .contact > span:first-child,
  footer .cwgroup__copyright .copyright > span:first-child {
    margin-right: 20px;
  }
}

.feature__page section .card__title, .feature__page section h2 {
  font-family: "Noto Serif TC", serif;
}

.feature__page .hamburger span {
  background-color: #d1b156;
}
@media screen and (min-width: 1024px) {
  .feature__page nav.menubar--sub2 {
    right: calc((100% - 950px) / 2);
  }
}
.feature__page nav.menubar--sub2 ul.menubar__user {
  display: block !important;
}
.feature__page nav.menubar--sub2 ul.menubar__user::before {
  background-color: transparent;
}
@media screen and (min-width: 1024px) {
  .feature__page nav.menubar--sub2 .menubar__user--member {
    top: 57px;
  }
}
@media screen and (max-width: 1023px) {
  .feature__page nav.menubar--sub2 .menubar__user--member {
    top: 47px;
  }
}
.feature__page nav.menubar--sub2 span {
  font-size: 14px;
  line-height: 1.125;
  padding: 0;
}
@media (max-width: 767px) {
  .feature__page nav.menubar--sub2 .mobile {
    font-size: 21px !important;
  }
}
@media screen and (min-width: 768px) {
  .feature__page nav.menubar--sub2 i {
    font-size: 14px;
  }
}
.feature__page header {
  position: relative;
  background-color: #fff;
  margin-bottom: 0;
  padding: 0;
}
.feature__page header .header__logo > .container {
  padding-top: 10px;
  padding-bottom: 10px;
}
@font-face {
  font-family: icomoon;
  src: url(../../../fonts/cw_icon.eot?6ln93m);
  src: url(../../../fonts/cw_icon.eot?6ln93m#iefix) format("embedded-opentype"), url(../../../../fonts/cw_icon.ttf?6ln93m) format("truetype"), url(../../../../fonts/cw_icon.woff?6ln93m) format("woff"), url(../../../../fonts/cw_icon.svg?6ln93m#icomoon) format("svg");
}
.feature__page header .header__logo > .container .logoSet a {
  display: inline-block;
  vertical-align: middle;
}
.feature__page header .header__logo > .container .logoSet a.channelLogo img {
  height: 35px;
}
@media screen and (min-width: 1024px) {
  .feature__page header .header__logo > .container .logoSet a.channelLogo img {
    height: 60px;
  }
}
.feature__page header .flex {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.feature__page header .container {
  max-width: 1260px;
  font-size: unset;
}
@media (min-width: 1024px) {
  .feature__page header .container {
    width: 950px;
    padding-left: 10px;
    padding-right: 10px;
  }
}
@media screen and (max-width: 1023px) {
  .feature__page header .container {
    padding-right: 0px;
    padding-left: 10px;
  }
}
.feature__page main {
  position: relative;
}
.feature__page section {
  border-top: 1px solid #D3D5D7;
}
.feature__page section:first-child {
  border-top: 0;
}
.feature__page section p {
  font-weight: 300;
}
.feature__page section p.text--summary {
  color: #d1b156;
  font-weight: 400;
}
.feature__page section p.text--update {
  font-size: 0.875rem;
  line-height: 1.5;
}
.feature__page section > .container,
.feature__page section > .container-fluid {
  padding-top: 80px;
  padding-bottom: 80px;
}
@media screen and (max-width: 767px) {
  .feature__page section > .container,
  .feature__page section > .container-fluid {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media screen and (max-width: 767px) {
  .feature__page section > .container > .row,
  .feature__page section > .container-fluid > .row {
    margin-left: -20px;
    margin-right: -20px;
  }
}
.feature__page section > .container {
  max-width: 880px;
}
.feature__page section > .container-fluid {
  width: 100%;
}
@media screen and (max-width: 767px) {
  .feature__page section .img__group {
    margin-left: -20px;
    margin-right: -20px;
  }
}
.feature__page section .img__group .container {
  max-width: 880px;
}
@media screen and (max-width: 767px) {
  .feature__page section .img__group .container {
    padding-left: 20px;
    padding-right: 20px;
  }
}
.feature__page section .img__group img {
  width: 100%;
  height: auto;
}
.feature__page section .img__group span {
  display: block;
  padding-top: 0.4em;
  color: #939EA7;
  font-size: 0.875rem;
}
@media screen and (max-width: 767px) {
  .feature__page section .img__group span {
    padding-left: 20px;
    padding-right: 20px;
  }
}
.feature__page section .img__group h3 {
  display: block;
  padding-top: 0.4em;
  color: #939EA7;
  font-size: 0.875rem;
  margin: 0;
  line-height: unset;
  font-weight: 400;
}
@media screen and (max-width: 767px) {
  .feature__page section .img__group h3 {
    padding-left: 20px;
    padding-right: 20px;
  }
}
.feature__page section .img__group.img__group--default span {
  padding-bottom: 1.4em;
}
.feature__page section .img__group.img__group--default h3 {
  padding-bottom: 1.4em;
}
.feature__page section .img__group.img__group--full + .img__group--full p {
  margin-top: 80px;
  margin-bottom: 40px;
}
.feature__page section .card__group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
@media screen and (max-width: 767px) {
  .feature__page section .card__group {
    margin-left: -20px;
    margin-right: -20px;
  }
}
.feature__page section .card__item {
  width: 100%;
  margin-bottom: 30px;
}
.feature__page section .card__item:nth-last-child(1) {
  margin-bottom: 0;
}
@media screen and (min-width: 768px) {
  .feature__page section .card__item {
    width: calc((100% - 50px) / 3);
    margin-left: 25px;
    margin-bottom: 50px;
  }
  .feature__page section .card__item:nth-child(3n+1) {
    margin-left: 0;
  }
  .feature__page section .card__item:nth-last-child(2), .feature__page section .card__item:nth-last-child(3) {
    margin-bottom: 0;
  }
}
.feature__page section .card__item:hover .card__title {
  color: #d1b156;
}
.feature__page section .card__title {
  display: block;
  margin-top: 10px;
  margin-bottom: 10px;
  color: #171717;
  font-size: 1.125em;
  line-height: unset;
}
@media screen and (max-width: 767px) {
  .feature__page section .card__title {
    padding-left: 20px;
    padding-right: 20px;
  }
}
.feature__page section .card__title h3 {
  margin: 0;
  line-height: unset;
}
.feature__page section .card__img {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
}
.feature__page section .card__img::before {
  width: 100%;
  padding-top: 66.666667%;
}
.feature__page section .card__img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.feature__page section .sponsor__group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.feature__page section .sponsor__group li {
  width: 150px;
  margin: 10px;
}
@media screen and (min-width: 768px) {
  .feature__page section .sponsor__group li {
    width: 195px;
  }
}
.feature__page section .sponsor__group li img {
  width: 100%;
  height: auto;
}
.feature__page section .embed {
  position: relative;
  width: 100%;
}
.feature__page section .embed:before {
  width: 100%;
}
.feature__page section .embed.embed--16by9:before {
  padding-top: 56.25%;
}
.feature__page section .embed.embed--4by3:before {
  padding-top: 75%;
}
.feature__page section .embed > .embed__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.feature__page section .slideshow {
  position: relative;
}
.feature__page section .slideshow .container {
  width: 100%;
  max-width: 1260px;
  padding-top: 20px;
  padding-bottom: 20px;
}
@media screen and (min-width: 768px) {
  .feature__page section .slideshow .container {
    width: 85%;
    padding-bottom: 30px;
  }
}
.feature__page section .slideshow .slider {
  position: relative;
  overflow: hidden;
}
.feature__page section .slideshow .slider__navi {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 5;
}
.feature__page section .slideshow .slider__navi.slider__navi--prev {
  left: 0;
}
.feature__page section .slideshow .slider__navi.slider__navi--next {
  right: 0;
}
.feature__page section .slideshow .slider__wrap__thumbnail {
  position: relative;
  font-size: 0;
  -webkit-transition: left 0.3s;
  transition: left 0.3s;
}
@media screen and (max-width: 1023px) {
  .feature__page section .slideshow .slider__wrap__thumbnail {
    padding-left: 30px;
    padding-right: 30px;
  }
}
.feature__page section .slideshow .slider__thumbnail {
  overflow: hidden;
}
.feature__page section .slideshow .slider__thumbnail.fixed .slick-track {
  margin-left: auto;
  margin-right: auto;
  -webkit-transform: none !important;
          transform: none !important;
}
.feature__page section .slideshow .slider__thumbnail .thumbnail__img {
  position: relative;
  display: inline-block;
  padding-left: 5px;
  padding-right: 5px;
}
@media screen and (min-width: 1024px) {
  .feature__page section .slideshow .slider__thumbnail .thumbnail__img {
    padding-left: 8px;
    padding-right: 8px;
  }
}
.feature__page section .slideshow .slider__thumbnail .thumbnail__img::before {
  position: absolute;
  top: 0;
  left: 5px;
  width: calc(100% - 10px);
  height: 100%;
  background-color: #171717;
}
@media screen and (min-width: 1024px) {
  .feature__page section .slideshow .slider__thumbnail .thumbnail__img::before {
    left: 8px;
    width: calc(100% - 16px);
  }
}
.feature__page section .slideshow .slider__thumbnail .thumbnail__img img {
  position: relative;
  opacity: 0.5;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  z-index: 2;
}
.feature__page section .slideshow .slider__thumbnail .thumbnail__img.slick-current img {
  opacity: 1;
}
.feature__page section .slideshow .slider__item > span {
  display: block;
  padding-top: 0.4em;
  padding-bottom: 1.4em;
  color: #939EA7;
  font-size: 0.875rem;
}
@media screen and (max-width: 767px) {
  .feature__page section .slideshow .slider__item > span {
    padding-left: 20px;
    padding-right: 20px;
  }
}
.feature__page section .slideshow .slider__item > span span {
  display: block;
}
.feature__page section .slideshow--column .slider__navi .icon-btn {
  display: block;
  width: 30px;
  height: 100%;
  color: #fff;
  font-size: 2rem;
  text-align: center;
  text-shadow: 1px 1px 0 rgba(23, 23, 23, 0.5);
}
@media screen and (min-width: 768px) {
  .feature__page section .slideshow--column .slider__navi .icon-btn {
    width: 70px;
  }
}
.feature__page section .slideshow--column .slider__item {
  position: relative;
}
.feature__page section .slideshow--column .slider__item::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #171717;
  opacity: 0.2;
  z-index: 1;
}
.feature__page section .slideshow--column .slider__title {
  position: absolute;
  bottom: 0;
  left: 50%;
  padding-top: 30px;
  padding-bottom: 30px;
  text-shadow: 1px 1px 0 rgba(23, 23, 23, 0.5);
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 3;
}
@media screen and (max-width: 767px) {
  .feature__page section .slideshow--column .slider__title {
    overflow: hidden;
  }
}
@media screen and (min-width: 1024px) {
  .feature__page section .slideshow--column .slider__title {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}
.feature__page section .slideshow--column .slider__title h1 {
  color: #fff;
  font-weight: 500;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.feature__page section .slideshow--column .slider__title .h2 {
  color: #D3D5D7;
}
@media screen and (min-width: 1024px) {
  .feature__page section .slideshow--column1 .slider__title > div {
    max-width: 950px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media screen and (min-width: 768px) {
  .feature__page section .slideshow--column1 .slider__title > div {
    text-align: center;
  }
}
@media screen and (min-width: 1024px) {
  .feature__page section .slideshow--column2 .slider__title > div {
    max-width: 700px;
  }
}
.feature__page p {
  position: relative;
  margin-top: 20px;
  margin-bottom: 20px;
  -webkit-transition: height 0.3s;
  transition: height 0.3s;
}
.feature__page p.hidden {
  height: 9em;
  overflow: hidden;
}
.feature__page p.hidden::before {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(#fff));
  background-image: linear-gradient(top, rgba(255, 255, 255, 0) 0%, #fff 100%);
}
.feature__page p.hidden + .btn {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 40px;
}
.feature__page .sns__group {
  position: fixed;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  bottom: 20px;
  font-size: 28px;
  opacity: 0;
  z-index: 5;
}
@media screen and (max-width: 1023px) {
  .feature__page .sns__group {
    right: 10px;
  }
}
@media screen and (min-width: 1024px) {
  .feature__page .sns__group {
    bottom: 3em;
    left: calc(910px + (100% - 880px) / 2);
    font-size: 40px;
  }
}
.feature__page .sns__group li + li {
  margin-top: 0.75rem;
}
.feature__page .sns__group li > a.sns {
  display: block;
  background-position: center;
  background-repeat: no-repeat;
}
@media screen and (min-width: 1024px) {
  .feature__page .sns__group li > a.sns {
    width: 1em;
    height: 1em;
    background-size: 1em;
  }
}
@media screen and (max-width: 1023px) {
  .feature__page .sns__group li > a.sns {
    width: 1.4em;
    height: 1.4em;
    background-size: 1.4em;
  }
}
@media screen and (min-width: 1024px) {
  .feature__page .sns__group li > a.sns-facebook {
    background-image: url("../../../img/feature/facebook--secondary.svg");
  }
}
@media screen and (max-width: 1023px) {
  .feature__page .sns__group li > a.sns-facebook {
    background-image: url("../../../img/feature/facebook--brand.svg");
  }
}
.feature__page .sns__group li > a.sns-facebook:hover {
  background-image: url("../../../img/feature/facebook--brand.svg");
}
@media screen and (min-width: 1024px) {
  .feature__page .sns__group li > a.sns-line {
    background-image: url("../../../img/feature/line--secondary.svg");
  }
}
@media screen and (max-width: 1023px) {
  .feature__page .sns__group li > a.sns-line {
    background-image: url("../../../img/feature/line--brand.svg");
  }
}
.feature__page .sns__group li > a.sns-line:hover {
  background-image: url("../../../img/feature/line--brand.svg");
}

.menu--left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: fixed;
  top: 0;
  left: -250px;
  width: 250px;
  height: 100%;
  background-color: #fff;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-transition: left 0.3s;
  transition: left 0.3s;
  z-index: 10;
}
.menu--left.slideLeft {
  left: 0px;
  -webkit-box-shadow: 0 0 10px rgba(23, 23, 23, 0.25);
          box-shadow: 0 0 10px rgba(23, 23, 23, 0.25);
}
.menu--left > ul > li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.menu--left > ul > li a {
  color: #171717;
  font-size: 1rem;
  width: 100%;
  padding-left: 30px;
  padding-right: 30px;
  line-height: 50px;
  border-bottom: 1px solid #ebebeb;
}
.menu--left > ul > li a:hover {
  background-color: #d1b156;
}
.menu--left > ul > li.active a {
  background-color: #d1b156;
}
.menu--left > ul > li.menuClose {
  display: block;
  position: relative;
  margin-left: 30px;
  width: 50px;
  height: 50px;
}
.menu--left > ul > li.menuClose > span {
  position: absolute;
  top: 50%;
  display: block;
  width: 25px;
  height: 2px;
  background-color: #d1b156;
}
.menu--left > ul > li.menuClose > span:first-child {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.menu--left > ul > li.menuClose > span:last-child {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.touchClose {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 11;
}
.touchClose.opened {
  width: 100%;
  height: 100%;
}/*# sourceMappingURL=feature.css.map */