.faq-warp{
    display: flex;
    gap: 20px;
}
.faq-title {
    display: none;
}
.faq-title h1{font-weight: bold;
    font-size: 16px;}

.faq-search {
    width: 100%;
    height: 35px;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #333;
    border-radius: 5px;
    background-color: #f8f8f8;
    padding: 5px 10px;
    border: 1px solid transparent;
    transition: border-color 0.3s ease;
}
.faq-search.wap {
    width: 90%;
    margin: 10px auto;
}
.faq-search:focus-within {
    border: 1px solid var(--btn-theme);
}
.faq-search-input {
    flex: 1;
    border: none;
    outline: none;
    background-color: transparent;
}
.faq-search-icon {
    font-size: 20px;
    color: #666;
    padding: 0 10px;
    transition: color 0.3s ease;
}
.faq-search:focus-within .faq-search-icon {
    color: var(--btn-theme);
}

.faq-main-left,
.faq-main-right{
    background: #fff;
    padding: 20px;
    box-shadow: 0px 10px 20px rgb(34 25 25 / 5%);
    border-radius: 10px;
}

.faq-main-left{
    flex: 1;
}
.faq-main-left .faq-item{
    border-bottom: 1px solid #ddd;
    padding:8px 0px ;
}
.faq-main-left .faq-item:last-child{border:0;}
.faq-main-left .faq-item-title{
    padding:15px 0px;cursor: pointer;
    font-weight: bold;
    position: relative;
    transition: color .1s ease;
}
.faq-main-left .faq-item-title:hover{color: #f60;}
.faq-main-left .faq-item-content {
    font-size: 14px;
    padding: 8px;
    border-radius: 5px;
    color: #51a7ff;
    display: none;
}
.faq-main-left .faq-item-content .faq-answer {
    white-space: pre-line;
}
.faq-main-left .faq-item-content .faq-answer a {
    font-weight: bold;
    color: #51a7ff;
    text-decoration: underline !important;
}
.faq-main-left .faq-item-title::after {
content: "";
width: 0;
height: 0;
position: absolute;
border-top: 5px solid transparent;
border-left: 8px solid #2a2a2a;
border-bottom: 5px solid transparent;
right: 18px;
top: 50%;
margin-top: -2px;
transition:all 0.2s linear;
}
.faq-main-left .active .faq-item-title::after {
transform:rotate(90deg);
}

.faq-main-right{
    width: 400px;
    --box-radius: 10px;
    --dark-bg-color: #fbb92a;
    --dark-shadow-color: #ffd67f62;
    padding: 15px;
    position: relative;
}
.faq-main-right .purchase_panel {
    padding: 0;
    width: 100%;
    position: sticky;top:0px;
}
.purchase_pay .purchase_total{font-size: 15px;}
.purchase_submit_btn {
    min-width: 166px;
    line-height: 47px;}

.purchase_quantity .select_quantity{width: 100%;}

.faq-main-right .purchase_info .sub_title,
.purchase_info.purchase_price,
.purchase_top_bar,
.purchase_list{
display: none;
}

.quick_purchase{box-shadow: none;}
 .purchase_info.purchase_type{margin-top:0px}
 .purchase_submit{padding: 0;}
.purchase_info .select_items {
    gap: 15px;
}
.purchase_info{ margin-top: 16px;}

@media screen and (max-width:768px){
.faq-main-left {padding-top: 0px;padding: 12px;box-shadow: none;}
.header-top .headerwarp{display: none;}
.faq-main-left .faq-item-title {padding: 5px 0px; }
.faq-pro {padding:4px 0px}
.faq-pro a {
    font-size: 12px;
    color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
    border: 1px solid #405eff;
    border-radius: 21px;
    padding: 5px 10px;
}


}

.purchase_title .title_text > span {
    white-space: wrap;
    text-overflow: unset;
    overflow: visible;
}

.no_data {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    font-size: 20px;
    color: #999;
}