@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  src: url("/resource/css/font/Montserrat-Light.eot");
  src: url("/resource/css/font/Montserrat-Light.woff2") format("woff2"), url("/resource/css/font/Montserrat-Light.woff") format("woff")
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  src: url("/resource/css/font/Montserrat-SemiBold.eot");
  src: url("/resource/css/font/Montserrat-SemiBold.woff") format("woff")
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  src: url("/resource/css/font/Montserrat-Bold.eot");
  src: url("/resource/css/font/Montserrat-Bold.woff") format("woff")
}

@font-face {
  font-family: "Arita Heiti";
  font-style: normal;
  font-weight: 400;
  src: url("/resource/css/font/AritaHeiti-Medium.eot");
  src: url("/resource/css/font/AritaHeiti-Medium.woff") format("woff")
}

@font-face {
  font-family: "Arita Heiti";
  font-style: normal;
  font-weight: 500;
  src: url("/resource/css/font/AritaHeiti-Bold.eot");
  src: url("/resource/css/font/AritaHeiti-Bold.woff") format("woff")
}

/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
html {
  line-height: 1.15;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%
}

body {
  margin: 0
}

article,
aside,
footer,
header,
nav,
section {
  display: block
}

h1 {
  font-size: 2em;
  margin: 0.67em 0
}

figcaption,
figure,
main {
  display: block
}

figure {
  margin: 1em 40px
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible
}

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

a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted
}

b,
strong {
  font-weight: inherit
}

b,
strong {
  font-weight: bolder
}

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

dfn {
  font-style: italic
}

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

small {
  font-size: 80%
}

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

sub {
  bottom: -0.25em
}

sup {
  top: -0.5em
}

audio,
video {
  display: inline-block
}

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

img {
  border-style: none
}

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

button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 0
}

button,
input {
  overflow: visible
}

button,
select {
  text-transform: none
}

button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText
}

fieldset {
  padding: 0.35em 0.75em 0.625em
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal
}

progress {
  display: inline-block;
  vertical-align: baseline
}

textarea {
  overflow: auto
}

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

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

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px
}

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

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit
}

details,
menu {
  display: block
}

summary {
  display: list-item
}

canvas {
  display: inline-block
}

template {
  display: none
}

[hidden] {
  display: none
}

.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent
}

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0
}

.slick-list:focus {
  outline: none
}

.slick-list.dragging {
  cursor: pointer;
  cursor: hand
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0)
}

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto
}

.slick-track:before,
.slick-track:after {
  content: "";
  display: table
}

.slick-track:after {
  clear: both
}

.slick-loading .slick-track {
  visibility: hidden
}

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none
}

[dir="rtl"] .slick-slide {
  float: right
}

.slick-slide img {
  display: block
}

.slick-slide.slick-loading img {
  display: none
}

.slick-slide.dragging img {
  pointer-events: none
}

.slick-initialized .slick-slide {
  display: block
}

.slick-loading .slick-slide {
  visibility: hidden
}

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent
}

.slick-arrow.slick-hidden {
  display: none
}

html {
  font-size: 62.5%
}

html,
body {
  min-height: 100%
}

body {
  font-size: 1em;
  line-height: 1.5;
  -webkit-overflow-scrolling: touch;
  letter-spacing: -0.025em
}

a {
  color: #666;
  text-decoration: none
}

pre {
  white-space: pre-wrap;
  word-wrap: break-word
}

ul,
ol,
dl,
dt,
dd {
  margin: 0;
  padding: 0
}

ul,
ol,
li {
  list-style: none
}

em,
address {
  font-style: normal
}

figure,
form {
  margin: 0
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0 none;
  vertical-align: top
}

label {
  cursor: pointer
}

button,
input,
select,
textarea {
  font-size: 100%;
  margin: 0;
  vertical-align: baseline
}

button {
  -webkit-appearance: none;
  box-sizing: content-box;
  padding: .4em 1em;
  border: 0 none;
  background: transparent;
  cursor: pointer
}

input[type="checkbox"],
input[type="radio"] {
  vertical-align: middle
}

input[type="search"] {
  -webkit-appearance: none;
  border-radius: 0
}

textarea {
  vertical-align: top;
  resize: vertical
}

input:invalid,
textarea:invalid {
  background-color: #e5e5e5
}

table {
  width: 100%;
  empty-cells: show
}

td {
  vertical-align: middle
}

select {
  vertical-align: middle;
  border-radius: 0
}

::selection {
  background: #46166b;
  color: #fff;
  text-shadow: none
}

::-webkit-input-placeholder {
  color: #ccc
}

::-ms-input-placeholder {
  color: #ccc
}

:-moz-placeholder {
  color: #ccc
}

em,
mark {
  background-color: #3e1151;
  color: #fff
}

body,
input,
textarea,
select,
button {
  font-family: 'Arita Heiti', "Montserrat", sans-serif;
  color: #666
}

/* html {background-color: #000} */
body {
  min-width: 320px
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
  -ms-interpolation-mode: bicubic
}

[hidden],
.hidden {
  display: none
}

.a11y {
  position: absolute !important;
  overflow: hidden;
  height: 1px;
  width: 1px;
  clip: rect(1px, 1px, 1px, 1px)
}

.flexible-obj {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%
}

.flexible-obj iframe,
.flexible-obj object,
.flexible-obj video,
.flexible-obj embed,
.flexible-obj>img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

.flexible-obj iframe {
  border: 0
}

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

.flex>* {
  flex-grow: 1;
  margin-left: 10px
}

.flex>*:first-child {
  margin-left: 0
}

.flex+.flex {
  margin-top: 10px
}

.obj-svg path {
  fill: #fff
}

.iframe {
  border: 0
}

[class*="cq-placeholder"] {
  max-width: 100%;
}

@media (min-width: 60em) {
  .for-small {
    display: none
  }
}

@media (max-width: 59.99em) {
  .for-large {
    display: none
  }
}

h1,
.h1 {
  font-size: 5.4rem;
  line-height: 1.3
}

h1 [lang="en"],
h1[lang="en"],
.h1 [lang="en"],
.h1[lang="en"] {
  font-size: 3.6rem
}

h2,
.h2 {
  font-size: 4rem;
  line-height: 1.3
}

h2 [lang="en"],
h2[lang="en"],
.h2 [lang="en"],
.h2[lang="en"] {
  font-size: 3.2rem
}

h3,
.h3 {
  font-size: 3.4rem;
  line-height: 1.3
}

h3 [lang="en"],
h3[lang="en"],
.h3 [lang="en"],
.h3[lang="en"] {
  font-size: 2.6rem
}

h4,
.h4 {
  font-size: 2.4rem;
  line-height: 1.3
}

h4 [lang="en"],
h4[lang="en"],
.h4 [lang="en"],
.h4[lang="en"] {
  font-size: 2.0rem
}

h5,
.h5 {
  font-size: 1.8rem;
  line-height: 1.6
}

h5 [lang="en"],
h5[lang="en"],
.h5 [lang="en"],
.h5[lang="en"] {
  font-size: 1.6rem
}

[lang="en"] {
  font-family: "Arita Heiti", "Montserrat", sans-serif;
  line-height: 1.2;
}

.btn {
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  padding: 0 3.85rem;
  color: #000;
  vertical-align: middle;
  text-align: center;
  letter-spacing: 0;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  font-size: 1.4rem;
  line-height: 4.6rem
}

.btn span {
  position: relative;
  z-index: 1
}

.btn:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid #d9d9d9;
  background-color: #fff;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out
}

.btn:hover,
.btn:focus {
  text-decoration: none
}

.btn:hover span,
.btn:focus span {
  color: #fff
}

.btn:hover:after,
.btn:focus:after {
  border-color: #46166b;
  background-color: #46166b
}

.btn:active:after {
  -webkit-transform: scale(0.9);
  -moz-transform: scale(0.9);
  -ms-transform: scale(0.9);
  -o-transform: scale(0.9);
  transform: scale(0.9)
}

.btn--invert span {
  color: #fff
}

.btn--invert:after {
  border-color: #000;
  background-color: #000
}

.btn--bold:after {
  border-color: #000;
  background-color: transparent
}

.btn--bold[disabled="disabled"]:after {
  background-color: transparent
}

.btn--white:after {
  border-color: #fff
}

.btn--white[disabled="disabled"]:after {
  background-color: transparent
}

.btn--ghost span {
  color: #fff
}

.btn--ghost:after {
  border-color: #d9d9d9;
  background-color: transparent
}

.btn--lg {
  padding-left: 4.85rem;
  padding-right: 4.85rem;
  font-size: 1.6rem;
  line-height: 5.6rem
}

.btn--sm {
  padding-left: 1.9rem;
  padding-right: 1.9rem;
  font-size: 1.4rem;
  line-height: 3.6rem
}

.btn--wide {
  display: block;
  width: 100%
}

.btn[disabled="disabled"] span {
  color: #999
}

.btn[disabled="disabled"]:after {
  opacity: 0.1
}

[type="text"],
[type="number"],
[type="tel"],
[type="file"],
[type="password"],
[type="email"],
[type="search"],
[type="url"],
textarea {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 1.43em;
  min-width: 280px;
  height: 46px;
  border: 1px solid #d9d9d9;
  background: #fff;
  color: #333;
  font-size: 1.4rem;
  line-height: 4.6rem;
  vertical-align: middle;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  -webkit-appearance: none;
  -webkit-border-radius: 0
}

[type="text"]:focus:enabled,
[type="text"]:hover:enabled,
[type="number"]:focus:enabled,
[type="number"]:hover:enabled,
[type="tel"]:focus:enabled,
[type="tel"]:hover:enabled,
[type="file"]:focus:enabled,
[type="file"]:hover:enabled,
[type="password"]:focus:enabled,
[type="password"]:hover:enabled,
[type="email"]:focus:enabled,
[type="email"]:hover:enabled,
[type="search"]:focus:enabled,
[type="search"]:hover:enabled,
[type="url"]:focus:enabled,
[type="url"]:hover:enabled,
textarea:focus:enabled,
textarea:hover:enabled {
  border-color: #333
}

[type="text"][readonly="readonly"],
[type="text"][disabled="disabled"],
[type="number"][readonly="readonly"],
[type="number"][disabled="disabled"],
[type="tel"][readonly="readonly"],
[type="tel"][disabled="disabled"],
[type="file"][readonly="readonly"],
[type="file"][disabled="disabled"],
[type="password"][readonly="readonly"],
[type="password"][disabled="disabled"],
[type="email"][readonly="readonly"],
[type="email"][disabled="disabled"],
[type="search"][readonly="readonly"],
[type="search"][disabled="disabled"],
[type="url"][readonly="readonly"],
[type="url"][disabled="disabled"],
textarea[readonly="readonly"],
textarea[disabled="disabled"] {
  background-color: #f6f6f6;
  color: #999
}

input[type=number] {
  -webkit-appearance: none;
  -moz-appearance: textfield
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0
}

textarea:required,
input:required {
  background: #fff
}

textarea {
  min-height: 156px;
  line-height: inherit
}

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

input[type="checkbox"]:focus+label,
input[type="radio"]:focus+label {
  outline: 1px dotted #666
}

.input--wide {
  display: block;
  width: 100%
}

.selectbox {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  min-width: 250px;
  font-size: 1.4rem;
  line-height: 4.4rem
}

.selectbox select {
  display: block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  z-index: 10;
  width: 100%;
  height: 46px;
  padding-left: 20px;
  padding-right: 20px;
  border: 1px solid #d9d9d9;
  background-color: #fff;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  color: #333;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none
}

.selectbox:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 15px;
  z-index: 10;
  margin-top: -3px;
  height: 0;
  width: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #000
}

.selectbox:hover,
.selectbox:focus {
  border-color: #333
}

.selectbox::-ms-expand {
  display: none
}

.ie9 .selectbox {
  padding-left: 0;
  padding-right: 0
}

.ie9 .selectbox:after {
  display: none
}

.textarea-container ::-webkit-scrollbar {
  width: 10px
}

.textarea-container ::-webkit-scrollbar-thumb {
  background: #555
}

.textarea-container .textarea {
  scrollbar-face-color: #555;
  scrollbar-shadow-color: #555;
  scrollbar-arrow-color: #fff
}

.radio {
  position: relative;
  display: inline-block;
  vertical-align: top;
  margin-right: 20px;
  white-space: nowrap
}

.radio [type=radio] {
  overflow: hidden;
  position: absolute;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px)
}

.radio [type=radio]+label {
  display: inline-block;
  position: relative;
  padding-left: 30px;
  color: #666
}

.radio [type=radio]+label:before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  border: 1px solid #666;
  border-radius: 50%;
  line-height: 1;
  vertical-align: middle;
  -webkit-transition: color 0.2s;
  -moz-transition: color 0.2s;
  -ms-transition: color 0.2s;
  -o-transition: color 0.2s;
  transition: color 0.2s
}

.radio [type=radio]+label:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 4px;
  width: 12px;
  height: 12px;
  margin-top: -5px;
  background-color: #333;
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.5);
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s
}

.radio [type=radio]:checked+label {
  color: #333
}

.radio [type=radio]:checked+label:before {
  border-color: #333
}

.radio [type=radio]:checked+label:after {
  transform: scale(1);
  opacity: 1
}

.radio:last-child {
  margin-right: 0
}

.checkbox {
  display: inline-block;
  vertical-align: top;
  margin-right: 20px
}

.checkbox [type=checkbox] {
  overflow: hidden;
  position: absolute;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px)
}

.checkbox [type=checkbox]+label:before {
  content: "\EA0A";
  font-style: normal;
  font-weight: normal;
  font-family: "icon";
  display: inline-block;
  position: relative;
  top: -1px;
  margin-right: 9px;
  color: #767676;
  font-size: 2rem;
  line-height: 1;
  vertical-align: middle;
  -webkit-transition: color 0.2s;
  -moz-transition: color 0.2s;
  -ms-transition: color 0.2s;
  -o-transition: color 0.2s;
  transition: color 0.2s
}

.checkbox [type=checkbox]:checked+label:before {
  content: "\EA09";
  font-style: normal;
  font-weight: normal;
  font-family: "icon";
  color: #222
}

.checkbox:last-child {
  margin-right: 0
}

.drawdrop-item {
  position: relative;
  z-index: 1;
  height: 0;
  padding-bottom: 150.12107%
}

.drawdrop-item:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  mix-blend-mode: multiply;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -ms-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s
}

.drawdrop-item.on:hover .thumb-frame,
.drawdrop-item.on:focus .thumb-frame {
  filter: grayscale(0.75);
  -webkit-filter: grayscale(0.75)
}

.drawdrop-item.on:hover .thumb img,
.drawdrop-item.on:focus .thumb img {
  -webkit-transform: scale(1.15) rotate(-5deg);
  -moz-transform: scale(1.15) rotate(-5deg);
  -ms-transform: scale(1.15) rotate(-5deg);
  -o-transform: scale(1.15) rotate(-5deg);
  transform: scale(1.15) rotate(-5deg)
}

.drawdrop-item.on:hover:after,
.drawdrop-item.on:focus:after {
  opacity: 0.75
}

.drawdrop .thumb {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0
}

.drawdrop .thumb-frame {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0
}

.drawdrop .thumb img {
  -webkit-transition: all .6s cubic-bezier(0.35, 0, 0, 1);
  -moz-transition: all .6s cubic-bezier(0.35, 0, 0, 1);
  -ms-transition: all .6s cubic-bezier(0.35, 0, 0, 1);
  -o-transition: all .6s cubic-bezier(0.35, 0, 0, 1);
  transition: all .6s cubic-bezier(0.35, 0, 0, 1)
}

.dropdown {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  z-index: 10;
  background-color: #fff;
  color: #333;
  font-size: 1.4rem;
  text-align: center;
  vertical-align: middle;
  cursor: pointer
}

.dropdown:hover .dropdown-selector,
.dropdown:focus .dropdown-selector {
  border-color: #333
}

.dropdown.is-active .dropdown-selector,
.dropdown.is-current .dropdown-selector {
  border-color: #333
}

.dropdown.is-active .dropdown-option,
.dropdown.is-current .dropdown-option {
  position: absolute;
  margin-top: -1px
}

.dropdown.is-disabled {
  cursor: not-allowed
}

.dropdown.dropdown--wide {
  width: 100%
}

.dropdown-selector {
  position: relative;
  display: block;
  width: 100%;
  min-width: 250px;
  padding-left: 20px;
  padding-right: 30px;
  margin: 0;
  border: 1px solid #d9d9d9;
  line-height: 3.8rem;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s
}

.dropdown-selector:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -3px;
  height: 0;
  width: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #000
}

.is-active>.dropdown-selector:after {
  border: 0 none;
  height: 0;
  width: 0;
  border-bottom: 5px solid #000;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent
}

.dropdown-text {
  display: block;
  text-align: left
}

.dropdown-text-language {
  display: block;
  text-align: center
}

.dropdown-option {
  visibility: hidden;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  position: fixed;
  top: 100%;
  left: 0;
  z-index: 81;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: #fff;
  border: 1px solid #333;
  border-top-color: #d9d9d9;
  outline: 0;
  -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
  text-align: left
}

.dropdown-option li {
  overflow: hidden;
  cursor: pointer
}

.dropdown-option li+li {
  border-top: 1px solid #d9d9d9
}

.dropdown-option a,
.dropdown-option label {
  display: block;
  padding-left: 20px;
  padding-right: 20px;
  color: inherit;
  line-height: 4.6rem;
  vertical-align: middle;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out
}

.dropdown-option input {
  position: absolute;
  left: 100%
}

.dropdown-option a:hover:enabled,
.dropdown-option a:focus:enabled,
.dropdown-option li:hover:enabled,
.dropdown-option li:focus:enabled {
  color: #46166b;
  text-decoration: underline
}

.dropdown-option li.is-current,
.dropdown-option li.is-active {
  color: #fff;
  background-color: #333
}

.dropdown-option li.is-current a:hover:enabled,
.dropdown-option li.is-current a:focus:enabled,
.dropdown-option li.is-active a:hover:enabled,
.dropdown-option li.is-active a:focus:enabled {
  color: #fff;
  text-decoration: currentColor
}

.dropdown-option .is-disabled a,
.dropdown-option .is-disabled label {
  cursor: not-allowed
}

@media (max-width: 34.99em) {
  .dropdown-option {
    max-height: 600px
  }
}

.pagination {
  zoom: 1;
  margin-top: 30px;
  font-size: 0;
  text-align: center
}

.pagination:before {
  content: '';
  display: block
}

.pagination:after {
  content: '';
  display: table;
  clear: both
}

.pagination .page,
.pagination .prev,
.pagination .next {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  display: inline-block;
  min-width: 35px;
  height: 35px;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 1.4rem;
  line-height: 35px;
  vertical-align: middle;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s
}

.pagination .page:hover:enabled,
.pagination .page:focus:enabled,
.pagination .prev:hover:enabled,
.pagination .prev:focus:enabled,
.pagination .next:hover:enabled,
.pagination .next:focus:enabled {
  color: #46166b;
  text-decoration: underline
}

.pagination .page {
  border-right: 0;
  color: #666
}

.pagination .page.is-current {
  z-index: 2;
  margin-right: -1px;
  background-color: #000;
  border-top-color: #000;
  border-bottom-color: #000;
  color: #fff
}

.pagination .prev,
.pagination .next {
  color: #222;
  text-indent: -100px
}

.pagination .prev:before,
.pagination .next:before {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 1rem;
  line-height: 1;
  text-indent: 0;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%)
}

.pagination .prev[disabled],
.pagination .prev[data-disabled],
.pagination .next[disabled],
.pagination .next[data-disabled] {
  color: #999
}

.pagination .prev:before {
  content: "\EA04";
  font-style: normal;
  font-weight: normal;
  font-family: "icon"
}

.pagination .next:before {
  content: "\EA05";
  font-style: normal;
  font-weight: normal;
  font-family: "icon"
}

.pagination .prev--first:before {
  content: "\EA02";
  font-style: normal;
  font-weight: normal;
  font-family: "icon"
}

.pagination .next--last:before {
  content: "\EA03";
  font-style: normal;
  font-weight: normal;
  font-family: "icon"
}

.order-list {
  counter-reset: order
}

.order-list>li {
  position: relative;
  padding-left: 25px
}

.order-list>li:before {
  content: counter(order) ".";
  counter-increment: order;
  position: absolute;
  top: 0;
  left: 0;
  color: currentColor
}

.order-list>li+li {
  margin-top: 5px
}

.dot-list li {
  position: relative;
  padding-left: 12px
}

.dot-list li:before {
  content: '';
  position: absolute;
  top: 11px;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #666
}

.dot-list li+li {
  margin-top: 5px
}

.dash-list li {
  position: relative;
  padding-left: 12px
}

.dash-list li:before {
  content: '';
  position: absolute;
  top: 12px;
  left: 0;
  width: 5px;
  height: 1px;
  background-color: currentColor
}

.dash-list li+li {
  margin-top: 5px
}

.label {
  display: inline-block;
  padding: 4px 12px 5px;
  border: 1px solid #f6f6f6;
  background-color: #f6f6f6;
  color: currentColor;
  font-size: 1.3rem;
  margin: 1px
}

.notification {
  position: fixed;
  z-index: 201;
  top: 0;
  right: 0;
  left: 0;
  text-align: center;
  font-size: 1.8rem;
  color: #fff;
  background-color: rgba(70, 22, 107, 0.95);
  -webkit-box-shadow: 0 4px 3px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0 4px 3px rgba(0, 0, 0, 0.25);
  box-shadow: 0 4px 3px rgba(0, 0, 0, 0.25)
}

.notification .btn {
  border: 1px solid #46166b
}

.notification .btn:hover,
.notification .btn:focus {
  border-color: #fff
}

.notification-inner {
  padding: 30px
}

.notification-text {
  display: block;
  margin-bottom: 10px
}

.notification.is-show {
  visibility: visible
}

@media (min-width: 45em) {
  .notification-inner {
    padding-left: 40px;
    padding-right: 40px
  }
}

.comment {
  margin-top: 60px
}

.comment-h {
  font-size: 1.8rem;
  color: #000
}

.comment-h .total {
  font-weight: normal
}

.comment-list {
  margin-top: 10px;
  font-size: 1.4rem
}

.comment-exp .comment-list {
  font-size: 1.6rem
}

.comment-loading {
  height: 40rem;
  margin-top: 10px;
  border-top: 3px solid #000;
  background: url("../image/a/loading.gif") no-repeat center center
}

.comment .total {
  color: #666;
  font-weight: normal
}

.comment .info {
  position: absolute;
  left: 0;
  right: 0;
  top: 30px
}

.comment .review {
  line-height: 1.8;
  word-break: keep-all;
  word-wrap: break-word
}

.comment .review p {
  margin: 0
}

.comment .author {
  font-weight: bold
}

.comment .date {
  font-weight: 300
}

.comment .date:before {
  content: '';
  display: inline-block;
  height: 12px;
  margin: -2px 7px 0;
  border-left: 1px solid #e5e5e5;
  vertical-align: middle
}

.comment .btn-delete {
  position: absolute;
  right: 0;
  top: -5px;
  padding: 0;
  height: 30px;
  width: 30px;
  border: 1px solid #d9d9d9;
  line-height: 30px
}

.comment .btn-delete:before {
  content: "\EA0B";
  font-style: normal;
  font-weight: normal;
  font-family: "icon";
  color: #000;
  font-size: 14px
}

.comment .link {
  border-bottom: 1px solid #d9d9d9
}

.comment li {
  position: relative;
  padding: 65px 0 30px;
  border-bottom: 1px solid #e5e5e5;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box
}

.comment li:first-child {
  border-top: 3px solid #000
}

.comment li.no-item {
  width: 100%;
  padding: 40px 30px 50px;
  text-align: center;
  font-weight: 300;
  font-size: 1.8rem
}

.comment li.no-item:before {
  content: "\EA20";
  font-style: normal;
  font-weight: normal;
  font-family: "icon";
  display: block;
  font-size: 30px
}

.comment .image-box {
  overflow: hidden;
  position: relative;
  width: 120px;
  height: auto;
  margin-top: .25em;
  margin-right: 1em;
  margin-bottom: .25em
}

.comment .image-box .thumb {
  position: relative;
  display: inline-block;
  height: 100%
}

.comment .image-box .x-zoom-in {
  display: inline-block;
  position: absolute;
  left: 100%;
  bottom: 0;
  width: 30px;
  height: 30px;
  margin-left: -30px;
  padding: 0;
  background-color: rgba(0, 0, 0, 0.8)
}

.comment .image-box .x-zoom-in:after {
  content: "\EA18";
  font-style: normal;
  font-weight: normal;
  font-family: "icon";
  color: #fff;
  font-size: 15px
}

.comment .image-box.is-zoom {
  float: none;
  margin-right: 0;
  margin-bottom: 1em
}

.comment .image-box.is-zoom .x-zoom-in:after {
  content: "\EA17";
  font-style: normal;
  font-weight: normal;
  font-family: "icon"
}

.comment .image-box img {
  width: 100%
}

@media (min-width: 45em) {
  .comment .info {
    display: table-cell;
    vertical-align: middle;
    position: static;
    width: 188px
  }

  .comment .review {
    display: table-cell;
    vertical-align: middle
  }

  .comment .date {
    display: block;
    margin-top: 3px
  }

  .comment .date:before {
    content: none
  }

  .comment .btn-delete {
    position: static;
    margin-top: 10px
  }

  .comment li {
    display: table;
    table-layout: fixed;
    width: 100%;
    padding: 30px 0
  }

  .comment li.no-item {
    padding: 50px 25px
  }
}

.winner {
  margin-top: 60px
}

.winner-result {
  padding: 30px 35px;
  border: 1px solid #d9d9d9;
  background-color: #fff;
  color: #000;
  font-weight: bold;
  text-align: center;
  font-size: 1.8rem
}

.winner-list {
  overflow: hidden;
  margin-top: 10px;
  border: 1px solid #d9d9d9;
  font-size: 0rem
}

.winner-list li {
  display: inline-block;
  min-height: 45px;
  width: 50%;
  margin-bottom: -1px;
  padding: 10px 20px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  border-bottom: 1px solid #e5e5e5;
  vertical-align: top;
  font-size: 1.4rem
}

.winner-list li:only-of-type {
  display: block;
  width: 100%;
  text-align: center
}

@media (min-width: 60em) {
  .winner-result {
    padding: 35px;
    border: 0
  }

  .winner-list {
    border: 0;
    background-color: #fff
  }

  .winner-list li {
    width: 25%;
    padding-top: 16px;
    padding-bottom: 16px
  }
}

.progress {
  margin-top: 35px;
  padding: 25px 35px;
  background: #f6f6f6;
  counter-reset: order
}

.progress li {
  position: relative;
  padding-left: 40px;
  color: #767676;
  font-weight: bold
}

.progress li.is-current {
  color: #000
}

.progress li.is-current:before {
  border-color: #000;
  background-color: #000;
  color: #fff
}

.progress li+li {
  margin-top: 25px
}

.progress li:before {
  content: counter(order);
  display: inline-block;
  position: absolute;
  z-index: 10;
  top: -4px;
  left: 0;
  width: 28px;
  height: 28px;
  border: 1px solid #d9d9d9;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background-color: #fff;
  color: #999;
  font-family: "Arita Heiti", "Montserrat", sans-serif;
  line-height: 30px;
  font-weight: 600;
  text-align: center;
  counter-increment: order
}

.progress li:after {
  content: '';
  position: absolute;
  z-index: 0;
  left: 15px;
  top: -25px;
  bottom: 0;
  display: block;
  width: 1px;
  background-color: #d9d9d9
}

.progress li:first-child:after {
  top: 0
}

.progress li:last-child:after {
  max-height: 30px
}

.progress .date {
  margin-left: 5px;
  font-weight: 300
}

@media (min-width: 45em) {
  .progress {
    display: table;
    table-layout: fixed;
    width: 100%;
    margin-top: 55px;
    padding: 50px 0 45px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box
  }

  .progress li {
    display: table-cell;
    padding: 0 20px;
    word-break: keep-all;
    word-wrap: break-word;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center
  }

  .progress li:before {
    display: block;
    position: relative;
    left: 50%;
    top: 0;
    width: 38px;
    height: 38px;
    margin-bottom: 15px;
    line-height: 40px;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%)
  }

  .progress li:after {
    top: 20px;
    bottom: auto;
    height: 1px;
    width: 100%
  }

  .progress li:first-child {
    padding-left: 0
  }

  .progress li:first-child:after {
    top: 20px;
    left: 50%
  }

  .progress li:last-child {
    padding-right: 0
  }

  .progress li:last-child:after {
    max-width: 50%
  }

  .progress .date {
    display: block;
    margin-left: 0;
    font-size: 1.4rem
  }
}

.progress--boutique {
  background: transparent;
  padding: 0;
  display: table;
  table-layout: fixed;
  width: 100%;
  margin-top: 35px;
  margin-bottom: 35px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box
}

.progress--boutique li {
  display: table-cell;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center
}

.progress--boutique li:before {
  display: block;
  position: relative;
  left: 50%;
  top: 0;
  width: 38px;
  height: 38px;
  margin-bottom: 15px;
  line-height: 40px;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%)
}

.progress--boutique li:after {
  top: 20px;
  bottom: auto;
  height: 1px;
  width: 100%
}

.progress--boutique li:first-child {
  padding-left: 0
}

.progress--boutique li:first-child:after {
  top: 20px;
  left: 50%
}

.progress--boutique li:last-child {
  padding-right: 0
}

.progress--boutique li:last-child:after {
  max-width: 50%
}

.tab-container {
  position: relative;
  text-align: center;
  border-bottom: 1px solid #e5e5e5
}

.tab-container .tab {
  position: relative;
  display: inline-block;
  margin: 0 5px;
  padding: 15px 5px;
  font-size: 1.6rem;
  line-height: 1.2;
  color: #767676
}

.tab-container .tab:after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  width: 0;
  height: 3px;
  background: #000;
  -webkit-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -moz-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -ms-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -o-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1)
}

.no-touchevents .tab-container .tab:hover,
.no-touchevents .tab-container .tab:focus {
  color: #222
}

.no-touchevents .tab-container .tab:hover:after,
.no-touchevents .tab-container .tab:focus:after {
  width: 100%
}

.tab-container .is-current .tab {
  color: #000
}

.tab-container .is-current .tab:after {
  width: 100%
}

.tab-container .switch-selector {
  border-color: transparent
}

@media (min-width: 60em) {
  .tab-container .tab {
    margin: 0 10px;
    padding: 15px 10px
  }
}

.switch-select {
  position: relative;
  text-align: left
}

.switch-select.on .switch-option {
  visibility: visible;
  border-bottom: 1px solid #333
}

@media (max-width: 44.99em) {
  .switch-selector {
    position: relative;
    display: block;
    width: 100%;
    min-width: 250px;
    margin: 0;
    padding: 13px 20px;
    text-align: left;
    border: 1px solid #d9d9d9;
    color: #333;
    font-weight: bold;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box
  }

  .switch-selector:after {
    position: absolute;
    top: 50%;
    right: 15px;
    margin-top: -3px;
    content: '';
    height: 0;
    width: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #000
  }

  .is-active>.switch-selector:after {
    border: 0 none;
    height: 0;
    width: 0;
    border-bottom: 5px solid #000;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent
  }

  .switch-option {
    position: absolute;
    z-index: 81;
    top: 100%;
    right: 0;
    left: 0;
    visibility: hidden;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
    background-color: #fff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15)
  }

  .switch-option li {
    overflow: hidden;
    cursor: pointer
  }

  .switch-option li+li {
    border-top: 1px solid #d9d9d9
  }

  .switch-option .tab {
    display: block;
    margin: 0;
    padding: 12px 20px;
    cursor: pointer;
    vertical-align: middle;
    white-space: nowrap;
    text-decoration: none;
    color: inherit
  }

  .switch-option .tab:hover,
  .switch-option .tab:focus,
  .switch-option li:hover,
  .switch-option li:focus {
    color: #fff;
    text-decoration: underline;
    background-color: #333
  }

  .switch-option li.is-current,
  .switch-option li.is-active {
    color: #fff;
    background-color: #333
  }

  .switch-option li.is-current .tab,
  .switch-option li.is-active .tab {
    color: #fff
  }

  .switch-option li.is-current .tab:after,
  .switch-option li.is-active .tab:after {
    display: none
  }

  .switch-option li.is-current a:hover,
  .switch-option li.is-current a:focus,
  .switch-option li.is-active a:hover,
  .switch-option li.is-active a:focus {
    color: #fff;
    text-decoration: currentColor
  }
}

@media (min-width: 45em) {
  .switch-selector {
    display: none
  }

  .switch-option {
    text-align: center
  }

  .switch-option li {
    display: inline-block
  }
}

.error-dialog.has-error .msg,
.error-dialog.has-success .msg {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px
}

.error-dialog.has-error .msg:before,
.error-dialog.has-success .msg:before {
  display: inline-block;
  margin-right: 7px;
  font-size: 18px;
  line-height: 1;
  vertical-align: middle
}

.error-dialog.has-error .msg {
  color: #a71839
}

.error-dialog.has-error .msg:before {
  content: "\EA1F";
  font-style: normal;
  font-weight: normal;
  font-family: "icon";
  background: #e50135;
  color: #fff;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%
}

.error-dialog.has-success .msg {
  color: #153e82
}

.error-dialog.has-success .msg:before {
  content: "\EA1C";
  font-style: normal;
  font-weight: normal;
  font-family: "icon";
  color: #0254dd
}

.ui-widget-header,
.ui-widget {
  font-family: inherit
}

.ui-widget-header,
.ui-widget-content,
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
  color: inherit;
  border: none;
  background: none
}

.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
  opacity: 1
}

.ui-helper-hidden {
  display: none
}

.ui-helper-hidden-accessible {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0
}

.ui-helper-reset {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 100%;
  line-height: 1.3;
  text-decoration: none;
  border: 0;
  outline: 0
}

.ui-helper-clearfix {
  zoom: 1
}

.ui-helper-clearfix:before {
  content: '';
  display: block
}

.ui-helper-clearfix:after {
  content: '';
  display: table;
  clear: both
}

.ui-helper-zfix {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#valuePercent)";
  filter: alpha(opacity=0);
  opacity: 0
}

.ui-front {
  z-index: 100
}

.ui-state-disabled {
  opacity: 1;
  cursor: default !important
}

.ui-icon {
  display: block;
  overflow: hidden;
  text-indent: -99999px;
  background-repeat: no-repeat
}

.ui-widget-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

.ui-datepicker {
  right: 15px;
  display: none;
  padding: 0;
  font-size: 14px;
  background-color: #fff
}

.hasDatepicker .ui-datepicker {
  width: auto;
  margin-top: 0;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none
}

.ui-datepicker .ui-datepicker-header {
  position: relative;
  height: 30px;
  margin: 0 0 10px;
  padding: 12px 0;
  font-weight: normal;
  border: 0
}

@media (min-width: 60em) {
  .ui-datepicker .ui-datepicker-header {
    padding-top: 9px;
    padding-bottom: 6px
  }
}

.ui-datepicker .ui-datepicker-header .ui-icon {
  background: none
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  position: absolute;
  display: inline-block;
  top: 15px;
  cursor: pointer;
  text-align: center;
  padding: 2px 7px;
  color: #000
}

.ui-datepicker .ui-datepicker-prev:before,
.ui-datepicker .ui-datepicker-next:before {
  font-size: 18px
}

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
  width: 1px;
  height: 1px
}

.ui-datepicker .ui-datepicker-prev {
  left: 0
}

.ui-datepicker .ui-datepicker-prev:before {
  content: "\EA04";
  font-style: normal;
  font-weight: normal;
  font-family: "icon"
}

.ui-datepicker .ui-datepicker-next {
  right: 0
}

.ui-datepicker .ui-datepicker-next:before {
  content: "\EA05";
  font-style: normal;
  font-weight: normal;
  font-family: "icon"
}

.ui-datepicker .ui-datepicker-title {
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.6;
  color: #222
}

@media (min-width: 60em) {
  .ui-datepicker .ui-datepicker-title {
    font-size: 24px
  }
}

.ui-datepicker .ui-datepicker-title span.ui-datepicker-year:after {
  content: '. '
}

.ui-datepicker .ui-datepicker-title select {
  margin: 1px 0;
  font-size: 1em
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
  width: 45%
}

.ui-datepicker table {
  min-width: 250px;
  margin: 0 auto;
  padding-top: 10px;
  font-size: 1em;
  border-top: 1px solid #e5e5e5;
  border-collapse: collapse
}

.ui-datepicker th,
.ui-datepicker td {
  padding: 1px 2px;
  border: 0
}

.ui-datepicker a:focus {
  outline: 1px dotted #666
}

.ui-datepicker th {
  padding: 15px 0;
  font-size: 16px;
  font-weight: normal;
  text-transform: uppercase;
  color: #333
}

.ui-datepicker td {
  width: 14.28571%;
  font-size: 14px
}

.ui-datepicker .ui-state-default {
  display: block;
  margin: 2px;
  padding: 14px 0;
  text-align: center;
  line-height: 1;
  text-decoration: none;
  color: #000;
  border: 1px solid #000
}

.ui-datepicker .ui-datepicker-buttonpane {
  margin: .7em 0 0 0;
  padding: 0 .2em;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  background-image: none
}

.ui-datepicker .ui-datepicker-buttonpane button {
  float: right;
  overflow: visible;
  width: auto;
  margin: .5em .2em .4em;
  padding: .2em .6em .3em .6em;
  cursor: pointer
}

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
  float: left
}

.ui-datepicker.ui-datepicker-multi {
  width: auto
}

.ui-datepicker-multi .ui-datepicker-group {
  float: left
}

.ui-datepicker-multi .ui-datepicker-group table {
  width: 95%;
  margin: 0 auto .4em
}

.ui-datepicker-multi-2 .ui-datepicker-group {
  width: 50%
}

.ui-datepicker-multi-3 .ui-datepicker-group {
  width: 33.3%
}

.ui-datepicker-multi-4 .ui-datepicker-group {
  width: 25%
}

.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
  border-left-width: 0
}

.ui-datepicker-multi .ui-datepicker-buttonpane {
  clear: left
}

.ui-datepicker-row-break {
  clear: both;
  width: 100%;
  font-size: 0
}

.ui-datepicker-current-day .ui-state-default {
  padding-top: 11px;
  padding-bottom: 11px;
  border: 4px double #fff;
  color: #fff;
  background: #000
}

.ui-state-disabled .ui-state-default {
  color: #d9d9d9;
  border-color: #e5e5e5;
  background: #f6f6f6
}

.ui-state-disabled.ui-datepicker-prev,
.ui-state-disabled.ui-datepicker-next {
  color: #acacac
}

.timepicker {
  display: flex;
  flex-wrap: wrap;
  font-size: 1.4rem
}

.no-flexbox .timepicker {
  zoom: 1
}

.no-flexbox .timepicker:before {
  content: '';
  display: block
}

.no-flexbox .timepicker:after {
  content: '';
  display: table;
  clear: both
}

.no-flexbox .timepicker li {
  float: left
}

.timepicker li {
  padding: 3px;
  width: 25%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box
}

.timepicker button {
  text-align: center;
  width: 100%;
  line-height: 1;
  color: #000;
  border: 1px solid #000;
  padding: 13px 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box
}

.timepicker button:focus {
  outline: 1px dotted #666
}

.timepicker button.is-active {
  padding: 10px 0;
  border: 4px double #fff;
  color: #fff;
  background: #000
}

.timepicker button.is-disabled {
  color: #d9d9d9;
  background: #f6f6f6;
  border-color: #e5e5e5
}

.timepicker.is-unprepared button {
  color: #d9d9d9;
  background: #f6f6f6;
  border-color: #e5e5e5
}

.indicator {
  position: fixed;
  top: 50%;
  right: 30px;
  margin-top: 60px;
  z-index: 45;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%)
}

.indicator-menu>li.is-current>.indicator-a:after {
  background-color: #000;
  border-color: #000
}

.indicator-menu>li.is-current li .indicator-a:after {
  background-color: #ccc
}

.is-current .indicator-product>li.is-current>.indicator-a:after {
  background-color: #000
}

.indicator-product .indicator-a {
  height: 10px
}

.indicator-product .indicator-a:after {
  width: 14px;
  height: 1px;
  border-width: 0;
  border-radius: 0
}

.indicator-a {
  position: relative;
  display: block;
  width: 20px;
  height: 24px
}

.indicator-a:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 10px;
  height: 10px;
  margin: auto;
  border: 1px solid #808080;
  border-radius: 50%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box
}

@media (max-width: 59.99em) {
  .indicator {
    display: none
  }
}

.insta-list {
  zoom: 1;
  margin-left: -5px;
  margin-right: -5px
}

.insta-list:before {
  content: '';
  display: block
}

.insta-list:after {
  content: '';
  display: table;
  clear: both
}

.insta-list li {
  float: left;
  width: 50%;
  padding: 5px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box
}

.insta-list .is-active .thumb:after {
  color: #fff
}

.insta .thumb {
  overflow: hidden;
  position: relative;
  height: 0;
  padding-bottom: 100%
}

.insta .thumb:after {
  content: "\EA0F";
  font-style: normal;
  font-weight: normal;
  font-family: "icon";
  position: absolute;
  bottom: 6px;
  right: 6px;
  color: transparent;
  font-size: 1.6rem;
  opacity: 0.8;
  -webkit-transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1) .4s;
  -moz-transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1) .4s;
  -ms-transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1) .4s;
  -o-transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1) .4s;
  transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1) .4s
}

.insta .thumb-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-position: center center;
  background-size: cover
}

.insta .h2 {
  padding-top: 30px;
  padding-bottom: 30px;
  font-weight: bold;
  font-size: 2rem;
  font-family: "Arita Heiti", "Montserrat", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  text-align: center;
  font-weight: 600;
}

@media (min-width: 45em) {
  .insta-list {
    margin-left: -10px;
    margin-right: -10px
  }

  .insta-list li {
    width: 25%;
    padding: 10px
  }

  .insta .thumb:after {
    bottom: 10px;
    right: 10px;
    font-size: 2.5rem
  }

  .insta .h2 {
    font-size: 3.2rem
  }
}

.caption {
  overflow-y: scroll;
  visibility: hidden;
  height: 0;
  padding: 0 20px;
  background-color: #212121;
  text-align: left;
  font-size: 1.4rem;
  color: #fff;
  -webkit-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -moz-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -ms-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -o-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1)
}

.caption:focus {
  text-decoration: underline
}

.caption:after {
  content: 'HERA';
  display: block;
  margin-top: 20px
}

.video-player+.caption {
  visibility: visible;
  max-height: 150px;
  height: auto;
  padding-top: 20px;
  padding-bottom: 20px
}

.video-player+.caption:empty {
  display: none !important
}

@media (min-width: 45em) {
  .caption:after {
    margin-top: 30px
  }

  .video-player+.caption {
    max-height: 190px
  }
}

.row {
  zoom: 1;
  margin: 0 -5px
}

.row:before {
  content: '';
  display: block
}

.row:after {
  content: '';
  display: table;
  clear: both
}

@media (min-width: 45em) {
  .row {
    margin: 0 -10px
  }
}

.col-m-1,
.col-1,
.col-m-2,
.col-2,
.col-m-3,
.col-3,
.col-m-4,
.col-4,
.col-m-5,
.col-5,
.col-m-6,
.col-6,
.col-m-7,
.col-7,
.col-m-8,
.col-8,
.col-m-9,
.col-9,
.col-m-10,
.col-10,
.col-m-11,
.col-11,
.col-m-12,
.col-12 {
  position: relative;
  float: left;
  min-height: 1px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 5px
}

.col-m-1 {
  width: 8.33333%
}

.col-m-offset-1 {
  margin-left: 8.33333%
}

.col-m-pull-1 {
  right: 8.33333%
}

.col-m-push-1 {
  left: 8.33333%
}

.col-m-2 {
  width: 16.66667%
}

.col-m-offset-2 {
  margin-left: 16.66667%
}

.col-m-pull-2 {
  right: 16.66667%
}

.col-m-push-2 {
  left: 16.66667%
}

.col-m-3 {
  width: 25%
}

.col-m-offset-3 {
  margin-left: 25%
}

.col-m-pull-3 {
  right: 25%
}

.col-m-push-3 {
  left: 25%
}

.col-m-4 {
  width: 33.33333%
}

.col-m-offset-4 {
  margin-left: 33.33333%
}

.col-m-pull-4 {
  right: 33.33333%
}

.col-m-push-4 {
  left: 33.33333%
}

.col-m-5 {
  width: 41.66667%
}

.col-m-offset-5 {
  margin-left: 41.66667%
}

.col-m-pull-5 {
  right: 41.66667%
}

.col-m-push-5 {
  left: 41.66667%
}

.col-m-6 {
  width: 50%
}

.col-m-offset-6 {
  margin-left: 50%
}

.col-m-pull-6 {
  right: 50%
}

.col-m-push-6 {
  left: 50%
}

.col-m-7 {
  width: 58.33333%
}

.col-m-offset-7 {
  margin-left: 58.33333%
}

.col-m-pull-7 {
  right: 58.33333%
}

.col-m-push-7 {
  left: 58.33333%
}

.col-m-8 {
  width: 66.66667%
}

.col-m-offset-8 {
  margin-left: 66.66667%
}

.col-m-pull-8 {
  right: 66.66667%
}

.col-m-push-8 {
  left: 66.66667%
}

.col-m-9 {
  width: 75%
}

.col-m-offset-9 {
  margin-left: 75%
}

.col-m-pull-9 {
  right: 75%
}

.col-m-push-9 {
  left: 75%
}

.col-m-10 {
  width: 83.33333%
}

.col-m-offset-10 {
  margin-left: 83.33333%
}

.col-m-pull-10 {
  right: 83.33333%
}

.col-m-push-10 {
  left: 83.33333%
}

.col-m-11 {
  width: 91.66667%
}

.col-m-offset-11 {
  margin-left: 91.66667%
}

.col-m-pull-11 {
  right: 91.66667%
}

.col-m-push-11 {
  left: 91.66667%
}

.col-m-12 {
  width: 100%
}

.col-m-offset-12 {
  margin-left: 100%
}

.col-m-pull-12 {
  right: 100%
}

.col-m-push-12 {
  left: 100%
}

@media (max-width: 44.99em) {
  .col-1 {
    float: none
  }

  .col-2 {
    float: none
  }

  .col-3 {
    float: none
  }

  .col-4 {
    float: none
  }

  .col-5 {
    float: none
  }

  .col-6 {
    float: none
  }

  .col-7 {
    float: none
  }

  .col-8 {
    float: none
  }

  .col-9 {
    float: none
  }

  .col-10 {
    float: none
  }

  .col-11 {
    float: none
  }

  .col-12 {
    float: none
  }
}

@media (min-width: 45em) {
  .col-1 {
    width: 8.33333%;
    padding: 0 10px
  }

  .col-offset-1 {
    margin-left: 8.33333%
  }

  .col-pull-1 {
    right: 8.33333%
  }

  .col-push-1 {
    left: 8.33333%
  }

  .col-m-1 {
    padding: 0 10px
  }

  .col-m-offset-1 {
    margin-left: 0
  }

  .col-m-pull-1 {
    right: 0
  }

  .col-m-push-1 {
    left: 0
  }

  .col-2 {
    width: 16.66667%;
    padding: 0 10px
  }

  .col-offset-2 {
    margin-left: 16.66667%
  }

  .col-pull-2 {
    right: 16.66667%
  }

  .col-push-2 {
    left: 16.66667%
  }

  .col-m-2 {
    padding: 0 10px
  }

  .col-m-offset-2 {
    margin-left: 0
  }

  .col-m-pull-2 {
    right: 0
  }

  .col-m-push-2 {
    left: 0
  }

  .col-3 {
    width: 25%;
    padding: 0 10px
  }

  .col-offset-3 {
    margin-left: 25%
  }

  .col-pull-3 {
    right: 25%
  }

  .col-push-3 {
    left: 25%
  }

  .col-m-3 {
    padding: 0 10px
  }

  .col-m-offset-3 {
    margin-left: 0
  }

  .col-m-pull-3 {
    right: 0
  }

  .col-m-push-3 {
    left: 0
  }

  .col-4 {
    width: 33.33333%;
    padding: 0 10px
  }

  .col-offset-4 {
    margin-left: 33.33333%
  }

  .col-pull-4 {
    right: 33.33333%
  }

  .col-push-4 {
    left: 33.33333%
  }

  .col-m-4 {
    padding: 0 10px
  }

  .col-m-offset-4 {
    margin-left: 0
  }

  .col-m-pull-4 {
    right: 0
  }

  .col-m-push-4 {
    left: 0
  }

  .col-5 {
    width: 41.66667%;
    padding: 0 10px
  }

  .col-offset-5 {
    margin-left: 41.66667%
  }

  .col-pull-5 {
    right: 41.66667%
  }

  .col-push-5 {
    left: 41.66667%
  }

  .col-m-5 {
    padding: 0 10px
  }

  .col-m-offset-5 {
    margin-left: 0
  }

  .col-m-pull-5 {
    right: 0
  }

  .col-m-push-5 {
    left: 0
  }

  .col-6 {
    width: 50%;
    padding: 0 10px
  }

  .col-offset-6 {
    margin-left: 50%
  }

  .col-pull-6 {
    right: 50%
  }

  .col-push-6 {
    left: 50%
  }

  .col-m-6 {
    padding: 0 10px
  }

  .col-m-offset-6 {
    margin-left: 0
  }

  .col-m-pull-6 {
    right: 0
  }

  .col-m-push-6 {
    left: 0
  }

  .col-7 {
    width: 58.33333%;
    padding: 0 10px
  }

  .col-offset-7 {
    margin-left: 58.33333%
  }

  .col-pull-7 {
    right: 58.33333%
  }

  .col-push-7 {
    left: 58.33333%
  }

  .col-m-7 {
    padding: 0 10px
  }

  .col-m-offset-7 {
    margin-left: 0
  }

  .col-m-pull-7 {
    right: 0
  }

  .col-m-push-7 {
    left: 0
  }

  .col-8 {
    width: 66.66667%;
    padding: 0 10px
  }

  .col-offset-8 {
    margin-left: 66.66667%
  }

  .col-pull-8 {
    right: 66.66667%
  }

  .col-push-8 {
    left: 66.66667%
  }

  .col-m-8 {
    padding: 0 10px
  }

  .col-m-offset-8 {
    margin-left: 0
  }

  .col-m-pull-8 {
    right: 0
  }

  .col-m-push-8 {
    left: 0
  }

  .col-9 {
    width: 75%;
    padding: 0 10px
  }

  .col-offset-9 {
    margin-left: 75%
  }

  .col-pull-9 {
    right: 75%
  }

  .col-push-9 {
    left: 75%
  }

  .col-m-9 {
    padding: 0 10px
  }

  .col-m-offset-9 {
    margin-left: 0
  }

  .col-m-pull-9 {
    right: 0
  }

  .col-m-push-9 {
    left: 0
  }

  .col-10 {
    width: 83.33333%;
    padding: 0 10px
  }

  .col-offset-10 {
    margin-left: 83.33333%
  }

  .col-pull-10 {
    right: 83.33333%
  }

  .col-push-10 {
    left: 83.33333%
  }

  .col-m-10 {
    padding: 0 10px
  }

  .col-m-offset-10 {
    margin-left: 0
  }

  .col-m-pull-10 {
    right: 0
  }

  .col-m-push-10 {
    left: 0
  }

  .col-11 {
    width: 91.66667%;
    padding: 0 10px
  }

  .col-offset-11 {
    margin-left: 91.66667%
  }

  .col-pull-11 {
    right: 91.66667%
  }

  .col-push-11 {
    left: 91.66667%
  }

  .col-m-11 {
    padding: 0 10px
  }

  .col-m-offset-11 {
    margin-left: 0
  }

  .col-m-pull-11 {
    right: 0
  }

  .col-m-push-11 {
    left: 0
  }

  .col-12 {
    width: 100%;
    padding: 0 10px
  }

  .col-offset-12 {
    margin-left: 100%
  }

  .col-pull-12 {
    right: 100%
  }

  .col-push-12 {
    left: 100%
  }

  .col-m-12 {
    padding: 0 10px
  }

  .col-m-offset-12 {
    margin-left: 0
  }

  .col-m-pull-12 {
    right: 0
  }

  .col-m-push-12 {
    left: 0
  }
}

.col-12 {
  float: none
}

@font-face {
  font-family: "icon";
  src: url("/resource/css/font/icon.eot");
  src: url("/resource/css/font/icon.eot?#iefix") format("eot"), url("/resource/css/font/icon.woff") format("woff")
}

.icon-arrow-bottom:before,
.icon-arrow-first:before,
.icon-arrow-last:before,
.icon-arrow-left:before,
.icon-arrow-right:before,
.icon-arrow-top:before,
.icon-blockquote:before,
.icon-blog:before,
.icon-checkbox-checked:before,
.icon-checkbox-unchecked:before,
.icon-close:before,
.icon-dropdown-down:before,
.icon-dropdown-up:before,
.icon-facebook:before,
.icon-instagram:before,
.icon-locator-circle:before,
.icon-locator-symbol:before,
.icon-login:before,
.icon-logo:before,
.icon-logout:before,
.icon-play:before,
.icon-reload:before,
.icon-resize-back:before,
.icon-resize-zoom:before,
.icon-search:before,
.icon-share:before,
.icon-sign:before,
.icon-success:before,
.icon-twitter:before,
.icon-url:before,
.icon-warning-circle:before,
.icon-warning:before,
.icon-youtube:before {
  font-family: "icon";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  text-decoration: none;
  text-transform: none
}

.icon-arrow-bottom:before {
  content: "\EA01"
}

.icon-arrow-first:before {
  content: "\EA02"
}

.icon-arrow-last:before {
  content: "\EA03"
}

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

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

.icon-arrow-top:before {
  content: "\EA06"
}

.icon-blockquote:before {
  content: "\EA07"
}

.icon-blog:before {
  content: "\EA08"
}

.icon-checkbox-checked:before {
  content: "\EA09"
}

.icon-checkbox-unchecked:before {
  content: "\EA0A"
}

.icon-close:before {
  content: "\EA0B"
}

.icon-dropdown-down:before {
  content: "\EA0C"
}

.icon-dropdown-up:before {
  content: "\EA0D"
}

.icon-facebook:before {
  content: "\EA0E"
}

.icon-instagram:before {
  content: "\EA0F"
}

.icon-locator-circle:before {
  content: "\EA10"
}

.icon-locator-symbol:before {
  content: "\EA11"
}

.icon-login:before {
  content: "\EA12"
}

.icon-logo:before {
  content: "\EA13"
}

.icon-logout:before {
  content: "\EA14"
}

.icon-play:before {
  content: "\EA15"
}

.icon-reload:before {
  content: "\EA16"
}

.icon-resize-back:before {
  content: "\EA17"
}

.icon-resize-zoom:before {
  content: "\EA18"
}

.icon-search:before {
  content: "\EA19"
}

.icon-share:before {
  content: "\EA1A"
}

.icon-sign:before {
  content: "\EA1B"
}

.icon-success:before {
  content: "\EA1C"
}

.icon-twitter:before {
  content: "\EA1D"
}

.icon-url:before {
  content: "\EA1E"
}

.icon-warning-circle:before {
  content: "\EA1F"
}

.icon-warning:before {
  content: "\EA20"
}

.icon-youtube:before {
  content: "\EA21"
}

.revealbars {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100
}

.revealbars-col {
  float: left;
  height: 100%;
  background: #000
}

.table {
  border-spacing: 0;
  border-collapse: collapse;
  border-top: 2px solid #000;
  border-bottom: 1px solid #e5e5e5
}

.table th,
.table td {
  padding: 25px 20px;
  vertical-align: middle;
  border: 1px solid #e5e5e5
}

.table th {
  text-align: left;
  font-weight: normal;
  color: #222;
  background: #f6f6f6;
  word-break: keep-all;
  word-wrap: break-word
}

.table thead th {
  border-top: 1px solid #e5e5e5;
  border-left: 1px solid #e5e5e5
}

.table thead th:first-child {
  border-left: 0
}

.table thead+tbody tr:first-child td {
  border-top: 0
}

.table tbody th+td {
  border-left: 0
}

.table tbody td {
  word-wrap: break-word;
  border-right: 0
}

.table tbody td:first-child {
  border-left: 0
}

@media (min-width: 45em) {

  .table tbody td,
  .table tbody th {
    padding: 35px 40px
  }
}

.table p {
  margin: 0
}

.table-col-1-2 {
  width: 50%
}

.table-col-1-4 {
  width: 25%
}

.table--curriculum {
  border-top: 0
}

.table--curriculum tbody {
  border-top: 2px solid #000;
  line-height: 1.6
}

@media (max-width: 59.99em) {

  .table--curriculum tbody td,
  .table--curriculum tbody th {
    display: block;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box
  }

  .table--curriculum tbody th {
    border-bottom: 0
  }

  .table--curriculum tbody th+td {
    border: 1px solid #e5e5e5;
    border-width: 0 1px 0 1px
  }
}

@media (min-width: 45em) {

  .table--curriculum tbody td,
  .table--curriculum tbody th {
    padding: 25px 40px
  }
}

@media (min-width: 60em) {

  .table--curriculum tbody td,
  .table--curriculum tbody th {
    padding: 35px 40px
  }

  .table--curriculum tbody th {
    width: 200px
  }
}

@media (min-width: 80em) {
  .table--curriculum tbody th {
    padding: 0 70px
  }
}

#bp {
  position: relative;
  z-index: 1
}

@media (min-width: 25em) {
  #bp {
    z-index: 2
  }
}

@media (min-width: 35em) {
  #bp {
    z-index: 3
  }
}

@media (min-width: 45em) {
  #bp {
    z-index: 4
  }
}

@media (min-width: 60em) {
  #bp {
    z-index: 5
  }
}

@media (min-width: 80em) {
  #bp {
    z-index: 6
  }
}

@media (min-width: 100em) {
  #bp {
    z-index: 7
  }
}

#wrap {
  position: relative;
  -webkit-user-drag: none;
  touch-action: pan-y
}

.main {
  outline: none;
  min-height: calc(100vh - 60px - 316px);
  padding-top: 60px;
  padding-bottom: 60px;
  background-color: #fff;
  font-size: 1.6em;
  -webkit-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -moz-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -ms-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -o-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1)
}

.main--flat {
  padding-bottom: 0;
  min-height: calc(100vh - 60px - 123px);
}

.main--fog {
  background-color: #f6f6f6
}

.main.main--cushion,
.main.cell .cell-cover,
.main.edp .edp--cover,
.main .mycol-section,
.main .mycol-section:nth-of-type(1) {
  height: calc(100vh - 60px);
}

.main.main--cushion .cushion-intro .is-opened .is-active .bg {
  top: 60px;
}

@media (min-width: 80em) {
  body>#wrap:before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 64px;
    background: #fff;
    z-index: 101;
    border-bottom: 1px solid #e5e5e5;
  }

  .main {
    padding-top: 60px;
    min-height: calc(100vh - 60px - 277px);
  }

  .main--flat {
    min-height: calc(100vh - 65px - 194px)
  }

  .main.main--cushion,
  .main.cell .cell-cover,
  .main.edp .edp--cover,
  .main .mycol-section,
  .main .mycol-section:nth-of-type(1) {
    height: calc(100vh - 65px);
  }

  .main.main--cushion .cushion-intro .is-opened .is-active .bg {
    top: 65px;
  }
}

#legacy-browser {
  position: fixed;
  top: 160px;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 1108px;
  margin: auto;
  background-color: #f6f6f6;
  background-color: rgba(246, 246, 246, 0.8);
  color: #333;
  font-weight: normal;
  font-size: 16px;
  z-index: 999
}

#legacy-browser .legacy-pad {
  padding: 60px 40px
}

#legacy-browser .close-browser-guide {
  position: absolute;
  right: 20px;
  bottom: 20px;
  padding: 5px;
  width: 20px;
  height: 20px
}

#legacy-browser .close-browser-guide:after {
  content: "\EA0B";
  font-style: normal;
  font-weight: normal;
  font-family: "icon";
  color: #000
}

#legacy-browser p {
  margin: 0
}

#legacy-browser a {
  color: #000;
  border-bottom: 1px solid #46166b
}

#skipnav {
  position: absolute;
  top: 0;
  left: -100%;
  color: #fff;
  background: #666;
  font-size: 1.6em
}

#skipnav:focus {
  display: block;
  position: fixed;
  left: 0;
  width: 100%;
  z-index: 29999;
  padding: 20px;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
  vertical-align: middle
}

.is-gnb-active:after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  background-color: #000;
  opacity: 0.8
}

.is-nav-active:after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 110;
  background-color: #000;
  opacity: 0.8
}

.is-nav-active #wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%
}

.func {
  margin-top: 30px;
  text-align: center
}

.l-wrap-12 {
  position: relative;
  margin-left: 5.55556%;
  margin-right: 5.55556%
}

@media (min-width: 60em) {
  .l-wrap-12 {
    margin-left: 6.71875%;
    margin-right: 6.71875%
  }
}

@media (min-width: 80em) {
  .l-wrap-12 {
    margin-left: 6.71875%;
    margin-right: 6.71875%
  }
}

.l-wrap-10 {
  position: relative;
  margin-left: 5.55556%;
  margin-right: 5.55556%
}

@media (min-width: 60em) {
  .l-wrap-10 {
    padding-left: calc(9400% / 1280);
    padding-right: calc(9400% / 1280);
    margin-left: 6.71875%;
    margin-right: 6.71875%
  }
}

.l-wrap-8 {
  position: relative;
  margin-left: 5.55556%;
  margin-right: 5.55556%
}

@media (min-width: 60em) {
  .l-wrap-8 {
    padding-left: calc(18800% / 1280);
    padding-right: calc(18800% / 1280);
    margin-left: 6.71875%;
    margin-right: 6.71875%
  }
}

.l-wrap-6 {
  position: relative;
  margin-left: 5.55556%;
  margin-right: 5.55556%
}

@media (min-width: 60em) {
  .l-wrap-6 {
    padding-left: calc(28200% / 1280);
    padding-right: calc(28200% / 1280);
    margin-left: 6.71875%;
    margin-right: 6.71875%
  }
}

.l-wrap-4 {
  position: relative;
  margin-left: 5.55556%;
  margin-right: 5.55556%
}

@media (min-width: 60em) {
  .l-wrap-4 {
    padding-left: calc(37600% / 1280);
    padding-right: calc(37600% / 1280);
    margin-left: 6.71875%;
    margin-right: 6.71875%
  }
}

.l-wrap {
  max-width: 1108px;
  padding-left: 5.55556%;
  padding-right: 5.55556%;
  margin: auto
}

@media (min-width: 60em) {
  .l-wrap {
    padding-left: 16.71875%;
    padding-right: 16.71875%
  }
}

.l-layout {
  max-width: 1280px;
  margin: auto
}

@media (max-width: 59.99em) {
  .l-m-full {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
    min-height: 600px
  }
}


.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 101;
  width: 100%;
  text-align: center;
  background: #fff;
  border-bottom: 1px solid #e5e5e5;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

.header .logo {
  position: relative;
  float: left;
  display: inline-block;
  font-size: 0rem;
}

.header .logo-a {
  display: block;
  width: 156px;
  padding: 22px 0 21px 0;
  color: #000;
}

.header .logo-img {
  display: inline-block;
  vertical-align: top;
  width: 115px;
  height: 16px
}

.header .logo-img path {
  fill: #000
}

.header .common-menu {
  position: absolute;
  top: 16px;
  right: 58px;
  z-index: 21
}

.header .common-menu-a {
  display: inline-block;
  padding: 4px 4px;
  line-height: 1;
  color: #000;
  -webkit-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -moz-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -ms-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -o-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1)
}

.header .common-menu-a.common-menu--membership {
  display: none;
  position: relative;
  top: -5px;
  margin-right: 18px;
  color: #000;
  font-size: 13px;
  padding: 0 0;
}

@media (min-width: 48em) {
  .header .common-menu-a.common-menu--membership {display:inline-block;}
}

@media (min-width: 80em) {
  .header .common-menu-a.common-menu--membership {display:inline-block;margin-right:0;}
}

.header .common-menu-a:after {
  font-size: 2rem
}

.header .common-menu--store,
.header .common-menu--login {
  display: none
}

.header .common-menu--store:after {
  content: "\EA10";
  font-style: normal;
  font-weight: normal;
  font-family: "icon"
}

.header .common-menu--search:after {
  content: "\EA19";
  font-style: normal;
  font-weight: normal;
  font-family: "icon"
}

.header .common-menu--login:after {
  content: "\EA12";
  font-style: normal;
  font-weight: normal;
  font-family: "icon"
}

.header .search-layer {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 1px;
  z-index: 101;
  background-color: #fafafa;
}

.header .search-layer-cell {
  padding-top: 18px;
  padding-bottom: 25px;
  padding-left: 5.55556%;
  padding-right: 5.55556%;
  margin: auto;
}

.header .search-layer-input {
  position: relative;
  display: block;
  padding-top: 5px;
  padding-bottom: 17px;
  border-bottom: 1px solid #000;
  color: #767676
}

.header .search-layer-input.is-focus .keyword {
  left: 10px
}

.header .search-layer .input-search {
  position: relative;
  z-index: 1;
  height: 32px;
  padding-top: 0;
  padding-left: 10px;
  padding-bottom: 0;
  border-color: transparent;
  background-color: transparent;
  font-size: 2.4rem;
  line-height: 1.3
}

.header .search-layer .input-search [lang="en"],
.header .search-layer .input-search[lang="en"] {
  font-size: 2.0rem
}

.header .search-layer .search-btn {
  position: absolute;
  z-index: 10;
  top: 50%;
  right: 0;
  margin-top: -5px;
  margin-right: -10px;
  -webkit-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -moz-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -ms-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -o-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%)
}

.header .search-layer .search-btn:after {
  content: "\EA19";
  font-style: normal;
  font-weight: normal;
  font-family: "icon";
  color: #000;
  font-size: 1.8rem;
  line-height: 1.6
}

.header .search-layer .search-btn:after [lang="en"],
.header .search-layer .search-btn:after[lang="en"] {
  font-size: 1.6rem
}

.header .search-layer .search-close {
  display: none;
  margin-top: 28px;
  color: #333;
  font-size: 1.3rem
}

.header .search-layer .search-close:after {
  content: "\EA06";
  font-style: normal;
  font-weight: normal;
  font-family: "icon";
  margin-left: 5px;
  color: #333;
  font-weight: bold;
  font-size: 10px
}

.header .search-layer .keyword {
  display: inline-block;
  overflow: hidden;
  position: absolute;
  top: 7px;
  left: 0;
  z-index: 0;
  height: 26px;
  text-align: left;
  color: #767676;
  font-weight: 100;
  font-size: 1.8rem;
  line-height: 1.6;
  -webkit-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -moz-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -ms-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -o-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1)
}

.header .search-layer .keyword [lang="en"],
.header .search-layer .keyword[lang="en"] {
  font-size: 1.6rem
}

.header .recommend-keyword {
  margin-top: 10px;
  font-size: 1.4rem;
  text-align: left
}

.header .recommend-keyword dt {
  display: block;
  margin-bottom: 6px;
  vertical-align: top;
  margin-right: 10px;
  color: #000;
  font-weight: bold
}

.header .recommend-keyword dd {
  display: inline-block;
  vertical-align: top;
  margin-top: 1px;
  margin-right: 19px;
}

.header .recommend-keyword a {
  position: relative;
  color: #333;
  font-weight: 100;
  -webkit-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -moz-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -ms-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -o-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1)
}

.header .recommend-keyword a:before {
  content: '#';
  margin-right: 2px
}

.header .recommend-keyword a:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 1px;
  background-color: transparent;
  -webkit-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -moz-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -ms-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -o-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1)
}

.header .recommend-keyword a:hover,
.header .recommend-keyword a:focus {
  color: #000
}

.header .recommend-keyword a:hover:after,
.header .recommend-keyword a:focus:after {
  width: 100%;
  background-color: #000
}

.header .open-sidenav {
  position: absolute;
  top: 18px;
  right: 16px;
  z-index: 21;
  width: 20px;
  height: 16px;
  padding: 4px
}

.header .open-sidenav:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  margin: auto 4px;
  background-color: #000
}

.header .open-sidenav:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 4px;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box
}

/* tablet */
@media (min-width: 45em) {
  .header .search-layer-cell {
    padding-top: 31px;
    padding-bottom: 39px;
  }

  .header .search-layer .search-btn:after {
    font-size: 2.4rem;
  }

  .header .search-layer-input {
    padding-top: 7px;
    padding-bottom: 17px;
  }

  .header .recommend-keyword {
    margin-top: 11px;
  }

  .header .recommend-keyword dt {
    margin-bottom: 3px;
  }

  .header .recommend-keyword dd {
    margin-top: 4px;
  }
}

/* pc */
@media (min-width: 80em) {
  .header {}

  .header .header-inner {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
  }

  .header .header-inner:after {
    content: "";
    display: block;
    clear: both;
  }

  .header .logo-a {
    display: block;
    width: 104px;
    padding: 25px 0 21px 0;
    color: #000;
  }

  .header .logo-img {
    width: 104px;
    height: 18px;
  }

  .header .common-links {
    position: absolute;
    top: 19px;
    right: -4px;
    z-index: 20;
  }

  .header .common-menu {
    position: relative;
    top: auto;
    right: auto;
    z-index: inherit;
  }

  .header .common-menu-a:after {
    font-size: 1.8rem;
  }

  .header .common-menu-a+.common-menu-a {
    margin-left: 14px
  }

  .header .common-menu--store,
  .header .common-menu--login {
    display: inline-block
  }

  .header .common-menu--store:after {
    content: "\EA10";
    font-style: normal;
    font-weight: normal;
    font-family: "icon"
  }

  .header .common-menu--search:after {
    content: "\EA19";
    font-style: normal;
    font-weight: normal;
    font-family: "icon"
  }

  .header .common-menu--login:after {
    content: "\EA12";
    font-style: normal;
    font-weight: normal;
    font-family: "icon"
  }

  .header .common-menu--logout:after {
    content: "\EA14";
    font-style: normal;
    font-weight: normal;
    font-family: "icon"
  }

  .header .search-layer {
    margin-top: 1px;
  }

  .header .search-layer #gnb-search-form {
    margin: 0 auto;
    max-width: 1280px;
  }

  .header .search-layer:before,
  .header .search-layer:after {
    content: "";
    position: absolute;
    top: 0px;
    left: 100%;
    width: calc(100vw - 100%);
    height: 100%;
    background: #fafafa;
  }

  .header .search-layer:after {
    left: auto;
    right: 100%;
  }

  .header .search-layer-cell {
    padding: 25px 86px 35px 86px;
  }

  .header .search-layer-input {
    padding-top: 0;
    padding-bottom: 15px
  }

  .header .search-layer-input.is-focus .keyword {
    left: 15px
  }

  .header .search-layer .input-search {
    height: 46px;
    padding-left: 15px;
    font-size: 2.4rem;
    line-height: 1.3
  }

  .header .search-layer .input-search [lang="en"],
  .header .search-layer .input-search[lang="en"] {
    font-size: 2.0rem
  }

  .header .search-layer .input-search:focus+.search-btn {
    margin-right: 0
  }

  .header .search-layer .keyword {
    top: 8px;
    height: 36px;
    font-size: 2.4rem;
    line-height: 1.3
  }

  .header .search-layer .keyword [lang="en"],
  .header .search-layer .keyword[lang="en"] {
    font-size: 2.0rem
  }

  .header .search-layer .search-btn {
    margin-top: -5px
  }

  .header .search-layer .search-btn:after {
    content: "\EA19";
    font-style: normal;
    font-weight: normal;
    font-family: "icon";
    color: #000;
    font-size: 2.4rem;
    line-height: 1.3
  }

  .header .search-layer .search-btn:after [lang="en"],
  .header .search-layer .search-btn:after[lang="en"] {
    font-size: 2.0rem
  }

  .header .search-layer .search-close {
    display: inline-block;
  }

  .header .open-sidenav {
    display: none
  }

  .header .recommend-keyword dt {
    display: inline-block;
    margin-bottom: 0;
  }

  .header .recommend-keyword dd {
    margin-top: 0;
    margin-right: 14px
  }
}

.l-header {
  zoom: 1;
  position: relative;
  z-index: 10;
}

.l-header:before {
  content: '';
  display: block
}

.l-header:after {
  content: '';
  display: table;
  clear: both
}

/* pc */
@media (min-width: 80em) {
  .l-header {
    float: left;
  }
}

.gnb {
  display: none;
  float: left;
}

.gnb-menu {
  display: inline-block;
  margin-lefT: 36px;
}

.gnb-feature {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%
}

.gnb-draw {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 1px;
  z-index: 1;
  width: 100%;
  padding: 40px 86px 50px 86px;
  min-height: 300px;
  background-color: #fafafa;
  font-size: 1.4rem;
  text-align: left;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

.gnb-draw:before,
.gnb-draw:after {
  content: "";
  position: absolute;
  top: 0px;
  left: 100%;
  width: calc(100vw - 100%);
  height: 100%;
  background: #fafafa;
}

.gnb-draw:after {
  left: auto;
  right: 100%;
}

.gnb-draw .l-gnb {
  zoom: 1;
  margin: auto
}

.gnb-draw .l-gnb:before {
  content: '';
  display: block
}

.gnb-draw .l-gnb:after {
  content: '';
  display: table;
  clear: both
}

.gnb-draw.gnb-draw--half .d2 {
  width: 50%
}

.gnb-sub {
  zoom: 1;
  float: left;
  width: 76.35379%;
  margin-top: -6px
}

.gnb-sub:before {
  content: '';
  display: block
}

.gnb-sub:after {
  content: '';
  display: table;
  clear: both
}

.gnb-draw--half .gnb-sub {
  width: 50.90253%
}

.gnb-figure {
  float: right;
  width: 23.64621%
}

.gnb-draw--half .gnb-figure {
  width: 50.90253%;
  margin-right: -20px
}

.gnb-figure-item+.gnb-figure-item {
  margin-top: 38px
}

.gnb-draw--half .gnb-figure-item+.gnb-figure-item {
  margin-top: 0
}

.gnb-draw--half .gnb-figure-item {
  float: left;
  width: 50%
}

.gnb-figure-link {
  display: block
}

.gnb-draw--half .gnb-figure-link {
  margin-right: 20px
}

.gnb-figure-link:focus .thumb img,
.gnb-figure-link:hover .thumb img {
  -webkit-transform: scale(1.05);
  transform: scale(1.05)
}

.gnb-figure-link:focus p,
.gnb-figure-link:hover p {
  border-bottom-color: #000;
  color: #000
}

.gnb-figure .thumb {
  overflow: hidden;
  position: relative;
  color: #000
}

.gnb-figure .thumb img {
  -webkit-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -moz-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -ms-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -o-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1)
}

.gnb-figure p {
  display: inline-block;
  vertical-align: top;
  margin-top: 10px;
  margin-bottom: 0;
  border-bottom: 1px solid transparent;
  line-height: 1.3;
  -webkit-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -moz-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -ms-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -o-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1)
}

.gnb-d1 {
  position: relative;
  display: block;
  color: #666;
  font-size: 1.5rem;
  text-align: center;
  padding: 23px 9px 19px 9px;
  z-index: 30;
  -webkit-transition: color .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -moz-transition: color .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -ms-transition: color .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -o-transition: color .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: color .4s cubic-bezier(0.39, 0.575, 0.565, 1);
}

.gnb-d1:after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0%;
  right: 0;
  height: 2px;
  margin-left: auto;
  margin-right: auto;
  background-color: transparent;
  -webkit-transform: translateZ(0%);
  transform: translateZ(0%);
  -webkit-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -moz-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -ms-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -o-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
}

/* .gnb-d1.is-current {color:#000;} */
.is-current .gnb-d1 {
  color: #000;
  font-weight: 600;
}

.is-current .gnb-d1:after,
.is-active .gnb-d1:after {
  width: 100%;
  background-color: #000
}

/* [S : 20191126] 메뉴 추가 : 시즌컬렉션 */
.is-current [data-track-name="gnb/season-collection"],
.is-active [data-track-name="gnb/season-collection"] {
  color: #C44242;
}

.is-current [data-track-name="gnb/season-collection"]:after,
.is-active [data-track-name="gnb/season-collection"]:after {
  width: 100%;
  background-color: #C44242;
  height: 4px;
}

/* 
  .gnb-lst.is-active + .d1--makeup.is-current .gnb-d1 {font-weight:400;}
  .gnb-lst.is-active + .d1--makeup.is-current .gnb-d1:after {background-color:transparent;}
  .gnb-lst.is-active + .d1--makeup.is-active .gnb-d1 {font-weight:600;}
  .gnb-lst.is-active + .d1--makeup.is-active .gnb-d1:after {width:100%;background-color:#000}
  */
/* [E : 20191126] 메뉴 추가 : 시즌컬렉션 */

.gnb-d2 {
  overflow: hidden;
  position: relative;
  display: block;
  max-width: calc((850px/3) - 95px - 20px);
  padding-bottom: 8px;
  color: #333;
  font-weight: bold;
  font-size: 1.6rem;
  -webkit-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -moz-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -ms-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -o-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1)
}

.gnb-d2:before,
.gnb-d2:after {
  content: '';
  position: absolute;
  bottom: 0;
  height: 1px;
  -webkit-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -moz-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -ms-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -o-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1)
}

.gnb-d2:before {
  z-index: 10;
  left: 0;
  width: 0%;
  background-color: #000;
  opacity: 0;
  -webkit-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1) .1s;
  -moz-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1) .1s;
  -ms-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1) .1s;
  -o-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1) .1s;
  transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1) .1s
}

.gnb-d2:after {
  z-index: 1;
  right: 0;
  width: 100%;
  background-color: #e5e5e5;
  opacity: 1
}

.gnb-d2.is-current,
.gnb-d2:hover,
.gnb-d2:focus {
  color: #000
}

.gnb-d2.is-current:before,
.gnb-d2:hover:before,
.gnb-d2:focus:before {
  width: 100%;
  opacity: 1
}

.gnb-d2.is-current:after,
.gnb-d2:hover:after,
.gnb-d2:focus:after {
  width: 0%
}

.gnb-d3 {
  display: inline-block;
  border-bottom: 1px solid transparent;
  -webkit-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -moz-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -ms-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -o-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1)
}

.gnb-d3:hover,
.gnb-d3:focus {
  color: #000;
  border-color: #000;
  font-weight: bold;
}

.gnb-close {
  position: absolute;
  left: 50%;
  bottom: 12px;
  color: #333;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%)
}

.gnb-close:after {
  content: "\EA06";
  font-style: normal;
  font-weight: normal;
  font-family: "icon";
  margin-left: 5px;
  color: #333;
  font-weight: bold;
  font-size: 12px
}

.gnb-d1-a {
  position: relative;
  display: inline-block;
  vertical-align: top;
  margin-bottom: 27px;
  font-weight: bold;
  font-size: 1.6rem;
  color: #333
}

.gnb-d1-a:before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: transparent;
  -webkit-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -moz-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -ms-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -o-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1)
}

.gnb-d1-a:after {
  content: "\EA05";
  font-style: normal;
  font-weight: normal;
  font-family: "icon";
  margin-left: 8px;
  color: #000;
  font-weight: bold;
  font-size: 1rem
}

.gnb-d1-a:hover,
.gnb-d1-a:focus {
  color: #000
}

.gnb-d1-a:hover:before,
.gnb-d1-a:focus:before {
  background-color: #000
}

.gnb-d1-a:hover:after,
.gnb-d1-a:focus:after {
  color: #000
}

.gnb-d1-a.is-current {
  color: #000
}

.gnb-d1-a.is-current:before {
  background-color: #000
}

.gnb .d1 {
  display: inline-block;
  vertical-align: top;
}

.gnb .d1+.d1 {
  margin-left: 18px;
}

.gnb .d2 {
  float: left;
  width: 33.33333%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box
}

.gnb .d2:nth-child(3n+1) {
  clear: both
}

.gnb .d2:nth-child(n+4) {
  margin-top: 28px
}

.gnb .d3 {
  max-width: calc((850px/3) - 95px - 20px);
  margin-top: 5px
}

.gnb .d3 li {
  margin-top: 3px
}

.gnb .d3 .is-current .gnb-d3 {
  color: #000;
  border-color: #000
}

.gnb-d1:lang(en),
.gnb-d2:lang(en),
.gnb-d1-a:lang(en) {
  font-family: "Arita Heiti", "Montserrat", sans-serif;
  font-weight: 600;
}

.gnb-d1:lang(en) {
  letter-spacing: 1.4px;
}

.gnb-sub:lang(en),
.gnb .d3:lang(en) {
  letter-spacing: 1px;
}

/* tablet */
@media (min-width: 45em) {}

/* pc */
@media (min-width: 80em) {
  .gnb {
    display: block
  }
}

.sidenav {
  position: fixed;
  top: 0;
  right: 0%;
  z-index: 199;
  width: 100%;
  max-width: 360px;
  height: 100%;
  background-color: #fff;
  font-size: 1.6rem;
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-transform: translate3d(100%, 0, 0);
  -moz-transform: translate3d(100%, 0, 0);
  -ms-transform: translate3d(100%, 0, 0);
  -o-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0)
}

.sidenav .l-sidenav {
  overflow-y: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0
}

.sidenav-logo {
  border-bottom: 1px solid #d9d9d9;
  font-size: 0rem;
}

.sidenav-logo .logo-a {
  position: relative;
  z-index: 101;
  display: inline-block;
  padding: 22px 20px 24px 20px;
  color: #000
}

.sidenav-logo .logo-img {
  display: inline-block;
  vertical-align: top;
  width: 90px;
  height: 16px;
}

.sidenav-logo .logo-img path {
  fill: #000
}

.sidenav-common {
  position: absolute;
  top: 17px;
  right: 0;
  padding: 0 20px;
  font-size: 0;
  zoom: 1
}

.sidenav-common:before {
  content: '';
  display: block
}

.sidenav-common:after {
  content: '';
  display: table;
  clear: both
}

.sidenav-common .common-login {
  display: block;
  float: left;
}

.sidenav-common .common-login:after {
  content: "\EA12";
  font-style: normal;
  font-weight: normal;
  font-family: "icon";
  color: #000;
  font-size: 2rem
}

.sidenav-common .common-logout {
  display: block;
  margin-top: 5px;
  float: left
}

.sidenav-common .common-logout:after {
  content: "\EA14";
  font-style: normal;
  font-weight: normal;
  font-family: "icon";
  color: #000;
  font-size: 2rem
}

.sidenav-common .close-sidenav {
  float: right;
  margin-lefT: 18px;
  padding: 5px 0;
  outline: 0 none
}

.sidenav-common .close-sidenav:after {
  content: "\EA0B";
  font-style: normal;
  font-weight: normal;
  font-family: "icon";
  color: #000;
  font-size: 1.8rem
}

.sidenav-utils {
  padding: 26px 20px 40px;
  font-size: 1.4rem
}

/* .sidenav-utils .footer-icon-img.xia {
  width: 40px;
  margin:10px 0 0 5px;
} */

.sidenav-utils .dropdown {
  margin: 15px 0 28px 0;
  background-color: transparent;
  text-transform: uppercase;
  position: relative;
  /* right: -30%; top: -40px; */
}

.sidenav-utils .dropdown-selector {
  max-width: 185px;
  padding-left: 95px;
  border: 0 none;
  line-height: 1.5;
  color: #767676;
  padding: 0;
}

.sidenav-utils .dropdown-selector:before {
  position: absolute;
  top: 50%;
  left: 0;
  font-weight: 600;
  font-family: "Arita Heiti", "Montserrat", sans-serif;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -moz-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -ms-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -o-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1)
}

.sidenav-utils .dropdown-selector:after {
  right: 0;
  border-top-color: #767676;
  border-bottom-color: #767676
}

.sidenav-utils .dropdown-option {
  top: initial;
  bottom: 0%;
  margin-bottom: 30px;
  border-top-color: #333
}

.sidenav-utils .dropdown-option li a {
  text-align: center;
}

.sidenav-utils .dropdown.is-active .dropdown-selector:before {
  left: 5px
}

.sidenav-utils .copyright {
  margin-top: 22px;
}

.sidenav-link {
  margin-bottom: 22px;
}

.sidenav-link li {
  position: relative;
  display: inline-block;
  margin-top: 5px;
  vertical-align: top;
  padding-right: 10px;
  margin-right: 6px
}

.sidenav-link li:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  height: 11px;
  margin: auto;
  background-color: #333
}

.sidenav-link li:last-child {
  padding-right: 0;
  margin-right: 0;
}

.sidenav-link li:last-child:after {
  content: none;
}

.sidenav-d1 {
  display: block;
  padding: 15px 20px;
  border-bottom: 1px solid #e5e5e5;
  color: #333;
  font-size: 1.8rem;
  line-height: 1.6;
}

.sidenav-d1 [lang="en"],
.sidenav-d1[lang="en"] {
  font-size: 1.6rem
}

.sidenav-d2 {
  display: block;
  padding: 14px 10px;
  color: #333;
}

.sidenav-d3 {
  border-bottom: 1px solid transparent
}

.sidenav-d3.is-current {
  color: #000;
  font-weight: bold;
  text-decoration: underline;
}

.sidenav .d2 {
  padding: 0 20px;
  background-color: #fafafa;
  border-bottom: 1px solid #e5e5e5;
}

.sidenav .d2>li+li {
  border-top: 1px solid #d6d6d6;
}

.sidenav .d3 {
  padding: 20px 0;
  border-top: 1px solid #d6d6d6;
}

.sidenav .d3 li {
  padding: 10px 30px 11px
}

.sidenav .has-sub>span {
  position: relative
}

.sidenav .has-sub>span:before,
.sidenav .has-sub>span:after {
  content: '';
  position: absolute;
  top: 4px;
  bottom: 0;
  right: 19px;
  width: 14px;
  height: 0px;
  margin: auto;
  border: 1px solid #333;
  -webkit-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -moz-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -ms-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -o-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box
}

.sidenav .has-sub>span:after {
  -webkit-transform: rotate(90deg) scaleX(1);
  -moz-transform: rotate(90deg) scaleX(1);
  -ms-transform: rotate(90deg) scaleX(1);
  -o-transform: rotate(90deg) scaleX(1);
  transform: rotate(90deg) scaleX(1)
}

.sidenav .has-sub>span.sidenav-d2:before,
.sidenav .has-sub>span.sidenav-d2:after {
  right: 11px;
}

.sidenav .has-sub.is-active>span:before {
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
  transform: rotate(-180deg)
}

.sidenav .has-sub.is-active>span:after {
  height: 16px;
  border-width: 2px;
  border-color: transparent;
  opacity: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg)
}

.sidenav.is-active {
  box-shadow: -3px 0 7px 0 rgba(0, 0, 0, 0.35)
}

.sidenav .d1.is-active .sidenav-d1 {
  background: #fafafa;
}

.sidenav .d2>li.is-active .sidenav-d2 {
  font-weight: bold;
  color: #000;
}

/* [20200128] 시즌 컬랙션 관련 css 주석 처리 */
/* 
  .sidenav-menu .d1:nth-child(2) .sidenav-d1 {color:#C44242;} 
  .sidenav-menu .d1.is-active:nth-child(2) .sidenav-d1 {background-color:#C44242;color:#333} 
  */
.sidenav .l-sidenav a:focus,
.sidenav .l-sidenav button:focus,
span.sidenav-d1:focus,
span.sidenav-d2:focus,
.sidenav .d2>li.is-active .sidenav-d2:focus {
  outline: none;
  background-color: rgba(0, 0, 0, 0.098);
}

.sidenav-d1:lang(en),
.sidenav-d2:lang(en) {
  font-family: "Arita Heiti", "Montserrat", sans-serif;
  font-weight: 600;
}

.sidenav-menu:lang(en) {
  letter-spacing: 1px;
}

.sidenav-menu .sidenav-d1:lang(en) {
  letter-spacing: 1.4px;
}

@media (min-width: 80em) {
  .sidenav {
    display: none
  }
}

.sidenav-utils .dropdown-option a,
.sidenav-utils .dropdown-option label {
  color: #333
}

.sidenav-utils .dropdown-option .is-current a,
.sidenav-utils .dropdown-option .is-current label,
.sidenav-utils .dropdown-option .is-active a,
.sidenav-utils .dropdown-option .is-active label {
  color: #fff
}

.sidenav-utils .dropdown-option a:hover:enabled,
.sidenav-utils .dropdown-option a:focus:enabled,
.sidenav-utils .dropdown-option li:hover:enabled,
.sidenav-utils .dropdown-option li:focus:enabled {
  color: #000;
}

.footer-utils .dropdown-option a,
.footer-utils .dropdown-option label {
  color: #333
}

.footer-utils .dropdown-option .is-current a,
.footer-utils .dropdown-option .is-current label,
.footer-utils .dropdown-option .is-active a,
.footer-utils .dropdown-option .is-active label {
  color: #fff
}

.footer-utils .dropdown-option a:hover:enabled,
.footer-utils .dropdown-option a:focus:enabled,
.footer-utils .dropdown-option li:hover:enabled,
.footer-utils .dropdown-option li:focus:enabled {
  color: #000;
}


.footer {
  border-top: 1px solid #efefef;
  background-color: #fafafa;
  font-weight: 100;
  font-size: 1.4rem;
  text-align: center
}

.footer-common-item {
  display: inline-block;
  vertical-align: top;
  margin-left: 9px;
  margin-right: 9px;
  color: #000;
  -webkit-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -moz-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -ms-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -o-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1)
}

.footer-common-item:hover:enabled,
.footer-common-item:focus:enabled {
  color: #46166b
}

.footer-common-item.wa-mark {
  max-width: 50px
}

.footer-common .share-icon {
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #e5e5e5;
  background-color: #fff;
  font-size: 1.6rem;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box
}

.footer-common .share-icon:before {
  line-height: 36px
}

.footer-utils {
  position: relative;
  display: inline-block;
  margin-top: 25px
}

.footer-utils a {
  display: block
}

.footer-utils a:hover,
.footer-utils a:focus {
  text-decoration: underline
}

.footer-utils .dropdown {
  display: inline-block;
  vertical-align: top;
  background-color: transparent
}

.footer-utils .dropdown-selector {
  min-width: 220px;
  padding-left: 95px;
  border: 0 none;
  line-height: 1.5
}

.footer-utils .dropdown-selector:before {
  content: 'LANGUAGE';
  position: absolute;
  top: 50%;
  left: 5px;
  font-family: "Arita Heiti", "Montserrat", sans-serif;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%)
}

.footer-utils .dropdown-selector:after {
  right: 5px
}

.footer-utils .dropdown-option {
  top: auto;
  bottom: 0%;
  margin-bottom: 30px;
  border-top-color: #333
}

.footer-link {
  display: inline-block
}

.footer-link li {
  position: relative;
  display: inline-block;
  vertical-align: top;
  padding-right: 10px;
  margin-right: 6px
}

.footer-link li:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  height: 11px;
  margin: auto;
  background-color: #d9d9d9
}

.footer-link strong {
  color: #000
}

.footer-quick {
  padding: 20px 0;
  border-top: 1px solid #e5e5e5;
  zoom: 1
}

.footer-quick:before {
  content: '';
  display: block
}

.footer-quick:after {
  content: '';
  display: table;
  clear: both
}

.footer-quick-link {
  position: relative;
  float: left;
  width: 50%;
  padding: 0 25px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box
}

.footer-quick-link:before {
  content: "\EA05";
  font-style: normal;
  font-weight: normal;
  font-family: "icon";
  position: absolute;
  top: 50%;
  right: 15px;
  font-size: 1.2rem;
  color: #767676;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%)
}

.footer-quick-link+.footer-quick-link:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: 1px;
  height: 16px;
  background-color: #e5e5e5
}

.footer .copyright {
  font-size: 1.2rem;
  font-family: "Arita Heiti", "Montserrat", sans-serif;
  letter-spacing: 0
}

.footer p {
  margin: 0.5em 0
}

.footer p a {
  display: inline-block
}

.footer p a:hover,
.footer p a:focus {
  text-decoration: underline
}

@media (min-width: 60em) {
  .footer {
    padding-top: 30px;
    padding-bottom: 25px
  }

  .footer-quick {
    display: none
  }
}

@media (max-width: 59.99em) {

  .footer-utils,
  .footer .copyright,
  .footer p,
  .footer .wa-mark {
    display: none
  }

  .footer-common {
    padding: 12px 0
  }

  .sidenav-utils .wa-mark {
    margin-top: 15px;
  }
}


.l-footer {
  max-width: 1108px;
  margin: auto
}

.l-pad {
  padding: 30px 5.55556%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box
}

@media (min-width: 60em) {
  .l-pad {
    padding: 55px 10.21739% 60px
  }
}

.page-article .page-header {
  display: none
}

.page-article .publish {
  padding-left: 20px;
  padding-right: 20px;
  margin-top: 10px;
  text-transform: uppercase;
  text-align: center
}

.page-article .publish span {
  position: relative;
  padding-right: 17px;
  margin-right: 10px;
  font-size: 1.4rem
}

.page-article .publish span:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  height: 12px;
  margin: auto;
  background-color: #e5e5e5
}

.page-article .h1 {
  padding-left: 20px;
  padding-right: 20px;
  color: #000;
  font-size: 2.4rem;
  line-height: 1.3;
  text-align: center;
  word-break: keep-all;
  word-wrap: break-word
}

.page-article .h1 [lang="en"],
.page-article .h1[lang="en"] {
  font-size: 2.0rem
}

.page-article .h2 {
  margin-top: 1.5em;
  color: #000;
  font-size: 2.4rem;
  line-height: 1.3
}

.page-article .h2 [lang="en"],
.page-article .h2[lang="en"] {
  font-size: 2.0rem
}

.page-article .h2+.sub {
  color: #333
}

.page-article .h2 br {
  display: none
}

.page-article .h3 {
  margin-bottom: 0.5em;
  color: #333;
  font-weight: bold;
  font-size: 1.8rem;
  line-height: 1.6
}

.page-article .h3 [lang="en"],
.page-article .h3[lang="en"] {
  font-size: 1.6rem
}

.page-article .due-date {
  display: block;
  margin-top: 10px;
  text-align: center;
  font-size: 1.4rem
}

.page-article .row--extend .img {
  width: 100%
}

.page-article .figure {
  margin-top: 1em
}

.page-article .figure img {
  width: 100%
}

.page-article .figcaption {
  margin-top: 1.2em;
  color: #333;
  font-size: 1.8rem;
  line-height: 1.6;
  font-weight: bold
}

.page-article .figcaption [lang="en"],
.page-article .figcaption[lang="en"] {
  font-size: 1.6rem
}

.page-article .blockquote {
  position: relative;
  padding-top: 30px;
  margin: 40px 0 50px;
  color: #000;
  font-size: 1.8rem;
  line-height: 1.6;
  text-align: center
}

.page-article .blockquote [lang="en"],
.page-article .blockquote[lang="en"] {
  font-size: 1.6rem
}

.page-article .blockquote:before {
  content: "\EA07";
  font-style: normal;
  font-weight: normal;
  font-family: "icon";
  position: absolute;
  top: 0;
  left: 50%;
  color: #d9d9d9;
  font-size: 1.8rem;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%)
}

.page-article .blockquote br {
  display: none
}

.page-article .blockquote--box {
  margin: 60px -5.55556%;
  padding: 30px 5.55556%;
  background-color: #f6f6f6;
  color: #333
}

.page-article .blockquote--box:before {
  content: "\EA07";
  font-style: normal;
  font-weight: normal;
  font-family: "icon";
  display: block;
  margin-bottom: 10px;
  color: #d9d9d9
}

.page-article .blockquote--box:after {
  content: "\EA07";
  font-style: normal;
  font-weight: normal;
  font-family: "icon";
  display: block;
  color: #d9d9d9;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg)
}

.page-article .blockquote--box .blockquote-h {
  color: #000;
  font-size: 2.4rem;
  line-height: 1.3
}

.page-article .blockquote--box .blockquote-h [lang="en"],
.page-article .blockquote--box .blockquote-h[lang="en"] {
  font-size: 2.0rem
}

.page-article .group-title {
  display: block;
  margin-top: 2em;
  padding-bottom: 1em;
  border-bottom: 1px solid #e5e5e5;
  font-weight: 100;
  font-family: "Arita Heiti", "Montserrat", sans-serif;
  color: #000
}

.page-article .page-group {
  display: table;
  table-layout: fixed;
  width: 100%;
  text-align: center
}

.page-article .page-cell {
  display: table-cell;
  vertical-align: top;
  width: auto;
  padding: 0 5px
}

.page-article .page-cell:first-child {
  padding-left: 0
}

.page-article .page-cell:last-child {
  padding-right: 0
}

.page-article .page-cell .thumb {
  max-width: 168px;
  margin: 10px auto 15px
}

.page-article .page-cell .thumb+p {
  height: 50px;
  color: #333;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  word-wrap: normal;
  word-break: keep-all;
  word-wrap: break-word
}

.page-article .page-cell p span {
  display: block;
  height: 25px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  word-wrap: normal
}

.page-article .small-letter {
  display: block;
  margin-top: 1em;
  font-size: 1.4rem
}

.page-article ul,
.page-article ol {
  margin-top: 1em
}

.page-article ul .h3,
.page-article ol .h3 {
  margin-top: 1.4em
}

.page-article .order-list li:before {
  color: #000;
  font-weight: bold;
  font-size: 1.8rem
}

.page-article .qa-list li {
  position: relative;
  margin-top: 25px;
  padding-left: 35px
}

.page-article .qa-list li:before {
  content: 'Q';
  position: absolute;
  top: 3px;
  left: 0;
  width: 23px;
  height: 23px;
  color: #fff;
  background-color: #000;
  font-weight: normal;
  font-size: 1.6rem;
  line-height: 18px;
  text-align: center
}

.page-article .ul {
  color: #767676;
  font-size: 1.6rem
}

.page-article .ul li {
  margin-top: 2rem
}

.page-article .p {
  color: #767676;
  margin-top: 2rem
}

.page-article p {
  margin-top: 0.8em;
  margin-bottom: 0.8em;
  line-height: 1.6
}

.page-section .l-pad {
  background-color: #fff
}

.page-section strong {
  color: #000
}

.page-section em {
  background-color: transparent;
  color: #46166b;
  text-decoration: underline
}

.page-section .image {
  margin-bottom: 15px;
  text-align: center
}

.page-section .image img {
  width: 100%
}

.page-section .content h3 {
  margin-top: 1.5em;
  color: #000;
  font-size: 2.4rem;
  line-height: 1.3
}

.page-section .content h3 [lang="en"],
.page-section .content h3[lang="en"] {
  font-size: 2.0rem
}

.page-section .content h3.h {
  margin-top: 5rem;
  padding-bottom: 10px;
  color: #000;
  font-size: 1.8rem
}

.page-section .content br+h3 {
  margin-top: 0
}

.page-section .content p+h3 {
  margin-top: 0
}

.page-section .content b {
  color: #000
}

.page-section .content .detail-list {
  margin-top: 0;
  border-top: 1px solid #e5e5e5
}

.page-section .content .detail-list li {
  position: relative;
  min-height: 168px;
  padding-top: 20px;
  padding-left: 188px;
  padding-bottom: 55px;
  margin-top: 0;
  border-bottom: 1px solid #e5e5e5
}

.page-section .content .detail-list .temp {
  position: absolute;
  top: 20px;
  left: 0;
  width: 148px;
  height: 204px
}

.page-section .content .detail-list .pro-tit {
  font-size: 1.4rem
}

.page-section .content .detail-list h4 {
  font-size: 1.6rem;
  line-height: 1.5;
  color: #333
}

.page-section .content .detail-list p {
  margin: 5px 0
}

.page-section .content .detail-list .btn {
  position: absolute;
  bottom: 20px;
  left: 188px;
  height: 3.6rem;
  padding: 0 1.25rem;
  border: 1px solid #e5e5e5;
  line-height: 3.4rem
}

.page-section .content .detail-list .btn:after {
  display: none
}

.page-section .content .detail-list .btn:hover,
.page-section .content .detail-list .btn:focus {
  border-color: #fff;
  background-color: #46166b;
  color: #fff
}

@media (min-width: 60em) {
  .page-section .content h3 {
    margin-top: 55px
  }
}

@media (max-width: 24.99em) {
  .page-section .content .detail-list li {
    padding-left: 0
  }

  .page-section .content .detail-list .temp {
    position: relative;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%)
  }

  .page-section .content .detail-list .btn {
    left: 0
  }
}

.page-div {
  position: relative;
  margin-left: 5.55556%;
  margin-right: 5.55556%
}

@media (min-width: 60em) {
  .page-div {
    padding-left: calc(9400% / 1280);
    padding-right: calc(9400% / 1280);
    margin-left: 6.71875%;
    margin-right: 6.71875%
  }
}

.page-div .pagination {
  margin-left: -5.55556%;
  margin-right: -5.55556%
}

.page-header {
  position: relative;
  color: #000
}

.page-header .h {
  position: relative;
  z-index: 10;
  padding: 15px 0;
  text-align: center;
  font-weight: bold;
  font-size: 2.4rem;
  line-height: 1.3
}

.page-header .h [lang="en"],
.page-header .h[lang="en"] {
  font-size: 2.0rem
}

.page-cover {
  position: relative;
  overflow: hidden;
  margin-bottom: -45px;
  height: 0;
  padding-bottom: 87.5%
}

.page-cover img {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
  width: auto;
  height: 100%;
  margin-left: -50%
}

.page-topic {
  padding: 20px 40px;
  margin: 0 -5.55556%;
  background-color: #f6f6f6;
  color: #000;
  text-align: center;
  font-size: 2.4rem;
  line-height: 1.3
}

.page-topic [lang="en"],
.page-topic[lang="en"] {
  font-size: 2.0rem
}

.page-topic+.page-share {
  margin: 23px 0
}

.page-share {
  overflow: hidden;
  position: relative;
  margin: 50px 0;
  padding: 1px 0;
  text-align: center
}

.page-share:before,
.page-share:after {
  content: '';
  position: absolute;
  top: 50%;
  width: 50%;
  height: 1px;
  background-color: #999
}

.page-share:before {
  left: 50%;
  margin-left: 115px
}

.page-share:after {
  right: 50%;
  margin-right: 115px
}

.page-share .share-icon {
  overflow: hidden;
  display: inline-block;
  position: relative;
  z-index: 10;
  padding: 0;
  margin: 0 15px;
  color: #000;
  background-color: #fff;
  -webkit-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -moz-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -ms-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -o-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1)
}

.page-share .share-icon:before {
  font-size: 2.2rem
}

.page-share .share-icon:hover,
.page-share .share-icon:focus {
  color: #46166b
}

.page-media {
  position: relative;
  scrollbar-face-color: #999;
  scrollbar-arrow-color: #999;
  scrollbar-track-color: #d9d9d9
}

.page-media ::-webkit-scrollbar {
  width: 10px;
  height: 10px
}

.page-media ::-webkit-scrollbar-thumb {
  background: #999
}

.page-media ::-webkit-scrollbar-track {
  background: #d9d9d9
}

.page-media .yt-player {
  position: relative;
  display: block
}

.page-media .yt-player:after {
  content: "\EA15";
  font-style: normal;
  font-weight: normal;
  font-family: "icon";
  position: absolute;
  left: 15px;
  bottom: 7px;
  color: #fff;
  font-size: 2rem
}

.page-media .yt-player:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  width: 0%;
  height: 100%;
  margin: auto;
  background-color: #46166b;
  mix-blend-mode: overlay;
  opacity: 0.2;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -moz-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -ms-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -o-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1)
}

.page-media .yt-player:hover:before,
.page-media .yt-player:focus:before {
  width: 100%
}

.page-latest {
  margin-top: 30px;
  border-top: 3px solid #000
}

.page-latest .latest-item {
  display: block;
  border-bottom: 1px solid #d9d9d9
}

.page-latest a.latest-item:hover .dir,
.page-latest a.latest-item:focus .dir {
  color: #46166b
}

.page-latest a.latest-item:hover .dir:before,
.page-latest a.latest-item:focus .dir:before {
  width: 100%;
  background-color: #46166b
}

.page-latest a.latest-item:hover .p,
.page-latest a.latest-item:focus .p {
  color: #46166b
}

.page-latest .dir {
  display: inline-block;
  position: relative;
  color: #000;
  font-weight: 600;
  font-family: "Arita Heiti", "Montserrat", sans-serif;
  text-transform: uppercase;
  -webkit-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -moz-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -ms-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -o-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1)
}

.page-latest .dir:before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 1px;
  background-color: transparent;
  -webkit-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -moz-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -ms-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -o-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1)
}

.page-latest .p {
  margin: 0;
  color: #333;
  font-weight: bold;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  word-wrap: normal;
  -webkit-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -moz-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -ms-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -o-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1)
}

@media (min-width: 45em) {
  .page-cover {
    height: auto;
    padding-bottom: 0
  }

  .page-cover img {
    position: static;
    width: 100%;
    height: auto;
    margin-left: 0
  }

  .page-latest {
    border-bottom: 1px solid #d9d9d9;
    text-align: center
  }

  .page-latest .latest-item {
    padding: 53px 0 58px;
    border-bottom: 0 none
  }
}

@media (min-width: 60em) {
  .page-article .page-header {
    display: block
  }

  .page-article .publish {
    margin-top: 1em
  }

  .page-article .h1 {
    font-size: 3.4rem;
    line-height: 1.3
  }

  .page-article .h1 [lang="en"],
  .page-article .h1[lang="en"] {
    font-size: 2.6rem
  }

  .page-article .h1 br {
    display: none
  }

  .page-article .h2 {
    margin-top: 55px
  }

  .page-article .h2 br {
    display: block
  }

  .page-article .row--extend {
    margin: 0 -30px
  }

  .page-article .row--extend .col-6 {
    padding: 0 30px
  }

  .page-article .due-date {
    font-size: 1em
  }

  .page-article .figure {
    margin-top: 40px
  }

  .page-article .figure+ul,
  .page-article .figure ol {
    margin-top: 2.5em
  }

  .page-article .blockquote {
    padding-top: 35px;
    font-size: 2.4rem;
    line-height: 1.3
  }

  .page-article .blockquote [lang="en"],
  .page-article .blockquote[lang="en"] {
    font-size: 2.0rem
  }

  .page-article .blockquote br {
    display: block
  }

  .page-article .blockquote--box {
    margin-left: 0;
    margin-right: 0;
    padding: 30px 9.78261%
  }

  .page-article p:first-child {
    margin-top: 0
  }

  .page-header .h {
    padding: 35px 0;
    font-size: 4rem;
    line-height: 1.3
  }

  .page-header .h [lang="en"],
  .page-header .h[lang="en"] {
    font-size: 3.2rem
  }

  .page-topic {
    margin-left: 0;
    margin-right: 0
  }

  .page-topic+.page-share {
    margin: 50px 10.21739%
  }

  .page-selectbox {
    position: absolute;
    top: 50%;
    right: 0;
    width: 190px;
    z-index: 10;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%)
  }

  .page-selectbox .dropdown-selector {
    min-width: 100%
  }

  .page-cover {
    margin-bottom: -100px
  }

  .page-share {
    margin: 50px 0 70px
  }

  .page-share:before {
    margin-left: 165px
  }

  .page-share:after {
    margin-right: 165px
  }

  .page-share .share-icon {
    margin: 0 28px
  }

  .page-media .yt-player:after {
    left: 30px;
    bottom: 17px;
    font-size: 50px
  }

  .page-latest .p {
    margin-top: 0.5em
  }
}

@media (max-width: 59.99em) {
  .page-selectbox .is-active .dropdown-selector {
    border-left-color: #333;
    border-right-color: #333
  }

  .page-selectbox .dropdown-selector {
    border-left-color: transparent;
    border-right-color: transparent
  }

  .page-section .l-pad {
    padding-left: 0;
    padding-right: 0
  }

  .page-latest .latest-item {
    padding: 22px 10px 22px 55px
  }

  .page-latest .dir {
    position: absolute;
    top: 22px;
    left: 10px
  }
}

.catalog-list {
  overflow: hidden
}

.catalog-list li {
  position: relative;
  z-index: 1;
  display: table;
  table-layout: fixed;
  width: 100%;
  padding: 20px 20px;
  border-bottom: 1px solid #e5e5e5;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box
}

.catalog-list li:hover,
.catalog-list li:focus {
  outline: 0 none
}

.catalog-list li:hover dt,
.catalog-list li:hover dt+dd,
.catalog-list li:focus dt,
.catalog-list li:focus dt+dd {
  text-decoration: underline
}

.catalog-list .thumb {
  overflow: hidden;
  position: relative;
  display: table-cell;
  vertical-align: middle;
  width: 140px;
  height: 193px
}

.catalog-list .thumb-layer {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto
}

.catalog-list .thumb img {
  width: 100%
}

.catalog-list .info {
  position: relative;
  z-index: 10;
  display: table-cell;
  vertical-align: middle;
  padding-top: 10px;
  padding-left: 25px
}

.catalog-list .info dt {
  color: #333;
  font-weight: bold
}

.catalog-list .info dt+dd {
  display: none
}

.catalog-list .info dd {
  margin-top: 1em
}

.catalog-list .colorchip {
  zoom: 1;
  margin-top: 0.8em
}

.catalog-list .colorchip:before {
  content: '';
  display: block
}

.catalog-list .colorchip:after {
  content: '';
  display: table;
  clear: both
}

.catalog-list .colorchip-block {
  display: table;
  float: left;
  table-layout: fixed;
  position: relative;
  width: 18px;
  height: 18px;
  margin-bottom: 2px;
  margin-right: 2px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box
}

.catalog-list .colorchip-block.is-quadruple {
  display: inline-block
}

.catalog-list .colorchip-block.is-quadruple span {
  display: block;
  float: left;
  width: 50%;
  height: 50%
}

.catalog-list .colorchip-block span {
  display: table-cell;
  height: 100%;
  width: 100%
}

.catalog-list .colorchip-name {
  display: block;
  margin-top: 5px;
  font-size: .875em;
  color: #767676
}

@media (min-width: 45em) {
  .catalog-list {
    position: relative;
    font-size: 0
  }

  .catalog-list:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 10;
    width: 100%;
    height: 1px;
    background-color: #fff
  }

  .catalog-list li {
    display: inline-block;
    table-layout: auto;
    vertical-align: bottom;
    width: 50%;
    font-size: 1.6rem
  }

  .catalog-list li:nth-child(odd) {
    padding-right: 10px
  }

  .catalog-list li:nth-child(even) {
    padding-left: 10px
  }

  .catalog-list+.pagination {
    padding-top: 30px;
    border-top: 1px solid #e5e5e5
  }
}

@media (min-width: 60em) {
  .catalog-list {
    border-top: 1px solid #e5e5e5
  }

  .catalog-list li {
    padding: 50px 0;
    padding-left: 1px;
    font-size: 1.6rem
  }

  .catalog-list .thumb {
    width: 188px;
    height: 260px
  }

  .catalog-list .info {
    padding-left: 37px;
    padding-right: 12px
  }

  .catalog-list .info dt {
    font-size: 1.8rem
  }

  .catalog-list .info dt+dd {
    display: block;
    max-height: 48px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    word-wrap: normal
  }

  .catalog-list .info dd {
    margin-top: 0.5em
  }

  .catalog-list .info dd:last-child {
    margin-top: 1.7em
  }

  .catalog-list .colorchip {
    margin-right: -24px
  }

  .catalog-list .colorchip-block {
    width: 24px;
    height: 24px;
    margin-bottom: 5px;
    margin-right: 5px
  }

  .catalog-list .colorchip-block.is-active {
    padding: 4px
  }

  .catalog-list .colorchip-block.is-active:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 2px;
    border: 2px solid #fff;
    outline: 2px solid #000
  }
}

@media (min-width: 80em) {
  .catalog-list .info {
    padding-right: 37px
  }
}

@media (max-width: 59.99em) {
  .catalog-list .colorchip {
    position: relative
  }

  .catalog-list .colorchip.is-disable .colorchip-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100
  }
}

.makeup-section {
  overflow: hidden;
}

.makeup-section .h {
  position: absolute !important;
  overflow: hidden;
  height: 1px;
  width: 1px;
  clip: rect(1px, 1px, 1px, 1px);
}

/* .makeup-section .h {display: none; margin-top: 55px; padding-bottom: 15px; color: #222; font-weight: bold; font-size: 2.4rem; line-height: 1.3;} */
.makeup-section .makeup-visual {
  position: relative;
  padding-bottom: 44.4%;
  overflow: hidden;
}

.makeup-section .makeup-visual img {
  position: absolute;
  height: 100%;
  max-width: none;
}

.makeup-section .makeup-visual img.img-pc {
  display: none
}

.makeup-section .makeup-visual img.img-mobile {
  display: block
}

.makeup-section .makeup-header {
  padding: 75px 0 50px;
  position: relative;
}

.makeup-section .makeup-header .h1 {
  padding-top: 0;
  font-size: 2.2rem;
  color: #000;
  text-align: center;
}

.makeup-section .makeup-header .dropdown {
  margin-top: 23px;
}

.makeup-section .makeup-header .dropdown-selector {
  min-width: 176px;
}

.makeup-section .makeup-header .dropdown-selector:after {
  right: 19px;
}

.makeup-section .makeup-header .dropdown-option a:hover:enabled,
.makeup-section .makeup-header .dropdown-option a:focus:enabled,
.makeup-section .makeup-header .dropdown-option li:hover:enabled,
.makeup-section .makeup-header .dropdown-option li:focus:enabled {
  color: #000;
}

.makeup-section .makeup-header .dropdown-option li.is-current:hover,
.makeup-section .makeup-header .dropdown-option li.is-active:hover {
  color: #fff;
}

.makeup-section .makeup-header .dropdown-option li.is-current a:focus,
.makeup-section .makeup-header .dropdown-option li.is-current a:hover,
.makeup-section .makeup-header .dropdown-option li.is-active a:hover:enabled,
.makeup-section .makeup-header .dropdown-option li.is-active a:focus:enabled {
  color: #fff
}

.makeup-section .makeup-header .dropdown-text {
  text-overflow: ellipsis;
  width: 124px;
  white-space: nowrap;
  overflow: hidden;
}

.makeup-section .dropdown-option a {
  padding-top: 12.5px;
  padding-bottom: 12.5px;
  line-height: inherit;
  white-space: inherit;
  word-wrap: break-word;
  word-break: keep-all;
}

.makeup-section .makeup-list {
  font-size: 10px;
  margin: 0 -0.5em;
  padding: 0 20px;
  box-sizing: border-box;
}

.makeup-section .makeup-list:last-child {
  padding-bottom: 20px;
}

.makeup-section .makeup-list:after {
  display: block;
  content: '';
  clear: both;
}

.makeup-section .makeup-list+.pagination {
  margin: 50px 0 20px 0;
}

.makeup-section .makeup-list+.pagination .page,
.makeup-section .makeup-list+.pagination .prev,
.makeup-section .makeup-list+.pagination .next {
  min-width: 30px;
  height: 30px;
  line-height: 30px;
}

.makeup-list>li {
  width: 50%;
  padding: 0 0.5em;
  margin-top: 4em;
  float: left;
  box-sizing: border-box;
  position: relative;
  height: 410px;
}

.makeup-list>li:nth-child(-n+2) {
  margin-top: 0;
}

.makeup-list>li:nth-child(2n+1) {
  clear: both;
}

.makeup-list>li>a {
  position: relative;
  display: block;
}

.makeup-list>li>a:focus {
  outline: none;
}

.makeup-list>li>a:focus:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.098);
}

.makeup-list>li a:hover .info dt:first-child,
.makeup-list>li a:hover .info dt+dd,
.makeup-list>li a:focus .info dt:first-child,
.makeup-list>li a:focus .info dt+dd {
  text-decoration: underline;
}

.makeup-list .thumb {
  overflow: hidden;
  position: relative;
  display: inline-block;
  width: 100%;
  padding-bottom: 138.7%;
  box-sizing: border-box;
}

.makeup-list .thumb img {
  width: 100%
}

.makeup-list .thumb .thumb-layer {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center center;
  position: absolute;
  top: 0;
  left: 0
}

.makeup-list .thumb.asis .thumb-layer {
  background-size: 90% auto;
}

/* aem 확인용 */
.makeup-list .colorchip {
  zoom: 1;
  height: 12px;
}

.makeup-list .colorchip:before {
  content: '';
  display: block
}

.makeup-list .colorchip:after {
  content: '';
  display: table;
  clear: both
}

.makeup-list .colorchip-block {
  cursor: default;
  pointer-events: none;
  display: table;
  float: left;
  table-layout: fixed;
  position: relative;
  width: 12px;
  height: 12px;
  /*margin-bottom: 3px;*/
  margin-right: 3px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box
}

.makeup-list .colorchip-block:nth-child(n+7) {
  display: none;
}

.makeup-list .colorchip-block.is-quadruple {
  display: inline-block
}

.makeup-list .colorchip-block.is-quadruple span {
  display: block;
  float: left;
  width: 50%;
  height: 50%
}

.makeup-list .colorchip-block span {
  display: table-cell;
  height: 100%;
  width: 100%
}

/* .makeup-list .colorchip-name {font-size:1.4em; display: block;margin: 8px auto 16px;color: #767676} */
.makeup-list .colorchip-name {
  color: #767676;
  display: block;
  font-size: 1.3em;
  margin-top: 5px;
}

.makeup-list .colorchip-number {
  font-size: 1.2em;
  display: inline-block;
  height: 12px;
  margin-top: -2px;
}

.makeup-list .info {
  padding: 0 10px 0 10px;
}

.makeup-list a .info {
  padding-bottom: 12px;
}

/* .makeup-list .info dt {font-size:1.6em;  font-weight:600; color:#000; margin-top: 11px;} */
.makeup-list .info dt {
  color: #000;
  display: block;
  display: -webkit-box;
  font-size: 1.6em;
  font-weight: 600;
  max-height: 2.4em;
  line-height: 1.2em;
  margin-top: 11px;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-wrap: break-word;
  overflow: hidden;
}

.makeup-list .info dd:last-child {
  margin-top: 22px;
}

.makeup-list .info dt+dd {
  display: none;
  color: #333;
  margin-top: 19px;
}

.makeup-list .info .btn:hover {
  background-color: #000;
  color: #fff;
}

.makeup-list .info .btn:hover span,
.makeup-list>li .info .btn:focus span {
  color: #fff
}

.makeup-list .info .btn:hover:after,
.makeup-list>li .info .btn:focus:after {
  border-color: #000;
  background-color: #000
}

.makeup-list .btn-wrap {
  position: absolute;
  bottom: 0;
}

.makeup-list .btn-wrap .btn {
  font-weight: 600;
}

/* tablet */
@media (min-width: 48em) {

  /* .makeup-section .h{display:block;} */
  .makeup-section .l-wrap {
    max-width: 1280px;
    padding: 0 6.7%;
    box-sizing: border-box;
    min-height: 550px
  }

  .makeup-section .makeup-visual {
    padding-bottom: 31.8%;
    border-bottom: 1px solid #e5e5e5;
  }

  .makeup-section .makeup-visual img {
    left: 50%;
    transform: translateX(-50%);
  }

  .makeup-section .makeup-visual img.img-pc {
    display: block
  }

  .makeup-section .makeup-visual img.img-mobile {
    display: none
  }

  .makeup-section .makeup-header {
    padding: 85px 0 63px 0;
  }

  .makeup-section .makeup-header .h1 {
    font-size: 3rem;
    line-height: 1.3;
    line-height: 1;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
  }

  .makeup-section .makeup-header .dropdown {
    position: absolute;
    top: 8.7rem;
    right: 0;
    width: auto;
    margin-top: 0;
  }

  .makeup-section .makeup-list {
    margin: 0 -1em;
    padding: 0;
  }

  .makeup-section .makeup-list:last-child {
    padding-bottom: 80px;
  }

  .makeup-section .makeup-list+.pagination {
    margin: 14rem 0 8rem 0;
  }

  .makeup-section .makeup-list+.pagination .page,
  .makeup-section .makeup-list+.pagination .prev,
  .makeup-section .makeup-list+.pagination .next {
    min-width: 35px;
    height: 35px;
    line-height: 35px;
  }

  .makeup-list>li {
    width: 33.33333%;
    padding: 0 1em;
    margin-top: 13em;
    height: 617px;
  }

  .makeup-list>li:nth-child(-n+3) {
    margin-top: 0;
  }

  .makeup-list>li:nth-child(2n+1) {
    clear: none;
  }

  .makeup-list>li:nth-child(3n+1) {
    clear: both;
  }

  .makeup-list>li>a:focus {
    outline: rgba(0, 0, 0, 0.098) solid 1px;
    outline-offset: -10px;
  }

  .makeup-list>li>a:focus:after {
    content: none;
  }

  /* [2019-08-05] css 백업
  .makeup-list .colorchip {zoom: 1; margin-top:0;}
  .makeup-list .colorchip-block:nth-child(n+7) {display: table;}
  .makeup-list .colorchip-name{margin: 8px auto 16px;}
  .makeup-list .colorchip-number {display:none} 
  .makeup-list .info dt{font-size:1.8em; margin-top: 21px;} 
  .makeup-list .info dt + dd{display: block; font-size:1.6em; max-height: 48px; overflow: hidden; display: -webkit-box;   -webkit-line-clamp: 2;  -webkit-box-orient: vertical;   text-overflow: ellipsis;    word-wrap: normal}
  .makeup-list .info .btn{margin-top: 10px;}
  */
  .makeup-list .thumb {
    padding-bottom: 138.2%;
  }

  .makeup-list .colorchip {
    height: 16px;
  }

  .makeup-list .colorchip-block {
    width: 16px;
    height: 16px;
  }

  .makeup-list .info {
    padding: 0 30px 0 30px;
  }

  .makeup-list .info dt {
    font-size: 1.8em;
  }

  .makeup-list .info dt+dd {
    display: block;
    display: -webkit-box;
    font-size: 1.4em;
    max-height: 2.8em;
    line-height: 1.4em;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    overflow: hidden;
  }
}

/* pc */
@media (min-width: 80em) {
  .makeup-section .l-wrap {
    width: 1108px;
    padding-left: 0;
    padding-right: 0;
  }

  .makeup-section .makeup-visual {
    height: 400px;
    padding-bottom: 0;
  }

  .makeup-list>li {
    height: 738px;
  }

  .makeup-list .colorchip {
    height: auto;
  }

  .makeup-list .colorchip-block:nth-child(n+7) {
    display: table;
  }

  .makeup-list .colorchip-block:nth-child(n+16) {
    margin-top: 3px;
  }

  .makeup-list .colorchip-number {
    display: none
  }
}

.is-palette-active {
  position: fixed;
  width: 100%
}

.is-palette-active:after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 49;
  background-color: rgba(0, 0, 0, 0.5)
}

.detail-header {
  padding-bottom: 60px;
  padding-top: 20px;
  border-bottom: 1px solid #e5e5e5
}

.detail-header-cont {
  position: relative;
  z-index: 1
}

.detail-header-row {
  position: relative;
  margin-left: 5.55556%;
  margin-right: 5.55556%
}

@media (min-width: 60em) {
  .detail-header-row {
    margin-left: 6.71875%;
    margin-right: 6.71875%
  }
}

@media (min-width: 80em) {
  .detail-header-row {
    margin-left: 6.71875%;
    margin-right: 6.71875%
  }
}

.detail-header-cell {
  position: relative;
  margin-left: 5.55556%;
  margin-right: 5.55556%
}

@media (min-width: 60em) {
  .detail-header-cell {
    margin-left: 6.71875%;
    margin-right: 6.71875%
  }
}

@media (min-width: 80em) {
  .detail-header-cell {
    margin-left: 6.71875%;
    margin-right: 6.71875%
  }
}

.detail-header ::-webkit-scrollbar {
  width: 17px
}

.detail-header ::-webkit-scrollbar-track {
  background: #f3f3f3
}

.detail-header ::-webkit-scrollbar-thumb {
  background: #ccc
}

.detail-slider {
  min-height: 283px
}

.detail-info .colorchip-color {
  float: left;
  display: table;
  table-layout: fixed;
  height: 25px;
  width: 25px;
  margin-top: 10px;
  margin-right: 8px
}

.detail-info .colorchip-color.is-quadruple {
  display: inline-block
}

.detail-info .colorchip-color.is-quadruple .colorchip-cell {
  display: block;
  float: left;
  width: 50%;
  height: 50%
}

.detail-info .colorchip-cell {
  display: inline-block;
  display: table-cell;
  height: 100%;
  width: 100%
}

.detail-colorchip {
  height: 100vh;
  background-color: #f6f6f6;
  scrollbar-face-color: #ccc;
  scrollbar-shadow-color: #ccc;
  scrollbar-arrow-color: #fff
}

.detail-colorchip.is-active .colorchip-palette {
  margin-right: -17px
}

.Safari.Mobile .detail-colorchip {
  height: calc(100vh - 50px)
}

.Safari.Mobile .detail-colorchip .colorchip-func {
  margin-bottom: 30px
}

.detail-colorchip li {
  position: relative;
  border-bottom: 1px solid #fff
}

.detail-colorchip li.is-active .colorchip-label {
  height: 170px
}

.detail-colorchip li.is-active .colorchip-label:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  border: 2px solid #000
}

.detail-colorchip .colorchip-color {
  display: table;
  table-layout: fixed;
  position: relative;
  z-index: 10;
  width: 100%;
  height: 46px;
  padding: 0;
  color: #fff
}

.detail-colorchip .colorchip-cell {
  display: table-cell;
  vertical-align: top;
  width: auto;
  height: 46px
}

.detail-colorchip .colorchip-view {
  height: 124px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat
}

.detail-colorchip .colorchip-radio:focus+.colorchip-label {
  outline: -webkit-focus-ring-color auto 5px
}

.detail-colorchip .colorchip-label {
  overflow: hidden;
  position: relative;
  display: block;
  height: 46px;
  -webkit-transition: all .4s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  -moz-transition: all .4s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  -ms-transition: all .4s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  -o-transition: all .4s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transition: all .4s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0)
}

.detail-colorchip .colorchip-option li.is-active .colorchip-color {
  color: #fff
}

.detail-thumb {
  position: relative;
  text-align: center;
  margin-bottom: 50px
}

.detail-thumb .slide-item {
  position: relative;
  outline: 0 none;
  cursor: -webkit-grab;
  height: 0;
  padding-bottom: 290px
}

.detail-thumb .slide-item img {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: auto;
  height: 100%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%)
}

.detail-h {
  font-size: 2.4rem;
  line-height: 1.3;
  color: #000;
  font-weight: bold;
  letter-spacing: 0;
  word-break: keep-all;
  word-wrap: break-word
}

.detail-h [lang="en"],
.detail-h[lang="en"] {
  font-size: 2.0rem
}

.detail-h .en {
  display: block;
  margin-top: 5px;
  color: #333;
  font-weight: 100;
  font-size: 1.6rem;
  font-family: "Arita Heiti", "Montserrat", sans-serif;
  text-transform: uppercase
}

.detail-p {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 1em;
  line-height: 1.6;
  word-break: keep-all;
  word-wrap: break-word
}

.detail-label {
  font-size: 1.4rem
}

.detail-label .label {
  display: inline-block;
  vertical-align: top;
  margin-top: 5px;
  margin-right: 3px;
  letter-spacing: 0
}

.detail-other {
  position: relative;
  padding-top: 15px;
  margin-top: 20px;
  border-top: 1px solid #e5e5e5;
  zoom: 1
}

.detail-other:before {
  content: '';
  display: block
}

.detail-other:after {
  content: '';
  display: table;
  clear: both
}

.detail-other .share-page {
  float: right
}

.detail-other .share-page .share-link {
  display: block;
  padding: 0 5px;
  margin-right: -5px;
  -webkit-transform-origin: center center;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -o-transform-origin: center center;
  transform-origin: center center;
  -webkit-transition: all .4s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  -moz-transition: all .4s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  -ms-transition: all .4s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  -o-transition: all .4s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transition: all .4s cubic-bezier(0.445, 0.05, 0.55, 0.95)
}

.detail-other .share-page .share-link:after {
  content: "\EA1A";
  font-style: normal;
  font-weight: normal;
  font-family: "icon"
}

.detail-other .share-page .share-link:hover,
.detail-other .share-page .share-link:focus {
  color: #46166b
}

.detail-other .share-page .share-layer {
  position: absolute;
  top: 10px;
  right: 30px;
  border: 1px solid #d9d9d9;
  background-color: #f6f6f6;
  font-size: 0
}

.detail-other .share-page .share-layer:before {
  content: '';
  position: absolute;
  top: 50%;
  right: -6px;
  z-index: 1;
  width: 9px;
  height: 9px;
  border: 1px solid #d9d9d9;
  background-color: #f6f6f6;
  -webkit-transform: translateY(-50%) rotate(45deg);
  -moz-transform: translateY(-50%) rotate(45deg);
  -ms-transform: translateY(-50%) rotate(45deg);
  -o-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg)
}

.detail-other .share-page .share-layer .share-icon {
  position: relative;
  z-index: 5;
  display: inline-block;
  vertical-align: top;
  padding: 5px 8px;
  background-color: #f6f6f6;
  -webkit-transition: all .4s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  -moz-transition: all .4s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  -ms-transition: all .4s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  -o-transition: all .4s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transition: all .4s cubic-bezier(0.445, 0.05, 0.55, 0.95)
}

.detail-other .share-page .share-layer .share-icon:before {
  font-size: 1.6rem
}

.detail-other .share-page .share-layer .share-icon:hover,
.detail-other .share-page .share-layer .share-icon:focus {
  color: #46166b
}

.detail-other .share-page .share-layer .share-icon+.share-icon {
  border-left: 1px solid #d9d9d9
}

@-webkit-keyframes shareMe {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg)
  }

  15% {
    -webkit-transform: rotate(765deg);
    -moz-transform: rotate(765deg);
    -ms-transform: rotate(765deg);
    -o-transform: rotate(765deg);
    transform: rotate(765deg)
  }

  100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg)
  }
}

@-moz-keyframes shareMe {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg)
  }

  15% {
    -webkit-transform: rotate(765deg);
    -moz-transform: rotate(765deg);
    -ms-transform: rotate(765deg);
    -o-transform: rotate(765deg);
    transform: rotate(765deg)
  }

  100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg)
  }
}

@-ms-keyframes shareMe {
  .detail-other .share-page .share-layer 0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg)
  }

  .detail-other .share-page .share-layer 15% {
    -webkit-transform: rotate(765deg);
    -moz-transform: rotate(765deg);
    -ms-transform: rotate(765deg);
    -o-transform: rotate(765deg);
    transform: rotate(765deg)
  }

  .detail-other .share-page .share-layer 100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg)
  }
}

@-o-keyframes shareMe {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg)
  }

  15% {
    -webkit-transform: rotate(765deg);
    -moz-transform: rotate(765deg);
    -ms-transform: rotate(765deg);
    -o-transform: rotate(765deg);
    transform: rotate(765deg)
  }

  100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg)
  }
}

@keyframes shareMe {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg)
  }

  15% {
    -webkit-transform: rotate(765deg);
    -moz-transform: rotate(765deg);
    -ms-transform: rotate(765deg);
    -o-transform: rotate(765deg);
    transform: rotate(765deg)
  }

  100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg)
  }
}

.detail-select {
  margin-top: 20px
}

.detail-select .dropdown-selector {
  min-width: auto;
  line-height: 4.4rem
}

.detail-select .dropdown-option {
  max-height: 235px
}

.detail-texture {
  margin-top: 20px
}

.detail-texture-btn {
  position: relative;
  display: block;
  width: 100%;
  border: 1px solid #d9d9d9;
  height: 46px;
  padding: 0 1em;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 4.4rem;
  text-align: left
}

.detail-texture-btn:before,
.detail-texture-btn:after {
  content: '';
  position: absolute;
  top: 50%;
  background-color: #000;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%)
}

.detail-texture-btn:before {
  right: 20px;
  width: 1px;
  height: 15px
}

.detail-texture-btn:after {
  right: 13px;
  width: 15px;
  height: 1px
}

.detail-texture-thumb {
  display: block;
  height: 46px;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center center
}

.detail-btn {
  margin-top: 1em
}

@media (min-width: 35em) {
  .detail-slider {
    min-height: 492px
  }

  .detail-slider .slick-slide>div {
    height: 0;
    padding-bottom: 492px
  }

  .detail-thumb .slide-item {
    height: 0;
    padding-bottom: 492px
  }
}

@media (min-width: 60em) {
  .detail-header {
    padding-bottom: 50px;
    padding-top: 40px
  }

  .detail-header-row {
    padding-left: 22.03125%
  }

  .detail-header-row .detail-thumb {
    left: -11.38015%
  }

  .detail-header-row .detail-thumb .slick-dots {
    left: -34.14044%
  }

  .detail-header-row .detail-desc {
    padding-bottom: 0
  }

  .detail-header-cell {
    padding-left: 7.34375%;
    padding-right: 14.6875%
  }

  .detail-header-cont {
    zoom: 1
  }

  .detail-header-cont:before {
    content: '';
    display: block
  }

  .detail-header-cont:after {
    content: '';
    display: table;
    clear: both
  }

  .detail-header .l-layout {
    position: relative
  }

  .detail-colorchip {
    overflow: hidden;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 1px;
    z-index: 10;
    width: 19.84375%;
    height: auto;
    max-height: 492px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box
  }

  .detail-colorchip li.is-active:hover .colorchip-color,
  .detail-colorchip li.is-active:focus .colorchip-color {
    -webkit-transition-duration: 0s;
    -moz-transition-duration: 0s;
    -ms-transition-duration: 0s;
    -o-transition-duration: 0s;
    transition-duration: 0s;
    opacity: 1
  }

  .detail-colorchip li.is-active:hover .colorchip-view,
  .detail-colorchip li.is-active:focus .colorchip-view {
    -webkit-transition-duration: 0s;
    -moz-transition-duration: 0s;
    -ms-transition-duration: 0s;
    -o-transition-duration: 0s;
    transition-duration: 0s;
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -o-transform: translateY(0%);
    transform: translateY(0%)
  }

  .detail-colorchip li:hover .colorchip-color,
  .detail-colorchip li:focus .colorchip-color {
    opacity: 0
  }

  .detail-colorchip li:hover .colorchip-view,
  .detail-colorchip li:focus .colorchip-view {
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%)
  }

  .detail-colorchip.is-active {
    padding-top: 20px;
    padding-bottom: 20px
  }

  .detail-colorchip.is-active .colorchip-palette {
    margin: 20px 0;
    margin-right: -17px
  }

  .detail-colorchip .colorchip-palette {
    overflow-y: auto;
    overflow-x: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
  }

  .detail-colorchip .colorchip-color {
    -webkit-transition: all .4s cubic-bezier(0.445, 0.05, 0.55, 0.95);
    -moz-transition: all .4s cubic-bezier(0.445, 0.05, 0.55, 0.95);
    -ms-transition: all .4s cubic-bezier(0.445, 0.05, 0.55, 0.95);
    -o-transition: all .4s cubic-bezier(0.445, 0.05, 0.55, 0.95);
    transition: all .4s cubic-bezier(0.445, 0.05, 0.55, 0.95)
  }

  .detail-colorchip .colorchip-view {
    -webkit-transition: all .4s cubic-bezier(0.445, 0.05, 0.55, 0.95);
    -moz-transition: all .4s cubic-bezier(0.445, 0.05, 0.55, 0.95);
    -ms-transition: all .4s cubic-bezier(0.445, 0.05, 0.55, 0.95);
    -o-transition: all .4s cubic-bezier(0.445, 0.05, 0.55, 0.95);
    transition: all .4s cubic-bezier(0.445, 0.05, 0.55, 0.95)
  }

  .detail-colorchip .colorchip-func {
    display: none
  }

  .detail-colorchip .scroll-btn {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 20;
    width: 100%;
    height: 20px;
    border: 1px solid #d9d9d9;
    background-color: #f6f6f6;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box
  }

  .detail-colorchip .scroll-btn:after {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    font-size: 1rem;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%)
  }

  .detail-colorchip .scroll-btn--up {
    top: 0
  }

  .detail-colorchip .scroll-btn--up:after {
    content: "\EA06";
    font-style: normal;
    font-weight: normal;
    font-family: "icon"
  }

  .detail-colorchip .scroll-btn--down {
    bottom: 0
  }

  .detail-colorchip .scroll-btn--down:after {
    content: "\EA01";
    font-style: normal;
    font-weight: normal;
    font-family: "icon"
  }

  .detail-colorchip .scroll-btn[disabled] {
    color: #999;
    background-color: #e5e5e5
  }

  .detail-desc {
    position: relative;
    padding-bottom: 63px
  }

  .detail-select {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0
  }

  .detail-select a,
  .detail-select .dropdown-selector {
    zoom: 1;
    padding: 0 10px
  }

  .detail-select a:before,
  .detail-select .dropdown-selector:before {
    content: '';
    display: block
  }

  .detail-select a:after,
  .detail-select .dropdown-selector:after {
    content: '';
    display: table;
    clear: both
  }

  .detail-texture {
    display: none
  }

  .detail-h {
    margin-top: -7px;
    font-size: 3.4rem;
    line-height: 1.3
  }

  .detail-h [lang="en"],
  .detail-h[lang="en"] {
    font-size: 2.6rem
  }

  .detail-h .en {
    margin-top: 7px;
    font-size: 1.6rem
  }

  .detail-thumb {
    float: left;
    width: 65.85956%;
    margin-bottom: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box
  }

  .detail-thumb .slick-dots {
    display: block;
    position: absolute;
    top: 50%;
    left: -16.66667%;
    max-width: 66px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%)
  }

  .detail-thumb .slick-dots li {
    margin: 5px 0;
    background-color: #fff;
    border: 1px solid #d9d9d9
  }

  .detail-thumb .slick-dots img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    padding: 2px;
    margin: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box
  }

  .detail-thumb .slick-dots .slick-btn {
    position: relative;
    display: block;
    padding: 0;
    width: 62px;
    height: 62px
  }

  .detail-thumb .slick-dots .slick-active {
    border-color: #000
  }

  .detail-info {
    float: left;
    width: 34.14044%;
    padding-left: 20px;
    padding-bottom: 70px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box
  }

  .detail-btn {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 34.14044%;
    padding-left: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box
  }
}

@media (max-width: 59.99em) {
  .detail-select {
    display: none
  }

  .detail-colorchip {
    position: fixed;
    top: 0;
    right: 0;
    padding-top: 60px;
    max-width: 480px;
    z-index: 51;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transform: translate(100%, 0%);
    -moz-transform: translate(100%, 0%);
    -ms-transform: translate(100%, 0%);
    -o-transform: translate(100%, 0%);
    transform: translate(100%, 0%);
    -webkit-transform: translate3d(100%, 0%, 0);
    -moz-transform: translate3d(100%, 0%, 0);
    -ms-transform: translate3d(100%, 0%, 0);
    -o-transform: translate3d(100%, 0%, 0);
    transform: translate3d(100%, 0%, 0)
  }

  .detail-colorchip .colorchip-palette {
    overflow-y: scroll;
    height: calc(100vh - 180px)
  }

  .is-crios .detail-colorchip .colorchip-palette {
    height: calc(100vh - 125px)
  }

  .detail-colorchip .colorchip-func {
    position: absolute;
    left: 0;
    right: 0;
    height: 180px;
    padding: 0 5.55556%;
    background-color: #f6f6f6;
    z-index: 10
  }

  .detail-colorchip .colorchip-title {
    display: block;
    padding: 20px 0 15px
  }

  .detail-colorchip .scroll-btn {
    display: none
  }

  .detail-thumb .slick-dots {
    position: absolute;
    width: 100%;
    bottom: -10px;
    margin-bottom: -10px;
    line-height: 0
  }

  .detail-thumb .slick-dots li {
    display: inline-block
  }

  .detail-thumb .slick-dots li.slick-active button {
    border-color: #000;
    background-color: #000
  }

  .detail-thumb .slick-dots button {
    display: block;
    padding: 0;
    margin: 0 5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1px solid #767676;
    background-color: transparent;
    color: transparent
  }

  .detail-thumb .slick-dots img {
    display: none
  }
}

@media (max-width: 44.99em) {
  .detail-colorchip {
    left: 0;
    max-width: none;
    z-index: 101;
    padding-top: 0
  }
}

.l-product {
  position: relative;
  max-width: 732px;
  margin: auto;
  padding: 0 20px;
  scrollbar-face-color: #999;
  scrollbar-arrow-color: #999;
  scrollbar-track-color: #d9d9d9
}

.l-product ::-webkit-scrollbar {
  width: 10px;
  height: 10px
}

.l-product ::-webkit-scrollbar-thumb {
  background: #999
}

.l-product ::-webkit-scrollbar-track {
  background: #d9d9d9
}

.l-product.l-full {
  padding: 0
}

.detail-section {
  overflow: hidden;
  position: relative
}

.detail-section+.detail-section {
  padding-top: 50px
}

.detail-section h2.h {
  margin: 15px 0 0;
  text-transform: uppercase
}

.detail-section h2.h,
.detail-section h3.h {
  color: #000;
  font-size: 2.4rem;
  line-height: 1.3;
  text-align: center
}

.detail-section h2.h [lang="en"],
.detail-section h2.h[lang="en"],
.detail-section h3.h [lang="en"],
.detail-section h3.h[lang="en"] {
  font-size: 2.0rem
}

.detail-section h2.h[lang="en"],
.detail-section h3.h[lang="en"] {
  font-size: 2.6rem
}

.detail-section h2.h:first-child,
.detail-section h3.h:first-child {
  margin-top: 0
}

.detail-section h5.h {
  display: block;
  margin-top: 20px;
  color: #000;
  font-weight: bold;
  font-size: 1em;
  line-height: 1.5
}

.detail-section p {
  margin-top: 10px;
  margin-bottom: 0
}

.detail-section .dot-list,
.detail-section .dash-list,
.detail-section .order-list {
  margin-top: 10px
}

.detail-section [lang="en"] {
  color: #000;
  font-family: "Arita Heiti", "Montserrat", sans-serif;
  font-weight: 600;
  text-transform: uppercase
}

.detail-section .figure {
  display: block;
  margin: 20px 0
}

.detail-div {
  position: relative;
  padding-top: 45px;
  padding-bottom: 45px;
  color: #333;
  font-weight: 100;
  text-align: center
}

.detail-div[class="detail-div"] {
  padding-top: 45px;
  padding-bottom: 5px
}

.detail-div .yt-player {
  display: block;
  position: relative
}

.detail-div .yt-player:before {
  content: "\EA15";
  font-style: normal;
  font-weight: normal;
  font-family: "icon";
  color: #fff;
  position: absolute;
  left: 20px;
  bottom: 15px;
  font-size: 25px
}

.detail-div .caption+p {
  margin-top: 25px
}

.detail-div .slogan-h {
  margin-bottom: 20px;
  padding: 0 10px;
  color: #000;
  font-weight: 100;
  font-size: 2.4rem;
  line-height: 1.3;
  word-break: keep-all;
  word-wrap: break-word
}

.detail-div .slogan-h [lang="en"],
.detail-div .slogan-h[lang="en"] {
  font-size: 2.0rem
}

.detail-div .sub {
  margin-top: 0;
  margin-bottom: 10px;
  color: #333;
  font-weight: 100;
  font-size: 2.2rem;
  font-family: "Arita Heiti", "Montserrat", sans-serif;
  text-transform: uppercase
}

.detail-div .figcaption {
  margin-top: 20px;
  padding-left: 20px;
  color: #333;
  font-weight: 100;
  text-align: left
}

.detail-div .figcaption span {
  display: block
}

.detail-div hr {
  height: 1px;
  border-width: 0
}

.detail-div .hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border-color: transparent
}

.detail-div .hr+h2.h {
  margin-top: -10px
}

.detail-div .hr-v {
  margin-top: 50px;
  margin-bottom: 50px;
  background-color: #d9d9d9;
  margin-left: -250%;
  width: 500%
}

.detail-div img {
  width: 100%
}

.detail-video {
  margin-bottom: 40px;
  padding-bottom: 5px
}

.detail-modelcut {
  margin-bottom: 40px
}

.detail-view {
  text-align: left
}

.detail-view .l-product {
  margin-top: -15px
}

.detail-view h2.h {
  text-align: left
}

.detail-view+.detail-view {
  border-top: 1px solid #e5e5e5
}

.detail-view+.detail-view .l-product {
  margin-top: 0
}

.detail-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  padding-bottom: 54.16667%;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover
}

.detail-row .cell {
  background-color: #fff
}

.detail-row .h {
  text-transform: uppercase
}

.detail-howto {
  padding: 40px 0;
  margin-top: -40px;
  background-color: #f6f6f6;
  text-align: left
}

.detail-howto h2.h,
.detail-howto h3.h {
  margin-bottom: 20px
}

.detail-howto h3.h+.p {
  margin-top: -20px;
  text-align: center
}

.detail-howto p {
  margin-top: 3px
}

.detail-howto .hr {
  height: 1px;
  margin: 35px 0;
  background-color: #d9d9d9
}

.detail-howto .yt-player:before {
  left: 12px;
  bottom: 5px
}

.detail-howto .figure {
  margin-top: 30px
}

.detail-howto .figure:first-of-type {
  margin-top: 25px
}

.detail-howto .figure+ul {
  margin-top: 15px
}

.detail-recommend {
  position: relative;
  z-index: 1;
  margin: 20px -20px 20px;
  text-align: center
}

.detail-recommend .slick-arrow-wrap {
  position: absolute;
  z-index: 10;
  top: 0;
  height: 0;
  width: 30px;
  padding-bottom: 55.55556%
}

.detail-recommend .slick-arrow-wrap>span {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  white-space: nowrap
}

.detail-recommend .slick-arrow-wrap>span:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle
}

.detail-recommend .slick-prev-wrap {
  left: 0
}

.detail-recommend .slick-next-wrap {
  right: 0
}

.detail-recommend .slick-arrow {
  display: inline-block !important;
  overflow: hidden;
  z-index: 10;
  padding: 0;
  width: 30px;
  height: 30px;
  color: transparent;
  line-height: 30px;
  font-size: 16px;
  text-align: center
}

.detail-recommend .slick-arrow:before {
  display: block;
  margin: auto;
  color: #666
}

.detail-recommend .slick-prev {
  left: 0
}

.detail-recommend .slick-prev:before {
  content: "\EA04";
  font-style: normal;
  font-weight: normal;
  font-family: "icon"
}

.detail-recommend .slick-next {
  right: 0
}

.detail-recommend .slick-next:before {
  content: "\EA05";
  font-style: normal;
  font-weight: normal;
  font-family: "icon"
}

.detail-recommend .slick-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  text-align: center
}

.detail-recommend .slick-dots li {
  display: inline-block;
  vertical-align: middle
}

.detail-recommend .slick-dots button {
  overflow: hidden;
  position: relative;
  color: transparent;
  width: 15px;
  height: 15px;
  padding: 4px 4px;
  margin: 0 2px
}

.detail-recommend .slick-dots button:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 10px;
  height: 10px;
  margin: auto;
  border: 1px solid #222;
  border-radius: 50%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box
}

.detail-recommend .slick-dots .slick-active button:after {
  background-color: #222
}

.detail-recommend-item {
  position: relative;
  padding: 0 15px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box
}

.detail-recommend-item:before,
.detail-recommend-item:after {
  content: '';
  position: absolute;
  top: 85px;
  right: 0;
  left: 0;
  margin: auto;
  background-color: #000;
  z-index: 10;
}

.detail-recommend-item:before {
  width: 3px;
  height: 34px;
  -webkit-transform: translateY(0%);
  -moz-transform: translateY(0%);
  -ms-transform: translateY(0%);
  -o-transform: translateY(0%);
  transform: translateY(0%)
}

.detail-recommend-item:after {
  width: 34px;
  height: 3px;
  top: 100px;
  -webkit-transform: translateX(0%);
  -moz-transform: translateX(0%);
  -ms-transform: translateX(0%);
  -o-transform: translateX(0%);
  transform: translateX(0%)
}

.detail-recommend .cell {
  position: relative;
  z-index: 1;
  float: left;
  width: 43.93939%;
  margin-bottom: 25px;
  outline: 0 none;
  color: #333;
  -webkit-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -moz-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -ms-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -o-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1)
}

.detail-recommend .cell+.cell {
  float: right
}

.detail-recommend .cell span {
  display: block;
}

/*height:24px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;text-overflow:ellipsis;word-wrap:normal 20180726*/
.detail-recommend .cell:hover,
.detail-recommend .cell:focus {
  color: #46166b;
  text-decoration: underline
}

.detail-addon {
  margin-top: 50px;
  border-bottom: 1px solid #000;
  text-align: left
}

.detail-addon-item {
  display: none
}

.detail-addon-item.is-current {
  display: block
}

.detail-addon .q {
  display: block;
  position: relative;
  width: 100%;
  padding: 10px 15px;
  border-top: 2px solid #000;
  color: #000;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  text-align: left
}

.detail-addon .q:before {
  content: "\EA01";
  font-style: normal;
  font-weight: normal;
  font-family: "icon";
  position: absolute;
  top: 50%;
  right: 15px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%)
}

.detail-addon .q>ol:first-child,
.detail-addon .q>ul:first-child {
  margin-top: 0
}

.detail-addon .a {
  padding: 20px 15px 30px;
  color: #333;
  font-size: 1.4rem
}

.detail-addon .a>ol:first-child,
.detail-addon .a>ul:first-child {
  margin-top: 0
}

.detail-addon .dot-list {
  margin-top: 5px
}

.detail-addon li.is-active .q {
  border-bottom: 1px solid #000
}

.detail-addon li.is-active .q:before {
  content: "\EA06";
  font-style: normal;
  font-weight: normal;
  font-family: "icon"
}

.detail-graph {
  padding: 40px 10px;
  border: 1px solid #000;
  color: #333
}

.detail-graph .h {
  margin: 0;
  font-size: 1.6rem
}

.detail-graph .graph {
  position: relative;
  border-bottom: 4px solid #e0e0e0
}

.detail-graph .graph+.graph {
  margin-top: 3.5rem
}

.detail-graph .graph-info {
  margin-top: 2rem
}

.detail-graph .graph-info p {
  margin: 0;
  color: #767676;
  font-size: 1.4rem
}

.detail-graph .bar {
  margin-top: 5px;
  margin-bottom: -4px;
  border-bottom: 4px solid #a447cc;
  font-size: 2rem
}

.detail-graph .bar span {
  position: absolute;
  right: 0;
  bottom: 0
}

.detail-box {
  margin-top: 15px;
  padding: 25px 10px;
  border: 8px solid #e5e5e5
}

.detail-box h5.h {
  margin-top: 20px
}

.detail-box h5.h:first-child {
  margin-top: 0
}

.detail-box .dash-list li+li {
  margin-top: 10px
}

.detail-twist-box {
  padding: 20px 15px;
  border: 8px solid #e5e5e5;
  text-align: left
}

.h+.detail-twist-box {
  margin-top: 25px
}

.detail-twist-box h5.h {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 2.6rem
}

.detail-twist-box .detail-twist>li:first-child {
  margin-top: 0
}

.detail-twist-box .detail-twist>li+li {
  margin-top: 30px
}

.detail-twist {
  margin-bottom: 40px
}

.detail-twist:last-child {
  margin-bottom: 0
}

.detail-twist>li {
  margin-top: 40px
}

@media (min-width: 45em) {
  .detail-section+.detail-section {
    padding-top: 90px
  }

  .detail-section h2.h,
  .detail-section h3.h {
    margin-top: 25px;
    font-size: 3.4rem;
    line-height: 1.3
  }

  .detail-section h2.h [lang="en"],
  .detail-section h2.h[lang="en"],
  .detail-section h3.h [lang="en"],
  .detail-section h3.h[lang="en"] {
    font-size: 2.6rem
  }

  .detail-section h2.h[lang="en"],
  .detail-section h3.h[lang="en"] {
    font-size: 3.6rem
  }

  .detail-section h5.h {
    font-size: 2.6rem;
    line-height: 1.3
  }

  .detail-section .figure {
    margin: 40px 0 30px
  }

  .detail-section p {
    margin-top: 0.7em;
    font-size: 2.6rem
  }

  .detail-div {
    padding-top: 100px;
    padding-bottom: 100px
  }

  .detail-div[class="detail-div"] {
    padding-top: 90px;
    padding-bottom: 20px
  }

  .detail-div .yt-player:before {
    font-size: 50px;
    left: 40px;
    bottom: 15px
  }

  .detail-div .slogan-h {
    margin-bottom: 3rem;
    padding: 0 20px;
    font-size: 3.4rem;
    line-height: 1.3;
    line-height: 1.45
  }

  .detail-div .slogan-h [lang="en"],
  .detail-div .slogan-h[lang="en"] {
    font-size: 2.6rem
  }

  .detail-div .figure:first-child {
    margin-top: 0
  }

  .detail-div .figure .figcaption {
    font-size: 2.6rem
  }

  .detail-div .sub {
    font-size: 4rem;
    line-height: 1.3;
    margin-bottom: 45px
  }

  .detail-div .sub [lang="en"],
  .detail-div .sub[lang="en"] {
    font-size: 3.2rem
  }

  .detail-div .hr {
    margin-top: 40px;
    margin-bottom: 40px
  }

  .detail-div .hr+h2.h {
    margin-top: -20px
  }

  .detail-div .hr-v {
    margin-top: 75px;
    margin-bottom: 75px
  }

  .detail-div .dash-list {
    font-size: 2.6rem
  }

  .detail-div .dash-list li {
    padding-left: 20px
  }

  .detail-div .dash-list li:before {
    top: 20px;
    width: 8px
  }

  .detail-div .dash-list li+li {
    margin-top: 15px
  }

  .detail-div .dot-list {
    font-size: 2.6rem
  }

  .detail-div .dot-list li {
    padding-left: 20px
  }

  .detail-div .dot-list li:before {
    top: 18px;
    width: 6px;
    height: 6px
  }

  .detail-div .dot-list li+li {
    margin-top: 15px
  }

  .detail-div .order-list {
    font-size: 2.6rem
  }

  .detail-div .order-list li {
    padding-left: 30px
  }

  .detail-div .order-list li+li {
    margin-top: 15px
  }

  .detail-video {
    margin-bottom: 80px;
    padding-bottom: 0
  }

  .detail-modelcut {
    margin-bottom: 80px
  }

  .detail-view .l-product {
    margin-top: 0
  }

  .detail-bg {
    height: 450px;
    padding-bottom: 0
  }

  .detail-row {
    position: relative
  }

  .detail-row .cell {
    width: 50%;
    margin-left: 50%
  }

  .detail-row .cell+.cell {
    position: absolute;
    left: -50%;
    top: 0;
    bottom: 0;
    padding: 10.2459% 6.14754%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box
  }

  .detail-howto {
    padding: 90px 0 100px;
    margin-top: -90px
  }

  .detail-howto h2.h,
  .detail-howto h3.h {
    margin-bottom: 30px
  }

  .detail-howto h3.h+.p {
    margin-top: -25px
  }

  .detail-howto p {
    margin-top: 0.3em
  }

  .detail-howto .hr {
    margin: 60px 0
  }

  .detail-howto .yt-player:before {
    left: 30px
  }

  .detail-howto .figure {
    margin-top: 55px;
    margin-bottom: 25px
  }

  .detail-howto .figure:first-of-type {
    margin-top: 45px
  }

  .detail-recommend {
    margin-left: 0;
    margin-right: 0
  }

  .detail-recommend .slick-arrow-wrap {
    padding-bottom: 53.23529%
  }

  .detail-recommend .slick-arrow:before {
    display: inline-block;
    color: #666;
    text-align: center;
    font-size: 27px
  }

  .detail-recommend .slick-dots {
    bottom: -20px
  }

  .detail-recommend-item {
    position: relative;
    padding: 0 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box
  }

  .detail-recommend-item .cell {
    font-size: 2.6rem;
    max-width: 265px
  }

  .detail-recommend-item:before {
    width: 8px;
    height: 82px;
    top: 142px;
  }

  .detail-recommend-item:after {
    width: 82px;
    height: 8px;
    top: 179px;
  }

  /*.detail-recommend .cell span{height:39px}20180726*/
  .detail-addon {
    margin-top: 100px;
    border-bottom: 1px solid #000
  }

  .detail-addon .q {
    padding: 15px
  }

  .detail-addon .q:before {
    right: 20px;
    font-size: 18px
  }

  .detail-addon .a {
    padding: 40px 20px
  }

  .detail-box {
    margin-top: 25px;
    padding: 4.09836% 4.09836%
  }

  .detail-box h5.h {
    margin-top: 30px
  }

  .detail-box .dash-list li+li {
    margin-top: 15px
  }

  .detail-box .dash-list li:before {
    top: 12px
  }

  .detail-twist-box {
    padding: 40px 30px
  }

  .detail-twist-box h3.h {
    font-size: 2.6rem;
    margin-bottom: 40px
  }

  .detail-twist-box .detail-twist .figure {
    max-width: 250px
  }

  .detail-twist-box .detail-twist>li {
    min-height: 250px;
    padding-left: 46.44809%
  }

  .detail-twist-box .detail-twist>li+li {
    margin-top: 60px
  }

  .detail-twist-box .detail-twist>li:nth-child(even) {
    padding-left: 0;
    padding-right: 46.44809%
  }

  .detail-twist {
    margin-bottom: 75px
  }

  .detail-twist:last-child {
    margin-bottom: 0
  }

  .detail-twist>li {
    position: relative;
    min-height: 356px;
    margin-top: 75px;
    padding-left: 54.64481%
  }

  .detail-twist>li .figure {
    position: absolute;
    left: 0;
    top: 0;
    max-width: 356px;
    width: 48.63388%
  }

  .detail-twist>li:nth-child(even) {
    padding-left: 0;
    padding-right: 54.64481%
  }

  .detail-twist>li:nth-child(even) .figure {
    left: auto;
    right: 0
  }
}

@media (min-width: 60em) {
  .detail-recommend .slick-arrow-wrap {
    padding-bottom: 49.45355%
  }

  .detail-recommend .slick-prev {
    left: -72px
  }

  .detail-recommend .slick-next {
    right: -72px
  }

  .detail-twist-box .detail-twist .figure {
    max-width: 300px
  }

  .detail-twist-box .detail-twist>li {
    padding-left: 50.30488%
  }

  .detail-twist-box .detail-twist>li:nth-child(even) {
    padding-right: 50.30488%
  }
}

.catalog-header {
  position: relative
}

.catalog-header .h1 {
  color: #000;
  text-align: center
}

.catalog-header .dropdown-selector {
  min-width: 176px;
  border-color: #d9d9d9
}

.catalog-visual {
  overflow: hidden
}

.catalog-visual img {
  width: 100%;
}

.catalog-section .h {
  display: none;
  margin-top: 55px;
  padding-bottom: 15px;
  color: #222;
  font-weight: bold;
  font-size: 2.4rem;
  line-height: 1.3
}

.catalog-section .h [lang="en"],
.catalog-section .h[lang="en"] {
  font-size: 2.0rem
}

@media (min-width: 60em) {
  .catalog-section {
    position: relative
  }

  .catalog-section .h {
    display: block
  }

  .catalog-header {
    padding-top: 40px;
    zoom: 1
  }

  .catalog-header:before {
    content: '';
    display: block
  }

  .catalog-header:after {
    content: '';
    display: table;
    clear: both
  }

  .catalog-header .h1 {
    font-size: 4rem;
    line-height: 1.3;
    line-height: 1;
    margin-bottom: 4rem
  }

  .catalog-header .h1 [lang="en"],
  .catalog-header .h1[lang="en"] {
    font-size: 3.2rem
  }

  .catalog-header .dropdown {
    position: absolute;
    top: 4rem;
    right: 0;
    width: auto
  }

  .catalog-header .dropdown-selector {
    border-color: #d9d9d9;
    border-left-width: 1px;
    border-right-width: 1px
  }

  .catalog-header--detail {
    padding-top: 80px;
    padding-bottom: 12px
  }

  .catalog-header--detail .h1 {
    position: absolute !important;
    overflow: hidden;
    height: 1px;
    width: 1px;
    clip: rect(1px, 1px, 1px, 1px)
  }

  .catalog-header--detail .dropdown {
    position: relative;
    top: inherit;
    right: inherit;
    float: right;
    margin-bottom: -46px
  }

  .catalog-header--detail .catalog-visual {
    margin-bottom: 50px
  }

  .catalog-section .h {
    display: block
  }

  .catalog-visual img {
    width: auto;
  }
}

@media (max-width: 59.99em) {
  .catalog-header .h1 {
    padding-top: 14px;
    padding-bottom: 15px;
    font-size: 2.4rem;
    line-height: 1.3
  }

  .catalog-header .h1 [lang="en"],
  .catalog-header .h1[lang="en"] {
    font-size: 2.0rem
  }
}

.product-home {
  padding-bottom: 80px;
}

.product-home p {
  margin: 0 0;
  word-break: keep-all;
  word-wrap: break-word;
}

.product-home .thumb {
  overflow: hidden;
  position: relative
}

.product-home .thumb-layer {
  display: none
}

.product-home .thumb:before {
  content: '';
  position: relative;
  display: block;
  width: 100%;
  padding-bottom: 100%;
}

.product-home .thumb img {
  -webkit-transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -moz-transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -ms-transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1)
}

.product-home .slick-dots {
  margin-top: 7px;
  text-align: center
}

.product-home .slick-dots li {
  display: inline-block;
  vertical-align: top
}

.product-home .slick-dots li .dot {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 0 5px;
  width: 10px;
  height: 10px;
  color: transparent
}

.product-home .slick-dots li .dot:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 10px;
  height: 10px;
  margin: auto;
  border-radius: 50%;
  border: 1px solid #767676;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box
}

.product-home .slick-dots li.slick-active .dot:after {
  background-color: #767676
}

/* tablet */
@media (min-width: 48em) {
  .product-home {
    padding-bottom: 137px;
  }
}

.product-main .sub-main-visual {
  padding-bottom: 118%;
  overflow: hidden;
  position: relative;
}

.product-main .sub-main-visual img {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  max-width: none;
  height: 100%;
}

.product-main .sub-main-visual img.img-pc {
  display: none;
}

.product-main .sub-main-visual img.img-mobile {
  display: block;
}

.product-main .product-main-cell {
  padding: 25px 20px 30px;
  text-align: center;
  box-sizing: border-box;
}

.product-main .product-main-desc {
  padding-left: 0;
  padding-right: 0;
  display: block;
}

.product-main .h {
  font-size: 3.0rem;
  line-height: 1.3;
  color: #000
}

.product-main .h:lang(en) {
  font-family: "Arita Heiti", "Montserrat", sans-serif;
  font-weight: 600;
}

.product-main .p {
  margin-top: 10px;
  color: #333
}

.product-main .p br {
  display: none;
}

.product-main .product-func {
  margin-top: 14px
}

.product-main a:focus .product-func .btn span,
.product-main .product-func .btn:hover span,
.product-main .product-func .btn:focus span {
  color: #000
}

.product-main a:focus .product-func .btn:after,
.product-main .product-func .btn:hover:after,
.product-main .product-func .btn:focus:after {
  border-color: #000;
  background-color: #fff
}

/* tablet */
@media (min-width: 48em) {
  .product-main {
    position: relative;
  }

  .product-main .sub-main-visual {
    padding-bottom: 44%;
  }

  .product-main .sub-main-visual img.img-pc {
    display: block;
  }

  .product-main .sub-main-visual img.img-mobile {
    display: none;
  }

  .product-main .product-main-cell {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    max-width: 1280px;
    text-align: left;
    margin: 0 auto;
  }

  .product-main .product-main-desc {
    width: 430px;
    display: inline-block;
  }

  .product-main .p {
    margin-top: 20px;
  }

  .product-main .p br {
    display: block;
  }

  .product-main.frame--invert .product-main-desc {
    float: right;
  }

  .product-main.theme--invert .h,
  .product-main.theme--invert .p {
    color: #fff
  }
}

/* pc */
@media (min-width: 80em) {
  .product-main .sub-main-visual {
    height: 560px;
    padding-bottom: 0;
  }

  .product-main .product-main-cell {
    padding: 0;
  }

  .product-main .product-main-desc {
    width: 430px;
  }
}

.product-home>.product-catalog {
  padding: 50px 20px 73px;
  font-size: 0px;
}

.product-catalog [class^="cq-placeholder-q"] {
  display: none;
  width: 0;
  max-width: 0;
}

/* aem 확인용 */
.product-catalog [class*="q-catalog"] {
  margin-top: 50px;
  font-size: 10px;
}

.product-catalog [class*="q-catalog"] a {
  display: block;
}

.product-catalog [class*="q-catalog"] a:focus {
  outline: none;
  background-color: rgba(0, 0, 0, 0.098);
}

.product-catalog .q-catalog-main {
  margin-top: 0;
}

.product-catalog .thumb {
  position: relative;
  overflow: hidden;
}

.product-catalog .thumb img {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
}

.product-catalog .thumb .thumb-video {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateY(-50%);
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .4s ease-in-out;
  transition: opacity .4s ease-in-out;
}

.product-catalog .thumb .thumb-video video {
  width: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .4s ease-in-out;
  transition: opacity .4s ease-in-out;
}

.product-catalog .thumb .thumb-video .thumb-youtube {
  width: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .4s ease-in-out;
  transition: opacity .4s ease-in-out;
}

.product-catalog .thumb.play img {
  display: none;
}

.product-catalog .thumb.play .thumb-video {
  visibility: inherit;
  opacity: 1;
}

.product-catalog .thumb.play .thumb-video video {
  visibility: inherit;
  opacity: 1;
}

.product-catalog .thumb.play .thumb-video .thumb-youtube {
  visibility: inherit;
  opacity: 1;
}

.product-catalog .yt-player .thumb:after {
  z-index: 1;
  content: "";
  display: inline-block;
  background: url("../image/product/play_btn.png") no-repeat center center;
  width: 81px;
  height: 81px;
  margin-left: -40.5px;
  margin-top: -40.5px;
  position: absolute;
  left: 50%;
  top: 50%;
}

.product-catalog .yt-player .thumb:before {
  background-color: rgba(0, 0, 0, 0);
  z-index: 1;
  -webkit-transition: background-color .4s, -webkit-transform .4s;
  transition: background-color .4s, transform .4s;
}

.product-catalog .yt-player:hover .thumb:before {
  background-color: rgba(0, 0, 0, 0.2);
}

.product-catalog .video-player {
  padding-bottom: 100%;
}

.product-catalog .thumb-layer {
  display: block;
  padding-top: 21px;
}

.product-catalog .thumb-layer-cell {
  color: #333;
}

.product-catalog .thumb-layer-cell strong {
  display: block;
  font-size: 2.4em;
  letter-spacing: 1px;
  font-family: "Arita Heiti", "Montserrat", sans-serif;
  font-weight: 700;
  color: #000;
  font-weight: 600;
}

.product-catalog .thumb-layer-cell p {
  margin-top: 4px;
  max-height: 3.2em;
  font-size: 1.6em;
  font-weight: 700;
  display: -webkit-box;
  white-space: normal;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}

.product-catalog .btn {
  margin-top: 16px;
  padding: .78em 1.43em;
  font-size: 1.4em;
  font-weight: 700;
  line-height: 1;
}

.product-catalog .btn:after {
  border-color: #000;
}

.product-catalog .btn span {
  color: #333;
}

.product-catalog .btn:hover:after,
.product-catalog .btn:focus:after {
  color: #fff;
  border-color: #000;
  background-color: #000;
}

.product-catalog .btn:hover span,
.product-catalog .btn:focus span {
  color: #fff;
}

/* tablet */
@media (min-width: 48em) {
  .product-home>.product-catalog {
    max-width: 1280px;
    margin: 0 auto;
    padding: 90px 6.7% 133px;
    box-sizing: border-box;
  }

  .product-catalog .catalog-frame {
    width: 100%;
    text-align: center;
  }

  .product-catalog [class*="q-catalog"] {
    margin-top: 0;
    width: calc(33.3% - 11px);
    margin-left: 16px;
    display: inline-block;
    float: none;
    vertical-align: top;
  }

  .product-catalog [class*="q-catalog"]:first-child,
  .product-catalog .q-catalog-main {
    margin-left: 0;
  }

  .product-catalog [class*="q-catalog"] a:focus {
    background-color: transparent;
    outline: rgba(0, 0, 0, 0.098) solid 1px;
    outline-offset: 7px
  }

  .product-catalog [class*="q-catalog"] a:hover p,
  .product-catalog [class*="q-catalog"] a:focus p {
    text-decoration: underline;
  }

  .product-catalog .thumb-layer {
    padding-top: 31px;
  }

  .product-catalog .thumb-layer-cell {
    text-align: left;
  }

  /*.product-catalog .thumb-layer-cell p {margin-top:6px;}*/
  .product-catalog .btn {
    margin-top: 26px;
  }
}

/* pc */
@media (min-width: 80em) {
  .product-home>.product-catalog {
    width: 1108px;
    padding-left: 0;
    padding-right: 0;
  }
}

.product-home>.product-category {}

.product-category [class*="cq-placeholder-category"] {
  display: none;
  width: 0;
  max-width: 0;
}

/* aem 확인용 */
.product-category .h {
  padding: 0 20px 23px;
  color: #000;
  font-size: 24px;
  letter-spacing: 1px;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  font-family: "Arita Heiti", "Montserrat", sans-serif;
}

.product-category .category-frame {
  font-size: 0
}

.product-category .category-slide:before {
  content: '';
  display: block;
}

.product-category .category-slide:after {
  content: '';
  display: table;
  clear: both;
}

.product-category .category-slide.slick-slider {
  margin: 0 0px;
}

.product-category .category-slide.slick-slider .slick-slide {
  width: 52.8vw;
  height: 100%;
  min-height: 1px;
  padding-left: 20px;
}

.product-category .thumb {
  position: relative;
  overflow: hidden;
}

.product-category .thumb img {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  display: block;
}

.product-category .category-link {
  position: relative;
  display: block;
  font-size: 10px
}

.product-category .category-link:focus {
  outline: none;
}

.product-category .category-link:focus:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.098)
}

.product-category .category {
  position: relative;
  padding: 24px 0 20px;
  color: #000;
  font-size: 1.6em;
  font-weight: 700;
  text-align: left;
}

.product-category .category .a11y {
  display: block;
  position: relative !important;
  padding-top: 12px;
  width: auto;
  height: auto;
  color: #666;
  font-size: 14px;
  overflow: visible;
  clip: auto;
}

.product-category .category .a11y:after {
  display: inline-block;
  content: "\EA05";
  padding-left: 8px;
  font-style: normal;
  font-weight: normal;
  font-family: "icon";
  font-size: .62em;
  color: currentColor
}

.product-category .category:lang(en) {
  font-family: "Arita Heiti", "Montserrat", sans-serif;
  font-weight: 600;
}

.product-category .category .a11y:lang(en) {
  font-family: "Arita Heiti", "Montserrat", sans-serif;
}

/* tablet */
@media (min-width: 48em) {
  .product-home>.product-category {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 6.7%;
    box-sizing: border-box;
  }

  .product-category .h {
    margin: 0 auto;
    max-width: 1108px;
  }

  .product-category .category-frame {
    width: 100%;
    text-align: center;
  }

  .product-category .category-slide .product-category {
    max-width: calc(33.3% - 11px);
    width: 100%;
    height: 100%;
    min-height: 1px;
    margin-left: 16px;
    display: inline-block;
    float: none;
    vertical-align: top;
    font-size: 10px;
  }

  .product-category .category-slide .parbase:first-child,
  .product-category .cq-placeholder-category-product-1+.product-category {
    margin-left: 0;
  }

  .product-category .category-link:focus {
    outline: rgba(0, 0, 0, 0.098) solid 1px;
    outline-offset: 7px
  }

  .product-category .category-link:focus:after {
    content: none;
  }

  .product-category .category {
    padding: 34px 0 0;
  }

  .product-category .category .a11y {
    padding-top: 22px;
  }

  .product-category .category:hover .a11y,
  .product-category .category:focus .a11y {
    text-decoration: underline;
  }

  .product-category .slick-slider .slick-slide .parbase {
    margin-left: 0;
    max-width: inherit;
  }

  .product-category .slick-slider .slick-slide .parbase .category {
    padding: 38px 0 43px;
  }
}

/* pc */
@media (min-width: 80em) {
  .product-home>.product-category {
    width: 1108px;
    padding-left: 0;
    padding-right: 0;
  }
}

.go-lip-finder {
  position: relative;
  display: block;
  padding-top: 10px;
  padding-bottom: 11px;
  padding-left: 5.55556%;
  background-color: #000;
  color: #fff
}

.go-lip-finder:after {
  content: "\EA05";
  font-style: normal;
  font-weight: normal;
  font-family: "icon";
  position: absolute;
  top: 50%;
  right: 5.55556%;
  margin-top: -6px;
  color: #f6f6f6;
  font-size: 12px;
  line-height: 1
}

@media (min-width: 60em) {
  .go-lip-finder {
    display: none
  }
}

.lip-finder {
  position: relative;
  background-color: #222;
  color: #fff
}

.lip-finder-header {
  position: relative;
  background-color: #000;
  padding-top: 11px;
  padding-bottom: 11px
}

.lip-finder-header .h {
  font-size: 16px;
  line-height: 1.5
}

.lip-finder .filters {
  overflow: hidden;
  position: relative;
  padding-top: 15px;
  padding-bottom: 5px
}

.lip-finder .filters-wrap {
  overflow: hidden;
  max-width: 360px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px
}

.lip-finder .filters-heading {
  padding-bottom: 8px;
  border-bottom: 1px solid #666;
  font-family: "Arita Heiti", "Montserrat", sans-serif;
  font-size: 16px;
  text-transform: uppercase
}

.lip-finder .filters label {
  text-transform: capitalize;
  font-weight: lighter;
  font-size: 14px
}

.lip-finder .filters label:before {
  background-color: #fff
}

.lip-finder .filters .checkbox {
  line-height: 24px
}

.lip-finder .filters .checkbox-wrap {
  display: inline-block;
  width: 84px;
  margin-bottom: 5px;
  white-space: nowrap
}

.lip-finder .filters .checkbox-wrap:last-child {
  width: auto
}

.lip-finder .filters .checkbox-color {
  display: inline-block;
  position: relative;
  padding-left: 34px;
  line-height: 24px
}

.lip-finder .filters .checkbox-color input {
  position: absolute;
  z-index: -1;
  top: 50%;
  width: 1px;
  height: 1px
}

.lip-finder .filters .checkbox-color input:checked+label:after {
  opacity: 1
}

.lip-finder .filters .checkbox-color label:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 24px;
  height: 24px;
  margin-top: -12px
}

.lip-finder .filters .checkbox-color label:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  content: '';
  position: absolute;
  left: 2px;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  border: 2px solid #fff;
  opacity: 0;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  transition: opacity 0.2s
}

.lip-finder .filters .checkbox-color--red label:before {
  background-color: #f42020
}

.lip-finder .filters .checkbox-color--pink label:before {
  background-color: #d940a1
}

.lip-finder .filters .checkbox-color--coral label:before {
  background-color: #e1455a
}

.lip-finder .filters .checkbox-color--orange label:before {
  background-color: #f45c20
}

.lip-finder .filters .checkbox-color--beige label:before {
  background-color: #e89173
}

.lip-finder .filters .checkbox-color--brown label:before {
  background-color: #9a2e0d
}

.lip-finder .filters .checkbox-color--purple label:before {
  background-color: #a53289
}

.lip-finder .filters--finishes .checkbox-wrap:nth-child(3n+1) {
  width: 116px
}

.lip-finder .filters--finishes .checkbox-wrap:nth-child(3n+2) {
  width: 84px
}

.lip-finder .filters--finishes .checkbox-wrap:nth-child(3n) {
  width: 68px
}

.lip-finder .filters--colors .checkbox-wrap:nth-child(3n+1) {
  width: 105px
}

.lip-finder .filters--colors .checkbox-wrap:nth-child(3n+2) {
  width: 96px
}

.lip-finder .filters--colors .checkbox-wrap:nth-child(3n) {
  width: 80px
}

@media (min-width: 60em) {
  .lip-finder .filters {
    padding-top: 25px;
    padding-bottom: 15px
  }

  .lip-finder .filters-wrap {
    max-width: 420px;
    padding-right: calc(155px + 3.3% + 1.5%);
    padding-left: calc(274px + 3.3% + 1.5%)
  }

  .lip-finder .filters--finishes {
    position: absolute;
    top: 0;
    left: 3.3%;
    width: 274px
  }

  .lip-finder .filters .checkbox-color {
    display: block;
    position: relative;
    margin-left: 3px;
    margin-right: 3px;
    padding-top: 36px;
    padding-left: 0;
    line-height: 24px;
    text-align: center
  }

  .lip-finder .filters .checkbox-color label:before {
    top: 0;
    width: 100%;
    height: 36px;
    margin-top: 0
  }

  .lip-finder .filters .checkbox-color label:after {
    left: 2px;
    top: 2px;
    width: 100%;
    height: 32px;
    margin-top: 0;
    opacity: 0
  }

  .lip-finder .filters.filters--colors {
    width: auto
  }

  .lip-finder .filters.filters--colors .lip-finder-box {
    margin-left: -3px;
    margin-right: -3px
  }

  .lip-finder .filters.filters--colors .checkbox-wrap {
    position: relative;
    float: left;
    width: 14.28571%
  }

  .lip-finder .filters.filters--colors label {
    font-size: 13px
  }

  .lip-finder .filters.filters--colors label:before {
    height: 36px
  }

  .lip-finder .filters.filters--colors label:after {
    top: 0;
    left: 0;
    width: 100%;
    height: 36px;
    border-width: 3px
  }

  .lip-finder .filters.filters--colors .lip-finder-box {
    overflow: hidden;
    max-width: none
  }

  .lip-finder .filters--types {
    position: absolute;
    top: 0;
    right: 3.3%;
    width: 155px
  }
}

@media (min-width: 80em) {
  .lip-finder .filters {
    padding-top: 30px;
    padding-bottom: 30px
  }

  .lip-finder .filters-wrap {
    max-width: none;
    margin: 0;
    padding-left: calc(274px + 3.3% + 45px);
    padding-right: 3.3%
  }

  .lip-finder .filters .checkbox-color {
    padding-top: 42px;
    margin-left: 5px;
    margin-right: 5px
  }

  .lip-finder .filters .checkbox-color label:before,
  .lip-finder .filters .checkbox-color label:after {
    height: 40px
  }

  .lip-finder .filters.filters--colors {
    float: left;
    width: 420px;
    margin-right: 45px
  }

  .lip-finder .filters.filters--colors .lip-finder-box {
    margin-left: -4px;
    margin-right: -4px;
    padding-top: 12px
  }

  .lip-finder .filters.filters--colors label {
    font-size: 14px
  }

  .lip-finder .filters--types {
    position: relative;
    right: auto;
    float: left
  }
}

.lip-finder-box {
  padding-top: 8px
}

.lip-finder .reset-button {
  position: absolute;
  top: 4px;
  right: 40px;
  padding: 10px;
  font-size: 18px
}

.lip-finder .reset-button:before {
  content: "\EA16";
  font-style: normal;
  font-weight: normal;
  font-family: "icon"
}

.lip-finder .close-button {
  position: absolute;
  top: 4px;
  right: 10px;
  padding: 10px;
  font-size: 18px
}

.lip-finder .close-button:before {
  content: "\EA0B";
  font-style: normal;
  font-weight: normal;
  font-family: "icon"
}

@media (max-width: 59.99em) {
  .lip-finder {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding-bottom: 20px
  }

  .lip-finder:after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    opacity: 0
  }

  .lip-finder.is-active {
    display: block
  }

  .lip-finder.is-active form {
    position: relative;
    z-index: 20
  }

  .lip-finder.is-active:after {
    z-index: 10;
    background-color: rgba(34, 34, 34, 0.5);
    opacity: 1
  }
}

@media (min-width: 60em) {
  .lip-finder-header {
    position: static;
    padding: 0;
    background-color: transparent
  }

  .lip-finder-header .h {
    position: absolute;
    visibility: hidden
  }

  .lip-finder .reset-button {
    position: absolute;
    top: auto;
    right: 10px;
    bottom: 10px;
    border-radius: 50%;
    background-color: #fff;
    color: #000;
    font-size: 19px;
    line-height: 1
  }

  .lip-finder .close-button,
  .lip-finder .func {
    display: none
  }
}

@media (min-width: 80em) {
  .lip-finder .reset-button {
    right: 3.3%;
    bottom: 30px
  }
}

.lip-list-heading {
  color: #000;
  font-size: 18px;
  line-height: 1.2
}

.lip-list-heading-wrap {
  padding-top: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e5e5e5
}

.lip-list-wrap {
  background-color: #fff
}

.lip-list-empty {
  margin: 0;
  padding-top: 20vh;
  padding-bottom: 20vh;
  font-size: 18px;
  text-align: center
}

.lip-list-empty:before {
  content: "\EA20";
  font-style: normal;
  font-weight: normal;
  font-family: "icon";
  display: block;
  font-size: 30px
}

.lip-list .lip-line {
  color: #333;
  font-size: 16px
}

.lip-list .colorchip {
  margin-top: 5px
}

.lip-list .colorchip-block {
  width: 24px;
  height: 24px;
  margin-right: 8px
}

.lip-list .colorchip-name {
  margin-top: 0;
  font-size: 14px;
  line-height: 24px
}

.lip-list .category {
  margin-top: 10px;
  font-size: 0
}

.lip-list .filter {
  display: inline-block;
  margin-bottom: 5px;
  margin-right: 5px;
  padding: 5px 10px;
  background-color: #f6f6f6;
  color: #333;
  font-size: 14px;
  line-height: 1.5;
  text-transform: capitalize
}

.lip-list .func {
  margin-top: 15px;
  text-align: left
}

@media (min-width: 60em) {
  .lip-list-heading-wrap {
    padding-top: 40px;
    padding-left: 0
  }

  .lip-list-heading {
    font-size: 24px
  }

  .lip-list-heading-wrap+.lip-list {
    border-top: 0
  }
}

@media (min-width: 80em) {
  .lip-list-wrap {
    padding-left: 3.3%;
    padding-right: 3.3%
  }
}

@media (max-width: 22.4375em) {
  .lip-list .thumb {
    width: 120px
  }
}

.lip {
  position: relative;
  backface-visibility: hidden;
  transform-origin: 10% 50%;
  z-index: 1
}

.lip-move {
  transition: all 600ms ease-in-out 50ms
}

.lip-enter-active {
  transition: all 300ms ease-out
}

.lip-leave-active {
  transition: all 200ms ease-in;
  position: absolute;
  z-index: 0
}

.lip-enter,
.lip-leave-to {
  opacity: 0
}

.lip-enter {
  transform: scale(0.9)
}

.tips-list {
  border-top: 1px solid #e5e5e5;
  font-size: 0rem
}

.tips-list .item {
  position: relative;
  z-index: 10;
  padding: 20px;
  border-bottom: 1px solid #e5e5e5
}

.tips-list .item.item--large .thumb {
  width: 100%;
  padding-bottom: 56.19565%
}

.tips-list .item.item--large .cont {
  display: inline-block;
  vertical-align: middle;
  padding-top: 6.52174%;
  padding-left: 0;
  width: 56.25%
}

.tips-list .item.item--large .prod {
  display: inline-block;
  vertical-align: middle;
  position: static;
  width: 41.25%;
  text-align: right
}

.tips-list .item.item--large dt {
  font-size: 1.8rem;
  line-height: 1.6
}

.tips-list .item.item--large dt [lang="en"],
.tips-list .item.item--large dt[lang="en"] {
  font-size: 1.6rem
}

.tips-list .item.item--large dd {
  color: #000;
  font-size: 1.8rem
}

.tips-list .item:last-child {
  padding-bottom: 60px
}

.tips-list .item .is-active .thumb--video:after {
  opacity: 1
}

.tips-list .thumb {
  overflow: hidden;
  position: relative;
  z-index: 10;
  display: inline-block;
  width: 58.75%;
  height: 0;
  padding-bottom: 32.8125%;
  vertical-align: middle
}

.tips-list .thumb:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  width: 0%;
  height: 100%;
  margin: auto;
  background-color: #46166b;
  mix-blend-mode: overlay;
  opacity: 0.2;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -moz-transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -ms-transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1)
}

.tips-list .thumb .thumb-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover
}

.tips-list .thumb.thumb--video:after {
  content: "\EA15";
  font-style: normal;
  font-weight: normal;
  font-family: "icon";
  position: absolute;
  left: 15px;
  bottom: 9px;
  z-index: 50;
  color: #fff;
  font-size: 2.3rem;
  opacity: 0;
  -webkit-transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1) .4s;
  -moz-transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1) .4s;
  -ms-transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1) .4s;
  -o-transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1) .4s;
  transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1) .4s
}

.tips-list .cont {
  display: inline-block;
  width: 41.25%;
  padding-left: 20px;
  vertical-align: middle;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box
}

.tips-list dt {
  color: #000;
  font-weight: bold;
  font-size: 1.8rem;
  line-height: 1.6;
  vertical-align: middle
}

.tips-list dt [lang="en"],
.tips-list dt[lang="en"] {
  font-size: 1.6rem
}

.tips-list dd {
  display: none;
  font-size: 1.6rem
}

.tips-list .prod {
  display: none
}

.tips-list a {
  overflow: hidden;
  display: block;
  position: relative;
  z-index: 1
}

.tips-list a:hover .thumb:before,
.tips-list a:focus .thumb:before {
  width: 100%
}

.tips-list a:hover dd,
.tips-list a:focus dd {
  text-decoration: underline
}

@media (min-width: 45em) {
  .tips-list {
    border-top: 0;
    margin: 0 8.48375%
  }

  .tips-list .item {
    padding-left: 0;
    padding-right: 0
  }

  .tips-list .item:first-child {
    padding-top: 0
  }

  .tips-list .thumb {
    width: 45.65217%;
    padding-bottom: 25.65217%
  }

  .tips-list .cont {
    position: static;
    z-index: auto;
    zoom: 1;
    width: 54.34783%;
    padding-left: 30px
  }

  .tips-list .cont:before {
    content: '';
    display: block
  }

  .tips-list .cont:after {
    content: '';
    display: table;
    clear: both
  }

  .tips-list dt {
    font-size: 2.4rem;
    line-height: 1.3
  }

  .tips-list dt [lang="en"],
  .tips-list dt[lang="en"] {
    font-size: 2.0rem
  }

  .tips-list dd {
    display: block;
    max-height: 72px;
    margin-top: 15px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    word-wrap: normal
  }
}

@media (min-width: 60em) {
  .tips-list {
    overflow: hidden
  }

  .tips-list:before,
  .tips-list:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-repeat: no-repeat
  }

  .tips-list:before {
    left: inherit;
    right: 800px;
    width: 900px;
    margin: auto;
    background-image: url("../image/trend/tips/bg-01.jpg");
    background-position: 0% 0%
  }

  .tips-list:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("../image/trend/tips/bg-02.jpg");
    background-position: 1400px center
  }

  .tips-list .item:nth-child(odd) .cont {
    padding-right: 0;
    padding-left: 22.28261%
  }

  .tips-list .item:nth-child(odd) .prod {
    left: 48.91304%;
    right: inherit
  }

  .tips-list .item.item--large .thumb {
    width: 100%;
    padding-bottom: 56.19565%
  }

  .tips-list .item.item--large .cont {
    vertical-align: top;
    padding-top: 6.52174%;
    padding-left: 0;
    padding-right: 16.30435%;
    width: 81.73913%
  }

  .tips-list .item.item--large .prod {
    width: 18.26087%
  }

  .tips-list .item.item--large dt {
    font-size: 3.4rem;
    line-height: 1.3
  }

  .tips-list .item.item--large dt [lang="en"],
  .tips-list .item.item--large dt[lang="en"] {
    font-size: 2.6rem
  }

  .tips-list .item.item--large dd {
    color: #000;
    font-size: 1.8rem
  }

  .tips-list .thumb.thumb--video:after {
    left: 30px;
    bottom: 20px;
    font-size: 5rem
  }

  .tips-list .cont {
    padding-right: 22.28261%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box
  }

  .tips-list .prod {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 18.26087%
  }

  .tips-section {
    position: relative
  }
}

@media (min-width: 80em) {
  .tips-list .item {
    padding-top: 40px;
    padding-bottom: 40px
  }
}

@media (min-width: 100em) {
  .tips-list:before {
    left: 0;
    right: 50%;
    width: auto
  }
}

.tips-article .l-layout {
  overflow: hidden
}

.tips-cover {
  margin-top: 25px;
  margin-bottom: 0
}

.tips-cover .thumb {
  margin-bottom: 25px;
  scrollbar-face-color: #999;
  scrollbar-arrow-color: #999;
  scrollbar-track-color: #d9d9d9
}

.tips-cover .thumb ::-webkit-scrollbar {
  width: 10px;
  height: 10px
}

.tips-cover .thumb ::-webkit-scrollbar-thumb {
  background: #999
}

.tips-cover .thumb ::-webkit-scrollbar-track {
  background: #d9d9d9
}

.tips-cover .yt-player {
  display: block;
  position: relative
}

.tips-cover .yt-player:after {
  content: "\EA15";
  font-style: normal;
  font-weight: normal;
  font-family: "icon";
  position: absolute;
  left: 15px;
  bottom: 9px;
  color: #fff;
  font-size: 2.3rem
}

.tips-cover .yt-player:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  width: 0%;
  height: 100%;
  margin: auto;
  background-color: #46166b;
  mix-blend-mode: overlay;
  opacity: 0.2;
  -webkit-transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -moz-transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -ms-transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1)
}

.tips-cover .yt-player:hover:before,
.tips-cover .yt-player:focus:before {
  width: 100%
}

.tips-cover .caption:after {
  content: 'HERA';
  display: block;
  margin-top: 20px
}

.tips-cover .h {
  font-size: 1.8rem;
  line-height: 1.6
}

.tips-cover .h [lang="en"],
.tips-cover .h[lang="en"] {
  font-size: 1.6rem
}

.tips-hash {
  color: #333
}

.tips-hash li:before {
  content: '#';
  display: inline-block;
  margin-right: 3px
}

.tips-product {
  margin: 55px -12.5%;
  padding: 35px;
  border: 10px solid #e5e5e5;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 0rem
}

.tips-product .cell {
  display: inline-block;
  width: 50%;
  max-width: 250px;
  padding-left: 5px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  vertical-align: middle;
  text-align: center;
  font-size: 1.6rem
}

.tips-product .cell:first-child {
  max-width: none;
  padding: 0 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box
}

.tips-product .cell .p {
  display: none
}

.tips-product .cell .colorchip {
  zoom: 1
}

.tips-product .cell .colorchip:before {
  content: '';
  display: block
}

.tips-product .cell .colorchip:after {
  content: '';
  display: table;
  clear: both
}

.tips-product .cell .colorchip-name {
  display: inline-block;
  margin-left: 5px;
  color: #767676;
  font-size: 1.4rem;
  vertical-align: middle
}

.tips-product .cell .colorchip-block {
  display: table;
  float: left;
  table-layout: fixed;
  position: relative;
  top: 3px;
  width: 23px;
  height: 23px
}

.tips-product .cell .colorchip-block.is-quadruple span {
  display: block;
  float: left;
  width: 50%;
  height: 50%
}

.tips-product .cell .colorchip-block span {
  display: table-cell;
  height: 100%;
  width: 100%
}

.tips-product .cell .btn {
  margin-top: 5px
}

.tips-product .cell dl {
  margin-top: -15px;
  text-align: left
}

.tips-product .cell dt {
  color: #000;
  word-break: keep-all;
  word-wrap: break-word;
  font-weight: bold;
  font-size: 1.8rem;
  line-height: 1.6
}

.tips-product .cell dt [lang="en"],
.tips-product .cell dt[lang="en"] {
  font-size: 1.6rem
}

.tips-product .cell dd {
  margin-top: 10px
}

@media (min-width: 60em) {
  .tips-section.view {
    margin: 0 8.48375%
  }

  .tips-section.view .page-share {
    margin: 50px 95px
  }

  .tips-section.view .page-latest {
    margin-top: 10.86957%
  }

  .tips-cover .thumb {
    margin-bottom: 55px
  }

  .tips-cover .yt-player:after {
    left: 40px;
    bottom: 25px;
    font-size: 5rem
  }

  .tips-cover .h {
    color: #000;
    font-size: 2.4rem;
    line-height: 1.3
  }

  .tips-cover .h [lang="en"],
  .tips-cover .h[lang="en"] {
    font-size: 2.0rem
  }

  .tips-cover img {
    width: 100%
  }

  .tips-product {
    margin-left: 0;
    margin-right: 0;
    padding-bottom: 25px;
    border-color: #f2f2f2
  }

  .tips-product .cell:first-child img {
    max-width: 188px;
    margin: auto
  }

  .tips-product .cell .p {
    display: block;
    margin: 0;
    margin-top: 7px
  }

  .tips-product .cell .btn {
    margin-top: 15px
  }

  .tips-product .cell .colorchip {
    margin-top: 10px
  }

  .tips-product .cell dl {
    margin-top: -10px
  }

  .tips-product .cell dt {
    margin-top: 0
  }

  .tips-product .cell dd {
    margin-top: 7px
  }
}

@media (max-width: 59.99em) {
  .tips-article .page-header {
    display: none
  }
}

.look-list {
  zoom: 1;
  margin-left: -5px;
  margin-right: -5px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e5e5e5
}

.look-list:before {
  content: '';
  display: block
}

.look-list:after {
  content: '';
  display: table;
  clear: both
}

.look-list li {
  float: left;
  width: 50%;
  margin-bottom: 40px
}

.look-list-item {
  display: block;
  overflow: hidden;
  position: relative;
  margin-left: 5px;
  margin-right: 5px
}

.look-list-item:hover,
.look-list-item:focus {
  color: #fff;
  text-decoration: underline
}

.look-list-item:hover .thumb:before,
.look-list-item:focus .thumb:before {
  width: 100%
}

.look-list .info {
  padding: 10px 20px 10px;
  background-color: #000;
  color: #fff
}

.look-list .category {
  color: #d9d9d9;
  font-weight: 100
}

.look-list .thumb {
  overflow: hidden;
  position: relative;
  height: 0;
  padding-bottom: 129.77528%
}

.look-list .thumb:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  width: 0%;
  height: 100%;
  margin: auto;
  background-color: #46166b;
  mix-blend-mode: overlay;
  opacity: 0.2;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -moz-transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -ms-transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1)
}

.look-list .thumb-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover
}

.look-list p {
  margin: 0;
  font-size: 1.4rem
}

@media (min-width: 45em) {
  .look-list li {
    width: 33.33333%
  }
}

@media (min-width: 60em) {
  .look-list {
    margin-left: -10px;
    margin-right: -10px
  }

  .look-list-item {
    margin-left: 10px;
    margin-right: 10px
  }

  .look-list .info {
    padding-top: 18px;
    padding-bottom: 22px
  }

  .look-list p {
    display: block;
    height: 24px;
    margin-top: 5px;
    font-size: 1.8rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    word-wrap: normal
  }
}

@media (max-width: 59.99em) {
  .look-list .category {
    display: none
  }

  .look-list p {
    height: 38px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    word-wrap: normal;
    line-height: 1.4
  }
}

@media (max-width: 24.99em) {
  .look-list+.pagination {
    margin-left: -20px;
    margin-right: -20px
  }
}

.used-with {
  position: relative;
  margin-bottom: 5rem
}

.used-with-h {
  padding-bottom: 5px;
  margin-bottom: 20px;
  border-bottom: 1px solid #e5e5e5;
  color: #000;
  font-size: 1.8rem;
  line-height: 1.6
}

.used-with-h [lang="en"],
.used-with-h[lang="en"] {
  font-size: 1.6rem
}

.used-with-slider {
  margin: 0 -5px;
  text-align: center
}

.used-with-item {
  padding: 1px 5px;
  outline: 0 none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box
}

.used-with .thumb {
  margin: 0 11.11111%
}

.used-with p {
  height: 50px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  word-wrap: normal;
  word-break: keep-all;
  word-wrap: break-word
}

.used-with img {
  display: inline-block;
  vertical-align: middle
}

.used-with .slick-arrow {
  overflow: hidden;
  position: absolute;
  top: 50%;
  z-index: 10;
  width: 28px;
  font-size: 0;
  padding: 0;
  color: transparent;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align: center
}

.used-with .slick-arrow:before {
  display: inline-block;
  color: #666;
  font-size: 2.8rem;
  line-height: 2.8;
  font-size: 1.5rem
}

.used-with .slick-arrow.slick-disabled {
  opacity: 0.5
}

.used-with .slick-prev {
  left: -15px
}

.used-with .slick-prev:before {
  content: "\EA04";
  font-style: normal;
  font-weight: normal;
  font-family: "icon"
}

.used-with .slick-next {
  right: -15px
}

.used-with .slick-next:before {
  content: "\EA05";
  font-style: normal;
  font-weight: normal;
  font-family: "icon"
}

.used-with .slick-dots {
  margin-top: 20px
}

.used-with .slick-dots li {
  display: inline-block;
  vertical-align: middle
}

.used-with .slick-dots button {
  overflow: hidden;
  position: relative;
  color: transparent;
  width: 15px;
  height: 15px;
  padding: 0;
  margin: 0 2px
}

.used-with .slick-dots button:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 10px;
  height: 10px;
  margin: auto;
  border: 1px solid #222;
  border-radius: 50%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box
}

.used-with .slick-dots .slick-active button:after {
  background-color: #222
}

@media (min-width: 60em) {
  .used-with .slick-arrow:before {
    font-size: 2.8rem
  }

  .used-with .slick-arrow .slick-prev {
    left: 30px
  }

  .used-with .slick-arrow .slick-next {
    right: 30px
  }
}

@media (min-width: 80em) {
  .used-with {
    padding-left: 10.21739%;
    padding-right: 10.21739%;
    margin-bottom: 10rem
  }

  .used-with .thumb {
    margin-left: 0;
    margin-right: 0
  }
}

.boutique .shift {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

.boutique .title {
  overflow: hidden;
  position: relative;
  height: 200px
}

.boutique .title-bg {
  position: absolute;
  height: 0;
  width: 100%;
  padding-bottom: 100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover
}

.boutique .title .h {
  padding: 90px 0;
  text-align: center;
  font-size: 2.4rem;
  color: #fff
}

.boutique .tit {
  position: relative;
  margin: 32px 0;
  text-align: center;
  font-size: 1.8rem;
  font-weight: bold
}

.boutique .tit span {
  position: relative;
  display: inline-block;
  padding: 0 20px;
  color: #000;
  background: #fff
}

.boutique .tit:before {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  width: 100%;
  height: 1px;
  content: '';
  background: #000
}

.boutique .line-box {
  margin-bottom: 40px;
  padding: 28px 5.55556%;
  border: 8px solid #f2f2f2;
  border-width: 8px 0 8px 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  word-break: keep-all;
  word-wrap: break-word
}

.boutique .line-box .indent {
  margin-left: 10px;
  text-indent: -10px
}

.boutique .gray-box {
  padding: 20px 25px;
  font-size: 1.4rem;
  background: #f6f6f6;
  margin-left: 5.55556%;
  margin-right: 5.55556%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  word-break: keep-all;
  word-wrap: break-word
}

.boutique .gray-box li {
  margin-left: 10px;
  line-height: 1.8;
  text-indent: -10px
}

.boutique .pagination+.gray-box {
  margin-top: 40px
}

.boutique-func {
  padding: 30px 0;
  text-align: center
}

@media (min-width: 45em) {
  .boutique .title {
    height: 320px
  }

  .boutique .title-bg {
    background-size: auto
  }

  .boutique .title .h {
    padding: 140px 0;
    font-size: 4rem
  }

  .boutique .tit {
    font-size: 2.4rem
  }

  .boutique .tit br {
    display: none
  }

  .boutique .line-box {
    padding: 50px 10.21739%;
    border-width: 8px
  }

  .boutique .gray-box {
    margin-right: 0;
    margin-left: 0;
    padding: 30px
  }

  .boutique-func {
    padding: 60px 0 30px
  }
}

.boutique--waxing .title-bg {
  background-image: url(../image/boutique/bg-title-waxing.jpg)
}

.boutique--makeup .title-bg {
  background-image: url(../image/boutique/bg-title-makeup.jpg)
}

.boutique--school .title-bg {
  background-image: url(../image/boutique/bg-title-school.jpg)
}

.boutique--complete .title-bg {
  background-image: url(../image/boutique/bg-title-complete.jpg)
}

.boutique .location {
  position: relative
}

.boutique .location .map-canvas {
  height: 400px
}

.boutique .location-toggle {
  width: 100%;
  padding: 10px 0;
  text-align: center;
  font-size: 1.8rem;
  font-weight: bold;
  color: #000;
  background: #f6f6f6;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box
}

.boutique .location-toggle span {
  position: relative
}

.boutique .location-toggle:after {
  content: "\EA01";
  font-style: normal;
  font-weight: normal;
  font-family: "icon";
  margin-left: 10px;
  font-size: 16px
}

.boutique .location.is-active .location-toggle:after {
  content: "\EA06";
  font-style: normal;
  font-weight: normal;
  font-family: "icon"
}

.boutique .location-txt {
  position: absolute;
  z-index: 10;
  top: 20px;
  right: 0;
  left: 0;
  padding: 20px;
  font-size: 1.4rem;
  background: #fff;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box
}

.boutique .location-txt dt,
.boutique .location-txt dd {
  margin-top: 10px
}

.boutique .location-txt dt:first-child,
.boutique .location-txt dd:first-child {
  margin-top: 0
}

.boutique .location-txt dt {
  display: inline-block;
  width: 60px;
  font-weight: bold;
  color: #000
}

.boutique .location-txt dd {
  width: 100%;
  margin-top: -1.5em;
  padding-left: 60px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box
}

@media (min-width: 45em) {
  .boutique .location .map-canvas {
    height: 500px
  }

  .boutique .location-txt {
    top: 100px;
    right: auto;
    width: 260px;
    padding: 40px 30px
  }

  .boutique .location-txt dt {
    width: 100%;
    margin-top: 30px
  }

  .boutique .location-txt dd {
    margin-top: 0;
    padding-left: 0
  }
}

.boutique .section-header {
  margin-bottom: 20px;
  text-align: center;
  color: #000;
  word-break: keep-all;
  word-wrap: break-word
}

.boutique .section-h {
  font-size: 2.4rem
}

@media (min-width: 45em) {
  .boutique .section-header {
    margin-bottom: 50px
  }

  .boutique .section-h {
    font-size: 3.4rem
  }

  .boutique .section-p {
    font-size: 1.8rem
  }
}

.boutique-cover {
  position: relative;
  overflow: hidden;
  height: 100vh;
  margin-top: -60px
}

.boutique-cover+.location {
  z-index: 40;
  margin-top: -40px
}

@media (min-width: 60em) {
  .boutique-cover {
    margin-top: -146px
  }
}

.boutique .cover-intro {
  z-index: 50;
  background: #121212;
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0
}

.no-flexbox .boutique .cover-intro {
  display: block
}

.no-flexbox .boutique .cover-intro .cover-logo {
  padding-top: 20%
}

.boutique .cover-logo {
  display: block;
  width: 268px;
  margin: 0 auto;
  font-size: 0rem;
  color: #fff
}

.boutique .cover-logo-img path {
  fill: #fff
}

.boutique .cover-cont {
  z-index: 20;
  text-align: center;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  word-break: keep-all;
  word-wrap: break-word
}

.no-flexbox .boutique .cover-cont {
  display: table;
  width: 100%;
  height: 100%
}

.no-flexbox .boutique .cover-cont .cover-text {
  display: table-cell;
  vertical-align: middle
}

.boutique .cover-visual {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20
}

.boutique .cover-visual .slide {
  height: 100vh;
  background-color: #000;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover
}

.boutique .cover-text {
  position: relative;
  z-index: 30
}

.boutique .cover-text .h {
  margin-right: -10px;
  margin-left: -10px;
  line-height: 1.2
}

.boutique .cover-text .h span,
.boutique .cover-text .h b {
  display: block
}

.boutique .cover-text .h span {
  margin-bottom: 5px;
  font-size: 2.0rem;
  font-weight: normal
}

.boutique .cover-text .h b {
  font-size: 3.2rem
}

.boutique .cover-scroll {
  position: absolute;
  z-index: 30;
  right: 0;
  bottom: 80px;
  left: 0;
  text-align: center
}

.boutique .cover-scroll-btn:after {
  content: "\EA01";
  font-style: normal;
  font-weight: normal;
  font-family: "icon";
  font-size: 33px;
  color: #fff
}

@media (max-width: 59.99em) and (orientation: landscape) {
  .boutique .cover-scroll {
    bottom: 35px
  }
}

@media (min-width: 45em) {
  .boutique .cover-logo {
    width: 446px
  }

  .boutique .cover-text .h {
    margin-right: -148px;
    margin-left: -148px
  }

  .boutique .cover-text .h span {
    margin-bottom: 0;
    font-size: 3.4rem
  }

  .boutique .cover-text .h b {
    font-size: 6.0rem
  }

  .boutique .cover-text .p {
    font-size: 1.8rem
  }
}

.boutique-service {
  padding-top: 40px
}

.boutique-service .item {
  margin-bottom: 40px;
  word-break: keep-all;
  word-wrap: break-word
}

.boutique-service .item-h {
  margin-top: 15px;
  margin-bottom: 15px;
  font-size: 1.8rem;
  font-weight: bold;
  color: #333
}

.boutique-service .item-h+p {
  margin-top: 0
}

.boutique-service .item-spec {
  font-size: 1.4rem
}

.boutique-service .item-spec b {
  display: inline-block;
  margin-right: 10px
}

.boutique-service .item-pic img {
  width: 100%
}

@media (min-width: 45em) {
  .boutique-service {
    padding-top: 100px;
    padding-bottom: 40px
  }

  .boutique-service .item {
    margin-bottom: 60px;
    text-align: center;
    display: flex;
    align-items: center
  }

  .boutique-service .item-h {
    margin-top: 0;
    font-size: 2.4rem;
    line-height: 1.3
  }

  .boutique-service .item-h [lang="en"],
  .boutique-service .item-h[lang="en"] {
    font-size: 2.0rem
  }

  .boutique-service .item-pic,
  .boutique-service .item-cont {
    flex-basis: 50%
  }

  .boutique-service .item-cont {
    padding: 0 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box
  }

  .boutique-service .item--right {
    flex-direction: row-reverse
  }

  .no-flexbox .boutique-service .item {
    zoom: 1
  }

  .no-flexbox .boutique-service .item:before {
    content: '';
    display: block
  }

  .no-flexbox .boutique-service .item:after {
    content: '';
    display: table;
    clear: both
  }

  .no-flexbox .boutique-service .item-pic,
  .no-flexbox .boutique-service .item-cont {
    float: left;
    width: 50%
  }

  .no-flexbox .boutique-service .item-cont {
    margin-top: 20px
  }

  .no-flexbox .boutique-service .item--right .item-pic {
    float: right
  }
}

@media (min-width: 60em) {
  .boutique-service .item-cont {
    padding: 0 60px
  }
}

.boutique-school {
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #000;
  background-image: url(../image/boutique/bg-school.jpg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover
}

.boutique-school .section-header {
  color: #fff
}

.boutique-school .item {
  margin-top: 1px;
  padding: 18px 20px;
  background: #fff
}

.boutique-school .item-h {
  font-size: 1.6rem;
  font-weight: bold;
  color: #333
}

.boutique-school .item-p {
  margin: 5px 0 10px 0;
  font-size: 1.4rem
}

.boutique-school .item-more {
  font-size: 1.4rem;
  color: #000
}

.boutique-school .item-more:after {
  content: "\EA05";
  font-style: normal;
  font-weight: normal;
  font-family: "icon";
  margin-left: 5px;
  vertical-align: moddle;
  font-size: 10px;
  line-height: 1
}

@media (min-width: 45em) {
  .boutique-school {
    padding-top: 100px;
    padding-bottom: 100px
  }

  .boutique-school .item {
    position: relative;
    padding: 30px 37px
  }

  .boutique-school .item-h {
    position: absolute;
    top: 33px;
    left: 37px
  }

  .boutique-school .item-p {
    margin: 0;
    margin-left: 170px;
    font-size: 1.6rem
  }
}

@media (min-width: 80em) {
  .boutique-school .item-more {
    position: absolute;
    top: 33px;
    right: 37px
  }
}

.boutique-membership {
  margin-bottom: -60px;
  padding-top: 40px;
  padding-bottom: 60px;
  background: #f6f6f6
}

.boutique-membership .item {
  margin-bottom: 10px;
  padding: 30px 20px;
  background: #fff
}

.boutique-membership .item-h {
  margin-bottom: 10px;
  padding: 18px 0;
  font-size: 1.8rem;
  font-weight: bold;
  color: #333;
  border-bottom: 1px solid #e5e5e5
}

.boutique-membership .item-card {
  width: 225.6px;
  height: 142.4px;
  margin: 0 auto;
  text-align: center;
  font-size: 12px;
  letter-spacing: .2em;
  background-image: url(../image/boutique/membership-card.jpg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px
}

.boutique-membership .item-card span {
  display: inline-block;
  padding-top: 80px
}

.boutique-membership .item .dash-list {
  font-size: 1.4rem
}

.boutique-membership .item--regular .item-card {
  color: #d9d9d9
}

.boutique-membership .item--gold .item-card {
  color: #cdb828
}

.boutique-membership .item--purple .item-card {
  color: #ed91f5
}

@media (min-width: 35em) {
  .boutique-membership .item-card {
    width: 282px;
    height: 178px
  }

  .boutique-membership .item-card span {
    padding-top: 95px
  }
}

@media (min-width: 60em) {
  .boutique-membership {
    padding-top: 100px
  }

  .boutique-membership .item-wrap {
    display: flex;
    justify-content: space-around
  }

  .no-flexbox .boutique-membership .item-wrap {
    display: table;
    width: 100%;
    border-spacing: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box
  }

  .no-flexbox .boutique-membership .item-wrap .item {
    display: table-cell
  }

  .boutique-membership .item {
    width: 33.33333%;
    margin-right: 10px;
    margin-left: 10px;
    padding: 40px 37px;
    flex-basis: 33.33333%
  }

  .boutique-membership .item-card {
    width: 225.6px;
    height: 142.4px
  }

  .boutique-membership .item-card span {
    padding-top: 80px
  }
}

@media (min-width: 80em) {
  .boutique-membership .item-card {
    width: 282px;
    height: 178px
  }

  .boutique-membership .item-card span {
    padding-top: 95px
  }
}

.boutique-artist {
  max-width: 1920px;
  margin: 0 auto
}

.boutique-artist {
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #000;
  background-image: url(../image/boutique/bg-artist.jpg);
  background-repeat: no-repeat;
  background-position: top center
}

.boutique-artist .section-header {
  color: #fff
}

.boutique-artist .slick-arrow {
  position: absolute;
  z-index: 10;
  top: 50%;
  overflow: hidden;
  width: 45px;
  height: 45px;
  padding: 0;
  font-size: 0
}

.boutique-artist .slick-arrow:before {
  display: block;
  font-size: 40px;
  color: #999
}

.boutique-artist .slick-arrow:hover:before,
.boutique-artist .slick-arrow:focus:before {
  color: #fff
}

.boutique-artist .slick-prev {
  left: 10px
}

.boutique-artist .slick-prev:before {
  content: "\EA04";
  font-style: normal;
  font-weight: normal;
  font-family: "icon"
}

.boutique-artist .slick-next {
  right: 10px
}

.boutique-artist .slick-next:before {
  content: "\EA05";
  font-style: normal;
  font-weight: normal;
  font-family: "icon"
}

.boutique-artist .slick-slide {
  outline: 0
}

.boutique-artist .slick-dots {
  position: absolute;
  right: 0;
  left: 0;
  top: -60px;
  text-align: center
}

.boutique-artist .slick-dots li {
  position: relative;
  display: inline-block;
  margin: 0 9px;
  padding: 0;
  padding-bottom: 8px
}

.boutique-artist .slick-dots li button {
  position: relative;
  color: #fff;
  padding: 0
}

.boutique-artist .slick-dots li:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 0;
  height: 3px;
  background: #fff;
  -webkit-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -moz-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -ms-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -o-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1)
}

.no-touchevents .boutique-artist .slick-dots li:hover:after,
.no-touchevents .boutique-artist .slick-dots li:focus:after {
  width: 100%
}

.boutique-artist .slick-dots li.slick-active:after {
  width: 100%
}

.boutique-artist .slick-dots li:first-child {
  margin-left: 0
}

.boutique-artist .slick-dots li:last-child {
  margin-right: 0
}

.boutique-artist .slider {
  position: relative;
  margin-top: 79px;
  margin-right: 5.55556%;
  margin-left: 5.55556%
}

.boutique-artist .slide-spacer {
  position: relative;
  padding: 18px 20px 38px;
  background: #fff;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  word-break: keep-all;
  word-wrap: break-word
}

.boutique-artist .slide-pic {
  margin-bottom: 30px;
  text-align: center
}

.boutique-artist .slide-pic img {
  display: inline-block
}

.boutique-artist .slide-cont p {
  min-height: 72px
}

.boutique-artist .slide-h {
  font-size: 1.6rem;
  font-weight: normal;
  color: #333
}

.boutique-artist .slide-h b {
  font-size: 1.8rem;
  font-weight: bold
}

.boutique-artist .slide-p {
  color: #333
}

.boutique-artist .slide-history {
  margin-bottom: 20px
}

.boutique-artist .slide-toggle {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px 0;
  text-align: center;
  font-size: 1.4rem;
  color: #000;
  border-top: 1px solid #e5e5e5;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box
}

.boutique-artist .slide-toggle:after {
  content: "\EA01";
  font-style: normal;
  font-weight: normal;
  font-family: "icon";
  margin-left: 10px;
  font-size: 14px
}

.boutique-artist .slide .is-active .slide-toggle:after {
  content: "\EA06";
  font-style: normal;
  font-weight: normal;
  font-family: "icon"
}

.boutique-artist .slide .dash-list {
  font-size: 1.4rem
}

@media (min-width: 45em) {
  .boutique-artist .section-header {
    margin-bottom: 25px
  }
}

@media (min-width: 60em) {
  .boutique-artist {
    padding-top: 100px;
    padding-bottom: 100px
  }

  .boutique-artist .slick-arrow {
    left: 50%
  }

  .boutique-artist .slick-prev {
    margin-left: -550px
  }

  .boutique-artist .slick-next {
    margin-left: 505px
  }

  .boutique-artist .slick-dots {
    top: -73px
  }

  .boutique-artist .slick-dots li {
    margin: 0 20px;
    font-size: 1.8rem
  }

  .boutique-artist .slider {
    margin-top: 95px;
    margin-right: 0;
    margin-left: 0
  }

  .boutique-artist .slide-spacer {
    max-width: 920px;
    min-width: 920px;
    margin: 0 auto;
    padding: 0;
    zoom: 1
  }

  .boutique-artist .slide-spacer:before {
    content: '';
    display: block
  }

  .boutique-artist .slide-spacer:after {
    content: '';
    display: table;
    clear: both
  }

  .boutique-artist .slide-pic,
  .boutique-artist .slide-cont {
    float: left;
    width: 50%
  }

  .boutique-artist .slide-pic {
    margin-bottom: 0
  }

  .boutique-artist .slide-cont {
    padding: 100px 74px 0 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box
  }

  .boutique-artist .slide-cont p {
    min-height: auto
  }

  .boutique-artist .slide-history {
    display: block !important;
    margin-bottom: 0
  }

  .boutique-artist .slide-toggle {
    display: none
  }

  .boutique-artist .slick--prev .slide-pic {
    float: right
  }

  .boutique-artist .slick-slide .slide-spacer:before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: '';
    background: #000;
    opacity: .7;
    z-index: 10;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out
  }

  .boutique-artist .slick-slide .slide-spacer.is-current:before {
    opacity: 0
  }

  .boutique-artist .slick-slide.slick-center .slide-spacer:before {
    opacity: 0
  }
}

.boutique .program {
  padding: 40px 0;
  word-break: keep-all;
  word-wrap: break-word
}

.boutique .program img {
  width: 100%
}

.boutique .program-h {
  margin-top: 1em;
  font-weight: bold;
  color: #333;
  font-size: 1.8rem
}

.boutique .program-txt {
  margin-bottom: 30px
}

.boutique .program-spec .bar {
  position: relative;
  top: 1px;
  display: inline-block;
  width: 1px;
  height: 14px;
  margin: 0 5px;
  background-color: #e5e5e5
}

.boutique .program-spec dt {
  margin-top: 1em;
  font-weight: bold;
  color: #333
}

.boutique .program-curriculum {
  padding-top: 30px
}

.boutique .program-curriculum .table {
  margin-bottom: 10px
}

.boutique .program-curriculum .table ul {
  margin-top: -5px
}

.boutique .program-curriculum .table ul li {
  margin-top: 5px
}

.boutique .program-curriculum .table ul strong {
  margin-right: 10px
}

.boutique .program-func {
  text-align: center
}

.boutique .program-noti {
  font-size: 1.4rem;
  text-indent: -10px;
  margin-left: 10px
}

.boutique .program .label {
  background-color: #46166b;
  color: #fff;
  padding: 0 8px 1px
}

@media (min-width: 45em) {
  .boutique .program {
    padding: 80px 0
  }

  .boutique .program-wrap {
    position: relative;
    zoom: 1
  }

  .boutique .program-wrap:before {
    content: '';
    display: block
  }

  .boutique .program-wrap:after {
    content: '';
    display: table;
    clear: both
  }

  .boutique .program-img,
  .boutique .program-txt {
    float: left;
    width: 50%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box
  }

  .boutique .program-txt {
    padding-left: 40px
  }

  .boutique .program-txt p {
    margin-top: 0
  }

  .boutique .program-spec dt {
    display: inline-block;
    width: 80px
  }

  .boutique .program-spec dd {
    width: 100%;
    margin-top: -1.5em;
    padding-left: 80px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box
  }

  .boutique .program-curriculum {
    padding-top: 60px
  }

  .boutique .program-curriculum .table th {
    border-right: 0
  }

  .boutique .program-curriculum .table th+td {
    border-right: 1px solid #e5e5e5
  }
}

@media (min-width: 60em) {
  .boutique .program-func {
    text-align: right
  }
}

@media (min-width: 80em) {
  .boutique .program-func {
    position: absolute;
    right: 0;
    bottom: 0
  }
}

.boutique-review {
  margin-bottom: -60px;
  padding-top: 30px
}

.boutique-review .l-pad {
  position: relative;
  background-color: #fff
}

.boutique-review .comment-h {
  margin-bottom: 15px;
  font-size: 1.8rem;
  color: #000
}

.boutique-review .comment-h .total {
  font-weight: normal
}

@media (max-width: 44.99em) {
  .boutique-review .l-pad {
    padding-right: 0;
    padding-left: 0
  }
}

@media (min-width: 45em) {
  .boutique-review {
    padding: 100px 0;
    background-color: #000;
    background-image: url(../image/boutique/bg-review.jpg);
    background-repeat: no-repeat;
    background-position: top center
  }

  .boutique-review .comment-h {
    margin-bottom: 25px;
    font-size: 2.4rem
  }

  .boutique-review .comment-cate {
    position: absolute;
    top: 30px;
    right: 5.55556%
  }
}

@media (min-width: 60em) {
  .boutique-review .comment-cate {
    top: 50px;
    right: 10.21739%
  }
}

.boutique-write {
  min-height: 100vh;
  margin-bottom: -60px
}

.boutique-write .h {
  padding: 20px 0;
  text-align: center;
  font-size: 2.4rem;
  line-height: 1;
  color: #000;
  background: #f6f6f6
}

.boutique-write .review-box {
  padding: 30px 20px;
  background: #fff
}

.boutique-write .review-func {
  padding: 25px 0;
  text-align: center
}

.boutique-write .item {
  margin: 10px 0
}

.boutique-write .item input {
  width: 100%
}

.boutique-write .item--file {
  position: relative;
  overflow: hidden
}

.boutique-write .item--file [type="text"] {
  border: 1px solid #d9d9d9;
  background: #fff;
  color: #333;
  opacity: 1
}

.boutique-write .item--file [type='file'] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0 none
}

.boutique-write .item--file label {
  width: 100%;
  margin-top: 5px
}

.boutique-write .item--file .is-focus {
  outline: 1px dotted #ccc
}

.boutique-write .item--panel {
  position: relative;
  max-width: 50%
}

.boutique-write .item--panel .btn-delete {
  position: absolute;
  top: 0;
  left: 100%;
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-left: -30px;
  padding: 0;
  background-color: rgba(51, 51, 51, 0.8)
}

.boutique-write .item--panel .btn-delete:before {
  content: "\EA0B";
  font-style: normal;
  font-weight: normal;
  font-family: "icon";
  font-size: 15px;
  color: #fff
}

@media (min-width: 45em) {
  .boutique-write .h {
    padding: 40px 0;
    font-size: 4.0rem
  }

  .boutique-write .review-box {
    padding: 60px 95px
  }

  .boutique-write .item {
    margin: 10px 0
  }

  .boutique-write .item--file [type="text"] {
    width: calc(100% - 170px)
  }

  .boutique-write .item--file label {
    position: absolute;
    top: 0;
    right: 0;
    width: 160px;
    margin-top: 0
  }

  .boutique-write .item .error-dialog {
    display: block
  }
}

@media (min-width: 60em) {
  .boutique-write {
    background: #f6f6f6
  }
}

.boutique-apply .apply-h {
  margin-bottom: 15px;
  font-size: 1.6rem;
  font-weight: normal;
  color: #333
}

.boutique-apply .apply-step {
  margin-bottom: 40px
}

.boutique-apply .apply-toggle {
  position: relative;
  width: 100%;
  padding: 13px 5.55556%;
  text-align: left;
  color: #fff;
  background: #000;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box
}

.boutique-apply .apply-toggle:after {
  content: "\EA01";
  font-style: normal;
  font-weight: normal;
  font-family: "icon";
  position: absolute;
  top: 50%;
  right: 5.55556%;
  margin-top: -7px;
  font-size: 16px
}

.boutique-apply .apply-toggle span {
  position: relative
}

.boutique-apply .apply-toggle b {
  display: block;
  margin-bottom: 8px;
  font-size: 1.4rem;
  font-weight: bold
}

.boutique-apply .apply .is-active .apply-toggle:after {
  content: "\EA06";
  font-style: normal;
  font-weight: normal;
  font-family: "icon"
}

.boutique-apply .apply-calendar {
  position: relative;
  border: 1px solid #e5e5e5;
  border-width: 1px 0 1px 0
}

.boutique-apply .apply-day {
  padding: 15px 5.55556%;
  border-bottom: 1px solid #e5e5e5
}

.boutique-apply .apply-time {
  height: 100%;
  padding: 15px 5.55556%
}

.boutique-apply .apply-noti {
  text-align: center;
  padding: 28px 0
}

.boutique-apply .apply-noti .h {
  font-size: 1.8rem;
  color: #000
}

.boutique-apply .apply-noti p:first-child {
  margin-top: 0
}

.boutique-apply .apply-noti p:last-child {
  margin-bottom: 0
}

.boutique-apply .apply-noti strong {
  color: #000
}

.boutique-apply .apply-disablenoti {
  padding: 0 5.55556%;
  font-size: 1.4rem
}

.boutique-apply .apply-disablenoti:before {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-left: 3px;
  margin-right: 5px;
  content: '';
  vertical-align: top;
  border: 1px solid #e5e5e5;
  background: #f6f6f6
}

.boutique-apply .apply-box {
  padding: 28px 5.55556%;
  border: 1px solid #e5e5e5;
  border-width: 1px 0 1px 0
}

.boutique-apply .apply-box .row {
  margin: 0
}

.boutique-apply .apply-box .item {
  position: relative;
  padding: 5px 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box
}

.boutique-apply .apply-box .item-label {
  position: absolute;
  top: 15px;
  left: 0;
  width: 80px
}

.boutique-apply .apply-box .item-input {
  width: 80%;
  margin-left: 20%
}

.boutique-apply .apply-box .item input {
  width: 100%;
  min-width: 200px
}

.boutique-apply .apply-agree {
  margin-right: 5.55556%;
  margin-bottom: 40px;
  margin-left: 5.55556%;
  font-size: 1.4rem
}

.boutique-apply .apply-agree .apply-box {
  border-width: 1px
}

.boutique-apply .apply-agree li {
  margin-left: 10px;
  line-height: 1.8;
  text-indent: -10px
}

.boutique-apply .apply-chk {
  padding: 10px 5.55556%;
  color: #000;
  border: 1px solid #e5e5e5;
  border-top: 0;
  background: #f6f6f6
}

.boutique-apply .apply-chk label:before {
  font-size: 20px;
  color: #d9d9d9;
  background: #fff
}

.boutique-apply .apply-chk .error-dialog.has-error .msg {
  margin-top: 0
}

.boutique-apply .apply-func {
  margin-top: -10px;
  margin-bottom: 40px;
  text-align: center
}

.boutique-apply .apply .apply-box+.apply-agree {
  margin-top: 40px
}

@media (min-width: 45em) {
  .boutique-apply .txt {
    font-size: 1.8rem;
    margin-bottom: 0.5em
  }

  .boutique-apply .apply-toggle {
    padding: 16px 37px
  }

  .boutique-apply .apply-toggle b {
    display: inline-block;
    margin-bottom: 0;
    padding-right: 20px
  }

  .boutique-apply .apply-toggle:after {
    right: 37px
  }

  .boutique-apply .apply-calendar {
    border-width: 1px;
    display: flex;
    align-items: center
  }

  .boutique-apply .apply-day {
    width: 50%;
    padding: 15px 37px;
    border-right: 1px solid #e5e5e5;
    border-bottom: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box
  }

  .boutique-apply .apply-time {
    position: absolute;
    top: 55px;
    right: 0;
    width: 50%;
    padding: 15px 37px;
    border-bottom: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box
  }

  .boutique-apply .apply-noti {
    width: 100%;
    padding: 40px 0
  }

  .boutique-apply .apply .apply-day+.apply-noti {
    width: 50%;
    text-align: center
  }

  .no-flexbox .boutique-apply .apply .apply-day+.apply-noti {
    position: absolute;
    top: 55px;
    right: 0
  }

  .boutique-apply .apply-box {
    padding: 28px 37px;
    border-width: 1px
  }

  .boutique-apply .apply-box .col-6+.col-6 .item-label {
    margin-left: 20px
  }

  .boutique-apply .apply-box .col-12 .item-input {
    width: 90%;
    margin-left: 10%
  }

  .boutique-apply .apply-agree {
    margin-right: 0;
    margin-left: 0
  }

  .boutique-apply .apply-chk {
    padding: 15px 37px
  }
}

@media (min-width: 60em) {
  .boutique-apply .apply-disablenoti {
    padding-left: 0px
  }

  .boutique-apply .apply-disablenoti:before {
    margin-left: 0
  }
}

@media (max-width: 22.4375em) {
  .boutique-apply .apply-box .item-input {
    width: 70%;
    margin-left: 30%
  }

  .boutique-apply .apply-box .item-input input {
    min-width: 100%
  }
}

.boutique--complete .complete .line-box {
  padding: 0
}

.boutique--complete .complete-info {
  font-size: 1.6rem;
  padding: 15px 5.55556%;
  color: #666
}

.boutique--complete .complete-info p {
  position: relative;
  padding-left: 100px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box
}

.boutique--complete .complete-info strong {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  color: #333;
  width: 100px
}

.boutique--complete .complete-noti {
  padding: 15px 5.55556%;
  font-size: 1.6rem;
  font-weight: bold;
  border-top: 1px solid #e5e5e5;
  word-break: keep-all;
  word-wrap: break-word
}

.boutique--complete .complete-noti li {
  margin-left: 10px;
  text-indent: -10px
}

.boutique--complete .location {
  padding-top: 60px;
  margin-bottom: -60px
}

@media (min-width: 45em) {
  .boutique--complete .complete-info {
    font-size: 0;
    padding: 33px 10.21739%
  }

  .boutique--complete .complete-info p {
    font-size: 1.6rem;
    display: inline-block;
    width: 50%;
    margin: 10px 0
  }

  .boutique--complete .complete-info p.wide {
    width: 100%
  }

  .boutique--complete .complete-noti {
    padding: 20px 10.21739%
  }

  .boutique--complete .location {
    padding-top: 100px
  }
}

.steps {
  overflow: hidden;
  counter-reset: order
}

.steps li {
  position: relative;
  margin-top: 35px;
  padding-left: 55px;
  color: #333
}

.steps li:before {
  content: "step "counter(order);
  counter-increment: order;
  position: absolute;
  top: 3px;
  left: 0;
  color: #666;
  font-family: "Arita Heiti", "Montserrat", sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 14px
}

@media (min-width: 45em) {
  .steps .step-list li {
    padding-left: 75px
  }
}

.event-h3,
.event-h5 {
  color: #000;
  font-weight: bold
}

.event-h3 {
  text-align: center
}

.event-h4 {
  color: #333;
  text-align: center;
  font-weight: bold;
  font-size: 2.4rem;
  line-height: 1.3
}

.event-h4 [lang="en"],
.event-h4[lang="en"] {
  font-size: 2.0rem
}

.event-h5 {
  margin-bottom: 15px;
  font-size: 1.6rem
}

.event-section .p {
  color: #000;
  font-weight: bold;
  font-size: 1.8rem;
  line-height: 1.6
}

.event-section .p [lang="en"],
.event-section .p[lang="en"] {
  font-size: 1.6rem
}

.l-event {
  padding: 55px 5.55556% 60px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box
}

.event-content .l-event,
.event-apply .l-event {
  background-color: #fff
}

@media (min-width: 60em) {
  .l-event {
    padding-left: 10.21739%;
    padding-right: 10.21739%
  }
}

@media (max-width: 59.99em) {
  .event-process .l-event {
    padding-top: 40px;
    padding-bottom: 40px
  }
}

.event-list {
  margin-top: -60px;
  margin-bottom: 30px;
  padding-bottom: 60px;
  border-bottom: 1px solid #e5e5e5
}

.event-list .no-item {
  float: none;
  width: 100%;
  padding-top: 110px;
  padding-bottom: 60px;
  font-size: 1.8rem;
  text-align: center
}

.event-list .no-item:before {
  content: "\EA20";
  font-style: normal;
  font-weight: normal;
  font-family: "icon";
  display: block;
  color: #666;
  font-size: 3rem
}

.event-list .tag {
  display: inline-block;
  vertical-align: middle;
  min-width: 50px;
  height: 20px;
  margin-right: 10px;
  background-color: #999;
  color: #fff;
  font-size: 13px;
  line-height: 20px;
  text-align: center
}

.event-list .tag--on {
  background-color: #46166b
}

.event-list .label {
  padding: 0 8px 1px;
  border-color: transparent
}

.event-list .label--on {
  background-color: #46166b;
  color: #fff
}

.event-list .label--done {
  background-color: #999;
  color: #fff
}

.event-list .thumb {
  overflow: hidden;
  position: relative;
  padding-bottom: 100%
}

.event-list .thumb:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  width: 0%;
  height: 100%;
  margin: auto;
  background-color: #46166b;
  mix-blend-mode: overlay;
  opacity: 0.2;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -moz-transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -ms-transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1)
}

.event-list .thumb-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%
}

.event-list .cont {
  padding: 0 20px;
  margin-top: 15px;
  font-size: 1.4rem
}

.event-list .p {
  margin-top: 0;
  margin-bottom: 0;
  color: #000;
  font-weight: bold;
  font-size: 1.8rem;
  line-height: 1.6;
  line-height: 1.4;
  word-break: keep-all;
  word-wrap: break-word
}

.event-list .p [lang="en"],
.event-list .p[lang="en"] {
  font-size: 1.6rem
}

.event-list .date {
  margin-top: 5px
}

.event-list li {
  margin-top: 60px
}

.event-list a {
  overflow: hidden;
  position: relative;
  display: block
}

.event-list a:hover .thumb:before,
.event-list a:focus .thumb:before {
  width: 100%;
  height: 100%
}

.event-list a:hover .date,
.event-list a:focus .date {
  text-decoration: underline
}

.event-list--reduce {
  margin-top: -60px
}

@media (min-width: 35em) {
  .event-list {
    overflow: hidden;
    zoom: 1
  }

  .event-list:before {
    content: '';
    display: block
  }

  .event-list:after {
    content: '';
    display: table;
    clear: both
  }

  .event-list .p {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    word-wrap: normal;
    overflow: hidden;
    height: 28px
  }

  .event-list .cont {
    position: relative;
    border-left: 1px solid #e5e5e5
  }

  .event-list .label {
    margin-bottom: 8px
  }

  .event-list li {
    float: left;
    width: 50%
  }

  .event-list li:nth-child(odd) .cont {
    border-left: 0 none
  }

  .event-list--reduce {
    margin-top: -30px
  }

  .event-list--reduce li {
    float: none;
    width: 100%;
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid #e5e5e5
  }

  .event-list--reduce li:first-child {
    border-top: 0
  }

  .event-list--reduce .thumb {
    float: right;
    width: calc(50% - 10px);
    padding-bottom: 28.88087%
  }

  .event-list--reduce .cont {
    width: calc(50% - 10px);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    border-left: 0 none
  }

  .event-list--reduce .p {
    height: 51px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    word-wrap: normal
  }

  .event-list--reduce .date {
    margin-top: 2em
  }
}

@media (min-width: 60em) {
  .event-list .cont {
    padding: 0 40px 10px;
    margin-top: 25px;
    font-size: 1.6rem
  }

  .event-list .p {
    overflow: hidden;
    height: 35px;
    font-size: 2.4rem;
    line-height: 1.3
  }

  .event-list .p [lang="en"],
  .event-list .p[lang="en"] {
    font-size: 2.0rem
  }

  .event-list--reduce li:first-child {
    border-top: 1px solid #e5e5e5
  }

  .event-list--reduce .cont {
    padding-left: 0;
    padding-right: 15.16245%
  }

  .event-list--reduce .p {
    height: 64px
  }

  .event-list--reduce .date {
    margin-top: 5.5em
  }

  .event-list--extend .thumb {
    padding-bottom: 100%
  }

  .event-list--extend .cont {
    padding-left: 30px;
    padding-right: 30px
  }

  .event-list--extend .p {
    height: 25px;
    font-size: 1.8rem
  }

  .event-list--extend .date {
    margin-top: 10px
  }
}

@media (min-width: 80em) {
  .event-list--extend {
    margin-left: -10px;
    margin-right: -10px
  }

  .event-list--extend li {
    width: 33.33333%
  }

  .event-list--extend a {
    margin-left: 10px;
    margin-right: 10px
  }

  .event-list--extend .cont {
    margin-left: -11px;
    margin-right: -11px
  }

  .event-list--reduce .cont {
    margin-top: 55px
  }
}

@media (max-width: 59.99em) {
  .event-ing .event-header>* {
    margin: 0
  }

  .event-ing .event-header .dropdown {
    font-size: 1.6rem
  }
}

@media (max-width: 34.99em) {
  .event-list .label {
    top: 20px;
    left: 20px;
    margin-bottom: 10px
  }
}

.event-section {
  padding-bottom: 60px;
  margin-bottom: -60px;
  background-color: #f6f6f6
}

.event-section .h {
  color: #333;
  font-size: 2.4rem;
  line-height: 1.3;
  text-align: center
}

.event-section .h [lang="en"],
.event-section .h[lang="en"] {
  font-size: 2.0rem
}

.event-process .event-share {
  margin-top: 15px;
  text-align: center
}

.event-process-exp .line {
  display: none
}

.event-process-exp .gift-box {
  max-width: 133px;
  margin: 30px auto;
  padding: 15px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #fff;
  text-align: center
}

.event-process-exp .dash-list {
  color: #666;
  font-size: 1.4rem
}

.event-process-exp p {
  margin-top: 15px;
  margin-bottom: 15px;
  color: #333
}

.event-result .winner {
  margin-left: -12.5%;
  margin-right: -12.5%;
  margin-bottom: -30px;
  padding: 60px 6.25%;
  background-color: #fff
}

.event-result .dash-list {
  color: #333
}

.event-result .table {
  background-color: #fff
}

.event-result .sub {
  margin-top: 10px;
  margin-bottom: 25px;
  color: #333;
  text-align: center;
  font-weight: bold;
  font-size: 1.8rem
}

.event-apply .l-pad {
  background-color: #fff
}

.event-apply .apply {
  position: relative;
  margin-top: 40px
}

.event-apply .apply .strong {
  position: absolute;
  left: 0;
  top: -20px
}

.event-apply .strong {
  display: block;
  color: #000
}

.event-apply .byte {
  display: block;
  margin: 10px 0 0;
  color: #767676;
  font-weight: 300;
  font-size: 1.4rem;
  word-break: keep-all;
  word-wrap: break-word
}

.event-apply .byte i {
  font-style: normal
}

.event-apply .no-apply {
  padding: 20px 15px;
  margin-top: 10px;
  background-color: #f6f6f6;
  text-align: center
}

.event-apply .pagination {
  margin-top: 30px
}

.event-apply .func {
  margin-top: 30px
}

.event-apply .textarea {
  min-height: 180px;
  margin-top: 10px;
  padding-top: 20px;
  padding-bottom: 20px
}

.event-apply .input--exp {
  min-height: 70px;
  margin-top: 10px
}

.event-apply textarea {
  width: 100%
}

.event-gift {
  margin-top: 30px;
  padding: 30px 12px;
  border: 8px solid #f2f2f2
}

.event-gift-cell:first-child {
  text-align: center
}

.event-gift-cell+.event-gift-cell {
  margin-top: 15px
}

.event-gift-cell p:first-child {
  margin-top: 0
}

.event-gift-cell p:last-child {
  margin-bottom: 0
}

.event-gift+.event-gift {
  margin-top: 20px
}

.event-gift ul,
.event-gift ol {
  margin-top: 10px
}

.event-gift ul li,
.event-gift ol li {
  margin-top: 5px
}

.event-func {
  margin-top: 30px;
  text-align: center
}

.event-func .btn {
  background-color: #fff
}

@media (min-width: 60em) {
  .event-process .event-share {
    text-align: left
  }

  .event-process .btn {
    background-color: #fff
  }

  .event-process .btn+.btn {
    margin-left: 5px
  }

  .event-process-exp {
    position: relative;
    padding-right: 228px
  }

  .event-process-exp .gift-box {
    position: absolute;
    right: 0;
    top: 0;
    margin: 0;
    max-width: 188px;
    width: 37.30159%
  }

  .event-process-exp .line {
    display: block;
    margin-top: 30px;
    margin-bottom: 30px;
    border-top: 0;
    border-bottom: 1px solid #d9d9d9
  }

  .event-process-exp p {
    margin-top: 30px;
    margin-bottom: 30px
  }

  .event-apply .apply {
    margin-top: 0;
    margin-bottom: 60px
  }

  .event-apply .apply .strong {
    position: static;
    left: 0;
    top: 0
  }

  .event-apply .byte {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0
  }

  .event-apply .textarea {
    height: auto;
    line-height: inherit
  }

  .event-apply .input--exp {
    min-height: 45px
  }

  .event-result .winner {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: -60px;
    padding: 0;
    background-color: transparent
  }

  .event-gift {
    display: table;
    width: 100%;
    margin-top: 40px;
    padding: 40px 35px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box
  }

  .event-gift-cell {
    display: table-cell;
    padding-left: 30px;
    vertical-align: middle
  }

  .event-gift-cell:first-child {
    min-width: 195px;
    padding: 0
  }

  .event-gift p+p {
    margin-top: 2rem
  }
}

@media (max-width: 59.99em) {
  .event-view .event-section .event-h3 {
    font-size: 2.4rem;
    line-height: 1.3
  }

  .event-view .event-section .event-h3 [lang="en"],
  .event-view .event-section .event-h3[lang="en"] {
    font-size: 2.0rem
  }

  .event-process {
    margin-left: 0;
    margin-right: 0
  }

  .event-process .l-pad {
    padding-top: 40px;
    padding-bottom: 40px
  }

  .event-process .steps .sns {
    padding: 0
  }

  .event-process .steps .sns:hover:after,
  .event-process .steps .sns:focus:after {
    color: #fff;
    background-color: #46166b
  }

  .event-process .steps .sns:after {
    display: inline-block;
    position: static;
    width: 45px;
    height: 45px;
    margin: 0 15px;
    border: 1px solid #d9d9d9;
    background-color: #fff;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 45px;
    text-align: center;
    font-size: 2rem
  }

  .event-process .steps .sns~.sns {
    margin-left: 0
  }

  .event-process .steps .sns-facebook:after {
    content: "\EA0E";
    font-style: normal;
    font-weight: normal;
    font-family: "icon"
  }

  .event-process .steps .sns-twitter:after {
    content: "\EA1D";
    font-style: normal;
    font-weight: normal;
    font-family: "icon"
  }

  .event-process .steps .sns-url:after {
    content: "\EA1E";
    font-style: normal;
    font-weight: normal;
    font-family: "icon"
  }

  .event-process .steps .sns span {
    display: none
  }

  .event-process .event-share {
    position: relative;
    left: -55px;
    margin-right: -55px
  }

  .event-apply {
    margin-left: 0;
    margin-right: 0
  }
}

@media (max-width: 22.4375em) {
  .event-result .winner-search input {
    min-width: auto
  }
}

.library-empty {
  padding-top: 110px;
  padding-bottom: 120px;
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  font-size: 1.8rem;
  text-align: center
}

.library-empty:before {
  content: "\EA20";
  font-style: normal;
  font-weight: normal;
  font-family: "icon";
  display: block;
  color: #666;
  font-size: 3rem
}

.library-list {
  overflow: hidden;
  position: relative;
  margin: 10px 15px 0;
  padding-bottom: 60px
}

.library-list:after {
  content: '';
  display: block;
  position: absolute;
  left: -15px;
  right: -15px;
  bottom: 0;
  border-bottom: 1px solid #e5e5e5
}

.library-list .thumb {
  overflow: hidden;
  position: relative
}

.library-list .thumb.thumb--video {
  position: relative
}

.library-list .thumb.thumb--video:before {
  content: "\EA15";
  font-style: normal;
  font-weight: normal;
  font-family: "icon";
  position: absolute;
  left: 10px;
  bottom: 5px;
  z-index: 5;
  color: #fff;
  font-size: 3rem;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all .6s cubic-bezier(0.645, 0.045, 0.355, 1);
  -moz-transition: all .6s cubic-bezier(0.645, 0.045, 0.355, 1);
  -ms-transition: all .6s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition: all .6s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all .6s cubic-bezier(0.645, 0.045, 0.355, 1)
}

.library-list .thumb img {
  width: 100%;
  -webkit-transition: all .6s cubic-bezier(0.645, 0.045, 0.355, 1);
  -moz-transition: all .6s cubic-bezier(0.645, 0.045, 0.355, 1);
  -ms-transition: all .6s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition: all .6s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all .6s cubic-bezier(0.645, 0.045, 0.355, 1)
}

.library-list .cont {
  padding: 0 7px;
  color: #000;
  text-align: center;
  font-size: 1.4rem
}

.library-list .p {
  max-height: 75px;
  margin: 10px 0;
  font-weight: bold;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  word-wrap: normal
}

.library-list .category {
  text-transform: uppercase;
  color: #767676
}

.library-list li {
  float: left;
  width: 50%;
  margin-top: 10px
}

.library-list a {
  display: block;
  margin: 0 5px;
  padding: 5px 5px 15px;
  border: 1px solid #e5e5e5;
  -webkit-transition: all .6s cubic-bezier(0.645, 0.045, 0.355, 1);
  -moz-transition: all .6s cubic-bezier(0.645, 0.045, 0.355, 1);
  -ms-transition: all .6s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition: all .6s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all .6s cubic-bezier(0.645, 0.045, 0.355, 1)
}

.library-list a:hover,
.library-list a:focus {
  border-color: #333;
  border-color: #46166b
}

.library-list a:hover .thumb:before,
.library-list a:focus .thumb:before {
  color: #46166b;
  -webkit-transform: scale(1.25);
  -moz-transform: scale(1.25);
  -ms-transform: scale(1.25);
  -o-transform: scale(1.25);
  transform: scale(1.25)
}

.library-list a:hover .thumb img,
.library-list a:focus .thumb img {
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -ms-transform: scale(1.05);
  -o-transform: scale(1.05);
  transform: scale(1.05)
}

.library-list p {
  margin: 0
}

.library-list.is-loading {
  min-height: 300px
}

.library-list.is-loading:before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  max-height: 800px;
  z-index: 10;
  background: #fff;
  background: -webkit-linear-gradient(bottom, #fff 20%, transparent 100%);
  background: -moz-linear-gradient(bottom, #fff 20%, transparent 100%);
  background: linear-gradient(bottom, #fff 20%, transparent 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff 20%', endColorstr='transparent 100%', GradientType=1)
}

.no-placeholder .library-list.is-loading:before {
  top: 0;
  max-height: 100%;
  opacity: 0.85
}

.library-list.is-loading:after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  margin-bottom: 150px;
  z-index: 15;
  background-image: url("../image/a/loading.gif");
  background-repeat: no-repeat;
  background-position: center bottom;
  border-bottom-color: transparent
}

@media (min-width: 45em) {
  .library-list:after {
    left: 5px;
    right: 5px
  }

  .library-list li {
    width: 33.33333%
  }
}

@media (min-width: 60em) {
  .library-list {
    margin: -20px -10px 0
  }

  .library-list:after {
    left: 10px;
    right: 10px
  }

  .library-list .thumb.thumb--video:before {
    left: 18px;
    bottom: 12px;
    font-size: 3.3rem
  }

  .library-list .p {
    margin-bottom: 5px;
    line-height: 1.8
  }

  .library-list li {
    width: 25%;
    margin-top: 20px
  }

  .library-list a {
    margin: 0 9px;
    padding: 10px
  }
}

.history-header {
  position: relative;
  padding: 85px 0;
  margin-bottom: 45px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center
}

.history-header .h {
  color: #fff;
  text-align: center;
  font-size: 2.4rem;
  line-height: 1.3
}

.history-header .h [lang="en"],
.history-header .h[lang="en"] {
  font-size: 2.0rem
}

.history-header .dropdown {
  position: absolute;
  right: 0;
  bottom: -45px;
  left: 0;
  color: #767676;
  font-family: "Arita Heiti", "Montserrat", sans-serif;
  font-size: 1.6rem
}

.history-header .dropdown.is-fixed {
  position: fixed;
  right: 0;
  bottom: auto;
  top: 60px;
  left: 0
}

.history-header .dropdown-selector {
  line-height: 4.3rem
}

.history-section {
  position: relative;
  padding: 20px 20px 35px 40px;
  color: #767676
}

.history-title {
  overflow: hidden;
  margin-bottom: 15px;
  color: #000;
  text-align: center;
  font-weight: bold
}

.history-title span {
  display: inline-block;
  padding: 15px;
  background-color: #fff
}

.history-timeline {
  position: absolute;
  top: 0;
  left: 20px;
  bottom: -60px;
  border-left: 1px solid #d9d9d9
}

.history-list {
  padding-bottom: 25px
}

.history-list>li {
  position: relative;
  padding-top: 35px;
  padding-bottom: 50px;
  font-size: 1.6rem
}

.history-list>li.no-image .thumb {
  padding-bottom: 0
}

.history-list>li:last-child {
  padding-bottom: 0
}

.history-list strong {
  display: block;
  margin: 10px 0;
  color: #666;
  font-weight: bold;
  word-break: keep-all;
  word-wrap: break-word
}

.history-list p,
.history-list ul {
  word-break: keep-all;
  word-wrap: break-word
}

.history-list .date {
  position: absolute;
  top: 0;
  left: 0;
  color: #000;
  font-weight: bold;
  font-size: 2rem
}

.history-list .date:before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: -20px;
  margin-top: -1px;
  border-top: 1px solid #d9d9d9;
  width: 9px
}

.history-list .date span {
  display: inline-block
}

@media (min-width: 45em) {
  .history-header {
    margin-bottom: 53px;
    padding: 135px 0
  }

  .history-header .h {
    font-size: 4rem
  }

  .history-header .dropdown {
    bottom: -54px;
    height: 54px;
    border-bottom: 1px solid #e5e5e5;
    cursor: default
  }

  .history-header .dropdown-selector {
    display: none
  }

  .history-header .dropdown-option {
    display: block !important;
    overflow: auto;
    position: relative;
    z-index: 0;
    top: 0;
    height: 54px;
    max-width: 658px;
    margin: auto;
    border: 0;
    box-shadow: none
  }

  .history-header .dropdown-option li {
    float: left;
    width: 20%;
    color: #767676
  }

  .history-header .dropdown-option li.is-active {
    background-color: #fff
  }

  .history-header .dropdown-option li.is-current {
    background-color: #fff
  }

  .history-header .dropdown-option li.is-current-year {
    color: #000
  }

  .history-header .dropdown-option li.is-current-year a:before {
    border-bottom: 3px solid #000
  }

  .history-header .dropdown-option li+li {
    border-top: 0
  }

  .history-header .dropdown-option a {
    position: relative;
    line-height: 54px
  }

  .history-header .dropdown-option a:hover:enabled,
  .history-header .dropdown-option a:focus:enabled {
    background-color: #fff;
    color: inherit !important;
    text-decoration: none
  }

  .history-header .dropdown-option a:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom: 1px solid #e5e5e5
  }

  .history-title {
    margin-bottom: 95px;
    padding-left: 5px;
    padding-right: 5px
  }

  .history-title:first-child {
    margin-top: 0
  }

  .history-section {
    position: relative;
    z-index: 0;
    padding-top: 35px;
    padding-bottom: 0;
    padding-left: 20px;
    max-width: 960px;
    margin: 60px auto 280px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box
  }

  .history-timeline {
    top: 45px;
    bottom: 0;
    left: 50%;
    margin-left: -1px
  }

  .history-timeline .point {
    position: fixed;
    z-index: 0;
    left: 50%;
    top: 65%;
    margin-left: -3px;
    display: block;
    width: 5px;
    height: 5px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
    -ms-transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
    background-color: #000;
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    -ms-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#valuePercent)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0)
  }

  .history-timeline .point.is-fixed {
    position: fixed;
    top: 45%;
    -webkit-transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
    -ms-transition-duration: 0.4s;
    -o-transition-duration: 0.4s;
    transition-duration: 0.4s;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#valuePercent)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1)
  }

  .history-timeline .point.is-fixed.is-arrival {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#valuePercent)";
    filter: alpha(opacity=0);
    opacity: 0;
    top: 50%;
    -webkit-transition-duration: 0.15s;
    -moz-transition-duration: 0.15s;
    -ms-transition-duration: 0.15s;
    -o-transition-duration: 0.15s;
    transition-duration: 0.15s
  }

  .history-timeline.is-arrival:before {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#valuePercent)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1)
  }

  .history-timeline.is-arrival:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#valuePercent)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transform: scale(6);
    -moz-transform: scale(6);
    -ms-transform: scale(6);
    -o-transform: scale(6);
    transform: scale(6)
  }

  .history-timeline:before,
  .history-timeline:after {
    content: '';
    position: absolute;
    left: -3px;
    bottom: 0;
    display: block;
    width: 5px;
    height: 5px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
    -ms-transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
    background-color: #000
  }

  .history-timeline:before {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#valuePercent)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5)
  }

  .history-timeline:after {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0)
  }

  .history-list {
    zoom: 1;
    padding-top: 100px;
    padding-bottom: 95px
  }

  .history-list:before {
    content: '';
    display: block
  }

  .history-list:after {
    content: '';
    display: table;
    clear: both
  }

  .history-list:last-child {
    padding-bottom: 0
  }

  .history-list:last-child>li:last-child {
    height: 280px;
    margin-top: 0;
    margin-bottom: -265px
  }

  .history-list:nth-of-type(even)>li:nth-child(odd) {
    margin-left: 66.17647%;
    margin-right: 0;
    text-align: left
  }

  .history-list:nth-of-type(even)>li:nth-child(odd) .dash-list li {
    padding-right: 0;
    padding-left: 12px
  }

  .history-list:nth-of-type(even)>li:nth-child(odd) .dash-list li:before {
    left: 0;
    right: auto
  }

  .history-list:nth-of-type(even)>li:nth-child(odd) .date {
    right: auto;
    margin-right: 0;
    margin-left: -93px
  }

  .history-list:nth-of-type(even)>li:nth-child(odd) .date:before {
    left: auto;
    right: -13px
  }

  .history-list:nth-of-type(even)>li:nth-child(even) {
    margin-left: 0;
    margin-right: 66.17647%;
    text-align: right
  }

  .history-list:nth-of-type(even)>li:nth-child(even) .dash-list li {
    padding-left: 0;
    padding-right: 12px
  }

  .history-list:nth-of-type(even)>li:nth-child(even) .dash-list li:before {
    left: auto;
    right: 0
  }

  .history-list:nth-of-type(even)>li:nth-child(even) .date {
    left: auto;
    right: 0;
    width: 90px;
    margin-right: -93px
  }

  .history-list:nth-of-type(even)>li:nth-child(even) .date:before {
    left: -13px;
    width: 20px
  }

  .history-list>li {
    margin-top: -50px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 1.8rem;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    margin-left: 0;
    margin-right: 66.17647%;
    text-align: right
  }

  .history-list>li:first-child {
    margin-top: -100px
  }

  .history-list>li:first-child.no-image {
    margin-top: -100px
  }

  .history-list>li:nth-child(odd) .dash-list li {
    padding-left: 0;
    padding-right: 12px
  }

  .history-list>li:nth-child(odd) .dash-list li:before {
    left: auto;
    right: 0
  }

  .history-list>li:nth-child(even) {
    margin-left: 66.17647%;
    margin-right: 0;
    text-align: left
  }

  .history-list>li:nth-child(even) .date {
    right: auto;
    margin-right: 0;
    margin-left: -93px
  }

  .history-list>li:nth-child(even) .date:before {
    left: auto;
    right: -13px
  }

  .history-list>li.no-image {
    margin-top: 60px
  }

  .history-list>li.no-image+.no-image {
    margin-top: 120px
  }

  .history-list>li.no-image .date {
    top: 0
  }

  .history-list>li.no-image .date:before {
    content: none
  }

  .history-list>li.no-image dl {
    margin-top: -10px
  }

  .history-list .dash-list {
    margin-top: 10px
  }

  .history-list .date {
    top: 90px;
    left: auto;
    right: 0;
    width: 90px;
    margin-right: -93px
  }

  .history-list .date:before {
    left: -13px;
    width: 20px
  }

  .history-list strong {
    margin-top: 15px
  }

  .history-list p,
  .history-list ul {
    margin: 10px 0
  }
}

@media (min-width: 60em) {
  .history-section {
    margin-bottom: 205px
  }

  .history-list:last-child>li:last-child {
    height: 205px;
    margin-bottom: -190px
  }

  .history-list:nth-of-type(even)>li:nth-child(odd) {
    margin-left: 61.30435%
  }

  .history-list:nth-of-type(even)>li:nth-child(even) {
    margin-right: 61.30435%
  }

  .history-list>li {
    margin-right: 61.30435%
  }

  .history-list>li:nth-child(even) {
    margin-left: 61.30435%
  }

  .history-list>li:nth-child(even) .date {
    right: auto;
    margin-right: 0;
    margin-left: -93px
  }

  .history-list>li:nth-child(even) .date:before {
    left: auto;
    right: -13px
  }

  .history-list .date {
    top: 127px
  }
}

@media (max-width: 44.99em) {

  /*.history .history-list .dash-list{display:none} 2018100*/
  .history .history-list dl dd {
    display: none
  }
}

.magazine-list {
  border-bottom: 1px solid #e5e5e5
}

.magazine-list>li {
  padding: 24px 20px;
  border-top: 1px solid #e5e5e5
}

.magazine-item {
  display: block;
  color: #000;
  vertical-align: top
}

.magazine-item .category {
  font-family: "Arita Heiti", "Montserrat", sans-serif;
  text-transform: uppercase
}

.magazine-item .category i {
  font-style: normal
}

.magazine-item .preview {
  position: relative;
  margin-top: 1em
}

.magazine-item .preview-item {
  display: inline-block;
  vertical-align: top;
  margin-left: -1px
}

.magazine-item .preview img {
  width: 100%
}

.magazine-item .preview .slick-slide {
  overflow: hidden;
  padding-left: 1px
}

.magazine-item .preview .slick-arrow {
  overflow: hidden;
  position: absolute;
  bottom: 0;
  z-index: 10;
  width: 45px;
  height: 45px;
  padding: 0;
  color: transparent;
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box
}

.magazine-item .preview .slick-arrow:before {
  display: block;
  font-size: 1rem;
  line-height: 45px;
  color: #000
}

.magazine-item .preview .slick-arrow:hover,
.magazine-item .preview .slick-arrow:focus {
  z-index: 15
}

.magazine-item .preview .slick-arrow:hover:before,
.magazine-item .preview .slick-arrow:focus:before {
  color: #46166b
}

.magazine-item .preview .slick-prev {
  left: 5px
}

.magazine-item .preview .slick-prev:before {
  content: "\EA04";
  font-style: normal;
  font-weight: normal;
  font-family: "icon";
  margin-left: -5px
}

.magazine-item .preview .slick-next {
  right: 5px
}

.magazine-item .preview .slick-next:before {
  content: "\EA05";
  font-style: normal;
  font-weight: normal;
  font-family: "icon";
  margin-right: -5px
}

.magazine-item .publish {
  margin-top: 0.8em;
  color: #666;
  line-height: 1.2;
  text-transform: uppercase
}

.magazine-item .publish span {
  position: relative;
  padding-right: 18px;
  margin-right: 12px;
  font-size: 1.4rem;
  font-family: "Arita Heiti", "Montserrat", sans-serif
}

.magazine-item .publish span:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  height: 12px;
  margin: auto;
  background-color: #e5e5e5
}

.magazine-info {
  display: block;
  outline: none;
  -webkit-transition: all .2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  -moz-transition: all .2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  -ms-transition: all .2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  -o-transition: all .2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition: all .2s cubic-bezier(0.785, 0.135, 0.15, 0.86)
}

.magazine-info dt {
  color: #000;
  font-weight: bold;
  font-size: 1.8rem;
  line-height: 1.6;
  word-break: keep-all;
  word-wrap: break-word;
  -webkit-transition: all .2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  -moz-transition: all .2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  -ms-transition: all .2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  -o-transition: all .2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition: all .2s cubic-bezier(0.785, 0.135, 0.15, 0.86)
}

.magazine-info dt [lang="en"],
.magazine-info dt[lang="en"] {
  font-size: 1.6rem
}

.magazine-info dd {
  position: relative;
  display: none;
  border-bottom: 1px solid transparent;
  word-break: keep-all;
  word-wrap: break-word;
  -webkit-transition: all .2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  -moz-transition: all .2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  -ms-transition: all .2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  -o-transition: all .2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition: all .2s cubic-bezier(0.785, 0.135, 0.15, 0.86)
}

.magazine-info:hover,
.magazine-info:focus {
  color: #46166b
}

.magazine-info:hover dt,
.magazine-info:focus dt {
  color: #46166b
}

.magazine-info:hover dd,
.magazine-info:focus dd {
  border-bottom-color: #46166b
}

.magazine-download {
  overflow: hidden;
  position: relative;
  margin-top: 60px;
  margin-bottom: -60px;
  height: 300px;
  text-align: center;
  white-space: nowrap
}

.magazine-download-cell {
  display: inline-block;
  vertical-align: middle;
  white-space: normal
}

.magazine-download:after {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle
}

.magazine-download-cell {
  position: relative;
  z-index: 10;
  position: relative;
  margin-left: 5.55556%;
  margin-right: 5.55556%
}

@media (min-width: 60em) {
  .magazine-download-cell {
    padding-left: calc(9400% / 1280);
    padding-right: calc(9400% / 1280);
    margin-left: 6.71875%;
    margin-right: 6.71875%
  }
}

.magazine-download-layer {
  overflow: hidden;
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  margin: auto
}

.magazine-download-layer img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  min-width: 50%;
  min-height: 50%;
  max-width: none;
  margin: auto
}

@media (min-width: 45em) {
  .magazine-item {
    position: relative
  }

  .magazine-item .category {
    font-weight: bold
  }

  .magazine-item .category i {
    display: block;
    font-size: 3.2rem
  }

  .magazine-item .publish {
    position: absolute;
    left: 16.66667%;
    bottom: 8px;
    z-index: 1
  }

  .magazine-item .preview {
    margin-top: 0
  }

  .magazine-item .preview .slick-prev {
    left: inherit;
    right: 10px;
    margin-right: 45px
  }

  .magazine-item .preview .slick-next {
    right: 10px
  }

  .magazine-item .preview .slick-next:after {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    bottom: 0;
    z-index: 10;
    width: 1px;
    height: 100%;
    margin: auto;
    background-color: #000;
    opacity: 0.1
  }

  .magazine-info {
    position: relative;
    z-index: 10;
    height: 0;
    padding-bottom: 28.4296%
  }

  .magazine-info dt {
    max-height: 64px;
    margin-bottom: 10px;
    font-size: 2.4rem;
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    word-wrap: normal
  }

  .magazine-info dt [lang="en"],
  .magazine-info dt[lang="en"] {
    font-size: 2.0rem
  }

  .magazine-info dd {
    display: inline
  }
}

@media (min-width: 60em) {
  .magazine-list li {
    padding-left: 0;
    padding-right: 0
  }
}

@media (max-width: 44.99em) {
  .magazine-download {
    text-align: center
  }

  .magazine-download .btn {
    display: block;
    width: 100%;
    margin-top: 5px
  }
}

.brand-home {
  overflow: hidden;
  color: #333
}

.brand-home .l-layout {
  position: relative;
  z-index: 5
}

.brand-home .l-wrap {
  position: relative;
  z-index: 2
}

.brand-home .h3 {
  margin-top: 15px;
  color: #000;
  font-size: 2.4rem;
  line-height: 1.3;
  word-break: keep-all;
  word-wrap: break-word
}

.brand-home .h3 [lang="en"],
.brand-home .h3[lang="en"] {
  font-size: 2.0rem
}

.brand-home .p {
  margin-top: 10px;
  margin-bottom: 0;
  word-break: keep-all;
  word-wrap: break-word
}

.brand-home .figure img {
  width: 100%
}

.brand-home .yt-player {
  overflow: hidden;
  position: relative;
  display: block
}

.brand-home .yt-player:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  width: 0%;
  height: 100%;
  margin: auto;
  background-color: #46166b;
  mix-blend-mode: overlay;
  opacity: 0.2;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -moz-transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -ms-transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1)
}

.brand-home .yt-player:after {
  content: "\EA15";
  font-style: normal;
  font-weight: normal;
  font-family: "icon";
  position: absolute;
  left: 15px;
  bottom: 12px;
  color: #fff;
  font-size: 2.3rem;
  line-height: 1;
  -webkit-transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -moz-transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -ms-transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1)
}

.brand-home .yt-player img {
  -webkit-transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -moz-transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -ms-transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all .4s cubic-bezier(0.645, 0.045, 0.355, 1)
}

.brand-home .yt-player:hover:before,
.brand-home .yt-player:focus:before {
  width: 100%
}

.brand-home .yt-player:hover:after,
.brand-home .yt-player:focus:after {
  -webkit-transform: scale(1.25);
  -moz-transform: scale(1.25);
  -ms-transform: scale(1.25);
  -o-transform: scale(1.25);
  transform: scale(1.25)
}

.brand-home .yt-player:hover img,
.brand-home .yt-player:focus img {
  -webkit-transform: scale(1.025);
  -moz-transform: scale(1.025);
  -ms-transform: scale(1.025);
  -o-transform: scale(1.025);
  transform: scale(1.025)
}

.brand-home .mask {
  position: absolute;
  top: 50%;
  left: 50%;
  right: 0%;
  bottom: 0%;
  z-index: 10;
  width: 100%;
  height: 100%;
  background: url(/resource/images/story/mask.png);
  background-position: 0px center;
  background-repeat: no-repeat;
  background-size: 27700px 100%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%)
}

.brand-home .mask-wrapper {
  overflow: hidden;
  position: relative
}

.brand-frame {
  position: relative;
  margin-left: 5.55556%;
  margin-right: 5.55556%
}

@media (min-width: 60em) {
  .brand-frame {
    padding-left: calc(18800% / 1280);
    padding-right: calc(18800% / 1280);
    margin-left: 6.71875%;
    margin-right: 6.71875%
  }
}

.brand-cover {
  overflow: hidden;
  position: relative;
  padding-bottom: 40px;
  background-color: #f3f1f4;
  text-align: center;
  scrollbar-face-color: #999;
  scrollbar-arrow-color: #999;
  scrollbar-track-color: #d9d9d9
}

.brand-cover-bg {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 48.4375%;
  -webkit-transform-origin: left top;
  -moz-transform-origin: left top;
  -ms-transform-origin: left top;
  -o-transform-origin: left top;
  transform-origin: left top;
  text-align: right
}

.brand-cover-bg img {
  -webkit-transform-origin: right bottom;
  -moz-transform-origin: right bottom;
  -ms-transform-origin: right bottom;
  -o-transform-origin: right bottom;
  transform-origin: right bottom
}

.brand-cover .h2 {
  margin-top: 22px;
  color: #000;
  font-size: 2rem;
  font-family: "Arita Heiti", "Montserrat", sans-serif
}

.brand-cover ::-webkit-scrollbar {
  width: 10px;
  height: 10px
}

.brand-cover ::-webkit-scrollbar-thumb {
  background: #999
}

.brand-cover ::-webkit-scrollbar-track {
  background: #d9d9d9
}

.brand-concept {
  position: relative;
  padding-top: 90px;
  margin-top: 30px
}

.brand-concept-bg {
  overflow: hidden;
  position: absolute;
  left: 0;
  z-index: 1;
  width: 100%
}

.brand-concept .figure {
  width: 65.625%
}

.brand-about .about-bg {
  position: absolute;
  top: 0;
  right: 0;
  width: 29.29688%;
  margin-top: -18.75%;
  margin-right: 10px;
  text-align: right;
  -webkit-transform: translateX(50%);
  -moz-transform: translateX(50%);
  -ms-transform: translateX(50%);
  -o-transform: translateX(50%);
  transform: translateX(50%)
}

.brand-about .brand-row {
  position: relative;
  z-index: 10;
  padding-top: 31.25%;
  padding-right: 68.75%
}

.brand-about .figure {
  position: absolute;
  top: 0;
  right: 0;
  width: 65.625%
}

.brand-about .blockquote {
  margin: 20px 0;
  word-break: keep-all;
  word-wrap: break-word
}

.brand-about .blockquote:before {
  content: "\EA07";
  font-style: normal;
  font-weight: normal;
  font-family: "icon"
}

.brand-about .blockquote:after {
  content: "\EA07";
  font-style: normal;
  font-weight: normal;
  font-family: "icon";
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg)
}

.brand-about .blockquote:before,
.brand-about .blockquote:after {
  display: block;
  margin: 10px 0;
  color: #d9d9d9
}

.brand-intro-bg {
  overflow: hidden;
  position: relative;
  width: 75%
}

.brand-intro-bg .mask {
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(180deg);
  -moz-transform: translateX(-50%) translateY(-50%) rotate(180deg);
  -ms-transform: translateX(-50%) translateY(-50%) rotate(180deg);
  -o-transform: translateX(-50%) translateY(-50%) rotate(180deg);
  transform: translateX(-50%) translateY(-50%) rotate(180deg)
}

.brand-intro-cell {
  position: relative;
  z-index: 10
}

.brand-intro .brand-frame {
  padding-bottom: 31.25%
}

.brand-intro .figure {
  margin: 15px 0
}

.brand-intro .brand-bg {
  overflow: hidden;
  position: absolute;
  right: -50%;
  bottom: 0;
  z-index: 1;
  width: 66.787%;
  -webkit-transform: translateX(-25%);
  -moz-transform: translateX(-25%);
  -ms-transform: translateX(-25%);
  -o-transform: translateX(-25%);
  transform: translateX(-25%);
  -webkit-transform-origin: right bottom;
  -moz-transform-origin: right bottom;
  -ms-transform-origin: right bottom;
  -o-transform-origin: right bottom;
  transform-origin: right bottom
}

.brand-intro .brand-bg .mask {
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(180deg);
  -moz-transform: translateX(-50%) translateY(-50%) rotate(180deg);
  -ms-transform: translateX(-50%) translateY(-50%) rotate(180deg);
  -o-transform: translateX(-50%) translateY(-50%) rotate(180deg);
  transform: translateX(-50%) translateY(-50%) rotate(180deg)
}

.brand-symbol {
  overflow: hidden;
  position: relative;
  height: 250px;
  margin-top: 30px;
  text-align: center;
  color: #fff;
  padding-left: 5.55556%;
  padding-right: 5.55556%;
  white-space: nowrap
}

@media (min-width: 60em) {
  .brand-symbol {
    padding-left: 6.71875%;
    padding-right: 6.71875%
  }
}

.brand-symbol-cell {
  display: inline-block;
  vertical-align: middle;
  white-space: normal
}

.brand-symbol:after {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle
}

.brand-symbol-cell {
  position: relative;
  z-index: 10;
  margin-top: 10px
}

.brand-symbol-bg {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  z-index: 1
}

.brand-symbol-bg img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  min-width: 50%;
  min-height: 50%;
  max-width: none;
  -webkit-transform: translateX(-15%);
  -moz-transform: translateX(-15%);
  -ms-transform: translateX(-15%);
  -o-transform: translateX(-15%);
  transform: translateX(-15%)
}

.brand-symbol .h2 {
  font-size: 2rem;
  font-family: "Arita Heiti", "Montserrat", sans-serif
}

.brand-symbol .func {
  margin-top: 15px
}

@media (min-width: 45em) {
  .brand-home .h3 {
    font-size: 3.4rem;
    line-height: 1.3
  }

  .brand-home .h3 [lang="en"],
  .brand-home .h3[lang="en"] {
    font-size: 2.6rem
  }

  .brand-home .yt-player:after {
    content: "\EA15";
    font-style: normal;
    font-weight: normal;
    font-family: "icon";
    left: 40px;
    bottom: 30px;
    font-size: 5.2rem
  }

  .brand-cover .h2 {
    font-size: 3.2rem
  }

  .brand-concept {
    padding-top: 20px;
    padding-bottom: 60px;
    margin-top: 100px
  }

  .brand-concept-bg {
    bottom: 0;
    width: 50%
  }

  .brand-concept .brand-row {
    display: table;
    table-layout: fixed;
    width: 100%
  }

  .brand-concept .figure {
    position: relative;
    left: -20px;
    display: table-cell;
    vertical-align: top;
    width: 61.47541%
  }

  .brand-concept .desc {
    position: relative;
    left: 20px;
    display: table-cell;
    vertical-align: top;
    width: 38.52459%
  }

  .brand-about .about-bg {
    margin-top: -14.44043%;
    margin-right: 0
  }

  .brand-about .brand-row {
    padding-top: 16.24549%;
    padding-right: 44.22383%;
    padding-left: 32.12996%
  }

  .brand-about .figure {
    width: 40.61372%
  }

  .brand-about .blockquote {
    width: 30.32491%;
    margin-top: -30.68592%;
    margin-bottom: 0;
    line-height: 1.6
  }

  .brand-intro {
    position: relative;
    padding-top: 12.63538%
  }

  .brand-intro-bg {
    position: absolute;
    top: 10%;
    right: 65.10417%;
    z-index: 1;
    width: 34.89583%;
    width: 670px
  }

  .brand-intro .brand-frame {
    padding-bottom: 230px
  }

  .brand-symbol {
    height: 480px;
    margin-top: 70px
  }

  .brand-symbol-bg img {
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
    transform: translateX(0%)
  }

  .brand-symbol-cell {
    margin-top: 20px
  }

  .brand-symbol .func {
    margin-top: 20px
  }
}

@media (min-width: 60em) {
  .brand-about .brand-bg {
    width: 740px
  }

  .brand-symbol .h2 {
    font-size: 3.2rem
  }
}

@media (max-width: 44.99em) {
  .brand-home br {
    display: none
  }

  .brand-concept-bg {
    top: 0
  }

  .brand-about {
    padding-top: 0%
  }

  .brand-about .brand-row {
    padding-bottom: 5.55556%
  }
}

.sitemap-box .h3 a,
.sitemap-item dt:only-child {
  position: relative
}

.sitemap-box .h3 a:after,
.sitemap-item dt:only-child:after {
  content: "\EA05";
  font-style: normal;
  font-weight: normal;
  font-family: "icon";
  position: absolute;
  right: 0;
  top: 6px;
  color: #9a9a9a;
  font-size: 0.6rem
}

.sitemap-box {
  zoom: 1;
  padding-top: 25px;
  padding-bottom: 30px;
  border-top: 10px solid #e5e5e5;
  font-size: 0rem;
  color: #333
}

.sitemap-box:before {
  content: '';
  display: block
}

.sitemap-box:after {
  content: '';
  display: table;
  clear: both
}

.sitemap-box .h3 {
  display: block;
  font-size: 2.4rem;
  line-height: 1.3;
  color: #000;
  font-weight: bold
}

.sitemap-box .h3 [lang="en"],
.sitemap-box .h3[lang="en"] {
  font-size: 2.0rem
}

.sitemap-box .h3 a {
  padding-right: 25px
}

.sitemap-box .h3 a:after {
  top: 9px;
  font-size: 1.6rem
}

.sitemap-box .h3 [data-track-name="season-collection"]:after {
  display: none;
}

.sitemap-box a {
  color: inherit
}

.sitemap-box--wide .sitemap-item:nth-child(even) {
  padding-left: 10px;
  padding-right: 0
}

.sitemap-box--wide .sitemap-item:nth-child(odd) {
  padding-right: 10px;
  padding-left: 0
}

.sitemap-item {
  display: inline-block;
  vertical-align: top;
  width: 50%;
  margin-top: 25px;
  font-size: 1.6rem;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box
}

.sitemap-item:nth-child(odd) {
  padding-left: 10px
}

.sitemap-item:nth-child(even) {
  padding-right: 10px
}

.sitemap-item dt {
  display: block;
  padding-bottom: 10px;
  border-bottom: 1px solid #e5e5e5;
  font-weight: bold
}

.sitemap-item dt+dd {
  margin-top: 10px
}

.sitemap-item dd {
  color: #666;
  font-weight: 100;
  word-break: keep-all;
  word-wrap: break-word
}

.sitemap-item dd+dd {
  margin-top: 10px
}

.sitemap-item dd a {
  color: #666
}

@media (min-width: 45em) {
  .sitemap-box {
    position: relative;
    margin-top: 40px;
    padding: 15px 7.58123% 40px 22.56318%;
    border: 10px solid #f2f2f2;
    min-height: 57px;
  }

  .sitemap-box:first-child {
    margin-top: 5px
  }

  .sitemap-box a:hover:enabled,
  .sitemap-box a:focus:enabled {
    border-bottom: 1px solid #000
  }

  .sitemap-item {
    margin-top: 25px
  }

  .sitemap-item dt {
    padding-bottom: 7px
  }

  .sitemap-item dt+dd {
    margin-top: 7px
  }

  .sitemap-item dd {
    font-size: 1.4rem
  }

  .sitemap-item dd+dd {
    margin-top: 5px
  }
}

@media (min-width: 60em) {
  .sitemap-box .h3 {
    position: absolute;
    left: 7.67148%;
    top: 38px
  }

  .sitemap-box--wide {
    padding-left: 5.86643%
  }

  .sitemap-box--wide .sitemap-item {
    width: 20%
  }

  .sitemap-box--wide .sitemap-item:nth-child(even) {
    padding-left: 20px;
    padding-right: 0
  }

  .sitemap-box--wide .sitemap-item:nth-child(odd) {
    padding-left: 20px;
    padding-right: 0
  }

  .sitemap-item {
    width: 25%;
    padding-left: 20px
  }

  .sitemap-item:nth-child(odd) {
    padding-left: 20px
  }

  .sitemap-item:nth-child(even) {
    padding-right: 0
  }

  .sitemap-item dt:only-child:after {
    content: none
  }
}

@media (max-width: 59.99em) {
  .sitemap-box {
    padding-left: 20px;
    padding-right: 20px
  }

  .sitemap-box--wide {
    padding-top: 0
  }
}

.store-box {
  overflow: hidden
}

.store-map-wide {
  display: none
}

.store-search {
  position: relative;
  margin: 0 -1px
}

.store-search .input-wrap {
  position: relative
}

.store-search .input-wrap .input {
  position: relative;
  z-index: 1;
  padding: 0 30px;
  background-color: transparent;
  font-size: 1.6rem;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box
}

.store-search .input-wrap .input::placeholder {
  color: #666;
  text-indent: 10px
}

.store-search .input-wrap .keyword {
  position: absolute;
  top: 10px;
  left: 40px;
  left: 0;
  width: 100%;
  padding: 0 40px;
  color: #666;
  font-weight: 100;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease
}

.store-search .btn-search {
  position: absolute;
  z-index: 100;
  right: 15px;
  top: 50%;
  padding: 5px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%)
}

.store-search .btn-search:before {
  content: "\EA19";
  font-style: normal;
  font-weight: normal;
  font-family: "icon";
  color: #121212;
  font-size: 18px
}

.store-accordion .store-info {
  display: block;
  position: relative;
  padding: 15px 43px
}

.store-accordion .store-info:after {
  content: "\EA01";
  font-style: normal;
  font-weight: normal;
  font-family: "icon";
  position: absolute;
  right: 20px;
  top: 50%;
  margin-top: -18px;
  color: #999;
  font-size: 18px
}

.store-accordion .store-info .h {
  display: inline-block;
  position: relative;
  color: #000;
  font-weight: bold;
  font-size: 1.8rem
}

.store-accordion .store-info .h:before {
  content: "\EA10";
  font-style: normal;
  font-weight: normal;
  font-family: "icon";
  position: absolute;
  left: 0;
  top: 1px;
  color: #999;
  font-size: 18px;
  -webkit-transform: translateX(-130%);
  -moz-transform: translateX(-130%);
  -ms-transform: translateX(-130%);
  -o-transform: translateX(-130%);
  transform: translateX(-130%)
}

.store-accordion .store-info .h:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  border-bottom: 1px solid #000;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease
}

.store-accordion .store-info .p {
  margin-top: 5px;
  margin-bottom: 0
}

.store-accordion .store-info .p span {
  display: block
}

.store-accordion .store-info .tel {
  color: #999
}

.store-accordion .store-map {
  overflow: hidden;
  position: relative;
  height: 300px;
  border-top: 1px solid #e5e5e5
}

.store-accordion .store-map-wide {
  display: none
}

.store-accordion li {
  border-bottom: 1px solid #e5e5e5;
  -webkit-transition: background-color 0.5s ease;
  -moz-transition: background-color 0.5s ease;
  -ms-transition: background-color 0.5s ease;
  -o-transition: background-color 0.5s ease;
  transition: background-color 0.5s ease
}

.store-accordion li.no-item {
  padding: 55px 0 60px;
  background-color: #f6f6f6;
  text-align: center;
  font-size: 1.8rem
}

.store-accordion li.no-item a:after {
  border-color: #000
}

.store-accordion li.no-item:before {
  content: "\EA20";
  font-style: normal;
  font-weight: normal;
  font-family: "icon";
  display: block;
  font-size: 30px
}

.store-accordion li.is-active {
  background-color: #f6f6f6
}

.store-accordion li.is-active .store-info:after {
  content: "\EA06";
  font-style: normal;
  font-weight: normal;
  font-family: "icon";
  color: #000
}

.store-accordion li.is-active .h:after {
  right: 0;
  width: 100%
}

.store-accordion li.is-active .h:before {
  color: #000
}

.store-accordion li:hover {
  background-color: rgba(246, 246, 246, 0.7)
}

@media (min-width: 60em) {
  .store-box {
    position: relative;
    height: 560px;
    max-width: 1108px;
    margin: auto;
    padding: 0 50px;
    background-color: #fff
  }

  .store-search .input-wrap .input {
    height: 57px;
    padding-right: 50px
  }

  .store-search .input-wrap .input::placeholder {
    text-indent: 2px
  }

  .store-search .input-wrap .keyword {
    top: 16px
  }

  .store-pos {
    width: 100%;
    max-width: 356px;
    background: #fff
  }

  .store-map-wide {
    display: block
  }

  .store-map-wide.no-map:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    margin-left: 1px;
    background-image: url("../image/misc/store-seoul.jpg");
    background-size: cover;
    background-position: center
  }

  .store-map-wide .map {
    height: 100%
  }

  .store-map {
    display: none
  }

  .store-accordion {
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    height: calc(560px - 58px)
  }

  .store-accordion .store-info {
    padding: 15px 35px
  }

  .store-accordion .store-info:after {
    display: none
  }

  .store-accordion li.no-item {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
  }

  .store-accordion li.no-item:after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 11px;
    background-color: #d9d9d9
  }

  .store-accordion li.is-active {
    position: relative
  }

  .store-accordion li.is-active:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    cursor: pointer
  }

  .store-accordion li:last-child {
    border-bottom: 0
  }

  .store-pos {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50px;
    z-index: 10
  }

  .store-map-wide {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    left: 405px;
    right: 50px
  }

  .store-box {
    scrollbar-face-color: #999;
    scrollbar-arrow-color: #999;
    scrollbar-track-color: #d9d9d9
  }

  .store-box ::-webkit-scrollbar {
    width: 10px;
    height: 10px
  }

  .store-box ::-webkit-scrollbar-thumb {
    background: #999
  }

  .store-box ::-webkit-scrollbar-track {
    background: #d9d9d9
  }

  .no-placeholder .store-box {
    scrollbar-arrow-color: black
  }

  .store-map-wide {
    margin-left: 1px;
    border: 1px solid #d9d9d9;
    border-left: 0
  }

  .store-pos {
    border: 1px solid #d9d9d9;
    border-right: 0
  }

  .store-search {
    margin-top: -1px;
    margin-left: -1px;
    margin-right: 0
  }
}

.misc-head {
  background-color: #fff
}

.misc-head .h2 {
  padding: 15px 0;
  color: #000;
  font-weight: bold;
  text-align: center
}

@media (min-width: 45em) {
  .misc-head .h2 {
    padding: 35px 0
  }
}

@media (max-width: 44.99em) {
  .misc-head .h2 {
    font-size: 2.4rem
  }
}

.login {
  background: url("/kr/ko/resource/image/misc/login-bg.jpg") center center/cover
}

.login-cell {
  padding-top: 60px;
  padding-bottom: 60px;
  text-align: center;
  position: relative;
  margin-left: 5.55556%;
  margin-right: 5.55556%
}

@media (min-width: 60em) {
  .login-cell {
    margin-left: 6.71875%;
    margin-right: 6.71875%
  }
}

@media (min-width: 80em) {
  .login-cell {
    margin-left: 6.71875%;
    margin-right: 6.71875%
  }
}

.login-cell input {
  min-width: 240px;
  width: 100%
}

.login-box {
  max-width: 436px;
  margin: auto;
  padding: 20px 20px;
  background-color: #fff;
  text-align: left;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box
}

.login-box .h {
  padding-bottom: 20px;
  border-bottom: 3px solid #000;
  color: #000;
  font-size: 2.4rem;
  line-height: 1.3
}

.login-box .h [lang="en"],
.login-box .h[lang="en"] {
  font-size: 2.0rem
}

.login-box .input-cell {
  margin: 10px 0
}

.login-box .save-id {
  display: block;
  margin-top: 10px;
  margin-bottom: 10px;
  color: #000;
  font-size: 1.4rem
}

.login-box .help-block {
  display: block;
  margin-top: 5px;
  font-size: 1.4rem
}

.login-box .form-error {
  color: #b94a48
}

.login-util {
  display: table;
  width: 100%;
  margin-top: 30px;
  font-size: 1.4rem;
  zoom: 1
}

.login-util:before {
  content: '';
  display: block
}

.login-util:after {
  content: '';
  display: table;
  clear: both
}

.login-util li {
  display: table-cell;
  position: relative;
  text-align: center
}

.login-util li:nth-of-type(2):before,
.login-util li:nth-of-type(2):after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  height: 12px;
  margin: auto;
  background-color: #d9d9d9
}

.login-util li:nth-of-type(2):before {
  left: -5px
}

.login-util li:nth-of-type(2):after {
  right: -5px
}

.login-util li:first-child {
  text-align: left
}

.login-util li:last-child {
  text-align: right
}

@media (min-width: 60em) {
  .login-util li:nth-of-type(2):before {
    left: -10px
  }

  .login-util li:nth-of-type(2):after {
    right: -10px
  }

  .login-cell {
    padding-top: 100px;
    padding-bottom: 100px
  }

  .login-box {
    padding: 30px 3.61011%
  }

  .login-box .h {
    padding-bottom: 30px
  }
}

.search-result {
  text-align: center
}

.search-result-box {
  padding: 15px 20px 40px;
  background-color: #f6f6f6
}

.search-result-btn {
  position: absolute;
  top: 50%;
  right: -1em;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -moz-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -ms-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -o-transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: all .4s cubic-bezier(0.39, 0.575, 0.565, 1)
}

.search-result-btn:after {
  content: "\EA19";
  font-style: normal;
  font-weight: normal;
  font-family: "icon";
  color: #000;
  font-size: 1.8rem;
  line-height: 1.6
}

.search-result-btn:after [lang="en"],
.search-result-btn:after[lang="en"] {
  font-size: 1.6rem
}

.search-result .input-search--result {
  padding: 0 35px 0 0;
  border: 0 none;
  background-color: transparent;
  color: #000;
  font-weight: bold;
  font-size: 1.8rem;
  line-height: 1.6
}

.search-result .input-search--result [lang="en"],
.search-result .input-search--result[lang="en"] {
  font-size: 1.6rem
}

.search-result .input-search--result:focus+.search-result-btn {
  right: 0
}

.search-result .result-cell {
  position: relative;
  border-bottom: 1px solid #000
}

.search-result .result-text {
  margin-top: 15px;
  margin-bottom: 0;
  color: #000;
  word-break: break-all
}

.search-result .result-text .mark {
  background-color: transparent;
  color: #000;
  font-weight: bold
}

.search-result .result-text .mark:before {
  content: '['
}

.search-result .result-text .mark:after {
  content: ']'
}

.search-section {
  padding-top: 25px;
  padding-bottom: 25px
}

.search-section .h {
  padding: 0 20px 15px;
  border-bottom: 1px solid #e5e5e5;
  color: #000;
  font-size: 1.8rem;
  line-height: 1.6
}

.search-section .h [lang="en"],
.search-section .h[lang="en"] {
  font-size: 1.6rem
}

.search-section+.search-section {
  border-top: 10px solid #f6f6f6
}

.search-section .mark {
  background-color: transparent;
  color: #46166b;
  font-weight: bold
}

.search-section.no-item {
  max-width: 530px;
  margin: auto;
  padding-top: 50px;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 1.8rem
}

.search-section.no-item .h {
  font-size: 1.8rem;
  color: #000;
  text-align: center;
  font-weight: normal;
  padding-bottom: 0;
  border-bottom: 0
}

.search-section.no-item .h:before {
  content: "\EA20";
  font-style: normal;
  font-weight: normal;
  font-family: "icon";
  display: block;
  color: #666;
  font-size: 30px
}

.search-section.no-item p {
  color: #767676;
  font-size: 1.4rem
}

.search-list {
  padding-left: 20px;
  padding-right: 20px
}

.search-list li {
  padding: 20px 0
}

.search-list li+li {
  border-top: 1px solid #e5e5e5
}

.search-list li.no-item {
  padding: 35px 0;
  text-align: center;
  font-size: 1.8rem
}

.search-list li.no-item:before {
  content: "\EA20";
  font-style: normal;
  font-weight: normal;
  font-family: "icon";
  display: block;
  font-size: 30px
}

.search-item {
  display: block
}

.search-item:hover dt,
.search-item:focus dt {
  color: #46166b;
  text-decoration: underline
}

.search-item:hover dt+dd,
.search-item:focus dt+dd {
  text-decoration: underline
}

.search-thumb {
  max-width: 180px;
  margin: auto
}

.search-info {
  margin-top: 15px;
  font-size: 1.4rem;
  font-weight: 100
}

.search-info dt {
  color: #333;
  font-weight: bold;
  font-size: 1.6rem
}

.search-info dd {
  max-height: 102px;
  margin-top: 10px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  word-wrap: normal
}

.search-info .label {
  margin-top: 3px
}

.search-info .label.mark {
  background-color: #f6f6f6;
  font-weight: bold
}

.search-source {
  word-break: keep-all;
  word-wrap: break-word
}

@media (min-width: 60em) {
  .search-result-box {
    padding-top: 25px
  }

  .search-result-btn {
    margin-top: -0.4em
  }

  .search-result-btn:after {
    margin-top: -5px;
    font-size: 2.4rem;
    line-height: 1.3
  }

  .search-result-btn:after [lang="en"],
  .search-result-btn:after[lang="en"] {
    font-size: 2.0rem
  }

  .search-result .input-search--result {
    padding-right: 50px;
    font-size: 2.4rem;
    line-height: 1.3
  }

  .search-result .input-search--result [lang="en"],
  .search-result .input-search--result[lang="en"] {
    font-size: 2.0rem
  }

  .search-result .result-cell {
    max-width: 544px;
    padding-bottom: 15px;
    margin: auto
  }

  .search-result .result-text {
    margin-top: 25px
  }

  .search-section {
    padding-top: 55px;
    padding-bottom: 60px
  }

  .search-section .h {
    padding: 0 0 15px;
    font-size: 2.4rem;
    line-height: 1.3
  }

  .search-section .h [lang="en"],
  .search-section .h[lang="en"] {
    font-size: 2.0rem
  }

  .search-section+.search-section {
    border-width: 30px
  }

  .search-section.no-item {
    padding-top: 75px
  }

  .search-section.no-item .h {
    font-size: 2.4rem
  }

  .search-section.no-item .h:before {
    font-size: 50px
  }

  .search-section.no-item p {
    line-height: 1.8
  }

  .search-list {
    padding-left: 0;
    padding-right: 0
  }

  .search-list li {
    padding: 25px 0
  }

  .search-list li.no-item {
    padding: 75px 0 20px
  }

  .search-list li+li {
    border-color: transparent
  }

  .search-item {
    display: table;
    table-layout: fixed;
    width: 100%
  }

  .search-thumb {
    display: table-cell;
    vertical-align: top;
    width: 188px;
    padding-right: 35px
  }

  .search-thumb+.search-info {
    padding-top: 65px
  }

  .search-info {
    display: table-cell;
    font-size: 1em
  }

  .search-info dt {
    font-size: 1.8rem
  }

  .search-info dd {
    max-height: 68px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    word-wrap: normal
  }
}



/* 20180227 */
.page-article .more-view {
  display: inline-block;
  padding-left: 5px;
  margin-left: 10px;
  border-bottom: 1px solid #777;
  font-size: 0.9em;
  vertical-align: 3px;
}

.page-article .more-view:after {
  display: inline-block;
  width: 5px;
  height: 10px;
  margin-left: 8px;
  background: url(../image/a/arrow.gif) no-repeat 0 0;
  content: ''
}

.sidenav-utils .dropdown-selector {
  max-width: auto !important;
  min-width: 230px;
}

.sidenav-utils .dropdown-selector:after {
  right: 0;
}

.sidenav-utils .dropdown {
  text-transform: uppercase;
}

/* 20180308 */
.figure-txt li {
  position: relative;
  padding-left: 10px;
}

.figure-txt li:before {
  display: block;
  position: absolute;
  top: 9%;
  left: 0;
  content: '*'
}

.figure-txt {
  margin: -10px 0 30px 0;
  font-size: 1.4rem;
  color: #333;
}

@media (min-width: 45em) {
  .figure-txt li {
    padding-left: 15px;
  }

  .figure-txt {
    margin: -15px 0 50px 0;
    font-size: 2rem;
    color: #333;
  }
}

/* 20180419 */
.page-article .event-product {
  padding: 0;
  margin: 10% 0 13%;
}

.page-article .event-product h3 {
  font-size: 1.8rem;
  color: #333
}

.page-article .event-product .desc {
  margin: 0.5em 0 0;
}

.page-article .event-product .img {
  position: relative;
  margin: 0 auto;
  text-align: center;
}

.page-article .event-product .img img {
  width: 195px;
}

.page-article .event-product .dash-list {
  margin-top: 0.5em;
}

@media (min-width: 60em) {
  .page-article .event-product {
    position: relative;
    padding: 0 0 0 39.5%;
    margin: 8% 0 13%;
  }

  .page-article .event-product:after {
    display: block;
    clear: both;
    content: '';
  }

  .page-article .event-product .img {
    position: absolute;
    top: 0;
    left: 0;
    width: 39.5%;
  }

  .page-article .event-product .img img {
    width: 190px;
  }
}

/* 20180703 */
.detail-section.event h2.h2,
.detail-section.event h3.h {
  text-align: left;
  line-height: 1.3;
}

.detail-section.event .detail-twist {
  margin-bottom: 6%;
}

.detail-section.event p {
  color: #333;
  font-weight: 100;
}

@media (min-width: 45em) {
  .detail-section.event h2.h2 {
    margin-top: 25px;
    font-size: 3rem;
  }

  .detail-section.event h3.h {
    margin-top: 25px;
    font-size: 3.4rem;
  }

  .detail-section.event .detail-twist .figure:first-child {
    margin-top: 0;
  }
}

/* 20180709 */
.event-section .strong {
  font-weight: bold;
  color: #000;
}

.event-section .more-view {
  display: inline-block;
  padding-left: 3px;
  margin-left: 10px;
  border-bottom: 1px solid #777;
  font-size: 0.9em;
  color: #000;
  vertical-align: 2px;
}

.event-section .more-view:after {
  display: inline-block;
  width: 5px;
  height: 10px;
  margin-left: 8px;
  background: url(../image/a/arrow.gif) no-repeat 0 0;
  content: ''
}

/* 20180710 */
.cell-movie .cover-player {
  position: relative;
  z-index: 10;
  ;
}

.cell-movie .yt-player {
  display: block;
  position: relative;
  height: 0;
  padding-bottom: 53.05556%;
  outline: 0 none
}

.cell-movie .yt-player:before {
  content: "\EA15";
  font-style: normal;
  font-weight: normal;
  font-family: "icon"
}

.cell-movie .yt-player:after {
  content: "\EA15";
  font-style: normal;
  font-weight: normal;
  font-family: "icon"
}

.cell-movie .yt-player:after,
.cell-movie .yt-player:before {
  position: absolute;
  left: 50%;
  top: 50%;
  color: #fff;
  font-size: 3.7rem
}

.cell-movie .yt-player:before {
  -webkit-transform: translate(-50%, -50%) rotate(0deg);
  -moz-transform: translate(-50%, -50%) rotate(0deg);
  -ms-transform: translate(-50%, -50%) rotate(0deg);
  -o-transform: translate(-50%, -50%) rotate(0deg);
  transform: translate(-50%, -50%) rotate(0deg);
  -webkit-transition: all .4s ease;
  -moz-transition: all .4s ease;
  -ms-transition: all .4s ease;
  -o-transition: all .4s ease;
  transition: all .4s ease;
  opacity: 1
}

.cell-movie .yt-player:after {
  -webkit-transform: translate(-50%, -25%) rotate(15deg);
  -moz-transform: translate(-50%, -25%) rotate(15deg);
  -ms-transform: translate(-50%, -25%) rotate(15deg);
  -o-transform: translate(-50%, -25%) rotate(15deg);
  transform: translate(-50%, -25%) rotate(15deg);
  -webkit-transition: all .4s ease 0.1s;
  -moz-transition: all .4s ease 0.1s;
  -ms-transition: all .4s ease 0.1s;
  -o-transition: all .4s ease 0.1s;
  transition: all .4s ease 0.1s;
  opacity: 0
}

.cell-movie .yt-player:hover:before,
.cell-movie .yt-player:focus:before {
  -webkit-transform: translate(-50%, -75%) rotate(-15deg);
  -moz-transform: translate(-50%, -75%) rotate(-15deg);
  -ms-transform: translate(-50%, -75%) rotate(-15deg);
  -o-transform: translate(-50%, -75%) rotate(-15deg);
  transform: translate(-50%, -75%) rotate(-15deg);
  opacity: 0
}

.cell-movie .yt-player:hover:after,
.cell-movie .yt-player:focus:after {
  color: #886d4b;
  -webkit-transform: translate(-50%, -50%) rotate(0deg);
  -moz-transform: translate(-50%, -50%) rotate(0deg);
  -ms-transform: translate(-50%, -50%) rotate(0deg);
  -o-transform: translate(-50%, -50%) rotate(0deg);
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 1
}

.cell-movie img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%
}

.cell-movie .cover-close {
  position: absolute;
  top: 0;
  right: 0;
  color: #fff;
  padding: 1em;
  z-index: 150
}

.cell-movie .cover-close:after {
  content: "\EA15";
  font-style: normal;
  font-weight: normal;
  font-family: "icon";
  color: #fff;
  font-size: 3.7rem
}

.cell-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
}

.cell-movie .cover-close {
  position: absolute;
  top: 0;
  right: 0;
  color: #fff;
  padding: 1em;
  z-index: 150;
}

.cell-movie .cover-close:after {
  content: "\EA0B";
  font-style: normal;
  font-weight: normal;
  font-family: "icon";
  color: #000;
  font-size: 3.7rem;
}

@media (min-width:60em) {
  .cell-movie {
    position: relative;
    padding-top: 8.6%;
    padding-bottom: 8.6%;
  }

  .cell-movie:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background-color: #000;
    opacity: 0.5;
    -webkit-transform: translateY(-105%);
    -moz-transform: translateY(-105%);
    -ms-transform: translateY(-105%);
    -o-transform: translateY(-105%);
    transform: translateY(-105%);
    -webkit-transition: all .4s ease-out 0.1s;
    -moz-transition: all .4s ease-out 0.1s;
    -ms-transition: all .4s ease-out 0.1s;
    -o-transition: all .4s ease-out 0.1s;
    transition: all .4s ease-out 0.1s
  }

  .cell-movie.is-active:after {
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -o-transform: translateY(0%);
    transform: translateY(0%)
  }

  .cell-movie .cover-player {
    overflow: hidden;
    width: 100%;
    max-width: 1108px;
    margin: auto
  }

  .cell-movie .cover-player:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background-color: #000;
    -webkit-transform: translateY(-105%);
    -moz-transform: translateY(-105%);
    -ms-transform: translateY(-105%);
    -o-transform: translateY(-105%);
    transform: translateY(-105%);
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -ms-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out
  }

  .is-active.cell-movie .cover-player:after {
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -o-transform: translateY(0%);
    transform: translateY(0%)
  }

  .cell-movie .cover-player .caption {
    position: relative;
    z-index: 10;
    margin-top: -1px
  }

  .cell-movie .yt-player:after,
  .cell-movie .yt-player:before {
    font-size: 5.4rem
  }

  .cell-movie .video-player iframe {
    z-index: 101
  }
}


/*20180717*/
.detail-section p.desc {
  font-size: 1.35rem;
}

.detail-section p.desc strong {
  display: inline;
  padding-bottom: 5px;
  border-bottom: 1px solid #333;
  font-weight: bold;
}

.detail-section p.desc em {
  background: none;
  color: inherit;
}

@media (max-width: 24.99em) {
  .detail-section p.desc {
    font-size: 1.2rem;
  }
}

@media (min-width: 45em) {
  .detail-section p.desc {
    font-size: 2.4rem;
  }
}

/*20180802*/
.detail-magazine .list-detail {
  margin-top: 1.7em;
}

.page-article .detail-magazine .h2 {
  margin-top: 1.8em;
}

.detail-magazine .list-detail dt {
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 1.8rem;
  color: #333;
}

.detail-magazine .list-detail dd {
  margin-bottom: 25px;
}

.detail-magazine .list-detail dd:last-child {
  margin-bottom: 0;
}

.page-article .detail-magazine .figure+.h2 {
  margin-top: 0.8em;
  ;
}

.page-article .detail-magazine .txt+.figure {
  margin-top: 2.5em;
}

.page-article .detail-magazine .txt {
  margin-top: 0.4em;
}

.page-article .detail-magazine .list-detail+.figure {
  margin-top: 2.5em;
}

@media (min-width: 60em) {
  .detail-magazine .list-detail {
    margin-top: 25px;
  }

  .page-article .detail-magazine .h2 {
    margin-top: 65px;
  }

  .page-article .detail-magazine .figure+.h2 {
    margin-top: 25px;
  }

  .page-article .detail-magazine .txt+.figure {
    margin-top: 65px;
  }

  .page-article .detail-magazine .h2+.figure {
    margin-top: 20px;
  }

  .page-article .detail-magazine .list-detail+.figure {
    margin-top: 65px;
  }
}

/*20181026*/
.boutique .cover-cont .p.add {
  margin-top: -4px;
  font-size: 1.4rem
}

.boutique .line-box .indent.add {
  margin-top: -2px;
}

@media (min-width: 60em) {
  .boutique .cover-cont .p.add {
    margin-top: 21px;
    font-size: 1.6rem
  }

  .boutique .line-box .indent.add {
    margin-top: -5px;
    font-size: 1.6rem
  }
}

/* 20190314 */
.new-black-section {
  background: url('https://www.hera.com/kr/ko/static/image/trend/new/new-arrivals_01.png') no-repeat top center;
  background-size: cover;
  padding-top: 152px;
  padding-bottom: 168px;
}

.new-black-section .l-wrap .txt-area img {
  width: 100%;
}

.new-black-section .l-wrap .txt-area h1 {
  text-align: center;
  margin-bottom: 60px;
}

.new-black-section .l-wrap .txt-area h1 img {
  max-width: 598px;
}

.new-black-section .l-wrap .txt-area strong {
  display: block;
  text-align: center;
  margin-bottom: 45px;
}

.new-black-section .l-wrap .txt-area strong img {
  max-width: 364px;
}

.new-black-section .l-wrap .txt-area p {
  margin-bottom: 45px;
  text-align: center;
}

.new-black-section .l-wrap .txt-area p img {
  max-width: 547px;
}

.new-black-section .detail-video a {
  position: relative;
  display: block;
}

.new-black-section .detail-video .btn_play {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -34px;
  margin-top: -34px;
}

.new-black-section .detail-video {
  border: 2px solid #b2b2b2;
}

.new-black-section .btn {
  color: #fff;
}

.new-black-section .btn:after {
  background-color: transparent;
}

.new-black-section .btn-area {
  text-align: center;
}

@media (max-width: 60em) {
  .new-black-section {
    padding-top: 75px;
  }
}


/* 200528 footer */
#footer .pc_only {
  display: block;
}

#footer .mobile_only {
  display: none;
}
#footer .sidenav-link  {
  margin-bottom: .5em;
  display: none;
}
@media only all and (max-width: 640px) {
  #footer .pc_only {
    display: none;
  }

  #footer .mobile_only {
    display: block;
  }

  .sidenav-utils .footer-icon-img.xia {
    width: auto;
  }
  
  .sidenav-utils {position:relative;}
  .sidenav-utils .sns-links:after {display:block;content:"";clear:both;}
  .sidenav-utils .dropdown {position:absolute;top:26px;right:20px;font-size:1.3rem;}
  .sidenav-utils .dropdown-selector {min-width:176px}
  #sidenav .sidenav-link, #sidenav .footer-links, #sidenav .copyright-links, #sidenav .copyright {
    display: none;
  }
  #footer .sidenav-link  {
    margin-bottom: .5em;
    display: block;
  }
  #footer .sns-area {
    display: none;
        border-bottom: 0;
    margin-bottom: 0;
  }
}

.ap2022-sr-only {position:absolute !important; overflow:hidden !important; width:1px !important; height:1px !important; margin:-1px !important; padding:0 !important; border:0 !important; clip:rect(1px,1px,1px,1px); clip-path:inset(50%);}
/* 2023 메인 공지팝업 (공통) */
.ap2022-popup--mnotice {position:fixed; top:0; left:0; right:0; bottom:0; z-index:9999; overflow:hidden;}
.ap2022-popup--mnotice * {margin:0; padding:0;}
.ap2022-popup--mnotice *, .ap2022-popup--mnotice :after, .ap2022-popup--mnotice :before {box-sizing:border-box;}
.ap2022-popup--mnotice img {max-width:100%;}
.ap2022-popup--mnotice button:focus-visible,
.ap2022-popup--mnotice input:focus-visible {outline:1px auto !important;}
.ap2022-popup--mnotice button {overflow:visible; border:0; border-radius:0; background:none; cursor:pointer; outline:none;}
.ap2022-popup--mnotice label {cursor:pointer;}
.ap2022-popup--mnotice a {text-decoration:none;}
.ap2022-popup--mnotice .only-pc {display:block;}
.ap2022-popup--mnotice .only-mo {display:none;}
.ap2022-popup--mnotice .ap2022-popup__dimmed {position:absolute; width:100%; height:100%; top:0; left:0; background-color:rgba(0,0,0,.5);}
.ap2022-popup--mnotice .ap2022-popup__frame {position:absolute; display:flex; justify-content:center; align-items:center; width:100%; height:100%; top:0; left:0; padding:32px; text-align:center; pointer-events:none;}
.ap2022-popup--mnotice .ap2022-popup__scrollable {overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch; outline:0;}
.ap2022-popup--mnotice .ap2022-popup__scrollable::-webkit-scrollbar {width:8px; height:8px;}
.ap2022-popup--mnotice .ap2022-popup__scrollable::-webkit-scrollbar-track {background-color:rgba(0,0,0,.08); border-radius:4px; background-clip:padding-box; border:1px solid transparent;}
.ap2022-popup--mnotice .ap2022-popup__scrollable::-webkit-scrollbar-thumb {background-color:rgba(0,0,0,.16); border-radius:4px; background-clip:padding-box; border:1px solid transparent;}
.ap2022-popup--mnotice .ap2022-popup__scrollable:focus-visible::-webkit-scrollbar-track {background-color:rgba(0,0,0,.12);}
.ap2022-popup--mnotice .ap2022-popup__scrollable:focus-visible::-webkit-scrollbar-thumb {background-color:rgba(0,0,0,.24);}
.ap2022-popup--mnotice .ap2022-popup__inner {position:relative; display:inline-flex; flex-direction:column; max-width:100%; max-height:100%; background:#fff; border-radius:8px; box-shadow:0 5px 20px 5px rgba(0,0,0,.15); text-align:left; font-size:initial; line-height:normal; pointer-events:auto; outline:0;}
.ap2022-popup--mnotice .ap2022-popup__inner:focus,
.ap2022-popup--mnotice .ap2022-popup__inner:focus-visible {outline:0 !important;}
.ap2022-popup--mnotice .ap2022-popup__logo {text-align:center;}
.ap2022-popup--mnotice .ap2022-popup__logo img {width:180px; height:60px; vertical-align:top;}
.ap2022-popup--mnotice .ap2022-popup__close {position:absolute; z-index:10; top:0; right:0; width:47px; height:47px; color:#222;}
.ap2022-popup--mnotice .ap2022-popup__close svg {position:absolute; top:50%; left:50%; width:15px; height:15px; vertical-align:top; transform:translate(-50%,-50%);}
.ap2022-popup--mnotice .ap2022-popup__close:hover:before,
.ap2022-popup--mnotice .ap2022-popup__close:focus:before {content:''; position:absolute; top:50%; left:50%; width:31px; height:31px; background-color:rgba(0,0,0,.06); border-radius:50%; transform:translate(-50%,-50%);}
.ap2022-popup--mnotice .ap2022-popup__btn {display:inline-flex; align-items:center; justify-content:center; min-width:145px; max-width:50%; padding:9px 25px 9px; margin:0 3px; overflow:visible; border:1px solid rgba(34,34,34,1); border-radius:0; background:none; color:#222; font-size:14px; line-height:1.3; letter-spacing:-0.04em; word-break:keep-all; word-wrap:break-word;}
.ap2022-popup--mnotice .ap2022-popup__btn--default:hover,
.ap2022-popup--mnotice .ap2022-popup__btn--default:focus {background-color:rgba(34,34,34,.1);}
.ap2022-popup--mnotice .ap2022-popup__btn--custom {background-color:rgba(34,34,34,1); color:#fff;}
.ap2022-popup--mnotice .ap2022-popup__btn--custom:hover,
.ap2022-popup--mnotice .ap2022-popup__btn--custom:focus {background-color:rgba(34,34,34,.9);}
.ap2022-popup--mnotice .ap2022-popup__btnwrap {display:flex; justify-content:center;}
.ap2022-popup--mnotice .ap2022-popup__check {display:inline-block; vertical-align:top; color:#666; font-size:14px; line-height:1.3; letter-spacing:-0.025em;}
.ap2022-popup--mnotice .ap2022-popup__check svg {width:19px; height:19px; margin:0 0.357143em 0 0; vertical-align:-0.321429em;}
.ap2022-popup--mnotice .ap2022-popup__check svg rect {fill:#fff;}
.ap2022-popup--mnotice .ap2022-popup__check input:focus-visible + label svg {outline:1px auto;}
.ap2022-popup--mnotice .ap2022-popup__check input:checked + label svg rect {fill:#2b2b2b;}
.ap2022-popup--mnotice .ap2022-popup__check input:checked + label svg path {stroke:#fff;}
.ap2022-popup--mnotice .ap2022-popup__head {padding:25px 0 20px;}
.ap2022-popup--mnotice .ap2022-popup__body {height:100%; color:#222;}
.ap2022-popup--mnotice .ap2022-popup__body .ap2022-popup__logo {margin-bottom:20px;}
.ap2022-popup--mnotice .ap2022-popup__content {padding:0 40px; text-align:center; font-size:14px; line-height:1.7; letter-spacing:-0.025em; word-break:keep-all; word-wrap:break-word;}
.ap2022-popup--mnotice .ap2022-popup__content:first-child {margin-top:0;}
.ap2022-popup--mnotice .ap2022-popup__content--image img {max-width:100%; vertical-align:top;}
.ap2022-popup--mnotice .ap2022-popup__content--text {margin-top:25px;}
.ap2022-popup--mnotice .ap2022-popup__content--html {margin-top:20px;}
.ap2022-popup--mnotice .ap2022-popup__bottom {padding:25px 16px 16px;}
.ap2022-popup--mnotice .ap2022-popup__bottom + .ap2022-popup__bottom {padding-top:0;}
.ap2022-popup--mnotice .ap2022-popup__footer {box-sizing:border-box;}
.ap2022-popup--mnotice .ap2022-popup__footer .ap2022-popup__btnwrap {padding:25px 16px 20px; margin:0 3px; text-align:center;}
.ap2022-popup--mnotice .ap2022-popup__footer .ap2022-popup__btnwrap + .ap2022-popup__btnwrap {padding-top:0;}
.ap2022-popup--mnotice .ap2022-popup__footer .ap2022-popup__btnwrap + .ap2022-popup__bottom {padding-top:0;}
.ap2022-popup--mnotice.is--dimmed-invisible .ap2022-popup__dimmed {background-color:rgba(0,0,0,0);}
.ap2022-popup--mnotice.is--color-white .ap2022-popup__scrollable::-webkit-scrollbar-track {background-color:rgba(255,255,255,.08);}
.ap2022-popup--mnotice.is--color-white .ap2022-popup__scrollable::-webkit-scrollbar-thumb {background-color:rgba(255,255,255,.16);}
.ap2022-popup--mnotice.is--color-white .ap2022-popup__scrollable:focus-visible::-webkit-scrollbar-track {background-color:rgba(255,255,255,.12);}
.ap2022-popup--mnotice.is--color-white .ap2022-popup__scrollable:focus-visible::-webkit-scrollbar-thumb {background-color:rgba(255,255,255,.24);}
.ap2022-popup--mnotice.is--color-white .ap2022-popup__close {color:#fff;}
.ap2022-popup--mnotice.is--color-white .ap2022-popup__close:hover:before,
.ap2022-popup--mnotice.is--color-white .ap2022-popup__close:focus:before {background-color:rgba(255,255,255,.06);}
.ap2022-popup--mnotice.is--color-white .ap2022-popup__btn {border-color:rgba(255,255,255,1); color:#fff;}
.ap2022-popup--mnotice.is--color-white .ap2022-popup__btn--default:hover,
.ap2022-popup--mnotice.is--color-white .ap2022-popup__btn--default:focus {background-color:rgba(255,255,255,.1);}
.ap2022-popup--mnotice.is--color-white .ap2022-popup__btn--custom {background-color:rgba(255,255,255,1); color:#222;}
.ap2022-popup--mnotice.is--color-white .ap2022-popup__btn--custom:hover,
.ap2022-popup--mnotice.is--color-white .ap2022-popup__btn--custom:focus {background-color:rgba(255,255,255,.9);}
.ap2022-popup--mnotice.is--color-white .ap2022-popup__check {color:#fff;}
.ap2022-popup--mnotice.is--color-white .ap2022-popup__check svg rect {fill:rgba(255,255,255,.46);}
.ap2022-popup--mnotice.is--color-white .ap2022-popup__check input:checked + label svg rect {fill:#fff;}
.ap2022-popup--mnotice.is--color-white .ap2022-popup__check input:checked + label svg path {stroke:#222;}
.ap2022-popup--mnotice.is--color-white .ap2022-popup__body {color:#fff;}
@media (max-width:750px) {
  .ap2022-popup--mnotice .only-pc {display:none;}
  .ap2022-popup--mnotice .only-mo {display:block;}
  .ap2022-popup--mnotice .ap2022-popup__frame {padding:4.2666vw;}
  .ap2022-popup--mnotice .ap2022-popup__logo {margin-top:-10px;}
  .ap2022-popup--mnotice .ap2022-popup__logo img {width:120px; height:38px;}
  .ap2022-popup--mnotice .ap2022-popup__btn {min-width:50%; padding:10px 5.333333vw; font-size:13px;}
  .ap2022-popup--mnotice .ap2022-popup__check {font-size:13px;}
  .ap2022-popup--mnotice .ap2022-popup__head {padding-bottom:13px;}
  .ap2022-popup--mnotice .ap2022-popup__body .ap2022-popup__logo {margin:0 0 13px;}
  .ap2022-popup--mnotice .ap2022-popup__content {padding:0 5.333333vw; font-size:13px;}
  .ap2022-popup--mnotice .ap2022-popup__content:first-child {margin-top:0;}
  .ap2022-popup--mnotice .ap2022-popup__content--text {margin-top:20px;}
  .ap2022-popup--mnotice .ap2022-popup__content--html {margin-top:15px;}
  .ap2022-popup--mnotice .ap2022-popup__bottom {padding:20px 4vw 15px;}
  .ap2022-popup--mnotice .ap2022-popup__bottom + .ap2022-popup__bottom {padding-top:0;}
  .ap2022-popup--mnotice .ap2022-popup__footer .ap2022-popup__btnwrap {padding:20px 4vw 17px;}
  .ap2022-popup--mnotice .ap2022-popup__footer .ap2022-popup__btnwrap + .ap2022-popup__btnwrap {padding-top:0;}
  .ap2022-popup--mnotice .ap2022-popup__footer .ap2022-popup__btnwrap + .ap2022-popup__bottom {padding-top:0;}
}
/* //2023 메인 공지팝업 (공통) */