@charset "utf-8";

.page_frame {width:100%; font-size: min(calc(10 / 500 * 100vw), 10px); line-height:28px; word-break: keep-all; word-wrap: break-word;}


/* p101 -----------------------------------------------------------------------*/
.p101 {padding-top: 5em;}
.p101 .p_sec1 {
    display: flex; gap: 2em 5em; align-items: center; justify-content: space-between;
    margin-bottom: 10em;
}
.p101 .p_sec1 .text_box {flex: 1;}
.p101 .p_sec1 .text_box h4 {font-size: max(20px, 3.5em); font-weight: 500; color: #959595; margin-bottom: 0.2em; line-height: 1.2;}
.p101 .p_sec1 .text_box .p_title {font-size: max(25px, 4.5em); font-weight: bold; color: #213071; margin-bottom: 0.7em; line-height: 1.2;}
.p101 .p_sec1 .text_box .text_wrap p {color: #707070; font-size: max(14px, 1.8em); line-height: 1.5; font-weight: 400;}
.p101 .p_sec1 .text_box .text_wrap > p:not(:last-child) {margin-bottom: 1.6666em;}
.p101 .p_sec1 .text_box .text_wrap h5 {
    font-size: max(16px, 2.5em); line-height: 1.2; color: #707070; font-weight: 400;
    text-align: right;
}

@media (1131px <= width <= 1430px) {
    .p101 .p_sec1 .text_box .text_wrap p br {display: none;}
    .p101 .p_sec1 .img {width: 50%;}
    .p101 .p_sec1 .img img {width: 100%;}
}

@media (max-width: 1430px) {
    .p101 .p_sec1 {gap: 6em;}
}

@media (max-width: 1130px) {
    .p101 .p_sec1 {flex-direction: column;}
    .p101 .p_sec1 .text_box {width: 100%; max-width: 750px;}
}


@media (max-width: 768px) {
    .p101 .p_sec1 .text_box {text-align: center;}
    .p101 .p_sec1 .text_box .p_title {font-size: max(25px, 3.8em);}
    .p101 .p_sec1 .text_box .text_wrap h5 {text-align: center;}

    .p101 .p_sec1 .text_box .text_wrap p br {display: none;}
}

.p101 .p_sec2 {display: flex; gap: 14px;}
.p101 .p_sec2 .img2 {display: flex; flex-direction: column; gap: 11px;}

@media (max-width: 768px) {
    .p101 .p_sec2 {flex-direction: column; gap: 11px;}
}

/* p101 끝 -----------------------------------------------------------------------*/


/* p104 -----------------------------------------------------------------------*/
.p104 {padding-top: 5em;}
.p104 .p_sec1 {
    display: flex; gap: 3em 10em; align-items: center; justify-content: center;
    padding-bottom: 5.6em; border-bottom: 2px solid #9097b8;
}
.p104 .p_sec1 .text_box h4 {font-size: max(14px, 1.8em); font-weight: 400; color: #000; margin-bottom: 0.2em; line-height: 1.2;}
.p104 .p_sec1 .text_box h4 span {color: #0090bd;}
.p104 .p_sec1 .text_box .p_title {font-size: max(25px, 4.5em); font-weight: bold; color: #252665; margin-bottom: 0.4em; line-height: 1.2;}
.p104 .p_sec1 .text_box .text_wrap p {color: #313131; font-size: max(14px, 1.8em); line-height: 1.5; font-weight: 400;}
.p104 .p_sec1 .text_box .text_wrap > p:not(:last-child) {margin-bottom: 1.8em;}

@media (1131px <= width <= 1430px) {
    .p104 .p_sec1 .text_box {flex: 1;}
    .p104 .p_sec1 .text_box .text_wrap p br {display: none;}
    .p104 .p_sec1 .img {width: 32%;}
    .p104 .p_sec1 .img img {width: 100%;}
}

@media (max-width: 1130px) {
    .p104 .p_sec1 {flex-direction: column;}
    .p104 .p_sec1 .img {width: 100%; max-width: 300px;}
    .p104 .p_sec1 .img img {width: 100%;}
    .p104 .p_sec1 .text_box {width: 100%; max-width: 750px;}
}


@media (max-width: 768px) {
    .p104 .p_sec1 .text_box {text-align: center;}
    .p104 .p_sec1 .text_box .p_title {font-size: max(25px, 3.8em);}
    .p104 .p_sec1 .text_box .text_wrap h5 {text-align: center;}

    .p104 .p_sec1 .text_box .text_wrap p br {display: none;}
}

.p104 .p_sec2 {display: grid; gap: 6em; grid-template-columns: repeat(2, 1fr); padding-top: 4.5em;}
.p104 .p_sec2 > * > h5 {color: #000; font-weight: bold; font-size: max(15px, 2em); line-height: 1.2; margin-bottom: 0.7em;}
.p104 .p_sec2 .color_box > ul {
    padding: 3.6em 0 4.5em; display: grid; grid-template-columns: repeat(2, 1fr);
    align-items: center; gap: 3em 7.8em;
}
.p104 .p_sec2 .color_box > ul > li {display: flex; align-items: center; gap: 2em;}
.p104 .p_sec2 .color_box > ul > li .circle {--size: 7em; border-radius: 50%; min-width: var(--size); min-height: var(--size);}
.p104 .p_sec2 .color_box > ul > li.item1 .circle {background: #141754;}
.p104 .p_sec2 .color_box > ul > li.item2 .circle {background: #0065b0;}
.p104 .p_sec2 .color_box > ul > li.item3 .circle {background: #0090bd;}
.p104 .p_sec2 .color_box > ul > li.item4 .circle {background: #cde8fe;}

.p104 .p_sec2 .color_box .list {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5em;
}
.p104 .p_sec2 .color_box .list > li {
    color: #707070; font-weight: 500; font-size: max(13px, 2em); white-space: nowrap;
}

@media (max-width: 1130px) {
    .p104 .p_sec2 {grid-template-columns: repeat(1, 1fr); justify-items: center;}
    .p104 .p_sec2 .color_box > ul {width: 100%; max-width: 600px;}
}

@media (max-width: 680px) {
    .p104 .p_sec2 .color_box > ul {gap: 3em;}
}

@media (max-width: 600px) {
    .p104 .p_sec2 > * {width: 100%;}
    .p104 .p_sec2 .color_box > ul {
        gap: 3em; max-width: 100%; grid-template-columns: repeat(2, 1fr);
    }
    .p104 .p_sec2 .color_box > ul > li .circle {--size: 3em;}
    .p104 .p_sec2 .color_box .list {gap: 0 1.5em;}
}

/* p104 끝 -----------------------------------------------------------------------*/