/* =========================================================
   선별기 제품 탭
========================================================= */

.selecteq-wrap {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px 100px;
    box-sizing: border-box;
    font-family: "Pretendard", "Noto Sans KR", sans-serif;
}


/* =========================
   TAB
========================= */

.selecteq-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 35px;
}

.selecteq-tab {
    position: relative;
    min-height: 62px;
    padding: 12px 20px;

    border: 1px solid #d9dee9;
    border-radius: 6px;

    background: #fff;
    color: #333;

    font-size: 18px;
    font-weight: 600;
    text-align: center;

    cursor: pointer;

    transition:
        background .25s,
        color .25s,
        border-color .25s,
        transform .25s;

    font-family: inherit;
}

.selecteq-tab:hover {
    border-color: #162655;
    color: #162655;
}

.selecteq-tab.active {
    background: #162655;
    border-color: #162655;
    color: #fff;
}


/* 활성 탭 아래 삼각형 */

.selecteq-tab.active::after {
    content: "";
    position: absolute;

    left: 50%;
    bottom: -9px;

    transform: translateX(-50%);

    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 9px solid #162655;
}


/* =========================
   PANEL
========================= */

.selecteq-panel {
    display: none;
}

.selecteq-panel.active {
    display: block;
}


/* =========================
   상단 네이비 영역
========================= */

.selecteq-top {
    position: relative;

    min-height: 620px;

    padding: 0;

    border-radius: 42px;

    overflow: hidden;

    background: #172653;
}


/* 배경 사선 장식 */

.selecteq-top::before {
    content: "";
    position: absolute;

    width: 75%;
    height: 120%;

    top: -50%;
    right: -23%;

    background: rgba(255,255,255,.035);

    transform: rotate(34deg);
}

.selecteq-top::after {
    content: "";
    position: absolute;

    width: 90%;
    height: 280px;

    left: -20%;
    bottom: 10px;

    background: rgba(0,0,0,.08);

    transform: rotate(-18deg);

    transform-origin: left bottom;
}

.selecteq-top-inner {
    position: relative;
    z-index: 2;

    padding: 70px 76px 180px;
    box-sizing: border-box;

    color: #fff;
}

.selecteq-top h2 {
    margin: 0 0 42px;

    font-size: 45px;
    line-height: 1.2;
    font-weight: 500;

    letter-spacing: -2px;

    color: #c7dbf8;
}


/* =========================
   특징 / 선별품목
========================= */

.selecteq-info {
    max-width: 900px;
}

.selecteq-info-row {
    display: grid;

    grid-template-columns: 110px 1fr;

    gap: 25px;

    margin-bottom: 45px;

    align-items: start;
}

.selecteq-info-row > strong {
    display: inline-block;

    width: fit-content;

    padding-bottom: 4px;

    font-size: 18px;
    font-weight: 600;
    color: #fff;

    border-bottom: 1px solid rgba(255,255,255,.85);
}

.selecteq-desc {
    font-size: 18px;
    line-height: 1.9;
    font-weight: 300;

    color: rgba(255,255,255,.9);
}

.selecteq-desc p {
    margin: 0 0 4px;
}

.selecteq-product {
    margin-top: 10px;
}


/* =========================
   제품 이미지
========================= */

.selecteq-image {
    position: relative;
    z-index: 5;

    width: calc(100% - 100px);

    margin: -135px auto 0;

    border-radius: 20px;

    overflow: hidden;

    background: #eee;

    box-shadow: 0 5px 20px rgba(0,0,0,.08);
}

.selecteq-image img {
    display: block;

    width: 100%;
    height: auto;

    max-height: 470px;

    object-fit: cover;
}


/* =========================
   SPEC
========================= */

.selecteq-spec {
    width: calc(100% - 140px);
    max-width: 1000px;

    margin: 95px 0 0 75px;
}

.selecteq-spec-row {
    display: grid;

    grid-template-columns: 180px minmax(0, 1fr);

    align-items: center;

    min-height: 61px;
}

.selecteq-spec-row strong {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 160px;
    min-height: 44px;

    padding: 5px 15px;

    border-radius: 30px;

    box-sizing: border-box;

    background: #162655;
    color: #fff;

    font-size: 18px;
    font-weight: 600;
}

.selecteq-spec-row span {
    display: flex;
    align-items: center;

    min-height: 51px;

    padding: 7px 20px;

    box-sizing: border-box;

    border-bottom: 1px dotted #9ea4b2;

    color: #333;

    font-size: 20px;
    font-weight: 400;

    word-break: keep-all;
}


/* 마지막 줄 점선 제거 */

.selecteq-spec-row:last-child span {
    border-bottom: 0;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

    .selecteq-wrap {
        padding: 50px 20px 80px;
    }

    .selecteq-tabs {
        grid-template-columns: repeat(2, 1fr);
    }

    .selecteq-top {
        min-height: 570px;
        border-radius: 30px;
    }

    .selecteq-top-inner {
        padding: 55px 50px 170px;
    }

    .selecteq-top h2 {
        font-size: 38px;
    }

    .selecteq-info-row {
        grid-template-columns: 100px 1fr;
        gap: 20px;
    }

    .selecteq-desc {
        font-size: 17px;
    }

    .selecteq-image {
        width: calc(100% - 70px);
        margin-top: -125px;
    }

    .selecteq-spec {
        width: calc(100% - 80px);
        margin: 70px 40px 0;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .selecteq-wrap {
        padding: 35px 15px 60px;
    }


    /* 탭 */

    .selecteq-tabs {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;

        margin-bottom: 20px;
    }

    .selecteq-tab {
        min-height: 50px;

        padding: 9px 6px;

        font-size: 14px;

        word-break: keep-all;
    }

    .selecteq-tab.active::after {
        display: none;
    }


    /* 네이비 배경 */

    .selecteq-top {
        min-height: auto;

        border-radius: 22px;

        padding-bottom: 90px;
    }

    .selecteq-top-inner {
        padding: 38px 25px 85px;
    }

    .selecteq-top h2 {
        margin-bottom: 30px;

        font-size: 30px;

        letter-spacing: -1.3px;
    }


    /* 특징 */

    .selecteq-info-row {
        display: block;

        margin-bottom: 32px;
    }

    .selecteq-info-row > strong {
        margin-bottom: 15px;

        font-size: 15px;
    }

    .selecteq-desc {
        font-size: 14px;
        line-height: 1.85;
    }

    .selecteq-desc p {
        margin-bottom: 7px;

        padding-left: 0;
    }


    /* 이미지 */

    .selecteq-image {
        width: calc(100% - 30px);

        margin-top: -75px;

        border-radius: 13px;
    }

    .selecteq-image img {
        max-height: none;

        object-fit: contain;
    }


    /* 제품사양 */

    .selecteq-spec {
        width: 100%;

        margin: 48px 0 0;
    }

    .selecteq-spec-row {
        grid-template-columns: 105px minmax(0, 1fr);

        min-height: 52px;
    }

    .selecteq-spec-row strong {
        width: 95px;
        min-height: 34px;

        padding: 5px;

        font-size: 13px;
    }

    .selecteq-spec-row span {
        min-height: 45px;

        padding: 7px 5px;

        font-size: 14px;
        line-height: 1.5;
    }

}


/* 아주 작은 모바일 */

@media (max-width: 400px) {

    .selecteq-tab {
        font-size: 13px;
    }

    .selecteq-top-inner {
        padding-left: 20px;
        padding-right: 20px;
    }

    .selecteq-top h2 {
        font-size: 27px;
    }

    .selecteq-spec-row {
        grid-template-columns: 95px minmax(0, 1fr);
    }

    .selecteq-spec-row strong {
        width: 87px;
        font-size: 12px;
    }

    .selecteq-spec-row span {
        font-size: 13px;
    }

}


/* 상단 네이비 설명영역 */
.selecteq-top {
    position: relative;

    min-height: 650px;

    background: #172653;

    border-radius: 42px;

    overflow: hidden;
}


/* 실제 내용 */
.selecteq-top-inner {
    position: relative;
    z-index: 2;

    padding: 70px 75px 190px;

    box-sizing: border-box;
}


/* 제목 */
.selecteq-top h2 {
    margin: 0 0 42px;

    color: #c8dcfa;

    font-size: 44px;
    line-height: 1.25;

    font-weight: 500;

    letter-spacing: -2px;
}


/* 설명 전체 */
.selecteq-info {
    width: 100%;
    max-width: 950px;
}


/* 특징 / 생산량 / 선별품목 */
.selecteq-info-row {
    display: grid;

    grid-template-columns: 110px minmax(0, 1fr);

    gap: 25px;

    align-items: start;

    margin-bottom: 42px;
}


/* 왼쪽 제목 */
.selecteq-info-row > strong {
    display: inline-block;

    width: fit-content;

    padding-bottom: 3px;

    color: #fff;

    font-size: 18px;
    line-height: 1.4;

    font-weight: 600;

    border-bottom: 1px solid rgba(255,255,255,.85);
}


/* 오른쪽 설명 */
.selecteq-desc {
    color: rgba(255,255,255,.9);

    font-size: 18px;
    line-height: 1.9;

    font-weight: 300;

    word-break: keep-all;
}

.selecteq-desc p {
    margin: 0 0 3px;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .selecteq-top {
        min-height: auto;

        border-radius: 22px;

        padding-bottom: 75px;
    }

    .selecteq-top-inner {
        padding: 38px 24px 80px;
    }

    .selecteq-top h2 {
        margin-bottom: 30px;

        font-size: 30px;

        letter-spacing: -1px;
    }

    .selecteq-info-row {
        display: block;

        margin-bottom: 32px;
    }

    .selecteq-info-row > strong {
        margin-bottom: 13px;

        font-size: 15px;
    }

    .selecteq-desc {
        font-size: 14px;
        line-height: 1.8;
    }

    .selecteq-desc p {
        margin-bottom: 7px;
    }

}

/* =========================================================
   중량 선별기 이미지 2장 - 항상 좌우 배치
========================================================= */

.selecteq-image.selecteq-image-two {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;

    width: calc(100% - 100px);
    margin: -135px auto 0;

    padding: 0;

    border-radius: 18px;
    overflow: hidden;

    background: #fff;
}

.selecteq-image-two .selecteq-img-item {
    position: relative;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

/* 첫번째와 두번째 이미지 사이 */
.selecteq-image-two .selecteq-img-item:first-child {
    border-right: 2px solid #fff;
}

/* 이미지 */
.selecteq-image.selecteq-image-two .selecteq-img-item img {
    display: block;

    width: 100% !important;
    height: 350px !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover !important;
    object-position: center center;

    max-width: none;
    max-height: none;
}


/* =========================================================
   태블릿
========================================================= */

@media (max-width: 1024px) {

    .selecteq-image.selecteq-image-two {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        width: calc(100% - 70px);
        margin-top: -120px;
    }

    .selecteq-image.selecteq-image-two .selecteq-img-item img {
        height: 280px !important;
    }

}


/* =========================================================
   모바일
========================================================= */

@media (max-width: 767px) {

    .selecteq-image.selecteq-image-two {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        width: calc(100% - 30px);

        margin: -70px auto 0;

        border-radius: 12px;
    }

    .selecteq-image-two .selecteq-img-item {
        width: 100% !important;
    }

    .selecteq-image-two .selecteq-img-item:first-child {
        border-right: 1px solid #fff;
        border-bottom: 0 !important;
    }

    .selecteq-image.selecteq-image-two .selecteq-img-item img {
        width: 100% !important;

        /* 모바일에서도 좌우 이미지 높이 동일 */
        height: 180px !important;

        object-fit: cover !important;
    }

}


/* =========================================================
   작은 모바일
========================================================= */

@media (max-width: 480px) {

    .selecteq-image.selecteq-image-two {
        width: calc(100% - 20px);
    }

    .selecteq-image.selecteq-image-two .selecteq-img-item img {
        height: 145px !important;
    }

}

/* =========================================================
   형상드럼 선별기 - 이미지 2장 좌우 배치
========================================================= */

.selecteq-image.selecteq-shape-images {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;

    width: calc(100% - 100px);
    margin: -135px auto 0;

    padding: 0;

    background: #fff;
    border: 1px solid #d5d9df;
    border-radius: 18px;

    overflow: hidden;
}


/* 각각의 이미지 영역 */
.selecteq-shape-images .selecteq-img-item {
    position: relative;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    overflow: hidden;
}


/* 두 이미지 사이 구분선 */
.selecteq-shape-images .selecteq-img-item:first-child {
    border-right: 1px solid #fff;
}


/* 이미지 */
.selecteq-image.selecteq-shape-images .selecteq-img-item img {
    display: block;

    width: 100% !important;
    height: 350px !important;

    margin: 0 !important;
    padding: 0 !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: cover !important;
    object-position: center center;
}


/* =========================================================
   1200px 이하
========================================================= */

@media (max-width: 1200px) {

    .selecteq-image.selecteq-shape-images {
        width: calc(100% - 80px);
    }

    .selecteq-image.selecteq-shape-images .selecteq-img-item img {
        height: 320px !important;
    }

}


/* =========================================================
   태블릿
========================================================= */

@media (max-width: 1024px) {

    .selecteq-image.selecteq-shape-images {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        width: calc(100% - 70px);
        margin-top: -120px;

        border-radius: 15px;
    }

    .selecteq-image.selecteq-shape-images .selecteq-img-item img {
        height: 280px !important;
    }

}


/* =========================================================
   모바일
========================================================= */

@media (max-width: 767px) {

    /*
       모바일에서도 위/아래로 바꾸지 않고
       반드시 좌우 2장 유지
    */
    .selecteq-image.selecteq-shape-images {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        width: calc(100% - 30px);

        margin: -70px auto 0;

        border-radius: 12px;
    }

    .selecteq-shape-images .selecteq-img-item {
        display: block !important;

        width: 100% !important;
        min-width: 0 !important;
    }

    .selecteq-shape-images .selecteq-img-item:first-child {
        border-right: 1px solid #fff !important;
        border-bottom: 0 !important;
    }

    .selecteq-image.selecteq-shape-images .selecteq-img-item img {
        display: block;

        width: 100% !important;
        height: 180px !important;

        object-fit: cover !important;
        object-position: center center;
    }

}


/* =========================================================
   작은 모바일
========================================================= */

@media (max-width: 480px) {

    .selecteq-image.selecteq-shape-images {
        width: calc(100% - 20px);
    }

    .selecteq-image.selecteq-shape-images .selecteq-img-item img {
        height: 145px !important;
    }

}


/* =========================================================
   360px 이하
========================================================= */

@media (max-width: 360px) {

    .selecteq-image.selecteq-shape-images .selecteq-img-item img {
        height: 125px !important;
    }

}

/* =========================================================
   선별기 2개 이미지 공통
   PC / 태블릿 / 모바일 모두 좌우 2장 고정
========================================================= */

.selecteq-image-pair {
    position: relative;
    z-index: 10;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    width: calc(100% - 100px);
    margin: -135px auto 0;

    padding: 0 !important;

    border-radius: 18px;
    overflow: hidden;

    background: #fff;
    border: 1px solid #d8d8d8;

    box-sizing: border-box;
}


/* 각각 정확히 50% */
.selecteq-image-pair .selecteq-image-half {
    display: block !important;

    flex: 0 0 50% !important;

    width: 50% !important;
    max-width: 50% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden;

    box-sizing: border-box;
}


/* 가운데 구분선 */
.selecteq-image-pair .selecteq-image-half:first-child {
    border-right: 1px solid #fff;
}


/* 이미지 */
.selecteq-image-pair .selecteq-image-half img {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    height: 350px !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover !important;
    object-position: center center;

    border: 0;
}


/* =========================================================
   태블릿
========================================================= */

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

    .selecteq-image-pair {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        width: calc(100% - 70px);
        margin-top: -120px;
    }

    .selecteq-image-pair .selecteq-image-half {
        flex: 0 0 50% !important;

        width: 50% !important;
        max-width: 50% !important;
    }

    .selecteq-image-pair .selecteq-image-half img {
        width: 100% !important;
        height: 280px !important;
    }

}


/* =========================================================
   모바일
   중요 : 모바일에서도 2장 좌우 유지
========================================================= */

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

    .selecteq-image-pair {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        width: calc(100% - 30px);

        margin: -70px auto 0;

        border-radius: 12px;
    }

    .selecteq-image-pair .selecteq-image-half {
        display: block !important;

        flex: 0 0 50% !important;

        width: 50% !important;
        max-width: 50% !important;
        min-width: 0 !important;
    }

    .selecteq-image-pair .selecteq-image-half img {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        height: 180px !important;

        object-fit: cover !important;
    }

}


/* 480px 이하 */
@media screen and (max-width: 480px) {

    .selecteq-image-pair {
        width: calc(100% - 20px);
    }

    .selecteq-image-pair .selecteq-image-half {
        flex: 0 0 50% !important;
        width: 50% !important;
        max-width: 50% !important;
    }

    .selecteq-image-pair .selecteq-image-half img {
        height: 145px !important;
    }

}

/* =========================================================
   선별기 이미지 2장 공통
   PC / 태블릿 / 모바일 모두 좌우 2장 유지
========================================================= */

.selecteq-image-pair {
    position: relative;
    z-index: 10;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    width: calc(100% - 100px);
    margin: -135px auto 0;

    padding: 0 !important;

    border: 1px solid #d5d8df;
    border-radius: 18px;

    background: #fff;

    overflow: hidden;

    box-sizing: border-box;
}


/* 사진 각각 50% */
.selecteq-image-pair .selecteq-image-half {
    display: block !important;

    flex: 0 0 50% !important;

    width: 50% !important;
    max-width: 50% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden;

    box-sizing: border-box;
}


/* 가운데 경계 */
.selecteq-image-pair .selecteq-image-half:first-child {
    border-right: 1px solid #fff;
}


/* 실제 이미지 */
.selecteq-image-pair .selecteq-image-half img {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    height: 350px !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover !important;
    object-position: center center;

    border: 0;
}


/* =========================================================
   조개류 선별기 - 용도
========================================================= */

#selecteq04 .selecteq-use-list p {
    margin: 0 0 3px;
}


/* =========================================================
   1200px 이하
========================================================= */

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

    .selecteq-image-pair {
        width: calc(100% - 80px);
    }

    .selecteq-image-pair .selecteq-image-half img {
        height: 310px !important;
    }

}


/* =========================================================
   태블릿
========================================================= */

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

    .selecteq-image-pair {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        width: calc(100% - 70px);

        margin-top: -120px;

        border-radius: 15px;
    }

    .selecteq-image-pair .selecteq-image-half {
        flex: 0 0 50% !important;

        width: 50% !important;
        max-width: 50% !important;
    }

    .selecteq-image-pair .selecteq-image-half img {
        width: 100% !important;
        height: 270px !important;

        object-fit: cover !important;
    }

}


/* =========================================================
   모바일
========================================================= */

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

    /* 상단 */
    #selecteq04 .selecteq-top-inner {
        padding: 38px 24px 82px;
    }

    #selecteq04 .selecteq-top h2 {
        margin-bottom: 30px;

        font-size: 29px;
        line-height: 1.25;

        letter-spacing: -1px;

        word-break: keep-all;
    }

    #selecteq04 .selecteq-info-row {
        margin-bottom: 28px;
    }

    #selecteq04 .selecteq-desc {
        font-size: 14px;
        line-height: 1.8;

        word-break: keep-all;
        overflow-wrap: break-word;
    }

    #selecteq04 .selecteq-desc p {
        margin: 0 0 6px;
    }


    /* -----------------------------------------
       이미지
       모바일에서도 절대 위아래로 변경하지 않음
    ----------------------------------------- */

    .selecteq-image-pair {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        width: calc(100% - 30px);

        margin: -70px auto 0;

        border-radius: 12px;
    }

    .selecteq-image-pair .selecteq-image-half {
        display: block !important;

        flex: 0 0 50% !important;

        width: 50% !important;
        max-width: 50% !important;
        min-width: 0 !important;
    }

    .selecteq-image-pair .selecteq-image-half:first-child {
        border-right: 1px solid #fff !important;
        border-bottom: 0 !important;
    }

    .selecteq-image-pair .selecteq-image-half img {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        height: 180px !important;

        object-fit: cover !important;
        object-position: center center;
    }

}


/* =========================================================
   작은 모바일
========================================================= */

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

    .selecteq-image-pair {
        width: calc(100% - 20px);
    }

    .selecteq-image-pair .selecteq-image-half {
        flex: 0 0 50% !important;

        width: 50% !important;
        max-width: 50% !important;
    }

    .selecteq-image-pair .selecteq-image-half img {
        height: 145px !important;
    }

}


/* 360px 이하 */
@media screen and (max-width: 360px) {

    .selecteq-image-pair .selecteq-image-half img {
        height: 125px !important;
    }

}