@charset "utf-8";

.sub_con {
    margin-bottom: 0
}

/* 스크린리더 전용 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

/* 미션비전 섹션 */
.mission-vision {}

.mivi {
    display: flex;
    text-align: center;
    position: relative;
}

.mivi dl {
    /* border:1px solid #ddd; */
    width: 100%;
}

.mivi dt {
    font-size: 30px;
    font-weight: 700;
    font-size: var(--sub-h4-size);
    padding: 2rem;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 2rem 2rem 0 0;
}

.mivi dt em {
    font-style: normal;
    font-size: 17px;
    font-weight: 300;
    display: block;
    opacity: .7;
    text-transform: uppercase;
}

.mivi dd {
    font-size: 24px;
    line-height: 1.5;
    padding: 4rem;
    border: 1px solid #ddd;
    border-top: 0;
    height: 60%;
    position: relative;
    border-radius: 0 0 2rem 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mivi .imgbox {
    margin-bottom: 2rem
}

.mivi dd span {
    font-size: 28px;
    font-weight: 700;
    display: inline-block;
}

.mission {
    border-right: 0
}

.mission dt {
    background-color: #157EAC;
}

.mission dd {
    border-right: 0;
}

.mission dd::after {
    content: "&";
    position: absolute;
    font-size: 120px;
    color: #e9e9e9;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 800;
    font-family: 'Escoredream';
    line-height: 1.2;
    margin-right: -50px;
    background-color: #fff;
    z-index: 1;
}

.mission dd span {
    color: #157eac;
}

.vision {}

.vision dt {
    background-color: var(--color-main);
}

.vision dd {}

.vision dd span {
    color: var(--color-main);
}

/* 핵심가치 섹션 */
.core-values {
    background: #ffffff;
    color: #111;
    margin-bottom: var(--sub_pd);
}

.core-values em {
    font-style: normal;
    font-size: 20px;
    font-weight: 300;
    display: block;
    opacity: .7;
}

.core-wrapper {
    position: relative;
    z-index: 1;
}

/* 중앙 원 */
.core-center {
    display: flex;
    justify-content: center;
    /* margin-bottom: 3rem; */
    position: relative;
    z-index: -1;
    margin-top: -50px;
}

.core-title {
    color: #ffffff;
    font-size: 30px;
    font-weight: 700;
    z-index: 1;
    width: 380px;
    height: 380px;
    background: linear-gradient(135deg, #21A8D9 10%, #157EAC 40%, #2D51A3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 50px solid #fff;
    padding-top: 4rem;
    margin-top: -50px;
}

.core-title:after {
    content: "";
    position: absolute;
    background-image: url(/img/page/mission/logo_bgi.svg);
    width: 196px;
    height: 146px;
    background-repeat: no-repeat;
    top: -3%;
}

.core-center:before {
    content: "";
    position: absolute;
    width: 626px;
    height: 313px;
    border-radius: 0 0 313px 313px;
    top: 50%;
    background-color: #fff;
    background-image: linear-gradient(180deg, rgb(255 255 255 / 50%), rgb(137 187 218 / 20%));
}

/* 핵심가치 목록 */
.core-list {
    padding: 0;
    margin: 0;
    display: flex;
    width: 100%;
    height: auto;
    /* gap: 1rem; */
}

.core-item {
    text-align: center;
    padding: 0 1rem;
    position: relative;
    width: 20%;
}

.core-item:after {
    content: "";
    position: absolute;
    width: 1px;
    height: 60%;
    background-color: #ddd;
    bottom: 0;
    right: 0
}

.core-item:last-child::after {
    display: none
}

.core-item span {
    width: 120px;
    height: 120px;
    display: inline-block;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.core-item:first-child span {
    background-color: #21A8D9
}

.core-item:nth-child(2) span {
    background-color: #2D51A3
}

.core-item:nth-child(3) span {
    background-color: #157EAC
}

.core-item:nth-child(4) span {
    background-color: #3975CE
}

.core-item:nth-child(5) span {
    background-color: #1B2D63
}

.core-item .txt {
    margin-top: 2rem;
}

.core-item h5 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 1rem;
}

.core-item:first-child h5 {
    color: #21A8D9
}

.core-item:nth-child(2) h5 {
    color: #2D51A3
}

.core-item:nth-child(3) h5 {
    color: #157EAC
}

.core-item:nth-child(4) h5 {
    color: #3975CE
}

.core-item:nth-child(5) h5 {
    color: #1B2D63
}

.core-item p {
    word-break: keep-all;
    margin-top: 1rem;
}

/* 인재상 섹션 */
.sub_con .talent {
    margin-top: 0;
    background-color: #f7f8f9;
    padding: var(--sub_pd) 0;
}

.talent-wrap {
    display: flex;
}

.talent-img {
    width: 40%;
    text-align: center;
    /* height: 100%; */
    padding: 1rem 0;
}

/*
.pccgi-list {
    width: 60%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.pccgi-list li {}

.pccgi-list dl {
    display: flex;
    align-items: center;
}

.pccgi-list dt {
    width: 22%;
    color: var(--color-main);
}

.pccgi-list dt p {
    font-size: 22px;
    color: rgb(45 81 163 / 70%);
}

.pccgi-list dt p span {
    font-weight: 700
}

.pccgi-list li:first-child dt p span {
    color: #fcc701
}

.pccgi-list li:nth-child(2) dt p span {
    color: #f6a901
}

.pccgi-list li:nth-child(3) dt p span {
    color: #ef7d02
}

.pccgi-list li:nth-child(4) dt p span {
    color: #e9480d
}

.pccgi-list li:nth-child(5) dt p span {
    color: #e52414
}

.pccgi-list dt strong {
    font-size: 22px;
}

.pccgi-list dd {
    width: 78%;
    word-break: keep-all;
    font-size: 19px;
    line-height: 1.6;
} */

/* PC */
@media only screen and (min-width:1024px) and (max-width: 1500px) {}

/* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1023px)*/
@media all and (max-width:1023px) {
    .mivi dd p {
        word-break: auto-phrase;
    }

    .mivi dd {
        padding: 3rem;
    }

    .mission dd::after {
        font-size: 100px
    }

    .core-list {
        flex-wrap: wrap;
        justify-content: center;
        gap: 2rem 1rem;
    }

    .core-item {
        width: 31%;
    }

    .core-item:after {
        right: unset;
        left: 0;
        width: 100%;
        height: 1px;
    }

    .talent-list {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.5rem;
    }

    .talent-list li {
        width: 48%
    }

    .talent-list:before {
        display: none
    }
}

/* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/
@media all and (max-width:767px) {
    .mivi {
        flex-wrap: wrap;
        gap: 2rem;
    }

    .mivi dd {
        padding: 2rem;
        height: auto;
    }

    .mission dd::after {
        display: none
    }

    .mivi dd span {
        padding-bottom: .5rem;
        font-size: 24px
    }

    .core-list {
        gap: 0;
    }

    .core-item {
        width: 100%;
        padding: 2rem 0;
    }

    .talent-list li {
        width: 100%
    }
}