@charset 'utf-8';

/*!
 * MUST'IT UI/UX Component v0.8.7 (https://ux.mustit.io/)
 * Copyright 2019 dev_ujh@mustit.co.kr
 * Copyright 2019 MUST'IT, Inc.
 * Licensed under MIT (https://github.com/mustit-dev/mustit-ux)
 */

/*
 * MUSTIT layout css
 * Grid system
*/

.mi-row {
  padding-left: 10px;
  padding-right: 10px;
}
.mi-row:after {
  display: block;
  content: "";
  clear: both;
}

.mi-col-1,
.mi-col-2,
.mi-col-3,
.mi-col-4,
.mi-col-5,
.mi-col-6,
.mi-col-7,
.mi-col-8,
.mi-col-9,
.mi-col-10,
.mi-col-11,
.mi-col-12 {
  float: left;
  padding: 0 5px;
  box-sizing: border-box;
}

.mi-col-1 {
  width: 8.333333%;
}

.mi-col-2 {
  width: 16.666667%;
}

.mi-col-3 {
  width: 25%;
}

.mi-col-4 {
  width: 33.333333%;
}

.mi-col-5 {
  width: 41.666667%;
}

.mi-col-6 {
  width: 50%;
}

.mi-col-7 {
  width: 58.333333%;
}

.mi-col-8 {
  width: 66.666667%;
}

.mi-col-9 {
  width: 75%;
}

.mi-col-10 {
  width: 83.333333%;
}

.mi-col-11 {
  width: 91.666667%;
}

.mi-col-12 {
  width: 100%;
}

.mi-width-6x {
  width: 6em;
}

/*
 * box.css
 *
*/

/* accordion box */
.mi-accordion-title {
  padding: 15px;
  background-color: #fff;
  border-bottom: 1px solid #ebebeb;
  position: relative;
}
.mi-accordion-title:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 17px;
  margin-top: -7px;
  width: 7px;
  height: 7px;
  border: solid #141414;
  border-width: 0 1px 1px 0;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  z-index: 1;
}
.mi-accordion-title.no-set-arrow:after {
  display: none;
}
.mi-accordion-title.light-arrow:after {
  border-color: #a0a0a0;
}
.mi-accordion-contents {
  padding: 15px;
  background-color: #fafafa;
  border-bottom: 1px solid #ebebeb;
  display: none;
}
.mi-accordion-title.no-set-padding,
.mi-accordion-contents.no-set-padding {
  padding: 0;
}
.mi-accordion.topline {
  border-top: 1px solid #ebebeb;
}
.mi-accordion.mi-open {
  position: relative;
  z-index: 50;
}
.mi-accordion.mi-open .mi-accordion-title:after {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  margin-top: 0;
}
.mi-accordion.mi-open .mi-accordion-title ~ hr {
  display: none;
}
.mi-accordion.mi-open .mi-accordion-contents {
  display: block;
}
.mi-accordion.reverse-v .mi-accordion-title {
  background-color: #fafafa;
}
.mi-accordion.reverse-v .mi-accordion-contents {
  background-color: #fff;
}
.mi-accordion.impact-border.mi-open .mi-accordion-title,
.mi-accordion.impact-border.mi-open .mi-accordion-contents {
  border-color: #fac3cc !important;
}

.mi-accordion-hidden {
  height: 0;
  overflow: hidden;
}

.mi-accordion-select {
  position: relative;
}
.mi-accordion-select .mi-accordion-contents {
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  bottom: auto;
  max-height: 200px;
  overflow: auto;
  z-index: 200;
  padding: 5px 0;
}
.mi-select-list {
  padding: 0px 15px;
}

.mi-bread-crumb {
  padding: 7px 15px;
  border-bottom: 1px solid #ebebeb;
}
.mi-bread-crumb-text {
  font-size: 11px;
  color: #a0a0a0;
  display: inline-block;
  line-height: 16px;
}
.mi-bread-crumb-text:after {
  content: "";
  box-sizing: border-box;
  width: 0.35em;
  height: 0.35em;
  border: solid #a0a0a0;
  border-width: 1px 1px 0 0;
  display: inline-block;
  background-color: transparent;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  vertical-align: middle;
  margin: 0 5px;
  position: relative;
  top: -1px;
}
.mi-bread-crumb-text:last-child:after {
  display: none;
}
.mi-display-link {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 3px 2px 3px;
  border-color: #a0a0a0 transparent transparent transparent;
  display: inline-block;
}

.mi-banner-case-1 {
  height: 0;
  padding-bottom: 27.77%;
  position: relative;
  overflow: hidden;
}
.mi-banner-case-2 {
  height: 0;
  padding-bottom: 19.44%;
  position: relative;
  overflow: hidden;
}

.mi-circle {
  border-radius: 50% !important;
}
.mi-box-shadow {
  box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.1);
}
.mi-block-ui-gray {
  background-color: #f0f0f0;
  padding: 10px 15px;
}
.mi-block-ui-white {
  background-color: #fff;
  padding: 15px;
}

.mi-hr-black {
  display: block;
  border: solid #000;
  border-width: 1px 0 0;
  margin: 0 15px;
}
.mi-hr-lightblack {
  display: block;
  border: solid #323232;
  border-width: 1px 0 0;
  margin: 0 15px;
}
.mi-hr-gray {
  display: block;
  border: solid #ebebeb;
  border-width: 1px 0 0;
  margin: 0 15px;
}
.mi-hr-gainsboro {
  display: block;
  border: solid #e1e1e1;
  border-width: 1px 0 0;
  margin: 0 15px;
}
.mi-hr-lightgray {
  display: block;
  border: solid #ddd;
  border-width: 1px 0 0;
  margin: 0 15px;
}
.mi-hr-silver {
  display: block;
  border: solid #c8c8c8;
  border-width: 1px 0 0;
}
.mi-hr-steelgray {
  display: block;
  border: solid #81848a;
  border-width: 1px 0 0;
}
.mi-hr-deep-gray {
  display: block;
  border: solid #646464;
  border-width: 1px 0 0;
}
.mi-hr-pure-gray {
  display: block;
  border: solid #f5f5f5;
  border-width: 1px 0 0;
}
.mi-hr-division {
  display: block;
  border: solid #f0f0f0;
  border-width: 10px 0 0;
  margin: 0;
}
.mi-hr-division.white-gray {
  border-color: #ebebeb;
}
.mi-hr-nomargin {
  margin: 0;
}

/* 패딩 정의 */
.mi-box-ap5 {
  padding: 5px;
}
.mi-box-ap10 {
  padding: 10px;
}
.mi-box-ap15 {
  padding: 15px;
}
.mi-box-ap20 {
  padding: 20px;
}
.mi-box-ap30 {
  padding: 30px;
}
.mi-box-ap40 {
  padding: 40px;
}
.mi-box-ap50 {
  padding: 50px;
}

.mi-box-p5 {
  padding-top: 5px;
  padding-bottom: 5px;
}
.mi-box-p10 {
  padding-top: 10px;
  padding-bottom: 10px;
}
.mi-box-p15 {
  padding-top: 15px;
  padding-bottom: 15px;
}
.mi-box-p20 {
  padding-top: 20px;
  padding-bottom: 20px;
}
.mi-box-p25 {
  padding-top: 25px;
  padding-bottom: 25px;
}
.mi-box-p30 {
  padding-top: 30px;
  padding-bottom: 30px;
}
.mi-box-p40 {
  padding-top: 40px;
  padding-bottom: 40px;
}
.mi-box-p50 {
  padding-top: 50px;
  padding-bottom: 50px;
}

/* 이미지 최대 너비 부모영역 */
.mi-multi-image {
  position: relative;
}
.mi-multi-image:before {
  content: "";
  position: absolute;
  top: -4px;
  left: 2px;
  right: 2px;
  height: 4px;
  background-color: #969696;
}
.mi-multi-image:after {
  content: "";
  position: absolute;
  top: -8px;
  left: 4px;
  right: 4px;
  height: 4px;
  background-color: #c8c8c8;
}

.mi-image-crop {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.mi-image-front-curtain:after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.04);
  content: "";
  z-index: 100;
}

.mi-image-full {
  width: 100%;
}
.mi-image-ratio-full {
  max-width: 100%;
  max-height: 100%;
}
.mi-image-border {
  position: relative;
  display: block;
}
.mi-image-border:after {
  content: "";
  border: 1px solid rgba(0, 0, 0, 0.08);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
}

.mi-abs-full {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

.mi-box-square {
  height: 0 !important;
  padding-bottom: 100%;
  position: relative;
}
.mi-box-rectangle {
  height: 0 !important;
  padding-bottom: 59.375%;
  position: relative;
  overflow: hidden;
}
.mi-box-full {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.mi-box-autoset {
  box-sizing: border-box;
}

/*프로필 이미지 컴포넌트*/
.mi-profile-background {
  height: 0;
  padding-bottom: 38.88%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.mi-bg-mist {
  background-color: rgba(255, 255, 255, 0.8);
}
.mi-bg-black {
  background-color: #000;
}
.mi-bg-lightblack {
  background-color: #1e1e1e;
}
.mi-bg-white {
  background-color: #fff;
}
.mi-bg-primary {
  background-color: #d01f3c;
}
.mi-bg-primary[data-new="true"] {
  background-color: #de3944;
}
.mi-bg-white-smoke {
  background-color: #f0f0f0;
}
.mi-bg-light {
  background-color: #fafafa;
}
.mi-bg-gray {
  background-color: #f5f5f5;
}
.mi-bg-silver {
  background-color: #c8c8c8;
}
.mi-bg-white-gray {
  background-color: #ebebeb;
}
.mi-bg-pure-gray {
  background-color: #e1e1e1;
}
.mi-bg-gray-trnsp {
  background-color: rgba(0, 0, 0, 0.05);
}
.mi-bg-warmgray {
  background-color: #a0a0a0;
}
.mi-bg-beige {
  background-color: #efddd0;
}
.mi-bg-success {
  background-color: #83b858;
}
.mi-bg-warning {
  background-color: #ec7930;
}
.mi-bg-brown {
  background-color: #89674a;
}
.mi-bg-gray-black {
  background-color: #1e1e1e;
}
.mi-bg-gray-half {
  background-color: rgba(200, 200, 200, 0.5);
}
.mi-bg-mid-blue {
  background-color: rgba(43, 97, 204, 0.3);
}
.mi-bg-dl-red {
  background-color: rgba(214, 89, 89, 0.3);
}

.mi-bg-underline {
  position: relative;
  display: inline-block;
  z-index: 1;
}
.mi-bg-underline:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 8px;
  background-color: #fffb41;
  z-index: -1;
}
.mi-bg-underline.pink-v:after {
  background-color: #fac3cc;
}
.mi-bg-coupon {
  background: url("https://static-upload.mustit.co.kr/mobile/background/bg-coupon-m-1558933191.png")
    no-repeat center/contain;
  display: inline-block;
  width: 61px;
  height: 30px;
}
.mi-bg-discount-mark {
  background: url("https://static-upload.mustit.co.kr/mobile/background/bg-discount-mark-m-1558933185.png")
    no-repeat center/contain;
  display: inline-block;
  width: 42px;
  height: 54px;
}
.mi-bg-d-day-mark {
  background: url("https://static-ux.mustit.co.kr/img/m/m_background/bg-dday-m.png")
    no-repeat center/contain;
  display: inline-block;
  width: 50px;
  height: 30px;
}
.mi-bg-d-day-brown {
  background: url("https://static-ux.mustit.co.kr/img/m/m_background/bg-dday-brown-m.png")
    no-repeat center/contain;
  display: inline-block;
  width: 60px;
  height: 30px;
  background-size: 60px;
}
.mi-bg-soldout-approach {
  background: url("https://static-ux.mustit.co.kr/img/m/m_background/bg-soldout-approach-m.png")
    no-repeat center/contain;
  display: inline-block;
  width: 60px;
  height: 30px;
}
.mi-bg-paper {
  background: url("https://static-ux.mustit.co.kr/img/m/m_background/bg-paper.png")
    no-repeat top/cover;
  display: block;
}
.mi-bg-paper-dark {
  background-color: #363636;
  display: block;
}
.mi-bg-link:after {
  background-color: #008ff3;
}

/* badge style */
.mi-badge-sm {
  width: 60px;
  padding: 2px 0;
}

.mi-badge {
  font-size: 11px;
  line-height: 11px;
  padding: 5px;
  display: inline-block;
}
.mi-badge-rounded {
  border-radius: 2px;
}
.mi-badge-gray {
  color: #141414;
  background-color: #f0f0f0;
}
.mi-badge-gray-arrow {
  color: #fff;
  background-color: #a0a0a0;
  font-weight: 700 !important;
  position: relative;
}
.mi-badge-gray-arrow:after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  left: 100%;
  top: 0;
  bottom: 0;
  border-style: solid;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #a0a0a0;
}
.mi-badge-circle-basic {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
}
.mi-badge-circle-md {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
}
.mi-badge-circle-lg {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
}
.mi-badge-circle-success {
  background-color: #83b858;
}
.mi-badge-circle-success:after {
  content: "";
  position: absolute;
  width: 16px;
  height: 32px;
  box-sizing: border-box;
  border: solid #fff;
  border-width: 0 4px 4px 0;
  top: calc(50% - 4px);
  top: -webit-calc(50% - 4px);
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
}
.mi-badge-circle-basic.mi-badge-circle-success:after {
  width: 12px;
  height: 24px;
  border-width: 0 3px 3px 0;
  top: calc(50% - 2px);
  top: -webit-calc(50% - 2px);
}

.mi-badge-rectangle {
  padding: 5px 10px;
  display: inline-block;
}
.mi-badge-round {
  display: inline-block;
  font-size: 1em;
  line-height: 1.5em;
  padding: 0.75em 1.15em;
  border-radius: 2em;
}
.mi-badge-pill {
  font-size: 11px;
  line-height: 11px;
  border-radius: 2em;
  padding: 5px 10px 5px;
  display: inline-block;
}
.mi-badge-round {
  display: inline-block;
  font-size: 1em;
  line-height: 1.5em;
  padding: 0.75em 1.15em;
  border-radius: 2em;
}
.mi-badge-round.v-small {
  padding: 0.5em 0.83em;
}
.mi-badge-circle {
  display: inline-block;
  width: 1.85em;
  height: 1.85em;
  border-radius: 50%;
  line-height: 1.95em;
  text-align: center;
  box-sizing: border-box;
}
.mi-badge-count-alarm {
  display: inline-block;
  padding: 0.95em 0.5em 0.65em;
  border-radius: 0.75em;
  line-height: 0;
  font-size: 1em;
}

.mi-badge-basic {
  background-color: #fff;
  border: 1px solid #e1e1e1;
  color: #a0a0a0;
}
.mi-badge-primary {
  background-color: #d01f3c;
  color: #fff;
}
.mi-badge-orange {
  background-color: #e59734;
  color: #fff;
}
.mi-badge-seafoam {
  background-color: #5bbacf;
  color: #fff;
}
.mi-badge-pink {
  background-color: #ec6386;
  color: #fff;
}
.mi-badge-blue {
  background-color: #47a8f4;
  color: #fff;
}
.mi-badge-warmgray {
  background-color: #a0a0a0;
  color: #fff;
}
.mi-badge-white {
  background-color: #fff;
  color: #141414;
}
.mi-badge-black-trnsp {
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
}

.mi-badge-soldout {
  background: url("https://static-ux.mustit.co.kr/img/m/m_badge/badge-soldout.png")
    no-repeat center/contain;
  display: inline-block;
  width: 160px;
  height: 160px;
}
.mi-badge-soldout-sm {
  background: url("https://static-ux.mustit.co.kr/img/m/m_badge/badge-soldout.png")
    no-repeat center/contain;
  display: inline-block;
  width: 90px;
  height: 90px;
}
.mi-badge-nolist {
  background: url("https://static-ux.mustit.co.kr/img/m/m_badge/badge-list-none-m.png")
    no-repeat center/contain;
  display: inline-block;
  width: 60px;
  height: 60px;
}

.mi-color-chip-b {
  display: inline-block;
  border: 1px solid rgba(0, 0, 0, 0.1);
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.mi-color-chip-w {
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.25);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-sizing: border-box;
}
.mi-color-chip-sm-v {
  width: 10px;
  height: 10px;
}

/* card box (상품리스트 사용) */

.mi-card-product {
  /*margin-bottom: 40px;*/
  margin-bottom: 12px;
}

.mi-card-product.sold_out:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 32px;
  z-index: 10;
}
.mi-card-product.sold_out:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 133px;
  background-image: url("//cdn.mustit.co.kr/lib/img/front/product/img_m_product_sold_out.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50%;
  z-index: 100;
}
.mi-card-product {
  width: 100%;
  position: relative;
}
.mi-card-product-image {
  height: 0;
  padding-bottom: calc(100% - 2px);
  padding-bottom: -webkit-calc(100% - 2px);
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.mi-card-image-spare {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.mi-card-product-info {
  padding: 8px 0;
  display: block;
  height: 85px;
}
.mi-card-product-bnft {
  padding-top: 10px;
  border-top: 1px solid #ebebeb;
  display: block;
  height: 21px;
}
.mi-card-product-bnft:after {
  content: "";
  display: block;
  clear: both;
}
.mi-product-brand {
  font-family: "HelveticaNeueLTStd";
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.mi-product-name {
  font-size: 13px;
  height: 2.6em;
  line-height: 1.3 !important;
  margin-bottom: 10px;
}
.mi-product-price {
  font-family: "HelveticaNeueLTStd" !important;
  font-size: 15px;
  font-weight: 700 !important;
}
.mi-product-sale-before {
  color: #a0a0a0;
  font-family: "HelveticaNeueLTStd" !important;
  font-size: 11px;
  text-decoration: line-through;
  margin-left: 5px;
}
.mi-card-product .mi-product-icon {
  z-index: 100;
}
.mi-card-product .mi-product-icon-coupon {
  top: 0px;
  left: 0px;
  position: absolute;
}
.mi-card-product .mi-product-icon-oversea {
  bottom: 0px;
  left: 0px;
  position: absolute;
}
.mi-card-product .mi-product-icon-surprise {
  bottom: 0px;
  left: 0px;
  position: absolute;
}
.mi-card-product .mi-product-icon-attention {
  float: right;
}
.mi-card-product .mi-icon-expansion {
  bottom: 0;
  right: 0;
  position: absolute;
}
.mi-product-icon-attention.on {
  background-position: -40px 0;
  display: block !important;
}

/* 주문상품카드 */
.mi-card-order-product:first-of-type {
  border-top: 1px solid #e1e1e1;
}
.mi-card-order-product {
  background-color: #fff;
  padding: 0 15px;
  border-bottom: 1px solid #e1e1e1;
}
.mi-card-order-product-name {
  padding: 10px 0;
  border-bottom: 1px solid #ebebeb;
}
.mi-card-order-product-price {
  padding: 10px 0;
}

/* 상품문의카드 */
.mi-card-inquiry {
  padding: 0 15px;
  border-bottom: 1px solid #ebebeb;
}
.mi-card-inquiry-top {
  padding: 10px 0;
  border-bottom: 1px solid #ebebeb;
}
.mi-card-inquiry-body {
  padding: 15px 0;
}
.mi-card-inquiry-talklist {
  margin-bottom: 15px;
}
.mi-card-inquiry-talklist:last-of-type {
  margin-bottom: 0;
}

/* new card box (search) */
.search-item-div {
  padding: 0 4px !important;
}
.mi-card-product-2 {
  width: 100%;
  position: relative;
  margin-bottom: 12px;
}
.icon-pro {
  display: inline-block;
  background-image: url("https://s3.ap-northeast-2.amazonaws.com/mustit-ux/img/m/m_sprites/icon_m_product_sprites_v1.png");
  background-repeat: no-repeat;
  background-size: 145px 29px;
}
.expansion {
  position: absolute;
  right: 10px;
  bottom: 10px;
  background-color: transparent;
  z-index: 998;
}
.icon-pro.icon-expansion {
  width: 27px;
  height: 27px;
  background-position: -117px -1px;
}
.card-contents {
  padding: 10px 0 32px;
}
.card-product-name {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  width: 100%;
}
.brand-ellipsis.ellipsis-2 {
  max-height: 34px;
  height: 34px;
  line-height: 17px;
  color: #555;
}
.pro-badge {
  display: inline-block;
  padding: 0 5px;
  border-radius: 2px;
  font-size: 9px;
  line-height: 16px;
  height: 18px;
  box-sizing: border-box;
  white-space: nowrap;
}
.pro-badge.gray-badge {
  border: 1px solid #dddddd;
  color: #888888;
}
.pro-badge.red-badge {
  border: 1px solid #fcbdc7;
  color: #f52644;
}
.item-div:before {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.03);
  z-index: 1;
}
.icon-wrapper {
  width: 16px;
  height: 16px;
  top: -2px;
}
.hidden-xy {
  overflow-x: hidden;
  overflow-y: hidden;
}

/* 마진 정의 */
.mi-group-t2 {
  margin-top: 2px;
}
.mi-group-t3 {
  margin-top: 3px;
}
.mi-group-t5 {
  margin-top: 5px;
}
.mi-group-t7 {
  margin-top: 7px;
}
.mi-group-t10 {
  margin-top: 10px;
}
.mi-group-t12 {
  margin-top: 12px;
}
.mi-group-t15 {
  margin-top: 15px;
}
.mi-group-t20 {
  margin-top: 20px;
}
.mi-group-t25 {
  margin-top: 25px;
}
.mi-group-t30 {
  margin-top: 30px;
}
.mi-group-t40 {
  margin-top: 40px;
}
.mi-group-t45 {
  margin-top: 44px;
}
.mi-group-t50 {
  margin-top: 50px;
}

.mi-group-b1 {
  margin-bottom: 1px;
}
.mi-group-b5 {
  margin-bottom: 5px;
}
.mi-group-b6 {
  margin-bottom: 6px;
}
.mi-group-b8 {
  margin-bottom: 8px;
}
.mi-group-b10 {
  margin-bottom: 10px;
}
.mi-group-b15 {
  margin-bottom: 15px;
}
.mi-group-b20 {
  margin-bottom: 20px;
}
.mi-group-b25 {
  margin-bottom: 25px;
}
.mi-group-b30 {
  margin-bottom: 30px;
}
.mi-group-b40 {
  margin-bottom: 40px;
}
.mi-group-b45 {
  margin-bottom: 45px;
}
.mi-group-b50 {
  margin-bottom: 50px;
}
.mi-group-b60 {
  margin-bottom: 60px;
}
.mi-group-b70 {
  margin-bottom: 70px;
}

.mi-group-l1 {
  margin-left: 1px;
}
.mi-group-l2 {
  margin-left: 2px;
}
.mi-group-l4 {
  margin-left: 4px;
}
.mi-group-l5 {
  margin-left: 5px;
}
.mi-group-l6 {
  margin-left: 6px;
}
.mi-group-l7 {
  margin-left: 7px;
}
.mi-group-l8 {
  margin-left: 8px;
}
.mi-group-l10 {
  margin-left: 10px;
}
.mi-group-l15 {
  margin-left: 15px;
}
.mi-group-l20 {
  margin-left: 20px;
}
.mi-group-l25 {
  margin-left: 25px;
}
.mi-group-l30 {
  margin-left: 30px;
}

.mi-group-r1 {
  margin-right: 1px;
}
.mi-group-r2 {
  margin-right: 2px;
}
.mi-group-r4 {
  margin-right: 4px;
}
.mi-group-r5 {
  margin-right: 5px;
}
.mi-group-r6 {
  margin-right: 6px;
}
.mi-group-r7 {
  margin-right: 7px;
}
.mi-group-r8 {
  margin-right: 8px;
}
.mi-group-r10 {
  margin-right: 10px;
}
.mi-group-r15 {
  margin-right: 15px;
}
.mi-group-r20 {
  margin-right: 20px;
}
.mi-group-r25 {
  margin-right: 25px;
}
.mi-group-r30 {
  margin-right: 30px;
}

.mi-group-center {
  margin: auto;
}
.mi-inline-marginl-remove {
  margin-left: -4px;
}
.mi-inline-marginb-remove {
  margin-bottom: -4px;
}
.mi-group-minus {
  margin-top: -1px;
}

/* column bar */
.mi-column-bar {
  border: solid #ebebeb;
  border-width: 1px 0;
  display: table;
  width: 100%;
}
.mi-column-item {
  display: table-cell;
  border-right: 1px solid #ebebeb;
}
.mi-column-item:last-child {
  border-right: 0;
}

.mi-column-box {
  border: 1px solid #e3e3e3;
  display: table;
  width: 100%;
  background-color: #fff;
}
.mi-column-box-item {
  display: table-cell;
  border-right: 1px solid #e3e3e3;
  height: 90px;
  vertical-align: middle;
  width: 25%;
}
.mi-column-box-item.auto {
  width: auto;
  height: auto;
}
.mi-column-box-item:last-child {
  border-right: 0;
}

.mi-column-layout {
  display: table;
  width: 100%;
}
.mi-column-layout-item {
  display: table-cell;
  vertical-align: middle;
}

/* 가로스크롤 폼*/
.mi-horizontal-scroll {
  overflow: hidden;
}
.mi-horizontal-scroll-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.mi-horizontal-scroll-wrapper::-webkit-scrollbar {
  display: none;
}

/* border제거 */
.mi-border-del {
  border: 0 !important;
}
.mi-border-del-lr {
  border-left: 0 !important;
  border-right: 0 !important;
}
.mi-padding-del-lr {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.mi-border-del-t {
  border-top: 0 !important;
}
.mi-border-del-l {
  border-left: 0 !important;
}
.mi-border-del-r {
  border-right: 0 !important;
}
.mi-border-del-tb {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

/* border스타일 */
.mi-border-black {
  border: 1px solid #000;
}
.mi-border-whitegray {
  border: 1px solid #ebebeb;
}
.mi-border-gray {
  border: 1px solid #ddd;
}
.mi-border-primary {
  border: 1px solid #d01f3c;
}
.mi-border-pure-gray {
  border: 1px solid #e1e1e1;
}
.mi-border-silver {
  border: 1px solid #c8c8c8;
}
.mi-border-white-gray {
  border: 1px solid #a0a0a0;
}
.mi-border-warning {
  border: 1px solid #ec7930;
}
.mi-border-rgba8 {
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.mi-border-dot {
  border-style: dotted;
}

.mi-border-round-sm {
  border-radius: 2px;
}
.mi-border-round-md {
  border-radius: 3px;
}
.mi-border-round-five {
  border-radius: 5px;
}

/* pagination */
.mi-pagination {
  text-align: center;
}
.mi-page-input {
  display: inline-block;
  width: 50px;
  height: 40px;
  font-family: "HelveticaNeueLTStd";
  vertical-align: top;
}
.mi-total-page {
  line-height: 40px;
  border-bottom: 1px solid #e1e1e1;
  height: 40px;
  box-sizing: border-box;
  width: 50px;
  display: inline-block;
  margin-left: -4px;
  font-family: "HelveticaNeueLTStd";
  vertical-align: top;
}
.mi-pagination .mi-font-gray {
  font-size: 12px;
}

.mi-page-item {
  width: 30px;
  height: 30px;
  display: inline-block;
}
.mi-page-link {
  font-family: "HelveticaNeueLTStd" !important;
  text-align: center;
  padding: 8px 0 7px;
  display: block;
  border: 1px solid transparent;
  font-size: 12px;
  color: #000;
  background-color: #fff;
}
.mi-page-item.on .mi-page-link {
  background-color: #000;
  color: #fff;
}
.mi-page-item:hover .mi-page-link {
  border: 1px solid #ebebeb;
}
.mi-page-item.on:hover .mi-page-link {
  border: 1px solid #000;
}
.mi-page-item.page_dot:hover {
  border: 1px solid transparent;
  cursor: default;
}
.mi-page-item:first-child .mi-page-link,
.mi-page-item:last-child .mi-page-link {
  border: 1px solid #ebebeb;
}

.mi-pagination .mi-btn-square:first-of-type {
  margin-right: 20px;
}
.mi-pagination .mi-btn-square:last-of-type {
  margin-left: 20px;
}

/* bullet */
.mi-bullet {
  text-align: center;
}
.mi-bullet-item {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #e1e1e1;
  border-radius: 50%;
  vertical-align: middle;
  cursor: pointer;
  margin: 0 2px;
}
.mi-bullet-item.on {
  border: 4px solid #d01f3c;
  background-color: #fff;
  width: 6px;
  height: 6px;
}

.mi-bullet-simple-item {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #e1e1e1;
  border-radius: 50%;
  vertical-align: middle;
  cursor: pointer;
  margin: 0 2px;
}
.mi-bullet-simple-item.on {
  background-color: #d01f3c;
}

.swiper-container .mi-bullet-item {
  margin: 0 3px;
}

/* 버튼 기본 */
.mi-btn {
  background-color: transparent;
  border: 0;
  color: #141414;
  outline: none;
  box-sizing: border-box;
  padding-left: 0;
  padding-right: 0;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
}
/*.mi-btn > i {display:block;}*/
/*버튼 끝이둥근*/
.mi-btn-rounded {
  width: 100%;
  height: auto;
  padding-top: 17px;
  padding-bottom: 17px;
  background-color: transparent;
  border: 0;
  color: #141414;
  outline: none;
  border-radius: 5px;
  font-size: 14px;
  font-weight: bold;
  display: inline-block;
  text-align: center;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
}
.mi-btn-size-sm {
  padding: 5px 10px;
  height: 30px;
}
.mi-btn-size-md {
  padding-top: 11px;
  padding-bottom: 11px;
  height: 40px;
  font-size: 12px;
}
.mi-btn-size-lg {
  padding-top: 17px;
  padding-bottom: 17px;
  height: 50px;
}

/* 버튼크기정의 */
.mi-btn-square {
  width: 40px;
  height: 40px;
  background-color: #fafafa;
  border: 1px solid #e1e1e1;
  vertical-align: middle;
  outline: none;
  box-sizing: border-box;
}
.mi-btn-square .mi-icon-arrow {
  position: relative;
  display: block;
  margin: auto;
}
.mi-btn-square-sm {
  width: 20px;
  height: 20px;
  font-size: 12px;
  border-radius: 4px;
  box-sizing: border-box;
  padding: 0;
}
.mi-btn-square-basic {
  width: 40px;
  height: 40px;
  padding: 0;
}
.mi-btn-square-md {
  width: 30px;
  height: 30px;
  padding: 0;
}
.mi-btn-square-lg {
  width: 50px;
  height: 50px;
  padding: 0;
}
.mi-btn-square-xlg {
  width: 60px;
  height: 60px;
  padding: 0;
}

/* 버튼 크기 정의 (em으로 재정의 함.)*/
.mi-btn-ratio-square {
  width: 2em;
  height: 2em;
}

/*추가버튼*/
.mi-btn-add {
  width: 1.07em;
  height: 1.07em;
  vertical-align: middle;
  position: relative;
}
.mi-btn-add:before {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 1px;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
.mi-btn-add:after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0.5em;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

.mi-btn-add.v-dark {
  background-color: #000;
}
.mi-btn-add.v-dark:before,
.mi-btn-add.v-dark:after {
  background-color: #fff;
}

/* 닫기버튼 전용 */
.mi-btn-close {
  width: 1.55em;
  height: 1.55em;
  background-color: rgba(0, 0, 0, 0.7);
  border: 0;
  position: relative;
  padding: 0;
  display: inline-block;
}
.mi-btn-close.mi-close-light {
  background-color: #d7d7d7;
}
.mi-btn-close.mi-close-black {
  background-color: #000;
}
.mi-btn-close.mi-close-basic {
  background-color: transparent;
}
.mi-btn-close:before {
  content: "";
  display: inline-block;
  width: 0.85em;
  height: 1px;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
}
.mi-btn-close:after {
  content: "";
  display: inline-block;
  width: 0.85em;
  height: 1px;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
}

.mi-btn-close.white-primary {
  background-color: #fff;
}
.mi-btn-close.white-primary:before,
.mi-btn-close.white-primary:after {
  background-color: #d01f3c;
}
.mi-btn-close.mi-close-silver:before,
.mi-btn-close.mi-close-silver:after {
  background-color: #c8c8c8;
}
.mi-btn-close.mi-close-basic:before,
.mi-btn-close.mi-close-basic:after {
  background-color: #000;
}

.mi-btn-close.sm-v {
  width: 1em;
  height: 1em;
}
.mi-btn-close.md-w {
  width: 30px;
  height: 30px;
}
.mi-btn-close.lg-w {
  width: 40px;
  height: 40px;
}
.mi-btn-close.md-w:before {
  width: 15px;
}
.mi-btn-close.md-w:after {
  width: 15px;
}
.mi-btn-close.lg-w:before {
  width: 17px;
}
.mi-btn-close.lg-w:after {
  width: 17px;
}

/* new 버튼 */
.mi-btn-new {
  position: relative;
}
.mi-btn-new:before {
  position: absolute;
  content: "N";
  width: 18px;
  height: 18px;
  color: #fff;
  background-color: #d01f3c;
  border-radius: 50%;
  right: -23px;
  top: 3px;
  font-size: 10px;
  text-align: center;
  font-weight: bold;
  line-height: 18px;
}

/* 버튼색상정의 */
.btn-shadow {
  position: relative;
}
.btn-shadow:after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  right: -4px;
  bottom: -4px;
  border-width: 1px;
  border-style: solid;
}
.mi-btn-basic {
  background-color: #fff;
  border: 1px solid #e1e1e1;
  color: #141414;
}
.mi-btn-light {
  background-color: #fafafa;
  color: #141414;
}
.mi-btn-white-smoke {
  background-color: #f0f0f0;
  color: #141414;
}
.mi-btn-primary {
  background-color: #d01f3c;
  color: #fff;
  border: 1px solid #d01f3c;
}
.mi-btn-primary[data-new="true"] {
  background-color: #de3944;
  color: #fff;
  border: 1px solid #de3944;
}
.mi-btn-primary.btn-shadow:after {
  position: absolute;
  border-color: #d01f3c;
}
.mi-btn-outline-primary-light {
  border: 1px solid #fac3cc;
  color: #d01f3c;
  background-color: #fff;
}
.mi-btn-outline-warning {
  border: 1px solid #ffbe95;
  color: #ec7930;
}
.mi-btn-gray {
  background-color: #a0a0a0;
  color: #fff;
}
.mi-btn-outline-gray {
  background-color: #f5f5f5;
  color: #141414;
  border: 1px solid #e1e1e1;
}
.mi-btn-greyish-brown {
  background-color: #464646;
}
.mi-btn-silver {
  background-color: #c8c8c8;
  color: #fff;
}
.mi-btn-whitegray {
  background-color: #ebebeb;
  color: #141414;
}
.mi-btn-black {
  background-color: #000;
  color: #fff;
}
.mi-btn-float {
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15);
  background-color: rgba(255, 255, 255, 0.95);
}

/*
 * form.css 
 * 입력 요소에 대한 스타일 정의
*/

.mi-inputbox {
  position: relative;
  display: block;
  width: 100%;
}
.mi-input {
  border: 1px solid #e1e1e1;
  padding: 15px;
  box-sizing: border-box;
  width: 100%;
  font-size: 12px;
  line-height: 18px;
  color: #141414;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  z-index: 10;
  resize: none;
  border-radius: 0;
}
.mi-inputbox.search,
.mi-input.search {
  padding-right: 60px;
}
.mi-input[disabled="disabled"],
.mi-inputbox[disabled="disabled"] {
  background-color: #f5f5f5;
}
.mi-input::-webkit-scrollbar {
  display: none;
}
.mi-input::-webkit-input-placeholder {
  color: #a0a0a0;
}
.mi-input:disabled {
  background-color: #f5f5f5;
  color: #a0a0a0;
  border: 1px solid #e1e1e1;
  opacity: 1;
}
.mi-input.textarea:disabled {
  background-color: #fafafa;
}

/* input text : 하단 밑줄 버전 */
.mi-input-underline {
  background-color: transparent;
  border-style: solid;
  border-color: transparent transparent #000 transparent;
  border-width: 0 0 1px 0;
  height: 40px;
  color: #141414;
  font-size: 12px;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

/* selectbox customizing */
.mi-select-border {
  border: 1px solid #e1e1e1;
  display: block;
}
.mi-select-wrapper {
  border-color: #e1e1e1;
}
.mi-select {
  box-sizing: border-box;
  width: 100%;
  height: 50px;
  position: relative;
  display: inline-block;
}
.mi-select:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -7px;
  width: 7px;
  height: 7px;
  border: solid #222;
  border-width: 0 1px 1px 0;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  z-index: 10;
}
.mi-select > select {
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  padding: 0 1.25em;
  background: transparent;
  position: relative;
  z-index: 2;
  font-size: 0.92em;
  color: #141414;
}
.mi-select.v-sm > select {
  padding: 0.7em;
}
.mi-select.black-v:after {
  border-color: #fff;
}
.mi-select.black-v > select {
  background-color: #1e1e1e;
  color: #fff;
}
.mi-select-title {
  display: block;
  float: left;
  padding: 16px 0 16px 15px;
  color: #141414;
  font-size: 12px;
  font-weight: bold;
  line-height: 18px;
  box-sizing: border-box;
  width: 100px;
  height: 50px;
}
.mi-select-title ~ .mi-select,
.mi-select-title ~ .mi-inputbox {
  width: calc(100% - 100px);
  width: -webkit-calc(100% - 100px);
}

.mi-input-sm {
  height: 30px;
  padding: 10px;
}
.mi-input-basic {
  height: 30px;
}
.mi-input-md {
  height: 40px;
}
.mi-input-lg {
  height: 50px;
}
.mi-btn-bottom {
  height: 56px;
}

/*
 * input focus effect
*/
.mi-input:focus,
.mi-select-border:focus-within {
  border-color: #fac3cc;
  position: relative;
  z-index: 50;
}

/*
 * input value clear
*/
.mi-input-close-func {
  position: relative;
}
.mi-input-close-func .mi-btn-close {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  z-index: 100;
  display: none;
}
.mi-input-close-func .mi-input:disabled ~ .mi-btn-close,
.mi-input-close-func .mi-input:read-only ~ .mi-btn-close {
  display: none !important;
}

/* radio button customizing */
.mi-radio {
  padding-left: 35px;
  position: relative;
  height: 30px;
  display: inline-block;
}
.mi-radio-check {
  color: #141414;
  font-size: 12px;
  line-height: 30px;
  display: inline-block;
}
.mi-radio-check:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  background-color: #fff;
  border: 1px solid #e1e1e1;
  border-radius: 50%;
  box-sizing: border-box;
}
.mi-radio-check:after {
  position: absolute;
  top: 50%;
  left: 9px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background-color: #d01f3c;
  border-radius: 50%;
}
.mi-radio .mi-hidden:checked + .mi-radio-check:after {
  content: "";
}

/* checkbox customizing */
.mi-checkbox {
  padding-left: 35px;
  position: relative;
  height: 30px;
  display: inline-block;
}
.mi-checkbox-label {
  color: #141414;
  font-size: 12px;
  line-height: 30px;
  display: inline-block;
}
.mi-checkbox-label:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  background-color: #fff;
  border: 1px solid #e1e1e1;
  box-sizing: border-box;
}
.mi-checkbox-label:after {
  content: "";
  position: absolute;
  top: calc(50% - 2px);
  top: -webkit-calc(50% - 2px);
  left: 10px;
  width: 6px;
  height: 14px;
  border: solid #ebebeb;
  border-width: 0 3px 3px 0;
  transform: translateY(-50%) rotate(45deg);
  -webkit-transform: translateY(-50%) rotate(45deg);
}
.mi-checkbox .mi-hidden:checked + .mi-checkbox-label:after {
  border-color: #d01f3c;
}

.mi-checkbox-circle {
  padding-left: 35px;
  position: relative;
  height: 30px;
  display: inline-block;
}
.mi-checkbox-circle-label {
  color: #141414;
  font-size: 12px;
  line-height: 30px;
  display: inline-block;
}
.mi-checkbox-circle-label:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  background-color: #fff;
  border: 1px solid #e1e1e1;
  box-sizing: border-box;
  border-radius: 50%;
}
.mi-checkbox-circle-label:after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  top: -webkit-calc(50% - 1px);
  left: 11px;
  width: 5px;
  height: 11px;
  border: solid #ebebeb;
  border-width: 0 3px 3px 0;
  transform: translateY(-50%) rotate(45deg);
  -webkit-transform: translateY(-50%) rotate(45deg);
}
.mi-checkbox-circle .mi-hidden:checked + .mi-checkbox-circle-label:before {
  background-color: #d01f3c;
  border-color: #d01f3c;
}
.mi-checkbox-circle .mi-hidden:checked + .mi-checkbox-circle-label:after {
  border-color: #fefefe;
}
.mi-checkbox-circle .mi-hidden:disabled + .mi-checkbox-circle-label {
  opacity: 0.5;
}
/* count form */
.mi-count:after {
  content: "";
  display: block;
  clear: both;
}
.mi-count > * {
  float: left;
}
.mi-count-input {
  border-width: 1px 0;
  width: 50px;
}

.mi-choice-form {
  display: inline-block;
}
.mi-choice-form .mi-choice-label {
  color: #646464;
  display: block;
}
.mi-choice-form[data-style="color"] .mi-hidden:checked + .mi-choice-label {
  color: #d01f3c;
}

/*
 * 아이콘 이미지 및 퍼블리싱 적용
 *
*/

/* 상품 type 아이콘 */
.mi-product-icon {
  background: url("https://static-ux.mustit.co.kr/img/m/m_sprites/sprite_product_attribute_m.png")
    no-repeat;
  background-size: 100px 118px;
  display: inline-block;
  vertical-align: top;
}
.mi-product-icon-coupon {
  width: 55px;
  height: 18px;
  background-position: 0 -100px;
}
.mi-product-icon-oversea {
  width: 25px;
  height: 25px;
  background-position: 0 -30px;
}
.mi-product-icon-surprise {
  width: 25px;
  height: 25px;
  background-position: -30px -30px;
}
.mi-product-icon-attention {
  width: 18px;
  height: 17px;
  background-position: -60px -30px;
}
.mi-product-icon-attention.on {
  background-position: -80px -30px;
}

.mi-button-icon-surprise {
  width: 15px;
  height: 13px;
  background-position: 0px -60px;
}
.mi-button-icon-surprise.on {
  background-position: -30px -60px;
}

.mi-button-icon-col-2 {
  width: 18px;
  height: 18px;
  background-position: -60px -60px;
}
.mi-button-icon-col-2.on {
  background-position: -80px -60px;
}
.mi-button-icon-col-3 {
  width: 18px;
  height: 18px;
  background-position: 0px -80px;
}
.mi-button-icon-col-3.on {
  background-position: -30px -80px;
}

/* 화살표 아이콘 */
.mi-icon-arrow {
  box-sizing: border-box;
  width: 0.55em;
  height: 0.55em;
  border: solid #000;
  border-width: 1px 1px 0 0;
  display: inline-block;
  background-color: transparent;
}
.mi-icon-arrow.scale-down {
  width: 6px;
  height: 6px;
}
.mi-icon-arrow.scale-up {
  width: 8px;
  height: 8px;
}
.mi-icon-arrow.scale-down {
  width: 6px;
  height: 6px;
}
.mi-arrow-w2 {
  border-width: 2px 2px 0 0;
}

.mi-arrow-blue {
  border-color: #008ff3;
  width: 6px;
  height: 6px;
}
.mi-arrow-bk-blue {
  border-color: #4d99d3;
}
.mi-arrow-light {
  border-color: #a0a0a0;
}
.mi-arrow-white {
  border-color: #fff;
  width: 8px;
  height: 8px;
}
.mi-arrow-black {
  border-color: #000;
}
.mi-arrow-dark-gray,
.mi-arrow-brown-gray {
  border-color: #646464;
}
.mi-arrow-silver {
  border-color: #c8c8c8;
}

.mi-icon-arrow.mi-arrow-top {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  position: relative;
  bottom: -1px;
}
.mi-icon-arrow.mi-arrow-left {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  position: relative;
  left: 2px;
}
.mi-icon-arrow.mi-arrow-right {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  position: relative;
  right: 2px;
  top: -1px;
}
.mi-icon-arrow.mi-arrow-bottom {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  position: relative;
  top: -3px;
}

.mi-icon-etc {
  background: url("https://static-ux.mustit.co.kr/img/m/m_sprites/icon_m_etc_sprites.png")
    no-repeat;
  background-size: 200px 200px;
  display: inline-block;
}
.mi-icon-good {
  width: 14px;
  height: 14px;
  background-position: 0 0;
}
.mi-icon-good.on {
  background-position: -20px 0;
}
.mi-icon-star {
  width: 23px;
  height: 22px;
  background-position: -40px 0;
}
.mi-icon-star.on {
  background-position: -70px 0;
}
.mi-icon-photo {
  width: 20px;
  height: 18px;
  background-position: -100px 0;
}
.mi-icon-photo.on {
  background-position: -130px 0;
}
.mi-icon-search {
  width: 20px;
  height: 20px;
  background-position: 0 -30px;
}
.mi-icon-talk {
  width: 14px;
  height: 14px;
  background-position: -20px -30px;
}
.mi-icon-talk-strong {
  width: 14px;
  height: 14px;
  background-position: -20px -50px;
}
.mi-icon-camera {
  width: 29px;
  height: 25px;
  background-position: -40px -30px;
}
.mi-icon-big-view {
  width: 16px;
  height: 16px;
  background-position: -70px -30px;
}
.mi-icon-report {
  width: 12px;
  height: 14px;
  background-position: -90px -30px;
}
.mi-icon-heart-outline {
  width: 22px;
  height: 20px;
  background-position: -110px -30px;
}
.mi-icon-heart-sel {
  width: 22px;
  height: 20px;
  background-position: -140px -30px;
}
.mi-icon-heart-unsel {
  width: 24px;
  height: 24px;
  background-position: 0 -176px;
}
.mi-icon-heart-mysel {
  width: 24px;
  height: 24px;
  background-position: -139px -28px;
}
.mi-icon-heart-dim {
  width: 22px;
  height: 20px;
  background-size: 157.14px;
  background-position: -86.42px -47.14px;
}
.mi-icon-heart-dim-lg {
  width: 28px;
  height: 26px;
  background-position: -110px -60px;
}
.mi-icon-heart-sel-lg {
  width: 28px;
  height: 26px;
  background-position: -140px -60px;
}
.mi-icon-share {
  width: 20px;
  height: 20px;
  background-position: -170px -30px;
}
.mi-icon-share-gray {
  width: 20px;
  height: 18px;
  background-position: -170px -60px;
}
.mi-icon-expansion {
  width: 25px;
  height: 25px;
  background-position: 0 -70px;
}
.mi-icon-lock {
  width: 16px;
  height: 20px;
  background-position: -40px -60px;
}
.mi-icon-unlock {
  width: 16px;
  height: 20px;
  background-position: -60px -60px;
}
.mi-icon-dot {
  width: 16px;
  height: 4px;
  background-position: -160px -100px;
}
.mi-icon-delivery {
  width: 30px;
  height: 30px;
  background-position: -40px -100px;
}
.mi-icon-oversea {
  width: 30px;
  height: 30px;
  background-position: -80px -100px;
}
.mi-icon-complete {
  width: 30px;
  height: 30px;
  background-position: -120px -100px;
}
.mi-icon-download {
  width: 13px;
  height: 12px;
  background-position: -80px -60px;
}
.mi-icon-off {
  width: 54px;
  height: 22px;
  background-position: 0 -140px;
}
.mi-icon-check {
  display: inline-block;
  width: 5px;
  height: 12px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
.mi-icon-question {
  width: 24px;
  height: 24px;
  background-position: -24px -176px;
}
.mi-icon-search-local-gray {
  width: 24px;
  height: 24px;
  background-position: -48px -176px;
}
.mi-icon-speech-bubble {
  width: 24px;
  height: 24px;
  background-position: -72px -176px;
}
.mi-icon-line-arrow {
  display: inline-block;
  width: 1.5em;
  height: 1px;
  background-color: #000;
  position: relative;
}
.mi-icon-line-arrow.mi-arrow-right:after {
  content: "";
  position: absolute;
  top: -2px;
  right: 0;
  width: 4px;
  height: 4px;
  background-color: transparent;
  border: solid #000;
  border-width: 1px 1px 0 0;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
}
.mi-icon-line-arrow.white-v {
  background-color: #fff;
}
.mi-icon-line-arrow.white-v:after {
  border-color: #fff;
}

/* common icons */
.mi-icon-common {
  background: url("https://static-ux.mustit.co.kr/img/m/m_sprites/icon_m_common_sprites_v2.png")
    no-repeat;
  background-size: 200px 200px;
  display: inline-block;
}
.mi-icon-menu {
  width: 28px;
  height: 28px;
  background-position: 0 0;
}
.mi-icon-member {
  width: 28px;
  height: 28px;
  background-position: -28px 0;
}
.mi-icon-basket {
  width: 28px;
  height: 28px;
  background-position: -57px 0;
}
.mi-icon-up {
  width: 24px;
  height: 24px;
  background-position: -86px 0;
}
.mi-icon-refresh {
  width: 24px;
  height: 24px;
  background-position: -110px 0;
}
.mi-icon-search-light {
  width: 20px;
  height: 20px;
  background-position: -134px 0;
}
.mi-icon-search-local {
  width: 28px;
  height: 28px;
  background-position: -86px -29px;
}
.mi-icon-home {
  width: 28px;
  height: 28px;
  background-position: -154px 0;
}
.mi-icon-back {
  width: 28px;
  height: 28px;
  background-position: 1px -29px;
}
.mi-icon-setting {
  width: 28px;
  height: 28px;
  background-position: -114px -29px;
}
.mi-icon-exit {
  width: 28px;
  height: 28px;
  background-position: -142px -29px;
}
.mi-icon-search-header {
  width: 28px;
  height: 28px;
  background-position: -170px -29px;
}

.mi-icon-listview-2 {
  width: 16px;
  height: 16px;
  background-position: -60px -140px;
}
.mi-icon-listview-3 {
  width: 16px;
  height: 16px;
  background-position: -100px -140px;
}
.mi-icon-filter {
  width: 16px;
  height: 16px;
  background-position: -80px -140px;
}
.mi-icon-refresh-gray {
  width: 15px;
  height: 15px;
  background-position: -100px -176px;
}
.mi-bi {
  background: url("https://static-ux.mustit.co.kr/img/m/m_bi/bi_mustit_header.png")
    no-repeat;
  background-size: 88px 16px;
  display: inline-block;
  background-position: 0 2px;
  width: 88px;
  height: 20px;
}
.mi-icon-menu-white {
  width: 30px;
  height: 30px;
  background-position: -5px -62px;
}
.mi-icon-member-white {
  width: 30px;
  height: 30px;
  background-position: -45px -62px;
}
.mi-icon-home-white {
  width: 30px;
  height: 30px;
  background-position: -85px -62px;
}
.mi-icon-heart-white {
  width: 30px;
  height: 30px;
  background-position: -125px -62px;
}
.mi-icon-eyes-white {
  width: 30px;
  height: 30px;
  background-position: -5px -102px;
}

.mi-icon-facebook {
  width: 30px;
  height: 30px;
  background-position: -1px -138px;
}
.mi-icon-instagram {
  width: 30px;
  height: 30px;
  background-position: -41px -138px;
}
.mi-icon-youtube {
  width: 30px;
  height: 30px;
  background-position: -1px -170px;
}
.mi-icon-kakaotalk {
  width: 30px;
  height: 30px;
  background-position: -81px -138px;
}
.mi-icon-naver {
  width: 30px;
  height: 30px;
  background-position: -121px -138px;
}
.mi-icon-person {
  width: 26px;
  height: 26px;
  background-position: -160px -137px;
}

.mi-icon-minishop {
  width: 14px;
  height: 20px;
  background-position: -28px -27px;
}
.mi-icon-hot {
  width: 11px;
  height: 16px;
  background-position: -57px -31px;
}

.mi-down-scale {
  transform: scale(0.66);
  -webkit-transform: scale(0.66);
}
.mi-trans-origin-left {
  transform-origin: left center;
}
.mi-trans-origin-right {
  transform-origin: right center;
}

.mi-icon-starswitch {
  background: url("https://static-ux.mustit.co.kr/img/m/m_sprites/sprite_icon_star.png")
    no-repeat;
  background-size: 72px 35px;
  display: inline-block;
  width: 36px;
  height: 35px;
  background-position: 0 0;
}

.mi-icon-starswitch.on {
  background-position: -36px 0;
}

/*
 * 텍스트 디자인 Component
 * hgroup , 문장 , 들여쓰기 등등 처리
 *
*/

/* 타이틀 (h1~6) */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
  color: inherit;
}
.h0 {
  font-size: 28px;
  line-height: 34px;
}
h1,
.h1 {
  font-size: 22px !important;
}
h2,
.h2 {
  font-size: 20px !important;
}
h3,
.h3 {
  font-size: 18px !important;
  line-height: 20px;
}
h4,
.h4 {
  font-size: 16px !important;
  line-height: 1.625em;
}
h5,
.h5 {
  font-size: 14px !important;
  line-height: 20px;
}
h6,
.h6 {
  font-size: 12px !important;
  line-height: 20px;
}
.mi-font-basic-minus {
  font-size: 11px;
}
.mi-font-basic {
  font-size: 13px;
  line-height: 18px;
}
.mi-font-basic-plus {
  font-size: 15px;
  line-height: 22px;
}

.mi-font-12 {
  font-size: 12px;
}
.mi-font-17 {
  font-size: 17px;
}
.mi-xsmall {
  font-size: 10px;
}
.mi-small {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}
.mi-medium {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4em;
}
.mi-large {
  font-size: 16px;
  font-weight: 400;
}
.mi-xlarge {
  font-size: 18px;
}
.mi-2xlarge {
  font-size: 24px;
}
.mi-3xlarge {
  font-size: 30px;
  line-height: 36px;
}
.mi-strong {
  font-size: 34px;
}

.mi-vertical-boundary:after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 10px;
  background-color: #ebebeb;
  margin: 0 5px;
}
.mi-vertical-boundary.extend-interval:after {
  margin: 0 10px;
}
.mi-vertical-boundary.line-black:after {
  background-color: #000;
}
.mi-vertical-boundary.line-gray:after {
  background-color: #e1e1e1;
}
.mi-vertical-boundary:last-of-type:after {
  display: none;
}
.mi-vertical-boundary-lg {
  position: relative;
}
.mi-vertical-boundary-lg:before {
  position: absolute;
  content: "";
  width: 1px;
  height: 18px;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background-color: #e1e1e1;
  margin: 0 2px 0 6px;
}
.mi-vertical-boundary-lg.line-gray:before {
  background-color: #646464;
}
.mi-vertical-boundary-lg:last-child:before {
  display: none;
}

.mi-dot-beetween:after {
  content: "";
  display: block;
  width: 0.33em;
  height: 0.33em;
  border-radius: 50%;
  margin: 0.66em auto;
}
.mi-dot-beetween:last-child:after {
  display: none;
}

.mi-light {
  font-weight: 300;
}
.mi-normal {
  font-weight: 400;
}
.mi-fw-medium {
  font-weight: 500;
}
.mi-bold {
  font-weight: 700;
}

/* font color 정의 */
.mi-font-darkblack {
  color: #000;
}
.mi-font-white {
  color: #fff;
}
.mi-font-black {
  color: #141414;
}
.mi-font-gray {
  color: #a0a0a0;
}
.mi-font-gray6 {
  color: #666;
}
.mi-font-gray9 {
  color: #999;
}
.mi-font-dimgray {
  color: #505050;
}
.mi-font-warning {
  color: #ec7930;
}
.mi-font-complete {
  color: #83b858;
}
.mi-font-link {
  color: #008ff3;
  text-decoration: underline;
}
.mi-font-link-noline {
  color: #008ff3;
}
.mi-font-silver {
  color: #c8c8c8;
}
.mi-font-greyish-brown {
  color: #614242;
}
.mi-font-brown-gray {
  color: #646464;
}
.mi-font-bk-blue {
  color: #4d99d3;
}
.mi-font-primary {
  color: #d01f3c;
}
.mi-font-brown {
  color: #89674a;
}
.mi-font-link:hover {
  color: #008ff3;
  text-decoration: underline;
}
.mi-text-nowrap {
  white-space: nowrap;
}
.mi-alt-text {
  -ms-user-select: none;
  -moz-user-select: -moz-none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  user-select: none;
  position: relative;
  z-index: -1;
}
.mi-font-white-gray {
  color: #ebebeb;
}
.mi-font-mid-blue {
  color: #2b61cc;
}
.mi-font-dl-red {
  color: #d65959;
}

/* text 정렬 */
.mi-text-left {
  text-align: left;
}
.mi-text-center {
  text-align: center;
}
.mi-text-right {
  text-align: right;
}

.mi-valign-top {
  vertical-align: top;
}
.mi-valign-middle {
  vertical-align: middle;
}
.mi-valign-bottom {
  vertical-align: bottom;
}

/* text line */
.mi-text-line {
  padding-left: 10px;
  position: relative;
}
.mi-text-line:before {
  position: absolute;
  color: inherit;
  top: 1px;
  left: 0;
}
.mi-text-line.hyphen:before {
  content: "-";
}
.mi-text-line.star:before {
  content: "*";
}
.mi-text-line.dot:before {
  content: "•";
}
.mi-text-interval-sm {
  line-height: 14px;
}
.mi-text-interval-basic {
  line-height: 20px;
}
.mi-text-interval-md {
  line-height: 25px;
}
.mi-text-interval-lg {
  line-height: 30px;
}
.mi-text-interval-xlg {
  line-height: 40px;
}

.mi-text-interval-oe {
  line-height: 18px;
}
.mi-text-interval-tt {
  line-height: 22px;
}
.mi-text-interval-tf {
  line-height: 24px;
}
.mi-text-interval-llg {
  line-height: 34px;
}

.mi-text-link {
  text-decoration: underline;
}
.mi-text-link:hover {
  text-decoration: underline;
}

.mi-inherit {
  color: inherit;
  font: inherit;
}

/* 문장 n줄 ...처리 */
.mi-ellipsis {
  overflow: hidden;
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mi-ellipsis-2 {
  max-height: 3em;
  line-height: 1.6;
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: keep-all;
}
.mi-ellipsis-2.fix {
  height: 3em;
}
.mi-ellipsis-3 {
  max-height: 4.5em;
  line-height: 1.6;
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: keep-all;
}
.mi-ellipsis-3.fix {
  height: 4.5em;
}

/* HelveticaNeueLTStd 폰트*/
.mi-roboto,
.mi-helvetica {
  font-family: "HelveticaNeueLTStd" !important;
}
.mi-sfpro {
  font-family: "SFPro" !important;
}

/* table style */
.mi-table {
  width: 100%;
  table-layout: fixed;
}
.mi-table-nodata {
  padding: 30px 0;
}
.mi-table-basic {
  border-top: 1px solid #000;
}
.mi-table-basic th {
  text-align: left;
  padding: 16px 10px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #ebebeb;
  font-size: 12px;
  line-height: 20px;
  font-weight: bold;
  color: #141414;
}
.mi-table-basic td {
  padding: 16px 10px;
  text-align: left;
  border-bottom: 1px solid #ebebeb;
  font-size: 12px;
  line-height: 18px;
  color: #141414;
  border-right: 1px solid #ebebeb;
}
.mi-table-basic td:last-child {
  border-right: 0;
}

.mi-table-basic.center th,
.mi-table-basic.center td {
  text-align: center;
}
/* 기존 table 스타일을 덮기위한 코드 */
.mi-table-secondary {
  border: solid #999;
  border-width: 1px 0;
}
.mi-table-secondary th {
  text-align: left;
  padding: 10px;
  background-color: #f8f8f8;
  border-top: 1px solid #e3e3e3 !important;
  font-size: 12px;
  line-height: 18px;
  font-weight: bold;
  color: #141414;
  border-bottom: 0 !important;
}
.mi-table-secondary td {
  padding: 10px;
  text-align: left;
  border-top: 1px solid #e3e3e3 !important;
  font-size: 12px;
  line-height: 20px;
  color: #141414;
  border-bottom: 0 !important;
}
.mi-table-secondary tr:first-child th,
.mi-table-secondary tr:first-child td {
  border-top: 0 !important;
}

/*
 * tab design
 *
*/

/* base tab */
.mi-tab:after {
  content: "";
  display: block;
  clear: both;
}
.mi-tab .mi-tab-item {
  float: left;
  box-sizing: border-box;
  position: relative;
}

.mi-tab.select-bold .mi-hidden:checked + .mi-tab-link {
  font-weight: bold;
}

.mi-tab[data-tab-cnt="2"] .mi-tab-item {
  width: 50%;
}
.mi-tab[data-tab-cnt="3"] .mi-tab-item {
  width: 33.3333%;
}
.mi-tab[data-tab-cnt="4"] .mi-tab-item {
  width: 25%;
}
.mi-tab[data-tab-cnt="5"] .mi-tab-item {
  width: 20%;
}
.mi-tab[data-tab-cnt="6"] .mi-tab-item {
  width: 16.6666%;
}
.mi-tab[data-tab-cnt="7"] .mi-tab-item {
  width: 14.28%;
}
.mi-tab[data-tab-cnt="8"] .mi-tab-item {
  width: 12.5%;
}
.mi-tab[data-tab-cnt="10"] .mi-tab-item {
  width: 10%;
}

.mi-tab-basic {
  border: solid #ebebeb;
  border-width: 1px 1px 0 1px;
  background-color: #f5f5f5;
}
.mi-tab-basic .mi-tab-item {
  border-right: 1px solid #ebebeb;
  height: 50px;
}
.mi-tab-basic .mi-tab-item:last-child {
  border-right: 0;
}
.mi-tab-basic .mi-tab-link {
  display: block;
  text-align: center;
  height: 50px;
  box-sizing: border-box;
  font-size: 13px;
  color: #a0a0a0;
  border-bottom: 1px solid #ebebeb;
  padding: 16px 0;
}
.mi-tab-basic .mi-hidden:checked + .mi-tab-link {
  color: #141414;
  font-weight: bold;
  background-color: #fff;
}

.mi-tab-line {
  border-bottom: 1px solid #ebebeb;
}
.mi-tab-line .mi-tab-link {
  display: block;
  text-align: center;
  box-sizing: border-box;
  font-size: 13px;
  line-height: 1.5em;
  color: #a0a0a0;
  padding: 2em 0;
}
.mi-tab-line .mi-tab-link * {
  color: #a0a0a0;
}
.mi-tab-line.v-small .mi-tab-link {
  padding: 1.25em 0;
}
.mi-tab-line .mi-hidden:checked + .mi-tab-link {
  color: #141414;
  font-weight: bold;
  border-bottom: 1px solid #000;
}
.mi-tab-line .mi-hidden:checked + .mi-tab-link * {
  color: #141414;
  font-weight: bold;
}

.mi-tab-primary .mi-tab-item {
  height: 40px;
}
.mi-tab-primary .mi-tab-link {
  display: block;
  text-align: center;
  height: 40px;
  box-sizing: border-box;
  font-size: 12px;
  line-height: 18px;
  color: #a0a0a0;
  padding: 11px 0;
  position: relative;
  border: solid #e1e1e1;
  border-width: 1px 0 0 1px;
  background-color: #f5f5f5;
}
.mi-tab-primary.white-default .mi-tab-link {
  background-color: #fff;
}
.mi-tab-primary .mi-tab-link:before {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  right: -1px;
  width: 1px;
  background-color: #e1e1e1;
}
.mi-tab-primary .mi-tab-link:after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: -1px;
  right: -1px;
  height: 1px;
  background-color: #e1e1e1;
}
.mi-tab-primary .mi-hidden:checked + .mi-tab-link {
  border-color: #fac3cc;
  color: #d01f3c;
  background-color: #fff;
}
.mi-tab-primary .mi-hidden:checked + .mi-tab-link * {
  color: #d01f3c;
}
.mi-tab-primary .mi-hidden:checked + .mi-tab-link:before {
  background-color: #fac3cc;
  z-index: 5;
}
.mi-tab-primary .mi-hidden:checked + .mi-tab-link:after {
  background-color: #fac3cc;
  z-index: 5;
}
.mi-tab-primary.plus-h .mi-tab-item {
  height: 50px;
}
.mi-tab-primary.plus-h .mi-tab-link {
  height: 50px;
  padding: 5px 0;
}

.mi-tab-existing {
  border-style: solid;
  border-width: 0 0 1px;
  border-color: #000 transparent #222;
}
.mi-tab-existing .mi-tab-item {
  height: 50px;
}
.mi-tab-existing .mi-tab-link {
  padding: 15px 0;
  text-align: center;
  color: #a0a0a0;
  font-size: 15px;
  line-height: 20px;
  display: block;
}
.mi-tab-existing .mi-hidden:checked + .mi-tab-link {
  font-weight: bold !important;
  color: #141414;
}

.mi-tab-list .mi-tab-item {
  height: 30px;
}
.mi-tab-list .mi-tab-link {
  display: block;
  padding: 0 10px;
  font-size: 12px;
  line-height: 30px;
}
.mi-tab-list .mi-hidden:checked + .mi-tab-link {
  background-color: #fff;
  color: #d01f3c;
}

.mi-tab-category .mi-tab-item {
  width: 70px;
  height: 70px;
  box-sizing: border-box;
  border: 1px solid #464646;
  position: relative;
  border-radius: 50%;
}
.mi-tab-category .mi-tab-item.active {
  border: 2px solid #d01f3c;
}
.mi-tab-category .mi-tab-category-image {
  width: 56px;
  height: 56px;
  border-radius: 50%;
}

.mi-tab-btn-theme .mi-tab-item {
  padding-left: 3px;
  padding-right: 3px;
}

.mi-tab-btn-theme .mi-tab-link {
  display: block;
  border: 1px solid #ddd;
  color: #888;
  text-align: center;
}

.mi-tab-btn-theme[data-theme="black"] .mi-hidden:checked + .mi-tab-link {
  border: 1px solid #222;
  color: #222;
  font-weight: bold;
}

.mi-tab-btn-theme[data-theme="primary"] .mi-hidden:checked + .mi-tab-link {
  border: 1px solid #f52644;
  color: #f52644;
  font-weight: bold;
}

/*.mi-keypad-theme .mi-tab-item {height:0;padding-bottom:100%;position:relative;}*/
.mi-keypad-theme .mi-tab-item {
  height: auto;
}
.mi-keypad-theme .mi-tab-item.extend {
  width: 20%;
}
.mi-keypad-theme .mi-tab-item.extend .mi-box-square {
  padding-bottom: 50%;
}
.mi-keypad-theme .mi-tab-link {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: auto;
}

/* speech bubble */
.mi-speech-bubble {
  border-radius: 5px;
  padding: 10px 15px;
  position: relative;
  font-size: 12px;
  line-height: 20px;
  display: inline-block;
}
.mi-speech-bubble.big-bubble {
  display: block;
  padding: 15px;
}
.mi-speech-bubble.small-bubble {
  padding: 3px 10px;
}
.mi-speech-bubble:after {
  content: "";
  position: absolute;
  border-style: solid;
  border-width: 8px;
}

.mi-speech-bubble.mi-rotate-v:after {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.mi-speech-bubble.mi-rotate-v[data-placement="top"]:after {
  bottom: -12px;
  left: 50%;
  transform: rotate(45deg) translateX(-50%);
  -webkit-transform: rotate(45deg) translateX(-50%);
}
.mi-speech-bubble[data-placement="bottom"]:after {
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}
.mi-speech-bubble[data-placement="right"]:after {
  right: -14px;
  top: 5px;
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  color: #d01f3c;
}

.mi-speech-bubble-primary {
  background-color: #d01f3c;
  color: #fff;
}
.mi-speech-bubble-primary[data-placement="top"]:after {
  border-color: transparent #d01f3c transparent transparent;
}
.mi-speech-bubble-primary[data-placement="right"]:after {
  border-color: transparent #d01f3c transparent transparent;
}

.mi-speech-bubble-gray {
  background-color: #f0f0f0;
  color: #141414;
}
.mi-speech-bubble-gray[data-placement="bottom"]:after {
  border-color: transparent transparent #f0f0f0 transparent;
}

/* absolute bubble */
.mi-speech-bubble.abs-position[data-placement="top"] {
  position: absolute;
  bottom: 150%;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}

/* progress bar */
.mi-progress {
  background-color: #e1e1e1;
  height: 2px;
}
.mi-progress-bar {
  width: auto;
  height: 2px;
  background-color: #d01f3c;
}

/* position */
.mi-fixed-full {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.mi-fixed-center {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  z-index: 99999;
}
.mi-fixed-top {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
}
.mi-fixed-bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
}
.mi-fixed-right {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
}
.mi-relative {
  position: relative;
}
.mi-abs-top-left {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
}
.mi-abs-top-left-5 {
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 100;
}
.mi-abs-top-left-10 {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 100;
}
.mi-abs-top-left-20 {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 100;
}
.mi-abs-top-right {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 100;
}
.mi-abs-top-right-5 {
  position: absolute;
  top: 5px;
  right: 5px;
  bottom: 5px;
  z-index: 100;
}
.mi-abs-top-right-10 {
  position: absolute;
  top: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 100;
}
.mi-abs-top-right-15 {
  position: absolute;
  top: 15px;
  right: 15px;
  bottom: 15px;
  z-index: 100;
}
.mi-abs-bottom-left {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 100;
}
.mi-abs-bottom-left-5 {
  position: absolute;
  bottom: 5px;
  left: 5px;
  z-index: 100;
}
.mi-abs-bottom-left-10 {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 100;
}
.mi-abs-bottom-left-15 {
  position: absolute;
  bottom: 15px;
  left: 15px;
  z-index: 100;
}
.mi-abs-bottom-left-20 {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 100;
}
.mi-abs-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
.mi-abs-right-center {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
.mi-abs-bottom {
  position: absolute;
  top: auto;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
}
.mi-vertical-center {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
.mi-horizontal-center {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}

/* modal popup layout */
#Modal,
.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 9990;
  display: none;
}
#ModalTransBg {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 9990;
  display: none;
}
.mi-modal-popup-transparent {
  position: fixed;
  left: 20px;
  right: 20px;
  overflow: hidden;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  z-index: 99999;
  max-height: calc(100% - 60px);
  max-height: -webkit-calc(100% - 60px);
}
.mi-modal-popup {
  position: fixed;
  left: 20px;
  right: 20px;
  background-color: #fff;
  border-radius: 5px;
  overflow: hidden;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  z-index: 99999;
  max-height: calc(100% - 60px);
  max-height: -webkit-calc(100% - 60px);
}
.mi-modal-popup-bg {
  background-color: #fff;
  border-radius: 5px;
  overflow: hidden;
}
.mi-modal-popup-bg p {
  line-height: 1.5;
}
.mi-modal-body {
  padding: 20px;
}
.mi-modal-title {
  text-align: center;
  font-size: 18px;
  color: #141414;
  line-height: 24px;
  font-weight: bold;
}
.mi-modal-boundary {
  width: 10px;
  border: solid #d01f3c;
  border-width: 1px 0 0;
  margin: 10px auto;
}
.mi-modal-contents {
  font-size: 12px;
  line-height: 18px;
  color: #141414;
}
/* .mi-modal-contents * {font-family:'Noto Sans' !important;} */
.mi-modal-bottom {
  padding: 16px 0;
  background-color: #f0f0f0;
  text-align: center;
  font-size: 13px;
  line-height: 18px;
  color: #141414;
}

.mi-modal-coverall-title {
  padding: 13px;
  text-align: center;
  border-bottom: 1px solid #000;
  position: relative;
}
.mi-modal-coverall-title-text {
  font-size: 16px;
  color: #141414;
  font-weight: bold;
}
.mi-modal-coverall-close {
  position: absolute;
  top: 23px;
  right: 23px;
  appearance: none;
  -webkit-appearance: none;
}
.mi-modal-coverall-close:before {
  content: "";
  display: inline-block;
  width: 19px;
  height: 1px;
  background-color: #000;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
}
.mi-modal-coverall-close:after {
  content: "";
  display: inline-block;
  width: 19px;
  height: 1px;
  background-color: #000;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
}
.mi-modal-coverall-contents {
  padding: 0 0 20px;
  position: absolute;
  top: 46px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
}

.mi-tab-active:active {
  background-color: rgba(0, 0, 0, 0.08);
}

/* 카드사 로고 */
.mi-card-image-group {
  vertical-align: top;
  display: inline-block;
  background-image: url("https://static-ux.mustit.co.kr/img/front/sprites/logo_credit_card_company_v2.jpeg");
  width: 90px;
  height: 30px;
  background-repeat: no-repeat;
  color: transparent;
  line-height: 0;
  background-size: 270px 120px;
}
.mi-card-image-group.hana_card {
  background-position: -90px -60px;
}
.mi-card-image-group.hyundai_card {
  background-position: -180px -60px;
}
.mi-card-image-group.kb_card {
  background-position: 0 0;
}
.mi-card-image-group.shinhan_card {
  background-position: -180px -30px;
}
.mi-card-image-group.samsung_card {
  background-position: -90px -30px;
}
.mi-card-image-group.bc_card {
  background-position: 0 -30px;
}
.mi-card-image-group.nh_card {
  background-position: -90px 0;
}
.mi-card-image-group.city_card {
  background-position: 0 -60px;
}
.mi-card-image-group.lotte_card {
  background-position: -180px 0;
}
.mi-card-image-group.woori_card {
  background-position: 0 -90px;
}

.mi-logo-simple-payment {
  background-image: url("https://static-ux.mustit.co.kr/img/front/sprites/logo_simple_payment_2.png");
  background-repeat: no-repeat;
  background-size: 420px 120px;
  width: 140px;
  height: 40px;
  display: inline-block;
}
.mi-logo-simple-payment.samsung-pay {
  background-position: 0 0;
}
.mi-logo-simple-payment.payco {
  background-position: -140px 0;
}
.mi-logo-simple-payment.kakao-pay {
  background-position: -280px 0;
}
.mi-logo-simple-payment.l-pay {
  background-position: 0 -37px;
}
.mi-logo-simple-payment.k-pay {
  background-position: -140px -35px;
}
.mi-logo-simple-payment.toss {
  background-position: -280px -37px;
}
.mi-logo-simple-payment.naver-pay {
  background-position: 0px -80px;
}

/* display 처리 */
.mi-transparent {
  opacity: 0;
}
.mi-hidden {
  display: none;
}
.mi-block {
  display: block;
}
.mi-inline-block {
  display: inline-block;
}
.mi-over-hidden {
  overflow: hidden;
}
.mi-before-clear:before {
  content: "";
  display: block;
  clear: both;
}
.mi-after-clear:after {
  content: "";
  display: block;
  clear: both;
}
.mi-float-left {
  float: left;
}
.mi-float-right {
  float: right;
  margin-left: 15px;
}
.mi-over-scroll-x {
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
}
.mi-over-scroll-y {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
.mi-float-right-mzero {
  float: right;
}

.mi-slide-left {
  position: fixed;
  left: -100%;
  top: 0;
  bottom: 0;
  width: 100%;
  background-color: #fff;
  z-index: 99990;
  transition: left 0.3s ease-in;
  -webkit-transition: left 0.3s ease-in;
}
.mi-slide-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -500px;
  transition: bottom 0.3s ease-in;
  -webkit-transition: bottom 0.3s ease-in;
}
.mi-slide-left.slide-view {
  left: 0;
}
.mi-slide-bottom.slide-view {
  bottom: 0;
}

.mi-up-priority {
  z-index: 1000;
}

/* list style */
.mi-list-group {
  border-top: 1px solid #ebebeb;
}
.mi-list-item {
  border-bottom: 1px solid #ebebeb;
  padding: 15px;
}
.mi-list-item.nodata {
  padding: 120px 0;
  text-align: center;
}

.mi-head-container {
  background-color: #fff;
  height: 50px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/*마진 정의*/
.mi-group-t5 {
  margin-top: 5px;
}
.mi-group-t10 {
  margin-top: 10px;
}
.mi-group-t15 {
  margin-top: 15px;
}
.mi-group-t20 {
  margin-top: 20px;
}
.mi-group-t25 {
  margin-top: 25px;
}
.mi-group-t30 {
  margin-top: 30px;
}
.mi-group-t35 {
  margin-top: 35px;
}
.mi-group-t40 {
  margin-top: 40px;
}
.mi-group-t45 {
  margin-top: 44px;
}
.mi-group-t50 {
  margin-top: 50px;
}

.mi-group-b1 {
  margin-bottom: 1px;
}
.mi-group-b5 {
  margin-bottom: 5px;
}
.mi-group-b10 {
  margin-bottom: 10px;
}
.mi-group-b15 {
  margin-bottom: 15px;
}
.mi-group-b20 {
  margin-bottom: 20px;
}
.mi-group-b25 {
  margin-bottom: 25px;
}
.mi-group-b30 {
  margin-bottom: 30px;
}
.mi-group-b40 {
  margin-bottom: 40px;
}
.mi-group-b50 {
  margin-bottom: 50px;
}
.mi-group-b60 {
  margin-bottom: 60px;
}
.mi-group-b70 {
  margin-bottom: 70px;
}

.mi-group-l5 {
  margin-left: 5px;
}
.mi-group-l10 {
  margin-left: 10px;
}
.mi-group-l15 {
  margin-left: 15px;
}
.mi-group-l20 {
  margin-left: 20px;
}
.mi-group-l30 {
  margin-left: 30px;
}

.mi-group-r1 {
  margin-right: 1px;
}
.mi-group-r5 {
  margin-right: 5px;
}
.mi-group-r10 {
  margin-right: 10px;
}
.mi-group-r15 {
  margin-right: 15px;
}
.mi-group-r20 {
  margin-right: 20px;
}
.mi-group-r30 {
  margin-right: 30px;
}
.mi-group-r50 {
  margin-right: 50px;
}
.mi-group-r55 {
  margin-right: 55px;
}

.mi-group-center {
  margin: auto;
}
.mi-inline-marginl-remove {
  margin-left: -4px;
}
.mi-inline-marginb-remove {
  margin-bottom: -4px;
}
.mi-group-minus {
  margin-top: -1px;
}

/*Navigation*/
.mi-navigation {
  height: 4em;
  position: relative;
  z-index: 9000;
}

.mi-navigation.sticky-v {
  height: 4em;
  z-index: 9000;
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;
  top: 0;
}

/*.mi-bottom-space {height:60px;}*/
.mi-bottom-layer {
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
}
.mi-bottom-layer .mi-bottom-floating-btn {
  position: absolute;
  right: 0;
  bottom: 100%;
}
.mi-localbar {
  background-color: rgba(0, 0, 0, 0.9);
  padding: 8px 5px;
}
.mi-localbar-item {
  width: 20%;
}

/*GNB*/
.mi-navigation.animation-option .sticky-layer,
.mi-header-top.animation-option {
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
}
.mi-head-container {
  background-color: #fff;
  height: 50px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  overflow: visible;
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
}
.mi-head-container > .mi-horizontal-scroll-wrapper {
  height: 51px;
}
.mi-sub-header {
  width: 50%;
  margin: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.mi-gnb {
  display: table;
  padding-left: 10px;
  padding-right: 10px;
}
.mi-gnb-item {
  display: table-cell;
}
.mi-gnb-link {
  padding: 15px 10px;
  line-height: 20px;
  font-size: 14px;
  color: #141414;
  white-space: nowrap;
  display: block;
}
.mi-gnb-item.active .mi-gnb-link {
  font-weight: bold;
  position: relative;
}
.mi-gnb-item.active .mi-gnb-link:after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 5px;
  right: 5px;
  height: 2px;
  background-color: #000;
}

/* Categorty Menu */
.mi-category-wrapper {
  padding-top: 10px;
  padding-bottom: 10px;
}
.mi-category-m {
  background-color: #e1e1e1;
  position: relative;
}
.mi-category-m .mi-category-item {
  padding: 10px 15px;
}
.mi-category-m .mi-category-item .mi-display-category-s {
  display: none;
}
.mi-category-m .mi-category-item.active {
  background-color: #f5f5f5;
}
.mi-category-m .mi-category-item.active .mi-display-category-s {
  display: inline-block;
}
.mi-category-m .mi-category-item.active > * {
  font-weight: bold;
}

.mi-category-m .mi-category-item .mi-display-sign {
  position: relative;
}
.mi-category-m .mi-category-item .mi-display-sign:before {
  content: "";
  width: 0.5em;
  height: 1px;
  background-color: #000;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
.mi-category-m .mi-category-item .mi-display-sign:after {
  content: "";
  width: 1px;
  height: 0.5em;
  background-color: #000;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
.mi-category-m .mi-category-item.active .mi-display-sign:after {
  display: none;
}

.mi-category-s {
  display: none;
  background-color: #f5f5f5;
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
}

.mi-category-m .mi-category-item.active .mi-category-s {
  display: block;
}
.mi-category-m .mi-category-item.active:before {
  content: "";
  background-color: #f5f5f5;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%;
}

/*Navigation Action*/
.mi-navigation.scroll-down .mi-fixed-top,
.mi-navigation.sticky-v.scroll-down {
  top: -104px;
}

.mi-bottom-layer.scroll-down {
  bottom: -80px;
}

.mi-active-action:active {
  background-color: rgba(0, 0, 0, 0.08);
}

/* flex */
.mi-flex {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  padding-left: 10px;
  padding-right: 10px;
  align-items: stretch;
}

.mi-flex-item-1,
.mi-flex-item-2,
.mi-flex-item-3,
.mi-flex-item-4,
.mi-flex-item-5,
.mi-flex-item-6,
.mi-flex-item-7,
.mi-flex-item-8,
.mi-flex-item-9,
.mi-flex-item-10,
.mi-flex-item-11,
.mi-flex-item-12 {
  padding-left: 5px;
  padding-right: 5px;
  box-sizing: border-box;
}

.mi-flex-item-1 {
  order: 1;
  flex: 0 1 8.333333%;
  max-width: 8.333333%;
}

.mi-flex-item-2 {
  order: 1;
  flex: 0 1 16.666667%;
  max-width: 16.666667%;
}

.mi-flex-item-3 {
  order: 1;
  flex: 0 1 25%;
  max-width: 25%;
}

.mi-flex-item-4 {
  order: 1;
  flex: 0 1 33.333333%;
  max-width: 33.333333%;
}

.mi-flex-item-5 {
  order: 1;
  flex: 0 1 41.666667%;
  max-width: 41.666667%;
}

.mi-flex-item-6 {
  order: 1;
  flex: 0 1 50%;
  max-width: 50%;
}

.mi-flex-item-7 {
  order: 1;
  flex: 0 1 58.333333%;
  max-width: 58.333333%;
}

.mi-flex-item-8 {
  order: 1;
  flex: 0 1 66.666667%;
  max-width: 66.666667%;
}

.mi-flex-item-9 {
  order: 1;
  flex: 0 1 75%;
  max-width: 75%;
}

.mi-flex-item-10 {
  order: 1;
  flex: 0 1 83.333333%;
  max-width: 83.333333%;
}

.mi-flex-item-11 {
  order: 1;
  flex: 0 1 91.666667%;
  max-width: 91.666667%;
}

.mi-flex-item-12 {
  order: 1;
  flex: 0 1 100%;
  max-width: 100%;
}

.mi-flex-center {
  align-self: center;
}

.mi-flex-responsive {
  flex-grow: 1;
  max-width: none;
}

/*
 * animation 효과 적용
 *
*/

.mi-fade-background {
  transition: background 0.4s ease;
  -webkit-transition: background 0.4s ease;
}

.mi-animation-heart {
  width: 91px;
  height: 85px;
  display: inline-block;
  background: url("https://static-ux.mustit.co.kr/img/m/m_icon/img_interest_effect.png")
    no-repeat;
  background-size: 91px 85px;
  transform: scale(0.1);
  opacity: 0;
  display: none;
}

.mi-animation-heart.switch-on {
  display: block;
  animation: updown-effect 0.7s ease-out forwards;
  -webkit-animation: updown-effect 0.7s ease-out forwards;
}

@-webkit-keyframes updown-effect {
  0% {
    transform: scale(0.1);
    opacity: 0;
  }
  30% {
    transform: scale(1.2);
    opacity: 1;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
  80% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.1);
    opacity: 0;
  }
}

@keyframes updown-effect {
  0% {
    transform: scale(0.1);
    opacity: 0;
  }
  30% {
    transform: scale(1.2);
    opacity: 1;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
  80% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.1);
    opacity: 0;
  }
}

/* timer style */
.mi-timer-wrapper {
  white-space: nowrap;
}
.mi-timer-wrapper:after {
  content: "";
  display: block;
  clear: both;
}
.mi-timer-group,
.mi-timer-number,
.mi-timer-text {
  float: left;
}
.mi-timer-group {
  position: relative;
  z-index: 11;
}
.mi-timer-number.in-timer-number {
  position: absolute;
  left: 0;
  z-index: 12;
  animation: in-timer-number 1s ease forwards;
  -webkit-animation: in-timer-number 1s ease forwards;
}
.mi-timer-number.out-timer-number {
  position: relative;
  z-index: 12;
  animation: out-timer-number 1s ease forwards;
  -webkit-animation: out-timer-number 1s ease forwards;
}

@-webkit-keyframes in-timer-number {
  from {
    top: -20px;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}

@-webkit-keyframes out-timer-number {
  from {
    top: 0;
    opacity: 1;
  }
  to {
    top: 20px;
    opacity: 0;
  }
}

@keyframes in-timer-number {
  from {
    top: -20px;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}

@keyframes out-timer-number {
  from {
    top: 0;
    opacity: 1;
  }
  to {
    top: 20px;
    opacity: 0;
  }
}

/***** exception *****/

#product_search .mi-row,
#selling_event_normal .mi-row,
#minishop_main .mi-row {
  padding: 0 7.5px;
}

#product_search .mi-col-1,
#product_search .mi-col-2,
#product_search .mi-col-3,
#product_search .mi-col-4,
#product_search .mi-col-5,
#product_search .mi-col-6,
#product_search .mi-col-7,
#product_search .mi-col-8,
#product_search .mi-col-9,
#product_search .mi-col-10,
#product_search .mi-col-11,
#product_search .mi-col-12,
#selling_event_normal .mi-col-1,
#selling_event_normal .mi-col-2,
#selling_event_normal .mi-col-3,
#selling_event_normal .mi-col-4,
#selling_event_normal .mi-col-5,
#selling_event_normal .mi-col-6,
#selling_event_normal .mi-col-7,
#selling_event_normal .mi-col-8,
#selling_event_normal .mi-col-9,
#selling_event_normal .mi-col-10,
#selling_event_normal .mi-col-11,
#selling_event_normal .mi-col-12,
#minishop_main .mi-col-1,
#minishop_main .mi-col-2,
#minishop_main .mi-col-3,
#minishop_main .mi-col-4,
#minishop_main .mi-col-5,
#minishop_main .mi-col-6,
#minishop_main .mi-col-7,
#minishop_main .mi-col-8,
#minishop_main .mi-col-9,
#minishop_main .mi-col-10,
#minishop_main .mi-col-11,
#minishop_main .mi-col-12 {
  padding: 0 7.5px;
}

.mi-btn-sqaure {
  width: 40px;
  height: 40px;
  background-color: #fafafa;
  border: 1px solid #e1e1e1;
  vertical-align: middle;
  outline: none;
  box-sizing: border-box;
}
.mi-btn-sqaure .mi-icon-arrow {
  position: relative;
  display: block;
  margin: auto;
  top: 0;
}
.mi-btn-sqaure-sm {
  width: 20px;
  height: 20px;
  font-size: 12px;
  border-radius: 4px;
  box-sizing: border-box;
  padding: 0;
}
.mi-btn-square-md {
  width: 30px;
  height: 30px;
  padding: 0;
}

#recommendKeyword {
  max-height: 110px;
}
#recommendKeyword.mi-accordion-hidden {
  display: block;
  height: 30px;
  overflow: hidden;
}

.mi-accordion-wrapper[data-sts="1"] .mi-hidden-this.mi-accordion-tab {
  display: none;
}

/* bottom nav */
.icon-bnav {
  display: inline-block;
  background-image: url("https://static-ux.mustit.co.kr/img/m/m_sprites/icon_bottom_nav.png");
  background-repeat: no-repeat;
  background-size: 456px 38px;
}

.icon-bnav-new.icon-eyes-black {
  width: 36px;
  height: 36px;
  display: inline-block;
  background-image: url("https://static-ux.mustit.co.kr/img/m/m_icon/icon_bnav_eyes_black.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: 6px 6px;
}

.icon-bnav-new.icon-eyes-red {
  width: 36px;
  height: 36px;
  display: inline-block;
  background-image: url("https://static-ux.mustit.co.kr/img/m/m_icon/icon_bnav_eyes_red.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position: 6px 6px;
}

.icon-bnav.icon-brand-black {
  width: 36px;
  height: 36px;
  background-position: -1px -1px;
}
.icon-bnav.icon-brand-red {
  width: 36px;
  height: 36px;
  background-position: -39px -1px;
}

.icon-bnav.icon-home-black {
  width: 36px;
  height: 36px;
  background-position: -77px -1px;
}
.icon-bnav.icon-home-red {
  width: 36px;
  height: 36px;
  background-position: -115px -1px;
}

.icon-bnav.icon-heart-black {
  width: 36px;
  height: 36px;
  background-position: -153px -1px;
}
.icon-bnav.icon-heart-red {
  width: 36px;
  height: 36px;
  background-position: -191px -1px;
}

.icon-bnav.icon-eyes-black {
  width: 36px;
  height: 36px;
  background-position: -267px -1px;
}
.icon-bnav.icon-eyes-red {
  width: 36px;
  height: 36px;
  background-position: -229px -1px;
}

.icon-bnav.icon-mypage-black {
  width: 36px;
  height: 36px;
  background-position: -381px -1px;
}
.icon-bnav.icon-mypage-red {
  width: 36px;
  height: 36px;
  background-position: -419px -1px;
}

.icon-bnav.icon-menu-black {
  width: 36px;
  height: 36px;
  background-position: -305px -1px;
}
.icon-bnav.icon-menu-red {
  width: 36px;
  height: 36px;
  background-position: -343px -1px;
}

/* gnb nav */
.icon-gnb {
  display: inline-block;
  background-image: url("https://static-ux.mustit.co.kr/img/m/m_sprites/icon_gnb2.png");
  background-repeat: no-repeat;
  background-size: 380px 38px;
}

.icon-gnb.icon-back {
  width: 36px;
  height: 36px;
  background-position: -39px -1px;
}
.icon-gnb.icon-back-white {
  width: 36px;
  height: 36px;
  background-position: -1px -1px;
}
.icon-gnb.icon-threebar {
  width: 36px;
  height: 36px;
  background-position: -115px -1px;
}
.icon-gnb.icon-exit {
  width: 36px;
  height: 36px;
  background-position: -77px -1px;
}
.icon-gnb.icon-setting {
  width: 36px;
  height: 36px;
  background-position: -267px -1px;
}
.icon-gnb.icon-basket {
  width: 36px;
  height: 36px;
  background-position: -305px -1px;
}
.icon-gnb.icon-basket-white {
  width: 36px;
  height: 36px;
  background-position: -343px -1px;
}
.icon-gnb.icon-search {
  width: 36px;
  height: 36px;
  background-position: -229px -1px;
}
.icon-gnb.icon-search-white {
  width: 36px;
  height: 36px;
  background-position: -191px -1px;
}
.icon-gnb.icon-member {
  width: 36px;
  height: 36px;
  background-position: -153px -1px;
}

/* left menu category */
.icon-cat {
  display: inline-block;
  background-image: url("https://static-ux.mustit.co.kr/img/m/m_sprites/icon_left_menu_category_2.png");
  background-repeat: no-repeat;
  background-size: 384px 48px;
}
.icon-cat.icon-home-hotdeal {
  width: 46px;
  height: 46px;
  background-position: -145px -1px;
}
.icon-cat.icon-home-promotion {
  width: 46px;
  height: 46px;
  background-position: -193px -1px;
}
.icon-cat.icon-home-review {
  width: 46px;
  height: 46px;
  background-position: -241px -1px;
}
.icon-cat.icon-home-event {
  width: 46px;
  height: 46px;
  background-position: -97px -1px;
}
.icon-cat.icon-home-shop {
  width: 46px;
  height: 46px;
  background-position: -337px -1px;
}
.icon-cat.icon-home-reward {
  width: 46px;
  height: 46px;
  background-position: -289px -1px;
}
.icon-cat.icon-home-as {
  width: 46px;
  height: 46px;
  background-position: -1px -1px;
}
.icon-cat.icon-home-boutique {
  width: 46px;
  height: 46px;
  background-position: -49px -1px;
}