@charset "UTF-8";
/* reset */
/* @import "../font/font.css"; */
/* @import './media.scss'; */
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

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

body,
p,
h1,
h2,
h3,
h4,
h5,
h6,
em,
ul,
ol,
li,
dl,
dt,
dd,
div,
table,
th,
td,
form,
fieldset,
legend,
input,
textarea,
button,
select,
label,
iframe,
pre,
code,
blockquote,
video,
audio,
object,
img,
canvas,
address,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
object {
  margin: 0;
  padding: 0;
}

body {
  -webkit-text-size-adjust: none;
  font-weight: 400;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: inherit;
}

hr,
legend {
  display: none;
}

ul,
ol,
dl,
dt,
dd {
  list-style: none;
}

table {
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  border-collapse: collapse;
  border-spacing: 0;
}

tr,
th,
td {
  border: none;
  -webkit-box-orient: vertical;
}

caption {
  visibility: hidden;
  overflow: hidden;
  width: 0;
  height: 0;
  font-size: 0;
  line-height: 0;
}

input[type=text],
input[type=password],
input[type=button],
input[type=number],
input[type=tel],
input[type=email],
input[type=search],
input[type=hidden],
textarea,
select {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 0;
  -moz-appearance: none;
  -o-appearance: none;
  -ms-appearance: none;
  -webkit-appearance: none;
  border: none;
  background-color: transparent;
  outline: none;
}

input[type=checkbox],
input[type=radio] {
  -moz-appearance: none;
  -o-appearance: none;
  -ms-appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
  border-radius: 0;
  outline: none;
  border: none;
}

input,
textarea,
select,
button {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  vertical-align: middle;
}

button {
  overflow: visible;
  border: none;
  background-color: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  text-decoration: none;
  outline: none;
}

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

button,
a,
a:hover,
a:active,
a:focus {
  text-decoration: none;
  outline: none;
}

em {
  font-style: normal;
}

img {
  vertical-align: top;
}

a {
  color: #000;
}

i {
  font-style: normal;
}

/* ------------------------ */
@font-face {
  font-family: 'Marcellus';
  src: url("/resources/fonts/Marcellus-Regular.woff") format("woff"), url("/resources/fonts/Marcellus-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Manrope';
  src: url("/resources/fonts/Manrope-ExtraLight.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Manrope';
  src: url("/resources/fonts/Manrope-SemiBold.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Noto Sans';
  font-display: swap;
  src: url("/resources/fonts/NotoSans-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Noto Sans';
  font-display: swap;
  src: url("/resources/fonts/NotoSans-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Noto Sans';
  font-display: swap;
  src: url("/resources/fonts/NotoSans-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

html, body {
  font-size: 10px;
  overscroll-behavior: none;
}

.is-lock {
  overflow: hidden;
}

.dim {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  opacity: 0;
  z-index: 8000;
  pointer-events: none;
}

body {
  background-color: transparent;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 9000;
}

.main-inner {
  width: 100vw;
  overflow-x: hidden;
}

.bar {
  position: absolute !important;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: #000;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}

.hide-text {
  color: transparent;
  font-size: 0;
  text-indent: -9999px;
}

header.is-active h1 a svg path {
  fill: #000;
  -webkit-transition: fill 500ms ease 200ms;
  transition: fill 500ms ease 200ms;
}

.st-black h1 a svg path {
  fill: #000;
}

.st-black .button-sub span {
  background-color: #000;
}

header h1 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 19;
}

header h1 a {
  display: inline-block;
  padding: 20px;
}

header h1 a span {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 24px;
  vertical-align: top;
}

header h1 a svg {
  width: 100%;
  height: 100%;
  display: block;
}

header h1 a svg path {
  -webkit-transition: fill 400ms ease;
  transition: fill 400ms ease;
}

header .sub-menu-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  font-family: 'Marcellus';
  font-weight: 400;
  pointer-events: none;
  background-color: #fff;
  opacity: 0;
}

.button-sub,
.button-close {
  position: absolute;
  display: inline-block;
  width: 24px;
  height: 10px;
  top: 5px;
  right: 0;
  padding: 20px;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  z-index: 10;
}

.button-close {
  opacity: 0;
}

.button-sub span,
.button-close span {
  position: absolute;
  display: block;
  top: 20px;
  left: 20px;
  width: 24px;
  height: 2px;
  background-color: #fff;
  -webkit-transition: top 400ms, -webkit-transform 400ms ease;
  transition: top 400ms, -webkit-transform 400ms ease;
  transition: top 400ms, transform 400ms ease;
  transition: top 400ms, transform 400ms ease, -webkit-transform 400ms ease;
}

.button-close span {
  position: absolute;
  display: block;
  top: 20px;
  left: 20px;
  width: 20px;
  height: 2px;
  background-color: #fff;
  -webkit-transition: top 400ms, -webkit-transform 400ms ease;
  transition: top 400ms, -webkit-transform 400ms ease;
  transition: top 400ms, transform 400ms ease;
  transition: top 400ms, transform 400ms ease, -webkit-transform 400ms ease;
}

header.is-active .button-sub span {
  background-color: #000;
}

.button-sub span:nth-of-type(2),
.button-close span:nth-of-type(2) {
  top: calc(100% - 22px);
}

header.is-active .button-sub span:nth-of-type(1) {
  top: calc(100% - 24px);
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

header.is-active .button-sub span:nth-of-type(2) {
  top: calc(100% - 24px);
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.sub-menu-wrap .sub-menu-inner {
  height: auto;
  padding: 144px 20px 150px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  overflow: hidden;
}

.sub-menu .inner-text {
  vertical-align: middle;
}

.sub-menu .sub-list-anchor {
  position: relative;
  padding: 4px 0;
}

.is-lock .inner-sub-menu a {
  pointer-events: auto;
}

.inner-sub-menu > ul {
  padding: 12px 0 16px;
}

.inner-sub-menu .inner-text {
  pointer-events: none;
}

.sub-list-anchor .inner-text {
  position: relative;
  display: inline-block;
  padding-right: 16px;
  pointer-events: none;
}

.sub-list.is-single .sub-list-anchor .inner-text {
  padding-right: 0;
}

.sub-list.is-single .sub-list-anchor .inner-text::after {
  display: none;
}

.sub-list .sub-list-anchor .inner-text::after {
  position: absolute;
  content: "";
  top: calc(50% - 3px);
  right: 0;
  width: 10px;
  height: 8px;
  background-image: url(../images/icon/icon-triangle.svg);
  background-size: contain;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  -webkit-transition: -webkit-transform 300ms ease-out;
  transition: -webkit-transform 300ms ease-out;
  transition: transform 300ms ease-out;
  transition: transform 300ms ease-out, -webkit-transform 300ms ease-out;
}

.sub-list .sub-list-anchor.is-active .inner-text::after {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

.sub-menu .sub-list-anchor span {
  display: inline-block;
  overflow: hidden;
}

.x_text_transition {
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  opacity: 0;
}

.inner-sub-menu {
  position: relative;
  height: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}

.sub-menu-main,
.sub-menu-more {
  font-family: 'Noto Sans';
}

.sub-menu-main .inner-sub-menu a,
.sub-menu-main .inner-sub-menu a span,
.sub-menu-main .show-more-li,
.sub-menu-more .inner-sub-menu a,
.sub-menu-more .inner-sub-menu a span,
.sub-menu-more .show-more-li {
  position: relative;
  display: inline-block;
  font-size: 1.4rem;
  line-height: 2.4rem;
  vertical-align: middle;
  overflow: hidden;
}

.sub-menu-main .inner-sub-menu a .inner--text,
.sub-menu-main .inner-sub-menu a span .inner--text,
.sub-menu-main .show-more-li .inner--text,
.sub-menu-more .inner-sub-menu a .inner--text,
.sub-menu-more .inner-sub-menu a span .inner--text,
.sub-menu-more .show-more-li .inner--text {
  pointer-events: none;
}

.sub-menu-main .inner-sub-menu a,
.sub-menu-more .inner-sub-menu a {
  display: block;
  color: rgba(0, 0, 0, 0.3);
  font-family: 'Manrope';
  font-weight: 500;
}

.sub-menu-main .inner-sub-menu a .bar,
.sub-menu-more .inner-sub-menu a .bar {
  bottom: 2px;
}

.sub-menu-main .sub-list-anchor,
.sub-menu-more .sub-list-anchor {
  position: relative;
  display: block;
  font-size: 2rem;
  letter-spacing: -.02rem;
  line-height: 2.4rem;
  overflow: hidden;
}

.sub-menu-main .inner-sub-menu li,
.sub-menu-more .inner-sub-menu li {
  padding: 4px 0;
  pointer-events: none;
}

.sub-menu-main .inner-sub-menu li.kr a,
.sub-menu-more .inner-sub-menu li.kr a {
  font-family: 'Noto Sans';
  font-weight: 400;
}

.sub-menu-main .inner-sub-menu a,
.sub-menu-more .inner-sub-menu a {
  padding-right: 10px;
}

.sub-menu-main .depth3-menu,
.sub-menu-more .depth3-menu {
  -webkit-transform: translateY(-29px);
          transform: translateY(-29px);
  height: 0;
  overflow: hidden;
}

.sub-menu-main .depth3-menu > a,
.sub-menu-more .depth3-menu > a {
  padding: 4px 0;
}

.sub-menu-main .sub-list {
  padding: 6px 0;
}

.sub-menu-main .inner-sub-menu a {
  color: #000;
}

.sub-menu-more {
  margin-top: 50px;
}

.sub-menu-more .sub-list {
  padding: 4px 0;
}

.sub-menu-more .sub-list a {
  font-family: 'Marcellus';
}

.inner-sub-menu a {
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  opacity: 0;
}

.sub-menu-outlinks {
  padding-top: 40px;
  font-family: 'Manrope';
  font-weight: 600;
}

.sub-menu-outlinks .sub-list a {
  display: inline-block;
  padding: 0;
  overflow: hidden;
}

.sub-menu-outlinks .inner-text {
  display: inline-block;
  padding: 8px 0;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.8rem;
}

.sub-menu-outlinks .sub-list-anchor .inner-text {
  padding-right: 12px;
}

.sub-menu-outlinks .sub-list-anchor .inner-text::after {
  top: calc(50% - 2px);
  width: 6px;
  height: 4.5px;
}

.sub-menu-outlinks .inner-sub-menu li {
  padding: 4px 0;
  font-size: 0;
}

.sub-menu-outlinks .inner-sub-menu li a,
.sub-menu-outlinks .inner-sub-menu li a span {
  position: relative;
  display: inline-block;
  padding: 2px 0;
  overflow: hidden;
}

.sub-menu-outlinks .inner-sub-menu {
  padding-top: 4px;
}

.link-language {
  padding: 52px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-left: -15px;
}

.link-language li {
  padding: 0 10px;
  font-size: 0;
}

.link-language a {
  padding: 4px 5px;
  display: inline-block;
  color: rgba(0, 0, 0, 0.3);
  font-family: 'Manrope';
  font-size: 1.4rem;
  font-weight: 500;
}

.link-language a.is-active {
  color: #000;
  text-decoration: underline;
}

.button-shop {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 8999;
}

.st-black .button-shop .button-inner {
  background-color: #000;
}

.st-black .button-shop .button-inner .text {
  color: #fff;
}

.st-black .button-shop .button-inner .icon {
  -webkit-filter: invert(1);
          filter: invert(1);
}

.st-black .button-shop .button-inner.is-active {
  background-color: #fff;
}

.st-black .button-shop .button-inner.is-active .icon {
  -webkit-filter: invert(0);
          filter: invert(0);
}

.button-shop .button-inner {
  position: relative;
  display: inline-block;
  height: 40px;
  background-color: #fff;
  overflow: hidden;
  border-radius: 20px;
  -webkit-box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.1);
          box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.1);
  -webkit-transition: background-color 400ms ease;
  transition: background-color 400ms ease;
}

.button-shop .button-inner div {
  display: inline-block;
  vertical-align: top;
}

.button-shop .button-inner .text {
  padding: 0 35px 0 16px;
  font-family: 'Manrope';
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 4rem;
  vertical-align: middle;
  -webkit-transition: color 400ms ease;
  transition: color 400ms ease;
}

.button-shop .button-inner .icon-wrap {
  position: absolute;
  display: inline-block;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
}

.button-shop .button-inner .icon {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-image: url(../images/icon/icon-cart-2.svg);
  background-size: contain;
  -webkit-transition: -webkit-filter 400ms ease;
  transition: -webkit-filter 400ms ease;
  transition: filter 400ms ease;
  transition: filter 400ms ease, -webkit-filter 400ms ease;
}

.button-shop .button-inner .hide {
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  background-image: url(../images/icon/icon-close.svg);
}

.shop-links a,
.shop-links a .shop-text {
  font-family: 'Noto Sans';
  font-weight: 400;
  letter-spacing: -.046rem;
  display: inline-block;
  color: #fff;
  font-size: 1.4rem;
  letter-spacing: -.03rem;
  line-height: 4rem;
  vertical-align: middle;
}

.shop-links {
  position: fixed;
  bottom: 70px;
  right: 0;
  height: 0;
  overflow: hidden;
}

.shop-links li {
  padding: 10px 0;
  text-align: right;
  overflow: hidden;
}

.shop-links a {
  padding: 0 20px;
}

.shop-links a span {
  display: inline-block;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  opacity: 0;
}

.shop-links .shop-text {
  padding-right: 16px;
}

.shop-links .shop-icon {
  vertical-align: top;
  display: inline-block;
  width: 40px;
  height: 40px;
  background-color: #fff;
  border-radius: 50%;
  background-size: contain;
}

.shop-links li:nth-of-type(1) .shop-icon {
  background-image: url(../images/icon/shop-icon-2.svg);
}

.shop-links li:nth-of-type(2) .shop-icon {
  background-image: url(../images/icon/shop-icon-3.svg);
}

.swiper-slide {
  position: relative;
}

.swiper-slide .visual-wrap {
  position: relative;
  z-index: 1;
}

.visual-wrap {
  width: 100vw;
  height: 100%;
}

.visual-wrap img, .visual-wrap video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  pointer-events: none;
}

.text-wrap {
  padding: 80px 20px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.text-sub {
  font-family: 'Manrope';
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.8rem;
  opacity: 0;
  color: #999;
}

.content-key.st-white-header .text-sub, .content-key.st-white-header .text-description {
  color: #fff;
}

.text-title {
  font-family: 'Marcellus';
  font-weight: 400;
}

.text-title,
.text-title span {
  font-size: 3.6rem;
  line-height: 4.4rem;
  vertical-align: middle;
}

.text-product-key .text-title,
.text-product-key .text-description {
  opacity: 0;
  overflow: hidden;
}

.text-product-key .text-title {
  line-height: 5.4rem;
}

.text-product-key .text-description {
  padding: 12px 0 33px;
}

.masking-wrap {
  display: block;
  overflow: hidden;
}

.masking-wrap .masking-text {
  display: inline-block;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  opacity: 0;
}

.text-description {
  font-family: 'Noto Sans';
  font-weight: 400;
  letter-spacing: -.046rem;
  padding: 18px 0 40px;
  color: #999;
  font-size: 1.4rem;
  line-height: 3rem;
  opacity: 0;
}

.main-text-wrap {
  position: absolute;
  left: 0;
  bottom: 45px;
  z-index: 2;
  color: #fff;
}

.swiper-slide .main-text-wrap {
  position: absolute !important;
  display: block;
  bottom: 80px;
  pointer-events: none;
}

.content .swiper-slide.swiper-slide-active .main-text-wrap,
.content .swiper-slide.swiper-slide.swiper-slide-duplicate-active .main-text-wrap {
  pointer-events: auto;
}

.typo-image {
  position: relative;
  width: calc(100% - 40px);
  height: 0;
  margin: 0 auto;
  padding-bottom: 46.7%;
  z-index: 2;
}

.typo-image span {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
}

.content-about .text-description {
  padding: 14px 0 40px;
}

.content-about .typo-image {
  -webkit-transform: translateY(14.9%);
          transform: translateY(14.9%);
}

.content-about .typo-image span {
  opacity: 0;
}

.content-about .typo-image span:nth-of-type(1) {
  background-image: url("../images/main/main-typo-1.png");
}

.content-about .typo-image span:nth-of-type(2) {
  background-image: url("../images/main/main-typo-2.png");
}

.content-about .typo-image span:nth-of-type(3) {
  background-image: url("../images/main/main-typo-3.png");
}

.content-about .typo-image span:nth-of-type(4) {
  background-image: url("../images/main/main-typo-4.png");
}

.content-about .typo-image span:nth-of-type(5) {
  background-image: url("../images/main/main-typo-5.png");
}

.content {
  position: relative;
  padding: 0 0 120px;
}

.content-about {
  padding: 54px 0 35.8vw;
  margin-bottom: 120px;
}

.content-key .text-wrap {
  padding: 0 20px;
}

.content-tvcf.content-key .text-wrap {
  bottom: 76px;
}

.float-image {
  position: relative;
  width: calc(100vw - 20px);
  overflow: hidden;
}

.content-about .float-image {
  margin-left: auto;
}

.content-deephydrab5 .float-image {
  right: 0;
  left: auto;
}

.float-image-absolute.float-image-absolute {
  position: absolute;
  top: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.float-image-absolute img {
  position: relative;
  z-index: 2;
}

.float-image img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.button-view {
  display: block;
  opacity: 0;
}

.content .swiper-slide .button-view {
  pointer-events: none;
}

.content .swiper-slide.swiper-slide-active .button-view,
.content .swiper-slide.swiper-slide.swiper-slide-duplicate-active .button-view {
  pointer-events: auto;
}

.button-view span {
  display: inline-block;
  vertical-align: top;
}

.button-text {
  padding-right: 20px;
  color: #999;
  font-family: 'Manrope';
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 4rem;
}

.button-icon {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.button-icon::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../images/icon/icon-arrow-white.svg);
  background-size: contain;
  background-repeat: no-repeat;
}

.button-icon.icon-gray::after {
  background-image: url(../images/icon/icon-arrow-gray.svg);
}

.st-brown .text-sub {
  color: #C5BAAE;
}

.st-brown .button-icon {
  background-color: #C5BAAE;
}

.st-blue .text-sub {
  color: #7AABAD;
}

.st-blue .button-icon {
  background-color: #7AABAD;
}

.st-gray .text-sub {
  color: #999;
}

.st-gray .button-icon {
  background-color: #999;
}

.content-hyabalance {
  padding: 35.8vw 0 calc(47.22vw + 158px);
  background-color: #222;
}

.content-deephydrab5 {
  padding: 47.22vw 0 calc(34.3vw + 152px);
  background-color: #F7F7F7;
}

.content-deephydrab5 .text-wrap {
  padding: 76px 20px 80px;
}

.content-deephydrab5 .button-view {
  padding-top: 0;
}

.content-orurstore {
  padding: 34.3vw 0 0;
}

.content-orurstore .text-description {
  padding: 14px 0 40px;
}

.content-orurstore .button-view {
  padding-top: 0;
}

.st-white {
  color: #fff;
}

.st-white .text-wrap .text-description {
  color: #999;
}

.product-list-wrap {
  margin-top: 40px;
  padding: 0 20px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.product-list-wrap .product-list {
  width: 50%;
  padding: 0 0 42px;
  /* 201027 ws 수정*/
}

.product-list-wrap .product-list .product-image {
  overflow: hidden;
}

#sorting_list {
  min-height: 100vh;
  margin-top: 20px;
}

#sorting_list .product-list {
  padding: 0 0 54px;
  opacity: 0;
  -webkit-transform: translateY(10%);
          transform: translateY(10%);
}

#sorting_list .info-title {
  margin: 40px 0 16px;
  opacity: 0;
}

.product-list-full {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.product-list-full .product-list {
  width: 100%;
  padding: 0 0 60px;
}

.product-list-full .product-list .info-title {
  margin: 3px 0 10px;
  font-family: 'Marcellus';
  font-weight: 400;
  font-size: 2.8rem;
  line-height: 4rem;
  letter-spacing: 0;
}

.product-list-full .product-info .info-description {
  margin-bottom: 30px;
}

.product-hyabalance .product-list-full .product-list .info-title {
  color: #fff;
}

.product-list img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.product-list .product-info {
  text-align: center;
}

.product-info .info-title {
  font-family: 'Noto Sans';
  font-weight: 400;
  letter-spacing: -.046rem;
  margin: 40px 0 18px;
  font-size: 1.4rem;
  line-height: 2.6rem;
}

.content-hyabalance .product-info .info-title {
  color: #fff;
}

.product-info .info-line {
  padding-top: 40px;
  color: #999;
  font-family: 'Manrope';
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 2rem;
  opacity: 0;
}

.product-info .info-description {
  font-family: 'Noto Sans';
  font-weight: 400;
  letter-spacing: -.046rem;
  color: #999;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 3rem;
  opacity: 0;
}

.product-info .info-price {
  color: #999;
  font-family: 'Manrope';
  font-size: 1.4rem;
  font-weight: 500;
  opacity: 0;
}

.visual-grid-wrap {
  padding: 60px 0;
  margin-bottom: 65px;
}

.visual-grid-wrap .visual-list {
  position: relative;
  z-index: 2;
  overflow: hidden;
}

.content-orurstore .visual-grid-wrap .visual-list:nth-of-type(1) {
  width: 44.44vw;
  margin-left: 20px;
  z-index: 1;
}

.content-orurstore .visual-grid-wrap .visual-list.visual-absolute {
  position: relative;
  width: 72.22vw;
  margin-left: auto;
  -webkit-transform: translateY(-38.46%);
          transform: translateY(-38.46%);
  z-index: 0;
}

.visual-grid-wrap .visual-list img {
  width: 100%;
}

.content-sub-story .content-key video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.content-product-detail .video-wrap {
  margin-top: 120px;
}

.content-product-detail .video-wrap video {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.content-product-detail .text-title,
.content-product-detail .text-title span {
  line-height: 5.4rem;
}

.content-product-feature .text-title,
.content-product-feature .text-title span {
  font-family: 'Noto Sans';
  letter-spacing: -.04em;
}

.text-product-detail .text-description {
  padding: 20px 0 22px;
}

.content-sub-story .visual-grid-wrap .visual-list.visual-absolute img {
  -webkit-transform: scale(1.2) translate(-8%, 2%);
          transform: scale(1.2) translate(-8%, 2%);
}

.content-sub-story .visual-grid-wrap .visual-list.st-align-left img {
  -webkit-transform-origin: right center;
          transform-origin: right center;
}

footer {
  background-color: #F7F7F7;
}

.footer-links {
  padding: 20px 0 0;
}

.footer-links .text-wrap {
  padding: 80px 20px 40px;
}

.footer-links li {
  margin-bottom: 13px;
  overflow: hidden;
}

.footer-links li a {
  display: inline-block;
  -webkit-transform: translateX(30px);
          transform: translateX(30px);
  opacity: 0;
}

.footer-info {
  width: 100vw;
  padding: 74px 20px 38px;
  overflow: hidden;
}

.footer-info li {
  font-family: 'Noto Sans';
  font-weight: 400;
  letter-spacing: -.046rem;
  color: #999;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 3rem;
  overflow: hidden;
}

.footer-info li.st-black {
  color: #000;
}

.footer-info li a {
  color: #999;
}

.content-product-about {
  padding: 20px 0 calc(34.3vw + 14 0px);
  background-color: #222;
}

.content-product-about .text-wrap {
  padding: 85px 20px 80px;
}

.content-product-deephydrab5 {
  padding: calc(34.3vw + 20px) 0 120px;
}

.content-sub .main-text-wrap {
  bottom: 40px;
}

.swiper-slide.st-black .main-text-wrap,
.swiper-slide.st-black .text-description,
.swiper-slide.st-black .button-text {
  color: #000;
}

.main-text-wrap .button-icon {
  background-color: transparent;
}

.swiper-slide .button-icon::after {
  background-image: url(../images/icon/icon-arrow-main.svg) !important;
}

.swiper-slide.st-black .button-icon::after {
  background-image: url(../images/icon/icon-arrow-black.svg) !important;
}

.content-sub-story .content-key .main-text-wrap {
  bottom: 74px;
}

.product-deephydrab5 .content-product-deephydrab5 {
  padding: calc(34.3vw + 40px) 0 calc(34.3vw + 136px);
  background-color: #F7F7F7;
}

.product-deephydrab5 .content-product-about {
  padding: 20px 0 34.3vw;
  background-color: #fff;
}

.product-deephydrab5 .content-product-about .text-wrap {
  padding: 80px 20px 48px;
}

.content-product-hyabalance {
  padding: calc(34.3vw + 20px) 0 120px;
}

.product-hyabalance .product-list-wrap .info-price {
  color: #7AABAD;
}

.line-category {
  position: fixed;
  top: 0;
  left: 0;
  padding-top: 64px;
  overflow: auto;
  background-color: #fff;
  z-index: 10;
  opacity: 0;
}

.line-category ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  float: left;
  padding: 0 40px 0 10px;
  width: 100vw;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  overflow: auto;
}

.line-category li {
  padding: 0 12.5px;
  white-space: nowrap;
}

.line-category li:last-of-type {
  padding-right: 40px;
}

.line-category button {
  color: black;
  font-family: 'Manrope';
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 4.8rem;
  letter-spacing: -.02rem;
  -webkit-transition: color 0.4s ease;
  transition: color 0.4s ease;
  overflow: hidden;
}

.line-category button.is-active {
  color: black;
}

.line-category button.kr {
  font-size: 1.4rem;
  font-weight: 400;
  font-family: 'Noto Sans';
}

.line-category button .inner--text {
  position: relative;
  overflow: hidden;
}

.line-category li.depth1-active {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0px;
  background: #fff;
  padding-right: 0;
  z-index: 9;
}

.line-category li.depth1-active::before {
  content: '';
  position: absolute;
  top: -1px;
  right: -20px;
  width: 20px;
  height: 100%;
  background: -webkit-gradient(linear, left top, right top, from(#fff), color-stop(80%, rgba(255, 255, 255, 0.01)));
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.01) 80%);
  z-index: 2;
  pointer-events: none;
}

.line-category li.depth1-active::after {
  content: '';
  position: absolute;
  top: 0;
  right: 100%;
  width: 20px;
  height: 100%;
  background: #fff;
}

.line-category li.depth1-active button {
  position: relative;
  padding: 0 21px 0 16px;
}

.line-category li.depth1-active button::after, .line-category li.depth1-active button::before {
  display: inline-block;
  position: absolute;
}

.line-category li.depth1-active button::before {
  content: '';
  top: 40%;
  left: 4px;
  width: 4px;
  height: 4px;
  border-right: 2px solid #000;
  border-top: 2px solid #000;
  -webkit-transform: rotate(225deg) translateY(-50%);
          transform: rotate(225deg) translateY(-50%);
}

.line-category li.depth1-active button::after {
  content: '';
  height: 10px;
  width: 1px;
  background-color: rgba(0, 0, 0, 0.3);
  right: 0px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.line-category li.depth1-active + li {
  padding-left: 20px;
}

.content-list {
  margin: 134px 0 16px;
}

.content-key {
  position: relative;
  padding: 0;
  height: 100vh;
  min-height: -webkit-fill-available;
  overflow: hidden;
}

.content-key .text-description {
  padding: 15px 0 40px;
}

.content-key .swiper-slide .text-description {
  color: #fff;
}

.st-black .swiper-slide .text-description {
  color: #000;
}

.content-product-detail .content-key {
  height: auto !important;
}

.key-detail .visual-wrap {
  position: relative;
  width: 100vw;
  height: auto;
  z-index: 1;
}

.key-detail .key-product {
  padding-top: 150px;
  opacity: 0;
}

.key-detail .key-product img {
  -o-object-fit: cover;
     object-fit: cover;
  height: auto;
}

.key-detail .key-background {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
}

.text-volume {
  margin-left: -12px;
  opacity: 0;
}

.text-volume span {
  position: relative;
  display: inline-block;
  padding: 0 12px;
  color: #999;
  font-family: 'Manrope';
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 2.6rem;
  vertical-align: middle;
}

.text-volume span:nth-of-type(1)::after {
  position: absolute;
  content: "";
  top: calc(50% - 6px);
  right: -1px;
  width: 1px;
  height: 13px;
  background: #ccc;
}

/* 201027 ws 추가 */
.text-volume span a {
  display: inline-block;
  color: #999;
}

.text-volume span a.active {
  color: #000;
  text-decoration: underline;
}

.text-volume span a:first-child:after {
  content: '/';
  display: inline-block;
  margin: 0 12px;
  color: #999;
}

.volume_tab span:nth-of-type(1) {
  display: block;
  margin-bottom: 55px;
}

.volume_tab span:nth-of-type(1)::after {
  display: none;
}

.button-cart {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 40px;
  margin-left: 6px;
  background-image: url(../images/icon/icon-cart.svg);
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
  pointer-events: auto;
  z-index: 100;
}

.content-product-key {
  position: relative;
  width: 100%;
  /* 201027 ws 수정 */
  padding: 0;
  overflow: hidden;
}

.content-product-key img {
  width: 100%;
}

.content-product-key div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.content-product-key img {
  opacity: 0;
}

.content-product-key div img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.key-visual-typo {
  z-index: 0;
}

.key-visual-texture {
  z-index: 1;
}

.key-visual-product {
  position: relative;
  z-index: 2;
}

/*201027 추가*/
.hand_wrap {
  padding-bottom: 0;
}

.key-square .hand_cut {
  margin-top: 0;
}

/*201027 ws 추가 끝*/
.content-product-feature {
  padding-bottom: calc(100vw - 160px);
  background-color: #F7F7F7;
}

.content-product-feature.feature-single {
  padding-bottom: calc(35vw - 10px);
}

.content-product-feature.feature-single-square {
  padding-bottom: calc(50vw + 10px);
}

.content-product-feature.feature-n2 {
  padding-bottom: calc(100vw - 110px);
}

.content-product-feature.feature-n2 .description-howto {
  margin-bottom: 30px;
}

.content-product-feature.feature-n2 .text-wrap {
  padding: 80px 20px 0;
}

.content-product-inforamtion {
  background-color: #F7F7F7;
}

.content-product-inforamtion .text-description {
  padding-top: 50px;
}

.content-product-feature .text-sub {
  padding-bottom: 12px;
}

.content-product-feature .text-sub .text-title, .content-product-feature .text-sub .text-title span {
  line-height: 5.4rem;
}

.text-product-detail .text-description,
.text-product-inforamtion .text-description {
  opacity: 1;
}

.text-product-detail .text-description p {
  opacity: 0;
}

.text-description dl {
  padding: 10px 0;
  opacity: 0;
}

.text-description dt {
  padding: 0 0 10px 0;
  color: #000;
  /* 201027 ws 추가*/
  font-weight: 500;
}

.description-howto.text-description dt {
  padding: 0;
}

.description-howto.text-description dl {
  padding: 0 0 10px;
}

.content-product-inforamtion .text-description dt {
  padding: 0;
}

.content-product-inforamtion .text-description dd {
  margin-top: -1px;
}

.content-product-inforamtion .text-description dl {
  padding: 0 0 10px;
}

.text-description dd {
  color: #999;
}

/*201027 ws 추가*/
.content-product-inforamtion .text-description dl:last-child dd:last-child {
  margin-top: 28px;
}

.description-howto {
  margin-top: 17px;
  margin-bottom: 0;
}

.visual-grid-product {
  position: relative;
  width: 100vw;
  padding: 0;
  margin: 0;
}

/* 201027 ws 추가*/
.img_prd {
  margin-top: calc(-50vw - 10px);
}

.img_texture {
  margin-top: calc(-35vw + 10px);
}

/* 201027 ws 추가 끝*/
.content-product-detail .visual-grid-wrap .visual-list.visual-absolute {
  -webkit-transform: translateY(calc(-100% + 60px));
          transform: translateY(calc(-100% + 60px));
}

.content-sub-story .visual-grid-wrap .visual-list.visual-absolute {
  -webkit-transform: translateY(-76.92%);
          transform: translateY(-76.92%);
}

.visual-grid-wrap .visual-list.visual-square {
  width: calc(100% - 100px);
  margin-left: 0;
}

.visual-grid-wrap .visual-list.visual-full {
  width: calc(100% - 20px);
}

.visual-grid-wrap .visual-list {
  margin-left: auto;
}

.visual-grid-product .visual-list.visual-absolute,
.visual-list.visual-absolute {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: none;
          transform: none;
  z-index: 3;
}

.visual-list-single {
  margin-top: -220px;
}

.content-brand-symbol {
  width: 100vw;
  padding-top: 38px;
  padding-bottom: 33.75vw;
  background-color: #F9F7F4;
  overflow-x: hidden;
}

.content-sub-story .visual-grid-product {
  background-color: #F9F7F4;
}

.content-relatedproduct {
  padding: 40px 0 65px;
  /* 1027 ws 수정*/
}

.content-relatedproduct .text-wrap {
  padding: 80px 20px 32px;
}

.footer-white {
  background-color: #fff;
}

.content-product-inforamtion {
  padding: 0;
}

.content-product-inforamtion .text-wrap {
  padding: 80px 20px 62px;
}

.content-sub-story .text-wrap {
  color: #000;
}

.content-sub-story .text-wrap .text-sub {
  padding-bottom: 10px;
  color: #000;
}

.content-sub-story .content-key .text-description {
  padding: 19px 0 0;
  color: #000;
  opacity: 1;
}

.content-sub-story .content-key .text-description.description-n1 {
  opacity: 0;
}

.content-sub-story .content-key .text-description .st-words {
  display: inline-block;
  overflow: hidden;
}

.content-sub-story .content-key .text-description .st-words .inner {
  opacity: 0;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
}

.content-sub-story .text-description + .text-description {
  padding: 0;
}

.content-sub-story .visual-wrap {
  opacity: 0;
}

.content-brand-philosophy {
  padding: 80px 0 calc(163vw - 130px);
}

.content-brand-philosophy .text-wrap {
  padding: 85px 20px 66px;
}

.content-brand-philosophy .text-title {
  opacity: 0;
}

.content-brand-philosophy .text-description {
  padding: 22px 0 40px;
  color: #999;
}

.content-brand-philosophy .text-description p {
  padding: 5px 0;
}

.content-sub-story .visual-grid-wrap .visual-list:nth-of-type(1) {
  left: auto;
  right: 0;
  -webkit-transform: translateY(-90.63%);
          transform: translateY(-90.63%);
}

.content-sub-story .visual-grid-wrap .visual-list:nth-of-type(2) {
  margin-left: unset;
}

.content-brand-philosophy2 {
  padding: 33.75vw 0 70px;
}

.content-brand-philosophy2 .text-title, .content-brand-philosophy2 .text-title span {
  line-height: 5.4rem;
}

.content-brand-philosophy2 .float-image-absolute.float-image-absolute {
  right: 0;
}

.content-brand-philosophy2 .text-description {
  opacity: 1;
}

.content-brand-philosophy2 p {
  padding: 0;
  opacity: 0;
}

.content-brand-philosophy2 .text-description p + p {
  padding-top: 10px;
}

.typo-list .text-description dd {
  padding-top: 10px;
}

.typo-list .typo-image {
  width: 100%;
  height: auto;
  padding: 0;
}

.typo-list .typo-image img {
  width: 100%;
  opacity: 0;
}

.typo-list .typo-image span {
  opacity: 0;
}

.typo-list .text-description,
.typo-list .text-description dl {
  opacity: 1;
}

.typo-list .text-description dt,
.typo-list .text-description dd {
  opacity: 0;
}

.typo-list .text-description dt {
  padding: 0;
}

.typo-list .text-description dl {
  padding: 10px 0 0;
}

.typo-list .text-description {
  padding: 14px 0 90px;
}

.typo-solid span:nth-of-type(1) {
  background-image: url(../images/brand-story/story-typo-solid-2.png);
}

.typo-solid span:nth-of-type(2) {
  background-image: url(../images/brand-story/story-typo-solid-3.png);
}

.typo-slow span:nth-of-type(1) {
  background-image: url(../images/brand-story/story-typo-slow-2.png);
}

.typo-slow span:nth-of-type(2) {
  background-image: url(../images/brand-story/story-typo-slow-3.png);
}

.typo-slow span:nth-of-type(3) {
  background-image: url(../images/brand-story/story-typo-slow-4.png);
}

.typo-slow .typo-n2 span {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 33%;
  background-color: #fff;
}

.typo-balance span {
  background-image: url(../images/brand-story/story-typo-balance-2.png);
}

.typo-balance .image-wrap,
.typo-balance .image-wrap span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
}

.typo-balance .image-wrap span {
  opacity: 0;
}

.typo-balance .image-wrap span:nth-of-type(1) {
  background-image: url("../images/brand-story/story-typo-balance-3-1.png");
}

.typo-balance .image-wrap span:nth-of-type(2) {
  background-image: url("../images/brand-story/story-typo-balance-3-2.png");
}

.typo-balance .image-wrap span:nth-of-type(3) {
  background-image: url("../images/brand-story/story-typo-balance-3-3.png");
}

.typo-balance .image-wrap span:nth-of-type(4) {
  background-image: url("../images/brand-story/story-typo-balance-3-4.png");
}

.typo-balance .image-wrap span:nth-of-type(5) {
  background-image: url("../images/brand-story/story-typo-balance-3-5.png");
}

.typo-balance .image-wrap span:nth-of-type(6) {
  background-image: url("../images/brand-story/story-typo-balance-3-6.png");
}

.typo-balance .image-wrap span:nth-of-type(7) {
  background-image: url("../images/brand-story/story-typo-balance-3-7.png");
}

.typo-balance .image-wrap span:nth-of-type(8) {
  background-image: url("../images/brand-story/story-typo-balance-3-8.png");
}

.typo-ourway {
  position: relative;
  width: calc(100% - 40px);
  margin: 0 auto;
  -webkit-transform: translateY(44.1%);
          transform: translateY(44.1%);
  z-index: 1;
}

.typo-ourway .image-n1,
.typo-ourway .image-n2 {
  opacity: 0;
  -webkit-transform: translateY(-21%);
          transform: translateY(-21%);
}

.typo-ourway span:nth-of-type(1) {
  background-image: url("../images/brand-story/story-typo-ourway-2.png");
}

.typo-ourway span:nth-of-type(2) {
  background-image: url("../images/brand-story/story-typo-ourway-3.png");
}

.typo-ourway span:nth-of-type(3) {
  background-image: url("../images/brand-story/story-typo-ourway-4.png");
}

.typo-ourway span:nth-of-type(4) {
  background-image: url("../images/brand-story/story-typo-ourway-5.png");
}

.typo-ourway span:nth-of-type(5) {
  background-image: url("../images/brand-story/story-typo-ourway-6.png");
}

.typo-ourway span:nth-of-type(6) {
  background-image: url("../images/brand-story/story-typo-ourway-7.png");
}

.typo-ourway span:nth-of-type(7) {
  background-image: url("../images/brand-story/story-typo-ourway-8.png");
}

.typo-ourway span:nth-of-type(8) {
  background-image: url("../images/brand-story/story-typo-ourway-9.png");
}

.typo-ourway span:nth-of-type(9) {
  background-image: url("../images/brand-story/story-typo-ourway-10.png");
}

.typo-ourway span:nth-of-type(10) {
  background-image: url("../images/brand-story/story-typo-ourway-11.png");
}

.content-sub-story .content-brand-symbol .text-wrap {
  padding: 118px 20px 100px;
}

.content-sub-story .content-brand-philosophy2 .text-wrap {
  padding: 120px 20px 80px;
}

.outlink-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 16px;
  background-image: url(../images/icon/icon-outlink.svg);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}

.content-store-online {
  padding: 118px 0 10px;
}

.content-store-online li {
  padding: 10px 0;
  line-height: 2rem;
  overflow: hidden;
}

.content-store-online .text-description {
  padding: 20px 0;
  opacity: 1;
}

.content-store-online li a {
  display: inline-block;
  line-height: 2rem;
}

.content-store-online li a .text {
  position: relative;
  display: inline-block;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  opacity: 0;
}

.content-store-offline .text-wrap {
  padding: 0 20px 19px;
}

.content-store-offline .text-wrap .text-description {
  padding: 15px 0 40px;
}

.content-store-offline .text-wrap .text-description p + p {
  padding-top: 13px;
}

.content-store-offline .visual-wrap {
  height: auto;
}

.content-store-offline .visual-wrap img {
  width: 100vw;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0;
}

.content-store-offline .text-title span {
  display: inline-block;
  opacity: 0;
}

.content-store-offline .text-title .title-n2 {
  width: 0;
  overflow: hidden;
}

.store-list {
  margin-bottom: 60px;
}

.content-store-offline {
  padding: 0 0 60px;
}

.text-description p + p {
  padding-top: 20px;
}

.content-contact-info .typo-image {
  width: 80vw;
  height: auto;
  padding-bottom: 0;
  margin: unset;
}

.content-contact-info .typo-image img {
  opacity: 0;
  width: 100%;
}

.content-contact .text-description {
  padding: 23px 0 40px;
  opacity: 1;
  color: #000;
}

.content-contact .text-description p {
  opacity: 0;
}

.content-contact .text-description li {
  height: 3rem;
}

.contact-list {
  color: #000;
  opacity: 0;
}

.content-contact-info .typo-image span {
  opacity: 0;
  background-image: url(../images/contact-us/contact-typo-2.png);
}

.content-contact-description {
  padding: 10px 0 0;
}

.content-contact-description .text-wrap {
  padding-bottom: 20px;
}

.content-contact-info {
  padding: 0 0 102px;
}

.content-contact-info .text-wrap {
  padding: 30px 20px 0;
}

.content-contact-info a {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.content-contact-info .bar {
  height: 2px;
  bottom: 2px;
}

.sub-menu-outlinks .inner-sub-menu li a .bar {
  display: none;
}

.modal-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  z-index: 9400;
  pointer-events: none;
  opacity: 0;
}

.popup-wrap p {
  font-family: 'Noto Sans';
  font-weight: 400;
  letter-spacing: -.046rem;
  padding: 46px 20px 20px;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2.8rem;
}

.popup-wrap .fixed-area p {
  line-height: 2.6rem;
  overflow: hidden;
}

.popup-wrap .fixed-area p span {
  display: inline-block;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  opacity: 0;
}

.popup-wrap .scroll-area {
  height: calc(100vh - 104px);
  overflow: auto;
  pointer-events: none;
}

.modal-popup.is-active {
  pointer-events: auto;
}

.modal-popup.is-active .popup-wrap .scroll-area {
  pointer-events: auto;
}

.popup-wrap .scroll-area p {
  padding: 0 20px 80px;
  color: #999;
  opacity: 0;
}

.button-close {
  top: 32px;
  width: 15px;
  pointer-events: none;
}

.modal-popup.is-active .button-close {
  pointer-events: auto;
}

.button-close span {
  background-color: #000;
}

.button-close span:nth-of-type(1) {
  top: calc(100% - 24px);
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.button-close span:nth-of-type(2) {
  top: calc(100% - 24px);
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.button-ingredients {
  position: relative;
  padding: 10px 0;
  overflow: hidden;
}

.button-ingredients .bar {
  bottom: 11px;
}

.typo-title {
  position: relative;
  width: 56.7%;
  min-width: 204px;
}

.typo-title img {
  width: 100%;
  opacity: 0;
}

.typo-title span {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  font-size: 0;
  opacity: 0;
}

.typo-title span:nth-of-type(1) {
  background-image: url("../images/brand-story/brand-typo-2.png");
}

.typo-title span:nth-of-type(2) {
  background-image: url("../images/brand-story/brand-typo-3.png");
}

.typo-title span:nth-of-type(3) {
  background-image: url("../images/brand-story/brand-typo-4.png");
}

.typo-title span:nth-of-type(4) {
  background-image: url("../images/brand-story/brand-typo-5.png");
}

.typo-title span:nth-of-type(5) {
  background-image: url("../images/brand-story/brand-typo-6.png");
}

.typo-title span:nth-of-type(6) {
  background-image: url("../images/brand-story/brand-typo-7.png");
}

.typo-title span:nth-of-type(7) {
  background-image: url("../images/brand-story/brand-typo-8.png");
}

.typo-title span:nth-of-type(8) {
  background-image: url("../images/brand-story/brand-typo-9.png");
}

.text-product-key .typo-title-wrap {
  opacity: 1;
}

.content a {
  pointer-events: auto;
}

.content-store img {
  width: 100%;
  opacity: 0;
}

.content-store .n1 {
  position: relative;
  padding-right: 20px;
  margin: 60px 0 30px;
  z-index: 1;
}

.content-store .n2 {
  padding-left: 100px;
  -webkit-transform: translateY(-11.53%);
          transform: translateY(-11.53%);
}

.content-store .n2 img {
  -webkit-transform: translateY(-11.53%);
          transform: translateY(-11.53%);
}

.content-store .n3 {
  padding: 0;
}

.content-flower {
  padding: 62px 0 120px;
  background-color: #000;
}

.prevent-click {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 30;
  pointer-events: none;
}

.content .swiper-slide.swiper-slide-active .prevent-click,
.content .swiper-slide.swiper-slide.swiper-slide.swiper-slide-duplicate-active .prevent-click {
  pointer-events: auto;
}

.content-flower .typo-image span {
  background-image: url(../images/main/flower-typo-1.png);
  opacity: 0;
}

.content-flower .typo-image span:nth-of-type(2) {
  background-image: url(../images/main/flower-typo-2.png);
}

.content-flower .typo-image {
  width: calc(100% - 80px);
  padding-bottom: 39%;
  margin: 0 0 0 20px;
}

.content-flower .visual-image {
  width: calc(100vw - 20px);
  overflow: hidden;
}

.content-flower .visual-image img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.content-flower .text-title {
  color: #fff;
}

.content-flower .typo-image {
  -webkit-transform: translateY(10.48%);
          transform: translateY(10.48%);
}

.page-index .content-key {
  background-color: #000;
}

.content-flower .button-icon::after {
  background-image: url(../images/icon/icon-arrow-gray.svg);
}

.swiper-container {
  height: 100%;
}

#tvcf_muse .text-wrap {
  padding: 80px 20px 40px;
}

#tvcf_muse .visual-grid-product .visual-list {
  width: calc(100% - 60px);
  margin: 0 0 0 auto;
  padding-bottom: 50px;
  overflow: hidden;
}

#tvcf_muse .visual-grid-product .visual-list.visual-list.st-align-left {
  width: calc(100% - 60px);
  margin: unset;
}

#tvcf_muse .visual-grid-product .visual-list.visual-list.st-align-left .video-description {
  margin: 0 0 0 60px;
}

.visual-grid-product .visual-list.st-align-left .visual-inner {
  margin: 0 auto 0 0;
}

#tvcf_muse .text-wrap .text-description {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  font-size: 1.4rem;
  line-height: 3rem;
  letter-spacing: -.08em;
}

.content-film {
  padding: 62px 0 80px;
  background-color: #F7F7F7;
}

.content-film .typo-image span {
  opacity: 0;
  background-image: url(../images/tvcf/tvcf-typo-1.png);
}

.content-film .typo-image span:nth-of-type(2) {
  background-image: url(../images/tvcf/tvcf-typo-2.png);
}

.content-film .typo-image {
  width: calc(100% - 120px);
  padding-bottom: 36%;
  margin: 0 0 0 20px;
  -webkit-transform: translateY(10.95%);
          transform: translateY(10.95%);
}

.content-film .visual-image {
  width: calc(100vw - 20px);
  margin-left: auto;
  overflow: hidden;
}

.content-film .visual-image img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.content-muse {
  padding: 52px 0 35.43vw;
}

.content-muse .typo-image {
  width: calc(100vw - 40px);
  padding-bottom: 33%;
  -webkit-transform: translateY(14.4%);
          transform: translateY(14.4%);
}

.content-muse .typo-image span {
  opacity: 0;
  background-image: url(../images/tvcf/tvcf-muse-typo-1.png);
}

.content-muse .typo-image span:nth-of-type(2) {
  background-image: url(../images/tvcf/tvcf-muse-typo-2.png);
}

.visual-grid-product .video-description {
  padding: 28px 0 !important;
  opacity: 0;
  color: #707070;
  -webkit-transform: translateY(40px);
          transform: translateY(40px);
  font-size: 1.4rem;
  line-height: 3rem;
  letter-spacing: -.08rem;
  font-family: 'Noto Sans';
}

.visual-grid-product .visual-inner {
  overflow: hidden;
}

.visual-grid-product .video-description span.text {
  display: inline-block;
  padding: 2px 0 0 7px;
}

.visual-grid-product .video-description span.mark {
  display: block;
  width: 20px;
  height: 18px;
  background-image: url(../images/icon/icon-mark.svg);
  background-size: contain;
  background-repeat: no-repeat;
}

.video-list-wrap .video-list {
  position: relative;
  display: block;
  width: calc(100% - 20px);
  margin-left: auto;
}

.icon-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-image: url(../images/icon/icon-button-play.svg);
  background-size: contain;
  background-repeat: no-repeat;
  opacity: .8;
  z-index: 3;
}

.video-list-wrap .video-list img {
  width: 100%;
}

.video-list .video-info {
  padding: 22px 0 34px;
}

.video-list .info-title,
.video-list .info-title span {
  font-family: 'Manrope';
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: 0;
  line-height: 2rem;
  overflow: hidden;
}

.video-list .info-title span {
  display: inline-block;
  opacity: 0;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
}

.video-list .info-description {
  opacity: 0;
  color: #999;
  font-family: 'Noto Sans';
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 3.2rem;
  letter-spacing: -.08em;
}

.content-video {
  background-color: #f7f7f7;
  padding-top: calc(35.43vw + 116px);
  padding-bottom: calc(34.3vw + 155px);
}

.content-video .text-wrap {
  padding: 80px 20px 30px;
}

.content-text-image .translate-image {
  opacity: 0;
}

.video-image {
  opacity: 0;
}

.button-video {
  position: relative;
  display: block;
  cursor: pointer;
  overflow: hidden;
}

.button-video img {
  position: relative;
  -webkit-transform-origin: center center;
          transform-origin: center center;
  z-index: 0;
}

.button-video .dim {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  z-index: 1;
}

.modal {
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9120;
  background-color: #000;
  opacity: 0;
}

.modal-video {
  position: relative;
  height: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  top: 50%;
  padding-bottom: 56.25%;
}

.modal-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
}

.modal .button-close {
  top: 0;
  opacity: 1;
  pointer-events: auto;
}

.modal .button-close span {
  background-color: #fff;
}

.main-text-wrap .button-text {
  color: #fff;
}

.swiper-container .dim {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.35);
  opacity: 1;
  z-index: 2;
  visibility: visible;
}

.text-comingsoon {
  position: absolute;
  display: inline-block;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  color: #C5BAAE;
  font-family: 'Marcellus';
  font-weight: 400;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -.08rem;
  text-align: center;
}

.text-description .description-list {
  padding: 28px 0;
}

.text-description .description-list .description-title {
  display: block;
  padding-bottom: 20px;
  color: #000;
  font-family: 'Manrope';
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.9rem;
}

.description-list.list-wrap .description-title {
  padding-bottom: 10px;
}

.description-list li {
  padding: 8px 0;
}

.description-title {
  opacity: 1;
}

.description-element {
  opacity: 0;
}

.swiper-pagination {
  left: 20px;
  width: 60px;
  height: 2px;
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background-color: #fff !important;
}

body.st-black .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background-color: #000 !important;
}

.swiper-pagination-progressbar {
  background: rgba(255, 255, 255, 0.2) !important;
}

body.st-black .swiper-pagination-progressbar {
  background: rgba(0, 0, 0, 0.2) !important;
}

[data-product="hand-cream"] .visual-grid-wrap .visual-list.visual-full {
  z-index: 3;
}

.content-product-detail .content-key .text-wrap {
  position: relative;
  z-index: 1;
}

.visual-grid-product .visual-list.visual-absolute, .visual-list.visual-absolute.visual-front {
  z-index: 4;
}

img {
  user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.is-hide {
  display: none !important;
}

.description-howto dl:first-child dd {
  padding: 8px 0;
}

.js-color-text {
  fill: #000;
  -webkit-transition: fill 400ms ease;
  transition: fill 400ms ease;
}

.js-color-bg {
  fill: #ffff;
  -webkit-transition: fill 400ms ease;
  transition: fill 400ms ease;
}

.st-black .js-color-text {
  fill: #fff;
}

.st-black .js-color-bg {
  fill: #000;
}

.description-highlight {
  display: block;
  font-size: 12px;
  padding-top: 4px;
}

.store-wrap {
  margin-bottom: 120px;
}

.store-wrap .visual-wrap {
  width: calc(100vw - 20px);
  overflow: hidden;
}

.store-wrap .visual-wrap img {
  width: 100%;
}

.store-wrap.store-hongik .visual-wrap {
  margin-left: auto;
}

.store-wrap.store-gangnam .visual-wrap {
  width: calc(100vw - 40px);
  margin: 0 auto;
}

.store-wrap.store-gangnam {
  margin-bottom: 60px;
}
/*# sourceMappingURL=common.css.map */