@charset "utf-8";
/* *******************************************************
 * filename : business.css
 * description : business 게시판 관련 CSS
 * date : 20240422
******************************************************** */

/* ******************  03. 충전서비스 ********************** */
/***** 서비스 개요 *****/
.summary-page {
    /* padding-bottom: 18.6rem; */
}

/*** top 컨텐츠 ***/
.summary-page .summary-tit {
    /* font-size: 7.2rem;
    font-weight: 700;
    line-height: 1.4em;
    letter-spacing: -0.015em;
    color: #111; */
    text-align: center;

    font-size: 4rem;
    font-weight: 500;
    line-height: 1.6em;
    letter-spacing: -0.015em;
    color: #000;
}

.summary-page .summary-tit span {
    position: relative;
    left: -43rem;
    font-size: 5.2rem;
    font-weight: 500;
    line-height: 1.5em;
    letter-spacing: -0.015em;
    color: #000;
}

.summary-page .summary-tit strong {
    color: var(--main-color);
}

.summary-top-banner {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 32.843%;
    background: center / cover url("/images/content/service_summary_top_img.jpg");
    margin-top: 9.5rem;
}

.summary-top-banner .top-banner-txt {
    position: absolute;
    top: 0;
    padding: 10rem 0;
}

.summary-top-banner .top-banner-txt > p {
    font-size: 2.1rem;
    font-weight: 500;
    line-height: 1.5em;
    letter-spacing: -0.015em;
    color: #fff;
    padding-bottom: 2.4rem;
}

.summary-top-banner .top-banner-txt > p span {
    font-weight: 600;
    color: #44f0ff;
}

.summary-top-banner .top-banner-txt > strong {
    font-size: 3.9rem;
    font-weight: 500;
    line-height: 1.5em;
    letter-spacing: -0.015em;
    color: #fff;
}

/*** 차별화된 통합 서비스 ***/
.summary-info-con .info-title-box {
    text-align: center;
    margin-top: 14rem;
    margin-bottom: 8rem;
}

.summary-info-con .info-title-box .info-top-st {
    font-size: 2.1rem;
    font-weight: 500;
    line-height: 1.5em;
    letter-spacing: -0.025em;
    color: #000;
    padding-bottom: 2.2rem;
}

.summary-info-con .info-title-box .info-top-tit {
    /* font-size: 4rem;
    font-weight: 500;
    line-height: 1.6em;
    letter-spacing: -0.015em;
    color: #000; */

    font-size: 6.2rem;
    font-weight: 700;
    line-height: 1.4em;
    letter-spacing: -0.015em;
    color: #111;
}

.summary-info-con .info-title-box .info-top-tit span {
    color: var(--main-color);
}

.summary-info-con .info-item-box {
    /* margin-top: 15rem; */
    padding-bottom: 11rem;
}

.summary-info-con .info-item-box .info-item {
    display: flex;
    align-items: center;
    margin-bottom: 11rem;

    /* flex-direction: column; */
}

.summary-info-con .info-item-box .info-item .img-box {
    /* width: 52.917%; */
    /* border-radius: 25px; */
    overflow: hidden;

    width: 50%;
    /* box-shadow: 0px -4px 66.5px 3.5px rgba(4, 6, 25, 0.05); */
}

.summary-info-con .info-item-box .info-item .txt-box {
    /* width: 47.083%; */
    margin-left: 12rem;
    width: 50%;
}

.summary-info-con .info-item-box .info-item.reverseFlex {
    flex-direction: row-reverse;
}

.summary-info-con .info-item-box .info-item.reverseFlex .img-box {
    /* width: 49.61%; */
    width: 50%;
    margin-left: 12rem;
}

.summary-info-con .info-item-box .info-item.reverseFlex .txt-box {
    width: 50.39%;
    /* margin-left: 4rem; */

    margin-left: 0rem;
}

.summary-info-con .info-item-box .info-item .img-box.overflowNone {
    overflow: visible;
}

.summary-info-con .info-item-box .info-item .img-box.overflowNone img {
    border-radius: 0;
}

.summary-info-con .info-item-box .info-item img {
    max-width: 100%;
    /* max-height: 30rem; */
    /* border-radius: 25px; */
}
.summary-info-con .info-item-box .info-item img.h-20 {
    max-height: 20rem;
}

.summary-info-con .info-item-box .info-item .info-item-tit {
    font-size: 3.2rem;
    font-weight: 500;
    line-height: 1.5em;
    letter-spacing: -0.02em;
    color: #000;
    padding-bottom: 2rem;
}

.summary-info-con .info-item-box .info-item .info-item-txt {
    font-size: 3rem;
    font-weight: 500;
    line-height: 1.5em;
    letter-spacing: -0.015em;
    color: #000;
    padding-bottom: 0.5rem;
}

.summary-info-con .info-item-box .info-item .info-item-subtxt {
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1.6em;
    letter-spacing: -0.015em;
    color: #000;
}

.summary-info-con .info-item-box .info-item .info-item-txt.dot {
    position: relative;
    padding-left: 1rem;
}

.summary-info-con .info-item-box .info-item .info-item-txt.dot::before {
    position: absolute;
    top: 1.24rem;
    left: 0;
    content: "";
    width: 4px;
    height: 4px;
    background-color: #000;
    border-radius: 50%;
}

.summary-bottom-banner {
    position: relative;
    height: 0;
    padding-top: 53.896%;
    background: center / cover url("/images/content/service_summary_bottom_img.jpg");
    margin: 0 auto;
}

.summary-bottom-banner .bottom-banner-txt {
    position: absolute;
    top: 0;
    padding: 14.3rem 0;
}

.summary-bottom-banner .bottom-banner-txt > p {
    font-size: 3.8rem;
    font-weight: 500;
    line-height: 1.6em;
    letter-spacing: -0.015em;
    color: #000;
}

.summary-bottom-banner .bottom-banner-txt > p span {
    color: #24aae1;
}

.summary-bottom-banner .bottom-banner-txt > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22rem;
    height: 6rem;
    box-sizing: border-box;
    border: 2px solid #28262b;
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.5em;
    color: #28262b;
    margin-top: 4.5rem;
    transition: all 0.3s;
}

.summary-bottom-banner .bottom-banner-txt > a:hover {
    background-color: #28262b;
    color: #fff;
}

/* ******************  03. 충전서비스 ********************** */

@media all and (max-width: 1280px) {
    /*** top 컨텐츠 ***/
    .summary-page .summary-tit {
        font-size: 3rem;
    }
    .summary-page .summary-tit span {
        font-size: 3rem;
        left: -37rem;
    }
}

@media all and (max-width: 800px) {
    .summary-page {
        padding-bottom: 8rem;
    }
    /*** top 컨텐츠 ***/
    .summary-top-banner {
        padding-top: 70%;
    }
    .summary-page .summary-tit {
        font-size: 2rem;
    }
    .summary-page .summary-tit span {
        font-size: 2.8rem;
        position: static;
    }
    .summary-top-banner {
        margin-top: 4rem;
    }
    .summary-top-banner .top-banner-txt {
        padding: 6rem 0;
    }
    .summary-top-banner .top-banner-txt > strong {
        font-size: 2.4rem;
    }
    .summary-top-banner .top-banner-txt > p {
        font-size: 1.7rem;
        padding-bottom: 1.5rem;
    }
    /*** 차별화된 통합 서비스 ***/
    .summary-info-con .info-title-box,
    .summary-info-con .info-item-box {
        margin-top: 5rem;
        margin-bottom: 3rem;
    }
    .summary-info-con .info-item-box {
        padding-bottom: 2rem;
    }
    .summary-info-con .info-title-box .info-top-tit {
        font-size: 4rem;
    }
    .summary-info-con .info-item-box .info-item .info-item-tit {
        font-size: 2.4rem;
        padding-bottom: 1rem;
    }
    .summary-info-con .info-item-box .info-item .info-item-txt {
        font-size: 2.4rem;
    }
    .summary-info-con .info-item-box .info-item .info-item-subtxt {
        font-size: 1.6rem;
    }
    .summary-info-con .info-item-box .info-item {
        margin-bottom: 6rem;
    }
    .summary-info-con .info-item-box .info-item,
    .summary-info-con .info-item-box .info-item.reverseFlex {
        flex-direction: column;
        align-items: flex-start;
    }
    .summary-info-con .info-item-box .info-item .img-box,
    .summary-info-con .info-item-box .info-item.reverseFlex .img-box {
        width: 100%;

        margin-left: 0rem;
        display: grid;
        justify-content: center;
    }
    .summary-info-con .info-item-box .info-item .txt-box,
    .summary-info-con .info-item-box .info-item.reverseFlex .txt-box {
        margin-left: 0;
        margin-top: 3rem;
        width: 100%;
    }
    .summary-info-con .info-item-box .info-item img {
        /* max-height: 20rem; */
    }
    .summary-info-con .img-box:nth-child(2) img {
    }
    .summary-bottom-banner {
        padding-top: 93%;
    }
    .summary-bottom-banner .bottom-banner-txt {
        padding: 4.5rem 0;
    }
    .summary-bottom-banner .bottom-banner-txt > p {
        font-size: 2.4rem;
    }
    .summary-bottom-banner .bottom-banner-txt > a {
        margin-top: 2.5rem;
        width: 18rem;
        height: 5rem;
        font-size: 1.6rem;
    }
}

@media all and (max-width: 480px) {
    /*** top 컨텐츠 ***/
    .summary-top-banner .top-banner-txt {
        padding: 30px 0;
    }
    .summary-top-banner .top-banner-txt > strong {
        font-size: 2.55rem;
        letter-spacing: -0.005em;
    }
    .summary-top-banner .top-banner-txt > p {
        font-size: 1.4rem;
    }
    /*** 차별화된 통합 서비스 ***/
    .summary-bottom-banner .bottom-banner-txt {
        padding: 30px 0;
    }
    .summary-bottom-banner .bottom-banner-txt > p {
        font-size: 2.45rem;
    }
    .summary-bottom-banner .bottom-banner-txt > a {
        width: 15rem;
        height: 4rem;
        font-size: 1.6rem;
    }
}