@charset "utf-8";

/* =========================================================
   SHINWOO MULTITECH
   지속가능경영 공통 스타일
   제품소개 페이지 디자인 통일형
========================================================= */

.sw-sus {
    --main: #274651;
    --main-dark: #1f3942;
    --main-soft: #355b66;

    --accent: #cce1e2;
    --accent2: #e5efed;

    --page-bg: #f2f4f1;
    --box-bg: #ffffff;

    --text: #30373a;
    --text2: #636b6e;
    --line: #cbd2d1;

    width: 100%;
    padding: 0 0 90px;

    background: var(--page-bg);

    color: var(--text);

    font-family:
        "Pretendard",
        "Noto Sans KR",
        "Malgun Gothic",
        sans-serif;

    font-size: 16px;
    line-height: 1.75;

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

    box-sizing: border-box;
}

.sw-sus *,
.sw-sus *::before,
.sw-sus *::after {
    box-sizing: border-box;
}

.sw-sus ul,
.sw-sus ol,
.sw-sus li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sw-sus p,
.sw-sus h2,
.sw-sus h3,
.sw-sus h4 {
    margin-top: 0;
}

.sw-sus-inner {
    position: relative;
    z-index: 5;

    width: min(1160px, calc(100% - 60px));
    margin: 0 auto;
}


/* =========================================================
   상단 HERO
========================================================= */

.sw-sus-hero {
    position: relative;

    width: min(1280px, calc(100% - 20px));
    min-height: 650px;

    margin: 0 auto;

    padding:
        75px 70px
        150px;

    overflow: hidden;

    border-radius:
        38px 38px
        38px 38px;

    background:
        var(--main);

    color: #fff;
}


/* 제품페이지와 유사한 기하학 패턴 */

.sw-sus-hero::before {
    content: "";

    position: absolute;

    width: 1050px;
    height: 580px;

    right: -280px;
    top: -250px;

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

    transform: rotate(34deg);
}

.sw-sus-hero::after {
    content: "";

    position: absolute;

    width: 1050px;
    height: 480px;

    left: -350px;
    bottom: -290px;

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

    transform: rotate(-19deg);
}


.sw-sus-hero-pattern {
    position: absolute;

    width: 800px;
    height: 260px;

    right: -230px;
    bottom: 30px;

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

    transform: rotate(-18deg);

    pointer-events: none;
}


.sw-sus-hero-content {
    position: relative;
    z-index: 5;

    max-width: 1000px;
}


.sw-sus-hero h2 {
    margin: 0 0 30px;

    color: var(--accent);

    font-size: 47px;
    font-weight: 500;

    line-height: 1.25;
    letter-spacing: -.045em;
}


/* 핵심방침 = 제품페이지의 특징 스타일 */

.sw-sus-policy-title {
    display: inline-block;

    margin-bottom: 17px;

    padding-bottom: 2px;

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

    color: #fff;

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


.sw-sus-policy {
    margin-bottom: 28px;
}


.sw-sus-policy li {
    margin-bottom: 9px;

    color: rgba(255,255,255,.86);

    font-size: 17px;
    font-weight: 300;

    line-height: 1.6;
}


/* 상단 하단의 제품정보 같은 행 */

.sw-sus-hero-info {
    margin-top: 35px;
}


.sw-sus-hero-row {
    display: grid;

    grid-template-columns:
        120px 1fr;

    gap: 20px;

    align-items: start;

    max-width: 900px;

    margin-bottom: 20px;
}


.sw-sus-hero-row:last-child {
    margin-bottom: 0;
}


.sw-sus-hero-label {
    color: #fff;

    font-size: 17px;
    font-weight: 700;

    text-decoration: underline;
    text-underline-offset: 4px;
}


.sw-sus-hero-value {
    color:
        rgba(255,255,255,.82);

    font-size: 17px;
    font-weight: 300;
}


/* =========================================================
   겹치는 흰색 INTRO BOX
   제품페이지 사진박스 대응
========================================================= */

.sw-sus-intro-wrap {
    position: relative;

    z-index: 10;

    margin-top: -105px;
}


.sw-sus-intro {
    position: relative;

    min-height: 260px;

    padding:
        55px 65px;

    overflow: hidden;

    border:
        1px solid #d8ddda;

    border-radius: 22px;

    background:
        #fff;

    box-shadow:
        0 12px 35px
        rgba(35,57,61,.05);
}


.sw-sus-intro::before {
    content: "";

    position: absolute;

    width: 270px;
    height: 270px;

    right: -90px;
    top: -100px;

    border-radius: 50%;

    background:
        var(--accent2);
}


.sw-sus-intro-content {
    position: relative;
    z-index: 2;

    max-width: 900px;
}


.sw-sus-intro-tag {
    display: inline-flex;

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

    min-width: 105px;

    margin-bottom: 19px;

    padding:
        8px 20px;

    border-radius: 30px;

    background:
        var(--main);

    color: #fff;

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


.sw-sus-intro h3 {
    margin:
        0 0
        17px;

    color:
        var(--main-dark);

    font-size: 28px;
    font-weight: 700;

    letter-spacing: -.04em;
}


.sw-sus-intro p {
    max-width: 880px;

    margin: 0;

    color:
        #5c6365;

    font-size: 16px;

    line-height: 1.9;
}


/* =========================================================
   본문 영역
========================================================= */

.sw-sus-content {
    margin-top: 85px;
}


/* 섹션 제목 */

.sw-sus-section {
    margin-bottom: 90px;
}


.sw-sus-section-title {
    margin-bottom: 35px;
}


.sw-sus-section-title .en {
    display: block;

    margin-bottom: 6px;

    color:
        #879295;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: .14em;
}


.sw-sus-section-title h3 {
    margin: 0;

    color:
        var(--main-dark);

    font-size: 30px;
    font-weight: 700;

    letter-spacing: -.04em;
}


/* =========================================================
   제품 제원표 스타일
========================================================= */

.sw-sus-spec {
    width: 100%;
    max-width: 980px;
}


.sw-sus-spec-row {
    display: grid;

    grid-template-columns:
        170px 1fr;

    gap: 22px;

    align-items: start;

    margin-bottom: 8px;
}


.sw-sus-spec-title {
    display: flex;

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

    min-height: 43px;

    padding:
        7px 20px;

    border-radius: 30px;

    background:
        var(--main);

    color: #fff;

    font-size: 16px;
    font-weight: 700;

    text-align: center;
}


.sw-sus-spec-text {
    min-height: 43px;

    padding:
        7px 10px 11px;

    border-bottom:
        1px dotted #8e9b9d;

    color:
        #474d50;

    font-size: 16px;

    line-height: 1.7;
}


.sw-sus-spec-text strong {
    color:
        var(--main-dark);
}


/* =========================================================
   3단 카드
========================================================= */

.sw-sus-cards3 {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 20px;
}


.sw-sus-card {
    position: relative;

    padding:
        34px 28px;

    overflow: hidden;

    border:
        1px solid #d8dedb;

    border-radius: 18px;

    background:
        #fff;
}


.sw-sus-card-num {
    display: flex;

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

    width: 58px;
    height: 35px;

    margin-bottom: 22px;

    border-radius: 30px;

    background:
        var(--main);

    color: #fff;

    font-size: 13px;
    font-weight: 700;
}


.sw-sus-card h4 {
    margin:
        0 0 13px;

    color:
        var(--main-dark);

    font-size: 20px;

    letter-spacing: -.03em;
}


.sw-sus-card p {
    margin: 0;

    color:
        #62696b;

    font-size: 14px;

    line-height: 1.8;
}


/* =========================================================
   2단 카드
========================================================= */

.sw-sus-cards2 {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;
}


.sw-sus-card2 {
    padding:
        32px 30px;

    border:
        1px solid #d8dedb;

    border-radius: 18px;

    background:
        #fff;
}


.sw-sus-card2-head {
    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 18px;
}


.sw-sus-card2-num {
    display: flex;

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

    width: 58px;
    height: 34px;

    flex: 0 0 auto;

    border-radius: 30px;

    background:
        var(--main);

    color: #fff;

    font-size: 13px;
    font-weight: 700;
}


.sw-sus-card2 h4 {
    margin: 0;

    color:
        var(--main-dark);

    font-size: 19px;
}


.sw-sus-card2 p {
    margin: 0;

    padding-top: 17px;

    border-top:
        1px dotted #a5afb0;

    color:
        #62696b;

    font-size: 14px;

    line-height: 1.8;
}


/* =========================================================
   하단 VISION
========================================================= */

.sw-sus-vision {
    position: relative;

    margin-top: 90px;

    padding:
        52px 45px;

    overflow: hidden;

    border-radius: 26px;

    background:
        var(--main);

    text-align: center;
}


.sw-sus-vision::before {
    content: "";

    position: absolute;

    width: 520px;
    height: 240px;

    right: -170px;
    top: -150px;

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

    transform: rotate(30deg);
}


.sw-sus-vision .en {
    display: block;

    position: relative;

    margin-bottom: 10px;

    color:
        var(--accent);

    font-size: 12px;
    font-weight: 700;

    letter-spacing: .14em;
}


.sw-sus-vision h3 {
    position: relative;

    margin:
        0 0 13px;

    color: #fff;

    font-size: 27px;

    letter-spacing: -.03em;
}


.sw-sus-vision p {
    position: relative;

    max-width: 800px;

    margin: 0 auto;

    color:
        rgba(255,255,255,.78);

    font-size: 15px;
}


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

@media (max-width: 1024px) {

    .sw-sus-inner {
        width:
            calc(100% - 50px);
    }

    .sw-sus-hero {
        width:
            calc(100% - 20px);

        min-height: 610px;

        padding:
            65px 50px
            145px;
    }

    .sw-sus-cards3 {
        gap: 15px;
    }

}


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

@media (max-width: 767px) {

    .sw-sus {
        padding-bottom: 60px;
    }

    .sw-sus-inner {
        width:
            calc(100% - 28px);
    }

    .sw-sus-hero {
        width:
            calc(100% - 14px);

        min-height: auto;

        padding:
            47px 27px
            115px;

        border-radius: 24px;
    }

    .sw-sus-hero h2 {
        margin-bottom: 23px;

        font-size: 32px;
    }

    .sw-sus-policy-title {
        font-size: 16px;
    }

    .sw-sus-policy li {
        padding-left: 0;

        font-size: 14px;

        line-height: 1.7;
    }

    .sw-sus-hero-row {
        grid-template-columns: 90px 1fr;

        gap: 12px;

        margin-bottom: 14px;
    }

    .sw-sus-hero-label,
    .sw-sus-hero-value {
        font-size: 14px;
    }

    .sw-sus-intro-wrap {
        margin-top: -75px;
    }

    .sw-sus-intro {
        min-height: auto;

        padding:
            31px 24px;

        border-radius: 17px;
    }

    .sw-sus-intro h3 {
        font-size: 22px;
    }

    .sw-sus-intro p {
        font-size: 14px;
    }

    .sw-sus-content {
        margin-top: 60px;
    }

    .sw-sus-section {
        margin-bottom: 65px;
    }

    .sw-sus-section-title {
        margin-bottom: 27px;
    }

    .sw-sus-section-title h3 {
        font-size: 25px;
    }

    .sw-sus-spec-row {
        grid-template-columns:
            130px 1fr;

        gap: 12px;
    }

    .sw-sus-spec-title {
        min-height: 39px;

        padding:
            6px 13px;

        font-size: 14px;
    }

    .sw-sus-spec-text {
        min-height: 39px;

        padding:
            6px 4px 10px;

        font-size: 14px;
    }

    .sw-sus-cards3,
    .sw-sus-cards2 {
        grid-template-columns: 1fr;
    }

    .sw-sus-card,
    .sw-sus-card2 {
        padding:
            27px 23px;
    }

    .sw-sus-vision {
        margin-top: 60px;

        padding:
            40px 22px;

        border-radius: 20px;
    }

    .sw-sus-vision h3 {
        font-size: 22px;
    }

}


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

@media (max-width: 480px) {

    .sw-sus-hero {
        padding:
            40px 21px
            105px;
    }

    .sw-sus-hero h2 {
        font-size: 29px;
    }

    .sw-sus-hero-row {
        grid-template-columns: 1fr;

        gap: 3px;

        padding-bottom: 10px;
    }

    .sw-sus-spec-row {
        grid-template-columns:
            115px 1fr;

        gap: 10px;
    }

    .sw-sus-spec-title {
        font-size: 13px;
    }

    .sw-sus-spec-text {
        font-size: 13px;
    }

}