@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap");
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}

ol, ul {
  list-style: none;
}

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

audio, canvas, video {
  display: inline-block;
}

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

[hidden] {
  display: none;
}

a {
  text-decoration: none;
  color: initial;
}
a:focus {
  text-decoration: none;
  outline: 0;
  color: initial;
}
a:active, a:hover {
  outline: 0;
  text-decoration: none;
  color: initial;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b, strong {
  font-weight: bold;
}

dfn {
  font-style: italic;
}

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

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

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

pre {
  white-space: pre-wrap;
}

q {
  quotes: "“" "”" "‘" "’";
}

small {
  font-size: 80%;
}

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

sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

img {
  max-width: 100%;
  height: auto;
}

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

figure {
  margin: 0;
}

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

legend {
  border: 0;
  padding: 0;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: 100%;
  margin: 0;
}

button, input {
  line-height: normal;
}

button, select {
  text-transform: none;
}

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

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

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

input[type=checkbox], input[type=radio] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0;
}
input[type=search] {
  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

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

textarea {
  overflow: auto;
  vertical-align: top;
}

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

.clearfix:before {
  content: "";
  display: table;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
  zoom: 1;
}

html {
  font-family: sans-serif;
  line-height: 1;
  font-size: 16px;
}

a {
  text-decoration: none;
  color: black;
}

input[type=text],
input[type=submit],
input[type=search] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
  outline: none;
}

button:active, .btn:active, .btn.active {
  border-style: outset;
  background-image: none;
  outline: 0;
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

table {
  width: 100%;
}

.no-mg {
  margin: 0 !important;
}

.mg-4 {
  margin: 4px;
}

.mg-8 {
  margin: 8px;
}

.mg-12 {
  margin: 12px;
}

.mg-16 {
  margin: 16px;
}

.mg-20 {
  margin: 20px;
}

.mg-24 {
  margin: 24px;
}

.mg-28 {
  margin: 28px;
}

.mg-32 {
  margin: 32px;
}

.mg-36 {
  margin: 36px;
}

.mg-48 {
  margin: 48px;
}

.mg-top-4 {
  margin-top: 4px;
}

.mg-top-8 {
  margin-top: 8px;
}

.mg-top-12 {
  margin-top: 12px;
}

.mg-top-16 {
  margin-top: 16px;
}

.mg-top-20 {
  margin-top: 20px;
}

.mg-top-24 {
  margin-top: 24px;
}

.mg-top-28 {
  margin-top: 28px;
}

.mg-top-32 {
  margin-top: 32px;
}

.mg-top-36 {
  margin-top: 36px;
}

.mg-top-48 {
  margin-top: 48px;
}

.mg-bottom-4 {
  margin-bottom: 4px;
}

.mg-bottom-8 {
  margin-bottom: 8px;
}

.mg-bottom-12 {
  margin-bottom: 12px;
}

.mg-bottom-16 {
  margin-bottom: 16px;
}

.mg-bottom-20 {
  margin-bottom: 20px;
}

.mg-bottom-24 {
  margin-bottom: 24px;
}

.mg-bottom-28 {
  margin-bottom: 28px;
}

.mg-bottom-32 {
  margin-bottom: 32px;
}

.mg-bottom-36 {
  margin-bottom: 36px;
}

.mg-bottom-48 {
  margin-bottom: 48px;
}

.mg-left-4 {
  margin-left: 4px;
}

.mg-left-8 {
  margin-left: 8px;
}

.mg-left-12 {
  margin-left: 12px;
}

.mg-left-16 {
  margin-left: 16px;
}

.mg-left-20 {
  margin-left: 20px;
}

.mg-left-24 {
  margin-left: 24px;
}

.mg-left-28 {
  margin-left: 28px;
}

.mg-left-32 {
  margin-left: 32px;
}

.mg-left-36 {
  margin-left: 36px;
}

.mg-left-48 {
  margin-left: 48px;
}

.mg-right-4 {
  margin-right: 4px;
}

.mg-right-8 {
  margin-right: 8px;
}

.mg-right-12 {
  margin-right: 12px;
}

.mg-right-16 {
  margin-right: 16px;
}

.mg-right-20 {
  margin-right: 20px;
}

.mg-right-24 {
  margin-right: 24px;
}

.mg-right-28 {
  margin-right: 28px;
}

.mg-right-32 {
  margin-right: 32px;
}

.mg-right-36 {
  margin-right: 36px;
}

.mg-right-48 {
  margin-right: 48px;
}

.no-pd {
  padding: 0 !important;
}

.pd-4 {
  padding: 4px;
}

.pd-8 {
  padding: 8px;
}

.pd-12 {
  padding: 12px;
}

.pd-16 {
  padding: 16px;
}

.pd-20 {
  padding: 20px;
}

.pd-24 {
  padding: 24px;
}

.pd-28 {
  padding: 28px;
}

.pd-32 {
  padding: 32px;
}

.pd-36 {
  padding: 36px;
}

.pd-left-4 {
  padding-left: 4px;
}

.pd-left-8 {
  padding-left: 8px;
}

.pd-left-12 {
  padding-left: 12px;
}

.pd-left-16 {
  padding-left: 16px;
}

.pd-left-20 {
  padding-left: 20px;
}

.pd-left-24 {
  padding-left: 24px;
}

.pd-left-28 {
  padding-left: 28px;
}

.pd-left-32 {
  padding-left: 32px;
}

.pd-left-36 {
  padding-left: 36px;
}

.pd-right-4 {
  padding-right: 4px;
}

.pd-right-8 {
  padding-right: 8px;
}

.pd-right-12 {
  padding-right: 12px;
}

.pd-right-16 {
  padding-right: 16px;
}

.pd-right-20 {
  padding-right: 20px;
}

.pd-right-24 {
  padding-right: 24px;
}

.pd-right-28 {
  padding-right: 28px;
}

.pd-right-32 {
  padding-right: 32px;
}

.pd-right-36 {
  padding-right: 36px;
}

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

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

.flex-right {
  margin-left: auto;
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}

.no-flex {
  display: inline-block !important;
}

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

.flex-nowrap {
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}

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

.pos-r {
  position: relative;
}

.pos-a {
  position: absolute;
}

.fl-l {
  float: left;
}

.fl-r {
  float: right;
}

.tal {
  text-align: left;
}

.tac {
  text-align: center;
}

.tar {
  text-align: right;
}

.fw-l {
  font-weight: lighter;
}

.fw-b {
  font-weight: bold;
}

.td-underline {
  text-decoration: underline;
}

.d-block {
  display: block;
}

.d-iblock {
  display: inline-block;
}

.cursor-p {
  cursor: pointer;
}

.color-danger {
  color: #FD2E2E !important;
}

.color-gray {
  color: #818181 !important;
}

.color-yellow {
  color: #BD6F06 !important;
}

*, html, body {
  font-family: "Noto Sans TC", Lato, "Pingfang TC", "Microsoft Jhenghei", Arial, sans-serif !important;
  font-size: 100%;
  text-rendering: optimizeLegibility;
}

@media (min-width: 767px) {
  .container-r {
    margin: 0 auto;
    max-width: 680px;
  }
}
@media (min-width: 992px) {
  .container-r {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container-r {
    max-width: 1140px;
  }
}
@media (min-width: 1600px) {
  .container-r {
    max-width: 1200px;
  }
}

.flex-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.flex-col {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
}

@media (min-width: 992px) {
  .homepageView {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    scroll-behavior: smooth;
  }
  .homepageView .flex-row {
    width: 100%;
  }
  .homepageView .col-left {
    margin-right: 1.25rem;
    width: 13.75rem;
    position: sticky;
    top: 5.25rem;
    -webkit-box-flex: 1;
        -ms-flex: 1 0 auto;
            flex: 1 0 auto;
    z-index: 9;
    -ms-flex-item-align: start;
        align-self: flex-start;
  }
  .homepageView .col-left .product-side-menu {
    margin-top: 0;
    margin-right: 0;
    width: 100%;
    max-width: 100%;
  }
  .homepageView .col-mid {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: calc(100% - 18.75rem - 1.25rem);
    scroll-behavior: smooth;
    -ms-scroll-chaining: none;
        overscroll-behavior: contain;
    border-left: 1px solid #E4E8EA;
    border-right: 0;
  }
  .homepageView .col-right {
    margin-top: 0;
    margin-left: 1.25rem;
    -webkit-box-flex: 1;
        -ms-flex: 1 0 auto;
            flex: 1 0 auto;
    width: 18.75rem;
    scroll-behavior: smooth;
    -ms-scroll-chaining: none;
        overscroll-behavior: contain;
    z-index: 9;
    -ms-flex-item-align: start;
        align-self: flex-start;
  }
}
@media (min-width: 1200px) {
  .homepageView .col-left {
    width: 15.625rem;
  }
  .homepageView .col-left .product-side-menu {
    width: 15.625rem;
  }
  .homepageView .col-mid {
    width: calc(100% - 15.625rem - 18.125rem - 1.25rem - 1.25rem);
  }
  .homepageView .col-right {
    width: 18.125rem;
  }
}
@media (min-width: 1600px) {
  .homepageView .col-left {
    width: 16.25rem;
  }
  .homepageView .col-left .product-side-menu {
    width: 16.25rem;
  }
  .homepageView .col-mid {
    width: calc(100% - 16.25rem - 18.75rem - 1.25rem - 1.25rem);
  }
  .homepageView .col-right {
    width: 18.75rem;
  }
}
.lilkoko .homepageView .col-mid {
  border: 0;
}

body {
  background-color: #E3E3E3;
}

.badge {
  position: absolute;
  right: -0.3125rem;
  top: 0;
  z-index: 9;
  background-color: #FD2E2E;
}

.lilkoko .badge {
  background-color: #DB5F8E;
}

.page-title {
  margin: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 500;
}

.box-title {
  padding: 0 1rem;
  font-size: 0.875rem;
  color: #818181;
  background-color: #F4F4F4;
  height: 2.75rem;
  line-height: 2.75rem;
}
@media (min-width: 767px) {
  .box-title {
    padding: 0 1.25rem;
    font-size: 0.9375rem;
  }
}

.box {
  padding: 1rem;
  background-color: #FFF;
}

.box-bordered {
  margin: 1.25rem 0;
  padding: 1rem;
  border: 1px solid #E3E3E3;
}

.radius {
  overflow: hidden;
  border-radius: 0.5rem;
  background-clip: padding-box;
}

.radius-box {
  overflow: hidden;
  border-radius: 0 0 0.5rem 0.5rem;
  background-clip: padding-box;
}
.radius-box .radius-box--header {
  padding: 0.5rem 1rem;
  background-color: #FFF;
  border-radius: 0.5rem 0.5rem 0 0;
  background-clip: padding-box;
  overflow: hidden;
  border-bottom: 1px solid #E3E3E3;
  font-size: 1rem;
  font-weight: bold;
}

.redNum {
  margin: 0 0.25rem;
  color: #FD2E2E;
}

.dataTitle {
  font-size: 0.875rem;
}

.dataNum {
  font-size: 1.125rem;
  font-weight: 500;
}
.dataNum.flex {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.notice-text {
  font-size: 14px;
  font-weight: 500;
  color: #333333;
}

.notice-text-gray {
  font-size: 14px;
  font-weight: 500;
  color: #818181;
}

.text-link {
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: underline;
  color: #9d9d82;
  cursor: pointer;
}
.text-link:hover {
  color: #9d9d82;
  text-decoration: underline;
}

/* width */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #bdbdbd;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}

.block-bar .btn-return {
  margin-right: 1rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/topNav/nav_back.svg");
  background-size: 1.5rem 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
  cursor: pointer;
}

.border-box {
  margin-bottom: 0.5rem;
  background-color: #FFF;
}
@media (min-width: 767px) {
  .border-box {
    margin-bottom: 0.75rem;
    border-radius: 0.5rem;
    background-clip: padding-box;
  }
}
.border-box.canceled {
  opacity: 0.75;
}
.border-box .border-box-header {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #E3E3E3;
}
.border-box .border-box-header .title {
  font-size: 1rem;
  font-weight: 500;
}
.border-box .border-box-body {
  padding: 0.5rem 1rem;
}
.border-box .border-box-body .info-list li {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 2;
}
.border-box .border-box-footer {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 50% 50%;
  grid-template-columns: 50% 50%;
  border-top: 1px solid #E3E3E3;
  font-size: 0.9375rem;
  font-weight: 500;
}
.border-box .border-box-footer.single {
  -ms-grid-columns: 100%;
  grid-template-columns: 100%;
}
.border-box .border-box-footer.single a:first-child {
  border-right: 0;
}
.border-box .border-box-footer a:first-child {
  padding: 0.75rem 0;
  border-right: 1px solid #E3E3E3;
}

.iframe-wrapper {
  overflow: hidden;
}

.loading-page {
  width: 100%;
  height: 100vh;
  background-color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.loading-page .icon-loading {
  width: 4rem;
  height: 4rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/loading.svg");
  background-size: 4rem 4rem;
}

.warning-block {
  margin-top: 0.5rem;
  padding: 0.125rem 0.5rem;
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5rem;
  color: #BD6F06;
  background-color: #fdf8e3;
  border-radius: 0.25rem;
  background-clip: padding-box;
}

.icon-arrow-right {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/arrow_right_grey.svg");
  background-size: 1rem 1rem;
  width: 1rem;
  height: 1rem;
}

html {
  min-height: -webkit-fill-available;
}

body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

#main {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: 0.2s all ease-in;
  transition: 0.2s all ease-in;
}

.homepageView, .mall-view-container {
  margin-top: 0.5rem;
}
@media (min-width: 767px) {
  .homepageView, .mall-view-container {
    margin-top: 1.25rem;
  }
}

.shoppingCart-iframe {
  margin-top: 0.5rem;
}
@media (min-width: 767px) {
  .shoppingCart-iframe {
    margin-top: 1.25rem;
  }
}

.checkoutPageView {
  margin-top: 0;
}

.textarea {
  resize: none;
}

.options-list .notice-block {
  margin: 1rem;
  padding: 0.5rem 1rem;
  position: relative;
  background-color: #fdf8eb;
  font-size: 0.875rem;
  line-height: 1.625rem;
}
.options-list .notice-block:after {
  content: "";
  position: absolute;
  top: -0.5rem;
  left: 0.5rem;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 8px 8px 8px;
  border-color: transparent transparent #fdf8eb transparent;
}

.btn-copy {
  margin-left: 0.25rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/order/copy.svg");
  background-size: 1.25rem 1.25rem;
  width: 1.5rem;
  height: 1.5rem;
  cursor: pointer;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadeInTop {
  20% {
    opacity: 0;
    -webkit-transform: translate(0, 6px);
            transform: translate(0, 6px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
@keyframes fadeInTop {
  20% {
    opacity: 0;
    -webkit-transform: translate(0, 6px);
            transform: translate(0, 6px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
@-webkit-keyframes moveTop {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, 50px);
            transform: translate(0, 50px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
@keyframes moveTop {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, 50px);
            transform: translate(0, 50px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
@-webkit-keyframes bigToSmal {
  0% {
    opacity: 0.5;
    -webkit-transform: scale(1.5, 1.5);
            transform: scale(1.5, 1.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}
@keyframes bigToSmal {
  0% {
    opacity: 0.5;
    -webkit-transform: scale(1.5, 1.5);
            transform: scale(1.5, 1.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}
@keyframes uncheck {
  0% {
    -webkit-transform: translateX(32px);
            transform: translateX(32px);
  }
  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}
@-webkit-keyframes uncheck {
  -webkit-transform: translateX(32px);
  -webkit-transform: translateX(0px);
}
@keyframes check {
  0% {
    -webkit-transform: translateX(2px);
            transform: translateX(2px);
  }
  100% {
    -webkit-transform: translateX(30px);
            transform: translateX(30px);
  }
}
@-webkit-keyframes check {
  -webkit-transform: translateX(2px);
  -webkit-transform: translateX(32px);
}
@keyframes uncheck-sm {
  0% {
    -webkit-transform: translateX(16px);
            transform: translateX(16px);
  }
  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}
@-webkit-keyframes uncheck-sm {
  -webkit-transform: translateX(16px);
  -webkit-transform: translateX(0px);
}
@keyframes check-sm {
  0% {
    -webkit-transform: translateX(2px);
            transform: translateX(2px);
  }
  100% {
    -webkit-transform: translateX(16px);
            transform: translateX(16px);
  }
}
@-webkit-keyframes check-sm {
  -webkit-transform: translateX(2px);
  -webkit-transform: translateX(16px);
}
.homepageView,
.product-list-view-container,
.product-detail-view,
.memberCetnerView,
.articleView {
  margin-top: 0.5rem !important;
  padding-bottom: 4.5rem !important;
}
@media (min-width: 767px) {
  .homepageView,
  .product-list-view-container,
  .product-detail-view,
  .memberCetnerView,
  .articleView {
    margin-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
  }
}

.checkoutPageView {
  margin-top: 4rem !important;
}
@media (min-width: 767px) {
  .checkoutPageView {
    margin-top: 0 !important;
  }
}

.checkout-view {
  margin-top: 0.5rem !important;
}
@media (min-width: 767px) {
  .checkout-view {
    margin-top: 1.25rem !important;
  }
}

.memberMainContent,
.articleView {
  margin-top: 4.5rem !important;
}
@media (min-width: 767px) {
  .memberMainContent,
  .articleView {
    margin-top: 0 !important;
  }
}

.memberMainContent.has-tabmenu,
.myCollectionView,
.notification-list-view {
  margin-top: 7.125rem !important;
}
@media (min-width: 767px) {
  .memberMainContent.has-tabmenu,
  .myCollectionView,
  .notification-list-view {
    margin-top: 0 !important;
  }
}

.qa-list-view {
  margin-top: 9.125rem !important;
}
@media (min-width: 767px) {
  .qa-list-view {
    margin-top: 0 !important;
  }
}

.myCollectionView .post-list-view {
  padding-bottom: 0 !important;
}

@media (min-width: 767px) {
  .myCollectionView {
    margin-top: 0 !important;
  }
  .myCollectionView .tabmenu {
    margin-top: 0;
  }
  .memberCetnerView .member-basicData-bk {
    margin-top: 0 !important;
  }
  .product-detail-view-container {
    margin-top: 1.25rem;
  }
  .product-detail-view-container .product-detail-view {
    margin-top: 0 !important;
  }
}
.breadcrumb-view {
  position: sticky;
  top: 4rem;
  left: 0;
  width: 100%;
  z-index: 100;
  background-color: #f5f5f5;
}
.breadcrumb-view .breadcrumb {
  margin: 0 auto;
  margin-bottom: 0;
  padding: 0.5rem 1rem;
  border-radius: 0;
  background-clip: padding-box;
  font-size: 0.875rem;
}
@media (min-width: 767px) {
  .breadcrumb-view .breadcrumb {
    padding: 0.5rem 2rem;
  }
}
@media (min-width: 992px) {
  .breadcrumb-view .breadcrumb {
    padding: 0.5rem 0.5rem;
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .breadcrumb-view .breadcrumb {
    max-width: 1140px;
  }
}
@media (min-width: 1600px) {
  .breadcrumb-view .breadcrumb {
    max-width: 1200px;
  }
}
.breadcrumb-view.has-search-bar {
  top: 7.375rem;
}
@media (min-width: 767px) {
  .breadcrumb-view.has-search-bar {
    top: 4rem;
  }
}

.lilkoko .breadcrumb-view {
  background-color: #FFC4E0;
  position: sticky;
  top: 6.875rem;
}
.lilkoko .breadcrumb-view .breadcrumb {
  background-color: #FFC4E0;
}
.lilkoko .breadcrumb-view .breadcrumb > li + li:before {
  color: #000;
}
@media (min-width: 767px) {
  .lilkoko .breadcrumb-view {
    top: 8.0625rem;
  }
}

button {
  border: none;
  background-color: transparent;
  outline: 0;
  cursor: pointer;
}
button:hover, button:focus, button:active {
  -webkit-box-shadow: none;
  -ms-box-shadow: none;
  box-shadow: none;
}

.btn.active, .btn:active, button:active {
  -webkit-box-shadow: none;
  -ms-box-shadow: none;
  box-shadow: none;
  border-style: none;
}

.btn {
  padding: 0.125rem 0.75em;
  display: inline-block;
  border-radius: 8px;
  background-clip: padding-box;
  -webkit-transition: 0.3s background-color ease-in;
  transition: 0.3s background-color ease-in;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-shadow: none;
  -ms-box-shadow: none;
  box-shadow: none;
  outline: 0;
  border: 0;
  cursor: pointer;
}
.btn:hover, .btn:focus, .btn:active {
  -webkit-box-shadow: none;
  -ms-box-shadow: none;
  box-shadow: none;
}

.btn-sm {
  padding: 0.125rem 0.375rem;
}
@media (min-width: 360px) {
  .btn-sm {
    padding: 0.125rem 0.5rem;
    font-size: 0.875rem;
  }
}

.btn-md-2 {
  padding: 0.5rem 1rem;
  font-size: 1rem;
  font-weight: normal;
  border-radius: 0.5rem;
  background-clip: padding-box;
}

.btn-md {
  padding: 0.625rem 1rem;
  font-size: 1rem;
  font-weight: normal;
  border-radius: 0.5rem;
  background-clip: padding-box;
}

.btn-md-30 {
  padding: 0 1rem;
  font-size: 1rem;
  height: 1.875rem;
  line-height: 1.875rem;
  font-weight: normal;
  border-radius: 0.5rem;
  background-clip: padding-box;
}

.btn-w-160 {
  width: 10rem;
}

.btn-circle {
  border-radius: 2000px;
  background-clip: padding-box;
}

.btn-default {
  color: #333333;
  background-color: #EAEAEA;
}
.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .btn-default:active:focus {
  color: #333333;
  background-color: #dcdcdc;
}

.btn-primary {
  color: #FFF;
  background-color: #333333;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .btn-primary:active:focus {
  background-color: #212121;
}

.btn-primary-light {
  color: #FD2E2E;
  background-color: #feecec;
}
.btn-primary-light:hover, .btn-primary-light:focus, .btn-primary-light:active, .btn-primary-light.active, .btn-primary-light:active:focus {
  color: #FD2E2E;
  background-color: #feecec;
}

.btn-bordered {
  color: #333333;
  background-color: #FFF;
  border: 1px solid #707070;
}
.btn-bordered:hover, .btn-bordered:focus, .btn-bordered:active, .btn-bordered.active, .btn-bordered:active:focus {
  color: #333333;
  border: 1px solid #333333;
  -webkit-box-shadow: none;
  -ms-box-shadow: none;
  box-shadow: none;
}
.btn-bordered.btn-disabled {
  border-color: #F4F4F4;
}

.btn-bordered-light {
  color: #333333;
  background-color: #FFF;
  border: 1px solid #E3E3E3;
}
.btn-bordered-light:hover, .btn-bordered-light:focus, .btn-bordered-light:active, .btn-bordered-light.active, .btn-bordered-light:active:focus {
  color: #333333;
  border: 1px solid #E3E3E3;
  -webkit-box-shadow: none;
  -ms-box-shadow: none;
  box-shadow: none;
}
.btn-bordered-light.btn-disabled {
  border-color: #F4F4F4;
}

.btn-checked {
  color: #FFF;
  background-color: #20B794;
}
.btn-checked:hover, .btn-checked:focus, .btn-checked:active, .btn-checked.active, .btn-checked:active:focus {
  color: #FFF;
  background-color: #1a9e7f;
}

.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
  opacity: 1;
}

.btn-disabled {
  color: #818181;
  background-color: #F4F4F4;
  cursor: no-drop;
}
.btn-disabled:hover, .btn-disabled:focus, .btn-disabled:active, .btn-disabled.active, .btn-disabled:active:focus {
  color: #818181;
  background-color: #F4F4F4;
  -webkit-box-shadow: none;
          box-shadow: none;
  outline: 0;
}

.btn-warning {
  color: #836110;
  background-color: #FDEEC0;
}
.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active, .btn-warning:active:focus {
  color: #836110 !important;
  background-color: #EBDBA8 !important;
}

.btn-warning-red {
  color: #FD2E2E;
  background-color: #f6dada;
  border: 1px solid #FD2E2E;
}
.btn-warning-red:hover, .btn-warning-red:focus, .btn-warning-red:active, .btn-warning-red.active, .btn-warning-red:active:focus {
  color: #FD2E2E !important;
  background-color: #f6dada !important;
}

.editor h1 {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}
.editor h2 {
  display: block;
  font-size: 1.5em;
  margin-top: 0.83em;
  margin-bottom: 0.83em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}
.editor h3 {
  display: block;
  font-size: 1.17em;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}
.editor h4 {
  display: block;
  font-size: 1em;
  margin-top: 1.33em;
  margin-bottom: 1.33em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}
.editor h5 {
  display: block;
  font-size: 0.83em;
  margin-top: 1.67em;
  margin-bottom: 1.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}
.editor h6 {
  display: block;
  font-size: 0.67em;
  margin-top: 2.33em;
  margin-bottom: 2.33em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}
.editor p {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
}
.editor hr {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
}
.editor strong {
  font-weight: bold;
}
.editor a {
  cursor: pointer;
  color: blue;
}
.editor a:link {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}
.editor a:visited {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}
.editor a:link:active {
  color: blue;
}
.editor a:visited:active {
  color: blue;
}
.editor b {
  font-weight: bold;
}
.editor i {
  font-style: italic;
}
.editor dd {
  display: block;
  margin-left: 40px;
}
.editor del {
  text-decoration: line-through;
}
.editor details {
  display: block;
}
.editor em {
  font-style: italic;
}
.editor img {
  display: inline-block;
}
.editor ul {
  display: block;
  list-style-type: disc;
  margin-top: 1em;
  margin-bottom: 1 em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}
.editor ol {
  display: block;
  list-style-type: decimal;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}
.editor li {
  display: list-item;
}
.editor fieldset {
  display: block;
  margin-left: 2px;
  margin-right: 2px;
  padding-top: 0.35em;
  padding-bottom: 0.625em;
  padding-left: 0.75em;
  padding-right: 0.75em;
  border: 2px groove internal value;
}
.editor figcaption {
  display: block;
}
.editor figure {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 40px;
  margin-right: 40px;
}
.editor table {
  display: table;
  border-color: gray;
}
.editor tbody {
  display: table-row-group;
  vertical-align: middle;
  border-color: inherit;
}
.editor tr {
  display: table-row;
  vertical-align: inherit;
  border-color: inherit;
}
.editor td {
  display: table-cell;
  vertical-align: inherit;
}

input, textarea, select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #797979;
  font-weight: normal;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #797979;
  font-weight: normal;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #797979;
  font-weight: normal;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #797979;
  font-weight: normal;
}

.checkbox + .checkbox, .radio + .radio {
  margin-top: 0.5rem;
}

form.form {
  width: 100%;
}
@media (min-width: 992px) {
  form.form {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}

.form-group-title {
  margin-bottom: 0.5rem;
  text-align: left;
  font-size: 0.8125rem;
  color: #9C9C9C;
}

.form-group {
  position: relative;
}
.form-group.has-label {
  margin-bottom: 1.25rem;
}
.form-group.sm-margin {
  margin-bottom: 0.625rem;
}
.form-group .control-label {
  padding: 0 0.25rem;
}
.form-group .form-control {
  max-width: 100%;
  border-radius: 0.5rem;
  background-clip: padding-box;
  border: none;
}
.form-group.form-group-inline .form-control {
  display: inline-block;
}

.control-label {
  margin-bottom: 0.5rem;
  display: block;
  font-size: 0.9375rem;
  font-weight: normal;
  color: #555B5D;
}
.control-label.required:before {
  margin-right: 0.25rem;
  content: "*";
  display: inline-block;
  color: #FD2E2E;
}

.form-control-sm {
  padding: 0 0.75rem;
  padding-right: 1.5rem;
  -webkit-box-shadow: none;
  -ms-box-shadow: none;
  box-shadow: none;
  border-radius: 0.875rem;
  background-clip: padding-box;
  border: 0.0625rem solid #E3E3E3;
  line-height: 1.75rem;
  height: 1.75rem;
}

.select-form-control-sm {
  padding: 0.25rem 0.75rem;
  padding-right: 1.75rem;
  font-size: 0.875rem;
  -webkit-box-shadow: none;
  -ms-box-shadow: none;
  box-shadow: none;
  border-radius: 0.5rem;
  background-clip: padding-box;
  border: 0.0625rem solid #E3E3E3;
  background-image: url("../images/common/arrow_down_grey.svg");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 0.75rem 0.75rem;
  outline: 0;
}
.select-form-control-sm:focus {
  border-color: #333333;
}

.form-control {
  -webkit-box-shadow: none;
  -ms-box-shadow: none;
  box-shadow: none;
  border-radius: 0.1875rem;
  background-clip: padding-box;
  height: 2.625rem;
  font-size: 0.9375rem;
  border-color: #E3E3E3;
}
.form-control:focus {
  outline: 0;
  border-color: #348CC5;
  -webkit-box-shadow: none;
  -ms-box-shadow: none;
  box-shadow: none;
}
.form-control:focus + label {
  color: #348CC5;
}
.form-control.bg-gray {
  background-color: #F4F4F4;
  border: none;
  border-radius: 0.5rem;
  background-clip: padding-box;
}

input[disabled] + label,
select[disabled] + label:after {
  color: #818181 !important;
}

input[disabled] + label:after,
select[disabled] + label:after {
  content: "";
  display: block;
  width: 100%;
  height: 0.5625rem;
  position: absolute;
  z-index: -1;
  left: 0;
  bottom: 0;
  background-color: #eee;
}

.form-control-bordered-bottom {
  width: 100%;
  border-bottom: 0.125rem solid #348CC5;
}
.form-control-bordered-bottom input[type=text] {
  border: 0;
  height: 2.25rem;
  font-size: 1rem;
}
.form-control-bordered-bottom input[type=text]:focus {
  outline: 0;
  -webkit-box-shadow: none;
  -ms-box-shadow: none;
  box-shadow: none;
}
.form-control-bordered-bottom input[type=submit] {
  border: 0;
  background-color: transparent;
  outline: 0;
  color: #348CC5;
}

.input-short {
  width: 7.5rem;
}

.has-unit {
  position: relative;
}

.unit-text {
  color: #9C9C9C;
}

.form-group.pswd {
  position: relative;
}
.form-group.pswd button.btn-toggle-pswd-vis {
  position: absolute;
  right: 0.75rem;
  top: 0.625rem;
  z-index: 2;
  background-color: transparent;
  background-image: url("../images/icon_invisible.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  width: 1.5rem;
  height: 1.5rem;
  border: 0;
}
.form-group.pswd button.btn-toggle-pswd-vis.visible {
  top: 0.5625rem;
  background-image: url("../images/icon_visible.svg");
  background-size: 1.3125rem 1.3125rem;
}

.form-group .authcode {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  width: 100%;
}
.form-group .authcode input {
  width: calc(100% - 7.5rem);
}
.form-group .authcode img {
  margin-left: auto;
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}
.form-group .authcode .btn-refresh-authcode {
  position: absolute;
  left: calc(100% - 9.5rem);
  top: 0.5625rem;
  z-index: 2;
  background-color: transparent;
  background-image: url("../images/icon_reload.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  width: 1.3125rem;
  height: 1.3125rem;
  border: 0;
}

.form-group-offset-2 {
  margin-top: 5%;
  margin-left: 10%;
}

.radio-btn-mode label.btn.btn-bordered {
  margin-bottom: 0.5rem;
  margin-right: 0.25rem;
}
.radio-btn-mode input:checked + label.btn.btn-bordered {
  color: #FFF;
  background-color: #333333;
  border-color: #333333;
}

select.form-control {
  line-height: 1;
  background-image: url("../images/common/arrow_down_grey.svg");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 0.875rem 0.875rem;
}
select.form-control:focus {
  outline: 0;
  border-color: #348CC5;
  -webkit-box-shadow: none;
  -ms-box-shadow: none;
  box-shadow: none;
}
select.form-control:focus + label {
  color: #348CC5;
}

.label-radioInput {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  cursor: pointer;
  position: relative;
  --primary: $c-green;
  --other: $c-border;
  font-weight: normal;
  /* checked state */
}
.label-radioInput input[type=radio], .label-radioInput input[type=checkbox] {
  opacity: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: -1;
}
.label-radioInput .design {
  margin-right: 0.375rem;
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  border: 0.0625rem solid #818181;
  border-radius: 100%;
}
.label-radioInput .design::before, .label-radioInput .design::after {
  content: "";
  display: block;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  position: absolute;
  top: -0.0625rem;
  left: -0.0625rem;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transform-origin: center center;
          transform-origin: center center;
}
.label-radioInput .design:before {
  opacity: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  background-image: url("../images/common/radio_checked.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.label-radioInput .design .design::after {
  opacity: 0.4;
  -webkit-transition: 0.6s;
  transition: 0.6s;
}
.label-radioInput .radio-text {
  font-weight: normal;
}
.label-radioInput input:checked + .design::before {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}
.label-radioInput input:checked + .design + .radio-text {
  color: #348CC5;
}
.label-radioInput input[disabled] + .design + .radio-text {
  color: #C5C5C5;
}
.label-radioInput input[disabled] + .design:before {
  background-color: #eee;
}
.label-radioInput.label-radioInput-right {
  padding-right: 0;
}
.label-radioInput.label-radioInput-right .design {
  margin-left: auto;
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
  margin-right: 0;
}
.label-radioInput.label-radioInput-right input:checked + .design + .radio-text {
  color: #348CC5;
}
@media (min-width: 992px) {
  .label-radioInput .design {
    width: 1.125rem;
    height: 1.125rem;
  }
}

.form-group-toggle-area.disabled *,
.form-group.disabled * {
  color: #C5C5C5;
}

.switch.switch-sm label {
  width: 1.875rem;
  height: 0.5rem;
  overflow: initial;
}
.switch.switch-sm label:before {
  top: -0.25rem;
  left: -0.125rem;
  width: 1rem;
  height: 1rem;
  -webkit-box-shadow: 0 0.0625rem 0.25rem rgba(0, 0, 0, 0.5);
  -ms-box-shadow: 0 0.0625rem 0.25rem rgba(0, 0, 0, 0.5);
  box-shadow: 0 0.0625rem 0.25rem rgba(0, 0, 0, 0.5);
  animation: uncheck-sm 0.2s ease-out;
  -webkit-animation: uncheck-sm 0.2s ease-out;
  -moz-animation: uncheck-sm 0.2s ease-out;
}
.switch.switch-sm input:checked + label:before {
  transform: translateX(1rem);
  -webkit-transform: translateX(1rem);
  -moz-transform: translateX(1rem);
  animation: check-sm 0.2s ease-out;
  -webkit-animation: check-sm 0.2s ease-out;
  -moz-animation: check-sm 0.2s ease-out;
}
.switch input {
  display: none;
}
.switch label {
  -webkit-appearance: none;
  display: block;
  height: 1.75rem;
  width: 3.875rem;
  border-radius: 3.125rem;
  background: #b7b7b7;
  position: relative;
  outline: none;
  cursor: pointer;
  overflow: hidden;
  transition: 0.2s;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
}
.switch label:before {
  content: "";
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  height: 1.5rem;
  width: 1.5rem;
  background: white;
  border-radius: 50%;
  border-radius: 1rem;
  z-index: 1;
  animation: uncheck 0.2s ease-out;
  -webkit-animation: uncheck 0.2s ease-out;
  -moz-animation: uncheck 0.2s ease-out;
  transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
}
@media (min-width: 767px) {
  .switch label:before {
    top: 0.0625rem;
  }
}
.switch label:after {
  content: "";
  position: absolute;
  top: -0.125rem;
  left: 1.75rem;
  color: #fff;
  font-size: 0.9375rem;
  font-weight: bold;
}
.switch input:checked + label {
  background: #9d9d82;
}
.switch input:checked + label:before {
  transform: translateX(2.125rem);
  -webkit-transform: translateX(2.125rem);
  -moz-transform: translateX(2.125rem);
  animation: check 0.2s ease-out;
  -webkit-animation: check 0.2s ease-out;
  -moz-animation: check 0.2s ease-out;
  transform-origin: 100% 0;
  -webkit-transform-origin: 100% 0;
  -moz-transform-origin: 100% 0;
}
.switch input:checked + label:after {
  content: "";
  position: absolute;
  top: -0.125rem;
  left: 0.3125rem;
  color: #fff;
  font-size: 0.9375rem;
}
.switch input[disabled] + label {
  background: #eee;
}

.checkbox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
}
.checkbox input {
  display: none;
}
.checkbox label {
  padding-left: 0;
}
.checkbox input:checked + .design {
  background-image: url("../images/common/checked.svg");
  background-repeat: no-repeat;
  background-position: 50% 40%;
  background-color: #9d9d82;
  background-size: 1rem 1rem;
  border: 0.0625rem solid #E3E3E3;
}
.checkbox span {
  font-size: 0.9375rem;
  font-weight: normal;
}

.design {
  margin-right: 0.5rem;
  width: 1.25rem;
  height: 1.25rem;
  border: 0.0625rem solid #E3E3E3;
  border-radius: 0.1875rem;
  background-clip: padding-box;
  cursor: pointer;
}
@media (min-width: 992px) {
  .design {
    width: 1.25rem;
    height: 1.25rem;
  }
}

.form-group.repuired .control-label:after {
  content: "*";
  color: #FD2E2E;
}

label.has-error {
  color: #FD2E2E;
}

input.has-error, select.has-error, textarea.has-error {
  border: 0.0625rem solid #FD2E2E !important;
}

.error-text {
  padding-top: 0.3125rem;
  display: inline-block;
  color: #FD2E2E;
  font-size: 0.8125rem;
}

.form-group.has-label + .error-text {
  margin-top: -1.125rem;
  display: block;
}

.form-group.horizental-input {
  margin-bottom: 0;
  padding: 0.5rem 1rem;
  background-color: #FFF;
  border-bottom: 0.0625rem solid #E3E3E3;
}
.form-group.horizental-input .error-text {
  padding-left: 5rem;
}
.form-group.horizental-input label {
  width: 5.625rem;
  font-size: 1rem;
  font-weight: 500;
  color: #333333;
}
.form-group.horizental-input .switch label {
  width: 3.875rem;
}
.form-group.horizental-input input, .form-group.horizental-input select {
  padding: 0.5rem 1rem;
  padding-right: 1rem;
  width: calc(100% - 2.25rem - 1rem);
  font-size: 1rem;
  font-weight: 500;
  border: none;
  background-color: #F4F4F4;
  text-align: left;
  color: #333333;
  outline: 0;
  border-radius: 125rem;
  background-clip: padding-box;
}
.form-group.horizental-input input:focus, .form-group.horizental-input input:hover, .form-group.horizental-input select:focus, .form-group.horizental-input select:hover {
  background-color: #F4F4F4;
}
.form-group.horizental-input input.has-unit, .form-group.horizental-input select.has-unit {
  margin-left: -0.3125rem;
  width: calc(100% - 2.25rem - 1rem - 3.5rem);
}
.form-group.horizental-input select {
  padding-right: 2.25rem;
  background-image: url("../images/common/arrow_down_grey.svg");
  background-size: 1rem 1rem;
  background-position: 95% 50%;
  background-repeat: no-repeat;
}
@media (min-width: 767px) {
  .form-group.horizental-input {
    padding: 1rem;
  }
  .form-group.horizental-input input, .form-group.horizental-input select {
    padding: 0.5rem 1rem;
    text-align: left;
    background-color: #F4F4F4;
    background-position: 98% 50%;
  }
  .form-group.horizental-input .error-text {
    padding-left: 5.4375rem;
  }
}

.switch {
  margin: 0.25rem 0;
}

.form-group.has-error .input-group {
  border: 0.0625rem solid #9d9d82;
}

.input-group {
  margin-bottom: 0.75rem;
  padding-left: 0.75rem;
  display: block;
  background-color: #F4F4F4;
  border-radius: 125rem;
  background-clip: padding-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.input-group i[class*=icon] {
  display: none;
}
.input-group.authcode input {
  width: calc(100% - 1rem - 0.5rem - 4.75rem - 1rem - 1rem);
}
.input-group input, .input-group textarea, .input-group select {
  padding: 0.75rem 1rem;
  padding-left: 0.5rem;
  width: 100%;
  border: none;
  outline: 0;
  background-color: #F4F4F4;
  border-radius: 125rem;
  background-clip: padding-box;
  font-size: 0.9375rem;
}
.input-group input:focus, .input-group textarea:focus, .input-group select:focus {
  background-color: #F4F4F4;
}
.input-group select {
  background-position: 93% 50%;
  background-size: 1rem 1rem;
  background-repeat: no-repeat;
  background-image: url("../images/common/arrow_down_grey.svg");
}
@media (min-width: 767px) {
  .input-group select {
    background-position: 95% 50%;
  }
}
.input-group .icon-user {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/login/user.svg");
  background-size: 1rem 1rem;
  width: 1rem;
  height: 1rem;
}
.input-group .icon-pswd {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/login/pswd.svg");
  background-size: 1rem 1rem;
  width: 1rem;
  height: 1rem;
}
.input-group .icon-name {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/login/name.svg");
  background-size: 1rem 1rem;
  width: 1rem;
  height: 1rem;
}
.input-group .icon-phone {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/login/phone.svg");
  background-size: 1rem 1rem;
  width: 1rem;
  height: 1rem;
}
.input-group .icon-mail {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/login/mail.svg");
  background-size: 1rem 1rem;
  width: 1rem;
  height: 1rem;
}
.input-group .icon-authcode {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/login/authcode.svg");
  background-size: 1rem 1rem;
  width: 1rem;
  height: 1rem;
}
.input-group .icon-invitation-code {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/login/invite_code.svg");
  background-size: 1rem 1rem;
  width: 1rem;
  height: 1rem;
}
.input-group .icon-tall {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/login/tall.svg");
  background-size: 1rem 1rem;
  width: 1rem;
  height: 1rem;
}
.input-group .icon-weight {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/login/weight.svg");
  background-size: 1rem 1rem;
  width: 1rem;
  height: 1rem;
}
.input-group .icon-waist {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/login/waist.svg");
  background-size: 1rem 1rem;
  width: 1rem;
  height: 1rem;
}
.input-group .icon-hips {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/login/hips.svg");
  background-size: 1rem 1rem;
  width: 1rem;
  height: 1rem;
}
.input-group .btn-refresh {
  margin-right: 1rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/login/refresh.svg");
  background-size: 1rem 1rem;
  width: 1rem;
  height: 1rem;
  cursor: pointer;
}

.input-group.has-unit span.unit {
  position: absolute;
  right: 1rem;
  font-size: 0.8125rem;
  font-weight: normal;
  color: #818181;
}

.payment-settings-view {
  padding: 1rem 1.5rem;
}
@media (min-width: 992px) {
  .payment-settings-view {
    padding: 0;
  }
}

.credit-card-view {
  margin: 1rem 0;
  width: 100%;
  max-width: 360px;
  padding: 1.25rem;
  color: white;
  background-color: #4a48ca;
  border-radius: 8px;
  background-clip: padding-box;
  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  -ms-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.credit-card-view .card-item-header .bank-name {
  font-size: 18px;
  font-weight: bold;
}
.credit-card-view .card-item-header .card-type {
  font-size: 24px;
}
.credit-card-view .card-item-body {
  margin: 2.25rem 0;
  text-align: center;
}
.credit-card-view .card-item-body .card-id {
  font-size: 28px;
}
.credit-card-view .card-item-footer .expired-date {
  text-align: right;
  font-family: "roboto";
}

.searchbar {
  padding: 0.75rem 1rem;
  background-color: #FFF;
}
.searchbar.sticky {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 999;
}
.searchbar .container-r {
  margin: 0 auto;
}
.searchbar .btn-return {
  margin-right: 0.75rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/topNav/nav_back.svg");
  background-size: 1.5rem 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
  cursor: pointer;
}
.searchbar .searchArea {
  padding: 0 0.5rem;
  width: calc(100% - 1.5rem - 0.75rem);
  height: 2.625rem;
  background-color: #F4F4F4;
  border-radius: 2000px;
  background-clip: padding-box;
}
.searchbar .searchArea input {
  border: none;
  background-color: transparent;
  outline: 0;
  font-size: 0.875rem;
}
.searchbar .searchArea input.btn-search {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/topNav/nav_search.svg");
  background-size: 16px 16px;
  width: 2.625rem;
  height: 2.625rem;
}
.searchbar .searchArea input.search-input {
  width: calc(100% - 2.625rem);
  height: 100%;
}

.search-view {
  position: fixed;
  top: env(safe-area-inset-top);
  left: -100vw;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  background-color: #E3E3E3;
  visibility: hidden;
  overflow-x: hidden;
  -webkit-transition: 0.2s all ease-in;
  transition: 0.2s all ease-in;
}
.search-view.opened {
  visibility: visible;
  opacity: 1;
  left: 0;
}

.mmenu_opened {
  position: relative;
  overflow: visible;
  position: fixed;
  width: 100%;
  min-height: 100%;
}

.search-result-view--empty h4 {
  margin: 1rem 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: #333333;
}
.search-result-view--empty .tag-list {
  margin: 0 -0.25rem;
}
.search-result-view--empty .tag-list .tag {
  display: inline-block;
}
.search-result-view--empty .tag-list .tag a {
  margin: 0.25rem;
  padding: 0.25rem 0.5rem;
  display: inline-block;
  font-size: 0.9375rem;
  font-weight: normal;
  color: #FFF;
  background-color: #333333;
  border-radius: 0.5rem;
  background-clip: padding-box;
}

.search-result-view, .search-result-view--empty {
  max-width: 680px;
}
.search-result-view .post-list-view, .search-result-view--empty .post-list-view {
  margin-top: 0.5rem;
  margin: 0.5rem auto;
  max-width: 680px;
}
.search-result-view .product-list-view, .search-result-view--empty .product-list-view {
  padding-top: 0;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 50% 50%;
  grid-template-columns: 50% 50%;
}
@media (min-width: 767px) {
  .search-result-view, .search-result-view--empty {
    padding-top: 5.25rem;
  }
  .search-result-view .search-result-list .tabmenu, .search-result-view--empty .search-result-list .tabmenu {
    margin-bottom: 0.5rem;
    border-radius: 0.5rem;
    background-clip: padding-box;
    overflow: hidden;
  }
}
@media (min-width: 767px) and (min-width: 767px) {
  .search-result-view .search-result-list .tabmenu.sticky, .search-result-view--empty .search-result-list .tabmenu.sticky {
    position: static;
  }
}
@media (min-width: 767px) {
  .search-result-view .product-list-view, .search-result-view--empty .product-list-view {
    width: 100%;
    -ms-grid-columns: 25% 25% 25% 25%;
    grid-template-columns: 25% 25% 25% 25%;
  }
}
@media (min-width: 992px) {
  .search-result-view .product-list-view, .search-result-view--empty .product-list-view {
    width: 100%;
    -ms-grid-columns: 25% 25% 25% 25%;
    grid-template-columns: 25% 25% 25% 25%;
  }
}

.search-dropdown {
  padding: 1rem;
  width: 15.625rem;
  border: none;
  border-radius: 0.5rem;
  background-clip: padding-box;
  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  -ms-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}
.search-dropdown h4 {
  margin-bottom: 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #333333;
}
.search-dropdown .tag-list {
  margin: 0 -0.25rem;
}
.search-dropdown .tag-list .tag {
  display: inline-block;
}
.search-dropdown .tag-list .tag a {
  margin: 0.25rem;
  padding: 0.25rem 0.5rem;
  display: inline-block;
  font-size: 0.9375rem;
  font-weight: normal;
  color: #FFF;
  background-color: #333333;
  border-radius: 0.5rem;
  background-clip: padding-box;
}

.search-result-view .tab-content {
  margin-top: 0.5rem;
}

.product-categories-slider {
  margin-bottom: 0.5rem;
  padding-left: 0.5rem;
  background-color: #FFF;
}
.product-categories-slider .slick-list {
  padding-right: 15%;
}
.product-categories-slider .product-category {
  padding: 0.75rem 0.375rem;
}
.product-categories-slider .product-category .product-category--image {
  padding-top: 100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  border-radius: 0.5rem;
  background-clip: padding-box;
  overflow: hidden;
}
.product-categories-slider .product-category .product-category--name {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  font-weight: normal;
  color: #333333;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 767px) {
  .product-categories-slider {
    margin: 0 -0.25rem;
    margin-bottom: 1rem;
    padding-left: 0;
    background-color: transparent;
  }
  .product-categories-slider .slick-list {
    padding-right: 0;
  }
  .product-categories-slider .slick-prev {
    left: -12px;
  }
  .product-categories-slider .slick-next {
    right: -12px;
  }
  .product-categories-slider .slick-next, .product-categories-slider .slick-prev {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 2000px;
    background-clip: padding-box;
    -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
    -ms-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
    background-color: #fff;
    z-index: 99;
  }
  .product-categories-slider .slick-next:hover, .product-categories-slider .slick-next:focus, .product-categories-slider .slick-prev:hover, .product-categories-slider .slick-prev:focus {
    background-color: #fff;
  }
  .product-categories-slider .slick-prev:before {
    content: "";
    display: inline-block;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    background-position: 50% 50%;
    background-image: url("../images/common/slider_prev.svg");
    background-size: 0.75rem 0.75rem;
    width: 0.75rem;
    height: 0.75rem;
  }
  .product-categories-slider .slick-next:before {
    content: "";
    display: inline-block;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    background-position: 50% 50%;
    background-image: url("../images/common/slider_next.svg");
    background-size: 0.75rem 0.75rem;
    width: 0.75rem;
    height: 0.75rem;
  }
  .product-categories-slider .product-category {
    padding: 0 0.375rem;
  }
  .product-categories-slider .product-category .product-category--image {
    border-radius: 0.5rem 0.5rem 0 0;
    background-clip: padding-box;
  }
  .product-categories-slider .product-category .product-category--name {
    margin-top: 0;
    padding: 1rem 0.5rem;
    background-color: #FFF;
    border-radius: 0 0 0.5rem 0.5rem;
    background-clip: padding-box;
  }
}

.productMenu {
  position: fixed;
  top: env(safe-area-inset-top);
  left: -100vw;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  background-color: #E3E3E3;
  visibility: hidden;
  overflow-x: hidden;
  -webkit-transition: 0.2s all ease-in;
  transition: 0.2s all ease-in;
}
.productMenu.opened {
  visibility: visible;
  opacity: 1;
  left: 0;
}
.productMenu .productMenu-header {
  margin-bottom: 0.5rem;
  padding: 0rem 0.5rem;
  position: relative;
  text-align: center;
  height: 4rem;
  line-height: 4rem;
  background-color: #FFF;
}
.productMenu .productMenu-header .btn-close {
  margin-top: 0.5rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/topNav/nav_close.svg");
  background-size: 24px 24px;
  width: 3rem;
  height: 3rem;
  float: left;
  outline: 0;
}
.productMenu .productMenu-header .btn-close:focus {
  outline: 0;
  border: none;
}
.productMenu .productMenu-header .btn-search {
  margin-top: 0.5rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/topNav/nav_search_b.svg");
  background-size: 24px 24px;
  width: 3rem;
  height: 3rem;
  float: right;
}
.productMenu .productMenu-header .header-title {
  display: inline-block;
  font-size: 1rem;
  font-weight: bold;
  color: #333333;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.productMenu .productMenu-body {
  background-color: #FFF;
}
.productMenu .productMenu-body a {
  padding: 0.75rem 1.25rem;
  display: block;
  color: #333333;
  font-size: 1rem;
  border-bottom: 1px solid #E3E3E3;
  font-weight: bold;
}
.productMenu .productMenu-body > ul > li.has-subnav {
  background-image: url("../images/topNav/category_open.svg");
  background-position: 95% 1rem;
  background-size: 16px 16px;
  background-repeat: no-repeat;
}
.productMenu .productMenu-body > ul > li.opened {
  background-image: url("../images/topNav/category_close.svg");
}
.productMenu .productMenu-body > ul > li > ul > li > a {
  padding: 0.75rem 2rem;
  background-color: #F4F4F4;
}
.productMenu .productMenu-body > ul > li > ul.show-subnav {
  display: block;
}

.mmenu_opened {
  position: relative;
  overflow: visible;
  position: fixed;
  width: 100%;
  min-height: 100%;
}

@media (min-width: 767px) {
  .productMenu.opened {
    left: 0;
    width: 360px;
  }
  .productMenu.opened + .productMenu-overlayer {
    position: fixed;
    top: env(safe-area-inset-top);
    left: 0;
    z-index: 2;
    width: 100vw;
    height: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.75);
    opacity: 0;
    visibility: none;
    -webkit-transition: 0.2s all ease-in-out;
    transition: 0.2s all ease-in-out;
  }
  .productMenu.opened + .productMenu-overlayer {
    opacity: 1;
    visibility: visible;
  }
}
.product-side-menu {
  margin-right: 1.25rem;
  min-width: 200px;
  width: 200px;
  background-color: #FFF;
  border-radius: 8px;
  background-clip: padding-box;
}
.product-side-menu ul a {
  padding: 0.75rem 1.25rem;
  padding-right: 2rem;
  display: block;
  color: #333333;
  font-size: 0.875rem;
  font-weight: 500;
  border-bottom: 1px solid #E3E3E3;
  font-weight: bold;
}
.product-side-menu > ul > li.has-subnav {
  background-image: url("../images/topNav/category_open.svg");
  background-position: 95% 1rem;
  background-size: 16px 16px;
  background-repeat: no-repeat;
}
.product-side-menu > ul > li.opened {
  background-image: url("../images/topNav/category_close.svg");
}
.product-side-menu > ul > li > ul > li > a {
  padding: 0.75rem 2rem;
  font-size: 0.875rem;
  font-weight: normal;
  background-color: #F4F4F4;
}
.product-side-menu > ul > li > ul.show-subnav {
  display: block;
}
@media (min-width: 992px) {
  .product-side-menu {
    width: 13.75rem;
  }
}
@media (min-width: 1200px) {
  .product-side-menu {
    width: 15.625rem;
  }
}

.mmenu_opened {
  position: relative;
  overflow: visible;
  position: fixed;
  width: 100%;
  min-height: 100%;
}

.lilkoko .product-side-menu {
  position: relative;
  background-color: transparent;
}
.lilkoko .product-side-menu > ul > li {
  margin-bottom: 1rem;
}
.lilkoko .product-side-menu > ul > li.has-subnav > a {
  position: relative;
}
.lilkoko .product-side-menu > ul > li.has-subnav > a:after {
  content: "";
  position: absolute;
  right: 12px;
  top: 10px;
  width: 24px;
  height: 24px;
  background-image: url("../images/common/arrow_down__lilkoko.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}
.lilkoko .product-side-menu > ul > li.has-subnav > a:hover:after {
  -webkit-animation: rotate-in-center 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: rotate-in-center 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.lilkoko .product-side-menu > ul > li.has-subnav.opened > a:after {
  background-image: url("../images/common/arrow_up__lilkoko.svg");
  -webkit-animation: rotate-in-center 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: rotate-in-center 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.lilkoko .product-side-menu > ul > li > a {
  background-color: #FFF;
  border-radius: 5px;
  background-clip: padding-box;
  border: 1px solid #000;
}
.lilkoko .product-side-menu > ul > li > a:hover {
  background-color: #FDC5DF;
}
.lilkoko .product-side-menu > ul > li > ul > li > a {
  background-color: #F4F4F4;
  border-radius: 5px;
  background-clip: padding-box;
  border: 1px solid #000;
  color: #000;
  font-weight: bold;
}
.lilkoko .product-side-menu > ul > li > ul > li > a[aria-current=page],
.lilkoko .product-side-menu > ul > li > ul > li > a:hover {
  background-color: #FDC5DF;
}
.lilkoko .product-side-menu .anim-charactor-01 {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/animation/anim_charactor_01.gif");
  background-size: 100% auto;
  position: absolute;
  left: -243px;
  bottom: -133px;
  width: 800px;
  height: 600px;
  z-index: -1;
}

@-webkit-keyframes rotate-in-center {
  0% {
    -webkit-transform: rotate(-360deg);
    -webkit-transform-transform: rotate(-360deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotate(0);
    -webkit-transform-transform: rotate(0);
    opacity: 1;
  }
}
@keyframes rotate-in-center {
  0% {
    -webkit-transform: rotate(-360deg);
    -webkit-transform-transform: rotate(-360deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotate(0);
    -webkit-transform-transform: rotate(0);
    opacity: 1;
  }
}
.product {
  margin: 0.5rem 0.25rem;
  margin-top: 0;
  padding-bottom: 4.5rem;
  position: relative;
  background-color: #FFF;
  -webkit-transition: 0.3s box-shadow ease-in;
  -webkit-transition: 0.3s -webkit-box-shadow ease-in;
  transition: 0.3s -webkit-box-shadow ease-in;
  transition: 0.3s box-shadow ease-in;
  transition: 0.3s box-shadow ease-in, 0.3s -webkit-box-shadow ease-in;
  list-style: none;
}
.product .promo-text-md, .product .product-name, .product .tag-list, .product .product-price {
  padding: 0 0.5rem;
}
.product .product-img {
  padding-bottom: 100%;
  display: block;
  position: relative;
  overflow: hidden;
}
.product .product-img img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.product .product-status-badge {
  padding: 0.25rem 0.5rem;
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  z-index: 2;
  border-radius: 0.5rem;
  background-clip: padding-box;
  font-size: 0.75rem;
  color: #FFF;
  background-color: #7c9a9f;
}
.product .promo-text {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: 100%;
  color: #FFF;
  background-color: rgba(0, 0, 0, 0.7);
}
.product .promo-slogan {
  margin: 8px;
  width: 90%;
  font-size: 0.75rem;
  color: #818181;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product .product-name {
  font-size: 14px;
  font-weight: 500;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.125rem;
  height: 2.25rem;
}
.product .tag-list {
  margin: 0.5rem 0;
}
.product .tag-list .tag {
  margin: 0.125rem 0.125rem;
  padding: 0.25rem 0.5rem;
  display: inline-block;
  font-size: 0.75rem;
  border: none;
  background-color: #EAF2FF;
}
.product .tag-list .tag > a {
  color: #3A7FF2;
}
.product .tag-list .tag:first-child {
  margin-left: 0;
}
.product .product-price {
  margin-bottom: 0.5rem;
  position: absolute;
  bottom: 40px;
  left: 0;
}
.product .product-price .sale-price {
  font-size: 1.125rem;
  color: #FD2E2E;
  font-weight: 600;
  font-family: Lato !important;
}
.product .product-price .original-price {
  margin-left: 0.25rem;
  font-size: 0.75rem;
  font-family: Lato !important;
  text-decoration: line-through;
  color: #333333;
  font-weight: normal;
}
.product .control-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border-top: 1px solid #E3E3E3;
}
.product .control-area .btn-arrival-notice {
  width: calc(100% - 3rem);
  font-size: 0.875rem;
  color: #818181;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.product .control-area .btn-addToCollection {
  border-right: 1px solid #E3E3E3;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/product_collection.svg");
  background-size: 1.25rem 1.25rem;
  width: 3rem;
  height: 2.5rem;
}
.product .control-area .btn-addToCollection.active {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/product_collection_active.svg");
  background-size: 1.25rem 1.25rem;
}
.product .control-area .btn-addToCart {
  width: calc(100% - 3rem);
  font-size: 0.875rem;
  color: #333333;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.product .control-area .btn-addToCart .icon-addToCart {
  margin-right: 0.25rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/product_addtocart.svg");
  background-size: 1rem 1rem;
  width: 1.25rem;
  height: 1.25rem;
}
.product .control-area .btn-addToCart.soldout {
  color: #818181;
}
@media (min-width: 767px) {
  .product {
    margin: 0.5rem 0.375rem;
    border-radius: 0.5rem;
    background-clip: padding-box;
    overflow: hidden;
  }
}
@media (min-width: 992px) {
  .product:hover, .product:focus {
    -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
    -ms-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
  }
}

.product-horizental {
  margin: 0;
  padding: 1rem;
  border-bottom: 1px solid #E3E3E3;
  border-radius: 0;
  background-clip: padding-box;
}
.product-horizental .badge-hot-place {
  padding: 0.125rem 0.5rem;
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  z-index: 99;
  font-size: 0.6875rem;
  color: #FFF;
  border-radius: 2000px;
  background-clip: padding-box;
  background-color: rgb(0, 0, 0);
}
.product-horizental .badge-hot-place.first-plage {
  background-color: #9d9d82;
}
.product-horizental .product-img {
  margin-right: 0.25rem;
  padding-bottom: 5.5rem;
  display: block;
  width: 6.5rem;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  border-radius: 0.25rem;
  background-clip: padding-box;
}
.product-horizental .product-text {
  width: calc(100% - 6.5rem - 0.25rem);
}
.product-horizental .product-text .promo-slogan {
  margin: 0.25rem 0.5rem;
}
.product-horizental .product-price {
  margin-bottom: 0;
  padding: 0;
  position: initial;
}
.product-horizental button.addToCollection {
  margin-right: 1rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/product_collection.svg");
  background-size: 1.5rem 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
}
.product-horizental button.addToCollection.active {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/product_collection_active.svg");
  background-size: 1.5rem 1.5rem;
}
.product-horizental .btn-goShopping {
  width: 4rem;
}

.product.product-simple {
  padding-bottom: 0;
  border-radius: 0.25rem;
  background-clip: padding-box;
  overflow: hidden;
}
.product.product-simple .product-img {
  padding-bottom: 75%;
  display: block;
  position: relative;
  overflow: hidden;
}
.product.product-simple .product-img img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.product.product-simple .btn-addToCollection {
  position: absolute;
  right: 0.25rem;
  top: 0.25rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/product_collection_w.svg");
  background-size: 1.25rem 1.25rem;
  width: 2rem;
  height: 2rem;
  z-index: 8;
  background-color: rgba(0, 0, 0, 0.65);
  border-radius: 2000px;
  background-clip: padding-box;
}
.product.product-simple .btn-addToCollection.active {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/product_collection_active.svg");
  background-size: 1.25rem 1.25rem;
}
.product.product-simple .product-status-badge {
  padding: 0.25rem 0.5rem;
  position: absolute;
  left: 0.25rem;
  top: 0.4rem;
  z-index: 2;
  border-radius: 0.5rem;
  background-clip: padding-box;
  font-size: 0.75rem;
  color: #FFF;
  background-color: #9d9d82;
}
.product.product-simple .product-name {
  margin-top: 0.5rem;
  font-size: 14px;
  font-weight: 500;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.125rem;
  height: 2.25rem;
}
.product.product-simple .product-price {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  position: static;
  width: 100%;
}
.product.product-simple .product-price .sale-price {
  font-size: 1.125rem;
  color: #9d9d82;
  font-weight: 600;
}
.product.product-simple .product-price .original-price {
  margin-left: 0.25rem;
  font-size: 0.75rem;
  text-decoration: line-through;
  color: #333333;
  font-weight: normal;
}
.product.product-simple .control-area {
  padding: 0.5rem 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: static;
  bottom: 0;
  left: 0;
  width: 100%;
  border-top: 1px solid #E3E3E3;
}
.product.product-simple .control-area .btn-arrival-notice {
  width: 100%;
  font-size: 0.875rem;
  color: #818181;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.product.product-simple .control-area .btn-addToCart {
  width: 100%;
  font-size: 0.875rem;
  color: #333333;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.product.product-simple .control-area .btn-addToCart .icon-addToCart {
  margin-right: 0.25rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/product_addtocart.svg");
  background-size: 1rem 1rem;
  width: 1.25rem;
  height: 1.25rem;
}
.product.product-simple .control-area .btn-addToCart.soldout {
  color: #818181;
}

.upload-area {
  padding: 0 1rem;
}
.upload-area .upload-area-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  overflow: hidden;
}
.upload-area .upload-area-row .file-preview {
  padding: 4px;
  position: relative;
  overflow: hidden;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 25%;
}
.upload-area .upload-area-row .file-preview .file-link {
  padding-top: 100%;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: calc(25vw - 1rem);
  cursor: pointer;
  border-radius: 6px;
  background-clip: padding-box;
  overflow: hidden;
}
.upload-area .upload-area-row .file-preview .file-link.type-is-video::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.upload-area .upload-area-row .file-preview .file-link .btn-play-video {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 10;
  background-image: url("../images/common/icon_play_video.svg");
  background-repeat: no-repeat;
  background-size: 36px 36px;
  background-position: 50% 50%;
  width: 36px;
  height: 36px;
  border: none;
  background-color: transparent;
  opacity: 0.75;
}
.upload-area .upload-area-row .file-preview .file-self {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 80px;
  width: 25vw;
  height: calc(25vw - 1rem);
  -o-object-fit: cover;
     object-fit: cover;
  max-width: 100%;
  vertical-align: middle;
}
.upload-area .upload-area-row .file-preview .btn-file-preview-remove {
  position: absolute;
  right: 6px;
  top: 6px;
  z-index: 3;
  width: 20px;
  height: 20px;
  border: 0;
  background-color: #348CC5;
  border-radius: 2000px;
  background-clip: padding-box;
  background-image: url("../images/common/icon_remove_w.svg");
  background-color: #348CC5;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 16px;
  outline: 0;
}
@media (min-width: 767px) {
  .upload-area .upload-area-row .file-preview .file-link {
    height: calc(23vw - 1rem);
  }
  .upload-area .upload-area-row .file-preview .file-self {
    height: calc(23vw - 1rem);
  }
  .upload-area .upload-area-row .file-preview .btn-file-preview-remove {
    right: 10px;
    top: 10px;
  }
}
@media (min-width: 992px) {
  .upload-area .upload-area-row .file-preview .file-link {
    height: calc(15vw - 1rem);
  }
  .upload-area .upload-area-row .file-preview .file-self {
    height: calc(15vw - 1rem);
  }
}
@media (min-width: 992px) {
  .upload-area .upload-area-row .file-preview .file-link {
    height: 136px;
  }
  .upload-area .upload-area-row .file-preview .file-self {
    width: 136px;
    height: 144px;
  }
}

.file-preview.uploading-file .progress {
  margin-bottom: 0;
  position: absolute;
  z-index: 4;
  bottom: 10%;
  left: 10%;
  width: 80%;
  height: 6px;
}
.file-preview.uploading-file .progress .progress-bar {
  background-color: #348CC5;
}
.file-preview.uploading-file .file-link:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.75);
}

.chat-room-view .upload-area {
  padding: 0;
}

#modal-upload-file .start-upload-area {
  margin: 0 auto;
  width: 100%;
  height: 150px;
  border: 1px dashed #707070;
  border-radius: 6px;
  background-clip: padding-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  cursor: pointer;
  color: #9C9C9C;
}
#modal-upload-file .start-upload-area-sm {
  border: 1px dashed #707070;
  background-image: url("../images/common/icon_plus.svg");
  background-repeat: no-repeat;
  background-size: 24px;
  background-position: 50% 50%;
}
#modal-upload-file .upload-area {
  padding: 1.5rem 0;
}
#modal-upload-file .upload-area .upload-area-row .file-preview .file-link {
  height: 60px;
}
#modal-upload-file .upload-area .upload-area-row .file-preview .file-self {
  height: 60px;
}
@media (min-width: 767px) {
  #modal-upload-file .upload-area .upload-area-row .file-preview .file-link {
    height: 130px;
  }
  #modal-upload-file .upload-area .upload-area-row .file-preview .file-self {
    height: 130px;
  }
  #modal-upload-file .upload-area .upload-area-row .file-preview .btn-file-preview-remove {
    right: 10px;
    top: 10px;
  }
}
@media (min-width: 992px) {
  #modal-upload-file .upload-area .upload-area-row .file-preview .file-link {
    height: 130px;
  }
  #modal-upload-file .upload-area .upload-area-row .file-preview .file-self {
    height: 130px;
  }
}
@media (min-width: 992px) {
  #modal-upload-file .upload-area .upload-area-row .file-preview .file-link {
    height: 130px;
  }
  #modal-upload-file .upload-area .upload-area-row .file-preview .file-self {
    height: 130px;
  }
}

@media (min-width: 767px) {
  .chat-control-area .upload-area .upload-area-row .file-preview .file-link {
    height: calc(14vw - 1rem);
  }
  .chat-control-area .upload-area .upload-area-row .file-preview .file-self {
    height: calc(14vw - 1rem);
  }
  .chat-control-area .upload-area .upload-area-row .file-preview .btn-file-preview-remove {
    right: 10px;
    top: 10px;
  }
}
@media (min-width: 992px) {
  .chat-control-area .upload-area .upload-area-row .file-preview .file-link {
    height: calc(15vw - 1rem);
  }
  .chat-control-area .upload-area .upload-area-row .file-preview .file-self {
    height: calc(15vw - 1rem);
  }
}
@media (min-width: 992px) {
  .chat-control-area .upload-area .upload-area-row .file-preview .file-link {
    height: 136px;
  }
  .chat-control-area .upload-area .upload-area-row .file-preview .file-self {
    width: 136px;
    height: 144px;
  }
}
.bordered-list {
  margin-top: 0.5rem;
}
.bordered-list li a {
  padding: 0.5rem 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-bottom: 1px solid #E3E3E3;
  min-height: 3rem;
  background-color: #FFF;
  font-size: 0.875rem;
}
.bordered-list.has-arrow li a {
  background-image: url("../images/common/arrow_right_grey.svg");
  background-repeat: no-repeat;
  background-position: 96% 50%;
}

.DR {
  cursor: pointer;
}

.DR + * {
  visibility: hidden;
  -webkit-transition: 0.25s all ease-in;
  transition: 0.25s all ease-in;
  position: absolute;
  height: auto;
  opacity: 0;
  z-index: 10;
}

.DR.active + * {
  visibility: visible;
  width: auto;
  height: auto;
  opacity: 1;
}

.DR-box {
  padding: 0.5rem;
  background-color: #FFF;
  border-radius: 3px;
  background-clip: padding-box;
  -webkit-box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.3);
  -ms-box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.3);
}
.DR-box .dr-header {
  border-radius: 3px 3px 0 0;
  background-clip: padding-box;
}

.DR-arrow {
  position: absolute;
  top: -8px;
  right: 21px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 8px 8px 8px;
  border-color: transparent transparent #fff transparent;
}

.DR-arrow-bottom {
  position: absolute;
  bottom: -7px;
  left: 19px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 8px 8px 8px;
  border-color: transparent transparent #fff transparent;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.DR-arrow-left {
  position: absolute;
  bottom: 70%;
  left: -12px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 8px 8px 8px;
  border-color: transparent transparent #fff transparent;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.paginationView {
  margin-bottom: 1.25rem;
}
@media (min-width: 992px) {
  .paginationView {
    margin: 0 0.5rem;
    margin-top: 1.25rem;
    margin-bottom: 2rem;
    padding: 1.25rem 0 0 0;
    border-top: 1px solid #d1d1d1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .paginationView .current-page-num {
    margin-left: auto;
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
  .paginationView .pagination {
    margin-top: 0;
    margin-bottom: 0;
  }
}

.current-page-num {
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #333333;
}

.pagination .first, .pagination .prev, .pagination .next, .pagination .last, .pagination .page {
  width: 2.625rem;
  height: 2.625rem;
  line-height: 2.4rem;
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #333333;
  background-color: #FFF;
  border: 1px solid #E3E3E3;
  cursor: pointer;
  border-radius: 0.5rem;
  background-clip: padding-box;
}
.pagination .first:hover, .pagination .first:focus, .pagination .first:active, .pagination .first.active, .pagination .first:active:focus, .pagination .prev:hover, .pagination .prev:focus, .pagination .prev:active, .pagination .prev.active, .pagination .prev:active:focus, .pagination .next:hover, .pagination .next:focus, .pagination .next:active, .pagination .next.active, .pagination .next:active:focus, .pagination .last:hover, .pagination .last:focus, .pagination .last:active, .pagination .last.active, .pagination .last:active:focus, .pagination .page:hover, .pagination .page:focus, .pagination .page:active, .pagination .page.active, .pagination .page:active:focus {
  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  -ms-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.pagination .first > *, .pagination .prev > *, .pagination .next > *, .pagination .last > *, .pagination .page > * {
  display: block;
}
.pagination .first.disabled, .pagination .prev.disabled, .pagination .next.disabled, .pagination .last.disabled, .pagination .page.disabled {
  opacity: 0.5;
  cursor: default;
  -webkit-box-shadow: none;
  -ms-box-shadow: none;
  box-shadow: none;
}
.pagination .first.current, .pagination .prev.current, .pagination .next.current, .pagination .last.current, .pagination .page.current {
  cursor: default;
  color: #FFF;
  background-color: #9d9d82;
  -webkit-box-shadow: none;
  -ms-box-shadow: none;
  box-shadow: none;
}
.pagination .prev {
  margin-right: 1rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/pager_prev.svg");
  background-size: 1rem 1rem;
}
.pagination .next {
  margin-left: 1rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/pager_next.svg");
  background-size: 1rem 1rem;
}
.pagination .first {
  margin-right: 0.25rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/pager_first.svg");
  background-size: 1rem 1rem;
}
.pagination .last {
  margin-left: 0.25rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/pager_last.svg");
  background-size: 1rem 1rem;
}
.pagination .page {
  margin: 0 0.125rem;
}

.tabmenu {
  margin-top: -1px;
  padding: 0;
  background: #fff;
  position: relative;
  z-index: 1;
  border-bottom: 1px solid #E3E3E3;
}
.tabmenu.sticky {
  position: sticky;
  top: 4.125rem;
  left: 0;
  z-index: 999;
}
.tabmenu ul.nav-tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  overflow-y: no-scroll;
  border-bottom: 0;
}
.tabmenu ul.nav-tabs > li {
  position: relative;
  display: block;
  float: none;
}
.tabmenu ul.nav-tabs > li > a {
  margin: 0;
  padding: 0 1rem;
  display: block;
  font-size: 0.875rem;
  color: #333333;
  width: auto;
  line-height: 2.625rem;
  height: 2.625rem;
  text-align: center;
  border-width: 0;
}
.tabmenu ul.nav-tabs > li.active {
  position: relative;
  border: 0;
}
.tabmenu ul.nav-tabs > li.active:before {
  position: absolute;
  bottom: 0;
  z-index: 2;
  display: inline-block;
  content: "";
  width: 100%;
  height: 0.25rem;
  background-color: #9d9d82;
  position: absolute;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}
.tabmenu ul.nav-tabs > li.active a {
  border: 0;
  font-weight: bold;
  background-color: transparent;
  color: #333333;
}
.tabmenu.has-topBar {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

@media (min-width: 992px) {
  .tabmenu ul.nav-tabs > li > a {
    line-height: 48px;
    height: 48px;
  }
  .tabmenu.has-topBar {
    margin-top: 0;
    margin-bottom: 0.5rem;
  }
}
@media (min-width: 1200px) {
  .tabmenu ul.nav-tabs > li > a {
    line-height: 54px;
    height: 54px;
  }
}
.sidemenu .logo {
  margin: 0 auto;
  margin-top: 1rem;
  margin-bottom: 2rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/logo_svg.svg");
  background-size: 56px 30px;
  display: block;
}
.sidemenu .sidemenu-list .sidemenu-item {
  margin-bottom: 0.5rem;
  display: block;
  text-align: center;
}
.sidemenu .sidemenu-list .sidemenu-item i.navicon-home {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/navigation_icon/navicon_home.svg");
  background-size: 32px 32px;
}
.sidemenu .sidemenu-list .sidemenu-item i.navicon-notification {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/navigation_icon/navicon_notification.svg");
  background-size: 32px 32px;
}
.sidemenu .sidemenu-list .sidemenu-item i.navicon-chat {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/navigation_icon/navicon_chat.svg");
  background-size: 32px 32px;
}
.sidemenu .sidemenu-list .sidemenu-item i.navicon-live {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/navigation_icon/navicon_live.svg");
  background-size: 32px 32px;
}
.sidemenu .sidemenu-list .sidemenu-item i.navicon-list {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/navigation_icon/navicon_friendList.svg");
  background-size: 32px 32px;
}
.sidemenu .sidemenu-list .sidemenu-item i.navicon-subscription {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/navigation_icon/navicon_subscription.svg");
  background-size: 32px 32px;
}
.sidemenu .sidemenu-list .sidemenu-item i.navicon-fans {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/navigation_icon/navicon_fans.svg");
  background-size: 32px 32px;
}
.sidemenu .sidemenu-list .sidemenu-item i.navicon-boomark {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/navigation_icon/navicon_boomark.svg");
  background-size: 32px 32px;
}
.sidemenu .sidemenu-list .sidemenu-item i.navicon-settings {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/navigation_icon/navicon_settings.svg");
  background-size: 32px 32px;
}
.sidemenu .sidemenu-list .sidemenu-item i.navicon-news {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/navigation_icon/navicon_news.svg");
  background-size: 32px 32px;
}
.sidemenu .sidemenu-list .sidemenu-item i.navicon-mypage {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/navigation_icon/navicon_mypage.svg");
  background-size: 32px 32px;
}
.sidemenu .sidemenu-list .sidemenu-item span.sidemenu-item-text {
  display: none;
}
.sidemenu .btn-langselector {
  margin-top: 1.25rem;
  position: relative;
  height: 26px;
  text-align: center;
  cursor: pointer;
}
.sidemenu .btn-langselector .lang-selector {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.sidemenu .btn-langselector .lang-selector i[data-lang=zh-tw] {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/flag_tw.svg");
  background-size: 26px 26px;
}
.sidemenu .btn-langselector .lang-selector span {
  font-size: 0.875rem;
}
@media (min-width: 992px) {
  .sidemenu .btn-langselector .lang-selector span {
    font-size: 16px;
  }
}
.sidemenu .btn-langselector .lang-menu {
  padding: 0;
  z-index: 3;
  left: 77px;
  bottom: -44px;
  width: 150px;
}
.sidemenu .btn-langselector .lang-menu li {
  padding: 0.25rem 1rem;
  border-bottom: 1px solid #E4E8EA;
  font-size: 0.875rem;
  line-height: 1.75rem;
  text-align: left;
}
.sidemenu .btn-langselector .lang-menu li[data-lang=zh-tw]:before {
  margin-right: 8px;
  position: relative;
  top: 4px;
  content: "";
  display: inline-block;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/flag_tw.svg");
  background-size: 20px 20px;
}
.sidemenu .btn-langselector .lang-menu li[data-lang=en]:before {
  margin-right: 8px;
  position: relative;
  top: 4px;
  content: "";
  display: inline-block;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/flag_usa.svg");
  background-size: 20px 20px;
}
.sidemenu .btn-theme-mode {
  margin-top: 1.25rem;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  cursor: pointer;
}
.sidemenu .btn-theme-mode i.icon-light-mode {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/icon_light_mode.svg");
  background-size: 26px 26px;
}
.sidemenu .btn-write {
  margin: 0 auto;
  margin-top: 2rem;
  width: 52px;
  height: 52px;
  background-color: #348CC5;
  cursor: pointer;
  background-image: url("../images/common/icon_write.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: 50% 50%;
  border-radius: 26px;
  background-clip: padding-box;
  -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
  -ms-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
}
.sidemenu .btn-user-profile .user-profile-img {
  margin: 0 auto;
  margin-top: 1rem;
  margin-bottom: 2rem;
  width: 42px;
  height: 42px;
  border-radius: 21px;
  background-clip: padding-box;
  overflow: hidden;
  -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
  -ms-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
}
.sidemenu .btn-user-profile .user-info {
  display: none;
}
.sidemenu .user-info-dropdown {
  padding: 0.75rem 0;
  top: 0;
  left: 70px;
  z-index: 999;
  width: 200px;
  border-radius: 8px;
  background-clip: padding-box;
}
.sidemenu .user-info-dropdown .DR-arrow-left {
  bottom: 80%;
}
.sidemenu .user-info-dropdown .user,
.sidemenu .user-info-dropdown .mypoint {
  padding: 0 1rem;
}
.sidemenu .user-info-dropdown .mypoint {
  margin-top: 12px;
  margin-left: 1rem;
  margin-right: 1rem;
  padding: 0.25rem 1rem;
  border-radius: 2000px;
  background-clip: padding-box;
  border: 1px solid #E4E8EA;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 13px;
}
.sidemenu .user-info-dropdown .mypoint .btn-top-up {
  margin-left: 8px;
  display: inline-block;
  text-decoration: underline;
  cursor: pointer;
}
.sidemenu .user-info-dropdown .flex-row {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.sidemenu .user-info-dropdown .btn-logout {
  margin-top: 16px;
  padding-top: 8px;
  display: block;
  border-top: 1px solid #E4E8EA;
  font-size: 0.875rem;
  text-align: center;
  cursor: pointer;
  color: #FD2E2E;
}
@media (min-width: 992px) {
  .sidemenu .btn-user-profile {
    margin-top: 1rem;
    margin-bottom: 1rem;
    margin-left: 47px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 173px;
  }
  .sidemenu .btn-user-profile .user-profile-img {
    margin: 0;
  }
  .sidemenu .btn-user-profile .user-info {
    margin-left: 1rem;
  }
  .sidemenu .btn-user-profile .user-info .user-nickname {
    font-weight: bold;
  }
  .sidemenu .btn-user-profile .btn-logout {
    display: none;
    font-size: 0.8125rem;
    cursor: pointer;
  }
  .sidemenu .user-info-dropdown {
    left: 110px;
  }
  .sidemenu .btn-theme-mode {
    margin-top: 2rem;
    padding-left: 3.05rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: start;
    background-image: url("../images/common/icon_arrow_right_sm.svg");
    background-repeat: no-repeat;
    background-size: 14px 14px;
    background-position: 90% 50%;
  }
  .sidemenu .btn-theme-mode span {
    margin-left: 1.125rem;
  }
  .sidemenu .btn-langselector .lang-selector {
    padding-left: 3.05rem;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: start;
    background-image: url("../images/common/icon_arrow_right_sm.svg");
    background-repeat: no-repeat;
    background-size: 14px 14px;
    background-position: 90% 50%;
  }
  .sidemenu .btn-langselector .lang-selector span {
    margin-left: 1.125rem;
  }
  .sidemenu .btn-langselector .lang-menu {
    left: 233px;
  }
  .sidemenu .btn-write {
    margin: 0;
    margin-top: 2rem;
    margin-left: 47px;
    width: 173px;
    background-image: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-transition: 0.2s all ease-in;
    transition: 0.2s all ease-in;
    font-weight: bold;
  }
  .sidemenu .btn-write:hover {
    background-color: #1f72a8;
  }
  .sidemenu .btn-write i.icon-write {
    margin-right: 0.5rem;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    background-position: 50% 50%;
    background-image: url("../images/common/icon_write.svg");
    background-size: 24px 24px;
  }
  .sidemenu .btn-write span {
    color: #fff;
  }
  .sidemenu .sidemenu-list .sidemenu-item {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    padding: 0.25rem 0.5rem;
    padding-left: 2.875rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: left;
    border-radius: 2000px;
    background-clip: padding-box;
  }
  .sidemenu .sidemenu-list .sidemenu-item:hover, .sidemenu .sidemenu-list .sidemenu-item:focus {
    background-color: #f5f5f5;
  }
  .sidemenu .sidemenu-list .sidemenu-item span.sidemenu-item-text {
    margin-left: 1rem;
    position: relative;
    top: 2px;
    display: inline-block;
    color: #333333;
    font-size: 16px;
    font-weight: bold;
  }
  .sidemenu .sidemenu-list .sidemenu-item.current span.sidemenu-item-text, .sidemenu .sidemenu-list .sidemenu-item:hover span.sidemenu-item-text, .sidemenu .sidemenu-list .sidemenu-item:focus span.sidemenu-item-text {
    color: #348CC5;
  }
  .sidemenu .sidemenu-list .sidemenu-item.current i.navicon-home, .sidemenu .sidemenu-list .sidemenu-item:hover i.navicon-mypage, .sidemenu .sidemenu-list .sidemenu-item:focus i.navicon-mypage {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    background-position: 50% 50%;
    background-image: url("../images/navigation_icon/navicon_home_h.svg");
    background-size: 32px 32px;
  }
  .sidemenu .sidemenu-list .sidemenu-item.current i.navicon-notification, .sidemenu .sidemenu-list .sidemenu-item:hover i.navicon-notification, .sidemenu .sidemenu-list .sidemenu-item:focus i.navicon-notification {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    background-position: 50% 50%;
    background-image: url("../images/navigation_icon/navicon_notification_h.svg");
    background-size: 32px 32px;
  }
  .sidemenu .sidemenu-list .sidemenu-item.current i.navicon-chat, .sidemenu .sidemenu-list .sidemenu-item:hover i.navicon-chat, .sidemenu .sidemenu-list .sidemenu-item:focus i.navicon-chat {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    background-position: 50% 50%;
    background-image: url("../images/navigation_icon/navicon_chat_h.svg");
    background-size: 32px 32px;
  }
  .sidemenu .sidemenu-list .sidemenu-item.current i.navicon-live, .sidemenu .sidemenu-list .sidemenu-item:hover i.navicon-live, .sidemenu .sidemenu-list .sidemenu-item:focus i.navicon-live {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    background-position: 50% 50%;
    background-image: url("../images/navigation_icon/navicon_live_h.svg");
    background-size: 32px 32px;
  }
  .sidemenu .sidemenu-list .sidemenu-item.current i.navicon-list, .sidemenu .sidemenu-list .sidemenu-item:hover i.navicon-list, .sidemenu .sidemenu-list .sidemenu-item:focus i.navicon-list {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    background-position: 50% 50%;
    background-image: url("../images/navigation_icon/navicon_friendList_h.svg");
    background-size: 32px 32px;
  }
  .sidemenu .sidemenu-list .sidemenu-item.current i.navicon-subscription, .sidemenu .sidemenu-list .sidemenu-item:hover i.navicon-subscription, .sidemenu .sidemenu-list .sidemenu-item:focus i.navicon-subscription {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    background-position: 50% 50%;
    background-image: url("../images/navigation_icon/navicon_subscription_h.svg");
    background-size: 32px 32px;
  }
  .sidemenu .sidemenu-list .sidemenu-item.current i.navicon-fans, .sidemenu .sidemenu-list .sidemenu-item:hover i.navicon-fans, .sidemenu .sidemenu-list .sidemenu-item:focus i.navicon-fans {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    background-position: 50% 50%;
    background-image: url("../images/navigation_icon/navicon_fans_h.svg");
    background-size: 32px 32px;
  }
  .sidemenu .sidemenu-list .sidemenu-item.current i.navicon-boomark, .sidemenu .sidemenu-list .sidemenu-item:hover i.navicon-boomark, .sidemenu .sidemenu-list .sidemenu-item:focus i.navicon-boomark {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    background-position: 50% 50%;
    background-image: url("../images/navigation_icon/navicon_boomark_h.svg");
    background-size: 32px 32px;
  }
  .sidemenu .sidemenu-list .sidemenu-item.current i.navicon-settings, .sidemenu .sidemenu-list .sidemenu-item:hover i.navicon-settings, .sidemenu .sidemenu-list .sidemenu-item:focus i.navicon-settings {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    background-position: 50% 50%;
    background-image: url("../images/navigation_icon/navicon_settings_h.svg");
    background-size: 32px 32px;
  }
  .sidemenu .sidemenu-list .sidemenu-item.current i.navicon-news, .sidemenu .sidemenu-list .sidemenu-item:hover i.navicon-news, .sidemenu .sidemenu-list .sidemenu-item:focus i.navicon-news {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    background-position: 50% 50%;
    background-image: url("../images/navigation_icon/navicon_news_h.svg");
    background-size: 32px 32px;
  }
  .sidemenu .sidemenu-list .sidemenu-item.current i.navicon-mypage, .sidemenu .sidemenu-list .sidemenu-item:hover i.navicon-mypage, .sidemenu .sidemenu-list .sidemenu-item:focus i.navicon-mypage {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    background-position: 50% 50%;
    background-image: url("../images/navigation_icon/navicon_mypage_h.svg");
    background-size: 32px 32px;
  }
}
@media (min-width: 1600px) {
  .sidemenu .sidemenu-list .sidemenu-item {
    padding: 0.5rem;
    padding-left: 2.875rem;
  }
}

#modal-write-post .modal-body {
  padding: 1rem;
}
#modal-write-post .modal-body .post-controll-area {
  border-bottom: 0;
}
#modal-write-post .modal-body .post-controll-area .post-controll-header, #modal-write-post .modal-body .post-controll-area .post-controll-area-footer {
  padding: 1rem;
}
#modal-write-post .modal-body .post-controll-area .post-controll-area-body {
  padding: 0;
}
#modal-write-post .modal-body .post-controll-area .post-controll-area-body .add-condition .condition-item label {
  width: 25%;
  min-width: auto;
  text-align: left;
}
#modal-write-post .modal-body .post-controll-area .post-controll-area-body .add-condition .condition-item select {
  min-width: 140px;
}
#modal-write-post .modal-body .post-controll-area .post-controll-area-footer {
  padding-top: 1rem;
}

.btn-write-post-m {
  position: fixed;
  bottom: 12%;
  right: 1rem;
  z-index: 999;
  width: 64px;
  height: 64px;
  background-color: #348CC5;
  cursor: pointer;
  background-image: url("../images/common/icon_write.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: 50% 50%;
  border-radius: 32px;
  background-clip: padding-box;
  -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  -ms-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

.post-list-view.empty {
  padding: 0 !important;
}

.post-list {
  background-color: #E3E3E3;
}

.post-item {
  margin-bottom: 0.5rem;
  padding-top: 1rem;
  background-color: #fff;
  border-top: 1px solid #E3E3E3;
  border-bottom: 1px solid #E3E3E3;
}
@media (min-width: 767px) {
  .post-item {
    border-radius: 8px;
    background-clip: padding-box;
  }
}
.post-item .post-item-header {
  padding: 0 1rem;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}
.post-item .post-item-header .post-user {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.post-item .post-item-header .post-user .user-name {
  margin-left: 0.5rem;
  margin-bottom: 0.25rem;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1;
}
.post-item .post-item-header .post-user .user-id {
  margin-left: 0.5rem;
  font-size: 0.8125rem;
  font-weight: normal;
  line-height: 1;
  color: #9C9C9C;
}
.post-item .post-item-header .posted-time {
  margin-top: 0.3125rem;
  margin-left: 0.5rem;
  font-size: 0.8125rem;
  font-weight: normal;
  color: #9C9C9C;
  text-align: right;
}
.post-item .post-item-header .btn-selectAuth {
  padding: 0;
  font-size: 0.8125rem;
  border-radius: 2000px;
  background-clip: padding-box;
  border: none;
}
@media (min-width: 767px) {
  .post-item .post-item-header .btn-selectAuth {
    margin-right: 0.5rem;
    padding: 0.125rem 0.5rem;
    border: 1px solid #333333;
  }
}
.post-item .post-item-header .btn-selectAuth .icon-auth-public {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/post_write/public.svg");
  background-size: 1.5rem 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
}
.post-item .post-item-header .btn-selectAuth .icon-auth-limited {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/post_write/limited.svg");
  background-size: 1.5rem 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
}
.post-item .post-item-header .btn-selectAuth .icon-arrow-dropdown {
  margin-left: 0.125rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/arrow_dropdown.svg");
  background-size: 0.375rem 0.375rem;
  width: 0.75rem;
  height: 0.375rem;
}
.post-item .post-item-header .btn-addPostToCellection {
  font-size: 0.8125rem;
  border-radius: 2000px;
  background-clip: padding-box;
  border: none;
}
@media (min-width: 767px) {
  .post-item .post-item-header .btn-addPostToCellection {
    padding: 0.125rem 0.5rem;
    border: 1px solid #333333;
  }
}
.post-item .post-item-header .btn-addPostToCellection .icon-collection {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/product_collection.svg");
  background-size: 1.5rem 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
}
.post-item .post-item-header .btn-addPostToCellection.active .icon-collection {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/product_collection_active.svg");
  background-size: 1.5rem 1.5rem;
}
.post-item .post-item-header .btn-addPostToCellection.active .icon-collection .icon-collection {
  margin-right: 0.25rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/product_collection.svg");
  background-size: 1.5rem 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
}
.post-item .post-item-header .btn-more {
  padding: 0.25rem 0.25rem;
  font-size: 0.8125rem;
  border-radius: 2000px;
  background-clip: padding-box;
}
@media (min-width: 767px) {
  .post-item .post-item-header .btn-more {
    margin-left: 0.5rem;
    padding: 0.25rem 0.5rem;
  }
}
.post-item .post-item-header .btn-more:hover, .post-item .post-item-header .btn-more:focus {
  background-color: #F4F4F4;
}
.post-item .post-item-header .btn-more .icon-more {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/more.svg");
  background-size: 1rem 1rem;
  width: 1.5rem;
  height: 1.5rem;
}
.post-item .post-item-header .post-more-dropdown {
  margin: 0;
  padding: 0;
  border: none;
  left: initial;
  top: 2rem;
  right: 0;
  border-radius: 0.5rem;
  background-clip: padding-box;
  -webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  -ms-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}
.post-item .post-item-header .post-more-dropdown button {
  padding: 0.5rem 0;
  display: block;
  width: 100%;
  border-bottom: 1px solid #E3E3E3;
}
.post-item .post-item-header .post-more-dropdown button:hover, .post-item .post-item-header .post-more-dropdown button:focus {
  background-color: #F4F4F4;
}
.post-item .post-item-header .post-more-dropdown button .icon-edit {
  margin-right: 0.25rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/edit.svg");
  background-size: 1rem 1rem;
  width: 1rem;
  height: 1rem;
}
.post-item .post-item-header .post-more-dropdown button .icon-remove {
  margin-right: 0.25rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/remove_red.svg");
  background-size: 1rem 1rem;
  width: 1rem;
  height: 1rem;
}
.post-item .post-item-header .post-more-dropdown .btn-remove-post {
  color: #FD2E2E;
}
.post-item .post-item-body {
  margin-top: 0.5rem;
  color: #555B5D;
  font-size: 100%;
  font-weight: normal;
  line-height: 1.5rem;
}
.post-item .post-item-body .post-content {
  padding: 0 1rem;
  font-size: 15px;
  line-height: 30px;
  font-weight: normal;
  color: #333333;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-height: 1.5rem;
  height: 4.5rem;
}
.post-item .post-item-body .post-content.displayAll {
  -webkit-box-orient: inherit;
  -webkit-line-clamp: inherit;
  line-height: 1.5rem;
  height: auto;
}
.post-item .post-item-body .post-imgs {
  margin-top: 0.5rem;
  position: relative;
  cursor: pointer;
}
.post-item .post-item-body button.btn-readmore {
  margin-bottom: 0.5rem;
  padding: 0 1rem;
  display: block;
  font-size: 0.875rem;
  color: #818181;
  outline: 0;
}
.post-item .post-item-footer {
  margin-top: 0.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 1rem;
  border-top: 1px solid #E3E3E3;
}
.post-item .post-item-footer button, .post-item .post-item-footer a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 33.3333%;
  height: 2.5rem;
  border-right: 1px solid #E3E3E3;
}
.post-item .post-item-footer button:last-child, .post-item .post-item-footer a:last-child {
  border-right: none;
}
.post-item .post-item-footer .btn-like.active {
  color: #9d9d82;
}
.post-item .post-item-footer .btn-like.active .icon-like {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/post_like_active.svg");
  background-size: 1rem 1rem;
}
.post-item .post-item-footer .icon-like {
  margin-right: 0.125rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/post_like.svg");
  background-size: 1rem 1rem;
  width: 1.25rem;
  height: 1.25rem;
}
.post-item .post-item-footer .icon-comment {
  margin-right: 0.125rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/post_comment.svg");
  background-size: 1rem 1rem;
  width: 1.25rem;
  height: 1.25rem;
}
.post-item .post-item-footer .icon-share {
  margin-right: 0.125rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/post_share.svg");
  background-size: 1rem 1rem;
  width: 1.25rem;
  height: 1.25rem;
}

@media (min-width: 767px) {
  .post-item .post-item-footer > * {
    padding: 0.5rem 0;
    background-size: 24px;
    font-size: 0.9375rem;
  }
}
@media (min-width: 1200px) {
  .post-item {
    padding-top: 1.5rem;
  }
  .post-item .post-item-header,
  .post-item .post-item-body .post-content,
  .post-item .post-item-body button.btn-readmore,
  .post-item .recommened-product-list--title,
  .post-item .recommened-product-list {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
.post-item .img-wrap {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}
.post-item .post-imgs-single {
  margin-top: 0.5rem;
}
.post-item .post-imgs-single .img-wrap {
  padding-top: calc(80vw - 100px);
  display: block;
  width: 100%;
}
.post-item .post-imgs-single-verticale {
  margin-top: 0.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-top: 1px solid #E3E3E3;
  border-bottom: 1px solid #E3E3E3;
}
.post-item .post-imgs-single-verticale .img-wrap {
  padding-top: 100vw;
  width: 65vw;
}
.post-item .post-imgs-group-2 {
  margin: 0 -0.125rem;
  margin-top: 0.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.post-item .post-imgs-group-2 .img-wrap {
  margin: 0 0.125rem;
  width: 50%;
  padding-top: 42.535vw;
  height: auto;
}
.post-item .post-imgs-group-3 .post-imgs-single {
  margin-bottom: 0.25rem;
}
.post-item .post-imgs-group-3 .post-imgs-group-2, .post-item .post-imgs-group-4 .post-imgs-group-2 {
  margin-top: 0;
}
.post-item .post-imgs-group-4 {
  margin: 0 -0.25rem;
  margin-top: 0.25rem;
}
.post-item .post-imgs-group-4 .post-imgs-group-2 {
  margin-bottom: 0.25rem;
  margin: 0.25rem;
}
.post-item .post-imgs-group-5 {
  margin-top: 0.5rem;
}
.post-item .post-imgs-group-5 .post-imgs-group-5-3 {
  margin: 0 -0.125rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
.post-item .post-imgs-group-5 .post-imgs-group-5-3 .img-wrap {
  margin: 0 0.125rem;
  margin-top: 0.25rem;
  padding-top: 24vw;
  width: 33.333%;
  height: auto;
  position: relative;
}
.post-item .post-imgs-group-5 .post-imgs-group-5-3 .img-wrap.more-img::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.post-item .post-imgs-group-5 .post-imgs-group-5-3 .img-wrap.more-img span {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 9;
  color: #fff;
  font-size: 1.5rem;
}
@media (min-width: 767px) {
  .post-item .post-imgs-single .img-wrap {
    padding-top: calc(50vw - 100px);
  }
  .post-item .post-imgs-single-verticale .img-wrap {
    padding-top: 45vw;
    width: 33vw;
  }
  .post-item .post-imgs-group-2 .img-wrap {
    padding-top: calc(33vw - 100px);
  }
  .post-item .post-imgs-group-3 .post-imgs-single .img-wrap {
    padding-top: calc(50vw - 100px);
  }
  .post-item .post-imgs-group-5 .post-imgs-group-5-3 .img-wrap {
    padding-top: 13vw;
  }
  .post-item .post-imgs-group-5 .post-imgs-group-5-3 .img-wrap.more-img span {
    font-size: 1.25rem;
  }
}
@media (min-width: 992px) {
  .post-item .post-imgs-single .img-wrap {
    padding-top: 0;
    height: 375px;
  }
  .post-item .post-imgs-single-verticale .img-wrap {
    padding-top: 0;
    width: 350px;
    height: 500px;
  }
  .post-item .post-imgs-group-2 .img-wrap {
    padding-top: 0;
    height: 200px;
  }
  .post-item .post-imgs-group-3 .post-imgs-single .img-wrap {
    margin-bottom: 0.25rem;
    padding-top: 0;
    height: 375px;
  }
  .post-item .post-imgs-group-5 .post-imgs-group-5-3 .img-wrap {
    padding-top: 0;
    height: 150px;
  }
  .post-item .post-imgs-group-5 .post-imgs-group-5-3 .img-wrap.more-img span {
    font-size: 2rem;
  }
}

.take-msg-controll-area {
  margin-top: -8px;
  padding: 1rem 1.5rem;
  padding-bottom: 0;
  background-color: #fff;
  border-bottom: 1px solid #E3E3E3;
}
.take-msg-controll-area .take-msg-controll-area-header {
  margin-bottom: 1rem;
}
.take-msg-controll-area .take-msg-controll-area-header .btn-load-msg {
  font-size: 15px;
  color: #9C9C9C;
}
.take-msg-controll-area .take-msg-controll-area-header .btn-load-msg:hover {
  text-decoration: underline;
}
.take-msg-controll-area .take-msg-controll-area-body .msg-list .msg-item {
  margin: 1rem 0;
}
.take-msg-controll-area .take-msg-controll-area-body .msg-list .msg-item .text {
  font-size: 15px;
}
.take-msg-controll-area .take-msg-controll-area-body .msg-list .msg-item .user-name {
  font-size: 0.875rem;
}
.take-msg-controll-area .take-msg-controll-area-body .msg-list .msg-item .tool-bar {
  font-size: 14px;
}
.take-msg-controll-area .take-msg-controll-area-body .msg-list .msg-item .btn-remove {
  border: none;
  cursor: pointer;
  background-color: transparent;
}
.take-msg-controll-area .take-msg-controll-area-body .msg-list .msg-item .btn-remove:hover {
  color: #333333;
  text-decoration: underline;
}
.take-msg-controll-area .take-msg-controll-area-body .msg-list .msg-item .btn-report {
  margin-left: 0.5rem;
  width: 32px;
  height: 32px;
  border-radius: 2000px;
  background-clip: padding-box;
  border: none;
  cursor: pointer;
  background-image: url("../images/common/icon_report.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 3px 13px;
  background-color: transparent;
}
.take-msg-controll-area .take-msg-controll-area-body .msg-list .msg-item .btn-report:hover, .take-msg-controll-area .take-msg-controll-area-body .msg-list .msg-item .btn-report:focus {
  background-color: #efefef;
}
.take-msg-controll-area .take-msg-controll-area-footer {
  margin: 0 -1.5rem;
  padding: 1rem 1.5rem;
  position: sticky;
  bottom: 52px;
  z-index: 9;
  border-top: 1px solid #E3E3E3;
  background-color: #fff;
}
@media (min-width: 767px) {
  .take-msg-controll-area .take-msg-controll-area-footer {
    bottom: 0;
  }
}
.take-msg-controll-area .take-msg-controll-area-footer textarea {
  resize: none;
  border: none;
  width: calc(100% - 36px - 48px - 12px - 12px);
  outline: 0;
}
.take-msg-controll-area .take-msg-controll-area-footer .btn-send-msg {
  margin-left: 12px;
  width: 48px;
  height: 48px;
  border-radius: 2000px;
  background-clip: padding-box;
  border: none;
  outline: 0;
  background-image: url("../images/common/icon_send.svg");
  background-repeat: no-repeat;
  background-position: 16px 16px;
  background-size: 20px;
  background-color: #fff;
  -webkit-transition: 0.2s all ease-in;
  transition: 0.2s all ease-in;
}
.take-msg-controll-area .take-msg-controll-area-footer .btn-send-msg:hover, .take-msg-controll-area .take-msg-controll-area-footer .btn-send-msg:focus {
  background-color: #F0F4F6;
}

.post-item .img-wrap.type-is-video {
  position: relative;
}
.post-item .img-wrap.type-is-video::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.post-item .btn-play-video {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 10;
  background-image: url("../images/common/play_video.svg");
  background-repeat: no-repeat;
  background-size: 36px 36px;
  background-position: 50% 50%;
  width: 36px;
  height: 36px;
  border: none;
  background-color: transparent;
  opacity: 0.75;
}

@media (min-width: 767px) {
  .product-detail-view .post-item:first-child {
    border-top: none;
    border-radius: 0 0 8px 8px;
    background-clip: padding-box;
  }
}
.post-horizental {
  margin: 0;
  padding: 1rem;
  position: relative;
  border-bottom: 1px solid #E3E3E3;
  border-radius: 0;
  background-clip: padding-box;
  background-color: #FFF;
}
.post-horizental .badge-hot-place {
  padding: 0.125rem 0.5rem;
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  z-index: 99;
  font-size: 0.6875rem;
  color: #FFF;
  border-radius: 2000px;
  background-clip: padding-box;
  background-color: rgb(0, 0, 0);
}
.post-horizental .badge-hot-place.first-plage {
  background-color: #9d9d82;
}
.post-horizental .post-img {
  margin-right: 0.5rem;
  padding-bottom: 4.5rem;
  display: block;
  width: 4.5rem;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  border-radius: 0.25rem;
  background-clip: padding-box;
}
.post-horizental .post-text {
  width: 100%;
}
.post-horizental .post-text .post-content {
  font-size: 0.875rem;
  line-height: 1.125rem;
  font-weight: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.125rem;
  height: 2.25rem;
}
.post-horizental .post-text .post-time {
  margin-top: 0.5rem;
  font-size: 13px;
  color: #818181;
}
.post-horizental .datas {
  font-size: 13px;
}
.post-horizental .datas .icon-collection {
  margin-right: 0.125rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/product_collection_active.svg");
  background-size: 1.25rem 1.25rem;
  width: 1.25rem;
  height: 1.25rem;
}
.post-horizental .datas .icon-msgs {
  margin-left: 1rem;
  margin-right: 0.25rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/post_comment.svg");
  background-size: 1rem 1rem;
  width: 1rem;
  height: 1rem;
}
.post-horizental .btn-goPostDeatail {
  width: 4rem;
}

.writePost-view {
  margin-bottom: 0.5rem;
  padding: 0 1rem;
  background-color: #FFF;
}
.writePost-view .textarea {
  padding-top: 1rem;
  padding-bottom: 1rem;
  cursor: pointer;
}
.writePost-view .textarea .user-profile-img {
  -ms-flex-item-align: start;
      align-self: flex-start;
}
.writePost-view .textarea button, .writePost-view .textarea textarea {
  margin-left: 0.25rem;
  padding: 0.65rem;
  width: calc(100% - 2.625rem);
  border: none;
  resize: none;
  outline: 0;
  text-align: left;
  border-radius: 2000px;
  background-clip: padding-box;
}
.writePost-view .textarea button:hover, .writePost-view .textarea textarea:hover {
  background-color: #F4F4F4;
}
.writePost-view .buttonsGroup {
  margin: 0 -1rem;
  border-top: 1px solid #E3E3E3;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 33.333% 33.333% 33.333%;
  grid-template-columns: 33.333% 33.333% 33.333%;
}
.writePost-view .buttonsGroup .writePost-button {
  padding: 0.5rem 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: #333333;
  text-align: center;
  border-right: 1px solid #E3E3E3;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  cursor: pointer;
}
.writePost-view .buttonsGroup .writePost-button:hover {
  background-color: #F4F4F4;
}
.writePost-view .buttonsGroup .writePost-button:last-child {
  border: none;
}
.writePost-view .buttonsGroup .writePost-button .icon-add-picture {
  width: 1.875rem;
  height: 1.875rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/post_write/photo.svg");
  background-size: 1rem 1rem;
}
.writePost-view .buttonsGroup .writePost-button .icon-add-video {
  width: 1.875rem;
  height: 1.875rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/post_write/video.svg");
  background-size: 1rem 1rem;
}
.writePost-view .buttonsGroup .writePost-button .icon-add-products {
  width: 1.875rem;
  height: 1.875rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/post_write/product.svg");
  background-size: 1rem 1rem;
}
@media (min-width: 767px) {
  .writePost-view {
    margin-top: 0;
    border-radius: 0.5rem;
    background-clip: padding-box;
    overflow: hidden;
    margin-bottom: 1.25rem;
  }
}

.modal-writePost.modal, .modal-editPost.modal {
  padding: 0 !important;
  overflow-y: auto;
}
.modal-writePost.modal .modal-dialog, .modal-editPost.modal .modal-dialog {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
.modal-writePost.modal .modal-content, .modal-editPost.modal .modal-content {
  height: 0;
  min-height: 100%;
  border-radius: 0;
  background-clip: padding-box;
}
@media (min-width: 767px) {
  .modal-writePost.modal, .modal-editPost.modal {
    padding-left: 6px !important;
  }
  .modal-writePost.modal .modal-dialog, .modal-editPost.modal .modal-dialog {
    margin: 30px auto;
    width: 600px;
    height: auto;
  }
  .modal-writePost.modal .modal-content, .modal-editPost.modal .modal-content {
    height: auto;
    overflow: hidden;
    border-radius: 0.5rem;
    background-clip: padding-box;
  }
}
.modal-writePost.modal .modal-header, .modal-editPost.modal .modal-header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #E3E3E3;
}
.modal-writePost.modal .modal-body, .modal-editPost.modal .modal-body {
  padding: 0;
}
.modal-writePost.modal .modal-body .writePost-view, .modal-editPost.modal .modal-body .writePost-view {
  margin-bottom: 0;
}
.modal-writePost.modal .modal-body .writePost-view .haeder, .modal-editPost.modal .modal-body .writePost-view .haeder {
  margin-top: 1rem;
}
.modal-writePost.modal .modal-body .writePost-view .haeder .user-name, .modal-editPost.modal .modal-body .writePost-view .haeder .user-name {
  margin-left: 0.5rem;
}
.modal-writePost.modal .modal-body .writePost-view .haeder .user-name:hover, .modal-editPost.modal .modal-body .writePost-view .haeder .user-name:hover {
  text-decoration: none;
}
.modal-writePost.modal .modal-body .writePost-view .haeder .btn-selectAuth, .modal-editPost.modal .modal-body .writePost-view .haeder .btn-selectAuth {
  margin-right: 0.5rem;
  padding: 0.125rem 0.5rem;
  font-size: 0.8125rem;
  border-radius: 2000px;
  background-clip: padding-box;
}
.modal-writePost.modal .modal-body .writePost-view .haeder .btn-selectAuth .icon-auth-public, .modal-editPost.modal .modal-body .writePost-view .haeder .btn-selectAuth .icon-auth-public {
  margin-right: 0.25rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/post_write/public.svg");
  background-size: 1.25rem 1.25rem;
  width: 1.25rem;
  height: 1.25rem;
}
.modal-writePost.modal .modal-body .writePost-view .haeder .btn-selectAuth .icon-auth-limited, .modal-editPost.modal .modal-body .writePost-view .haeder .btn-selectAuth .icon-auth-limited {
  margin-right: 0.25rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/post_write/limited.svg");
  background-size: 1.25rem 1.25rem;
  width: 1.25rem;
  height: 1.25rem;
}
.modal-writePost.modal .modal-body .writePost-view .haeder .btn-selectAuth .icon-arrow-dropdown, .modal-editPost.modal .modal-body .writePost-view .haeder .btn-selectAuth .icon-arrow-dropdown {
  margin-left: 0.125rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/arrow_dropdown.svg");
  background-size: 0.375rem 0.375rem;
  width: 0.75rem;
  height: 0.375rem;
}
.modal-writePost.modal .modal-body .textarea textarea, .modal-editPost.modal .modal-body .textarea textarea {
  padding: 1rem 0;
  width: 100%;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.875rem;
  height: 65vw;
  border-radius: 0;
  background-clip: padding-box;
}
.modal-writePost.modal .modal-body .textarea textarea:hover, .modal-editPost.modal .modal-body .textarea textarea:hover {
  background-color: #fff;
}
.modal-writePost.modal .modal-body .buttonsGroup, .modal-editPost.modal .modal-body .buttonsGroup {
  border-bottom: 1px solid #E3E3E3;
}
.modal-writePost.modal .modal-body .uploadFile-area .photos-and-videos, .modal-editPost.modal .modal-body .uploadFile-area .photos-and-videos {
  margin: 1rem 0;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 25% 25% 25% 25%;
  grid-template-columns: 25% 25% 25% 25%;
}
@media (min-width: 767px) {
  .modal-writePost.modal .modal-body .uploadFile-area .photos-and-videos, .modal-editPost.modal .modal-body .uploadFile-area .photos-and-videos {
    -ms-grid-columns: 20% 20% 20% 20% 20%;
    grid-template-columns: 20% 20% 20% 20% 20%;
  }
}
.modal-writePost.modal .modal-body .uploadFile-area .photos-and-videos .file, .modal-editPost.modal .modal-body .uploadFile-area .photos-and-videos .file {
  margin: 0.25rem;
  position: relative;
  color: #818181;
}
.modal-writePost.modal .modal-body .uploadFile-area .photos-and-videos .file .btn-remove, .modal-editPost.modal .modal-body .uploadFile-area .photos-and-videos .file .btn-remove {
  position: absolute;
  right: -0.3125rem;
  top: -0.3125rem;
  z-index: 4;
  width: 1.25rem;
  height: 1.25rem;
  background-color: rgba(0, 0, 0, 0.75);
  border-radius: 2000px;
  background-clip: padding-box;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/close_w.svg");
  background-size: 1rem 1rem;
  cursor: pointer;
}
.modal-writePost.modal .modal-body .uploadFile-area .photos-and-videos .file .overlayer, .modal-editPost.modal .modal-body .uploadFile-area .photos-and-videos .file .overlayer {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.65);
  border-radius: 0.5rem;
  background-clip: padding-box;
}
.modal-writePost.modal .modal-body .uploadFile-area .photos-and-videos .file .progress, .modal-editPost.modal .modal-body .uploadFile-area .photos-and-videos .file .progress {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 4rem;
  height: 0.375rem;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 9;
}
.modal-writePost.modal .modal-body .uploadFile-area .photos-and-videos .file .progress .progress-bar, .modal-editPost.modal .modal-body .uploadFile-area .photos-and-videos .file .progress .progress-bar {
  background-color: #FFF;
}
.modal-writePost.modal .modal-body .uploadFile-area .photos-and-videos .file .progress-text, .modal-editPost.modal .modal-body .uploadFile-area .photos-and-videos .file .progress-text {
  position: absolute;
  z-index: 2;
  width: 100%;
  left: 0;
  bottom: 0.5rem;
  text-align: center;
  color: #FFF;
}
.modal-writePost.modal .modal-body .uploadFile-area .photos-and-videos .file .upload-thumb, .modal-editPost.modal .modal-body .uploadFile-area .photos-and-videos .file .upload-thumb {
  padding-bottom: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  border-radius: 0.25rem;
  background-clip: padding-box;
  overflow: hidden;
  cursor: pointer;
}
.modal-writePost.modal .modal-body .uploadFile-area .photos-and-videos .file .upload-thumb.isvideo .overlayer:after, .modal-editPost.modal .modal-body .uploadFile-area .photos-and-videos .file .upload-thumb.isvideo .overlayer:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 2rem;
  height: 2rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/play_video.svg");
  background-size: 2rem 2rem;
}
.modal-writePost.modal .modal-body .uploadFile-area .box-title, .modal-editPost.modal .modal-body .uploadFile-area .box-title {
  margin: 0 -1rem;
}
.modal-writePost.modal .modal-body .uploadFile-area .recommened-products .recommened-product-list, .modal-editPost.modal .modal-body .uploadFile-area .recommened-products .recommened-product-list {
  margin: 1rem 0;
  padding: 0;
}
.modal-writePost.modal .modal-body .uploadFile-area .recommened-products .recommened-product-list ul, .modal-editPost.modal .modal-body .uploadFile-area .recommened-products .recommened-product-list ul {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 50% 50%;
  grid-template-columns: 50% 50%;
}
@media (min-width: 767px) {
  .modal-writePost.modal .modal-body .uploadFile-area .recommened-products .recommened-product-list ul, .modal-editPost.modal .modal-body .uploadFile-area .recommened-products .recommened-product-list ul {
    -ms-grid-columns: 25% 25% 25% 25%;
    grid-template-columns: 25% 25% 25% 25%;
  }
}
.modal-writePost.modal .modal-body .uploadFile-area .recommened-products .recommened-product-list ul li, .modal-editPost.modal .modal-body .uploadFile-area .recommened-products .recommened-product-list ul li {
  margin-bottom: 0.5rem;
  display: -ms-grid;
  display: grid;
  width: auto;
}
.modal-writePost.modal .modal-body .uploadFile-area .recommened-products .recommened-product, .modal-editPost.modal .modal-body .uploadFile-area .recommened-products .recommened-product {
  position: relative;
}
.modal-writePost.modal .modal-body .uploadFile-area .recommened-products .btn-remove, .modal-editPost.modal .modal-body .uploadFile-area .recommened-products .btn-remove {
  position: absolute;
  right: -0.3125rem;
  top: -0.3125rem;
  z-index: 4;
  width: 1.25rem;
  height: 1.25rem;
  background-color: rgba(0, 0, 0, 0.75);
  border-radius: 2000px;
  background-clip: padding-box;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/close_w.svg");
  background-size: 1rem 1rem;
  cursor: pointer;
}
.modal-writePost.modal .modal-footer, .modal-editPost.modal .modal-footer {
  background-color: #FFF;
}
@media (min-width: 767px) {
  .modal-writePost.modal .writePost-view .haeder,
  .modal-writePost.modal .writePost-view .textarea, .modal-editPost.modal .writePost-view .haeder,
  .modal-editPost.modal .writePost-view .textarea {
    padding: 0 0.5rem;
  }
  .modal-writePost.modal .modal-body .textarea textarea, .modal-editPost.modal .modal-body .textarea textarea {
    height: 50vw;
  }
}
@media (min-width: 992px) {
  .modal-writePost.modal .modal-body .textarea textarea, .modal-editPost.modal .modal-body .textarea textarea {
    height: 30vw;
  }
}
@media (min-width: 1200px) {
  .modal-writePost.modal .modal-body .textarea textarea, .modal-editPost.modal .modal-body .textarea textarea {
    height: auto;
  }
}

.modal-removePost .modal-dialog {
  width: 300px;
}

.post-detail-view {
  margin-top: -3.5rem;
  margin-bottom: 5rem;
  background-color: #fff;
  overflow: hidden;
}
.post-detail-view .comment-list li.comment {
  border-bottom: 1px solid #E3E3E3;
}
.post-detail-view .comment-list li.comment:last-child {
  border: none;
}
.post-detail-view .comment-list .comment-header {
  margin-bottom: 0.75rem;
}
.post-detail-view .comment-list .comment-header .user-name:hover {
  cursor: initial;
  text-decoration: none;
}
.post-detail-view .comment-list .comment-header .name {
  margin-left: 0.5rem;
}
.post-detail-view .comment-list .comment-header .time {
  font-size: 0.875rem;
  font-weight: 500;
  color: #818181;
}
.post-detail-view .comment-list .comment-body {
  font-size: 0.9375rem;
  font-weight: normal;
  line-height: 1.5rem;
}
@media (min-width: 767px) {
  .post-detail-view {
    margin-top: 0;
    margin-bottom: 1rem;
    overflow: hidden;
    border-radius: 0.5rem;
    background-clip: padding-box;
  }
}
@media (min-width: 992px) {
  .post-detail-view {
    margin-top: 0.5rem;
  }
}

.comment-textarea, .comment-textarea-bottom-bar {
  padding: 1rem;
  background-color: #fff;
}
.comment-textarea input, .comment-textarea-bottom-bar input {
  padding: 0.5rem 1rem;
  border: none;
  background-color: #F4F4F4;
  border-radius: 2000px;
  background-clip: padding-box;
  width: calc(100% - 42px - 8px - 12px - 64px);
  outline: 0;
}
.comment-textarea button, .comment-textarea-bottom-bar button {
  padding: 0.625rem 1.125rem;
}

.comment-textarea-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 99;
  width: 100%;
  -webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  -ms-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}
.comment-textarea-bottom-bar input {
  width: calc(100% - 12px - 64px);
}

.lg-sub-html {
  display: none;
}

.album-list {
  margin: -0.25rem -0.125rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  overflow: hidden;
}
.album-list .img-wrap, .album-list .img-wrap-locked {
  margin: 0 0.125rem;
  margin-top: 0.25rem;
  padding-top: 25%;
  width: calc(25% - 0.25rem);
  height: auto;
  position: relative;
}
@media (min-width: 767px) {
  .album-list .img-wrap, .album-list .img-wrap-locked {
    padding-top: 20%;
    width: calc(20% - 0.25rem);
  }
}
.album-list .img-wrap.type-is-video::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.album-list .img-wrap .btn-play-video {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 10;
  background-image: url("../images/common/icon_play_video.svg");
  background-repeat: no-repeat;
  background-size: 36px 36px;
  background-position: 50% 50%;
  width: 36px;
  height: 36px;
  border: none;
  background-color: transparent;
  opacity: 0.75;
}
.album-list .img-wrap-locked {
  padding-top: 0;
  cursor: pointer;
}
.album-list .img-wrap-locked .blocked-content-view .blocked-content {
  padding: 38% 0;
  background-image: url("../images/common/icon_lock.svg");
  background-repeat: no-repeat;
  background-size: 40%;
  background-position: 50% 50%;
  opacity: 0.5;
}
.album-list .img-wrap-locked .blocked-content-view .control-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.album-list .img-wrap-locked .blocked-content-view .display-media-num .img-num {
  margin-right: 8px;
  padding-left: 16px;
  background-image: url("../images/common/icon_upload_img.svg");
  background-repeat: no-repeat;
  background-size: 16px 16px;
  background-position: 0 50%;
  font-size: 11px;
  color: #555B5D;
}
.album-list .img-wrap-locked .blocked-content-view .display-media-num .video-num {
  padding-left: 16px;
  background-image: url("../images/common/icon_upload_video.svg");
  background-repeat: no-repeat;
  background-size: 16px 16px;
  background-position: 0 50%;
  font-size: 11px;
  color: #555B5D;
}

#modal-unlocked-media .modal-dialog {
  max-width: 320px;
}
@media (min-width: 767px) {
  #modal-unlocked-media .modal-dialog {
    max-width: 350px;
  }
}
#modal-unlocked-media .blocked-content-view {
  min-width: 180px;
}
#modal-unlocked-media .blocked-content-view .blocked-content {
  padding: 40px 0;
  background-image: url("../images/common/icon_lock.svg");
  background-repeat: no-repeat;
  background-size: 64px 64px;
  background-position: 50% 80%;
  opacity: 0.5;
}
#modal-unlocked-media .blocked-content-view .blocked-area {
  padding: 5% 0;
  background-color: #F0F4F6;
  border-radius: 6px;
  background-clip: padding-box;
}
#modal-unlocked-media .blocked-content-view .display-media-num {
  margin: 0.5rem 0;
  padding-bottom: 0.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
}
#modal-unlocked-media .blocked-content-view .display-media-num .img-num {
  margin-right: 12px;
  padding-left: 20px;
  background-image: url("../images/common/icon_upload_img.svg");
  background-repeat: no-repeat;
  background-size: 18px 18px;
  background-position: 0 50%;
  font-size: 13px;
}
#modal-unlocked-media .blocked-content-view .display-media-num .video-num {
  padding-left: 20px;
  background-image: url("../images/common/icon_upload_video.svg");
  background-repeat: no-repeat;
  background-size: 18px 18px;
  background-position: 0 50%;
  font-size: 13px;
}

.follow-list-view {
  padding: 1rem;
}
.follow-list-view .follow-cate-box {
  margin: 1rem 0;
  padding: 1rem;
  padding-bottom: 0.5rem;
  background-color: #F0F4F6;
  border-radius: 6px;
  background-clip: padding-box;
}
.follow-list-view .follow-cate-box .follow-cate-box-header {
  margin-bottom: 1rem;
  font-size: 18px;
  font-weight: bold;
}
.follow-list-view .follow-cate-box .follow-cate-box-body .follow-item {
  margin-bottom: 1rem;
}
.follow-list-view .follow-cate-box .follow-cate-box-body .follow-item .btn-subscript {
  padding: 0 0.875rem;
  height: 30px;
  line-height: 30px;
}
.follow-list-view .follow-cate-box .follow-cate-box-body .follow-item .btn-subscript.subscripted {
  color: #348CC5;
  border-color: #348CC5;
}
.follow-list-view .follow-cate-box .follow-cate-box-footer {
  padding-top: 0.5rem;
  text-align: center;
  border-top: 1px solid #DBE6EB;
  font-size: 15px;
}
.follow-list-view .follow-cate-box .follow-cate-box-footer .btn-readmore {
  color: #555B5D;
}
.follow-list-view .follow-cate-box .follow-cate-box-footer .btn-readmore:hover, .follow-list-view .follow-cate-box .follow-cate-box-footer .btn-readmore:focus {
  color: #348CC5;
}
.follow-list-view .follow-cate-box .follow-cate-box-footer .btn-readmore .icon-readmore {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/arrow_right.svg");
  background-size: 12px 12px;
}

.alert-sheet-container {
  padding: 1rem;
  position: fixed;
  bottom: 60px;
  right: 0;
  z-index: 9;
  width: 100%;
  max-width: 400px;
}
.alert-sheet-container .alert-sheet {
  padding: 1rem;
  background-color: #27A9D4;
  border-radius: 6px;
  background-clip: padding-box;
  -webkit-box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
  -ms-box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
}
.alert-sheet-container .alert-sheet .alert-sheet-text {
  color: #fff;
  font-size: 0.9375rem;
  line-height: 1.75rem;
}
.alert-sheet-container .alert-sheet .alert-action-btn .btn {
  background-color: #1369A0;
}
@media (min-width: 767px) {
  .alert-sheet-container {
    bottom: 0;
  }
}

.alert-sheet-inside {
  margin: 1.5rem 0;
  margin-left: auto;
  margin-right: auto;
  padding: 1rem;
  border-radius: 6px;
  background-clip: padding-box;
  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  -ms-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.75rem;
}

.modal-system-msg {
  width: auto;
}

.modal.center-modal .modal-dialog {
  min-width: 320px;
  max-width: 90%;
}

.modal-small .modal-dialog {
  width: 20rem;
  max-width: 20rem;
}

.modal .modal-content {
  border-radius: 0;
  background-clip: padding-box;
}
.modal.has-radius-corner .modal-content {
  border-radius: 0.5rem;
  background-clip: padding-box;
}
.modal .modal-header {
  padding: 0.5rem 1rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 0;
  border-radius: 0;
  background-clip: padding-box;
  text-align: center;
}
.modal .modal-header.has-close-btn .modal-title {
  margin-left: 1.5rem;
}
.modal .modal-header.has-border-bottom {
  border-bottom: 1px solid #E3E3E3;
}
.modal .modal-header .modal-title {
  display: inline-block;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  font-size: 1.25rem;
  font-weight: bold;
}
.modal .modal-header .btn-close-modal {
  margin-top: 3px;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/close.svg");
  background-size: 1.25rem 1.25rem;
  width: 1.5rem;
  height: 1.5rem;
  cursor: pointer;
  float: right;
}
.modal .modal-header .btn-close-w-modal {
  margin-top: 3px;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/close_w.svg");
  background-size: 1.25rem 1.25rem;
  width: 1.5rem;
  height: 1.5rem;
  cursor: pointer;
  float: right;
}
.modal .modal-body {
  padding: 0.5rem 1rem;
  padding-bottom: 1rem;
  font-size: 0.9375rem;
  line-height: 1.625rem;
}
.modal .modal-body .modal-text {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.modal .modal-body .scroll-area {
  margin-right: -1rem;
  padding-right: 0.75rem;
  max-height: 60vw;
  overflow-y: auto;
}
@media (min-width: 767px) {
  .modal .modal-body .scroll-area {
    max-height: 35vw;
  }
}
@media (min-width: 992px) {
  .modal .modal-body .scroll-area {
    max-height: 20vw;
  }
}
.modal .modal-body .modal-body--section {
  padding: 0.5rem 1rem;
  border-top: 1px solid #E3E3E3;
}
.modal .modal-body .modal-body--section .label-title {
  font-size: 0.875rem;
  font-weight: 600;
}
.modal .modal-footer {
  border-top: 0;
  text-align: center;
}
.modal .modal-footer .btn-group-col-2 {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 50% 50%;
  grid-template-columns: 50% 50%;
}
.modal .modal-footer .btn-group-col-2 .btn {
  margin: 0 8px;
}
.modal .modal-footer .btn {
  min-width: 100px;
}
.modal .border-bottom {
  margin: 1rem -2.5rem;
  text-align: center;
}

.modal-bottom.modal.fade .modal-dialog {
  -webkit-transform: translate(0, 25%);
          transform: translate(0, 25%);
}
.modal-bottom .modal-dialog {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 100%;
  margin: 0;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
}
.modal-bottom.modal.fade.in {
  overflow: hidden;
}
.modal-bottom.modal.fade.in .modal-dialog {
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
  min-height: 80px;
}

.modal-centered {
  text-align: center;
  padding: 0 !important;
}
.modal-centered:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px;
}
.modal-centered .modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
  -webkit-transform: translate(0, -20%);
  transform: translate(0, -20%);
}

.modal-black .modal-dialog {
  width: 7.5rem;
  -webkit-transition: none;
  transition: none;
}
.modal-black .modal-content {
  background-color: transparent;
  -webkit-box-shadow: none;
  -ms-box-shadow: none;
  box-shadow: none;
  border: none;
  text-align: center;
}
.modal-black .modal-content .modal-body {
  padding-top: 1.25rem;
  border-radius: 0.5rem;
  background-clip: padding-box;
  -webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  -ms-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  color: #FFF;
  background-color: rgba(0, 0, 0, 0.75);
}
.modal-black .modal-content .modal-body i.icon-success {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/modal_xs_success.svg");
  background-size: 2.5rem 2.5rem;
}
.modal-black .modal-content .modal-body i.icon-failed {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/modal_xs_failed.svg");
  background-size: 2.5rem 2.5rem;
}

.alert-sheet-container {
  padding: 1rem;
  position: fixed;
  bottom: 60px;
  right: 0;
  z-index: 9;
  width: 100%;
  max-width: 400px;
}
.alert-sheet-container .alert-sheet {
  padding: 1rem;
  background-color: #27A9D4;
  border-radius: 6px;
  background-clip: padding-box;
  -webkit-box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
  -ms-box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
}
.alert-sheet-container .alert-sheet .alert-sheet-text {
  color: #fff;
  font-size: 0.9375rem;
  line-height: 1.75rem;
}
.alert-sheet-container .alert-sheet .alert-action-btn .btn {
  background-color: #1369A0;
}
@media (min-width: 767px) {
  .alert-sheet-container {
    bottom: 0;
  }
}

.alert-sheet-inside {
  margin: 1.5rem 0;
  margin-left: auto;
  margin-right: auto;
  padding: 1rem;
  border-radius: 6px;
  background-clip: padding-box;
  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  -ms-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.75rem;
}

.dialogue .image-wrapper {
  margin-bottom: 0.5rem;
  padding-top: 100%;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
  border-radius: 6px;
  background-clip: padding-box;
  overflow: hidden;
  max-width: 100%;
  min-height: 180px;
}
.dialogue .image-wrapper img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  min-width: 100%;
  max-width: 100%;
  min-height: 180px;
  -o-object-fit: cover;
     object-fit: cover;
  vertical-align: middle;
}
.dialogue .image-wrapper.type-is-video::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.dialogue .image-wrapper .btn-play-video {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 10;
  background-image: url("../images/common/icon_play_video.svg");
  background-repeat: no-repeat;
  background-size: 36px 36px;
  background-position: 50% 50%;
  width: 36px;
  height: 36px;
  border: none;
  background-color: transparent;
  opacity: 0.75;
}
.dialogue .image-view {
  min-width: 180px;
}
.dialogue .image-view .image-wrapper {
  margin: 2px;
  width: 100%;
}
.dialogue .image-view.row-2 {
  margin: 0 -1px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.dialogue .image-view.row-2 .image-wrapper {
  padding-top: 50%;
  width: 50%;
  min-height: 86px;
}
.dialogue .image-view.row-2 .image-wrapper img {
  min-height: 86px;
}
.dialogue .image-view.row-3 {
  margin: 0 -1px;
  min-width: 180px;
}
.dialogue .image-view.row-3 .top, .dialogue .image-view.row-3 .bottom {
  min-width: 180px;
}
.dialogue .image-view.row-3 .top .image-wrapper {
  padding-top: 50%;
  width: 50%;
  min-height: 86px;
}
.dialogue .image-view.row-3 .top .image-wrapper img {
  min-height: 86px;
}
.dialogue .image-view.row-3 .bottom .image-wrapper {
  padding-top: 50%;
  width: 100%;
  min-height: 176px;
}
.dialogue .image-view.row-3 .bottom .image-wrapper img {
  min-height: 176px;
}
.dialogue .image-wrapper.more-img::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.dialogue .image-wrapper.more-img .num {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 9;
  color: #fff;
  font-size: 1.5rem;
}
.dialogue .blocked-content-view {
  min-width: 180px;
}
.dialogue .blocked-content-view .blocked-content {
  padding: 64px 0;
  background-image: url("../images/common/icon_lock.svg");
  background-repeat: no-repeat;
  background-size: 64px 64px;
  background-position: 50% 50%;
  opacity: 0.5;
}
.dialogue .blocked-content-view .display-media-num {
  margin: 0.5rem 0;
  padding-top: 0.5rem;
  border-top: 1px solid #E4E8EA;
}
.dialogue .blocked-content-view .display-media-num .img-num {
  margin-right: 12px;
  padding-left: 20px;
  background-image: url("../images/common/icon_upload_img.svg");
  background-repeat: no-repeat;
  background-size: 18px 18px;
  background-position: 0 50%;
  font-size: 13px;
}
.dialogue .blocked-content-view .display-media-num .video-num {
  padding-left: 20px;
  background-image: url("../images/common/icon_upload_video.svg");
  background-repeat: no-repeat;
  background-size: 18px 18px;
  background-position: 0 50%;
  font-size: 13px;
}

.user-profile-img {
  width: 2.625rem;
  height: 2.625rem;
  border-radius: 2000px;
  background-clip: padding-box;
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  background-color: #FFF;
}

.user-profile-img-sm {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 18px;
  background-clip: padding-box;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.5);
}

.user-profile-img-64 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 32px;
  background-clip: padding-box;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.5);
}

.user-profile-img-lg {
  width: 96px;
  height: 96px;
  border-radius: 48px;
  background-clip: padding-box;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.5);
}

.user-status {
  position: absolute;
  bottom: 0;
  right: -2px;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  background-clip: padding-box;
  border: 1px solid #fff;
  background-color: #C5C5C5;
}
.user-status.active {
  background-color: #20B794;
}

.user-data.no-margin .user-name, .user-data.no-margin .user-id {
  margin-left: 0;
}
.user-data .user-name {
  margin-left: 0.5rem;
  margin-bottom: 0.25rem;
  font-size: 1rem;
  font-weight: bold;
  font-family: "Poppins";
  line-height: 1;
  color: #333333;
}
.user-data .user-name.authed:after {
  position: relative;
  top: 1px;
  margin-left: 4px;
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/label_authed_user.svg");
  background-size: 14px 14px;
}
.user-data .user-id {
  margin-left: 0.5rem;
  font-size: 13px;
  font-weight: normal;
  line-height: 1;
  color: #9C9C9C;
}
.user-data .relationship {
  margin-left: 0.5rem;
  font-size: 14px;
  font-weight: normal;
  line-height: 1;
  color: #555B5D;
}

.user-name {
  color: #333333;
  font-weight: bold;
  font-family: "Poppins";
}
.user-name:hover {
  color: #333333;
}

.recommened-product-list--title {
  margin-top: 1rem;
  padding: 0 1rem;
  font-size: 0.75rem;
  line-height: 2.25rem;
  height: 2.25rem;
  color: #818181;
  background-color: #F4F4F4;
}

.recommened-product-list {
  margin-top: 0.75rem;
  padding: 0 1rem;
  padding-right: 0;
}
.recommened-product-list ul {
  padding-bottom: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  overflow-y: no-scroll;
  width: 100%;
}
.recommened-product-list ul .slick-list {
  padding-right: 25%;
}
@media (min-width: 767px) {
  .recommened-product-list ul .slick-list {
    padding-right: 15%;
  }
}
.recommened-product-list ul .recommened-product {
  margin-right: 0.5rem;
  width: 7.5rem !important;
  border: 1px solid #E3E3E3;
  border-radius: 8px;
  background-clip: padding-box;
}
.recommened-product-list ul .recommened-product .product-img {
  padding-bottom: 100%;
  width: 100%;
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
  background-clip: padding-box;
}
.recommened-product-list ul .recommened-product .product-img img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.recommened-product-list ul .recommened-product .product-name {
  padding: 0 0.5rem;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recommened-product-list ul .recommened-product .product-price {
  margin-bottom: 0.5rem;
  padding: 0 0.5rem;
}
.recommened-product-list ul .recommened-product .product-price .sale-price {
  font-size: 1.125rem;
  color: #FD2E2E;
  font-weight: 600;
  font-family: Lato !important;
}
.recommened-product-list ul .recommened-product .product-price .original-price {
  margin-left: 0.25rem;
  font-size: 0.75rem;
  text-decoration: line-through;
  color: #333333;
  font-weight: normal;
  font-family: Lato !important;
}
@media (min-width: 767px) {
  .recommened-product-list ul .recommened-product {
    margin-right: 0.5rem;
    width: 30%;
  }
  .recommened-product-list .slick-prev {
    top: 40%;
    left: -12px;
  }
  .recommened-product-list .slick-next {
    top: 40%;
    right: -12px;
  }
  .recommened-product-list .slick-next, .recommened-product-list .slick-prev {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 2000px;
    background-clip: padding-box;
    -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
    -ms-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
    background-color: rgba(255, 255, 255, 0.75);
    z-index: 99;
  }
  .recommened-product-list .slick-next:hover, .recommened-product-list .slick-next:focus, .recommened-product-list .slick-prev:hover, .recommened-product-list .slick-prev:focus {
    background-color: #fff;
  }
  .recommened-product-list .slick-prev:before {
    content: "";
    display: inline-block;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    background-position: 50% 50%;
    background-image: url("../images/common/slider_prev.svg");
    background-size: 0.75rem 0.75rem;
    width: 0.75rem;
    height: 0.75rem;
  }
  .recommened-product-list .slick-next:before {
    content: "";
    display: inline-block;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    background-position: 50% 50%;
    background-image: url("../images/common/slider_next.svg");
    background-size: 0.75rem 0.75rem;
    width: 0.75rem;
    height: 0.75rem;
  }
}

.checkout-step-bar {
  position: sticky;
  top: 4rem;
  left: 0;
  z-index: 9;
  width: 100%;
}
@media (min-width: 767px) {
  .checkout-step-bar {
    top: 4rem;
  }
}

.shoppingCart-iframe {
  padding-top: 3.5rem;
  height: 100vh;
  overflow: hidden;
}
.shoppingCart-iframe iframe {
  width: 100%;
  height: calc(100vh - 3.5rem);
  overflow-y: auto;
}
.shoppingCart-iframe .empty-block {
  padding: 40% 1rem;
  text-align: center;
}
.shoppingCart-iframe .empty-block .icon-product-empty {
  margin-bottom: 0.5rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/empty/collection_product_empty.svg");
  background-size: 5rem 5rem;
  width: 5rem;
  height: 5rem;
}
.shoppingCart-iframe .empty-block p {
  margin: 0 auto;
  width: 130px;
  color: #818181;
  font-size: 0.8125rem;
}
@media (min-width: 767px) {
  .shoppingCart-iframe {
    padding-top: 0;
    height: calc(100vh - 4.125rem);
  }
  .shoppingCart-iframe iframe {
    height: calc(100vh - 4.125rem);
  }
}

.shoppingCart-delivery-list {
  margin-top: 0;
}
.shoppingCart-delivery-list .badge {
  margin-left: 0.25rem;
  position: relative;
  top: inherit;
  left: inherit;
}

.shoppingCart-list-view {
  margin-top: 0.5rem;
  padding-bottom: 3.5rem;
}
.shoppingCart-list-view.empty {
  padding-top: 20%;
  text-align: center;
}
.shoppingCart-list-view.empty .icon-shoppingCart-empty {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/shoppingCart_empty.svg");
  background-size: 80px 80px;
  width: 80px;
  height: 80px;
}
.shoppingCart-list-view.empty p {
  margin: 0.5rem auto;
  max-width: 120px;
}
.shoppingCart-list-view .tabmenu {
  display: none;
}
@media (min-width: 767px) {
  .shoppingCart-list-view .tabmenu {
    display: block;
  }
  .shoppingCart-list-view .tabmenu ul.nav-tabs {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: start;
  }
}
.shoppingCart-list-view .shoppingCart-list-view--header {
  margin-top: 0.5rem;
  margin-bottom: 0.0625rem;
  padding: 0.25rem 0.5rem;
  background-color: #FFF;
}
.shoppingCart-list-view .shoppingCart-list-view--body ul.product-list li {
  padding: 0.75rem 1rem;
  background-color: #FFF;
  border-bottom: 1px solid #E3E3E3;
}
.shoppingCart-list-view .product-list {
  margin-bottom: 0.5rem;
}
.shoppingCart-list-view .product-thumb-view .product-img {
  margin-top: 0.25rem;
  margin-right: 0.75rem;
  width: 10rem;
  position: relative;
  padding-bottom: 10rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  -ms-flex-item-align: start;
      align-self: flex-start;
}
.shoppingCart-list-view .product-thumb-view .product-text {
  width: calc(100% - 5rem);
  text-align: left;
}
.shoppingCart-list-view .product-thumb-view .product-text .promo-slogan {
  margin-bottom: 0.25rem;
  width: 100%;
  font-size: 0.875rem;
  color: #818181;
  text-align: left;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-height: 1.5rem;
  height: 1.5rem;
}
.shoppingCart-list-view .product-thumb-view .product-text .product-name {
  display: inline-block;
  font-size: 1rem;
  font-weight: 700;
  text-align: left;
}
.shoppingCart-list-view .product-thumb-view .product-text .product-name span {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.25rem;
  height: 2.5rem;
}
.shoppingCart-list-view .product-thumb-view .product-text .product-name:hover {
  color: #9d9d82;
}
.shoppingCart-list-view .product-thumb-view .product-text .spec-list {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.5;
}
.shoppingCart-list-view .product-thumb-view .product-text .spec-list li {
  padding: 0;
  border: none;
}
.shoppingCart-list-view .product-thumb-view .product-text .product-price {
  margin-top: 0.25rem;
  text-align: left;
}
.shoppingCart-list-view .product-thumb-view .product-text .product-price .sale-price {
  font-size: 1rem;
  color: #FD2E2E;
  font-weight: 600;
}
.shoppingCart-list-view .product-thumb-view .product-text .original-price {
  margin-left: 0.5rem;
  font-size: 0.75rem;
  text-decoration: line-through;
  color: #333333;
  font-weight: normal;
}
.shoppingCart-list-view .product-thumb-view .product-text .btn-sm {
  font-size: 0.8125rem;
}
.shoppingCart-list-view .counter-block .counter-el button {
  width: 1.5rem;
  height: 1.5rem;
  color: #333333;
  font-size: 1.125rem;
  line-height: 1.125rem;
  font-weight: bold;
  background-color: #F4F4F4;
}
.shoppingCart-list-view .counter-block .counter-el input {
  max-width: 50px;
  border: none;
  text-align: center;
  outline: 0;
  background-color: #fff;
  -moz-appearance: none;
  -webkit-appearance: none;
  -ms-progress-appearance: none;
}
.shoppingCart-list-view .btn-remove {
  padding-left: 1.25rem;
  background-image: url("../images/common/remove.svg");
  background-repeat: no-repeat;
  background-position: 0 50%;
  font-size: 0.875rem;
}
.shoppingCart-list-view .select-store {
  margin: 0 -0.75rem !important;
}
.shoppingCart-list-view .select-store .left {
  margin-right: 0.9375rem;
}
.shoppingCart-list-view .select-store .right {
  width: 4.875rem;
}
.shoppingCart-list-view .select-store .btn-addTo-store-list {
  margin-bottom: 0.25rem;
}
.shoppingCart-list-view .deliveryMethod-bk {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.shoppingCart-list-view .deliveryMethod-bk .deliveryMethod-list {
  display: -ms-grid;
  display: grid;
}
.shoppingCart-list-view .deliveryMethod-bk .deliveryMethod-list li {
  margin: 0.5rem 0;
}
.shoppingCart-list-view .deliveryMethod-bk .deliveryMethod-list .notice-text.has-pd-left {
  padding-left: 1.75rem;
}
@media (min-width: 992px) {
  .shoppingCart-list-view .deliveryMethod-bk .deliveryMethod-list li {
    margin-right: 1.875rem;
  }
  .shoppingCart-list-view .deliveryMethod-bk .deliveryMethod-list li .notice-text.has-pd-left {
    padding-left: 1.5rem;
  }
}
.shoppingCart-list-view .deliveryMethod-bk .options-list.select-store {
  margin-top: 0.25rem;
  margin-left: 0.625rem;
  background-color: #FFF;
}
.shoppingCart-list-view .deliveryMethod-bk .store-list {
  margin: 0 -0.25rem;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 50% 50%;
  grid-template-columns: 50% 50%;
}
.shoppingCart-list-view .deliveryMethod-bk .store-list li {
  margin: 0;
}
.shoppingCart-list-view .deliveryMethod-bk .store-list .store {
  margin: 0.25rem 0.25rem;
  padding: 1rem 1rem;
  position: relative;
  border: 1px solid #E3E3E3;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 1rem;
  font-weight: 500;
}
@media (min-width: 767px) {
  .shoppingCart-list-view .deliveryMethod-bk .store-list .store {
    padding: 1rem;
  }
}
.shoppingCart-list-view .deliveryMethod-bk .store-list .store.unselected {
  background-color: #F4F4F4;
  opacity: 0.5;
}
.shoppingCart-list-view .deliveryMethod-bk .store-list .store.selected:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0.25rem;
  height: 100%;
  background-color: #9d9d82;
}
.shoppingCart-list-view .deliveryMethod-bk i.icon-arrow-right {
  margin-left: 0.25rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/arrow_right_grey.svg");
  background-size: 0.875rem 0.875rem;
  width: 0.875rem;
  height: 0.875rem;
}
.shoppingCart-list-view .deliveryMethod-bk .delivery-price {
  font-size: 0.9375rem;
}
.shoppingCart-list-view .deliveryMethod-bk .btn-select-store {
  margin: 0.5rem 0;
}
.shoppingCart-list-view .deliveryMethod-bk .store-location {
  margin-top: 0.25rem;
  padding: 1rem 1rem;
  border: 1px solid #E3E3E3;
}
.shoppingCart-list-view .deliveryMethod-bk .store-location .store-name {
  margin-bottom: 0.25rem;
  font-size: 0.9375rem;
  font-weight: bold;
}
.shoppingCart-list-view .deliveryMethod-bk .store-location .store-address {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #818181;
}
.shoppingCart-list-view .deliveryMethod-bk .btn-addTo-default {
  padding: 0.5rem 1.5rem;
}
.shoppingCart-list-view .select-store:after {
  display: none;
}
.shoppingCart-list-view .selected-store .store-name {
  margin-bottom: 0.25rem;
  font-size: 0.9375rem;
  font-weight: bold;
}
.shoppingCart-list-view .selected-store .store-address {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #818181;
}
.shoppingCart-list-view .icon-menu {
  margin-right: 0.25rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/contact_menu.svg");
  background-size: 0.875rem 0.875rem;
  width: 0.875rem;
  height: 0.875rem;
}
.shoppingCart-list-view .options-list {
  margin-top: 0.875rem;
  margin-left: 1.5rem;
  padding: 0.5rem 1rem;
  display: none;
  position: relative;
  background-color: #fdf8eb;
}
.shoppingCart-list-view .options-list:after {
  content: "";
  position: absolute;
  top: -0.5rem;
  left: 0.5rem;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 8px 8px 8px;
  border-color: transparent transparent #fdf8eb transparent;
}
.shoppingCart-list-view .options-list .input-group, .shoppingCart-list-view .options-list input {
  background-color: #FFF;
}
.shoppingCart-list-view .options-list .address {
  padding-left: 1.5625rem;
  font-size: 0.8125rem;
  background-color: transparent;
}
.shoppingCart-list-view .options-list .notice-text {
  font-size: 0.875rem;
  line-height: 1.625rem;
}
.shoppingCart-list-view .select-store-group {
  padding: 1rem;
  background-color: #fffbe6;
  border-radius: 0.5rem;
  background-clip: padding-box;
}
.shoppingCart-list-view .select-store-group .store-name {
  margin: 1rem 0;
}
@media (min-width: 767px) {
  .shoppingCart-list-view .select-store-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .shoppingCart-list-view .select-store-group .btn-search-store-id {
    margin-left: auto;
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
}
.shoppingCart-list-view .receiverInfo-bk {
  margin-bottom: 0.5rem;
}
.shoppingCart-list-view .receiverInfo-bk .write-new-adress {
  padding: 0;
}
.shoppingCart-list-view .receiverInfo-bk .btn-add-receiver {
  border: 1px solid #a9a9a9;
}
.shoppingCart-list-view .receiverInfo-bk .btn-addTo-default {
  padding: 0.5rem 1rem;
}
.shoppingCart-list-view .receiverInfo-bk .btn-search-store-id {
  padding: 0;
  width: 6.25rem;
  height: 2.625rem;
  line-height: 2.625rem;
}

@media (min-width: 767px) {
  .shoppingCart-list-view {
    margin-top: 1.25rem;
  }
  .shoppingCart-list-view.empty {
    padding-top: 20%;
  }
  .shoppingCart-list-view .product-list .product-thumb-view .product-img {
    margin-right: 1rem;
    padding-bottom: 10rem;
    width: 8rem;
  }
  .shoppingCart-list-view .product-list .product-thumb-view .product-name {
    margin-bottom: 0.5rem !important;
  }
  .shoppingCart-list-view .shoppingCart-list-view--header {
    margin-top: 0;
    display: none;
  }
  .shoppingCart-list-view .shoppingCart-list-view--body ul.product-list li {
    padding: 1rem 1.25rem;
  }
  .shoppingCart-list-view .product-list .product-thumb-view .padUpToRow {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .shoppingCart-list-view .product-list .product-thumb-view .padUpToRow .control-block {
    margin-left: auto;
  }
  .shoppingCart-bottom-bar {
    display: none;
  }
}
@media (min-width: 1600px) {
  .shoppingCart-list-view {
    margin-top: 1.5rem;
  }
  .shoppingCart-list-view.empty {
    padding-top: 12%;
  }
}
.deliveryCost-bk {
  padding: 0.875rem 1rem;
  background-color: #FFF;
  font-size: 0.9375rem;
}
@media (min-width: 767px) {
  .deliveryCost-bk {
    padding: 1rem 1.25rem;
  }
}

.events-bk {
  margin-bottom: 1rem;
}
.events-bk .event-list ul li {
  padding: 0.75rem 1rem;
  background-color: #FFF;
  border-bottom: 1px solid #E3E3E3;
}
@media (min-width: 767px) {
  .events-bk .event-list ul li {
    padding: 1rem 1.25rem;
  }
}
.events-bk .event-list button.btn-remove-onlyIcon {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/remove.svg");
  background-size: 16px 16px;
  width: 1.875rem;
  height: 1.875rem;
}
@media (min-width: 767px) {
  .events-bk {
    margin-top: 0;
  }
}

.checkoutDetail-bk {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.checkoutDetail-bk .checkout-detail-list ul {
  padding: 0.25rem 0;
  background-color: #FFF;
}
.checkoutDetail-bk .checkout-detail-list li {
  padding: 0.25rem 1rem;
  font-size: 0.9375rem;
  border-bottom: 0;
}
@media (min-width: 767px) {
  .checkoutDetail-bk .checkout-detail-list li {
    padding: 0.25rem 1.25rem;
  }
}
.checkoutDetail-bk .checkout-detail-list li.calc-total {
  padding: 0.25rem 1rem;
  border-top: none;
}
@media (min-width: 767px) {
  .checkoutDetail-bk .checkout-detail-list li.calc-total {
    padding: 0.25rem 1.25rem;
  }
}
.checkoutDetail-bk .checkout-detail-list li.calc-total .total-price {
  font-size: 1.125rem;
  font-weight: 700;
}
@media (min-width: 767px) {
  .checkoutDetail-bk {
    margin-top: 0;
  }
}

.shoppingCart-bottom-bar {
  padding-left: 1rem;
  position: fixed;
  bottom: calc(0rem + env(safe-area-inset-bottom));
  left: 0;
  width: 100%;
  z-index: 999;
  background-color: #FFF;
  -webkit-box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.15);
  -ms-box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.15);
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.15);
}
.shoppingCart-bottom-bar .calc-money .price {
  margin-left: 0.5rem;
  font-size: 1.25rem;
  font-weight: 700;
}
.shoppingCart-bottom-bar .btn-goCheckout {
  width: 8.75rem;
  height: 3.5rem;
  line-height: 3.5rem;
  font-size: 1rem;
  text-align: center;
}

.shoppingCart-control-area {
  padding: 1rem 1.25rem;
  background-color: #FFF;
}

#modal-coupon .modal-dialog {
  width: 90%;
  max-width: 480px;
  max-width: 30rem;
}
#modal-coupon .modal-body {
  padding: 0;
}
#modal-coupon .coupon-list {
  max-height: 60vh;
  overflow-y: auto;
}
#modal-coupon .coupon-list .coupon {
  border-bottom: 4px solid #E3E3E3;
}
#modal-coupon .coupon-list .coupon .label-radioInput {
  display: block;
}
#modal-coupon .coupon-list .coupon-header {
  padding: 0.5rem 1rem;
  border-top: 1px solid #E3E3E3;
  border-bottom: 1px solid #E3E3E3;
}
#modal-coupon .coupon-list .coupon-header .coupon-name {
  font-size: 1rem;
}
#modal-coupon .coupon-list .coupon-body {
  padding: 0.5rem 1rem;
}
#modal-coupon .modal-footer {
  border-top: 1px solid #E3E3E3;
}

#modal-bonus .modal-dialog {
  width: 90%;
  max-width: 480px;
  max-width: 30rem;
}
#modal-bonus .modal-content {
  max-width: 400px;
}
#modal-bonus .bonus-input {
  margin: 1rem 0;
  font-size: 1.125rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
#modal-bonus .bonus-input input {
  font-size: 1.125rem;
}

.tabmenu li .badge {
  position: relative;
  top: -2px;
}

#modal-setTo-default-store .modal-dialog {
  width: 90%;
  max-width: 480px;
  max-width: 30rem;
}
#modal-setTo-default-store .store-location {
  margin-top: 0.25rem;
  padding: 0.5rem 1rem;
  border: 1px solid #E3E3E3;
}
#modal-setTo-default-store .store-location .store-name {
  margin-bottom: 0.25rem;
  font-size: 0.9375rem;
  font-weight: bold;
}
#modal-setTo-default-store .store-location .store-address {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #818181;
}

.store-01 {
  margin-right: 0.25rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/store/711@2x.png");
  background-size: 2rem 2rem;
  width: 2rem;
  height: 2rem;
}

.store-02 {
  margin-right: 0.25rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/store/familymart.svg");
  background-size: 2rem 2rem;
  width: 2rem;
  height: 2rem;
}

.store-03 {
  margin-right: 0.25rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/store/hilife@2x.png");
  background-size: 2rem 2rem;
  width: 2rem;
  height: 2rem;
}

.store-04 {
  margin-right: 0.25rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/store/okmart@2x.png");
  background-size: 2rem 2rem;
  width: 2rem;
  height: 2rem;
}

.receiverInfo-bk.inside {
  margin-top: 1rem;
  padding: 0;
  border: 1px solid #E3E3E3;
  border-radius: 0.5rem;
  background-clip: padding-box;
  overflow: hidden;
}
.receiverInfo-bk.inside .box-title {
  margin-top: 1rem;
  font-weight: 500;
  height: 1.5rem;
  line-height: 1.5rem;
  color: #333333;
  background-color: #fff;
}
.receiverInfo-bk.inside input {
  background-color: #F4F4F4;
}

.shoppingCart-dropdown {
  margin: 0 0 0;
  padding: 0;
  width: 360px;
  right: 0;
  left: inherit;
  border: none;
  overflow: hidden;
  border-radius: 0.5rem;
  background-clip: padding-box;
  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  -ms-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}
.shoppingCart-dropdown .empty-block {
  padding: 4rem 1rem;
  text-align: center;
}
.shoppingCart-dropdown .empty-block .icon-product-empty {
  margin-bottom: 0.5rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/empty/collection_product_empty.svg");
  background-size: 5rem 5rem;
  width: 5rem;
  height: 5rem;
}
.shoppingCart-dropdown .empty-block p {
  margin: 0 auto;
  width: 130px;
  color: #818181;
  font-size: 0.8125rem;
}
.shoppingCart-dropdown .calcToCheckout {
  padding: 0.75rem 1rem;
  border-top: 1px solid #E3E3E3;
  -webkit-box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.15);
  -ms-box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.15);
  box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.15);
}
.shoppingCart-dropdown .calcToCheckout .total-money {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.shoppingCart-dropdown .calcToCheckout .total-money .num {
  margin-left: 4px;
  font-size: 1.25rem;
}
.shoppingCart-dropdown .calcToCheckout .btn-goCheckout {
  width: 120px;
}
.shoppingCart-dropdown ul {
  max-height: 50vh;
  overflow-y: auto;
}
.shoppingCart-dropdown ul > li {
  padding: 0.75rem 1rem;
  background-color: #FFF;
  border-bottom: 1px solid #E3E3E3;
}
.shoppingCart-dropdown ul > li:last-child {
  border-bottom: 0;
}
.shoppingCart-dropdown .product-thumb-view .product-img {
  margin-right: 1rem;
  width: 6rem;
  position: relative;
  padding-bottom: 32%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
}
.shoppingCart-dropdown .product-thumb-view .product-text {
  width: calc(100% - 5rem);
  text-align: left;
}
.shoppingCart-dropdown .product-thumb-view .product-text .promo-slogan {
  margin-bottom: 0.25rem;
  width: 100%;
  font-size: 0.875rem;
  color: #818181;
  text-align: left;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-height: 1.5rem;
  height: 1.5rem;
}
.shoppingCart-dropdown .product-thumb-view .product-text .product-name {
  font-size: 0.875rem;
  font-weight: 700;
  text-align: left;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-height: 1.25rem;
  height: 1.25rem;
}
.shoppingCart-dropdown .product-thumb-view .product-text .product-price {
  margin-top: 0.25rem;
  text-align: left;
}
.shoppingCart-dropdown .product-thumb-view .product-text .product-price .sale-price {
  font-size: 1.125rem;
  color: #FD2E2E;
  font-weight: 600;
}
.shoppingCart-dropdown .product-thumb-view .product-text .original-price {
  margin-left: 0.5rem;
  font-size: 0.75rem;
  text-decoration: line-through;
  color: #333333;
  font-weight: normal;
}
.shoppingCart-dropdown .product-thumb-view .product-text .btn-sm {
  margin-right: 0.125rem;
  padding: 0.125rem 0.375rem;
  font-size: 13px;
}
.shoppingCart-dropdown .counter-block .counter-el button {
  width: 1.5rem;
  height: 1.5rem;
  color: #333333;
  font-size: 1.125rem;
  line-height: 1.125rem;
  font-weight: bold;
  background-color: #F4F4F4;
}
.shoppingCart-dropdown .counter-block .counter-el input {
  max-width: 50px;
  border: none;
  text-align: center;
  outline: 0;
}
.shoppingCart-dropdown .btn-remove {
  padding-left: 1.25rem;
  background-image: url("../images/common/remove.svg");
  background-repeat: no-repeat;
  background-position: 0 50%;
  font-size: 0.875rem;
}

.additional-parchase-list, .freebie-list {
  margin-bottom: 0.5rem;
}
.additional-parchase-list .product-thumb-view, .freebie-list .product-thumb-view {
  margin-bottom: 0;
}
.additional-parchase-list .product-thumb-view .product-img, .freebie-list .product-thumb-view .product-img {
  margin-top: 0;
  margin-right: 0.75rem;
  width: 5rem;
  position: relative;
  padding-bottom: 28%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  -ms-flex-item-align: start;
      align-self: flex-start;
}
.additional-parchase-list .product-thumb-view .product-text, .freebie-list .product-thumb-view .product-text {
  width: calc(100% - 5rem);
  text-align: left;
}
.additional-parchase-list .product-thumb-view .product-text .promo-slogan, .freebie-list .product-thumb-view .product-text .promo-slogan {
  margin-bottom: 0.25rem;
  width: 100%;
  font-size: 0.875rem;
  color: #818181;
  text-align: left;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-height: 1.5rem;
  height: 1.5rem;
}
.additional-parchase-list .product-thumb-view .product-text .product-name, .freebie-list .product-thumb-view .product-text .product-name {
  display: inline-block;
  font-size: 1rem;
  font-weight: 700;
  text-align: left;
}
.additional-parchase-list .product-thumb-view .product-text .product-name span, .freebie-list .product-thumb-view .product-text .product-name span {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.25rem;
  height: 2.75rem;
}
.additional-parchase-list .product-thumb-view .product-text .product-name:hover, .freebie-list .product-thumb-view .product-text .product-name:hover {
  color: #9d9d82;
}
.additional-parchase-list .product-thumb-view .product-text .product-price, .freebie-list .product-thumb-view .product-text .product-price {
  margin-top: 0;
  margin-bottom: 0.25rem;
  text-align: left;
}
.additional-parchase-list .product-thumb-view .product-text .product-price .sale-price, .freebie-list .product-thumb-view .product-text .product-price .sale-price {
  font-size: 1rem;
  color: #FD2E2E;
  font-weight: 600;
}
.additional-parchase-list .product-thumb-view .product-text .original-price, .freebie-list .product-thumb-view .product-text .original-price {
  margin-left: 0.5rem;
  font-size: 0.75rem;
  text-decoration: line-through;
  color: #333333;
  font-weight: normal;
}
.additional-parchase-list .product-thumb-view .product-text .btn-sm, .freebie-list .product-thumb-view .product-text .btn-sm {
  font-size: 13px;
  height: 1.5rem;
  line-height: 1.35rem;
}
.additional-parchase-list .counter-block .counter-el button, .freebie-list .counter-block .counter-el button {
  width: 1.5rem;
  height: 1.5rem;
  color: #333333;
  font-size: 1.125rem;
  line-height: 1.125rem;
  font-weight: bold;
  background-color: #F4F4F4;
}
.additional-parchase-list .counter-block .counter-el input, .freebie-list .counter-block .counter-el input {
  max-width: 50px;
  border: none;
  text-align: center;
  outline: 0;
}
.additional-parchase-list .control-block, .freebie-list .control-block {
  width: calc(100% - 5rem - 1rem);
}
@media (min-width: 767px) {
  .additional-parchase-list, .freebie-list {
    margin-top: 0;
  }
  .additional-parchase-list .control-block, .freebie-list .control-block {
    width: calc(100% - 8rem - 1rem);
  }
}

.additional-parchase-list .control-block {
  margin-top: 0.5rem;
  width: 100%;
}

.additional-parchase-bk.vertical {
  background-color: #fff;
}
.additional-parchase-bk.vertical .additional-parchase-list {
  padding: 0.75rem;
}
@media (min-width: 767px) {
  .additional-parchase-bk.vertical .additional-parchase-list {
    padding: 1rem;
  }
}

.additional-parchase-slider .slick-list {
  padding-right: 20%;
}
@media (min-width: 767px) {
  .additional-parchase-slider .slick-list {
    padding-right: 0;
  }
}
.additional-parchase-slider .slick-prevs {
  left: -12px;
}
.additional-parchase-slider .slick-next {
  right: -12px;
}
.additional-parchase-slider .slick-disabled {
  opacity: 0.75;
}
.additional-parchase-slider .slick-next, .additional-parchase-slider .slick-prev {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 2000px;
  background-clip: padding-box;
  -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
  -ms-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
  background-color: #fff;
  z-index: 99;
}
.additional-parchase-slider .slick-next:hover, .additional-parchase-slider .slick-next:focus, .additional-parchase-slider .slick-prev:hover, .additional-parchase-slider .slick-prev:focus {
  background-color: #fff;
}
.additional-parchase-slider .slick-prev:before {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/slider_prev.svg");
  background-size: 0.75rem 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
}
.additional-parchase-slider .slick-next:before {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/slider_next.svg");
  background-size: 0.75rem 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
}

.add-product-v {
  margin: 0.5rem 0.25rem;
  padding: 0 !important;
  position: relative;
  background-color: #FFF;
  -webkit-transition: 0.3s box-shadow ease-in;
  -webkit-transition: 0.3s -webkit-box-shadow ease-in;
  transition: 0.3s -webkit-box-shadow ease-in;
  transition: 0.3s box-shadow ease-in;
  transition: 0.3s box-shadow ease-in, 0.3s -webkit-box-shadow ease-in;
  list-style: none;
  border: 1px solid #E3E3E3;
  border-radius: 0.5rem;
  background-clip: padding-box;
  overflow: hidden;
}
@media (min-width: 992px) {
  .add-product-v {
    margin: 1rem 0.5rem;
  }
}
.add-product-v .product-name, .add-product-v .product-price, .add-product-v .control-area {
  margin: 0.5rem 0;
  padding: 0 0.5rem;
}
.add-product-v .product-img {
  padding-bottom: 125%;
  display: block;
  position: relative;
  overflow: hidden;
}
.add-product-v .product-img img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.add-product-v .product-name {
  font-size: 14px;
  font-weight: 500;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.125rem;
  height: 2.25rem;
}
.add-product-v .product-price {
  margin-bottom: 0.5rem;
}
.add-product-v .product-price .sale-price {
  font-size: 1.125rem;
  color: #9d9d82;
  font-weight: 600;
}
.add-product-v .product-price .original-price {
  margin-left: 0.25rem;
  font-size: 0.75rem;
  text-decoration: line-through;
  color: #333333;
  font-weight: normal;
}

.checkout-step-bar {
  background-color: #f5f5f5;
  border-top: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
}
.checkout-step-bar .container-r {
  margin: 0 auto;
}
.nav-progress {
  display: table;
  overflow: hidden;
  margin: 0;
  width: 100%;
  height: 38px;
  background-color: #f5f5f5;
}
.nav-progress > div {
  position: relative;
  display: table-cell;
  padding: 8px 0;
  color: #333333;
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.25rem;
  color: #000;
}
.nav-progress > div:nth-child(1) {
  padding-left: 4%;
  width: 30%;
}
.nav-progress > div:nth-child(2) {
  padding-left: 8%;
  width: 38%;
}
@media (min-width: 767px) {
  .nav-progress > div:nth-child(2) {
    padding-left: 4%;
  }
}
@media (min-width: 992px) {
  .nav-progress > div:nth-child(2) {
    padding-left: 0;
  }
}
.nav-progress > div:nth-child(3) {
  padding-left: 4%;
}
.nav-progress > div.complete {
  background-color: #E3E3E3;
  color: #FFF;
}
.nav-progress > div.complete .arrow {
  border: 1px solid #dddddd;
  background: #f5f5f5;
}
.nav-progress > div.active {
  color: #9d9d82;
}
.nav-progress > div.active .step-num {
  color: #9d9d82;
  font-weight: bold;
}
.nav-progress > div .step-num {
  margin-right: 4px;
  display: inline-block;
  width: 10px;
  height: 20px;
  line-height: 20px;
  border-radius: 50%;
  background-clip: padding-box;
  font-family: "Sawarabi Gothic";
  text-align: center;
}

.arrow-wrapper {
  position: absolute;
  top: 0px;
  right: 0px;
}
.arrow-wrapper .arrow-cover {
  position: absolute;
  overflow: hidden;
  width: 28px;
  height: 40px;
}
.arrow-wrapper .arrow-cover .arrow {
  position: absolute;
  left: -25px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border: 1px solid #dddddd;
  background: #f5f5f5;
  border-radius: 1px;
  background-clip: padding-box;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.checkout-view {
  margin-top: 0.5rem;
  padding-bottom: 3.5rem;
}
.checkout-view .label-radioInput .design {
  width: 1.25rem;
  height: 1.25rem;
}
.checkout-view .options-list {
  margin-top: 0.875rem;
  margin-left: 1.5rem;
  padding: 0.5rem 1rem;
  display: none;
  position: relative;
  background-color: #fdf8eb;
}
.checkout-view .options-list:after {
  content: "";
  position: absolute;
  top: -0.5rem;
  left: 0.5rem;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 8px 8px 8px;
  border-color: transparent transparent #fdf8eb transparent;
}
.checkout-view .options-list .input-group, .checkout-view .options-list input, .checkout-view .options-list select {
  background-color: #FFF;
}
.checkout-view .options-list .checkbox input:checked + .design {
  background-color: #237d26;
}
.checkout-view .options-list .checkbox .design {
  border-color: #7a7a7a;
}
.checkout-view .options-list .address {
  padding-left: 1.5625rem;
  font-size: 0.8125rem;
  background-color: transparent;
}
.checkout-view .options-list .notice-text {
  font-size: 0.875rem;
  line-height: 1.625rem;
}
.checkout-view .events-bk {
  margin-bottom: 0.5rem;
}
.checkout-view .deliveryMethod-bk {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.checkout-view .deliveryMethod-bk .deliveryMethod-list {
  display: -ms-grid;
  display: grid;
}
.checkout-view .deliveryMethod-bk .deliveryMethod-list li {
  margin: 0.5rem 0;
}
.checkout-view .deliveryMethod-bk .options-list.select-store {
  margin-top: 0.25rem;
  margin-left: 0.625rem;
  background-color: #FFF;
}
.checkout-view .deliveryMethod-bk .store-list {
  margin: 0 -0.25rem;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 50% 50%;
  grid-template-columns: 50% 50%;
}
.checkout-view .deliveryMethod-bk .store-list li {
  margin: 0;
}
.checkout-view .deliveryMethod-bk .store-list .store {
  margin: 0.25rem 0.25rem;
  padding: 1rem;
  position: relative;
  border: 1px solid #E3E3E3;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 1rem;
  font-weight: 500;
}
.checkout-view .deliveryMethod-bk .store-list .store.unselected {
  background-color: #F4F4F4;
  opacity: 0.5;
}
.checkout-view .deliveryMethod-bk .store-list .store.selected:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0.25rem;
  height: 100%;
  background-color: #9d9d82;
}
.checkout-view .deliveryMethod-bk .store-list .store-01 {
  margin-right: 0.25rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/store/711@2x.png");
  background-size: 2rem 2rem;
  width: 2rem;
  height: 2rem;
}
.checkout-view .deliveryMethod-bk .store-list .store-02 {
  margin-right: 0.25rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/store/familymart.svg");
  background-size: 2rem 2rem;
  width: 2rem;
  height: 2rem;
}
.checkout-view .deliveryMethod-bk .store-list .store-03 {
  margin-right: 0.25rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/store/hilife@2x.png");
  background-size: 2rem 2rem;
  width: 2rem;
  height: 2rem;
}
.checkout-view .deliveryMethod-bk .store-list .store-04 {
  margin-right: 0.25rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/store/okmart@2x.png");
  background-size: 2rem 2rem;
  width: 2rem;
  height: 2rem;
}
.checkout-view .deliveryMethod-bk i.icon-arrow-right {
  margin-left: 0.25rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/arrow_right_grey.svg");
  background-size: 0.875rem 0.875rem;
  width: 0.875rem;
  height: 0.875rem;
}
.checkout-view .deliveryMethod-bk .btn-select-store {
  margin: 0.5rem 0;
}
.checkout-view .deliveryMethod-bk .store-location {
  margin-top: 0.25rem;
  padding: 0.5rem 1rem;
  border: 1px solid #E3E3E3;
}
.checkout-view .deliveryMethod-bk .store-location .store-name {
  margin-bottom: 0.25rem;
  font-size: 0.9375rem;
  font-weight: bold;
}
.checkout-view .deliveryMethod-bk .store-location .store-address {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #818181;
}
.checkout-view .paymentMethod-bk {
  margin-bottom: 0.5rem;
}
.checkout-view .paymentMethod-bk .paymentMethod-list {
  display: -ms-grid;
  display: grid;
}
.checkout-view .paymentMethod-bk .paymentMethod-list li {
  margin: 0.5rem 0;
}
.checkout-view .paymentMethod-bk .credit-card-info {
  margin-top: 1rem;
}
.checkout-view .creditCardInfo-bk {
  margin-bottom: 0.5rem;
}
.checkout-view .creditCardInfo-bk .creditCardInfo-list {
  padding-top: 2rem;
}
.checkout-view .order-note-bk {
  margin-bottom: 0.5rem;
}
.checkout-view .order-note-bk .note-textarea {
  padding: 0;
}
.checkout-view .order-note-bk .note-textarea textarea {
  resize: none;
}
.checkout-view .receipt-info-bk {
  margin-bottom: 0.5rem;
}
.checkout-view .receipt-info-bk .receipt-info-list li {
  margin: 0.5rem 0;
}
.checkout-view .btn-continue-checkout-m {
  display: inline-block;
}
@media (min-width: 767px) {
  .checkout-view .btn-continue-checkout-m {
    display: none;
  }
}
.checkout-view .btn-continue-checkout-padUp {
  display: none;
}
@media (min-width: 767px) {
  .checkout-view .btn-continue-checkout-padUp {
    display: inline-block;
  }
}

.select-store-type {
  padding: 0.75rem 1rem;
}

#modal-recipient-list .modal-dialog, #modal-store-list-01 .modal-dialog, #modal-store-list-02 .modal-dialog, #modal-recipient-list-foreign .modal-dialog {
  width: 90%;
}
@media (min-width: 767px) {
  #modal-recipient-list .modal-dialog, #modal-store-list-01 .modal-dialog, #modal-store-list-02 .modal-dialog, #modal-recipient-list-foreign .modal-dialog {
    width: 28.125rem;
  }
}
#modal-recipient-list .modal-content, #modal-store-list-01 .modal-content, #modal-store-list-02 .modal-content, #modal-recipient-list-foreign .modal-content {
  background-color: #E3E3E3;
  border-radius: 0.5rem;
  background-clip: padding-box;
  overflow: hidden;
}
#modal-recipient-list .modal-header, #modal-recipient-list .modal-body, #modal-recipient-list .modal-footer, #modal-store-list-01 .modal-header, #modal-store-list-01 .modal-body, #modal-store-list-01 .modal-footer, #modal-store-list-02 .modal-header, #modal-store-list-02 .modal-body, #modal-store-list-02 .modal-footer, #modal-recipient-list-foreign .modal-header, #modal-recipient-list-foreign .modal-body, #modal-recipient-list-foreign .modal-footer {
  background-color: #FFF;
}
#modal-recipient-list .modal-header, #modal-store-list-01 .modal-header, #modal-store-list-02 .modal-header, #modal-recipient-list-foreign .modal-header {
  padding: 0.75rem 1rem;
}
#modal-recipient-list .modal-body, #modal-store-list-01 .modal-body, #modal-store-list-02 .modal-body, #modal-recipient-list-foreign .modal-body {
  padding: 0;
  max-height: 28.125rem;
  overflow-y: auto;
}
#modal-recipient-list .modal-footer, #modal-store-list-01 .modal-footer, #modal-store-list-02 .modal-footer, #modal-recipient-list-foreign .modal-footer {
  border-top: 1px solid #E3E3E3;
}
#modal-recipient-list .select-store-type, #modal-store-list-01 .select-store-type, #modal-store-list-02 .select-store-type, #modal-recipient-list-foreign .select-store-type {
  border-top: 0.5rem solid #E3E3E3;
}
#modal-recipient-list .store-list .store, #modal-store-list-01 .store-list .store, #modal-store-list-02 .store-list .store, #modal-recipient-list-foreign .store-list .store {
  padding: 0.75rem 1rem;
  background-color: #FFF;
  border-top: 0.0625rem solid #E3E3E3;
}
#modal-recipient-list .recipient, #modal-store-list-01 .recipient, #modal-store-list-02 .recipient, #modal-recipient-list-foreign .recipient {
  background-color: #FFF;
  border-top: 0.5rem solid #E3E3E3;
}
#modal-recipient-list .recipient.canceled, #modal-store-list-01 .recipient.canceled, #modal-store-list-02 .recipient.canceled, #modal-recipient-list-foreign .recipient.canceled {
  opacity: 0.75;
}
#modal-recipient-list .recipient .recipient-header, #modal-store-list-01 .recipient .recipient-header, #modal-store-list-02 .recipient .recipient-header, #modal-recipient-list-foreign .recipient .recipient-header {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #E3E3E3;
}
#modal-recipient-list .recipient .recipient-header .recipient-name, #modal-store-list-01 .recipient .recipient-header .recipient-name, #modal-store-list-02 .recipient .recipient-header .recipient-name, #modal-recipient-list-foreign .recipient .recipient-header .recipient-name {
  font-size: 1rem;
  font-weight: 500;
}
#modal-recipient-list .recipient .recipient-body, #modal-recipient-list .recipient .store-body, #modal-store-list-01 .recipient .recipient-body, #modal-store-list-01 .recipient .store-body, #modal-store-list-02 .recipient .recipient-body, #modal-store-list-02 .recipient .store-body, #modal-recipient-list-foreign .recipient .recipient-body, #modal-recipient-list-foreign .recipient .store-body {
  padding: 0.5rem 1rem;
}
#modal-recipient-list .recipient .recipient-body .recipient-info-list li, #modal-recipient-list .recipient .store-body .recipient-info-list li, #modal-store-list-01 .recipient .recipient-body .recipient-info-list li, #modal-store-list-01 .recipient .store-body .recipient-info-list li, #modal-store-list-02 .recipient .recipient-body .recipient-info-list li, #modal-store-list-02 .recipient .store-body .recipient-info-list li, #modal-recipient-list-foreign .recipient .recipient-body .recipient-info-list li, #modal-recipient-list-foreign .recipient .store-body .recipient-info-list li {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 2;
}

.checkout-success {
  background-color: #FFF;
}
.checkout-success .description {
  margin-top: 5%;
}
@media (min-width: 767px) {
  .checkout-success .description {
    margin-top: 2%;
  }
}
@media (min-width: 1200px) {
  .checkout-success .description {
    margin-top: 2%;
  }
}
.checkout-success .description h3 {
  font-size: 24px;
}
.checkout-success .description p {
  margin-bottom: 2%;
  font-size: 0.9375rem;
}
.checkout-success .description .store-logo {
  margin: 2rem 0;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/logo_verticle.svg");
  background-size: 100px 120px;
  width: 120px;
  height: 120px;
}
.checkout-success .third-party-code {
  margin: 1rem 0;
  padding: 1rem 0;
  background-color: #F4F4F4;
  border-radius: 0.5rem;
  background-clip: padding-box;
  overflow: hidden;
}
.checkout-success .third-party-code .code-name {
  margin-bottom: 0.75rem;
  font-size: 1.125rem;
  color: #333333;
  font-weight: 600;
}
.checkout-success .third-party-code .description {
  margin-top: 0.125rem;
  margin-bottom: 0.5rem;
  font-size: 0.8125rem;
}
.checkout-success .third-party-code .code {
  font-size: 1.5rem;
  font-weight: bold;
}
@media (min-width: 767px) {
  .checkout-success .third-party-code .code {
    font-size: 2rem;
  }
}
.checkout-success .third-party-code .notice-text {
  color: #818181;
}
.checkout-success .third-party-code .dataTitle {
  font-size: 1rem;
}
.checkout-success .third-party-code .dataNum {
  letter-spacing: 0.0625rem;
  font-weight: 700;
}
.checkout-success .third-party-code .barcode {
  margin: 1rem auto;
  max-width: 25rem;
}
.checkout-success .third-party-code .barcode .barcode-img {
  margin-bottom: 0.25rem;
}
.checkout-success .third-party-code .expired-date {
  margin-top: 0.5rem;
  font-size: 0.9375rem !important;
}
.checkout-success table.table th {
  font-size: 0.9375rem;
  font-weight: 500;
  vertical-align: middle;
  background-color: #F4F4F4;
}
.checkout-success table.table td {
  padding-left: 1rem;
  font-size: 0.9375rem;
  font-weight: 500;
  vertical-align: middle;
  text-align: left;
}

.shoppingCart-list-view .counter-block .counter-el {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.shoppingCart-list-view .counter-block .counter-el.showAlert input {
  background-color: #fff8e4;
  color: #b77e00;
}
.shoppingCart-list-view .counter-block .counter-el.showAlert button {
  background-color: #b77e00;
  color: #fff;
}

.msg-alert {
  padding: 0.5rem 0.5rem;
  position: fixed;
  bottom: 3.5rem;
  left: 0;
  z-index: 999;
  width: 100%;
  font-size: 0.8125rem;
  background-color: #fff8e4;
  color: #b77e00;
}
@media (min-width: 767px) {
  .msg-alert {
    padding-left: 0;
    padding-right: 0;
    bottom: 0;
  }
}

.order-tabmenu {
  position: fixed;
  top: calc(4rem + env(safe-area-inset-top));
  left: 0;
  width: 100%;
  z-index: 99;
}
@media (min-width: 767px) {
  .order-tabmenu {
    position: initial;
    top: 0;
    border-radius: 0.5rem;
    background-clip: padding-box;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .order-tabmenu .btn {
    margin-right: 1rem;
    height: 1.875rem;
    line-height: 1.875rem;
  }
}

.order-list {
  margin-bottom: 0.5rem;
}
.order-list .empty {
  padding-top: 20%;
  text-align: center;
}
.order-list .empty .icon-order-empty {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/empty/order_empty.svg");
  background-size: 5rem 5rem;
  width: 5rem;
  height: 5rem;
}
.order-list .empty p {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  color: #818181;
}

.order {
  margin-bottom: 0.5rem;
  background-color: #FFF;
}
@media (min-width: 767px) {
  .order {
    border-radius: 0.5rem;
    background-clip: padding-box;
  }
}
.order.canceled {
  opacity: 0.75;
}
.order .color-danger {
  color: #FD2E2E !important;
}
.order .order-header {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #E3E3E3;
}
.order .order-header .order-id {
  font-size: 1rem;
  font-weight: 500;
}
.order .order-header .btn-copy {
  margin-left: 0.5rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/order/copy.svg");
  background-size: 1.25rem 1.25rem;
  width: 1.5rem;
  height: 1.5rem;
  cursor: pointer;
}
.order .order-header .payment-status {
  font-size: 1rem;
  font-weight: 500;
}
.order .order-body {
  padding: 0.5rem 1rem;
}
.order .order-body .order-info-list li {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 2;
}
.order .order-footer {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 50% 50%;
  grid-template-columns: 50% 50%;
  border-top: 1px solid #E3E3E3;
  font-size: 0.9375rem;
  font-weight: 500;
}
.order .order-footer.single {
  -ms-grid-columns: 100%;
  grid-template-columns: 100%;
}
.order .order-footer.single a:first-child {
  border-right: 0;
}
.order .order-footer a:first-child {
  padding: 0.75rem 0;
  border-right: 1px solid #E3E3E3;
}
.order .order-footer .icon-goToPay {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/order/pay.svg");
  background-size: 1rem 1rem;
  width: 1.5rem;
  height: 1.5rem;
}
.order .order-footer .icon-readMore {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/order/detail.svg");
  background-size: 1rem 1rem;
  width: 1.5rem;
  height: 1.5rem;
}
.order .order-footer .icon-edit {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/order/edit.svg");
  background-size: 1rem 1rem;
  width: 1.5rem;
  height: 1.5rem;
}

.refund-control {
  padding: 0 1rem;
}
@media (min-width: 767px) {
  .refund-control {
    padding: 0;
  }
}

.order-detail {
  margin-top: 0.5rem;
}
@media (min-width: 767px) {
  .order-detail {
    margin-top: 0;
  }
}
.order-detail .product-horizental.for-order-detail {
  margin: 0.25rem 0 0.75rem 0;
  padding: 0;
  border-bottom: none;
}
.order-detail .product-horizental.for-order-detail .product-img {
  border-radius: 0;
  background-clip: padding-box;
}
.order-detail .product-horizental.for-order-detail .product-text {
  padding-left: 1rem;
}
.order-detail .product-horizental.for-order-detail .product-text .product-name {
  padding: 0;
}
.order-detail .product-horizental.for-order-detail .price {
  margin-top: 0.75rem;
}
.order-detail .total-price {
  padding: 1rem;
  display: block;
  width: 100%;
  border-top: 1px solid #E3E3E3;
}
.order-detail .total-price .order-info-list li {
  line-height: 2;
}

.order-comment-board .type-comment .textarea {
  margin: 1rem 0;
  width: 100%;
}
.order-comment-board .type-comment .control-block {
  margin-bottom: 1.25rem;
}
.order-comment-board .type-comment .control-block .btn {
  padding: 0.5rem 1rem;
}
.order-comment-board .type-comment .btn-add-images .icon-image {
  margin-right: 0.25rem;
  width: 1rem;
  height: 1rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/post_write/photo.svg");
  background-size: 1rem 1rem;
}
.order-comment-board .type-comment .btn-send-msg {
  margin-left: 0.5rem;
  width: 6.875rem;
}
.order-comment-board .msg .file {
  margin: 0.25rem;
  position: relative;
  color: #818181;
  display: inline-block;
}
.order-comment-board .msg .file .overlayer {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.65);
  border-radius: 0.5rem;
  background-clip: padding-box;
}
.order-comment-board .msg .file .upload-thumb {
  padding-bottom: 120px;
  width: 120px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  border-radius: 0.25rem;
  background-clip: padding-box;
  overflow: hidden;
  cursor: pointer;
}
.order-comment-board .msg .file .upload-thumb.isvideo .overlayer:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 2rem;
  height: 2rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/play_video.svg");
  background-size: 2rem 2rem;
}
.order-comment-board .comment-display {
  margin-top: 1.5rem;
  padding-top: 0.5rem;
}
.order-comment-board .comment-display .comment-list li.comment {
  padding: 1rem 0;
}
.order-comment-board .comment-display .comment-list li.comment:last-child {
  border: none;
}
.order-comment-board .comment-display .comment-list li.comment.reply .comment-content {
  margin-left: 0;
  margin-right: 1.25rem;
  padding: 1rem;
  background-color: #fffaf0;
  text-align: right;
}
.order-comment-board .comment-display .comment-list li.comment.reply .time {
  text-align: right;
}
.order-comment-board .comment-display .comment-list .comment-body {
  margin-bottom: 0.75rem;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}
.order-comment-board .comment-display .comment-list .comment-body .user-name:hover {
  cursor: initial;
  text-decoration: none;
}
.order-comment-board .comment-display .comment-list .comment-body .name {
  margin-left: 0.5rem;
}
.order-comment-board .comment-display .comment-list .comment-body .comment-content {
  margin-left: 1.25rem;
  padding: 1rem;
  background-color: #F4F4F4;
  width: calc(100% - 2.625rem - 0.5rem);
  font-size: 0.9375rem;
  font-weight: normal;
  line-height: 1.5rem;
  border-radius: 0.5rem;
  background-clip: padding-box;
}
.order-comment-board .comment-display .comment-list .comment-body .comment-content .btn-zoom-in {
  padding: 0.25rem 0.5rem;
  position: absolute;
  right: 0.25rem;
  bottom: 0.25rem;
  z-index: 2;
  border-radius: 0.5rem;
  background-clip: padding-box;
  font-size: 0.75rem;
  color: #FFF;
  background-color: rgba(0, 0, 0, 0.75);
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/zoom_in.svg");
  background-size: 1.25rem 1.25rem;
  width: 2.25rem;
  height: 2.25rem;
  cursor: pointer;
}
.order-comment-board .comment-display .comment-list .comment-body .time {
  margin-top: 0.9375rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 500;
  color: #818181;
}

#modal-payment-info .modal-dialog {
  max-width: 22.5rem;
}
#modal-payment-info .modal-body {
  padding-left: 2rem;
  padding-right: 2rem;
}
#modal-payment-info .account-input {
  margin-top: 1rem;
}
#modal-payment-info .account-input span {
  margin-right: 0.75rem;
}
#modal-payment-info .account-input input {
  width: calc(100% - 6.5625rem - 1.5rem);
}

#modal-merge-order .modal-dialog {
  width: 92%;
}
@media (min-width: 767px) {
  #modal-merge-order .modal-dialog {
    width: 30rem;
  }
}
#modal-merge-order .modal-content {
  background-color: #E3E3E3;
  overflow: hidden;
}
#modal-merge-order .modal-header, #modal-merge-order .modal-footer {
  background-color: #FFF;
}
#modal-merge-order .modal-body {
  padding: 0;
  background-color: #E3E3E3;
  height: 120vw;
  overflow: auto;
}
#modal-merge-order .modal-body .order:first-child {
  margin-top: 0.5rem;
}
#modal-merge-order .modal-body .order {
  margin-bottom: 0.5rem;
  cursor: pointer;
}
#modal-merge-order .modal-body .order:hover {
  cursor: pointer;
  background-color: #F4F4F4;
}
#modal-merge-order .modal-body .order .label-radioInput-control {
  width: 100%;
}
@media (min-width: 767px) {
  #modal-merge-order .modal-body {
    height: 75vw;
  }
  #modal-merge-order .modal-body .order {
    border-radius: 0;
    background-clip: padding-box;
  }
}
@media (min-width: 992px) {
  #modal-merge-order .modal-body {
    height: 40vw;
  }
}
@media (min-width: 1200px) {
  #modal-merge-order .modal-body {
    height: 35vw;
  }
}
#modal-merge-order .modal-footer {
  border-top: 1px solid #E3E3E3;
}

#modal-cStoreCode-preview .modal-dialog {
  width: 90%;
  max-width: 480px;
}

.merge-orders-group {
  padding: 1rem;
  background-color: #FFF;
}
.merge-orders-group .merge-order {
  border: 1px solid #e2b77e;
  border-top: 0;
}
.merge-orders-group .merge-order:first-child {
  border-top: 1px solid #e2b77e;
}
.merge-orders-group .merge-order .order-header {
  padding: 1rem;
  font-size: 1rem;
  font-weight: bold;
  background-color: #faf6e9;
}
.merge-orders-group .merge-order .order-header .btn-toggle-order-detail {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/arrow_down_grey.svg");
  background-size: 1rem 1rem;
  cursor: pointer;
  width: 2rem;
  height: 1.5rem;
}
.merge-orders-group .merge-order .order-header .btn-toggle-order-detail.opened {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.merge-orders-group .merge-order .order-body {
  display: none;
}
.merge-orders-group .product-list,
.merge-orders-group .additional-parchase-list,
.merge-orders-group .freebie-list {
  margin-bottom: 0;
}
.merge-orders-group .product-list li:last-child {
  border-bottom: none !important;
}
.merge-orders-group .product-thumb-view .product-img {
  padding-bottom: 6rem;
  width: 4rem;
}

.auth-list li {
  border-bottom: 1px solid #E3E3E3;
}
.auth-list li:last-child {
  border-bottom: none;
}
.auth-list li .auth-title {
  padding: 0.625rem 1rem;
}
.auth-list li label {
  padding: 0.625rem 1rem;
}
.auth-list .auth-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: #818181;
}
.auth-list .auth-option .icon-auth-public {
  margin-right: 0.25rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/post_write/public.svg");
  background-size: 1rem 1rem;
  width: 1rem;
  height: 1rem;
}
.auth-list .auth-option .icon-auth-limited {
  margin-right: 0.25rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/post_write/limited.svg");
  background-size: 1rem 1rem;
  width: 1rem;
  height: 1rem;
}
.auth-list .auth-option span {
  font-size: 1rem;
  font-weight: 500;
  color: #333333;
}
.auth-list .control-block {
  padding: 1rem;
}

.modal-select-auth .modal-dialog {
  width: 85%;
}
.modal-select-auth .modal-dialog .modal-body {
  padding: 0;
}
@media (min-width: 767px) {
  .modal-select-auth .modal-dialog {
    width: 22.5rem;
  }
}

.modal-writePost--add-product .modal-dialog {
  width: 90%;
}
.modal-writePost--add-product .search-bar {
  padding: 1rem;
  position: sticky;
}
.modal-writePost--add-product .searchArea {
  padding: 0 0.5rem;
  height: 2.625rem;
  background-color: #F4F4F4;
  border-radius: 2000px;
  background-clip: padding-box;
}
.modal-writePost--add-product .searchArea input {
  border: none;
  background-color: transparent;
  outline: 0;
  font-size: 0.875rem;
}
.modal-writePost--add-product .searchArea input.btn-search {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/topNav/nav_search.svg");
  background-size: 16px 16px;
  width: 2.625rem;
  height: 2.625rem;
}
.modal-writePost--add-product .searchArea input.search-input {
  width: calc(100% - 2.625rem);
  height: 100%;
}
.modal-writePost--add-product .modal-body {
  padding: 0;
  max-height: 60vh;
  overflow-y: auto;
}
.modal-writePost--add-product .product-option {
  padding: 1rem;
  border-bottom: 1px solid #E3E3E3;
}
.modal-writePost--add-product .product-option .design:before {
  opacity: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  background-color: #237D26;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  content: attr(data-calcNum);
  text-align: center;
  font-weight: 500;
  color: #FFF;
  line-height: 1.5rem;
}
.modal-writePost--add-product .product-thumb-view {
  margin-bottom: 0;
}
.modal-writePost--add-product .product-thumb-view .product-img {
  margin-top: 0;
  margin-right: 0.75rem;
  padding-bottom: 20%;
  position: relative;
  width: 25%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  -ms-flex-item-align: start;
      align-self: flex-start;
}
.modal-writePost--add-product .product-thumb-view .product-text {
  width: calc(100% - 5rem);
  text-align: left;
}
.modal-writePost--add-product .product-thumb-view .product-text .promo-slogan {
  margin-bottom: 0.25rem;
  width: 100%;
  font-size: 0.875rem;
  color: #818181;
  text-align: left;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-height: 1.5rem;
  height: 1.5rem;
}
.modal-writePost--add-product .product-thumb-view .product-text .product-name {
  display: inline-block;
  font-size: 1rem;
  font-weight: 700;
  text-align: left;
}
.modal-writePost--add-product .product-thumb-view .product-text .product-name span {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.25rem;
  height: 2.75rem;
}
.modal-writePost--add-product .product-thumb-view .product-text .product-name:hover {
  color: #9d9d82;
}
.modal-writePost--add-product .product-thumb-view .product-text .product-price {
  margin-top: 0;
  margin-bottom: 0.25rem;
  text-align: left;
}
.modal-writePost--add-product .product-thumb-view .product-text .product-price .sale-price {
  font-size: 1.125rem;
  color: #9d9d82;
  font-weight: 600;
}
.modal-writePost--add-product .product-thumb-view .product-text .original-price {
  margin-left: 0.5rem;
  font-size: 0.75rem;
  text-decoration: line-through;
  color: #333333;
  font-weight: normal;
}
.modal-writePost--add-product .product-thumb-view .product-text .btn-sm {
  font-size: 13px;
  height: 1.5rem;
  line-height: 1.35rem;
}
.modal-writePost--add-product .counter-block .counter-el button {
  width: 1.5rem;
  height: 1.5rem;
  color: #333333;
  font-size: 1.125rem;
  line-height: 1.125rem;
  font-weight: bold;
  background-color: #F4F4F4;
}
.modal-writePost--add-product .counter-block .counter-el input {
  max-width: 50px;
  border: none;
  text-align: center;
  outline: 0;
}
.modal-writePost--add-product .control-block {
  width: calc(100% - 5rem - 1rem);
}
@media (min-width: 767px) {
  .modal-writePost--add-product {
    margin-top: 0;
  }
  .modal-writePost--add-product .modal-dialog {
    max-width: 30rem;
  }
  .modal-writePost--add-product .control-block {
    width: calc(100% - 8rem - 1rem);
  }
  .modal-writePost--add-product .product-option .design {
    width: 1.5rem;
    height: 1.5rem;
  }
}

.empty-block {
  padding: 2rem 15%;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media (min-width: 767px) {
  .empty-block {
    border-radius: 0.5rem;
    background-clip: padding-box;
    background-color: #fff;
  }
}
.empty-block .icon-order-empty {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/empty/order_empty.svg");
  background-size: 5rem 5rem;
  width: 5rem;
  height: 5rem;
}
.empty-block .icon-cuopon-empty {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/empty/coupon_empty.svg");
  background-size: 5rem 5rem;
  width: 5rem;
  height: 5rem;
}
.empty-block .icon-bonus-empty {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/empty/bonus_empty.svg");
  background-size: 5rem 5rem;
  width: 5rem;
  height: 5rem;
}
.empty-block .icon-search-empty {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/empty/search_empty.svg");
  background-size: 5rem 5rem;
  width: 5rem;
  height: 5rem;
}
.empty-block .icon-shoppingCart-empty {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/empty/shoppingCart_empty.svg");
  background-size: 5rem 5rem;
  width: 5rem;
  height: 5rem;
}
.empty-block .icon-notification-empty {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/empty/notification_empty.svg");
  background-size: 5rem 5rem;
  width: 5rem;
  height: 5rem;
}
.empty-block .icon-service-empty {
  margin-top: 3rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/empty/service_empty.svg");
  background-size: 5rem 5rem;
  width: 5rem;
  height: 5rem;
}
.empty-block .icon-profit-empty {
  margin-top: 3rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/empty/profit_empty.svg");
  background-size: 5rem 5rem;
  width: 5rem;
  height: 5rem;
}
.empty-block p {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  color: #818181;
}

.no-top-radius {
  border-top: 1px solid #E3E3E3;
  border-radius: 0 0 0.5rem 0.5rem;
}

.notification-list-view {
  margin-top: 0.5rem;
}
@media (min-width: 767px) {
  .notification-list-view {
    margin-top: 1.25rem;
  }
}

.notification-list li {
  margin-top: 0.5rem;
  position: relative;
}
.notification-list li .title {
  margin-bottom: 0.5rem;
  padding-right: 3.625rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #333333;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.5rem;
  height: 3rem;
}
.notification-list li .time {
  font-size: 0.75rem;
  font-weight: 500;
  color: #818181;
}
.notification-list li .label-unread {
  padding: 0.25rem 0.5rem;
  display: inline-block;
  position: absolute;
  right: 1rem;
  top: 1rem;
  z-index: 2;
  font-size: 0.75rem;
  font-weight: 500;
  text-align: center;
  color: #FFF;
  background-color: #FD2E2E;
  border-radius: 0.5rem;
  background-clip: padding-box;
}
@media (min-width: 767px) {
  .notification-list {
    overflow: hidden;
    border-radius: 0.5rem;
    background-clip: padding-box;
  }
  .notification-list li {
    margin: 0;
    border-bottom: 1px solid #E3E3E3;
  }
}

.notification-detail-view {
  margin-top: 0.5rem;
}
.notification-detail-view .title {
  margin-bottom: 0.5rem;
  font-size: 1.125rem;
  font-weight: 500;
  color: #333333;
}
.notification-detail-view .time {
  margin-bottom: 1.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #818181;
}
.notification-detail-view .content {
  margin-bottom: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5rem;
  color: #333333;
}
@media (min-width: 767px) {
  .notification-detail-view {
    margin-top: 0;
    border-radius: 0.5rem;
    background-clip: padding-box;
  }
}

.notification-dropdown {
  padding: 0;
  left: initial;
  right: 0;
  width: 320px;
  width: 20rem;
  border: none;
  overflow: hidden;
  border-radius: 0.5rem;
  background-clip: padding-box;
  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  -ms-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}
.notification-dropdown .notification-dropdown--header {
  padding: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-bottom: 1px solid #E3E3E3;
}
.notification-dropdown .notification-dropdown--header .btn-read-all {
  padding: 6px 12px;
  font-size: 0.8125rem;
  font-weight: bold;
  color: #333333;
  background-color: #EAEAEA;
}
.notification-dropdown .notification-dropdown--header .btn-read-all:hover, .notification-dropdown .notification-dropdown--header .btn-read-all:focus, .notification-dropdown .notification-dropdown--header .btn-read-all:active, .notification-dropdown .notification-dropdown--header .btn-read-all.active, .notification-dropdown .notification-dropdown--header .btn-read-all:active:focus {
  color: #333333;
  background-color: #dcdcdc;
}
.notification-dropdown .notification-dropdown--body .empty-block {
  padding: 4rem 1rem;
  text-align: center;
}
.notification-dropdown .notification-dropdown--body .notification-list li {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #E3E3E3;
}
.notification-dropdown .notification-dropdown--body .notification-list li:last-child {
  border: none;
}
.notification-dropdown .notification-dropdown--body .notification-list li a {
  padding: 1rem 1rem;
  display: block;
}
.notification-dropdown .notification-dropdown--body .notification-list li a:hover {
  background-color: #F4F4F4;
}
.notification-dropdown .notification-dropdown--footer {
  padding: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-top: 1px solid #E3E3E3;
}
.notification-dropdown .notification-dropdown--footer .btn-primary {
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  line-height: 0.8125rem;
}

.modal-sharePost .modal-dialog {
  width: 90%;
  max-width: 21.875rem;
}
.modal-sharePost .modal-dialog .modal-body > a {
  margin: 1rem;
  display: inline-block;
  width: 3rem;
  height: 3rem;
  font-size: 0;
  background-color: #9C9C9C;
  border-radius: 2000px;
  background-clip: padding-box;
  cursor: pointer;
}
.modal-sharePost .modal-dialog .modal-body .btn-shareTo-line {
  background-color: transparent;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/socialMedia/line.svg");
  background-size: 3rem 3rem;
}
.modal-sharePost .modal-dialog .modal-body .btn-shareTo-fb {
  background-color: transparent;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/socialMedia/facebook.svg");
  background-size: 3rem 3rem;
}
.modal-sharePost .modal-dialog .modal-body .btn-shareBy-url {
  background-color: #E3E3E3;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/share_link.svg");
  background-size: 1.25rem 1.25rem;
}

.btn-online-service {
  position: fixed;
  bottom: 5%;
  right: 1.5rem;
  width: 52px;
  height: 52px;
  z-index: 999;
  background-color: #FFF;
  -webkit-transition: 0.3s all ease-in-out;
  transition: 0.3s all ease-in-out;
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/service/icon_service_float.svg");
  background-size: 24px 24px;
  border-radius: 2000px;
  background-clip: padding-box;
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.375);
  -ms-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.375);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.375);
  cursor: pointer;
}
.btn-online-service:hover, .btn-online-service:focus {
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  -ms-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.btn-online-service.hide {
  -webkit-transform: scale(0, 0);
  transform: scale(0, 0);
}

.service-dropdown {
  padding: 0;
  position: fixed;
  left: initial;
  right: 0;
  top: initial;
  bottom: 0;
  width: 330px;
  border: none;
  overflow: hidden;
  border-radius: 0.5rem 0.5rem 0 0;
  background-clip: padding-box;
  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  -ms-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}
.service-dropdown .service-dropdown--header {
  padding: 0.5rem 0.75rem;
}
.service-dropdown .service-dropdown--header .title {
  font-size: 1rem;
  font-weight: 500;
}
.service-dropdown .service-dropdown--header .btn-zoom-out {
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/arrow_down_grey.svg");
  background-size: 1rem 1rem;
}
.service-dropdown .service-dropdown--header .btn-zoom-out:hover {
  background-color: #F4F4F4;
}
.service-dropdown .service-dropdown--body {
  padding: 0.5rem 0.75rem;
  background-color: #F4F4F4;
  height: 420px;
  height: 50vh;
  max-height: 420px;
  overflow-y: auto;
}
.service-dropdown .service-dropdown--body .chat-bk {
  margin-top: 0;
  overflow-y: auto;
}
.service-dropdown .service-dropdown--body .chat-bk .chat-time-duration {
  margin-top: 1rem;
  margin-bottom: 1rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: normal;
  color: #818181;
}
.service-dropdown .service-dropdown--body .chat-bk .dialogue-service {
  margin-bottom: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.service-dropdown .service-dropdown--body .chat-bk .dialogue-my {
  margin-bottom: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.service-dropdown .service-dropdown--body .chat-bk .dialogue-my .time-display {
  text-align: right;
}
.service-dropdown .service-dropdown--body .chat-bk .dialogue {
  padding: 0.75rem;
  font-size: 14px;
  font-weight: 500;
  color: #333333;
  background-color: #FFF;
  border-radius: 0.625rem;
  background-clip: padding-box;
}
.service-dropdown .service-dropdown--body .chat-bk .dialogue .text {
  margin-bottom: 0.75rem;
}
.service-dropdown .service-dropdown--body .chat-bk .dialogue .text.system-text {
  margin-bottom: 0;
}
.service-dropdown .service-dropdown--body .chat-bk .time-display {
  margin: 0 0.75rem;
  font-size: 0.75rem;
  font-weight: normal;
  color: #818181;
}
.service-dropdown .service-dropdown--body .chat-bk .file {
  position: relative;
  color: #818181;
}
.service-dropdown .service-dropdown--body .chat-bk .file .overlayer {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.65);
  border-radius: 0.5rem;
  background-clip: padding-box;
}
.service-dropdown .service-dropdown--body .chat-bk .file .progress {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 4rem;
  height: 0.375rem;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 9;
}
.service-dropdown .service-dropdown--body .chat-bk .file .progress .progress-bar {
  background-color: #FFF;
}
.service-dropdown .service-dropdown--body .chat-bk .file .progress-text {
  position: absolute;
  z-index: 2;
  width: 100%;
  left: 0;
  bottom: 0.5rem;
  text-align: center;
  color: #FFF;
}
.service-dropdown .service-dropdown--body .chat-bk .file i.icon-file {
  margin-right: 0.25rem;
  width: 1rem;
  height: 1.875rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/service/order_grey.svg");
  background-size: 1rem 1rem;
}
.service-dropdown .service-dropdown--body .chat-bk .upload-thumb {
  padding-bottom: 5rem;
  width: 5rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  border-radius: 0.25rem;
  background-clip: padding-box;
  overflow: hidden;
  cursor: pointer;
}
.service-dropdown .service-dropdown--body .chat-bk .upload-thumb.isvideo .overlayer:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 2rem;
  height: 2rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/play_video.svg");
  background-size: 2rem 2rem;
}
.service-dropdown .service-dropdown--footer .writeMsg-bk {
  padding: 0;
  position: relative;
  background-color: #FFF;
  width: 100%;
  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  -ms-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  z-index: 99;
}
.service-dropdown .service-dropdown--footer .writeMsg-bk .textarea {
  height: 3.25rem;
}
.service-dropdown .service-dropdown--footer .writeMsg-bk .textarea input {
  padding-top: 0.25rem;
  padding: 0 0.75rem;
  width: 100%;
  height: 2rem;
  line-height: 2rem;
  border: 0;
  outline: 0;
  resize: none;
  vertical-align: middle;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #333333;
}
.service-dropdown .service-dropdown--footer .writeMsg-bk .textarea .btn-send-msg {
  width: 3rem;
  font-size: 0.9375rem;
  font-weight: 500;
}
.service-dropdown .service-dropdown--footer .writeMsg-bk .toolbar {
  padding: 0.5rem 0.75rem;
  border-top: 1px solid #E3E3E3;
}
.service-dropdown .service-dropdown--footer .writeMsg-bk .toolbar .btn-upload-photo {
  width: 2rem;
  height: 2rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/service/photo.svg");
  background-size: 1.125rem 1.125rem;
  cursor: pointer;
}
.service-dropdown .service-dropdown--footer .writeMsg-bk .toolbar .btn-upload-video {
  width: 2rem;
  height: 2rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/service/video.svg");
  background-size: 1.125rem 1.125rem;
  cursor: pointer;
}
.service-dropdown .service-dropdown--footer .writeMsg-bk .toolbar .btn-choose-order {
  width: 2rem;
  height: 2rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/service/order.svg");
  background-size: 1.125rem 1.125rem;
  cursor: pointer;
}

#modal-select-order .empty-block {
  padding-top: 15vh;
  background-color: transparent;
}
#modal-select-order .modal-dialog {
  width: 90%;
}
@media (min-width: 767px) {
  #modal-select-order .modal-dialog {
    width: 480px;
  }
}
#modal-select-order .modal-content {
  border-radius: 0.5rem;
  background-clip: padding-box;
  overflow: hidden;
  border: none;
}
#modal-select-order .modal-header {
  padding: 1rem;
  border-bottom: 1px solid #E3E3E3;
}
#modal-select-order .modal-body {
  padding: 0;
  padding-top: 0.5rem;
  background-color: #E3E3E3;
  height: 85vh;
  overflow-y: auto;
}
@media (min-width: 767px) {
  #modal-select-order .modal-body {
    height: 500px;
  }
}
#modal-select-order .modal-body .order {
  margin-bottom: 0.5rem;
  border-radius: 0;
}
#modal-select-order .modal-body .order .order-body {
  padding: 0;
}
#modal-select-order .modal-body .order .order-body .product.product-horizental {
  padding: 1rem;
}
#modal-select-order .modal-body .order .order-body .product.product-horizental:hover {
  -webkit-box-shadow: none;
  -ms-box-shadow: none;
  box-shadow: none;
}
#modal-select-order .modal-body .order .order-body .product.product-horizental:last-child {
  border: none;
}
#modal-select-order .modal-body .order .order-body .product.product-horizental .promo-slogan {
  line-height: 1;
}
#modal-select-order .modal-body .order .order-body .product.product-horizental .product-name {
  margin-bottom: 0.25rem;
  font-weight: 500;
}
#modal-select-order .modal-body .order .order-body .product.product-horizental .product-spec {
  margin-bottom: 0.5rem;
  margin-left: 0.5rem;
  line-height: 1;
  color: #818181;
}
#modal-select-order .modal-body .order .order-footer {
  -ms-grid-columns: initial;
  grid-template-columns: initial;
}
#modal-select-order .modal-body .order .order-footer .data-display {
  padding: 0.5rem 1rem;
}
#modal-select-order .modal-body .order .order-footer .control-block {
  padding: 0.5rem 1rem;
  border-top: 1px solid #E3E3E3;
}
#modal-select-order .modal-body .order .order-footer .control-block .icon-send {
  margin-right: 0.25rem;
  width: 1rem;
  height: 1rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/service/send.svg");
  background-size: 1rem 1rem;
}

.topNav {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #FFF;
  z-index: 998;
}
.topNav .topNav--top {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  width: 100%;
  height: 4rem;
}
.topNav .topNav--top .logo {
  margin-left: 0.5rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/logo.svg");
  background-size: 5.5rem 3rem;
  width: 5.5rem;
  height: 3rem;
}
.topNav .topNav--top button {
  border: none;
  background-color: transparent;
  outline: 0;
}
.topNav .topNav--top .btn-return {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/topNav/nav_back.svg");
  background-size: 1.5rem 1.5rem;
  width: 2.25rem;
  height: 2.25rem;
}
.topNav .topNav--top .btn-productMenu {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/topNav/productMenu.svg");
  background-size: 1.5rem 1.5rem;
  width: 2.25rem;
  height: 2.25rem;
}
.topNav .topNav--top .btn-search-b {
  position: relative;
  margin-right: 0.5rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/topNav/nav_search_b.svg");
  background-size: 1.5rem 1.5rem;
  width: 2.25rem;
  height: 2.25rem;
}
.topNav .topNav--top .btn-shoppingCart {
  margin: 0.25rem;
  position: relative;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/topNav/shoppingCart.svg");
  background-size: 1.5rem 1.5rem;
  width: 2.25rem;
  height: 2.25rem;
}
.topNav .topNav--top .btn-notification {
  margin: 0.25rem;
  position: relative;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/topNav/notification.svg");
  background-size: 1.5rem 1.5rem;
  background-position: 50% 35%;
  width: 2.25rem;
  height: 2.25rem;
}
.topNav .topNav--bottom {
  padding-top: 0;
  padding-bottom: 0.75rem;
}
.topNav .topNav--bottom .searchArea {
  padding: 0 0.5rem;
  height: 2.625rem;
  background-color: #F4F4F4;
  border-radius: 2000px;
  background-clip: padding-box;
}
.topNav .topNav--bottom .searchArea input {
  border: none;
  background-color: transparent;
  outline: 0;
  font-size: 0.875rem;
}
.topNav .topNav--bottom .searchArea input.btn-search {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/topNav/nav_search.svg");
  background-size: 1rem 1rem;
  width: 2.625rem;
  height: 2.625rem;
}
.topNav .topNav--bottom .searchArea input.search-input {
  width: calc(100% - 2.625rem);
  height: 100%;
}
@media (min-width: 767px) {
  .topNav .topNav--top {
    padding: 0.5rem 1.5rem;
  }
  .topNav .topNav--top .logo {
    margin-left: 0.75rem;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    background-position: 50% 50%;
    background-image: url("../images/logo.svg");
    background-size: 9.375rem 3.125rem;
    width: 150px;
    height: 50px;
  }
  .topNav .topNav--top .menu-items-group {
    margin-left: 4rem;
    height: 3.125rem;
  }
  .topNav .topNav--top .menu-items-group li {
    margin-right: 2rem;
    display: inline-block;
    height: 3.125rem;
    line-height: 3.125rem;
  }
  .topNav .topNav--top .menu-items-group li > a {
    color: #333333;
    font-weight: normal;
    font-size: 1rem;
  }
  .topNav .topNav--top .menu-items-group li.active > a {
    display: block;
    position: relative;
    font-weight: bold;
    height: 100%;
  }
  .topNav .topNav--top .menu-items-group li.active > a:after {
    content: "";
    display: inline-block;
    background-color: #9d9d82;
    width: 2.125rem;
    height: 0.25rem;
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
    bottom: -0.5rem;
    border-radius: 2000px;
    background-clip: padding-box;
  }
  .topNav .topNav--top .topNav--top---right .user-profile {
    margin-right: 1rem;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 2000px;
    background-clip: padding-box;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    -ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    background-image: url("../images/topNav/userImg_empty.svg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: 50% 50%;
  }
  .topNav .topNav--top .btn-login {
    margin-right: 0.5rem;
    padding: 0.5rem;
    border-radius: 2000px;
    background-clip: padding-box;
    font-size: 0.9375rem;
  }
  .topNav .topNav--top .btn-login:hover, .topNav .topNav--top .btn-login:focus {
    background-color: #F4F4F4;
  }
  .topNav .topNav--top .btn-login .user-profile {
    margin-right: 0.5rem;
  }
  .topNav .topNav--top .member-dropdown {
    padding: 0.5rem;
    border: none;
    border-radius: 0.5rem;
    background-clip: padding-box;
    -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
    -ms-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  }
  .topNav .topNav--top .member-dropdown ul > li a {
    padding: 0.5rem;
    display: block;
    border-radius: 0.5rem;
    background-clip: padding-box;
    text-align: center;
  }
  .topNav .topNav--top .member-dropdown ul > li a:hover {
    background-color: #F4F4F4;
  }
  .topNav .topNav--top .member-dropdown ul > li.item-logout {
    margin-top: 0.5rem;
  }
  .topNav .topNav--top .member-dropdown ul > li.item-logout a {
    padding: 0.375rem;
  }
  .topNav .topNav--top .member-dropdown ul > li.item-logout a:hover {
    background-color: #84846d;
  }
}
@media (min-width: 992px) {
  .topNav .topNav--top {
    padding: 0.5rem 0;
    max-width: 960px;
  }
  .topNav .topNav--top .topNav--top---right .searchArea {
    margin-right: 1.25rem;
    padding: 0 0.5rem;
    height: 2.625rem;
    background-color: #F4F4F4;
    border-radius: 2000px;
    background-clip: padding-box;
  }
  .topNav .topNav--top .topNav--top---right .searchArea input {
    border: none;
    background-color: transparent;
    outline: 0;
    font-size: 0.875rem;
  }
  .topNav .topNav--top .topNav--top---right .searchArea input.btn-search {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    background-position: 50% 50%;
    background-image: url("../images/topNav/nav_search.svg");
    background-size: 1rem 1rem;
    width: 2.625rem;
    height: 2.625rem;
  }
  .topNav .topNav--top .topNav--top---right .searchArea input.search-input {
    width: calc(100% - 2.625rem);
    height: 100%;
  }
}
@media (min-width: 1200px) {
  .topNav .topNav--top {
    padding: 0.5rem 0;
    max-width: 1140px;
  }
  .topNav .topNav--top .btn-return {
    display: none;
  }
}
@media (min-width: 1600px) {
  .topNav .topNav--top {
    padding: 0.5rem 0;
    max-width: 1200px;
  }
}

.topNav.event .topNav--top---right .user-profile {
  margin-right: 0.5rem;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 2000px;
  background-clip: padding-box;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  -ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  background-image: url("../images/topNav/userImg_empty.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 50% 50%;
}
.topNav.event .topNav--top---right .btn-login {
  margin-right: 0.5rem;
  padding: 0.5rem;
  border-radius: 2000px;
  background-clip: padding-box;
  font-size: 0.9375rem;
}
.topNav.event .topNav--top---right .btn-login:hover, .topNav.event .topNav--top---right .btn-login:focus {
  background-color: #F4F4F4;
}
.topNav.event .topNav--top---right .btn-login .user-profile {
  margin-right: 0.5rem;
}
.topNav.event .topNav--top---right .member-dropdown {
  padding: 0.5rem;
  border: none;
  right: 0.5rem;
  left: initial;
  border-radius: 0.5rem;
  background-clip: padding-box;
  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  -ms-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}
.topNav.event .topNav--top---right .member-dropdown ul > li a {
  padding: 0.5rem;
  display: block;
  border-radius: 0.5rem;
  background-clip: padding-box;
  text-align: center;
}
.topNav.event .topNav--top---right .member-dropdown ul > li a:hover {
  background-color: #F4F4F4;
}
.topNav.event .topNav--top---right .member-dropdown ul > li.item-logout {
  margin-top: 0.5rem;
}
.topNav.event .topNav--top---right .member-dropdown ul > li.item-logout a {
  padding: 0.375rem;
}
.topNav.event .topNav--top---right .member-dropdown ul > li.item-logout a:hover {
  background-color: #84846d;
}

.lilkoko {
  background-color: #EA84B4;
}

.lilkoko .topNav {
  padding-top: 2.625rem;
  background-color: #FFF2E1;
  background-image: url("../images/topNav/lilkoko_deco.svg");
  background-size: auto 2.625rem;
  background-repeat: repeat-x;
  background-position: left 0;
}
@media (min-width: 767px) {
  .lilkoko .topNav {
    background-size: auto;
    background-position: left 0;
  }
}
.lilkoko .topNav .topNav--top {
  padding: 0.75rem 0.9375rem;
  height: auto;
}
.lilkoko .topNav .topNav--top .logo {
  margin-left: 1rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/logo_lilkoko.svg");
  background-size: 7.375rem 2.625rem;
  width: 7.375rem;
  height: 2.625rem;
}
@media (min-width: 767px) {
  .lilkoko .topNav .topNav--top .logo {
    margin-left: 2.625rem;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    background-position: 50% 50%;
    background-image: url("../images/logo_lilkoko.svg");
    background-size: 10.375rem 3.9375rem;
    width: 10.375rem;
    height: 3.9375rem;
  }
}
.lilkoko .topNav .topNav--top .btn-productMenu {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/topNav/productMenu_black.svg");
  background-size: 1.5rem 1.5rem;
}
.lilkoko .topNav .topNav--top .topNav--top---right .searchArea {
  background-color: #FFF;
}
.lilkoko .topNav .topNav--top .menu-items-group li {
  margin-right: 1rem;
  height: auto;
  line-height: 0;
}
.lilkoko .topNav .topNav--top .menu-items-group li > a {
  padding: 1.5rem 0.75rem;
  display: block;
}
.lilkoko .topNav .topNav--top .menu-items-group li > a:hover {
  color: #FFF;
  background-color: #6AAFDB;
  border-radius: 10px;
  background-clip: padding-box;
  -webkit-animation: shake-lr 0.7s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
  animation: shake-lr 0.7s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
}
.lilkoko .topNav .topNav--top .menu-items-group li.active > a::after {
  background-color: #6AAFDB;
  bottom: -20px;
  width: 48px;
}
.lilkoko .topNav .topNav--top .topNav--top---right .user-profile {
  background-image: url("../images/topNav/avatar.svg") !important;
  -webkit-box-shadow: none;
  -ms-box-shadow: none;
  box-shadow: none;
}
.lilkoko .topNav .topNav--bottom .searchArea {
  background-color: #FFF;
}
.lilkoko .topNav .btn-login:hover, .lilkoko .topNav .btn-login:focus {
  background-color: #F1E0CB;
}
.lilkoko .productMenu {
  background-color: #EA84B4;
}
.lilkoko .productMenu:before {
  content: "";
  display: block;
  padding-top: 2.625rem;
  background-color: #FFF2E1;
  background-image: url("../images/topNav/lilkoko_deco.svg");
  background-size: 100% 2.625rem;
  background-repeat: repeat-x;
  background-position: left -0.25rem;
}
.lilkoko .productMenu .productMenu-header {
  background-color: #FFF2E1;
}
.lilkoko .productMenu .productMenu-body > ul {
  background-color: #EA84B4;
  padding: 1rem;
}
.lilkoko .productMenu .productMenu-body > ul > li {
  margin-bottom: 1rem;
  border-radius: 5px;
  background-clip: padding-box;
  background-color: #FFF;
  -webkit-transition: none;
  transition: none;
}
.lilkoko .productMenu .productMenu-body > ul > li.has-subnav {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/arrow_down__lilkoko.svg");
  background-size: 24px 24px;
  background-position: 95% 13px;
  display: block;
}
.lilkoko .productMenu .productMenu-body > ul > li.has-subnav.opened {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/arrow_up__lilkoko.svg");
  background-size: 24px 24px;
  background-position: 95% 13px;
  display: block;
}
.lilkoko .productMenu .productMenu-body a {
  border-radius: 5px;
  background-clip: padding-box;
  border: 1px solid #000;
}
.lilkoko .productMenu .productMenu-body > ul > li > ul > li > a {
  border-radius: 0;
  background-clip: padding-box;
  background-color: #F4F4F4;
}
.lilkoko .productMenu .productMenu-body ul > li > ul > li > a[aria-current=page] {
  background-color: #FDC5DF;
}

@-webkit-keyframes shake-lr {
  0%, 100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
  }
  10% {
    -webkit-transform: rotate(8deg);
    transform: rotate(8deg);
  }
  20%, 40%, 60% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  30%, 50%, 70% {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
  }
  80% {
    -webkit-transform: rotate(-8deg);
    transform: rotate(-8deg);
  }
  90% {
    -webkit-transform: rotate(8deg);
    transform: rotate(8deg);
  }
}
@keyframes shake-lr {
  0%, 100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
  }
  10% {
    -webkit-transform: rotate(8deg);
    transform: rotate(8deg);
  }
  20%, 40%, 60% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  30%, 50%, 70% {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
  }
  80% {
    -webkit-transform: rotate(-8deg);
    transform: rotate(-8deg);
  }
  90% {
    -webkit-transform: rotate(8deg);
    transform: rotate(8deg);
  }
}
.pagebar {
  position: fixed;
  top: env(safe-area-inset-top);
  top: 0;
  width: 100%;
  height: 4rem;
  line-height: 4rem;
  background-color: #FFF;
  z-index: 998;
  text-align: center;
}
.pagebar .container {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.pagebar .btn-return {
  margin-right: auto;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/topNav/nav_back.svg");
  background-size: 1.5rem 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
  cursor: pointer;
  float: left;
}
.pagebar .btn-close {
  margin-right: auto;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/close.svg");
  background-size: 1.5rem 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
  cursor: pointer;
  float: left;
}
.pagebar .pagebar-title {
  display: inline-block;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  height: 1.5rem;
  line-height: 1.5rem;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.pagebar .pagebar-right-btn {
  height: 4rem;
  float: right;
  font-size: 1rem;
  font-weight: 500;
}
.pagebar .btn-read-all {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: bold;
  color: #333333;
  background-color: #EAEAEA;
}
.pagebar .btn-read-all:hover, .pagebar .btn-read-all:focus, .pagebar .btn-read-all:active, .pagebar .btn-read-all.active, .pagebar .btn-read-all:active:focus {
  color: #333333;
  background-color: #dcdcdc;
}

#footer {
  margin-top: 2rem;
  padding: 1rem 0;
  background-color: #333333;
}
#footer .animate-block {
  display: none;
}
#footer .container-r {
  margin: 0 auto;
}
#footer .footer-logo {
  margin-top: 0.25rem;
  margin-right: 2rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/logo_gray.svg");
  background-size: 11rem 6rem;
  width: 11rem;
  height: 6rem;
}
#footer .footer-links {
  margin-top: 0.15rem;
  margin-bottom: 0.25rem;
}
#footer .footer-links .link {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #818181;
}
#footer .footer-links .link:focus, #footer .footer-links .link:hover {
  color: #FFF;
}
#footer .footer-links .links-divider {
  margin: 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #818181;
}
#footer .copyright {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #818181;
}
#footer .socialMedia-links .link {
  margin-left: 1rem;
}
#footer .socialMedia-links .facebook {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/socialMedia/facebook.svg");
  background-size: 2rem 2rem;
  width: 2rem;
  height: 2rem;
}
#footer .socialMedia-links .instagram {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/socialMedia/instagram.png");
  background-size: 2.25rem 2.25rem;
  width: 2rem;
  height: 2rem;
}
#footer .socialMedia-links .youtube {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/socialMedia/youtube.png");
  background-size: 2rem 2rem;
  width: 2rem;
  height: 2rem;
}
#footer .socialMedia-links .line {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/socialMedia/line.png");
  background-size: 2rem 2rem;
  width: 2rem;
  height: 2rem;
}

.lilkoko #footer {
  padding-bottom: 58px;
  background-color: #FFF2E1;
  background-image: url("../images/topNav/lilkoko_deco.svg");
  background-size: auto 2.625rem;
  background-repeat: repeat-x;
  background-position: left 100%;
}
.lilkoko #footer .footer-logo {
  margin-right: 40px;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/logo_lilkoko.svg");
  background-size: 10.875rem 4.1875rem;
  width: 10.875rem;
  height: 4.1875rem;
}
.lilkoko #footer .footer-links .link, .lilkoko #footer .links-divider {
  color: #000;
  font-weight: 400;
}
.lilkoko #footer .copyright {
  color: #000;
  font-weight: 400;
}

@media (min-width: 992px) {
  .lilkoko #footer {
    margin-top: 6.25rem;
  }
  .lilkoko #footer .animate-block {
    margin: 0 auto;
    max-width: 75rem;
    position: relative;
  }
}
@media (min-width: 992px) and (min-width: 992px) {
  .lilkoko #footer .animate-block {
    display: block !important;
  }
}
@media (min-width: 992px) {
  .lilkoko #footer .anim-charactor {
    position: absolute;
    bottom: 0.75rem;
    z-index: -1;
  }
  .lilkoko #footer .anim-charactor img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
  .lilkoko #footer .anim-charactor-01 {
    width: 43.75rem;
    right: 40%;
    bottom: 0.9375rem;
  }
  .lilkoko #footer .anim-charactor-02 {
    width: 230px;
    right: 46%;
    bottom: 0.9375rem;
  }
  .lilkoko #footer .anim-charactor-03 {
    width: 700px;
    right: 7%;
  }
  .lilkoko #footer .anim-charactor-04 {
    width: 7.5rem;
    height: 7.5rem;
    right: 17%;
    bottom: 1.25rem;
  }
  .lilkoko #footer .anim-charactor-05 {
    width: 7.875rem;
    height: 7.875rem;
    right: 0;
  }
}
.lilkoko .product-list-view-container {
  position: relative;
  padding-bottom: 12.5rem !important;
}
.lilkoko .product-list-view-container:after {
  position: absolute;
  left: calc(50% - 80px);
  bottom: 66px;
  content: "";
  display: block;
  background-repeat: no-repeat;
  background-image: url("../images/animation/anim_charactor_05.gif");
  background-size: contain;
  background-position: 50% 50%;
  width: 10rem;
  height: 9.375rem;
}
@media (min-width: 767px) {
  .lilkoko .product-list-view-container {
    padding-bottom: 1.25rem !important;
  }
  .lilkoko .product-list-view-container:after {
    display: none;
  }
}

.bottomNav {
  position: fixed;
  bottom: calc(0rem + env(safe-area-inset-bottom));
  bottom: 0;
  z-index: 999;
  font-size: 0.75rem;
  width: 100%;
  height: calc(4rem + env(safe-area-inset-bottom));
  background-color: #fff;
  -webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  -ms-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}
.bottomNav ul li {
  float: left;
  width: 20%;
  height: 4rem;
  text-align: center;
}
.bottomNav ul li a {
  position: relative;
  padding-top: 2.375rem;
  display: block;
  color: #333333;
  width: 100%;
  height: 100%;
  background-position: 50% 25% !important;
}
.bottomNav ul li a .badge {
  top: 0.4375rem;
  right: 0.375rem;
}
.bottomNav ul li a.navItem-store {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/bottomNav/store.svg");
  background-size: 1.5rem 1.5rem;
}
.bottomNav ul li a.navItem-collection {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/bottomNav/collection.svg");
  background-size: 1.5rem 1.5rem;
}
.bottomNav ul li a.navItem-homepage {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/bottomNav/homepage.svg");
  background-size: 1.5rem 1.5rem;
}
.bottomNav ul li a.navItem-service {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/bottomNav/service.svg");
  background-size: 1.5rem 1.5rem;
}
.bottomNav ul li a.navItem-member {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/bottomNav/member.svg");
  background-size: 1.5rem 1.5rem;
}
.bottomNav ul li a.navItem-news-feed {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/bottomNav/news_feed.svg");
  background-size: 1.5rem 1.5rem;
}
.bottomNav ul li a.active {
  position: relative;
  color: #9d9d82;
}
.bottomNav ul li a.active:after {
  content: "";
  width: 1.5rem;
  height: 0.3125rem;
  position: absolute;
  left: 50%;
  -webkit-transform: translate(-50%, 100%);
          transform: translate(-50%, 100%);
  -webkit-transform: translate(-50%, -2.375rem);
          transform: translate(-50%, -2.375rem);
  background-color: #9d9d82;
  border-radius: 0 0 6px 6px;
  background-clip: padding-box;
}
.bottomNav ul li a.navItem-store.active {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/bottomNav/store_active.svg");
  background-size: 1.5rem 1.5rem;
}
.bottomNav ul li a.navItem-collection.active {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/bottomNav/collection_active.svg");
  background-size: 1.5rem 1.5rem;
}
.bottomNav ul li a.navItem-homepage.active {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/bottomNav/homepage_active.svg");
  background-size: 1.5rem 1.5rem;
}
.bottomNav ul li a.navItem-service.active {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/bottomNav/service_active.svg");
  background-size: 1.5rem 1.5rem;
}
.bottomNav ul li a.navItem-member.active {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/bottomNav/member_active.svg");
  background-size: 1.5rem 1.5rem;
}
.bottomNav ul li a.navItem-news-feed.active {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/bottomNav/news_feed_active.svg");
  background-size: 1.5rem 1.5rem;
}

.articleView {
  margin-top: 0.5rem;
}
.articleView .articleContent p {
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.75;
}
@media (min-width: 767px) {
  .articleView {
    margin-top: 1.25rem;
  }
  .articleView .articleContent {
    padding: 2rem;
    border-radius: 0.5rem;
    background-clip: padding-box;
    overflow: hidden;
  }
}

.event-list-view {
  padding-bottom: 5rem;
}
@media (min-width: 767px) {
  .event-list-view {
    padding-bottom: 0;
  }
}
.event-list-view .event-banner-bk {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  background-color: #FFF;
}
.event-list-view .event-banner-bk .event-banner.visible-xs {
  padding-bottom: 23.75rem;
  background-size: cover;
  background-repeat: no-repeat;
}
.event-list-view .event-detail-bk {
  margin-bottom: 0.5rem;
  padding: 1.25rem;
  background-color: #FFF;
}
.event-list-view .event-products-bk .products-list {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 50% 50%;
  grid-template-columns: 50% 50%;
}
@media (min-width: 767px) {
  .event-list-view .event-products-bk .products-list {
    margin: 0 -0.5rem;
    -ms-grid-columns: 25% 25% 25% 25%;
    grid-template-columns: 25% 25% 25% 25%;
  }
}
@media (min-width: 992px) {
  .event-list-view .event-products-bk .products-list {
    -ms-grid-columns: 20% 20% 20% 20% 20%;
    grid-template-columns: 20% 20% 20% 20% 20%;
  }
}
.event-list-view .event-page-bottom-bar {
  padding: 0 1rem;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 99;
  background-color: #FFF;
  -webkit-box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15);
  -ms-box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15);
}
.event-list-view .event-page-bottom-bar .container-r {
  margin: 0.75rem auto;
}
.event-list-view .event-page-bottom-bar .price {
  margin-left: 0.5rem;
  font-size: 1.125rem;
  font-weight: bold;
}
@media (min-width: 767px) {
  .event-list-view .event-banner-bk, .event-list-view .event-detail-bk, .event-list-view .event-page-bottom-bar {
    border-radius: 0.5rem;
    background-clip: padding-box;
  }
}

.product-event {
  padding-bottom: 0.5rem !important;
}
.product-event .counter-block {
  padding-left: 0.5rem;
}
.product-event .counter-block .counter-el button {
  width: 1.5rem;
  height: 1.5rem;
  color: #333333;
  font-size: 1.125rem;
  line-height: 1.125rem;
  font-weight: bold;
  background-color: #F4F4F4;
}
.product-event .counter-block .counter-el input {
  max-width: 50px;
  border: none;
  text-align: center;
  outline: 0;
  background-color: #fff;
  -moz-appearance: none;
  -webkit-appearance: none;
  -ms-progress-appearance: none;
}

.memberCetnerView .member-basicData-bk {
  margin-top: -0.5rem;
  padding: 1rem 2rem 2rem 2rem;
  background-color: #FFF;
  border-bottom: 1px solid #E3E3E3;
}
.memberCetnerView .member-basicData-bk .btn-login {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  font-size: 0.9375rem;
}
.memberCetnerView .member-basicData-bk .user-profile-imeg-outer {
  width: 6.25rem;
  height: 6.25rem;
}
@media (min-width: 992px) {
  .memberCetnerView .member-basicData-bk .user-profile-imeg-outer {
    width: 4.75rem;
    height: 4.75rem;
  }
}
.memberCetnerView .member-basicData-bk .user-profile-img {
  position: relative;
  width: 6.25rem;
  height: 6.25rem;
  background-color: #F4F4F4;
}
.memberCetnerView .member-basicData-bk .user-profile-img .btn-edit {
  padding-top: 0.25rem;
  padding-bottom: 0.5rem;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: 100%;
  font-size: 0.875rem;
  text-align: center;
  color: #FFF;
  background-color: rgba(0, 0, 0, 0.75);
  cursor: pointer;
}
.memberCetnerView .member-basicData-bk .member-level {
  margin-top: 0.25rem;
  padding: 0.125rem 0.5rem;
  display: inline-block;
  background-color: #20B794;
  border-radius: 2000px;
  background-clip: padding-box;
  font-size: 0.75rem;
  color: #fff;
}
.memberCetnerView .member-basicData-bk .user-profile-text {
  margin-left: 1rem;
}
.memberCetnerView .member-basicData-bk .user-profile-text .id {
  font-size: 0.875rem;
  font-weight: normal;
  color: #818181;
}
.memberCetnerView .member-basicData-bk .user-profile-text .name {
  font-size: 1.5rem;
  font-weight: 500;
  color: #333333;
}
.memberCetnerView .member-basicData-bk .user-profile-text .btn-edit-name {
  margin-left: 0.75rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/member/edit.svg");
  background-size: 1rem 1rem;
  width: 1rem;
  height: 1rem;
  cursor: pointer;
}
.memberCetnerView .member-basicData-bk .user-profile-text .btn-distribution-profit {
  margin-top: 0.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 0.875rem;
  font-weight: 500;
  height: 2rem;
  line-height: 2rem;
  cursor: pointer;
  background-color: #F4F4F4;
  border-radius: 2000px;
  background-clip: padding-box;
}
.memberCetnerView .member-basicData-bk .user-profile-text .btn-distribution-profit .icon-profit {
  margin-right: 0.25rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/member/profit.svg");
  background-size: 1rem 1rem;
  width: 1rem;
  height: 1rem;
}
.memberCetnerView .member-basicData-bk .user-profile-text .btn-distribution-profit .icon-arrow-right {
  margin-left: 0.25rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/arrow_right_grey.svg");
  background-size: 0.75rem 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
}
.memberCetnerView .member-bonus-bk {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 50% 50%;
  grid-template-columns: 50% 50%;
  background-color: #FFF;
  text-align: center;
  border-bottom: 1px solid #E3E3E3;
}
.memberCetnerView .member-bonus-bk > a {
  padding: 0.75rem 0;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 1rem;
  font-weight: 500;
}
.memberCetnerView .member-bonus-bk > a:first-child {
  border-right: 1px solid #E3E3E3;
}
.memberCetnerView .member-bonus-bk .icon-arrow-right {
  margin-left: 0.25rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/arrow_right_grey.svg");
  background-size: 1rem 1rem;
  width: 1rem;
  height: 1rem;
}
.memberCetnerView .member-rest-bonus-bk {
  padding: 1rem;
  font-size: 0.9375rem;
  background-color: #FFF;
  border-bottom: 1px solid #E3E3E3;
}
.memberCetnerView .member-rest-bonus-bk .i-bonus {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/member/i-bonus.svg");
  background-size: 1.25rem 1.25rem;
  width: 1.25rem;
  height: 1.25rem;
}
.memberCetnerView .member-rest-bonus-bk .i-time {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/member/i-time.svg");
  background-size: 1.25rem 1.25rem;
  width: 1.25rem;
  height: 1.25rem;
}
@media (min-width: 767px) {
  .memberCetnerView .member-rest-bonus-bk {
    font-size: 0.875rem;
  }
}
.memberCetnerView .member-quick-menu-list {
  display: -ms-grid;
  display: grid;
  text-align: center;
  -ms-grid-columns: 25% 25% 25% 25%;
  grid-template-columns: 25% 25% 25% 25%;
  background-color: #FFF;
}
.memberCetnerView .member-quick-menu-list li a {
  padding: 1.25rem 0;
  display: block;
  font-size: 0.875rem;
  color: #333333;
}
.memberCetnerView .member-quick-menu-list .icon.icon-order-management {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/member/order.svg");
  background-size: 2.25rem 2.25rem;
  width: 2.25rem;
  height: 2.25rem;
}
.memberCetnerView .member-quick-menu-list .icon.icon-advice-of-arrival {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/member/product.svg");
  background-size: 2.25rem 2.25rem;
  width: 2.25rem;
  height: 2.25rem;
}
.memberCetnerView .member-quick-menu-list .icon.icon-myCollection {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/member/collection.svg");
  background-size: 2.25rem 2.25rem;
  width: 2.25rem;
  height: 2.25rem;
}
.memberCetnerView .member-quick-menu-list .icon.icon-qa {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/member/question.svg");
  background-size: 2.25rem 2.25rem;
  width: 2.25rem;
  height: 2.25rem;
}
.memberCetnerView .member-menu-list {
  margin-bottom: 0.5rem;
}
.memberCetnerView .member-menu-list li a {
  font-size: 0.875rem;
}
.memberCetnerView .member-menu-list li.btn-logout button {
  background-image: none;
}

.memberCetnerView {
  margin-top: 0.5rem;
}
@media (min-width: 767px) {
  .memberCetnerView {
    margin-top: 1.25rem;
  }
}

@media (min-width: 992px) {
  .memberCetnerView {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .memberCetnerView .memberMainContent {
    margin-left: 0.75rem;
    border-radius: 0.5rem;
    background-clip: padding-box;
    width: calc(100% - 15.625rem - 0.75rem);
  }
  .memberCetnerView .memberSideMenu {
    width: 15.625rem;
  }
  .memberCetnerView .memberSideMenu .member-basicData-bk {
    padding: 1rem;
    border-radius: 0.5rem 0.5rem 0 0;
    background-clip: padding-box;
  }
  .memberCetnerView .memberSideMenu .member-basicData-bk .user-profile-img {
    position: relative;
    width: 4.75rem;
    height: 4.75rem;
  }
  .memberCetnerView .memberSideMenu .member-basicData-bk .user-profile-img .btn-edit {
    font-size: 0.8125rem;
  }
  .memberCetnerView .memberSideMenu .member-basicData-bk .user-profile-text {
    width: calc(100% - 4rem - 1rem);
  }
  .memberCetnerView .memberSideMenu .member-basicData-bk .user-profile-text .id {
    font-size: 0.75rem;
    font-weight: normal;
    color: #818181;
  }
  .memberCetnerView .memberSideMenu .member-basicData-bk .user-profile-text .name {
    font-size: 1rem;
    font-weight: 500;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .memberCetnerView .memberSideMenu .member-basicData-bk .user-profile-text .name .name-text {
    width: calc(100% - 1.75rem);
  }
  .memberCetnerView .memberSideMenu .member-basicData-bk .user-profile-text .btn-distribution-profit {
    font-size: 0.8125rem;
    width: 7.5rem;
    height: 2rem;
    line-height: 2rem;
    background-color: #F4F4F4;
    border-radius: 2000px;
    background-clip: padding-box;
  }
  .memberCetnerView .memberSideMenu .member-quick-menu-list {
    padding: 0.5rem 0;
    display: -ms-grid;
    display: grid;
    text-align: center;
    -ms-grid-columns: 50% 50%;
    grid-template-columns: 50% 50%;
  }
  .memberCetnerView .memberSideMenu .member-quick-menu-list li a {
    padding: 0.5rem 0;
  }
  .memberCetnerView .memberSideMenu .member-quick-menu-list .icon.icon-order-management {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    background-position: 50% 50%;
    background-image: url("../images/member/order.svg");
    background-size: 2rem 2rem;
    width: 2rem;
    height: 2rem;
  }
  .memberCetnerView .memberSideMenu .member-quick-menu-list .icon.icon-advice-of-arrival {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    background-position: 50% 50%;
    background-image: url("../images/member/product.svg");
    background-size: 2rem 2rem;
    width: 2rem;
    height: 2rem;
  }
  .memberCetnerView .memberSideMenu .member-quick-menu-list .icon.icon-myCollection {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    background-position: 50% 50%;
    background-image: url("../images/member/collection.svg");
    background-size: 2rem 2rem;
    width: 2rem;
    height: 2rem;
  }
  .memberCetnerView .memberSideMenu .member-quick-menu-list .icon.icon-qa {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    background-position: 50% 50%;
    background-image: url("../images/member/question.svg");
    background-size: 2rem 2rem;
    width: 2rem;
    height: 2rem;
  }
  .memberCetnerView .memberSideMenu .member-bonus-bk .icon-arrow-right {
    background-size: 0.75rem 0.75rem;
  }
  .memberCetnerView .memberSideMenu .member-menu-list {
    margin-top: 0;
    border-top: 1px solid #E3E3E3;
  }
  .memberCetnerView .memberSideMenu .member-menu-list li:last-child a {
    border-radius: 0 0 0.625rem 0.625rem;
    background-clip: padding-box;
  }
}
.memberContentWrap {
  margin-top: 0.5rem;
}
@media (min-width: 767px) {
  .memberContentWrap {
    margin-top: 0;
  }
}

.loginView, .registerView {
  margin: 0 auto;
  padding-top: 3.5rem;
}
.loginView .loginForm, .registerView .loginForm {
  padding: 1.5rem;
  min-height: calc(100vh - 3.5rem);
  background-color: #FFF;
}
.loginView .loginForm .logoCenter, .registerView .loginForm .logoCenter {
  margin: 10% auto;
  margin-top: 2%;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/logo.svg");
  background-size: 11rem 6rem;
  width: 11rem;
  height: 6rem;
  display: block !important;
}
.loginView .loginForm .btn-forget-pswd, .registerView .loginForm .btn-forget-pswd {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
}
.loginView .loginForm .link-register, .registerView .loginForm .link-register {
  margin-top: 1rem;
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #333333;
}
.loginView .loginForm .label-radioInput .text, .registerView .loginForm .label-radioInput .text {
  font-size: 0.875rem;
}
.loginView .loginForm .label-radioInput .text a, .registerView .loginForm .label-radioInput .text a {
  color: #9d9d82;
  text-decoration: underline;
}
.loginView .loginForm .error-text, .registerView .loginForm .error-text {
  padding-top: 0;
}
.loginView .third-party-login, .registerView .third-party-login {
  margin-top: 1.875rem;
  text-align: center;
}
.loginView .third-party-login .title, .registerView .third-party-login .title {
  position: relative;
  font-size: 0.875rem;
  font-weight: 500;
  color: #818181;
}
.loginView .third-party-login .title:after, .registerView .third-party-login .title:after {
  position: absolute;
  left: 0;
  top: 0.625rem;
  display: block;
  content: "";
  width: calc(50% - 1.875rem - 1rem);
  height: 1px;
  background-color: #E3E3E3;
}
.loginView .third-party-login .title:before, .registerView .third-party-login .title:before {
  position: absolute;
  right: 0;
  top: 0.625rem;
  display: block;
  content: "";
  width: calc(50% - 1.875rem - 1rem);
  height: 1px;
  background-color: #E3E3E3;
}
.loginView .third-party-login .login-method-list, .registerView .third-party-login .login-method-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.loginView .third-party-login .login-method-list .icon-apple, .registerView .third-party-login .login-method-list .icon-apple {
  margin: 1rem 1rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/socialMedia/apple.svg");
  background-size: 2rem 2rem;
  width: 2rem;
  height: 2rem;
}
.loginView .third-party-login .login-method-list .icon-facebook, .registerView .third-party-login .login-method-list .icon-facebook {
  margin: 1rem 1rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/socialMedia/facebook.svg");
  background-size: 2rem 2rem;
  width: 2rem;
  height: 2rem;
}
.loginView .third-party-login .login-method-list .icon-google, .registerView .third-party-login .login-method-list .icon-google {
  margin: 1rem 1rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/socialMedia/google.svg");
  background-size: 2rem 2rem;
  width: 2rem;
  height: 2rem;
}
.loginView .third-party-login .login-method-list .icon-line, .registerView .third-party-login .login-method-list .icon-line {
  margin: 1rem 1rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/socialMedia/line.svg");
  background-size: 2rem 2rem;
  width: 2rem;
  height: 2rem;
}
@media (min-width: 767px) {
  .loginView, .registerView {
    padding-top: 9rem;
    padding-bottom: 2rem;
    max-width: 30rem;
  }
  .loginView .loginForm, .registerView .loginForm {
    min-height: auto;
    border-radius: 0.5rem;
    background-clip: padding-box;
  }
}

.changePswd-view .changePswdForm {
  margin-top: 0.5rem;
}
@media (min-width: 767px) {
  .changePswd-view .changePswdForm {
    margin-top: 0;
    padding-top: 2rem;
    border-radius: 0.5rem;
    background-clip: padding-box;
  }
}

.forgetPswd-view .forgetPswdForm {
  margin-top: 3.5rem;
  padding-left: 2rem;
  padding-right: 2rem;
  height: calc(100vh - 3.5rem);
}
.forgetPswd-view .logoCenter {
  margin: 10% auto;
  margin-top: 2%;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/logo.svg");
  background-size: 150px 150px;
  display: block !important;
  width: 150px;
  height: 150px;
}
@media (min-width: 767px) {
  .forgetPswd-view {
    padding-top: 8.75rem;
    max-width: 30rem;
  }
  .forgetPswd-view .forgetPswdForm {
    margin-top: 0;
    padding-top: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;
    height: auto;
    border-radius: 0.5rem;
    background-clip: padding-box;
  }
}

@media (min-width: 992px) {
  .mall-view-container {
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    max-width: 960px;
  }
  .mall-view-container .mall-view {
    margin: 1.25rem 0;
    width: calc(100% - 13.75rem - 1.25rem);
  }
  .mall-view-container .product-side-menu {
    margin-top: 1.25rem;
  }
}
@media (min-width: 1200px) {
  .mall-view-container {
    max-width: 1140px;
  }
  .mall-view-container .mall-view {
    width: calc(100% - 16.25rem - 1.25rem);
  }
}
.mall-view-container .slick-prev {
  left: -12px;
}
.mall-view-container .slick-next {
  right: -12px;
}
.mall-view-container .slick-disabled {
  opacity: 0.75;
}
.mall-view-container .slick-next, .mall-view-container .slick-prev {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 2000px;
  background-clip: padding-box;
  -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
  -ms-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
  background-color: #fff;
  z-index: 99;
}
.mall-view-container .slick-next:hover, .mall-view-container .slick-next:focus, .mall-view-container .slick-prev:hover, .mall-view-container .slick-prev:focus {
  background-color: #fff;
}
.mall-view-container .slick-prev:before {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/slider_prev.svg");
  background-size: 0.75rem 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
}
.mall-view-container .slick-next:before {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/slider_next.svg");
  background-size: 0.75rem 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
}
@media (min-width: 767px) {
  .mall-view-container .hot-product-slider .slick-prev, .mall-view-container .hot-product-slider .slick-next,
  .mall-view-container .promotion-product-slider .slick-prev,
  .mall-view-container .promotion-product-slider .slick-next,
  .mall-view-container .event-product-slider .slick-prev,
  .mall-view-container .event-product-slider .slick-next {
    top: 45%;
  }
}
.mall-view-container .mall--banner-slider .slick-dots {
  bottom: 0.5rem;
}
.mall-view-container .mall--banner-slider .slick-dots li {
  margin: 0 0.125rem;
}
.mall-view-container .mall--banner-slider .slick-dots li button:before {
  border: none;
  background-color: #333333;
  width: 0.5rem;
  height: 0.5rem;
}
.mall-view-container .mall--banner-slider .slick-dots li.slick-active button:before {
  border: none;
  background-color: #9d9d82;
}
.mall-view-container .hot-product-slider .slick-dots,
.mall-view-container .promotion-product-slider .slick-dots,
.mall-view-container .event-product-slider .slick-dots {
  bottom: 0;
}
.mall-view-container .hot-product-slider .slick-dots li,
.mall-view-container .promotion-product-slider .slick-dots li,
.mall-view-container .event-product-slider .slick-dots li {
  margin: 0 0.125rem;
}
.mall-view-container .hot-product-slider .slick-dots li button:before,
.mall-view-container .promotion-product-slider .slick-dots li button:before,
.mall-view-container .event-product-slider .slick-dots li button:before {
  border: none;
  background-color: #BDBDBD;
  width: 0.5rem;
  height: 0.5rem;
}
.mall-view-container .hot-product-slider .slick-dots li.slick-active button:before,
.mall-view-container .promotion-product-slider .slick-dots li.slick-active button:before,
.mall-view-container .event-product-slider .slick-dots li.slick-active button:before {
  border: none;
  background-color: #9d9d82;
}
.mall-view-container .product-slide {
  padding: 0.25rem;
}
.mall-view-container .product {
  margin: 0;
  padding: 0;
  border: 1px solid #E3E3E3;
  border-radius: 0.5rem;
  background-clip: padding-box;
  overflow: hidden;
}
.mall-view-container .product .product-img-container {
  position: relative;
}
.mall-view-container .product .product-img-container .product-img {
  padding-bottom: 13rem;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
.mall-view-container .product .rainking {
  position: absolute;
  left: 0.5rem;
  top: 0;
  z-index: 2;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/ranking.svg");
  background-size: 1.5rem 1.875rem;
  width: 1.5rem;
  height: 1.875rem;
  line-height: 1.5rem;
  text-align: center;
  color: #FFF;
}
.mall-view-container .product .product-name {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  font-weight: bold;
  line-height: 1.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mall-view-container .product .product-price {
  position: static;
}
.mall-view-container .product .product-price .sale-price {
  font-size: 1.125rem;
  font-weight: 500;
}
.mall-view-container .product .control-area {
  position: static;
}
.mall-view-container .mall--banner-slider .slide .slide-img {
  padding-bottom: 100%;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
.mall-view-container .mall--banner-slider .slick-dots {
  bottom: 0.5rem;
}
.mall-view-container .mall--banner-slider .slick-dots li {
  margin: 0 0.125rem;
}
.mall-view-container .mall--banner-slider .slick-dots li button:before {
  border: none;
  background-color: #333333;
  width: 0.5rem;
  height: 0.5rem;
}
.mall-view-container .mall--banner-slider .slick-dots li.slick-active button:before {
  border: none;
  background-color: #9d9d82;
}
@media (min-width: 767px) {
  .mall-view-container .mall--banner-slider .slide .slide-img {
    padding-bottom: 38%;
  }
  .mall-view-container .mall--banner-slider .mall--banner-event-2 .banner {
    padding-bottom: 25%;
  }
}
@media (min-width: 992px) {
  .mall-view-container .mall--banner-slider .slide {
    overflow: hidden;
    border-radius: 0.5rem;
    background-clip: padding-box;
  }
}
.mall-view-container .mall--hot-products .heading-title {
  margin-bottom: 1.25rem;
  font-size: 1.25rem;
  font-weight: bold;
  text-align: center;
}
.mall-view-container .mall--hot-products .hot-product-slider {
  margin: 0 -0.25rem;
  padding-bottom: 2rem;
}
@media (min-width: 767px) {
  .mall-view-container .mall--hot-products .hot-product-slider {
    margin: 1rem 1rem;
  }
  .mall-view-container .mall--hot-products .hot-product-slider .slick-list {
    padding-right: 12%;
  }
  .mall-view-container .mall--hot-products .hot-product-slider .product-slide {
    float: left;
    width: 25% !important;
  }
}
@media (min-width: 992px) {
  .mall-view-container .mall--hot-products {
    margin-top: 0.75rem;
  }
}
.mall-view-container .event-block {
  margin-bottom: 0.5rem;
  padding: 1rem;
  background-color: #FFF;
}
@media (min-width: 992px) {
  .mall-view-container .event-block {
    margin-top: 0.75rem;
    border-radius: 0.5rem;
    background-clip: padding-box;
  }
}
.mall-view-container .mall--banner-event-1 .banner {
  padding-bottom: 6.25rem;
  display: block;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
@media (min-width: 992px) {
  .mall-view-container .mall--banner-event-1 .banner {
    padding-bottom: 6.875rem;
  }
}
.mall-view-container .mall--banner-event-2 {
  margin-top: 1rem;
  padding: 1rem;
  background-color: #efefef;
  border-radius: 1rem;
  background-clip: padding-box;
}
.mall-view-container .mall--banner-event-2 .banner {
  padding-bottom: 5.9375rem;
  display: block;
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
.mall-view-container .mall--banner-event-2 .promotion-product-slider {
  margin: 1rem -0.25rem 0 -0.25rem;
  padding-bottom: 1.875rem;
}
.mall-view-container .mall--banner-event-2 .promotion-product-slider .slick-list {
  padding-right: 15%;
}
.mall-view-container .mall--banner-event-2 .promotion-product-slider .product {
  margin: 0;
  padding: 0;
  border: 1px solid #E3E3E3;
  border-radius: 0.5rem;
  background-clip: padding-box;
  overflow: hidden;
}
.mall-view-container .mall--banner-event-2 .promotion-product-slider .product .product-img-container {
  position: relative;
}
.mall-view-container .mall--banner-event-2 .promotion-product-slider .product .product-img-container .product-img {
  padding-bottom: 12rem;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
.mall-view-container .mall--banner-event-2 .promotion-product-slider .product .product-name {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  font-weight: bold;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1rem;
  height: 2rem;
  height: 2rem;
  white-space: initial;
}
.mall-view-container .mall--banner-event-2 .promotion-product-slider .product .product-price {
  margin-top: 0.25rem;
  position: static;
}
.mall-view-container .mall--banner-event-2 .promotion-product-slider .product .product-price .sale-price {
  font-size: 1rem;
  font-weight: 500;
}
@media (min-width: 992px) {
  .mall-view-container .mall--banner-event-2 .banner {
    padding-bottom: 9.875rem;
  }
  .mall-view-container .mall--banner-event-2 .promotion-product-slider {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }
}
.mall-view-container .mall--banner-event-3 {
  padding-top: 1.5rem;
  padding-bottom: 2rem;
  padding-left: 1rem;
  padding-right: 1rem;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  border-radius: 1rem;
  background-clip: padding-box;
  overflow: hidden;
}
.mall-view-container .mall--banner-event-3 .text-area {
  text-align: center;
}
.mall-view-container .mall--banner-event-3 .text-area .title {
  margin-bottom: 0.5rem;
  font-size: 1.875rem;
  font-weight: bold;
}
.mall-view-container .mall--banner-event-3 .text-area .des {
  font-size: 0.9375rem;
  line-height: 1.5rem;
}
.mall-view-container .mall--banner-event-3 .event-product-slider {
  margin: 2rem -0.25rem;
  padding-bottom: 1.875rem;
}
.mall-view-container .mall--banner-event-3 .event-product-slider .slick-list {
  padding-right: 15%;
}
.mall-view-container .mall--banner-event-3 .event-product-slider .product {
  border: none;
}
.mall-view-container .mall--banner-event-3 .event-product-slider .product .product-img-container .product-img {
  padding-bottom: 12rem;
}
.mall-view-container .mall--banner-event-3 .event-product-slider .product .product-name {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  font-weight: bold;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1rem;
  height: 2rem;
  height: 2rem;
  white-space: initial;
}
.mall-view-container .mall--banner-event-3 .event-product-slider .product .product-price {
  margin-top: 0.25rem;
  position: static;
}
.mall-view-container .mall--banner-event-3 .event-product-slider .product .product-price .sale-price {
  font-size: 1rem;
  font-weight: 500;
}
@media (min-width: 767px) {
  .mall-view-container .mall--banner-event-3 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
@media (min-width: 992px) {
  .mall-view-container .mall--banner-event-3 {
    margin: -1rem;
    padding-top: 1.5rem;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    border-radius: 0.5rem;
    background-clip: padding-box;
    overflow: hidden;
  }
  .mall-view-container .mall--banner-event-3 .text-area {
    padding-left: 1.5rem;
    text-align: left;
  }
  .mall-view-container .mall--banner-event-3 .event-product-slider {
    margin-left: 1.5rem;
  }
}

@media (min-width: 992px) {
  .product-list-view-container {
    margin-left: auto;
    margin-right: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .product-list-view-container {
    max-width: 1140px;
  }
}
@media (min-width: 1600px) {
  .product-list-view-container {
    max-width: 1200px;
  }
  .product-list-view-container .product-side-menu {
    width: 260px;
  }
  .product-list-view-container .product-detail-view {
    margin: 1.25rem 0;
  }
}

.product-list-view {
  padding: 0 0.25rem;
  width: 100%;
}
@media (min-width: 767px) {
  .product-list-view {
    padding-top: 0;
    padding-bottom: 0;
  }
}
@media (min-width: 992px) {
  .product-list-view {
    width: calc(100% - 13.75rem - 1.25rem);
  }
  .product-list-view .product {
    margin: 0 0.375rem 1rem 0.375rem;
  }
}
@media (min-width: 1200px) {
  .product-list-view {
    width: calc(100% - 16.25rem - 1.25rem);
  }
}
.product-list-view.empty {
  display: block;
}
.product-list-view.empty .empty-block {
  padding-top: 10%;
  background: none;
}

.product-list-view-container .product-list,
.myCollectionView .product-list {
  padding: 0 0.25rem;
  padding-bottom: 1rem;
  width: 100%;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 50% 50%;
  grid-template-columns: 50% 50%;
}
@media (min-width: 767px) {
  .product-list-view-container .product-list,
  .myCollectionView .product-list {
    padding-bottom: 0;
    -ms-grid-columns: 25% 25% 25% 25%;
    grid-template-columns: 25% 25% 25% 25%;
  }
}
@media (min-width: 992px) {
  .product-list-view-container .product-list,
  .myCollectionView .product-list {
    -ms-grid-columns: 25% 25% 25% 25%;
    grid-template-columns: 25% 25% 25% 25%;
  }
  .product-list-view-container .product-list .product,
  .myCollectionView .product-list .product {
    margin: 0 0.375rem 1rem 0.375rem;
  }
}
@media (min-width: 1200px) {
  .product-list-view-container .product-list,
  .myCollectionView .product-list {
    -ms-grid-columns: 20% 20% 20% 20% 20%;
    grid-template-columns: 20% 20% 20% 20% 20%;
  }
}
@media (min-width: 1600px) {
  .product-list-view-container .product-list,
  .myCollectionView .product-list {
    -ms-grid-columns: 20% 20% 20% 20% 20%;
    grid-template-columns: 20% 20% 20% 20% 20%;
  }
}
.product-list-view-container .product-list.empty,
.myCollectionView .product-list.empty {
  display: block;
}
.product-list-view-container .product-list.empty .empty-block,
.myCollectionView .product-list.empty .empty-block {
  padding-top: 10%;
  background: none;
}

@media (min-width: 767px) {
  #modal_addToCart {
    text-align: center;
    padding: 0 !important;
  }
  #modal_addToCart:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -4px;
  }
  #modal_addToCart .modal-dialog {
    max-width: 420px;
    position: static;
    display: inline-block;
    text-align: left;
    vertical-align: middle;
    -webkit-transform: translate(0, -20%);
    transform: translate(0, -20%);
  }
}
.product-detail-view {
  padding-bottom: 4rem;
}
.product-detail-view.browser {
  padding-bottom: 12rem;
}
.product-detail-view .product-detail-view--top---left .product-gallery-container {
  position: relative;
}
.product-detail-view .product-detail-view--top---left .product-status-badge {
  padding: 0.25rem 0.5rem;
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  z-index: 2;
  border-radius: 0.5rem;
  background-clip: padding-box;
  font-size: 0.75rem;
  color: #FFF;
  background-color: #7c9a9f;
}
.product-detail-view .product-detail-view--top---left .promo-text {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  position: absolute;
  left: 0;
  bottom: 4px;
  z-index: 2;
  width: 100%;
  color: #FFF;
  background-color: rgba(0, 0, 0, 0.7);
}
.product-detail-view .product-detail-view--top---left .pagingInfo {
  padding: 0.25rem 0.5rem;
  position: absolute;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  bottom: 2.5rem;
  z-index: 2;
  border-radius: 0.5rem;
  background-clip: padding-box;
  font-size: 0.75rem;
  color: #FFF;
  background-color: rgba(0, 0, 0, 0.75);
}
.product-detail-view .product-detail-view--top---left .btn-zoom-in {
  padding: 0.25rem 0.5rem;
  position: absolute;
  right: 0.5rem;
  bottom: 2.5rem;
  z-index: 2;
  border-radius: 0.5rem;
  background-clip: padding-box;
  font-size: 0.75rem;
  color: #FFF;
  background-color: rgba(0, 0, 0, 0.75);
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/zoom_in.svg");
  background-size: 1.25rem 1.25rem;
  width: 2.25rem;
  height: 2.25rem;
  cursor: pointer;
}
.product-detail-view .product-detail-view--top---left .product-gallery {
  overflow: hidden;
}
.product-detail-view .product-detail-view--top---left .product-gallery .product-img {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}
.product-detail-view .product-detail-view--top---left .product-gallery .slick-prev {
  left: 0.5rem;
}
.product-detail-view .product-detail-view--top---left .product-gallery .slick-next {
  right: 0.5rem;
}
.product-detail-view .product-detail-view--top---left .product-gallery .slick-next, .product-detail-view .product-detail-view--top---left .product-gallery .slick-prev {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.1875rem;
  background-clip: padding-box;
  -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
  -ms-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9;
}
.product-detail-view .product-detail-view--top---left .product-gallery .slick-next:hover, .product-detail-view .product-detail-view--top---left .product-gallery .slick-next:focus, .product-detail-view .product-detail-view--top---left .product-gallery .slick-prev:hover, .product-detail-view .product-detail-view--top---left .product-gallery .slick-prev:focus {
  background-color: rgba(0, 0, 0, 0.25);
}
.product-detail-view .product-detail-view--top---left .product-gallery .slick-prev:before {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/arrow_left_w.svg");
  background-size: 1rem 1rem;
  width: 0.75rem;
  height: 0.75rem;
}
.product-detail-view .product-detail-view--top---left .product-gallery .slick-next:before {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/arrow_right_w.svg");
  background-size: 1rem 1rem;
  width: 0.75rem;
  height: 0.75rem;
}
.product-detail-view .product-detail-view--top---left .product-gallery--nav .slick-track {
  -webkit-transform: translate3d(0px, 0px, 0px) !important;
          transform: translate3d(0px, 0px, 0px) !important;
}
.product-detail-view .product-detail-view--top---left .product-gallery--nav .product-thumb {
  height: 100px;
  overflow: hidden;
}
.product-detail-view .product-detail-view--top---left .product-gallery--nav .product-thumb > img {
  width: 100%;
  max-width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}
.product-detail-view .product-detail-view--top---right {
  padding: 1rem;
  background-color: #FFF;
}
.product-detail-view .product-detail-view--top---right .label-text {
  margin-right: 0.5rem;
  font-size: 0.875rem;
  font-weight: normal;
  color: #818181;
}
.product-detail-view .product-detail-view--top---right .promo-slogan {
  margin-bottom: 0.5rem;
  width: 90%;
  font-size: 0.875rem;
  color: #818181;
}
.product-detail-view .product-detail-view--top---right .product-name {
  font-size: 1rem;
  font-weight: 700;
}
.product-detail-view .product-detail-view--top---right .tag-list {
  margin: 0.5rem 0;
}
.product-detail-view .product-detail-view--top---right .tag-list .tag {
  margin: 0.125rem 0.125rem;
  padding: 0.25rem 0.5rem;
  display: inline-block;
  font-size: 0.75rem;
  border: none;
  background-color: #EAF2FF;
}
.product-detail-view .product-detail-view--top---right .tag-list .tag > a {
  color: #3A7FF2;
}
.product-detail-view .product-detail-view--top---right .tag:first-child {
  margin-left: 0;
}
.product-detail-view .product-detail-view--top---right .product-spec-select-group {
  margin-top: 1rem;
}
.product-detail-view .product-detail-view--top---right .product-spec-select-group .label-title {
  font-size: 0.875rem;
  font-weight: normal;
  color: #818181;
}
.product-detail-view .product-detail-view--top---right .product-price {
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}
.product-detail-view .product-detail-view--top---right .product-price .sale-price {
  font-size: 1.375rem;
  color: #FD2E2E;
  font-weight: 600;
}
.product-detail-view .product-detail-view--top---right .product-price .original-price {
  margin-left: 0.25rem;
  font-size: 0.875rem;
  text-decoration: line-through;
  color: #333333;
  font-weight: normal;
}
.product-detail-view .product-detail-view--top---right .counter-block {
  padding: 0.5rem 0;
}
.product-detail-view .product-detail-view--top---right .counter-block .counter-el button {
  width: 1.5rem;
  height: 1.5rem;
  color: #333333;
  font-size: 1.125rem;
  line-height: 1.125rem;
  font-weight: bold;
  background-color: #F4F4F4;
}
.product-detail-view .product-detail-view--top---right .counter-block .counter-el input {
  max-width: 80px;
  border: none;
  text-align: center;
  background-color: #fff;
}
.product-detail-view .product-detail-view--mid {
  margin-top: 0.5rem;
}
.product-detail-view .product-detail-view--mid .product-intro.editor-block {
  padding: 1rem 2rem;
  background-color: #FFF;
  border-radius: 0 0 8px 8px;
  background-clip: padding-box;
  overflow: hidden;
}
.product-detail-view .product-detail-view--mid .product-intro.editor-block img {
  margin: 1rem auto;
  display: block;
  width: 100%;
}
@media (min-width: 992px) {
  .product-detail-view .product-detail-view--mid .product-intro.editor-block img {
    margin: 1.5rem auto;
  }
}
.product-detail-view .product-detail-view--mid .product-intro.editor-block iframe {
  margin: 1rem auto;
  width: 100% !important;
  height: 50vw;
}
@media (min-width: 992px) {
  .product-detail-view .product-detail-view--mid .product-intro.editor-block iframe {
    margin: 1.5rem auto;
    height: 40vw;
  }
}
@media (min-width: 1200px) {
  .product-detail-view .product-detail-view--mid .product-intro.editor-block iframe {
    margin: 1.5rem auto;
    height: 30rem;
  }
}
.product-detail-view .product-detail-view--bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  background-color: #FFF;
  -webkit-box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.15);
  -ms-box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.15);
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.15);
}
.product-detail-view .product-detail-view--bottom button {
  font-size: 1rem;
  height: 3.5rem;
}
.product-detail-view .product-detail-view--bottom .btn-addToCollection {
  width: 25%;
  border-right: 1px solid #E3E3E3;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.product-detail-view .product-detail-view--bottom .btn-addToCollection .icon-collection {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/product_collection.svg");
  background-size: 1.375rem 1.375rem;
  width: 1.75rem;
  height: 1.75rem;
}
.product-detail-view .product-detail-view--bottom .btn-addToCollection.active .icon-collection {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/product_collection_active.svg");
  background-size: 1.25rem 1.25rem;
}
.product-detail-view .product-detail-view--bottom .btn-goToBuy {
  width: 35%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.product-detail-view .product-detail-view--bottom .btn-goToBuy .icon-goToBuy {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/product_goBuy.svg");
  background-size: 1.25rem 1.25rem;
  width: 1.75rem;
  height: 1.75rem;
}
.product-detail-view .product-detail-view--bottom .btn-arrival-notice {
  width: 45%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.product-detail-view .product-detail-view--bottom .btn-arrival-notice .icon-default {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/default.svg");
  background-size: 1.25rem 1.25rem;
  width: 1.75rem;
  height: 1.75rem;
}
.product-detail-view .product-detail-view--bottom .btn-addToCart {
  width: 40%;
  color: #FFF;
  background-color: #9d9d82;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.product-detail-view .product-detail-view--bottom .btn-addToCart.disabled {
  color: #818181;
  background-color: #F4F4F4;
}
.product-detail-view .related-product-list {
  padding: 0 0.25rem;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 50% 50%;
  grid-template-columns: 50% 50%;
  background-color: #E3E3E3;
}
@media (min-width: 767px) {
  .product-detail-view .related-product-list {
    -ms-grid-columns: 33.333% 33.333% 33.333%;
    grid-template-columns: 33.333% 33.333% 33.333%;
  }
}
@media (min-width: 992px) {
  .product-detail-view .related-product-list {
    -ms-grid-columns: 25% 25% 25% 25%;
    grid-template-columns: 25% 25% 25% 25%;
  }
}
@media (min-width: 1200px) {
  .product-detail-view .related-product-list {
    -ms-grid-columns: 25% 25% 25% 25%;
    grid-template-columns: 25% 25% 25% 25%;
  }
}
@media (min-width: 1600px) {
  .product-detail-view .related-product-list {
    -ms-grid-columns: 25% 25% 25% 25%;
    grid-template-columns: 25% 25% 25% 25%;
  }
}

@media (min-width: 767px) {
  .product-detail-view .product-detail-view--top {
    padding: 1.5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: #FFF;
  }
  .product-detail-view .product-detail-view--top .product-detail-view--top---left {
    width: 50%;
  }
  .product-detail-view .product-detail-view--top .product-detail-view--top---left .product-gallery {
    overflow: hidden;
  }
  .product-detail-view .product-detail-view--top .product-detail-view--top---left .product-gallery--nav {
    display: block;
    overflow: hidden;
  }
  .product-detail-view .product-detail-view--top .product-detail-view--top---left .product-gallery--nav .slick-track {
    margin: 0 -2px;
  }
  .product-detail-view .product-detail-view--top .product-detail-view--top---left .product-gallery--nav .product-thumb {
    padding: 4px 2px;
    opacity: 0.5;
    cursor: pointer;
  }
  .product-detail-view .product-detail-view--top .product-detail-view--top---left .product-gallery--nav .product-thumb.slick-current {
    opacity: 1;
  }
  .product-detail-view .product-detail-view--top .product-detail-view--top---right {
    padding: 0 1.5rem;
    width: 50%;
  }
  .product-detail-view .product-detail-view--top .product-detail-view--top---right .product-spec-select-group {
    margin-top: 1rem;
  }
  .product-detail-view .product-detail-view--top .product-detail-view--top---right .product-price {
    margin-top: 1rem;
  }
  .product-detail-view .product-detail-view--top .product-detail-view--top---right .control-block {
    margin-top: 1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: start;
    max-width: 340px;
  }
  .product-detail-view .product-detail-view--top .product-detail-view--top---right .control-block button {
    font-size: 1rem;
    height: 2.5rem;
  }
  .product-detail-view .product-detail-view--top .product-detail-view--top---right .control-block .btn-addToCollection {
    margin-left: -0.625rem;
    width: 25%;
    border-right: 1px solid #E3E3E3;
  }
  .product-detail-view .product-detail-view--top .product-detail-view--top---right .control-block .btn-addToCollection .icon-collection {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    background-position: 50% 50%;
    background-image: url("../images/common/product_collection.svg");
    background-size: 1.375rem 1.375rem;
    width: 1.75rem;
    height: 1.75rem;
  }
  .product-detail-view .product-detail-view--top .product-detail-view--top---right .control-block .btn-addToCollection.active .icon-collection {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    background-position: 50% 50%;
    background-image: url("../images/common/product_collection_active.svg");
    background-size: 1.25rem 1.25rem;
  }
  .product-detail-view .product-detail-view--top .product-detail-view--top---right .control-block .btn-goToBuy {
    width: 35%;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .product-detail-view .product-detail-view--top .product-detail-view--top---right .control-block .btn-goToBuy .icon-goToBuy {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    background-position: 50% 50%;
    background-image: url("../images/common/product_goBuy.svg");
    background-size: 1.25rem 1.25rem;
    width: 1.75rem;
    height: 1.75rem;
  }
  .product-detail-view .product-detail-view--top .product-detail-view--top---right .control-block .btn-arrival-notice .icon-default {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    background-position: 50% 50%;
    background-image: url("../images/common/default.svg");
    background-size: 1.25rem 1.25rem;
    width: 1.75rem;
    height: 1.75rem;
  }
  .product-detail-view .product-detail-view--top .product-detail-view--top---right .control-block .btn-addToCart {
    margin-left: 5%;
    width: 40%;
    color: #FFF;
    background-color: #9d9d82;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    border-radius: 8px;
    background-clip: padding-box;
  }
  .product-detail-view .product-detail-view--mid {
    margin-top: 1.5rem;
    border-radius: 8px 8px 0 0;
    background-clip: padding-box;
    overflow: hidden;
  }
  .product-detail-view .product-detail-view--mid .related-product-list {
    background-color: #FFF;
  }
  .product-detail-view .product-detail-view--mid .related-product-list .product {
    border: 1px solid #E3E3E3;
  }
  .product-detail-view .product-detail-view--bottom {
    display: none;
  }
}
@media (min-width: 992px) {
  .product-detail-view-container {
    margin-left: auto;
    margin-right: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    max-width: 960px;
  }
  .product-detail-view {
    width: calc(100% - 13.75rem - 1.25rem);
  }
  .product-detail-view .product-detail-view--top {
    border-radius: 8px;
    background-clip: padding-box;
    overflow: hidden;
  }
  .product-detail-view .product-detail-view--top .product-detail-view--top---left .product-gallery--nav {
    overflow: hidden;
  }
  .product-detail-view .product-detail-view--top .product-detail-view--top---left .product-gallery--nav .slick-track {
    margin: 0 -2px;
  }
  .product-detail-view .product-detail-view--top .product-detail-view--top---left .product-gallery--nav .product-thumb {
    padding: 4px 2px;
    opacity: 0.5;
    cursor: pointer;
  }
  .product-detail-view .product-detail-view--top .product-detail-view--top---left .product-gallery--nav .product-thumb.slick-current {
    opacity: 1;
  }
  .product-detail-view .product-detail-view--top .product-detail-view--top---left .product-gallery--nav .product-thumb {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
  }
  .product-detail-view .product-detail-view--top .product-detail-view--top---left .product-gallery .product-img {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
  }
  .product-detail-view .product-detail-view--top .product-detail-view--top---right {
    padding-right: 0;
  }
  .product-detail-view .product-detail-view--top .product-detail-view--top---right .product-description {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.9375rem;
    line-height: 1.625rem;
  }
  .product-detail-view .product-detail-view--mid {
    background-color: #FFF;
  }
  .product-detail-view .product-detail-view--mid .post-list {
    margin-top: 0;
    padding-top: 1.5rem;
    background-color: #ddd;
  }
  .product-detail-view .product-detail-view--mid .post-list .post-item {
    margin: 0 auto;
    margin-bottom: 1.5rem;
    max-width: 640px;
    border: 1px solid #E3E3E3;
    border-radius: 8px;
    background-clip: padding-box;
  }
  .product-detail-view .product-detail-view--mid .post-list .post-item:first-child {
    border-radius: 8px;
    background-clip: padding-box;
  }
}
@media (min-width: 1200px) {
  .product-detail-view-container {
    max-width: 1140px;
  }
  .product-detail-view {
    width: calc(100% - 16.25rem - 1.25rem);
  }
  .product-detail-view .product-detail-view--top .product-detail-view--top---right .promo-slogan {
    margin-bottom: 0.5rem;
    width: 90%;
    font-size: 1rem;
    color: #818181;
  }
  .product-detail-view .product-detail-view--top .product-detail-view--top---right .product-name {
    font-size: 1.25rem;
    line-height: 1.875rem;
    font-weight: 600;
  }
  .product-detail-view .product-detail-view--top .product-detail-view--top---right .product-spec-select-group {
    margin-top: 1rem;
  }
  .product-detail-view .product-detail-view--top .product-detail-view--top---right .product-spec-select-group .label-title {
    font-size: 0.875rem;
    font-weight: normal;
    color: #818181;
  }
}
@media (min-width: 1600px) {
  .product-detail-view-container {
    max-width: 1200px;
  }
  .product-side-menu {
    width: 260px;
  }
}
#modal_addToCart .btn-close-modal, #modal_goCheckout .btn-close-modal {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/close.svg");
  background-size: 20px 20px;
  width: 24px;
  height: 24px;
}
#modal_addToCart .modal-body, #modal_goCheckout .modal-body {
  padding: 1rem 0;
  padding-bottom: 0;
}
#modal_addToCart .scroll-area, #modal_goCheckout .scroll-area {
  max-height: 360px;
  overflow-y: auto;
}
#modal_addToCart .product-thumb-view, #modal_goCheckout .product-thumb-view {
  margin-bottom: 1rem;
  padding: 0 1rem;
}
#modal_addToCart .product-thumb-view .product-img, #modal_goCheckout .product-thumb-view .product-img {
  margin-right: 0.75rem;
  width: 8.125rem;
  position: relative;
  padding-bottom: 30%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}
#modal_addToCart .product-thumb-view .product-text, #modal_goCheckout .product-thumb-view .product-text {
  width: calc(100% - 8.125rem - 1.5rem - 1.5rem);
  text-align: left;
}
#modal_addToCart .product-thumb-view .product-text .promo-slogan, #modal_goCheckout .product-thumb-view .product-text .promo-slogan {
  margin-bottom: 0.25rem;
  width: 100%;
  font-size: 0.875rem;
  color: #818181;
  text-align: left;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-height: 1.5rem;
  height: 1.5rem;
}
#modal_addToCart .product-thumb-view .product-text .product-name, #modal_goCheckout .product-thumb-view .product-text .product-name {
  font-size: 0.875rem;
  font-weight: 500;
  text-align: left;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.25rem;
  height: 2.5rem;
}
#modal_addToCart .product-thumb-view .product-text .product-price, #modal_goCheckout .product-thumb-view .product-text .product-price {
  margin-top: 0.5rem;
  text-align: left;
}
#modal_addToCart .product-thumb-view .product-text .product-price .sale-price, #modal_goCheckout .product-thumb-view .product-text .product-price .sale-price {
  font-size: 1.125rem;
  color: #9d9d82;
  font-weight: 600;
}
#modal_addToCart .product-thumb-view .btn-close-modal, #modal_goCheckout .product-thumb-view .btn-close-modal {
  width: 1.5rem;
}
#modal_addToCart .counter-block, #modal_goCheckout .counter-block {
  padding: 0.5rem 0;
}
#modal_addToCart .counter-block .counter-el button, #modal_goCheckout .counter-block .counter-el button {
  width: 1.5rem;
  height: 1.5rem;
  color: #333333;
  font-size: 1.125rem;
  line-height: 1.125rem;
  font-weight: bold;
  background-color: #F4F4F4;
}
#modal_addToCart .counter-block .counter-el input, #modal_goCheckout .counter-block .counter-el input {
  max-width: 80px;
  border: none;
  text-align: center;
  background-color: #fff;
}
#modal_addToCart .modal-footer, #modal_goCheckout .modal-footer {
  padding: 0;
}
#modal_addToCart .modal-footer .btn-addToCart, #modal_goCheckout .modal-footer .btn-addToCart {
  width: 100%;
  border-radius: 0;
  background-clip: padding-box;
  height: 3rem;
  line-height: 3rem;
  cursor: pointer;
}

.modal-product-gallery .modal-content, .modal-product-gallery .modal-body {
  background-color: transparent;
  border: none;
  -webkit-box-shadow: none;
  -ms-box-shadow: none;
  box-shadow: none;
}
.modal-product-gallery .modal-body .header {
  margin: 0 auto;
  max-width: 350px;
}
@media (min-width: 767px) {
  .modal-product-gallery .modal-body .header {
    max-width: 450px;
  }
}
.modal-product-gallery .modal-body .icon-resize {
  margin-right: 0.5rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/resize.svg");
  background-size: 1.25rem 1.25rem;
  width: 1.25rem;
  height: 1.25rem;
}
.modal-product-gallery .modal-body .notice-text {
  margin: 1rem 0;
  color: #FFF;
}
.modal-product-gallery .modal-body .btn-close-w-modal {
  margin-top: 3px;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/close_w.svg");
  background-size: 1.25rem 1.25rem;
  width: 1.5rem;
  height: 1.5rem;
  cursor: pointer;
  float: right;
}
.modal-product-gallery .modal-product-gallery-main .product-img {
  position: relative;
  overflow: hidden;
}
.modal-product-gallery .modal-product-gallery-main .product-img > span {
  margin: 0 auto;
  display: block !important;
  max-width: 350px;
}
@media (min-width: 767px) {
  .modal-product-gallery .modal-product-gallery-main .product-img > span {
    max-width: 450px;
  }
}
.modal-product-gallery .modal-product-gallery-main .product-img img {
  margin: 0 auto;
  max-width: 350px;
  max-height: 80vh;
}
@media (min-width: 767px) {
  .modal-product-gallery .modal-product-gallery-main .product-img img {
    max-width: 450px;
  }
}
.modal-product-gallery .modal-product-gallery-main .slick-prev {
  left: 0.5rem;
}
.modal-product-gallery .modal-product-gallery-main .slick-next {
  right: 0.5rem;
}
.modal-product-gallery .modal-product-gallery-main .slick-next, .modal-product-gallery .modal-product-gallery-main .slick-prev {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.1875rem;
  background-clip: padding-box;
  -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
  -ms-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9;
}
.modal-product-gallery .modal-product-gallery-main .slick-next:hover, .modal-product-gallery .modal-product-gallery-main .slick-next:focus, .modal-product-gallery .modal-product-gallery-main .slick-prev:hover, .modal-product-gallery .modal-product-gallery-main .slick-prev:focus {
  background-color: rgba(0, 0, 0, 0.25);
}
.modal-product-gallery .modal-product-gallery-main .slick-prev:before {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/arrow_left_w.svg");
  background-size: 1rem 1rem;
  width: 0.75rem;
  height: 0.75rem;
}
.modal-product-gallery .modal-product-gallery-main .slick-next:before {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/arrow_right_w.svg");
  background-size: 1rem 1rem;
  width: 0.75rem;
  height: 0.75rem;
}

.lilkoko .product-detail-view {
  padding: 1rem 1rem 4.5rem 1rem;
}
@media (min-width: 767px) {
  .lilkoko .product-detail-view {
    padding-top: 0;
  }
}
.lilkoko .product-detail-view .product-detail-view--top, .lilkoko .product-detail-view .product-detail-view--mid {
  border: 1px solid #000;
}
.lilkoko .product-detail-view .product-detail-view--top---right .product-price .sale-price {
  color: #EA84B4;
}
.lilkoko .product-detail-view .tabmenu {
  border-color: #000;
}
.lilkoko .product-detail-view .tabmenu ul.nav-tabs > li.active:before {
  background-color: #EA84B4;
}
.lilkoko .product-detail-view .product-detail-view--top---left .product-gallery--nav .product-thumb > img {
  height: 100%;
}

.onlineServiceView .uploadFile-bk {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 33.333% 33.333% 33.333%;
  grid-template-columns: 33.333% 33.333% 33.333%;
  background-color: #FFF;
  border-top: 1px solid #E3E3E3;
  position: fixed;
  top: 4rem;
  left: 0;
  width: 100%;
  z-index: 99;
}
.onlineServiceView .uploadFile-bk .writePost-button {
  padding: 0.5rem 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: #333333;
  text-align: center;
  border-right: 1px solid #E3E3E3;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  cursor: pointer;
}
.onlineServiceView .uploadFile-bk .writePost-button:last-child {
  border-right: 0;
}
.onlineServiceView .uploadFile-bk .icon-add-picture {
  width: 1.875rem;
  height: 1.875rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/service/photo.svg");
  background-size: 1rem 1rem;
}
.onlineServiceView .uploadFile-bk .icon-add-video {
  width: 1.875rem;
  height: 1.875rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/service/video.svg");
  background-size: 1rem 1rem;
}
.onlineServiceView .uploadFile-bk .icon-add-order {
  width: 1.875rem;
  height: 1.875rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/service/order.svg");
  background-size: 1rem 1rem;
}
.onlineServiceView .chat-bk {
  padding: 0 1rem;
  padding-top: 6.875rem;
  padding-bottom: 1rem;
  overflow-y: scroll;
  height: calc(100vh - 4rem - 2.875rem);
}
.onlineServiceView .chat-bk .chat-time-duration {
  margin-top: 1rem;
  margin-bottom: 1rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: normal;
  color: #818181;
}
.onlineServiceView .chat-bk .dialogue-service {
  margin-bottom: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.onlineServiceView .chat-bk .dialogue-my {
  margin-bottom: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.onlineServiceView .chat-bk .dialogue-my .time-display {
  text-align: right;
}
.onlineServiceView .chat-bk .dialogue {
  padding: 0.75rem;
  padding-bottom: 0;
  font-size: 14px;
  font-weight: 500;
  color: #333333;
  background-color: #FFF;
  border-radius: 0.625rem;
  background-clip: padding-box;
}
.onlineServiceView .chat-bk .dialogue .text {
  margin-bottom: 0.75rem;
}
.onlineServiceView .chat-bk .dialogue .text.system-text {
  margin-bottom: 0;
}
.onlineServiceView .chat-bk .time-display {
  margin: 0 0.75rem;
  font-size: 0.75rem;
  font-weight: normal;
  color: #818181;
}
.onlineServiceView .chat-bk .file {
  position: relative;
  color: #818181;
}
.onlineServiceView .chat-bk .file .overlayer {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.65);
  border-radius: 0.5rem;
  background-clip: padding-box;
}
.onlineServiceView .chat-bk .file .progress {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 4rem;
  height: 0.375rem;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 9;
}
.onlineServiceView .chat-bk .file .progress .progress-bar {
  background-color: #FFF;
}
.onlineServiceView .chat-bk .file .progress-text {
  position: absolute;
  z-index: 2;
  width: 100%;
  left: 0;
  bottom: 0.5rem;
  text-align: center;
  color: #FFF;
}
.onlineServiceView .chat-bk .file i.icon-file {
  margin-right: 0.25rem;
  width: 1rem;
  height: 1.875rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/service/order_grey.svg");
  background-size: 1rem 1rem;
}
.onlineServiceView .chat-bk .file .upload-thumb {
  margin-bottom: 0.75rem;
  padding-bottom: 5rem;
  width: 5rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  border-radius: 0.25rem;
  background-clip: padding-box;
  overflow: hidden;
  cursor: pointer;
}
.onlineServiceView .chat-bk .file .upload-thumb.isvideo .overlayer:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 2rem;
  height: 2rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/play_video.svg");
  background-size: 2rem 2rem;
}
.onlineServiceView .writeMsg-bk {
  padding: 0.75rem 1rem;
  height: 3.25rem;
  background-color: #FFF;
  position: fixed;
  left: 0;
  bottom: 4rem;
  width: 100%;
  z-index: 1000;
}
.onlineServiceView .writeMsg-bk .textarea {
  padding: 0;
}
.onlineServiceView .writeMsg-bk .textarea .user-profile-img {
  width: 2rem;
  height: 2rem;
}
.onlineServiceView .writeMsg-bk .textarea textarea {
  padding-top: 0.25rem;
  padding-left: 1rem;
  width: calc(100% - 2rem - 3rem);
  height: 26px;
  line-height: 1.25rem;
  border: 0;
  outline: 0;
  resize: none;
  vertical-align: middle;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #333333;
}
.onlineServiceView .writeMsg-bk .textarea .btn-send-msg {
  width: 3rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #333333;
}

#modal-select-order .empty-block {
  padding-top: 15vh;
  background-color: transparent;
}
#modal-select-order .modal-dialog {
  width: 90%;
}
@media (min-width: 767px) {
  #modal-select-order .modal-dialog {
    width: 480px;
  }
}
#modal-select-order .modal-content {
  border-radius: 0.5rem;
  background-clip: padding-box;
  overflow: hidden;
  border: none;
}
#modal-select-order .modal-header {
  padding: 1rem;
  border-bottom: 1px solid #E3E3E3;
}
#modal-select-order .modal-body {
  padding: 0;
  padding-top: 0.5rem;
  background-color: #E3E3E3;
  height: 85vh;
  overflow-y: auto;
}
@media (min-width: 767px) {
  #modal-select-order .modal-body {
    height: 500px;
  }
}
#modal-select-order .modal-body .order {
  margin-bottom: 0.5rem;
  border-radius: 0;
}
#modal-select-order .modal-body .order .order-body {
  padding: 0;
}
#modal-select-order .modal-body .order .order-body .product.product-horizental {
  padding: 1rem;
}
#modal-select-order .modal-body .order .order-body .product.product-horizental:hover {
  -webkit-box-shadow: none;
  -ms-box-shadow: none;
  box-shadow: none;
}
#modal-select-order .modal-body .order .order-body .product.product-horizental:last-child {
  border: none;
}
#modal-select-order .modal-body .order .order-body .product.product-horizental .promo-slogan {
  line-height: 1;
}
#modal-select-order .modal-body .order .order-body .product.product-horizental .product-name {
  margin-bottom: 0.25rem;
  font-weight: 500;
}
#modal-select-order .modal-body .order .order-body .product.product-horizental .product-spec {
  margin-bottom: 0.5rem;
  margin-left: 0.5rem;
  line-height: 1;
  color: #818181;
}
#modal-select-order .modal-body .order .order-footer {
  -ms-grid-columns: initial;
  grid-template-columns: initial;
}
#modal-select-order .modal-body .order .order-footer .data-display {
  padding: 0.5rem 1rem;
}
#modal-select-order .modal-body .order .order-footer .control-block {
  padding: 0.5rem 1rem;
  border-top: 1px solid #E3E3E3;
}
#modal-select-order .modal-body .order .order-footer .control-block .icon-send {
  margin-right: 0.25rem;
  width: 1rem;
  height: 1rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/service/send.svg");
  background-size: 1rem 1rem;
}

.myCollectionView {
  margin-top: -0.5rem;
}
@media (min-width: 767px) {
  .myCollectionView {
    margin-top: 0;
  }
}
.myCollectionView .tab-content {
  margin-top: 0.5rem;
}
@media (min-width: 767px) {
  .myCollectionView .tab-content {
    margin-top: 0;
  }
}
.myCollectionView .tabmenu.sticky {
  position: fixed;
  top: calc(4rem + env(safe-area-inset-top));
  top: 4rem;
  width: 100%;
}
.myCollectionView .post-list-view, .myCollectionView .product-list-view {
  padding-bottom: 0;
}
@media (min-width: 767px) {
  .myCollectionView {
    padding-bottom: 0;
  }
  .myCollectionView .tabmenu {
    margin-bottom: 0.5rem;
    border-radius: 0.5rem;
    background-clip: padding-box;
    overflow: hidden;
  }
  .myCollectionView .tabmenu.sticky {
    position: static;
  }
  .myCollectionView .tab-content {
    margin-top: 0;
  }
  .myCollectionView .post-list-view {
    padding: 2rem 5rem;
    background-color: #F4F4F4;
    border-radius: 0.5rem;
    background-clip: padding-box;
    overflow: hidden;
  }
  .myCollectionView .post-list-view .post-item {
    margin-bottom: 1rem;
    border: 1px solid #E3E3E3;
  }
  .myCollectionView .product-list-view {
    width: 100%;
    -ms-grid-columns: 25% 25% 25% 25%;
    grid-template-columns: 25% 25% 25% 25%;
  }
}
@media (min-width: 992px) {
  .myCollectionView .post-list-view {
    padding: 2rem 15%;
  }
}

.myProfile-view .myProfilePic {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
@media (min-width: 767px) {
  .myProfile-view .myProfilePic {
    margin-top: 0;
    border-radius: 0.5rem;
    background-clip: padding-box;
  }
}
.myProfile-view .myProfilePic .user-profile-imeg-outer {
  margin: 0 auto;
  margin-top: 1.25rem;
  width: 6.25rem;
  text-align: center;
}
.myProfile-view .myProfilePic .user-profile-img {
  margin: 0 auto;
  position: relative;
  width: 6.25rem;
  height: 6.25rem;
  background-color: #F4F4F4;
}
.myProfile-view .myProfilePic .user-profile-img .btn-edit {
  padding-top: 0.25rem;
  padding-bottom: 0.5rem;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: 100%;
  font-size: 0.875rem;
  text-align: center;
  color: #FFF;
  background-color: rgba(0, 0, 0, 0.75);
  cursor: pointer;
}
.myProfile-view .myProfilePic .member-level {
  margin: 0.5rem 0;
  padding: 0.25rem 0.5rem;
  display: inline-block;
  background-color: #20B794;
  border-radius: 2000px;
  background-clip: padding-box;
  font-size: 0.75rem;
  line-height: 0.75rem;
  color: #fff;
}
@media (min-width: 767px) {
  .myProfile-view .myProfileForm .horizental-input:first-child {
    border-radius: 0.5rem 0.5rem 0 0;
    background-clip: padding-box;
  }
  .myProfile-view .myProfileForm .horizental-input:last-child {
    border-radius: 0 0 0.5rem 0.5rem;
    background-clip: padding-box;
  }
  .myProfile-view .myProfileForm input, .myProfile-view .myProfileForm select {
    text-align: left;
  }
}
.myProfile-view .btn-delete-account {
  margin-top: 1.25rem;
  padding: 0 1rem;
}
@media (min-width: 767px) {
  .myProfile-view .btn-delete-account {
    padding: 0;
  }
}

.bonus-display-bk {
  margin-top: 0.5rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.bonus-display-bk .bonus-display .color-danger {
  font-size: 1.125rem;
}
.bonus-display-bk .rest-bonus-display {
  padding-left: 1.5rem;
  border-left: 1px solid #E3E3E3;
}
@media (min-width: 767px) {
  .bonus-display-bk {
    margin-top: 0;
    border-radius: 0.5rem;
    background-clip: padding-box;
  }
  .bonus-display-bk .bonus-display .title {
    margin-right: 0.5rem;
  }
  .bonus-display-bk .bonus-display .point {
    display: inline-block;
  }
  .bonus-display-bk .bonus-display .point .color-danger {
    font-size: 1.25rem;
  }
}

@media (min-width: 767px) {
  .bonus-list .tabmenu {
    border-radius: 0.5rem 0.5rem 0 0;
    background-clip: padding-box;
  }
}
.bonus-list .bonus-record {
  border-bottom: 1px solid #E3E3E3;
}
.bonus-list .bonus-record .order-id {
  font-size: 0.9375rem;
  font-weight: 500;
}
.bonus-list .bonus-record .btn-copy {
  margin-left: 0.5rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/order/copy.svg");
  background-size: 1.25rem 1.25rem;
  width: 1.5rem;
  height: 1.5rem;
  cursor: pointer;
}
.bonus-list .bonus-record .time {
  font-size: 0.875rem;
  font-weight: normal;
  color: #818181;
}
.bonus-list .bonus-record .calc-bonus {
  font-size: 1rem;
  font-weight: 500;
}
@media (min-width: 767px) {
  .bonus-list .empty-block {
    border-radius: 0 0 0.5rem 0.5rem;
    background-clip: padding-box;
  }
  .bonus-list .bonus-record:last-child {
    border-radius: 0 0 0.5rem 0.5rem;
    background-clip: padding-box;
  }
}

.address-list {
  margin-top: 0.5rem;
}
@media (min-width: 767px) {
  .address-list {
    margin-top: 0;
  }
}
.address-list .empty {
  padding-top: 20%;
  text-align: center;
}
.address-list .empty .icon-order-empty {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/order/order_empty.svg");
  background-size: 5rem 5rem;
  width: 5rem;
  height: 5rem;
}
.address-list .empty p {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  color: #818181;
}

.address {
  margin-bottom: 0.5rem;
  background-color: #FFF;
}
@media (min-width: 767px) {
  .address {
    margin-bottom: 0.75rem;
    border-radius: 0.5rem;
    background-clip: padding-box;
  }
}
.address.canceled {
  opacity: 0.75;
}
.address .address-header {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #E3E3E3;
}
.address .address-header .address-title {
  font-size: 1rem;
  font-weight: 500;
}
.address .address-header .btn-setToDefault {
  font-size: 0.875rem;
  font-weight: 500;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
}
.address .address-header .btn-setToDefault .icon-setToDefault {
  width: 1.25rem;
  height: 1.25rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/default.svg");
  background-size: 1rem 1rem;
}
.address .address-body {
  padding: 0.5rem 1rem;
}
.address .address-body .address-info-list li {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 2;
}
.address .address-footer {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 50% 50%;
  grid-template-columns: 50% 50%;
  border-top: 1px solid #E3E3E3;
  font-size: 0.9375rem;
  font-weight: 500;
}
.address .address-footer.single {
  -ms-grid-columns: 100%;
  grid-template-columns: 100%;
}
.address .address-footer.single a:first-child {
  border-right: 0;
}
.address .address-footer a:first-child {
  padding: 0.75rem 0;
  border-right: 1px solid #E3E3E3;
}
.address .address-footer .icon-edit {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/edit.svg");
  background-size: 1rem 1rem;
  width: 1.5rem;
  height: 1.5rem;
}
.address .address-footer .icon-remove {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/remove.svg");
  background-size: 1rem 1rem;
  width: 1.5rem;
  height: 1.5rem;
}

.createAddress .select-store-group {
  width: calc(100% - 2.25rem - 1rem);
}
@media (min-width: 767px) {
  .createAddress {
    border-radius: 0.5rem;
    background-clip: padding-box;
    overflow: hidden;
  }
}

#modal-add-store .modal-dialog {
  width: 20rem;
}
#modal-add-store .modal-header {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
@media (min-width: 767px) {
  #modal-add-store .modal-dialog {
    width: 480px;
  }
}

#modal-add-store--info .modal-dialog {
  width: 20rem;
}
#modal-add-store--info .modal-body {
  padding-bottom: 0 !important;
}
#modal-add-store--info .store-location {
  margin: 0.9375rem 0;
  padding: 1rem;
  border-radius: 0.5rem;
  background-clip: padding-box;
}
#modal-add-store--info .store-location .store-address {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  font-weight: normal;
  line-height: 1.25rem;
  color: #818181;
}
@media (min-width: 767px) {
  #modal-add-store--info .modal-dialog {
    width: 400px;
  }
}

.qa-list-view .search-bk {
  position: fixed;
  top: calc(4rem + env(safe-area-inset-top));
  left: 0;
  z-index: 99;
  width: 100%;
}
@media (min-width: 767px) {
  .qa-list-view .search-bk {
    position: static;
    border-radius: 0.5rem 0.5rem 0 0;
    background-clip: padding-box;
  }
}
@media (min-width: 767px) {
  .qa-list-view .search-bk {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
.qa-list-view .search-bk .right-btns-group {
  margin-top: 1rem;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 50% 50%;
  grid-template-columns: 50% 50%;
}
@media (min-width: 767px) {
  .qa-list-view .search-bk .right-btns-group {
    margin-top: 0;
    margin-left: auto;
    width: 35%;
  }
}
@media (min-width: 1200px) {
  .qa-list-view .search-bk .right-btns-group {
    width: 30%;
  }
}
.qa-list-view .search-bk .right-btns-group a {
  margin: 0 0.25rem;
  padding: 0.25rem;
  font-size: 0.9375rem;
  font-weight: 500;
  border-radius: 0.5rem;
  background-clip: padding-box;
  border: 1px solid #E3E3E3;
}
.qa-list-view .search-bk .right-btns-group a .icon-onlineservice {
  margin-right: 0.25rem;
  width: 1rem;
  height: 1rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/service/onlineservice.svg");
  background-size: 1rem 1rem;
}
.qa-list-view .search-bk .right-btns-group a .icon-phoneservice {
  margin-right: 0.25rem;
  width: 1rem;
  height: 1rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/service/phoneservice.svg");
  background-size: 1rem 1rem;
}
.qa-list-view .searchArea {
  padding: 0 0.5rem;
  height: 2.625rem;
  background-color: #F4F4F4;
  border-radius: 2000px;
  background-clip: padding-box;
}
@media (min-width: 767px) {
  .qa-list-view .searchArea {
    width: 60%;
  }
}
@media (min-width: 1200px) {
  .qa-list-view .searchArea {
    width: 65%;
  }
}
.qa-list-view .searchArea input {
  border: none;
  background-color: transparent;
  outline: 0;
  font-size: 0.875rem;
}
.qa-list-view .searchArea input.btn-search {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/topNav/nav_search.svg");
  background-size: 16px 16px;
  width: 2.625rem;
  height: 2.625rem;
}
.qa-list-view .searchArea input.search-input {
  width: calc(100% - 2.625rem);
  height: 100%;
}
.qa-list-view .qa-list {
  margin-top: 5.125rem;
}
@media (min-width: 767px) {
  .qa-list-view .qa-list {
    margin-top: 0;
  }
}
.qa-list-view .qa-list .qa-q {
  font-size: 1rem;
  line-height: 1.625rem;
  font-weight: 500;
  border-bottom: 1px solid #E3E3E3;
  cursor: pointer;
}
.qa-list-view .qa-list .qa-q:hover, .qa-list-view .qa-list .qa-q:focus {
  background-color: #F4F4F4;
}
.qa-list-view .qa-list .qa-q .btn-toggle {
  cursor: pointer;
  width: 1.5rem;
  height: 1rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/arrow_down_grey.svg");
  background-size: 1rem 1rem;
}
.qa-list-view .qa-list .qa-q.opened .btn-toggle {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.qa-list-view .qa-list .qa-a {
  padding: 1rem;
  display: none;
  font-size: 1rem;
  line-height: 1.625rem;
  font-weight: 500;
  color: #333333;
  background-color: #F4F4F4;
}
.qa-list-view .qa-list .qa-a.opened {
  display: block;
}
@media (min-width: 767px) {
  .qa-list-view .qa-list .qa:last-child .qa-q {
    border-radius: 0 0 0.5rem 0.5rem;
    background-clip: padding-box;
    overflow: hidden;
  }
  .qa-list-view .qa-list .qa:last-child .qa-q.opened {
    border-radius: 0;
    background-clip: padding-box;
  }
  .qa-list-view .qa-list .qa:last-child .qa-a.opened {
    border-radius: 0 0 0.5rem 0.5rem;
    background-clip: padding-box;
  }
  .qa-list-view .qa-list .qa:first-child .qa-q {
    border-top: 1px solid #E3E3E3;
  }
}
.qa-list-view .bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 99;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 50% 50%;
  grid-template-columns: 50% 50%;
  background-color: #FFF;
  -webkit-box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15);
  -ms-box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15);
}
@media (min-width: 767px) {
  .qa-list-view .bottom-bar {
    display: none;
  }
}
.qa-list-view .bottom-bar a {
  padding: 1rem 0;
  font-size: 0.9375rem;
  font-weight: 500;
}
.qa-list-view .bottom-bar a:first-child {
  border-right: 1px solid #E3E3E3;
}
.qa-list-view .bottom-bar a .icon-onlineservice {
  margin-right: 0.25rem;
  width: 1rem;
  height: 1rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/service/onlineservice.svg");
  background-size: 1rem 1rem;
}
.qa-list-view .bottom-bar a .icon-phoneservice {
  margin-right: 0.25rem;
  width: 1rem;
  height: 1rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/service/phoneservice.svg");
  background-size: 1rem 1rem;
}

.arrival-notice-list-view .border-box-list {
  margin-top: 0.5rem;
}
@media (min-width: 767px) {
  .arrival-notice-list-view .border-box-list {
    margin-top: 0;
  }
}
.arrival-notice-list-view .border-box-list .border-box {
  list-style: none;
}
.arrival-notice-list-view .border-box-list .border-box .product-horizental {
  border: none;
}
.arrival-notice-list-view .border-box-list .border-box .product-horizental:hover {
  -webkit-box-shadow: none;
  -ms-box-shadow: none;
  box-shadow: none;
}
@media (min-width: 767px) {
  .arrival-notice-list-view .border-box-list .border-box {
    border-radius: 0.5rem;
    background-clip: padding-box;
    overflow: hidden;
  }
}
.arrival-notice-list-view .border-box-list .product-price {
  margin: 0.5rem;
}
.arrival-notice-list-view .border-box-list .border-box-footer .icon-addToCart {
  margin-right: 0.25rem;
  width: 1rem;
  height: 1rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/product_addtocart.svg");
  background-size: 1rem 1rem;
}
.arrival-notice-list-view .border-box-list .border-box-footer .icon-remove {
  margin-right: 0.25rem;
  width: 1rem;
  height: 1rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/common/remove.svg");
  background-size: 1rem 1rem;
}

.distribution-profit-view .distribution-databoard {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  padding: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
}
.distribution-profit-view .distribution-databoard .btn-copy {
  margin-left: 0.5rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url("../images/order/copy.svg");
  background-size: 1.25rem 1.25rem;
  width: 1.5rem;
  height: 1.5rem;
  cursor: pointer;
}
.distribution-profit-view .distribution-databoard .databoard--top, .distribution-profit-view .distribution-databoard .databoard--mid {
  padding: 1rem;
  border-bottom: 1px solid #E3E3E3;
}
.distribution-profit-view .distribution-databoard .databoard--top .notice-text {
  width: 10.5rem;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
  color: #818181;
}
.distribution-profit-view .distribution-databoard .databoard--bottom {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 50% 50%;
  grid-template-columns: 50% 50%;
}
.distribution-profit-view .distribution-databoard .databoard--bottom .data {
  padding: 1rem;
}
.distribution-profit-view .distribution-databoard .databoard--bottom .data:first-child {
  border-right: 1px solid #E3E3E3;
}
.distribution-profit-view .distribution-kpi-list .profit-list li {
  padding: 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.5;
  background-color: #FFF;
  border-bottom: 1px solid #E3E3E3;
}
.distribution-profit-view .distribution-kpi-list .status {
  margin: 0 0.5rem;
  text-align: center;
}
.distribution-profit-view .distribution-kpi-list .status .status-title {
  font-size: 0.8125rem;
  color: #818181;
}
.distribution-profit-view .distribution-kpi-list .status .status-result {
  font-size: 1rem;
  font-weight: 500;
  color: #333333;
}
.distribution-profit-view .distribution-myAccountForm {
  margin-top: 0.5rem;
}

@media (min-width: 767px) {
  .distribution-profit-view .distribution-databoard {
    margin-top: 2rem;
    border-radius: 0.5rem;
    background-clip: padding-box;
    overflow: hidden;
  }
  .distribution-profit-view .distribution-kpi-list .tabmenu {
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
    border-radius: 0.5rem;
    background-clip: padding-box;
    overflow: hidden;
  }
  .distribution-profit-view .distribution-kpi-list .profit-list {
    border-radius: 0.5rem;
    background-clip: padding-box;
    overflow: hidden;
  }
  .distribution-profit-view .distribution-myAccountForm {
    margin-top: 0.5rem;
    border-radius: 0.5rem;
    background-clip: padding-box;
    overflow: hidden;
  }
}
@media (min-width: 992px) {
  .distribution-profit-view .distribution-databoard {
    margin-top: 0;
  }
}
.product-list-view-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.product-side-menu-v2 {
  width: 5.625rem;
  background-color: #FFF;
}
.product-side-menu-v2 > ul {
  padding-bottom: 5rem;
  position: fixed;
  top: calc(6.25rem + env(safe-area-inset-top));
  left: 0;
  z-index: 2;
  width: 5.625rem;
  height: calc(100vh - 4rem - 2.25rem);
  overflow-y: auto;
  background-color: #FFF;
  -webkit-box-shadow: 5px 0 6px rgba(0, 0, 0, 0.125);
  -ms-box-shadow: 5px 0 6px rgba(0, 0, 0, 0.125);
  box-shadow: 5px 0 6px rgba(0, 0, 0, 0.125);
}
.product-side-menu-v2 ul li.current {
  color: #FFF;
  background-color: #9d9d82;
}
.product-side-menu-v2 ul li.current a {
  color: #FFF;
}
.product-side-menu-v2 ul li {
  padding: 0.5rem 0;
  border-bottom: 1px solid #E3E3E3;
}
.product-side-menu-v2 ul li a {
  padding: 0 0.5rem;
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  text-align: left;
  color: #333333;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.25rem;
  height: 2.5rem;
}
@media (min-width: 767px) {
  .product-side-menu-v2 {
    width: 12.5rem;
  }
  .product-side-menu-v2 > ul {
    padding-bottom: 0;
    top: 6.375rem;
    width: 12.5rem;
    height: calc(100vh - 4.125rem - 2.25rem);
  }
}

.product-list-view.has-sideMenu {
  padding-top: 6.25rem;
  padding-bottom: 4.5rem;
  width: calc(100% - 5.625rem);
  padding-left: 0;
  display: block;
}
@media (min-width: 767px) {
  .product-list-view.has-sideMenu {
    padding-left: 0.5rem;
    width: calc(100% - 12.5rem);
  }
}
.product-list-view.has-sideMenu .product-list {
  padding: 0 0.25rem;
  padding-top: 0.5rem;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 50% 50%;
  grid-template-columns: 50% 50%;
}
@media (min-width: 767px) {
  .product-list-view.has-sideMenu .product-list {
    margin: 0 -0.375rem;
    padding-bottom: 0;
    -ms-grid-columns: 25% 25% 25% 25%;
    grid-template-columns: 25% 25% 25% 25%;
  }
}
@media (min-width: 992px) {
  .product-list-view.has-sideMenu .product-list {
    margin: 1.25rem 0;
    width: calc(100% - 13.75rem - 1.25rem);
    -ms-grid-columns: 25% 25% 25% 25%;
    grid-template-columns: 25% 25% 25% 25%;
  }
  .product-list-view.has-sideMenu .product-list .product {
    margin: 0 0.375rem 1rem 0.375rem;
  }
}
@media (min-width: 1200px) {
  .product-list-view.has-sideMenu .product-list {
    width: calc(100% - 16.25rem - 1.25rem);
    -ms-grid-columns: 20% 20% 20% 20% 20%;
    grid-template-columns: 20% 20% 20% 20% 20%;
  }
}
@media (min-width: 1600px) {
  .product-list-view.has-sideMenu .product-list {
    margin: 1.25rem 0;
    -ms-grid-columns: 20% 20% 20% 20% 20%;
    grid-template-columns: 20% 20% 20% 20% 20%;
  }
}
.product-list-view.has-sideMenu .product-list.empty {
  display: block;
}
.product-list-view.has-sideMenu .product-list.empty .empty-block {
  padding-top: 10%;
  background: none;
}

.product-category-menu--h {
  position: sticky;
  right: 0;
  top: 100px;
  z-index: 10;
}
.product-category-menu--h ul {
  padding: 0.5rem 0;
  padding-left: 0.25rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  background-color: #FFF;
}
.product-category-menu--h li.current a {
  font-weight: bold;
  color: #fff;
  background-color: #9d9d82;
}
.product-category-menu--h li a {
  margin: 0 0.25rem;
  padding: 0.25rem 0.5rem;
  display: block;
  color: #333333;
  background-color: #F4F4F4;
  border-radius: 0.5rem;
  background-clip: padding-box;
  font-size: 0.875rem;
}

.product-list-view-container.has-sideMenu .product-side-menu-v2 > ul {
  top: 7.375rem;
}
.product-list-view-container.has-sideMenu .product-list-view.has-sideMenu {
  padding-top: 7.875rem;
}
.product-list-view-container.has-sideMenu .product-list-view.has-sideMenu .product-list {
  padding-top: 0;
}
@media (min-width: 767px) {
  .product-list-view-container.has-sideMenu {
    margin-top: 0;
    padding-top: 4.5rem;
  }
  .product-list-view-container.has-sideMenu .product-list-view.has-sideMenu {
    padding-top: 0.5rem;
    width: 100%;
  }
}
@media (min-width: 992px) {
  .product-list-view-container.has-sideMenu .product-side-menu {
    margin-top: 1rem;
  }
  .product-list-view-container.has-sideMenu .product-list-view.has-sideMenu {
    margin-top: 1rem;
    padding-top: 0;
  }
  .product-list-view-container.has-sideMenu .product-list-view.has-sideMenu .product-list {
    margin-top: 0;
    width: 100%;
  }
}

.print-view .table {
  border: 1px solid #c0c0c0;
}
.print-view .table td, .print-view .table th {
  padding: 0.25rem 1rem;
  vertical-align: middle;
}
.print-view .table-bordered > thead > tr > th {
  border: 1px solid #c0c0c0;
  border-bottom: 2px solid #c0c0c0;
}
.print-view .table-bordered > tbody > tr > td, .print-view .table-bordered > tbody > tr > th {
  border: 1px solid #c0c0c0;
}
.print-view .order-id {
  margin-bottom: 2rem;
}
.print-view .order-id-title {
  font-size: 0.9375rem;
}
.print-view .order-id-num {
  font-size: 2rem;
}
.print-view .border-box {
  padding: 1rem;
  border-radius: 0;
  background-clip: padding-box;
  border: 1px solid #c0c0c0;
}
.print-view .th-order, .print-view .td-order {
  width: 50px !important;
}
.print-view .th-num, .print-view .td-num {
  width: 100px !important;
}

.data-title {
  margin-right: 0.75rem;
  display: inline-block;
  font-size: 0.875rem;
  font-weight: normal;
  line-height: 1.5rem;
}

.data-content {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: normal;
  line-height: 1.5rem;
}

.table {
  margin-bottom: 0;
}

.pagedjs_page {
  margin: 1rem auto !important;
  border: 1px solid #000;
}

.print-content {
  margin: 0 auto;
  max-width: 960px;
  min-height: 100vh;
  background: #fff;
}

.print-content-header {
  padding: 1rem;
  border-bottom: 1px dashed #c0c0c0;
}
.print-content-header .top {
  margin-bottom: 30px;
}
.print-content-header .mid {
  margin-top: 1rem;
  padding: 0 0.5rem;
}
.print-content-header .mid .order-id {
  margin-bottom: 2rem;
}
.print-content-header .mid .order-id-title {
  font-size: 0.9375rem;
}
.print-content-header .mid .order-id-num {
  font-size: 2rem;
}

.print-content-body .top {
  padding: 1rem 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #c0c0c0;
}
.print-content-body .top .logo {
  width: 300px;
}
.print-content-body .top .order-name {
  padding-left: 100px;
  width: calc(100% - 300px - 300px);
}
.print-content-body .top .contact-info {
  padding-left: 65px;
  width: 300px;
}
.print-content-body .mid {
  padding: 1rem 1.5rem;
}

.print-content-footer {
  margin-top: 1rem;
  padding: 1rem 1.5rem;
  padding-top: 2rem;
  border-top: 1px solid #c0c0c0;
}
.print-content-footer .note-block {
  margin-right: 1rem;
  width: calc(50% - 1rem);
  border: 1px solid #c0c0c0;
}
.print-content-footer .table-order-detail {
  width: 50%;
}
.print-content-footer .table-order-detail th {
  font-weight: normal;
}
.print-content-footer .table-order-detail td {
  text-align: right;
}
.print-content-footer .table-order-detail tr.total-price th, .print-content-footer .table-order-detail tr.total-price td {
  font-weight: bold;
}

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

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}
.slick-list:focus {
  outline: none;
}
.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

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

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.slick-track:before, .slick-track:after {
  content: "";
  display: table;
}
.slick-track:after {
  clear: both;
}
.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none;
}
[dir=rtl] .slick-slide {
  float: right;
}
.slick-slide.slick-loading img {
  display: none;
}
.slick-slide.dragging img {
  pointer-events: none;
}
.slick-initialized .slick-slide {
  display: block;
}
.slick-loading .slick-slide {
  visibility: hidden;
}
.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

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

/* Slider */
/* Arrows */
.slick-prev,
.slick-next {
  position: absolute;
  display: block;
  width: 30px;
  height: 55px;
  line-height: 0px;
  font-size: 0px;
  cursor: pointer;
  background: transparent;
  color: transparent;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  padding: 0;
  border: none;
  outline: none;
}
.slick-prev:hover, .slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
  outline: none;
  background: transparent;
  color: transparent;
}
.slick-prev:hover:before, .slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
  opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
  opacity: 1;
}
.slick-prev:before,
.slick-next:before {
  font-family: "slick";
  font-size: 20px;
  line-height: 1;
  color: white;
  opacity: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slick-prev {
  left: 0;
}
[dir=rtl] .slick-prev {
  left: auto;
  right: 0;
}
.slick-prev:before {
  content: "←";
}
[dir=rtl] .slick-prev:before {
  content: "→";
}

.slick-next {
  right: 0;
}
[dir=rtl] .slick-next {
  left: 0;
  right: auto;
}
.slick-next:before {
  content: "→";
}
[dir=rtl] .slick-next:before {
  content: "←";
}

/* Dots */
.slick-dotted.slick-slider {
  margin-bottom: 0;
}

.slick-dots {
  position: absolute;
  bottom: 1.875em;
  list-style: none;
  display: block;
  text-align: center;
  padding: 0;
  margin: 0;
  width: 100%;
}
.slick-dots li {
  position: relative;
  display: inline-block;
  height: 12px;
  width: 12px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
}
.slick-dots li button {
  border: 0;
  background: transparent;
  display: block;
  height: 12px;
  width: 12px;
  outline: none;
  line-height: 0px;
  font-size: 0px;
  color: transparent;
  padding: 5px;
  cursor: pointer;
}
.slick-dots li button:hover, .slick-dots li button:focus {
  outline: none;
}
.slick-dots li button:hover:before, .slick-dots li button:focus:before {
  opacity: 1;
}
.slick-dots li button:before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 12px;
  height: 12px;
  line-height: 12px;
  text-align: center;
  border: 1px solid;
  border-color: #fff;
  border-radius: 50%;
  background-clip: padding-box;
}
.slick-dots li.slick-active button:before {
  background-color: #fff;
  opacity: 1;
}

@media (min-width: 767px) {
  .slick-dots {
    bottom: 25px;
  }
}
/*# sourceMappingURL=all.css.map */