/* 공통 */
.panel_title, .panel_subTitle {
    color: #212121;
    font-style: normal;
    font-weight: 600;
    line-height: 160%;
    text-align: center;
}

.panel_subTitle span {
    display: inline;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 60%,
        #D8E0F0 60%,
        #D8E0F0 95%,
        transparent 95%
    );
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    line-height: 1.6;
}

.panel_itemTitle {
    margin-top: clamp(20px, 1.3vw, 30px);
    color: #001B60;
    font-style: normal;
    font-weight: 600;
    line-height: 154%;
}
.panel_itemTitle:nth-of-type(2) {
    margin-top: clamp(20px, 1.3vw, 30px);
}

.panel_itemDesc {
    color: #3A3A3A;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    text-align: center;
}

/* 2중 자동 검증, 오류방지 프로그램, 간편 행정 혁신 공통 */
.panel_change {
    padding: clamp(69px, 4.5vw, 103px) 6vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* verify: panel_left에 텍스트 */
.panel_left .panel_title,
.panel_left .panel_subTitle,
.panel_left .panel_itemTitle,
.panel_left .panel_itemDesc {
    text-align: right;
}
.panel_left .panel_item {
    transform: scale(0.9);
    transform-origin: right center;
    transition: transform 0.4s ease;
}
.panel_right .panel_item {
    transform: scale(0.9);
    transform-origin: left center;
    transition: transform 0.4s ease;
}
.panel_item.active {
    transform: scale(1) !important;
}

.panel_item.active .panel_itemTitle {
    font-weight: 700;
    opacity: 1;
}
.panel_item.active .panel_itemDesc {
    font-weight: 500;
    opacity: 1;
}
.panel_item .panel_itemTitle,
.panel_item .panel_itemDesc {
    opacity: 0.7;
}

/* verify: panel_right에 이미지 */
.panel_right {
    position: relative;
    width: clamp(592px, 44.4vw, 1100px);
    aspect-ratio: 121/93;
    flex-shrink: 0;
}

.panel_image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.panel_image.active {
    opacity: 1;
}

/* prevent, admin: panel_right에 이미지 */
.prevent_section .panel_left,
.admin_section .panel_left {
    position: relative;
    width: clamp(592px, 44.4vw, 1100px);
    aspect-ratio: 121/93;
    flex-shrink: 0;
}

.prevent_section .panel_left .panel_image,
.admin_section .panel_left .panel_image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.prevent_section .panel_left .panel_image.active,
.admin_section .panel_left .panel_image.active {
    opacity: 1;
}

/* prevent, admin: panel_right에 이미지 */
.prevent_section .panel_right,
.admin_section .panel_right {
    position: static;
    width: auto;
    aspect-ratio: unset;
    flex: 1;
}

.prevent_section .panel_right .panel_title,
.prevent_section .panel_right .panel_subTitle,
.prevent_section .panel_right .panel_itemTitle,
.prevent_section .panel_right .panel_itemDesc,
.admin_section .panel_right .panel_title,
.admin_section .panel_right .panel_subTitle,
.admin_section .panel_right .panel_itemTitle,
.admin_section .panel_right .panel_itemDesc {
    text-align: left;
}

.prevent_section .panel_right .panel_item,
.admin_section .panel_right .panel_item {
    transform: scale(0.9);
    transform-origin: left center;
    transition: transform 0.4s ease;
}

/* 기업별 퍼스널케어 */
.care_section {
    padding: clamp(69px, 4.5vw, 103px) 6vw;
    display: flex;
    flex-direction: column;
}

.care_content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.care_wrap {
    position: relative;
    width: 100%;
}

.care_div {
    margin: clamp(164px, 10.7vw, 246px) 0;
    width: 100%;
    height: clamp(461px, 30vw, 691px);
    border-radius: clamp(34px, 2.1vw, 50px);
    background: #254157;
}

.mockup_container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(24px, 2.1vw, 56px);
}

.mockup_container img {
    width: clamp(289px, 18.8vw, 433px);
    height: auto;
}


/* 모바일 환경 최적화 */
@media (max-width: 1230px) {
    /* verify_section: right(이미지) 위, left(텍스트) 아래 */
    .verify_section.panel_change {
        flex-direction: column-reverse;
        align-items: center;
    }

    .verify_section .panel_right {
        width: min(592px, 90vw);
    }

    .verify_section .panel_left .panel_title,
    .verify_section .panel_left .panel_subTitle,
    .verify_section .panel_left .panel_itemTitle,
    .verify_section .panel_left .panel_itemDesc {
        text-align: center;
    }

    .verify_section .panel_left .panel_item {
        transform-origin: center center;
    }

    /* prevent_section: left(이미지) 위, right(텍스트) 아래 */
    .prevent_section.panel_change {
        flex-direction: column;
        align-items: center;
    }

    .prevent_section .panel_left {
        width: min(592px, 90vw);
    }

    .prevent_section .panel_right .panel_title,
    .prevent_section .panel_right .panel_subTitle,
    .prevent_section .panel_right .panel_itemTitle,
    .prevent_section .panel_right .panel_itemDesc {
        text-align: center;
    }

    .prevent_section .panel_right .panel_item {
        transform-origin: center center;
    }

    /* admin_section: left(이미지) 위, right(텍스트) 아래 */
    .admin_section.panel_change {
        flex-direction: column;
        align-items: center;
    }

    .admin_section .panel_left {
        width: min(592px, 90vw);
    }

    .admin_section .panel_right .panel_title,
    .admin_section .panel_right .panel_subTitle,
    .admin_section .panel_right .panel_itemTitle,
    .admin_section .panel_right .panel_itemDesc {
        text-align: center;
    }

    .admin_section .panel_right .panel_item {
        transform-origin: center center;
    }
}

@media (max-width: 767px) {
    .care_div {
        margin: clamp(80px, 5.2vw, 120px) 0;
        height: 355px;
    }

    .mockup_container img {
        width: 190px;
    }
}