/* style */

/* width */

/* font */
.fs--1{font-size: 14px !important}
.fs--2{font-size: 12px !important}
.fs--3{font-size: 10px !important}

.opacity-0{opacity: 0;}
.opacity-25{opacity: .25;}
.opacity-50{opacity: .5;}
.opacity-75{opacity: .75;}
.opacity-1{opacity: 1;}

.flex-center{align-items: center; justify-content: center;}
.flex-between-start,
.flex-start-between{align-items: flex-start; justify-content: space-between; }
.flex-between-end,
.flex-end-between{align-items: flex-end; justify-content: space-between; }
.flex-between-center,
.flex-center-between{align-items: center; justify-content: space-between; }
.flex-end-center{align-items: center; justify-content: flex-end;}

.flex-1{flex: 1;}
.flex-2{flex: 2;}

.cursor-pointer{cursor: pointer;}

.grid-col-1{grid-template-columns: repeat(1,1fr)}
.grid-col-2{grid-template-columns: repeat(2,1fr)}
.grid-col-3{grid-template-columns: repeat(3,1fr)}
.grid-col-4{grid-template-columns: repeat(4,1fr)}
.grid-col-5{grid-template-columns: repeat(5,1fr)}
.grid-col-6{grid-template-columns: repeat(6,1fr)}
.grid-col-7{grid-template-columns: repeat(7,1fr)}
.grid-col-8{grid-template-columns: repeat(8,1fr)}

[class*="grid-col-"]>*{overflow: hidden}
[class*="grid-col-"]>.col-1{grid-column: span 1; width: auto;}
[class*="grid-col-"]>.col-2{grid-column: span 2; width: auto;}
[class*="grid-col-"]>.col-3{grid-column: span 3; width: auto;}
[class*="grid-col-"]>.col-4{grid-column: span 4; width: auto;}
[class*="grid-col-"]>.col-5{grid-column: span 5; width: auto;}
[class*="grid-col-"]>.col-6{grid-column: span 6; width: auto;}
[class*="grid-col-"]>.col-7{grid-column: span 7; width: auto;}
[class*="grid-col-"]>.col-8{grid-column: span 8; width: auto;}

.row-gap-0 {row-gap: 0 !important}
.row-gap-1 {row-gap: .25rem !important}
.row-gap-2 {row-gap: .5rem !important}
.row-gap-3 {row-gap: 1rem !important}
.row-gap-4 {row-gap: 1.5rem !important}
.row-gap-5 {row-gap: 3rem !important}

.column-gap-0 {column-gap: 0 !important}
.column-gap-1 {column-gap: .25rem !important}
.column-gap-2 {column-gap: .5rem !important}
.column-gap-3 {column-gap: 1rem !important}
.column-gap-4 {column-gap: 1.5rem !important}
.column-gap-5 {column-gap: 3rem !important}

/* radius */
.rounded-4{border-radius: .5rem !important;}
.rounded-5{border-radius: 1rem !important;}


.scroll-hidden::-webkit-scrollbar {display: none;}


/* common */
#header_logo img{height: 35px}
.container{padding: 3rem 0;}
.container.none-fluid{padding-top: 3rem; padding-bottom: 4rem;}
.modal-header{padding: 1.5em;}
.modal-body{padding: 1.5em;}

.detail_price_info {
  width: 100%;
  padding-top: 10px;
}

.detail_info_dl {
  height: 48px;
  width: 100%;
  font-size: 1.125rem;
  padding: 0 10px;
  margin-bottom: 5px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
}

.detail_info_dl .custom_select_box {
  width: 100%;
  max-width: 380px;
}

.fix .detail_info_dl .custom_select_box {
  max-width: 100%;
}

.detail_info_dl:last-child {
  margin-bottom: 0;
}

.detail_info_dl dt {
  width: 200px;
  flex-shrink: 0;
  margin-right: 10px;
  color: #999;
}

.detail_info_dl dd {
  font-family: "Montserrat";
  color: #333;
  font-weight: 500;
  flex: 1;
  position: relative;
  z-index: 10;
}

.detail_info_dl .og_price {
  font-size: 0.875rem;
  color: #999;
  margin: 0 5px 0 10px;
  text-decoration: line-through;
  font-weight: 300;
}

.detail_info_dl .sale {
  font-size: 0.875rem;
  color: #ee0000;
}

.detail_info_dl .pv {
  color: #4e89ff;
  background: url(../img/ic_point.svg) no-repeat center left/ 20px 20px;
  text-indent: 25px;
  width: 100%;
  line-height: 48px !important;
  height: 48px;
}

.detail_info_dl.option {
  margin: 15px 0 20px;
}
.detail_info_dl.deliver_price dd span {
  font-size: 12px;
  color: #999;
}
.detail_info_dl.option .custom_select_box .select_txt span {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.com_loading_popup{width: 100vw;height: 100vh;position: fixed;z-index: 5000000;display: none;}
.com_loading_popup.on{display: block;}
.com_loading_popup .bg_box{width: 100%;height: 100%;position: fixed;background: rgba(0,0,0,0.4);}
.com_loading_popup .con_box{width: 300px;height: 200px;position: fixed;left: 50%;top: 50%;transform: translate(-50%,-50%);background-color: #fff;z-index: 10;box-shadow: 0 0 10px rgba(0,0,0,0.3);}
.com_loading_popup .con_box .txt_box{width: 100%;height: 100%;display: flex;justify-content: center;flex-direction: column;align-items: center;}
.com_loading_popup .con_box .ic_loading{width: 75px;margin-bottom: 20px}
.com_loading_popup .con_box .big_txt{font-size: 22px;font-weight: bold;color: #333;}



.table{table-layout: fixed}

@media (min-width: 576px) {
  .h-sm-25{height: 25% !important;}
  .h-sm-50{height: 50% !important;}
  .h-sm-75{height: 75% !important;}
  .h-sm-100{height: 100% !important;}

  .grid-col-sm-1{grid-template-columns: repeat(1,1fr); display: grid;}
  .grid-col-sm-2{grid-template-columns: repeat(2,1fr); display: grid;}
  .grid-col-sm-3{grid-template-columns: repeat(3,1fr); display: grid;}
  .grid-col-sm-4{grid-template-columns: repeat(4,1fr); display: grid;}
  .grid-col-sm-5{grid-template-columns: repeat(5,1fr); display: grid;}
  .grid-col-sm-6{grid-template-columns: repeat(6,1fr); display: grid;}
  .grid-col-sm-7{grid-template-columns: repeat(7,1fr); display: grid;}
  .grid-col-sm-8{grid-template-columns: repeat(8,1fr); display: grid;}

  [class*="grid-col-"]>.col-sm-1{grid-column: span 1; width: auto;}
  [class*="grid-col-"]>.col-sm-2{grid-column: span 2; width: auto;}
  [class*="grid-col-"]>.col-sm-3{grid-column: span 3; width: auto;}
  [class*="grid-col-"]>.col-sm-4{grid-column: span 4; width: auto;}
  [class*="grid-col-"]>.col-sm-5{grid-column: span 5; width: auto;}
  [class*="grid-col-"]>.col-sm-6{grid-column: span 6; width: auto;}
  [class*="grid-col-"]>.col-sm-7{grid-column: span 7; width: auto;}
  [class*="grid-col-"]>.col-sm-8{grid-column: span 8; width: auto;}

  .row-gap-sm-0 {row-gap: 0 !important}
  .row-gap-sm-1 {row-gap: .25rem !important}
  .row-gap-sm-2 {row-gap: .5rem !important}
  .row-gap-sm-3 {row-gap: 1rem !important}
  .row-gap-sm-4 {row-gap: 1.5rem !important}
  .row-gap-sm-5 {row-gap: 3rem !important}

  .column-gap-sm-0 {column-gap: 0 !important}
  .column-gap-sm-1 {column-gap: .25rem !important}
  .column-gap-sm-2 {column-gap: .5rem !important}
  .column-gap-sm-3 {column-gap: 1rem !important}
  .column-gap-sm-4 {column-gap: 1.5rem !important}
  .column-gap-sm-5 {column-gap: 3rem !important}

  .flex-sm-1{flex: 1}
  .flex-sm-2{flex: 2}
}

@media (min-width: 768px) {
  .h-md-25{height: 25% !important;}
  .h-md-50{height: 50% !important;}
  .h-md-75{height: 75% !important;}
  .h-md-100{height: 100% !important;}

  .grid-col-md-1{grid-template-columns: repeat(1,1fr); display: grid;}
  .grid-col-md-2{grid-template-columns: repeat(2,1fr); display: grid;}
  .grid-col-md-3{grid-template-columns: repeat(3,1fr); display: grid;}
  .grid-col-md-4{grid-template-columns: repeat(4,1fr); display: grid;}
  .grid-col-md-5{grid-template-columns: repeat(5,1fr); display: grid;}
  .grid-col-md-6{grid-template-columns: repeat(6,1fr); display: grid;}
  .grid-col-md-7{grid-template-columns: repeat(7,1fr); display: grid;}
  .grid-col-md-8{grid-template-columns: repeat(8,1fr); display: grid;}

  [class*="grid-col-"]>.col-md-1{grid-column: span 1; width: auto;}
  [class*="grid-col-"]>.col-md-2{grid-column: span 2; width: auto;}
  [class*="grid-col-"]>.col-md-3{grid-column: span 3; width: auto;}
  [class*="grid-col-"]>.col-md-4{grid-column: span 4; width: auto;}
  [class*="grid-col-"]>.col-md-5{grid-column: span 5; width: auto;}
  [class*="grid-col-"]>.col-md-6{grid-column: span 6; width: auto;}
  [class*="grid-col-"]>.col-md-7{grid-column: span 7; width: auto;}
  [class*="grid-col-"]>.col-md-8{grid-column: span 8; width: auto;}

  .row-gap-md-0 {row-gap: 0 !important}
  .row-gap-md-1 {row-gap: .25rem !important}
  .row-gap-md-2 {row-gap: .5rem !important}
  .row-gap-md-3 {row-gap: 1rem !important}
  .row-gap-md-4 {row-gap: 1.5rem !important}
  .row-gap-md-5 {row-gap: 3rem !important}

  .column-gap-md-0 {column-gap: 0 !important}
  .column-gap-md-1 {column-gap: .25rem !important}
  .column-gap-md-2 {column-gap: .5rem !important}
  .column-gap-md-3 {column-gap: 1rem !important}
  .column-gap-md-4 {column-gap: 1.5rem !important}
  .column-gap-md-5 {column-gap: 3rem !important}

  .flex-md-1{flex: 1}
  .flex-md-2{flex: 2}
}

@media (min-width: 992px){
  .h-lg-25{height: 25% !important;}
  .h-lg-50{height: 50% !important;}
  .h-lg-75{height: 75% !important;}
  .h-lg-100{height: 100% !important;}

  .container.none-fluid{padding-top: calc(100px + 4rem); padding-bottom: 5rem;}

  .grid-col-lg-1{grid-template-columns: repeat(1,1fr); display: grid;}
  .grid-col-lg-2{grid-template-columns: repeat(2,1fr); display: grid;}
  .grid-col-lg-3{grid-template-columns: repeat(3,1fr); display: grid;}
  .grid-col-lg-4{grid-template-columns: repeat(4,1fr); display: grid;}
  .grid-col-lg-5{grid-template-columns: repeat(5,1fr); display: grid;}
  .grid-col-lg-6{grid-template-columns: repeat(6,1fr); display: grid;}
  .grid-col-lg-7{grid-template-columns: repeat(7,1fr); display: grid;}
  .grid-col-lg-8{grid-template-columns: repeat(8,1fr); display: grid;}

  [class*="grid-col-"]>.col-lg-1{grid-column: span 1; width: auto;}
  [class*="grid-col-"]>.col-lg-2{grid-column: span 2; width: auto;}
  [class*="grid-col-"]>.col-lg-3{grid-column: span 3; width: auto;}
  [class*="grid-col-"]>.col-lg-4{grid-column: span 4; width: auto;}
  [class*="grid-col-"]>.col-lg-5{grid-column: span 5; width: auto;}
  [class*="grid-col-"]>.col-lg-6{grid-column: span 6; width: auto;}
  [class*="grid-col-"]>.col-lg-7{grid-column: span 7; width: auto;}
  [class*="grid-col-"]>.col-lg-8{grid-column: span 8; width: auto;}

  .row-gap-lg-0 {row-gap: 0 !important}
  .row-gap-lg-1 {row-gap: .25rem !important}
  .row-gap-lg-2 {row-gap: .5rem !important}
  .row-gap-lg-3 {row-gap: 1rem !important}
  .row-gap-lg-4 {row-gap: 1.5rem !important}
  .row-gap-lg-5 {row-gap: 3rem !important}

  .column-gap-lg-0 {column-gap: 0 !important}
  .column-gap-lg-1 {column-gap: .25rem !important}
  .column-gap-lg-2 {column-gap: .5rem !important}
  .column-gap-lg-3 {column-gap: 1rem !important}
  .column-gap-lg-4 {column-gap: 1.5rem !important}
  .column-gap-lg-5 {column-gap: 3rem !important}

  .flex-lg-1{flex: 1}
  .flex-lg-2{flex: 2}
}

@media (min-width: 1200px){
  .h-xl-25{height: 25% !important;}
  .h-xl-50{height: 50% !important;}
  .h-xl-75{height: 75% !important;}
  .h-xl-100{height: 100% !important;}

  #header_logo img{height: 50px}

  .grid-col-xl-1{grid-template-columns: repeat(1,1fr); display: grid;}
  .grid-col-xl-2{grid-template-columns: repeat(2,1fr); display: grid;}
  .grid-col-xl-3{grid-template-columns: repeat(3,1fr); display: grid;}
  .grid-col-xl-4{grid-template-columns: repeat(4,1fr); display: grid;}
  .grid-col-xl-5{grid-template-columns: repeat(5,1fr); display: grid;}
  .grid-col-xl-6{grid-template-columns: repeat(6,1fr); display: grid;}
  .grid-col-xl-7{grid-template-columns: repeat(7,1fr); display: grid;}
  .grid-col-xl-8{grid-template-columns: repeat(8,1fr); display: grid;}

  [class*="grid-col-"]>.col-xl-1{grid-column: span 1; width: auto;}
  [class*="grid-col-"]>.col-xl-2{grid-column: span 2; width: auto;}
  [class*="grid-col-"]>.col-xl-3{grid-column: span 3; width: auto;}
  [class*="grid-col-"]>.col-xl-4{grid-column: span 4; width: auto;}
  [class*="grid-col-"]>.col-xl-5{grid-column: span 5; width: auto;}
  [class*="grid-col-"]>.col-xl-6{grid-column: span 6; width: auto;}
  [class*="grid-col-"]>.col-xl-7{grid-column: span 7; width: auto;}
  [class*="grid-col-"]>.col-xl-8{grid-column: span 8; width: auto;}

  .row-gap-xl-0 {row-gap: 0 !important}
  .row-gap-xl-1 {row-gap: .25rem !important}
  .row-gap-xl-2 {row-gap: .5rem !important}
  .row-gap-xl-3 {row-gap: 1rem !important}
  .row-gap-xl-4 {row-gap: 1.5rem !important}
  .row-gap-xl-5 {row-gap: 3rem !important}

  .column-gap-xl-0 {column-gap: 0 !important}
  .column-gap-xl-1 {column-gap: .25rem !important}
  .column-gap-xl-2 {column-gap: .5rem !important}
  .column-gap-xl-3 {column-gap: 1rem !important}
  .column-gap-xl-4 {column-gap: 1.5rem !important}
  .column-gap-xl-5 {column-gap: 3rem !important}

  .flex-xl-1{flex: 1}
  .flex-xl-2{flex: 2}
}

@media (min-width: 1540px){
  .h-xxl-25{height: 25% !important;}
  .h-xxl-50{height: 50% !important;}
  .h-xxl-75{height: 75% !important;}
  .h-xxl-100{height: 100% !important;}
  #header_logo img{height: 50px}

  .grid-col-xxl-1{grid-template-columns: repeat(1,1fr); display: grid;}
  .grid-col-xxl-2{grid-template-columns: repeat(2,1fr); display: grid;}
  .grid-col-xxl-3{grid-template-columns: repeat(3,1fr); display: grid;}
  .grid-col-xxl-4{grid-template-columns: repeat(4,1fr); display: grid;}
  .grid-col-xxl-5{grid-template-columns: repeat(5,1fr); display: grid;}
  .grid-col-xxl-6{grid-template-columns: repeat(6,1fr); display: grid;}
  .grid-col-xxl-7{grid-template-columns: repeat(7,1fr); display: grid;}
  .grid-col-xxl-8{grid-template-columns: repeat(8,1fr); display: grid;}

  [class*="grid-col-"]>.col-xxl-1{grid-column: span 1; width: auto;}
  [class*="grid-col-"]>.col-xxl-2{grid-column: span 2; width: auto;}
  [class*="grid-col-"]>.col-xxl-3{grid-column: span 3; width: auto;}
  [class*="grid-col-"]>.col-xxl-4{grid-column: span 4; width: auto;}
  [class*="grid-col-"]>.col-xxl-5{grid-column: span 5; width: auto;}
  [class*="grid-col-"]>.col-xxl-6{grid-column: span 6; width: auto;}
  [class*="grid-col-"]>.col-xxl-7{grid-column: span 7; width: auto;}
  [class*="grid-col-"]>.col-xxl-8{grid-column: span 8; width: auto;}

  .row-gap-xxl-0 {row-gap: 0 !important}
  .row-gap-xxl-1 {row-gap: .25rem !important}
  .row-gap-xxl-2 {row-gap: .5rem !important}
  .row-gap-xxl-3 {row-gap: 1rem !important}
  .row-gap-xxl-4 {row-gap: 1.5rem !important}
  .row-gap-xxl-5 {row-gap: 3rem !important}

  .column-gap-xxl-0 {column-gap: 0 !important}
  .column-gap-xxl-1 {column-gap: .25rem !important}
  .column-gap-xxl-2 {column-gap: .5rem !important}
  .column-gap-xxl-3 {column-gap: 1rem !important}
  .column-gap-xxl-4 {column-gap: 1.5rem !important}
  .column-gap-xxl-5 {column-gap: 3rem !important}

  .flex-xxl-1{flex: 1}
  .flex-xxl-2{flex: 2}
}