/* ==========================================================================
1. Common & Top Visual
========================================================================== */
.sub-common-top.sub2 {
    background: url("/static/kor/images/business/samjocelltech/seasoning-business-visual.jpg") no-repeat center/cover;
}

.page-samjocelltech .parallax-top {
    border-bottom: unset;
}

.page-samjocelltech .sub-common-navigator li:not(:last-child) {
    padding-right: unset;
}

.page-samjocelltech .sub-common-navigator li:not(:last-child)::after {
    display: none;
}

/* ==========================================================================
sec-solution
========================================================================== */
.sec-solution.samjo::after {
    background: url("/static/kor/images/business/samjocelltech/solution-section-bg-IMG.png") no-repeat center left;
}

.sec-solution.pin-scroll {
    height: 100vh;
}

.sec-solution.pin-scroll .solution-content {
    padding-top: 8rem;
}

/* 공통 섹션 타이틀 */
.process-area {
    margin-bottom: var(--mg-200);
}

.process-area.customer {
    width: 100%;
    overflow: hidden;
}

.process-list {
    display: flex;
    justify-content: space-between;
    position: relative;
}

.process-list li {
    position: relative;
    z-index: 2;
    text-align: center;
    width: 20%;
}

.process-list .icon-box {
    margin: 0 auto 2.4rem;
    position: relative;
    width: 12.8rem;
    height: 12.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #CBCCCA;
    border-radius: 50%;
    background-color: #ffffff;
    z-index: 3;
}

.process-list .icon-box img {
    position: absolute;
    width: 5.6rem;
    transition: opacity 0.4s ease;
}

.icon-box img:nth-child(1) {
    opacity: 1;
}

.icon-box img:nth-child(2) {
    opacity: 0;
}

.process-list h4 {
    margin-bottom: .8rem;
    font-size: var(--font-24);
    font-weight: 700;
    color: #0065BD;
}

.process-list li.active .icon-box {
    border: 3px solid #00A9E0;
}

.process-list li.active .icon-box img:nth-child(1) {
    opacity: 0;
}

.process-list li.active .icon-box img:nth-child(2) {
    opacity: 1;
}

/* -------------------------------------
   연결선 및 화살표 애니메이션 
-------------------------------------- */
/* 1. 디폴트 회색 배경 선 */
.process-list li:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 6.4rem;
    left: 50%;
    width: 100%;
    height: 1px;
    background-color: #E5E5E3;
    z-index: 1;
}

/* 2. 파란색 애니메이션 선 + 화살표 머리 */
.process-list li:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 5.8rem;
    left: 50%;
    width: 0;
    height: 10px;
    background-image: linear-gradient(#00A9E0, #00A9E0), url(/static/kor/images/business/samjocelltech/arrow-b.png);
    background-position: left center, right center;
    background-size: calc(100% - 10px) 2px, 10px 10px;
    background-repeat: no-repeat;
    z-index: 1;
    transition: width 0.8s ease-in-out;
    /* 애니메이션 속도 */
}

/* Active 시 화살표가 다음 요소까지 뻗어나감 */
.process-list li.active:not(:last-child)::after {
    width: 100%;
}

.process-list p {
    font-size: var(--font-18);
    font-weight: 300;
    color: #2F3133;
}

.common-wrap:has(.scrollX) {
    padding: unset;
}

/* ==========================================================================
3, 4, 5 섹션 상단 공통 레이아웃
========================================================================== */

.sec-top-info {
    margin-bottom: var(--mg-120);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.sec-cont-info {
    max-width: 100%;
}

.sticky-wrap {
    display: flex;
    align-items: flex-start;
    gap: 4rem;
}

.right-section {
    width: 100%;
}

.sec-top-info .info-img img {
    width: 100%;
    object-fit: cover;
}

.custom-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    border-bottom: 1px solid #2F3133;
}

.custom-table th {
    height: 4rem;
    font-size: var(--font-16);
    font-weight: 800;
    color: #fff;
    background: #0065BD;
}

.custom-table th>span {
    position: relative;
    display: block;
    font-family: var(--paybooc);
}

.custom-table th:not(:first-child)>span::before {
    content: "";
    display: block;
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, .2);
    position: absolute;
    left: -1px;
    top: 50%;
    transform: translateY(-50%);
}

.custom-table:nth-child(2) th {
    background: #00A9E0;
}

.custom-table th:first-child {
    border-radius: 8px 0 0 8px;
}

.custom-table th:last-child {
    border-radius: 0 8px 8px 0;
}

.custom-table tbody tr:first-child td:first-child {
    font-size: var(--font-20);
    font-weight: 700;
    width: 16rem;
}

.custom-table td {
    height: 4.8rem;
    font-size: var(--font-18);
    font-weight: 500;
    border-bottom: 1px solid #E5E5E3;
}

.custom-table tr:last-child td {
    border-bottom: unset;
}

.custom-table tr td:last-child {
    font-weight: 300;
}

/* ==========================================================================
공장
========================================================================== */
.sec-factory-asan.livestock {
    padding-bottom: var(--mg-200);
}

.flex-row {
    display: flex;
    gap: 4rem;
}

.table-wrap {
    margin-bottom: var(--mg-200);
}

.cert-images {
    display: flex;
    justify-content: space-between;
    text-align: center;
    margin-bottom: 6.4rem;
}

.cert-images li img {
    margin-bottom: 1.6rem;
}

.cert-images li span {
    font-size: var(--font-20);
    font-weight: 500;
}

.cert-images li span small {
    display: block;
    font-size: var(--font-16);
    font-weight: 300;
}

.cert-images li:last-child figure {
    display: flex;
    gap: 8px;
}

.cert-status-wrap {
    padding: 5.6rem;
    border-radius: 8px;
    background: #F5F5F5;
}

.cert-status-wrap+.packaging-area {
    margin-top: var(--mg-200);
}

.cert-section {
    margin-bottom: 4rem;
}

.cert-bottom-flex .cert-section {
    margin-bottom: 0;
}

.cert-title {
    margin-bottom: 2.4rem;
    font-size: var(--font-28);
    font-weight: 700;
    text-align: center;
}

.cert-table {
    position: relative;
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}

.cert-table::after,
.cert-table::before {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: #2F3133;
    position: absolute;
    left: 0;
}

.cert-table::before {
    top: 0;
}

.cert-table::after {
    bottom: 0;
}

.cert-table td {
    height: 4.8rem;
    font-size: var(--font-16);
    font-weight: 300;
    color: #17181A;
    border: 1px solid #E5E5E3;
    vertical-align: middle;
}

.width-33 {
    width: 33.333%;
}

.cert-bottom-flex .cert-table.h64 td {
    height: 6.4rem;
}

.cert-table tr:first-child td {
    border-top: unset;
}

.cert-table tr:last-child td {
    border-bottom: unset;
}

.cert-table tr td:first-child {
    border-left: none;
}

.cert-table tr td:last-child {
    border-right: none;
}

.cert-bottom-flex {
    display: flex;
    gap: 4rem;
    align-items: flex-start;
}

.cert-bottom-flex .flex-1 {
    flex: 1.2;
}

.cert-bottom-flex .flex-3 {
    flex: 3;
}

.dot-list li {
    font-size: var(--font-16);
    color: var(--color-text-sub);
    margin-bottom: 0.8rem;
}

.dot-list li::before {
    content: '· ';
    font-weight: bold;
}

.custom-table.kitchen td {
    height: 9.6rem;
}

/* ==========================================================================
소스·드레싱·시럽·프리믹스
========================================================================== */
.sec-products-clients {
    padding: var(--mg-200) 0;
}

.sec-products-clients.new-section {
    padding-bottom: unset;
}

.sec-products-clients .section-title {
    margin-bottom: 2.4rem;
    font-family: var(--paybooc);
    font-weight: 800;
}

.product-icons {
    margin-bottom: var(--mg-200);
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.product-icons li {
    flex: 1;
    text-align: center;
}

.product-icons li img {
    margin: 0 auto 1.6rem;
}

.product-icons li span {
    font-size: var(--font-20);
    font-weight: 500;
}

.client-marquee-wrap {
    max-width: 192rem;
    margin: 0 auto;
    overflow: hidden;
}

.client-marquee-wrap img {
    margin: 0 auto;
}

.logo-list {
    display: flex;
    gap: 2rem;
    flex-shrink: 0;
}

.logo-list li {
    width: 24rem;
    height: 9rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

@keyframes scrollLeft {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-50% - 1rem));
    }
}

@keyframes scrollRight {
    0% {
        transform: translateX(calc(-50% - 1rem));
    }

    100% {
        transform: translateX(0);
    }
}

@media screen and (max-width: 1023px) {

    /* 상단 pin */
    .sec-solution.pin-scroll {
        height: auto;
    }

    .sec-solution.pin-scroll .solution-content {
        padding-top: unset;
    }

    /* 고객 프로세스 */
    .custom-banner {
        padding: 4rem 2.4rem;
        flex-direction: column;
        gap: 3.5rem;
        height: auto;
        background: url(/static/kor/images/business/samjocelltech/section2-bg-IMG.jpg) no-repeat center / cover;
    }

    .process-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        row-gap: 4rem;
    }

    .process-list::before {
        display: none;
    }

    .process-list li {
        width: 100%;
    }

    /* 개발프로세스 */
    .process-list li:not(:last-child)::after {
        display: none;
    }

    .process-list li:nth-child(2)::before,
    .process-list li:nth-child(3)::before {
        display: none;
    }

    .process-list p {
        position: relative;
    }

    .process-list li:nth-child(even) p::after {
        content: "";
        display: block;
        width: 1px;
        height: 4rem;
        position: absolute;
        left: 50%;
        top: 100%;
        transform: translateX(-50%);
        background-color: #E5E5E3;
    }

    .process-list li:nth-child(1) {
        order: 1;
    }

    .process-list li:nth-child(2) {
        order: 2;
    }

    .process-list li:nth-child(3) {
        order: 4;
    }

    /* 메뉴 시연회 -> 오른쪽으로 */
    .process-list li:nth-child(4) {
        order: 3;
    }

    /* 개선 진행 -> 왼쪽으로 */
    .process-list li:nth-child(5) {
        order: 5;
    }

    /* 공장 */
    .sec-top-info {
        flex-direction: column;
        row-gap: 1.6rem;
    }

    .sticky-wrap {
        flex-direction: column;
        gap: unset;
    }

    .label-blue {
        width: 100%;
        position: static;
    }

    .cert-table .tr-flex {
        display: flex;
        flex-direction: column;
    }

    .cert-table .tr-flex td {
        display: flex;
        align-items: center;
        justify-content: center;
        border-right: unset;
        border-left: unset;
    }

    .cert-table .tr-flex td:nth-child(2) {
        border-top: 1px solid #E5E5E3;
        border-bottom: 1px solid #E5E5E3;
    }

    /* 가로 관성 스크롤 */
    .scrollX {
        overflow-x: auto;
        user-select: none;
        -webkit-user-select: none;
        padding-bottom: 2.5rem;
    }

    .scrollX::-webkit-scrollbar {
        height: 4px;
    }

    .scrollX::-webkit-scrollbar-track {
        background-color: #e5e5e5;
        border-left: 4rem solid #fff;
        border-right: 4rem solid #fff;
        background-clip: content-box;
    }

    .scrollX::-webkit-scrollbar-thumb {
        background-color: #2F3133;
        border-radius: 10px;
        border-left: 4rem solid transparent;
        border-right: 4rem solid transparent;
        background-clip: content-box;
    }

    .consulting-cards {
        display: flex;
        flex-wrap: nowrap;
        gap: unset;
    }

    .consulting-cards li {
        flex: 0 0 auto;
        width: 34rem;
        margin-right: 1.6rem;
    }

    .consulting-cards li:nth-child(3) {
        margin-right: unset;
    }

    .consulting-cards .img-box img {
        -webkit-user-drag: none;
        user-drag: none;
        pointer-events: none;
    }

    .consulting-cards .last-slide {
        display: block;
        flex: unset;
        flex-shrink: 0;
        width: var(--space-40);
        padding: unset;
        border: unset;
    }

    /* 공장 */
    .width-33 {
        width: 100%;
    }

    .table-wrap {
        flex-direction: column;
    }

    .cert-bottom-flex {
        flex-direction: column;
    }

    .cert-bottom-flex .flex-1,
    .cert-bottom-flex .flex-3 {
        flex: unset;
        width: 100%;
    }

    /* 인증서 스크롤 */
    .cert-images {
        padding-bottom: 2.4rem;
        justify-content: flex-start;
        gap: 2rem;
        overflow-x: auto;
        user-select: none;
        -webkit-user-select: none;
    }

    .cert-images::-webkit-scrollbar {
        display: none;
    }

    .cert-images li {
        flex: 0 0 auto;
    }

    .cert-images img {
        -webkit-user-drag: none;
        user-drag: none;
        pointer-events: none;
    }

    /* 테이블 */
    /* .cert-status-wrap {
        display: none;
        border-radius: 0 0 8px 8px;
    } */
    .table-show-btn {
        padding: 0 1.6rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 4.8rem;
        border-radius: 8px 8px 0 0;
        font-size: 1.4rem;
        font-weight: 700;
        background: #F5F5F5;
        border-bottom: 1px solid #fff;
        cursor: pointer;
    }

    .table-show-btn::after {
        content: "";
        display: block;
        width: 10px;
        height: 6px;
        background: url(/static/kor/images/business/samjocelltech/table-arrow.png);
        transform: rotate(180deg);
    }

    .table-show-btn.active::after {
        transform: rotate(0deg);
    }

    /* 생산공정 */
    .factory-process {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.6rem;
        row-gap: 3.2rem;
    }

    .factory-process li {
        width: 100%;
    }

    .kitchen-area {
        flex-direction: column;
        align-items: flex-start;
        gap: 2.4rem;
    }

    .kitchen-machines {
        max-width: 100%;
    }

    .factory-process li:nth-child(2) figure::before {
        left: -12px;
    }

    .factory-process li:nth-child(3) figure::before {
        transform: translateY(-50%) rotate(180deg);
        left: unset;
        right: -12px;
    }

    .factory-process li:nth-child(4) figure::before {
        left: 50%;
        top: -30px;
        transform: translateX(-50%) rotate(90deg);
    }

    .factory-process li:nth-child(5) figure::before {
        left: 50%;
        top: -30px;
        transform: translateX(-50%) rotate(90deg);
    }

}

@media screen and (max-width: 767px) {
	.client-marquee-wrap {
		padding: 0 var(--space-40);
	}
	
    .custom-table tbody tr:first-child td:first-child {
        width: 12rem;
    }

    .sec-products-clients .section-title {
        margin-bottom: 1.2rem;
    }

    .sub-common-top.sub2 {
        background: url("/static/kor/images/business/samjocelltech/samjo-visual-mob.jpg") no-repeat center/cover;
    }

    .sec-top-info .info-list li::before {
        top: 0;
        width: 16px;
        height: 16px;
    }

    .sub-common-navigator {
        padding: 1.6rem;
        flex-wrap: wrap;
        gap: .8rem;
    }

    .sub-common-navigator li:last-child,
    .sub-common-navigator li:last-child a {
        width: 100%;
    }

    .banner-txt {
        align-self: flex-start;
    }

    .sec-custom-dev {
        margin-top: 8rem;
    }

    .custom-banner {
        min-height: 48rem;
    }

    .banner-txt h3 {
        font-size: 2.4rem;
    }

    .process-list .icon-box {
        width: 9.6rem;
        height: 9.6rem;
        margin: 0 auto 1.2rem;
    }

    .process-list .icon-box img {
        width: 4rem;
    }

    .process-list h4 {
        margin-bottom: .4rem;
    }

    .consulting-cards .img-box img {
        height: 12.8rem;
    }

    /* 개발프로세스 */
    .process-list li:not(:last-child)::before {
        top: 4.8rem;
    }

    .factory-process li figure {
        margin-bottom: 1.6rem;
    }

    .factory-process li h5 {
        margin-bottom: .4rem;
    }

    .kitchen-machines {
        gap: .8rem;
    }

    .kitchen-machines li figure {
        height: 7rem;
    }

    .kitchen-machines li:last-child figure img {
        object-fit: cover;
    }

    .kitchen-machines li figure img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .kitchen-machines li span {
        margin-top: .8rem;
    }

    .banner-graphic {
        width: 100%;
    }

    /* 가로 관성 스크롤 */
    .consulting-cards li {
        width: 19.2rem;
        border-radius: 8px;
    }

    .scrollX::-webkit-scrollbar-track {
        background-color: #e5e5e5;
        border-left: 1.6rem solid #fff;
        border-right: 1.6rem solid #fff;
        background-clip: content-box;
    }

    .scrollX::-webkit-scrollbar-thumb {
        background-color: #2F3133;
        border-radius: 10px;
        border-left: 1.6rem solid transparent;
        border-right: 1.6rem solid transparent;
        background-clip: content-box;
    }

    .consulting-cards .txt-box {
        padding: 2.6rem 0;
        border-radius: 0 0 8px 8px;
    }

    .cert-status-wrap {
        padding: 2.4rem 1.6rem;
    }

    .cert-images {
        margin-bottom: 3.2rem;
        gap: 1.6rem;
    }

    .cert-images li {
        flex: 0 0 12rem;
    }

    .cert-images li:last-child {
        position: relative;
    }

    .cert-images li:last-child span {
        position: absolute;
        right: -28px;
    }

    .cert-images li img {
        margin-bottom: 1.2rem;
    }

    /* 소스 드레싱 */
    .product-icons {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .product-icons li img {
        margin: 0 auto .8rem;
    }

    .center-desc {
        margin-bottom: 3.2rem;
    }

    .marquee-row {
        margin-bottom: .8rem;
    }

    .logo-list {
        gap: .8rem;
    }

    .logo-list li {
        width: 12rem;
        height: 4.8rem;
    }
}