/* OEM/ODM 커피·티·허브 페이지 스타일 (탭으로 같은 페이지에서 전환) */

.coffee-tea-page .tab-panel {
    display: none;
}

.coffee-tea-page .tab-panel.active {
    display: block;
}

.sub-oemodm-coffee-tea,
.sub-oemodm-coffee-tea * {
    box-sizing: border-box;
}

.sub-oemodm-coffee-tea {
    background: var(--fff, #ffffff);
    display: flex;
    flex-direction: column;
    gap: 160px;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    overflow: hidden;
    padding-top: 160px;
}

/* 섹션 01: 소개 */
.sub-oemodm-coffee-tea .section-01 {
    display: flex;
    flex-direction: column;
    gap: 48px;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
}

.sub-oemodm-coffee-tea .div3 {
    color: var(--000, #000000);
    text-align: center;
    font-family: 'SUIT', sans-serif;
    font-size: 48px;
    line-height: 60px;
    font-weight: 800;
    position: relative;
}

.sub-oemodm-coffee-tea ._18 {
    color: var(--000, #000000);
    text-align: center;
    font-family: 'SUIT', sans-serif;
    font-size: 24px;
    line-height: 36px;
    font-weight: 500;
    position: relative;
}

/* div4: 섹션 01 설명 (커피 페이지) */
.sub-oemodm-coffee-tea:not(.tea-herb-page) .section-01 .div4 {
    color: var(--000, #000000);
    text-align: center;
    font-family: 'SUIT', sans-serif;
    font-size: 24px;
    line-height: 36px;
    font-weight: 500;
    position: relative;
}

/* div4: 섹션 02/03 제목 (티·허브 페이지) */
.tea-herb-page .section-02 .div4,
.tea-herb-page .section-03 .div4 {
    color: var(--000, #000000);
    text-align: left;
    font-family: 'SUIT', sans-serif;
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
    position: relative;
}

/* 섹션 02: 액상타입 */
.sub-oemodm-coffee-tea .section-02 {
    display: flex;
    flex-direction: column;
    gap: 48px;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    width: 1440px;
    position: relative;
}

/* 티·허브 페이지: 섹션 02에 padding 추가 */
.tea-herb-page .section-02 {
    padding: 160px 0px 160px 0px;
}

/* 섹션 03: 분말타입 */
.sub-oemodm-coffee-tea .section-03 {
    padding: 160px 0px 160px 0px;
    display: flex;
    flex-direction: column;
    gap: 48px;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    width: 1440px;
    position: relative;
}

/* div5: 섹션 02/03 제목 (커피 페이지) */
.sub-oemodm-coffee-tea:not(.tea-herb-page) .section-02 > .div5,
.sub-oemodm-coffee-tea:not(.tea-herb-page) .section-03 > .div5 {
    color: var(--000, #000000);
    text-align: left;
    font-family: 'SUIT', sans-serif;
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
    position: relative;
}

/* div5: 제품명 (티·허브 페이지) */
.tea-herb-page .txt .div5 {
    color: var(--000, #000000);
    text-align: left;
    font-family: 'SUIT', sans-serif;
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    position: relative;
}

.sub-oemodm-coffee-tea .box-wrap {
    display: flex;
    flex-direction: row;
    gap: 48px;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-content: flex-start;
    flex-shrink: 0;
    width: 1440px;
    position: relative;
}

.sub-oemodm-coffee-tea .box {
    border-radius: 16px;
    border-style: solid;
    border-color: var(--gray-02, #dfdfdf);
    border-width: 1px;
    display: flex;
    flex-direction: column;
    gap: 0px;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    width: 448px;
    position: relative;
    overflow: hidden;
}

.sub-oemodm-coffee-tea .img2 {
    display: block;
    flex-shrink: 0;
    width: 100%;
    height: 180px;
    margin-top: 20px;
    margin-bottom: 20px;
    position: relative;
    object-fit: contain;
    object-position: center;
}

.sub-oemodm-coffee-tea .txt {
    border-style: solid;
    border-color: var(--gray-02, #dfdfdf);
    border-width: 1px 0px 0px 0px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
}

/* 제품명: div6 (커피 페이지) */
.sub-oemodm-coffee-tea .txt > .div6,
.sub-oemodm-coffee-tea .bib {
    color: var(--000, #000000);
    text-align: left;
    font-family: 'SUIT', sans-serif;
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    position: relative;
}

/* 티·허브 페이지: div6이 포장단위/용량/유통 라벨 */
.sub-oemodm-coffee-tea .li .div6 {
    color: var(--main, #8dc63f);
    text-align: left;
    font-family: 'SUIT', sans-serif;
    font-size: 18px;
    line-height: 26px;
    font-weight: 600;
    position: relative;
}

.sub-oemodm-coffee-tea .ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
}

.sub-oemodm-coffee-tea .li {
    display: flex;
    flex-direction: row;
    gap: 24px;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
}

/* 커피 페이지: div7은 포장단위 라벨 */
.sub-oemodm-coffee-tea:not(.tea-herb-page) .li .div7 {
    color: var(--main, #8dc63f);
    text-align: left;
    font-family: 'SUIT', sans-serif;
    font-size: 18px;
    line-height: 26px;
    font-weight: 600;
    position: relative;
}

/* 커피 페이지: div8은 값 */
.sub-oemodm-coffee-tea:not(.tea-herb-page) .li .div8 {
    color: var(--555, #555555);
    text-align: left;
    font-family: 'SUIT', sans-serif;
    font-size: 18px;
    line-height: 26px;
    font-weight: 400;
    position: relative;
}

/* 티·허브 페이지: div7은 값 */
.tea-herb-page .li .div7 {
    color: var(--555, #555555);
    text-align: left;
    font-family: 'SUIT', sans-serif;
    font-size: 18px;
    line-height: 26px;
    font-weight: 400;
    position: relative;
}

/* 티·허브 페이지: div8은 용량/유통 라벨 */
.tea-herb-page .li .div8 {
    color: var(--main, #8dc63f);
    text-align: left;
    font-family: 'SUIT', sans-serif;
    font-size: 18px;
    line-height: 26px;
    font-weight: 600;
    position: relative;
    width: 63px;
}

.sub-oemodm-coffee-tea .div9 {
    color: var(--main, #8dc63f);
    text-align: left;
    font-family: 'SUIT', sans-serif;
    font-size: 18px;
    line-height: 26px;
    font-weight: 600;
    position: relative;
    width: 63px;
}

.sub-oemodm-coffee-tea ._200-kg,
.sub-oemodm-coffee-tea ._140-ml-1-000-ml-28-38,
.sub-oemodm-coffee-tea ._7-ml-30-ml,
.sub-oemodm-coffee-tea ._100-ml-3-000-ml,
.sub-oemodm-coffee-tea ._1-g-5-g,
.sub-oemodm-coffee-tea ._1-5-g,
.sub-oemodm-coffee-tea ._10-kg {
    color: var(--555, #555555);
    text-align: left;
    font-family: 'SUIT', sans-serif;
    font-size: 18px;
    line-height: 26px;
    font-weight: 400;
    position: relative;
}

/* 반응형 */
@media (max-width: 1440px) {
    .sub-oemodm-coffee-tea .section-02,
    .sub-oemodm-coffee-tea .section-03 {
        width: 100%;
        padding-left: 240px;
        padding-right: 240px;
    }
    
    .sub-oemodm-coffee-tea .section-03 {
        padding-top: 160px;
        padding-bottom: 160px;
    }
    
    .tea-herb-page .section-02 {
        padding-top: 160px;
        padding-bottom: 160px;
    }
    
    .sub-oemodm-coffee-tea .box-wrap {
        width: 100%;
    }
}

@media (max-width: 1024px) {
    .sub-oemodm-coffee-tea {
        gap: 100px;
        padding-top: 100px;
    }
    
    .sub-oemodm-coffee-tea .section-02,
    .sub-oemodm-coffee-tea .section-03 {
        padding-left: 120px;
        padding-right: 120px;
    }
    
    .tea-herb-page .section-02 {
        padding-top: 160px;
        padding-bottom: 160px;
    }
    
    .sub-oemodm-coffee-tea .box {
        width: calc(50% - 24px);
    }
    
    .sub-oemodm-coffee-tea .img2 {
        width: 100%;
    }
}

@media (max-width: 1024px) {
    /* 다른 OEM 서브페이지(beverage 등)와 텍스트 크기 통일 */
    .sub-oemodm-coffee-tea .div3 {
        font-size: 40px;
        line-height: 52px;
    }
    .sub-oemodm-coffee-tea .section-01 .div4,
    .sub-oemodm-coffee-tea ._18 {
        font-size: 22px;
        line-height: 32px;
    }
    .sub-oemodm-coffee-tea:not(.tea-herb-page) .section-02 > .div5,
    .sub-oemodm-coffee-tea:not(.tea-herb-page) .section-03 > .div5,
    .tea-herb-page .section-02 .div4,
    .tea-herb-page .section-03 .div4 {
        font-size: 28px;
        line-height: 36px;
    }
    .sub-oemodm-coffee-tea .txt > .div6,
    .sub-oemodm-coffee-tea .bib,
    .tea-herb-page .txt .div5 {
        font-size: 22px;
        line-height: 30px;
    }
    .sub-oemodm-coffee-tea .li .div7,
    .sub-oemodm-coffee-tea .li .div8,
    .sub-oemodm-coffee-tea .div9,
    .sub-oemodm-coffee-tea ._200-kg,
    .sub-oemodm-coffee-tea ._140-ml-1-000-ml-28-38,
    .sub-oemodm-coffee-tea ._7-ml-30-ml,
    .sub-oemodm-coffee-tea ._100-ml-3-000-ml,
    .sub-oemodm-coffee-tea ._1-g-5-g,
    .sub-oemodm-coffee-tea ._1-5-g,
    .tea-herb-page .li .div7,
    .tea-herb-page .li .div8 {
        font-size: 16px;
        line-height: 24px;
    }
}

@media (max-width: 768px) {
    .sub-oemodm-coffee-tea {
        gap: 80px;
        padding-top: 60px;
    }
    
    .sub-oemodm-coffee-tea .div3 {
        font-size: 32px;
        line-height: 42px;
    }
    .sub-oemodm-coffee-tea .section-01 .div4,
    .sub-oemodm-coffee-tea ._18 {
        font-size: 18px;
        line-height: 28px;
    }
    .sub-oemodm-coffee-tea:not(.tea-herb-page) .section-02 > .div5,
    .sub-oemodm-coffee-tea:not(.tea-herb-page) .section-03 > .div5,
    .tea-herb-page .section-02 .div4,
    .tea-herb-page .section-03 .div4 {
        font-size: 24px;
        line-height: 32px;
    }
    .sub-oemodm-coffee-tea .txt > .div6,
    .sub-oemodm-coffee-tea .bib,
    .tea-herb-page .txt .div5 {
        font-size: 20px;
        line-height: 28px;
    }
    .sub-oemodm-coffee-tea .li .div7,
    .sub-oemodm-coffee-tea .li .div8,
    .sub-oemodm-coffee-tea .div9,
    .sub-oemodm-coffee-tea ._200-kg,
    .sub-oemodm-coffee-tea ._140-ml-1-000-ml-28-38,
    .sub-oemodm-coffee-tea ._7-ml-30-ml,
    .sub-oemodm-coffee-tea ._100-ml-3-000-ml,
    .sub-oemodm-coffee-tea ._1-g-5-g,
    .sub-oemodm-coffee-tea ._1-5-g,
    .tea-herb-page .li .div7,
    .tea-herb-page .li .div8 {
        font-size: 15px;
        line-height: 22px;
    }
    
    .sub-oemodm-coffee-tea .section-02,
    .sub-oemodm-coffee-tea .section-03 {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .sub-oemodm-coffee-tea .section-03 {
        padding-top: 80px;
        padding-bottom: 80px;
    }
    
    .tea-herb-page .section-02 {
        padding-top: 80px;
        padding-bottom: 80px;
    }
    
    .sub-oemodm-coffee-tea .box {
        width: 100%;
    }
    
    .sub-oemodm-coffee-tea .box-wrap {
        gap: 24px;
    }
}