/* ------------------------------------------------------------ PRODUCTS ------------------------------------------------------------ */
.prod-intro {
    position: relative;
    height: 950px;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    text-align: left;
}
.prod-intro > .wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    width: 500px;
    height: 100%;
    text-align: left;
}
.prod-intro .title {
    display: inline-block;
    font-size: 6.4rem;
    font-weight: 900;
    background: repeating-linear-gradient(
        90deg,
        #ccc 0%,
        #fff 50%,
        #888 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.prod-intro p {
    margin-top: 4rem;
    color: #ddd;
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 1.5;
}
.prod-intro p strong {
    color: #DFFF4F;
    font-size: 2rem;
    font-weight: 600;
}
.prod-intro .point-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-top: 9rem;
}
.prod-intro .point-list li {
    display: inline-flex;
    padding: 2.3rem 3rem;
    border-radius: 35px;
    border: 1px solid #fff;
    background: rgba(0, 0, 0, 0.2);
    color: #fff;
    font-size: 2rem;
    font-weight: 600;
    text-align: left;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.prod-intro .point-list li span {
    position: relative;
    padding-left: 3rem;
}
.prod-intro .point-list li span::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    display: block;
    width: 8px;
    height: 8px;
    margin: auto 0;
    border-radius: 100%;
    background: #ccc;
}



/* 비탈면 경보 시스템 */
.sub-products.p0101 #cert-tab1 .prod-intro {
    background-image: url(/images/contents/prod_img0101.jpg);
}

/* 작업장 돌발상황 알림 시스템 */
.sub-products.p0101 #cert-tab2 .prod-intro {
    background-image: url(/images/contents/prod_img0102.jpg);
}

/* 베리어프리 키오스크 */
.sub-products.p0102 #cert-tab1 .prod-intro {
    background-image: url(/images/contents/prod_img0201.jpg);
}

/* 대형폐기물 배출신고 시스템 */
.sub-products.p0102 #cert-tab2 .prod-intro {
    background-image: url(/images/contents/prod_img0202.jpg);
}
.sub-products.p0102 #cert-tab2 .prod-intro > .wrap::before {
    content: "";
    position: absolute;
    bottom: 13rem;
    right: -11rem;
    display: block;
    width: 34rem;
    height: 24.7rem;
    background: url(/images/contents/kiosk_cct.png) no-repeat center center / contain;
}

/* 포토 키오스크 */
.sub-products.p0102 #cert-tab3 .prod-intro {
    background-image: url(/images/contents/prod_img0203.jpg);
}

/* 안내 키오스크(DID) */
.sub-products.p0102 #cert-tab4 .prod-intro {
    background-image: url(/images/contents/prod_img0204.jpg);
}



/* --- VER 2 --- */
.prod-intro.ver2 {
    background-image: url(/images/contents/prod_bg.jpg);
}
.prod-intro.ver2 > .wrap {
    justify-content: flex-start;
    padding-top: 12rem;
}
.prod-intro.ver2 .prod-inner {
    width: 100%;
    height: 100%;
    text-align: center;
}
.prod-intro.ver2 .prod-center {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    height: 100%;
}
.prod-intro.ver2 .point-list {
    width: calc(50% - 150px);
    text-align: left;
}


/* --- 스캐너·하드웨어 --- */

/* 도장(인감)스캐너 */
.sub-products.p0103 #cert-tab1 .prod-intro.ver2 .prod-center {
    background: url(/images/contents/prod_0301.png) no-repeat left calc(50% - 150px) top 6rem;
}
/* 지문인식기 */
.sub-products.p0103 #cert-tab2 .prod-intro.ver2 .prod-center {
    background: url(/images/contents/prod_0302.png) no-repeat left calc(50% - 150px) top 6rem;
}
/* 신분증스캐너 */
.sub-products.p0103 #cert-tab3 .prod-intro.ver2 .prod-center {
    background: url(/images/contents/prod_0303.png) no-repeat left calc(50% - 150px) top 6rem;
}
/* 점자디스플레이 */
.sub-products.p0103 #cert-tab4 .prod-intro.ver2 .prod-center {
    background: url(/images/contents/prod_0304.png) no-repeat left calc(50% - 150px) top 6rem;
}
/* 점자키패드 */
.sub-products.p0103 #cert-tab5 .prod-intro.ver2 .prod-center {
    background: url(/images/contents/prod_0305.png) no-repeat left calc(50% - 150px) top 6rem;
}
.sub-products.p0103 #cert-tab5 .prod-intro.ver2 .point-list {
    width: calc(50% - 300px);
}
/* 이어폰볼륨조절기 */
.sub-products.p0103 #cert-tab6 .prod-intro.ver2 .prod-center {
    background: url(/images/contents/prod_0306.png) no-repeat left calc(50% - 150px) top 6rem;
}


/* --- 소프트웨어 --- */

/* 인감대사프로그램 */
.sub-products.p0104 #cert-tab1 .prod-intro.ver2 .prod-center {
    background: url(/images/contents/prod_0401.png) no-repeat left calc(50% - 150px) top 6rem;
}
.sub-products.p0104 #cert-tab1 .prod-intro.ver2 .point-list {
    width: calc(50% - 300px);
}
/* 체육시설운영프로그램 */
.sub-products.p0104 #cert-tab2 .prod-intro.ver2 .prod-center {
    background: url(/images/contents/prod_0402.png) no-repeat left calc(50% - 150px) top 6rem;
}
/* 관공서 부서 안내 시스템 */
.sub-products.p0104 #cert-tab3 .prod-intro.ver2 .prod-center {
    background: url(/images/contents/prod_0403.png) no-repeat left calc(50% - 150px) top 6rem;
}




/* ────────────────────── 반응형 ────────────────────── */
@media only screen and (max-width:1599px) {
    /* --- 기술 및 인증 --- */
    .cert-list {
        gap: 5rem 2rem;
    }
    .sub-products.p0102 #cert-tab2 .prod-intro > .wrap::before {
        right: 0;
        width: 32rem;
    }
}

@media only screen and (max-width:1023px) {
    .prod-intro {
        height: 600px;
    }
    .prod-intro .title {
        font-size: 3.6rem;
    }
    .prod-intro p {
        margin-top: 2rem;
        font-size: 1.6rem;
    }
    .prod-intro .point-list {
        margin-top: 6%;
    }
    .prod-intro .point-list li {
        padding: 1.8rem 2rem;
        font-size: 1.6rem;
    }
    .prod-intro .point-list li span {
        padding-left: 2rem;
    }

    /* 대형폐기물 배출신고 시스템 */
    .sub-products.p0102 #cert-tab2 .prod-intro > .wrap::before {
        bottom: 0;
        width: 22rem;
    }
}

@media only screen and (max-width:767px) {
    .prod-intro {
        height: auto;
        background-color: #000;
        background-repeat: no-repeat;
        background-position: left -30px bottom -50px;
        background-size: 300px auto;
    }
    .prod-intro::before {
        content: "";
        opacity: 0.4;
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        background: linear-gradient(0deg, rgba(0, 0, 0, 1) 50%, rgba(5, 106, 174, 1) 100%);
    }
    .prod-intro > .wrap {
        justify-content: flex-start;
        align-items: center;
        padding: 8rem 0 15rem;
        text-align: center;
    }
    .prod-intro .prod-inner {
        width: 100%;
    }
    .prod-intro .prod-inner br {
        display: none;
    }
    .prod-intro .title {
        font-size: 3rem;
    }
    .prod-intro p {
        margin-top: 1.5rem;
        color: #fff;
    }
    .prod-intro .point-list {
        align-items: center;
        width: auto !important;
    }
    .prod-intro .point-list li {
        padding: 1.2rem 1.5rem;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }
    
    /* 비탈면 경보 시스템 */
    .sub-products.p0101 #cert-tab1 .prod-intro {
        background-image: url(/images/contents/img_p0101.png);
    }
    /* 작업장 돌발상황 알림 시스템 */
    .sub-products.p0101 #cert-tab2 .prod-intro {
        background-image: url(/images/contents/img_p0102.png);
        background-position: left -30px bottom -150px;
    }
    /* 통합민원발급기 */
    .sub-products.p0102 #cert-tab1 .prod-intro {
        background-image: url(/images/contents/img_p0201.png);
        background-size: 400px auto;
    }
    /* 대형폐기물 배출신고 시스템 */
    .sub-products.p0102 #cert-tab2 .prod-intro {
        background-image: url(/images/contents/img_p0202.png);
        background-size: 330px auto;
        background-position: left -40px bottom -270px;
    }
    .sub-products.p0102 #cert-tab2 .prod-intro > .wrap {
        padding-bottom: 20rem;
    }
    .sub-products.p0102 #cert-tab2 .prod-intro > .wrap::before {
        left: 50%;
        bottom: -2rem;
        transform: translatex(-50%);
    }
    /* 포토 키오스크 */
    .sub-products.p0102 #cert-tab3 .prod-intro {
        background-image: url(/images/contents/img_p0203.png);
        background-size: 350px auto;
        background-position: left -30px bottom -310px;
    }
    /* DID */
    .sub-products.p0102 #cert-tab4 .prod-intro {
        background-image: url(/images/contents/img_p0204.png);
        background-size: 350px auto;
        background-position: left -30px bottom -240px;
    }

    
    .prod-intro.ver2 .prod-center {
        display: flex;
        flex-direction: column;
        align-items: center;
        background: none !important;
    }
    
    /* 도장(인감)스캐너 */
    .sub-products.p0103 #cert-tab1 .prod-intro {
        background-image: url(/images/contents/prod_0301.png);
        background-repeat: no-repeat;
        background-position: left -30px bottom -50px;
        background-size: 350px auto;
    }
    /* 지문인식기 */
    .sub-products.p0103 #cert-tab2 .prod-intro {
        background-image: url(/images/contents/img_p0302.png);
        background-position: left -100px bottom -230px;
        background-size: 500px auto;
    }
    /* 신분증스캐너 */
    .sub-products.p0103 #cert-tab3 .prod-intro {
        background-image: url(/images/contents/img_p0303.png);
        background-position: left -110px bottom -260px;
        background-size: 500px auto;
    }
    /* 점자디스플레이 */
    .sub-products.p0103 #cert-tab4 .prod-intro {
        background-image: url(/images/contents/img_p0304.png);
        background-position: left -90px bottom -40px;
        background-size: 500px auto;
    }
    /* 점자키패드 */
    .sub-products.p0103 #cert-tab5 .prod-intro {
        background-image: url(/images/contents/img_p0305.png);
        background-position: left -70px bottom -120px;
        background-size: 500px auto;
    }
    /* 이어폰볼륨조절기 */
    .sub-products.p0103 #cert-tab6 .prod-intro {
        background-image: url(/images/contents/img_p0306.png);
        background-position: left -30px bottom -50px;
        background-size: 350px auto;
    }
    /* 인감대사프로그램 */
    .sub-products.p0104 #cert-tab1 .prod-intro {
        background-image: url(/images/contents/img_p0401.png);
        background-position: left -30px bottom;
        background-size: 350px auto;
    }
    /* 체육시설운영프로그램 */
    .sub-products.p0104 #cert-tab2 .prod-intro {
        background-image: url(/images/contents/img_p0402.png);
        background-position: left 10px bottom;
        background-size: 250px auto;
    }
    /* 부서 안내 시스템 */
    .sub-products.p0104 #cert-tab3 .prod-intro {
        background-image: url(/images/contents/img_p0403.png);
        background-position: left -30px bottom;
        background-size: 350px auto;
    }
}