/* ---------------- */
/* 콘텐츠 전체 레이아웃*/
#main {
    display: flex;
    flex-direction: column;
    gap: var(--space-20);
    margin-top: var(--space-24);
}





/* ---------------- */
/* 콘텐츠 타이틀 레이아웃 */
.main-top .container {
    display: flex;
    align-items: center;
    justify-content: space-between;


}


/* 콘텐츠 타이틀  */
.main-top .main-tit {
    display: flex;
    align-items: center;
    gap: var(--space-30)
}


/* 콘텐츠 탭영역 */
.main-top .tab {
    display: flex;
    gap: 0.375rem;


}

.main-top .tab li {
    font-size: var(--fs-13);
    border-radius: 6px;
    border: 1px solid var(--line-200);
    font-weight: 600;
    height: 2.25rem;
}

.main-top .tab li.active {
    background-color: var(--color-primary);
    color: var(--bg-100);
    border: 1px solid var(--color-primary);
}

.main-top .tab li a {
    height: 100%;
    padding: 0 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}






/* ---------------- */
/* 콘텐츠 상세 레이아웃 */

.main-cont {
    background: var(--bg-300);
    padding-top: 1.875rem;
    padding-bottom: 2.5rem;
    color: var(--fc-gray-3c);
}


.main-cont .container {
    background: var(--bg-100);
    border-radius: 12px;
    padding: 3.75rem 2.5rem;
    padding-top: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    position: relative;

}


.main-cont .container::before {
    position: absolute;
    content: '';
    top: 60px;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--line-100);
    z-index: 1;

}



/* ---------------- */
/* 라디오, 셀렉트 박스 위치 */

.filter-wrap {
    position: absolute;
    top: 80px;
    right: 2.5em;
    display: flex;
    align-items: center;
    gap: 4.5rem;
}



/* ---------------- */
/* 카테고리전체 + 로케이션 + 검색결과 */

.card-top {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    position: relative;

}


.card-category,
.page-info {
    color: var(--fc-gray-99);
    font-size: var(--fs-14);
}

.page-info {
    display: flex;
    align-items: center;
    gap: var(--space-30)
}



.result-info strong {
    margin-left: var(--space-8);
    margin-right: var(--space-4);
}


/* 카테고리전체 */
.card-category {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;


}

.card-category p {
    color: var(--fc-black);
    padding: var(--space-20) 0;
    height: 100%;
    font-weight: 800;
    margin-right: 2.5rem;
}



.card-category .top-menu-wrap,
.card-category .top-menu-wrap2 {
    flex: 1;
    overflow: hidden;
    /* margin-left: 2.5rem; */
    position: relative;

}

.card-category .top-menu-wrap::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: 20px;
    height: 50%;
    pointer-events: none;
    background: linear-gradient(to right,
            rgba(255, 255, 255, 0),
            #fff 100%);
    transform: translateY(-50%);

}


.card-category .top-menu-track,
.card-category .top-menu-track2 {
    display: flex;
    gap: 2.25rem;
    transition: transform .4s ease;
    will-change: transform;

}

.card-category .top-menu-track a,
.card-category .top-menu-track2 a {
    white-space: nowrap;
    flex-shrink: 0;
    padding: var(--space-20) 0;
}



.card-category .top-menu-next {
    width: 1.25rem;
    height: 1.25rem;
    background: transparent;
    position: relative;

}

.card-category .top-menu-next::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-top: 2px solid var(--fc-gray-3c);
    border-right: 2px solid var(--fc-gray-3c);
    transform: translate(-50%, -50%) rotate(45deg);
}


/*  로케이션 */

#location {
    display: flex;
    align-items: center;
    gap: var(--space-20);
}

#location .lo_line {
    position: relative;
    ;
}

#location li:not(li:last-child) .lo_line::after {
    position: absolute;
    content: "";
    position: absolute;
    top: 50%;
    left: 6px;
    width: 6px;
    height: 6px;
    border-top: 1px solid var(--fc-gray-99);
    border-right: 1px solid var(--fc-gray-99);
    transform: translateY(-50%) rotate(45deg);
}

/* 검색결과 */
.result-info strong {
    color: var(--fc-black);
}