@import url("https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css");
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+TC&display=swap");
@import url("https://fonts.googleapis.com/css?family=Baloo+Chettan+2&display=swap");
@import url("https://fonts.googleapis.com/css2?family=PT+Mono&display=swap");
html[lang="zh-Hant"] * { font-family: 'Baloo Chettan 2','Noto Sans TC',sans-serif; }

* { -moz-box-sizing: border-box; box-sizing: border-box; font-weight: lighter; }

ul { list-style: none; margin: 0; padding: 0; }

a { text-decoration: none; outline: none; }

@-webkit-keyframes vawe { 20% { border-radius: 45% 55% 62% 38% / 53% 51% 49% 47%; }
  40% { border-radius: 45% 55% 49% 51% / 36% 51% 49% 64%; }
  60% { border-radius: 60% 40% 57% 43% / 47% 62% 38% 53%; }
  80% { border-radius: 60% 40% 32% 68% / 38% 36% 64% 62%; } }

@-moz-keyframes vawe { 20% { border-radius: 45% 55% 62% 38% / 53% 51% 49% 47%; }
  40% { border-radius: 45% 55% 49% 51% / 36% 51% 49% 64%; }
  60% { border-radius: 60% 40% 57% 43% / 47% 62% 38% 53%; }
  80% { border-radius: 60% 40% 32% 68% / 38% 36% 64% 62%; } }

@-o-keyframes vawe { 20% { border-radius: 45% 55% 62% 38% / 53% 51% 49% 47%; }
  40% { border-radius: 45% 55% 49% 51% / 36% 51% 49% 64%; }
  60% { border-radius: 60% 40% 57% 43% / 47% 62% 38% 53%; }
  80% { border-radius: 60% 40% 32% 68% / 38% 36% 64% 62%; } }

@keyframes vawe { 20% { border-radius: 45% 55% 62% 38% / 53% 51% 49% 47%; }
  40% { border-radius: 45% 55% 49% 51% / 36% 51% 49% 64%; }
  60% { border-radius: 60% 40% 57% 43% / 47% 62% 38% 53%; }
  80% { border-radius: 60% 40% 32% 68% / 38% 36% 64% 62%; } }

@-webkit-keyframes vawe2 { 20% { border-radius: 60% 40% 35% 65% / 71% 67% 33% 29%; }
  40% { border-radius: 30% 70% 68% 32% / 63% 37% 63% 37%; }
  60% { border-radius: 48% 52% 40% 60% / 35% 37% 63% 65%; }
  80% { border-radius: 63% 37% 55% 45% / 72% 37% 63% 28%; } }

@-moz-keyframes vawe2 { 20% { border-radius: 60% 40% 35% 65% / 71% 67% 33% 29%; }
  40% { border-radius: 30% 70% 68% 32% / 63% 37% 63% 37%; }
  60% { border-radius: 48% 52% 40% 60% / 35% 37% 63% 65%; }
  80% { border-radius: 63% 37% 55% 45% / 72% 37% 63% 28%; } }

@-o-keyframes vawe2 { 20% { border-radius: 60% 40% 35% 65% / 71% 67% 33% 29%; }
  40% { border-radius: 30% 70% 68% 32% / 63% 37% 63% 37%; }
  60% { border-radius: 48% 52% 40% 60% / 35% 37% 63% 65%; }
  80% { border-radius: 63% 37% 55% 45% / 72% 37% 63% 28%; } }

@keyframes vawe2 { 20% { border-radius: 60% 40% 35% 65% / 71% 67% 33% 29%; }
  40% { border-radius: 30% 70% 68% 32% / 63% 37% 63% 37%; }
  60% { border-radius: 48% 52% 40% 60% / 35% 37% 63% 65%; }
  80% { border-radius: 63% 37% 55% 45% / 72% 37% 63% 28%; } }

@-webkit-keyframes vawe3 { 20% { border-radius: 22% 78% 28% 72% / 65% 22% 78% 35%; }
  40% { border-radius: 34% 66% 71% 29% / 75% 15% 85% 25%; }
  60% { border-radius: 21% 79% 33% 67% / 42% 63% 37% 58%; }
  80% { border-radius: 75% 25% 26% 74% / 31% 23% 77% 69%; } }

@-moz-keyframes vawe3 { 20% { border-radius: 22% 78% 28% 72% / 65% 22% 78% 35%; }
  40% { border-radius: 34% 66% 71% 29% / 75% 15% 85% 25%; }
  60% { border-radius: 21% 79% 33% 67% / 42% 63% 37% 58%; }
  80% { border-radius: 75% 25% 26% 74% / 31% 23% 77% 69%; } }

@-o-keyframes vawe3 { 20% { border-radius: 22% 78% 28% 72% / 65% 22% 78% 35%; }
  40% { border-radius: 34% 66% 71% 29% / 75% 15% 85% 25%; }
  60% { border-radius: 21% 79% 33% 67% / 42% 63% 37% 58%; }
  80% { border-radius: 75% 25% 26% 74% / 31% 23% 77% 69%; } }

@keyframes vawe3 { 20% { border-radius: 22% 78% 28% 72% / 65% 22% 78% 35%; }
  40% { border-radius: 34% 66% 71% 29% / 75% 15% 85% 25%; }
  60% { border-radius: 21% 79% 33% 67% / 42% 63% 37% 58%; }
  80% { border-radius: 75% 25% 26% 74% / 31% 23% 77% 69%; } }

@-webkit-keyframes slideDown { 0% { transform: translateY(0%); }
  50% { transform: translateY(8%); }
  65% { transform: translateY(6%); }
  80% { transform: translateY(4%); }
  95% { transform: translateY(2%); }
  100% { transform: translateY(0%); } }

@-moz-keyframes slideDown { 0% { transform: translateY(0%); }
  50% { transform: translateY(8%); }
  65% { transform: translateY(6%); }
  80% { transform: translateY(4%); }
  95% { transform: translateY(2%); }
  100% { transform: translateY(0%); } }

@-o-keyframes slideDown { 0% { transform: translateY(0%); }
  50% { transform: translateY(8%); }
  65% { transform: translateY(6%); }
  80% { transform: translateY(4%); }
  95% { transform: translateY(2%); }
  100% { transform: translateY(0%); } }

@keyframes slideDown { 0% { transform: translateY(0%); }
  50% { transform: translateY(8%); }
  65% { transform: translateY(6%); }
  80% { transform: translateY(4%); }
  95% { transform: translateY(2%); }
  100% { transform: translateY(0%); } }

@-webkit-keyframes fadeInDown { from { opacity: 0;
    -webkit-transform: translate3d(0, -35%, 0);
    transform: translate3d(0, -35%, 0); }
  to { opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

@-moz-keyframes fadeInDown { from { opacity: 0;
    -webkit-transform: translate3d(0, -35%, 0);
    transform: translate3d(0, -35%, 0); }
  to { opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

@-o-keyframes fadeInDown { from { opacity: 0;
    -webkit-transform: translate3d(0, -35%, 0);
    transform: translate3d(0, -35%, 0); }
  to { opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

@keyframes fadeInDown { from { opacity: 0;
    -webkit-transform: translate3d(0, -35%, 0);
    transform: translate3d(0, -35%, 0); }
  to { opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

@-webkit-keyframes fadeInUP { from { opacity: 0;
    -webkit-transform: translate3d(0, 35%, 0);
    transform: translate3d(0, 35%, 0); }
  to { opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

@-moz-keyframes fadeInUP { from { opacity: 0;
    -webkit-transform: translate3d(0, 35%, 0);
    transform: translate3d(0, 35%, 0); }
  to { opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

@-o-keyframes fadeInUP { from { opacity: 0;
    -webkit-transform: translate3d(0, 35%, 0);
    transform: translate3d(0, 35%, 0); }
  to { opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

@keyframes fadeInUP { from { opacity: 0;
    -webkit-transform: translate3d(0, 35%, 0);
    transform: translate3d(0, 35%, 0); }
  to { opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

@-webkit-keyframes width100 { 0% { width: 0%; }
  100% { width: 100%; } }

@-moz-keyframes width100 { 0% { width: 0%; }
  100% { width: 100%; } }

@-o-keyframes width100 { 0% { width: 0%; }
  100% { width: 100%; } }

@keyframes width100 { 0% { width: 0%; }
  100% { width: 100%; } }

@-webkit-keyframes spin { 0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); } }

@-moz-keyframes spin { 0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); } }

@-o-keyframes spin { 0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); } }

@keyframes spin { 0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); } }

@-webkit-keyframes fadeIn { from { opacity: 0; }
  to { opacity: 1; } }

@-moz-keyframes fadeIn { from { opacity: 0; }
  to { opacity: 1; } }

@-o-keyframes fadeIn { from { opacity: 0; }
  to { opacity: 1; } }

@keyframes fadeIn { from { opacity: 0; }
  to { opacity: 1; } }

::placeholder { color: #959da5; opacity: 1; /* Firefox */ font-weight: 300; font-size: 14px; }

:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #959da5; font-weight: 300; font-size: 14px; }

::-ms-input-placeholder { /* Microsoft Edge */ color: #959da5; font-weight: 300; font-size: 14px; }

input[type=text], input[type=url], input[type=email], input[type=password], input[type=number], input[type=date], input[type=tel] { -moz-appearance: none; -webkit-appearance: none; appearance: none; vertical-align: middle; outline: none; }

input[type=text], input[type=url], input[type=email], input[type=password], input[type=number], input[type=date], input[type=tel] { box-sizing: border-box; width: 100%; font-size: 14px; padding: 10px; color: #474848; border: none; border-bottom: 1px solid rgba(185, 186, 184, 0.5); background: none; -webkit-transition: all 0.35s ease-in; -moz-transition: all 0.35s ease-in; -ms-transition: all 0.35s ease-in; -o-transition: all 0.35s ease-in; transition: all 0.35s ease-in; }

input[type=text]:focus, input[type=url]:focus, input[type=email]:focus, input[type=password]:focus, input[type=number]:focus, input[type=date]:focus, input[type=tel]:focus { border-color: #2d2d2d; }

input[type=text]:hover, input[type=url]:hover, input[type=email]:hover, input[type=password]:hover, input[type=number]:hover, input[type=date]:hover, input[type=tel]:hover { border-color: #2d2d2d; }

input[type=number] { text-align: center; -moz-appearance: textfield; -webkit-appearance: textfield; appearance: textfield; }

@media (max-width: 768px), (max-device-width: 768px) { input[type=number] { -moz-appearance: none; -webkit-appearance: none; appearance: none; } }

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

textarea { box-sizing: border-box; width: 100%; font-size: 14px; padding: 10px; vertical-align: middle; outline: none; color: #474848; border: none; border-bottom: 1px solid rgba(185, 186, 184, 0.5); background: none; -moz-appearance: none; -webkit-appearance: none; appearance: none; display: block; overflow: auto; -webkit-transition: all 0.35s ease-in; -moz-transition: all 0.35s ease-in; -ms-transition: all 0.35s ease-in; -o-transition: all 0.35s ease-in; transition: all 0.35s ease-in; }

textarea:focus { border-color: #2d2d2d; outline: none; }

textarea:hover { border-color: #2d2d2d; }

.buttonUnit, .submitUnit { padding: 10px; font-size: 14px; font-weight: lighter; outline: none; cursor: pointer; text-decoration: none; text-align: center; -moz-box-sizing: border-box; box-sizing: border-box; background: #474848; border: none; color: #FFFFFF; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; touch-action: manipulation; }

.buttonUnit:hover, .submitUnit:hover { color: #2dbbd8; outline: none; text-shadow: none; }

.buttonBdr, .submitBdr { padding: 10px; font-size: 14px; font-weight: lighter; outline: none; cursor: pointer; text-decoration: none; text-align: center; -moz-box-sizing: border-box; box-sizing: border-box; background: none; border: 1px solid #b9bab8; color: #474848; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; touch-action: manipulation; }

.buttonBdr:hover, .submitBdr:hover { color: #FFFFFF; text-shadow: none; background: #474848; border: 1px solid #474848; }

.buttonDash, .submitDash { padding: 10px; font-size: 14px; font-weight: lighter; outline: none; cursor: pointer; text-decoration: none; text-align: center; -moz-box-sizing: border-box; box-sizing: border-box; background: none; border: none; border-bottom: 2px solid #e1e4e8; color: #474848; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; touch-action: manipulation; }

.buttonDash:hover, .submitDash:hover { outline: none; text-shadow: none; border-bottom: 2px solid #474848; padding-left: 5px; }

a.BtnUnit { display: block; padding: 10px; font-size: 14px; font-weight: lighter; outline: none; cursor: pointer; text-decoration: none; text-align: center; padding: 5px 10px; background: #474848; border: none; color: #FFFFFF; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; touch-action: manipulation; }

a.BtnUnit:hover { color: #2dbbd8; text-shadow: none; background: #474848; }

.checkbox-tick-wrap { position: relative; display: block; }

.checkbox-tick-wrap input[type=checkbox] { width: 14px; height: 14px; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); }

.checkbox-tick-wrap input[type=checkbox]:checked ~ .checkbox-label::before, .checkbox-tick-wrap input[type=checkbox]:checked ~ .radio-label::before { color: #FFFFFF; }

.checkbox-tick-wrap .checkbox-label { display: -ms-flexbox; display: flex; justify-content: flex-start; align-items: center; white-space: pre-wrap; font-size: 14px; color: #474848; }

.checkbox-tick-wrap .checkbox-label::before { content: "\f14a"; color: transparent; display: block; min-width: 14px; min-height: 14px; max-height: 14px; background: rgba(45, 187, 216, 0.95); border: 2px solid #2dbbd8; margin-right: 5px; -moz-box-sizing: border-box; box-sizing: border-box; pointer-events: none; font-family: Flaticon; font-size: 10px; font-style: normal; text-align: center; }

.checkbox-wrap, .radio-wrap { position: relative; display: block; }

.checkbox-wrap input[type=checkbox], .checkbox-wrap input[type=radio], .radio-wrap input[type=checkbox], .radio-wrap input[type=radio] { width: 14px; height: 14px; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); }

.checkbox-wrap input[type=checkbox]:checked ~ .checkbox-label::before, .checkbox-wrap input[type=checkbox]:checked ~ .radio-label::before, .checkbox-wrap input[type=radio]:checked ~ .checkbox-label::before, .checkbox-wrap input[type=radio]:checked ~ .radio-label::before, .radio-wrap input[type=checkbox]:checked ~ .checkbox-label::before, .radio-wrap input[type=checkbox]:checked ~ .radio-label::before, .radio-wrap input[type=radio]:checked ~ .checkbox-label::before, .radio-wrap input[type=radio]:checked ~ .radio-label::before { background: #2dbbd8; border: 1px solid #2dbbd8; }

.checkbox-wrap .checkbox-label, .checkbox-wrap .radio-label, .radio-wrap .checkbox-label, .radio-wrap .radio-label { display: -ms-flexbox; display: flex; justify-content: flex-start; align-items: center; white-space: pre-wrap; font-size: 14px; color: #474848; }

.checkbox-wrap .checkbox-label::before, .checkbox-wrap .radio-label::before, .radio-wrap .checkbox-label::before, .radio-wrap .radio-label::before { content: ""; display: block; min-width: 14px; min-height: 14px; max-height: 14px; background: none; border: 1px solid #b9bab8; margin-right: 5px; -moz-box-sizing: border-box; box-sizing: border-box; pointer-events: none; }

.radio-option { display: -ms-grid; display: grid; justify-items: center; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); border-top: 1px solid rgba(185, 186, 184, 0.5); border-left: 1px solid rgba(185, 186, 184, 0.5); }

.rditem { display: -ms-flexbox; display: flex; justify-content: center; align-items: center; position: relative; -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -ms-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in; width: 100%; border-right: 1px solid rgba(185, 186, 184, 0.5); border-bottom: 1px solid rgba(185, 186, 184, 0.5); }

.rditem > label { color: #6a737d; font-size: 16px; display: block; width: 100%; padding: 5px; text-align: center; }

.rditem > input { overflow: visible; }

.rditem > input[type="radio"]:checked, .rditem > input[type="radio"]:not(:checked) { position: absolute; display: block; width: 100%; height: 100%; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); pointer-events: painted; }

.rditem > input[type="radio"]:checked:checked ~ label, .rditem > input[type="radio"]:not(:checked):checked ~ label { background: #2dbbd8; color: #fbfbfb; }

.optional-div { display: none; -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -ms-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in; -webkit-animation: slideDown 0.5s ease 1; -moz-animation: slideDown 0.5s ease 1; animation: slideDown 0.5s ease 1; overflow: hidden; max-height: 0; width: 100%; }

.optional-div.isOpen { display: block; max-height: 1000px; }

.number-wrap { display: -ms-flexbox; display: flex; justify-content: flex-start; flex-direction: row; align-items: center; width: 90px; }

.number-wrap > input[type=number] { height: 100%; order: 2; margin: 0 2px; width: 54px; border-top: 1px solid rgba(185, 186, 184, 0.5); }

.number-wrap > input[type=number]:focus { border-color: #2d2d2d; }

.number-wrap > input[type=number]:hover { border-color: #2d2d2d; }

.number-wrap > button { display: block; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; cursor: pointer; background: none; border: none; padding: 0; }

.number-wrap > button:hover span::before { color: #FFFFFF; background: #474848; }

.number-wrap > button span::before { border: 1px solid rgba(185, 186, 184, 0.5); font-size: 10px; padding: 2px; color: #474848; -webkit-border-radius: 50px; -moz-border-radius: 50px; -o-border-radius: 50px; border-radius: 50px; }

.number-wrap > button.num-minus { order: 1; }

.number-wrap > button.num-plus { order: 3; }

/* Target IE9 and IE10 */
select::-ms-expand { display: none; }

select { box-sizing: border-box; width: 100%; font-size: 14px; padding: 10px; vertical-align: middle; outline: none; -webkit-appearance: menulist-button; color: #474848; border: none; border-bottom: 1px solid rgba(185, 186, 184, 0.6); background: none; -moz-appearance: none; -webkit-appearance: none; appearance: none; -webkit-transition: all 0.35s ease-in; -moz-transition: all 0.35s ease-in; -ms-transition: all 0.35s ease-in; -o-transition: all 0.35s ease-in; transition: all 0.35s ease-in; background: transparent; background-image: url("data:image/svg+xml;utf8,<svg fill='gray' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>"); background-repeat: no-repeat; background-position-x: right; background-position-y: center; }

select:hover { border-color: #2dbbd8; }

select:focus { border-color: #2dbbd8; box-shadow: none; }

select:disabled { cursor: not-allowed; }

blockquote { display: block; width: 100%; font-size: 14px; color: #6a737d; margin: 5px 0; padding: 0; }

blockquote.clrRed { color: #ea4a5a; }

blockquote p { margin: 0; padding: 0; }

blockquote b { color: #ffab70; padding: 0 5px; }

.basic-form-wrap { display: -ms-flexbox; display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column wrap; width: 100%; }

.sign-form-wrap { display: -ms-flexbox; display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column wrap; width: 100%; }

.user-form-wrap { width: 100%; }

.form-fieldset { display: block; width: 100%; margin: 0 0 50px; }

.fieldset { clear: both; display: -ms-flexbox; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; width: 100%; margin-bottom: 10px; }

.fieldset .inOneLine { min-width: 100%; }

.fieldset > i { color: #474848; font-size: 18px; font-style: normal; }

.fieldset > i::before { font-size: 18px; margin-right: 5px; color: #2dbbd8; }

.fieldset > input:not([type=checkbox]) { flex: 1 1 0; margin: 0; }

.fieldset > select { margin: 0; }

.fieldset > label { color: #474848; }

.fieldset > a { color: #f97583; padding: 0 5px; }

.fieldset > a:hover { text-decoration: underline; }

.fieldset > p { margin: 0; padding: 2px 5px; font-size: 14px; color: #2dbbd8; letter-spacing: 1px; width: 100%; }

.fieldset > p::before { content: "-"; display: inline-block; padding-right: 3px; }

.fieldset > p::after { content: "-"; display: inline-block; padding-left: 3px; }

#twzipcode { width: 100%; display: -ms-flexbox; display: flex; justify-content: space-between; margin-bottom: 10px; }

#twzipcode .county, #twzipcode .district, #twzipcode .zipcode { max-width: calc(100% / 3 - 10px); -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-appearance: menulist-button; color: #474848; }

#twzipcode .county:invalid, #twzipcode .district:invalid, #twzipcode .zipcode:invalid { color: #2dbbd8; }

.head-wrap { display: -ms-grid; display: grid; grid-template-columns: 1fr auto 1fr; padding: 0 20px; height: 70px; z-index: 999; position: relative; }

.head-wrap.isBar { background: rgba(255, 255, 255, 0.95); border-bottom: 1px solid #e1e4e8; -webkit-animation: fadeInDown 1s linear; -moz-animation: fadeInDown 1s linear; animation: fadeInDown 1s linear; -webkit-box-shadow: 0 0 10px rgba(46, 46, 46, 0.16); -moz-box-shadow: 0 0 10px rgba(46, 46, 46, 0.16); box-shadow: 0 0 10px rgba(46, 46, 46, 0.16); }

@media (max-width: 860px), (max-device-width: 1024px) { .head-wrap { grid-template-columns: auto auto; height: 50px; } }

@media only screen and (max-width: 375px) { .head-wrap { padding: 0 10px; } }

.head-logo { display: block; height: 50%; text-align: center; margin: 0 auto; align-self: center; -webkit-animation: fadeInUP 2s linear; -moz-animation: fadeInUP 2s linear; animation: fadeInUP 2s linear; }

@media (max-width: 860px), (max-device-width: 1024px) { .head-logo { text-align: left; margin: 0 auto 0 0; height: 65%; } }

@media only screen and (max-width: 320px) { .head-logo { height: 50%; } }

.head-logo > a { display: -ms-flexbox; display: flex; height: 40px; width: 100%; align-items: center; justify-content: center; background-image: url("../img/logo_white.png"); background-repeat: no-repeat; background-position: center; background-size: contain; }

@media (max-width: 860px), (max-device-width: 1024px) { .head-logo > a { height: 32.5px; } }

@media only screen and (max-width: 320px) { .head-logo > a { height: 25px; } }

.head-logo > a img { display: block; height: 100%; max-height: 100%; min-width: 100%; object-fit: scale-down; filter: drop-shadow(1px 1px 1px rgba(250, 250, 250, 0.9)) opacity(1); }

.head-logo.isLight { filter: drop-shadow(1px 1px 1px rgba(45, 187, 216, 0.4)); }

.head-logo.isLight img { -webkit-filter: opacity(0); filter: opacity(0); }

.head-menu { display: block; align-self: center; -webkit-animation: fadeInDown 2s linear; -moz-animation: fadeInDown 2s linear; animation: fadeInDown 2s linear; }

.head-menu__main { list-style: none; display: -ms-inline-flexbox; display: inline-flex; justify-content: flex-start; align-items: center; }

.head-menu__main > li { font-size: 20px; padding: 0 15px; display: block; height: 100%; }

.head-menu__main > li a { display: block; color: #2d2d2d; -webkit-transition: all 0.35s ease-in; -moz-transition: all 0.35s ease-in; -ms-transition: all 0.35s ease-in; -o-transition: all 0.35s ease-in; transition: all 0.35s ease-in; }

.head-menu__main > li a:hover { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); }

.head-menu__main > li a::after { display: block; content: attr(data-title); font-size: 12px; }

.head-menu.isLight > ul > li a { color: #fbfbfb; }

@media (max-width: 860px), (max-device-width: 1024px) { .head-menu { display: none; } }

.head-essential { display: -ms-flexbox; display: flex; justify-content: flex-end; align-items: center; -webkit-animation: fadeInDown 2s linear; -moz-animation: fadeInDown 2s linear; animation: fadeInDown 2s linear; }

.head-essential.isLight .head-essential__cell > a { color: #fbfbfb; }

.head-essential__cell { margin: 0 12px; -webkit-transition: all 0.35s ease-in; -moz-transition: all 0.35s ease-in; -ms-transition: all 0.35s ease-in; -o-transition: all 0.35s ease-in; transition: all 0.35s ease-in; }

.head-essential__cell:hover { -webkit-transform: scale(1.15); -moz-transform: scale(1.15); -ms-transform: scale(1.15); transform: scale(1.15); }

@media (max-width: 860px), (max-device-width: 1024px) { .head-essential__cell { margin: 0 8px; } }

.head-essential__cell > a { font-size: 22px; color: #2d2d2d; }

.head-essential__cell.menu-unit { display: none; }

@media (max-width: 860px), (max-device-width: 1024px) { .head-essential__cell.menu-unit { display: block; } }

.head-essential__cell.cart-unit { position: relative; }

.head-essential__cell.cart-unit .count { display: -ms-flexbox; display: flex; justify-content: center; align-items: center; background: #ea4a5a; color: #FFFFFF; -webkit-border-radius: 50px; -moz-border-radius: 50px; -o-border-radius: 50px; border-radius: 50px; font-size: 10px; padding: 0; position: absolute; bottom: 0; right: -5px; width: 15px; height: 15px; text-align: center; -webkit-animation: fadeInUp 1s linear; -moz-animation: fadeInUp 1s linear; animation: fadeInUp 1s linear; }

.head-essential__cell.cart-unit .count:empty { display: none; }

@media (max-width: 860px), (max-device-width: 1024px) { .head-essential__cell.faq-unit { display: none; } }

@media only screen and (max-width: 460px) { .head-essential__cell.contact-unit { display: none; } }

.search-drawer { display: none; width: 100%; height: 70px; background: white; position: absolute; top: -70px; left: 0; border-bottom: 1px solid #e1e4e8; overflow: hidden; z-index: 1000; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); }

@media (max-width: 860px), (max-device-width: 1024px) { .search-drawer { height: 50px; top: -50px; } }

.search-drawer__content { display: block; width: 100%; height: 100%; }

.search-drawer__content form { display: -ms-flexbox; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; padding: 0 5%; }

.search-drawer__input { flex-grow: 1; }

.search-drawer__input input { width: 100%; border: 0; font-size: 14px; }

.search-drawer__submit { border: 0; background: none; color: #474848; font-size: 22px; padding: 0 10px; cursor: pointer; }

.search-drawer__close { color: #474848; font-size: 22px; padding: 0 10px; }

.sidecart-drawer { display: block; width: 100%; max-width: 414px; min-width: 320px; height: 100vh; background: rgba(255, 255, 255, 0.95); position: absolute; top: 0; right: -100%; border-left: 1px solid #e1e4e8; overflow: hidden; z-index: 1000; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); }

.sidecart-drawer__content { display: block; width: 100%; height: 100%; overflow-x: hidden; overflow-y: scroll; }

.sidecart-drawer__head { display: -ms-flexbox; display: flex; height: 70px; justify-content: flex-end; align-items: center; border-bottom: 1px solid #e1e4e8; padding: 0 5%; }

.sidecart-drawer__head > p { font-size: 16px; flex-grow: 1; }

@media (max-width: 860px), (max-device-width: 1024px) { .sidecart-drawer__head { height: 50px; position: -webkit-sticky; position: sticky; top: 0; background: #FFFFFF; } }

.sidecart-drawer__close { font-size: 22px; color: #474848; border: none; background: none; cursor: pointer; padding: 0; margin: 0; }

.sidecart-drawer__pane { display: block; width: 100%; padding: 0 5%; margin-bottom: 100px; }

.sidecart-drawer__count { display: block; font-size: 16px; padding: 5px 0; border-bottom: 1px solid #d1d5da; }

.sidecart-drawer__count > b { margin-right: 5px; }

.sidecart-drawer__list { list-style: none; display: block; margin: 10px auto; }

.sidecart-drawer__item { display: -ms-flexbox; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid #b9bab8; }

.sidecart-drawer__item .pic { display: block; width: 55px; padding: 3px 0; background: rgba(225, 228, 232, 0.6); }

.sidecart-drawer__item .pic img { display: block; margin: 0 auto; width: 80%; filter: drop-shadow(-2px 2px 1px #b9bab8); }

.sidecart-drawer__item .info { flex: 1 1 0; margin: 0 0 0 10px; display: -ms-grid; display: grid; grid-template-columns: auto 90px 25px; grid-template-rows: auto auto auto; grid-column-gap: 8px; grid-row-gap: 5px; }

.sidecart-drawer__item .info span { font-size: 14px; font-weight: light; color: #474848; }

.sidecart-drawer__item .info__name { grid-column: 1 / span 3; }

.sidecart-drawer__item .info__variation { grid-column: 1 / span 3; }

.sidecart-drawer__item .info__price { display: -ms-flexbox; display: flex; justify-content: center; flex-direction: column; grid-column: 1 / 2; }

.sidecart-drawer__item .info__price s { color: #b9bab8; }

.sidecart-drawer__item .info__price b { font-weight: normal; }

.sidecart-drawer__item .info__qty { grid-column: 2 / 3; justify-self: end; max-height: 24px; }

.sidecart-drawer__item .info__qty input[type=number] { padding: 3px 0; }

.sidecart-drawer__item .info__cancel { grid-column: 3 / 4; display: block; background: none; border: none; color: #b9bab8; cursor: pointer; font-size: 12px; width: 25px; margin: 0; padding: 0; -webkit-transition: all 0.35s ease-in; -moz-transition: all 0.35s ease-in; -ms-transition: all 0.35s ease-in; -o-transition: all 0.35s ease-in; transition: all 0.35s ease-in; }

.sidecart-drawer__item .info__cancel:hover { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); }

.sidecart-drawer__totals { display: block; margin: 20px auto; }

.sidecart-drawer__totals .sub { margin: 8px auto; display: -ms-flexbox; display: flex; justify-content: flex-end; align-items: center; }

.sidecart-drawer__totals .sub > p { font-size: 14px; margin: 0; padding: 0; display: -ms-flexbox; display: flex; justify-content: flex-start; align-items: center; }

.sidecart-drawer__totals .sub > p::after { content: ""; display: block; width: 50px; height: 1px; background: #b9bab8; margin: 0 10px; }

.sidecart-drawer__totals .sub > b { font-size: 24px; }

.sidecart-drawer__totals .checkout { display: block; width: 100%; margin: 20px 0; }

.sidemenu-drawer { display: block; width: 100%; max-width: 414px; min-width: 320px; height: 100vh; background: rgba(255, 255, 255, 0.95); position: absolute; top: 0; right: -100%; border-left: 1px solid rgba(71, 72, 72, 0.5); overflow: hidden; z-index: 1000; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); }

.sidemenu-drawer__content { display: block; width: 100%; height: 100%; overflow-x: hidden; overflow-y: scroll; }

.sidemenu-drawer__head { display: -ms-flexbox; display: flex; height: 70px; justify-content: flex-end; align-items: center; border-bottom: 1px solid #6a737d; padding: 0 5%; }

.sidemenu-drawer__head > p { font-size: 16px; flex-grow: 1; }

@media (max-width: 860px), (max-device-width: 1024px) { .sidemenu-drawer__head { height: 50px; position: -webkit-sticky; position: sticky; top: 0; background: #FFFFFF; } }

.sidemenu-drawer__close { font-size: 22px; color: #474848; border: none; background: none; cursor: pointer; padding: 0; margin: 0; }

.sidemenu-drawer__nav { display: block; list-style: none; padding: 5%; margin-bottom: 100px; }

.sidemenu-drawer__nav > li { font-size: 30px; padding: 6px 0; }

.sidemenu-drawer__nav > li.hasnav > a::after { font-family: Flaticon; font-size: inherit; font-style: normal; content: "\f14e"; font-size: 18px; margin-top: 4px; margin-left: 10px; color: #2dbbd8; -webkit-transition: all 0.25s ease-in; -moz-transition: all 0.25s ease-in; -ms-transition: all 0.25s ease-in; -o-transition: all 0.25s ease-in; transition: all 0.25s ease-in; }

.sidemenu-drawer__nav > li.isOpen > a::after { -webkit-transform: rotate(450deg); -moz-transform: rotate(450deg); -ms-transform: rotate(450deg); transform: rotate(450deg); }

.sidemenu-drawer__nav > li.isOpen nav { display: block; max-height: 1000px; -webkit-animation: slideDown 0.5s ease; -moz-animation: slideDown 0.5s ease; animation: slideDown 0.5s ease; }

.sidemenu-drawer__nav > li > a { color: #474848; display: -ms-flexbox; display: flex; justify-content: flex-start; align-items: center; font-size: 30px; }

.sidemenu-drawer__nav > li nav { display: none; max-height: 0; }

.sidemenu-drawer__nav > li nav > a { display: -ms-flexbox; display: flex; justify-content: flex-start; align-items: center; font-size: 20px; color: #474848; margin: 8px 0; letter-spacing: 2.5px; }

.sidemenu-drawer__nav > li nav > a::before { content: ""; width: 15px; height: 1px; background: #959da5; display: block; margin: 0 5px 0 0; }

.footer-wrap { padding: 20px 20px; border-top: 1px solid #e1e4e8; }

.footer-wrap__top { display: -ms-grid; display: grid; grid-template-columns: 1fr auto 1fr; }

@media only screen and (max-width: 1024px) { .footer-wrap__top { grid-template-columns: repeat(2, auto); grid-template-rows: repeat(2, auto); grid-gap: 10px; } }

.footer-wrap__bottom { display: -ms-flexbox; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; border-top: 1px solid #e1e4e8; margin: 20px auto 0; padding: 20px 0 0; }

.footer-logo { display: block; height: 30px; text-align: center; margin: 0; justify-self: start; align-self: center; }

@media only screen and (max-width: 1024px) { .footer-logo { grid-column: 1 / span 1; grid-row: 1 / span 1; } }

.footer-logo > a { display: -ms-flexbox; display: flex; height: 100%; width: 100%; align-items: center; justify-content: center; }

.footer-logo > a img { display: block; height: 100%; min-width: 100%; object-fit: scale-down; }

.footer-menu { margin: 0 auto; justify-self: center; align-self: center; }

@media only screen and (max-width: 1024px) { .footer-menu { grid-column: 1 / span 2; grid-row: 2 / span 1; justify-self: stretch; width: 100%; } }

.footer-menu__main { list-style: none; display: -ms-flexbox; display: flex; justify-content: center; align-items: center; }

.footer-menu__main > li { display: -ms-flexbox; display: flex; justify-content: flex-start; align-items: center; }

.footer-menu__main > li:first-of-type::before, .footer-menu__main > li::after { content: ""; width: 1px; height: 6px; background: #b9bab8; display: block; margin: 0 20px; }

.footer-menu__main > li > a { font-size: 14px; font-weight: lighter; color: rgba(71, 72, 72, 0.7); text-align: center; }

@media only screen and (max-width: 1024px) { .footer-menu__main { display: -ms-grid; display: grid; grid-template-columns: repeat(6, 1fr); grid-row-gap: 10px; justify-items: center; }
  .footer-menu__main > li { width: 100%; justify-content: center; border-right: 1px solid #d1d5da; }
  .footer-menu__main > li:first-of-type::before, .footer-menu__main > li::after { display: none; }
  .footer-menu__main > li:nth-of-type(1) { border-left: 1px solid #d1d5da; } }

@media only screen and (max-width: 768px) { .footer-menu__main { grid-template-columns: repeat(3, 1fr); }
  .footer-menu__main > li:nth-of-type(3n+1) { border-left: 1px solid #d1d5da; } }

@media only screen and (max-width: 320px) { .footer-menu__main > li > a { font-size: 12px; } }

.footer-social { justify-self: end; align-self: center; display: -ms-flexbox; display: flex; justify-content: flex-start; align-items: center; }

@media only screen and (max-width: 1024px) { .footer-social { grid-column: 2 / span 1; grid-row: 1 / span 1; } }

.footer-social > b { font-size: 16px; font-weight: lighter; color: rgba(71, 72, 72, 0.7); }

.footer-social > a { margin-left: 15px; font-size: 16px; color: #474848; }

@media only screen and (max-width: 1024px) { .footer-social > a { margin: 0 5px; } }

.footer-copyright { display: block; width: 100%; font-size: 14px; color: #6a737d; text-align: center; margin: 0; padding: 0; letter-spacing: 1px; font-weight: lighter; }

/* <<<<<<<<<<<<<<<<<<<<<<<<
=== coman-design===
>>>>>>>>>>>>>>>>>>>>>>>>>> */
.coman-design { display: -ms-flexbox; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; margin: 0; padding: 0; font-size: 14px; color: rgba(71, 72, 72, 0.5); letter-spacing: 1px; font-weight: lighter; }

.coman-design > span { display: -ms-flexbox; display: flex; justify-content: flex-start; align-items: center; }

.coman-design > span::after { content: ""; width: 20px; height: 1px; background: #e1e4e8; margin: 0 5px; }

.coman-design a { font-size: 14px; color: rgba(71, 72, 72, 0.5); margin: 0 5px; }

.coman-design i { color: #b9bab8; }

.coman-design i::before { font-size: 10px; }

.swiper-container.inTop .swiper-wrapper .swiper-slide { width: 100%; height: 100vh; max-height: 100vh; min-height: 230px; }

@media (max-width: 860px), (max-device-width: 1024px) { .swiper-container.inTop .swiper-wrapper .swiper-slide { height: calc(100vh / 2); } }

@media only screen and (max-width: 460px) { .swiper-container.inTop .swiper-wrapper .swiper-slide { height: calc(100vh / 2.5); } }

.swiper-slide { text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; position: relative; }

.swiper-slide a { display: block; padding: 0; margin: 0; width: 100%; height: 100%; z-index: 1; }

.swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); }

.swiper-slide div.virtual { position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: -ms-flexbox; display: flex; justify-content: flex-start; align-items: center; pointer-events: none; }

.swiper-slide div.virtual > span { display: block; width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); pointer-events: none; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); }

.indx-anchor { padding: 80px 0; }

@media only screen and (max-width: 1024px) { .indx-anchor { padding: 50px 0; } }

.btn-moreArrow { position: relative; padding: 5px 20px 5px 5px; display: inline-block; border-bottom: 1px solid #474848; color: #474848; -webkit-transition: padding 0.5s ease-in; -moz-transition: padding 0.5s ease-in; -ms-transition: padding 0.5s ease-in; -o-transition: padding 0.5s ease-in; transition: padding 0.5s ease-in; }

.btn-moreArrow::before { position: absolute; bottom: 0; right: 0; content: ""; width: 1px; height: 16px; background-color: #474848; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: bottom right; -moz-transform-origin: bottom right; -ms-transform-origin: bottom right; transform-origin: bottom right; }

.btn-moreArrow:hover { padding-right: 30px; }

.indx-news { display: -ms-flexbox; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; }

.indx-news__title { width: 100%; display: -ms-grid; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); justify-items: start; align-items: start; }

.indx-news__title > .mainHead { font-size: 36px; color: #2d2d2d; margin: 0; padding: 0; grid-column: 1 / 2; grid-row: 1 / 2; }

@media only screen and (max-width: 768px) { .indx-news__title > .mainHead { font-size: 30px; } }

.indx-news__title > .subHead { font-size: 20px; color: #474848; margin: 0; padding: 0; grid-column: 1 / 2; grid-row: 2 / 3; }

.indx-news__title > .more { grid-column: 2 / 3; grid-row: 1 / 3; justify-self: end; }

.indx-news__lists { list-style: none; width: 100%; display: -ms-flexbox; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; }

.indx-news__list { padding: 20px 0; margin: 0 auto; min-width: 100%; display: -ms-flexbox; display: flex; justify-content: space-between; align-items: center; text-decoration: none; flex-flow: row wrap; font-size: 16px; }

.indx-news__list:not(:last-child) { border-bottom: 1px solid #b9bab8; }

.indx-news__list .date { color: #2d2d2d; margin-right: 5%; }

@media only screen and (max-width: 768px) { .indx-news__list .date { min-width: 100%; margin-right: 0; } }

.indx-news__list .cat { color: #FFFFFF; background: #2d2d2d; font-weight: lighter; width: 100px; text-align: center; padding: 5px; }

@media only screen and (max-width: 768px) { .indx-news__list .cat { width: 85px; font-size: 14px; padding: 7px 4px; } }

.indx-news__list .content { color: #474848; flex: 1 1 0; margin-left: 5%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; letter-spacing: 1px; -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -ms-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in; height: 32.2px; max-height: 32.2px .indx-news__list .content; }

.indx-news__list .content :hover { text-decoration: #6a737d underline dotted; letter-spacing: 1.1px; }

@media only screen and (max-width: 768px) { .indx-news__list .content { font-size: 14px; } }

.indx-series { display: -ms-flexbox; display: flex; justify-content: space-between; align-items: center; position: relative; flex-flow: row wrap; overflow: hidden; }

.indx-series::after { position: absolute; content: ""; display: block; background-repeat: no-repeat; background-size: contain; z-index: -1; }

@media only screen and (max-width: 860px) { .indx-series { justify-content: flex-start; align-items: flex-start; } }

.indx-series:nth-of-type(5n+1)::after { background-image: url("../img/brush/s-3.png"); transform-origin: top right; width: 370px; height: 415px; opacity: 0.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: alpha(opacity=60); right: -5%; top: 0; }

@media only screen and (min-width: 1366px) { .indx-series:nth-of-type(5n+1)::after { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } }

@media only screen and (max-width: 1024px) { .indx-series:nth-of-type(5n+1)::after { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); } }

@media only screen and (max-width: 860px) { .indx-series:nth-of-type(5n+1)::after { transform-origin: bottom right; top: auto; bottom: 0; } }

@media only screen and (max-width: 600px) { .indx-series:nth-of-type(5n+1)::after { -webkit-transform: scale(0.6); -moz-transform: scale(0.6); -ms-transform: scale(0.6); transform: scale(0.6); } }

.indx-series:nth-of-type(5n+2)::after { background-image: url("../img/brush/001.png"); transform-origin: bottom left; width: 230px; height: 230px; left: -8%; bottom: 0%; opacity: 0.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: alpha(opacity=60); }

@media only screen and (min-width: 1366px) { .indx-series:nth-of-type(5n+2)::after { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } }

@media only screen and (max-width: 1024px) { .indx-series:nth-of-type(5n+2)::after { left: -10%; } }

@media only screen and (max-width: 860px) { .indx-series:nth-of-type(5n+2)::after { left: -15%; bottom: 0%; } }

@media only screen and (max-width: 600px) { .indx-series:nth-of-type(5n+2)::after { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); } }

@media only screen and (max-width: 375px) { .indx-series:nth-of-type(5n+2)::after { left: -20%; bottom: 0%; -webkit-transform: scale(0.6); -moz-transform: scale(0.6); -ms-transform: scale(0.6); transform: scale(0.6); } }

.indx-series:nth-of-type(5n+3)::after { background-image: url("../img/brush/003.png"); transform-origin: top right; width: 230px; height: 230px; opacity: 0.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: alpha(opacity=60); right: -2%; top: 10%; }

@media only screen and (max-width: 860px) { .indx-series:nth-of-type(5n+3)::after { transform-origin: bottom right; right: -10%; top: auto; bottom: 0; -webkit-transform: scale(0.85); -moz-transform: scale(0.85); -ms-transform: scale(0.85); transform: scale(0.85); } }

@media only screen and (max-width: 600px) { .indx-series:nth-of-type(5n+3)::after { right: -15%; } }

@media only screen and (max-width: 460px) { .indx-series:nth-of-type(5n+3)::after { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); } }

.indx-series:nth-of-type(5n+4)::after { background-image: url("../img/brush/s-2.png"); transform-origin: bottom left; width: 370px; height: 415px; opacity: 0.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: alpha(opacity=60); left: -1%; bottom: 0; }

@media only screen and (min-width: 1366px) { .indx-series:nth-of-type(5n+4)::after { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } }

@media only screen and (max-width: 1024px) { .indx-series:nth-of-type(5n+4)::after { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); } }

@media only screen and (max-width: 460px) { .indx-series:nth-of-type(5n+4)::after { left: -3%; -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); } }

.indx-series:nth-of-type(odd) .indx-series__pic { order: 1; -webkit-box-shadow: 50px 50px 0px 10px rgba(185, 186, 184, 0.25); -moz-box-shadow: 50px 50px 0px 10px rgba(185, 186, 184, 0.25); box-shadow: 50px 50px 0px 10px rgba(185, 186, 184, 0.25); }

.indx-series:nth-of-type(odd) .indx-series__content { order: 2; }

.indx-series:nth-of-type(odd) .indx-series__content .mainHead:before { left: 100%; }

.indx-series:nth-of-type(even) .indx-series__pic { order: 2; -webkit-box-shadow: -50px 50px 0px 5px rgba(185, 186, 184, 0.25); -moz-box-shadow: -50px 50px 0px 5px rgba(185, 186, 184, 0.25); box-shadow: -50px 50px 0px 5px rgba(185, 186, 184, 0.25); }

.indx-series:nth-of-type(even) .indx-series__content { order: 1; }

.indx-series:nth-of-type(even) .indx-series__content .mainHead:before { right: 100%; }

@media only screen and (max-width: 860px) { .indx-series:nth-of-type(even) .indx-series__pic { order: 1; }
  .indx-series:nth-of-type(even) .indx-series__content { order: 2; } }

.indx-series__pic { width: 50%; position: relative; }

@media only screen and (max-width: 860px) { .indx-series__pic { width: 100%; } }

.indx-series__pic .overlay { position: absolute; content: ""; width: 100%; height: 100%; display: block; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); background: linear-gradient(45deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%); top: 0; left: 0; }

.indx-series__pic > a { display: block; width: 100%; }

.indx-series__pic > a img { display: block; width: 100%; }

.indx-series__content { width: 35%; margin: 0 auto; }

@media only screen and (max-width: 1024px) { .indx-series__content { width: 40%; } }

@media only screen and (max-width: 860px) { .indx-series__content { width: 100%; padding: 0 6%; margin-top: 25px; text-align: center; } }

.indx-series__content .mainHead { font-size: 60px; color: #2d2d2d; margin: 0; padding: 0 5px; position: relative; display: inline; background: url("../img/brush/slash.png"); }

.indx-series__content .mainHead:before { content: ""; display: block; width: 100vw; height: 1px; position: absolute; background: #b9bab8; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); z-index: -1; }

@media only screen and (max-width: 1240px) { .indx-series__content .mainHead { font-size: 42px; } }

@media only screen and (max-width: 860px) { .indx-series__content .mainHead { font-size: 38px; } }

@media only screen and (max-width: 600px) { .indx-series__content .mainHead { font-size: 34px; } }

.indx-series__content .subHead { font-size: 40px; color: #474848; margin: 6% 0; }

@media only screen and (max-width: 1240px) { .indx-series__content .subHead { font-size: 34px; margin: 4% 0; } }

@media only screen and (max-width: 860px) { .indx-series__content .subHead { margin: 5px auto 3%; font-size: 24px; } }

@media only screen and (max-width: 600px) { .indx-series__content .subHead { font-size: 20px; } }

.indx-series__content .intro { font-size: 16px; color: #474848; letter-spacing: 1.5px; margin: 0; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; line-height: 2; }

@media only screen and (max-width: 1240px) { .indx-series__content .intro { line-height: 1.5; -webkit-line-clamp: 2; } }

@media only screen and (max-width: 860px) { .indx-series__content .intro { text-align: left; font-size: 14px; } }

.indx-series__content .more { margin: 10px 0; }

@media only screen and (max-width: 1240px) { .indx-series__content .more { margin: 6px 0; } }

@media only screen and (max-width: 860px) { .indx-series__content .more { margin: 10px auto; text-align: center; } }

.indx-picLink { display: -ms-flexbox; display: flex; justify-content: space-between; align-items: center; }

@media only screen and (max-width: 600px) { .indx-picLink { justify-content: flex-start; flex-wrap: wrap; } }

.indx-picLink__unit { display: block; width: 50%; }

@media only screen and (max-width: 600px) { .indx-picLink__unit { width: 100%; } }

.indx-picLink__content { display: block; width: 100%; position: relative; overflow: hidden; }

.indx-picLink__content:hover > .pic { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); }

.indx-picLink__content:hover > .title:after { opacity: 0.2; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; filter: alpha(opacity=20); }

.indx-picLink__content:hover > .title h3 { letter-spacing: 2px; }

.indx-picLink__content > .pic { display: block; width: 100%; -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -ms-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in; }

.indx-picLink__content > .title { position: absolute; display: -ms-flexbox; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; top: 0; left: 0; z-index: 2; }

.indx-picLink__content > .title:after { content: ""; display: block; position: absolute; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -ms-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in; background: #FFFFFF; width: calc(100% - 20px); height: calc(100% - 20px); top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: -1; border: 2px solid #2d2d2d; }

.indx-picLink__content > .title.txtLight h2 { color: #FFFFFF; }

.indx-picLink__content > .title.txtLight h3 { color: #FFFFFF; }

.indx-picLink__content > .title h2 { font-size: 54px; margin: 0; padding: 0; color: #FFFFFF; text-shadow: 2px 3px 4px #d1d5da; }

@media only screen and (max-width: 860px) { .indx-picLink__content > .title h2 { font-size: 48px; } }

@media only screen and (max-width: 860px) { .indx-picLink__content > .title h2 { font-size: 42px; } }

.indx-picLink__content > .title h3 { font-size: 30px; margin: 0; padding: 0; color: #FFFFFF; -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -ms-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in; }

@media only screen and (max-width: 860px) { .indx-picLink__content > .title h3 { font-size: 26px; } }

@media only screen and (max-width: 860px) { .indx-picLink__content > .title h3 { font-size: 22px; } }

.indx-pds__lists { display: -ms-grid; display: grid; grid-template-columns: repeat(3, 1fr); justify-items: center; grid-gap: 30px; }

@media only screen and (max-width: 1024px) { .indx-pds__lists { grid-template-columns: repeat(2, 1fr); grid-gap: 15px; } }

@media only screen and (max-width: 600px) { .indx-pds__lists { grid-template-columns: 1fr; } }

.indx-pds__list { display: -ms-flexbox; display: flex; width: 100%; height: 200px; flex-direction: row; justify-content: flex-end; align-items: center; padding: 5px; background: linear-gradient(145deg, rgba(225, 228, 232, 0.6) 70%, #e1e4e8 30%); position: relative; }

@media only screen and (max-width: 768px) { .indx-pds__list { padding: 10px; height: 160px; } }

@media only screen and (max-width: 600px) { .indx-pds__list { height: 140px; }
  .indx-pds__list:nth-of-type(even) { justify-content: flex-start; background: linear-gradient(215deg, rgba(225, 228, 232, 0.6) 70%, #e1e4e8 30%); }
  .indx-pds__list:nth-of-type(even) .pic { order: 1; }
  .indx-pds__list:nth-of-type(even) .info { order: 2; align-items: flex-end; left: auto; right: 8%; } }

.indx-pds__list .pic { display: block; height: 100%; width: auto; overflow: hidden; }

.indx-pds__list .pic:hover img { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); }

.indx-pds__list .pic img { display: block; height: 100%; -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -ms-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in; filter: drop-shadow(-5px 5px 2px #b9bab8); }

.indx-pds__list .info { display: -ms-flexbox; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; position: absolute; width: 50%; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); left: 8%; text-align: left; z-index: 1; }

.indx-pds__list .info__name { color: #474848; font-size: 36px; }

@media only screen and (max-width: 1240px) { .indx-pds__list .info__name { font-size: 34px; } }

@media only screen and (max-width: 1024px) { .indx-pds__list .info__name { font-size: 38px; } }

@media only screen and (max-width: 768px) { .indx-pds__list .info__name { font-size: 30px; } }

@media only screen and (max-width: 600px) { .indx-pds__list .info__name { font-size: 28px; } }

.indx-pds__list .info__en { color: #b9bab8; font-size: 18px; }

.indx-pds__list .info__more { display: -ms-flexbox; display: flex; justify-content: flex-start; align-items: center; color: #2dbbd8; font-size: 14px; border: 1px solid #2dbbd8; padding: 0 5px 2px; margin: 5px 0; -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -ms-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in; }

.indx-pds__list .info__more:hover { letter-spacing: 1.5px; background: #2dbbd8; color: #FFFFFF; }

.page-main-brand { position: relative; }

.page-main-brand::after { content: "MUSIC TREE"; position: fixed; writing-mode: vertical-rl; text-orientation: mixed; font-size: 300px; right: 0; top: 0; color: rgba(225, 228, 232, 0.5); z-index: -1; }

.brand-one-intro { position: relative; display: -ms-flexbox; display: flex; justify-content: flex-start; align-items: center; padding-bottom: 3.5%; }

@media only screen and (max-width: 1024px) { .brand-one-intro { flex-direction: column; justify-content: center; align-items: flex-start; } }

.brand-one-intro .pic { display: block; width: 70%; background-position: center center; background-repeat: no-repeat; background-attachment: fixed; background-size: 100%; }

.brand-one-intro .pic > img { display: block; width: 100%; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); }

@media only screen and (min-width: 1440px) { .brand-one-intro .pic { width: 75%; } }

@media only screen and (max-width: 1024px) { .brand-one-intro .pic { width: 100%; background-attachment: local; } }

.brand-one-intro .info { display: -ms-flexbox; display: flex; flex-flow: column wrap; width: 30%; padding: 20px; margin-left: -8%; margin-bottom: -3.5%; background: rgba(251, 251, 251, 0.6) url("../img/brush/slash.png"); -webkit-box-shadow: 0 0 10px rgba(46, 46, 46, 0.16); -moz-box-shadow: 0 0 10px rgba(46, 46, 46, 0.16); box-shadow: 0 0 10px rgba(46, 46, 46, 0.16); align-self: flex-end; }

@media only screen and (min-width: 1440px) { .brand-one-intro .info { width: 25%; } }

@media only screen and (max-width: 1240px) { .brand-one-intro .info { width: 40% !important; margin-left: -18%; } }

@media only screen and (max-width: 1024px) { .brand-one-intro .info { width: 90% !important; margin: -50px auto 0; border: none; } }

.brand-one-intro .info h2 { font-size: 26px; margin: 0; padding: 15px 0; color: #2d2d2d; }

@media only screen and (max-width: 1024px) { .brand-one-intro .info h2 { font-size: 20px; padding: 8px 0; } }

.brand-one-intro .info p { font-size: 16px; letter-spacing: 1px; line-height: 1.8; color: #474848; }

@media only screen and (max-width: 1024px) { .brand-one-intro .info p { font-size: 14px; line-height: 1.3; } }

.brand-col-intro { margin-bottom: 100px; }

.brand-col-intro__lists { list-style: none; display: -ms-flexbox; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; }

.brand-col-intro__list { min-width: 100%; display: -ms-flexbox; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin: 60px auto; position: relative; }

.brand-col-intro__list::after { content: ""; display: block; position: absolute; -webkit-animation: vawe 10s linear infinite; -moz-animation: vawe 10s linear infinite; animation: vawe 10s linear infinite; z-index: -1; }

.brand-col-intro__list:nth-child(odd)::after { width: 250px; height: 250px; bottom: 0; right: -15px; -webkit-border-radius: 64% 36% 28% 72%/52% 33% 67% 48%; -moz-border-radius: 64% 36% 28% 72%/52% 33% 67% 48%; -o-border-radius: 64% 36% 28% 72%/52% 33% 67% 48%; border-radius: 64% 36% 28% 72%/52% 33% 67% 48%; background: rgba(45, 187, 216, 0.5); background: linear-gradient(to top left, rgba(45, 187, 216, 0.35), rgba(124, 215, 236, 0.7)); }

@media only screen and (max-width: 1024px) { .brand-col-intro__list:nth-child(odd)::after { width: 200px; height: 200px; bottom: 50%; } }

@media only screen and (max-width: 860px) { .brand-col-intro__list:nth-child(odd)::after { width: 120px; height: 120px; } }

.brand-col-intro__list:nth-child(odd) > span { -webkit-border-radius: 28% 72% 33% 67%/55% 53% 47% 45%; -moz-border-radius: 28% 72% 33% 67%/55% 53% 47% 45%; -o-border-radius: 28% 72% 33% 67%/55% 53% 47% 45%; border-radius: 28% 72% 33% 67%/55% 53% 47% 45%; order: 1; -webkit-animation: vawe2 20s linear infinite; -moz-animation: vawe2 20s linear infinite; animation: vawe2 20s linear infinite; }

@media only screen and (max-width: 1024px) { .brand-col-intro__list:nth-child(odd) > span { margin-left: auto; } }

.brand-col-intro__list:nth-child(odd) > article { order: 2; align-items: flex-start; }

.brand-col-intro__list:nth-child(odd) > article .title { margin: 20px 20px 20px -10%; }

@media only screen and (max-width: 1024px) { .brand-col-intro__list:nth-child(odd) > article .title { margin: -5px 0 10px; } }

.brand-col-intro__list:nth-child(even)::after { width: 280px; height: 280px; top: 0; left: -15px; -webkit-border-radius: 31% 69% 78% 22%/55% 33% 67% 45%; -moz-border-radius: 31% 69% 78% 22%/55% 33% 67% 45%; -o-border-radius: 31% 69% 78% 22%/55% 33% 67% 45%; border-radius: 31% 69% 78% 22%/55% 33% 67% 45%; background: rgba(249, 117, 131, 0.5); background: linear-gradient(to top left, rgba(249, 117, 131, 0.35), rgba(249, 179, 221, 0.7)); }

@media only screen and (max-width: 1024px) { .brand-col-intro__list:nth-child(even)::after { width: 220px; height: 220px; top: 30%; } }

@media only screen and (max-width: 860px) { .brand-col-intro__list:nth-child(even)::after { width: 140px; height: 140px; } }

.brand-col-intro__list:nth-child(even) > span { -webkit-border-radius: 82% 18% 70% 30%/26% 33% 67% 74%; -moz-border-radius: 82% 18% 70% 30%/26% 33% 67% 74%; -o-border-radius: 82% 18% 70% 30%/26% 33% 67% 74%; border-radius: 82% 18% 70% 30%/26% 33% 67% 74%; order: 2; -webkit-animation: vawe3 20s linear infinite; -moz-animation: vawe3 20s linear infinite; animation: vawe3 20s linear infinite; }

@media only screen and (max-width: 1024px) { .brand-col-intro__list:nth-child(even) > span { order: 1; } }

.brand-col-intro__list:nth-child(even) > article { order: 1; align-items: flex-end; }

@media only screen and (max-width: 1024px) { .brand-col-intro__list:nth-child(even) > article { order: 2; } }

.brand-col-intro__list:nth-child(even) > article .title { margin: 20px -10% 20px 20px; }

@media only screen and (max-width: 1024px) { .brand-col-intro__list:nth-child(even) > article .title { margin: -5px 0 10px; } }

.brand-col-intro__list > span { display: block; width: 50%; overflow: hidden; position: relative; z-index: 0; }

.brand-col-intro__list > span img { display: block; width: 100%; }

@media only screen and (max-width: 1024px) { .brand-col-intro__list > span { min-width: 87%; } }

.brand-col-intro__list > article { display: -ms-flexbox; display: flex; flex-flow: column wrap; justify-content: flex-start; flex: 1; position: relative; z-index: 1; }

@media only screen and (max-width: 1024px) { .brand-col-intro__list > article { min-width: 100%; margin-top: -10%; } }

.brand-col-intro__list > article .title { font-size: 70px; color: #2d2d2d; }

@media only screen and (max-width: 1024px) { .brand-col-intro__list > article .title { font-size: 60px; } }

@media only screen and (max-width: 860px) { .brand-col-intro__list > article .title { font-size: 48px; } }

@media only screen and (max-width: 460px) { .brand-col-intro__list > article .title { font-size: 32px; } }

.brand-col-intro__list > article .content { display: block; color: #474848; margin: 10px 25px; }

.brand-hlist { margin-bottom: 100px; }

.brand-hlist__head { margin: 50px auto; }

.brand-hlist__lists { margin: 50px auto; padding: 0 5%; }

@media only screen and (max-width: 600px) { .brand-hlist__lists { padding: 0; } }

.brand-hlist__lists .list { display: -ms-flexbox; display: flex; justify-content: flex-start; align-items: flex-start; margin-bottom: 20px; }

@media only screen and (max-width: 460px) { .brand-hlist__lists .list { flex-flow: column wrap; } }

.brand-hlist__lists .year { font-size: 40px; color: #2dbbd8; display: -ms-flexbox; display: flex; justify-content: flex-start; align-items: center; font-family: 'PT Mono', monospace; font-weight: normal; }

@media only screen and (max-width: 768px) { .brand-hlist__lists .year { font-size: 36px; } }

@media only screen and (max-width: 600px) { .brand-hlist__lists .year { font-size: 30px; } }

@media only screen and (max-width: 460px) { .brand-hlist__lists .year { width: 100%; } }

.brand-hlist__lists .year::after { content: ""; width: 100px; height: 1px; background: #e1e4e8; display: block; margin: 0 20px; }

@media only screen and (max-width: 768px) { .brand-hlist__lists .year::after { width: 80px; } }

@media only screen and (max-width: 600px) { .brand-hlist__lists .year::after { width: 20px; margin: 0 10px; } }

@media only screen and (max-width: 460px) { .brand-hlist__lists .year::after { flex-grow: 1; } }

.brand-hlist__lists .events { list-style-type: initial; margin: 0; padding: 0; padding-top: 13px; padding-left: 20px; }

@media only screen and (max-width: 768px) { .brand-hlist__lists .events { padding-top: 11px; } }

@media only screen and (max-width: 600px) { .brand-hlist__lists .events { padding-top: 8px; } }

@media only screen and (max-width: 460px) { .brand-hlist__lists .events { width: 100%; padding-left: 30px; } }

.brand-hlist__lists .events > li { font-size: 18px; color: #474848; }

.page-main-products { display: -ms-flexbox; display: flex; justify-content: space-between; align-items: flex-start; }

.page-aside { width: 200px; }

@media only screen and (max-width: 1024px) { .page-aside { width: 150px; } }

@media (max-width: 860px), (max-device-width: 1024px) { .page-aside { display: none; } }

.page-content { width: calc(100% - 200px - 50px); margin-left: auto; }

@media only screen and (max-width: 1024px) { .page-content { width: calc(100% - 150px - 25px); } }

@media (max-width: 860px), (max-device-width: 1024px) { .page-content { width: 100%; margin: auto; } }

.result-cont { display: block; width: 100%; }

.pds-menu { position: -webkit-sticky; position: sticky; top: 100px; }

.pds-menu__lists { list-style: none; display: -ms-flexbox; display: flex; flex-flow: column wrap; justify-content: flex-start; align-items: flex-start; }

.pds-menu__list { padding: 5px 0; margin-bottom: 5px; display: block; width: 100%; border-bottom: 1px solid rgba(185, 186, 184, 0.5); }

.pds-menu__list a { font-size: 14px; color: #474848; letter-spacing: 1.5px; display: -ms-flexbox; display: flex; flex-flow: column wrap; justify-content: flex-start; align-items: flex-end; -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -ms-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in; }

.pds-menu__list a::after { content: attr(data-en); padding: 0; margin: 0; color: #b9bab8; }

.pds-menu__list a:hover { letter-spacing: 2px; }

.pds-menu__list.isActive { padding: 5px 0 0; border-bottom: 1px solid rgba(71, 72, 72, 0.25); }

.pds-menu__list.isActive::after { display: block; content: ""; background: url("../img/brush/slash.png"); width: 100%; height: 5px; }

.pds-menu__list.isActive a::after { color: #2dbbd8; }

.grid-pds__lists { display: -ms-grid; display: grid; justify-items: center; grid-gap: 20px; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); }

@media only screen and (max-width: 600px) { .grid-pds__lists { grid-template-columns: repeat(2, 1fr); } }

@media only screen and (max-width: 460px) { .grid-pds__lists { grid-template-columns: 1fr; } }

.grid-pds__list { display: -ms-flexbox; display: flex; width: 100%; flex-direction: column; justify-content: flex-start; align-items: center; padding: 20px; background: rgba(225, 228, 232, 0.6); position: relative; }

@media only screen and (max-width: 768px) { .grid-pds__list { padding: 10px; } }

.grid-pds__list.isLike .extra .extra__like .btn-like i { color: #d73a49; }

.grid-pds__list .pic { display: block; width: 80%; margin: 0 auto; overflow: hidden; }

.grid-pds__list .pic:hover img { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); }

.grid-pds__list .pic img { display: block; width: 100%; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-transition: all 0.6s ease-in; -moz-transition: all 0.6s ease-in; -ms-transition: all 0.6s ease-in; -o-transition: all 0.6s ease-in; transition: all 0.6s ease-in; -webkit-animation: fadeIn 0.8s ease-in; -moz-animation: fadeIn 0.8s ease-in; animation: fadeIn 0.8s ease-in; filter: drop-shadow(-5px 5px 2px rgba(185, 186, 184, 0.7)); }

.grid-pds__list .info { display: -ms-flexbox; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; }

.grid-pds__list .info__name { color: #474848; font-size: 16px; -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -ms-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in; }

.grid-pds__list .info__name:hover { letter-spacing: .7px; }

.grid-pds__list .info__price { display: -ms-flexbox; display: flex; justify-content: flex-start; align-items: flex-start; }

.grid-pds__list .info__price span { padding: 5px 0; }

.grid-pds__list .info__price .retail-price { color: #b9bab8; order: 2; font-size: 12px; margin-top: 6px; }

.grid-pds__list .info__price .retail-price::before { font-size: 8px; }

.grid-pds__list .info__price .selling-price { color: #2dbbd8; order: 1; font-size: 30px; }

.grid-pds__list .info__point { display: -ms-flexbox; display: flex; justify-content: flex-start; align-items: flex-start; font-size: 20px; color: #f97583; border: 1px dashed #b9bab8; padding: 3px 5px 0; margin-top: 5px; -webkit-border-radius: 0 10px 10px 10px; -moz-border-radius: 0 10px 10px 10px; -o-border-radius: 0 10px 10px 10px; border-radius: 0 10px 10px 10px; background-color: rgba(255, 220, 224, 0.3); }

.grid-pds__list .info__point:empty { display: none; }

.grid-pds__list .info__point::before { content: ""; background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' enable-background='new 0 0 512.027 512.027' height='512' viewBox='0 0 512.027 512.027' width='512' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cg fill='%23f79caf'%3E%3Cpath d='m48.013 152.027h416v96h-416z'/%3E%3Cpath d='m64.013 248.027h384v248h-384z'/%3E%3Cpath d='m339.463 62.387c0 14.18-5.42 26.95-13.49 38.11-23.62 32.65-69.96 51.53-69.96 51.53s-83.45-34-83.45-89.64c0-19.21 11.91-35.7 28.88-42.73 5.64-2.34 11.84-3.63 18.35-3.63 14.55 0 27.55 6.45 36.22 16.6 8.67-10.15 21.67-16.6 36.22-16.6 26.09 0 47.23 20.76 47.23 46.36z'/%3E%3C/g%3E%3Cpath d='m306.653 121.007c-23.37 19.91-50.64 31.02-50.64 31.02s-83.45-34-83.45-89.64c0-19.21 11.91-35.7 28.88-42.73 4.01-1.66 8.31-2.8 12.8-3.31-3.62 6.56-5.68 14.07-5.68 22.04 0 55.64 83.45 89.64 83.45 89.64s5.93-2.42 14.64-7.02z' fill='%23e3889b'/%3E%3Cpath d='m464.013 208.027v40h-416v-96h40v26c0 16.57 13.43 30 30 30z' fill='%23e3889b'/%3E%3Cpath d='m448.013 456.027v40h-384v-248h40v168c0 22.09 17.91 40 40 40z' fill='%23e3889b'/%3E%3Cpath d='m224.013 248.027h64v248h-64z' fill='%2398d7ce'/%3E%3Cpath d='m288.013 456.027c-17.673 0-32-14.327-32-32v-176h32z' fill='%23acebe2'/%3E%3Cpath d='m208.013 152.027h96v96h-96z' fill='%2398d7ce'/%3E%3Cpath d='m304.013 208.027h-24c-17.673 0-32-14.327-32-32v-24h56z' fill='%23acebe2'/%3E%3Cpath d='m464.013 136.027h-150.523c21.683-17.593 41.977-42.398 41.977-73.636 0-50.596-57.98-79.741-99.454-51.131-41.486-28.618-99.454.546-99.454 51.131 0 31.238 20.294 56.043 41.977 73.636h-150.523c-8.837 0-16 7.164-16 16v96c0 8.836 7.163 16 16 16v232c0 8.836 7.163 16 16 16h384c8.837 0 16-7.164 16-16v-232c8.837 0 16-7.164 16-16v-96c0-8.837-7.163-16-16-16zm-16 96h-128v-64h128zm-224-64h64v64h-64zm19.833-125.01c6.384 7.474 17.949 7.475 24.334 0 18.632-21.816 55.287-8.976 55.287 19.374 0 33.442-44.204 61.183-67.453 72.145-23.267-10.971-67.455-38.709-67.455-72.145 0-28.356 36.658-41.187 55.287-19.374zm-179.833 125.01h128v64h-128zm16 96h128v216h-128zm160 216v-216h32v216zm192 0h-128v-216h128z'/%3E%3C/g%3E%3C/svg%3E"); background-size: 100% 100%; background-repeat: no-repeat; display: inline-block; width: 18px; height: 18px; margin-right: 3px; }

.grid-pds__list .info__point::after { content: "pt"; font-size: 12px; color: #474848; }

.grid-pds__list .extra { display: -ms-flexbox; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; position: absolute; top: 15px; left: 0; z-index: 1; }

.grid-pds__list .extra > span { margin: 2px 0; }

.grid-pds__list .extra__sale { padding: 4px 5px 2px; background: #d73a49; color: #FFFFFF; -webkit-border-radius: 0 5px 5px 0; -moz-border-radius: 0 5px 5px 0; -o-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0; font-size: 12px; }

.grid-pds__list .extra__preorder { padding: 4px 5px 2px; background: #2dbbd8; color: #FFFFFF; -webkit-border-radius: 0 5px 5px 0; -moz-border-radius: 0 5px 5px 0; -o-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0; font-size: 14px; }

.grid-pds__list .extra__like { padding: 2px 5px; background: #fdaeb7; -webkit-border-radius: 0 5px 5px 0; -moz-border-radius: 0 5px 5px 0; -o-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0; }

.grid-pds__list .extra__like button { background: none; border: none; padding: 0; margin: 0; color: #FFFFFF; font-size: 14px; cursor: pointer; }

.grid-pds__list .extra__like button i { font-size: 10px; margin-right: 3px; color: #FFFFFF; display: inline-block; -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -ms-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in; }

.grid-pds__list .extra__like button:hover i { -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -ms-transform: scale(1.3); transform: scale(1.3); }

.grid-pds__list .extra__like > a { color: #FFFFFF; font-size: 14px; }

.grid-pds__list .extra__like > a i { font-size: 10px; margin-right: 3px; color: #FFFFFF; }

.pds-detail { display: -ms-flexbox; display: flex; justify-content: flex-start; align-items: flex-start; position: relative; flex-wrap: wrap; clear: both; }

.pds-detail::before { content: ""; display: block; width: 60px; height: 200px; background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1IDUiPjxwYXRoIGZpbGw9IiNjNmM2YzYiIGQ9Ik0yIDBoMXYxSDJ6Ii8+PC9zdmc+); background-position: 50%; background-size: 5px 5px; }

@media only screen and (max-width: 860px) { .pds-detail::before { width: 30px; height: 150px; } }

.pds-detail::after { content: ""; display: block; width: 60px; height: 200px; background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1IDUiPjxwYXRoIGZpbGw9IiNjNmM2YzYiIGQ9Ik0yIDBoMXYxSDJ6Ii8+PC9zdmc+); background-position: 50%; background-size: 5px 5px; }

@media only screen and (max-width: 860px) { .pds-detail::after { width: 30px; } }

@media only screen and (max-width: 768px) { .pds-detail::after { display: none; } }

.pds-detail__preview { width: calc(100% / 10 * 5); padding-right: 5%; position: -webkit-sticky; position: sticky; top: 100px; }

@media only screen and (max-width: 1240px) { .pds-detail__preview { width: calc(100% / 10 * 4.5); } }

@media only screen and (max-width: 860px) { .pds-detail__preview { width: calc(100% / 10 * 5); } }

@media only screen and (max-width: 768px) { .pds-detail__preview { min-width: calc(100% - 30px); position: static; } }

.pds-detail__info { width: calc(100% / 10 * 5); margin-left: auto; flex: 1; }

@media only screen and (max-width: 1240px) { .pds-detail__info { width: calc(100% / 10 * 5.5); } }

@media only screen and (max-width: 860px) { .pds-detail__info { width: calc(100% / 10 * 5); } }

@media only screen and (max-width: 768px) { .pds-detail__info { min-width: 100%; margin-left: 0; margin-top: 50px; } }

.preview-cont { display: -ms-flexbox; display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column wrap; }

.preview-cont__pics { list-style: none; position: relative; width: 100%; display: block; -webkit-border-radius: 0 10% 10% 10%; -moz-border-radius: 0 10% 10% 10%; -o-border-radius: 0 10% 10% 10%; border-radius: 0 10% 10% 10%; }

.preview-cont__pics::after { content: ""; width: 100%; height: 100%; background: rgba(225, 228, 232, 0.15) url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1IDUiPjxwYXRoIGZpbGw9IiNjNmM2YzYiIGQ9Ik0yIDBoMXYxSDJ6Ii8+PC9zdmc+); background-position: 50%; background-size: 5px 5px; display: block; position: absolute; bottom: -10%; right: -10%; z-index: -1; -webkit-border-radius: 0 10% 10% 10%; -moz-border-radius: 0 10% 10% 10%; -o-border-radius: 0 10% 10% 10%; border-radius: 0 10% 10% 10%; }

@media only screen and (max-width: 768px) { .preview-cont__pics::after { right: -5%; bottom: -5%; } }

.preview-cont__pics > li { position: absolute; display: block; width: 100%; top: -5%; left: 15%; -webkit-border-radius: 0 10% 10% 10%; -moz-border-radius: 0 10% 10% 10%; -o-border-radius: 0 10% 10% 10%; border-radius: 0 10% 10% 10%; visibility: hidden; -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; }

@media only screen and (max-width: 768px) { .preview-cont__pics > li { width: 95%; } }

.preview-cont__pics > li.isOpen { position: static; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); visibility: visible; top: 0; left: 0; }

.preview-cont__pics > li img { display: block; width: 100%; -webkit-border-radius: 0 10% 10% 10%; -moz-border-radius: 0 10% 10% 10%; -o-border-radius: 0 10% 10% 10%; border-radius: 0 10% 10% 10%; }

.preview-cont__thumbs { display: -ms-grid; display: grid; grid-template-columns: repeat(auto-fit, 35px); justify-content: start; grid-gap: 5px; width: 80%; margin: 2% auto; }

.preview-cont__thumbs a { display: block; width: 100%; aspect-ratio: 1 / 1; border: 1px solid #b9bab8; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; overflow: hidden; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }

.preview-cont__thumbs a.isOpen { border: 2px solid #474848; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }

.preview-cont__thumbs a img { display: block; width: 100%; object-fit: contain; }

.info-cont { display: -ms-flexbox; display: flex; padding: 0 5%; justify-content: flex-start; align-items: flex-start; flex-flow: row wrap; }

.info-cont__title { font-size: 34px; padding: 0; margin: 0; color: #2d2d2d; width: 100%; }

@media only screen and (max-width: 860px) { .info-cont__title { font-size: 30px; } }

.info-cont__feature { width: 100%; display: -ms-grid; display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); justify-content: start; justify-items: start; flex-wrap: wrap; grid-gap: 15px 5px; padding: 30px 0; border-bottom: 1px solid rgba(225, 228, 232, 0.5); }

@media only screen and (max-width: 1024px) { .info-cont__feature { grid-template-columns: repeat(auto-fill, minmax(83px, 1fr)); padding: 20px 0; }
  .info-cont__feature span { letter-spacing: 1px; }
  .info-cont__feature span::after { letter-spacing: 1px; } }

.info-cont__feature span { display: -ms-flexbox; display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: row wrap; color: #2dbbd8; font-size: 14px; letter-spacing: 1.2px; }

.info-cont__feature span:empty { padding-top: 16.1px; }

.info-cont__feature span::after { content: attr(data-des); color: #b9bab8; display: block; width: 100%; font-size: 14px; letter-spacing: 1.2px; }

.info-cont__feature .like.isLike button { color: #d73a49; }

.info-cont__feature .like button { display: inline-block; margin: 0; padding: 0; border: none; background: none; color: #b9bab8; -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -ms-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in; }

.info-cont__feature .like button:hover { -webkit-transform: scale(1.25); -moz-transform: scale(1.25); -ms-transform: scale(1.25); transform: scale(1.25); }

.info-cont__feature .like button i { font-size: 10px; padding: 0 5px 0 0; }

.info-cont__feature .like b { letter-spacing: normal; }

.info-cont__point { display: -ms-flexbox; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: flex-start; width: 100%; padding: 10px 0; margin: 0; }

.info-cont__point.none { display: none; }

.info-cont__point span { font-size: 14px; display: -ms-flexbox; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: flex-end; color: #474848; }

.info-cont__point span a { font-size: 12px; color: #b9bab8; text-decoration: underline; padding: 0 5px; margin-left: 5px; }

.info-cont__point span a:hover { color: #7cd7ec; }

.info-cont__point span b { display: inline-block; font-weight: bold; font-size: 36px; height: 34px; color: #f97583; margin-right: 5px; }

.info-cont__point span::before { content: ""; background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' enable-background='new 0 0 512.027 512.027' height='512' viewBox='0 0 512.027 512.027' width='512' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cg fill='%23f79caf'%3E%3Cpath d='m48.013 152.027h416v96h-416z'/%3E%3Cpath d='m64.013 248.027h384v248h-384z'/%3E%3Cpath d='m339.463 62.387c0 14.18-5.42 26.95-13.49 38.11-23.62 32.65-69.96 51.53-69.96 51.53s-83.45-34-83.45-89.64c0-19.21 11.91-35.7 28.88-42.73 5.64-2.34 11.84-3.63 18.35-3.63 14.55 0 27.55 6.45 36.22 16.6 8.67-10.15 21.67-16.6 36.22-16.6 26.09 0 47.23 20.76 47.23 46.36z'/%3E%3C/g%3E%3Cpath d='m306.653 121.007c-23.37 19.91-50.64 31.02-50.64 31.02s-83.45-34-83.45-89.64c0-19.21 11.91-35.7 28.88-42.73 4.01-1.66 8.31-2.8 12.8-3.31-3.62 6.56-5.68 14.07-5.68 22.04 0 55.64 83.45 89.64 83.45 89.64s5.93-2.42 14.64-7.02z' fill='%23e3889b'/%3E%3Cpath d='m464.013 208.027v40h-416v-96h40v26c0 16.57 13.43 30 30 30z' fill='%23e3889b'/%3E%3Cpath d='m448.013 456.027v40h-384v-248h40v168c0 22.09 17.91 40 40 40z' fill='%23e3889b'/%3E%3Cpath d='m224.013 248.027h64v248h-64z' fill='%2398d7ce'/%3E%3Cpath d='m288.013 456.027c-17.673 0-32-14.327-32-32v-176h32z' fill='%23acebe2'/%3E%3Cpath d='m208.013 152.027h96v96h-96z' fill='%2398d7ce'/%3E%3Cpath d='m304.013 208.027h-24c-17.673 0-32-14.327-32-32v-24h56z' fill='%23acebe2'/%3E%3Cpath d='m464.013 136.027h-150.523c21.683-17.593 41.977-42.398 41.977-73.636 0-50.596-57.98-79.741-99.454-51.131-41.486-28.618-99.454.546-99.454 51.131 0 31.238 20.294 56.043 41.977 73.636h-150.523c-8.837 0-16 7.164-16 16v96c0 8.836 7.163 16 16 16v232c0 8.836 7.163 16 16 16h384c8.837 0 16-7.164 16-16v-232c8.837 0 16-7.164 16-16v-96c0-8.837-7.163-16-16-16zm-16 96h-128v-64h128zm-224-64h64v64h-64zm19.833-125.01c6.384 7.474 17.949 7.475 24.334 0 18.632-21.816 55.287-8.976 55.287 19.374 0 33.442-44.204 61.183-67.453 72.145-23.267-10.971-67.455-38.709-67.455-72.145 0-28.356 36.658-41.187 55.287-19.374zm-179.833 125.01h128v64h-128zm16 96h128v216h-128zm160 216v-216h32v216zm192 0h-128v-216h128z'/%3E%3C/g%3E%3C/svg%3E"); background-size: 100% 100%; background-repeat: no-repeat; display: inline-block; width: 30px; height: 30px; margin-right: 10px; }

.info-cont__footnote { display: -ms-flexbox; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; width: 100%; padding: 5px 0; border-bottom: 1px solid rgba(225, 228, 232, 0.5); }

.info-cont__footnote span { color: #474848; font-size: 14px; padding: 0; margin: 5px 0; }

.info-cont__footnote span::before { color: #FFFFFF; -webkit-border-radius: 0 5px 5px 5px; -moz-border-radius: 0 5px 5px 5px; -o-border-radius: 0 5px 5px 5px; border-radius: 0 5px 5px 5px; padding: 0 5px; margin: 0 5px 0 0; font-size: 12px; }

.info-cont__footnote span a { font-size: 12px; color: #b9bab8; text-decoration: underline; padding: 0 5px; }

.info-cont__footnote span a:hover { color: #7cd7ec; }

.info-cont__footnote span b { font-weight: bold; font-size: 14px; color: #474848; }

.info-cont__footnote span[data-stock]::before { content: attr(data-stock); background: #2dbbd8; }

.info-cont__footnote span[data-des]::before { content: attr(data-des); background: #fdaeb7; }

.info-cont__price { display: -ms-flexbox; display: flex; justify-content: flex-start; align-items: flex-start; margin: 20px 0; flex: 1; }

@media only screen and (max-width: 1240px) { .info-cont__price { min-width: 100%; } }

.info-cont__price .selling-price { font-size: 60px; color: #474848; margin: 0; padding: 0; }

.info-cont__price .selling-price::before { font-size: 30px; }

.info-cont__price .selling-price:empty { display: none; }

.info-cont__price .retail-price { font-size: 14px; color: #b9bab8; margin: 0; margin-top: 16px; padding: 0; }

.info-cont__price .retail-price:empty { display: none; }

.info-cont__intro { display: -ms-flexbox; display: flex; justify-content: flex-start; align-items: flex-start; margin: 20px 0; padding: 0 0 0 10px; flex: 1; }

@media only screen and (max-width: 1240px) { .info-cont__intro { min-width: 100%; padding: 0 10px; margin: 0; }
  .info-cont__intro p { margin: 0; } }

.info-cont__intro p { font-size: 14px; color: #474848; }

.info-cont__options { display: block; width: 100%; margin-top: 50px; }

@media only screen and (max-width: 1240px) { .info-cont__options { margin-top: 30px; } }

.info-cont__options .option-wrap { display: -ms-flexbox; display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: row wrap; }

.info-cont__options .variation { min-width: 100%; margin-bottom: 15px; }

.info-cont__options .qty { width: calc(50% - 5px) !important; margin-right: auto; }

.info-cont__options .qty input[type=number] { width: 100%; padding: 9px 5px; }

.info-cont__options .qty button { position: relative; z-index: 5; }

.info-cont__options .qty .num-plus { margin-left: -18px; }

.info-cont__options .qty .num-minus { margin-right: -18px; }

.info-cont__options .addcart { width: calc(50% - 5px) !important; margin-left: auto; }

.info-cont__options .addcart .buttonUnit { width: 100%; }

.info-cont__options .tomail { width: calc(50% - 5px) !important; margin-right: auto; }

.info-cont__options .sendmail { width: calc(50% - 5px) !important; margin-left: auto; }

.info-cont__options .sendmail .buttonUnit { width: 100%; }

.info-cont__description { display: block; width: 100%; margin-top: 50px; }

.collapse-list { list-style: none; margin: 0; padding: 0; display: -ms-flexbox; display: flex; flex-flow: column wrap; justify-content: flex-start; align-items: flex-start; }

.collapse-list__unit { display: block; width: 100%; }

.collapse-list__unit:last-child { border-bottom: 1px solid rgba(225, 228, 232, 0.5); }

.collapse-list__unit.isOpen .coll-Heading { border-bottom: 2px dotted #e1e4e8; }

.collapse-list__unit.isOpen .coll-Heading::after { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); }

.collapse-list__unit.isOpen .coll-Content { -webkit-animation: slideDown 0.5s linear; -moz-animation: slideDown 0.5s linear; animation: slideDown 0.5s linear; height: auto; max-height: 10000px; visibility: visible; }

.collapse-list__unit .coll-Heading { display: -ms-flexbox; display: flex; justify-content: flex-start; align-items: center; border-top: 1px solid rgba(225, 228, 232, 0.5); padding: 10px 0; }

.collapse-list__unit .coll-Heading::before { content: "\f140"; font-family: Flaticon; font-style: normal; font-size: 12px; color: #2dbbd8; }

.collapse-list__unit .coll-Heading::after { content: "\f12c"; font-family: Flaticon; font-style: normal; font-size: 12px; margin-left: auto; color: #2dbbd8; -webkit-transform-origin: center; -moz-transform-origin: center; -ms-transform-origin: center; transform-origin: center; -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -ms-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in; }

.collapse-list__unit .coll-Heading > span { font-size: 16px; color: #2d2d2d; letter-spacing: 2px; margin: 0 5px; }

.collapse-list__unit .coll-Content { display: block; padding-left: 17px; padding-right: 15px; margin: 0; color: #474848; font-size: 14px; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); height: 0; max-height: 0; visibility: hidden; overflow: hidden; line-height: 1.5; }

.collapse-list.typeQA .coll-Heading { border-left: 5px solid #2dbbd8; }

.collapse-list.typeQA .coll-Heading::before { content: 'Q'; font-family: 'PT Mono'; font-size: 32px; padding: 0 10px; }

.collapse-list.typeQA .coll-Content { border-left: 5px solid #f97583; }

.page-attach { margin-top: 80px; margin-bottom: 80px; }

.page-attach__related { display: -ms-flexbox; display: flex; justify-content: space-between; align-items: flex-start; flex-flow: row wrap; }

.page-attach__aside { width: 200px; }

@media only screen and (max-width: 1024px) { .page-attach__aside { width: 170px; } }

@media (max-width: 860px), (max-device-width: 1024px) { .page-attach__aside { min-width: 100%; width: 100%; margin: auto; } }

.page-attach__content { width: calc(100% - 200px - 25px); margin-left: auto; }

@media only screen and (max-width: 1024px) { .page-attach__content { width: calc(100% - 170px - 25px); } }

@media (max-width: 860px), (max-device-width: 1024px) { .page-attach__content { min-width: 100%; width: 100%; margin: auto; } }

.attach__title { width: 100%; display: -ms-grid; display: grid; grid-template-columns: repeat(1, 1fr); justify-items: start; align-items: start; }

.attach__title > .mainHead { font-size: 34px; color: #2d2d2d; margin: 0; padding: 0; }

@media only screen and (max-width: 768px) { .attach__title > .mainHead { font-size: 30px; } }

.attach__title > .subHead { font-size: 16px; color: #474848; margin: 0; padding: 0; }

.page-main-news { display: block; margin: 1% auto 80px; }

.news-card__lists { list-style: none; display: -ms-grid; display: grid; justify-items: start; grid-gap: 25px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.news-card__list { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); padding: 15px; -webkit-border-radius: 0 15px 15px 15px; -moz-border-radius: 0 15px 15px 15px; -o-border-radius: 0 15px 15px 15px; border-radius: 0 15px 15px 15px; background: rgba(225, 228, 232, 0.25); display: -ms-flexbox; display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; -webkit-transition: all 0.35s ease-in; -moz-transition: all 0.35s ease-in; -ms-transition: all 0.35s ease-in; -o-transition: all 0.35s ease-in; transition: all 0.35s ease-in; }

.news-card__list:hover { box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); }

.news-card__list.cat-news .cat { color: #474848; border-color: #474848; }

.news-card__list.cat-news .date { color: #474848; }

.news-card__list.cat-sys .cat { color: #f97583; border-color: #f97583; }

.news-card__list.cat-sys .date { color: #f97583; }

.news-card__list.cat-remind .cat { color: #2dbbd8; border-color: #2dbbd8; }

.news-card__list.cat-remind .date { color: #2dbbd8; }

.news-card__list .date { font-size: 14px; color: #474848; }

.news-card__list .cat { font-size: 26px; border-top: 5px solid #474848; margin-top: -15px; margin-bottom: 5px; color: #474848; }

.news-card__list .ttl { font-size: 16px; color: #474848; margin: 8px auto; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; letter-spacing: 1.5px; max-height: calc(16px * 2 * 1.2); line-height: 1.2; }

.news-card__list .pic { display: block; width: 100%; margin: 0 auto; }

.news-card__list .pic img { display: block; width: 100%; object-fit: cover; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-transition: all 0.6s ease-in; -moz-transition: all 0.6s ease-in; -ms-transition: all 0.6s ease-in; -o-transition: all 0.6s ease-in; transition: all 0.6s ease-in; -webkit-animation: fadeIn 0.8s ease-in; -moz-animation: fadeIn 0.8s ease-in; animation: fadeIn 0.8s ease-in; -webkit-border-radius: 0 15px 15px 15px; -moz-border-radius: 0 15px 15px 15px; -o-border-radius: 0 15px 15px 15px; border-radius: 0 15px 15px 15px; }

.news-cont__head { display: block; }

.news-cont__head .cover { display: block; width: 100%; }

.news-cont__head .cover img { display: block; width: 100%; }

.news-cont__head .title { display: -ms-flexbox; display: flex; justify-content: flex-start; align-items: center; flex-flow: column nowrap; width: 60%; margin: -5% auto 0; background: #f6f8fa; position: relative; padding: 20px 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; -o-border-radius: 50px; border-radius: 50px; }

@media only screen and (max-width: 1024px) { .news-cont__head .title { width: 80%; } }

.news-cont__head .title .date { font-size: 20px; color: #474848; margin: 5px auto; }

.news-cont__head .title .cat { background: #474848; color: #FFFFFF; padding: 0 10px; -webkit-border-radius: 0 10px 10px 10px; -moz-border-radius: 0 10px 10px 10px; -o-border-radius: 0 10px 10px 10px; border-radius: 0 10px 10px 10px; font-size: 14px; }

.news-cont__head .title .ttl { font-size: 16px; color: #2d2d2d; margin: 8px auto; letter-spacing: 1.5px; line-height: 1.2; width: 100%; border-top: 1px solid rgba(225, 228, 232, 0.8); padding: 20px 0 0; text-align: center; }

.news-cont__content { display: block; margin-top: 50px; padding: 20px 8%; color: #474848; position: relative; }

.news-cont__content::after { content: ""; height: 50px; width: 1px; background: rgba(106, 115, 125, 0.5); display: block; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); top: -30px; }

.news-cont__content img { display: block; max-width: 100%; -webkit-animation: fadeIn 0.8s ease-in; -moz-animation: fadeIn 0.8s ease-in; animation: fadeIn 0.8s ease-in; }

.news-cont__foot { display: -ms-flexbox; display: flex; justify-content: center; align-items: flex-start; margin: 50px auto; }

.page-main-contact { display: block; margin: 1% auto 80px; }

.contact-cont { display: -ms-flexbox; display: flex; justify-content: flex-start; align-items: flex-start; }

@media only screen and (max-width: 600px) { .contact-cont { flex-wrap: wrap; } }

.contact-cont__fill { display: block; width: calc((100% / 3 * 1) - 20px); }

@media only screen and (max-width: 1024px) { .contact-cont__fill { width: calc((100% / 10 * 4) - 20px); } }

@media only screen and (max-width: 600px) { .contact-cont__fill { width: 100%; margin-bottom: 50px; } }

.contact-cont__info { margin-left: auto; width: calc((100% / 3 * 2) - 20px); }

@media only screen and (max-width: 1024px) { .contact-cont__info { width: calc((100% / 10 * 6) - 20px); } }

@media only screen and (max-width: 600px) { .contact-cont__info { width: 100%; } }

.contact-cont__head { border-bottom: 5px solid #474848; }

.contact-cont__head h2 { font-size: 20px; color: #474848; margin: 0 0 5px; padding: 0; }

.fill-wrap { display: -ms-flexbox; display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; }

.fill-wrap > span { display: block; width: 100%; margin: 5px 0; }

.fill-wrap .email, .fill-wrap .name { position: relative; }

.fill-wrap .email input, .fill-wrap .name input { border-top: none; }

.fill-wrap .email::after, .fill-wrap .name::after { content: ""; display: block; position: absolute; width: 100%; height: 5px; background: url("../img/brush/slash.png"); bottom: 0; left: 0; z-index: -1; }

.fill-wrap .msg { display: block; width: 100%; background: linear-gradient(180deg, transparent, transparent 36px, #b9bab8 100%); background-size: 100% 37px; background-repeat: repeat-y; background-color: transparent; overflow: hidden; }

.fill-wrap .msg textarea { line-height: 37px; margin-top: -11px; border: none; resize: none; }

.fill-wrap .send { margin-top: 20px; }

.fill-wrap .send button { width: 100%; }

.info-wrap { display: block; }

.contact-info-lists { list-style: none; display: -ms-flexbox; display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; }

.contact-info-lists > li { display: -ms-flexbox; display: flex; justify-content: flex-start; align-items: center; width: 100%; margin: 5px 0; }

.contact-info-lists > li .ttl { font-size: 22px; color: #2d2d2d; padding: 0; margin: 0; width: 100px; max-width: 100px; }

@media only screen and (max-width: 600px) { .contact-info-lists > li .ttl { font-size: 20px; width: 80px; max-width: 80px; } }

.contact-info-lists > li .det { font-size: 16px; color: #2dbbd8; margin: 0; padding: 0; letter-spacing: 1.15px; line-height: 1.7; }

.contact-info-lists > li .det > a { color: #2dbbd8; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; border-bottom: 1px dashed #f97583; }

.contact-info-lists > li .det > a:hover { padding-left: 5px; color: #f97583; }

.contact-info-lists > li .gmap { position: relative; display: block; width: 100%; height: 400px; -webkit-border-radius: 0 25px 25px 25px; -moz-border-radius: 0 25px 25px 25px; -o-border-radius: 0 25px 25px 25px; border-radius: 0 25px 25px 25px; overflow: hidden; border: 2px solid #b9bab8; margin-top: 20px; }

@media only screen and (max-width: 600px) { .contact-info-lists > li .gmap { height: 300px; } }

.contact-info-lists > li .gmap iframe { display: block; width: 100%; height: 100%; }

.page-main-faq { display: -ms-flexbox; display: flex; justify-content: space-between; align-items: flex-start; }

.faq-content { display: block; }

.faq-content__section { display: block; width: 100%; margin-bottom: 50px; }

.faq-content__section .cat { font-size: 26px; color: #474848; margin: 0 !important; padding: 0; }

.faq-content__section .collapse-list { margin: 20px 0 30px; }

.page-main-policy { display: block; }

.policy-cont__content { display: block; }

.policyTerm { margin: 50px auto; }

.policyTerm__ttl { font-size: 24px; color: #2d2d2d; }

.policyTerm__body { margin-left: 25px; }

@media only screen and (max-width: 768px) { .policyTerm__body { margin-left: 15px; } }

@media only screen and (max-width: 460px) { .policyTerm__body { margin-left: 0; } }

.policyTerm__body h4 { font-size: 18px; margin: 0; padding: 0; color: #2d2d2d; }

.policyTerm__body p { font-size: 14px; color: #474848; margin: 3px 0 12px; padding: 0; }

.policyTerm__body ol { margin: 0 0 10px; padding: 0 0 0 10px; }

.policyTerm__body ol li { font-size: 14px; color: #474848; margin: 3px 0; line-height: 1.5; }

.page-main-member { display: block; }

.page-main-user { display: -ms-flexbox; display: flex; justify-content: space-between; align-items: flex-start; }

.member-cont { display: block; }

.member-cont__form { display: block; width: 100%; max-width: 500px; margin: 0 auto; }

.member-cont__form form { width: 100%; }

.user-cont { display: block; }

.user-cont__form { display: block; width: 100%; margin: 0 auto; }

.user-cont__form form { width: 100%; }

.user-cont__orders, .user-cont__point { display: block; width: 100%; margin: 0 auto; }

.orders-status-list { list-style: none; margin: 0; padding: 0; display: block; }

.orders-status-list > li { display: -ms-flexbox; display: flex; justify-content: flex-start; align-items: center; flex-flow: row wrap; margin-bottom: 20px; }

.orders-status-list > li > div { display: -ms-flexbox; display: flex; justify-content: flex-start; align-items: center; flex-flow: column wrap; align-self: stretch; border-right: 1px solid #e1e4e8; border-top: 1px solid #e1e4e8; border-bottom: 1px solid #e1e4e8; }

.orders-status-list > li > div > span { padding: 5px; font-size: 14px; color: #474848; }

.orders-status-list > li > div > a { padding: 5px; font-size: 14px; }

.orders-status-list > li > div > b { font-size: 10px; color: #6a737d; padding: 0 5px; }

.orders-status-list > li > div::before { content: attr(data-ttl); font-size: 12px; display: block; width: 100%; text-align: center; background: rgba(225, 228, 232, 0.5); padding: 5px 0; color: #6a737d; }

.orders-status-list > li .orderno { width: calc(100% / 2); border: none; padding: 0 10px; }

.orders-status-list > li .orderno > a { color: #f97583; font-size: 16px; margin-right: auto; -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -ms-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in; }

.orders-status-list > li .orderno > a:hover { color: #2dbbd8; letter-spacing: 0.5px; }

.orders-status-list > li .orderno > a:hover::after { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); }

.orders-status-list > li .orderno > a::after { font-family: Flaticon; font-size: inherit; font-style: normal; content: "\f157"; padding: 0 5px; font-size: 14px; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -ms-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in; }

.orders-status-list > li .orderno::before { display: none; }

.orders-status-list > li .date { width: calc(100% / 2); border: none; padding: 0 10px; }

.orders-status-list > li .date::before { display: none; }

.orders-status-list > li .date > span { margin-left: auto; }

.orders-status-list > li .payment { width: calc(100% / 12 * 3); border-left: 1px solid #e1e4e8; -webkit-border-radius: 10px 0 0 10px; -moz-border-radius: 10px 0 0 10px; -o-border-radius: 10px 0 0 10px; border-radius: 10px 0 0 10px; }

.orders-status-list > li .status { width: calc(100% / 12 * 3); }

.orders-status-list > li .total { width: calc(100% / 12 * 3); }

.orders-status-list > li .propose { width: calc(100% / 12 * 3); -webkit-border-radius: 0 10px 10px 0; -moz-border-radius: 0 10px 10px 0; -o-border-radius: 0 10px 10px 0; border-radius: 0 10px 10px 0; }

.orders-status-list > li .propose > a { color: #2dbbd8; }

.points-balance { display: -ms-flexbox; display: flex; justify-content: space-between; align-items: flex-start; flex-flow: row wrap; }

.points-balance__div { display: block; width: calc(50% - 10px); border: 1px solid #e1e4e8; -webkit-border-radius: 0 10px 10px 10px; -moz-border-radius: 0 10px 10px 10px; -o-border-radius: 0 10px 10px 10px; border-radius: 0 10px 10px 10px; padding: 10px; }

@media only screen and (max-width: 460px) { .points-balance__div { width: 100%; margin-bottom: 15px; } }

.points-balance__div > h3 { display: -ms-flexbox; display: flex; justify-content: flex-start; align-items: center; margin: 5px 0; padding: 0; border-bottom: 1px solid #e1e4e8; }

.points-balance__div > h3 span { margin-right: auto; font-size: 20px; color: #2d2d2d; }

.points-balance__div > h3 b { font-weight: bold; font-size: 30px; color: #2dbbd8; }

.points-balance__div label { font-size: 12px; color: #f97583; margin: 5px 0; padding: 0; }

.points-balance__div > blockquote { font-size: 12px; color: #6a737d; }

.points-history { display: block; overflow: hidden; width: 100%; }

.points-history__tabs { display: -ms-flexbox; display: flex; justify-content: flex-start; align-items: center; flex-flow: row wrap; }

.points-history__tabs > select { width: 70px; padding: 3px 0; border-bottom: 3px solid #f97583; }

@media only screen and (max-width: 460px) { .points-history__tabs > select { font-size: 12px; } }

.points-history__tabs > a { text-decoration: none; font-size: 14px; color: #474848; width: calc((100% - 70px) / 3); text-align: center; padding: 3px 0; border-bottom: 3px solid #e1e4e8; }

@media only screen and (max-width: 460px) { .points-history__tabs > a { font-size: 12px; } }

.points-history__tabs > a.isActive { border-color: #2dbbd8; }

.points-history__lists { display: block; width: 100%; list-style: none; }

.points-history__lists > li { display: -ms-grid; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: auto; grid-template-areas: "date order type point"; align-items: center; justify-items: center; border-bottom: 1px solid #e1e4e8; padding: 10px; }

.points-history__lists > li.head { padding: 5px 10px; background: #f6f8fa; }

.points-history__lists > li.head > div { font-size: 12px; color: #474848; }

.points-history__lists > li .date { grid-area: date; color: #474848; font-size: 14px; }

@media only screen and (max-width: 460px) { .points-history__lists > li .date { font-size: 12px; } }

.points-history__lists > li .order { grid-area: order; }

.points-history__lists > li .order > a { text-decoration: none; color: #2dbbd8; font-size: 14px; }

@media only screen and (max-width: 460px) { .points-history__lists > li .order > a { font-size: 12px; } }

.points-history__lists > li .order > a:hover { color: #f97583; }

.points-history__lists > li .type { grid-area: type; color: #474848; font-size: 14px; }

@media only screen and (max-width: 460px) { .points-history__lists > li .type { font-size: 12px; } }

.points-history__lists > li .point { grid-area: point; font-size: 24px; }

.points-history__lists > li .point.add { color: #2dbbd8; }

.points-history__lists > li .point.minus { color: #6a737d; }

@media only screen and (max-width: 600px) { .points-history__lists > li .point { font-size: 18px; } }

.page-main-cart { display: block; width: 100%; }

.cart-process__lists { list-style: none; display: -ms-flexbox; display: flex; justify-content: space-around; align-items: center; width: 100%; position: relative; -webkit-border-radius: 50px; -moz-border-radius: 50px; -o-border-radius: 50px; border-radius: 50px; overflow: hidden; }

.cart-process__lists::after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-animation: width100 5s 1; -moz-animation: width100 5s 1; animation: width100 5s 1; background: repeating-linear-gradient(135deg, #d1d5da, #d1d5da 25%, #e1e4e8 25%, #e1e4e8 50%, #d1d5da 50%) top left fixed; background-size: 35px 35px; z-index: 0; }

.cart-process__lists > li { display: block; text-align: center; position: relative; width: 100%; }

.cart-process__lists > li::after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #f6f8fa; z-index: 1; }

.cart-process__lists > li:last-child > span { border-right: none; }

.cart-process__lists > li.isActive::after { z-index: 0; }

.cart-process__lists > li > span { font-size: 16px; color: #474848; position: relative; z-index: 3; display: block; width: 100%; padding: 7px 0; border-right: 1px dashed #2dbbd8; }

.cart-cont { display: -ms-grid; display: grid; grid-template-columns: repeat(12, 1fr); justify-items: stretch; grid-gap: 30px; margin: 50px auto 80px; }

@media only screen and (max-width: 860px) { .cart-cont.orderReverse .cart-cont__L { order: 2; }
  .cart-cont.orderReverse .cart-cont__R { order: 1; } }

.cart-cont__L { grid-column: 1 / 8; }

@media only screen and (max-width: 860px) { .cart-cont__L { grid-column: 1 / 13; } }

.cart-cont__R { grid-column: 8 / 13; }

@media only screen and (max-width: 860px) { .cart-cont__R { grid-column: 1 / 13; } }

.cart-cont__LR { grid-column: 1 / 13; }

.cart-item { display: -ms-flexbox; display: flex; justify-items: space-between; align-items: flex-start; width: 100%; -webkit-border-radius: 0 20px 20px 20px; -moz-border-radius: 0 20px 20px 20px; -o-border-radius: 0 20px 20px 20px; border-radius: 0 20px 20px 20px; background: #f6f8fa; padding: 10px; margin-bottom: 20px; position: relative; }

.cart-item .returnCheckbox { position: absolute; -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); left: 0; top: 0px; }

.cart-item .pic { display: block; width: 80px; padding: 5px 0; flex-shrink: 0; text-decoration: none; -webkit-border-radius: 0 20px 20px 20px; -moz-border-radius: 0 20px 20px 20px; -o-border-radius: 0 20px 20px 20px; border-radius: 0 20px 20px 20px; overflow: hidden; background: rgba(225, 228, 232, 0.6); }

.cart-item .pic img { display: block; margin: 0 auto; width: 80%; filter: drop-shadow(-2px 2px 1px #b9bab8); }

.cart-item .info { flex-grow: 1; margin: 0 0 0 10px; display: -ms-grid; display: grid; grid-template-columns: auto 90px 25px; grid-template-rows: auto auto auto auto; grid-column-gap: 8px; grid-row-gap: 5px; }

.cart-item .info span { font-size: 14px; font-weight: lighter; color: #474848; }

.cart-item .info span > p { margin: 0; padding: 0; }

.cart-item .info__name { grid-column: 1 / span 3; }

.cart-item .info__option { grid-column: 1 / span 3; margin: 3px 0; }

.cart-item .info__option .option-model { background: #2dbbd8; color: #FFFFFF; padding: 0 10px; margin: 0; }

.cart-item .info__option .option-variations { border: 1px solid #b9bab8; padding: 0 10px; margin: 0; }

.cart-item .info__option .option-points { background: #fdaeb7; color: #FFFFFF; padding: 0 10px; margin: 0; }

.cart-item .info__price { display: -ms-flexbox; display: flex; justify-content: flex-start; align-items: center; flex-direction: row; grid-column: 1 / 2; }

.cart-item .info__price .retail-price { color: #b9bab8; }

.cart-item .info__price .selling-price { font-weight: normal; }

.cart-item .info__qty { grid-column: 2 / 3; justify-self: end; }

.cart-item .info__qty input[type=number] { padding: 3px 0; }

.cart-item .info__amount { grid-column: 2 / 4; justify-self: end; }

.cart-item .info__amount > p { display: -ms-flexbox; display: flex; justify-content: flex-start; align-items: center; font-size: 14px; }

.cart-item .info__amount > p::before { font-family: Flaticon; font-size: inherit; font-style: normal; content: "\f149"; font-size: 10px; margin: 0 5px; color: #b9bab8; }

.cart-item .info__cancel { grid-column: 3 / 4; display: block; background: none; border: none; color: #b9bab8; cursor: pointer; font-size: 12px; width: 25px; margin: 0; padding: 0; }

.cart-item .info__sub { grid-column: 1 / span 3; display: -ms-flexbox; display: flex; justify-content: flex-end; align-items: center; flex-direction: row; border: 1px solid rgba(185, 186, 184, 0.2); -webkit-border-radius: 50px; -moz-border-radius: 50px; -o-border-radius: 50px; border-radius: 50px; padding: 0 10px; background: rgba(185, 186, 184, 0.2); }

.cart-item .info__sub .sub-ttl { color: #474848; font-size: 14px; display: -ms-flexbox; display: flex; justify-content: flex-start; align-items: center; flex-direction: row; flex: 1; }

.cart-item .info__sub .sub-price { color: #2dbbd8; }

.invoice-lists { padding: 15px 0; margin: 10px 0; list-style: none; display: block; width: 100%; }

.invoice-lists > li { display: -ms-flexbox; display: flex; justify-content: space-between; align-items: center; font-size: 14px; padding: 3px 0; }

.invoice-lists > li.hrspace { display: block; width: 100%; height: 1px; border-bottom: 1px solid #fbfbfb; margin: 5px auto 10px; }

.invoice-lists > li b { font-weight: lighter; color: #474848; letter-spacing: 1px; display: -ms-flexbox; display: flex; justify-content: flex-end; align-items: center; flex-grow: 1; }

.invoice-lists > li b::after { content: ""; width: 10px; height: 1px; flex-grow: 1; border-bottom: 1px dashed #d1d5da; display: block; margin: 0 10px; }

.invoice-lists > li span { color: #474848; }

.invoice-lists > li.orderno b { color: #2d2d2d; }

.invoice-lists > li.orderno span { color: #f97583; }

.invoice-lists > li.total { margin-top: 20px; font-size: 22px; }

.invoice-lists > li.total b { color: #2d2d2d; }

.invoice-lists > li.total span { color: #f97583; }

.notice-list { margin: 20px auto; padding: 0 0 0 15px; list-style-type: square; display: block; width: 100%; }

.notice-list > li { color: #6a737d; font-size: 14px; letter-spacing: 1px; padding: 5px 0; }

.notice-list ul { list-style-type: decimal; padding: 0 0 0 10px; }

body { max-width: 100vw; overflow-x: hidden; clear: both; *zoom: 1; -webkit-overflow-scrolling: touch; }

body:before, body:after { content: " "; display: table; }

body:after { clear: both; }

body.lockscroll { overflow: hidden; }

#wrap { min-height: 100vh; min-width: 320px; display: -ms-flexbox; display: flex; flex-direction: column; align-items: flex-start; }

/* CSS ::selection Selector*/
::-moz-selection { color: #fbfbfb; background: #474848; }

::selection { color: #fbfbfb; background: #474848; }

/* <<<<<<<<<<<<<<<<<<<<<<<<
=== base layout ===
>>>>>>>>>>>>>>>>>>>>>>>>>> */
main { clear: both; *zoom: 1; display: block; width: 100%; }

main:before, main:after { content: " "; display: table; }

main:after { clear: both; }

main.isMargin { margin-top: 70px; }

@media (max-width: 860px), (max-device-width: 1024px) { main.isMargin { margin-top: 50px; } }

header { clear: both; *zoom: 1; display: block; width: 100%; position: fixed; z-index: 999; top: 0; }

header:before, header:after { content: " "; display: table; }

header:after { clear: both; }

footer { clear: both; *zoom: 1; display: block; width: 100%; margin-top: auto !important; }

footer:before, footer:after { content: " "; display: table; }

footer:after { clear: both; }

[currency]::before { font-family: Flaticon; font-style: normal; font-size: 12px; content: "\f150"; font-weight: normal; }

hr { border: 0; height: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.3); }

/* <<<<<<<<<<<<<<<<<<<<<<<<
=== grid width base ===
>>>>>>>>>>>>>>>>>>>>>>>>>> */
.grid-full-mid { width: 100%; margin-right: auto; margin-left: auto; -moz-box-sizing: border-box; box-sizing: border-box; }

.grid-over-mid { width: 100%; margin-right: auto; margin-left: auto; padding-left: 25px; padding-right: 25px; -moz-box-sizing: border-box; box-sizing: border-box; }

.grid-1300-mid { max-width: 1300px; margin-right: auto; margin-left: auto; }

@media only screen and (max-width: 1300px) { .grid-1300-mid { padding-left: 25px; padding-right: 25px; } }

.grid-1300f-mid { max-width: 1300px; margin-right: auto; margin-left: auto; }

.grid-1500-mid { max-width: 1500px; margin-right: auto; margin-left: auto; }

@media only screen and (max-width: 1500px) { .grid-1500-mid { padding-left: 50px; padding-right: 50px; } }

@media only screen and (max-width: 768px) { .grid-1500-mid { padding-left: 25px; padding-right: 25px; } }

.grid-980-mid { max-width: 980px; margin-right: auto; margin-left: auto; }

@media only screen and (max-width: 980px) { .grid-980-mid { padding-left: 25px; padding-right: 25px; } }

.grid-980f-mid { max-width: 980px; margin-right: auto; margin-left: auto; }

.page-location { display: -ms-flexbox; display: flex; justify-content: flex-start; align-items: center; padding: 20px 0; }

.page-location::before { content: ""; display: block; width: 5%; height: 1px; background: #b9bab8; margin-right: 20px; }

.page-location__content { display: -ms-flexbox; display: flex; justify-content: flex-start; align-items: center; flex-flow: row wrap; }

.page-location__en { font-size: 16px; color: #2dbbd8; margin: 0; padding: 2px 0; width: 100%; }

.page-location__sub { font-size: 16px; font-style: italic; color: #6a737d; margin: 0; padding: 2px 0; width: 100%; }

.page-location__title { font-size: 20px; color: #474848; margin: 0; padding: 2px 0; }

.side-menu { position: -webkit-sticky; position: sticky; top: 100px; }

.side-menu__lists { list-style: none; display: -ms-flexbox; display: flex; flex-flow: column wrap; justify-content: flex-start; align-items: flex-start; }

.side-menu__list { padding: 5px 0; margin-bottom: 5px; display: block; width: 100%; border-bottom: 1px solid rgba(185, 186, 184, 0.5); }

.side-menu__list a { font-size: 14px; color: #474848; letter-spacing: 1.5px; display: -ms-flexbox; display: flex; flex-flow: column wrap; justify-content: flex-start; align-items: flex-end; -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -ms-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in; }

.side-menu__list a:hover { letter-spacing: 2px; }

.side-menu__list.isActive { padding: 5px 0 0; border-bottom: 1px solid rgba(71, 72, 72, 0.25); }

.side-menu__list.isActive::after { display: block; content: ""; background: url("../img/brush/slash.png"); width: 100%; height: 5px; }

.side-menu__list.isActive a::after { color: #2dbbd8; }

.page-main { margin: 20px auto 50px; }

.page-tie { display: block; width: 100%; height: 15px; -webkit-box-shadow: inset 0 0 1px rgba(68, 68, 68, 0.6); -moz-box-shadow: inset 0 0 1px rgba(68, 68, 68, 0.6); box-shadow: inset 0 0 1px rgba(68, 68, 68, 0.6); background-color: #2dbbd8; background-image: url("../img/brush/grid.png"); }

.page-title { display: -ms-flexbox; display: flex; align-items: flex-start; flex-flow: row wrap; margin-bottom: 50px; }

.page-title.pos-mid { justify-content: center; }

.page-title.pos-mid .title { text-align: center; }

.page-title.pos-left { justify-content: flex-start; }

.page-title.pos-right { justify-content: flex-end; }

.page-title.pos-right .title { text-align: right; }

.page-title .title { font-size: 28px; color: #2d2d2d; letter-spacing: 3px; margin: 0; padding: 0; width: 100%; }

@media only screen and (max-width: 375px) { .page-title .title { letter-spacing: 1.5px; } }

@media only screen and (max-width: 320px) { .page-title .title { font-size: 26px; } }

.unit-title { display: -ms-flexbox; display: flex; }

.unit-title.pos-mid { justify-content: center; flex-wrap: wrap; }

.unit-title.pos-left { justify-content: flex-start; align-items: center; flex-wrap: wrap; }

.unit-title.pos-left > .title { margin-right: auto; }

.unit-title.pos-left > p { display: block; font-size: 14px; padding: 0; margin: 0; text-align: right; white-space: nowrap; }

.unit-title.pos-left > p > a { color: #2dbbd8; text-decoration: none; padding: 0 5px; }

.unit-title.pos-left > p > a:hover { text-decoration: underline; }

.unit-title.pos-right { justify-content: flex-end; flex-wrap: wrap; }

.unit-title.hasbrbd { border-bottom: 2px solid #2dbbd8; }

.unit-title .title { font-size: 20px; letter-spacing: 1px; color: #474848; margin: 0; padding: 5px 10px 0; font-weight: normal; border: 1px solid #b9bab8; -webkit-border-radius: 50px; -moz-border-radius: 50px; -o-border-radius: 50px; border-radius: 50px; }

.unit-title .title.isXXXL { font-size: 33px; }

.unit-title .title.isXXL { font-size: 30px; }

.unit-title .title.isXL { font-size: 28px; }

.unit-title .title.isL { font-size: 24px; }

.unit-title .title.isM { font-size: 20px; }

.unit-title .title.isS { font-size: 16px; }

.unit-title .title.isXS { font-size: 14px; }

.unit-title > div { display: block; width: 100%; text-align: center; color: #888988; font-size: 20px; }

.unit-msg { display: -ms-flexbox; display: flex; }

.unit-msg.pos-mid { justify-content: center; }

.unit-msg.pos-left { justify-content: flex-start; }

.unit-msg.pos-right { justify-content: flex-end; }

.unit-msg .title { font-size: 24px; color: #00263E; }

.unit-msg .content { font-size: 14px; color: #6a737d; font-weight: lighter; }

.unit-msg .content > * { font-weight: lighter; }

.btn-outline { display: block; border: 1px solid #474848; font-size: 14px; color: #474848; padding: 10px; width: 100%; text-align: center; -webkit-transition: background 0.3s ease-in; -moz-transition: background 0.3s ease-in; -ms-transition: background 0.3s ease-in; -o-transition: background 0.3s ease-in; transition: background 0.3s ease-in; -webkit-transition: color 0.35s ease-in; -moz-transition: color 0.35s ease-in; -ms-transition: color 0.35s ease-in; -o-transition: color 0.35s ease-in; transition: color 0.35s ease-in; }

.btn-outline:hover { background: #474848; color: #FFFFFF; }

.mg-L5 { margin-left: 5px; }

.mg-R5 { margin-right: 5px; }

.mg-T5 { margin-top: 5px; }

.mg-B5 { margin-bottom: 5px; }

.mg-X5 { margin-left: 5px; margin-right: 5px; }

.mg-Y5 { margin-top: 5px; margin-bottom: 5px; }

.mg-L10 { margin-left: 10px; }

.mg-R10 { margin-right: 10px; }

.mg-T10 { margin-top: 10px; }

.mg-B10 { margin-bottom: 10px; }

.mg-X10 { margin-left: 10px; margin-right: 10px; }

.mg-Y10 { margin-top: 10px; margin-bottom: 10px; }

.mg-L15 { margin-left: 15px; }

.mg-R15 { margin-right: 15px; }

.mg-T15 { margin-top: 15px; }

.mg-B15 { margin-bottom: 15px; }

.mg-X15 { margin-left: 15px; margin-right: 15px; }

.mg-Y15 { margin-top: 15px; margin-bottom: 15px; }

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

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

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

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

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

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

.mg-L25 { margin-left: 25px; }

.mg-R25 { margin-right: 25px; }

.mg-T25 { margin-top: 25px; }

.mg-B25 { margin-bottom: 25px; }

.mg-X25 { margin-left: 25px; margin-right: 25px; }

.mg-Y25 { margin-top: 25px; margin-bottom: 25px; }

.mg-L30 { margin-left: 30px; }

.mg-R30 { margin-right: 30px; }

.mg-T30 { margin-top: 30px; }

.mg-B30 { margin-bottom: 30px; }

.mg-X30 { margin-left: 30px; margin-right: 30px; }

.mg-Y30 { margin-top: 30px; margin-bottom: 30px; }

.mg-L35 { margin-left: 35px; }

.mg-R35 { margin-right: 35px; }

.mg-T35 { margin-top: 35px; }

.mg-B35 { margin-bottom: 35px; }

.mg-X35 { margin-left: 35px; margin-right: 35px; }

.mg-Y35 { margin-top: 35px; margin-bottom: 35px; }

.mg-L40 { margin-left: 40px; }

.mg-R40 { margin-right: 40px; }

.mg-T40 { margin-top: 40px; }

.mg-B40 { margin-bottom: 40px; }

.mg-X40 { margin-left: 40px; margin-right: 40px; }

.mg-Y40 { margin-top: 40px; margin-bottom: 40px; }

.mg-L45 { margin-left: 45px; }

.mg-R45 { margin-right: 45px; }

.mg-T45 { margin-top: 45px; }

.mg-B45 { margin-bottom: 45px; }

.mg-X45 { margin-left: 45px; margin-right: 45px; }

.mg-Y45 { margin-top: 45px; margin-bottom: 45px; }

.mg-L50 { margin-left: 50px; }

.mg-R50 { margin-right: 50px; }

.mg-T50 { margin-top: 50px; }

.mg-B50 { margin-bottom: 50px; }

.mg-X50 { margin-left: 50px; margin-right: 50px; }

.mg-Y50 { margin-top: 50px; margin-bottom: 50px; }

.mg-L55 { margin-left: 55px; }

.mg-R55 { margin-right: 55px; }

.mg-T55 { margin-top: 55px; }

.mg-B55 { margin-bottom: 55px; }

.mg-X55 { margin-left: 55px; margin-right: 55px; }

.mg-Y55 { margin-top: 55px; margin-bottom: 55px; }

.pd-L5 { padding-left: 5px; }

.pd-R5 { padding-right: 5px; }

.pd-T5 { padding-top: 5px; }

.pd-B5 { padding-bottom: 5px; }

.pd-X5 { padding-left: 5px; padding-right: 5px; }

.pd-Y5 { padding-top: 5px; padding-bottom: 5px; }

.pd-L10 { padding-left: 10px; }

.pd-R10 { padding-right: 10px; }

.pd-T10 { padding-top: 10px; }

.pd-B10 { padding-bottom: 10px; }

.pd-X10 { padding-left: 10px; padding-right: 10px; }

.pd-Y10 { padding-top: 10px; padding-bottom: 10px; }

.pd-L15 { padding-left: 15px; }

.pd-R15 { padding-right: 15px; }

.pd-T15 { padding-top: 15px; }

.pd-B15 { padding-bottom: 15px; }

.pd-X15 { padding-left: 15px; padding-right: 15px; }

.pd-Y15 { padding-top: 15px; padding-bottom: 15px; }

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

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

.pd-T20 { padding-top: 20px; }

.pd-B20 { padding-bottom: 20px; }

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

.pd-Y20 { padding-top: 20px; padding-bottom: 20px; }

.pd-L25 { padding-left: 25px; }

.pd-R25 { padding-right: 25px; }

.pd-T25 { padding-top: 25px; }

.pd-B25 { padding-bottom: 25px; }

.pd-X25 { padding-left: 25px; padding-right: 25px; }

.pd-Y25 { padding-top: 25px; padding-bottom: 25px; }

.pd-L30 { padding-left: 30px; }

.pd-R30 { padding-right: 30px; }

.pd-T30 { padding-top: 30px; }

.pd-B30 { padding-bottom: 30px; }

.pd-X30 { padding-left: 30px; padding-right: 30px; }

.pd-Y30 { padding-top: 30px; padding-bottom: 30px; }

.pd-L35 { padding-left: 35px; }

.pd-R35 { padding-right: 35px; }

.pd-T35 { padding-top: 35px; }

.pd-B35 { padding-bottom: 35px; }

.pd-X35 { padding-left: 35px; padding-right: 35px; }

.pd-Y35 { padding-top: 35px; padding-bottom: 35px; }

.pd-L40 { padding-left: 40px; }

.pd-R40 { padding-right: 40px; }

.pd-T40 { padding-top: 40px; }

.pd-B40 { padding-bottom: 40px; }

.pd-X40 { padding-left: 40px; padding-right: 40px; }

.pd-Y40 { padding-top: 40px; padding-bottom: 40px; }

.pd-L45 { padding-left: 45px; }

.pd-R45 { padding-right: 45px; }

.pd-T45 { padding-top: 45px; }

.pd-B45 { padding-bottom: 45px; }

.pd-X45 { padding-left: 45px; padding-right: 45px; }

.pd-Y45 { padding-top: 45px; padding-bottom: 45px; }

.mg-Lauto { margin-left: auto; }

.mg-Rauto { margin-right: auto; }

.mg-LRauto { margin-left: auto; margin-right: auto; }

.fxRow-start { justify-content: flex-start !important; }

.fxRow-end { justify-content: flex-end !important; }

.fxRow-center { justify-content: center !important; }

.fxRow-between { justify-content: space-between !important; }

.fxRow-around { justify-content: space-around !important; }

.fxRow-evenly { justify-content: space-evenly !important; }

.tx-center { text-align: center !important; }

.tx-left { text-align: left !important; }

.tx-right { text-align: right !important; }

.wd-100 { width: 100%; }

.wd-50 { width: 50%; }

.minwd-100 { min-width: 100%; }

.minwd-50 { min-width: 50%; }

/* <<<<<<<<<<<<<<<<<<<<<<<<
=== sweet alert ===
>>>>>>>>>>>>>>>>>>>>>>>>>> */
.swal-modal { -webkit-border-radius: 20; -moz-border-radius: 20; -o-border-radius: 20; border-radius: 20; min-width: 300px; max-width: 320px; -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); -ms-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); -o-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); }

.swal-overlay { background-color: rgba(106, 115, 125, 0.45); }

.swal-button { padding: 7px 19px; background-color: #2d2d2d; font-size: 12px; border: none; }

.swal-button:not([disabled]):hover { background-color: #2d2d2d; }

.swal-button:focus { box-shadow: none; }

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

/*# sourceMappingURL=main.css.map */