@charset "UTF-8";
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html, body {
  height: auto;
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
  margin: 0;
  padding: 0;
}

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

fieldset, img {
  border: 0;
  display: block;
}

address, caption, cite, code, dfn, em, strong, th, var {
  font-style: normal;
  font-weight: normal;
}

ol, ul {
  list-style: none;
  list-style-type: none;
}

caption, th {
  text-align: left;
}

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

q:before, q:after {
  content: "";
}

abbr, acronym {
  border: 0;
}

a {
  outline: none;
  hlbr: expression(this.onFocus=this.blur());
  cursor: pointer;
}

a:link, a:visited, a:hover, a:active {
  text-decoration: none;
}

input {
  border: none;
  border-radius: 0;
  -webkit-appearance: none;
}

input, textarea, select {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  -o-appearance: none;
  -ms-appearance: none;
  border: none;
  border-radius: 0;
  outline: none;
}

select::-ms-expand {
  display: none;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

body {
  font-size: 15px;
  color: #272727;
}

input, textarea, select {
  color: #555;
}

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
  -webkit-appearance: none;
          appearance: none;
}

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

.icon-close {
  width: 48px;
  height: 48px;
  background: url(/img/icon_close.svg) no-repeat center center;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  cursor: pointer;
}
.icon-close:hover {
  background: url(/img/icon_close_on.svg) no-repeat center center;
}

.icon-zoom {
  width: 48px;
  height: 48px;
  background: url(/img/icon_zoom.svg) no-repeat center center;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  cursor: pointer;
}
.icon-zoom:hover {
  background: url(/img/icon_zoom_on.svg) no-repeat center center;
}

.icon-heart {
  width: 48px;
  height: 48px;
  background: url(/img/icon_heart_w.svg) no-repeat center center;
}
.icon-heart:hover {
  background: url(/img/icon_heart_w_on.svg) no-repeat center center;
}
.icon-heart.act {
  background: url(/img/icon_heart_w_on.svg) no-repeat center center;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", "微軟正黑體", Arial, Helvetica, sans-serif;
  font-weight: 300;
  scroll-behavior: smooth;
}

input:-internal-autofill-selected {
  background-color: #fff !important;
  background-image: none !important;
  color: #272727 !important;
}

.lg-mask.global-mask {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 11;
  transition: 0.4s ease-out;
  opacity: 0;
  visibility: hidden;
}
.lg-mask.global-mask.on {
  opacity: 1;
  visibility: visible;
}

.lg-box.global-lg-box {
  width: 365px;
  padding: 45px 50px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 11;
  transform: translate(-50%, -50%);
  transition: 0.4s ease-out;
  opacity: 0;
  visibility: hidden;
}
.lg-box.global-lg-box.on {
  visibility: visible;
  transform: translate(-50%, -50%);
  opacity: 1;
}

.lg-box.freegift-lg-box {
  width: 680px;
  padding: 20px 10px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 11;
  transform: translate(-50%, -50%);
  transition: 0.4s ease-out;
  opacity: 0;
  visibility: hidden;
}
.lg-box.freegift-lg-box.on {
  visibility: visible;
  transform: translate(-50%, -50%);
  opacity: 1;
}

.bar-box {
  width: 100%;
  height: 6px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 12;
  overflow: hidden;
}

.bar {
  width: 0;
  height: 6px;
  background: #507C65;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.nav-mask {
  position: fixed;
  background: rgba(0, 0, 0, 0.6);
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 4;
  opacity: 0;
  visibility: hidden;
  transition: 0.4s ease-out;
}
.nav-mask.on {
  visibility: visible;
  opacity: 1;
}

.nav-mask2 {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  transition: 0.4s ease-out;
}
.nav-mask2.on {
  visibility: visible;
  opacity: 1;
}

.preloadimg {
  position: fixed;
  top: -10px;
  left: -10px;
  z-index: -1;
}
.preloadimg img {
  width: 1px;
  height: 1px;
}

.loading {
  position: fixed;
  background: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 20;
}

.loading-img {
  width: 58px;
  animation: loading 2s infinite linear normal;
}
.loading-img img {
  width: 100%;
}

.loading-box {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
}
.loading-box span {
  color: #fff;
  width: 100%;
  text-align: center;
  display: block;
  animation: loadingTxt 1s infinite alternate ease-in-out;
}

@keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes loadingTxt {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.lds-ripple {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.7);
}
.lds-ripple div {
  position: absolute;
  border: 4px solid #fff;
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}

@keyframes lds-ripple {
  0% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 0px;
    left: 0px;
    width: 72px;
    height: 72px;
    opacity: 0;
  }
}
.lds-ring {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 8px solid #fff;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #fff transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}

@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.m-nav-box, .m-nav-sub-gruop, .m-search-box, .m-btn-search, .m-ban-group, .m-nav-btn, .m-product-filter-box, .m-search, .m-today-search, .m-product-sort-panel, .m-product-search-panel, .m-e-en, .m-link-group-mask, .m-info-cont, .m-info-tab-box, .m-product-filter-panel, .m-prod-price {
  display: none;
}

.preload {
  width: 0;
  height: 0;
  position: fixed;
  top: -1000px;
  left: -1000px;
  z-index: -1;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
}
.preload img {
  width: 1px;
  height: 1px;
}

.btn-ok {
  text-align: center;
  width: 100px;
  margin: 0 auto;
  padding: 10px 0;
  border: 1px solid #272727;
  cursor: pointer;
}

.btn {
  font-size: 15px;
  color: #fff;
  min-height: 40px;
  letter-spacing: 2px;
  background: #272727;
  border-radius: 6px;
  border: 1px solid #272727;
  -webkit-appearance: none;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  transition: 0.2s;
}
.btn:hover {
  color: #272727;
  background: #fff;
}

.progress {
  width: 100%;
  height: 6px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
}

.progress-bar {
  background: #507C65;
  height: 6px;
}

.ind-mask {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 12;
  visibility: hidden;
  transition: 0.4s ease-out;
  opacity: 0;
}
.ind-mask.on {
  opacity: 1;
  visibility: visible;
}

.yt-video {
  width: 60%;
  padding-bottom: 33.8%;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
}
.yt-video iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.btn-close-yt {
  width: 50px;
  height: 50px;
  background: url(/img/close_lg.svg) no-repeat center center;
  position: absolute;
  top: 0;
  right: -50px;
  z-index: 1;
  cursor: pointer;
  transition: 0.4s;
}
.btn-close-yt:hover {
  background: rgba(255, 255, 255, 0.4) url(/img/close_lg.svg) no-repeat center center;
}

.breadcrumbs-box {
  font-size: 12px;
  letter-spacing: 1.5px;
  padding: 40px 80px;
  margin: 0 0 20px;
  border-top: 1px solid #C8C8C8;
}
.breadcrumbs-box a {
  color: #C8C8C8;
  letter-spacing: 1.5px;
  display: inline-block;
  transition: 0.4s ease-out;
}
.breadcrumbs-box a:hover {
  color: #787878;
}
.breadcrumbs-box span.act {
  color: #787878;
  padding: 0;
}
.breadcrumbs-box span {
  color: #C8C8C8;
  display: inline-block;
  padding: 0 8px;
}

.m-breadcrumbs-box {
  display: none;
}

.nav-box {
  width: 100%;
  height: 240px;
  padding: 0 80px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: nowrap;
  position: relative;
  z-index: 10;
}

.s-nav-box {
  height: 150px;
  position: fixed;
  transform: translateY(-150px);
  top: 0;
  left: 0;
  z-index: 10;
  transition: 0.3s ease-out;
}
.s-nav-box.on {
  transform: translateY(0);
}

.page-nav {
  height: 150px;
  position: fixed;
  top: 0;
  left: 0;
  transition: 0.3s ease-out;
  z-index: 10;
}
.page-nav.fix-top {
  transform: translateY(-150px);
}
.page-nav.on {
  transform: translateY(0);
}

nav {
  width: 40%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  z-index: 6;
}
nav.open-nav .nav-item {
  color: #fff;
}
nav.on .nav-item {
  color: #fff;
}
nav.on .nav-item::after {
  background: #fff;
}

.nav-item {
  font-size: 15px;
  color: #464646;
  letter-spacing: 3px;
  margin: 0 40px 0 0;
  position: relative;
  display: inline-block;
  transition: 0.3s;
  cursor: pointer;
}
.nav-item::after {
  content: "";
  display: block;
  background: #464646;
  width: 0;
  height: 1px;
  position: absolute;
  bottom: -6px;
  transition: 0.3s;
}
.nav-item:hover::after {
  width: 93%;
}
.nav-item.act::after {
  content: "";
  display: block;
  width: 93%;
  height: 1px;
  position: absolute;
  bottom: -6px;
}
.nav-item.on {
  animation: moreAnis 3s alternate ease-in-out;
}

@keyframes moreAnis {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(3);
  }
}
.nav-sub-group {
  width: auto;
  min-width: auto;
  max-width: auto;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  opacity: 1;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  transition: transform 1s;
  transform: translateX(-100%);
}
.nav-sub-group nav {
  width: auto;
  position: absolute;
  top: 64px;
  left: 80px;
  z-index: 2;
}
.nav-sub-group nav.on-index {
  top: 110px;
}
.nav-sub-group .nav-item {
  color: #fff;
}
.nav-sub-group .nav-item::after {
  background: #fff;
}

.nav-main-sub-box {
  width: 580px;
  height: 100%;
  padding: 258px 80px 0;
  position: relative;
  display: flex;
  overflow: auto;
  justify-content: flex-start;
  align-items: center;
  align-content: flex-start;
  flex-wrap: wrap;
}
.nav-main-sub-box p {
  width: 100%;
}
.nav-main-sub-box p:last-child {
  order: -1;
}
.nav-main-sub-box a {
  font-family: "Roboto", sans-serif;
  color: #FFFFFF;
  font-size: 18px;
  letter-spacing: 2.4px;
  line-height: 2.27;
  display: inline-block;
  transition: 0.3s;
}
.nav-main-sub-box a:hover {
  color: rgba(255, 255, 255, 0.6);
}
.nav-main-sub-box a.act {
  color: rgba(255, 255, 255, 0.6);
}

.stop-hover {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: none;
}

.nav-sub-box {
  width: 0.00001px;
  height: 100%;
  padding: 258px 0 0;
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  align-content: flex-start;
  flex-wrap: wrap;
  overflow: hidden;
  transition: 0.8s;
}
.nav-sub-box.on {
  width: 330px;
}
.nav-sub-box p {
  width: 100%;
  padding: 0 60px;
  transform: translate(-20px, 0);
  opacity: 0;
}
.nav-sub-box a {
  font-family: "Roboto", sans-serif;
  color: #FFFFFF;
  font-size: 18px;
  letter-spacing: 2.4px;
  line-height: 2.27;
  word-break: keep-all;
  display: inline-block;
}
.nav-sub-box a:hover {
  color: rgba(255, 255, 255, 0.6);
}
.nav-sub-box a.act {
  color: rgba(255, 255, 255, 0.6);
}
.nav-sub-box .font-s a {
  font-size: 15px;
}

.js-sub-nav {
  width: 100%;
}

.sub-full {
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 1.8px;
  width: 100%;
  padding: 11px 60px;
  margin: 0 0 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.shop {
  background: #8AB89E;
}
.shop.on {
  transform: translateX(0);
}

.sub2-bg {
  background: #6FA287;
}

.sub3-bg {
  background: #507C65;
}

.sub4-bg {
  background: #456C57;
}

.experience {
  background: #5E7461;
}
.experience .sub2 {
  background: #455D48;
}
.experience.on {
  transform: translateX(0);
}

.learn {
  background: #606EB2;
}
.learn .sub2 {
  background: #505FA8;
}
.learn.on {
  transform: translateX(0);
}

.member-group {
  background: #B2A190;
}
.member-group .sub2 {
  background: #a38d76;
}
.member-group.on {
  transform: translateX(0);
}

.btn-close {
  width: 20px;
  height: 20px;
  padding: 3px;
  position: absolute;
  right: 60px;
  top: 65px;
  z-index: 2;
  cursor: pointer;
}
.btn-close img {
  width: 100%;
}
.btn-close.on-index {
  top: 110px;
}

.fn-box {
  text-align: right;
  width: 40%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.fn-box a {
  font-size: 15px;
  font-family: "Roboto", sans-serif;
  color: #437E63;
  letter-spacing: 3px;
  margin: 0 0 0 40px;
  position: relative;
}
.fn-box a.m-btn-member {
  display: none;
}

.icon-a {
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cart-num {
  font-size: 10px;
  color: #FFF;
  text-align: center;
  line-height: 20px;
  letter-spacing: 0;
  width: 20px;
  height: 20px;
  border-radius: 40px;
  background: #507C65;
  position: absolute;
  top: -10px;
  right: -10px;
}

.bag-box {
  text-align: left;
  width: 440px;
  height: auto;
  background: #B1C8B4;
  padding: 40px;
  position: absolute;
  bottom: 0;
  right: 100px;
  z-index: 5;
  transition: 0.4s ease-out;
  transform: translateY(90%);
  visibility: hidden;
  opacity: 0;
}
.bag-box.on {
  transform: translateY(100%);
  visibility: visible;
  opacity: 1;
}
.bag-box h2 {
  font-family: "Roboto", sans-serif;
  color: #000;
  font-size: 40px;
  letter-spacing: 0.3px;
  line-height: 1;
  padding: 0 0 20px;
  border-bottom: 1px solid #000;
}
.bag-box h2 p {
  font-size: 13px;
  letter-spacing: 1.3px;
  margin: 10px 0 0;
}
.bag-box p {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 1.3px;
  margin: 10px 0 0;
}
.bag-box .btn-submit {
  color: #fff;
  margin: 20px 0 0;
}

.btn-close-bag {
  text-align: right;
  width: 24px;
  height: 24px;
  position: absolute;
  right: 40px;
  top: 52px;
  cursor: pointer;
}
.btn-close-bag img {
  display: inline-block;
}
.btn-close-bag svg g {
  transition: 0.2s;
}
.btn-close-bag:hover svg g {
  stroke: #787878;
}

.bad-list {
  max-height: 420px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.bad-list li {
  padding: 20px 0;
  border-bottom: 1px solid #787878;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  position: relative;
}
.bad-list li:last-child {
  border-bottom: none;
}
.bad-list .item-capacity {
  width: 115px;
}
.bad-list .item-quantity {
  width: 115px;
}
.bad-list .select-sty-cart {
  border: 1px solid #787878;
}
.bad-list .select-sty-cart select {
  color: #464646;
  height: 30px;
}
.bad-list .sel-show-arrow {
  -webkit-appearance: auto;
     -moz-appearance: auto;
          appearance: auto;
}
.bad-list .wd80pa {
  width: 80%;
}
.bad-list .ui-quantity {
  width: 100%;
  height: 32px;
  border: 1px solid #787878;
}
.bad-list .btn-quantity {
  height: 30px;
  line-height: 30px;
}
.bad-list .quantity-val {
  height: 30px;
  line-height: 30px;
}
.bad-list .out-of-stock {
  width: 100%;
  height: 80%;
  background-color: rgba(255, 255, 255, 0.7);
  z-index: 2;
  position: absolute;
}

.bag-item-pic img {
  height: 100px;
  display: block;
}

.bag-item-info-group {
  width: calc(100% - 90px);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  align-content: space-between;
  flex-wrap: wrap;
}

.freegift-bag-item-info-group {
  width: calc(100% - 90px);
  display: flex;
  align-items: flex-start;
  align-content: space-between;
  flex-wrap: wrap;
}
.freegift-bag-item-info-group .bag-item-name {
  width: 100%;
}
.freegift-bag-item-info-group .bag-item-price {
  position: absolute;
  right: 0;
}
.freegift-bag-item-info-group .bag-price {
  display: inline-block;
  border: 1px solid #464646;
  padding: 4px 6px;
}
.freegift-bag-item-info-group .item-capacity {
  margin-right: 30px;
}

.bag-item-name {
  width: 60%;
}
.bag-item-name span {
  color: #464646;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 1.2px;
  margin: 0 0 8px;
}
.bag-item-name h3 {
  color: #000;
  font-size: 14px;
  letter-spacing: 1.4px;
  font-weight: 400;
  margin: 5px 0 0;
}

.bag-item-price {
  width: 40%;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  letter-spacing: 0.7px;
  color: #000;
  font-weight: 400;
  text-align: right;
}

.bag-item-ui-group {
  width: calc(100% - 90px);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: nowrap;
}

.language-box {
  width: 150px;
  position: absolute;
  bottom: 0;
  right: 50px;
  z-index: 5;
  transition: 0.4s ease-out;
  transform: translateY(90%);
  visibility: hidden;
  opacity: 0;
}
.language-box.on {
  transform: translateY(100%);
  visibility: visible;
  opacity: 1;
}
.language-box li {
  height: 60px;
  line-height: 60px;
  background: #fff;
}
.language-box a {
  font-size: 14px;
  color: #000;
  letter-spacing: 1.5px;
  font-weight: 400;
  text-align: center;
  width: 100%;
  height: 60px;
  line-height: 60px;
  background: #fff;
  padding: 0 25px;
  display: block;
  cursor: pointer;
  transition: 0.4s;
}
.language-box a:hover {
  background: #ECE2CE;
}
.language-box a.act {
  background: #ECE2CE;
}

.btn-close-search {
  width: 30px;
  height: 30px;
  padding: 3px;
  position: absolute;
  right: 60px;
  top: 78px;
  z-index: 2;
  cursor: pointer;
}
.btn-close-search img {
  width: 100%;
}

.search-box {
  width: 100%;
  height: 240px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(90%);
  visibility: hidden;
  transition: 0.4s ease-out;
  position: absolute;
  opacity: 0;
  bottom: 0;
  left: 0;
  z-index: 8;
}
.search-box.on {
  transform: translateY(100%);
  visibility: visible;
  opacity: 1;
}

.input-search {
  width: 630px;
  margin: 0 auto;
  position: relative;
}
.input-search .tags {
  margin-top: 10px;
}
.input-search input {
  width: 100%;
  height: 50px;
  color: #787878;
  font-size: 20px;
  letter-spacing: 2.5px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  -webkit-appearance: none;
  border-bottom: 1px solid #787878;
}
.input-search input::-moz-placeholder {
  color: #787878;
}
.input-search input::placeholder {
  color: #787878;
}
.input-search input[type=submit] {
  width: 24px;
  height: 24px;
  background: url(/img/icon_search_b.svg) no-repeat center center/22px;
  border: none;
  padding: 0;
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 10px;
  z-index: 1;
}

.logo {
  width: 180px;
  height: 134px;
  white-space: nowrap;
  text-indent: 100%;
  overflow: hidden;
  margin: 0 auto;
  background: url(/img/logo.svg) no-repeat center center/cover;
}

.s-logo {
  width: 60px;
  height: 63px;
  background: url(/img/s_logo.svg) no-repeat center center/100%;
}

.ind-sty {
  background: #F4F2EF;
}

.ban-group {
  width: 100%;
  height: 850px;
  background: #4e4e4e;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: nowrap;
  position: relative;
  overflow: hidden;
}

.ban-box {
  width: 33.3333%;
  height: 100%;
  display: block;
}
.ban-box.act .ban-item {
  opacity: 1;
}
.ban-box.last .ban-txt {
  border: none;
}
.ban-box:hover {
  color: #fff;
}
.ban-box:hover span {
  color: #fff;
}
.ban-box:hover .px {
  height: 120px;
  margin: 33px 0 44px;
}
.ban-box:hover .txt-en {
  color: #fff;
}
.ban-box:hover .txt {
  opacity: 1;
}
.ban-box:hover .ban-item {
  transform: scale(1.02);
}

.ban-txt {
  font-size: 38px;
  color: rgba(255, 255, 255, 0.65);
  text-align: center;
  letter-spacing: 4.2px;
  font-weight: 500;
  text-transform: uppercase;
  width: 100%;
  height: 100%;
  border-right: 1px solid rgba(255, 255, 255, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  position: relative;
  z-index: 3;
  cursor: pointer;
  transition: 1s;
}
.ban-txt span {
  font-size: 18px;
  font-family: "Roboto", sans-serif;
  letter-spacing: 3px;
  width: 100%;
  margin: 0 0 30px;
  display: block;
  transition: 0.3s;
}

.px {
  height: 0;
  width: 100%;
  margin: 0;
  position: relative;
  transition: 1s;
}
.px::after {
  content: "";
  display: block;
  height: 100%;
  width: 1px;
  background: #fff;
  position: absolute;
  top: 0;
  left: 50%;
}

.txt-en {
  font-family: "Roboto", sans-serif;
  width: 100%;
  transition: 0.6s ease-out;
}

.txt {
  font-size: 24px;
  color: #fff;
  width: 100%;
  transition: 0.3s;
  opacity: 0;
}

.ban-item {
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity 1s, transform 2s ease-in-out;
}

.intro-box {
  padding: 240px 0 0;
  margin: 0 0 120px;
  background: #6FA287 url(/img/map.svg) no-repeat right 14% top 60px;
  position: relative;
}
.intro-box:hover .mouse-inv {
  display: block;
  opacity: 1;
}

.mouse-inv {
  width: 38px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  pointer-events: none;
  display: none;
  opacity: 0;
}
.mouse-inv img {
  width: 100%;
}

.video-group {
  width: 1620px;
  margin: 0 auto 150px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
}

.video-cover {
  width: 960px;
  margin: 0 100px 0 2%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  cursor: pointer;
}
.video-cover:hover .play-out-cricle {
  animation: spinAni 2s infinite linear;
}
.video-cover img {
  width: 100%;
}

.btn-play {
  width: 120px;
  height: 120px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}
.btn-play img {
  width: 22px;
}

.play-out-cricle {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.play-out-cricle img {
  width: 100%;
}

@keyframes spinAni {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.video-desc {
  margin: 50px 0 0 0;
}
.video-desc p {
  text-transform: uppercase;
  font-family: "Roboto", sans-serif;
  font-size: 62px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 3.6px;
  line-height: 1.22;
  margin: 0 0 20px;
}
.video-desc p.sub-p {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 2.5px;
  margin: 0 0 8px;
}
.video-desc p.sub-tw {
  font-family: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", "微軟正黑體", Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 2.6px;
}

.invite-box {
  color: #fff;
  width: 1620px;
  padding: 0;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  position: relative;
  bottom: -120px;
}
.invite-box h2 {
  font-family: "Roboto", sans-serif;
  font-size: 80px;
  letter-spacing: 0.8px;
  font-weight: 500;
  text-align: right;
  width: 100%;
  margin: 0 0 70px;
}
.invite-box h3 {
  font-size: 40px;
  letter-spacing: 4.2px;
  margin: 0 0 73px;
}
.invite-box p {
  font-size: 16px;
  letter-spacing: 2px;
  line-height: 2;
  margin: 0 0 30px;
}

.m-direction-inv {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  position: relative;
}

.e-box {
  font-size: 14px;
  letter-spacing: 2.8px;
  line-height: 1;
  margin: 0 0 38px;
}

.invite-desc {
  width: 28%;
  position: relative;
}
.invite-desc .swiper-pagination-bullets {
  width: 100%;
  text-align: left;
  bottom: -40px;
  z-index: 1;
}
.invite-desc .swiper-pagination-bullet {
  width: 30px;
  height: 5px;
  border-radius: 0;
  background: #fff;
  margin: 0 10px 0 0;
  opacity: 1;
}
.invite-desc .swiper-pagination-bullet-active {
  background: #456C57;
}

.invite-txt-swiper {
  overflow: hidden;
  width: 100%;
}

.invite-ban {
  width: 65.124%;
  height: auto;
  display: flex;
  justify-content: space-between;
  position: relative;
}

.invite-swipper {
  width: 870px;
  height: 580px;
  overflow: hidden;
  width: calc(100% - 180px);
  height: 100%;
}

.btn-more {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  color: #fff;
  font-size: 15px;
  letter-spacing: 2px;
  width: 160px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  position: relative;
}
.btn-more:hover .a-arrow {
  transform: translateX(20px);
}
.btn-more:hover .a-arrow-cricle {
  opacity: 1;
  animation: cricleAni 6s infinite linear;
}

.a-arrow {
  width: 40px;
  height: 40px;
  background: url(/img/btn_arrow_w.svg) no-repeat center center;
  transition: 0.3s;
  position: relative;
  z-index: 2;
}
.a-arrow.black {
  background: url(/img/btn_arrow.svg) no-repeat center center;
}

.a-arrow-cricle {
  width: 40px;
  height: 40px;
  background: url(/img/btn_cricle_w.svg) no-repeat center center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 0;
  transition: 0.3s;
}
.a-arrow-cricle.black {
  background: url(/img/btn_cricle.svg) no-repeat center center;
}

@keyframes cricleAni {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.inv-img {
  width: 100%;
  padding-bottom: 66.287%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}
.inv-img img {
  width: 100%;
}

.btn-inv-group {
  width: 180px;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-inv {
  width: 60px;
  height: 100%;
  cursor: pointer;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.inv-1 {
  background: #5C8C73;
}

.inv-2 {
  background: #4E7A63;
}

.inv-3 {
  background: #456C57;
}

.mouses {
  width: 120px;
  height: 120px;
  background: #f00;
  border-radius: 100%;
  position: fixed;
  z-index: 3;
  pointer-events: none;
}

.mouse-evt {
  width: 80px;
  height: 80px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
  pointer-events: none;
  opacity: 0;
  display: none;
}
.mouse-evt.on .mouse-center {
  width: 10px;
  height: 10px;
  background: white;
}

.mouse-cricle {
  width: 80px;
  height: 80px;
  background: url(/img/mouse_cricle.svg) no-repeat center center/cover;
  animation: cricleAni 6s infinite linear;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.mouse-center {
  width: 30px;
  height: 30px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.5);
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  transition: 0.3s;
}

.prod-slide-box {
  padding: 240px 0 200px;
  background: #F4F2EF;
  overflow: hidden;
  position: relative;
}

.prod-slide-group {
  max-width: 1920px;
  margin: 0 auto;
}
.prod-slide-group .tags {
  padding: 0 0 0 120px;
  margin-bottom: 0 0 20px;
}
.prod-slide-group h2 {
  font-family: "Roboto", sans-serif;
  font-size: 75px;
  color: #000;
  letter-spacing: 0.7px;
  font-weight: 500;
  padding: 0 0 0 120px;
  margin: 0 0 20px;
}
.prod-slide-group > p {
  font-size: 24px;
  letter-spacing: 3px;
  font-weight: 500;
  padding: 0 0 0 120px;
  margin: 0 0 110px;
}

.oil-group {
  position: relative;
  padding: 40px 0;
  overflow: hidden;
}
.oil-group .m-prod-price {
  display: none;
}

.slide-mask {
  color: #000;
  width: 16%;
  height: calc(100% + 160px);
  padding: 0 0 17.1% 20px;
  background: #f4f2ee;
  position: absolute;
  left: 7.9%;
  z-index: 2;
  transform: translateY(-80px);
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  align-content: flex-end;
  flex-wrap: wrap;
}
.slide-mask h3 {
  font-family: "Roboto", sans-serif;
  font-size: 34px;
  letter-spacing: 1.5px;
  line-height: 1.33;
  font-weight: 500;
  width: 80%;
}

.oil-slide {
  width: 100%;
  position: relative;
}
.oil-slide .swiper-slide:nth-of-type(odd) .prod-img {
  transform: translateY(-40px);
}
.oil-slide .swiper-slide:nth-of-type(even) .prod-img {
  transform: translateY(40px);
}

.btn-prev {
  width: 60px;
  height: 60px;
  background: #fff;
  border-radius: 100px;
  position: absolute;
  left: 4.4%;
  top: 50%;
  z-index: 2;
  transform: translateY(-100%);
  cursor: pointer;
}
.btn-prev:hover .b-cricle-box {
  transform: translate(-50%, -50%) scale(1.2);
}
.btn-prev:hover .b-cricle {
  animation: cricleAni 6s infinite linear;
}
.btn-prev .b-arrow {
  transform: translate(-50%, -50%) rotate(180deg);
}

.btn-next {
  width: 60px;
  height: 60px;
  border-radius: 100px;
  background: #fff;
  position: absolute;
  right: 4.4%;
  top: 50%;
  z-index: 2;
  transform: translateY(-100%);
  cursor: pointer;
}
.btn-next:hover .b-cricle-box {
  transform: translate(-50%, -50%) scale(1.2);
}
.btn-next:hover .b-cricle {
  animation: cricleAni 6s infinite linear;
}
.btn-next .b-arrow {
  transform: translate(-50%, -50%);
}

@keyframes cricleAni {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.b-arrow {
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background: url(/img/btn_arrow.svg) no-repeat center center;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
}

.b-cricle-box {
  width: 40px;
  height: 40px;
  border-radius: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  transition: 0.4s;
}

.b-cricle {
  width: 100%;
  height: 100%;
  border-radius: 100%;
  background: url(/img/btn_cricle.svg) no-repeat center center/cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.prod-img {
  width: 100%;
}

#toast-container > .toast-success {
  background-image: url(/img/icon_mesg_success.svg) !important;
  background-position: left 27px center;
  background-repeat: no-repeat;
  border-left: 8px solid #456C57;
}
#toast-container > .toast-info {
  background-image: url(/img/icon_mesg_hint.svg) !important;
  background-position: left 27px center;
  background-repeat: no-repeat;
  border-left: 8px solid #000;
}
#toast-container > .toast-error {
  background-image: url(/img/icon_mesg_mistake.svg) !important;
  background-position: left 27px center;
  background-repeat: no-repeat;
  border-left: 8px solid #D86018;
}
#toast-container > .toast-warning {
  background-image: url(/img/icon_mesg_warn.svg) !important;
  background-position: left 27px center;
  background-repeat: no-repeat;
  border-left: 8px solid #D86018;
}

#toast-container > div {
  background: #fff;
  padding: 30px 30px 30px 60px;
  border: none;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  opacity: 1;
}
#toast-container > div:hover {
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}
#toast-container .toast-message {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 1.3px;
  color: #000;
}
#toast-container .toast-message a {
  color: #666;
}
#toast-container .toast-message a:hover {
  font-weight: 600;
}

.toast-progress {
  opacity: 0.2;
}

.toast-bottom-left {
  left: 40px;
  bottom: 100px;
}

.prod-img-cover {
  margin: 0 0 30px;
  position: relative;
  overflow: hidden;
}
.prod-img-cover:hover > img {
  opacity: 70%;
}
.prod-img-cover:hover .btn-add-cart {
  bottom: 0;
}
.prod-img-cover img {
  width: 100%;
  transition: 0.4s;
}
.prod-img-cover .btn-fav {
  display: none;
}
.prod-img-cover .out-of-freegift {
  background-color: rgba(255, 255, 255, 0.7);
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: 5;
}

.btn-add-cart {
  font-family: "Roboto", sans-serif;
  text-align: center;
  font-size: 15px;
  color: #fff;
  letter-spacing: 1.6px;
  font-weight: 500;
  width: 100%;
  height: 50px;
  background: #000;
  position: absolute;
  bottom: -60px;
  left: 0;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  cursor: pointer;
  transition: 0.5s;
}
.btn-add-cart img {
  width: auto;
  height: 24px;
  margin: 0 20px 0 0;
}
.btn-add-cart span {
  line-height: 1;
  margin: 4px 0 0;
}

.m-btn-add-cart {
  display: none;
}

.prod-info h3 {
  font-size: 16px;
  color: #000;
  letter-spacing: 2.4px;
  font-weight: 500;
  margin: 0 0 15px;
}

.brand-info {
  font-size: 14px;
  width: 100%;
  margin: 0 0 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
}

.sub-prod-name {
  color: #787878;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 2.2px;
}
.sub-prod-name span {
  margin: 0 0 0 10px;
}
.sub-prod-name .prod-en {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  margin: 0 12px 0 0;
}

.prod-price {
  color: #787878;
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  line-height: 1;
  font-size: 15px;
  letter-spacing: 0.8px;
  display: block;
}

.prod-size {
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  color: #787878;
  letter-spacing: 1px;
  font-weight: 300;
  width: 100%;
}
.prod-size span {
  padding: 0 10px 0 0;
  margin: 0 10px 0 0;
  line-height: 1.2;
  display: inline-block;
  border-right: 1px solid #C8C8C8;
  cursor: pointer;
}
.prod-size span.act {
  color: #000;
}
.prod-size span:nth-last-of-type(1) {
  border: none;
}

.prod-freegift-soldout {
  float: right;
  font-weight: 500;
  font-size: 15px;
  color: #D86018;
}

.prod-freegift-label {
  position: absolute;
  right: 10px;
  top: 10px;
  padding: 10px 20px;
  color: #fff;
  background-color: #709E85;
  font-weight: 600;
  font-size: 14px;
  z-index: 5;
}

.btn-fav {
  width: 20px;
  height: 20px;
  margin: -4px 0 0;
  float: right;
  background-image: url(/img/icon_fav.svg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 19px;
  cursor: pointer;
}
.btn-fav.act {
  background-image: url(/img/icon_fav_on.svg);
}

.class-slide-box {
  width: 100%;
  background: #606EB2;
  padding: 155px 0 160px;
  overflow: hidden;
  position: relative;
  cursor: none;
}
.class-slide-box:hover .mouse-evt {
  opacity: 1;
  display: block;
}

.class-slide-group {
  max-width: 1920px;
  margin: 0 auto;
}
.class-slide-group h2 {
  color: #fff;
  font-size: 75px;
  text-align: right;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  letter-spacing: 0.5px;
  line-height: 1;
  padding: 0 120px 0 0;
  margin: 0 0 25px;
}
.class-slide-group > p {
  color: #fff;
  font-size: 24px;
  letter-spacing: 3px;
  font-weight: 500;
  text-align: right;
  padding: 0 120px 0 0;
  margin: 0 0 110px;
}

.class-group {
  position: relative;
  padding: 40px 0;
  overflow: hidden;
}

.slide-mask-class {
  color: #fff;
  width: 16.6%;
  height: calc(100% + 100px);
  padding: 0 0 3.6% 20px;
  background: #606EB2;
  position: absolute;
  right: 7.9%;
  z-index: 2;
  transform: translateY(-40px);
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  align-content: flex-end;
  flex-wrap: wrap;
}
.slide-mask-class h3 {
  font-family: "Roboto", sans-serif;
  font-size: 36px;
  letter-spacing: 1.6px;
  line-height: 1.33;
  font-weight: 500;
  width: 80%;
  margin: 0 0 20px;
}

.class-slide {
  width: 100%;
}
.class-slide .swiper-slide:nth-of-type(odd) .class-img {
  transform: translateY(-40px);
}
.class-slide .swiper-slide:nth-of-type(even) .class-img {
  transform: translateY(40px);
}

.class-img {
  width: 100%;
  position: relative;
}
.class-img::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.25);
}
.class-img img {
  width: 100%;
}

.class-icon {
  width: 60px;
  position: absolute;
  top: 22px;
  left: 22px;
  z-index: 2;
}
.class-icon img {
  width: 100%;
}

.btn-fav-icon {
  width: 24px;
  height: 24px;
  background: url(/img/icon_fav_w.svg) no-repeat center center/19px;
  position: absolute;
  bottom: 15px;
  right: 15px;
  z-index: 2;
  cursor: pointer;
}
.btn-fav-icon.act {
  background: url(/img/icon_fav_w_on.svg) no-repeat center center/19px;
}

.class-info {
  color: #fff;
  font-weight: 500;
  position: absolute;
  bottom: 120px;
  left: 25px;
  right: 25px;
  z-index: 2;
}
.class-info h3 {
  font-size: 23px;
  letter-spacing: 2.2px;
  line-height: 1;
}

.class-sub {
  font-size: 15px;
  letter-spacing: 2.2px;
  line-height: 1;
  margin: 0 0 21px;
}

.class-type {
  font-size: 15px;
  padding: 0 12px 0 0;
}

.class-data {
  font-size: 15px;
  font-family: "Roboto", sans-serif;
  padding: 0 0 0 12px;
}

.blooming-box {
  background: #EFC385;
  padding: 160px 0 120px;
}

.sub-bloming {
  font-size: 24px;
  font-weight: 500;
  color: #000;
  letter-spacing: 3px;
  margin: 0 0 60px;
}

.blooming-box-area {
  max-width: 1920px;
  padding: 0 0 0 120px;
  margin: 0 auto;
}
.blooming-box-area h2 {
  font-size: 75px;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: #000;
  margin: 0 0 20px;
}

.blooming-group {
  width: 100%;
  height: 580px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
}
.blooming-group .swiper-pagination-bullets {
  width: 100%;
  text-align: left;
  bottom: -40px;
  z-index: 1;
}
.blooming-group .swiper-pagination-bullet {
  width: 30px;
  height: 5px;
  border-radius: 0;
  background: #fff;
  margin: 0 10px 0 0;
  opacity: 1;
}
.blooming-group .swiper-pagination-bullet-active {
  background: #AF6D04;
}

.blooming-slide {
  width: 1450px;
  height: 100%;
  overflow: hidden;
}

.btn-blooming-group {
  width: calc(100% - 1450px);
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.btn-blooming {
  width: 70px;
  height: 100%;
  cursor: pointer;
  position: relative;
}

.blooming-1 {
  background: #FEEECF;
}

.blooming-2 {
  background: #FEE9C0;
}

.blooming-3 {
  background: #FDDFA7;
}

.blooming-4 {
  background: #FCD796;
}

.blooming-5 {
  background: #FBD08D;
}

.blooming-slide-cont {
  height: 100%;
  background: #FCF5E6;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.blooming-img {
  width: 870px;
}

.blooming-info {
  height: 100%;
  background: #FCF5E6;
  padding: 80px 60px;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-self: center;
  align-items: flex-start;
  flex-wrap: wrap;
  align-content: space-between;
}
.blooming-info h3 {
  font-size: 36px;
  font-weight: 500;
  letter-spacing: 3px;
  color: #000;
  line-height: 1.44;
}
.blooming-info p {
  color: #464646;
  font-size: 15px;
  letter-spacing: 1.5px;
  font-weight: 400;
  line-height: 2;
  width: 100%;
  margin: 0 0 30px;
}
.blooming-info .btn-more {
  color: #000;
}

.blooming-info-2 {
  background: #FCEED2;
}

.blooming-info-3 {
  background: #F7E3BC;
}

.blooming-info-4 {
  background: #F6DAA4;
}

.blooming-info-5 {
  background: #F5D193;
}

.blooming-sub {
  color: #464646;
  font-size: 14px;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  margin: 0 0 40px;
}

.bloming-type {
  letter-spacing: 2.6px;
  padding: 0 0 0 13px;
}

.bloming-data {
  letter-spacing: 2.6px;
  padding: 0 13px 0 0;
}

footer {
  background: #F4F2EF;
  position: relative;
  z-index: 1;
}

.f-img-group {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  min-height: 1110px;
  position: relative;
  background: #F4F2EF;
}
.f-img-group img {
  width: 100%;
}
.f-img-group h2 {
  width: 49.167%;
  height: 136px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  transform: translate(-50%, -57%);
}

.f-img {
  position: absolute;
  z-index: 1;
}
.f-img img {
  width: 100%;
  transform: translateY(150px);
  position: absolute;
  bottom: 0;
}

.f-img-0 {
  width: 23.959%;
  height: 0;
  bottom: 22.5%;
  left: 0;
  opacity: 0;
  overflow: hidden;
}
.f-img-0.on {
  animation: aniIn0 2s 0.3s forwards ease-out;
}

.f-img-1 {
  width: 20.834%;
  height: 440px;
  bottom: 50.8%;
  left: 29.7%;
  opacity: 0;
  overflow: hidden;
}
.f-img-1.on {
  animation: aniIn1 2s 0.2s forwards ease-out;
}

.f-img-2 {
  width: 17.188%;
  height: 440px;
  bottom: 9%;
  right: 6.7%;
  opacity: 0;
  overflow: hidden;
}
.f-img-2.on {
  animation: aniIn2 2s 0.5s forwards ease-out;
}

.f-img-3 {
  width: 16.146%;
  height: 300px;
  bottom: 57.5%;
  right: 0;
  opacity: 0;
  overflow: hidden;
}
.f-img-3.on {
  animation: aniIn3 2s 0.3s forwards ease-out;
}

.ani-f-img0 {
  animation: aniImgAni 1s 0.5s forwards ease-in-out;
}

.ani-f-img1 {
  animation: aniImgAni 1s 0.4s forwards ease-in-out;
}

.ani-f-img2 {
  animation: aniImgAni 1s 0.5s forwards ease-in-out;
}

.ani-f-img3 {
  animation: aniImgAni 1s 0.3s forwards ease-in-out;
}

@keyframes aniIn0 {
  0% {
    height: 0;
    transform: scale(1.2);
    opacity: 0;
  }
  100% {
    height: 300px;
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes aniIn1 {
  0% {
    height: 0;
    transform: scale(1.2);
    opacity: 0;
  }
  100% {
    height: 440px;
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes aniIn2 {
  0% {
    height: 0;
    transform: scale(1.2);
    opacity: 0;
  }
  100% {
    height: 440px;
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes aniIn3 {
  0% {
    height: 0;
    transform: scale(1.2);
    opacity: 0;
  }
  100% {
    height: 300px;
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes aniImgAni {
  0% {
    transform: translateY(150px) scale(1.2);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}
.subscription-box {
  text-align: center;
  font-weight: 400;
  width: 560px;
  margin: 0 auto;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.subscription-box h3 {
  font-size: 24px;
  color: #000;
  font-weight: 500;
  letter-spacing: 2.2px;
  margin: 0 0 15px;
}
.subscription-box p {
  font-size: 14px;
  letter-spacing: 2px;
  margin: 0 0 35px;
}

.subscript-input {
  width: 100%;
  margin: 0 0 70px;
  position: relative;
}
.subscript-input input[type=text] {
  width: 100%;
  height: 36px;
  font-size: 14px;
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  letter-spacing: 0.8px;
  border-bottom: 1px solid #979797;
  background: none;
}
.subscript-input input[type=text]:placeholder {
  color: #979696;
}
.subscript-input input[type=submit] {
  font-size: 14px;
  color: #000;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
  letter-spacing: 0.8px;
  width: 50px;
  height: 36px;
  background: none;
  line-height: 36px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  cursor: pointer;
}

.media-box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  margin: 0 0 34px;
}
.media-box .media-item:nth-of-type(1) {
  padding: 0 30px 0 0;
  border: none;
}
.media-box .media-item:nth-of-type(4) {
  padding: 0 0 0 30px;
  border: none;
}

.media-item {
  color: #000;
  font-size: 14px;
  font-weight: 300;
  font-family: "Roboto", sans-serif;
  letter-spacing: 0.8px;
  padding: 0 30px;
  border-right: 1px solid #979797;
}
.media-item.act {
  font-weight: 500;
}
.media-item a {
  color: #000;
}
.media-item a:hover {
  font-weight: 400;
}

.social-box {
  text-align: center;
  margin: 0 0 100px;
}
.social-box a {
  width: 40px;
  margin: 0 30px 0 0;
  border: 1px solid #000;
  border-radius: 100%;
  display: inline-block;
  transition: 0.4s;
}
.social-box a img {
  width: 100%;
}
.social-box a:hover {
  background: rgba(255, 255, 255, 0.6);
}
.social-box a:nth-of-type(3) {
  margin: 0;
}

.footer-sitemap-group {
  background: #F4F2EF;
}

.footer-sitemap {
  margin: 0 70px;
  padding: 80px;
  border-top: 1px solid #979797;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.footer-sitemap .m-info {
  border-top: 1px solid #979797;
  margin: 0;
  padding: 20px 0 30px;
  width: 100%;
}
.footer-sitemap .m-info a, .footer-sitemap .m-info h3, .footer-sitemap .m-info p {
  color: #000;
}

.footer-nav ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
}
.footer-nav li {
  width: 210px;
  height: 200px;
  padding: 0 0 0 25px;
  border-right: 1px solid #C8C8C8;
  position: relative;
}
.footer-nav li:last-of-type {
  border: none;
}
.footer-nav h3 {
  font-family: "Roboto", sans-serif;
  font-size: 22px;
  color: #000;
  letter-spacing: 1.6px;
  font-weight: 700;
}

.connect {
  width: 330px;
  height: 200px;
  padding: 0 0 0 25px;
  border-left: 1px solid #C8C8C8;
  position: relative;
}
.connect h3 {
  font-family: "Roboto", sans-serif;
  font-size: 22px;
  color: #000;
  letter-spacing: 1.6px;
  font-weight: 700;
  margin: 0 0 8px;
}
.connect .f-nav {
  font-weight: 300;
  left: 25px;
}
.connect a {
  font-size: 16px;
  color: #000;
  letter-spacing: 1.7px;
  line-height: 1.8;
}
.connect p {
  font-size: 16px;
  color: #000;
  letter-spacing: 1.7px;
  line-height: 1.8;
}

.f-nav {
  position: absolute;
  bottom: 0;
  left: 25px;
  z-index: 1;
}
.f-nav a {
  font-size: 14px;
  color: #464646;
  letter-spacing: 2px;
  font-weight: 300;
  margin: 0 0 7px;
  display: block;
}

.copy-box {
  width: 100%;
  margin: 80px 0 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.copy-box span {
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  letter-spacing: 1.5px;
  font-weight: 300;
  line-height: 1;
  padding: 0 30px 0 25px;
  border-right: 1px solid #979797;
  display: block;
}
.copy-box a {
  font-family: "Roboto", sans-serif;
  color: #000;
  font-size: 14px;
  letter-spacing: 1.5px;
  font-weight: 300;
  line-height: 1;
  padding: 0 30px;
  border-right: 1px solid #9797;
  display: block;
}
.copy-box a:nth-last-of-type(1) {
  border: none;
}

.about-group {
  width: 100%;
  background: #455D48;
}

.about-box {
  max-width: 1920px;
  padding: 240px 160px 180px;
  margin: 420px auto 0;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.about-logo {
  width: 1180px;
  margin: 0 auto;
  position: absolute;
  top: -110px;
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
}

.about-info {
  color: #fff;
  width: 580px;
  height: 760px;
  position: relative;
}
.about-info span {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 24px;
  letter-spacing: 2.6px;
  display: block;
  margin: 0 0 120px;
}
.about-info h2 {
  font-size: 46px;
  letter-spacing: 5px;
  line-height: 1.66;
}
.about-info p {
  font-size: 17px;
  font-weight: 300;
  letter-spacing: 1.6px;
  line-height: 2.11;
  position: absolute;
  left: 0;
  bottom: 90px;
  z-index: 1;
}

.btn-history {
  font-size: 15px;
  color: #fff;
  letter-spacing: 1.5px;
  width: 160px;
  border: 1px solid #fff;
  padding: 4px 9px 4px 18px;
  display: block;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  transition: 0.4s;
}
.btn-history:hover {
  color: #000;
  background: #fff;
}
.btn-history:hover .a-arrow {
  background: url(/img/btn_arrow.svg) no-repeat center center;
}

.about-img {
  width: 580px;
  height: 760px;
}

.art-group {
  width: 100%;
}

.art-box {
  max-width: 1920px;
  margin: 0 auto;
  padding: 200px 120px;
}
.art-box h2 {
  font-family: "Roboto", sans-serif;
  font-size: 75px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.8px;
  color: #000;
  margin: 0 0 20px;
}

.art-h2-sub {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 3px;
  line-height: 1;
  color: #000;
  margin: 0 0 80px;
}

.art-list-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.art-txt-cont {
  width: 800px;
  height: 780px;
  position: relative;
}

.art-txt {
  color: #000;
  position: absolute;
  top: 100px;
  right: 100px;
  bottom: 100px;
  left: 100px;
  z-index: 1;
}
.art-txt span {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  color: #464646;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 2px;
  text-transform: uppercase;
  display: block;
  margin: 0 0 40px;
}
.art-txt h3 {
  font-size: 42px;
  letter-spacing: 3.2px;
  font-weight: 500;
  line-height: 1.47;
}
.art-txt a.btn-more {
  color: #000;
  padding: 0;
  margin: 30px 0 0;
}

.art-desc {
  font-size: 17px;
  color: #464646;
  letter-spacing: 1.8px;
  font-weight: 400;
  line-height: 2.17;
  position: absolute;
  bottom: 0;
  left: 0;
}

.art-img-cont {
  width: 800px;
  height: 780px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  cursor: pointer;
}
.art-img-cont:hover .play-out-cricle {
  animation: spinAni 2s infinite linear;
}

.blue {
  background: #547C91;
}

.orange {
  background: #C99260;
}

.gray {
  background: #EBEBEB;
}

.art-img {
  width: 390px;
  height: 580px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0 auto;
}

.art-img-tit {
  font-family: "Roboto", sans-serif;
  color: #fff;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-align: center;
  width: 100%;
  position: absolute;
  bottom: 52px;
}

.art-a-group {
  width: 100%;
}

.art-a-box {
  max-width: 1920px;
  margin: 0 auto;
  padding: 100px 120px 200px;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: nowrap;
}
.art-a-box .art-a:nth-of-type(1) .art-a-img {
  background: #e9cbcb;
}
.art-a-box .art-a:nth-of-type(2) .art-a-img {
  background: #F0D1B1;
}
.art-a-box .art-a:nth-of-type(3) .art-a-img {
  background: #9ABEAA;
}

.art-a {
  color: #000;
  width: 30%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: space-between;
  flex-wrap: wrap;
}
.art-a h3 {
  text-align: left;
  font-size: 32px;
  letter-spacing: 2.4px;
  font-weight: 500;
  line-height: 1.5;
  margin: 0 0 28px;
  width: 100%;
}
.art-a p {
  text-align: left;
  font-size: 15px;
  color: #464646;
  letter-spacing: 1.5px;
  font-weight: 400;
  line-height: 2;
  margin: 0 0 20px;
  width: 100%;
}
.art-a a.btn-more {
  color: #000;
  padding: 14px 0;
}

.art-a-img {
  color: #000;
  width: 100%;
  height: 670px;
  margin: 0 0 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: nowrap;
  position: relative;
}
.art-a-img span {
  font-family: "Roboto", sans-serif;
  color: #fff;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 2.8px;
  text-transform: uppercase;
  width: 100%;
  text-align: center;
  position: absolute;
  left: 0;
  bottom: 12%;
  display: block;
}

.art-a-img-box {
  width: 58%;
}
.art-a-img-box img {
  width: 100%;
}

.idea-group {
  width: 100%;
  background: #F1EBDF;
}

.idea-box {
  max-width: 1920px;
  margin: 0 auto;
  padding: 200px 120px;
}
.idea-box h2 {
  font-family: "Roboto", sans-serif;
  font-size: 75px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.8px;
  color: #000;
  margin: 0 0 20px;
}

.idea-cont {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: nowrap;
}

.idea-img {
  width: 660px;
  position: sticky;
  top: 0;
}
.idea-img img {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: 0.5s ease-out;
}
.idea-img img.on {
  position: sticky;
  opacity: 1;
}

.m-plan-img {
  display: none;
}

.idea-support {
  width: 48%;
}

.plan-box {
  margin: 0 0 180px;
}
.plan-box h3 {
  font-size: 40px;
  letter-spacing: 4px;
  font-weight: 500;
  line-height: 1.55;
  margin: 0 0 60px;
  width: 100%;
}
.plan-box p {
  font-size: 17px;
  color: #464646;
  font-weight: 400;
  letter-spacing: 1.4px;
  line-height: 2.11;
  margin: 0 0 60px;
  width: 100%;
}
.plan-box a.btn-more {
  color: #000;
  padding: 14px 0;
}

.num {
  font-size: 40px;
  font-weight: 500;
  width: 85px;
  height: 85px;
  background: url(/img/num_bg.svg) no-repeat center center/cover;
  padding: 13px 0 0;
  border-radius: 100px;
  text-align: center;
  margin: 0 0 60px;
}

.founder-group {
  width: 100%;
  background: #636B4E;
}

.founder-box {
  color: #fff;
  max-width: 1920px;
  margin: 0 auto;
  padding: 140px 120px 160px;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  flex-direction: row-reverse;
}
.founder-box h2 {
  font-family: "Roboto", sans-serif;
  font-size: 75px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.8px;
  width: 100%;
  margin: 0 0 20px;
}
.founder-box .art-h2-sub {
  color: #fff;
  width: 100%;
}

.founder-img {
  width: 440px;
  height: 607px;
  position: sticky;
  top: 0;
  z-index: 1;
}

.m-founder-img {
  display: none;
}

.founder-cont h3 {
  font-size: 40px;
  font-weight: 300;
  line-height: 1.55;
  letter-spacing: 4.2px;
  margin: 0 0 40px;
}

.founder-june {
  width: 520px;
  display: inline-block;
  vertical-align: top;
  margin: 0 75px 0 0;
}
.founder-june p {
  font-size: 17px;
  font-weight: 200;
  letter-spacing: 1.6px;
  line-height: 2;
  margin: 0 0 40px;
}

.founder-book {
  width: 380px;
  display: inline-block;
  vertical-align: top;
}
.founder-book h4 {
  font-size: 16px;
  letter-spacing: 1.28px;
  line-height: 1.9;
  font-weight: 300;
  margin: 0 0 30px;
}
.founder-book p {
  font-size: 14px;
  letter-spacing: 0.8px;
  line-height: 1.9;
  font-weight: 100;
  margin: 0 0 30px;
}
.founder-book span {
  font-family: "Roboto", sans-serif;
  font-style: italic;
}

.m-history-color, .year-sel, .m-year-cont {
  display: none;
}

.history-sty {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.history-wrap {
  width: 100%;
  height: 100vh;
  background: #F4F2EF;
  padding: 150px 0 0;
  overflow: hidden;
  position: relative;
}
.history-wrap h2 {
  font-family: "Roboto", sans-serif;
  font-size: 75px;
  letter-spacing: 0.5px;
  font-weight: 500;
  position: absolute;
  top: 280px;
  left: 910px;
  z-index: 2;
}
.history-wrap span {
  font-size: 24px;
  letter-spacing: 3px;
  margin: 15px 0 0;
  display: block;
}

.history-swiper {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.history-swiper .swiper-slide {
  background: #F4F2EF;
}

.history-color {
  width: 700px;
  height: 100%;
  position: relative;
}

.btn-back {
  color: #fff;
  font-size: 15px;
  letter-spacing: 1.5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  top: 305px;
  left: 85px;
  z-index: 2;
  cursor: pointer;
}
.btn-back a {
  color: #fff;
}

.icon-back {
  width: 40px;
  height: 40px;
  background: url(/img/icon_back_w.svg) no-repeat center center;
  margin: 0 10px 0 0;
}

.history-img {
  position: absolute;
  bottom: 112px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}
.history-img .swiper-slide {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.history-img-group {
  width: 840px;
  height: 530px;
  overflow: hidden;
}

.history-sub-bot {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: absolute;
  left: 80px;
  bottom: -35px;
  z-index: 1;
}
.history-sub-bot .swiper-pagination-bullet {
  width: 70px;
  height: 70px;
  border-radius: 0;
  margin: 0 20px 0 0;
  filter: grayscale(100%);
  background: none;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 1;
  cursor: pointer;
  transition: 0.3s;
}
.history-sub-bot .swiper-pagination-bullet:hover {
  filter: grayscale(0);
}
.history-sub-bot .swiper-pagination-bullet-active {
  filter: grayscale(0);
}

.history-sub-img {
  width: 70px;
  height: 70px;
  margin: 0 20px 0 0;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: grayscale(100%);
  transition: 0.3s;
  cursor: pointer;
}
.history-sub-img:hover {
  filter: grayscale(0);
}

.history-txt-group {
  width: 755px;
  height: calc(100% - 407px);
  position: absolute;
  left: 910px;
  bottom: 112px;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: flex-end;
  flex-wrap: wrap;
}

.history-cont {
  width: 100%;
}
.history-cont h3 {
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 2.8px;
  margin: 0 0 30px;
}
.history-cont ol {
  font-size: 16px;
  letter-spacing: 1.2px;
  line-height: 2.18;
  font-weight: 400;
  list-style-type: disc;
  padding: 0 0 0 25px;
}

.year {
  font-family: "Roboto", sans-serif;
  font-size: 60px;
  font-weight: 500;
  letter-spacing: 0;
  margin: 0 0 75px;
}

.memorabilia-mask-up {
  width: 180px;
  height: 195px;
  background: linear-gradient(to bottom, #f4f2ef 0%, rgba(244, 242, 239, 0.4) 100%);
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
}

.memorabilia-mask-down {
  width: 180px;
  height: 220px;
  background: linear-gradient(to bottom, rgba(244, 242, 239, 0.4) 0%, #f4f2ef 100%);
  position: absolute;
  bottom: -44px;
  right: 0;
  z-index: 2;
}

.memorabilia {
  height: 400px;
}
.memorabilia span {
  font-size: 16px;
  letter-spacing: 0.6px;
  line-height: 2.1;
  padding: 0 80px 0 0;
  margin: 0 0 8px 0;
  display: block;
}
.memorabilia span:nth-of-type(1)::after {
  color: #787878;
  content: "2020";
  display: block;
}
.memorabilia .swiper-pagination-bullet {
  width: auto;
  height: auto;
  min-height: 20px;
  border-radius: 0;
  opacity: 1;
}

.year-swiper-box {
  height: 420px;
  padding: 200px 0 0 0;
  position: absolute;
  right: 0;
  bottom: 190px;
  z-index: 2;
  overflow: hidden;
}

.year-swiper {
  width: auto;
  height: 39px;
}
.year-swiper .swiper-slide::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-radius: 10px;
  background: #787878;
  position: absolute;
  top: 41%;
  right: 58px;
  transition: 0.3s ease-out;
}
.year-swiper .swiper-slide::after {
  content: "";
  display: block;
  width: 0;
  height: 1px;
  background: #787878;
  position: absolute;
  top: 47%;
  right: 0;
  transition: 0.3s ease-out;
}
.year-swiper .swiper-slide-active {
  transition: 0.3s;
}
.year-swiper .swiper-slide-active::before {
  width: 5px;
  height: 5px;
}
.year-swiper .swiper-slide-active::after {
  width: 60px;
}

.y-box {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  letter-spacing: 0.6px;
  line-height: 2.1;
  font-weight: 300;
  color: #787878;
  padding: 3px 80px 3px 0;
  text-align: right;
  position: relative;
  cursor: pointer;
}

.product-bg {
  background: #F4F2EF;
}

.product-main-ban {
  margin: 150px 0 0;
}
.product-main-ban .ban-box:hover .txt-en {
  color: #fff;
}

.main-prod-slide-group {
  padding: 240px 0 200px;
  cursor: none;
  overflow: hidden;
  position: relative;
}
.main-prod-slide-group:hover .mouse-evt {
  opacity: 1;
  display: block;
}

.main-prod-slide-box {
  max-width: 1920px;
  margin: 0 auto;
}
.main-prod-slide-box h2 {
  font-family: "Roboto", sans-serif;
  font-size: 60px;
  color: #000;
  letter-spacing: 0.4px;
  font-weight: 500;
  padding: 0 0 0 160px;
  margin: 0 0 15px;
}
.main-prod-slide-box > p {
  font-size: 22px;
  letter-spacing: 3px;
  font-weight: 500;
  padding: 0 0 0 160px;
  margin: 0 0 90px;
}

.product-box {
  max-width: 1920px;
  padding: 0 0 0 160px;
  margin: 0 auto;
}

.product-box-group {
  position: relative;
  padding: 40px 0;
  overflow: hidden;
}

.product-slide {
  width: 100%;
  position: relative;
}
.product-slide .swiper-slide:nth-of-type(odd) .prod-img {
  transform: translateY(-30px);
}
.product-slide .swiper-slide:nth-of-type(even) .prod-img {
  transform: translateY(30px);
}

.product-ban-box {
  max-width: 1920px;
  margin: 0 auto 110px;
  padding: 0 100px;
  overflow: hidden;
}

.product-ban-swiper {
  width: 1024px;
  height: 360px;
  margin: 0 auto;
}
.product-ban-swiper a {
  width: 100%;
  display: block;
  position: relative;
}
.product-ban-swiper a::after {
  content: "";
  display: block;
  background: rgba(0, 0, 0, 0.4);
  transition: 0.4s;
  opacity: 1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}
.product-ban-swiper .swiper-slide-active a::after {
  opacity: 0;
}
.product-ban-swiper img {
  width: 100%;
}

.product-ban-pagin {
  text-align: center;
  margin: 9px 0 0;
}
.product-ban-pagin .swiper-pagination-bullet {
  width: 30px;
  height: 5px;
  border-radius: 0;
  background: #fff;
  margin: 0 5px;
  opacity: 1;
}
.product-ban-pagin .swiper-pagination-bullet-active {
  background: #C8C8C8;
}

.product-list-box {
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
.product-list-box .prod-img {
  width: 340px;
  width: 22.1%;
  margin: 0 0 80px;
}
.product-list-box .prod-img .m-prod-price {
  display: none;
}

.product-filter-box {
  width: 100%;
  border-bottom: 1px solid #C8C8C8;
  margin: 0 0 75px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  position: relative;
  z-index: 2;
}

.sel-ui-box {
  width: 66%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.sel-ui {
  margin: 0 45px 0 0;
  position: relative;
}
.sel-ui:hover .prod-type-panel {
  display: block;
}
.sel-ui:hover .sel-txt::after {
  display: block;
}
.sel-ui.act .sel-txt::after {
  display: block;
}

.sel-txt {
  font-size: 15px;
  letter-spacing: 2px;
  font-weight: 500;
  color: #000;
  height: 70px;
  line-height: 70px;
  padding: 0 27px 0 0;
  background: url(/img/icon_sel_down_b.svg) no-repeat right 8px center;
  cursor: pointer;
  position: relative;
  z-index: 2;
}
.sel-txt::after {
  content: "";
  display: none;
  width: 100%;
  height: 2px;
  background: #000;
  position: absolute;
  bottom: -2px;
  left: 0;
  z-index: 1;
}
.sel-txt span {
  display: inline-block;
  width: 19px;
  text-align: center;
}

.sel-ui.more-filter {
  position: static;
}
.sel-ui.more-filter .sel-txt {
  background: url(/img/icon_filter.svg) no-repeat right 8px center;
}
.sel-ui.more-filter:hover .prod-more-filter {
  display: block;
}

.prod-type-panel {
  font-size: 14px;
  letter-spacing: 0.8px;
  line-height: 2.1;
  background: #fff;
  width: 220px;
  padding: 30px;
  border-radius: 0 3px 3px 3px;
  position: absolute;
  top: 70px;
  left: 0;
  display: none;
}
.prod-type-panel label {
  cursor: pointer;
  display: block;
}
.prod-type-panel label:hover input[type=checkbox]:disabled {
  background-color: #ccc;
}
.prod-type-panel label:hover input[type=checkbox] {
  background-color: #787878;
}
.prod-type-panel input[type=checkbox] {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  display: inline-block;
  background-color: #fff;
  border: 1px solid #787878;
  margin: 0 10px 0 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.prod-type-panel input[type=checkbox]:checked {
  background: #787878 url(/img/icon_check.svg) no-repeat center center;
}
.prod-type-panel input[type=checkbox]:disabled {
  background: #ccc;
  border: none;
}
.prod-type-panel input[type=checkbox]:disabled + span {
  color: #bbb;
}
.prod-type-panel input[type=radio] {
  width: 11px;
  height: 11px;
  border: 1px solid #464646;
  border-radius: 20px;
  display: inline-block;
  margin: 0 10px 0 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.prod-type-panel input[type=radio]:checked {
  position: relative;
}
.prod-type-panel input[type=radio]:checked::after {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  background: #464646;
  border-radius: 20px;
  position: absolute;
  top: 1px;
  left: 1px;
}

.type-scroll {
  margin: 0 30px;
}

.type-scroll-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: nowrap;
}

.type-group {
  margin: 0 0 20px;
}
.type-group p {
  font-size: 14px;
  letter-spacing: 2px;
  color: #000;
  font-weight: 500;
}

.prod-more-filter {
  width: 100%;
}

.sel-search {
  width: 30%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.sel-search form {
  display: block;
  position: relative;
}
.sel-search input[type=text] {
  color: #000;
  font-size: 14px;
  letter-spacing: 2px;
  line-height: 1;
  width: 240px;
  height: 50px;
  background: none;
  padding: 0 25px;
  border-radius: 4px;
  border: 1px solid #C8C8C8;
}
.sel-search input[type=text]::-moz-placeholder {
  color: #c8c8c8;
}
.sel-search input[type=text]::placeholder {
  color: #c8c8c8;
}
.sel-search input[type=submit] {
  width: 24px;
  height: 24px;
  background: url(/img/icon_search_b2.svg) no-repeat center center;
  position: absolute;
  top: 13px;
  right: 15px;
  cursor: pointer;
}

.pagin-box {
  text-align: center;
  width: 100%;
  margin: 40px auto 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pagin-box a {
  font-size: 15px;
  line-height: 1;
  font-weight: 400;
  color: #787878;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 100%;
  border: 1px solid #787878;
  margin: 0 10px;
  display: block;
  transition: 0.4s;
}
.pagin-box a:hover {
  color: #fff;
  background: #464646;
  border: 1px solid #464646;
}
.pagin-box a.act {
  color: #fff;
  background: #464646;
  border: 1px solid #464646;
}
.pagin-box a.pagin-prev {
  border: 0;
  background: url(/img/icon_pagin_left.svg) no-repeat center center;
}
.pagin-box a.pagin-prev:hover {
  background: url(/img/icon_pagin_left.svg) no-repeat left center;
}
.pagin-box a.pagin-next {
  border: 0;
  background: url(/img/icon_pagin_right.svg) no-repeat center center;
}
.pagin-box a.pagin-next:hover {
  background: url(/img/icon_pagin_right.svg) no-repeat right center;
}

.pagin-box {
  text-align: center;
  width: 100%;
  margin: 40px auto 80px;
}
.pagin-box ul {
  display: flex;
  justify-content: center;
  align-items: center;
}
.pagin-box .page-item {
  width: 40px;
  height: 40px;
  margin: 0 10px;
}
.pagin-box .page-link {
  font-size: 15px;
  line-height: 1;
  font-weight: 400;
  color: #787878;
  border: none;
  background: none;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 100%;
  border: 1px solid #787878;
  display: block;
  cursor: pointer;
  transition: 0.4s;
}
.pagin-box .page-link:hover {
  color: #fff;
  background: #464646;
  border: 1px solid #464646;
}
.pagin-box .page-link.act {
  color: #fff;
  background: #464646;
  border: 1px solid #464646;
  cursor: default;
}
.pagin-box .pagin-prev {
  width: 40px;
  height: 40px;
  border: 0;
  background: url(/img/icon_pagin_left.svg) no-repeat center center;
  transition: 0.4s;
}
.pagin-box .pagin-prev:hover {
  border: none;
  background: url(/img/icon_pagin_left.svg) no-repeat left center;
}
.pagin-box .pagin-next {
  width: 40px;
  height: 40px;
  border: 0;
  background: url(/img/icon_pagin_right.svg) no-repeat center center;
  transition: 0.4s;
}
.pagin-box .pagin-next:hover {
  border: none;
  background: url(/img/icon_pagin_right.svg) no-repeat right center;
}
.pagin-box .disabled .page-link {
  color: #c9c9c9;
  cursor: default;
}
.pagin-box .disabled .page-link:hover {
  color: #c9c9c9;
  background: none;
}
.pagin-box .disabled .pagin-prev:hover {
  background: url(/img/icon_pagin_left.svg) no-repeat center center;
}
.pagin-box .disabled .pagin-next:hover {
  background: url(/img/icon_pagin_right.svg) no-repeat center center;
}

.brand-top {
  height: 500px;
  padding: 150px 0 0;
  background: #D29F13;
  box-sizing: content-box;
  margin: 0 0 180px;
}

.brand-products-top {
  background: #D29F13;
  padding: 150px 0 80px;
  position: relative;
  z-index: 8;
}

.brand-logo {
  width: 330px;
  margin: 130px auto 80px;
}
.brand-logo img {
  width: 100%;
}

.brand-series-top {
  background: #D29F13;
  padding: 150px 0 10px;
}
.brand-series-top .brand-logo {
  margin: 166px auto 160px;
}

.product-anius {
  background: #F4F2EF;
  overflow: hidden;
}
.product-anius .s-logo {
  filter: brightness(0) invert(1);
}
.product-anius .breadcrumbs-box {
  border-top: none;
  margin: 0;
}
.product-anius .breadcrumbs-box span {
  color: #FFEDB4;
}
.product-anius .breadcrumbs-box a {
  color: #FFEDB4;
}
.product-anius .breadcrumbs-box span.act {
  color: #fff;
}
.product-anius .nav-box {
  background: #D29F13;
}
.product-anius .nav-box .nav-item {
  color: #fff;
}
.product-anius .nav-box .nav-item::after {
  background: #fff;
}
.product-anius .nav-box .fn-box a {
  color: #fff;
}
.product-anius .nav-box .m-nav-btn span {
  background: #fff;
}
.product-anius .nav-box .m-nav-btn span::after {
  background: #fff;
}
.product-anius .nav-box .m-nav-btn span::before {
  background: #fff;
}
.product-anius .nav-box img {
  filter: brightness(0) invert(1);
}
.product-anius .nav-box .cart-num {
  color: #D29F13;
  background: #fff;
}
.product-anius .bag-box img {
  filter: none;
}
.product-anius .page-nav.fix-top {
  background: #D29F13;
}

.anius-top {
  height: 500px;
  padding: 180px 0 0;
  background: #D29F13;
  box-sizing: content-box;
  margin: 0 0 180px;
}

.anius-products-top {
  background: #D29F13;
  padding: 180px 0 92px;
  position: relative;
  z-index: 2;
}

.anius-logo {
  width: 330px;
  margin: 130px auto 80px;
}
.anius-logo img {
  width: 100%;
}

.anius-series-top {
  background: #D29F13;
  padding: 180px 0 10px;
}
.anius-series-top .anius-logo {
  margin: 166px auto 160px;
}

.anius-type-box {
  text-align: center;
  width: 720px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
}
.anius-type-box p {
  color: #fff;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 2.5px;
  width: 100%;
  margin: 0 0 15px;
}
.anius-type-box .sel-ui {
  margin: 0;
}
.anius-type-box .sel-txt {
  color: #fff;
  height: auto;
  line-height: normal;
  padding: 15px 27px 15px 0;
  background: url(/img/icon_sel_down_w.svg) no-repeat right center;
  position: relative;
  z-index: 2;
}
.anius-type-box .prod-type-panel {
  padding: 30px;
  top: 51px;
  left: 0;
}
.anius-type-box .prod-type-panel label {
  text-align: left;
  color: #464646;
}

.type-slide {
  width: 100%;
  margin: 0 0 15px;
}
.type-slide .swiper-slide {
  width: auto;
}

.anius-type-input-cont {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  flex-wrap: wrap;
}
.anius-type-input-cont.on {
  border-bottom: 1px solid #fff;
  margin: 0 0 30px;
}

.type-item {
  color: #fff;
  font-size: 13px;
  letter-spacing: 1.5px;
  line-height: 1;
  padding: 11px 15px;
  margin: 0 10px 10px 0;
  border: 1px solid #fff;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
}

.btn-del-type {
  width: 12px;
  height: 12px;
  background: url(/img/icon_close_type.svg) no-repeat center;
  margin: 0 0 0 12px;
  cursor: pointer;
  display: block;
}

.anius-type-submit {
  text-align: center;
  color: #fff;
  font-size: 15px;
  letter-spacing: 1.5px;
  font-weight: 400;
  line-height: 50px;
  width: 190px;
  height: 50px;
  border: 1px solid #fff;
  cursor: pointer;
  transition: 0.4s ease-out;
}
.anius-type-submit:hover {
  color: #000;
  background: #fff;
}

.anius-brand-box {
  max-width: 1920px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

.anius-brand-slider {
  position: relative;
}
.anius-brand-slider img {
  width: 100%;
}
.anius-brand-slider .product-brand-pagin {
  text-align: center;
  position: absolute;
  bottom: 60px;
  z-index: 2;
  width: 100%;
}
.anius-brand-slider .product-brand-pagin .swiper-pagination-bullet {
  width: 30px;
  height: 5px;
  border-radius: 0;
  background: #fff;
  opacity: 1;
}
.anius-brand-slider .product-brand-pagin .swiper-pagination-bullet-active {
  background: #D29F13;
}

.brand-group-1 .b-p-01 {
  top: 38.5%;
  left: 65.2%;
}
.brand-group-1 .b-p-02 {
  top: 40.3%;
  left: 34.5%;
}
.brand-group-1 .b-p-03 {
  top: 65.2%;
  left: 59.9%;
}

.brand-group-2 .b-p-01 {
  top: 70.1%;
  left: 71.4%;
}
.brand-group-2 .b-p-02 {
  top: 45.7%;
  left: 55%;
}
.brand-group-2 .b-p-03 {
  top: 70.2%;
  left: 16.5%;
}

.brand-group-3 .b-p-01 {
  top: 44.8%;
  left: 52.1%;
}
.brand-group-3 .b-p-02 {
  top: 65.1%;
  left: 37.5%;
}
.brand-group-3 .b-p-03 {
  top: 63%;
  left: 85.7%;
}

.brand-group-4 .b-p-01 {
  top: 80.8%;
  left: 17.8%;
}
.brand-group-4 .b-p-02 {
  top: 29%;
  left: 15%;
}
.brand-group-4 .b-p-03 {
  top: 61.9%;
  left: 75.5%;
}

.brand-group-5 .b-p-01 {
  top: 34.6%;
  left: 17%;
}
.brand-group-5 .b-p-02 {
  top: 35.1%;
  left: 67.2%;
}
.brand-group-5 .b-p-03 {
  top: 58.9%;
  left: 64.5%;
}

.brand-product {
  width: 1.095%;
  position: absolute;
  top: 10%;
  left: 20%;
  z-index: 1;
  cursor: pointer;
}
.brand-product img {
  width: 100%;
  margin: 0 auto;
}

.pop-prod-mask {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 7;
  opacity: 0;
  visibility: hidden;
}

.pop-main-box {
  width: 600px;
  height: 400px;
  background: #B28300;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  overflow: hidden;
  transform: translate(-50%, -48%);
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  opacity: 0;
  visibility: hidden;
}

.pop-close {
  width: 24px;
  height: 24px;
  background-image: url(/img/close_pop.svg);
  background-repeat: no-repeat;
  background-position: center center;
  position: absolute;
  right: 18px;
  top: 18px;
  z-index: 1;
  cursor: pointer;
  transition: 0.4s;
}
.pop-close:hover {
  background-color: #B28300;
}

.pop-prod-img {
  width: 300px;
  height: 400px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.pop-prod-cont {
  width: 300px;
  height: 100%;
  position: relative;
}
.pop-prod-cont h2 {
  font-size: 17px;
  letter-spacing: 3px;
  color: #fff;
  font-weight: 400;
  padding: 20px 30px;
  background: #D29F13;
}
.pop-prod-cont p {
  font-size: 15px;
  letter-spacing: 0.8px;
  color: #fff;
  line-height: 1.8;
  font-weight: 400;
  height: 100%;
  padding: 30px;
}
.pop-prod-cont .btn-more {
  position: absolute;
  left: 30px;
  bottom: 20px;
  z-index: 1;
}

.more-btn {
  width: 100%;
  position: absolute;
  top: -19px;
  right: -22px;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}

.more-ani {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  position: absolute;
  z-index: -1;
  animation: moreAni 1s infinite alternate ease-out;
}

@keyframes moreAni {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}
.anius-event-group {
  background: #E7CB7F;
}

.anius-event-box {
  max-width: 1920px;
  padding: 160px 0;
  margin: 0 auto;
}
.anius-event-box .product-ban-pagin .swiper-pagination-bullet {
  background: #fff;
}
.anius-event-box .product-ban-pagin .swiper-pagination-bullet-active {
  background: #B28300;
}

.anius-event-slider {
  width: 1400px;
  margin: 0 auto;
  overflow: hidden;
}

.anius-e-bxo {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
}

.e-cont {
  color: #fff;
  width: 620px;
  background: #D29F13;
  padding: 0 80px 70px 80px;
  margin: 0 -80px 0 0;
  position: relative;
  z-index: 1;
}
.e-cont h3 {
  letter-spacing: 2.8px;
  margin: 0 0 30px;
}
.e-cont span {
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  line-height: 1;
  border-right: 1px solid #fff;
  padding: 0 10px 0 0;
  margin: 0 10px 0 0;
  display: inline-block;
}
.e-cont span:last-child {
  border: none;
}
.e-cont h2 {
  font-size: 40px;
  letter-spacing: 3.5px;
  line-height: 1.6;
  margin: 0 0 60px;
}
.e-cont p {
  font-size: 17px;
  letter-spacing: 1px;
  line-height: 2;
  font-weight: 350;
  margin: 0 0 20px;
}

.e-en {
  font-family: "Roboto", sans-serif;
  font-size: 60px;
  letter-spacing: 0.5px;
  font-weight: 500;
  position: relative;
  top: -39px;
}

.spin-group {
  background: #F4F2EF;
  position: relative;
}
.spin-group .pop-close:hover {
  background-color: #6ea287;
}
.spin-group .pop-main-box {
  width: 850px;
  background: #6FA287;
}
.spin-group .pop-prod-cont {
  width: 550px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
.spin-group .pop-prod-cont h2 {
  width: 100%;
  background: #9ABEAA;
}
.spin-group .pop-prod-cont p {
  width: 50%;
  padding: 20px 15px 20px 30px;
}
.spin-group .pop-prod-cont p:nth-of-type(2) {
  padding: 20px 30px 20px 15px;
}
.spin-group .pop-desc {
  font-size: 15px;
  letter-spacing: 1px;
  color: #fff;
  font-weight: 400;
  width: 100%;
  border-bottom: 1px solid #9ABEAA;
  padding: 18px 30px;
}

.spin-box {
  text-align: center;
  max-width: 1920px;
  padding: 100px 0 0;
  margin: 0 auto;
}
.spin-box h2 {
  font-family: "Roboto", sans-serif;
  font-size: 60px;
  letter-spacing: 0.5px;
  font-weight: 500;
  margin: 0 0 20px;
}
.spin-box h3 {
  font-size: 20px;
  letter-spacing: 3px;
  font-weight: 500;
  margin: 0 0 140px;
}

.spin-game-box {
  height: 670px;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.btn-spin {
  width: 120px;
  position: absolute;
  z-index: 3;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  transition: 0.4s ease-out;
  cursor: pointer;
}
.btn-spin:hover {
  transform: translateX(-50%) scale(1.2);
}
.btn-spin img {
  width: 100%;
}

.spin-game {
  width: 1764px;
  height: 1764px;
  background: #F4F2EF;
  position: relative;
  margin: 0 auto;
}

.act-jar {
  width: 40px;
  background: #F4F2EF;
  position: absolute;
  top: 321px;
  left: 50%;
  z-index: 5;
  transform: translateX(-50%);
  cursor: pointer;
  opacity: 1;
  visibility: hidden;
}
.act-jar img {
  width: 100%;
}
.act-jar .more-btn {
  width: 30px;
  height: 30px;
  top: -15px;
  right: -39px;
}
.act-jar .more-ani {
  background: rgba(224, 224, 224, 0.5);
}

.act-spin {
  width: 18px;
  position: absolute;
  z-index: 4;
  top: 86.2px;
  left: 50%;
  transform: translateX(-55.7%);
}

.inside {
  width: 1560px;
  height: 1560px;
  border-radius: 100%;
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes inverseAni {
  0% {
    transform: translate(-50%, -50%) rotate(0);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-720deg);
  }
}
.outside {
  width: 1764px;
  height: 1764px;
  border-radius: 100%;
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.3;
}

@keyframes shunAni {
  0% {
    transform: translate(-50%, -50%) rotate(0);
  }
  100% {
    transform: translate(-50%, -50%) rotate(720deg);
  }
}
.skin-group {
  background: #5E7461;
}
.skin-group h2 {
  font-family: "Roboto", sans-serif;
  color: #fff;
  font-size: 60px;
  letter-spacing: 0.5px;
  font-weight: 500;
  margin: 0 0 20px;
}
.skin-group h3 {
  color: #fff;
  font-size: 20px;
  letter-spacing: 3px;
  font-weight: 500;
}

.skin-box {
  max-width: 1920px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
}
.skin-box img {
  width: 100%;
}

.skin-left {
  width: 50%;
  height: 920px;
  padding: 120px 0 0 160px;
  position: relative;
}

.skin-img {
  width: 600px;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.skin-link {
  width: 46px;
  height: 46px;
  border-radius: 100%;
  box-sizing: content-box;
  position: absolute;
  z-index: 1;
  display: block;
  transition: 0.4s;
}
.skin-link:hover .skin-hover {
  transform: translate(-50%, -50%) rotate(0) scale(1);
}
.skin-link:hover .skin-info {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.skin-hover {
  width: 80px;
  height: 80px;
  border: 20px solid rgba(255, 255, 255, 0.4);
  border-radius: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0) scale(0);
  transition: 0.4s;
}

.link-01 {
  top: 42%;
  left: 56.4%;
}

.link-02 {
  top: 4.1%;
  left: 38.9%;
}
.link-02 .skin-info {
  bottom: -80px;
  left: 22px;
}

.link-03 {
  top: 57.3%;
  left: 33.5%;
}

.link-04 {
  top: 80.5%;
  left: 57.9%;
}
.link-04 .skin-info {
  top: -78px;
  left: 20px;
}

.link-05 {
  top: 17.9%;
  left: 54.6%;
}

.link-06 {
  top: 9.8%;
  left: 9.2%;
}
.link-06 .skin-info {
  bottom: -80px;
  left: 22px;
}

.link-07 {
  top: 74.9%;
  left: 61.9%;
}
.link-07 .skin-info {
  top: -68px;
  left: -60px;
}

.skin-info {
  color: #000;
  font-size: 14px;
  letter-spacing: 2.6px;
  line-height: 1;
  font-weight: 400;
  width: 150px;
  visibility: hidden;
  position: absolute;
  top: 72px;
  left: 0;
  z-index: 1;
  transition: 0.4s;
  opacity: 0;
  transform: translateY(10px);
}
.skin-info p.en {
  font-family: "Roboto", sans-serif;
  letter-spacing: 0.3px;
  margin: 8px 0 8px;
}
.skin-info img {
  width: 20px;
}

.skin-right {
  width: 50%;
  height: 920px;
  background: #B1C8B4;
  position: relative;
}

.skin-img-2 {
  width: 600px;
  position: absolute;
  left: 0;
  bottom: 180px;
  z-index: 1;
}
.skin-img-2 .btn-more {
  color: #000;
  margin: 30px 0 0;
  position: absolute;
  right: 0;
}

.emotions-box {
  max-width: 1920px;
  margin: 0 auto;
  padding: 120px 160px;
  cursor: none;
  overflow: hidden;
}
.emotions-box img {
  width: 100%;
}
.emotions-box:hover .mouse-evt {
  opacity: 1;
  display: block;
}
.emotions-box a {
  cursor: none;
}

.emotions-slide {
  width: 100%;
  margin: 120px 0 0;
  position: relative;
}
.emotions-slide .swiper-slide:nth-of-type(odd) .prod-img-cover {
  margin: 0 0 30px;
  position: relative;
  overflow: hidden;
}
.emotions-slide .swiper-slide:nth-of-type(odd) .prod-img-cover:hover > img {
  opacity: 70%;
}
.emotions-slide .swiper-slide:nth-of-type(odd) .prod-img-cover:hover .btn-add-cart {
  bottom: 0;
}
.emotions-slide .swiper-slide:nth-of-type(odd) .prod-img-cover img {
  width: 100%;
  transition: 0.4s;
}
.emotions-slide .swiper-slide:nth-of-type(odd) .emotions-img {
  transform: translateY(-30px);
}
.emotions-slide .swiper-slide:nth-of-type(even) .emotions-img {
  transform: translateY(30px);
}

.emotions-img {
  width: 100%;
  position: relative;
  background: #000;
  display: block;
}
.emotions-img h4 {
  font-size: 20px;
  letter-spacing: 2.6px;
  color: #fff;
  text-align: center;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 60px;
  z-index: 1;
  transition: 0.4s ease-out;
}
.emotions-img:hover h4 {
  bottom: 70px;
}
.emotions-img:hover img {
  opacity: 70%;
}
.emotions-img img {
  transition: 0.4s;
}

.anius-oil-info-group {
  background: #F1EBDF;
}

.anius-oil-info-box {
  max-width: 1920px;
  margin: 0 auto;
  padding: 130px 145px;
}
.anius-oil-info-box h2 {
  text-align: center;
  font-size: 43px;
  letter-spacing: 5px;
  color: #000;
  font-weight: 500;
  margin: 0 0 67px;
}
.anius-oil-info-box p {
  font-size: 20px;
  letter-spacing: 1.67px;
  line-height: 2.1;
  font-weight: 500;
  color: #000;
  max-width: 1230px;
  margin: 0 auto;
}

.info-tab-box {
  width: 1060px;
  margin: 0 auto 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
}
.info-tab-box .tab-box:last-of-type {
  border-right: none;
}

.tab-box {
  font-size: 17px;
  letter-spacing: 2.7px;
  font-weight: 300;
  color: #464646;
  line-height: 1;
  padding: 2px 80px;
  border-right: 2px solid #DFD2B7;
  transition: 0.4s;
  cursor: pointer;
}
.tab-box:hover {
  color: #000;
  font-weight: 400;
}
.tab-box.act {
  color: #000;
  font-weight: 400;
}

.anius-origin-slider {
  width: 1165px;
  margin: 0 auto 83px;
  overflow: hidden;
}
.anius-origin-slider p {
  text-align: center;
  font-size: 17px;
  letter-spacing: 1px;
  font-weight: 300;
  line-height: 2;
  width: 680px;
}

.anius-oil-principle {
  max-width: 1920px;
  border-top: 1px solid #979797;
  margin: 0 auto;
  padding: 130px 145px 0;
}
.anius-oil-principle h2 {
  text-align: center;
  font-size: 43px;
  letter-spacing: 5px;
  color: #000;
  font-weight: 500;
  margin: 0 0 67px;
}
.anius-oil-principle p {
  font-size: 18px;
  letter-spacing: 1.67px;
  line-height: 2.1;
  font-weight: 500;
  color: #000;
  max-width: 1230px;
  margin: 0 auto;
}

.anius-origin-logo-slider {
  width: 1165px;
  margin: 0 auto 100px;
  overflow: hidden;
}
.anius-origin-logo-slider img {
  display: block;
  margin: 0 auto;
}

.logo-slide-box {
  width: 136px;
  height: 140px;
  margin: 0 auto;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

.anius-series-group {
  background: #E9DCC4;
}

.anius-series-box {
  max-width: 1920px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: nowrap;
}

.anius-series-type {
  text-align: center;
  width: 100%;
  margin: 0 auto;
  border-bottom: 1px solid #FFD04F;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
}
.anius-series-type .swiper-wrapper {
  text-align: center;
  width: auto;
}
.anius-series-type .swiper-slide {
  width: auto;
  display: inline-block;
}
.anius-series-type a {
  font-size: 20px;
  letter-spacing: 3px;
  color: #FFEDBB;
  font-weight: 400;
  border-bottom: 2px solid transparent;
  padding: 30px 40px;
  position: relative;
  bottom: -1px;
  display: block;
  transition: 0.4s;
}
.anius-series-type a:hover {
  color: #fff;
  border-bottom: 2px solid #fff;
}
.anius-series-type a.act {
  color: #fff;
  border-bottom: 2px solid #fff;
}

.anius-series-sub-type {
  text-align: center;
  width: 100%;
  height: 20px;
  line-height: 20px;
  margin: 30px 0 20px;
  overflow: hidden;
}

.anius-series-sub-type-group {
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  flex-wrap: nowrap;
}
.anius-series-sub-type-group a {
  font-size: 15px;
  letter-spacing: 1.8px;
  color: #FFEDBB;
  font-weight: 400;
  border-right: 1px solid #FFD04F;
  padding: 0 30px;
  display: block;
  transition: 0.4s;
}
.anius-series-sub-type-group a:hover {
  color: #fff;
}
.anius-series-sub-type-group a.act {
  color: #fff;
}
.anius-series-sub-type-group .swiper-slide-active a {
  color: #fff;
}

.anius-series-group-cont .swiper-slide {
  width: auto;
}
.anius-series-group-cont .swiper-slide:nth-last-of-type(2) a {
  border-right: none;
}

.series-img {
  width: 50%;
}
.series-img img {
  width: 100%;
}

.series-info {
  width: 50%;
  padding: 218px 9.4% 200px;
}
.series-info h2 {
  color: #000;
  text-align: center;
  font-size: 34px;
  font-weight: 500;
  letter-spacing: 3px;
  line-height: 1.8;
  margin: 0 0 80px;
}
.series-info > p {
  font-size: 17px;
  color: #464646;
  font-weight: 400;
  letter-spacing: 1.3px;
  line-height: 2;
  margin: 0 0 80px;
}

.series-info-mid {
  padding: 0 9.4%;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
}

.ingredients-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  margin: 0 0 80px;
}
.ingredients-item img {
  width: 90px;
  margin: 0 40px 0 0;
}

.ingredients-item-cont h3 {
  font-size: 16px;
  color: #000;
  letter-spacing: 3px;
  font-weight: 500;
  margin: 0 0 10px;
}
.ingredients-item-cont p {
  color: #464646;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 1.4px;
  line-height: 1.8;
}

.file-box {
  width: 100%;
  height: 50px;
  line-height: 50px;
  border: 1px solid #787878;
  display: block;
  margin: 0 0 20px;
}
.file-box p {
  font-size: 17px;
  letter-spacing: 1.2px;
  line-height: 50px;
  padding: 0 0 0 18px;
  color: #000;
  font-weight: 400;
  float: left;
}

.file-link {
  background: url(/img/btn_arrow.svg) no-repeat right 15px center;
  transition: 0.4s ease-out;
}
.file-link:hover {
  background: #e8d5b1 url(/img/btn_arrow.svg) no-repeat right 15px center;
}

.file-btn {
  width: 50px;
  height: 100%;
  float: right;
  border-left: 1px solid #787878;
  transition: 0.4s ease-out;
}

.btn-check-pdf {
  background: url(/img/icon_search_plus.svg) no-repeat center center;
}
.btn-check-pdf:hover {
  background: #e8d5b1 url(/img/icon_search_plus.svg) no-repeat center center;
}

.btn-download-pdf {
  background: url(/img/icon_file_download.svg) no-repeat center center;
}
.btn-download-pdf:hover {
  background: #e8d5b1 url(/img/icon_file_download.svg) no-repeat center center;
}

.template-point {
  width: auto;
  height: auto;
  position: fixed;
  top: 50%;
  left: 32px;
  z-index: 4;
  opacity: 0;
  transform: translate(-150%, -50%);
  transition: 0.4s ease-out;
}
.template-point.on {
  opacity: 1;
  transform: translate(0, -50%);
}

.pot-group {
  height: 30px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
}
.pot-group p {
  font-size: 13px;
  color: #787878;
  letter-spacing: 1.5px;
  font-weight: 400;
  padding: 0 0 0 18px;
  opacity: 0;
  transition: 0.4s ease-out;
}
.pot-group:hover p {
  opacity: 1;
}
.pot-group:hover .pot::after {
  width: 18px;
  height: 18px;
}
.pot-group.act .pot::after {
  width: 18px;
  height: 18px;
}

.pot {
  width: 6px;
  height: 6px;
  background: #787878;
  border-radius: 100%;
  position: relative;
}
.pot::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border: 1px solid #787878;
  border-radius: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  transition: 0.2s ease-out;
}

.p-cont-box {
  padding: 10px 0 0;
  margin: 150px 0 0;
}
.p-cont-box .add-on-box .product-list-box .prod-img {
  width: 100%;
  margin: 0 0 0;
}

.p-cont {
  width: 100%;
  max-width: 1440px;
  padding: 0 0 120px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: nowrap;
}

.p-cover {
  width: 720px;
  padding-bottom: 54.546%;
  position: relative;
}
.p-cover img {
  width: 70%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.p-detail {
  width: 480px;
}

.p-brand {
  font-size: 15px;
  color: #000;
  letter-spacing: 2px;
  font-weight: 400;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 50px;
}

.p-name {
  font-size: 26px;
  color: #000;
  letter-spacing: 3px;
  font-weight: 300;
  margin: 0 0 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.p-name-en {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  letter-spacing: 0.4px;
  font-weight: 400;
  margin: 0 0 40px;
}

.p-price {
  font-family: "Roboto", sans-serif;
  font-size: 17px;
  letter-spacing: 1px;
  font-weight: 500;
}

.p-sale-mesg {
  font-size: 14px;
  color: #437E63;
  letter-spacing: 1.2px;
  font-weight: 500;
}
.p-sale-mesg a {
  color: #d86018;
}

.p-note {
  margin: 6px 0 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

.p-note-item {
  font-size: 12px;
  color: #D86018;
  font-weight: 500;
  border: 1px solid #D86018;
  padding: 2px 6px;
  margin: 0 6px 6px 0;
}

.p-ml-box {
  border-top: 1.5px solid #000;
  margin: 10px 0 0;
  padding: 25px 0;
  display: flex;
}

.ml-opt {
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  color: #787878;
  letter-spacing: 0.6px;
  font-weight: 400;
  text-align: center;
  width: 70px;
  padding: 8px 0;
  border: 1px solid #C8C8C8;
  border-radius: 4px;
  margin: 0 20px 0 0;
  cursor: pointer;
  transition: 0.4s ease-out;
}
.ml-opt:hover {
  color: #fff;
  background: #787878;
  border: 1px solid #787878;
}
.ml-opt.act {
  color: #fff;
  background: #787878;
  border: 1px solid #787878;
}

.p-cart {
  width: 100%;
  display: flex;
  margin: 0 0 40px;
}
.p-cart .ui-quantity {
  width: 150px;
  height: 50px;
  margin: 0 15px 0 0;
}
.p-cart .btn-quantity {
  width: 48px;
  height: 48px;
  line-height: 48px;
}

.p-btn-group {
  width: 65.6%;
  display: flex;
  justify-content: space-between;
}

.p-btn-add {
  font-size: 15px;
  color: #fff;
  letter-spacing: 1.5px;
  text-align: center;
  font-weight: 400;
  width: calc(100% - 50px);
  height: 50px;
  line-height: 50px;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.p-btn-add img {
  margin: 0 20px 0 0;
}

.p-add-fav {
  width: 50px;
  height: 50px;
  background: #9ABEAA url(/img/icon_fav_w.svg) no-repeat center center/20px;
  cursor: pointer;
}
.p-add-fav.act {
  background: #9ABEAA url(/img/icon_fav_w_on.svg) no-repeat center center/20px;
}

.p-info-unfold {
  margin: 0 0 5px;
}
.p-info-unfold h3 {
  font-size: 14px;
  color: #507C65;
  letter-spacing: 1.2px;
  font-weight: 400;
  padding: 16px 10px 15px 30px;
  background: url(/img/icon_unfold.svg) no-repeat left center;
  border-bottom: 1px solid #C8C8C8;
  cursor: pointer;
}
.p-info-unfold ul {
  padding: 15px 30px;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}

.p-info-cont {
  overflow: hidden;
  transition: 0.3s ease-out;
}

.obj-group {
  justify-content: space-between;
}
.obj-group li {
  width: 44%;
  margin: 0 0 16px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
.obj-group h4 {
  font-size: 13px;
  color: #464646;
  letter-spacing: 1px;
  font-weight: 400;
  margin: 0 0 7px;
}
.obj-group p {
  font-size: 12px;
  color: #787878;
  letter-spacing: 0.8px;
  font-weight: 400;
}

.oil-characteristic {
  justify-content: flex-start;
}
.oil-characteristic li {
  width: 70px;
  margin: 0 20px 0 0;
}

.other-note {
  display: block;
}
.other-note li {
  font-size: 12px;
  color: #787878;
  letter-spacing: 0.6px;
  line-height: 1.8;
  font-weight: 400;
}

.unfold-img {
  width: 65px;
  margin: 0 20px 0 0;
}
.unfold-img img {
  width: 100%;
}

.unfold-p {
  width: calc(100% - 85px);
}

.p-video {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin: 20px 0 0;
}

.view-txt {
  font-size: 14px;
  color: #464646;
  letter-spacing: 1.2px;
  padding: 0 0 0 28px;
  background: url(/img/icov_view_video.svg) no-repeat left center/16px;
  cursor: pointer;
}

.p-num {
  font-size: 12px;
  color: #787878;
  letter-spacing: 1.5px;
}

.fn-box-1 {
  padding: 120px 0 290px 240px;
  background: #F1EBDF;
}
.fn-box-1 h2 {
  font-size: 30px;
  color: #000;
  letter-spacing: 2.5px;
  font-weight: 500;
  margin: 0 0 40px;
}

.f-cont {
  min-height: 530px;
  padding: 80px;
  margin: 0 0 100px;
  background: #fff;
  position: relative;
}
.f-cont p {
  font-size: 16px;
  color: #464646;
  letter-spacing: 1.2px;
  line-height: 1.9;
  width: 40%;
  margin: 0 0 40px;
}
.f-cont.reset{
  display: block;
  padding: 25px;
}
.f-cont.reset p {
  width: auto;
}

.f-cont-img {
  width: 634px;
  position: absolute;
  top: 50%;
  right: 200px;
  z-index: 1;
  transform: translateY(-50%);
}
.f-cont-img img {
  width: 100%;
}

.fn-7-box {
  font-size: 30px;
  color: #000;
  letter-spacing: 2.5px;
  padding: 120px 0 120px 240px;
  background: #F1EBDF;
}
.fn-7-box h2 {
  margin: 0 0 40px;
}

.f-7-cont {
  padding: 80px;
  background: #fff;
  position: relative;
}
.f-7-cont p {
  font-size: 16px;
  color: #464646;
  letter-spacing: 1.2px;
  line-height: 1.8;
  width: 40%;
  margin: 0 0 40px;
}

.f-7-cont-img {
  width: 634px;
  position: absolute;
  top: -70px;
  right: 200px;
  z-index: 1;
}
.f-7-cont-img img {
  width: 100%;
}

.fn-7-txt-group .fn-7-txt-g:last-child {
  margin: 0;
}

.fn-7-txt-g {
  margin: 0 0 50px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}

.fn-7-num {
  font-family: "Roboto", sans-serif;
  font-size: 15px;
  letter-spacing: 0;
  color: #fff;
  text-align: center;
  width: 40px;
  height: 40px;
  line-height: 40px;
  margin: 0 30px 0 0;
  border-radius: 100%;
  background: #464646;
}

.fn-7-txt-cont {
  width: 40%;
}
.fn-7-txt-cont h3 {
  font-size: 20px;
  color: #000;
  letter-spacing: 1.6px;
  margin: 0 0 20px;
}
.fn-7-txt-cont p {
  font-size: 14px;
  color: #000;
  letter-spacing: 1px;
  width: auto;
  margin: 0;
}

.fn-box-2 {
  width: 100%;
  background: #F4F2EF;
}

.fn-box-2-cont {
  width: 1440px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: nowrap;
}

.fn-2-left {
  width: 47.223%;
  height: 100%;
  background: #fff;
  position: relative;
  top: -170px;
}
.fn-2-left h3 {
  font-size: 30px;
  color: #fff;
  letter-spacing: 2.5px;
  font-weight: 500;
  text-align: center;
  width: 100%;
  height: 170px;
  line-height: 170px;
  background: url(/img/anius_part_img_1.jpg) no-repeat center center/cover;
}

.scroll-box {
  padding: 60px;
}
.scroll-box .scrollbar-dynamic {
  height: 100%;
}
.scroll-box .scrollbar-dynamic > .scroll-element.scroll-y {
  right: -20px;
}
.scroll-box .scroll-wrapper {
  overflow: unset !important;
}

.fn-list {
  overflow: auto;
  padding: 0 20px;
  background: #fff;
}
.fn-list li {
  font-size: 16px;
  color: #464646;
  padding: 0 0 22px;
  margin: 0 0 22px;
  border-bottom: 1px solid #c8c8cc;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
}

.list-name {
  letter-spacing: 1px;
  font-weight: 400;
  width: 100px;
}

.list-en {
  font-family: "Roboto", sans-serif;
  letter-spacing: 0.8px;
  font-weight: 300;
  text-align: right;
  width: calc(100% - 100px);
}

.fn-2-rihgt {
  width: 47.223%;
  height: 100%;
  background: #fff;
  margin: 0 0 0 5.554%;
  position: relative;
  top: -170px;
}
.fn-2-rihgt h3 {
  font-size: 30px;
  color: #000;
  letter-spacing: 2.5px;
  font-weight: 500;
  text-align: center;
  width: auto;
  height: 170px;
  line-height: 170px;
  border-bottom: 1px solid #c8c8cc;
  margin: 0 60px 0;
  background: #fff;
}

.radar-box {
  height: calc(100% - 170px);
  margin: 60px;
  background: #fff;
}

.fn-box-3 {
  width: 100%;
  background: #F4F2EF;
  padding: 120px 0 290px 240px;
}

.fn-box-tit {
  margin: 0 0 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.t3-tit {
  font-size: 16px;
  color: #787878;
  letter-spacing: 1.6px;
  font-weight: 400;
  cursor: pointer;
}
.t3-tit.act {
  color: #464646;
}

.t3-px {
  width: 60px;
  height: 1.5px;
  background: #C8C8C8;
  margin: 0 40px;
}

.fn-box-3-slider {
  width: 1440px;
  margin: 0 auto;
  overflow: hidden;
}
.fn-box-3-slider .product-slider-pagin {
  text-align: center;
  margin: 29px auto 0;
}
.fn-box-3-slider .product-slider-pagin .swiper-pagination-bullet {
  width: 30px;
  height: 5px;
  border-radius: 0;
  background: #ddd;
  margin: 0 5px;
  opacity: 1;
}
.fn-box-3-slider .product-slider-pagin .swiper-pagination-bullet-active {
  background: #000;
}

.slider-e-box {
  width: 100%;
  position: relative;
}

.slider-e-cont {
  width: 43.056%;
  background: #638BD4;
  padding: 100px 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  position: absolute;
  right: 0;
  top: 50%;
  z-index: 1;
  transform: translate(0, -50%);
}
.slider-e-cont h2 {
  font-size: 30px;
  color: #fff;
  letter-spacing: 2.5px;
  width: 100%;
  margin: 0 0 60px;
}
.slider-e-cont p {
  font-size: 16px;
  color: #fff;
  letter-spacing: 1.2px;
  width: 100%;
  line-height: 1.8;
}

.prod-slide-img {
  width: 61.112%;
}
.prod-slide-img img {
  width: 100%;
}

.fn-8 {
  width: 100%;
  background: #F4F2EF;
  padding: 120px 0 0 0;
}

.fn-8-box {
  max-width: 1920px;
  margin: 0 auto;
}

.fn-8-bg {
  max-width: 1680px;
  margin: 0 auto 0 12.5%;
  padding: 120px;
  background: url(/img/anius_part_img_2.jpg) no-repeat center center/cover;
}
.fn-8-bg h2 {
  font-size: 30px;
  color: #fff;
  letter-spacing: 3px;
  font-weight: 500;
  margin: 0 0 20px;
}
.fn-8-bg p {
  font-size: 18px;
  color: #fff;
  letter-spacing: 2px;
  line-height: 1.8;
}

.template-1 {
  background: #F1EBDF;
}

.t-1-cont {
  width: 1440px;
  padding: 120px 0;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.t-img {
  width: 840px;
}
.t-img img {
  width: 100%;
}

.t-txt-group {
  width: 450px;
}

.t-group {
  padding: 30px 0;
}
.t-group span {
  font-size: 16px;
  color: #000;
  letter-spacing: 1.6px;
  font-weight: 400;
  margin: 0 0 20px;
  display: inline-block;
}
.t-group h2 {
  font-size: 24px;
  color: #000;
  letter-spacing: 2px;
  margin: 0 0 40px;
}
.t-group p {
  font-size: 16px;
  color: #000;
  letter-spacing: 1.2px;
  line-height: 1.8;
}

.px-2 {
  width: 25px;
  height: 1px;
  background: #464646;
}

.template-2 {
  background: #ECE2CE;
  padding: 100px 0 120px;
}
.template-2 span {
  font-size: 28px;
  color: #000;
  letter-spacing: 2.4px;
  font-weight: 500;
  padding: 0 0 0 240px;
  margin: 0 0 30px;
  display: block;
}
.template-2 h2 {
  font-size: 35px;
  color: #000;
  letter-spacing: 2.5px;
  font-weight: 500;
  padding: 0 0 0 240px;
  margin: 0 0 60px;
}

.t-2-arrow-box {
  min-height: 200px;
  padding: 0 100px 0 240px;
  margin: 0 240px 0 0;
  background-image: url(/img/t_3_arrow.svg), linear-gradient(to right, #fff calc(100% - 70px), transparent calc(100% - 70px));
  background-repeat: no-repeat;
  background-position: right center;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ar-group {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ar-group h3 {
  font-size: 22px;
  color: #464646;
  letter-spacing: 2.2px;
  font-weight: 400;
  border-bottom: 1px solid #979797;
  padding: 0 0 16px;
  margin: 0 0 16px;
}
.ar-group p {
  font-size: 18px;
  color: #464646;
  letter-spacing: 1.8px;
  line-height: 1.8;
}

.cricle-txt {
  font-size: 22px;
  color: #464646;
  letter-spacing: 2.2px;
  text-align: center;
  font-weight: 500;
  width: 100px;
  height: 100px;
  line-height: 100px;
  border: 1px solid #464646;
  border-radius: 100%;
}

.ar-tit-group {
  width: calc(100% - 140px);
}

.template-3 {
  width: 100%;
  padding: 140px 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.t-3-box {
  width: 1680px;
  margin: 0 auto;
}
.t-3-box h2 {
  font-size: 30px;
  color: #fff;
  letter-spacing: 2.5px;
  font-weight: 500;
  text-align: center;
  margin: 0 0 110px;
}
.t-3-box ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.t-3-box li {
  font-size: 22px;
  color: #fff;
  letter-spacing: 1.6px;
  text-align: center;
  font-weight: 400;
  height: 160px;
  width: 25%;
  padding: 0 50px;
  border-right: 1px solid #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}
.t-3-box li:last-child {
  border: none;
}

.template-4 {
  width: 100%;
  padding: 200px 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.t-4-box {
  width: 1440px;
  margin: 0 auto;
}

.t-4-txt {
  font-weight: 400;
  width: 620px;
  background: rgba(198, 178, 137, 0.9);
  padding: 80px;
}
.t-4-txt span {
  font-size: 16px;
  color: #fff;
  letter-spacing: 1.6px;
  margin: 0 0 40px;
  display: block;
}
.t-4-txt h2 {
  font-size: 30px;
  color: #fff;
  letter-spacing: 2.5px;
  font-weight: 500;
  margin: 0 0 40px;
}
.t-4-txt p {
  font-size: 16px;
  color: #fff;
  letter-spacing: 1.6px;
  line-height: 1.9;
}

.template-5 {
  width: 100%;
  padding: 200px 0;
  background: #F1EBDF;
}

.t-5-box {
  width: 1440px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
.t-5-box h2 {
  font-size: 30px;
  color: #000;
  letter-spacing: 2.5px;
  font-weight: 500;
  width: 100%;
  margin: 0 0 30px;
}
.t-5-box h3 {
  font-size: 18px;
  color: #000;
  letter-spacing: 2px;
  background: #FFFBF4;
  font-weight: 400;
  padding: 16px 23px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.t-5-box img {
  max-width: 28px;
  max-height: 28px;
  margin: 0 22px 0 0;
}
.t-5-box ul {
  width: calc(50% - 20px);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
.t-5-box li {
  width: 100%;
}

.t-5-txt-group {
  padding: 25px 20px;
}
.t-5-txt-group h4 {
  font-size: 16px;
  color: #464646;
  letter-spacing: 0.8px;
  font-weight: 400;
  margin: 0 0 8px;
}
.t-5-txt-group p {
  font-size: 16px;
  color: #787878;
  letter-spacing: 0.8px;
  margin: 0 0 20px;
  line-height: 1.8;
}

.template-6 {
  background: #C7D5E6;
  padding: 100px 0 120px;
}
.template-6 span {
  font-size: 28px;
  color: #000;
  letter-spacing: 2.4px;
  text-align: center;
  font-weight: 400;
  padding: 0;
  margin: 0 0 30px;
  display: block;
}
.template-6 h2 {
  font-size: 35px;
  color: #000;
  letter-spacing: 2.5px;
  text-align: center;
  padding: 0;
  margin: 0 0 60px;
}

.t-6-arrow-box {
  width: 1380px;
  min-height: 200px;
  padding: 0;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transform: translateX(60px);
}
.t-6-arrow-box .swiper-slide:last-child .ar-group {
  background: none;
}

.t-6-ar-group {
  width: 100%;
  background: url(/img/t_3_arrow_oshadhi.svg) no-repeat right 53px center;
  padding: 0 120px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.t-6-ar-group h3 {
  font-size: 22px;
  color: #464646;
  letter-spacing: 2.2px;
  font-weight: 400;
  border-bottom: 1px solid #979797;
  padding: 0 0 16px;
  margin: 0 0 16px;
}
.t-6-ar-group p {
  font-size: 18px;
  color: #464646;
  letter-spacing: 1.8px;
  line-height: 1.8;
}

.t-6-cricle-txt {
  font-size: 22px;
  color: #464646;
  letter-spacing: 2.2px;
  text-align: center;
  font-weight: 500;
  width: 100px;
  height: 100px;
  background: #fff;
  border: none;
  line-height: 100px;
  border: 1px solid #464646;
  border-radius: 100%;
}

.t-6-ar-tit-group {
  width: calc(100% - 140px);
}

.add-on {
  width: 100%;
  padding: 120px 0;
  background: #fff;
  overflow: hidden;
}

.add-on-box {
  width: 1540px;
  margin: 0 auto;
}
.add-on-box h2 {
  font-size: 30px;
  color: #000;
  letter-spacing: 2px;
  text-align: center;
  font-weight: 500;
  margin: 0 0 60px;
}
.add-on-box .btn-fav {
  display: none;
}

.product-cont-more {
  width: 100%;
  padding: 80px 0 120px;
  background: #fff;
}

.product-cont-more-box {
  width: 1440px;
  margin: 0 auto;
}
.product-cont-more-box h2 {
  font-size: 30px;
  color: #000;
  letter-spacing: 2px;
  text-align: center;
  font-weight: 500;
  margin: 0 0 60px;
}
.product-cont-more-box h3 {
  font-size: 20px;
  color: #000;
  letter-spacing: 1.5px;
  line-height: 1.4;
}
.product-cont-more-box li {
  width: 100%;
  padding: 0 0 34px;
  border-bottom: 1px solid #C8C8C8;
  margin: 0 0 34px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.product-cont-more-box li:last-child {
  border-bottom: none;
}
.product-cont-more-box .btn-more {
  color: #000;
}

.p-news-date {
  font-size: 14px;
  color: #787878;
  letter-spacing: 2.8px;
  width: 100%;
  margin: 0 0 20px;
}
.p-news-date span {
  font-family: "Roboto", sans-serif;
}

.product-similar {
  padding: 120px 0 120px;
  margin: 0 auto;
  background: #F4F2EF;
  position: relative;
}
.product-similar h2 {
  font-size: 30px;
  color: #000;
  letter-spacing: 2px;
  text-align: center;
  font-weight: 500;
  margin: 0 0 60px;
}

.product-similar-box {
  padding: 0 0 0 160px;
  overflow: hidden;
}
.product-similar-box .product-slide .swiper-slide:nth-of-type(odd) .prod-img {
  transform: translateY(0);
}
.product-similar-box .product-slide .swiper-slide:nth-of-type(even) .prod-img {
  transform: translateY(0);
}
.product-similar-box:hover .mouse-evt {
  display: block;
  opacity: 1;
}

.fixed-infor {
  width: 60px;
  height: 62px;
  position: fixed;
  bottom: 5%;
  right: 40px;
  z-index: 4;
}
.fixed-infor.act {
  height: 420px;
  padding: 0 0 50px;
}
.fixed-infor.act a.f-calculator {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  top: -288px;
}
.fixed-infor.act a.f-qa {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  top: -216px;
}
.fixed-infor.act a.f-discuss {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  top: -144px;
}
.fixed-infor.act a.f-line {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  top: -72px;
}
.fixed-infor.act .go-top {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transform: scale(1);
}
.fixed-infor a {
  width: 57px;
  height: 57px;
  display: block;
  border-radius: 100%;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.1);
  transition: 0.3s ease-out;
  position: absolute;
  left: 0;
  z-index: 1;
}
.fixed-infor a:hover p {
  opacity: 1;
  visibility: visible;
  transform: translate(-105px, 20px);
}
.fixed-infor a p {
  font-size: 12px;
  color: #787878;
  letter-spacing: 1px;
  text-align: center;
  width: 90px;
  padding: 5px 0;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translate(-70px, 20px);
  transition: 0.3s ease-out;
}
.fixed-infor a.f-calculator {
  background: #fff url(/img/icon_calculator.svg) no-repeat center center;
  top: 0;
}
.fixed-infor a.f-qa {
  background: #fff url(/img/icon_qa_link.svg) no-repeat center center;
  top: 0;
}
.fixed-infor a.f-discuss {
  background: #fff url(/img/icon_discuss.svg) no-repeat center center;
  top: 0;
}
.fixed-infor a.f-line {
  background: #fff url(/img/icon_line_add.svg) no-repeat center center;
  top: 0;
}

.f-information-box {
  width: 60px;
  height: 62px;
  position: absolute;
  bottom: 60px;
  z-index: 1;
}

.f-information {
  width: 60px;
  height: 62px;
  display: block;
  border-radius: 100%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background: url(/img/icon_information.svg) no-repeat center center;
  border-radius: 0;
  box-shadow: none;
  border: none;
  cursor: pointer;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
}

.go-top {
  width: 42px;
  height: 42px;
  border-radius: 100%;
  background: #fff url(/img/icon_top.svg) no-repeat center center/18px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: absolute;
  bottom: 12px;
  right: 0;
  cursor: pointer;
  display: block;
  transition: 0.3s ease-out;
  transform: scale(0.95);
}

.oshadhi-sty .fn-box-2 {
  background: #ACC0E1;
}
.oshadhi-sty .fn-2-left h3 {
  background: url(/img/oshadhi_part_img_1.jpg) no-repeat center center/cover;
}
.oshadhi-sty .fn-2-rihgt h3 {
  color: #fff;
  background: #44649A;
  border: none;
  margin: 0;
}
.oshadhi-sty .scroll-box .fn-list {
  max-height: 430px;
  overflow: auto;
}
.oshadhi-sty .fn-box-3 {
  background: #EFF1F4;
  padding: 120px 0;
}
.oshadhi-sty .t-4-txt {
  background: rgba(68, 100, 154, 0.9);
}

.canjune-sty .fn-box-2 {
  background: #8AB89E;
}
.canjune-sty .fn-2-left h3 {
  background: url(/img/canjune_part_img_1.jpg) no-repeat center center/cover;
}
.canjune-sty .fn-2-rihgt h3 {
  color: #fff;
  margin: 0;
  border-bottom: none;
  background: #507C65;
}
.canjune-sty .fn-box-3 {
  background: #E3ECE4;
  padding: 120px 0;
}
.canjune-sty .fn-box-tit {
  margin: 0 0 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.canjune-sty .t3-tit {
  font-size: 16px;
  color: #787878;
  letter-spacing: 1.6px;
  font-weight: 400;
  cursor: pointer;
}
.canjune-sty .t3-tit.act {
  color: #464646;
}
.canjune-sty .t3-px {
  width: 60px;
  height: 1.5px;
  background: #C8C8C8;
  margin: 0 40px;
}
.canjune-sty .slider-e-cont span {
  font-size: 16px;
  color: #fff;
  letter-spacing: 1.6px;
  width: 100%;
  margin: 0 0 40px;
}
.canjune-sty .t-4-txt {
  background: rgba(94, 116, 97, 0.9);
}

.other-sty .fn-box-3 {
  background: #fff;
  padding: 120px 0;
}
.other-sty .slider-e-cont {
  background: #F4F2EF;
}
.other-sty .slider-e-cont h2 {
  color: #464646;
}
.other-sty .slider-e-cont p {
  color: #464646;
}
.other-sty .t-4-txt {
  background: rgba(255, 255, 255, 0.9);
}
.other-sty .t-4-txt span {
  color: #464646;
}
.other-sty .t-4-txt h2 {
  color: #464646;
}
.other-sty .t-4-txt p {
  color: #464646;
}

.product-oshadhi {
  background: #F4F2EF;
  overflow: hidden;
}
.product-oshadhi .s-logo {
  filter: brightness(0) invert(1);
}
.product-oshadhi .breadcrumbs-box {
  border-top: none;
  margin: 0;
}
.product-oshadhi .breadcrumbs-box span {
  color: #81ABE8;
}
.product-oshadhi .breadcrumbs-box a {
  color: #81ABE8;
}
.product-oshadhi .breadcrumbs-box span.act {
  color: #fff;
}
.product-oshadhi .brand-top {
  background: #44649A;
}
.product-oshadhi .nav-box {
  background: #44649A;
}
.product-oshadhi .nav-box .nav-item {
  color: #fff;
}
.product-oshadhi .nav-box .nav-item::after {
  background: #fff;
}
.product-oshadhi .nav-box .fn-box a {
  color: #fff;
}
.product-oshadhi .nav-box .m-nav-btn span {
  background: #fff;
}
.product-oshadhi .nav-box .m-nav-btn span::after {
  background: #fff;
}
.product-oshadhi .nav-box .m-nav-btn span::before {
  background: #fff;
}
.product-oshadhi .nav-box img {
  filter: brightness(0) invert(1);
}
.product-oshadhi .nav-box .cart-num {
  color: #44649A;
  background: #fff;
}
.product-oshadhi .page-nav.fix-top {
  background: #44649A;
}
.product-oshadhi .bag-box img {
  filter: none;
}
.product-oshadhi .brand-products-top {
  background: #44649A;
}
.product-oshadhi .anius-event-group {
  background: #9EB0CF;
}
.product-oshadhi .e-cont {
  background: #44649A;
}
.product-oshadhi .anius-event-box .product-ban-pagin .swiper-pagination-bullet-active {
  background: #44649A;
}
.product-oshadhi .spin-group .pop-main-box {
  background: #638BD4;
}
.product-oshadhi .spin-group .pop-prod-cont h2 {
  background: #89ABE3;
}
.product-oshadhi .spin-group .pop-desc {
  border-bottom: 1px solid #89ABE3;
}
.product-oshadhi .spin-group .pop-close:hover {
  background-color: #628bd3;
}
.product-oshadhi .skin-group {
  background: #3D5273;
}
.product-oshadhi .brand-series-top {
  background: #44649A;
}
.product-oshadhi .anius-series-box {
  margin: -10px auto 0;
}
.product-oshadhi .anius-series-type {
  border-bottom: 1px solid #5D80BB;
}
.product-oshadhi .anius-series-type a {
  color: #89ABE3;
}
.product-oshadhi .anius-series-type a:hover {
  color: #fff;
}
.product-oshadhi .anius-series-type a.act {
  color: #fff;
}
.product-oshadhi .anius-series-type::after {
  background-image: linear-gradient(to right, rgba(68, 100, 154, 0), #44649a);
}
.product-oshadhi .anius-series-group {
  background: #DBE9FF;
}
.product-oshadhi .btn-download-pdf:hover {
  background: #b3c5e9 url(/img/icon_file_download.svg) no-repeat center center;
}
.product-oshadhi .btn-check-pdf:hover {
  background: #b3c5e9 url(/img/icon_search_plus.svg) no-repeat center center;
}
.product-oshadhi .file-link:hover {
  background: #b3c5e9 url(/img/btn_arrow.svg) no-repeat right 15px center;
}

.part-of-plant-group {
  background: #3D5273;
}
.part-of-plant-group h2 {
  font-family: "Roboto", sans-serif;
  color: #fff;
  font-size: 60px;
  letter-spacing: 0.5px;
  font-weight: 500;
  margin: 0 0 20px;
}
.part-of-plant-group h3 {
  color: #fff;
  font-size: 20px;
  letter-spacing: 3px;
  font-weight: 400;
  margin: 0 0 40px;
}

.part-of-plant-box {
  max-width: 1920px;
  margin: 0 auto;
  padding: 120px 160px;
  overflow: hidden;
  position: relative;
}
.part-of-plant-box::after {
  width: 60.417%;
  height: 58.8%;
  background: #7C9DD2;
  content: "";
  display: block;
  position: absolute;
  top: 120px;
  right: 0;
  z-index: 1;
}

.part-icon-group {
  width: 100%;
  background: #44649A;
  padding: 100px 150px 20px;
  position: relative;
  z-index: 2;
}

.part-icon-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
.part-icon-box li {
  width: 20%;
  text-align: center;
  margin: 0 0 80px;
  cursor: pointer;
  overflow: hidden;
}
.part-icon-box li:hover .part-icon {
  background-color: #7C9DD2;
}
.part-icon-box p {
  font-size: 18px;
  color: #fff;
  letter-spacing: 2px;
  font-weight: 400;
}

.part-icon {
  width: 160px;
  height: 160px;
  margin: 0 auto 20px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: auto;
  border-radius: 100%;
  border: 1px solid #fff;
  transition: 0.4s east-out;
}

.categories-group {
  background: #3D5273;
}
.categories-group h2 {
  font-family: "Roboto", sans-serif;
  color: #fff;
  font-size: 60px;
  letter-spacing: 0.5px;
  font-weight: 500;
  margin: 0 0 20px;
}
.categories-group h3 {
  color: #fff;
  font-size: 20px;
  letter-spacing: 3px;
  font-weight: 400;
  margin: 0 0 40px;
}

.categories-box {
  max-width: 1920px;
  margin: 0 auto;
  padding: 120px 160px 0;
  overflow: hidden;
  position: relative;
}

.categories-list {
  max-width: 1920px;
  background: #DBE9FF;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
}

.cate-txt-area {
  width: 44.791%;
  height: 683px;
  padding: 140px 320px 0 160px;
  background: #44649A;
  position: relative;
}
.cate-txt-area h4 {
  font-size: 40px;
  color: #fff;
  letter-spacing: 4.2px;
  font-weight: 400;
  margin: 0 0 60px;
}
.cate-txt-area p {
  font-size: 17px;
  color: #fff;
  letter-spacing: 1px;
  font-weight: 400;
  line-height: 1.8;
}

.cate-txt-slider {
  width: 100%;
  overflow: hidden;
}

.cate-pagin-group {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  position: absolute;
  bottom: 120px;
}
.cate-pagin-group .cate-next {
  width: 50px;
  height: 50px;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  opacity: 1;
}
.cate-pagin-group .cate-next::after {
  content: "";
}
.cate-pagin-group .cate-next:hover .cate-cricle {
  animation: cricleAni 6s infinite linear;
}
.cate-pagin-group .cate-prev {
  width: 50px;
  height: 50px;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  opacity: 1;
}
.cate-pagin-group .cate-prev::after {
  content: "";
}
.cate-pagin-group .cate-prev img {
  transform: rotate(-180deg);
}
.cate-pagin-group .cate-prev:hover .cate-cricle {
  animation: cricleAni 6s infinite linear;
}
.cate-pagin-group .cate-pagin {
  font-family: "Roboto", sans-serif;
  font-size: 20px;
  color: #fff;
  letter-spacing: 2.5px;
  width: auto;
  margin: 0 30px;
  position: static;
}

.cate-cricle {
  width: 50px;
  height: 50px;
  background: url(/img/c_cricle.svg) no-repeat center center/cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.cate-product-area {
  width: 55.209%;
  padding: 0;
}

.cate-product-slider-offset {
  width: calc(100% + 200px);
  padding: 0 0 0 200px;
  overflow: hidden;
  transform: translateX(-350px);
}

.cate-product-slider {
  width: 300px;
}
.cate-product-slider .swiper-slide {
  transform: scale(0.85);
  opacity: 0.5;
  transition: 0.4s ease-in;
}
.cate-product-slider .swiper-slide-active {
  transform: scale(1);
  opacity: 1;
}
.cate-product-slider .swiper-slide-prev {
  opacity: 0;
}

.perfume-sty-group {
  background: #1E2B3F;
}

.perfume-sty-box {
  margin: 0 auto;
  padding: 120px 160px;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.perfume-sty-box h2 {
  font-family: "Roboto", sans-serif;
  color: #fff;
  font-size: 60px;
  letter-spacing: 0.5px;
  font-weight: 500;
  width: 100%;
  margin: 0 0 20px;
}
.perfume-sty-box h3 {
  color: #fff;
  font-size: 20px;
  letter-spacing: 3px;
  font-weight: 400;
  width: 100%;
  margin: 0 0 45px;
}
.perfume-sty-box .perfume-img:nth-of-type(1) {
  width: calc(33.33% - 5px);
}
.perfume-sty-box .perfume-img:nth-of-type(2) {
  width: calc(33.33% - 5px);
}
.perfume-sty-box .perfume-img:nth-of-type(3) {
  width: 33.33%;
  margin: 0 0 5px;
}
.perfume-sty-box .perfume-img:last-of-type {
  margin: 0;
}

.perfume-img {
  width: calc(25% - 4px);
  height: 340px;
  margin: 0 5px 0 0;
  overflow: hidden;
  position: relative;
}
.perfume-img span {
  font-size: 18px;
  color: #fff;
  letter-spacing: 2.75px;
  font-weight: 400;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
}

.perfume-img-box {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  transition: 1.4s ease-out;
}
.perfume-img-box:hover {
  transform: scale(1.05);
}

.product-canjune {
  background: #F4F2EF;
  overflow: hidden;
}
.product-canjune .s-logo {
  filter: brightness(0) invert(1);
}
.product-canjune .breadcrumbs-box {
  border-top: none;
  margin: 0;
}
.product-canjune .breadcrumbs-box span {
  color: #ACC9B2;
}
.product-canjune .breadcrumbs-box a {
  color: #ACC9B2;
}
.product-canjune .breadcrumbs-box span.act {
  color: #fff;
}
.product-canjune .brand-top {
  background: #5E7461;
}
.product-canjune .nav-box {
  background: #5E7461;
}
.product-canjune .nav-box .nav-item {
  color: #fff;
}
.product-canjune .nav-box .nav-item::after {
  background: #fff;
}
.product-canjune .nav-box .fn-box a {
  color: #fff;
}
.product-canjune .nav-box .m-nav-btn span {
  background: #fff;
}
.product-canjune .nav-box .m-nav-btn span::after {
  background: #fff;
}
.product-canjune .nav-box .m-nav-btn span::before {
  background: #fff;
}
.product-canjune .nav-box img {
  filter: brightness(0) invert(1);
}
.product-canjune .nav-box .cart-num {
  color: #5E7461;
  background: #fff;
}
.product-canjune .page-nav.fix-top {
  background: #5E7461;
}
.product-canjune .bag-box img {
  filter: none;
}
.product-canjune .brand-products-top {
  background: #5E7461;
}
.product-canjune .brand-logo {
  margin: 130px auto 108px;
}
.product-canjune .brand-series-top {
  background: #5E7461;
}
.product-canjune .anius-series-box {
  margin: -10px auto 0;
}
.product-canjune .anius-series-type {
  border-bottom: 1px solid #78967C;
}
.product-canjune .anius-series-type a {
  color: #B1C8B4;
}
.product-canjune .anius-series-type a:hover {
  color: #fff;
}
.product-canjune .anius-series-type a.act {
  color: #fff;
}
.product-canjune .anius-series-type::after {
  background-image: linear-gradient(to right, rgba(210, 159, 19, 0), #5E7461);
}
.product-canjune .anius-series-sub-type {
  margin: 30px 0;
}
.product-canjune .anius-series-sub-type a {
  color: #B1C8B4;
  border-right: 1px solid #78967C;
}
.product-canjune .anius-series-sub-type a:hover {
  color: #fff;
}
.product-canjune .anius-series-sub-type a.act {
  color: #fff;
}
.product-canjune .anius-series-sub-type-group .swiper-slide-active a {
  color: #fff;
}
.product-canjune .anius-series-group {
  background: #CDD9CD;
}
.product-canjune .btn-download-pdf:hover {
  background: #b1cfb1 url(/img/icon_file_download.svg) no-repeat center center;
}
.product-canjune .btn-check-pdf:hover {
  background: #b1cfb1 url(/img/icon_search_plus.svg) no-repeat center center;
}
.product-canjune .file-link:hover {
  background: #b1cfb1 url(/img/btn_arrow.svg) no-repeat right 15px center;
}

.canjune-ind-infor {
  background: #5E7461;
}

.canjune-ind-box {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 120px 160px;
}
.canjune-ind-box .c-main-prod-list:last-child {
  margin: 0;
}

.c-main-prod-list {
  width: auto;
  min-height: 600px;
  display: flex;
  justify-content: space-between;
  margin: 0 0 60px;
}

.c-main-info {
  width: 50%;
  padding: 100px;
  background: #fff;
}
.c-main-info h2 {
  font-size: 42px;
  color: #000;
  letter-spacing: 3.2px;
  font-weight: 500;
  margin: 0 0 120px;
}
.c-main-info p {
  font-size: 17px;
  color: #464646;
  letter-spacing: 1.5px;
  line-height: 2;
  font-weight: 400;
  margin: 0 0 30px;
}
.c-main-info a.btn-more {
  color: #000;
  padding: 14px 0;
}

.c-main-img {
  width: 50%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.how-group {
  width: 100%;
  margin: 150px 0 0;
  padding: 160px 0 0;
  position: relative;
}
.how-group::before {
  content: "";
  display: block;
  width: 100%;
  height: 750px;
  background: #E9DCC4;
  position: absolute;
  top: 0;
  left: 0;
}

.how-box {
  width: 1670px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.how-box h2 {
  font-family: "Roboto", sans-serif;
  font-size: 60px;
  letter-spacing: 0.4px;
  font-weight: 500;
  color: #000;
  margin: 0 0 60px;
}
.how-box h2 p {
  font-family: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", "微軟正黑體", Arial, Helvetica, sans-serif;
  font-size: 24px;
  letter-spacing: 3px;
  line-height: 1;
  margin: 15px 0 0;
}

.how-item-group {
  min-height: 660px;
  background: #fff;
  margin: 0 0 60px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: nowrap;
  position: relative;
}

.how-cont {
  width: 45%;
  height: 100%;
  padding: 100px;
}
.how-cont h3 {
  font-size: 42px;
  letter-spacing: 3.2px;
  line-height: 1;
  margin: 0 0 58px;
}
.how-cont .how-item:nth-last-child(1) {
  margin: 0;
}

.how-item {
  margin: 0 0 50px;
}
.how-item span {
  font-size: 13px;
  letter-spacing: 1.5px;
  margin: 0 0 10px;
  display: block;
}
.how-item h4 {
  font-size: 18px;
  letter-spacing: 2px;
  line-height: 2.1;
  margin: 0 0 20px;
}
.how-item p {
  font-size: 17px;
  letter-spacing: 1.3px;
  line-height: 1.9;
  text-align: justify;
}

.how-img {
  width: 55%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

.trial-group {
  background: #E9DCC4;
  margin: 150px 0 120px;
  padding: 160px 0 120px;
}

.trial-box {
  width: 1600px;
  margin: 0 auto;
}
.trial-box h2 {
  color: #000;
  text-align: center;
  font-size: 60px;
  font-weight: 500;
  letter-spacing: 4.5px;
  line-height: 1;
  margin: 0 0 50px;
}
.trial-box > p {
  color: #464646;
  text-align: center;
  font-size: 24px;
  letter-spacing: 3px;
  font-weight: 500;
  line-height: 1;
  margin: 0 0 40px;
}

.trial-valid-line {
  color: #000;
  width: 100%;
  padding: 55px;
  background: #fff;
  justify-content: center;
  align-items: center;
}
.trial-valid-line p {
  color: #464646;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 1.7px;
  line-height: 1.8;
  margin: 0 60px 0 0;
}

.btn-valid-line {
  text-align: center;
  font-size: 15px;
  letter-spacing: 1.5px;
  font-weight: 400;
  width: 180px;
  padding: 14px 0;
  border: 1px solid #000;
  background: #fff;
  transition: 0.4s ease-out;
  cursor: pointer;
  transition: 0.4s;
}
.btn-valid-line:hover {
  color: #fff;
  background: #000;
}

.not-found {
  width: 100%;
  padding: 180px 0 0;
  background: #F4F2EF;
}
.not-found h2 {
  font-family: "Roboto", sans-serif;
  font-size: 60px;
  color: #000;
  letter-spacing: 0.5px;
  font-weight: 500;
  text-align: center;
  margin: 160px 0 40px;
}
.not-found p {
  font-size: 18px;
  color: #000;
  letter-spacing: 2.3px;
  font-weight: 400;
  text-align: center;
}

.empty-bag {
  width: 100%;
  min-height: 900px;
  padding: 150px 0 0;
  background: #F4F2EF;
}

.empty-cont {
  width: 1280px;
  margin: 0 auto;
}
.empty-cont h2 {
  font-family: "Roboto", sans-serif;
  font-size: 60px;
  color: #000;
  letter-spacing: 0.5px;
  font-weight: 500;
  margin: 160px 0 10px;
}
.empty-cont h2 p {
  margin: 10px 0 60px;
}
.empty-cont p {
  font-size: 18px;
  color: #000;
  letter-spacing: 2px;
  font-weight: 500;
  margin: 0 0 20px;
}

.go-shopping {
  font-size: 15px;
  color: #000;
  letter-spacing: 1.5px;
  padding: 20px 75px;
  margin: 10px 0;
  border: 1px solid #787878;
  display: inline-block;
  transition: 0.4s;
}
.go-shopping:hover {
  color: #fff;
  background: #000;
  border: 1px solid #000;
}

.connect-sty {
  background: #F4F2EF;
}

.connect-group {
  width: 100%;
  padding: 150px 0 0;
}

.connect-cont-box {
  width: 800px;
  padding: 120px 0 0;
  margin: 0 auto;
}
.connect-cont-box h2 {
  font-family: "Roboto", sans-serif;
  font-size: 60px;
  color: #000;
  letter-spacing: 0.5px;
  font-weight: 500;
  margin: 0 0 60px;
}
.connect-cont-box h2 p {
  font-size: 24px;
  color: #000;
  letter-spacing: 3px;
  margin: 15px 0 0;
}
.connect-cont-box .input-item-box {
  margin: 0 0 25px;
}
.connect-cont-box .input-item-box .input-item {
  background: none;
}
.connect-cont-box .input-item-box input {
  background: none;
}
.connect-cont-box .input-item-box .input-error {
  margin: 10px 0 0;
}
.connect-cont-box .input-item-box .error-icon {
  right: 25px;
  top: 23px;
}

.textarea-item {
  height: 270px;
  padding: 25px 0 0;
  background: none;
  border: 1px solid #787878;
  display: flex;
  justify-content: flex-start;
  align-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
}
.textarea-item textarea {
  font-size: 15px;
  letter-spacing: 1.5px;
  width: calc(100% - 100px);
  height: 100%;
  padding: 0 45px 0 0;
  background: none;
  resize: none;
}

.connect-submit-box {
  width: 100%;
  margin: 0 0 160px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.val-box {
  width: 50%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.val-box .input-item {
  background: none;
}
.val-box .input-error {
  width: 100%;
}
.val-box .input-item-box {
  margin: 0 25px 0 0;
}
.val-box .input-item-box input {
  font-size: 15px;
  color: #787878;
  letter-spacing: 1.5px;
  width: 240px;
  height: 100%;
  background: none;
  padding: 0 25px;
}

.btn-refresh {
  font-size: 15px;
  font-weight: 400;
  width: 100%;
  margin: 10px 0 0;
  cursor: pointer;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.btn-refresh img {
  width: 16px;
  margin: 0 10px 0 0;
}

.connect-submit {
  width: 200px;
  height: 65px;
}
.connect-submit input {
  font-size: 15px;
  color: #fff;
  letter-spacing: 1.5px;
  text-align: center;
  background: #787878;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transition: 0.4s;
}
.connect-submit input:hover {
  background: #636363;
}

.toast-top-left {
  top: 110px;
}

.tags {
  font-size: 14px;
  margin-top: 1rem;
}
.tags ul {
  margin-left: 0px;
  padding-left: 0px;
}
.tags li {
  display: inline-block;
  margin: 0px 0px 5px 5px;
}
.tags a {
  font-size: 14px;
  line-height: 14px;
  padding: 4px 6px;
  margin-bottom: 6px;
  display: block;
  border: 1px solid #787878;
  background: #f4f2ef;
  color: #000000;
}
.tags a:hover {
  background: #6EA387;
  color: #ffffff;
  border: 1px solid #6EA387;
}

.select-ui .transport-search-box {
  padding-top: 8px;
  padding-bottom: 8px;
  height: auto;
  border-bottom: 1px solid #999;
  margin-bottom: 6px;
}

.select-ui .transport-search-box:hover {
  background: none !important;
}

.transport-search {
  border: 1px solid #999;
  width: 100%;
  padding: 8px 6px;
  letter-spacing: 1px;
}

.login-sty .footer-sitemap {
  border: none;
}

.login-group {
  width: 100%;
  background: #B1C8B4;
  padding: 150px 0 140px;
  position: relative;
}

.login-box {
  width: 520px;
  margin: 140px auto 0;
}
.login-box h2 {
  font-family: "Roboto", sans-serif;
  font-size: 60px;
  letter-spacing: 0.5px;
  font-weight: 500;
  color: #000;
  margin: 0 0 10px;
}
.login-box h2 p {
  font-family: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", "微軟正黑體", Arial, Helvetica, sans-serif;
  font-size: 18px;
  letter-spacing: 2.3px;
  line-height: 1;
  font-weight: 500;
  margin: 15px 0 0;
}
.login-box form {
  display: block;
}

.note-txt {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1.4px;
  color: #464646;
  text-align: right;
  margin: 0 0 15px;
}
.note-txt a {
  color: #464646;
  border-bottom: 1px solid #464646;
  transition: 0.4s;
}
.note-txt a:hover {
  color: #000;
}

.input-box {
  height: 65px;
  background: #fff;
  margin: 0 0 30px;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  flex-wrap: nowrap;
}
.input-box label {
  font-size: 15px;
  color: #000;
  font-weight: 400;
  letter-spacing: 1.5px;
  width: 90px;
  margin: 0 0 0 25px;
}
.input-box input {
  font-size: 15px;
  letter-spacing: 1.5px;
  width: 100%;
  height: 100%;
  padding: 0 25px 0 0;
  background: #fff;
}
.input-box input::-moz-placeholder {
  color: #787878;
}
.input-box input::placeholder {
  color: #787878;
}
.input-box.last-input-box {
  margin: 0 0 15px;
}

.textarea-box {
  letter-spacing: 1.5px;
  width: 100%;
  height: 120px;
  padding: 25px 0 0 0;
  background: #fff;
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
}
.textarea-box::-moz-placeholder {
  color: #787878;
}
.textarea-box::placeholder {
  color: #787878;
}
.textarea-box label {
  font-size: 15px;
  color: #000;
  font-weight: 400;
  letter-spacing: 1.5px;
  width: 90px;
  margin: 0 0 0 25px;
}
.textarea-box textarea {
  font-family: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", "微軟正黑體", Arial, Helvetica, sans-serif;
  font-size: 15px;
  letter-spacing: 1.5px;
  width: 100%;
  height: 100%;
  padding: 0 25px 25px 0;
}

.bnt-eye {
  width: 24px;
  height: 24px;
  background: url(/img/icon_eye_close.svg) no-repeat center center;
  position: absolute;
  right: 20px;
  top: 50%;
  z-index: 1;
  margin: -12px 0 0;
  cursor: pointer;
}
.bnt-eye.on {
  background: url(/img/icon_eye_open.svg) no-repeat center center;
}

.btn-submit {
  text-align: center;
  color: #fff;
  font-size: 15px;
  letter-spacing: 1.5px;
  font-weight: 400;
  background: #000;
  width: 100%;
  height: 65px;
  line-height: 65px;
  background: #000;
  margin: 45px 0;
  cursor: pointer;
  display: block;
  position: relative;
  transition: 0.4s;
}
.btn-submit:hover {
  background: #333;
}
.btn-submit input[type=submit] {
  font-size: 15px;
  letter-spacing: 1.5px;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: none;
  cursor: pointer;
}

.mar-b20 {
  margin: 0 0 20px;
}

.or {
  font-size: 14px;
  color: #464646;
  font-weight: 400;
  text-align: center;
  width: 100%;
  margin: 0 0 22px;
  position: relative;
  z-index: 1;
}
.or span {
  display: inline;
  background: #B1C8B4;
  padding: 3px 18px;
  position: relative;
  z-index: 1;
}
.or::after {
  content: "";
  width: 100%;
  height: 1px;
  background: #464646;
  display: block;
  position: absolute;
  top: 9px;
}

.other-login {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.other-login a {
  display: block;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 15px;
  color: #464646;
  text-align: center;
  margin: 0 32px;
}

.btn-login {
  width: 42px;
  height: 42px;
  border-radius: 100%;
  border: 1px solid #464646;
  margin: 0 auto 10px;
}

.google-login {
  background: url(/img/icon_google.svg) no-repeat center center;
}
.google-login:hover {
  background: url(/img/icon_google_on.svg) no-repeat center center;
  border: 1px solid #000;
}

.line-login {
  background: url(/img/icon_line.svg) no-repeat center center;
}
.line-login:hover {
  background: url(/img/icon_line_on.svg) no-repeat center center;
  border: 1px solid #000;
}

.step-group {
  width: 100%;
  padding: 100px 0;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.step-group .step-box:nth-last-child(1) {
  margin: 0;
}
.step-group .step-box:nth-last-child(1) span {
  margin: 0;
}

.step-box {
  margin: 0 40px 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.step-box span {
  font-size: 20px;
  letter-spacing: 2px;
  font-weight: 500;
  color: #787878;
  margin: 0 40px 0 0;
}
.step-box.on span {
  color: #000;
}
.step-box.on .step-num {
  color: #fff;
  background: #464646;
  border: 1px solid #464646;
}

.step-num {
  font-family: "Work Sans", sans-serif;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  color: #787878;
  width: 40px;
  height: 40px;
  line-height: 38px;
  border-radius: 100%;
  border: 1px solid #787878;
  margin: 0 20px 0 0;
}

.step-line {
  width: 80px;
  height: 2px;
  background: #C8C8C8;
}

.register-box {
  background: #fff;
  padding: 40px 50px 60px;
}

.input-info-box {
  height: 55px;
  border-bottom: 1px solid #C8C8C8;
  margin: 0 0 20px;
  position: relative;
}
.input-info-box > label {
  font-size: 15px;
  color: #000;
  font-weight: 400;
  letter-spacing: 1.5px;
  margin: 0 15px 0 0;
  position: absolute;
  left: 0;
  top: 16px;
}
.input-info-box > input {
  font-size: 15px;
  letter-spacing: 1.5px;
  color: #787878;
  font-weight: 400;
  width: 100%;
  height: 52px;
  padding: 0 0 0 80px;
}
.input-info-box > input::-moz-placeholder {
  color: #787878;
}
.input-info-box > input::placeholder {
  color: #787878;
}
.input-info-box .radio-group {
  text-align: right;
  margin: 0 0 0 15px;
  justify-content: flex-end;
  position: absolute;
  right: 0;
  top: 17px;
}
.input-info-box .radio-group .radio-ui span {
  letter-spacing: 1.5px;
}
.input-info-box .radio-ui {
  margin: 0 0 0 15px;
  word-break: keep-all;
}
.input-info-box .bnt-eye {
  right: 0;
}

.m-input-pwd .error-icon {
  top: 18px;
  right: 196px;
}

.radio-group {
  font-size: 14px;
  letter-spacing: 1.3px;
  font-weight: 400;
  color: #464646;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  margin: 50px 0 0;
}
.radio-group label {
  cursor: pointer;
}
.radio-group input[type=radio], .radio-group input[type=checkbox] {
  display: none;
}
.radio-group input[type=radio]:checked + .radio-item::after, .radio-group input[type=checkbox]:checked + .radio-item::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background: #464646;
  border-radius: 20px;
  position: absolute;
  top: 2px;
  left: 2px;
}
.radio-group .error-icon {
  top: 2px;
  left: -16px;
}

.checkbox-group {
  font-size: 14px;
  letter-spacing: 1.3px;
  font-weight: 400;
  color: #464646;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 25px;
}
.checkbox-group label {
  cursor: pointer;
}
.checkbox-group input[type=radio], .checkbox-group input[type=checkbox] {
  display: none;
}
.checkbox-group input[type=checkbox]:checked + .checkbox-item::after, .checkbox-group input[type=checkbox]:checked + .checkbox-item::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background: #000;
  position: absolute;
  top: 2px;
  left: 2px;
}
.checkbox-group .error-icon {
  top: 2px;
  left: -16px;
}

.radio-ui, .checkbox-ui {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.radio-item {
  width: 16px;
  height: 16px;
  border: 1px solid #000;
  border-radius: 50px;
  margin: 0 5px 0 0;
  position: relative;
}

.checkbox-item {
  width: 16px;
  height: 16px;
  border: 1px solid #000;
  margin: 0 10px 0 0;
  position: relative;
}

.has-error .error-icon {
  top: 23px;
  right: 25px;
}
.has-error .error-mesg {
  bottom: -23px;
}

.error-icon {
  width: 16px;
  height: 16px;
  background: url(/img/icon_error.svg) no-repeat center center;
  position: absolute;
  right: 0;
  top: 18px;
}

.warning-icon {
  width: 16px;
  height: 16px;
  background: url(/img/icon_warning.svg) no-repeat center center;
  position: absolute;
  right: 0;
  top: 18px;
}

.error-mesg {
  font-size: 13px;
  letter-spacing: 1px;
  font-weight: 400;
  color: #D86018;
  text-align: right;
  position: absolute;
  bottom: -24px;
  right: 0;
  z-index: 1;
}
.error-mesg a {
  color: #D86018;
  border-bottom: 1px solid #d86018;
}

.valid-check {
  font-size: 13px;
  font-weight: 400;
  color: #787878;
  margin: 0 0 0 15px;
  padding: 0 28px 0 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: absolute;
  right: 0;
  top: 17px;
}
.valid-check span {
  display: inline-block;
}

.icon-valid-check {
  width: 16px;
  height: 16px;
  margin: 0 5px 0;
  background: url(/img/icon_pwd_check.svg) no-repeat center center;
  display: inline-block;
  vertical-align: middle;
}
.icon-valid-check.on {
  background: url(/img/icon_pwd_check_on.svg) no-repeat center center;
}
.icon-valid-check.on + span {
  color: #D86018;
}

.selector-group {
  margin: 0 0 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
}
.selector-group .input-info-box {
  width: calc(100% - 140px);
  margin: 0;
}
.selector-group .input-info-box > input {
  padding: 0 0 0 50px;
}

.select-info-box {
  width: 30%;
  height: 55px;
  border-bottom: 1px solid #C8C8C8;
  position: relative;
}
.select-info-box select {
  font-size: 15px;
  letter-spacing: 1.5px;
  color: #000;
  width: 100%;
  height: 55px;
  padding: 0 25px 0 0;
  background: url(/img/icon_sel_down4.svg) no-repeat right center;
}

.area-code {
  width: 120px;
  margin: 0 20px 0 0;
}

.birthday-note {
  font-size: 13px;
  font-weight: 400;
  color: #787878;
  letter-spacing: 1px;
  width: 100%;
  position: absolute;
  bottom: -24px;
  right: 0;
  z-index: 1;
}

.btn-register {
  margin: 0 auto 15px;
}

.register-note {
  font-size: 14px;
  letter-spacing: 1.4px;
  text-align: center;
  font-weight: 400;
  color: #000;
}

.valid-box {
  color: #000;
  margin: 50px 0 20px;
}
.valid-box p {
  text-align: center;
  font-size: 13px;
  letter-spacing: 1px;
  font-weight: 400;
  margin: 0 0 50px;
}
.valid-box p.check-mail {
  font-size: 14px;
  text-align: left;
  letter-spacing: 1.5px;
  line-height: 2;
  margin: 0 0 60px;
}
.valid-box p.check-mail span {
  border-bottom: 1px solid #000;
}
.valid-box .error-icon {
  right: 25px;
  top: 24px;
}
.valid-box .warning-icon {
  right: 25px;
  top: 24px;
}
.valid-box .error-mesg {
  bottom: -32px;
}

.btn-resend {
  text-align: center;
  font-size: 15px;
  letter-spacing: 1.5px;
  font-weight: 400;
  width: 100%;
  height: 65px;
  line-height: 64px;
  margin: 0 0 15px;
  border: 1px solid #787878;
  cursor: pointer;
  position: relative;
  transition: 0.4s;
}
.btn-resend:hover {
  color: #fff;
  background: #000;
  border: 1px solid #000;
}
.btn-resend input[type=submit] {
  font-size: 15px;
  letter-spacing: 1.5px;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: none;
  cursor: pointer;
}

.no-valid {
  font-size: 13px;
  letter-spacing: 1px;
  color: #000;
  text-align: center;
}
.no-valid p {
  font-size: 15px;
  font-weight: 400;
  display: inline-block;
  border-bottom: 1px solid #000;
  cursor: pointer;
}

.no-valid-lg-box {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 4;
}

.no-valid-box {
  color: #000;
  width: 520px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  background: #fff;
  border-radius: 4px;
  padding: 45px 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
}
.no-valid-box h3 {
  font-size: 14px;
  text-align: center;
  font-weight: 500;
  letter-spacing: 1.4px;
  margin: 0 0 20px;
}
.no-valid-box p {
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 1px;
  font-weight: 400;
  margin: 0 0 10px;
}

.btn-close-valid {
  width: 20px;
  height: 20px;
  background: url(/img/btn-close.svg) no-repeat center center;
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 1;
  cursor: pointer;
}

.valid-resend {
  position: relative;
}
.valid-resend p:first-child {
  margin: 0;
  position: absolute;
  top: -35px;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
}
.valid-resend .btn-resend {
  margin: 50px 0 15px;
}

.imp-txt {
  font-size: 18px;
  letter-spacing: 1.5px;
  line-height: 2;
  font-weight: 400;
  margin: 0 0 15px;
}

.fw-pwd .input-box label {
  display: none;
}
.fw-pwd .input-box input {
  padding: 0 25px;
}
.fw-pwd .input-box .error-mesg {
  bottom: -24px;
}
.fw-pwd p {
  margin: 0;
}
.fw-pwd .btn-submit {
  margin: 80px 0 0;
}
.fw-pwd .btn-resend {
  margin: 80px 0 20px;
}

.reset-pwd .input-box {
  margin: 0 0 30px;
}
.reset-pwd .valid-check {
  padding: 0;
  top: 22px;
  right: 50px;
}
.reset-pwd .error-icon {
  top: 23px;
  right: 216px;
}
.reset-pwd .error-mesg {
  bottom: -22px;
}
.reset-pwd .btn-submit {
  margin: 80px 0 0;
}

@media screen and (max-width: 1800px) {
  .step-group {
    margin: -10px 0 0;
    padding: 80px 0;
  }
}
@media screen and (max-width: 1600px) {
  .login-group {
    padding: 110px 0;
  }

  .step-group {
    padding: 70px 0;
  }

  .step-box span {
    font-size: 18px;
  }

  .step-num {
    font-size: 16px;
    line-height: 39px;
  }

  .input-box label {
    font-size: 14px;
  }
  .input-box input {
    font-size: 14px;
  }

  .textarea-box textarea {
    font-size: 14px;
  }

  .btn-submit {
    font-size: 14px;
  }
  .btn-submit input[type=submit] {
    font-size: 14px;
  }

  .btn-resend {
    font-size: 14px;
  }
  .btn-resend input[type=submit] {
    font-size: 14px;
  }
}
@media screen and (max-width: 1400px) {
  .login-group {
    padding: 100px 0;
  }

  .step-group {
    padding: 60px 0;
  }

  .login-box {
    margin: 100px auto 0;
  }

  .step-num {
    font-size: 15px;
  }

  .radio-item {
    width: 14px;
    height: 14px;
  }

  .radio-group input[type=radio]:checked + .radio-item::after, .radio-group input[type=checkbox]:checked + .radio-item::after {
    width: 8px;
    height: 8px;
  }

  .input-box label {
    font-size: 13px;
  }
  .input-box input {
    font-size: 13px;
  }

  .textarea-box textarea {
    font-size: 13px;
  }

  .btn-submit {
    font-size: 13px;
  }
  .btn-submit input[type=submit] {
    font-size: 13px;
  }

  .btn-resend {
    font-size: 13px;
  }
  .btn-resend input[type=submit] {
    font-size: 13px;
  }
}
@media screen and (max-width: 1200px) {
  .login-box {
    width: 440px;
  }
  .login-box h2 {
    font-size: 50px;
  }
  .login-box h2 p {
    font-size: 15px;
  }

  .step-group {
    padding: 45px 0;
  }

  .step-num {
    font-size: 14px;
    width: 32px;
    height: 32px;
    line-height: 31px;
  }

  .step-box {
    margin: 0 30px 0 0;
  }
  .step-box span {
    font-size: 16px;
    margin: 0 30px 0 0;
  }

  .step-line {
    width: 60px;
  }

  .radio-group .radio-ui span {
    width: auto;
  }

  .fw-pwd .input-box label {
    width: 132px;
  }

  .imp-txt {
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 1.5px;
    line-height: 1.5;
  }
}
@media screen and (max-width: 1023px) {
  .radio-item {
    width: 12px;
    height: 12px;
  }

  .radio-group input[type=radio]:checked + .radio-item::after, .radio-group input[type=checkbox]:checked + .radio-item::after {
    width: 6px;
    height: 6px;
  }

  .note-txt {
    font-size: 13px;
  }

  .input-info-box > input {
    font-size: 13px;
  }

  .input-info-box > label {
    font-size: 13px;
  }

  .select-info-box select {
    font-size: 13px;
  }

  .valid-check {
    font-size: 12px;
  }

  .register-note {
    font-size: 13px;
  }

  .no-valid p {
    font-size: 13px;
  }
}
@media screen and (max-width: 767px) {
  .login-group {
    margin: 80px 0 0;
    padding: 10px 0 80px;
  }

  .login-box {
    width: auto;
    padding: 0 25px;
    margin: 80px 0 0;
  }
  .login-box h2 {
    font-size: 45px;
  }
  .login-box h2 p {
    font-size: 14px;
  }

  .input-box {
    height: 60px;
  }
  .input-box label {
    font-size: 14px;
    width: 80px;
    margin: 0 0 0 18px;
  }
  .input-box input {
    font-size: 14px;
  }
  .input-box.last-input-box {
    margin: 0 0 12px;
  }
  .input-box.last-input-box .bnt-eye {
    margin: -13px 0 0;
    right: 13px;
  }

  .btn-submit {
    font-size: 14px;
    height: 60px;
    margin: 30px 0 40px;
  }
  .btn-submit input[type=submit] {
    font-size: 14px;
  }

  .register-box {
    padding: 30px 20px 50px;
  }

  .step-group {
    padding: 35px 0;
  }
  .step-group .step-box:nth-last-child(1) {
    margin: 0 10px;
  }

  .step-box {
    flex-wrap: wrap;
    margin: 0 10px;
    position: relative;
  }
  .step-box span {
    font-size: 13px;
    width: 100%;
    text-align: center;
    margin: 0;
  }

  .step-num {
    font-size: 13px;
    width: 25px;
    height: 25px;
    line-height: 21px;
    margin: 0 auto 7px;
  }

  .step-line {
    width: 34px;
    height: 1px;
    position: absolute;
    right: -26px;
    top: 12px;
  }

  .textarea-box textarea {
    font-size: 14px;
  }

  .input-info-box {
    height: auto;
  }
  .input-info-box > label {
    top: 12px;
  }
  .input-info-box > input {
    height: 42px;
    padding: 0 0 0 70px;
  }
  .input-info-box .warning-icon {
    width: 16px;
    height: 16px;
    background: url(/img/icon_warning.svg) no-repeat center center;
    top: 12px;
  }

  .m-input-accout {
    height: 43px;
    margin: 0 0 36px;
  }
  .m-input-accout .radio-group {
    margin: 0 0 0 10px;
    top: auto;
    bottom: -25px;
  }
  .m-input-accout .radio-group .error-icon {
    top: 1px;
  }
  .m-input-accout .radio-ui {
    justify-content: flex-start;
    margin: 0 0 0 10px;
  }
  .m-input-accout .error-mesg {
    right: auto;
    left: 0;
  }

  .m-input-pwd {
    margin: 0 0 36px;
  }
  .m-input-pwd .error-icon {
    right: 35px;
    top: 10px;
  }
  .m-input-pwd .valid-check {
    top: 49px;
    padding: 0;
  }
  .m-input-pwd .valid-check span {
    padding: 0 0 0 5px;
  }
  .m-input-pwd .error-mesg {
    right: auto;
    left: 0;
  }

  .select-info-box {
    height: 45px;
  }
  .select-info-box select {
    font-size: 13px;
    height: 45px;
    background: url(/img/icon_sel_down4.svg) no-repeat right center/12px;
  }

  .area-code {
    width: 90px;
    margin: 0;
  }

  .selector-group .input-info-box {
    width: calc(100% - 104px);
  }

  .valid-check {
    top: 9px;
    padding: 0 25px 0 0;
  }
  .valid-check .error-icon {
    left: -18px;
  }

  .icon-valid-check {
    margin: 0 0 0 8px;
  }

  .bnt-eye {
    right: 0;
    margin: -15px 0 0;
  }

  .note-txt {
    font-size: 13px;
    margin: 0 0 12px;
  }

  .error-mesg {
    font-size: 12px;
  }

  .radio-group {
    font-size: 13px;
  }

  .btn-register {
    margin: 0 0 12px;
  }

  .valid-box {
    margin: 50px 0 30px;
  }
  .valid-box p.check-mail {
    font-size: 12px;
    letter-spacing: 1px;
    margin: 0 0 50px;
  }
  .valid-box .error-icon {
    top: 21px;
  }
  .valid-box p {
    font-size: 12px;
  }

  .valid-resend p {
    margin: 0 0 20px;
  }
  .valid-resend .btn-submit {
    margin: 20px 0 0;
  }

  .no-valid-box {
    border-radius: 4px;
    padding: 40px 25px;
    width: auto;
    top: 3%;
    left: 25px;
    right: 25px;
    transform: translate(0, 0);
  }

  .btn-resend {
    font-size: 14px;
    height: 60px;
    line-height: 60px;
  }
  .btn-resend input[type=submit] {
    font-size: 14px;
  }

  .imp-txt {
    font-size: 14px;
    letter-spacing: 1px;
  }

  .fw-pwd .input-box input {
    padding: 0 25px;
  }
  .fw-pwd .input-box label[for=account] {
    display: none;
  }

  .reset-pwd .btn-submit {
    margin: 50px 0 0;
  }
  .reset-pwd .valid-check {
    top: 65px;
    right: 0;
  }
  .reset-pwd .bnt-eye {
    margin: 0;
    top: 18px;
    right: 20px;
  }
  .reset-pwd .error-icon {
    top: 22px;
    right: 60px;
  }
  .reset-pwd .error-mesg {
    left: 0;
    right: auto;
  }
  .reset-pwd .input-box:nth-child(1) .error-mesg {
    left: 0;
    right: auto;
  }

  .register-note {
    font-size: 12px;
  }
}
.cart-sty .footer-sitemap-group {
  background: #f5f5f5;
}

.cart-group {
  width: 100%;
  background: #F5F5F5;
  margin: 150px 0 0;
  position: relative;
}
.cart-group .footer-sitemap-group {
  background: #F5F5F5;
  margin: 140px 0 0;
}
.cart-group.bg-to::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent 60%, #b1c8b3 30%);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

.cart-box {
  width: 1320px;
  margin: 120px auto 0;
  padding: 0 0 120px;
}
.cart-box .error-mesg-box {
  background: #D86018;
}
.cart-box h2 {
  font-family: "Roboto", sans-serif;
  font-size: 60px;
  letter-spacing: 0.5px;
  font-weight: 500;
  color: #000;
  margin: 0 0 20px;
}
.cart-box h2 p {
  font-family: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", "微軟正黑體", Arial, Helvetica, sans-serif;
  font-size: 18px;
  letter-spacing: 2.3px;
  line-height: 1;
  font-weight: 500;
  margin: 15px 0 0;
}

.cart-list {
  width: 100%;
  margin: 0 0 100px;
}
.cart-list li.title {
  font-size: 16px;
  letter-spacing: 2px;
  font-weight: 400;
  background: none;
  border-bottom: 1px solid #464646;
  padding: 10px 0;
}
.cart-list li.title .item-pic {
  height: auto;
}
.cart-list li.title .item-price {
  letter-spacing: 2px;
}
.cart-list li {
  width: 100%;
  margin: 0 0 25px;
  background: #fff;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  position: relative;
}

.no-buy .ui-check-box label {
  cursor: default;
}
.no-buy .ui-check-box input[type=checkbox]:disabled + .check-box::after {
  content: "";
  display: block;
  width: 20px;
  height: 1px;
  background: #000;
  position: absolute;
  top: 7px;
  left: -3px;
  transform: rotate(-45deg);
}
.no-buy .ui-check-box input[type=checkbox]:disabled + .check-box::before {
  content: "";
  display: block;
  width: 20px;
  height: 1px;
  background: #000;
  position: absolute;
  top: 6px;
  left: -3px;
  transform: rotate(45deg);
}

.sale-mesg-box {
  text-align: center;
  font-size: 14px;
  letter-spacing: 2px;
  color: #fff;
  font-weight: 400;
  width: 79%;
  padding: 8px 0;
  background: #d86018;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 2;
}
.sale-mesg-box a {
  color: #fff;
  font-weight: 600;
}
.sale-mesg-box a:hover {
  text-decoration: underline;
}

.error-mesg-box {
  background: #464646;
}

.item-check {
  width: 8%;
}

.item-pic {
  width: 13%;
  height: 200px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 3;
}
.item-pic img {
  width: 100%;
  display: block;
  margin: 0 auto;
}

.item-name {
  width: 20%;
  margin: 0 0 0 5%;
}
.item-name span {
  font-size: 14px;
  letter-spacing: 1.4px;
  color: #787878;
  font-weight: 400;
  display: block;
  margin: 0 0 8px;
}
.item-name h3 {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 1.8px;
  color: #000;
}
.item-name .date {
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  color: #787878;
  letter-spacing: 0.88px;
  margin: 8px 0 0;
}

.item-capacity {
  width: 120px;
  margin: 0 2.4% 0 0;
}

.item-quantity {
  width: 120px;
}

.item-price {
  width: 12%;
  margin: 0 0 0 10%;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  letter-spacing: 0.7px;
  color: #000;
  font-weight: 400;
}

.price {
  display: inline-block;
  position: relative;
}

.old-price::after {
  content: "";
  display: block;
  position: absolute;
  width: 130%;
  height: 1px;
  top: 9px;
  left: -15%;
  background: #507C65;
}

.sale-price {
  color: #507C65;
  letter-spacing: 0.7px;
}

.item-del {
  width: 10%;
  text-align: right;
  padding: 0 10px 0 0;
}

.sale-mesg {
  display: flex;
  align-items: center;
  margin: 0 0 8px;
}
.sale-mesg .warning-icon {
  position: static;
  margin: 0 8px 0 0;
}
.sale-mesg span {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 2px;
  color: #D86018;
  margin: 0;
}

.ui-check-box {
  width: 16px;
  height: 16px;
  margin: 0 auto;
  position: relative;
}
.ui-check-box label {
  display: block;
  cursor: pointer;
  position: relative;
}
.ui-check-box input {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.ui-check-box input[type=checkbox]:checked + .check-box::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background: #000;
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: 1;
}

.check-box {
  width: 16px;
  height: 16px;
  border: 1px solid #000;
  position: relative;
}

.ui-quantity {
  font-family: "Roboto", sans-serif;
  font-size: 18px;
  font-weight: 400;
  width: 120px;
  height: 36px;
  border: 1px solid #787878;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.btn-quantity {
  font-size: 0;
  color: #464646;
  font-weight: 300;
  text-align: center;
  width: 34px;
  height: 34px;
  line-height: 34px;
  cursor: pointer;
  transition: 0.4s;
}

.quantity-val {
  font-size: 14px;
  color: #464646;
  letter-spacing: 0.2px;
  text-align: center;
  width: 48px;
  height: 36px;
  line-height: 35px;
}

.btnMinus {
  background: url(/img/icon_minus.svg) no-repeat center center/12px;
  transition: 0.4s;
}
.btnMinus:hover {
  filter: opacity(0.5);
}

.btnPlus {
  background: url(/img/icon_plus.svg) no-repeat center center/12px;
  transition: 0.4s;
}
.btnPlus:hover {
  filter: opacity(0.5);
}

.class-hours {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.7px;
  color: #464646;
  width: 100%;
  height: 36px;
  line-height: 36px;
  border: 1px solid #787878;
  padding: 0 25px 0 10px;
}

.sel-show-arrow {
  -webkit-appearance: auto;
     -moz-appearance: auto;
          appearance: auto;
}

.wd80pa {
  width: 80%;
}

.select-sty-cart {
  width: 120px;
  border: 1px solid #787878;
  position: relative;
}
.select-sty-cart select {
  font-size: 14px;
  letter-spacing: 0.7px;
  color: #464646;
  width: 100%;
  height: 34px;
  padding: 0 25px 0 10px;
}
.select-sty-cart select:disabled {
  background: none;
}

.select-ui {
  font-size: 15px;
  letter-spacing: 1.5px;
  font-weight: 400;
  color: #000;
  width: 340px;
  background: url(/img/select_down.svg) no-repeat right 20px center;
  border: 1px solid #787878;
  position: relative;
  display: block;
}
.select-ui.is-hovered ul {
  display: block;
}
.select-ui ul {
  display: none;
  width: calc(100% + 2px);
  max-height: 280px;
  border: 1px solid #787878;
  background-color: #fff;
  border-top: 0;
  position: absolute;
  top: 64px;
  left: -1px;
  z-index: 1;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
.select-ui ul.ul-hide {
  display: none;
}
.select-ui li {
  height: 40px;
  line-height: 40px;
  background: #fff;
  padding: 0 25px;
  cursor: pointer;
  transition: 0.4s;
}
.select-ui li:hover {
  background: #ECE2CE;
}
.select-ui li.act {
  background: #ECE2CE;
}

.select-act {
  font-family: "Roboto", sans-serif;
  width: 100%;
  height: 63px;
  line-height: 63px;
  padding: 0 25px;
}

.address-list {
  width: 425px;
}
.address-list li {
  height: auto;
  line-height: 1;
  padding: 17px 25px;
}
.address-list p {
  font-size: 13px;
  color: #000000;
  letter-spacing: 1.63px;
  margin: 0 0 8px;
}
.address-list p.r-name {
  font-size: 15px;
  letter-spacing: 1.88px;
}
.address-list p.r-address {
  font-size: 13px;
  color: #787878;
  line-height: 1.4;
  margin: 0;
}

.btn-del {
  width: 24px;
  height: 24px;
  background: url(/img/btn_del.svg) no-repeat center center;
  margin: 0 auto;
  cursor: pointer;
}
.btn-del:hover {
  background: url(/img/btn_del_on.svg) no-repeat center center;
}

.transport-info-box {
  border-top: 1px solid #464646;
  padding: 25px 0 0;
  display: flex;
  justify-content: space-between;
}

.transport-zone {
  width: 70.834%;
  background: #fff;
  padding: 40px;
}
.transport-zone h3 {
  font-size: 16px;
  letter-spacing: 2px;
  line-height: 2;
  color: #000;
  margin: 0 0 15px;
}

.sel-zone {
  margin: 0 0 25px;
}

.transport-sale {
  font-size: 14px;
  letter-spacing: 2px;
  font-weight: 400;
  color: #D86018;
  margin: 0 0 25px;
}

.sel-transport {
  margin: 0 0 15px;
}

.note-desc {
  font-size: 13px;
  color: #000;
  letter-spacing: 0.75px;
  line-height: 1.23;
  padding: 0 0 0 18px;
}
.note-desc li {
  line-height: 1.66;
  list-style-type: disc;
  margin: 0 0 8px;
}
.note-desc a {
  color: #000;
  border-bottom: 1px solid #000;
}

.subtotal-box {
  width: 27.273%;
  background: #fff;
  padding: 40px;
  display: flex;
  align-content: space-between;
  flex-wrap: wrap;
}

.m-check-all {
  display: none;
}

.subtotal {
  color: #000;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 40px;
}
.subtotal p {
  font-size: 16px;
  letter-spacing: 2px;
  font-weight: 400;
}

.price-total {
  font-family: "Roboto", sans-serif;
  font-size: 20px;
  color: #000;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.checkout {
  font-size: 15px;
  color: #fff;
  font-weight: 400;
  letter-spacing: 1.5px;
  width: 100%;
  background: #000;
  text-align: center;
  padding: 22px 0;
  margin: 40px 0 0;
  cursor: pointer;
  transition: 0.4s ease-out;
}
.checkout:hover {
  background: #333;
}

.back-shopping {
  color: #000;
  font-size: 15px;
  letter-spacing: 1.5px;
  border: 1px solid #787878;
  padding: 11px 25px 11px 15px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: 0.4s ease-out;
}
.back-shopping span {
  font-weight: 400;
}
.back-shopping:hover {
  color: #fff;
  background: #000;
}
.back-shopping:hover .icon-left {
  background: url(/img/icon_left_on.svg) no-repeat center center;
}

.icon-left {
  width: 40px;
  height: 40px;
  background: url(/img/icon_left.svg) no-repeat center center;
}

.icon-qa {
  width: 16px;
  height: 16px;
  margin: 0 5px 0;
  background: url(/img/icon_qa.svg) no-repeat center center;
  display: inline-block;
  vertical-align: middle;
  position: relative;
}
.icon-qa:hover .qa-mesg {
  display: flex;
}

.qa-mesg {
  font-size: 14px;
  letter-spacing: 1.4px;
  font-weight: 400;
  color: #000;
  width: 300px;
  min-height: 100px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  position: absolute;
  bottom: 10px;
  left: 30px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  display: none;
}

.cart-input-box {
  width: 1920px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.cart-input-box h2 {
  font-family: "Roboto", sans-serif;
  font-size: 60px;
  letter-spacing: 0.5px;
  font-weight: 500;
  color: #000;
  width: 100%;
  margin: 0 0 10px;
}
.cart-input-box h2 p {
  font-family: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", "微軟正黑體", Arial, Helvetica, sans-serif;
  font-size: 18px;
  letter-spacing: 2.3px;
  line-height: 1;
  font-weight: 500;
  margin: 15px 0 40px;
}

.cart-info-input {
  width: 58.5%;
  padding: 120px 160px;
}
.cart-info-input .radio-group {
  margin: 0;
}
.cart-info-input .radio-ui {
  margin: 0 0 0 10px;
}

.cart-order {
  width: 41.5%;
  min-height: 400px;
  background: #B1C8B4;
  padding: 120px 120px 220px 120px;
  position: relative;
}
.cart-order .back-shopping {
  width: 205px;
  position: absolute;
  bottom: 120px;
  left: 120px;
}

.input-tit {
  border-bottom: 1px solid #000;
  padding: 0 0 20px;
  margin: 0 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.input-tit h3 {
  font-size: 16px;
  color: #000;
  font-weight: 400;
  letter-spacing: 2px;
}

.same-order {
  font-size: 14px;
  font-weight: 400;
  color: #464646;
  letter-spacing: 1.4px;
  cursor: pointer;
}

.input-cont {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 0 80px;
}
.input-cont form {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 100%;
}
.input-cont > p {
  font-size: 15px;
  letter-spacing: 1.38px;
  font-weight: 400;
  color: #464646;
  width: 100%;
  margin: 0 0 15px;
}
.input-cont .input-item {
  background: none;
}
.input-cont .input-item input {
  background: none;
}
.input-cont .input-item .select-ui {
  background: url(/img/select_down.svg) no-repeat right 20px center;
}
.input-cont .textarea-box {
  background: none;
}
.input-cont .w49 {
  width: 49%;
}
.input-cont .w53 {
  width: 53%;
}
.input-cont .w20 {
  width: 20%;
}
.input-cont .w74 {
  width: 74.5%;
}
.input-cont .w23 {
  width: 23.5%;
}
.input-cont .w78 {
  width: 78%;
}
.input-cont .w100 {
  width: 100%;
}

.input-item-box {
  position: relative;
  margin: 0 0 2%;
}
.input-item-box label {
  font-size: 15px;
  color: #000;
  font-weight: 400;
  letter-spacing: 1.5px;
  width: 70px;
  margin: 0 0 0 25px;
}
.input-item-box.no-label input {
  width: 100%;
  padding: 0 25px;
}
.input-item-box.no-label input[name=couponCode] {
  width: calc(100% - 70px);
}
.input-item-box input {
  font-size: 15px;
  letter-spacing: 1.5px;
  width: calc(100% - 100px);
  height: 100%;
  padding: 0 25px 0 0;
  background: #fff;
}
.input-item-box input::-moz-placeholder {
  color: #787878;
}
.input-item-box input::placeholder {
  color: #787878;
}
.input-item-box span {
  color: #464646;
}
.input-item-box .select-ui {
  width: 100%;
  height: 100%;
  border: none;
}
.input-item-box .select-ui ul {
  top: 64px;
}
.input-item-box .radio-group {
  font-size: 15px;
  flex-flow: wrap;
}
.input-item-box .radio-ui {
  width: 100%;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin: 0 0 25px;
}
.input-item-box .radio-last {
  margin: 50px 0 25px;
}
.input-item-box .radio-last span {
  width: calc(100% - 30px);
  line-height: 1.6;
}
.input-item-box .textarea-box {
  height: 120px;
  padding: 0;
  border: 1px solid #787878;
  justify-content: flex-start;
  align-items: flex-start;
}
.input-item-box .textarea-box label {
  margin: 25px 0 0 25px;
}
.input-item-box .textarea-box textarea {
  width: calc(100% - 100px);
  height: 100%;
  padding: 25px 25px 25px 0;
  resize: none;
  background: none;
}
.input-item-box .textarea-box textarea.pad {
  padding: 25px;
}

.input-item {
  width: 100%;
  height: 65px;
  background: #fff;
  border: 1px solid #787878;
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.input-error {
  text-align: right;
  color: #D86018;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 1.5px;
  width: 100%;
  margin: 3px 0 0;
}
.input-error.txt-l {
  text-align: left;
}

.btn-edit {
  color: #fff;
  text-align: center;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 1.5px;
  width: 23.5%;
  padding: 22px 30px;
  background: #787878;
  cursor: pointer;
  transition: 0.4s ease-out;
  position: relative;
}
.btn-edit input {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
  cursor: pointer;
}
.btn-edit:hover {
  background: #636363;
}

.btn-save-stroe {
  color: #fff;
  text-align: center;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 1.5px;
  width: 100%;
  padding: 22px 30px;
  background: #AF9682;
  cursor: pointer;
  transition: 0.4s ease-out;
  position: relative;
  display: block;
}
.btn-save-stroe:hover {
  background: #9f836d;
}

.btn-save-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin: 0 0 2%;
}
.btn-save-box .input-item-box {
  margin: 0;
}
.btn-save-box .btn-edit {
  padding: 22px 10px;
}

.order-product-box {
  background: #fff;
  padding: 0 25px;
  margin: 0 0 50px;
}
.order-product-box .order-item-group:nth-last-of-type(1) {
  border: none;
}

.order-item-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #C8C8C8;
}

.order-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 25px 0;
}

.product-info-box {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.product-img {
  width: 80px;
  margin: 0 30px 0 0;
  position: relative;
}
.product-img img {
  width: 100%;
}

.product-num {
  width: 35px;
  height: 35px;
  color: #fff;
  line-height: 35px;
  text-align: center;
  font-weight: 400;
  border-radius: 100%;
  background: #464646;
  position: absolute;
  top: -14px;
  right: -14px;
  z-index: 1;
}

.product-info {
  position: relative;
}
.product-info .warning-icon {
  font-size: 12px;
  letter-spacing: 1px;
}
.product-info > span {
  font-size: 13px;
  letter-spacing: 1.3px;
  font-weight: 400;
  color: #787878;
  display: block;
  margin: 0 0 6px;
}
.product-info h4 {
  font-size: 15px;
  letter-spacing: 1.5px;
  color: #000;
  font-weight: 400;
  margin: 0 0 6px;
}

.ml {
  font-size: 13px;
  letter-spacing: 1.3px;
  font-weight: 400;
  color: #787878;
}

.order-price {
  font-family: "Roboto", sans-serif;
  text-align: right;
  color: #000;
  font-size: 15px;
  letter-spacing: 0.5px;
  font-weight: 400;
  width: 30%;
}

.order-sale-mesg {
  font-size: 12px;
  letter-spacing: 1px;
  color: #D86018;
  font-weight: 400;
  display: flex;
  align-items: center;
  margin: 0 0 6px;
}
.order-sale-mesg .warning-icon {
  position: static;
  margin: 0 5px 0 0;
}

.discount-box {
  background: #fff;
  padding: 25px;
  margin: 0 0 50px;
}
.discount-box h4 {
  font-size: 15px;
  color: #000;
  letter-spacing: 1.5px;
  font-weight: 400;
  margin: 0 0 12px;
}
.discount-box input[type=number] {
  font-family: "Roboto", sans-serif;
  font-size: 15px;
  color: #000;
  letter-spacing: 1.5px;
  width: 80px;
  border: 1px solid #787878;
  padding: 9px 10px;
}
.discount-box .radio-group {
  width: 100%;
  margin: 0;
  flex-wrap: wrap;
}
.discount-box .radio-group .radio-ui {
  font-size: 16px;
  letter-spacing: 1.5px;
  color: #000;
  font-weight: 400;
  width: 100%;
  justify-content: flex-start;
  margin: 0 0 20px;
}
.discount-box a i {
  text-decoration: underline;
  color: #E75700;
}
.discount-box i {
  font-size: 15px;
  letter-spacing: 1.5px;
  color: #E75700;
  font-style: normal;
}

.can-coin-group {
  margin: 0 0 23px;
  border-bottom: 1px solid #c8c8c8;
}
.can-coin-group p {
  font-size: 15px;
  color: #000;
  letter-spacing: 1.5px;
  font-weight: 400;
  margin: 0 0 20px;
}

.bonus-group {
  margin: 0 0 23px;
  border-bottom: 1px solid #c8c8c8;
}
.bonus-group p {
  font-size: 15px;
  color: #000;
  letter-spacing: 1.5px;
  font-weight: 400;
  margin: 0 0 20px;
}

.freegift-group {
  margin: 0 0 23px;
}
.freegift-group p {
  font-size: 15px;
  color: #000;
  letter-spacing: 1.5px;
  font-weight: 400;
  margin: 0 0 20px;
  border-bottom: 1px solid #c8c8c8;
}
.freegift-group ul {
  list-style-type: disc;
  margin-left: 15px;
  margin-bottom: 20px;
}
.freegift-group li {
  font-size: 13px;
  font-weight: 400;
  line-height: 21px;
  color: #464646;
}

.freegift-alert-message {
  width: 100%;
  height: 36px;
  color: #fff;
  padding: 8px 0;
  text-align: center;
  background-color: #000;
}
.freegift-alert-message span {
  font-size: 14px;
  font-weight: 500;
}

.discount-sel-box {
  width: 100%;
}
.discount-sel-box .select-ui {
  width: 100%;
}
.discount-sel-box .select-ui ul {
  max-height: 380px;
  padding: 0;
  z-index: 2;
}
.discount-sel-box .select-ui li:first-child {
  border-top: 1px solid #C8C8C8;
  border: none;
  padding: 20px 25px;
}
.discount-sel-box .select-ui li:first-child:hover {
  background: none;
}
.discount-sel-box .select-ui li:nth-child(2) {
  border-top: 1px solid #C8C8C8;
}
.discount-sel-box .select-ui li:nth-last-child(1) {
  border: none;
  padding: 20px 25px 20px;
  margin: 0;
}
.discount-sel-box .select-ui li {
  height: auto;
  line-height: normal;
  padding: 20px 25px;
  border-bottom: 1px solid #C8C8C8;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
}
.discount-sel-box .select-ui li:hover {
  background: #eee;
}

.discount-input {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
}
.discount-input input[type=text] {
  font-size: 15px;
  color: #000;
  letter-spacing: 1.5px;
  width: 60%;
  height: 100%;
  border: 1px solid #bbb;
  padding: 0 0 0 25px;
}
.discount-input button {
  color: #fff;
  font-size: 15px;
  letter-spacing: 1.5px;
  width: 40%;
  height: 100%;
  background: #507C65;
  border: none;
  cursor: pointer;
}

.discount-num {
  color: #fff;
  font-size: 15px;
  letter-spacing: 1.5px;
  text-align: center;
  width: 100px;
  line-height: 40px;
  margin: 0 15px 0 0;
  background: #6FA287;
}

.discount-info {
  width: calc(100% - 115px);
  position: relative;
}

.m-discount-date {
  display: none;
}

.expiry-date {
  font-size: 13px;
  letter-spacing: 1.3px;
  color: #D86018;
}

.discount-tit {
  font-size: 15px;
  letter-spacing: 1.5px;
  color: #000;
  font-weight: 400;
}

.discount-date label {
  font-size: 13px;
  letter-spacing: 1.3px;
  color: #787878;
}
.discount-date span {
  font-size: 13px;
  letter-spacing: 1.3px;
  color: #787878;
}
.discount-date .m-discount-date {
  display: none;
}

.icon-discount-qa {
  width: 24px;
  height: 24px;
  background: url(/img/icon_discount_qa.svg) no-repeat center center;
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 8px;
  z-index: 1;
}

.invoice-group {
  width: 100%;
}
.invoice-group input[type=radio]:checked + .radio-item + span + .invoice-box {
  display: flex;
}

.invoice-box {
  width: 100%;
  padding: 10px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  display: none;
}
.invoice-box .input-item input {
  width: 100%;
  padding: 0 25px;
}

.shipped-box {
  padding: 0;
  margin: 0 0 50px;
}
.shipped-box p {
  color: #000;
  font-size: 14px;
  letter-spacing: 1.4px;
  margin: 0 0 15px;
}
.shipped-box p.imp {
  font-size: 16px;
  letter-spacing: 1.5px;
  font-weight: 400;
}
.shipped-box .radio-group {
  margin: 20px 0 0;
}
.shipped-box .radio-ui {
  margin: 0 40px 0 0;
}

.m-subtotal-box {
  display: none;
}

.shipped-list-box {
  background: #fff;
  padding: 25px;
  margin: 0 0 50px;
}
.shipped-list-box li {
  font-size: 14px;
  color: #000;
  letter-spacing: 1.4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 8px;
  border-bottom: 1px solid #C8C8C8;
  margin: 0 0 23px;
}
.shipped-list-box li.last-subtotal {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 1.5px;
  border-bottom: 1px solid #464646;
  margin: 0 0 15px;
}
.shipped-list-box li.get-point {
  font-size: 14px;
  color: #D86018;
  font-weight: 400;
  letter-spacing: 1.4px;
  border-bottom: none;
  margin: 0;
}

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

.price-num {
  font-family: "Roboto", sans-serif;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.price-num img {
  margin: 0 0 0 8px;
}

.checkout-box {
  width: 995px;
  padding: 0 0 156px;
  margin: 120px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
.checkout-box h2 {
  font-family: "Roboto", sans-serif;
  font-size: 60px;
  letter-spacing: 0.5px;
  font-weight: 500;
  color: #000;
  width: 100%;
  margin: 0 0 25px;
  padding: 0 0 10px;
}
.checkout-box h2 p {
  font-family: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", "微軟正黑體", Arial, Helvetica, sans-serif;
  font-size: 18px;
  letter-spacing: 2.3px;
  line-height: 1;
  font-weight: 400;
  margin: 15px 0 0;
  padding: 0 0 10px;
  border-bottom: 1px solid #000;
}
.checkout-box h2 p.no-bot {
  border: none;
}
.checkout-box h3 {
  font-family: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", "微軟正黑體", Arial, Helvetica, sans-serif;
  font-size: 18px;
  letter-spacing: 2.3px;
  font-weight: 500;
  line-height: 1;
  width: 100%;
  margin: 0 0 25px;
  padding: 0 0 10px;
  border-bottom: 1px solid #000;
}

.checkout-l {
  width: 58.8%;
  background: #fff;
  padding: 40px 35px;
}

.checkout-list-item {
  font-size: 14px;
  letter-spacing: 1.3px;
  color: #000;
  border-bottom: 1px solid #C8C8C8;
  margin: 0 0 30px;
  padding: 0 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.checkout-list-item label {
  font-weight: 500;
  width: 120px;
}
.checkout-list-item div {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  width: calc(100% - 120px);
}
.checkout-list-item div a {
  float: right;
  color: #000;
  border-bottom: 1px solid #000;
}

.checkout-note label {
  font-size: 14px;
  letter-spacing: 1.5px;
  font-weight: 500;
  display: block;
  margin: 0 0 10px;
}
.checkout-note ul {
  list-style-type: disc;
  padding: 0 0 0 20px;
}
.checkout-note li {
  font-size: 13px;
  letter-spacing: 0.75px;
  color: #333333;
  line-height: 1.6;
  list-style-type: disc;
  margin: 0 0 8px;
}

.checkout-r {
  width: 39.2%;
  background: #fff;
  padding: 40px 35px;
}

.btn-checkout {
  color: #fff;
  text-align: center;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 1.5px;
  width: 100%;
  padding: 15px 30px;
  background: #000000;
  cursor: pointer;
  transition: 0.4s ease-out;
  position: relative;
  display: block;
}
.btn-checkout:hover {
  background: #333;
}

.btn-checkout2 {
  color: #000;
  background: #fff;
  border: 1px solid #787878;
  margin: 20px 0 0;
}
.btn-checkout2:hover {
  color: #fff;
  background: #000;
  border: 1px solid #000;
}

.checkout-class-l {
  background: none;
  padding: 0;
}
.checkout-class-l h4 {
  font-family: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", "微軟正黑體", Arial, Helvetica, sans-serif;
  font-size: 18px;
  letter-spacing: 2.3px;
  font-weight: 500;
  line-height: 1;
  width: 100%;
  margin: 0 0 25px;
  padding: 0 0 10px;
  border-bottom: 1px solid #000;
}

.checkout-class-item {
  padding: 35px;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  align-content: space-between;
  flex-wrap: nowrap;
  margin: 0 0 25px;
}

.checkout-class-img {
  width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.checkout-class-img img {
  width: auto;
  height: 160px;
}

.m-qrcode-box {
  display: none;
}

.checkout-class-info {
  height: 160px;
  font-weight: 400;
  color: #000;
  width: calc(100% - 130px);
  display: flex;
  justify-content: flex-start;
  align-content: space-between;
  flex-wrap: wrap;
  position: relative;
}
.checkout-class-info h5 {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 1.61px;
  margin: 0 0 8px;
}
.checkout-class-info > div {
  width: 100%;
}

.checkout-class-people {
  font-size: 14px;
  letter-spacing: 1.4px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}

.checkout-class-date {
  font-family: "Roboto", sans-serif;
  font-size: 13px;
  letter-spacing: 1px;
  margin: 0 0 8px;
}

.checkout-class-add {
  font-size: 13px;
  letter-spacing: 1.5px;
}

.checkout-class-note {
  font-size: 13px;
  letter-spacing: 1px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
}
.checkout-class-note .checkout-class-note-p {
  width: calc(100% - 100px);
}
.checkout-class-note p {
  color: #464646;
  line-height: 1.6;
  margin: 5px 0 7px;
}
.checkout-class-note span {
  font-size: 12px;
  font-weight: 300;
}

.checkout-class-note-desc {
  width: 100%;
}

.qrcode-box {
  width: 80px;
  background: #fff;
}
.qrcode-box img {
  width: 100%;
}

.btn-online-class {
  text-align: center;
  color: #fff;
  font-size: 15px;
  letter-spacing: 1.5px;
  background: #787878;
  width: 100%;
  padding: 10px 0;
  margin: 3px 0 0;
  transition: 0.4s ease-out;
}
.btn-online-class:hover {
  background: #000;
}

.thanks-box {
  width: 390px;
  padding: 0 0 156px;
  margin: 120px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
.thanks-box h2 {
  font-family: "Roboto", sans-serif;
  font-size: 60px;
  letter-spacing: 0.5px;
  font-weight: 500;
  color: #000;
  width: 100%;
  margin: 0 0 60px;
  padding: 0 0 10px;
  border-bottom: 1px solid #000;
}
.thanks-box h2 p {
  font-family: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", "微軟正黑體", Arial, Helvetica, sans-serif;
  font-size: 18px;
  letter-spacing: 2.3px;
  line-height: 1;
  font-weight: 400;
  margin: 15px 0 0;
}

@media screen and (max-width: 1900px) {
  .cart-group.bg-to::before {
    display: none;
  }

  .cart-input-box {
    width: 100%;
  }

  .cart-info-input {
    padding: 100px 120px;
  }

  .cart-order {
    padding: 100px 100px 220px 100px;
  }
  .cart-order .back-shopping {
    left: 100px;
  }
}
@media screen and (max-width: 1600px) {
  .cart-box {
    width: auto;
    padding: 0 8% 120px;
  }
  .cart-box h2 {
    font-size: 50px;
  }

  .cart-input-box h2 {
    font-size: 50px;
  }

  .cart-list li.title {
    font-size: 14px;
  }

  .cart-group {
    margin: 110px 0 0;
  }

  .checkout {
    font-size: 14px;
  }

  .cart-info-input {
    padding: 100px 100px;
  }

  .cart-order {
    padding: 100px 80px 200px 80px;
  }
  .cart-order .back-shopping {
    left: 80px;
  }

  .select-ui {
    font-size: 14px;
  }

  .input-item-box label {
    font-size: 14px;
  }
  .input-item-box input {
    font-size: 14px;
  }

  .btn-edit {
    font-size: 14px;
  }

  .btn-save-stroe {
    font-size: 14px;
  }

  .sale-mesg-box {
    width: 79.3%;
  }

  .can-coin-group p {
    font-size: 14px;
  }

  .discount-box input[type=number] {
    font-size: 14px;
  }
  .discount-box i {
    font-size: 14px;
  }

  .bonus-group p {
    font-size: 14px;
  }
}
@media screen and (max-width: 1400px) {
  .cart-group {
    margin: 100px 0 0;
  }

  .cart-list li.title {
    font-size: 13px;
  }

  .item-name h3 {
    font-size: 16px;
  }
  .item-name span {
    font-size: 13px;
  }

  .price-total {
    font-size: 16px;
  }

  .sale-mesg span {
    font-size: 13px;
  }

  .transport-sale {
    font-size: 13px;
  }

  .subtotal p {
    font-size: 13px;
  }

  .back-shopping span {
    font-size: 13px;
  }

  .transport-zone h3 {
    font-size: 14px;
  }

  .select-ui {
    font-size: 13px;
  }

  .checkout {
    font-size: 13px;
  }

  .cart-info-input {
    padding: 80px 80px;
  }

  .cart-order {
    padding: 80px 60px 180px 60px;
  }
  .cart-order .back-shopping {
    left: 60px;
  }

  .input-cont .pad-49 {
    width: 49%;
  }

  .input-item-box input {
    font-size: 13px;
  }
  .input-item-box label {
    font-size: 13px;
  }

  .btn-edit {
    font-size: 13px;
  }

  .btn-save-stroe {
    font-size: 13px;
  }

  .sale-mesg-box {
    width: 80.5%;
  }
}
@media screen and (max-width: 1200px) {
  .cart-box h2 p {
    font-size: 16px;
  }

  .transport-zone {
    width: 60.834%;
  }

  .subtotal-box {
    width: 37.273%;
  }

  .select-act {
    height: 60px;
    line-height: 60px;
    padding: 0 22px;
  }

  .discount-sel-box .select-ui ul {
    top: 61px;
  }

  .quantity-val {
    font-size: 13px;
  }

  .item-del .btn-del {
    background: url(/img/btn_del.svg) no-repeat center/20px;
  }

  .cart-info-input {
    padding: 60px 60px 160px;
  }
  .cart-info-input h2 {
    font-size: 50px;
  }
  .cart-info-input h2 p {
    font-size: 16px;
  }

  .cart-input-box h2 p {
    font-size: 16px;
  }

  .cart-order {
    padding: 60px;
  }
  .cart-order .back-shopping {
    width: calc(100% - 120px);
    padding: 9px 25px 9px 15px;
    left: 60px;
  }

  .input-tit {
    margin: 0 0 20px;
  }

  .input-item {
    height: 60px;
  }

  .input-item-box label {
    margin: 0 0 0 22px;
  }
  .input-item-box input {
    width: calc(100% - 95px);
  }
  .input-item-box .select-ui ul {
    top: 59px;
  }

  .post-code {
    display: none;
  }

  .post-code + input {
    width: 100%;
    padding: 0 22px;
  }

  .input-cont {
    margin: 0 0 60px;
  }
  .input-cont .w53 {
    width: 60%;
  }

  .btn-save-box .btn-edit {
    width: 33.5%;
    padding: 19px 10px 20px;
  }

  .btn-save-stroe {
    padding: 19px 10px 20px;
  }

  .radio-ui span {
    width: calc(100% - 26px);
  }

  .product-img {
    margin: 0 20px 0 0;
  }

  .product-info > span {
    font-size: 12px;
  }
  .product-info h4 {
    font-size: 14px;
  }

  .ml {
    font-size: 12px;
  }

  .order-price {
    font-size: 14px;
    width: 44%;
  }

  .product-num {
    width: 28px;
    height: 28px;
    line-height: 28px;
    top: -10px;
    right: -10px;
  }

  .discount-box {
    margin: 0 0 30px;
  }
  .discount-box h4 {
    font-size: 15px;
  }
  .discount-box input[type=number] {
    font-size: 14px;
  }
  .discount-box .radio-group .radio-ui {
    font-size: 14px;
  }

  .shipped-box {
    margin: 0 0 30px;
  }
  .shipped-box p.imp {
    font-size: 14px;
  }
  .shipped-box p {
    font-size: 13px;
  }

  .discount-sel-box .select-ui li {
    flex-wrap: wrap;
  }

  .discount-input input[type=text] {
    font-size: 13px;
    padding: 0 0 0 20px;
  }
  .discount-input button {
    font-size: 13px;
  }

  .sale-mesg-box {
    width: 81.9%;
  }

  .discount-num {
    width: 100%;
    margin: 0 0 10px;
  }

  .discount-info {
    width: 100%;
  }

  .checkout-box {
    width: auto;
    padding: 0 25px 150px;
  }
  .checkout-box h2 {
    font-size: 50px;
  }
  .checkout-box h2 p {
    font-size: 16px;
  }
  .checkout-box h3 {
    font-size: 16px;
  }

  .thanks-box h2 {
    font-size: 50px;
  }
  .thanks-box h2 p {
    font-size: 16px;
  }
}
@media screen and (max-width: 1023px) {
  .cart-box {
    padding: 0 25px 100px;
    margin: 100px auto 0;
  }

  .cart-list li.title {
    font-size: 13px;
  }

  .item-pic {
    height: 140px;
  }

  .item-name {
    width: 25%;
    margin: 0 0 10px 5%;
  }
  .item-name span {
    font-size: 12px;
    margin: 0 0 4px;
  }
  .item-name h3 {
    font-size: 13px;
  }
  .item-name .date {
    font-size: 12px;
  }

  .item-del {
    padding: 0 25px 0 0;
  }

  .sale-mesg {
    margin: 0 0 6px;
  }
  .sale-mesg span {
    margin: 0;
  }

  .item-capacity {
    width: 100px;
  }

  .select-sty-cart {
    width: 100px;
  }
  .select-sty-cart select {
    font-size: 13px;
  }

  .item-quantity {
    width: 105px;
  }

  .ui-quantity {
    width: 105px;
  }

  .item-price {
    font-size: 13px;
    width: 10%;
    margin: 0 0 0 2%;
  }

  .price {
    margin: 0;
  }

  .sale-price {
    margin: 6px 0 0;
  }

  .class-hours {
    font-size: 13px;
    padding: 0 25px 0 10px;
  }

  .sale-mesg-box {
    font-size: 12px;
    padding: 4px 0;
    width: 80.3%;
  }

  .transport-zone {
    padding: 30px;
  }
  .transport-zone h3 {
    font-size: 14px;
  }

  .transport-sale {
    font-size: 12px;
  }

  .note-desc {
    font-size: 12px;
  }

  .subtotal-box {
    padding: 30px;
  }

  .subtotal p {
    font-size: 13px;
  }

  .price-total {
    font-size: 16px;
  }

  .checkout {
    font-size: 13px;
    height: 60px;
  }

  .back-shopping {
    font-size: 13px;
  }

  .select-ui {
    letter-spacing: 1px;
  }

  .check-box {
    width: 14px;
    height: 14px;
  }

  .no-buy .ui-check-box input[type=checkbox]:disabled + .check-box::after {
    width: 18px;
    top: 6px;
  }
  .no-buy .ui-check-box input[type=checkbox]:disabled + .check-box::before {
    width: 18px;
    top: 6px;
  }

  .ui-check-box input[type=checkbox]:checked + .check-box::after {
    width: 8px;
    height: 8px;
  }

  .cart-info-input {
    width: 100%;
    padding: 60px 15%;
  }

  .cart-order {
    width: 100%;
    padding: 60px 15%;
  }
  .cart-order .back-shopping {
    position: static;
    width: 100%;
    margin: 20px 0 0;
  }

  .discount-num {
    width: 100px;
    margin: 0 15px 0 0;
  }

  .discount-info {
    width: calc(100% - 115px);
  }

  .input-tit h3 {
    font-size: 14px;
  }

  .input-item-box label {
    letter-spacing: 1px;
  }
  .input-item-box input {
    letter-spacing: 1px;
  }

  .address-list p.r-name {
    font-size: 13px;
  }
  .address-list p.r-address {
    font-size: 12px;
  }

  .discount-tit {
    font-size: 13px;
  }

  .discount-date span {
    font-size: 12px;
  }

  .btn-edit {
    letter-spacing: 1px;
  }

  .btn-save-stroe {
    letter-spacing: 1px;
  }

  .can-coin-group p {
    font-size: 13px;
  }

  .discount-box input[type=number] {
    font-size: 13px;
  }
  .discount-box i {
    font-size: 13px;
  }

  .input-error {
    font-size: 13px;
    letter-spacing: 1px;
  }

  .shipped-list-box {
    display: block;
  }

  .m-subtotal-box {
    display: block;
    width: 100%;
    background: #fff;
    padding: 0;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 3;
  }
  .m-subtotal-box .back-shopping {
    display: none;
  }
  .m-subtotal-box .shipped-list-box {
    display: block;
    width: 100%;
    margin: 0;
    padding: 25px 25px 15px;
    border-bottom: 1px solid #EDEDED;
    position: absolute;
    transform: translateY(100%);
    transition: 0.4s ease-out;
    z-index: -1;
  }
  .m-subtotal-box .shipped-list-box.act {
    transform: translateY(-100%);
  }

  .m-dtl-info-box {
    width: 100%;
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
  }
  .m-dtl-info-box .checkout {
    width: 120px;
    margin: 0;
  }
  .m-dtl-info-box .m-dtl-info {
    width: 22%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
  }
  .m-dtl-info-box .m-dtl-info .check-box {
    border: none;
    margin: 0 10px 0 25px;
    background: url(/img/icon_sel_down3.svg) no-repeat center center;
    transform: rotate(180deg);
    transition: 0.2s ease-out;
  }
  .m-dtl-info-box .m-dtl-info span {
    font-size: 13px;
    color: #000;
    letter-spacing: 1px;
  }
  .m-dtl-info-box .m-dtl-info.on .check-box {
    transform: rotate(0);
  }
  .m-dtl-info-box .subtotal {
    width: 70%;
    justify-content: flex-end;
    margin: 0;
  }
  .m-dtl-info-box .subtotal p {
    margin: 0 10px 0 0;
  }
  .m-dtl-info-box .price-total {
    margin: 0 10px 0 0;
  }

  .bonus-group p {
    font-size: 13px;
  }

  .checkout-list-item div a {
    float: none;
    width: 100px;
    text-align: center;
    display: block;
    margin: 10px 0 0;
  }

  .btn-checkout {
    font-size: 13px;
  }

  .checkout-class-item {
    padding: 25px;
  }
}
@media screen and (max-width: 767px) {
  .cart-group {
    margin: 80px 0 0;
  }

  .cart-box {
    margin: 80px auto 0;
    padding: 0;
  }
  .cart-box h2 {
    font-size: 45px;
    padding: 0 25px;
    margin: 0 0 30px;
  }
  .cart-box h2 p {
    font-size: 14px;
    margin: 10px 0 0;
  }

  .cart-list li.title {
    display: none;
  }

  .cart-list {
    margin: 0 0 80px;
  }
  .cart-list li {
    width: auto;
    padding: 16px;
    position: relative;
    align-items: flex-start;
    flex-wrap: wrap;
    margin: 0 0 20px;
  }
  .cart-list li.has-sale {
    margin: 0 0 46px;
  }

  .item-check {
    text-align: left;
    width: 24px;
    height: 24px;
    transform: translateY(-20%);
    position: absolute;
    top: 50%;
    left: 15px;
    z-index: 1;
  }

  .ui-check-box {
    width: 24px;
    height: 24px;
    margin: 0;
  }
  .ui-check-box label {
    width: 12px;
    margin: 0 auto;
  }
  .ui-check-box .check-box {
    width: 14px;
    height: 14px;
  }
  .ui-check-box input[type=checkbox]:checked + .check-box:after {
    width: 8px;
    height: 8px;
  }

  .item-pic {
    width: 25%;
    height: auto;
    margin: 0 0 0 30px;
  }

  .item-name {
    width: 50%;
  }

  .item-price {
    width: auto;
    position: absolute;
    top: 20px;
    right: 20px;
  }

  .item-capacity {
    width: 24%;
    position: absolute;
    bottom: 20px;
    left: 39%;
    z-index: 1;
  }

  .select-sty-cart {
    width: 100%;
  }

  .item-quantity {
    position: absolute;
    bottom: 20px;
    left: calc(43% + 111px);
    z-index: 1;
    left: auto;
    right: 16px;
  }

  .item-del {
    text-align: center;
    width: 24px;
    height: 24px;
    padding: 0;
    position: absolute;
    top: 17px;
    left: 16px;
  }
  .item-del .btn-del {
    background: url(/img/btn_m_del.svg) no-repeat center top/12px;
  }

  .no-buy .ui-check-box input[type=checkbox]:disabled + .check-box::after {
    width: 17px;
    top: 5px;
  }
  .no-buy .ui-check-box input[type=checkbox]:disabled + .check-box::before {
    width: 17px;
    top: 5px;
  }

  .qa-mesg {
    font-size: 12px;
    right: 10px;
    bottom: 37px;
    left: auto;
  }

  .sale-mesg-box {
    width: 100%;
    padding: 6px 10px;
    bottom: -25px;
    left: 0;
  }

  .sale-mesg .warning-icon {
    margin: 0 4px 0 0;
  }

  .warning-icon {
    width: 12px;
    height: 12px;
    background: url(/img/icon_warning.svg) no-repeat center center/12px;
  }

  .transport-info-box {
    flex-wrap: wrap;
    border: none;
    padding: 0;
    margin: -40px 0 0;
  }

  .transport-zone {
    width: 100%;
    padding: 25px;
    margin: 0 0 30px;
  }
  .transport-zone h3 {
    font-size: 14px;
    margin: 0 0 10px;
  }

  .sel-zone {
    width: 100%;
    margin: 0 0 20px;
  }

  .sel-transport {
    width: 100%;
    margin: 0 0 15px;
  }

  .subtotal-box {
    width: 100%;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    bottom: 0;
    left: 0;
    z-index: 3;
  }
  .subtotal-box .checkout {
    width: 120px;
    margin: 0;
  }
  .subtotal-box .back-shopping {
    display: none;
  }

  .m-check-all {
    font-size: 13px;
    color: #000;
    letter-spacing: 1px;
    width: 30%;
    margin: 0 0 0 25px;
    display: block;
  }
  .m-check-all label {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .m-check-all label input[type=checkbox]:checked + .check-box::after {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    background: #000;
    position: absolute;
    top: 2px;
    left: 2px;
    z-index: 1;
  }
  .m-check-all .check-box {
    margin: 0 10px 0 0;
  }

  .subtotal {
    width: 70%;
    margin: 0;
    flex-wrap: nowrap;
  }
  .subtotal p {
    margin: 0 5px 0 0;
  }

  .price-total {
    margin: 0 20px 0 0;
  }

  .cart-group .footer-sitemap-group {
    margin: 30px 0 0;
  }
  .cart-group .footer-sitemap {
    border: none;
  }

  .cart-info-input {
    padding: 60px 25px;
  }

  .cart-order {
    padding: 60px 25px;
  }

  .cart-input-box h2 {
    font-size: 45px;
  }
  .cart-input-box h2 p {
    font-size: 15px;
    margin: 10px 0 40px;
  }

  .input-tit {
    padding: 0 0 10px;
  }
  .input-tit h3 {
    font-size: 14px;
  }

  .order-product-box {
    padding: 0 20px;
  }

  .order-item {
    padding: 20px 0;
  }

  .product-info > span {
    font-size: 13px;
  }

  .ml {
    font-size: 13px;
  }

  .order-price {
    font-size: 15px;
  }

  .shipped-box p.imp {
    font-size: 14px;
  }

  .discount-box h4 {
    font-size: 14px;
  }
  .discount-box input[type=number] {
    font-size: 14px;
    width: 60px;
    padding: 8px 5px;
  }
  .discount-box i {
    font-size: 14px;
  }

  .can-coin-group p {
    font-size: 14px;
  }

  .bonus-group p {
    font-size: 14px;
  }

  .discount-sel-box .select-ui li:first-child {
    padding: 15px 20px;
  }
  .discount-sel-box .select-ui li {
    padding: 15px 20px;
    justify-content: flex-start;
  }

  .discount-input input[type=text] {
    padding: 0 0 0 15px;
  }

  .btn-edit {
    font-size: 14px;
  }

  .btn-save-stroe {
    font-size: 14px;
  }

  .discount-num {
    width: 90px;
    font-size: 14px;
  }

  .discount-tit {
    width: 100%;
    font-size: 14px;
    display: block;
  }

  .expiry-date {
    font-size: 12px;
  }

  .discount-date {
    display: none;
  }

  .icon-discount-qa {
    display: none;
  }

  .m-discount-date {
    width: 100%;
    padding: 15px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .m-discount-date label {
    width: calc(100% - 20px);
  }
  .m-discount-date label, .m-discount-date span {
    font-size: 12px;
    letter-spacing: 1.3px;
    color: #787878;
  }
  .m-discount-date .icon-discount-qa {
    width: 16px;
    height: 16px;
    display: block;
    position: static;
  }

  .empty {
    display: none;
  }

  .select-ui {
    font-size: 14px;
  }

  .input-item-box {
    margin: 0 0 15px;
  }
  .input-item-box label {
    font-size: 14px;
  }
  .input-item-box input {
    font-size: 14px;
  }
  .input-item-box .radio-last {
    margin: 0 0 25px;
  }
  .input-item-box .textarea-box label {
    margin: 20px 0 0 20px;
  }
  .input-item-box .textarea-box textarea {
    padding: 20px 20px 20px 0;
  }
  .input-item-box .textarea-box textarea.pad {
    padding: 25px;
  }
  .input-item-box .post-w {
    width: 100%;
  }

  .input-cont > p {
    font-size: 13px;
    margin: 0 0 7px;
  }
  .input-cont .btn-save-box {
    margin: 8px 0 0;
  }
  .input-cont .w49 {
    width: 100%;
  }
  .input-cont .w20 {
    width: 35%;
  }
  .input-cont .w74 {
    width: 47.8%;
  }
  .input-cont .w78 {
    width: 61%;
  }
  .input-cont .w23 {
    width: 47.8%;
  }
  .input-cont .w53 {
    width: 100%;
  }
  .input-cont .invoice-box .w49 {
    width: 47.5%;
  }
  .input-cont .m-100 {
    width: 100%;
  }

  .btn-save-box {
    flex-wrap: wrap;
    margin: 0;
  }
  .btn-save-box .input-item-box {
    margin: 0 0 15px;
  }
  .btn-save-box .btn-edit {
    width: auto;
    padding: 20px;
  }

  .btn-edit {
    width: 100%;
  }

  .address-list p.r-name {
    font-size: 14px;
  }
  .address-list p.r-address {
    font-size: 12px;
  }

  .checkout-box {
    margin: 80px auto 0;
  }
  .checkout-box h2 {
    font-size: 45px;
    padding: 0;
    margin: 0 0 15px;
  }
  .checkout-box h2 p {
    font-size: 14px;
    margin: 40px 0 0;
  }
  .checkout-box h3 {
    font-size: 14px;
  }

  .checkout-l {
    width: 100%;
    padding: 30px 25px;
  }

  .checkout-list-item {
    font-size: 13px;
    padding: 20px 0;
    margin: 0;
  }

  .checkout-note {
    margin: 20px 0 0;
  }

  .checkout-r {
    width: 100%;
    padding: 0;
    background: none;
  }

  .btn-checkout2 {
    background: none;
  }
  .btn-checkout2:hover {
    background: none;
    border: 1px solid #000;
  }

  .checkout-class-l {
    padding: 0;
  }
  .checkout-class-l h4 {
    font-size: 14px;
  }

  .checkout-class-item {
    margin: 0 0 20px;
    flex-wrap: wrap;
  }

  .checkout-class-img {
    display: none;
  }

  .m-qrcode-box {
    width: 100%;
    display: block;
  }
  .m-qrcode-box img {
    width: 120px;
    margin: 70px auto;
    display: block;
  }

  .checkout-class-info {
    width: 100%;
    height: auto;
    min-height: 140px;
  }
  .checkout-class-info h5 {
    font-size: 14px;
  }

  .qrcode-box {
    display: none;
  }

  .checkout-class-note {
    font-size: 12px;
  }
  .checkout-class-note .checkout-class-note-p {
    width: 100%;
  }

  .checkout-class-date {
    font-size: 12px;
  }

  .checkout-class-people {
    font-size: 12px;
  }

  .btn-online-class {
    font-size: 13px;
    padding: 16px 0;
  }

  .thanks-box {
    width: auto;
    padding: 0 25px 80px;
    margin: 80px auto 0;
  }
  .thanks-box h2 {
    font-size: 45px;
    margin: 0 0 80px;
  }
  .thanks-box h2 p {
    font-size: 14px;
  }

  .btn-checkout {
    padding: 16px 10px;
  }
}
@media screen and (max-width: 375px) {
  .item-capacity {
    left: 40%;
  }
}
@media screen and (max-width: 320px) {
  .shipped-box .radio-ui {
    margin: 0 20px 0 0;
  }

  .discount-input input[type=text] {
    width: 70%;
    padding: 0 0 0 10px;
  }
  .discount-input button {
    width: 30%;
  }

  .discount-sel-box .select-ui li:first-child {
    padding: 15px 15px 0;
  }
  .discount-sel-box .select-ui li {
    padding: 10px 15px;
  }
  .discount-sel-box .select-ui li:nth-last-child(1) {
    padding: 10px 15px 10px;
  }

  .discount-num {
    width: 70px;
  }

  .discount-info {
    width: calc(100% - 85px);
  }

  .m-discount-date {
    padding: 10px 0 0;
  }
}
.mb-group {
  width: 100%;
  padding: 150px 0 0;
  background: linear-gradient(to left, #F4F2EF 50%, #F1EBDF 50%);
}

.mb-box {
  max-width: 1920px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}

.mb-nav {
  width: 30.7294%;
  height: 100%;
  min-height: 950px;
  padding: 135px 0 135px 6%;
  background: #F1EBDF;
}
.mb-nav h2 {
  font-family: "Roboto", sans-serif;
  font-size: 60px;
  color: #000;
  letter-spacing: 0.4px;
  font-weight: 500;
  margin: 0 0 50px 25px;
}
.mb-nav h2 p {
  font-size: 20px;
  color: #000;
  letter-spacing: 2.3px;
  margin: 10px 0 0;
}
.mb-nav nav {
  width: auto;
  flex-wrap: wrap;
  display: block;
}

.mb-nav-item {
  width: 100%;
  display: block;
}

.mb-nav-main-item {
  font-size: 15px;
  color: #000;
  letter-spacing: 1.5px;
  font-weight: 500;
  background: url(/img/mb_nav_plus.svg) no-repeat left center;
  padding: 10px 0 10px 26px;
  display: block;
  cursor: pointer;
}
.mb-nav-main-item.act span::after {
  width: 100%;
}
.mb-nav-main-item span {
  display: inline-block;
  position: relative;
}
.mb-nav-main-item span:hover::after {
  width: 100%;
}
.mb-nav-main-item span::after {
  content: "";
  display: block;
  width: 0;
  height: 1px;
  background: #000;
  position: absolute;
  bottom: -2px;
  left: 0;
  z-index: 1;
  transition: 0.4s;
}
.mb-nav-main-item.no-sub-item {
  background: none;
}
.mb-nav-main-item.open {
  background: url(/img/mb_nav_minus.svg) no-repeat left center;
}
.mb-nav-main-item.open span::after {
  width: 100%;
}
.mb-nav-main-item.open + .nav-sub-item-group {
  height: auto;
}

.nav-sub-item-group {
  height: 0;
  padding: 0 0 0 26px;
  transition: 0.4s ease-out;
  overflow: hidden;
}
.nav-sub-item-group a:first-child {
  padding: 5px 0 15px 0;
}
.nav-sub-item-group a {
  font-size: 14px;
  color: #000;
  letter-spacing: 1.4px;
  font-weight: 300;
  padding: 0 0 15px;
  display: block;
  position: relative;
}
.nav-sub-item-group a span {
  position: relative;
}
.nav-sub-item-group a span::after {
  content: "";
  width: 0;
  height: 1px;
  background: #000;
  position: absolute;
  bottom: -2px;
  left: 0;
  z-index: 1;
  transition: 0.4s;
}
.nav-sub-item-group a:hover span::after {
  width: 100%;
}
.nav-sub-item-group a.act span::after {
  width: 100%;
}

.mb-cont {
  width: 1330px;
  padding: 135px 0 200px;
  background: #F4F2EF;
  position: relative;
}

.mb-ind-box {
  margin: 0 230px;
}

.notify-date {
  font-size: 13px;
  color: #000;
  letter-spacing: 0.75px;
  font-weight: 400;
  margin: 0 0 10px;
}
.notify-date span {
  font-family: "Roboto", sans-serif;
  margin: 0 15px 0 0;
}

.can-coin {
  width: 57px;
  height: 21px;
  background: url(/img/can_coin.svg) no-repeat center center;
  display: inline-block;
  vertical-align: middle;
}

.can-coin-orange {
  width: 57px;
  height: 21px;
  background: url(/img/can_coin_orange.svg) no-repeat center center;
  display: inline-block;
  vertical-align: middle;
}

.data-list h3 {
  font-size: 18px;
  color: #000;
  letter-spacing: 2.3px;
  margin: 0 0 50px;
}
.data-list h3 span {
  color: #000;
  font-weight: 500;
  margin: 0 20px 0 0;
  display: inline-block;
}
.data-list li {
  font-size: 15px;
  color: #000;
  letter-spacing: 1.5px;
  padding: 10px 0;
  border-bottom: 1px solid #C8C8C8;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 0 0 50px;
}
.data-list h4 {
  font-weight: 500;
  width: 178px;
}

.data-cont {
  font-weight: 400;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
.data-cont .can-coin {
  margin: 0 0 0 25px;
}
.data-cont p {
  font-weight: 400;
  margin: 0 25px 0 0;
}
.data-cont i {
  font-style: normal;
}
.data-cont span {
  color: #D86018;
  margin: 0 0 0 15px;
  display: inline-block;
}

.point-q {
  margin: 0 0 0 20px;
  cursor: pointer;
  position: relative;
}
.point-q:hover .mesg-box {
  display: block;
}

.mesg-box {
  font-size: 14px;
  color: #000;
  letter-spacing: 1.4px;
  text-align: center;
  width: 260px;
  padding: 45px 35px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  position: absolute;
  left: 30px;
  top: 0;
  z-index: 1;
  transform: translateY(-50%);
  display: none;
}

.mesg-tit {
  font-size: 14px;
  color: #000;
  letter-spacing: 1.4px;
  font-weight: 500;
  text-align: center;
  margin: 0 0 15px;
}

.lg-mask {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  transition: 0.4s ease-out;
  opacity: 0;
  visibility: hidden;
}
.lg-mask.on {
  opacity: 1;
  visibility: visible;
}

.lg-box {
  width: 560px;
  padding: 45px 50px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
  position: absolute;
  top: 20%;
  left: 50%;
  z-index: 12;
  transform: translate(-50%, 20px);
  transition: 0.4s ease-out;
  opacity: 0;
  visibility: hidden;
}
.lg-box.on {
  visibility: visible;
  transform: translate(-50%, 0);
  opacity: 1;
}

.lg-box-s {
  width: 365px;
}

.lg-btn-close {
  width: 20px;
  height: 20px;
  background: url(/img/icon_close_lg.svg) no-repeat center center;
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 1;
  cursor: pointer;
}

.lg-tit {
  font-size: 14px;
  color: #000;
  letter-spacing: 1.4px;
  text-align: center;
  font-weight: 500;
  margin: 0 0 25px;
}

.lg-cont {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
.lg-cont p {
  font-size: 13px;
  color: #000;
  letter-spacing: 0.8px;
  text-align: center;
  font-weight: 400;
  width: 100%;
  margin: 0 0 25px;
}
.lg-cont p.input-sub-tit {
  font-size: 13px;
  color: #464646;
  letter-spacing: 1.2px;
  text-align: left;
  margin: 25px 0 15px;
}
.lg-cont .input-item-box {
  width: 100%;
}
.lg-cont .input-item-box.ww34 {
  width: 34%;
}
.lg-cont .input-item-box.ww60 {
  width: 60%;
}
.lg-cont .btn-resend {
  margin: 45px 0 0;
}
.lg-cont .textarea-box {
  padding: 0;
}
.lg-cont .textarea-box textarea {
  width: 100%;
  padding: 20px;
}

.lg-fot {
  text-align: center;
  margin: 50px 0 0;
}
.lg-fot .btn-submit {
  margin: 0;
}
.lg-fot a {
  font-size: 13px;
  color: #000;
  letter-spacing: 1.2px;
  font-weight: 400;
  text-align: center;
  padding: 15px 0 0;
  display: inline-block;
  border-bottom: 1px solid #000;
}

.verify-note {
  font-size: 13px;
  color: #464646;
  letter-spacing: 1px;
  text-align: center;
  width: 100%;
  margin: 15px 0 0;
}

.mb-info-box {
  margin: 0 230px 50px;
}
.mb-info-box h3 {
  font-size: 18px;
  color: #000;
  letter-spacing: 2.3px;
  font-weight: 500;
  margin: 0 0 25px;
}
.mb-info-box h4 {
  font-size: 16px;
  color: #000;
  letter-spacing: 2px;
  font-weight: 500;
  padding: 0 0 10px;
  margin: 0 0 25px;
  border-bottom: 1px solid #000;
}
.mb-info-box .input-item-box.no-label {
  margin: 0 0 50px;
}
.mb-info-box .input-item-box.no-label .input-item {
  border: none;
}
.mb-info-box .input-item-box.no-label input {
  padding: 0 25px;
}

.mb-form {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
.mb-form .input-item {
  background: #F4F2EF;
}
.mb-form .has-error .bnt-eye {
  margin: 0;
  top: 20px;
}
.mb-form .input-item-box {
  width: 100%;
  margin: 0 0 2.5%;
}
.mb-form .input-item-box input {
  color: #787878;
  background: #F4F2EF;
}
.mb-form .input-item-box input::-moz-placeholder {
  color: #787878;
}
.mb-form .input-item-box input::placeholder {
  color: #787878;
}
.mb-form .input-item-box input:disabled {
  -webkit-text-fill-color: #787878;
  color: #787878;
  opacity: 1;
}
.mb-form .input-item-box .select-ui {
  background: #F4F2EF url(/img/icon_sel_down3.svg) no-repeat right 25px center;
}
.mb-form .input-item-box .select-ui select {
  background: none;
  border: none;
}
.mb-form .input-item-box .inpu-disabled {
  border: none;
  background: #fff;
}
.mb-form .input-item-box .inpu-disabled input {
  background: #fff;
}
.mb-form .input-item-box .select-ui.ui-disabled {
  background: #f4f2ef;
}
.mb-form .input-item-box .select-ui.ui-disabled:hover ul {
  display: none;
}
.mb-form .input-item-box.ww31 {
  width: 31.666%;
}
.mb-form .input-item-box.ww23 {
  width: 23.125%;
}
.mb-form .input-item-box.ww74 {
  width: 74.375%;
}
.mb-form .radio-group {
  margin: 0 0 25px;
}
.mb-form .m-email-edit {
  display: none;
}
.mb-form .m-phone-edit {
  display: none;
}

.change-pwd .bnt-eye {
  right: 25px;
}

.radio-item-box {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  margin: 0 0 2%;
}
.radio-item-box label {
  font-size: 15px;
  color: #000;
  letter-spacing: 1.5px;
  font-weight: 500;
  margin: 0 40px 15px 0;
}
.radio-item-box .radio-group {
  width: calc(100% - 110px);
  margin: 0;
}

.btn-basis {
  width: 100%;
  font-size: 15px;
  color: #fff;
  letter-spacing: 1.5px;
  font-weight: 400;
  text-align: center;
  height: 65px;
  line-height: 65px;
  cursor: pointer;
  transition: 0.4s ease-out;
  position: relative;
  display: inline-block;
}

.btn-gray {
  width: 195px;
  background: #787878;
}
.btn-gray:hover {
  background: #636363;
}

.btn-black {
  width: 100%;
  background: #000;
}
.btn-black:hover {
  background: #333;
}

.btn-light-brown {
  width: 195px;
  background: #AF9682;
  position: absolute;
  right: 0;
  top: 0;
}
.btn-light-brown:hover {
  background: #977e6a;
}

.btn-verify-input {
  color: #464646;
  width: 195px;
  background: #E3DDD2;
  position: absolute;
  right: 0;
  top: 0;
}
.btn-verify-input:hover {
  background: #dbd1be;
}

.btn-resend-input {
  width: 195px;
  background: #787878;
  position: absolute;
  top: 0;
  right: 195px;
}
.btn-resend-input:hover {
  background: #636363;
}

.login-type-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  margin: 25px 0 0;
}
.login-type-box h5 {
  width: 100%;
  font-size: 15px;
  color: #000;
  letter-spacing: 1.88px;
  margin: 0 0 25px;
}

.login-type {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 8px;
  margin: 0 65px 0 0;
  cursor: pointer;
  transition: 0.4s;
}
.login-type:hover .login-google {
  background-color: #fff;
}
.login-type:hover .login-line {
  background-color: #fff;
}
.login-type.already-login {
  cursor: default;
}
.login-type.already-login .login-google {
  opacity: 0.5;
}
.login-type.already-login .login-line {
  opacity: 0.5;
}

.login-google {
  width: 42px;
  height: 42px;
  border-radius: 100px;
  border: 1px solid #000;
  margin: 0 15px 0 0;
  background-image: url(/img/icon_google.svg);
  background-repeat: no-repeat;
  background-position: center center;
  transition: 0.4s ease-out;
}
.login-google:hover {
  background-color: #fff;
}

.login-line {
  width: 42px;
  height: 42px;
  border-radius: 100px;
  border: 1px solid #000;
  margin: 0 15px 0 0;
  background-image: url(/img/icon_line.svg);
  background-repeat: no-repeat;
  background-position: center center;
  transition: 0.4s ease-out;
}
.login-line:hover {
  background-color: #fff;
}

.login-cont {
  font-weight: 400;
}
.login-cont p {
  font-size: 13px;
  color: #464646;
  letter-spacing: 1px;
}
.login-cont span {
  font-size: 13px;
  color: #D86018;
  letter-spacing: 1px;
}

.mb-note {
  margin: 25px 0 30px;
}
.mb-note h5 {
  font-size: 16px;
  color: #000;
  letter-spacing: 1.88px;
  font-weight: 500;
  margin: 0 0 12px;
}
.mb-note li {
  font-size: 13px;
  color: #464646;
  letter-spacing: 0.75px;
  list-style-type: disc;
  margin: 0 0 7px 20px;
}

.form-submit-box {
  text-align: right;
  width: 100%;
  margin: 0 0 2%;
}

.addressee-sty .mb-info-box {
  width: 680px;
  margin: 0 auto 100px;
}
.addressee-sty .mb-info-box h4 {
  border-bottom: 1px solid #000;
  padding: 0 0 10px;
}
.addressee-sty .form-submit-box {
  padding: 0 0 25px;
  border-bottom: 1px solid #C8C8C8;
}
.addressee-sty .radio-group {
  letter-spacing: 1.5px;
}

.mb-data-item {
  font-size: 15px;
  color: #464646;
  letter-spacing: 1.5px;
  font-weight: 400;
  border-bottom: 1px solid #C8C8C8;
  padding: 0 0 25px;
  margin: 0 0 15px;
  position: relative;
}
.mb-data-item p {
  width: 100%;
  margin: 0 0 15px;
}
.mb-data-item p:last-child {
  margin: 0;
}
.mb-data-item span {
  color: #787878;
}

.btn-edit-data {
  width: 20px;
  height: 20px;
  background: url(/img/icon_edit_data.svg) no-repeat center center;
  position: absolute;
  right: 40px;
  bottom: 25px;
  z-index: 1;
  cursor: pointer;
}
.btn-edit-data:hover {
  background: url(/img/icon_edit_data_on.svg) no-repeat center center;
}

.btn-del-data {
  width: 20px;
  height: 20px;
  background: url(/img/icon_del_data.svg) no-repeat center center;
  position: absolute;
  right: 0;
  bottom: 25px;
  z-index: 1;
  cursor: pointer;
}
.btn-del-data:hover {
  background: url(/img/icon_del_data_on.svg) no-repeat center center;
}

.btn-add-info {
  font-size: 15px;
  color: #464646;
  letter-spacing: 1.5px;
  font-weight: 400;
  padding: 0 0 0 30px;
  background: url(/img/icon_add_info.svg) no-repeat left center;
  cursor: pointer;
}
.btn-add-info:hover {
  color: #000;
  background: url(/img/icon_add_info_on.svg) no-repeat left center;
}

.btn-sel-store {
  width: 100%;
  position: static;
}

.subscript-sty .mb-info-box {
  width: 580px;
  margin: 0 auto 100px;
}
.subscript-sty .checkbox-group {
  font-size: 15px;
  letter-spacing: 1.5px;
  margin: 0 0 25px;
}

.form-subscription-submit-box {
  text-align: right;
  width: 100%;
  padding: 25px 0;
  border-top: 1px solid #c8c8c8;
}
.form-subscription-submit-box .btn-basis {
  width: 150px;
}

.points-manage-sty .mb-info-box {
  width: 680px;
  margin: 0 auto 50px;
}
.points-manage-sty h4 {
  margin: 50px 0 25px;
}

.point-item-group {
  margin: 0 0 27px;
}
.point-item-group .w30 {
  font-family: "Roboto", sans-serif;
  width: 30%;
}
.point-item-group .w70 {
  width: 70%;
  font-weight: 400;
}
.point-item-group .w40 {
  width: 40%;
}

.point-list-item {
  font-size: 14px;
  color: #000;
  letter-spacing: 1.75px;
  height: 0;
  padding: 0 25px;
  background: #fff;
  overflow: hidden;
  transition: 0.4s ease-out;
}
.point-list-item li {
  padding: 22px 0;
  border-bottom: 1px solid #C8C8C8;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.point-list-item li a {
  font-family: "Roboto", sans-serif;
  color: #000;
  font-weight: 400;
  border-bottom: 1px solid #000;
}
.point-list-item li.point-event-tit {
  font-weight: 400;
}
.point-list-item li:last-child {
  border: none;
}
.point-list-item.open {
  height: auto;
}
.point-list-item .m-order-num-show {
  display: none;
}
.point-list-item.exchange-history {
  height: auto;
}

.ev-tit {
  font-size: 15px;
  color: #000;
  letter-spacing: 1.75px;
  font-weight: 500;
}

.ev-cont {
  font-weight: 400;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.ev-cont span {
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  color: #000;
  letter-spacing: 1px;
  padding: 0 10px 0 0;
}
.ev-cont span.pot-note {
  color: #D86018;
  padding: 0 0 0 20px;
}

.point-dashboard {
  height: auto;
}
.point-dashboard .w30 {
  font-size: 15px;
  color: #000;
  letter-spacing: 1.2px;
  font-weight: 500;
  width: 30%;
}

.point-item-tit {
  font-size: 15px;
  color: #fff;
  letter-spacing: 1.5px;
  background: #464646;
  font-weight: 500;
  padding: 22px 25px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.point-item-tit .w30 {
  font-family: "Roboto", sans-serif;
  letter-spacing: 1.5px;
  width: 30%;
  font-weight: 400;
}
.point-item-tit .w70 {
  width: 70%;
  letter-spacing: 1.5px;
  font-weight: 400;
}
.point-item-tit .w40 {
  width: 40%;
}

.point-item-list-tit {
  font-size: 14px;
  color: #000;
  letter-spacing: 1.2px;
  padding: 22px 25px 0;
  background: #fff;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  cursor: pointer;
  position: relative;
}
.point-item-list-tit span {
  font-family: "Roboto", sans-serif;
}
.point-item-list-tit.open .icon-unfold {
  transform: rotate(180deg);
}
.point-item-list-tit.open .ppx {
  height: 1px;
}

.icon-unfold {
  width: 20px;
  height: 20px;
  background: url(/img/icon_unfold_item.svg) no-repeat center center;
  transform: rotate(0);
  position: absolute;
  right: 25px;
  top: 21px;
  z-index: 1;
  cursor: pointer;
  pointer-events: none;
}

.ppx {
  width: 100%;
  height: 0;
  margin: 22px 0 0;
  background: #464646;
  transition: 0.1s;
}

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

.coupon-sty .mb-info-box {
  width: 680px;
  margin: 0 auto 100px;
}
.coupon-sty .mesg-box {
  width: 380px;
}

.freegift-group .point-q {
  margin: 0;
  display: inline-block;
  vertical-align: middle;
}
.freegift-group .mesg-box {
  width: 360px;
  text-align: left;
  left: -160px;
  top: 210px;
  z-index: 5;
}

.coupon-item {
  font-weight: 400;
  height: 80px;
  padding: 10px 0 10px 25px;
  margin: 0 0 25px;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.coupon-item .point-q {
  margin: 0;
  position: absolute;
  right: 10px;
  top: 10px;
}
.coupon-item .mesg-box {
  left: 0;
  top: 20px;
  z-index: 2;
  transform: translate(-50%, 0);
}
.coupon-item a {
  font-size: 15px;
  color: #000;
  letter-spacing: 2.31px;
  text-align: center;
  width: 195px;
  height: 60px;
  line-height: 60px;
  border-left: 1px solid #C8C8C8;
  display: block;
  transition: 0.4s;
}
.coupon-item a:hover {
  color: #787878;
}
.coupon-item.no-link .coupon-info {
  width: calc(100% - 25px);
}
.coupon-item.no-link .mesg-box {
  right: 0;
  left: auto;
  transform: translate(0px, 0px);
}

.coupon-info {
  width: calc(100% - 200px);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
}

.coupon-val {
  font-size: 15px;
  color: #fff;
  letter-spacing: 1.5px;
  text-align: center;
  width: 100px;
  height: 40px;
  line-height: 40px;
  margin: 0 15px 0 0;
  background: #6FA287;
}

.coupon-tit {
  font-size: 15px;
  color: #000;
  letter-spacing: 1.5px;
  width: calc(100% - 115px);
  position: relative;
}
.coupon-tit br {
  display: none;
}
.coupon-tit span {
  font-size: 13px;
  color: #D86018;
  letter-spacing: 1.3px;
  padding: 0 0 0 15px;
}
.coupon-tit p {
  font-size: 13px;
  color: #787878;
  letter-spacing: 1.3px;
  width: 100%;
}

.m-use-info {
  display: none;
}

.load-more {
  font-size: 15px;
  color: #000;
  letter-spacing: 1.5px;
  font-weight: 400;
  text-align: center;
  width: 340px;
  height: 65px;
  line-height: 65px;
  border: 1px solid #787878;
  margin: 50px auto 0;
  cursor: pointer;
  transition: 0.4s ease-out;
}
.load-more:hover {
  color: #fff;
  background: #000;
}

.btn-line-sty {
  color: #000;
  font-size: 15px;
  letter-spacing: 1.5px;
  border: 1px solid #787878;
  padding: 11px 25px 11px 15px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: 0.4s;
}
.btn-line-sty:hover {
  color: #fff;
  background: #000;
  border: 1px solid #000;
}
.btn-line-sty:hover .icon-left {
  background: url(/img/icon_left_on.svg) no-repeat center center;
}

.mb-order-box {
  width: 1010px;
  margin: 0 auto 50px;
}
.mb-order-box h3 {
  font-size: 18px;
  color: #000;
  letter-spacing: 2.3px;
  font-weight: 500;
  border-bottom: 1px solid #C8C8C8;
  padding: 0 0 10px;
  margin: 0 0 25px;
  position: relative;
}

.filter-order {
  font-size: 15px;
  letter-spacing: 2px;
  padding: 10px 25px 10px 0;
  background: url(/img/icon_sel_down.svg) no-repeat right center;
  border-bottom: 2px solid transparent;
  position: absolute;
  right: 0;
  bottom: -2px;
  cursor: pointer;
}
.filter-order:hover .filter-order-box {
  display: block;
}
.filter-order:hover:after {
  display: block;
}
.filter-order:after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: #000;
  position: absolute;
  bottom: -2px;
  right: 0;
  z-index: 2;
  display: none;
}

.filter-order-box {
  width: 450px;
  background: #fff;
  padding: 40px 50px;
  border-radius: 4px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
  position: absolute;
  top: 41px;
  right: 0;
  z-index: 1;
  display: none;
}

.filter-date {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.filter-date p {
  font-size: 14px;
  color: #000;
  letter-spacing: 1px;
  font-weight: 400;
  width: 100%;
  margin: 0 0 15px;
}
.filter-date input {
  font-size: 13px;
  color: #464646;
  letter-spacing: 1px;
  width: 150px;
  padding: 11px 12px;
  margin: 0 0 25px;
  border-radius: 4px;
  border: 1px solid #C8C8C8;
  background: url(/img/icon_calendar.svg) no-repeat right 12px center;
}
.filter-date span {
  display: block;
  width: 30px;
  height: 1px;
  background: #C8C8C8;
  margin: 0 0 25px;
}

.input-time-search {
  width: 100%;
  position: relative;
}
.input-time-search input {
  width: 100%;
  background: none;
  margin: 0;
}

.btn-filter {
  width: 24px;
  height: 24px;
  position: absolute;
  right: 11px;
  top: 8px;
  z-index: 1;
  cursor: pointer;
}
.btn-filter input {
  width: 100%;
  height: 100%;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  cursor: pointer;
}

.order-list li {
  font-size: 14px;
  letter-spacing: 1.2px;
  font-weight: 400;
  color: #000;
  padding: 30px 0;
  border-bottom: 1px solid #787878;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.order-list li.title {
  font-size: 16px;
  letter-spacing: 2px;
  padding: 10px 0;
}
.order-list li.last-li {
  border: none;
}
.order-list .btn-basis {
  font-size: 14px;
}
.order-list .order-date {
  font-family: "Roboto", sans-serif;
  width: 20%;
}
.order-list .order-number {
  width: 20%;
}
.order-list .order-number a {
  color: #000;
  border-bottom: 1px solid #000;
}
.order-list .order-status {
  width: 35%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.order-list .order-status .btn-light-brown {
  width: 140px;
  height: 40px;
  line-height: 40px;
  position: static;
  margin: 0 0 0 20px;
}
.order-list .order-total {
  font-family: "Roboto", sans-serif;
  width: 25%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.order-list .order-total span {
  font-weight: 500;
}
.order-list .order-total .btn-gray {
  width: 140px;
  height: 40px;
  line-height: 40px;
}

.m-order-list {
  display: none;
}

.order-detail-box {
  width: 100%;
}

.shipping-status {
  background: #C8C8C8;
  padding: 23px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.shipping-status p {
  font-size: 14px;
  letter-spacing: 1.5px;
  color: #A9A9A9;
  font-weight: 400;
}
.shipping-status span {
  width: 60px;
  height: 1px;
  background: #A9A9A9;
  margin: 0 30px;
  display: block;
}
.shipping-status.success-status {
  background: #464646;
}
.shipping-status.success-status p {
  color: #787878;
}
.shipping-status.success-status span {
  background: #787878;
}
.shipping-status.success-status p.act {
  color: #fff;
}

.order-item-box {
  background: #fff;
  padding: 0 25px;
  margin: 0 0 70px;
}

.order-item-ul {
  width: 100%;
}
.order-item-ul li.tit {
  font-weight: 400;
}
.order-item-ul li {
  font-family: "Roboto", sans-serif;
  font-size: 13px;
  color: #000000;
  letter-spacing: 1.2px;
  font-weight: 400;
  width: 100%;
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #C8C8C8;
}
.order-item-ul li:last-child {
  border-bottom: none;
}
.order-item-ul a {
  color: #464646;
  border-bottom: 1px solid #464646;
}

.od-ml {
  text-align: center;
  width: 8%;
}

.od-quantity {
  text-align: center;
  width: 8%;
}
.od-quantity span {
  display: none;
}

.od-num {
  width: 15%;
}

.od-tit {
  width: 20%;
}

.od-price {
  font-family: "Roboto", sans-serif;
  text-align: right;
  width: 15%;
  padding: 0 20px 0 0;
}

.od-note {
  width: 30%;
}
.od-note span {
  display: block;
}

.order-detail-view {
  font-size: 13px;
  font-weight: 400;
  color: #000;
  padding: 25px 0;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}

.shipping-infor {
  width: 30%;
  padding: 0 25px 0 0;
}
.shipping-infor h4 {
  letter-spacing: 1.2px;
  font-weight: 500;
  margin: 0 0 15px;
}
.shipping-infor p {
  letter-spacing: 1.2px;
  margin: 0 0 10px;
}
.shipping-infor span {
  padding: 0 0 0 10px;
}

.shipped-num {
  color: #E75700;
  letter-spacing: 1.2px;
  margin: 0 0 10px;
  display: block;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.btn-copy {
  width: 16px;
  height: 16px;
  cursor: pointer;
  margin: 0 0 0 10px;
}

.payment-detail {
  width: 40%;
  padding: 0 25px;
  border-left: 1px solid #C8C8C8;
  border-right: 1px solid #C8C8C8;
}

.payment-list {
  width: 100%;
  padding: 0 0 16px;
  margin: 0 0 16px;
  border-bottom: 1px solid #c8c8c8;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.payment-list h4 {
  letter-spacing: 1.2px;
}
.payment-list p {
  font-family: "Roboto", sans-serif;
  letter-spacing: 1.2px;
  font-weight: 400;
}
.payment-list.fw h4 {
  font-weight: 500;
}
.payment-list.fw p {
  font-weight: 500;
}

.payment-bonus {
  color: #D86018;
  letter-spacing: 1.22px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.get-bonus {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.get-bonus span {
  padding: 0 10px 0 0;
}

.payment-type {
  width: 30%;
  padding: 0 0 0 25px;
}
.payment-type h4 {
  letter-spacing: 1.2px;
  font-weight: 500;
  margin: 0 0 15px;
}
.payment-type p {
  letter-spacing: 1.2px;
  margin: 0 0 10px;
}
.payment-type span {
  padding: 0 0 0 10px;
}
.payment-type span.type-tit {
  padding: 0;
  display: inline-block;
}

.order-operate {
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.order-operate p {
  font-size: 13px;
  color: #000;
  letter-spacing: 1.2px;
  font-weight: 400;
  text-align: right;
}

.cancel-box {
  color: #E75700;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.cancel-box p {
  color: #E75700;
  text-align: left;
  width: calc(100% - 68px);
}

.ca-tit {
  font-size: 13px;
  color: #E75700;
  letter-spacing: 1.2px;
  font-weight: 500;
  width: 68px;
  padding: 0 15px 0 0;
}

.order-cancel {
  font-size: 14px;
  color: #000;
  letter-spacing: 1.5px;
  font-weight: 400;
  text-align: center;
  width: 140px;
  height: 40px;
  line-height: 40px;
  border: 1px solid #787878;
  cursor: pointer;
  transition: 0.4s;
}
.order-cancel:hover {
  color: #fff;
  background: #000;
  border: 1px solid #000;
}
.order-cancel.disabled {
  color: #aaa;
  border: 1px solid #aaa;
}
.order-cancel.disabled:hover {
  cursor: default;
  color: #aaa;
  background: none;
  border: 1px solid #aaa;
}

.order-repayment {
  font-size: 14px;
  color: #d86018;
  letter-spacing: 1.5px;
  font-weight: 400;
  text-align: center;
  width: 140px;
  height: 40px;
  line-height: 40px;
  border: 1px solid #d86018;
  cursor: pointer;
  transition: 0.4s;
}
.order-repayment:hover {
  color: #fff;
  background: #000;
  border: 1px solid #000;
}
.order-repayment.disabled {
  color: #aaa;
  border: 1px solid #aaa;
}
.order-repayment.disabled:hover {
  cursor: default;
  color: #aaa;
  background: none;
  border: 1px solid #aaa;
}

.order-fot {
  float: right;
}
.order-fot .btn-line-sty {
  width: 250px;
}

.ask-tit {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.ask-tit .btn-gray {
  height: 40px;
  line-height: 40px;
  width: 140px;
}

.ask-box {
  background: #fff;
  padding: 25px 25px 1px 25px;
  margin: 0 0 70px;
}

.ask-item-box {
  color: #000;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 1.2px;
  width: 48%;
  margin: 0 52% 25px 0;
}
.ask-item-box.ask-item-box-r {
  text-align: right;
  margin: 0 0 25px 52%;
}
.ask-item-box h4 {
  font-weight: 500;
  margin: 0 0 8px;
}
.ask-item-box p {
  line-height: 1.4;
}

.ask-date {
  font-size: 12px;
  margin: 15px 0 0;
}

.mb-product-list {
  width: 1080px;
  margin: 0 auto 50px;
}
.mb-product-list h3 {
  font-size: 16px;
  color: #000;
  letter-spacing: 2.3px;
  font-weight: 500;
  margin: 0 0 15px;
}
.mb-product-list h4 {
  font-size: 16px;
  color: #000;
  letter-spacing: 2px;
  padding: 0 0 15px;
  border-bottom: 1px solid #464646;
  margin: 0 0 25px;
}
.mb-product-list .m-prod-price {
  display: none;
}
.mb-product-list .product-list-box .prod-img {
  width: 30%;
  margin: 0 0 70px;
}
.mb-product-list .btn-fav {
  width: 19px;
  height: 19px;
}

.btn-exchange {
  width: 100%;
  font-size: 15px;
  color: #fff;
  letter-spacing: 1.5px;
  font-weight: 400;
  text-align: center;
  height: 60px;
  line-height: 60px;
  cursor: pointer;
  transition: 0.4s ease-out;
  background: #787878;
}
.btn-exchange:hover {
  background: #636363;
}

.mb-replen-list {
  width: 1010px;
  margin: 0 auto 50px;
}
.mb-replen-list h3 {
  font-size: 18px;
  color: #000;
  letter-spacing: 2.3px;
  font-weight: 500;
  margin: 0 0 25px;
}

.prod-horizontal-list li {
  font-size: 14px;
  color: #000;
  letter-spacing: 1.2px;
  font-weight: 400;
  height: 200px;
  background: #fff;
  padding: 0 5% 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 25px;
}
.prod-horizontal-list li.title {
  font-size: 15px;
  color: #000;
  letter-spacing: 2px;
  height: auto;
  background: none;
  padding: 0 5% 10px 0;
  margin: 0 0 25px;
  border-bottom: 1px solid #464646;
}

.m-prod-horizontal-list {
  display: none;
}

.p-item-pic {
  width: 16%;
  height: 100%;
}
.p-item-pic img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.p-item-name {
  width: 18%;
}
.p-item-name span {
  font-size: 14px;
  color: #787878;
  letter-spacing: 1.4px;
  margin: 0 0 8px;
  display: block;
}
.p-item-name h4 {
  font-size: 18px;
  color: #000;
  letter-spacing: 1.8px;
}

.p-item-ml {
  font-family: "Roboto", sans-serif;
  width: 8%;
}

.p-item-status {
  width: 8%;
}

.p-item-date {
  font-family: "Roboto", sans-serif;
  width: 12%;
}

.p-item-num {
  font-family: "Roboto", sans-serif;
  width: 12%;
}

.p-item-operate {
  width: 5%;
}

.mb-notification-list {
  width: 1010px;
  margin: 0 auto 50px;
}
.mb-notification-list h3 {
  font-size: 18px;
  color: #000;
  letter-spacing: 2.3px;
  font-weight: 500;
  margin: 0 0 25px;
}

.notify-type {
  border-bottom: 1px solid #000;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 0 0 25px;
}
.notify-type a {
  font-size: 16px;
  color: #787878;
  letter-spacing: 1.5px;
  font-weight: 400;
  margin: 0 30px 0 0;
  padding: 0 0 15px;
  border-bottom: 2px solid transparent;
  display: block;
  position: relative;
  bottom: -1px;
  transition: 0.4s ease-out;
}
.notify-type a:hover {
  color: #000;
  border-bottom: 2px solid #000;
}
.notify-type a.act {
  color: #000;
  border-bottom: 2px solid #000;
}

.mb-notification-item-list li {
  padding: 25px 58px;
  background: #fff;
  margin: 0 0 25px;
  position: relative;
}
.mb-notification-item-list li.open .notify-more {
  transform: rotate(-90deg);
}
.mb-notification-item-list h4 {
  font-size: 14px;
  color: #000;
  letter-spacing: 1.4px;
  font-weight: 500;
  line-height: 1.6;
  margin: 0 0 15px;
}
.mb-notification-item-list p {
  font-size: 13px;
  color: #000;
  letter-spacing: 0.75px;
  line-height: 1.6;
}
.mb-notification-item-list .btn-basis.btn-gray {
  width: 150px;
  height: 60px;
  line-height: 60px;
}

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

.notify-cont {
  height: 20px;
  overflow: hidden;
  line-height: 1.61;
  transition: 0.4s ease-out;
}
.notify-cont p {
  margin: 0 0 10px;
}

.notify-box {
  padding: 25px 58px;
  background: #fff;
  margin: 0 0 60px;
  position: relative;
}
.notify-box h2 {
  font-size: 14px;
  color: #000;
  letter-spacing: 1.4px;
  line-height: 1.6;
  margin: 0 0 18px;
}
.notify-box p {
  font-size: 13px;
  color: #000;
  letter-spacing: 0.75px;
  line-height: 1.6;
}
.notify-box .notify-more {
  transform: rotate(0);
}

.notify-bell {
  width: 17px;
  height: 21px;
  background: url(/img/icon_bell.svg) no-repeat center center/cover;
  position: absolute;
  left: 28px;
  top: 23px;
  z-index: 1;
}

.notify-more {
  width: 22px;
  height: 22px;
  background: url(/img/icon_notify_more.svg) no-repeat center center/8px;
  transform: rotate(90deg);
  position: absolute;
  right: 25px;
  top: 25px;
  z-index: 1;
  transition: 0.4s ease-out;
  cursor: pointer;
}

.verify-line-group {
  background: #F4F2EF;
  padding: 180px 0 0;
}

.verify-line-box {
  width: 1170px;
  padding: 130px 0 180px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
}
.verify-line-box h2 {
  font-size: 18px;
  color: #000;
  letter-spacing: 2.3px;
  font-weight: 400;
  width: 100%;
  margin: 0 0 25px;
}

.verify-info {
  width: 650px;
}
.verify-info .input-item-box:nth-last-of-type(1) {
  margin: 0;
}

.line-qr {
  width: 470px;
  background: #fff;
  padding: 45px 50px;
  position: relative;
}
.line-qr h3 {
  font-size: 15px;
  color: #000;
  letter-spacing: 1.5px;
  margin: 0 0 15px;
}
.line-qr p {
  font-size: 13px;
  color: #000;
  letter-spacing: 1.8px;
  margin: 0 0 10px;
}
.line-qr a {
  color: #000;
  border-bottom: 1px solid #000;
}

.qr-box {
  width: 180px;
  margin: 50px auto;
}

.bot-btn-val {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}
.bot-btn-val .radio-group {
  margin: 0 50px 45px;
}
.bot-btn-val .btn-black {
  width: 100%;
}

.post-code-input input {
  width: 100%;
  padding: 0 25px;
}

.line-code-input label {
  width: 100px;
}
.line-code-input input {
  width: calc(100% - 130px);
}

@media screen and (max-width: 1800px) {
  .mb-nav {
    padding: 135px 0 135px 4%;
  }
}
@media screen and (max-width: 1600px) {
  .mb-group {
    padding: 110px 0 0;
  }

  .mb-nav h2 {
    font-size: 50px;
  }
  .mb-nav h2 p {
    font-size: 18px;
  }

  .data-list h3 {
    font-size: 16px;
  }
  .data-list li {
    font-size: 14px;
  }

  .mb-ind-box {
    margin: 0 15%;
  }

  .mb-info-box {
    margin: 0 15% 50px;
  }
  .mb-info-box h3 {
    font-size: 16px;
  }
  .mb-info-box h4 {
    font-size: 15px;
  }

  .mb-data-item {
    font-size: 14px;
    margin: 0 0 12px;
  }

  .radio-item-box label {
    font-size: 14px;
    margin: 0 30px 0 0;
  }

  .btn-add-info {
    font-size: 14px;
  }

  .load-more {
    font-size: 14px;
  }

  .subscript-sty .checkbox-group {
    font-size: 14px;
    letter-spacing: 1.5px;
    margin: 0 0 23px;
  }

  .mb-product-list {
    width: auto;
    margin: 0 14% 50px;
  }
  .mb-product-list .product-list-box {
    width: 100%;
  }

  .mb-replen-list {
    width: 80%;
  }
  .mb-replen-list h3 {
    font-size: 16px;
  }

  .prod-horizontal-list li.title {
    font-size: 14px;
    letter-spacing: 1.5px;
  }

  .p-item-name span {
    font-size: 13px;
  }
  .p-item-name h4 {
    font-size: 17px;
  }

  .btn-exchange {
    font-size: 14px;
  }

  .btn-basis {
    font-size: 14px;
  }
}
@media screen and (max-width: 1400px) {
  .mb-group {
    padding: 100px 0 0;
  }

  .mb-nav {
    width: 30%;
    padding: 100px 0 100px 4%;
  }
  .mb-nav h2 {
    margin: 0 0 40px 25px;
  }

  .mb-cont {
    width: 70%;
    padding: 100px 0 100px;
  }

  .data-list li {
    margin: 0 0 35px;
  }

  .addressee-sty .mb-info-box {
    width: auto;
    margin: 0 15% 100px;
  }

  .coupon-sty .mb-info-box {
    width: auto;
    margin: 0 15% 100px;
  }

  .mb-order-box {
    width: 90%;
  }

  .order-list .order-date {
    width: 13%;
  }
  .order-list .order-status {
    width: 25%;
  }
  .order-list .order-status .btn-light-brown {
    width: 100px;
  }
  .order-list .order-total {
    width: 28%;
  }
  .order-list .order-total .btn-gray {
    width: 100px;
  }

  .btn-line-sty {
    font-size: 14px;
  }

  .order-cancel {
    font-size: 13px;
  }

  .subscript-sty .mb-info-box {
    width: auto;
    margin: 0 20% 100px;
  }

  .points-manage-sty .mb-info-box {
    width: auto;
    margin: 0 15% 50px;
  }

  .point-dashboard .w30 {
    font-size: 14px;
  }

  .mb-not h5 {
    font-size: 15px;
  }

  .point-item-tit {
    font-size: 14px;
  }

  .payment-type span.type-tit {
    padding: 0 5px 0 0;
  }
  .payment-type span {
    padding: 0 5px 0 0;
  }

  .mb-product-list {
    width: 700px;
    margin: 0 auto 50px;
  }
  .mb-product-list .product-list-box .prod-img {
    margin: 0 0 60px;
  }

  .p-item-name h4 {
    font-size: 16px;
  }

  .mb-notification-list {
    width: 90%;
  }
}
@media screen and (max-width: 1200px) {
  .mb-group {
    padding: 100px 0 0;
  }

  .mb-nav h2 {
    font-size: 45px;
    margin: 0 0 50px 25px;
  }
  .mb-nav h2 p {
    font-size: 16px;
    margin: 8px 0 0;
  }

  .btn-basis {
    height: 60px;
    line-height: 60px;
  }

  .mb-form .select-act {
    height: 58px;
    line-height: 58px;
  }

  .load-more {
    height: 60px;
    line-height: 60px;
    width: 195px;
  }

  .coupon-info {
    width: calc(100% - 170px);
  }

  .coupon-item a {
    width: 160px;
  }

  .order-list .order-date {
    width: 15%;
  }
  .order-list .order-status {
    width: 28%;
  }
  .order-list .order-status .btn-light-brown {
    width: 90px;
    margin: 0 0 0 10px;
  }
  .order-list .order-total {
    width: 28%;
  }
  .order-list .order-total .btn-gray {
    width: 90px;
    margin: 0 0 0 10px;
  }

  .mb-product-list {
    width: 480px;
  }
  .mb-product-list .product-list-box {
    padding: 0;
  }
  .mb-product-list .product-list-box .prod-img {
    width: 45%;
  }
  .mb-product-list .btn-fav {
    width: 17px;
    height: 17px;
  }

  .mb-replen-list {
    width: 85%;
  }

  .prod-horizontal-list li {
    font-size: 13px;
    letter-spacing: 1.5px;
    height: 150px;
  }
  .prod-horizontal-list li.title {
    font-size: 13px;
  }

  .p-item-name span {
    margin: 0 0 5px;
  }
  .p-item-name h4 {
    font-size: 15px;
  }

  .p-item-pic {
    width: 20%;
  }

  .p-item-ml {
    width: 10%;
  }

  .p-item-status {
    width: 10%;
  }

  .p-item-num {
    width: 14%;
  }

  .p-item-operate {
    width: 5%;
  }

  .btn-del {
    width: 20px;
    margin: 0;
    background: url(/img/btn_del.svg) no-repeat center center/16px;
  }

  .mb-notification-list {
    width: auto;
    padding: 0 25px;
  }

  .mb-notification-item-list li.has-link .notify-cont {
    padding: 0 115px 0 0;
  }
  .mb-notification-item-list .btn-basis.btn-gray {
    width: 130px;
    height: 60px;
    line-height: 60px;
  }

  .verify-line-box {
    width: 90%;
  }

  .verify-info {
    width: 60%;
  }

  .line-qr {
    width: 36%;
  }
}
@media screen and (max-width: 1023px) {
  .notify-box {
    margin: 0 0 40px;
  }

  .mb-nav {
    min-height: 710px;
    padding: 70px 0 100px 4%;
  }
  .mb-nav h2 {
    font-size: 42px;
    margin: 0 0 40px 25px;
  }

  .mb-nav-main-item {
    font-size: 14px;
  }

  .nav-sub-item-group a {
    font-size: 13px;
  }

  .mb-cont {
    padding: 70px 0 100px;
  }

  .data-list h3 {
    font-size: 15px;
    margin: 0 0 30px;
  }
  .data-list h4 {
    width: 128px;
  }
  .data-list li {
    font-size: 13px;
    margin: 0 0 30px;
  }

  .data-cont {
    font-size: 13px;
  }

  .mesg-box {
    left: 0;
    top: 27px;
    z-index: 1;
    transform: translate(-45%, 0);
  }

  .btn-light-brown {
    width: 111px;
  }

  .mb-ind-box {
    width: 85%;
    margin: 0 auto;
  }

  .mb-info-box {
    width: 85%;
    margin: 0 auto 50px;
  }
  .mb-info-box h3 {
    font-size: 15px;
  }
  .mb-info-box h4 {
    font-size: 14px;
  }

  .mb-form .input-item-box.pad-w30 {
    width: 30%;
  }
  .mb-form .input-item-box.pad-w67 {
    width: 67.3%;
  }

  .addressee-sty .mb-info-box {
    width: 85%;
    margin: 0 auto 100px;
  }
  .addressee-sty .mb-info-box .btn-sel-store {
    width: 100%;
  }

  .radio-group {
    font-size: 13px;
    letter-spacing: 1px;
    margin: 0 20px 0 0;
  }

  .btn-add-info {
    font-size: 13px;
    letter-spacing: 1px;
  }

  .radio-item-box label {
    font-size: 13px;
    letter-spacing: 1px;
    margin: 0 20px 0 0;
  }

  .mb-data-item {
    font-size: 13px;
    letter-spacing: 1px;
    margin: 0 0 10px;
  }
  .mb-data-item p {
    padding: 0 80px 0 0;
    margin: 0 0 10px;
  }

  .coupon-sty .mb-info-box {
    width: 85%;
    margin: 0 auto 100px;
  }

  .coupon-item {
    height: auto;
    padding: 10px 0 10px 10px;
  }
  .coupon-item a {
    font-size: 13px;
    width: 100px;
    height: 40px;
    line-height: 40px;
  }
  .coupon-item .point-q {
    margin: 0;
  }

  .coupon-tit {
    font-size: 14px;
  }
  .coupon-tit span {
    font-size: 12px;
  }
  .coupon-tit p {
    font-size: 12px;
    letter-spacing: 0.8px;
  }

  .load-more {
    font-size: 13px;
  }

  .coupon-info {
    width: calc(100% - 100px);
  }

  .coupon-val {
    font-size: 14px;
    width: 90px;
    margin: 0 10px 0 0;
  }

  .subscript-sty .mb-info-box {
    width: 60%;
    margin: 0 auto 100px;
  }

  .points-manage-sty .mb-info-box {
    width: 85%;
    margin: 0 auto 50px;
  }

  .point-item-list-tit {
    font-size: 13px;
    letter-spacing: 1px;
  }

  .point-list-item {
    font-size: 13px;
    letter-spacing: 1px;
  }

  .mb-note h5 {
    font-size: 14px;
  }

  .order-list li.title {
    font-size: 13px;
  }
  .order-list li {
    font-size: 12px;
    letter-spacing: 1px;
  }
  .order-list .btn-basis {
    font-size: 12px;
  }
  .order-list .order-date {
    font-family: "Roboto", sans-serif;
    width: 18%;
  }
  .order-list .order-number {
    font-family: "Roboto", sans-serif;
    width: 24%;
  }
  .order-list .order-status {
    width: 30%;
  }
  .order-list .order-status .btn-light-brown {
    height: 35px;
    line-height: 35px;
    width: 70px;
    margin: 0 0 0 5px;
  }
  .order-list .order-total {
    width: 30%;
  }
  .order-list .order-total .btn-gray {
    height: 35px;
    line-height: 35px;
    width: 70px;
    margin: 0 0 0 5px;
  }

  .btn-basis {
    font-size: 13px;
    letter-spacing: 1px;
  }

  .shipping-status span {
    width: 30px;
    margin: 0 20px;
  }

  .order-detail-view {
    flex-wrap: wrap;
  }

  .shipping-infor {
    width: 50%;
    border-right: 1px solid #C8C8C8;
    order: 2;
  }

  .payment-detail {
    width: 100%;
    order: 1;
    border: none;
    padding: 0;
    margin: 0 0 25px;
  }

  .payment-type {
    width: 50%;
    order: 3;
  }
  .payment-type span {
    padding: 0 5px 0 0;
  }
  .payment-type span.type-tit {
    margin: 0 0 10px;
    padding: 0;
    display: inline-block;
  }

  .mb-product-list {
    width: 455px;
  }
  .mb-product-list .product-list-box {
    padding: 0;
  }
  .mb-product-list .product-list-box .prod-img {
    width: 47%;
  }

  .btn-exchange {
    font-size: 13px;
    height: 55px;
    line-height: 55px;
  }

  .mb-replen-list {
    width: auto;
    padding: 0 25px;
  }
  .mb-replen-list h3 {
    font-size: 15px;
  }

  .prod-horizontal-list {
    display: none;
  }

  .m-prod-horizontal-list {
    display: block;
  }
  .m-prod-horizontal-list li {
    font-size: 13px;
    font-weight: 400;
    padding: 25px;
    background: #fff;
    margin: 0 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .p-item-pic {
    width: 25%;
  }
  .p-item-pic img {
    width: 90%;
  }

  .p-item-group {
    width: 71%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .p-item-num {
    font-size: 12px;
    letter-spacing: 0.8px;
    width: 50%;
    margin: 0 0 20px;
  }

  .p-item-date {
    font-size: 12px;
    letter-spacing: 0.8px;
    text-align: right;
    width: 50%;
    margin: 0 0 20px;
  }

  .p-item-name {
    width: 70%;
    margin: 0 0 20px;
  }
  .p-item-name span {
    font-size: 12px;
    font-weight: 400;
  }
  .p-item-name h4 {
    font-weight: 500;
  }

  .p-item-status {
    letter-spacing: 0.8px;
    font-weight: 400;
    text-align: right;
    width: 30%;
  }

  .p-item-ml {
    text-align: left;
    width: 70%;
  }

  .p-item-operate {
    text-align: right;
    width: 20%;
  }

  .btn-del {
    width: 24px;
    background: url(/img/btn_del.svg) no-repeat center center;
    display: inline-block;
  }

  .notify-type a {
    font-size: 14px;
    margin: 0 20px 0 0;
  }

  .verify-line-box {
    width: auto;
    margin: 0 25px;
    padding: 40px 0 180px;
  }

  .verify-info {
    width: 100%;
    margin: 0 0 30px;
  }

  .line-qr {
    width: 100%;
  }

  .qr-box {
    margin: 50px auto 130px;
  }
}
@media screen and (max-width: 767px) {
  .lg-mask {
    position: fixed;
  }

  .lg-tit {
    margin: 0 0 15px;
  }

  .lg-box {
    width: auto;
    top: 100px;
    padding: 40px 25px;
    margin: 0;
    position: fixed;
    left: 25px;
    right: 25px;
    transform: translate(0, 20px);
  }
  .lg-box.on {
    transform: translate(0, 0);
  }
  .lg-box .btn-resend {
    line-height: 60px;
    margin: 15px 0 0;
  }

  .lg-fot {
    margin: 40px 0 0;
  }

  .verify-note {
    text-align: left;
    margin: 5px 0 0;
  }

  .mb-nav {
    width: 100%;
    min-height: auto;
    background: #F4F2EF;
    padding: 80px 25px 0;
  }
  .mb-nav h2 {
    font-size: 50px;
    margin: 0 0 40px;
  }
  .mb-nav h2 p {
    font-size: 18px;
  }
  .mb-nav nav {
    display: none;
  }

  .mb-group {
    padding: 80px 0 0;
  }

  .mb-box {
    flex-wrap: wrap;
  }

  .mb-cont {
    width: 100%;
    min-height: auto;
    padding: 0 0 80px;
  }

  .mb-ind-box {
    width: auto;
    padding: 0 25px;
  }

  .notify-box {
    padding: 25px;
  }

  .notify-date {
    padding: 0 0 0 30px;
  }

  .data-list h3 {
    font-size: 16px;
  }
  .data-list h4 {
    width: 116px;
  }
  .data-list li {
    font-size: 14px;
    padding: 0 0 20px;
    margin: 0 0 20px;
  }

  .data-cont {
    width: calc(100% - 116px);
  }
  .data-cont span {
    width: 60%;
  }

  .mesg-box {
    left: auto;
    right: 0;
    transform: translate(14%, 0);
  }

  .m-hide {
    display: none;
  }

  .mb-info-box {
    width: auto;
    padding: 0 25px;
  }
  .mb-info-box h3 {
    font-size: 16px;
    margin: 0 0 15px;
  }
  .mb-info-box h4 {
    font-size: 16px;
    padding: 0 0 10px;
    margin: 0 0 15px;
  }

  .btn-basis {
    font-size: 14px;
    width: 100%;
    position: static;
  }

  .input-item-box label {
    margin: 0 0 0 20px;
  }
  .input-item-box input {
    width: calc(100% - 90px);
  }

  .mb-form .input-item-box {
    margin: 0 0 15px;
  }
  .mb-form .input-item-box .select-ui.ui-disabled .select-act {
    display: block;
  }
  .mb-form .input-item-box .select-act {
    padding: 0 20px;
  }
  .mb-form .input-item-box .select-ui {
    background: #F4F2EF url(/img/icon_sel_down3.svg) no-repeat right 15px center;
  }
  .mb-form .input-item-box.ww23 {
    width: 31.666%;
  }
  .mb-form .input-item-box.ww31 {
    width: 31.066%;
  }
  .mb-form .input-item-box.ww74 {
    width: 64.775%;
  }
  .mb-form .input-item-box.m-ww50 {
    width: 48.1%;
  }
  .mb-form .m-email-edit {
    display: block;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .mb-form .m-phone-edit {
    display: block;
  }
  .mb-form .radio-item-box {
    margin: 0 0 20px;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .mb-form .radio-item-box label {
    font-size: 13px;
    margin: 0 40px 10px 0;
  }
  .mb-form .radio-item-box .radio-group {
    width: calc(100% - 100px);
  }

  .change-pwd .bnt-eye {
    right: 13px;
  }

  .post-code-input input {
    width: 100%;
  }

  .btn-verify-input {
    width: 50%;
  }

  .btn-resend-input {
    width: 50%;
  }

  .login-type {
    width: 50%;
    margin: 0 0 40px;
  }

  .load-more {
    font-size: 13px;
    width: auto;
    margin: 30px 25px 0;
  }

  .addressee-sty .mb-info-box {
    width: auto;
    margin: 0 auto 80px;
  }
  .addressee-sty .mb-info-box h4 {
    font-size: 14px;
  }

  .radio-group {
    margin: 0 20px 10px 0;
  }

  .btn-edit-data {
    bottom: 15px;
  }

  .btn-del-data {
    bottom: 15px;
  }

  .mb-data-item {
    font-size: 13px;
    padding: 0 0 45px;
    margin: 0 0 7px;
  }
  .mb-data-item p {
    padding: 0;
  }

  .btn-gray {
    width: 155px;
  }

  .btn-add-info {
    background: url(/img/icon_add_info.svg) no-repeat left center/12px;
    padding: 0 0 0 22px;
  }

  .subscript-sty .mb-info-box {
    width: auto;
    padding: 0 25px;
  }
  .subscript-sty .checkbox-group {
    width: 100%;
    border-bottom: 1px solid #C8C8C8;
    padding: 23px 0;
    margin: 0;
  }
  .subscript-sty .checkbox-group label {
    justify-content: flex-start;
  }
  .subscript-sty .checkbox-group .point-q {
    position: absolute;
    right: 25px;
  }
  .subscript-sty .checkbox-group .point-q .mesg-box {
    left: auto;
    transform: translate(0, 0);
    right: 0;
  }

  .form-subscription-submit-box {
    border: none;
  }

  .points-manage-sty .mb-info-box {
    width: auto;
    padding: 0 25px;
    margin: 0 auto;
  }
  .points-manage-sty .mb-info-box h4 {
    font-size: 15px;
  }

  .point-dashboard {
    margin: 0 0 80px;
  }
  .point-dashboard .w30 {
    width: 45%;
  }
  .point-dashboard .w70 {
    width: 55%;
  }

  .ev-cont {
    flex-wrap: wrap;
  }
  .ev-cont span {
    font-size: 13px;
  }
  .ev-cont span.pot-note {
    line-height: 1;
    width: 100%;
    display: block;
    padding: 5px 0 0;
  }

  .ppx {
    margin: 20px 0 0;
  }

  .point-item-tit {
    padding: 20px 25px;
  }
  .point-item-tit .w30 {
    width: 45%;
  }
  .point-item-tit .w70 {
    width: 55%;
  }

  .point-item-group .w30 {
    font-size: 13px;
    letter-spacing: 1px;
    font-weight: 500;
    width: 45%;
  }
  .point-item-group .w70 {
    font-size: 13px;
    width: 55%;
  }
  .point-item-group .w40 {
    display: none;
  }

  .point-list-item li {
    padding: 20px 0;
  }
  .point-list-item .m-order-num-show {
    font-size: 12px;
    letter-spacing: 1px;
    display: inline-block;
  }

  .order-date {
    font-size: 12px;
    letter-spacing: 0;
  }

  .mb-note {
    margin: 25px 0 0;
  }
  .mb-note h5 {
    font-size: 15px;
  }
  .mb-note li {
    font-size: 12px;
  }

  .coupon-sty .mb-info-box {
    width: auto;
    padding: 0 25px;
  }
  .coupon-sty .no-label .btn-basis {
    width: 70px;
  }
  .coupon-sty .load-more {
    margin: 30px 0 0;
  }

  .coupon-item {
    padding: 15px 20px 16px;
    margin: 0 0 15px;
  }
  .coupon-item a {
    width: 100%;
    height: auto;
    line-height: normal;
    padding: 15px 0 0;
    border-top: 1px solid #C8C8C8;
    border-left: none;
  }
  .coupon-item .point-q {
    top: auto;
    right: 0;
    bottom: -26px;
  }
  .coupon-item .mesg-box {
    font-size: 13px;
    padding: 40px 25px;
    left: auto;
    right: 0;
    transform: translate(0, 0);
    width: 325px;
  }
  .coupon-item.no-link {
    padding: 15px 20px 4px;
  }
  .coupon-item.no-link .coupon-info {
    width: 100%;
  }

  .coupon-info {
    width: 100%;
  }

  .coupon-tit {
    width: calc(100% - 100px);
    position: static;
  }
  .coupon-tit br {
    display: block;
  }
  .coupon-tit span {
    padding: 0;
  }
  .coupon-tit p {
    display: none;
  }

  .m-use-info {
    font-size: 12px;
    color: #787878;
    letter-spacing: 1.3px;
    width: 100%;
    padding: 10px 0;
    display: block;
  }

  .mb-order-box {
    width: auto;
    padding: 0 25px;
  }
  .mb-order-box h3 {
    font-size: 16px;
  }
  .mb-order-box .load-more {
    width: auto;
    margin: 30px 0 0;
  }

  .filter-order {
    display: none;
  }

  .order-list {
    display: none;
  }

  .filter-date {
    width: 100%;
  }
  .filter-date input {
    margin: 0;
  }

  .m-order-filter .m-sel-btn {
    width: 80%;
  }

  .m-order-search .btn-filter {
    top: 13px;
  }

  .m-product-filter-panel.m-filter-date-panel {
    height: auto;
    padding: 40px 25px;
    bottom: 60px;
  }

  .m-order-list {
    display: block;
  }
  .m-order-list li {
    padding: 30px 0;
  }
  .m-order-list li:first-child {
    padding: 0 0 30px;
  }
  .m-order-list.m-order-line li {
    border-bottom: 1px solid #787878;
  }

  .order-date {
    font-weight: 400;
    margin: 0 0 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .order-status {
    font-size: 13px;
    color: #000;
    letter-spacing: 1.3px;
    font-weight: 400;
  }

  .order-number {
    font-size: 12px;
    margin: 0 0 12px;
  }
  .order-number a {
    font-family: "Roboto", sans-serif;
    font-size: 13px;
    color: #000;
    letter-spacing: 1px;
    border-bottom: 1px solid #000;
  }

  .order-total {
    font-family: "Roboto", sans-serif;
    font-size: 13px;
    color: #000;
    letter-spacing: 1px;
    font-weight: 500;
    margin: 0 0 12px;
  }

  .btn-order-status-box {
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row-reverse;
  }
  .btn-order-status-box .btn-basis {
    height: 40px;
    line-height: 40px;
    width: 47%;
  }

  .ask-tit .btn-gray {
    height: 40px;
    line-height: 40px;
    width: 47%;
  }

  .ask-box {
    padding: 20px 25px 1px 25px;
  }

  .ask-item-box {
    margin: 0 0 20px;
    width: 100%;
  }
  .ask-item-box.ask-item-box-r {
    margin: 0 0 20px;
    width: 100%;
  }

  .shipping-status p {
    font-size: 12px;
  }
  .shipping-status span {
    width: 10px;
    margin: 0 10px;
  }

  .order-item-box {
    margin: 0 0 60px;
  }

  .order-detail-view {
    font-size: 12px;
    padding: 0;
  }

  .order-item-ul li.tit {
    display: none;
  }
  .order-item-ul li {
    padding: 15px 0 0;
    flex-wrap: wrap;
  }

  .payment-list {
    padding: 0;
    margin: 0 0 10px;
    border: none;
  }
  .payment-list p {
    font-size: 13px;
  }
  .payment-list p.fw {
    font-weight: 500;
  }

  .get-bonus {
    font-size: 13px;
  }

  .od-num {
    width: 100%;
    order: 1;
    margin: 0 0 10px;
  }

  .od-tit {
    width: 80%;
    order: 2;
    margin: 0 0 10px;
  }

  .od-quantity {
    text-align: right;
    width: 20%;
    order: 3;
    margin: 0 0 10px;
  }
  .od-quantity span {
    font-size: 10px;
    display: inline-block;
    padding: 0 5px 0 0;
  }

  .od-ml {
    text-align: left;
    width: 50%;
    order: 4;
    margin: 0 0 10px;
  }

  .od-price {
    text-align: right;
    width: 50%;
    order: 5;
    padding: 0;
    margin: 0 0 10px;
  }

  .od-note {
    width: 100%;
    margin: 0 0 10px;
    order: 6;
  }
  .od-note span {
    margin: 0 0 15px;
  }

  .payment-detail {
    order: 1;
    margin: 15px 0 0;
  }

  .shipping-infor {
    width: 100%;
    border: none;
    padding: 15px 0 5px;
    margin: 15px 0;
    border-top: 1px solid #464646;
    border-bottom: 1px solid #464646;
    order: 2;
  }
  .shipping-infor h4 {
    font-size: 13px;
  }

  .payment-type {
    width: 100%;
    order: 3;
    padding: 0 0 10px;
  }
  .payment-type h4 {
    font-size: 13px;
  }

  .order-operate {
    padding: 15px 0;
    flex-wrap: wrap;
    align-items: flex-start;
    flex-direction: column-reverse;
  }
  .order-operate p {
    font-size: 12px;
    text-align: left;
    padding: 0 0 15px;
    border-bottom: 1px solid #464646;
    margin: 0 0 15px;
  }

  .order-cancel {
    font-size: 13px;
    width: 125px;
    height: 40px;
    line-height: 37px;
  }

  .order-fot {
    width: 100%;
    float: none;
  }
  .order-fot .btn-line-sty {
    width: 100%;
  }

  .cancel-box p {
    font-size: 13px;
    padding: 0;
    margin: 0;
    border: none;
  }

  .mb-replen-list {
    padding: 0;
  }
  .mb-replen-list h3 {
    font-size: 16px;
    padding: 0 25px;
  }

  .m-prod-horizontal-list li {
    margin: 0 0 15px;
  }

  .p-item-pic {
    width: 27%;
  }

  .p-item-group {
    width: 66%;
  }

  .p-item-num {
    font-size: 11px;
    margin: 0 0 17px;
  }

  .p-item-date {
    font-size: 11px;
    margin: 0 0 17px;
  }

  .p-item-name {
    margin: 0 0 17px;
  }

  .mb-product-list {
    width: auto;
    padding: 0 25px;
  }
  .mb-product-list .m-prod-price {
    display: block;
  }
  .mb-product-list .product-list-box .prod-img {
    width: 46.5%;
  }
  .mb-product-list .product-list-box .prod-img .prod-info h3 {
    margin: 0 0 13px;
  }

  .btn-exchange {
    font-size: 14px;
    height: 50px;
    line-height: 50px;
  }

  .notify-type a {
    font-size: 13px;
    letter-spacing: 1px;
    font-weight: 500;
  }

  .mb-notification-item-list li {
    padding: 25px;
    margin: 0 0 15px;
  }
  .mb-notification-item-list li.has-link {
    min-height: auto;
  }
  .mb-notification-item-list li.has-link .notify-cont {
    width: 100%;
    padding: 0;
  }
  .mb-notification-item-list li.has-link .btn-basis {
    display: none;
  }
  .mb-notification-item-list li.has-link .notify-cont-box .btn-basis {
    width: 100%;
    display: block;
    position: static;
  }
  .mb-notification-item-list .btn-basis.btn-gray {
    width: 100%;
  }
  .mb-notification-item-list .notify-date {
    font-size: 13px;
    letter-spacing: 1px;
  }
  .mb-notification-item-list .notify-date span {
    font-size: 12px;
  }
  .mb-notification-item-list h4 {
    font-size: 13px;
  }
  .mb-notification-item-list p {
    line-height: 1.65;
  }

  .notify-more {
    top: 22px;
  }

  .notify-bell {
    left: 25px;
  }

  .verify-line-group {
    padding: 100px 0 0;
  }

  .verify-info .mb-form .input-item-box.ww23 {
    width: 48.166%;
  }
  .verify-info .mb-form .input-item-box.m-ww50 {
    width: 31.866%;
  }
  .verify-info .mb-form .line-code-input input {
    width: calc(100% - 120px);
  }

  .line-qr {
    padding: 25px;
  }

  .bot-btn-val .radio-group {
    margin: 25px;
  }
}
@media screen and (max-width: 375px) {
  .data-cont span {
    width: 100%;
    display: block;
    margin: 0;
  }

  .mesg-box {
    right: 22px;
  }

  .coupon-item .mesg-box {
    width: 285px;
  }

  .notify-type {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 15px;
  }
  .notify-type a {
    font-size: 13px;
    margin: 0;
  }

  .filter-date input {
    width: 130px;
  }
}
@media screen and (max-width: 320px) {
  .data-list h4 {
    width: 70px;
  }

  .data-cont {
    width: calc(100% - 70px);
  }

  .mesg-box {
    font-size: 13px;
    width: 220px;
    padding: 30px 25px;
    right: 18px;
  }

  .input-item-box label {
    width: 60px;
    margin: 0 0 0 10px;
  }
  .input-item-box input {
    width: calc(100% - 70px);
  }

  .post-code-input input {
    width: 100%;
  }

  .mb-form .input-item-box .select-ui {
    background: #F4F2EF url(/img/icon_sel_down3.svg) no-repeat right 10px center/10px;
  }
  .mb-form .input-item-box .select-ui select {
    padding: 0 10px 0;
  }

  .change-pwd .bnt-eye {
    right: 2px;
  }

  .coupon-item .mesg-box {
    width: 230px;
  }

  .m-use-info {
    padding: 11px 22px 10px 0;
  }

  .p-item-num {
    margin: 0 0 10px;
  }

  .p-item-date {
    margin: 0 0 10px;
  }

  .p-item-name {
    margin: 0 0 10px;
  }

  .btn-del {
    width: 20px;
    height: 20px;
    background: url(/img/btn_del.svg) no-repeat center center/18px;
  }

  .notify-type a {
    font-size: 12px;
  }

  .notify-date {
    padding: 0 20px 0 30px;
  }

  .filter-date input {
    width: 125px;
    padding: 10px 8px;
    background: url(/img/icon_calendar.svg) no-repeat right 8px center/16px;
  }
  .filter-date span {
    width: 15px;
  }
}
.calculator-sty {
  background: #F4F2EF;
}

.calculator-group {
  width: 100%;
}

.cal-tit-group {
  padding: 150px 0 0;
  background: #6FA287;
}

.cal-tit-box {
  width: 1600px;
  padding: 160px 0 260px;
  margin: 0 auto;
}
.cal-tit-box h2 {
  font-family: "Roboto", sans-serif;
  font-size: 60px;
  color: #fff;
  letter-spacing: 0.5px;
  font-weight: 500;
}
.cal-tit-box h2 p {
  font-size: 20px;
  color: #fff;
  letter-spacing: 3px;
  margin: 15px 0 0;
}

.cal-cont-box {
  width: 1600px;
  padding: 0 0 160px;
  margin: -180px auto 0;
}
.cal-cont-box h3 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 0 0 45px;
}
.cal-cont-box span {
  font-size: 20px;
  color: #000;
  letter-spacing: 2.3px;
}
.cal-cont-box .select-act {
  height: 58px;
  line-height: 58px;
}
.cal-cont-box .select-ui ul {
  top: 59px;
}

.cal-num {
  font-size: 20px;
  color: #000;
  text-align: center;
  width: 50px;
  height: 50px;
  line-height: 50px;
  background: url(/img/num_bg.svg) no-repeat center center/cover;
  margin: 0 30px 0 0;
}

.cal-item-group {
  width: 100%;
  margin: 0 0 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cal-l {
  width: 72.813%;
  padding: 45px 80px;
  border-radius: 20px 0 0 20px;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cal-sel-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.cal-sel-item span {
  font-size: 15px;
  color: #000;
  letter-spacing: 1.5px;
  font-weight: 400;
}
.cal-sel-item .select-ui {
  width: 180px;
  margin: 0 0 0 20px;
}
.cal-sel-item .select-ui li {
  height: 60px;
  line-height: 60px;
}
.cal-sel-item input {
  font-size: 15px;
  color: #000;
  letter-spacing: 1.5px;
  width: 180px;
  height: 60px;
  padding: 0 25px;
  border: 1px solid #787878;
  margin: 0 0 0 20px;
}

.m-sel-item-box, .m-title, .m-cal-sel-item, .m-mix-result, .m-select-ui, .m-btn-c-add {
  display: none;
}

.cal-r {
  width: 27.187%;
  background: #507C65;
  border-radius: 0 20px 20px 0;
  padding: 45px 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cal-r span {
  color: #fff;
}
.cal-r input {
  color: #fff;
  background: rgba(200, 200, 200, 0.15);
  border: 1px solid #fff;
}
.cal-r input::-moz-placeholder {
  color: #fff;
}
.cal-r input::placeholder {
  color: #fff;
}

.cal-prop-group {
  width: 100%;
  margin: 0 0 45px;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}

.cal-ul {
  width: 72.813%;
  padding: 45px 80px;
  border-radius: 20px 0 0 20px;
  background: #fff;
}
.cal-ul li.title {
  font-size: 15px;
  color: #787878;
  letter-spacing: 1.5px;
  font-weight: 400;
  padding: 0 0 20px;
  border-bottom: 1px solid #787878;
}
.cal-ul li.m-title {
  display: none;
}
.cal-ul > li {
  padding: 45px 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 1px solid #C8C8C8;
}
.cal-ul > li:last-child {
  padding: 45px 0 0;
  border: none;
}
.cal-ul > li:last-child .m-title {
  color: #000;
}

.c-oit {
  width: 25%;
  margin: 0 2% 0 0;
}
.c-oit .select-ui {
  width: 100%;
}
.c-oit .select-ui li:first-child {
  height: auto;
  padding: 10px;
}
.c-oit .select-ui li:first-child:hover {
  background: none;
}
.c-oit .select-ui li:first-child input {
  font-size: 14px;
  letter-spacing: 2px;
  width: 100%;
  padding: 11px 8px;
  border-radius: 4px;
  border: 1px solid #C8C8C8;
}

.m-c-tit {
  display: none;
}

.c-oit-2 {
  width: 43%;
  margin: 0 2% 0 0;
}
.c-oit-2 .select-ui {
  width: 100%;
}

.c-proportion {
  width: 16%;
  margin: 0 2% 0 0;
}
.c-proportion .ui-quantity {
  font-size: 14px;
  width: 100%;
  height: 60px;
  line-height: 60px;
  border: 1px solid #787878;
}
.c-proportion .btn-quantity {
  width: 58px;
  height: 58px;
  line-height: 63px;
}

.c-total {
  width: 34.6%;
}

.c-total-2 {
  width: 52%;
  margin: 0 0 0 0.5%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.c-total-2 .cal-sel-item {
  margin: 0 35px 0 0;
}
.c-total-2 .cal-sel-item input:disabled {
  width: 150px;
  background: rgba(200, 200, 200, 0.15);
}
.c-total-2 .cal-sel-item:last-child {
  margin: 0;
}

.c-add {
  width: 20%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.btn-c-add {
  color: #464646;
  width: 117px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.btn-c-add:hover .icon-add-oil {
  background: #464646 url(/img/icon_oil_add_on.svg) no-repeat center center;
}

.icon-add-oil {
  width: 25px;
  height: 25px;
  border-radius: 100px;
  border: 1px solid #464646;
  background: url(/img/icon_oil_add.svg) no-repeat center center;
  transition: 0.4s;
}

.c-del {
  width: 16px;
  height: 16px;
  background: url(/img/icon_c_del.svg) no-repeat center center;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.c-del:hover {
  background: url(/img/icon_c_del_on.svg) no-repeat center center;
}

.cal-result-prod {
  width: 27.187%;
  padding: 45px 60px;
  border-radius: 0 20px 20px 0;
  background: #507C65;
}
.cal-result-prod p {
  color: #fff;
  font-size: 14px;
  text-align: center;
  font-weight: 400;
  letter-spacing: 1.5px;
  padding: 0 0 15px;
  border-bottom: 1px solid #fff;
}
.cal-result-prod li {
  padding: 45px 0;
  border-bottom: 1px solid #7FA692;
}

.cal-link {
  font-size: 15px;
  color: #fff;
  letter-spacing: 1.5px;
  text-align: center;
  font-weight: 400;
  width: 250px;
  height: 60px;
  line-height: 60px;
  border: 1px solid #fff;
  display: block;
  margin: 0 auto;
  transition: 0.4s;
}
.cal-link:hover {
  color: #000;
  background: #fff;
}

.cal-note {
  font-size: 14px;
  color: #6FA287;
  letter-spacing: 1.6px;
  font-weight: 400;
  margin: 0 0 0 80px;
}
.cal-note li {
  margin: 0 0 8px;
}

@media screen and (max-width: 1800px) {
  .cal-ul .select-act {
    font-size: 14px;
  }

  .cal-tit-box {
    width: auto;
    margin: 0 9%;
  }

  .cal-cont-box {
    width: auto;
    margin: -180px 9% 0;
  }

  .cal-sel-item .select-ui {
    width: 150px;
  }
  .cal-sel-item input {
    width: 150px;
  }

  .cal-r input {
    width: 133px;
  }

  .c-total-2 .cal-sel-item {
    margin: 0 15px 0 0;
  }
  .c-total-2 .cal-sel-item input:disabled {
    width: 120px;
  }
}
@media screen and (max-width: 1600px) {
  .cal-cont-box .select-act {
    font-size: 14px;
  }
  .cal-cont-box .select-ui {
    font-size: 14px;
  }
  .cal-cont-box .select-ui:hover ul {
    top: 59px;
  }

  .cal-tit-group {
    padding: 110px 0 0;
  }

  .cal-sel-item .select-ui {
    margin: 0 0 0 10px;
  }
  .cal-sel-item span {
    font-size: 14px;
  }
  .cal-sel-item input {
    font-size: 14px;
    width: 120px;
    margin: 0 0 0 8px;
  }
  .cal-sel-item .select-ui {
    width: 160px;
  }

  .cal-l {
    padding: 45px;
  }

  .cal-r {
    padding: 40px 45px;
  }

  .cal-ul {
    padding: 45px;
  }

  .cal-result-prod {
    padding: 45px;
  }

  .cal-sel-item input {
    width: 100px;
  }

  .c-total-2 .cal-sel-item input:disabled {
    width: 65%;
  }

  .cal-link.cal-result-prod {
    font-size: 14px;
    width: 100%;
  }
}
@media screen and (max-width: 1400px) {
  .cal-tit-group {
    padding: 100px 0 0;
  }

  .cal-tit-box {
    padding: 140px 0 240px;
  }

  .cal-num {
    font-size: 18px;
  }

  .cal-cont-box {
    margin: -150px 9% 0;
  }
  .cal-cont-box h3 {
    margin: 0 0 30px;
  }

  .cal-sel-item .select-ui {
    width: 135px;
    margin: 0 0 0 10px;
  }
  .cal-sel-item .select-act {
    padding: 0 15px;
  }
  .cal-sel-item input {
    width: 80px;
  }

  .cal-l {
    padding: 30px 45px;
  }

  .cal-r {
    width: 27.287%;
    padding: 30px 45px;
  }

  .cal-prop-group {
    margin: 0 0 25px;
  }

  .cal-ul {
    padding: 30px 45px;
  }
  .cal-ul li.title {
    padding: 0 0 15px;
  }
  .cal-ul > li {
    padding: 30px 0;
  }
  .cal-ul > li:last-child {
    padding: 30px 0 0;
  }

  .cal-result-prod {
    padding: 35px 45px 30px;
  }
  .cal-result-prod p {
    padding: 0 0 15px;
  }
  .cal-result-prod li {
    padding: 30px 0;
  }

  .cal-link {
    width: 100%;
  }

  .cal-note {
    margin: 0 0 0 30px;
  }

  .c-total-2 .cal-sel-item input:disabled {
    width: 100px;
  }
}
@media screen and (max-width: 1200px) {
  .cal-tit-group {
    padding: 100px 0 0;
  }

  .cal-tit-box {
    padding: 120px 0 200px;
  }
  .cal-tit-box h2 {
    font-size: 50px;
  }
  .cal-tit-box h2 p {
    font-size: 20px;
    margin: 10px 0 0;
  }

  .cal-num {
    width: 44px;
    height: 44px;
    line-height: 44px;
    margin: 0 20px 0 0;
  }

  .cal-cont-box {
    margin: -135px 9% 0;
  }
  .cal-cont-box span {
    font-size: 18px;
  }
  .cal-cont-box .select-ui {
    font-size: 13px;
  }
  .cal-cont-box .select-ui li {
    padding: 0 10px;
  }
  .cal-cont-box .select-ui:hover ul {
    top: 53px;
  }

  .cal-l {
    padding: 30px;
  }

  .cal-r {
    padding: 30px;
  }

  .cal-ul {
    padding: 30px;
  }

  .cal-sel-item span {
    font-size: 13px;
  }
  .cal-sel-item .select-act {
    font-size: 13px;
    height: 52px;
    line-height: 52px;
  }
  .cal-sel-item .select-ui {
    width: 100px;
    background: url(/img/select_down.svg) no-repeat right 10px center/10px;
  }
  .cal-sel-item input {
    font-size: 13px;
    width: 70px;
    height: 54px;
    padding: 0 15px;
  }

  .select-ui ul {
    top: 53px;
  }

  .c-total-2 .cal-sel-item input:disabled {
    width: 70px;
  }

  .c-proportion .ui-quantity {
    height: 54px;
  }

  .cal-ul li.title {
    font-size: 14px;
  }

  .c-oit .select-act {
    font-size: 13px;
    padding: 0 15px;
    height: 52px;
    line-height: 52px;
  }

  .c-oit-2 .select-act {
    font-size: 13px;
    padding: 0 15px;
    height: 52px;
    line-height: 52px;
  }

  .cal-result-prod {
    padding: 35px 30px 30px;
  }
  .cal-result-prod p {
    padding: 0 0 15px;
  }

  .quantity-val {
    font-size: 13px;
  }

  .cal-link {
    font-size: 13px;
    height: 54px;
    line-height: 54px;
  }
}
@media screen and (max-width: 1023px) {
  .m-sel-item-box {
    width: 100%;
    height: 100%;
    padding: 0 25px;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    display: block;
    visibility: hidden;
    opacity: 0;
    transition: 0.4s ease-out;
  }
  .m-sel-item-box.on {
    visibility: visible;
    opacity: 1;
  }

  .m-select-item {
    height: 80%;
    background: #fff;
    padding: 25px;
    margin: 100px 0 0;
    border-radius: 4px;
    position: relative;
  }

  .m-close-select-item {
    width: 15px;
    height: 15px;
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 1;
  }
  .m-close-select-item img {
    width: 100%;
  }

  .m-search-item {
    width: 100%;
    border-bottom: 1px solid #464646;
    margin: 30px 0 0;
    padding: 0 0 5px;
    position: relative;
  }
  .m-search-item input[type=text] {
    font-size: 13px;
    letter-spacing: 1.3px;
    width: 100%;
    height: 36px;
  }
  .m-search-item input[type=submit] {
    width: 24px;
    height: 24px;
    background: url(/img/icon_search_b.svg) no-repeat center center;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
  }
  .m-search-item input[type=submit]::-moz-placeholder {
    color: #C8C8C8;
  }
  .m-search-item input[type=submit]::placeholder {
    color: #C8C8C8;
  }

  .m-select-item-list {
    width: 100%;
    height: calc(100% - 87px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  .m-select-item-list li {
    font-size: 13px;
    color: #000;
    letter-spacing: 1.3px;
    font-weight: 400;
    padding: 15px 0;
    border-bottom: 1px solid #C8C8C8;
  }

  .cal-item-group {
    flex-wrap: wrap;
  }

  .cal-l {
    width: 100%;
    padding: 10px 30px 20px;
    border-radius: 20px 20px 0 0;
    flex-wrap: wrap;
  }
  .cal-l .m-cal-sel-item:last-child {
    padding: 20px 0 0;
    border: none;
  }

  .m-cal-sel-item .select-act {
    height: 52px;
    line-height: 52px;
    padding: 0 15px;
  }

  .cal-r {
    width: 100%;
    padding: 10px 30px;
    border-radius: 0 0 20px 20px;
  }
  .cal-r .m-cal-sel-item {
    border: none;
  }
  .cal-r .m-cal-sel-item span {
    color: #fff;
  }
  .cal-r .m-cal-sel-item input {
    border: 1px solid #fff;
  }
  .cal-r .m-cal-sel-item a {
    font-size: 14px;
    color: #fff;
    letter-spacing: 1px;
    font-weight: 400;
    text-align: center;
    width: 80%;
    line-height: 50px;
    background: rgba(200, 200, 200, 0.15);
    border: 1px solid #fff;
    display: block;
  }

  .cal-sel-item {
    display: none;
  }

  .cal-prop-group {
    flex-wrap: wrap;
  }

  .cal-ul {
    width: 100%;
    background: none;
    padding: 0;
  }
  .cal-ul li.title {
    display: none;
  }
  .cal-ul > li {
    background: #fff;
    padding: 30px 30px 0;
    border-radius: 20px;
    border: none;
    margin: 0 0 30px;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
  }
  .cal-ul > li:last-child {
    padding: 30px 30px 5px 30px;
    margin: 100px 0 30px;
    overflow: unset;
  }

  .m-title {
    font-size: 14px;
    color: #787878;
    letter-spacing: 1.3px;
    font-weight: 400;
    width: 100%;
    padding: 0 0 20px;
    border-bottom: 1px solid #787878;
    display: block;
  }

  .m-c-tit {
    font-size: 14px;
    color: #000;
    font-weight: 400;
    letter-spacing: 1.5px;
    display: block;
  }

  .m-mix-result {
    display: block;
    background: #507C65;
    width: calc(100% + 60px);
    margin: 0 -30px;
    padding: 30px;
  }
  .m-mix-result .m-cal-sel-item {
    padding: 0;
    border: none;
  }
  .m-mix-result span {
    color: #fff;
  }
  .m-mix-result a {
    font-size: 14px;
    color: #fff;
    letter-spacing: 1.4px;
    text-align: center;
    font-weight: 400;
    width: 80%;
    line-height: 60px;
    border: 1px solid #fff;
    display: block;
  }

  .c-oit {
    width: 100%;
    margin: 0;
    padding: 20px 0;
    border-bottom: 1px solid #C8C8C8;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .c-oit .select-ui {
    display: none;
  }
  .c-oit .select-ui.m-select-ui {
    width: 80%;
    display: block;
    cursor: pointer;
  }

  .c-oit-2 {
    width: 100%;
    margin: 0;
    padding: 20px 0;
    border-bottom: 1px solid #C8C8C8;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .c-oit-2 .select-ui {
    display: none;
  }
  .c-oit-2 .select-ui.m-select-ui {
    width: 80%;
    display: block;
    cursor: pointer;
  }

  .c-proportion {
    width: 100%;
    margin: 0;
    padding: 20px 0;
    border-bottom: 1px solid #C8C8C8;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .c-proportion .ui-quantity {
    width: 80%;
  }
  .c-proportion .btn-quantity {
    width: 52px;
    height: 52px;
    line-height: 52px;
  }

  .c-total-2 {
    width: 100%;
    flex-wrap: wrap;
  }
  .c-total-2 .cal-sel-item {
    width: 100%;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #C8C8C8;
  }
  .c-total-2 .cal-sel-item input:disabled {
    width: 80%;
  }
  .c-total-2 .cal-sel-item:last-child {
    border: none;
  }

  .c-del {
    position: absolute;
    right: 25px;
    top: 28px;
    z-index: 1;
  }

  .cal-result-prod {
    width: 100%;
    border-radius: 0 0 20px 20px;
  }

  .m-cal-sel-item {
    width: 100%;
    padding: 20px 0;
    border-bottom: 1px solid #C8C8C8;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .m-cal-sel-item span {
    font-size: 14px;
    font-weight: 400;
  }
  .m-cal-sel-item .select-ui {
    width: 80%;
    display: block;
    cursor: pointer;
  }
  .m-cal-sel-item input {
    width: 70%;
    font-size: 14px;
    color: #000;
    letter-spacing: 1.5px;
    height: 52px;
    padding: 0 15px;
    border: 1px solid #787878;
    margin: 0;
  }

  .cal-result-prod {
    display: none;
  }

  .cal-note {
    margin: 0;
  }

  .m-btn-c-add {
    width: 50px;
    height: 50px;
    position: absolute;
    top: -80px;
    right: 0;
    z-index: 1;
  }
  .m-btn-c-add img {
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .cal-tit-group {
    padding: 80px 0 0;
  }

  .cal-tit-box {
    width: auto;
    padding: 100px 25px 240px;
    margin: 0;
  }

  .cal-num {
    font-size: 16px;
    width: 40px;
    height: 40px;
    line-height: 40px;
  }

  .cal-cont-box {
    width: auto;
    padding: 0 25px 120px;
    margin: -135px auto 0;
  }
  .cal-cont-box span {
    font-size: 16px;
    letter-spacing: 1.6px;
  }
  .cal-cont-box h3 {
    margin: 0 0 20px;
  }
  .cal-cont-box h3 span {
    width: calc(100% - 60px);
  }

  .cal-l {
    padding: 10px 25px 20px;
  }

  .m-cal-sel-item span {
    font-size: 13px;
  }
  .m-cal-sel-item .select-act {
    height: 60px;
    line-height: 60px;
    padding: 0 25px;
  }
  .m-cal-sel-item .select-ui {
    width: 70%;
  }
  .m-cal-sel-item input {
    width: 55%;
    height: 60px;
    padding: 0 25px;
  }

  .cal-r .m-cal-sel-item input {
    width: 65%;
  }

  .cal-ul > li {
    padding: 30px 25px 0;
  }
  .cal-ul > li:last-child {
    margin: 90px 0 25px;
  }

  .m-title {
    font-size: 13px;
  }

  .m-c-tit {
    font-size: 13px;
  }

  .c-total-2 .cal-sel-item span {
    font-size: 13px;
    letter-spacing: 1.5px;
  }
  .c-total-2 .cal-sel-item input:disabled {
    width: 70%;
    height: 60px;
    padding: 0 25px;
  }

  .c-oit .select-act {
    height: 60px;
    padding: 0 25px;
    line-height: 60px;
  }
  .c-oit .select-ui.m-select-ui {
    width: 70%;
  }

  .c-oit-2 .select-ui.m-select-ui {
    width: 70%;
  }
  .c-oit-2 .select-act {
    height: 60px;
    line-height: 60px;
    padding: 0 25px;
  }

  .c-proportion .ui-quantity {
    width: 70%;
    height: 60px;
  }
  .c-proportion .btn-quantity {
    width: 58px;
    height: 58px;
    line-height: 58px;
  }

  .m-mix-result a {
    font-size: 13px;
    width: 70%;
  }

  .cal-note {
    font-size: 13px;
  }
  .cal-note li {
    margin: 0 0 10px;
  }

  .m-btn-c-add {
    width: 40px;
    height: 40px;
    top: -70px;
    right: 25px;
  }
}
@media screen and (max-width: 375px) {
  .cal-cont-box h3 span {
    width: 58%;
  }
}
@media screen and (max-width: 320px) {
  .cal-cont-box h3 span {
    width: 67%;
  }
}
.support-top {
  background: #F1EBDF;
  padding: 150px 0 1px;
}
.support-top h2 {
  font-family: "Roboto", sans-serif;
  font-size: 60px;
  color: #000;
  letter-spacing: 0.5px;
  font-weight: 500;
  text-align: center;
  margin: 180px auto 95px;
}
.support-top h2 p {
  font-size: 24px;
  color: #000;
  letter-spacing: 3px;
  margin: 20px 0 0;
}

.support-search {
  width: 630px;
  border-bottom: 1px solid #787878;
  padding: 0 0 5px;
  margin: 0 auto 80px;
  position: relative;
}
.support-search input[type=text] {
  font-size: 20px;
  color: #000;
  letter-spacing: 2.5px;
  width: 100%;
  height: 40px;
  background: none;
  padding: 10px 10px 10px 0;
}
.support-search input[type=text]::-moz-placeholder {
  color: #D3CCBD;
}
.support-search input[type=text]::placeholder {
  color: #D3CCBD;
}
.support-search input[type=submit] {
  width: 28px;
  height: 28px;
  background: url(/img/icon_search_b.svg) no-repeat center center;
  position: absolute;
  right: 0;
  top: 4px;
  z-index: 1;
  cursor: pointer;
}

.support-type {
  text-align: center;
  width: 100%;
  margin: 0 auto;
  border-bottom: 1px solid #787878;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
}
.support-type .swiper-wrapper {
  text-align: center;
  width: auto;
}
.support-type .swiper-slide {
  width: auto;
  display: inline-block;
}
.support-type a {
  font-size: 20px;
  letter-spacing: 3px;
  color: #787878;
  font-weight: 400;
  border-bottom: 2px solid transparent;
  padding: 30px 40px;
  position: relative;
  bottom: -1px;
  display: block;
  transition: 0.4s;
}
.support-type a:hover {
  color: #000;
  border-bottom: 2px solid #000;
}
.support-type a.act {
  color: #000;
  border-bottom: 2px solid #000;
}

.support-sub-type {
  text-align: center;
  width: 100%;
  height: 20px;
  line-height: 20px;
  margin: 30px 0;
  overflow: hidden;
}

.support-type-group {
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  flex-wrap: nowrap;
}
.support-type-group a {
  font-size: 15px;
  letter-spacing: 1.8px;
  color: #787878;
  font-weight: 400;
  border-right: 1px solid #787878;
  padding: 0 30px;
  display: block;
  transition: 0.4s;
}
.support-type-group a:hover {
  color: #000;
}
.support-type-group a.act {
  color: #000;
}
.support-type-group a:nth-last-child(1) {
  border-right: none;
}

.support-group-cont .swiper-slide {
  width: auto;
}

.support-group-box {
  background: #F4F2EF;
}

.support-box {
  width: 1080px;
  padding: 120px 0 160px;
  margin: 0 auto;
}
.support-box > h3 {
  font-size: 20px;
  color: #000;
  letter-spacing: 2.5px;
  font-weight: 400;
  margin: 60px 0 25px;
}
.support-box .mb-notification-item-list li {
  padding: 50px 115px;
}
.support-box .mb-notification-item-list h4 {
  font-size: 18px;
  color: #000;
  letter-spacing: 1.8px;
}
.support-box .mb-notification-item-list p {
  font-size: 14px;
}
.support-box .notify-bell {
  width: 20px;
  height: 25px;
  top: 50px;
  left: 50px;
}
.support-box .notify-more {
  top: 50px;
  right: 50px;
}
.support-box .notify-date span {
  font-family: "Roboto", sans-serif;
  font-size: 14px;
}

.support-list-item > li {
  background: #fff;
  margin: 0 0 25px;
}
.support-list-item > li.open .support-tit {
  border-bottom: 1px solid #C8C8C8;
}
.support-list-item > li.open .icon-unfold {
  transform: translateY(-50%) rotate(180deg);
}
.support-list-item.no-num .support-tit {
  padding: 48px 100px;
  border-bottom: 1px solid #C8C8C8;
}
.support-list-item.no-num .support-desc {
  height: 0;
}
.support-list-item.no-num .support-desc-h {
  padding: 50px 100px;
}

.support-tit {
  padding: 35px 50px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  cursor: pointer;
}
.support-tit h3 {
  font-size: 18px;
  color: #000;
  letter-spacing: 1.8px;
  pointer-events: none;
}
.support-tit .icon-unfold {
  top: 50%;
  right: 50px;
  transform: translateY(-50%);
}

.sup-num {
  font-family: "Work Sans", sans-serif;
  font-size: 24px;
  color: #000;
  letter-spacing: 0px;
  text-align: center;
  pointer-events: none;
  width: 50px;
  height: 50px;
  line-height: 50px;
  margin: 0 35px 0 0;
  background: url(/img/num_bg.svg) no-repeat center center/cover;
}

.support-desc {
  height: 0;
  overflow: hidden;
  transition: 0.4s ease-out;
}

.support-desc-h {
  padding: 50px 135px;
}
.support-desc-h h1 {
  font-size: 22px;
  color: #000;
  letter-spacing: 2px;
  font-weight: 500;
  margin: 0 0 20px;
}
.support-desc-h h2 {
  font-size: 18px;
  color: #000;
  letter-spacing: 1.8px;
  font-weight: 500;
  margin: 0 0 15px;
}
.support-desc-h h3 {
  font-size: 15px;
  color: #000;
  letter-spacing: 1.5px;
  font-weight: 500;
  margin: 0 0 10px;
}
.support-desc-h h4 {
  font-size: 14px;
  color: #000;
  letter-spacing: 1.4px;
  margin: 0 0 10px;
}
.support-desc-h h5 {
  font-size: 13px;
  color: #000;
  letter-spacing: 1.3px;
  font-weight: 300;
  line-height: 1.8;
}
.support-desc-h h6 {
  font-size: 12px;
  color: #000;
  letter-spacing: 1.2px;
}
.support-desc-h strong {
  font-weight: 600;
}
.support-desc-h p {
  font-size: 15px;
  color: #000;
  letter-spacing: 1.5px;
  font-weight: 300;
  line-height: 1.8;
  margin: 0 0 20px;
}
.support-desc-h p:last-child {
  margin: 0;
}
.support-desc-h img {
  max-width: 100%;
  margin: 0 0 50px;
}
.support-desc-h ol {
  list-style-type: decimal;
  padding: 0 0 0 15px;
  margin: 0 0 20px;
}
.support-desc-h ol li {
  margin: 0 0 10px;
}
.support-desc-h ul {
  list-style-type: disc;
  padding: 0 0 0 15px;
  margin: 0 0 20px;
}
.support-desc-h ul li {
  margin: 0 0 10px;
}

.support-search-top {
  padding: 180px 0 100px;
}
.support-search-top .support-search {
  margin: 0 auto 15px;
}

.search-keyword-box {
  font-size: 14px;
  color: #787878;
  letter-spacing: 1.4px;
  font-weight: 400;
  width: 630px;
  margin: 0 auto;
}
.search-keyword-box span {
  color: #E75700;
}

.search-type {
  border-bottom: 1px solid #787878;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 0 0 60px;
}
.search-type a {
  font-size: 20px;
  color: #787878;
  letter-spacing: 2.5px;
  font-weight: 400;
  margin: 0 50px 0 0;
  padding: 0 0 25px;
  border-bottom: 2px solid transparent;
  display: block;
  position: relative;
  bottom: -1px;
  transition: 0.4s ease-out;
}
.search-type a:hover {
  color: #000;
  border-bottom: 2px solid #000;
}
.search-type a.act {
  color: #000;
  border-bottom: 2px solid #000;
}

@media screen and (max-width: 1800px) {
  .support-search-top {
    padding: 140px 0 100px;
  }
}
@media screen and (max-width: 1600px) {
  .support-top {
    padding: 110px 0 1px;
  }
  .support-top h2 {
    font-size: 55px;
  }
  .support-top h2 p {
    font-size: 20px;
  }

  .support-search-top {
    padding: 120px 0 100px;
  }

  .support-search {
    width: 560px;
  }
  .support-search input[type=text] {
    font-size: 18px;
  }

  .support-box {
    width: 880px;
  }
  .support-box > h3 {
    font-size: 16px;
  }

  .support-type a {
    font-size: 16px;
    padding: 20px 30px;
  }

  .support-tit h3 {
    font-size: 17px;
  }

  .support-desc-h p {
    font-size: 14px;
  }
}
@media screen and (max-width: 1400px) {
  .support-top {
    padding: 100px 0 1px;
  }

  .support-box {
    width: 680px;
    padding: 120px 0;
  }

  .support-search-top {
    padding: 120px 25px 100px;
  }

  .support-search input[type=text] {
    font-size: 16px;
  }

  .support-sub-type {
    margin: 20px 0;
  }

  .support-type-group a {
    font-size: 14px;
    padding: 0 20px;
  }

  .support-tit h3 {
    font-size: 16px;
  }
}
@media screen and (max-width: 1200px) {
  .support-top h2 {
    font-size: 50px;
  }
  .support-top h2 p {
    font-size: 18px;
  }

  .support-search-top {
    padding: 100px 25px 80px;
  }

  .support-search {
    width: 520px;
  }

  .support-type a {
    font-size: 15px;
    padding: 20px;
  }

  .support-type-group a {
    font-size: 13px;
    padding: 0 10px;
  }

  .support-box > h3 {
    font-size: 15px;
    margin: 40px 0 25px;
  }

  .search-type {
    margin: 0 0 40px;
  }
  .search-type a {
    font-size: 18px;
    margin: 0 40px 0 0;
    padding: 0 0 20px;
  }

  .support-list-item.no-num .support-tit {
    padding: 43px 50px;
  }
  .support-list-item.no-num .support-desc-h {
    padding: 43px 50px;
  }
}
@media screen and (max-width: 1023px) {
  .support-top h2 {
    margin: 140px auto 55px;
  }
  .support-top h2 p {
    margin: 15px 0 0;
  }

  .support-search-top {
    padding: 100px 0 60px;
  }

  .support-search {
    width: 470px;
    margin: 0 auto 60px;
  }
  .support-search input[type=text] {
    font-size: 15px;
  }

  .search-keyword-box {
    font-size: 13px;
    width: 80%;
    margin: 0 auto;
  }

  .support-type a {
    font-size: 14px;
    letter-spacing: 2.5px;
    padding: 15px;
  }

  .support-sub-type {
    height: 15px;
    line-height: 15px;
  }

  .support-box {
    width: 580px;
  }
  .support-box > h3 {
    font-size: 14px;
  }
  .support-box .mb-notification-item-list h4 {
    font-size: 16px;
  }

  .support-tit {
    padding: 25px 40px;
  }
  .support-tit h3 {
    font-size: 15px;
  }

  .sup-num {
    font-size: 20px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    margin: 0 25px 0 0;
  }

  .support-desc-h {
    padding: 40px 105px;
  }
  .support-desc-h p {
    font-size: 13px;
  }

  .search-type a {
    font-size: 16px;
    margin: 0 30px 0 0;
    padding: 0 0 15px;
  }
}
@media screen and (max-width: 767px) {
  .support-top {
    padding: 80px 0 1px;
  }
  .support-top h2 {
    font-size: 45px;
    margin: 100px auto 60px;
  }
  .support-top h2 p {
    font-size: 16px;
  }

  .support-search {
    width: auto;
    padding: 0;
    margin: 0 25px 40px;
  }
  .support-search input[type=text] {
    letter-spacing: 1.8px;
  }
  .support-search input[type=submit] {
    width: 22px;
    height: 22px;
    background: url(/img/icon_search_b.svg) no-repeat center center/cover;
    top: 7px;
  }

  .support-search-top .support-search {
    width: auto;
    margin: 0 25px 15px;
  }

  .search-keyword-box {
    width: auto;
    padding: 0;
    margin: 0 25px 40px;
  }

  .support-type {
    width: auto;
    margin: 0 25px;
    padding: 0 60px 0 0;
    position: relative;
  }
  .support-type a {
    font-size: 15px;
    padding: 10px 0;
  }
  .support-type::after {
    content: "";
    display: block;
    height: 100%;
    width: 100px;
    position: absolute;
    top: 0;
    right: -25px;
    z-index: 4;
    background-image: linear-gradient(to right, rgba(241, 235, 223, 0), #f1ebdf);
  }

  .support-sub-type {
    position: relative;
  }
  .support-sub-type::after {
    content: "";
    display: block;
    height: 100%;
    width: 100px;
    position: absolute;
    top: 0;
    right: -25px;
    z-index: 4;
    background-image: linear-gradient(to right, rgba(241, 235, 223, 0), #f1ebdf);
  }

  .support-type-group {
    margin: 0 0 0 25px;
  }
  .support-type-group a {
    font-size: 13px;
    padding: 0 30px 0 0;
  }

  .support-box {
    width: auto;
    padding: 80px 25px 100px;
  }

  .sup-num {
    font-size: 16px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    margin: 0 16px 0 0;
  }

  .support-tit {
    padding: 20px 0;
    margin: 0 25px;
  }
  .support-tit h3 {
    font-size: 14px;
    letter-spacing: 1.5px;
  }
  .support-tit .icon-unfold {
    width: 14px;
    height: 10px;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
  }

  .support-list-item.no-num .support-tit {
    padding: 26px 0;
  }
  .support-list-item.no-num .support-desc-h {
    padding: 25px;
  }

  .support-box .mb-notification-item-list h4 {
    font-size: 13px;
  }
  .support-box .mb-notification-item-list li {
    padding: 20px 25px;
  }
  .support-box .mb-notification-item-list p {
    font-size: 12px;
    line-height: 1.66;
  }
  .support-box .notify-more {
    width: 14px;
    height: 10px;
    top: 25px;
    right: 25px;
  }
  .support-box .notify-bell {
    pointer-events: none;
    width: 18px;
    height: 22px;
    top: 25px;
    left: 25px;
  }
  .support-box .notify-date {
    padding: 5px 0 0 30px;
    margin: 0 0 12px;
  }
  .support-box .notify-date span {
    font-size: 12px;
    letter-spacing: 0.46px;
  }

  .support-desc-h {
    padding: 25px;
  }
  .support-desc-h p {
    letter-spacing: 1px;
    line-height: 1.8;
    margin: 0 0 15px;
  }
  .support-desc-h img {
    margin: 0 0 15px;
  }
  .support-desc-h li {
    font-size: 13px;
  }
  .support-desc-h h1 {
    font-size: 18px;
  }
  .support-desc-h h2 {
    font-size: 16px;
  }
  .support-desc-h h3 {
    font-size: 13px;
  }
  .support-desc-h h4 {
    font-size: 12px;
  }
  .support-desc-h h5 {
    font-size: 10px;
  }
  .support-desc-h h6 {
    font-size: 10px;
  }

  .search-type {
    margin: 0 0 50px;
  }
  .search-type a {
    font-size: 15px;
    letter-spacing: 1.8px;
    padding: 0 0 18px;
    margin: 0 20px 0 0;
  }

  .support-box > h3 {
    font-size: 15px;
    margin: 50px 0 15px;
  }

  .support-list-item > li {
    margin: 0 0 15px;
  }
}
@media screen and (max-width: 375px) {
  .search-type {
    margin: 0 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .search-type a {
    font-size: 13px;
    margin: 0;
  }

  .support-box > h3 {
    margin: 40px 0 15px;
  }
}
.blm-sty {
  background: #F4F2EF;
}

.blm-top {
  background: #EFC385;
  padding: 150px 0 1px;
}
.blm-top h2 {
  font-family: "Roboto", sans-serif;
  font-size: 60px;
  color: #000;
  letter-spacing: 0.5px;
  font-weight: 500;
  text-align: center;
  margin: 180px auto;
}
.blm-top h2 p {
  font-size: 24px;
  color: #000;
  letter-spacing: 3px;
  margin: 20px 0 0;
}

.blm-group-box {
  width: 1600px;
  padding: 160px 0 0;
  margin: 0 auto 80px;
}
.blm-group-box h3 {
  font-family: "Roboto", sans-serif;
  font-size: 60px;
  color: #000;
  letter-spacing: 0.4px;
  font-weight: 500;
}
.blm-group-box h3 p {
  font-size: 20px;
  color: #000;
  letter-spacing: 3px;
  margin: 10px 0 0;
}

.blm-tit-group {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: 0 0 80px;
}
.blm-tit-group .search-keyword-box {
  font-weight: 400;
  width: 100%;
  margin: 20px 0 0;
}

.m-article-filter-box {
  display: none;
}

.m-article-search-box {
  display: none;
}

.article-type-filter {
  font-size: 15px;
  color: #000;
  letter-spacing: 2px;
  font-weight: 400;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.article-type-filter ul {
  width: 200px;
  background: #fff;
  position: absolute;
  top: 51px;
  left: 0;
  z-index: 1;
  display: none;
}
.article-type-filter a {
  font-size: 14px;
  color: #000;
  letter-spacing: 1.5px;
  padding: 15px;
  display: block;
}
.article-type-filter a:hover {
  background: #ECE2CE;
}
.article-type-filter a.act {
  background: #ECE2CE;
}

.m-article-type-filter {
  display: none;
}

.article-type-group {
  position: relative;
  z-index: 3;
}
.article-type-group:hover .type-act {
  border-bottom: 2px solid #000;
}
.article-type-group:hover ul {
  display: block;
}
.article-type-group:hover .article-radio-ui {
  display: block;
}

.type-act {
  padding: 15px 30px 15px 0;
  position: relative;
  cursor: pointer;
  z-index: 2;
}
.type-act:hover .icon-down {
  transform: translate(0, -50%) rotate(180deg);
}

.icon-down {
  width: 13px;
  height: 13px;
  background: url(/img/icon_sel_down.svg) no-repeat right center;
  position: absolute;
  right: 0;
  top: 50%;
  z-index: 1;
  transform: translate(0, -50%);
}

.article-search {
  width: 242px;
  margin: 0 0 0 40px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.article-search form {
  display: block;
  position: relative;
}
.article-search input[type=text] {
  font-size: 14px;
  letter-spacing: 2px;
  line-height: 1;
  width: 240px;
  height: 50px;
  background: none;
  padding: 0 25px;
  border-radius: 4px;
  border: 1px solid #C8C8C8;
}
.article-search input[type=text]::-moz-placeholder {
  color: #787878;
}
.article-search input[type=text]::placeholder {
  color: #787878;
}
.article-search input[type=submit] {
  width: 24px;
  height: 24px;
  background: url(/img/icon_filter_search.svg) no-repeat center center;
  position: absolute;
  top: 13px;
  right: 15px;
  cursor: pointer;
}

.date-type {
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  color: #000;
  letter-spacing: 2.5px;
  font-weight: 400;
  margin: 0 0 25px;
}
.date-type span {
  padding: 0 10px;
}
.date-type span:first-child {
  border-right: 1px solid #000;
  padding: 0 10px 0 0;
}

.blm-main-group {
  max-width: 1920px;
  padding: 0 0 0 0;
  margin: 0 auto 160px;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  align-content: center;
}

.main-item {
  width: 40.6%;
  background: #fff;
  display: block;
}
.main-item h3 {
  font-weight: 500;
}

.article-sub-item {
  width: 44.3%;
  margin: 0 160px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  align-content: space-between;
}

.article-img {
  width: 100%;
  padding-bottom: 62.2%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.article-info {
  background: #fff;
  padding: 50px 110px 50px 160px;
}
.article-info h3 {
  font-size: 30px;
  color: #000;
  letter-spacing: 3px;
  line-height: 1.6;
  margin: 0 0 77px;
}
.article-info .btn-more {
  color: #000;
}

.article-desc {
  font-size: 15px;
  color: #464646;
  letter-spacing: 1.5px;
  font-weight: 400;
  line-height: 1.8;
  margin: 0 0 25px;
}

.more-article {
  font-size: 15px;
  color: #000;
  letter-spacing: 1.5px;
  font-weight: 400;
  text-align: center;
  width: 340px;
  border: 1px solid #000;
  padding: 21px 0;
  margin: 0 auto 160px;
  cursor: pointer;
}

.article-item-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.article-item-box .article-img {
  width: 44.7%;
  padding-bottom: 29.5%;
}
.article-item-box .date-type {
  margin: 0 0 15px;
  letter-spacing: 1.7px;
}
.article-item-box .article-info {
  width: 400px;
  background: none;
  padding: 0;
}
.article-item-box .article-info h3 {
  font-size: 23px;
  color: #000;
  letter-spacing: 2px;
  margin: 0 0 30px;
  font-weight: 500;
}
.article-item-box .article-desc {
  font-size: 14px;
  color: #464646;
  letter-spacing: 1.5px;
  margin: 0 0 10px;
}

.blm-group {
  width: 1600px;
  margin: 0 auto;
}
.blm-group h3 {
  font-family: "Roboto", sans-serif;
  font-size: 50px;
  color: #000;
  letter-spacing: 0.3px;
  font-weight: 500;
  margin: 0 0 10px;
}

.blm-sub-tit {
  width: 100%;
  padding: 0 0 30px;
  margin: 0 0 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #000;
}
.blm-sub-tit p {
  font-size: 20px;
  color: #000;
  letter-spacing: 3px;
  font-weight: 500;
  margin: 10px 0 0;
}
.blm-sub-tit a {
  font-size: 15px;
  color: #000;
  letter-spacing: 1.8px;
  font-weight: 400;
  padding: 10px 42px 10px 0;
  background: url(/img/btn_arrow.svg) no-repeat right center;
  display: block;
}

.article-list {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  margin: 0 0 100px;
}
.article-list li {
  width: 355px;
  margin: 0 0 50px;
}
.article-list .date-type {
  margin: 0 0 20px;
}
.article-list h4 {
  font-size: 23px;
  color: #000;
  letter-spacing: 2px;
  line-height: 1.6;
  font-weight: 500;
  margin: 0 0 30px;
}
.article-list .btn-more {
  color: #000;
}

.list-img {
  width: 100%;
  padding-bottom: 67.6%;
  margin: 0 0 30px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.blm-50-group {
  width: 1600px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.blm-50-group .blm-group {
  width: 740px;
  margin: 0;
}
.blm-50-group .article-list {
  flex-wrap: wrap;
}
.blm-50-group .article-list li {
  width: 340px;
  margin: 0 0 60px;
}

.article-offers-box .blm-main-group:nth-of-type(even) {
  flex-direction: row-reverse;
}
.article-offers-box .blm-main-group:nth-of-type(even) .article-sub-item {
  margin: 0 0 0 160px;
}

.article-radio-ui {
  font-size: 14px;
  letter-spacing: 0.8px;
  line-height: 2.1;
  background: #fff;
  width: 200px;
  padding: 30px;
  border-radius: 0 3px 3px 3px;
  position: absolute;
  top: 51px;
  left: 0;
  display: none;
}
.article-radio-ui label {
  cursor: pointer;
  display: block;
}
.article-radio-ui label:hover input[type=checkbox]:disabled {
  background-color: #ccc;
}
.article-radio-ui label:hover input[type=checkbox] {
  background-color: #787878;
}
.article-radio-ui input[type=checkbox] {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  display: inline-block;
  background-color: #fff;
  border: 1px solid #787878;
  margin: 0 10px 0 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.article-radio-ui input[type=checkbox]:checked {
  background: #787878 url(/img/icon_check.svg) no-repeat center center;
}
.article-radio-ui input[type=checkbox]:disabled {
  background: #ccc;
  border: none;
}
.article-radio-ui input[type=checkbox]:disabled + span {
  color: #bbb;
}
.article-radio-ui input[type=radio] {
  width: 11px;
  height: 11px;
  border: 1px solid #464646;
  border-radius: 20px;
  display: inline-block;
  background-color: #fff;
  margin: 0 10px 0 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.article-radio-ui input[type=radio]:checked {
  background-color: #fff;
  position: relative;
}
.article-radio-ui input[type=radio]:checked::after {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  background: #464646;
  border-radius: 20px;
  position: absolute;
  top: 1px;
  left: 1px;
}

.art-top-box {
  padding: 150px 0 0;
}
.art-top-box .breadcrumbs-box {
  border: none;
  margin: 0 0 80px;
}

.art-cont-tit {
  width: 760px;
  margin: 0 auto 80px;
}
.art-cont-tit h1 {
  font-size: 48px;
  color: #000;
  letter-spacing: 5px;
  line-height: 1.45;
  font-weight: 500;
}
.art-cont-tit h2 {
  font-size: 48px;
  color: #000;
  letter-spacing: 5px;
  line-height: 1.45;
  font-weight: 500;
}

.art-cont {
  width: 1240px;
  margin: 0 auto 160px;
  position: relative;
}

.art-top-img-slider {
  max-width: 1240px;
  overflow: hidden;
  margin: 0 auto 105px;
}
.art-top-img-slider img {
  width: 100%;
}

.art-editor-group {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.share-box {
  width: 45px;
  position: sticky;
  left: 0;
  top: 20%;
  z-index: 1;
}
.share-box a {
  display: block;
  width: 45px;
  height: 45px;
  border: 1px solid #000;
  border-radius: 100%;
  margin: 0 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.4s ease-out;
}
.share-box a:hover {
  background: rgba(255, 255, 255, 0.6);
}
.share-box p {
  display: none;
}

.art-editor-box {
  width: 780px;
  margin: 0 auto;
}
.art-editor-box p {
  font-size: 18px;
  color: #464646;
  letter-spacing: 1.5px;
  font-weight: 400;
  line-height: 1.9;
  margin: 0 0 40px;
}
.art-editor-box h2 {
  font-size: 30px;
  color: #464646;
  letter-spacing: 2px;
  font-weight: 500;
  line-height: 1.5;
  margin: 80px 0 40px;
}
.art-editor-box h3 {
  font-size: 24px;
  color: #464646;
  letter-spacing: 2px;
  font-weight: 500;
  line-height: 1.5;
  margin: 80px 0 40px;
}
.art-editor-box a {
  font-size: 20px;
  color: #396D56;
  letter-spacing: 2.4px;
  text-underline-offset: 5px;
  text-decoration: underline;
  display: inline-block;
  transition: 0.4s;
}
.art-editor-box a:hover {
  color: #97afa4;
}
.art-editor-box .intro {
  font-size: 25px;
  color: #456C57;
  letter-spacing: 2px;
  font-weight: 400;
  text-align: center;
  line-height: 1.8;
  margin: 0 0 80px;
}
.art-editor-box img {
  max-width: 100%;
  margin: 40px auto;
}

@media screen and (max-width: 1800px) {
  .blm-group-box {
    width: auto;
    margin: 0 100px;
  }

  .blm-main-group {
    width: 100%;
  }

  .article-sub-item {
    margin: 0 100px 0 0;
  }

  .main-item {
    width: 43.6%;
  }

  .article-info {
    padding: 50px 80px 50px 100px;
  }

  .article-item-box .article-info {
    width: 48%;
  }

  .blm-group {
    width: auto;
    margin: 0 100px;
  }

  .article-list li {
    width: 325px;
  }

  .blm-50-group {
    width: auto;
    margin: 0 100px;
  }
  .blm-50-group .blm-group {
    width: 46.5%;
  }
  .blm-50-group .article-list li {
    width: 320px;
  }

  .article-offers-box .blm-main-group:nth-of-type(even) .article-sub-item {
    margin: 0 0 0 100px;
  }
}
@media screen and (max-width: 1600px) {
  .blm-top {
    padding: 110px 0 1px;
  }
  .blm-top h2 {
    margin: 160px auto;
  }

  .article-info h3 {
    font-size: 26px;
  }

  .blm-group-box {
    padding: 140px 0 0;
    margin: 0 9%;
  }
  .blm-group-box h3 {
    font-size: 50px;
  }
  .blm-group-box h3 p {
    font-size: 18px;
  }

  .blm-main-group {
    width: auto;
    margin: 0 9% 100px 0;
    align-items: flex-start;
  }

  .main-item {
    width: 48.6%;
  }

  .article-sub-item {
    margin: 0;
  }

  .blm-group {
    margin: 0 9%;
  }
  .blm-group h3 {
    margin: 0;
  }

  .article-item-box {
    margin: 0 0 60px;
  }
  .article-item-box .article-info {
    width: 50%;
  }
  .article-item-box .article-info h3 {
    font-size: 20px;
  }
  .article-item-box .date-type {
    font-size: 13px;
    margin: 0 0 15px;
  }

  .article-list li {
    width: 265px;
  }
  .article-list h4 {
    font-size: 20px;
  }

  .blm-sub-tit p {
    font-size: 18px;
    margin: 0;
  }

  .blm-50-group {
    margin: 0 9% 80px;
  }
  .blm-50-group .article-list li {
    width: 46%;
  }

  .article-offers-box .blm-main-group:nth-of-type(even) {
    margin: 0 0 100px 9%;
  }
  .article-offers-box .blm-main-group:nth-of-type(even) .article-sub-item {
    margin: 0;
  }

  .art-top-box {
    padding: 110px 0 0;
  }
}
@media screen and (max-width: 1400px) {
  .date-type {
    font-size: 13px;
  }

  .blm-top {
    padding: 100px 0 1px;
  }

  .blm-group-box {
    padding: 110px 0 0;
  }

  .article-info {
    padding: 40px 60px 40px 80px;
  }
  .article-info h3 {
    font-size: 24px;
  }

  .article-desc {
    font-size: 14px;
  }

  .article-item-box .article-desc {
    font-size: 13px;
    margin: 0 0 5px;
  }

  .main-item {
    position: sticky;
    top: 0;
  }

  .article-sub-item {
    width: 46.3%;
  }

  .article-item-box .article-info h3 {
    font-size: 18px;
    margin: 0 0 20px;
  }

  .article-list {
    margin: 0 0 50px;
  }
  .article-list li {
    width: 23%;
  }
  .article-list h4 {
    font-size: 18px;
  }
  .article-list .btn-more {
    display: none;
  }

  .blm-sub-tit {
    padding: 0px 0 20px;
    margin: 0 0 40px;
  }
  .blm-sub-tit a {
    font-size: 14px;
  }

  .blm-50-group {
    margin: 0 9%;
  }

  .art-top-box {
    padding: 100px 0 0;
  }

  .art-cont {
    width: auto;
    margin: 0 25px 120px;
  }
}
@media screen and (max-width: 1200px) {
  .blm-top h2 {
    font-size: 50px;
    margin: 140px auto;
  }

  .blm-tit-group {
    margin: 0 0 50px;
  }

  .main-item {
    width: 47.6%;
  }

  .blm-group-box {
    padding: 90px 0 0;
  }
  .blm-group-box h3 {
    font-size: 45px;
  }
  .blm-group-box h3 p {
    font-size: 16px;
  }

  .blm-main-group {
    margin: 0 9% 80px 0;
  }

  .main-item .article-info h3 {
    font-size: 22px;
  }

  .article-info h3 {
    font-size: 16px;
    margin: 0 0 40px;
  }

  .date-type {
    font-size: 12px;
    letter-spacing: 2px;
  }

  .blm-sub-tit {
    padding: 0 0 10px;
    margin: 0 0 30px;
  }
  .blm-sub-tit p {
    font-size: 16px;
  }

  .blm-group h3 {
    font-size: 40px;
    margin: 0;
  }

  .article-list h4 {
    font-size: 16px;
  }
  .article-list .date-type {
    margin: 0 0 10px;
  }

  .blm-50-group .article-list {
    margin: 0;
  }

  .list-img {
    margin: 0 0 20px;
  }

  .art-cont-tit h1 {
    font-size: 42px;
  }
  .art-cont-tit h2 {
    font-size: 42px;
  }

  .art-top-img-slider {
    margin: 0 0 85px;
  }

  .art-editor-box p {
    font-size: 18px;
    margin: 0 0 30px;
  }
  .art-editor-box h2 {
    font-size: 26px;
    margin: 60px 0 30px;
  }
  .art-editor-box h3 {
    font-size: 22px;
    margin: 60px 0 30px;
  }
  .art-editor-box a {
    font-size: 18px;
  }
  .art-editor-box .intro {
    font-size: 18px;
  }
}
@media screen and (max-width: 1023px) {
  .blm-top h2 {
    margin: 120px auto;
  }

  .article-info {
    padding: 40px 60px;
  }

  .blm-group-box {
    padding: 70px 0 0;
  }

  .article-type-filter {
    font-size: 13px;
  }

  .article-search {
    width: 180px;
    margin: 0 0 0 20px;
  }
  .article-search input[type=text] {
    width: 100%;
  }

  .main-item {
    width: 55.6%;
  }

  .article-sub-item {
    width: 37.3%;
  }

  .article-item-box {
    margin: 0 0 50px;
    flex-wrap: wrap;
  }
  .article-item-box .article-img {
    width: 100%;
    padding-bottom: 63.5%;
    margin: 0 0 20px;
  }
  .article-item-box .article-info {
    width: 100%;
  }
  .article-item-box .article-info h3 {
    margin: 0 0 20px;
  }
  .article-item-box .date-type {
    font-size: 12px;
    margin: 0 0 10px;
  }

  .art-top-box {
    padding: 100px 0 0;
  }
  .art-top-box .breadcrumbs-box {
    margin: 0 0 40px;
  }

  .art-cont-tit {
    width: calc(80% - 45px);
    margin: 0 auto 60px;
  }
  .art-cont-tit h1 {
    font-size: 38px;
  }
  .art-cont-tit h2 {
    font-size: 38px;
  }

  .share-box {
    top: 12%;
  }

  .art-editor-box {
    width: 80%;
  }

  .blm-sub-tit a {
    font-size: 13px;
  }
}
@media screen and (max-width: 767px) {
  .blm-top {
    padding: 80px 0 1px;
  }
  .blm-top h2 {
    margin: 100px 30px;
  }
  .blm-top h2 p {
    font-size: 20px;
    letter-spacing: 2.5px;
    margin: 10px 0 0;
  }

  .blm-group-box {
    padding: 100px 0 0;
    margin: 0 25px;
  }

  .blm-group-box h3 {
    font-size: 50px;
  }
  .blm-group-box h3 p {
    font-size: 18px;
    letter-spacing: 2.5px;
  }

  .article-type-filter {
    display: none;
  }

  .blm-main-group {
    flex-wrap: wrap;
    margin: 0 auto 40px;
  }

  .blm-group {
    margin: 0 25px 50px;
  }

  .main-item {
    width: auto;
    margin: 0 25px 40px 0;
    position: static;
  }

  .article-info {
    padding: 30px 30px 20px 55px;
  }

  .date-type {
    font-size: 12px;
    margin: 0 0 15px;
  }

  .article-info h3 {
    font-size: 22px;
    margin: 0 0 30px;
  }

  .article-desc {
    font-size: 13px;
    margin: 0;
  }

  .article-sub-item {
    width: auto;
    margin: 0 25px;
  }

  .article-offers-box .blm-main-group:nth-of-type(even) {
    margin: 0 0 0 25px;
  }
  .article-offers-box .blm-main-group:nth-of-type(even) .article-sub-item {
    width: auto;
    margin: 0 25px 0 0;
  }

  .article-item-box {
    margin: 0 0 40px;
  }
  .article-item-box .article-img {
    width: 150px;
    margin: 0 15px 0 0;
    padding-bottom: 27.6%;
  }
  .article-item-box .article-info {
    width: calc(100% - 165px);
  }
  .article-item-box .article-info h3 {
    font-size: 15px;
  }
  .article-item-box .article-desc {
    display: none;
  }
  .article-item-box .btn-more {
    display: none;
  }

  .blm-group h3 {
    font-size: 35px;
  }

  .blm-sub-tit {
    margin: 0 0 40px;
  }
  .blm-sub-tit p {
    font-size: 18px;
  }

  .article-list li {
    width: 47%;
    margin: 0 0 40px;
  }

  .list-img {
    margin: 0 0 15px;
  }

  .article-list {
    margin: 0 0 40px;
  }
  .article-list .date-type {
    margin: 0 0 10px;
  }
  .article-list h4 {
    font-size: 15px;
    height: auto;
    margin: 0;
  }
  .article-list .btn-more {
    display: none;
  }

  .blm-50-group {
    margin: 0 25px 50px;
    flex-wrap: wrap;
  }
  .blm-50-group .blm-group {
    width: 100%;
  }
  .blm-50-group .blm-group:nth-of-type(1) {
    margin: 0 0 40px;
  }
  .blm-50-group .article-list li {
    width: 47%;
    margin: 0 0 40px;
  }

  .art-top-box {
    padding: 80px 0 0;
  }
  .art-top-box .breadcrumbs-box {
    margin: 0 0 20px;
  }

  .art-cont-tit {
    width: auto;
    margin: 0 25px 40px;
  }
  .art-cont-tit .date-type {
    margin: 0 0 20px;
  }
  .art-cont-tit h1 {
    font-size: 20px;
    letter-spacing: 2px;
    line-height: 1.66;
  }
  .art-cont-tit h2 {
    font-size: 20px;
    letter-spacing: 2px;
    line-height: 1.66;
  }

  .art-top-img-slider {
    margin: 0 0 40px;
  }
  .art-top-img-slider .product-ban-pagin {
    text-align: center;
  }

  .art-editor-group {
    flex-direction: column-reverse;
  }

  .art-editor-box {
    width: 100%;
  }
  .art-editor-box p {
    font-size: 16px;
    letter-spacing: 1.2px;
  }
  .art-editor-box a {
    font-size: 16px;
    letter-spacing: 1.2px;
    text-decoration: underline;
  }
  .art-editor-box h2 {
    font-size: 20px;
    line-height: 1.7;
    margin: 40px 0 20px;
  }
  .art-editor-box h3 {
    font-size: 18px;
    line-height: 1.7;
    margin: 40px 0 20px;
  }
  .art-editor-box .intro {
    margin: 0 0 40px;
  }
  .art-editor-box img {
    margin: 20px 0;
  }
  .art-editor-box p {
    margin: 0 0 20px;
  }

  .share-box {
    width: 100%;
    position: static;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    margin: 40px 0 0;
  }
  .share-box a {
    margin: 0 20px 0 0;
  }
  .share-box p {
    font-size: 13px;
    color: #787878;
    letter-spacing: 1.3px;
    display: block;
    width: 100%;
    margin: 0 0 20px;
  }

  .m-article-type-filter {
    width: 100%;
    background: #fff;
    padding: 8px 0 8px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 12;
  }
  .m-article-type-filter span {
    font-size: 13px;
    color: #000;
    letter-spacing: 1.3px;
    font-weight: 400;
    width: 74%;
    line-height: 44px;
    display: block;
    cursor: pointer;
  }
  .m-article-type-filter.on {
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
  }
  .m-article-type-filter.on .m-article-arrow {
    transform: translateY(-50%) rotate(180deg);
  }

  .m-article-act {
    font-size: 13px;
    color: #000;
    letter-spacing: 1.3px;
    font-weight: 400;
    width: 74%;
    line-height: 44px;
    display: block;
    cursor: pointer;
    position: relative;
  }

  .m-article-arrow {
    width: 10px;
    height: 5px;
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 1;
    transform: translateY(-50%);
  }

  .m-btn-article-search {
    padding: 10px 0;
    border-left: 1px solid #C8C8C8;
    cursor: pointer;
  }
  .m-btn-article-search img {
    width: 24px;
    margin: 0 25px;
  }

  .m-article-filter-box {
    width: 100%;
    overflow-y: auto;
    background: #F4F2EF;
    padding: 10px 25px 70px;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 11;
    transition: 0.4s ease-out;
    transform: translateY(100%);
    display: block;
  }
  .m-article-filter-box li {
    font-size: 15px;
    color: #000;
    letter-spacing: 1.5px;
    font-weight: 400;
    padding: 15px 0;
    border-bottom: 1px solid #C8C8C8;
  }
  .m-article-filter-box li:last-child {
    border: none;
  }
  .m-article-filter-box.on {
    transform: translateY(0);
  }

  .m-article-sort-box {
    width: 100%;
    height: 220px;
    overflow-y: auto;
    background: #F4F2EF;
    padding: 37px 25px 70px;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 3;
    transition: 0.4s ease-out;
    transform: translateY(100%);
    display: block;
  }
  .m-article-sort-box.on {
    transform: translateY(0);
  }
  .m-article-sort-box .article-radio-ui {
    width: 100%;
    background: none;
    padding: 0;
    display: block;
    position: static;
  }
  .m-article-sort-box .article-radio-ui label {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .m-article-sort-box .article-radio-ui span {
    font-size: 15px;
    letter-spacing: 1px;
    font-weight: 400;
  }
  .m-article-sort-box .article-radio-ui input[type=radio] {
    width: 15px;
    height: 15px;
    background: none;
  }
  .m-article-sort-box .article-radio-ui input[type=radio]:checked::after {
    width: 9px;
    height: 9px;
    top: 2px;
    left: 2px;
  }

  .m-article-search-box {
    width: 100%;
    height: 220px;
    background: #F4F2EF;
    padding: 37px 25px 70px;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 11;
    transition: 0.4s ease-out;
    transform: translateY(100%);
    display: block;
  }
  .m-article-search-box p {
    font-size: 15px;
    color: #000;
    letter-spacing: 1.5px;
    font-weight: 400;
    margin: 0 0 28px;
  }
  .m-article-search-box form {
    display: block;
    position: relative;
  }
  .m-article-search-box input[type=text] {
    font-size: 14px;
    letter-spacing: 2px;
    width: 100%;
    height: 40px;
    background: none;
    border-bottom: 1px solid #787878;
  }
  .m-article-search-box input[type=text]::-moz-placeholder {
    color: #787878;
  }
  .m-article-search-box input[type=text]::placeholder {
    color: #787878;
  }
  .m-article-search-box input[type=submit] {
    width: 24px;
    height: 24px;
    background: url(/img/icon_filter_search.svg) no-repeat center center;
    position: absolute;
    top: 6px;
    right: 0;
    cursor: pointer;
  }
  .m-article-search-box.on {
    transform: translateY(0);
  }
}
.all-search-sty {
  background: #F4F2EF;
  overflow: hidden;
}

.search-top {
  padding: 150px 0 0;
  margin: 0 0 80px;
}

.site-search {
  width: 630px;
  padding: 0 0 5px;
  margin: 160px auto 100px;
  position: relative;
}
.site-search input[type=text] {
  font-size: 20px;
  color: #000;
  letter-spacing: 2.5px;
  width: 100%;
  height: 45px;
  background: none;
  padding: 10px 10px 15px 0;
  border-bottom: 1px solid #787878;
  margin: 0 0 15px;
}
.site-search input[type=text]::-moz-placeholder {
  color: #D3CCBD;
}
.site-search input[type=text]::placeholder {
  color: #D3CCBD;
}
.site-search input[type=submit] {
  width: 28px;
  height: 28px;
  background: url(/img/icon_search_b.svg) no-repeat center center;
  position: absolute;
  right: 0;
  top: 4px;
  z-index: 1;
  cursor: pointer;
}

.site-search-keyword-box {
  font-size: 14px;
  color: #787878;
  letter-spacing: 1.4px;
  font-weight: 400;
  width: 630px;
  margin: 0 auto;
}
.site-search-keyword-box span {
  color: #E75700;
}

.site-search-type {
  width: 1540px;
  margin: 0 auto;
  border-bottom: 1px solid #787878;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
}
.site-search-type .swiper-wrapper {
  text-align: center;
  width: auto;
}
.site-search-type .swiper-slide {
  width: auto;
  display: inline-block;
}
.site-search-type a {
  font-size: 20px;
  letter-spacing: 3px;
  color: #787878;
  font-weight: 400;
  border-bottom: 2px solid transparent;
  padding: 24px 0;
  margin: 0 30px 0 0;
  display: block;
  transition: 0.4s;
}
.site-search-type a:hover {
  color: #000;
  border-bottom: 2px solid #000;
}
.site-search-type a.act {
  color: #000;
  border-bottom: 2px solid #000;
}

.result-group-box {
  width: 1540px;
  margin: 0 auto 160px;
}
.result-group-box .article-list {
  width: 100%;
  margin: 0;
}
.result-group-box .article-list li {
  margin: 0 0 80px;
}
.result-group-box .product-list-box {
  width: auto;
}

.result-total {
  margin: 0 0 40px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.result-total a {
  font-size: 16px;
  color: #787878;
  letter-spacing: 2.5px;
  font-weight: 400;
  transition: 0.4s;
}
.result-total a:hover {
  color: #000;
}

.rst-num {
  font-size: 16px;
  color: #000;
  letter-spacing: 2.5px;
  font-weight: 500;
  padding: 0 20px 0 0;
  border-right: 1px solid #787878;
  margin: 0 20px 0 0;
}

.no-data {
  font-size: 16px;
  font-weight: 400;
  margin: 0 0 70px;
  padding: 0 0 0 20px;
}

.sup-list {
  width: 100%;
  margin: 0 0 40px;
  display: block;
}
.sup-list h3 {
  font-size: 18px;
  color: #000;
  letter-spacing: 1.8px;
  font-weight: 400;
  margin: 0 0 15px;
}
.sup-list p {
  font-size: 15px;
  color: #787878;
  letter-spacing: 1.8px;
  margin: 0 0 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sup-list a {
  color: #787878;
}

.link {
  font-family: "Roboto", sans-serif;
  font-size: 15px;
  color: #787878;
  letter-spacing: 1.8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media screen and (max-width: 1800px) {
  .site-search-top {
    padding: 140px 0 100px;
  }

  .result-group-box .product-list-box {
    max-width: 100%;
  }
  .result-group-box .article-list li {
    width: 23.5%;
  }
}
@media screen and (max-width: 1600px) {
  .search-top {
    padding: 110px 0 0;
  }

  .site-search-top {
    padding: 120px 0 100px;
  }

  .site-search {
    width: 560px;
  }
  .site-search input[type=text] {
    font-size: 18px;
  }

  .site-search-type {
    width: auto;
    padding: 0 50px 0 0;
    margin: 0 50px;
  }
  .site-search-type a {
    font-size: 16px;
  }

  .result-group-box {
    width: auto;
    padding: 0 10%;
    margin: auto;
  }
}
@media screen and (max-width: 1400px) {
  .search-top {
    width: auto;
    padding: 100px 0 0;
    margin: 0 0 60px;
  }

  .site-search-top {
    padding: 120px 25px 100px;
  }

  .site-search-type a {
    padding: 20px 0;
  }

  .site-search input[type=text] {
    font-size: 16px;
  }
}
@media screen and (max-width: 1200px) {
  .site-search {
    width: 520px;
    margin: 140px auto 80px;
  }

  .site-search-top {
    padding: 100px 25px 80px;
  }

  .site-search-type {
    padding: 0;
  }
  .site-search-type a {
    font-size: 15px;
    padding: 15px 0;
    margin: 0 20px 0 0;
  }

  .result-group-box {
    padding: 0 100px;
  }
  .result-group-box .product-list-box {
    padding: 0;
  }

  .result-total {
    padding: 0;
    margin: 0 0 30px;
  }
  .result-total a {
    font-size: 15px;
  }

  .rst-num {
    font-size: 15px;
  }
}
@media screen and (max-width: 1023px) {
  .search-top {
    margin: 0 0 40px;
  }
  .search-top h2 {
    font-size: 50px;
    margin: 140px auto 55px;
  }
  .search-top h2 p {
    font-size: 20px;
    margin: 15px 0 0;
  }

  .site-search-top {
    padding: 100px 0 60px;
  }

  .site-search {
    width: 470px;
    margin: 120px auto 60px;
  }
  .site-search input[type=text] {
    font-size: 15px;
    margin: 0 0 10px;
  }

  .site-search-keyword-box {
    width: 100%;
  }

  .site-search-type a {
    font-size: 14px;
    letter-spacing: 2.5px;
  }

  .result-group-box {
    padding: 0 120px;
  }
  .result-group-box .product-list-box {
    margin: 0 0 20px;
  }
  .result-group-box .product-list-box .prod-img {
    width: 48%;
  }
  .result-group-box .article-list {
    margin: 0 0 20px;
  }
  .result-group-box .article-list li {
    width: 48%;
    margin: 0 0 50px;
  }

  .rst-num {
    padding: 0 15px 0 0;
    margin: 0 15px 0 0;
  }

  .result-total {
    padding: 0 25px;
    margin: 0 0 25px;
  }

  .sup-list h3 {
    font-size: 16px;
  }
  .sup-list p {
    font-size: 15px;
  }

  .link {
    font-size: 15px;
  }
}
@media screen and (max-width: 767px) {
  .search-top {
    padding: 80px 0 10px;
    margin: 0 0 50px;
  }
  .search-top h2 {
    margin: 100px auto 60px;
  }

  .site-search {
    width: auto;
    padding: 0;
    margin: 75px 25px 55px;
  }
  .site-search input[type=text] {
    letter-spacing: 1.8px;
  }
  .site-search input[type=submit] {
    width: 22px;
    height: 22px;
    background: url(/img/icon_search_b.svg) no-repeat center center/cover;
    top: 7px;
  }

  .site-search-top .site-search {
    width: auto;
    margin: 0 25px 15px;
  }

  .site-search-type {
    width: auto;
    margin: 0 25px;
    padding: 0 60px 0 0;
    position: relative;
  }
  .site-search-type a {
    font-size: 15px;
    padding: 10px 0;
    margin: 0 5px 0 0;
  }
  .site-search-type::after {
    content: "";
    display: block;
    height: 100%;
    width: 100px;
    position: absolute;
    top: 0;
    right: -25px;
    z-index: 4;
    background-image: linear-gradient(to right, rgba(244, 242, 238, 0), #f4f2ee);
  }

  .result-group-box {
    padding: 0 25px;
  }
  .result-group-box .product-list-box .prod-img {
    width: 46%;
  }
  .result-group-box .article-list li {
    width: 46%;
  }

  .rst-num {
    font-size: 14px;
    letter-spacing: 2px;
  }

  .result-total a {
    font-size: 14px;
    letter-spacing: 2px;
  }

  .sup-list h3 {
    font-size: 15px;
  }
  .sup-list p {
    font-size: 13px;
  }

  .link {
    font-size: 13px;
  }
}
@media screen and (max-width: 375px) {
  .search-type {
    margin: 0 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .search-type a {
    font-size: 13px;
    margin: 0;
  }
}
.find-top {
  background: #DFD6C9;
  padding: 150px 0 1px;
}
.find-top > h2 {
  font-family: "Roboto", sans-serif;
  font-size: 75px;
  color: #000;
  letter-spacing: 0.5px;
  font-weight: 500;
  text-align: center;
  margin: 180px auto 95px;
}
.find-top > h2 p {
  font-size: 24px;
  color: #000;
  letter-spacing: 3px;
  margin: 20px 0 0;
}
.find-top .support-type-group a {
  padding: 0 25px;
}
.find-top .support-type-group .swiper-slide:nth-of-type(2) a {
  border-left: 1px solid #787878;
}
.find-top .support-type-group .swiper-slide:nth-of-type(3) a {
  border-left: 1px solid #787878;
}

.find-group {
  background: #F4F2EF;
  padding: 160px 0;
}

.store-info-box {
  width: 1560px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.store-img {
  width: 57.7%;
}
.store-img img {
  width: 100%;
}

.store-info {
  text-align: left;
  width: 42.3%;
  padding: 0 0 0 120px;
}
.store-info h2 {
  font-size: 40px;
  color: #000;
  letter-spacing: 4px;
  font-weight: 500;
  margin: 0 0 40px;
}
.store-info h3 {
  font-size: 28px;
  color: #000;
  letter-spacing: 3.2px;
  font-weight: 500;
  margin: 0 0 40px;
}
.store-info p {
  font-size: 17px;
  color: #464646;
  letter-spacing: 1.3px;
  line-height: 2;
  font-weight: 400;
}

.find-group-2 {
  background: #EFEBE4;
}

.store-info-box2 {
  padding: 150px 0;
}
.store-info-box2 .store-info {
  width: 37.3%;
  padding: 0;
}
.store-info-box2 .store-img {
  width: 52.6%;
}

.find-group-3 {
  background: #DFD6C9;
}

.store-service {
  width: 1560px;
  padding: 160px 0 147px;
  margin: 0 auto;
}
.store-service h3 {
  text-align: center;
  font-weight: 500;
  font-size: 32px;
  color: #000;
  letter-spacing: 4px;
  margin: 0 0 60px;
}
.store-service p {
  font-size: 16px;
  color: #464646;
  letter-spacing: 1.44px;
  margin: 34px 0 0;
}

.store-service-item {
  width: 100%;
  margin: 0 0 40px;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}
.store-service-item h4 {
  text-align: center;
  font-size: 20px;
  color: #000;
  letter-spacing: 2px;
  font-weight: 500;
  padding: 30px 0 40px;
  border-bottom: 1px solid #787878;
}
.store-service-item .service-link-a {
  width: 30.8%;
  padding: 30px;
  background: #F4F2EF;
  border: 9px solid #F4F2EF;
  display: block;
  transition: 0.4s;
}
.store-service-item .service-link-a:hover {
  border: 9px solid #D0C4B3;
}
.store-service-item .service-no-link {
  width: 30.8%;
  padding: 30px;
  background: #F4F2EF;
  border: 9px solid #F4F2EF;
}

.store-service-desc {
  padding: 35px 47px 15px;
}
.store-service-desc p {
  font-weight: 400;
  line-height: 1.8;
  margin: 0 0 20px;
}

.store-more {
  font-size: 13px;
  color: #787878;
  letter-spacing: 1.5px;
}

.btn-reserve {
  font-size: 15px;
  color: #000;
  letter-spacing: 1.5px;
  text-align: center;
  font-weight: 400;
  width: 300px;
  height: 65px;
  line-height: 65px;
  border: 1px solid #000;
  margin: 0 auto;
  display: block;
  transition: 0.4s;
}
.btn-reserve:hover {
  color: #fff;
  border: 1px solid #AF9682;
  background: #AF9682;
}

.m-btn-reserve {
  display: none;
}

.find-map {
  background: #fff;
}

.find-map-box {
  max-width: 1920px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.map-info {
  width: 37.5%;
  padding: 0 9%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
}
.map-info h2 {
  font-size: 20px;
  color: #000;
  letter-spacing: 2px;
  font-weight: 500;
  width: 100%;
  margin: 0 0 20px;
}
.map-info p {
  font-weight: 400;
  font-size: 17px;
  color: #464646;
  letter-spacing: 1.3px;
  line-height: 1.66;
  width: 100%;
  margin: 0 0 12px;
}

.map-img {
  width: 62.5%;
  display: block;
}
.map-img img {
  width: 100%;
}

.marketing-group {
  width: 100%;
  background: #F4F2EF;
}

.marketing-box {
  width: 1280px;
  margin: 0 auto;
  padding: 120px 0;
}
.marketing-box li.title {
  font-size: 16px;
  color: #000;
  letter-spacing: 2px;
  font-weight: 400;
  padding: 10px 3%;
  background: none;
  border-bottom: 1px solid #000;
}
.marketing-box li.title .mk-service {
  font-size: 16px;
  color: #000;
  letter-spacing: 2px;
}
.marketing-box li.title .mk-product-type {
  font-size: 16px;
  color: #000;
  letter-spacing: 2px;
}
.marketing-box li.title .mk-tel {
  font-size: 16px;
  color: #000;
  letter-spacing: 2px;
}
.marketing-box li {
  font-weight: 400;
  line-height: 1.66;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 55px 3%;
  margin: 0 0 25px;
}

.mk-store {
  color: #000;
  width: 15%;
  margin: 0 3%;
}
.mk-store span {
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  color: #787878;
  letter-spacing: 1.4px;
  margin: 0 0 6px;
  display: block;
}
.mk-store span.m-tel {
  display: none;
}
.mk-store p {
  font-size: 18px;
  color: #000;
  letter-spacing: 1.8px;
  font-weight: 500;
}

.mk-service {
  font-size: 14px;
  color: #000;
  letter-spacing: 1.2px;
  width: 30%;
  margin: 0 3%;
}

.mk-product-type {
  font-size: 14px;
  color: #000;
  letter-spacing: 1.2px;
  width: 20%;
  margin: 0 3%;
}

.mk-tel {
  font-size: 14px;
  color: #000;
  letter-spacing: 1.2px;
  width: 15%;
  margin: 0 3%;
}

.m-mk-tit {
  display: none;
}

@media screen and (max-width: 1800px) {
  .store-info-box {
    width: 80%;
  }

  .store-service {
    width: 80%;
  }
}
@media screen and (max-width: 1600px) {
  .find-top {
    padding: 110px 0 1px;
  }

  .store-info h2 {
    font-size: 36px;
  }
  .store-info h3 {
    font-size: 26px;
  }
  .store-info p {
    font-size: 15px;
  }

  .store-service-desc {
    padding: 30px 27px 15px;
  }
  .store-service-desc p {
    font-size: 15px;
  }

  .store-service-item h4 {
    font-size: 18px;
    padding: 10px 0 35px;
  }

  .map-info p {
    font-size: 15px;
  }
}
@media screen and (max-width: 1400px) {
  .find-top {
    padding: 100px 0 1px;
  }
  .find-top > h2 {
    font-size: 65px;
    margin: 160px auto 75px;
  }

  .find-group {
    padding: 120px 0;
  }

  .store-info {
    padding: 0 0 0 6%;
  }
  .store-info h2 {
    font-size: 34px;
  }
  .store-info p {
    font-size: 14px;
  }

  .store-info-box2 {
    padding: 120px 0;
  }

  .store-service {
    padding: 120px 0;
  }

  .store-service-item .service-link-a {
    padding: 20px;
  }
  .store-service-item .service-no-link {
    padding: 20px;
  }
  .store-service-item h4 {
    font-size: 17px;
    margin: 10px 0 0;
  }

  .store-service-desc p {
    font-size: 14px;
  }

  .marketing-box {
    width: 90%;
  }
  .marketing-box li.title {
    font-size: 15px;
  }
  .marketing-box li.title .mk-service {
    font-size: 15px;
  }
  .marketing-box li.title .mk-product-type {
    font-size: 15px;
  }
  .marketing-box li.title .mk-tel {
    font-size: 15px;
  }
}
@media screen and (max-width: 1200px) {
  .find-top {
    padding: 100px 0 1px;
  }
  .find-top > h2 {
    font-size: 60px;
  }
  .find-top .support-type-group a {
    line-height: 1;
  }

  .store-info h2 {
    font-size: 32px;
    margin: 0 0 35px;
  }
  .store-info h3 {
    font-size: 24px;
    margin: 0 0 35px;
  }
  .store-info p {
    font-size: 13px;
  }

  .store-info-box2 .store-info {
    width: 42.3%;
  }

  .store-service h3 {
    font-size: 24px;
    margin: 0 0 40px;
  }
  .store-service p {
    font-size: 15px;
    margin: 24px 0 0;
  }

  .store-service-item h4 {
    font-size: 16px;
    padding: 0 0 20px;
    margin: 0 0 20px;
  }

  .store-service-desc {
    padding: 20px 15px 0 15px;
  }
  .store-service-desc p {
    font-size: 13px;
    margin: 0 0 12px;
  }

  .map-info {
    padding: 0 5%;
  }
  .map-info h2 {
    font-size: 18px;
  }
  .map-info p {
    font-size: 14px;
  }

  .map-img img {
    height: 400px;
    -o-object-fit: cover;
       object-fit: cover;
  }

  .marketing-box {
    padding: 80px 0;
  }
}
@media screen and (max-width: 1023px) {
  .find-top {
    padding: 100px 0 1px;
  }
  .find-top > h2 {
    font-size: 50px;
    margin: 140px auto 55px;
  }
  .find-top > h2 p {
    font-size: 20px;
  }
  .find-top .support-type-group a {
    padding: 0 15px;
  }

  .find-group {
    padding: 60px 0;
  }

  .store-info h2 {
    font-size: 26px;
    letter-spacing: 3.5px;
    margin: 0 0 15px;
  }
  .store-info h3 {
    font-size: 20px;
    letter-spacing: 2.5px;
  }
  .store-info p {
    font-size: 13px;
    line-height: 1.9;
  }

  .store-info-box {
    width: auto;
    padding: 0 5%;
  }

  .find-group-2 {
    padding: 60px 0;
  }

  .store-service {
    width: auto;
    padding: 80px 5%;
  }
  .store-service h3 {
    font-size: 20px;
  }
  .store-service p {
    font-size: 13px;
  }

  .store-service-item .service-link-a {
    padding: 20px;
  }
  .store-service-item .service-no-link {
    padding: 20px;
  }
  .store-service-item h4 {
    font-size: 15px;
    margin: 0;
  }

  .store-service-desc p {
    margin: 0 0 20px;
  }

  .btn-reserve {
    width: 220px;
    height: 60px;
    line-height: 60px;
  }

  .map-info h2 {
    font-size: 16px;
  }
  .map-info p {
    font-size: 13px;
  }

  .marketing-box {
    width: auto;
    padding: 80px 5%;
  }
  .marketing-box li.title {
    font-size: 13px;
    color: #000;
    letter-spacing: 2px;
    padding: 10px 0;
  }
  .marketing-box li.title .mk-service {
    font-size: 13px;
    color: #000;
    letter-spacing: 2px;
  }
  .marketing-box li.title .mk-product-type {
    font-size: 13px;
    color: #000;
    letter-spacing: 2px;
  }
  .marketing-box li.title .mk-tel {
    font-size: 13px;
    color: #000;
    letter-spacing: 2px;
  }
  .marketing-box li {
    padding: 45px 0;
  }

  .mk-store {
    width: 20%;
    margin: 0 5%;
  }
  .mk-store span {
    font-size: 13px;
    margin: 0 0 2px;
  }
  .mk-store p {
    font-size: 16px;
  }

  .mk-service {
    font-size: 13px;
    margin: 0 2%;
  }

  .mk-product-type {
    font-size: 13px;
    margin: 0 2%;
  }

  .mk-tel {
    font-size: 13px;
    margin: 0 2%;
  }
}
@media screen and (max-width: 767px) {
  .find-top {
    padding: 80px 0 1px;
  }
  .find-top h2 {
    margin: 100px auto 50px;
  }
  .find-top h2 p {
    margin: 10px 0 0;
  }
  .find-top .support-type {
    padding: 0;
  }
  .find-top .support-type a {
    letter-spacing: 1.8px;
    padding: 18px 0;
    margin: 0 17px;
  }
  .find-top .support-type::after {
    display: none;
  }
  .find-top .support-sub-type::after {
    display: none;
  }
  .find-top .support-type-group {
    margin: 0;
  }
  .find-top .support-type-group a {
    padding: 0 17px;
  }

  .find-group {
    padding: 80px 0;
  }

  .store-info-box {
    flex-wrap: wrap;
  }

  .store-img {
    width: 100%;
    margin: 0 0 60px;
  }

  .store-info {
    width: 100%;
    padding: 0;
  }
  .store-info h2 {
    font-size: 27px;
    letter-spacing: 2px;
    margin: 0 0 30px;
  }
  .store-info h3 {
    font-size: 27px;
    letter-spacing: 2.5px;
    margin: 0 0 40px;
  }
  .store-info h3 br {
    display: none;
  }
  .store-info p {
    font-size: 13px;
    letter-spacing: 1px;
    margin: 0;
  }

  .find-group-2 {
    padding: 80px 0;
  }

  .store-info-box2 {
    flex-direction: column-reverse;
  }
  .store-info-box2 .store-info {
    width: 100%;
  }
  .store-info-box2 .store-img {
    width: 100%;
  }

  .store-service {
    padding: 80px 25px 40px;
  }
  .store-service h3 {
    font-size: 27px;
    letter-spacing: 2.5px;
    margin: 0 0 40px;
  }
  .store-service p {
    font-size: 14px;
    letter-spacing: 1.5px;
    line-height: 1.8;
  }

  .store-service-item {
    flex-wrap: wrap;
    margin: 0;
  }
  .store-service-item .service-link-a {
    width: 100%;
    padding: 0;
    margin: 0 0 40px;
    border: none;
  }
  .store-service-item .service-link-a > a {
    margin: 0 25px;
    display: block;
  }
  .store-service-item .service-link-a a.m-btn-reserve {
    margin: 0;
  }
  .store-service-item .service-link-a:hover {
    border: none;
  }
  .store-service-item.service-link-a::nth-last-child(1) {
    margin: 0;
  }
  .store-service-item .service-no-link {
    width: 100%;
    padding: 0 25px;
    margin: 0 0 40px;
    border: none;
  }
  .store-service-item h4 {
    font-size: 18px;
    letter-spacing: 2px;
    padding: 50px 0 30px;
  }

  .store-service-desc {
    padding: 30px 25px 50px;
  }

  .store-more {
    margin: 15px 0 0;
  }

  .btn-reserve {
    display: none;
  }

  .m-btn-reserve {
    display: block;
    font-size: 15px;
    color: #fff;
    letter-spacing: 1.5px;
    text-align: center;
    font-weight: 400;
    width: 100%;
    height: 60px;
    margin: 0 0 0 0;
    background: #AF9682;
    line-height: 60px;
    transition: 0.4s;
  }
  .m-btn-reserve:hover {
    background: #997d67;
  }

  .find-map-box {
    width: 100%;
    flex-wrap: wrap;
  }

  .map-info {
    width: 100%;
    padding: 40px 25px;
  }
  .map-info h2 {
    font-size: 18px;
    letter-spacing: 2px;
  }
  .map-info p {
    font-size: 14px;
    letter-spacing: 1px;
    margin: 0 0 8px;
  }

  .map-img {
    width: 100%;
  }
  .map-img img {
    height: auto;
  }

  .marketing-box {
    width: auto;
    padding: 80px 25px 20px;
  }
  .marketing-box li.title {
    display: none;
  }
  .marketing-box li {
    padding: 30px 25px;
    flex-wrap: wrap;
  }

  .mk-store {
    width: 100%;
    padding: 0 0 15px;
    border-bottom: 1px solid #000;
    margin: 0 0 15px;
  }
  .mk-store span {
    font-size: 12px;
  }
  .mk-store span.m-tel {
    font-size: 13px;
    color: #000;
    display: block;
    margin: 0;
  }
  .mk-store p {
    margin: 0 0 10px;
  }

  .mk-service {
    width: 100%;
    padding: 0 0 15px;
    border-bottom: 1px solid #000;
    margin: 0 0 15px;
  }

  .mk-product-type {
    width: 100%;
    margin: 0;
  }

  .mk-tel {
    width: 100%;
    display: none;
  }

  .m-mk-tit {
    font-size: 13px;
    color: #000;
    letter-spacing: 1.3px;
    font-weight: 500;
    display: block;
    margin: 0 0 5px;
  }
}
.novice-sty {
  height: 100vh;
  overflow: hidden;
}
.novice-sty .page-nav {
  height: 133px;
  padding: 0 40px;
  background: #F4F2EF;
  justify-content: space-between;
}
.novice-sty .page-nav::after {
  content: "";
  display: block;
  width: 54.167%;
  height: 100%;
  background: #fff;
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
}
.novice-sty .s-logo {
  width: 51px;
  height: 54px;
  margin: 0;
  order: 1;
}
.novice-sty nav {
  width: calc(60% - 194px);
  order: 2;
}
.novice-sty .fn-box {
  order: 3;
}
.novice-sty .fixed-infor {
  right: auto;
  bottom: 40px;
  left: 40px;
}
.novice-sty .fixed-infor a {
  width: 52px;
  height: 52px;
}
.novice-sty .fixed-infor a p {
  transform: translate(50px, 40%);
}
.novice-sty .fixed-infor a:hover p {
  transform: translate(65px, 40%);
}
.novice-sty .fixed-infor.act a.f-line {
  top: -62px;
}
.novice-sty .fixed-infor.act a.f-discuss {
  top: -134px;
}
.novice-sty .fixed-infor.act a.f-qa {
  top: -206px;
}
.novice-sty .f-information-box {
  width: 52px;
  height: 54px;
  bottom: 0;
}
.novice-sty .f-information {
  width: 52px;
  height: 54px;
  background-size: 52px;
}
.novice-sty .f-calculator {
  width: 52px;
  height: 52px;
  background: #fff url(/img/icon_calculator.svg) no-repeat center center/19px;
  display: block;
  border-radius: 100%;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.1);
  transform: scale(0.95);
  transition: 0.3s ease-out;
  position: fixed;
  left: 123px;
  bottom: 43px;
  z-index: 2;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transform: scale(1);
}
.novice-sty .f-calculator p {
  font-size: 1px;
  color: #787878;
  letter-spacing: 1px;
  text-align: center;
  width: 90px;
  padding: 5px 0;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translate(50px, 40%);
  transition: 0.3s ease-out;
}
.novice-sty .f-calculator:hover p {
  opacity: 1;
  visibility: visible;
  transform: translate(65px, 40%);
}
.novice-sty .template-point {
  opacity: 1;
  transform: translate(0, -50%);
}

.novice-box {
  width: 100%;
  height: 100vh;
}
.novice-box h3 {
  font-size: 16px;
  color: #787878;
  letter-spacing: 1.6px;
  margin: 0 0 30px;
  font-weight: 400;
}
.novice-box p {
  font-size: 14px;
  color: #787878;
  letter-spacing: 1px;
  text-align: justify;
  line-height: 2.14;
  font-weight: 400;
}

.swiper-number {
  width: 450px;
  position: absolute;
  left: -130px;
  bottom: 45px;
  z-index: 1;
  cursor: pointer;
}
.swiper-number img {
  width: 100%;
}

.swiper-next-info {
  width: 240px;
  position: absolute;
  right: 8px;
  bottom: -20px;
  z-index: 1;
  cursor: pointer;
}
.swiper-next-info p {
  font-size: 14px;
  color: #787878;
  letter-spacing: 2.2px;
  width: 190px;
  padding: 0 0 10px;
  background: url(/img/next_arrow.svg) no-repeat right 20px bottom;
  line-height: 1;
  margin: 0 auto 40px;
  transition: 0.3s ease-out;
}
.swiper-next-info img {
  width: 100%;
}
.swiper-next-info:hover p {
  background: url(/img/next_arrow.svg) no-repeat right 0 bottom;
}

.next-num {
  width: 240px;
}

.swiper-group {
  width: calc(100% - 320px);
  height: 100vh;
  background: #F4F2EF;
  padding: 133px 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;
  position: relative;
}

.swiper-inline-box {
  width: 1240px;
  margin: 0 120px 0 240px;
  overflow: hidden;
  position: relative;
}
.swiper-inline-box .item-pagin {
  text-align: right;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.swiper-inline-box .item-pagin .swiper-pagination-bullet {
  width: 30px;
  height: 5px;
  background: #DCDCDC;
  border-radius: 0;
  margin: 0 0 0 10px;
  opacity: 1;
}
.swiper-inline-box .item-pagin .swiper-pagination-bullet-active {
  background: #787878;
}

.know-the-oil-swiper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.w-prod {
  width: 530px;
}
.w-prod img {
  width: 100%;
}

.w-prod-info {
  width: 530px;
  margin: 0 0 110px;
}
.w-prod-info h2 {
  font-size: 30px;
  color: #000;
  letter-spacing: 3px;
  margin: 0 0 60px;
  font-weight: 500;
}

.swiper-group-2 .swiper-inline-box {
  width: calc(100% - 240px);
  margin: 0 0 0 240px;
}

.good-article-box {
  width: 280px;
}
.good-article-box h2 {
  font-size: 24px;
  color: #000;
  letter-spacing: 2.2px;
  font-weight: 500;
  line-height: 1.5;
  height: 72px;
  margin: 0 0 20px;
}
.good-article-box p {
  margin: 0 0 30px;
}
.good-article-box .btn-more {
  color: #000;
}

.g-article-cover {
  width: 100%;
  margin: 0 0 30px;
}
.g-article-cover img {
  width: 100%;
}

.swiper-group-3 .swiper-inline-box {
  width: calc(100% - 240px);
  margin: 0 0 0 240px;
}

.swiper-two-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.txt-swiper-box {
  width: 500px;
  overflow: hidden;
}
.txt-swiper-box p {
  margin: 0 0 30px;
}
.txt-swiper-box h2 {
  font-size: 30px;
  color: #000;
  letter-spacing: 3px;
  line-height: 1.53;
  margin: 0 0 40px;
}
.txt-swiper-box .two-group-pagin {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.txt-swiper-box .two-group-pagin .swiper-pagination-bullet {
  width: 30px;
  height: 5px;
  background: #DCDCDC;
  border-radius: 0;
  margin: 0 0 0 10px;
  opacity: 1;
}
.txt-swiper-box .two-group-pagin .swiper-pagination-bullet-active {
  background: #787878;
}

.buy-book {
  font-size: 13px;
  color: #A0A0A0;
  letter-spacing: 1.5px;
  width: 75px;
  font-weight: 400;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.buy-book img {
  margin: 0 10px 0 0;
}

.img-swiper-box {
  width: 640px;
}
.img-swiper-box .swiper-slide {
  transform: scale(0.85);
  opacity: 0.5;
  transition: 0.4s ease-in;
}
.img-swiper-box .swiper-slide-active {
  transform: scale(1);
  opacity: 1;
}
.img-swiper-box img {
  width: 100%;
}

@media screen and (max-width: 1800px) {
  .ban-group {
    height: 720px;
  }

  .intro-box {
    padding: 200px 0 0;
    background: #6FA287 url(/img/map.svg) no-repeat right -2% top 100px/58%;
  }

  .video-group {
    width: 90%;
    margin: 0 auto 100px;
  }

  .video-cover {
    width: 800px;
    margin: 0 90px 0 8%;
  }

  .prod-slide-box {
    padding: 200px 0;
  }

  .e-box {
    margin: 0 0 28px;
  }

  .invite-box {
    width: 90%;
    bottom: -90px;
  }
  .invite-box h3 {
    margin: 0 0 53px;
  }
  .invite-box p {
    height: 100px;
    overflow: hidden;
  }

  .invite-ban {
    width: 65%;
    height: auto;
  }

  .btn-inv {
    width: 75px;
  }

  .slide-mask {
    padding: 0 0 21.4% 20px;
  }

  .class-slide-group > p {
    padding: 0 120px 0 0;
  }

  .slide-mask-class {
    padding: 0 0 4.5% 20px;
  }
  .slide-mask-class h3 {
    font-size: 28px;
  }

  .blooming-box {
    padding: 160px 0 106px 0;
  }

  .blooming-group {
    height: 520px;
  }
  .blooming-group .swiper-pagination-bullets {
    padding: 0 60px 0 0;
  }

  .blooming-slide {
    width: 84%;
  }

  .btn-blooming-group {
    width: 16%;
  }

  .blooming-img {
    width: 65%;
    height: 100%;
  }
  .blooming-img img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }

  .blooming-info {
    width: 35%;
    padding: 60px 50px;
  }

  .blooming-sub {
    margin: 0px 0 30px;
  }

  .btn-blooming {
    width: 75px;
  }

  .f-img-group {
    min-height: 1000px;
  }

  .subscription-box {
    width: 34%;
  }

  .footer-sitemap {
    margin: 0 50px;
    padding: 60px 30px;
  }

  .footer-nav li {
    width: 180px;
  }

  .about-box {
    padding: 200px 120px 180px;
  }

  .art-a-img {
    height: 600px;
  }

  .founder-june {
    width: 480px;
    margin: 0 25px 0 0;
  }

  .founder-book {
    width: 310px;
  }

  .history-wrap {
    padding: 140px 0 0;
  }
  .history-wrap h2 {
    left: 50%;
  }

  .history-color {
    width: 550px;
  }

  .history-img {
    width: 45.5%;
  }

  .history-img-group {
    width: 100%;
    height: 474px;
  }

  .history-sub-bot {
    left: 40px;
  }

  .history-txt-group {
    width: 39%;
    left: 50%;
  }

  .main-prod-slide-group {
    padding: 200px 0 180px;
  }

  .prod-size span {
    padding: 0 8px 0 0;
    margin: 0 8px 0 0;
  }

  .product-list-box {
    max-width: 1400px;
  }

  .brand-top {
    margin: 0 0 160px;
  }

  .spin-game {
    width: 100%;
  }

  .how-box {
    width: 90%;
  }

  .trial-box {
    width: 90%;
  }

  .breadcrumbs-box {
    padding: 30px 80px;
  }

  .p-cont {
    width: 1320px;
  }

  .fn-box-1 {
    padding: 120px 0 290px 140px;
  }

  .f-cont-img {
    right: 140px;
  }

  .fn-box-2-cont {
    width: 1340px;
  }

  .fn-box-3 {
    padding: 120px 0 290px 140px;
  }

  .t-1-cont {
    width: 1340px;
  }

  .fn-8-bg {
    margin: 0 auto 0 9%;
  }

  .template-2 span {
    padding: 0 0 0 140px;
  }
  .template-2 h2 {
    padding: 0 0 0 140px;
  }

  .t-2-arrow-box {
    padding: 0 100px 0 140px;
  }

  .t-3-box {
    width: 1340px;
  }

  .t-4-box {
    width: 1340px;
  }

  .t-5-box {
    width: 1340px;
  }

  .product-cont-more-box {
    width: 1340px;
  }

  .fn-7-box {
    padding: 120px 0 120px 140px;
  }

  .f-7-cont-img {
    right: 140px;
  }

  .fn-7-txt-cont {
    width: 38%;
  }

  .cate-txt-area {
    padding: 140px 250px 0 160px;
  }

  .cate-product-slider-offset {
    width: calc(100% + 350px);
  }

  .product-canjune .brand-logo {
    margin: 130px auto 98px;
  }

  .not-found {
    padding: 140px 0 0;
  }
}
@media screen and (max-width: 1600px) {
  .btn-more {
    font-size: 14px;
  }

  .nav-box {
    height: 180px;
  }

  .s-nav-box {
    height: 110px;
    top: -110px;
  }
  .s-nav-box.on {
    transform: translateY(110px);
  }

  .page-nav {
    height: 110px;
    top: 0;
  }
  .page-nav.fix-top {
    transform: translateY(-110px);
  }
  .page-nav.on {
    transform: translateY(0);
  }

  .logo {
    width: 140px;
    height: 104px;
  }

  .s-logo {
    width: 50px;
    height: 53px;
  }

  .nav-main-sub-box {
    width: 460px;
    padding: 220px 60px 0 80px;
  }

  .nav-item {
    font-size: 14px;
    margin: 0 30px 0 0;
  }

  .fn-box a {
    font-size: 14px;
    margin: 0 0 0 30px;
  }

  .nav-sub-box {
    padding: 220px 0;
  }
  .nav-sub-box p {
    padding: 0 0 0 50px;
  }
  .nav-sub-box.on {
    width: 280px;
  }

  .nav-sub-group nav {
    top: 45px;
    left: 80px;
  }
  .nav-sub-group nav.on-index {
    top: 80px;
  }
  .nav-sub-group .nav-item {
    margin: 0 30px 0 0;
  }

  .btn-close {
    top: 45px;
    right: 30px;
  }
  .btn-close.on-index {
    top: 80px;
  }

  .breadcrumbs-box {
    margin: 0;
  }

  .ban-group {
    height: 615px;
  }

  .txt {
    font-size: 20px;
  }

  .btn-play {
    width: 100px;
    height: 100px;
  }
  .btn-play > img {
    width: 20px;
  }

  .video-group {
    width: 85%;
  }

  .video-cover {
    width: 51.1%;
    margin: 0 80px 0 8%;
  }

  .video-desc {
    margin: 30px 0 0 0;
  }
  .video-desc p {
    font-size: 50px;
  }
  .video-desc p.sub-p {
    font-size: 16px;
  }
  .video-desc p.sub-tw {
    font-size: 14px;
  }

  .invite-box {
    width: 85%;
  }
  .invite-box h2 {
    font-size: 60px;
    margin: 0 0 50px;
  }
  .invite-box h3 {
    font-size: 32px;
    margin: 0 0 33px;
  }
  .invite-box p {
    font-size: 15px;
    height: 60px;
    margin: 0 0 10px;
  }

  .invite-desc {
    width: 410px;
  }

  .e-box {
    margin: 0 0 30px;
  }

  .invite-ban {
    width: 60%;
  }
  .invite-ban .swiper-pagination-bullets {
    bottom: -32px;
  }
  .invite-ban .swiper-pagination-bullet {
    width: 40px;
    height: 8px;
  }

  .invite-swipper {
    width: calc(100% - 135px);
  }

  .btn-inv-group {
    width: 135px;
  }

  .btn-inv {
    width: 45px;
  }

  .btn-next {
    right: 4.1%;
  }

  .btn-prev {
    left: 4.1%;
  }

  .prod-slide-group .tags {
    padding: 0 0 0 5%;
    margin: 0 0 15px;
  }
  .prod-slide-group h2 {
    font-size: 60px;
    margin: 0 0 15px;
    padding: 0 0 0 5%;
  }
  .prod-slide-group > p {
    font-size: 20px;
    padding: 0 0 0 5%;
    margin: 0 0 70px;
  }

  .prod-slide-box {
    padding: 160px 0;
  }

  .slide-mask {
    width: 16.8%;
    left: 7.5%;
    padding: 0 0 17.7% 20px;
  }
  .slide-mask p {
    font-size: 22px;
  }
  .slide-mask h3 {
    font-size: 24px;
  }

  .sub-prod-name span {
    font-size: 14px;
    letter-spacing: 1.8px;
    margin: 0 0 0 5px;
  }
  .sub-prod-name .prod-en {
    font-size: 14px;
    letter-spacing: 1.5px;
    margin: 0 5px 0 0;
  }

  .prod-price {
    font-size: 14px;
    letter-spacing: 0.8px;
  }

  .class-slide-group > p {
    font-size: 20px;
    padding: 0 5% 0 0;
  }

  .class-slide-box h2 {
    font-size: 60px;
    padding: 0 5% 0 0;
  }

  .class-type {
    font-size: 14px;
    letter-spacing: 1.8px;
    padding: 0 5px 0 0;
  }

  .class-data {
    letter-spacing: 1.5px;
    font-size: 14px;
    padding: 0 0 0 5px;
  }

  .slide-mask-class {
    width: 16.8%;
    right: 7.5%;
    padding: 0 0 10.9% 20px;
  }
  .slide-mask-class h3 {
    font-size: 24px;
    width: 90%;
  }

  .class-icon {
    width: 50px;
    top: 18px;
    left: 18px;
  }

  .class-info {
    left: 20px;
  }
  .class-info h3 {
    font-size: 20px;
    line-height: 1.3;
  }

  .blooming-box {
    padding: 100px 0 106px 5%;
  }

  .blooming-box-area {
    padding: 0;
  }
  .blooming-box-area h2 {
    font-size: 60px;
    margin: 0 0 15px;
  }

  .blooming-info h3 {
    font-size: 32px;
  }

  .sub-bloming {
    font-size: 20px;
    margin: 0 0 50px;
  }

  .btn-blooming {
    width: 65px;
  }

  .blooming-group .swiper-pagination-bullets {
    padding: 0 50px 0 0;
  }

  .footer-nav li {
    width: 160px;
    padding: 0 0 0 15px;
  }

  .f-nav {
    left: 15px;
  }

  .copy-box {
    margin: 60px 0 0;
  }
  .copy-box span {
    padding: 0 20px 0 15px;
  }
  .copy-box a {
    padding: 0 20px;
  }

  .about-box {
    padding: 180px 8% 160px;
    margin: 360px auto 0;
  }

  .about-logo {
    width: 73.5%;
    top: -9%;
  }
  .about-logo img {
    width: 100%;
  }

  .about-info {
    width: 500px;
  }
  .about-info h2 {
    font-size: 40px;
  }
  .about-info span {
    font-size: 20px;
    margin: 0 0 100px;
  }
  .about-info p {
    font-size: 16px;
    line-height: 2;
  }

  .art-box {
    padding: 160px 8%;
  }
  .art-box h2 {
    font-size: 60px;
    margin: 0 0 15px;
  }

  .art-txt h3 {
    font-size: 38px;
  }

  .art-txt-cont {
    width: 50%;
  }

  .art-img-cont {
    width: 50%;
  }

  .art-desc {
    font-size: 16px;
    line-height: 2;
  }

  .art-a-box {
    padding: 80px 8% 160px;
  }

  .art-a-img-box {
    width: 60%;
  }

  .art-a h3 {
    font-size: 28px;
  }

  .idea-box {
    padding: 140px 8%;
  }
  .idea-box h2 {
    font-size: 60px;
    margin: 0 0 15px;
  }

  .art-h2-sub {
    font-size: 20px;
  }

  .idea-img {
    width: 45%;
  }
  .idea-img img {
    width: 100%;
  }

  .idea-support {
    width: 42%;
  }

  .plan-box h3 {
    font-size: 36px;
    margin: 0 0 50px;
  }
  .plan-box p {
    font-size: 16px;
    margin: 0 0 50px;
  }

  .num {
    font-size: 34px;
    width: 75px;
    height: 75px;
    margin: 0 0 50px;
  }

  .founder-box {
    padding: 120px 8% 140px;
  }
  .founder-box h2 {
    font-size: 60px;
    margin: 0 0 15px;
  }

  .founder-img {
    width: 30%;
  }
  .founder-img img {
    width: 100%;
  }

  .founder-cont {
    width: 65%;
  }
  .founder-cont h3 {
    font-size: 36px;
  }

  .founder-june {
    width: 56%;
  }

  .founder-book {
    width: 40%;
  }

  .history-wrap {
    padding: 110px 0 0;
  }
  .history-wrap h2 {
    font-size: 55px;
  }
  .history-wrap span {
    font-size: 18px;
    margin: 10px 0 0;
  }

  .history-color {
    width: 39%;
  }

  .history-img-group {
    height: 400px;
  }

  .history-sub-bot .swiper-pagination-bullet {
    width: 60px;
    height: 60px;
  }

  .history-txt-group {
    width: 39%;
  }

  .year {
    font-size: 55px;
  }

  .history-cont ol {
    font-size: 15px;
  }

  .product-main-ban {
    margin: 110px 0 0;
  }

  .main-prod-slide-group {
    padding: 180px 0 160px;
  }
  .main-prod-slide-group h2 {
    padding: 0 0 0 120px;
  }

  .main-prod-slide-box > p {
    padding: 0 0 0 120px;
  }

  .prod-img-cover {
    margin: 0 0 20px;
  }

  .brand-info {
    margin: 0 0 15px;
  }

  .prod-info h3 {
    margin: 0 0 15px;
  }

  .product-box {
    padding: 0 0 0 120px;
  }

  .product-list-box {
    max-width: 1330px;
  }

  .brand-top {
    height: 440px;
    padding: 110px 0 0;
    margin: 0 0 140px;
  }

  .brand-logo {
    width: 260px;
    margin: 80px auto 50px;
  }

  .brand-products-top {
    padding: 110px 0 92px;
  }

  .anius-type-box {
    width: 620px;
  }
  .anius-type-box p {
    font-size: 16px;
  }
  .anius-type-box .sel-txt {
    font-size: 14px;
    padding: 15px 16px 15px 0;
  }

  .anius-type-submit {
    font-size: 14px;
  }

  .more-btn {
    top: -13px;
    right: -18px;
  }

  .more-ani {
    width: 40px;
    height: 40px;
  }

  .anius-event-slider {
    width: 1200px;
  }

  .e-en {
    font-size: 50px;
    top: -35px;
  }

  .e-cont h2 {
    font-size: 32px;
    margin: 0 0 40px;
  }
  .e-cont span {
    font-size: 13px;
  }
  .e-cont p {
    font-size: 14px;
  }

  .anius-e-bxo img {
    width: 65%;
  }

  .spin-game-box {
    height: 530px;
  }

  .spin-game {
    top: -190px;
    transform: scale(0.75);
  }

  .spin-box h2 {
    font-size: 50px;
    margin: 0 0 15px;
  }
  .spin-box h3 {
    font-size: 18px;
    margin: 0 0 80px;
  }

  .skin-group h2 {
    font-size: 50px;
    margin: 0 0 15px;
  }
  .skin-group h3 {
    font-size: 18px;
  }

  .act-jar {
    width: 26px;
    top: 293px;
  }
  .act-jar .more-btn {
    width: 22px;
    top: -19px;
    right: -28px;
  }

  .btn-spin {
    width: 90px;
  }

  .skin-left {
    height: 780px;
    padding: 120px 0 0 100px;
  }

  .skin-right {
    height: 780px;
  }

  .skin-img {
    width: 480px;
  }

  .skin-img-2 {
    width: 480px;
  }

  .skin-link {
    width: 37px;
    height: 37px;
  }

  .emotions-box {
    padding: 120px 100px;
  }

  .emotions-img h4 {
    font-size: 18px;
  }

  .anius-oil-info-box {
    padding: 130px 100px;
  }
  .anius-oil-info-box h2 {
    letter-spacing: 2px;
  }

  .info-tab-box {
    width: 1000px;
  }

  .tab-box {
    font-size: 16px;
    padding: 2px 45px;
  }

  .part-of-plant-group h2 {
    font-size: 50px;
    margin: 0 0 15px;
  }
  .part-of-plant-group h3 {
    font-size: 18px;
  }

  .categories-group h2 {
    font-size: 50px;
    margin: 0 0 15px;
  }
  .categories-group h3 {
    font-size: 18px;
  }

  .perfume-sty-box h2 {
    font-size: 50px;
    margin: 0 0 15px;
  }
  .perfume-sty-box h3 {
    font-size: 18px;
  }

  .anius-origin-slider p {
    font-size: 15px;
  }

  .brand-series-top {
    padding: 110px 0 10px;
  }
  .brand-series-top .brand-logo {
    margin: 120px auto 80px;
  }

  .series-info {
    padding: 140px 9%;
  }
  .series-info h2 {
    font-size: 30px;
    margin: 0 0 60px;
  }
  .series-info > p {
    font-size: 15px;
  }

  .anius-series-type a {
    font-size: 16px;
    padding: 20px 30px;
  }

  .anius-series-sub-type-group a {
    font-size: 14px;
    padding: 0 25px;
  }

  .ingredients-item img {
    margin: 0 30px 0 0;
  }

  .file-box p {
    font-size: 15px;
  }

  .how-group {
    margin: 110px 0 0;
  }

  .how-cont {
    padding: 80px;
  }
  .how-cont h3 {
    font-size: 36px;
  }

  .how-item-group {
    min-height: 500px;
  }

  .how-item h4 {
    font-size: 16px;
    margin: 0 0 15px;
  }
  .how-item p {
    font-size: 15px;
  }

  .trial-group {
    margin: 110px 0 100px;
  }

  .p-cont-box {
    margin: 110px 0 0;
  }
  .p-cont-box .product-list-box {
    width: 100%;
    max-width: none;
    padding: 0 9%;
  }

  .p-cont {
    width: 100%;
    padding: 0 9% 90px;
  }

  .p-cover {
    width: 620px;
  }

  .fn-box-1 {
    padding: 90px 0 240px 9%;
  }
  .fn-box-1 h2 {
    font-size: 28px;
  }

  .f-cont {
    min-height: 500px;
    padding: 60px;
  }
  .f-cont p {
    margin: 0;
  }

  .f-cont-img {
    width: 600px;
    right: 50px;
  }

  .fn-box-2-cont {
    width: auto;
    margin: 0 9%;
  }

  .fn-2-left {
    top: -150px;
  }
  .fn-2-left h3 {
    font-size: 26px;
    height: 150px;
  }

  .fn-2-rihgt {
    top: -150px;
  }
  .fn-2-rihgt h3 {
    font-size: 26px;
    height: 150px;
  }

  .fn-list li {
    font-size: 15px;
  }

  .fn-box-3 {
    padding: 70px 0 190px 60px;
  }

  .fn-8 {
    padding: 80px 0 0 0;
  }

  .fn-8-bg {
    padding: 100px;
    margin: 0 auto 0 9%;
  }
  .fn-8-bg h2 {
    font-size: 28px;
  }
  .fn-8-bg p {
    font-size: 16px;
  }

  .t-1-cont {
    width: auto;
    padding: 100px 0;
    margin: 0 9%;
  }

  .t-img {
    width: 54%;
  }

  .t-group p {
    font-size: 15px;
  }

  .template-2 {
    padding: 90px 0 120px;
  }
  .template-2 span {
    font-size: 24px;
    padding: 0 0 0 9%;
    margin: 0 0 25px;
  }
  .template-2 h2 {
    padding: 0 0 0 9%;
  }

  .cricle-txt {
    font-size: 20px;
  }

  .ar-group h3 {
    font-size: 18px;
  }
  .ar-group p {
    font-size: 15px;
  }

  .template-6 h2 {
    padding: 0 60px;
  }

  .fn-7-box {
    padding: 100px 0 100px 60px;
  }

  .fn-7-txt-cont {
    width: 42%;
  }

  .f-7-cont-img {
    width: 600px;
    right: 50px;
    top: -50px;
  }

  .t-2-arrow-box {
    padding: 0 90px 0 9%;
    margin: 0 140px 0 0;
  }

  .template-3 {
    padding: 120px 0;
  }

  .t-3-box {
    font-size: 28px;
    width: 100%;
    padding: 0 9%;
  }
  .t-3-box h2 {
    font-size: 28px;
  }
  .t-3-box li {
    font-size: 19px;
  }

  .template-4 {
    padding: 160px 0;
  }

  .t-4-box {
    width: 100%;
    padding: 0 9%;
  }

  .t-4-txt {
    width: 550px;
  }
  .t-4-txt span {
    font-size: 15px;
  }
  .t-4-txt h2 {
    font-size: 28px;
  }
  .t-4-txt p {
    font-size: 15px;
  }

  .template-5 {
    padding: 140px 0;
  }

  .t-5-box {
    width: auto;
    margin: 0 9%;
  }
  .t-5-box h2 {
    font-size: 28px;
  }
  .t-5-box h3 {
    font-size: 16px;
  }

  .t-5-txt-group h4 {
    font-size: 15px;
  }
  .t-5-txt-group p {
    font-size: 15px;
  }

  .add-on-box {
    width: 100%;
    overflow: hidden;
  }
  .add-on-box h2 {
    font-size: 28px;
  }
  .add-on-box .product-list-box .prod-img {
    width: auto;
  }

  .product-cont-more {
    padding: 60px 0 100px;
  }

  .product-cont-more-box {
    width: auto;
    margin: 0 9%;
  }
  .product-cont-more-box h2 {
    font-size: 28px;
  }

  .product-similar {
    padding: 100px 0;
  }
  .product-similar h2 {
    font-size: 28px;
  }

  .oshadhi-sty .fn-box-3-slider {
    width: 90%;
  }
  .oshadhi-sty .scroll-box .fn-list {
    max-height: 360px;
  }

  .canjune-sty .fn-box-3-slider {
    width: 90%;
  }
  .canjune-sty .slider-e-cont {
    padding: 70px 60px;
  }

  .other-sty .fn-box-3-slider {
    width: 90%;
  }
  .other-sty .slider-e-cont {
    padding: 70px 60px;
  }

  .part-of-plant-box {
    padding: 120px 100px;
  }

  .part-icon-group {
    padding: 100px 100px 20px;
  }

  .part-icon-box p {
    font-size: 16px;
  }

  .part-icon {
    width: 140px;
    height: 140px;
  }

  .categories-box {
    padding: 100px 100px 0;
  }

  .cate-txt-area {
    padding: 140px 200px 0 100px;
  }
  .cate-txt-area h4 {
    font-size: 35px;
  }
  .cate-txt-area p {
    font-size: 15px;
  }

  .perfume-sty-box {
    padding: 100px 100px;
  }

  .perfume-img span {
    font-size: 16px;
  }

  .canjune-ind-box {
    padding: 0 60px 160px;
  }

  .c-main-info {
    padding: 90px;
  }
  .c-main-info h2 {
    margin: 0 0 100px;
  }
  .c-main-info p {
    font-size: 16px;
  }

  .not-found {
    padding: 120px 0 0;
  }

  .empty-bag {
    padding: 110px 0 0;
  }

  .empty-cont {
    width: 80%;
  }
  .empty-cont h2 {
    font-size: 50px;
  }

  .connect-group {
    padding: 110px 0 0;
  }
}
@media screen and (max-width: 1400px) {
  .btn-more {
    font-size: 13px;
    width: 145px;
  }
  .btn-more:hover .a-arrow {
    transform: translateX(10px);
  }

  .nav-box {
    height: 150px;
    padding: 0 60px;
  }

  .s-nav-box {
    height: 100px;
    top: -100px;
  }
  .s-nav-box.on {
    transform: translateY(100px);
  }

  .page-nav {
    height: 100px;
  }

  .logo {
    width: 120px;
    height: 89px;
  }

  .nav-item {
    font-size: 13px;
    margin: 0 25px 0 0;
  }

  .s-logo {
    width: 45px;
    height: 48px;
  }

  .fn-box a {
    font-size: 13px;
    margin: 0 0 0 25px;
  }

  .yt-video {
    width: 80%;
    padding-bottom: 45.4%;
  }

  .nav-sub-group nav {
    width: auto;
    top: 40px;
    left: 60px;
  }
  .nav-sub-group nav.on-index {
    top: 66px;
  }
  .nav-sub-group .nav-item {
    margin: 0 25px 0 0;
  }

  .btn-close {
    top: 40px;
  }
  .btn-close.on-index {
    top: 66px;
  }

  .nav-main-sub-box {
    width: 400px;
    padding: 220px 40px 0 60px;
  }
  .nav-main-sub-box a {
    font-size: 16px;
  }

  .nav-sub-box p {
    padding: 0 40px;
  }
  .nav-sub-box a {
    font-size: 16px;
  }
  .nav-sub-box.on {
    width: 240px;
  }
  .nav-sub-box .font-s a {
    font-size: 13px;
  }

  .bag-box .btn-submit {
    font-size: 13px;
  }

  .breadcrumbs-box {
    padding: 30px 60px;
  }

  .ban-group {
    height: 530px;
  }

  .ban-box:hover .px {
    height: 80px;
  }

  .ban-txt {
    font-size: 28px;
    letter-spacing: 3.4px;
  }
  .ban-txt span {
    font-size: 16px;
    letter-spacing: 2px;
  }

  .txt {
    font-size: 17px;
  }

  .intro-box {
    padding: 160px 0 0;
  }

  .mouse-inv {
    width: 28px;
  }

  .video-group {
    margin: 0 auto 70px;
  }

  .video-cover {
    margin: 0 60px 0 6%;
  }

  .btn-play {
    width: 80px;
    height: 80px;
  }
  .btn-play img {
    width: 18px;
  }

  .play-out-cricle img {
    width: 100%;
  }

  .video-desc p {
    font-size: 44px;
  }

  .e-box {
    font-size: 13px;
    margin: 0 0 15px;
  }

  .invite-box {
    bottom: -70px;
  }
  .invite-box h2 {
    font-size: 50px;
    margin: 0 0 40px;
  }
  .invite-box h3 {
    font-size: 28px;
    margin: 0 0 20px;
  }
  .invite-box p {
    font-size: 14px;
    margin: 0 0 5px;
  }

  .invite-ban {
    width: 53%;
  }

  .invite-swipper {
    width: calc(100% - 80px);
  }

  .btn-inv-group {
    width: 80px;
  }

  .btn-inv {
    width: 45px;
  }

  .prod-slide-group h2 {
    font-size: 50px;
  }
  .prod-slide-group > p {
    margin: 0 0 40px;
  }

  .prod-slide-box {
    padding: 110px 0 150px;
  }

  .mouse-evt {
    width: 80px;
    height: 80px;
  }

  .mouse-cricle {
    width: 80px;
    height: 80px;
  }

  .mouse-center {
    width: 40px;
    height: 40px;
  }

  .prod-img-cover {
    margin: 0 0 20px;
  }

  .slide-mask {
    width: 25.6%;
    left: 11.7%;
    padding: 0 0 18.4% 20px;
  }
  .slide-mask p {
    font-size: 20px;
  }
  .slide-mask h3 {
    font-size: 28px;
  }

  .oil-slide .swiper-slide:nth-of-type(odd) .prod-img {
    transform: translateY(-30px);
  }
  .oil-slide .swiper-slide:nth-of-type(even) .prod-img {
    transform: translateY(30px);
  }

  .prod-info h3 {
    font-size: 15px;
    letter-spacing: 2.4px;
    width: 100%;
    margin: 0 0 13px;
  }

  .sub-prod-name {
    font-size: 13px;
  }
  .sub-prod-name span {
    margin: 0 0 0 8px;
  }
  .sub-prod-name .prod-en {
    margin: 0 10px 0 0;
  }

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

  .prod-slide-group > p {
    font-size: 18px;
  }

  .brand-info {
    margin: 0 0 13px;
  }

  .btn-next {
    width: 50px;
    height: 50px;
    right: 6.5%;
  }

  .btn-prev {
    width: 50px;
    height: 50px;
    left: 6.5%;
  }

  .b-cricle-box {
    width: 34px;
    height: 34px;
  }

  .class-slide-box {
    padding: 110px 0 150px;
  }

  .class-slide-group > p {
    font-size: 18px;
  }

  .class-slide .swiper-slide:nth-of-type(odd) .class-img {
    transform: translateY(-30px);
  }

  .class-icon {
    width: 44px;
    top: 13px;
    left: 13px;
  }

  .class-sub {
    font-size: 13px;
    margin: 0 0 13px;
  }

  .class-type {
    font-size: 13px;
    padding: 0 5px 0 0;
  }

  .class-data {
    font-size: 13px;
    padding: 0 0 0 5px;
  }

  .class-info {
    bottom: 80px;
  }

  .slide-mask-class {
    width: 25.6%;
    right: 11.7%;
    padding: 0 0 10.9% 20px;
  }
  .slide-mask-class h3 {
    font-size: 28px;
  }

  .blooming-box-area h2 {
    font-size: 50px;
  }

  .sub-bloming {
    font-size: 18px;
  }

  .blooming-group {
    height: 420px;
  }
  .blooming-group .swiper-pagination-bullets {
    padding: 0 40px 0 0;
    bottom: -28px;
  }

  .blooming-img {
    width: 60%;
  }

  .blooming-sub {
    margin: 0px 0 20px;
  }

  .bloming-data {
    font-size: 13px;
  }

  .bloming-type {
    font-size: 13px;
  }

  .blooming-info {
    width: 45%;
    padding: 45px 40px;
  }
  .blooming-info h3 {
    font-size: 30px;
  }

  .f-img-group {
    min-height: 900px;
  }

  .f-img-1 {
    bottom: 54.8%;
  }

  .subscription-box {
    width: 39%;
  }
  .subscription-box h3 {
    font-size: 22px;
  }
  .subscription-box p {
    margin: 0px 0 30px;
  }

  .media-box .media-item:nth-of-type(1) {
    padding: 0 20px 0 0;
  }
  .media-box .media-item:nth-of-type(4) {
    padding: 0 0 0 20px;
  }

  .media-item {
    padding: 0 20px;
  }

  .footer-sitemap {
    width: 90%;
    margin: 0 auto;
    padding: 30px 10px;
  }

  .footer-nav h3 {
    font-size: 20px;
  }
  .footer-nav li {
    width: 150px;
    height: 180px;
  }

  .connect {
    width: 250px;
    height: 180px;
    padding: 0 0 0 15px;
  }
  .connect h3 {
    font-size: 20px;
  }
  .connect a {
    font-size: 14px;
    letter-spacing: 1.2px;
  }
  .connect p {
    font-size: 14px;
    letter-spacing: 1.2px;
  }
  .connect .f-nav {
    left: 15px;
  }

  .about-box {
    margin: 320px auto 0;
    padding: 180px 8% 140px;
  }

  .about-info {
    width: 45%;
    height: auto;
  }
  .about-info span {
    font-size: 18px;
    margin: 0 0 60px;
  }
  .about-info h2 {
    font-size: 36px;
    margin: 0 0 50px;
  }
  .about-info p {
    font-size: 15px;
    position: static;
    margin: 0 0 70px;
  }

  .btn-history {
    position: static;
  }

  .about-img {
    width: 40%;
    height: auto;
  }
  .about-img img {
    width: 100%;
  }

  .art-box {
    padding: 140px 8%;
  }
  .art-box h2 {
    font-size: 50px;
  }

  .art-h2-sub {
    font-size: 16px;
  }

  .art-list-box {
    align-items: stretch;
  }

  .art-txt-cont {
    height: auto;
  }

  .art-txt {
    top: 60px;
    right: 60px;
    bottom: 60px;
    left: 60px;
  }
  .art-txt span {
    font-size: 14px;
    margin: 0 0 30px;
  }
  .art-txt h3 {
    font-size: 32px;
    margin: 0 0 30px;
  }
  .art-txt p {
    position: static;
    margin: 0 0 20px;
  }
  .art-txt a.btn-more {
    position: static;
    margin: 20px 0 0;
  }

  .art-desc {
    font-size: 15px;
    letter-spacing: 1.8px;
    line-height: 1.9;
  }

  .art-img-cont {
    height: auto;
    min-height: 520px;
  }

  .art-img {
    width: 78%;
    height: 400px;
    margin: 0 0 20px 0;
    background-size: contain;
  }

  .art-img-tit {
    font-size: 16px;
    bottom: 32px;
  }

  .art-a-img {
    height: 480px;
    margin: 0 0 30px;
  }
  .art-a-img img {
    width: 100%;
  }
  .art-a-img span {
    font-size: 14px;
    bottom: 14%;
  }

  .art-a-box {
    padding: 70px 8% 140px;
  }

  .art-a h3 {
    font-size: 24px;
    margin: 0 0 23px;
  }
  .art-a p {
    font-size: 14px;
  }

  .idea-box h2 {
    font-size: 50px;
  }

  .num {
    font-size: 30px;
    width: 65px;
    height: 65px;
    margin: 0 0 40px;
  }

  .plan-box {
    margin: 0 0 230px;
  }
  .plan-box h3 {
    font-size: 32px;
    margin: 0 0 40px;
  }
  .plan-box p {
    font-size: 15px;
    margin: 0 0 40px;
  }

  .founder-box h2 {
    font-size: 50px;
  }

  .founder-img {
    height: auto;
  }

  .founder-cont {
    width: 67%;
  }
  .founder-cont h3 {
    font-size: 32px;
  }

  .founder-june {
    width: 52%;
  }
  .founder-june p {
    font-size: 15px;
    margin: 0 0 30px;
  }

  .founder-book p {
    font-size: 13px;
    margin: 0 0 20px;
  }

  .history-wrap {
    padding: 100px 0 0;
  }
  .history-wrap h2 {
    left: 49%;
  }
  .history-wrap span {
    margin: 10px 0 0;
  }

  .history-img-group {
    height: 340px;
  }

  .history-sub-bot {
    left: 20px;
  }
  .history-sub-bot .swiper-pagination-bullet {
    width: 60px;
    height: 60px;
  }

  .history-txt-group {
    left: 49%;
  }

  .year-swiper-box {
    right: -30px;
  }

  .history-cont h3 {
    font-size: 24px;
  }
  .history-cont ol {
    font-size: 14px;
  }

  .product-main-ban {
    margin: 100px 0 0;
  }

  .main-prod-slide-group {
    padding: 140px 0 160px;
  }
  .main-prod-slide-group h2 {
    padding: 0 0 0 80px;
  }

  .main-prod-slide-box h2 {
    font-size: 50px;
    margin: 0 0 10px;
  }
  .main-prod-slide-box > p {
    font-size: 18px;
    padding: 0 0 0 80px;
  }

  .product-box {
    padding: 0 0 0 80px;
  }

  .prod-price {
    font-size: 13px;
  }

  .prod-size {
    font-size: 13px;
  }

  .sel-ui-box {
    width: 68%;
  }

  .sel-search {
    width: 32%;
  }

  .sel-ui {
    margin: 0 20px 0 0;
  }

  .product-list-box {
    width: 1100px;
  }

  .product-filter-box {
    margin: 0 0 35px;
  }

  .product-list-box .prod-img {
    margin: 0 0 50px;
  }

  .brand-top {
    height: 380px;
    padding: 100px 0 0;
    margin: 0 0 120px;
  }

  .brand-logo {
    margin: 70px auto 50px;
    width: 220px;
  }

  .prod-type-panel {
    font-size: 13px;
  }
  .prod-type-panel p {
    font-size: 13px;
  }
  .prod-type-panel input[type=checkbox] {
    margin: 0 3px 0 0;
  }

  .type-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .type-scroll-box {
    width: 1300px;
  }

  .brand-products-top {
    padding: 100px 0 80px;
  }

  .anius-event-box {
    padding: 130px 0;
  }

  .anius-event-slider {
    width: 1000px;
  }

  .e-cont {
    width: 500px;
    padding: 0 50px 40px 50px;
    margin: 0 -60px 0 0;
  }
  .e-cont h3 {
    margin: 0 0 20px;
  }
  .e-cont h2 {
    font-size: 28px;
    margin: 0 0 20px;
  }
  .e-cont p {
    font-size: 14px;
  }

  .e-en {
    font-size: 44px;
    top: -27px;
  }

  .pop-prod-cont p {
    font-size: 14px;
    letter-spacing: 1px;
  }

  .anius-e-bxo img {
    width: 62%;
  }

  .spin-box h3 {
    margin: 0 0 40px;
  }

  .act-jar {
    width: 24px;
    top: 258px;
  }
  .act-jar .more-btn {
    width: 20px;
    right: -25px;
  }

  .btn-spin {
    bottom: 40px;
  }

  .spin-game {
    top: -230px;
    transform: scale(0.7);
  }

  .spin-game-box {
    height: 500px;
  }

  .skin-box {
    align-items: stretch;
  }

  .skin-left {
    height: auto;
    padding: 100px 0 0 80px;
  }

  .skin-group h3 {
    margin: 0 0 130px;
  }

  .skin-img {
    position: relative;
    bottom: auto;
    right: auto;
    width: 80%;
    margin: 0 0 0 20%;
  }

  .skin-right {
    height: auto;
    padding: 0 80px 0 0;
  }

  .skin-img-2 {
    position: relative;
    top: auto;
    bottom: auto;
    width: 80%;
    margin: 102px 0 0;
  }
  .skin-img-2 .btn-more {
    margin: 30px 0 0 0;
  }

  .emotions-box {
    padding: 100px 80px;
    overflow: hidden;
  }

  .emotions-slide {
    margin: 100px 0;
  }

  .emotions-img h4 {
    font-size: 17px;
  }

  .anius-oil-info-box {
    padding: 110px 50px;
  }
  .anius-oil-info-box h2 {
    font-size: 36px;
    margin: 0 0 50px;
  }
  .anius-oil-info-box p {
    font-size: 16px;
  }

  .tab-box {
    font-size: 16px;
    padding: 2px 35px;
  }

  .info-tab-box {
    width: auto;
    margin: 0 0 50px;
  }

  .anius-origin-slider {
    width: 1000px;
    margin: 0 auto 60px;
  }
  .anius-origin-slider p {
    font-size: 16px;
  }

  .anius-origin-logo-slider {
    width: 1000px;
    margin: 0 auto 80px;
  }

  .anius-oil-principle {
    padding: 80px 100px 0;
  }

  .logo-slide-box {
    width: 110px;
  }

  .brand-series-top {
    padding: 100px 0 10px;
  }
  .brand-series-top .brand-logo {
    margin: 100px auto 70px;
  }

  .anius-series-type a {
    font-size: 16px;
    padding: 20px;
  }

  .anius-series-sub-type {
    margin: 20px 0 10px;
  }
  .anius-series-sub-type a {
    font-size: 13px;
    padding: 0 25px;
  }

  .series-info {
    padding: 110px 9%;
  }
  .series-info h2 {
    font-size: 26px;
    margin: 0 0 50px;
  }
  .series-info > p {
    font-size: 14px;
    margin: 0 0 50px;
  }

  .ingredients-item {
    margin: 0 0 60px;
  }
  .ingredients-item img {
    width: 75px;
  }

  .ingredients-item-cont h3 {
    font-size: 15px;
  }
  .ingredients-item-cont p {
    font-size: 14px;
  }

  .file-box p {
    font-size: 14px;
  }

  .how-group {
    margin: 100px 0 0;
    padding: 120px 0 0;
  }
  .how-group::before {
    height: 540px;
  }

  .how-box h2 {
    font-size: 52px;
    margin: 0 0 50px;
  }
  .how-box h2 p {
    font-size: 20px;
    margin: 10px 0 0;
  }

  .how-cont {
    padding: 60px;
  }
  .how-cont h3 {
    margin: 0 0 38px;
  }

  .how-item-group {
    min-height: 440px;
  }

  .how-item {
    margin: 0 0 40px;
  }
  .how-item h4 {
    margin: 0 0 10px;
  }

  .trial-group {
    margin: 100px 0 100px;
    padding: 130px 0 90px;
  }

  .trial-box h2 {
    font-size: 52px;
    margin: 0 0 40px;
  }
  .trial-box > p {
    font-size: 20px;
    margin: 0 0 35px;
  }

  .p-cont-box {
    margin: 100px 0 0;
  }

  .p-cover {
    width: 55%;
  }

  .p-detail {
    width: 40%;
  }

  .f-cont-img {
    width: 46%;
  }

  .f-cont {
    min-height: 420px;
  }
  .oil-characteristic li {
    margin: 0 20px 20px 0;
  }

  .fn-box-1 {
    padding: 90px 0 140px 9%;
  }
  .fn-box-1 h2 {
    font-size: 26px;
  }

  .fn-2-left {
    top: -130px;
  }
  .fn-2-left h3 {
    font-size: 24px;
    height: 130px;
    line-height: 130px;
  }

  .fn-2-rihgt {
    top: -130px;
  }
  .fn-2-rihgt h3 {
    font-size: 24px;
    height: 130px;
    line-height: 130px;
  }

  .fn-list li {
    font-size: 14px;
  }

  .fn-8-bg h2 {
    font-size: 26px;
  }
  .fn-8-bg p {
    font-size: 15px;
  }

  .t-1-cont {
    align-items: flex-start;
    padding: 80px 0;
  }

  .t-txt-group {
    width: 36%;
  }
  .t-txt-group .t-group:first-child {
    padding: 0 0 30px;
  }

  .t-group span {
    font-size: 15px;
    margin: 0 0 15px;
  }
  .t-group h2 {
    font-size: 22px;
    margin: 0 0 30px;
  }
  .t-group p {
    font-size: 14px;
  }

  .template-2 span {
    font-size: 22px;
    margin: 0 0 15px;
  }
  .template-2 h2 {
    font-size: 26px;
    margin: 0 0 40px;
  }

  .cricle-txt {
    font-size: 18px;
  }

  .t-2-arrow-box {
    margin: 0 90px 0 0;
  }

  .ar-tit-group {
    width: calc(100% - 120px);
  }

  .ar-group h3 {
    font-size: 16px;
    padding: 0 0 10px;
    margin: 0 0 10px;
  }
  .ar-group p {
    font-size: 14px;
  }

  .template-3 {
    padding: 100px 0;
  }

  .t-3-box h2 {
    font-size: 26px;
    margin: 0 0 70px;
  }
  .t-3-box ul {
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
  }
  .t-3-box li {
    font-size: 17px;
    padding: 30px 20px;
  }

  .template-4 {
    padding: 120px 0;
  }

  .t-4-txt {
    width: 450px;
    padding: 60px;
  }
  .t-4-txt span {
    font-size: 14px;
  }
  .t-4-txt h2 {
    font-size: 26px;
  }
  .t-4-txt p {
    font-size: 14px;
  }

  .template-5 {
    padding: 120px 0;
  }

  .t-5-box h2 {
    font-size: 26px;
    margin: 0 0 20px;
  }
  .t-5-box h3 {
    font-size: 15px;
    padding: 12px 19px;
  }
  .t-5-box img {
    margin: 0 18px 0 0;
  }

  .t-5-txt-group {
    padding: 20px 18px;
  }
  .t-5-txt-group h4 {
    font-size: 14px;
    margin: 0 0 6px;
  }
  .t-5-txt-group p {
    font-size: 14px;
  }

  .template-6 span {
    font-size: 22px;
    margin: 0 0 15px;
  }
  .template-6 h2 {
    font-size: 26px;
    margin: 0 0 40px;
  }

  .t-6-arrow-box {
    width: 100%;
    min-height: auto;
    padding: 0 60px;
    transform: translateX(30px);
  }

  .t-6-ar-group {
    background: url(/img/t_3_arrow_oshadhi.svg) no-repeat right 25px center;
    padding: 0 70px 0 0;
  }
  .t-6-ar-group h3 {
    font-size: 18px;
    padding: 0 0 10px;
    margin: 0 0 10px;
  }
  .t-6-ar-group p {
    font-size: 16px;
  }

  .t-6-ar-tit-group {
    width: calc(100% - 120px);
  }

  .fn-7-box {
    padding: 90px 0 90px 60px;
  }

  .f-7-cont {
    padding: 60px;
  }

  .f-7-cont-img {
    width: 45%;
  }

  .fn-7-txt-cont {
    width: 40%;
  }

  .add-on-box h2 {
    font-size: 26px;
  }

  .product-cont-more-box h2 {
    font-size: 26px;
    margin: 0 0 45px;
  }
  .product-cont-more-box h3 {
    font-size: 18px;
  }
  .product-cont-more-box li {
    padding: 0 0 24px;
    margin: 0 0 24px;
  }

  .p-news-date {
    font-size: 13px;
    letter-spacing: 2px;
    margin: 0 0 12px;
  }

  .product-similar h2 {
    font-size: 26px;
  }

  .fixed-infor a:hover p {
    transform: translate(-100px, 14px);
  }
  .fixed-infor a p {
    transform: translate(-70px, 14px);
  }
  .fixed-infor a.f-line {
    background: #fff url(/img/icon_line_add.svg) no-repeat center center/28px;
  }
  .fixed-infor a.f-calculator {
    background: #fff url(/img/icon_calculator.svg) no-repeat center center/18px;
  }
  .fixed-infor a.f-information {
    height: 62px;
    background: url(/img/icon_information.svg) no-repeat center center/49px;
  }

  .oshadhi-sty .scroll-box .fn-list {
    max-height: 310px;
  }
  .oshadhi-sty .fn-box-3-slider {
    width: auto;
    margin: 0 60px;
  }
  .oshadhi-sty .fn-box-3 {
    padding: 90px 0;
  }
  .oshadhi-sty .slider-e-cont {
    padding: 70px 50px;
  }

  .canjune-sty .fn-box-3-slider {
    width: auto;
    margin: 0 60px;
  }
  .canjune-sty .fn-box-3 {
    padding: 90px 0;
  }
  .canjune-sty .slider-e-cont {
    padding: 50px;
  }
  .canjune-sty .slider-e-cont span {
    margin: 0 0 25px;
  }
  .canjune-sty .slider-e-cont h2 {
    margin: 0 0 35px;
  }

  .other-sty .fn-box-3-slider {
    width: auto;
    margin: 0 60px;
  }
  .other-sty .fn-box-3 {
    padding: 90px 0;
  }
  .other-sty .slider-e-cont {
    padding: 50px;
  }
  .other-sty .slider-e-cont span {
    margin: 0 0 25px;
  }
  .other-sty .slider-e-cont h2 {
    margin: 0 0 35px;
  }

  .part-of-plant-box {
    padding: 100px 50px;
  }
  .part-of-plant-box::after {
    top: 100px;
  }

  .part-icon-group {
    padding: 90px 80px 20px;
  }
  .part-icon-group p {
    font-size: 15px;
  }

  .part-icon {
    width: 120px;
    height: 120px;
    background-size: 50%;
  }

  .categories-box {
    padding: 100px 50px 0;
  }

  .cate-txt-area {
    padding: 140px 150px 0 50px;
  }

  .perfume-sty-box {
    padding: 100px 50px;
  }

  .perfume-img {
    height: 250px;
  }
  .perfume-img span {
    font-size: 15px;
  }

  .product-canjune .anius-series-sub-type {
    margin: 20px 0;
  }

  .canjune-ind-box {
    padding: 0 60px 120px;
  }

  .c-main-info {
    padding: 80px;
  }
  .c-main-info h2 {
    font-size: 36px;
    margin: 0 0 80px;
  }
  .c-main-info p {
    font-size: 15px;
    margin: 0 0 20px;
  }

  .c-main-prod-list {
    min-height: 520px;
    margin: 0 0 40px;
  }

  .empty-bag {
    padding: 100px 0 0;
  }

  .empty-cont {
    width: 80%;
  }

  .connect-group {
    padding: 100px 0 0;
  }

  .connect-cont-box {
    width: 700px;
  }
}
@media screen and (max-width: 1200px) {
  .nav-box {
    padding: 0 25px;
  }

  .breadcrumbs-box {
    padding: 20px 25px;
  }

  .s-nav-box {
    height: 100px;
    top: -100px;
  }
  .s-nav-box.on {
    transform: translateY(100px);
  }

  .page-nav {
    height: 100px;
  }
  .page-nav.fix-top {
    transform: translateY(-100px);
  }
  .page-nav.on {
    transform: translateY(0);
  }

  .s-logo {
    width: 50px;
    height: 53px;
  }

  .nav-sub-group nav {
    left: 25px;
  }

  .nav-item {
    font-size: 14px;
    margin: 0 25px 0 0;
  }

  .fn-box a {
    font-size: 14px;
    margin: 0 0 0 20px;
  }

  .bag-box {
    right: 50px;
    padding: 30px;
  }
  .bag-box h2 {
    font-size: 36px;
  }
  .bag-box .btn-submit {
    height: 60px;
    line-height: 60px;
  }

  .btn-close-bag {
    top: 42px;
    right: 30px;
  }

  .bad-list li {
    padding: 14px 0;
  }

  .nav-main-sub-box {
    width: 350px;
    padding: 220px 0 0 25px;
  }
  .nav-main-sub-box a {
    font-size: 18px;
  }

  .nav-sub-box {
    padding: 220px 0 0;
  }
  .nav-sub-box p {
    padding: 0 0 0 20px;
  }
  .nav-sub-box.on {
    width: 220px;
  }

  .btn-close {
    right: 10px;
    top: 41px;
  }

  .ban-group {
    height: 450px;
  }

  .ban-box:hover .px {
    height: 40px;
  }

  .mouse-inv {
    width: 20px;
  }

  .intro-box {
    padding: 120px 0 0;
    background: #6FA287 url(/img/map.svg) no-repeat right -2% top 60px/66%;
  }

  .video-group {
    margin: 0 auto 40px;
  }

  .video-desc {
    margin: 20px 0 0 0;
  }
  .video-desc p {
    font-size: 40px;
  }

  .invite-desc {
    width: 36%;
  }
  .invite-desc .swiper-pagination-bullets {
    bottom: -20px;
  }

  .invite-ban {
    width: 60%;
  }

  .e-box {
    font-size: 12px;
    margin: 0 0 10px;
  }

  .invite-box {
    bottom: -50px;
  }
  .invite-box h2 {
    font-size: 50px;
    margin: 0 0 30px;
  }
  .invite-box h3 {
    font-size: 25px;
    margin: 0px 0 15px;
  }
  .invite-box p {
    font-size: 13px;
    height: 51px;
    margin: 0 0 10px;
    line-height: 1.9;
  }

  .invite-swipper {
    width: calc(100% - 60px);
  }

  .btn-inv-group {
    width: 60px;
  }

  .btn-inv {
    width: 20px;
  }

  .prod-slide-box {
    padding: 60px 0 130px;
  }

  .prod-info {
    flex-wrap: wrap;
  }
  .prod-info h3 {
    font-size: 14px;
    letter-spacing: 1.8px;
    margin: 0 0 11px;
  }

  .prod-size {
    font-size: 12px;
  }
  .prod-size span {
    letter-spacing: 0.8px;
  }

  .brand-info {
    font-size: 12px;
    width: 100%;
    margin: 0 0 11px;
  }

  .sub-prod-name {
    font-size: 13px;
  }
  .sub-prod-name .prod-en {
    letter-spacing: 0.8px;
    margin: 0 5px 0 0;
  }
  .sub-prod-name span {
    margin: 0 0 0 5px;
  }

  .prod-price {
    font-size: 12px;
    letter-spacing: 0.8px;
  }

  .btn-fav {
    width: 17px;
    height: 17px;
    background-size: 17px;
  }

  .slide-mask {
    padding: 0 0 24% 20px;
    transform: translateY(-40px);
  }
  .slide-mask h3 {
    font-size: 26px;
  }

  .btn-add-cart {
    font-size: 14px;
    padding: 12px 0;
  }

  .class-slide-group > p {
    margin: 0 0 40px;
  }

  .class-slide-box {
    padding: 80px 0 110px;
  }
  .class-slide-box h2 {
    font-size: 50px;
  }

  .class-info {
    bottom: 15%;
  }
  .class-info h3 {
    font-size: 20px;
    line-height: 1.4;
  }

  .slide-mask-class {
    padding: 0 0 13.9% 15px;
  }
  .slide-mask-class h3 {
    font-size: 26px;
  }

  .sub-bloming {
    margin: 0 0 40px;
  }

  .blooming-box {
    padding: 80px 0 106px 5%;
  }

  .blooming-group {
    height: 360px;
  }

  .blooming-info {
    padding: 30px 30px 20px;
  }
  .blooming-info h3 {
    font-size: 26px;
  }
  .blooming-info p {
    font-size: 14px;
    line-height: 1.8;
    margin: 0 0 20px;
  }

  .blooming-sub {
    margin: 0 0 10px;
  }

  .fixed-infor {
    right: 25px;
  }

  .f-img-group {
    min-height: 830px;
  }

  .subscription-box {
    bottom: 40px;
  }

  .subscript-input {
    margin: 0 0 50px;
  }

  .social-box {
    margin: 0 0 30px;
  }

  .footer-sitemap {
    width: 94%;
    padding: 20px 0;
  }

  .footer-nav h3 {
    font-size: 18px;
  }
  .footer-nav li {
    width: 140px;
    height: 140px;
  }

  .f-nav a {
    font-size: 13px;
    margin: 0 0 5px;
  }

  .connect {
    width: 240px;
    height: 140px;
  }
  .connect h3 {
    font-size: 18px;
  }
  .connect a {
    font-size: 13px;
    letter-spacing: 1px;
  }
  .connect p {
    font-size: 13px;
    letter-spacing: 1px;
  }

  .copy-box span, .copy-box a {
    font-size: 12px;
  }

  .about-logo {
    top: -8.7%;
  }

  .about-info h2 {
    font-size: 29px;
    margin: 0 0 40px;
  }
  .about-info span {
    font-size: 16px;
    margin: 0 0 40px;
  }
  .about-info p {
    font-size: 14px;
    margin: 0 0 40px;
  }

  .about-box {
    margin: 280px auto 0;
    padding: 140px 9% 100px;
  }

  .btn-history {
    font-size: 14px;
  }

  .art-box {
    padding: 100px 9%;
  }

  .art-h2-sub {
    margin: 0 0 50px;
  }

  .art-txt {
    top: 50px;
    right: 50px;
    left: 50px;
    bottom: 50px;
  }
  .art-txt span {
    margin: 0 0 25px;
  }
  .art-txt h3 {
    font-size: 30px;
    margin: 0 0 25px;
  }
  .art-txt p {
    line-height: 1.87;
  }

  .art-desc {
    font-size: 14px;
    letter-spacing: 1.5px;
    line-height: 1.9;
  }

  .art-a-box {
    padding: 40px 9% 100px;
  }

  .art-a-img {
    height: 370px;
    margin: 0 0 25px;
  }
  .art-a-img span {
    font-size: 13px;
    letter-spacing: 1.8px;
  }

  .art-a-img-box {
    width: 65%;
  }
  .art-a-img-box span {
    bottom: 10%;
  }

  .art-a h3 {
    font-size: 22px;
    margin: 0 0 20px;
  }

  .idea-support .plan-box:nth-last-of-type(1) {
    margin: 0 0 130px;
  }

  .num {
    margin: 0 0 30px;
  }

  .plan-box h3 {
    font-size: 30px;
    margin: 0 0 30px;
  }
  .plan-box p {
    font-size: 14px;
    line-height: 1.9;
    margin: 0 0 30px;
  }

  .founder-cont h3 {
    font-size: 30px;
  }

  .founder-box {
    padding: 100px 9%;
  }

  .founder-june p {
    font-size: 14px;
    margin: 0 0 20px;
  }

  .founder-book h4 {
    margin: 0 0 20px;
  }
  .founder-book p {
    font-size: 12px;
    margin: 0px 0 18px;
  }

  .history-wrap {
    padding: 100px 0 0;
  }
  .history-wrap h2 {
    left: 46%;
  }

  .history-color {
    width: 36%;
  }

  .history-img {
    width: 42%;
  }

  .history-img-group {
    height: 300px;
  }

  .history-sub-bot {
    bottom: -28px;
  }
  .history-sub-bot .swiper-pagination-bullet {
    width: 50px;
    height: 50px;
    margin: 0 15px 0 0;
  }

  .history-txt-group {
    width: 41.6%;
    left: 46%;
  }

  .year {
    font-size: 50px;
  }

  .history-cont h3 {
    font-size: 22px;
  }

  .product-main-ban {
    margin: 100px 0 0;
  }

  .product-ban-swiper {
    width: 90%;
    height: auto;
  }

  .product-list-box {
    width: auto;
    padding: 0 60px;
  }

  .sel-ui-box {
    width: 76%;
  }

  .sel-search {
    width: 24%;
  }
  .sel-search input[type=text] {
    font-size: 13px;
    width: 140px;
    height: 34px;
    padding: 0 15px;
    margin: 0 0 2px;
  }
  .sel-search input[type=submit] {
    width: 20px;
    height: 20px;
    top: 6px;
    right: 10px;
    background-size: contain;
  }

  .sel-ui {
    margin: 0 16px 0 0;
  }
  .sel-ui.more-filter .sel-txt {
    background: url(/img/icon_filter.svg) no-repeat right center;
  }

  .sel-txt {
    font-size: 13px;
    letter-spacing: 1px;
    padding: 0 16px 0 0;
    height: 44px;
    line-height: 44px;
    background: url(/img/icon_sel_down_b.svg) no-repeat right center;
  }

  .brand-top {
    height: 360px;
    margin: 0 0 100px;
  }

  .anius-type-box p {
    font-size: 18px;
  }

  .anius-type-submit {
    width: 170px;
    height: 46px;
    line-height: 46px;
  }

  .anius-brand-slider .product-brand-pagin {
    bottom: 30px;
  }

  .pop-main-box {
    width: 500px;
    height: 320px;
  }

  .pop-prod-img {
    width: 240px;
    height: 320px;
  }

  .pop-prod-cont h2 {
    font-size: 16px;
    padding: 15px 20px;
  }
  .pop-prod-cont p {
    font-size: 14px;
    height: calc(100% - 52px);
    padding: 20px;
  }

  .pop-close {
    width: 20px;
    height: 20px;
    right: 15px;
    top: 15px;
  }

  .more-ani {
    width: 30px;
    height: 30px;
  }

  .more-btn {
    width: 14px;
    height: 14px;
    top: -10px;
    right: -13px;
  }

  .anius-event-box {
    padding: 100px 50px;
  }

  .anius-event-slider {
    width: 100%;
  }

  .spin-box {
    padding: 70px 0 0;
  }

  .spin-group .pop-main-box {
    width: 700px;
    height: 370px;
  }
  .spin-group .pop-prod-img {
    height: 370px;
  }
  .spin-group .pop-prod-cont {
    width: 460px;
  }
  .spin-group .pop-prod-cont p {
    height: calc(100% - 100px);
    padding: 15px 10px 15px 20px;
  }
  .spin-group .pop-prod-cont p:nth-of-type(2) {
    padding: 15px 20px 15px 10px;
  }
  .spin-group .pop-desc {
    padding: 15px 20px;
  }

  .skin-info {
    font-size: 13px;
  }

  .btn-spin {
    width: 80px;
  }

  .act-jar {
    width: 20px;
    top: 205px;
  }
  .act-jar .more-btn {
    width: 18px;
    height: 18px;
    right: -23px;
    top: -13px;
  }
  .act-jar .more-ani {
    width: 40px;
    height: 40px;
  }

  .spin-box h2 {
    font-size: 45px;
    margin: 0 0 12px;
  }
  .spin-box h3 {
    font-size: 16px;
  }

  .spin-game-box {
    height: 440px;
  }

  .spin-game {
    transform: scale(0.65);
    top: -290px;
  }

  .e-en {
    font-size: 38px;
    top: -26px;
  }

  .e-cont {
    width: auto;
    padding: 0 40px 40px 40px;
    margin: 0 -50px 0 0;
  }
  .e-cont h3 {
    margin: 0 0 15px;
  }

  .skin-group h2 {
    font-size: 45px;
    margin: 0 0 12px;
  }
  .skin-group h3 {
    font-size: 16px;
  }

  .anius-e-bxo img {
    width: 66%;
  }

  .skin-left {
    padding: 100px 0 0 50px;
  }

  .skin-right {
    padding: 0 50px 0 0;
  }

  .skin-img-2 {
    margin: 103px 0 0;
  }

  .skin-link {
    width: 8%;
    height: 0;
    padding-bottom: 8%;
  }

  .emotions-box {
    padding: 100px 50px;
  }

  .anius-oil-info-box h2 {
    font-size: 26px;
    margin: 0 0 40px;
  }

  .tab-box {
    font-size: 15px;
  }

  .anius-origin-slider {
    width: 100%;
  }

  .anius-origin-logo-slider {
    width: 90%;
  }

  .logo-slide-box {
    width: 100px;
  }

  .anius-oil-principle {
    padding: 80px 40px 0;
  }

  .brand-series-top .brand-logo {
    margin: 80px auto 60px;
  }

  .anius-series-type a {
    font-size: 15px;
    padding: 15px;
  }

  .anius-series-sub-type-group a {
    padding: 0 20px;
    line-height: 1;
  }

  .series-info {
    padding: 90px 9% 100px;
  }
  .series-info h2 {
    font-size: 24px;
    margin: 0 0 40px;
  }
  .series-info > p {
    font-size: 13px;
    margin: 0 0 50px;
  }

  .ingredients-item {
    margin: 0 0 40px;
  }
  .ingredients-item img {
    width: 70px;
    margin: 0 20px 0 0;
  }

  .ingredients-item-cont h3 {
    font-size: 14px;
  }
  .ingredients-item-cont p {
    font-size: 13px;
  }

  .file-box p {
    font-size: 13px;
  }

  .product-canjune .anius-series-sub-type {
    margin: 24px 0 19px;
  }

  .prod-type-panel {
    top: 45px;
  }

  .how-group {
    padding: 100px 0 0;
  }
  .how-group::before {
    height: 480px;
  }

  .how-box h2 {
    font-size: 46px;
    margin: 0 0 40px;
  }
  .how-box h2 p {
    font-size: 18px;
    margin: 10px 0 0;
  }

  .how-cont {
    padding: 50px;
  }
  .how-cont h3 {
    font-size: 30px;
    margin: 0 0 32px;
  }

  .how-item-group {
    min-height: 400px;
  }

  .how-item p {
    font-size: 14px;
    line-height: 1.8;
  }

  .trial-group {
    margin: 100px 0 60px;
  }

  .trial-box h2 {
    font-size: 46px;
    margin: 0 0 35px;
  }
  .trial-box > p {
    font-size: 18px;
    margin: 0 0 30px;
  }

  .trial-valid-line p {
    font-size: 14px;
    line-height: 1.6;
    margin: 0 50px 0 0;
  }

  .p-cont-box {
    margin: 90px 0 0;
  }

  .p-brand {
    margin: 0 0 40px;
  }

  .p-name {
    font-size: 22px;
  }

  .p-price {
    font-size: 15px;
  }

  .p-name-en {
    font-size: 14px;
    margin: 0 0 30px;
  }

  .p-cart {
    margin: 0 0 20px;
  }
  .p-cart .ui-quantity {
    width: 110px;
    height: 44px;
  }
  .p-cart .btn-quantity {
    width: 42px;
    height: 42px;
    line-height: 42px;
  }

  .p-btn-add {
    width: calc(100% - 44px);
    height: 44px;
    line-height: 44px;
  }

  .p-add-fav {
    width: 44px;
    height: 44px;
  }

  .p-info-unfold {
    margin: 0;
  }
  .p-info-unfold h3 {
    padding: 16px 10px 15px 24px;
  }
  .p-info-unfold ul {
    padding: 15px 24px;
  }

  .obj-group li {
    width: 48%;
  }

  .unfold-img {
    width: 55px;
    margin: 0 15px 0 0;
  }

  .unfold-p {
    width: calc(100% - 70px);
  }

  .template-point {
    display: none;
  }

  .oil-characteristic li {
    width: 60px;
    margin: 0 10px 10px 0;
  }
  .oil-characteristic img {
    width: 100%;
  }

  .f-cont {
    min-height: 380px;
    padding: 55px;
  }
  .f-cont p {
    width: 47%;
  }

  .fn-2-left {
    width: 49%;
    top: -110px;
  }
  .fn-2-left h3 {
    font-size: 22px;
    height: 110px;
    line-height: 110px;
  }

  .scroll-box {
    padding: 40px;
  }

  .fn-list li {
    padding: 0 0 18px;
    margin: 0 0 18px;
  }

  .fn-2-rihgt {
    width: 49%;
    margin: 0 2% 0 0;
    top: -110px;
  }
  .fn-2-rihgt h3 {
    font-size: 22px;
    height: 110px;
    line-height: 110px;
  }

  .radar-box {
    margin: 40px;
  }

  .fn-8-bg {
    padding: 80px 0 80px 80px;
  }

  .t-4-txt {
    width: 400px;
    padding: 40px;
  }

  .t-6-ar-group {
    background: url(/img/t_3_arrow_oshadhi.svg) no-repeat right 18px center;
    padding: 0 50px 0 0;
  }

  .t-6-arrow-box {
    transform: translateX(0);
  }

  .f-7-cont {
    padding: 40px;
  }

  .fn-7-num {
    width: 34px;
    height: 34px;
    line-height: 34px;
    margin: 0 15px 0 0;
  }

  .fn-7-txt-g {
    margin: 0 0 35px;
  }

  .fn-7-txt-cont h3 {
    font-size: 18px;
    margin: 0 0 15px;
  }

  .add-on {
    padding: 100px 0;
  }

  .oshadhi-sty .fn-box-tit {
    margin: 0 0 40px;
  }
  .oshadhi-sty .slider-e-cont {
    padding: 40px;
  }
  .oshadhi-sty .slider-e-cont h2 {
    font-size: 24px;
    margin: 0 0 40px;
  }
  .oshadhi-sty .fn-box-3-slider .product-slider-pagin {
    margin: 19px auto 0;
  }
  .oshadhi-sty .t-4-txt span {
    margin: 0 0 30px;
  }
  .oshadhi-sty .t-4-txt h2 {
    font-size: 26px;
    margin: 0 0 30px;
  }

  .canjune-sty .fn-box-tit {
    margin: 0 0 40px;
  }
  .canjune-sty .slider-e-cont {
    padding: 40px;
  }
  .canjune-sty .slider-e-cont span {
    font-size: 14px;
    margin: 0 0 20px;
  }
  .canjune-sty .slider-e-cont h2 {
    font-size: 24px;
    margin: 0 0 30px;
  }
  .canjune-sty .fn-box-3-slider .product-slider-pagin {
    margin: 19px auto 0;
  }
  .canjune-sty .t-4-txt span {
    margin: 0 0 30px;
  }
  .canjune-sty .t-4-txt h2 {
    font-size: 26px;
    margin: 0 0 30px;
  }

  .other-sty .fn-box-tit {
    margin: 0 0 40px;
  }
  .other-sty .slider-e-cont {
    padding: 40px;
  }
  .other-sty .slider-e-cont span {
    font-size: 14px;
    margin: 0 0 20px;
  }
  .other-sty .slider-e-cont h2 {
    font-size: 24px;
    margin: 0 0 30px;
  }
  .other-sty .fn-box-3-slider .product-slider-pagin {
    margin: 19px auto 0;
  }
  .other-sty .t-4-txt span {
    margin: 0 0 30px;
  }
  .other-sty .t-4-txt h2 {
    font-size: 26px;
    margin: 0 0 30px;
  }

  .part-of-plant-group h2 {
    font-size: 45px;
  }
  .part-of-plant-group h3 {
    font-size: 16px;
  }

  .part-icon-group {
    padding: 80px 60px 20px;
  }

  .part-icon-box li {
    margin: 0 0 60px;
  }

  .part-icon {
    width: 100px;
    height: 100px;
  }

  .categories-group h2 {
    font-size: 45px;
  }
  .categories-group h3 {
    font-size: 16px;
  }

  .cate-txt-area {
    height: 600px;
    padding: 100px 150px 0 50px;
  }
  .cate-txt-area h4 {
    font-size: 32px;
  }
  .cate-txt-area p {
    font-size: 14px;
  }

  .cate-product-slider-offset {
    width: calc(100% + 260px);
    padding: 0 0 0 130px;
    transform: translateX(-260px);
  }

  .cate-product-slider {
    width: 260px;
  }
  .cate-product-slider img {
    width: 100%;
  }

  .cate-pagin-group .cate-prev {
    width: 40px;
    height: 40px;
  }
  .cate-pagin-group .cate-next {
    width: 40px;
    height: 40px;
  }
  .cate-pagin-group .cate-pagin {
    font-size: 17px;
  }

  .cate-cricle {
    width: 40px;
    height: 40px;
  }

  .perfume-sty-box h2 {
    font-size: 45px;
  }
  .perfume-sty-box h3 {
    font-size: 16px;
  }

  .perfume-img {
    height: 210px;
  }

  .canjune-ind-box {
    padding: 0 25px 80px;
  }

  .c-main-info {
    padding: 70px;
  }
  .c-main-info h2 {
    font-size: 32px;
    margin: 0 0 60px;
  }
  .c-main-info p {
    font-size: 14px;
    margin: 0 0 15px;
  }

  .c-main-prod-list {
    min-height: 480px;
  }

  .product-canjune .brand-logo {
    margin: 120px auto 78px;
  }

  .not-found {
    padding: 100px 0 0;
  }
  .not-found h2 {
    margin: 130px 0 40px;
  }

  .empty-bag {
    padding: 100px 0 0;
  }

  .empty-cont h2 {
    margin: 130px 0 40px;
  }

  .connect-cont-box {
    width: 600px;
  }

  .connect-group {
    padding: 100px 0 0;
  }
}
@media screen and (max-width: 1023px) {
  .toast-bottom-left {
    left: 12px;
    bottom: 12px;
  }

  .fn-box a {
    font-size: 12px;
    letter-spacing: 1.38px;
    margin: 0 0 0 15px;
  }

  .nav-item {
    margin: 0 15px 0 0;
  }

  .nav-sub-group nav {
    top: 41px;
  }
  .nav-sub-group .nav-item {
    margin: 0 15px 0 0;
  }

  .nav-main-sub-box {
    width: 284px;
    padding: 220px 35px 0;
  }
  .nav-main-sub-box a {
    font-size: 16px;
  }

  .nav-sub-box {
    padding: 220px 0 0;
  }
  .nav-sub-box p {
    padding: 0 0 0 10px;
  }
  .nav-sub-box a {
    letter-spacing: 1.4px;
    padding: 0 0 0 10px;
  }
  .nav-sub-box.on {
    width: 161px;
  }

  .nav-item {
    font-size: 13px;
    letter-spacing: 2px;
  }

  .btn-close {
    width: 20px;
    height: 20px;
    top: 41px;
    right: 10px;
  }

  .breadcrumbs-box {
    padding: 20px 25px;
  }

  .intro-box {
    padding: 80px 0 0;
    margin: 0 0 150px;
    background: #6FA287 url(/img/map.svg) no-repeat right -2% top 40px/66%;
    cursor: default;
  }

  .video-cover {
    width: 55%;
    margin: 0 40px 0 0;
  }

  .video-desc p {
    font-size: 38px;
  }
  .video-desc p.sub-p {
    font-size: 15px;
    letter-spacing: 2.3px;
  }

  .btn-play {
    width: 60px;
    height: 60px;
  }
  .btn-play > img {
    width: 14px;
  }

  .invite-box {
    width: 85%;
  }
  .invite-box p {
    height: 25px;
  }

  .mouse-inv, .mouse-inv {
    display: none;
  }

  .intro-box:hover .mouse-inv {
    display: none;
  }

  .class-slide-box:hover .mouse-evt {
    display: none;
  }

  .invite-swipper {
    width: calc(100% - 45px);
  }

  .btn-inv-group {
    width: 45px;
  }

  .btn-inv {
    width: 15px;
  }

  .prod-slide-group h2 {
    font-size: 45px;
    margin: 0 0 12px;
  }
  .prod-slide-group > p {
    margin: 0 0 30px;
  }

  .prod-slide-box {
    cursor: default;
    padding: 20px 0 100px;
  }
  .prod-slide-box:hover .mouse-evt {
    display: none;
  }

  .btn-add-cart {
    font-size: 13px;
    letter-spacing: 1px;
    bottom: -50px;
  }

  .slide-mask {
    width: 24.4%;
    height: calc(100% - 10px);
    padding: 0 3% 12.2% 12px;
    transform: translateY(-30px);
  }
  .slide-mask h3 {
    font-size: 19px;
    letter-spacing: 1px;
  }

  .oil-slide .swiper-slide:nth-of-type(odd) .prod-img {
    transform: translateY(-20px);
  }
  .oil-slide .swiper-slide:nth-of-type(even) .prod-img {
    transform: translateY(20px);
  }

  .btn-prev {
    width: 40px;
    height: 40px;
  }

  .btn-next {
    width: 40px;
    height: 40px;
  }

  .b-cricle-box {
    width: 28px;
    height: 28px;
  }

  .b-arrow {
    width: 36px;
    height: 36px;
    background: url(/img/btn_arrow.svg) no-repeat center center/17px;
  }

  .sub-prod-name {
    font-size: 12px;
  }
  .sub-prod-name .prod-en {
    letter-spacing: 0.8px;
    margin: 0 5px 0 0;
  }
  .sub-prod-name span {
    margin: 0 0 0 5px;
  }

  .prod-price {
    font-size: 12px;
    letter-spacing: 0.8px;
  }

  .btn-fav {
    width: 16px;
    height: 16px;
    background-size: 16px;
  }

  .class-slide-group > p {
    font-size: 18px;
    margin: 0 0 30px;
  }

  .class-slide-box {
    padding: 60px 0 80px;
  }
  .class-slide-box h2 {
    font-size: 44px;
    margin: 0 0 10px;
  }

  .class-slide .swiper-slide:nth-of-type(odd) .class-img {
    transform: translateY(-20px);
  }
  .class-slide .swiper-slide:nth-of-type(even) .class-img {
    transform: translateY(20px);
  }

  .class-img:hover {
    cursor: pointer;
  }

  .slide-mask-class {
    width: 25.9%;
    padding: 0 0 17.6% 20px;
  }
  .slide-mask-class h3 {
    font-size: 19px;
    letter-spacing: 0.8px;
  }

  .class-icon {
    width: 34px;
    top: 8px;
    left: 8px;
  }

  .btn-fav-icon {
    width: 16px;
    height: 16px;
    background: url(/img/icon_fav_w.svg) no-repeat center center/16px;
    right: 15px;
    bottom: 15px;
  }
  .btn-fav-icon.act {
    background: url(/img/icon_fav_w_on.svg) no-repeat center center/16px;
  }

  .class-info {
    left: 20px;
    right: 20px;
  }
  .class-info h3 {
    font-size: 18px;
  }

  .class-sub {
    font-size: 12px;
    margin: 0 0 8px;
  }

  .class-type {
    font-size: 12px;
    padding: 0 5px 0 0;
  }

  .class-data {
    font-size: 12px;
    letter-spacing: 0.8px;
    padding: 0 0 0 5px;
  }

  .blooming-box-area h2 {
    font-size: 45px;
    margin: 0 0 12px;
  }

  .bloming-data {
    font-size: 12px;
    letter-spacing: 1px;
    padding: 0 5px 0 0;
  }

  .bloming-type {
    font-size: 12px;
    letter-spacing: 1px;
    padding: 0 0 0 5px;
  }

  .blooming-info h3 {
    font-size: 20px;
  }
  .blooming-info p {
    font-size: 13px;
    margin: 0 0 15px;
  }

  .f-img-group {
    min-height: 630px;
  }
  .f-img-group h2 {
    height: auto;
    transform: translate(-50%, -133%);
  }

  .subscription-box h3 {
    font-size: 18px;
    letter-spacing: 1px;
  }
  .subscription-box p {
    font-size: 13px;
  }

  .subscript-input {
    margin: 0 0 35px;
  }

  .subscription-box {
    width: 45%;
  }

  .media-item {
    font-size: 12px;
    padding: 0 10px;
    letter-spacing: 0;
  }

  .media-box {
    margin: 0 0 25px;
  }
  .media-box .media-item:nth-of-type(1) {
    padding: 0 10px 0 0;
  }
  .media-box .media-item:nth-of-type(4) {
    padding: 0 0 0 10px;
  }

  .social-box {
    margin: 0 0 20px;
  }
  .social-box a {
    width: 30px;
  }

  .f-img-1 {
    bottom: 57.8%;
  }

  .footer-nav h3 {
    font-size: 15px;
  }

  .f-nav {
    left: 10px;
  }
  .f-nav a {
    font-size: 12px;
    margin: 0 0 2px;
  }

  .footer-nav li {
    width: 100px;
    padding: 0 0 0 10px;
  }

  .connect {
    width: 200px;
    padding: 0 0 0 10px;
  }
  .connect h3 {
    font-size: 15px;
  }
  .connect a, .connect p {
    font-size: 12px;
    letter-spacing: 1px;
  }
  .connect .f-nav {
    left: 10px;
  }

  .copy-box {
    margin: 40px 0 0;
  }
  .copy-box span {
    padding: 0 10px 0 10px;
  }
  .copy-box a {
    padding: 0 10px;
  }

  .about-box {
    margin: 230px auto 0;
    padding: 120px 9% 80px;
  }

  .about-info {
    width: 48%;
  }
  .about-info span {
    font-size: 15px;
    margin: 0 0 30px;
  }
  .about-info h2 {
    font-size: 26px;
    letter-spacing: 3px;
    line-height: 1.56;
    margin: 0 0 30px;
  }
  .about-info p {
    font-size: 13px;
    margin: 0 0 30px;
    line-height: 1.91;
  }

  .btn-history {
    font-size: 13px;
  }

  .art-box {
    padding: 80px 9%;
  }
  .art-box h2 {
    font-size: 45px;
    margin: 0 0 12px;
  }

  .art-h2-sub {
    font-size: 15px;
  }

  .art-txt h3 {
    font-size: 28px;
  }
  .art-txt p {
    font-size: 15px;
    line-height: 1.67;
  }

  .art-img-cont {
    min-height: 490px;
  }

  .art-img-tit {
    font-size: 15px;
    bottom: 30px;
  }

  .art-desc {
    font-size: 13px;
    letter-spacing: 1px;
  }

  .art-a-box {
    padding: 20px 9% 80px;
  }

  .art-a-img-box {
    width: 130px;
  }

  .art-a-img {
    height: 300px;
    margin: 0 0 30px;
  }
  .art-a-img span {
    font-size: 12px;
    letter-spacing: 2px;
    bottom: 8%;
  }

  .art-a h3 {
    font-size: 20px;
  }
  .art-a p {
    font-size: 13px;
    line-height: 1.9;
  }

  .idea-box {
    padding: 80px 9%;
  }
  .idea-box h2 {
    font-size: 45px;
    margin: 0 0 12px;
  }

  .idea-img {
    width: 55%;
  }

  .num {
    font-size: 26px;
    padding: 10px 0 0;
    width: 55px;
    height: 55px;
    margin: 0 0 25px;
  }

  .idea-support {
    width: 38%;
  }
  .idea-support .plan-box:nth-last-of-type(1) {
    margin: 0 0 90px;
  }

  .plan-box {
    margin: 0 0 90px;
  }
  .plan-box h3 {
    font-size: 28px;
    line-height: 1.35;
    margin: 0 0 25px;
  }
  .plan-box p {
    font-size: 13px;
    margin: 0 0 25px;
  }

  .founder-box h2 {
    font-size: 45px;
    margin: 0 0 12px;
  }
  .founder-box h3 {
    font-size: 28px;
  }

  .history-wrap h2 {
    font-size: 45px;
    top: 16%;
    left: 43%;
  }
  .history-wrap span {
    font-size: 16px;
  }

  .btn-back {
    top: 18%;
    left: 25px;
  }

  .history-color {
    width: 35%;
  }

  .history-img {
    width: 39%;
    height: 40%;
    bottom: 50px;
  }

  .history-img-group {
    height: 100%;
    width: 100%;
  }

  .history-sub-bot .swiper-pagination-bullet {
    width: 50px;
    height: 50px;
    margin: 0 15px 0 0;
  }

  .history-txt-group {
    width: 44%;
    left: 43%;
    bottom: 50px;
  }

  .year {
    font-size: 45px;
    margin: 0 0 50px;
  }

  .history-cont h3 {
    font-size: 18px;
  }
  .history-cont ol {
    font-size: 13px;
  }

  .year-swiper-box {
    bottom: 50px;
  }

  .y-box {
    font-size: 13px;
    padding: 3px 70px 3px 0;
  }

  .year-swiper .swiper-slide::before {
    top: 36%;
  }
  .year-swiper .swiper-slide::after {
    top: 40%;
  }

  .main-prod-slide-group {
    padding: 100px 0 160px;
  }

  .product-ban-box {
    margin: 0 auto 70px;
  }

  .sel-txt {
    height: 54px;
    line-height: 54px;
  }
  .sel-txt::after {
    bottom: -2px;
  }

  .pagin-box {
    margin: 40px auto;
  }

  .product-list-box {
    padding: 0 25px;
  }
  .product-list-box .prod-img {
    width: 31.5%;
  }

  .prod-img:hover {
    cursor: pointer;
  }

  .sel-ui-box {
    width: 80%;
  }

  .sel-search {
    width: 30%;
  }

  .sel-ui {
    margin: 0 9px 0 0;
  }

  .prod-type-panel {
    width: 190px;
    padding: 20px;
    top: 53px;
  }

  .prod-more-filter {
    width: 100%;
  }

  .type-scroll {
    margin: 0;
  }

  .main-prod-slide-box h2 {
    padding: 0 0 0 80px;
  }
  .main-prod-slide-box > p {
    padding: 0 0 0 80px;
    margin: 0 0 60px;
  }

  .brand-top {
    height: 320px;
    margin: 0 0 80px;
  }

  .brand-logo {
    width: 260px;
    margin: 100px auto 50px;
  }

  .anius-type-box {
    width: 590px;
  }
  .anius-type-box p {
    font-size: 16px;
  }

  .anius-event-box {
    padding: 80px 9%;
  }

  .pop-prod-cont .btn-more {
    left: 20px;
  }

  .anius-brand-prev {
    width: 34px;
    height: 34px;
    left: 25px;
  }
  .anius-brand-prev .b-cricle-box {
    width: 28px;
    height: 28px;
  }
  .anius-brand-prev .b-arrow {
    width: 16px;
    height: 16px;
    background-size: contain;
  }

  .anius-brand-next {
    width: 34px;
    height: 34px;
    right: 25px;
  }
  .anius-brand-next .b-cricle-box {
    width: 28px;
    height: 28px;
  }
  .anius-brand-next .b-arrow {
    width: 16px;
    height: 16px;
    background-size: contain;
  }

  .brand-product {
    width: 1.795%;
  }

  .brand-group-1 .b-p-01 {
    top: 35.2%;
  }
  .brand-group-1 .b-p-02 {
    top: 37.3%;
  }
  .brand-group-1 .b-p-03 {
    top: 64.2%;
  }

  .brand-group-2 .b-p-01 {
    top: 69.1%;
  }
  .brand-group-2 .b-p-02 {
    top: 42.3%;
  }
  .brand-group-2 .b-p-03 {
    top: 67.5%;
    left: 15.9%;
  }

  .brand-group-3 .b-p-01 {
    top: 41.8%;
  }
  .brand-group-3 .b-p-02 {
    top: 64.1%;
  }
  .brand-group-3 .b-p-03 {
    top: 61%;
  }

  .brand-group-4 .b-p-01 {
    top: 73.8%;
  }
  .brand-group-4 .b-p-02 {
    top: 25.6%;
  }
  .brand-group-4 .b-p-03 {
    top: 59.9%;
  }

  .brand-group-5 .b-p-01 {
    top: 31.6%;
  }
  .brand-group-5 .b-p-02 {
    top: 32.1%;
  }
  .brand-group-5 .b-p-03 {
    top: 55.9%;
  }

  .e-cont {
    padding: 0 30px 20px;
    margin: 0 -70px 0 0;
  }
  .e-cont h3 {
    font-size: 13px;
    margin: 0 0 10px;
  }
  .e-cont h2 {
    font-size: 24px;
    letter-spacing: 3px;
    margin: 0 0 10px;
  }
  .e-cont p {
    font-size: 13px;
    line-height: 1.7;
    margin: 0 0 10px;
  }

  .e-en {
    font-size: 40px;
    top: -25px;
  }

  .anius-e-bxo img {
    width: 70%;
  }

  .spin-game-box {
    height: 350px;
  }

  .spin-game {
    transform: scale(0.55);
    top: -370px;
  }

  .spin-box {
    padding: 80px 0 0;
  }

  .btn-spin {
    width: 70px;
  }

  .act-jar {
    width: 18px;
    top: 225px;
  }
  .act-jar .more-btn {
    width: 16px;
    height: 16px;
    right: -21px;
    top: -10px;
  }
  .act-jar .more-ani {
    width: 30px;
    height: 30px;
  }

  .skin-left {
    padding: 80px 0 0 50px;
  }

  .skin-right {
    padding: 0 50px 0 0;
  }

  .skin-img-2 {
    margin: 86px 0 0;
  }

  .emotions-img h4 {
    font-size: 15px;
  }

  .emotions-box {
    cursor: default;
    padding: 80px 25px 30px;
  }
  .emotions-box:hover .mouse-evt {
    display: none;
  }
  .emotions-box a {
    cursor: pointer;
  }

  .tab-box {
    font-size: 14px;
    padding: 2px 40px;
  }

  .anius-origin-slider {
    margin: 0 0 40px;
  }
  .anius-origin-slider p {
    font-size: 14px;
    width: 60%;
    margin: 0 auto;
    font-size: 15px;
  }

  .anius-origin-logo-slider {
    margin: 0 auto 60px;
  }

  .logo-slide-box {
    width: 80px;
  }

  .anius-oil-info-box {
    padding: 80px 25px;
    width: auto;
    margin: 0 auto 60px;
  }
  .anius-oil-info-box h2 {
    font-size: 30px;
  }
  .anius-oil-info-box p {
    font-size: 14px;
  }

  .anius-oil-principle {
    padding: 80px 25px 30px;
    margin: 0 auto;
  }

  .brand-series-top .brand-logo {
    margin: 100px auto 60px;
  }

  .anius-series-type {
    position: relative;
  }
  .anius-series-type a {
    letter-spacing: 2.5px;
    font-size: 14px;
    padding: 15px;
  }
  .anius-series-type::after {
    content: "";
    display: block;
    height: 100%;
    width: 100px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 4;
    background-image: linear-gradient(to right, rgba(210, 159, 19, 0), #d29f13);
  }

  .anius-series-sub-type {
    margin: 20px 0 5px;
    position: relative;
  }
  .anius-series-sub-type a {
    padding: 0 15px;
  }
  .anius-series-sub-type::after {
    content: "";
    display: block;
    height: 100%;
    width: 100px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 4;
    background-image: linear-gradient(to right, rgba(210, 159, 19, 0), #d29f13);
  }

  .series-info {
    padding: 80px 8% 100px;
  }
  .series-info h2 {
    font-size: 22px;
    margin: 0 0 30px;
  }

  .ingredients-item {
    margin: 0 0 30px;
  }
  .ingredients-item img {
    width: 60px;
  }

  .ingredients-item-cont h3 {
    font-size: 14px;
    margin: 0 0 8px;
  }

  .file-box {
    height: 40px;
    line-height: 40px;
  }
  .file-box p {
    font-size: 13px;
    line-height: 40px;
    padding: 0 0 0 10px;
  }

  .file-btn {
    width: 40px;
  }

  .btn-check-pdf {
    background-size: 22px;
  }

  .btn-download-pdf {
    background-size: 16px;
  }

  .file-link {
    background: url(/img/btn_arrow.svg) no-repeat right 10px center;
  }

  .product-canjune .anius-series-sub-type {
    margin: 20px 0 15px;
  }
  .product-canjune .anius-series-sub-type::after {
    background-image: linear-gradient(to right, rgba(94, 116, 96, 0), #5e7460);
  }

  .how-group {
    margin: 80px 0 0;
    padding: 80px 0 0;
  }
  .how-group::before {
    height: 480px;
  }

  .trial-valid-line {
    padding: 35px;
  }
  .trial-valid-line p {
    width: 70%;
    margin: 0 10px 0 0;
  }

  .btn-valid-line {
    font-size: 14px;
  }

  .p-cont-box .product-list-box {
    padding: 0 25px;
  }

  .p-cont {
    padding: 0 9% 90px;
  }

  .p-cover {
    width: 48%;
  }

  .p-detail {
    width: 46%;
  }

  .p-brand {
    font-size: 14px;
  }

  .p-price {
    font-size: 14px;
  }

  .p-sale-mesg {
    font-size: 13px;
  }

  .p-name h2 {
    font-size: 20px;
  }

  .ml-opt {
    font-size: 13px;
  }

  .p-btn-add {
    font-size: 13px;
  }
  .p-btn-add img {
    width: 15px;
    margin: 0 7px 0 0;
  }

  .p-info-unfold h3 {
    font-size: 13px;
  }

  .view-txt {
    font-size: 13px;
  }

  .fn-box-1 {
    padding: 80px 0 100px 9%;
  }
  .fn-box-1 h2 {
    font-size: 22px;
    margin: 0 0 25px;
  }

  .f-cont {
    min-height: 290px;
    padding: 50px 50px 5px;
  }
  .f-cont p {
    margin: 0 0 30px;
  }

  .f-cont-img {
    right: 25px;
  }

  .fn-2-left {
    top: -90px;
  }
  .fn-2-left h3 {
    font-size: 20px;
    height: 90px;
    line-height: 90px;
  }

  .scroll-box {
    padding: 25px;
  }

  .fn-list li {
    font-size: 13px;
  }

  .fn-2-rihgt {
    height: auto;
    top: -90px;
  }
  .fn-2-rihgt h3 {
    font-size: 20px;
    height: 90px;
    line-height: 90px;
    margin: 0 20px 0;
  }

  .radar-box {
    margin: 25px;
  }

  .fn-8 {
    padding: 60px 0 0 0;
  }

  .fn-8-bg {
    padding: 70px 0 70px 70px;
  }
  .fn-8-bg h2 {
    font-size: 22px;
  }
  .fn-8-bg p {
    font-size: 14px;
  }

  .t-1-cont {
    padding: 80px 0;
  }

  .t-txt-group .t-group:first-child {
    padding: 0 0 15px;
  }

  .t-group {
    padding: 15px 0;
  }
  .t-group span {
    font-size: 13px;
    margin: 0 0 10px;
  }
  .t-group h2 {
    font-size: 18px;
    font-weight: 500;
    margin: 0 0 20px;
  }
  .t-group p {
    font-size: 13px;
  }

  .template-2 {
    padding: 70px 0 100px;
  }
  .template-2 span {
    font-size: 18px;
    margin: 0 0 10px;
  }
  .template-2 h2 {
    font-size: 22px;
    margin: 0 0 30px;
  }

  .cricle-txt {
    font-size: 16px;
  }

  .t-2-arrow-box {
    min-height: 160px;
    padding: 0 60px 0 9%;
    margin: 0 25px 0 0;
  }

  .cricle-txt {
    font-size: 18px;
    width: 70px;
    height: 70px;
    line-height: 70px;
  }

  .ar-tit-group {
    width: calc(100% - 82px);
  }

  .ar-group h3 {
    font-size: 14px;
    padding: 0 0 5px;
    margin: 0 0 5px;
  }
  .ar-group p {
    font-size: 13px;
  }

  .t-3-box h2 {
    font-size: 22px;
    margin: 0 0 50px;
  }
  .t-3-box li {
    font-size: 15px;
    line-height: 1.666;
    height: 130px;
    padding: 20px 15px;
  }

  .t-4-txt span {
    margin: 0 0 25px;
  }
  .t-4-txt h2 {
    font-size: 22px;
    margin: 0 0 25px;
  }
  .t-4-txt p {
    font-size: 13px;
  }

  .template-5 {
    padding: 100px 0 80px;
  }

  .t-5-box h2 {
    font-size: 22px;
    margin: 0 0 15px;
  }
  .t-5-box h3 {
    font-size: 14px;
    padding: 8px 15px;
  }
  .t-5-box img {
    max-width: 20px;
    max-height: 20px;
    margin: 0 12px 0 0;
  }
  .t-5-box ul {
    width: calc(50% - 10px);
  }

  .t-5-txt-group {
    padding: 15px 13px;
  }
  .t-5-txt-group h4 {
    font-size: 13px;
  }
  .t-5-txt-group p {
    font-size: 13px;
    margin: 0 0 20px;
  }

  .template-6 {
    padding: 70px 0;
  }
  .template-6 span {
    font-size: 18px;
    padding: 0 0 0 25px;
    margin: 0 0 10px;
  }
  .template-6 h2 {
    font-size: 22px;
    padding: 0 0 0 25px;
    margin: 0 0 30px;
  }

  .t-6-arrow-box {
    min-height: 160px;
    margin: 0 25px 0 0;
    padding: 0 25px;
    transform: translateX(15px);
  }

  .t-6-cricle-txt {
    font-size: 18px;
    width: 70px;
    height: 70px;
    line-height: 70px;
  }

  .t-6-ar-group h3 {
    font-size: 16px;
    padding: 0 0 5px;
    margin: 0 0 5px;
  }
  .t-6-ar-group p {
    font-size: 14px;
  }

  .t-6-ar-tit-group {
    width: calc(100% - 82px);
  }

  .f-7-cont {
    padding: 30px 30px 1px;
  }
  .f-7-cont p {
    font-size: 14px;
    margin: 0 0 30px;
  }

  .fn-7-num {
    width: 30px;
    height: 30px;
    line-height: 30px;
  }

  .fn-7-txt-g {
    margin: 0;
  }

  .fn-7-txt-cont h3 {
    margin: 0 0 10px;
  }
  .fn-7-txt-cont p {
    margin: 0 0 20px;
  }

  .f-7-cont-img {
    top: -25px;
    right: 25px;
  }

  .add-on-box h2 {
    font-size: 22px;
    margin: 0 0 40px;
  }

  .product-cont-more-box h2 {
    font-size: 22px;
  }
  .product-cont-more-box h3 {
    font-size: 16px;
  }
  .product-cont-more-box li {
    margin: 0 0 18px;
    padding: 0 0 18px;
  }

  .p-news-date {
    font-size: 13px;
  }

  .product-similar h2 {
    font-size: 22px;
  }

  .product-similar-box:hover .mouse-evt {
    display: none;
  }

  .oshadhi-sty .fn-box-3 {
    padding: 80px 0;
  }
  .oshadhi-sty .t3-tit {
    font-size: 14px;
  }
  .oshadhi-sty .t3-px {
    width: 45px;
    margin: 0 30px;
  }
  .oshadhi-sty .fn-box-3-slider {
    margin: 0 25px;
  }
  .oshadhi-sty .slider-e-cont h2 {
    font-size: 22px;
    margin: 0 0 20px;
  }
  .oshadhi-sty .slider-e-cont p {
    font-size: 13px;
  }
  .oshadhi-sty .t-4-txt span {
    margin: 0 0 25px;
  }
  .oshadhi-sty .t-4-txt h2 {
    font-size: 22px;
    margin: 0 0 25px;
  }

  .canjune-sty .fn-box-3 {
    padding: 80px 0;
  }
  .canjune-sty .t3-tit {
    font-size: 14px;
  }
  .canjune-sty .t3-px {
    width: 45px;
    margin: 0 30px;
  }
  .canjune-sty .fn-box-3-slider {
    margin: 0 25px;
  }
  .canjune-sty .slider-e-cont h2 {
    font-size: 22px;
    margin: 0 0 20px;
  }
  .canjune-sty .slider-e-cont p {
    font-size: 14px;
  }
  .canjune-sty .t-4-txt span {
    margin: 0 0 25px;
  }
  .canjune-sty .t-4-txt h2 {
    font-size: 22px;
    margin: 0 0 25px;
  }

  .other-sty .fn-box-3 {
    padding: 80px 0;
  }
  .other-sty .t3-tit {
    font-size: 14px;
  }
  .other-sty .t3-px {
    width: 45px;
    margin: 0 30px;
  }
  .other-sty .fn-box-3-slider {
    margin: 0 25px;
  }
  .other-sty .slider-e-cont h2 {
    font-size: 22px;
    margin: 0 0 20px;
  }
  .other-sty .slider-e-cont p {
    font-size: 14px;
  }
  .other-sty .t-4-txt span {
    margin: 0 0 25px;
  }
  .other-sty .t-4-txt h2 {
    font-size: 22px;
    margin: 0 0 25px;
  }

  .part-of-plant-box {
    padding: 80px 25px;
  }
  .part-of-plant-box h2 {
    font-size: 45px;
    margin: 0 0 12px;
  }
  .part-of-plant-box::after {
    width: 50%;
    top: 80px;
  }

  .part-icon-group {
    padding: 50px 30px 0px;
  }

  .categories-box {
    padding: 80px 50px 0;
  }

  .categories-group h2 {
    font-size: 45px;
    margin: 0 0 12px;
  }

  .cate-txt-area {
    width: 55%;
    height: 530px;
    padding: 80px 130px 0 50px;
  }
  .cate-txt-area p {
    line-height: 2;
  }

  .cate-pagin-group {
    bottom: 60px;
  }

  .cate-product-slider-offset {
    width: calc(100% + 210px);
    padding: 0px 0 0 100px;
    transform: translateX(-210px);
  }

  .cate-product-area {
    width: 45%;
  }

  .cate-product-slider {
    width: 220px;
  }

  .perfume-sty-box h2 {
    font-size: 45px;
    margin: 0 0 12px;
  }

  .perfume-img {
    font-size: 18px;
  }

  .canjune-ind-box {
    padding: 0 25px 40px;
  }

  .c-main-info {
    padding: 60px;
  }
  .c-main-info h2 {
    font-size: 28px;
    margin: 0 0 40px;
  }
  .c-main-info p {
    font-size: 13px;
  }

  .c-main-prod-list {
    min-height: 480px;
  }

  .not-found {
    padding: 80px 40px 0;
  }
  .not-found h2 {
    text-align: left;
    margin: 130px 0 40px;
  }
  .not-found p {
    text-align: left;
  }

  .empty-cont h2 {
    text-align: left;
  }
  .empty-cont p {
    font-size: 16px;
  }

  .go-shopping {
    font-size: 14px;
    padding: 20px 60px;
  }

  .connect-group {
    padding: 80px 0 0;
  }

  .connect-cont-box {
    width: auto;
    padding: 100px 20% 0;
  }
  .connect-cont-box h2 {
    font-size: 50px;
    margin: 0 0 50px;
  }
  .connect-cont-box h2 p {
    font-size: 20px;
  }

  .connect-submit-box {
    justify-content: flex-start;
    flex-wrap: wrap;
    margin: 0 0 100px;
  }

  .val-box {
    width: 100%;
    margin: 0 0 50px;
  }

  .freegift-group .mesg-box {
    left: -100px;
    top: 30px;
  }
}
@media screen and (max-width: 768px) {
  .skin-img-2 {
    margin: 86px 0 0;
  }

  .a-arrow {
    width: 30px;
    height: 30px;
    background: url(/img/btn_arrow_w.svg) no-repeat center center/50%;
  }

  .a-arrow-cricle {
    width: 30px;
    height: 30px;
    background: url(/img/btn_cricle_w.svg) no-repeat center center/cover;
  }

  .mouse-evt {
    width: 60px;
    height: 60px;
  }

  .mouse-cricle {
    width: 60px;
    height: 60px;
  }

  .mouse-center {
    width: 30px;
    height: 30px;
  }

  .history-txt-group {
    width: 56%;
    bottom: 100px;
  }

  .history-img {
    height: 190px;
    bottom: 100px;
  }

  .history-sub-bot {
    left: 10px;
    bottom: -18px;
  }
  .history-sub-bot .swiper-pagination-bullet {
    width: 37px;
    height: 37px;
  }

  .year-swiper-box {
    bottom: 460px;
  }

  .product-box {
    padding: 0 0 0 60px;
  }

  .product-slide .swiper-slide:nth-of-type(odd) .prod-img {
    transform: translateY(-20px);
  }
  .product-slide .swiper-slide:nth-of-type(even) .prod-img {
    transform: translateY(20px);
  }

  .freegift-group .mesg-box {
    left: -100px;
    top: 30px;
  }
}
@media screen and (max-width: 767px) {
  .bar-box {
    height: 5px;
  }

  .bar {
    height: 5px;
  }

  .nav-sub-group {
    display: none;
  }

  .btn-close {
    display: none;
  }

  .nav-box {
    height: 80px;
    padding: 0 20px;
    transition: 0.6s ease-out;
  }
  .nav-box.white-sty {
    z-index: 30;
    background: transparent;
  }
  .nav-box.white-sty .m-nav-btn span {
    background: #fff;
  }
  .nav-box.white-sty .m-nav-btn span::after {
    background: #fff;
  }
  .nav-box.white-sty .m-nav-btn span::before {
    background: #fff;
  }
  .nav-box.white-sty img {
    filter: brightness(0) invert(1);
  }
  .nav-box.white-sty .s-logo {
    filter: brightness(0) invert(1);
  }
  .nav-box.white-sty .logo {
    filter: brightness(0) invert(1);
  }
  .nav-box.white-sty .cart-num {
    color: #507C65;
    background: #fff;
  }

  .s-nav-box {
    position: fixed;
    transform: translateY(-80px);
  }
  .s-nav-box.on {
    transform: translateY(0);
  }

  .nav-item {
    font-size: 13px;
    margin: 0 15px 0 0;
  }

  .fn-box a {
    font-size: 13px;
    margin: 0 0 0 18px;
    letter-spacing: 1px;
  }
  .fn-box a.icon-a {
    width: 20px;
    height: auto;
  }
  .fn-box a.icon-a img {
    width: 14px;
    display: block;
  }

  .cart-num {
    font-size: 9px;
    width: 18px;
    height: 18px;
    top: -8px;
    right: -8px;
  }

  .s-nav-box {
    height: 80px;
    top: -80px;
  }
  .s-nav-box.on {
    transform: translateY(80px);
  }

  .s-logo {
    width: 40px;
    height: 43px;
  }

  .yt-video {
    width: 90%;
    padding-bottom: 51.7%;
  }

  .btn-close-yt {
    width: 24px;
    height: 24px;
    top: -30px;
    right: 0;
  }

  .bag-box {
    display: none;
  }

  .search-box {
    display: none;
  }

  .nav-mask {
    display: none;
  }

  .m-nav-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 40%;
  }

  .m-nav-btn {
    width: 24px;
    height: 24px;
    padding: 11px 0 0 1px;
    margin: 0 28px 0 0;
    cursor: pointer;
    display: block;
  }
  .m-nav-btn span {
    width: 22px;
    height: 2px;
    background: #507C65;
    position: relative;
    display: block;
    transition: 0.1s;
    transition-timing-function: ease-out;
  }
  .m-nav-btn span::after {
    width: 22px;
    height: 2px;
    background: #507C65;
    content: "";
    display: block;
    position: absolute;
    top: -7px;
    left: 0;
    transition: 0.1s;
    transition-timing-function: ease-out;
  }
  .m-nav-btn span::before {
    width: 22px;
    height: 2px;
    background: #507C65;
    content: "";
    display: block;
    position: absolute;
    top: 7px;
    left: 0;
    transition: 0.1s;
    transition-timing-function: ease-out;
  }

  .m-nav-btn.on span {
    background: #fff;
    transform: rotate(-45deg);
  }
  .m-nav-btn.on span::after {
    top: 0;
    background: #fff;
    transform: rotate(90deg);
  }
  .m-nav-btn.on span::before {
    opacity: 0;
  }

  .m-btn-search {
    display: block;
    width: 24px;
  }
  .m-btn-search img {
    width: 100%;
  }

  nav {
    display: none;
  }

  .logo {
    width: 45px;
    height: 51px;
    background: url(/img/s_logo.svg) no-repeat center center/100%;
  }

  .fn-box {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  .fn-box a {
    display: none;
  }
  .fn-box a.member {
    display: none;
  }
  .fn-box a.m-btn-member {
    width: 24px;
    display: block;
  }
  .fn-box a.m-btn-member img {
    width: 100%;
  }
  .fn-box a.cart {
    width: 24px;
    margin: 0 0 0 28px;
    display: block;
  }
  .fn-box a.cart img {
    width: 100%;
  }

  .m-nav-sub-gruop {
    height: 100%;
    width: 100%;
    background: #8AB89E;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 13;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    transition: transform 1s;
    transform: translateX(-100%);
  }
  .m-nav-sub-gruop.on {
    transform: translateX(0);
  }

  .m-nav-member-sub-group {
    background: #B2A190;
  }

  .m-nav-main-box {
    width: 100%;
    height: 100%;
    padding: 100px 25px 0;
    position: relative;
  }

  .m-nav-item {
    font-family: "Roboto", sans-serif;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 1.5px;
    line-height: 2.2;
    color: #fff;
    min-height: 30px;
    display: block;
  }

  .m-nav-item.margin-b-5 {
    margin-bottom: 30px;
  }

  .m-nav-all {
    font-family: "Roboto", sans-serif;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 1.5px;
    line-height: 1;
    color: #CDEDDB;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
    padding: 0 0 15px;
    margin: 0 0 15px;
    display: block;
  }

  .m-nav-bot-group {
    position: absolute;
    bottom: 25px;
    left: 25px;
    right: 25px;
    z-index: 1;
  }

  .nav-bot-info {
    width: 100%;
    padding: 0 0 20px;
    margin: 0 0 20px;
    border-bottom: 2px solid #CDEDDB;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
  }

  .m-language-box {
    color: #fff;
    font-size: 12px;
    letter-spacing: 1px;
    height: 30px;
    padding: 0 0 0 30px;
    background: url(/img/icon_language_w.svg) no-repeat left center/24px;
  }

  .m-social-box a {
    width: 24px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 0 20px;
  }
  .m-social-box img {
    width: 100%;
  }

  .m-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
  }

  .m-info-box {
    font-family: "Roboto", sans-serif;
    font-size: 11px;
  }
  .m-info-box h3 {
    color: #CDEDDB;
    font-weight: 500;
    letter-spacing: 1px;
    margin: 0 0 5px;
  }
  .m-info-box p {
    color: #fff;
    font-size: 11px;
    letter-spacing: 1px;
    margin: 0 0 3px;
  }
  .m-info-box a {
    color: #fff;
  }

  .m-nav-back {
    font-size: 12px;
    color: #fff;
    letter-spacing: 2px;
    padding: 0 0 15px;
    border-bottom: 1px solid #fff;
    margin: 0 0 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
  }
  .m-nav-back img {
    cursor: pointer;
    width: 24px;
  }

  .m-nav-sub-box {
    height: 100%;
    width: 100%;
    padding: 100px 25px 0;
    position: relative;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 13;
    transition: transform 0.6s;
    transform: translateX(-100%);
  }
  .m-nav-sub-box.on {
    transform: translateX(0);
    overflow: auto;
  }

  .m-exp-sub2-bg {
    background: #455D48;
  }

  .m-learn-sub2-bg {
    background: #505FA8;
  }

  .m-member-sub2-bg {
    background: #a38d76;
  }

  .m-search-box {
    width: 100%;
    min-height: 220px;
    background: #8AB89E;
    padding: 151px 25px 100px 25px;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    transition: 0.6s ease-out;
    transform: translateY(-100%);
  }
  .m-search-box.on {
    transform: translateY(0);
  }

  .input-search {
    width: 100%;
    position: relative;
  }
  .input-search input {
    width: 100%;
    height: 44px;
    color: #fff;
    font-size: 15px;
    letter-spacing: 1.5px;
    padding: 0 0 12px;
    border: none;
    border-radius: 0;
    background: none;
    -webkit-appearance: none;
    border-bottom: 1px solid #fff;
  }
  .input-search input::-moz-placeholder {
    color: #fff;
  }
  .input-search input::placeholder {
    color: #fff;
  }
  .input-search input[type=submit] {
    width: 24px;
    height: 24px;
    background: url(/img/icon_search_w.svg) no-repeat center center/22px;
    border: none;
    padding: 0;
    position: absolute;
    right: 0;
    top: 10px;
    z-index: 1;
  }

  .ban-group {
    display: none;
  }

  .m-ban-group {
    width: 100%;
    height: 577px;
    background: #6FA287;
    position: relative;
    display: block;
    overflow: hidden;
  }
  .m-ban-group .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 5px;
  }
  .m-ban-group .m-ban-pagin {
    width: 100%;
    bottom: 30px;
    z-index: 9;
  }
  .m-ban-group .swiper-slide {
    overflow: hidden;
  }

  .m-ban-item {
    color: #fff;
    text-align: center;
    width: 100%;
    height: 577px;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
  }
  .m-ban-item span {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-size: 14px;
    margin: 0 0 24px;
    letter-spacing: 2.2px;
    width: 100%;
  }
  .m-ban-item h2 {
    font-size: 34px;
    letter-spacing: 3.72px;
    font-weight: 500;
  }
  .m-ban-item .px {
    height: 90px;
    margin: 23px auto 27px;
  }
  .m-ban-item h3 {
    font-size: 19px;
    letter-spacing: 3px;
    font-weight: 500;
  }

  .m-ban-pagin {
    width: 100%;
    bottom: 0;
  }
  .m-ban-pagin .swiper-pagination {
    bottom: 89px;
  }
  .m-ban-pagin .swiper-pagination-bullets {
    bottom: -26px;
  }
  .m-ban-pagin .swiper-pagination-bullet {
    background: #fff;
    width: 30px;
    height: 5px;
    margin: 0 5px;
    border-radius: 0;
    opacity: 1;
  }
  .m-ban-pagin .swiper-pagination-bullet-active {
    background: #6FA287;
  }

  .mouse-inv {
    display: none;
  }

  .intro-box {
    background: #6FA287 url(/img/map.svg) no-repeat right 38% top 70px/190%;
    padding: 120px 25px 102px;
    margin: 0;
  }
  .intro-box:hover .mouse-inv {
    display: none;
  }

  .m-direction {
    flex-direction: column-reverse;
  }

  .video-group {
    width: 100%;
    margin: 0 0 120px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column-reverse;
  }

  .video-cover {
    width: 100%;
    margin: 0;
  }

  .video-desc {
    width: 100%;
    margin: 0 0 30px 0;
  }
  .video-desc p {
    font-size: 43px;
    letter-spacing: 2.5px;
    line-height: 1.06;
  }
  .video-desc p.sub-p {
    font-size: 14px;
    letter-spacing: 2.2px;
  }
  .video-desc p.sub-tw {
    font-size: 14px;
    letter-spacing: 2.2px;
    margin: 0;
  }

  .invite-box {
    width: 100%;
    bottom: 0;
    margin: 0 auto;
  }
  .invite-box h2 {
    font-size: 50px;
    line-height: 1;
    padding: 0 0 0 20%;
  }
  .invite-box h3 {
    font-size: 32px;
    letter-spacing: 3px;
    line-height: 1.65;
  }
  .invite-box p {
    font-size: 14px;
    letter-spacing: 0.7px;
    line-height: 2;
    height: auto;
    margin: 0 0 17px;
  }

  .m-direction-inv {
    flex-direction: column-reverse;
  }

  .invite-desc {
    width: 100%;
  }
  .invite-desc .swiper-pagination-bullet {
    width: 30px;
    height: 5px;
  }

  .e-box {
    font-size: 13px;
  }

  .invite-ban {
    width: 100%;
    margin: 0 0 43px;
  }
  .invite-ban .swiper-pagination-bullets {
    text-align: left;
    bottom: -28px;
  }
  .invite-ban .swiper-pagination-bullet {
    margin: 0 15px 0 0;
    width: 45px;
    height: 8px;
  }

  .btn-inv {
    width: 25px;
  }

  .mouse-evt {
    display: none;
  }

  .prod-slide-box {
    padding: 100px 25px;
    cursor: default;
  }
  .prod-slide-box:hover .mouse-evt {
    display: none;
  }
  .prod-slide-box h3 {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-size: 28px;
    letter-spacing: 1.2px;
    line-height: 1.4;
    margin: 0 0 40px;
  }
  .prod-slide-box p {
    font-weight: 500;
    font-size: 24px;
    letter-spacing: 3.2px;
    line-height: 1.4;
    margin: 0 0 10px;
  }

  .prod-slide-group h2 {
    font-size: 50px;
    line-height: 1.16;
    padding: 0;
  }
  .prod-slide-group > p {
    font-weight: 500;
    font-size: 24px;
    padding: 0;
    margin: 0 0 40px;
  }
  .prod-slide-group .tags {
    padding-left: 0px;
  }

  .oil-group {
    overflow: unset;
    padding: 0;
  }

  .slide-mask {
    display: none;
  }

  .btn-prev {
    display: none;
  }

  .btn-next {
    display: none;
  }

  .prod-img-cover {
    margin: 0 0 20px;
  }
  .prod-img-cover .btn-fav {
    display: block;
    background-image: url(/img/icon_fav_w.svg);
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 1;
  }
  .prod-img-cover .btn-fav:hover {
    background-image: url(/img/icon_fav_w_on.svg);
  }
  .prod-img-cover .btn-fav.act {
    background-image: url(/img/icon_fav_w_on.svg);
  }

  .brand-info {
    margin: 0 0 19px;
  }

  .sub-prod-name {
    font-size: 13px;
  }
  .sub-prod-name .prod-en {
    letter-spacing: 1px;
    margin: 0 10px 0 0;
  }
  .sub-prod-name span {
    letter-spacing: 2.6px;
    margin: 0 0 0 10px;
  }

  .prod-info {
    flex-wrap: nowrap;
    margin: 0 0 16px;
  }
  .prod-info h3 {
    font-size: 16px;
    letter-spacing: 2px;
    margin: 0 0 16px;
  }

  .prod-price {
    font-size: 14px;
    letter-spacing: 0.2px;
  }

  .prod-size {
    font-size: 12px;
    width: 100%;
  }
  .prod-size span {
    padding: 0 10px 0 0;
    margin: 0 10px 0 0;
  }

  .prod-freegift-soldout {
    font-size: 13px;
    color: #D86018;
  }

  .prod-freegift-label {
    padding: 2px 5px;
    font-weight: 600;
    font-size: 10px;
  }

  .freegift-group .mesg-box {
    left: -100px;
    top: 30px;
  }

  .freegift-bag-item-info-group .bag-price {
    font-size: 12px;
    padding: 2px 3px;
  }
  .freegift-bag-item-info-group .item-capacity {
    bottom: 14px;
    left: 29%;
    width: 100px;
  }
  .freegift-bag-item-info-group .item-quantity {
    right: 0px;
    width: 100px;
    bottom: 14px;
  }

  .lg-box.freegift-lg-box {
    width: 90%;
    top: 50%;
    left: 50%;
    padding: 5px 0;
  }

  .oil-slide {
    width: calc(100% - 45px);
  }
  .oil-slide .swiper-slide:nth-of-type(even) .prod-img {
    transform: translateY(0);
  }
  .oil-slide .swiper-slide:nth-of-type(odd) .prod-img {
    transform: translateY(0);
  }

  .btn-add-cart {
    display: none;
  }

  .btn-fav {
    width: 24px;
    height: 24px;
    margin: -7px 0 0 0;
    float: right;
  }

  .m-btn-add-cart {
    width: 24px;
    height: 24px;
    background: url(/img/icon_m_add_bag.svg) no-repeat center center/contain;
    margin: -7px 0 0 0;
    float: right;
    cursor: pointer;
    display: block;
  }

  .m-btn-txt-cart {
    font-size: 14px;
    font-weight: 400;
    width: auto;
    height: auto;
    background: none;
  }

  .class-slide-box {
    padding: 120px 25px;
  }
  .class-slide-box h2 {
    font-size: 50px;
    line-height: 1.16;
    text-align: left;
    padding: 0;
    margin: 0 0 10px;
  }
  .class-slide-box:hover .mouse-evt {
    display: none;
  }

  .class-slide-group > p {
    font-size: 24px;
    text-align: left;
    padding: 0;
    margin: 0 0 40px;
  }

  .class-group {
    overflow: unset;
    padding: 0;
  }

  .slide-mask-class {
    display: none;
  }

  .class-slide {
    width: calc(100% - 45px);
  }
  .class-slide .swiper-slide:nth-of-type(odd) .class-img {
    transform: translateY(0);
  }
  .class-slide .swiper-slide:nth-of-type(even) .class-img {
    transform: translateY(0);
  }

  .class-icon {
    width: 50px;
    height: 50px;
    top: 15px;
    left: 15px;
  }

  .btn-fav-icon {
    width: 22px;
    height: 22px;
  }

  .class-sub {
    font-size: 13px;
    letter-spacing: 2px;
  }

  .class-info {
    left: 15px;
    right: 15px;
    bottom: 83px;
  }
  .class-info h3 {
    font-size: 25px;
    letter-spacing: 2px;
  }

  .blooming-group {
    height: auto;
    position: relative;
  }
  .blooming-group .swiper-pagination-bullets {
    text-align: left;
    padding: 0;
    bottom: -28px;
  }
  .blooming-group .swiper-pagination-bullet {
    margin: 0 10px 0 0;
  }
  .blooming-group .btn-more {
    padding: 0;
  }

  .blooming-box-area h2 {
    font-size: 50px;
    text-align: left;
    line-height: 1.16;
    padding: 0;
  }

  .sub-bloming {
    font-size: 24px;
    letter-spacing: 3.2px;
    font-weight: 500;
    margin: 0 0 40px;
  }

  .blooming-slide {
    width: 87%;
    height: auto;
  }

  .blooming-slide-cont {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .blooming-img {
    width: 100%;
    height: 250px;
  }

  .blooming-info {
    width: 100%;
    height: auto;
    padding: 35px 35px 25px;
  }
  .blooming-info h3 {
    font-size: 26px;
    letter-spacing: 2.4px;
    margin: 0 0 30px;
  }
  .blooming-info p {
    font-size: 14px;
    letter-spacing: 0.7px;
    font-weight: 300;
  }

  .btn-blooming-group {
    width: 13%;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
  }

  .blooming-sub {
    font-size: 13px;
    letter-spacing: 2px;
    margin: 0 0 20px;
  }

  .btn-more {
    padding: 12px 0;
  }

  .f-img-group {
    min-height: 400px;
  }
  .f-img-group h2 {
    width: 66.91%;
    top: auto;
    bottom: 110px;
    transform: translate(-50%, 0);
  }

  .f-img-0 {
    width: 34.17%;
    bottom: 11.1%;
  }

  .f-img-1 {
    width: 31.885%;
    bottom: 49.2%;
  }

  .f-img-2 {
    display: none;
  }

  .f-img-3 {
    width: 21.016%;
    bottom: 33.9%;
  }

  .f-img img {
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }

  @keyframes aniIn0 {
    0% {
      height: 0;
      transform: scale(1.2);
      opacity: 0;
    }
    100% {
      height: 76px;
      transform: scale(1);
      opacity: 1;
    }
  }
  @keyframes aniIn1 {
    0% {
      height: 0;
      transform: scale(1.2);
      opacity: 0;
    }
    100% {
      height: 100px;
      transform: scale(1);
      opacity: 1;
    }
  }
  @keyframes aniIn3 {
    0% {
      height: 0;
      transform: scale(1.2);
      opacity: 0;
    }
    100% {
      height: 84px;
      transform: scale(1);
      opacity: 1;
    }
  }
  .subscription-box {
    width: 100%;
    padding: 30px 25px 0;
    position: static;
    transform: translate(0);
  }
  .subscription-box h3 {
    letter-spacing: 1.6px;
  }
  .subscription-box p {
    font-weight: 400;
    letter-spacing: 1.8px;
  }

  .subscript-input {
    margin: 0 0 40px;
  }
  .subscript-input input[type=text] {
    font-size: 13px;
  }
  .subscript-input input[type=submit] {
    font-size: 13px;
  }

  .media-box {
    flex-wrap: wrap;
  }
  .media-box .media-item:nth-of-type(1) {
    width: 100%;
    border: none;
    padding: 0;
    margin: 0 0 21px;
    order: 1;
  }
  .media-box .media-item:nth-of-type(2) {
    order: 2;
  }
  .media-box .media-item:nth-of-type(3) {
    order: 4;
    border-right: none;
    border-left: 1px solid #979797;
  }
  .media-box .media-item:nth-of-type(4) {
    order: 3;
    padding: 0 20px;
  }

  .media-item {
    font-size: 13px;
    padding: 0 20px;
  }

  .social-box {
    margin: 0;
    padding: 0 0 40px;
  }
  .social-box a {
    width: 36px;
  }

  .footer-sitemap {
    width: auto;
    margin: 0 25px;
  }

  .footer-nav {
    width: 100%;
  }
  .footer-nav h3 {
    font-size: 14px;
    letter-spacing: 0.7px;
  }
  .footer-nav ul {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .footer-nav li {
    width: 33.333%;
    height: 141px;
    padding: 0 0 0 15px;
    margin: 0 0 36px;
  }
  .footer-nav li:nth-of-type(1), .footer-nav li:nth-of-type(4) {
    padding: 0;
  }
  .footer-nav li:nth-of-type(1) .f-nav, .footer-nav li:nth-of-type(4) .f-nav {
    left: 0;
  }
  .footer-nav li:nth-of-type(3) {
    border: none;
  }

  .f-nav {
    bottom: auto;
    left: 15px;
    top: 30px;
  }
  .f-nav a {
    font-size: 13px;
    color: #464646;
    letter-spacing: 1.8px;
    margin: 10px 0 0;
  }

  .connect {
    display: none;
  }

  .copy-box {
    flex-wrap: wrap;
    padding: 20px 0 30px;
    border-top: 1px solid #979797;
    margin: 0;
  }
  .copy-box span {
    width: 100%;
    margin: 15px 0 0;
    padding: 0 15px 0 0;
    border-right: none;
    order: 4;
  }
  .copy-box a:nth-of-type(1) {
    padding: 0;
    order: 1;
    padding: 0 15px 0 0;
  }
  .copy-box a:nth-of-type(2) {
    order: 2;
    padding: 0 15px;
  }
  .copy-box a:nth-of-type(3) {
    order: 3;
  }

  .about-box {
    margin: 200px auto 0;
    padding: 90px 25px 100px;
    flex-wrap: wrap;
  }

  .about-logo {
    top: -30px;
  }

  .about-info {
    width: 100%;
  }
  .about-info span {
    font-size: 16px;
    margin: 0 0 40px;
  }
  .about-info h2 {
    font-size: 27px;
    letter-spacing: 2.5px;
    line-height: 1.7;
    font-weight: 400;
    margin: 0 0 40px;
  }
  .about-info p {
    font-size: 14px;
    letter-spacing: 1px;
    line-height: 2;
    margin: 0 0 40px;
  }

  .btn-history {
    font-size: 14px;
    width: 133px;
    padding: 8px 0 9px 18px;
    margin: 0 0 60px;
  }

  .about-img {
    width: 100%;
  }

  .art-box {
    padding: 100px 25px 0;
  }
  .art-box h2 {
    font-size: 50px;
    letter-spacing: 0.4px;
  }
  .art-box .art-list-box:nth-of-type(even) {
    flex-direction: column-reverse;
  }

  .art-h2-sub {
    font-size: 16px;
    letter-spacing: 2.5px;
    margin: 0 0 40px;
  }

  .art-list-box {
    flex-wrap: wrap;
  }

  .art-txt-cont {
    width: 100%;
  }

  .art-txt {
    position: static;
    margin: 0 0 60px;
  }
  .art-txt span {
    font-size: 13px;
    letter-spacing: 1px;
    margin: 0 0 20px;
  }
  .art-txt h3 {
    letter-spacing: 2.6px;
    margin: 0 0 30px;
  }
  .art-txt p {
    font-size: 14px;
    letter-spacing: 0.7px;
    line-height: 2;
    margin: 0 0 20px;
  }

  .art-img-cont {
    width: 100%;
    min-height: 365px;
    margin: 0 0 40px;
  }

  .art-img {
    height: 270px;
    margin: 0 0 40px;
  }

  .art-img-tit {
    font-size: 13px;
    letter-spacing: 2px;
    bottom: 24px;
  }

  .art-a-box {
    padding: 0 25px 40px;
    flex-wrap: wrap;
  }

  .art-a {
    width: 100%;
    margin: 0 0 60px;
  }
  .art-a h3 {
    font-size: 28px;
    letter-spacing: 2.6px;
    margin: 0 0 30px;
  }
  .art-a p {
    font-size: 14px;
    letter-spacing: 0.7px;
    line-height: 2;
    margin: 0 0 20px;
  }

  .art-desc {
    font-size: 14px;
    position: static;
  }

  .art-a-img {
    height: 100%;
    padding: 70px 0 80px;
    margin: 0 0 40px;
  }
  .art-a-img span {
    bottom: -35px;
  }

  .art-a-img-box {
    width: auto;
    height: 270px;
  }
  .art-a-img-box img {
    width: auto;
    height: 270px;
  }

  .idea-box {
    padding: 100px 25px 10px;
  }
  .idea-box h2 {
    font-size: 50px;
    letter-spacing: 0.4px;
    line-height: 1.16;
  }

  .idea-cont {
    flex-wrap: wrap;
  }

  .idea-img {
    width: 100%;
    display: none;
  }

  .idea-support {
    width: 100%;
  }

  .m-plan-img {
    width: 100%;
    margin: 0 0 20px;
    display: block;
  }
  .m-plan-img img {
    width: 100%;
  }

  .num {
    width: 50px;
    height: 50px;
    padding: 6px 0;
    margin: 0 0 20px;
  }

  .plan-box {
    margin: 0 0 60px;
  }
  .plan-box h3 {
    font-size: 28px;
    letter-spacing: 2.6px;
    margin: 0 0 30px;
  }
  .plan-box p {
    font-size: 14px;
    letter-spacing: 0.7px;
    line-height: 2;
  }
  .plan-box a.btn-more {
    padding: 5px 0;
  }

  .founder-cont {
    width: 100%;
  }
  .founder-cont h3 {
    letter-spacing: 2.4px;
    font-weight: 400;
    margin: 0 0 30px;
  }

  .founder-box {
    padding: 100px 25px 70px;
  }
  .founder-box h2 {
    font-size: 50px;
    letter-spacing: 0.4px;
  }

  .founder-img {
    display: none;
  }

  .m-founder-img {
    width: 100%;
    display: block;
    margin: 0 0 40px;
  }
  .m-founder-img img {
    width: 100%;
  }

  .founder-june {
    width: 100%;
  }
  .founder-june p {
    font-size: 14px;
    letter-spacing: 1px;
    line-height: 2;
  }

  .founder-book {
    width: 100%;
  }
  .founder-book h4 {
    letter-spacing: 1.5px;
    margin: 20px 0;
  }
  .founder-book p {
    font-size: 13px;
    line-height: 2;
    margin: 0px 0 30px;
  }
  .founder-book span {
    display: block;
  }

  .history-sty {
    overflow: auto;
  }

  .history-wrap {
    height: auto;
    overflow: auto;
    padding: 80px 0 0;
  }
  .history-wrap h2 {
    position: static;
    font-size: 50px;
    letter-spacing: 0.4px;
    padding: 0 0 0 25px;
    margin: 80px 0 40px;
  }
  .history-wrap span {
    font-size: 20px;
    letter-spacing: 2.5px;
  }

  .btn-back {
    position: static;
  }

  .history-swiper {
    display: none;
  }

  .memorabilia-mask-up, .memorabilia-mask-down {
    display: none;
  }

  .year-swiper-box {
    position: static;
    height: auto;
    padding: 0 25px;
    margin: 0 0 30px;
  }

  .year-swiper {
    width: 70%;
    height: 50px;
  }
  .year-swiper .swiper-slide-active .y-box {
    color: #000;
  }
  .year-swiper .swiper-slide::before, .year-swiper .swiper-slide::after {
    display: none;
  }

  .y-box {
    color: rgba(0, 0, 0, 0.1);
    font-size: 50px;
    letter-spacing: 0;
    font-weight: 500;
    line-height: 1;
    text-align: left;
    padding: 0;
    transition: 0.3s;
  }

  .year-sel {
    padding: 0 25px;
    margin: 0 0 30px;
    display: block;
  }

  .y-sel-sty {
    font-size: 16px;
    color: #787878;
    letter-spacing: 0.5px;
    border: none;
    font-weight: 500;
    height: 30px;
    padding: 5px 55px 5px 0;
    background: url(/img/icon_sel_down.svg) no-repeat right 10px center;
  }

  .m-history-color {
    height: 200px;
    padding: 60px 25px 0;
    margin: 0 0 200px;
    position: relative;
    display: block;
  }

  .m-history-swiper-group {
    width: 100%;
    overflow: hidden;
  }

  .m-history-swiper {
    width: 100%;
    height: 230px;
    overflow: hidden;
  }
  .m-history-swiper .swiper-slide {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .m-shistory-pagin {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 20px 0 0;
  }
  .m-shistory-pagin .swiper-pagination-bullet {
    width: 50px;
    height: 50px;
    border-radius: 0;
    margin: 0 15px 0 0;
    filter: grayscale(100%);
    background: none;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 1;
    cursor: pointer;
    transition: 0.3s;
  }
  .m-shistory-pagin .swiper-pagination-bullet:hover {
    filter: grayscale(0);
  }
  .m-shistory-pagin .swiper-pagination-bullet-active {
    filter: grayscale(0);
  }

  .m-year-cont {
    display: block;
    margin: 0 25px 70px;
    overflow: hidden;
  }

  .history-txt-group {
    position: static;
    width: 100%;
  }

  .history-cont h3 {
    font-size: 24px;
    letter-spacing: 2.5px;
    margin: 0 0 20px;
    font-weight: 500;
  }
  .history-cont ol {
    font-size: 14px;
    letter-spacing: 0.5px;
  }

  .btn-back {
    color: #000;
    width: 130px;
    margin: 0 0 70px 25px;
  }
  .btn-back a {
    color: #000;
  }

  .icon-back {
    background: url(/img/icon_back_b.svg) no-repeat center center;
  }

  .brand-products-top {
    padding: 80px 0;
  }
  .brand-products-top .breadcrumbs-box {
    padding: 25px 25px 0;
  }

  .brand-top {
    height: 260px;
    margin: 0 0 40px;
  }

  .brand-logo {
    width: 207px;
    margin: 80px auto 0;
  }

  .product-filter-box {
    display: none;
  }

  .product-bg .footer-sitemap-group {
    padding: 0 0 60px;
  }

  .main-prod-slide-box h2 {
    padding: 0 0 0 25px;
  }

  .main-prod-slide-box > p {
    padding: 0 0 0 25px;
    margin: 0 0 40px;
  }

  .main-prod-slide-group {
    padding: 95px 0;
  }
  .main-prod-slide-group:hover .mouse-evt {
    display: none;
  }

  .product-box {
    padding: 0 0 0 25px;
  }

  .product-slide .swiper-slide:nth-of-type(odd) .prod-img {
    transform: translateY(0);
  }
  .product-slide .swiper-slide:nth-of-type(even) .prod-img {
    transform: translateY(0);
  }

  .btn-fav {
    display: none;
  }

  .product-ban-box {
    padding: 0;
    margin: 0 auto 56px;
  }

  .product-ban-swiper {
    width: 100%;
  }

  .product-list-box .prod-img {
    width: 46.3%;
    margin: 0 0 40px;
  }
  .product-list-box .prod-img .prod-info {
    position: relative;
  }
  .product-list-box .prod-img .prod-info h3 {
    font-size: 14px;
    letter-spacing: 1.8px;
  }
  .product-list-box .prod-img .prod-price {
    display: none;
  }
  .product-list-box .prod-img .prod-size {
    margin: 0 0 15px;
  }
  .product-list-box .prod-img .m-prod-price {
    font-family: "Roboto", sans-serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.5px;
    display: block;
  }
  .product-list-box .prod-img .m-btn-add-cart {
    position: absolute;
    right: 0;
    bottom: -2px;
    z-index: 1;
    margin: 0;
  }
  .product-list-box .prod-img .prod-img-cover {
    margin: 0 0 15px;
  }
  .product-list-box .prod-img .brand-info {
    margin: 0 0 15px;
  }

  .pagin-box {
    margin: 0 auto;
    justify-content: space-between;
  }
  .pagin-box a {
    margin: 0;
  }

  .m-pagin-box {
    justify-content: center;
  }

  .m-product-filter-box {
    width: 100%;
    height: 60px;
    padding: 10px 0;
    background: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 12;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    transition: box-shadow 0.4s;
  }
  .m-product-filter-box.m-product-today-box {
    justify-content: space-between;
  }
  .m-product-filter-box.on {
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
  }

  .m-sel-btn {
    font-size: 13px;
    letter-spacing: 1.5px;
    color: #000;
    line-height: 40px;
    font-weight: 400;
    width: 40%;
    height: 100%;
    background: url(/img/icon_sel_top_b.svg) no-repeat right 18px center;
    border-right: 1px solid #C8C8C8;
    padding: 0 25px;
  }
  .m-sel-btn.on {
    background: url(/img/icon_sel_down_b.svg) no-repeat right 18px center;
  }

  .m-search {
    text-align: center;
    width: 20%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
  }

  .m-today-find-result-box {
    padding: 0 25px;
  }
  .m-today-find-result-box h3 {
    font-size: 15px;
    letter-spacing: 1.5px;
    color: #000;
    margin: 0 0 17px;
  }

  .m-today-result {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .m-today-result .type-item {
    font-size: 12px;
    color: #464646;
    letter-spacing: 1.3px;
    font-weight: 400;
    padding: 8px 13px 8px 10px;
    border: 1px solid #787878;
  }
  .m-today-result .btn-del-type {
    margin: 0 0 0 13px;
    background: url(/img/icon_close_type_b.svg) no-repeat center;
  }

  .m-today-sel-btn {
    font-size: 13px;
    letter-spacing: 2px;
    color: #000;
    line-height: 40px;
    font-weight: 400;
    width: calc(100% - 130px);
    height: 100%;
    background: url(/img/icon_sel_down_b.svg) no-repeat right 25px center;
    padding: 0 25px;
  }
  .m-today-sel-btn.on {
    background: url(/img/icon_sel_top_b.svg) no-repeat right 25px center;
  }

  .m-today-search {
    text-align: center;
    font-size: 13px;
    letter-spacing: 2px;
    font-weight: 400;
    color: #fff;
    width: 130px;
    height: 60px;
    line-height: 60px;
    background: #000;
    display: block;
    cursor: pointer;
    position: relative;
    top: 0;
    z-index: 1;
  }

  .clear-all {
    text-align: right;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 1px;
    color: #464646;
    border-bottom: 1px solid #464646;
    padding: 0 0 1px;
    margin: 5px 0 20px;
    cursor: pointer;
  }

  .m-product-filter-panel {
    width: 100%;
    height: 100%;
    display: block;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #F4F2EF;
    padding: 30px 0 100px;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 11;
    transform: translateY(100%);
    transition: 0.4s ease-out;
  }
  .m-product-filter-panel.on {
    transform: translateY(0%);
  }
  .m-product-filter-panel .sel-ui-box {
    width: auto;
    padding: 0 25px;
    flex-wrap: wrap;
  }
  .m-product-filter-panel .sel-ui {
    width: 100%;
    line-height: 40px;
    margin: 0;
  }
  .m-product-filter-panel .sel-ui:hover .prod-type-panel {
    display: block;
  }
  .m-product-filter-panel .sel-ui h3 {
    font-size: 15px;
    letter-spacing: 1.5px;
    background: url(/img/icon_sel_down.svg) no-repeat right top 17px;
    color: #000;
  }
  .m-product-filter-panel .prod-type-panel {
    font-size: 14px;
    letter-spacing: 1.4px;
    font-weight: 400;
    color: #464646;
    height: 0;
    background: none;
    overflow: hidden;
    display: block;
    position: static;
    padding: 0;
  }
  .m-product-filter-panel .prod-type-panel label {
    margin: 0 0 5px;
  }
  .m-product-filter-panel .prod-type-panel input[type=checkbox] {
    width: 15px;
    height: 15px;
    vertical-align: middle;
    background-color: transparent;
    margin: 0 10px 0 0;
  }
  .m-product-filter-panel .prod-type-panel input[type=checkbox]:checked {
    background: #787878 url(/img/icon_check.svg) no-repeat center center;
  }
  .m-product-filter-panel .prod-type-panel span {
    vertical-align: middle;
  }
  .m-product-filter-panel .prod-type-panel.on {
    height: auto;
  }

  .m-product-panel-mask {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    visibility: hidden;
    opacity: 0;
    transition: 0.4s;
  }
  .m-product-panel-mask.on {
    visibility: visible;
    opacity: 1;
  }

  .m-product-sort-panel {
    width: 100%;
    overflow: hidden;
    background: #F4F2EF;
    padding: 30px 0;
    display: block;
    position: fixed;
    bottom: 60px;
    left: 0;
    z-index: 11;
    transform: translateY(100%);
    transition: 0.4s ease-out;
  }
  .m-product-sort-panel.on {
    transform: translateY(0%);
  }
  .m-product-sort-panel .prod-type-panel {
    font-size: 15px;
    letter-spacing: 1px;
    width: 100%;
    display: block;
    padding: 0 25px;
    background: none;
    position: static;
  }
  .m-product-sort-panel .prod-type-panel label {
    line-height: 40px;
    font-weight: 400;
  }
  .m-product-sort-panel .prod-type-panel input[type=radio] {
    width: 13px;
    height: 13px;
  }
  .m-product-sort-panel .prod-type-panel input[type=radio]:checked::after {
    width: 9px;
    height: 9px;
  }

  .m-product-search-panel {
    width: 100%;
    overflow: hidden;
    background: #F4F2EF;
    padding: 40px 25px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    position: fixed;
    bottom: 60px;
    left: 0;
    z-index: 11;
    transform: translateY(100%);
    transition: 0.4s ease-out;
  }
  .m-product-search-panel.on {
    transform: translateY(0%);
  }
  .m-product-search-panel form {
    width: 100%;
    display: block;
    position: relative;
  }
  .m-product-search-panel input[type=text] {
    color: #464646;
    font-size: 14px;
    letter-spacing: 1.07px;
    line-height: 1;
    width: 100%;
    height: 50px;
    background: none;
    border-radius: 0;
    border-bottom: 1px solid #464646;
  }
  .m-product-search-panel input[type=text]::-moz-placeholder {
    color: #787878;
  }
  .m-product-search-panel input[type=text]::placeholder {
    color: #787878;
  }
  .m-product-search-panel input[type=submit] {
    width: 24px;
    height: 24px;
    background: url(/img/icon_filter_search.svg) no-repeat center center;
    position: absolute;
    top: 8px;
    right: 0;
    cursor: pointer;
  }

  .product-anius .page-nav.white-sty {
    background: transparent;
  }
  .product-anius .fix-box {
    background: #D29F13;
  }

  .anius-type-box {
    width: auto;
    padding: 0 25px;
    display: none;
  }
  .anius-type-box .prod-type-panel {
    width: 120px;
    padding: 20px;
    top: 48px;
  }

  .type-slide {
    position: relative;
    display: none;
  }
  .type-slide::after {
    content: "";
    display: block;
    height: 100%;
    width: 70px;
    position: absolute;
    top: 0;
    right: -25px;
    z-index: 4;
    background-image: linear-gradient(to right, rgba(210, 159, 19, 0), #d29f13);
  }

  .anius-brand-slider {
    height: auto;
  }
  .anius-brand-slider .product-brand-pagin {
    bottom: 40px;
  }
  .anius-brand-slider .swiper-slide {
    overflow: hidden;
  }
  .anius-brand-slider img {
    width: 100%;
  }

  .brand-group-1 .b-p-01 {
    top: 41.5%;
    left: 48.2%;
  }
  .brand-group-1 .b-p-02 {
    display: none;
  }
  .brand-group-1 .b-p-03 {
    top: 60.2%;
    left: 35.9%;
  }

  .brand-group-2 .b-p-01 {
    top: 61%;
    left: 73.4%;
  }
  .brand-group-2 .b-p-02 {
    top: 40.2%;
    left: 32%;
  }
  .brand-group-2 .b-p-03 {
    display: none;
  }

  .brand-group-3 .b-p-01 {
    top: 44.2%;
    left: 64.4%;
  }
  .brand-group-3 .b-p-02 {
    top: 62.1%;
    left: 39.5%;
  }
  .brand-group-3 .b-p-03 {
    display: none;
  }

  .brand-group-4 .b-p-01 {
    top: 66.8%;
    left: 41.8%;
  }
  .brand-group-4 .b-p-02 {
    top: 29.3%;
    left: 39%;
  }
  .brand-group-4 .b-p-03 {
    display: none;
  }

  .brand-group-5 .b-p-01 {
    display: none;
  }
  .brand-group-5 .b-p-02 {
    top: 38.5%;
    left: 47.2%;
  }
  .brand-group-5 .b-p-03 {
    top: 55.2%;
    left: 35.4%;
  }

  .brand-product {
    width: 4.1%;
  }

  .anius-type-submit {
    display: none;
  }

  .pop-main-box {
    width: 90%;
    height: auto;
    flex-wrap: wrap;
    flex-direction: column-reverse;
  }

  .pop-prod-img {
    width: 100%;
    height: 205px;
    background-size: contain;
  }

  .pop-prod-cont {
    width: 100%;
    height: auto;
  }
  .pop-prod-cont h2 {
    padding: 20px 25px;
  }
  .pop-prod-cont p {
    height: 180px;
    padding: 20px 25px;
  }

  .anius-event-box {
    padding: 80px 0;
  }

  .e-en {
    display: none;
  }

  .m-e-en {
    font-family: "Roboto", sans-serif;
    font-size: 50px;
    color: #fff;
    font-weight: 500;
    letter-spacing: 0.4px;
    padding: 0 25px;
    margin: 0 0 25px;
    display: block;
  }

  .anius-e-bxo {
    width: auto;
    flex-wrap: wrap;
    flex-direction: column-reverse;
  }
  .anius-e-bxo img {
    width: 100%;
  }

  .e-cont {
    margin: -35px 25px 0;
    padding: 35px 30px;
  }

  .product-ban-pagin {
    padding: 0 25px;
  }
  .product-ban-pagin .swiper-pagination-bullet {
    margin: 0 10px 0 0;
  }

  .spin-box {
    text-align: left;
  }
  .spin-box h2 {
    font-size: 50px;
    padding: 0 0 0 25px;
  }
  .spin-box h3 {
    font-size: 18px;
    padding: 0 0 0 25px;
  }

  .act-jar {
    width: 24px;
    top: 258px;
  }
  .act-jar .more-btn {
    width: 22px;
    height: 22px;
    right: -25px;
    top: -15px;
  }
  .act-jar .more-ani {
    width: 38px;
    height: 38px;
  }

  .spin-group .pop-close {
    right: 23px;
    top: 21px;
  }
  .spin-group .pop-prod-img {
    height: 205px;
  }
  .spin-group .pop-main-box {
    width: calc(100% - 50px);
    height: auto;
  }
  .spin-group .pop-prod-cont {
    width: 100%;
  }
  .spin-group .pop-prod-cont p {
    width: 100%;
    height: auto;
    padding: 20px 25px;
  }
  .spin-group .pop-prod-cont p:nth-of-type(2) {
    padding: 20px 25px;
  }
  .spin-group .pop-prod-cont .btn-more {
    position: static;
    margin: 0 0 30px 25px;
  }
  .spin-group .pop-desc {
    padding: 20px 25px;
  }

  .spin-game-box {
    height: 470px;
  }

  .spin-game {
    transform: scale(0.8);
    top: -125px;
  }

  .btn-spin {
    width: 80px;
    height: 80px;
    bottom: 50px;
  }

  .skin-box {
    flex-wrap: wrap;
    position: relative;
  }

  .skin-group h2 {
    font-size: 50px;
  }
  .skin-group h3 {
    font-size: 18px;
    margin: 0 0 40px;
  }

  .skin-left {
    width: 100%;
    height: auto;
    padding: 100px 25px 0 25px;
  }

  .skin-right {
    width: 100%;
    height: auto;
    padding: 0 0 55px 15%;
  }

  .skin-img {
    position: static;
    margin: 0 0 0 -25px;
  }

  .skin-img-2 {
    width: 100%;
    margin: 0;
  }
  .skin-img-2 img {
    margin: 0 0 20px;
  }
  .skin-img-2 .btn-more {
    position: static;
  }

  .skin-link {
    display: none;
  }

  .m-link-group-mask {
    width: 100%;
    height: 100%;
    padding: 300px 25px 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    background: rgba(0, 0, 0, 0.6);
  }

  .m-link-group {
    width: 100%;
    padding: 0 25px;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
  }
  .m-link-group a {
    font-family: "Roboto", sans-serif;
    color: #000;
    font-size: 14px;
    letter-spacing: 2.6px;
    display: block;
    padding: 14px 20px;
    margin: 0 0 15px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #9ABEAA;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
  }
  .m-link-group span {
    padding: 0 15px 0 0;
  }
  .m-link-group img {
    width: 20px;
  }

  .emotions-slide {
    margin: 0 0 100px;
  }
  .emotions-slide .swiper-slide:nth-of-type(odd) .emotions-img {
    transform: translateY(0);
  }
  .emotions-slide .swiper-slide:nth-of-type(even) .emotions-img {
    transform: translateY(0);
  }

  .anius-oil-info-box {
    padding: 100px 25px 0;
  }

  .anius-oil-info-box h2 {
    font-size: 27px;
    margin: 0 0 40px;
    padding: 0 50px;
  }

  .tab-box {
    color: #000;
    width: 100%;
    padding: 12px 0;
    border-right: none;
    border-bottom: 1px solid #C5B9AC;
    position: relative;
    margin: 0 0 13px;
  }
  .tab-box::after {
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    position: absolute;
    right: 0;
    top: 6px;
    z-index: 1;
    background: url(/img/icon_sel_down_b.svg) no-repeat center center;
    transition: 0.3s;
  }
  .tab-box:hover {
    font-weight: 400;
  }
  .tab-box.act {
    font-weight: 400;
  }
  .tab-box.act::after {
    transform: rotate(180deg);
  }

  .m-info-tab-box {
    width: 100%;
    display: block;
  }

  .m-info-cont {
    font-size: 14px;
    letter-spacing: 0.7px;
    line-height: 2;
    font-weight: 300;
    display: block;
    height: 0;
    overflow: hidden;
    transition: 0.4s ease-out;
  }
  .m-info-cont.on {
    height: auto;
    padding: 0 0 25px;
  }

  .anius-origin-logo-slider {
    width: 100%;
    margin: 0 auto 30px;
  }

  .anius-oil-principle {
    padding: 60px 0;
  }
  .anius-oil-principle h2 {
    padding: 0 34px;
  }
  .anius-oil-principle p {
    font-size: 15px;
    letter-spacing: 0.8px;
    line-height: 2.1;
  }

  .info-tab-box {
    display: none;
  }

  .anius-origin-slider {
    display: none;
  }

  .brand-series-top {
    padding: 80px 0 10px;
  }
  .brand-series-top .brand-logo {
    margin: 80px auto 50px;
  }

  .fix-box {
    background: #D29F13;
    transition: 0.6s;
    top: -100px;
  }
  .fix-box.on {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
  }

  .anius-series-type {
    position: relative;
    width: auto;
    margin: 0 25px;
    overflow: hidden;
  }
  .anius-series-type a {
    font-size: 15px;
    padding: 12px 15px;
  }
  .anius-series-type .swiper-wrapper {
    width: 100%;
  }

  .anius-series-sub-type {
    margin: 18px 0 8px;
  }
  .anius-series-sub-type a {
    padding: 0 20px;
  }

  .anius-series-box {
    flex-wrap: wrap;
  }

  .anius-series-group-cont {
    position: relative;
    text-align: center;
    overflow: hidden;
  }
  .anius-series-group-cont .swiper-slide {
    width: auto;
    display: inline-block;
  }

  .series-img {
    width: 100%;
  }

  .series-info {
    width: 100%;
    padding: 60px 25px 45px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .series-info h2 {
    font-size: 24px;
    width: 100%;
    margin: 0 0 30px;
  }
  .series-info > p {
    text-align: justify;
    letter-spacing: 0.7px;
    line-height: 2;
    width: 100%;
    margin: 0 0 60px;
  }

  .ingredients-item {
    width: 46%;
    flex-wrap: wrap;
    margin: 0 0 40px;
  }
  .ingredients-item img {
    width: 70px;
    margin: 0 auto 15px;
  }

  .ingredients-item-cont {
    width: 100%;
  }
  .ingredients-item-cont h3 {
    font-size: 13px;
    text-align: center;
    margin: 0 0 7px;
  }
  .ingredients-item-cont p {
    font-size: 13px;
    letter-spacing: 0.8px;
    text-align: justify;
  }

  .file-box {
    height: 46px;
    line-height: 46px;
    margin: 0 0 15px;
  }
  .file-box p {
    line-height: 46px;
    letter-spacing: 1px;
  }

  .product-canjune .page-nav.white-sty {
    background: transparent;
  }
  .product-canjune .fix-box {
    background: #5e7460;
  }
  .product-canjune .anius-series-type {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
  }
  .product-canjune .anius-series-type::after {
    display: none;
  }
  .product-canjune .anius-series-sub-type {
    margin: 18px 0;
  }
  .product-canjune .anius-series-sub-type::after {
    display: none;
  }

  .how-group {
    margin: 80px 0 0;
    padding: 100px 0 0;
  }
  .how-group::before {
    height: 360px;
  }

  .how-box {
    width: 100%;
    padding: 0 25px;
  }
  .how-box h2 {
    font-size: 50px;
    letter-spacing: 0.4px;
  }
  .how-box h2 p {
    font-size: 20px;
    letter-spacing: 2.5px;
  }

  .how-item-group {
    width: 100%;
    flex-wrap: wrap;
    flex-direction: column-reverse;
    margin: 0 0 25px;
  }

  .how-item {
    width: 100%;
    margin: 0 0 35px;
  }

  .how-cont {
    width: 100%;
    padding: 35px 25px;
  }
  .how-cont span {
    font-size: 12px;
    letter-spacing: 1px;
    margin: 0 0 8px;
  }
  .how-cont h3 {
    font-size: 26px;
    margin: 0 0 35px;
  }
  .how-cont h4 {
    font-size: 15px;
    margin: 0 0 20px;
  }
  .how-cont p {
    font-size: 14px;
    line-height: 2;
  }

  .how-img {
    width: 100%;
    height: 300px;
    position: static;
  }

  .trial-group {
    margin: 80px 0 40px;
    padding: 100px 0 40px;
  }

  .trial-box {
    width: 100%;
    padding: 0 25px;
  }
  .trial-box h2 {
    font-size: 30px;
    margin: 0 0 20px;
  }
  .trial-box > p {
    line-height: 1.8;
    letter-spacing: 2px;
    margin: 0 0 20px;
  }

  .trial-valid-line {
    flex-wrap: wrap;
    padding: 30px 25px;
  }
  .trial-valid-line p {
    width: 100%;
    font-weight: 400;
    line-height: 2;
    margin: 0 0 25px;
  }

  .btn-valid-line {
    font-size: 13px;
    width: 100%;
    padding: 10px 0;
  }

  .template-point {
    display: none;
  }

  .p-cont-box {
    padding: 0;
    margin: 80px 0 0;
  }
  .p-cont-box .breadcrumbs-box {
    display: none;
  }

  .m-breadcrumbs-box {
    width: 100%;
    padding: 0 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    margin: 0 0 30px;
  }
  .m-breadcrumbs-box .breadcrumbs-box {
    padding: 0;
    display: block;
    border-top: none;
  }
  .m-breadcrumbs-box .breadcrumbs-box span {
    padding: 0 4px;
  }
  .m-breadcrumbs-box .breadcrumbs-box span.act {
    padding: 0;
  }
  .m-breadcrumbs-box .p-add-fav {
    background: url(/img/icon_fav.svg) no-repeat center center/20px;
  }
  .m-breadcrumbs-box .p-add-fav.act {
    background: url(/img/icon_fav_on.svg) no-repeat center center/20px;
  }

  .p-cont {
    padding: 0 0 90px;
    flex-wrap: wrap;
  }

  .p-cover {
    width: 100%;
    margin: 0 0 40px;
    padding: 0;
  }
  .p-cover img {
    position: static;
    margin: 0 auto;
    transform: translate(0, 0);
  }

  .p-detail {
    width: 100%;
    padding: 0 25px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .p-brand {
    font-size: 13px;
    color: #000;
    letter-spacing: 1.5px;
    width: 100%;
    margin: 0 0 10px;
  }

  .p-name {
    font-size: 18px;
    width: 100%;
  }
  .p-name h2 {
    font-weight: 500;
  }

  .p-name-en {
    font-size: 13px;
    letter-spacing: 0.3px;
    width: 100%;
    margin: 0 0 25px;
  }

  .p-sale-mesg {
    font-size: 13px;
    letter-spacing: 1px;
    width: 100%;
    border-bottom: 1.5px solid #000;
    padding: 0 0 12px;
    margin: 0 0 15px;
  }

  .p-note {
    margin: 0 0 15px;
  }

  .p-ml-box {
    width: 60%;
    border: none;
    padding: 0;
    margin: 0 0 40px;
  }

  .p-cart {
    width: auto;
    margin: 0 0 40px;
  }
  .p-cart .ui-quantity {
    width: 120px;
    height: 36px;
    margin: 0;
  }
  .p-cart .btn-quantity {
    width: 36px;
    height: 34px;
    line-height: 36px;
  }

  .ml-opt {
    font-size: 13px;
    width: auto;
    padding: 10px 10px 9px;
    margin: 0 10px 0 0;
  }

  .p-btn-group {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 4;
  }
  .p-btn-group .p-add-fav {
    display: none;
  }

  .p-btn-add {
    width: 100%;
    height: 60px;
    line-height: 60px;
  }

  .p-info-unfold {
    width: 100%;
  }
  .p-info-unfold h3 {
    font-size: 13px;
    padding: 20px 24px 20px 24px;
  }

  .p-video {
    width: 100%;
  }

  .fn-box-1 {
    padding: 80px 25px 100px 25px;
  }
  .fn-box-1 h2 {
    text-align: center;
    margin: 0 0 40px;
  }

  .f-cont {
    padding: 0;
    margin: 0 0 80px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    flex-direction: column-reverse;
  }
  .f-cont p {
    width: 100%;
    margin: 0 0 40px;
  }

  .fn-txt-group {
    width: 100%;
    padding: 0 40px;
  }

  .f-cont-img {
    width: 105%;
    margin: -20px 0 50px -2.5%;
    position: static;
    transform: translateY(0);
  }

  .fn-box-2-cont {
    height: auto;
    flex-wrap: wrap;
    padding: 0 25px 60px;
    margin: 0;
  }

  .fn-2-left {
    width: 100%;
    margin: 0;
  }

  .fn-list li {
    font-size: 14px;
  }

  .fn-2-rihgt {
    width: 100%;
    top: -40px;
  }

  .fn-8-bg {
    padding: 80px 40px;
    margin: 0;
  }
  .fn-8-bg h2 {
    font-size: 22px;
    text-align: center;
    margin: 0 0 40px;
  }
  .fn-8-bg p {
    letter-spacing: 1.3px;
    margin: 0 0 20px;
  }

  .t-1-cont {
    padding: 80px 25px 50px;
    margin: 0;
  }

  .t-img {
    width: 100%;
    margin: 0 0 40px;
  }

  .t-txt-group {
    width: 100%;
  }
  .t-txt-group .t-group:first-child {
    padding: 0 0 30px;
  }

  .t-group {
    padding: 30px 0;
  }
  .t-group span {
    font-size: 13px;
    margin: 0 0 15px;
    font-weight: 400;
  }
  .t-group h2 {
    font-size: 22px;
    letter-spacing: 2.5px;
  }
  .t-group p {
    font-size: 14px;
    letter-spacing: 1px;
  }

  .template-2 {
    padding: 80px 0;
    overflow: hidden;
  }
  .template-2 span {
    font-size: 22px;
    text-align: center;
    padding: 0 25px;
    margin: 0 0 40px;
  }
  .template-2 h2 {
    font-size: 24px;
    text-align: center;
    padding: 0 25px;
    margin: 0 0 40px;
  }

  .t-2-arrow-box {
    width: auto;
    min-height: 150px;
    background: none;
    margin: 0;
    padding: 0;
  }

  .ar-group {
    height: 150px;
    padding: 0 0 0 25px;
    background-image: url(/img/t_3_arrow.svg), linear-gradient(to right, #fff calc(100% - 70px), transparent calc(100% - 70px));
    background-repeat: no-repeat;
    background-position: right 20px center;
    justify-content: flex-start;
  }

  .cricle-txt {
    font-size: 16px;
    width: 90px;
    height: 90px;
    line-height: 90px;
    margin: 0 25px 0 0;
  }

  .ar-tit-group {
    width: 50%;
  }

  .template-3 {
    padding: 80px 0 40px;
  }

  .t-3-box {
    padding: 0 50px;
  }
  .t-3-box h2 {
    margin: 0 0 40px;
  }
  .t-3-box ul {
    height: auto;
    flex-wrap: wrap;
  }
  .t-3-box li {
    font-size: 14px;
    width: 100%;
    height: auto;
    padding: 0 0 40px;
    margin: 0 0 40px;
    border-bottom: 1px solid #fff;
    border-right: none;
  }

  .template-4 {
    padding: 80px 0 440px;
  }

  .t-4-txt {
    width: 100%;
  }
  .t-4-txt p {
    font-size: 14px;
  }

  .template-5 {
    padding: 80px 0;
  }

  .t-5-box {
    margin: 0 25px;
  }
  .t-5-box h2 {
    text-align: center;
    margin: 0 0 40px;
  }
  .t-5-box h3 {
    padding: 14px 15px 14px 22px;
  }
  .t-5-box ul {
    width: 100%;
  }
  .t-5-box img {
    max-width: 24px;
    max-height: 24px;
    margin: 0 20px 0 0;
  }

  .t-5-txt-group {
    padding: 15px 20px;
  }
  .t-5-txt-group h4 {
    font-size: 14px;
  }
  .t-5-txt-group p {
    font-size: 14px;
    line-height: 1.57;
    margin: 0 0 15px;
  }

  .template-6 {
    padding: 80px 0;
    overflow: hidden;
  }
  .template-6 span {
    font-size: 22px;
    text-align: center;
    padding: 0 25px;
    margin: 0 0 40px;
  }
  .template-6 h2 {
    font-size: 24px;
    text-align: center;
    padding: 0 25px;
    margin: 0 0 60px;
  }

  .t-6-arrow-box {
    width: auto;
    min-height: 150px;
    background: none;
    margin: 0;
    padding: 0;
  }

  .t-6-ar-group {
    height: auto;
    padding: 0 0 0 25px;
    background: url(/img/t_3_arrow_oshadhi.svg) no-repeat right 22px center;
    background-repeat: no-repeat;
    background-position: right 20px center;
    justify-content: flex-start;
  }

  .t-6-cricle-txt {
    font-size: 16px;
    width: 90px;
    height: 90px;
    line-height: 90px;
    margin: 0 25px 0 0;
  }

  .t-6-ar-tit-group {
    width: 50%;
  }

  .fn-7-box {
    padding: 80px 25px 1px 25px;
  }

  .fn-7-txt-group {
    padding: 0;
  }

  .fn-7-txt-g {
    width: 100%;
  }

  .fn-7-txt-cont {
    width: calc(100% - 50px);
  }

  .f-7-cont-img {
    width: 105%;
    margin: -20px 0 50px -2.5%;
    position: static;
  }

  .f-7-cont {
    padding: 0;
    margin: 0 0 80px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    flex-direction: column-reverse;
  }
  .f-7-cont h3 {
    font-size: 16px;
  }
  .f-7-cont p {
    font-size: 13px;
    letter-spacing: 1px;
    width: 100%;
    margin: 0 0 40px;
  }

  .fn-7-num {
    font-size: 13px;
    width: 24px;
    height: 24px;
    line-height: 24px;
  }

  .fn-7-txt-group {
    width: 100%;
    padding: 0 40px;
  }

  .product-cont-more {
    padding: 80px 0;
  }

  .product-cont-more-box {
    padding: 0 25px;
  }
  .product-cont-more-box h2 {
    margin: 0 0 40px;
  }
  .product-cont-more-box h3 {
    width: 100%;
    margin: 0 0 30px;
  }
  .product-cont-more-box li {
    padding: 0 0 20px;
    margin: 0 0 20px;
  }

  .p-news-date {
    margin: 0 0 15px;
  }

  .product-similar {
    padding: 80px 0;
  }
  .product-similar h2 {
    margin: 0 0 40px;
  }

  .product-similar-box {
    padding: 0 0 0 25px;
  }

  .fixed-infor {
    width: 55px;
    right: 10px;
    bottom: 8%;
  }
  .fixed-infor.act {
    height: 310px;
    padding: 0 0 20px;
  }
  .fixed-infor.act a.f-calculator {
    top: -241px;
  }
  .fixed-infor.act a.f-qa {
    top: -181px;
  }
  .fixed-infor.act a.f-discuss {
    top: -121px;
  }
  .fixed-infor.act a.f-line {
    top: -61px;
  }
  .fixed-infor.act .go-top:hover {
    transform: scale(1.2);
  }
  .fixed-infor a {
    width: 50px;
    height: 50px;
    margin: 2px;
  }
  .fixed-infor a:hover p {
    transform: translate(-95px, 6px);
  }
  .fixed-infor a p {
    font-size: 12px;
    width: 78px;
    transform: translate(-85px, 13px);
  }
  .fixed-infor a.f-calculator {
    background: #fff url(/img/icon_calculator.svg) no-repeat center center/14px;
  }
  .fixed-infor a.f-line {
    background: #fff url(/img/icon_line_add.svg) no-repeat center center/21px;
  }
  .fixed-infor a.f-qa {
    background: #fff url(/img/icon_qa_link.svg) no-repeat center center/21px;
    top: 0;
  }
  .fixed-infor a.f-discuss {
    background: #fff url(/img/icon_discuss.svg) no-repeat center center/20px;
  }

  .f-information-box {
    width: 55px;
    height: 57px;
  }

  .f-information {
    width: 55px;
    height: 57px;
    background: url(/img/icon_information.svg) no-repeat center center/100%;
  }

  .go-top {
    width: 35px;
    height: 35px;
    bottom: 20px;
    background: #fff url(/img/icon_top.svg) no-repeat center center/12px;
  }

  .add-on-box .prod-img-cover .btn-fav {
    display: none;
  }

  .oshadhi-sty .t3-px {
    width: 30px;
    margin: 0 13px;
  }
  .oshadhi-sty .fn-box-3-slider {
    margin: 0;
  }
  .oshadhi-sty .prod-slide-img {
    width: 100%;
  }
  .oshadhi-sty .slider-e-cont {
    width: auto;
    margin: 0 25px;
    padding: 50px 40px;
    position: static;
    transform: translate(0, -30px);
  }
  .oshadhi-sty .slider-e-cont h2 {
    margin: 0 0 25px;
  }
  .oshadhi-sty .fn-box-3-slider .product-slider-pagin {
    text-align: left;
    padding: 0 25px;
    margin: -21px auto 0;
  }
  .oshadhi-sty .fn-box-3-slider .product-slider-pagin .swiper-pagination-bullet {
    margin: 0 10px 0 0;
  }

  .canjune-sty .fn-box-2-cont {
    height: auto;
  }
  .canjune-sty .fn-2-left {
    max-height: 500px;
    height: 100%;
  }
  .canjune-sty .t3-px {
    width: 30px;
    margin: 0 13px;
  }
  .canjune-sty .fn-box-3-slider {
    margin: 0;
  }
  .canjune-sty .prod-slide-img {
    width: 100%;
  }
  .canjune-sty .slider-e-cont {
    width: auto;
    margin: 0 25px;
    padding: 50px 40px;
    position: static;
    transform: translate(0, -30px);
  }
  .canjune-sty .slider-e-cont h2 {
    margin: 0 0 25px;
  }
  .canjune-sty .fn-box-3-slider .product-slider-pagin {
    text-align: left;
    padding: 0 25px;
    margin: -21px auto 0;
  }
  .canjune-sty .fn-box-3-slider .product-slider-pagin .swiper-pagination-bullet {
    margin: 0 10px 0 0;
  }

  .other-sty .t3-px {
    width: 30px;
    margin: 0 13px;
  }
  .other-sty .fn-box-3-slider {
    margin: 0;
  }
  .other-sty .prod-slide-img {
    width: 100%;
  }
  .other-sty .slider-e-cont {
    width: auto;
    margin: 0 25px;
    padding: 50px 40px;
    position: static;
    transform: translate(0, -30px);
  }
  .other-sty .slider-e-cont h2 {
    margin: 0 0 25px;
  }
  .other-sty .fn-box-3-slider .product-slider-pagin {
    text-align: left;
    padding: 0 25px;
    margin: -21px auto 0;
  }
  .other-sty .fn-box-3-slider .product-slider-pagin .swiper-pagination-bullet {
    margin: 0 10px 0 0;
  }

  .product-oshadhi .page-nav.white-sty {
    background: transparent;
  }
  .product-oshadhi .type-slide::after {
    background-image: linear-gradient(to right, rgba(68, 100, 154, 0), #44649a);
  }
  .product-oshadhi .fix-box {
    background: #44649A;
  }

  .part-icon-group {
    padding: 50px 25px 0px;
  }

  .part-icon-box li {
    width: 50%;
    margin: 0 0 40px;
  }
  .part-icon-box p {
    font-size: 16px;
  }

  .part-icon {
    width: 120px;
    height: 120px;
  }

  .part-of-plant-box {
    padding: 20px 25px;
  }
  .part-of-plant-box h2 {
    font-size: 50px;
  }
  .part-of-plant-box h3 {
    font-size: 18px;
    margin: 0 0 20px;
  }
  .part-of-plant-box::after {
    top: auto;
    bottom: 0;
  }

  .categories-list {
    flex-wrap: wrap;
  }

  .categories-group h2 {
    font-size: 50px;
  }
  .categories-group h3 {
    font-size: 18px;
  }

  .cate-txt-area {
    width: 100%;
    height: 300px;
    padding: 40px 25px;
  }
  .cate-txt-area h4 {
    font-size: 28px;
    margin: 0 0 25px;
  }
  .cate-txt-area p {
    font-size: 14px;
    line-height: 2;
  }

  .cate-product-area {
    width: 100%;
  }

  .cate-product-slider {
    width: 180px;
    padding: 20px 0 0;
    margin: 0 auto;
  }

  .cate-product-slider-offset {
    width: 100%;
    padding: 0;
    transform: translate(0, -62px);
  }

  .cate-pagin-group {
    width: calc(100% - 50px);
    justify-content: space-between;
    bottom: -110px;
  }
  .cate-pagin-group .cate-prev {
    width: 30px;
    height: 30px;
  }
  .cate-pagin-group .cate-prev img {
    width: 14px;
  }
  .cate-pagin-group .cate-next {
    width: 30px;
    height: 30px;
  }
  .cate-pagin-group .cate-next img {
    width: 14px;
  }
  .cate-pagin-group .cate-pagin {
    font-size: 13px;
    color: #464646;
    position: absolute;
    bottom: -90px;
    left: 0px;
    margin: 0;
  }

  .cate-cricle {
    width: 30px;
    height: 30px;
    background: url(/img/btn_cricle.svg) no-repeat center center/cover;
  }

  .perfume-sty-box {
    padding: 100px 25px;
  }
  .perfume-sty-box h2 {
    font-size: 50px;
  }
  .perfume-sty-box h3 {
    font-size: 18px;
    margin: 0 0 40px;
  }
  .perfume-sty-box .perfume-img:nth-of-type(1) {
    width: 100%;
  }
  .perfume-sty-box .perfume-img:nth-of-type(2) {
    width: 100%;
  }
  .perfume-sty-box .perfume-img:nth-of-type(3) {
    width: 100%;
  }

  .perfume-img {
    width: 100%;
    height: 200px;
    margin: 0 0 10px;
  }

  .canjune-ind-box {
    padding: 0 25px 100px;
  }

  .c-main-info {
    width: 100%;
    padding: 55px 40px 30px 40px;
  }
  .c-main-info h2 {
    font-size: 26px;
  }
  .c-main-info p {
    font-size: 14px;
    line-height: 1.9;
    margin: 0 0 40px;
  }

  .c-main-img {
    width: 100%;
    height: 235px;
  }

  .c-main-prod-list {
    min-height: 480px;
    flex-wrap: wrap;
    flex-direction: column-reverse;
  }

  .not-found {
    padding: 80px 25px 0;
    height: 500px;
  }
  .not-found h2 {
    font-size: 40px;
    letter-spacing: 0.4px;
    margin: 80px 0 30px;
  }
  .not-found p {
    font-size: 14px;
    letter-spacing: 1.7px;
  }

  .empty-bag {
    padding: 80px 25px 0;
    height: 500px;
  }

  .empty-cont {
    width: auto;
  }
  .empty-cont h2 {
    font-size: 40px;
    letter-spacing: 0.4px;
    margin: 80px 0 30px;
  }
  .empty-cont p {
    font-size: 14px;
    letter-spacing: 1.7px;
  }

  .go-shopping {
    font-size: 14px;
  }

  .connect-group {
    padding: 80px 0 0;
  }

  .connect-cont-box {
    padding: 70px 25px 0;
  }
  .connect-cont-box h2 p {
    margin: 10px 0 0;
  }
  .connect-cont-box .input-item-box {
    margin: 0 0 15px;
  }

  .textarea-item {
    height: 120px;
    padding: 20px 0 0;
  }
  .textarea-item textarea {
    font-size: 13px;
  }

  .val-box {
    width: 100%;
    flex-wrap: wrap;
  }
  .val-box .input-item-box {
    width: 100%;
  }
  .val-box .input-item-box input {
    font-size: 13px;
  }

  .btn-refresh {
    font-size: 14px;
    letter-spacing: 1.4px;
  }

  .connect-submit {
    width: 100%;
  }
}
@media screen and (max-width: 375px) {
  .prod-size span {
    padding: 0 7px 0 0;
    margin: 0 7px 0 0;
  }

  .product-canjune .anius-series-type a {
    padding: 0 15px 10px;
  }
}
@media screen and (max-width: 320px) {
  .ar-group {
    height: 130px;
  }

  .cricle-txt {
    width: 70px;
    height: 70px;
    line-height: 70px;
    margin: 0 20px 0 0;
  }

  .product-canjune .anius-series-type a {
    padding: 0 7px 10px;
  }
}
@media screen and (max-height: 1000px) and (min-width: 1025px) {
  .history-wrap h2 {
    font-size: 65px;
    top: 224px;
  }
  .history-wrap span {
    font-size: 20px;
    margin: 5px 0 0;
  }

  .btn-back {
    top: 224px;
  }

  .year {
    font-size: 65px;
  }
}
@media screen and (max-height: 920px) and (min-width: 1025px) {
  .history-img-group {
    width: 790px;
    height: 470px;
  }

  .history-wrap {
    padding: 100px 0 0;
  }
  .history-wrap h2 {
    font-size: 45px;
    top: 208px;
  }
  .history-wrap span {
    font-size: 16px;
  }

  .btn-back {
    top: 208px;
  }

  .year {
    font-size: 45px;
    margin: 0 0 55px;
  }

  .history-cont h3 {
    font-size: 20px;
    margin: 0 0 20px;
  }
  .history-cont ol {
    font-size: 12px;
  }
}
@media screen and (max-height: 860px) and (min-width: 1025px) {
  .history-img {
    height: 60%;
    width: 40%;
    bottom: 50px;
  }

  .history-img-group {
    height: 100%;
    width: 100%;
  }

  .history-txt-group {
    bottom: 50px;
  }
}
@media screen and (max-height: 775px) {
  .nav-main-sub-box {
    padding: 198px 60px 0;
  }

  .nav-sub-box {
    padding: 198px 0 0;
  }
}
@media screen and (max-height: 650px) {
  .nav-main-sub-box {
    padding: 140px 80px 0 60px;
  }
  .nav-main-sub-box p:nth-of-type(3) {
    margin: 0 0 30px;
  }
  .nav-main-sub-box a {
    line-height: 2;
  }

  .nav-sub-box {
    padding: 140px 0 0;
  }
  .nav-sub-box a {
    line-height: 2;
  }
}
@media screen and (max-width: 768px) and (orientation: landscape) {
  .m-nav-bot-group {
    position: relative;
    bottom: initial;
    right: initial;
    left: initial;
    padding: 30px 25px;
  }

  .m-nav-sub-gruop.on {
    overflow-y: scroll;
    position: relative;
    height: 100svh;
    align-items: flex-start;
    align-content: flex-start;
    top: initial;
  }
}