/* 상단 필터/리스트 엘리멘터 이전*/
#slider-container {
  overflow: hidden;
  width: 100%;
  position: relative;
}

#filter-slider {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 5개의 버튼이 가로로 배치됨 */
  grid-template-rows: repeat(5, 1fr);    /* 5개의 버튼이 세로로 배치됨 */
  gap: 10px;
  transition: max-height 0.3s ease; /* 애니메이션 추가 */
  max-height: 70px; /* 접었을 때 첫 줄만 보이게 설정 */
}

#filter-slider.expanded {
  max-height: 400px; /* 펼쳤을 때 전체 영역이 보이도록 설정 */
}

.slider-wrapper {
  display: flex;
  flex-direction: column; /* 슬라이더와 버튼을 수직으로 배치 */
  align-items: center;
  justify-content: space-between;
}

.filter-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 8px;
  margin: 5px;
  background-color: #fff;
  border: none;
  cursor: pointer;
  width: 100%; /* 부모 컨테이너 크기에 맞춰 자동 조정 */
  height: 100%; /* 부모 컨테이너 크기에 맞춰 자동 조정 */
  max-width: 70px; /* 최대 크기 제한 */
  max-height: 70px; /* 최대 크기 제한 */
  color: #949494;
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.1;
}

.filter-btn img {
  width: 100%; /* 이미지가 부모 컨테이너 크기에 맞춰 자동 조정 */
  height: auto; /* 비율 유지하며 크기 조정 */
}

.filter-btn:hover {
  background-color: #fff;
}

.filter-btn .imgspan {
  width: 100%; /* 부모 컨테이너 크기에 맞춰 조정 */
  height: auto; /* 비율 유지 */
  padding: 10px;
  border-radius: 30px;
}

.filter-btn input[type="radio"]:checked + .imgspan {
  background-color: #F5F7F9;
}

.filter-btn input[type="radio"]:checked ~ span img {
  filter: invert(38%) sepia(96%) saturate(4005%) hue-rotate(201deg) brightness(99%) contrast(105%);
}

.filter-btn input[type="radio"]:checked + .imgspan + span {
  color: #222;
}

#toggle-button {
  background-color: #f2f2f2;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  margin-top: 10px; /* 버튼이 리스트 하단에 위치하도록 여백 추가 */
}
/* 상단 필터/리스트 엘리멘터 이전*/

.result.elementor-container.elementor-column-gap-default {
    max-width: 940px!important;
}

.range-slider {
    flex: 1;
  }
  
  .sliderticks {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
  }
  
  .sliderticks span {
    display: flex;
    justify-content: center;
    width: 1px;
    height: 10px;
    background: #d3d3d3;
    line-height: 40px;
  }
  
  /*=============
  End tick marks
  =========================*/
  
  
  input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    cursor: pointer;
    outline: none;
    border-radius: 30px;
    height: 12px;
    background: #ccc;
  }
  
  /* Thumb: webkit */
  input[type="range"]::-webkit-slider-thumb {
    /* removing default appearance */
    -webkit-appearance: none;
    appearance: none; 
    /* creating a custom design */
    height: 24px;
    width: 24px;
    background-color:#CBDFF1;
    border-radius: 50%;
    border: none;
  
    /* box-shadow: -407px 0 0 400px #f50; emove this line */
    transition: .2s ease-in-out;
  }
  
  /* Thumb: Firefox */
  input[type="range"]::-moz-range-thumb {
    height: 15px;
    width: 15px;
    background-color: #CBDFF1;
    border-radius: 50%;
    border: none;
    
    /* box-shadow: -407px 0 0 400px #f50; emove this line */
    transition: .2s ease-in-out;
  }
  
  /* Hover, active & focus Thumb: Webkit */
  
  input[type="range"]::-webkit-slider-thumb:hover {
    box-shadow: 0 0 0 10px rgb(203, 223, 241, .1)
  }
  input[type="range"]:active::-webkit-slider-thumb {
    box-shadow: 0 0 0 13px rgb(203, 223, 241, .2)
  }
  input[type="range"]:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 13px rgb(203, 223, 241, .2)
  }
  
  /* Hover, active & focus Thumb: Firfox */
  
  input[type="range"]::-moz-range-thumb:hover {
    box-shadow: 0 0 0 10px rgb(203, 223, 241, .1)
  }
  input[type="range"]:active::-moz-range-thumb {
    box-shadow: 0 0 0 13px rgb(203, 223, 241, .2)
  }
  input[type="range"]:focus::-moz-range-thumb {
    box-shadow: 0 0 0 13px rgb(203, 223, 241, .2)    
  }
  .range {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 500px;
    margin: 0 auto;
    height: auto;
    padding: 0px 10px;
  }
  
  .value {
    font-size: 26px;    
    width: 50px;
    text-align: center;
  }
      .s {
          display: flex;
          align-items: flex-start;
          gap: 12px;
          margin-top: 76px;
          font-size:12px;
      }
      .plan_name {
          display: flex;
          align-items: flex-start;
      }
      .pricetable_btn {
          border-radius: 12px;
          border: 1.5px solid rgba(255, 255, 255, 0.06);
          background: rgba(255, 255, 255, 0.00);
          padding: 30px 24px;
          display: block;
          justify-content: center;
          align-items: center;
          flex-shrink: 0;
          align-self: stretch;
          cursor: pointer;
      }
      .r {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 12px;
          flex: 1 0 0;
      }
  
      /**기존 */
      .result_text {
      margin-bottom: 30px;
      font-size: 30px;
      line-height: 1.2;
      font-weight: 400;
      
  }
  .result_text.up span {
      font-weight: 600;
      color: #e14848
  }
  .result_text.down span {
      font-weight: 600;
      color: #0054ff
  }
  .result_text span {
      font-weight: 500;
      flex: 1;
  }
  .paytype_tab .now.active {
      color: #3B97FF;
      font-size: 22px;
      font-weight: 600;
      line-height: 36px;
      flex: 1;
  }
  
  .paytype_tab .later.active {
      color: #19D9E5;
      font-size: 22px;
      font-weight: 600;
      line-height: 36px;
      flex: 1;
  }
  
  .paytype_tab .paytype {
      color: rgba(255, 255, 255, 0.30);
      font-size: 22px;
      font-weight: 600;
      line-height: 36px;
      flex: 1;
      cursor: pointer;
  }
  
  .paytype_tab .productInfo {
      flex: 2;
      color: rgba(255, 255, 255, 0.30);
      font-weight: 500;
      font-size: 1rem;
      text-align: right;
  }
  
  .paytype_tab {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
  }
  
  .sliderticks span {
      font-size: 12px;
  }
  
  .pricetable_btn {
    background: #1A1A1A;
    color: white;
    border-radius: 10px;
    padding: 20px 30px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    opacity: 0.5;
  }
  
  .pricetable_btn.active {
      border: 1.5px solid var(--main, #0177FB);
      background: rgba(255, 255, 255, 0.02);
      opacity: 1;
  }
  
  .pricetable_btn:hover {
      opacity: 1;
      border: 1.5px solid rgba(255, 255, 255, 0.20);
  }
  
  .pricetable_btn .header h1 {
    margin: 0;
    padding: 0;
    font-size: 24px; /* Adjust as needed */
  }
  
  .pricetable_btn .price {
    font-size: 36px; /* Adjust as needed */
    font-weight: bold;
    margin: 10px 0;
  }
  
  .pricetable_btn .features p {
      margin-top: 4px;
      color: #F5F7F9;
      font-size: 14px;
      font-weight: 500;
      margin-bottom: 0;
      opacity: 0;
  }
  
  .pricetable_btn:hover .features p {
      opacity: 1;
  }
  
  .pricetable_btn.active .features p {
      margin-top: 12px;
      opacity: 1;
  }
  
  .pricetable_btn.active .feature-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin: -5px;
      margin-top: 32px;
      margin-bottom: 20px;
  }
  
  .feature-grid {
      display: none;
  }
  .active .feature-grid {
      display: block;
  }
  
  .feature-item {
    padding: 5px;
    flex-basis: calc(50% - 10px); /* Adjust width for 2 columns */
    font-size: 14px;
    display:flex;
    align-items: center;
    gap:3px
  }
  .pricetable_btn .header{
      display: flex;
      align-items: center;
  }
  .pricetable_btn .header h1 {
      font-size: 18px;
      font-weight: 500;
      flex: 1;
  }
  .pricetable_btn .header p {
      color: #1E1F20;
      font-size: 30px;
      font-weight: 600;
      flex: 1;
      text-align: right;
      margin: 0;
  }
  .pricetable_btn .header p span {
      color: #949494;
      font-size: 10px;
      font-weight: 400;
      margin-bottom: 0px;
  }
  .pricetable_btn.active .header p {
      color: #0177FB;
  }
  
  .range-slider label {
      font-size: 18px;
      font-weight: 500;
  }
  .range-slider-wrapper {
      margin-top:60px
  }

  .pricetable_btn.later.active {
    border: 1.5px solid #ED864C;
  }

  .pricetable_btn.later.active .header p {
    color: #ED864C;
  }
  .next_pay_btn.later {
    background: #ED864C;
  }
  .next_pay_btn {
    position: fixed;
    bottom: 20px;
    width: 330px;
    height: 50px;
    padding: 12px 20px;
    border-radius: 10px;
    background: #0177FB;
    font-size: 1rem;
    font-weight: 600;
    left: 50%;
    transform: translateX(-50%);
  }

  .pricetable_btn.active .feature-item.check span {
    color: #0177FB;
  }
  .pricetable_btn.later.active .feature-item.check  span  {
    color: #ED864C;
  }
  .priceDiv span {
    color: #949494;
}
button.next_pay_btn:hover {
    background: #0177FB;
}
button.next_pay_btn.later:hover {
    background: #ED864C;
}
.pre_plan_btn {
    margin-bottom: 24px;
    margin-top: 80px;
    text-align: center;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.30);
}
.pricetable_btn.later .feature-item img {
  filter: invert(72%) sepia(23%) saturate(4421%) hue-rotate(327deg) brightness(97%) contrast(90%);
}
.later_alert {
  background: rgba(237, 134, 76, 0.16);
  text-align: center;
  font-size: 1rem;
  font-weight: 400;
  margin-bottom: 20px;
  line-height: 1.4;
  border-radius: 12px;
  padding: 12px 10px;
}

  @media (max-width: 767px) {
    .d_hr {
      flex: 2!important;
    }
    .pre_plan_btn {
        margin-bottom: 12px;
        margin-top: 40px;
        text-align: center;
        font-size: 1rem;
        color: rgba(255, 255, 255, 0.30);
    }
    .priceDiv span {
        font-size: 14px;
    }
    .totalPlan .l {
        display: none;
    }

    .pricetable_btn {
        border: 1.5px solid rgba(255, 255, 255, 0.06);
        padding: 17px 20px;
        width: 100%;
        display: block;
        border-radius: 12px;
        background: #242424;
    }
    .pricetable_btn.active {
        padding: 30px 20px;
        border: 1.5px solid var(--main, #0177FB);
    }
    .pricetable_btn.active .feature-grid {
        display: block;
        margin: 0;
        margin-top: 20px;
    }
    .pricetable_btn .features p {
        display: none;
    }
    .pricetable_btn.active .features p {
        display: block;
        line-height: 1.4;
    }
    .paytype_tab {
        display: none!important
    }

    .switch-wrapper {
        position: relative;
        width: 80px; /* 스위치의 폭 */
        height: 36px; /* 스위치의 높이 */
        user-select: none; /* 텍스트 선택 방지 */
        display: block!important;
      }
      
      .switch {
        display: flex;
        align-items: center;
        cursor: pointer;
        width: 100%;
        height: 100%;
        background: #0177FB; /* 초기 비활성 상태 색상 */
        border-radius: 20px;
        position: relative;
        transition: background-color 0.3s;
        padding: 5px;
        box-sizing: border-box;
      }
      
      .circle {
        background-color: #1E1F20;
        border-radius: 50%;
        width: 30px; /* 원의 폭 */
        height: 30px; /* 원의 높이 */
        position: absolute;
        top: 3px; /* 상단 여백 */
        left: 3px; /* 원래 위치 */
        transition: left 0.3s;
      }
      
      .text {
        color: white;
        z-index: 1;
        font-weight: bold;
        position: absolute;
        top: 8px;
        left: 11px;
        right: 11px;
        opacity: 0;
        transition: opacity 0.3s;
        font-size: 17px;
      }
      
      /* 활성 상태일 때 */
      .switch.active {
        background: #ED864C; /* 활성 상태 색상 */
      }
      
      .switch.active .circle {
          left: calc(100% - 35px); /* 스위치 폭에서 원의 폭과 여백을 뺀 값 */
      }
      
      .switch.active .text {
        opacity: 1; /* "신규" 텍스트 표시 */
      }
      
      .switch.active .text.inactive {
        opacity: 0; /* "휴면" 텍스트 숨김 */
      }
      
      /* 비활성 상태일 때 */
      .switch .text.inactive {
        opacity: 1; /* "휴면" 텍스트 표시 */
        text-align: right;
      }

      .feature-item.b {
        display: none;
      }

      .form-row span.select-description {
        font-size: 20px;
        font-weight: 400;
    }

    .next_step button {
      font-size: 14px
    }
  }

    /*240516추가*/
    .detailInfo h2 {
      color: #1E1F20;
      font-size: 1rem;
      font-weight: 600;
      line-height: 1;
      margin: 10px 0;
    }
    .detailAction{
      flex:1;
    }
    #product-list .prodPer.plus {
      color: #F12D3C;
    }
    #product-list .prodPer.minus {
      color: #3390F9;
    }
    #n_search_plan {
      padding: 12px 20px;
    border-radius: 10px;
    float: right;
    background: #0177FB;
    margin-top: 20px;
    width: 100%
    }
    span.pricePer.minus {
      color: #3390F9;
      font-size: 0.875rem;
      font-weight: 500;
      line-height: 1.2;
      margin-left: 20px;
    }
    span.pricePer.plus {
      color: #F12D3C;
      font-size: 0.875rem;
      font-weight: 500;
      line-height: 1.2;
      margin-left: 20px;
  }
  .priceDetail {
    margin-bottom: 20px;
}
#Form .jet-form-row {
  color: #222;
  font-size: 18px;
  text-align: left;
}
.agree_text .jet-form-col__start {
  max-width: 100%;
}
.agree_text {
  display:block;
}
.detailAction {
  position: relative;
}
.upPrice, .downPrice {
  display: flex;
  color: #949494;
  font-family: Pretendard;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.1;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  float: right;
  margin: 0 6px 0 16px;
}
.upPrice .price {
  color: #F12D3C;
  font-family: Pretendard;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  border-radius: 4px;
  background: #000;
  padding: 4px;
  margin-top: 5px;
}
.downPrice .price {
  color: #3390F9;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  border-radius: 4px;
  background: #000;
  padding: 4px;
}
.daycalcprice {
  position: absolute;
  bottom: 0;
}
#newloginBtn {
  margin: 0 auto;
  width: 180px;
  height: 50px;
  padding: 12px 20px;
  border-radius: 10px;
  background: #0177FB;
}
.nloging {
  height:365px;
  width: 570px;
  background-image: url(https://booster.wepick.kr/wp-content/uploads/2024/05/chart.png);
  background-size: contain;
  text-align: center;
  display: grid;
  padding: 130px 0;
}
.nloginText {
  text-align: center;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.0;
}

@media (max-width: 767px) {
  .modal h2 {
    font-size: 0.9em;
  }
  .priceDetail {
    display: block;
  }
  .detailAction {
    position: unset;
  }
  .daycalcprice {
    position: unset;
  }
  .upPrice, .downPrice {
    float: none;
}
.elementor-77701168 .elementor-element.elementor-element-f449546 > .elementor-widget-container, .elementor-77701172 .elementor-element.elementor-element-93c675d > .elementor-widget-container {
  padding: 10px!important;
}
.nloging {
  height:250px;
  width: 100%;
  padding: 110px 0;
}
.nloginText {
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  line-height: 2.0;
}
#newloginBtn {
  margin: 0 auto;
  width: 100px;
  height: 40px;
  padding: 6px 10px;
  border-radius: 10px;
  background: #0177FB;
}
}

/*240718*/
.detailprod {
  flex: 1
}
.detailprod span {
  font-size: 0.875rem;
  font-weight: 500;
  color: #888D94;
  line-height: 1.1;
}

.detailInfo h4 {
  color: #222;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 1rem;
  border-radius: 4px;
  background: rgba(136, 145, 158, 0.20);
  display: flex;
  padding: 4px 8px;
  align-items: flex-start;
  gap: 10px;
  min-width: 42px;
  width: 61px;
  text-align: center;
  margin: 10px 0;
}
.detailInfo h1 {
  color: #1E1F20;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 0;
}
.brandBox {
  margin: 20px 0;
}
.brandBox h2 {
  font-size: 1.2rem;
  font-weight: 600;
}
.brandimageList {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-top: 20px;
}

.brandimageList .brand-image-item {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* 240830 */
.detailprice {
  display: flex;
  align-items: center;
}
li.prodListBtn.active {
  border-radius: 8px;
  background: #F3F7FB;
}
span.up.price {
  color: #E12343;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.1;
}
span.down.price {
  color: #0177FB;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.1;
}

/* 엘리멘터에서 이동 */
#product-list {
  height: 60vh;
  overflow-y: scroll;
  overflow-x: hidden;
  border-radius: 10px;
  background: #fff;
}
#product-list ul {
  margin: 0;
}
#product-list ul li{
  list-style: none;
  display: flex;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.2;
  padding: 20px;
  cursor: pointer;
  color: #202122;
}
#product-list .prodName {
  flex: 1;
  color: #202122;
  font-size: 1rem;
  text-align: right;
}
#product-list span.prodDeth {
  color: #888D94;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.3;
  flex: 1;
}
#product-list .prodGoal {
  flex: 1;
  text-align: center;
}
#product-list .prodPrice {
  flex: 1;
  text-align: center;
}
#product-list .prodPer {
  flex: 1;
  text-align: center;
}


/* 240906 */
.InfoBox {
  display: inline-flex;
  padding: 24px 20px 16px 20px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  border-radius: 12px;
  border: 1px solid #EBEDF2;
  background: #FFF;
  width: 100%;
  height: 54vh;
  }
  .InfoBox span {
  color: #171819;
  font-size: 0.93rem;
  font-weight: 400;
  line-height: 1.3;
  }

  .mktinfo1 {
  background: #FBFDED;
  display: flex;
  width: 100%;
  min-height: 15vh;
  height: auto;
  padding: 30px 20px;
  flex-direction: column;
  }
  
  .mktinfo1 h2 {
  color: #808F18;
  font-size: 0.93rem;
  font-weight: 500;
  line-height: 1rem;
  }
  .mktinfo2 {
  background: #F6F6F6;
  display: flex;
  width: 100%;
  height: 15vh;
  padding: 30px 20px;
  flex-direction: column;
  }
  .mktinfo2 h2 {
  color: #747474;
  font-size: 0.93rem;
  font-weight: 500;
  line-height: 1rem;
  }
  
  .mktinfo3 {
  background: #EDF1F6;
  display: flex;
  width: 100%;
  height: 15vh;
  padding: 30px 20px;
  flex-direction: column;
  }
  .mktinfo3 h2 {
  color: #5C85B9;
  font-size: 0.93rem;
  font-weight: 500;
  line-height: 1rem;
  }
    
  .depBox1, .depBox2 {
    width: 25vw;
    height: 79vh;
    margin: 0 6px;
  }

  .mktadImg{
    width: 100%;
    height: 23vh;
  }

  .mktSuccess {
    width: 100%;
    height: 21vh;
  }

  .mktChartBox {
    width: 100%;
    border-radius: 12px;
    border: 1px solid #EBEDF2;
    background: #FFF;
    padding: 24px 20px 0 20px;
    height: 32vh;
  }

  .mktChartBox h2 {
    color: #485564;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
  }

  .reviewBox {
    height: 16vh;
  }

  .reviewListBox {
    width: 100%;
    height: 23vh;
  }

  /*240909*/
  #button-container {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    gap: 8px;
    align-self: stretch;
    flex-wrap: wrap;
  }
  .funnel-button {
    display: flex;
    padding: 10px 16px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
    border: 1px solid #EBEDF2;
    background: #FFF;
    color: #888D94;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.1
  }

  button.funnel-button.active {
    border: 2px solid rgba(1, 119, 251, 0.20);
    background: #FFF;
    color: #0177FB;
  }

  /* 241002 */
  #media-container ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap; /* 여러 줄로 배치되도록 설정 */
}

#media-container li {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column; /* 아이콘과 텍스트를 수직 정렬 */
    width: calc(100% / 6); /* 한 줄에 6개씩 표시 */
    box-sizing: border-box; /* padding 포함한 전체 너비 계산 */
}

#media-container img {
    width: 40px; /* 아이콘 크기 조정 */
    height: 40px;
    margin-bottom: 10px; /* 텍스트와 아이콘 사이 간격 */
}

#media-container span {
    font-size: 0.8125rem;
    color: #888D94;
    text-align: center; /* 텍스트 중앙 정렬 */
}

#media-container .active img {
  border-radius: 50%; /* 활성화된 항목의 이미지를 라운드로 표시 */
  border: 2px solid #3390F9; /* 테두리 추가 */
}

  /* 241021 */
  #reward-container ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap; /* 여러 줄로 배치되도록 설정 */
}

#reward-container li {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column; /* 아이콘과 텍스트를 수직 정렬 */
    width: calc(100% / 6); /* 한 줄에 6개씩 표시 */
    box-sizing: border-box; /* padding 포함한 전체 너비 계산 */
}

#reward-container img {
    width: 40px; /* 아이콘 크기 조정 */
    height: 40px;
    margin-bottom: 10px; /* 텍스트와 아이콘 사이 간격 */
}

#reward-container span {
    font-size: 0.8125rem;
    color: #888D94;
    text-align: center; /* 텍스트 중앙 정렬 */
}

#reward-container .active img {
  border-radius: 50%; /* 활성화된 항목의 이미지를 라운드로 표시 */
  border: 2px solid #3390F9; /* 테두리 추가 */
}


/* 모바일 반영 */
@media (max-width: 767px){
  span.pricePer.minus {margin-left: 0;}
  .detailInfo h2 {font-size: 1.125rem; flex: 1}
  .mdetailInfoBox {display: flex; align-items:center;}
  span.pricePer.plus {margin-left: 0;}
  .downPriceInfo, .upPriceInfo {display: flex; align-items: center; float: right;}
  .detailprod {display: flex; align-items: center;}
  .detailInfo span {
    font-size: 0.875rem;
    font-weight: 500;
    color: #888D94;
    line-height: 1.1;
  }
  #prodResetBtn {
    padding: 8px 6px;
    border-radius: 6px;
    border: 1px solid #EBEDF2;
    background: #EBEDF2;
    font-size: 0.8125rem;
  }
  .InfoBox {
    padding: 20px 0;
    border-radius: 0;
    border: none;
  }
  .priceTitle {font-size: 0.9375rem; padding: 0 20px; color: #485564; font-weight: 700;}
  .InfoBox, .mktinfo1, .mktinfo2, .mktinfo3 {min-height: auto; height: auto;}

  .mktChartBox {
    width: 100%;
    border: none;
    border-radius: 0;
    padding: 20px;
    height: 300px;
  }
  .mktSuccess {
    width: 100%;
    height: auto;
  }
  .reviewListBox {
    height: auto;
  }

  /* 엥커 탭 메뉴*/
  .pricetabs {
    display: flex;
    justify-content: center; /* 탭 버튼을 가로로 가운데 정렬 */
    width: 100%;
    background-color: white;
    z-index: 10;
    border-bottom: 2px solid #EBEDF2;
  }
  .pricetabs .tab {
    flex: 1; /* 모든 탭을 동일한 너비로 설정 */
    padding: 10px 0;
    text-align: center;
    cursor: pointer;
    font-size: 0.8125rem;
    background-color: #ffffff;
    color: #888D94;
    font-weight: 500;
  }
  .pricetabs .tab.active {
    border-bottom: 2px solid #171819;
    font-weight: 600;
    color: #485564;
  }

  #optionbox {
    border-radius: 8px;
    background: rgba(72, 85, 100, 0.04);
    display: flex;
    padding: 12px 10px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .titleBox{
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
  }
  
  .titleBox h2 {
    color: #485564;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.3;
    margin: 0;
  }
  .titleBox span {
    color: #485564;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1;
    padding: 8px 6px;
    align-items: center;
    border-radius: 6px;
    border: 1px solid #EBEDF2;
    background: #EBEDF2;
  }
  .optListBox {
    display: flex;
    height: 52px;
    align-items: flex-end;
    gap: 20px;
    align-self: stretch;
  }
  .optGoal, .optMedia, .optReward {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
  }
  .optListBox h4 {
    color: #485564;
    font-family: "Noto Sans KR";
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.3;
    margin: 0;
  }
  .optListBox span {
    color: #485564;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.1;
  }

  .optGoalSelect {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
  }

  .optGoalSelect span {
    color: #485564;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
  }

  #media-container ul {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    gap: 4px;
    align-self: stretch;
    flex-wrap: wrap;
  }

  #media-container li {
    flex-direction: unset;
    width: unset;
    display: flex;
    padding: 7px 12px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 6px;
    background: rgba(136, 141, 148, 0.06);

    color: #888D94;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
  }

  #media-container img {
    width: 24px;
    height: 24px;
    margin: 0;
  }

  #product-list {
    border-radius: 0px;
    background: none;
  }
  #product-list .prodName {
    font-size: 0.875rem;
  }
  #product-list span.prodDeth {
    font-size: 0.75rem;
  }
  #product-list ul li {
    padding: 20px 16px;
    background: #fff;
    border-radius: 8px;
    margin-bottom: 4px;
  }

  .slider-wrapper {
    border-radius: 12px;
    background: #FFF;
    padding: 16px 0px;
  }

#toggle-button {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  padding: 0;
  margin: 20px 0 0 0;
}
  #toggle-button span {
    color: #888D94;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
  }


  .slider-wrapper {
    background-color: #fff;
    padding: 16px 8px;
  }
  .filter-btn {
    padding: 0;
    margin: 0;
  }
  .filter-btn .imgspan {
    width: 40px;
    height: 40px;
  }

  #filter-slider {
    gap: 5px;
    max-height: 65px;
  }

  #filter-slider {
    grid-template-rows: repeat(4, 1fr);
  }
}